/* ============================================================================
   vr-output.css — universal agent-output renderer styles.
   Used by assets/vr-output.js (window.VROutput). Light by default;
   add .vr-dark on the root for dark surfaces (playground preview).
   Tokens follow the site system: accent #1570f0, Inter text, JetBrains Mono.
   ========================================================================== */

.vr-root{
  --vr-acc:var(--accent); --vr-acc-soft:var(--accent-tint);
  --vr-txt:var(--text); --vr-mut:var(--text-3); --vr-bg:#ffffff; --vr-bg2:var(--bg-2);
  --vr-line:#e5e5ea; --vr-mint:#0a8f5b; --vr-mint-soft:#e7f6ef;
  --vr-amber:#b45309; --vr-amber-soft:#fdf1e0; --vr-rose:#c0392b;
  --vr-code-bg:#0e1117; --vr-code-txt:#dce3f0; --vr-code-line:#262d3d;
  font:14px/1.6 Inter,-apple-system,'Segoe UI',sans-serif;
  color:var(--vr-txt); max-width:860px; margin:0 auto; text-align:left;
}
.vr-root.vr-dark{
  --vr-txt:#e8edf7; --vr-mut:#8b97b1; --vr-bg:#161d2e; --vr-bg2:#111623;
  --vr-line:#2a3550; --vr-acc-soft:rgba(96,165,250,.14);
  --vr-mint:#34d399; --vr-mint-soft:rgba(52,211,153,.12);
  --vr-amber:#fbbf24; --vr-amber-soft:rgba(251,191,36,.12);
}
.vr-root *{box-sizing:border-box;margin:0;padding:0}

/* ---------- document header ---------- */
.vr-head{padding:4px 2px 14px}
.vr-title{font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1.25}
.vr-intro{color:var(--vr-mut);font-size:14px;margin-top:8px;max-width:70ch}
.vr-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--vr-acc);background:var(--vr-acc-soft);
  padding:3px 10px;border-radius:11px;margin-bottom:8px}

/* ---------- section cards ---------- */
.vr-sec{background:var(--vr-bg);border:1px solid var(--vr-line);border-radius:14px;
  padding:16px 18px;margin:12px 0}
.vr-sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.vr-sec-n{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--vr-acc);
  background:var(--vr-acc-soft);border-radius:9px;padding:2px 9px}
.vr-sec-t{font-size:15.5px;font-weight:650;letter-spacing:-.2px}
.vr-p{color:var(--vr-txt);font-size:13.5px;margin:6px 0;max-width:75ch}
.vr-p + .vr-p{margin-top:8px}

/* ---------- key/value + stats ---------- */
.vr-kv{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:4px 16px;margin:8px 0}
.vr-kv dt{color:var(--vr-mut);font-size:12px;font-weight:600;padding-top:2px;text-transform:capitalize}
.vr-kv dd{font-size:13.5px}
.vr-stats{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.vr-stat{background:var(--vr-bg2);border:1px solid var(--vr-line);border-radius:12px;
  padding:10px 16px;min-width:110px}
.vr-stat b{display:block;font-size:19px;letter-spacing:-.4px}
.vr-stat span{color:var(--vr-mut);font-size:12px;text-transform:capitalize}

/* ---------- chips ---------- */
.vr-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.vr-chip{font-size:12px;background:var(--vr-bg2);border:1px solid var(--vr-line);
  border-radius:14px;padding:4px 12px;color:var(--vr-txt)}

/* ---------- tables ---------- */
.vr-tbl-wrap{overflow-x:auto;margin:10px 0;border:1px solid var(--vr-line);border-radius:12px}
.vr-tbl{width:100%;border-collapse:collapse;font-size:13px}
.vr-tbl th{background:var(--vr-bg2);color:var(--vr-mut);font-size:12px;
  text-transform:capitalize;letter-spacing:.6px;text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--vr-line);white-space:nowrap}
.vr-tbl td{padding:9px 12px;border-bottom:1px solid var(--vr-line);vertical-align:top}
.vr-tbl tr:last-child td{border-bottom:0}
.vr-tbl td.vr-num{font-variant-numeric:tabular-nums;text-align:right}

/* ---------- charts (pure SVG/CSS, data-driven) ---------- */
.vr-chart{margin:12px 0}
.vr-chart-t{font-size:12px;font-weight:650;color:var(--vr-mut);margin-bottom:8px;text-transform:capitalize}
.vr-brow{display:grid;grid-template-columns:minmax(90px,180px) 1fr max-content;
  gap:10px;align-items:center;margin:5px 0;font-size:12.5px}
