/*
 * Narrative Atlas workspace layer
 * Semantic theme tokens, application chrome and extensible modules.
 * This file intentionally loads after theme.css and replaces legacy surface colors.
 */

/* --------------------------------------------------------------------------
   Semantic color system
   -------------------------------------------------------------------------- */

:root,
:root[data-theme="midnight"] {
  color-scheme: dark;
  --surface-base: oklch(0.135 0.026 264);
  --surface-shell: oklch(0.165 0.03 264);
  --surface-panel: oklch(0.19 0.032 264);
  --surface-raised: oklch(0.225 0.034 264);
  --surface-control: oklch(0.245 0.034 264);
  --surface-hover: oklch(0.285 0.038 264);
  --surface-selected: oklch(0.31 0.055 258);
  --canvas-bg: oklch(0.155 0.026 264);
  --canvas-grid: oklch(0.43 0.036 260 / 0.52);
  --fg-primary: oklch(0.95 0.012 250);
  --fg-secondary: oklch(0.79 0.024 252);
  --fg-muted: oklch(0.64 0.03 252);
  --fg-faint: oklch(0.52 0.027 252);
  --border-subtle: oklch(0.82 0.025 252 / 0.13);
  --border-default: oklch(0.82 0.025 252 / 0.25);
  --border-strong: oklch(0.84 0.04 252 / 0.42);
  --accent: oklch(0.79 0.092 251);
  --accent-hover: oklch(0.86 0.073 251);
  --accent-active: oklch(0.72 0.1 251);
  --accent-soft: oklch(0.79 0.092 251 / 0.12);
  --accent-soft-strong: oklch(0.79 0.092 251 / 0.22);
  --on-accent: oklch(0.18 0.034 264);
  --positive: oklch(0.77 0.105 166);
  --positive-soft: oklch(0.77 0.105 166 / 0.12);
  --warning: oklch(0.8 0.105 78);
  --warning-soft: oklch(0.8 0.105 78 / 0.13);
  --danger: oklch(0.72 0.145 21);
  --danger-hover: oklch(0.8 0.115 21);
  --danger-soft: oklch(0.72 0.145 21 / 0.13);
  --focus: oklch(0.86 0.105 245);
  --node-paper: oklch(0.955 0.012 245);
  --node-paper-strong: oklch(0.995 0.004 245);
  --node-ink: oklch(0.25 0.026 250);
  --node-muted: oklch(0.49 0.024 250);
  --edge-neutral: oklch(0.68 0.028 252);
  --edge-accent: oklch(0.69 0.105 251);
  --shadow-color: oklch(0.06 0.018 264 / 0.58);
  --backdrop: oklch(0.06 0.018 264 / 0.74);
  --button-shadow: 0 8px 22px oklch(0.06 0.018 264 / 0.22);
  --panel-shadow: 0 24px 70px var(--shadow-color);
}

:root[data-theme="paper"] {
  color-scheme: light;
  --surface-base: oklch(0.955 0.012 82);
  --surface-shell: oklch(0.99 0.006 82);
  --surface-panel: oklch(0.973 0.009 82);
  --surface-raised: oklch(0.995 0.004 82);
  --surface-control: oklch(0.93 0.016 82);
  --surface-hover: oklch(0.9 0.022 82);
  --surface-selected: oklch(0.885 0.037 251);
  --canvas-bg: oklch(0.91 0.016 82);
  --canvas-grid: oklch(0.48 0.026 70 / 0.3);
  --fg-primary: oklch(0.235 0.03 62);
  --fg-secondary: oklch(0.38 0.027 62);
  --fg-muted: oklch(0.49 0.025 62);
  --fg-faint: oklch(0.6 0.022 62);
  --border-subtle: oklch(0.42 0.025 62 / 0.14);
  --border-default: oklch(0.42 0.025 62 / 0.25);
  --border-strong: oklch(0.36 0.03 62 / 0.42);
  --accent: oklch(0.49 0.13 251);
  --accent-hover: oklch(0.43 0.135 251);
  --accent-active: oklch(0.39 0.13 251);
  --accent-soft: oklch(0.49 0.13 251 / 0.11);
  --accent-soft-strong: oklch(0.49 0.13 251 / 0.19);
  --on-accent: oklch(0.985 0.006 251);
  --positive: oklch(0.43 0.105 158);
  --positive-soft: oklch(0.43 0.105 158 / 0.1);
  --warning: oklch(0.5 0.12 67);
  --warning-soft: oklch(0.5 0.12 67 / 0.11);
  --danger: oklch(0.51 0.17 24);
  --danger-hover: oklch(0.44 0.17 24);
  --danger-soft: oklch(0.51 0.17 24 / 0.1);
  --focus: oklch(0.53 0.15 251);
  --node-paper: oklch(0.995 0.004 82);
  --node-paper-strong: oklch(1 0 0);
  --node-ink: oklch(0.24 0.028 62);
  --node-muted: oklch(0.46 0.024 62);
  --edge-neutral: oklch(0.48 0.028 62);
  --edge-accent: oklch(0.48 0.12 251);
  --shadow-color: oklch(0.24 0.03 62 / 0.18);
  --backdrop: oklch(0.2 0.025 62 / 0.48);
  --button-shadow: 0 8px 20px oklch(0.24 0.03 62 / 0.12);
  --panel-shadow: 0 22px 64px var(--shadow-color);
}

:root[data-theme="umber"] {
  color-scheme: dark;
  --surface-base: oklch(0.135 0.024 53);
  --surface-shell: oklch(0.17 0.031 53);
  --surface-panel: oklch(0.2 0.034 53);
  --surface-raised: oklch(0.235 0.038 53);
  --surface-control: oklch(0.26 0.039 53);
  --surface-hover: oklch(0.3 0.045 53);
  --surface-selected: oklch(0.32 0.062 60);
  --canvas-bg: oklch(0.15 0.025 53);
  --canvas-grid: oklch(0.5 0.047 62 / 0.42);
  --fg-primary: oklch(0.94 0.018 72);
  --fg-secondary: oklch(0.78 0.032 70);
  --fg-muted: oklch(0.63 0.035 68);
  --fg-faint: oklch(0.51 0.032 65);
  --border-subtle: oklch(0.84 0.045 70 / 0.13);
  --border-default: oklch(0.84 0.045 70 / 0.25);
  --border-strong: oklch(0.86 0.055 70 / 0.42);
  --accent: oklch(0.79 0.125 68);
  --accent-hover: oklch(0.86 0.1 70);
  --accent-active: oklch(0.72 0.13 65);
  --accent-soft: oklch(0.79 0.125 68 / 0.12);
  --accent-soft-strong: oklch(0.79 0.125 68 / 0.22);
  --on-accent: oklch(0.19 0.036 50);
  --positive: oklch(0.75 0.09 145);
  --positive-soft: oklch(0.75 0.09 145 / 0.12);
  --warning: oklch(0.82 0.12 80);
  --warning-soft: oklch(0.82 0.12 80 / 0.13);
  --danger: oklch(0.72 0.14 28);
  --danger-hover: oklch(0.8 0.11 28);
  --danger-soft: oklch(0.72 0.14 28 / 0.13);
  --focus: oklch(0.86 0.12 75);
  --node-paper: oklch(0.94 0.025 76);
  --node-paper-strong: oklch(0.98 0.014 76);
  --node-ink: oklch(0.25 0.04 48);
  --node-muted: oklch(0.47 0.035 52);
  --edge-neutral: oklch(0.66 0.036 67);
  --edge-accent: oklch(0.72 0.12 68);
  --shadow-color: oklch(0.06 0.018 45 / 0.62);
  --backdrop: oklch(0.06 0.018 45 / 0.75);
  --button-shadow: 0 8px 22px oklch(0.06 0.018 45 / 0.24);
  --panel-shadow: 0 24px 70px var(--shadow-color);
}

:root[data-theme="moss"] {
  color-scheme: dark;
  --surface-base: oklch(0.13 0.026 153);
  --surface-shell: oklch(0.165 0.031 153);
  --surface-panel: oklch(0.195 0.034 153);
  --surface-raised: oklch(0.23 0.038 153);
  --surface-control: oklch(0.255 0.04 153);
  --surface-hover: oklch(0.295 0.047 153);
  --surface-selected: oklch(0.315 0.064 151);
  --canvas-bg: oklch(0.145 0.027 153);
  --canvas-grid: oklch(0.48 0.045 151 / 0.43);
  --fg-primary: oklch(0.94 0.015 145);
  --fg-secondary: oklch(0.78 0.029 145);
  --fg-muted: oklch(0.63 0.033 145);
  --fg-faint: oklch(0.51 0.03 145);
  --border-subtle: oklch(0.84 0.04 145 / 0.13);
  --border-default: oklch(0.84 0.04 145 / 0.24);
  --border-strong: oklch(0.86 0.052 145 / 0.4);
  --accent: oklch(0.78 0.11 151);
  --accent-hover: oklch(0.85 0.09 151);
  --accent-active: oklch(0.7 0.115 151);
  --accent-soft: oklch(0.78 0.11 151 / 0.12);
  --accent-soft-strong: oklch(0.78 0.11 151 / 0.22);
  --on-accent: oklch(0.17 0.038 153);
  --positive: oklch(0.77 0.105 151);
  --positive-soft: oklch(0.77 0.105 151 / 0.12);
  --warning: oklch(0.8 0.105 82);
  --warning-soft: oklch(0.8 0.105 82 / 0.13);
  --danger: oklch(0.72 0.14 24);
  --danger-hover: oklch(0.8 0.11 24);
  --danger-soft: oklch(0.72 0.14 24 / 0.13);
  --focus: oklch(0.86 0.105 151);
  --node-paper: oklch(0.94 0.018 142);
  --node-paper-strong: oklch(0.98 0.01 142);
  --node-ink: oklch(0.235 0.036 153);
  --node-muted: oklch(0.46 0.032 153);
  --edge-neutral: oklch(0.66 0.036 150);
  --edge-accent: oklch(0.7 0.09 205);
  --shadow-color: oklch(0.05 0.018 153 / 0.62);
  --backdrop: oklch(0.05 0.018 153 / 0.76);
  --button-shadow: 0 8px 22px oklch(0.05 0.018 153 / 0.24);
  --panel-shadow: 0 24px 70px var(--shadow-color);
}

