/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1402] Revised: main gets 1fr; mobile map-first stage. */
/* Flow Explorer — production-grade three-pane canvas (Claude-like chrome)
 *
 * Layout: topbar (modes/views) → toolbar (filters) → main(rail | stage | side)
 * Tokens only for chrome; no decorative gradients-as-brand.
 * Mobile-first breakpoints at 960 / 720.
 *
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] VISUAL LANGUAGE (SSoT — keep in sync with KIND_META / OUTCOME_META in explorer-client.js)
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] ───────────────────────────────────────────────────────────────────────────
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Kind colors = WHAT the node is (fill / chip bg). Stable forever.
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Event/Session #4f9eff · Matcher/Prompt #3d7d8c · Gate var(--gate)
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Step/Tool/Turn #5fb3a1 · Agent #b388ff · Terminal/Decision var(--fe-ok-soft)
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Commit/Plan/Lineage #c9a8ff · File #7eb8da · Error-class var(--danger)
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Outcome / border = WHAT HAPPENED (never recolor kind fill for this).
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] ok/executed/passed  --ok green border
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] warn/retry/fallback --warn amber border
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] bad/blocked/failed  --danger red border
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] never_reached       opacity 0.4 (dim, not red)
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] selected            --accent blue border (var(--fe-space-2xs))
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] path-active         --path gold border (scrub/path focus)
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] expandable          dashed --path gold
 * [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Shapes: gate=diamond · matcher=hexagon · agent=rhomboid · terminal=ellipse
 */
/* [grok:grok-4.5][client:0.2.93][hurc:v0.12.833] Revised: session-meta strip + layer toggles + warn chips. */
/* [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Revised: full visual-language tokens (kind/outcome/metric). */
/* [grok:grok-4.5][client:0.2.93][hurc:v0.12.872] Revised: locked historical agent Client control styles. */
/* [grok:grok-4.5][client:0.2.93][hurc:v0.12.930] Revised: stage inspector + path-play + muted context chrome. */

/* Historical session: Client/Agent control is read-only (not a free filter). */
label.field[data-locked="1"] select,
#client[disabled] {
  opacity: 0.92;
  cursor: not-allowed;
  border-color: var(--warn);
  background: var(--warn-dim);
  color: var(--fg);
}
label.field[data-locked="1"] {
  color: var(--warn);
}

:root {
  --bg: #0f1115;
  --bg-elev: #161a22;
  --bg-soft: #1c212b;
  --bg-canvas: var(--bg-canvas);
  --line: #2a3140;
  --line-soft: #232833;
  --fg: #e8eaed;
  --muted: var(--muted);
  --faint: #6b7380;
  --accent: var(--accent);
  --accent-dim: rgba(108, 182, 255, 0.14);
  --ok: #3dd68c;
  --ok-dim: rgba(61, 214, 140, 0.15);
  --warn: #e2b340;
  --warn-dim: rgba(226, 179, 64, 0.15);
  --danger: var(--danger);
  --danger-dim: rgba(240, 113, 120, 0.15);
  --path: #ffd700;
  --path-dim: rgba(255, 215, 0, 0.12);
  --gate: var(--gate);
  --agent: #b388ff;
  --step: #5fb3a1;
  --event: #4f9eff;
  --matcher: #3d7d8c;
  --file: #7eb8da;
  --meta: #c9a8ff;
  --metric-in: var(--accent);
  --metric-out: #b388ff;
  --metric-time: #e2b340;
  --metric-file: #7eb8da;
  --radius: 10px;
  --radius-sm: 6px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --tap: 36px;
  /* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1440] Enforce token scale — map chrome spacing/type to design tokens (no raw px in rules) */
  --fe-space-2xs: var(--pc-space-2xs, 2px);
  --fe-space-xs: var(--pc-space-xs, 4px);
  --fe-space-xs-plus: var(--pc-space-xs-plus, 6px);
  --fe-space-sm: var(--pc-space-sm, 8px);
  --fe-space-sm-plus: var(--pc-space-sm-plus, 10px);
  --fe-space-sm-lg: var(--pc-space-sm-lg, 12px);
  --fe-space-md-sm: var(--pc-space-md-sm, 14px);
  --fe-space-md: var(--pc-space-md, 16px);
  --fe-font-9: var(--pc-font-size-2xs, 9px);
  --fe-font-10: var(--pc-font-size-xs, 10px);
  --fe-font-10-5: var(--pc-font-size-xs-plus, 10.5px);
  --fe-font-11: var(--pc-font-size-sm-tight, 11px);
  --fe-font-11-5: var(--pc-font-size-sm-mid, 11.5px);
  --fe-font-12: var(--pc-font-size-sm, 12px);
  --fe-font-12-5: var(--pc-font-size-sm-plus, 12.5px);
  --fe-font-13: var(--pc-font-size-md-tight, 13px);
  --fe-font-14: var(--pc-font-size-base, 14px);
  --fe-fw-600: var(--pc-font-weight-semibold, 600);
  --fe-fw-650: var(--pc-font-weight-semibold-plus, 650);
  --fe-fw-700: var(--pc-font-weight-bold, 700);
  --fe-lh-tight: var(--pc-line-height-tight, 1.35);
  --fe-lh-body: var(--pc-line-height-body, 1.45);
  --fe-radius-sm: var(--pc-radius-sm, 6px);
  --fe-radius-4: var(--pc-radius-xs, 4px);
  --fe-radius-10: var(--radius, 10px);
  --fe-radius-pill: var(--pc-radius-full, 999px);
  --fe-fw-550: var(--pc-font-weight-medium, 550);
  --fe-fw-560: var(--pc-font-weight-medium-plus, 560);
  --fe-lh-1-25: var(--pc-line-height-dense, 1.25);
  --fe-lh-1-3: var(--pc-line-height-snug, 1.3);
  --fe-lh-1-4: var(--pc-line-height-comfortable, 1.4);
  --fe-lh-1-5: var(--pc-line-height-loose, 1.5);
  --fe-space-0-35rem: var(--pc-space-xs, var(--fe-space-0-35rem));
  --fe-space-0-45rem: var(--pc-space-xs-plus, var(--fe-space-0-45rem));
  --fe-space-1-1rem: var(--pc-space-md-sm, var(--fe-space-1-1rem));
  --fe-space-1-2rem: var(--pc-space-md, var(--fe-space-1-2rem));
  --fe-trans-fast: var(--pc-transition-fast, background 0.12s, color 0.12s);
  --fe-trans-filter: var(--pc-transition-filter, filter 0.12s, stroke 0.12s);
  --fe-trans-border: var(--pc-transition-border, border-color .15s ease);
  --fe-bg-elev-2: var(--bg-elev, var(--fe-bg-elev-2));
  --fe-bg-deep: var(--bg-canvas, var(--fe-bg-deep));
  --fe-bg-deep-2: var(--bg-canvas, var(--fe-bg-deep-2));
  --fe-bg-deep-3: var(--bg-soft, var(--fe-bg-deep-3));
  --fe-bg-panel: var(--bg-elev, var(--fe-bg-panel));
  --fe-line-strong: var(--line, var(--fe-line-strong));
  --fe-ink: var(--bg, var(--fe-ink));
  --fe-chip-fg: var(--fg, var(--fe-chip-fg));
  --fe-muted-2: var(--muted, var(--fe-muted-2));
  --fe-ok-bright: var(--ok, var(--fe-ok-bright));
  --fe-ok-soft: var(--ok, var(--fe-ok-soft));
  --fe-ok-soft-2: var(--ok, var(--fe-ok-soft-2));
  --fe-gate-soft: var(--gate, var(--fe-gate-soft));
  --fe-accent-soft: var(--accent, var(--fe-accent-soft));
  --fe-agent-soft: var(--agent, var(--fe-agent-soft));
  --fe-gray-soft: var(--faint, var(--fe-gray-soft));
  --fe-side-w: clamp(240px, 28vw, 340px);

  --fe-z-25: var(--pc-z-sticky, 25);
  --fe-z-30: var(--pc-z-dropdown, 30);
  --fe-space-0-4rem: var(--pc-space-xs-plus, var(--fe-space-0-4rem));
  --fe-fw-500: var(--pc-font-weight-medium, 500);
  --fe-color-muted-alt: var(--muted, var(--fe-color-muted-alt));


}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fe-font-13)/var(--fe-lh-body) var(--font);
  /* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1366] Default: allow document scroll (try-it host + mobile). Full-viewport
     clamp is opt-in via .fe-full-viewport (VS Code webview / standalone). */
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.fe-full-viewport,
body.fe-full-viewport {
  height: 100%;
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Context chrome muted — keep layout stable */
button:disabled,
select:disabled,
.ctl-muted,
[data-ctx-off="1"] {
  opacity: 0.42;
  cursor: not-allowed !important;
  filter: grayscale(0.2);
}
label.field[data-locked="1"] select:disabled {
  opacity: 0.9;
  filter: none;
  cursor: default !important;
  border-style: dashed;
}
label.field[data-locked="1"]::after {
  content: "locked";
  margin-left: var(--fe-space-xs-plus);
  font-size: var(--fe-font-9);
  font-weight: var(--fe-fw-700);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}

a { color: var(--accent); }
code, kbd {
  font-family: var(--mono);
  font-size: var(--fe-font-11);
}

/* ── Shell ─────────────────────────────────────────────── */
.app {
  /* 7 chrome rows + main: topbar, orient-banner, mobile-how, toolbar2, timeline, session-meta, main */
  display: grid;
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
  min-height: 0;
  /* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1402] 1fr must land on .main, not an early chrome row. */
  /* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1366] Embedded try-it: grow with content so the page can scroll on mobile.
     Full-viewport (webview): fill the host exactly. */
  height: auto;
  min-height: min(100dvh, 920px);
}
.app > .main {
  min-height: 0;
  /* embedded: give the map a real first-screen footprint */
  min-height: min(62vh, 640px);
}
body.fe-full-viewport .app > .main {
  min-height: 0;
}
body.fe-full-viewport .app {
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
body.fe-embedded .app {
  height: auto;
  min-height: calc(100dvh - 8rem);
  max-height: none;
  overflow: visible;
}

/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1366] Mobile utility chrome (hidden on desktop) */
.mobile-nav {
  display: none;
}
.mobile-how {
  display: none;
}
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fe-space-sm-plus) var(--fe-space-md-sm);
  padding: var(--fe-space-sm-plus) var(--fe-space-md-sm);
  border-bottom: var(--fe-space-2xs) solid var(--line);
  background: linear-gradient(180deg, var(--fe-bg-elev-2) 0%, var(--bg) 100%);
}
.brand {
  display: flex;
  flex-direction: column;
  gap: var(--fe-space-2xs);
  min-width: 150px;
}
.brand h1 {
  margin: 0;
  font-size: var(--fe-font-14);
  font-weight: var(--fe-fw-650);
  letter-spacing: 0.01em;
}
.brand p {
  margin: 0;
  font-size: var(--fe-font-11-5);
  color: var(--muted);
  max-width: 48ch;
}
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fe-space-xs-plus);
  align-items: center;
}
.seg {
  display: inline-flex;
  padding: var(--fe-space-2xs);
  gap: var(--fe-space-2xs);
  background: var(--bg-soft);
  border: var(--fe-space-2xs) solid var(--line);
  border-radius: var(--fe-radius-pill);
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: var(--fe-space-xs-plus) var(--fe-space-sm-lg);
  border-radius: var(--fe-radius-pill);
  font-size: var(--fe-font-12);
  font-weight: var(--fe-fw-550);
  min-height: 30px;
  transition: var(--fe-trans-fast);
}
.seg button:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.seg button.active {
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: inset 0 0 0 var(--fe-space-2xs) rgba(108, 182, 255, 0.35);
}
.seg button:focus-visible { outline: var(--fe-space-2xs) solid var(--accent); outline-offset: var(--fe-space-2xs); }
.seg button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1367] Progressive disclosure: advanced evaluation views hidden until "More views" */
#view-seg:not(.views-expanded) .view-advanced {
  display: none;
}
#btn-more-views {
  font-size: var(--fe-font-11);
  min-height: 30px;
  padding: var(--fe-space-xs) var(--fe-space-sm-plus);
}

