/* ===================================================================
   Valley CFO — Firm OS
   Visual language: "The Orchestrator" (Learned's Hand brand)
   Dark-first · Midnight Navy · scarce Judicial Gold · Innovation Teal
   Cormorant Garamond (display) + Inter (UI)
   =================================================================== */
:root {
  /* Surfaces (dark-first) */
  --navy-deep:   #0a152e;   /* page background */
  --navy:        #0d1b3e;   /* midnight navy — primary */
  --navy-lift:   #112150;   /* cards / panels */
  --navy-lift-2: #16275f;   /* hover */

  /* Brand accents */
  --gold:        #c9a84c;   /* judicial gold — SCARCE: logo, CTAs, key numbers, hover */
  --gold-bright: #e2c673;
  --teal:        #2d7d9a;   /* innovation teal — AI / live elements */
  --teal-bright: #54a8c6;

  /* Text */
  --text:        #eef1f7;   /* primary on navy */
  --text-soft:   #aeb8cf;   /* secondary (quieter, less chalky) */
  --muted:       #76839f;   /* tertiary / meta */
  --parchment:   #f5f0e8;

  /* Status (tuned for dark bg) */
  --good:        #44c28c;
  --warn:        #d7a24b;
  --danger:      #e5736a;

  /* Lines & effects */
  --line:        rgba(201,168,76,.16);     /* faint gold-tinted hairline (scarce) */
  --line-plain:  rgba(255,255,255,.08);
  --line-teal:   rgba(84,168,198,.30);
  --radius:      10px;       /* cards */
  --radius-card: 12px;
  --radius-sm:   8px;        /* buttons / inputs / badges */
  --shadow:      0 1px 2px rgba(0,0,0,.35), 0 18px 48px rgba(0,0,0,.40);
  --inset-hi:    inset 0 1px 0 rgba(255,255,255,.045);
  --gold-glow:   0 0 0 1px rgba(201,168,76,.35), 0 10px 40px rgba(201,168,76,.10);
  --focus-ring:  0 0 0 3px rgba(84,168,198,.45);

  /* Type scale (UI). Display sizes stay inline on headings. */
  --fs-2xs:  10.5px;   /* badges / pills */
  --fs-xs:   11px;     /* eyebrows / form labels */
  --fs-sm:   12px;     /* meta / notes */
  --fs-base: 13px;     /* secondary copy / chips */
  --fs-md:   14px;     /* UI default */
  --fs-lg:   15px;     /* body / inputs */

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--sans);
  line-height: 1.5;
  color: var(--text);
  background: var(--navy-deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scrollbar-color: rgba(201,168,76,.30) var(--navy-deep);
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

/* Faint engineering-grid + glow, echoing the product mockups */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(45,125,154,.15) 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 0%, rgba(201,168,76,.06) 0%, transparent 55%),
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px) 0 0 / 40px 100%,
    var(--navy-deep);
}

/* Faint Valley CFO watermark behind the app pages */
body.app-page::after {
  content: "";
  position: fixed; right: -70px; bottom: -60px; z-index: -1;
  width: 480px; height: 480px;
  background: url("/static/valley-cfo-logo.png") no-repeat center / contain;
  filter: brightness(0) invert(1);
  opacity: .035;
  pointer-events: none;
}

/* Display headlines, with a scarce gold-italic accent available via <em> */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: 0; }
h1 { line-height: 1.04; }
h2, h3 { line-height: 1.15; }
h1 em, .accent { font-style: italic; color: var(--gold); }

/* Thin gradient gold rule — short, left-aligned */
.gold-rule {
  width: 120px; height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: .7;
}

/* ---------- Brand mark (monogram fallback — used by health page) ---------- */
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--navy-lift), var(--navy));
  border: 1px solid var(--line);
  color: var(--gold);
  font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .5px;
  flex: none;
}

/* ===================================================================
   Auth / health pages
   =================================================================== */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.auth-card {
  width: 100%; max-width: 392px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%),
    linear-gradient(180deg, var(--navy-lift), var(--navy));
  border: 1px solid var(--line-plain);
  border-radius: var(--radius-card);
  box-shadow: var(--inset-hi), var(--shadow);
  padding: 38px 32px;
}

.brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.brand-stacked { flex-direction: column; gap: 12px; margin-bottom: 30px; }
.brand-logo { width: 132px; height: auto; filter: brightness(0) invert(1); opacity: .95; }
.brand-eyebrow {
  margin: 0; color: var(--gold); font-family: var(--sans);
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 3.5px;
}
.brand-text h1 { margin: 0; font-size: 25px; line-height: 1.05; }
.brand-text p  { margin: 3px 0 0; color: var(--gold); font-size: var(--fs-xs);
                 font-family: var(--sans); font-weight: 600;
                 text-transform: uppercase; letter-spacing: 2.5px; }

.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 1px; margin-top: 12px;
}
.auth-form input {
  font-size: var(--fs-lg); font-family: var(--sans); color: var(--text);
  padding: 12px 13px;
  border: 1px solid var(--line-plain); border-radius: var(--radius-sm);
  background: rgba(0,0,0,.22);
  caret-color: var(--gold);
  transition: border-color .15s, box-shadow .15s;
}
.auth-form input::placeholder { color: var(--muted); }
.auth-form input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,.18);
}
/* Keep Chrome's autofill from flashing a white field on the dark card */
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--gold);
  box-shadow: 0 0 0 1000px rgba(10,21,46,.96) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.auth-form button {
  margin-top: 22px; padding: 13px;
  font-size: 14px; font-weight: 700; font-family: var(--sans); letter-spacing: .3px;
  color: #1a1303; background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: filter .15s, box-shadow .15s, transform .05s;
}
.auth-form button:hover { filter: brightness(1.06); box-shadow: var(--gold-glow); }
.auth-form button:active { transform: translateY(1px); }

