/* =========================================================================
   GIGA-GLOSSARY — RADIO THEME
   A sibling of Kosmic on the same engine: app.js is untouched. Where Kosmic
   shows nine voices at once, arranged, the Radio holds ONE address at a time
   and keeps everything generated receivable as a station. Still
   multi-perspectival — serially rather than simultaneously.

   Everything is scoped to [data-theme="radio"].
   ========================================================================= */

[data-theme="radio"] {
  --bg: #08090c;
  --ink: #05070a;
  --panel: #0c0f14;
  --panel-2: #12141a;
  --panel-3: #0a0c11;
  --panel-4: #0b0d12;
  --panel-5: #12151c;
  --panel-6: #1a1d24;
  --panel-7: #0f1217;
  --field: #15181f;
  --skel: #1e222b;
  --band-off: #161a21;
  --line: #23262f;
  --line-soft: #1c2028;
  --line-2: #1f232c;
  --line-3: #262a34;
  --line-4: #2b303c;
  --line-5: #272b35;
  --line-6: #2f3440;
  --line-7: #333947;
  --grey-1: #3a4050;
  --grey-2: #4a5162;
  --grey-3: #4d515f;
  --grey-4: #7c8093;
  --grey-5: #8b8fa0;
  --ghost: #5d616f;
  --faint: #6f7285;
  --dim: #8d90a3;
  --label: #9ea1b2;
  --muted: #a5a7b8;
  --text: #e9e7f0;
  --text-2: #cfd0dc;
  --text-3: #c8c9d6;
  --text-4: #e2e0ea;
  --text-5: #f2f0f7;
  --text-6: #d8d5e4;
  --text-7: #b9b6c8;
  --text-hi: #f4f2f9;
  --accent: #9be3dd;
  --accent-hi: #c9f2ee;
  --sel-fg: #ffffff;
  --warn-fg: #e8a094;
  --warn-bd: #6e3b34;
  --warn-tx: #c8b3ae;
  --scrim: 8, 9, 12;

  --bg: #08090c;
  --panel: #0c0f14;
  --panel-2: #12151c;
  --ink: #05070a;
  --line: #23262f;
  --line-soft: #1c2028;
  --text: #e9e7f0;
  --muted: #a5a7b8;
  --dim: #8d90a3;
  /* --faint and --ghost are body-text tones. Every label in the console is
     7-10px letterspaced uppercase mono, where they measure 3.1-4.2:1 — the
     same miss already corrected on the threshold. --label is what small type
     uses; the old two stay for anything at body size. */
  --faint: #6f7285;
  --ghost: #5d616f;
  --label: #9ea1b2;
  --accent: #9be3dd;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* the tuned altitude's colour, set on .console as an inline custom property
   by giga-radio-view.js — every lit element reads it from here */
[data-theme="radio"].console,
[data-theme="radio"].console, [data-theme="radio"] .console {
  --alt: var(--accent);
  --bg: #08090c;
  --ink: #05070a;
  --panel: #0c0f14;
  --panel-2: #12141a;
  --panel-3: #0a0c11;
  --panel-4: #0b0d12;
  --panel-5: #12151c;
  --panel-6: #1a1d24;
  --panel-7: #0f1217;
  --field: #15181f;
  --skel: #1e222b;
  --band-off: #161a21;
  --line: #23262f;
  --line-soft: #1c2028;
  --line-2: #1f232c;
  --line-3: #262a34;
  --line-4: #2b303c;
  --line-5: #272b35;
  --line-6: #2f3440;
  --line-7: #333947;
  --grey-1: #3a4050;
  --grey-2: #4a5162;
  --grey-3: #4d515f;
  --grey-4: #7c8093;
  --grey-5: #8b8fa0;
  --ghost: #5d616f;
  --faint: #6f7285;
  --dim: #8d90a3;
  --label: #9ea1b2;
  --muted: #a5a7b8;
  --text: #e9e7f0;
  --text-2: #cfd0dc;
  --text-3: #c8c9d6;
  --text-4: #e2e0ea;
  --text-5: #f2f0f7;
  --text-6: #d8d5e4;
  --text-7: #b9b6c8;
  --text-hi: #f4f2f9;
  --accent: #9be3dd;
  --accent-hi: #c9f2ee;
  --sel-fg: #ffffff;
  --warn-fg: #e8a094;
  --warn-bd: #6e3b34;
  --warn-tx: #c8b3ae;
  --scrim: 8, 9, 12;

  --panel: #0c0f14;
  --panel-2: #12151c;
  --ink: #05070a;
  --line: #23262f;
  --line-soft: #1c2028;
  --dim: #8d90a3;
  --faint: #6f7285;
  --ghost: #5d616f;
  --label: #9ea1b2;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

[data-theme="radio"] body,
body[data-radio] {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

/* ===== HIDE THE CHORUS ENGINE =====
   app.js still renders its cards into #cards and still owns #core; the radio
   reads that data and draws its own console, so the grid itself is hidden
   rather than removed. Nothing here changes app.js's contract. ===== */
[data-theme="radio"] #chorus,
[data-theme="radio"] .chorus-label,
[data-theme="radio"] #addMorePanel,
[data-theme="radio"] .help-panel,
[data-theme="radio"] #focus { display: none !important; }

[data-theme="radio"] .stage {
  padding: 0 24px 64px;
  max-width: 1420px;
  margin: 0 auto;
}

/* ===== HEADER ===== */
[data-theme="radio"] .app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 9, 12, .92);
  backdrop-filter: blur(12px);
}

[data-theme="radio"] .header-left {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 420px;
  min-width: 0;
}

[data-theme="radio"] .brand {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--accent);
  white-space: nowrap;
}

