/* ── Variables ─────────────────────────────────────────── */
:root {
  --ink:        #0d1626;
  --ink2:       #111d33;
  --ink3:       #18253f;
  --ink4:       #1f2e49;
  --ink5:       #273755;
  --line:       rgba(160,120,32,0.12);
  --line2:      rgba(160,120,32,0.18);
  --line3:      rgba(160,120,32,0.32);
  --gold:       #a27920;
  --gold-lt:    #c19828;
  --gold-dim:   rgba(160,120,32,0.10);
  --gold-glow:  rgba(160,120,32,0.25);
  --smoke:      #e8eaf0;
  --smoke2:     #9aa3b4;
  --smoke3:     #758098;
  --smoke4:     #6a81a9;
  --green:      #329159;
  --green-lt:   #3db36e;
  --red:        #d85353;
  --red-lt:     #d65648;
  --amber:      #a4790d;
  --amber-lt:   #c49a16;

  --sidebar:    312px;
  --topbar:     56px;
  --botbar:     64px;

  /* ONE TYPEFACE FOR ALL TEXT.
     Tim: "i dont like multiple fonts. especially when one of them looks like a damn typewriter in
     1970. all the text should be the same font and that font should be the more modern font on the
     screen like the example." The example was .kc-group-desc, which is var(--f-body) = Outfit.

     Four families were in play: Cormorant Garamond (serif headings), DM Mono (the typewriter, 414
     usages), Outfit and Jost. They are all Outfit now.

     ⚠ THE VARIABLES ARE KEPT rather than collapsed to one. 500+ rules reference them by name, and
     rewriting every rule would be 500 chances to break a selector for a change that is really one
     decision. Keeping the names also means a single line brings any of them back -- if a table of
     figures turns out to need real monospace alignment, --f-mono is where that is restored, and
     only the rules that genuinely align will get it.

     ⚠ THE BRAND MARK IS EXEMPT and pinned in main-2-shell-sidebar.css: .lcard-front-wordmark keeps
     Cormorant Garamond. The JUSHI wordmark is a logo, not text, and flattening it into the UI font
     would change the brand rather than the typography. */
  /* ⚠ INTER, NOT OUTFIT. Tim on the headings: "is it just me or is that font the headers are in
     look like a childrens book". He was right, and it was not the size -- OUTFIT IS A GEOMETRIC
     SANS: its o, a and g are near-perfect circles. At 11px body text that reads clean, which is
     why the sample he approved looked right; at 28px in a light weight those circles read soft
     and juvenile, and no amount of tracking fixes the shape of a letterform.

     Inter is drawn for interfaces: narrower apertures, less circular bowls, a taller x-height.
     It reads as software rather than as a consumer app, and it stays clean at 11px. Still ONE
     typeface, as asked -- only the face changed. */
  --f-display:  'Inter', system-ui, sans-serif;
  --f-mono:     'Inter', system-ui, sans-serif;
  --f-body:     'Inter', system-ui, sans-serif;
  --f-ui:       'Inter', system-ui, sans-serif;

  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --r:          6px;
  --r2:         10px;
  /* Surface colors — component backgrounds */
  --surface:    #111d33;   /* card / elevated surface (dark mode = ink2) */
  --surface2:   #18253f;   /* slightly lighter surface */
  --surface3:   #1f2e49;   /* even lighter */
  --surface-text: #e8eaf0; /* primary text on surface (= smoke) */
  --ink-deep:   #0d1626;   /* deepest background */
  --border-strong: rgba(160,120,32,0.45); /* strong border */
  --border-dark:   rgba(160,120,32,0.25); /* medium border */
  --accent:     #4b83c0;   /* accent blue (light mode secondary) */
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  height: 100%; overflow: hidden;
  background: var(--ink);
  color: var(--smoke);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* ── Topographic SVG overlay ───────────────────────────── */
#topo-overlay {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden; opacity: 0.60;
}
#topo-overlay svg { width: 100%; height: 100%; }

/* Topographic overlay is gold line-work designed for a dark bg. On light bg
   it reads as muddy yellow against off-white. Hide it in light mode — the
   login page is cleaner without it anyway. */
body[data-theme="light"] #topo-overlay { display: none; }

