/* css/lanes/radio.css — RADIO lane. Avionics-MFD styling for the radio panel,
   entirely from base.css tokens (FLEET_BRIEF: never redefine tokens). Phosphor
   green = live radio data, amber = caution notes, --coral = the action colour
   on the PTT keys. No glows, no gradients — an audio panel is printed metal. */

.radio-panel {
  flex: 1 1 300px;
  min-width: 260px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

.radio-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s2);
}
.radio-title { font-size: var(--text-2xs); color: var(--ink-4); }
.radio-freq { font-size: var(--text-md); color: var(--phos); margin-left: auto; }
.radio-tx {
  font-size: var(--text-2xs);
  color: var(--ink-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 1px var(--s2);
}
.radio-tx.on { color: var(--coral-on); background: var(--coral); border-color: var(--coral); }

/* transcript */
.radio-log {
  height: 168px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.radio-line { display: flex; gap: var(--s2); align-items: baseline; }
.radio-who { flex: 0 0 34px; font-size: var(--text-2xs); color: var(--ink-4); }
.radio-text { color: var(--ink-2); }
.radio-line:not(.radio-note):not(.radio-partial) .radio-text { color: var(--ink); }
.radio-note .radio-text { color: var(--amber); font-size: var(--text-xs); }
.radio-partial .radio-text { color: var(--ink-3); font-style: italic; }

/* grading feedback */
.radio-feedback {
  padding: var(--s2) var(--s3);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--text-xs);
}
.radio-fb-head { color: var(--ink); }
.radio-fb-head[data-tone="good"] { color: var(--phos); }
.radio-fb-head[data-tone="poor"] { color: var(--crit); }
.radio-fb-head[data-tone="mid"] { color: var(--amber); }
.radio-fb-line[data-ok="y"] { color: var(--phos); }
.radio-fb-line[data-ok="n"] { color: var(--crit); }
.radio-fb-line[data-ok="i"] { color: var(--ink-3); }
.radio-fb-model { color: var(--ink-2); border-top: 1px solid var(--line); padding-top: var(--s1); }
.radio-fb-model-label { color: var(--ink-4); font-size: var(--text-2xs); }

/* hint */
.radio-hint {
  padding: var(--s2) var(--s3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--text-xs);
}
.radio-hint-model { color: var(--phos); }
.radio-hint-why { color: var(--ink-3); }

/* buttons */
.radio-row { display: flex; gap: var(--s2); }
.radio-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-2);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.radio-btn:hover { background: var(--bg-4); color: var(--ink); }
.radio-ptt {
  flex: 1 1 auto;
  color: var(--coral);
  border-color: var(--coral);
  user-select: none;
  touch-action: none;
}
.radio-ptt.held, .radio-ptt:active { background: var(--coral); color: var(--coral-on); }
.radio-hintbtn { color: var(--info); }

/* composer */
.radio-compose { display: flex; gap: var(--s2); }
.radio-chan,
.radio-input {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: var(--s2);
}
.radio-input { flex: 1 1 auto; min-width: 0; }
.radio-input:focus, .radio-chan:focus { outline: 1px solid var(--phos); }

/* fallback tuner */
.radio-tuner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: 1px dashed var(--line);
}
.radio-tuner-label { font-size: var(--text-2xs); color: var(--amber); }
.radio-tuner-btns { display: flex; flex-wrap: wrap; gap: var(--s1); }
.radio-tune { font-size: var(--text-2xs); padding: var(--s1) var(--s2); }
.radio-tune.on { color: var(--phos); border-color: var(--phos-dim); }

/* mic status + privacy */
.radio-mic { font-size: var(--text-2xs); color: var(--ink-3); }
.radio-privacy { font-size: var(--text-2xs); color: var(--ink-4); }
.radio-privacy summary { cursor: pointer; color: var(--ink-3); }
.radio-privacy p { margin: var(--s2) 0 0; line-height: 1.5; }

/* consent card */
.radio-consent {
  padding: var(--s3);
  background: var(--bg-2);
  border: 1px solid var(--amber-dim);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: var(--text-xs);
}
.radio-consent-head { color: var(--ink); font-size: var(--text-sm); }
.radio-consent p { margin: 0; line-height: 1.5; color: var(--ink-3); }
.radio-consent-row { display: flex; gap: var(--s2); }
.radio-consent-yes { color: var(--coral); border-color: var(--coral); }

/* small screens: the panel stacks under the gauges */
@media (max-width: 760px) {
  .radio-panel { max-width: none; }
  .radio-log { height: 120px; }
}