.toolbar2 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fe-space-sm) var(--fe-space-sm-plus);
  align-items: center;
  padding: var(--fe-space-sm) var(--fe-space-md-sm);
  border-bottom: var(--fe-space-2xs) solid var(--line-soft);
  background: var(--bg-elev);
}
.field {
  display: inline-flex;
  align-items: center;
  gap: var(--fe-space-xs-plus);
  color: var(--muted);
  font-size: var(--fe-font-12);
}
.field select,
.field input[type="search"],
.ghost-btn,
.primary-btn {
  border: var(--fe-space-2xs) solid var(--line);
  background: var(--bg-soft);
  color: var(--fg);
  border-radius: var(--radius-sm);
  padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus);
  min-height: var(--pc-space-xl, 32px);
}
.field input[type="search"] {
  min-width: min(220px, 42vw);
  background: var(--bg);
}
.ghost-btn:hover,
.field select:hover { border-color: rgba(108, 182, 255, 0.4); }
.ghost-btn.active {
  border-color: rgba(108, 182, 255, 0.45);
  background: var(--accent-dim);
  color: var(--accent);
}
.primary-btn {
  background: var(--accent-dim);
  border-color: rgba(108, 182, 255, 0.4);
  color: var(--accent);
  font-weight: var(--fe-fw-600);
}
.primary-btn:hover { background: rgba(108, 182, 255, 0.22); }
.status {
  margin-left: auto;
  font: var(--fe-font-11)/1.3 var(--mono);
  color: var(--faint);
  background: var(--bg);
  border: var(--fe-space-2xs) solid var(--line-soft);
  border-radius: var(--fe-radius-pill);
  padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus);
  max-width: min(420px, 50vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Timeline strip */
.timeline {
  display: none;
  gap: var(--fe-space-xs);
  align-items: stretch;
  padding: var(--fe-space-xs-plus) var(--fe-space-sm-lg);
  border-bottom: var(--fe-space-2xs) solid var(--line-soft);
  background: var(--bg-elev);
  overflow-x: auto;
  min-height: 0;
}
.timeline.visible { display: flex; }
.timeline-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--fe-space-2xs);
  min-width: 88px;
  max-width: 140px;
  padding: var(--fe-space-xs-plus) var(--fe-space-sm);
  border: var(--fe-space-2xs) solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.timeline-item:hover { border-color: rgba(108, 182, 255, 0.35); color: var(--fg); }
.timeline-item.active {
  border-color: rgba(108, 182, 255, 0.5);
  background: var(--accent-dim);
  color: var(--accent);
}
.timeline-item .t-kind {
  font-size: var(--fe-font-9);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.timeline-item .t-label {
  font-size: var(--fe-font-11);
  font-weight: var(--fe-fw-560);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
}
.timeline-item .t-meta {
  font-size: var(--fe-font-10);
  color: var(--faint);
  font-family: var(--mono);
}

/* ── Main 3-pane ───────────────────────────────────────── */
.main {
  display: grid;
  grid-template-columns: 210px 1fr minmax(300px, 380px);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
@media (width < 1101px) {
  .main { grid-template-columns: 180px 1fr minmax(260px, 320px); }
}
@media (width < 961px) {
  /* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1366] Page scrolls; panes stack with real heights (no trapped overflow). */
  body.fe-embedded,
  body.fe-full-viewport {
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
    min-height: 100%;
  }
  body.fe-full-viewport .app,
  body.fe-embedded .app {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    grid-template-rows: auto auto auto auto auto auto;
  }

  .mobile-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fe-space-sm);
    align-items: center;
    padding: var(--fe-space-sm) var(--fe-space-sm-lg);
    border-bottom: var(--fe-space-2xs) solid var(--line);
    background: var(--bg-elev);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .mobile-nav .field { margin: 0 }
  .mobile-nav select {
    min-height: var(--tap);
    min-width: 9rem;
    background: var(--bg);
    border: var(--fe-space-2xs) solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus);
  }
  .mobile-nav .ghost-btn,
  .mobile-nav .primary-btn {
    min-height: var(--tap);
    padding: var(--fe-space-xs-plus) var(--fe-space-sm-lg);
  }
  .mobile-how {
    display: block;
    padding: var(--fe-space-sm-plus) var(--fe-space-md-sm);
    border-bottom: var(--fe-space-2xs) solid var(--line-soft);
    background: var(--fe-bg-deep);
    font-size: var(--fe-font-12-5);
    color: var(--muted);
    line-height: var(--fe-lh-body);
  }
  .mobile-how strong { color: var(--fg); }
  .mobile-how ol {
    margin: var(--fe-space-xs-plus) 0 0;
    padding-left: var(--fe-space-1-2rem);
  }
  .mobile-how li { margin: var(--fe-space-2xs) 0 }
  .mobile-how[hidden] { display: none !important; }

  /* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1366] Collapse dense desktop chrome — use mobile-nav instead */
  .topbar .pill-row[aria-label="Canvas view"] { display: none; }
  .toolbar2 .ghost-btn#expand-all,
  .toolbar2 .ghost-btn#copy-export,
  .toolbar2 .ghost-btn#btn-errors,
  .toolbar2 .ghost-btn#btn-heat,
  .toolbar2 .ghost-btn#btn-focus-ctx,
  .toolbar2 .ghost-btn#pick-session,
  .toolbar2 .ghost-btn#btn-copy-link,
  .toolbar2 #preset-field,
  .toolbar2 #client-field { display: none; }

  .main {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  /* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1366] Filters drawer: closed by default on mobile */
  .rail {
    display: none;
    flex-direction: column;
    border-right: 0;
    border-bottom: var(--fe-space-2xs) solid var(--line);
    max-height: 50vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rail.rail-open {
    display: flex;
  }
  .stage {
    /* Map-first on mobile: majority of first viewport after sticky chrome */
    min-height: max(52vh, calc(100dvh - 14rem));
    height: max(52vh, calc(100dvh - 14rem));
    max-height: none;
    border-bottom: var(--fe-space-2xs) solid var(--line);
  }
  .canvas-wrap {
    min-height: 0;
    flex: 1;
    /* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1366] One-finger page scroll; two-finger / drag for graph pan */
    touch-action: manipulation;
  }
  #cy {
    touch-action: none; /* graph owns gestures inside canvas */;
  }
  .side {
    border-left: 0;
    border-top: var(--fe-space-2xs) solid var(--line);
    min-height: 38vh;
    max-height: none;
    height: auto;
    overflow: visible;
  }
  .side-body {
    max-height: none;
    overflow: visible;
  }
  .side.side-collapsed .side-body {
    display: none;
  }
  .side.side-collapsed {
    min-height: 0;
  }
  .field input[type="search"] { min-width: 140px; }
  .coach {
    left: var(--fe-space-sm);
    right: var(--fe-space-sm);
    top: var(--fe-space-sm);
    max-width: none;
  }
  .coach-inner p { font-size: var(--fe-font-12); max-height: 8.5em; overflow: auto; }
  .start-fab {
    bottom: var(--fe-space-sm-lg);
    right: var(--fe-space-sm-lg);
  }
  .stage-bar .stage-actions .icon-btn:not(.primary-icon):not(#btn-zoom-in):not(#btn-zoom-out):not(#btn-clear-sel) {
    display: none;
  }
}
@media (width < 601px) {
  .timeline-item { min-width: 72px; max-width: 110px; }
  .rail { padding: var(--fe-space-sm); gap: var(--fe-space-sm-plus) };
  .brand h1 { font-size: var(--fe-font-13); }
  .topbar { padding: var(--fe-space-sm) var(--fe-space-sm-plus); gap: var(--fe-space-sm) }
  .toolbar2 { padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus) }
  .stage { min-height: max(48vh, calc(100dvh - 12rem)); height: max(48vh, calc(100dvh - 12rem)); }
}
@media (width < 521px) {
  .brand p { display: none; }
  .status { display: none; }
  .integrity-pill { display: none; }
  .seg button { padding: var(--fe-space-xs-plus) var(--fe-font-9); font-size: var(--fe-font-11); min-height: var(--tap); }
  .field { font-size: var(--fe-font-11); }
  .field input[type="search"] { min-width: 120px; }
  .timeline { padding: var(--fe-space-xs) var(--fe-space-sm) }
  .rail h2 { margin-bottom: var(--fe-space-xs) }
  .side-tabs button { font-size: var(--fe-font-11); min-height: var(--tap); }
  .sel-strip .ss-meta { display: none; }
  .orient-empty kbd { display: none; }
}

