/* Every pill this page paints, and the one animation they share. The board's status badges, the LIVE
   session button, and `.live-ind` — the drawer's non-interactive status pill, which lives here rather
   than with the drawer because it is a component, reusable wherever a live count has to be claimed (the
   Fleet tab's indicator is the second place that reuses it).

   THE REDUCED-MOTION BLOCK IS LAST IN THIS FILE, and that position is the rule, not tidiness. It sat next
   to the keyframe it disarms, above `.live-ind` — and `.live-ind .rec` was missing from it, so the drawer's
   dot pulsed under `prefers-reduced-motion: reduce` from the commit that introduced it. Naming it in the old
   position would NOT have fixed that: `@media` adds no specificity, so `.live-ind .rec { animation:pulse }`
   declared afterwards at the same specificity wins the cascade — a repair that reads correct and disarms
   nothing. So the block goes after every animated pill, and an animated pill added below it has to move it
   again. */
/* Badges */
.status { display:inline-flex; align-items:center; gap:var(--s-2); font-weight:600;
          padding:3px 10px 3px var(--s-2); border-radius:var(--radius-pill); font-size:var(--t-meta);
          letter-spacing:.01em; }
.dot { width:6px; height:6px; border-radius:50%; flex:none; }
.s-ready   { background:var(--ready-soft); color:var(--ready); }
.s-ready   .dot { background:var(--ready); }
.s-run     { background:var(--run-soft);   color:var(--run); }
.s-run     .dot { background:var(--run); }
.s-blocked { background:var(--block-soft); color:var(--block); }
.s-blocked .dot { background:var(--block); }
.s-todo    { background:var(--line-soft); color:var(--muted); }
.s-todo    .dot { background:var(--faint); }
.s-dispatching { background:var(--accent-soft); color:var(--accent); }
.s-dispatching .dot { background:var(--accent); }
.s-running { background:var(--ready-soft); color:var(--ready); }
.s-running .dot { background:var(--ready); animation:pulse 2.1s ease-out infinite; }
.s-stopping { background:var(--limbo-soft); color:var(--limbo); }
.s-stopping .dot { background:var(--limbo); animation:pulse 1.3s ease-out infinite; }

/* The LIVE supervised-session badge — deliberately unlike the amber PR badge:
   magenta, a filled recording dot, and the explicit word LIVE. */
.live-badge {
  display:inline-flex; align-items:center; gap:var(--s-2); font-weight:650; cursor:pointer;
  padding:3px 11px 3px var(--s-2); border-radius:var(--radius-pill); font-size:var(--t-meta);
  font-family:inherit;
  background:var(--live-soft); color:var(--live); border:1px solid color-mix(in srgb,var(--live) 40%,transparent);
  letter-spacing:.02em;
  transition:border-color var(--dur-1) var(--ease);
}
.live-badge:hover { border-color:var(--live); }
.live-badge .rec { width:8px; height:8px; border-radius:50%; background:var(--live); flex:none;
                   animation:pulse 1.6s ease-out infinite; }

@keyframes pulse {
  0%   { box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent); }
  70%  { box-shadow:0 0 0 6px color-mix(in srgb,currentColor 0%,transparent); }
  100% { box-shadow:0 0 0 0 color-mix(in srgb,currentColor 0%,transparent); }
}

.live-ind { display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--t-meta); font-weight:600;
            color:var(--live); font-variant-numeric:tabular-nums; }
/* NO `flex:none` here, unlike the sibling on `.live-badge`, and the asymmetry is measured rather than
   inherited. `.live-ind` is a SPAN: its overflow is visible, so its own `min-width:auto` floor is its
   min-content size — which already includes this dot at 7px — and nothing can squeeze the pill below it. Both
   instances were swept from 1280px down to a 17px header, with the dot's `flex-shrink` forced back to 1: it
   measured 7.00px at every step, in the tab strip and in the drawer alike, and only moved once `min-width:0`
   was also forced onto `.live-ind` — a declaration that is not, and should not be, in this file. So the
   declaration protected nothing and no fixture could ever have held it.
   `.live-badge` is a BUTTON, whose overflow is not visible, so that floor is zero and its dot really does give
   way: 8.00px -> 7.45px at 320px and -> 4.16px at 240px with its `flex:none` removed. That one stays. */
.live-ind .rec { width:7px; height:7px; border-radius:50%; background:var(--live);
                 animation:pulse 1.6s ease-out infinite; }
/* The pulsing magenta REC dot is a CLAIM ("this transcript is being written right now"). A stream that is
   merely OPEN (headers flushed, agent still silent) and a stream the server has ENDED must not make it:
   both render muted and still, so the badge can never read "recording" off a connection carrying nothing. */
.live-ind.pending { color:var(--muted); }
.live-ind.pending .rec { background:var(--muted); animation:none; }
.live-ind.ended { color:var(--faint); }
.live-ind.ended .rec { background:var(--faint); animation:none; }

/* Every animated dot on the page, disarmed together, with a static ring standing in for the pulse.
   `.live-ind .rec` is named unconditionally rather than scoped to the pulsing state: the failure this rule
   exists to prevent is a state nobody thought of, so it covers the component and not a list of its modifiers.
   The still states (`.pending`, `.ended`) therefore also take the ring, which is a dot that reads very
   slightly larger and nothing else. */
@media (prefers-reduced-motion:reduce) {
  .s-running .dot, .s-stopping .dot, .live-badge .rec, .live-ind .rec { animation:none;
    outline:2px solid color-mix(in srgb,currentColor 40%,transparent); outline-offset:2px; }
}