.sp-lib-item:last-child { border-bottom:none; }
.sp-lib-item-head { display:flex;align-items:center;gap:8px; }
.sp-lib-cat { font-family:var(--f-mono);font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);background:rgba(160,120,32,0.08);border:1px solid rgba(160,120,32,0.18);padding:1px 5px;border-radius:2px;flex-shrink:0; }
.sp-lib-title { font-size:12px;font-weight:400;color:var(--smoke);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1; }
.sp-lib-score { font-family:var(--f-mono);font-size:9px;color:var(--green-lt);flex-shrink:0; }
.sp-lib-meta { font-size:10px;color:var(--smoke3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.sp-lib-date { font-family:var(--f-mono);font-size:9px;color:var(--smoke4); }
.sp-lib-chips { display:flex;gap:4px;flex-wrap:wrap;margin-top:1px; }
.sp-lib-chip { font-size:9px;font-family:var(--f-ui);padding:1px 5px;border-radius:2px;border:1px solid rgba(160,120,32,0.15);color:var(--smoke3);background:rgba(0,0,0,0.2); }

#scenario-active-strip { display:none;align-items:center;gap:8px;padding:5px 12px;background:rgba(160,120,32,0.06);border-top:1px solid rgba(160,120,32,0.12);border-bottom:1px solid rgba(160,120,32,0.08); }
#scenario-active-strip.visible { display:flex; }
.sas-dot { width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;box-shadow:0 0 6px var(--gold-glow);animation:sasPulse 2s ease-in-out infinite; }
@keyframes sasPulse { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.85)} }
.sas-label { font-family:var(--f-mono);font-size:9px;letter-spacing:0.10em;text-transform:uppercase;color:var(--gold); }
.sas-value { font-size:10px;color:var(--smoke2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sas-end { font-size:9px;color:var(--smoke4);cursor:pointer;padding:2px 6px;border-radius:3px;border:1px solid transparent;transition:all 0.15s;font-family:var(--f-ui);letter-spacing:0.05em; }
.sas-end:hover { color:var(--smoke2);border-color:var(--line2);background:var(--gold-dim); }

/* ─────────────────────────────────────────────────────────
   LIGHT MODE: FINAL PASS OVERRIDES
   ─────────────────────────────────────────────────────────
   These rules sit at the end of the stylesheet and use extra-specific
   selectors to beat any stubborn earlier rules. They target the issues
   observed in screenshots: sidebar not going light, greeting text
   unreadable, eyebrow text missing.

   Chained body[data-theme="light"] selectors with multiple compound
   parts give specificity (0,3,1) — plenty to beat any single-id rule
   even without !important, but we use !important anyway for safety. */

html body[data-theme="light"] aside#sidebar {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink2) 100%) !important;
  box-shadow: inset -1px 0 0 rgba(60,100,145,0.30), 2px 0 8px rgba(0,0,0,0.12) !important;
}
html body[data-theme="light"] aside#sidebar::after {
  background: transparent !important;
  display: none !important;
}
html body[data-theme="light"] aside#sidebar::before {
  display: none !important;
}

/* The tambour shutter — hide in light mode */
html body[data-theme="light"] .tambour,
html body[data-theme="light"] #tambour,
html body[data-theme="light"] .tambour-slats,
html body[data-theme="light"] #tambour-slats,
html body[data-theme="light"] .tambour-slat,
html body[data-theme="light"] .tambour-handle,
html body[data-theme="light"] #tambour-handle {
  display: none !important;
}

