/* main-6-library-misc-2.css -- split from main-6-library-misc.css (File Split Plan #6, CSS pass).
   Pure move: byte-identical rules, only the file boundary is new. Loaded via
   its own <link> tag in index.html immediately after main-6-library-misc.css's, preserving
   the exact cascade order the single file had. */

/* ── NAV BUTTONS (CALL KAIT, DOCUMENTS, RESPONSES, etc.) ──
   White cards with SOLID navy trim, dark navy text. */
html body[data-theme="light"] .nav-btn {
  background: linear-gradient(180deg, var(--ink), var(--ink2)) !important;
  color: var(--ink-deep) !important;
  border: 1.5px solid var(--border-strong) !important;
  box-shadow:
    0 1px 2px rgba(15, 37, 64, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
}
html body[data-theme="light"] .nav-btn:hover {
  background: linear-gradient(180deg, var(--ink2), var(--ink3)) !important;
  border-color: var(--border-dark) !important;
  color: var(--smoke) !important;
  box-shadow:
    0 2px 6px rgba(15, 37, 64, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
html body[data-theme="light"] .nav-btn.active {
  background: linear-gradient(180deg, var(--smoke2), var(--smoke2)) !important;
  color: var(--smoke) !important;
  border: 2px solid var(--ink-deep) !important;
  box-shadow:
    0 2px 6px rgba(15, 37, 64, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
html body[data-theme="light"] .nav-btn::before { display: none !important; }

/* ── TOPBAR PILLS (ONLINE / TIM KOSUGE ADMIN / monitor / theme) ──
   White pills with SOLID navy trim, dark text and icons. */
html body[data-theme="light"] .tb-status,
html body[data-theme="light"] .tb-user,
html body[data-theme="light"] #tb-theme-toggle,
html body[data-theme="light"] .theme-toggle,
html body[data-theme="light"] #tb-monitor-btn {
  background: var(--surface) !important;
  border: 1.5px solid var(--border-strong) !important;
  color: var(--ink-deep) !important;
  box-shadow:
    0 1px 2px rgba(15, 37, 64, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html body[data-theme="light"] .tb-user .tb-user-role,
html body[data-theme="light"] .tb-status .tb-status-label {
  color: var(--gold) !important;
  font-weight: 600 !important;
}
html body[data-theme="light"] .theme-toggle:hover,
html body[data-theme="light"] #tb-theme-toggle:hover,
html body[data-theme="light"] #tb-monitor-btn:hover,
html body[data-theme="light"] .tb-status:hover,
html body[data-theme="light"] .tb-user:hover {
  background: var(--surface2) !important;
  border-color: var(--border-dark) !important;
}
html body[data-theme="light"] #topbar svg,
html body[data-theme="light"] #topbar svg *,
html body[data-theme="light"] #topbar button svg,
html body[data-theme="light"] #topbar button svg *,
html body[data-theme="light"] .tb-status svg,
html body[data-theme="light"] .tb-user svg {
  stroke: var(--ink-deep) !important;
}
html body[data-theme="light"] #topbar svg [fill]:not([fill="none"]):not([fill="currentColor"]) {
  fill: var(--ink-deep) !important;
}

/* ── CHAT BAR ACTION BUTTONS (layers, mic, speaker, image attach) ──
   White circles with SOLID navy trim, dark icon strokes. */
html body[data-theme="light"] .chat-bar .scenario-btn,
html body[data-theme="light"] .chat-bar .mic-btn,
html body[data-theme="light"] .chat-bar .spk-toggle-btn,
html body[data-theme="light"] .chat-bar .img-attach-btn,
html body[data-theme="light"] #scenario-btn,
html body[data-theme="light"] #mic-btn,
html body[data-theme="light"] #spk-toggle-btn,
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:
    0 1px 3px rgba(15, 37, 64, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html body[data-theme="light"] .chat-bar .scenario-btn:hover,
html body[data-theme="light"] .chat-bar .mic-btn:hover,
html body[data-theme="light"] .chat-bar .spk-toggle-btn:hover,
html body[data-theme="light"] .chat-bar .img-attach-btn:hover {
  background: var(--surface2) !important;
  border-color: var(--border-dark) !important;
}
html body[data-theme="light"] .chat-bar button svg,
html body[data-theme="light"] .chat-bar button svg *,
html body[data-theme="light"] .chat-bar button svg path,
html body[data-theme="light"] .chat-bar button svg circle,
html body[data-theme="light"] .chat-bar button svg rect,
html body[data-theme="light"] .chat-bar button svg line,
html body[data-theme="light"] .chat-bar button svg polyline,
html body[data-theme="light"] .chat-bar button svg polygon {
  stroke: var(--ink-deep) !important;
  stroke-width: 2 !important;
}
html body[data-theme="light"] .chat-bar button svg [fill]:not([fill="none"]):not([fill="currentColor"]) {
  fill: var(--ink-deep) !important;
}

/* Send button — primary action. White with extra-thick navy border. */
html body[data-theme="light"] .chat-bar .send-btn,
html body[data-theme="light"] #send-btn {
  background: var(--surface) !important;
  color: var(--ink-deep) !important;
  border: 2px solid var(--border-dark) !important;
  box-shadow:
    0 2px 6px rgba(15, 37, 64, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html body[data-theme="light"] .chat-bar .send-btn:hover,
html body[data-theme="light"] #send-btn:hover {
  background: var(--surface2) !important;
  border-color: var(--border-dark) !important;
}

/* Chat textarea — clean white with solid navy border, dark navy text */
html body[data-theme="light"] .chat-ta,
html body[data-theme="light"] #chat-ta {
  background: var(--surface) !important;
  color: var(--smoke) !important;
  border: 1.5px solid var(--border-strong) !important;
  box-shadow: inset 0 1px 2px rgba(15, 37, 64, 0.06) !important;
}
html body[data-theme="light"] .chat-ta::placeholder,
html body[data-theme="light"] #chat-ta::placeholder {
  color: var(--smoke4) !important;
}
html body[data-theme="light"] .chat-ta:focus,
html body[data-theme="light"] #chat-ta:focus {
  border-color: var(--border-dark) !important;
  box-shadow: 0 0 0 2px rgba(74, 130, 194, 0.25), inset 0 1px 2px rgba(15, 37, 64, 0.08) !important;
}

/* ── USER BLOCK ICON BUTTONS (?, lock, logout) ──
   White circles with SOLID navy trim, dark icon strokes. */
html body[data-theme="light"] #sb-user-block button {
  background: var(--surface) !important;
  border: 1.5px solid var(--border-strong) !important;
  box-shadow:
    0 1px 2px rgba(15, 37, 64, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html body[data-theme="light"] #sb-user-block button:hover {
  background: var(--surface2) !important;
  border-color: var(--border-dark) !important;
}
html body[data-theme="light"] #sb-user-block button svg,
html body[data-theme="light"] #sb-user-block button svg *,
html body[data-theme="light"] #sb-user-block button svg path,
html body[data-theme="light"] #sb-user-block button svg circle,
html body[data-theme="light"] #sb-user-block button svg rect,
html body[data-theme="light"] #sb-user-block button svg line,
html body[data-theme="light"] #sb-user-block button svg polyline {
  stroke: var(--ink-deep) !important;
  stroke-width: 2 !important;
  fill: none !important;
}
html body[data-theme="light"] #sb-user-block button svg circle[fill]:not([fill="none"]) {
  fill: var(--ink-deep) !important;
  stroke: none !important;
}

/* ── AI MODEL PILL (Claude Sonnet) ──
   White pill with SOLID navy trim. */
html body[data-theme="light"] .model-pill {
  background: var(--surface) !important;
  border: 1.5px solid var(--border-strong) !important;
  box-shadow:
    0 1px 3px rgba(15, 37, 64, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html body[data-theme="light"] .model-pill:hover {
  background: var(--surface2) !important;
  border-color: var(--border-dark) !important;
}
html body[data-theme="light"] .model-pill .mp-name,
html body[data-theme="light"] #mp-name {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--ink-deep) !important;
  color: var(--ink-deep) !important;
  font-weight: 600 !important;
}
html body[data-theme="light"] .model-pill .mp-sub,
html body[data-theme="light"] #mp-sub {
  color: var(--smoke4) !important;
  font-weight: 500 !important;
}
html body[data-theme="light"] .model-pill .mp-arrow svg,
html body[data-theme="light"] .model-pill .mp-arrow svg * {
  fill: var(--ink-deep) !important;
  stroke: var(--ink-deep) !important;
}

/* ── TIM KOSUGE / ADMIN text in user block ── */
html body[data-theme="light"] #sb-user-block > div > div:nth-child(2) > div:first-child {
  color: var(--smoke) !important;
  font-weight: 600 !important;
}
html body[data-theme="light"] #sb-user-block > div > div:nth-child(2) > div:nth-child(2) {
  color: var(--gold) !important;
  font-weight: 500 !important;
}