[data-theme="radio"] .header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

[data-theme="radio"] .input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

[data-theme="radio"] .input-wrap input {
  min-width: 0;
  height: 38px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid var(--line-6);
  background: var(--field);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
}

[data-theme="radio"] .input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
}

[data-theme="radio"] .primary {
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

[data-theme="radio"] .ghost {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

[data-theme="radio"] .ghost:hover { border-color: var(--line-7); color: var(--text); }

[data-theme="radio"] .theme-label,
[data-theme="radio"] .toggle-text,
[data-theme="radio"] .hint.small,
[data-theme="radio"] #modeIndicator {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .toggle-hint { display: none; }

[data-theme="radio"] a { color: var(--accent); text-decoration: none; }
[data-theme="radio"] a:hover { color: var(--accent-hi); text-decoration: underline; }

[data-theme="radio"] .view-switch {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  white-space: nowrap;
}

[data-theme="radio"] .view-switch:hover { border-color: var(--accent); text-decoration: none; }

[data-theme="radio"] #themeSelect,
[data-theme="radio"] select {
  height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

[data-theme="radio"] .status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 24px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

[data-theme="radio"] .status.hidden { display: none; }

[data-theme="radio"] .spinner {
  width: 11px;
  height: 11px;
  border: 2px solid rgba(155, 227, 221, .25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rd-spin .8s linear infinite;
  flex: none;
}

[data-theme="radio"] .spinner.hidden { display: none; }

@keyframes rd-spin { to { transform: rotate(360deg); } }
@keyframes rd-pulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }
@keyframes rd-bars {
  0%, 100% { transform: scaleY(.35); }
  50% { transform: scaleY(1); }
}

/* =========================================================================
   THRESHOLD — before a referent exists
   ========================================================================= */
[data-theme="radio"] .threshold { display: none; }
[data-theme="radio"] body.rd-empty .threshold { display: block; }
[data-theme="radio"] body.rd-empty .console { display: none; }

[data-theme="radio"] .threshold {
  padding: 40px 24px 72px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

[data-theme="radio"] .th-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .th-head {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 5.4vw, 58px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--text-hi);
  text-wrap: pretty;
}

[data-theme="radio"] .th-sub {
  margin: 15px auto 0;
  max-width: 540px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

[data-theme="radio"] .th-dial {
  margin: 46px auto 0;
  position: relative;
  width: 150px;
  height: 150px;
}

[data-theme="radio"] .th-dial i {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(155, 227, 221, .22);
  transform: translate(-50%, -50%);
}

[data-theme="radio"] .th-dial i:nth-child(1) { width: 150px; height: 150px; animation: rd-pulse 3.2s ease-in-out infinite; }
[data-theme="radio"] .th-dial i:nth-child(2) { width: 118px; height: 118px; animation: rd-pulse 3.2s ease-in-out .4s infinite; }
[data-theme="radio"] .th-dial i:nth-child(3) { width: 88px; height: 88px; animation: rd-pulse 3.2s ease-in-out .8s infinite; }
[data-theme="radio"] .th-dial i:nth-child(4) { width: 58px; height: 58px; animation: rd-pulse 3.2s ease-in-out 1.2s infinite; }

[data-theme="radio"] .th-dial .th-eye {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
}

[data-theme="radio"] .th-dial .th-eye img,
[data-theme="radio"] .th-dial .th-eye video {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  display: block;
  filter: grayscale(1) brightness(1.2) contrast(1.1);
}

[data-theme="radio"] .th-field { margin-top: 40px; }

[data-theme="radio"] .th-field .input-wrap {
  width: 100%;
  gap: 9px;
}

[data-theme="radio"] .th-field .input-wrap input {
  flex: 1;
  height: 56px;
  padding: 0 19px;
  font-size: 17px;
  border-radius: 11px;
  background: rgba(21, 24, 31, .9);
}

[data-theme="radio"] .th-field .input-wrap .primary,
[data-theme="radio"] .th-field .input-wrap .ghost {
  height: 56px;
  border-radius: 11px;
  display: flex;
  align-items: center;
}

[data-theme="radio"] .th-field .input-wrap .primary { padding: 0 26px; font-size: 15px; }

[data-theme="radio"] .th-starters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

[data-theme="radio"] .th-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .chip-mount { display: contents; }
[data-theme="radio"] .th-starters .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; justify-content: center; }

[data-theme="radio"] .chip,
[data-theme="radio"] .chip--sm {
  padding: 7px 13px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line);
  background: rgba(21, 24, 31, .8);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13px !important;
  cursor: pointer;
}

[data-theme="radio"] .chip:hover { border-color: var(--accent); color: #fff; }

[data-theme="radio"] .th-help {
  margin: 34px auto 0;
  max-width: 640px;
  text-align: left;
}

[data-theme="radio"] .th-help > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .th-help > summary::-webkit-details-marker { display: none; }
[data-theme="radio"] .th-help > summary::before { content: '+'; color: var(--accent); font-size: 13px; }
[data-theme="radio"] .th-help[open] > summary::before { content: '−'; }

[data-theme="radio"] .th-help p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--dim);
  text-wrap: pretty;
}

[data-theme="radio"] .th-help code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
}

