/* ══ MISSION CONTROL — the right rail of Chat w/ACHEEVY ═════════════════════════════════════
   Built from the Figma frame `Chat w/ACHEEVY` (node 10061:31, AGENTIC DESIGN SYSTEM v1.2,
   file keqSV0hR8Y58BMCs9MNsNO) as revised by Codex 2026-08-03.

   WHY THIS PANEL EXISTS. The chat surface shipped without it, which meant a mission ran with no
   visible state: you could not see which stage was live, what was waiting on you, or which
   models were engaged. The conversation was visible and the WORK was not. This rail is the
   work made legible — objective, pipeline, and execution deck, in that order.

   THE STAGE LADDER IS ORDERED, NOT A LIST. Stage Zero → Planner → Picker_Ang → Verifier →
   Human Approval is the actual order of operations, so the ladder reads top-to-bottom as time.
   Exactly one stage should read RUNNING; anything else is a bug in the caller, not here.

   COLOUR CARRIES STATE AND NOTHING ELSE:
     COMPLETE → neon (done, no action)      RUNNING → accent (live, no action)
     READY/PENDING → muted (queued)         WAITING → amber (YOU are the blocker)
   Amber is reserved for human-required. If everything glowed, nothing would mean anything, and
   the one state that needs a person would be the easiest to miss.
   ═════════════════════════════════════════════════════════════════════════════════════════ */

.mc{width:312px;flex:none;padding:22px 20px;border-left:1px solid var(--aims-hairline);
  overflow-y:auto;display:flex;flex-direction:column;gap:22px}

.mc__label{font:600 9.5px/1 var(--aims-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--aims-muted);margin:0 0 10px}

/* ── objective ──────────────────────────────────────────────────────────────────────────── */
.mc__obj-eyebrow{font:600 9px/1 var(--aims-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--aims-muted-2);margin:0 0 6px}
.mc__obj{font:600 17px/1.3 var(--aims-sans);color:var(--aims-text);margin:0 0 12px}

/* The meter is a MEASURE, not decoration — it renders a number the caller supplies and shows
   that number beside itself. A bar with no figure invites the reader to estimate. */
.mc__meter{display:flex;align-items:center;gap:10px}
.mc__track{flex:1;height:7px;border-radius:999px;background:var(--aims-inset);overflow:hidden}
.mc__fill{height:100%;border-radius:999px;background:var(--aims-accent);
  transition:width .5s var(--aims-settle)}
.mc__pct{font:400 12px/1 "Departure Mono",var(--aims-mono);color:var(--aims-text-2);min-width:22px;
  text-align:right}

/* ── the stage ladder ───────────────────────────────────────────────────────────────────── */
.mc__stages{display:flex;flex-direction:column;gap:8px}
.mc__stage{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 13px;border-radius:var(--r-control,8px);
  background:var(--aims-surface);border:1px solid var(--aims-hairline)}
.mc__stage-n{font:600 10px/1 var(--aims-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--aims-text-3)}
.mc__stage-s{font:600 9.5px/1 var(--aims-mono);letter-spacing:.1em;text-transform:uppercase}

.mc__stage[data-state="complete"] .mc__stage-s{color:var(--aims-neon)}
.mc__stage[data-state="running"]  .mc__stage-s{color:var(--aims-accent)}
.mc__stage[data-state="ready"]    .mc__stage-s,
.mc__stage[data-state="pending"]  .mc__stage-s{color:var(--aims-muted-2)}
/* HUMAN-REQUIRED is the one state that borders as well as colours — it must be findable in a
   glance down the rail, because it is the only one that will not resolve on its own. */