/* Sidebar nav items — dark navy text on white sidebar */
html body[data-theme="light"] .nav-btn {
  color: var(--ink-deep) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html body[data-theme="light"] .nav-btn:hover {
  color: var(--smoke2) !important;
  background: var(--surface3) !important;
  border-color: rgba(30,58,95,0.10) !important;
  box-shadow: none !important;
}
html body[data-theme="light"] .nav-btn.active {
  color: var(--gold) !important;
  background: var(--ink4) !important;
  border-bottom-color: rgba(60,100,145,0.50) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html body[data-theme="light"] .nav-btn::before { display: none !important; }

html body[data-theme="light"] .dept-btn {
  color: var(--ink-deep) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html body[data-theme="light"] .dept-btn:hover {
  color: var(--smoke2) !important;
  background: var(--surface3) !important;
  box-shadow: none !important;
}
html body[data-theme="light"] .dept-btn.active {
  color: var(--gold) !important;
  background: var(--ink4) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html body[data-theme="light"] .dept-btn::before { display: none !important; }
/* Department / section label divider */
html body[data-theme="light"] .sb-section-label,
html body[data-theme="light"] .sb-divider {
  color: rgba(30, 58, 95, 0.60) !important;
  border-color: rgba(30, 58, 95, 0.15) !important;
}

/* TOPBAR — white with navy elements */
html body[data-theme="light"] header#topbar {
  background: linear-gradient(180deg, var(--ink), var(--ink2)) !important;
  border-bottom: 1px solid rgba(30,58,95,0.20) !important;
  box-shadow: 0 2px 8px rgba(30,58,95,0.10) !important;
}
html body[data-theme="light"] header#topbar .tb-logo { color: var(--smoke2) !important; }
html body[data-theme="light"] header#topbar .tb-module { color: var(--smoke3) !important; }
html body[data-theme="light"] header#topbar .tb-status { background: linear-gradient(180deg, var(--ink), var(--ink2)) !important; border-color: var(--border-strong) !important; }
html body[data-theme="light"] header#topbar .tb-status .tb-status-text { color: var(--ink-deep) !important; }
html body[data-theme="light"] header#topbar .tb-model-chip { background: linear-gradient(180deg, var(--ink), var(--ink2)) !important; border-color: var(--border-strong) !important; }
html body[data-theme="light"] header#topbar .tb-model-chip .tmc-name { color: var(--ink-deep) !important; }
html body[data-theme="light"] header#topbar #tb-user-chip { background: linear-gradient(180deg, var(--ink), var(--ink2)) !important; border-color: var(--border-strong) !important; }
html body[data-theme="light"] header#topbar #tb-user-name { color: var(--ink-deep) !important; }
html body[data-theme="light"] header#topbar #tb-user-role { color: var(--smoke2) !important; }
html body[data-theme="light"] header#topbar #tb-brightness-btn,
html body[data-theme="light"] header#topbar #theme-toggle { background: linear-gradient(180deg, var(--ink), var(--ink2)) !important; border-color: var(--border-strong) !important; }
html body[data-theme="light"] header#topbar #tb-brightness-btn svg,
html body[data-theme="light"] header#topbar #theme-toggle svg { stroke: var(--ink-deep) !important; }

/* SCOPE BAR — white buttons, navy text */
html body[data-theme="light"] .scope-btn { background: var(--surface) !important; color: var(--ink-deep) !important; border: 1.5px solid var(--border-strong) !important; box-shadow: none !important; }
html body[data-theme="light"] .scope-btn.active { background: var(--ink4) !important; color: var(--gold) !important; border-color: var(--border-strong) !important; }
html body[data-theme="light"] .scope-btn:hover { background: var(--surface3) !important; color: var(--smoke2) !important; }
html body[data-theme="light"] #col-picker-btn,
html body[data-theme="light"] .col-picker-btn { background: var(--surface) !important; color: var(--ink-deep) !important; border: 1.5px solid var(--border-strong) !important; box-shadow: none !important; }

/* CHAT BAR — white with navy text */
html body[data-theme="light"] #chat-bar { background: linear-gradient(180deg, var(--ink), var(--ink2)) !important; border-top: 1px solid rgba(30,58,95,0.20) !important; box-shadow: 0 -2px 8px rgba(30,58,95,0.08) !important; }
html body[data-theme="light"] #chat-ta { color: var(--smoke) !important; }
html body[data-theme="light"] #chat-ta::placeholder { color: var(--smoke4) !important; }

/* BOTTOM BUTTONS — white bg, navy icon, navy border */
html body[data-theme="light"] .scenario-btn { background: var(--surface) !important; border: 1.5px solid var(--border-strong) !important; color: var(--ink-deep) !important; box-shadow: none !important; }
html body[data-theme="light"] .mic-btn,
html body[data-theme="light"] .spk-toggle-btn { background: var(--surface) !important; border: 1.5px solid var(--border-strong) !important; color: var(--ink-deep) !important; box-shadow: none !important; }
html body[data-theme="light"] .mic-btn svg *,
html body[data-theme="light"] .spk-toggle-btn svg * { stroke: var(--ink-deep) !important; }
html body[data-theme="light"] .img-attach-btn { background: var(--surface) !important; border: 1.5px solid var(--border-strong) !important; color: var(--ink-deep) !important; box-shadow: none !important; }
html body[data-theme="light"] .send-btn { background: var(--smoke2) !important; border: 1px solid var(--border-strong) !important; color: var(--surface) !important; box-shadow: none !important; }
html body[data-theme="light"] .send-btn svg * { stroke: var(--surface) !important; fill: var(--surface) !important; }
html body[data-theme="light"] .send-btn:hover { background: var(--gold) !important; }

/* ─── ADMIN / DOCUMENTS PAGE ───
   The files admin page uses its own dark gradient backgrounds hardcoded,
   not via variables. Override each one to light equivalents. */

/* The big dark body area that holds the documents list */
html body[data-theme="light"] .files-body {
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface3) 100%) !important;
  box-shadow:
    inset 0 2px 8px rgba(30,58,95,0.08),
    inset 0 1px 2px rgba(30,58,95,0.06) !important;
}
html body[data-theme="light"] .files-body::-webkit-scrollbar-thumb {
  background: rgba(30, 58, 95, 0.22) !important;
}

/* The collections sub-sidebar (COLLECTIONS / COMPLIANCE / All Files / etc.) */
html body[data-theme="light"] .col-sidebar {
  background: linear-gradient(175deg, var(--surface2) 0%, var(--surface2) 100%) !important;
  border-right: 1px solid rgba(30, 58, 95, 0.15) !important;
  box-shadow:
    2px 0 6px rgba(30, 58, 95, 0.04),
    inset -1px 0 0 rgba(30, 58, 95, 0.06) !important;
}
html body[data-theme="light"] .col-sidebar::before {
  background: linear-gradient(90deg, transparent, rgba(30, 58, 95, 0.15), transparent) !important;
}

/* Collection cards in the col-sidebar */
html body[data-theme="light"] .col-item,
html body[data-theme="light"] .col-card,
html body[data-theme="light"] .collection-item,
html body[data-theme="light"] .coll-item {
  background: var(--surface) !important;
  border: 1px solid rgba(30, 58, 95, 0.12) !important;
  color: var(--smoke) !important;
}
html body[data-theme="light"] .col-item:hover,
html body[data-theme="light"] .col-card:hover,
html body[data-theme="light"] .collection-item:hover {
  border-color: rgba(30, 58, 95, 0.30) !important;
  background: rgba(30, 58, 95, 0.04) !important;
}
html body[data-theme="light"] .col-item.active,
html body[data-theme="light"] .col-card.active,
html body[data-theme="light"] .collection-item.active {
  border-color: var(--accent) !important;
  background: rgba(30, 58, 95, 0.08) !important;
}

/* Individual file row cards (.fcard) */
html body[data-theme="light"] .fcard {
  background: var(--surface) !important;
  border: 1px solid rgba(20,50,100,0.16) !important;
  box-shadow: 0 2px 8px rgba(20,50,100,0.14), 0 1px 2px rgba(20,50,100,0.08), inset 0 1px 0 rgba(255,255,255,1.0) !important;
  border-top-color: rgba(30,58,95,0.22) !important;
  box-shadow:
    0 1px 4px rgba(30,58,95,0.08),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}
html body[data-theme="light"] .fcard:hover {
  border-color: rgba(30,58,95,0.28) !important;
  background: linear-gradient(170deg, var(--surface) 0%, var(--surface2) 100%) !important;
  box-shadow:
    0 2px 8px rgba(30,58,95,0.12),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}
html body[data-theme="light"] .fcard.focused {
  border-color: var(--accent) !important;
  background: linear-gradient(170deg, var(--surface2) 0%, var(--surface3) 100%) !important;
}
html body[data-theme="light"] .ficon {
  background: rgba(30, 58, 95, 0.10) !important;
  color: var(--smoke2) !important;
  border: 1px solid rgba(30, 58, 95, 0.18) !important;
}
html body[data-theme="light"] .fname {
  color: var(--smoke) !important;
}
html body[data-theme="light"] .fmeta {
  color: rgba(30, 58, 95, 0.60) !important;
}

/* File action buttons (VIEW / FOCUS / EDIT / REMOVE) */
html body[data-theme="light"] .fact-btn {
  color: rgba(30, 58, 95, 0.75) !important;
  background: transparent !important;
  border: 1px solid rgba(30, 58, 95, 0.18) !important;
}
html body[data-theme="light"] .fact-btn:hover {
  color: var(--smoke2) !important;
  background: rgba(30, 58, 95, 0.06) !important;
  border-color: rgba(30, 58, 95, 0.35) !important;
}
html body[data-theme="light"] .fact-btn.focus-active {
  color: var(--smoke2) !important;
  background: rgba(30, 58, 95, 0.10) !important;
  border-color: var(--accent) !important;
}
html body[data-theme="light"] .fact-btn.del:hover {
  color: var(--red) !important;
  border-color: rgba(220, 38, 38, 0.40) !important;
  background: rgba(220, 38, 38, 0.05) !important;
}

/* Files-outer wrapper, files-main, and related containers */
html body[data-theme="light"] .files-outer,
html body[data-theme="light"] .files-main {
  background: transparent !important;
}
/* "All Documents" big title and "500 FILES" counter */
html body[data-theme="light"] .fhead,
html body[data-theme="light"] .fhead-title,
html body[data-theme="light"] .all-docs-title {
  color: var(--smoke2) !important;
  border-bottom-color: rgba(30, 58, 95, 0.15) !important;
}
html body[data-theme="light"] .fhead-count,
html body[data-theme="light"] .file-count {
  color: rgba(30, 58, 95, 0.60) !important;
}

/* Filter bar (FILTER / ALL CATEGORIES / ALL PERIODS / ALL STATES / CLEAR) */
/* Files-top header — was missing light mode override, kept dark navy */
html body[data-theme="light"] .files-top {
  background: linear-gradient(180deg, var(--surface3) 0%, var(--surface3) 100%) !important;
  border-bottom: 1px solid rgba(30,58,95,0.18) !important;
  box-shadow:
    0 2px 8px rgba(30,58,95,0.10),
    inset 0 1px 0 rgba(255,255,255,0.80) !important;
}
html body[data-theme="light"] .files-top::before {
  background: linear-gradient(90deg,
    transparent 5%,
    rgba(30,58,95,0.15) 25%,
    rgba(60,100,160,0.25) 50%,
    rgba(30,58,95,0.15) 75%,
    transparent 95%) !important;
}
html body[data-theme="light"] .files-top::after {
  background: linear-gradient(90deg,
    transparent,
    rgba(30,58,95,0.15) 30%,
    rgba(30,58,95,0.15) 70%,
    transparent) !important;
}

html body[data-theme="light"] .filter-bar,
html body[data-theme="light"] #filter-bar {
  background: transparent !important;
}
html body[data-theme="light"] .filter-label {
  color: rgba(30, 58, 95, 0.55) !important;
}
html body[data-theme="light"] .filter-select,
html body[data-theme="light"] .filter-clear {
  background: var(--surface) !important;
  color: var(--smoke2) !important;
  border: 1px solid rgba(30, 58, 95, 0.22) !important;
}
html body[data-theme="light"] .filter-select:hover,
html body[data-theme="light"] .filter-clear:hover {
  border-color: rgba(30, 58, 95, 0.40) !important;
  background: rgba(30, 58, 95, 0.04) !important;
}