/* ── SWITCH COLLECTION button (top-right of chat) ── */
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;
  border: 1.5px solid var(--border-strong) !important;
  color: var(--ink-deep) !important;
  box-shadow:
    0 1px 2px rgba(15, 37, 64, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
html body[data-theme="light"] #switch-collection-btn:hover {
  background: var(--surface2) !important;
  border-color: var(--border-dark) !important;
}
html body[data-theme="light"] #switch-collection-btn svg,
html body[data-theme="light"] #switch-collection-btn svg * {
  stroke: var(--ink-deep) !important;
}

/* ── RECENT CHANGES feed — refresh button ── */
html body[data-theme="light"] .sb-feed-refresh {
  background: var(--surface) !important;
  border: 1.5px solid var(--border-strong) !important;
  color: var(--ink-deep) !important;
}
html body[data-theme="light"] .sb-feed-refresh svg,
html body[data-theme="light"] .sb-feed-refresh svg * {
  stroke: var(--ink-deep) !important;
}
html body[data-theme="light"] .sb-feed-refresh:hover {
  background: var(--surface2) !important;
  border-color: var(--border-dark) !important;
}

/* ── SCOPE BAR (CONTEXT / ALL FILES / OHIO CANNABIS) ──
   Active item is a white chip with SOLID navy trim. */
