:root {
  color-scheme: dark;
  --ink: #171513;
  --black: #0b0d0d;
  --rack: #111414;
  --rack-raised: #1a1d1c;
  --cream: #f0e5cc;
  --cream-2: #fff7e4;
  --paper: #e8ddc2;
  --muted: #a89b7d;
  --line: #3e3a32;
  --light-line: #c7b794;
  --yellow: #efc449;
  --orange: #d98c38;
  --red: #dc5a43;
  --green: #55ad76;
  --blue: #67a8b5;
  --violet: #9b75b5;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 / 32px 32px,
    repeating-linear-gradient(90deg, #211713 0 24px, #2d1e16 24px 48px, #191211 48px 72px);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  overflow: hidden;
}

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

button {
  align-items: center;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 3px 0 var(--ink);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
}

button:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

button:active:not(:disabled) {
  box-shadow: 0 1px 0 var(--ink);
  transform: translateY(1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

input,
textarea,
select {
  background: #fff9eb;
  border: 2px solid var(--ink);
  border-radius: 3px;
  color: var(--ink);
  min-height: 42px;
  padding: 9px 10px;
  width: 100%;
}

textarea {
  line-height: 1.45;
  resize: vertical;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.04em;
  line-height: 0.9;
}

h2 {
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
}

h3 {
  font-size: 16px;
  line-height: 1;
}

label {
  color: #635a48;
  display: grid;
  font-size: 10px;
  font-weight: 950;
  gap: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

summary {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.srOnly {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.topBar {
  align-items: center;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, 0.025) 38px 39px),
    linear-gradient(180deg, #202323, #0f1111);
  border-bottom: 4px solid #050606;
  box-shadow: 0 9px 30px rgba(0, 0, 0, 0.4);
  color: var(--cream-2);
  display: flex;
  height: 78px;
  justify-content: space-between;
  padding: 12px 18px;
  position: relative;
  z-index: 10;
}

.brandPlate,
.systemStrip,
.systemState,
.rackIndicators,
.rackActions,
.streamActions,
.routineControls,
.finderSearch,
.drawerHeader,
.stationTop,
.stationMetaRow,
.stationFoot,
.routineCardTop,
.copyLine {
  align-items: center;
  display: flex;
  gap: 10px;
}

.brandMark {
  align-items: end;
  background: #070808;
  border: 2px solid #4d493f;
  display: flex;
  gap: 4px;
  height: 46px;
  padding: 7px;
  width: 54px;
}

.brandMark span {
  background: var(--green);
  border-radius: 1px 1px 0 0;
  flex: 1;
}

.brandMark span:nth-child(1) { height: 30%; }
.brandMark span:nth-child(2) { height: 70%; }
.brandMark span:nth-child(3) { background: var(--yellow); height: 95%; }
.brandMark span:nth-child(4) { background: var(--red); height: 55%; }

.brandPlate p {
  color: #c8b785;
  font-size: 11px;
  font-weight: 800;
  margin-top: 5px;
  text-transform: uppercase;
}

.systemStrip {
  background: #090a0a;
  border: 2px solid #3e3d38;
  padding: 7px;
}

.systemState {
  color: #c8b785;
  font-size: 11px;
  font-weight: 850;
  min-width: 130px;
  padding: 0 7px;
}

.systemLed {
  background: var(--green);
  border: 2px solid #c6b998;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(85, 173, 118, 0.85);
  height: 11px;
  width: 11px;
}

body[data-save-state="dirty"] .systemLed {
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(239, 196, 73, 0.85);
}

body[data-save-state="error"] .systemLed {
  background: var(--red);
  box-shadow: 0 0 10px rgba(220, 90, 67, 0.85);
}

.quietButton {
  background: #2a2d2c;
  border-color: #575349;
  box-shadow: none;
  color: var(--cream);
}

.saveButton {
  background: var(--yellow);
}

.publishButton {
  background: var(--green);
}

.mobileViewSwitch {
  display: none;
}

.consoleShell {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  height: calc(100dvh - 78px);
  min-height: 0;
}

.stationBank {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 100px),
    var(--rack);
  border-right: 5px solid #050606;
  color: var(--cream-2);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
}

.bankHeader {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.moduleCode {
  color: #9c8c68;
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.bankHeader h2 {
  color: var(--cream-2);
}

.bankHeader button {
  background: var(--green);
}

.bankStats {
  border: 2px solid #3b3b36;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px;
}

.bankStats span {
  border-right: 1px solid #3b3b36;
  color: var(--muted);
  display: grid;
  font-size: 9px;
  gap: 2px;
  padding: 8px;
  text-transform: uppercase;
}

.bankStats span:last-child {
  border-right: 0;
}

.bankStats strong {
  color: var(--cream-2);
  font-size: 20px;
}

.bankHint {
  color: #b8aa8c;
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 11px;
}

.bankHint strong {
  color: var(--cream-2);
}

.searchField {
  color: var(--muted);
}

.searchField input,
.drawerPanel input,
.drawerPanel textarea,
.drawerPanel select {
  background: #090a0a;
  border-color: #4c493f;
  color: var(--cream-2);
}

.bankFilters {
  background: #090a0a;
  border: 2px solid #3b3b36;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(2, 1fr);
  margin: 10px 0;
  padding: 4px;
}

.bankFilters button {
  background: #1c1f1e;
  border: 1px solid #454238;
  box-shadow: none;
  color: var(--cream);
  min-height: 31px;
  padding: 0 7px;
}

.bankFilters button.active {
  background: var(--yellow);
  color: var(--ink);
}

.stationList {
  display: grid;
  flex: 1;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 5px 18px 2px;
  scrollbar-color: #5b5547 #0b0d0d;
}

.stationItem {
  background: #171a19;
  border: 2px solid #3c3b35;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 106px;
}

.stationItem.active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(85, 173, 118, 0.2);
}

.stationOrder {
  align-content: center;
  background: #090a0a;
  border-right: 2px solid #3c3b35;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 6px;
}

.stationOrder > span {
  color: #d1bd7e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 900;
}

.stationOrder button {
  background: #242725;
  border: 1px solid #565044;
  box-shadow: none;
  color: var(--cream);
  font-size: 14px;
  min-height: 25px;
  padding: 0;
  width: 27px;
}

.stationSelect {
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--cream-2);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  min-width: 0;
  padding: 0;
  text-align: left;
}

.stationSelect:hover:not(:disabled),
.stationSelect:active:not(:disabled) {
  background: #202522;
  box-shadow: none;
  filter: none;
  transform: none;
}

.stationSignal {
  align-items: center;
  border-right: 1px solid #3c3b35;
  display: flex;
  justify-content: center;
}

.stationSignal i {
  background: var(--red);
  border: 2px solid #aaa083;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.stationSignal i.lit {
  background: var(--green);
  box-shadow: 0 0 9px rgba(85, 173, 118, 0.9);
}

.stationContent {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px 10px;
}

.stationTop,
.stationMetaRow,
.stationFoot {
  justify-content: space-between;
  min-width: 0;
}

.stationTop strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.statusDot,
.stateLamp {
  border: 1px solid #131414;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.04em;
  padding: 4px 7px;
  text-transform: uppercase;
}

.ready {
  background: #cde6d2;
  color: #123a22;
}

.attention {
  background: #f6d29b;
  color: #633113;
}

.off {
  background: #d1c7af;
  color: #514b40;
}

.stationMetaRow {
  color: #b6a98a;
  font-size: 11px;
  font-weight: 750;
}

.stationMetaRow > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stationFoot {
  align-items: end;
}

.miniTags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.miniTags span {
  background: #2a2d2b;
  border: 1px solid #48443b;
  color: #d9ccb0;
  font-size: 8px;
  font-weight: 900;
  padding: 2px 5px;
  text-transform: uppercase;
}

.priorityLabel {
  color: #d4bd72;
  font-size: 8px;
  font-weight: 950;
  text-transform: uppercase;
}

.stationRack {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 32%),
    var(--paper);
  min-height: 0;
  overflow-y: auto;
  padding: 0 18px 28px;
}

.rackHeader {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(239, 196, 73, 0.26), transparent 38%),
    #d8c9aa;
  border: 3px solid var(--ink);
  border-top: 0;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin-bottom: 14px;
  min-height: 116px;
  padding: 20px 16px 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.rackIdentity {
  min-width: 0;
}

.rackIdentity h2,
.rackIdentity p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rackIdentity p {
  color: #5e5546;
  font-size: 12px;
  font-weight: 750;
  margin-top: 6px;
}

.rackIndicators {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rackActions {
  justify-content: flex-end;
}

.rackActions .danger {
  background: #f2b8a9;
  color: #5c1a10;
}

.mobileBack {
  display: none;
}

.rackGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rackModule {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 75px),
    #e8dcc2;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 15px;
  position: relative;
}

.rackModule::before,
.rackModule::after {
  background: radial-gradient(circle, #695f50 0 2px, #cabc9d 2px 4px, transparent 4px);
  content: "";
  height: 10px;
  position: absolute;
  top: 7px;
  width: 10px;
}

.rackModule::before { left: 7px; }
.rackModule::after { right: 7px; }

.identityModule,
.selectorModule,
.modeSetupModule,
.advancedModule {
  grid-column: 1 / -1;
}

.streamModule {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 80px),
    #121414;
  color: var(--cream-2);
}

.streamModule label,
.voiceModule label {
  color: inherit;
}

.streamModule input {
  background: #080909;
  border-color: #665e4d;
  color: var(--cream-2);
}

.voiceModule {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.27), transparent 80px),
    #d9a34b;
}

.selectorModule {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.37), transparent 80px),
    #d7e7e7;
}

.modeSetupModule {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 80px),
    #dedfc8;
}

.selectorHint {
  color: #435758;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.scoreHelp {
  color: #526263;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
}

.compactButton {
  min-height: 32px;
  padding: 6px 10px;
}

.learningHeaderActions {
  align-items: end;
  display: flex;
  gap: 8px;
}

.learningHeaderActions label {
  color: inherit;
  font-size: 9px;
  gap: 3px;
  min-width: 118px;
}

.learningHeaderActions select {
  min-height: 32px;
  padding: 5px 26px 5px 7px;
}

.learningSummary {
  background: rgba(255, 255, 255, 0.38);
  border: 2px solid #687575;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.learningScoreRow,
.learningActions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.modeLearningActions {
  border-top: 1px dashed #687575;
  padding-top: 12px;
}

.modeLearningActions span {
  color: #526263;
  font-size: 10px;
  font-weight: 750;
}

.learningActions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.learningScoreRow > div {
  display: grid;
  gap: 3px;
}

.learningScoreRow strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 25px;
}

.learningMeter {
  background: #202322;
  border: 2px solid var(--ink);
  height: 13px;
  overflow: hidden;
}

.learningMeter span {
  background: linear-gradient(90deg, var(--orange), var(--yellow), var(--green));
  display: block;
  height: 100%;
  transition: width 160ms ease;
}

