/* Color is a preference, never a change in hierarchy or meaning.
   Loaded after page styles; branded SVG fills remain their original colors. */
:root {
  --theme-scheme: dark;
  --theme-page: #0b151d;
  --theme-header: #10191f;
  --theme-surface-panel: #101d26;
  --theme-surface-soft: #12212b;
  --theme-surface-ink: #f0efe7;
  --theme-surface-muted: #a6b6be;
  --theme-surface-line: #293b47;
  --theme-field: #0b161f;
  --theme-field-line: #48616c;
  --theme-hover: #203640;
  --theme-raised: #12232d;
  --theme-glass: #142028fa;
  --theme-dock: #15232bf5;
  --theme-on-accent: #0b2725;
  --theme-accent-hover: #a3e9dc;
  --theme-positive: #b4ddcf;
  --theme-positive-bg: #1a2e28;
  --theme-positive-line: #38534c;
  --theme-warning: #e6ca96;
  --theme-warning-bg: #302b20;
  --theme-warning-line: #605339;
  --theme-danger-bg: #351f27;
  --theme-danger-line: #895059;
  --theme-neutral-bg: #1b2732;
  --theme-neutral-line: #3b4c5c;
  --theme-selected: #152c33;
  --theme-user-message: #284238;
  --theme-dot: #68808626;
  --theme-glow: #1a303037;
  --theme-shadow: #0005;
  --theme-shadow-deep: #0008;
  --theme-overlay: #030b13b8;
  --theme-blue: #8ec1f0;
  --theme-blue-bg: #162b39;
  --theme-violet: #bcb1ef;
  --theme-violet-bg: #29253c;
  --theme-login-glow: #1b3738;
  --theme-brand-ink: var(--theme-positive);
  --theme-brand-bg: var(--theme-positive-bg);
  --theme-brand-line: var(--theme-positive-line);
  --theme-stat-line: #749789;
  --border: var(--line);
}

:root[data-theme="light"] {
  --theme-scheme: light;
  --bg: #f2f7f9; --panel: #ffffff; --panel2: #e8f1f5;
  --text: #1d3038; --muted: #536773; --accent: #0b7285;
  --line: #ccd9df; --gold: #806022; --danger: #aa343c;
  --theme-page: #f2f7f9; --theme-header: #fbfdfe;
  --theme-surface-panel: #ffffff; --theme-surface-soft: #e8f1f5;
  --theme-surface-ink: #1d3038; --theme-surface-muted: #536773;
  --theme-surface-line: #ccd9df; --theme-field: #fbfdfe;
  --theme-field-line: #78939c; --theme-hover: #e4eff4;
  --theme-raised: #ffffff; --theme-glass: #fffffff5; --theme-dock: #fffffff7;
  --theme-on-accent: #ffffff; --theme-accent-hover: #075d70;
  --theme-positive: #1d6651; --theme-positive-bg: #e4f1e9;
  --theme-positive-line: #9cbfac;
  --theme-warning: #775617; --theme-warning-bg: #faf0d8;
  --theme-warning-line: #cdb880;
  --theme-danger-bg: #fbe9e8; --theme-danger-line: #d5a09f;
  --theme-neutral-bg: #edf0f1; --theme-neutral-line: #bbc8cc;
  --theme-selected: #dff1f5; --theme-user-message: #d9edf3;
  --theme-dot: #53778a26; --theme-glow: #b5dce83b;
  --theme-shadow: #20384721; --theme-shadow-deep: #20384730;
  --theme-overlay: #243f4f66;
  --theme-blue: #276385; --theme-blue-bg: #e6f0f7;
  --theme-violet: #655095; --theme-violet-bg: #eeebf8;
  --theme-login-glow: #dcecf3;
  --theme-brand-ink: #0b7285; --theme-brand-bg: #e2f1f5;
  --theme-brand-line: #95bfca; --theme-stat-line: #95bfca;
}

