/* DISPATCH TRAINER — audio debrief block styles.
   Matches the dark-console / CRT-phosphor palette used by console.css + aar.css
   (var fallbacks mirror those files so this looks right even loaded standalone). */

#debrief-audio.debrief-audio {
  margin: 22px 0 8px;
  padding: 16px 18px;
  background: var(--ink-2, #0f1522);
  border: 1px solid var(--phosphor-dim, #8a6a3a);
  border-left: 3px solid var(--crt-cyan, #7fd4d4);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

#debrief-audio .da-caption {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim, #a89f8c);
  flex: 1 1 auto;
}

#debrief-audio .da-play {
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 10px 20px;
  cursor: pointer;
  color: var(--ink, #0a0e16);
  background: var(--crt-cyan, #7fd4d4);
  border: 1px solid var(--crt-cyan, #7fd4d4);
  border-radius: 3px;
  transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

#debrief-audio .da-play:hover {
  box-shadow: 0 0 0 1px var(--crt-cyan, #7fd4d4), 0 0 16px rgba(127, 212, 212, 0.35);
}

#debrief-audio .da-play:active {
  transform: translateY(1px);
}

/* graceful-degradation state: clip absent / failed. Quiet, not alarming. */
#debrief-audio .da-play.da-coming-soon,
#debrief-audio .da-play:disabled {
  cursor: default;
  color: var(--paper-dim, #a89f8c);
  background: transparent;
  border: 1px dashed var(--phosphor-dim, #8a6a3a);
  box-shadow: none;
  font-style: italic;
}

/* per-bucket accent on the left border, so the outcome reads at a glance */
#debrief-audio.bucket-aced     { border-left-color: var(--best, #8fd48f); }
#debrief-audio.bucket-solid    { border-left-color: var(--acceptable, #d4c98f); }
#debrief-audio.bucket-mixed    { border-left-color: var(--crt-cyan, #7fd4d4); }
#debrief-audio.bucket-critical { border-left-color: var(--fail, #e06c6c); }
#debrief-audio.bucket-failed   { border-left-color: var(--fail, #e06c6c); }

/* HEAVY REGISTER (2026-08-28). A scenario js/severity.js classifies heavy that
   was nonetheless worked well: same block, same clip, no bright accent. The
   green "aced" border and the amber "solid" border are a celebration rendered
   in CSS, and they were the last un-gated one on the debrief screen. Slate, not
   red -- this is a good outcome, it just is not a cheerful one. Red accents
   (critical / failed) are NOT overridden; see the note in js/debrief_audio.js. */
#debrief-audio.bucket-heavy    { border-left-color: var(--paper-dim, #a89f8c); }