/* ------------------------------------------------------------------
   Recon — design tokens & components
   Aligned with the Bulwark design system so the two surfaces feel like
   one product family. Token names, scales, and values are deliberately
   identical to bulwark/app/globals.css; if Bulwark moves, mirror here.
   ------------------------------------------------------------------ */

:root {
  /* ===== Brand + semantic ===== */
  --accent: #B08D3E;
  --accent-soft: #FBF6EC;
  --accent-border: #DEC98A;

  --good: #047857;
  --good-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --bad: #b91c1c;
  --bad-soft: #fef2f2;

  /* Back-compat aliases the existing markup + JS still reach for. */
  --error: var(--bad);

  /* ===== Surfaces ===== */
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #f1f5f9;
  --surface-1: #ffffff;
  --surface-2: #f1f5f9;
  --surface-3: #e2e8f0;
  --surface-hover: #f1f5f9;
  --surface-active: #e2e8f0;
  --surface-selected: #FBF6EC;
  --surface-overlay: rgba(15, 23, 42, 0.45);

  /* ===== Ink / text ===== */
  --ink-primary: #0f172a;
  --ink-secondary: #334155;
  --ink-tertiary: #64748b;
  --ink-placeholder: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --text-placeholder: #94a3b8;
  --text-on-accent: #ffffff;

  /* Back-compat aliases the existing markup still reaches for. */
  --text: var(--ink-primary);
  --muted: var(--ink-tertiary);

  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --border: var(--line);

  /* ===== Radius ===== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius: var(--radius-lg);

  /* ===== Elevation ===== */
  --elev-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --elev-2: 0 4px 12px rgba(15, 23, 42, 0.06);
  --elev-pop: 0 10px 30px rgba(15, 23, 42, 0.1);
  --elev-modal: 0 20px 50px rgba(15, 23, 42, 0.15);

  /* ===== Typography ===== */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Monaco, Consolas,
    "Liberation Mono", monospace;

  /* ===== Spacing ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* Back-compat alias. */
  --gap: var(--space-4);

  --focus-ring: 0 0 0 3px rgba(176, 141, 62, 0.28);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;

  font-family: var(--font-sans);
}

/* ===== Dark mode (mirrors Bulwark) ===== */
[data-theme="dark"] {
  --accent: #B08D3E;
  --accent-soft: #FBF6EC;
  --accent-border: #DEC98A;

  --good: #34d399;
  --good-soft: #064e3b;
  --warn: #fbbf24;
  --warn-soft: #78350f;
  --bad: #f87171;
  --bad-soft: #7f1d1d;
  --error: var(--bad);

  --bg: #0b1220;
  --surface: #0f172a;
  --surface-subtle: #0f172a;
  --surface-muted: #1e293b;
  --surface-1: #0f172a;
  --surface-2: #1e293b;
  --surface-3: #334155;
  --surface-hover: #1e293b;
  --surface-active: #334155;
  --surface-selected: #FBF6EC;
  --surface-overlay: rgba(2, 6, 23, 0.6);

  --ink-primary: #f1f5f9;
  --ink-secondary: #cbd5e1;
  --ink-tertiary: #94a3b8;
  --ink-placeholder: #64748b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-placeholder: #64748b;
  --text-on-accent: #0f172a;
  --text: var(--ink-primary);
  --muted: var(--ink-tertiary);

  --line: #1e293b;
  --line-strong: #334155;
  --border: var(--line);

  --elev-1: 0 0 0 1px rgba(255, 255, 255, 0.03);
  --elev-2: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 6px 16px rgba(0, 0, 0, 0.4);
  --elev-pop: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 32px rgba(0, 0, 0, 0.55);
  --elev-modal: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px rgba(0, 0, 0, 0.6);

  --focus-ring: 0 0 0 3px rgba(176, 141, 62, 0.45);
}

/* Honor system preference when the user hasn't picked one. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  background: var(--surface-subtle);
  color: var(--ink-primary);
  margin: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }
button { font: inherit; cursor: pointer; }

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

.visually-hidden {
  position: absolute !important; clip: rect(1px,1px,1px,1px); height: 1px;
  width: 1px; overflow: hidden;
}

/* ------------------------------ Login ------------------------------ */
.recon-login {
  max-width: 380px;
  margin: 10vh auto;
  padding: var(--space-7) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
}
.recon-login__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.recon-login__brand-name {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
}
.recon-login__brand-env {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-tertiary);
  background: var(--surface-muted);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.recon-login h1 {
  margin: 0 0 var(--space-1);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
  font-weight: 700;
}
.recon-login p { color: var(--ink-tertiary); margin: var(--space-1) 0 0; font-size: 13px; }
.recon-login form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.recon-login label {
  display: flex; flex-direction: column; gap: var(--space-1);
  font-size: 12px; color: var(--ink-tertiary); font-weight: 500;
}
.recon-login input {
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.recon-login input:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.recon-login button {
  background: var(--accent);
  color: var(--text-on-accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.recon-login button:hover { background: #98782f; border-color: #98782f; }
.recon-login button[type="button"] {
  background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--line);
}
.recon-login button[type="button"]:hover {
  background: var(--surface-muted); color: var(--ink-primary); border-color: var(--line-strong);
}
#status { color: var(--ink-tertiary); font-size: 12px; min-height: 18px; }

.recon-login__sso { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.recon-login__sso-hint { margin: 0 0 var(--space-1); font-size: 12px; color: var(--ink-tertiary); }
.recon-login .sso-btn {
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font: inherit;
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.recon-login .sso-btn:hover { border-color: var(--accent); color: var(--accent); }
.recon-login__sep {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-3) 0;
  color: var(--ink-tertiary); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.recon-login__sep::before, .recon-login__sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Magic-link section — the promoted non-SSO entry point. Distinct
   email input so the SCO can type + click without expanding the
   password disclosure. */
.recon-login__magic-section {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.recon-login__magic-btn {
  /* Visually equal weight to SSO buttons so the path reads as primary. */
  width: 100%;
}
.recon-login__magic-hint {
  margin: 0; font-size: 12px; color: var(--ink-tertiary);
}

/* Password disclosure — collapsed by default. Most enterprise users
   will use SSO or magic link; password is the fallback. */
.recon-login__password-disclosure {
  margin-top: var(--space-4);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.recon-login__password-summary {
  cursor: pointer; list-style: none;
  font-size: 13px; color: var(--ink-secondary);
  padding: 4px 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.recon-login__password-summary::-webkit-details-marker { display: none; }
.recon-login__password-summary::before {
  content: "▸"; font-size: 10px; color: var(--ink-tertiary);
  transition: transform var(--dur-fast, 120ms) var(--ease-out, ease);
  display: inline-block;
}
.recon-login__password-disclosure[open] .recon-login__password-summary::before {
  transform: rotate(90deg);
}
.recon-login__password-summary:hover { color: var(--ink-primary); }
.recon-login__password-summary:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ----- About Recon (crawler-visible product description on login) ----- */
.recon-login__about {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.recon-login__about h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2);
}
.recon-login__about p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin: 0;
}
.recon-login__about a {
  color: var(--ink-primary);
  text-decoration: underline;
}
.recon-login__about a:hover { color: var(--accent); }

.recon-login__footer {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-tertiary);
}
.recon-login__footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.recon-login__footer nav a {
  color: var(--ink-secondary);
  text-decoration: none;
}
.recon-login__footer nav a:hover { color: var(--ink-primary); text-decoration: underline; }
.recon-login__copy { margin: 0; color: var(--ink-tertiary); }

/* ------------------------------ Topbar ------------------------------ */
.recon-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--elev-1);
}
.recon-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.recon-topbar h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
}
.recon-topbar__env {
  font-size: 10px;
  color: var(--ink-tertiary);
  background: var(--surface-muted);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.recon-topbar nav { display: flex; align-items: center; gap: var(--space-2); }
.recon-topbar a {
  color: var(--ink-secondary); text-decoration: none;
  font-size: 13px; font-weight: 500;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.recon-topbar a:hover { background: var(--surface-muted); color: var(--ink-primary); }
.recon-topbar a[aria-current="page"] {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.recon-topbar__user {
  color: var(--ink-tertiary);
  font-size: 12px;
  padding: var(--space-2) var(--space-3);
  border-left: 1px solid var(--line);
  margin-left: var(--space-1);
}
.recon-topbar button {
  background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--line);
  padding: 6px 12px; border-radius: var(--radius-md);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.recon-topbar button:hover { border-color: var(--line-strong); color: var(--ink-primary); }

.recon-topbar__crumb { color: var(--ink-tertiary); font-weight: 400; font-size: 14px; }
.recon-topbar__crumb a { color: var(--ink-tertiary); padding: 0; }
.recon-topbar__crumb a:hover { color: var(--ink-secondary); background: transparent; }

/* ------------------------------ Topbar menu ------------------------------ */
.recon-menu { position: relative; display: inline-block; }
.recon-menu__trigger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--line);
  padding: 6px 10px; border-radius: var(--radius-md);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.recon-menu__trigger:hover { border-color: var(--line-strong); color: var(--ink-primary); }
.recon-menu__trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recon-menu__email { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recon-menu__chevron { transition: transform var(--dur-fast) var(--ease-out); flex-shrink: 0; }
.recon-menu__trigger[aria-expanded="true"] .recon-menu__chevron { transform: rotate(180deg); }

.recon-menu__popover {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px;
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--elev-pop);
  padding: var(--space-1); z-index: 50;
  display: flex; flex-direction: column;
}
.recon-menu__popover[hidden] { display: none; }

.recon-menu__item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  background: transparent; color: var(--ink-primary);
  border: 0; padding: 8px 12px; border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
.recon-menu__item:hover { background: var(--surface-hover); color: var(--ink-primary); }
.recon-menu__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recon-menu__item--button { font-size: 13px; }

.recon-menu__divider {
  height: 1px; background: var(--line);
  margin: var(--space-1) 0;
}

/* ---- Platform module switcher ---- */
.module-switcher__label { font-weight: 500; }
.module-switcher__popover { min-width: 220px; }
.module-switcher__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
}
.module-switcher__item--current {
  background: var(--surface-muted);
  color: var(--ink-primary);
  cursor: default;
}
.module-switcher__item--disabled {
  color: var(--ink-tertiary);
  cursor: not-allowed;
}
.module-switcher__item--disabled:hover {
  background: transparent;
  color: var(--ink-tertiary);
}
.module-switcher__badge {
  font-size: 10px; font-weight: 500;
  padding: 2px 6px; border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--ink-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.module-switcher__badge--current {
  background: var(--accent-soft, var(--surface-muted));
  color: var(--accent, var(--ink-secondary));
}
.module-switcher__badge--trial {
  background: var(--surface-muted);
  color: var(--ink-secondary);
}
.module-switcher__badge--soon,
.module-switcher__badge--upgrade {
  background: transparent;
  border: 1px solid var(--line);
}

/* ------------------------------ Chat layout ------------------------------ */
/* Activity moved to a slide-in drawer; the main grid is now single-column
   so the transcript reads at a comfortable width without an empty 280px
   sidebar lurking on the right. */
.recon {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  padding: var(--space-6); max-width: 960px; margin: 0 auto;
}
#transcript {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-height: 60vh;
  box-shadow: var(--elev-1);
}

/* Activity panel — slide-in drawer, fixed to the right edge. Mirrors
   the History panel pattern so the SCO has consistent muscle memory:
   topbar toggle on the right opens a drawer on the right. */
.recon-activity {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 100vw;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--elev-pop);
  padding: var(--space-4);
  overflow-y: auto;
  z-index: 40;
  display: flex; flex-direction: column;
  font-size: 13px; color: var(--ink-secondary);
}
.recon-activity[hidden] { display: none; }
.recon-activity__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.recon-activity__header h2 {
  margin: 0;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-tertiary);
}
.recon-activity__close {
  background: transparent; border: 0;
  font-size: 20px; line-height: 1;
  color: var(--ink-tertiary); cursor: pointer;
  padding: 0 6px;
}
.recon-activity__close:hover { color: var(--ink-primary); }
.recon-activity__close:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.recon-activity__list { list-style: none; padding: 0; margin: 0; }
.recon-activity__empty {
  margin: var(--space-4) 0;
  font-size: 12px; color: var(--ink-tertiary); text-align: center;
}

/* Topbar activity toggle — matches the History toggle styling. */
.recon-activity__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--line);
  padding: 6px 10px; border-radius: var(--radius-md);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
}
.recon-activity__toggle:hover { border-color: var(--line-strong); color: var(--ink-primary); }
.recon-activity__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Inline progress hint above the transcript — always visible during a
   turn so the SCO sees progress without expanding the drawer. */