/* System remains usable when scripting is unavailable. A saved explicit choice
   is applied before styles load and therefore takes priority over this fallback. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --theme-scheme: light;
    --bg: #f2f7f9; --panel: #ffffff; --panel2: #e8f1f5;
    --text: #1d3038; --muted: #536773; --accent: #0b7285;
    --line: #ccd9df; --gold: #806022; --danger: #aa343c;
    --theme-page: #f2f7f9; --theme-header: #fbfdfe;
    --theme-surface-panel: #ffffff; --theme-surface-soft: #e8f1f5;
    --theme-surface-ink: #1d3038; --theme-surface-muted: #536773;
    --theme-surface-line: #ccd9df; --theme-field: #fbfdfe;
    --theme-field-line: #78939c; --theme-hover: #e4eff4;
    --theme-raised: #ffffff; --theme-glass: #fffffff5; --theme-dock: #fffffff7;
    --theme-on-accent: #ffffff; --theme-accent-hover: #075d70;
    --theme-positive: #1d6651; --theme-positive-bg: #e4f1e9;
    --theme-positive-line: #9cbfac;
    --theme-warning: #775617; --theme-warning-bg: #faf0d8;
    --theme-warning-line: #cdb880;
    --theme-danger-bg: #fbe9e8; --theme-danger-line: #d5a09f;
    --theme-neutral-bg: #edf0f1; --theme-neutral-line: #bbc8cc;
    --theme-selected: #dff1f5; --theme-user-message: #d9edf3;
    --theme-dot: #53778a26; --theme-glow: #b5dce83b;
    --theme-shadow: #20384721; --theme-shadow-deep: #20384730;
    --theme-overlay: #243f4f66;
    --theme-blue: #276385; --theme-blue-bg: #e6f0f7;
    --theme-violet: #655095; --theme-violet-bg: #eeebf8;
    --theme-login-glow: #dcecf3;
    --theme-brand-ink: #0b7285; --theme-brand-bg: #e2f1f5;
    --theme-brand-line: #95bfca; --theme-stat-line: #95bfca;
  }
}

:root, .surface-page, .costs-page { color-scheme: var(--theme-scheme); }
/* Switching palettes is atomic: a dark button fading over a light panel would
   briefly lose contrast. Normal hover transitions resume after the change. */
