/* axiom-space/assets/styles/mission-control.css
 *
 * Mission Control surface styles (M2, story G002). Reuses the Cortex
 * "Void & Signal" design tokens from cortex.css (loaded first) — palette, glass,
 * mono font, motion ramps. This file adds the mission-control layout + the new
 * KPI strip / fleet / firehose / services / brain-overlay / status-badge styling.
 *
 * Design language locked by RESEARCH-BRIEF: grayscale UI, status-only color,
 * lane-hue persistence, JetBrains Mono 11px ALL-CAPS labels, 700wt hero numbers,
 * 8px grid, ≤2px radius, glow-not-fill, animated idle (scanning line). */

:root {
  /* Lane hues — persistent everywhere on this surface (RESEARCH-BRIEF A4/G6). */
  --lane-claude: #00ffaa;
  --lane-codex:  #4488ff;
  --lane-agy:    #ffb000;
  --lane-axiom:  #00ffff;
  --lane-hermes: #aa44ff;
  --lane-svc:    #888888;
  --lane-voice:  #ff3333;
}

html, body { height: 100%; }
body {
  margin: 0;
  /* Honour the brief's flash token. */
  --mc-flash: rgba(0, 255, 255, 0.2);
}

/* ── layout ─────────────────────────────────────────────────────────────── */
.mc-root {
  display: grid;
  grid-template-rows: 48px 92px 1fr;
  grid-template-columns: 360px 1fr 380px;
  grid-template-areas:
    "topbar topbar topbar"
    "kpi    kpi    kpi"
    "left   center right";
  height: 100vh;
  gap: 12px;
  padding: 12px;
}
.mc-topbar { grid-area: topbar; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mc-kpi-mount { grid-area: kpi; }
.mc-leftrail { grid-area: left; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.mc-center { grid-area: center; position: relative; }
.mc-rightrail { grid-area: right; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
#mc-canvas { width: 100%; height: 100%; display: block; }

/* ── topbar ─────────────────────────────────────────────────────────────── */
.mc-brandline { display: flex; align-items: baseline; gap: 12px; }
.mc-brand {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 15px;
  color: var(--color-text-hi);
  text-transform: uppercase;
}
.mc-brand-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--color-text-lo);
  text-transform: uppercase;
}
.mc-conn-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border: 1px solid var(--color-glass-stroke);
  border-radius: 2px;
  background: var(--color-glass-fill);
  text-transform: uppercase;
}
.mc-conn--linked        { color: var(--color-signal-green); border-color: rgba(0,255,170,.4); }
.mc-conn--connecting    { color: var(--color-signal-cyan);  }
.mc-conn--auth_required { color: var(--color-signal-orange); border-color: rgba(255,149,0,.5); }
.mc-conn--down          { color: var(--color-signal-red); border-color: rgba(255,51,68,.5); animation: mc-pulse 1.4s ease-in-out infinite; }

/* ── KPI strip (Tier-1) ─────────────────────────────────────────────────── */
.mc-kpi-strip {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 100%;
  padding: 10px 16px;
  position: relative;
}
.mc-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 4px 18px 4px 0;
  border-right: 1px solid var(--color-glass-stroke);
  min-width: 90px;
}
.mc-kpi:last-of-type { border-right: 0; }
.mc-kpi-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-text-lo);
  text-transform: uppercase;
}
.mc-kpi-value {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 34px;
  line-height: 1;
  color: var(--color-text-hi);
}
.mc-kpi--hero .mc-kpi-value { color: var(--color-signal-cyan); text-shadow: 0 0 14px var(--cyan-glow); }
/* Burn $/hr is a derived estimate — render small, never as a hero number. */
.mc-kpi-value--sub { font-size: 18px; color: var(--color-text-hi); font-weight: 600; }
.mc-kpi-unit { font-size: 10px; color: var(--color-text-lo); margin-left: 2px; letter-spacing: 0.1em; }
.mc-kpi-value--alert { color: var(--color-signal-red); text-shadow: 0 0 12px rgba(255,51,68,.5); }