.activity-progress--inline {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-2) 0;
  padding: 4px var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-variant-numeric: tabular-nums;
}
.activity-progress--drawer {
  margin: 0 0 var(--space-3) 0;
  font-variant-numeric: tabular-nums;
}

.recon-placeholder { color: var(--ink-tertiary); }

/* ------------------------------ Intake panel ----------------------------- */
.intake {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.intake[hidden] { display: none; }

.intake__hint-lead { margin: 0; }

/* Recent-cases cards — appear on the empty intake when history isn't
   empty. Lets the SCO open or re-screen a recent case without going
   through the History drawer. */
.intake__recent {
  display: block; padding: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-3);
}
.intake__recent[hidden] { display: none; }
.intake__recent-title {
  font-size: 11px; font-weight: 600; color: var(--ink-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 0 0 var(--space-2) 0;
}
.intake__recent-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}
.intake__recent-item {
  display: flex; align-items: stretch;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.intake__recent-item--red    { border-left-color: var(--bad); }
.intake__recent-item--amber  { border-left-color: var(--warn); }
.intake__recent-item--green  { border-left-color: var(--good); }
.intake__recent-open {
  flex: 1;
  background: transparent; border: 0;
  display: flex; flex-direction: column;
  padding: var(--space-2) var(--space-3); gap: 4px;
  text-align: left; cursor: pointer;
  font: inherit;
}
.intake__recent-open:hover { background: var(--surface-hover); }
.intake__recent-open:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.intake__recent-subject {
  font-size: 13px; font-weight: 600; color: var(--ink-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.intake__recent-meta {
  display: flex; gap: 6px; align-items: center;
  font-size: 11px; color: var(--ink-tertiary);
}
.intake__recent-type { font-style: italic; }
.intake__recent-date { margin-left: auto; }
.intake__recent-rescreen {
  background: transparent; border: 0; border-left: 1px solid var(--line);
  color: var(--ink-tertiary); cursor: pointer;
  font-size: 14px; padding: 0 12px;
}
.intake__recent-rescreen:hover { background: var(--accent-soft); color: var(--accent); }
.intake__recent-rescreen:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Research-template chip row. Each chip pre-sets the LLM's research
   instructions for one canonical SCO workflow (Standard / Quick screen /
   Comprehensive EDD / Vessel deep dive / PEP + family / Adverse media
   focus / Trade risk / 50% Rule). Now lives inside a <details> disclosure
   to keep the empty state calm — first-run SCO doesn't see 8 buttons. */
.intake__template-disclosure {
  padding-top: var(--space-2);
  margin-top: 0;
}
.intake__template-summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-secondary);
  padding: 4px 8px; border-radius: var(--radius-md);
  user-select: none;
}
.intake__template-summary::-webkit-details-marker { display: none; }
.intake__template-summary:hover { background: var(--surface-hover); }
.intake__template-summary:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}
.intake__template-summary strong {
  color: var(--ink-primary); font-weight: 600;
}
.intake__template-chevron {
  font-size: 10px; color: var(--ink-tertiary);
  transition: transform var(--dur-fast, 120ms) var(--ease-out, ease);
}
.intake__template-disclosure[open] .intake__template-chevron {
  transform: rotate(180deg);
}

