/* ============================================================
   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);

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

  /* Accent — Warm Gold */
  --accent-purple: #C9A84C;
  --accent-purple-glow: rgba(201, 168, 76, 0.1);

  /* Status Colors */
  --color-new: #0F1F3D;
  --color-new-bg: #F5F0E8;
  --color-investigating: #0F1F3D;
  --color-investigating-bg: #EDE8DF;
  --color-resolved: #166534;
  --color-resolved-bg: #F0FAF0;
  --color-dismissed: #6B7280;
  --color-dismissed-bg: #F5F0E8;

  /* Relevance Colors */
  --rel-essential: #92400E;
  --rel-essential-bg: #FEF3C7;
  --rel-high: #92400E;
  --rel-high-bg: #FEF3C7;
  --rel-medium: #0F1F3D;
  --rel-medium-bg: #F5F0E8;
  --rel-low: #166534;
  --rel-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;
}

* { 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: #D4CEC4; 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: #D4CEC4;
}

/* 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 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  padding-left: 0.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}

.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: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

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

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

/* The Capitolivm seal (sprite #capitolium-seal in index.html): sidebar and login
   card. Deep gold on the light theme, bright gold on the dark one. */
.seal-mark { display: block; width: 100%; height: 100%; color: #8F7526; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .seal-mark { color: #C9A84C; }

.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: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.brand-name-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B8974A;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex-grow: 1;
}

.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: 0.875rem;
  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-purple);
  color: #0F1F3D;
  font-weight: 600;
}

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

.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: 800;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: #E3C671;
  text-shadow: 0 0 8px rgba(227, 198, 113, 0.4);
  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: 0.78rem;
  color: var(--text-primary);
}

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

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

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

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

.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: 0.83rem;
  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: 0.75rem;
  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(--color-resolved); }
.connection-status.disconnected .status-dot { background-color: var(--rel-essential); }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  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: #D4CEC4;
  color: var(--text-primary);
}

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

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

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

.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-purple);
  border: 1px solid rgba(201, 168, 76, 0.2);
}

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

.metric-icon.inprogress {
  background-color: var(--color-investigating-bg);
  color: var(--color-investigating);
  border: 1px solid #C9A84C;
}

.metric-icon.completed {
  background-color: var(--color-resolved-bg);
  color: var(--color-resolved);
  border: 1px solid #a7f3d0;
}

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

.metric-label {
  font-size: 0.7rem;
  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: 0.82rem;
  transition: var(--transition-smooth);
}

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

.search-box input:focus {
  outline: none;
  border-color: var(--accent-purple);
  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 label {
  font-size: 0.75rem;
  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: 0.82rem;
  font-family: var(--font-family);
  cursor: pointer;
  transition: var(--transition-smooth);
  appearance: auto;
}

.quick-update-label { align-self: center; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }

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

/* 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: 0.82rem;
}

.triage-table th {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.6px;
  background-color: #F5F0E8;
  white-space: nowrap;
}

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

.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: 0.83rem;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #E8E2D9;
  border-top-color: var(--accent-purple);
  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: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Status */
.badge-status-new {
  background-color: var(--color-new-bg);
  color: var(--color-new);
  border: 1px solid #E8E2D9;
}
.badge-status-in-progress {
  background-color: var(--color-investigating-bg);
  color: var(--color-investigating);
  border: 1px solid #C9A84C;
}
.badge-status-completed {
  background-color: var(--color-resolved-bg);
  color: var(--color-resolved);
  border: 1px solid #a7f3d0;
}

/* Relevance */
.badge-rel-essential {
  background-color: var(--rel-essential-bg);
  color: var(--rel-essential);
  border: 1px solid #C9A84C;
}
.badge-rel-high {
  background-color: var(--rel-high-bg);
  color: var(--rel-high);
  border: 1px solid #C9A84C;
}
.badge-rel-medium {
  background-color: var(--rel-medium-bg);
  color: var(--rel-medium);
  border: 1px solid #E8E2D9;
}
.badge-rel-low {
  background-color: var(--rel-low-bg);
  color: var(--rel-low);
  border: 1px solid #a7f3d0;
}

/* Table item display */
.item-meta {
  font-size: 0.7rem;
  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: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background-color: #EEF0F4;
  border: 1px solid #C3CAD6;
  color: #47536B;
}

/* 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; }

/* "Also known as" chips — alternate names / key people fed to the matcher. */
.alias-hint {
  font-size: 0.72rem;
  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: 0.75rem;
  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: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  background-color: #EEF0F4;
  border: 1px solid #C3CAD6;
  color: #47536B;
  cursor: default;
}
.contracts-chip-done {
  background-color: var(--color-resolved-bg);
  border-color: #a7f3d0;
  color: var(--color-resolved);
}

/* ============================================================
   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(--gold, #C9A84C);
  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: 0.7rem; 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: 0.72rem; 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; }

.an-bars { display: flex; flex-direction: column; gap: 0.55rem; }
.an-bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 0.7rem; }
.an-bar-label { font-size: 0.8rem; color: var(--text-primary); font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
.an-conv { font-size: 0.66rem; 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, #C9A84C, #E4C878); }
.an-fill-navy { background: linear-gradient(90deg, #33527E, #4A6DA0); }
.an-fill-won { background: #2C7A4B; }
.an-fill-lost { background: #B4886A; }
.an-bar-value { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); text-align: right; white-space: nowrap; }
.an-bar-sub { font-size: 0.68rem; color: var(--text-muted); font-weight: 500; }
.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-bar-row { grid-template-columns: 100px 1fr 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-purple); }
.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: 0.85rem; }
.bulk-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bulk-controls select {
  font-size: 0.8rem;
  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: 0.6rem;
  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: 0.77rem;
  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: 0.83rem;
}

.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: #F5F0E8;
}

.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: 0.63rem;
  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);
}

.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: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  border-left: 2px solid var(--accent-purple);
  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: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

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

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

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

/* Status Buttons */
.status-button-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.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: 0.77rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

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

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

.btn-status.active[data-status="In Progress"] {
  border-color: #C9A84C;
  background-color: var(--color-investigating-bg);
  color: var(--color-investigating);
}

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

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

.dot-new        { background-color: var(--color-new); }
.dot-inprogress { background-color: var(--color-investigating); }
.dot-completed  { background-color: var(--color-resolved); }

/* 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: #D4CEC4;
  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: 0.7rem;
  align-items: center;
}

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

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

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

.no-notes {
  font-size: 0.77rem;
  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: 0.82rem;
  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-purple);
  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-purple);
  color: var(--accent-purple);
  background-color: rgba(201, 168, 76, 0.08);
}

/* Drawer Backdrop */
.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  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-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.6rem;
  padding-left: 0;
  padding-bottom: 1.5rem;
  align-items: center;
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.app-container.sidebar-collapsed .btn-sidebar-toggle { 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-purple);
}

/* 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(--rel-essential);
}

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

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

  /* Deep navy void with a gold aurora up top and cool blue haze at right */
  background:
    radial-gradient(1000px 520px at 18% -10%, rgba(201, 168, 76, 0.10), transparent 55%),
    radial-gradient(900px 600px at 88% 12%, rgba(46, 86, 166, 0.22), transparent 60%),
    radial-gradient(1200px 800px at 50% 122%, rgba(3, 7, 16, 0.92), transparent 65%),
    linear-gradient(160deg, #0A1326 0%, #060D1E 55%, #04070F 100%);
}

/* Fine circuitry grid, faded out toward the edges */
.login-container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(94, 142, 222, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 142, 222, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 25%, transparent 75%);
}

/* Ambient scene: drifting aurora orbs + a perspective grid floor */
.login-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.55;
  animation: lg-orb-drift 18s ease-in-out infinite alternate;
}

.login-orb-gold {
  width: 380px;
  height: 380px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.32), transparent 70%);
}

.login-orb-blue {
  width: 500px;
  height: 500px;
  bottom: -180px;
  right: -140px;
  background: radial-gradient(circle, rgba(58, 110, 206, 0.38), transparent 70%);
  animation-delay: -9s;
}

@keyframes lg-orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(46px, 32px, 0) scale(1.12); }
}

.login-grid-floor {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 190%;
  height: 58%;
  transform: translateX(-50%) perspective(620px) rotateX(62deg);
  background-image:
    linear-gradient(rgba(201, 168, 76, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 142, 222, 0.13) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.55), transparent 85%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.55), transparent 85%);
}

/* The card border is a slowly-rotating conic gradient (gold ↔ ice blue)
   shown through a transparent 1px border; the halo comes from box-shadows. */
@property --lg-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.login-card {
  width: 100%;
  max-width: 430px;
  position: relative;
  border-radius: 20px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #101F3A 0%, #0B1730 100%) padding-box,
    conic-gradient(from var(--lg-angle),
      rgba(232, 199, 102, 0.95),
      rgba(76, 125, 208, 0.25) 25%,
      rgba(120, 180, 255, 0.9) 50%,
      rgba(76, 125, 208, 0.25) 75%,
      rgba(232, 199, 102, 0.95)) border-box;
  animation: lg-border-spin 8s linear infinite;
  box-shadow:
    0 0 44px rgba(76, 125, 208, 0.18),
    0 0 90px rgba(201, 168, 76, 0.10),
    0 28px 64px rgba(0, 0, 0, 0.55);
}

@keyframes lg-border-spin {
  to { --lg-angle: 360deg; }
}

/* Top sheen — a thin light catch along the card's upper edge */
.login-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, 0.55), transparent);
  pointer-events: none;
}

.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.95rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(94, 142, 222, 0.14);
}

.login-logo {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(201, 168, 76, 0.14), rgba(76, 125, 208, 0.10));
  border: 1px solid rgba(201, 168, 76, 0.38);
  box-shadow:
    0 0 20px rgba(201, 168, 76, 0.18),
    inset 0 0 14px rgba(201, 168, 76, 0.08);
}

.login-logo svg {
  width: 32px;
  height: 34px;
}

/* The medallion is round raster art: keep it square and let it fill the
   frame (the 32x34 box above was the hexagon's and squashed it off-centre). */
.login-logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.login-title-group h2 {
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: 0.24rem;
  background: linear-gradient(100deg, #F4E5B4 0%, #E3C671 45%, #C9A84C 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-title-group p {
  font-size: 0.62rem;
  color: #7E93B8;
  letter-spacing: 0.14em;
  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: 0.6rem;
  font-weight: 700;
  color: #AAB9D4;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.forgot-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 500;
  color: #C9A84C;
  font-family: var(--font-family);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.forgot-link:hover {
  color: #F0D68A;
  text-shadow: 0 0 12px rgba(227, 198, 113, 0.55);
}
.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: #5A6E92;
  pointer-events: none;
  transition: color 0.2s ease;
}

.input-wrapper:focus-within > i,
.input-wrapper:focus-within > svg { color: #E3C671; }

.input-wrapper input {
  width: 100%;
  background-color: rgba(8, 16, 32, 0.75);
  border: 1px solid #24385C;
  padding: 0.68rem 2.6rem 0.68rem 2.2rem;
  border-radius: 9px;
  color: #E9EDF5;
  font-family: var(--font-family);
  font-size: 0.835rem;
  transition: border-color 0.2s ease, background-color 0.15s ease, box-shadow 0.2s ease;
}

.input-wrapper input::placeholder { color: #46587A; }

.input-wrapper input:focus {
  outline: none;
  background-color: rgba(10, 20, 40, 0.95);
  border-color: rgba(227, 198, 113, 0.65);
  box-shadow:
    0 0 0 3px rgba(227, 198, 113, 0.10),
    0 0 20px rgba(227, 198, 113, 0.14);
}

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

.input-eye-btn:hover { color: #AAB9D4; }

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

.login-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(240, 100, 100, 0.35);
  color: #F1A8A8;
  padding: 0.62rem 0.8rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.08);
}

.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: rgba(34, 110, 72, 0.16);
  border: 1px solid rgba(80, 190, 130, 0.35);
  color: #7BD8A0;
  padding: 0.62rem 0.8rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 0 16px rgba(34, 110, 72, 0.10);
}

.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: 0.865rem;
  border-radius: 9px;
  margin-top: 0.2rem;
  border: 1px solid transparent;
  transition: var(--transition-smooth), transform 0.22s ease;
}

/* Sign In — molten gold with a glow halo and a sweeping shine on hover.
   Doubled with the dark-theme selector so it outranks the global gold flip. */
.login-form .btn-primary,
:root[data-theme="dark"] .login-form .btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #EDD289 0%, #D4AF37 52%, #C29A2E 100%);
  color: #0B1424;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 228, 150, 0.55);
  box-shadow:
    0 0 22px rgba(212, 175, 55, 0.28),
    0 8px 20px rgba(0, 0, 0, 0.4);
}

.login-form .btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.login-form .btn-primary:hover:not(:disabled),
:root[data-theme="dark"] .login-form .btn-primary:hover:not(:disabled) {
  background: linear-gradient(120deg, #F4DE9C 0%, #DDB944 52%, #CBA338 100%);
  transform: translateY(-1.5px);
  box-shadow:
    0 0 34px rgba(212, 175, 55, 0.45),
    0 10px 26px rgba(0, 0, 0, 0.45);
}

.login-form .btn-primary:hover:not(:disabled)::before { left: 125%; }

.login-form .btn-primary:active,
:root[data-theme="dark"] .login-form .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
}

/* "or" divider between password + Google sign-in */
.login-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.15rem 0;
  color: #61759B;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.login-or span { flex-shrink: 0; }
.login-or::before,
.login-or::after {
  content: "";
  flex: 1;
  height: 1px;
}
.login-or::before {
  background: linear-gradient(90deg, transparent, rgba(94, 142, 222, 0.30));
}
.login-or::after {
  background: linear-gradient(90deg, rgba(94, 142, 222, 0.30), transparent);
}

.btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.72rem 1rem;
  background: rgba(13, 24, 46, 0.85);
  border: 1px solid #2C4166;
  border-radius: 9px;
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 600;
  color: #E9EDF5;
  cursor: pointer;
  transition: var(--transition-smooth), transform 0.22s ease;
}
.btn-google:hover:not(:disabled) {
  background: rgba(20, 35, 62, 0.95);
  border-color: rgba(120, 180, 255, 0.6);
  box-shadow:
    0 0 22px rgba(76, 125, 208, 0.28),
    inset 0 0 16px rgba(76, 125, 208, 0.06);
  transform: translateY(-1px);
}
.btn-google:disabled { opacity: 0.6; cursor: default; }
.btn-google svg { flex-shrink: 0; }

.login-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  font-size: 0.6rem;
  color: #61759B;
  letter-spacing: 0.05em;
  border-top: 1px solid rgba(94, 142, 222, 0.12);
  padding-top: 1rem;
}

.login-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #C9A84C;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.58rem;
}

.login-secure i,
.login-secure svg { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) {
  .login-card, .login-orb { animation: none; }
  .login-form .btn-primary::before { display: none; }
}

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

