/* Control Zero design tokens — STANDARDIZED to the product design system
   (~/oasis/control_zero/DESIGN.md): industrial/utilitarian, warm near-black
   surfaces, sage-green accent used sparingly, tight 4/6/8 radii.
   Component classes below are unchanged — only palette + shape values were
   standardized, so every page restyles from these vars without layout changes. */
:root {
  /* backgrounds (warm near-black) */
  --page: #0c0c0e;
  --bg-subtle: #111113;
  --card: #18181b;
  --raised: #222225;
  --overlay: #222225;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-active: rgba(255, 255, 255, 0.24);

  --ink: #f0f0f3;
  --ink-2: #8b8b96;
  --ink-3: #7a7a86;
  --ink-4: #5a5a65;

  --grid: rgba(255, 255, 255, 0.06);
  --baseline: rgba(255, 255, 255, 0.14);

  /* Categorical TOOL identity — color follows the TOOL, forever. Never reassign.
     Steers clear of sage green + semantic red/yellow so identity never reads as status. */
  --tool-claude: #5b9dff;      /* blue   */
  --tool-cursor: #a78bfa;      /* violet */
  --tool-codex: #22d3ee;       /* cyan   */
  --tool-antigravity: #f472b6; /* pink   */
  --tool-kimi: #fb923c;        /* orange */
  --tool-pi: #818cf8;          /* indigo */
  --tool-opencode: #2dd4bf;    /* teal   */
  --tool-other: #94a3b8;       /* slate  */

  /* LPG node-type colors (non-tool graph nodes) */
  --lpg-session: #cbd5e1;
  --lpg-turn: #94a3b8;
  --lpg-action: #64748b;
  --lpg-config: #eab308;
  --lpg-cred: #ef4444;
  --lpg-model: #a78bfa;
  --lpg-skill: #2dd4bf;
  --lpg-mcp: #22d3ee;
  --lpg-machine: #8b8b96;
  --lpg-workspace: #7a7a86;
  --lpg-file: #6b7280;

  /* Status: reserved, never used as series. Always icon + label. */
  --status-good: #22c55e;
  --status-warning: #eab308;
  --status-serious: #f59e0b;
  --status-critical: #ef4444;

  /* accent: sage green — active/links/selection/focus only, sparingly, never a large fill */
  --accent: #22c55e;
  --accent-light: #4ade80;
  --accent-subtle: rgba(34, 197, 94, 0.12);
  --live: #22c55e;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui: 'DM Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', "SF Mono", ui-monospace, Menlo, monospace;

  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
  --nav-w: 216px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; }
body {
  font-family: var(--font-ui); background: var(--page); color: var(--ink);
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }
.nav {
  width: var(--nav-w); flex: none; background: var(--card);
  border-right: 1px solid var(--border); padding: 16px 10px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh;
}
.nav-brand {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px 18px;
  font-weight: 700; font-size: 15px; letter-spacing: 0.2px;
}
.nav-brand .logo {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, #3987e5, #9085e9);
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff;
}
.nav a.item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--r-sm); color: var(--ink-2); font-size: 13.5px;
}
.nav a.item svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.nav a.item:hover { background: var(--raised); color: var(--ink); }
.nav a.item.active { background: var(--raised); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.nav .phase2 {
  margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: 0.4px;
  color: var(--ink-3); border: 1px solid var(--border-strong);
  padding: 1px 5px; border-radius: 4px; text-transform: uppercase;
}
.nav .group {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ink-4); padding: 14px 10px 4px;
}
.nav .foot { margin-top: auto; padding: 10px; font-size: 11.5px; color: var(--ink-3); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 12px 24px;
  border-bottom: 1px solid var(--border); background: rgba(10, 13, 19, 0.85);
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px);
}
.topbar h1 { font-size: 16px; font-weight: 650; margin-right: auto; }
.crumb { color: var(--ink-3); font-size: 12.5px; }
.content { padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; }

/* Coverage banner (global degraded-state surface) */
.banner {
  display: flex; align-items: center; gap: 10px; padding: 8px 24px;
  font-size: 12.5px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--status-warning) 9%, var(--page));
  color: var(--ink-2);
}
.banner .b-ico { color: var(--status-warning); display: inline-flex; }
.banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2); background: var(--card);
}
.btn:hover { color: var(--ink); background: var(--raised); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.select, .search {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2);
}
.search kbd {
  font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--border-strong);
  padding: 1px 4px; border-radius: 3px; color: var(--ink-3);
}

