/* Shared surface semantics. This layer follows legacy inline component styles. */
:root {
  color-scheme: light;
  --ce-n-0: var(--shell-surface);
  --ce-n-50: var(--shell-surface-2);
  --ce-n-100: var(--shell-hover);
  --ce-n-200: var(--shell-line);
  --ce-n-300: var(--shell-edge-soft);
  --ce-n-400: var(--shell-ink-3);
  --ce-n-500: var(--shell-ink-2);
  --ce-n-600: var(--shell-ink-2);
  --ce-n-700: var(--shell-ink);
  --ce-n-800: var(--shell-ink);
  --ce-n-900: var(--shell-ink);
  --ce-card-foreground: var(--shell-ink);
  --ce-muted: var(--shell-surface-2);
  --theme-input: var(--shell-surface);
  --theme-shadow-flat: 0 2px 8px #00000008;
  --theme-shadow-float: 0 12px 36px #0000001a;
  --theme-scrim: #10182066;
  --tone-success: #287548;
  --tone-warning: #925711;
  --tone-danger: #b42318;
  --tone-info: #2563eb;
  --tone-yellow: #a98725;
  --tone-green: #36825a;
  --tone-yellow-bg: color-mix(in srgb, var(--tone-yellow) 13%, var(--board-paper));
  --tone-green-bg: color-mix(in srgb, var(--tone-green) 12%, var(--board-paper));
  --tone-warning-bg: color-mix(in srgb, var(--tone-warning) 9%, var(--shell-surface));
  --tone-danger-bg: color-mix(in srgb, var(--tone-danger) 8%, var(--shell-surface));
  --tone-danger-line: color-mix(in srgb, var(--tone-danger) 32%, var(--shell-line));
  --board-marker: color-mix(in srgb, var(--tone-yellow) 26%, transparent);
  --ce-danger-600: var(--tone-danger);
  --ce-success-50: color-mix(in srgb, var(--tone-success) 6%, var(--shell-surface));
  --ce-success-100: color-mix(in srgb, var(--tone-success) 12%, var(--shell-surface));
  --ce-success-200: color-mix(in srgb, var(--tone-success) 20%, var(--shell-surface));
  --ce-success-300: color-mix(in srgb, var(--tone-success) 35%, var(--shell-surface));
  --ce-success-600: #087748;
  --ce-success-700: var(--tone-success);
}
:root:is([data-surface="black"], [data-surface="navy"]) {
  color-scheme: dark;
  --theme-shadow-flat: 0 2px 10px #00000026;
  --theme-shadow-float: 0 16px 44px #00000055;
  --theme-scrim: #00000088;
  --tone-success: #89d2a4;
  --tone-warning: #e8bf7a;
  --tone-danger: #ffaba4;
  --tone-info: #9fbbff;
  --tone-yellow: #e0c566;
  --tone-green: #86c9a4;
}
body { color: var(--shell-ink); background-color: var(--shell-canvas); }
::selection { background: var(--shell-accent-line); color: var(--shell-ink); }

/* Canvas, both rails, navigation, and their selected/hover/focus states. */
.sidebar { background: var(--shell-rail); color: var(--shell-ink); border-color: var(--shell-line); }
.course-rail { background: var(--shell-rail); color: var(--shell-ink); border-color: var(--shell-line); box-shadow: var(--theme-shadow-float); }
.proj-dot { background: var(--shell-ink-3); }
.project-item.active, .canvas-item.active,
.settings-nav-item.active, .sb-item[aria-current="page"] {
  background: var(--shell-accent-soft); border-color: var(--shell-accent-line); color: var(--shell-accent);
}
.project-item.active .proj-dot, .canvas-item.active .proj-dot { background: var(--shell-accent); }
.account-avatar, .account-profile-avatar { background: var(--shell-accent-soft); border-color: var(--shell-accent-line); color: var(--shell-accent); }
.learning-course-toggle, .learning-course-panel { background: var(--board-paper); border-color: var(--shell-line); box-shadow: var(--theme-shadow-flat); }
.learning-course-panel li > button[aria-current], .learning-course-panel li > button:hover {
  background: var(--shell-accent-soft); border-color: var(--shell-accent-line); color: var(--shell-accent);
}
.learner-category h3, .learning-card-marker, .learning-guide-eyebrow, .learning-guide-progress { color: var(--shell-accent); }
.learner-score-meter i { background: var(--shell-line); }
.learner-score-meter i.filled { background: var(--shell-accent); }
.learner-category-filters button, .learner-topic, .learner-preferences, .learner-topic-detail,
.learner-concept + .learner-concept, .learner-concept blockquote { border-color: var(--shell-line); }