/* Files top tabs (DOCUMENTS / CONTEXT) */
html body[data-theme="light"] .files-tab-bar {
  background: transparent !important;
}
html body[data-theme="light"] .files-tab,
html body[data-theme="light"] .files-tab-btn {
  color: rgba(30, 58, 95, 0.70) !important;
  background: transparent !important;
  border: 1px solid rgba(30, 58, 95, 0.18) !important;
}
html body[data-theme="light"] .files-tab.active,
html body[data-theme="light"] .files-tab-btn.active {
  color: var(--smoke2) !important;
  background: rgba(30, 58, 95, 0.08) !important;
  border-color: rgba(30, 58, 95, 0.35) !important;
}

/* UPLOAD button */
html body[data-theme="light"] .upload-btn,
html body[data-theme="light"] #upload-btn,
html body[data-theme="light"] button[class*="upload"] {
  background: var(--surface) !important;
  color: var(--smoke2) !important;
  border: 1px solid rgba(30, 58, 95, 0.25) !important;
}
html body[data-theme="light"] .upload-btn:hover,
html body[data-theme="light"] #upload-btn:hover {
  background: rgba(30, 58, 95, 0.06) !important;
  border-color: rgba(30, 58, 95, 0.40) !important;
}

/* "+ NEW COLLECTION" button */
html body[data-theme="light"] .new-col-btn,
html body[data-theme="light"] #new-col-btn,
html body[data-theme="light"] .add-collection-btn {
  background: var(--surface) !important;
  color: var(--smoke2) !important;
  border: 1px solid rgba(30, 58, 95, 0.25) !important;
}

