/* Load after styles.css; preserve the existing view layouts and hidden states. */
:root {
  color-scheme: only light;
  --paper: #fff;
  --paper-2: #fff;
  --ink: #111;
  --muted: #222;
  --line: #d6d6d6;
  --accent: #111;
  --accent-2: #222;
  --accent-soft: #eee;
  --warn: #111;
  --good: #111;
  --shadow: none;
}

:root,
.formula-workbench,
body.formula-only .formula-workbench {
  --wb-bg: #fff;
  --wb-panel: #fff;
  --wb-panel-2: #fff;
  --wb-line: #d6d6d6;
  --wb-text: #111;
  --wb-muted: #222;
  --wb-blue: #245c85;
  --wb-orange: #9a5324;
  --wb-green: #26734d;
  --wb-pink: #a33d78;
}

/* HTML text is neutral; SVG geometry and external paper images keep their colors. */
body,
body *:not(svg, svg *) {
  color: #111 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body .formula-workbench :is(
  .workbench-kicker, .module-index, .workbench-notice, .warning-note, .taylor-note
),
body.formula-only .formula-workbench :is(.warning-note, .taylor-note),
body .evidence-note {
  color: #111 !important;
}

html,
body,
body :is(
  .topbar, .layout-shell, .paper-main, .reading-view, .formula-view,
  .toc-panel, .context-panel, .hero-card, .search-card, .paper-section,
  .interactive-zone, .paper-view, .toc-note, .hero-meta span, .pill,
  .en-text, .en-list li, .figure-card, .equation-card, .table-card,
  .figure-card header, .equation-card header, .table-card header,
  .math-display, .metric-table th, .metric-table td, .table-controls,
  .module, .viz-box, .flow-node, .formula-note, .side-card,
  .side-empty, .side-note, .paper-controls, .paper-page,
  .detail-dialog, .kv, .display-math-line, .formula-workbench,
  .kinetics-hero, .factor-card, .flow-strip, .flow-step,
  .lab-plot-panel, .parameter-panel, .workbench-plot, .plot,
  .formula-substitution, .metric-grid article, .workbench-notice,
  .definition-grid span, .workbench-badge, .live-dot,
  .explanation-panel, .explanation-card, .conclusion-block, .speech-block,
  .results-block, .paragraph-count, .atlas-head, .atlas-group,
  .atlas-control, .atlas-summary-grid article, .atlas-badge-grid div,
  .atlas-interval-grid div, .atlas-card, .atlas-card-formula,
  .atlas-card-viz, .atlas-distance-card, .atlas-svg,
  .progress-wrap, .explanation-progress, .result-metric i,
  button, input, select, textarea, option, optgroup, .seg,
  .term-link, .eq-link, .fig-link, .ref-link, .evidence-chip,
  .atlas-card-actions a
) {
  background: #fff !important;
  border-color: #d6d6d6 !important;
}

body :is(
  .toc-panel, .context-panel, .hero-card, .search-card, .paper-section,
  .interactive-zone, .paper-view, .toc-note, .figure-card,
  .equation-card, .table-card, .module, .viz-box, .flow-node,
  .formula-note, .side-card, .side-empty, .side-note,
  .paper-controls, .paper-page, .detail-dialog, .kv, .display-math-line,
  .formula-workbench, .kinetics-hero, .factor-card, .flow-strip,
  .flow-step, .lab-plot-panel, .parameter-panel, .workbench-plot,
  .formula-substitution, .metric-grid article, .workbench-notice,
  .explanation-nav-item, .explanation-card, .conclusion-block,
  .speech-block, .results-block, .atlas-head, .atlas-group,
  .atlas-control, .atlas-summary-grid article, .atlas-badge-grid div,
  .atlas-interval-grid div, .atlas-card, .atlas-distance-card
) {
  border-radius: 8px !important;
}

body :is(
  button, .seg, input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select, textarea, .term-link, .eq-link, .fig-link, .ref-link,
  .atlas-card-actions a, .toc-item
) {
  border-radius: 6px !important;
}