html[data-theme-changing] *, html[data-theme-changing] *::before,
html[data-theme-changing] *::after { transition: none !important; }
.surface-page {
  --surface-line: var(--theme-surface-line);
  --surface-soft: var(--theme-surface-soft);
  --surface-panel: var(--theme-surface-panel);
  --surface-ink: var(--theme-surface-ink);
  --surface-muted: var(--theme-surface-muted);
  --surface-teal: var(--accent);
  --surface-gold: var(--gold);
  background: var(--theme-page);
}
::selection { color: var(--theme-on-accent); background: var(--accent); }
button, .btn { color: var(--theme-on-accent); }
input::placeholder, textarea::placeholder,
.surface-page input::placeholder, .surface-page textarea::placeholder { color: var(--muted); }
input, textarea, select { accent-color: var(--accent); }
.surface-page input:not([type=checkbox]):not([type=radio]),
.surface-page select, .surface-page textarea,
.access-page input:not([type=radio]):not([type=checkbox]), .access-page textarea {
  background: var(--theme-field); color: var(--text); border-color: var(--theme-field-line);
}
.surface-page :is(a, button, summary, input, textarea, select):focus-visible {
  outline-color: var(--accent);
}
.surface-page button, .surface-page .btn, .surface-page .connection-primary {
  color: var(--theme-on-accent);
}
.surface-page button:hover, .surface-page .btn:hover { background: var(--theme-accent-hover); }
.ghost-btn, .surface-page .ghost-btn, .surface-page .conn-actions .check {
  color: var(--text); border-color: var(--theme-field-line); background: transparent;
}
.surface-page .ghost-btn:hover, .surface-page .conn-actions .check:hover {
  color: var(--text); background: var(--theme-hover); border-color: var(--theme-field-line);
}
.surface-page .stop, .detail-actions .stop {
  color: var(--danger); border-color: var(--theme-danger-line); background: var(--theme-danger-bg);
}
.surface-page .stop:hover { color: var(--danger); background: var(--theme-danger-bg); border-color: var(--danger); }
.surface-page .error, .conn-status.error, .app-notice.error,
#agora-status[data-error=true], [data-action-status][data-error=true] { color: var(--danger); }
.surface-page code { color: var(--theme-blue); }
.topbar, .surface-page .surface-topbar { background: var(--theme-header); box-shadow: none; }
.workspace-nav a:hover, .surface-nav a:hover { background: var(--theme-hover); }
.workspace-nav a.active, .surface-nav a[aria-current=page] {
  background: linear-gradient(transparent, var(--theme-selected));
}
.avatar, .surface-avatar { background: var(--theme-brand-bg); color: var(--theme-brand-ink); border-color: var(--theme-brand-line); }
.account-popover, .surface-account > div { box-shadow: 0 12px 35px var(--theme-shadow); }
.surface-skip { color: var(--theme-on-accent) !important; }
.surface-heading-icon, .empty-mark { background: var(--theme-warning-bg); border-color: var(--theme-warning-line); }
.empty-mark { box-shadow: 0 0 0 14px color-mix(in srgb, var(--gold) 3%, transparent), 0 0 0 28px color-mix(in srgb, var(--gold) 2%, transparent); }
.surface-empty { background: var(--surface-panel); border-color: var(--theme-field-line); }
.surface-page .placeholder { border-color: var(--theme-field-line); }
.surface-page .pill { background: var(--theme-neutral-bg); color: var(--muted); border-color: var(--theme-neutral-line); }
.surface-page .pill.dest, .surface-page .pill.noun, .surface-page .pill.new,
.library-badge { color: var(--theme-positive); background: var(--theme-positive-bg); border-color: var(--theme-positive-line); }
.surface-page .pill.warn, .surface-page .pill.sens, .library-badge.review,
.count-badge { color: var(--theme-warning); background: var(--theme-warning-bg); border-color: var(--theme-warning-line); }
.library-badge.quiet { color: var(--muted); background: var(--theme-neutral-bg); border-color: var(--theme-neutral-line); }
.tone-ok { --tone: var(--theme-positive); }
.tone-warn { --tone: var(--theme-warning); }
.tone-error { --tone: var(--danger); }
.tone-neutral { --tone: var(--muted); }
.surface-page .card.stat { border-top-color: var(--theme-stat-line); }
.card.stat.tone-ok .stat-value, .conn-status.ok, .sticky-actions .ok, .diff .add { color: var(--theme-positive); }
.card.stat.tone-warn .stat-value { color: var(--theme-warning); }
.card.stat.tone-error .stat-value, .stats .sens b, .diff .del { color: var(--danger); }
.conv-list, .modal-box, .record, .card, .doc-row, .hist-row, .conv-row,
.conv-item, .table-wrap th, .table-wrap td { border-color: var(--line); }
.conv-list, .app-notice { box-shadow: 0 8px 28px var(--theme-shadow); }
.conv-del { color: var(--muted); }
.conv-del:hover, .conv-del.armed { color: var(--danger); background: var(--theme-danger-bg); }
.modal, .surface-page .modal { background: var(--theme-overlay); }
.modal-box, .surface-page .modal-box,
.surface-page .agora dialog, .agora .library-dialog,
.surface-page main.agora .library-dialog {
  background: var(--theme-raised); border-color: var(--theme-field-line);
  box-shadow: 0 24px 80px var(--theme-shadow-deep);
}
.library-dialog::backdrop, .surface-page .agora dialog::backdrop { background: var(--theme-overlay); }
.surface-page .modal-box .close { background: transparent; color: var(--muted); }
.surface-page .modal-box .close:hover { background: var(--theme-hover); }

