:root {
  color-scheme: light;
  --color-bg-light: oklch(96.5% 0.012 155);
  --color-panel-light: oklch(99% 0.004 160);
  --color-panel-2-light: oklch(94.5% 0.012 160);
  --color-panel-3-light: oklch(91.5% 0.014 160);
  --color-text-light: oklch(23% 0.026 160);
  --color-muted-light: oklch(45% 0.028 160);
  --color-soft-light: oklch(55% 0.024 160);
  --color-border-light: oklch(82% 0.018 160);
  --color-border-strong-light: oklch(67% 0.042 160);
  --color-field-light: oklch(100% 0 0);
  --color-accent-light: oklch(43% 0.105 155);
  --color-accent-hover-light: oklch(36% 0.11 155);
  --color-accent-contrast-light: oklch(99% 0.004 155);
  --color-focus-light: oklch(56% 0.14 158);
  --color-good-light: oklch(51% 0.14 150);
  --color-warn-light: oklch(57% 0.12 78);
  --color-bad-light: oklch(52% 0.17 28);

  --color-bg-dark: oklch(17% 0.016 160);
  --color-panel-dark: oklch(22% 0.018 160);
  --color-panel-2-dark: oklch(27% 0.02 160);
  --color-panel-3-dark: oklch(31% 0.02 160);
  --color-text-dark: oklch(92% 0.01 160);
  --color-muted-dark: oklch(72% 0.018 160);
  --color-soft-dark: oklch(62% 0.018 160);
  --color-border-dark: oklch(36% 0.024 160);
  --color-border-strong-dark: oklch(50% 0.046 160);
  --color-field-dark: oklch(19% 0.016 160);
  --color-accent-dark: oklch(68% 0.13 153);
  --color-accent-hover-dark: oklch(75% 0.12 153);
  --color-accent-contrast-dark: oklch(16% 0.02 160);
  --color-focus-dark: oklch(76% 0.13 153);
  --color-good-dark: oklch(75% 0.14 150);
  --color-warn-dark: oklch(79% 0.13 82);
  --color-bad-dark: oklch(74% 0.14 28);

  --bg: var(--color-bg-light);
  --panel: var(--color-panel-light);
  --surface: var(--color-panel-light);
  --surface-2: var(--color-panel-2-light);
  --surface-3: var(--color-panel-3-light);
  --field-bg: var(--color-field-light);
  --line: var(--color-border-light);
  --line-strong: var(--color-border-strong-light);
  --text: var(--color-text-light);
  --muted: var(--color-muted-light);
  --soft: var(--color-soft-light);
  --accent: var(--color-accent-light);
  --accent-hover: var(--color-accent-hover-light);
  --accent-contrast: var(--color-accent-contrast-light);
  --focus: var(--color-focus-light);
  --good: var(--color-good-light);
  --warn: var(--color-warn-light);
  --bad: var(--color-bad-light);
  --shadow-elevated: 0 18px 44px oklch(18% 0.02 160 / 0.14);
  --shadow-subtle: 0 1px 2px oklch(18% 0.02 160 / 0.08);
  --hover-surface: color-mix(in oklab, var(--surface-2) 82%, var(--accent) 18%);
  --danger-bg: oklch(96% 0.035 28);
  --danger-border: oklch(72% 0.11 28);
  --danger-text: oklch(38% 0.14 28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--color-bg-dark);
    --panel: var(--color-panel-dark);
    --surface: var(--color-panel-dark);
    --surface-2: var(--color-panel-2-dark);
    --surface-3: var(--color-panel-3-dark);
    --field-bg: var(--color-field-dark);
    --line: var(--color-border-dark);
    --line-strong: var(--color-border-strong-dark);
    --text: var(--color-text-dark);
    --muted: var(--color-muted-dark);
    --soft: var(--color-soft-dark);
    --accent: var(--color-accent-dark);
    --accent-hover: var(--color-accent-hover-dark);
    --accent-contrast: var(--color-accent-contrast-dark);
    --focus: var(--color-focus-dark);
    --good: var(--color-good-dark);
    --warn: var(--color-warn-dark);
    --bad: var(--color-bad-dark);
    --shadow-elevated: 0 18px 44px oklch(5% 0.02 160 / 0.34);
    --shadow-subtle: 0 1px 2px oklch(5% 0.02 160 / 0.28);
    --hover-surface: color-mix(in oklab, var(--surface-2) 76%, var(--accent) 24%);
    --danger-bg: oklch(24% 0.04 28);
    --danger-border: oklch(48% 0.11 28);
    --danger-text: oklch(82% 0.1 28);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--color-bg-dark);
  --panel: var(--color-panel-dark);
  --surface: var(--color-panel-dark);
  --surface-2: var(--color-panel-2-dark);
  --surface-3: var(--color-panel-3-dark);
  --field-bg: var(--color-field-dark);
  --line: var(--color-border-dark);
  --line-strong: var(--color-border-strong-dark);
  --text: var(--color-text-dark);
  --muted: var(--color-muted-dark);
  --soft: var(--color-soft-dark);
  --accent: var(--color-accent-dark);
  --accent-hover: var(--color-accent-hover-dark);
  --accent-contrast: var(--color-accent-contrast-dark);
  --focus: var(--color-focus-dark);
  --good: var(--color-good-dark);
  --warn: var(--color-warn-dark);
  --bad: var(--color-bad-dark);
  --shadow-elevated: 0 18px 44px oklch(5% 0.02 160 / 0.34);
  --shadow-subtle: 0 1px 2px oklch(5% 0.02 160 / 0.28);
  --hover-surface: color-mix(in oklab, var(--surface-2) 76%, var(--accent) 24%);
  --danger-bg: oklch(24% 0.04 28);
  --danger-border: oklch(48% 0.11 28);
  --danger-text: oklch(82% 0.1 28);
}