/* =========================================================================
   THE CONSOLE
   ========================================================================= */
[data-theme="radio"].console,
[data-theme="radio"].console, [data-theme="radio"] .console {
  margin: 24px 0 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(168deg, var(--panel-2) 0%, var(--panel-3) 62%);
  overflow: hidden;
}

/* ---- carrier readout ---- */
[data-theme="radio"] .con-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 9, 12, .5);
}

[data-theme="radio"] .carrier-dot {
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--alt);
  animation: rd-pulse 2s ease-in-out infinite;
  flex: none;
}

[data-theme="radio"] .carrier {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .07em;
  color: var(--alt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

[data-theme="radio"] .con-referent {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
  white-space: nowrap;
}

[data-theme="radio"] .con-body {
  display: grid;
  grid-template-columns: 486px minmax(340px, 1fr) 274px;
}

/* ---- DECK ---- */
[data-theme="radio"] .deck {
  border-right: 1px solid var(--line-soft);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--panel);
  min-width: 0;
}

[data-theme="radio"] .dk-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

[data-theme="radio"] .dk-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .dk-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

[data-theme="radio"] .dk-value {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--alt);
}

/* altitude band */
[data-theme="radio"] .band {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 42px;
}

[data-theme="radio"] .band b {
  flex: 1;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  transition: height .18s ease;
}