/* The ontology, its readable object panel, and the auxiliary chat dock. */
body.canvas .workspace { background: radial-gradient(ellipse at 62% 44%, var(--theme-glow), transparent 62%), var(--bg); }
.workspace::before { background-image: radial-gradient(var(--theme-dot) .7px, transparent .7px); }
.graph-search-wrap, .map-toolbar select { background: var(--theme-field); }
.map-toolbar .canvas-add { background: var(--panel); border-color: var(--line); }
.map-toolbar .new-object, .chat-form .chat-send { color: var(--theme-on-accent); }
.workspace-briefing { background: var(--theme-glass); border-color: var(--line); box-shadow: 0 10px 40px var(--theme-shadow); }
#attention-list button, #attention-list a { background: var(--panel2); border-color: var(--line); border-left-color: var(--gold); }
.attention-marker { border-color: var(--theme-warning-line); }
.map-tools { background: var(--theme-glass); }
.map-tools button:hover, .map-tools button[aria-pressed=true], .chat-form .voice-toggle:hover { background: var(--theme-selected); }
.map-footer { color: var(--muted); background: var(--theme-header); border-color: var(--line); }
.legend-disclosure .legend { box-shadow: 0 8px 40px var(--theme-shadow); }
.legend .sw { background: var(--muted); }
.legend-disclosure .sw.live, .legend .sw.dashed { border-color: var(--muted); }
.legend .sw.waiting { border-color: var(--theme-warning); }
.legend .sw.shp-note { background: var(--theme-violet); }
.legend .sw.shp-work { background: var(--accent); }
body.canvas .detail { background: var(--theme-glass); border-color: var(--theme-field-line); box-shadow: 0 16px 60px var(--theme-shadow); }
body.canvas .chat { background: var(--theme-dock); border-color: var(--theme-brand-line); box-shadow: 0 12px 50px var(--theme-shadow), 0 0 0 4px color-mix(in srgb, var(--accent) 3%, transparent); }
body.canvas .chat-grip::before { background: var(--muted); }
.chat-header #conv-current, .chat-header #conv-new, .llm-menu #llm-current { background: var(--theme-field); }
.msg.user { background: var(--theme-user-message); color: var(--text); }
.msg.assistant { background: var(--panel2); }
.msg.error { color: var(--danger); background: var(--theme-danger-bg); }
.msg.tool-chip { border-color: var(--theme-field-line); }
.chat-form .stop { color: var(--danger); background: var(--theme-danger-bg); }
.chat-form .voice-toggle[aria-pressed=true] { color: var(--danger); background: var(--theme-danger-bg); box-shadow: 0 0 0 1px var(--theme-danger-line); }
.canvas .pending-wrap #pending-btn { color: var(--theme-warning); background: var(--theme-warning-bg); border-color: var(--theme-warning-line); }
.pending-note { color: var(--theme-warning); border-color: var(--theme-warning-line); }
.context-review-nav { box-shadow: 0 4px 20px var(--theme-shadow); }

/* Read first, then act: work, knowledge and decisions. */
.library-scope { color: var(--theme-brand-ink); background: var(--theme-brand-bg); border-color: var(--theme-brand-line); }
.agora .library-card:hover { border-color: var(--theme-field-line); }
.agora .library-card[aria-current=true] { background: var(--theme-selected); border-color: var(--accent); }
.agora .library-card .card-open { color: var(--text); background: transparent; }
.agora .library-card .card-open:hover { color: var(--accent); background: transparent; }
.agora .library-detail, .surface-page .agora #work-detail:not(:empty),
.surface-page main.agora #work-detail.library-detail { background: var(--theme-raised); border-color: var(--theme-field-line); }
.agora .next-step { background: var(--theme-brand-bg); border-color: var(--theme-brand-line); }
.agora .next-step.review { background: var(--theme-warning-bg); border-color: var(--theme-warning-line); }
.surface-page .card .situation { background: var(--theme-field); border-color: var(--line); }
.surface-page .table-wrap tbody tr:hover { background: var(--theme-hover); }
.surface-page .bar-track { background: var(--panel2); }
.surface-context-note { background: var(--theme-warning-bg); }

