/* MellyCore AIOS — Command Center Cockpit V3.1 plus retained V2 surfaces.
   Static-first command surface: local GETs plus a local, deterministic
   Source Archive dataset — zero external requests. The Source Arena stage
   is a static holographic source map (orbital source nodes around a central
   core), not a social feed. Local-fixture data and simulated model copy use
   different, persistent labels. Deep-black canvas, violet identity, magenta
   interaction highlights, cyan as a secondary accent. */

:root {
  --cockpit-black: #05030a;
  --cockpit-panel: rgba(11, 7, 20, 0.9);
  --cockpit-panel-solid: #0b0716;
  --cockpit-line: rgba(178, 156, 219, 0.17);
  --cockpit-line-strong: rgba(172, 139, 255, 0.5);
  --cockpit-violet: #a86cff;
  --cockpit-violet-deep: #6d28d9;
  --cockpit-pink: #ff4fd8;
  --cockpit-cyan: #35d7f2;
  --cockpit-nasa: #ff5a5f;
  --cockpit-green: #58e68a;
  --cockpit-amber: #ffc34d;
  --cockpit-copy: #eef2f8;
  --cockpit-muted: #988fb0;
  --cockpit-radius: 10px;
  --cockpit-control: 44px;
  --ckpt-bg: #05070c;
  --ckpt-surface: rgba(8, 11, 18, .96);
  --ckpt-surface-2: #0b0f17;
  --ckpt-line: rgba(125, 211, 252, .16);
  --ckpt-line-strong: rgba(56, 189, 248, .38);
  --ckpt-cyan: #38bdf8;
  --ckpt-blue: #7dd3fc;
  --ckpt-violet: #a78bfa;
  --ckpt-amber: #fbbf24;
  --ckpt-green: #4ade9c;
  --ckpt-red: #fb7185;
  --ckpt-text: #e2e8f0;
  --ckpt-muted: #94a3b8;
}

.dash-body {
  min-height: 100vh;
  padding-bottom: 62px;
  background:
    radial-gradient(1100px 540px at 50% -10%, rgba(109, 40, 217, 0.24), transparent 70%),
    radial-gradient(860px 480px at 88% 108%, rgba(255, 79, 216, 0.07), transparent 70%),
    var(--cockpit-black);
  color: var(--cockpit-copy);
}

.dash-body::before {
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 72% 42%, rgba(255,255,255,.2), transparent);
  background-size: 64px 64px, 64px 64px, 420px 420px, 540px 540px;
  opacity: .7;
}

.dash-body::after {
  position: fixed;
  top: -18vh;
  width: min(1000px, 100%);
  height: 60vh;
  background: radial-gradient(ellipse, rgba(109, 40, 217, .22), transparent 68%);
}

.cockpit-shell {
  width: min(100%, 1640px);
  margin-inline: auto;
  padding-inline: clamp(12px, 2vw, 28px);
}

button,
input,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.dash-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--cockpit-line);
  background: rgba(3, 4, 7, .94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.dash-topbar-inner {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}

.dash-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--cockpit-copy);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .035em;
  text-decoration: none;
  white-space: nowrap;
}

.dash-brand:hover { color: #fff; }

.dash-version {
  color: var(--cockpit-cyan);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dash-tabs {
  min-width: 0;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.dash-tabs::-webkit-scrollbar { display: none; }

.dash-tab-btn {
  position: relative;
  min-height: var(--cockpit-control);
  padding: 0 13px;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--cockpit-muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .065em;
  text-transform: uppercase;
  cursor: pointer;
}

.dash-tab-btn::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background: transparent;
}

.dash-tab-btn:hover { color: var(--cockpit-copy); }
.dash-tab-btn[aria-selected="true"] { color: var(--cockpit-violet); }
.dash-tab-btn[aria-selected="true"]::after {
  background: var(--cockpit-violet);
  box-shadow: 0 0 14px rgba(168, 108, 255, .65);
}

.dash-session {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cockpit-cyan);
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .05em;
  white-space: nowrap;
}

.dash-session-dot,
.feed-state i,
#footer-system-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cockpit-green);
  box-shadow: 0 0 12px rgba(88, 230, 138, .7);
}

.dash-clock { color: var(--cockpit-copy); }

.dash-announcement {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--cockpit-line);
  color: var(--cockpit-muted);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  overflow-x: auto;
  scrollbar-width: none;
}

.dash-announcement span {
  padding-inline: 18px;
  white-space: nowrap;
  border-right: 1px solid var(--cockpit-line);
}

.dash-announcement span:first-child { color: var(--cockpit-violet); }
.dash-announcement span:last-child { border-right: 0; }

.dash-panel {
  padding-block: clamp(22px, 3vw, 44px);
}

.dash-panel[hidden] { display: none; }
.dash-panel--source-arena { padding-block: 14px 20px; }

.dash-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--cockpit-line);
}

.dash-section-head h1 {
  margin-top: 5px;
  font-size: clamp(1.65rem, 3vw, 3rem);
  letter-spacing: -.035em;
}

.dash-section-head > p {
  max-width: 56ch;
  color: var(--cockpit-muted);
  font-size: .92rem;
  line-height: 1.55;
}

.dash-kicker,
.rail-label,
.surface-head,
.queue-head {
  color: var(--cockpit-violet);
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dash-surface {
  min-width: 0;
  border: 1px solid var(--cockpit-line);
  border-radius: var(--cockpit-radius);
  background: linear-gradient(150deg, rgba(23, 14, 42, .9), rgba(8, 6, 16, .86));
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 0 26px rgba(109, 40, 217, .08);
}

.surface-head {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cockpit-line);
}

.surface-head > :last-child:not(:first-child) { color: var(--cockpit-muted); }

.data-origin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: var(--cockpit-muted);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.data-origin::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.data-origin--local { color: var(--cockpit-green); }
.data-origin--snapshot { color: var(--cockpit-amber); }
.data-origin--mock { color: var(--cockpit-violet); }

.dash-source-note,
.dash-muted {
  color: var(--cockpit-muted);
  font-size: .77rem;
  line-height: 1.55;
}

.dash-source-note {
  font-family: var(--font-mono);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.overview-grid .dash-surface { grid-column: span 4; padding: 0 16px 16px; }
.overview-grid .surface-head { margin-inline: -16px; margin-bottom: 16px; }
.overview-primary { grid-column: span 8 !important; }
.overview-wide { grid-column: span 12 !important; }
.overview-primary h2 { font-size: clamp(1.4rem, 2vw, 2.2rem); margin-bottom: 10px; }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(82px, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--cockpit-line);
  border-radius: var(--cockpit-radius);
  background: var(--cockpit-line);
}

.metric-strip--compact {
  grid-template-columns: repeat(4, 1fr);
  border: 0;
  background: transparent;
}

.metric-cell {
  min-width: 0;
  padding: 15px 12px;
  background: var(--cockpit-panel-solid);
}

.metric-strip--compact .metric-cell { padding: 8px 4px; background: transparent; }
.metric-cell strong { display: block; font-family: var(--font-mono); font-size: 1.35rem; line-height: 1; }
.metric-cell span { display: block; margin-top: 7px; color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.metric-cell--good strong { color: var(--cockpit-green); }
.metric-cell--warning strong { color: var(--cockpit-amber); }
.metric-cell--danger strong { color: var(--cockpit-nasa); }
.metric-cell--accent strong { color: var(--cockpit-violet); }
.metric-cell--cyan strong { color: var(--cockpit-cyan); }

.overview-orbit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.overview-orbit .loop-node {
  padding: 8px;
  border-left: 2px solid var(--cockpit-cyan);
  background: rgba(255,255,255,.025);
}

.overview-orbit .loop-node--disabled { border-left-color: var(--cockpit-muted); opacity: .68; }
.loop-node strong { display: block; font-size: .72rem; }
.loop-node span { color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .59rem; text-transform: uppercase; }

.dash-line-list { display: grid; }
.dash-line-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--cockpit-line);
  color: var(--cockpit-muted);
  font-size: .81rem;
  line-height: 1.45;
}
.dash-line-list li:last-child { border-bottom: 0; }
.dash-line-list li::before { content: "·"; color: var(--cockpit-cyan); font-weight: 800; }

/* Context */
.context-command-row,
.compare-command-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.context-index-state {
  margin-left: auto;
  color: var(--cockpit-green);
  font-family: var(--font-mono);
  font-size: .68rem;
}

.context-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
}

.context-register { overflow: hidden; }
.context-table-wrap { overflow-x: auto; }
.context-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.context-table th,
.context-table td { padding: 13px 14px; border-bottom: 1px solid var(--cockpit-line); text-align: left; }
.context-table th { color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.context-table td:first-child { color: var(--cockpit-copy); font-family: var(--font-mono); overflow-wrap: anywhere; }
.context-table td:not(:first-child) { color: var(--cockpit-muted); }
.context-register > .dash-source-note { padding: 12px 14px; }

.freshness-tag,
.decision-tag,
.trust-tag {
  display: inline-flex;
  padding: 2px 8px;
  border: 1px solid var(--cockpit-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .6rem;
  text-transform: uppercase;
  white-space: nowrap;
}
.freshness-tag--stale,
.decision-tag--rejected { color: var(--cockpit-nasa); border-color: rgba(255,90,95,.35); }
.freshness-tag--expiring { color: var(--cockpit-amber); border-color: rgba(255,195,77,.35); }
.freshness-tag--fresh,
.decision-tag--admitted { color: var(--cockpit-green); border-color: rgba(88,230,138,.35); }
.freshness-tag--immutable { color: var(--cockpit-cyan); }
.trust-tag { color: var(--cockpit-violet); }

.context-rail { display: grid; gap: 16px; align-content: start; }
.context-rail .dash-surface:not(.context-safety-note) { padding-bottom: 12px; }
.context-rail .dash-line-list,
.context-rule-list { padding: 6px 14px; }
.context-rule-list div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cockpit-line); }
.context-rule-list div:last-child { border-bottom: 0; }
.context-rule-list dt { color: var(--cockpit-muted); font-size: .72rem; }
.context-rule-list dd { color: var(--cockpit-copy); font-family: var(--font-mono); font-size: .78rem; }
.context-safety-note { display: flex; gap: 12px; padding: 16px; }
.context-safety-note strong { display: block; font-size: .82rem; }
.context-safety-note p { margin-top: 4px; color: var(--cockpit-muted); font-size: .72rem; line-height: 1.5; }
.context-lock { color: var(--cockpit-cyan); font-size: 1.3rem; }