body {
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.theme-toggle {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 700;
  min-width: 122px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-subtle);
  font: 650 12px/1.1 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  letter-spacing: 0;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
  background: var(--hover-surface);
  box-shadow: var(--shadow-elevated);
}

.theme-toggle:active {
  transform: translateY(1px);
}

.theme-toggle-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

.theme-toggle-label {
  color: var(--muted);
  font-weight: 650;
}

.theme-toggle-text {
  color: var(--text);
  font-weight: 760;
}

input,
select,
textarea {
  background: var(--field-bg);
  color: var(--text);
  border-color: var(--line);
}

input::placeholder,
textarea::placeholder {
  color: var(--soft);
  opacity: 1;
}

option {
  background: var(--field-bg);
  color: var(--text);
}

button {
  color: inherit;
}

/* Legacy page cleanup: stronger selectors for the older inline page CSS. */
input[type="text"],
input[type="number"],
input[type="search"],
input:not([type]),
select,
textarea,
#query,
#ticketInput,
#departmentSearch,
#personSearch,
#model,
#limit,
#personMode,
#typeSelect,
#depthSelect,
#scopeSelect,
.filter-mode select {
  background: var(--field-bg);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}

input[type="checkbox"] {
  accent-color: var(--accent);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 22%, transparent);
}

details,
summary,
.dropdown,
.menu,
.graph-menu,
.select-menu,
.department-menu,
.department-panel,
#departmentPanel,
#tagPanel,
#personPanel,
.ghost-button,
.filter-search,
.department-actions button,
.filter-mode,
.department-options,
.department-option,
.person-option,
.tag-option {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

.department-panel,
#departmentPanel,
#tagPanel,
#personPanel,
.select-menu,
.graph-menu {
  box-shadow: var(--shadow-elevated);
}

.department-actions button,
.department-option,
.person-option,
.tag-option {
  background: var(--surface-2);
}

.department-menu,
.filter-mode,
.department-options {
  background: transparent;
  box-shadow: none;
}

.field-caption {
  color: var(--muted);
}

.department-panel,
#departmentPanel,
#tagPanel,
#personPanel {
  background: var(--surface-2);
}

.department-option,
.person-option,
.tag-option {
  border: 1px solid transparent;
  background: var(--surface-3);
}

.filter-empty {
  background: transparent;
  color: var(--muted);
}

.department-option:hover,
.person-option:hover,
.tag-option:hover,
.ghost-button:hover,
summary:hover {
  background: var(--hover-surface);
}

/* Shared search page surfaces */
.nav-link,
.system-monitor,
.monitor-metric,
#searchForm,
.check,
.search-progress,
.result,
.filters,
.filter-panel,
.result-tools,
.select-menu,
.query-chip,
.empty,
.detail-box,
.summary-item {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-subtle);
}

.nav-link {
  color: var(--accent);
}

.nav-link:hover {
  background: var(--hover-surface);
}

.system-monitor,
.search-progress,
.result-tools,
.filter-panel {
  background: var(--surface-2);
}

.monitor-state,
.monitor-metric strong,
.result h2,
.result-title,
.detail-title {
  color: var(--text);
}

.monitor-head,
label,
.muted,
.result-meta,
.snippet,
.monitor-metric,
.summary-item,
.index-status {
  color: var(--muted);
}

.worker-cell,
.index-status,
.filter-search,
.department-option,
.person-option,
.tag-option {
  border-color: var(--line);
  background: var(--surface-3);
  color: var(--text);
}

.index-status.loaded,
.worker-cell.online,
.worker-cell.active {
  border-color: color-mix(in oklab, var(--good) 72%, var(--line));
  background: color-mix(in oklab, var(--good) 18%, var(--surface));
  color: var(--good);
}

