/* 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;
  --bg: #101c20; --panel: #17282d; --panel2: #20343a;
  --text: #f6f6f0; --muted: #a6b7ae; --accent: #b4e7d3;
  --line: #354447; --gold: #e6ca96; --danger: #f09b9b;
  --theme-page: var(--bg);
  --theme-header: #101c20;
  --theme-surface-panel: var(--panel);
  --theme-surface-soft: var(--panel2);
  --theme-surface-ink: var(--text);
  --theme-surface-muted: var(--muted);
  --theme-surface-line: var(--line);
  --theme-field: #101c20;
  --theme-field-line: #62786d;
  --theme-hover: #29413f;
  --theme-raised: #1d3135;
  --theme-glass: #17282dfa;
  --theme-dock: #17282df5;
  --theme-on-accent: #101c20;
  --theme-accent-hover: #cef0e2;
  --theme-positive: #a7dfb5;
  --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: #253437;
  --theme-neutral-line: #4c5e59;
  --theme-selected: #244039;
  --theme-user-message: #29483d;
  --theme-dot: #a6b7ae20;
  --theme-glow: #b4e7d30a;
  --theme-shadow: #0005;
  --theme-shadow-deep: #0008;
  --theme-overlay: #101c20b8;
  --theme-blue: #8ec1f0;
  --theme-blue-bg: #162b39;
  --theme-violet: #bcb1ef;
  --theme-violet-bg: #29253c;
  --theme-login-glow: #244039;
  --theme-brand-ink: #b4e7d3;
  --theme-brand-bg: #213c34;
  --theme-brand-line: #526f62;
  --theme-stat-line: #8bb6a3;
  --border: var(--line);
}

:root[data-theme="light"] {
  --theme-scheme: light;
  --bg: #f6f6f0; --panel: #ffffff; --panel2: #edf1e9;
  --text: #101c20; --muted: #56675f; --accent: #23695b;
  --line: #dce1d9; --gold: #775617; --danger: #aa343c;
  --theme-page: var(--bg); --theme-header: #f6f6f0;
  --theme-surface-panel: var(--panel); --theme-surface-soft: var(--panel2);
  --theme-surface-ink: var(--text); --theme-surface-muted: var(--muted);
  --theme-surface-line: var(--line); --theme-field: #ffffff;
  --theme-field-line: #82958a; --theme-hover: #e6eee4;
  --theme-raised: #ffffff; --theme-glass: #fffffff5; --theme-dock: #fffffff7;
  --theme-on-accent: #ffffff; --theme-accent-hover: #1b5449;
  --theme-positive: #29673a; --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: #edf0e9; --theme-neutral-line: #bdc9bc;
  --theme-selected: #dfefe4; --theme-user-message: #d5ecdf;
  --theme-dot: #56675f20; --theme-glow: #b4e7d326;
  --theme-shadow: #101c201a; --theme-shadow-deep: #101c2030;
  --theme-overlay: #101c2066;
  --theme-blue: #276385; --theme-blue-bg: #e6f0f7;
  --theme-violet: #655095; --theme-violet-bg: #eeebf8;
  --theme-login-glow: #dfefe4;
  --theme-brand-ink: #23695b; --theme-brand-bg: #e2f0e7;
  --theme-brand-line: #9bbcab; --theme-stat-line: #9bbcab;
}

/* 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: #f6f6f0; --panel: #ffffff; --panel2: #edf1e9;
    --text: #101c20; --muted: #56675f; --accent: #23695b;
    --line: #dce1d9; --gold: #775617; --danger: #aa343c;
    --theme-page: var(--bg); --theme-header: #f6f6f0;
    --theme-surface-panel: var(--panel); --theme-surface-soft: var(--panel2);
    --theme-surface-ink: var(--text); --theme-surface-muted: var(--muted);
    --theme-surface-line: var(--line); --theme-field: #ffffff;
    --theme-field-line: #82958a; --theme-hover: #e6eee4;
    --theme-raised: #ffffff; --theme-glass: #fffffff5; --theme-dock: #fffffff7;
    --theme-on-accent: #ffffff; --theme-accent-hover: #1b5449;
    --theme-positive: #29673a; --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: #edf0e9; --theme-neutral-line: #bdc9bc;
    --theme-selected: #dfefe4; --theme-user-message: #d5ecdf;
    --theme-dot: #56675f20; --theme-glow: #b4e7d326;
    --theme-shadow: #101c201a; --theme-shadow-deep: #101c2030;
    --theme-overlay: #101c2066;
    --theme-blue: #276385; --theme-blue-bg: #e6f0f7;
    --theme-violet: #655095; --theme-violet-bg: #eeebf8;
    --theme-login-glow: #dfefe4;
    --theme-brand-ink: #23695b; --theme-brand-bg: #e2f0e7;
    --theme-brand-line: #9bbcab; --theme-stat-line: #9bbcab;
  }
}

: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(--instance-on-primary, 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(--instance-on-primary, var(--theme-on-accent));
}
.surface-page button:hover, .surface-page .btn:hover { background: var(--instance-primary-hover, var(--theme-accent-hover)); }
/* Keep primary actions visible when their fill matches the page or panel. */
html[data-instance-theme=true] :is(
  form:not(.chat-form) button:not([type=button]):not(.ghost-btn):not(.stop):not(.google-signin),
  .connection-primary, .map-toolbar .new-object, .proposal-primary, .connect-btn,
  .act-btn, .ontology-heading .btn, .ontology-empty .btn, .map-empty .btn
) { border-color: var(--instance-primary-border, transparent); }
html[data-instance-buttons] :is(
  form:not(.chat-form) button:not([type=button]):not(.ghost-btn):not(.stop):not(.google-signin),
  .connection-primary, .map-toolbar .new-object, .proposal-primary, .connect-btn,
  .act-btn, .ontology-heading .btn, .ontology-empty .btn, .map-empty .btn
) { border-radius: var(--instance-button-radius); }
/* Preserve the configured primary shade on text actions, without changing the
   hover treatment of provider, ghost, destructive, or graph/icon controls. */
