/* Load after panels.css. Fieldnotes deliberately has no rules here.
 * Vercel-informed restraint, not a replica: neutral surfaces, Geist type,
 * modest headings and structural borders. Fonts are bundled by the parent.
 * SVG !important declarations beat Mermaid's generated ID-scoped styles
 * and inline presentation styles; no inversion filters are used.
 */
:root[data-theme='vercel-dark'] {
  color-scheme: dark;
  --bg: #000;
  --panel: #000;
  --raised: #171717;
  --line: #333;
  --text: #fafafa;
  --muted: #a1a1a1;
  --faint: #a1a1a1;
  --accent: #fafafa;
  --green: #fafafa;
  --mint: #fafafa;
  --theme-hover: #171717;
  --theme-border-strong: #a1a1a1;
  --theme-inverse: #000;
  --theme-diagram-surface: #000;
  --theme-diagram-node: #171717;
  --theme-diagram-line: #a1a1a1;
  --theme-backdrop: rgb(0 0 0 / 75%);
  --theme-sans: "Avenir Next", "Segoe UI", sans-serif;
  --theme-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-family: var(--theme-sans);
}

:root[data-theme='vercel-light'] {
  color-scheme: light;
  --bg: #fafafa;
  --panel: #fff;
  --raised: #f0f0f0;
  --line: #dedede;
  --text: #000;
  --muted: #666;
  --faint: #666;
  --accent: #000;
  --green: #000;
  --mint: #000;
  --theme-hover: #f0f0f0;
  --theme-border-strong: #666;
  --theme-inverse: #fafafa;
  --theme-diagram-surface: #fff;
  --theme-diagram-node: #fafafa;
  --theme-diagram-line: #666;
  --theme-backdrop: rgb(0 0 0 / 40%);
  --theme-sans: "Avenir Next", "Segoe UI", sans-serif;
  --theme-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-family: var(--theme-sans);
}