/* Empty state */
html body[data-theme="light"] .fempty {
  color: rgba(30, 58, 95, 0.55) !important;
}
html body[data-theme="light"] .fempty-title {
  color: var(--smoke2) !important;
}

/* ─── SWITCH COLLECTION + COLLECTION PILLS (chat view) ─── */
html body[data-theme="light"] #switch-collection-btn,
html body[data-theme="light"] .switch-collection-btn,
html body[data-theme="light"] .sw-col-btn {
  background: var(--surface) !important;
  color: var(--smoke2) !important;
  border: 1px solid rgba(30, 58, 95, 0.25) !important;
}
html body[data-theme="light"] .coll-pill,
html body[data-theme="light"] .collection-pill,
html body[data-theme="light"] .all-files-tab {
  color: rgba(30, 58, 95, 0.85) !important;
}
html body[data-theme="light"] .coll-pill.active,
html body[data-theme="light"] .all-files-tab.active {
  color: var(--smoke2) !important;
  background: rgba(30, 58, 95, 0.08) !important;
}

/* ─── LOGIN CARD AUTHENTICATE BUTTON ───
   The login card is preserved dark by design (it's the premium artifact).
   But the Authenticate button is pure white which clashes with the light
   page behind the dark card. Make the button navy so it contrasts with
   the dark card interior, not the light page. */
html body[data-theme="light"] .login-card .lbtn-primary,
html body[data-theme="light"] .login-card button[type="submit"],
html body[data-theme="light"] .login-card .login-submit-btn {
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface3) 100%) !important;
  color: var(--smoke) !important;
  border: 1px solid rgba(160, 120, 32, 0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.30) !important;
}
html body[data-theme="light"] .login-card .lbtn-primary:hover,
html body[data-theme="light"] .login-card button[type="submit"]:hover {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%) !important;
  border-color: rgba(160, 120, 32, 0.85) !important;
}

/* Welcome greeting text — "Hey Tim, I'm Kait..." — was gold gradient,
   unreadable on light sky. Replace with solid dark text. */
html body[data-theme="light"] #discovery-greeting-strip .dgs-text {
  background: none !important;
  -webkit-text-fill-color: var(--smoke) !important;
  color: var(--smoke) !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  /* NO HALO, AND NO BLACK BLUR.
     Two separate shadow systems were stacked on this text and BOTH had to go:
       * `filter:` three white drop-shadows, added when this was a GOLD GRADIENT
         over a photographic sky and genuinely needed separation from it.
       * `text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.8)`
         from the base rule (main-4-openings-collections.css) -- a BLACK blur,
         never overridden for light mode.
     The rule above paints this solid --smoke on a near-white page, so the white
     halo had nothing to do and the black blur actively smeared the glyphs. My
     first pass removed only the filter, which is why the smudge survived: the
     visible blur was the text-shadow the whole time. */
  filter: none !important;
  text-shadow: none !important;
  font-weight: 500 !important;
}

