@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.3875f8357497.woff2") format('woff2');
  ascent-override: 99.5%;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.b72fa2728a8e.woff2") format('woff2');
  ascent-override: 99.5%;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.66894432e7ff.woff2") format('woff2');
  ascent-override: 99.5%;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular.b51685c998a0.woff2") format('woff2');
  ascent-override: 99.5%;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-SemiBold.7d69bd02da7b.woff2") format('woff2');
  ascent-override: 99.5%;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Bold.11da63e3f137.woff2") format('woff2');
}

:root{
  --bg: #0B1220;
  --bg-panel: #101A2E;
  --bg-field: #0D1626;
  --line: #243352;
  --line-soft: #1A2740;
  --text: #EDEDE3;
  --text-dim: #8C9AB8;
  --amber: #E8A33D;
  --amber-dim: #B9842F;
  --teal: #4FA3A0;
  --danger: #E0654F;
  --radius: 3px;

  /* The plot/sightline drawing canvas stays dark in BOTH themes -- the SVGs
     are drawn in JS with light-tuned ink and a validated dark-surface palette,
     so in light mode they sit as framed dark panels inside white cards. This
     value matches the dark theme's --bg-panel so dark mode looks unchanged. */
  --plot-surface: #101A2E;
  --plot-frame: transparent;   /* no visible frame in dark mode */
}

/* ---------- Light theme (opt-in via data-theme="light" on <html>) ---------- */
:root[data-theme="light"]{
  --bg: #EEF1F5;
  --bg-panel: #FFFFFF;
  --bg-field: #FFFFFF;
  --line: #D2D8E1;
  --line-soft: #E6EAF0;
  --text: #16202E;
  --text-dim: #586274;
  --amber: #C9860F;      /* deepened so it holds contrast on white */
  --amber-dim: #9A6A12;
  --teal: #2E7D7A;
  --danger: #C0392B;
  /* Plots are now themed too: a near-white drawing surface (matches the
     validated light data-viz surface) framed by a hairline. The SVG ink colours
     are swapped in JS (see PLOT_THEMES in app.js). */
  --plot-surface: #FCFCFB;
  --plot-frame: #E1E0D9;
}

*{ box-sizing: border-box; }

