:root {
  --bg: #070b11;
  --panel: #0d1117;
  --panel-raised: #171c23;
  --panel-soft: #23282f;
  --border: #2a3443;
  --border-strong: #394657;
  --text: #edf1f7;
  --muted: #98a7bc;
  --muted-2: #6f7c90;
  --cyan: #26c9f5;
  --cyan-soft: rgba(38, 201, 245, 0.2);
  --green: #54ff78;
  --amber: #f5b458;
  --danger: #ff6b74;
  --purple: #aa78ff;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  --radius-lg: 10px;
  --radius-md: 6px;
  --radius-sm: 4px;
  --gutter: 14px;
  --left-fixed: 108px;
  --rail-width: 248px;
  --waterfall-width: 1024px;
  --display-width: 1064px;
  --page-min: 1420px;
  --ref-panel: #1b1e1f;
  --ref-panel-soft: #242626;
  --ref-panel-soft-2: #1e2122;
  --ref-active: #0f3131;
  --ref-active-mode: #173f27;
  --rail-bg: #1f2126;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: var(--page-min);
  background: #05080d;
  overflow-x: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(26, 98, 126, 0.2), transparent 26%),
    radial-gradient(circle at top right, rgba(81, 59, 126, 0.16), transparent 22%),
    linear-gradient(180deg, #071018 0%, #05080d 56%, #04070c 100%);
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  overflow-x: auto;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

select,
input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}

.app-shell {
  height: 100vh;
  min-width: var(--page-min);
  width: max(100%, var(--page-min));
  padding: 18px;
  display: grid;
  /* topbar + workspace (sessions now live inside the topbar) */
  grid-template-rows: max-content 1fr;
  gap: var(--gutter);
  overflow: hidden;
}

/* ── Sessions finder in the topbar ── */
/* Full-width search input + status line under it. The PLAY / STOP toggle
   has been moved into the bottom dock so the search owns this whole
   column. */
.topbar-sessions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 68px;
  width: 100%;
  min-width: 0;
}
.session-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(180, 190, 205, 0.75);
  width: 100%;
}
.session-search__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: rgba(180, 190, 205, 0.6);
}
.session-current {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 12px/1 Roboto, sans-serif;
  color: rgba(220, 226, 235, 0.7);
}
.server-finder {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.server-finder-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 80px;          /* line up with the input, not the SESSIONS label */
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: rgba(220, 226, 235, 0.7);
}
.status-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(160, 168, 180, 0.5);
  box-shadow: 0 0 0 0 rgba(80, 200, 130, 0);
  transition: background 200ms, box-shadow 200ms;
  flex-shrink: 0;
}
.status-dot[data-state="on"] {
  background: rgba(80, 220, 140, 1);
  box-shadow: 0 0 6px rgba(80, 220, 140, 0.7);
}
.session-status__btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: rgba(80, 200, 130, 0.15);
  color: rgba(140, 230, 180, 0.95);
  border: 1px solid rgba(80, 200, 130, 0.35);
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 100ms;
}
.session-status__btn:hover { background: rgba(80, 200, 130, 0.25); }
.session-status__btn[data-state="streaming"] {
  background: rgba(220, 100, 90, 0.15);
  color: rgba(255, 160, 150, 0.95);
  border-color: rgba(220, 100, 90, 0.35);
}
.session-status__btn[data-state="streaming"]:hover { background: rgba(220, 100, 90, 0.25); }
.server-finder__label {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(180, 190, 205, 0.7);
}
/* The container is transparent — only the input itself has a background.*/
#server-finder-input {
  flex: 1;
  padding: 8px 10px;
  background: rgba(8, 11, 16, 0.75);
  border: 0;
  border-radius: 6px;
  color: inherit;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  outline: none;
  transition: background 120ms, box-shadow 120ms;
}
#server-finder-input:focus {
  background: rgba(8, 11, 16, 0.92);
  box-shadow: 0 0 0 1px rgba(120, 170, 255, 0.5);
}
#server-finder-input::-webkit-search-cancel-button { filter: invert(0.5); }

.server-finder-dropdown {
  position: absolute;
  left: 80px;            /* line up with the input, past the "SESSIONS" label */
  right: 0;
  top: 100%;             /* touch the input bottom edge */
  z-index: 30;
  max-height: 60vh;
  overflow-y: auto;
  background: rgba(8, 11, 16, 0.97);
  border: 1px solid rgba(120, 170, 255, 0.55);
  border-top: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.server-finder-row {
  display: block;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 80ms;
}
.server-finder-row:last-child { border-bottom: 0; }
.server-finder-row:hover { background: rgba(120, 170, 255, 0.08); }
.server-finder-row__name {
  display: block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  line-height: 1.3;
}
.server-finder-row__meta {
  display: block;
  color: rgba(180, 190, 205, 0.7);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  margin-top: 2px;
  word-break: break-all;
}
.server-finder-row__pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: rgba(80, 200, 130, 0.14);
  color: rgba(140, 230, 180, 0.95);
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 400;
}
.server-finder-row__pill--full {
  background: rgba(220, 100, 90, 0.14);
  color: rgba(255, 160, 150, 0.95);
}

.app-card,
.topbar-card,
.rail-card,
.context-switcher {
  background: linear-gradient(180deg, rgba(20, 27, 38, 0.96), rgba(12, 17, 25, 0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.topbar-card {
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.98), rgba(7, 10, 15, 0.98));
  border-color: rgba(63, 75, 90, 0.5);
}

.rail-card {
  background: linear-gradient(180deg, rgba(38, 42, 47, 0.96), rgba(31, 35, 40, 0.96));
  border-color: rgba(77, 88, 101, 0.55);
}

.context-switcher {
  background: linear-gradient(180deg, rgba(13, 17, 23, 0.98), rgba(10, 13, 19, 0.98));
}

.topbar {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 102px;
  grid-template-columns: var(--left-fixed) max-content minmax(100px, 1fr);
  align-items: center;
  align-content: space-around;
  gap: 10px;
}

.topbar__edge,
.freq-card,
.metric-card {
  min-height: 68px;
}

.topbar__edge {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 2px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
}

.time-card {
  display: grid;
  gap: 4px;
}
.time-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  line-height: 1;
}
.time-row strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.time-row span {
  font-family: "Space Grotesk", sans-serif;
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.time-card p {
  margin: 0;
  padding-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted-2);
  font: 400 0.62rem/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.04em;
}