/* "Regulatory Intelligence" eyebrow text */
html body[data-theme="light"] .dg-eyebrow {
  color: var(--smoke) !important;
  opacity: 0.95 !important;
  filter: none !important;   /* same reason as .dgs-text above */
  font-weight: 600 !important;
}

/* The KAIT centerpiece wordmark — strong halo against clouds */
html body[data-theme="light"] .dg-name {
  filter: none !important;   /* same reason as .dgs-text above */
}

/* Ensure any inline-styled greeting spans inside dgs-text override. */
html body[data-theme="light"] #discovery-greeting-strip .dgs-text span,
html body[data-theme="light"] #discovery-greeting-strip .dgs-text b,
html body[data-theme="light"] #discovery-greeting-strip .dgs-text strong {
  color: var(--smoke) !important;
  -webkit-text-fill-color: var(--smoke) !important;
  background: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT MODE — ATMOSPHERIC CHROME FIX
   Targets: topbar, brand plate, sidebar nav buttons, recent-changes
   feed, user block, scope-bar — elements that were visibly broken
   when the cloud-background light mode was first attempted.
   Aesthetic: cloud-and-sky — atmospheric whites, soft sky-blue
   tints, dark navy text. Matches the cloud background image.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Topbar: was solid black; now atmospheric white-blue with cloud-shadow border */
html body[data-theme="light"] #topbar {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink2) 100%) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(60, 100, 145, 0.30) !important;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.10),
    0 2px 12px rgba(0, 0, 0, 0.10) !important;
}
html body[data-theme="light"] .tb-sep {
  background: linear-gradient(180deg, transparent, rgba(60, 100, 145, 0.30), transparent);
}
html body[data-theme="light"] .tb-module {
  color: var(--smoke3);
}

/* Topbar status chip: "ONLINE" indicator and "TIM KOSUGE ADMIN" pill */
html body[data-theme="light"] .tb-status,
html body[data-theme="light"] .tb-user {
  background: rgba(247, 250, 253, 0.85);
  border: 1px solid rgba(60, 100, 145, 0.25);
  color: var(--smoke);
}
html body[data-theme="light"] .tb-user .tb-user-role {
  color: var(--gold-lt);
}

/* Theme toggle (sun/moon icon button) */
html body[data-theme="light"] .theme-toggle,
html body[data-theme="light"] #tb-theme-toggle {
  background: rgba(247, 250, 253, 0.85);
  border: 1px solid rgba(60, 100, 145, 0.25);
  color: var(--gold);
}
html body[data-theme="light"] .theme-toggle:hover {
  background: rgba(199, 213, 229, 0.65);
  border-color: rgba(60, 100, 145, 0.45);
}

/* Brand plate (top-left "KAIT REGULATORY INTELLIGENCE COMPLIANCE")
   was bleeding through as a near-black rectangle. Lighten it to an
   atmospheric pale-blue plaque with sky-blue accent borders. */
html body[data-theme="light"] .sb-header,
html body[data-theme="light"] #sb-header {
  background: linear-gradient(160deg,
    rgba(247, 250, 253, 0.92) 0%,
    rgba(220, 231, 242, 0.88) 100%);
  border: 1px solid rgba(60, 100, 145, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 8px rgba(45, 90, 143, 0.10);
}
/* THE PLAQUE READ AS BLANK. The wordmark is a gradient clipped to the glyphs,
   and it ran --gold-metal-1 -> --gold-metal-3 top-to-bottom. In light mode
   --gold-metal-1 is #8FB5DC, which computes to 2.04:1 against this plaque's own
   near-white surface -- so the TOP HALF OF EVERY LETTER was effectively
   invisible and the plate looked empty. Running the same metal ramp from its
   DARK end (metal-3 6.75:1 -> metal-4 11.05:1) keeps the brushed-metal look and
   mirrors the dark-mode intent (light metal on dark) instead of inverting it. */