.auth-foot { margin: 24px 0 0; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.health-status { font-size: 18px; color: var(--text-soft); }
.health-status strong { color: var(--good); }

.alert {
  background: rgba(229,115,106,.12);
  border: 1px solid rgba(229,115,106,.4);
  color: #f1a59d;
  padding: 11px 13px; border-radius: var(--radius-sm); font-size: var(--fs-md); margin-bottom: 20px;
}

/* ===================================================================
   App shell (dashboard / work queue)
   =================================================================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 14px 30px;
  background: rgba(13,27,62,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,168,76,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
  position: sticky; top: 0; z-index: 10;
}
.topbar-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-logo { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .92; }
.topbar-divider { width: 1px; height: 22px; background: var(--line-plain); flex: none; }
.topbar-title {
  font-family: var(--display); font-size: 19px; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-title strong { color: var(--text); font-weight: 700; }

.topbar-user { display: flex; align-items: center; gap: 18px; flex: none; }
.topbar-user .who { font-size: var(--fs-md); color: var(--text-soft); font-weight: 500; }
.link-btn {
  background: none; border: 1px solid var(--line-plain); cursor: pointer;
  color: var(--text-soft); font-size: var(--fs-base); font-weight: 600; font-family: var(--sans);
  padding: 7px 14px; border-radius: var(--radius-sm);
  transition: border-color .15s, color .15s;
}
.link-btn:hover { color: var(--gold); border-color: var(--line); }

.shell { max-width: 1120px; margin: 0 auto; padding: 46px 30px 72px; }
.shell-head h1 { margin: 0 0 8px; font-size: 38px; color: var(--text); }
.shell-head p  { margin: 0 0 18px; color: var(--text-soft); font-size: var(--fs-lg); max-width: 60ch; }
.shell-head .gold-rule { margin-bottom: 34px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--navy-lift), var(--navy));
  border: 1px solid var(--line-plain);
  border-radius: var(--radius-card);
  padding: 22px;
  box-shadow: var(--inset-hi), var(--shadow);
  transition: transform .14s, box-shadow .14s, border-color .14s;
  overflow: hidden;
}
/* gold top-edge that lights on hover — gold stays scarce, reserved for this */
.card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .18s;
}
a.card:hover {
  transform: translateY(-3px);
  border-color: var(--line-teal);
  box-shadow: var(--inset-hi), 0 1px 2px rgba(0,0,0,.4), 0 22px 56px rgba(0,0,0,.5);
}
a.card:hover::after { opacity: .85; }
.card-soon { cursor: default; }
.card-soon .card-blurb { color: var(--text-soft); }
.card-soon .card-top h2 { color: var(--text-soft); }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-top h2 { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--text); }

.card-blurb { color: var(--text-soft); font-size: var(--fs-base); line-height: 1.55; margin: 10px 0 0; flex: 1; }
.card-foot { margin-top: 18px; }
.card-cta  { color: var(--gold); font-weight: 600; font-size: var(--fs-base); letter-spacing: .2px; }
.card-cta::after { content: "→"; margin-left: 6px; display: inline-block; transition: transform .15s; }
a.card:hover .card-cta::after { transform: translateX(4px); }
.card-note { color: var(--muted); font-size: var(--fs-sm); }

/* Status badges — gold=internal live, teal=AI/proxy, muted=batch */
.badge {
  flex: none;
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1;
  letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.badge-internal { color: var(--gold);       background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.4); }
.badge-proxy    { color: var(--teal-bright); background: rgba(45,125,154,.16); border-color: rgba(84,168,198,.45); }
.badge-batch    { color: var(--text-soft);   background: rgba(255,255,255,.05); border-color: var(--line-plain); }

/* Genuinely-live services (teal proxy badges) get a faint breathing ring */
.badge-proxy { animation: live-pulse 2.6s ease-in-out infinite; }
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(84,168,198,.0); }
  50%      { box-shadow: 0 0 0 3px rgba(84,168,198,.16); }
}

/* ===================================================================
   Work Queue
   =================================================================== */
.asof { font-family: var(--sans); font-size: var(--fs-base); font-weight: 500; color: var(--muted); margin-left: 10px; font-variant-numeric: tabular-nums; }
.stats { display: flex; flex-wrap: wrap; gap: 9px; margin: 6px 0 10px; }
.stat {
  font-size: var(--fs-base); font-weight: 600; color: var(--text-soft);
  background: rgba(255,255,255,.04); border: 1px solid var(--line-plain);
  border-radius: 999px; padding: 6px 13px;
  font-variant-numeric: tabular-nums;
}
/* Risk chips lead visually (status hierarchy) */
.stat.danger { color: var(--danger); border-color: rgba(229,115,106,.45); background: rgba(229,115,106,.1); font-weight: 700; }
.stat.warn   { color: var(--warn);   border-color: rgba(215,162,75,.45);  background: rgba(215,162,75,.1); font-weight: 700; }
.filter-note { font-size: var(--fs-base); color: var(--muted); margin: 0; }
.filter-note a { color: var(--gold); }