.intake__templates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  margin: 0;
  border-top: 1px dashed var(--line);
}
.intake__templates-label {
  font-size: 11px; font-weight: 600; color: var(--ink-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: var(--space-1);
}
.intake__template {
  background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.intake__template:hover { border-color: var(--line-strong); color: var(--ink-primary); }
.intake__template:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.intake__template[aria-checked="true"] {
  background: var(--surface-selected);
  border-color: var(--line-strong);
  color: var(--ink-primary);
}

.intake__type-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-2);
}
.intake__type {
  background: transparent;
  color: var(--ink-secondary);
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.intake__type:hover { background: var(--surface-hover); color: var(--ink-primary); }
.intake__type:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.intake__type[aria-selected="true"] {
  background: var(--surface-selected);
  color: var(--ink-primary);
  border-color: var(--line-strong);
}

.intake__form { display: contents; }
.intake__fields { border: 0; padding: 0; margin: 0; }
.intake__fields[hidden] { display: none; }

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

/* Compare mode — two stacked columns showing Subject A and Subject B
   side by side for alias-collision research. Mobile collapses to one
   column inside the existing 768px breakpoint. */
.intake__compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.intake__compare-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.intake__compare-heading {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.intake__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.intake__field--wide { grid-column: 1 / -1; }
.intake__field > span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-secondary);
}
.intake__field > span em {
  color: var(--ink-warn, #b45309);
  font-style: normal;
  margin-left: 2px;
}
.intake__field input,
.intake__field textarea {
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font: inherit; font-size: 13px;
}
.intake__field input:focus-visible,
.intake__field textarea:focus-visible {
  outline: none; border-color: var(--line-strong);
  box-shadow: var(--focus-ring);
}
.intake__field input:invalid:not(:placeholder-shown) {
  border-color: var(--ink-warn, #b45309);
}

/* Inline error above Start research (a missing key field, an empty batch). */
.intake__error {
  margin: 0 0 var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--bad);
  border-radius: var(--radius-md);
  background: var(--bad-soft);
  color: var(--bad);
  font-size: 13px;
}
.intake__error[hidden] { display: none; }
.intake__field [aria-invalid="true"] { border-color: var(--bad); }

.intake__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.intake__submit {
  background: var(--ink-primary); color: var(--surface);
  border: 1px solid var(--ink-primary);
  padding: 8px 16px; border-radius: var(--radius-md);
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.intake__submit:hover { opacity: 0.92; }
.intake__submit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.intake__hint { font-size: 12px; color: var(--ink-tertiary); }
.intake__hint em { font-style: normal; color: var(--ink-warn, #b45309); }

/* ----------------------------- Coverage banner --------------------------- */
.coverage-banner {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
}
.coverage-banner__group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.coverage-banner__label {
  font-weight: 600;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.coverage-banner__group--covered .coverage-banner__label { color: var(--good); }
.coverage-banner__group--missing .coverage-banner__label { color: var(--warn); }
.coverage-banner__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.coverage-banner__group--covered .coverage-banner__chip {
  background: var(--good-soft); color: var(--good); border-color: transparent;
}
.coverage-banner__group--missing .coverage-banner__chip {
  background: var(--warn-soft); color: var(--warn); border-color: transparent;
}
.coverage-banner__group--covered .coverage-banner__chip--stale {
  background: var(--warn-soft); color: var(--warn);
}
.coverage-banner__group--covered .coverage-banner__chip--unknown {
  background: var(--surface-subtle); color: var(--ink-secondary); border-color: var(--line);
}
.coverage-banner__note { color: var(--ink-tertiary); font-style: italic; }

/* ------------------------------ Risk banner ------------------------------ */
.risk-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-3) 0;
  border: 1px solid transparent;
  font-size: 13px;
}
.risk-banner__dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.risk-banner__label { font-weight: 600; }
.risk-banner__reason { color: var(--ink-secondary); font-weight: 400; }
.risk-banner--red {
  background: var(--bad-soft); border-color: var(--bad); color: var(--bad);
}
.risk-banner--red .risk-banner__dot { background: var(--bad); }
.risk-banner--amber {
  background: var(--warn-soft); border-color: var(--warn); color: var(--warn);
}
.risk-banner--amber .risk-banner__dot { background: var(--warn); }
.risk-banner--green {
  background: var(--good-soft); border-color: var(--good); color: var(--good);
}
.risk-banner--green .risk-banner__dot { background: var(--good); }
.risk-banner--unknown {
  background: var(--surface-muted); border-color: var(--line);
  color: var(--ink-secondary);
}
.risk-banner--unknown .risk-banner__dot { background: var(--ink-tertiary); }
/* Neutral, never green: no hit reported, but a core list was not searched. */
.risk-banner--incomplete {
  background: var(--surface-muted); border-color: var(--ink-secondary);
  border-style: dashed; color: var(--ink-primary);
}
.risk-banner--incomplete .risk-banner__dot {
  background: transparent; border: 2px solid var(--ink-secondary);
}

/* Coverage row directly under the verdict on every live brief. */
.brief-coverage {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: calc(-1 * var(--space-1)) 0 var(--space-3) 0;
  font-size: 12px; color: var(--ink-secondary);
}
.brief-coverage .recon-coverage { margin-top: 0; }

/* ------------------------- Source-strength chips ------------------------- */
.chip {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid transparent;
  white-space: nowrap;
  vertical-align: baseline;
}
.chip::before {
  content: ""; display: inline-block;
  margin-right: 4px; font-weight: 700;
}
.chip--confirmed { background: var(--good-soft); color: var(--good); }
.chip--confirmed::before { content: "✓"; }
.chip--primary { background: var(--warn-soft); color: var(--warn); }
.chip--primary::before { content: "⊕"; }
.chip--secondary {
  background: var(--surface-muted); color: var(--ink-secondary);
  border-color: var(--line);
}
.chip--secondary::before { content: "⊖"; }
.chip--unverified { background: var(--bad-soft); color: var(--bad); }
.chip--unverified::before { content: "?"; }

/* ------------------------ Footnote hover tooltips ------------------------ */
.footnote-host { position: relative; display: inline-block; }
.footnote-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  max-width: 360px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-pop);
  font-size: 12px;
  color: var(--ink-primary);
  pointer-events: auto;
}
.footnote-host:hover .footnote-popover,
.footnote-host:focus-within .footnote-popover { display: flex; }
.footnote-popover strong { color: var(--ink-primary); font-size: 12px; }
.footnote-popover__title { color: var(--ink-secondary); }
.footnote-popover__url {
  color: var(--link, #2563eb);
  word-break: break-all;
  font-size: 11px;
}
.footnote-popover__ts {
  color: var(--ink-tertiary);
  font-size: 11px;
  font-style: italic;
}

.sources-panel {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  font-size: 13px;
  box-shadow: var(--elev-1);
}
.sources-panel > summary {
  cursor: pointer;
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--ink-secondary);
  list-style: revert;
  padding: var(--space-1) 0;
}
.sources-panel__title { font-weight: 600; color: var(--ink-primary); }
.sources-panel__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-tertiary);
}
.sources-panel__hint {
  margin: var(--space-2) 0;
  color: var(--ink-tertiary);
  font-size: 12px;
}
.sources-panel__group {
  border: 0; padding: var(--space-2) 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-1) var(--space-4);
}
.sources-panel__group legend {
  grid-column: 1 / -1;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-tertiary);
  padding: var(--space-2) 0 2px;
}
.sources-panel .check {
  display: flex; align-items: center; gap: var(--space-2);
  cursor: pointer;
  padding: 2px 0;
  color: var(--ink-secondary);
}
.sources-panel .check--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.sources-panel .check small {
  color: var(--ink-tertiary);
  font-size: 11px;
  margin-left: var(--space-1);
}

/* Follow-up suggestion chips — appear above the composer after a brief
   renders. Click pre-fills the composer textarea (does not auto-send).
   Scoped to the brief's entity_type so the suggestions match the SCO's
   next likely question. */
.follow-up-chips {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.follow-up-chips[hidden] { display: none; }
.follow-up-chips__label {
  font-size: 11px; font-weight: 600; color: var(--ink-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding-top: 6px;
  flex-shrink: 0;
}
.follow-up-chips__list {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1;
}
.follow-up-chips__chip {
  background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: 12px;
  text-align: left;
  max-width: 100%;
  transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease),
              background var(--dur-fast, 120ms) var(--ease-out, ease),
              color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.follow-up-chips__chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink-primary);
}
.follow-up-chips__chip:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

#composer {
  grid-column: 1 / -1; display: flex; gap: var(--space-2); margin-top: var(--space-2);
}
#composer textarea {
  flex: 1; background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 10px 12px;
  font: inherit; resize: vertical; min-height: 56px;
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#composer textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
#composer button {
  background: var(--accent); color: var(--text-on-accent);
  border: 1px solid var(--accent); border-radius: var(--radius-md);
  padding: 0 var(--space-4); font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
#composer button:hover { background: #98782f; border-color: #98782f; }
#composer button[disabled] { opacity: 0.4; cursor: not-allowed; }
#composer button[type="button"] {
  background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--line);
}
#composer button[type="button"]:hover {
  background: var(--surface-muted); color: var(--ink-primary); border-color: var(--line-strong);
}

