/* Hand-written 90s hi-fi component-stack theme, take 4. Earlier passes
   (Win98 chrome, then a WMP/Winamp-style device) each solved the previous
   problem but landed on a software-skin look — either an OS dialog or a
   media-player skin. This version is modeled on real stacked stereo racks
   (Kenwood/Sony/Aiwa amp+tuner+cassette+CD towers): matte black/charcoal
   panels, thin chrome trim, plain uppercase brand type, and a green
   VFD-style tuner display — not gradients or glossy plastic. Each
   functional zone is its own stacked ".hifi-unit" component (thin gaps
   between them, like a real rack), not one continuous shell and not
   OS-window chrome (no title bars/menu bars — that's a different kind of
   modularity than the "looks like Windows" problem from earlier passes). */

:root {
  /* Tells the browser this page is dark-themed, so native UI it renders
     itself (the <dialog> backdrop/default text color, <select> dropdowns,
     scrollbars) uses dark-appropriate system colors instead of assuming a
     light page — without this, <dialog>'s UA-default text color resolves
     to near-black regardless of our own dark background, which is why the
     About dialog read as black-on-black. */
  color-scheme: dark;

  --desktop-bg: #0c0c0e;

  /* component shell: neutral matte charcoal, the dominant surface —
     deliberately no color tint (earlier passes used violet; none of the
     real hi-fi reference units have any purple in them at all) */
  --shell-a: #232226;
  --shell-b: #131214;
  --shell-edge-hi: rgba(255, 255, 255, 0.07);
  --shell-edge-lo: rgba(0, 0, 0, 0.6);

  /* brushed chrome/silver trim */
  --chrome-a: #9a9aa2;
  --chrome-b: #55555c;

  /* record/render accent — hi-fi transport convention: green = play,
     red = record. Gives Preview/Render a distinct identity. */
  --accent-red-a: #b23a3a;
  --accent-red-b: #430f0f;

  /* VU-meter warning segment — classic amp meters go green -> amber -> red
     as level climbs toward the top. */
  --accent-amber: #e0a530;

  /* LCD / VFD green: readouts, active-state LEDs — the one thing to keep
     leaning into, not away from */
  --lcd-bg: #03120c;
  --lcd-text: #39ff9d;
  --lcd-text-dim: #1f8f61;
  --lcd-glow: rgba(57, 255, 157, 0.55);

  /* Neutral silkscreen-print label color (fieldset legends etc.) — kept
     separate from the LCD green so green stays reserved for "this is a
     live display/active indicator," matching real hi-fi front panels
     where printed labels are white/silver, not the same color as the
     illuminated display. */
  --label-text: #c2c2ca;

  --text-on-shell: #e2e2e4;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--desktop-bg);
  color: var(--text-on-shell);
  font-family: Tahoma, Verdana, "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  min-height: 100vh;
}

.desktop {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem 1.5rem;
}

.footnote {
  text-align: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  margin: 14px 0 0;
}

/* --- The outer rack frame: darker than the individual component panels
   it holds, so the gaps between stacked .hifi-unit panels read as real
   seams (like the dark chassis edge visible around a stacked stereo rack)
   rather than blending into one continuous card. No visible screws — the
   reference photos' component fronts are clean flat panels; screws belong
   on the back/sides of real gear, not the face. --- */
.device {
  position: relative;
  background:
    /* faint brushed-metal banding */
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.02) 0px,
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--shell-b);
  background-repeat: no-repeat;
  /* Near-square corners — real component fronts are blocky, not rounded. */
  border-radius: 3px;
  border: 1px solid rgba(154, 154, 162, 0.3);
  padding: 16px 18px 20px;
  box-shadow:
    inset 0 1px 0 var(--shell-edge-hi),
    inset 0 -1px 0 var(--shell-edge-lo),
    0 20px 40px -12px rgba(0, 0, 0, 0.7),
    0 2px 0 rgba(0, 0, 0, 0.5);
}