/* Grain texture */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}
body[data-theme="light"]::before { opacity: 0.5; }

/* ── Gold metal variables ───────────────────────────────── */
:root {
  --gold-metal-1: #e8c560;  /* bright highlight */
  --gold-metal-2: #c19828;  /* warm mid */
  --gold-metal-3: #ba8e1f;  /* base gold */
  --gold-metal-4: #ae840f;  /* shadow gold */
  --gold-shine: linear-gradient(105deg,
    transparent 20%,
    rgba(210,175,90,0.08) 35%,
    rgba(210,175,90,0.18) 45%,
    rgba(210,175,90,0.08) 55%,
    transparent 70%
  );
}

/* ── Light mode overrides ─────────────────────────────────
   Activated by `data-theme="light"` on <body>. Scoped entirely through
   CSS variables so every component that uses var(--gold), var(--smoke),
   etc. picks up the right color automatically with no per-component code.

   Palette: deep steel blue + cool greys replace the gold + warm greys.

   CONTRAST, CORRECTED 2026-07-27. This block used to claim "Every contrast pair
   has been checked to pass WCAG AA (4.5:1) for body text and 3:1 for large text
   / non-text elements." That was FALSE, and measurably so -- computed from these
   very token values against the page background:
     DARK  (--ink #0d1626): 10 of 17 text tokens below 4.5:1
     LIGHT (--ink #EEF3FA):  8 of 17 text tokens below 4.5:1
   Four of them are below even the 3:1 large-text floor. The worst offender is
   --smoke4 at 1.58:1 in dark mode, and it is used as a TEXT COLOUR 242 times.
   --smoke3 is 3.01:1 across another 160.

   A comment asserting a control that does not hold is worse than no comment: it
   stops the next person checking. The real position is recorded in
   tests/unit/token-contrast-ratchet.test.mjs, which COMPUTES every ratio and
   pins the current values as a floor -- so no token can quietly get worse, and
   the remaining failures are tracked debt rather than a false claim.

   Tokens whose fix is visually imperceptible (<3% lightness change) have been
   corrected here. The rest change the product's appearance materially and are
   Tim's call, not a WCAG number's.
*/
body[data-theme="light"] {
  /* Backgrounds — near-white, aligned with the --surface* ramp below */
  /* LIGHT PALETTE CORRECTION 2026-07-26. The --ink* ramp was mid-grey
     (#B0BDD0 page, #A8B0BA cards) while the newer --surface* ramp below is
     pure white. Both are live: 118 rules use --ink*, 137 use --surface*, so
     the UI rendered white cards next to grey ones with only ~4% lightness
     between page and panel -- no depth hierarchy and a dingy cast over
     everything. This aligns the ink ramp with the surface ramp so the two
     systems agree: page slightly tinted, panels lighter, chips lightest.
     Every value keeps the same blue-grey hue, only lightness is corrected. */
  --ink:        #EEF3FA;   /* base page — barely-tinted near-white */
  --ink2:       #FFFFFF;   /* card / panel surface — white, matches --surface */
  --ink3:       #E4EDF8;   /* sunken / muted area — recedes below the page */
  --ink4:       #F2F6FC;   /* chip / pill */
  --ink5:       #E0EAF6;   /* hover state — visible against both page and card */

  /* Borders — soft sky-blue tint */
  --line:       rgba(60, 100, 145, 0.18);
  --line2:      rgba(60, 100, 145, 0.32);
  --line3:      rgba(60, 100, 145, 0.50);

  /* Primary accent — atmospheric blue, brighter and warmer than steel */
  --gold:       #2D5A8F;   /* deep sky — buttons, primary accents */
  --gold-lt:    #3b70ae;   /* brighter sky — hovers, highlights */
  --gold-dim:   rgba(74, 130, 194, 0.10);   /* very faint sky-blue tint */
  --gold-glow:  rgba(74, 130, 194, 0.28);   /* glow tint */

  /* Text — dark navies for contrast on light backgrounds.
     Tightened on May 3 — earlier values were too soft, text was getting
     lost against the pale cloud cards. These darker values pass WCAG AA
     on the atmospheric backgrounds. */
  --smoke:      #051324;   /* primary text — near-black navy, max contrast */
  --smoke2:     #1A3A5F;   /* secondary text — deep ocean navy, was #355072 */
  --smoke3:     #355072;   /* muted text — was #5B7395 */
  --smoke4:     #597092;   /* heavily muted */

  /* Status colors — darkened to remain readable on light bg */
  --green:      #157f3d;
  --green-lt:   #167f3d;
  --red:        #991B1B;
  --red-lt:     #d82323;
  --amber:      #B45309;
  --amber-lt:   #a65b05;

  /* Metallic gradient family — atmospheric sky version of the gold gradient */
  --gold-metal-1: #336aa3;   /* bright sky highlight */
  --gold-metal-2: #336298;   /* mid sky */
  --gold-metal-3: #2D5A8F;   /* base deep sky */
  --gold-metal-4: #1A3A5F;   /* shadow sky */
  --gold-shine: linear-gradient(105deg,
    transparent 20%,
    rgba(74, 130, 194, 0.08) 35%,
    rgba(74, 130, 194, 0.20) 45%,
    rgba(74, 130, 194, 0.08) 55%,
    transparent 70%
  );
  /* Surface colors — light mode equivalents */
  --surface:    #FFFFFF;     /* card background — pure white */
  --surface2:   #F2F6FC;     /* secondary card */
  --surface3:   #E4EDF8;     /* tertiary */
  --surface-text: #051324;   /* = smoke in light */
  --ink-deep:   #0F2540;     /* deepest dark in light = primary heading color */
  --border-strong: rgba(30,58,95,0.40); /* strong border */
  --border-dark:   rgba(30,58,95,0.22); /* medium border */
  --accent:     #3B6FA8;     /* accent blue */
}