/* Inputs, settings, and semantic feedback retain readable native controls. */
.settings-content input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.settings-content select, .learning-field input, .learning-field select,
.library-range input, .library-goal textarea, .jev-field input, .jev-field select {
  background: var(--theme-input); color: var(--shell-ink); border-color: var(--shell-line);
}
:is(input, textarea)::placeholder { color: var(--shell-ink-3); opacity: 1; }
.acct-del:hover, .account-signout-button:hover, .account-delete-button,
.account-message, .library-remove:hover {
  background: var(--tone-danger-bg); border-color: var(--tone-danger-line); color: var(--tone-danger);
}
.account-delete-card { border-color: var(--tone-danger-line); }
.account-delete-button:hover { background: color-mix(in srgb, var(--tone-danger) 14%, var(--shell-surface)); border-color: var(--tone-danger); }
.account-delete-dialog::backdrop, .library-source-dialog::backdrop, .mentor-picker::backdrop { background: var(--theme-scrim); }
.acct-test-status.ok, .cli-provider-status.available { color: var(--tone-success); }
.acct-test-status.err, .cli-provider-status.unavailable, .tutor-error, .mentor-picker-error,
.composer-error, .account-avatar-message[data-kind="error"] { color: var(--tone-danger); }
.diagram-warning, .library-error, .library-warning { color: var(--tone-warning); }

/* Card shells, content, separators, and controls. */
.node:not(.knowledge-expanded):hover, .node.chat.knowledge-compact:hover, .node.chat.knowledge-expanded[data-shell-phase="complete"]:hover { border-color: var(--shell-edge-active); }
.node.chat.knowledge-node { background: var(--board-paper); color: var(--board-ink); border-color: var(--board-line); box-shadow: var(--theme-shadow-flat); }
.node.chat.knowledge-expanded:not([data-shell-phase="complete"]) { border-color: transparent; box-shadow: none; }
.node.chat.knowledge-node.selected:not(.knowledge-expanded), .node.chat.knowledge-expanded.selected[data-shell-phase="complete"] { border-color: var(--shell-accent); box-shadow: 0 0 0 2px var(--shell-accent-soft), var(--theme-shadow-flat); }
.node.chat.knowledge-node.knowledge-morphing { background: var(--board-paper); border-color: var(--board-line); }
.knowledge-summary, .knowledge-source, .tutor-history-heading small, .tutor-history-takeaway,
.tutor-record dt, .tutor-record-mode, .tutor-note-saved, .knowledge-footer .learning-guide-eyebrow { color: var(--board-muted); }
.knowledge-node .chat-branches, .knowledge-parent, .knowledge-node .chat-ask,
.knowledge-footer > .tutor-anchor, .knowledge-node .knowledge-footer .learning-guide,
.knowledge-node .learning-guide, .learning-guide-checklist li,
.knowledge-expanded .board-region-support { border-color: var(--board-line); }
.knowledge-node .chat-ask { background: var(--shell-surface-2); }
.knowledge-node .learning-guide { border-left-color: var(--shell-accent-line); }
.node-status { background: color-mix(in srgb, var(--board-paper) 94%, transparent); color: var(--board-ink); }
.node-fail { background: color-mix(in srgb, var(--tone-danger-bg) 96%, transparent); color: var(--tone-danger); }
.node-fail .fail-ic { color: var(--tone-danger); }
.composer-learning-spinner, .canvas-notes-spinner { border-color: var(--shell-line); border-top-color: var(--shell-accent); border-right-color: var(--shell-accent); }
.composer-learning-loading small { color: var(--shell-ink-3); }
.chat-explore-pop { background: var(--shell-surface); border: 1px solid var(--shell-line); box-shadow: var(--theme-shadow-float); }
.chat-explore-pop .btn { color: var(--shell-ink); }
.chat-explore-pop .btn:hover { background: var(--shell-accent-soft); color: var(--shell-accent); }
.chat-explore-pop .btn + .btn::before { background: var(--shell-line); }
.chat-answer-text mark[data-highlight="yellow"] { background: var(--tone-yellow-bg); color: var(--board-ink); }
.chat-answer-text mark[data-highlight="green"] { background: var(--tone-green-bg); color: var(--board-ink); }
.minimap .mm-node { fill: color-mix(in srgb, var(--shell-ink) 24%, var(--shell-surface)); stroke: var(--shell-ink-3); }
.minimap .mm-node.active { fill: var(--shell-accent-line); stroke: var(--shell-accent); }
.minimap .mm-viewport, .minimap:hover .mm-viewport, .minimap:focus-within .mm-viewport { fill: color-mix(in srgb, var(--shell-accent) 8%, transparent); stroke: var(--shell-accent); }