:root[data-theme="ink"] {
  color-scheme: light;
  --surface-base: oklch(0.925 0.018 92);
  --surface-shell: oklch(0.97 0.012 92);
  --surface-panel: oklch(0.945 0.016 92);
  --surface-raised: oklch(0.982 0.009 92);
  --surface-control: oklch(0.895 0.021 92);
  --surface-hover: oklch(0.855 0.026 92);
  --surface-selected: oklch(0.82 0.035 245);
  --canvas-bg: oklch(0.885 0.022 92);
  --canvas-grid: oklch(0.27 0.025 245 / 0.22);
  --fg-primary: oklch(0.22 0.026 245);
  --fg-secondary: oklch(0.35 0.025 245);
  --fg-muted: oklch(0.46 0.022 245);
  --fg-faint: oklch(0.58 0.018 245);
  --border-subtle: oklch(0.25 0.022 245 / 0.14);
  --border-default: oklch(0.25 0.022 245 / 0.28);
  --border-strong: oklch(0.22 0.026 245 / 0.48);
  --accent: oklch(0.48 0.17 27);
  --accent-hover: oklch(0.42 0.17 27);
  --accent-active: oklch(0.36 0.155 27);
  --accent-soft: oklch(0.48 0.17 27 / 0.1);
  --accent-soft-strong: oklch(0.48 0.17 27 / 0.2);
  --on-accent: oklch(0.98 0.008 92);
  --positive: oklch(0.4 0.09 155);
  --positive-soft: oklch(0.4 0.09 155 / 0.1);
  --warning: oklch(0.49 0.12 65);
  --warning-soft: oklch(0.49 0.12 65 / 0.11);
  --danger: oklch(0.46 0.17 25);
  --danger-hover: oklch(0.39 0.16 25);
  --danger-soft: oklch(0.46 0.17 25 / 0.1);
  --focus: oklch(0.45 0.13 246);
  --node-paper: oklch(0.975 0.011 92);
  --node-paper-strong: oklch(0.995 0.004 92);
  --node-ink: oklch(0.21 0.025 245);
  --node-muted: oklch(0.43 0.021 245);
  --edge-neutral: oklch(0.4 0.024 245);
  --edge-accent: oklch(0.48 0.17 27);
  --shadow-color: oklch(0.21 0.025 245 / 0.16);
  --backdrop: oklch(0.18 0.024 245 / 0.46);
  --button-shadow: 0 6px 16px oklch(0.21 0.025 245 / 0.13);
  --panel-shadow: 0 20px 54px var(--shadow-color);
}

:root[data-theme="vermilion"] {
  color-scheme: dark;
  --surface-base: oklch(0.12 0.037 25);
  --surface-shell: oklch(0.16 0.057 25);
  --surface-panel: oklch(0.185 0.065 25);
  --surface-raised: oklch(0.22 0.073 25);
  --surface-control: oklch(0.255 0.078 25);
  --surface-hover: oklch(0.3 0.09 25);
  --surface-selected: oklch(0.34 0.095 32);
  --canvas-bg: oklch(0.135 0.044 25);
  --canvas-grid: oklch(0.79 0.13 78 / 0.3);
  --fg-primary: oklch(0.94 0.022 76);
  --fg-secondary: oklch(0.8 0.04 74);
  --fg-muted: oklch(0.67 0.045 70);
  --fg-faint: oklch(0.54 0.047 62);
  --border-subtle: oklch(0.82 0.09 76 / 0.15);
  --border-default: oklch(0.82 0.1 76 / 0.3);
  --border-strong: oklch(0.84 0.115 76 / 0.52);
  --accent: oklch(0.56 0.19 28);
  --accent-hover: oklch(0.52 0.185 28);
  --accent-active: oklch(0.48 0.18 27);
  --accent-soft: oklch(0.56 0.19 28 / 0.13);
  --accent-soft-strong: oklch(0.56 0.19 28 / 0.26);
  --on-accent: oklch(0.97 0.018 78);
  --positive: oklch(0.74 0.105 145);
  --positive-soft: oklch(0.74 0.105 145 / 0.12);
  --warning: oklch(0.82 0.135 76);
  --warning-soft: oklch(0.82 0.135 76 / 0.14);
  --danger: oklch(0.75 0.15 22);
  --danger-hover: oklch(0.83 0.12 22);
  --danger-soft: oklch(0.75 0.15 22 / 0.14);
  --focus: oklch(0.88 0.12 82);
  --node-paper: oklch(0.94 0.03 78);
  --node-paper-strong: oklch(0.98 0.018 78);
  --node-ink: oklch(0.22 0.05 28);
  --node-muted: oklch(0.44 0.047 35);
  --edge-neutral: oklch(0.67 0.055 70);
  --edge-accent: oklch(0.72 0.13 72);
  --shadow-color: oklch(0.05 0.026 25 / 0.68);
  --backdrop: oklch(0.045 0.022 25 / 0.8);
  --button-shadow: 0 8px 22px oklch(0.04 0.022 25 / 0.35);
  --panel-shadow: 0 26px 72px var(--shadow-color);
}

:root[data-theme="celadon"] {
  color-scheme: light;
  --surface-base: oklch(0.92 0.025 166);
  --surface-shell: oklch(0.975 0.014 166);
  --surface-panel: oklch(0.95 0.022 166);
  --surface-raised: oklch(0.987 0.011 166);
  --surface-control: oklch(0.88 0.036 166);
  --surface-hover: oklch(0.84 0.045 166);
  --surface-selected: oklch(0.8 0.06 166);
  --canvas-bg: oklch(0.885 0.033 166);
  --canvas-grid: oklch(0.32 0.055 172 / 0.18);
  --fg-primary: oklch(0.22 0.038 174);
  --fg-secondary: oklch(0.35 0.042 174);
  --fg-muted: oklch(0.46 0.038 174);
  --fg-faint: oklch(0.58 0.03 174);
  --border-subtle: oklch(0.32 0.05 174 / 0.13);
  --border-default: oklch(0.32 0.05 174 / 0.26);
  --border-strong: oklch(0.29 0.057 174 / 0.46);
  --accent: oklch(0.38 0.09 166);
  --accent-hover: oklch(0.32 0.088 166);
  --accent-active: oklch(0.27 0.08 166);
  --accent-soft: oklch(0.38 0.09 166 / 0.1);
  --accent-soft-strong: oklch(0.38 0.09 166 / 0.2);
  --on-accent: oklch(0.985 0.008 166);
  --positive: oklch(0.4 0.1 154);
  --positive-soft: oklch(0.4 0.1 154 / 0.1);
  --warning: oklch(0.5 0.12 71);
  --warning-soft: oklch(0.5 0.12 71 / 0.1);
  --danger: oklch(0.49 0.16 24);
  --danger-hover: oklch(0.42 0.15 24);
  --danger-soft: oklch(0.49 0.16 24 / 0.1);
  --focus: oklch(0.45 0.13 174);
  --node-paper: oklch(0.982 0.012 166);
  --node-paper-strong: oklch(0.995 0.005 166);
  --node-ink: oklch(0.21 0.039 174);
  --node-muted: oklch(0.43 0.037 174);
  --edge-neutral: oklch(0.39 0.046 174);
  --edge-accent: oklch(0.36 0.105 190);
  --shadow-color: oklch(0.2 0.04 174 / 0.15);
  --backdrop: oklch(0.17 0.035 174 / 0.45);
  --button-shadow: 0 8px 18px oklch(0.2 0.04 174 / 0.12);
  --panel-shadow: 0 22px 60px var(--shadow-color);
}

:root[data-theme="dunhuang"] {
  color-scheme: light;
  --surface-base: oklch(0.75 0.075 76);
  --surface-shell: oklch(0.845 0.058 77);
  --surface-panel: oklch(0.805 0.068 76);
  --surface-raised: oklch(0.875 0.052 78);
  --surface-control: oklch(0.7 0.085 70);
  --surface-hover: oklch(0.655 0.095 67);
  --surface-selected: oklch(0.62 0.105 255);
  --canvas-bg: oklch(0.69 0.09 72);
  --canvas-grid: oklch(0.28 0.06 48 / 0.22);
  --fg-primary: oklch(0.22 0.052 45);
  --fg-secondary: oklch(0.33 0.052 47);
  --fg-muted: oklch(0.42 0.047 50);
  --fg-faint: oklch(0.53 0.04 54);
  --border-subtle: oklch(0.25 0.06 45 / 0.15);
  --border-default: oklch(0.25 0.06 45 / 0.31);
  --border-strong: oklch(0.22 0.065 45 / 0.54);
  --accent: oklch(0.34 0.14 255);
  --accent-hover: oklch(0.28 0.135 255);
  --accent-active: oklch(0.23 0.12 255);
  --accent-soft: oklch(0.34 0.14 255 / 0.11);
  --accent-soft-strong: oklch(0.34 0.14 255 / 0.22);
  --on-accent: oklch(0.96 0.025 78);
  --positive: oklch(0.4 0.105 165);
  --positive-soft: oklch(0.4 0.105 165 / 0.11);
  --warning: oklch(0.43 0.13 58);
  --warning-soft: oklch(0.43 0.13 58 / 0.12);
  --danger: oklch(0.43 0.17 25);
  --danger-hover: oklch(0.36 0.16 25);
  --danger-soft: oklch(0.43 0.17 25 / 0.12);
  --focus: oklch(0.42 0.15 255);
  --node-paper: oklch(0.9 0.06 78);
  --node-paper-strong: oklch(0.95 0.038 78);
  --node-ink: oklch(0.21 0.055 45);
  --node-muted: oklch(0.4 0.05 48);
  --edge-neutral: oklch(0.34 0.055 48);
  --edge-accent: oklch(0.34 0.14 255);
  --shadow-color: oklch(0.18 0.052 45 / 0.23);
  --backdrop: oklch(0.16 0.05 45 / 0.55);
  --button-shadow: 0 7px 18px oklch(0.18 0.052 45 / 0.18);
  --panel-shadow: 0 22px 62px var(--shadow-color);
}

:root,
[data-theme] {
  --ink-950: var(--surface-base);
  --ink-900: var(--surface-shell);
  --ink-850: var(--surface-panel);
  --ink-800: var(--surface-raised);
  --ink-750: var(--surface-control);
  --ink-700: var(--surface-hover);
  --line: var(--border-subtle);
  --line-strong: var(--border-default);
  --paper: var(--node-paper);
  --paper-strong: var(--node-paper-strong);
  --graphite: var(--node-ink);
  --text: var(--fg-primary);
  --text-soft: var(--fg-secondary);
  --text-muted: var(--fg-muted);
  --mist: var(--accent);
  --mist-strong: var(--edge-accent);
  --mint: var(--positive);
  --sand: var(--warning);
  --shadow-lg: var(--panel-shadow);
  --shadow-md: 0 14px 34px var(--shadow-color);
  --ease-workspace: cubic-bezier(0.2, 0.8, 0.2, 1);
  --chrome-h: 54px;
  --control-h: 44px;
  --accent-text: var(--accent);
}

:root[data-theme="vermilion"] {
  --accent-text: var(--warning);
}

/* --------------------------------------------------------------------------
   Global surfaces, fields and focus
   -------------------------------------------------------------------------- */