[data-theme="radio"] .band-ticks {
  display: flex;
  gap: 2px;
  align-items: flex-start;
  height: 7px;
}

[data-theme="radio"] .band-ticks span {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 2px;
}

[data-theme="radio"] .band-ticks i {
  width: 3px;
  height: 5px;
  border-radius: 1px;
}

[data-theme="radio"] .band-labels {
  display: flex;
  gap: 2px;
}

[data-theme="radio"] .band-labels span {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 8px;
  overflow: hidden;
  cursor: pointer;
  color: var(--label);
}

/* quadrant / perspective / state row */
[data-theme="radio"] .dk-row {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

[data-theme="radio"] .dk-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

[data-theme="radio"] .rd-quad-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 44px 44px;
  gap: 3px;
}

[data-theme="radio"] .rd-quad-cell,
[data-theme="radio"] .rd-per-cell {
  cursor: pointer;
  border: 1px solid var(--line-soft);
  background: #0d1015;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

[data-theme="radio"] .rd-quad-cell:nth-child(1) { border-radius: 10px 2px 2px 2px; }
[data-theme="radio"] .rd-quad-cell:nth-child(2) { border-radius: 2px 10px 2px 2px; }
[data-theme="radio"] .rd-quad-cell:nth-child(3) { border-radius: 2px 2px 2px 10px; }
[data-theme="radio"] .rd-quad-cell:nth-child(4) { border-radius: 2px 2px 10px 2px; }

[data-theme="radio"] .rd-quad-cell b,
[data-theme="radio"] .rd-per-cell b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--dim);
}

[data-theme="radio"] .rd-quad-cell i,
[data-theme="radio"] .rd-per-cell i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .06em;
  color: var(--label);
  white-space: nowrap;
}

[data-theme="radio"] .rd-quad-cell.on,
[data-theme="radio"] .rd-per-cell.on {
  border-color: var(--alt);
  background: color-mix(in srgb, var(--alt) 18%, transparent);
}

[data-theme="radio"] .rd-quad-cell.on b,
[data-theme="radio"] .rd-per-cell.on b { color: #fff; }

/* a binary switch reads as a switch when its halves are level */
[data-theme="radio"] .rd-per-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
}

[data-theme="radio"] .rd-per-cell { border-radius: 7px; padding: 9px 8px; }

/* state: rings + names.
   No fill on the lit ring — when Physical (the OUTERMOST) is selected, a
   translucent wash covers the whole dial and the four inner rings vanish.
   Constant stroke + weight/glow keeps all five countable. */
[data-theme="radio"] .dial {
  position: relative;
  width: 120px;
  height: 120px;
  flex: none;
}

[data-theme="radio"] .dial i {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .19);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

[data-theme="radio"] .dial i.on {
  border-width: 2.5px;
  border-color: var(--alt);
  box-shadow: 0 0 13px color-mix(in srgb, var(--alt) 44%, transparent);
}

/* the list must never be what gives: if the column is tight the dial shrinks
   first and the row wraps, before any label is clipped */
[data-theme="radio"] .rd-state-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

[data-theme="radio"] .rd-state-list {
  flex: 1 1 96px;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

[data-theme="radio"] .rd-state-row {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 5px;
}

[data-theme="radio"] .rd-state-row span {
  border-radius: 50%;
  border: 1px solid var(--grey-1);
  flex: none;
}

[data-theme="radio"] .rd-state-row b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--dim);
  white-space: nowrap;
}