.index-status.cold,
.worker-cell.loading {
  border-color: color-mix(in oklab, var(--warn) 72%, var(--line));
  background: color-mix(in oklab, var(--warn) 18%, var(--surface));
  color: var(--warn);
}

.index-status.offline,
.worker-cell.shutting_down,
.cancel-button {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}

button:not(.theme-toggle):not(.segment):not(.edge-scope button):not(.ghost-button):not(.cancel-button):not(.department-actions button):not(.edge-row):not(.hop-ticket),
.primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

button:not(.theme-toggle):not(.segment):not(.edge-scope button):not(.ghost-button):not(.cancel-button):not(.department-actions button):not(.edge-row):not(.hop-ticket):hover,
.primary:hover {
  background: var(--accent-hover);
}

.ghost-button,
.department-actions button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}

.progress-bar {
  border-color: var(--line);
  background: var(--surface-3);
}

.snippet {
  color: var(--text);
}

/* Relationship graph page */
.shell {
  background: var(--bg);
  color: var(--text);
}

.shell > header {
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 62%, var(--surface-2)) 0%, color-mix(in oklab, var(--accent) 78%, var(--bg)) 100%);
}

.shell > header::before {
  background: color-mix(in oklab, var(--accent) 62%, var(--bg));
}

.hub-link {
  border-color: color-mix(in oklab, var(--accent-contrast) 52%, transparent);
  background: color-mix(in oklab, var(--accent-contrast) 14%, transparent);
  color: var(--accent-contrast);
}

.hub-link:hover,
.hub-link:focus-visible {
  background: color-mix(in oklab, var(--accent-contrast) 24%, transparent);
}

.graph-panel,
.side-panel,
.hop-panel,
.metric,
.edge-row,
.redmine-issue,
.redmine-history,
.hop-ticket,
.summary-item,
.detail-box,
.ticket-link,
.edge-card {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-subtle);
}

.graph-head,
.graph-foot,
.side-section + .side-section,
.journey-list,
.edge-list,
.history-list,
.hop-list {
  border-color: var(--line);
}

.segments,
.pill,
.edge-scope,
.summary-grid,
.detail-meta,
.relationship-list,
.journey-step {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.segment {
  color: var(--muted);
}

.segment[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.canvas-wrap,
.empty-state,
.graph-tooltip,
.graph-menu {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--line);
}

.side-section,
.journal-header,
.connection-brief,
.detail-box .edge-detail,
.edge-detail,
.redmine-issue,
.redmine-history,
.hop-panel {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

.connection-brief,
.journal-header,
.redmine-issue .pill,
.redmine-history .pill,
.detail-box .edge-detail .pill,
.edge-scope,
.edge-scope button[aria-pressed="true"] {
  background: var(--surface-2);
  color: var(--text);
}

.segments,
.edge-scope {
  border-color: var(--line);
  background: var(--surface-3);
}

.segment,
.edge-scope button {
  color: var(--muted);
}

.segment[aria-pressed="true"],
.edge-scope button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.redmine-subject h3,
.redmine-issue h2,
.redmine-history h3,
.detail-box .edge-detail h2,
.side-panel h2,
.hop-title,
.detail-title,
.journal-info strong,
.redmine-issue .value,
.redmine-section-label,
.redmine-wiki,
.connection-brief p,
.detail-box .edge-detail .relation-pill,
.relation-pill,
.redmine-issue .path-step strong,
.detail-box .edge-detail .path-step strong {
  color: var(--text);
}

.redmine-author,
.redmine-issue .contextual,
.redmine-issue .label,
.journal-header,
.journal-fields,
.redmine-issue .evidence-label,
.detail-box .edge-detail .evidence-label,
.redmine-issue .path-step,
.detail-box .edge-detail .path-step,
.edge-score,
.connection-brief-title {
  color: var(--muted);
}

.redmine-attributes,
.redmine-issue .attribute,
.redmine-issue hr,
.redmine-history h3,
.redmine-issue .connection-path,
.detail-box .edge-detail,
.connection-path,
.evidence-block {
  border-color: var(--line);
}

.edge-row,
.hop-ticket {
  border-color: var(--line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rel-color, transparent) 10%, transparent), transparent 44%),
    var(--surface);
  color: var(--text);
}

.edge-row:nth-child(even),
.hop-ticket:nth-child(even) {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rel-color, transparent) 10%, transparent), transparent 44%),
    var(--surface-2);
}

.edge-row:hover,
.edge-row.active,
.hop-ticket:hover,
.hop-ticket.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rel-color, transparent) 16%, transparent), transparent 46%),
    var(--hover-surface);
}

.status,
.subtitle,
.legend,
.detail-meta,
.edge-meta,
.journal-meta,
.hop-meta,
.soft {
  color: var(--muted);
}

.toast,
.error {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}

@media (max-width: 680px) {
  .theme-toggle {
    min-width: 112px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }
}