.device-top-bezel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--shell-a), var(--shell-b));
  border-radius: 2px;
  padding: 8px 14px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--chrome-b);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.device-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.device-brand .app-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.device-logo-text {
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.device-tagline {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bezel-actions {
  display: flex;
  gap: 6px;
}

/* Brushed-metal circular buttons — real hi-fi fronts use engraved/printed
   controls on a metal or dark-plastic face, not translucent glassy chips. */
.info-btn {
  width: 26px;
  height: 26px;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b));
  color: #1a1a1c;
  font-style: normal;
  font-weight: bold;
  font-family: Georgia, serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.info-btn:not(:disabled):hover {
  background: linear-gradient(180deg, #adadb4, var(--chrome-b));
}

.info-btn:not(:disabled):active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- LCD display: hero element, live readout + the visualizer. Sits
   nested inside .hifi-unit-hero (the "Tuner / Display" component) — no
   margin of its own, spacing is handled by the unit wrapper around it. --- */
.lcd-display {
  background: var(--lcd-bg);
  border: 1px solid #000;
  border-radius: 4px;
  padding: 6px 10px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    0 1px 0 rgba(255, 255, 255, 0.05);
}

/* One item per row, not a wrapping flex packing — packing behaved
   inconsistently (some parameter combinations fit on one row, longer ones
   didn't, so the display would jump between 1 and 2 lines depending on
   what was selected). Fixed rows are deterministic regardless of content
   length, and read closer to a real segmented VFD besides. */
.lcd-readout {
  font-family: "Courier New", ui-monospace, monospace;
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  color: var(--lcd-text);
  text-shadow:
    0 0 6px var(--lcd-glow),
    0 0 2px var(--lcd-glow);
}

.lcd-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 3px 0;
  border-bottom: 1px solid rgba(57, 255, 157, 0.15);
  white-space: nowrap;
  /* .lcd-readout's inherited glow reads much fainter on this smaller,
     non-bold text than it does on .lcd-line-primary — a tight-radius
     layer reinforces the glow right at the thin glyph edges instead of
     just the wider ambient blur, so it's visible at this size too. */
  text-shadow:
    0 0 6px var(--lcd-glow),
    0 0 2px var(--lcd-glow),
    0 0 1px var(--lcd-glow);
}

/* Fixed-width caption column, like a real tuner VFD's row labels — the
   value span (id-targeted, set via app.js textContent) gets the ellipsis
   truncation instead of the line itself now that each row is label+value. */
.lcd-line > span:last-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lcd-label {
  flex: 0 0 auto;
  width: 34px;
  color: #35c584;
  font-size: 0.62rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lcd-line:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lcd-line-primary {
  font-size: 0.85rem;
  font-weight: bold;
}

.lcd-line-format {
  font-size: 0.62rem;
  opacity: 0.7;
  letter-spacing: 0.06em;
}

#visualizer {
  display: block;
  width: 100%;
  height: 44px;
}

/* --- Stacked hi-fi component modules: each functional zone is its own
   flat panel with a thin chrome trim line and a small function label
   (mirrors how real stacked systems label each component, e.g. "STEREO
   CASSETTE DECK"), separated by real gaps down to the darker rack frame
   below (.device) — not one continuous card, and not OS-window chrome
   (no title bars, no drag/close controls). --- */
.hifi-unit {
  position: relative;
  background: linear-gradient(180deg, var(--shell-a), var(--shell-b));
  border-radius: 2px;
  border-top: 1px solid var(--chrome-b);
  padding: 10px 12px;
  margin-bottom: 11px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 4px rgba(0, 0, 0, 0.4);
}

.hifi-unit:last-of-type {
  margin-bottom: 0;
}

/* The Amplifier form was split into 4 stacked devices (Signal, Frequency,
   Timer, Mixer), nested one level inside <form id="render-form"> instead
   of being direct children of .device — :last-of-type above is scoped per
   parent, so "Mixer" (last hifi-unit inside the form) would otherwise get
   margin-bottom:0 even though it isn't the last panel on the page. Restore
   the standard gap before the next top-level unit (Tuner/Display). */
#render-form.control-panel > .hifi-unit:last-of-type {
  margin-bottom: 11px;
}