/* Demo overlay stays dark regardless of theme. The cinematic 3D experience
   is not designed to work on a light field — the gold particles, the dark
   space, the glow-based visuals all depend on a black background. When the
   demo is active, we reset variables inside it back to their dark values.

   Same treatment for the login card in light mode — the card is a premium
   artifact with a heavy dark-first design (metallic gold frame, recessed
   vault effect, gold glows). Rebuilding it for light would lose the whole
   identity. In light mode, the card becomes a dark centerpiece surrounded
   by a light page — distinctive and still on-brand. */
body[data-theme="light"] .login-card,
body[data-theme="light"] .login-wordmark,
body[data-theme="light"] .login-sub,
body[data-theme="light"] .login-mark,
body[data-theme="light"] .login-frame-box {
  --ink:        #050810;
  --ink2:       #080d18;
  --ink3:       #0d1525;
  --ink4:       #131e30;
  --ink5:       #1a2840;
  --line:       rgba(160,120,32,0.12);
  --line2:      rgba(160,120,32,0.18);
  --line3:      rgba(160,120,32,0.32);
  --gold:       #a07820;
  --gold-lt:    var(--gold-lt);
  --gold-dim:   rgba(160,120,32,0.10);
  --gold-glow:  rgba(160,120,32,0.25);
  --smoke:      #e8eaf0;
  --smoke2:     #9aa3b4;
  --smoke3:     #5a6378;
  --smoke4:     #2e3a50;
  --gold-metal-1: var(--gold-lt);
  --gold-metal-2: var(--gold-lt);
  --gold-metal-3: var(--gold);
  --gold-metal-4: #5a4408;
}

/* ── Theme toggle button ──────────────────────────────────
   Small circular icon button, top-right of the login screen (and later of the
   main app chrome). Shows a moon in light mode (tap to switch to dark) and a
   sun in dark mode (tap to switch to light). */