.rail {
  border-right: var(--fe-space-2xs) solid var(--line);
  background: var(--bg-elev);
  padding: var(--fe-space-sm-lg) var(--fe-space-sm-plus);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--fe-space-md-sm);
}
.rail h2 {
  margin: 0 0 var(--fe-space-xs-plus);
  font-size: var(--fe-font-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: var(--fe-fw-650);
}
.rail .hint {
  font-size: var(--fe-font-11-5);
  color: var(--muted);
  line-height: var(--fe-lh-1-4);
}
.zoom-stack { display: flex; flex-direction: column; gap: var(--fe-space-xs) }
.zoom-stack button {
  text-align: left;
  border: var(--fe-space-2xs) solid var(--line-soft);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: var(--fe-space-sm) var(--fe-font-9);
  color: var(--muted);
  min-height: var(--tap);
}
.zoom-stack button strong {
  display: block;
  color: var(--fg);
  font-size: var(--fe-font-12);
}
.zoom-stack button span {
  font-size: var(--fe-font-11);
  color: var(--faint);
}
.zoom-stack button.active {
  border-color: rgba(108, 182, 255, 0.45);
  background: var(--accent-dim);
  color: var(--fg);
}
.kind-filters { display: flex; flex-wrap: wrap; gap: var(--fe-space-xs) }
.kind-filters label {
  display: inline-flex;
  align-items: center;
  gap: var(--fe-space-xs);
  font-size: var(--fe-font-11);
  color: var(--muted);
  border: var(--fe-space-2xs) solid var(--line-soft);
  border-radius: var(--fe-radius-pill);
  padding: var(--fe-space-2xs) var(--fe-space-sm);
  background: var(--bg);
  cursor: pointer;
  min-height: var(--shadow);
}
.kind-filters input { accent-color: var(--accent); }
.kind-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fe-space-xs);
  margin-top: var(--fe-space-sm);
}
.legend {
  display: flex;
  flex-direction: column;
  gap: var(--fe-space-xs);
}
.legend-row {
  display: flex;
  align-items: center;
  gap: var(--fe-space-sm);
  font-size: var(--fe-font-11);
  color: var(--muted);
}
.legend-swatch {
  width: var(--fe-space-sm-lg);
  height: var(--fe-space-sm-lg);
  border-radius: var(--fe-space-2xs);
  flex: 0 0 auto;
}

/* Stage */
.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--bg-canvas);
  display: flex;
  flex-direction: column;
}
.stage-bar {
  display: flex;
  gap: var(--fe-space-xs-plus);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--pc-space-chip-h, 7px) var(--fe-space-sm-plus);
  border-bottom: var(--fe-space-2xs) solid var(--line-soft);
  background: rgba(22, 26, 34, 0.92);
  backdrop-filter: blur(var(--fe-space-xs-plus));
}
.stage-bar .stage-actions {
  display: inline-flex;
  gap: var(--fe-space-xs);
  margin-left: auto;
  align-items: center;
}
/* [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Path orientation (start → selection) — enterprise map breadcrumb */
.orient-strip {
  display: flex;
  align-items: center;
  gap: var(--fe-space-sm);
  padding: var(--fe-space-xs-plus) var(--fe-space-sm-lg);
  border-bottom: var(--fe-space-2xs) solid var(--line-soft);
  background: var(--fe-bg-deep-2);
  min-height: var(--pc-space-xl, 32px);
  overflow: hidden;
}
.orient-label {
  font-size: var(--fe-font-10);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: var(--fe-fw-650);
  flex: 0 0 auto;
}
.orient-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fe-space-xs) var(--fe-space-2xs);
  min-width: 0;
  font-size: var(--fe-font-11-5);
  color: var(--muted);
  overflow: hidden;
}
.orient-crumb button {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: var(--fe-space-2xs) var(--fe-space-xs-plus);
  border-radius: var(--fe-radius-4);
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: var(--shadow);
}
.orient-crumb button:hover { background: var(--accent-dim); }
.orient-crumb button.current { color: var(--fg); font-weight: var(--fe-fw-600); }
.orient-crumb .sep { color: var(--faint); user-select: none; padding: 0 var(--fe-space-2xs) }
.orient-empty { color: var(--faint); font-size: var(--fe-font-11-5); }
.orient-empty kbd,
.coach kbd {
  font-family: var(--mono);
  font-size: var(--fe-font-10);
  border: var(--fe-space-2xs) solid var(--line);
  border-radius: var(--fe-radius-4);
  padding: var(--fe-space-2xs) var(--fe-space-xs-plus);
  background: var(--bg-soft);
  color: var(--muted);
}

/* [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] First-run coach card on canvas */
.coach {
  position: absolute;
  z-index: 12;
  left: var(--fe-space-sm-lg);
  top: var(--fe-space-sm-lg);
  max-width: min(360px, calc(100% - var(--pc-space-lg, 24px)));
  pointer-events: auto;
}
.coach-inner {
  background: var(--bg-elev);
  border: var(--fe-space-2xs) solid rgba(108, 182, 255, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--fe-space-sm-lg) var(--fe-space-md-sm);
}
.coach-inner strong { display: block; font-size: var(--fe-font-13); margin-bottom: var(--fe-space-xs-plus); color: var(--fg); }
.coach-inner p { margin: 0 0 var(--fe-space-sm-plus); font-size: var(--fe-font-12); color: var(--muted); line-height: var(--fe-lh-body); }
.coach-actions { display: flex; flex-wrap: wrap; gap: var(--fe-space-xs-plus) }

/* [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Floating Start FAB when nothing selected */
.start-fab {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: var(--fe-space-md);
  transform: translateX(-50%);
  border: var(--fe-space-2xs) solid rgba(61, 214, 140, 0.55);
  background: rgba(22, 40, 32, 0.95);
  color: var(--ok);
  font-weight: var(--fe-fw-650);
  font-size: var(--fe-font-12-5);
  padding: var(--fe-space-sm) var(--fe-space-md);
  border-radius: var(--fe-radius-pill);
  box-shadow: 0 var(--fe-space-xs-plus) var(--fe-space-md) rgba(0, 0, 0, 0.4);
  min-height: var(--tap);
}
.start-fab:hover { background: rgba(61, 214, 140, 0.16); }
.start-fab[hidden] { display: none !important; }

.stage-bar .icon-btn.primary-icon {
  border-color: rgba(61, 214, 140, 0.45);
  background: rgba(61, 214, 140, 0.1);
  color: var(--ok);
  font-weight: var(--fe-fw-650);
  padding: 0 var(--fe-space-sm-plus);
  min-width: auto;
}
.stage-bar .icon-btn.primary-icon:hover {
  background: rgba(61, 214, 140, 0.2);
  color: var(--fe-ok-bright);
}

.stage-bar .icon-btn {
  border: var(--fe-space-2xs) solid var(--line);
  background: var(--bg-soft);
  color: var(--muted);
  border-radius: var(--radius-sm);
  min-width: 30px;
  min-height: var(--shadow);
  padding: var(--fe-space-xs) var(--fe-space-sm);
  font-size: var(--fe-font-12);
}
.stage-bar .icon-btn:hover { color: var(--fg); border-color: rgba(108, 182, 255, 0.35); }
.stage-bar .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stage-bar .icon-btn.active {
  color: var(--accent);
  border-color: rgba(108, 182, 255, 0.45);
  background: var(--accent-dim);
}
.canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}
#cy,
#mermaid-pane,
#outline-pane,
#code-pane,
#waterfall-pane {
  position: absolute;
  inset: 0;
  overflow: auto;
}
#cy {
  background: radial-gradient(1200px 600px at 50% 0%, var(--fe-bg-deep-3) 0%, var(--bg-canvas) 55%);
}
#mermaid-pane {
  padding: var(--fe-space-md);
  display: none;
  background: var(--bg-canvas);
}
#mermaid-pane .mermaid-host {
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#mermaid-pane svg { max-width: 100%; height: auto; }
#mermaid-pane .mermaid-empty,
#outline-pane .empty {
  color: var(--muted);
  padding: var(--pc-space-lg, 24px);
  max-width: 48ch;
}
#mermaid-source {
  display: none;
  margin-top: var(--fe-space-sm-lg);
  border-top: var(--fe-space-2xs) solid var(--line);
  padding-top: var(--fe-space-sm-lg);
}
#mermaid-source pre {
  margin: 0;
  padding: var(--fe-space-sm-lg);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  border: var(--fe-space-2xs) solid var(--line);
  font: var(--fe-font-11)/1.4 var(--mono);
  white-space: pre-wrap;
  color: var(--muted);
}
#outline-pane {
  display: none;
  padding: var(--fe-space-sm-plus) var(--fe-space-sm-lg) var(--pc-space-lg, 24px);
  background: var(--bg);
}
.outline-list { list-style: none; margin: 0; padding: 0 }
.outline-list ul {
  list-style: none;
  margin: 0;
  padding-left: var(--fe-space-md-sm);
  border-left: var(--fe-space-2xs) solid var(--line-soft);
}
.outline-list.collapsed > li > ul { display: none; }
.outline-item {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--fe-space-xs-plus) var(--fe-space-sm);
  align-items: start;
  padding: var(--pc-space-chip-h, 7px) var(--fe-space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: var(--fe-space-2xs) solid transparent;
  min-height: var(--tap);
}
.outline-item:hover { background: var(--bg-soft); }
.outline-item.active {
  background: var(--accent-dim);
  border-color: rgba(108, 182, 255, 0.3);
}
.outline-item .twist {
  width: var(--pc-font-size-h3, 18px);
  height: var(--pc-font-size-h3, 18px);
  border: 0;
  background: transparent;
  color: var(--faint);
  padding: 0;
  font-size: var(--fe-font-10);
  margin-top: var(--fe-space-2xs);
}
.outline-item .twist:disabled { visibility: hidden; }
.outline-item .glyph {
  width: var(--pc-font-size-h3, 18px);
  height: var(--pc-font-size-h3, 18px);
  border-radius: var(--fe-radius-4);
  margin-top: var(--fe-space-2xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fe-font-10);
  color: var(--fe-ink);
  font-weight: var(--fe-fw-700);
}
.outline-item .title {
  font-size: var(--fe-font-12-5);
  font-weight: var(--fe-fw-560);
  word-break: break-word;
}
.outline-item .meta {
  font-size: var(--fe-font-11);
  color: var(--faint);
  margin-top: var(--fe-space-2xs);
  word-break: break-word;
}
.outline-item .kind {
  font-size: var(--fe-font-10);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Floating graph tooltip */
.graph-tip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  max-width: 280px;
  padding: var(--fe-space-sm) var(--fe-space-sm-plus);
  border-radius: var(--radius-sm);
  border: var(--fe-space-2xs) solid var(--line);
  background: rgba(22, 26, 34, 0.96);
  box-shadow: var(--shadow);
  font-size: var(--fe-font-12);
  color: var(--fg);
  display: none;
}
.graph-tip.visible { display: block; }
.graph-tip .gt-kind {
  font-size: var(--fe-font-10);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-bottom: var(--fe-space-2xs);
}
.graph-tip .gt-body { color: var(--muted); font-size: var(--fe-font-11-5); margin-top: var(--fe-space-xs); max-height: none; overflow: hidden; }
.graph-tip .gt-hint { color: var(--faint); font-size: var(--fe-font-10-5); margin-top: var(--fe-space-xs-plus); font-style: italic; }
.graph-tip { max-width: min(280px, 70vw); pointer-events: none; /* never trap scroll */ }