/* Tape Deck is a <div>-tag hifi-unit, and Line Out (below it) is a
   <section> — :last-of-type is scoped per tag name, so Tape Deck is
   *always* "the last div" regardless of Line Out's hidden state, and
   always got margin-bottom:0. That's invisible while Line Out stays
   hidden, but the moment a render reveals it, Tape Deck's feet (which
   don't depend on margin at all) have no gap to sit in and jam straight
   into Line Out's top edge. Force the standard gap unconditionally. */
.hifi-unit.hifi-unit-tape-deck {
  margin-bottom: 11px;
}

/* Small chrome isolation "feet" at each component's bottom corners — real
   stacked hi-fi racks (Pioneer/Kenwood/Sony towers) rest each chassis on
   little cylindrical feet, viewed from the side (a short vertical bar with
   a metallic side-light streak), not from above (that would read as flat
   dots/coins, not cylinders). Anchored to start exactly at this panel's
   own bottom edge and extend only downward, so there's no rounded top cap
   poking out above it — the top is meant to be tucked out of view under
   the panel it's attached to. Height matches the panel gap so the bottom
   edge just touches the top of the unit below, like the feet are resting
   on it. */
.hifi-unit::before,
.hifi-unit::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 26px;
  height: 11px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #2c2c30 0%, var(--chrome-b) 35%, #7a7a82 55%, var(--chrome-b) 75%, #2c2c30 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hifi-unit::before {
  left: 14px;
}

.hifi-unit::after {
  right: 14px;
}

/* "Top of stereo" unit — a real recessed VFD screen (not just glowing
   text on the shell background) with a chrome bezel frame around it and
   small indicator glyphs flanking the clock, the way 90s boomboxes and
   home receivers ("spaceship console" front panels — chrome trim, dark
   glass display window, tiny stereo/AM-PM indicator icons) treated their
   main display window, not a plain printed nameplate. */
.hifi-unit-clock {
  padding: 10px;
  text-align: center;
}

.clock-screen {
  background: var(--lcd-bg);
  border: 1px solid #000;
  border-radius: 3px;
  padding: 8px 14px 10px;
  text-align: center;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(154, 154, 162, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.06);
}

.clock-indicators {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.55rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: var(--lcd-text-dim);
  text-shadow: 0 0 4px var(--lcd-glow);
  margin-bottom: 2px;
}

.clock-readout {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: var(--lcd-text);
  text-shadow:
    0 0 8px var(--lcd-glow),
    0 0 3px var(--lcd-glow);
}

.clock-brand {
  margin-bottom: 6px;
  text-align: left;
}

.clock-brand-name {
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

/* Sits inside .clock-screen under the clock digits, so it gets the same
   glowing VFD-green treatment as the rest of the screen's text instead of
   the chrome brand color used above the screen. */
.clock-tagline {
  margin-top: 2px;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lcd-text-dim);
  text-shadow: 0 0 4px var(--lcd-glow);
}

.hifi-unit-label {
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 8px;
}

/* The "Tuner / Display" unit gets more visual weight — a brighter trim
   and a green label — matching how the display dominates the front panel
   on the Aiwa reference unit. This is the one component to lean into. */
.hifi-unit-hero {
  border-top: 2px solid var(--lcd-text-dim);
  padding: 12px 14px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 10px rgba(0, 0, 0, 0.5);
}

.hifi-unit-hero .hifi-unit-label {
  color: var(--label-text);
}