html,
body {
  max-width: 100%;
  overflow: hidden;
  background: var(--surface-base);
}

body,
.workspace,
.canvas-wrap,
.roster-panel,
.inspector-panel,
.roster-empty {
  color: var(--fg-primary);
  background-color: var(--surface-base);
}

.app-header {
  background: var(--surface-shell);
  border-color: var(--border-subtle);
}

.roster-panel,
.inspector-panel,
.roster-empty {
  background: var(--surface-panel);
}

button,
summary,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

input,
select,
textarea,
.profile-form input,
.profile-form select,
.profile-form textarea,
.modal input,
.modal select,
.directory-toolbar input,
.directory-toolbar select,
.map-filter-search input,
.map-tag-filter select,
.saved-view-form input,
.command-dialog input,
.custom-fact-row input,
.custom-fact-row textarea {
  color: var(--fg-primary);
  background: var(--surface-raised);
  border-color: var(--border-default);
  caret-color: var(--accent);
}

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

input:hover,
select:hover,
textarea:hover {
  border-color: var(--border-strong);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.profile-form input:focus-visible,
.profile-form select:focus-visible,
.profile-form textarea:focus-visible,
.modal input:focus-visible,
.modal select:focus-visible {
  background: var(--surface-control);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.section-kicker,
.menu-label,
.project-meta,
.roster-copy small,
.roster-code,
.roster-foot,
.selection-status,
.field-section legend,
.field-section-hint,
.module-header p,
.module-empty p {
  color: var(--fg-muted);
}

.count-badge {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent-soft-strong);
}

.search {
  color: var(--fg-muted);
  background: var(--surface-raised);
  border-color: var(--border-default);
}

.search:focus-within {
  color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search kbd {
  color: var(--fg-muted);
  background: var(--surface-shell);
  border-color: var(--border-subtle);
}

.roster-list {
  scrollbar-color: var(--surface-hover) transparent;
}

.roster-item:hover {
  color: var(--fg-primary);
  background: var(--accent-soft);
}

.roster-item.selected {
  color: var(--fg-primary);
  background: var(--accent-soft-strong);
  border-color: var(--accent);
}

.roster-item.selected::before {
  background: var(--accent);
}

.roster-avatar {
  color: var(--node-ink);
  border-color: var(--border-default);
}

.field-error {
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   Unified button system
   -------------------------------------------------------------------------- */

.icon-button,
.export-button,
.command-palette-trigger,
.view-controls button,
.btn,
.theme-option,
.tool,
.utility-toggle,
.utility-action,
.utility-icon,
.module-primary-action,
.module-secondary-action,
.add-fact-button,
.saved-view-main,
.saved-view-delete,
.saved-view-form button,
.directory-focus,
.directory-compare,
.compare-head button,
.compare-remove,
.action-item,
.rank-item,
.tag-bar,
.command-result,
.custom-fact-delete,
.module-empty button {
  min-height: var(--control-h);
  border: 1px solid var(--border-default);
  border-radius: 9px;
  transition:
    color 150ms var(--ease-workspace),
    background-color 150ms var(--ease-workspace),
    border-color 150ms var(--ease-workspace),
    box-shadow 150ms var(--ease-workspace),
    transform 90ms var(--ease-workspace),
    opacity 150ms var(--ease-workspace);
}

.icon-button,
.utility-icon,
.directory-compare,
.compare-remove,
.saved-view-delete,
.custom-fact-delete {
  display: inline-grid;
  width: var(--control-h);
  min-width: var(--control-h);
  padding: 0;
  place-items: center;
  color: var(--fg-secondary);
  background: var(--surface-control);
}

.icon-button:hover:not(:disabled),
.utility-icon:hover:not(:disabled),
.directory-compare:hover:not(:disabled),
.compare-remove:hover:not(:disabled),
.saved-view-delete:hover:not(:disabled),
.custom-fact-delete:hover:not(:disabled) {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.icon-button:active:not(:disabled),
.export-button:active:not(:disabled),
.command-palette-trigger:active:not(:disabled),
.view-controls button:active:not(:disabled),
.btn:active:not(:disabled),
.theme-option:active:not(:disabled),
.tool:active:not(:disabled),
.utility-toggle:active:not(:disabled),
.utility-action:active:not(:disabled),
.utility-icon:active:not(:disabled),
.module-primary-action:active:not(:disabled),
.module-secondary-action:active:not(:disabled),
.add-fact-button:active:not(:disabled),
.saved-view-main:active:not(:disabled),
.saved-view-delete:active:not(:disabled),
.saved-view-form button:active:not(:disabled),
.directory-focus:active:not(:disabled),
.directory-compare:active:not(:disabled),
.compare-head button:active:not(:disabled),
.compare-remove:active:not(:disabled),
.action-item:active:not(:disabled),
.rank-item:active:not(:disabled),
.tag-bar:active:not(:disabled),
.command-result:active:not(:disabled),
.custom-fact-delete:active:not(:disabled),
.module-empty button:active:not(:disabled) {
  transform: scale(0.96);
}

button:disabled,
.command-result:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}

.export-button,
.btn.primary,
.primary-tool,
.module-primary-action,
.saved-view-form button {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--button-shadow);
}

.export-button:hover:not(:disabled),
.export-button:focus-visible,
.btn.primary:hover:not(:disabled),
.btn.primary:focus-visible,
.primary-tool:hover:not(:disabled),
.primary-tool:focus-visible,
.module-primary-action:hover:not(:disabled),
.module-primary-action:focus-visible,
.saved-view-form button:hover:not(:disabled),
.saved-view-form button:focus-visible {
  color: var(--on-accent);
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn,
.module-secondary-action,
.utility-action,
.add-fact-button,
.module-empty button,
.directory-focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: var(--fg-secondary);
  background: var(--surface-control);
  gap: 8px;
}

.btn:hover:not(:disabled),
.module-secondary-action:hover:not(:disabled),
.utility-action:hover:not(:disabled),
.add-fact-button:hover:not(:disabled),
.module-empty button:hover:not(:disabled),
.directory-focus:hover:not(:disabled) {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.danger,
.danger-tool,
.custom-fact-delete,
.saved-view-delete {
  color: var(--danger);
}

.danger:hover:not(:disabled),
.danger-tool:hover:not(:disabled),
.custom-fact-delete:hover:not(:disabled),
.saved-view-delete:hover:not(:disabled) {
  color: var(--danger-hover);
  background: var(--danger-soft);
  border-color: var(--danger);
}

/* --------------------------------------------------------------------------
   Header, project and skin menus
   -------------------------------------------------------------------------- */

.brand-mark {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--border-subtle) inset;
}

.title {
  color: var(--fg-primary);
}

.title:hover {
  border-bottom-color: var(--border-strong);
}

.project-meta > span:not(:first-child)::before {
  color: var(--fg-faint);
}

.save-state {
  color: var(--positive);
}

.save-state i {
  background: var(--positive);
  box-shadow: 0 0 0 4px var(--positive-soft);
}

.save-state.session-only {
  color: var(--warning);
}

.save-state.session-only i {
  background: var(--warning);
  box-shadow: 0 0 0 4px var(--warning-soft);
}

.sync-state[data-state="synced"],
.sync-state[data-state="ready"] {
  color: var(--positive);
}

.sync-state[data-state="connecting"],
.sync-state[data-state="syncing"],
.sync-state[data-state="remote"] {
  color: var(--accent-text);
}

.sync-state[data-state="pending"],
.sync-state[data-state="offline"],
.sync-state[data-state="local"] {
  color: var(--warning);
}

.sync-state[data-state="conflict"],
.sync-state[data-state="auth"],
.sync-state[data-state="error"],
.sync-state[data-state="update"] {
  color: var(--danger);
}

.header-actions {
  min-width: 0;
}

.command-palette-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  padding: 0 11px;
  color: var(--fg-secondary);
  background: var(--surface-control);
  gap: 8px;
}

.command-palette-trigger:hover:not(:disabled) {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.command-palette-trigger svg,
.module-primary-action svg,
.module-secondary-action svg,
.utility-toggle svg,
.utility-action svg,
.utility-icon svg,
.add-fact-button svg,
.directory-compare svg,
.command-result-icon svg,
.custom-fact-delete svg,
.saved-view-delete svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.command-palette-trigger kbd,
.command-dialog kbd {
  padding: 3px 5px;
  color: var(--fg-muted);
  background: var(--surface-shell);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
}

.project-menu,
.theme-menu {
  position: relative;
}

.theme-menu summary,
.project-menu summary {
  list-style: none;
}

.theme-menu summary::-webkit-details-marker,
.project-menu summary::-webkit-details-marker {
  display: none;
}

.theme-menu[open] summary,
.project-menu[open] summary {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.project-menu-panel,
.theme-menu-panel {
  position: absolute;
  z-index: 700;
  top: calc(100% + 12px);
  right: 0;
  color: var(--fg-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
}

.project-menu-panel::before {
  background: var(--surface-raised);
  border-color: var(--border-strong);
}

.project-menu-panel button {
  color: var(--fg-secondary);
  border: 1px solid transparent;
}

.project-menu-panel button:hover,
.project-menu-panel button:focus-visible {
  color: var(--fg-primary);
  background: var(--accent-soft);
  border-color: var(--accent-soft-strong);
}

.project-menu-panel button small {
  color: var(--fg-muted);
}

.theme-menu-panel {
  display: grid;
  width: min(344px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - var(--header-h) - 24px));
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--surface-hover) transparent;
  scrollbar-width: thin;
  gap: 5px;
}

.theme-menu-head {
  display: grid;
  padding: 6px 8px 9px;
  gap: 3px;
}

.theme-menu-head strong {
  font-family: var(--font-display);
  font-size: 18px;
}

.theme-menu-divider {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 8px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  gap: 9px;
}

.theme-menu-divider::before,
.theme-menu-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-subtle);
}

.theme-menu-divider span {
  flex: 0 0 auto;
}

.theme-option {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  padding: 8px;
  color: var(--fg-secondary);
  text-align: left;
  background: transparent;
  border-color: transparent;
  gap: 11px;
}

.theme-option:hover,
.theme-option:focus-visible {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-default);
}