/* Source Arena */
.source-arena-layout {
  min-height: calc(100vh - 180px);
  display: grid;
  grid-template-columns: 170px 250px minmax(370px, 1fr) 410px;
  gap: 12px;
  align-items: stretch;
}

.search-rail,
.model-rail {
  max-height: calc(100vh - 178px);
  overflow: hidden;
}

/* overflow-y: auto (not hidden) so the 8-category filter list scrolls
   in-panel instead of being silently clipped on shorter viewports.
   Scrollbar theming matches .source-arena-queue's treatment. */
.mission-rail { max-height: calc(100vh - 178px); overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--cockpit-violet) transparent; }
.mission-context-mini { padding: 18px 14px; border-bottom: 1px solid var(--cockpit-line); }
.mission-context-mini > span:first-child { display: block; color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .63rem; text-transform: uppercase; }
.mission-context-mini strong { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: .74rem; }
.mission-health-line { display: block; height: 2px; margin-top: 12px; background: rgba(88,230,138,.15); }
.mission-health-line i { display: block; width: 86%; height: 100%; background: var(--cockpit-green); box-shadow: 0 0 8px rgba(88,230,138,.5); }

.task-selector { display: grid; gap: 7px; padding: 16px 12px; }
.task-selector .rail-label { margin-bottom: 3px; }
.task-button {
  min-height: var(--cockpit-control);
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--cockpit-line);
  border-radius: 6px;
  background: rgba(255,255,255,.018);
  color: var(--cockpit-muted);
  font-family: var(--font-mono);
  font-size: .7rem;
  text-align: left;
  cursor: pointer;
}
.task-button span { color: var(--cockpit-line-strong); font-size: .62rem; }
.task-button:hover { color: var(--cockpit-copy); border-color: var(--cockpit-pink); }
.task-button[aria-pressed="true"] { color: var(--cockpit-copy); border-color: var(--cockpit-violet); background: rgba(168,108,255,.1); box-shadow: inset 2px 0 var(--cockpit-violet), 0 0 14px rgba(124,58,237,.22); }

.feed-control { margin-top: auto; display: grid; gap: 10px; padding: 16px 12px; border-top: 1px solid var(--cockpit-line); }
.feed-state { display: flex; align-items: center; gap: 8px; color: var(--cockpit-green); font-family: var(--font-mono); font-size: .63rem; text-transform: uppercase; }

.cockpit-button,
.queue-page-btn,
.stage-nav button {
  min-height: var(--cockpit-control);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .04em;
  cursor: pointer;
}
.cockpit-button { padding: 9px 14px; }
.cockpit-button--primary { border: 1px solid rgba(168,108,255,.8); background: linear-gradient(100deg, #7c3aed, #c026d3); color: #fff; box-shadow: 0 0 18px rgba(168,108,255,.3); }
.cockpit-button--secondary { border: 1px solid var(--cockpit-line-strong); background: rgba(168,108,255,.06); color: var(--cockpit-violet); }
.cockpit-button:hover { filter: brightness(1.14); }
.cockpit-button--secondary:hover { border-color: var(--cockpit-pink); color: var(--cockpit-pink); filter: none; }

.search-rail { display: flex; flex-direction: column; }
.source-arena-search-form { display: grid; gap: 9px; padding: 12px; border-bottom: 1px solid var(--cockpit-line); }
.source-arena-search-form label { display: grid; gap: 4px; color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .61rem; }
.source-arena-search-form input,
.source-arena-search-form select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--cockpit-line);
  border-radius: 5px;
  background: rgba(2,4,8,.88);
  color: var(--cockpit-cyan);
  font-family: var(--font-mono);
  font-size: .72rem;
  color-scheme: dark;
}
.source-arena-search-form input:focus,
.source-arena-search-form select:focus { border-color: var(--cockpit-cyan); }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.source-arena-form-error { min-height: 0; padding: 0 12px; color: var(--cockpit-nasa); font-size: .69rem; line-height: 1.4; }
.source-arena-form-error:not(:empty) { padding-block: 9px; border-bottom: 1px solid rgba(255,90,95,.24); }
.queue-head { display: flex; justify-content: space-between; padding: 11px 12px; border-bottom: 1px solid var(--cockpit-line); }
.queue-head span:last-child { color: var(--cockpit-muted); }

.source-arena-queue { flex: 1; min-height: 110px; overflow-y: auto; padding: 6px; scrollbar-color: var(--cockpit-violet) transparent; }
.source-arena-queue-item { margin-bottom: 5px; }
.source-arena-queue-button {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(255,255,255,.018);
  color: var(--cockpit-copy);
  text-align: left;
  cursor: pointer;
}
.source-arena-queue-button:hover { border-color: var(--cockpit-line); }
.source-arena-queue-button[aria-current="true"] { border-color: var(--cockpit-violet); background: rgba(168,108,255,.07); }
.source-arena-queue-thumb {
  width: 54px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: hsl(var(--swatch-hue, 260) 62% 34%);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
}
.source-arena-queue-copy { min-width: 0; }
.source-arena-queue-copy strong { display: -webkit-box; overflow: hidden; color: var(--cockpit-copy); font-size: .67rem; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.source-arena-queue-copy span { display: block; margin-top: 3px; color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .57rem; text-transform: uppercase; }
.queue-pagination { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--cockpit-line); color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .62rem; }
.queue-page-btn { min-height: 32px; padding: 5px 10px; border: 1px solid var(--cockpit-line); background: transparent; color: var(--cockpit-cyan); }
.queue-page-btn:disabled { opacity: .35; cursor: not-allowed; }

.media-stage-wrap { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.media-stage {
  position: relative;
  width: min(100%, 570px);
  aspect-ratio: 9 / 14;
  max-height: calc(100vh - 246px);
  overflow: hidden;
  border: 1px solid rgba(168,108,255,.6);
  border-radius: 22px;
  background: #060409;
  box-shadow: 0 0 0 4px rgba(168,108,255,.07), 0 0 46px rgba(124,58,237,.3), 0 26px 80px rgba(0,0,0,.5);
  touch-action: pan-y;
}
.media-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 50px rgba(0,0,0,.36);
}
.stage-media { width: 100%; height: 100%; display: block; object-fit: cover; background: #020305; }
.stage-media--video { object-fit: contain; }
.stage-media--procedural {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 26%, hsl(var(--swatch-hue, 260) 90% 62%), hsl(var(--swatch-hue, 260) 62% 20%) 72%);
}
.stage-media-glyph {
  color: rgba(255,255,255,.92);
  font-family: var(--font-mono);
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.stage-audio { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; background-size: cover; background-position: center; }
.stage-audio::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(3,4,7,.95)); }
.stage-audio audio { position: relative; z-index: 2; width: 100%; }
.stage-meta {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 84px 74px 20px 22px;
  background: linear-gradient(transparent, rgba(5,3,10,.94));
}
.stage-meta-labels { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.stage-meta h2 { max-width: 26ch; margin-bottom: 6px; font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
.stage-caption { max-width: 44ch; color: #d9d4ea; font-size: .73rem; line-height: 1.5; }
.stage-desc { max-width: 44ch; max-height: 120px; margin-top: 8px; overflow-y: auto; color: #cbc6dd; font-size: .7rem; line-height: 1.5; }
.stage-fine { margin-top: 6px; color: #a89ec2; font-family: var(--font-mono); font-size: .6rem; }
.stage-media-type { position: absolute; z-index: 4; top: 18px; right: 18px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(3,4,7,.74); color: #fff; font-family: var(--font-mono); font-size: .61rem; text-transform: uppercase; }
.stage-manifest-state { margin-left: 8px; color: var(--cockpit-cyan); }
.media-stage-loading,
.media-stage-error { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 28px; text-align: center; }
.media-stage-loading strong,
.media-stage-error strong { font-family: var(--font-mono); font-size: .86rem; }
.media-stage-loading span:last-child,
.media-stage-error span:last-child { color: var(--cockpit-muted); font-size: .73rem; }
.media-stage-error strong { color: var(--cockpit-nasa); }
.stage-scan { width: 90px; height: 1px; background: var(--cockpit-cyan); box-shadow: 0 0 15px var(--cockpit-cyan); animation: stage-scan 1.8s ease-in-out infinite; }
@keyframes stage-scan { 0%,100% { transform: scaleX(.3); opacity: .4; } 50% { transform: scaleX(1); opacity: 1; } }

.stage-pagination { position: absolute; left: 10px; top: 50%; display: grid; gap: 9px; transform: translateY(-50%); z-index: 5; }
.stage-dot { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; }
.stage-dot[aria-current="true"] { border-color: var(--cockpit-pink); background: var(--cockpit-pink); box-shadow: 0 0 0 4px rgba(255,79,216,.16); }
.stage-nav { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.stage-nav button { min-width: 38px; min-height: 32px; border: 1px solid var(--cockpit-line); background: transparent; color: var(--cockpit-violet); }

/* Holographic source stage — static command map (replaces the prior
   single-record media feed). Orbital source nodes around a central core;
   the active node drives a fixed inspector panel. CSS/DOM only; transform
   and opacity motion only; reduced motion freezes it to a stable pose.
   Not a social feed: no engagement rail, no handle, no swipe-to-next. */
.arena-stage-map {
  --arena-radius: clamp(88px, 17vw, 150px);
  aspect-ratio: auto;
  max-height: none;
  height: auto;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  touch-action: auto;
}
.arena-map {
  position: relative;
  flex: 1;
  /* Tall enough that the full orbit radius (up to 150px) plus a node's own
     height fits above and below the vertically centered core without any
     node being clipped by this pane's overflow:hidden. See the orbit-clip
     fix task report for the exact clearance math. */
  min-height: 400px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(124,58,237,.16), transparent 62%),
    repeating-radial-gradient(circle at 50% 50%, rgba(168,108,255,.05) 0 1px, transparent 1px 34px);
}
.arena-map-scene { position: absolute; inset: 0; }
.arena-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--arena-radius) * 2);
  height: calc(var(--arena-radius) * 2);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(168,108,255,.34);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(124,58,237,.22), inset 0 0 30px rgba(53,215,242,.08);
}
.arena-orbit::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(53,215,242,.5) 90%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(circle, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: arena-orbit-sweep 72s linear infinite;
}
.arena-link {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: var(--arena-radius);
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(var(--node-angle, 0deg));
  background: linear-gradient(var(--cockpit-cyan), transparent);
  opacity: .5;
}
.arena-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, hsl(var(--swatch-hue, 260) 90% 64%), hsl(var(--swatch-hue, 260) 60% 18%) 74%);
  box-shadow: 0 0 0 6px rgba(168,108,255,.1), 0 0 40px rgba(124,58,237,.5);
}
.arena-core-ring { position: absolute; inset: -12px; border: 1px solid rgba(168,108,255,.5); border-radius: 50%; animation: arena-core-breath 6s ease-in-out infinite; }
.arena-core-glyph { color: #fff; font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.arena-nodes { position: absolute; inset: 0; }
.arena-node {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cockpit-muted);
  cursor: pointer;
  transform: translate(-50%, -50%) rotate(var(--node-angle, 0deg)) translateY(calc(-1 * var(--arena-radius))) rotate(calc(-1 * var(--node-angle, 0deg)));
}
.arena-node-dot {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid hsl(var(--swatch-hue, 260) 80% 62% / .8);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, hsl(var(--swatch-hue, 260) 85% 55% / .92), hsl(var(--swatch-hue, 260) 55% 16% / .95));
  color: #fff;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  box-shadow: 0 0 14px hsl(var(--swatch-hue, 260) 80% 55% / .35);
}
.arena-node-tag { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .04em; text-transform: uppercase; }
.arena-node:hover .arena-node-dot,
.arena-node:focus-visible .arena-node-dot { border-color: var(--cockpit-cyan); box-shadow: 0 0 18px rgba(53,215,242,.5); }
.arena-node.is-active .arena-node-dot { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 22px hsl(var(--swatch-hue, 260) 85% 60% / .7); transform: scale(1.12); }
.arena-node.is-active .arena-node-tag { color: var(--cockpit-copy); }
.arena-node:focus-visible { outline: 2px solid var(--cockpit-cyan); outline-offset: 4px; border-radius: 8px; }