html body[data-theme="light"] .scope-bar,
html body[data-theme="light"] #scope-bar {
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink2) 100%) !important;
  border-bottom: 1px solid rgba(60,100,145,0.30) !important;
}
html body[data-theme="light"] .scope-bar .scope-label,
html body[data-theme="light"] .scope-label {
  color: var(--smoke4) !important;
  font-weight: 500 !important;
}
html body[data-theme="light"] .scope-bar .scope-pill,
html body[data-theme="light"] .scope-bar .scope-btn,
html body[data-theme="light"] .scope-bar .all-files-tab,
html body[data-theme="light"] .scope-bar .coll-pill {
  color: var(--ink-deep) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-weight: 500 !important;
}
html body[data-theme="light"] .scope-bar .scope-pill.active,
html body[data-theme="light"] .scope-bar .scope-btn.active,
html body[data-theme="light"] .scope-bar .all-files-tab.active,
html body[data-theme="light"] .scope-bar .coll-pill.active {
  background: linear-gradient(180deg, var(--smoke2), var(--smoke2)) !important;
  color: var(--smoke) !important;
  border: 1.5px solid var(--ink-deep) !important;
  box-shadow:
    0 1px 3px rgba(15, 37, 64, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — COMPLIANCE SUITE GROUP SECTIONS
   ══════════════════════════════════════════════════════════════════ */

html body[data-theme="light"] .kc-group-section {
  background: transparent !important;
}
html body[data-theme="light"] .kc-group-header {
  border-bottom-color: rgba(60,100,145,0.20) !important;
}
html body[data-theme="light"] .kc-group-title {
  color: var(--gold) !important;
}
html body[data-theme="light"] .kc-group-desc {
  color: var(--smoke3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — MARKET INTELLIGENCE
   ══════════════════════════════════════════════════════════════════ */

html body[data-theme="light"] .mi-home {
  background: transparent !important;
}
html body[data-theme="light"] .mi-header-band {
  background: rgba(255,255,255,0.6) !important;
  border-bottom-color: rgba(60,100,145,0.15) !important;
}
html body[data-theme="light"] .mi-intro-title {
  color: var(--smoke) !important;
}
html body[data-theme="light"] .mi-intro-body {
  color: var(--smoke3) !important;
}

/* Arc bar — our 8 states */
html body[data-theme="light"] .mi-arc-bar {
  background: rgba(255,255,255,0.5) !important;
  border-bottom-color: rgba(60,100,145,0.15) !important;
}
html body[data-theme="light"] .mi-arc-label {
  color: var(--gold) !important;
}
html body[data-theme="light"] .mi-arc-stage {
  background: rgba(255,255,255,0.4) !important;
}
html body[data-theme="light"] .mi-arc-stage-num {
  color: var(--gold) !important;
}
html body[data-theme="light"] .mi-arc-stage-name {
  color: var(--smoke3) !important;
}

/* State cards */
html body[data-theme="light"] .mi-body {
  background: transparent !important;
}
html body[data-theme="light"] .mi-state-grid {
  background: transparent !important;
}
html body[data-theme="light"] .mi-state-card {
  background: rgba(255,255,255,0.75) !important;
  border-color: rgba(60,100,145,0.20) !important;
  box-shadow: 0 2px 8px rgba(60,100,145,0.08) !important;
}
html body[data-theme="light"] .mi-card-header {
  background: rgba(255,255,255,0.5) !important;
  border-bottom-color: rgba(60,100,145,0.12) !important;
}
html body[data-theme="light"] .mi-state-code {
  color: var(--smoke) !important;
}
html body[data-theme="light"] .mi-state-name {
  color: var(--smoke2) !important;
}
html body[data-theme="light"] .mi-state-stage-badge {
  border-color: rgba(60,100,145,0.25) !important;
}
html body[data-theme="light"] .mi-meta-item {
  color: var(--smoke3) !important;
}
html body[data-theme="light"] .mi-meta-sep {
  color: var(--smoke4) !important;
}
html body[data-theme="light"] .mi-card-tabs {
  border-bottom-color: rgba(60,100,145,0.15) !important;
  background: rgba(240,244,249,0.6) !important;
}
html body[data-theme="light"] .mi-card-tab {
  color: var(--smoke3) !important;
}
html body[data-theme="light"] .mi-card-tab.mi-tab-active {
  color: var(--smoke) !important;
  border-bottom-color: var(--gold) !important;
}
html body[data-theme="light"] .mi-card-body {
  background: transparent !important;
}
html body[data-theme="light"] .mi-panel-label {
  color: var(--smoke4) !important;
}
html body[data-theme="light"] .mi-panel-text {
  color: var(--smoke2) !important;
}
html body[data-theme="light"] .mi-panel-watch {
  color: var(--smoke) !important;
  background: rgba(60,100,145,0.05) !important;
  border-left-color: rgba(60,100,145,0.35) !important;
}
html body[data-theme="light"] .mi-chip {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(60,100,145,0.25) !important;
  color: var(--gold) !important;
}
html body[data-theme="light"] .mi-chip:hover {
  background: rgba(60,100,145,0.08) !important;
  border-color: rgba(60,100,145,0.45) !important;
}

/* Ask Kait section */
html body[data-theme="light"] .mi-ask {
  background: rgba(255,255,255,0.5) !important;
  border-color: rgba(60,100,145,0.15) !important;
}
html body[data-theme="light"] .mi-ask-label {
  color: var(--gold) !important;
}
html body[data-theme="light"] .mi-custom-input {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(60,100,145,0.25) !important;
  color: var(--smoke) !important;
}
html body[data-theme="light"] .mi-custom-input::placeholder {
  color: var(--smoke4) !important;
}
html body[data-theme="light"] .mi-custom-btn {
  background: var(--gold) !important;
  color: var(--surface) !important;
}

/* Race chart section */
html body[data-theme="light"] .mi-race-wrap {
  background: rgba(255,255,255,0.5) !important;
  border-bottom-color: rgba(60,100,145,0.15) !important;
}
html body[data-theme="light"] .mi-race-explainer {
  background: rgba(60,100,145,0.04) !important;
  border-left-color: rgba(60,100,145,0.4) !important;
}
html body[data-theme="light"] .mi-race-explainer p {
  color: var(--smoke3) !important;
}
html body[data-theme="light"] .mi-race-explainer strong {
  color: var(--smoke) !important;
}
html body[data-theme="light"] .mi-race-leg {
  color: var(--smoke3) !important;
}
html body[data-theme="light"] .mi-race-toggle {
  border-color: rgba(60,100,145,0.25) !important;
  color: var(--smoke3) !important;
  background: rgba(255,255,255,0.6) !important;
}
html body[data-theme="light"] .mi-race-toggle:hover {
  background: rgba(60,100,145,0.08) !important;
  border-color: rgba(60,100,145,0.45) !important;
  color: var(--smoke) !important;
}
html body[data-theme="light"] .mi-race-toggle.mi-race-toggle-active {
  background: rgba(60,100,145,0.12) !important;
  border-color: rgba(60,100,145,0.55) !important;
  color: var(--smoke) !important;
}

/* Story chip and popup */
html body[data-theme="light"] .mi-story-chip {
  background: rgba(60,100,145,0.06) !important;
  border-color: rgba(60,100,145,0.25) !important;
  color: var(--gold) !important;
}
html body[data-theme="light"] .mi-story-chip:hover {
  background: rgba(60,100,145,0.14) !important;
}
html body[data-theme="light"] .mi-story-popup {
  background: var(--surface) !important;
  border-color: rgba(60,100,145,0.25) !important;
  box-shadow: 0 8px 32px rgba(60,100,145,0.15) !important;
}
html body[data-theme="light"] .mi-story-popup-head {
  border-bottom-color: rgba(60,100,145,0.12) !important;
  color: var(--gold) !important;
}
html body[data-theme="light"] .mi-story-popup-close {
  color: var(--smoke3) !important;
}
html body[data-theme="light"] .mi-story-popup-body {
  color: var(--smoke2) !important;
}

/* Signals section */
html body[data-theme="light"] #mi-signals-section {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — VA NOTE + RRW DEPT BLOCKS
   ══════════════════════════════════════════════════════════════════ */

html body[data-theme="light"] .kc-rrw-dept-block {
  background: rgba(255,255,255,0.6) !important;
  border-color: rgba(60,100,145,0.20) !important;
}
html body[data-theme="light"] .kc-rrw-dept-name {
  color: var(--smoke) !important;
}
html body[data-theme="light"] .kc-rrw-dept-owner {
  color: var(--smoke3) !important;
}
html body[data-theme="light"] .kc-rrw-dept-impact {
  color: var(--smoke2) !important;
}
html body[data-theme="light"] .kc-rrw-row {
  background: rgba(255,255,255,0.5) !important;
  border-bottom-color: rgba(60,100,145,0.12) !important;
}
html body[data-theme="light"] .kc-rrw-row:hover {
  background: rgba(60,100,145,0.06) !important;
}
html body[data-theme="light"] .kc-rrw-row-title {
  color: var(--smoke) !important;
}
html body[data-theme="light"] .kc-rrw-row-summary {
  color: var(--smoke3) !important;
}
html body[data-theme="light"] .kc-rrw-changed {
  background: rgba(60,100,145,0.04) !important;
  border-left-color: rgba(60,100,145,0.35) !important;
  color: var(--smoke2) !important;
}

/* ══════════════════════════════════════════════════════════════════
   USER CHIP + BRAND CARD + COLLAPSE ARROW — LIGHT MODE
   ══════════════════════════════════════════════════════════════════ */

/* User chip — dark mode default */
.tb-user-chip {
  border: 1px solid rgba(160,120,32,0.35);
  background: rgba(13,18,30,0.80);
}
.tb-chip-icon { color: rgba(160,120,32,0.55); }
.tb-chip-name { color: rgba(160,120,32,0.65); }
.tb-chip-role { color: rgba(160,120,32,0.35); }

/* User chip — light mode */
html body[data-theme="light"] .tb-user-chip {
  border: 1.5px solid rgba(60,100,145,0.35) !important;
  background: rgba(255,255,255,0.85) !important;
  box-shadow: 0 1px 3px rgba(45,90,143,0.10) !important;
}
html body[data-theme="light"] .tb-chip-icon {
  color: var(--gold) !important;
}
html body[data-theme="light"] .tb-chip-name {
  color: var(--smoke) !important;
}
html body[data-theme="light"] .tb-chip-role {
  color: var(--smoke3) !important;
}

/* KAIT brand card — remove gold glow in light mode */
html body[data-theme="light"] .sb-brand-card {
  box-shadow:
    0 0 0 1px rgba(60,100,145,0.30),
    0 0 0 2px rgba(60,100,145,0.08),
    inset 0 2px 6px rgba(255,255,255,0.80),
    0 3px 10px rgba(45,90,143,0.12) !important;
  background: linear-gradient(170deg, var(--surface) 0%, var(--surface2) 100%) !important;
}
html body[data-theme="light"] .sb-brand-card .corner {
  border-color: rgba(60,100,145,0.30) !important;
}

/* Sidebar collapse arrow — already handled but ensure visibility */
html body[data-theme="light"] #sb-toggle {
  background: var(--surface) !important;
  border-color: rgba(60,100,145,0.30) !important;
  color: var(--gold) !important;
  box-shadow: 0 2px 8px rgba(45,90,143,0.12) !important;
}

/* ── Cinematic intro overlay ─────────────────────────────────────── */
#kait-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg, var(--ink-deep));
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
body[data-theme="light"] #kait-intro-overlay {
  background: var(--surface);
}
.kio-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  animation: kio-fade-in 1.2s ease forwards;
}
@keyframes kio-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kio-glyph {
  font-size: 28px;
  color: rgba(160,120,32,0.5);
  margin-bottom: 28px;
  animation: kio-pulse 3s ease-in-out infinite;
}
@keyframes kio-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}
.kio-name {
  font-family: var(--f-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.32em;
  color: rgba(200,175,110,0.9);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.kio-sub {
  font-family: var(--f-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(180,160,100,0.35);
  text-transform: uppercase;
  margin-bottom: 48px;
}
.kio-status {
  font-family: var(--f-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(180,160,100,0.3);
  text-transform: uppercase;
  margin-bottom: 14px;
  min-height: 14px;
  transition: opacity 0.4s;
}
.kio-bar-wrap {
  width: 160px;
  height: 1px;
  background: rgba(160,120,32,0.12);
  border-radius: 1px;
  overflow: hidden;
}
.kio-bar {
  height: 100%;
  width: 0%;
  background: rgba(160,120,32,0.55);
  border-radius: 1px;
  transition: width 1.8s ease;
}

/* ── KAIT Intro — element highlight pulse ──────────────────────
   Applied via postMessage from intro.html during the intro tour.
   The .intro-hl class is added/removed by the message handler.   */
.intro-hl {
  outline: 1px solid rgba(180,140,40,0.0) !important;
  box-shadow: 0 0 0 0 rgba(180,140,40,0) !important;
  animation: intro-hl-pulse 2.4s ease forwards !important;
  position: relative;
  z-index: 1;
}
@keyframes intro-hl-pulse {
  0%   { outline-color: rgba(180,140,40,0.0); box-shadow: 0 0 0 0 rgba(180,140,40,0); }
  18%  { outline-color: rgba(180,140,40,0.8); box-shadow: 0 0 18px 4px rgba(180,140,40,0.22); }
  65%  { outline-color: rgba(180,140,40,0.45); box-shadow: 0 0 24px 6px rgba(180,140,40,0.12); }
  100% { outline-color: rgba(180,140,40,0.0); box-shadow: 0 0 0 0 rgba(180,140,40,0); }
}


/* ══ FIRST-TIME USER TOUR ══════════════════════════════════════════════
   Spotlight walkthrough chrome. The JS engine (app/19-tour.js) positions
   the spotlight, four masks, and the card inline (top/left/width/height +
   data-arrow); this section owns ONLY appearance, layering, transitions,
   and show/hide states (.active on the overlay, .visible on the card). */

.tour-overlay {
  position: fixed; inset: 0;
  z-index: 10500;
  pointer-events: none;
  visibility: hidden; opacity: 0;
  transition: opacity 0.3s var(--ease, ease), visibility 0.3s;
}
.tour-overlay.active { visibility: visible; opacity: 1; }

.tour-mask {
  position: fixed;
  background: rgba(2, 5, 12, 0.82);
  pointer-events: auto;
  transition: top 0.35s var(--ease, ease), left 0.35s var(--ease, ease),
              width 0.35s var(--ease, ease), height 0.35s var(--ease, ease);
}

.tour-spotlight {
  position: fixed;
  border: 1px solid var(--gold, #c9a440);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(201, 164, 64, 0.25),
              0 0 22px rgba(201, 164, 64, 0.35),
              inset 0 0 14px rgba(201, 164, 64, 0.12);
  pointer-events: none;
  transition: top 0.35s var(--ease, ease), left 0.35s var(--ease, ease),
              width 0.35s var(--ease, ease), height 0.35s var(--ease, ease);
}

.tour-card {
  position: fixed;
  width: 340px; max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, var(--ink2, #0a1020) 0%, var(--ink-deep, #060a14) 100%);
  border: 1px solid var(--gold-dim, rgba(201, 164, 64, 0.45));
  border-radius: 6px;
  padding: 18px 20px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.28s var(--ease, ease), transform 0.28s var(--ease, ease),
              top 0.35s var(--ease, ease), left 0.35s var(--ease, ease);
}
.tour-card.visible { opacity: 1; transform: translateY(0); }

/* Card arrow -- side chosen by the engine via data-arrow */
.tour-arrow { position: absolute; width: 12px; height: 12px;
  background: var(--ink2, #0a1020);
  border-left: 1px solid var(--gold-dim, rgba(201,164,64,0.45));
  border-top: 1px solid var(--gold-dim, rgba(201,164,64,0.45));
}
.tour-card[data-arrow="bottom"] .tour-arrow { bottom: -7px; left: 50%; transform: translateX(-50%) rotate(225deg); }
.tour-card[data-arrow="top"]    .tour-arrow { top: -7px;    left: 50%; transform: translateX(-50%) rotate(45deg); }
.tour-card[data-arrow="left"]   .tour-arrow { left: -7px;   top: 50%;  transform: translateY(-50%) rotate(315deg); }
.tour-card[data-arrow="right"]  .tour-arrow { right: -7px;  top: 50%;  transform: translateY(-50%) rotate(135deg); }

.tour-step-label {
  font-family: var(--f-mono, monospace);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold, #c9a440);
  margin-bottom: 8px;
}
.tour-title {
  font-family: var(--f-display, serif);
  font-size: 18px; font-weight: 500;
  color: var(--gold-lt, #e8d5a3);
  margin-bottom: 8px; line-height: 1.3;
}
.tour-body {
  font-family: var(--f-ui, sans-serif);
  font-size: 13px; line-height: 1.55;
  color: rgba(232, 213, 163, 0.78);
  margin-bottom: 16px;
}
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-progress {
  font-family: var(--f-mono, monospace);
  font-size: 10px; letter-spacing: 0.12em;
  color: rgba(232, 213, 163, 0.45);
}
.tour-btns { display: flex; gap: 8px; }
.tour-btn {
  font-family: var(--f-ui, sans-serif);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  padding: 7px 14px; border-radius: 3px; cursor: pointer;
  background: none;
  border: 1px solid var(--gold-dim, rgba(201,164,64,0.45));
  color: var(--gold-lt, #e8d5a3);
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.tour-btn:hover { border-color: var(--gold, #c9a440); background: rgba(201, 164, 64, 0.08); }
.tour-btn:disabled { opacity: 0.35; cursor: default; }
.tour-btn.ghost { border-color: transparent; color: rgba(232, 213, 163, 0.5); }
.tour-btn.ghost:hover { color: var(--gold-lt, #e8d5a3); background: none; }
.tour-btn.primary {
  background: linear-gradient(180deg, var(--gold, #c9a440) 0%, var(--gold-metal-3, #9a7a28) 100%);
  border-color: var(--gold, #c9a440);
  color: var(--ink-deep, #060a14);
}
.tour-btn.primary:hover { filter: brightness(1.12); }

/* ── prefers-reduced-motion: reduce ──────────────────────────────────────────
   UX Audit §10e: this codebase's ~205 animation/transition declarations honored this
   OS-level accessibility preference for only 2 of them (main-2-shell-sidebar.css's
   kait-ai-shimmer-* classes) before this. A user with vestibular sensitivity, migraine
   triggers, or motion sickness who explicitly asks their OS to reduce motion should get
   that everywhere, not in 2 of ~205 places.
   Placed in THIS file specifically because it's the last one loaded (see index.html's
   <link> order) — that matters for the .intro-hl override below: CSS resolves an
   equal-specificity, equal-!important tie by SOURCE ORDER, not by "the media query wins,"
   so a global override sitting in an earlier-loaded file would lose to .intro-hl's own
   `!important` a few hundred lines above in this same file. Putting both in the last file,
   with the override written after the original rule, is what makes it actually win. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* .intro-hl sets its own animation shorthand directly (not just the animation-duration
     longhand), so the universal rule above can't touch it -- same specificity, same
     !important tier, and this declaration comes later in the same file, so it wins the
     tie-break correctly. */
  .intro-hl { animation: none !important; }
  /* CSP style-src hardening (3rd-party audit): converting 957 static inline style="..."
     attributes to classes surfaced 4 more elements with their own shorthand animation
     or transition rules, !important, in generated-inline-styles.css -- a blinking
     Kait-typing cursor, a 3-dot staggered pulse indicator (one class per dot, each with
     its own animation-delay), and a hover opacity/border-color transition. Same pattern
     as .intro-hl above: explicit override here, in the same file as (and after) the
     reduced-motion rule, rather than relying on generated-inline-styles.css happening to
     load earlier in index.html. */
  .gsc-1593968488 { animation: none !important; }
  .gsc-2256c32a54 { animation: none !important; }
  .gsc-28fd9e1a2a { animation: none !important; }
  .gsc-998dd0fb4d { animation: none !important; }
  .gsc-064de5319b { transition: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR BRAND PLAQUE WORDMARK — LIGHT MODE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   The plaque read as BLANK in light mode. Two compounding causes, both
   measured rather than guessed:

   1. The letters are `.kait-ai` spans inside `.lcard-front-wordmark`, painted
      with a 9-stop gradient clipped to the glyphs. That gradient is defined
      ONCE, for the dark shell, and has NO light-mode override anywhere. On the
      plaque's near-white surface its stops compute to 3.81:1 (--gold-lt and
      --gold-metal-2, which hold 0-12%, 32%, 80-92% and 100% -- i.e. most of the
      letter) and 6.75:1 (--gold, --gold-metal-3). Pale blue on white.

   2. `.lcard-front-wordmark` carries THREE BLACK drop-shadows --
      rgba(0,0,0,1), rgba(0,0,0,0.75) and a gold glow -- designed to lift gold
      letters off a dark card. Behind pale blue letters on a WHITE card they
      render as grey mud around every glyph, which is what turned "faint" into
      "looks empty".

   NOTE ON WHY AN EARLIER ATTEMPT DID NOTHING: there is a rule elsewhere
   targeting `.sb-header .sbh-name` / `.sbh-wordmark`. **Those classes do not
   exist in the markup** -- index.html:253 uses `.lcard-front-wordmark` and
   `.kait-ai`. Editing that rule changes nothing on screen. Verified against the
   real DOM, not the stylesheet.

   FIX: a solid dark fill instead of a clipped gradient (gradient-on-text is
   fragile and buys nothing at 28px), and no black shadows. --gold-metal-4
   computes to 11.05:1 on this plaque. This file is stylesheet #17 of 18, so it
   wins over the earlier definitions by cascade order. */

html body[data-theme="light"] .sb-brand-card .lcard-front-wordmark {
  filter: none !important;
}
html body[data-theme="light"] .sb-brand-card .lcard-front-wordmark .kait-ai {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--gold-metal-4) !important;
  color: var(--gold-metal-4) !important;
  filter: none !important;
}
html body[data-theme="light"] .sb-brand-card .lcard-front-sub {
  color: var(--smoke3) !important;   /* 7.89:1 -- the eyebrow under the wordmark */
  -webkit-text-fill-color: var(--smoke3) !important;
  text-shadow: none !important;
}