.theme-option[aria-checked="true"] {
  color: var(--fg-primary);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.theme-option > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.theme-option small {
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-swatch {
  display: grid;
  grid-template-columns: 1fr 1.35fr 0.7fr;
  width: 58px;
  height: 38px;
  overflow: hidden;
  background: oklch(0.15 0.026 264);
  border: 1px solid var(--border-default);
  border-radius: 7px;
}

.theme-swatch i {
  display: block;
}

.theme-swatch.midnight i:nth-child(1) {
  background: oklch(0.19 0.032 264);
}
.theme-swatch.midnight i:nth-child(2) {
  background: oklch(0.79 0.092 251);
}
.theme-swatch.midnight i:nth-child(3) {
  background: oklch(0.955 0.012 245);
}
.theme-swatch.paper i:nth-child(1) {
  background: oklch(0.973 0.009 82);
}
.theme-swatch.paper i:nth-child(2) {
  background: oklch(0.49 0.13 251);
}
.theme-swatch.paper i:nth-child(3) {
  background: oklch(0.235 0.03 62);
}
.theme-swatch.umber i:nth-child(1) {
  background: oklch(0.2 0.034 53);
}
.theme-swatch.umber i:nth-child(2) {
  background: oklch(0.79 0.125 68);
}
.theme-swatch.umber i:nth-child(3) {
  background: oklch(0.94 0.025 76);
}
.theme-swatch.moss i:nth-child(1) {
  background: oklch(0.195 0.034 153);
}
.theme-swatch.moss i:nth-child(2) {
  background: oklch(0.78 0.11 151);
}
.theme-swatch.moss i:nth-child(3) {
  background: oklch(0.94 0.018 142);
}
.theme-swatch.ink {
  grid-template-columns: 1.4fr 0.65fr 1fr;
  background: oklch(0.925 0.018 92);
  border-radius: 2px 8px 2px 8px;
}
.theme-swatch.ink i:nth-child(1) {
  background: repeating-linear-gradient(
    96deg,
    oklch(0.3 0.035 245) 0 2px,
    oklch(0.3 0.035 245 / 0.18) 2px 4px,
    transparent 4px 8px
  );
}
.theme-swatch.ink i:nth-child(2) {
  background: oklch(0.3 0.035 245);
}
.theme-swatch.ink i:nth-child(3) {
  background: oklch(0.975 0.011 92);
}
.theme-swatch.vermilion {
  grid-template-columns: 0.72fr 1.5fr 0.72fr;
  padding: 2px;
  background: oklch(0.79 0.13 78);
  border-radius: 2px;
}
.theme-swatch.vermilion i:nth-child(1),
.theme-swatch.vermilion i:nth-child(3) {
  background: oklch(0.16 0.057 25);
}
.theme-swatch.vermilion i:nth-child(2) {
  background: oklch(0.3 0.09 25);
  border-inline: 1px solid oklch(0.9 0.11 80 / 0.6);
}
.theme-swatch.celadon {
  grid-template-columns: 1fr 1fr 1fr;
  overflow: hidden;
  background: oklch(0.92 0.025 166);
  border-radius: 13px;
  box-shadow: inset 0 0 0 2px oklch(0.995 0.005 166 / 0.8);
}
.theme-swatch.celadon i:nth-child(1) {
  background: oklch(0.88 0.036 166);
}
.theme-swatch.celadon i:nth-child(2) {
  background: linear-gradient(
    35deg,
    oklch(0.38 0.09 166) 0 47%,
    oklch(0.98 0.012 166) 48% 53%,
    oklch(0.38 0.09 166) 54%
  );
}
.theme-swatch.celadon i:nth-child(3) {
  background: oklch(0.982 0.012 166);
}
.theme-swatch.dunhuang {
  grid-template-columns: 0.9fr 1.2fr 0.9fr;
  padding: 2px;
  background: oklch(0.22 0.052 45);
  border-radius: 8px 2px 8px 2px;
}
.theme-swatch.dunhuang i:nth-child(1) {
  background: oklch(0.75 0.075 76);
}
.theme-swatch.dunhuang i:nth-child(2) {
  background: oklch(0.34 0.14 255);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.theme-swatch.dunhuang i:nth-child(3) {
  background: oklch(0.43 0.17 25);
}

/* --------------------------------------------------------------------------
   Workspace chrome and map surface
   -------------------------------------------------------------------------- */

.canvas-wrap {
  display: grid;
  grid-template-rows: var(--chrome-h) minmax(0, 1fr);
  background: var(--canvas-bg);
}

.workspace-chrome {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: var(--chrome-h);
  padding: 6px 12px;
  color: var(--fg-secondary);
  background: var(--surface-shell);
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
}

.workspace-lenses {
  display: inline-flex;
  min-width: 0;
  padding: 3px;
  background: var(--surface-base);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  gap: 3px;
}

.workspace-lens {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 40px;
  padding: 0 13px;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  gap: 7px;
  transition:
    color 150ms var(--ease-workspace),
    background-color 150ms var(--ease-workspace),
    border-color 150ms var(--ease-workspace),
    box-shadow 150ms var(--ease-workspace),
    transform 90ms var(--ease-workspace);
}

.workspace-lens svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.workspace-lens:hover:not(:disabled) {
  color: var(--fg-primary);
  background: var(--surface-control);
}

.workspace-lens:active:not(:disabled) {
  transform: scale(0.96);
}

.workspace-lens.active,
.workspace-lens[aria-selected="true"] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--button-shadow);
}

.workspace-view-status {
  overflow: hidden;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-surface,
.workspace-module {
  grid-row: 2;
  min-width: 0;
  min-height: 0;
}

.map-surface {
  position: relative;
  overflow: hidden;
  background: var(--canvas-bg);
  isolation: isolate;
}

#canvas {
  background: var(--canvas-bg);
}

.canvas-base {
  fill: var(--canvas-bg);
}

#grid circle {
  fill: var(--canvas-grid);
}

.canvas-grid {
  opacity: 1;
}

#shadow feDropShadow {
  flood-color: var(--shadow-color);
}

#selectedGlow feDropShadow {
  flood-color: var(--accent);
}

.map-utility-bar {
  position: absolute;
  z-index: 23;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  width: min(750px, calc(100% - 370px));
  min-width: 0;
  min-height: 52px;
  padding: 5px;
  color: var(--fg-secondary);
  background: var(--surface-shell);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  gap: 5px;
}

.map-filter-search {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  min-width: 150px;
  height: 42px;
  color: var(--fg-muted);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.map-filter-search:focus-within {
  color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.map-filter-search svg {
  width: 18px;
  height: 18px;
  margin-left: 11px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.map-filter-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.map-filter-search input:focus-visible {
  background: transparent;
  outline: 0;
  box-shadow: none;
}

.map-tag-filter {
  flex: 0 1 126px;
  min-width: 100px;
}

.map-tag-filter select {
  width: 100%;
  height: 42px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.utility-toggle,
.utility-action {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 0 10px;
  color: var(--fg-secondary);
  background: transparent;
  gap: 7px;
}

.utility-toggle:hover:not(:disabled),
.utility-action:hover:not(:disabled) {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.utility-toggle[aria-pressed="true"],
.utility-toggle.active {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.map-filter-count {
  flex: 0 0 auto;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  white-space: nowrap;
}

.saved-view-control {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.saved-view-control .utility-action {
  border-radius: 8px 0 0 8px;
}

.saved-view-control .utility-icon {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.utility-icon span {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  place-items: center;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 8px;
}

.saved-views-panel {
  position: absolute;
  z-index: 250;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100dvh - 170px));
  padding: 12px;
  overflow: auto;
  color: var(--fg-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
  gap: 10px;
}

.saved-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.saved-view-head > div {
  display: grid;
  gap: 3px;
}

.saved-view-form {
  display: grid;
  padding: 10px;
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  gap: 7px;
}

.saved-view-form label {
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 650;
}

.saved-view-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.saved-view-form input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.saved-view-form button {
  padding: 0 14px;
  font-weight: 700;
}

.saved-view-list {
  display: grid;
  gap: 6px;
}

.saved-view-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 5px;
}

.saved-view-main {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  color: var(--fg-secondary);
  text-align: left;
  background: var(--surface-panel);
  gap: 2px;
}

.saved-view-main:hover,
.saved-view-main:focus-visible {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.saved-view-main small {
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.view-controls,
.command-dock,
.color-palette {
  color: var(--fg-primary);
  background: var(--surface-shell);
  border-color: var(--border-default);
  box-shadow: var(--shadow-md);
}

.view-controls {
  top: 16px;
}

.view-controls button {
  color: var(--fg-muted);
  background: transparent;
  border-color: transparent;
}

.view-controls button:hover:not(:disabled) {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-subtle);
}

.zoom-value {
  color: var(--fg-secondary);
}

.command-dock {
  background: var(--surface-shell);
  border-radius: 14px;
  box-shadow:
    0 20px 60px var(--shadow-color),
    0 1px 0 var(--border-subtle) inset;
}

.selection-context {
  border-color: var(--border-subtle);
}

.selection-chip {
  color: var(--on-accent);
  background: var(--accent);
}

.selection-slot {
  color: var(--fg-muted);
  border-color: var(--border-strong);
}

.selection-plus,
.selection-status {
  color: var(--fg-muted);
  font-size: 11px;
}

.tool {
  color: var(--fg-muted);
  background: transparent;
  border-color: transparent;
}

.tool:hover:not(:disabled),
.tool:focus-visible {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-default);
}

.command-divider,
.view-separator {
  background: var(--border-subtle);
}

.color-palette {
  background: var(--surface-raised);
}

.eyedropper,
.color-fallback input[type="text"],
.color-fallback input[type="color"] {
  color: var(--fg-secondary);
  background: var(--surface-control);
  border-color: var(--border-default);
}

.color-swatch {
  border-color: var(--surface-raised);
  box-shadow: 0 0 0 1px var(--border-default);
}

/* Graph-specific color overrides keep all four themes legible. */
.node .card-surface {
  fill: var(--node-paper);
  stroke: var(--node-paper-strong);
}
.node .card-initial,
.node .card-name,
.node .card-label {
  fill: var(--node-ink);
}
.node .card-meta,
.node .card-code {
  fill: var(--node-muted);
}
.node .selection-ring {
  stroke: var(--accent);
}
.edge,
.edge.spouse,
.edge.link,
.edge.coparent {
  stroke: var(--edge-neutral);
}
.edge.spouse {
  stroke: var(--warning);
}
.edge.link {
  stroke: var(--edge-accent);
}
.relationship-hit:focus-visible,
.relationship-selection {
  stroke: var(--accent-soft-strong);
}
.relation-label text {
  fill: var(--fg-secondary);
  stroke: var(--canvas-bg);
}
.selection-box {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.curve-guide {
  stroke: var(--accent);
}
.curve-anchor {
  fill: var(--canvas-bg);
  stroke: var(--accent);
}
.curve-control-visual {
  fill: var(--accent);
  stroke: var(--surface-base);
}

.graph-filtering .node.atlas-muted,
.roster-item.atlas-muted {
  opacity: 0.22;
}

.graph-filtering .node.atlas-match .selection-ring {
  opacity: 1;
  stroke-dasharray: 5 4;
}

.node,
.roster-item {
  transition: opacity 150ms var(--ease-workspace);
}

/* --------------------------------------------------------------------------
   Directory and insight modules
   -------------------------------------------------------------------------- */

.workspace-module {
  padding: clamp(20px, 2.6vw, 38px);
  overflow: auto;
  color: var(--fg-primary);
  background: var(--surface-base);
  scrollbar-color: var(--surface-hover) transparent;
  scrollbar-width: thin;
}

.module-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto 22px;
  gap: 20px;
}

.module-header h2 {
  margin: 5px 0 5px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
}

.module-header p {
  max-width: 620px;
  margin: 0;
  line-height: 1.6;
}

.module-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-primary-action,
.module-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  font-weight: 700;
  gap: 8px;
}

.directory-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(120px, 180px) minmax(
      140px,
      190px
    ) auto;
  align-items: center;
  max-width: 1240px;
  min-height: 60px;
  margin: 0 auto 12px;
  padding: 8px;
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  gap: 8px;
}

.directory-toolbar label {
  min-width: 0;
}

.directory-toolbar input,
.directory-toolbar select {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.directory-result-count {
  padding: 0 9px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}

.compare-tray {
  max-width: 1240px;
  margin: 0 auto 12px;
}

.compare-empty {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 9px 14px;
  color: var(--fg-muted);
  background: var(--surface-panel);
  border: 1px dashed var(--border-default);
  border-radius: 10px;
  gap: 10px;
}

.compare-empty svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 4px 5px 4px 13px;
  color: var(--fg-secondary);
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
  font-weight: 700;
}

.compare-head button {
  min-height: 40px;
  padding: 0 11px;
  color: var(--fg-muted);
  background: transparent;
}

.compare-head button:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 0 0 11px 11px;
  gap: 10px;
}

.compare-person,
.compare-placeholder {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  min-height: 116px;
  padding: 13px;
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  gap: 10px;
}

.compare-avatar,
.directory-avatar {
  display: grid;
  place-items: center;
  color: var(--node-ink);
  background: var(--avatar-color, var(--accent));
  border: 2px solid var(--border-default);
  border-radius: 9px 9px 3px 9px;
  font-family: var(--font-display);
  font-weight: 800;
}

.compare-avatar {
  width: 48px;
  height: 48px;
  font-size: 20px;
}

.compare-person > div:not(.compare-remove) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.compare-person small,
.compare-person dt {
  color: var(--fg-muted);
}

.compare-person dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 2px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  gap: 8px;
}

.compare-person dl div {
  display: grid;
  gap: 2px;
}

.compare-person dt {
  font-size: 9px;
}

.compare-person dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
}

.compare-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 7px;
}