.hint {
  color: var(--text-on-shell);
  opacity: 0.75;
  font-size: 12px;
}


/* --- Group boxes: an engraved silkscreen divider line, not a Windows
   group-box border-image --- */
fieldset {
  border: none;
  margin: 0 0 9px;
  padding: 0;
}

fieldset:last-of-type {
  margin-bottom: 0;
}

legend {
  display: block;
  width: 100%;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--label-text);
  padding: 0 0 3px;
  border-bottom: 1px solid var(--shell-edge-hi);
  margin-bottom: 5px;
}

.field-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 16px;
  margin-top: 5px;
}

/* --- Compact label-beside-control rows (label left, control right) —
   denser than stacking label above input, and closer to how Winamp's
   preferences/EQ panels pack many small controls tightly. --- */
.field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

.field-inline label {
  flex: 0 0 auto;
  min-width: 84px;
}

.field-inline input[type="number"] {
  width: 76px;
  flex: 0 0 auto;
}

.field-inline select {
  width: auto;
  flex: 1;
  min-width: 0;
}

.field-inline-slider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.field-inline-slider label {
  flex: 0 0 auto;
  min-width: 84px;
}

.field-inline-slider input[type="range"] {
  flex: 1;
}

/* --- VU-meter: small segmented level bars beside volume/noise sliders,
   green -> amber -> red toward the top segment, classic amp-meter
   convention. Reacts live to the slider (see app.js updateLcdReadout). --- */
.vu-meter {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  flex: 0 0 auto;
}

.vu-seg {
  width: 4px;
  height: 100%;
  background: rgba(57, 255, 157, 0.12);
  border-radius: 1px;
}

.vu-seg.active {
  background: var(--lcd-text);
  box-shadow: 0 0 3px var(--lcd-glow);
}

.vu-seg.active.warn {
  background: var(--accent-amber);
  box-shadow: 0 0 3px rgba(224, 165, 48, 0.6);
}

.vu-seg.active.hot {
  background: var(--accent-red-a);
  box-shadow: 0 0 3px rgba(178, 58, 58, 0.6);
}

label {
  font-size: 12px;
  color: var(--text-on-shell);
  opacity: 0.9;
}