/* [grok:grok-4.5][client:0.2.93][hurc:v0.12.928] Taken-path walk outcomes */
.path-toolbar { display:flex; gap: var(--fe-space-xs-plus); flex-wrap:wrap; margin: 0 0 var(--fe-space-sm-plus) }
.path-toolbar .ghost-btn { font-size:var(--fe-font-11); min-height:30px; padding: var(--fe-space-xs) var(--fe-space-sm-plus) }
.path-summary { display:flex; flex-wrap:wrap; gap: var(--fe-space-xs-plus); margin: 0 0 var(--fe-space-sm-plus) }
.path-chip { font-size: var(--fe-font-10-5); border: var(--fe-space-2xs) solid var(--line); border-radius: var(--fe-radius-pill); padding: var(--fe-space-2xs) var(--fe-space-sm); color: var(--muted); background: var(--bg); }
.path-chip-ok { border-color: rgba(61,214,140,.45); color: var(--ok); }
.path-chip-muted { opacity:.85; }
.step-out { font-size: var(--fe-font-10); font-weight: var(--fe-fw-650); text-transform: uppercase; letter-spacing: .04em; border-radius: var(--fe-radius-4); padding: var(--fe-space-2xs) var(--fe-space-xs-plus); margin-right: var(--fe-space-xs-plus); display: inline-block; vertical-align: middle; }
.step-out.out-ok { background: rgba(61,214,140,.15); color: var(--ok); }
.step-out.out-bad { background: rgba(240,113,120,.15); color: var(--danger); }
.step-out.out-warn { background: rgba(226,179,64,.15); color: var(--warn); }
.step-out.out-muted { background: var(--bg-soft); color: var(--faint); }
.step-alts { font-size:var(--fe-font-11); color: var(--faint); margin-top: var(--fe-space-xs); font-style: italic; }
.step-path { border-left: var(--fe-space-2xs) solid var(--line-soft); padding-left: var(--fe-space-sm); margin-bottom: var(--fe-space-sm); cursor: pointer; }
.step-path.out-ok { border-left-color: var(--ok); }
.step-path.out-bad { border-left-color: var(--danger); }
.step-path:hover { background: rgba(255,255,255,.03); border-radius: var(--fe-radius-4); }
.flow-dir-badge {
  position: absolute; z-index: 8; right: var(--fe-space-sm-lg); top: var(--fe-space-sm-lg);
  font-size: var(--fe-font-11); font-weight: var(--fe-fw-650); color: var(--muted);
  background: rgba(22,26,34,.92); border: var(--fe-space-2xs) solid var(--line);
  border-radius: var(--fe-radius-pill); padding: var(--fe-space-xs) var(--fe-space-sm-plus); pointer-events: none;
}


/* Side panel */
.side {
  border-left: var(--fe-space-2xs) solid var(--line);
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--fe-space-2xs);
  padding: var(--fe-space-sm) var(--fe-space-sm) 0;
  border-bottom: var(--fe-space-2xs) solid var(--line-soft);
  overflow-x: auto;
}
.side-tabs button {
  flex: 0 0 auto;
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: var(--fe-space-sm) var(--fe-space-xs-plus);
  border-bottom: var(--fe-space-2xs) solid transparent;
  font-weight: var(--fe-fw-600);
  font-size: var(--fe-font-12);
  min-height: var(--tap);
}
.side-tabs button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.side-body {
  flex: 1;
  overflow: auto;
  padding: var(--fe-space-sm-lg);
}
.side-body h3 { margin: 0 0 var(--fe-space-xs-plus); font-size: var(--fe-font-14); }
.side-body h4 {
  margin: var(--fe-space-md-sm) 0 var(--fe-space-xs-plus);
  font-size: var(--fe-font-10);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fe-space-xs-plus);
  margin: var(--fe-space-sm) 0 var(--fe-space-sm-lg);
}
.stat {
  background: var(--bg);
  border: var(--fe-space-2xs) solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: var(--fe-space-sm);
}
.stat b {
  display: block;
  font-size: var(--fe-space-md);
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-size: var(--fe-font-11);
  color: var(--faint);
}
.kv { display: grid; gap: 0 }
.kv .row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--fe-space-xs) var(--fe-space-sm-plus);
  align-items: start;
  padding: var(--fe-space-xs-plus) 0;
  border-bottom: var(--fe-space-2xs) solid rgba(255, 255, 255, 0.04);
  font-size: var(--fe-font-12);
}
.kv .k {
  color: var(--faint);
  font-size: var(--fe-font-11);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: var(--fe-space-2xs);
}
.kv .v { font-size: var(--fe-font-12-5); min-width: 0; }
.kv code {
  font: var(--fe-font-11)/1.35 var(--mono);
  word-break: break-all;
  color: var(--fe-chip-fg);
  padding: var(--fe-space-2xs) var(--fe-space-xs);
  border-radius: var(--fe-space-2xs);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.kv code:hover { background: rgba(108, 182, 255, 0.15); }
.chip {
  display: inline-block;
  padding: var(--fe-space-2xs) var(--fe-space-sm);
  border-radius: var(--fe-radius-pill);
  font-size: var(--fe-font-11);
  font-weight: var(--fe-fw-650);
  color: var(--fe-ink);
  margin: 0 var(--fe-space-xs) var(--fe-space-xs) 0;
}
.callout {
  margin-top: var(--fe-space-sm-lg);
  padding: var(--fe-space-sm-plus);
  border-radius: var(--radius-sm);
  background: rgba(108, 182, 255, 0.08);
  border: var(--fe-space-2xs) solid rgba(108, 182, 255, 0.2);
  font-size: var(--fe-font-12);
  color: var(--muted);
  line-height: var(--fe-lh-body);
}
.neighbors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fe-space-xs);
  margin: var(--fe-space-xs-plus) 0 var(--fe-space-xs);
}
.neighbors button {
  border: var(--fe-space-2xs) solid var(--line);
  background: var(--bg);
  color: var(--muted);
  border-radius: var(--fe-radius-pill);
  padding: var(--fe-space-xs) var(--fe-font-9);
  font-size: var(--fe-font-11);
  min-height: var(--shadow);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.neighbors button:hover {
  border-color: rgba(108, 182, 255, 0.4);
  color: var(--accent);
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fe-space-xs-plus);
  margin: var(--fe-space-sm) 0 var(--fe-space-xs);
}
.quick-picks {
  display: flex;
  flex-direction: column;
  gap: var(--fe-space-xs);
  margin-top: var(--fe-space-sm);
}
.quick-picks button {
  text-align: left;
  border: var(--fe-space-2xs) solid var(--line-soft);
  background: var(--bg);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: var(--fe-space-sm) var(--fe-space-sm-plus);
  font-size: var(--fe-font-12);
}
.quick-picks button:hover {
  border-color: rgba(108, 182, 255, 0.35);
  color: var(--fg);
}
.quick-picks button strong {
  display: block;
  color: var(--fg);
  font-size: var(--fe-font-12);
}
.walk .step {
  padding: var(--fe-space-sm) 0;
  border-bottom: var(--fe-space-2xs) solid var(--line-soft);
  cursor: pointer;
}
.walk .step:hover { color: var(--accent); }
.walk .step.active {
  background: var(--accent-dim);
  margin: 0 -var(--fe-space-sm);
  padding: var(--fe-space-sm);
  border-radius: var(--radius-sm);
}
.walk .step strong {
  display: block;
  font-size: var(--fe-font-12);
  color: var(--fg);
}
.walk .step span {
  font-size: var(--fe-font-11-5);
  color: var(--muted);
}
#hits { list-style: none; margin: 0; padding: 0 }
#hits li {
  padding: var(--pc-space-chip-h, 7px) var(--fe-space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: var(--fe-space-2xs) solid transparent;
  font-size: var(--fe-font-12);
}
#hits li:hover,
#hits li.active { background: var(--bg-soft); border-color: rgba(108, 182, 255, 0.25); }
.empty { color: var(--muted); font-size: var(--fe-font-12-5); }
kbd {
  display: inline-block;
  padding: var(--fe-space-2xs) var(--fe-space-xs-plus);
  border: var(--fe-space-2xs) solid var(--line);
  border-radius: var(--fe-radius-4);
  background: var(--bg);
  color: var(--muted);
  font-size: var(--fe-font-10-5);
}

/* Mermaid interactivity */
.mermaid-host svg .node rect,
.mermaid-host svg .node polygon,
.mermaid-host svg .node circle {
  cursor: pointer !important;
  transition: var(--fe-trans-filter);
}
.mermaid-host svg .node:hover rect,
.mermaid-host svg .node:hover polygon,
.mermaid-host svg .node:hover circle {
  filter: brightness(1.12);
}
.mermaid-host svg .node.mmd-selected rect,
.mermaid-host svg .node.mmd-selected polygon,
.mermaid-host svg .node.mmd-selected circle {
  stroke: var(--accent) !important;
  stroke-width: var(--fe-space-2xs) !important;
  filter: brightness(1.18);
}
.mermaid-host svg .node.mmd-faded {
  opacity: 0.22;
}

