/* ═══════════════════════════════════════════════════════════════
   EY Dark — Apple-grade polish, dark theme
   Loads LAST. Overrides theme.css with:
     • deep charcoal surfaces, layered depth
     • high-contrast white text (AA+ everywhere)
     • yellow reserved for primary CTA + active state + accent
     • Apple-scale whitespace, pill buttons, soft luminous shadows
   ═══════════════════════════════════════════════════════════════ */

:root, :root.dark, html, body {
  color-scheme: dark;
}

:root {
  /* Brand — unchanged */
  --brand-yellow:        #FFE600;
  --brand-yellow-600:    #F7B500;
  --brand-yellow-100:    #2A2A0F;    /* dark-mode wash for active tints */

  /* Surfaces (EY dark) */
  --surface-0:   #121315;   /* card face */
  --surface-1:   #0A0A0B;   /* page */
  --surface-2:   #1C1D20;   /* elevated hover */
  --surface-3:   #26272B;   /* input / chip */
  --surface-inverse: #FFFFFF;

  /* Borders */
  --border-1:    #232428;
  --border-2:    #34353A;
  --border-strong: #4A4B50;

  /* Text (AA+ on dark) */
  --text-1:      #F5F5F7;   /* primary */
  --text-2:      #E8E8EC;   /* body */
  --text-3:      #A1A1A6;   /* secondary */
  --text-4:      #6E6E73;   /* tertiary */
  --text-inverse: #0F1012;

  /* Semantic — dark-mode adjusted */
  --success:     #30D67A;
  --success-bg:  #10281A;
  --warning:     #F5B041;
  --warning-bg:  #2A1D07;
  --danger:      #FF6161;
  --danger-bg:   #2A1010;
  --info:        #8B8EFF;
  --info-bg:     #16182E;

  /* Shadows — softer on dark (less visible, add subtle glow instead) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.55);
  --shadow-yellow: 0 8px 28px rgba(255, 230, 0, 0.22);

  /* Radius — rounder */
  --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-4: 24px; --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* Type scale */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 21px; --fs-2xl: 28px; --fs-3xl: 40px; --fs-4xl: 56px;
}

/* ─── System font + smoothing ───────────────────────────── */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, .hero-title, .kpi-value, .ctc-value, .doc-head h1, .eng-head h1, .budget-metric-value {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ═══════════════════════════════════════════════════════════════
   App-shell layout — sidebar STATIC, main column scrolls
   ═══════════════════════════════════════════════════════════════ */
html { background: var(--surface-1) !important; }
html, body {
  /* Lock the shell to viewport — neither html nor body scrolls. */
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
html, body, .app-body {
  background-color: var(--surface-1) !important;
  color: var(--text-1);
}

.app-body {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  background-image:
    radial-gradient(60% 40% at 82% -10%, rgba(255, 230, 0, 0.06), transparent 60%),
    radial-gradient(50% 40% at 10% 110%, rgba(99, 102, 241, 0.05), transparent 60%) !important;
  background-color: var(--surface-1) !important;
}

/* Sidebar: truly static — never moves */
.app-sidebar {
  position: static !important;
  top: auto !important;
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-right: 1px solid var(--border-1);
}
.sidebar-brand { flex-shrink: 0; }
.sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-1) transparent;
  padding: var(--s-3) var(--s-2) !important;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 3px; }
.sidebar-foot { flex-shrink: 0; }

/* Main column: this is the scroll container */
.app-main {
  height: 100vh !important;
  height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-1) transparent;
}
.app-main::-webkit-scrollbar { width: 10px; }
.app-main::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 5px; border: 2px solid var(--surface-1); }
.app-main::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

.topbar {
  /* Sticky at the top of the scrolling main column */
  position: sticky !important;
  top: 0; z-index: 50;
  flex-shrink: 0;
}

.page {
  flex: 0 0 auto;
  width: 100%;
}

/* ─── Reactive breakpoints ───────────────────────────────── */
@media (max-width: 1024px) {
  .app-body { grid-template-columns: 220px 1fr !important; }
}
@media (max-width: 860px) {
  /* Mobile: revert to body-scroll so the horizontal nav strip works */
  html, body { height: auto !important; overflow: visible !important; min-height: 100vh !important; }
  .app-body {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  .app-sidebar {
    position: sticky !important;
    top: 0; z-index: 60;
    height: auto !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--border-1);
  }
  .sidebar-nav {
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--s-2) var(--s-3) !important;
    gap: 4px !important;
  }
  .sidebar-nav .nav-item { white-space: nowrap; padding: 8px 12px !important; }
  .sidebar-foot, .sidebar-live { display: none; }
  .app-main {
    height: auto !important;
    overflow: visible !important;
  }
  .topbar { position: sticky !important; top: 56px; padding: var(--s-3) var(--s-4) !important; }
  .topbar-search { display: none; }
}

body { font-size: var(--fs-md); line-height: 1.55; color: var(--text-2); }

p, li, td, .panel-sub, .kpi-sub, .doc-sub, .ctc-sub {
  color: var(--text-3);
}

/* ─── Headings ──────────────────────────────────────────── */
h1 { font-size: var(--fs-3xl); letter-spacing: -0.03em; font-weight: 700; color: var(--text-1); }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; font-weight: 600; color: var(--text-1); }
h3 { font-size: var(--fs-xl); letter-spacing: -0.012em; font-weight: 600; color: var(--text-1); }
h4 { font-size: var(--fs-lg); font-weight: 600; color: var(--text-1); }
.section-head h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }

/* ─── Page container — wider canvas, odd-rhythm grid ────────
   Bumped 1440→1760, tighter horizontal padding so content
   breathes at 1920+ while still keeping readable line length
   via content-specific max-widths below. */
.page {
  padding: var(--s-7) var(--s-6) var(--s-9) !important;
  max-width: 1760px;
  margin: 0 auto;
}
@media (min-width: 1600px) {
  .page { padding: var(--s-7) var(--s-8) var(--s-9) !important; }
}
@media (max-width: 860px) { .page { padding: var(--s-6) var(--s-5) var(--s-8) !important; } }

/* Long-form text blocks stay readable; everything else can span wide */
.panel-body, .brief-text, pre.share-md {
  max-width: 78ch;
}

/* ─── Odd-rhythm layout helpers ──────────────────────────── */
/* 7/5 asymmetric split — rule of thirds with a 12-col grid */
.split-73 {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-6);
  margin: var(--s-5) 0;
}
.split-58 {
  display: grid;
  grid-template-columns: 5fr 8fr;
  gap: var(--s-6);
  margin: var(--s-5) 0;
}
@media (max-width: 960px) {
  .split-73, .split-58 { grid-template-columns: 1fr; }
}

/* Odd-count grids: 3 on wide, 1 on narrow — good for tight KPI rows */
.grid-3-odd {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.grid-5-odd {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (max-width: 1280px) {
  .grid-5-odd { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .grid-3-odd, .grid-5-odd { grid-template-columns: 1fr; }
}

/* ─── Hero banner — framed card with EY accent ───────────── */
.hero, .hero.ambient-hero {
  position: relative;
  padding: var(--s-8) var(--s-8) var(--s-7) var(--s-8) !important;
  margin: 0 0 var(--s-7) 0 !important;
  max-width: none !important;
  background: linear-gradient(135deg, #121315 0%, #0E0F11 100%) !important;
  border: 1px solid var(--border-1) !important;
  border-left: 3px solid var(--brand-yellow) !important;
  border-radius: var(--r-3) !important;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 230, 0, 0.10), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(99, 102, 241, 0.06), transparent 60%);
  pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-yellow) !important;
  font-size: 11px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em !important;
  padding: 4px 10px;
  background: rgba(255, 230, 0, 0.08);
  border: 1px solid rgba(255, 230, 0, 0.25);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-4);
}
.hero-title {
  font-size: var(--fs-4xl) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  margin: 0 0 var(--s-3) 0 !important;
  max-width: 900px;
}
.hero-sub {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-3);
  max-width: 760px;
  font-weight: 400;
  margin: 0;
}

/* Override ambient-hero pseudo layer — we do it via ::before above */
.ambient-hero::before {
  /* handled on .hero::before now */
}
.ambient-hero::after { display: none !important; }