html{
  height: 100%;
  /* Base type scale. 18px (up from the browser default 16px) makes the whole
     interface a little more legible by default; --ui-scale is the user's
     Text-size control (Normal 1 / Large 1.3, remembered like the theme). Every
     font-size in this file is in rem, so this one line scales all interface
     text at once. (The plot SVGs use their own coordinate units and scale with
     the panel width instead -- browser zoom covers those.) */
  font-size: calc(18px * var(--ui-scale, 1));
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Full-height app shell: header, a middle band that fills the rest, and the
     footer. The middle band (.layout) hides its own overflow and hands scrolling
     to its two columns independently, so the settings rail and the plot each
     scroll on their own -- pressing "Run" no longer scrolls the plot out of view.
     Narrow screens opt out of this (see the max-width query) and scroll normally. */
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mono{ font-family:'IBM Plex Mono', monospace; }

/* ---------- Header ---------- */
.topbar{
  position: relative;
  z-index: 50;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  padding: 18px 28px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.topbar .brand{
  display:flex;
  align-items:center;
  gap: 14px;
}
.topbar .brand .logo-link{
  display:flex;
  align-items:center;
}
.topbar .brand .logo{
  height: 42px;
  width: auto;
  border-radius: 4px;
  display:block;
}
/* Logo swaps with the theme: inverted (light) mark on dark, black mark on light.
   These are scoped to .topbar .brand so they match the specificity of the
   `.topbar .brand .logo { display:block }` rule above and actually win. */
.topbar .brand .logo-light{ display:none; }
:root[data-theme="light"] .topbar .brand .logo-dark{ display:none; }
:root[data-theme="light"] .topbar .brand .logo-light{ display:block; }

/* Right side of the top bar: theme toggle + model/backend meta. */
.topbar-right{
  display:flex;
  align-items:center;
  gap:16px;
}
/* Text-size control: Normal / Large / Larger, three "A"s at increasing size. */
.textsize{
  display:flex;
  align-items:center;
  gap:4px;
}
.ts-btn{
  min-width: 30px;
  height: 34px;
  padding: 0 6px;
  /* Both A glyphs centred in equal-height boxes so they sit at the same level;
     the size difference alone signals Normal vs Large. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: var(--radius);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ts-btn:hover{ border-color: var(--amber); color: var(--text); }
.ts-btn.active{
  border-color: var(--amber);
  color: var(--text);
  background: color-mix(in srgb, var(--amber) 16%, transparent);
}
.theme-toggle{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: var(--radius);
  height: 34px;
  padding: 0 12px;
  font-size: 0.75rem;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: border-color .15s ease, color .15s ease;
}
.theme-toggle:hover{ border-color: var(--amber); color: var(--text); }
/* Show the theme you'll switch TO: "Light theme" while dark, "Dark theme" while light. */
.theme-opt-dark{ display:none; }
:root[data-theme="light"] .theme-opt-light{ display:none; }
:root[data-theme="light"] .theme-opt-dark{ display:inline; }
.topbar .brand-text{
  display:flex;
  flex-direction:column;
  gap: 3px;
}
.topbar h1{
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  margin:0;
  font-weight:600;
  font-family:'IBM Plex Mono', monospace;
}
/* The underscore in ATRAN_SDC is a plain glyph, same colour as the rest of the
   wordmark -- it previously rendered amber while the letters were white, which
   read as a rendering bug rather than an accent. */
.topbar h1 span{ color: inherit; }
.topbar .sub{
  font-size: 0.75rem;
  color: var(--text-dim);
}
.topbar .meta{
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-align:right;
  line-height:1.5;
}
.topbar .meta b{ color: var(--text); }
.ref-link{ color: inherit; text-decoration: none; border-bottom: 1px dotted var(--text-dim); }
.ref-link:hover{ color: var(--amber); border-bottom-color: var(--amber); }
.feedback-btn{
  display:inline-block;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  padding: 6px 11px;
  border-radius: var(--radius);
  text-decoration:none;
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.feedback-btn:hover{ border-color: var(--teal); color: var(--teal); }
.feedback-icon{
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

/* ---------- Layout ---------- */
.layout{
  display:grid;
  /* The settings rail widens with the text-size control so enlarged labels and
     inputs keep their breathing room: 340px at Normal, scaling with --ui-scale
     (442px at Large). The plot column (1fr) takes the rest. */
  grid-template-columns: calc(340px * var(--ui-scale, 1)) 1fr;
  /* Fill the space between header and footer, and clip here so the two columns
     below own their own scrolling (rail independent of plot). */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
/* Narrow screens: drop the fixed-viewport shell and scroll the page normally,
   so we don't nest scroll regions on a phone. */
@media (max-width: 1088px){
  body{ height:auto; overflow:visible; display:block; }
  .layout{ grid-template-columns: 1fr; overflow:visible; min-height:0; }
  .rail, .main{ overflow: visible; }
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
  }
  .footer-nav {
    width: 100%;
    justify-content: space-around;
  }
}

/* ---------- Input rail ---------- */
.rail{
  border-right: 1px solid var(--line);
  padding: 22px 22px 28px;
  display:flex;
  flex-direction:column;
  gap: 18px;
  overflow-y: auto;
}

.field-group{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.field-label{
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  display:flex;
  align-items:center;
  gap: 6px;
}
.field-label .unit{
  font-family:'IBM Plex Mono', monospace;
  color: var(--amber-dim);
  text-transform:none;
  letter-spacing:0;
  font-size: 0.6875rem;
  margin-left:auto;
}

/* Compact ft/m unit toggle in a field label (right-aligned like .unit). */
.unit-toggle{
  display:inline-flex;
  margin-left:auto;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
}
.unit-toggle .uni-btn{
  background:transparent;
  border:none;
  color: var(--text-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.625rem;
  text-transform:none;
  letter-spacing:0;
  padding: 2px 8px;
  line-height:1.4;
  cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.unit-toggle .uni-btn + .uni-btn{ border-left:1px solid var(--line); }
.unit-toggle .uni-btn:hover{ color: var(--text); }
.unit-toggle .uni-btn.active{
  background: color-mix(in srgb, var(--amber) 16%, transparent);
  color: var(--amber);
}

/* ---------- Info tooltips (reusable "?" badge) ----------
   A small circular "?" next to a field label. The explanatory text lives in a
   child .tip shown on hover OR keyboard focus (the badge is focusable), and is
   also mirrored into aria-label for screen readers. Replaces the permanent
   help lines that used to sit under every input. */
.info-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:1.05rem;
  height:1.05rem;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--bg-field);
  color:var(--text-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.625rem;
  font-weight:600;
  line-height:1;
  cursor:help;
  user-select:none;
  position:relative;
  text-transform:none;
  letter-spacing:0;
  transition: border-color .15s ease, color .15s ease;
}
.info-tip:hover, .info-tip:focus-visible{ border-color:var(--amber); color:var(--amber); outline:none; }
.info-tip .tip{
  /* Fixed (viewport-relative), placed by JS on hover/focus, so the popover
     escapes the rail's overflow clipping and is never hidden behind the plot. */
  position:fixed;
  top:0;
  left:0;
  width:max-content;
  max-width:260px;
  background:var(--bg-panel);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:8px 11px;
  font-family:'Inter', sans-serif;
  font-size:0.75rem;
  font-weight:400;
  line-height:1.45;
  text-transform:none;
  letter-spacing:0;
  text-align:left;
  white-space:normal;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease;
  z-index:60;
}
.info-tip:hover .tip, .info-tip:focus-visible .tip{ opacity:1; visibility:visible; }
.field-row{ display:flex; gap:8px; }
.field-row select{ flex:1 1 auto; min-width:0; }
.field-row .z-label{ flex:0 0 auto; align-self:center; color:var(--text-dim); font-size: 0.75rem; }
.field-row .z-input{ flex:0 0 72px; width:72px; text-align:right; }

/* Emission-line parameters: a preset dropdown above, then a two-up row with a
   custom rest-wavelength box and the redshift z box. The custom box overrides
   the preset when filled. */
.em-params{ display:flex; gap:10px; margin-top:8px; }
.em-params .mini-field{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:5px; }
.em-params .mini-cap{
  font-size: 0.625rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color: var(--text-dim);
}
/* Keep the unit out of the uppercasing -- uppercasing "µm" turns the micro sign
   into a capital that reads as "MM". Rendered lowercase, monospace, like the
   unit chips on the other field labels. */
.em-params .mini-cap .unit{
  text-transform:none;
  letter-spacing:0;
  font-family:'IBM Plex Mono', monospace;
  color:var(--amber-dim);
}
.em-params input{ text-align:right; }
input[type="number"], select{
  width:100%;
  background: var(--bg-field);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 10px;
  border-radius: var(--radius);
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.84375rem;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance: none; margin:0;
}

/* ---------- Range sliders ---------- */
.slider-val{
  font-family:'IBM Plex Mono', monospace;
  color: var(--amber);
  font-size: 0.6875rem;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
  padding-left: 8px;
}
.slider-row{ display:flex; align-items:center; gap:8px; }
.slider-row input[type="range"]{ flex:1 1 auto; min-width:0; }
.slider-num{
  /* rem, not px, so the box grows with the font (baseline + text-size control)
     and 5-digit values like "41000" keep fitting at every size. */
  flex:0 0 4.75rem;
  width:4.75rem;
  text-align:right;
  color: var(--amber);
}
input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 5px;
  margin: 8px 0 2px;
  border-radius: 3px;
  background: var(--bg-field);
  border: 1px solid var(--line);
  outline: none;
  cursor: pointer;
}
input[type="range"]:focus{ border-color: var(--amber-dim); }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--bg-panel);
  box-shadow: 0 0 0 1px var(--amber-dim);
  cursor: pointer;
  transition: transform .1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover{ transform: scale(1.12); }
input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid var(--bg-panel);
  box-shadow: 0 0 0 1px var(--amber-dim);
  cursor: pointer;
}
input:focus, select:focus{
  border-color: var(--amber-dim);
  box-shadow: 0 0 0 3px rgba(232,163,61,0.12);
}
input.invalid{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(224,101,79,0.12);
}
select{
  cursor:pointer;
  appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0 L5 6 L10 0 Z' fill='%238C9AB8'/></svg>");
  background-repeat:no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}
.help{
  font-size: 0.6875rem;
  color: var(--text-dim);
  line-height:1.4;
}
/* Several help lines now only carry dynamic validation text (the static
   explanation moved into the "?" tooltip). Collapse them when empty so they
   don't leave a gap under the field. */
.help:empty{ display:none; }
.help.err{ color: var(--danger); }
.help.warn{ color: var(--amber); }

.divider{
  height:1px;
  background: var(--line-soft);
  margin: 2px 0;
}

.species-group{
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.species-group > summary{
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  list-style: revert;
}
.species-group[open] > summary{ margin-bottom: 6px; }
.species-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 12px;
  margin-top: 8px;
}
.species-grid label{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  color: var(--text);
  cursor: pointer;
}
.species-grid input[type="checkbox"]{ accent-color: var(--amber); }

.mode-toggle{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--bg-field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mode-opt{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  padding: 7px 6px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mode-opt:hover{ color: var(--text); }
.mode-opt.active{
  background: rgba(232,163,61,0.16);
  color: var(--amber);
  font-weight: 600;
}

textarea{
  width:100%;
  background: var(--bg-field);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 9px 10px;
  border-radius: var(--radius);
  font-family:'Inter', sans-serif;
  font-size: 0.8125rem;
  resize: vertical;
  min-height: 44px;
  outline:none;
}
textarea:focus{ border-color: var(--amber-dim); }

.run-btn {
  background: var(--amber);
  color: #1A1304;
  border: 1px solid transparent;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
  padding: 8px 15px;
  border-radius: var(--radius);
  cursor: pointer;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  transition: background 0.15s ease, transform 0.1s ease;
}
.run-btn:hover { background: #F0B254; }
.run-btn:active { transform: translateY(1px); }
.run-btn:disabled { background: #564423; color: #998; cursor: not-allowed; }

.reset-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 13px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.reset-btn:hover {
  border-color: var(--text-dim);
  color: var(--text);
  background: var(--bg-field);
}

.reset-btn:active {
  transform: translateY(1px);
}

.reset-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  opacity: 0.8;
}

/* ---------- Main / plot area ---------- */
.main{
  padding: 22px 28px 28px;
  display:flex;
  flex-direction:column;
  gap: 18px;
  min-width:0;
  overflow-y: auto;
}

.plot-card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  padding: 18px 18px 12px;
  display:flex;
  flex-direction:column;
}
.plot-card .plot-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}
.plot-card .plot-title{
  font-size: 0.78125rem;
  color: var(--text-dim);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.plot-card .plot-comment{
  font-size: 0.9375rem;
  color: var(--amber-dim);
  font-style:italic;
}
#plotSvg{ width:100%; aspect-ratio: 920 / 380; height:auto; display:block; }

/* Comparision bar on top of the plot. The individual runs can be removed
  with the x. */
.pin-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 8px;
  font-size: 0.71875rem;
  color: var(--text-dim);
  font-family:'IBM Plex Mono', monospace;
}
.pin-bar-label{ text-transform:uppercase; letter-spacing:0.06em; }
.pin-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pin-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 5px 3px 8px;
  background: var(--bg-field);
  max-width: 260px;
}
.pin-chip-current{ padding-right:8px; border-color: var(--amber); }
.pin-chip-dot{ width:12px; height:3px; border-radius:1px; flex:0 0 auto; }
.pin-chip-label{ color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pin-chip-x{
  background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size: 0.95rem; line-height:1; padding:0 2px; flex:0 0 auto;
}
.pin-chip-x:hover{ color: var(--danger); }
.pin-clear{
  background:none;
  border:1px solid var(--line);
  color:var(--text-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6875rem;
  padding:3px 8px;
  border-radius:var(--radius);
  cursor:pointer;
}
.pin-clear:hover{ border-color: var(--danger); color: var(--danger); }

.status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 0.71875rem;
  color: var(--text-dim);
  padding-top: 10px;
  flex-wrap:wrap;
  gap:8px;
}
.status-row .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'IBM Plex Mono', monospace;
}
.status-row .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--teal);
}
.status-row .build-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-dim);
  opacity:0.8;
  white-space:nowrap;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.ghost-btn{
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-family:'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  padding: 8px 13px;
  border-radius: var(--radius);
  cursor:pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ghost-btn:hover{ border-color: var(--teal); color: var(--teal); }

.notice{
  border:1px solid var(--line-soft);
  border-left: 3px solid var(--teal);
  background: rgba(79,163,160,0.06);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height:1.5;
}
.notice b{ color: var(--text); }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 14px 28px;
  font-size: 0.6875rem;
  color: var(--text-dim);
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--bg);
  z-index: 10;
}