/* ------------------------------ Chat bubbles ------------------------------ */
.bubble {
  max-width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
  line-height: 1.55;
  word-wrap: break-word;
}
.bubble--user {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--ink-primary);
  white-space: pre-wrap;
}
.bubble--assistant {
  background: transparent;
  border-left: 3px solid var(--accent);
  padding-left: var(--space-4);
  color: var(--ink-primary);
}
.bubble--assistant h1, .bubble--assistant h2 {
  margin-top: var(--space-4); font-size: 18px; color: var(--ink-primary); font-weight: 700;
}
.bubble--assistant h3 {
  margin-top: var(--space-3); font-size: 15px; color: var(--accent); font-weight: 700;
}
.bubble--assistant p { margin: var(--space-2) 0; }
.bubble--assistant code {
  background: var(--surface-muted);
  font-family: var(--font-mono);
  padding: 1px 5px; border-radius: var(--radius-sm);
  font-size: 0.92em;
  border: 1px solid var(--line);
}
.bubble--assistant pre {
  background: var(--surface-muted);
  font-family: var(--font-mono);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow-x: auto;
}
.bubble--assistant a { color: var(--accent); text-decoration: underline; }

/* ------------------------------ Activity cards ------------------------------ */
#activity h2 {
  margin: 0 0 var(--space-3);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-tertiary);
}
#activity-list { list-style: none; padding: 0; margin: 0; }
.activity-progress {
  margin: 0 0 var(--space-2) 0;
  font-size: 12px;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.activity-progress[hidden] { display: none; }
/* Dense one-line cards: status glyph + friendly label + tool-name as a
   muted hint that truncates with ellipsis when the drawer is narrow.
   Citations fold into a <details> below — default collapsed so a
   25-tool turn stays scannable. */
.activity-card {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 4px var(--space-3);
  margin-bottom: 4px;
  font-size: 13px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
}
.activity-card__label {
  color: var(--ink-primary); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.activity-card__name {
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 140px;
  justify-self: end;
}
.activity-card__status { color: var(--good); font-weight: 700; }
.activity-card--running .activity-card__spinner {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}
.activity-card--error { border-color: var(--bad); background: var(--bad-soft); }
.activity-card--error .activity-card__status { color: var(--bad); }
.activity-card__details {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 12px;
}
.activity-card__details-summary {
  cursor: pointer; list-style: none;
  color: var(--ink-tertiary);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 0;
}
.activity-card__details-summary::-webkit-details-marker { display: none; }
.activity-card__details-summary::before {
  content: "▸"; font-size: 10px;
  transition: transform var(--dur-fast, 120ms) var(--ease-out, ease);
  display: inline-block;
}
.activity-card__details[open] .activity-card__details-summary::before {
  transform: rotate(90deg);
}
.activity-card__details-summary:hover { color: var(--ink-secondary); }
.activity-card__citations {
  margin: 4px 0 0; padding-left: 18px;
  color: var(--ink-tertiary); font-size: 12px;
}
.activity-card__citations a { color: var(--accent); }
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1); }
}

/* ------------------------------ Footnotes + Sources ------------------------------ */
.footnote-ref {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85em;
  padding: 0 2px;
  vertical-align: super;
  line-height: 1;
}
.footnote-ref:hover { text-decoration: underline; }
.bubble__sources {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
  font-size: 13px;
  color: var(--ink-tertiary);
}
.bubble__sources h4 {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-tertiary);
}
.bubble__sources ol { padding-left: var(--space-6); margin: 0; }
.bubble__sources li { margin: var(--space-1) 0; }
.bubble__sources a { color: var(--accent); }
.cite-snippet { color: var(--ink-tertiary); font-style: italic; }

/* ------------------------------ Toast ------------------------------ */
#toast-host {
  position: fixed;
  top: var(--space-4); right: var(--space-4);
  z-index: 1000;
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: 360px;
}
.toast {
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--bad);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-pop);
  color: var(--ink-primary);
  font-size: 13px;
  animation: toast-in 0.18s ease-out;
}
.toast strong { color: var(--bad); font-family: var(--font-mono); font-size: 12px; }
.toast span { flex: 1; color: var(--ink-secondary); }
.toast button {
  background: transparent; border: 0; color: var(--ink-tertiary);
  cursor: pointer; font-size: 18px; line-height: 1;
}
@keyframes toast-in {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ------------------------------ Admin pages ------------------------------ */
.recon-admin {
  padding: var(--space-6); max-width: 1280px; margin: 0 auto;
}
.admin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.admin-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--elev-1);
}
.admin-card h2 {
  margin: 0 0 var(--space-3);
  font-size: 14px; font-weight: 700; color: var(--ink-primary);
}
.admin-card dl { margin: 0; font-size: 13px; }
.admin-card dt {
  color: var(--ink-tertiary);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: var(--space-2);
}
.admin-card dd { margin: 2px 0 var(--space-2); color: var(--ink-primary); }
.admin-card code { font-family: var(--font-mono); font-size: 12px; }
.admin-card a { color: var(--accent); text-decoration: none; font-weight: 500; }
.admin-card a:hover { text-decoration: underline; }

.admin-section { padding: var(--space-6) 0; }
.admin-section h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: var(--ink-primary);
  letter-spacing: -0.01em;
}
.admin-section__header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-4);
}
.admin-section__meta { color: var(--ink-tertiary); font-size: 13px; }
.admin-section__hint { color: var(--ink-tertiary); font-size: 13px; margin-top: var(--space-4); }
.admin-section__hint a { color: var(--accent); }
.admin-section__hint code { font-family: var(--font-mono); font-size: 12px; }

.admin-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--elev-1);
}
.admin-table th, .admin-table td {
  padding: var(--space-3) var(--space-4); text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.admin-table th {
  color: var(--ink-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-muted);
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--surface-hover); }
.admin-table__when {
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: 12px;
}
.admin-table__actions { display: flex; gap: var(--space-2); }
.admin-table a { color: var(--accent); text-decoration: none; }
.admin-table a:hover { text-decoration: underline; }
.admin-table code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }

.role-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.role-pill--analyst { background: var(--surface-muted); color: var(--ink-secondary); }
.role-pill--client_admin { background: var(--accent-soft); color: var(--accent); }
.role-pill--vendor_admin { background: var(--bad-soft); color: var(--bad); }

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-muted); color: var(--ink-secondary);
}
.badge--accent { background: var(--accent-soft); color: var(--accent); }