[data-theme="radio"] .rd-state-row:hover b { color: var(--text); }
[data-theme="radio"] .rd-state-row.on { background: color-mix(in srgb, var(--alt) 11%, transparent); }
[data-theme="radio"] .rd-state-row.on span { border-color: var(--alt); }
[data-theme="radio"] .rd-state-row.on b { color: #fff; }

/* intelligence: families then bars.
   19 stops in one row is a smear; 6 families → 2-6 bars is two easy
   choices, and the steppers still walk all 19 in order. */
[data-theme="radio"] .fam-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

[data-theme="radio"] .fam {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: transparent;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

[data-theme="radio"] .fam b {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}

[data-theme="radio"] .fam i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--label);
}

[data-theme="radio"] .fam.on {
  border-color: var(--alt);
  background: color-mix(in srgb, var(--alt) 15%, transparent);
}

[data-theme="radio"] .fam.on b { color: #fff; }

[data-theme="radio"] .bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}

[data-theme="radio"] .bars b {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--line-4);
  cursor: pointer;
  transition: height .16s ease;
  height: 14px;
}

[data-theme="radio"] .bars b.on { height: 34px; background: var(--alt); }

[data-theme="radio"] .bar-labels {
  display: flex;
  gap: 3px;
}

[data-theme="radio"] .bar-labels span {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 7.5px;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

[data-theme="radio"] .bar-labels span.on { color: #fff; }

[data-theme="radio"] .step {
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--label);
  padding: 0;
}

[data-theme="radio"] .step:hover { border-color: var(--alt); color: #fff; }

[data-theme="radio"] .dk-count {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--label);
  margin-left: auto;
}

/* ---- SIGNAL ---- */
[data-theme="radio"] .signal {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

[data-theme="radio"] .signal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--alt) 8%, transparent) 0%, transparent 70%);
}

[data-theme="radio"] .sig-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 auto;
  min-width: 0;
}

[data-theme="radio"] .sig-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .sig-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: 20px;
  align-items: start;
}

[data-theme="radio"] .sig-titles {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}

[data-theme="radio"] .sig-short {
  margin: 0;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-hi);
  text-wrap: pretty;
}

[data-theme="radio"] .sig-context {
  font-size: 13px;
  line-height: 1.55;
  color: var(--dim);
  text-wrap: pretty;
}

/* the porthole: the referent image, re-lit by altitude.
   multiply, not `color` — the generated art is near-monochrome on black, so
   multiply keeps the black black and lets the strokes take the hue. `color`
   preserves luminance and washes the ground out. */
[data-theme="radio"] .porthole {
  position: relative;
  width: 128px;
  height: 128px;
  flex: none;
}

[data-theme="radio"] .porthole-eye {
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
}

[data-theme="radio"] .porthole-eye img,
[data-theme="radio"] .porthole-eye video {
  width: 100%;
  height: 100%;
  margin: 0;
  /* contain, not a 175% crop: that zoom existed to escape the old generated
     HUD frame, and against the current subject-on-black images it only cut
     the animal's feet off. */
  object-fit: contain;
  display: block;
  filter: grayscale(1) brightness(1.22) contrast(1.1);
  transition: opacity .45s ease;
}

/* both of these are children of .porthole-eye, whose 50% radius and
   overflow: hidden do the clipping — inset 0 here means the eye, not the
   128px square around it */
[data-theme="radio"] .porthole-tint {
  position: absolute;
  inset: 0;
  background: var(--alt);
  mix-blend-mode: multiply;
  pointer-events: none;
}

[data-theme="radio"] .porthole-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 34%, rgba(5, 7, 10, .55) 100%);
  pointer-events: none;
}

[data-theme="radio"] .porthole-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--alt);
  opacity: .5;
  pointer-events: none;
}

[data-theme="radio"] .porthole-ring-2 {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .09);
  pointer-events: none;
}

[data-theme="radio"] .sig-rule { height: 1px; background: var(--line-soft); }

[data-theme="radio"] .sig-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