footer .footer-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

footer .footer-actions .run-btn {
  margin-top: 0;
}

footer .footer-text {
  flex: 1 1 40px;
  max-width: 720px;
}

footer .footer-text a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px dotted var(--teal);
}

footer .footer-text a:hover {
  text-decoration: none;
  border-bottom-style: solid;
}

/* Unified right-hand navigation */
.footer-nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-field);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: var(--radius);
}

.footer-nav-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.footer-nav-link:hover {
  color: var(--teal);
  text-decoration: none;
}

.footer-nav-icon {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  opacity: 0.85;
}

.footer-nav-sep {
  color: var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  user-select: none;
}

.plot-wrap{
  position:relative;
  background: var(--plot-surface);
  border: 1px solid var(--plot-frame);
  border-radius: var(--radius);
}

/* Stale state: the shown spectrum no longer matches the controls (a parameter
   changed and the new run hasn't returned). The plot is dimmed and an overlay
   badge makes it unmistakable; the data-download buttons are disabled in step
   (see .ghost-btn:disabled). Cleared on a successful run. */
.plot-wrap.stale #plotSvg{
  opacity: 0.32;
  filter: grayscale(0.4);
  transition: opacity .15s ease, filter .15s ease;
}
.plot-stale{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.plot-stale[hidden]{ display:none; }
.plot-stale-badge{
  background: var(--bg-panel);
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  text-align:center;
  max-width: 80%;
}
.plot-note{
  color: var(--text-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6875rem;
  line-height: 1.4;
  margin-top: 6px;
  text-align: left;
}
.plot-note[hidden]{ display:none; }
.ghost-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--line);
  color: var(--text-dim);
}
.ghost-btn:disabled:hover{ border-color: var(--line); color: var(--text-dim); }