/* tool-base.css — the deduped legacy tool stylesheet.
   Source: the <style> block shared by all 25 original single-file
   pages (rules present in every file's first style block), extracted
   once by migrate.py instead of copied 25 times.
   Scoping: every rule is prefixed with .tool-body, so these styles
   apply ONLY inside a tool's body and never touch the app shell
   (header, search, footer, breadcrumb, title row), which is styled
   purely by assets/style.css (Chunk 1 design system).
   Tokens: legacy token names that collide with the Chunk 1 tokens
   (--bg, --surface, --ink, --muted, --primary, --accent, --line,
   --ok, --warn, --err, --radius-card) are renamed --lg-* and defined
   on .tool-body. Legacy-only tokens (--soft, --primary-dark,
   --radius-btn, --radius-input, --shadow, --shadow-lift, --font,
   --max-tool, --max-text, --atom-*, --g-*) keep their names on
   .tool-body, so tool JavaScript that sets inline styles with
   var(--atom-*) keeps working. The dark values follow the theme
   toggle via [data-theme="dark"] .tool-body (the old
   prefers-color-scheme block was converted).
   Dropped from the base: the old site header/footer/brand/nav rules
   and the old home-only rules (.hero, .promise, .start-here,
   .search-box, .section-title) — the new shell and home replace them.
   The old body rule became .tool-body { font-size: 16px; ... } (the
   tools were set at 16px; the page background stays the Chunk 1 one).
   This file is TEMPORARY: Chunks 4-7 restyle each tool onto the
   design system and delete its rules from here. Do not add new
   design tokens here. */