/* --- Buttons: matte plastic, not a pixel bevel --- */
button {
  font-family: inherit;
  font-size: 12px;
  background: linear-gradient(180deg, #2e2d31, #1c1b1e);
  color: var(--text-on-shell);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  min-width: 72px;
  min-height: 23px;
  padding: 3px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

button:not(:disabled):hover {
  background: linear-gradient(180deg, #38373b, #221f23);
}

button:not(:disabled):active {
  background: linear-gradient(180deg, #1c1b1e, #2e2d31);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

button:disabled {
  opacity: 0.5;
}

button:focus-visible {
  outline: 1px dotted var(--lcd-text);
  outline-offset: 2px;
}

button.default {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px var(--lcd-text-dim),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

/* --- Preset / band buttons: LED-dot active indicator instead of a
   pushed-in pixel bevel — fits a labeled-button device better. --- */
.preset-list,
.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.preset-btn,
.pill-btn {
  position: relative;
  min-width: auto;
  padding: 4px 10px 4px 20px;
  font-size: 12px;
}

.preset-btn::before,
.pill-btn::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #100e16;
  box-shadow: inset 0 0 1px #000;
}

.preset-btn[aria-pressed="true"],
.pill-btn[aria-pressed="true"] {
  border-color: var(--lcd-text-dim);
  color: #fff;
}

.preset-btn[aria-pressed="true"]::before,
.pill-btn[aria-pressed="true"]::before {
  background: var(--lcd-text);
  box-shadow: 0 0 4px 1px var(--lcd-glow);
}

/* --- Preset banks: a tuner-style band switch (like a real hi-fi's
   FM1/FM2/AM buttons) sits above the preset row and swaps which handful of
   preset buttons is visible below — keeps ~24 presets from becoming one
   long wrapped wall of buttons. */
.preset-bank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 6px;
}

.bank-tab {
  min-width: auto;
  min-height: auto;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px 3px 0 0;
  border-bottom: 2px solid transparent;
  color: var(--label-text);
}

.bank-tab[aria-pressed="true"] {
  color: var(--lcd-text);
  border-bottom-color: var(--lcd-text);
  text-shadow: 0 0 4px var(--lcd-glow);
}

/* Custom sits in its own row alongside the active bank's preset buttons
   (like a tuner's dedicated "MANUAL" tune button next to its numbered
   station presets) instead of floating in the tab row above — a subtle
   chrome border sets it apart as the permanent/manual option rather than
   one of the bank's own stations. .preset-list keeps its own internal
   flex-wrap for the dynamic buttons; this row just lets Custom sit beside
   it instead of stacking above. */
.preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

.preset-row .preset-list {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.preset-btn-custom {
  flex: 0 0 auto;
  border-color: var(--chrome-a);
}

/* Bank preset buttons carry two lines — name on top, "Hz · band" beneath —
   so the technical info the old flat single-line list only surfaced via
   the description text underneath is visible on the button itself. Custom
   has no meta span, so it still renders as a single centered line. */
.preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.3;
}

.preset-btn-meta {
  font-size: 9px;
  color: var(--label-text);
  letter-spacing: 0.02em;
}

.preset-btn[aria-pressed="true"] .preset-btn-meta {
  color: var(--lcd-text-dim);
}

/* --- Tone-mode switch: the only radio group in the app, styled as a
   segmented two-position toggle rather than a generic radio button. --- */
input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mode-switch {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  background: var(--lcd-bg);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
}

.mode-switch label {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--lcd-text-dim);
  cursor: inherit;
}

.mode-switch input[type="radio"]:checked + label {
  background: var(--lcd-text-dim);
  color: #04140c;
  box-shadow: 0 0 6px 1px var(--lcd-glow);
}

.mode-switch input[type="radio"]:focus-visible + label {
  outline: 1px dotted var(--lcd-text);
  outline-offset: 2px;
}

/* --- Number inputs + select: LCD-style readouts, real inputs underneath
   (the "hybrid" approach — fast to type into, still reads as a device
   readout, not a plain web form field). --- */
input[type="number"],
select {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 13px;
  background: var(--lcd-bg);
  color: var(--lcd-text);
  text-shadow: 0 0 4px var(--lcd-glow);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
  padding: 5px 8px;
  width: 100%;
  min-height: 30px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--lcd-text) 50%),
    linear-gradient(135deg, var(--lcd-text) 50%, transparent 50%);
  background-position:
    right 14px center,
    right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select option {
  background: #0a0a0a;
  color: var(--lcd-text);
}

input[type="number"]:focus,
select:focus {
  outline: 1px solid var(--lcd-text);
  outline-offset: 1px;
}

/* --- Range sliders: round metal knob thumb on a sunken groove track --- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  margin: 6px 0;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 4px
    ),
    var(--lcd-bg);
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 4px
    ),
    var(--lcd-bg);
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Rectangular ridged fader cap — Winamp's volume/balance sliders use a
   small grooved grip on a horizontal track, not a round knob. */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 20px;
  margin-top: -7px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0,
      rgba(0, 0, 0, 0.35) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(180deg, var(--chrome-a), #2e2d31 45%, #1c1b1e);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}
input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 20px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0,
      rgba(0, 0, 0, 0.35) 1px,
      transparent 1px,
      transparent 4px
    ),
    linear-gradient(180deg, var(--chrome-a), #2e2d31 45%, #1c1b1e);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

input[type="range"]:focus {
  outline: none;
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 1px dotted var(--lcd-text);
  outline-offset: 2px;
}
input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 1px dotted var(--lcd-text);
  outline-offset: 2px;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: var(--shell-b);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2e2d31, #1c1b1e);
  border-radius: 7px;
  border: 3px solid var(--shell-b);
}
::-webkit-scrollbar-corner {
  background: var(--shell-b);
}
* {
  scrollbar-color: #2e2d31 var(--shell-b);
}

/* --- Mini VFD: a small secondary display for real transport/render
   status (READY / QUEUED #N / RENDERING / COMPLETE / ERROR) — same green
   VFD language as the main tuner display, not a plain HTML status line. --- */
.mini-vfd {
  background: var(--lcd-bg);
  border: 1px solid #000;
  border-radius: 3px;
  padding: 4px 8px;
  margin-bottom: 6px;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--lcd-text);
  text-shadow:
    0 0 6px var(--lcd-glow),
    0 0 2px var(--lcd-glow);
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
}

.mini-vfd.is-error {
  color: #ff6b6b;
  text-shadow: 0 0 6px rgba(255, 107, 107, 0.5);
}

/* 90s-car-stereo graphic-EQ display — discrete stacked LED-style segments
   per column (green -> amber -> red toward the top), not a single shape
   that scales, mirrored up/down from a center line (the reference photos'
   real spectrum analyzers — Kenwood especially — show a butterfly/
   reflection pattern, not a flat bottom-up bar row). Real units also never
   show *just* bars: they pair the animation with frequency-band labels, a
   small self-caption, and a row of decorative mode badges on the same
   fascia (see the Panasonic/Alpine reference photos) — all static except
   the bars themselves. Decorative, not audio-reactive: there's no local
   audio during a server-side render to react to, but it cycles through
   several distinct motion patterns (js/app.js) rather than one loop, closer
   to how these units actually behaved as a "light show" than a literal
   spectrum readout. Off (all segments dim) until JS starts lighting
   columns. */
.vfd-caption {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lcd-text);
  text-shadow:
    0 0 6px var(--lcd-glow),
    0 0 2px var(--lcd-glow);
  opacity: 0.9;
  margin-top: 4px;
}

