/* Wutoon Theme Runtime
   Preserve the existing Light UI exactly. Dark is a restrained projection of
   the same interface; no layout, hierarchy, density or typography changes. */

:root {
  /* Canonical Intent Surface primitive.
     Search / Ask / Modify / follow-up share visual grammar; presence controls size, not a new component language. */
  --wk-intent-compact-height: 34px;
  --wk-intent-local-height: 42px;
  --wk-intent-border: var(--line-strong, var(--wk-query-rule-strong, rgba(39,44,54,.22)));
  --wk-intent-rule: var(--line, var(--wk-query-rule, rgba(39,44,54,.14)));
  --wk-intent-surface: var(--surface, var(--wk-query-paper, #fff));
  --wk-intent-ink: var(--ink, var(--wk-query-ink, #272c36));
  --wk-intent-muted: var(--muted, var(--wk-query-muted, #5e6675));
  --wk-intent-soft: var(--faint, var(--wk-query-soft, #858b96));
  --wk-intent-focus-ring: var(--wk-nav-focus-ring, var(--wk-query-focus-ring, rgba(23,26,29,.07)));
  --wk-intent-kbd-bg: var(--paper, var(--wk-query-surface-subtle, #f4f4f1));
  --wk-intent-radius: 0px;
}

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

html[data-theme="dark"] {
  color-scheme: dark;

  /* Library */
  --paper: #2d3142;
  --surface: #33384b;
  --surface-soft: #303548;
  --ink: #f5f5f5;
  --muted: #bfc0c0;
  --faint: #8e98ac;
  --line: rgba(245,245,245,.12);
  --line-strong: rgba(245,245,245,.24);
  --accent: #f08a59;
  --current: #72c39a;
  --current-soft: rgba(114,195,154,.12);
  --current-focus: rgba(114,195,154,.28);
  --current-border: rgba(114,195,154,.32);
  --exploring: #d9a05c;
  --historical: #9aa9bd;
  --archived: #8c909b;
  --on-ink: #2d3142;
  --on-current: #2d3142;

  /* Authored Knowledge / Reader compatibility */
  --bg: #2d3142;
  --paper-2: #303548;
  --paper2: #303548;
  --soft: #8e98ac;
  --rule: rgba(245,245,245,.12);
  --accent-soft: rgba(240,138,89,.10);

  /* Reader */
  --wk-bg: #2d3142;
  --wk-paper: #33384b;
  --wk-ink: #f5f5f5;
  --wk-muted: #bfc0c0;
  --wk-soft: #8e98ac;
  --wk-rule: rgba(245,245,245,.12);
  --wk-accent: #f08a59;
  --wk-accent-soft: rgba(240,138,89,.10);
  --wk-current: #72c39a;
  --wk-exploring: #d9a05c;

  /* Navigation / search */
  --wk-nav-bg: rgba(45,49,66,.96);
  --wk-nav-surface: #33384b;
  --wk-nav-ink: #f5f5f5;
  --wk-nav-muted: #bfc0c0;
  --wk-nav-soft: #8e98ac;
  --wk-nav-rule: rgba(245,245,245,.12);
  --wk-nav-rule-strong: rgba(245,245,245,.24);
  --wk-nav-focus-ring: rgba(245,245,245,.09);
  --wk-nav-kbd-bg: #303548;
  --wk-nav-panel-shadow: 0 22px 60px rgba(0,0,0,.22);
  --wk-nav-accent: #f08a59;

  /* Ask Knowledge */
  --wk-query-bg: rgba(45,49,66,.92);
  --wk-query-paper: #33384b;
  --wk-query-ink: #f5f5f5;
  --wk-query-muted: #bfc0c0;
  --wk-query-soft: #8e98ac;
  --wk-query-rule: rgba(245,245,245,.12);
  --wk-query-accent: #f08a59;
  --wk-query-accent-soft: rgba(240,138,89,.10);
  --wk-query-current: #72c39a;
  --wk-query-exploring: #d9a05c;
  --wk-query-surface: #33384b;
  --wk-query-surface-subtle: #303548;
  --wk-query-surface-hover: #393e53;
  --wk-query-line-faint: rgba(245,245,245,.08);
  --wk-query-rule-strong: rgba(245,245,245,.22);
  --wk-query-focus-ring: rgba(245,245,245,.09);
  --wk-query-caution-bg: rgba(217,160,92,.10);
  --wk-query-caution-ink: #e2b477;
  --wk-query-shadow: 0 24px 64px rgba(0,0,0,.24);
  --wk-query-on-ink: #2d3142;
  --wk-query-composer-bg: rgba(51,56,75,.97);
  --wk-query-composer-shadow: 0 -10px 24px rgba(0,0,0,.12);
  --wk-query-error: #f2a18e;

  /* AI Runtime settings */
  --wk-settings-bg: #33384b;
  --wk-settings-surface: #393e53;
  --wk-settings-surface-muted: #303548;
  --wk-settings-ink: #f5f5f5;
  --wk-settings-muted: #bfc0c0;
  --wk-settings-soft: #a8b0bf;
  --wk-settings-faint: #a8b0bf;
  --wk-settings-rule: rgba(245,245,245,.14);
  --wk-settings-rule-strong: rgba(245,245,245,.28);
  --wk-settings-accent: #f08a59;
  --wk-settings-ready: #72c39a;
  --wk-settings-error: #ef9a82;
  --wk-settings-backdrop: rgba(45,49,66,.86);
  --wk-settings-focus-ring: rgba(245,245,245,.08);
  --wk-settings-primary-bg: #454b61;
  --wk-settings-primary-ink: #f5f5f5;
  --wk-settings-primary-border: rgba(245,245,245,.30);
  --wk-settings-primary-hover: #4d546c;
  --wk-settings-secondary-ink: #bfc0c0;
  --wk-settings-secondary-border: rgba(245,245,245,.18);
  --wk-settings-secondary-hover: rgba(245,245,245,.06);
}

/* Dark only: replace hard-coded light surfaces. Geometry is untouched. */
html[data-theme="dark"] body {
  background: #2d3142;
  color: var(--ink);
}

html[data-theme="dark"] .topbar {
  background: rgba(45,49,66,.97);
}

html[data-theme="dark"] .project-group {
  border-color: rgba(245,245,245,.12);
  background: rgba(51,56,75,.72);
}

html[data-theme="dark"] .map-board {
  background-image: radial-gradient(circle, rgba(245,245,245,.09) .7px, transparent .8px);
}

html[data-theme="dark"] .relationship-line {
  stroke: #8e98ac;
}

html[data-theme="dark"] .map-card {
  background: rgba(51,56,75,.94);
}

html[data-theme="dark"] .map-card:hover,
html[data-theme="dark"] .map-card:focus-visible,
html[data-theme="dark"] .map-card.is-active {
  background: #393e53;
}

html[data-theme="dark"] body.wk-workspace-process .project-group.has-spine .map-card:hover,
html[data-theme="dark"] body.wk-workspace-process .project-group.has-spine .map-card:focus-visible,
html[data-theme="dark"] body.wk-workspace-process .project-group.has-spine .map-card.is-active {
  background: rgba(57,62,83,.55);
}

html[data-theme="dark"] .map-relation-trigger {
  background: rgba(51,56,75,.90);
}

html[data-theme="dark"] .map-relation-trigger:hover {
  background: #393e53;
}

html[data-theme="dark"] .detail-header {
  background: rgba(51,56,75,.97);
}

html[data-theme="dark"] .knowledge-card:hover,
html[data-theme="dark"] .wk-search-result:hover,
html[data-theme="dark"] .wk-search-result:focus-visible {
  background: #393e53;
}

html[data-theme="dark"] .wk-search-backdrop {
  background: rgba(45,49,66,.86);
}

html[data-theme="dark"] .wk-search-panel,
html[data-theme="dark"] .wk-search-input-shell,
html[data-theme="dark"] .wk-share-menu {
  border-color: rgba(245,245,245,.18);
  background: #33384b;
  color: #f5f5f5;
}

html[data-theme="dark"] .wk-share-option:hover,
html[data-theme="dark"] .wk-share-option:focus-visible {
  background: rgba(245,245,245,.06);
}

html[data-theme="dark"] .error-message {
  border-color: #f08a59;
  background: rgba(240,138,89,.10);
  color: #f5c0a7;
}

/* Reader authored-surface compatibility.
   Old standalone pages may still contain literal light surfaces. Dark mode
   normalizes those neutral containers without changing layout or semantics. */
html[data-theme="dark"] :where(
  .principle,
  .criterion,
  .compare > div,
  .plain,
  .q,
  .gate,
  .exception,
  .verdict,
  .road,
  .loop,
  details,
  .matrix,
  .criteria,
  .levels,
  .diagram,
  .diagram-frame
) {
  background: var(--wk-paper);
  color: var(--wk-ink);
}

html[data-theme="dark"] :where(.matrix, .criteria, .levels) th {
  background: #393e53;
  color: var(--wk-soft);
}

html[data-theme="dark"] :where(.accept, .warn):not([data-knowledge-kind]) {
  background: var(--wk-accent-soft);
  color: var(--wk-ink);
  border-left-color: var(--wk-accent);
}

html[data-theme="dark"] :where(.diagram, .diagram-frame) {
  border-color: var(--wk-rule);
}

/* diagram-design: follow the native Minimal Dark palette, but never alter
   layout or SVG geometry. JS only swaps palette values on explicitly tagged SVG. */
html[data-theme="dark"] svg[data-diagram-baseline="diagram-design"] {
  background: #2d3142;
}

/* Global utility rail.
   Theme is application chrome, not article content. Home and Reader therefore
   share one viewport-anchored location instead of inheriting different headers. */
.wk-global-utilities {
  position: fixed;
  top: 17px;
  right: clamp(18px, 2.7vw, 44px);
  z-index: 89;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}

/* On Home, utility chrome participates in the header flow. It must not share
   a fixed viewport coordinate with Query or AI Runtime controls. */
.wk-global-utilities--inline {
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
  align-self: center;
}

.wk-theme-control {
  position: relative;
  flex: 0 0 auto;
  line-height: 1;
  pointer-events: auto;
}

.wk-theme-trigger {
  appearance: none;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--faint, var(--wk-soft, #8b9199));
  cursor: pointer;
}

.wk-theme-trigger:hover,
.wk-theme-trigger[aria-expanded="true"] {
  border-color: var(--line, var(--wk-rule, rgba(39,44,54,.14)));
  color: var(--ink, var(--wk-ink, #272c36));
}

.wk-theme-trigger:focus-visible,
.wk-theme-menu button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.wk-theme-trigger svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wk-theme-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 180;
  width: 128px;
  padding: 5px;
  border: 1px solid var(--line, var(--wk-rule, rgba(39,44,54,.14)));
  background: var(--surface, var(--wk-paper, #fff));
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.wk-theme-menu[hidden] {
  display: none;
}

.wk-theme-menu button {
  appearance: none;
  display: grid;
  grid-template-columns: 1fr 14px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--muted, var(--wk-muted, #5e6675));
  cursor: pointer;
  font: 500 11px/1.3 Inter, "PingFang SC", sans-serif;
  text-align: left;
}

.wk-theme-menu button:hover {
  background: color-mix(in srgb, currentColor 6%, transparent);
  color: var(--ink, var(--wk-ink, #272c36));
}

.wk-theme-menu button[aria-checked="true"] {
  color: var(--ink, var(--wk-ink, #272c36));
  font-weight: 650;
}

.wk-theme-menu button i {
  display: grid;
  width: 12px;
  height: 12px;
  place-items: center;
}

.wk-theme-menu button[aria-checked="true"] i::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent, var(--wk-accent, #e36b35));
}

@media (max-width: 900px) {
  .wk-global-utilities {
    top: 13px;
    right: 18px;
  }

  .topbar .brand {
    padding-right: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}