.arena-inspector { padding: 14px 16px; border-top: 1px solid var(--cockpit-line); background: linear-gradient(transparent, rgba(9,6,17,.72)); }
.arena-inspector-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.arena-inspector-map { color: var(--cockpit-cyan); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }
.arena-inspector-title { margin-bottom: 6px; font-size: clamp(1rem, 1.5vw, 1.35rem); }
.arena-inspector-desc { max-width: 60ch; color: #d3cee4; font-size: .74rem; line-height: 1.55; }
.arena-inspector-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.arena-tag { padding: 2px 9px; border: 1px solid var(--cockpit-line-strong); border-radius: 999px; color: var(--cockpit-violet); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .02em; }
.arena-inspector-fine { margin-top: 9px; color: #a89ec2; font-family: var(--font-mono); font-size: .6rem; }

@keyframes arena-orbit-sweep { to { transform: rotate(360deg); } }
@keyframes arena-core-breath { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .95; transform: scale(1.05); } }

/* Arena top bar — find related sources + provider framing */
.arena-topbar { display: grid; gap: 11px; padding: 12px 0 16px; }
.arena-head { display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; }
.arena-head-note { color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .63rem; letter-spacing: .04em; }
.arena-search {
  width: min(100%, 620px);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline: auto;
  padding: 4px 5px 4px 16px;
  border: 1px solid var(--cockpit-line-strong);
  border-radius: 999px;
  background: rgba(15,9,28,.9);
  box-shadow: 0 0 24px rgba(124,58,237,.18);
}
.arena-search:focus-within { border-color: var(--cockpit-pink); box-shadow: 0 0 26px rgba(255,79,216,.22); }
.arena-search-icon { color: var(--cockpit-violet); font-size: 1rem; }
.arena-search input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  border: 0;
  background: transparent;
  color: var(--cockpit-copy);
  font-size: .85rem;
}
.arena-search input:focus { outline: none; }
.arena-search input::placeholder { color: var(--cockpit-muted); }
.arena-search-go {
  min-height: 36px;
  padding: 7px 17px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #7c3aed, #c026d3);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.arena-search-go:hover { filter: brightness(1.15); }
.provider-rail {
  display: flex;
  gap: 8px;
  justify-content: safe center;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
}
.provider-rail::-webkit-scrollbar { display: none; }
.provider-chip {
  flex: none;
  padding: 6px 13px;
  border: 1px solid var(--cockpit-line);
  border-radius: 999px;
  color: var(--cockpit-muted);
  font-family: var(--font-mono);
  font-size: .59rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.provider-chip--local { border-color: var(--cockpit-violet); background: rgba(124,58,237,.18); color: #fff; box-shadow: 0 0 15px rgba(168,108,255,.28); }
.provider-chip--next { border-color: var(--cockpit-amber); color: var(--cockpit-amber); }
.rail-provider-note { padding: 9px 12px; border-bottom: 1px solid var(--cockpit-line); color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; }

/* Next-provider preview (GitHub Repository) — planned/demo, product-positioning only */
.provider-preview {
  width: min(100%, 820px);
  margin-inline: auto;
  border: 1px solid var(--cockpit-line);
  border-radius: var(--cockpit-radius);
  background: linear-gradient(150deg, rgba(23, 14, 42, .9), rgba(8, 6, 16, .86));
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 0 26px rgba(109, 40, 217, .08);
}
.provider-preview summary { min-height: 46px; padding: 9px 14px; }
.provider-preview-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.provider-preview-summary strong { font-size: .8rem; }
.provider-preview-hint { color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; }
.provider-preview-caret { color: var(--cockpit-muted); transition: transform .15s ease; }
.provider-preview[open] .provider-preview-caret { transform: rotate(180deg); }
.provider-preview-body { padding: 0 16px 18px; }
.provider-preview-intro { margin-bottom: 12px; color: #cbd2dd; font-size: .74rem; line-height: 1.55; }
.provider-preview-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.provider-preview-badge {
  padding: 5px 11px;
  border: 1px solid var(--cockpit-line);
  border-radius: 999px;
  color: var(--cockpit-muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.provider-preview-badge--planned { border-color: var(--cockpit-amber); color: var(--cockpit-amber); }
.provider-preview-badge--not-live { border-color: var(--cockpit-nasa); color: var(--cockpit-nasa); }
.provider-preview-facts { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--cockpit-line); border-radius: 8px; }
.provider-preview-facts a { color: var(--cockpit-cyan); }
.provider-preview-subhead { margin-bottom: 8px; color: var(--cockpit-violet); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.provider-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.provider-topic-list li {
  padding: 5px 11px;
  border: 1px solid var(--cockpit-line);
  border-radius: 999px;
  background: rgba(255,255,255,.02);
  color: #cbd2dd;
  font-size: .68rem;
  white-space: nowrap;
}
.provider-lens-list { margin-bottom: 12px; padding: 0; }
.provider-preview-footnote { margin: 0; color: var(--cockpit-muted); font-size: .68rem; line-height: 1.5; }

.model-rail { display: flex; flex-direction: column; }
.model-feed-disclaimer { padding: 10px 12px; border-bottom: 1px solid var(--cockpit-line); color: var(--cockpit-muted); font-size: .68rem; line-height: 1.45; }
.model-feed { min-height: 0; display: grid; gap: 8px; padding: 8px; overflow-y: auto; }
.model-output-card { position: relative; padding: 12px; border: 1px solid var(--model-accent, var(--cockpit-line)); border-radius: 7px; background: rgba(255,255,255,.018); transition: background .2s ease, transform .2s ease; }
.model-output-card.is-pulsing { background: color-mix(in srgb, var(--model-accent) 9%, transparent); transform: translateX(-2px); }
.model-output-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.model-output-head strong { color: var(--model-accent); font-family: var(--font-mono); font-size: .87rem; letter-spacing: .04em; }
.model-output-head span { color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .56rem; text-transform: uppercase; }
.model-output-card p { color: #cbd2dd; font-size: .72rem; line-height: 1.5; }
.model-output-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .55rem; }

/* Model arena (compare) */
.task-selector--horizontal { grid-template-columns: repeat(4, auto); padding: 0; }
.task-selector--horizontal .task-button { width: auto; min-width: 112px; }
.compare-command-row { justify-content: space-between; }
.compare-source-card { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 14px; }
.compare-source-thumb { width: 78px; height: 100px; flex: none; object-fit: cover; border: 1px solid var(--cockpit-line-strong); border-radius: 10px; background: #0d0918; box-shadow: 0 0 20px rgba(124,58,237,.28); }
.compare-source-thumb--empty { display: block; }
.compare-source-thumb--procedural {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 26%, hsl(var(--swatch-hue, 260) 90% 62%), hsl(var(--swatch-hue, 260) 62% 20%) 72%);
  color: rgba(255,255,255,.92);
  font-family: var(--font-mono);
  font-size: .92rem;
  font-weight: 700;
}
.compare-source-copy { min-width: 0; display: grid; gap: 5px; }
.compare-source-copy .stage-meta-labels { margin-bottom: 2px; }
.compare-source-copy strong { font-size: .92rem; line-height: 1.35; }
.compare-source-copy span { color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .64rem; }
.compare-source-empty { padding: 6px 2px; color: var(--cockpit-muted); font-size: .78rem; }
.compare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.compare-grid .model-output-card { min-height: 280px; display: flex; flex-direction: column; }
.compare-grid .model-output-card p { font-size: .86rem; }
.compare-grid .model-output-foot { margin-top: auto; }

/* Loops, evidence, roadmap */
.loops-register { overflow: hidden; }
.dash-details { border-bottom: 1px solid var(--cockpit-line); }
.dash-details:last-child { border-bottom: 0; }
.dash-details summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; cursor: pointer; list-style: none; }
.dash-details summary::-webkit-details-marker { display: none; }
.dash-details summary strong { font-size: .82rem; }
.dash-details summary code { margin-left: 8px; font-size: .64rem; }
.loop-tier { padding: 2px 8px; border: 1px solid var(--cockpit-line); border-radius: 999px; color: var(--cockpit-cyan); font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; }
.loop-tier--disabled { color: var(--cockpit-muted); }
.dash-details-body { padding: 0 14px 16px; color: var(--cockpit-muted); font-size: .78rem; }
.dash-details-body dl,
.evidence-grid { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 7px 18px; margin-top: 12px; }
.dash-details-body dt,
.evidence-grid dt { color: var(--cockpit-violet); font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; }
.dash-details-body dd,
.evidence-grid dd { overflow-wrap: anywhere; }
.evidence-body { padding: 20px; }
.roadmap-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.roadmap-layout .dash-line-list { padding: 8px 14px 14px; }

/* Clamped long roadmap / run-queue entries */
.clamp-wrap { min-width: 0; flex: 1; }
.clamp-text { display: block; overflow-wrap: anywhere; }
.clamp-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-toggle {
  margin-top: 5px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--cockpit-pink);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.clamp-toggle:hover { text-decoration: underline; }

.dash-error-note { color: var(--cockpit-nasa); font-family: var(--font-mono); font-size: .75rem; }

.dash-bottombar {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--cockpit-line);
  background: rgba(3,4,7,.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.dash-bottombar .cockpit-shell { min-height: 52px; display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.dash-bottombar span { padding-inline: 18px; border-right: 1px solid var(--cockpit-line); color: var(--cockpit-muted); font-family: var(--font-mono); font-size: .62rem; white-space: nowrap; }
.dash-bottombar .command-label { padding-left: 0; color: var(--cockpit-violet); text-transform: uppercase; }
.dash-bottombar strong { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-left: 18px; color: var(--cockpit-green); font-family: var(--font-mono); font-size: .64rem; white-space: nowrap; text-transform: uppercase; }

@media (max-width: 1440px) {
  .source-arena-layout { grid-template-columns: 170px 250px minmax(370px, 1fr) 360px; }
}

@media (max-width: 1240px) {
  .source-arena-layout { grid-template-columns: 190px 270px minmax(380px, 1fr); }
  .model-rail { grid-column: 1 / -1; max-height: none; }
  .model-feed { grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .media-stage { max-height: 720px; }
}

@media (max-width: 1040px) {
  .dash-session span:not(.dash-session-dot), .dash-session time { display: none; }
  .overview-grid .dash-surface { grid-column: span 6; }
  .overview-primary { grid-column: span 12 !important; }
  .source-arena-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .mission-rail { max-height: none; }
  .search-rail { max-height: 720px; }
  .media-stage-wrap { grid-column: 2; grid-row: 1 / span 2; }
  .model-rail { grid-column: 1 / -1; }
  .model-feed { grid-template-columns: repeat(2, 1fr); }
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .dash-body { padding-bottom: 56px; }
  .cockpit-shell { padding-inline: 12px; }
  .dash-topbar-inner { min-height: 58px; flex-wrap: wrap; gap: 0; padding-top: 8px; }
  .dash-brand { width: calc(100% - 20px); font-size: .93rem; }
  .dash-session { width: 20px; }
  .dash-tabs { order: 3; width: calc(100% + 24px); flex-basis: calc(100% + 24px); margin-inline: -12px; padding-inline: 4px; border-top: 1px solid var(--cockpit-line); }
  .dash-tab-btn { min-height: 48px; padding-inline: 14px; }
  .dash-version { border: 1px solid rgba(53,215,242,.4); border-radius: 4px; padding: 1px 5px; }
  .dash-announcement { justify-content: flex-start; }
  .dash-announcement span { padding-inline: 12px; }
  .dash-section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .dash-section-head > p { font-size: .83rem; }
  .overview-grid { grid-template-columns: 1fr; }
  .overview-grid .dash-surface,
  .overview-primary,
  .overview-wide { grid-column: 1 !important; }
  .metric-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .metric-strip .metric-cell { padding: 12px 5px; }
  .metric-strip .metric-cell strong { font-size: 1.05rem; }
  .metric-strip .metric-cell span { font-size: .48rem; letter-spacing: 0; }
  .metric-strip--compact { grid-template-columns: repeat(4, 1fr); }
  .overview-orbit { grid-template-columns: repeat(2, 1fr); }
  .context-layout { grid-template-columns: 1fr; }
  .context-index-state { width: 100%; margin-left: 0; }

  .arena-topbar { padding-top: 6px; }
  .arena-head { justify-content: flex-start; text-align: left; }
  .provider-rail { justify-content: flex-start; }
  .dash-announcement,
  .task-selector,
  .model-feed,
  .compare-grid {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
  }
  .source-arena-layout { display: flex; flex-direction: column; min-height: 0; }
  .media-stage-wrap { order: 1; }
  .mission-rail { order: 2; display: block; max-height: none; background: transparent; border: 0; box-shadow: none; }
  .mission-rail > .surface-head,
  .mission-context-mini { display: none; }
  .task-selector { display: flex; gap: 8px; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .task-selector .rail-label { display: none; }
  .task-button { min-width: 118px; width: auto; flex: 0 0 auto; scroll-snap-align: start; }
  .feed-control { display: none; }
  .search-rail { order: 3; max-height: none; }
  .source-arena-search-form { grid-template-columns: 1fr 1fr; }
  .source-arena-search-form input,
  .source-arena-search-form select { min-height: var(--cockpit-control); }
  .source-arena-search-form > label:first-child,
  .source-arena-search-form > .cockpit-button { grid-column: 1 / -1; }
  .form-pair { display: contents; }
  .queue-head,
  .source-arena-queue,
  .queue-pagination { display: none; }
  .model-rail { order: 4; max-height: none; }
  .model-feed { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px; }
  .model-output-card { min-width: 80%; scroll-snap-align: start; }
  .media-stage { width: 100%; max-height: none; aspect-ratio: 9 / 14; border-radius: 16px; }
  .stage-meta { padding: 52px 62px 12px 14px; }
  .stage-meta h2 { display: -webkit-box; overflow: hidden; font-size: 1.05rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .stage-caption { display: -webkit-box; overflow: hidden; font-size: .69rem; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .stage-desc { max-height: 88px; }
  .stage-fine { font-size: .55rem; }
  .stage-nav { justify-content: space-between; width: 100%; }
  /* Source map flattens to a stacked command-panel list — not a swipe feed.
     The node list is the selector on mobile, so the dot column is hidden. */
  .stage-pagination { display: none; }
  .arena-stage-map { min-height: 0; aspect-ratio: auto; }
  .arena-map { flex: none; min-height: 0; overflow: visible; background: none; padding: 4px 0; }
  .arena-map-scene { position: static; }
  .arena-orbit, .arena-link { display: none; }
  .arena-core { position: relative; transform: none; margin: 0 auto 10px; }
  .arena-core-ring { display: none; }
  .arena-nodes { position: static; display: flex; flex-direction: column; gap: 8px; }
  .arena-node { position: static; transform: none; grid-auto-flow: column; grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 10px; width: 100%; min-height: var(--cockpit-control); padding: 8px 10px; border: 1px solid var(--cockpit-line); border-radius: 8px; background: rgba(255,255,255,.02); }
  .arena-node.is-active { border-color: var(--cockpit-violet); background: rgba(168,108,255,.08); }
  .arena-node.is-active .arena-node-dot { transform: none; }
  .arena-node-tag { font-size: .62rem; }
  .task-selector--horizontal { display: flex; width: 100%; }
  .compare-command-row { display: grid; }
  .compare-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .compare-grid .model-output-card { min-width: 82%; scroll-snap-align: start; }
  .compare-source-card { align-items: flex-start; }
  .roadmap-layout { grid-template-columns: 1fr; }
  .dash-details-body dl,
  .evidence-grid { grid-template-columns: 1fr; gap: 4px; }
  .dash-details-body dd,
  .evidence-grid dd { margin-bottom: 9px; }
  .dash-bottombar { background: rgba(3,4,7,.9); }
  .dash-bottombar .cockpit-shell { min-height: 44px; }
  .dash-bottombar span { padding-inline: 10px; font-size: .58rem; }
  .dash-bottombar span:nth-of-type(n+3) { display: none; }
  .dash-bottombar strong { padding-left: 10px; padding-right: 2px; font-size: .59rem; }
}

@media (max-width: 420px) {
  .source-arena-search-form { grid-template-columns: 1fr; }
  .source-arena-search-form > label:first-child,
  .source-arena-search-form > .cockpit-button { grid-column: auto; }
  .metric-strip--compact { grid-template-columns: repeat(2, 1fr); }
  .model-output-card { min-width: 88%; }
  .compare-grid .model-output-card { min-width: 88%; }
  .media-stage { aspect-ratio: 9 / 13.5; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-scan { animation: none; }
  .model-output-card { transition: none; }
  /* Freeze the source map to a stable pose — no orbit sweep, no core breath. */
  .arena-orbit::after { animation: none; }
  .arena-core-ring { animation: none; opacity: .7; }
}

@media (forced-colors: active) {
  .dash-surface,
  .media-stage,
  .task-button,
  .arena-node-dot,
  .cockpit-button { forced-color-adjust: auto; }
}

/* ------------------------------------------------------------------
 * OpenRouter Model Observatory — static snapshot slice.
 * Reuses .dash-surface, .task-button, .cockpit-button, .metric-strip,
 * .context-rule-list, .dash-line-list, .dash-details from above; adds
 * only Observatory-specific layout and chip styling below.
 * ------------------------------------------------------------------ */

.obs-safety-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.obs-safety-strip--compact {
  flex-wrap: nowrap;
  margin-bottom: 10px;
  padding-bottom: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent);
}

.obs-safety-chip {
  padding: 5px 10px;
  border: 1px solid rgba(255, 195, 77, 0.45);
  border-radius: var(--radius-chip);
  background: rgba(255, 195, 77, 0.08);
  color: var(--cockpit-amber);
  font-family: var(--font-mono);
  font-size: var(--text-chip);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.obs-layout {
  min-width: 0;
}

.obs-main {
  display: grid;
  grid-template-columns: minmax(520px, 1.45fr) minmax(340px, .85fr) 270px;
  grid-template-areas:
    "constellation advisor selected"
    "constellation estimator selected"
    "radar estimator fallback"
    "matrix matrix fallback";
  gap: 16px;
  min-width: 0;
  align-items: start;
}

.obs-constellation-card { grid-area: constellation; }
.obs-advisor-card { grid-area: advisor; }
.obs-estimator-card { grid-area: estimator; }
.obs-radar-card { grid-area: radar; }
.obs-matrix-card { grid-area: matrix; }
.obs-selected-card { grid-area: selected; }
.obs-fallback-card { grid-area: fallback; }
.obs-constellation-card,
.obs-advisor-card,
.obs-estimator-card,
.obs-radar-card,
.obs-matrix-card,
.obs-selected-card,
.obs-fallback-card { min-width: 0; }

.obs-constellation-stage {
  position: relative;
  min-height: 410px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(168, 108, 255, .22);
  border-radius: var(--cockpit-radius);
  background:
    radial-gradient(circle at 50% 50%, rgba(53, 215, 242, .1), transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(168, 108, 255, .08), transparent 48%),
    linear-gradient(rgba(168, 108, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 108, 255, .025) 1px, transparent 1px),
    rgba(5, 3, 10, .54);
  background-size: auto, auto, 36px 36px, 36px 36px, auto;
}

.obs-orbit-ring {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(53, 215, 242, .24);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(53, 215, 242, .05);
  pointer-events: none;
}

.obs-orbit-ring--outer { inset: 10% 12%; }
.obs-orbit-ring--inner { inset: 27% 28%; border-color: rgba(255, 79, 216, .2); }

.obs-orbit-axis {
  position: absolute;
  z-index: 0;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53, 215, 242, .3), transparent);
  pointer-events: none;
}

.obs-orbit-axis::after {
  content: "";
  position: absolute;
  top: -155px;
  bottom: -155px;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(168, 108, 255, .28), transparent);
}

.obs-router-core {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 144px;
  height: 144px;
  display: grid;
  place-content: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(53, 215, 242, .66);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(53, 215, 242, .26), rgba(109, 40, 217, .2) 46%, rgba(5, 3, 10, .96) 72%);
  box-shadow:
    0 0 0 10px rgba(168, 108, 255, .05),
    0 0 0 20px rgba(53, 215, 242, .025),
    0 0 34px rgba(53, 215, 242, .28);
  text-align: center;
  font-family: var(--font-mono);
  text-transform: uppercase;
  pointer-events: none;
}

.obs-router-core span,
.obs-router-core small {
  color: #b8afc8;
  font-size: .6rem;
  letter-spacing: .08em;
}

.obs-router-core strong {
  color: var(--cockpit-cyan);
  font-size: 1.25rem;
  letter-spacing: .12em;
  text-shadow: 0 0 16px rgba(53, 215, 242, .6);
}

.obs-model-grid {
  position: absolute;
  z-index: 2;
  inset: 0;
  min-width: 0;
}

.obs-model-grid > .dash-source-note {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}

.obs-model-card {
  position: absolute;
  width: clamp(126px, 22%, 158px);
  min-width: 0;
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 9px 10px;
  border: 1px solid var(--cockpit-line);
  border-radius: var(--radius-card);
  background: rgba(10, 6, 18, .92);
  color: var(--cockpit-copy);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.obs-model-card:nth-child(1) { top: 5%; left: 50%; transform: translateX(-50%); }
.obs-model-card:nth-child(2) { top: 14%; right: 4%; }
.obs-model-card:nth-child(3) { top: 41%; right: 1%; }
.obs-model-card:nth-child(4) { right: 8%; bottom: 5%; }
.obs-model-card:nth-child(5) { bottom: 1%; left: 50%; transform: translateX(-50%); }
.obs-model-card:nth-child(6) { bottom: 5%; left: 8%; }
.obs-model-card:nth-child(7) { top: 41%; left: 1%; }
.obs-model-card:nth-child(8) { top: 14%; left: 4%; }

.obs-model-card:hover {
  border-color: var(--cockpit-pink);
  box-shadow: 0 0 18px rgba(255, 79, 216, .16);
}
.obs-model-card.is-selected {
  border-color: var(--cockpit-violet);
  background: rgba(38, 20, 65, .94);
  box-shadow: 0 0 0 1px var(--cockpit-violet) inset, 0 0 18px rgba(124, 58, 237, .22);
}

.obs-model-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.obs-model-card-head strong { min-width: 0; font-size: .78rem; line-height: 1.25; }
.obs-model-lane { color: #afa6c1; font-size: .64rem; line-height: 1.25; }

.obs-advisor-controls {
  display: grid;
  gap: 9px;
  margin: 11px 0;
}

.obs-advisor-controls > div { min-width: 0; }

.obs-control-label {
  display: block;
  margin-bottom: 5px;
  color: var(--cockpit-cyan);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.obs-lane-filter,
.obs-runtype-selector {
  display: flex;
  width: 100%;
  gap: 6px;
  margin: 0;
  padding: 0 0 3px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent);
}

.obs-lane-filter .task-button,
.obs-runtype-selector .task-button {
  flex: 0 0 auto;
  min-width: 108px;
  width: auto;
  scroll-snap-align: start;
}

.dash-panel--observatory .dash-source-note {
  color: #afa6c1;
  font-size: .79rem;
}

.dash-panel--observatory .data-origin { font-size: .66rem; }

.obs-cost-chip,
.obs-status-chip,
.obs-signal-chip,
.obs-cap-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  font-family: var(--font-mono);
  font-size: var(--text-chip);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.obs-cost-chip { border: 1px solid var(--cockpit-line-strong); color: var(--cockpit-copy); }
.obs-cost-chip--PREMIUM { border-color: var(--cockpit-pink); color: var(--cockpit-pink); }
.obs-cost-chip--HIGH { border-color: var(--cockpit-amber); color: var(--cockpit-amber); }
.obs-cost-chip--MEDIUM { border-color: var(--cockpit-cyan); color: var(--cockpit-cyan); }
.obs-cost-chip--LOW { border-color: var(--cockpit-green); color: var(--cockpit-green); }
.obs-cost-chip--UNKNOWN,
.obs-cost-chip--FREE_EXPERIMENTAL { border-color: var(--cockpit-muted); color: var(--cockpit-muted); }

.obs-status-chip { border: 1px dashed var(--cockpit-line-strong); color: var(--cockpit-muted); justify-self: start; }
.obs-status--unavailable { border-color: var(--cockpit-nasa); color: var(--cockpit-nasa); }
.obs-status--alias { border-color: var(--cockpit-amber); color: var(--cockpit-amber); }
.obs-status--unknown { border-color: var(--cockpit-muted); color: var(--cockpit-muted); }

.obs-advisor-caution {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 195, 77, .4);
  border-radius: var(--radius-card);
  background: rgba(255, 195, 77, .06);
  font-size: .82rem;
}

.obs-advisor-lane,
.obs-advisor-model { margin: 4px 0; font-size: .9rem; }
.obs-advisor-select { margin-top: 10px; }

.obs-estimator-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.obs-estimator-form label {
  display: grid;
  gap: 5px;
  color: var(--cockpit-muted);
  font-size: .74rem;
}

.obs-estimator-form input {
  min-height: var(--cockpit-control);
  padding: 0 10px;
  border: 1px solid var(--cockpit-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  color: var(--cockpit-copy);
}

.obs-estimator-form input:focus-visible { outline: 2px solid var(--cockpit-violet); outline-offset: 1px; }

.obs-estimate-line { display: flex; align-items: baseline; gap: 10px; font-size: 1.1rem; }
.obs-estimate-unknown { color: var(--cockpit-amber); }
.obs-estimate-value { color: var(--cockpit-green); font-family: var(--font-mono); }
.obs-estimate-note { color: #aaa2bb; font-size: .71rem; font-family: var(--font-mono); text-transform: uppercase; }
.obs-estimate-facts { margin-top: 10px; }
.obs-estimate-fine { margin-top: 10px; color: #aaa2bb; font-size: .74rem; line-height: 1.5; }

.obs-signal-chip { border: 1px solid var(--cockpit-line-strong); }
.obs-signal--RECOMMENDED { border-color: var(--cockpit-green); color: var(--cockpit-green); }
.obs-signal--OPTIONAL { border-color: var(--cockpit-cyan); color: var(--cockpit-cyan); }
.obs-signal--NOT_JUSTIFIED { border-color: var(--cockpit-nasa); color: var(--cockpit-nasa); }
.obs-signal--INSUFFICIENT_DATA { border-color: var(--cockpit-muted); color: var(--cockpit-muted); }

.obs-matrix-table-wrap { overflow-x: auto; }
.obs-matrix-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.obs-matrix-table th,
.obs-matrix-table td { padding: 8px 10px; border-bottom: 1px solid var(--cockpit-line); text-align: left; white-space: nowrap; }
.obs-matrix-table th[scope="row"] { color: var(--cockpit-copy); font-weight: 600; }

.obs-cap-chip { border: 1px solid var(--cockpit-line-strong); }
.obs-cap--strong { border-color: var(--cockpit-green); color: var(--cockpit-green); }
.obs-cap--partial { border-color: var(--cockpit-cyan); color: var(--cockpit-cyan); }
.obs-cap--limited { border-color: var(--cockpit-amber); color: var(--cockpit-amber); }
.obs-cap--none { border-color: var(--cockpit-muted); color: var(--cockpit-muted); }

.obs-selected-title { margin: 0 0 4px; font-size: 1.05rem; }
.obs-selected-provider { margin: 0 0 10px; color: #aaa2bb; font-size: .76rem; }
.obs-selected-facts { margin-bottom: 10px; }
.obs-selected-label { margin: 10px 0 4px; color: #aaa2bb; font-size: .71rem; text-transform: uppercase; letter-spacing: .05em; }
.obs-source-note,
.obs-safety-note { margin-top: 10px; color: #aaa2bb; font-size: .71rem; line-height: 1.5; }
.obs-safety-note { color: var(--cockpit-amber); font-family: var(--font-mono); }

.obs-fallback-chain { display: grid; gap: 10px; }
.obs-fallback-step {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--cockpit-line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, .02);
}
.obs-fallback-index { color: var(--cockpit-violet); font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.obs-fallback-reason { color: var(--cockpit-muted); font-size: .78rem; }
.obs-fallback-tradeoff { color: var(--cockpit-amber); font-size: .7rem; }

@media (min-width: 1041px) {
  .dash-panel--observatory { padding-block: 12px 32px; }
  .dash-panel--observatory .dash-section-head {
    padding-bottom: 8px;
    margin-bottom: 8px;
  }
  .dash-panel--observatory > .obs-safety-strip { margin-bottom: 8px; }
}

@media (max-width: 1040px) {
  .obs-main {
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
    grid-template-areas:
      "constellation advisor"
      "constellation estimator"
      "selected fallback"
      "radar radar"
      "matrix matrix";
  }
}

@media (max-width: 760px) {
  /* Mobile reading order: safety strip (outside this layout), lane/run
     controls and Route Advisor, selected model, estimator, fallback,
     compact constellation list, matrix, then Cost Radar. */
  .obs-main { display: flex; flex-direction: column; }
  .obs-advisor-card { order: 1; }
  .obs-selected-card { order: 2; }
  .obs-estimator-card { order: 3; }
  .obs-fallback-card { order: 4; }
  .obs-constellation-card { order: 5; }
  .obs-matrix-card { order: 6; }
  .obs-radar-card { order: 7; }
  .obs-estimator-form { grid-template-columns: 1fr 1fr; }
  .obs-estimator-form label:nth-child(3) { grid-column: 1 / -1; }

  /* Keep every card width-bound to the flex container so internal chip rows
     and the matrix scroll locally without reintroducing page overflow. */
  .obs-constellation-card,
  .obs-advisor-card,
  .obs-selected-card,
  .obs-estimator-card,
  .obs-fallback-card,
  .obs-matrix-card,
  .obs-radar-card { width: 100%; max-width: 100%; min-width: 0; }

  .obs-constellation-stage {
    min-height: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .obs-orbit-ring,
  .obs-orbit-axis { display: none; }

  .obs-router-core {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 62px;
    grid-template-columns: auto auto 1fr;
    place-content: center start;
    align-items: center;
    gap: 8px;
    transform: none;
    margin-bottom: 9px;
    padding: 10px 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(53, 215, 242, .12), rgba(109, 40, 217, .12), transparent);
    box-shadow: 0 0 18px rgba(53, 215, 242, .08);
    text-align: left;
  }

  .obs-router-core strong { font-size: .92rem; }
  .obs-router-core small { justify-self: end; }

  .obs-model-grid {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
    min-width: 0;
  }

  .obs-model-grid > .dash-source-note {
    position: static;
    grid-column: 1 / -1;
    transform: none;
  }

  .obs-model-card,
  .obs-model-card:nth-child(n) {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    min-height: 92px;
    transform: none;
  }
}

@media (max-width: 420px) {
  .obs-estimator-form { grid-template-columns: 1fr; }
  .obs-estimator-form label:nth-child(3) { grid-column: auto; }
  .obs-model-card { padding: 8px; }
  .obs-model-card-head strong { font-size: .74rem; }
  .obs-model-lane { font-size: .61rem; }
  .obs-cost-chip,
  .obs-status-chip { padding-inline: 6px; font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .obs-model-card { transition: none; }
}

@media (forced-colors: active) {
  .obs-model-card,
  .obs-safety-chip,
  .obs-cost-chip,
  .obs-status-chip,
  .obs-signal-chip,
  .obs-cap-chip { forced-color-adjust: auto; }
}

/* ------------------------------------------------------------------
 * Command Center Cockpit V3.1 — deterministic repository projection.
 * This surface contains no live telemetry, provider traffic, or runtime.
 * ------------------------------------------------------------------ */

.ckpt-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;
}

.cockpit-v3 {
  --ckpt-gap: clamp(8px, .65vw, 11px);
  min-width: 0;
  color: var(--ckpt-text);
  font-size: 13px;
}

.cockpit-active {
  overflow: hidden;
  padding-bottom: 53px;
  background:
    radial-gradient(900px 460px at 50% 14%, rgba(56, 189, 248, .08), transparent 68%),
    radial-gradient(600px 460px at 83% 65%, rgba(167, 139, 250, .06), transparent 70%),
    var(--ckpt-bg);
}

.cockpit-active #dash-main {
  height: calc(100dvh - 116px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cockpit-active .cockpit-v3 {
  min-height: 0;
  padding-block: 8px 6px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ckpt-gap);
  flex: 1;
}

.cockpit-active .dash-session-dot,
.cockpit-active #footer-system-state i {
  background: var(--ckpt-cyan);
  box-shadow: 0 0 10px rgba(56, 189, 248, .42);
}

.cockpit-active .dash-tab-btn[aria-selected="true"] { color: var(--ckpt-cyan); }
.cockpit-active .dash-tab-btn[aria-selected="true"]::after {
  background: var(--ckpt-cyan);
  box-shadow: 0 0 12px rgba(56, 189, 248, .45);
}

.ckpt-bar,
.ckpt-primary-nav {
  border: 1px solid var(--ckpt-line);
  background: linear-gradient(180deg, rgba(13, 18, 28, .98), rgba(7, 10, 16, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .018);
}

.ckpt-bar {
  min-height: 42px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ckpt-bar-mode,
.ckpt-bar-view {
  min-width: 170px;
  padding: 6px 12px;
  display: grid;
  align-content: center;
  gap: 2px;
  border-right: 1px solid var(--ckpt-line);
}

.ckpt-bar-view { min-width: 205px; }
.ckpt-bar-view--snap { min-width: 190px; border-right: 0; }
.ckpt-bar-spacer { min-width: 18px; flex: 1; border-right: 1px solid var(--ckpt-line); }
.ckpt-bar-key {
  color: #64748b;
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .105em;
  line-height: 1;
  text-transform: uppercase;
}

.ckpt-bar-val {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ckpt-text);
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.2;
  white-space: nowrap;
}

.ckpt-bar-val i,
.ckpt-panel-head i,
.ckpt-graph-disclosure i,
.ckpt-flow-note i { color: #475569; font-style: normal; }
.ckpt-bar-val--locked { color: var(--ckpt-amber); }
.ckpt-mono { font-family: var(--font-mono); }
.ckpt-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ckpt-dot--amber { color: var(--ckpt-amber); }
.ckpt-lock { width: 11px; height: 11px; fill: currentColor; }

.ckpt-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(244px, .32fr) minmax(0, 1fr) minmax(244px, .32fr);
  gap: var(--ckpt-gap);
}

.ckpt-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ckpt-gap);
}

.ckpt-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ckpt-line);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, .025), transparent 34%),
    var(--ckpt-surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, .015), 0 8px 24px rgba(0, 0, 0, .15);
}

.ckpt-panel--grow { flex: 1; }
.ckpt-panel-head {
  min-height: 34px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--ckpt-line);
  background: rgba(255, 255, 255, .012);
}

.ckpt-panel-head h2,
.ckpt-flow-head h2 {
  margin: 0;
  color: var(--ckpt-text);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .075em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ckpt-panel-body { min-height: 0; padding: 9px 10px; }
.ckpt-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.ckpt-panel > .ckpt-scroll { flex: 1; }
.ckpt-col--right > .ckpt-panel { flex: 1 1 0; }
.ckpt-tag {
  padding: 2px 6px;
  border: 1px solid #334155;
  color: var(--ckpt-muted);
  font-family: var(--font-mono);
  font-size: .52rem;
  font-style: normal;
  letter-spacing: .07em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.ckpt-tag--snapshot,
.ckpt-tag--frozen { border-color: rgba(251, 191, 36, .38); color: var(--ckpt-amber); }
.ckpt-tag--config { border-color: rgba(56, 189, 248, .38); color: var(--ckpt-cyan); }
.ckpt-tag--defined { border-color: rgba(74, 222, 156, .34); color: var(--ckpt-green); }

.ckpt-rows { margin: 0; }
.ckpt-rows > div {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
}
.ckpt-rows > div:last-child { border-bottom: 0; }
.ckpt-rows dt { color: var(--ckpt-muted); font-size: .67rem; }
.ckpt-rows dd { margin: 0; color: var(--ckpt-text); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; }
.ckpt-rows dd span { color: #64748b; font-size: .5rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.ckpt-note {
  margin: 7px 0 0;
  color: #64748b;
  font-family: var(--font-mono);
  font-size: .54rem;
  line-height: 1.45;
}
.ckpt-note--foot { margin: auto 10px 9px; }
.ckpt-note code { color: #94a3b8; font-size: inherit; }

.ckpt-route-list,
.ckpt-agent-list,
.ckpt-attn-list { padding: 0; margin: 0; list-style: none; }
.ckpt-route-list li {
  min-height: 40px;
  padding: 6px 0;
  display: grid;
  grid-template-columns: minmax(70px, .75fr) minmax(75px, 1fr);
  align-items: center;
  gap: 2px 8px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
}
.ckpt-route-list li:last-child { border-bottom: 0; }
.ckpt-route-list span { color: var(--ckpt-muted); font-size: .63rem; }
.ckpt-route-list strong { color: var(--ckpt-cyan); font-family: var(--font-mono); font-size: .67rem; }
.ckpt-route-list small { grid-column: 2; color: #64748b; font-size: .52rem; }

.ckpt-agent-list li {
  min-height: 42px;
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
}
.ckpt-agent-list li:last-child { border-bottom: 0; }
.ckpt-agent-list span { min-width: 0; display: grid; gap: 2px; }
.ckpt-agent-list strong { overflow: hidden; color: var(--ckpt-text); font-family: var(--font-mono); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.ckpt-agent-list small { color: #64748b; font-size: .53rem; }
.ckpt-agent-list em { flex: none; color: var(--ckpt-green); font-family: var(--font-mono); font-size: .52rem; font-style: normal; text-align: right; text-transform: uppercase; }
.ckpt-agent-list .is-disabled em { color: var(--ckpt-amber); }

.ckpt-graph-panel { position: relative; }
.ckpt-graph-panel .ckpt-panel-head { min-height: 38px; }
.ckpt-graph-disclosure {
  color: #64748b;
  font-family: var(--font-mono);
  font-size: .52rem;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ckpt-graph-controls {
  min-height: 38px;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  border-bottom: 1px solid var(--ckpt-line);
  scrollbar-width: thin;
}
.ckpt-chip {
  min-height: 26px;
  padding: 4px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  border: 1px solid #263244;
  border-radius: 2px;
  background: #090d14;
  color: #94a3b8;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .03em;
  cursor: pointer;
}
.ckpt-chip:hover { border-color: var(--ckpt-line-strong); color: var(--ckpt-text); }
.ckpt-chip.is-on { border-color: var(--ckpt-cyan); background: rgba(56, 189, 248, .08); color: var(--ckpt-blue); }
.ckpt-chip--reset { margin-left: auto; color: var(--ckpt-amber); }
.ckpt-swatch { width: 6px; height: 6px; border: 1px solid currentColor; background: currentColor; }
.ckpt-swatch[data-lane-swatch="shared-context"] { color: var(--ckpt-amber); }
.ckpt-swatch[data-lane-swatch="core-services"] { color: var(--ckpt-cyan); }
.ckpt-swatch[data-lane-swatch="models"] { color: #2dd4bf; }
.ckpt-swatch[data-lane-swatch="tools"] { color: var(--ckpt-green); }
.ckpt-swatch[data-lane-swatch="governance"] { color: var(--ckpt-violet); }
.ckpt-swatch[data-lane-swatch="surfaces"] { color: #60a5fa; }

.ckpt-graph-stage {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background:
    linear-gradient(rgba(125, 211, 252, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, .025) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .07), transparent 42%),
    #06090f;
  background-size: 32px 32px, 32px 32px, auto, auto;
}
.ckpt-graph-status {
  position: absolute;
  z-index: 2;
  left: 9px;
  bottom: 7px;
  margin: 0;
  color: #64748b;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .035em;
  text-transform: uppercase;
  pointer-events: none;
}
.ckpt-graph-svg { width: 100%; height: 100%; min-height: 280px; display: block; }
.ckpt-cluster-hull { fill: currentColor; fill-opacity: .016; stroke: currentColor; stroke-opacity: .14; stroke-width: 1; stroke-dasharray: 4 7; }
.ckpt-cluster-label { fill: currentColor; fill-opacity: .72; font: 700 11px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.ckpt-edge { fill: none; stroke: #64748b; stroke-linecap: round; transition: opacity 140ms ease, stroke 140ms ease; }
.ckpt-edge--primary { stroke: var(--ckpt-cyan); stroke-width: 2.2; opacity: .72; }
.ckpt-edge--secondary { stroke-width: 1.35; opacity: .42; }
.ckpt-edge--tertiary { stroke-width: .9; opacity: .22; }
.ckpt-edge--references { stroke-dasharray: 5 5; }
.ckpt-edge--blocked_by { stroke: var(--ckpt-amber); stroke-dasharray: 2 4; }
.ckpt-edge--contradicts { stroke: var(--ckpt-amber); stroke-width: 2; stroke-dasharray: 8 3 2 3; }
.ckpt-edge--validated_by { stroke: var(--ckpt-green); stroke-dasharray: 8 3; }
.ckpt-edge.is-muted { opacity: .06; }
.ckpt-edge.is-related { opacity: .95; stroke-width: 2.4; }

.ckpt-node { color: var(--ckpt-cyan); cursor: pointer; outline: none; }
.ckpt-node[data-lane="shared-context"] { color: var(--ckpt-amber); }
.ckpt-node[data-lane="core-services"] { color: var(--ckpt-cyan); }
.ckpt-node[data-lane="models"] { color: #2dd4bf; }
.ckpt-node[data-lane="tools"] { color: var(--ckpt-green); }
.ckpt-node[data-lane="governance"] { color: var(--ckpt-violet); }
.ckpt-node[data-lane="surfaces"] { color: #60a5fa; }
.ckpt-node-shape { fill: #09101a; stroke: currentColor; stroke-width: 1.35; vector-effect: non-scaling-stroke; transition: filter 140ms ease, opacity 140ms ease; }
.ckpt-node-focus { fill: none; stroke: transparent; }
.ckpt-node--source .ckpt-node-shape { stroke-dasharray: 2 2; }
.ckpt-label-leader { stroke: currentColor; stroke-width: .8; opacity: .34; vector-effect: non-scaling-stroke; pointer-events: none; }
.ckpt-node-label { fill: #d7e2f0; font: 600 15px var(--font-mono); letter-spacing: .002em; paint-order: stroke; stroke: #06090f; stroke-width: 2.6px; stroke-linejoin: round; }
.ckpt-node:hover .ckpt-node-shape,
.ckpt-node:focus-visible .ckpt-node-shape,
.ckpt-node.is-selected .ckpt-node-shape { fill: currentColor; fill-opacity: .18; filter: drop-shadow(0 0 5px currentColor); stroke-width: 2.2; }
.ckpt-node:focus-visible .ckpt-node-focus { stroke: currentColor; stroke-width: 2; stroke-dasharray: 3 2; fill: none; }
.ckpt-node.is-muted { opacity: .22; }
.ckpt-node--core { color: var(--ckpt-cyan); }
.ckpt-core-orbit { fill: none; stroke: var(--ckpt-cyan); stroke-width: 1.3; stroke-dasharray: 3 5; opacity: .62; }
.ckpt-core-halo { fill: rgba(56, 189, 248, .08); stroke: rgba(125, 211, 252, .28); stroke-width: 1; }
.ckpt-node--core .ckpt-node-shape { fill: rgba(56, 189, 248, .18); stroke-width: 2.2; filter: drop-shadow(0 0 8px rgba(56, 189, 248, .75)); }
.ckpt-node--core .ckpt-node-label { fill: #e0f2fe; font-size: 18px; font-weight: 800; letter-spacing: .04em; }

.ckpt-inspector {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  width: min(310px, 38%);
  max-height: 44%;
  padding: 9px 10px;
  overflow: auto;
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 2px;
  background: rgba(5, 8, 13, .94);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
}
.ckpt-insp-title { margin: 0 0 5px; color: var(--ckpt-cyan); font-family: var(--font-mono); font-size: .72rem; }
.ckpt-insp-sum { margin: 0; color: var(--ckpt-muted); font-size: .61rem; line-height: 1.45; }
.ckpt-insp-meta { margin: 7px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; }
.ckpt-insp-meta dt { color: #64748b; font-family: var(--font-mono); font-size: .625rem; text-transform: uppercase; }
.ckpt-insp-meta dd { margin: 0; overflow-wrap: anywhere; color: #cbd5e1; font-size: .625rem; }

.ckpt-graph-alt { border-top: 1px solid var(--ckpt-line); background: #070a10; }
.ckpt-graph-alt > summary { min-height: 30px; padding: 6px 9px; color: var(--ckpt-muted); font-family: var(--font-mono); font-size: .55rem; cursor: pointer; }
.ckpt-alt-count { color: var(--ckpt-cyan); }
.ckpt-alt-body { max-height: 210px; padding: 0 9px 9px; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ckpt-alt-body section { min-width: 0; padding: 7px; border: 1px solid rgba(148, 163, 184, .12); background: rgba(255, 255, 255, .012); }
.ckpt-alt-body h3 { margin: 0 0 4px; color: var(--ckpt-text); font-family: var(--font-mono); font-size: .61rem; }
.ckpt-alt-body p { margin: 0; color: var(--ckpt-muted); font-size: .56rem; line-height: 1.42; }
.ckpt-alt-body p { overflow-wrap: anywhere; }
.ckpt-alt-node-list { padding: 0; margin: 5px 0 0; list-style: none; }
.ckpt-alt-node-list li + li { margin-top: 4px; }
.ckpt-alt-node-list button { width: 100%; padding: 4px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; border: 0; background: transparent; color: var(--ckpt-text); font-family: var(--font-mono); font-size: .55rem; text-align: left; cursor: pointer; }
.ckpt-alt-node-list button small { color: #64748b; font-size: .5rem; text-transform: uppercase; }
.ckpt-alt-cluster { margin-top: 7px; border-top: 1px solid rgba(148, 163, 184, .1); }
.ckpt-alt-cluster > summary { min-height: 30px; padding: 6px 0; color: var(--ckpt-cyan); font-family: var(--font-mono); font-size: .5rem; cursor: pointer; }

.ckpt-attn-list li {
  padding: 7px 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
}
.ckpt-attn-list li:last-child { border-bottom: 0; }
.ckpt-attn-list strong { color: var(--ckpt-text); font-family: var(--font-mono); font-size: .62rem; }
.ckpt-attn-list p { margin: 3px 0 0; color: var(--ckpt-muted); font-size: .55rem; line-height: 1.4; }
.ckpt-severity { min-width: 49px; padding: 2px 4px; border: 1px solid currentColor; color: var(--ckpt-muted); font-family: var(--font-mono); font-size: .5rem; text-align: center; text-transform: uppercase; }
.ckpt-severity--review { color: var(--ckpt-amber); }
.ckpt-severity--blocked { color: var(--ckpt-violet); }

.ckpt-flow {
  min-width: 0;
  border: 1px solid var(--ckpt-line);
  border-radius: 3px;
  background: var(--ckpt-surface);
}
.ckpt-flow-head { min-height: 27px; padding: 5px 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--ckpt-line); }
.ckpt-flow-note { color: #64748b; font-family: var(--font-mono); font-size: .5rem; text-transform: uppercase; }
.ckpt-flow-stages { min-width: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); list-style: none; }
.ckpt-flow-stages li { position: relative; min-width: 0; min-height: 48px; padding: 6px 18px 6px 9px; display: grid; align-content: center; gap: 1px; border-right: 1px solid var(--ckpt-line); }
.ckpt-flow-stages li:last-child { border-right: 0; }
.ckpt-flow-stages li:not(:last-child)::after { content: "›"; position: absolute; right: 6px; top: 50%; color: #475569; transform: translateY(-50%); }
.ckpt-flow-stages span { color: var(--ckpt-cyan); font-family: var(--font-mono); font-size: .5rem; }
.ckpt-flow-stages strong { overflow: hidden; color: var(--ckpt-text); font-family: var(--font-mono); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.ckpt-flow-stages small { color: #64748b; font-size: .5rem; text-transform: uppercase; }
.ckpt-flow-stages .is-locked { background: repeating-linear-gradient(-45deg, rgba(251, 191, 36, .055), rgba(251, 191, 36, .055) 5px, transparent 5px, transparent 10px); }
.ckpt-flow-stages .is-locked span,
.ckpt-flow-stages .is-locked strong,
.ckpt-flow-stages .is-locked small { color: var(--ckpt-amber); }

.ckpt-primary-nav { min-height: 34px; display: flex; align-items: stretch; justify-content: center; overflow-x: auto; scrollbar-width: thin; }
.ckpt-primary-nav button,
.ckpt-primary-nav > span { min-width: 95px; min-height: 32px; padding: 5px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none; border: 0; border-right: 1px solid var(--ckpt-line); background: transparent; color: var(--ckpt-muted); font-family: var(--font-mono); font-size: .56rem; letter-spacing: .045em; text-transform: uppercase; }
.ckpt-primary-nav button { cursor: pointer; }
.ckpt-primary-nav button:hover { color: var(--ckpt-text); background: rgba(255, 255, 255, .025); }
.ckpt-primary-nav .is-current { color: var(--ckpt-cyan); background: rgba(56, 189, 248, .07); box-shadow: inset 0 -2px var(--ckpt-cyan); }
.ckpt-primary-nav > span { color: #475569; }
.ckpt-primary-nav small { color: #475569; font-size: .5rem; }

.cockpit-v3 button:focus-visible,
.cockpit-v3 summary:focus-visible,
.ckpt-primary-nav button:focus-visible {
  outline: 2px solid var(--ckpt-cyan);
  outline-offset: -2px;
}

@media (max-width: 1439px) {
  .cockpit-active { overflow: auto; }
  .cockpit-active #dash-main { height: auto; min-height: calc(100dvh - 116px); overflow: visible; }
  .cockpit-active .cockpit-v3 { display: grid; grid-template-rows: auto auto auto auto; flex: none; }
  .ckpt-grid {
    grid-template-columns: 246px minmax(0, 1fr);
    grid-template-areas:
      "left graph"
      "right right";
  }
  .ckpt-col--left { grid-area: left; }
  .ckpt-graph-panel { grid-area: graph; min-height: 560px; }
  .ckpt-col--right { grid-area: right; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ckpt-col--right .ckpt-panel { min-height: 190px; }
  .ckpt-scroll--agents { max-height: 190px; }
}

@media (max-width: 1023px) {
  .ckpt-bar-spacer { display: none; }
  .ckpt-bar-mode,
  .ckpt-bar-view { min-width: 176px; }
  .ckpt-grid {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .ckpt-graph-panel { min-height: 520px; }
  .ckpt-graph-disclosure { display: none; }
  .ckpt-inspector { width: min(280px, 44%); }
}

@media (max-width: 760px) {
  .cockpit-v3 { font-size: 14px; }
  .cockpit-active #dash-main { min-height: 0; }
  .cockpit-active .cockpit-v3 { padding-block: 7px 10px; }
  .cockpit-active .cockpit-v3,
  .cockpit-active .cockpit-v3 > *:not(.ckpt-sr-only),
  .ckpt-grid > *,
  .ckpt-col > * { width: 100%; max-width: 100%; min-width: 0; }
  .ckpt-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
  .ckpt-bar-mode,
  .ckpt-bar-view { min-width: 0; min-height: 48px; padding: 7px 8px; border-bottom: 1px solid var(--ckpt-line); }
  .ckpt-bar-mode:nth-child(even),
  .ckpt-bar-view--snap { border-right: 0; }
  .ckpt-bar-key { font-size: .52rem; }
  .ckpt-bar-val { overflow: hidden; font-size: .62rem; text-overflow: ellipsis; }
  .ckpt-grid { display: flex; flex-direction: column; }
  .ckpt-graph-panel { order: 1; min-height: 0; }
  .ckpt-col--left { order: 2; }
  .ckpt-col--right { order: 3; display: flex; }
  .ckpt-col--left,
  .ckpt-col--right { min-height: 0; }
  .ckpt-col--right .ckpt-panel { min-height: 0; }
  .ckpt-graph-controls { padding-block: 7px; }
  .ckpt-chip { min-height: 42px; padding-inline: 9px; font-size: .55rem; }
  .ckpt-graph-stage { min-height: 116px; display: grid; place-items: center; }
  .ckpt-graph-stage::before { content: "Topology list available below"; color: #64748b; font-family: var(--font-mono); font-size: .6rem; text-transform: uppercase; }
  .ckpt-graph-svg,
  .ckpt-inspector,
  .ckpt-graph-status { display: none; }
  .ckpt-graph-alt { border-top: 0; }
  .ckpt-graph-alt > summary { min-height: 42px; padding: 11px; }
  .ckpt-alt-body { max-height: none; grid-template-columns: 1fr; padding: 0 10px 10px; }
  .ckpt-alt-body section { padding: 10px; }
  .ckpt-alt-body h3 { font-size: .68rem; }
  .ckpt-alt-body p { font-size: .63rem; }
  .ckpt-alt-cluster > summary { min-height: 42px; padding: 10px 0; }
  .ckpt-alt-node-list button { min-height: 42px; font-size: .62rem; }
  .ckpt-alt-node-list button { grid-template-columns: 1fr; }
  .ckpt-col--right { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ckpt-col--right > .ckpt-panel { min-height: 0; height: auto; overflow: visible; }
  .ckpt-col--right > .ckpt-panel > .ckpt-scroll { max-height: none; overflow: visible; }
  .ckpt-panel-head { min-height: 42px; padding-inline: 11px; }
  .ckpt-panel-body { padding: 10px 11px; }
  .ckpt-panel-head h2,
  .ckpt-flow-head h2 { font-size: .7rem; }
  .ckpt-route-list li,
  .ckpt-agent-list li { min-height: 46px; }
  .ckpt-note--foot { margin: 0 11px 10px; }
  .ckpt-flow-head { align-items: flex-start; flex-direction: column; }
  .ckpt-flow-stages { grid-template-columns: 1fr; }
  .ckpt-flow-stages li { min-height: 46px; padding: 8px 12px 8px 42px; border-right: 0; border-bottom: 1px solid var(--ckpt-line); }
  .ckpt-flow-stages li:last-child { border-bottom: 0; }
  .ckpt-flow-stages li:not(:last-child)::after { content: "↓"; right: 12px; }
  .ckpt-flow-stages span { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); }
  .ckpt-flow-stages strong { font-size: .64rem; }
  .ckpt-primary-nav { justify-content: flex-start; }
  .ckpt-primary-nav button,
  .ckpt-primary-nav > span { min-width: 104px; min-height: 42px; }
  .dash-bottombar span:nth-of-type(n+2) { display: none; }
}

@media (max-width: 600px) {
  .ckpt-bar { grid-template-columns: 1fr; }
  .ckpt-bar-mode,
  .ckpt-bar-view { border-right: 0; }
  .ckpt-graph-controls { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
  .ckpt-route-list li { grid-template-columns: minmax(72px, .7fr) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ckpt-edge,
  .ckpt-node-shape { transition: none; }
}

@media (forced-colors: active) {
  .ckpt-panel,
  .ckpt-bar,
  .ckpt-flow,
  .ckpt-primary-nav,
  .ckpt-chip,
  .ckpt-inspector,
  .ckpt-severity { forced-color-adjust: auto; }
  .ckpt-node-shape,
  .ckpt-edge,
  .ckpt-cluster-hull { stroke: CanvasText; }
}