/* Card notes and annotations keep their yellow/green annotation meanings. */
.card-notes { background: var(--shell-surface-2); color: var(--board-ink); border-color: var(--board-line); }
.card-notes-toggle, .card-note-heading, .card-notes-empty, .card-notes .card-note-remove { color: var(--board-muted); }
.card-notes-toggle:hover, .card-notes-toggle[aria-expanded="true"], .card-note-remove:hover { background: var(--shell-accent-soft); color: var(--shell-accent); }
.card-notes-scroll { scrollbar-color: var(--shell-edge) transparent; }
.card-note { background: var(--board-paper); border-color: var(--board-line); box-shadow: var(--theme-shadow-flat); }
.card-note:focus-within { border-color: var(--shell-accent); box-shadow: 0 0 0 2px var(--shell-accent-soft); }
.card-note-input::placeholder { color: var(--board-muted); }
.card-note-image { background: var(--board-paper); }
.card-note-annotation, .card-note-highlight { background: var(--tone-yellow-bg); border-color: var(--tone-yellow); }
.card-note[data-note-color="green"] { background: var(--tone-green-bg); border-color: var(--tone-green); }
.card-notes-status { color: var(--tone-warning); }
.card-note-link rect { fill: var(--tone-yellow-bg); stroke: var(--tone-yellow); }
.card-note-link path { stroke: var(--tone-yellow); }
.knowledge-card-outline path { stroke: var(--shell-accent-line); }
.node[data-board-style="pencil"] .knowledge-card-outline path { stroke: var(--shell-ink-3); }
.node[data-board-style="marker"] .knowledge-card-outline path { stroke: var(--shell-accent); }

/* Library drawers and right-side course navigation. */
.library-panel, .library-source-dialog { background: var(--board-paper); color: var(--board-ink); border-color: var(--board-line); box-shadow: var(--theme-shadow-float); }
.library-close:hover { background: var(--shell-hover); border-color: var(--shell-line); color: var(--shell-ink); }
.library-drop { background: var(--shell-surface-2); border-color: var(--shell-accent-line); }
.library-drop:hover, .library-drop:focus-visible, .library-drop.dragover { background: var(--shell-accent-soft); border-color: var(--shell-accent); }
.library-item { background: var(--shell-surface); border-color: var(--shell-line); }
.library-item.is-selected { background: var(--shell-accent-soft); border-color: var(--shell-accent-line); }
.library-kind { background: var(--shell-accent-soft); color: var(--shell-accent); }
.library-remove { color: var(--shell-ink-3); }
body:has(.library-panel:not([hidden])) .sb-item#sb-library { background: var(--shell-accent-soft); color: var(--shell-accent); }
.library-preview { border-color: var(--shell-accent-line); }
.library-primary:focus-visible, .chat-source:focus-visible { outline-color: var(--shell-accent); }

/* Readable notes, including their toolbar, download menu, and all content blocks. */
.canvas-notes-view { background: var(--shell-canvas); color: var(--board-ink); }
.canvas-notes-toolbar { background: color-mix(in srgb, var(--shell-surface) 95%, transparent); border-color: var(--shell-line); }
.canvas-notes-toolbar button:hover { background: var(--shell-accent-soft); border-color: var(--shell-accent-line); color: var(--shell-accent); }
.canvas-notes-toolbar .notes-download-trigger { background: var(--shell-accent-soft); border-color: var(--shell-accent-line); color: var(--shell-accent); }
.canvas-notes-toolbar .notes-download-trigger:hover { background: var(--shell-accent-line); border-color: var(--shell-accent); }
.notes-export-menu { background: var(--shell-surface); border-color: var(--shell-line); box-shadow: var(--theme-shadow-float); }
.canvas-notes-toolbar .notes-export-menu button:hover { background: var(--shell-accent-soft); color: var(--shell-accent); }
.canvas-notes-loading > button { background: var(--shell-surface); border-color: var(--shell-accent-line); }
.canvas-notes-page, body > main { background: var(--board-paper); color: var(--board-ink); border-color: var(--board-line); }
.canvas-notes-page { box-shadow: var(--theme-shadow-flat); }
.notes-meta span, .notes-chapter, .notes-figure, .notes-media-pending { border-color: var(--board-line); }
.notes-overview { background: var(--shell-accent-soft); border-color: var(--shell-accent-line); }
/* Separate the edge override so CSSOM preserves the variable shorthand in exports. */
.notes-overview { border-left-color: var(--shell-accent); }
.notes-kicker, .notes-overview-label, .notes-core-label { color: var(--shell-accent); }
.notes-lede, .notes-question, .notes-meta span, .notes-figure figcaption, .notes-image-unavailable { color: var(--board-muted); }
.notes-core { background: var(--shell-surface-2); color: var(--board-ink); }
.notes-aside, .notes-saved-note { background: var(--shell-surface-2); border-color: var(--shell-accent-line); color: var(--board-muted); }
.notes-aside strong, .notes-saved-note strong { color: var(--shell-accent); }
.notes-highlight { background: var(--tone-yellow-bg); border-color: var(--tone-yellow); color: var(--board-ink); }
.notes-highlight[data-color="green"] { background: var(--tone-green-bg); border-color: var(--tone-green); color: var(--board-ink); }
.notes-figure { background: var(--board-paper); }
.notes-figure img, .notes-image-unavailable { background: var(--shell-surface-2); border-color: var(--board-line); }
.notes-generated-status { background: var(--tone-warning-bg); color: var(--tone-warning); }