/* Keys help footer chip */
.keys-hint {
  font-size: var(--fe-font-11);
  color: var(--faint);
  line-height: var(--fe-lh-1-5);
}
.keys-hint kbd { margin: 0 var(--fe-space-2xs) }


/* Code view — clickable source (replaces dead ASCII markup) */
#code-pane {
  display: none;
  padding: 0;
  background: var(--bg);
  flex-direction: column;
}
#code-pane .code-toolbar {
  display: flex;
  align-items: center;
  gap: var(--fe-space-sm);
  padding: var(--fe-space-sm) var(--fe-space-sm-plus);
  border-bottom: var(--fe-space-2xs) solid var(--line-soft);
  background: var(--bg-elev);
  position: sticky;
  top: 0;
  z-index: 2;
}
.code-pre {
  margin: 0;
  padding: var(--fe-space-sm-plus) 0 var(--pc-space-xl, 32px);
  font: 11.var(--fe-space-xs-plus)/1.45 var(--mono);
  color: var(--muted);
  overflow: auto;
  min-height: 100%;
}
.code-line {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--fe-space-sm);
  padding: var(--fe-space-2xs) var(--fe-space-sm-lg) var(--fe-space-2xs) 0;
  border-left: var(--fe-space-2xs) solid transparent;
  cursor: default;
}
.code-line.hot {
  cursor: pointer;
}
.code-line.hot:hover {
  background: var(--bg-soft);
  color: var(--fg);
}
.code-line.active {
  background: var(--accent-dim);
  border-left-color: var(--accent);
  color: var(--fg);
}
.code-line .ln {
  text-align: right;
  color: var(--faint);
  user-select: none;
  padding-right: var(--fe-space-xs-plus);
}
.code-line .tx { white-space: pre-wrap; word-break: break-word; }
.code-line .tx .tok-id { color: var(--accent); }
.code-line .tx .tok-edge { color: var(--fe-muted-2); }