/* Connections and role administration retain each service's visual identity. */
.connection-journey { background: var(--surface-panel); }
.journey-number { border-color: var(--theme-warning-line); }
.service-icon { color: var(--theme-blue); background: var(--theme-blue-bg); border-color: var(--theme-neutral-line); }
.service-gdrive { background: #f1f4ed; border-color: #c7d5cb; }
.service-files { color: var(--theme-warning); background: var(--theme-warning-bg); border-color: var(--theme-warning-line); }
.service-http { color: var(--theme-violet); background: var(--theme-violet-bg); border-color: var(--theme-neutral-line); }
.surface-page .service-file_table { color: var(--theme-positive); background: var(--theme-positive-bg); border-color: var(--theme-positive-line); }
.surface-page .kind-card { background: var(--theme-field); color: var(--text); border-color: var(--theme-field-line); }
.surface-page .kind-card:hover { background: var(--theme-selected); border-color: var(--accent); }
.surface-page .banner.ok, .surface-page .connection-message.success { color: var(--theme-positive); background: var(--theme-positive-bg); border-color: var(--theme-positive-line); }
.banner.error { color: var(--danger); background: var(--theme-danger-bg); }
.surface-page #credential, .surface-page .connection-message { color: var(--theme-warning); background: var(--theme-warning-bg); border-color: var(--theme-warning-line); }
.app-tile-icon { background: var(--theme-brand-bg); border-color: var(--theme-brand-line); }
.surface-page .app-tile:hover { border-color: var(--accent); }
.surface-page .sticky-actions { background: var(--theme-brand-bg); border-color: var(--theme-brand-line); box-shadow: 0 -8px 30px var(--theme-shadow); }
.surface-page .seg-opt { color: var(--muted); background: var(--theme-field); border-color: var(--theme-field-line); }
.surface-page .seg-opt.on { color: var(--accent); border-color: var(--accent); }

/* Costs and tables: positive, caution and unavailable remain distinct. */
.costs-filters, .costs-evidence-card, .costs-total, .costs-section, .costs-billing,
.costs-account-setup, .costs-scroll, .costs-total dl > div,
.costs-table th, .costs-table td, .costs-stat { border-color: var(--line); }
.surface-page .costs-picker summary b { background: var(--theme-field); border-color: var(--theme-field-line); }
.surface-page .costs-options { background: var(--theme-raised); border-color: var(--theme-field-line); box-shadow: 0 12px 32px var(--theme-shadow); }
.surface-page .costs-options button:hover { color: var(--text); background: var(--theme-hover); }
.surface-page .costs-options button[aria-pressed=true] { color: var(--accent); background: var(--theme-selected); }
.surface-page .costs-trend-options button:hover { color: var(--text); background: var(--theme-hover); }
.surface-page .costs-segments span { border-color: var(--theme-field-line); }
.surface-page .costs-segments input:checked + span { color: var(--theme-brand-ink); background: var(--theme-brand-bg); border-color: var(--accent); }
.costs-chart .grid { stroke: var(--line); }
.surface-page .costs-empty, .surface-page .costs-notice { border-color: var(--theme-field-line); }
.costs-table .costs-unknown, .costs-import-warning { color: var(--theme-warning); }
.costs-error { color: var(--danger); background: var(--theme-danger-bg); border-color: var(--danger); }

/* Entrance and delegated sign-in use the same appearance as the workspace. */
.surface-page.auth-page { background: radial-gradient(ellipse at 15% 30%, var(--theme-login-glow) 0, transparent 60%), var(--theme-page); }
.login-story { background-image: radial-gradient(var(--theme-dot) 1px, transparent 1px); }
.login-constellation > span { color: var(--accent); background: var(--theme-brand-bg); border-color: var(--theme-brand-line); box-shadow: 0 0 50px var(--theme-glow); }
.login-constellation > span:nth-of-type(2) { color: var(--gold); background: var(--theme-warning-bg); border-color: var(--theme-warning-line); }
.login-constellation i { background: linear-gradient(90deg, var(--theme-brand-line), var(--theme-warning-line)); }
.surface-page .google-signin { color: #1d292d; background: #f2f1e9; border-color: var(--theme-field-line); }
.surface-page .google-signin:hover { color: #1d292d; background: #ffffff; }

/* A native select keeps all three explicit choices keyboard and touch friendly. */
.theme-control { display: grid; grid-template-columns: 1fr; gap: 6px; min-width: 0; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.theme-control label, label.theme-control { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
.theme-control label { margin: 0; }
.theme-control > span { display: flex; align-items: center; gap: 7px; }
.theme-control .ui-icon { width: 16px; height: 16px; }
.theme-control select, .surface-page .theme-control select {
  display: block; width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px;
  color: var(--text); background: var(--theme-field); border: 1px solid var(--theme-field-line);
  border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer;
}
.theme-control select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.surface-account > div:has(.theme-control) { width: 230px; max-width: calc(100vw - 32px); padding: 12px; }
.surface-account > div > .theme-control:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.theme-standalone { display: none; }
.auth-page .theme-standalone { display: flex; justify-content: center; padding: 0 24px 28px; }
.auth-page .theme-standalone .theme-control { width: 220px; max-width: 100%; margin-top: 0; }
.auth-page .login-layout { min-height: calc(100vh - 116px); min-height: calc(100dvh - 116px); }
@media (min-width: 851px) {
  .auth-page:has(.login-layout) .theme-standalone { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); max-width: 1440px; margin: 0 auto; padding: 0 0 28px; }
  .auth-page:has(.login-layout) .theme-standalone .theme-control { grid-column: 2; justify-self: center; }
}
@media (max-width: 600px) {
  .theme-control select, .surface-page .theme-control select { font-size: 16px; }
  .account-popover { max-width: calc(100vw - 24px); }
}