.row-rel-essential { box-shadow: inset 3px 0 0 var(--rel-essential); }
.row-rel-high      { box-shadow: inset 3px 0 0 var(--rel-high); }
.row-rel-medium    { box-shadow: inset 3px 0 0 var(--rel-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: #fca5a5; }
.drawer[data-relevance="High"]      { border-left-color: #fdba74; }
.drawer[data-relevance="Medium"]    { border-left-color: #fcd34d; }
.drawer[data-relevance="Low"]       { border-left-color: #6ee7b7; }

/* ============================================================
   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-purple);
  font-size: 0.58rem;
  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;
  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: #F5F0E8;
  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-purple);
  font-size: 0.62rem;
  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: 0.7rem;
  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: 0.875rem;
  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-purple);
  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: 0.7rem;
  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: 0.75rem;
  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: 0.73rem;
  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 input[type="url"],
.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: 0.82rem;
  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 input[type="url"]:focus,
.log-field-group select:focus {
  outline: none;
  border-color: var(--accent-purple);
  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: 0.82rem;
  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-purple);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

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

/* 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: 0.72rem;
  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: 0.83rem;
  padding: 2rem 0;
  justify-content: center;
}

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

.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: #F5F0E8;
  border-bottom: 1px solid var(--border-color);
}

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

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

.log-project-badge {
  font-size: 0.62rem !important;
  padding: 0.1rem 0.38rem !important;
}

.log-card-project {
  font-size: 0.73rem;
  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: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

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

.log-card-field p {
  font-size: 0.83rem;
  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-purple);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  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: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-purple);
}

.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: 0.83rem;
  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: 0.7rem;
  color: var(--text-muted);
}

.log-card-id {
  font-family: monospace;
  font-size: 0.67rem;
  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: 0.6rem;
  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: 0.67rem;
  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: 0.78rem;
  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-purple);
  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: 0.65rem;
  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: 0.78rem;
  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: #D4CEC4;
}

.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: 0.78rem;
  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: #D4CEC4; 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: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  flex-grow: 1;
}

.pipeline-col-count {
  font-size: 0.7rem;
  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: 7px;
  background-color: var(--dl-bg);
  color: var(--dl-color);
  font-size: 0.62rem;
  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: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.deal-contact {
  font-size: 0.72rem;
  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(--color-resolved); }

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

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

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

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

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

/* ============================================================
   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: 0.82rem;
  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(--color-resolved); }
.team-status-away   { background-color: #f59e0b; }
.team-status-offline { background-color: var(--text-muted); }

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

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

.team-email {
  font-size: 0.72rem;
  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: 0.62rem;
  font-weight: 600;
  color: var(--accent-purple);
  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: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}

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

.health-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
}

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

.health-green  { background-color: var(--color-resolved); }
.health-yellow { background-color: #f59e0b; }
.health-red    { background-color: var(--rel-essential); }

.triage-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-purple);
  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
   ============================================================ */

/* Lead status badges */
.badge-status-hot {
  background-color: var(--rel-essential-bg);
  color: var(--rel-essential);
  border: 1px solid #C9A84C;
}
.badge-status-active {
  background-color: var(--color-investigating-bg);
  color: var(--color-investigating);
  border: 1px solid #C9A84C;
}
.badge-status-stalled {
  background-color: var(--color-dismissed-bg);
  color: var(--color-dismissed);
  border: 1px solid #E8E2D9;
}
.badge-status-closed-won {
  background-color: var(--color-resolved-bg);
  color: var(--color-resolved);
  border: 1px solid #a7f3d0;
}
.badge-status-closed-lost {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}
/* Early-funnel stages: cool slate (cold) → sky (outreach made). */
.badge-status-cold-lead {
  background-color: #EEF2F7;
  color: #475569;
  border: 1px solid #CBD5E1;
}
.badge-status-reached-out {
  background-color: #E0F2FE;
  color: #0369A1;
  border: 1px solid #7DD3FC;
}

/* Status transition dots */
.dot-cold-lead   { background-color: #64748B; }
.dot-reached-out { background-color: #0EA5E9; }
.dot-hot         { background-color: var(--rel-essential); }
.dot-active      { background-color: var(--color-investigating); }
.dot-stalled     { background-color: var(--color-dismissed); }
.dot-closed-won  { background-color: var(--color-resolved); }
.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: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

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

/* All Prospects dataframe — tabular numeric cells */
.df-num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  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: 0.66rem;
  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(--rel-essential-bg);
  border-color: #C9A84C;
  color: var(--rel-essential);
}
/* 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: #EEF0F4;
  border-color: #C3CAD6;
  color: #47536B;
}
.cell-followup .date-pill { margin-top: 0; }

/* Drawer status attribution caption */
.status-caption {
  margin-top: 0.55rem;
  font-size: 0.7rem;
  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: 0.8rem;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition-smooth);
}
.next-touch-editor input:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px var(--accent-purple-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: 0.78rem;
  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: 0.9rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.followup-header-overdue { color: #991B1B; }
.followup-header-soon    { color: var(--rel-essential); }
.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: 0.62rem;
  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: 0.76rem;
  color: var(--text-secondary);
}
.note-structured li { margin-bottom: 0.15rem; }

.note-source {
  margin-top: 0.4rem;
  font-size: 0.64rem;
  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: 0.72rem;
}
.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 #C9A84C;
  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: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--rel-essential);
  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: 0.62rem;
  text-transform: capitalize;
}
.sentiment-positive { background-color: var(--color-resolved-bg); color: var(--color-resolved); }
.sentiment-neutral  { background-color: var(--color-dismissed-bg); color: var(--color-dismissed); }
.sentiment-negative { background-color: #FEE2E2; color: #991B1B; }

.call-preview-summary {
  font-size: 0.8rem;
  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-purple);
}

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

/* Date (first) column — timeAgo primary + absolute date underneath */
.cell-date .date-primary {
  font-weight: 600;
  font-size: 0.8rem;
  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: 0.78rem;
  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: #F5F0E8;
  border-color: var(--accent-purple);
}

.drawer-reopen-tab i,
.drawer-reopen-tab svg {
  width: 16px;
  height: 16px;
  color: var(--accent-purple);
  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: 0.72rem;
  font-weight: 600;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}
.btn-timeline-expand:hover {
  background-color: #F5F0E8;
  border-color: var(--accent-purple);
  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: 0.75rem;
}

/* 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: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--rel-essential);
}
.timeline-summary-head-label i,
.timeline-summary-head-label svg { width: 15px; height: 15px; }

.timeline-summary-empty {
  font-size: 0.82rem;
  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: 0.85rem;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 0.55rem;
}

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

/* Momentum pills */
.momentum-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.momentum-heating_up { background-color: var(--rel-essential-bg); color: var(--rel-essential); }
.momentum-steady     { background-color: var(--color-resolved-bg); color: var(--color-resolved); }
.momentum-stalled    { background-color: #FEF3C7; color: #92400E; }
.momentum-cooling    { background-color: var(--color-new-bg); color: var(--color-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: 0.62rem;
  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-purple);
}
.dossier-card-hot { border-left: 2px solid var(--rel-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: 0.6rem;
  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: #C9A84C;
  color: var(--rel-essential);
  background-color: var(--rel-essential-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: 0.6rem;
  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(--rel-essential); }

.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: 0.66rem;
  font-weight: 700;
  background-color: #F5F0E8;
  border: 1px solid var(--border-color);
  color: var(--color-new);
  white-space: nowrap;
}
.dossier-status-meta {
  margin-left: auto;
  font-size: 0.64rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.dossier-block { display: flex; flex-direction: column; gap: 0.3rem; }
.dossier-block-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dossier-block p {
  font-size: 0.78rem;
  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: 0.58rem;
  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(--color-new-bg);
  color: var(--color-new);
  border: 1px solid var(--border-color);
  vertical-align: 1px;
}
.dossier-line-tag.tag-next {
  background-color: var(--rel-essential-bg);
  color: var(--rel-essential);
  border-color: #C9A84C;
}
.dossier-line-date { color: var(--text-muted); font-size: 0.72rem; }
.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: 0.68rem; 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: 0.82rem;
  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-purple);
  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: 0.74rem;
  font-weight: 700;
  background-color: var(--rel-essential-bg);
  color: var(--rel-essential);
  border: 1px solid #C9A84C;
  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: 0.74rem;
  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-purple); 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: 0.6rem;
  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: 0.7rem; color: var(--text-muted); margin-top: 0.3rem; }

.np-error {
  font-size: 0.78rem;
  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-purple);
}

.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: 0.78rem;
  color: var(--text-primary);
  line-height: 1.45;
}
.changelog-line strong { font-weight: 700; }

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

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

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

/* By-owner rollup: rows are clickable to filter the queue */
#cmd-owner-rollup tbody tr { cursor: pointer; }
#cmd-owner-rollup tbody tr:hover { background-color: var(--bg-hover); }
#cmd-owner-rollup tbody tr.selected {
  background-color: var(--bg-hover);
  box-shadow: inset 3px 0 0 var(--accent-purple);
}

.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: 0.72rem;
  font-weight: 700;
  background-color: #EEF0F4;
  color: #47536B;
}
.cmd-count-overdue { background-color: #FEE2E2; color: #991B1B; }
.cmd-count-stalled { background-color: #EEF0F4; 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-purple);
}
.cmd-row-status { margin-top: 0.28rem; }
.cmd-row-status .badge { font-size: 0.62rem; }

.cmd-clear {
  margin-left: 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--accent-purple);
  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: 0.66rem;
  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: #D4AF37; }

.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: 0.78rem;
  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-purple); 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(212, 175, 55, 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: 0.9rem;
  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: 0.9rem;
  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: #B8860B; }

/* 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: 8px;
  font-family: var(--font-family);
  font-size: 0.8rem;
  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-purple);
  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: 7px;
  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: 0.6rem;
  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: 8px;
  font-family: var(--font-family);
  font-size: 0.8rem;
  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(212, 175, 55, 0.55); }
.dp-day.dp-sel {
  background: var(--accent-purple);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.4);
}
.dp-day.dp-sel:hover { background: #B8974A; }

.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: 0.75rem;
  font-weight: 600;
  color: #B8860B;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  transition: var(--transition-smooth);
}
.dp-foot button:hover { color: var(--accent-purple); 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: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--accent-purple);
  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: 0.98rem;
  color: var(--text-primary);
  line-height: 1.3;
}

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

.mn-conf {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  white-space: nowrap;
}
.mn-conf.conf-high { color: #166534; background: #F0FAF0; 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: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.cal-guests { color: var(--text-muted); }

.mn-raw {
  font-size: 0.8rem;
  border-top: 1px dashed var(--border-color);
  padding-top: 0.65rem;
}
.mn-raw summary {
  cursor: pointer;
  color: var(--accent-purple);
  font-weight: 600;
  font-size: 0.76rem;
  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: 0.8rem;
  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: 0.76rem;
  font-weight: 600;
  color: var(--accent-purple);
}

.mn-assign {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mn-assign-label {
  font-size: 0.72rem;
  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: 0.85rem;
  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: #D4CEC4; }
.mn-select:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px var(--accent-purple-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: 0.83rem;
  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-purple);
  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: 0.78rem;
  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(--color-investigating, #C9A84C); }
.mn-verify {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--color-investigating, #8a6d1f);
  background: var(--color-investigating-bg, rgba(201, 168, 76, 0.12));
  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: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.mn-owner-names {
  font-size: 0.82rem;
  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: 0.85rem;
  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-purple);
  box-shadow: 0 0 0 3px var(--accent-purple-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: 0.83rem;
  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: #D4CEC4; }
.mn-filter-input:focus,
.mn-filter-owner:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px var(--accent-purple-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: 0.76rem;
  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-purple);
  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 Mine / All toggle (data-admins only) */
.mn-scope-toggle {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.mn-scope-toggle button {
  padding: 0.32rem 0.7rem;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.mn-scope-toggle button:hover { 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.08);
}

/* Approve button — navy primary with count */
.mn-approve-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 38px;
  padding: 0 0.95rem;
  font-family: var(--font-family);
  font-size: 0.83rem;
  font-weight: 600;
  color: #fff;
  background: #0F1F3D;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(15, 31, 61, 0.18);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.mn-approve-all:hover:not(:disabled) {
  background: #162d4a;
  box-shadow: 0 4px 10px rgba(201, 168, 76, 0.22);
}
.mn-approve-all:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.mn-approve-all i, .mn-approve-all svg { width: 15px; height: 15px; }

/* ============================================================
   TOASTS + THEMED CONFIRM
   ============================================================ */
.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: 0.83rem;
  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-purple); 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: 8px;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-family);
  font-size: 0.76rem;
  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: 0.85rem; 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: 0.83rem;
  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: 0.85rem; color: var(--text-primary); }
.tconfirm-digest-sub {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  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: 0.8rem;
  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;
}

/* ============================================================
   ⌘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: 0.95rem;
  color: var(--text-primary);
}
.palette-input-row kbd {
  font-size: 0.66rem;
  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: 0.66rem;
  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: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  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: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.palette-empty { padding: 1.1rem; text-align: center; font-size: 0.82rem; 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-purple);
  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: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.board-col-sum {
  padding: 0 0.8rem 0.5rem;
  font-size: 0.7rem;
  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: #D4CEC4; }
.board-card:active { cursor: grabbing; }
.board-card.dragging { opacity: 0.45; }
.board-card-name { font-weight: 600; font-size: 0.82rem; color: var(--text-primary); line-height: 1.3; }
.board-card-next { font-size: 0.73rem; 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: 0.76rem; }

/* ============================================================
   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;
}
.cmd-stage-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 88px 40px;
  align-items: center;
  gap: 1rem;
}
.cmd-stage-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.cmd-stage-label .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmd-stage-track {
  height: 10px;
  border-radius: 5px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.cmd-stage-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.cmd-stage-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cmd-stage-count {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cmd-stage-empty { font-size: 0.82rem; color: var(--text-muted); padding: 0.6rem 0; }
@media (max-width: 700px) {
  .cmd-stage-row { grid-template-columns: 96px minmax(0, 1fr) 70px 32px; gap: 0.6rem; }
}

/* ============================================================
   DARK MODE — navy ground, gold accent
   ============================================================ */
:root[data-theme="dark"] {
  --bg-primary: #0B1424;
  --bg-secondary: #101C30;
  --bg-surface: #17263F;
  --bg-card: #17263F;
  --bg-hover: #223451;
  --border-color: #2E4569;
  --border-glow: rgba(201, 168, 76, 0.15);
  --text-primary: #E9EDF5;
  --text-secondary: #9AA7BC;
  --text-muted: #6B7A93;
  --color-new: #E9EDF5;          --color-new-bg: #1B2A44;
  --color-investigating: #E9EDF5; --color-investigating-bg: #22344F;
  --color-resolved: #7BD8A0;     --color-resolved-bg: rgba(34, 110, 72, 0.25);
  --color-dismissed: #9AA7BC;    --color-dismissed-bg: #1B2A44;
  --rel-essential: #E3C671;      --rel-essential-bg: rgba(201, 168, 76, 0.16);
  --rel-high: #E3C671;           --rel-high-bg: rgba(201, 168, 76, 0.16);
  --rel-medium: #C9D4E6;         --rel-medium-bg: #22344F;
  --rel-low: #7BD8A0;            --rel-low-bg: rgba(34, 110, 72, 0.22);
}

/* 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-purple);
  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(--color-resolved-bg);
  border-color: #2C6E48;
  color: var(--color-resolved);
}
:root[data-theme="dark"] .toast { background: #1B2A44; border: 1px solid #2C4166; }
: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-cold-lead   { background: #22344F; color: #A9B8CE; border-color: #33496B; }
:root[data-theme="dark"] .badge-status-reached-out { 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; }

/* Sidebar hexagon: the navy strokes/joints flip to ivory so the mark reads */

/* Dark-mode fixes for hardcoded light surfaces spotted in review */
:root[data-theme="dark"] .triage-table th { background-color: var(--bg-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: 0.78rem;
  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: 0.83rem;
}
#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: 0.8rem;
  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-purple); }
.mn-nexttouch strong { color: var(--text-primary); font-weight: 600; }
.mn-nt-check {
  width: 15px;
  height: 15px;
  accent-color: var(--accent-purple);
  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: 0.98rem;
  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: 0.74rem;
  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: 0.68rem;
  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: 0.86rem; 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: 0.76rem;
  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-purple); 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: 0.82rem; border-top: 1px dashed var(--border-color); padding-top: 0.65rem; }
.mtg-details summary {
  cursor: pointer;
  color: var(--accent-purple);
  font-weight: 600;
  font-size: 0.78rem;
  user-select: none;
}
.mtg-details summary:hover { text-decoration: underline; }
.mtg-block { margin-top: 0.7rem; }
.mtg-block-label {
  font-size: 0.68rem;
  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: 0.82rem; line-height: 1.45; color: var(--text-secondary); }
.mtg-doclink { display: inline-block; margin-top: 0.7rem; font-size: 0.76rem; font-weight: 600; color: var(--accent-purple); }

/* 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: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.mtg-team-names {
  font-size: 0.8rem;
  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; }
}

@media (max-width: 700px) {

  /* ---------- Global ---------- */
  /* The closed drawer parks at translateX(100%), which counts as scrollable
     overflow once the body (not .app-container) is the scroller — without
     this the whole app pans sideways into blank space. */
  html, body { overflow-x: hidden; }

  .main-content {
    padding: 1rem;
    /* Clear the fixed bottom tab bar. */
    padding-bottom: calc(1rem + 68px + env(safe-area-inset-bottom));
  }
  .top-bar { flex-wrap: wrap; gap: 0.6rem; }

  /* 16px inputs prevent iOS Safari's focus auto-zoom. */
  .search-box input,
  .filter-group select,
  .mn-filter-input,
  .mn-filter-owner,
  .enriched-dialog-body textarea,
  .add-prospect-body textarea,
  .add-prospect-grid input,
  .add-prospect-grid select,
  .log-field-group input,
  .log-field-group select,
  .log-field-group textarea,
  .next-touch-editor input,
  .add-note-form textarea,
  .login-form input { font-size: 16px; }

  /* Two-up stat tiles: a 4-figure burn ("$688.09") must fit its tile. */
  .metric-content { min-width: 0; }
  .metric-value { font-size: clamp(1.15rem, 5.4vw, 1.75rem); white-space: nowrap; }

  /* "Log to" stays one line beside its picker; the picker gives up width. */
  .quick-update-label { white-space: nowrap; }
  #form-quick-update .form-actions { min-width: 0; }
  #quick-update-project { flex: 1 1 auto; min-width: 0; width: auto; }

  /* Comfortable tap targets. */
  .btn { min-height: 44px; }
  .btn-status { min-height: 44px; }
  .filter-group select { min-height: 44px; }
  .btn-close-drawer { padding: 0.6rem; }

  /* ---------- Bottom tab bar ---------- */
  .sidebar-nav { display: none; } /* the horizontal icon row overflows on phones */

  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90; /* below drawer-backdrop/drawer (99/100) and modals */
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 0.25rem 0.4rem calc(0.25rem + env(safe-area-inset-bottom));
  }
  .mobile-tabbar .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 52px;
    min-width: 0; /* 8 tabs must be able to shrink below label width */
    padding: 0.3rem 0;
    margin: 0;
    font-size: 0.6rem;
    font-weight: 600;
    font-family: var(--font-family);
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
  }
  .mobile-tabbar .nav-item i,
  .mobile-tabbar .nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
  .mobile-tabbar .nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-tabbar .nav-item.active { color: var(--accent-purple); background: none; }

  /* ---------- "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);
  }
  .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.9rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mobile-more-sheet.open { transform: none; }
  .mobile-more-sheet .nav-item {
    min-height: 48px;
    width: 100%;
    background: none;
    border: none;
    font-family: var(--font-family);
    cursor: pointer;
  }

  /* ---------- 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%; }
  .triage-table tbody tr {
    display: block;
    margin: 0.7rem 1rem;
    padding: 0.45rem 0 0.55rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .triage-table td {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.28rem 1rem;
    border-bottom: none;
    white-space: normal;
  }
  .triage-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 88px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
  }
  .triage-table td.cell-primary {
    display: block;
    padding: 0.5rem 1rem 0.45rem;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 0.35rem;
  }
  .triage-table td.cell-primary .item-title { font-size: 0.95rem; }
  .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; }

  /* ---------- 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.6rem; }
  .enriched-dialog-hint { display: none; } /* frees room for the action buttons */
  .enriched-dialog-actions { width: 100%; }
  .enriched-dialog-actions .btn { flex: 1; justify-content: center; }
  .enriched-dialog-body textarea { min-height: 160px; }
  .add-prospect-grid { grid-template-columns: 1fr; }

  /* ---------- Toolbars & filters ---------- */
  .toolbar { flex-direction: column; align-items: stretch; }
  .search-box { max-width: none; }
  .filters { flex-wrap: wrap; gap: 0.6rem; }
  .filter-group { flex: 1 1 45%; }
  .filter-group select { flex: 1; width: 100%; }
  .mn-search, .mn-filters { width: 100%; }
  .mn-toolbar-right { flex-wrap: wrap; }

  /* ---------- Drawers ---------- */
  .drawer { height: 100dvh; }
  .status-button-group { grid-template-columns: repeat(2, 1fr); }
  .drawer-footer { flex-wrap: wrap; }
  .drawer-footer .btn { flex: 1; justify-content: center; }
  /* 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); }

  /* ---------- Kanban board ---------- */
  .board-columns { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .board-col { width: min(250px, 80vw); scroll-snap-align: start; }

  /* ---------- Grids ---------- */
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .metric-card { padding: 0.9rem 1rem; gap: 0.7rem; }
  .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; }
}