.compare-placeholder {
  grid-template-columns: 1fr;
  place-content: center;
  color: var(--fg-muted);
  text-align: center;
  border-style: dashed;
}

.compare-placeholder span {
  font-size: 25px;
}

.directory-table {
  display: grid;
  max-width: 1240px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.directory-row {
  display: grid;
  grid-template-columns: 46px minmax(130px, 1.15fr) minmax(
      150px,
      1fr
    ) 56px minmax(125px, 0.75fr) minmax(150px, auto);
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 10px 12px;
  color: var(--fg-secondary);
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
  transition:
    background-color 150ms var(--ease-workspace),
    border-color 150ms var(--ease-workspace);
}

.directory-row:last-child {
  border-bottom: 0;
}

.directory-row:hover {
  background: var(--surface-raised);
}

.directory-avatar {
  width: 42px;
  height: 42px;
  font-size: 17px;
}

.directory-identity {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.directory-identity strong,
.directory-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory-identity strong {
  color: var(--fg-primary);
  font-family: var(--font-display);
  font-size: 16px;
}

.directory-identity small,
.directory-stat small,
.directory-completeness small {
  color: var(--fg-muted);
  font-size: 9px;
}

.directory-tags {
  display: flex;
  min-width: 0;
  overflow: hidden;
  gap: 5px;
}

.directory-tags span {
  overflow: hidden;
  min-height: 24px;
  padding: 4px 7px;
  color: var(--fg-secondary);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-strong);
  border-radius: 6px;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory-tags .quiet {
  color: var(--fg-muted);
  background: transparent;
  border-color: var(--border-subtle);
}

.directory-stat {
  display: grid;
  text-align: center;
  gap: 2px;
}

.directory-stat strong {
  color: var(--fg-primary);
  font-family: var(--font-mono);
  font-size: 17px;
}

.directory-completeness {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.directory-completeness > span {
  width: 100%;
  height: 6px;
  overflow: hidden;
  background: var(--surface-control);
  border-radius: 3px;
}

.directory-completeness i {
  display: block;
  height: 100%;
  background: var(--positive);
  border-radius: inherit;
}

.directory-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.directory-compare.active,
.directory-compare[aria-pressed="true"] {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.directory-focus {
  white-space: nowrap;
}

.insight-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1240px;
  margin: 0 auto 12px;
  gap: 10px;
}

.insight-metric {
  display: grid;
  min-width: 0;
  min-height: 124px;
  padding: 17px;
  align-content: space-between;
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  gap: 6px;
}

.insight-metric span,
.insight-metric small {
  color: var(--fg-muted);
}

.insight-metric span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.insight-metric strong {
  overflow: hidden;
  color: var(--fg-primary);
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 40px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-metric small {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1240px;
  margin: 0 auto;
  gap: 10px;
}

.insight-card {
  min-width: 0;
  padding: 18px;
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.insight-card-wide {
  grid-column: span 2;
}

.insight-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 13px;
  gap: 14px;
}

.insight-card-head h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
}

.insight-score {
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 750;
}

.action-list,
.rank-list,
.tag-landscape {
  display: grid;
  gap: 6px;
}

.action-item,
.rank-item,
.tag-bar {
  width: 100%;
  color: var(--fg-secondary);
  text-align: left;
  background: var(--surface-raised);
}

.action-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  min-height: 58px;
  padding: 8px 11px;
  gap: 10px;
}

.action-item:hover,
.rank-item:hover,
.tag-bar:hover {
  color: var(--fg-primary);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.action-item > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.action-item strong,
.action-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-item small {
  color: var(--fg-muted);
  font-size: 10px;
}

.action-item em,
.rank-item em,
.tag-bar em {
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.action-item.warning em,
.action-item.warning strong {
  color: var(--warning);
}

.action-item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.rank-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 58px;
  padding: 8px 11px;
  gap: 10px;
}

.rank-item > span {
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: 10px;
}

.rank-item > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.rank-item small {
  color: var(--fg-muted);
  font-size: 10px;
}

.tag-bar {
  display: grid;
  grid-template-columns: minmax(80px, 0.55fr) minmax(100px, 1fr) 30px;
  align-items: center;
  min-height: 50px;
  padding: 8px 11px;
  gap: 10px;
}

.tag-bar > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-bar > i {
  height: 7px;
  overflow: hidden;
  background: var(--surface-control);
  border-radius: 4px;
}

.tag-bar b {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.module-empty {
  display: grid;
  min-height: 180px;
  padding: 24px;
  place-content: center;
  color: var(--fg-secondary);
  text-align: center;
  background: var(--surface-panel);
  gap: 6px;
}

.module-empty.compact {
  min-height: 120px;
  background: transparent;
}

.module-empty p {
  max-width: 420px;
  margin: 0;
  line-height: 1.6;
}

.module-empty button {
  margin: 10px auto 0;
}

/* --------------------------------------------------------------------------
   Inspector extensions and command palette
   -------------------------------------------------------------------------- */

.inspector-panel {
  border-color: var(--border-subtle);
  box-shadow: -20px 0 50px var(--shadow-color);
}

.profile-form {
  scrollbar-color: var(--surface-hover) transparent;
}

.profile-form input,
.profile-form select,
.profile-form textarea,
.rel,
.modal input,
.modal select {
  background: var(--surface-raised);
  border-color: var(--border-default);
}

.hero-field input {
  background: transparent;
}

.tag {
  color: var(--fg-secondary);
  background: var(--accent-soft);
  border-color: var(--accent-soft-strong);
}

.rel {
  color: var(--fg-secondary);
}

.rel:hover,
.rel:focus-visible {
  color: var(--fg-primary);
  border-color: var(--accent);
}

.rel span {
  color: var(--on-accent);
  background: var(--accent);
}

.rel em {
  color: var(--fg-muted);
}

.custom-facts-section {
  gap: 10px;
}

.field-section-hint {
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.custom-facts {
  display: grid;
  gap: 8px;
}

.custom-fact-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr) 44px;
  align-items: end;
  padding: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  gap: 7px;
}

.custom-fact-row label {
  min-width: 0;
}

.custom-fact-row input,
.custom-fact-row textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid var(--border-default);
  border-radius: 7px;
  resize: vertical;
}

.custom-fact-key,
.custom-fact-value {
  min-width: 0;
  color: var(--fg-primary);
  background: var(--surface-control);
}

.custom-fact-row textarea {
  min-height: 64px;
}

.custom-fact-delete {
  align-self: end;
  margin-bottom: 0;
}

.custom-fact-empty {
  padding: 13px;
  color: var(--fg-muted);
  text-align: center;
  background: var(--surface-raised);
  border: 1px dashed var(--border-default);
  border-radius: 9px;
  font-size: 10px;
  line-height: 1.55;
}

.add-fact-button {
  width: 100%;
  border-style: dashed;
}

.backdrop,
.command-backdrop {
  background: var(--backdrop);
}

.modal,
.command-dialog,
.sync-dialog {
  color: var(--fg-primary);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  box-shadow: var(--panel-shadow);
}

.sync-dialog::backdrop {
  background: var(--backdrop);
}

.sync-version-card {
  background: var(--surface-shell);
  border-color: var(--border-default);
}

.sync-dialog-body > .sync-safety-note {
  color: var(--positive);
  background: var(--positive-soft);
  border-color: color-mix(in oklab, var(--positive) 28%, transparent);
}

.sync-later {
  color: var(--fg-muted);
}

.sync-later:hover,
.sync-later:focus-visible {
  color: var(--fg-primary);
}

.gender {
  background: var(--surface-shell);
  border-color: var(--border-default);
}

.gender button {
  color: var(--fg-muted);
}

.gender button:hover {
  color: var(--fg-primary);
  background: var(--surface-hover);
}

.gender .on {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.toast {
  color: var(--fg-primary);
  background: var(--surface-control);
  border-color: var(--border-strong);
}

.command-backdrop {
  align-items: start;
  padding-top: min(14vh, 120px);
}

.command-dialog {
  width: min(680px, calc(100vw - 28px));
  max-height: min(680px, calc(100dvh - 36px));
  overflow: hidden;
  border-radius: 14px;
}

.command-dialog-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 68px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  gap: 10px;
}

.command-dialog-head:focus-within {
  box-shadow: inset 0 0 0 2px var(--focus);
}

.command-dialog-head > svg {
  width: 22px;
  height: 22px;
  color: var(--accent-text);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.command-dialog-head input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0;
  color: var(--fg-primary);
  background: transparent;
  border: 0;
  font-size: 17px;
  outline: 0;
  box-shadow: none;
}

.command-dialog-head input:focus-visible {
  background: transparent;
  outline: 0;
  box-shadow: none;
}

.command-results {
  display: grid;
  max-height: min(510px, calc(100dvh - 210px));
  padding: 9px;
  overflow: auto;
  scrollbar-color: var(--surface-hover) transparent;
  gap: 4px;
}

.command-result {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 7px 10px;
  color: var(--fg-secondary);
  text-align: left;
  background: transparent;
  border-color: transparent;
  gap: 10px;
}

.command-result:hover:not(:disabled),
.command-result.active,
.command-result[aria-selected="true"] {
  color: var(--fg-primary);
  background: var(--accent-soft);
  border-color: var(--accent-soft-strong);
}

.command-result-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 8px 8px 3px 8px;
  font-family: var(--font-display);
  font-weight: 800;
}

.command-result > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.command-result strong,
.command-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-result small {
  color: var(--fg-muted);
  font-size: 10px;
}

.command-dialog-foot {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 14px;
  color: var(--fg-muted);
  background: var(--surface-panel);
  border-top: 1px solid var(--border-subtle);
  font-size: 9px;
  gap: 16px;
}

.command-dialog-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* --------------------------------------------------------------------------
   Heritage skins: material, border and canvas languages
   -------------------------------------------------------------------------- */

/* 水墨宣纸：纤维纸面、墨线与印章式操作。 */
:root[data-theme="ink"] body,
:root[data-theme="ink"] .app-header,
:root[data-theme="ink"] .roster-panel,
:root[data-theme="ink"] .inspector-panel,
:root[data-theme="ink"] .workspace-chrome,
:root[data-theme="ink"] .workspace-module,
:root[data-theme="ink"] .modal,
:root[data-theme="ink"] .command-dialog {
  background-image:
    repeating-linear-gradient(
      94deg,
      transparent 0 6px,
      oklch(0.25 0.022 245 / 0.018) 7px,
      transparent 8px 17px
    ),
    radial-gradient(
      circle at 18% 24%,
      oklch(0.25 0.022 245 / 0.035) 0 0.7px,
      transparent 0.9px
    );
  background-size: auto, 19px 23px;
}

:root[data-theme="ink"] #canvas {
  background-color: var(--canvas-bg);
  background-image:
    radial-gradient(
      ellipse at 18% 28%,
      oklch(0.25 0.022 245 / 0.09) 0,
      transparent 28%
    ),
    radial-gradient(
      ellipse at 82% 74%,
      oklch(0.25 0.022 245 / 0.055) 0,
      transparent 24%
    ),
    repeating-linear-gradient(
      97deg,
      transparent 0 11px,
      oklch(0.25 0.022 245 / 0.025) 12px,
      transparent 13px 31px
    );
}