.inline-form { display: inline-flex; gap: var(--space-1); align-items: center; margin: 0; }
.inline-form select {
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 6px;
  font: inherit; font-size: 12px;
}
.inline-form button {
  background: var(--accent); color: var(--text-on-accent);
  border: 1px solid var(--accent);
  padding: 4px 10px; border-radius: var(--radius-sm);
  font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.inline-form button:hover { background: #98782f; border-color: #98782f; }
.inline-form button.danger {
  background: var(--surface); color: var(--bad);
  border: 1px solid var(--line);
}
.inline-form button.danger:hover { border-color: var(--bad); background: var(--bad-soft); }

.recon-impersonation-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: var(--bad-soft);
  border-bottom: 1px solid var(--bad);
  color: var(--ink-primary);
  font-size: 13px;
}
.recon-impersonation-banner code {
  color: var(--bad);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* ------------------------------ Settings form ------------------------------ */
.settings-form {
  display: flex; flex-direction: column; gap: var(--space-5);
  max-width: 720px;
}
.settings-form fieldset {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
}
.settings-form legend {
  padding: 0 var(--space-2);
  color: var(--ink-tertiary);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.settings-form label {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin-bottom: var(--space-3);
  font-size: 13px; color: var(--ink-primary);
}
.settings-form label > span { color: var(--ink-tertiary); font-size: 12px; font-weight: 500; }
.settings-form input[type="text"],
.settings-form input[type="number"],
.settings-form select,
.settings-form textarea {
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 8px 10px;
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.settings-form input:focus-visible,
.settings-form select:focus-visible,
.settings-form textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.settings-form textarea {
  resize: vertical;
  font-family: var(--font-mono); font-size: 12px;
}
.settings-form__hint {
  color: var(--ink-tertiary);
  font-size: 12px;
  margin: var(--space-2) 0 var(--space-3);
}
.settings-form__hint code { font-family: var(--font-mono); font-size: 12px; }
.settings-form__hint strong { color: var(--ink-primary); }
.settings-form__checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-1);
}
.settings-form__sources-group { margin: 0 0 var(--space-3); }
.settings-form__sources-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ink-tertiary);
  margin: var(--space-2) 0 var(--space-1);
}
.settings-form__sources-tool {
  margin-left: auto;
  color: var(--ink-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.8;
}
.check {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 13px; color: var(--ink-secondary);
}
.check input { margin: 0; accent-color: var(--accent); }
.settings-form__actions {
  display: flex; gap: var(--space-2); justify-content: flex-end;
}
.settings-form__actions button {
  background: var(--accent); color: var(--text-on-accent);
  border: 1px solid var(--accent); border-radius: var(--radius-md);
  padding: 8px 16px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.settings-form__actions button:hover { background: #98782f; border-color: #98782f; }

/* ------------------------------ Usage / KPI ------------------------------ */
.usage-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
}
.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--elev-1);
}
.kpi h3 {
  margin: 0 0 var(--space-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-tertiary);
}
.kpi p {
  margin: 0; font-size: 26px;
  color: var(--ink-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ Audit + Health ------------------------------ */
.audit-filter {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-3) 0;
  font-size: 13px;
}
.audit-filter select {
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 6px 10px;
  font: inherit; font-size: 13px;
}
.audit-filter a { color: var(--accent); font-size: 12px; font-weight: 500; }
.audit-diff {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-top: var(--space-2);
}
.audit-diff pre {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  font-size: 11px;
  font-family: var(--font-mono);
  max-height: 240px;
  overflow: auto;
  color: var(--ink-primary);
}
.audit-diff__before { border-left: 3px solid var(--bad); }
.audit-diff__after { border-left: 3px solid var(--good); }
.admin-pagination {
  display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: 13px;
  color: var(--ink-tertiary);
}
.admin-pagination a { color: var(--accent); text-decoration: none; font-weight: 500; }
.admin-pagination a:hover { text-decoration: underline; }
.ok-dot { color: var(--good); }
.err-dot { color: var(--bad); }

/* ------------------------------ Invite form ------------------------------ */
.invite-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  box-shadow: var(--elev-1);
}
.invite-form h3 {
  margin: 0 0 var(--space-1);
  font-size: 14px; font-weight: 700; color: var(--ink-primary);
}
.invite-form__hint {
  color: var(--ink-tertiary); font-size: 12px;
  margin: 0 0 var(--space-3);
}
.invite-form__hint code { font-family: var(--font-mono); font-size: 12px; }
.invite-form__row {
  display: grid; grid-template-columns: 1fr 160px auto;
  gap: var(--space-3);
  align-items: end;
}
.invite-form input,
.invite-form select {
  width: 100%;
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 8px 10px;
  font: inherit; font-size: 13px;
}
.invite-form label {
  display: flex; flex-direction: column; gap: var(--space-1);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-tertiary);
}
.invite-form button {
  background: var(--accent); color: var(--text-on-accent);
  border: 1px solid var(--accent); border-radius: var(--radius-md);
  padding: 8px 14px; font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.invite-form button:hover { background: #98782f; border-color: #98782f; }

/* ------------------------------ Brief actions ------------------------------ */
/* The bar sits inside the brief bubble it acts on (app.js bindBriefActions).
   Other briefs show a button that moves it under them. */
.bubble--brief #brief-actions { margin: var(--space-3) 0 0 0; }
.brief-bind {
  margin-top: var(--space-2);
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.brief-bind:hover { border-color: var(--line-strong); }
.brief-bind:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bubble--brief-active > .brief-bind { display: none; }
/* Filing result, kept with its brief even if the bar moves mid-upload. */
.brief-filing-status {
  margin: var(--space-2) 0 0 0; font-size: 12px; color: var(--ink-secondary);
}
.brief-filing-status:empty { display: none; }
.brief-filing-status.evidence-file__status--error { color: var(--bad); }
.brief-actions__notice {
  flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ink-secondary);
}
.evidence-link--unmatched { display: inline-block; margin-top: var(--space-2); font-size: 13px; }
#brief-actions {
  grid-column: 1 / -1;
  display: flex; gap: var(--space-3);
  align-items: center; flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  margin-top: var(--space-2);
}
#brief-actions #brief-meta {
  color: var(--ink-tertiary);
  font-size: 13px;
}
#brief-actions #download-pdf,
#brief-actions .evidence-link {
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 6px 12px;
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  text-decoration: none; display: inline-block;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
#brief-actions #download-pdf:hover,
#brief-actions .evidence-link:hover {
  border-color: var(--accent); color: var(--accent);
}

/* "File to case…" — browser-mediated attach to AEGIS / Gauntlet. */
#brief-actions .evidence-file {
  display: flex; gap: var(--space-2);
  align-items: center; flex-wrap: wrap;
}
#brief-actions .evidence-file__label {
  color: var(--ink-tertiary);
  font-size: 13px;
}
#brief-actions .evidence-file__btn {
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 6px 12px;
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
#brief-actions .evidence-file__btn:hover {
  border-color: var(--accent); color: var(--accent);
}
#brief-actions .evidence-file__status {
  font-size: 12px;
  color: var(--ink-secondary);
}
#brief-actions .evidence-file__status--error {
  color: var(--error);
}
#brief-actions .evidence-file__form {
  display: inline-flex; gap: var(--space-2); align-items: center;
}
#brief-actions .evidence-file__form[hidden] { display: none; }
#brief-actions .evidence-file__input {
  font: inherit; font-size: 13px;
  padding: 6px 10px; min-width: 14rem;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-primary);
}
#brief-actions .evidence-file__input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* Print header is invisible on screen — only the printed page sees it. */
#print-header { display: none; }

/* ---------------------------- Disposition output --------------------------- */
.disposition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.disposition[hidden] { display: none; }
.disposition__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.disposition__btn {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-primary);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.disposition__btn:hover { border-color: var(--line-strong); }
.disposition__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.disposition__btn--fp:hover {
  background: var(--good-soft); border-color: var(--good); color: var(--good);
}
.disposition__btn--review:hover {
  background: var(--warn-soft); border-color: var(--warn); color: var(--warn);
}
.disposition__btn--match:hover {
  background: var(--bad-soft); border-color: var(--bad); color: var(--bad);
}

.disposition-form {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.disposition-form[hidden] { display: none; }
.disposition-form__heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-primary);
  display: block;
  margin-bottom: var(--space-1);
}
.disposition-form textarea {
  width: 100%; box-sizing: border-box;
  background: var(--surface); color: var(--ink-primary);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 8px 10px;
  font: inherit; font-size: 13px; line-height: 1.5;
  resize: vertical;
  min-height: 80px;
}
.disposition-form textarea:focus-visible {
  outline: none; border-color: var(--line-strong); box-shadow: var(--focus-ring);
}
.disposition-form__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.disposition-form__primary {
  background: var(--ink-primary); color: var(--surface);
  border: 1px solid var(--ink-primary);
  padding: 6px 14px; border-radius: var(--radius-md);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.disposition-form__primary:hover { opacity: 0.92; }
.disposition-form__primary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.disposition-form__secondary {
  background: transparent; color: var(--ink-secondary);
  border: 1px solid var(--line);
  padding: 6px 14px; border-radius: var(--radius-md);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.disposition-form__secondary:hover { border-color: var(--line-strong); color: var(--ink-primary); }
.disposition-form__secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.disposition-output {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.disposition-output[hidden] { display: none; }
.disposition-output__heading {
  margin: 0 0 var(--space-1) 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-primary);
}
.disposition-output__hint {
  margin: 0 0 var(--space-2) 0;
  font-size: 12px;
  color: var(--ink-tertiary);
  font-style: italic;
}
.disposition-output pre {
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  font-family: var(--font-mono, JetBrains Mono, monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}
.disposition-output__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ----------------------------- OFAC actions pill -------------------------- */
.ofac-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 999px;
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  white-space: nowrap;
  transition: border-color var(--dur-fast, 120ms) var(--ease-out, ease);
}
.ofac-pill[hidden] { display: none; }
.ofac-pill:hover { border-color: var(--line-strong); color: var(--ink-primary); }
.ofac-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ofac-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--good); flex-shrink: 0;
}
.ofac-pill--stale {
  background: var(--warn-soft); border-color: var(--warn); color: var(--warn);
}
.ofac-pill--stale .ofac-pill__dot {
  background: var(--warn);
  animation: ofac-pill-pulse 1.6s ease-in-out infinite;
}
@keyframes ofac-pill-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* ----------------------------- Brief history ------------------------------ */
.recon-history__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface); color: var(--ink-secondary);
  border: 1px solid var(--line);
  padding: 6px 10px; border-radius: var(--radius-md);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
  margin-right: var(--space-2);
}
.recon-history__toggle:hover { border-color: var(--line-strong); color: var(--ink-primary); }
.recon-history__toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.recon-history {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--elev-pop);
  z-index: 70;
  display: flex; flex-direction: column;
  padding: var(--space-4);
}
.recon-history[hidden] { display: none; }
.recon-history__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.recon-history__header h2 {
  margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-primary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.recon-history__close {
  background: transparent; border: 0; color: var(--ink-tertiary);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius-md);
}
.recon-history__close:hover { color: var(--ink-primary); background: var(--surface-hover); }
.recon-history__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recon-history__hint {
  margin: 0 0 var(--space-3) 0;
  font-size: 11px;
  color: var(--ink-tertiary);
  font-style: italic;
  line-height: 1.4;
}
.recon-history__list {
  list-style: none; padding: 0; margin: 0;
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-1);
}
.recon-history__item {
  display: flex; align-items: stretch;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  border-left-width: 3px;
}
.recon-history__item--red { border-left-color: var(--bad); }
.recon-history__item--amber { border-left-color: var(--warn); }
.recon-history__item--green { border-left-color: var(--good); }
.recon-history__item--unknown { border-left-color: var(--ink-tertiary); }
.recon-history__item--incomplete { border-left-color: var(--ink-secondary); border-left-style: dashed; }
.recon-history__open {
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--ink-primary);
}
.recon-history__open:hover { background: var(--surface-hover); }
.recon-history__open:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recon-history__subject {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recon-history__row {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: 11px; color: var(--ink-secondary);
  align-items: baseline;
}
.recon-history__tier {
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  font-size: 10px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-muted);
}
.recon-history__tier[data-tier="red"] { background: var(--bad-soft); color: var(--bad); }
.recon-history__tier[data-tier="amber"] { background: var(--warn-soft); color: var(--warn); }
.recon-history__tier[data-tier="green"] { background: var(--good-soft); color: var(--good); }
.recon-history__type {
  font-style: italic;
}
.recon-history__date { margin-left: auto; color: var(--ink-tertiary); }