/* ─── Login-page banner ──────────────────────────────────── */
body.auth-body {
  background: var(--surface-1) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
}
body.auth-body::before {
  content: ""; position: fixed; inset: 0;
  background:
    radial-gradient(50% 40% at 80% 10%, rgba(255, 230, 0, 0.10), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(99, 102, 241, 0.06), transparent 60%);
  z-index: 0; pointer-events: none;
}
.auth-card {
  position: relative; z-index: 1;
  width: min(420px, 92vw);
  background: linear-gradient(135deg, #121315, #0E0F11) !important;
  border: 1px solid var(--border-1) !important;
  border-left: 3px solid var(--brand-yellow) !important;
  border-radius: var(--r-3);
  box-shadow: var(--shadow-xl);
  padding: var(--s-8) !important;
  color: var(--text-1);
}
.auth-header {
  display: flex; flex-direction: column; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.logo-panel { margin-bottom: var(--s-2); }
.ey-logo-lockup { height: 28px; width: auto; filter: brightness(1.1); }
.auth-title h1 {
  color: var(--text-1);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.auth-title .brand-sub {
  color: var(--text-3);
  font-size: var(--fs-sm);
  margin: 0;
}
.auth-error {
  background: rgba(255, 97, 97, 0.10);
  border: 1px solid rgba(255, 97, 97, 0.30);
  color: #FF9B9B;
  padding: 10px 14px;
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-4);
}
.auth-form {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.auth-form label {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.auth-form input {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--r-2) !important;
  padding: 12px 14px !important;
  font-size: var(--fs-md) !important;
  color: var(--text-1) !important;
}
.auth-form input:focus {
  border-color: var(--brand-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.20) !important;
}
.auth-form button {
  margin-top: var(--s-3);
  padding: 12px 22px !important;
  border-radius: var(--r-pill) !important;
  font-size: var(--fs-md) !important;
  font-weight: 600;
  background: linear-gradient(180deg, #FFE600 0%, #F2C200 100%) !important;
  color: #0A0A0B !important;
  border: 0 !important;
  cursor: pointer;
  box-shadow: var(--shadow-yellow);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 220ms ease;
}
.auth-form button:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 14px 34px rgba(255, 230, 0, 0.32);
}
.auth-footer {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-1);
  color: var(--text-3);
  font-size: var(--fs-xs);
  text-align: center;
}

/* ─── Sidebar — dark glass ───────────────────────────────── */
.app-sidebar {
  background: rgba(10, 10, 11, 0.82) !important;
  border-right: 1px solid var(--border-1);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
}
.sidebar-brand {
  padding: var(--s-6) var(--s-5) var(--s-5) !important;
  border-bottom: 1px solid var(--border-1);
}
.sidebar-brand .brand-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-1); }
.sidebar-brand .brand-tag  { color: var(--text-3); letter-spacing: 0.04em; font-weight: 500; }

.ey-logo-sidebar {
  background: linear-gradient(135deg, var(--brand-yellow), var(--brand-yellow-600));
  box-shadow: 0 4px 14px rgba(255, 230, 0, 0.22);
}

.sidebar-nav {
  padding: var(--s-4) var(--s-2) !important;
  gap: 2px !important;
}
.nav-item {
  color: var(--text-2) !important;
  font-weight: 500;
  font-size: var(--fs-md) !important;
  padding: 10px 14px !important;
  border-radius: var(--r-2) !important;
}
.nav-item:hover { background: var(--surface-2) !important; color: var(--text-1) !important; }
.nav-item.is-active {
  background: linear-gradient(135deg, rgba(255, 230, 0, 0.14), rgba(255, 230, 0, 0.04)) !important;
  color: var(--text-1) !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 230, 0, 0.2) !important;
}
.nav-item .nav-icon { color: var(--text-3); }
.nav-item.is-active .nav-icon { color: var(--brand-yellow); }

.sidebar-foot {
  padding: var(--s-3) var(--s-3) var(--s-4);
  border-top: 1px solid var(--border-1);
}
.user-chip { color: var(--text-2); }
.user-chip:hover { background: var(--surface-2); }
.user-meta .user-name { color: var(--text-1); font-weight: 600; }
.user-meta .user-sub  { color: var(--text-3); }

/* Live dot: keep green pulse */
.live-dot { color: var(--text-3) !important; }

/* ─── Topbar — dark glass ───────────────────────────────── */
.topbar {
  background: rgba(10, 10, 11, 0.72) !important;
  backdrop-filter: saturate(140%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(16px) !important;
  padding: var(--s-3) var(--s-7) !important;
  border-bottom: 1px solid var(--border-1) !important;
}
.breadcrumb { color: var(--text-3); font-size: var(--fs-md); }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--text-1); }
.crumb-current { color: var(--text-1); font-weight: 600; }
.crumb-sep     { color: var(--text-4); }

.topbar-search {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-1) !important;
  padding: 0 14px 0 var(--s-3) !important;
}
.topbar-search:focus-within {
  background: var(--surface-3) !important;
  border-color: var(--brand-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.14);
}
.topbar-search input {
  min-width: 300px;
  font-size: var(--fs-md);
  color: var(--text-1) !important;
}
.topbar-search input::placeholder { color: var(--text-3); }
.topbar-search::after {
  background: var(--surface-0) !important;
  color: var(--text-3) !important;
  border: 1px solid var(--border-1) !important;
}

/* ─── Buttons — Apple pill ──────────────────────────────── */
.btn, .btn-primary, .btn-ghost {
  padding: 10px 22px !important;
  border-radius: var(--r-pill) !important;
  font-size: var(--fs-md) !important;
  font-weight: 600;
  letter-spacing: -0.006em;
}
.btn-primary {
  background: linear-gradient(180deg, #FFE600 0%, #F2C200 100%) !important;
  color: #0A0A0B !important;
  box-shadow: var(--shadow-yellow) !important;
  border: 0 !important;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 14px 34px rgba(255, 230, 0, 0.30) !important;
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border-2) !important;
  box-shadow: none !important;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--border-strong) !important;
}

.link-btn {
  color: var(--text-1);
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: transparent;
}
.link-btn:hover { background: var(--surface-2); color: var(--text-1); }
.link-btn--danger { color: var(--danger); }
.link-btn--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ─── Inputs ────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="date"], input[type="search"],
input[type="email"], input[type="tel"], input[type="url"], input[type="password"],
select, textarea {
  border-radius: var(--r-2) !important;
  padding: 10px 14px !important;
  font-size: var(--fs-md) !important;
  color: var(--text-1) !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border-1) !important;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-2) !important; }
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--brand-yellow) !important;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.18) !important;
  background: var(--surface-2) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
select option { background: var(--surface-0); color: var(--text-1); }

/* ─── Panels / cards — dark surface ─────────────────────── */
.panel, .doc-module, .kpi-card, .meth-card, .rag-tile, .ctc-tile,
.budget-metric, .raid-card, .eng-card {
  background: var(--surface-0) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--r-3) !important;
  box-shadow: var(--shadow-xs);
}
.panel-head {
  background: var(--surface-0) !important;
  border-bottom: 1px solid var(--border-1) !important;
  padding: var(--s-5) var(--s-6) !important;
}
.panel-head h2 { font-size: var(--fs-lg); font-weight: 600; color: var(--text-1); }
.panel-body { padding: var(--s-5) var(--s-6) !important; }
.panel-sub { color: var(--text-3); font-size: var(--fs-sm); margin: 4px 0 0; line-height: 1.5; }

/* KPI — odd-count layout on wide viewports (3 primary / 5 stretched)
   Overrides the auto-fit rule in chat.css to enforce rhythm. */
.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--s-5) !important;
  margin: var(--s-7) 0 !important;
}
@media (min-width: 1500px) {
  .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
}
/* The second KPI row on the dashboard has 5 cards — force a true 5-col on wide
   so it stands out as an asymmetric "odd row" vs the 4 primary */
.kpi-grid + .kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1400px) {
  .kpi-grid + .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .kpi-grid + .kpi-grid { grid-template-columns: 1fr !important; }
}
.kpi-card { padding: var(--s-6) var(--s-6) !important; position: relative; }
.kpi-card::before { display: none !important; }
.kpi-label {
  color: var(--text-3) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  font-weight: 600;
}
.kpi-value {
  color: var(--text-1) !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -0.032em !important;
  margin: var(--s-2) 0 !important;
  font-variant-numeric: tabular-nums;
}
.kpi-sub { color: var(--text-3); font-size: var(--fs-sm); }

.kpi-card--accent {
  background: linear-gradient(135deg, #1A1B1F 0%, #0E0E10 100%) !important;
  border-color: var(--border-2) !important;
  position: relative; overflow: hidden;
}
.kpi-card--accent::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(255, 230, 0, 0.12), transparent 50%);
  pointer-events: none;
}
.kpi-card--accent .kpi-label { color: var(--brand-yellow) !important; }
.kpi-card--accent .kpi-value { color: #FFFFFF !important; }
.kpi-card--accent .kpi-sub   { color: rgba(245,245,247,0.6) !important; }
.kpi-total { color: var(--text-3); font-weight: 600; font-size: var(--fs-xl); }

/* Card hover — brightens border + subtle glow, not big lift */
.doc-module, .meth-card, .kpi-card, .eng-card,
.ctc-tile, .rag-tile, .budget-metric, .raid-card {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 200ms ease,
              background 200ms ease;
}
.doc-module:hover, .meth-card:hover, .kpi-card:hover,
.ctc-tile:hover, .rag-tile:hover, .budget-metric:hover, .eng-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-2) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 230, 0, 0.08);
}

/* Engagement card */
.eng-card { padding: var(--s-5) !important; }
.eng-code { color: var(--text-3); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.04em; }
.eng-name { color: var(--text-1); font-size: var(--fs-md); font-weight: 600; margin-top: 6px; }
.eng-meta { color: var(--text-3); font-size: 12.5px; margin-top: 6px; }

/* ─── Status chips — dark-mode tuned ────────────────────── */
.status-chip {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border: 0 !important;
  font-size: 11px !important;
  font-weight: 600;
  padding: 4px 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: var(--r-pill) !important;
}
.status-chip.status-active {
  background: rgba(48, 214, 122, 0.14) !important;
  color: #7AF0B3 !important;
}
.status-chip.status-on_hold {
  background: rgba(245, 176, 65, 0.14) !important;
  color: #FFD695 !important;
}
.status-chip.status-archived,
.status-chip.status-closed {
  background: var(--surface-3) !important;
  color: var(--text-3) !important;
}
.status-chip.status-proposed {
  background: rgba(139, 142, 255, 0.14) !important;
  color: #B3B5FF !important;
}