:root[data-theme="ink"] .canvas-base,
:root[data-theme="vermilion"] .canvas-base,
:root[data-theme="celadon"] .canvas-base,
:root[data-theme="dunhuang"] .canvas-base {
  fill: transparent;
}

:root[data-theme="ink"] .app-header,
:root[data-theme="ink"] .workspace-chrome,
:root[data-theme="ink"] .roster-panel,
:root[data-theme="ink"] .inspector-panel,
:root[data-theme="ink"] .directory-table,
:root[data-theme="ink"] .insight-card,
:root[data-theme="ink"] .insight-metric {
  border-color: var(--border-default);
  box-shadow: inset 0 -1px 0 var(--border-subtle);
}

:root[data-theme="ink"] button,
:root[data-theme="ink"] summary,
:root[data-theme="ink"] .workspace-lenses,
:root[data-theme="ink"] .search,
:root[data-theme="ink"] input,
:root[data-theme="ink"] select,
:root[data-theme="ink"] textarea {
  border-radius: 3px 10px 3px 10px;
}

:root[data-theme="ink"] .export-button,
:root[data-theme="ink"] .btn.primary,
:root[data-theme="ink"] .primary-tool,
:root[data-theme="ink"] .module-primary-action,
:root[data-theme="ink"] .workspace-lens.active {
  box-shadow: 3px 3px 0 oklch(0.22 0.026 245 / 0.18);
}

:root[data-theme="ink"] .node .card-surface {
  stroke: oklch(0.22 0.026 245 / 0.38);
  stroke-width: 1.2;
}

:root[data-theme="ink"] .node .card-accent {
  opacity: 0.72;
}

:root[data-theme="ink"] .panel-heading h1,
:root[data-theme="ink"] .module-header h2,
:root[data-theme="ink"] .insight-card-head h3 {
  text-decoration: underline;
  text-decoration-color: oklch(0.22 0.026 245 / 0.2);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

/* 朱砂宫牒：深漆、朱门与克制的金线。 */
:root[data-theme="vermilion"] body,
:root[data-theme="vermilion"] .app-header,
:root[data-theme="vermilion"] .roster-panel,
:root[data-theme="vermilion"] .inspector-panel,
:root[data-theme="vermilion"] .workspace-chrome,
:root[data-theme="vermilion"] .workspace-module,
:root[data-theme="vermilion"] .modal,
:root[data-theme="vermilion"] .command-dialog {
  background-image:
    linear-gradient(
      180deg,
      oklch(0.86 0.105 80 / 0.055),
      transparent 24%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 27px,
      oklch(0.82 0.1 76 / 0.025) 28px,
      transparent 29px 56px
    );
}

:root[data-theme="vermilion"] #canvas {
  background-color: var(--canvas-bg);
  background-image:
    linear-gradient(
      30deg,
      transparent 48.5%,
      oklch(0.79 0.13 78 / 0.09) 49% 51%,
      transparent 51.5%
    ),
    linear-gradient(
      -30deg,
      transparent 48.5%,
      oklch(0.79 0.13 78 / 0.09) 49% 51%,
      transparent 51.5%
    ),
    radial-gradient(
      circle at center,
      oklch(0.79 0.13 78 / 0.08) 0 1.5px,
      transparent 2px
    );
  background-position: 0 0, 0 0, 0 0;
  background-size: 62px 36px, 62px 36px, 31px 18px;
}

:root[data-theme="vermilion"] .app-header,
:root[data-theme="vermilion"] .workspace-chrome,
:root[data-theme="vermilion"] .roster-panel,
:root[data-theme="vermilion"] .inspector-panel,
:root[data-theme="vermilion"] .directory-table,
:root[data-theme="vermilion"] .insight-card,
:root[data-theme="vermilion"] .insight-metric,
:root[data-theme="vermilion"] .modal,
:root[data-theme="vermilion"] .command-dialog {
  border-color: var(--border-default);
  box-shadow:
    inset 0 0 0 1px oklch(0.79 0.13 78 / 0.08),
    var(--button-shadow);
}

:root[data-theme="vermilion"] button,
:root[data-theme="vermilion"] summary,
:root[data-theme="vermilion"] .workspace-lenses,
:root[data-theme="vermilion"] .search,
:root[data-theme="vermilion"] input,
:root[data-theme="vermilion"] select,
:root[data-theme="vermilion"] textarea {
  border-radius: 2px;
}

:root[data-theme="vermilion"] .export-button,
:root[data-theme="vermilion"] .btn.primary,
:root[data-theme="vermilion"] .primary-tool,
:root[data-theme="vermilion"] .module-primary-action,
:root[data-theme="vermilion"] .workspace-lens.active {
  box-shadow:
    inset 0 0 0 1px oklch(0.98 0.018 78 / 0.28),
    0 5px 0 oklch(0.07 0.03 25 / 0.7);
}

:root[data-theme="vermilion"] .node .card-surface {
  stroke: var(--accent);
  stroke-width: 1.5;
}

:root[data-theme="vermilion"] .node .card-accent {
  opacity: 0.9;
}

:root[data-theme="vermilion"] .section-kicker {
  color: var(--accent-text);
}

/* 青瓷冰裂：温润釉面、细裂纹与圆润控件。 */
:root[data-theme="celadon"] body,
:root[data-theme="celadon"] .app-header,
:root[data-theme="celadon"] .roster-panel,
:root[data-theme="celadon"] .inspector-panel,
:root[data-theme="celadon"] .workspace-chrome,
:root[data-theme="celadon"] .workspace-module,
:root[data-theme="celadon"] .modal,
:root[data-theme="celadon"] .command-dialog {
  background-image:
    linear-gradient(
      117deg,
      transparent 0 47%,
      oklch(0.32 0.05 174 / 0.045) 48%,
      transparent 49% 100%
    ),
    linear-gradient(
      23deg,
      transparent 0 62%,
      oklch(0.32 0.05 174 / 0.035) 63%,
      transparent 64% 100%
    );
  background-size: 79px 61px, 103px 73px;
}

:root[data-theme="celadon"] #canvas {
  background-color: var(--canvas-bg);
  background-image:
    linear-gradient(
      112deg,
      transparent 0 47.7%,
      oklch(0.28 0.055 174 / 0.105) 48% 48.8%,
      transparent 49.1% 100%
    ),
    linear-gradient(
      29deg,
      transparent 0 62.5%,
      oklch(0.28 0.055 174 / 0.08) 63% 63.7%,
      transparent 64.2% 100%
    ),
    linear-gradient(
      151deg,
      transparent 0 74%,
      oklch(0.28 0.055 174 / 0.065) 74.5% 75%,
      transparent 75.5% 100%
    );
  background-size: 117px 89px, 83px 109px, 139px 97px;
}

:root[data-theme="celadon"] .app-header,
:root[data-theme="celadon"] .workspace-chrome,
:root[data-theme="celadon"] .roster-panel,
:root[data-theme="celadon"] .inspector-panel,
:root[data-theme="celadon"] .directory-table,
:root[data-theme="celadon"] .insight-card,
:root[data-theme="celadon"] .insight-metric,
:root[data-theme="celadon"] .modal,
:root[data-theme="celadon"] .command-dialog {
  border-color: var(--border-default);
  box-shadow:
    inset 0 0 0 1px oklch(0.995 0.005 166 / 0.7),
    0 13px 30px var(--shadow-color);
}

:root[data-theme="celadon"] button,
:root[data-theme="celadon"] summary,
:root[data-theme="celadon"] .workspace-lenses,
:root[data-theme="celadon"] .search,
:root[data-theme="celadon"] input,
:root[data-theme="celadon"] select,
:root[data-theme="celadon"] textarea {
  border-radius: 13px;
}