/* ⚠ FINDING-052: THIS RULESET IS DEAD, AND IT IS A TRAP.
   `#theme-toggle` carries only `csp-mig-26` -- a 32px SQUARE, `border-radius: 4px`,
   `margin-left: 4px`, sitting INLINE in a flex row. Nothing matches `.theme-toggle`.

   The tempting fix for FINDING-052 was to add that class to the button. **Do not.** It
   would apply `position: fixed` at the top-right of the viewport and a 36px circle,
   relocating a control that is currently correctly placed. The icon rules below are
   repointed to the ID instead.

   Left in place rather than deleted: removing dead CSS across the whole app is
   FINDING-054's sweep, and doing it one ruleset at a time is how a stylesheet ends up
   half-migrated. The warning is what makes it safe to leave. */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background: var(--ink2);
  color: var(--smoke2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover {
  color: var(--gold);
  border-color: var(--line3);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
}
/* In dark mode, show the sun icon (click to switch TO light).
   In light mode, show the moon icon (click to switch TO dark). */
/* FINDING-052: THESE TARGETED `.theme-toggle`, WHICH THE BUTTON DOES NOT CARRY.
   index.html's `#theme-toggle` has exactly one class: `csp-mig-26`. So every one of these
   descendant rules was dead, and **both the moon and the sun rendered at once, in both
   themes** -- on every page load. The control looked broken even though the theme switch
   itself works (main-1-login-theme-2.css:363 targets `#theme-toggle` and does change the
   background).

   REPOINTED TO THE ID rather than adding the class to the button. See the warning on the
   `.theme-toggle` layout ruleset above: adopting that class would ALSO apply
   `position: fixed; top/right: 16px; 36px; border-radius: 50%`, tearing the button out of
   the inline flex row `csp-mig-26` places it in. The obvious one-word fix is a regression. */
body[data-theme="dark"] #theme-toggle .theme-toggle-moon { display: none; }
body[data-theme="light"] #theme-toggle .theme-toggle-sun { display: none; }
/* Default (no data-theme attr yet): show sun (initial script sets dark or light) */
body:not([data-theme="light"]) #theme-toggle .theme-toggle-moon { display: none; }

/* ── Light mode component overrides ─────────────────────────
   The variable-swap approach handles anything that uses var(--foo).
   These overrides handle the many components with HARDCODED dark colors
   in their gradients, shadows, and text that won't flip automatically.
   Each rule below replaces a dark-mode literal with a light-mode
   equivalent that preserves the design intent. */

/* Sidebar — dark sidebar becomes a subtle cool-grey panel.
   Uses !important on background because the original #sidebar rule sets
   heavy inset dark shadows that compete visually. */
body[data-theme="light"] #sidebar {
  background: linear-gradient(180deg, #0d1525 0%, var(--ink-deep) 100%) !important;
  box-shadow:
    inset -1px 0 0 rgba(160,120,32,0.15),
    4px 0 16px rgba(0,0,0,0.25) !important;
}
body[data-theme="light"] #sidebar::after {
  display: none !important;
}
body[data-theme="light"] .sb-nav,
body[data-theme="light"] .sb-depts,
body[data-theme="light"] .sb-footer {
  background: transparent !important;
}
body[data-theme="light"] #sb-nav,
body[data-theme="light"] #sb-depts {
  background: transparent !important;
}
body[data-theme="light"] #sidebar::before {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(160,120,32,0.20) 30%,
    rgba(160,120,32,0.35) 50%,
    rgba(160,120,32,0.20) 70%,
    transparent 100%
  );
  opacity: 0.6;
}

/* Sidebar toggle chevron */
body[data-theme="light"] #sb-toggle {
  background: linear-gradient(90deg, #0d1525 0%, var(--ink-deep) 100%);
  border-color: rgba(160,120,32,0.25);
  color: rgba(160,120,32,0.70);
}
body[data-theme="light"] #sb-toggle:hover {
  color: rgba(160,120,32,1.0);
  border-color: rgba(160,120,32,0.50);
}