.mc-kpi-dots { display: flex; gap: 12px; align-items: center; }
.mc-dot { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.mc-dot i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mc-dot--ok i   { background: var(--color-signal-green); box-shadow: 0 0 8px rgba(0,255,170,.6); }
.mc-dot--ok b   { color: var(--color-signal-green); }
.mc-dot--warn i { background: var(--color-signal-orange); box-shadow: 0 0 8px rgba(255,149,0,.6); }
.mc-dot--warn b { color: var(--color-signal-orange); }
.mc-dot--fail i { background: var(--color-signal-red); box-shadow: 0 0 8px rgba(255,51,68,.6); }
.mc-dot--fail b { color: var(--color-signal-red); }
.mc-dot--idle i { background: #444b58; }
.mc-dot b { font-weight: 700; }

/* ── shared panel chrome ────────────────────────────────────────────────── */
.mc-panel { position: relative; padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }
.mc-panel-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.mc-panel-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-text-hi); text-transform: uppercase; }
.mc-panel-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--color-text-lo); text-transform: uppercase; }

/* ── AWAITING LINK idle state (RESEARCH-BRIEF A5 scanning line) ──────────── */
.mc-awaiting, .mc-kpi-awaiting {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--color-text-lo);
  text-transform: uppercase;
  padding: 10px 4px;
  position: relative;
  overflow: hidden;
}
.mc-kpi-awaiting {
  position: absolute;
  right: 16px; top: 50%; transform: translateY(-50%);
  opacity: 0.7;
}
[data-mc-awaiting="true"] .mc-services-grid,
[data-mc-awaiting="true"] .mc-fleet-body,
[data-mc-awaiting="true"] .mc-fleet-tabs { opacity: 0.25; }
.mc-scan {
  position: absolute; left: 0; top: 0; bottom: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.15), transparent);
  animation: mc-scanline 2.4s linear infinite;
}
@keyframes mc-scanline { 0% { left: -40px; } 100% { left: 100%; } }
@keyframes mc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ── flash-on-change (RESEARCH-BRIEF C5) ────────────────────────────────── */
.mc-flash { animation: mc-flash-kf var(--dur-short, 300ms) ease-out; }
@keyframes mc-flash-kf { 0% { background: var(--mc-flash); } 100% { background: transparent; } }
.mc-flash-row { animation: mc-flash-row-kf 600ms ease-out; }
@keyframes mc-flash-row-kf { 0% { background: var(--mc-flash); } 100% { background: transparent; } }

/* ── fleet panel ────────────────────────────────────────────────────────── */
.mc-fleet { flex: 1 1 auto; }
.mc-fleet-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.mc-tab {
  --lane-hue: #888;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-glass-fill);
  border: 1px solid var(--color-glass-stroke);
  border-left: 3px solid var(--lane-hue);
  border-radius: 2px;
  padding: 5px 8px;
  cursor: pointer;
  font-family: var(--font-mono);
  color: var(--color-text-lo);
  min-width: 76px;
}
.mc-tab--active { background: rgba(0,229,255,0.06); }
.mc-tab--active .mc-tab-label { color: var(--color-text-hi); }
.mc-tab-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.mc-tab-state { font-size: 9px; letter-spacing: 0.06em; }
.mc-lane--ok .mc-tab-state      { color: var(--color-signal-green); }
.mc-lane--warn .mc-tab-state    { color: var(--color-signal-orange); }
.mc-lane--fail .mc-tab-state    { color: var(--color-signal-red); }
.mc-lane--dormant .mc-tab-state { color: #5a6473; }
.mc-lane--dormant .mc-tab-label { color: #6b7585; }

.mc-fleet-body { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; }
.mc-fleet-row {
  display: grid;
  grid-template-columns: 1.1fr 0.7fr 1.6fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--color-glass-stroke);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.mc-fleet-row--click { cursor: pointer; }
.mc-fleet-row--click:hover { background: rgba(0,229,255,0.05); }
.mc-cell { color: var(--color-text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-cell--dim { color: var(--color-text-lo); }
.mc-cell--age { color: var(--color-signal-cyan); font-size: 10px; text-align: right; }
.mc-cell--cost { color: var(--color-signal-green); font-size: 10px; text-align: right; }
.mc-cell--ok { color: var(--color-signal-green); }
.mc-empty, .mc-banner {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--color-text-lo); text-transform: uppercase;
  padding: 8px; text-align: center;
  border: 1px dashed var(--color-glass-stroke); border-radius: 2px;
}
.mc-banner--fail { color: var(--color-signal-red); border-color: rgba(255,51,68,.4); }

/* ── detail drawer (Tier-3 entry) ───────────────────────────────────────── */
.mc-drawer {
  position: fixed; right: 12px; bottom: 12px; width: 420px; max-height: 60vh;
  background: var(--color-void-1);
  border: 1.5px solid var(--color-signal-cyan);
  border-radius: 2px;
  box-shadow: 0 0 40px rgba(0,0,0,.8), 0 0 16px rgba(0,229,255,.25);
  display: flex; flex-direction: column; z-index: 50;
}
.mc-drawer[hidden] { display: none; }
.mc-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--color-glass-stroke);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--color-text-hi);
}
.mc-drawer-close { background: none; border: 0; color: var(--color-text-lo); cursor: pointer; font-size: 14px; }
.mc-drawer-json {
  margin: 0; padding: 12px; overflow: auto;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--color-signal-cyan); white-space: pre-wrap; word-break: break-word;
}
.mc-drawer-foot { padding: 8px 12px; border-top: 1px solid var(--color-glass-stroke); }
.mc-replay-btn {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 5px 10px; background: var(--color-glass-fill);
  border: 1px solid var(--color-signal-cyan); border-radius: 2px;
  color: var(--color-signal-cyan); cursor: pointer; text-transform: uppercase;
}
.mc-replay-btn:hover { background: rgba(0,229,255,.08); }