.tool-body {
  --lg-bg: #eef4fb;
  --lg-surface: #ffffff;
  --lg-ink: #16233a;
  --lg-muted: #52627a;
  --lg-primary: #2a5a8a;
  --on-lg-primary: #ffffff; /* text on a --lg-primary background; dark ink in dark mode, where --lg-primary is light */
  --tile-ink: #16233a; /* text on periodic-table tiles, which keep their light category colours in both modes */
  --primary-dark: #0f2a44;
  --lg-accent: #e67e22;
  --on-lg-accent: #16233a; /* text on a --lg-accent background */
  --lg-line: #d5dee9;
  --soft: #e8eef7;
  --lg-ok: #2e7d32;
  --lg-warn: #f9a825;
  --lg-err: #c62828;
  --lg-radius-card: 10px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow: 0 1px 4px rgba(15, 42, 68, .15);
  --shadow-lift: 0 4px 12px rgba(15, 42, 68, .18);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --max-tool: 1120px;
  --max-text: 760px;
  --atom-h: #8a95a5;
  --atom-c: #263238;
  --atom-n: #1565c0;
  --atom-o: #e53935;
  --atom-s: #f9a825;
  --atom-p: #ef6c00;
  --atom-f: #43a047;
  --atom-cl: #2e7d32;
  --atom-br: #8d6e63;
  --g-blue: #1f6fb2;
  --g-orange: #e67e22;
  --g-green: #2e8b57;
  --g-purple: #7b4fa3;
  --g-grey: #6b7686;
}
@media (prefers-color-scheme: dark) {
  [data-theme="dark"] .tool-body {
    --lg-bg: #0b1626;
    --lg-surface: #13233a;
    --lg-ink: #e6eef9;
    --lg-muted: #9fb2cc;
    --lg-primary: #6aa6e0;
    --primary-dark: #0a1526;
    --lg-accent: #f0923d;
    --on-lg-accent: #0c1624;
    --lg-line: #27405c;
    --soft: #1b3049;
    --shadow: 0 1px 4px rgba(0, 0, 0, .4);
    --shadow-lift: 0 4px 12px rgba(0, 0, 0, .5);
    /* Chunk 9 (test 12): the light ok/err greens and reds are too dark
       to read on the dark surface, so they lighten here (ok 3.54 -> 7.68,
       err 3.23 -> 6.08 against #0c1624). Warn was already fine at 9.22. */
    --lg-ok: #66bb6a;
    --lg-err: #e57373;
  }
}
[data-theme="dark"] .tool-body {
  --lg-bg: #0b1626;
  --lg-surface: #13233a;
  --lg-ink: #e6eef9;
  --lg-muted: #9fb2cc;
  --lg-primary: #6aa6e0;
  --on-lg-primary: #0c1624;
  --primary-dark: #0a1526;
  --lg-accent: #f0923d;
  --lg-line: #27405c;
  --soft: #1b3049;
  --shadow: 0 1px 4px rgba(0, 0, 0, .4);
  --shadow-lift: 0 4px 12px rgba(0, 0, 0, .5);
  /* Chunk 9 (test 12): see the note in the prefers-color-scheme block. */
  --lg-ok: #66bb6a;
  --lg-err: #e57373;
}
.tool-body *, .tool-body *::before, .tool-body *::after {
  box-sizing: border-box;
}
.tool-body {
  font-size: 16px;
  line-height: 1.5;
  color: var(--lg-ink);
}
.tool-body h1, .tool-body h2, .tool-body h3, .tool-body h4 {
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--lg-ink);
}
.tool-body h1 {
  font-size: 32px;
}
.tool-body h2 {
  font-size: 20px;
}
.tool-body h3 {
  font-size: 16px;
}
.tool-body p {
  margin: 0 0 16px;
}
.tool-body a {
  color: var(--lg-primary);
}
.tool-body a:hover {
  text-decoration-thickness: 2px;
}
.tool-body small, .tool-body .helper {
  font-size: 13px;
  color: var(--lg-muted);
}
.tool-body sub, .tool-body sup {
  font-size: .75em;
}
.tool-body img, .tool-body svg, .tool-body canvas {
  max-width: 100%;
}
.tool-body :focus-visible {
  outline: 3px solid var(--lg-accent);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .tool-body *, .tool-body *::before, .tool-body *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.tool-body .wrap {
  max-width: var(--max-tool);
  margin: 0 auto;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
.tool-body .wrap-text {
  max-width: var(--max-text);
  margin: 0 auto;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 600px) {
  .tool-body .wrap, .tool-body .wrap-text {
    padding-left: 24px;
    padding-right: 24px;
  }
  .tool-body h1 {
    font-size: 32px;
  }
}
.tool-body main {
  padding: 24px 0 48px;
}
.tool-body section {
  margin-bottom: 32px;
}
.tool-body .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.tool-body .icon-btn:hover {
  background: rgba(255, 255, 255, .16);
}
.tool-body .icon-btn .icon {
  width: 24px;
  height: 24px;
}
.tool-body .crumbs {
  font-size: 14px;
  color: var(--lg-muted);
  margin: 16px 0 8px;
}
.tool-body .crumbs a {
  color: var(--lg-muted);
  text-decoration: none;
}
.tool-body .crumbs a:hover {
  text-decoration: underline;
  color: var(--lg-primary);
}
.tool-body .crumbs [aria-current="page"] {
  color: var(--lg-ink);
}
.tool-body .card {
  background: var(--lg-surface);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-card);
  padding: 16px;
  box-shadow: var(--shadow);
}
@media (min-width: 600px) {
  .tool-body .card {
    padding: 24px;
  }
}
.tool-body .card-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .tool-body .card-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .tool-body .card-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.tool-body .tool-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--lg-ink);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.tool-body .tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--lg-primary);
  box-shadow: var(--shadow-lift);
}
.tool-body .tool-card.soon {
  cursor: default;
}
.tool-body .tool-card.soon:hover {
  transform: none;
  border-color: var(--lg-line);
  box-shadow: var(--shadow);
}
.tool-body .tool-card .tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lg-primary);
}
.tool-body .tool-card .tool-icon .icon {
  width: 28px;
  height: 28px;
}
.tool-body .tool-card h3 {
  margin: 0;
}
.tool-body .tool-card p {
  margin: 0;
  color: var(--lg-muted);
  font-size: 14px;
  flex: 1;
}
.tool-body .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tool-body .tag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--lg-primary);
  border: 1px solid var(--lg-line);
}
.tool-body .tool-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--lg-accent);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tool-body .tool-head {
  margin-bottom: 16px;
}
.tool-body .tool-head .lede {
  color: var(--lg-muted);
  margin: 0;
  max-width: 760px;
}
.tool-body .tool-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .tool-body .tool-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    align-items: start;
  }
  .tool-body .tool-canvas-col {
    position: sticky;
    top: 72px;
  }
}
.tool-body .panel {
  background: var(--lg-surface);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-card);
  padding: 16px;
  box-shadow: var(--shadow);
}
@media (min-width: 600px) {
  .tool-body .panel {
    padding: 24px;
  }
}
.tool-body .panel h2 {
  margin-top: 0;
}
.tool-body .canvas-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--lg-surface);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-card);
  overflow: hidden;
  position: relative;
}
@media (min-width: 1024px) {
  .tool-body .canvas-wrap {
    aspect-ratio: 16 / 10;
  }
}
.tool-body .canvas-wrap > svg, .tool-body .canvas-wrap > canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.tool-body .canvas-wrap canvas {
  touch-action: none;
}
.tool-body .canvas-wrap.wide {
  aspect-ratio: 16 / 10;
}
@media (max-width: 599px) {
  .tool-body .canvas-wrap.wide {
    aspect-ratio: 4 / 3;
  }
}
.tool-body .status {
  font-size: 14px;
  color: var(--lg-muted);
  margin: 8px 0 0;
  min-height: 24px;
}
.tool-body .status.ok {
  color: var(--lg-ok);
}
.tool-body .status.err {
  color: var(--lg-err);
}
.tool-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: var(--lg-primary);
  color: var(--on-lg-primary);
}
.tool-body .btn:hover {
  filter: brightness(1.08);
}
.tool-body .btn.secondary {
  background: var(--soft);
  color: var(--lg-primary);
  border-color: var(--lg-line);
}
.tool-body .btn.danger {
  background: var(--lg-err);
  color: #fff;
}
.tool-body .btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.tool-body .btn .icon {
  width: 20px;
  height: 20px;
}
.tool-body .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tool-body .btn-row .btn {
  flex: 0 1 auto;
}
@media (max-width: 599px) {
  .tool-body .btn-row .btn.btn-row-first {
    flex: 1 1 100%;
  }
}
.tool-body .btn-group-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--lg-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 16px 0 8px;
}
.tool-body .btn-group-label:first-child {
  margin-top: 0;
}
.tool-body .field {
  margin-bottom: 16px;
}
.tool-body .field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.tool-body .field .helper {
  display: block;
  margin-top: 4px;
}
.tool-body .field input:not([type="checkbox"]):not([type="radio"]), .tool-body .field select, .tool-body .field textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 12px;
  border: 1px solid var(--lg-line);
  border-radius: var(--radius-input);
  background: var(--lg-surface);
  color: var(--lg-ink);
  font: inherit;
  font-size: 16px;
}
/* Chunk 8: checkboxes and radios inside a .field keep their own size —
   the full-width rule above stretched a bare checkbox in a label to the
   whole card width (Henderson-Hasselbalch "Compare a second compound"
   rendered as a 324x44 box and pushed its label 7px over). */
