/* ============================================================================
 * Witan Cortex — shared theme. Matches the Witan ops palette so the command
 * center feels like part of the same system, with a couple of "neuro" accents
 * (cyan / violet) reserved for the brain-map + escalation paths.
 * ========================================================================== */
/* RTR-49 e-ink — warm paper + muted e-ink green, matching the rest of the app. The neuro/escalate/
   grade accents carry MEANING (info flow / cloud escalation / grade) so they're kept, just muted. */
:root {
  --bg:        #12100d;
  --bg2:       #0d0b09;
  --card:      #1c1915;
  --card2:     #231f19;
  --line:      #2f2a22;
  --text:      #ece7df;
  --muted:     #948a7d;
  --accent:    #6d9a72;  /* muted e-ink green — Witan (was #10b981) */
  --warn:      #d9a441;
  --err:       #d76b6b;
  --neuro:     #6d8f9a;  /* muted teal — info flow (was cyan) */
  --escalate:  #8f86a3;  /* muted violet — cloud escalation */
  --grade-pos: #6d9a72;
  --grade-neg: #d76b6b;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Wide inner scrollers (event table, stepper, brain controls) live in their own
   overflow:auto containers, so the page itself should never scroll sideways. */
body { overflow-x: hidden; }
body {
  /* RTR-49 e-ink: flat paper — the cyan/violet radial glows removed (e-ink doesn't glow). */
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Inter", sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; }

/* ── top bar / shell ─────────────────────────────────────────────────────── */
.cc-top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(18,16,13,0.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.cc-top-inner { max-width: 1320px; margin: 0 auto; padding: 10px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cc-back, .cc-home { display: none; width: 38px; height: 38px; flex: none; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); align-items: center; justify-content: center; line-height: 1;
  cursor: pointer; text-decoration: none; font-family: inherit; padding: 0; }
.cc-back { font-size: 22px; }
.cc-home { font-size: 17px; }
.cc-back:hover, .cc-home:hover { border-color: var(--accent); }
.cc-brand { display: flex; align-items: center; gap: 10px; }
.cc-glyph {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(109,143,154,0.25), rgba(143,134,163,0.25));
  border: 1px solid var(--line); font-size: 16px;
}
.cc-title { font-weight: 700; letter-spacing: 0.3px; }
.cc-title small { color: var(--muted); font-weight: 500; font-size: 11px; display: block; letter-spacing: 0.4px; }
.cc-nav { display: flex; gap: 4px; margin-left: 10px; flex-wrap: wrap; }
.cc-nav a {
  padding: 7px 12px; border-radius: 9px; font-size: 13px; color: var(--muted);
  display: inline-flex; align-items: center; gap: 7px;
}
.cc-nav a:hover { background: var(--card2); color: var(--text); }
.cc-nav a.active { background: rgba(109,154,114,0.14); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(109,154,114,0.3); }
.cc-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.cc-live { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.cc-live.on { background: var(--accent); box-shadow: 0 0 0 3px rgba(109,154,114,0.18); animation: ccpulse 1.6s ease-in-out infinite; }
@keyframes ccpulse { 0%,100%{ opacity: 1; } 50%{ opacity: 0.45; } }
.cc-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: 0.5px; cursor: pointer; }
.cc-toggle:hover { border-color: var(--card2); color: var(--text); }
.cc-toggle.on { color: var(--accent); border-color: rgba(109,154,114,0.4); background: rgba(109,154,114,0.10); }
.livebar { background: rgba(109,154,114,0.10); border: 1px solid rgba(109,154,114,0.30); color: var(--accent);
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.badge.live { color: var(--accent); border-color: rgba(109,154,114,0.4); background: rgba(109,154,114,0.12); }

.cc-wrap { max-width: 1320px; margin: 0 auto; padding: 22px 18px 64px; }
.fakebar {
  background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.30); color: var(--warn);
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}

/* ── headings ─────────────────────────────────────────────────────────────── */
.page-h { font-size: 22px; font-weight: 700; margin: 0; }
.page-sub { color: var(--muted); font-size: 13px; margin: 3px 0 0; }
.section-h { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }

/* ── cards / grid ──────────────────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.card.pad { padding: 16px; }
.grid { display: grid; gap: 14px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; }
.kpi .v { font-size: 26px; font-weight: 800; line-height: 1; }
.kpi .l { color: var(--muted); font-size: 12px; margin-top: 6px; }
.kpi .v.neuro { color: var(--neuro); }
.kpi .v.warn { color: var(--warn); }
.kpi .v.err { color: var(--err); }
.kpi .v.esc { color: var(--escalate); }

/* ── badges / chips ─────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; border: 1px solid var(--line); color: var(--muted); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok        { color: var(--accent);   border-color: rgba(109,154,114,0.35); background: rgba(109,154,114,0.10); }
.badge.retry     { color: var(--warn);     border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.10); }
.badge.warn      { color: var(--warn);     border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.10); }
.badge.error     { color: var(--err);      border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.10); }
/* Running-log stoplight dot (replaces the ctx meter): effectiveness at a glance.
   green=done · split(half green/amber)=done-but-confirm · amber=path remains · red=dead end. */
.cc-light { display:inline-block; width:13px; height:13px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,0.06), 0 0 6px rgba(0,0,0,0.35); vertical-align:middle; }
.badge.escalated { color: var(--escalate); border-color: rgba(143,134,163,0.35); background: rgba(143,134,163,0.10); }
.badge.src       { color: var(--neuro);    border-color: rgba(109,143,154,0.30);  background: rgba(109,143,154,0.08); }
.badge.cloud     { color: var(--escalate); border-color: rgba(143,134,163,0.30); background: rgba(143,134,163,0.08); }
.badge.exo       { color: var(--warn);     border-color: rgba(245,158,11,0.30);  background: rgba(245,158,11,0.08); }
/* LLM-backed step (cyan = thinking) vs deterministic tool/code step (neutral). */
.badge.llm       { color: var(--neuro);    border-color: rgba(109,143,154,0.35);  background: rgba(109,143,154,0.10); }
.badge.tool      { color: var(--muted);    border-color: var(--line);            background: rgba(125,139,153,0.10); }
/* Context-window alarm — only rendered when a step crosses 80% of its window. */
.ctx-warn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: var(--err);
  border: 1px solid rgba(239,68,68,0.40); background: rgba(239,68,68,0.12); }
