/* EMBER phase pill — sticky, above the content, non-clickable status. Never red. */
.ember-phase {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px;
  font: 500 13px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  border-bottom: 1px solid var(--line, #2a323d);
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--bg, #0e1116) 82%, transparent);
  user-select: none;                 /* it's a status, not a control */
}
.ember-phase .ep-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px; font-weight: 800; letter-spacing: .02em;
  border: 1px solid currentColor;
}
.ember-phase .ep-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ember-phase .ep-sub { color: var(--muted, #93a1b0); font-size: 12.5px; }

/* LEARNING — calm amber (the brand accent). */
.ember-phase.ep-learning .ep-pill { color: var(--brand, #ff7a18); background: color-mix(in srgb, var(--brand, #ff7a18) 14%, transparent); }
/* PRACTICE — blue (the app's apply/scenario colour). */
.ember-phase.ep-practice .ep-pill { color: var(--brand2, #7ec9ff); background: color-mix(in srgb, var(--brand2, #7ec9ff) 14%, transparent); }
/* TESTING — firm green (NOT red: red = danger/failure, wrong tone for a low-pressure course). */
.ember-phase.ep-testing .ep-pill { color: var(--good, #3fb950); background: color-mix(in srgb, var(--good, #3fb950) 14%, transparent); }

@media (max-width: 560px) {
  .ember-phase .ep-sub { display: none; }   /* keep just the pill on small screens */
  .ember-phase { padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .ember-phase { backdrop-filter: none; } }