/* Native Markdown, tables and diagrams share the paper/ink palette. Media pixels stay intact. */
:is(.knowledge-node, .canvas-notes-view, .canvas-notes-article, .export-card-content) .md :is(pre, code) {
  background: var(--shell-surface-2); color: var(--board-ink); border-color: var(--board-line);
}
:is(.knowledge-node, .canvas-notes-view, .canvas-notes-article, .export-card-content) .md pre code { background: transparent; color: inherit; }
:is(.knowledge-node, .canvas-notes-view, .canvas-notes-article, .export-card-content) .md blockquote { background: var(--shell-surface-2); color: var(--board-muted); border-color: var(--shell-accent-line); }
:is(.knowledge-node, .canvas-notes-view, .canvas-notes-article, .export-card-content) :is(th, td) { color: var(--board-ink); border-color: var(--board-line); }
:is(.knowledge-node, .canvas-notes-view, .canvas-notes-article, .export-card-content) th { background: var(--shell-surface-2); }
:is(.knowledge-node, .canvas-notes-view, .canvas-notes-article, .export-card-content) td { background: var(--board-paper); }
.board-visual-item span { color: var(--board-muted); }
.board-uml path, .board-sketch path, .board-outline path, .board-connector path { stroke: var(--shell-accent); }
.board-uml text, .board-sketch text, .board-model-drawing text { fill: var(--board-ink); }
.board-uml .uml-stereotype { fill: var(--board-muted); }
.board-uml .uml-lifeline { stroke: var(--shell-edge); }
.board-uml .uml-edge-label { fill: var(--board-ink); stroke: var(--board-paper); }
.board-uml path[data-uml-fill="paper"] { fill: var(--board-paper); }
.board-uml path[data-uml-fill="ink"] { fill: var(--shell-ink-2); }
.board-uml-type, .board-region-support, .board-region-support > *, .board-region-support > .board-support-pair > * { border-color: var(--board-line); }
.diagram-entity { background: var(--board-paper); color: var(--board-ink); border-color: var(--board-line); }

/* Portable HTML/PNG exports consume this same layer and frozen theme tokens. */
.export-heading > p, .export-muted, .export-outline small, .export-map-node > span,
.export-map-node small, .export-card > summary span, .export-image-heading p,
.export-image-heading li, .export-image-card-title span { color: var(--board-muted); }
.export-card, .export-image-card.export-card { background: var(--board-paper); color: var(--board-ink); border-color: var(--board-line); }
.export-map-viewport, .export-image-root {
  color: var(--board-ink); border-color: var(--shell-line);
  background: radial-gradient(var(--shell-dot) .8px, transparent .8px) 0 0 / 20px 20px var(--shell-canvas);
}
.export-image-heading { background: var(--shell-canvas); }
.export-map-node { color: var(--board-ink); }
.export-map-toolbar button, .export-cards-head button { background: var(--shell-surface); color: var(--shell-accent); border-color: var(--shell-accent-line); }
.export-map-toolbar button:hover, .export-cards-head button:hover { background: var(--shell-accent-soft); }
.export-outline, .export-model, .export-card-content .export-dialogue { border-color: var(--board-line); }
.export-outline li button, .export-model figcaption { color: var(--shell-accent); }
.canvas-notes-article a, .export-outline a { color: var(--shell-accent); }
.export-image-links path { stroke: var(--shell-edge-active); }
.export-map-viewport svg > path, .diagram-links { stroke: var(--shell-edge-active); }
#export-map a rect { fill: var(--board-paper); stroke: var(--shell-edge); }
#export-map a:hover rect, #export-map a:focus rect { stroke: var(--shell-accent); }
.diagram-links marker path { fill: var(--shell-edge-active); }
.diagram-edge-label { fill: var(--board-muted); }
.board-model-guide { stroke: var(--board-line); }
.board-model-line { stroke: var(--shell-accent); }
.board-model-linear { stroke: var(--tone-yellow); }
.board-model-point { fill: var(--shell-accent); }
.board-model-sun { fill: var(--tone-yellow); stroke: var(--tone-yellow); }
.board-model-load { fill: var(--shell-accent-soft); }
.board-model-label-alt { fill: var(--tone-yellow) !important; }
@media print {
  body, body > main { background: var(--board-paper); color: var(--board-ink); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}