.tool-body .field input[type="checkbox"], .tool-body .field input[type="radio"] {
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  flex: none;
  accent-color: var(--lg-primary);
}
/* Chunk 8: a label that holds a checkbox or radio is a 44px row so the
   control is a full touch target and its text wraps in its own column. */
.tool-body .field label:has(> input[type="checkbox"]), .tool-body .field label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.tool-body .field input:focus, .tool-body .field select:focus, .tool-body .field textarea:focus {
  border-color: var(--lg-primary);
  outline: 3px solid var(--lg-accent);
  outline-offset: 0;
}
.tool-body .field input[aria-invalid="true"], .tool-body .field select[aria-invalid="true"] {
  border-color: var(--lg-err);
}
/* Chunk 9 (test 2): the old .input-unit wrapper pattern is dead — the
   markup now uses .input-wrap with a span.input-unit label, styled in
   style.css (padding-right 48px, in scale). This block matched nothing,
   so it is removed rather than re-scaled. */
.tool-body .field-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .tool-body .field-row {
    grid-template-columns: 1fr 1fr;
  }
}
.tool-body .field-error {
  color: var(--lg-err);
  font-size: 14px;
  margin-top: 4px;
}
.tool-body .param-box {
  border: 1px solid var(--lg-line);
  border-left: 6px solid var(--g-blue);
  border-radius: var(--lg-radius-card);
  padding: 16px;
  margin-bottom: 16px;
  background: var(--lg-surface);
}
.tool-body .param-box.pk {
  border-left-color: var(--g-blue);
  background: color-mix(in srgb, var(--g-blue) 6%, var(--lg-surface));
}
.tool-body .param-box.pd {
  border-left-color: var(--g-orange);
  background: color-mix(in srgb, var(--g-orange) 6%, var(--lg-surface));
}
.tool-body .param-box.dose {
  border-left-color: var(--g-green);
  background: color-mix(in srgb, var(--g-green) 6%, var(--lg-surface));
}
.tool-body .param-box h3 {
  margin-top: 0;
  font-size: 16px;
}
.tool-body .param-box .field:last-child {
  margin-bottom: 0;
}
.tool-body details.more {
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-card);
  padding: 8px 16px;
  background: var(--lg-surface);
  margin-top: 16px;
}
.tool-body details.more summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--lg-primary);
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}
.tool-body details.more summary::-webkit-details-marker {
  display: none;
}
.tool-body details.more summary::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  color: var(--lg-accent);
}
.tool-body details.more[open ] summary::after {
  content: "–";
}
.tool-body details.more .more-body {
  padding: 8px 0 8px;
}
.tool-body .export-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--lg-line);
}
.tool-body .result-box {
  background: var(--soft);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-card);
  padding: 16px;
  margin-top: 16px;
}
.tool-body .result-box .big {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}
.tool-body .result-box .unit {
  font-size: 20px;
  color: var(--lg-muted);
  font-weight: 600;
}
.tool-body .result-box .meaning {
  color: var(--lg-muted);
  margin: 4px 0 0;
}
.tool-body details.calc {
  margin-top: 12px;
}
.tool-body details.calc summary {
  cursor: pointer;
  color: var(--lg-primary);
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.tool-body details.calc .formula {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--lg-surface);
  border: 1px solid var(--lg-line);
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
  margin: 8px 0;
}
.tool-body .table-scroll {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-card);
}
.tool-body table.data {
  width: 100%;
  border-collapse: collapse;
  background: var(--lg-surface);
  font-size: 14px;
}
.tool-body table.data th, .tool-body table.data td {
  padding: 12px 12px;
  text-align: left;
  border-bottom: 1px solid var(--lg-line);
  white-space: nowrap;
}
.tool-body table.data th {
  background: var(--soft);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lg-muted);
}
.tool-body table.data tr:last-child td {
  border-bottom: 0;
}
.tool-body table.data td.num, .tool-body table.data th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tool-body .related h2 {
  margin-bottom: 16px;
}
.tool-body .disclaimer {
  background: var(--soft);
  border: 1px solid var(--lg-line);
  border-left: 6px solid var(--lg-warn);
  border-radius: var(--lg-radius-card);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--lg-muted);
}
.tool-body .warn-box {
  background: var(--soft);
  border: 1px solid var(--lg-line);
  border-left: 6px solid var(--lg-err);
  border-radius: var(--lg-radius-card);
  padding: 12px 16px;
  font-size: 14px;
  margin: 16px 0;
}
.tool-body .warn-box strong {
  color: var(--lg-err);
}
.tool-body .icon {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool-body .hidden {
  display: none !important;
}
.tool-body .visually-hidden {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Chunk 8: dark-mode plot surfaces =====
   The numeric plots are SVG drawn by each tool's JS with fixed light-mode
   colours. In dark mode those colours are remapped here (CSS beats the
   SVG presentation attributes, so no drawing code changes). Scoped to
   .plot and .canvas-wrap only: drawing artboards (draw-structure,
   molecule views, ethanol views, figure canvas) stay white, and exports
   are built separately and stay white. Series colours lighten to the
   dark-mode tokens, as the brief asks. */
[data-theme="dark"] .tool-body .plot svg rect[fill="#ffffff"],
[data-theme="dark"] .tool-body .canvas-wrap svg rect[fill="#ffffff"] { fill: var(--surface); }
[data-theme="dark"] .tool-body .plot svg [stroke="#d5dee9"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#d5dee9"] { stroke: var(--line); }
[data-theme="dark"] .tool-body .plot svg [stroke="#16233a"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#16233a"] { stroke: var(--ink); }
[data-theme="dark"] .tool-body .plot svg [fill="#16233a"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#16233a"] { fill: var(--ink); }
[data-theme="dark"] .tool-body .plot svg [fill="#52627a"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#52627a"] { fill: var(--ink-2); }
[data-theme="dark"] .tool-body .plot svg [fill="#6b7686"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#6b7686"] { fill: var(--muted); }
[data-theme="dark"] .tool-body .plot svg [fill="#1f6fb2"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#1f6fb2"] { fill: #6aa6e0; }
[data-theme="dark"] .tool-body .plot svg [stroke="#1f6fb2"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#1f6fb2"] { stroke: #6aa6e0; }
[data-theme="dark"] .tool-body .plot svg [fill="#e67e22"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#e67e22"] { fill: #f0923d; }
[data-theme="dark"] .tool-body .plot svg [stroke="#e67e22"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#e67e22"] { stroke: #f0923d; }
[data-theme="dark"] .tool-body .plot svg [fill="#2e8b57"],
[data-theme="dark"] .tool-body .plot svg [fill="#2e7d32"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#2e8b57"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#2e7d32"] { fill: #66bb6a; }
[data-theme="dark"] .tool-body .plot svg [stroke="#2e8b57"],
[data-theme="dark"] .tool-body .plot svg [stroke="#2e7d32"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#2e8b57"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#2e7d32"] { stroke: #66bb6a; }
[data-theme="dark"] .tool-body .plot svg [fill="#c62828"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#c62828"] { fill: #ef6b6b; }
[data-theme="dark"] .tool-body .plot svg [stroke="#c62828"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#c62828"] { stroke: #ef6b6b; }
[data-theme="dark"] .tool-body .plot svg [fill="#7b4fa3"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#7b4fa3"] { fill: #a58fd0; }
[data-theme="dark"] .tool-body .plot svg [stroke="#7b4fa3"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#7b4fa3"] { stroke: #a58fd0; }
[data-theme="dark"] .tool-body .plot svg [fill="#f9a825"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#f9a825"] { fill: #f0a030; }
[data-theme="dark"] .tool-body .plot svg [stroke="#f9a825"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#f9a825"] { stroke: #f0a030; }
[data-theme="dark"] .tool-body .plot svg [fill="#e8eef7"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#e8eef7"] { fill: var(--surface-2); }
[data-theme="dark"] .tool-body .plot svg [fill="#1565c0"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#1565c0"] { fill: #6aa6e0; }
[data-theme="dark"] .tool-body .plot svg [stroke="#1565c0"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#1565c0"] { stroke: #6aa6e0; }
[data-theme="dark"] .tool-body .plot svg [fill="#7cb342"],
[data-theme="dark"] .tool-body .canvas-wrap svg [fill="#7cb342"] { fill: #66bb6a; }
[data-theme="dark"] .tool-body .plot svg [stroke="#7cb342"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#7cb342"] { stroke: #66bb6a; }
[data-theme="dark"] .tool-body .plot svg [stroke="#ffffff"],
[data-theme="dark"] .tool-body .canvas-wrap svg [stroke="#ffffff"] { stroke: var(--surface); }

/* ===== Chunk 8: tables scroll in their own box with a visible edge =====
   A soft shadow on the right edge while the table can scroll, so it is
   clear there is more to the side. The shadow fades when the table is
   scrolled fully right (background-attachment: local on the scroll). */
.tool-body .table-wrap {
  background-image:
    linear-gradient(to right, var(--surface) 0, var(--surface) 12px, transparent 24px),
    linear-gradient(to left, var(--surface) 0, var(--surface) 12px, transparent 24px),
    linear-gradient(to right, rgba(15, 27, 45, .14) 0, transparent 16px),
    linear-gradient(to left, rgba(15, 27, 45, .14) 0, transparent 16px);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
}