.wq-section { margin-top: 38px; }
.wq-section:first-of-type { margin-top: 30px; }
.wq-section > h2 {
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 1.4px;
  margin: 0 0 14px; padding-bottom: 9px;
  text-transform: uppercase; color: var(--text-soft);
  border-bottom: 1px solid var(--line-plain);
}
.wq-section > h2.danger-h { color: var(--danger); border-color: rgba(229,115,106,.3); }
.wq-section > h2.warn-h   { color: var(--warn);   border-color: rgba(215,162,75,.3); }

.owner-block { margin-bottom: 20px; }
.owner-head { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; }
.owner-head h3 { margin: 0; font-family: var(--display); font-size: 19px; color: var(--text); }
.owner-count {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); font-weight: 700; color: #1a1303; background: var(--gold);
  border-radius: 999px; min-width: 20px; text-align: center; padding: 2px 8px;
}

.eng-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 58px;
  background: linear-gradient(180deg, var(--navy-lift), var(--navy));
  border: 1px solid var(--line-plain);
  border-left: 3px solid var(--line-plain);
  border-radius: var(--radius); padding: 10px 15px; margin-bottom: 8px;
  transition: border-color .14s, transform .1s;
}
.eng-row:hover { border-color: var(--line-teal); transform: translateX(2px); }
.eng-row.is-overdue { border-left-color: var(--danger); }
.eng-row.is-blocked { border-left-color: var(--warn); }
.eng-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eng-name { font-weight: 600; font-size: var(--fs-lg); color: var(--text); }
.eng-title { font-size: var(--fs-base); color: var(--text-soft); }
.eng-next { font-size: var(--fs-sm); color: var(--muted); }
.eng-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.pill {
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .4px;
  border-radius: 999px; padding: 4px 10px; color: var(--text-soft);
  background: rgba(255,255,255,.05); border: 1px solid var(--line-plain); white-space: nowrap;
}
.pill-waiting_on_review, .pill-ready_to_deliver { background: rgba(201,168,76,.12); color: var(--gold); border-color: rgba(201,168,76,.4); }
.pill-waiting_on_client { background: rgba(215,162,75,.12); color: var(--warn); border-color: rgba(215,162,75,.4); }
.pill-waiting_on_agent  { background: rgba(45,125,154,.16); color: var(--teal-bright); border-color: rgba(84,168,198,.45); }

.due { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.due-soon { color: var(--warn); }
.due-over { color: var(--danger); }
.empty { color: var(--muted); font-size: var(--fs-md); }

@media (max-width: 560px) {
  .shell { padding: 32px 18px 52px; }
  .shell-head h1 { font-size: 30px; }
  .topbar { padding: 12px 18px; }
  .topbar-user .who { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  a.card:hover, .eng-row:hover { transform: none; }
}

/* ===================================================================
   Kanban — Build Pipeline
   =================================================================== */
.shell-wide { max-width: 1500px; }

.kb-controls { margin: 4px 0 4px; }
.kb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kb-filter-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--muted); margin-right: 4px;
}
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-base); font-weight: 600; color: var(--text-soft);
  background: rgba(255,255,255,.04); border: 1px solid var(--line-plain);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.chip:hover { color: var(--text); border-color: var(--line-teal); }
.chip-on { color: var(--gold); border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.1); }
.chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--chip-dot, var(--muted)); flex: none;
}

/* War-room strip — the executive dashboard layer above the columns */
.kb-warroom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin: 18px 0 8px;
  background: var(--line-plain);
  border: 1px solid var(--line-plain); border-radius: var(--radius-card);
  overflow: hidden;
}
.kb-stat {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; background: rgba(255,255,255,.02);
}
.kb-stat-primary, .kb-stat-decision { grid-column: span 2; }
.kb-stat-label {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--muted);
}
.kb-stat-val { font-size: var(--fs-md); font-weight: 600; color: var(--text); line-height: 1.3; }
.kb-stat-primary .kb-stat-val { color: var(--gold); }
.kb-stat-warn { color: var(--danger) !important; }
.kb-stat-flag { color: var(--gold); }
.kb-stat-good { color: var(--good); }

/* View tabs */
.kb-viewtabs { display: inline-flex; gap: 6px; margin-right: 16px; }
.kb-tab {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft);
  border: 1px solid var(--line-plain); border-radius: 999px; padding: 5px 14px;
  transition: border-color .14s, color .14s, background .14s;
}
.kb-tab:hover { color: var(--text); border-color: var(--line-teal); }
.kb-tab-on { color: var(--gold); border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.1); }
.kb-viewnote { color: var(--muted); }
.kb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 4px; }