/* Sidebar header — keep dark, matches overall sidebar */
body[data-theme="light"] .sb-header {
  background: linear-gradient(160deg, var(--ink-deep) 0%, #050810 100%);
}

/* Nav items — gold text on dark sidebar */
body[data-theme="light"] .nav-btn {
  color: rgba(160,120,32,0.65);
}
body[data-theme="light"] .nav-btn:hover {
  background: rgba(160,120,32,0.08);
  color: rgba(160,120,32,0.95);
  border-color: rgba(160,120,32,0.18);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
body[data-theme="light"] .nav-btn.active {
  background: rgba(160,120,32,0.12);
  color: var(--gold-lt);
  text-shadow: 0 0 12px rgba(160,120,32,0.3);
  border-color: transparent;
  border-bottom-color: rgba(160,120,32,0.30);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
body[data-theme="light"] .nav-btn::before {
  background: linear-gradient(90deg, transparent, rgba(160,120,32,0.6), rgba(160,120,32,0.4), transparent);
}

/* Department label */
body[data-theme="light"] .sb-divider,
body[data-theme="light"] .sb-section-label,
body[data-theme="light"] .sb-dept-label {
  color: rgba(160,120,32,0.40) !important;
  border-color: rgba(160,120,32,0.12) !important;
}

/* Department buttons */
body[data-theme="light"] .dept-btn {
  color: rgba(160,120,32,0.60);
}
body[data-theme="light"] .dept-btn:hover {
  color: rgba(160,120,32,0.90);
  border-color: rgba(160,120,32,0.15);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
body[data-theme="light"] .dept-btn.active {
  color: var(--gold-lt);
  text-shadow: 0 0 10px rgba(160,120,32,0.25);
  border-bottom-color: rgba(160,120,32,0.28);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}
body[data-theme="light"] .dept-btn::before {
  background: linear-gradient(90deg, transparent, rgba(160,120,32,0.5), transparent);
}

/* Sidebar footer */
body[data-theme="light"] .sb-footer {
  border-top: 1px solid rgba(160,120,32,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Topbar — dark in light mode to match sidebar */
body[data-theme="light"] #topbar {
  background: linear-gradient(180deg, #0d1525 0%, var(--ink-deep) 100%);
  border-bottom: 1px solid rgba(160,120,32,0.18);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* Bottom chat input bar — was dark with gold accent border.
   Now clean white with subtle border. */
body[data-theme="light"] .botbar,
body[data-theme="light"] #chat-composer,
body[data-theme="light"] .composer-wrap {
  background: var(--surface) !important;
  border-color: rgba(30, 58, 95, 0.15) !important;
  box-shadow: 0 -2px 8px rgba(30, 58, 95, 0.04) !important;
}

/* Main content area backgrounds — the circuit-board pattern was gold-tinted
   and reads muddy on light. Hide it in light mode. Actual class is
   chat-bg-overlay (confirmed via grep of DOM). */
body[data-theme="light"] #circuit-overlay,
body[data-theme="light"] .circuit-bg,
body[data-theme="light"] #main-circuit {
  display: none !important;
}

/* Light mode: light variant background,
   replace the dark ink wash with a light one so text stays readable. */
body[data-theme="light"] .chat-bg-overlay::before {
  background: url('JUSHILIGHT.webp') center center / cover no-repeat !important;
  opacity: 0.75 !important;
  filter: contrast(1.0) brightness(1.02) !important;
}
body[data-theme="light"] .chat-bg-overlay::after {
  /* Very subtle center wash — just enough to keep text readable against
     busy cloud pattern. Previous version was too heavy (opacity .55) and
     killed the sky. Now dialed way down so the image breathes. */
  background:
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(245, 247, 250, 0.18) 0%, rgba(245, 247, 250, 0.03) 100%),
    linear-gradient(180deg, rgba(245, 247, 250, 0.04) 0%, rgba(245, 247, 250, 0.10) 100%) !important;
}
/* SVG circuit lines on top of the image — these are gold-stroked and read as
   muddy yellow on light. Hide them. */
body[data-theme="light"] .chat-bg-overlay svg {
  display: none !important;
}
/* SVG circuit lines on top of the image — these are gold-stroked and read as
   muddy yellow on light. Hide them. */
body[data-theme="light"] .chat-bg-overlay svg {
  display: none !important;
}

/* Chat messages area base */
body[data-theme="light"] #chat-msgs,
body[data-theme="light"] .chat-messages {
  background: transparent;
}

/* Welcome / intro text in empty chat */
body[data-theme="light"] .chat-welcome,
body[data-theme="light"] .chat-intro,
body[data-theme="light"] .empty-chat-text {
  color: rgba(30, 58, 95, 0.75);
}

/* Input field */
body[data-theme="light"] #chat-input,
body[data-theme="light"] .chat-composer-input {
  background: var(--surface);
  color: var(--smoke);
  border-color: rgba(30, 58, 95, 0.18);
}
body[data-theme="light"] #chat-input::placeholder,
body[data-theme="light"] .chat-composer-input::placeholder {
  color: rgba(30, 58, 95, 0.40);
}

/* Watermark in the chat — tone it down */
body[data-theme="light"] .brand-watermark,
body[data-theme="light"] #brand-mark {
  opacity: 0.08;
  filter: none;
}

/* AI response bubbles — heather gray card with navy text and cyan accent.
   Gives the chat its own visual language distinct from raw white cards:
   the heather gray base feels grounded and warm, navy text is authoritative,
   and the cyan left-edge accent signals "CACI" without shouting. */
body[data-theme="light"] .msg.ai .msg-bubble {
  background: linear-gradient(180deg, var(--ink4) 0%, var(--ink4) 100%);
  border: 1px solid rgba(15, 23, 42, 0.14);
  color: var(--smoke);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  position: relative;
}
/* Cyan left-edge accent — subtle vertical bar that marks this as an AI
   response, echoing the gold accent in dark mode but in a color that
   reads right on heather gray. */
body[data-theme="light"] .msg.ai .msg-bubble::before {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(8, 145, 178, 0.45) 20%,
    rgba(6, 182, 212, 0.65) 50%,
    rgba(8, 145, 178, 0.45) 80%,
    transparent 100%
  ) !important;
  opacity: 1 !important;
  width: 2px !important;
  top: 12px !important;
  bottom: 12px !important;
  left: 0 !important;
  right: auto !important;
  height: auto !important;
}
body[data-theme="light"] .msg.ai .msg-bubble p,
body[data-theme="light"] .msg.ai .msg-bubble li {
  color: var(--smoke);
}
body[data-theme="light"] .msg.ai .msg-bubble h2,
body[data-theme="light"] .msg.ai .msg-bubble h3 {
  color: var(--smoke2) !important;
  font-weight: 500;
}
body[data-theme="light"] .msg.ai .msg-bubble strong {
  color: var(--smoke) !important;
  font-weight: 600;
}
body[data-theme="light"] .msg.ai .msg-bubble em {
  color: var(--ink-deep) !important;
}
/* Code inline — subtle darker heather with navy text */
body[data-theme="light"] .msg.ai .msg-bubble code {
  background: rgba(15, 23, 42, 0.08);
  color: var(--smoke);
  border: 1px solid rgba(15, 23, 42, 0.10);
}
/* Code blocks — slightly deeper than inline, with cyan-tinted border */
body[data-theme="light"] .msg.ai .msg-bubble pre {
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(8, 145, 178, 0.20);
}
body[data-theme="light"] .msg.ai .msg-bubble pre code {
  background: transparent;
  color: var(--smoke);
  border: none;
}
/* Links inside messages — cyan for that "technical AI" feel */
body[data-theme="light"] .msg.ai .msg-bubble a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(8, 145, 178, 0.35);
  text-underline-offset: 2px;
}
body[data-theme="light"] .msg.ai .msg-bubble a:hover {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* User message bubbles — deeper navy tint, visually distinct from the
   heather gray AI bubble. Feels like "your side of the conversation." */
body[data-theme="light"] .msg.user .msg-bubble {
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.12) 0%, rgba(30, 58, 95, 0.08) 100%);
  border: 1px solid rgba(30, 58, 95, 0.18);
  color: var(--smoke);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Message avatars (YOU / CACI circles) — heather gray base, navy text,
   cyan ring accent on the CACI avatar to tie it to the AI bubble style. */
body[data-theme="light"] .msg-av {
  background: linear-gradient(135deg, var(--ink4) 0%, var(--ink4) 100%);
  border: 1px solid rgba(15, 23, 42, 0.18);
  color: var(--smoke2);
}
body[data-theme="light"] .msg.ai .msg-av {
  border-color: rgba(8, 145, 178, 0.35);
  box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.08);
}

/* Scope/source small text under messages */
body[data-theme="light"] .msg-scope,
body[data-theme="light"] .msg-sources {
  color: rgba(30, 58, 95, 0.60);
}

/* Action buttons (Listen, Download, Save, Copy) */
body[data-theme="light"] .msg-action-btn {
  color: rgba(30, 58, 95, 0.65);
  border-color: rgba(30, 58, 95, 0.15);
  background: var(--surface);
}
body[data-theme="light"] .msg-action-btn:hover {
  color: var(--smoke2);
  border-color: rgba(30, 58, 95, 0.35);
  background: rgba(30, 58, 95, 0.04);
}
body[data-theme="light"] .spk-btn.playing {
  color: var(--smoke2) !important;
  border-color: rgba(30, 58, 95, 0.40) !important;
  background: rgba(30, 58, 95, 0.08) !important;
}

/* Top-bar dropdowns (COMPLIANCE ▼) and status pills (ONLINE, TIM KOSUGE) */
body[data-theme="light"] .tb-dept-btn,
body[data-theme="light"] .tb-status,
body[data-theme="light"] .tb-user,
body[data-theme="light"] .topbar-pill {
  background: var(--surface);
  color: var(--smoke2);
  border-color: rgba(30, 58, 95, 0.15);
}
body[data-theme="light"] .tb-dept-btn:hover,
body[data-theme="light"] .tb-user:hover {
  border-color: rgba(30, 58, 95, 0.30);
  background: rgba(30, 58, 95, 0.04);
}

/* "Switch Collection" button in the upper left */
body[data-theme="light"] #switch-collection-btn,
body[data-theme="light"] .switch-collection-btn {
  background: var(--surface);
  color: var(--smoke2);
  border-color: rgba(30, 58, 95, 0.18);
}

/* Typing indicator dots — subtle steel blue on light */
body[data-theme="light"] .typing-dot {
  background: rgba(30, 58, 95, 0.55);
}

/* Theme toggle button itself */
body[data-theme="light"] .theme-toggle {
  background: var(--surface);
  color: var(--smoke3);
  border-color: rgba(30, 58, 95, 0.25);
}
body[data-theme="light"] .theme-toggle:hover {
  color: var(--smoke2);
  border-color: rgba(30, 58, 95, 0.50);
  background: rgba(30, 58, 95, 0.05);
}

/* Modals and overlays */
body[data-theme="light"] .modal-overlay,
body[data-theme="light"] .overlay-backdrop {
  background: rgba(30, 58, 95, 0.35) !important;
}
body[data-theme="light"] .modal-card,
body[data-theme="light"] .modal-content {
  background: var(--surface);
  border: 1px solid rgba(30, 58, 95, 0.12);
  color: var(--smoke);
  box-shadow: 0 24px 60px rgba(30, 58, 95, 0.25);
}

/* Input elements generally */
body[data-theme="light"] input[type="text"],
body[data-theme="light"] input[type="email"],
body[data-theme="light"] input[type="password"],
body[data-theme="light"] input[type="search"],
body[data-theme="light"] textarea,
body[data-theme="light"] select {
  background: var(--surface);
  color: var(--smoke);
  border-color: rgba(30, 58, 95, 0.18);
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
  color: rgba(30, 58, 95, 0.40);
}
body[data-theme="light"] input:focus,
body[data-theme="light"] textarea:focus,
body[data-theme="light"] select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 111, 168, 0.18);
  outline: none;
}