html body[data-theme="light"] .sb-header .sbh-name,
html body[data-theme="light"] .sb-header .sbh-wordmark {
  background: linear-gradient(180deg, var(--gold-metal-3), var(--gold-metal-4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html body[data-theme="light"] .sb-header .sbh-tag,
html body[data-theme="light"] .sb-header .sbh-eyebrow,
html body[data-theme="light"] .sb-header .sbh-dept {
  color: var(--smoke3);
}

/* Sidebar nav buttons (CALL KAIT / DOCUMENTS / RESPONSES / etc.)
   were going invisible. Force a clean atmospheric pill style. */
html body[data-theme="light"] .nav-btn {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink2) 100%);
  color: var(--smoke2);
  border: 1px solid rgba(30, 58, 95, 0.20);
  box-shadow: 0 1px 2px rgba(15, 37, 64, 0.08);
}
html body[data-theme="light"] .nav-btn:hover {
  background: linear-gradient(180deg, var(--ink2) 0%, var(--ink3) 100%);
  color: var(--ink-deep);
  border-color: rgba(30, 58, 95, 0.35);
  box-shadow: 0 2px 4px rgba(15, 37, 64, 0.12);
}
html body[data-theme="light"] .nav-btn.active {
  background: linear-gradient(180deg, var(--smoke2) 0%, var(--smoke2) 100%);
  color: var(--smoke);
  border-color: rgba(15, 37, 64, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 6px rgba(15, 37, 64, 0.20);
}

/* Sidebar Recent Changes feed — eyebrow, items, refresh button */
html body[data-theme="light"] .sb-feed {
  border-top-color: rgba(60, 100, 145, 0.30);
}
html body[data-theme="light"] .sb-feed-eyebrow {
  color: var(--smoke2);
  font-weight: 600;
}
html body[data-theme="light"] .sb-feed-refresh {
  background: transparent;
  border: 1px solid rgba(60, 100, 145, 0.40);
  color: var(--smoke2);
}
html body[data-theme="light"] .sb-feed-refresh:hover {
  color: var(--smoke);
  border-color: rgba(60, 100, 145, 0.65);
  background: rgba(74, 130, 194, 0.12);
}
html body[data-theme="light"] .sb-feed-list::-webkit-scrollbar-thumb {
  background: rgba(60, 100, 145, 0.40);
}
html body[data-theme="light"] .sb-feed-empty {
  color: var(--smoke3);
}
html body[data-theme="light"] .sb-feed-item {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.92),
    rgba(220, 231, 242, 0.90));
  border: 1px solid rgba(60, 100, 145, 0.30);
  border-left: 3px solid rgba(60, 100, 145, 0.55);
}
html body[data-theme="light"] .sb-feed-item:hover {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 1),
    rgba(199, 213, 229, 0.92));
  border-color: rgba(60, 100, 145, 0.55);
  border-left-color: var(--gold);
}
html body[data-theme="light"] .sb-feed-item.tier-critical {
  border-left-color: rgba(180, 60, 60, 0.85);
}
html body[data-theme="light"] .sb-feed-item.tier-critical:hover {
  border-left-color: rgba(180, 60, 60, 1);
}
html body[data-theme="light"] .sb-feed-item.tier-important {
  border-left-color: rgba(180, 130, 30, 0.85);
}
html body[data-theme="light"] .sb-feed-item.tier-important:hover {
  border-left-color: rgba(180, 130, 30, 1);
}
html body[data-theme="light"] .sb-feed-item.tier-info {
  border-left-color: rgba(60, 130, 80, 0.75);
}
html body[data-theme="light"] .sb-feed-item.tier-info:hover {
  border-left-color: rgba(60, 130, 80, 1);
}
html body[data-theme="light"] .sb-feed-meta {
  color: var(--smoke2);
  font-weight: 600;
}
html body[data-theme="light"] .sb-feed-collection {
  color: var(--smoke3);
}
html body[data-theme="light"] .sb-feed-when {
  color: var(--smoke4);
}
html body[data-theme="light"] .sb-feed-title {
  color: var(--smoke);
  font-weight: 500;
}

/* Sidebar bottom user block (avatar + name/role + lock/logout icons) */
html body[data-theme="light"] .sb-footer,
html body[data-theme="light"] .sb-user-block {
  background: linear-gradient(180deg,
    rgba(220, 231, 242, 0.85) 0%,
    rgba(199, 213, 229, 0.90) 100%);
  border-top: 1px solid rgba(60, 100, 145, 0.22);
  color: var(--smoke);
}
html body[data-theme="light"] .sb-user-name,
html body[data-theme="light"] .sb-footer .sbu-name {
  color: var(--smoke);
}
html body[data-theme="light"] .sb-user-role,
html body[data-theme="light"] .sb-footer .sbu-role {
  color: var(--gold);
}
html body[data-theme="light"] .sb-user-avatar,
html body[data-theme="light"] .sb-footer .sbu-avatar {
  background: linear-gradient(135deg, var(--gold-metal-1), var(--gold-metal-3));
  color: white;
  border: 1px solid rgba(60, 100, 145, 0.40);
}
html body[data-theme="light"] .sb-user-block .sbu-icon-btn,
html body[data-theme="light"] .sb-footer .sbu-icon-btn {
  color: var(--smoke3);
}
html body[data-theme="light"] .sb-user-block .sbu-icon-btn:hover,
html body[data-theme="light"] .sb-footer .sbu-icon-btn:hover {
  color: var(--gold);
  background: rgba(74, 130, 194, 0.10);
}

/* Sidebar collapse toggle (the small chevron tab between sidebar and chat) */
html body[data-theme="light"] #sb-toggle {
  background: rgba(247, 250, 253, 0.92);
  border: 1px solid rgba(60, 100, 145, 0.30);
  color: var(--gold);
  box-shadow: 0 2px 8px rgba(45, 90, 143, 0.12);
}
html body[data-theme="light"] #sb-toggle:hover {
  background: rgba(199, 213, 229, 0.85);
  border-color: rgba(60, 100, 145, 0.50);
  color: var(--gold-lt);
}