/* Selection strip — always-visible summary of current node */
.sel-strip {
  display: flex;
  align-items: center;
  gap: var(--fe-space-sm);
  flex-wrap: wrap;
  padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus);
  border-bottom: var(--fe-space-2xs) solid var(--line-soft);
  background: rgba(108, 182, 255, 0.06);
  font-size: var(--fe-font-12);
  min-height: 34px;
}
.sel-strip[hidden] { display: none !important; }
.sel-strip .ss-kind {
  font-size: var(--fe-font-10);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
}
.sel-strip .ss-label {
  font-weight: var(--fe-fw-600);
  color: var(--fg);
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sel-strip .ss-meta {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fe-font-11);
  max-width: 50ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sel-strip .ss-actions { margin-left: auto; display: inline-flex; gap: var(--fe-space-xs); flex-wrap: wrap; }
.sel-strip .icon-btn,
.sel-strip button {
  border: var(--fe-space-2xs) solid var(--line) !important;
  background: var(--bg-soft) !important;
  color: var(--accent) !important;
  border-radius: var(--radius-sm);
  min-height: var(--shadow);
  padding: var(--fe-space-xs) var(--fe-space-sm-plus);
  font-size: var(--fe-font-11);
  font-weight: var(--fe-fw-600);
}
.sel-strip .icon-btn:hover {
  border-color: rgba(108, 182, 255, 0.45) !important;
  background: var(--accent-dim) !important;
}


/* [grok:grok-4.5][client:0.2.93][hurc:v0.12.980] File diff line colors — reuse .evidence-block for layout */
.diff-rm { color: var(--danger); }
.diff-add { color: var(--ok); }
.diff-path { color: var(--muted); }

/* Evidence / enterprise detail */
.evidence-block {
  margin: 0 0 var(--fe-space-sm-plus);
  padding: var(--fe-space-sm-plus) var(--fe-space-sm-lg);
  background: var(--bg);
  border: var(--fe-space-2xs) solid var(--line);
  border-radius: var(--radius-sm);
  font: 11.var(--fe-space-xs-plus)/1.45 var(--mono);
  color: var(--fe-chip-fg);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
}
.trace-path {
  margin: 0 0 var(--fe-space-sm-plus);
  padding-left: var(--fe-space-1-2rem);
  font-size: var(--fe-font-12);
}
.trace-path li {
  padding: var(--fe-space-xs) 0;
  border-bottom: var(--fe-space-2xs) solid rgba(255,255,255,.04);
}
.trace-path li:hover { color: var(--accent); }


/* Session interconnect strip + layer toggles */
.session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fe-space-xs-plus) var(--fe-space-sm);
  padding: var(--fe-space-xs-plus) var(--fe-space-sm-lg);
  border-bottom: var(--fe-space-2xs) solid var(--border, #2a2a32);
  background: color-mix(in srgb, var(--panel, #16161c) 92%, var(--accent, #4f9eff) 8%);
  font-size: var(--fe-font-11);
  line-height: var(--fe-lh-tight);
}
.session-meta[hidden] { display: none !important; }
.sm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fe-space-xs);
  padding: var(--fe-space-2xs) var(--fe-space-sm);
  border-radius: var(--fe-radius-pill);
  background: var(--chip-bg, rgba(255,255,255,0.06));
  border: var(--fe-space-2xs) solid var(--border, #2a2a32);
  color: var(--fg, #e8e8ed);
}
.sm-chip strong { color: var(--muted, #9a9aab); font-weight: var(--fe-fw-600); }
.sm-chip code { font-size: var(--fe-font-10); }
button.sm-chip.sm-link {
  cursor: pointer;
  font: inherit;
  color: var(--accent, #4f9eff);
}
button.sm-chip.sm-link:hover { border-color: var(--accent, #4f9eff); }
.layer-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fe-space-xs);
}
.layer-btn {
  font-size: var(--fe-font-11);
  min-height: var(--shadow);
  padding: var(--fe-space-2xs) var(--fe-space-sm);
  border-radius: var(--fe-radius-sm);
  border: var(--fe-space-2xs) solid var(--border, #2a2a32);
  background: transparent;
  color: var(--muted, #9a9aab);
  cursor: pointer;
}
.layer-btn.active {
  background: color-mix(in srgb, var(--accent, #4f9eff) 22%, transparent);
  border-color: var(--accent, #4f9eff);
  color: var(--fg, #e8e8ed);
}
.related-list {
  list-style: none;
  margin: var(--fe-space-xs) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--fe-space-xs);
}
.related-list li { margin: 0 }
.related-list .ghost-btn { width: 100%; justify-content: flex-start; }

.sm-chip.sm-warn {
  border-color: var(--gate);
  color: var(--fe-gate-soft);
}
.sm-chip.sm-status {
  border-color: var(--accent, #4f9eff);
}

/* Evaluation graphs (Sankey / treemap / heatmap / sequence / Gantt / network / stats) */
#analytics-pane {
  position: absolute;
  inset: 0;
  overflow: auto;
  background: var(--bg);
  padding: var(--fe-space-sm-plus) var(--fe-space-sm-lg) var(--fe-space-md);
}
.analytics-toolbar {
  display: flex;
  align-items: center;
  gap: var(--fe-space-sm-plus);
  margin-bottom: var(--fe-space-sm-plus);
  flex-wrap: wrap;
}
.analytics-host { min-height: 200px; }
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fe-space-sm-lg);
}
.analytics-card {
  border: var(--fe-space-2xs) solid var(--border, #2a2a32);
  border-radius: var(--fe-radius-10);
  padding: var(--fe-space-sm-plus) var(--fe-space-sm-lg);
  background: var(--bg-elev, #161a22);
}
.analytics-card h4 {
  margin: 0 0 var(--fe-space-sm);
  font-size: var(--fe-font-12);
  font-weight: var(--fe-fw-600);
  color: var(--muted, #9a9aab);
}
.analytics-empty {
  font-size: var(--fe-font-12);
  color: var(--faint, #6a6a78);
  padding: var(--fe-space-md) var(--fe-space-sm);
}
.kpi-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fe-space-sm);
  margin-bottom: var(--fe-space-sm-lg);
}
.kpi-chip {
  border: var(--fe-space-2xs) solid var(--border, #2a2a32);
  border-radius: var(--fe-space-sm);
  padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus);
  min-width: 88px;
  background: color-mix(in srgb, var(--accent, #4f9eff) 10%, transparent);
}
.kpi-chip .v { font-size: var(--fe-space-md); font-weight: var(--fe-fw-700); color: var(--fg, #e8e8ed); }
.kpi-chip .l { font-size: var(--fe-font-10); color: var(--muted, #9a9aab); }
.heat-table { border-collapse: collapse; font-size: var(--fe-font-11); width: 100%; }
.heat-table th, .heat-table td {
  border: var(--fe-space-2xs) solid var(--border, #2a2a32);
  padding: var(--fe-space-xs) var(--fe-space-xs-plus);
  text-align: center;
}
.heat-table th { color: var(--muted, #9a9aab); font-weight: var(--fe-fw-500); }
.hist-bars { display: flex; align-items: flex-end; gap: var(--fe-space-xs); height: 120px; }
.hist-bar {
  flex: 1;
  background: color-mix(in srgb, var(--accent, #4f9eff) 55%, transparent);
  border-radius: var(--fe-space-2xs) var(--fe-space-2xs) 0 0;
  min-width: var(--fe-space-sm);
  position: relative;
}
.hist-bar span {
  position: absolute;
  bottom: -var(--fe-space-md);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fe-font-9);
  color: var(--faint, #6a6a78);
  white-space: nowrap;
}
.xy-svg, .sankey-svg, .tree-svg, .net-svg, .gantt-svg { width: 100%; height: auto; display: block; }
.gantt-row { display: flex; align-items: center; gap: var(--fe-space-sm); margin: var(--fe-space-2xs) 0; font-size: var(--fe-font-11); }
.gantt-label { width: 120px; flex-shrink: 0; color: var(--muted, #9a9aab); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-track { flex: 1; height: var(--fe-space-md-sm); background: rgba(255,255,255,0.04); border-radius: var(--fe-radius-4); position: relative; }
.gantt-fill {
  position: absolute; top: 0; bottom: 0; border-radius: var(--fe-radius-4);
  background: color-mix(in srgb, var(--accent, #4f9eff) 70%, transparent);
}
.gantt-fill.crit { background: color-mix(in srgb, var(--danger) 80%, transparent); }
.gantt-fill.done { background: color-mix(in srgb, var(--fe-ok-soft) 70%, transparent); }
.tree-node { margin-left: var(--fe-space-sm-lg); border-left: var(--fe-space-2xs) solid var(--border, #2a2a32); padding-left: var(--fe-space-sm); font-size: var(--fe-font-11); }
.tree-node .tv { color: var(--accent, #4f9eff); font-variant-numeric: tabular-nums; }

/* Friendly Files / actor UX */
.file-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--fe-space-sm-plus);
  margin-top: var(--fe-space-sm);
}
.file-card {
  border: var(--fe-space-2xs) solid var(--border, #2a2a32);
  border-radius: var(--fe-radius-10);
  padding: var(--fe-space-sm-plus) var(--fe-space-sm-lg);
  background: var(--bg-elev, #161a22);
  transition: var(--fe-trans-border);
}
.file-card:hover { border-color: var(--accent, #4f9eff); }
.file-card-top { display: flex; gap: var(--fe-space-sm); align-items: flex-start; }
.file-icon {
  font-size: var(--fe-font-10); font-weight: var(--fe-fw-700); letter-spacing: .04em;
  background: rgba(79,158,255,.15); color: var(--accent, #4f9eff);
  border-radius: var(--fe-radius-sm); padding: var(--fe-space-xs) var(--fe-space-xs-plus); flex-shrink: 0;
}
.file-card-title { flex: 1; min-width: 0; }
.file-open-link {
  background: none; border: none; color: var(--fg, #e8e8ed);
  font-weight: var(--fe-fw-600); font-size: var(--fe-font-13); cursor: pointer; padding: 0;
  text-align: left; text-decoration: underline; text-underline-offset: var(--fe-space-2xs);
}
.file-open-link:hover { color: var(--accent, #4f9eff); }
.file-path-sub {
  font-size: var(--fe-font-10); color: var(--faint, #6a6a78);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-card-meta {
  display: flex; flex-wrap: wrap; gap: var(--fe-space-sm); margin-top: var(--fe-space-sm);
  font-size: var(--fe-font-11); color: var(--muted, #9a9aab);
}
.file-card-actions { display: flex; flex-wrap: wrap; gap: var(--fe-space-xs-plus); margin-top: var(--fe-space-sm-plus) }
.file-preview-panel {
  margin-top: var(--fe-space-sm); border-top: var(--fe-space-2xs) solid var(--border, #2a2a32);
  padding-top: var(--fe-space-sm);
}
.actor-badge {
  font-size: var(--fe-font-10); border-radius: var(--fe-radius-pill); padding: var(--fe-space-2xs) var(--fe-space-sm);
  border: var(--fe-space-2xs) solid var(--border, #2a2a32); white-space: nowrap;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}
.actor-badge.actor-main { background: rgba(79,158,255,.18); color: var(--fe-accent-soft); }
.actor-badge.actor-agent { background: rgba(179,136,255,.2); color: var(--fe-agent-soft); }
.actor-badge.actor-unk { background: rgba(255,255,255,.06); color: var(--muted, #9a9aab); }
.file-float-tip {
  position: fixed; z-index: 50; width: var(--fe-side-w); max-width: 100%; max-height: 240px;
  overflow: auto; background: var(--fe-bg-panel); border: var(--fe-space-2xs) solid var(--fe-line-strong);
  border-radius: var(--fe-radius-10); padding: var(--fe-space-sm-plus); box-shadow: 0 var(--fe-space-sm) var(--shadow) rgba(0,0,0,.45);
  pointer-events: none;
}
.file-float-tip .tip-head { display: flex; justify-content: space-between; gap: var(--fe-space-sm); margin-bottom: var(--fe-space-xs-plus); font-size: var(--fe-font-12); }
.tip-pre, .file-preview-panel .tip-pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-size: var(--fe-font-11); line-height: var(--fe-lh-tight); color: var(--fe-gray-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.actor-badge.actor-human { background: rgba(95,174,127,.22); color: var(--fe-ok-soft-2); }
.actor-badge.actor-chat { background: rgba(240,180,80,.22); color: var(--fe-gate-soft); }

.file-impact { margin-top: var(--fe-space-sm-lg); padding-top: var(--fe-space-sm-plus); border-top: var(--fe-space-2xs) solid var(--line-soft); }
.file-impact h4 { margin: 0 0 var(--fe-space-xs-plus); font-size: var(--fe-font-11); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.file-impact-list { list-style: none; padding: 0; margin: 0 }
.file-impact-list li { padding: var(--fe-space-xs) 0; font-size: var(--fe-font-12); border-bottom: var(--fe-space-2xs) dashed var(--line-soft); }
.file-impact-list code { color: var(--accent); }


/* ── Stage inspector (Detail focus panel) ─────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: var(--fe-space-xs) }
.chip .chip-glyph { font-size: var(--fe-font-10); font-weight: var(--fe-fw-700); opacity: .9; }
.chip-outcome {
  color: var(--fg);
  border: var(--fe-space-2xs) solid transparent;
  background: var(--bg-soft);
}
.chip-outcome.out-ok { background: var(--ok-dim); color: var(--ok); border-color: rgba(61,214,140,.35); }
.chip-outcome.out-warn { background: var(--warn-dim); color: var(--warn); border-color: rgba(226,179,64,.35); }
.chip-outcome.out-bad { background: var(--danger-dim); color: var(--danger); border-color: rgba(240,113,120,.4); }
.chip-outcome.out-muted { background: var(--bg-soft); color: var(--faint); border-color: var(--line); }
.chip-outcome.out-path { background: var(--path-dim); color: var(--path); border-color: rgba(255,215,0,.35); }

.stage-strip {
  margin: 0 0 var(--fe-space-sm-lg);
  padding: var(--fe-space-sm-plus) var(--fe-space-sm-plus) var(--fe-space-sm);
  border-radius: var(--radius);
  border: var(--fe-space-2xs) solid var(--line);
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-soft) 100%);
  border-left: var(--fe-space-2xs) solid var(--accent);
}
.stage-strip.out-ok { border-left-color: var(--ok); }
.stage-strip.out-warn { border-left-color: var(--warn); }
.stage-strip.out-bad { border-left-color: var(--danger); }
.stage-strip.out-muted { border-left-color: var(--faint); }
.stage-strip-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fe-space-xs) var(--fe-space-xs-plus); margin-bottom: var(--fe-space-xs-plus);
}
.stage-pos {
  font-size: var(--fe-font-10); font-weight: var(--fe-fw-700); letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); margin-right: var(--fe-space-xs);
}
.stage-event {
  font-size: var(--fe-font-10); color: var(--muted); font-family: var(--mono);
  padding: var(--fe-space-2xs) var(--fe-space-xs-plus); border-radius: var(--fe-radius-4); background: var(--bg);
  border: var(--fe-space-2xs) solid var(--line-soft);
}
.stage-title-line {
  margin: 0 0 var(--fe-space-xs-plus); font-size: var(--fe-font-14); font-weight: var(--fe-fw-650); color: var(--fg); line-height: var(--fe-lh-1-3);
}
.stage-story {
  font-size: var(--fe-font-12); color: var(--muted); margin: 0 0 var(--fe-space-sm); line-height: var(--fe-lh-body);
}
.stage-story .sk {
  display: block; font-size: var(--fe-font-10); font-weight: var(--fe-fw-700); text-transform: uppercase;
  letter-spacing: .05em; color: var(--faint); margin-top: var(--fe-space-xs-plus); margin-bottom: var(--fe-space-2xs);
}
.stage-story .sk:first-child { margin-top: 0 }
.stage-metrics {
  display: flex; flex-wrap: wrap; gap: var(--fe-space-xs-plus); margin: var(--fe-space-sm) 0 var(--fe-space-xs);
}
.stage-metric {
  display: flex; flex-direction: column; min-width: 52px;
  padding: var(--fe-space-xs-plus) var(--fe-space-sm); border-radius: var(--radius-sm);
  background: var(--bg); border: var(--fe-space-2xs) solid var(--line-soft);
}
.stage-metric .sm-k {
  font-size: var(--fe-font-9); font-weight: var(--fe-fw-700); text-transform: uppercase; letter-spacing: .04em; color: var(--faint);
}
.stage-metric .sm-v {
  font-size: var(--fe-font-13); font-weight: var(--fe-fw-650); font-family: var(--mono); color: var(--fg); margin-top: var(--fe-space-2xs);
}
.stage-metric.m-in .sm-v { color: var(--metric-in); }
.stage-metric.m-out .sm-v { color: var(--metric-out); }
.stage-metric.m-time .sm-v { color: var(--metric-time); }
.stage-metric.m-file .sm-v { color: var(--metric-file); }
.stage-timing {
  display: flex; flex-wrap: wrap; gap: var(--fe-space-sm); font-size: var(--fe-font-11); color: var(--faint);
  font-family: var(--mono); margin: var(--fe-space-xs) 0 var(--fe-space-xs-plus);
}
.stage-section { margin-top: var(--fe-space-sm) }
.stage-sec-h {
  font-size: var(--fe-font-10); font-weight: var(--fe-fw-700); text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); margin-bottom: var(--fe-space-xs);
}
.stage-file-list { list-style: none; padding: 0; margin: 0 }
.stage-file-list li { padding: var(--fe-space-2xs) 0 }
.stage-rel-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fe-space-xs); margin-top: var(--fe-space-xs);
}
.stage-rel-lab {
  font-size: var(--fe-font-10); font-weight: var(--fe-fw-700); text-transform: uppercase; letter-spacing: .04em;
  color: var(--faint); min-width: 4.5em; margin-right: var(--fe-space-2xs);
}
.stage-nav {
  display: flex; flex-wrap: wrap; gap: var(--fe-space-xs-plus); margin-top: var(--fe-space-sm-plus); padding-top: var(--fe-space-sm);
  border-top: var(--fe-space-2xs) solid var(--line-soft);
}
.stage-no-metrics { margin: var(--fe-space-xs-plus) 0; font-size: var(--fe-font-11); }

/* Path play toolbar */
.path-play-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fe-space-xs-plus);
  margin: 0 0 var(--fe-space-sm-plus); padding: var(--fe-space-xs-plus) 0;
  border-bottom: var(--fe-space-2xs) solid var(--line-soft);
}
.path-play-bar select {
  min-height: var(--shadow); background: var(--bg); border: var(--fe-space-2xs) solid var(--line);
  border-radius: var(--radius-sm); color: var(--fg); padding: var(--fe-space-2xs) var(--fe-space-xs-plus); font-size: var(--fe-font-11);
}
.walk .step {
  border-left: var(--fe-space-2xs) solid var(--line-soft);
  padding: var(--fe-space-sm) var(--fe-space-sm) var(--fe-space-sm) var(--fe-space-sm-plus);
  margin-bottom: var(--fe-space-xs-plus);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(255,255,255,.02);
}
.walk .step.active {
  border-left-color: var(--accent);
  background: var(--accent-dim);
}
.walk .step .step-what { display: block; font-size: var(--fe-font-11); color: var(--muted); margin-top: var(--fe-space-2xs); line-height: var(--fe-lh-tight); }

#panel-help #help-hits { list-style: none; padding: 0; margin: 0 }
#panel-help #help-hits li { margin-bottom: var(--fe-space-xs-plus) }
#panel-help .help-topic { width: 100%; }
#help-tour-steps ol { line-height: var(--fe-lh-body); }

/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1368] Process chain + data-flow + decision link chrome */
.process-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fe-space-xs);
  margin: 0 0 var(--fe-space-sm-plus);
  padding: var(--fe-space-sm);
  background: var(--bg-soft);
  border: var(--fe-space-2xs) solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.process-chain .pc-step {
  display: inline-flex;
  align-items: center;
  gap: var(--fe-space-xs-plus);
  max-width: 11rem;
  padding: var(--fe-space-xs) var(--fe-space-sm);
  font-size: var(--fe-font-11);
  line-height: var(--fe-lh-1-25);
  color: var(--fg);
  background: var(--bg-elev);
  border: var(--fe-space-2xs) solid var(--line);
  border-radius: var(--fe-radius-pill);
  cursor: pointer;
  text-align: left;
}
.process-chain .pc-step:hover { border-color: var(--accent); color: var(--accent); }
.process-chain .pc-step.current {
  border-color: var(--path);
  background: var(--path-dim);
  font-weight: var(--fe-fw-600);
}
.process-chain .pc-dot {
  width: var(--pc-space-chip-h, 7px);
  height: var(--pc-space-chip-h, 7px);
  border-radius: 50%;
  flex: 0 0 auto;
}
.process-chain .pc-sep {
  color: var(--faint);
  font-size: var(--fe-font-11);
  user-select: none;
}
.link-kind {
  display: inline-block;
  font-size: var(--fe-font-10);
  font-weight: var(--fe-fw-600);
  letter-spacing: .02em;
  color: var(--lk, var(--muted));
  min-width: 4.5rem;
}
.link-group-head {
  margin: var(--fe-space-sm) 0 var(--fe-space-2xs);
  font-size: var(--fe-font-10);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: baseline;
  gap: var(--fe-space-xs-plus);
}
.link-group-head[data-group="data"] .link-kind { color: var(--file); }
.link-group-head[data-group="decision"] .link-kind { color: var(--gate); }
.link-group-head[data-group="process"] .link-kind { color: var(--accent); }
.link-list .link-row,
button.link-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fe-space-xs) var(--fe-space-xs-plus);
  width: 100%;
  text-align: left;
}
.link-arrow { color: var(--faint); font-size: var(--fe-font-11); }
.link-lab { color: var(--fg); }
.decision-list .link-kind { color: var(--gate); }
.data-flow-list .link-kind { color: var(--file); }
.scenario-intro {
  margin: 0 0 var(--fe-space-sm-plus);
  padding: var(--fe-space-sm-plus) var(--fe-space-sm-lg);
  background: var(--accent-dim);
  border: var(--fe-space-2xs) solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fe-font-13);
}
.story-walk {
  margin: 0 0 var(--fe-space-sm-plus);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--fe-space-xs-plus);
}
.story-walk li { margin: 0 }
.story-walk .ghost-btn {
  padding: var(--fe-space-sm) var(--fe-space-sm-plus);
  border: var(--fe-space-2xs) solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.story-walk .ghost-btn:hover { border-color: var(--accent); }
.step-links {
  margin-top: var(--fe-space-2xs);
  font-size: var(--fe-font-10);
  color: var(--file) !important;
}
@media (width < 721px) {
  .process-chain .pc-step { max-width: 8.5rem; font-size: var(--fe-font-10); }
  .link-kind { min-width: 3.2rem; }
}

/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1400] First-run orientation + empty graph */
.orient-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fe-space-0-35rem) 0.75rem;
  align-items: baseline;
  padding: var(--fe-space-0-45rem) 0.9rem;
  border-bottom: var(--fe-space-2xs) solid var(--line-soft, rgba(255,255,255,0.08));
  background: var(--bg-soft, rgba(80,120,200,0.08));
  font-size: var(--fe-font-12-5);
  line-height: var(--fe-lh-body);
  color: var(--muted, #aab);
}
.orient-banner strong { color: var(--fg, #e8e8e8); }
.orient-banner em { font-style: normal; color: var(--accent, #7cb7ff); font-weight: var(--fe-fw-600); }
.empty-graph {
  position: absolute;
  inset: 12% 10% auto;
  z-index: 5;
  max-width: 28rem;
  margin: 0 auto;
  left: 0;
  right: 0;
  padding: var(--fe-space-1-1rem) 1.25rem;
  border-radius: var(--fe-radius-10);
  border: var(--fe-space-2xs) solid var(--line, #333);
  background: var(--bg, #1a1b1e);
  box-shadow: 0 var(--fe-space-sm) var(--shadow) rgba(0,0,0,0.35);
  text-align: left;
}
.empty-graph p { margin: var(--fe-space-0-4rem) 0 0.75rem; font-size: var(--fe-font-13); color: var(--muted, #aab); line-height: var(--fe-lh-body); }
@media (width < 721px) {
  .orient-banner { font-size: var(--fe-font-12); padding: var(--fe-space-0-4rem) 0.65rem }
}


/* linked-datasets v1401 — denser related/dataset drill UI */
.link-group-head {
  margin-top: var(--fe-space-sm);
  font-size: var(--fe-font-11);
  letter-spacing: 0.02em;
}
.related-list { margin: var(--fe-space-xs) 0 var(--fe-space-sm); padding-left: 0; list-style: none; }
.related-list li { margin: var(--fe-space-2xs) 0 }
.diff-view .empty { color: var(--fe-color-muted-alt); font-size: var(--fe-font-11); margin: var(--fe-space-xs-plus) 0 var(--fe-space-2xs); font-weight: var(--fe-fw-600); }
.diff-path { margin-bottom: var(--fe-space-xs) }

/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1402] Collapsed how-to on mobile after dismiss / default compact */
@media (width < 961px) {
  .mobile-how.fe-how-collapsed .mobile-how-body,
  .mobile-how.fe-how-collapsed ol,
  .mobile-how.fe-how-collapsed p {
    display: none !important;
  }
  .mobile-how.fe-how-collapsed {
    padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus);
  }
}

/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1402] Mobile: compress orient/how chrome so map is first */
@media (width < 961px) {
  .orient-banner {
    font-size: var(--fe-font-11);
    padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus);
    max-height: 3.2em;
    overflow: hidden;
  }
  .toolbar2 .ghost-btn:not(#fit):not(#btn-errors):not(#btn-help):not(#btn-tour) {
    /* keep core actions; dense chrome collapses via wrap */
  }
}

/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1403] Stage loader + canvas focus */
.fe-stage-loader {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 14, 18, 0.55);
  color: var(--fg);
  font-size: var(--fe-font-13);
  font-weight: var(--fe-fw-600);
  pointer-events: none;
}
.fe-stage-loader[hidden] { display: none !important; }
#cy:focus-visible {
  outline: var(--fe-space-2xs) solid var(--accent);
  outline-offset: -var(--fe-space-2xs);
}
/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1405] Mobile-first map operability */

/* ═══════════════════════════════════════════════════════════
   [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1405]
   Mobile-first map operability (webview + try-it)
   Goal: sticky chrome ≤ ~20% viewport; graph fills the rest; Detail on demand.
   ═══════════════════════════════════════════════════════════ */
@media (width < 961px) {
  :root {
    --tap: 44px;
    --fe-sticky-h: 52px;
  }

  /* Map-first flex shell — stage owns remaining viewport */
  body.fe-full-viewport .app,
  body.fe-embedded .app,
  body.fe-mobile .app,
  .app {
    display: flex !important;
    flex-direction: column;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    grid-template-rows: none !important;
  }
  body.fe-full-viewport,
  body.fe-embedded,
  body.fe-mobile {
    overflow: hidden !important;
    height: 100dvh !important;
  }

  /* Compact chrome: hide orientation walls that push the map off-screen */
  .orient-banner,
  .timeline,
  .session-meta,
  .toolbar2,
  .topbar .brand p,
  .topbar .integrity-pill,
  .topbar .status,
  .topbar .pill-row[aria-label="How to view it"],
  .start-fab {
    display: none !important;
  }

  .topbar {
    flex: 0 0 auto;
    padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus);
    gap: var(--fe-space-xs-plus);
    border-bottom: 0;
  }
  .topbar .brand h1 {
    font-size: var(--fe-font-13);
  }
  .topbar .pill-row[aria-label="What to show"] .seg button {
    padding: var(--fe-space-xs-plus) var(--fe-space-sm);
    font-size: var(--fe-font-11);
    min-height: var(--tap);
  }
  /* Short mode labels on phone */
  .topbar .pill-row[aria-label="What to show"] .seg button {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-how {
    flex: 0 0 auto;
    padding: var(--fe-space-xs) var(--fe-space-sm-plus) !important;
    font-size: var(--fe-font-11) !important;
  }
  .mobile-how.fe-how-collapsed {
    max-height: 2rem;
    overflow: hidden;
  }
  .mobile-how.fe-how-collapsed strong::after {
    content: " · tap for tips";
    font-weight: var(--fe-fw-500);
    color: var(--faint);
  }

  .mobile-nav {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: var(--fe-z-30);
    display: flex !important;
    flex-wrap: nowrap;
    gap: var(--fe-space-xs-plus);
    align-items: center;
    padding: var(--fe-space-xs-plus) var(--fe-space-sm) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-elev);
    border-bottom: var(--fe-space-2xs) solid var(--line);
    min-height: var(--fe-sticky-h);
  }
  .mobile-nav .field {
    flex: 0 0 auto;
  }
  .mobile-nav select {
    min-height: var(--tap) !important;
    min-width: 5.5rem !important;
    font-size: var(--fe-font-13);
    padding: var(--fe-space-sm) var(--fe-space-sm-plus) !important;
  }
  .mobile-nav .ghost-btn,
  .mobile-nav .primary-btn {
    flex: 0 0 auto;
    min-height: var(--tap) !important;
    min-width: var(--tap);
    padding: var(--fe-space-sm) var(--fe-space-sm-lg) !important;
    font-size: var(--fe-font-13);
    font-weight: var(--fe-fw-600);
  }
  .mobile-nav .primary-btn {
    background: var(--accent-dim);
    border: var(--fe-space-2xs) solid rgba(108, 182, 255, 0.45);
    color: var(--accent);
    border-radius: var(--radius-sm);
  }

  .main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow: hidden !important;
  }

  .rail {
    display: none;
    flex: 0 0 auto;
    max-height: 40vh;
    order: 2;
  }
  .rail.rail-open {
    display: flex;
  }

  .stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    order: 1;
    border-bottom: var(--fe-space-2xs) solid var(--line);
  }
  .stage-bar {
    flex: 0 0 auto;
    padding: var(--fe-space-xs) var(--fe-space-sm);
    gap: var(--fe-space-xs);
  }
  .stage-bar .icon-btn,
  .stage-bar .icon-btn.primary-icon {
    min-height: var(--tap);
    min-width: var(--tap);
    padding: var(--fe-space-xs-plus) var(--fe-space-sm-plus);
    font-size: var(--fe-font-13);
  }
  .orient-strip {
    flex: 0 0 auto;
    padding: var(--fe-space-xs) var(--fe-space-sm);
    font-size: var(--fe-font-11);
  }
  .sel-strip {
    flex: 0 0 auto;
  }
  .canvas-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    position: relative;
    /* One-finger pan on graph; page does not steal vertical scroll from canvas */
    touch-action: none;
  }
  #cy {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    touch-action: none;
  }

  /* Detail is a bottom sheet, collapsed by default (JS adds side-collapsed) */
  .side {
    flex: 0 0 auto !important;
    order: 3;
    min-height: 0 !important;
    height: auto !important;
    max-height: 48vh !important;
    overflow: hidden;
    border-top: var(--fe-space-2xs) solid var(--line);
    background: var(--bg-elev);
  }
  .side.side-collapsed {
    max-height: none !important;
  }
  .side.side-collapsed .side-tabs {
    /* keep tabs visible as a thin pull handle */
    display: flex;
  }
  .side:not(.side-collapsed) {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .side-tabs button {
    min-height: var(--tap);
    padding: var(--fe-space-sm) var(--fe-space-sm-plus);
    font-size: var(--fe-font-12);
  }
  .side-body {
    max-height: calc(48vh - 48px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, var(--fe-space-sm));
  }

  /* Coach: bottom sheet, never center-block the map */
  .coach {
    left: var(--fe-space-sm) !important;
    right: var(--fe-space-sm) !important;
    top: auto !important;
    bottom: var(--fe-space-sm) !important;
    max-width: none !important;
    max-height: 36vh;
    overflow: auto;
    z-index: var(--fe-z-25);
  }
  .coach-inner {
    padding: var(--fe-space-sm-plus) var(--fe-space-sm-lg);
  }
  .coach-inner p {
    font-size: var(--fe-font-12);
    max-height: 4.5em;
    overflow: auto;
    margin: var(--fe-space-xs-plus) 0;
  }
  .coach-actions button {
    min-height: var(--tap);
    padding: var(--fe-space-sm) var(--fe-space-sm-lg);
  }

  /* Stage loader full-bleed */
  .fe-stage-loader {
    font-size: var(--fe-font-14);
  }
}

@media (width < 601px) {
  .mobile-nav {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 4px;
  }
  .mobile-nav .field {
    flex: 1 1 108px;
    min-width: 0;
  }
  .mobile-nav select {
    width: 100%;
    min-width: 0 !important;
  }
  .mobile-nav .ghost-btn,
  .mobile-nav .primary-btn {
    flex: 1 1 auto;
    padding-inline: 9px !important;
  }
  .topbar .pill-row[aria-label="What to show"] .seg button {
    padding: var(--fe-space-xs-plus) var(--fe-space-xs-plus);
    font-size: var(--fe-font-10-5);
    max-width: 6.2rem;
  }
  .mobile-nav .ghost-btn#btn-mobile-help {
    /* keep Start + Fit primary; Help still available */
  }
  .stage-bar #stage-label,
  .stage-bar #stage-meta {
    font-size: var(--fe-font-11);
  }
  /* Even more map */
  .side:not(.side-collapsed) {
    max-height: 42vh !important;
  }
}

@media (width < 381px) {
  .mobile-nav .field label {
    font-size: 0; /* hide "View" text, keep select */;
  }
  .mobile-nav select {
    min-width: 4.8rem !important;
  }
}

/* Safe area for notched phones when full-viewport webview */
body.fe-full-viewport .mobile-nav {
  padding-top: max(var(--fe-space-xs-plus), env(safe-area-inset-top, 0));
}

/* Progressive disclosure: the first screen keeps only agent, search and Fit.
   Analysis controls remain available without competing with the core flow. */
.advanced-tools {
  position: relative;
  align-self: center;
}
.advanced-tools > summary {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  list-style: none;
}
.advanced-tools > summary::-webkit-details-marker { display: none; }
.advanced-tools > summary::after { content: " ▾"; margin-left: 6px; }
.advanced-tools[open] > summary::after { content: " ▴"; }
.advanced-tools-body {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  width: min(720px, calc(100vw - 24px));
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 12px 34px rgba(0,0,0,.34);
}

.prompt-card {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}
.prompt-card-current { border-color: color-mix(in srgb, var(--accent) 52%, var(--border)); }
.immutable-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}
.prompt-editor label { display: block; margin: 8px 0 5px; color: var(--muted); font-size: 11px; }
.prompt-editor textarea {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font: 12px/1.5 var(--mono, monospace);
}
.prompt-manager-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.prompt-manager-head select,
#prompt-manager-text {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}
.prompt-manager-head select { min-height: 36px; padding: 6px 8px; }
#prompt-manager > label { display: block; margin: 12px 0 6px; color: var(--muted); }
#prompt-manager-text {
  min-height: 280px;
  resize: vertical;
  padding: 10px;
  font: 12px/1.5 var(--mono, monospace);
}

@media (max-width: 600px) {
  .advanced-tools { display: none; }
  .prompt-card { margin-inline: 0; padding: 10px; }
  .prompt-editor textarea { min-height: 260px; font-size: 16px; }
}
body.fe-full-viewport .side-body {
  padding-bottom: max(var(--fe-space-sm-lg), env(safe-area-inset-bottom, var(--fe-space-sm)));
}

/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1405] v2 — smaller sticky chrome */
@media (width < 961px) {
  .topbar {
    display: none !important; /* modes live in mobile-nav via JS clone if needed */;
  }
  .mobile-how {
    display: none !important; /* optional tips — open via Help */;
  }
  .canvas-wrap {
    display: flex !important;
    flex-direction: column !important;
  }
  .side.side-collapsed {
    flex: 0 0 auto !important;
    max-height: 56px !important;
    min-height: 48px !important;
    overflow: hidden !important;
  }
  .side.side-collapsed .side-tabs {
    min-height: 48px;
  }
  .side.side-collapsed .side-body,
  .side.side-collapsed #panel-detail,
  .side.side-collapsed #panel-evidence,
  .side.side-collapsed #panel-walk,
  .side.side-collapsed #panel-search,
  .side.side-collapsed #panel-help {
    display: none !important;
  }
  /* When detail open, cap height so map keeps ≥45vh */
  .side:not(.side-collapsed) {
    flex: 0 0 auto !important;
    max-height: min(42vh, 360px) !important;
  }
  .stage {
    flex: 1 1 0 !important;
    min-height: 45vh !important;
  }
}


/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1510] Complete field dump at zoom-in */
.kv-all-fields {
  max-height: 40vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.kv-all-fields code.fe-json-field {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 10px;
  line-height: 1.35;
  max-height: 8em;
  overflow: auto;
}
@media (max-width: 720px) {
  /* Stop browser/page pinch fighting the graph canvas */
  .canvas-wrap, #cy {
    touch-action: none;
    overscroll-behavior: contain;
  }
  .side {
    overscroll-behavior: contain;
  }
}


/* [host:grok-cli:0.2.106][brain:xai:grok-4.5][via:direct:xai][hurc:v0.12.1512] Scope legend: hurc / native / session */
.scope-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border, #333);
  background: var(--panel, transparent);
}
.scope-legend .scope-chip {
  cursor: pointer;
  min-height: 28px;
}
.scope-legend .sm-status {
  outline: 1px solid var(--accent, #6cf);
}

/* Context-unaware review closure: preserve purpose and inspector reachability on phones. */
.mobile-purpose { display: none; }
@media (max-width: 600px) {
  .mobile-purpose {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 10px 6px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--fe-bg-deep);
    color: var(--muted);
    font-size: 11px;
  }
  .mobile-purpose strong { color: var(--fg); font-size: 13px; white-space: nowrap; }
  .mobile-purpose span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .side-tabs {
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .side-tabs button {
    flex: 0 0 auto;
    min-width: max-content;
    scroll-snap-align: start;
  }
  .stage-bar #btn-jump-start { display: none; }
  .outline-list ul { padding-left: 8px; }
  .outline-item { grid-template-columns: auto auto minmax(0, 1fr); padding-inline: 5px; }
  .outline-item .kind { display: none; }
  .prompt-manager-head { grid-template-columns: 1fr; gap: 5px; }
  #prompt-manager-text { min-height: 240px; font-size: 16px; }
}
@media (max-width: 720px) {
  .scope-legend {
    position: sticky;
    top: 0;
    z-index: 8;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .scope-legend .scope-chip {
    flex: 0 0 auto;
    font-size: 11px;
  }
}