/* File cards in the library */
body[data-theme="light"] .file-card,
body[data-theme="light"] .doc-card,
body[data-theme="light"] .collection-card {
  background: var(--surface);
  border-color: rgba(30, 58, 95, 0.12);
  color: var(--smoke);
  box-shadow: 0 1px 3px rgba(30, 58, 95, 0.05);
}
body[data-theme="light"] .file-card:hover,
body[data-theme="light"] .doc-card:hover {
  border-color: rgba(30, 58, 95, 0.25);
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
}

/* Tour spotlight overlay */
body[data-theme="light"] .tour-backdrop,
body[data-theme="light"] #tour-backdrop {
  background: rgba(30, 58, 95, 0.40);
}

/* Buttons generally */
body[data-theme="light"] .lbtn,
body[data-theme="light"] .btn-secondary {
  background: var(--surface);
  color: var(--smoke2);
  border: 1px solid rgba(30, 58, 95, 0.25);
}
body[data-theme="light"] .lbtn:hover,
body[data-theme="light"] .btn-secondary:hover {
  background: rgba(30, 58, 95, 0.06);
  border-color: rgba(30, 58, 95, 0.40);
}
body[data-theme="light"] .lbtn:disabled {
  color: rgba(30, 58, 95, 0.35);
  background: var(--surface3);
  cursor: not-allowed;
}