/* ─── Meta chips — dark surface ─────────────────────────── */
.meta-chip {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-1) !important;
  color: var(--text-2) !important;
  padding: 7px 14px !important;
  font-size: var(--fs-sm) !important;
  border-radius: var(--r-pill) !important;
}
.meta-chip strong { color: var(--text-1); font-weight: 600; }
.meta-chip input, .meta-chip select {
  background: transparent !important; border: 0 !important;
  color: var(--text-1) !important; padding: 0 2px !important;
  font-weight: 600;
  box-shadow: none !important;
}

/* ─── Banners / heads — framed banner like the dashboard hero */
.doc-head, .eng-head {
  position: relative;
  padding: var(--s-8) var(--s-8) var(--s-7) var(--s-8) !important;
  margin: 0 0 var(--s-7) 0 !important;
  background: linear-gradient(135deg, #121315 0%, #0E0F11 100%) !important;
  border: 1px solid var(--border-1) !important;
  border-left: 3px solid var(--brand-yellow) !important;
  border-radius: var(--r-3) !important;
  overflow: hidden;
  isolation: isolate;
}
.doc-head::before, .eng-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255, 230, 0, 0.10), transparent 60%),
    radial-gradient(40% 60% at 0% 100%, rgba(99, 102, 241, 0.06), transparent 60%);
  pointer-events: none;
}
.doc-head > *, .eng-head > * { position: relative; z-index: 1; }
.doc-head h1, .eng-head h1 {
  font-size: var(--fs-3xl) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.032em !important;
  font-weight: 700 !important;
  margin: 0 0 var(--s-3) 0 !important;
  color: var(--text-1) !important;
}
.doc-head h1 input.h1-input,
.eng-head h1 input.h1-input {
  color: var(--text-1) !important;
  background: transparent !important;
  border: 0; border-bottom: 1px dashed transparent;
}
.doc-head h1 input.h1-input:hover,
.doc-head h1 input.h1-input:focus,
.eng-head h1 input.h1-input:hover,
.eng-head h1 input.h1-input:focus {
  border-bottom-color: var(--brand-yellow);
  background: transparent !important;
  box-shadow: none !important;
}

/* Eyebrow pill: the engagement/doc code chip that sits above the title */
.eng-head-code, .doc-head .eng-head-code {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 230, 0, 0.08) !important;
  color: var(--brand-yellow) !important;
  border: 1px solid rgba(255, 230, 0, 0.25) !important;
  border-radius: var(--r-pill) !important;
  padding: 4px 12px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
  margin: 0 0 var(--s-4) 0 !important;
}

/* Meta-chip row inside banners */
.eng-head-meta {
  display: flex !important; flex-wrap: wrap;
  gap: var(--s-3) !important;
  margin-top: var(--s-4) !important;
}

/* A supporting description paragraph (panel-sub) sometimes sits inside heads */
.doc-head .panel-sub, .eng-head .panel-sub {
  color: var(--text-3) !important;
  font-size: var(--fs-lg);
  line-height: 1.5;
  max-width: 760px;
  margin: 0 !important;
}

/* Banner on smaller screens — tighten padding */
@media (max-width: 860px) {
  .doc-head, .eng-head, .hero, .hero.ambient-hero {
    padding: var(--s-6) var(--s-5) var(--s-5) var(--s-5) !important;
  }
  .doc-head h1, .eng-head h1, .hero-title { font-size: 32px !important; }
}

/* ─── Tables — dark minimal ─────────────────────────────── */
.fb-table, .bm-table, .data-table {
  font-size: var(--fs-md);
  background: transparent;
}
.fb-table th, .bm-table th, .data-table th {
  background: transparent !important;
  border-bottom: 1px solid var(--border-1) !important;
  padding: 12px var(--s-3) !important;
  color: var(--text-3) !important;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fb-table td, .bm-table td, .data-table td {
  padding: 14px var(--s-3) !important;
  border-bottom: 1px solid var(--border-1) !important;
  color: var(--text-1) !important;
}
.fb-table tr:last-child td { border-bottom: 0 !important; }

/* ─── Docs grid ─────────────────────────────────────────── */
.docs-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--s-5);
}
.doc-module-head { padding: var(--s-5) var(--s-6) var(--s-4) !important; border-bottom: 1px solid var(--border-1) !important; }
.doc-kind {
  color: var(--text-3) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
}
.doc-module h2 { color: var(--text-1); font-size: var(--fs-lg); font-weight: 600; }
.doc-sub { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; margin-top: 6px; }
.doc-list > li { padding: 2px var(--s-3); }
.doc-card { padding: 10px var(--s-3); border-radius: var(--r-2); }
.doc-card:hover { background: var(--surface-2) !important; }
.doc-card-id    { color: var(--text-3); }
.doc-card-title { color: var(--text-1); font-weight: 500; }
.doc-empty      { color: var(--text-3); border-top-color: var(--border-1); }

/* ─── Tabs ───────────────────────────────────────────────── */
.tabs, .tab-row { border-bottom-color: var(--border-1) !important; }
.tab {
  font-size: var(--fs-md); padding: 12px var(--s-4);
  color: var(--text-3) !important;
  border-bottom: 2px solid transparent !important;
}
.tab:hover { color: var(--text-1) !important; }
.tab.is-active {
  color: var(--text-1) !important;
  border-bottom-color: var(--brand-yellow) !important;
}

/* ─── Command palette — dark ────────────────────────────── */
.cmdk-panel {
  background: var(--surface-0) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--r-3);
  box-shadow: var(--shadow-xl);
}
.cmdk-backdrop { background: rgba(0, 0, 0, 0.60); backdrop-filter: blur(10px); }
.cmdk-input-row { border-bottom: 1px solid var(--border-1) !important; }
.cmdk-input { font-size: var(--fs-lg) !important; color: var(--text-1) !important; }
.cmdk-input::placeholder { color: var(--text-3); }
.cmdk-icon, .cmdk-chev { color: var(--text-3); }
.cmdk-group { color: var(--text-3); }
.cmdk-item { color: var(--text-1); }
.cmdk-item.is-cursor {
  background: var(--surface-2) !important;
  outline: 1px solid rgba(255, 230, 0, 0.25) !important;
}
.cmdk-item-label { color: var(--text-1); }
.cmdk-item-hint  { color: var(--text-3); }
.cmdk-footer {
  background: var(--surface-0) !important;
  border-top-color: var(--border-1) !important;
  color: var(--text-3) !important;
}
.cmdk-footer kbd, .cmdk-esc {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-1) !important;
  color: var(--text-2) !important;
}
.cmdk-empty { color: var(--text-3); }

/* ─── Toast ──────────────────────────────────────────────── */
.toast {
  background: var(--surface-3) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border-1) !important;
  border-left: 3px solid var(--brand-yellow) !important;
  border-radius: var(--r-2) !important;
  padding: 12px 16px !important;
  box-shadow: var(--shadow-lg);
}
.toast--success { border-left-color: var(--success) !important; }
.toast--error   { border-left-color: var(--danger) !important; }
.toast--warn    { border-left-color: var(--warning) !important; }

/* ─── Activity list ─────────────────────────────────────── */
.activity-list li { padding: 14px 0; border-bottom: 1px solid var(--border-1); }
.activity-summary { color: var(--text-1); font-size: var(--fs-md); }
.activity-meta    { color: var(--text-3); font-size: 12.5px; margin-top: 3px; }
.activity-meta a  { color: var(--brand-yellow); text-decoration: none; }
.activity-meta a:hover { text-decoration: underline; }

/* ─── Login page — dark centered ─────────────────────────── */
.auth-wrap { background: var(--surface-1); min-height: 100vh; }
.auth-card {
  background: var(--surface-0) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--r-3);
  box-shadow: var(--shadow-xl);
  padding: var(--s-8) !important;
}

/* ─── Sections + final polish ───────────────────────────── */
section + section { margin-top: var(--s-7); }

.t-dim { color: var(--text-3) !important; }

/* ─── Scrollbars — dark native ──────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 5px; border: 2px solid var(--surface-1); }
*::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

/* ─── Selection ─────────────────────────────────────────── */
::selection { background: rgba(255, 230, 0, 0.35); color: var(--text-1); }