/* ── replay timeline (M3) ───────────────────────────────────────────────── */
.mc-rp-container {
  border-top: 1px solid var(--color-glass-stroke);
  max-height: 40vh; overflow-y: auto; display: flex; flex-direction: column;
}
.mc-rp-container[hidden] { display: none; }
.mc-rp-header {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 6px 12px; border-bottom: 1px solid var(--color-glass-stroke);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--color-text-hi);
}
.mc-rp-meta--dim { color: var(--color-text-lo); }
.mc-rp-feed { display: flex; flex-direction: column; gap: 0; }
.mc-rp-row {
  display: grid; grid-template-columns: 56px 36px 46px 1fr; gap: 6px;
  align-items: baseline; padding: 2px 12px;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.mc-rp-row--sidechain { padding-left: 28px; border-left: 2px solid var(--color-text-lo); }
.mc-rp-row--has-detail { cursor: pointer; }
.mc-rp-row--has-detail:hover { background: rgba(255,255,255,.03); }
.mc-rp-ts { color: #5a6473; }
.mc-rp-role { color: var(--color-text-lo); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
.mc-rp-kind { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
.mc-rp-title { color: var(--color-text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-rp-detail {
  grid-column: 1 / -1; padding: 4px 0 4px 8px;
  border-left: 2px solid var(--color-glass-stroke);
  color: var(--color-text-lo); font-size: 10px; white-space: pre-wrap;
  word-break: break-word; max-height: 200px; overflow-y: auto;
}
.mc-rp-detail[hidden] { display: none; }
.mc-rp-empty, .mc-rp-error, .mc-rp-loading, .mc-rp-tailnet-only {
  padding: 12px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-align: center; text-transform: uppercase;
}
.mc-rp-empty { color: var(--color-text-lo); }
.mc-rp-loading { color: var(--color-text-lo); }
.mc-rp-error { color: var(--color-signal-red); }
.mc-rp-tailnet-only {
  color: var(--color-signal-orange);
  border: 1px solid rgba(255,149,0,.3); border-radius: 2px; margin: 8px;
}

/* ── firehose ───────────────────────────────────────────────────────────── */
.mc-firehose { flex: 1 1 auto; min-height: 180px; }
.mc-firehose-feed { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.mc-fh-row {
  display: grid; grid-template-columns: 56px 32px 84px 1fr; gap: 6px; align-items: baseline;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  padding: 1px 2px;
}
.mc-fh-time { color: #5a6473; }
.mc-fh-lane { color: var(--lane-hue, #888); font-weight: 700; letter-spacing: 0.04em; }
.mc-fh-kind { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
.mc-kind--cyan  { color: var(--color-signal-cyan); }
.mc-kind--red   { color: var(--color-signal-red); }
.mc-kind--amber { color: var(--color-signal-orange); }
.mc-kind--green { color: var(--color-signal-green); }
.mc-kind--dim   { color: #5a6473; }
.mc-fh-title { color: var(--color-text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── services grid ──────────────────────────────────────────────────────── */
.mc-services { flex: 0 0 auto; max-height: 30vh; }
.mc-services-grid { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.mc-svc-row {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center;
  padding: 3px 6px; font-family: var(--font-mono); font-size: 11px;
}
.mc-svc-row .mc-dot { display: inline-flex; }
.mc-svc-name { color: var(--color-text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-svc-state { color: var(--color-text-lo); font-size: 9px; text-transform: uppercase; }

/* ── auth + link-down banners ───────────────────────────────────────────── */
.mc-banner-bar {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 100; max-width: 92vw;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  padding: 10px 18px; border-radius: 2px;
  display: flex; align-items: center; gap: 12px;
}
.mc-banner-bar[hidden] { display: none; }
#mc-auth-banner {
  background: rgba(255,149,0,0.12); border: 1px solid var(--color-signal-orange);
  color: var(--color-signal-orange);
}
#mc-down-banner {
  background: rgba(255,51,68,0.12); border: 1px solid var(--color-signal-red);
  color: var(--color-signal-red);
}
.mc-token-input {
  font-family: var(--font-mono); font-size: 12px; padding: 5px 8px;
  background: var(--color-void-0); border: 1px solid var(--color-signal-orange);
  border-radius: 2px; color: var(--color-text-hi); width: 280px;
}
.mc-token-submit {
  font-family: var(--font-mono); font-size: 11px; padding: 5px 12px;
  background: var(--color-signal-orange); border: 0; border-radius: 2px;
  color: #1a1200; font-weight: 700; cursor: pointer; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .mc-scan, .mc-conn--down, .mc-flash, .mc-flash-row { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * M5 (AAA brain glow-up) — canvas-adjacent framing ONLY.
 * Appended at end; edits no existing rule. Pure presentation around the WebGL
 * canvas (the brain itself is rendered by cortex-* modules). All decorative,
 * pointer-events:none, and motion-gated so the data plane + reduced-motion are
 * untouched.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Deep radial vignette behind the brain so the canvas reads as a viewport into a
 * dark command-center void rather than a flat panel. Sits UNDER the canvas
 * (z-index 0; canvas paints over it) and never intercepts clicks. */
.mc-center::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(0, 229, 255, 0.06) 0%, rgba(0,0,0,0) 42%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,0.55) 100%);
}

/* Machined corner ticks on the brain viewport — four L-shaped brackets that frame
 * the canvas like an instrument readout (RESEARCH-BRIEF A7/A9 "machined" feel).
 * Drawn on an overlay layer ABOVE the canvas but click-through. */
.mc-center::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(0, 229, 255, 0.10);
  /* clip to four corner brackets via a conic-free mask: a thin frame whose middle
   * spans are cut out, leaving only the corners. */
  -webkit-mask:
    linear-gradient(#000, #000) top left / 28px 1px no-repeat,
    linear-gradient(#000, #000) top left / 1px 28px no-repeat,
    linear-gradient(#000, #000) top right / 28px 1px no-repeat,
    linear-gradient(#000, #000) top right / 1px 28px no-repeat,
    linear-gradient(#000, #000) bottom left / 28px 1px no-repeat,
    linear-gradient(#000, #000) bottom left / 1px 28px no-repeat,
    linear-gradient(#000, #000) bottom right / 28px 1px no-repeat,
    linear-gradient(#000, #000) bottom right / 1px 28px no-repeat;
  mask:
    linear-gradient(#000, #000) top left / 28px 1px no-repeat,
    linear-gradient(#000, #000) top left / 1px 28px no-repeat,
    linear-gradient(#000, #000) top right / 28px 1px no-repeat,
    linear-gradient(#000, #000) top right / 1px 28px no-repeat,
    linear-gradient(#000, #000) bottom left / 28px 1px no-repeat,
    linear-gradient(#000, #000) bottom left / 1px 28px no-repeat,
    linear-gradient(#000, #000) bottom right / 28px 1px no-repeat,
    linear-gradient(#000, #000) bottom right / 1px 28px no-repeat;
}

/* Ensure the WebGL canvas stacks above the vignette and below the corner ticks. */
#mc-canvas { position: relative; z-index: 1; }