:root[data-theme="celadon"] .export-button,
:root[data-theme="celadon"] .btn.primary,
:root[data-theme="celadon"] .primary-tool,
:root[data-theme="celadon"] .module-primary-action,
:root[data-theme="celadon"] .workspace-lens.active {
  box-shadow:
    inset 0 1px 0 oklch(0.995 0.005 166 / 0.45),
    0 7px 17px oklch(0.2 0.04 174 / 0.18);
}

:root[data-theme="celadon"] .node .card-surface {
  stroke: oklch(0.38 0.09 166 / 0.4);
  stroke-width: 1;
}

:root[data-theme="celadon"] .node .selection-ring {
  stroke-width: 2.4;
}

/* 敦煌矿彩：赭石墙面、青金石动作与壁画式边饰。 */
:root[data-theme="dunhuang"] body,
:root[data-theme="dunhuang"] .app-header,
:root[data-theme="dunhuang"] .roster-panel,
:root[data-theme="dunhuang"] .inspector-panel,
:root[data-theme="dunhuang"] .workspace-chrome,
:root[data-theme="dunhuang"] .workspace-module,
:root[data-theme="dunhuang"] .modal,
:root[data-theme="dunhuang"] .command-dialog {
  background-image:
    radial-gradient(
      circle at 13% 31%,
      oklch(0.22 0.052 45 / 0.07) 0 0.8px,
      transparent 1px
    ),
    radial-gradient(
      circle at 71% 63%,
      oklch(0.96 0.025 78 / 0.16) 0 0.7px,
      transparent 1px
    );
  background-size: 23px 19px, 31px 27px;
}

:root[data-theme="dunhuang"] #canvas {
  background-color: var(--canvas-bg);
  background-image:
    radial-gradient(
      circle at 16px 16px,
      oklch(0.34 0.14 255 / 0.12) 0 2px,
      transparent 2.5px
    ),
    linear-gradient(
      45deg,
      transparent 47%,
      oklch(0.43 0.17 25 / 0.075) 48% 52%,
      transparent 53%
    ),
    linear-gradient(
      -45deg,
      transparent 47%,
      oklch(0.22 0.052 45 / 0.065) 48% 52%,
      transparent 53%
    );
  background-size: 64px 64px, 128px 128px, 128px 128px;
}

:root[data-theme="dunhuang"] .app-header,
:root[data-theme="dunhuang"] .workspace-chrome,
:root[data-theme="dunhuang"] .roster-panel,
:root[data-theme="dunhuang"] .inspector-panel,
:root[data-theme="dunhuang"] .directory-table,
:root[data-theme="dunhuang"] .insight-card,
:root[data-theme="dunhuang"] .insight-metric,
:root[data-theme="dunhuang"] .modal,
:root[data-theme="dunhuang"] .command-dialog {
  border-color: var(--border-strong);
  box-shadow:
    inset 0 0 0 2px oklch(0.9 0.06 78 / 0.28),
    0 12px 28px var(--shadow-color);
}

:root[data-theme="dunhuang"] button,
:root[data-theme="dunhuang"] summary,
:root[data-theme="dunhuang"] .workspace-lenses,
:root[data-theme="dunhuang"] .search,
:root[data-theme="dunhuang"] input,
:root[data-theme="dunhuang"] select,
:root[data-theme="dunhuang"] textarea {
  border-radius: 7px 2px 7px 2px;
}

:root[data-theme="dunhuang"] .export-button,
:root[data-theme="dunhuang"] .btn.primary,
:root[data-theme="dunhuang"] .primary-tool,
:root[data-theme="dunhuang"] .module-primary-action,
:root[data-theme="dunhuang"] .workspace-lens.active {
  box-shadow:
    inset 0 -2px 0 oklch(0.18 0.052 45 / 0.32),
    3px 3px 0 oklch(0.18 0.052 45 / 0.2);
}

:root[data-theme="dunhuang"] .node .card-surface {
  stroke: var(--accent);
  stroke-width: 1.35;
}

:root[data-theme="dunhuang"] .node .card-accent {
  opacity: 0.84;
}

:root[data-theme="dunhuang"] .section-kicker,
:root[data-theme="dunhuang"] .count-badge,
:root[data-theme="dunhuang"] .insight-score {
  color: var(--accent-text);
}

/* 古风皮肤不仅换色，也替换高频组件的形状与材质语言。 */
:root[data-theme="ink"] .brand-mark {
  color: oklch(0.98 0.01 92);
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 2px 2px 0 oklch(0.22 0.026 245 / 0.18);
}

:root[data-theme="ink"] .roster-item {
  min-height: 58px;
  background: transparent;
  border-width: 0 0 1px;
  border-color: var(--border-subtle);
  border-radius: 0;
}

:root[data-theme="ink"] .roster-item + .roster-item {
  margin-top: 0;
}

:root[data-theme="ink"] .roster-item.selected::before {
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 4px;
  background: var(--accent);
  border-radius: 0;
}

:root[data-theme="ink"] .roster-avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--surface-shell);
}

:root[data-theme="ink"] .node .card-surface {
  rx: 2px;
}

:root[data-theme="ink"] .node .card-avatar {
  rx: 21px;
}

:root[data-theme="ink"] .node .selection-ring {
  stroke: var(--accent);
  stroke-dasharray: 7 4;
}

:root[data-theme="ink"] #grid {
  opacity: 0.08;
}

:root[data-theme="ink"] .theme-menu-panel,
:root[data-theme="ink"] .project-menu-panel,
:root[data-theme="ink"] .saved-views-panel {
  border-top: 4px solid var(--accent);
  border-radius: 2px 12px 2px 12px;
}

:root[data-theme="ink"] button:active:not(:disabled),
:root[data-theme="ink"] summary:active {
  transform: translate(1px, 1px);
}

:root[data-theme="vermilion"] .brand-mark {
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--focus);
  border-radius: 1px;
  box-shadow: inset 0 0 0 2px oklch(0.12 0.037 25 / 0.55);
}

:root[data-theme="vermilion"] .roster-item {
  margin-block: 3px;
  background: oklch(0.12 0.037 25 / 0.58);
  border-color: var(--border-subtle);
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px oklch(0.82 0.1 76 / 0.035);
}

:root[data-theme="vermilion"] .roster-item.selected {
  border-color: var(--border-strong);
}

:root[data-theme="vermilion"] .roster-item.selected::before {
  top: 7px;
  bottom: 7px;
  left: 2px;
  width: 5px;
  background: var(--accent);
  border-radius: 0;
}

:root[data-theme="vermilion"] .roster-avatar,
:root[data-theme="vermilion"] .node .card-avatar {
  border-radius: 1px;
  rx: 1px;
}

:root[data-theme="vermilion"] .node .card-surface {
  rx: 1px;
  stroke: var(--focus);
}

:root[data-theme="vermilion"] .node .selection-ring {
  stroke: var(--focus);
  stroke-dasharray: none;
}

:root[data-theme="vermilion"] .theme-menu-panel,
:root[data-theme="vermilion"] .project-menu-panel,
:root[data-theme="vermilion"] .saved-views-panel,
:root[data-theme="vermilion"] .modal,
:root[data-theme="vermilion"] .command-dialog {
  border: 3px double var(--border-strong);
  border-radius: 1px;
}

:root[data-theme="vermilion"] button:active:not(:disabled),
:root[data-theme="vermilion"] summary:active {
  transform: translateY(2px);
}

:root[data-theme="celadon"] .brand-mark {
  border: 1px solid var(--border-default);
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.7),
    0 5px 14px var(--shadow-color);
}

:root[data-theme="celadon"] .roster-item {
  width: calc(100% - 10px);
  margin: 4px 5px;
  background: var(--surface-raised);
  border-color: var(--border-subtle);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.55);
}

:root[data-theme="celadon"] .roster-item + .roster-item {
  margin-top: 4px;
}

:root[data-theme="celadon"] .roster-avatar {
  border-radius: 50%;
}

:root[data-theme="celadon"] .node .card-surface {
  rx: 18px;
}

:root[data-theme="celadon"] .node .card-avatar {
  rx: 21px;
}

:root[data-theme="celadon"] #grid {
  opacity: 0.06;
}

:root[data-theme="celadon"] .theme-menu-panel,
:root[data-theme="celadon"] .project-menu-panel,
:root[data-theme="celadon"] .saved-views-panel,
:root[data-theme="celadon"] .modal,
:root[data-theme="celadon"] .command-dialog {
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / 0.62),
    var(--panel-shadow);
}

:root[data-theme="celadon"] button:active:not(:disabled),
:root[data-theme="celadon"] summary:active {
  transform: scale(0.98);
}

:root[data-theme="dunhuang"] .brand-mark {
  border: 2px solid var(--border-strong);
  border-radius: 9px 2px 9px 2px;
  box-shadow: 3px 3px 0 oklch(0.18 0.052 45 / 0.2);
}

:root[data-theme="dunhuang"] .roster-item {
  margin-block: 3px;
  background: oklch(0.9 0.06 78 / 0.32);
  border-color: var(--border-subtle);
  border-radius: 8px 2px 8px 2px;
}

:root[data-theme="dunhuang"] .roster-item.selected::before {
  top: 6px;
  bottom: 6px;
  left: 1px;
  width: 5px;
  border-radius: 0;
}

:root[data-theme="dunhuang"] .node .card-surface {
  rx: 2px;
}

:root[data-theme="dunhuang"] .node .card-avatar {
  rx: 2px;
  transform: rotate(45deg);
  transform-box: fill-box;
  transform-origin: center;
}

:root[data-theme="dunhuang"] .app-header::after,
:root[data-theme="dunhuang"] .module-header::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 3px;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0 8px,
    var(--danger) 8px 14px,
    var(--warning) 14px 20px,
    transparent 20px 25px
  );
  opacity: 0.62;
}

:root[data-theme="dunhuang"] .module-header {
  position: relative;
  padding-bottom: 12px;
}

:root[data-theme="dunhuang"] .theme-menu-panel,
:root[data-theme="dunhuang"] .project-menu-panel,
:root[data-theme="dunhuang"] .saved-views-panel {
  border-top: 5px solid var(--accent);
  border-radius: 9px 2px 9px 2px;
}

:root[data-theme="dunhuang"] button:active:not(:disabled),
:root[data-theme="dunhuang"] summary:active {
  transform: translate(1px, 1px);
}

/* --------------------------------------------------------------------------
   Responsive layouts: 1440 / 1024 / 768 / 375 and low-height windows
   -------------------------------------------------------------------------- */

@media (max-width: 1440px) {
  .map-utility-bar {
    width: min(660px, calc(100% - 340px));
  }

  .utility-toggle span,
  .utility-action span {
    display: none;
  }

  .directory-row {
    grid-template-columns: 46px minmax(120px, 1fr) minmax(
        130px,
        0.9fr
      ) 50px minmax(110px, 0.7fr) auto;
  }
}