/* Columns — one grid track per visible lane (count via --kb-cols) */
.kb-board {
  display: grid;
  grid-template-columns: repeat(var(--kb-cols, 5), minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.kb-col {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line-plain);
  border-top: 2px solid var(--line-plain);
  border-radius: var(--radius-card);
  padding: 14px 12px 16px;
  min-width: 240px;
}
.kb-col-ideas    { border-top-color: var(--muted); }
.kb-col-shaped   { border-top-color: var(--teal); }
.kb-col-next     { border-top-color: var(--teal-bright); }
.kb-col-now      { border-top-color: var(--gold); }
.kb-col-waiting  { border-top-color: var(--danger); }
.kb-col-review   { border-top-color: #8f7fe8; }
.kb-col-shipped  { border-top-color: var(--good); }
.kb-col-archived { border-top-color: var(--muted); }
.kb-col-now { background: rgba(201,168,76,.04); }

.kb-col-head { display: flex; align-items: center; gap: 10px; margin: 2px 2px 14px; }
.kb-col-head h2 {
  margin: 0; font-family: var(--sans); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-soft);
}
.kb-col-count {
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-soft);
  background: rgba(255,255,255,.06); border-radius: 999px;
  min-width: 20px; text-align: center; padding: 1px 8px;
}
.kb-col-limit { opacity: .5; font-weight: 600; }
.kb-col-count-over { color: var(--danger); background: rgba(229,115,106,.14); }
.kb-wip-warn {
  margin: -6px 2px 12px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--danger); background: rgba(229,115,106,.08);
  border: 1px solid rgba(229,115,106,.3); border-radius: var(--radius-sm);
  padding: 6px 9px;
}
.kb-col-body { display: flex; flex-direction: column; gap: 10px; min-height: 40px; }

.kb-card {
  position: relative;
  background: linear-gradient(180deg, var(--navy-lift), var(--navy));
  border: 1px solid var(--line-plain);
  border-left: 3px solid var(--proj, var(--muted));
  border-radius: var(--radius);
  padding: 12px 13px;
  box-shadow: var(--inset-hi), 0 1px 2px rgba(0,0,0,.3);
  transition: border-color .14s, transform .1s;
}
.kb-card:hover { transform: translateY(-2px); border-color: var(--line-teal); border-left-color: var(--proj, var(--muted)); }
.kb-card-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); line-height: 1.35; }
.kb-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.kb-proj { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-soft); }
.kb-proj-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--proj, var(--muted)); flex: none; }
.kb-pri {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--gold); background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.35);
  border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums;
}
.kb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.kb-updated { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.kb-src {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-plain); border-radius: 999px; padding: 2px 7px;
}
.kb-src-ticket { color: var(--teal-bright); border-color: var(--line-teal); }

.kb-decision { margin-top: 9px; font-size: var(--fs-sm); font-weight: 600; border-radius: var(--radius-sm); padding: 5px 9px; }
.kb-decision-approved { color: var(--good);   background: rgba(68,194,140,.1);  border: 1px solid rgba(68,194,140,.35); }
.kb-decision-rejected { color: var(--danger); background: rgba(229,115,106,.1); border: 1px solid rgba(229,115,106,.35); }

.kb-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.kb-actions form { margin: 0; }
.kb-btn {
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  color: var(--text-soft); background: rgba(255,255,255,.05);
  border: 1px solid var(--line-plain); border-radius: var(--radius-sm);
  padding: 6px 11px; transition: border-color .14s, color .14s, background .14s, transform .05s;
}
.kb-btn:hover { color: var(--text); border-color: var(--line-teal); }
.kb-btn:active { transform: translateY(1px); }
.kb-btn-approve { color: var(--good); border-color: rgba(68,194,140,.4); background: rgba(68,194,140,.1); }
.kb-btn-approve:hover { color: #7fe0b3; border-color: var(--good); }
.kb-btn-reject { color: var(--danger); border-color: rgba(229,115,106,.4); background: rgba(229,115,106,.1); }
.kb-btn-reject:hover { color: #f1a59d; border-color: var(--danger); }
.kb-btn-ghost { color: var(--muted); }
.kb-empty { color: var(--muted); font-size: var(--fs-sm); text-align: center; padding: 14px 0; margin: 0; }

/* Add-card */
.kb-add { margin-top: 40px; border-top: 1px solid var(--line-plain); padding-top: 22px; }
.kb-add h2 {
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-soft); margin: 0 0 14px;
}
.kb-add-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kb-add-form input, .kb-add-form select {
  font-family: var(--sans); font-size: var(--fs-md); color: var(--text);
  background: rgba(0,0,0,.22); border: 1px solid var(--line-plain);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.kb-add-form input[name="title"] { flex: 1 1 280px; }
.kb-add-form input[name="project"], .kb-add-form input[name="priority"] { flex: 0 1 160px; }
.kb-add-form input:focus, .kb-add-form select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.16); }
.kb-btn-add { color: #1a1303; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border: 0; font-weight: 700; padding: 10px 20px; }
.kb-btn-add:hover { filter: brightness(1.06); color: #1a1303; }

/* Primary-mission card + flag */
.kb-card-primary { border-color: rgba(201,168,76,.5); box-shadow: var(--inset-hi), 0 0 0 1px rgba(201,168,76,.35), 0 2px 8px rgba(0,0,0,.35); }
.kb-primary-flag {
  display: inline-block; margin-bottom: 6px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  color: var(--gold);
}

/* Owner + nudge badges */
.kb-owner {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--text-soft);
  background: rgba(255,255,255,.05); border: 1px solid var(--line-plain);
  border-radius: 999px; padding: 2px 8px;
}
.kb-needs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kb-need {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .3px;
  color: #e0b45a; background: rgba(201,168,76,.08);
  border: 1px dashed rgba(201,168,76,.45); border-radius: 999px; padding: 2px 8px;
}

/* Inline context lines */
.kb-blocker { margin-top: 8px; font-size: var(--fs-sm); color: #f1a59d; line-height: 1.35; }
.kb-nextaction { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.35; }
.kb-note { margin-top: 8px; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.4; }

.kb-btn-primary { color: var(--gold); border-color: rgba(201,168,76,.4); background: rgba(201,168,76,.1); }
.kb-btn-primary:hover { color: var(--gold-bright); border-color: var(--gold); }
.kb-btn-star { color: var(--muted); }
.kb-btn-star:hover { color: var(--gold); border-color: rgba(201,168,76,.4); }

/* Inline prompt (Mark Waiting) + edit disclosure */
.kb-prompt, .kb-edit { margin: 0; }
.kb-prompt > summary, .kb-edit > summary { list-style: none; cursor: pointer; }
.kb-prompt > summary::-webkit-details-marker, .kb-edit > summary::-webkit-details-marker { display: none; }
.kb-prompt[open] > summary { opacity: .6; }
.kb-prompt form, .kb-edit form { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; width: 100%; }
.kb-prompt input[type=text] {
  flex: 1 1 140px; font-family: var(--sans); font-size: var(--fs-sm); color: var(--text);
  background: rgba(0,0,0,.22); border: 1px solid var(--line-plain);
  border-radius: var(--radius-sm); padding: 7px 9px;
}
.kb-edit { margin-top: 10px; border-top: 1px dashed var(--line-plain); padding-top: 9px; }
.kb-edit > summary {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted);
}
.kb-edit > summary:hover { color: var(--text-soft); }
.kb-edit label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 100%;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.kb-edit input[type=text] {
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--text); background: rgba(0,0,0,.22); border: 1px solid var(--line-plain);
  border-radius: var(--radius-sm); padding: 7px 9px;
}
.kb-prompt input:focus, .kb-edit input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.16); }