/* Scope bar (CONTEXT / ALL FILES / breadcrumb just under topbar) */
html body[data-theme="light"] .scope-bar,
html body[data-theme="light"] #scope-bar {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink2) 100%);
  border-bottom: 1px solid rgba(30, 58, 95, 0.25);
}
html body[data-theme="light"] .scope-label,
html body[data-theme="light"] .scope-bar .scope-label {
  color: var(--smoke2);
  font-weight: 500;
}
html body[data-theme="light"] .scope-bar .scope-pill,
html body[data-theme="light"] .scope-bar .all-files-tab,
html body[data-theme="light"] .scope-bar .coll-pill {
  color: var(--smoke2);
  background: transparent;
  border-color: transparent;
}
html body[data-theme="light"] .scope-bar .scope-pill.active,
html body[data-theme="light"] .scope-bar .all-files-tab.active,
html body[data-theme="light"] .scope-bar .coll-pill.active {
  color: var(--ink-deep);
  background: rgba(255, 255, 255, 0.60);
  border-color: rgba(30, 58, 95, 0.30);
  box-shadow: 0 1px 3px rgba(15, 37, 64, 0.15);
}

/* Chat input bar — the dark band at the bottom of the chat */
html body[data-theme="light"] .chat-bar,
html body[data-theme="light"] #chat-bar {
  background: linear-gradient(180deg, var(--ink2) 0%, var(--ink3) 100%);
  border-top: 1px solid rgba(30, 58, 95, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 -2px 12px rgba(15, 37, 64, 0.12);
}
html body[data-theme="light"] .chat-ta,
html body[data-theme="light"] #chat-ta {
  background: rgba(255, 255, 255, 0.85);
  color: var(--smoke2);
  border: 1px solid rgba(30, 58, 95, 0.30);
}
html body[data-theme="light"] .chat-ta::placeholder {
  color: var(--smoke3);
}
html body[data-theme="light"] .chat-ta:focus,
html body[data-theme="light"] #chat-ta:focus {
  border-color: var(--gold);
  background: white;
}

/* Chat input action buttons (mic, attach, send, etc.) */
html body[data-theme="light"] .chat-bar .ca-btn,
html body[data-theme="light"] .chat-bar button {
  color: var(--smoke3);
  background: transparent;
  border: 1px solid transparent;
}
html body[data-theme="light"] .chat-bar .ca-btn:hover,
html body[data-theme="light"] .chat-bar button:hover {
  color: var(--gold);
  background: rgba(74, 130, 194, 0.10);
}

/* The "Switch Collection" button in the upper right of the chat panel */
html body[data-theme="light"] #switch-collection-btn,
html body[data-theme="light"] .switch-collection-btn,
html body[data-theme="light"] .sw-col-btn {
  background: rgba(247, 250, 253, 0.92);
  border: 1px solid rgba(60, 100, 145, 0.35);
  color: var(--gold);
}
html body[data-theme="light"] #switch-collection-btn:hover {
  background: rgba(199, 213, 229, 0.85);
  border-color: rgba(60, 100, 145, 0.55);
}

/* Greeting text at chat-empty state — strong contrast on cloud background */
html body[data-theme="light"] .chat-greeting-text,
html body[data-theme="light"] .chat-empty-text {
  color: var(--smoke);
  font-weight: 500;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(255, 255, 255, 0.6);
}

/* Chat background overlay's darkening wash — invert to a light wash so the
   cloud image isn't being multiplied with darkness */
html body[data-theme="light"] .chat-bg-overlay::after {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.10) 100%);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT MODE — RECESSED PANEL FIX (the dark middle band)
   The .sb-content-panel is a "recessed dark plate" that wraps the
   nav buttons + Recent Changes feed. In dark mode it's a black
   inset panel. In light mode it had NO override — it stayed black,
   creating a dark band in the middle of the light sidebar where
   the nav buttons sat invisibly. This makes it light.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body[data-theme="light"] .sb-content-panel {
  background: linear-gradient(180deg, var(--ink2) 0%, var(--ink3) 100%) !important;
  border: 1px solid rgba(60,100,145,0.35) !important;
  border-top-color: rgba(0,0,0,0.30) !important;
  border-bottom-color: rgba(255,255,255,0.45) !important;
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,0.20),
    inset 0 -1px 0 rgba(255,255,255,0.35),
    0 0 0 1px rgba(60,100,145,0.10) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT MODE — BRAND PLAQUE STRENGTHENING
   The plaque has THREE layers: .sb-plaque (face), .sb-plaque::before
   (scanline grain), .sb-plaque::after (top edge highlight). All
   needed light-mode overrides. The wordmark gradient was also too
   monotone — replaced with a wider value range.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html body[data-theme="light"] .sb-plaque {
  background: linear-gradient(170deg, rgba(18,24,42,1) 0%, rgba(12,16,30,1) 50%, rgba(8,11,22,1) 100%) !important;
  border: 1.5px solid rgba(60,100,145,0.40) !important;
  border-top-color: rgba(143,181,220,0.85) !important;
  border-bottom-color: rgba(45,90,143,0.65) !important;
  border-left-color: rgba(74,130,194,0.55) !important;
  border-right-color: rgba(74,130,194,0.50) !important;
  box-shadow:
    0 4px 12px rgba(45,90,143,0.18),
    0 1px 3px rgba(45,90,143,0.12),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 2px rgba(45,90,143,0.08) !important;
}
html body[data-theme="light"] .sb-plaque::before { display: none !important; }
html body[data-theme="light"] .sb-plaque::after {
  background: linear-gradient(90deg, transparent, rgba(143,181,220,0.5) 15%, rgba(74,130,194,0.95) 40%, rgba(45,90,143,1) 50%, rgba(74,130,194,0.95) 60%, rgba(143,181,220,0.5) 85%, transparent) !important;
  height: 1.5px !important;
}