/* ─── Focus ring — yellow on dark (better than blue) ─────── */
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid rgba(255, 230, 0, 0.55);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ─── RAG tiles — dark-tuned ────────────────────────────── */
.rag-tile {
  background: var(--surface-0) !important;
  border: 1px solid var(--border-1) !important;
  padding: var(--s-4) var(--s-5) !important;
}
.rag-tile.rag-green  { box-shadow: inset 0 0 0 1px rgba(48, 214, 122, 0.22), var(--shadow-xs); }
.rag-tile.rag-amber  { box-shadow: inset 0 0 0 1px rgba(245, 176, 65, 0.30), var(--shadow-xs); }
.rag-tile.rag-red    { box-shadow: inset 0 0 0 1px rgba(255, 97, 97, 0.30),  var(--shadow-xs); }
.rag-tile .rag-picker { color: var(--text-1) !important; background: transparent !important; border: 0 !important; }
.rag-tile.rag-green  .rag-picker { color: #7AF0B3 !important; }
.rag-tile.rag-amber  .rag-picker { color: #FFD695 !important; }
.rag-tile.rag-red    .rag-picker { color: #FF9B9B !important; }

/* ─── CTC ───────────────────────────────────────────────── */
.ctc-tile { padding: var(--s-6) var(--s-6) !important; }
.ctc-label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.ctc-value { color: var(--text-1); font-size: 36px; font-weight: 700; letter-spacing: -0.028em; font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.ctc-sub   { color: var(--text-3); }

/* ─── Budget metric ─────────────────────────────────────── */
.budget-metric { padding: var(--s-6) var(--s-6) !important; }
.budget-metric-label { color: var(--text-3); letter-spacing: 0.08em; font-weight: 600; }
.budget-metric-value { color: var(--text-1); font-size: 36px; font-weight: 700; letter-spacing: -0.028em; margin-top: 6px; }

/* ─── RAID ──────────────────────────────────────────────── */
.raid-card {
  background: var(--surface-0) !important;
  border: 1px solid var(--border-1) !important;
}
.raid-card header .raid-title { color: var(--text-1); }
.raid-desc { color: var(--text-3); }
.raid-sev-chip {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
}
.raid-card.raid-sev-critical { background: rgba(255, 97, 97, 0.06) !important; }

/* ─── Methodology cards ─────────────────────────────────── */
.meth-card { padding: var(--s-5) var(--s-6) !important; }
.meth-card h3 { color: var(--text-1); }
.meth-card p  { color: var(--text-3); }
.meth-tags    { background: var(--surface-2); color: var(--text-3); }
.meth-card:hover { background: var(--surface-0) !important; }

/* ─── Form-row / auth polish ────────────────────────────── */
.form-row label { color: var(--text-2); font-weight: 500; }

/* ─── Safety: no double gradient on primary btn from theme */
.btn-primary::before { display: none !important; }

/* ─── Print ─────────────────────────────────────────────── */
@media print {
  .app-sidebar, .topbar, #lattice-toast-host, #lattice-cmdk { display: none !important; }
  .page { padding: 0; }
  html, body, .app-body { background: #fff !important; color: #000 !important; }
}

/* ─── Motion restraint respected (already in animations.css) */
@media (prefers-reduced-motion: reduce) {
  .ambient-hero::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Agent Floor
   ═══════════════════════════════════════════════════════════════ */
.floor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 1100px) {
  .floor-layout { grid-template-columns: 1fr; }
  .floor-feed .panel { position: static; }
}

.floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}

.agent-tile {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%), var(--surface-0) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--r-3) !important;
  padding: var(--s-5) !important;
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: transform 220ms var(--ease-standard), border-color 220ms, box-shadow 260ms;
}
.agent-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-2) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 230, 0, 0.08);
}
.agent-tile.just-hired {
  animation: agent-hire-in 400ms var(--ease-bounce) both;
}
@keyframes agent-hire-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.agent-tile-head {
  display: flex; align-items: center; gap: var(--s-3);
}
.agent-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg,
    hsl(var(--hue), 88%, 58%) 0%,
    hsl(calc(var(--hue) + 30), 70%, 42%) 100%);
  box-shadow: 0 4px 14px hsla(var(--hue), 80%, 50%, 0.25);
  flex-shrink: 0;
}
.agent-avatar > span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface-0);
  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  font-weight: 700; font-size: 17px; color: var(--text-1);
  letter-spacing: -0.02em;
}
.agent-id { flex: 1 1 auto; min-width: 0; }
.agent-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-handle {
  font-size: 12px;
  color: var(--text-3);
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  letter-spacing: 0.02em;
}

.agent-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-4);
  position: relative;
  flex-shrink: 0;
  transition: background 220ms ease;
}
.agent-status-dot[data-status="active"] {
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(48, 214, 122, 0.45);
  animation: agent-pulse 1800ms ease-in-out infinite;
}
@keyframes agent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(48, 214, 122, 0.45); }
  50%      { box-shadow: 0 0 0 8px rgba(48, 214, 122, 0.00); }
}

.agent-body { display: flex; flex-direction: column; gap: 8px; }
.agent-role {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.agent-tier { display: flex; gap: 6px; flex-wrap: wrap; }
.tier-pill {
  display: inline-flex;
  font-size: 10.5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tier-pill.tier-engagement-lead { background: rgba(255, 230, 0, 0.12); color: #FFE600; }
.tier-pill.tier-manager         { background: rgba(139, 142, 255, 0.14); color: #B3B5FF; }
.tier-pill.tier-senior          { background: rgba(48, 214, 122, 0.12); color: #7AF0B3; }
.tier-pill.tier-staff           { background: var(--surface-3); color: var(--text-3); }
.tier-pill.tier-custom          { background: rgba(245, 176, 65, 0.14); color: #FFD695; }

.agent-specialty {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.4;
  padding-top: 4px;
  border-top: 1px solid var(--border-1);
}
.agent-metrics {
  display: flex; gap: var(--s-4);
  font-size: 11.5px;
  color: var(--text-3);
  padding: 6px 0;
  border-top: 1px solid var(--border-1);
}
.agent-metrics strong { color: var(--text-1); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 4px; }

.agent-current {
  padding-top: 8px;
  border-top: 1px solid var(--border-1);
  font-size: 12px;
  line-height: 1.4;
}
.agent-current-eng { margin-bottom: 3px; font-size: 11px; }
.agent-current-eng a {
  color: var(--brand-yellow);
  text-decoration: none;
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  letter-spacing: 0.04em;
}
.agent-current-excerpt {
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.agent-tile-foot {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-1);
  display: flex; justify-content: flex-end;
}

/* ─── Floor feed ─────────────────────────────────────────── */
.floor-feed .panel {
  position: sticky;
  top: calc(var(--topbar-h, 56px) + var(--s-4));
  max-height: calc(100vh - var(--topbar-h, 56px) - var(--s-8));
  overflow: hidden;
  display: flex; flex-direction: column;
}
.floor-feed-body {
  overflow-y: auto;
  padding: 0 !important;
}
.event-stream {
  list-style: none; margin: 0; padding: 0;
}
.event-stream > li { border-bottom: 1px solid var(--border-1); }
.event-stream > li.t-dim { padding: var(--s-4); }
.event {
  position: relative;
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  transition: background 180ms ease;
}
.event:hover { background: rgba(255, 255, 255, 0.02); }
.event-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--info);
  margin-top: 7px;
  flex-shrink: 0;
}
.event-kind-team-dispatch .event-dot { background: #8B8EFF; }
.event-kind-team-synth    .event-dot { background: var(--success); }
.event-kind-consult       .event-dot { background: var(--brand-yellow); }
.event-kind-agent-hire    .event-dot { background: #FFD695; }
.event-kind-agent-fire    .event-dot { background: #FF9B9B; }
.event-body { flex: 1 1 auto; min-width: 0; }
.event-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.event-head strong { color: var(--text-1); font-weight: 600; }
.event-kind {
  background: var(--surface-3);
  color: var(--text-3);
  border-radius: 4px;
  padding: 1px 7px;
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.event-eng {
  color: var(--brand-yellow);
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  font-size: 11px;
  text-decoration: none;
}
.event-summary {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.event-time { font-size: 11px; margin-top: 3px; }

.event.just-in {
  animation: event-in 360ms var(--ease-standard) both;
  background: rgba(255, 230, 0, 0.04);
}
@keyframes event-in {
  from { opacity: 0; transform: translateX(-6px); background: rgba(255, 230, 0, 0.14); }
  to   { opacity: 1; transform: translateX(0);    background: transparent; }
}

/* ─── Hire modal ─────────────────────────────────────────── */
.hire-panel {
  width: min(560px, 94vw) !important;
  max-height: 90vh;
}
.hire-form {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.hire-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  font-weight: 500;
}
.hire-form label > span:first-child { color: var(--text-1); }
.hire-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-3); align-items: flex-start;
}
.hire-row label { gap: 8px; }
.hire-hue-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg,
    hsl(var(--hue), 88%, 58%),
    hsl(calc(var(--hue) + 30), 70%, 42%));
  align-self: center;
  box-shadow: 0 4px 12px hsla(var(--hue), 80%, 50%, 0.3);
}
.hire-hue-preview > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface-0);
  font-weight: 700; font-size: 13px;
  color: var(--text-1);
}
.hire-actions {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-1);
}
.hire-actions > span:first-child { flex: 1 1 auto; font-size: var(--fs-sm); }

@media (prefers-reduced-motion: reduce) {
  .agent-tile.just-hired, .event.just-in { animation: none !important; }
  .agent-status-dot[data-status="active"] { animation: none !important; }
}

/* ─── Cross-agent consult modal ────────────────────────── */
.consult-panel { width: min(640px, 94vw) !important; max-height: 88vh; }
.consult-form {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.consult-pair {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--s-3); align-items: end;
}
.consult-pair label { display: flex; flex-direction: column; gap: 6px; }
.consult-pair label > span:first-child { font-size: var(--fs-sm); color: var(--text-1); font-weight: 500; }
.consult-arrow {
  width: 22px; height: 22px;
  color: var(--brand-yellow);
  margin-bottom: 10px;
}
.consult-actions {
  display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-1);
}
.consult-actions > span:first-child { flex: 1 1 auto; font-size: var(--fs-sm); }

.consult-result {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--brand-yellow);
  border-radius: var(--r-2);
  padding: var(--s-4) var(--s-5);
  animation: fadeInUp 260ms var(--ease-bounce);
}
.consult-result-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.consult-result-flow {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-1);
}
.consult-result-flow svg { width: 16px; height: 16px; color: var(--brand-yellow); }
.consult-result-question {
  font-style: italic; color: var(--text-3);
  padding: 10px 14px;
  background: var(--surface-3);
  border-radius: var(--r-1);
  margin-bottom: var(--s-3);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.consult-result-reply {
  color: var(--text-1);
  font-size: var(--fs-md);
  line-height: 1.55;
  max-height: 40vh;
  overflow-y: auto;
}
.consult-result-reply div[style] { font-family: var(--font-sans); }

/* Agent consult link in footer: make it look like an accent action */
.agent-tile-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.agent-tile-foot .agent-consult {
  color: var(--brand-yellow);
  font-weight: 600;
}
.agent-tile-foot .agent-consult:hover {
  background: rgba(255, 230, 0, 0.10);
  color: var(--brand-yellow);
}

/* ═══════════════════════════════════════════════════════════════
   Firm chat v2 — Claude/ChatGPT-style layout:
   viewport-bound shell · left messages + sticky composer ·
   right agent-profile panel
   ═══════════════════════════════════════════════════════════════ */
.chat-shell {
  height: calc(100vh - 56px);
  height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
  margin: calc(-1 * var(--s-8)) calc(-1 * var(--s-8)) 0;
  background: var(--surface-1);
}

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-7) var(--s-4);
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-1);
  flex-shrink: 0;
}
.chat-head-left h1 {
  margin: 4px 0 0 0;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}
