/* Undercurrent Analytics — documentation styles.
   Design tokens mirror the inlined <style> in public/index.html so docs are
   visually identical to the marketing site. Docs are multi-page, so this is a
   single linked, cacheable stylesheet rather than per-page inlined CSS. */

*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#070a12; --bg-2:#0a0f1c;
  --surface:rgba(255,255,255,.025); --surface-2:rgba(255,255,255,.045);
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  --text:#e8eef6; --muted:#9aa7bd; --muted-2:#697892;
  --accent:#2dd4bf; --accent-2:#38bdf8; --accent-3:#818cf8;
  --grad:linear-gradient(110deg,#2dd4bf 0%,#38bdf8 46%,#818cf8 100%);
  --radius:16px; --maxw:1120px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* code token colours (match index.html .code-* classes) */
  --code-comment:#5b6b85; --code-key:#7dd3fc; --code-fn:#c4b5fd; --code-str:#6ee7b7; --code-num:#fca5a5;
}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}

/* ---- nav (copied from index.html) ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:600;font-size:.98rem;cursor:pointer;border:0;
  padding:.7rem 1.15rem;border-radius:11px;white-space:nowrap;text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary{background:var(--grad);color:#04151b;box-shadow:0 6px 20px -8px rgba(56,189,248,.6)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 10px 26px -8px rgba(56,189,248,.7)}
header.nav{position:sticky;top:0;z-index:50;
  background:rgba(7,10,18,.72);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.02em;text-decoration:none}
.brand img{width:28px;height:28px;display:block}
.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a.link{color:var(--muted);font-size:.95rem;text-decoration:none;transition:color .15s}
.nav-links a.link:hover{color:var(--text)}
.nav-links a.link-active{color:var(--text)}
@media(max-width:680px){.nav-links a.link{display:none}}

/* ---- docs layout ---- */
.docs-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:3rem;
  padding-top:2.6rem;padding-bottom:4rem;align-items:start}
@media(max-width:860px){.docs-layout{grid-template-columns:1fr;gap:1.4rem}}

/* ---- sidebar ---- */
.docs-sidebar{position:sticky;top:88px}
@media(max-width:860px){.docs-sidebar{position:static;top:auto;
  border-bottom:1px solid var(--border);padding-bottom:1rem}}
.docs-sidebar-title{font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:.9rem}
.docs-nav{display:flex;flex-direction:column;gap:.15rem}
.docs-nav a{display:block;padding:.42rem .7rem;border-radius:9px;
  color:var(--muted);font-size:.95rem;text-decoration:none;
  border-left:2px solid transparent;transition:color .15s, background .15s}
.docs-nav a:hover{color:var(--text);background:var(--surface)}
.docs-nav a.active{color:var(--text);background:var(--surface-2);
  border-left-color:var(--accent)}

/* ---- rendered markdown ---- */
.doc{min-width:0}
.doc article > *:first-child{margin-top:0}
.doc h1,.doc h2,.doc h3,.doc h4{line-height:1.2;letter-spacing:-.02em;
  font-weight:800;margin:2.2rem 0 .9rem}
.doc h1{font-size:clamp(2rem,4.4vw,2.7rem);margin-top:0}
.doc h2{font-size:1.65rem;padding-top:.6rem;border-top:1px solid var(--border)}
.doc h3{font-size:1.25rem}
.doc h4{font-size:1.05rem}
.doc p{margin:0 0 1.05rem;color:var(--text)}
.doc a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{color:var(--accent)}
.doc strong{color:var(--text);font-weight:700}
.doc ul,.doc ol{margin:0 0 1.05rem;padding-left:1.4rem;color:var(--text)}
.doc li{margin:.35rem 0}
.doc li::marker{color:var(--muted-2)}
.doc hr{border:0;border-top:1px solid var(--border);margin:2.4rem 0}
.doc img{max-width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid var(--border);margin:1.4rem 0}

/* inline + block code */
.doc code{font-family:var(--mono);font-size:.88em;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:6px;padding:.12em .4em;color:#cdd9ea}
.doc pre{margin:0 0 1.3rem;padding:1.1rem 1.15rem;overflow-x:auto;
  background:var(--bg-2);border:1px solid var(--border);border-radius:14px;
  font-family:var(--mono);font-size:.86rem;line-height:1.65;color:#cdd9ea}
.doc pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}

/* callouts: blockquotes (e.g. > **Note:** ...) */
.doc blockquote{margin:0 0 1.3rem;padding:.9rem 1.15rem;
  background:linear-gradient(140deg,rgba(45,212,191,.07),rgba(129,140,248,.07));
  border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:11px;color:var(--muted)}
.doc blockquote p{margin:0}
.doc blockquote p + p{margin-top:.6rem}
.doc blockquote strong{color:var(--accent)}

/* tables */
.doc table{width:100%;border-collapse:collapse;margin:0 0 1.4rem;font-size:.95rem}
.doc th,.doc td{text-align:left;padding:.6rem .85rem;border:1px solid var(--border);
  vertical-align:top}
.doc thead th{background:var(--surface-2);color:var(--text);font-weight:600}
.doc tbody tr:nth-child(even){background:var(--surface)}
.doc td{color:var(--muted)}

/* ---- "Copy prompt for coding harness" button ---- */
.doc .copy-prompt{margin:1.5rem 0}
.copy-prompt-btn{gap:.55rem;font-size:1rem;padding:.8rem 1.3rem}
.copy-prompt-btn svg{flex:0 0 auto;width:18px;height:18px}
.copy-prompt-btn.copied{filter:brightness(1.06)}
.copy-prompt-source{display:none}

.doc-back{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--border)}
.doc-back a{color:var(--muted);text-decoration:none;font-size:.92rem}
.doc-back a:hover{color:var(--accent-2)}