.kb-add-form input[name="owner"] { flex: 0 1 140px; }

@media (max-width: 980px) {
  .kb-board { grid-template-columns: repeat(var(--kb-cols, 5), 78vw); }
  .kb-warroom { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .kb-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Agent Inbox
   --------------------------------------------------------------------------- */
.inbox-flash {
  margin: 0 0 18px; padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: var(--fs-md); border: 1px solid var(--line-plain);
}
.inbox-flash-ok   { background: rgba(68,194,140,.12);  border-color: rgba(68,194,140,.35);  color: var(--good); }
.inbox-flash-warn { background: rgba(215,162,75,.12);  border-color: rgba(215,162,75,.35);  color: var(--warn); }
.inbox-flash-err  { background: rgba(229,115,106,.12); border-color: rgba(229,115,106,.40); color: var(--danger); }

.inbox-section { margin-top: 26px; }
.inbox-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.inbox-section-head h2 {
  font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--text);
  margin: 0; letter-spacing: .2px;
}
.inbox-section-count {
  font-size: var(--fs-2xs); color: var(--muted); background: var(--navy-lift);
  border: 1px solid var(--line-plain); border-radius: 999px; padding: 1px 9px;
}

.inbox-item {
  background: var(--navy-lift); border: 1px solid var(--line-plain);
  border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 12px;
  box-shadow: var(--inset-hi);
}
.inbox-item-waiting_on_human { border-left: 3px solid var(--gold); }
.inbox-item-completed { opacity: .72; }

.inbox-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.inbox-item-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.inbox-item-tags { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.inbox-src {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .5px;
  color: var(--teal-bright); border: 1px solid var(--line-teal); border-radius: 999px; padding: 1px 8px;
}
.conf-badge {
  font-size: var(--fs-2xs); color: var(--text-soft); background: var(--navy);
  border: 1px solid var(--line-plain); border-radius: 999px; padding: 1px 8px;
}
.conf-attention { color: var(--warn); border-color: rgba(215,162,75,.4); }

.inbox-summary { color: var(--text-soft); font-size: var(--fs-md); margin: 10px 0 0; line-height: 1.5; }

/* Rendered Fathom summary — headings, bullets, and muted timestamp markers */
.fathom-summary { color: var(--text-soft); line-height: 1.55; }
.fathom-summary h4 {
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .6px;
  color: var(--gold); margin: 16px 0 6px; font-weight: 700;
}
.fathom-summary h4:first-child { margin-top: 2px; }
.fathom-summary h5 {
  font-size: var(--fs-md); color: var(--text); margin: 12px 0 4px; font-weight: 600;
}
.fathom-summary p { margin: 6px 0; }
.fathom-summary ul { margin: 6px 0; padding-left: 20px; list-style: disc; }
.fathom-summary ul ul { margin: 2px 0; list-style: circle; }
.fathom-summary li { margin: 4px 0; }
.fathom-summary strong { color: var(--text); font-weight: 600; }
.fs-ts {
  font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap;
  border: 1px solid var(--line-plain); border-radius: 999px; padding: 0 7px;
  margin-left: 4px; vertical-align: 1px;
}

/* Edit toggle + textarea */
.inbox-edit { margin: 10px 0 0; }
.inbox-edit > summary {
  cursor: pointer; display: inline-block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--teal-bright); border: 1px solid var(--line-teal); border-radius: var(--radius-sm);
  padding: 3px 12px; list-style: none;
}
.inbox-edit > summary::-webkit-details-marker { display: none; }
.inbox-edit > summary:hover { background: var(--navy); }
.inbox-edit[open] > summary { margin-bottom: 10px; }
.inbox-edit-ta {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 180px;
  background: var(--navy); border: 1px solid var(--line-plain); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.5; padding: 10px 12px;
}
.inbox-edit-ta:focus { outline: none; box-shadow: var(--focus-ring); }
.inbox-edit-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.inbox-edit-hint { font-size: var(--fs-2xs); color: var(--muted); flex: 1; }
.inbox-edit-hint code { font-family: var(--mono, monospace); color: var(--text-soft); }
.inbox-edit-foot .ib-btn { margin-left: auto; flex-shrink: 0; }

.inbox-reco { font-size: var(--fs-sm); color: var(--text-soft); margin: 8px 0 0; }
.inbox-reco-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .5px;
  color: var(--gold); margin-right: 6px;
}
.inbox-evidence { margin: 10px 0 0; }
.inbox-evidence summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); }
.inbox-evidence ul { margin: 8px 0 0; padding-left: 20px; }
.inbox-evidence li { font-size: var(--fs-sm); color: var(--text-soft); margin: 3px 0; }