/* Watchlist coverage chip row — audit-defensibility at a glance.
 * Renders inside the history list row, and again above the brief body
 * in the viewer modal. INTERPOL is permanently the "miss" chip until
 * coverage exists. */
.recon-coverage {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.recon-coverage--unknown {
  font-size: 11px; color: var(--ink-tertiary); font-style: italic;
}
.recon-coverage__chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px 6px;
  font-size: 10px; font-weight: 600;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid transparent;
}
.recon-coverage__chip--hit {
  background: var(--good-soft); color: var(--good);
  border-color: var(--good);
}
.recon-coverage__chip--miss {
  background: transparent; color: var(--ink-tertiary);
  border-color: var(--line);
  text-decoration: line-through;
}
.recon-coverage__mark { font-size: 10px; }
.recon-history__viewer-coverage {
  margin: 0 0 var(--space-3) 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.recon-history__rescreen {
  background: transparent; border: 0; border-left: 1px solid var(--line);
  color: var(--ink-tertiary); cursor: pointer;
  font-size: 14px; padding: 0 12px;
}
.recon-history__rescreen:hover { background: var(--accent-soft, var(--surface-hover)); color: var(--accent, var(--ink-primary)); }
.recon-history__rescreen:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recon-history__delete {
  background: transparent; border: 0; border-left: 1px solid var(--line);
  color: var(--ink-tertiary); cursor: pointer;
  font-size: 16px; padding: 0 12px;
}
.recon-history__delete:hover { background: var(--bad-soft); color: var(--bad); }
.recon-history__delete:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recon-history__empty {
  margin: var(--space-4) 0;
  font-size: 12px; color: var(--ink-tertiary); text-align: center;
}
.recon-history__footer {
  margin-top: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.recon-history__ofac-watch {
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 8px 12px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.recon-history__ofac-watch:hover { filter: brightness(1.05); }
.recon-history__ofac-watch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recon-history__ofac-watch-meta {
  font-size: 11px; font-weight: 400; color: var(--ink-secondary);
}
.recon-history__export {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 12px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.recon-history__export:hover {
  background: var(--surface-hover); border-color: var(--accent);
}
.recon-history__export:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recon-history__export-meta {
  font-size: 11px; font-weight: 400; color: var(--ink-secondary);
}
.recon-history__select {
  display: inline-flex; align-items: center; padding: 0 6px;
  cursor: pointer;
}
.recon-history__select-input {
  cursor: pointer; accent-color: var(--accent);
}
.recon-history__clear {
  background: transparent; color: var(--ink-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 12px; font: inherit; font-size: 12px;
  cursor: pointer; width: 100%;
}
.recon-history__clear:hover {
  background: var(--bad-soft); color: var(--bad); border-color: var(--bad);
}
.recon-history__clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Brief viewer modal — opens when an item is clicked. */
.recon-history-viewer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--surface-overlay);
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.recon-history-viewer[hidden] { display: none; }
.recon-history-viewer__panel {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--elev-pop);
  max-width: 800px; width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
}
.recon-history-viewer__header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.recon-history-viewer__header h2 {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-primary);
  padding-right: 40px;
}
.recon-history-viewer__meta {
  margin: 4px 0 0; font-size: 12px; color: var(--ink-tertiary);
}
.recon-history-viewer__close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  background: transparent; border: 0; color: var(--ink-tertiary);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 10px;
  border-radius: var(--radius-md);
}
.recon-history-viewer__close:hover { color: var(--ink-primary); background: var(--surface-hover); }
.recon-history-viewer__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recon-history-viewer__body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
  font-size: 13px; line-height: 1.55; color: var(--ink-primary);
}
.recon-history-viewer__body h1 { font-size: 18px; margin: 0 0 var(--space-2); }
.recon-history-viewer__body h2 {
  font-size: 14px; font-weight: 600; margin: var(--space-3) 0 var(--space-1);
  color: var(--ink-primary);
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.recon-history-viewer__body h3 { font-size: 13px; font-weight: 600; margin: var(--space-2) 0 4px; }
.recon-history-viewer__body p { margin: 0 0 var(--space-2); }
.recon-history-viewer__body ul, .recon-history-viewer__body ol { padding-left: 24px; margin: 0 0 var(--space-2); }
.recon-history-viewer__body table { border-collapse: collapse; width: 100%; margin: var(--space-2) 0; font-size: 12px; }
.recon-history-viewer__body th, .recon-history-viewer__body td {
  border: 1px solid var(--line); padding: 4px 8px; text-align: left;
}
.recon-history-viewer__body th { background: var(--surface-subtle); font-weight: 600; }

/* ------------------------------ Bulk queue ------------------------------ */
.bulk-queue {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-3);
}
.bulk-queue[hidden] { display: none; }
.bulk-queue__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-2);
}
.bulk-queue__header h2 {
  margin: 0; font-size: 13px; font-weight: 600;
  color: var(--ink-primary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.bulk-queue__cancel {
  background: transparent; color: var(--bad);
  border: 1px solid var(--line);
  padding: 4px 12px; border-radius: var(--radius-md);
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 500;
}
.bulk-queue__cancel:hover {
  background: var(--bad-soft); border-color: var(--bad);
}
.bulk-queue__cancel:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.bulk-queue__progress {
  margin: 0 0 var(--space-2) 0;
  font-size: 12px; color: var(--ink-secondary);
}
.bulk-queue__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto;
}
.bulk-queue__item {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 8px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 12px;
}
.bulk-queue__state {
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 600; font-size: 10px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-muted); color: var(--ink-tertiary);
  flex-shrink: 0;
}
.bulk-queue__item--running .bulk-queue__state {
  background: var(--warn-soft); color: var(--warn);
}
.bulk-queue__item--done .bulk-queue__state {
  background: var(--good-soft); color: var(--good);
}
.bulk-queue__subject {
  color: var(--ink-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.intake__hint--warn { color: var(--warn); font-size: 12px; }


/* ------------------------------ Mobile (≤ 768px) ------------------------------ */
@media (max-width: 768px) {

  /* Chat shell: collapse the activity sidebar; stack everything. */
  .recon {
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    gap: var(--space-3);
    /* Leave room for the sticky composer at the bottom. */
    padding-bottom: 140px;
  }
  #transcript {
    padding: var(--space-4);
    min-height: auto;
    order: 1;
  }
  /* Activity drawer goes full-width on mobile (same pattern as History). */
  .recon-activity { width: 100vw; padding: var(--space-3); }
  .recon-activity__toggle { min-height: 44px; }

  /* Composer becomes sticky at the bottom — primary action on mobile. */
  #composer {
    order: 3;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px env(safe-area-inset-bottom, 10px);
    margin: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
    z-index: 20;
    flex-wrap: wrap;
  }
  #composer textarea {
    /* Min 44px touch target for the affordance, but textarea can grow. */
    min-height: 44px;
    /* iOS Safari triggers zoom on focus when font-size < 16px. */
    font-size: 16px;
  }
  #composer button {
    min-height: 44px;
    padding: 0 14px;
  }

  /* Intake: collapse to one column, bigger touch targets, no iOS zoom. */
  .intake { padding: var(--space-3); }
  .intake__grid { grid-template-columns: 1fr; }
  .intake__compare-grid { grid-template-columns: 1fr; }
  .intake__field input,
  .intake__field textarea {
    min-height: 44px;
    font-size: 16px;
  }
  .intake__type { min-height: 44px; padding: 0 14px; }
  .intake__submit { min-height: 44px; padding: 0 18px; }

  /* Coverage banner: stack groups vertically. */
  .coverage-banner { flex-direction: column; align-items: flex-start; }

  /* Footnote popovers don't fit on phones; the [N] anchor still works
     (scrolls to the Citations section). Hide the hover popup on touch. */
  .footnote-popover { display: none !important; }

  /* Disposition buttons: 44px touch targets, stack vertically. */
  .disposition { flex-direction: column; align-items: stretch; }
  .disposition__btn { min-height: 44px; padding: 0 14px; }
  .disposition-form__primary,
  .disposition-form__secondary { min-height: 44px; }
  .disposition-form textarea { font-size: 16px; }

  /* History panel: full-width slide-in on mobile. */
  .recon-history { width: 100vw; padding: var(--space-3); }
  .recon-history__toggle { min-height: 44px; }
  .recon-history__open { padding: var(--space-2); }
  .recon-history__delete { padding: 0 16px; }
  .recon-history-viewer { padding: 0; }
  .recon-history-viewer__panel { max-height: 100vh; border-radius: 0; }

  /* Topbar: wrap, allow nav to flow, keep brand visible. */
  .recon-topbar {
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }
  .recon-topbar h1 { font-size: 14px; }
  .recon-topbar nav { flex-wrap: wrap; gap: 6px; }
  .recon-topbar a {
    padding: var(--space-2) var(--space-3);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .recon-topbar__user {
    font-size: 12px;
    border-left: 0;
    padding-left: 0;
  }
  .recon-topbar button {
    min-height: 44px;
    padding: 0 var(--space-3);
  }
  /* Crumb gets noisy on tiny screens — hide it. */
  .recon-topbar__crumb { display: none; }

  /* Menu: trigger keeps 44px touch target; popover stays anchored right. */
  .recon-menu__trigger { min-height: 44px; padding: 0 var(--space-3); }
  .recon-menu__email { max-width: 140px; }
  .recon-menu__item { min-height: 44px; display: flex; align-items: center; }

  /* Admin pages — collapse the grid, let tables scroll horizontally. */
  .recon-admin { padding: var(--space-3); }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-card { padding: var(--space-4); }
  .admin-section { padding: var(--space-4) 0; }
  .admin-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .admin-table thead,
  .admin-table tbody { display: table; width: 100%; min-width: 600px; }
  .admin-table__actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .inline-form button { min-height: 36px; padding: 6px 10px; }

  /* Settings form: full-width controls. */
  .settings-form input,
  .settings-form select,
  .settings-form textarea {
    width: 100%;
    font-size: 16px;  /* No iOS focus zoom. */
  }
  .settings-form__checks { grid-template-columns: 1fr; }

  /* Login card uses most of the viewport. */
  .recon-login {
    margin: 5vh 12px;
    max-width: none;
    padding: var(--space-6) var(--space-4);
  }
  .recon-login input,
  .recon-login .sso-btn,
  .recon-login button {
    min-height: 44px;
    font-size: 16px;
  }

  /* Brief actions wrap onto multiple lines below the brief. */
  #brief-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #brief-actions #download-pdf,
  #brief-actions .evidence-link {
    text-align: center;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Impersonation banner: stack the message + Stop button. */
  .recon-impersonation-banner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
  }
}