.freq-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: grid;
  align-items: center;
  justify-self: start;
}

.freq-inline {
  display: grid;
  grid-template-columns: 86px max-content 94px 94px;
  gap: 10px;
  align-items: end;
  min-width: 0;
  justify-content: start;
}

.mode-chip {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(78, 88, 100, 0.58);
  border-radius: 6px;
  background: #080b10;
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.freq-inline__freq,
.inline-step-wrap--band,
.inline-step-wrap--bw,
.inline-step-wrap--step {
  min-width: 0;
  align-self: end;
}

.inline-step-wrap,
.settings-chip__step,
.field,
.mini-control {
  display: grid;
  gap: 4px;
  align-content: end;
}

.inline-step-wrap {
  align-self: end;
  align-content: end;
}

.inline-step-wrap span,
.settings-chip__label,
.field span,
.mini-control span,
.panel-title,
.tool-group h3,
.drawer-group h3 {
  color: var(--muted);
  letter-spacing: 0.05em;
}

.inline-step-wrap span,
.field span,
.mini-control span,
.panel-title {
  text-transform: uppercase;
  font-size: 0.62rem;
  font-weight: 700;
}

.inline-select,
.field select,
.mini-control select,
.field input[type="search"] {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(14, 18, 26, 0.92), rgba(10, 14, 21, 0.98)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23a9b8c9' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 7px;
  padding: 7px 26px 7px 9px;
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.select-shell {
  position: relative;
  display: block;
  align-self: end;
}

.select-shell__chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-60%);
  pointer-events: none;
}

.select-shell__chevron::before,
.select-shell__chevron::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 6px;
  height: 1.5px;
  background: rgba(243, 247, 252, 0.92);
  border-radius: 999px;
}

.select-shell__chevron::before {
  left: 0;
  transform: rotate(45deg);
}

.select-shell__chevron::after {
  right: 0;
  transform: rotate(-45deg);
}

.inline-select--band,
.inline-select--bw,
.inline-select--step {
  font-size: 0.72rem;
  min-height: 34px;
  padding: 6px 26px 6px 12px;
  border-radius: 6px;
  border-color: rgba(79, 90, 104, 0.58);
  background: linear-gradient(180deg, rgba(12, 16, 22, 0.98), rgba(8, 11, 16, 0.98));
  color: #f5f8fd;
  box-shadow: none;
}

.inline-select--step {
  color: #f5f8fd;
}