/* ---------- Cards / tiles ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px;
}
.card h2 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.grid { display: grid; gap: 14px; }
.tile .v { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }
.tile .l { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.tile .d { font-size: 12px; margin-top: 4px; color: var(--ink-3); }
.delta-up { color: var(--status-good); }
.delta-down { color: var(--status-critical); }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2); white-space: nowrap;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px;
  border: 1px solid var(--border-strong); color: var(--ink-2);
}
.badge.live { color: var(--live); border-color: color-mix(in srgb, var(--live) 45%, transparent); }
.badge.live .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--live);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.badge.est { color: var(--ink-3); }
.badge.phase { color: var(--ink-3); text-transform: uppercase; font-size: 9.5px; }
.badge.crit { color: var(--status-critical); border-color: color-mix(in srgb, var(--status-critical) 50%, transparent); }
.badge.warn { color: var(--status-warning); border-color: color-mix(in srgb, var(--status-warning) 50%, transparent); }
.badge.serious { color: var(--status-serious); border-color: color-mix(in srgb, var(--status-serious) 50%, transparent); }
.badge.good { color: var(--status-good); border-color: color-mix(in srgb, var(--status-good) 50%, transparent); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ink-3); padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--ink-2); }
tr:hover td { background: rgba(255, 255, 255, 0.02); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .mono, .mono { font-family: var(--font-mono); font-size: 11.5px; }

/* ---------- Charts (static SVG mockups) ---------- */
.chart-wrap { position: relative; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.legend .chip { font-size: 11.5px; }
.axis-label { font-size: 10px; fill: var(--ink-3); font-family: var(--font-ui); }
.tick line, .gridline { stroke: var(--grid); stroke-width: 1; }
.tooltip {
  position: absolute; background: var(--overlay); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 8px 10px; font-size: 11.5px; color: var(--ink-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 5; min-width: 140px;
}
.tooltip .t-title { color: var(--ink); font-weight: 600; margin-bottom: 4px; font-size: 11px; }
.tooltip .t-row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.tooltip .t-val { font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- Terminal / code ---------- */
.term {
  background: #0A0E15; border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.65;
  padding: 12px 14px; overflow-x: auto; color: #B9C2D0;
}
.term .p { color: #5BE39D; }
.term .err { color: #e66767; }
.term .dim { color: #5B6472; }
.diff-line { display: block; padding: 0 8px; white-space: pre; }
.diff-add { background: rgba(12, 163, 12, 0.12); color: #7CCF7C; }
.diff-del { background: rgba(208, 59, 59, 0.12); color: #E08B8B; }
.diff-ctx { color: #7A8494; }
.diff-hunk { color: #6B7280; background: rgba(255, 255, 255, 0.03); }

/* ---------- Degraded states ---------- */
.degraded {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 28px 16px; border: 1px dashed var(--border-strong);
  border-radius: var(--r-md); color: var(--ink-3); font-size: 12.5px; text-align: center;
}
.degraded svg { width: 20px; height: 20px; opacity: 0.6; }

/* ---------- Misc ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.spread { justify-content: space-between; }
.muted { color: var(--ink-3); }
.sep { height: 1px; background: var(--border); border: none; margin: 4px 0; }
.progress { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

/* ---------- Session-view variation switcher ---------- */
.varswitch {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 4px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-bottom: 4px;
}
.varswitch .vs-back { font-size: 12.5px; color: var(--ink-3); padding: 6px 10px; }
.varswitch .vs-back:hover { color: var(--ink); }
.varswitch .vs-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 4px; }
.varswitch .vs-tab {
  font-size: 12.5px; color: var(--ink-2); padding: 6px 12px; border-radius: var(--r-sm);
}
.varswitch .vs-tab:hover { background: var(--raised); color: var(--ink); }
.varswitch .vs-tab.active { background: var(--accent); color: #fff; }

/* Session identity header (shared across all session views) */
.sid { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; }
.sid .sid-id { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 600; }
.sid .sid-field { display: flex; flex-direction: column; gap: 1px; }
.sid .sid-field .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink-3); }
.sid .sid-field .v { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sid .sid-spacer { flex: 1; }

/* ---------- Graph-explorer chrome (Master / Tool / Session graphs) ---------- */
.gx-head { display: flex; align-items: center; gap: 14px; padding: 16px 24px 12px; flex-wrap: wrap; }
.gx-brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.gx-brand .logo {
  width: 24px; height: 24px; border-radius: var(--r-sm); flex: none;
  border: 1.5px solid var(--accent); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--accent); font-family: var(--font-display);
}
.gx-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.3px; }
.gx-sub { font-size: 12px; color: var(--ink-3); }
.gx-back { font-size: 12px; color: var(--ink-3); }
.gx-back:hover { color: var(--ink); }
.gx-body { padding: 0 24px 24px; }
.tnum { font-variant-numeric: tabular-nums; }

/* Headings adopt the display face (Space Grotesk) when loaded; system fallback otherwise */
.gx-title, .varswitch, h1.disp, h2.disp, h3.disp { font-family: var(--font-display); }