.vr-brow .vr-blab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--vr-txt)}
.vr-btrack{height:10px;border-radius:5px;background:var(--vr-bg2);overflow:hidden}
.vr-bfill{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--vr-acc),#5ac8fa);
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.vr-bval{font-variant-numeric:tabular-nums;color:var(--vr-mut);font-size:12px}
.vr-spark{width:100%;height:120px;display:block;margin:6px 0}
.vr-spark path{fill:none;stroke:var(--vr-acc);stroke-width:2}
.vr-spark .vr-area{fill:var(--vr-acc-soft);stroke:none}
.vr-spark .vr-dot{fill:var(--vr-acc)}
.vr-spark text{font:10px Inter,sans-serif;fill:var(--vr-mut)}

/* ---------- code box (the standard) ---------- */
.vr-code{border-radius:12px;overflow:hidden;margin:12px 0;border:1px solid var(--vr-code-line)}
.vr-code-h{display:flex;align-items:center;gap:10px;background:#161b26;
  padding:7px 12px;border-bottom:1px solid var(--vr-code-line)}
.vr-code-lang{font:600 11px 'JetBrains Mono',ui-monospace,monospace;color:#8b97b1;
  text-transform:lowercase;letter-spacing:.5px}
.vr-code-meta{font-size:12px;color:#5b667a}
.vr-copy{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:1px solid var(--vr-code-line);border-radius:8px;
  color:#8b97b1;font:600 11px Inter,sans-serif;padding:4px 10px;cursor:pointer;
  transition:color .15s,border-color .15s}
.vr-copy:hover{color:#dce3f0;border-color:#3d4a66}
.vr-copy.vr-done{color:#34d399;border-color:#34d399}
.vr-copy svg{width:13px;height:13px}
.vr-code pre{background:var(--vr-code-bg);padding:14px 16px;overflow-x:auto;max-height:480px}
.vr-code code{font:12.5px/1.65 'JetBrains Mono',ui-monospace,monospace;color:var(--vr-code-txt);
  white-space:pre;display:block}
/* lightweight, tokenizer-built highlight spans (safe: textContent only) */
.vr-tk-str{color:#9ece6a} .vr-tk-num{color:#ff9e64} .vr-tk-kw{color:#7aa2f7}
.vr-tk-com{color:#565f89;font-style:italic} .vr-tk-key{color:#7dcfff}

/* ---------- markdown bits ---------- */
.vr-md h1,.vr-md h2,.vr-md h3{letter-spacing:-.3px;margin:14px 0 6px}
.vr-md h1{font-size:20px}.vr-md h2{font-size:17px}.vr-md h3{font-size:14.5px}
.vr-md ul,.vr-md ol{padding-left:22px;margin:6px 0}
.vr-md li{margin:3px 0;font-size:13.5px}
.vr-md blockquote{border-left:3px solid var(--vr-acc);padding:4px 12px;margin:8px 0;
  color:var(--vr-mut);background:var(--vr-acc-soft);border-radius:0 8px 8px 0}
.vr-md hr{border:0;border-top:1px solid var(--vr-line);margin:14px 0}
.vr-md a{color:var(--vr-acc);text-decoration:none}
.vr-md a:hover{text-decoration:underline}
.vr-inline-code{font:12px 'JetBrains Mono',ui-monospace,monospace;background:var(--vr-bg2);
  border:1px solid var(--vr-line);border-radius:5px;padding:1px 5px}

/* ---------- images (agent output figures) ---------- */
.vr-fig{margin:12px 0}
.vr-img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;
  border-radius:12px;border:1px solid var(--vr-line);background:var(--vr-bg2)}
.vr-fig figcaption{font-size:12px;color:var(--vr-mut);margin-top:6px;text-transform:capitalize}
.vr-hero-fig{margin:4px 0 16px}
.vr-hero-fig .vr-img{max-height:280px;object-fit:cover}
.vr-hero-fig figcaption{text-transform:none}

/* ---------- collapsible raw JSON fallback ---------- */
.vr-raw{margin:10px 0}
.vr-raw summary{cursor:pointer;font-size:12px;color:var(--vr-mut);padding:6px 0}
.vr-raw pre{font:11.5px/1.6 'JetBrains Mono',monospace;background:var(--vr-bg2);
  border:1px solid var(--vr-line);border-radius:10px;padding:12px;overflow-x:auto;max-height:300px}

/* ---------- states ---------- */
.vr-stream{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--vr-mut);margin:6px 0}
.vr-stream i{width:7px;height:7px;border-radius:50%;background:var(--vr-acc);
  animation:vrPulse 1s ease-in-out infinite}
@keyframes vrPulse{50%{opacity:.25;transform:scale(.8)}}
.vr-error{border:1px solid var(--vr-rose);background:rgba(192,57,43,.08);
  border-radius:12px;padding:12px 16px;font-size:13px}

@media (max-width:560px){
  .vr-root{font-size:13px}
  .vr-brow{grid-template-columns:minmax(70px,110px) 1fr max-content}
  .vr-kv{grid-template-columns:1fr}
  .vr-kv dt{padding-top:8px}
}