/* Section titles / section headers */
body[data-theme="light"] .section-title,
body[data-theme="light"] .asec-title,
body[data-theme="light"] .asec-sub-title {
  color: rgba(30, 58, 95, 0.70);
}

/* Card/panel bases — common pattern */
body[data-theme="light"] .scard,
body[data-theme="light"] .stat-card,
body[data-theme="light"] .info-card {
  background: var(--surface);
  border: 1px solid rgba(20,50,100,0.18);
  border-top-color: rgba(20,50,100,0.28);
  box-shadow: 0 3px 12px rgba(20,50,100,0.16), 0 1px 3px rgba(20,50,100,0.10), inset 0 1px 0 rgba(255,255,255,1.0);
  border-top-color: rgba(20,58,95,0.28);
  box-shadow:
    0 2px 6px rgba(30,58,95,0.09),
    inset 0 1px 0 rgba(255,255,255,0.90);
}
body[data-theme="light"] .scard-label,
body[data-theme="light"] .stat-label {
  color: rgba(30,58,95,0.60);
}
body[data-theme="light"] .scard-val,
body[data-theme="light"] .stat-val {
  color: var(--ink-deep);
}

/* Admin cards — acard was missing light mode override entirely */
body[data-theme="light"] .acard {
  background: var(--surface) !important;
  border: 1px solid rgba(20,50,100,0.18) !important;
  box-shadow: 0 3px 12px rgba(20,50,100,0.16), 0 1px 3px rgba(20,50,100,0.10), inset 0 1px 0 rgba(255,255,255,1.0) !important;
  border-top-color: rgba(30,58,95,0.28) !important;
  border-bottom-color: rgba(30,58,95,0.12) !important;
  box-shadow:
    0 2px 8px rgba(30,58,95,0.10),
    0 1px 2px rgba(30,58,95,0.06),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}
