/* The page scrollbar follows the same graphite and teal surfaces as the UI. */
:root {
  color-scheme: dark;
  --page-scroll-track: #0b1219;
  --page-scroll-thumb: #355960;
  --page-scroll-hover: #548d91;
  --page-scroll-active: #79d8ce;
}
html {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--page-scroll-thumb) var(--page-scroll-track);
}
/* Chromium/WebKit allow a rounded thumb with a comfortable drag target. */
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-width: auto; scrollbar-color: auto; }
  html::-webkit-scrollbar { width: 12px; height: 12px; }
  html::-webkit-scrollbar-track,
  html::-webkit-scrollbar-corner { background: var(--page-scroll-track); }
  html::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 3px solid var(--page-scroll-track);
    border-radius: 999px;
    background: var(--page-scroll-thumb);
    background-clip: padding-box;
  }
  html::-webkit-scrollbar-thumb:hover { background-color: var(--page-scroll-hover); }
  html::-webkit-scrollbar-thumb:active { background-color: var(--page-scroll-active); }
  html::-webkit-scrollbar-button { display: none; }
}
@media (forced-colors: active) {
  :root, html:root[data-theme] {
    --page-scroll-track: Canvas;
    --page-scroll-thumb: ButtonText;
    --page-scroll-hover: Highlight;
    --page-scroll-active: Highlight;
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle:hover { border-color: var(--cyan); }
.theme-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Carbon-inspired neutral surfaces: soft grey canvas, quiet layers, graphite ink. */
:root[data-theme="light"] {
  color-scheme: light;
  --page-scroll-track: #e8e9eb;
  --page-scroll-thumb: #9aafae;
  --page-scroll-hover: #658d89;
  --page-scroll-active: #24766f;
  color: #26292d;
  background: #e8e9eb;
  --muted: #62686f;
  --cyan: #24766f;
  --line: #cdd0d4;
  --expanded-accent: #24766f;
}
html[data-theme="light"] .ambient { background: none; }
html[data-theme="light"] :is(.intro, .batch-panel, .nest-panel) {
  background: linear-gradient(115deg, #e1e6e5, #e6e7ea);
  box-shadow: inset 0 1px 0 #f8f9fa;
  border-color: #c9ced1;
}
html[data-theme="light"] .intro::before,
html[data-theme="light"] .intro::after { background: none; }
html[data-theme="light"] :is(.panel, .batch-card, .body-card, .body-browser, .trace-placeholder) {
  background: #f2f3f4;
  color: #26292d;
  border-color: var(--line);
  box-shadow: none;
}
html[data-theme="light"] :is(.panel-top, .cost-panel .panel-top, .processing-status, .body-toolbar) {
  background: #e3e6e8;
  border-color: #cbd0d4;
  color: #444b53;
}
html[data-theme="light"] :is(.stage-studio, .stage-expansion, .header-end, .eyebrow,
  .intro .eyebrow, .intro p, .drop-compact small, .index, .empty p, .empty small,
  .metrics span, .metrics small, .view-footer, .flat-footer, .compact small,
  .constraint, .constraint small, .variant-status, .phase-timings, .process-elapsed,
  .cost-hero p, .cost-hero > div > span, .cost-selectors label, .cost-input-grid label,
  .cost-panel dt, .cost-section h3 span, .cost-note, .cost-sources, .cost-cutout-list,
  .trace-placeholder p, .trace-placeholder small, .batch-tray-caption, .batch-tray-status,
  .batch-hint, .cpu-summary, .batch-note, .batch-file small, .batch-card small,
  .batch-settings > label:not(.batch-switch), .nest-panel label,
  .nest-panel small, .expanded-hint) { color: #62686f; }
html[data-theme="light"] :is(.empty h2, .source-title h2, .metrics strong,
  .cost-section h3, .cost-panel dd, .cost-cutout-list strong, .batch-tray-summary,
  .batch-switch, .trace-placeholder strong, .processing-status #status) { color: #30363c; }
html[data-theme="light"] :is(.demo-badge, .manufacturing-signature, .batch-tray-icon) {
  color: #326b60;
  background: #d7e5e0;
  border-color: #b2c9c1;
  box-shadow: none;
}
html[data-theme="light"] .manufacturing-signature .live-dot {
  background: #40806a;
  box-shadow: none;
}
html[data-theme="light"] :is(.drop-compact, .drop-link, .overlay-controls label,
  .radius-value button, .variant-inputs > button, .batch-panel button,
  .nest-panel button, .viewport-expand, .expanded-tool, .body-browser-nav button) {
  color: #344c50;
  background: #e4e8e9;
  border-color: #bdc7cb;
  box-shadow: none;
}
html[data-theme="light"] :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  color: #30363c;
  background-color: #f4f5f6;
  border-color: #bac1c7;
}
html[data-theme="light"] :is(input, select) { accent-color: #24766f; }
html[data-theme="light"] :is(.pill, .variant-anchor span, .body-card[aria-pressed="true"]) {
  background: #dde5e5;
  color: #345c5b;
  border-color: #adc2c0;
}
html[data-theme="light"] :is(.orb, .line-glyph) { color: #648c8a; }
html[data-theme="light"] .orb {
  background: radial-gradient(circle, #d9e4e3, transparent 70%);
  border-color: #c8d5d5;
  box-shadow: 0 0 70px #729c9514;
}
html[data-theme="light"] .orb::after { border-color: #c8d5d5; }
html[data-theme="light"] :is(.progress-track, .processing-status .progress-track) { background: #cbd5d8; }
html[data-theme="light"] :is(.error, .body-card-error) { color: #a33a32; }
html[data-theme="light"] .processing-status.is-error { border-color: #b26459; }
html[data-theme="light"] .lilac { color: #74559a; }
html[data-theme="light"] :is(.tag, .export, .batch-actions a, .cost-sources a) { color: #24766f; }
html[data-theme="light"] .cost-panel { scrollbar-color: #a6afb6 #e3e6e8; }
/* The server injects version styles after this sheet. Specificity keeps them themed. */
html[data-theme="light"] .stage-versions { background: #e0e3e6; color: #59636c; border-color: #bdc5ca; }
html[data-theme="light"] .stage-versions a { color: #59636c; }
html[data-theme="light"] .stage-versions a[aria-current="page"] { background: #c8dedb; color: #285e59; }

/* Keep the appearance control available when the signature is hidden on mobile. */
@media (max-width: 850px) {
  header:has(.stage-brand) .header-end { display: flex; }
  .header-end .manufacturing-signature { display: none; }
  .theme-toggle { padding: 8px; }
  .theme-toggle span { display: none; }
}

html[data-theme="light"] :is(.nest-empty, .nest-count, .nest-status, .nest-sheet p,
  .nest-metrics span, .nest-motion small, .nest-result-footer label,
  .expanded-heading p, .expanded-footer, .expanded-shortcuts) { color: #62686f; }
html[data-theme="light"] :is(.nest-empty strong, .process-facts dd, .expanded-heading h2) { color: #30363c; }
html[data-theme="light"] .nest-run { background: #d0e1dd !important; color: #285e59; }
html[data-theme="light"] .nest-stage { background: radial-gradient(ellipse, #dce5e4, transparent 70%); }
html[data-theme="light"] :is(.nest-error, .nest-notice) { background: #efe1d6; color: #874626; }
html[data-theme="light"] .expanded-viewport { color: #30363c; --expanded-accent: #24766f; }
html[data-theme="light"] .expanded-shell { background: #e8ecee; border-color: #b9c5cb; box-shadow: 0 25px 90px #30394033; }
html[data-theme="light"] .expanded-heading { background: #dfe5e7; }
html[data-theme="light"] .expanded-viewport::backdrop { background: #929ba688; }
html[data-theme="light"] .stage-versions a:hover { color: #263b3d; }
html[data-theme="light"] .processing-status { box-shadow: 0 2px 8px #3039400a; }
html[data-theme="light"] :is(.cost-panel summary, .nest-controls label, .nest-motion span) { color: #526068; }
html[data-theme="light"] .cost-panel details { border-color: #cbd0d4; }