/* coldstart docs — dark design system, tokens matched to the home (styles.css)
   frost = navigation/index, ember = notebook/memory */

:root {
  --bg: #070a11;
  --surface: #0f1826;
  --surface-2: #0b111c;
  --ink: #e7eef8;
  --muted: #8b9ab2;
  --frost: #4fbfe0;
  --frost-bright: #6fd3ef;
  --ember: #ef9448;
  --ember-bright: #ffb267;
  --line: #1a2536;
  --line-warm: #2a2218;
  --term-bg: #05080e;
  --term-ink: #c3d0e2;
  --ok: #57cc92;
  --ok-bg: #10241a;
  --warn: #ef9448;
  --warn-bg: #2a1e0c;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1080px;
  --nav-wrap: 1080px;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
a { color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0; }
code { font-family: var(--mono); }

.thread {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--frost) 0%, var(--frost) 30%, var(--ember) 100%);
  opacity: .7;
}

/* ---- NAV (shared; --nav-wrap lets docs.html run a wider bar) ---- */
nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 20px; height: 60px; max-width: var(--nav-wrap); margin: 0 auto; padding: 0 24px; }
.brand { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .dot { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ember-bright), var(--frost)); box-shadow: 0 0 10px color-mix(in srgb, var(--frost) 50%, transparent); }
.brand .mark { flex: none; }
.mark { fill: none; }
.fl { stroke-width: 2.1; stroke-linecap: round; }
.s2 .fl { stroke: url(#warm); }
.core { stroke: none; }
.brand .tag { font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.nav-spacer { flex: 1; }
.nav-links { display: flex; gap: 22px; font-size: 14px; font-family: var(--mono); }
.nav-links a { color: var(--muted); text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { font-family: var(--mono); font-size: 13px; text-decoration: none; padding: 7px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); transition: border-color .15s, background .15s; }
.nav-cta:hover { border-color: var(--frost); background: color-mix(in srgb, var(--frost) 10%, transparent); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---- TERMINAL (docs command blocks) ---- */
.term {
  margin-top: 52px; background: var(--term-bg); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.term-bar .tl { width: 11px; height: 11px; border-radius: 50%; }
.term-bar .tl:nth-child(1) { background: #ff5f57; }
.term-bar .tl:nth-child(2) { background: #febc2e; }
.term-bar .tl:nth-child(3) { background: #28c840; }
.term-bar .title { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: #5d6b83; }
.term-body { padding: 20px 22px 26px; font-family: var(--mono); font-size: 13.5px; line-height: 1.75; color: var(--term-ink); overflow-x: auto; }
.term-body .ln { white-space: pre; }
.c-prompt { color: #4fd18b; }
.c-cmd { color: #eef3fb; }
.c-flag { color: #ffb267; }
.c-dim { color: #5d6b83; }
.c-frost { color: #6fd3ef; }
.c-ember { color: #ffb267; }
.c-file { color: #c3d0e2; }
.c-hit { color: #4fd18b; }
.term-body .gap { display: block; height: 10px; }

/* docs.html uses smaller inline terminals — scope a compact variant */
.doc-sec .term { margin-top: 18px; box-shadow: none; }
.doc-sec .term-bar { padding: 10px 14px; }
.doc-sec .term-bar .tl { width: 10px; height: 10px; }
.doc-sec .term-bar .title { margin-left: 8px; font-size: 11.5px; }
.doc-sec .term-body { padding: 16px 18px; font-size: 13px; line-height: 1.7; }
.doc-sec .term-body .gap { height: 9px; }

/* ---- LANGS ---- */
.langs { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { font-family: var(--mono); font-size: 12.5px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-2); }
.chip.hot { color: var(--frost); border-color: color-mix(in srgb, var(--frost) 40%, var(--line)); }
.doc-sec .langs { margin-top: 20px; gap: 8px; }

/* ---- pills (freshness) ---- */
.pill { font-family: var(--mono); font-size: 11px; padding: 3px 9px 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; vertical-align: middle; }
.pill .d { width: 7px; height: 7px; border-radius: 50%; }
.pill.fresh { background: rgba(87,204,146,.14); color: var(--ok); }
.pill.fresh .d { background: var(--ok); }
.pill.changed { background: rgba(239,148,72,.14); color: var(--ember); }
.pill.changed .d { background: var(--ember); }

/* ---- FLOW / ARCHITECTURE DIAGRAM ---- */
.diagram { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 30px; overflow-x: auto; }
.diagram svg { display: block; width: 100%; height: auto; min-width: 540px; }
.d-box { fill: var(--surface-2); stroke: var(--line); }
.d-frost { fill: none; stroke: var(--frost); }
.d-ember { fill: none; stroke: var(--ember); }
.d-label { fill: var(--ink); font-family: var(--mono); font-size: 15px; font-weight: 700; }
.d-sub { fill: var(--muted); font-family: var(--sans); font-size: 12.5px; }
.d-cmd { fill: var(--frost); font-family: var(--mono); font-size: 13px; }
.d-arrow { stroke: var(--muted); stroke-width: 1.6; fill: none; }
.d-arrowhead { fill: var(--muted); }
.d-note { fill: var(--ember); font-family: var(--mono); font-size: 12px; }
.doc-sec .diagram { padding: 24px; margin-top: 20px; }
.doc-sec .diagram svg { min-width: 540px; }
.doc-sec .d-label { font-size: 14px; }
.doc-sec .d-sub, .doc-sec .d-cmd { font-size: 12px; }

/* ---- FRESHNESS / feature cards ---- */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .fgrid { grid-template-columns: 1fr; } }
.fcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--surface); }
.fcard .fnum { font-family: var(--mono); font-size: 12px; color: var(--frost); letter-spacing: .1em; }
.fcard h4 { font-family: var(--mono); font-size: 16px; margin: 10px 0 8px; letter-spacing: -.01em; }
.fcard p { font-size: 14.5px; color: var(--muted); }
.doc-sec .fgrid { gap: 16px; margin-top: 20px; }
.doc-sec .fcard { padding: 20px; }
.doc-sec .fcard .fnum { font-size: 11.5px; }
.doc-sec .fcard h4 { font-size: 15px; margin: 9px 0 7px; }
.doc-sec .fcard p { font-size: 14px; }

/* ---- FOOTER (shared; --nav-wrap controls width) ---- */
footer { border-top: 1px solid var(--line); padding: 48px 0; }
.foot-in { max-width: var(--nav-wrap); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.foot-links { display: flex; gap: 22px; font-family: var(--mono); font-size: 13.5px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.foot-brand { font-family: var(--mono); color: var(--muted); font-size: 13.5px; }

/* =========================================================
   DOCS PAGE — sidebar + reference layout
   ========================================================= */
body.docs-page { --nav-wrap: 1200px; }

.docs { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 236px 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .docs { grid-template-columns: 1fr; gap: 0; } }

.side { position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; padding: 34px 0 60px; }
@media (max-width: 860px) { .side { position: static; max-height: none; border-bottom: 1px solid var(--line); padding: 20px 0; } }
.side-group { margin-bottom: 26px; }
.side-group .gh { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: .8; margin-bottom: 10px; padding-left: 12px; }
.side a { display: block; font-size: 14px; color: var(--muted); text-decoration: none; padding: 5px 12px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; transition: color .12s, border-color .12s, background .12s; }
.side a code { font-family: var(--mono); font-size: 13px; }
.side a:hover { color: var(--ink); background: color-mix(in srgb, var(--frost) 8%, transparent); }
.side a.active { color: var(--frost); border-left-color: var(--frost); background: color-mix(in srgb, var(--frost) 10%, transparent); }

.content { min-width: 0; padding: 40px 0 100px; max-width: 760px; }
.doc-sec { scroll-margin-top: 78px; padding-top: 26px; margin-top: 26px; }
.doc-sec:first-child { margin-top: 0; padding-top: 8px; }
.grp-head { border-top: 1px solid var(--line); padding-top: 40px; margin-top: 52px; }
.grp-head:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--frost); margin-bottom: 12px; }
.content h1 { font-family: var(--mono); font-size: clamp(30px, 5vw, 40px); letter-spacing: -.035em; line-height: 1.05; }
.content h2 { font-family: var(--mono); font-size: clamp(21px, 3vw, 26px); letter-spacing: -.02em; }
.content > p, .doc-sec > p, .prose p { color: var(--muted); font-size: 16px; margin-top: 14px; }
.prose p + p { margin-top: 12px; }
.lead-p { font-size: 18px !important; color: var(--muted); margin-top: 18px; }
.content b, .prose b { color: var(--ink); font-weight: 600; }
.content em { color: var(--ink); font-style: italic; }
p code, li code, .prose code { font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); }

.cmd { margin-top: 8px; }
.cmd .name { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cmd .name .c { color: var(--frost); }
.cmd .name.warm .c { color: var(--ember); }
.cmd .name .badge { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; align-self: center; }
.cmd .sig { font-family: var(--mono); font-size: 14px; color: var(--muted); margin-top: 8px; }
.cmd .desc { margin-top: 12px; color: var(--muted); font-size: 15.5px; }
.cmd .desc b { color: var(--ink); }

.flags { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.flag-row { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.flag-row:first-child { border-top: 0; }
.flag-row .fk { font-family: var(--mono); font-size: 12.5px; color: var(--frost); }
.flag-row .fv { color: var(--muted); }
.flag-row .fv b { color: var(--ink); }
@media (max-width: 560px) { .flag-row { grid-template-columns: 1fr; gap: 4px; } }

.callout { margin-top: 20px; border: 1px solid var(--line); border-left: 3px solid var(--frost); background: var(--surface-2); border-radius: 8px; padding: 14px 18px; font-size: 14.5px; color: var(--muted); }
.callout.warm { border-left-color: var(--ember); }
.callout b { color: var(--ink); }
.callout .ct { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--frost); display: block; margin-bottom: 6px; }
.callout.warm .ct { color: var(--ember); }

.types { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 20px; }
@media (max-width: 680px) { .types { grid-template-columns: 1fr; } }
.tcard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px; }
.tcard .tt { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.tcard.file .tt { color: var(--ember); } .tcard.flow .tt { color: var(--frost); } .tcard.lesson .tt { color: var(--ink); }
.tcard p { font-size: 13.5px; color: var(--muted); margin-top: 7px; }

ul.tight { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: 15px; }
ul.tight li { margin-top: 8px; }
ul.tight li b { color: var(--ink); }

.subhead { font-family: var(--mono); margin-top: 30px; font-size: 15px; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto !important; } }
:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; border-radius: 4px; }