/* ------------------------------ Print ------------------------------ */
@media print {
  /* Make all backgrounds / borders / chip colours actually print —
     Chrome / Edge strip them by default. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  @page {
    size: A4;
    margin: 18mm 16mm 22mm 16mm;
    @bottom-right { content: "Page " counter(page) " / " counter(pages); font-size: 9pt; color: #666; }
    @bottom-left { content: "Recon — Sanctions Research Brief · For internal compliance research only"; font-size: 8pt; color: #888; }
  }

  /* Reset page background; force readable body type. */
  html, body {
    background: #fff !important;
    color: #111 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  /* Hide ALL chrome. The printed report is the brief, the print header,
     and nothing else. */
  .recon-topbar,
  .recon-menu,
  .recon-history,
  .recon-history-viewer,
  #activity,
  #intake,
  #bulk-queue,
  #coverage-banner,
  #composer,
  #brief-actions,
  #follow-up-chips,
  #toast-host,
  .sources-panel,
  .recon-impersonation-banner { display: none !important; }

  /* Reveal the print-only header at the top of the first page. */
  #print-header {
    display: block !important;
    border-bottom: 2px solid #111;
    padding-bottom: 10px;
    margin: 0 0 18px 0;
  }
  #print-header h1 {
    margin: 0; font-size: 20pt; color: #111;
    font-family: Georgia, "Times New Roman", serif;
  }
  #print-header #print-meta {
    margin: 6px 0 0; font-size: 10pt; color: #444;
  }
  #print-header #print-meta strong { color: #111; font-weight: 600; }

  /* Main grid → single column so the brief flows full width. */
  .recon {
    display: block !important;
    padding: 0 !important;
    max-width: none !important;
  }
  #transcript {
    background: #fff !important; border: 0 !important; padding: 0 !important;
    box-shadow: none !important;
    max-height: none !important; overflow: visible !important;
  }

  /* Hide every bubble EXCEPT the brief the action bar is bound to (the one
     Download as PDF was pressed on). Also hide the per-turn sources aside —
     it duplicates the brief's own Citations section. */
  .bubble { display: none !important; }
  .bubble.bubble--brief.bubble--brief-active { display: block !important; }
  .brief-bind,
  .brief-filing-status,
  .evidence-link--unmatched { display: none !important; }
  .bubble.bubble--brief {
    background: #fff !important; color: #111 !important;
    border: 0 !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important; max-width: none !important;
  }
  .bubble.bubble--brief .bubble__sources { display: none !important; }

  /* Brief typography. */
  .bubble--brief h1 { font-size: 18pt; margin: 16pt 0 8pt; color: #111; }
  .bubble--brief h2 {
    font-size: 13pt;
    margin: 14pt 0 6pt;
    color: #111;
    border-bottom: 1px solid #999;
    padding-bottom: 3pt;
    page-break-after: avoid;
  }
  .bubble--brief h3 { font-size: 11.5pt; margin: 10pt 0 4pt; color: #111; }
  .bubble--brief p { margin: 0 0 6pt; }
  .bubble--brief ul, .bubble--brief ol { margin: 4pt 0 8pt 18pt; padding: 0; }
  .bubble--brief li { margin-bottom: 3pt; page-break-inside: avoid; }
  .bubble--brief h1, .bubble--brief h2, .bubble--brief h3,
  .bubble--brief p, .bubble--brief li { page-break-inside: avoid; }

  /* Tables: render as proper report tables, not the raw pipe-text the
     LLM produces. */
  .bubble--brief table {
    width: 100%;
    border-collapse: collapse;
    margin: 8pt 0;
    font-size: 9.5pt;
    page-break-inside: auto;
  }
  .bubble--brief thead { display: table-header-group; }
  .bubble--brief tr { page-break-inside: avoid; }
  .bubble--brief th, .bubble--brief td {
    border: 1px solid #999;
    padding: 4pt 6pt;
    text-align: left;
    vertical-align: top;
  }
  .bubble--brief th {
    background: #f0f0f0 !important;
    font-weight: 600;
    color: #111;
  }

  /* Risk banner: print with its colour band so high-risk briefs stay
     visually flagged. Solid left band + soft tint. */
  .bubble--brief .risk-banner {
    display: flex !important;
    align-items: baseline;
    gap: 8pt;
    margin: 0 0 12pt 0;
    padding: 8pt 10pt;
    border: 1px solid #ccc;
    border-left-width: 4pt;
    border-radius: 2pt;
    page-break-inside: avoid;
    font-size: 10.5pt;
  }
  .bubble--brief .risk-banner__dot { display: none !important; }
  .bubble--brief .risk-banner__label { font-weight: 700; }
  .bubble--brief .risk-banner__reason { color: #444; font-weight: 400; }
  .bubble--brief .risk-banner--red {
    background: #fdecea !important; border-color: #b91c1c !important; color: #7a1313 !important;
  }
  .bubble--brief .risk-banner--amber {
    background: #fff5db !important; border-color: #b45309 !important; color: #6b3504 !important;
  }
  .bubble--brief .risk-banner--green {
    background: #e8f5ec !important; border-color: #047857 !important; color: #054d36 !important;
  }
  .bubble--brief .risk-banner--unknown {
    background: #f3f4f6 !important; border-color: #6b7280 !important; color: #374151 !important;
  }
  .bubble--brief .risk-banner--incomplete {
    background: #fff !important; border: 1px dashed #374151 !important; color: #111 !important;
  }
  .bubble--brief .brief-coverage { font-size: 9pt; color: #333 !important; margin: 0 0 8pt 0; }

  /* Source-strength chips: print as compact inline labels with their tint. */
  .bubble--brief .chip {
    display: inline-block;
    padding: 0 6pt;
    margin: 0 2pt;
    border-radius: 8pt;
    font-size: 8.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid;
  }
  .bubble--brief .chip--confirmed {
    background: #e8f5ec !important; color: #054d36 !important; border-color: #a5d6b6 !important;
  }
  .bubble--brief .chip--primary {
    background: #fff5db !important; color: #6b3504 !important; border-color: #e6c97a !important;
  }
  .bubble--brief .chip--secondary {
    background: #f3f4f6 !important; color: #374151 !important; border-color: #d1d5db !important;
  }
  .bubble--brief .chip--unverified {
    background: #fdecea !important; color: #7a1313 !important; border-color: #e6a5a5 !important;
  }

  /* Footnote refs print as plain superscript-style brackets. */
  .bubble--brief .footnote-host,
  .bubble--brief .footnote-ref {
    text-decoration: none !important;
    color: #111 !important;
    font-weight: 500;
  }
  .bubble--brief .footnote-popover { display: none !important; }

  /* Links: black + underline. Don't print full URLs after every link —
     it doubled the citation noise. The brief's Citations section is
     where URLs belong. */
  .bubble--brief a {
    color: #111 !important;
    text-decoration: underline;
  }
}

/* ------------------------------------------------------------------
   Unified suite rail (_rail.html) — Phase 3. Recon gains the same left
   rail as the Bulwark hub + Gauntlet: suite brand, a persistent list of
   owned modules (Recon marked current; siblings link out), un-owned
   modules behind "Explore modules", account menu in the foot. The chat
   surface + its turn-scoped drawers (Activity/History, fixed to the
   viewport right edge) are unchanged. Token-driven — palette-locked.
   ------------------------------------------------------------------ */
.recon-shell { display: flex; align-items: stretch; min-height: 100vh; }
.recon-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.recon-rail {
  flex: 0 0 240px; width: 240px;
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 30;
}
.recon-rail__brand {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.recon-rail__wm {
  display: flex; flex-direction: column; line-height: 1.1;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  color: var(--ink-primary);
}
.recon-rail__wm small {
  font-weight: 500; font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-tertiary);
}
.recon-rail__scroll {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
}

.recon-mod {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--ink-secondary); text-decoration: none;
  font-size: 13px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a.recon-mod:hover { background: var(--surface-muted); color: var(--ink-primary); }
.recon-mod--current { color: var(--ink-primary); font-weight: 600; }
.recon-mod__glyph { width: 20px; text-align: center; color: var(--accent); flex: 0 0 auto; }
.recon-mod__name { flex: 1 1 auto; }
.recon-mod__verb {
  font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-tertiary); font-weight: 600;
}
.recon-mod__verb--trial { color: var(--accent); }

.recon-rail__div { height: 1px; background: var(--line); margin: var(--space-2) var(--space-3); }

.recon-explore { position: relative; }
.recon-explore__trigger {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-2) var(--space-3);
  background: none; border: none; cursor: pointer;
  color: var(--ink-tertiary); border-radius: var(--radius-md);
  font-size: 12px; font-weight: 600; text-align: left;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.recon-explore__trigger:hover { background: var(--surface-muted); color: var(--ink-secondary); }
.recon-explore__plus { font-size: 14px; line-height: 1; }
.recon-explore__popover {
  position: absolute; left: var(--space-3); right: var(--space-3);
  bottom: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--elev-pop);
  padding: var(--space-1); z-index: 40;
}
.recon-explore__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--ink-tertiary); font-size: 13px;
}
.recon-explore__badge {
  margin-left: auto; font-size: 8px; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 1px 6px; border-radius: 8px;
  border: 1px solid var(--line); color: var(--ink-tertiary);
}

