/* BrainSaw two-photon spectra viewer.
 *
 * Colour tokens follow the validated reference palette: the eight categorical
 * slots are used only for the "distinct" series mode, and both light and dark
 * steps are declared explicitly rather than flipped.
 */

/* ------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --surface-0: #f4f3f0;
  --surface-1: #fcfcfb;
  --surface-2: #ffffff;
  --surface-sunk: #edece8;

  --text-primary: #14140f;
  --text-secondary: #52514e;
  --text-muted: #86847c;

  --border: #e0ded7;
  --border-strong: #cbc8be;
  --grid: rgba(20, 20, 15, 0.07);
  --axis: rgba(20, 20, 15, 0.28);

  --accent: #2a78d6;
  --accent-ink: #1c5aa6;
  --accent-soft: rgba(42, 120, 214, 0.1);

  --good: #1b7a4b;
  --good-soft: rgba(27, 122, 75, 0.1);
  --warn: #a35a00;
  --warn-soft: rgba(163, 90, 0, 0.1);
  --danger: #c0342f;
  --danger-soft: rgba(192, 52, 47, 0.1);

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  --radius: 12px;
  --radius-sm: 8px;
  --rail-w: 328px;
  --shadow: 0 1px 2px rgba(20, 20, 15, .05), 0 8px 24px -16px rgba(20, 20, 15, .3);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-0: #111110;
    --surface-1: #1a1a19;
    --surface-2: #212120;
    --surface-sunk: #141413;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #8d8b81;
    --border: #313130;
    --border-strong: #45443f;
    --grid: rgba(255, 255, 255, 0.07);
    --axis: rgba(255, 255, 255, 0.3);
    --accent: #3987e5;
    --accent-ink: #7cb0f0;
    --accent-soft: rgba(57, 135, 229, 0.16);
    --good: #3faa72;
    --good-soft: rgba(63, 170, 114, 0.16);
    --warn: #d59433;
    --warn-soft: rgba(213, 148, 51, 0.16);
    --danger: #e66767;
    --danger-soft: rgba(230, 103, 103, 0.16);
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #111110;
  --surface-1: #1a1a19;
  --surface-2: #212120;
  --surface-sunk: #141413;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8d8b81;
  --border: #313130;
  --border-strong: #45443f;
  --grid: rgba(255, 255, 255, 0.07);
  --axis: rgba(255, 255, 255, 0.3);
  --accent: #3987e5;
  --accent-ink: #7cb0f0;
  --accent-soft: rgba(57, 135, 229, 0.16);
  --good: #3faa72;
  --good-soft: rgba(63, 170, 114, 0.16);
  --warn: #d59433;
  --warn-soft: rgba(213, 148, 51, 0.16);
  --danger: #e66767;
  --danger-soft: rgba(230, 103, 103, 0.16);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -16px rgba(0, 0, 0, .8);
}

/* --------------------------------------------------------------- base */
* { box-sizing: border-box; }
/* Components below set display explicitly, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--accent-ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface-2); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------ top bar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--surface-1) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
.brand strong { display: block; letter-spacing: -0.015em; white-space: nowrap; }
.brand em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(140deg, #4a3aa7, #2a78d6 35%, #1baf7a 62%, #eda100 82%, #e34948);
}
.topbar-controls { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.field { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.field.block { display: block; }
.field.block > span { display: block; margin-bottom: 5px; }
.field > span { white-space: nowrap; }
select, input[type="search"], input[type="text"], input[type="number"] {
  font: inherit; font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  max-width: 100%;
  /* form controls size to their content and refuse to shrink in a flex row
     without this, which pushes the whole page wider than a phone screen */
  min-width: 0;
}
select { cursor: pointer; }
.field.block select, .field.block input { width: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2);
  cursor: pointer; font-size: 13px; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-sunk); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-sunk); }
.btn.small { padding: 4px 9px; font-size: 12px; }
.btn.icon { padding: 6px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-ink); text-decoration: underline; font-size: inherit;
}