[data-theme="radio"] .sig-block-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .sig-summary {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

[data-theme="radio"] .sig-exp {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-6);
  text-wrap: pretty;
}

[data-theme="radio"] .sig-actions {
  /* margin-top: auto pinned these to the bottom of a pane stretched by the
     taller deck — on a terse reading that left ~250px of void between the
     experience passage and the buttons, which reads as broken. They now sit
     with the text they act on. */
  margin-top: 4px;
  padding-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* open frequency */
[data-theme="radio"] .open-freq {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 44px 20px;
}

[data-theme="radio"] .noise {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 28px;
}

[data-theme="radio"] .noise i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--grey-1);
  transform-origin: bottom;
  animation: rd-bars 1.3s ease-in-out infinite;
}

[data-theme="radio"] .noise i:nth-child(2) { animation-duration: 1.7s; background: var(--grey-2); }
[data-theme="radio"] .noise i:nth-child(3) { animation-duration: 1.1s; }
[data-theme="radio"] .noise i:nth-child(4) { animation-duration: 1.9s; background: var(--grey-2); }
[data-theme="radio"] .noise i:nth-child(5) { animation-duration: 1.45s; }

[data-theme="radio"] .open-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .open-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 340px;
  text-wrap: pretty;
}

[data-theme="radio"] .tune-in {
  height: auto;
  padding: 12px 26px;
  border: 0;
  border-radius: 9px;
  background: var(--alt);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

[data-theme="radio"] .tune-in[disabled] { opacity: .6; cursor: default; }

/* A failed compose used to be written onto the button, which the next
   redraw destroyed — so a dead API read as a no-op click. The failure now
   lives in the job and renders here. */
[data-theme="radio"] .sig-error {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 360px;
  padding: 11px 14px;
  border-radius: 9px;
  border: 1px solid var(--warn-bd);
  background: rgba(110, 59, 52, .16);
  text-align: left;
}

[data-theme="radio"] .sig-error b {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--warn-fg);
}

[data-theme="radio"] .sig-error span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--warn-tx);
  text-wrap: pretty;
}

[data-theme="radio"] .ghost[disabled],
[data-theme="radio"] .scan[disabled] { opacity: .5; cursor: default; }

/* ---- STATION BANK ---- */
[data-theme="radio"] .bank {
  border-left: 1px solid var(--line-soft);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(8, 9, 12, .42);
  min-width: 0;
}

[data-theme="radio"] .bank-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

[data-theme="radio"] .bank-head b {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .bank-head i {
  font-style: normal;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--label);
}

[data-theme="radio"] .station {
  cursor: pointer;
  display: flex;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-7);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--sc, var(--accent));
  min-width: 0;
  text-align: left;
  font-family: inherit;
}

[data-theme="radio"] .station:hover { border-color: var(--line-7); }

[data-theme="radio"] .station.on {
  background: color-mix(in srgb, var(--sc) 12%, var(--panel-7));
  border-color: color-mix(in srgb, var(--sc) 55%, transparent);
}

[data-theme="radio"] .station .st-n {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--grey-5);
  padding-top: 2px;
  flex: none;
}

[data-theme="radio"] .station .st-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

[data-theme="radio"] .station .st-alt {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sc);
}

[data-theme="radio"] .station .st-short {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  text-wrap: pretty;
}