.inbox-item-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-plain);
}
.inbox-when { font-size: var(--fs-sm); color: var(--muted); }
.inbox-decision {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .5px;
  border-radius: 999px; padding: 2px 10px;
}
.inbox-decision-approved { color: var(--good);   background: rgba(68,194,140,.12); }
.inbox-decision-rejected { color: var(--danger);  background: rgba(229,115,106,.12); }

.inbox-actions { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.inbox-actions form { display: inline-flex; gap: 6px; align-items: center; }
.ib-reason {
  background: var(--navy); border: 1px solid var(--line-plain); border-radius: var(--radius-sm);
  color: var(--text); font-size: var(--fs-sm); padding: 5px 9px; width: 150px;
}
.ib-reason:focus { outline: none; box-shadow: var(--focus-ring); }
.ib-btn {
  font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600;
  border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--line-plain); background: var(--navy-lift-2); color: var(--text);
}
.ib-btn:hover { background: var(--navy); }
.ib-btn-approve { background: var(--gold); color: #201700; border-color: transparent; }
.ib-btn-approve:hover { background: var(--gold-bright); }
.ib-btn-reject { color: var(--danger); }
.ib-btn-reject:hover { border-color: rgba(229,115,106,.4); }

.inbox-empty { color: var(--muted); font-size: var(--fs-md); font-style: italic; padding: 20px 0; }

/* ---------------------------------------------------------------------------
   Nav shell (left sidebar) + navigator chat home
   --------------------------------------------------------------------------- */
body.nav-shell { margin: 0; }
.shell-layout { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
  width: 264px; flex-shrink: 0; background: var(--navy-deep);
  border-right: 1px solid var(--line-plain); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.sidebar-logo { height: 26px; width: auto; }
.sidebar-brand-text { font-family: var(--display); font-size: 18px; color: var(--text); letter-spacing: .3px; }
.sidebar-nav { flex: 1; padding: 4px 10px 14px; }
.nav-group-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin: 16px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--text-soft); font-size: var(--fs-md); margin: 1px 0;
}
a.nav-item:hover { background: var(--navy-lift); color: var(--text); }
.nav-active { background: var(--navy-lift-2); color: var(--text); box-shadow: inset 2px 0 0 var(--gold); }
.nav-item-static { opacity: .62; cursor: default; }
.nav-item-home .nav-name { font-weight: 600; color: var(--text); }
.nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0;
  border-radius: 999px; padding: 1px 7px; border: 1px solid var(--line-plain); color: var(--muted);
}
.nav-badge-live  { color: var(--good);  border-color: rgba(68,194,140,.35); }
.nav-badge-chat  { color: var(--gold);  border-color: rgba(201,168,76,.4); }
.nav-badge-slack { color: var(--teal-bright); border-color: var(--line-teal); }
.nav-badge-service, .nav-badge-soon { color: var(--muted); }
.sidebar-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--line-plain);
}
.sidebar-foot .who { font-size: var(--fs-sm); color: var(--text-soft); }

/* Chat main */
.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.chat-head { padding: 22px 28px 12px; border-bottom: 1px solid var(--line-plain); }
.chat-head h1 { font-family: var(--display); font-size: 26px; color: var(--text); margin: 0; }
.chat-sub { color: var(--text-soft); font-size: var(--fs-md); margin: 4px 0 0; }

.chat-log { flex: 1; overflow-y: auto; padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; max-width: 760px; }
.msg-user { align-self: flex-end; }
.msg-assistant { align-self: flex-start; }
.msg-body {
  padding: 11px 15px; border-radius: 14px; font-size: var(--fs-lg); line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere;
}
.msg-user .msg-body { background: var(--gold); color: #201700; border-bottom-right-radius: 4px; }
.msg-assistant .msg-body { background: var(--navy-lift); color: var(--text); border: 1px solid var(--line-plain); border-bottom-left-radius: 4px; }
.msg-body a { color: var(--teal-bright); text-decoration: underline; }
.msg-assistant .msg-body code { background: var(--navy); padding: 1px 5px; border-radius: 4px; font-size: var(--fs-sm); }
.is-typing::after {
  content: "…"; color: var(--muted);
  animation: chat-blink 1.2s steps(3, end) infinite; letter-spacing: 2px;
}
@keyframes chat-blink { 0% { opacity: .3; } 50% { opacity: 1; } 100% { opacity: .3; } }

.chat-input { display: flex; gap: 10px; padding: 16px 28px 22px; border-top: 1px solid var(--line-plain); }
.chat-input input {
  flex: 1; background: var(--navy-lift); border: 1px solid var(--line-plain);
  border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-lg); padding: 11px 15px;
}
.chat-input input:focus { outline: none; box-shadow: var(--focus-ring); }
.chat-input button:disabled { opacity: .5; cursor: default; }