body[data-theme="light"] .acard::before {
  background: linear-gradient(90deg, transparent 5%, rgba(30,58,95,0.20) 25%, rgba(60,100,160,0.35) 50%, rgba(30,58,95,0.20) 75%, transparent 95%) !important;
}
body[data-theme="light"] .acard::after {
  background: linear-gradient(145deg, rgba(60,100,160,0.04) 0%, transparent 60%) !important;
}
body[data-theme="light"] .acard-title {
  color: var(--ink-deep) !important;
}
body[data-theme="light"] .acard-sub {
  color: rgba(30,58,95,0.55) !important;
}
body[data-theme="light"] .ainput {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%) !important;
  border-color: rgba(30,58,95,0.22) !important;
  color: var(--ink-deep) !important;
}
body[data-theme="light"] .asave {
  background: linear-gradient(160deg, var(--gold) 0%, var(--smoke2) 100%) !important;
  border-color: rgba(30,58,95,0.50) !important;
  color: var(--surface) !important;
}
body[data-theme="light"] .afb {
  color: var(--gold) !important;
}

/* Code blocks / pre elements anywhere */
body[data-theme="light"] pre,
body[data-theme="light"] code {
  background: var(--surface3);
  color: var(--smoke);
}

/* Tooltips and popovers */
body[data-theme="light"] .tooltip,
body[data-theme="light"] .popover {
  background: var(--smoke);
  color: var(--surface);
}

/* SKIP LINK (audit P23) -- visually hidden until it takes keyboard focus.
   Not `display:none` and not `visibility:hidden`: both remove the element from
   the focus order entirely, which would make the link unreachable and therefore
   useless. Positioning it off-canvas keeps it focusable, which is the whole
   point. On focus it slides into the top-left over everything. */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100000;
  padding: 10px 16px;
  border-radius: 0 0 6px 6px;
  background: var(--ink2);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top 0.15s ease-in;
}
.skip-to-content:focus {
  top: 0;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Ingest Quarantine count. Empty when zero, so a clean state shows nothing at all rather
   than a "0" the eye learns to skip. Amber, not red: a held source is awaiting a decision,
   not broken -- and after patch 282 it is also NOT being scraped, which is the fact worth
   surfacing. */
.quar-count-badge:not(:empty) {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #7a4c00;
  color: #ffd899;
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}