[data-theme="radio"] .station .st-freq {
  font-family: var(--font-mono);
  font-size: 7px;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="radio"] .scan {
  cursor: pointer;
  margin-top: 3px;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed var(--line-4);
  background: transparent;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .scan:hover { border-color: var(--accent); color: var(--accent); }

/* station placeholder while composing */
[data-theme="radio"] .station.pending {
  cursor: default;
  border-left-color: var(--line-4);
}

[data-theme="radio"] .station.pending .st-short {
  height: 10px;
  width: 78%;
  border-radius: 5px;
  background: var(--skel);
  animation: rd-pulse 1.6s ease-in-out infinite;
}

[data-theme="radio"] .station.pending .st-alt {
  height: 7px;
  width: 40%;
  border-radius: 4px;
  background: #1a1e26;
}

/* =========================================================================
   RESPONSIVE — the console is an instrument, so it stacks rather than shrinks
   ========================================================================= */
@media (max-width: 1180px) {
  [data-theme="radio"] .con-body { grid-template-columns: 420px minmax(300px, 1fr); }

  /* The deck's 420px leaves the state column ~186px, and after the 120px
     dial plus its gap the name list gets 52px for content that needs 83 —
     the labels are nowrap, so they spilled across the divider into the
     signal pane. Stack the row instead of letting the list starve. */
  [data-theme="radio"] .dk-row { grid-template-columns: minmax(0, 1fr); }

  [data-theme="radio"] .bank {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
  }
  [data-theme="radio"] .bank-head { grid-column: 1 / -1; }
  [data-theme="radio"] .scan { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  [data-theme="radio"] .con-body { grid-template-columns: minmax(0, 1fr); }
  [data-theme="radio"] .deck { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  [data-theme="radio"] .dk-row { grid-template-columns: minmax(0, 1fr); }
  [data-theme="radio"] .sig-top { grid-template-columns: minmax(0, 1fr); }
  [data-theme="radio"] .porthole { margin: 0 auto; }
  [data-theme="radio"] .stage { padding: 0 14px 48px; }
  [data-theme="radio"] .threshold { padding: 40px 16px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="radio"] .carrier-dot,
  [data-theme="radio"] .noise i,
  [data-theme="radio"] .th-dial i,
  [data-theme="radio"] .station.pending .st-short { animation: none; }
}

/* =========================================================================
   TUNING — the porthole IS the loading cue
   Two motions, deliberately different in kind: the eye breathes (the signal
   coming and going) while a sweep travels the rim (the machine searching).
   ========================================================================= */
[data-theme="radio"] .porthole.is-tuning .porthole-eye img,
[data-theme="radio"] .porthole.is-tuning .porthole-eye video {
  animation: rd-breathe 2.1s ease-in-out infinite;
}

@keyframes rd-breathe {
  0%, 100% { opacity: .22; }
  50% { opacity: 1; }
}

/* the sweep: a conic wedge masked to the rim, rotating. A border cannot be
   partially drawn, so this is a rotating gradient with its centre punched
   out by a mask. */
[data-theme="radio"] .porthole.is-tuning::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg, var(--alt) 330deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: rd-sweep 1.5s linear infinite;
  pointer-events: none;
}

@keyframes rd-sweep { to { transform: rotate(360deg); } }

/* the static rings dim while the sweep runs, so the two do not compete */
[data-theme="radio"] .porthole.is-tuning .porthole-ring { opacity: .2; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="radio"] .porthole.is-tuning .porthole-eye img,
  [data-theme="radio"] .porthole.is-tuning .porthole-eye video { animation: none; opacity: .6; }
  [data-theme="radio"] .porthole.is-tuning::after { animation: none; }
}


/* =========================================================================
   ADDITIONAL CONTEXT — the last dial on the deck

   Styled here rather than in giga-kosmic-chorus.css because this file owns
   the console. When the tuner is mounted as an arrangement the console
   carries data-theme="radio" on its own section, so rules scoped to the
   console apply in both mounts; the chorus file's theme-scoped rules were
   losing to the UA default and the field rendered as a raw white input.
   ========================================================================= */
[data-theme="radio"] .rd-subject { gap: 8px; }

[data-theme="radio"] .rd-subject .dk-label {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

/* "optional" is part of the label, not a placeholder the reader has to read
   the field to discover */
[data-theme="radio"] .rd-subject .dk-label i {
  font-style: normal;
  font-size: 8px;
  letter-spacing: .14em;
  color: var(--ghost);
  text-transform: uppercase;
}

[data-theme="radio"] .rds-input {
  width: 100%;
  height: 36px;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 11px;
  border-radius: 7px;
  border: 1px solid var(--line-soft);
  /* the deck's own ink, so the field reads as part of the instrument rather
     than a form control dropped onto it */
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  line-height: 1;
}

[data-theme="radio"] .rds-input::placeholder {
  color: var(--ghost);
  font-family: var(--font-mono);
  letter-spacing: .02em;
}

[data-theme="radio"] .rds-input:focus {
  outline: none;
  border-color: var(--alt, var(--accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--alt, var(--accent)) 34%, transparent);
}

[data-theme="radio"] .rds-input:disabled { opacity: .55; }

/* a subject the reader supplied, shown on the reading it shaped */
[data-theme="radio"] .rd-asked {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--alt, var(--accent));
  background: var(--panel-3, transparent);
}

[data-theme="radio"] .rda-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
  flex: none;
}