.recon-rail__foot {
  border-top: 1px solid var(--line);
  padding: var(--space-3);
}
.recon-rail__foot .recon-menu { display: block; }
.recon-rail__foot .recon-menu__trigger { width: 100%; }
/* Rail-foot popover opens upward (the trigger sits at the bottom). */
.recon-menu__popover--up { top: auto; bottom: calc(100% + 6px); }

/* On narrow viewports the rail collapses to a slim brand strip above the
   column so the chat keeps the full width (the fixed Activity/History
   drawers already go full-screen there). */
@media (max-width: 720px) {
  .recon-shell { flex-direction: column; }
  .recon-rail {
    flex-basis: auto; width: 100%; height: auto;
    position: static;
    flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .recon-rail__brand { border-bottom: none; padding: var(--space-3) var(--space-4); }
  .recon-rail__scroll { flex-direction: row; align-items: center; padding: var(--space-2); }
  .recon-rail__div { display: none; }
  .recon-rail__foot { border-top: none; margin-left: auto; }
}

/* Carried-subject chip (Phase 4, cross-module hand-off). Sits in the chat
   topbar when a sibling module hands off an entity via ?subject=. Populated +
   toggled by app.js (initCarriedSubject); token-driven, palette-locked. */
.carried-subject {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 3px 6px 3px 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: 999px; font-size: 12px; color: var(--ink-secondary);
  max-width: 360px; min-width: 0;
}
.carried-subject__icon { color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.carried-subject__label {
  font-weight: 600; color: var(--ink-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.carried-subject__dismiss {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  color: var(--ink-tertiary); font-size: 15px; line-height: 1;
  padding: 0 2px; border-radius: var(--radius-sm);
}
.carried-subject__dismiss:hover { color: var(--ink-primary); background: var(--surface-muted); }

/* Command palette (⌘K, Phase 4). Unified suite affordance mirroring Bulwark's
   .ui-cmdk. Token-driven (palette-locked); driven by app.js initCommandPalette. */
.ui-cmdk-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: var(--surface-overlay, rgba(15, 23, 42, 0.45));
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.ui-cmdk[hidden], .ui-cmdk-backdrop[hidden] { display: none; }
.ui-cmdk {
  width: min(560px, 92vw); max-height: 70vh;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--elev-pop);
  display: flex; flex-direction: column; overflow: hidden;
}
.ui-cmdk__input-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); border-bottom: 1px solid var(--line);
  color: var(--ink-tertiary);
}
.ui-cmdk__input {
  flex: 1; border: none; outline: none; background: none;
  font-size: 15px; color: var(--ink-primary); font-family: inherit;
}
.ui-cmdk__input::placeholder { color: var(--ink-placeholder); }
.ui-cmdk__results { overflow-y: auto; padding: var(--space-2); }
.ui-cmdk__group { margin-bottom: var(--space-2); }
.ui-cmdk__group-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-tertiary);
  padding: var(--space-2) var(--space-3) var(--space-1);
}
.ui-cmdk__item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border: none; background: none;
  border-radius: var(--radius-md); cursor: pointer; text-align: left;
  color: var(--ink-secondary);
}
.ui-cmdk__item.is-selected { background: var(--accent-soft); color: var(--accent); }
.ui-cmdk__item-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ui-cmdk__item-title { font-size: 13px; font-weight: 600; color: var(--ink-primary); }
.ui-cmdk__item.is-selected .ui-cmdk__item-title { color: var(--accent); }
.ui-cmdk__item-sub {
  font-size: 11px; color: var(--ink-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-cmdk__item-hint {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-tertiary); flex: 0 0 auto;
}
.ui-cmdk__empty { padding: var(--space-6); text-align: center; color: var(--ink-tertiary); font-size: 13px; }
.ui-cmdk__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-tertiary);
}
.ui-cmdk__foot kbd {
  font-family: var(--font-mono); font-size: 10px;
  background: var(--surface-muted); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1px 5px; margin: 0 1px;
}

/* RECON_DEV_ALLOW_NON_ZDR banner (templates/base.html). Shown on every page
   while model calls run without a Zero Data Retention attestation, which
   config.py allows only when RECON_ENV=dev. */
.dev-zdr-banner {
  padding: 8px 16px;
  background: var(--bad-soft);
  color: var(--bad);
  border-bottom: 1px solid var(--bad);
  font-size: 13px;
  text-align: center;
}