.mc__stage[data-state="waiting"]{border-color:color-mix(in srgb,var(--aims-warn,#e0821b) 45%,transparent)}
.mc__stage[data-state="waiting"] .mc__stage-s{color:var(--aims-warn,#e0821b)}
/* The live stage gets a slow pulse. Motion here means "still moving" — the one honest use. */
.mc__stage[data-state="running"]{border-color:color-mix(in srgb,var(--aims-accent) 40%,transparent)}
.mc__stage[data-state="running"] .mc__stage-s{animation:mc-live 1.9s ease-in-out infinite}
@keyframes mc-live{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mc__stage[data-state="running"] .mc__stage-s{animation:none}}

/* ── execution deck · FUSION ────────────────────────────────────────────────────────────────
   FUSION is several models working one objective together — the deck reports how many are
   engaged and whether they have phase-aligned yet. It is docked: present and readable without
   taking the surface over. The stacked shadow behind it is the other docked cards, implying
   depth without rendering rows nobody is reading. */
.mc__deck{position:relative}
.mc__deck-card{position:relative;z-index:2;padding:15px 16px;border-radius:var(--r-card,12px);
  background:linear-gradient(160deg,var(--aims-surface),var(--aims-surface-2));
  border:1px solid var(--aims-accent);box-shadow:var(--aims-shadow-2)}
.mc__deck-card::after{content:"";position:absolute;left:10px;right:10px;bottom:-7px;height:14px;
  border-radius:0 0 var(--r-card,12px) var(--r-card,12px);z-index:-1;
  background:var(--aims-surface-2);border:1px solid var(--aims-hairline);border-top:0}
.mc__deck-t{font:600 13px/1 var(--aims-sans);letter-spacing:.06em;color:var(--aims-text);margin:0 0 5px}
.mc__deck-s{font:400 11.5px/1.4 var(--aims-sans);color:var(--aims-muted);margin:0}
.mc__deck-card[data-state="aligning"] .mc__deck-s{color:var(--aims-accent)}

/* ── the LUC bookend · engagement ────────────────────────────────────────────────────────────
   Per ACHIEVEMOR-LUC-001. Three states, and the colour says which moment we are in:
     ESTIMATE    → accent  (forward-looking; nothing has been charged)
     STOOD DOWN  → muted   (LUC is ABSENT — deliberately the quietest thing in the rail)
     OFFICIAL    → neon    (verified, reconciled, sealed)

   STOOD DOWN is styled down rather than up on purpose. It is the longest-running state and the
   one where a designer's instinct is to add a live number — a ticking figure, a spend bar. There
   is deliberately nothing to look at, because during execution any cost shown would be a forecast
   wearing the clothes of a fact.

   THE CEILING IS NOT A METER. It renders as a line of type and never as a bar or a fill. A ceiling
   drawn like a progress indicator invites the reader to watch it fill, and a number people expect
   to reach is a number they reach. It is authority; it is not a target.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.mc__luc{padding:14px 15px;border-radius:var(--r-card,12px);background:var(--aims-surface);
  border:1px solid var(--aims-hairline);display:flex;flex-direction:column;gap:7px}
.mc__luc[data-state="estimate"]{border-color:color-mix(in srgb,var(--aims-accent) 38%,transparent)}
.mc__luc[data-state="official"]{border-color:color-mix(in srgb,var(--aims-neon) 38%,transparent)}

.mc__luc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mc__luc-state{font:600 9.5px/1 var(--aims-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--aims-muted-2)}
.mc__luc[data-state="estimate"] .mc__luc-state{color:var(--aims-accent)}
.mc__luc[data-state="official"] .mc__luc-state{color:var(--aims-neon)}

/* An unsealed receipt must never be mistakable for a sealed one at a glance. */
.mc__luc-prov{font:600 8.5px/1 var(--aims-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--aims-warn,#e0821b);border:1px solid color-mix(in srgb,var(--aims-warn,#e0821b) 50%,transparent);
  border-radius:999px;padding:3px 7px}

.mc__luc-fig{font:600 19px/1.2 "Departure Mono",var(--aims-mono);color:var(--aims-text);margin:2px 0 0}
.mc__luc-ceil{font:400 11.5px/1.4 var(--aims-mono);color:var(--aims-text-3);margin:0;
  letter-spacing:.04em}
.mc__luc-note{font:400 11.5px/1.45 var(--aims-sans);color:var(--aims-muted);margin:0}
.mc__luc-warn{font:400 11.5px/1.45 var(--aims-sans);color:var(--aims-warn,#e0821b);margin:0}

.mc__luc-var{font:400 11.5px/1.45 var(--aims-sans);margin:0}
.mc__luc-var[data-dir="under"]{color:var(--aims-neon)}
.mc__luc-var[data-dir="over"]{color:var(--aims-warn,#e0821b)}

/* ── responsive: the rail is context, the conversation is the product ───────────────────────
   Below 1100px it docks under the thread rather than squeezing the composer — the panel losing
   its column is recoverable, the composer losing room is not. */
@media (max-width:1100px){
  .mc{width:100%;border-left:0;border-top:1px solid var(--aims-hairline)}
}