/* KAIT brand plate in sidebar - needs bright background in light mode */
html body[data-theme="light"] .sb-brand-plate {
  background: linear-gradient(170deg, var(--surface) 0%, var(--surface) 50%, var(--surface3) 100%) !important;
  border: 1.5px solid rgba(60,100,145,0.35) !important;
  box-shadow:
    0 3px 10px rgba(45,90,143,0.15),
    0 1px 3px rgba(45,90,143,0.10),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 2px rgba(45,90,143,0.06) !important;
}

/* REGULATORY INTELLIGENCE text - make it more visible */
html body[data-theme="light"] .sb-tagline {
  color: var(--ink-deep) !important;
  font-weight: 500 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LIGHT MODE — THE DECISIVE PASS
   Aesthetic: white backgrounds with blue and grey trim. Buttons
   are white or pale grey with dark text/icons and visible borders.
   No dark-navy fills (those felt like dark mode showing through).
   This is "clean, bright, with proper edges" — the eye reads
   every element because each has trim, contrast, and weight.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NEWS FEED PANEL (#rw-panel) — LIGHT MODE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   This panel had ZERO light-mode rules -- verified, not assumed: every
   `.rw-*` selector in main-7-csp-migrated-styles.css is theme-agnostic and
   was authored for the dark shell. Its cards use
   `background: rgba(255,255,255,.02)` and `border: 1px solid rgba(160,120,32,.14)`
   -- a 2%-white fill and a 14%-opacity gold hairline. Both are calibrated to
   register against near-black. On light mode's #EEF3FA they are invisible:
   white-on-white fill, and a gold line at 14% over pale blue. So the whole
   column flattened into one undifferentiated wash with no card edges, which is
   exactly what it looked like.

   The fix is not a tint -- it is giving the panel the surface treatment it never
   had: real card surfaces, a visible border, and a shadow to lift each card off
   the page. Tier colours are kept and strengthened, since the left border is the
   only thing carrying severity. */

html body[data-theme="light"] #rw-panel {
  background: var(--ink3);
  /* The dark shell used heavy inset shadows to imply depth against black. On a
     pale panel those read as grime; a single crisp edge does the same job. */
  box-shadow: -1px 0 0 0 rgba(45, 90, 143, 0.18), -8px 0 24px rgba(45, 90, 143, 0.07);
}

html body[data-theme="light"] #rw-panel .rw-header {
  border-bottom: 1px solid rgba(45, 90, 143, 0.20);
  background: var(--ink2);
}

html body[data-theme="light"] #rw-panel .rw-eyebrow {
  color: var(--gold-metal-3);   /* 6.75:1 -- the pale --gold-lt vanished here */
}

html body[data-theme="light"] #rw-panel .rw-item {
  background: var(--ink2);                          /* white card, not 2% white */
  border: 1px solid rgba(45, 90, 143, 0.22);        /* visible edge */
  border-left-width: 3px;                           /* severity rail, thicker */
  box-shadow: 0 1px 2px rgba(45, 90, 143, 0.08);    /* lifts the card off the page */
}

html body[data-theme="light"] #rw-panel .rw-item:hover {
  background: #FFFFFF;
  border-color: rgba(45, 90, 143, 0.38);
  box-shadow: 0 2px 6px rgba(45, 90, 143, 0.14);
}

/* Severity rails. Fully opaque: at the dark-mode alphas (.6-.7) these washed out
   against a white card, which defeated the one signal the feed most needs. */
html body[data-theme="light"] #rw-panel .rw-item.tier-critical  { border-left-color: #B91C1C; }
html body[data-theme="light"] #rw-panel .rw-item.tier-important { border-left-color: #B45309; }
html body[data-theme="light"] #rw-panel .rw-item.tier-info      { border-left-color: #15803D; }

/* Secondary text: effective date, source line, timestamp. */
html body[data-theme="light"] #rw-panel .rw-eff,
html body[data-theme="light"] #rw-panel .rw-src,
html body[data-theme="light"] #rw-panel .rw-when {
  color: var(--smoke3);
}

/* Action buttons -- they were near-invisible outlines on white. */
html body[data-theme="light"] #rw-panel .rw-act {
  background: var(--ink4);
  border: 1px solid rgba(45, 90, 143, 0.30);
  color: var(--gold-metal-3);
}
html body[data-theme="light"] #rw-panel .rw-act:hover {
  background: #FFFFFF;
  border-color: rgba(45, 90, 143, 0.55);
  color: var(--gold-metal-4);
}