.chat-head-hints {
  display: flex; gap: var(--s-4); align-items: center;
  color: var(--text-3);
  font-size: 12px;
}
.chat-head-hints kbd {
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text-2);
  margin-right: 4px;
}

.chat-main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 340px;
  overflow: hidden;
}

.chat-left {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.firm-stream {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  list-style: none; margin: 0;
  padding: var(--s-5) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-4);
  scrollbar-width: thin;
  scrollbar-color: var(--border-1) transparent;
}
.firm-stream::-webkit-scrollbar { width: 8px; }
.firm-stream::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 4px; }

.firm-compose {
  flex-shrink: 0;
  padding: var(--s-3) var(--s-7) var(--s-5);
  border-top: 1px solid var(--border-1);
  background: var(--surface-1);
}
.firm-compose-row {
  display: flex; align-items: flex-end; gap: var(--s-3);
  background: var(--surface-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.firm-compose-row:focus-within {
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.18);
}
.firm-compose-row textarea {
  flex: 1 1 auto;
  border: 0 !important;
  background: transparent !important;
  padding: 8px 0 !important;
  font-size: var(--fs-md) !important;
  color: var(--text-1) !important;
  resize: none !important;
  min-height: 36px; max-height: 180px;
  box-shadow: none !important;
  outline: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
}
.firm-compose-row textarea::placeholder { color: var(--text-3); }
.firm-compose-row #firm-send {
  padding: 8px 14px !important;
  height: 36px;
  border-radius: var(--r-2) !important;
  flex-shrink: 0;
}
.firm-compose-foot {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-3);
}
.firm-compose-foot kbd {
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0 5px;
  color: var(--text-2);
  margin-right: 3px;
}

.chat-roster {
  border-left: 1px solid var(--border-1);
  background: var(--surface-0);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.chat-roster-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5) var(--s-3);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
}
.chat-roster-count {
  background: var(--surface-3);
  color: var(--text-3);
  padding: 2px 8px; border-radius: var(--r-pill);
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  font-size: 10.5px; letter-spacing: 0;
}
.chat-roster-filter {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
}
.chat-roster-filter input {
  width: 100%;
  padding: 8px 12px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border-1) !important;
  border-radius: var(--r-pill) !important;
  font-size: 13px !important;
}
.chat-roster-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: var(--s-3) var(--s-3) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  scrollbar-width: thin;
  scrollbar-color: var(--border-1) transparent;
}
.chat-roster-list::-webkit-scrollbar { width: 6px; }
.chat-roster-list::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 3px; }

.roster-card {
  position: relative;
  display: flex; gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: var(--r-2);
  border: 1px solid transparent;
  transition: background 160ms, border-color 160ms;
}
.roster-card:hover {
  background: var(--surface-2);
  border-color: var(--border-1);
}
.roster-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg,
    hsl(var(--hue), 88%, 58%),
    hsl(calc(var(--hue) + 30), 65%, 40%));
  box-shadow: 0 4px 12px hsla(var(--hue), 80%, 50%, 0.2);
}
.roster-avatar > span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface-0);
  color: var(--text-1);
  font-weight: 700; font-size: 14px;
}
.roster-body { flex: 1 1 auto; min-width: 0; }
.roster-name {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-1);
  line-height: 1.2;
}
.roster-handle {
  font-size: 11px;
  color: var(--text-3);
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  margin-top: 1px;
}
.roster-role {
  font-size: 11.5px;
  color: var(--text-2);
  margin-top: 4px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.roster-specialty {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  padding-top: 4px;
  border-top: 1px solid var(--border-1);
}
.roster-actions {
  display: flex; gap: 2px;
  margin-top: 6px;
}
.roster-actions .link-btn {
  font-size: 11px; padding: 3px 8px;
  border-radius: var(--r-pill);
}
.roster-actions .roster-mention {
  color: var(--brand-yellow);
}
.roster-badge {
  position: absolute; top: 6px; right: 6px;
  background: rgba(245, 176, 65, 0.16);
  color: #FFD695;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-pill);
}

@media (max-width: 1100px) {
  .chat-main { grid-template-columns: 1fr 300px; }
}
@media (max-width: 900px) {
  .chat-main { grid-template-columns: 1fr; }
  .chat-roster { display: none; }
}
.firm-stream {
  list-style: none; margin: 0; padding: var(--s-5) var(--s-6);
  flex: 1 1 auto; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-4);
}
.firm-empty {
  padding: var(--s-6);
  color: var(--text-3);
  text-align: center;
  background: var(--surface-1);
  border-radius: var(--r-2);
}

.firm-msg {
  display: flex; gap: var(--s-3);
  align-items: flex-start;
  max-width: 100%;
}
.firm-msg.just-in { animation: fadeInUp 280ms var(--ease-standard); }

.firm-msg-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(220, 55%, 45%), hsl(220, 35%, 30%));
  padding: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.firm-msg-avatar span {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface-0);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--text-1);
}
.firm-msg--user .firm-msg-avatar {
  background: linear-gradient(135deg, var(--brand-yellow), var(--brand-yellow-600));
}
.firm-msg--user .firm-msg-avatar span { color: var(--text-inverse); }
.firm-msg--agent[class*="data-handle"] .firm-msg-avatar,
.firm-msg--agent .firm-msg-avatar {
  /* agent avatars get a unique hue based on handle — simple modular choice */
  background: linear-gradient(135deg, hsl(280, 65%, 55%), hsl(220, 60%, 40%));
}
.firm-msg-body {
  flex: 1 1 auto; min-width: 0;
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: 4px var(--r-2) var(--r-2) var(--r-2);
  border: 1px solid var(--border-1);
}
.firm-msg--user .firm-msg-body {
  background: rgba(255, 230, 0, 0.05);
  border-color: rgba(255, 230, 0, 0.2);
  border-radius: var(--r-2) 4px var(--r-2) var(--r-2);
}
.firm-msg--agent.firm-mode-direct .firm-msg-body { border-left: 3px solid var(--brand-yellow); }
.firm-msg--agent.firm-mode-pulse .firm-msg-body {
  border-left: 3px solid #8B8EFF;
  background: rgba(139, 142, 255, 0.05);
  position: relative;
}
.firm-msg--agent.firm-mode-pulse .firm-msg-body::before {
  content: "✨ PULSE";
  position: absolute;
  top: -8px; left: 12px;
  background: #8B8EFF;
  color: #0A0A0B;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 1px 8px; border-radius: var(--r-pill);
}
.firm-msg--agent.firm-mode-hire_proposal .firm-msg-body {
  border-left: 3px solid #FFD695;
  background: rgba(245, 176, 65, 0.05);
}
.firm-msg--agent.firm-mode-hire_confirmed .firm-msg-body {
  border-left: 3px solid var(--success);
  background: rgba(48, 214, 122, 0.05);
}
.firm-msg-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; margin-bottom: 4px;
  flex-wrap: wrap;
}
.firm-msg-head strong { color: var(--text-1); font-weight: 600; font-size: var(--fs-sm); }
.firm-msg-role { color: var(--text-3); font-size: 11px; font-weight: 500; }
.firm-msg-time { font-size: 11px; font-family: -apple-system, 'SF Mono', Consolas, monospace; }
.firm-msg-text {
  color: var(--text-1);
  font-size: var(--fs-md);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Compose */
.firm-compose {
  border-top: 1px solid var(--border-1);
  background: var(--surface-1);
  padding: var(--s-3) var(--s-5) var(--s-4);
}
.firm-compose-hint {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 6px;
  display: flex; gap: var(--s-3); flex-wrap: wrap;
}
.firm-compose-hint kbd {
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text-2);
}
.firm-compose-row {
  display: flex; gap: var(--s-3); align-items: flex-end;
}
.firm-compose-row textarea {
  flex: 1 1 auto; min-height: 44px;
  border-radius: var(--r-2) !important;
  background: var(--surface-0) !important;
  resize: vertical;
}
.firm-compose-row button { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   Org chart / Team page
   ═══════════════════════════════════════════════════════════════ */
.org-chart {
  display: flex; flex-direction: column; gap: var(--s-8);
  padding: var(--s-4) 0;
  position: relative;
}

.org-tier {
  display: flex; flex-direction: column; gap: var(--s-4);
  position: relative;
}

.org-tier-label {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.org-tier-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-1), transparent);
}
.org-tier-name { color: var(--text-2); letter-spacing: 0.14em; }
.org-tier-count {
  background: var(--surface-3);
  color: var(--text-3);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  letter-spacing: 0;
  font-size: 10.5px;
}