/* Shared scope never matches the default or explicit Fieldnotes theme. */
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--theme-sans);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  pre, code, kbd, samp, .article code, .code-block pre code, .file-view pre,
  .file-view pre *, .code-block pre *, .code-header
) {
  font-family: var(--theme-mono);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) ::selection {
  background: var(--text);
  color: var(--theme-inverse);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  h1, h2, h3, h4, h5, h6, .reader-title, .file-title
) {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -.025em;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .hero h1, .reader-title, .lesson-header .reader-title
) {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .article {
  font-family: var(--theme-sans);
  color: var(--text);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .article > p, .article > ul, .article > ol, .article > blockquote
) {
  max-width: 78ch;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .studio-intro h2, .visual-heading h2
) {
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 600;
}

/* Chrome, overlays, menus and reading surfaces. */
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .topbar, .sidebar, .layout, .reading, .library, .file-view
) {
  background: var(--bg);
  color: var(--text);
  border-color: var(--line);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  dialog, .search-dialog, .chapters-dialog, .diagram-dialog, .term-card,
  [popover], [role='menu'], [role='listbox'], .drawer, .menu, .popover,
  .resources-panel, .toc-mobile, .chapter-card, .learning-path,
  .learning-studio, .visual-atlas, .step-explanation, .dictionary-entry,
  .map-branch, .map-root, .flow-node, .recall-card details,
  .recall-list details, .visual-walkthrough li, .table-wrap, .diagram
) {
  background: var(--panel);
  background-image: none;
  color: var(--text);
  border-color: var(--line);
  border-radius: 6px;
  box-shadow: none;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) dialog::backdrop {
  background: var(--theme-backdrop);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .brand, .brand-mark, .chapter-card h3, .flow-node strong,
  .flow-node.is-current strong, .map-root, .dictionary-entry h4,
  .visual-walkthrough h4, .visual-tabs strong, .search-result strong,
  .article td:first-child
) {
  color: var(--text);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .brand-mark {
  background: var(--raised);
  border-color: var(--line);
  border-radius: 6px;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .brand-divider, .brand-sub, .edition, .sidebar-label, .sidebar-footer,
  .sidebar-footer small, .chapter-number, .nav-count, .breadcrumb,
  .breadcrumb .slash, .eyebrow, .hero p, .metric span, .number,
  .card-top .number, .chapter-card p, .card-bottom, .card-bottom .arrow,
  .library-footer, .reader-deck, .lesson-header .reader-deck,
  .reader-meta, .lesson-header .reader-meta, .toc-label, .toc a,
  .chapter-pagination small, .search-heading, .search-result p,
  .search-foot, .result-count, .resource-size, .file-pagination,
  .loading, .empty, .diagram-toolbar, .zoom-label, .diagram-source,
  .diagram-loading, .diagram-error, .expanded-heading,
  .hero-diagram .diagram-caption, .studio-intro p, .studio-badge,
  .studio-kicker, .studio-note, .flow-header, .step-count,
  .step-number small, .step-explanation p, .decision-note .studio-kicker,
  .recall-card p, .map-intro p, .map-root small, .map-branch small,
  .map-source p, .dictionary-label, .dictionary-entry p,
  .learning-path p, .learning-path nav a span, .term-card p,
  .term-analogy > span, .visual-heading p, .visual-count,
  .visual-tabs button > span, .visual-description > p, .visual-tools,
  .visual-walkthrough li, .visual-pitfall .studio-kicker, .visual-pitfall p
) {
  color: var(--muted);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .studio-kicker, .eyebrow, .edition, .sidebar-label, .toc-label,
  .flow-header, .reader-meta, .breadcrumb, .visual-count,
  .visual-tabs button > span, .term-analogy > span
) {
  text-transform: none;
  letter-spacing: 0;
}

/* Borders on ancestors are intentional: child token overrides cannot fix them. */
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .metrics, .card-bottom, .library-footer, .lesson-header, .article h2,
  .article hr, .toc, .chapter-pagination, .search-heading, #search-results,
  .search-result, .search-foot, .result-count, .resource-list li,
  .studio-tabs, .studio-tabs button, .studio-note, .recall-card,
  .decision-note, .map-branches, .map-source, .term-analogy,
  .visual-tabs, .visual-tabs button, .visual-references,
  .diagram-toolbar, .diagram-source, .expanded-heading,
  .code-header, .article th, .article td, .drawer-resources,
  .article .lesson-evidence
) {
  border-color: var(--line);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .article blockquote, .source-notice, .visual-pitfall, .studio-note,
  .article .lesson-evidence, .lesson-evidence blockquote
) {
  background: transparent;
  color: var(--muted);
  border-color: var(--theme-border-strong);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .article a, .lesson-evidence > summary, .resources-panel summary,
  .toc-mobile summary, .toc a.active, .chapter-pagination a,
  .result-section, .drawer-home, .drawer-resources, .recall-card summary,
  .map-source a, .visual-references > summary, .visual-references a,
  .step-number, .map-progress, .dictionary-count, .studio-badge > span
) {
  color: var(--text);
  text-decoration-color: var(--theme-border-strong);
}