.learningStats {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.learningStats span {
  background: #202322;
  color: var(--cream);
  display: grid;
  font-size: 9px;
  padding: 8px;
  text-transform: uppercase;
}

.learningStats strong {
  color: var(--yellow);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
}

.learningNudgeFieldset {
  border-top: 1px dashed #687575;
  padding-top: 13px;
}

.stationWidePreference {
  border-top: 0;
  padding-top: 0;
}

.stationWidePreference .modeIntro {
  margin-bottom: 10px;
}

.controlHint,
.settingsNote {
  color: #526263;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 9px;
}

.learningNudges {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.learningNudges button,
.learningActions button {
  background: #202322;
  border-color: var(--ink);
  color: var(--cream);
}

.learningNudges button.active {
  background: var(--green);
  color: var(--ink);
}

.learningSettings {
  display: grid;
  gap: 13px;
}

.settingsToggle {
  align-items: center;
  display: flex;
  gap: 9px;
}

.settingsToggle input {
  width: auto;
}

.dangerButton {
  background: #4b2823;
  border-color: #9c5548;
  color: #ffd8ce;
}

.moduleHeader {
  align-items: center;
  border-bottom: 2px solid currentColor;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 3px 2px 11px;
}

.moduleNumber {
  align-items: center;
  background: var(--ink);
  color: var(--yellow);
  display: inline-flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.moduleHeader .moduleCode {
  color: inherit;
  margin-bottom: 3px;
  opacity: 0.62;
}

.panelScrew {
  background: radial-gradient(circle, #6d6252 0 2px, #b7a989 2px 5px, transparent 5px);
  height: 12px;
  width: 12px;
}

.fieldGrid {
  display: grid;
  gap: 12px;
}

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

.categoryField {
  grid-column: 1 / -1;
}

.fieldGrid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inlineDetails {
  border-top: 1px dashed #756c59;
  padding-top: 9px;
}

.inlineDetails summary {
  color: #5b5242;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.powerSwitch {
  align-items: center;
  color: inherit;
  display: flex;
  gap: 8px;
}

.powerSwitch input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.toggleTrack {
  background: #4b4b45;
  border: 2px solid #080909;
  border-radius: 999px;
  display: block;
  height: 24px;
  position: relative;
  width: 43px;
}

.toggleTrack::after {
  background: var(--cream);
  border: 2px solid #080909;
  border-radius: 50%;
  content: "";
  height: 18px;
  left: 1px;
  position: absolute;
  top: 1px;
  transition: transform 120ms ease;
  width: 18px;
}

/* Scoped to .powerSwitch, these left the deck's master switch recolouring
   without the knob ever moving — the switch is a component, so its own
   behaviour belongs to it rather than to one of the places using it. */
input:checked + .toggleTrack {
  background: var(--green);
}

input:checked + .toggleTrack::after {
  transform: translateX(18px);
}

input:focus-visible + .toggleTrack {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.streamActions {
  flex-wrap: wrap;
}

.inlineStatus {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.voiceOutput {
  background: rgba(255, 248, 228, 0.55);
  border: 2px solid var(--ink);
  display: grid;
  gap: 6px;
  padding: 11px;
}

.voiceOutput span {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.voiceOutput strong {
  overflow-wrap: anywhere;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

legend {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin-bottom: 11px;
  text-transform: uppercase;
}

.modeFieldset {
  border-top: 1px dashed #687575;
  padding-top: 13px;
}

.modeIntro,
.fieldHelp {
  color: #526263;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.fieldHelp {
  display: block;
  letter-spacing: 0;
  text-transform: none;
}

.rackModule .fieldHelp {
  color: #4d554f;
}

.streamModule .fieldHelp {
  color: #d8cbae;
}

.fieldInfo {
  align-items: start;
  display: grid;
  gap: 7px;
  justify-items: start;
  letter-spacing: 0;
  text-transform: none;
}

.fieldInfo summary {
  align-items: center;
  background: transparent;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: #514a3d;
  display: inline-flex;
  font-family: Georgia, serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 900;
  height: 20px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  opacity: 0.9;
  width: 20px;
}

.fieldInfo summary::-webkit-details-marker {
  display: none;
}

.fieldInfo p {
  background: rgba(255, 249, 235, 0.72);
  border-left: 3px solid currentColor;
  color: #494237;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0;
  max-width: 68ch;
  padding: 7px 9px;
}

.voiceModule .fieldInfo summary {
  color: #3f3324;
}

.streamModule .fieldInfo summary {
  color: #ddd0b4;
}

.streamModule .fieldInfo p {
  background: #202322;
  color: #f3e8d0;
}

.standaloneInfo {
  margin-top: 2px;
}

.learningInfo {
  margin-top: 8px;
}

.learningInfo .scoreHelp {
  color: #384849;
  margin: 0;
}

.nudgeDetails {
  margin-top: 3px;
}

.modeSwitches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.membershipGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

.membershipCard {
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(45, 54, 54, 0.38);
  display: grid;
  gap: 10px;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  padding: 12px;
}

.favoriteMembershipCard { border-top: 4px solid var(--yellow); }
.localMembershipCard { border-top: 4px solid var(--green); }

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

.membershipCardHeader > div {
  display: grid;
  gap: 3px;
}

.membershipCardHeader strong {
  color: var(--ink);
  font-size: 15px;
}

.membershipIcon {
  align-items: center;
  background: var(--ink);
  color: var(--cream);
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 17px;
  height: 32px;
  justify-content: center;
}

.favoriteMembershipCard .membershipIcon { color: var(--yellow); }
.localMembershipCard .membershipIcon { color: var(--green); }

.membershipCard .moduleCode {
  margin: 0;
}

.membershipCard button {
  background: #202322;
  border-color: var(--ink);
  color: var(--cream);
  min-height: 38px;
  width: 100%;
}

.membershipCard button.active {
  background: var(--green);
  color: var(--ink);
}

.favoriteMembershipCard button.active {
  background: var(--yellow);
}

.modeDetail {
  color: #435758;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.modeGuide {
  color: #435758;
  display: grid;
  font-size: 11px;
  gap: 5px;
  line-height: 1.4;
  margin: 11px 0 0;
  padding-left: 18px;
}

.modeSummary {
  background: rgba(255, 255, 255, 0.42);
  border-left: 4px solid var(--green);
  color: #263b3c;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  margin-top: 11px;
  padding: 9px 10px;
}

.streamHint {
  color: #b8aa8c;
}

.modeSwitches button {
  background: #202322;
  border-color: var(--ink);
  color: var(--cream);
  min-height: 34px;
}

.modeSwitches button.active {
  background: var(--blue);
  color: #0b1b1e;
}

.modeSwitches button[data-selection-nudge="morning"].active { background: var(--yellow); }
.modeSwitches button[data-selection-nudge="night"].active { background: #6275b0; color: white; }
.modeSwitches button[data-selection-nudge="discovery"].active { background: var(--orange); }

.selectionNudgeFieldset {
  border-top-style: solid;
}

.counterDisplay {
  background: #080909;
  border: 1px solid #5b5549;
  color: var(--yellow);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 7px 9px;
}

.routineControls {
  justify-content: space-between;
}

.routineControls p {
  color: #b8aa8c;
  font-size: 12px;
}

.advancedModule {
  background: #d6c8a8;
  display: block;
}

.advancedModule summary {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.advancedFields,
.settingsForm,
.routineList,
.candidateList {
  display: grid;
  gap: 12px;
}

.advancedFields {
  margin-top: 14px;
}

.drawer {
  background: rgba(2, 3, 3, 0.72);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 140ms ease, visibility 0s linear 160ms;
  visibility: hidden;
  z-index: 30;
}

.drawer.open {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
  visibility: visible;
}

.drawerPanel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 90px),
    #151717;
  border-left: 5px solid #050606;
  box-shadow: -28px 0 55px rgba(0, 0, 0, 0.45);
  color: var(--cream-2);
  display: grid;
  gap: 14px;
  height: 100%;
  margin-left: auto;
  max-width: 590px;
  overflow-y: auto;
  padding: 20px;
  transform: translateX(26px);
  transition: transform 160ms ease;
  width: min(94vw, 590px);
}

.drawer.open .drawerPanel {
  transform: translateX(0);
}

.settingsPanel {
  gap: 0;
  max-width: 680px;
  padding: 0;
  width: min(96vw, 680px);
}

.settingsPanel > .drawerHeader {
  background: #151717;
  padding: 20px;
  position: sticky;
  top: 0;
  z-index: 2;
}

.settingsForm {
  gap: 0;
}

.settingsLead {
  background: #0c0e0e;
  border-bottom: 1px solid #4b473d;
  color: #c8b785;
  font-size: 11px;
  line-height: 1.45;
  padding: 13px 20px;
}

.settingsLead strong {
  color: var(--cream-2);
}

.settingsSection {
  border-bottom: 2px solid #514c41;
  display: grid;
  gap: 15px;
  padding: 20px;
}

.settingsSectionHeader {
  align-items: center;
  display: grid;
  gap: 11px;
  grid-template-columns: auto minmax(0, 1fr);
}

.settingsSectionHeader h3 {
  color: var(--cream-2);
}

.settingsSectionNumber {
  align-items: center;
  background: var(--yellow);
  border: 2px solid #060707;
  color: var(--ink);
  display: flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 950;
  height: 38px;
  justify-content: center;
  width: 42px;
}

.settingsSection .moduleCode {
  margin-bottom: 3px;
}

.sectionIntro,
.fieldHelp {
  color: #b8aa8c;
  font-size: 11px;
  line-height: 1.45;
}

.fieldHelp {
  display: block;
  font-weight: 650;
  margin-top: 2px;
  text-transform: none;
}

.conditionalSetting {
  background: #202322;
  border-left: 4px solid var(--green);
  padding: 12px;
}

.timeWindowGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timeWindowCard {
  background: #0c0e0e;
  border: 2px solid #4c493f;
  min-width: 0;
  padding: 12px;
}

.timeWindowCard legend {
  color: var(--cream-2);
  font-size: 10px;
  font-weight: 950;
  padding: 0 6px;
  text-transform: uppercase;
}

.morningWindowCard {
  border-top-color: var(--yellow);
}

.nightWindowCard {
  border-top-color: #7f92cf;
}

.timeRange {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.timeRange label {
  font-size: 9px;
  min-width: 0;
}

.timeRange input {
  min-width: 0;
  padding-left: 8px;
  padding-right: 5px;
}

.timeRangeWord {
  color: #8e826a;
  font-size: 10px;
  font-weight: 900;
  padding-bottom: 13px;
  text-transform: uppercase;
}

.timeWindowSummary {
  background: #202322;
  border-left: 4px solid var(--yellow);
  color: #d6c9a9;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
  padding: 11px 12px;
}

.settingsSaveBar {
  align-items: center;
  background: #0c0e0e;
  border-bottom: 2px solid #514c41;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 20px;
}

.settingsSaveBar span {
  color: #a99d83;
  font-size: 10px;
  line-height: 1.35;
  max-width: 320px;
}

.settingsSaveBar button {
  flex: 0 0 auto;
}

.settingsPanel > .learningSettings {
  margin: 0;
}

.drawerHeader {
  align-items: start;
  border-bottom: 2px solid #514c41;
  justify-content: space-between;
  padding-bottom: 12px;
}

.drawerIntro,
.drawerPanel label {
  color: #b8aa8c;
}

.routineCard,
.candidateCard {
  background: #e7dcc2;
  border: 3px solid var(--ink);
  color: var(--ink);
  display: grid;
  gap: 10px;
  padding: 13px;
}

.routineCard.created,
.candidateCard.playable {
  box-shadow: inset 0 0 0 4px rgba(85, 173, 118, 0.3);
}

.routineCardTop,
.copyLine {
  justify-content: space-between;
}

.routineCardTop span {
  color: #665c49;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.routineSection {
  display: grid;
  gap: 12px;
}

.routineSection[hidden] {
  display: none;
}

.routineSection + .routineSection {
  border-top: 2px solid #514c41;
  margin-top: 8px;
  padding-top: 18px;
}

.routineSectionHeader {
  align-items: end;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.routineSectionHeader h3 {
  color: var(--cream-2);
}

.routineSectionHeader p {
  color: #a99d83;
  font-size: 11px;
  max-width: 280px;
  text-align: right;
}

.nativeStopCard {
  align-items: center;
  background: #dce7da;
  border: 3px solid var(--ink);
  color: var(--ink);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 12px;
}

.nativeStopIcon {
  align-items: center;
  background: var(--ink);
  color: var(--cream-2);
  display: flex;
  font-size: 14px;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.nativeStopCard .moduleCode {
  color: #49604d;
  margin-bottom: 3px;
}

.nativeStopCard strong {
  display: block;
  font-size: 14px;
}

.nativeStopCard p {
  color: #3e4e41;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
  margin-top: 4px;
}

.nativeStopCard code {
  background: transparent;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 950;
  padding: 0;
}

.stationRoutineToolbar {
  background: #232624;
  border: 2px solid #575044;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.shortcutEditorActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.stationRoutineToolbar > .fieldHelp {
  margin: 0;
}

.routineCardActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.removeShortcut {
  background: #3a2925;
  border-color: #7d4c41;
  box-shadow: none;
  color: #ffd3c9;
}

.copyLine {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.drawerPanel .routinePhraseInput {
  background: #fff9eb;
  border: 2px solid var(--ink);
  border-radius: 3px;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
  padding: 9px;
  text-transform: none;
}

.drawerPanel .routinePhraseInput:focus {
  border-color: var(--yellow);
  outline: 2px solid rgba(242, 199, 68, 0.28);
  outline-offset: -2px;
}

code,
.testDetails {
  background: #0b0d0d;
  border: 1px solid #4b473d;
  color: var(--cream);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
  padding: 9px;
}

.finderSearch {
  align-items: stretch;
}

.finderSearch input {
  min-width: 0;
}

.candidateCard p {
  color: #635a48;
  font-size: 12px;
}

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

.actionRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.testDetails {
  display: none;
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
}

.testDetails:not(:empty) {
  display: block;
}

.testReport {
  border-top: 1px dashed rgba(23, 21, 19, 0.38);
  padding-top: 9px;
}

.testReport summary {
  color: #514b40;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.testReport .testDetails {
  margin-top: 9px;
}

.emptyState {
  border: 1px dashed #5b5549;
  color: var(--muted);
  font-size: 12px;
  padding: 13px;
}

@media (max-width: 1120px) {
  .consoleShell {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  }

  .rackGrid {
    grid-template-columns: 1fr;
  }

  .rackModule {
    grid-column: 1;
  }

  .rackHeader {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rackActions {
    grid-column: 1 / -1;
  }

  .identityFields,
  .fieldGrid.two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  body {
    overflow: hidden;
  }

  .topBar {
    height: 70px;
    padding: 10px 12px;
  }

  .brandMark {
    display: none;
  }

  .brandPlate p {
    display: none;
  }

  .systemStrip {
    border: 0;
    padding: 0;
  }

  .systemState {
    display: none;
  }

  .quietButton {
    display: none;
  }

  /* Scrolls sideways rather than dividing the width by however many views
     there are.
     It was a four-column grid inside a fixed 48px, so adding a fifth button
     did not squeeze the others — it wrapped onto a second row that the height
     could not hold, and the overflow drew straight over the heading beneath.
     A row that scrolls cannot do that, and it does not have to be revisited
     the next time a view is added. */
  .mobileViewSwitch {
    background: #090a0a;
    border-bottom: 3px solid #050606;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    height: 48px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 5px;
    scroll-snap-type: x proximity;
    /* The bar is chrome; a scrollbar through it would read as a fault. It stays
       scrollable — this hides the indicator, not the behaviour. */
    scrollbar-width: none;
  }

  .mobileViewSwitch::-webkit-scrollbar { display: none; }

  .mobileViewSwitch button {
    background: #232625;
    border: 1px solid #4a463c;
    box-shadow: none;
    color: var(--cream);
    /* Enough of the next one shows to say the row moves. */
    flex: 1 0 auto;
    min-height: 34px;
    min-width: 0;
    overflow: hidden;
    padding: 0 12px;
    scroll-snap-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobileViewSwitch button.active {
    background: var(--yellow);
    color: var(--ink);
  }

  .consoleShell {
    display: block;
    height: calc(100dvh - 118px);
  }

  .stationBank,
  .stationRack {
    height: 100%;
  }

  .stationBank {
    border-right: 0;
    padding: 12px;
  }

  .stationRack {
    display: none;
    padding: 0 10px 22px;
  }

  body[data-mobile-view="rack"] .stationBank {
    display: none;
  }

  body[data-mobile-view="rack"] .stationRack {
    display: block;
  }

  .rackHeader {
    gap: 9px;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    padding: 12px 10px;
  }

  .mobileBack {
    display: inline-flex;
  }

  .rackIndicators {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .rackActions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .rackActions button {
    flex: 1;
  }

  .rackGrid {
    gap: 10px;
  }

  .rackModule {
    padding: 12px;
  }

  .membershipGrid {
    grid-template-columns: 1fr;
  }

  .moduleHeader {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .moduleHeader > :last-child {
    grid-column: 1 / -1;
  }

  .moduleHeader .panelScrew {
    display: none;
  }

  .routineControls {
    align-items: stretch;
    display: grid;
  }

  .drawerPanel {
    border-left: 0;
    padding: 14px;
    width: 100vw;
  }

  .settingsPanel {
    padding: 0;
  }

  .timeWindowGrid {
    grid-template-columns: 1fr;
  }

  .settingsSaveBar {
    align-items: stretch;
    flex-direction: column;
    position: static;
  }

  .settingsSaveBar button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .topBar h1 {
    font-size: 25px;
  }

  .saveButton {
    padding: 0 5px;
  }

  .publishButton {
    padding: 0 5px;
  }

  .systemStrip {
    gap: 5px;
  }

  .systemStrip button {
    font-size: 10px;
  }

  .bankHeader h2 {
    font-size: 28px;
  }

  .bankStats strong {
    font-size: 18px;
  }

  .stationItem {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .stationMetaRow {
    align-items: flex-start;
    display: grid;
    gap: 3px;
  }

  .stationMetaRow > span:last-child {
    max-width: 100%;
  }

  .copyLine,
  .finderSearch {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Palette correction: late-80s / early-90s institutional broadcast studio. */

:root {
  --studio-black: #101719;
  --studio-coal: #1c292b;
  --studio-panel: #34484b;
  --studio-olive: #78877d;
  --studio-blue: #76949a;
  --studio-cream: #eee8d8;
  --studio-paper: #d8d4c8;
  --studio-amber: #d98938;
  --studio-gold: #e2bd5d;
  --studio-red: #cf4b38;
  --studio-mint: #8dab9b;
  --studio-walnut: #64675f;
  --studio-shadow: 0 15px 28px rgba(18, 26, 27, 0.3), 0 3px 0 rgba(24, 30, 29, 0.62);
}

body {
  background:
    linear-gradient(90deg, rgba(38, 52, 53, 0.11) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px) 0 0 / 28px 28px,
    #858a82;
}

body::before {
  background:
    repeating-radial-gradient(circle at 30% 20%, rgba(22, 34, 34, .035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(222, 237, 232, .08), transparent 42%);
  opacity: .42;
}

.bootScreen {
  background:
    radial-gradient(circle at 50% 45%, rgba(112, 155, 158, .18), transparent 34%),
    #111a1c;
}

.bootBadge {
  border-color: #738b8c;
}

.bootReel {
  background: conic-gradient(from 20deg, #b9c6c2 0 12%, #253538 12% 24%, #b9c6c2 24% 45%, #253538 45% 56%, #b9c6c2 56% 76%, #253538 76% 88%, #b9c6c2 88%);
  border-color: #e6dfcc;
}

.topBar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), transparent 36%),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(221,235,230,.035) 47px 48px),
    #273638;
  border-bottom-color: #141d1e;
  box-shadow: 0 10px 24px rgba(12,19,20,.43), inset 0 -1px 0 #718181;
}

.brandPlate:hover:not(:disabled) {
  filter: drop-shadow(0 0 9px rgba(135, 190, 194, .32));
}

.logoChassis {
  fill: #9db3b2;
  stroke: #eee6d4;
}

.logoReel circle:first-child {
  fill: #e3dcc9;
  stroke: #2e4042;
}

.logoReel path {
  fill: #34494b;
}

.logoReel .reelHub {
  fill: #cf4b38;
  stroke: #2e4042;
}

.logoTape {
  stroke: #bc4939;
}

.brandName {
  color: #f2ecdc;
}

.brandTagline {
  color: #bfcfca;
}

.systemStrip {
  background: linear-gradient(180deg, #46585a, #293739 56%, #1b2729);
  border-color: #82908a;
  box-shadow: inset 0 0 0 3px #172123, 0 4px 11px rgba(12,19,20,.38);
}

.studioClock,
.bankStats {
  background: #121b1d;
  border-color: #687a79;
}

.studioClock strong,
.bankStats strong {
  color: #e0bd63;
}

.systemReadout > span,
.lightSwitch {
  color: #e7e2d3;
}

.lightSwitch {
  background: #303f41;
  border-color: #758482;
}

.quietButton {
  background: linear-gradient(#4b5b5c, #303d3f);
  border-color: #82908a;
  color: #f0ebdc;
}

.consoleShell {
  background: #858a82;
}

.stationBank {
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), transparent 12%, transparent 88%, rgba(5,12,14,.22)),
    repeating-linear-gradient(0deg, transparent 0 117px, rgba(7,16,18,.3) 117px 123px),
    #263638;
  border-right-color: #172123;
  box-shadow: inset -1px 0 #71807d;
}

.bankHeader {
  border-bottom-color: #71807d;
}

.bankHeader h2,
.bankHint strong {
  color: #eee9dc;
}

.moduleCode {
  color: #bdc9c2;
}

.bankHint {
  color: #bdc8c2;
}

.bankFilters {
  background: #152022;
  border-color: #627170;
}

.bankFilters button {
  background: #334244;
  border-color: #73817e;
}

.bankFilters button.active {
  background: linear-gradient(#e6c86f, #cda84d);
  box-shadow: 0 1px 0 #111819, 0 0 10px rgba(226,189,93,.2);
}

.stationItem {
  background: #172224;
  border-color: #76827c;
  box-shadow: 0 5px 0 #11191b, 0 8px 13px rgba(9,17,18,.26), inset 0 1px 0 rgba(255,255,255,.12);
}

.stationItem::after {
  background: #162123;
  border-color: #6f7975;
}

.stationItem:hover {
  border-color: #a8b6ae;
}

.stationItem.active {
  border-color: #e0bd63;
  box-shadow: 0 5px 0 #11191b, 0 0 0 2px rgba(224,189,99,.25), 0 0 18px rgba(224,189,99,.12);
}

.stationOrder {
  background: linear-gradient(90deg, rgba(255,255,255,.05), transparent), #233235;
  border-right-color: #74817d;
}

.stationOrder > span {
  background: #111a1c;
  border-color: #667573;
  color: #e0bd63;
}

.stationOrder button {
  background: linear-gradient(#516062, #354345);
  border-color: #7f8c87;
}

.stationSignal {
  background: #223033;
  border-right-color: #74817d;
}

.stationContent {
  background:
    linear-gradient(90deg, transparent 0 11px, rgba(98, 127, 130, .22) 11px 12px, transparent 12px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(48, 65, 65, .045) 22px 23px),
    #d9d6ca;
}

.stationItem:nth-child(even) .stationContent {
  background-color: #cecbbf;
}

.stationMetaRow {
  color: #586363;
}

.miniTags span {
  background: rgba(51, 71, 72, .08);
  border-color: rgba(51, 71, 72, .3);
  color: #465658;
}

.priorityLabel {
  color: #875f2e;
}

.stationRack {
  background:
    radial-gradient(circle at 82% 6%, rgba(187, 218, 214, .28), transparent 30%),
    linear-gradient(90deg, rgba(30,45,45,.16), transparent 5%, transparent 95%, rgba(30,45,45,.19)),
    repeating-linear-gradient(0deg, #a7aba3 0 32px, #a1a59e 32px 64px, #979d97 64px 66px);
}

.rackHeader {
  background:
    linear-gradient(105deg, rgba(208, 229, 224, .18), transparent 36%),
    linear-gradient(180deg, #60787a, #4c6568 62%, #3c5356);
  border-color: #a9b4ae;
  box-shadow: 0 7px 0 #283638, 0 15px 26px rgba(20,31,32,.31), inset 0 1px rgba(255,255,255,.17);
}

.rackIdentity h2 {
  color: #f1ecdf;
  text-shadow: 0 2px #35494b;
}

.rackIdentity p {
  color: #d4ddd8;
}

.meterLabel {
  color: #d3ddd6;
}

.meterFace {
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(66,76,69,.14) 17px 18px),
    linear-gradient(180deg, #e4d9ac, #b6a06d);
  border-color: #273739;
  box-shadow: inset 0 0 12px rgba(66,62,49,.34), 0 0 0 1px #8e9b94;
}

.rackModule {
  background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 67px), #dcd9cf;
  border-color: #596562;
  box-shadow: var(--studio-shadow), inset 0 0 0 4px rgba(255,255,255,.13);
}

.rackModule:hover {
  box-shadow: 0 18px 32px rgba(18,26,27,.34), 0 3px 0 rgba(24,30,29,.62), inset 0 0 0 4px rgba(255,255,255,.16);
}

.identityModule {
  border-top-color: #78949a;
}

.streamModule {
  background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 80px), #40585d;
  border-color: #27383b;
}

.voiceModule {
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 80px), #bcae95;
}

.selectorModule {
  background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 80px), #afc5bf;
}

.modeSetupModule {
  background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 80px), #c8c6b7;
}

.advancedModule {
  background: #beb9ab;
}

.drawerPanel {
  background:
    linear-gradient(180deg, rgba(183,211,207,.08), transparent 130px),
    repeating-linear-gradient(0deg, transparent 0 53px, rgba(255,255,255,.018) 53px 54px),
    #29393b;
  border-left-color: #74827f;
  box-shadow: -8px 0 0 #172123, -34px 0 64px rgba(12,20,21,.5);
}

.mobileViewSwitch {
  background: #1d292b;
}

/* --------------------------------------------------------------------------
   Soundbox control room — 2026 studio rebuild
   -------------------------------------------------------------------------- */

:root {
  --studio-black: #0b0b09;
  --studio-coal: #141613;
  --studio-panel: #232922;
  --studio-olive: #485044;
  --studio-blue: #6c8d90;
  --studio-cream: #f1dfb9;
  --studio-paper: #dfcca3;
  --studio-amber: #f1a23c;
  --studio-gold: #f3c766;
  --studio-red: #e54c2e;
  --studio-mint: #8dbb94;
  --studio-walnut: #3d2118;
  --studio-shadow: 0 18px 35px rgba(4, 3, 2, 0.42), 0 3px 0 rgba(0, 0, 0, 0.7);
}

body {
  background:
    linear-gradient(90deg, rgba(255, 224, 172, 0.025) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(255, 224, 172, 0.018) 1px, transparent 1px) 0 0 / 42px 42px,
    repeating-linear-gradient(90deg, #25130f 0 5px, #321a13 5px 24px, #1c100d 24px 27px, #3a2017 27px 52px);
  font-family: "Arial Narrow", "Avenir Next Condensed", Inter, ui-sans-serif, system-ui, sans-serif;
}

body::before {
  background:
    repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(255, 180, 82, 0.05), transparent 36%);
  content: "";
  inset: 0;
  opacity: 0.6;
  pointer-events: none;
  position: fixed;
  z-index: 50;
}

body[data-studio-light="dim"] .stationRack,
body[data-studio-light="dim"] .stationBank,
body[data-studio-light="dim"] .topBar {
  filter: brightness(0.78) saturate(0.88);
}

button {
  border-radius: 4px;
  box-shadow: 0 4px 0 #080806, inset 0 1px 0 rgba(255,255,255,.42);
  letter-spacing: 0.015em;
  transition: filter 120ms ease, transform 120ms cubic-bezier(.2,.9,.3,1.4), box-shadow 120ms ease;
}

input,
textarea,
select {
  background: #fff2d3;
  border: 1px solid #30241c;
  border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(44, 28, 17, 0.18), 0 1px 0 rgba(255,255,255,.48);
}

.bootScreen {
  align-items: center;
  animation: bootOut 1200ms 160ms cubic-bezier(.7,0,.2,1) forwards;
  background:
    radial-gradient(circle at 50% 45%, rgba(240, 153, 48, 0.12), transparent 34%),
    #0b0b09;
  color: var(--studio-cream);
  display: flex;
  flex-direction: column;
  gap: 10px;
  inset: 0;
  justify-content: center;
  letter-spacing: .14em;
  pointer-events: none;
  position: fixed;
  text-transform: uppercase;
  z-index: 100;
}

body:not(.is-booting) .bootScreen {
  display: none;
}

.bootScreen strong {
  font-size: clamp(30px, 5vw, 56px);
  letter-spacing: -.045em;
  text-transform: none;
}

.bootScreen > span {
  animation: readoutBlink 700ms steps(2) infinite;
  color: #b7a27c;
  font: 800 9px/1.2 ui-monospace, monospace;
}

.bootBadge {
  align-items: center;
  border: 2px solid #765938;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  height: 62px;
  justify-content: center;
  position: relative;
  width: 108px;
}

.bootReel {
  animation: reelSpin 900ms linear infinite;
  background: conic-gradient(from 20deg, #d69a45 0 12%, #2a1a13 12% 24%, #d69a45 24% 45%, #2a1a13 45% 56%, #d69a45 56% 76%, #2a1a13 76% 88%, #d69a45 88%);
  border: 4px solid #e8c887;
  border-radius: 50%;
  height: 34px;
  width: 34px;
}

.bootTape {
  border-bottom: 2px solid var(--studio-red);
  border-radius: 50%;
  bottom: 5px;
  height: 18px;
  left: 27px;
  position: absolute;
  width: 54px;
}

.topBar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 35%),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(242,209,151,.025) 47px 48px),
    #151812;
  border-bottom: 6px solid #080806;
  box-shadow: 0 12px 28px rgba(0,0,0,.55), inset 0 -1px 0 #55513f;
  height: 92px;
  padding: 10px 16px;
  transition: filter 420ms ease;
}

.brandPlate {
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  color: var(--studio-cream);
  gap: 11px;
  min-height: 0;
  padding: 3px 6px 3px 2px;
  text-align: left;
}

.brandPlate:hover:not(:disabled) {
  filter: drop-shadow(0 0 9px rgba(241,162,60,.26));
  transform: rotate(-.4deg) scale(1.015);
}

.brandPlate:active:not(:disabled) {
  box-shadow: none;
  transform: rotate(.35deg) scale(.99);
}

.brandMark {
  background: transparent;
  border: 0;
  display: block;
  flex: 0 0 76px;
  height: 58px;
  overflow: visible;
  padding: 0;
  width: 76px;
}

.logoChassis {
  fill: #d69a45;
  stroke: #f4d79f;
  stroke-width: 3;
}

.logoReel circle:first-child {
  fill: #eac47a;
  stroke: #35231b;
  stroke-width: 3;
}

.logoReel path {
  fill: #35231b;
}

.logoReel .reelHub {
  fill: var(--studio-red);
  stroke: #35231b;
  stroke-width: 2;
}

.logoTape {
  fill: none;
  stroke: #d53f2c;
  stroke-linecap: round;
  stroke-width: 4;
}

.logoLiveDot {
  animation: livePulse 1800ms ease-in-out infinite;
  fill: #ee3f29;
  filter: drop-shadow(0 0 4px #ee3f29);
}

body[data-machine-state="working"] .logoReel,
body[data-machine-state="testing"] .logoReel,
body[data-machine-state="publishing"] .logoReel,
body.is-tuning .logoReel {
  animation: reelSpin 600ms linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

body.is-tuning .brandMark {
  animation: tunerWobble 720ms cubic-bezier(.2,.8,.2,1);
}

.brandWords {
  display: grid;
}

.brandName {
  color: #fff0cc;
  font-size: clamp(27px, 3vw, 39px);
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: .84;
  text-transform: lowercase;
}

.brandTagline {
  color: #d4b477;
  font: 900 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  margin-top: 7px;
  text-transform: uppercase;
}

.systemStrip {
  background:
    linear-gradient(180deg, #383c34, #171a16 55%, #10120f);
  border: 1px solid #625d49;
  border-radius: 5px;
  box-shadow: inset 0 0 0 3px #090a08, 0 4px 12px rgba(0,0,0,.45);
  gap: 7px;
  padding: 7px;
}

.studioClock {
  background: #090a08;
  border: 1px solid #5c553f;
  border-radius: 3px;
  display: grid;
  min-width: 58px;
  padding: 6px 8px;
  text-align: center;
}

.studioClock span,
.systemReadout small {
  color: #776e58;
  font: 800 7px/1 ui-monospace, monospace;
  letter-spacing: .1em;
}

.studioClock strong {
  color: var(--studio-gold);
  font: 900 15px/1.15 ui-monospace, monospace;
  text-shadow: 0 0 8px rgba(243,199,102,.38);
}

.systemState {
  background: transparent;
  border: 0;
  box-shadow: none;
  justify-content: flex-start;
  min-height: 0;
  min-width: 156px;
  padding: 0 5px;
  text-align: left;
}

.systemState:hover:not(:disabled),
.systemState:active:not(:disabled) {
  box-shadow: none;
  filter: brightness(1.12);
  transform: none;
}

.systemReadout {
  display: grid;
  gap: 3px;
  max-width: 180px;
}

.systemReadout > span {
  color: #ead7ac;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.systemLed {
  border-color: #dfca9a;
  box-shadow: 0 0 12px rgba(83, 199, 111, .9), inset 0 0 3px white;
  flex: 0 0 auto;
}

.lightSwitch {
  background: #22251f;
  color: #e8d5aa;
  flex-direction: column;
  font-size: 8px;
  gap: 2px;
  min-width: 48px;
  padding: 4px 8px;
  text-transform: uppercase;
}

.lightBulb {
  background: #ffc45f;
  border: 2px solid #ead5a9;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255,181,72,.86);
  height: 10px;
  transition: 300ms ease;
  width: 10px;
}

.lightSwitch[aria-pressed="true"] .lightBulb {
  background: #5f5847;
  box-shadow: none;
}

.quietButton {
  background: linear-gradient(#373a33, #20231e);
  border-color: #6f6752;
  color: #f0dfbb;
}

.saveButton {
  background: linear-gradient(#f2ce72, #d99831);
  color: #2e1d13;
}

.publishButton {
  background: linear-gradient(#9dcc9f, #568b62);
  color: #102718;
}

body[data-machine-state="working"] .saveButton:not(:disabled),
body[data-machine-state="publishing"] .publishButton:not(:disabled) {
  animation: workingButton 700ms ease-in-out infinite alternate;
}

.consoleShell {
  grid-template-columns: minmax(330px, 365px) minmax(0, 1fr);
  height: calc(100dvh - 92px);
}

.stationBank {
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), transparent 12%, transparent 88%, rgba(0,0,0,.35)),
    repeating-linear-gradient(0deg, transparent 0 117px, rgba(0,0,0,.46) 117px 123px),
    #171a16;
  border-right: 8px solid #090907;
  box-shadow: inset -1px 0 #5c4b37;
  padding: 18px 16px;
  transition: filter 420ms ease;
}

.bankHeader {
  border-bottom: 1px solid #615845;
  margin-bottom: 11px;
  padding: 0 1px 11px;
}

.bankHeader h2 {
  color: #f3dfb8;
  font-size: 31px;
  letter-spacing: -.045em;
}

.bankHeader button {
  background: linear-gradient(#97bd98, #5f8d68);
}

.moduleCode {
  color: #c3a76f;
  font-size: 8px;
  letter-spacing: .2em;
}

.bankStats {
  background: #0b0d0a;
  border: 1px solid #56503f;
  border-radius: 4px;
  box-shadow: inset 0 0 10px rgba(0,0,0,.8);
}

.bankStats strong {
  color: #f1b554;
  font-family: ui-monospace, monospace;
  text-shadow: 0 0 8px rgba(241,181,84,.3);
}

.bankHint {
  color: #bcae90;
}

.searchField input {
  border: 1px solid #665d49;
  box-shadow: inset 0 2px 9px #000;
}

.bankFilters {
  border-radius: 4px;
  box-shadow: inset 0 0 8px #000;
}

.bankFilters button {
  border-radius: 3px;
  box-shadow: 0 2px 0 #050604;
}

.bankFilters button.active {
  background: linear-gradient(#f3cc68, #d89a35);
  box-shadow: 0 1px 0 #050604, 0 0 10px rgba(243,204,104,.2);
}

.stationList {
  gap: 10px;
  padding: 4px 8px 24px 3px;
}

.stationItem {
  background: #0b0c0a;
  border: 1px solid #5d5645;
  border-radius: 7px;
  box-shadow: 0 5px 0 #070806, 0 8px 13px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.1);
  grid-template-columns: 45px minmax(0, 1fr);
  min-height: 108px;
  overflow: hidden;
  position: relative;
  transform-origin: left center;
  transition: border-color 140ms ease, transform 160ms ease-out, box-shadow 180ms ease;
}

.stationItem::after {
  background: #0a0b09;
  border: 1px solid #544d3e;
  border-radius: 50%;
  bottom: -8px;
  content: "";
  height: 16px;
  position: absolute;
  right: 28px;
  width: 16px;
}

.stationItem:hover {
  border-color: #9f865a;
  transform: translateX(3px);
}

.stationItem.active {
  border-color: var(--studio-amber);
  box-shadow: 0 5px 0 #070806, 0 0 0 2px rgba(241,162,60,.23), 0 0 20px rgba(241,162,60,.15);
  transform: translateX(5px);
}

.stationOrder {
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), transparent),
    #171a15;
  border-right: 1px solid #625a47;
}

.stationOrder > span {
  background: #080906;
  border: 1px solid #4d4738;
  border-radius: 2px;
  color: #efb85b;
  padding: 3px 5px;
}

.stationOrder button {
  background: linear-gradient(#41443d, #242720);
  border-color: #66604f;
  border-radius: 3px;
  box-shadow: 0 2px 0 #050604;
}

.stationSelect {
  grid-template-columns: 22px minmax(0, 1fr);
}

.stationSignal {
  background: #151713;
  border-right: 1px solid #5c5544;
}

.stationSignal i {
  animation: signalBreathe 2300ms ease-in-out infinite;
  height: 8px;
  width: 8px;
}

.stationContent {
  background:
    linear-gradient(90deg, transparent 0 11px, rgba(160,61,38,.23) 11px 12px, transparent 12px),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(55,38,23,.045) 22px 23px),
    #dbc89e;
  color: #221b14;
  gap: 7px;
  margin: 8px 8px 8px 0;
  padding: 10px 10px 9px 19px;
  transform: rotate(-.15deg);
}

.stationItem:nth-child(even) .stationContent {
  background-color: #d2bc91;
  transform: rotate(.18deg);
}

.stationTop strong {
  color: #251c14;
  font-size: 13px;
}

.stationMetaRow {
  color: #6a5741;
  font-size: 10px;
}

.miniTags span {
  background: rgba(49,37,26,.08);
  border-color: rgba(49,37,26,.32);
  color: #594631;
}

.priorityLabel {
  color: #7b3b27;
}

.statusDot {
  border: 1px solid rgba(28,23,17,.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.stationRack {
  background:
    radial-gradient(circle at 82% 6%, rgba(248,165,59,.18), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.22), transparent 5%, transparent 95%, rgba(0,0,0,.3)),
    repeating-linear-gradient(90deg, #40251b 0 34px, #4d2a1d 34px 70px, #311c16 70px 73px);
  padding: 0 20px 38px;
  transition: filter 420ms ease;
}

.rackHeader {
  background:
    linear-gradient(105deg, rgba(247,170,68,.2), transparent 34%),
    linear-gradient(180deg, #394238, #252b25 62%, #1a1f1a);
  border: 1px solid #81775f;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 7px 0 #11130f, 0 16px 28px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.12);
  color: var(--studio-cream);
  gap: 14px;
  grid-template-columns: minmax(210px, 1fr) 190px auto auto;
  margin-bottom: 21px;
  min-height: 126px;
  padding: 19px 18px 17px;
}

.rackIdentity h2 {
  color: #ffedc8;
  font-size: clamp(28px, 3.2vw, 45px);
  letter-spacing: -.055em;
  text-shadow: 0 2px #0d0f0c;
}

.rackIdentity p {
  color: #c3b698;
}

.masterMeter {
  display: grid;
  gap: 4px;
}

.meterLabel {
  color: #bdae8a;
  font: 900 7px/1 ui-monospace, monospace;
  letter-spacing: .18em;
  text-align: center;
}

.meterFace {
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(76,51,27,.15) 17px 18px),
    linear-gradient(180deg, #f0d797, #b98645);
  border: 3px solid #11130f;
  border-radius: 48% 48% 6px 6px / 72% 72% 6px 6px;
  box-shadow: inset 0 0 12px rgba(76,44,20,.45), 0 0 0 1px #756b56;
  height: 66px;
  overflow: hidden;
  position: relative;
}

.meterFace::after {
  background: linear-gradient(90deg, transparent 74%, rgba(177,36,24,.26) 74%);
  content: "";
  inset: 0;
  position: absolute;
}

.meterTicks {
  color: #4d3825;
  font: 800 8px/1 ui-monospace, monospace;
  left: 12px;
  position: absolute;
  right: 12px;
  text-align: center;
  top: 12px;
  white-space: nowrap;
}

.meterNeedle {
  --needle-angle: -34deg;
  background: #a52a1e;
  bottom: -4px;
  height: 54px;
  left: calc(50% - 1px);
  position: absolute;
  transform: rotate(var(--needle-angle));
  transform-origin: 50% 100%;
  transition: transform 280ms cubic-bezier(.2,.9,.3,1.25);
  width: 2px;
  z-index: 2;
}

.meterPivot {
  background: #282018;
  border: 3px solid #b18f59;
  border-radius: 50%;
  bottom: -7px;
  height: 17px;
  left: calc(50% - 8px);
  position: absolute;
  width: 17px;
  z-index: 3;
}

body[data-machine-state="testing"] .meterNeedle,
body[data-machine-state="publishing"] .meterNeedle {
  animation: needleDance 550ms ease-in-out infinite alternate;
}

.stateLamp {
  border: 2px solid #11130f;
  box-shadow: 0 2px 0 #0b0c09, inset 0 1px white;
}

.rackActions button {
  border-color: #0c0d0a;
}

.rackGrid {
  gap: 18px;
}

.rackModule {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), transparent 67px),
    #e8d6ad;
  border: 1px solid #3e3024;
  border-radius: 7px;
  box-shadow: var(--studio-shadow), inset 0 0 0 4px rgba(255,255,255,.12);
  gap: 16px;
  padding: 18px;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

.rackModule:hover {
  box-shadow: 0 21px 38px rgba(4,3,2,.46), 0 3px 0 rgba(0,0,0,.7), inset 0 0 0 4px rgba(255,255,255,.14);
  transform: translateY(-2px);
}

.rackModule::before,
.rackModule::after {
  background: radial-gradient(circle, #3f382d 0 2px, #a99875 2px 4px, #30291f 4px 5px, transparent 5px);
}

.identityModule {
  border-top: 5px solid #cf7c37;
}

.streamModule {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 80px),
    #273432;
  border-color: #101715;
}

body[data-machine-state="testing"] .streamModule {
  animation: signalPanel 800ms ease-in-out infinite alternate;
}

.voiceModule {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 80px),
    #c47b36;
}

.selectorModule {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), transparent 80px),
    #a8c3b4;
}

.modeSetupModule {
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), transparent 80px),
    #c6c7a6;
}

.advancedModule {
  background: #c2af87;
}

.moduleHeader {
  border-bottom-width: 1px;
}

.moduleNumber,
.settingsSectionNumber {
  background: #1d211c;
  border: 2px solid #090a08;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #4d4a3d, 0 2px 0 rgba(255,255,255,.2);
  color: #f5bd56;
}

.fieldInfo summary {
  background: rgba(255,255,255,.16);
}

.powerSwitch .toggleTrack {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px rgba(255,255,255,.1);
}

.powerSwitch input:checked + .toggleTrack {
  background: #6dab78;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 0 12px rgba(109,171,120,.3);
}

.voiceOutput,
.learningSummary,
.membershipCard,
.modeSummary {
  border-radius: 5px;
  box-shadow: inset 0 2px 5px rgba(39,27,18,.12);
}

.learningMeter {
  border-radius: 999px;
}

.learningMeter span {
  transition: width 280ms cubic-bezier(.2,.8,.2,1);
}

.learningNudges button,
.modeSwitches button,
.membershipCard button {
  box-shadow: 0 4px 0 #0b0d0a, inset 0 1px rgba(255,255,255,.18);
}

.learningNudges button.active,
.modeSwitches button.active,
.membershipCard button.active {
  box-shadow: 0 2px 0 #0b0d0a, 0 0 13px rgba(255,184,78,.22), inset 0 1px rgba(255,255,255,.48);
  transform: translateY(2px);
}

.drawer {
  backdrop-filter: blur(4px);
  background: rgba(4,4,3,.78);
  transition: opacity 240ms ease, visibility 0s linear 260ms;
}

.drawerPanel {
  background:
    linear-gradient(180deg, rgba(255,171,68,.07), transparent 130px),
    repeating-linear-gradient(0deg, transparent 0 53px, rgba(255,255,255,.015) 53px 54px),
    #1d241f;
  border-left: 8px solid #331d15;
  box-shadow: -8px 0 0 #0c0d0b, -36px 0 70px rgba(0,0,0,.64);
  transform: translateX(60px) rotateY(-2deg);
  transition: transform 320ms cubic-bezier(.16,.86,.26,1.05);
}

.drawer.open .drawerPanel {
  transform: translateX(0) rotateY(0);
}

.routineCard,
.candidateCard,
.nativeStopCard {
  border: 1px solid #33291f;
  border-radius: 6px;
  box-shadow: 0 5px 0 #0b0c0a, 0 12px 18px rgba(0,0,0,.2);
}

.mobileViewSwitch {
  background: #10120f;
}

@keyframes bootOut {
  0%, 68% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.025); visibility: hidden; }
}

@keyframes readoutBlink {
  50% { opacity: .42; }
}

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

@keyframes livePulse {
  50% { opacity: .52; filter: drop-shadow(0 0 1px #ee3f29); }
}

@keyframes tunerWobble {
  20% { transform: rotate(-4deg) scale(1.05); }
  45% { transform: rotate(3deg) scale(1.05); }
  70% { transform: rotate(-2deg); }
}

@keyframes workingButton {
  to { filter: brightness(1.16); box-shadow: 0 4px 0 #080806, 0 0 17px rgba(243,199,102,.3), inset 0 1px white; }
}

@keyframes signalBreathe {
  50% { filter: brightness(1.22); transform: scale(1.14); }
}

@keyframes needleDance {
  from { transform: rotate(-9deg); }
  to { transform: rotate(49deg); }
}

@keyframes signalPanel {
  to { box-shadow: var(--studio-shadow), 0 0 25px rgba(100,184,138,.3), inset 0 0 0 4px rgba(255,255,255,.12); }
}

@media (max-width: 1180px) {
  .studioClock {
    display: none;
  }

  .systemState {
    min-width: 125px;
  }

  .rackHeader {
    grid-template-columns: minmax(200px, 1fr) 160px auto;
  }

  .rackActions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1120px) {
  .consoleShell {
    grid-template-columns: minmax(300px, 330px) minmax(0, 1fr);
  }

  .masterMeter {
    width: 170px;
  }

  .rackHeader {
    grid-template-columns: minmax(0, 1fr) 170px;
  }

  .rackIndicators {
    grid-column: 1;
    justify-content: flex-start;
  }

  .rackActions {
    grid-column: 2;
  }
}

@media (max-width: 840px) {
  body::before {
    display: none;
  }

  .topBar {
    height: 78px;
    padding: 8px 9px;
  }

  .brandPlate {
    display: flex;
    gap: 6px;
    padding: 0;
  }

  .brandMark {
    display: block;
    flex-basis: 47px;
    height: 43px;
    width: 47px;
  }

  .brandName {
    font-size: 23px;
  }

  .brandTagline,
  .systemState,
  .studioClock,
  .lightSwitch span:last-child {
    display: none;
  }

  .systemStrip {
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 4px;
    padding: 0;
  }

  .systemStrip .lightSwitch {
    display: inline-flex;
    min-width: 32px;
    padding: 3px;
  }

  .saveButton,
  .publishButton {
    font-size: 9px;
    line-height: 1.05;
    max-width: 67px;
    padding: 0 6px;
  }

  .mobileViewSwitch {
    border-bottom: 4px solid #090a08;
    box-shadow: 0 4px 12px rgba(0,0,0,.45);
  }

  .consoleShell {
    height: calc(100dvh - 126px);
  }

  .stationBank {
    padding: 12px 11px;
  }

  .stationRack {
    padding: 0 10px 26px;
  }

  .bankHeader h2 {
    font-size: 27px;
  }

  .stationItem.active {
    transform: translateX(2px);
  }

  .rackHeader {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 12px 10px;
  }

  .masterMeter {
    display: none;
  }

  .rackIndicators,
  .rackActions {
    grid-column: 1 / -1;
  }

  .rackModule:hover {
    transform: none;
  }

  .drawerPanel {
    border-left: 0;
    border-top: 7px solid #3c2117;
    transform: translateY(30px);
  }

  .drawer.open .drawerPanel {
    transform: translateY(0);
  }
}

@media (max-width: 430px) {
  .brandMark {
    display: none;
  }

  .brandName {
    font-size: 22px;
  }

  .brandTagline {
    display: none;
  }

  .systemStrip button {
    min-height: 35px;
  }

  .stationContent {
    padding-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bootScreen {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .stationItem.active,
  .rackModule:hover,
  body.station-switching .rackGrid {
    transform: none;
  }
}

/* Final palette layer: cooler 1990 broadcast-room hardware. */

:root {
  --studio-black: #101719;
  --studio-coal: #1c292b;
  --studio-panel: #34484b;
  --studio-olive: #78877d;
  --studio-blue: #76949a;
  --studio-cream: #eee8d8;
  --studio-paper: #d8d4c8;
  --studio-amber: #d98938;
  --studio-gold: #e2bd5d;
  --studio-red: #cf4b38;
  --studio-mint: #8dab9b;
  --studio-walnut: #64675f;
  --studio-shadow: 0 15px 28px rgba(18, 26, 27, .3), 0 3px 0 rgba(24, 30, 29, .62);
}

body {
  background:
    linear-gradient(90deg, rgba(38, 52, 53, .11) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(0deg, rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / 28px 28px,
    #858a82;
}

body::before {
  background: repeating-radial-gradient(circle at 30% 20%, rgba(22,34,34,.035) 0 1px, transparent 1px 4px);
  opacity: .42;
}

.bootScreen {
  background: radial-gradient(circle at 50% 45%, rgba(112,155,158,.18), transparent 34%), #111a1c;
}

.bootBadge { border-color: #738b8c; }
.bootReel {
  background: conic-gradient(from 20deg, #b9c6c2 0 12%, #253538 12% 24%, #b9c6c2 24% 45%, #253538 45% 56%, #b9c6c2 56% 76%, #253538 76% 88%, #b9c6c2 88%);
  border-color: #e6dfcc;
}

.topBar {
  background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 36%), repeating-linear-gradient(90deg, transparent 0 47px, rgba(221,235,230,.035) 47px 48px), #273638;
  border-bottom-color: #141d1e;
  box-shadow: 0 10px 24px rgba(12,19,20,.43), inset 0 -1px 0 #718181;
}

.brandPlate:hover:not(:disabled) { filter: drop-shadow(0 0 9px rgba(135,190,194,.32)); }
.logoChassis { fill: #9db3b2; stroke: #eee6d4; }
.logoReel circle:first-child { fill: #e3dcc9; stroke: #2e4042; }
.logoReel path { fill: #34494b; }
.logoReel .reelHub { fill: #cf4b38; stroke: #2e4042; }
.logoTape { stroke: #bc4939; }
.brandName { color: #f2ecdc; }
.brandTagline { color: #bfcfca; }

.systemStrip {
  background: linear-gradient(180deg, #46585a, #293739 56%, #1b2729);
  border-color: #82908a;
  box-shadow: inset 0 0 0 3px #172123, 0 4px 11px rgba(12,19,20,.38);
}

.studioClock,
.bankStats { background: #121b1d; border-color: #687a79; }
.studioClock strong,
.bankStats strong { color: #e0bd63; }
.systemReadout > span,
.lightSwitch { color: #e7e2d3; }
.lightSwitch { background: #303f41; border-color: #758482; }
.quietButton { background: linear-gradient(#4b5b5c, #303d3f); border-color: #82908a; color: #f0ebdc; }

.consoleShell { background: #858a82; }

.stationBank {
  background: linear-gradient(90deg, rgba(255,255,255,.045), transparent 12%, transparent 88%, rgba(5,12,14,.22)), repeating-linear-gradient(0deg, transparent 0 117px, rgba(7,16,18,.3) 117px 123px), #263638;
  border-right-color: #172123;
  box-shadow: inset -1px 0 #71807d;
}

.bankHeader { border-bottom-color: #71807d; }
.bankHeader h2,
.bankHint strong { color: #eee9dc; }
.moduleCode { color: #bdc9c2; }
.bankHint { color: #bdc8c2; }
.bankFilters { background: #152022; border-color: #627170; }
.bankFilters button { background: #334244; border-color: #73817e; }
.bankFilters button.active { background: linear-gradient(#e6c86f, #cda84d); }

.stationItem {
  background: #172224;
  border-color: #76827c;
  box-shadow: 0 5px 0 #11191b, 0 8px 13px rgba(9,17,18,.26), inset 0 1px 0 rgba(255,255,255,.12);
}

.stationItem::after { background: #162123; border-color: #6f7975; }
.stationItem:hover { border-color: #a8b6ae; }
.stationItem.active { border-color: #e0bd63; box-shadow: 0 5px 0 #11191b, 0 0 0 2px rgba(224,189,99,.25), 0 0 18px rgba(224,189,99,.12); }
.stationOrder { background: linear-gradient(90deg, rgba(255,255,255,.05), transparent), #233235; border-right-color: #74817d; }
.stationOrder > span { background: #111a1c; border-color: #667573; color: #e0bd63; }
.stationOrder button { background: linear-gradient(#516062, #354345); border-color: #7f8c87; }
.stationSignal { background: #223033; border-right-color: #74817d; }

.stationContent {
  background: linear-gradient(90deg, transparent 0 11px, rgba(98,127,130,.22) 11px 12px, transparent 12px), repeating-linear-gradient(0deg, transparent 0 22px, rgba(48,65,65,.045) 22px 23px), #d9d6ca;
}

.stationItem:nth-child(even) .stationContent { background-color: #cecbbf; }
.stationMetaRow { color: #586363; }
.miniTags span { background: rgba(51,71,72,.08); border-color: rgba(51,71,72,.3); color: #465658; }
.priorityLabel { color: #875f2e; }

.stationRack {
  background: radial-gradient(circle at 82% 6%, rgba(187,218,214,.28), transparent 30%), linear-gradient(90deg, rgba(30,45,45,.16), transparent 5%, transparent 95%, rgba(30,45,45,.19)), repeating-linear-gradient(0deg, #a7aba3 0 32px, #a1a59e 32px 64px, #979d97 64px 66px);
}

.rackHeader {
  background: linear-gradient(105deg, rgba(208,229,224,.18), transparent 36%), linear-gradient(180deg, #60787a, #4c6568 62%, #3c5356);
  border-color: #a9b4ae;
  box-shadow: 0 7px 0 #283638, 0 15px 26px rgba(20,31,32,.31), inset 0 1px rgba(255,255,255,.17);
}

.rackIdentity h2 { color: #f1ecdf; text-shadow: 0 2px #35494b; }
.rackIdentity p,
.meterLabel { color: #d4ddd8; }
.meterFace { background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(66,76,69,.14) 17px 18px), linear-gradient(180deg, #e4d9ac, #b6a06d); border-color: #273739; }

.rackModule {
  background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 67px), #dcd9cf;
  border-color: #596562;
  box-shadow: var(--studio-shadow), inset 0 0 0 4px rgba(255,255,255,.13);
}

.rackModule:hover { box-shadow: 0 18px 32px rgba(18,26,27,.34), 0 3px 0 rgba(24,30,29,.62), inset 0 0 0 4px rgba(255,255,255,.16); }
.identityModule { border-top-color: #78949a; }
.streamModule { background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 80px), #40585d; border-color: #27383b; }
.voiceModule { background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 80px), #bcae95; }
.selectorModule { background: linear-gradient(180deg, rgba(255,255,255,.32), transparent 80px), #afc5bf; }
.modeSetupModule { background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 80px), #c8c6b7; }
.advancedModule { background: #beb9ab; }

.drawerPanel {
  background: linear-gradient(180deg, rgba(183,211,207,.08), transparent 130px), repeating-linear-gradient(0deg, transparent 0 53px, rgba(255,255,255,.018) 53px 54px), #29393b;
  border-left-color: #74827f;
  box-shadow: -8px 0 0 #172123, -34px 0 64px rgba(12,20,21,.5);
}

.mobileViewSwitch { background: #1d292b; }

/* Responsive density: keep the cart library useful on short control-room screens. */

@media (max-height: 760px) and (min-width: 841px) {
  .stationBank {
    padding: 12px 14px;
  }

  .bankHeader {
    margin-bottom: 7px;
    padding-bottom: 7px;
  }

  .bankHeader h2 {
    font-size: 27px;
  }

  .bankStats {
    margin-bottom: 6px;
  }

  .bankStats span {
    padding: 5px 7px;
  }

  .bankStats strong {
    font-size: 16px;
  }

  .bankHint {
    display: none;
  }

  .searchField > span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .searchField input {
    min-height: 36px;
    padding: 7px 9px;
  }

  .bankFilters {
    margin: 6px 0;
    padding: 3px;
  }

  .bankFilters button {
    min-height: 28px;
  }

  .stationList {
    gap: 7px;
  }
}

@media (max-width: 840px) {
  .stationBank {
    padding: 10px;
  }

  .bankHeader {
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  .bankHeader h2 {
    font-size: 26px;
  }

  .bankStats {
    margin-bottom: 6px;
  }

  .bankStats span {
    padding: 5px 7px;
  }

  .bankStats strong {
    font-size: 17px;
  }

  .bankHint {
    display: none;
  }

  .searchField > span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .searchField input {
    min-height: 36px;
    padding: 7px 9px;
  }

  .bankFilters {
    gap: 3px;
    margin: 6px 0;
    padding: 3px;
  }

  .bankFilters button {
    min-height: 29px;
  }

  .stationList {
    gap: 8px;
  }
}

/* Console composition and legibility pass. */

body::before {
  opacity: .14;
}

label {
  font-size: 11px;
  letter-spacing: .065em;
  line-height: 1.2;
  position: relative;
}

input,
textarea,
select {
  font-size: 13px;
  font-weight: 650;
}

h3 {
  font-size: 18px;
}

.moduleCode {
  font-size: 9px;
  letter-spacing: .16em;
}

.bankHint,
.routineControls p,
.selectorHint {
  font-size: 12px;
}

.stationTop strong {
  font-size: 14px;
}

.stationMetaRow {
  font-size: 11px;
  line-height: 1.25;
}

.miniTags span,
.priorityLabel {
  font-size: 9px;
}

.fieldHelp,
.modeIntro,
.sectionIntro,
.modeDetail,
.modeGuide,
.fieldInfo p {
  font-size: 12px;
}

.rackModule {
  background: linear-gradient(180deg, rgba(255,255,255,.24), transparent 62px), #cfd1cc;
  box-shadow: 0 9px 18px rgba(18,26,27,.25), 0 3px 0 rgba(24,30,29,.5), inset 0 0 0 3px rgba(255,255,255,.1);
}

.rackModule:hover {
  box-shadow: 0 11px 22px rgba(18,26,27,.28), 0 3px 0 rgba(24,30,29,.5), inset 0 0 0 3px rgba(255,255,255,.12);
  transform: none;
}

.streamModule {
  background: linear-gradient(180deg, rgba(255,255,255,.075), transparent 72px), #40585d;
}

.voiceModule {
  background: linear-gradient(180deg, rgba(255,255,255,.17), transparent 72px), #b8ad99;
}

.selectorModule {
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 72px), #afc5bf;
}

.modeSetupModule {
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 72px), #c3c2b5;
}

.identityFields > .stationLinks {
  grid-column: 1 / -1;
}

label > .fieldInfo {
  display: block;
  position: absolute;
  right: 1px;
  top: -4px;
  z-index: 8;
}

label > .fieldInfo summary {
  background: #d9d9cf;
  height: 18px;
  width: 18px;
}

label > .fieldInfo p {
  background: #f0eadb;
  border: 1px solid #596562;
  border-left: 4px solid #596562;
  box-shadow: 0 8px 18px rgba(16,23,24,.24);
  max-width: calc(100vw - 48px);
  min-width: 0;
  position: absolute;
  right: 0;
  top: 24px;
  width: min(300px, calc(100vw - 48px));
  z-index: 12;
}

.headerTuner {
  align-content: center;
  display: grid;
  flex: 1 1 260px;
  gap: 5px;
  margin: 0 18px;
  max-width: 360px;
  min-width: 150px;
}

.tunerBand {
  color: #aebfba;
  font: 850 7px/1 ui-monospace, monospace;
  letter-spacing: .18em;
  text-align: center;
}

.tunerScale {
  align-items: end;
  background:
    repeating-linear-gradient(90deg, transparent 0 9.5%, rgba(213,224,217,.28) 9.5% 10%),
    #172224;
  border: 1px solid #72817d;
  border-radius: 3px;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.6);
  color: #c6d1cc;
  display: flex;
  font: 750 7px/1 ui-monospace, monospace;
  height: 28px;
  justify-content: space-between;
  padding: 12px 7px 4px;
  position: relative;
}

/* Equal cells, each label centred in its own. Left to space-between the boxes
   are as wide as their digits, so "100" and "108" push their neighbours along
   and the printed numbers stop being evenly spaced — which is invisible until
   something has to point at one. */
.tunerScale > span {
  flex: 1 1 0;
  text-align: center;
}

.frequencyNeedle {
  /* A fraction of the printed track rather than of the whole strip: the numbers
     sit inside the scale's 7px padding, so a plain percentage puts the needle
     off the band it is supposed to be pointing at. */
  --dial-fraction: .5;
  background: #e1be60;
  box-shadow: 0 0 7px rgba(225,190,96,.68);
  height: 25px;
  /* Six equal cells across the padded track, so 88 sits at the centre of the
     first and 108 at the centre of the last: 1/12 to 11/12. */
  left: calc(7px + (100% - 14px) * ((1 + var(--dial-fraction) * 10) / 12));
  position: absolute;
  top: 1px;
  transform: translateX(-1px);
  /* The fraction rather than `left`, so the sweep hands over to the landing
     without a seam. Slight overshoot: a real needle arrives past its mark and
     comes back to it. */
  transition: --dial-fraction 520ms cubic-bezier(.22,.86,.28,1.14);
  width: 2px;
}

.stereoMeters {
  align-items: stretch;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(105px, 1fr)) auto;
}

.miniMeter {
  display: grid;
  gap: 4px;
}

.miniMeterLabel {
  color: #bdc9c2;
  font: 850 7px/1 ui-monospace, monospace;
  letter-spacing: .15em;
}

.miniMeterFace {
  background:
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(66,76,69,.13) 15px 16px),
    linear-gradient(180deg, #e4d9ad, #b69d69);
  border: 2px solid #172123;
  border-radius: 44% 44% 4px 4px / 62% 62% 4px 4px;
  box-shadow: inset 0 0 9px rgba(66,62,49,.34), 0 0 0 1px #71807d;
  height: 58px;
  overflow: hidden;
  position: relative;
}

.miniMeterTicks {
  color: #4d4430;
  font: 800 7px/1 ui-monospace, monospace;
  left: 7px;
  position: absolute;
  right: 7px;
  text-align: center;
  top: 10px;
  white-space: nowrap;
}

.miniMeterNeedle {
  --mini-needle-angle: -30deg;
  background: #a73729;
  bottom: -4px;
  height: 44px;
  left: calc(50% - 1px);
  position: absolute;
  transform: rotate(var(--mini-needle-angle));
  transform-origin: 50% 100%;
  transition: transform 280ms cubic-bezier(.2,.9,.3,1.2);
  width: 2px;
  z-index: 2;
}

.miniMeterPivot {
  background: #273638;
  border: 2px solid #9c8c65;
  border-radius: 50%;
  bottom: -6px;
  height: 14px;
  left: calc(50% - 7px);
  position: absolute;
  width: 14px;
  z-index: 3;
}

.signalReadout {
  align-content: center;
  background: #111a1c;
  border: 1px solid #71807d;
  border-radius: 3px;
  display: grid;
  gap: 4px;
  min-width: 82px;
  padding: 8px;
}

.signalReadout span {
  color: #788987;
  font: 800 7px/1 ui-monospace, monospace;
  letter-spacing: .14em;
}

.signalReadout strong {
  color: #d9c473;
  font: 850 9px/1.2 ui-monospace, monospace;
}

/* It became a button so it can explain itself; it should still read as a
   readout, so only the cursor and focus ring say it is pressable. */
.signalReadout {
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.signalReadout:hover { border-color: #d9c473; }
.signalReadout:focus-visible { outline: 2px solid #d9c473; outline-offset: 2px; }

.signalReadoutNote {
  color: #a8a59a;
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0;
  max-width: 62ch;
}

body[data-machine-state="testing"] .miniMeterNeedle,
body[data-machine-state="publishing"] .miniMeterNeedle,
body.is-tuning .miniMeterNeedle {
  animation: miniNeedleDance 420ms ease-in-out infinite alternate;
}

body[data-machine-state="testing"] .miniMeter:nth-child(2) .miniMeterNeedle,
body[data-machine-state="publishing"] .miniMeter:nth-child(2) .miniMeterNeedle,
body.is-tuning .miniMeter:nth-child(2) .miniMeterNeedle {
  animation-delay: -180ms;
}

body[data-machine-state="testing"] .frequencyNeedle,
body[data-machine-state="publishing"] .frequencyNeedle,
body.is-tuning .frequencyNeedle {
  animation: dialScan 2400ms cubic-bezier(.42,0,.32,1) infinite;
}

@keyframes miniNeedleDance {
  from { transform: rotate(-16deg); }
  to { transform: rotate(46deg); }
}

/* Registered so the fraction itself can be animated and transitioned. The sweep
   and the landing then share one coordinate: the needle drops from wherever the
   sweep had actually reached, instead of the sweep stopping and a separate
   animation starting from somewhere else.

   Where this is not supported the fraction is still a perfectly good custom
   property — the needle simply holds still while loading and lands correctly. */
@property --dial-fraction {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.5;
}

/* A seek, not a metronome. It runs, catches something, slips off it and runs
   again — uneven distances, uneven dwell, and never quite the same turn twice
   in a cycle, because a needle swinging edge to edge on a fixed beat reads as a
   loading bar rather than as tuning. Dimmed while travelling and bright where it
   catches. */
@keyframes dialScan {
  0%   { --dial-fraction: .06; opacity: .85; }
  14%  { --dial-fraction: .47; opacity: .6; }
  20%  { --dial-fraction: .41; opacity: 1; }
  24%  { --dial-fraction: .43; opacity: .95; }
  38%  { --dial-fraction: .93; opacity: .6; }
  46%  { --dial-fraction: .85; opacity: 1; }
  51%  { --dial-fraction: .88; opacity: .9; }
  69%  { --dial-fraction: .21; opacity: .6; }
  77%  { --dial-fraction: .29; opacity: 1; }
  83%  { --dial-fraction: .25; opacity: .92; }
  100% { --dial-fraction: .06; opacity: .85; }
}

@media (max-width: 1180px) {
  .headerTuner {
    display: none;
  }
}

@media (max-width: 600px) {
  .stereoMeters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signalReadout {
    grid-column: 1 / -1;
    min-height: 42px;
  }
}

@media (min-width: 1440px) {
  .rackGrid {
    gap: 14px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .identityModule {
    grid-column: span 12;
  }

  .streamModule,
  .voiceModule {
    grid-column: span 6;
  }

  .selectorModule,
  .modeSetupModule,
  .advancedModule {
    grid-column: span 5;
  }

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

  /* Addressed by what the fields are, not what order they happen to sit in:
     counting positions broke the moment a wrapper was added around the names. */
  .identityFields > label {
    grid-column: span 2;
  }

  .identityFields > .categoryField {
    grid-column: 1 / -1;
  }

  .identityFields > .stationLinks {
    align-self: start;
    grid-column: 3 / span 2;
  }

  .rackHeader {
    grid-template-columns: minmax(340px, 1fr) 230px auto auto;
  }

  .masterMeter {
    justify-self: center;
    width: 230px;
  }

  .rackModule {
    padding: 16px;
  }
}

/* Clear control boundaries and cassette-cart station library. */

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

.learningGlobalStat {
  color: #425657;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .035em;
  margin: -2px 0 0;
}

.learningGlobalStat strong {
  color: #263b3c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.modeLearningActions {
  align-content: start;
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  grid-template-rows: auto auto;
}

.modeLearningActions > span {
  align-self: center;
  grid-column: 1 / -1;
}

.dangerQuietButton {
  border-color: #8b5448 !important;
  color: #f3ded6 !important;
}

.modeSetupModule fieldset + fieldset {
  border-top: 1px dashed #687575;
  margin-top: 14px;
  padding-top: 13px;
}

.selectorModule {
  grid-template-rows: max-content 1fr max-content;
}

.learningSummary {
  align-content: start;
}

.stationItem {
  background: #162123;
  border-color: #697873;
  border-radius: 6px;
  grid-template-columns: 45px minmax(0, 1fr);
  min-height: 122px;
  overflow: hidden;
}

.stationItem::after {
  display: none;
}

.stationItem:hover {
  transform: translateX(2px);
}

.stationItem.active {
  transform: translateX(2px);
}

.stationSelect {
  background:
    radial-gradient(circle at 9px 9px, #555b57 0 2px, #d8d7cc 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #555b57 0 2px, #d8d7cc 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #555b57 0 2px, #d8d7cc 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #555b57 0 2px, #d8d7cc 2.5px 4px, transparent 4.5px),
    linear-gradient(180deg, #d8d7cc, #aaada7 72%, #919790);
  border: 1px solid #e8e6dc;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #777e79, inset 0 1px rgba(255,255,255,.7), 0 2px 0 #080d0e;
  grid-template-columns: 19px minmax(0, 1fr);
  margin: 6px;
  min-width: 0;
  overflow: hidden;
  padding: 6px 7px 6px 5px;
  position: relative;
}

.stationSelect:hover:not(:disabled),
.stationSelect:active:not(:disabled) {
  background:
    radial-gradient(circle at 9px 9px, #555b57 0 2px, #e3e1d5 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 9px) 9px, #555b57 0 2px, #e3e1d5 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at 9px calc(100% - 9px), #555b57 0 2px, #e3e1d5 2.5px 4px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #555b57 0 2px, #e3e1d5 2.5px 4px, transparent 4.5px),
    linear-gradient(180deg, #e0ded2, #b4b7b0 72%, #9da39c);
}

.stationSignal {
  align-items: flex-start;
  background: transparent;
  border: 0;
  padding-top: 12px;
  position: relative;
  z-index: 2;
}

.stationSignal i {
  border-color: #72766e;
  box-shadow: 0 0 0 2px rgba(40,47,45,.26);
}

.stationContent,
.stationItem:nth-child(even) .stationContent {
  background:
    linear-gradient(90deg, transparent 0 10px, rgba(94,122,124,.2) 10px 11px, transparent 11px),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(47,63,63,.045) 20px 21px),
    #e1ded3;
  border: 1px solid #7f8984;
  border-radius: 3px;
  color: #202929;
  gap: 5px;
  margin: 0;
  min-height: 96px;
  padding: 8px 9px 35px 15px;
  position: relative;
  transform: none;
}

.stationItem:nth-child(even) .stationSelect {
  filter: saturate(.87);
}

.stationTop strong {
  color: #202929;
}

.stationMetaRow {
  color: #536263;
}

.cassetteMechanism {
  align-items: center;
  background: linear-gradient(180deg, #737d78, #4f5c5a);
  border: 1px solid #344240;
  border-radius: 3px;
  bottom: 5px;
  box-shadow: inset 0 1px 3px rgba(13,24,24,.7), 0 1px rgba(255,255,255,.6);
  display: grid;
  gap: 5px;
  grid-template-columns: 25px minmax(16px, 1fr) 25px;
  height: 26px;
  left: 15px;
  padding: 2px 5px;
  position: absolute;
  right: 9px;
}

.cassetteReel {
  aspect-ratio: 1;
  background: repeating-conic-gradient(#e8e4d8 0 12deg, #596461 12deg 27deg);
  border: 2px solid #293634;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #aeb4ad, inset 0 0 0 3px #c9ccc4;
  display: block;
  position: relative;
}

.cassetteReel::after {
  background: #34413f;
  border: 2px solid #d9d8cd;
  border-radius: 50%;
  content: "";
  inset: 6px;
  position: absolute;
}

.cassetteTapePath {
  background:
    linear-gradient(180deg, transparent 45%, #442e24 45% 61%, transparent 61%),
    #b9b9ae;
  border: 1px solid #293634;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  height: 15px;
}

@media (max-width: 430px) {
  .stationContent,
  .stationItem:nth-child(even) .stationContent {
    padding-left: 13px;
  }

  .cassetteMechanism {
    left: 13px;
  }

  .modeLearningActions {
    grid-template-columns: 1fr;
  }

  .modeLearningActions > span {
    grid-column: 1;
  }
}

/* Drawer flow, sticky-layering, and control-panel composition fixes. */

.drawer {
  backdrop-filter: blur(2px);
  background: rgba(4, 7, 7, .68);
}

.drawerPanel {
  align-content: start;
  grid-auto-rows: max-content;
  height: 100dvh;
  overscroll-behavior: contain;
}

.drawerPanel > .drawerHeader {
  min-height: 0;
}

#finderDrawer .drawerPanel {
  max-width: 680px;
  width: min(94vw, 680px);
}

.finderSearch {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.finderSearch input,
.finderSearch button {
  height: 46px;
  min-height: 46px;
}

.finderSearch button {
  min-width: 92px;
}

#radioBrowserStatus:empty,
.candidateList:empty {
  display: none;
}

.candidateList {
  align-content: start;
  grid-auto-rows: max-content;
  margin-top: 2px;
}

.candidateCard {
  gap: 12px;
  padding: 15px;
}

.candidateCard .stationMetaRow {
  align-items: start;
  color: #475757;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.candidateCard .stationMetaRow b {
  color: #7a5a2c;
  display: block;
  font-size: 8px;
  letter-spacing: .1em;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.candidateCard p {
  margin: 0;
  overflow-wrap: anywhere;
}

.candidateCard .actionRow {
  justify-content: flex-start;
}

/* Reading the station's own site: the way in when the directory has no entry.
   Open on a miss, folded away when the directory did answer. */
.siteFinder {
  border: 1px dashed #5b5549;
  margin-top: 14px;
  padding: 12px 13px;
}

.siteFinder[open] {
  border-style: solid;
}

.siteFinder > summary {
  color: #b8aa8c;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  list-style: none;
  text-transform: uppercase;
}

.siteFinder > summary::-webkit-details-marker {
  display: none;
}



.siteFinderBody {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.siteFinderBody .drawerIntro {
  margin: 0;
}

/* Folded away, so the module shows one line rather than three things to do. */
.homepageDetails[open] {
  display: grid;
  gap: 12px;
}

.homepageDetails > summary {
  cursor: pointer;
  margin-bottom: 0;
}

/* A result or a failure is the thing you are waiting for, so it gets its own
   line at a size worth reading. It used to be 11px bold beside a button, which
   is fine for "Saved" and unreadable for a sentence from Google. */
.homepageDetails .inlineStatus,
.homepageDetails .fieldWithAction span,
#stationEnrichStatus {
  color: #6a6252;
  display: block;
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 68ch;
}

.homepageDetails[open] > summary {
  margin-bottom: 4px;
}

/* Correcting a machine that got something nearly right, kept to one line so it
   stays a field and does not become a chat window. */
.refineRow {
  display: grid;
  gap: 7px;
}

.refineRow > label {
  color: #7a5a2c;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.refineFoot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 20px;
}

.refineFoot button {
  background: none;
  border: 1px solid #4c493f;
  color: var(--cream-2);
  cursor: pointer;
  font: inherit;
  min-height: 32px;
  padding: 0 11px;
}

.siteLookupRow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.siteLookupRow button {
  background: none;
  border: 1px solid #4c493f;
  color: var(--cream-2);
  cursor: pointer;
  font: inherit;
  min-height: 36px;
  padding: 0 13px;
}

/* A site the search offered is a suggestion to check, not a decision already
   taken, so it reads quieter than a directory result. */
.siteCandidate {
  border: 1px solid #4c493f;
  display: grid;
  gap: 6px;
  padding: 11px 12px;
}

.siteCandidate strong {
  color: #e7dcc2;
  font-size: 13px;
}

.siteCandidate .siteCandidateHost {
  color: #b8aa8c;
  font-size: 11px;
  font-weight: 800;
}

.siteCandidate p {
  color: #9a978c;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
}

.settingsPanel {
  max-width: 760px;
  width: min(96vw, 760px);
}

.settingsPanel > .drawerHeader {
  padding: 16px 20px;
  z-index: 6;
}

.settingsLead {
  font-size: 12px;
  padding: 14px 20px;
}

.settingsSection {
  gap: 13px;
  padding: 18px 20px;
}

.settingsSection .sectionIntro,
.settingsSection > label,
.settingsSaveBar span {
  font-size: 12px;
}

.settingsSaveBar {
  background: #151c1d;
  border-left: 5px solid #d8b452;
  padding: 14px 20px;
  position: static;
}

.settingsSaveBar span {
  color: #c9c4b4;
  max-width: 430px;
}

.settingsPanel > .learningSettings {
  border-top: 8px solid #172123;
}

.settingsPanel > .learningSettings .sectionIntro strong {
  color: #e4c968;
}

.liveSettingsBadge {
  align-items: center;
  align-self: center;
  background: #b9e2c3;
  border: 2px solid #101719;
  border-radius: 999px;
  color: #153923;
  display: inline-flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 950;
  height: 28px;
  justify-content: center;
  letter-spacing: .08em;
  padding: 0 9px;
}

.settingsToggle input {
  appearance: none;
  background:
    radial-gradient(circle at 12px 50%, #e9e6d9 0 7px, transparent 7.5px),
    #384648;
  border: 2px solid #101719;
  border-radius: 999px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.45);
  flex: 0 0 auto;
  height: 26px;
  margin: 0;
  min-height: 0;
  padding: 0;
  transition: background 140ms ease;
  width: 48px;
}

.settingsToggle input:checked {
  background:
    radial-gradient(circle at calc(100% - 12px) 50%, #f4efe1 0 7px, transparent 7.5px),
    #63ad7b;
}

.rackHeader {
  min-height: 96px;
  padding: 13px 16px 12px;
  z-index: 20;
}

label > .fieldInfo {
  z-index: 2;
}

label > .fieldInfo p {
  z-index: 4;
}

.selectorModule {
  align-content: start;
  grid-template-rows: max-content max-content max-content;
}

.learningSummary {
  min-height: 0;
}

.learningScoreModeLabel {
  color: #405657;
  opacity: 1 !important;
}

.learningHeaderActions label {
  min-width: 190px;
}

@media (min-width: 1440px) {
  .selectorModule,
  .modeSetupModule {
    grid-column: 1 / -1;
  }

  .selectorModule {
    align-self: start;
  }

  .selectorModule .learningSummary {
    align-items: start;
    grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  }

  .selectorModule .learningScoreRow {
    grid-column: 1;
    grid-row: 1;
  }

  .selectorModule .learningMeter {
    grid-column: 1;
    grid-row: 2;
  }

  .selectorModule .learningInfo {
    grid-column: 1;
    grid-row: 3 / span 2;
  }

  .selectorModule .selectorHint {
    grid-column: 2;
    grid-row: 1;
    margin: 3px 0 0;
  }

  .selectorModule .learningStats {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  .selectorModule .learningGlobalStat {
    grid-column: 2;
    grid-row: 4;
  }
}

@media (min-width: 1700px) {
  .modeSetupModule {
    align-items: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .modeSetupModule > .moduleHeader,
  .modeSetupModule > .modeSummary {
    grid-column: 1 / -1;
  }

  .modeSetupModule > fieldset {
    align-self: stretch;
    background: rgba(255,255,255,.24);
    border: 0;
    border-radius: 4px;
    margin: 0;
    min-width: 0;
    padding: 12px 34px 12px 12px;
  }

  .modeSetupModule fieldset + fieldset {
    border: 0;
    margin-top: 0;
    padding: 12px 34px 12px 12px;
  }

  .modeSetupModule fieldset > .fieldInfo {
    right: 10px;
    top: 10px;
  }
}

@media (max-width: 430px) {
  .finderSearch {
    grid-template-columns: 1fr;
  }

  .finderSearch button {
    min-width: 0;
  }

  .candidateCard .stationMetaRow {
    grid-template-columns: 1fr;
  }

  .learningHeaderActions label {
    min-width: 0;
  }
}

/* Information controls and guaranteed status contrast. */

.fieldInfo summary {
  background: #e5e2d6;
  border: 1px solid #465654;
  color: #263b3c;
  flex: 0 0 auto;
  font-size: 10px;
  height: 18px;
  opacity: 1;
  width: 18px;
}

.fieldInfo[open] {
  z-index: 24;
}

label > .fieldInfo {
  right: 0;
  top: -3px;
}

.headerInfo {
  align-self: end;
  justify-self: end;
  margin-bottom: 2px;
  position: relative;
  transform: translateY(6px);
}

.headerInfo p,
.streamActions .standaloneInfo p,
.modeSetupModule fieldset > .fieldInfo p {
  background: #f1ecdf;
  border: 1px solid #4f5f5d;
  border-left: 4px solid #4f5f5d;
  box-shadow: 0 8px 18px rgba(16,23,24,.28);
  color: #263737;
  min-width: 250px;
  padding: 9px 10px;
  position: absolute;
  right: 0;
  top: 24px;
  width: min(310px, calc(100vw - 48px));
  z-index: 25;
}

.settingsSectionHeader {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.streamActions .standaloneInfo {
  margin-left: auto;
  position: relative;
}

.streamModule .fieldInfo summary {
  background: #34484b;
  border-color: #d8ddd5;
  color: #f3eddf;
}

.modeSetupModule fieldset {
  padding-right: 26px;
  position: relative;
}

.modeSetupModule fieldset > .fieldInfo {
  position: absolute;
  right: 0;
  top: -4px;
}

.learningInfo {
  position: relative;
}

.learningRequestMeta {
  margin-top: 6px !important;
}

#streamTestStatus:empty {
  display: none;
}

#streamTestStatus:not(:empty) {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .055em;
  min-height: 32px;
  padding: 5px 10px;
  text-transform: uppercase;
}

#streamTestStatus[data-state="testing"] {
  background: #e8e2d2;
  color: #243436;
}

#streamTestStatus[data-state="success"] {
  background: #b9e2c3;
  color: #153923;
}

#streamTestStatus[data-state="warning"] {
  background: #f2d077;
  color: #442f08;
}

#streamTestStatus[data-state="error"] {
  background: #efbbb0;
  color: #541b12;
}

.streamModule .testReport summary {
  color: #e8e1d3;
}

.selectorModule .moduleHeader .moduleCode,
.modeSetupModule .moduleHeader .moduleCode,
.membershipCard .moduleCode {
  color: #304748;
  opacity: 1;
}

.selectorModule .selectorHint,
.modeSetupModule .modeDetail,
.modeSetupModule .modeGuide {
  color: #293f40;
}

.selectorModule #learningSyncStatus,
.selectorModule .learningGlobalStat {
  color: #344b4c;
  font-weight: 900;
}

.settingsSectionHeader .headerInfo summary {
  background: #34484b;
  border-color: #d9ded5;
  color: #f2ecde;
}

@media (max-width: 840px) {
  .settingsSectionHeader {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .modeSetupModule fieldset {
    padding-right: 24px;
  }
}

/* Final control-bank cleanup: grouping without divider artifacts. */

.modeSetupModule .learningNudgeFieldset,
.modeSetupModule .modeFieldset,
.modeSetupModule fieldset + fieldset {
  border: 0 !important;
}

.modeSetupModule .inlineDetails {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 1700px) {
  .modeSetupModule fieldset > .fieldInfo {
    right: 10px;
    top: -23px;
  }
}

/* Final layout pass: compact learning evidence and independently sized controls. */

.rackHeader {
  position: relative;
  top: auto;
  z-index: 2;
}

.fieldInfo {
  gap: 0;
}

.headerInfo {
  transform: translateY(-1px);
}

.stationList {
  align-content: start;
  grid-auto-rows: max-content;
  scroll-padding-block: 8px;
}

.learningSummary {
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

.learningScoreBlock,
.learningEvidenceBlock {
  align-content: start;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.learningScoreHeading {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.learningScoreTitle {
  align-items: center;
  display: flex;
  gap: 7px;
  min-width: 0;
}

.learningScoreTitle .learningInfo,
.modeLearningActions .actionInfo {
  margin: 0;
  position: relative;
}

.learningScoreTitle .learningInfo {
  transform: translateY(-2.5px);
}

.learningScoreTitle .learningInfo p,
.modeLearningActions .actionInfo p,
.controlBankHeader .fieldInfo p {
  background: #f1ecdf;
  border: 1px solid #4f5f5d;
  border-left: 4px solid #4f5f5d;
  box-shadow: 0 8px 18px rgba(16,23,24,.28);
  color: #263737;
  min-width: 250px;
  padding: 9px 10px;
  position: absolute;
  top: 24px;
  width: min(310px, calc(100vw - 48px));
  z-index: 25;
}

.learningScoreTitle .learningInfo p,
.controlBankHeader .fieldInfo p {
  left: 0;
}

.modeLearningActions .actionInfo p {
  right: 0;
}

.learningScoreTitle .learningRequestMeta {
  top: auto;
  transform: translateY(64px);
}

.learningEvidenceBlock .selectorHint,
.learningEvidenceBlock .learningStats,
.learningScoreBlock .learningScoreRow,
.learningScoreBlock .learningMeter {
  grid-column: auto;
  grid-row: auto;
}

.selectorModule #learningSyncStatus {
  background: #e4e8df;
  border: 1px solid #5d6d69;
  border-radius: 999px;
  color: #263d3b;
  flex: 0 0 auto;
  font-size: 9px;
  letter-spacing: .05em;
  padding: 5px 8px;
  white-space: nowrap;
}

.learningEvidenceBlock .selectorHint {
  margin: 0;
  max-width: 74ch;
}

.learningStats {
  grid-template-columns: repeat(3, minmax(105px, 180px));
  max-width: 570px;
}

.modeLearningActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.modeLearningActions .actionInfo {
  margin-left: auto;
}

.dangerQuietButton {
  background: #69342c !important;
  border-color: #321713 !important;
  color: #fff7ef !important;
}

.dangerQuietButton:hover,
.dangerQuietButton:focus-visible {
  background: #7d3b31 !important;
}

.streamActions .standaloneInfo {
  margin-left: 0;
}

.modeSetupModule {
  align-content: start;
}

.modeSetupModule > .controlBank {
  align-self: start;
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(54,68,66,.28) !important;
  border-radius: 5px;
  display: grid;
  gap: 12px;
  margin: 0;
  min-width: 0;
  padding: 13px;
}

.controlBankHeader {
  align-items: center;
  display: flex;
  gap: 7px;
  min-height: 20px;
  position: relative;
}

.controlBankHeader h4 {
  color: #263b3c;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  margin: 0;
  text-transform: uppercase;
}

.controlBankHeader .fieldInfo {
  flex: 0 0 auto;
  position: relative;
}

.membershipGrid {
  margin-top: 0;
}

.modeSetupModule .selectionNudgeFieldset,
.modeSetupModule .membershipFieldset,
.modeSetupModule .stationWidePreference {
  border-top: 0;
  padding-top: 13px;
}

@media (min-width: 1440px) {
  .selectorModule .learningSummary {
    gap: 22px;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  }
}

@media (min-width: 1700px) {
  .modeSetupModule {
    align-items: start;
    grid-template-columns: minmax(330px, .85fr) minmax(620px, 1.55fr);
  }

  .modeSetupModule > .moduleHeader {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .modeSetupModule > .stationWidePreference {
    grid-column: 1;
    grid-row: 2;
  }

  .modeSetupModule > .membershipFieldset {
    grid-column: 2;
    grid-row: 2 / span 2;
  }

  .modeSetupModule > .selectionNudgeFieldset {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 840px) {
  .learningStats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }

  .controlBankHeader {
    flex-wrap: wrap;
  }

  .controlBankHeader .fieldInfo[open] {
    flex-basis: 100%;
  }

  .controlBankHeader .fieldInfo p,
  .learningScoreTitle .learningInfo p,
  .modeLearningActions .actionInfo p {
    margin-top: 7px;
    min-width: 0;
    position: static;
    transform: none;
    width: 100%;
  }

  .learningScoreTitle .learningInfo[open],
  .modeLearningActions .actionInfo[open] {
    flex-basis: 100%;
  }

  .learningScoreTitle .learningInfo {
    transform: none;
  }
}

/* Compact routine workflow and shared drawer title hierarchy. */

.drawerPanel > .drawerHeader,
.settingsPanel > .drawerHeader,
.routineDrawerPanel > .drawerHeader {
  align-items: center;
}

.drawerHeader .moduleCode {
  color: #b7c3bc;
  display: block;
  font-size: 9px;
  letter-spacing: .16em;
  margin-bottom: 5px;
  opacity: 1;
}

.drawerHeader h2 {
  font-size: clamp(28px, 2vw, 34px);
  line-height: .98;
  margin: 0;
}

.drawerHeader > button {
  align-self: center;
  min-height: 40px;
}

.settingsSectionHeader h3,
.routineSectionHeader h3 {
  font-size: 18px;
  line-height: 1.05;
  margin: 0;
}

.routineDrawerPanel {
  gap: 0;
  max-width: 720px;
  padding: 0;
  width: min(96vw, 720px);
}

.routineDrawerPanel > .drawerHeader {
  background: #151918;
  border-bottom: 1px solid #59635d;
  padding: 18px 20px;
  position: sticky;
  top: 0;
  z-index: 8;
}

.routineDrawerLead {
  align-items: center;
  background: #0e1211;
  border-bottom: 1px solid #47514c;
  border-left: 5px solid #d8b452;
  display: flex;
  gap: 14px;
  padding: 13px 20px 13px 15px;
}

.routineDrawerProgress {
  align-items: center;
  display: grid;
  flex: 1 1 auto;
  gap: 12px;
  grid-template-columns: max-content minmax(90px, 1fr) max-content;
  min-width: 0;
}

.routineDrawerProgress > div:first-child {
  display: grid;
  gap: 2px;
}

.routineDrawerProgress .moduleCode {
  color: #aab8b1;
  font-size: 8px;
  opacity: 1;
}

.routineDrawerProgress strong {
  color: #f4efe3;
  font-size: 14px;
}

.routineDrawerProgress > span {
  color: #e1c86f;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.routineProgressTrack {
  background: #252c29;
  border: 1px solid #68736d;
  border-radius: 999px;
  height: 10px;
  min-width: 0;
  overflow: hidden;
}

.routineProgressTrack span {
  background: linear-gradient(90deg, #d8b452, #65b17d);
  display: block;
  height: 100%;
  transition: width 180ms ease;
}

.routineDrawerInfo {
  flex: 0 0 auto;
  position: relative;
}

.routineDrawerInfo summary {
  background: #344541;
  border-color: #d9e0da;
  color: #f5efe2;
}

.routineDrawerInfo p {
  background: #f0eadc;
  border: 1px solid #4f5f5d;
  border-left: 4px solid #d8b452;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  color: #263737;
  min-width: 270px;
  padding: 9px 10px;
  position: absolute;
  right: 0;
  top: 25px;
  width: min(340px, calc(100vw - 48px));
  z-index: 25;
}

.routineSection {
  gap: 13px;
  padding: 18px 20px 22px;
}

.routineSection + .routineSection {
  border-top: 1px solid #59635d;
  margin-top: 0;
  padding-top: 18px;
}

.routineSectionHeader {
  align-items: center;
  border-bottom: 1px solid #59635d;
  min-height: 32px;
  padding-bottom: 10px;
}

.routineSectionHeader h3 {
  color: #f4efe3;
}

.nativeStopNote {
  background: #27342f;
  border-left: 4px solid #75a986;
  color: #e5ece6;
  padding: 10px 12px;
}

.nativeStopNote summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 900;
  gap: 8px;
  list-style: none;
}

.nativeStopNote summary::-webkit-details-marker {
  display: none;
}

.nativeStopNote summary > span {
  color: #91d0a3;
  font-size: 8px;
}

.nativeStopNote summary small {
  color: #aebcb4;
  font-size: 9px;
  font-weight: 800;
  margin-left: auto;
  text-transform: uppercase;
}

.nativeStopNote p {
  color: #cbd6d0;
  font-size: 11px;
  margin: 8px 0 0 16px;
}

.routineList,
.routinePendingList,
.routineCompletedList {
  display: grid;
  gap: 10px;
}

.routineCard {
  background: #e7e1d2;
  border: 1px solid #403b31;
  border-left: 5px solid #d8b452;
  border-radius: 5px;
  box-shadow: 0 4px 0 #0b0d0b, 0 8px 14px rgba(0,0,0,.18);
  gap: 10px;
  padding: 12px;
}

.routineCard.created {
  background: #d8e2d7;
  border-left-color: #65a97a;
  box-shadow: 0 3px 0 #0b0d0b;
}

.routineCardTop {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.routineCardTop strong {
  color: #1c2624;
  font-size: 16px;
  line-height: 1.1;
}

.routineCreatedToggle {
  background: #65ad7b;
  border-color: #1d3325;
  color: #102419;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
}

.routineCard.created .routineCreatedToggle {
  background: #303b37;
  border-color: #17201d;
  color: #f0ecdf;
}

.routineTriggerRow {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.routineTriggerRow label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.routineTriggerRow label > span {
  color: #5b625d;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.drawerPanel .routinePhraseInput {
  min-height: 40px;
  padding: 8px 10px;
}

.routineCopyPhrase {
  min-height: 40px;
  white-space: nowrap;
}

.routineSetupDetails {
  border-top: 1px solid #a8aa9f;
  padding-top: 8px;
}

.routineSetupDetails > summary {
  color: #3f514d;
  cursor: pointer;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .06em;
  list-style: none;
  text-transform: uppercase;
}

.routineSetupDetails > summary::before {
  content: "▸ ";
}

.routineSetupDetails[open] > summary::before {
  content: "▾ ";
}

.routineSetupDetails > summary::-webkit-details-marker {
  display: none;
}

.routineActionCopy {
  align-items: stretch;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 8px;
}

.routineActionCopy code {
  align-items: center;
  display: flex;
  min-width: 0;
  padding: 8px 10px;
}

.routineCompletedGroup {
  background: #151b19;
  border: 1px solid #53605a;
  border-radius: 5px;
  margin-top: 3px;
  padding: 0;
}

.routineCompletedGroup > summary {
  align-items: center;
  color: #dbe5de;
  cursor: pointer;
  display: flex;
  font-size: 11px;
  font-weight: 900;
  justify-content: space-between;
  list-style: none;
  padding: 11px 12px;
  text-transform: uppercase;
}

.routineCompletedGroup > summary::-webkit-details-marker {
  display: none;
}

.routineCompletedGroup > summary::before {
  color: #83bd92;
  content: "▸";
  margin-right: 8px;
}

.routineCompletedGroup[open] > summary::before {
  content: "▾";
}

.routineCompletedGroup > summary span {
  flex: 1 1 auto;
}

.routineCompletedGroup > summary strong {
  align-items: center;
  background: #75af85;
  border-radius: 999px;
  color: #13241a;
  display: inline-flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  height: 22px;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
}

.routineCompletedList {
  border-top: 1px solid #53605a;
  padding: 10px;
}

.routineAllSet {
  background: #d9e6da;
  border-left: 4px solid #65a97a;
  color: #203329;
  display: grid;
  gap: 2px;
  padding: 11px 12px;
}

.routineAllSet span {
  font-size: 11px;
}

@media (max-width: 620px) {
  .drawerHeader h2 {
    font-size: 27px;
  }

  .routineDrawerProgress {
    gap: 8px;
    grid-template-columns: max-content minmax(56px, 1fr) max-content;
  }

  .routineTriggerRow,
  .routineActionCopy {
    grid-template-columns: 1fr;
  }

  .routineCopyPhrase,
  .routineActionCopy button {
    width: 100%;
  }

  .routineDrawerInfo p {
    position: fixed;
    right: 16px;
    top: 126px;
    width: calc(100vw - 32px);
  }
}

/* One side-panel system for Settings and both routine scopes. */

.settingsPanel,
.routineDrawerPanel {
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(208,220,213,.025) 47px 48px),
    #263739;
  gap: 0;
  max-width: 720px;
  padding: 0;
  width: min(94vw, 720px);
}

.settingsPanel > .drawerHeader,
.routineDrawerPanel > .drawerHeader {
  background:
    linear-gradient(110deg, rgba(216,180,82,.07), transparent 42%),
    #111817;
  border-bottom: 1px solid #65716b;
  min-height: 78px;
  padding: 17px 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.settingsPanel > .drawerHeader .moduleCode,
.routineDrawerPanel > .drawerHeader .moduleCode {
  color: #aebcb5;
  font-size: 8px;
  letter-spacing: .2em;
  margin-bottom: 6px;
}

.settingsPanel > .drawerHeader h2,
.routineDrawerPanel > .drawerHeader h2 {
  color: #f4efe3;
  font-size: clamp(27px, 2.4vw, 33px);
  letter-spacing: -.035em;
  line-height: 1;
}

.settingsPanel > .drawerHeader > button,
.routineDrawerPanel > .drawerHeader > button {
  background: #e9e2d1;
  border-color: #101615;
  color: #202927;
  min-height: 38px;
}

.settingsForm {
  display: grid;
  gap: 12px;
  padding: 14px 0 0;
}

.settingsPanel .settingsSection {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 72px),
    #314649;
  border: 1px solid #687975;
  border-radius: 6px;
  box-shadow: 0 4px 0 rgba(12,18,18,.55);
  gap: 14px;
  margin: 0;
  padding: 16px;
}

.settingsPanel .settingsSectionHeader {
  align-items: center;
  border-bottom: 1px solid #65736f;
  gap: 11px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-bottom: 11px;
}

.settingsPanel .settingsSectionNumber {
  font-size: 10px;
  height: 32px;
  width: 32px;
}

.settingsPanel .settingsSectionHeader h3 {
  color: #f4efe3;
  font-size: 17px;
  letter-spacing: -.015em;
}

.settingsPanel .settingsSectionHeader .moduleCode {
  color: #bdc8c2;
  font-size: 8px;
  margin-bottom: 4px;
  opacity: 1;
}

.settingsPanel label {
  color: #e8e4d8;
  font-size: 11px;
  letter-spacing: .035em;
}

.settingsPanel input:not([type="checkbox"]),
.settingsPanel select {
  background: #0c1212;
  border-color: #7b8781;
  color: #f5efe1;
}

.settingsPanel .timeWindowGrid {
  gap: 10px;
}

.settingsPanel .timeRange {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settingsPanel .timeWindowCard {
  background: #101717;
  border-color: #68736e;
  padding: 12px;
}

.settingsPanel .timeWindowCard legend {
  color: #eee9da;
  padding: 0 6px;
}

.settingsPanel .timeWindowSummary {
  background: #243334;
  border: 1px solid #60706c;
  border-left: 3px solid #d8b452;
  color: #e6ddc5;
  font: 750 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  margin: 0;
  padding: 9px 10px;
}



/*
 * Sections 05 onwards are siblings of the settings form rather than children of
 * it, so they never received the form's horizontal padding and sat flush to the
 * panel edge — 16px wider than everything above them, and the join was visible.
 *
 * Both axes belong to the section rather than to whichever parent it happens
 * to have. The form contributes neither: no horizontal padding and no grid
 * gap, so there is one rule to change and nothing to keep in agreement with it.
 * This went wrong twice in a day — once on each axis — because the spacing was
 * coming from two places that merely matched.
 */
.settingsPanel .settingsSection {
  margin-inline: 16px;
}

.settingsPanel .liveSettingsBadge {
  background: #cde7d2;
  border: 1px solid #17221d;
  border-radius: 4px;
  color: #1b3e28;
  height: 26px;
  min-width: 38px;
  padding: 0 7px;
}

.routineDrawerLead {
  background: #17201f;
  border-bottom: 1px solid #5e6c67;
  border-left: 0;
  padding: 12px 20px;
}

.routineDrawerProgress {
  gap: 14px;
  grid-template-columns: max-content minmax(100px, 1fr);
}

.routineDrawerProgress > div:first-child {
  min-width: 108px;
}

.routineDrawerProgress strong {
  color: #f1ecdf;
  font-size: 13px;
}

.routineDrawerProgress > span {
  display: none;
}

.routineProgressTrack {
  border-color: #6e7b75;
  height: 8px;
}

.routineSection {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 70px),
    #304447;
  border: 1px solid #687975;
  border-radius: 6px;
  box-shadow: 0 4px 0 rgba(12,18,18,.55);
  gap: 12px;
  margin: 14px 16px 16px;
  padding: 16px;
}

.routineSection + .routineSection {
  border-top: 1px solid #687975;
  margin-top: 14px;
  padding-top: 16px;
}

.routineSectionHeader {
  border-bottom-color: #65736f;
  min-height: 30px;
  padding-bottom: 10px;
}

.routineSectionHeader h3 {
  color: #f4efe3;
  font-size: 17px;
}

.stationRoutineToolbar {
  align-items: center;
  background: #253536;
  border: 1px solid #5f6e6a;
  border-radius: 4px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(110px, 1fr) auto;
  padding: 10px;
}

.stationRoutineToolbar .shortcutEditorActions {
  grid-column: 2;
  grid-row: 1;
}

.stationRoutineToolbar .fieldHelp {
  color: #d5d1c4;
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.routinePendingList:empty {
  display: none;
}

.routineCard {
  background: #e5e2d8;
  border-color: #252e2b;
  border-left: 4px solid #d8b452;
  border-radius: 4px;
  box-shadow: 0 3px 0 #111817;
  padding: 12px 13px;
}

.routineCard.created {
  background: #dce5dc;
  border-left-color: #69ab7d;
}

.routineCardTop strong {
  font-size: 15px;
}

.routineActionRow {
  border-top: 1px solid #a8aa9f;
  display: grid;
  gap: 5px;
  padding-top: 8px;
}

.routineActionRow > span {
  color: #5b625d;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.routineActionRow .routineActionCopy {
  margin-top: 0;
}

.routineCreatedToggle {
  min-height: 34px;
}

.routineCompletedGroup {
  background: #17201f;
  border-color: #62706b;
  margin-top: 0;
}

.routineCompletedGroup > summary {
  color: #e5ebe6;
  text-transform: none;
}

.settingsSaveBar,
.routineSaveBar {
  background: #101716;
  border-left: 0;
  border-top: 1px solid #66726d;
  bottom: 0;
  min-height: 66px;
  padding: 12px 20px;
  position: sticky;
  z-index: 12;
}

/* Restrained broadcast-console finish. Kept as one reversible layer. */

:root {
  --yellow: #c6ad68;
  --orange: #b97848;
  --green: #72947b;
  --studio-amber: #b67949;
  --studio-gold: #c7ad67;
  --studio-red: #a95e4b;
}

body {
  background-color: #777d77;
}

body::before {
  opacity: .24;
}

.topBar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(221,235,230,.022) 63px 64px),
    #29383a;
  border-bottom-width: 3px;
  box-shadow: 0 5px 14px rgba(12,19,20,.32), inset 0 -1px 0 #687876;
}

.brandPlate:hover:not(:disabled),
.brandPlate:active:not(:disabled) {
  filter: brightness(1.04);
  transform: none;
}

.brandMark {
  flex-basis: 68px;
  height: 58px;
  width: 68px;
}

.logoChassis {
  stroke: #dedbce;
  stroke-width: 1.5;
}

.brandMark .logoChassis {
  fill: url(#brandMetal);
}

.bootBadge .logoChassis {
  fill: url(#bootMetal);
}

.logoFace {
  fill: #111a1b;
  stroke: #4b5654;
  stroke-width: 1;
}

.logoWindow {
  fill: #1f3032;
  stroke: #384b4d;
  stroke-width: 1;
}

.logoReel .logoReelOuter {
  fill: #d5d2c6;
  stroke: #253638;
  stroke-width: 1.4;
}

.brandMark .logoReelOuter {
  fill: url(#brandReelMetal);
}

.bootBadge .logoReelOuter {
  fill: url(#bootReelMetal);
}

.logoReel .reelWindow {
  fill: #162123;
  stroke: #596461;
  stroke-width: .5;
}

.logoReel .reelHubRing {
  fill: #263638;
  stroke: #6d7774;
  stroke-width: 1.2;
}

.logoReel .reelHub {
  fill: #8f5d4d;
  stroke: #263739;
  stroke-width: 1;
}

.logoTape {
  fill: none;
  stroke: #090e0f;
  stroke-linecap: butt;
  stroke-width: 1.4;
}

.logoTrim {
  fill: #c4c7c2;
  stroke: #5c6663;
  stroke-width: .7;
}

.logoReaderBar {
  fill: #aeb2ae;
  stroke: #4b5654;
  stroke-width: 1;
}

.logoReaderSlot {
  fill: none;
  stroke: #5a615f;
  stroke-linecap: round;
  stroke-width: 1.1;
}

.logoControlDeck {
  fill: #172123;
  stroke: #4b5654;
  stroke-width: .7;
}

.logoKnob {
  fill: #c4c7c2;
  stroke: #283335;
  stroke-width: 1.2;
}

.logoTransportButton {
  fill: #0b1112;
  stroke: #4d5957;
  stroke-width: .6;
}

.logoRecordButton {
  fill: #8f3e36;
  stroke: #2b1918;
  stroke-width: .7;
}

.logoVuFace {
  fill: #c5974f;
  stroke: #161c1c;
  stroke-width: .8;
}

.logoVuNeedle {
  stroke: #6d241f;
  stroke-linecap: round;
  stroke-width: .9;
}

.logoVuNeedleLeft {
  transform-origin: 85.5px 100px;
}

.logoVuNeedleRight {
  transform-origin: 104.5px 100px;
}

.logoScrew {
  fill: #414b49;
  stroke: #d1d1c8;
  stroke-width: .45;
}

body.is-tuning .brandMark {
  animation: none;
}

.brandName {
  color: #eeeade;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .94;
  text-transform: none;
}

.brandTagline {
  color: #b8c3bf;
  font-size: 7px;
  letter-spacing: .18em;
  margin-top: 6px;
  white-space: nowrap;
}

.systemStrip {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #172123, 0 2px 7px rgba(12,19,20,.3);
}

button:not(.stationSelect):not(.brandPlate):not(.systemState) {
  border-radius: 2px;
  border-width: 1px;
  box-shadow: 0 2px 0 #101616, inset 0 1px 0 rgba(255,255,255,.25) !important;
  font-weight: 800;
}

button:hover:not(:disabled):not(.stationSelect):not(.brandPlate):not(.systemState) {
  filter: brightness(1.035);
  transform: none;
}

button:active:not(:disabled):not(.stationSelect):not(.brandPlate):not(.systemState) {
  box-shadow: 0 1px 0 #101616 !important;
  transform: translateY(1px);
}

input,
textarea,
select {
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(35,30,24,.14);
}

.bankFilters button.active {
  background: #bba35f;
  box-shadow: inset 0 1px rgba(255,255,255,.3) !important;
}

.stationItem {
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(9,17,18,.28), inset 0 1px rgba(255,255,255,.08);
}

.stationItem.active {
  border-color: #c3aa65;
  box-shadow: 0 2px 7px rgba(9,17,18,.32), 0 0 0 1px rgba(195,170,101,.3);
}

.stationItem:hover,
.stationItem.active {
  transform: none;
}

.stationSelect {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #777e79, inset 0 1px rgba(255,255,255,.65), 0 1px 0 #080d0e;
}

.rackHeader {
  border-radius: 0 0 3px 3px;
  box-shadow: 0 3px 9px rgba(20,31,32,.3), inset 0 1px rgba(255,255,255,.12);
}

.rackModule,
.settingsPanel .settingsSection,
.routineSection {
  border-radius: 3px;
  box-shadow: 0 5px 12px rgba(18,26,27,.22), inset 0 1px rgba(255,255,255,.2);
}

.rackModule:hover {
  box-shadow: 0 6px 14px rgba(18,26,27,.26), inset 0 1px rgba(255,255,255,.2);
  transform: none;
}

.moduleNumber,
.settingsSectionNumber {
  background: #263131;
  border: 1px solid #101717;
  box-shadow: inset 0 0 0 1px #5d6259;
  color: #d0b568;
}

.statusDot,
.stateLamp,
.counterDisplay,
.liveSettingsBadge,
.stationContent .priorityLabel {
  border-radius: 2px;
}

.membershipCard,
.routineCard,
.routineCompletedGroup,
.stationRoutineToolbar {
  border-radius: 3px;
}

.routineCard {
  box-shadow: 0 2px 5px rgba(12,18,18,.25);
}

.settingsSaveBar,
.routineSaveBar {
  box-shadow: 0 -3px 9px rgba(8,13,13,.18);
}

/* Brushed-metal console surfaces and a readout-style system status. */

.bootBadge {
  border: 0;
  border-radius: 0;
  display: block;
  height: 120px;
  overflow: visible;
  width: 140px;
}

.bootScreen .logoReel {
  animation: reelSpin 900ms linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.systemStrip {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(17,27,28,.025) 1px 4px),
    linear-gradient(180deg, #536264, #344346 55%, #263437);
  border-color: #778481;
}

.systemState {
  background: #111a1b;
  border: 1px solid #677673;
  border-radius: 2px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.72), 0 1px rgba(255,255,255,.08) !important;
  cursor: pointer;
  flex: 0 0 154px;
  max-width: 154px;
  min-height: 45px;
  min-width: 154px;
  padding: 6px 9px;
  width: 154px;
}

.systemState:hover:not(:disabled),
.systemState:active:not(:disabled) {
  background: #152021;
  border-color: #87938f;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.72), 0 1px rgba(255,255,255,.08) !important;
  filter: none;
  transform: none;
}

.systemReadout small {
  color: #788784;
  letter-spacing: .14em;
}

.systemReadout {
  max-width: none;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.systemReadout > span {
  color: #ddd2ad;
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .025em;
  max-width: 100%;
}

.consoleShell {
  background: #626966;
}

.stationBank {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, transparent 0 117px, rgba(7,16,18,.3) 117px 123px),
    #223234;
}

.stationRack {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(37,48,47,.018) 1px 4px),
    linear-gradient(180deg, #a7aca7, #888f8b 46%, #7a827e);
}

.rackHeader {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #697d7f, #526a6d 58%, #465e61);
  border-color: #8e9b97;
}

.identityModule,
.modeSetupModule,
.advancedModule {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, rgba(72,79,75,.025) 1px 4px),
    linear-gradient(180deg, #d7d8d2, #bec2bd 72%, #adb2ad);
}

.voiceModule {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, rgba(81,72,57,.022) 1px 4px),
    linear-gradient(180deg, #cdc5b5, #b8ae9b 72%, #a79d8d);
}

.selectorModule {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.105) 0 1px, rgba(59,79,76,.022) 1px 4px),
    linear-gradient(180deg, #b9cbc6, #a4bbb5 72%, #96aaa5);
}

.streamModule,
.settingsPanel .settingsSection,
.routineSection {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #384d50, #304447);
}

.rackModule,
.settingsPanel .settingsSection,
.routineSection {
  border-color: #697572;
  box-shadow: 0 4px 10px rgba(18,26,27,.24), inset 0 1px rgba(255,255,255,.28);
}

.rackModule::before,
.rackModule::after {
  filter: saturate(.45) contrast(1.08);
}

.controlRoomToast {
  animation: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #405356, #2d4144);
  border-color: #7c8985;
  border-left-width: 3px;
  box-shadow: 0 5px 14px rgba(8,14,15,.38), 0 1px 0 #11191a;
}

.bankFilters {
  background: #0e1718;
  border-color: #778581;
  box-shadow: inset 0 0 0 1px #080d0e;
}

.bankFilters button {
  background: linear-gradient(180deg, #405154, #2b3a3c);
  border-color: #899490;
  color: #f2eee2;
  text-shadow: 0 1px #101718;
}

.bankFilters button:hover:not(:disabled) {
  background: linear-gradient(180deg, #526467, #364749);
  border-color: #a8b0ac;
}

.bankFilters button.active,
.bankFilters button[aria-pressed="true"] {
  background: linear-gradient(180deg, #e0c574, #bfa04e);
  border-color: #f0d98f;
  color: #12191a;
  text-shadow: none;
}

/* B77-style transport cue: motion stays inside the hardware. */

body.is-tuning .logoVuNeedleLeft {
  animation: logoVuLeft 280ms ease-in-out 4 alternate;
}

body.is-tuning .logoVuNeedleRight {
  animation: logoVuRight 320ms -110ms ease-in-out 4 alternate;
}

.bootScreen .logoVuNeedleLeft {
  animation: logoVuLeft 420ms ease-in-out infinite alternate;
}

.bootScreen .logoVuNeedleRight {
  animation: logoVuRight 470ms -160ms ease-in-out infinite alternate;
}

body.is-tuning .systemState {
  animation: systemStatusCue 560ms ease-in-out 2;
}

body.is-tuning .systemLed {
  animation: systemLedCue 280ms steps(1, end) 4;
}

/* Building the sheet needs a browser and takes several seconds. A still light
   through all of it reads as nothing happening, which is how the last one got
   reported as broken. Slower than the tuning cue so the two do not look alike:
   that one is a blip, this one is work in progress. */
body[data-guide-state="building"] .systemLed {
  animation: systemLedBuilding 1080ms ease-in-out infinite;
}

@keyframes systemLedBuilding {
  0%, 100% { background: var(--yellow); box-shadow: 0 0 10px rgba(239,196,73,.85); }
  50% { background: #6c6350; box-shadow: 0 0 4px rgba(239,196,73,.28); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-guide-state="building"] .systemLed { animation-duration: 2400ms; }
}

body.is-tuning .systemReadout > span {
  color: #f0d277;
  text-shadow: 0 0 7px rgba(240,210,119,.58);
}

@keyframes logoVuLeft {
  from { transform: rotate(-18deg); }
  to { transform: rotate(32deg); }
}

@keyframes logoVuRight {
  from { transform: rotate(-10deg); }
  to { transform: rotate(38deg); }
}

@keyframes systemStatusCue {
  0%, 100% { background: #111a1b; border-color: #677673; }
  50% { background: #1b2928; border-color: #c7ad67; }
}

@keyframes systemLedCue {
  0%, 100% { background: #72947b; opacity: 1; }
  50% { background: #d8bd68; opacity: .45; }
}

.settingsSaveBar span:empty,
.routineSaveBar span:empty {
  display: none;
}

.settingsSaveBar button,
.routineSaveBar button {
  margin-left: auto;
}

.settingsSaveBar .saveButton:disabled,
.routineSaveBar .saveButton:disabled {
  background: #c9c3b1;
  color: #252d2b;
  opacity: .72;
}

@media (max-width: 620px) {
  .settingsPanel,
  .routineDrawerPanel {
    width: 100vw;
  }

  .settingsPanel .settingsSection,
  .routineSection {
    margin-inline: 10px;
  }

  .routineDrawerProgress {
    grid-template-columns: 1fr;
  }

  .stationRoutineToolbar {
    grid-template-columns: 1fr;
  }

  .stationRoutineToolbar .shortcutEditorActions,
  .stationRoutineToolbar .fieldHelp {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Tactile studio play: draggable needles and one clean cassette-load cue. */

.playableMeter {
  cursor: ew-resize;
  touch-action: none;
}

.playableMeter:focus-visible {
  box-shadow: inset 0 0 12px rgba(76,44,20,.45), 0 0 0 3px #f0ca62;
  outline: 0;
}

.playableMeter.is-playing .meterNeedle,
.playableMeter.is-playing .miniMeterNeedle {
  animation: none !important;
  transition-duration: 55ms;
}

body.station-switching .stationItem.active .cassetteReel {
  animation: cassetteCue 520ms cubic-bezier(.2,.75,.25,1);
}

body.station-switching .stationItem.active .cassetteReel:last-child {
  animation-direction: reverse;
}

.cassetteTapePath {
  overflow: hidden;
  position: relative;
}

.cassetteTapePath::after {
  background: linear-gradient(90deg, transparent, rgba(242,214,139,.82), transparent);
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(-120%);
}

body.station-switching .stationItem.active .cassetteTapePath::after {
  animation: tapeGlint 460ms 80ms ease-out;
}

body.station-switching .stationItem.active .stationSignal i.lit {
  animation: tapeReady 520ms ease-out;
}

@keyframes cassetteCue {
  from { transform: rotate(0); }
  to { transform: rotate(300deg); }
}

@keyframes tapeGlint {
  to { transform: translateX(120%); }
}

@keyframes tapeReady {
  0%, 44% { opacity: .24; box-shadow: none; }
  58% { opacity: 1; box-shadow: 0 0 9px #78d5a0; }
  72% { opacity: .42; }
  100% { opacity: 1; }
}

/* Readable, transient control-room notices. */

.controlRoomToast[hidden] {
  display: none;
}

.controlRoomToast {
  align-items: flex-start;
  animation: controlRoomToastIn 180ms cubic-bezier(.2,.85,.3,1.15);
  background: linear-gradient(180deg, #34484a, #223234);
  border: 1px solid #8b9b94;
  border-left: 6px solid #dfbd62;
  box-shadow: 0 12px 30px rgba(8, 14, 15, .46), 0 4px 0 #11191a;
  color: #f1ecdf;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 13px 14px;
  position: fixed;
  right: 18px;
  top: 104px;
  width: min(480px, calc(100vw - 36px));
  z-index: 28;
}

.controlRoomToast > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.controlRoomToast .moduleCode {
  color: #d4c58f;
  margin: 0;
}

.controlRoomToast p {
  color: #fff9e9;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0;
  overflow-wrap: anywhere;
}

.controlRoomToast button {
  background: #e9e2d1;
  color: #1d2b2c;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
}

@keyframes controlRoomToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 840px) {
  .controlRoomToast {
    right: 8px;
    top: 78px;
    width: calc(100vw - 16px);
  }
}

/* Seat the manual trim readout in the cassette's tape window. */

.stationContent .priorityLabel {
  background: #d9d8cd;
  border: 1px solid #344240;
  border-radius: 999px;
  bottom: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7);
  color: #263432;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  left: 50%;
  letter-spacing: .06em;
  line-height: 1;
  padding: 2px 6px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 4;
}

.stationContent .priorityLabel.positive {
  border-color: #3d7050;
  color: #245439;
}

.stationContent .priorityLabel.negative {
  border-color: #8a593d;
  color: #6d3825;
}

/* Explicit edit-and-save workflow for routine phrases. */

.routineTriggerActions {
  align-items: stretch;
  display: flex;
  gap: 8px;
}

.routineEditPhrase {
  background: #303b38;
  border-color: #16201e;
  color: #f1ecdf;
  min-height: 40px;
}

.routineCard.is-editing {
  border-left-color: #d77d3b;
  box-shadow: 0 4px 0 #0b0d0b, 0 0 0 2px rgba(215,125,59,.24);
}

.routineCard.is-editing .routineEditPhrase {
  background: #d8b452;
  color: #231d10;
}

.drawerPanel .routinePhraseInput[readonly] {
  background: #d8d7ce;
  border-color: #747a75;
  box-shadow: inset 0 1px 3px rgba(31,39,36,.12);
  color: #2f3b38;
  cursor: default;
}

.drawerPanel .routineCard.is-editing .routinePhraseInput {
  background: #fff9eb;
  border-color: #b87036;
  box-shadow: 0 0 0 2px rgba(216,180,82,.28);
  cursor: text;
}

.routineSaveBar {
  align-items: center;
  background: #0e1211;
  border-left: 5px solid #d8b452;
  border-top: 1px solid #59635d;
  bottom: 0;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-top: auto;
  padding: 13px 20px 13px 15px;
  position: sticky;
  z-index: 9;
}

.routineSaveBar span {
  color: #bdc8c2;
  font-size: 11px;
  font-weight: 750;
}

.routineSaveBar button {
  flex: 0 0 auto;
}

body[data-save-state="dirty"] .routineSaveBar span {
  color: #ebcf72;
}

@media (max-width: 620px) {
  .routineTriggerActions {
    display: block;
  }

  .routineSaveBar {
    align-items: stretch;
    flex-direction: column;
  }

  .routineSaveBar button {
    width: 100%;
  }
}

.settingsSaveBar,
.routineSaveBar {
  background: #101716;
  border-left: 0;
  border-top-color: #66726d;
  min-height: 66px;
  padding: 12px 20px;
  z-index: 12;
}

/* Compact C-60 cartridges: readable station label above restrained mechanics. */

.stationItem {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #64716c, #3b4845 64%, #303c39);
  border-color: #7f8b86;
  box-shadow: inset 0 1px rgba(255,255,255,.16), inset 0 -2px rgba(13,20,18,.28), 0 2px 6px rgba(9,17,18,.3);
  min-height: 140px;
}

.stationOrder {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #56635f, #34413e);
  border-right-color: #202b29;
}

.stationSelect,
.stationItem:nth-child(even) .stationSelect {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  filter: none;
  margin: 5px;
  padding: 6px 7px 6px 5px;
}

.stationSelect:hover:not(:disabled),
.stationSelect:active:not(:disabled) {
  background: transparent;
  box-shadow: none;
}

.stationContent,
.stationItem:nth-child(even) .stationContent {
  background:
    radial-gradient(circle at 8px 8px, #151b1a 0 1.5px, #9da49f 2px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 8px) 8px, #151b1a 0 1.5px, #9da49f 2px 3.5px, transparent 4px),
    radial-gradient(circle at 8px calc(100% - 8px), #151b1a 0 1.5px, #9da49f 2px 3.5px, transparent 4px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #151b1a 0 1.5px, #9da49f 2px 3.5px, transparent 4px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #394240, #171e1d 68%, #111716);
  border: 1px solid #737e79;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #111817, inset 0 1px rgba(255,255,255,.16), 0 2px 2px rgba(8,13,13,.68);
  clip-path: none;
  display: block;
  min-height: 118px;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.stationContent::before {
  display: none;
}

.stationContent > * {
  position: relative;
  z-index: 1;
}

.stationLabel {
  background:
    linear-gradient(90deg, transparent 0 10px, rgba(75,104,105,.15) 10px 11px, transparent 11px),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(47,57,56,.045) 18px 19px),
    #ddd9cd;
  border: 1px solid #7b837e;
  box-shadow: 0 2px 3px rgba(5,9,8,.34), inset 0 1px rgba(255,255,255,.58);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px);
  color: #202929;
  display: grid;
  gap: 3px;
  grid-template-rows: 18px 13px 14px;
  height: 60px;
  left: 4px;
  padding: 6px 9px 4px 13px;
  position: absolute !important;
  right: 4px;
  top: 3px;
  z-index: 5 !important;
}

.stationLabel .stationTop {
  align-items: center;
}

.stationLabel .statusDot {
  font-size: 7px;
  padding: 2px 5px;
}

.stationLabel .stationTop strong {
  font-size: 12px;
  letter-spacing: -.01em;
}

.stationLabel .stationMetaRow {
  color: #4e5b59;
  font-size: 9px;
  line-height: 1.2;
}

.stationFoot {
  align-items: center;
  border-top: 1px solid rgba(74,86,83,.32);
  display: flex;
  height: 14px;
  justify-content: space-between;
  left: auto;
  min-width: 0;
  padding-top: 2px;
  position: static !important;
  right: auto;
  top: auto;
  z-index: auto !important;
}

.cassetteLower {
  bottom: 0;
  display: block;
  height: 58px;
  left: 0;
  position: absolute !important;
  right: 0;
  z-index: 2 !important;
}

.cassetteLower::before {
  background:
    linear-gradient(90deg, rgba(79,47,42,.22), transparent 16% 84%, rgba(79,47,42,.22)),
    linear-gradient(180deg, #8f4d43 0 6px, #c7ad82 6px 10px, #985046 10px 18px, #c7ad82 18px 22px, #85473f 22px 30px);
  border-bottom: 1px solid #63413a;
  border-top: 1px solid #a06155;
  bottom: auto;
  content: "";
  height: 35px;
  left: 4px;
  opacity: .9;
  position: absolute;
  right: 4px;
  top: 0;
  z-index: 0;
}

.stationLabel .miniTags {
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.stationLabel .miniTags span {
  background: rgba(219,216,204,.82);
  border-color: #7d857f;
  color: #465552;
  font-size: 7px;
  line-height: 1;
  overflow: hidden;
  padding: 2px 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cassetteMechanism {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #3b4240, #171d1c 58%, #242b29);
  border: 1px solid #111817;
  border-radius: 16px 16px 7px 7px;
  bottom: auto;
  box-shadow:
    inset 0 1px rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(0,0,0,.52),
    0 3px 4px rgba(9,13,12,.52);
  gap: 7px;
  grid-template-columns: 28px minmax(32px, 1fr) 28px;
  height: 31px;
  left: 13px;
  padding: 2px 6px;
  position: absolute !important;
  right: 9px;
  top: 5px;
  z-index: 3;
}

.cassetteReel {
  background: repeating-conic-gradient(#e7e4d8 0 22deg, #777f7a 22deg 31deg);
  border: 2px solid #626965;
  box-shadow: 0 0 0 1px #b4b5ac, inset 0 0 0 4px #d8d7cc;
  height: 25px;
  justify-self: center;
  width: 25px;
}

.cassetteReel::before {
  border: 1px solid rgba(68,76,72,.42);
  border-radius: 50%;
  box-shadow: inset 1px 1px rgba(255,255,255,.55), inset -1px -1px rgba(44,51,48,.28);
  content: "";
  inset: 2px;
  position: absolute;
}

.cassetteReel::after {
  background: #303a38;
  border: 2px solid #d8d6ca;
  inset: 6px;
}

.cassetteTapePath {
  background: #171b1a;
  border: 1px solid #767c77;
  border-radius: 8px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.68), inset 0 -1px rgba(222,218,203,.12);
  clip-path: none;
  height: 16px;
}

.cassetteTapePath::before {
  display: none;
}

.cassetteTapePath::after {
  background: linear-gradient(112deg, transparent 0 37%, rgba(238,235,218,.14) 42%, rgba(238,235,218,.04) 48%, transparent 54%);
  border-radius: 7px;
  content: "";
  display: block;
  inset: 1px;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.cassetteTapePack {
  background:
    repeating-linear-gradient(84deg, #765043 0 2px, #2b1e1a 2px 5px, #54372f 5px 7px, #241916 7px 10px),
    linear-gradient(180deg, #4a342d, #241b18 48%, #3c2a25);
  background-position: 0 0, 0 0;
  background-size: 12px 12px, 100% 100%;
  bottom: 2px;
  box-shadow: inset 0 1px rgba(128,92,75,.28), inset 0 -1px rgba(0,0,0,.36);
  display: block;
  position: absolute;
  top: 2px;
  transform: none;
  z-index: 2;
}

.cassetteTapePackLeft {
  border-radius: 10px 3px 3px 10px / 50%;
  left: 1px;
  width: 54%;
}

.cassetteTapePackRight {
  border-radius: 3px 10px 10px 3px / 50%;
  right: 1px;
  width: 40%;
}

.cassetteHeadPlate {
  align-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #343b39, #171d1c);
  bottom: 2px;
  box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 0 0 1px #5f6864, 0 1px 2px rgba(8,12,11,.42);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
  display: flex;
  height: 21px;
  justify-content: space-around;
  left: 13px;
  padding: 1px 14px 0;
  position: absolute !important;
  right: 9px;
  z-index: 2 !important;
}

.cassetteHeadPlate::before {
  background: linear-gradient(180deg, #ecebe3, #777f7b 55%, #333c39);
  box-shadow: 0 0 0 1px #59615d, inset 0 1px rgba(255,255,255,.72);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  content: "";
  height: 6px;
  left: 50%;
  position: absolute;
  top: -2px;
  transform: translateX(-50%);
  width: 11px;
}

.cassetteHeadPlate::after {
  background: #242c2a;
  content: "";
  height: 4px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
}

.cassetteHeadPlate i {
  background: #090d0c;
  border: 1px solid #747c77;
  border-radius: 2px;
  height: 5px;
  width: 5px;
}

.cassetteHeadPlate i:first-child,
.cassetteHeadPlate i:last-child {
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.stationContent .priorityLabel {
  background: #d8d6cc;
  bottom: auto;
  font-size: 7px;
  max-width: 58px;
  overflow: hidden;
  padding: 2px 4px;
  margin-left: auto;
  position: static;
  text-overflow: ellipsis;
  transform: none;
}

body.station-switching .stationItem.active .stationContent {
  animation: cassetteLatch 920ms ease-out;
}

body.station-switching .stationItem.active .cassetteReel {
  animation: cassetteReelEngage 820ms cubic-bezier(.16,.74,.2,1);
}

body.station-switching .stationItem.active .cassetteReel:last-child {
  animation-direction: normal;
  animation-delay: 34ms;
  animation-duration: 850ms;
}

body.station-switching .stationItem.active .cassetteMechanism {
  animation: cassetteTransportEngage 820ms ease-out;
}

body.station-switching .stationItem.active .cassetteTapePackLeft {
  animation: cassetteTapeFeedLeft 900ms linear;
}

body.station-switching .stationItem.active .cassetteTapePackRight {
  animation: cassetteTapeFeedRight 900ms linear;
}

body.station-switching .stationItem.active .stationSignal i.lit {
  animation: cassetteLampCue 860ms steps(1, end);
}

@keyframes cassetteLatch {
  0%, 100% { box-shadow: inset 0 0 0 1px #111817, inset 0 1px rgba(255,255,255,.16), 0 2px 2px #080d0e; }
  14% { box-shadow: inset 0 0 0 2px #0c1211, inset 0 3px 6px rgba(0,0,0,.56), 0 1px 1px #080d0e; }
  38% { box-shadow: inset 0 0 0 1px #34403d, inset 0 1px rgba(255,255,255,.18), 0 2px 2px #080d0e; }
}

@keyframes cassetteReelEngage {
  0% { transform: rotate(0deg); }
  14% { transform: rotate(18deg); }
  74% { transform: rotate(510deg); }
  100% { transform: rotate(540deg); }
}

@keyframes cassetteTransportEngage {
  0%, 100% { box-shadow: inset 0 1px rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.52), 0 3px 4px rgba(9,13,12,.52); }
  16% { box-shadow: inset 0 3px 6px rgba(0,0,0,.58), inset 0 -1px rgba(255,255,255,.1), 0 2px 3px rgba(9,13,12,.58); }
  42% { box-shadow: inset 0 1px rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.48), 0 3px 4px rgba(9,13,12,.52); }
}

@keyframes cassetteTapeFeedLeft {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: -7px 38px, 0 0; }
}

@keyframes cassetteTapeFeedRight {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 7px 38px, 0 0; }
}

@keyframes cassetteLampCue {
  0%, 16%, 34% { opacity: .28; box-shadow: none; }
  8%, 24%, 42%, 100% { opacity: 1; box-shadow: 0 0 7px #78c894; }
}

/* Station bank sorting: grab the cassette itself; arrows remain as fallback. */

.stationSelect[draggable="true"] {
  cursor: grab;
  user-select: none;
}

.stationSelect[draggable="true"]:active,
.stationItem.is-dragging .stationSelect {
  cursor: grabbing;
}

.stationOrder button {
  cursor: pointer;
}

.stationItem.is-dragging {
  filter: saturate(.72);
  opacity: .82;
}

.stationItem.is-dragging .stationSelect {
  box-shadow: none;
}

.stationItem.is-dragging .stationContent {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.42), 0 0 0 1px #d2b75f, 0 5px 12px rgba(6,10,10,.38);
}

body.station-reordering .stationItem {
  overflow: visible;
}

.stationItem.drop-before::before,
.stationItem.drop-after::before {
  background: #e2bd5d;
  box-shadow: 0 0 0 1px #172022, 0 0 6px rgba(226,189,93,.46);
  content: "";
  height: 3px;
  left: 4px;
  pointer-events: none;
  position: absolute;
  right: 4px;
  z-index: 8;
}

.stationItem.drop-before::after,
.stationItem.drop-after::after {
  background: #182120;
  border: 1px solid #e2bd5d;
  border-radius: 2px;
  color: #f4dc91;
  content: "PLACE TAPE";
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 6px;
  font-weight: 900;
  height: 13px;
  left: 50%;
  letter-spacing: .12em;
  line-height: 12px;
  padding: 0 5px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: max-content;
  z-index: 9;
}

.stationItem.drop-before::before {
  top: -7px;
}

.stationItem.drop-before::after {
  top: -12px;
}

.stationItem.drop-after::before {
  bottom: -7px;
}

.stationItem.drop-after::after {
  bottom: -12px;
}

body.station-reordering .stationItem:not(.is-dragging) {
  transition: border-color 120ms ease, opacity 120ms ease;
}

body.station-reordering #saveStatus {
  opacity: 0;
}

body.station-reordering .stationCueStatus {
  opacity: 1;
}

body.station-reordering .systemState {
  border-color: #c7ad67;
}

body.station-reordering .systemLed {
  background: #d8bd68;
  opacity: 1;
}

/* A station cue temporarily occupies the fixed-width status readout. */

.systemMessage {
  display: block;
  height: 11px;
  position: relative;
}

.systemMessage > span {
  display: block;
  inset: 0;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  transition: opacity 120ms ease;
  white-space: nowrap;
}

.stationCueStatus {
  color: #f0d277;
  opacity: 0;
}

body.station-switching #saveStatus {
  opacity: 0;
}

body.station-switching .stationCueStatus {
  animation: stationCueText 1080ms ease-out;
}

body.local-loading #saveStatus,
body.local-playing #saveStatus {
  opacity: 0;
}

body.local-loading .stationCueStatus,
body.local-playing .stationCueStatus {
  opacity: 1;
}

body.local-loading .systemLed {
  animation: phoneLoadingLed 680ms ease-in-out infinite alternate;
  background: #efb84e;
  box-shadow: 0 0 13px rgba(239,184,78,.85), inset 0 0 3px white;
}

body.local-playing .systemLed {
  background: #6fc880;
  box-shadow: 0 0 13px rgba(83,199,111,.9), inset 0 0 3px white;
}

/* Signal, not intent.
   local-playing comes from isSounding(), which asks whether the element is
   unpaused — and it is unpaused the instant play() is called, long before the
   first byte of a live stream arrives. On its own it was starting the meters
   during the connection, sometimes for a station that never came. local-loading
   is cleared by the element's own `playing` event, so the pair together mean
   what the meters have always claimed to mean: there is sound. It is the same
   moment the dial lands. */
body.local-playing:not(.local-loading) .meterNeedle {
  animation: liveMasterNeedle 760ms ease-in-out infinite alternate;
}

body.local-playing:not(.local-loading) .miniMeterNeedle {
  animation: liveMiniNeedle 620ms ease-in-out infinite alternate;
}

body.local-playing:not(.local-loading) .miniMeter:nth-child(2) .miniMeterNeedle {
  animation-delay: -310ms;
}

@keyframes phoneLoadingLed {
  from { filter: brightness(.66); opacity: .62; }
  to { filter: brightness(1.25); opacity: 1; }
}

@keyframes liveMasterNeedle {
  from { transform: rotate(-15deg); }
  to { transform: rotate(11deg); }
}

@keyframes liveMiniNeedle {
  from { transform: rotate(-18deg); }
  to { transform: rotate(15deg); }
}

body.station-switching .systemState {
  animation: stationSystemCue 1080ms ease-out;
}

body.station-switching .systemLed {
  animation: stationSystemLed 1080ms steps(1, end);
}

/* The meters used to dance here too, on the 1120ms of switching theatre. They
   are volume meters: moving them for a station that has only been selected
   claims a signal that has not arrived, and often never does. Only the dial
   sweeps while switching. */

/* Sweeping for as long as there is genuinely something to wait for.
   station-switching is a fixed 1120ms of theatre; local-loading lasts exactly as
   long as the connection takes, so a slow station keeps scanning instead of
   settling onto a frequency it has not reached yet, and the needle drops the
   moment the stream actually plays. */
body.station-switching .frequencyNeedle,
body.local-loading .frequencyNeedle {
  animation: dialScan 2400ms cubic-bezier(.42,0,.32,1) infinite;
}

body.station-switching .logoVuNeedleLeft {
  animation: logoVuLeft 280ms ease-in-out 4 alternate;
}

body.station-switching .logoVuNeedleRight {
  animation: logoVuRight 320ms -110ms ease-in-out 4 alternate;
}

@keyframes stationCueText {
  0% { opacity: 0; transform: translateY(3px); }
  14%, 76% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}

@keyframes stationSystemCue {
  0%, 100% { background: #111a1b; border-color: #677673; }
  18% { background: #0c1213; border-color: #4f5c59; }
  42% { background: #182423; border-color: #c7ad67; }
}

@keyframes stationSystemLed {
  0%, 18%, 36% { background: #4c5b56; opacity: .38; }
  10%, 28%, 46%, 100% { background: #d8bd68; opacity: 1; }
}

/* The physical tape leaves the lower reel tangents and sits behind the reader. */

.mobileSignOutButton { display: none; }

@media (max-width: 840px) {
  .settingsSaveBar .mobileSignOutButton {
    background: transparent;
    border-color: #89938e;
    color: #eee7d7;
    display: inline-flex;
  }
}

.logoTape {
  stroke-linecap: round;
  stroke-width: 1.2;
}

/* The top-bar quiet buttons are hidden below 840px, so the print guide needs a
   home inside settings on mobile. */
.mobileOnlyActions { display: none; }
.mobileActionRow { display: flex; flex-wrap: wrap; gap: 10px; }
.mobileActionRow button {
  background: #f4f2ea;
  border: 1px solid #181a17;
  color: #181a17;
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  padding: 0 18px;
}
@media (max-width: 840px) {
  .mobileOnlyActions { display: grid; }
}

.fieldHint { color: #74766e; display: block; font-size: 11px; line-height: 1.4; margin-top: 5px; }

.guideLinkRow { display: flex; flex-wrap: wrap; gap: 8px; }
.guideLinkRow input { border: 1px solid #181a17; flex: 1 1 260px; font: inherit; min-height: 44px; min-width: 0; padding: 0 12px; }
.guideLinkRow button { background: #f4f2ea; border: 1px solid #181a17; cursor: pointer; font-weight: 700; min-height: 44px; padding: 0 16px; }

.primaryCandidateAction { background: #181a17; border-color: #181a17; color: #f4f2ea; }

/* The settings drawer is dark, so these follow its palette rather than the
   light page behind it. */
.shareStep { border-top: 1px solid #514c41; margin-top: 14px; padding-top: 14px; }
.shareStep:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.shareStepHead { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 8px; }
.shareStepHead span { display: flex; gap: 12px; }
.linkButton { background: none; border: 0; color: var(--cream-2); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.shareStationList { border: 1px solid #4c493f; display: grid; max-height: 190px; overflow-y: auto; }
.shareStationList label, .importPreview label { align-items: center; border-bottom: 1px solid #3b3b36; cursor: pointer; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr); padding: 9px 12px; }
.shareStationList label:last-child, .importPreview label:last-of-type { border-bottom: 0; }
.shareStationList input, .importPreview input { accent-color: var(--cream-2); min-height: 18px; width: 18px; }
.importPreview { border: 1px solid #4c493f; margin-top: 10px; }
.importPreview span { display: grid; gap: 2px; min-width: 0; }
.importPreview strong { color: var(--cream-2); }
.importPreview small { color: #9a978c; }
.importPreview label.isDuplicate { background: #24231f; }
.importPreview label.isDuplicate strong { color: #9a978c; }
.importPreview .mobileActionRow { padding: 10px 12px; }
#importStationsInput { width: 100%; }
.importFileLabel { align-items: center; border: 1px solid var(--cream-2); color: var(--cream-2); cursor: pointer; display: inline-flex; font-weight: 700; min-height: 44px; padding: 0 16px; }
.importFileLabel input { display: none; }

.fieldWithAction { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.fieldWithAction button { background: none; border: 1px solid #4c493f; color: var(--cream-2); cursor: pointer; font: inherit; min-height: 34px; padding: 0 12px; }
.fieldWithAction span { color: #9a978c; font-size: 12px; }

/* Both names and the button that fills them read as one row. The button ends
   flush with the inputs rather than centred against the labels above them. */
.identityNames { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 12px; grid-column: 1 / -1; }
.identityNames > label { flex: 1 1 220px; min-width: 0; }
.identityFinder { align-items: flex-end; flex: 0 0 auto; margin-bottom: 0; }
.identityFinder button { min-height: 40px; }

/* A hint is not a label. Inside one it was inheriting the uppercase and letter
   spacing, so it read as a second heading competing with the field it explains
   — and differently from the identical hints that sit outside a label. */
.fieldHint { font-weight: 400; letter-spacing: 0; text-transform: none; }

/* The hint colour is tuned for the light panels. On the dark drawers it landed
   at 2.62 against the background, below the 4.5 needed to be readable; this
   measures 4.89 on the same background. */
.drawer .fieldHint { color: #a8a59a; }

/* Routines now sit inside panel 03 with the names. */
.routineControlsLabel { align-items: center; display: flex; font-size: 11px; gap: 8px; letter-spacing: .08em; text-transform: uppercase; }

.emptyState strong { display: block; margin-bottom: 6px; }
.emptyState p { color: #9a978c; line-height: 1.5; margin: 0 0 8px; max-width: 62ch; }

/* ---- Sharing: one shape for both directions -------------------------------
   Sending and receiving are the same operation seen from two ends, so they get
   the same structure: a heading, the thing you act on, one row of actions with
   a single filled primary, then the status. Previously the four buttons here
   used three different treatments and the file picker shouted in uppercase. */

.settingsSection .isPrimaryAction {
  background: #f4f2ea;
  border: 1px solid #181a17;
  color: #181a17;
  font-weight: 700;
}

.settingsSection .isSecondaryAction {
  background: none;
  border: 1px solid #6f6a5c;
  color: var(--cream-2);
  font-weight: 600;
}

.settingsSection .isSecondaryAction:hover { border-color: var(--cream-2); }

/* The file picker is a label wearing a button, so it inherits the uppercase
   every label gets. It is a button and should read like its neighbour. */
.importFileLabel {
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* Station names are names. The rows are labels, so they were being upper-cased
   along with every other label — which turns dublab into DUBLAB. */
.shareStationList label,
.importPreview label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

/* All and None were underlined text among filled buttons. Small and quiet, but
   still recognisably the same family of control. */
.chipButton {
  background: none;
  border: 1px solid #6f6a5c;
  color: var(--cream-2);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  min-height: 26px;
  padding: 0 10px;
}

.chipButton:hover { border-color: var(--cream-2); }

.shareStepHead { margin-bottom: 10px; }
.shareStepHead strong { font-size: 14px; }
.shareStep { border-top: 1px solid #514c41; margin-top: 20px; padding-top: 20px; }
.shareStep > .mobileActionRow { margin-top: 12px; }
.shareStep > .settingsHint:empty { display: none; }
.shareStep > .settingsHint { margin-top: 10px; }

/* The pasted-in box and the guide link are the two text surfaces here; they
   were black against a dark panel, which reads as a terminal rather than a
   field you can type in. */
#importStationsInput,
#guideLinkInput {
  background: #1b2224;
  border: 1px solid #6f6a5c;
  color: var(--cream-2);
  padding: 10px 12px;
}

#importStationsInput:focus-visible,
#guideLinkInput:focus-visible { border-color: var(--cream-2); outline: none; }

/* ---- The homepage fold ----------------------------------------------------
   Its buttons were using the dark drawer's palette on a light panel: cream
   text at 3.95 against the panel, which is under AA and is why they looked
   washed out next to the Change button beside them. They now match it. */

.identityModule .fieldWithAction button,
.identityFinder button,
.refineRow button {
  background: #f0e5cc;
  border: 1px solid #171513;
  color: #171513;
  font-weight: 700;
  min-height: 40px;
  padding: 0 14px;
}

.identityModule .fieldWithAction button:hover,
.identityFinder button:hover,
.refineRow button:hover { background: #fff7e4; }

/* Two steps, not one stack: the address, then what is done with it. Each is a
   heading, a control, and its own status line, in that order every time.
   On the wrapper, not on the details: Chrome puts a details element's content
   inside an anonymous box, so a grid set on the details never reaches these. */
.homepageDetails .foldBody {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}

.homepageDetails > label {
  display: grid;
  gap: 5px;
}

.homepageDetails .fieldWithAction {
  align-items: center;
  margin-bottom: 0;
}

.refineRow {
  border-top: 1px dashed rgba(117, 108, 89, .55);
  gap: 9px;
  padding-top: 15px;
}

.refineRow .finderSearch {
  display: flex;
  gap: 9px;
}

.refineRow .finderSearch input {
  flex: 1 1 auto;
  min-width: 0;
}

/* The closing note explains the whole step, so it sits under it rather than
   floating as a third paragraph of equal weight. */
.homepageDetails > .refineRow > .fieldHint { margin-top: 2px; }

/* ---- Panel 01: hierarchy, width, grouping ---------------------------------
   Eight fields shared one label style and one input style, so the station's
   name looked exactly like its category tags and the eye had no way in. */

/* Two levels, not one. The names are what the station is; the rest describe
   it. Sentence case reads faster than caps at this size, which is the point
   of promoting them. */
.identityFields .isPrimaryField > .fieldLabel,
.identityFields .isPrimaryField {
  color: #2c2822;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.identityFields .isPrimaryField > input {
  font-size: 15px;
  min-height: 44px;
}

/* The marker sits with the words it explains rather than pinned to the right
   edge of a cell that can be the whole panel wide. */
.fieldLabel {
  align-items: center;
  display: flex;
  gap: 7px;
}

.fieldLabel > .fieldInfo {
  position: static;
  right: auto;
  top: auto;
}

/* Width now tracks how much the field actually holds. A city name was getting
   half the panel; a printed sentence was getting the same. */
.identityFields > .isTightField { grid-column: span 1; }

/* Space does the grouping: names, then where it is, then how it is described.
   A uniform gap between all eight made them one undifferentiated stack. */
.identityFields > .isTightField:first-of-type,
.identityFields > .categoryField:first-of-type {
  margin-top: 10px;
}

/* Matches the breakpoint where the panel becomes four columns. Below it there
   are only two, so a short field cannot be narrower than half. */
@media (min-width: 1440px) {
  .identityFields > .isTightField { grid-column: span 1; }
  .identityFields > label.categoryField:not(:last-of-type) { grid-column: span 2; }
}

/* ---- Contrast pass --------------------------------------------------------
   Eight text/background pairs across the console measured below WCAG AA. Each
   correction is the smallest step along lightness that clears 4.5:1 against
   the surface it actually sits on, so the hues are unchanged.

     hint text on a panel          2.14 -> 4.54
     hint text on the grey panel   2.61 -> 4.52
     eyebrow on the cart header    3.26 -> 4.51
     clock label                   3.46 -> 4.51
     small-caps field label        3.86 -> 4.51
     "Select a station."           4.01 -> 4.51
     master signal label           4.01 -> 4.51
     the fold's summary            4.36 -> 4.54                              */

.fieldHint { color: #434440; }
label { color: #585040; }
.inlineDetails summary { color: #585040; }
.studioClock span,
.systemReadout small { color: #89816e; }
.rackIdentity p,
.meterLabel { color: #e3e9e5; }
/* Not .moduleCode globally: the same eyebrow appears on light panels, where
   lightening it takes it to 1.24. Only the dark cart header needed it. */
.rackHeader .moduleCode { color: #edf1ee; }

/* ---- Target sizes ---------------------------------------------------------
   WCAG 2.2 sets 24x24 CSS px as the floor for a pointer target. These were
   under it: the info markers at 18x18, and the disclosure summaries at 12-13px
   tall — wide, but a 12px-high strip is a poor thing to aim at, especially on
   a touchscreen. Height only, so nothing reflows sideways. */

.fieldInfo summary {
  min-height: 24px;
  min-width: 24px;
}

.inlineDetails > summary,
.siteFinder > summary {
  align-items: center;
  display: flex;
  gap: 7px;
  min-height: 32px;
}

/* display:flex drops the native disclosure marker, and a fold with no sign of
   being a fold is just a heading that ignores you. Drawn explicitly so it
   survives the layout and still turns when open. */
.inlineDetails > summary::-webkit-details-marker,
.siteFinder > summary::-webkit-details-marker { display: none; }

.inlineDetails > summary::before,
.siteFinder > summary::before {
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  content: "";
  flex: none;
  height: 0;
  transition: transform 120ms ease;
  width: 0;
}

.inlineDetails[open] > summary::before,
.siteFinder[open] > summary::before { transform: rotate(90deg); }

/* The filter row and the select-all chips sat at 26-28px. */
.bankFilters button,
.chipButton {
  min-height: 32px;
}

/* The live badge now sits beside the heading rather than in the number slot,
   so it should not inherit the heading's size or push the line taller. */
.settingsSectionHeader h3 .liveSettingsBadge {
  font-size: 9px;
  margin-left: 9px;
  padding: 2px 7px;
  position: relative;
  top: -1px;
  vertical-align: middle;
}

/* ---- Action weight in Settings --------------------------------------------
   The most prominent control in the drawer was "Erase all listening data" at
   631px — the widest thing there, and the one action that cannot be undone —
   while the save button sat at 84px. Destructive work should be reachable, not
   loud. Sized to its label, and set apart from the fields above it. */

.dangerButton {
  align-self: start;
  justify-self: start;
  margin-top: 6px;
  width: auto;
}

/* Same inversion on mobile, where signing out was wider than saving. */
@media (max-width: 840px) {
  .settingsSaveBar .mobileSignOutButton {
    flex: 0 0 auto;
    width: auto;
  }
}

/* ---- The finder's fallbacks read as a ladder -------------------------------
   Each rung is what you try when the one above it did not reach the station.
   They were four controls of near-equal weight in a stack, so the order they
   are meant to be tried in was invisible. */

.finderRung {
  /* No rule above it. It divided two rungs when there were two; with the
     lookup moved up beside the field it belongs to, this is the only one left
     and the line was a hairline floating over nothing. */
  margin-top: 18px;
}

.rungTitle {
  color: #cfd8d3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0 0 9px;
  text-transform: none;
}

/* Prominence falls as you go down: the site read keeps the filled button, the
   fallbacks below it are outlined. */
.finderRung .siteLookupRow button {
  background: none;
  border: 1px solid #7e8a86;
  color: var(--cream-2);
  font-weight: 600;
}

.finderRung .siteLookupRow button:hover { border-color: var(--cream-2); }

.assistantRung .fieldHint + .fieldHint { margin-top: 6px; }

/* ---- The fold uses the width it is given -----------------------------------
   A web address and a one-line instruction were each stretched across the whole
   panel, and stacking two full-width steps is what pushed the closing note so
   far down the page. Side by side above the breakpoint where the panel has the
   room: the address on the left, correcting what was read from it on the right.
   The rule between them turns from a horizontal divider into a vertical one. */

@media (min-width: 1440px) {
  .homepageDetails .foldBody {
    align-items: start;
    column-gap: 30px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .homepageDetails .foldBody > label,
  .homepageDetails .foldBody > .fieldWithAction { grid-column: 1; }

  .homepageDetails .foldBody > .refineRow {
    border-left: 1px dashed rgba(117, 108, 89, .55);
    border-top: 0;
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-left: 26px;
    padding-top: 0;
  }
}

/* ---- Telling instruction from outcome -------------------------------------
   The static explanation of a field and the result of an action were rendered
   almost identically, adjacent, with the result the fainter of the two. The
   result is the thing you are waiting for, so it carries more weight, not
   less, and stands away from the line that is always there. */

#stationEnrichStatus:not(:empty),
#refineStatus:not(:empty) {
  color: #2f2b24;
  font-weight: 600;
  margin-top: 4px;
}

/* With every field filled there is no Fill button, and the row that holds it
   collapsed to a bare sentence sitting where a control used to be. */
.homepageDetails .fieldWithAction:not(:has(button:not([hidden]))) {
  margin: 0;
  min-height: 0;
}

/* Peer labels in the same fold were 11px in one colour and 9px in another,
   which made the second read as a warning. */
.refineRow > label {
  color: #585040;
  font-size: 11px;
  letter-spacing: 0.07em;
}

/* The refine status row held its height while empty, pushing the explainer
   43px below the input it explains — far enough that it landed level with the
   status in the other column and read as a pair with it. It collapses now, so
   the sentence sits with its own field. */
.refineFoot:not(:has(> *:not([hidden]):not(:empty))) {
  display: none;
}

/* ---- The radio deck --------------------------------------------------------
   Above the cart library: the cassettes are stations you pick, this is the one
   that picks for you. The faceplate takes the cassette mechanism's own brushed
   gradient so it reads as part of the same machine, and the readout is a
   vacuum-fluorescent panel rather than the amber of the studio clock — the
   deck is audio equipment, not another status message. */

.radioDeck {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #7c857f, #59635f);
  border: 1px solid #344240;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 5px 0 #2b3634, 0 9px 16px rgba(9,17,18,.34);
  display: grid;
  gap: 11px;
  margin-bottom: 12px;
  padding: 12px;
}

.vfd {
  background: radial-gradient(120% 160% at 50% -30%, #16302f, #070d0e 70%);
  border: 1px solid #223032;
  border-radius: 2px;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.42);
  min-width: 0;
  padding: 9px 12px;
}

.vfdLegends { display: flex; gap: 11px; margin-bottom: 6px; }

/* Unlit legends stay dim, the way a real panel does, but not so dim the word
   cannot be read — a legend nobody can read tells you nothing about the state
   it is reporting. Lit is 9.4 against the glass, unlit 3.0. */
.vfdLegends b {
  color: #5c7b78;
  font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
}

.vfdLegends b.isLit { color: #5fe9d0; text-shadow: 0 0 7px rgba(95,233,208,.75); }

.vfdMain {
  color: #7ff3dc;
  font: 850 16px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  text-shadow: 0 0 9px rgba(95,233,208,.5);
  white-space: nowrap;
}

/* The station and what is on it, on one line, scrolling when it will not fit —
   the way a lock screen and a real deck both handle a long title.
   Ellipsis is kept for the case where scrolling is switched off: someone who
   has asked the system for less motion should still see the line end cleanly
   rather than cut mid-letter. */
.vfdMainText {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

/* Set from script, because how far to travel and how long to take are both
   properties of this particular title's length. */
.vfdMainText.isScrolling {
  animation: vfdTicker var(--vfd-scroll-seconds, 12s) linear infinite;
  max-width: none;
  text-overflow: clip;
}

/* The line is written twice; this keeps the two copies on one row so the second
   is standing ready where the first started. */
.vfdRun { display: inline-block; white-space: pre; }

/* One direction, no pause, no return. It travels exactly the width of one copy
   and restarts, which lands the second copy on the first's starting position —
   so the reset is invisible and the text simply comes round again. */
@keyframes vfdTicker {
  from { transform: translateX(0); }
  to { transform: translateX(var(--vfd-run, 0)); }
}

@media (prefers-reduced-motion: reduce) {
  .vfdMainText.isScrolling { animation: none; max-width: 100%; text-overflow: ellipsis; }
}

.vfd.isIdle .vfdMain { color: #2b5f59; text-shadow: none; }

.vfdSub {
  color: #5a9e96;
  font: 800 8px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two columns since the master switch went: the keys at their own width, the
   mode selector taking what is left. It was three, and dropping a child
   without dropping its column left the selector stretched across a gap where
   the switch had been. */
.deckRow {
  align-items: center;
  display: grid;
  /* Save, then the transport keys, then the mode. The wider gap between the
     first two is deliberate and is set on the keys, not here. */
  gap: 10px;
  grid-template-columns: auto auto minmax(0, 1fr);
}

/* Songs kept off the radio. Artist and title lead; where and when you heard it
   is the second line, because on radio that is half of what makes a track worth
   keeping. */
.songsList { display: grid; gap: 6px; margin-top: 12px; }

/* Stated rather than inherited: the drawer panel is near-black, so a row that
   took its colours from whatever it sat in drew a black border on black and
   dark text on dark. */
/* The gap is 20, not 10, because a title long enough to wrap ran its second
   line right up against the actions — "THE QUIET CHAOS OF PLAYING IT SAFE"
   broke after "PLAYING IT" and the remainder touched the buttons. Ten pixels
   is enough between a single line and a button and not enough between a
   paragraph and one. */
.songRow {
  align-items: center;
  background: rgba(255, 255, 255, .035);
  border: 1px solid #33291f;
  border-radius: 8px;
  color: var(--cream-2);
  display: grid;
  gap: 8px 20px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}

/* Under about 30rem the actions drop beneath the title rather than squeezing
   it into a column two words wide. */
@media (max-width: 30rem) {
  .songRow { grid-template-columns: minmax(0, 1fr); }
  .songRowActions { justify-content: flex-start; }
}

.songRow strong { color: var(--cream-2); display: block; font-size: 14px; overflow-wrap: anywhere; }
.songRow small { display: block; font-size: 11px; opacity: .72; overflow-wrap: anywhere; }

/* Three tiers, each doing one job, with a little air between them so the eye
   can take the row in a glance instead of reading a run-on line. */
.songRowBody { display: grid; gap: 3px; }

/* Two sizes in the row, not three: 14 for the song, 11 for everything under it.
   A third size made the tiers look like three unrelated bits of text rather
   than one thing with its details beneath. What separates the two small lines
   is style — italic against uppercase — and weight, which is enough.
   Written as .songRow .songX rather than with !important, because the only
   thing being beaten is .songRow small and one more class wins that outright. */
.songRow .songAlbum { font-style: italic; opacity: .6; }

/* Where it was heard and when. Set apart by case and spacing rather than by
   another middot — the old row separated the station, the date, the clock and
   the album with four identical dots, which is what made it unreadable. */
.songRow .songWhere {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 9px;
  letter-spacing: .06em;
  opacity: .5;
  text-transform: uppercase;
}

/* The clock sits after the station, a shade brighter, so the two never read as
   one phrase. */
.songRow .songWhen { opacity: .82; }

/* A dot between the station and the clock. Spacing alone left them looking like
   one run-on phrase, and the original row's problem was never that it had a
   separator — it was that it had four identical ones doing different jobs. With
   two items on the line, one separator reads correctly.
   Drawn rather than written, for the same reason as the footer's: a middot in a
   content string comes back as "·" wherever the stylesheet is served without a
   charset, and the minifier undoes the escape. */
.songRow .songWhen::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 2px;
  margin-right: 9px;
  opacity: .6;
  vertical-align: middle;
  width: 2px;
}
.songRow.isListening { opacity: .8; }
/* Same palette problem as the hint above: written for the light settings forms,
   so it has to be stated for this panel. */
.songsMissed { color: var(--cream-2); margin: 10px 0 0; opacity: .5; }

.songsControls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  margin-top: 14px;
}

.songsService { align-items: center; color: var(--cream-2); display: flex; gap: 8px; }
/* Two short words that must not become two lines. */
.songsService span { font-size: 12px; opacity: .6; white-space: nowrap; }
.songsService select { max-width: 100%; }

.songsService select {
  background: rgba(255, 255, 255, .06);
  border: 1px solid #82908a;
  border-radius: 7px;
  color: var(--cream-2);
  font-size: 12px;
  padding: 5px 8px;
}

.songsSort { display: flex; gap: 6px; }

.songsSort button {
  background: transparent;
  border: 1px solid #82908a;
  border-radius: 7px;
  color: var(--cream-2);
  cursor: pointer;
  font-size: 12px;
  padding: 5px 11px;
}

.songsSort button.active { background: rgba(255, 255, 255, .1); border-color: var(--cream-2); }

/* A station's name over the run of tracks the sort has gathered under it. */
.songsGroup {
  color: var(--cream-2);
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  margin: 14px 0 2px;
  opacity: .6;
  text-transform: uppercase;
}

.songsList .songsGroup:first-child { margin-top: 4px; }

/* Full width and set apart, so it reads as the end of the list rather than as
   one more row in it. */
.songsMore { justify-content: center; margin-top: 4px; width: 100%; }

.songsHelp { border-top: 1px solid #33291f; color: var(--cream-2); margin-top: 18px; padding-top: 12px; }
.songsHelp summary { cursor: pointer; font-size: 13px; opacity: .75; }
.songsHelp summary:hover { opacity: 1; }
.songsHelp ol { margin: 10px 0 0; padding-left: 20px; }
.songsHelp li { font-size: 13px; margin-bottom: 6px; opacity: .8; }
.songsHelp p { font-size: 12px; margin: 10px 0 0; opacity: .62; }
.songRowActions { align-items: center; display: flex; gap: 8px; }
/* Otherwise the browser's own link colours land here — blue, then purple once
   visited — which is the one palette this deck does not use. */
.songRowActions a { color: var(--cream-2); font-size: 13px; opacity: .85; text-decoration: underline; }
.songRowActions a:hover { opacity: 1; }
.songPending { animation: deckSavePulse 1.1s ease-in-out infinite; }
/* Export and sync are separate rows. The gap inside a row is not the gap
   between rows. */
.songsActions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }

/* A heading for each group of routes. Small and quiet — it is there so the two
   Apple Music entries read as alternatives to each other rather than as two
   more buttons in a row of four. */
.songsGroupLead {
  color: var(--cream-2);
  font: 800 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .16em;
  margin: 18px 0 8px;
  opacity: .5;
  text-transform: uppercase;
}
.songsGroupLead:first-of-type { margin-top: 2px; }

/* The three automatic routes belong together under their heading, closer to
   each other than to the group above. */
.songsSync, .songsShortcut, .songsMac { margin-top: 10px; }
.songsActions + .songsActions { margin-top: 12px; }

/* Stated rather than borrowed, three times over now. quietButton is written for
   the top bar's buttons and collapses to nothing on an anchor — the export link
   had no width or height at all — and fieldHint is written for the light
   settings forms, so on this panel it drew near-black on dark. Both were
   invisible.
   The third time was the sync and show-more buttons, and it was worse: they
   carried quietButton on a real <button>, which looks right on a desktop and is
   display:none under 840px, so they vanished on exactly the phone this drawer
   is used from. Nothing in this panel borrows that class any more. */
.songsActions a,
.songsActions button,
.songsMore {
  background: none;
  border: 1px solid #82908a;
  border-radius: 7px;
  color: var(--cream-2);
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-size: 13px;
  padding: 7px 13px;
  text-decoration: none;
}

.songsActions a:hover,
.songsActions button:hover,
.songsMore:hover { background: rgba(255, 255, 255, .06); }
.songsActions .fieldHint { color: var(--cream-2); flex: 1 1 240px; margin: 0; opacity: .66; }

/* Save takes the slot the master switch had, and keeps its distance from the
   transport keys — same block, different group, so the thumb that means Save
   cannot land on Next and skip the track it was trying to keep. */
.deckSave {
  align-items: center;
  background: linear-gradient(180deg, #e9e6dc, #bfc3ba);
  border: 1px solid #2b3634;
  border-radius: 7px;
  color: #0d1412;
  cursor: pointer;
  display: grid;
  gap: 1px;
  justify-items: center;
  min-height: 40px;
  padding: 5px 11px;
}

.deckSave:disabled { cursor: default; opacity: .45; }
.deckSave:not(:disabled):active { transform: translateY(1px); }
.deckSaveMark { font-size: 15px; line-height: 1; }
.deckSaveLabel { font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }

/* Listening back. The press is answered by the deck readout, not by a spinner
   you have to watch: twelve seconds of live audio is too long to stand over. */
.deckSave.isListening .deckSaveMark { animation: deckSavePulse 1.1s ease-in-out infinite; }
.deckSave.isSaved .deckSaveMark { color: #b8543f; }

@keyframes deckSavePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .deckSave.isListening .deckSaveMark { animation: none; opacity: .6; }
}

.deckKeys { display: flex; gap: 6px; }

/* Physical keys: highlight on top, a shadow beneath, and they travel. */
.deckKey {
  background: linear-gradient(180deg, #e9e6dc, #bfc3ba);
  border: 1px solid #2b3634;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 #46514e;
  color: #1b2422;
  cursor: pointer;
  font: 800 12px/1 system-ui, sans-serif;
  min-height: 34px;
  min-width: 42px;
  padding: 0 9px;
}

.deckKey:active:not(:disabled) { box-shadow: inset 0 1px 3px rgba(0,0,0,.4); transform: translateY(2px); }
.deckKey:disabled { cursor: default; opacity: .45; }

.deckMode { display: block; min-width: 0; }

.deckMode select {
  background: #0c1112;
  border: 1px solid #2b3634;
  color: #f0e5cc;
  font: inherit;
  font-size: 12px;
  min-height: 34px;
  padding: 0 8px;
  width: 100%;
}

/* The selector while you are choosing stations yourself: it still remembers
   which radio to go back to, but it is not deciding anything, so it should not
   look as though it is. */

/* ---- The bank's find & filter, folded --------------------------------------
   Searching and filtering is what you do when looking for one station, not
   while browsing, and on a phone it took more room than the radio itself — 175
   of the 522px that stood between the top of the screen and the first cassette.
   The counts stay on the summary, so the fold still reports at a glance. */

.bankControlDeck > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  list-style: none;
  margin-bottom: 12px;
  min-height: 32px;
}

.bankControlDeck > summary::-webkit-details-marker { display: none; }

.bankControlDeck > summary .bankStats {
  flex: 1 1 auto;
  margin-bottom: 0;
  min-width: 0;
}

.bankControlsHint {
  align-items: center;
  border: 1px solid #4c493f;
  color: var(--cream-2);
  display: flex;
  flex: none;
  font-size: 10px;
  gap: 6px;
  letter-spacing: .06em;
  min-height: 32px;
  padding: 0 10px;
  text-transform: uppercase;
}

.bankControlsHint::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  content: "";
  transition: transform 120ms ease;
}

.bankControlDeck[open] > summary .bankControlsHint::after { transform: rotate(180deg); }

.bankControlsBody { display: grid; gap: 12px; margin-bottom: 12px; }

/* The fold earns its place only on a phone, where it was the difference between
   two and three cassettes on screen. A desktop bank panel has the height to
   spare, so hiding the search behind a press there would cost a click and save
   nothing: it stays open, and the control that would collapse it is not drawn.
   Held open by script as well, since a details element cannot be forced open
   from CSS in every browser. */
@media (min-width: 841px) {
  .bankControlDeck > summary {
    cursor: default;
    margin-bottom: 12px;
  }

  .bankControlsHint {
    display: none;
  }
}

/* ---- Swiping, on a phone --------------------------------------------------
   The cassette slides out of its own bay to uncover an eject panel, which then
   has to be pressed. It was the whole row that moved, over a red panel the
   width of the screen, and giving every child an opaque background to cover
   that panel is what turned the silver surround black. Only the cassette moves
   now, inside the slot it already sits in and already clips to. */
@media (max-width: 840px) {
  /* Always transformed, by nothing at all when it is seated.
     Applying it only while open meant that letting go took the rule away along
     with the class, so a cassette going back in jumped rather than slid. */
  .stationBank .stationItem .deckCassette {
    transform: translateX(var(--swipe, 0px));
    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Under the finger it follows exactly; the easing is for letting go. */
  .stationBank .stationItem.is-swiping .deckCassette {
    transition: none;
    will-change: transform;
  }

  .stationBank .stationSwipeDelete {
    align-content: center;
    background: linear-gradient(180deg, #6e1e18, #40100c);
    border-left: 2px solid #8c2a22;
    color: #ffd9d4;
    cursor: pointer;
    display: grid;
    font-size: 9px;
    font-weight: 700;
    gap: 2px;
    inset: 8px 8px 8px auto;
    justify-items: center;
    letter-spacing: 0.12em;
    position: absolute;
    text-transform: uppercase;
    width: 62px;
    z-index: 0;
  }

  .stationEjectGlyph {
    font-size: 17px;
    line-height: 1;
  }

  /* Nothing to press until the cassette has moved off it. */
  .stationBank .stationItem:not(.is-open) .stationSwipeDelete {
    pointer-events: none;
  }

  .stationBank .stationItem.is-open .stationSwipeDelete:active {
    background: linear-gradient(180deg, #8a2a22, #521711);
  }
}

@media (min-width: 841px) {
  .stationSwipeDelete {
    display: none;
  }
}

/* First-run station suggestions. Built from the drawer's own parts and the
   palette above rather than a new set, so it belongs to the console it
   interrupts. Nothing here restyles anything that already existed. */
.startersPanel {
  align-content: start;
  gap: 0;
  max-width: 44rem;
}
.startersLead {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  padding: 0 22px 18px;
}
.startersList {
  display: grid;
  overflow-y: auto;
}
.starterRow {
  align-items: start;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 15px 22px;
}
.starterRow:hover { background: rgba(255, 255, 255, 0.035); }
.starterRow input { accent-color: var(--yellow); margin-top: 3px; height: 19px; width: 19px; }
.starterRow input:disabled { cursor: not-allowed; }
.starterRow > span { display: grid; gap: 5px; min-width: 0; }
.starterName { align-items: baseline; display: flex; flex-wrap: wrap; gap: 9px; }
.starterName strong { color: var(--cream-2); font-size: 1.02rem; }
.starterPlace {
  color: var(--muted);
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* The console renders <small> as a 9px condensed uppercase label, which is
   right for the place tags and wrong for a whole sentence — a description set
   that way is a wall nobody reads. These two are prose, so they take the lead
   paragraph's treatment instead. */
.starterRow small,
.startersBetaRow small {
  color: var(--muted);
  font-size: 0.88rem;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: none;
}
.starterAdded { color: var(--green); }
/* The one place a listener is told what the iOS workaround costs, so it is
   given room rather than squeezed in beside the stations. */
/* Set apart rather than merely tinted. A tint alone still read as a thirteenth
   station: same column, same checkbox, same rhythm. A gap above it, its own
   heading and a heavier rule make it a separate question that happens to be
   asked on the same screen. */
.startersBeta {
  background: rgba(239, 196, 73, 0.05);
  border-bottom: 1px solid var(--line);
  border-top: 3px solid var(--yellow);
  margin-top: 26px;
  padding: 20px 22px 22px;
}
.startersBetaHeader { display: grid; gap: 7px; margin-bottom: 16px; }
.startersBetaHeader h3 { color: var(--cream-2); font-size: 1.08rem; margin: 0; }
.startersBetaRow {
  align-items: start;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr);
}
.startersBetaRow input { accent-color: var(--yellow); margin-top: 3px; height: 19px; width: 19px; }
.startersBetaRow > span { display: grid; gap: 6px; min-width: 0; }
.startersBetaRow strong { color: var(--cream-2); }
.startersFooter { align-items: center; display: flex; gap: 14px; padding: 16px 22px; }
.startersFooter span { color: var(--muted); flex: 1; font-size: 0.86rem; }
.startersSkip {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  min-height: 40px;
  padding: 0 16px;
}
.startersSkip:hover { color: var(--cream-2); }
@media (max-width: 620px) {
  .startersLead, .starterRow, .startersBeta, .startersFooter { padding-left: 16px; padding-right: 16px; }
  .startersFooter { flex-wrap: wrap; }
  .startersFooter span { flex: 1 0 100%; order: -1; }
}

/* Added to the home screen as a web app, where the lock screen cannot work.
   Shown only to the person it is happening to — see warnAboutHomeScreenApp in
   console.js — so it sits above everything rather than inside a panel they may
   never open. Amber rather than red: nothing is broken, one thing is worse than
   it needs to be, and there is something they can do about it. */
.homeScreenNotice {
  align-items: start;
  background: var(--rack-raised);
  border-bottom: 1px solid var(--orange);
  color: var(--cream);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 18px;
  position: relative;
  z-index: 50;
}
.homeScreenNotice strong { color: var(--orange); display: block; font-size: 14px; }
.homeScreenNotice p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 6px 0 0; max-width: 62ch; }
.homeScreenNotice em { color: var(--cream); font-style: normal; font-weight: 700; }
.homeScreenNotice button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--cream);
  cursor: pointer;
  flex: none;
  font: 700 12px/1 inherit;
  min-height: 44px;
  padding: 0 14px;
}
.homeScreenNotice button:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); }
@media (max-width: 620px) {
  .homeScreenNotice { flex-direction: column; gap: 12px; padding: 13px 15px; }
  .homeScreenNotice button { align-self: stretch; }
}

/* Trying Soundbox without an account. Amber like the home screen notice, for
   the same reason: nothing is broken, there is something worth knowing. */
.demoNotice {
  align-items: start;
  background: var(--rack-raised);
  border-bottom: 1px solid var(--yellow);
  color: var(--cream);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 14px 18px;
  position: relative;
  z-index: 50;
}
.demoNotice strong { color: var(--yellow); display: block; font-size: 14px; }
.demoNotice p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 6px 0 0; max-width: 62ch; }
.demoNotice button {
  background: transparent; border: 1px solid var(--line); color: var(--cream);
  cursor: pointer; flex: none; font: 700 12px/1 inherit; min-height: 44px; padding: 0 14px;
}
.demoNotice button:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.is-demo .settingsSection.isDemoOnly {
  border-color: color-mix(in srgb, var(--yellow) 38%, var(--line));
  opacity: 0.78;
}
.is-demo .settingsSection.isDemoOnly .moduleCode::after {
  color: var(--yellow);
  content: " · OWN ACCOUNT";
}
.is-demo .settingsSection.isDemoOnly :disabled,
.is-demo #printGuideButton:disabled {
  cursor: not-allowed;
}
@media (max-width: 620px) {
  .demoNotice { flex-direction: column; gap: 12px; padding: 13px 15px; }
  .demoNotice button { align-self: stretch; }
}

/* Assistants connected by signing in. Listed under the key, because ending one
   of these is a different act from replacing the key: it stops one client and
   leaves the rest working. */
.mcpConnections { margin-top: 18px; }
.mcpConnections h4 { font-size: 14px; margin: 0 0 8px; }
.mcpConnections ul { list-style: none; margin: 0 0 8px; padding: 0; }
.mcpConnections li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid #d9d4c6;
}
.mcpConnections li span { font-weight: 700; }
.mcpConnections li small { color: #5c6360; margin-right: auto; }
.mcpConnections li button {
  background: #f4f2ea;
  border: 1px solid #181a17;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 36px;
  padding: 0 14px;
}
.mcpConnections li button[disabled] { opacity: .5; cursor: default; }

/* Connections are one concept whether the other app happens to be voice-first
   or home-first. The cards make the account state primary and leave setup as a
   supporting action, rather than making a linked service look unconfigured. */
.connectionCards { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.connectionCard { border: 1px solid #65736f; border-radius: 5px; display: grid; gap: 10px; padding: 14px; }
.connectionCard > header { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.connectionCard h4 { color: #f4efe3; font-size: 16px; margin: 1px 0 0; }
.connectionState { border: 1px solid #8c988f; border-radius: 999px; color: #dce4dd; font-size: 11px; line-height: 1; padding: 7px 9px; white-space: nowrap; }
.connectionState[data-state="connected"] { border-color: #8fb88d; color: #d5efcf; }
.connectionState[data-state="disconnected"] { border-color: #918f83; color: #d4d0c3; }
.connectionState[data-state="error"] { border-color: #d39b83; color: #ffd1bd; }
.connectionCard .settingsHint { margin: 0; }
.connectionCard .guideLinkRow { align-items: center; }
.connectionGuideLink { color: var(--cream-2); flex: 1 1 190px; font-size: 12px; line-height: 1.4; }
a.connectionGuideLink { text-decoration: underline; text-underline-offset: 3px; }
.connectionCard .isSecondaryAction { min-height: 36px; padding: 0 13px; }
@media (max-width: 700px) { .connectionCards { grid-template-columns: 1fr; } }

/* The household sign-in code in Settings. Bordered and on white whatever the
   studio lights are doing: a code drawn dark-on-dark does not scan. */
.householdCode {
  display: inline-block;
  margin: 0.6rem 0;
  padding: 0.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}
.householdQr img { display: block; width: 160px; height: 160px; image-rendering: pixelated; }

/* Two ways to connect an assistant, told apart. Without a heading between them
   the second address read as an alternative spelling of the first. */
.settingsSubhead {
  margin: 1.1rem 0 0.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* The aside under the three hints. Set apart from the list above it: it is a
   note about all of them rather than a fourth one. */
.modeGuide .modeGuideNote {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid currentColor;
  border-image: none;
  opacity: 0.7;
  list-style: none;
}

/* The scope of a station's Less/More, sitting under the strength it scopes.
   Indented and quieter than the buttons above it, because it answers a
   follow-up question rather than a new one. */
.nudgeScope { margin-top: 14px; padding-top: 12px; border-top: 1px solid #d9d4c6; }
.nudgeScopeLabel {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5c6360;
}

/* Settings grouped into four tabs.
 *
 * Filtered by an attribute on the panel rather than by setting .hidden on each
 * section, because several sections already hide themselves for their own
 * reasons — delete-account for the owner, the password panel for a scanned
 * household session. Toggling the same property from two places would mean one
 * of them silently winning. The :not([hidden]) keeps those decisions intact.
 */
.settingsTabs {
  background: #151717;
  border-bottom: 2px solid #514c41;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 10px 16px;
  position: sticky;
  scrollbar-width: none;
  top: 0;
  z-index: 2;
}

.settingsTabs::-webkit-scrollbar { display: none; }

.settingsTabs button {
  background: transparent;
  border: 1px solid transparent;
  color: #9a9384;
  cursor: pointer;
  flex: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  min-height: 40px;
  padding: 0 14px;
}

.settingsTabs button:hover { color: var(--cream-2, #efe9d8); }

.settingsTabs button[aria-selected="true"] {
  background: #23262429;
  border-color: #514c41;
  color: var(--cream-2, #efe9d8);
}

.settingsTabs button:focus-visible { outline: 2px solid #c8b785; outline-offset: -2px; }

.settingsPanel [data-settings-tab] { display: none; }

.settingsPanel[data-active-tab="radio"] [data-settings-tab="radio"]:not([hidden]),
.settingsPanel[data-active-tab="account"] [data-settings-tab="account"]:not([hidden]),
.settingsPanel[data-active-tab="connections"] [data-settings-tab="connections"]:not([hidden]),
.settingsPanel[data-active-tab="help"] [data-settings-tab="help"]:not([hidden]) {
  display: grid;
}

/* The form wraps only Radio's first three sections and keeps its own padding,
   so an empty one leaves a band of space at the top of every other tab. */
.settingsPanel:not([data-active-tab="radio"]) > .settingsForm { display: none; }


/* One gap between sections, wherever a section happens to live.
 *
 * Three sat inside the settings form and took a 12px grid gap from it, one
 * carried margins of its own, and the rest had nothing and butted together —
 * so the drawer changed rhythm partway down. The spacing belongs to the
 * section, so the form's gap is dropped and every section carries the same
 * one. Margins do not collapse in a grid, so this is the gap you see.
 */
/* Side by side when there is room for it, stacked when there is not.
 *
 * The columns used to arrive by accident: the admin stylesheet defined an
 * unscoped .settingsForm for its own field grid, and being bundled it loaded
 * last and won. That is scoped now, so this is the console saying what it
 * wants rather than inheriting somebody else's answer.
 *
 * 320px is the floor because of what is inside these cards, not because it
 * looks about right: a time window is two type="time" inputs side by side, and
 * Safari gives each an intrinsic width of around 110px before padding. Below
 * that the value is clipped rather than wrapped, which is how "05:00" became
 * "05". Anything that cannot hold its own contents is not a column.
 *
 * Rows are spaced by the section's own margin, as everywhere else in the
 * drawer; only the gap between columns belongs to the form.
 */
.settingsPanel .settingsForm {
  align-items: start;
  column-gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  row-gap: 0;
}

/* Two tracks where two exist. Timezone, morning and night is three controls
   deep and four inputs wide, so it is the one card that would rather have the
   width than share it. Falls back to a single track on its own. */
.settingsPanel .settingsForm > .settingsSectionWide { grid-column: span 2; }

@media (max-width: 719px) {
  .settingsPanel .settingsForm > .settingsSectionWide { grid-column: auto; }
}

.settingsPanel .settingsSection { margin-bottom: 12px; }

/* The sign-in code, beside its controls rather than above a tower of them.
   Stacked, a 160px square pushed the toggle and both buttons off the fold on a
   phone; the code is the smaller half of this block, not the headline. */
.householdBlock { margin-top: 16px; padding-top: 14px; border-top: 1px solid #d9d4c6; }

.householdRow {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.householdSide {
  display: grid;
  flex: 1 1 200px;
  gap: 10px;
  min-width: 0;
}

/* The lookup, beside the field it fills rather than below the failure it
   follows. Quiet: it is the second way into one step, not a step of its own. */
.siteLookupRow {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.siteLookupOr { font-size: 11px; letter-spacing: .03em; opacity: .75; }

/* Broadcast hours, folded away under the signal test.
   Two short fields on one row: a window is a pair, and stacking them reads as
   two unrelated settings. */
.airHoursFields { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 8px; }
.airHoursField { display: grid; gap: 6px; }
.airHoursField input { width: 9.5rem; }
.airDays { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.airDay {
  min-width: 3rem; padding: 6px 8px; border: 1px solid #cfcdc2; border-radius: 4px;
  background: #f4f2ea; color: #6b6d65; font: inherit; font-size: 12px; letter-spacing: 0.02em;
  text-transform: uppercase; cursor: pointer;
}
.airDay[aria-pressed="true"] { background: #2e2c26; border-color: #2e2c26; color: #f4f2ea; }
.airDay:focus-visible { outline: 2px solid #2e2c26; outline-offset: 2px; }
.airHoursNote { margin: 0; font-size: 12px; line-height: 1.5; color: #6b6d65; max-width: 62ch; }