/* Engagement Lead tier gets a yellow-tinted label */
.org-tier--engagement-lead .org-tier-name { color: var(--brand-yellow); letter-spacing: 0.14em; }
.org-tier--engagement-lead .org-tier-line {
  background: linear-gradient(90deg, transparent, rgba(255, 230, 0, 0.35), transparent);
}

/* Rows: top tiers center, lower tiers fill */
.org-row {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: center;
}
.org-tier--senior .org-row,
.org-tier--staff .org-row {
  justify-content: flex-start;
}

.org-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  width: 220px;
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  text-decoration: none; color: inherit;
  text-align: center;
  transition: transform 220ms var(--ease-standard),
              border-color 220ms, box-shadow 260ms;
}
.org-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45),
              0 0 0 1px hsla(var(--hue), 80%, 55%, 0.18);
}
.org-card::before {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg,
    hsl(var(--hue), 85%, 55%),
    hsl(calc(var(--hue) + 30), 65%, 40%));
  border-radius: 0 0 var(--r-3) var(--r-3);
  opacity: 0;
  transition: opacity 220ms ease;
}
.org-card:hover::before { opacity: 1; }

.org-card-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg,
    hsl(var(--hue), 88%, 58%),
    hsl(calc(var(--hue) + 30), 65%, 40%));
  box-shadow: 0 6px 18px hsla(var(--hue), 80%, 50%, 0.25);
}
.org-card-avatar > span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface-0);
  font-family: -apple-system, 'SF Pro Display', 'Inter', sans-serif;
  font-weight: 700; font-size: 20px; color: var(--text-1);
  letter-spacing: -0.02em;
}

.org-card-body { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.org-card-name {
  font-size: var(--fs-md); font-weight: 600;
  color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-card-handle {
  font-size: 11.5px;
  color: var(--text-3);
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  letter-spacing: 0.02em;
}
.org-card-role {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.35;
  margin-top: 2px;
}
.org-card-specialty {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border-1);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.org-card-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(245, 176, 65, 0.18);
  color: #FFD695;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}

/* Engagement Lead row: single card, wider, more emphasis */
.org-tier--engagement-lead .org-card {
  width: 280px; padding: var(--s-6) var(--s-5);
}
.org-tier--engagement-lead .org-card-avatar { width: 64px; height: 64px; }
.org-tier--engagement-lead .org-card-avatar > span { font-size: 22px; }

/* Manager row: slightly larger too */
.org-tier--manager .org-card { width: 240px; }

@media (max-width: 860px) {
  .org-card { width: calc(50% - var(--s-4)); }
  .org-tier--engagement-lead .org-card,
  .org-tier--manager .org-card { width: 100%; max-width: 360px; }
}
@media (max-width: 520px) {
  .org-card { width: 100%; max-width: 360px; }
}

/* ═══════════════════════════════════════════════════════════════
   Agent profile page
   ═══════════════════════════════════════════════════════════════ */
.profile-head-banner .profile-head-row {
  display: flex; align-items: flex-start; gap: var(--s-5);
}
.profile-avatar-lg { width: 80px !important; height: 80px !important; flex-shrink: 0; }
.profile-avatar-lg > span { font-size: 32px !important; }
.profile-handle {
  color: var(--text-3);
  font-size: 13px;
  font-family: -apple-system, 'SF Mono', Consolas, monospace;
  letter-spacing: 0.04em;
  margin: 4px 0;
}
.profile-role-line {
  color: var(--text-2);
  font-size: var(--fs-md);
  font-weight: 500;
  margin-bottom: var(--s-2);
}

.profile-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 1000px) {
  .profile-split { grid-template-columns: 1fr; }
}

.profile-dossier .dossier-text,
.dossier-text {
  white-space: pre-wrap;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}

.compact-list { list-style: none; padding: 0; margin: 0; }
.compact-list > li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-1);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  font-size: var(--fs-sm);
}
.compact-list > li:last-child { border-bottom: 0; }
.compact-list > li a { color: var(--text-1); text-decoration: none; }
.compact-list > li a:hover { color: var(--brand-yellow); }
.compact-list .eng-code {
  background: var(--surface-3); color: var(--brand-yellow);
  padding: 2px 7px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  margin-right: var(--s-2);
}
.compact-list .compact-name { color: var(--text-2); }
.compact-list.tips > li {
  padding: 8px 0;
  border-bottom: 0;
  display: block;
  color: var(--text-2);
}
.compact-list.tips code {
  background: var(--surface-3); color: var(--brand-yellow);
  padding: 1px 6px; border-radius: 4px;
  font-size: 12.5px; font-family: -apple-system, 'SF Mono', Consolas, monospace;
}

/* ─── Hire proposal card ─────────────────────────────────────── */
.proposal-card {
  --p-hue: 45;
  margin-top: var(--s-3);
  background: var(--surface-0);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--brand-yellow);
  border-radius: var(--r-2);
  padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
  transition: opacity 0.2s, transform 0.2s;
}
.proposal-card.is-hired {
  border-left-color: #4ade80;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.04), transparent 40%), var(--surface-0);
}
.proposal-card.is-dismissed {
  opacity: 0; transform: translateY(-4px);
}
.proposal-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-yellow);
}

.proposal-head {
  display: flex; align-items: center; gap: var(--s-3);
}
.proposal-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg,
    hsl(var(--p-hue, 45), 85%, 55%),
    hsl(calc(var(--p-hue, 45) + 30), 65%, 40%));
  flex-shrink: 0;
}
.proposal-avatar > span {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface-0);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 20px; color: var(--text-1);
}
.proposal-id { flex: 1 1 auto; min-width: 0; }
.proposal-name {
  font-weight: 700; font-size: 17px; color: var(--text-1);
  line-height: 1.2;
}
.proposal-handle {
  color: var(--text-3); font-size: 12.5px;
  font-family: 'JetBrains Mono', -apple-system, 'SF Mono', Consolas, monospace;
  margin-top: 2px;
}
.proposal-tier { flex-shrink: 0; }

.proposal-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
}
@media (max-width: 720px) {
  .proposal-grid { grid-template-columns: 1fr; }
}
.proposal-field { min-width: 0; }
.proposal-field-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.proposal-role {
  color: var(--text-1); font-size: 14px; font-weight: 500;
}
.proposal-specialty {
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}

.proposal-prompt summary {
  color: var(--text-3); font-size: 11px;
  cursor: pointer; padding: 4px 0;
  font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  list-style: none;
}
.proposal-prompt summary::before {
  content: "▸"; display: inline-block; margin-right: 6px;
  transition: transform 0.15s;
}
.proposal-prompt[open] summary::before { transform: rotate(90deg); }
.proposal-prompt summary::-webkit-details-marker { display: none; }
.proposal-prompt p {
  color: var(--text-2); font-size: 13px; line-height: 1.55;
  margin: 8px 0 0 0;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--r-1);
  max-height: 260px; overflow-y: auto;
  white-space: pre-wrap;
  font-family: inherit;
}

/* Actions row */
.proposal-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-1);
  margin-top: var(--s-2);
}
.proposal-actions .btn {
  padding: 6px 12px; font-size: 12.5px;
}
.proposal-actions .proposal-status {
  flex: 1 1 auto; font-size: 12px; min-width: 160px;
}
.proposal-actions .proposal-approve {
  margin-left: auto;
  font-weight: 700;
}
.proposal-card.is-hired .proposal-approve {
  background: rgba(74, 222, 128, 0.18);
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.35);
  cursor: default;
}
.proposal-actions .proposal-dismiss:hover { color: #ff8a8a; }

/* Inline edit form */
.proposal-edit-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--s-3);
  background: var(--surface-2);
  border-radius: var(--r-1);
  border: 1px solid var(--border-2);
}
.proposal-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 720px) {
  .proposal-form-row { grid-template-columns: 1fr; }
}
.proposal-form-field { display: flex; flex-direction: column; gap: 4px; }
.proposal-form-field > span {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3);
}
.proposal-form-field > span > small { font-weight: 500; text-transform: none; letter-spacing: 0; }
.proposal-form-field input,
.proposal-form-field select,
.proposal-form-field textarea {
  width: 100%;
  background: var(--surface-0);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  padding: 8px 10px;
  font: inherit; font-size: 13.5px;
  resize: vertical;
}
.proposal-form-field input:focus,
.proposal-form-field select:focus,
.proposal-form-field textarea:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 2px rgba(255, 230, 0, 0.15);
}
.proposal-form-field input:invalid:not(:placeholder-shown) {
  border-color: rgba(255, 138, 138, 0.55);
}
.proposal-form-hint {
  color: var(--text-3); font-size: 11px; margin-top: 2px;
}
.proposal-hue-row {
  display: flex; align-items: center; gap: 10px;
}
.proposal-hue-row input[type="range"] {
  flex: 1 1 auto;
  padding: 0;
  accent-color: var(--brand-yellow);
  border: 0;
  background: transparent;
  box-shadow: none;
}
.proposal-hue-row input[type="range"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 230, 0, 0.25);
  border-radius: var(--r-pill);
}
.proposal-hue-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--border-2);
  flex-shrink: 0;
}
.proposal-form-error {
  padding: 8px 10px;
  background: rgba(255, 138, 138, 0.1);
  border: 1px solid rgba(255, 138, 138, 0.35);
  border-radius: var(--r-1);
  color: #ffb3b3; font-size: 12.5px;
}
.proposal-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.proposal-form-actions .btn { padding: 6px 14px; font-size: 12.5px; }