/* ------------------------------------------------------------- layout */
.layout {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: start;
  gap: 0;
}
.rail {
  position: sticky; top: 53px;
  height: calc(100dvh - 53px);
  overflow-y: auto; overscroll-behavior: contain;
  border-right: 1px solid var(--border);
  background: var(--surface-1);
  padding: 4px 0 40px;
}
.rail-block { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.rail-block:last-child { border-bottom: 0; }
.rail-block > h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.rail-note { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; line-height: 1.45; }
.rail-note.empty { margin-top: 0; }
.pill {
  background: var(--accent-soft); color: var(--accent-ink);
  border-radius: 99px; padding: 1px 7px; font-size: 11px; letter-spacing: 0;
}
/* A container, so .chart-pair can ask how wide the column it sits in actually
   is. The window width is the wrong question: the rail is 328 px on a desktop
   and nothing at all on a phone, so the same viewport gives quite different
   room for a chart. */
.panels {
  padding: 18px 20px 60px; display: flex; flex-direction: column; gap: 16px;
  min-width: 0; container-type: inline-size;
}

/* --------------------------------------------------- fluorophore picker */
.search-wrap { margin-bottom: 9px; }
.search-wrap input { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chip {
  border: 1px solid var(--border-strong); background: transparent;
  border-radius: 99px; padding: 3px 9px; font-size: 11.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.chip i { width: 8px; height: 8px; border-radius: 50%; display: block; }

.fluor-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.fluor-row {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent;
}
.fluor-row:hover { background: var(--surface-sunk); }
.fluor-row[aria-selected="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.fluor-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.fluor-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fluor-meta { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.src-tags { display: flex; gap: 2px; flex: none; }
.src-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .03em;
  width: 14px; height: 14px; display: grid; place-items: center;
  border-radius: 3px; background: var(--surface-sunk); color: var(--text-muted);
}

/* ----------------------------------------------------- selected entries */
.selected-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sel-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 8px 9px;
}
.sel-top { display: flex; align-items: center; gap: 8px; }
.sel-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.sel-name { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-remove {
  border: 0; background: none; cursor: pointer; color: var(--text-muted);
  padding: 2px 4px; border-radius: 4px; line-height: 1;
}
.sel-remove:hover { background: var(--surface-sunk); color: var(--text-primary); }
.sel-bottom { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.sel-bottom .seg { flex: none; }
.sel-peak { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: auto; }

/* ------------------------------------------------------- segmented ctl */
.seg { display: inline-flex; background: var(--surface-sunk); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg button {
  border: 0; background: none; cursor: pointer; border-radius: 6px;
  padding: 4px 10px; font-size: 12px; color: var(--text-secondary);
}
.seg.small button { padding: 3px 8px; font-size: 11.5px; }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"] {
  background: var(--surface-2); color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 500;
}
.seg button[disabled] { opacity: .35; cursor: not-allowed; }

.check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; margin-top: 10px; }
.check.inline { margin-top: 0; font-size: 12px; color: var(--text-secondary); }
.check.compact { margin-top: 0; margin-bottom: 9px; font-size: 12.5px; }
.check:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.check input { accent-color: var(--accent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ---------------------------------------------------------- channels */
.channel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chan-item {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 7px 8px;
}
.chan-swatch { width: 4px; align-self: stretch; border-radius: 2px; flex: none; }
.chan-text { flex: 1; min-width: 0; display: block; }
.chan-name { display: block; font-weight: 500; font-size: 12.5px; }
.chan-filter {
  display: block; font-size: 11px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chan-actions { display: flex; gap: 2px; flex: none; }
.row-actions { display: flex; gap: 6px; margin-top: 9px; }

/* --------------------------------------------------------------- card */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px 12px;
}
.card-head h2 { font-size: 15px; }
.card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; max-width: 62ch; }
.card-sub.wide { max-width: none; }
.card-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-foot {
  font-size: 11.5px; color: var(--text-muted);
  padding: 0 16px 14px; line-height: 1.5;
}

/* ---------------------------------------------------------- hero card */
.hero { border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); }
.hero-empty { padding: 26px 20px 24px; }
.hero-empty h2 { font-size: 17px; margin-bottom: 6px; }
.hero-empty p { color: var(--text-secondary); }
.hero-empty p + p { margin-top: 10px; }
.hero-body { display: flex; gap: 28px; flex-wrap: wrap; padding: 18px 18px 6px; }
.hero-main { flex: 0 1 300px; }
.hero-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.hero-number {
  font-size: 54px; line-height: 1.05; font-weight: 650; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.hero-number .unit { font-size: 20px; font-weight: 500; color: var(--text-muted); margin-left: 6px; letter-spacing: 0; }
/* Two beams means two numbers and their units - "920 nm & 1064 nm" - which
   needs the room a single number does not. */
.hero-number.is-multi { font-size: 32px; letter-spacing: -0.02em; }
.hero-sub { color: var(--text-secondary); font-size: 12.5px; margin-top: 4px; }
.hero-alts-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 18px 12px; flex-wrap: nowrap; overflow-x: auto;
}
.hero-alts-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); flex: none;
}
.hero-alts { display: flex; gap: 6px; flex-wrap: nowrap; }
.hero-alts .alt-btn { flex: none; }
.alt-btn {
  border: 1px solid var(--border-strong); background: var(--surface-2);
  border-radius: 99px; padding: 4px 11px; cursor: pointer; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.alt-btn:hover { border-color: var(--accent); color: var(--accent-ink); }

.hero-bars { flex: 1 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; }
.bar-row { display: grid; grid-template-columns: 1fr 46px; align-items: center; gap: 10px; }
.bar-label { display: flex; align-items: center; gap: 7px; font-size: 12.5px; min-width: 0; }
.bar-label i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.bar-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Laser on/off. Reads as a state, and clicks like a switch. */
.laser-sw {
  flex: none; font: 600 10.5px/1 var(--font); letter-spacing: .06em;
  padding: 5px 8px; border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; background: var(--surface-sunk);
}
.laser-sw.is-on { color: #1a7f42; background: rgba(26, 127, 66, 0.12); }
.laser-sw.is-off { color: var(--danger); background: var(--danger-soft); }
.laser-sw.is-spare { color: var(--warn); background: var(--warn-soft); }
.laser-sw:hover { border-color: currentColor; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .laser-sw.is-on { color: #58c98a; }
}
:root[data-theme="dark"] .laser-sw.is-on { color: #58c98a; }

.bar-flag {
  flex: none; font-style: normal; font-size: 10.5px; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 9px; color: var(--text-secondary);
  background: var(--surface-sunk); border: 1px solid var(--border);
}
.bar-flag.is-low { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.bar-track { position: relative; height: 6px; border-radius: 3px; background: var(--surface-sunk); margin-top: 4px; overflow: hidden; }
.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; }
.bar-val { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); text-align: right; }

.advice { list-style: none; margin: 0; padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 7px; }
.advice li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.8px; line-height: 1.5; color: var(--text-secondary);
  padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.advice li::before {
  content: ""; width: 3px; align-self: stretch; border-radius: 2px; flex: none;
  background: var(--text-muted);
}
.advice li.good { background: var(--good-soft); }
.advice li.good::before { background: var(--good); }
.advice li.warn { background: var(--warn-soft); }
.advice li.warn::before { background: var(--warn); }
.advice li.alt { background: var(--accent-soft); }
.advice li.alt::before { background: var(--accent); }

/* -------------------------------------------------------------- chart */
/* The chart host owns the height and nothing else may argue with it, which is
   worth stating because for a long time something did: Chart puts `sv-chart` on
   the same element, and `.sv-chart { height: 100% }` used to sit below this with
   equal specificity and so win. The percentage then resolved against a card of
   auto height, i.e. against the canvas the chart had just sized from the host -
   a loop that settled wherever it settled, around 520 px. Only whichever host
   also had an id rule was ever really pinned, which made the two panels look
   arbitrarily different and moved the problem from one to the other when the id
   rule moved. The host is a plain block with a height; the chart inside it does
   not need one.

   Emission sets the height both are judged by: a little over half the screen, so
   the card is taken in at a glance. Excitation gets rather less, not more, since
   its card carries a second row of controls (units, laser power, suitability)
   and a footnote underneath, so an equal chart makes for a taller card. Neither
   may pass 70% of the viewport however short the window gets. */
.chart-host { position: relative; height: 320px; max-height: 70dvh; padding: 0 8px; }
#chart-exc { height: 296px; }
.sv-chart { position: relative; width: 100%; }

/* Stacked, a chart is as wide as the column. On an ultrawide that column can be
   3000 px, and a 296 px chart drawn across it is a 10:1 letterbox: the spectra
   flatten out and the wavelength axis is mostly empty. Past 4.5:1 the panels pair
   up side by side instead, which halves the width and puts both plots on screen
   at once - a better use of the room than one very long chart.

   Two rows do this: the charts, and then channels-to-acquire beside channel
   assignment, so the four read as a 2x2. Both use the same breakpoint, since a
   row that paired up while the other did not would look like a mistake.

   The threshold is read off the panel column rather than the window, and 1350 px
   of column is where the shorter of the two charts first passes 4.5:1. Cards
   stretch to the row height so their heads and feet line up, and the paired
   charts are given the same height so their plot areas do too. */
.panel-pair { display: grid; gap: 16px; min-width: 0; }
.panel-pair > .card { min-width: 0; }

@container (min-width: 1350px) {
  .panel-pair { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .panel-pair .chart-host, .panel-pair #chart-exc { height: 340px; }
}
.sv-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.sv-tip {
  position: absolute; pointer-events: none; opacity: 0; transform: translateY(-2px);
  transition: opacity .1s;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 7px 9px; font-size: 11.5px; min-width: 132px; z-index: 5;
}
.sv-tip.on { opacity: 1; transform: none; }
.sv-tip-h { font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.sv-tip-r { display: flex; align-items: center; gap: 6px; line-height: 1.7; }
.sv-tip-r i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sv-tip-r span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.sv-tip-r b { font-variant-numeric: tabular-nums; font-weight: 600; }

.legend {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  padding: 4px 16px 16px;
}
.legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid transparent; background: var(--surface-sunk);
  border-radius: 99px; padding: 3px 10px; font-size: 11.5px; cursor: pointer;
}
.legend-item[aria-pressed="false"] { opacity: .45; }
.legend-item i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.legend-item i.dash { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed currentColor; }

/* ------------------------------------------------- channels to acquire */
.acquire-list { list-style: none; margin: 0; padding: 0 16px 4px; display: grid; gap: 7px; }
.acquire-warnings { list-style: none; margin: 0; padding: 0 16px 10px; display: grid; gap: 6px; }
.acquire-warnings li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.8px; line-height: 1.5;
  padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--danger-soft); color: var(--danger);
}
.acquire-warnings li::before {
  content: ""; width: 3px; align-self: stretch; border-radius: 2px; flex: none;
  background: var(--danger);
}
.acquire-warnings li.warn { background: var(--warn-soft); color: var(--warn); }
.acquire-warnings li.warn::before { background: var(--warn); }
.acquire-warnings li.info { background: var(--surface-sunk); color: var(--text-secondary); }
.acquire-warnings li.info::before { background: var(--text-muted); }

.acquire-summary {
  font-size: 13px; font-weight: 500; line-height: 1.5;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--surface-sunk); border-left: 3px solid var(--text-muted);
}
.acquire-summary.good { background: var(--good-soft); border-left-color: var(--good); }
.acquire-summary.warn { background: var(--warn-soft); border-left-color: var(--warn); }
.acquire-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
}
.acquire-item.role-skip { opacity: .58; }
.acquire-item.role-signal { border-color: color-mix(in srgb, var(--good) 40%, var(--border)); }
.acquire-item.role-background { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.acq-swatch { width: 4px; align-self: stretch; border-radius: 2px; flex: none; }
.acq-body { flex: 1; min-width: 0; }
.acq-head { display: flex; align-items: center; gap: 8px; }
.acq-head b { font-weight: 600; font-size: 13px; }
.acq-chip {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 99px;
  background: var(--surface-sunk); color: var(--text-muted);
}
.role-signal .acq-chip { background: var(--good-soft); color: var(--good); }
.role-background .acq-chip { background: var(--accent-soft); color: var(--accent-ink); }
.acq-reason { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.acq-bg { flex: none; width: 104px; text-align: right; }
.acq-bg-track {
  display: block; height: 5px; border-radius: 3px;
  background: var(--surface-sunk); overflow: hidden;
}
/* Every bar the same neutral. Accenting the anatomy channel's bar looked like
 * the bar was drawn in its channel's colour, because the anatomy channel is
 * usually Blue and the accent is a blue. The chip, the tinted border and the
 * reason text all say which row it is already. */
.acq-bg-fill { display: block; height: 100%; background: var(--text-muted); border-radius: 3px; }
.acq-bg-label { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
/* the caption sits on its own line so "very little" does not shred the column */
.acq-bg-label em {
  display: block; font-style: normal; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;
}

/* -------------------------------------------------------------- table */
.table-wrap { overflow-x: auto; padding: 0 16px 16px; }
table.matrix { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.matrix th, table.matrix td {
  text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.matrix th:first-child, table.matrix td:first-child { text-align: left; }
table.matrix thead th {
  font-weight: 600; color: var(--text-secondary); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border-strong);
}
table.matrix tbody tr:last-child td { border-bottom: 0; }
.cell-name { display: flex; align-items: center; gap: 7px; }
.cell-name i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
td.heat { position: relative; }
td.heat > span { position: relative; z-index: 1; }
td.heat::before {
  content: ""; position: absolute; inset: 3px 4px; border-radius: 4px;
  background: var(--accent); opacity: calc(var(--v) * 0.5);
}
td.dim { color: var(--text-muted); }
.badge {
  display: inline-block; padding: 1px 7px; border-radius: 99px;
  font-size: 11px; background: var(--surface-sunk); color: var(--text-secondary);
}
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }

/* --------------------------------------------------------- provenance */
.prov-list { list-style: none; margin: 0; padding: 0 16px 16px; display: grid; gap: 6px; }
.prov-item {
  display: flex; gap: 10px; align-items: baseline; font-size: 12.5px;
  padding: 7px 10px; background: var(--surface-sunk); border-radius: var(--radius-sm);
}
.prov-item b { font-weight: 600; flex: none; }
.prov-item span { color: var(--text-secondary); }
.prov-item .tag {
  font-size: 10.5px; padding: 1px 6px; border-radius: 99px;
  background: var(--surface-2); color: var(--text-muted); flex: none;
}
.prov-item .tag.modelled { background: var(--warn-soft); color: var(--warn); }

.page-foot { color: var(--text-muted); font-size: 11.5px; padding: 4px 4px 0; line-height: 1.6; }
.page-foot .refs { list-style: none; margin: 2px 0 0; padding: 0; }
.page-foot .refs li { padding-left: 12px; text-indent: -12px; }
.page-foot .refs li::before { content: "· "; }

/* ------------------------------------------------------------- picker */
.picker {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-1); color: var(--text-primary);
  padding: 0; width: min(620px, 94vw); max-height: 82dvh;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.picker::backdrop { background: rgba(10, 10, 8, .45); backdrop-filter: blur(2px); }
.picker-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--border);
}
.picker-head h2 { font-size: 15px; }
.picker-head button { margin-left: auto; }
.picker-controls { display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap; }
.picker-controls input { flex: 1 1 220px; }
.picker-list {
  list-style: none; margin: 0; padding: 0 8px 8px;
  overflow-y: auto; max-height: 46dvh;
}
.picker-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; background: none; text-align: left;
}
.picker-row:hover { background: var(--surface-sunk); }
.picker-row .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-row .pmeta { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: none; }
.picker-note { padding: 0 16px 14px; font-size: 11.5px; color: var(--text-muted); }

/* -------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--text-primary); color: var(--surface-1);
  padding: 9px 16px; border-radius: 99px; font-size: 12.5px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 60;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------- responsive */
.only-narrow { display: none; }

@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .only-narrow { display: inline-flex; }
  .rail {
    position: fixed; top: 53px; left: 0; bottom: 0; width: min(360px, 88vw);
    height: auto; z-index: 25; transform: translateX(-102%);
    transition: transform .22s ease; box-shadow: var(--shadow);
  }
  .rail.open { transform: none; }
  .panels { padding: 14px 14px 60px; }
  .hero-number { font-size: 46px; }
}

@media (max-width: 620px) {
  .topbar { gap: 8px 10px; padding: 9px 12px; flex-wrap: wrap; }
  .topbar-controls { gap: 6px; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .topbar-controls .field { flex: 1 1 130px; min-width: 0; }
  .topbar-controls select { width: 100%; }
  .field > span { display: none; }
  .brand em { display: none; }
  .chart-host { height: 280px; padding: 0 2px; }
  #chart-exc { height: 260px; }
  .card-head { padding: 12px 12px 10px; }
  .card-tools { width: 100%; margin-left: 0; }
  .hero-body { padding: 14px 14px 4px; gap: 18px; }
  .hero-number { font-size: 40px; }
  .advice { padding: 4px 14px 14px; }
  .table-wrap { padding: 0 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- lasers, beams and microscope configs ------------------------------ */

.laser-pick {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 4px;
  max-width: 100%;
  min-width: 0;
}

.chan-item.is-active { border-color: var(--accent); }

.hero-beams {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.hero-beams .beam {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.hero-beams .beam.is-active { border-color: var(--accent); }
.hero-beams .beam b { font-size: 14px; font-weight: 650; }
.hero-beams .beam i {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-muted);
}

.rail-warning {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--danger);
  background: var(--danger-soft);
}