/* Live-mode honesty: anything NOT sourced from the live /cortex API shows RED so
   it's obvious at a glance what real data still needs connecting. Inline values
   use .unwired; a whole still-fake section reddens its [data-unwired] banner. */
.unwired { color: var(--err) !important; border-bottom: 1px dotted rgba(239,68,68,0.55); cursor: help; }
.fakebar.unwired { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.45); color: var(--err); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  font-size: 12.5px; border: 1px solid var(--line); color: var(--muted); cursor: pointer; user-select: none; background: var(--card); }
.chip:hover { color: var(--text); border-color: var(--card2); }
.chip.on { color: var(--accent); border-color: rgba(109,154,114,0.4); background: rgba(109,154,114,0.12); }

/* ── agent sprite ───────────────────────────────────────────────────────────── */
.sprite { image-rendering: pixelated; border-radius: 8px; flex: none; background: var(--bg2); border: 1px solid var(--line); }

/* ── event-log table ───────────────────────────────────────────────────────── */
.log { width: 100%; border-collapse: collapse; }
.log th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted);
  padding: 8px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); }
.log td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.log tr { cursor: pointer; }
.log tbody tr:hover { background: var(--card2); }
.log .t { color: var(--muted); font-size: 12px; }
.log .ag { display: flex; align-items: center; gap: 9px; }
.log .ag b { font-weight: 600; }
.log .ag span { color: var(--muted); font-size: 11.5px; }
.log .ag .agname { font-weight: 700; }
/* Phone: keep the live log glanceable — drop the lowest-value columns and let the
   agent NAME lead, so "who's doing what" needs no sideways scroll. */
@media (max-width: 560px) {
  .log .cc-col-num, .log .cc-col-chev { display: none; }
  .log th, .log td { padding: 9px 8px; }
  .log .ag { gap: 7px; }
  .log .ag .agname { font-size: 13.5px; }
}

/* ── meters ─────────────────────────────────────────────────────────────────── */
.meter { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.meter.neuro > i { background: var(--neuro); }
.meter.warn > i { background: var(--warn); }
.meter.err > i { background: var(--err); }
.meter.esc > i { background: var(--escalate); }

/* ── agent / hardware detail cards ──────────────────────────────────────────── */
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.codeblock { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: #b8c7d6; white-space: pre-wrap;
  line-height: 1.55; max-height: 320px; overflow: auto; }
details.fold { border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
details.fold > summary { cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; color: var(--muted); }
details.fold[open] > summary::before { content: "▾"; }
details.fold > div { padding: 0 14px 14px; }

/* ── trace stepper ──────────────────────────────────────────────────────────── */
.stepper { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 6px; }
.step { min-width: 168px; flex: 1; }
.step .node { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; height: 100%; cursor: pointer; transition: border-color .15s, background .15s; }
.step .node:hover { border-color: var(--card2); background: var(--card2); }
.step .node.cur { border-color: rgba(109,154,114,0.5); box-shadow: 0 0 0 1px rgba(109,154,114,0.3); }
.step .arrow { color: var(--muted); align-self: center; padding: 0 6px; font-size: 18px; }

/* ── grading widget ─────────────────────────────────────────────────────────── */
.grade { display: inline-flex; gap: 6px; }
.grade button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--card);
  color: var(--muted); cursor: pointer; font-size: 15px; }