/* ─── Firm chat: DM, edit/delete, soft-delete, unread ─────────── */
.roster-actions .roster-dm {
  color: #9ecbff;
}
.roster-actions .roster-dm:hover {
  background: rgba(158, 203, 255, 0.12);
}
.firm-msg { position: relative; }
.firm-msg-body { position: relative; }
.firm-msg-actions {
  position: absolute;
  top: -10px; right: 8px;
  display: none;
  gap: 2px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-pill);
  padding: 2px 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index: 2;
}
.firm-msg:hover .firm-msg-actions,
.firm-msg-actions:focus-within { display: inline-flex; }
.firm-msg-actions .link-btn {
  font-size: 12px; padding: 2px 6px;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.firm-msg-actions .link-btn:hover { background: var(--surface-2); color: var(--text-1); }
.firm-msg-actions .firm-msg-delete:hover { color: #ff8a8a; }
.firm-msg-text--deleted {
  font-style: italic;
  color: var(--text-3);
  opacity: 0.7;
}
.firm-msg-edited {
  margin-left: 4px; font-size: 11px;
}
.firm-msg-edit-form {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.firm-msg-edit-input {
  width: 100%;
  min-height: 60px;
  background: var(--surface-0);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  padding: 8px 10px;
  font: inherit; font-size: 14px;
  resize: vertical;
}
.firm-msg-edit-input:focus {
  outline: none; border-color: var(--brand-yellow);
  box-shadow: 0 0 0 2px rgba(255, 230, 0, 0.15);
}
.firm-msg-edit-actions {
  display: flex; gap: 6px; justify-content: flex-end;
}
.firm-msg-edit-actions .btn { padding: 4px 10px; font-size: 12px; }

/* ─── DM page: header + full-width stream ──────────────────────── */
.chat-main--dm { grid-template-columns: 1fr; }
.chat-main--dm .chat-roster { display: none; }
.dm-head-row {
  display: flex; align-items: center; gap: var(--s-3);
}
.dm-head-row .roster-avatar {
  width: 44px; height: 44px;
}
.dm-head-row .roster-avatar span { font-size: 16px; }

/* ─── Sidebar Firm chat unread badge ──────────────────────────── */
.nav-item .nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px;
  padding: 0 6px;
  background: var(--brand-yellow);
  color: var(--text-inverse);
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.nav-item .nav-badge:empty,
.nav-item .nav-badge[data-count="0"] { display: none; }

/* ─── Firm chat: attachments ─────────────────────────────────── */
.firm-msg-attachment {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--surface-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  text-decoration: none;
  color: var(--text-1);
  max-width: 100%;
  transition: background 0.12s, border-color 0.12s;
}
.firm-msg-attachment:hover {
  background: var(--surface-1);
  border-color: var(--brand-yellow);
}
.firm-msg-attachment-icon { font-size: 16px; }
.firm-msg-attachment-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.firm-msg-attachment-name {
  font-weight: 500; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 320px;
}
.firm-msg-attachment-size { font-size: 11px; }

.firm-attach-btn {
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px;
  font-size: 18px;
  padding: 0 10px;
  line-height: 1;
}
.firm-attach-preview {
  padding: 6px 8px 0 8px;
}
.firm-attach-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  background: rgba(255, 230, 0, 0.08);
  border: 1px solid rgba(255, 230, 0, 0.25);
  border-radius: var(--r-pill);
  font-size: 12px;
}
.firm-attach-chip .firm-attach-clear {
  padding: 0 4px; color: var(--text-3);
  background: transparent; border: 0; cursor: pointer;
}
.firm-attach-chip .firm-attach-clear:hover { color: #ff8a8a; }

/* ─── Roster presence dot ───────────────────────────────────── */
.roster-avatar { position: relative; }
.roster-presence {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--surface-1);
  transition: background 0.15s;
}
.roster-presence.is-active {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.45);
}

/* ─── Lifecycle waves H–Q shared components ───────────────── */

/* Data tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
.data-table thead th {
  text-align: left;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--text-2);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-1);
}
.data-table thead th.num,
.data-table tbody td.num { text-align: right; }
.data-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-1);
}
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody td input,
.data-table tbody td select {
  width: 100%;
  background: var(--surface-0);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  font-size: 13px;
}

/* Pills */
.pill {
  display: inline-block;
  padding: 1px 8px;
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pill-success, .pill-paid, .pill-won, .pill-approved, .pill-in_use { background: rgba(74, 222, 128, 0.18); color: #86efac; }
.pill-fail, .pill-lost, .pill-void, .pill-retired       { background: rgba(255, 107, 107, 0.18); color: #ff9999; }
.pill-draft, .pill-scheduled, .pill-in_dev, .pill-lead   { background: rgba(158, 203, 255, 0.18); color: #9ecbff; }
.pill-sent, .pill-qualifying, .pill-in_progress, .pill-proposing { background: rgba(245, 176, 65, 0.18); color: #FFD695; }
.pill-edgar { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; }
.pill-manual, .pill-news, .pill-web { background: rgba(156, 163, 175, 0.18); color: var(--text-2); }
.pill-Basel, .pill-CECL, .pill-IFRS9, .pill-IFRS17, .pill-SR_11-7,
.pill-CCAR, .pill-DFAST, .pill-AML {
  background: rgba(255, 230, 0, 0.14);
  color: var(--brand-yellow);
}

/* Pursuit kanban */
.pursuit-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 1200px) { .pursuit-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .pursuit-board { grid-template-columns: 1fr; } }
.pursuit-col {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  padding: 10px;
  min-height: 200px;
  transition: background 0.12s, border-color 0.12s;
}
.pursuit-col.is-drop-target { background: var(--surface-2); border-color: var(--brand-yellow); }
.pursuit-col-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3);
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--border-1);
}
.pursuit-col-count {
  background: var(--surface-2); padding: 1px 8px;
  border-radius: 999px; color: var(--text-1); font-size: 11px;
}
.pursuit-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pursuit-card {
  background: var(--surface-0);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  padding: 10px;
  cursor: grab;
  transition: box-shadow 0.12s, transform 0.12s;
}
.pursuit-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.pursuit-card.is-dragging { opacity: 0.5; cursor: grabbing; }
.pursuit-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2px;
}
.pursuit-score {
  background: var(--brand-yellow);
  color: var(--text-inverse);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
}
.pursuit-contact { font-size: 12px; }
.pursuit-value { font-size: 13px; font-weight: 700; margin-top: 4px; }
.pursuit-owner { font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; }
.pursuit-card-actions {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--border-1);
  display: flex; gap: 4px; flex-wrap: wrap;
}

/* ═══ Modal dialog ═══════════════════════════════════════════
   Critical: chat.css has an older `.modal { position: fixed; display: grid; }`
   rule designed for <div class="modal" hidden> overlays. When applied to a
   HTML <dialog class="modal"> element it forces the dialog to always render.
   The `dialog.modal` selectors below are strictly more specific and restore
   the native dialog behaviour. */
dialog.modal {
  border: 0;
  background: transparent;
  padding: 0;
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: 92vh;
  max-width: 92vw;
  width: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  border-radius: var(--r-2);
}
dialog.modal:not([open]) {
  display: none !important;
}
dialog.modal[open] {
  display: block;
  place-items: initial;
}
dialog.modal::backdrop {
  background: rgba(10, 10, 12, 0.65);
  backdrop-filter: blur(3px);
  animation: modal-fade-in 180ms ease-out;
}
dialog.modal[open] { animation: modal-scale-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.modal[open],
  dialog.modal::backdrop { animation: none; }
}

/* ─── Chat typing indicator ────────────────────────────────── */
.firm-msg--typing .firm-msg-avatar {
  animation: typing-pulse 1.4s ease-in-out infinite;
}
.firm-msg--typing .firm-msg-body {
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--border-2);
}
.firm-typing-dots {
  display: inline-flex; gap: 4px;
  padding: 4px 2px;
}
.firm-typing-dots span {
  width: 6px; height: 6px;
  background: var(--text-3);
  border-radius: 50%;
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.firm-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.firm-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%          { transform: translateY(-4px); opacity: 1; }
}
@keyframes typing-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.firm-msg.is-optimistic { opacity: 0.85; }
.firm-msg.is-optimistic .firm-msg-time { font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .firm-msg--typing .firm-msg-avatar,
  .firm-typing-dots span { animation: none; }
}