/* flex:1 columns fill the full row width evenly — matching width to
   .vfd-freq-labels (which spans edge-to-edge via justify-content:
   space-between) is what keeps "60" under the first column and "16K"
   under the last one, instead of a narrow centered island under a
   full-width label row. */
.tape-vfd-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 80px;
  margin-top: 4px;
}

.vfd-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  gap: 4px;
}

.vfd-col-up,
.vfd-col-down {
  display: flex;
  gap: 2px;
  flex: 1;
}

.vfd-col-up {
  flex-direction: column-reverse;
}

.vfd-col-down {
  flex-direction: column;
}

.vfd-seg {
  flex: 1;
  border-radius: 1px;
  background: rgba(57, 255, 157, 0.1);
}

.vfd-seg.lit {
  background: var(--lcd-text-dim);
}

.vfd-seg.lit.mid {
  background: var(--lcd-text);
  box-shadow: 0 0 3px var(--lcd-glow);
}

.vfd-seg.lit.warn {
  background: var(--accent-amber);
  box-shadow: 0 0 2px rgba(224, 165, 48, 0.6);
}

.vfd-seg.lit.hot {
  background: var(--accent-red-a);
  box-shadow: 0 0 2px rgba(178, 58, 58, 0.6);
}

.vfd-freq-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 0.62rem;
  color: var(--lcd-text);
  text-shadow:
    0 0 6px var(--lcd-glow),
    0 0 2px var(--lcd-glow);
  opacity: 0.85;
}

.vfd-mode-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
  font-size: 0.64rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: var(--lcd-text);
  text-shadow:
    0 0 6px var(--lcd-glow),
    0 0 2px var(--lcd-glow);
  opacity: 0.85;
}

/* --- Transport deck: a tight button cluster, tape-deck transport style —
   not big spaced-out glossy pills --- */