body :is(.en-text, .en-list li) {
  border-radius: 0 8px 8px 0 !important;
}

body :is(
  .sentence-card, .section-heading, .workbench-head, .explanation-header,
  .explanation-block, .plain-block, .technical-block, .formula-atlas,
  .atlas-card header, .paper-page figcaption, .side-figure-img
) {
  border-color: #d6d6d6 !important;
}

.topbar,
.paper-controls {
  backdrop-filter: none;
}

.detail-dialog::backdrop {
  background: #fff;
  backdrop-filter: none;
}

/* Keep the existing headerless formula modes, including at mobile breakpoints. */
.formula-mode .topbar,
body.formula-only .topbar {
  display: none !important;
}

body :is(
  button:not(:disabled):hover, .seg:hover, .toc-item:hover,
  .term-link:hover, .eq-link:hover, .fig-link:hover, .ref-link:hover,
  .evidence-chip:not(.static):hover, .atlas-card-actions a:hover
) {
  background: #f3f3f3 !important;
  border-color: #999 !important;
}

body :is(
  .seg.active, .tab.active, .preset-button.active, .toc-item.active,
  .explanation-nav-item.active, .primary-control,
  button[aria-pressed="true"], [role="tab"][aria-selected="true"],
  .best, .references-list li:target
) {
  background: #eee !important;
  border-color: #999 !important;
  outline: 1px solid #999;
  outline-offset: -1px;
}

body :is(.sentence-card.search-match, mark) {
  background: #eee !important;
}

body :is(
  button, input, select, textarea, a, summary, .sentence-card
):focus-visible {
  outline: 2px solid #555;
  outline-offset: 2px;
}

body :is(
  .focused, .anchor-target, .row-highlight, .paper-section:target,
  .equation-card:target, .figure-card:target, .glossary-term-card:target
) {
  outline: 2px solid #888;
  outline-offset: -2px;
}

.anchor-target {
  animation: none;
}

::selection {
  background: #ddd;
  color: #111;
}

body :is(input, textarea)::placeholder {
  color: #333;
  opacity: 1;
}

body :is(button, input, select, textarea):disabled {
  color: #333 !important;
  opacity: 1;
  cursor: not-allowed;
  border-style: dashed;
}

body :is(input, select, textarea) {
  color-scheme: only light;
  accent-color: #666 !important;
}

/* Data marks stay colored; neither progress bars nor charts use gradients. */
body :is(.progress-bar, .explanation-progress > div, .result-metric i b) {
  background: #555 !important;
}

body .mini-bars span {
  background: var(--wb-blue) !important;
}

.legend-line {
  background: var(--wb-blue);
}

.legend-line.uptake {
  background: var(--wb-orange);
}

.legend-line.washout {
  background: var(--wb-green);
}

.legend-line.turn {
  background: var(--wb-pink);
}