@media (max-width: 720px) {
  .shell-layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .chat-main { height: auto; }
}

/* ---------------------------------------------------------------------------
   Work Queue — real Qount task counts, prioritized by lateness
   --------------------------------------------------------------------------- */
.wq-notice {
  margin-top: 14px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: rgba(215,162,75,.12); border: 1px solid rgba(215,162,75,.35);
  color: var(--warn); font-size: var(--fs-md);
}
.wq-table-wrap { margin-top: 22px; overflow-x: auto; }
.wq-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.wq-table th {
  text-align: right; padding: 8px 12px; color: var(--muted);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--line-plain); white-space: nowrap;
}
.wq-table th.wq-name { text-align: left; }
.wq-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-plain); }
.wq-name { text-align: left; color: var(--text); font-weight: 500; white-space: nowrap; }
.wq-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.wq-total { color: var(--text); font-weight: 600; }
.wq-overdue { color: var(--danger); font-weight: 600; }
.wq-muted { color: var(--muted); }
.wq-hot .wq-name { color: var(--danger); }
.wq-unassigned td { color: var(--warn); }
.wq-unassigned .wq-name { color: var(--warn); }
.wq-firm td { border-top: 2px solid var(--line); border-bottom: none; font-weight: 600; color: var(--text); padding-top: 12px; }
.wq-firm .wq-name { color: var(--gold); }
.wq-bar-col { width: 120px; }
.wq-bar {
  display: inline-block; width: 100%; height: 8px; border-radius: 999px;
  background: var(--navy); overflow: hidden; vertical-align: middle;
}
.wq-bar-fill { display: block; height: 100%; background: var(--danger); border-radius: 999px; }
.wq-bar-warn { background: var(--warn); }
.wq-foot { margin-top: 14px; color: var(--muted); font-size: var(--fs-sm); }
.wq-h2 { font-family: var(--display); font-size: 22px; color: var(--text); margin: 32px 0 2px; }
.wq-sub { color: var(--text-soft); font-size: var(--fs-md); margin: 0 0 12px; }
.wq-clickable { cursor: pointer; }
.wq-clickable:hover td { background: var(--navy-lift); }
.wq-name a { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--line); }
.wq-name a:hover { color: var(--gold); }
.wq-back { margin: 0 0 6px; }
.wq-back a { color: var(--muted); text-decoration: none; font-size: var(--fs-md); }
.wq-back a:hover { color: var(--text-soft); }
.wq-empty { color: var(--muted); font-style: italic; padding: 18px 0; }

/* ---------- Chat home: middle rail (conversations + queue rollup) ---------- */
.chat-rail {
  width: 264px; flex: 0 0 264px; display: flex; flex-direction: column;
  min-height: 100vh; max-height: 100vh;
  border-right: 1px solid var(--line-plain); background: rgba(13,27,62,.35);
}
.rail-head { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 10px; }
.rail-title { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 2px; color: var(--muted); }
.rail-new { background: var(--navy-lift); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px 10px; font-size: var(--fs-sm); cursor: pointer; }
.rail-new:hover { color: var(--gold); border-color: var(--gold); }
.rail-list { flex: 1; overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; }
.conv-item { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-soft); }
.conv-item:hover { background: var(--navy-lift); color: var(--text); }
.conv-item.conv-active { background: var(--navy-lift-2); color: var(--text);
  box-shadow: inset 2px 0 0 var(--gold); }
.conv-title { font-size: var(--fs-base); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1; }
.conv-actions { display: none; gap: 2px; flex: 0 0 auto; }
.conv-item:hover .conv-actions { display: flex; }
.conv-btn { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: 4px; }
.conv-btn:hover { color: var(--gold); background: rgba(0,0,0,.25); }

.rail-queue { display: block; margin: 8px; padding: 12px 14px; text-decoration: none;
  border: 1px solid var(--line-plain); border-radius: var(--radius); background: var(--navy-lift);
  color: var(--text-soft); }
.rail-queue:hover { border-color: var(--line-teal); }
.rq-head { display: flex; justify-content: space-between; font-size: var(--fs-xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 8px; }
.rq-open { color: var(--teal-bright); letter-spacing: 0; }
.rq-firm { font-size: var(--fs-base); color: var(--text); }
.rq-num { font-weight: 700; }
.rq-overdue { color: var(--warn); }
.rq-sep { color: var(--muted); margin: 0 4px; }
.rq-mine { font-size: var(--fs-base); color: var(--text-soft); margin-top: 4px; }
.rq-asof { font-size: var(--fs-2xs); color: var(--muted); margin-top: 6px; }
.rq-err { font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 900px) {
  .chat-rail { width: 100%; flex-basis: auto; min-height: 0; max-height: 320px; border-right: none;
    border-bottom: 1px solid var(--line-plain); }
}

/* ---------- Chat attachments ---------- */
.chat-compose { display: flex; flex-direction: column; }
.attach-chips:empty { display: none; }
.attach-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 28px 0; }
.attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
  background: var(--navy-lift); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size: var(--fs-sm); color: var(--text-soft); }