.tuner-group {
  min-width: 0;
  width: max-content;
  height: auto;
  display: grid;
  grid-template-columns: max-content 70px;
  align-items: end;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.freq-value {
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.freq-number {
  font-family: "Roboto", sans-serif;
  font-size: 2.48rem;
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.045em;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  display: inline-flex;
  align-items: baseline;
}
.freq-number[contenteditable="true"],
.freq-number.is-editing {
  user-select: text;
  cursor: text;
  outline: 1px dashed rgba(120, 170, 255, 0.6);
  outline-offset: 2px;
}

.freq-digit {
  display: inline-block;
  min-width: 0.62em;
  text-align: center;
  cursor: ns-resize;
  border-radius: 4px;
  padding: 0 1px;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.freq-digit:hover {
  background: rgba(38, 201, 245, 0.18);
  color: var(--cyan, #26c9f5);
}
.freq-digit:active {
  transform: translateY(-1px);
  background: rgba(38, 201, 245, 0.32);
}

.freq-sep {
  display: inline-block;
  padding: 0 0.02em;
  color: rgba(207, 232, 255, 0.55);
  pointer-events: none;
}

/* Mode-change pulse: smooth width transition + bright flash on the passband
   marker so the user can't miss that the waterfall reflects the new mode. */
.passband-band {
  transition: left 220ms ease, width 220ms ease, background 220ms ease;
}
.passband-overlay.mode-flash .passband-band {
  animation: pb-mode-flash 600ms ease-out;
}
@keyframes pb-mode-flash {
  0%   {
    background: rgba(var(--pb-rgb), 0.55);
    box-shadow: inset 0 0 0 1px rgba(var(--pb-rgb), 1),
                0 0 22px 6px rgba(var(--pb-rgb), 0.85);
    filter: brightness(1.8);
  }
  100% {
    background: rgba(var(--pb-rgb), 0.18);
    box-shadow: inset 0 0 0 1px rgba(var(--pb-rgb), 0.5),
                0 0 0 0 rgba(var(--pb-rgb), 0);
    filter: brightness(1);
  }
}

.freq-main {
  display: grid;
  gap: 8px;
  padding-left: 2px;
}

.freq-unit-stack {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  min-width: 34px;
}

.freq-mode-inline {
  color: var(--green);
  font-family: "Roboto", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

.freq-unit {
  color: var(--muted);
  font-family: "Roboto", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

.freq-readout-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.freq-accent {
  display: none;
}

.freq-rocker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 70px;
  min-height: 46px;
  background: linear-gradient(180deg, rgba(28, 33, 39, 0.88), rgba(19, 24, 31, 0.96));
  border: 1px solid rgba(77, 87, 100, 0.56);
  border-radius: 6px;
  justify-self: start;
}

.freq-rocker__btn {
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.freq-rocker__btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

.freq-rocker__btn polygon {
  fill: #f3f6fb;
}

.freq-rocker__btn + .freq-rocker__btn {
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.freq-rocker__btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.settings-chip {
  min-height: 58px;
  padding: 5px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: rgba(15, 19, 28, 0.86);
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  align-items: center;
}

.settings-chip__readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.settings-chip__value {
  font-size: 0.68rem;
  font-weight: 700;
}

.settings-chip__label {
  font-size: 0.6rem;
}

/* (Removed) `.telemetry` block — SNR / Power meters used to live in the
   topbar inside a flex .telemetry wrapper; they've been moved into the
   rail and styled via `.context-rail .metric-card …` instead. */
.metric-card header strong,
.metric-card header span,
.metric-card footer small { font-weight: 400; }
.time-card strong, .freq-mode-inline { font-weight: 400; }

.metric-card {
  padding: 10px 14px 8px;
  display: grid;
  gap: 2px;
  background: #06090d;
  border: 1px solid rgba(57, 67, 79, 0.6);
  border-radius: 8px;
  box-shadow: none;
}

.metric-card footer,
.panel-title-row,
.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.metric-card header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.metric-card header span {
  color: #f2f6fb;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  grid-column: 1;
}

.metric-card header strong {
  font-size: 1.28rem;
  line-height: 1;
  grid-column: 2;
  justify-self: center;
  text-align: center;
}

.meter {
  position: relative;
  height: 15px;
  border-radius: 2px;
  overflow: hidden;
  background: #1f242c;
  margin-bottom: 1px;
}

.meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 72%;
}

/* SNR — LED-bar look, multi-stop with a vertical-line mask */
.meter--snr span {
  width: 0%;
  background:
    linear-gradient(
      90deg,
      #1cff43 0%,
      #4bff29 46%,
      #d9ff25 70%,
      #ffe94a 84%,
      #ffb440 92%,
      #ff1f4f 100%
    );
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 10px);
  mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 10px);
}

.meter--power span {
  width: 50%;
  background: linear-gradient(90deg, #27c8ff 0%, #3ec8ff 100%);
}

.metric-card footer {
  gap: 8px;
  color: #f1f4f8;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 0;
  padding-top: 1px;
  transform: none;
}

.metric-card--tx-power {
  display: none;
}

.app-shell.mode-transmit .metric-card--snr {
  display: none;
}

.app-shell.mode-transmit .metric-card--tx-power {
  display: grid;
}

.workspace {
  display: grid;
  grid-template-columns: var(--rail-width) 1fr;
  gap: var(--gutter);
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  /* Inherit the 1fr row from .app-shell so display-panel can be height:100% */
  min-height: 0;
  height: 100%;
}
.workspace .display-panel { min-height: 0; order: 1; }
.workspace .context-rail  {
  order: 0;
  min-height: 0;
  height: 100%;
  /* Sidebar itself never scrolls — each open section's card scrolls
     inside itself. */
  overflow: hidden;
  position: sticky;
  top: 0;
  align-self: stretch;
  background: var(--rail-bg);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Rail section — <details>-based accordion. Each section gets a distinct
   accent stripe on the left so the user can tell them apart. Click the
   header to collapse/expand. The originally-requested sections (Signal,
   Power, Mode, Audio, AGC) are open by default in markup. */
.rail-section {
  --accent: var(--cyan);
  background: rgba(13, 17, 23, 0.55);
  border-left: 3px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  overflow: hidden;
  /* Closed = header only. Open sections grow with natural size; if the
     total exceeds the rail height every OPEN section shrinks
     proportionally and its card handles internal scroll. */
  flex: 0 1 auto;
  min-height: 28px; /* never smaller than the header */
}
.rail-section[open] {
  border-left-color: var(--accent);
  /* Grid (rather than flex column) reliably constrains the card to the
     space remaining below the summary, so its overflow-y:auto actually
     scrolls instead of overflowing the section's height allocation. */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
/* Always-open Signal/Power/Mode want their natural content size and
   should be the first to shrink (with internal scroll) when the rail
   gets tight. */
.rail-section[open]:not([data-accordion]) { flex: 0 1 auto; }
/* The currently-open accordion-extra section takes whatever is left
   over and is guaranteed at least 120 px so its internal scroll is
   actually usable. Other open sections shrink (with their own internal
   scroll) to make room if the rail can't fit everyone. */
.rail-section[data-accordion="extra"][open] {
  flex: 1 1 0;
  min-height: 120px;
}
.rail-section[data-accent="cyan"]   { --accent: #26c9f5; }
.rail-section[data-accent="green"]  { --accent: #54ff78; }
.rail-section[data-accent="amber"]  { --accent: #f5b458; }
.rail-section[data-accent="violet"] { --accent: #aa78ff; }
.rail-section[data-accent="blue"]   { --accent: #6aa3ff; }
.rail-section[data-accent="red"]    { --accent: #ff6b74; }

.rail-section__title {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px 8px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font: 600 0.74rem/1 "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.7);
  user-select: none;
}
.rail-section[open] > .rail-section__title { color: var(--accent); }
.rail-section__title::-webkit-details-marker { display: none; }
.rail-section__title::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-bottom: 1px;
  transition: transform 160ms ease;
  opacity: 0.55;
}
.rail-section[open] > .rail-section__title::after {
  transform: rotate(225deg);
  margin-bottom: -1px;
  opacity: 0.85;
}
.rail-section > .rail-card {
  padding: 8px 10px 10px;
  display: grid;
  gap: 8px;
  background: rgba(7, 10, 14, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Each open section's card grows to fill its allotted rail space and
   scrolls inside itself. Rail has overflow: hidden — no rail scrollbar.
   max-height + height pin force the card to the grid-track size so its
   own display:grid content doesn't expand past the section's allocation.
   `align-content: start` keeps controls top-aligned (so a half-filled
   card doesn't stretch its rows to fill the section). `overflow-y: auto`
   auto-shows the scrollbar only when content actually overflows. */
.rail-section[open] > .rail-card {
  min-height: 0;
  max-height: 100%;
  height: 100%;
  overflow-y: auto;
  align-content: start;
}

/* Themed scrollbar so the auto-shown bar is visible against the dark
   rail. WebKit + Firefox both covered. */
.rail-section[open] > .rail-card {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.rail-section[open] > .rail-card::-webkit-scrollbar         { width: 8px; }
.rail-section[open] > .rail-card::-webkit-scrollbar-track   { background: transparent; }
.rail-section[open] > .rail-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.rail-section[open] > .rail-card::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
  background-clip: padding-box;
}

/* Pill groups inside the narrow rail use short labels (with title= tooltips
   for the full name) so they stay on a single row. */
.rail-section .audio-actions,
.rail-section .audio-actions--audio {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.rail-section .audio-actions .choice-pill {
  flex: 1 1 0;
  min-height: 32px;
  padding: 6px 8px;
  font-size: 0.78rem;
  white-space: nowrap;
  text-align: center;
}

/* SNR + Power meters live in the rail now, stacked, full width. */
.context-rail .metric-card {
  background: rgba(13, 17, 23, 0.6);
  border-radius: 6px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
  min-height: 0;
}
.context-rail .metric-card + .metric-card { margin-top: 8px; }
.context-rail .metric-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 600 0.72rem/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.context-rail .metric-card header strong {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: -0.02em;
}
.context-rail .metric-card .meter {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.context-rail .metric-card .meter span {
  display: block;
  height: 100%;
  width: 0%;
}
.context-rail .metric-card footer {
  display: flex;
  justify-content: space-between;
  gap: 0;
  font: 600 0.58rem/1 "JetBrains Mono", monospace;
  color: var(--muted-2);
  padding-top: 1px;
}
/* Override the topbar-only display: none on the power card. */
.context-rail .metric-card--tx-power { display: grid; }

/* Always-on full-width layout. The static design used fixed widths
   (var(--display-width) = 1064 px etc); we override all of them so the
   workspace fills the entire viewport. ↔ dock button still toggles the
   right rail on top of this. */
.app-shell .topbar,
.app-shell .display-panel,
.app-shell .waterfall-stage,
.app-shell .signal-map,
.app-shell .scale-panel,
.app-shell .display-header,
.app-shell .statusbar {
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-self: stretch;
}
.app-shell .display-panel { grid-template-columns: 1fr; }
/* ↔ dock button still hides the right rail on top of this */
.app-shell.is-fullwidth .workspace { grid-template-columns: var(--rail-width) 1fr; }
.app-shell.is-fullwidth .context-rail { display: flex; }

/* Locked state — disable drag/wheel interactions on the waterfall. */
.app-shell.is-locked .waterfall-surface canvas { cursor: not-allowed; }

.display-panel {
  padding: 0;
  width: var(--display-width);
  min-width: var(--display-width);
  /* Use flex column so .waterfall-stage's flex: 1 1 auto can fill the
     remaining height between display-header / scale-panel / statusbar. */
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  min-height: 0;
}

.display-header {
  overflow: visible;
  width: var(--waterfall-width);
  justify-self: center;
  padding-top: 0;
}

.signal-map {
  position: relative;
  height: 156px;
  overflow: visible;
  padding-top: 0;
  background: var(--rail-bg);
  border-radius: 6px;
}

.station-node {
  position: absolute;
  left: var(--x);
  bottom: 0;
  transform: translateX(-50%);
  width: max-content;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f1f4f7;
}

.station-node::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 2px;
  height: calc(var(--label-bottom) - 18px);
  background: rgba(248, 136, 140, 0.86);
  border-radius: 999px;
}

.station-node::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(248, 136, 140, 0.96);
  box-shadow: 0 0 0 2px rgba(248, 136, 140, 0.14);
}

.station-node--purple::after {
  background: rgba(164, 100, 255, 0.9);
}

.station-node--purple::before {
  background: rgba(164, 100, 255, 0.98);
  box-shadow: 0 0 0 2px rgba(164, 100, 255, 0.14);
}

.station-node--soft::after,
.station-node--soft::before {
  background: rgba(255, 151, 151, 0.96);
  box-shadow: 0 0 0 2px rgba(255, 151, 151, 0.12);
}

.station-stack {
  position: absolute;
  left: 50%;
  bottom: var(--label-bottom);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 4px;
}

.station-node--elbow-right .station-stack {
  left: calc(50% + var(--shift, 16px));
}

.station-node--elbow-right .station-stack::before {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -6px;
  width: var(--shift, 16px);
  height: 2px;
  background: rgba(248, 136, 140, 0.86);
  border-radius: 999px;
}

.station-node--purple.station-node--elbow-right .station-stack::before {
  background: rgba(164, 100, 255, 0.9);
}

.station-node--soft.station-node--elbow-right .station-stack::before {
  background: rgba(255, 151, 151, 0.96);
}

.station-card,
.station-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 10px;
  border-radius: 7px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.station-card {
  border: 1px solid rgba(255, 128, 128, 0.55);
  background: rgba(14, 16, 19, 0.96);
  color: #ff9b9b;
  box-shadow: inset 0 0 0 1px rgba(255, 128, 128, 0.08);
}

.station-sub {
  border: 0;
  background: rgba(252, 139, 144, 0.96);
  color: #17191d;
  padding-inline: 8px;
}

.station-node--purple .station-card {
  border-color: rgba(214, 219, 227, 0.4);
  color: #f3f6f8;
}

.station-node--purple .station-sub {
  background: rgba(125, 60, 222, 0.96);
  color: #f4f2ff;
}

.station-node--soft .station-sub {
  background: rgba(255, 151, 151, 0.96);
}

.station-node--stack {
  gap: 5px;
}

.station-node--stack .station-sub:first-child {
  margin-bottom: -2px;
}

.station-node[style*="--row: 1"] {
  --label-bottom: 34px;
}

.station-node[style*="--row: 2"] {
  --label-bottom: 48px;
}

.station-node[style*="--row: 3"] {
  --label-bottom: 62px;
}

.station-node[style*="--row: 4"] {
  --label-bottom: 76px;
}

.station-node[style*="--row: 5"] {
  --label-bottom: 90px;
}

.station-node[style*="--row: 6"] {
  --label-bottom: 104px;
}

.station-node[style*="--row: 7"] {
  --label-bottom: 118px;
}

.station-node[style*="--row: 8"] {
  --label-bottom: 132px;
}

.scale-panel {
  position: relative;
  padding: 0 4px 0;
  width: var(--waterfall-width);
  justify-self: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.scale-panel__labels,
.scale-panel__ticks {
  display: grid;
  grid-template-columns: repeat(21, minmax(0, 1fr));
  gap: 8px;
}

.scale-panel__labels {
  color: #e8edf5;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.66rem;
  letter-spacing: -0.04em;
}

.scale-panel__labels span {
  text-align: center;
  white-space: nowrap;
}

.scale-panel__labels .scale-marker {
  color: var(--cyan);
  font-weight: 700;
}

.scale-panel__ticks {
  margin-top: 8px;
  align-items: end;
  height: 18px;
}

.scale-panel__ticks::before,
.scale-panel__ticks::after,
.scale-panel__ticks span {
  content: "";
}

.scale-panel__ticks--dense {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent calc((100% - 20px) / 20)
    );
  background-size: 100% 24px;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.waterfall-stage {
  position: relative;
  width: var(--waterfall-width);
  /* Was a hard 610 px floor; now we let the stage shrink to fill whatever
     vertical space the workspace gives it — that way the bottom dock and
     the statusbar fit in one viewport on common laptop sizes (16" MBP). */
  flex: 1 1 auto;
  /* Allow the passband-overlay triangle to stick up into the freq ruler
     area; the canvas is still clipped by .waterfall-surface above it. */
  min-height: 320px;
  border-radius: 0;
  overflow: visible;
  background: #04080d;
  border: 0;
  justify-self: center;
}

.waterfall-surface {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
}

/* ── LO / Triangle / HI passband overlay ─────────────────────────────────
   Sits on top of the waterfall canvas. Drag the band (or triangle) to
   retune the audio; drag the LO / HI edges to widen / narrow the filter.
   Tooltips on each handle expose the numeric offsets. */
.passband-overlay {
  position: absolute;
  /* Sibling of .waterfall-surface inside .waterfall-stage. Stretch from
     20 px above the surface (into the freq ruler area) down to the very
     bottom of the stage — the band slides under the bottom icon dock. */
  inset: -20px 0 0 0;
  pointer-events: none;
  /* Above the canvas, below the bottom-dock (z-index 2). */
  z-index: 1;
  --pb-lo: 49%;
  --pb-hi: 51%;
  --pb-center: 50%;
  /* Marker color is settable from the Display settings popup. The default
     is the app accent (cyan). Other selectors below read these via rgba(). */
  --pb-rgb: 38, 201, 245;
  --pb-color: rgb(var(--pb-rgb));
}
.passband-band {
  position: absolute;
  /* Start at the top of the triangle (its wide base sits at top:2 inside
     the overlay) and run all the way down. Slides under the bottom dock
     via z-index. */
  top: 2px;
  bottom: 0;
  left: var(--pb-lo);
  width: calc(var(--pb-hi) - var(--pb-lo));
  background: rgba(var(--pb-rgb), 0.18);
  box-shadow: inset 0 0 0 1px rgba(var(--pb-rgb), 0.5);
  /* Purely visual — the triangle + LO/HI thin edges are the drag handles.
     Letting the band catch clicks ate the waterfall's pan drag. */
  pointer-events: none;
}
.passband-band:active,
.passband-triangle:active { cursor: grabbing; }
.passband-edge {
  position: absolute;
  top: 2px;
  bottom: 0;
  width: 12px;
  margin-left: -6px;
  pointer-events: auto;
  cursor: ew-resize;
  z-index: 1;
}
.passband-edge::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(var(--pb-rgb), 0.95);
  box-shadow: 0 0 8px rgba(var(--pb-rgb), 0.55);
  transform: translateX(-50%);
  border-radius: 999px;
}
.passband-edge--lo { left: var(--pb-lo); }
.passband-edge--hi { left: var(--pb-hi); }

/* When the receiver's audio bandwidth is wider than the visible waterfall
   span (zoomed in past the passband width), pin the edge line to the
   canvas edge and add an outward-pointing chevron so the user knows the
   passband continues past the visible spectrum. */
.passband-overlay--lo-clip .passband-edge--lo::before,
.passband-overlay--hi-clip .passband-edge--hi::before {
  content: '';
  position: absolute;
  top: 12px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--pb-color);
  border-right: 2px solid var(--pb-color);
  filter: drop-shadow(0 0 4px rgba(var(--pb-rgb), 0.5));
}
.passband-overlay--lo-clip .passband-edge--lo::before {
  left: 4px;
  transform: rotate(-135deg);
}
.passband-overlay--hi-clip .passband-edge--hi::before {
  right: 4px;
  transform: rotate(45deg);
}

.passband-triangle {
  position: absolute;
  /* Sit ~20 px above the waterfall (= right under the freq ruler labels);
     tip points down at the carrier freq on the canvas. */
  top: 2px;
  left: var(--pb-center);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 18px solid var(--pb-color);
  filter: drop-shadow(0 0 10px rgba(var(--pb-rgb), 0.85));
  pointer-events: auto;
  cursor: grab;
  z-index: 5;
}
.passband-band {
  /* Make sure the connecting band stays visible even for very narrow
     filters (CW at zoom 8 is ~0.3% of the span). */
  min-width: 3px;
}
.passband-readout {
  position: absolute;
  top: 22px;
  left: var(--pb-center);
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(8, 11, 16, 0.86);
  border: 1px solid rgba(var(--pb-rgb), 0.45);
  color: var(--pb-color);
  font: 600 11px/1.1 "JetBrains Mono", monospace;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.passband-overlay.is-dragging .passband-readout { opacity: 1; }

.waterfall-surface__grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(34, 201, 247, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(34, 201, 247, 0.04) 1px, transparent 1px);
  background-size: 126px 100%, 100% 90px;
  mix-blend-mode: screen;
  opacity: 0.18;
}

.waterfall-surface__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.waterfall-surface__lines--a {
  background:
    linear-gradient(90deg, transparent 10%, rgba(255, 72, 72, 0.16) 10.2%, transparent 10.7%, transparent 22%, rgba(255, 196, 72, 0.12) 22.2%, transparent 22.7%, transparent 49%, rgba(96, 241, 255, 0.12) 49.2%, transparent 49.8%, transparent);
}

.waterfall-surface__lines--b {
  background:
    linear-gradient(90deg, transparent 60%, rgba(80, 255, 134, 0.1) 60.2%, transparent 60.7%, transparent 76%, rgba(255, 83, 83, 0.12) 76.2%, transparent 76.7%, transparent);
}

.waterfall-surface__lines--c {
  background:
    radial-gradient(circle at 40% 36%, rgba(48, 198, 245, 0.16), transparent 14%),
    radial-gradient(circle at 77% 18%, rgba(74, 240, 180, 0.12), transparent 18%);
  mix-blend-mode: screen;
}

.display-drawer-wrap {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: min(286px, calc(100% - 28px));
  display: grid;
  gap: 0;
}

.display-drawer-wrap.is-collapsed .display-drawer,
.display-drawer-wrap.is-collapsed .panel-title-row--drawer {
  display: none;
}

.panel-title-row {
  gap: 10px;
  margin-bottom: 2px;
}

.panel-title-row--drawer {
  padding: 10px 12px 4px;
  background: var(--ref-panel);
  border-radius: 10px 10px 0 0;
  justify-content: flex-end;
}

.section-action,
.results-pill,
.drawer-pill,
.drawer-expand,
.choice-pill,
.tool-btn,
.dock-btn {
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: rgba(49, 53, 58, 0.98);
  color: var(--text);
}

.section-action,
.results-pill {
  padding: 5px 8px;
  font-size: 0.78rem;
}

.section-action,
.results-pill {
  background: rgba(12, 16, 22, 0.98);
}

.display-drawer {
  padding: 8px 12px 12px;
  border-radius: 0 0 10px 10px;
  background: var(--ref-panel);
  border: 0;
  display: grid;
  gap: 8px;
}

.display-drawer .mini-control select,
.display-drawer .field select,
.display-drawer .field input[type="search"] {
  border: 0;
  background: linear-gradient(180deg, var(--ref-panel-soft), var(--ref-panel-soft-2));
  color: #f1f4f6;
  box-shadow: none;
  min-height: 28px;
  padding: 4px 20px 4px 7px;
  font-size: 0.72rem;
  border-radius: 5px;
}

.display-drawer .drawer-pill,
.display-drawer .drawer-expand {
  border: 0;
  background: linear-gradient(180deg, var(--ref-panel-soft), var(--ref-panel-soft-2));
  color: #f1f4f6;
  box-shadow: none;
  min-height: 28px;
  padding: 5px 6px;
  font-size: 0.72rem;
}

.display-drawer .drawer-pill--active {
  background: var(--ref-active);
  color: #17d9ff;
}

.display-drawer .drawer-group h3,
.panel-title-row--drawer .panel-title {
  color: #f1f3f5;
}

.panel-title-row--drawer .panel-title {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.drawer-close {
  min-height: 28px;
  padding: 5px 10px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--ref-panel-soft), var(--ref-panel-soft-2));
  color: #f1f4f6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.display-drawer .mini-control span,
.display-drawer .drawer-group h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.range-stack {
  display: grid;
  gap: 4px;
  align-content: end;
}

.range-stack strong {
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 600;
}

.mini-control.is-disabled span,
.mini-control.is-disabled strong {
  color: rgba(190, 198, 210, 0.48);
}

.range-stack input[type="range"],
.audio-range {
  --range-pct: 50%;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--cyan) 0 var(--range-pct), #3b4045 var(--range-pct) 100%);
  outline: none;
}

.mini-control.is-disabled .range-stack input[type="range"],
.mini-control.is-disabled .audio-range {
  background:
    linear-gradient(90deg, rgba(124, 132, 142, 0.45) 0 var(--range-pct), #34383d var(--range-pct) 100%);
}

.range-stack input[type="range"]::-webkit-slider-runnable-track,
.audio-range::-webkit-slider-runnable-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.range-stack input[type="range"]::-webkit-slider-thumb,
.audio-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #eef1f4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.mini-control.is-disabled .range-stack input[type="range"]::-webkit-slider-thumb,
.mini-control.is-disabled .audio-range::-webkit-slider-thumb {
  background: rgba(214, 220, 227, 0.72);
}

.range-stack input[type="range"]::-moz-range-track,
.audio-range::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #3b4045;
}

.range-stack input[type="range"]::-moz-range-progress,
.audio-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
}

.mini-control.is-disabled .range-stack input[type="range"]::-moz-range-progress,
.mini-control.is-disabled .audio-range::-moz-range-progress {
  background: rgba(124, 132, 142, 0.45);
}

.range-stack input[type="range"]::-moz-range-thumb,
.audio-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: #eef1f4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.mini-control.is-disabled .range-stack input[type="range"]::-moz-range-thumb,
.mini-control.is-disabled .audio-range::-moz-range-thumb {
  background: rgba(214, 220, 227, 0.72);
}

.drawer-summary,
.drawer-grid {
  display: grid;
  gap: 8px;
  align-items: end;
}

.stepper {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 8px;
  align-items: center;
}

.stepper button,
.dock-btn {
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.stepper strong {
  text-align: center;
  color: var(--cyan);
  font-size: 0.96rem;
}

.drawer-group {
  display: grid;
  gap: 6px;
}

.drawer-group h3,
.tool-group h3 {
  margin: 0;
  font-size: 0.74rem;
  text-transform: uppercase;
}

.drawer-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.drawer-pill,
.drawer-expand,
.choice-pill,
.tool-btn {
  padding: 6px 8px;
}

.drawer-pill--active,
.choice-pill.is-active,
.context-tab.is-active {
  color: var(--green);
  border-color: rgba(84, 255, 120, 0.28);
  box-shadow: inset 0 0 0 1px rgba(84, 255, 120, 0.06);
}

.drawer-expand {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-advanced {
  display: none;
}

.drawer-advanced.is-open {
  display: grid;
  gap: 12px;
}

.bottom-dock {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(14, 18, 26, 0.88);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(10px);
}

.dock-btn {
  min-width: 38px;
  padding-inline: 8px;
  font-size: 0.92rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.dock-btn--active,
.dock-btn.is-active {
  color: #f2d478;
  box-shadow: inset 0 0 0 1px rgba(242, 212, 120, 0.18);
}

.bottom-dock .dock-btn {
  min-width: 42px;
  font-size: 1.48rem;
}

/* ── PLAY / STOP session toggle in the dock ── */
/* Bright green when stopped (PLAY visible), bright red when running
   (STOP visible). Keeps the START / STOP SESSION color scheme. */
.dock-btn--session {
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  color: #0a0e14;
  background: var(--green);
  box-shadow: 0 0 0 1px rgba(84, 255, 120, 0.3), 0 0 14px rgba(84, 255, 120, 0.25);
  transition: background 120ms, box-shadow 120ms, transform 80ms;
}
.dock-btn--session[data-state="running"] {
  background: var(--danger);
  color: #1a0507;
  box-shadow: 0 0 0 1px rgba(255, 107, 116, 0.32), 0 0 14px rgba(255, 107, 116, 0.3);
}
.dock-btn--session:hover { transform: translateY(-1px); }
.dock-btn--session:active { transform: translateY(0); }
.dock-btn--session.is-active { box-shadow: 0 0 0 1px rgba(84, 255, 120, 0.3), 0 0 14px rgba(84, 255, 120, 0.25); color: #0a0e14; }
.dock-btn--session[data-state="running"].is-active { box-shadow: 0 0 0 1px rgba(255, 107, 116, 0.32), 0 0 14px rgba(255, 107, 116, 0.3); color: #1a0507; }

.dock-icon { width: 22px; height: 22px; fill: currentColor; }
/* Stopped → PLAY icon visible; Running → STOP icon visible. */
.dock-btn--session .dock-icon--stop { display: none; }
.dock-btn--session[data-state="running"] .dock-icon--play { display: none; }
.dock-btn--session[data-state="running"] .dock-icon--stop { display: block; }

.bottom-dock .dock-btn:nth-child(-n + 3) {
  min-width: 46px;
  font-size: 1.96rem;
}

.bottom-dock .dock-btn--gear {
  min-width: 42px;
  padding: 0;
}

.bottom-dock .dock-btn--gear svg {
  width: 24px;
  height: 24px;
}

.bottom-dock .dock-btn--gear path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dock-btn--lock {
  display: grid;
  place-items: center;
  padding: 0;
}

.dock-btn--lock svg {
  width: 16px;
  height: 16px;
  overflow: visible;
}

.dock-btn--lock path,
.dock-btn--lock rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.statusbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 0.68rem;
  width: var(--waterfall-width);
  justify-self: center;
}

.context-rail {
  display: grid;
  gap: 10px;
  min-width: 0;
  width: var(--rail-width);
}

.context-switcher {
  padding: 5px;
  display: grid;
  grid-template-columns: max-content max-content 1fr 1fr;
  gap: 2px 4px;
  align-items: center;
}

.context-tab {
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.context-tab.is-active {
  background: rgba(38, 201, 245, 0.18);
  color: var(--text);
}

.context-view {
  display: none;
  gap: 12px;
}

.context-view.is-active {
  display: grid;
}

.panel-block {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  background: var(--ref-panel);
  border: 0;
}

.panel-block--grow,
.rail-card--grow {
  min-height: 100%;
}

.rail-card {
  padding: 0;
  display: grid;
  gap: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.choice-pills,
.tools-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.choice-pills--mode {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.choice-pills--filter {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choice-pill,
.tool-btn,
.drawer-pill,
.drawer-expand {
  min-height: 28px;
  min-width: 0;
  border: 0;
  font-size: 0.78rem;
  background: linear-gradient(180deg, var(--ref-panel-soft), var(--ref-panel-soft-2));
  color: #f1f4f6;
  box-shadow: none;
  align-self: end;
}

.choice-pills--mode .choice-pill {
  min-height: 28px;
  padding: 4px 3px;
  font-size: 0.7rem;
  white-space: nowrap;
}

.choice-pills--filter .choice-pill {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.panel-title {
  color: #f1f3f5;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.section-action {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: transparent;
  font-size: 0;
  position: relative;
}

.section-action::before {
  content: "⚙";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f6f7f8;
  font-size: 1.75rem;
  line-height: 1;
}

.choice-pill.is-active {
  background: var(--ref-active);
  color: #17d9ff;
  border-color: transparent;
  box-shadow: none;
}

.choice-pill.is-disabled {
  background: linear-gradient(180deg, rgba(42, 45, 48, 0.86), rgba(34, 37, 40, 0.86));
  color: rgba(190, 198, 210, 0.48);
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.choice-pills--mode .choice-pill.is-active {
  background: rgba(84, 255, 120, 0.18);
  color: #62ff83;
  box-shadow: inset 0 0 0 1px rgba(84, 255, 120, 0.55);
  font-weight: 700;
}

.field input[type="search"] {
  padding-right: 18px;
  background-image: none;
}

.range-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.range-row span {
  font-size: 0.68rem;
}

.range-row strong {
  font-size: 0.68rem;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--cyan);
}

.range-row--audio {
  grid-template-columns: auto 1fr auto;
  gap: 10px;
}

.audio-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}

.audio-actions--record {
  grid-template-columns: 112px 120px;
  gap: 4px;
}

.audio-actions--secondary,
.audio-actions--tertiary {
  margin-top: 0;
}

.audio-actions--audio {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.audio-actions .choice-pill {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 0.74rem;
  white-space: nowrap;
}

.record-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding-inline: 6px;
  color: #ff9d9d;
  background: linear-gradient(180deg, rgba(42, 28, 28, 0.96), rgba(33, 25, 25, 0.98));
  align-self: stretch;
}

.record-toggle.is-active {
  color: #ffe1e1;
  background: linear-gradient(180deg, rgba(118, 28, 28, 0.98), rgba(88, 20, 20, 1));
}

.record-toggle__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6666;
  box-shadow: 0 0 0 2px rgba(255, 102, 102, 0.12);
}

.record-toggle__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.record-format {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  align-self: stretch;
}

.choice-pill--record {
  align-self: stretch;
  min-height: 28px;
  padding: 3px 4px;
  font-size: 0.68rem;
  color: #d9e6f2;
  background: linear-gradient(180deg, rgba(38, 39, 40, 0.98), rgba(31, 33, 34, 0.98));
}

.choice-pill--record.is-active {
  background: linear-gradient(180deg, rgba(24, 76, 91, 0.98), rgba(16, 58, 69, 1));
  color: #72eeff;
}

.audio-extra-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.audio-extra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.audio-extra-group {
  display: grid;
  gap: 8px;
}

.audio-extra-grid--agc {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-control-title {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #aeb9cb;
}

.audio-extra-panel .mini-control span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.choice-pill--icon {
  display: grid;
  place-items: center;
  padding: 0;
}

.choice-pill--icon svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.audio-icon .mute-icon--off {
  display: none;
}

.audio-icon.is-active .mute-icon--on {
  display: none;
}

.audio-icon.is-active .mute-icon--off {
  display: block;
}

.choice-pill--icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choice-pill--icon path:first-child {
  fill: currentColor;
  stroke: currentColor;
}

.choice-pill--icon circle {
  fill: currentColor;
}

.audio-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.audio-icon--button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f1f4f8;
  cursor: pointer;
}

.audio-icon svg {
  width: 20px;
  height: 20px;
  overflow: visible;
}

.audio-icon path {
  fill: none;
  stroke: #f1f4f8;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audio-icon path:first-child {
  fill: #f1f4f8;
  stroke: #f1f4f8;
}

.session-list {
  display: grid;
  gap: 10px;
}

.session-item {
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.session-item strong {
  display: block;
  margin-bottom: 4px;
}

.session-item p {
  margin: 0;
  color: var(--muted);
}

.session-item span {
  color: var(--cyan);
  font-weight: 700;
}

.tools-grid--wide .tool-btn {
  flex: 1 1 calc(50% - 12px);
}

/* ── Display settings panel (opened from the dock gear) ─────────────────
   Floating overlay positioned above the waterfall surface. Vertical
   content scrolls inside its body so the panel never grows past the
   waterfall stage. Click-outside / Escape / X all close it. */
.settings-panel {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  width: min(320px, calc(100% - 28px));
  max-height: calc(100% - 92px); /* leave room for the bottom dock */
  display: flex;
  flex-direction: column;
  background: rgba(14, 18, 26, 0.95);
  border: 1px solid rgba(63, 75, 90, 0.7);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  color: var(--text);
}
.settings-panel[hidden] { display: none; }

.settings-panel__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.settings-panel__title {
  margin: 0;
  font: 700 0.78rem/1 "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
}
.settings-panel__close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: rgba(220, 226, 235, 0.7);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.settings-panel__close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.settings-panel__close svg { width: 16px; height: 16px; }

/* Body owns the vertical scroll. */
.settings-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Themed scrollbar so it's visible on dark bg. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.settings-panel__body::-webkit-scrollbar         { width: 8px; }
.settings-panel__body::-webkit-scrollbar-track   { background: transparent; }
.settings-panel__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Section grouping inside the panel. */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-group__title {
  margin: 0 0 2px;
  font: 600 0.66rem/1 "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.setting-row {
  display: grid;
  grid-template-columns: 84px 1fr 56px;
  align-items: center;
  gap: 10px;
  font: 400 0.78rem/1.1 Roboto, sans-serif;
}
.setting-row__label { color: rgba(220, 226, 235, 0.85); }
.setting-row__value {
  font: 600 0.72rem/1 "JetBrains Mono", monospace;
  text-align: right;
  color: var(--cyan);
}
.setting-row > select,
.setting-row__select {
  width: 100%;
  padding: 6px 8px;
  background: rgba(8, 11, 16, 0.7);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 0.78rem;
}
.setting-row > select:focus,
.setting-row__select:focus {
  outline: none;
  border-color: rgba(38, 201, 245, 0.55);
}
.setting-row > input[type="range"] {
  width: 100%;
}
.setting-row:has(select) { grid-template-columns: 84px 1fr; }
.setting-row:has(select) .setting-row__value { display: none; }

.setting-btn {
  align-self: flex-start;
  padding: 7px 12px;
  background: rgba(8, 11, 16, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: var(--text);
  font: 600 0.74rem/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.setting-btn:hover { background: rgba(255, 255, 255, 0.06); }
.setting-btn.is-active {
  background: rgba(38, 201, 245, 0.15);
  border-color: rgba(38, 201, 245, 0.55);
  color: var(--cyan);
}

/* Checkbox row — ON/OFF state pill, matches the rail's visual language. */
.check-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
  font: 400 0.78rem/1.1 Roboto, sans-serif;
  color: rgba(220, 226, 235, 0.9);
  cursor: pointer;
  user-select: none;
}
.check-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: rgba(8, 11, 16, 0.7);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background 120ms, border-color 120ms;
}
.check-row input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: scale(0);
  transition: transform 120ms;
  background: var(--cyan);
  border-radius: 2px;
}
.check-row input[type="checkbox"]:checked {
  border-color: rgba(38, 201, 245, 0.65);
  background: rgba(38, 201, 245, 0.12);
}
.check-row input[type="checkbox"]:checked::before { transform: scale(1); }
.check-row__state {
  font: 600 0.66rem/1 "Space Grotesk", sans-serif;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.35);
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  min-width: 32px;
  text-align: center;
}
.check-row:has(input:checked) .check-row__state {
  color: var(--cyan);
  border-color: rgba(38, 201, 245, 0.45);
  background: rgba(38, 201, 245, 0.08);
}

/* Rail entry that acts as a button (opens a popup instead of expanding).
   Visually identical to a closed accordion section — inherits .rail-section
   for the border/background, and re-uses .rail-section__title for the
   header text + down-chevron. Only the <button>-specific resets here. */
.rail-section--link {
  width: 100%;
  background: rgba(13, 17, 23, 0.55);
  /* .rail-section already sets border-left + border-radius; keep the other
     button-default borders off so the box matches. */
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}