.grade button:hover { border-color: var(--card2); color: var(--text); }
.grade button.up.on { color: var(--grade-pos); border-color: rgba(109,154,114,0.5); background: rgba(109,154,114,0.12); }
.grade button.down.on { color: var(--grade-neg); border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.12); }

.tools-list { display: flex; flex-direction: column; gap: 8px; }
.tool-row { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; font-size: 12.5px; }
.tool-row .ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--card2); font-size: 12px; }

/* ── mobile live-event cards (Pixel) ─────────────────────────────────────────
 * On the phone the wide event TABLE is unreadable (and the legacy column-hide
 * clipped the Agent + Task columns — the only two that matter). The live log
 * instead renders as a vertical list of tappable cards: a stoplight, the task
 * label + agent·step, and the time. Big tap targets, no sideways scroll, drills
 * into the real CT-scan. Desktop keeps the table. */
.cc-evlist { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.cc-ev { display: flex; align-items: center; gap: 11px; background: var(--card);
  border: 1px solid var(--line); border-radius: 13px; padding: 12px 13px; cursor: pointer; }
.cc-ev:active { background: var(--card2); }
.cc-ev .cc-light { width: 15px; height: 15px; flex: none; }
.cc-ev .body { flex: 1; min-width: 0; }
.cc-ev .task { font-weight: 600; font-size: 14px; line-height: 1.25; }
.cc-ev .meta { color: var(--muted); font-size: 11.5px; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-ev .meta .badge { vertical-align: middle; }
.cc-ev .when { color: var(--muted); font-size: 11.5px; flex: none; text-align: right; }
.cc-ev .chev { color: var(--muted); flex: none; }

.muted { color: var(--muted); }
.right { text-align: right; }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wrap-gap { display: flex; flex-wrap: wrap; gap: 8px; }
.col-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .col-2 { grid-template-columns: 1fr; } }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 13px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.ghost { background: transparent; }

/* ── mobile / Pixel-friendly ────────────────────────────────────────────────
 * Desktop is the intended Cortex home, but it has to be usable one-handed on
 * the Pixel while moving around. Header gets a back button + a horizontally
 * scrollable nav; the wide event table drops secondary columns. */
@media (max-width: 760px) {
  .cc-back, .cc-home { display: inline-flex; }
  .cc-top-inner { padding: 9px 12px; gap: 10px; }
  .cc-title small { display: none; }
  /* The Pixel is real-data-only: hide every demo-backed block (the fake-data
     banner, demo KPIs, demo filters, and the simulated event table). The live
     section stays. Marked `.demo-only` in the page markup. */
  .demo-only { display: none !important; }
  /* Keep the LIVE/DEMO toggle reachable on phones (was display:none, so the Pixel
     had no way to switch to live telemetry). The subtitle above is hidden, so it
     fits on the top row, right-aligned; the nav scrolls on its own row below. */
  .cc-top-right { margin-left: auto; }
  .cc-toggle { min-height: 40px; padding: 8px 14px; }
  .cc-nav { order: 3; width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 2px; }
  .cc-nav::-webkit-scrollbar { display: none; }
  .cc-nav a { flex: none; min-height: 40px; }
  .cc-wrap { padding: 16px 12px 56px; }
  .page-h { font-size: 19px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .kpi { padding: 12px 13px; min-width: 0; }
  .kpi .v { font-size: 22px; }
  /* let the title/search rows stack instead of forcing the page wider */
  .between { flex-wrap: wrap; }
  .between > * { min-width: 0; }
  #search { max-width: none; width: 100%; }
  /* NOTE: the old `.log td:nth-child(3,4,5,7,10){display:none}` rule lived here.
     It was written for the DEMO table's column order but also hit the LIVE table
     (different order) and clipped Agent + Task — the original "just dots" bug.
     Removed: the live log renders as cards on the phone (see .cc-ev), the demo
     table is hidden (.demo-only), and the desktop table uses its own .cc-col
     classes. Do NOT reintroduce positional column-hiding here. */
  .controls { flex-wrap: wrap; }
  .controls #slider, .controls input[type=range] { min-width: 60%; }
}