html[data-instance-theme=true] :is(
  form:not(.chat-form) button:not([type=button]):not(.ghost-btn):not(.stop):not(.google-signin),
  .connection-primary, .map-toolbar .new-object, .proposal-primary, .connect-btn,
  .act-btn, .ontology-heading .btn, .ontology-empty .btn, .map-empty .btn
):hover {
  background: var(--instance-primary-hover, var(--theme-accent-hover));
  filter: none;
}
.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 { color: var(--theme-brand-ink); background: var(--theme-brand-bg); border-color: var(--theme-brand-line); }
.empty-mark { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 3%, transparent), 0 0 0 28px color-mix(in srgb, var(--accent) 2%, transparent); }
.surface-page .surface-eyebrow, .login-story > small { color: var(--muted); }
.surface-empty > .ui-icon, .surface-page .access-page section h2 > .ui-icon,
.surface-page .agora-columns > section > h2 .ui-icon,
.surface-page .costs-heading h1 .ui-icon { color: var(--theme-brand-ink); }
.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 { color: var(--instance-on-primary, var(--theme-on-accent)); }
.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-brand-bg); border-left-color: var(--theme-brand-line); }
.surface-context-note > .ui-icon { color: var(--theme-brand-ink); }

/* Connections and role administration retain each service's visual identity. */
.connection-journey { background: var(--surface-panel); }
.journey-number { color: var(--theme-brand-ink); border-color: var(--theme-brand-line); }
.service-icon { color: var(--theme-blue); background: var(--theme-blue-bg); border-color: var(--theme-blue-line, 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-violet-line, 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); }
.surface-page.simple-login-page { background: var(--theme-page); }
.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 - 72px); min-height: calc(100dvh - 72px); }
.simple-login-page .theme-standalone .theme-control { display: flex; align-items: center; justify-content: center; gap: 12px; width: auto; border: 0; padding: 0; }
.simple-login-page .theme-standalone select { width: auto; margin: 0; background: transparent; }
@media (max-width: 600px) {
  .theme-control select, .surface-page .theme-control select { font-size: 16px; }
  .account-popover { max-width: calc(100vw - 24px); }
}