/* Limit SVG overrides to teaching charts; do not filter or recolor paper assets. */
body :is(.formula-workbench, .interactive-zone) svg :is(text, tspan),
body :is(.workbench-plot, .plot, .atlas-svg) :is(text, tspan) {
  color: #111 !important;
  fill: #111 !important;
  stroke: #fff;
  stroke-width: 2px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

body .katex,
body .katex svg {
  color: #111 !important;
}

body .workbench-plot .plot-grid line,
body :is(.workbench-plot, .plot, .atlas-svg) :is(
  [stroke="#31363a" i], [stroke="#b8c7d1" i], [stroke="#cfc7ba" i]
) {
  stroke: var(--wb-line) !important;
}

.peak-guide {
  stroke: #777;
}

/* Compatibility with presentation attributes emitted by both existing app.js versions. */
body :is(.workbench-plot, .plot, .atlas-svg) :is(
  [stroke="#8fc4ff" i], [stroke="#7aa6bf" i],
  [stroke="#365f7d" i], [stroke="#2f5f7b" i]
) {
  stroke: var(--wb-blue);
}

body :is(.workbench-plot, .plot, .atlas-svg) :is(
  [stroke="#f0a05b" i], [stroke="#8b5e34" i]
) {
  stroke: var(--wb-orange);
}

body :is(.workbench-plot, .plot, .atlas-svg) :is(
  [stroke="#73d59a" i], [stroke="#6ad18a" i]
) {
  stroke: var(--wb-green);
}

body :is(.workbench-plot, .plot, .atlas-svg) :is(
  [stroke="#ee92c0" i], [stroke="#e48cc0" i]
) {
  stroke: var(--wb-pink);
}

body :is(.workbench-plot, .plot, .atlas-svg) :is(
  [fill="#8fc4ff" i], [fill="#7aa6bf" i],
  [fill="#365f7d" i], [fill="#2f5f7b" i]
) {
  fill: var(--wb-blue);
}

body :is(.workbench-plot, .plot, .atlas-svg) :is(
  [fill="#f0a05b" i], [fill="#8b5e34" i]
) {
  fill: var(--wb-orange);
}

body :is(.workbench-plot, .plot, .atlas-svg) :is(
  [fill="#73d59a" i], [fill="#6ad18a" i]
) {
  fill: var(--wb-green);
}

body :is(.workbench-plot, .plot, .atlas-svg) :is(
  [fill="#ee92c0" i], [fill="#e48cc0" i]
) {
  fill: var(--wb-pink);
}

/* These are diagram boxes, not data cells. Leave computed RGB heatmaps untouched. */
body .atlas-svg :is(rect[fill="#26313a" i], rect[fill="#203b2d" i]) {
  fill: #fff;
  stroke: var(--wb-line);
  stroke-width: 1px;
}

/* Shrink and wrap controls within the existing tracks instead of resizing the layout. */
body :is(
  button, input, select, textarea, .seg, .top-actions, .workbench-actions,
  .preset-row, .paper-controls, .table-controls, .atlas-card-actions,
  .sentence-links, .curve-legend, .param-control, .atlas-control
) {
  min-width: 0;
  max-width: 100%;
}

body :is(
  button, .seg, .pill, .hero-meta span, .workbench-badge, .live-dot,
  .atlas-card-actions a, .explanation-progress-label
) {
  white-space: normal;
  overflow-wrap: anywhere;
}

body :is(
  .topbar, .workbench-head, .lab-title, .panel-top,
  .atlas-head, .atlas-group-head, .atlas-card header,
  .figure-card header, .equation-card header, .table-card header
) {
  flex-wrap: wrap;
}

body :is(
  .topbar, .top-actions, .workbench-head, .workbench-actions, .lab-title,
  .preset-row, .panel-top, .paper-controls, .table-controls, .atlas-head,
  .atlas-group-head, .atlas-card header, .atlas-card-actions,
  .module-grid, .factor-grid, .formula-flow, .kinetics-lab,
  .metric-grid, .atlas-controls, .atlas-card-grid, .atlas-summary-grid,
  .atlas-badge-grid, .atlas-interval-grid, .definition-grid, .detail-grid
) > * {
  min-width: 0;
  max-width: 100%;
}

body :is(
  .factor-card, .flow-step, .module, .metric-grid article,
  .atlas-card header, .atlas-group-head, .atlas-control,
  .param-control, .definition-grid, .explanation-nav-item
) {
  overflow-wrap: anywhere;
}

.param-control,
.atlas-control {
  grid-template-columns: minmax(0, 1fr) auto;
}

.search-line input {
  min-width: 0;
}

body :is(
  .math-display, .formula-substitution, .workbench-formula,
  .module-formula, .atlas-card-formula, .atlas-card-viz,
  .atlas-group-summary, .display-math-line, .table-scroll
) {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.workbench-formula {
  justify-content: flex-start;
}

.workbench-formula > :is(.katex, .katex-display) {
  flex: 0 0 auto;
  margin-inline: auto;
}

.formula-workbench .formula-substitution > .math {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
}

.formula-workbench .formula-substitution > .math .katex {
  font-size: 1.25rem !important;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .formula-workbench .formula-substitution > .math .katex {
    font-size: 1.1rem !important;
  }
}