/* Agent Bridge v1 -- Spider page. Matches the dashboard's dark palette. */
:root { --bg:#0d1117; --panel:#161b22; --line:#30363d; --fg:#e6edf3; --muted:#8b949e; --accent:#58a6ff; --err:#f85149; --ok:#3fb950; }
* { box-sizing:border-box; }
body.spider { margin:0; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui, sans-serif; }
.spider header { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line); }
.spider header h1 { font-size:18px; margin:0; }
.spider header h1 span { color:var(--accent); }
.spider header a { color:var(--accent); }
#spider-status { color:var(--muted); margin-left:auto; }
#spider-status.bad { color:var(--err); }
.spider-grid { display:grid; grid-template-columns:280px 1fr 380px; gap:12px; padding:12px; }
.spider section { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 12px; min-width:0; }
.spider h2, .spider h3 { font-size:14px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.spider ul { list-style:none; margin:0; padding:0; }
.spider li { display:flex; gap:6px; align-items:center; padding:3px 0; flex-wrap:wrap; }
.spider li > span { overflow-wrap:anywhere; }
.spider button { background:#21262d; color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:3px 8px; cursor:pointer; }
.spider .spider-live-overlay-link { display:inline-block; background:#112a35; color:#19e6ff; border:1px solid #19e6ff; border-radius:6px; padding:3px 8px; text-decoration:none; }
.spider button:disabled { opacity:.45; cursor:default; }
.spider button.selected { border-color:var(--accent); color:var(--accent); }
.spider input, .spider select, .spider textarea { background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:4px 6px; width:100%; }
.spider input[type=checkbox] { width:auto; }
.spider label { display:block; margin:4px 0; }
.spider dl { display:grid; grid-template-columns:max-content 1fr; gap:2px 10px; margin:0 0 8px; }
.spider dt { color:var(--muted); }
.spider dd { margin:0; overflow-wrap:anywhere; }
.spider .muted { color:var(--muted); }
.spider .row { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.spider .evidence pre { white-space:pre-wrap; max-height:220px; overflow:auto; background:var(--bg); padding:6px; border-radius:6px; }
.spider .music-card { border:1px solid var(--line); border-radius:6px; padding:6px 8px; margin:6px 0; }
.spider .music-card h4 { margin:0 0 4px; }
.spider .provenance dd { color:var(--ok); }
.spider #spider-overlay-history { margin:12px; }
.spider #spider-overlay-history > p { margin:4px 0 10px; }
.spider .spider-run-card { display:block; padding:9px 10px; margin:6px 0; border:1px solid var(--line); border-radius:7px; }
.spider .spider-run-card > p { margin:3px 0; overflow-wrap:anywhere; }
.spider .spider-run-card details { margin-top:6px; }
.spider .spider-run-card details p { margin:5px 0 0; padding-left:8px; border-left:2px solid var(--accent); overflow-wrap:anywhere; }
.spider .spider-run-totals { display:block; margin:6px 0 10px; color:var(--ok); }
#spider-replay-canvas { width:100%; max-width:340px; aspect-ratio:9 / 16; display:block; margin:6px auto; background:#0b0f14; border-radius:8px; }
#spider-evidence { max-height:420px; overflow:auto; }
@media (max-width:1100px) { .spider-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .spider * { transition:none !important; animation:none !important; } }

/* ---- Showcase overlay: dedicated 9:16 replay ------------------------------
 * Built only from .spider-show-* classes.  The normal-app arena pieces below
 * stay hidden and inactive while the overlay is open, so a showcase screenshot
 * can never pick them up. */
body.spider-showcase-open { overflow:hidden; }
body.spider-showcase-open .spider-canvas-wrap,
body.spider-showcase-open .spider-mech,
body.spider-showcase-open .spider-empty,
body.spider-showcase-open .spider-arena-readout,
.spider .spider-show-stage .spider-canvas-wrap,
.spider .spider-show-stage .spider-mech,
.spider .spider-show-stage .spider-empty,
.spider .spider-show-stage .spider-arena-readout { display:none !important; }
.spider .spider-show-overlay[hidden] { display:none; }
.spider .spider-show-overlay { position:fixed; inset:0; z-index:50; background:#05080c; color:#e6edf3; display:grid; place-items:center; overflow:auto; }
.spider .spider-show-layout { display:flex; gap:16px; align-items:center; justify-content:center; padding:12px; max-width:100%; }
.spider .spider-show-stage-wrap { flex:0 0 auto; }
.spider .spider-show-stage {
  --w:min(calc(92vh * 9 / 16), 92vw); --p:0; --mp:0;
  width:var(--w); aspect-ratio:9 / 16; display:flex; flex-direction:column; gap:calc(var(--w) / 50);
  padding:calc(var(--w) / 25); overflow:hidden; border-radius:12px; border:1px solid #1e2b39;
  font-size:calc(var(--w) / 30); line-height:1.3;
  background:radial-gradient(120% 70% at 50% 0%, #10202f 0%, #070b10 70%);
}
.spider .spider-show-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.spider .spider-show-brand { font:700 calc(var(--w) / 22) ui-monospace, monospace; letter-spacing:.14em; color:#22d3ee; }
.spider .spider-show-badge { border:1px solid rgba(52,211,153,.4); border-radius:4px; padding:2px 7px; color:#34d399; font:700 calc(var(--w) / 42) ui-monospace, monospace; }
.spider .spider-show-caption { min-height:calc(var(--w) * .26); }
.spider .spider-show-headline { margin:0; font-size:calc(var(--w) / 15); line-height:1.12; color:#f1f5f9; text-transform:none; letter-spacing:0; }
.spider .spider-show-stage[data-stage="hook"] .spider-show-headline { font-size:calc(var(--w) / 11.5); color:#facc15; }
.spider .spider-show-sub { margin:calc(var(--w) / 60) 0 0; color:#9fb0c0; }
.spider .spider-show-panel { flex:1 1 0; min-height:0; display:flex; flex-direction:column; gap:calc(var(--w) / 70); border:1px solid #223244; border-radius:10px; padding:calc(var(--w) / 40); background:rgba(8,14,21,.78); opacity:.38; transition:opacity .4s ease, border-color .4s ease; }
.spider .spider-show-panel h3 { margin:0; font-size:calc(var(--w) / 36); }
.spider .spider-show-stage[data-stage="hook"] .spider-show-panel,
.spider .spider-show-stage[data-stage="result"] .spider-show-panel,
.spider .spider-show-stage[data-stage="static"] .spider-show-panel,
.spider .spider-show-stage[data-stage="crawl"] .spider-show-crawl,
.spider .spider-show-stage[data-stage="music"] .spider-show-music { opacity:1; }
.spider .spider-show-stage[data-stage="crawl"] .spider-show-crawl { border-color:#22d3ee; }
.spider .spider-show-stage[data-stage="music"] .spider-show-music { border-color:#c084fc; }
.spider .spider-show-map { flex:1 1 0; min-height:0; width:100%; }
.spider .spider-show-edge { stroke:#334a5f; stroke-width:1.6; opacity:0; transition:opacity .35s ease; }
.spider .spider-show-edge.is-shown { opacity:.85; }
.spider .spider-show-node { opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .35s ease; fill:#c084fc; }
.spider .spider-show-node.is-shown { opacity:1; animation:spider-show-pulse 2.4s ease-in-out infinite; animation-delay:calc(var(--i, 0) * .3s); }
.spider .spider-show-node.is-root { fill:#22d3ee; }
.spider .spider-show-node.is-fetched { fill:#34d399; }
.spider .spider-show-node.is-failed { fill:#f87171; }
.spider .spider-show-scan { stroke:#22d3ee; stroke-width:2; opacity:.35; animation:spider-show-scan 3s linear infinite; }
.spider .spider-show-ticker { display:flex; justify-content:space-between; gap:8px; align-items:baseline; font-family:ui-monospace, monospace; }
.spider .spider-show-step { color:#22d3ee; }
.spider .spider-show-ticker[data-tone="purple"] .spider-show-step { color:#c084fc; }
.spider .spider-show-ticker[data-tone="green"] .spider-show-step { color:#34d399; }
.spider .spider-show-ticker[data-tone="amber"] .spider-show-step { color:#fbbf24; }
.spider .spider-show-ticker[data-tone="red"] .spider-show-step { color:#f87171; }
.spider .spider-show-step-detail { color:#8b949e; font-size:.85em; text-align:right; }
.spider .spider-show-meter { height:5px; border-radius:3px; background:#17222e; overflow:hidden; }
.spider .spider-show-meter i { display:block; height:100%; width:calc(var(--p) * 100%); background:#22d3ee; }
.spider .spider-show-eq { display:flex; align-items:flex-end; gap:3px; height:calc(var(--w) / 9); }
.spider .spider-show-eq i { flex:1; height:calc(var(--h, 50) * 1%); background:#c084fc; border-radius:2px 2px 0 0; transform-origin:bottom; animation:spider-show-bounce 1.1s ease-in-out infinite alternate; animation-delay:var(--d, 0s); opacity:.85; }
.spider .spider-show-features { margin:0; color:#9fb0c0; font-size:.9em; overflow-wrap:anywhere; }
.spider .spider-show-prov { display:grid; grid-template-columns:1fr; gap:calc(var(--w) / 90); margin:0; }
.spider .spider-show-prov-row { display:flex; justify-content:space-between; align-items:center; gap:8px; border:1px solid #2b3b4c; border-left-width:4px; border-radius:6px; padding:calc(var(--w) / 80) calc(var(--w) / 50); background:#0c141c; }
.spider .spider-show-prov-row.is-analyzer { border-left-color:#22d3ee; }
.spider .spider-show-prov-row.is-acquisition { border-left-color:#fbbf24; }
.spider .spider-show-prov dt { color:#c5d1dd; }
.spider .spider-show-prov dd { margin:0; font:700 1.05em ui-monospace, monospace; color:#34d399; }
.spider .spider-show-prov-row[data-value="yes"] dd { color:#fbbf24; }
.spider .spider-show-prov-row[data-value="unknown"] dd { color:#9fb0c0; }
.spider .spider-show-prov-more { margin:0; color:#8b949e; font-size:.85em; }
.spider .spider-show-chips { display:flex; flex-wrap:wrap; gap:6px; }
.spider .spider-show-chip { border:1px solid #2b3b4c; border-radius:999px; padding:1px 9px; color:#c5d1dd; font:calc(var(--w) / 40) ui-monospace, monospace; }
.spider .spider-show-foot { margin:0; text-align:center; color:#64748b; font-size:.8em; }
.spider .spider-show-controls { width:min(260px, 90vw); display:flex; flex-direction:column; gap:6px; }
.spider .spider-show-controls h2 { margin:0; }
.spider .spider-show-status { min-height:2.8em; margin:0; color:#9fb0c0; }
.spider .spider-show-controls .muted { font-size:12px; margin:4px 0; }
@media (max-width:760px) {
  .spider .spider-show-layout { flex-direction:column; }
  .spider .spider-show-stage { --w:min(calc(70vh * 9 / 16), 92vw); }
}
@keyframes spider-show-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.35); } }
@keyframes spider-show-scan { from { transform:translateY(0); } to { transform:translateY(520px); } }
@keyframes spider-show-bounce { from { transform:scaleY(.45); } to { transform:scaleY(1); } }
/* Pause freezes every running animation in place; resume continues it. */
.spider .spider-show-overlay.is-paused *,
.spider .spider-show-overlay.is-finished * { animation-play-state:paused !important; }
/* Reduced motion: same information, no animation or transitions, all panels at full strength. */
.spider .spider-show-overlay[data-motion="reduced"] *,
.spider .spider-show-overlay[data-motion="reduced"] *::before { animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce) {
  .spider .spider-show-overlay *, .spider-show-overlay *::before { animation:none !important; transition:none !important; }
  .spider .spider-show-scan { display:none; }
  .spider .spider-show-panel { opacity:1; }
  .spider .spider-show-eq i { transform:none; }
}