[data-theme="radio"] .rda-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}


/* =========================================================================
   THE SHARED CURATION FOOTER, IN THE CONSOLE

   Rendered by renderCuration() in giga-kosmic-view.js into .sig-actions.
   This file loads after the chorus stylesheet and owns .sig-actions, so the
   footer's own layout has to be restated here or the row rule wins.
   ========================================================================= */
[data-theme="radio"] .sig-actions.curation-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

[data-theme="radio"] .curation-foot .cf-rate { display: flex; flex-direction: column; gap: 9px; }
[data-theme="radio"] .curation-foot .cf-axes,
[data-theme="radio"] .curation-foot .cf-acts { display: flex; flex-wrap: wrap; gap: 7px; }

[data-theme="radio"] .curation-foot .cf-q {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--label);
}

[data-theme="radio"] .curation-foot .cf-ax {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: transparent;
  color: var(--dim);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}

[data-theme="radio"] .curation-foot .cf-ax:hover { border-color: var(--line); color: var(--text); }

[data-theme="radio"] .curation-foot .cf-ax.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: #fff;
}

[data-theme="radio"] .curation-foot .ghost { min-height: 40px; }
[data-theme="radio"] .curation-foot .cf-del { margin-left: auto; }
[data-theme="radio"] .curation-foot .cf-regen:hover { border-color: var(--accent); color: #fff; }
[data-theme="radio"] .curation-foot .cf-del:hover { border-color: #c96a5c; color: #fff; }

[data-theme="radio"] .curation-foot .cf-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--dim);
  text-wrap: pretty;
}

[data-theme="radio"] .curation-foot .cf-note.is-ok { color: var(--accent); }
[data-theme="radio"] .curation-foot .cf-note.is-bad { color: #e8a094; }


/* =========================================================================
   ONE FREQUENCY, MORE THAN ONE BROADCAST

   The Tuner asks /compose for the address it was given rather than the
   nearest free one, so a second tune-in at an occupied address produces a
   sibling. Two readings at one address are the point — how much room is
   there inside a single coordinate — but unannounced they read as the same
   card twice.
   ========================================================================= */
[data-theme="radio"] .rd-multi,
[data-theme="radio"] .console .rd-multi {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 7px 5px 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--alt) 40%, transparent);
  background: color-mix(in srgb, var(--alt) 10%, transparent);
}

[data-theme="radio"] .rdm-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--alt);
  white-space: nowrap;
}

[data-theme="radio"] .rdm-step {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--alt) 45%, transparent);
  background: transparent;
  color: var(--alt);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

[data-theme="radio"] .rdm-step:hover {
  background: color-mix(in srgb, var(--alt) 20%, transparent);
  color: #fff;
}

[data-theme="radio"] .rdm-step:focus-visible { outline: 2px solid var(--alt); outline-offset: 2px; }

/* in the bank, a sibling names itself rather than repeating the signature
   of the row above it — an identical coordinate line twice is exactly what
   reads as a bug */
[data-theme="radio"] .station .st-sib {
  font-style: italic;
  color: color-mix(in srgb, var(--sc) 70%, #9ea1b2);
  opacity: .85;
}