/* ============================================================
   IT ADMIN PANEL — project status badges, dots, and additions
   (appended over the shared Aurelian design system above)
   ============================================================ */

/* Project lifecycle badges */
.badge-status-idea {
  background-color: #EEF2F7;
  color: #475569;
  border: 1px solid #CBD5E1;
}
.badge-status-in-development {
  background-color: #E0F2FE;
  color: #0369A1;
  border: 1px solid #7DD3FC;
}
.badge-status-production-pilot {
  background-color: var(--rel-essential-bg);
  color: var(--rel-essential);
  border: 1px solid #C9A84C;
}
.badge-status-live {
  background-color: var(--color-resolved-bg);
  color: var(--color-resolved);
  border: 1px solid #a7f3d0;
}
.badge-status-maintenance {
  background-color: #CCFBF1;
  color: #0F766E;
  border: 1px solid #5EEAD4;
}
.badge-status-paused {
  background-color: var(--color-dismissed-bg);
  color: var(--color-dismissed);
  border: 1px solid #E8E2D9;
}
.badge-status-archived {
  background-color: #F1F0EE;
  color: #6B7280;
  border: 1px solid #D6D3CE;
}

/* Status dots (drawer status buttons + dashboard chips) */
.dot-idea             { background-color: #64748B; }
.dot-in-development   { background-color: #0EA5E9; }
.dot-production-pilot { background-color: var(--rel-essential); }
.dot-live             { background-color: var(--color-resolved); }
.dot-maintenance      { background-color: #0F766E; }
.dot-paused           { background-color: var(--color-dismissed); }
.dot-archived         { background-color: #9CA3AF; }

/* Generic selected state for the drawer's status buttons (the Aurelian sheet
   only styles its legacy statuses New/In Progress/Completed) */
.btn-status.active {
  border-color: var(--accent, #C9A84C);
  background-color: var(--rel-essential-bg, #FBF6E9);
  color: var(--text-primary);
  font-weight: 700;
}

/* Connection indicator in the sidebar footer (replaces the env switcher) */
.conn-badge {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.5rem 0.9rem 0.9rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #47536B;
  background: var(--bg-hover, rgba(0,0,0,0.03));
}
.conn-badge .env-dot { background: #64748B; }
.conn-badge.conn-live { color: #166534; }
.conn-badge.conn-live .env-dot { background: #16A34A; }
.sidebar-collapsed .conn-badge span { display: none; }

/* Inline status select in the Projects table */
.status-select {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card, #fff);
  color: var(--text-primary);
  cursor: pointer;
}
.status-select:focus { outline: 2px solid var(--accent, #C9A84C); outline-offset: 1px; }

/* Project link icon buttons */
.link-btn-row { display: flex; gap: 0.35rem; align-items: center; }
.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.link-btn:hover { color: var(--text-primary); border-color: var(--accent, #C9A84C); background: var(--bg-hover); }
.link-btn i, .link-btn svg { width: 14px; height: 14px; }
.link-btn.link-missing { opacity: 0.35; cursor: default; }
.link-btn.link-missing:hover { border-color: var(--border-color); background: transparent; color: var(--text-secondary); }

/* Service cost chips (Costs view, drawer) */
.svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-hover, rgba(0,0,0,0.03));
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.svc-chip .svc-amount { color: var(--text-primary); font-weight: 700; }
.svc-chip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }

/* Cost line editor rows in the drawer */
.cost-line-row {
  display: grid;
  grid-template-columns: 1fr 110px 32px;
  gap: 0.45rem;
  align-items: center;
  margin-bottom: 0.45rem;
}
.cost-line-row input {
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card, #fff);
  color: var(--text-primary);
}
.cost-line-row .btn-remove-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.cost-line-row .btn-remove-line:hover { color: #991B1B; border-color: #FCA5A5; background: #FEE2E2; }
.cost-line-row .btn-remove-line i, .cost-line-row .btn-remove-line svg { width: 14px; height: 14px; }
.cost-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.6rem;
  margin-top: 0.4rem;
  border-top: 1px dashed var(--border-color);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Costs view hero number */
.cost-hero {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1.4rem 1.4rem 0.6rem;
}
.cost-hero-value {
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(105deg, #F4E5B4 0%, #E3C671 48%, #C9A84C 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cost-hero-sub { font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }

/* ============================================================
   UPDATES — composer · filter bar · open blockers · feed
   (entries render via core/updates-format.js, shared with the drawer)
   ============================================================ */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

#section-updates .workdesk { padding: 1.3rem 1.5rem 1.8rem; }
#section-updates .updates-desk > :not(.sr-only) { width: 100%; max-width: 980px; margin-left: auto; margin-right: auto; }

/* Composer — compact: a two-line box and one control row */
.update-composer {
  display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem;
  padding: 0.8rem 0.9rem; border-radius: 14px;
  background: rgba(18, 32, 56, 0.65); border: 1px solid rgba(94, 142, 222, 0.16);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.update-composer:focus-within { border-color: rgba(201, 168, 76, 0.45); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); }
.update-composer textarea {
  width: 100%; min-height: 3.3rem; resize: none; overflow-y: auto;
  padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid var(--border-color);
  background: var(--bg-card); color: var(--text-primary);
  font-family: var(--font-family); font-size: 0.86rem; line-height: 1.5;
}
.update-composer textarea::placeholder, .updates-search-box input::placeholder { color: var(--text-secondary); opacity: 0.85; }
.update-composer textarea:focus { outline: none; border-color: rgba(227, 198, 113, 0.7); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.composer-types { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.composer-type-btn {
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary);
  font: inherit; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 7px;
  cursor: pointer; transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 30px;
}
.composer-type-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.composer-type-btn:hover { color: var(--text-primary); border-color: rgba(201, 168, 76, 0.4); }
.composer-type-btn.active { color: #E3C671; border-color: rgba(201, 168, 76, 0.6); background: rgba(201, 168, 76, 0.14); }
.composer-type-btn.active[data-type="blocker"] { color: #FCA5A5; border-color: rgba(248, 113, 113, 0.55); background: rgba(248, 113, 113, 0.12); }
.composer-type-btn.active[data-type="decision"] { color: #C4B5FD; border-color: rgba(167, 139, 250, 0.55); background: rgba(167, 139, 250, 0.12); }
.composer-type-btn.active[data-type="milestone"] { color: #4ADE80; border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.1); }
.composer-send { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.composer-target-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.composer-hint { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; margin-right: 0.4rem; }
/* Folded until used: one line to write in, controls appear on focus. */
.update-composer:not(.is-open) .composer-bar { display: none; }
.update-composer:not(.is-open) textarea { min-height: 2.6rem; }
#section-updates .btn svg, .drawer-update-form .btn svg, .updates-blockers .btn svg { width: 15px; height: 15px; }
.composer-send select { max-width: 230px; }

/* Filter bar: search · type · author, then project pills */
.updates-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.65rem; }
.updates-search-box {
  flex: 1 1 180px; cursor: text; display: flex; align-items: center; gap: 0.45rem; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 9px; padding: 0.4rem 0.65rem;
}
.updates-search-box:focus-within { border-color: rgba(227, 198, 113, 0.7); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15); }
.updates-search-box svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.updates-search-box input {
  border: none; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.8rem; width: 100%; outline: none;
}
.updates-search-box input::-webkit-search-cancel-button { display: none; }
.updates-search-clear {
  border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px;
}
.updates-search-clear:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }
.updates-search-clear svg { width: 13px; height: 13px; }
.updates-type-filter { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.type-chip, .update-filter-pill {
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary);
  font: inherit; font-size: 0.72rem; font-weight: 700; padding: 0.28rem 0.6rem; border-radius: 999px; min-height: 30px;
  cursor: pointer; transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
.type-chip:hover, .update-filter-pill:hover { border-color: rgba(201, 168, 76, 0.4); color: var(--text-primary); }
.type-chip.active, .update-filter-pill.active { color: #E3C671; border-color: rgba(201, 168, 76, 0.55); background: rgba(201, 168, 76, 0.12); }
.type-chip.t-blocker.active { color: #FCA5A5; border-color: rgba(248, 113, 113, 0.55); background: rgba(248, 113, 113, 0.1); }
.chip-count, .pill-count {
  font-size: 0.64rem; font-weight: 800; background: rgba(255, 255, 255, 0.08); padding: 0.06rem 0.4rem;
  border-radius: 999px; color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.type-chip.active .chip-count, .update-filter-pill.active .pill-count { background: rgba(201, 168, 76, 0.22); color: #E3C671; }
.chip-count.open { color: #0B1424; background: #F87171; }
.type-chip.active .chip-count.open { color: #0B1424; background: #F87171; }
/* Projects and author share a row: pills flow left, author sits right. */
.updates-filter-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.1rem; }
.updates-pills-strip { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.updates-author-wrap { flex: 0 0 auto; }
.updates-author-wrap select { min-width: 150px; }

/* Problems & open blockers */
.updates-error {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; padding: 0.65rem 0.85rem; border-radius: 10px;
  font-size: 0.8rem; color: #F1A8A8; background: rgba(153, 27, 27, 0.18); border: 1px solid rgba(220, 90, 90, 0.4);
}
.updates-error svg { width: 16px; height: 16px; flex-shrink: 0; }
.updates-error span { flex: 1; }
.updates-blockers {
  margin-bottom: 1.2rem; padding: 0.8rem 0.9rem; border-radius: 12px;
  background: rgba(248, 113, 113, 0.06); border: 1px solid rgba(248, 113, 113, 0.35);
}
.updates-blockers-title {
  display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.55rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #FCA5A5;
}
.updates-blockers-title svg { width: 15px; height: 15px; }
.updates-blockers-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.updates-blocker { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.updates-blocker-main { flex: 1 1 280px; }
.updates-blocker-main {
  flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.7rem; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s ease;
}
.updates-blocker-main:hover { border-color: rgba(248, 113, 113, 0.5); }
.updates-blocker-project { font-size: 0.7rem; font-weight: 700; color: #E3C671; white-space: nowrap; }
.updates-blocker-text { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.updates-blocker-meta { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }
.updates-blocker-meta .update-date-chip { margin: 0; }

/* Feed: date groups of entries */
.update-feed { display: flex; flex-direction: column; gap: 1.1rem; }
.update-date-divider {
  display: flex; align-items: center; gap: 0.8rem; margin: 0 0 0.55rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary);
}
.update-date-divider::after { content: ""; flex: 1; height: 1px; background: rgba(94, 142, 222, 0.16); }
.update-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.update-entry {
  position: relative; display: flex; gap: 0.85rem; padding: 0.85rem 1rem 0.6rem;
  border: 1px solid var(--border-color); border-left: 3px solid rgba(94, 142, 222, 0.28); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%), var(--bg-card);
  transition: border-color 0.15s ease, box-shadow 0.25s ease;
}
.update-entry:hover { border-color: rgba(201, 168, 76, 0.3); }
/* The left edge carries the type — the one signal worth scanning for */
.update-entry.t-blocker { border-left-color: #F87171; }
.update-entry.t-milestone { border-left-color: #4ADE80; }
.update-entry.t-decision { border-left-color: #A78BFA; }
.update-entry.t-status_change { border-left-color: rgba(148, 163, 184, 0.45); }
.update-entry.is-resolved { border-left-color: rgba(248, 113, 113, 0.3); }
.update-entry:focus-visible { outline: 2px solid rgba(201, 168, 76, 0.65); outline-offset: 2px; }
.update-entry.flash { box-shadow: 0 0 0 2px rgba(227, 198, 113, 0.55), 0 0 22px rgba(227, 198, 113, 0.2); }
@media (prefers-reduced-motion: reduce) { .update-entry { transition: none; } }

.update-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800;
}
.update-avatar.human { background: linear-gradient(135deg, #F4E5B4, #C9A84C); color: #0B1424; }
.update-avatar.ai { background: linear-gradient(135deg, #0EA5E9, #6366F1); color: #FFFFFF; }
.update-avatar.ai svg { width: 16px; height: 16px; }
.update-entry-main { flex: 1; min-width: 0; }
.update-entry-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.update-author-name { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.update-author-name.ai { color: #7DD3FC; }
.update-project-chip {
  font: inherit; font-size: 0.7rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(201, 168, 76, 0.4); color: #E3C671; background: rgba(201, 168, 76, 0.1);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.update-project-chip:hover { border-color: rgba(227, 198, 113, 0.7); box-shadow: 0 0 10px rgba(227, 198, 113, 0.25); }
.update-badge {
  font-size: 0.64rem; font-weight: 800; padding: 0.1rem 0.45rem; border-radius: 5px; letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.update-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.update-badge.milestone { background: rgba(74, 222, 128, 0.14); color: #4ADE80; border: 1px solid rgba(74, 222, 128, 0.3); }
.update-badge.decision { background: rgba(167, 139, 250, 0.14); color: #C4B5FD; border: 1px solid rgba(167, 139, 250, 0.35); }
.update-badge.blocker { background: rgba(248, 113, 113, 0.14); color: #FCA5A5; border: 1px solid rgba(248, 113, 113, 0.35); }
.update-badge.blocker.resolved { background: rgba(148, 163, 184, 0.1); color: #A9B8CE; border-color: rgba(148, 163, 184, 0.3); }
.update-badge.status_change { background: rgba(148, 163, 184, 0.1); color: #A9B8CE; border: 1px solid rgba(148, 163, 184, 0.28); }
.update-theme {
  font-size: 0.66rem; font-weight: 700; color: #9AB4DC; padding: 0.06rem 0.42rem; border-radius: 5px;
  background: rgba(76, 125, 208, 0.1); border: 1px solid rgba(94, 142, 222, 0.25);
}
.update-date-chip { margin-left: auto; font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }

.update-body { font-size: 0.86rem; line-height: 1.6; color: var(--text-primary); overflow-wrap: anywhere; }
.update-body p { margin: 0 0 0.45rem; }
.update-body p:last-child, .update-body ul:last-child { margin-bottom: 0; }
.update-body ul { margin: 0.15rem 0 0.45rem 1.15rem; padding: 0; }
.update-body li { margin: 0.12rem 0; }
.update-body strong { color: #F1F5F9; }
.update-body.clamp { max-height: 9.7em; overflow: hidden; }
.update-body.clamp.is-clipped {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.update-entry.t-status_change .update-body { color: var(--text-secondary); font-size: 0.82rem; }
.update-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.78rem; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.06rem 0.32rem; border-radius: 4px; color: #F4E5B4;
}
.update-link { color: #60A5FA; text-decoration: underline; text-underline-offset: 2px; }
.update-link:hover { color: #93C5FD; }
.update-more {
  background: none; border: none; padding: 0.25rem 0; margin-top: 0.15rem; cursor: pointer;
  font: inherit; font-size: 0.74rem; font-weight: 700; color: #E3C671;
}
.update-more:hover { text-decoration: underline; }

.update-meta { margin-top: 0.35rem; font-size: 0.7rem; color: var(--text-secondary); font-style: italic; }
.update-entry-head .update-actions { display: inline-flex; align-items: center; gap: 0.1rem; margin: -0.3rem -0.4rem -0.3rem 0; }
/* Icon actions sit quiet until the entry is hovered or focused; text
   actions (Resolve/Reopen) always keep full contrast. */
.update-action.icon { opacity: 0.7; transition: opacity 0.12s ease; }
.update-entry:hover .update-action.icon, .update-entry:focus-within .update-action.icon, .note-bubble:hover .update-action { opacity: 1; }
.update-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; height: 30px; min-width: 30px; padding: 0 0.5rem;
  border-radius: 7px; border: 1px solid transparent; background: none; color: var(--text-secondary);
  font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: all 0.12s ease;
}
.update-action.icon { padding: 0; width: 30px; }
.update-action svg { width: 14px; height: 14px; }
.update-action:hover { color: #E3C671; background: rgba(201, 168, 76, 0.12); border-color: rgba(201, 168, 76, 0.3); }
.update-action[data-action="delete"]:hover, .btn-drawer-delete-note:hover { color: #FCA5A5; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); }
.update-action[data-action="resolve"] { color: #4ADE80; }
.update-action[data-action="reopen"] { color: var(--text-primary); }
@media (hover: none) { .update-action.icon { opacity: 1; } }

/* Inline editor */
.update-entry.is-editing { border-color: rgba(201, 168, 76, 0.65); background: rgba(18, 32, 56, 0.92); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
.update-edit-box { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.45rem; }
.update-edit-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.update-edit-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 150px; }
.update-edit-field label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.update-edit-text {
  width: 100%; min-height: 5rem; resize: vertical; padding: 0.6rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-primary);
  font: inherit; font-size: 0.86rem; line-height: 1.55; outline: none;
}
.update-edit-text:focus { border-color: #E3C671; }
.update-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.update-edit-hint { margin-right: auto; font-size: 0.7rem; color: var(--text-secondary); }

/* Empty · loading · paging */
.updates-empty {
  padding: 3rem 1.5rem; text-align: center; color: var(--text-secondary); font-size: 0.86rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.65rem;
}
.updates-empty svg { width: 30px; height: 30px; color: var(--text-muted); }
.updates-load-more { text-align: center; margin-top: 0.2rem; }
.load-more-sub { color: var(--text-secondary); font-weight: 600; }
.update-skeletons { display: flex; flex-direction: column; gap: 0.6rem; }
.update-skel { align-items: center; pointer-events: none; }
.update-skel .update-entry-main { display: flex; flex-direction: column; gap: 0.55rem; }
.skel-dot { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: rgba(94, 142, 222, 0.16); animation: lcSkel 1.4s ease-in-out infinite; }
.skel-line { display: block; height: 10px; border-radius: 5px; background: rgba(94, 142, 222, 0.16); animation: lcSkel 1.4s ease-in-out infinite; }
.update-skel.drawer { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .skel-dot, .skel-line { animation: none; } }

/* Drawer Update Log — same entry language as the feed */
.note-header { justify-content: flex-start; gap: 0.45rem; flex-wrap: wrap; }
.note-header .note-time { margin-left: auto; }
.note-header .note-time .update-date-chip { margin: 0; }
.note-author.ai { color: #7DD3FC; }
.note-bubble { border-left: 3px solid rgba(94, 142, 222, 0.28); }
.note-bubble.t-blocker { border-left-color: #F87171; }
.note-bubble.t-milestone { border-left-color: #4ADE80; }
.note-bubble.t-decision { border-left-color: #A78BFA; }
.note-bubble.is-resolved { border-left-color: rgba(248, 113, 113, 0.3); }
.note-content.update-body { white-space: normal; font-size: 0.82rem; }
.note-bubble .update-action { opacity: 0.6; }
.drawer-update-form textarea { height: auto; min-height: 3.3rem; resize: none; }
.drawer-update-form .form-actions { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.drawer-update-form .form-actions > .btn { margin-left: auto; }
.notes-timeline { max-height: none; overflow: visible; }
.drawer-log-more { align-self: center; margin-top: 0.2rem; }
.note-bubble .update-meta { margin-top: 0.15rem; }
.board-last { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; width: 100%; }
.board-last .item-desc-snippet { max-width: 100%; }
.note-end { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.note-header .note-end .note-time { margin-left: 0; }
.toast-kbd {
  font-family: var(--font-family); font-size: 0.66rem; font-weight: 700; color: var(--text-secondary);
  border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 5px; padding: 0.05rem 0.35rem;
}

/* Dashboard status board: open blockers outrank freshness */
.board-blocker-pill {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: #FCA5A5; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 999px; padding: 0.12rem 0.5rem;
}
.board-blocker-pill svg { width: 12px; height: 12px; }

/* Touch: real tap targets */
@media (hover: none) and (pointer: coarse) {
  .update-action { height: 44px; min-width: 44px; }
  .update-action.icon { width: 44px; }
  .type-chip, .update-filter-pill, .composer-type-btn, .update-project-chip { min-height: 40px; }
  .update-project-chip { padding: 0.3rem 0.7rem; }
  .updates-search-box { min-height: 44px; }
  .updates-search-clear { width: 40px; height: 40px; }
  #section-updates select, #section-updates .btn-sm, .drawer-update-form .btn, .composer-submit,
  .drawer-log-more, .update-more, .toast-action, .toast-close { min-height: 44px; }
  .toast-close { min-width: 44px; }
}

/* Phones */
@media (max-width: 700px) {
  #section-updates .workdesk { padding: 0.9rem 0.75rem 1.2rem; }
  /* iOS zooms any focused field under 16px */
  #section-updates textarea, #section-updates input, #section-updates select { font-size: 16px; }
  .composer-hint { display: none; }
  .update-composer textarea { min-height: 2.9rem; }
  /* Toasts sit above the bottom tab bar, not on it. */
  .toast-container { left: 0.75rem; right: 0.75rem; bottom: calc(68px + env(safe-area-inset-bottom) + 0.6rem); }
  .updates-blocker { flex-direction: column; align-items: stretch; }
  .updates-blocker > .btn { align-self: flex-end; }
  .composer-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .composer-type-btn { justify-content: center; padding: 0.3rem 0.2rem; }
  .composer-send { width: 100%; margin-left: 0; }
  .composer-send select { flex: 1; max-width: none; min-width: 0; }
  .composer-submit span { display: none; }
  /* One scrolling row each for types and projects */
  .updates-toolbar { gap: 0.5rem; }
  .updates-search-box { flex-basis: 100%; }
  .updates-type-filter, .updates-pills-strip {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .updates-type-filter { flex: 1 1 100%; }
  .updates-type-filter::-webkit-scrollbar, .updates-pills-strip::-webkit-scrollbar { display: none; }
  .type-chip, .update-filter-pill { flex: 0 0 auto; }
  .updates-filter-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .updates-pills-strip { flex: 0 0 auto; }
  .updates-author-wrap select { width: 100%; }
  /* Give the text the width: the author name already says who */
  .update-entry { padding: 0.8rem 0.8rem 0.5rem; gap: 0; }
  .update-entry > .update-avatar { display: none; }
  .update-body { font-size: 0.9rem; }
  .updates-blocker-main { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .updates-blocker-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* Header reads "Author · 2h ago" then its chips; actions end the chip row. */
  .update-entry-head .update-author-name { order: 0; }
  .update-entry-head .update-date-chip { order: 1; margin-left: 0; }
  .update-entry-head .update-date-chip::before { content: "· "; }
  .update-entry-head .update-project-chip { order: 2; }
  .update-entry-head .update-badge, .update-entry-head .update-theme { order: 3; }
  .update-entry-head .update-actions { order: 4; margin-left: auto; }
  .update-edit-hint { display: none; }
}
@media (max-width: 400px) {
  .composer-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dark variants for the IT-panel badges above (hardcoded light surfaces) */
:root[data-theme="dark"] .badge-status-idea {
  background: #22344F;
  color: #A9B8CE;
  border-color: #33496B;
}
:root[data-theme="dark"] .badge-status-in-development {
  background: rgba(3, 105, 161, 0.22);
  color: #7CC8F0;
  border-color: rgba(3, 105, 161, 0.5);
}
:root[data-theme="dark"] .badge-status-maintenance {
  background: rgba(15, 118, 110, 0.25);
  color: #6EDCD2;
  border-color: rgba(94, 234, 212, 0.4);
}
:root[data-theme="dark"] .badge-status-paused { border-color: #33496B; }
:root[data-theme="dark"] .badge-status-archived {
  background: #1B2A44;
  color: #8B99AF;
  border-color: #2C4166;
}
:root[data-theme="dark"] .dot-maintenance { background-color: #6EDCD2; }

:root[data-theme="dark"] .conn-badge { color: #9AA7BC; }
:root[data-theme="dark"] .conn-badge.conn-live { color: #7BD8A0; }
:root[data-theme="dark"] .conn-badge.conn-live .env-dot { background: #4ADE80; }

/* Hardcoded cream header bands → navy (drawer + add-project dialog) */
:root[data-theme="dark"] .drawer-header,
:root[data-theme="dark"] .enriched-dialog-header {
  background-color: var(--bg-secondary);
}

/* By-service bars: give labels a bit more room and truncate long service
   names (e.g. "Anthropic Claude Max (20x)") instead of spilling into the bar.
   The row's title attribute still shows the full name on hover. */
.cmd-stage-row { grid-template-columns: 190px minmax(0, 1fr) 88px 40px; }
.cmd-stage-label { overflow: hidden; min-width: 0; }
.cmd-stage-label .dot { flex-shrink: 0; }
.cmd-stage-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Phones: the 150px+88px+40px columns starve the bar track — drop the count
   column, tighten the label, and let the track breathe. (Must live after the
   150px rule above, which would otherwise win the cascade.) */
@media (max-width: 700px) {
  .cmd-stage-row { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 0.55rem; }
  .cmd-stage-count { display: none; }
  .cmd-stage-label { font-size: 0.7rem; }
}

/* ── Proposal pipeline: dropzone, pending badge, spec rendering ─────────── */
.badge-status-pending-approval {
  background: var(--rel-essential-bg);
  color: var(--rel-essential);
  border: 1px solid rgba(201, 168, 76, 0.55);
  animation: pendingPulse 2.4s ease-in-out infinite;
}
@keyframes pendingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0); }
  50% { box-shadow: 0 0 10px 1px rgba(201, 168, 76, 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .badge-status-pending-approval { animation: none; }
}

.proposal-dropzone {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.95rem 1.2rem;
  border: 1.5px dashed rgba(201, 168, 76, 0.45);
  border-radius: 14px;
  background: rgba(201, 168, 76, 0.04);
  color: var(--text-secondary);
  font-size: 0.83rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.proposal-dropzone:hover, .proposal-dropzone.drag-over {
  border-color: var(--accent-purple, #C9A84C);
  background: rgba(201, 168, 76, 0.09);
}
.proposal-dropzone i, .proposal-dropzone svg {
  width: 26px; height: 26px; flex-shrink: 0;
  color: var(--accent-purple, #C9A84C);
}
.proposal-dropzone strong { color: var(--text-primary); }
.proposal-dropzone code {
  background: var(--bg-hover);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  font-size: 0.78rem;
}

.proposal-strip { border-left: 3px solid var(--accent-purple, #C9A84C); }
.proposal-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.proposal-row + .proposal-row { margin-top: 0.55rem; }
.proposal-row:hover { border-color: var(--accent-purple, #C9A84C); }
.proposal-row i, .proposal-row svg { width: 18px; height: 18px; color: var(--accent-purple, #C9A84C); flex-shrink: 0; }
.proposal-row-main { flex: 1; min-width: 0; }

.proposal-actions { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; }

.spec-doc {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-hover, rgba(0,0,0,0.03));
  padding: 1rem 1.15rem;
  max-height: 420px;
  overflow-y: auto;
}
.spec-doc .md-h { font-family: var(--font-display); color: var(--text-primary); margin: 0.9rem 0 0.35rem; }
.spec-doc .md-h:first-child { margin-top: 0; }
.spec-doc .md-h1 { font-size: 1.05rem; padding-left: 0.6rem; border-left: 3px solid var(--accent-purple, #C9A84C); }
.spec-doc .md-h2 { font-size: 0.95rem; }
.spec-doc .md-h3, .spec-doc .md-h4 { font-size: 0.85rem; }
.spec-doc .md-p { font-size: 0.82rem; line-height: 1.6; color: var(--text-secondary); margin: 0.35rem 0; }
.spec-doc .md-list { margin: 0.25rem 0 0.55rem 1.1rem; display: flex; flex-direction: column; gap: 0.28rem; }
.spec-doc .md-list li { font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary); }
.spec-doc strong { color: var(--text-primary); }
.spec-doc code {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 0.05rem 0.3rem;
  font-size: 0.76rem;
}
.spec-doc .md-code {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  padding: 0.7rem 0.85rem;
  font-size: 0.75rem;
  line-height: 1.55;
  overflow-x: auto;
  margin: 0.5rem 0;
  white-space: pre;
}

/* Audience category chips (Internal Tool / Client Facing / Third-Party) */
.badge-cat-internal-tool {
  background: #22344F;
  color: #A9B8CE;
  border: 1px solid #33496B;
}
.badge-cat-client-facing {
  background: var(--rel-essential-bg);
  color: var(--rel-essential);
  border: 1px solid rgba(201, 168, 76, 0.5);
}
.badge-cat-third-party-integration {
  background: rgba(156, 106, 222, 0.18);
  color: #C9AFEF;
  border: 1px solid rgba(156, 106, 222, 0.45);
}
/* Category note line on dossier cards */
.pc-note {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--rel-essential, #92400E);
  line-height: 1.5;
}
.pc-note i, .pc-note svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 0.2rem; }

/* Category note under a project's name (status board + projects table) —
   was a ✻ with a hover tooltip nobody found. */
.board-note {
  margin-top: 0.3rem;
  max-width: 34ch;
  font-size: 0.68rem;
  font-style: italic;
  line-height: 1.4;
  color: #B89C78;
}

/* Keyboard focus on clickable rows, cards, map nodes and chips */
[role="button"]:focus-visible {
  outline: 2px solid var(--accent-purple, #C9A84C);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Costs: $0 service lines folded into one muted line */
.costs-unpriced {
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}
.spend-col.partial .spend-bar { opacity: 0.55; }

/* AI Summary view */
/* The AI workdesk card pads its own content (no table doing it for us);
   the readable column centers itself inside the wide panel */
#section-ai .workdesk { padding: 1.4rem 1.5rem 1.5rem; }
#ai-output { width: 100%; max-width: 1000px; margin: 0 auto; }

/* Team & Access — roster cards, tier chips, capability matrix, preview */
#section-team .workdesk { padding: 1.4rem 1.5rem 1.5rem; }
.team-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
  padding-top: 0.4rem;
}
.team-access-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.15rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%),
    var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.team-access-card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.35), transparent);
}
.team-access-card.previewing {
  border-color: rgba(227, 198, 113, 0.6);
  box-shadow: 0 0 22px rgba(227, 198, 113, 0.16);
}
.team-access-head { display: flex; align-items: center; gap: 0.8rem; }
.team-access-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.team-access-name { font-weight: 700; color: var(--text-primary); font-size: 0.95rem; }
.team-access-email { font-size: 0.72rem; color: var(--text-muted); }
.team-sys-chip {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.06rem 0.45rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9AB4DC;
  background: rgba(76, 125, 208, 0.12);
  border: 1px solid rgba(94, 142, 222, 0.3);
  vertical-align: 2px;
}
.team-tier-chip {
  flex-shrink: 0;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tier-writer {
  color: #E3C671;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.45);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.14);
}
.tier-reader {
  color: #9AB4DC;
  background: rgba(76, 125, 208, 0.1);
  border: 1px solid rgba(94, 142, 222, 0.35);
}
.team-caps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.team-caps li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.45;
}
.team-caps li i, .team-caps li svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 0.16rem; }
.team-caps .cap-yes { color: var(--text-primary); }
.team-caps .cap-yes i, .team-caps .cap-yes svg { color: #7BD8A0; }
.team-caps .cap-no { color: var(--text-muted); }
.team-caps .cap-no i, .team-caps .cap-no svg { color: #6B7A93; }
.team-preview-btn { justify-content: center; margin-top: 0.15rem; }
.team-access-note {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* "Previewing as" banner — pinned above everything while a preview is on */
.viewas-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  color: #0B1424;
  background: linear-gradient(100deg, #EDD289 0%, #D4AF37 60%, #C9A84C 100%);
  box-shadow: 0 2px 18px rgba(212, 175, 55, 0.35);
}
.viewas-banner i, .viewas-banner svg { width: 15px; height: 15px; flex-shrink: 0; }
.viewas-banner em { font-style: normal; font-weight: 700; }
.viewas-banner button {
  margin-left: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid rgba(11, 20, 36, 0.4);
  border-radius: 999px;
  background: rgba(11, 20, 36, 0.12);
  color: #0B1424;
  font-family: var(--font-family);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.viewas-banner button:hover { background: rgba(11, 20, 36, 0.22); }
@media (max-width: 700px) {
  .viewas-banner { font-size: 0.7rem; flex-wrap: wrap; text-align: center; }
}

/* Jiazi's Pitch — an executive read: bigger type, calm rhythm, quotable
   talking points. Tuned for a phone held in one hand before a meeting. */
#section-pitch .workdesk { padding: 1.4rem 1.5rem 1.6rem; }
#pitch-output { width: 100%; max-width: 720px; margin: 0 auto; }
.pitch-body { font-size: 0.95rem; line-height: 1.7; color: var(--text-primary); }
.pitch-h {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.6rem 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(94, 142, 222, 0.14);
  background: linear-gradient(100deg, #F4E5B4 0%, #E3C671 45%, #C9A84C 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pitch-h:first-child { margin-top: 0.2rem; }
.pitch-p { margin: 0.5rem 0 0.9rem; color: var(--text-primary); }
.pitch-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.pitch-list li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--text-primary);
}
.pitch-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #E3C671, #C9A84C);
  box-shadow: 0 0 8px rgba(227, 198, 113, 0.45);
}
/* Talking points: quote cards she can read out loud */
.pitch-quotes { list-style: none; margin: 0 0 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.pitch-quotes li {
  padding: 0.75rem 1rem;
  border-left: 3px solid #E3C671;
  border-radius: 0 10px 10px 0;
  background: rgba(201, 168, 76, 0.07);
  box-shadow: 0 0 14px rgba(201, 168, 76, 0.06);
  font-size: 0.97rem;
  font-weight: 500;
}
@media (max-width: 700px) {
  .pitch-body { font-size: 1.02rem; }
  .pitch-quotes li { font-size: 1.02rem; }
}

.ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}
.ai-empty i, .ai-empty svg { width: 30px; height: 30px; color: var(--accent-purple, #C9A84C); opacity: 0.8; }
.ai-meta {
  display: flex;
  align-items: center;
  margin-bottom: 1.1rem;
}
.ai-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
}
.ai-meta i, .ai-meta svg { width: 13px; height: 13px; color: var(--accent-purple, #C9A84C); vertical-align: -2px; margin-right: 0.25rem; }

.ai-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Each app renders as its own inset panel with a gold hairline up top */
.ai-app-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.05rem 1.25rem 1.05rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%),
    var(--bg-secondary);
}
.ai-app-card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.4), transparent);
}
.ai-app-card:hover { border-color: rgba(201, 168, 76, 0.3); }

.ai-app-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(94, 142, 222, 0.12);
}
.ai-app-head .ai-h3 { margin: 0; padding-left: 0; border-left: none; }

.ai-h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.3rem 0 0.5rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--accent-purple, #C9A84C);
}
.ai-h3:first-child { margin-top: 0; }
.ai-h4 { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); margin: 0.9rem 0 0.35rem; }

.ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ai-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.ai-list li strong, .ai-p strong { color: var(--text-primary); }
.ai-li-text { min-width: 0; }

/* Gold date chip at the head of each highlight */
.ai-date {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-top: 0.1rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #E3C671;
  background: rgba(201, 168, 76, 0.10);
  border: 1px solid rgba(201, 168, 76, 0.32);
  font-variant-numeric: tabular-nums;
}

/* "Now:" — the gate/next-step callout glows gold */
.ai-now {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-primary);
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.08);
}
.ai-now i, .ai-now svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 0.16rem;
  color: #E3C671;
  filter: drop-shadow(0 0 5px rgba(227, 198, 113, 0.6));
}

.ai-p { font-size: 0.84rem; line-height: 1.6; color: var(--text-secondary); margin: 0.4rem 0; }
.ai-error {
  font-size: 0.8rem;
  color: #F1A8A8;
  background: rgba(153, 27, 27, 0.18);
  border: 1px solid rgba(220, 90, 90, 0.4);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.9rem;
}

/* Project dossier cards on the dashboard — with 6–10 apps total, each card
   earns real estate: description, latest update, cost chips, quick links. */
.project-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.25rem 1.35rem 1.1rem;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--pc-accent, var(--border-color));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pc-accent, transparent) 7%, transparent), transparent 45%),
    var(--bg-card, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.project-card:hover {
  border-color: var(--accent, #C9A84C);
  border-left-color: var(--pc-accent, var(--accent, #C9A84C));
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}
.project-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.project-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--text-primary);
  line-height: 1.2;
}
.project-card-stack { font-size: 0.76rem; color: var(--text-secondary); margin-top: 0.15rem; }
.project-card-desc {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card-update {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  background: var(--bg-hover, rgba(0,0,0,0.03));
  border: 1px solid var(--border-color);
}
.project-card-update i, .project-card-update svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--accent-purple, #C9A84C);
}
.project-card-update-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}
.project-card-update-text strong { color: var(--text-primary); font-weight: 600; }
.project-card-services { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.project-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  border-top: 1px dashed var(--border-color);
  padding-top: 0.7rem;
  margin-top: auto;
}
.project-card-foot-right { display: inline-flex; align-items: center; gap: 0.7rem; }
.project-card-cost {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .project-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   PREMIUM PASS — ambient depth, motion, and refinement
   (dark navy is this panel's permanent theme)
   ============================================================ */

/* Ambient ground: a faint gold aurora up top and a navy vignette below, so
   the flat #0B1424 reads as depth instead of a void. Fixed so it never
   scrolls with content. */
:root[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 420px at 18% -8%, rgba(201, 168, 76, 0.09), transparent 60%),
    radial-gradient(1100px 600px at 100% 0%, rgba(38, 58, 87, 0.5), transparent 55%),
    radial-gradient(1200px 800px at 50% 118%, rgba(5, 10, 20, 0.85), transparent 60%);
}
.app-container, .login-container { position: relative; z-index: 1; }

/* Brand wordmark: brushed-gold gradient text */
.brand-name-main {
  background: linear-gradient(100deg, #E3C671 0%, #C9A84C 45%, #A8862F 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cards: clearly-raised panels — lighter blue surface than the ground,
   crisp border, top light-catch, and real depth shadow */
:root[data-theme="dark"] .glass-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) 45%),
    #17263F;
  border-color: #2E4569;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 12px 34px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .glass-card:hover {
  border-color: rgba(201, 168, 76, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.32),
              0 0 0 1px rgba(201, 168, 76, 0.08);
}

/* Metric tiles: gold hairline on top + numeral emphasis + roomier padding
   so the tiles read as substantial panels, not compressed strips */
:root[data-theme="dark"] .metric-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.6rem;
}
:root[data-theme="dark"] .metric-card::after {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.45), transparent);
}
.metric-value { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Sections ease in when switched (display:none → block restarts it) */
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-content > [id^="section-"] { animation: sectionIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); }

/* Drawer: deeper shadow + frosted backdrop */
:root[data-theme="dark"] .drawer { box-shadow: -12px 0 48px rgba(0, 0, 0, 0.55); }
.drawer-backdrop { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* Bar tracks glow faintly under their fills */
:root[data-theme="dark"] .cmd-stage-fill {
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.12);
  border-radius: 999px;
}

/* ⌘K hint chip in the sidebar footer */
.palette-hint { margin-left: auto; display: inline-flex; }
.palette-hint kbd {
  font-family: var(--font-family);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.1rem 0.38rem;
}
.sidebar-collapsed .palette-hint { display: none; }

/* Keyboard focus: one consistent gold ring everywhere */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(201, 168, 76, 0.65);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Calm motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
  .main-content > [id^="section-"] { animation: none; }
  .glass-card, .project-card { transition: none; }
}

/* ============================================================
   GLOW PASS — the login screen's futuristic language carried
   into the dashboard: circuitry grid, neon-edge accents, and
   soft gold/blue halos. Everything stays subtle at rest and
   brightens on interaction.
   ============================================================ */

/* Ambient ground: rich navy-blue depth — a gold aurora up top, cool blue
   haze on the right, and a deep vignette below. No grid, just gradient. */
:root[data-theme="dark"] body {
  background: linear-gradient(165deg, #0D1A33 0%, #0A1426 48%, #070E1C 100%) fixed;
}
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(900px 440px at 18% -8%, rgba(201, 168, 76, 0.10), transparent 60%),
    radial-gradient(1100px 640px at 100% 0%, rgba(46, 86, 166, 0.28), transparent 55%),
    radial-gradient(1000px 700px at 0% 100%, rgba(30, 58, 110, 0.16), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(4, 8, 18, 0.9), transparent 62%);
}

/* Sections breathe: each page's boxes (top bar, metric tiles, workdesk
   cards) are spaced by a real flex gap — they had none and sat collapsed
   against each other. (.hidden keeps display:none !important, so this
   doesn't reveal inactive sections.) */
.main-content > [id^="section-"] {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Section titles: a short glowing gold underline anchors each page */
.header-title h1 {
  position: relative;
  padding-bottom: 0.45rem;
}
.header-title h1::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #E3C671, rgba(227, 198, 113, 0));
  box-shadow: 0 0 10px rgba(227, 198, 113, 0.55);
}

/* Sidebar mark: soft gold halo behind the hexagon */
:root[data-theme="dark"] .sidebar-mark {
  filter: drop-shadow(0 0 7px rgba(212, 175, 55, 0.4));
}

/* Active nav: glowing gold edge + faint gradient wash */
:root[data-theme="dark"] .nav-item.active {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.16), rgba(201, 168, 76, 0.05) 70%);
  box-shadow:
    inset 2px 0 0 var(--accent-purple),
    0 0 14px rgba(201, 168, 76, 0.10);
  color: #E9EDF5;
}
:root[data-theme="dark"] .nav-item.active i,
:root[data-theme="dark"] .nav-item.active svg {
  filter: drop-shadow(0 0 5px rgba(227, 198, 113, 0.6));
}

/* User avatar: thin gold ring with a quiet halo */
:root[data-theme="dark"] .user-avatar {
  border: 1px solid rgba(201, 168, 76, 0.45);
  box-shadow: 0 0 10px rgba(201, 168, 76, 0.18);
}

/* LIVE badge: the green dot breathes */
:root[data-theme="dark"] .conn-badge.conn-live .env-dot {
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
  animation: conn-pulse 2.6s ease-in-out infinite;
}
@keyframes conn-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(74, 222, 128, 0.45); }
  50%      { box-shadow: 0 0 11px rgba(74, 222, 128, 0.85); }
}

/* Cards: neon-edge hover — gold border, halo, and a gentle lift */
:root[data-theme="dark"] .glass-card:hover {
  border-color: rgba(201, 168, 76, 0.4);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 14px 40px rgba(0, 0, 0, 0.32),
    0 0 24px rgba(201, 168, 76, 0.12);
}

/* Metric tiles: icon chips glow in their own hue */
:root[data-theme="dark"] .metric-icon.total {
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.22), inset 0 0 10px rgba(201, 168, 76, 0.08);
}
:root[data-theme="dark"] .metric-icon.inprogress {
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.18), inset 0 0 10px rgba(201, 168, 76, 0.07);
}
:root[data-theme="dark"] .metric-icon.completed {
  border-color: rgba(80, 190, 130, 0.5);
  box-shadow: 0 0 16px rgba(80, 190, 130, 0.2), inset 0 0 10px rgba(80, 190, 130, 0.07);
}
:root[data-theme="dark"] .metric-icon.new {
  border-color: rgba(120, 180, 255, 0.35);
  box-shadow: 0 0 16px rgba(76, 125, 208, 0.22), inset 0 0 10px rgba(76, 125, 208, 0.08);
}
:root[data-theme="dark"] .metric-card:hover { transform: translateY(-2px); }

/* Section labels inside dashboard cards: glowing gold tick before the text */
.workdesk > .cmd-section-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.workdesk > .cmd-section-label::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #E3C671, rgba(227, 198, 113, 0.25));
  box-shadow: 0 0 8px rgba(227, 198, 113, 0.5);
}

/* Status-mix bars: brighter glow under the fills */
:root[data-theme="dark"] .cmd-stage-fill {
  box-shadow: 0 0 14px rgba(201, 168, 76, 0.22);
}
:root[data-theme="dark"] .cmd-stage-track {
  background: rgba(8, 16, 32, 0.7);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Status board rows: gold wash sweeping in from the left on hover
   (background, not box-shadow, so the relevance stripes stay intact) */
:root[data-theme="dark"] .triage-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.07), var(--bg-hover) 55%);
}

/* Project cards: halo tinted by each project's own accent color */
:root[data-theme="dark"] .project-card:hover {
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.35),
    0 0 22px color-mix(in srgb, var(--pc-accent, #C9A84C) 22%, transparent);
}

/* Project drawer: same raised-panel surface as the cards, with a glowing
   gold hairline down its leading edge */
:root[data-theme="dark"] .drawer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.006) 45%),
    var(--bg-card);
  border-left: 1px solid rgba(201, 168, 76, 0.32);
  box-shadow:
    -12px 0 48px rgba(0, 0, 0, 0.55),
    -2px 0 18px rgba(201, 168, 76, 0.10);
}

/* System Map — the app-ecosystem diagram. HTML node cards float over an
   SVG edge layer; the whole canvas pans horizontally on small screens. */
/* Markup exists always; the ≤700px block shows it. Desktop-only hide must
   not out-cascade that display:flex, so it's scoped to wide viewports. */
@media (min-width: 701px) {
  .mobile-tabbar { display: none; }
}

.map-scroll { overflow-x: auto; padding: 1rem 1rem 0.5rem; }
.map-canvas { position: relative; margin: 0 auto; }
.map-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.map-edge {
  fill: none;
  stroke: rgba(201, 168, 76, 0.55);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.35));
}
.map-edge.ghost { stroke: rgba(122, 148, 190, 0.5); stroke-dasharray: 5 4; filter: none; }
.map-edge.planned { stroke: rgba(201, 168, 76, 0.45); stroke-dasharray: 2 5; stroke-linecap: round; filter: none; }
.map-edge.legacy { stroke: rgba(176, 138, 90, 0.7); stroke-dasharray: 7 4; filter: none; }
.map-edge.paused { stroke: rgba(154, 167, 188, 0.4); stroke-dasharray: 3 5; filter: none; }
.map-edge-label {
  fill: #C9D4E6;
  font-size: 11px;
  font-family: var(--font-family);
  paint-order: stroke;
  stroke: #0E1B33;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.map-edge-label.planned, .map-edge-label.ghost, .map-edge-label.paused { fill: #8FA3C4; font-style: italic; }
.map-edge-label.legacy { fill: #D2B48C; }

/* The brain's orbit rings + the legacy archive enclosure */
.map-orbit { fill: none; stroke: rgba(201, 168, 76, 0.16); stroke-width: 1; stroke-dasharray: 2 6; }
.map-orbit.faint { stroke: rgba(201, 168, 76, 0.08); }
.map-legacy-box { fill: rgba(176, 138, 90, 0.04); stroke: rgba(176, 138, 90, 0.35); stroke-width: 1; stroke-dasharray: 4 4; }
.map-legacy-caption { fill: #B08A5A; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; font-family: var(--font-family); }

.map-node {
  position: absolute;
  width: 250px;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.006) 45%),
    var(--bg-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.map-node:hover {
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 20px rgba(201, 168, 76, 0.18);
  transform: translateY(-2px);
  z-index: 2;
}
.map-node.panel {
  border-color: rgba(94, 142, 222, 0.4);
  cursor: default;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 18px rgba(76, 125, 208, 0.14);
}
.map-node.panel:hover { transform: none; }

/* Aurelian_OS_chat — the hub everything wires into */
.map-hub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.95rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(201, 168, 76, 0.65);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 168, 76, 0.16), rgba(201, 168, 76, 0) 60%),
    var(--bg-card);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    0 0 36px rgba(201, 168, 76, 0.28),
    inset 0 0 18px rgba(201, 168, 76, 0.08);
  z-index: 1;
}
.map-hub:hover {
  border-color: rgba(228, 200, 120, 0.9);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 48px rgba(201, 168, 76, 0.4);
}
.map-hub-eyebrow {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A84C;
  margin-bottom: 0.35rem;
}
.map-hub .map-node-name {
  font-size: 1.05rem;
  background: linear-gradient(100deg, #F4E5B4 0%, #E3C671 45%, #C9A84C 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.map-hub .badge { font-size: 0.58rem; }
.map-hub-note { font-size: 0.66rem; color: #C9D4E6; margin-top: 0.4rem; line-height: 1.4; }

/* Legacy archives — data stores, drawn as databases in bronze */
.map-db {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(176, 138, 90, 0.45);
  background: linear-gradient(180deg, rgba(176, 138, 90, 0.10), rgba(176, 138, 90, 0.03)), var(--bg-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.map-db-icon { flex-shrink: 0; width: 30px; height: 30px; color: #D2B48C; }
.map-db-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.map-db-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.map-db-name { font-size: 0.72rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-db-note { font-size: 0.58rem; color: #B89C78; }

/* IT Admin Panel — the observer strip under the map */
.map-panel-strip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(94, 142, 222, 0.4);
  background: var(--bg-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 18px rgba(76, 125, 208, 0.14);
}
.map-panel-strip .badge { font-size: 0.52rem; padding: 0.1rem 0.4rem; }
.map-panel-note { font-size: 0.64rem; color: var(--text-secondary); flex: 1; }
.map-panel-strip .map-node-infra { margin-top: 0; }

.map-node-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.map-node-name {
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-node .badge { font-size: 0.52rem; padding: 0.1rem 0.4rem; flex-shrink: 0; }
.map-node-stack { font-size: 0.64rem; color: var(--text-secondary); margin-top: 0.25rem; }
.map-node-infra { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.45rem; }
.map-node-infra span {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9AB4DC;
  background: rgba(76, 125, 208, 0.10);
  border: 1px solid rgba(94, 142, 222, 0.25);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}

.map-ghost {
  position: absolute;
  width: 140px;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  border: 1px dashed rgba(122, 148, 190, 0.45);
  background: rgba(16, 28, 48, 0.6);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.map-ghost-name { font-size: 0.7rem; font-weight: 700; color: #9AB4DC; }
.map-ghost-note { font-size: 0.58rem; color: var(--text-muted); }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: center;
  padding: 0.8rem 1.4rem 1.2rem;
  font-size: 0.66rem;
  color: var(--text-muted);
}
.map-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.map-leg-line { width: 26px; height: 2px; border-radius: 2px; background: rgba(201, 168, 76, 0.6); box-shadow: 0 0 6px rgba(201, 168, 76, 0.4); }
.map-leg-line.dashed {
  background: none;
  border-top: 2px dashed rgba(94, 142, 222, 0.4);
  box-shadow: none;
  height: 0;
}
.map-leg-ghost { width: 18px; height: 12px; border: 1px dashed rgba(122, 148, 190, 0.5); border-radius: 4px; }
.map-leg-line.planned { background: none; box-shadow: none; height: 0; border-top: 2px dotted rgba(201, 168, 76, 0.55); }
.map-leg-line.paused { background: none; box-shadow: none; height: 0; border-top: 2px dashed rgba(154, 167, 188, 0.5); }
.map-leg-line.legacy { background: none; box-shadow: none; height: 0; border-top: 2px dashed rgba(176, 138, 90, 0.75); }
.map-leg-db { width: 14px; height: 14px; color: #D2B48C; }
.map-leg-db svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Spend-over-time — monthly bars from the invoice ledger (Costs view).
   Single gold series on the navy card; values/labels wear ink tokens. */
.spend-trend { padding: 0.5rem 1.4rem 1.3rem; }
.spend-bars {
  display: flex;
  align-items: flex-end;
  gap: 1.1rem;
  height: 150px;
  padding-top: 1.4rem; /* room for the value labels above tall bars */
}
.spend-col {
  flex: 0 1 64px;
  min-width: 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}
.spend-value {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spend-bar {
  width: 100%;
  max-width: 44px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #E3C671 0%, #C9A84C 70%, #A8862F 100%);
  box-shadow: 0 0 14px rgba(201, 168, 76, 0.18);
  transition: box-shadow 0.15s ease;
}
.spend-col:hover .spend-bar { box-shadow: 0 0 20px rgba(227, 198, 113, 0.4); }
.spend-month {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.spend-note {
  margin-top: 0.6rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.spend-trend .no-notes { padding: 1.2rem 0; }

/* Drawer read-only rows — links and service costs presented as clean
   panels instead of form inputs (editing is Sebastian-only) */
.link-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.45rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
  text-decoration: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.link-row:hover {
  border-color: rgba(201, 168, 76, 0.45);
  box-shadow: 0 0 14px rgba(201, 168, 76, 0.12);
}
.link-row > i, .link-row > svg { width: 14px; height: 14px; color: #E3C671; flex-shrink: 0; }
.link-row-label { font-weight: 700; flex-shrink: 0; min-width: 72px; }
.link-row-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 0.76rem;
}
.link-row-open { margin-left: auto; color: var(--text-muted) !important; }
a.link-row:hover .link-row-open { color: #E3C671 !important; }
.link-row-empty { opacity: 0.55; }
.link-row-empty > i, .link-row-empty > svg { color: var(--text-muted); }

.svc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.45rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
  font-size: 0.8rem;
}
.svc-name { font-weight: 600; color: var(--text-primary); }
.svc-cost {
  font-weight: 800;
  color: #E3C671;
  font-variant-numeric: tabular-nums;
}
.svc-cost em { font-style: normal; font-weight: 500; font-size: 0.7rem; color: var(--text-muted); margin-left: 0.15rem; }

/* Propose-project modal — attach zone, brief rows, co-owner chips */
.pp-attach-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem 1rem;
  border: 1.5px dashed rgba(94, 142, 222, 0.4);
  border-radius: 10px;
  background: rgba(8, 16, 32, 0.4);
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.pp-attach-zone:hover,
.pp-attach-zone.drag-over {
  border-color: rgba(227, 198, 113, 0.6);
  background: rgba(201, 168, 76, 0.06);
  box-shadow: 0 0 16px rgba(201, 168, 76, 0.12);
}
.pp-attach-zone i, .pp-attach-zone svg { width: 16px; height: 16px; color: #E3C671; }
.pp-attach-zone code { color: #E3C671; }

.pp-file-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  margin-top: 0.45rem;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-secondary);
  font-size: 0.8rem;
}
.pp-file-row i, .pp-file-row svg { width: 14px; height: 14px; color: #E3C671; flex-shrink: 0; }
.pp-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text-primary);
}

.pp-co-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem 0.28rem 0.35rem;
  margin: 0.15rem 0.25rem 0.15rem 0;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.pp-co-chip:hover { border-color: rgba(201, 168, 76, 0.4); color: var(--text-primary); }
.pp-co-chip.active {
  border-color: rgba(227, 198, 113, 0.65);
  color: var(--text-primary);
  background: rgba(201, 168, 76, 0.10);
  box-shadow: 0 0 10px rgba(227, 198, 113, 0.2);
}

/* Multi-brief captions inside the drawer's spec viewer */
.spec-file-caption {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C9A84C;
}
.spec-file-caption:first-child { margin-top: 0; }

/* Small gold "Admin" tag on curator-only drawer sections */
.admin-pill {
  display: inline-block;
  vertical-align: 1px;
  margin-left: 0.4rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E3C671;
  background: rgba(201, 168, 76, 0.10);
  border: 1px solid rgba(201, 168, 76, 0.35);
}

/* Gold buttons carry a quiet halo at rest, brighter on hover */
:root[data-theme="dark"] .btn-primary {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 14px rgba(201, 168, 76, 0.14);
}
:root[data-theme="dark"] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(201, 168, 76, 0.30), 0 0 22px rgba(201, 168, 76, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] .conn-badge.conn-live .env-dot { animation: none; }
  :root[data-theme="dark"] .metric-card:hover { transform: none; }
}

/* ============================================================
   LIFECYCLE — Jiazi's client cycle as a loop around the brain
   ============================================================ */
.lc-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-color); }
.lc-view-btn {
  border: none; background: none; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 700;
  color: var(--text-secondary); padding: 0.4rem 0.8rem; border-radius: 7px; transition: all 0.15s ease;
}
.lc-view-btn:hover { color: var(--text-primary); }
.lc-view-btn.active { background: rgba(201, 168, 76, 0.16); color: #E3C671; box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.4); }
.lc-view-btn:focus-visible { outline: 2px solid var(--accent-purple, #C9A84C); outline-offset: 1px; }

/* Header KPIs */
.lc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.lc-kpi {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 14px;
  padding: 0.9rem 1.05rem; min-width: 0; position: relative;
}
.lc-kpi.clickable {
  cursor: pointer; transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.lc-kpi.clickable:hover {
  transform: translateY(-2px); border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 16px rgba(201, 168, 76, 0.12);
}
.lc-kpi-jump {
  position: absolute; top: 0.75rem; right: 0.75rem; opacity: 0;
  transform: translate(-3px, 3px); transition: all 0.16s ease; color: #E3C671;
}
.lc-kpi-jump svg { width: 14px; height: 14px; }
.lc-kpi.clickable:hover .lc-kpi-jump { opacity: 1; transform: translate(0, 0); }

.lc-kpi-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.lc-kpi-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: #E3C671; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.lc-kpi-text { font-size: 1.1rem; line-height: 1.3; }
.lc-kpi-sub { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.25rem; line-height: 1.4; }
.lc-kpi-phase .lc-kpi-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-delta { font-family: var(--font-family); font-size: 0.74rem; font-weight: 700; margin-left: 0.45rem; color: var(--text-muted); vertical-align: middle; }
.lc-delta.up { color: #4ADE80; }
.lc-delta.down { color: #F87171; }
.lc-spark { display: block; }

.lc-chip {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.04em; white-space: nowrap; color: var(--lvt, #0B1424); background: var(--lv);
}
.lc-node-n { font-weight: 800; color: #C9A84C; font-variant-numeric: tabular-nums; }

/* Loop Toolbar & Zoom Controls */
.lc-loop-toolbar {
  display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--border-color); background: rgba(18, 32, 56, 0.45);
}
.lc-loop-hint { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; color: var(--text-secondary); }
.lc-loop-hint svg { width: 14px; height: 14px; color: #E3C671; }
.lc-zoom-ctrls {
  display: inline-flex; align-items: center; gap: 0.25rem; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 8px; padding: 2px;
}
.lc-zoom-btn {
  border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: 6px;
  padding: 0.25rem 0.55rem; font: inherit; font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.12s ease;
}
.lc-zoom-btn:hover { color: #E3C671; background: rgba(201, 168, 76, 0.16); }
.lc-zoom-btn svg { width: 13px; height: 13px; }
.lc-zoom-reset { min-width: 44px; font-variant-numeric: tabular-nums; }

/* Loop Canvas & Elements */
.map-canvas#lc-canvas { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.lc-brain {
  position: absolute; display: flex; flex-direction: column; justify-content: center; text-align: center;
  padding: 0.9rem 1rem; border-radius: 18px; border: 1px solid rgba(201, 168, 76, 0.7); cursor: pointer;
  background: radial-gradient(120% 90% at 50% 0%, rgba(201, 168, 76, 0.2), rgba(201, 168, 76, 0) 65%), var(--bg-card);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 40px rgba(201, 168, 76, 0.3); z-index: 2;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lc-brain:hover, .lc-brain.selected {
  transform: scale(1.02); border-color: #E3C671;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 50px rgba(201, 168, 76, 0.45); z-index: 4;
}
.lc-brain-eyebrow { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #C9A84C; }
.lc-brain-name {
  font-size: 1.08rem; font-weight: 800; margin-top: 0.2rem;
  background: linear-gradient(100deg, #F4E5B4 0%, #E3C671 45%, #C9A84C 85%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lc-brain-turns { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: #E3C671; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }
.lc-brain-turns span { font-family: var(--font-family); font-size: 0.68rem; color: var(--text-secondary); margin-left: 0.35rem; font-weight: 600; }
.lc-brain-sub { font-size: 0.68rem; color: var(--text-secondary); }

.lc-node {
  position: absolute; padding: 0.55rem 0.65rem 0.6rem; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border-color); border-left: 3.5px solid var(--lv);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008) 45%), var(--bg-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.lc-node:hover, .lc-node.selected, .lc-node.highlight {
  transform: translateY(-2px) scale(1.02); border-color: rgba(201, 168, 76, 0.65); border-left-color: var(--lv);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 22px rgba(201, 168, 76, 0.28); z-index: 5;
}
.lc-node.dimmed { opacity: 0.28; filter: grayscale(35%); }

.lc-node-head { display: flex; align-items: center; gap: 0.35rem; }
.lc-node-name { flex: 1; min-width: 0; font-size: 0.76rem; font-weight: 800; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-node-lv { font-size: 0.6rem; font-weight: 800; padding: 0.08rem 0.38rem; border-radius: 6px; color: var(--lvt, #0B1424); background: var(--lv); }
.lc-node-meta { display: flex; align-items: baseline; gap: 0.2rem; font-size: 0.64rem; color: var(--text-secondary); margin-top: 0.3rem; }
.lc-node-meta .err { color: #F87171; font-weight: 700; }
.lc-node-score { margin-left: auto; font-weight: 800; font-size: 0.82rem; color: #E3C671; font-variant-numeric: tabular-nums; }
.lc-node-bar { height: 3.5px; border-radius: 3px; background: rgba(94, 142, 222, 0.18); margin-top: 0.4rem; overflow: hidden; }
.lc-node-bar span { display: block; height: 100%; background: var(--lv); border-radius: 3px; }

/* Spokes & Rings */
.lc-spoke { stroke-width: 1.5; transition: stroke 0.2s ease, stroke-width 0.2s ease, opacity 0.2s ease; }
.lc-spoke.none { stroke: rgba(100, 116, 139, 0.35); stroke-dasharray: 2 6; }
.lc-spoke.built { stroke: rgba(148, 163, 184, 0.45); stroke-dasharray: 5 5; }
.lc-spoke.blue { stroke: rgba(14, 165, 233, 0.6); }
.lc-spoke.green { stroke: rgba(74, 222, 128, 0.7); stroke-width: 2; }
.lc-spoke.gold { stroke: rgba(227, 198, 113, 0.9); stroke-width: 2.4; filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.5)); }
.lc-spoke.highlight { stroke: #E3C671 !important; stroke-width: 2.8 !important; filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.8)); opacity: 1 !important; }
.lc-spoke.dimmed { opacity: 0.15; }

.lc-ring { fill: none; stroke: rgba(201, 168, 76, 0.45); stroke-width: 1.5; transition: stroke 0.2s ease, stroke-width 0.2s ease, opacity 0.2s ease; }
.lc-ring.closing { stroke-dasharray: 4 5; stroke-opacity: 0.6; }
.lc-ring.highlight { stroke: #E3C671 !important; stroke-width: 2.4 !important; filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.6)); }
.lc-ring.dimmed { opacity: 0.15; }

/* Living loop (lifecycle/motion.js). Pulses take their stage's level colour. */
#lc-canvas.lc-awaiting > * { opacity: 0; }
#lc-nodes.lc-entering .lc-node, #lc-nodes.lc-entering .lc-brain { transition: none !important; }
.lc-pulse { fill: currentColor; filter: drop-shadow(0 0 4px currentColor); }
.lc-pulses { transition: opacity 0.2s ease; }
.lc-pulses.dimmed { opacity: 0.12; }
.lc-journey { fill: #F5E6B2; opacity: 0.85; filter: drop-shadow(0 0 5px rgba(227, 198, 113, 0.9)); }
@media (prefers-reduced-motion: reduce) { .lc-motion { display: none; } }
.lc-leg-dot { width: 10px; height: 10px; border-radius: 3px; }

/* Timeline — phases as full-height columns, today line inside the track */
.lc-tl-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 1.1rem 1.4rem 0;
  font-size: 0.68rem; color: var(--text-muted);
}
.lc-tl-legend > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.lc-tl-key { width: 34px; height: 10px; border-radius: 5px; border: 1px solid rgba(74, 222, 128, 0.7); overflow: hidden; display: inline-block; }
.lc-tl-key span { display: block; width: 55%; height: 100%; background: rgba(74, 222, 128, 0.45); }
.lc-tl-now-key { width: 2px; height: 12px; background: #F87171; border-radius: 1px; }
.lc-tl { padding: 0.9rem 1.4rem 0.4rem; overflow-x: auto; }
.lc-tl-grid { min-width: 760px; }
.lc-tl-head, .lc-tl-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.lc-tl-head { padding-bottom: 0.4rem; border-bottom: 1px solid var(--border-color); }
.lc-tl-corner { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); align-self: end; padding-bottom: 0.3rem; }
.lc-tl-head .lc-tl-track { height: 74px; }
.lc-tl-phase {
  position: absolute; top: 0; height: 52px; padding: 0.35rem 0.6rem; border-radius: 10px 10px 0 0;
  display: flex; flex-direction: column; justify-content: center; gap: 0.05rem; overflow: hidden;
  border-top: 2px solid rgba(201, 168, 76, 0.35); background: rgba(201, 168, 76, 0.04);
}
.lc-tl-phase.now { border-top-color: #E3C671; background: rgba(201, 168, 76, 0.1); }
.lc-tl-phase-n { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.lc-tl-phase.now .lc-tl-phase-n { color: #E3C671; }
.lc-tl-phase strong { font-size: 0.74rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-tl-phase-d { font-size: 0.62rem; color: var(--text-secondary); white-space: nowrap; }
.lc-tl-months { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; }
.lc-tl-month { position: absolute; bottom: 2px; font-size: 0.6rem; font-weight: 600; color: var(--text-muted); padding-left: 5px; border-left: 1px solid rgba(94, 142, 222, 0.25); line-height: 1; }

.lc-tl-body { position: relative; }
.lc-tl-layer { position: absolute; top: 0; bottom: 0; left: calc(210px + 1rem); right: 0; pointer-events: none; }
.lc-tl-col { position: absolute; top: 0; bottom: 0; background: rgba(201, 168, 76, 0.025); border-left: 1px dashed rgba(201, 168, 76, 0.14); border-right: 1px dashed rgba(201, 168, 76, 0.14); }
.lc-tl-col.now { background: rgba(201, 168, 76, 0.07); }
.lc-tl-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #F87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.6); z-index: 1; }
.lc-tl-today span {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 0.58rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; color: #F87171; background: var(--bg-card); padding: 0.05rem 0.3rem; border-radius: 4px;
}

.lc-tl-row {
  position: relative; min-height: 48px; border-bottom: 1px solid rgba(94, 142, 222, 0.08);
  cursor: pointer; border-radius: 8px; transition: background 0.14s ease, opacity 0.14s ease;
}
.lc-tl-row:hover, .lc-tl-row.selected { background: rgba(201, 168, 76, 0.06); }
.lc-tl-row.faded .lc-tl-track { opacity: 0.22; }
.lc-tl-row.faded .lc-tl-label { opacity: 0.85; }
.lc-tl-row.active-phase-target {
  background: rgba(201, 168, 76, 0.08);
  border-left: 3px solid #E3C671;
  border-radius: 0 8px 8px 0;
}

.lc-tl-label {
  display: flex; align-items: center; gap: 0.55rem; min-width: 0; padding-left: 0.35rem;
  position: sticky; left: 0; background: var(--bg-card); z-index: 3;
}
.lc-tl-name { flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-lv-dot {
  width: 22px; height: 16px; border-radius: 4px; font-size: 0.58rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; color: var(--lvt, #0B1424); background: var(--lv); flex-shrink: 0;
}
.lc-tl-track { position: relative; height: 48px; }
.lc-tl-bar {
  position: absolute; top: 12px; height: 24px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--lv); background: rgba(18, 32, 56, 0.8); display: flex; align-items: center; padding: 0 0.55rem;
}
.lc-tl-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--lv) 38%, transparent); }
.lc-tl-bar.met { background: var(--lv); border-color: var(--lv); }
.lc-tl-bar.met .lc-tl-fill { display: none; }
.lc-tl-bar-label {
  position: relative; z-index: 1; font-size: 0.66rem; font-weight: 800; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-tl-bar.met .lc-tl-bar-label { color: #0B1424; }
.lc-tl-gate {
  position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #4ADE80; border: 2px solid #0B1424; box-shadow: 0 0 6px rgba(74, 222, 128, 0.7); z-index: 2;
  cursor: pointer; transition: transform 0.15s ease;
}
.lc-tl-gate:hover { transform: scale(1.4); }
.lc-tl-gate.static { position: static; margin: 0; display: inline-block; }
.lc-northstar {
  display: flex; align-items: center; gap: 0.5rem; margin: 0.8rem 1.4rem 1.2rem; padding: 0.75rem 0.95rem;
  border-radius: 10px; font-size: 0.76rem; color: var(--text-secondary); background: rgba(201, 168, 76, 0.08); border: 1px solid rgba(201, 168, 76, 0.28);
}
.lc-northstar strong { color: #E3C671; }
.lc-northstar i, .lc-northstar svg { width: 15px; height: 15px; color: #E3C671; flex-shrink: 0; }

.lc-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%; font-size: 0.68rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #E3C671; background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.4);
}
.lc-num.star { color: #0B1424; background: #E3C671; }

/* Stages View — Controls, Sorting & Table */
.lc-table-controls {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem 0.55rem; border-bottom: 1px solid var(--border-color); background: rgba(18, 32, 56, 0.3);
}
.lc-search-wrap {
  display: flex; align-items: center; gap: 0.45rem; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 8px; padding: 0.38rem 0.65rem; min-width: 240px; flex: 1; max-width: 380px;
}
.lc-search-wrap svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.lc-search-wrap input {
  border: none; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.76rem; width: 100%; outline: none;
}
.lc-search-clear {
  border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0;
}
.lc-search-clear:hover { color: var(--text-primary); }
.lc-search-clear svg { width: 13px; height: 13px; }

.lc-filter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lc-filter-chip {
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary);
  font: inherit; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 999px;
  cursor: pointer; transition: all 0.12s ease;
}
.lc-filter-chip:hover { border-color: rgba(201, 168, 76, 0.4); color: var(--text-primary); }
.lc-filter-chip.active { color: #E3C671; border-color: rgba(201, 168, 76, 0.55); background: rgba(201, 168, 76, 0.14); }

.lc-stages { padding: 0.6rem 0.8rem 0.9rem; }
.lc-srow {
  display: grid; align-items: center; column-gap: 1rem;
  grid-template-columns: 32px minmax(210px, 2.1fr) minmax(210px, 1.9fr) 104px 60px 60px 128px 118px;
  padding: 0.75rem 0.65rem; border-bottom: 1px solid rgba(94, 142, 222, 0.1); border-radius: 10px;
}
.lc-srow[data-stage] { cursor: pointer; transition: background 0.12s ease; }
.lc-srow[data-stage]:hover, .lc-srow.selected { background: rgba(201, 168, 76, 0.07); }
.lc-shead {
  padding-top: 0.3rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border-color); border-radius: 0;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.lc-th-btn {
  cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 0.25rem;
  transition: color 0.12s ease;
}
.lc-th-btn:hover { color: #E3C671; }
.lc-th-btn.sorted { color: #E3C671; }
.sort-icon { font-size: 0.68rem; line-height: 1; }
.sort-icon.muted { opacity: 0.35; }
.sort-icon.active { opacity: 1; color: #E3C671; }

.lc-table-empty {
  padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); font-size: 0.85rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.lc-table-empty svg { width: 30px; height: 30px; color: var(--text-muted); }

.lc-scell { min-width: 0; }
.lc-s-title { font-size: 0.84rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.lc-s-apps { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-s-level { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.lc-s-note { flex-basis: 100%; font-size: 0.68rem; color: var(--text-secondary); line-height: 1.35; }
.lc-streak { display: inline-flex; gap: 3px; }
.lc-streak i { width: 12px; height: 5px; border-radius: 3px; background: rgba(94, 142, 222, 0.22); }
.lc-streak i.on { background: #4ADE80; box-shadow: 0 0 4px rgba(74, 222, 128, 0.5); }
.lc-s-uses b, .lc-s-num b, .lc-s-score b { font-size: 0.94rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lc-s-uses span { font-size: 0.66rem; color: var(--text-muted); margin-left: 0.2rem; }
.lc-meter { height: 4px; border-radius: 2px; background: rgba(94, 142, 222, 0.18); margin-top: 0.35rem; overflow: hidden; max-width: 90px; }
.lc-meter i { display: block; height: 100%; background: #C9A84C; border-radius: 2px; }
.lc-s-num.err b { color: #F87171; }
.lc-s-score { display: flex; align-items: center; gap: 0.5rem; }
.lc-s-score b { color: #E3C671; min-width: 2ch; }
.lc-s-target { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.lc-s-tlv { font-size: 0.8rem; font-weight: 800; color: var(--text-primary); }
.lc-s-muted { color: var(--text-muted); }
.lc-pill { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.14rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.lc-pill.ok { color: #4ADE80; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.35); }
.lc-pill.behind { color: #FCA5A5; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.35); }

@media (max-width: 1250px) {
  .lc-srow { grid-template-columns: 30px minmax(180px, 2fr) minmax(180px, 1.8fr) 92px 52px 52px 112px 104px; column-gap: 0.7rem; }
}
@media (max-width: 1000px) {
  .lc-shead { display: none; }
  .lc-srow {
    grid-template-columns: 30px repeat(4, minmax(0, 1fr));
    grid-template-areas: "n name name name name" ". level level level level" ". uses people errors score" ". target target target target";
    row-gap: 0.6rem; column-gap: 0.6rem; padding: 0.95rem 0.5rem; align-items: start;
  }
  .lc-s-n { align-self: center; }
  .lc-s-n { grid-area: n; }
  .lc-s-name { grid-area: name; }
  .lc-s-level { grid-area: level; }
  .lc-s-uses { grid-area: uses; }
  .lc-s-num { grid-area: people; }
  .lc-s-num + .lc-s-num { grid-area: errors; }
  .lc-s-score { grid-area: score; flex-direction: column; align-items: flex-start; gap: 0; }
  .lc-s-score .lc-spark { display: none; }
  .lc-s-target { grid-area: target; }
  .lc-s-uses::before, .lc-s-num::before, .lc-s-score::before, .lc-s-target::before {
    content: attr(data-label); display: block; font-size: 0.54rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.15rem; flex-basis: 100%;
  }
  .lc-s-target::before { flex-basis: auto; margin: 0 0.3rem 0 0; }
  .lc-meter { max-width: none; }
}

#section-lifecycle .top-bar { position: relative; z-index: 120; }

/* Backdrop for Detail Drawer */
.lc-backdrop {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background-color: rgba(11, 20, 36, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 104; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.lc-backdrop.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* Detail Drawer (Slide-Over Inspector Panel) */
.lc-detail {
  position: fixed; top: 72px; right: 0; width: min(640px, 95vw);
  height: calc(100vh - 72px); height: calc(100dvh - 72px);
  background: var(--bg-card); border-left: 1px solid var(--border-color);
  border-top: 1px solid var(--border-color); border-radius: 14px 0 0 0;
  box-shadow: -16px 0 55px rgba(0, 0, 0, 0.75);
  z-index: 105; overflow-y: auto; margin: 0; padding: 1.4rem 1.6rem 4rem;
  transform: translateX(0); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.lc-detail.hidden { display: none !important; transform: translateX(105%); }

/* Drawer Header */
.lc-drawer-header {
  padding-bottom: 1.1rem; border-bottom: 1px solid rgba(94, 142, 222, 0.14);
}
.lc-dh-top {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
}
.lc-dh-badges {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem;
}
.lc-stage-tag {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #E3C671; background: rgba(201, 168, 76, 0.14); border: 1px solid rgba(201, 168, 76, 0.38);
  padding: 0.18rem 0.65rem; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.lc-app-tag {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 600;
  color: #93C5FD; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.28);
  padding: 0.18rem 0.6rem; border-radius: 999px;
}
.lc-app-tag svg { width: 12px; height: 12px; color: #60A5FA; }

.lc-dh-title {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--text-primary);
  margin: 0.7rem 0 0.75rem; line-height: 1.25;
}
.lc-dh-status-banner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  padding: 0.6rem 0.85rem; border-radius: 10px; background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-color);
}
.lc-dh-status-left {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
}
.lc-dh-status-note {
  font-size: 0.76rem; color: #CBD5E1; font-weight: 500;
}
.lc-pill-cadence {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 700;
  color: var(--text-muted); background: rgba(255, 255, 255, 0.05); padding: 0.15rem 0.5rem; border-radius: 999px;
}
.lc-pill-cadence svg { width: 12px; height: 12px; }

/* Drawer Body & Cards */
.lc-drawer-body {
  display: flex; flex-direction: column; gap: 1.15rem; margin-top: 1.15rem;
}
.lc-card {
  background: rgba(18, 32, 56, 0.55); border: 1px solid rgba(94, 142, 222, 0.14);
  border-radius: 14px; padding: 1.1rem 1.25rem; transition: border-color 0.15s ease, background 0.15s ease;
}
.lc-card:hover { border-color: rgba(94, 142, 222, 0.26); background: rgba(18, 32, 56, 0.7); }
.lc-card-header {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.85rem;
}
.lc-card-title {
  display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: #E3C671;
}
.lc-card-title svg { width: 14px; height: 14px; color: #E3C671; flex-shrink: 0; }
.lc-card-tag {
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); background: rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 0.12rem 0.45rem;
}
.lc-card-desc { font-size: 0.72rem; color: var(--text-secondary); margin: 0.2rem 0 0; line-height: 1.4; }

/* Section 1: KPI Tiles */
.lc-metric-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem;
}
.lc-mtile {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
  padding: 0.75rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
}
.lc-mtile-label {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.lc-mtile-val {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 0.25rem; margin-top: 0.1rem;
}
.lc-mtile-val span {
  font-family: var(--font-family); font-size: 0.66rem; font-weight: 600; color: var(--text-muted);
}
.lc-mtile-val.ok { color: #4ADE80; }
.lc-mtile-val.err { color: #F87171; }
.lc-mtile-val.score { color: #E3C671; }
.lc-mtile-sub {
  font-size: 0.66rem; color: var(--text-secondary); line-height: 1.3; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin-top: 0.1rem;
}
.lc-mtile-meter {
  height: 4px; border-radius: 2px; background: rgba(94, 142, 222, 0.16); margin-top: 0.35rem; overflow: hidden;
}
.lc-mtile-meter i { display: block; height: 100%; background: #C9A84C; border-radius: 2px; }

/* Section 2: Gate Steps Stepper */
.lc-gate-timeline { display: flex; flex-direction: column; gap: 0.8rem; }
.lc-gate-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem;
}
.lc-gstep {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px;
  padding: 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; transition: border-color 0.15s ease;
}
.lc-gstep.met {
  border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.05);
}
.lc-gstep-head {
  display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(94, 142, 222, 0.08);
  padding-bottom: 0.35rem;
}
.lc-gstep-w { font-size: 0.72rem; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lc-gstep-badge {
  font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.1rem 0.38rem; border-radius: 999px;
}
.lc-gstep-badge.met { color: #4ADE80; background: rgba(74, 222, 128, 0.15); }
.lc-gstep-badge.pending { color: var(--text-muted); background: rgba(255, 255, 255, 0.06); }
.lc-gstep-items {
  display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.68rem; color: var(--text-secondary);
}
.lc-gstep-items span { display: inline-flex; align-items: center; gap: 0.35rem; }
.lc-gstep-items span svg { width: 12px; height: 12px; flex-shrink: 0; }
.lc-gstep-items span.ok { color: #4ADE80; }
.lc-gstep-items span.err { color: #F87171; }

.lc-gate-summary {
  display: flex; justify-content: space-between; align-items: center; margin-top: 0.2rem;
  padding-top: 0.75rem; border-top: 1px dashed rgba(94, 142, 222, 0.16);
}
.lc-gate-summary-text { font-size: 0.74rem; color: var(--text-secondary); }
.lc-gate-summary-text strong { color: #E3C671; margin-left: 0.3rem; }
.lc-gate-progress-track {
  width: 160px; height: 6px; border-radius: 999px; background: rgba(94, 142, 222, 0.18); overflow: hidden;
}
.lc-gate-progress-track i { display: block; height: 100%; background: #4ADE80; border-radius: 999px; transition: width 0.3s ease; }
.lc-gate-monthly {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border-color); font-size: 0.76rem;
}
.lc-gate-monthly svg { width: 22px; height: 22px; color: #E3C671; flex-shrink: 0; }
.lc-gate-monthly strong { display: block; color: var(--text-primary); margin-bottom: 0.15rem; }
.lc-gate-monthly p { margin: 0; color: var(--text-secondary); }

/* Section 3: Targets */
.lc-targets-list { display: flex; flex-direction: column; gap: 0.55rem; }
.lc-target-item {
  display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.9rem;
  border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-color);
}
.lc-target-item.active { border-color: rgba(201, 168, 76, 0.45); background: rgba(201, 168, 76, 0.05); }
.lc-target-phase { font-size: 0.82rem; font-weight: 700; color: var(--text-primary); }
.lc-target-date {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem;
}
.lc-target-date svg { width: 12px; height: 12px; }
.lc-target-badge { display: flex; align-items: center; gap: 0.6rem; }
.lc-target-status {
  font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.14rem 0.48rem; border-radius: 6px;
}
.lc-target-status.met { color: #4ADE80; background: rgba(74, 222, 128, 0.14); border: 1px solid rgba(74, 222, 128, 0.35); }
.lc-target-status.pending { color: #E3C671; background: rgba(201, 168, 76, 0.14); border: 1px solid rgba(201, 168, 76, 0.35); }
.lc-card-empty { padding: 0.75rem 0.5rem; text-align: center; color: var(--text-muted); font-size: 0.74rem; font-style: italic; }

/* Section 4: Trends */
.lc-trend-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.lc-trend-box {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 0.75rem 0.85rem;
}
.lc-tb-head { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.lc-empty-trend {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: 10px;
  background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(94, 142, 222, 0.2); font-size: 0.76rem; color: var(--text-muted);
}
.lc-empty-trend svg { width: 24px; height: 24px; color: var(--text-muted); flex-shrink: 0; }
.lc-empty-trend strong { color: var(--text-secondary); display: block; margin-bottom: 0.15rem; }
.lc-empty-trend p { margin: 0; font-size: 0.72rem; line-height: 1.35; }

/* Section 5: Governance & Admin Controls */
.lc-admin-controls { display: flex; flex-direction: column; gap: 0.75rem; }
.lc-ctrl-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0.9rem;
  border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-color);
}
.lc-ctrl-info strong { display: block; font-size: 0.8rem; color: var(--text-primary); margin-bottom: 0.15rem; }
.lc-ctrl-info p { margin: 0; font-size: 0.7rem; color: var(--text-secondary); line-height: 1.35; max-width: 44ch; }
.lc-ctrl-action { flex-shrink: 0; }
.lc-status-ok {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; color: #4ADE80;
}
.lc-status-ok svg { width: 13px; height: 13px; }

/* Toggle Switch */
.lc-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.lc-switch input { opacity: 0; width: 0; height: 0; }
.lc-switch-slider {
  position: absolute; inset: 0; cursor: pointer; background-color: rgba(100, 116, 139, 0.35);
  border: 1px solid var(--border-color); border-radius: 24px; transition: 0.2s;
}
.lc-switch-slider:before {
  position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px;
  background-color: #F1F5F9; border-radius: 50%; transition: 0.2s;
}
.lc-switch input:checked + .lc-switch-slider { background-color: #4ADE80; border-color: #4ADE80; }
.lc-switch input:checked + .lc-switch-slider:before { transform: translateX(20px); background-color: #0B1424; }
.lc-switch input:disabled + .lc-switch-slider { opacity: 0.4; cursor: not-allowed; }

.lc-ctrl-stepper { display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }
.lc-ctrl-stepper input[type="number"] {
  width: 68px; text-align: center; padding: 0.4rem 0.5rem; font-size: 0.88rem; font-weight: 700;
  border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-primary); color: #E3C671; font: inherit;
}
.lc-ctrl-stepper span { font-size: 0.72rem; color: var(--text-muted); }

/* Fallbacks for Brain & Person Drawers */
.lc-detail-head { display: flex; align-items: flex-start; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border-color); }
.lc-detail-head > div:first-child { flex: 1; min-width: 0; }
.lc-detail-name { font-size: 1.08rem; color: var(--text-primary); }
.lc-detail-level { text-align: right; max-width: 40ch; }
.lc-detail-grid { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1.4rem; margin-top: 1rem; }
.lc-section-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A84C; margin: 0.4rem 0 0.5rem; }
.lc-gates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.lc-gate { border: 1px solid var(--border-color); border-radius: 9px; padding: 0.4rem 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.66rem; color: #F87171; }
.lc-gate strong { color: var(--text-secondary); font-size: 0.64rem; }
.lc-gate span.ok { color: #4ADE80; }
.lc-gate.ok { border-color: rgba(74, 222, 128, 0.45); background: rgba(74, 222, 128, 0.06); }
.lc-sparks { display: flex; flex-direction: column; gap: 0.35rem; }
.lc-kv { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.74rem; }
.lc-kv > div { display: flex; justify-content: space-between; gap: 0.8rem; border-bottom: 1px dashed rgba(94, 142, 222, 0.14); padding-bottom: 0.25rem; }
.lc-kv span { color: var(--text-muted); }
.lc-kv b { color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
.lc-flags { display: flex; flex-direction: column; gap: 0.6rem; }
.lc-flag { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--text-secondary); flex-wrap: wrap; }
.lc-flag input[type="number"] { width: 68px; padding: 0.3rem 0.4rem; border-radius: 7px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font: inherit; }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.74rem; min-height: 0; }

/* The Brain Deep-Dive in Detail Drawer */
.lc-brain-deep { margin-top: 0.5rem; }
.lc-brain-stages-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.4rem;
}
.lc-brain-st-chip {
  display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.6rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-color); cursor: pointer; transition: all 0.12s ease;
}
.lc-brain-st-chip:hover { border-color: rgba(201, 168, 76, 0.5); background: rgba(201, 168, 76, 0.08); }
.lc-brain-st-name { flex: 1; font-size: 0.74rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lifecycle · People — per-person weekly scorecards */
.lc-weeks { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 1rem 1.2rem 0.2rem; }
.lc-week {
  border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary);
  font: inherit; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer;
  transition: all 0.14s ease; display: inline-flex; align-items: center; gap: 0.35rem;
}
.lc-week:hover { border-color: rgba(201, 168, 76, 0.4); color: var(--text-primary); }
.lc-week.active { color: #E3C671; border-color: rgba(201, 168, 76, 0.55); background: rgba(201, 168, 76, 0.14); }
.lc-week-latest { font-size: 0.56rem; text-transform: uppercase; background: #E3C671; color: #0B1424; padding: 0.05rem 0.35rem; border-radius: 999px; font-weight: 800; }
/* "All weeks" leads the row, set a little apart from the individual weeks */
.lc-week-all { margin-right: 0.4rem; }
.lc-week-count {
  font-size: 0.56rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted);
  background: rgba(128, 128, 128, 0.16); padding: 0.05rem 0.38rem; border-radius: 999px;
}
.lc-week.active .lc-week-count { color: #E3C671; background: rgba(201, 168, 76, 0.2); }
.lc-person-unit { display: block; font-size: 0.62rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }

.lc-people-header-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  margin: 0.5rem 1.2rem 0.2rem;
}
.lc-private { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; color: var(--text-muted); margin: 0; }
.lc-private i, .lc-private svg { width: 14px; height: 14px; color: #C9A84C; flex-shrink: 0; }
.lc-benchmark-badge {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-secondary);
  background: rgba(201, 168, 76, 0.08); border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 999px; padding: 0.2rem 0.65rem;
}
.lc-benchmark-badge svg { width: 13px; height: 13px; color: #E3C671; }
.lc-benchmark-badge b { color: #E3C671; }

.lc-empty { padding: 2rem 1.2rem; }
.lc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; padding: 0.9rem 1.2rem 1.2rem; }
.lc-person {
  border: 1px solid var(--border-color); border-radius: 14px; padding: 0.95rem 1.05rem; cursor: pointer; min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005) 45%), var(--bg-card);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lc-person:hover, .lc-person.selected { border-color: rgba(201, 168, 76, 0.55); transform: translateY(-2px); box-shadow: 0 0 20px rgba(201, 168, 76, 0.18); }
.lc-person-head { display: flex; align-items: center; gap: 0.65rem; }
.lc-person-head > div:nth-child(2) { flex: 1; min-width: 0; }
.lc-person-head .item-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-person-score-wrap { text-align: right; }
.lc-person-benchmark { display: block; font-size: 0.62rem; font-weight: 700; color: #4ADE80; font-variant-numeric: tabular-nums; }

.lc-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 50%; font-size: 0.74rem; font-weight: 800; color: #0B1424;
  background: linear-gradient(135deg, #F4E5B4, #C9A84C);
}
.lc-avatar.lg { width: 42px; height: 42px; font-size: 0.82rem; margin-right: 0.55rem; vertical-align: middle; }
.lc-person-name { font-size: 0.88rem; font-weight: 800; color: var(--text-primary); }
.lc-person-score { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: #E3C671; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-person-score.lg { font-size: 2rem; }
.lc-person-stats { display: flex; gap: 0.9rem; margin: 0.55rem 0 0.45rem; font-size: 0.72rem; color: var(--text-muted); }
.lc-person-stats b { color: var(--text-primary); font-size: 0.82rem; }
.lc-person-topics { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.45rem; }
.lc-person-topics span {
  font-size: 0.66rem; font-weight: 600; color: #C9D4E6; padding: 0.16rem 0.52rem; border-radius: 999px;
  background: rgba(76, 125, 208, 0.12); border: 1px solid rgba(94, 142, 222, 0.28);
}
.lc-person-topics.lg span { font-size: 0.72rem; padding: 0.22rem 0.6rem; }
.lc-person-topics .muted { background: none; border-color: transparent; color: var(--text-muted); font-style: italic; }
.lc-person-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.9rem; }
.lc-person-kpis > div { border: 1px solid var(--border-color); border-radius: 10px; padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lc-person-kpis b { font-size: 1.05rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.lc-person-kpis span { font-size: 0.62rem; color: var(--text-muted); }
.lc-list { margin: 0.2rem 0 0.6rem; padding-left: 1.1rem; font-size: 0.76rem; line-height: 1.55; color: var(--text-primary); }
.lc-coach {
  display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.4rem; padding: 0.6rem 0.75rem; border-radius: 10px;
  font-size: 0.76rem; line-height: 1.5; color: #F4E5B4; background: rgba(201, 168, 76, 0.1); border: 1px solid rgba(201, 168, 76, 0.35);
}
.lc-coach i, .lc-coach svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.15rem; color: #E3C671; }
.lc-flag-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.2rem 0 0.6rem; }
.lc-flag-chips span { font-size: 0.62rem; color: #FCA5A5; padding: 0.12rem 0.45rem; border-radius: 6px; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); }
.lc-tasks { display: flex; flex-direction: column; gap: 0.3rem; }
.lc-tasks > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 28px; align-items: center; gap: 0.5rem; font-size: 0.68rem; color: var(--text-secondary); }
.lc-tasks span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.lc-tasks i { display: block; height: 6px; border-radius: 3px; background: #C9A84C; opacity: 0.8; }
.lc-tasks b { text-align: right; color: var(--text-primary); }
.lc-formula { margin-top: 0.8rem; }
@media (max-width: 1100px) { .lc-person-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .lc-people { grid-template-columns: 1fr; padding: 0.8rem; }
  .lc-person-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-weeks, .lc-private { padding-left: 0.8rem; padding-right: 0.8rem; margin-left: 0; margin-right: 0; }
}


/* Person page — one vertical column of full-width sections */
.lc-detail.lc-detail { padding: 1.6rem 1.8rem 1.4rem; }
.lc-ph { display: flex; align-items: center; gap: 1.1rem; }
.lc-ph-id { flex: 1; min-width: 0; }
.lc-ph-name { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); }
.lc-ph-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.2rem; }
.lc-ph-score { text-align: right; }
.lc-ph-score-l { font-size: 0.66rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.lc-avatar.xl { width: 58px; height: 58px; font-size: 1.05rem; }
.lc-person-score.xl { font-size: 2.8rem; line-height: 1; }

.lc-sb { margin-top: 1.3rem; }
.lc-sb-bar { display: flex; gap: 4px; height: 10px; }
.lc-sb-slot { position: relative; border-radius: 5px; background: rgba(94, 142, 222, 0.14); overflow: hidden; }
.lc-sb-slot i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.lc-sb-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 0.65rem; font-size: 0.7rem; color: var(--text-secondary); }
.lc-sb-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.lc-sb-legend span > i { width: 9px; height: 9px; border-radius: 3px; }
.lc-sb-legend b { color: var(--text-primary); }
.lc-sb-legend em { font-style: normal; color: var(--text-muted); }
.lc-sb-note { flex-basis: 100%; color: var(--text-muted); font-style: italic; }

.lc-detail .lc-person-kpis { margin-top: 1.4rem; gap: 0.7rem; }
.lc-detail .lc-person-kpis > div { padding: 0.8rem 0.9rem; gap: 0.2rem; }
.lc-detail .lc-person-kpis b { font-size: 1.35rem; }
.lc-detail .lc-person-kpis span { font-size: 0.66rem; }
.lc-person-kpis > div.warn { border-color: rgba(248, 113, 113, 0.35); }
.lc-person-kpis > div.warn b { color: #FCA5A5; }

.lc-coach.lg { margin-top: 1.4rem; padding: 1rem 1.15rem; font-size: 0.86rem; line-height: 1.6; gap: 0.75rem; }
.lc-coach.lg i, .lc-coach.lg svg { width: 18px; height: 18px; margin-top: 0.2rem; }
.lc-coach-l { display: block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A84C; margin-bottom: 0.2rem; }

.lc-ps { padding: 1.4rem 0; border-bottom: 1px solid rgba(94, 142, 222, 0.12); }
.lc-ps:first-of-type { margin-top: 0.4rem; }
.lc-ps.last { border-bottom: none; padding-bottom: 0.4rem; }
.lc-ps-title {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #C9A84C;
}
.lc-ps-title i, .lc-ps-title svg { width: 15px; height: 15px; }
.lc-ps-sub { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 1rem 0 0.55rem; }
.lc-ps-empty { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
.lc-person-topics.xl { gap: 0.5rem; }
.lc-person-topics.xl span { font-size: 0.82rem; padding: 0.4rem 0.85rem; }
.lc-ps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.lc-ps-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; line-height: 1.5; color: var(--text-primary); }
.lc-ps-list li i, .lc-ps-list li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.2rem; }
.lc-ps-list.good li svg { color: #4ADE80; }
.lc-ps-list.warn li svg { color: #FCA5A5; }

.lc-hbars { display: flex; flex-direction: column; gap: 0.5rem; }
.lc-hbars > div { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr) 40px; align-items: center; gap: 0.9rem; font-size: 0.78rem; color: var(--text-secondary); }
.lc-hbars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.lc-hbars i { display: block; height: 8px; border-radius: 4px; background: #C9A84C; }
.lc-hbars.red i { background: rgba(248, 113, 113, 0.75); }
.lc-hbars b { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.lc-trends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.lc-trends .lc-ps-sub { margin-top: 0; }
.lc-wbars { display: flex; align-items: flex-end; gap: 0.5rem; height: 150px; }
.lc-wbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; height: 100%; min-width: 0; }
.lc-wbar-v { font-size: 0.72rem; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lc-wbar-track { flex: 1; width: 100%; max-width: 44px; display: flex; align-items: flex-end; border-radius: 6px; background: rgba(94, 142, 222, 0.08); }
.lc-wbar-track i { display: block; width: 100%; border-radius: 6px; background: rgba(201, 168, 76, 0.45); }
.lc-wbar.now .lc-wbar-track i { background: #E3C671; box-shadow: 0 0 10px rgba(201, 168, 76, 0.4); }
.lc-wbar.now .lc-wbar-v { color: #E3C671; }
.lc-wbar-w { font-size: 0.62rem; color: var(--text-muted); }

/* Report Modal Dialog */
.lc-report-dialog {
  max-width: 900px; width: 92vw; height: 88vh; max-height: 90vh;
}
.lc-report-modal-body {
  flex: 1; min-height: 0; padding: 0; overflow: hidden; background: #0B1424;
}
.lc-report-modal-body iframe {
  width: 100%; height: 100%; border: none; display: block;
}

@media (max-width: 700px) {
  .lc-detail { width: 100vw; padding: 1.1rem 1rem 2.2rem; }
  .lc-ph { flex-wrap: wrap; }
  .lc-ph-score { text-align: left; order: 3; flex-basis: 100%; }
  .lc-person-score.xl { font-size: 2.2rem; }
  .lc-hbars > div { grid-template-columns: minmax(0, 1fr) 70px 30px; gap: 0.5rem; }
  .lc-trends { grid-template-columns: 1fr; gap: 1.4rem; }
  .lc-wbars { height: 120px; gap: 0.3rem; }
  #section-lifecycle .header-actions { flex-wrap: wrap; }
}

/* ── Lifecycle review pass ──────────────────────────────────────────────── */

/* Empty + loading states: say it where the eye lands, and never dress
   "nothing measured" up as zeros. */
.lc-empty-banner {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.8rem 1rem; border-radius: 12px; font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary);
  background: rgba(201, 168, 76, 0.07); border: 1px dashed rgba(201, 168, 76, 0.4);
}
.lc-empty-banner svg { width: 18px; height: 18px; color: #E3C671; flex-shrink: 0; margin-top: 0.1rem; }
.lc-empty-banner strong { color: var(--text-primary); }
.lc-empty-banner em { font-style: normal; color: #E3C671; }
.lc-skel { display: flex; flex-direction: column; gap: 0.5rem; min-height: 96px; justify-content: center; }
.lc-skel-line { display: block; height: 10px; border-radius: 5px; background: rgba(94, 142, 222, 0.16); animation: lcSkel 1.4s ease-in-out infinite; }
.lc-skel-line.tall { height: 22px; }
.lc-skel-line.w40 { width: 40%; } .lc-skel-line.w60 { width: 60%; } .lc-skel-line.w80 { width: 80%; }
@keyframes lcSkel { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lc-skel-line { animation: none; } }
.lc-node-meta.muted { color: var(--text-muted); font-style: italic; }
.lc-glossary { flex-basis: 100%; color: var(--text-muted); }

/* KPI tiles are navigation — show it on touch screens too, not only on hover */
@media (hover: none) { .lc-kpi-jump { opacity: 1; transform: none; } }

/* Pace against the phase target: amber "at risk" only when the maths says
   the deadline can't be met; "on track" stays quiet; "met" is green. */
.lc-pill.met { color: #4ADE80; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.35); }
.lc-pill.track { color: var(--text-secondary); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); }
.lc-pill.risk { color: #FCD34D; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4); }

/* The brain isn't on the ladder — its own chip, not a borrowed L5 */
.lc-chip-core { color: #E3C671; background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.5); }

/* Zoom: the shell is the layout footprint of the scaled canvas, so the
   scroller has exactly as much to scroll as there is drawing. */
.lc-canvas-shell { margin: 0 auto; }
.lc-canvas-shell .map-canvas { margin: 0; }

/* Met timeline bars read as achieved whatever the level colour */
.lc-tl-bar.met { box-shadow: inset 0 0 0 1.5px rgba(74, 222, 128, 0.75); }
.lc-tl-bar.met .lc-tl-bar-label { color: var(--lvt, #0B1424); }

/* The inspector is a dialog: focus lands on its title, quietly */
.lc-detail [tabindex="-1"]:focus { outline: none; }
.lc-person-inline { padding: 0.4rem 1.2rem 1.4rem; }

/* Type floor: nothing informational below ~10px */
.lc-node-meta { font-size: 0.68rem; }
.lc-node-lv { font-size: 0.64rem; }
.lc-mtile-label { font-size: 0.66rem; }
.lc-gstep-badge { font-size: 0.64rem; }
.lc-tl-phase-n, .lc-brain-eyebrow, .lc-tl-today span, .lc-lv-dot { font-size: 0.62rem; }
.lc-tl-month, .lc-tl-corner, .lc-pill { font-size: 0.64rem; }
.lc-week-latest, .lc-week-count { font-size: 0.6rem; }
.lc-person-benchmark, .lc-person-unit { font-size: 0.66rem; }
@media (max-width: 1000px) {
  .lc-s-uses::before, .lc-s-num::before, .lc-s-score::before, .lc-s-target::before { font-size: 0.62rem; }
}

/* Phones: the loop needs a wide screen — the Stages list is the phone view */
@media (max-width: 700px) {
  .lc-view-btn[data-view="loop"], #btn-brain-to-loop { display: none; }
}

/* The More sheet exists only on phones (its styles live in the ≤700px block);
   without this it would render in the page flow on desktop. */
@media (min-width: 701px) {
  .mobile-more-sheet, .mobile-more-backdrop { display: none; }
}

/* Phones: the four-up grids go two-up — four 80px columns wrapped every
   label four lines deep and clipped the phase name and the gate badges. */
@media (max-width: 700px) {
  .lc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .lc-kpi-value { font-size: 1.45rem; }
  .lc-kpi-text { font-size: 1rem; }
  .lc-metric-tiles, .lc-gate-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-mtile-sub { white-space: normal; }
}