.transport-deck {
  display: flex;
  gap: 3px;
  padding: 4px;
  margin: 6px 0 8px;
  background: var(--shell-b);
  border-radius: 5px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.transport-btn {
  flex: 1;
  background: linear-gradient(180deg, #263b34, #12201b);
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  color: var(--lcd-text);
  font-size: 12px;
  font-weight: bold;
  min-height: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 1px rgba(0, 0, 0, 0.4);
}

.transport-btn:not(:disabled):hover {
  background: linear-gradient(180deg, #2f4a41, #17281f);
}

.transport-btn:not(:disabled):active {
  background: linear-gradient(180deg, #12201b, #263b34);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
}

/* Render "records"/bakes the track — hi-fi transport convention reserves
   red for record, distinguishing it from Preview's green (play). */
.transport-btn-primary {
  background: linear-gradient(180deg, var(--accent-red-a), var(--accent-red-b));
  color: #ffecec;
}

/* Recipe Share as an old VFD touchscreen panel — a recessed glowing green
   screen (same language as .mini-vfd/.lcd-display) with a dashed "touch
   target" outline instead of a solid plastic button, like the resistive
   touch VFDs on 80s/90s car stereos and appliances. Fill/glow intensifies
   on press to read as a touch response rather than a button click. */
.vfd-touch-screen {
  background: var(--lcd-bg);
  border: 1px solid #000;
  border-radius: 3px;
  padding: 14px 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
}

.vfd-touch-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--lcd-text-dim);
  border-radius: 2px;
  padding: 10px 12px;
  min-width: 0;
  min-height: 0;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  color: var(--lcd-text);
  text-shadow:
    0 0 6px var(--lcd-glow),
    0 0 2px var(--lcd-glow);
  box-shadow: none;
}

.vfd-touch-btn:not(:disabled):hover,
.vfd-touch-btn:not(:disabled):focus-visible {
  background: rgba(57, 255, 157, 0.08);
  border-style: solid;
}

.vfd-touch-btn:not(:disabled):active {
  background: rgba(57, 255, 157, 0.18);
  text-shadow:
    0 0 10px var(--lcd-glow),
    0 0 4px var(--lcd-glow);
}

.vfd-touch-hint {
  margin: 8px 0 0;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--lcd-text-dim);
  text-shadow: 0 0 4px var(--lcd-glow);
  text-align: center;
  opacity: 0.85;
}

.transport-btn-primary:not(:disabled):hover {
  background: linear-gradient(180deg, #c94a4a, var(--accent-red-b));
}

.download-links:not([hidden]) {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn-download {
  display: inline-block;
  background: linear-gradient(180deg, #2e2d31, #1c1b1e);
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  padding: 6px 14px;
  color: var(--lcd-text);
  text-decoration: none;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.btn-download:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* --- About dialog: a small device-style plaque, not a Windows window --- */
dialog#about-dialog {
  border: none;
  padding: 0;
  background: transparent;
}

dialog#about-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.about-panel {
  width: 280px;
  background: linear-gradient(160deg, var(--shell-a), var(--shell-b));
  border: 1px solid rgba(154, 154, 162, 0.3);
  border-radius: 3px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.about-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--shell-a), var(--shell-b));
  border-bottom: 2px solid var(--chrome-b);
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 8px 10px;
}

.about-panel-header button {
  width: 20px;
  height: 20px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--chrome-a), var(--chrome-b));
  color: #1a1a1c;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-panel-body {
  padding: 16px;
  text-align: center;
  color: var(--text-on-shell);
}

.about-panel-body .app-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 6px;
}

.about-panel-body p {
  margin: 6px 0;
  font-size: 12px;
}

.about-panel-body button {
  margin-top: 10px;
}

@media (max-width: 480px) {
  .field-row {
    flex-direction: column;
    align-items: stretch;
  }
  .transport-deck {
    flex-direction: column;
  }
}