/* Neutral controls. Strong borders make inputs and buttons identifiable even
 * when the surface divider itself is deliberately understated. */
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  input:not([type='checkbox']):not([type='radio']), select, textarea,
  #theme-select, .search-dialog input, .resource-filter, .library-filter,
  .file-pagination select
) {
  background: var(--panel);
  color: var(--text);
  border-color: var(--theme-border-strong);
  border-radius: 6px;
  font-family: var(--theme-sans);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(option, optgroup) {
  background: var(--panel);
  color: var(--text);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  input[type='checkbox'], input[type='radio'], .map-branch input
) {
  accent-color: var(--text);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .search-trigger, .chapters-trigger, .small-button, .icon-button,
  .panel-toggle, .back-to-top, .filter, .learn-term, .flow-play,
  .visual-motion, .diagram-actions button, .lesson-shortcuts .small-button,
  .learning-path nav a, .map-source a, .drawer-home
) {
  background: var(--panel);
  color: var(--text);
  border-color: var(--theme-border-strong);
  border-radius: 6px;
  box-shadow: none;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .tag, .file-badge, kbd, .card-icon, .chapter-card[data-category] .card-icon
) {
  background: var(--raised);
  color: var(--muted);
  border-color: var(--line);
  border-radius: 6px;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .nav-home, .studio-tabs, .studio-tabs button, .visual-tabs,
  .visual-tabs button, .flow-index
) {
  background: var(--panel);
  color: var(--text);
  border-color: var(--theme-border-strong);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .chapter-link:hover, .nav-home:hover, .search-result:hover,
  .search-trigger:hover, .chapters-trigger:hover, .filter:hover,
  .small-button:hover, .lesson-shortcuts button:hover, .icon-button:hover,
  .panel-toggle:hover, .back-to-top:hover, .learn-term:hover,
  .diagram-actions button:hover, .learning-path nav a:hover,
  .map-source a:hover, .visual-tabs button:hover, .studio-tabs button:hover,
  [role='menuitem']:hover, [role='option']:hover,
  .filter:active, .small-button:active, .flow-node:active
) {
  background: var(--theme-hover);
  color: var(--text);
  border-color: var(--theme-border-strong);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .chapter-card:hover {
  border-color: var(--theme-border-strong);
  transform: none;
  box-shadow: none;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .filter[aria-pressed='true'], button[aria-pressed='true'],
  .studio-tabs button[aria-selected='true'],
  .visual-tabs button[aria-selected='true'], .flow-node.is-current,
  .map-branch.is-known, .panel-toggle[aria-pressed='true'],
  .panel-toggle[aria-expanded='true'], [role='option'][aria-selected='true']
) {
  background: var(--raised);
  color: var(--text);
  border-color: var(--theme-border-strong);
  box-shadow: inset 0 -2px var(--text);
  transform: none;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .chapter-link.active {
  background: var(--raised);
  color: var(--text);
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--accent);
  transform: none;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .chapter-link.active .chapter-number, #mobile-chapter-nav .chapter-number,
  .visual-tabs button[aria-selected='true'] > span,
  .flow-node.is-past .flow-index
) {
  color: var(--text);
  border-color: var(--theme-border-strong);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .primary-button, .skip-link, #toast, .flow-node.is-current .flow-index,
  .search-result mark, mark
) {
  background: var(--text);
  color: var(--theme-inverse);
  border-color: var(--text);
  border-radius: 6px;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .read-complete {
  color: var(--text) !important;
  border-color: var(--theme-border-strong) !important;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .inline-term, .inline-term:hover, .inline-term:focus-visible
) {
  color: var(--text);
  background: transparent;
  border-color: var(--theme-border-strong);
  border-radius: 0;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .inline-term:hover, .inline-term:focus-visible
) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .eyebrow::before,
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .flow-track::before,
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .map-root::after,
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .status-dot, .flow-dot, .is-current .flow-dot, .map-line
) {
  background: var(--theme-diagram-line);
  animation: none;
  filter: none;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .resize-handle {
  background: var(--bg);
  color: var(--muted);
  border-color: var(--line);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .resize-handle:hover, .resize-handle:focus-visible, .resize-handle.is-resizing
) {
  background: var(--raised);
  border-color: var(--theme-border-strong);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .resize-handle::before,
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .resize-handle::after {
  background: var(--theme-border-strong);
  border-color: var(--theme-border-strong);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .lesson-shortcuts button, .article > *, .learning-studio, .visual-atlas
):focus-visible {
  outline-color: var(--text);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .visual-walkthrough li::before {
  color: var(--muted);
  font-family: var(--theme-sans);
}

/* Source code and tables share the same neutral palette as the reader. */
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .code-block, .file-view pre, pre, .article code
) {
  background: var(--raised);
  color: var(--text);
  border-color: var(--line);
  border-radius: 6px;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  .code-block pre, .code-block pre code, pre code, pre code span
) {
  background: transparent;
  color: var(--text);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .code-header {
  background: var(--panel);
  color: var(--muted);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(
  table, .article table, td, .article td
) {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(th, .article th) {
  background: var(--raised);
  color: var(--text);
  font-weight: 600;
  border-color: var(--line);
}

/* Mermaid and the hand-authored hero diagram. Override generated styles,
 * including cached SVGs and copies inserted into the expanded dialog.
 * Shape and line rules are separate to preserve open paths and arrow geometry.
 */
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .hero-diagram {
  background-image: none;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(.diagram-stage, .hero-diagram) svg {
  background: var(--theme-diagram-surface) !important;
  color: var(--text) !important;
  font-family: var(--theme-sans) !important;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(.diagram-stage, .hero-diagram) svg :is(
  text, tspan, .label, .nodeLabel, .edgeLabel, .cluster-label,
  .messageText, .noteText, .loopText, .labelText, .actor text,
  .stateTitle, .state-title, .stateLabel, .titleText,
  .taskText, .taskTextOutsideLeft, .taskTextOutsideRight,
  .sectionTitle, .legend, .er.entityLabel, foreignObject, foreignObject *
) {
  fill: var(--text) !important;
  color: var(--text) !important;
  stroke: none !important;
  font-family: var(--theme-sans) !important;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(.diagram-stage, .hero-diagram) svg :is(
  rect, polygon, circle, ellipse, .node rect, .node polygon, .node circle,
  .node ellipse, .node path, .cluster rect, .actor, .actor-top, .actor-bottom,
  .note, .labelBox, .activation0, .activation1, .activation2,
  .statediagram-state rect, .stateGroup rect, .state-start, .state-end,
  .state-start circle, .state-end circle, .fork-join,
  .er.entityBox, .er.attributeBoxEven, .er.attributeBoxOdd,
  .task, .task0, .task1, .task2, .task3, .section, .section0, .section1,
  .section2, .section3, .rect
) {
  fill: var(--theme-diagram-node) !important;
  stroke: var(--theme-diagram-line) !important;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(.diagram-stage, .hero-diagram) svg :is(
  .cluster rect, .edgeLabel rect, .label-container, .labelBkg,
  .edgeLabel .label, .edgeLabel, .edgeLabel foreignObject,
  .edgeLabel foreignObject *, .edgeLabel p, .edgeLabel span
) {
  background: var(--theme-diagram-surface) !important;
  fill: var(--theme-diagram-surface) !important;
  color: var(--text) !important;
}

/* Restore label glyph fills after the edge-label background override. */
:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(.diagram-stage, .hero-diagram) svg .edgeLabel :is(text, tspan) {
  fill: var(--text) !important;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(.diagram-stage, .hero-diagram) svg :is(
  path, line, polyline, .flowchart-link, .edgePath path, .transition,
  .messageLine0, .messageLine1, .actor-line, .loopLine, .divider,
  .relationshipLine, .er.relationshipLine, .grid .tick line,
  .tick line, .domain, .section-line
) {
  stroke: var(--theme-diagram-line) !important;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(.diagram-stage, .hero-diagram) svg :is(
  .flowchart-link, .edgePath path, .transition, .messageLine0, .messageLine1,
  .actor-line, .loopLine, .relationshipLine, .er.relationshipLine, .domain
) {
  fill: none !important;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(.diagram-stage, .hero-diagram) svg :is(
  marker path, marker polygon, marker circle, .arrowheadPath,
  .arrowMarkerPath, .marker, .state-start, .state-end circle,
  .fork-join, .sequenceNumber, .sequenceNumber rect
) {
  fill: var(--theme-diagram-line) !important;
  stroke: var(--theme-diagram-line) !important;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) :is(.diagram-stage, .hero-diagram) svg text.sequenceNumber {
  fill: var(--theme-inverse) !important;
  stroke: none !important;
}

:root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .hero-diagram svg > circle {
  animation: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  :root:is([data-theme='vercel-dark'], [data-theme='vercel-light']) .visual-atlas.is-animated svg * {
    animation: none !important;
  }
}