/* =========================================================================
   Live call — Persistent alert criteria checklist (linear-progress "protocol")
   Rows derive .is-done / .is-current / .is-upcoming from criteria-states.js;
   completed rows float to the top via CSS `order` (DOM stays in declared order).
   ========================================================================= */

.alert-criteria {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rta-rule);
}
/* A touch more breathing room once the rows carry boxes / markers. */
.alert-criteria.crit-multi { gap: 0.4rem; }

.alert-criterion-item {
  display: flex;
  align-items: flex-start;   /* marker aligns to the FIRST line of wrapped labels */
  gap: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.35;
  transition: background var(--dur-comp) var(--ease),
              border-color var(--dur-comp) var(--ease);
}

/* Right-aligned "STEP x / N" counter — an eyebrow above the rows (order:-2 in JS
   keeps it on top). aria-hidden; progress is announced via .alert-criteria-live. */
.alert-criteria-step {
  align-self: flex-end;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rta-fg2);
  margin-bottom: 0.1rem;
}

/* Visually-hidden live region that announces each completion to assistive tech. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Group header for dynamic-criteria cards (e.g. "Agent requested" /
   "Customer provided"). Small, muted, with a little space above each group. */
.alert-criteria-group {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 0.35rem;
}
.alert-criteria-group:first-of-type { margin-top: 0; }

/* Placeholder shown when the card pops up on the customer's first turn, before
   the agent has named the fields. Replaced by the rows once they arrive. */
.alert-criteria-waiting {
  font-size: 0.78rem;
  line-height: 1.35;
  font-style: italic;
  color: var(--text-muted);
}

/* ---- Marker: a 16px circle whose glyph is drawn per derived state ---------- */
.alert-criterion {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.06rem;        /* nudge onto the label's first-line baseline */
  cursor: default;
  /* Purely a status glyph — only the agent-action evaluator flips it. No hover
     or press affordance, so it can't invite a click that does nothing. */
  pointer-events: none;
  user-select: none;
  position: relative;
  /* Default / pre-refresh look = an empty ring (matches upcoming). */
  border: 1.5px solid color-mix(in srgb, var(--rta-fg3) 65%, transparent);
  transition: color      var(--dur-comp)  var(--ease),
              background  var(--dur-comp)  var(--ease),
              border-color var(--dur-comp) var(--ease),
              box-shadow  var(--dur-comp)  var(--ease),
              transform   var(--dur-micro) var(--ease);
}

.alert-criterion-label {
  color: var(--rta-fg2);
  transition: color var(--dur-comp) var(--ease);
}

/* Upcoming: quiet empty ring. */
.is-upcoming .alert-criterion {
  border: 1.5px solid color-mix(in srgb, var(--rta-fg3) 65%, transparent);
  background: transparent;
}
.is-upcoming .alert-criterion-label { color: var(--rta-fg2); }

/* Current: accent ring with a soft accent halo. Deliberately NO concentric
   inner dot — a ring around a filled dot is the visual signature of a SELECTED
   RADIO BUTTON, and this marker is not interactive (see pointer-events above);
   agents tried to click it. The halo reuses the tier-glow idiom from
   alerts.css (.medium .alert-row::before). The box chrome (below) is added only
   on real multi-step cards so single-row cards keep the subtle look. */
.is-current .alert-criterion {
  border: 2px solid var(--rta-accent);
  background: transparent;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rta-accent) 22%, transparent);
}
.is-current .alert-criterion-label { color: var(--rta-fg); }

/* Multi-step only: the highlighted "current step" box. A SOLID accent border +
   an OPAQUE surface-mixed fill so it reads even on low/whisper cards, whose
   background is itself a ~12% accent(=whisper) wash. */
.crit-multi .alert-criterion-item.is-current {
  background: color-mix(in srgb, var(--rta-accent) 18%, var(--rta-surface));
  border: 1px solid var(--rta-accent);
  border-radius: var(--rta-radius-sm);
  padding: 0.28rem 0.4rem;
}
.crit-multi .alert-criterion-item.is-current .alert-criterion-label { font-weight: 600; }

/* Done: filled teal circle + white check, struck-through muted label. */
.is-done .alert-criterion {
  background: var(--rta-good);
  border: 1.5px solid var(--rta-good);
}
.is-done .alert-criterion::before {
  content: '✓';
  color: #fff;
  font-size: 0.62rem;
  line-height: 1;
}
.is-done .alert-criterion-label {
  color: var(--rta-fg3);
  text-decoration: line-through;
}

/* Locked: DORMANT — defined for future use, never derived by refreshCriteriaStates.
   Shows a muted ring with a small lock-suggesting bar; drop in a lock glyph here
   to enable. */
.is-locked .alert-criterion {
  border: 1.5px solid color-mix(in srgb, var(--rta-fg3) 45%, transparent);
  background: transparent;
}
.is-locked .alert-criterion::before {
  content: '';
  width: 6px;
  height: 5px;
  border: 1.5px solid color-mix(in srgb, var(--rta-fg3) 55%, transparent);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
.is-locked .alert-criterion-label { color: var(--rta-fg3); }

/* ---- Completion celebration (unchanged hook) --------------------------- */
.alert-criterion.met.celebrate {
  animation: criterionPop 0.6s var(--ease-spring) both;
}
.alert-criterion.met.celebrate::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  animation: criterionRing 0.6s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .alert-criterion.met.celebrate,
  .alert-criterion.met.celebrate::after { animation-duration: 0.01s; }
}