@media (max-width: 1180px) {
  .command-palette-trigger {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  .command-palette-trigger span,
  .command-palette-trigger kbd {
    display: none;
  }

  .map-utility-bar {
    right: 16px;
    width: auto;
  }

  .view-controls {
    top: 78px;
  }

  .saved-views-panel {
    top: calc(100% + 10px);
  }

  .directory-row {
    grid-template-columns: 42px minmax(110px, 1fr) minmax(
        100px,
        0.85fr
      ) 48px minmax(100px, 0.7fr) auto;
    gap: 9px;
  }

  .directory-focus {
    width: 44px;
    min-width: 44px;
    padding: 0;
    overflow: hidden;
    color: transparent;
  }

  .directory-focus::before {
    content: "↗";
    color: var(--fg-secondary);
    font-size: 16px;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .workspace.inspector-open .selection-context {
    position: absolute !important;
    display: grid !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (max-width: 1024px) {
  :root,
  [data-theme] {
    --chrome-h: 52px;
  }

  .app-header {
    grid-template-columns: 174px minmax(170px, 1fr) auto;
  }

  .brand {
    padding-inline: 13px;
  }

  .project-heading {
    padding-inline: 14px;
  }

  .workspace-lens {
    min-width: 86px;
    min-height: 40px;
    padding-inline: 10px;
  }

  .workspace-module {
    padding: 22px;
  }

  .module-header {
    align-items: start;
  }

  .directory-toolbar {
    grid-template-columns: minmax(180px, 1fr) minmax(110px, 150px) minmax(
        125px,
        165px
      );
  }

  .directory-result-count {
    grid-column: 1 / -1;
    padding: 0 3px 3px;
    text-align: left;
  }

  .directory-row {
    grid-template-columns: 42px minmax(120px, 1fr) minmax(
        110px,
        0.85fr
      ) 46px auto;
  }

  .directory-completeness {
    display: none;
  }

  .insight-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .canvas-wrap {
    grid-row: 2;
  }

  .workspace-chrome {
    padding-inline: 9px;
  }

  .workspace-lens {
    min-width: 82px;
    padding-inline: 9px;
  }

  .workspace-view-status {
    max-width: 110px;
  }

  .map-utility-bar {
    top: 8px;
    right: 8px;
    left: 8px;
    display: grid;
    grid-template-columns: minmax(130px, 1fr) minmax(96px, 130px) repeat(
        4,
        44px
      );
    min-height: 52px;
    overflow: visible;
  }

  .map-filter-search {
    min-width: 0;
  }

  .map-filter-count {
    position: absolute;
    top: calc(100% + 5px);
    left: 4px;
  }

  .utility-toggle,
  .utility-action {
    width: 44px;
    padding: 0;
  }

  .saved-view-control {
    width: 88px;
  }

  .saved-view-control .utility-action,
  .saved-view-control .utility-icon {
    width: 44px;
  }

  .view-controls {
    top: 72px;
    right: 8px;
  }

  .command-dock {
    z-index: 28;
  }

  .selection-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .workspace-module {
    padding: 18px 14px 28px;
  }

  .module-header {
    margin-bottom: 16px;
  }

  .module-header h2 {
    font-size: 27px;
  }

  .module-header p {
    max-width: 440px;
    font-size: 12px;
  }

  .directory-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(105px, 0.42fr);
  }

  .directory-toolbar label:nth-child(3) {
    grid-column: 1 / -1;
  }

  .directory-row {
    grid-template-columns: 42px minmax(100px, 1fr) minmax(100px, 0.75fr) auto;
  }

  .directory-stat {
    display: none;
  }

  .compare-grid,
  .insight-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .insight-card-wide {
    grid-column: span 1;
  }
}

@media (max-width: 680px) {
  .workspace-chrome {
    justify-content: center;
  }

  .workspace-view-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .workspace-lenses {
    width: 100%;
  }

  .workspace-lens {
    flex: 1 1 0;
    min-width: 0;
  }

  .map-utility-bar {
    grid-template-columns: minmax(120px, 1fr) minmax(92px, 0.7fr) repeat(
        2,
        44px
      );
  }

  .utility-toggle:nth-of-type(1),
  .utility-toggle:nth-of-type(2) {
    grid-row: 2;
  }

  .saved-view-control {
    grid-row: 2;
    grid-column: 3 / span 2;
  }

  .view-controls {
    top: 126px;
  }

  .module-header {
    display: grid;
  }

  .module-header-actions {
    width: 100%;
  }

  .module-header-actions > button {
    flex: 1 1 0;
  }

  .directory-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 10px;
  }

  .directory-tags {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .directory-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .insight-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .custom-fact-row {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .custom-fact-row label:first-child {
    grid-column: 1;
  }

  .custom-fact-row label:nth-child(2) {
    grid-column: 1 / -1;
  }

  .custom-fact-delete {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 460px) {
  :root,
  [data-theme] {
    --header-h: 112px;
    --chrome-h: 50px;
  }

  .app-header {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: 58px 54px;
    height: var(--header-h);
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    height: 58px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .project-heading {
    grid-column: 2;
    grid-row: 1;
    align-content: center;
    height: 58px;
    padding: 3px 10px 2px 3px;
  }

  .title {
    min-height: 26px;
    font-size: 15px;
  }

  .project-meta {
    display: flex;
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    gap: 7px;
    white-space: nowrap;
  }

  .project-meta > span:not(:first-child) {
    display: inline;
  }

  .project-meta > span:not(:first-child)::before {
    margin-right: 7px;
  }

  .header-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(40px, 1fr));
    width: 100%;
    height: 54px;
    padding: 5px 8px;
    border-top: 1px solid var(--border-subtle);
    gap: 4px;
  }

  .header-actions .icon-button,
  .header-actions .export-button,
  .header-actions .command-palette-trigger {
    width: 100%;
    min-width: 40px;
    min-height: 42px;
  }

  .export-button {
    padding: 0;
  }

  .export-button span {
    display: none;
  }

  .theme-menu,
  .project-menu {
    min-width: 0;
  }

  .theme-menu summary,
  .project-menu summary {
    width: 100%;
  }

  .theme-menu-panel,
  .project-menu-panel {
    position: fixed;
    top: calc(var(--header-h) - 2px);
    right: 8px;
    left: 8px;
    width: auto;
  }

  .workspace,
  .workspace.inspector-open {
    height: calc(100dvh - var(--header-h));
    grid-template-rows: 136px minmax(0, 1fr);
  }

  .roster-panel {
    grid-template-columns: 104px minmax(0, 1fr);
    padding-inline: 8px;
  }

  .workspace-lens {
    min-height: 40px;
    padding: 0 8px;
    gap: 5px;
  }

  .workspace-lens svg {
    width: 16px;
    height: 16px;
  }

  .map-utility-bar {
    grid-template-columns: minmax(118px, 1fr) minmax(88px, 0.72fr) repeat(
        2,
        44px
      );
    min-height: 48px;
    padding: 3px;
    gap: 3px;
  }

  .map-filter-search,
  .map-filter-search input,
  .map-tag-filter select {
    height: 40px;
  }

  .utility-toggle,
  .utility-action,
  .utility-icon,
  .saved-view-control .utility-action,
  .saved-view-control .utility-icon {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .saved-view-control {
    width: 88px;
  }

  .saved-views-panel {
    position: fixed;
    top: calc(var(--header-h) + 146px);
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - var(--header-h) - 168px);
  }

  .view-controls {
    top: 120px;
  }

  .workspace-module {
    padding: 15px 9px 24px;
  }

  .module-header h2 {
    font-size: 24px;
  }

  .module-header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .module-primary-action,
  .module-secondary-action {
    padding-inline: 8px;
    font-size: 11px;
  }

  .directory-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .directory-toolbar label:nth-child(3),
  .directory-result-count {
    grid-column: 1;
  }

  .directory-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .directory-tags {
    display: none;
  }

  .directory-actions {
    gap: 4px;
  }

  .compare-grid {
    padding: 8px;
  }

  .compare-person {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 10px;
  }

  .compare-avatar {
    width: 42px;
    height: 42px;
  }

  .insight-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .insight-metric {
    min-height: 104px;
  }

  .insight-card {
    padding: 13px;
  }

  .command-backdrop {
    padding: 8px;
    padding-top: 18px;
  }

  .command-dialog {
    width: 100%;
    max-height: calc(100dvh - 36px);
  }

  .command-dialog-head {
    min-height: 60px;
    padding: 7px 10px;
  }

  .command-results {
    max-height: calc(100dvh - 158px);
  }

  .command-dialog-foot {
    justify-content: space-between;
    gap: 5px;
  }

  .command-dialog-foot span:nth-child(2) {
    display: none;
  }
}

@media (max-width: 390px) {
  .project-meta > span:not(:first-child) {
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .workspace-lens span {
    font-size: 11px;
  }

  .map-tag-filter {
    min-width: 82px;
  }

  .module-header p {
    font-size: 11px;
  }

  .directory-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }
}

@media (max-height: 680px) and (min-width: 821px) {
  :root,
  [data-theme] {
    --header-h: 64px;
    --chrome-h: 48px;
  }

  .app-header {
    height: var(--header-h);
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .workspace {
    height: calc(100dvh - var(--header-h));
  }

  .map-utility-bar {
    top: 8px;
  }

  .view-controls {
    top: 66px;
  }

  .command-dock {
    bottom: 8px;
  }

  .selection-context {
    position: absolute !important;
    display: grid !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .command-dock {
    grid-template-columns: minmax(0, 1fr);
    min-height: 64px;
  }

  .roster-foot {
    display: none;
  }

  .workspace-module {
    padding-block: 16px;
  }

  .module-header {
    margin-bottom: 12px;
  }

  .insight-metric {
    min-height: 98px;
  }
}

@media (max-width: 820px) and (max-height: 600px) {
  .selection-context {
    position: absolute !important;
    display: grid !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .map-utility-bar {
    top: 4px;
  }

  .view-controls {
    top: 112px;
  }

  .workspace-module {
    padding-top: 10px;
  }

  .module-header p,
  .module-header .section-kicker {
    display: none;
  }

  .module-header {
    margin-bottom: 9px;
  }

  .module-header h2 {
    margin-block: 0;
  }
}

@media (pointer: coarse) {
  button,
  summary,
  .workspace-lens,
  input,
  select {
    min-height: 44px;
  }

  .icon-button,
  .utility-toggle,
  .utility-action,
  .utility-icon,
  .directory-compare,
  .compare-remove,
  .saved-view-delete,
  .custom-fact-delete {
    width: 44px;
    min-width: 44px;
  }

  .saved-view-control {
    width: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  button:active:not(:disabled),
  summary:active {
    transform: none !important;
  }
}