.attach-chip .attach-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-x { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; }
.attach-x:hover { color: var(--danger); }
.attach-btn { flex: 0 0 auto; background: var(--navy-lift); color: var(--text-soft);
  border: 1px solid var(--line-plain); border-radius: var(--radius-sm); width: 38px;
  cursor: pointer; font-size: 16px; }
.attach-btn:hover { color: var(--gold); border-color: var(--gold); }
.msg-attach { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.msg-attach-chip { display: inline-flex; align-items: center; background: rgba(0,0,0,.18);
  border: 1px solid var(--line-plain); border-radius: var(--radius-sm); padding: 2px 8px;
  font-size: var(--fs-sm); }
.msg-user .msg-attach-chip { background: rgba(0,0,0,.12); border-color: rgba(0,0,0,.18); color: #201700; }

/* ============================================================= *
 * Statement Intake & Review (Phase A)                            *
 * ============================================================= */
.stmt-newclient { margin: 8px 0 22px; }
.stmt-newclient summary,
.stmt-upload summary { cursor: pointer; color: var(--teal-bright); font-size: var(--fs-md); }
.stmt-inline-form { display: flex; gap: 10px; margin-top: 12px; }
.stmt-inline-form input[type=text] {
  flex: 1; max-width: 360px; padding: 8px 10px; background: var(--navy-lift);
  border: 1px solid var(--line-plain); border-radius: var(--radius-sm); color: var(--text);
}
.stmt-entity { border: 1px solid var(--line-plain); border-radius: var(--radius);
  padding: 14px 16px; margin: 12px 0; background: var(--navy-lift); }
.stmt-entity-head { font-weight: 600; color: var(--text); margin-bottom: 8px; }
.stmt-upload { margin: 6px 0 10px; }
.stmt-upload-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 12px; }
.stmt-upload-form label { font-size: var(--fs-sm); color: var(--text-soft); display: flex; gap: 6px; align-items: center; }

.stmt-batch-list { width: 100%; border-collapse: collapse; margin-top: 8px; }
.stmt-batch-list td { padding: 7px 10px; border-top: 1px solid var(--line-plain);
  font-size: var(--fs-sm); color: var(--text-soft); }

.recon-badge { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: var(--fs-2xs); border: 1px solid var(--line-plain); color: var(--muted); }
.recon-ok    { color: var(--good);  border-color: rgba(68,194,140,.4);  background: rgba(68,194,140,.10); }
.recon-fail  { color: var(--danger);border-color: rgba(229,115,106,.4); background: rgba(229,115,106,.10); }
.recon-final { color: var(--gold-bright); border-color: rgba(201,168,76,.4); background: rgba(201,168,76,.10); }

.recon-banner { margin: 14px 0; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-plain); font-size: var(--fs-md); }
.recon-banner.recon-ok   { background: rgba(68,194,140,.10);  border-color: rgba(68,194,140,.35);  color: var(--good); }
.recon-banner.recon-fail { background: rgba(229,115,106,.10); border-color: rgba(229,115,106,.35); color: var(--danger); }
.recon-banner.recon-final{ background: rgba(201,168,76,.10);  border-color: rgba(201,168,76,.35);  color: var(--gold-bright); }

.stmt-periods, .stmt-pl, .stmt-grid { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: var(--fs-sm); }
.stmt-periods th, .stmt-pl th, .stmt-grid th { text-align: left; padding: 8px 10px;
  color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line-plain); }
.stmt-periods td, .stmt-pl td { padding: 7px 10px; border-top: 1px solid var(--line-plain); color: var(--text-soft); }
.stmt-pl .pl-income td { color: var(--text); }
.stmt-pl .pl-total td { border-top: 1px solid var(--line); color: var(--text); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.neg { color: var(--danger); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); color: var(--muted); }
.stmt-note { color: var(--muted); font-size: var(--fs-sm); margin: 10px 0; }

.stmt-grid td { padding: 8px 10px; border-top: 1px solid var(--line-plain); vertical-align: top; }
.stmt-grid tr:hover { background: var(--navy-lift); }
.stmt-desc { color: var(--text); }
.stmt-prov { color: var(--muted); font-size: var(--fs-2xs); margin-top: 3px; display: flex; gap: 8px; align-items: center; }
.stmt-suggested { color: var(--text-soft); }
.stmt-cat { max-width: 230px; padding: 6px 8px; background: var(--navy-lift-2);
  border: 1px solid var(--line-plain); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-sm); }
.stmt-mini { width: 120px; padding: 5px 7px; margin: 2px 0; background: var(--navy-lift);
  border: 1px solid var(--line-plain); border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-xs); }
.stmt-remember { font-size: var(--fs-2xs); color: var(--muted); }
.stmt-remember label { display: flex; gap: 5px; align-items: center; margin-bottom: 3px; }
.stmt-review-foot, .stmt-finalize { margin-top: 16px; display: flex; gap: 14px; align-items: center; }