/* ─── Link buttons — touch-target min + cursor ────────────── */
.link-btn {
  min-height: 28px;
  padding: 5px 10px;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.link-btn:focus-visible {
  outline: 2px solid var(--brand-yellow);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Inline SVG icon sizing ──────────────────────────────── */
.icon {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -2px;
}
.icon-sm { width: 12px; height: 12px; }
.icon-lg { width: 18px; height: 18px; }

/* ─── Responsive calendar (phones) ────────────────────────── */
@media (max-width: 640px) {
  .cal-event {
    flex-direction: column;
    gap: 8px;
  }
  .cal-event-time {
    flex: 0 0 auto;
    border-left: 0;
    border-top: 3px solid var(--brand-yellow);
    padding: 8px 0 0;
    display: flex; flex-direction: row; gap: 6px; align-items: baseline;
  }
  .cal-event--completed .cal-event-time { border-top-color: #4ade80; }
  .cal-event--cancelled .cal-event-time { border-top-color: var(--border-2); }
  .cal-event-status { margin-left: 0; }
}
.modal-body {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 24px;
  min-width: 400px;
  max-width: 560px;
  color: var(--text-1);
}
.modal-body h2 { margin-top: 0; font-size: 18px; }
.modal-body label { display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="number"],
.modal-body input[type="date"],
.modal-body input[type="datetime-local"],
.modal-body select,
.modal-body textarea {
  width: 100%;
  background: var(--surface-0);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  padding: 7px 10px;
  font: inherit; font-size: 13px;
  margin-top: 4px;
}
.modal-body textarea { resize: vertical; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ─── Calendar ─────────────────────────────────────────────── */
.cal-day {
  margin-top: 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.cal-day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-1);
}
.cal-day-date {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-1);
}
.cal-day-count {
  font-size: 11px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.cal-day-events { list-style: none; margin: 0; padding: 0; }

.cal-event {
  display: flex; gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1);
  transition: background 0.12s;
}
.cal-event:last-child { border-bottom: 0; }
.cal-event:hover { background: var(--surface-2); }
.cal-event--completed { opacity: 0.65; }
.cal-event--cancelled { opacity: 0.5; text-decoration: line-through; }

.cal-event-time {
  flex: 0 0 100px;
  display: flex; flex-direction: column; gap: 2px;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  border-left: 3px solid var(--brand-yellow);
  padding-left: 10px;
}
.cal-event--completed .cal-event-time { border-left-color: #4ade80; }
.cal-event--cancelled .cal-event-time { border-left-color: var(--border-2); }
.cal-event-start { font-size: 14px; font-weight: 700; }
.cal-event-dash { color: var(--text-3); font-size: 11px; }
.cal-event-end { font-size: 12px; }

.cal-event-body { flex: 1 1 auto; min-width: 0; }
.cal-event-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.cal-event-head strong { font-size: 14px; color: var(--text-1); }
.cal-event-eng { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.cal-event-status { margin-left: auto; }
.cal-event-agenda {
  font-size: 12.5px; line-height: 1.5; color: var(--text-2);
  white-space: pre-wrap;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--r-1);
  margin: 4px 0 6px;
}
.cal-event-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 6px;
}

.cal-empty {
  text-align: center; padding: 48px 24px;
  color: var(--text-2);
}
.cal-empty-icon { font-size: 40px; margin-bottom: 12px; }
.cal-empty h3 { margin: 4px 0 6px; font-size: 16px; color: var(--text-1); }

.cal-past { margin-top: 10px; }
.cal-past-summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 14px; font-weight: 600;
  color: var(--text-2);
  list-style: none;
}
.cal-past-summary::before {
  content: "▸"; display: inline-block; margin-right: 6px;
  transition: transform 0.15s;
}
.cal-past[open] .cal-past-summary::before { transform: rotate(90deg); }
.cal-past-summary::-webkit-details-marker { display: none; }
.cal-past-list { opacity: 0.75; }

/* ─── Calendar kind pills ──────────────────────────────────── */
.pill-standup        { background: rgba(158, 203, 255, 0.18); color: #9ecbff; }
.pill-workshop       { background: rgba(255, 230, 0, 0.14);  color: var(--brand-yellow); }
.pill-steerco        { background: rgba(167, 139, 250, 0.18); color: #c7b7ff; }
.pill-partner_review { background: rgba(255, 107, 107, 0.18); color: #ff9999; }
.pill-meeting        { background: var(--surface-2); color: var(--text-2); }
.pill-completed      { background: rgba(74, 222, 128, 0.18); color: #86efac; }
.pill-cancelled      { background: rgba(255, 107, 107, 0.14); color: #ff9999; text-decoration: line-through; }

/* Research */
.research-list { list-style: none; margin: 0; padding: 0; }
.research-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1);
}
.research-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.research-ticker {
  background: var(--brand-yellow);
  color: var(--text-inverse);
  padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
}
.research-summary { margin: 8px 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.research-actions { display: flex; gap: 10px; margin-top: 6px; }

/* Data Lab */
.dl-sql {
  width: 100%;
  background: #101015;
  color: #cdd6e8;
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  padding: 10px 12px;
  font: 13px/1.5 'JetBrains Mono', Consolas, monospace;
  resize: vertical;
}
.dl-results { max-height: 480px; overflow: auto; margin-top: 8px; }
.dl-results table { font-size: 12px; }
.dl-results table td, .dl-results table th { padding: 4px 8px; white-space: nowrap; }

/* Credentials */
.cred-list { list-style: none; margin: 0; padding: 0; }
.cred-item { padding: 14px; border-bottom: 1px solid var(--border-1); }
.cred-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cred-summary {
  margin: 8px 0;
  white-space: pre-wrap;
  font-size: 13px; line-height: 1.55;
  padding: 10px; background: var(--surface-2);
  border-radius: var(--r-1);
}
.xresult {
  display: grid; grid-template-columns: 100px 120px 1fr;
  gap: 10px; padding: 8px 6px;
  border-bottom: 1px dashed var(--border-1);
  font-size: 12.5px;
  align-items: center;
}
.xresult-preview { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Calc result blocks */
.calc-result {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--brand-yellow);
  border-radius: var(--r-1);
}
.calc-row { padding: 4px 0; font-size: 13.5px; }
.calc-row strong { display: inline-block; min-width: 130px; }

/* Shared doc-head + panel sub */
.panel { margin-top: 16px; }
.panel-head--split { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.panel-head--split h2 { margin: 0; }
.panel-sub { color: var(--text-3); font-size: 13px; margin: 4px 0 0; }
.panel-actions { display: flex; gap: 8px; align-items: center; }

/* ─── Sidebar nav groupings + dividers ─────────────────────── */
.nav-group-label {
  padding: 12px 18px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  user-select: none;
}
.nav-group-label:first-child { padding-top: 4px; }
.nav-divider {
  height: 1px;
  margin: 8px 18px 0;
  background: linear-gradient(to right,
    transparent, var(--border-1) 12%, var(--border-1) 88%, transparent);
  border: 0;
}

/* ─── Engagement spine (cross-module snapshot) ───────────────
   Asymmetric odd-count: 3 cols on medium, 5 on wide. The billing
   card is deliberately wider to anchor the eye (rule of thirds). */
.spine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
@media (min-width: 1400px) {
  .spine-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .spine-card--billing { grid-column: span 2; }
}
@media (max-width: 800px) {
  .spine-grid { grid-template-columns: 1fr; }
  .spine-card--billing { grid-column: auto; }
}
.spine-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  min-height: 120px;
}
.spine-card--billing { border-left: 3px solid var(--brand-yellow); }
.spine-card--origin  { border-left: 3px solid #8B8EFF; background: linear-gradient(180deg, rgba(139, 142, 255, 0.05), transparent 50%), var(--surface-1); }
.spine-head {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
}
.spine-kpi {
  font-size: 22px; font-weight: 800;
  color: var(--text-1); margin-top: 2px;
}
.spine-sub { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.spine-foot {
  margin-top: auto; padding-top: 6px;
  color: var(--brand-yellow); font-size: 12px; font-weight: 600;
}
.spine-list {
  list-style: none; margin: 6px 0 0; padding: 0;
  font-size: 12px; color: var(--text-2);
}
.spine-list li {
  padding: 2px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spine-link {
  display: inline-block;
  margin-top: auto; padding-top: 8px;
  color: var(--brand-yellow);
  font-size: 11px; font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.spine-link:hover { text-decoration: underline; }
.spine-cls { font-size: 14px; }
.spine-cls-advisory, .spine-cls-public { color: #86efac; }
.spine-cls-restricted                    { color: #FFD695; }
.spine-cls-audit                         { color: #ff9999; }

/* ─── Doc dock (review + share) ───────────────────────────── */
.doc-dock {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
}
.doc-dock-head h2 { margin: 0 0 2px; font-size: 15px; }
.doc-dock-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 12px;
}
@media (max-width: 900px) { .doc-dock-body { grid-template-columns: 1fr; } }
.doc-dock-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.doc-dock-state { margin-bottom: 10px; }
.doc-dock-transitions { display: flex; gap: 6px; flex-wrap: wrap; }
.doc-dock-transitions .btn { padding: 4px 10px; font-size: 12px; }
.doc-dock-history { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.doc-dock-history-row {
  padding: 6px 0;
  border-top: 1px dashed var(--border-1);
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.doc-dock-history-comment {
  width: 100%; color: var(--text-2); margin-top: 2px;
  padding: 4px 8px; background: var(--surface-2);
  border-radius: 4px;
}
.doc-dock-shares { font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.share-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 0;
}
.share-token {
  background: var(--surface-2);
  padding: 1px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--text-1);
}

/* ─── Inbox ─────────────────────────────────────────────── */
.inbox-list { list-style: none; margin: 0; padding: 0; }
.inbox-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-1);
  font-size: 13.5px;
  flex-wrap: wrap;
}
.inbox-item strong { color: var(--text-1); }
.inbox-item:hover { background: var(--surface-2); }
.inbox-time { margin-left: auto; font-size: 11.5px; }
.inbox-empty { padding: 22px; text-align: center; }

/* ─── Agent utilization bar on Floor tiles ────────────────── */
.agent-util {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 4px;
  border-top: 1px solid var(--border-1);
}
.agent-util-bar {
  height: 4px; background: var(--border-1);
  border-radius: 2px; overflow: hidden;
}
.agent-util-fill {
  display: block; height: 100%;
  background: linear-gradient(to right, #4ade80, var(--brand-yellow));
}
.agent-util--hot .agent-util-fill {
  background: linear-gradient(to right, var(--brand-yellow), #ff8a8a);
}
.agent-util--cool .agent-util-fill {
  background: var(--border-2);
}
.agent-util-meta {
  margin-top: 4px;
  font-size: 11px; color: var(--text-2);
}