/* StockYield technical documentation. Built on tokens.css: black canvas, lime
   accent, mono labels. Diagrams are inline SVG using the .dg-* vocabulary so
   every figure across the set reads as one system. Print-safe. */

:root {
  --docs-max: 72rem;
  --docs-measure: 44rem;
  --docs-nav: 15rem;
}

* { box-sizing: border-box; }

html { background: var(--color-bg); color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-text); text-decoration-color: var(--color-border-strong); text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-feature-settings: var(--font-feature-numeric);
}

code {
  font-size: 0.875em;
  padding: 0.08em 0.35em;
  border-radius: 0.3em;
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-raised);
  font-size: var(--text-sm);
  line-height: 1.55;
}
pre code { padding: 0; border: 0; background: transparent; color: var(--color-text-secondary); }

/* Shell ------------------------------------------------------------------ */

.docs-shell {
  display: grid;
  grid-template-columns: var(--docs-nav) minmax(0, 1fr);
  gap: var(--space-12);
  max-inline-size: var(--docs-max);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

.docs-nav {
  position: sticky;
  top: var(--space-8);
  align-self: start;
  display: grid;
  gap: var(--space-6);
}

.docs-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}
.docs-brand svg { inline-size: 1.75rem; block-size: 1.75rem; flex: none; }
.docs-brand strong { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: var(--tracking-snug); }
.docs-brand span { display: block; font-family: var(--font-mono); font-size: var(--text-2xs, 0.6875rem); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); }

.docs-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  counter-reset: doc;
}
.docs-nav li { counter-increment: doc; }
.docs-nav ol a {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.docs-nav ol a::before { content: counter(doc, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); }
.docs-nav ol a:hover { color: var(--color-text); background: var(--color-surface); }
.docs-nav ol a[aria-current="page"] { color: var(--color-text); background: var(--color-accent-softer); border-inline-start-color: var(--color-accent); }
.docs-nav ol a[aria-current="page"]::before { color: var(--color-accent); }

.docs-nav-foot { display: grid; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }
.docs-nav-foot a { color: var(--color-text-muted); }

/* Document --------------------------------------------------------------- */

.doc { min-inline-size: 0; }

.doc-head { display: grid; gap: var(--space-3); padding-block-end: var(--space-8); margin-block-end: var(--space-10); border-block-end: 1px solid var(--color-divider); }
.doc-kicker {
  display: block; line-height: 1.6;
  margin: 0;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent);
}
.doc-kicker .status { color: var(--color-text-muted); }
.doc-kicker .status { white-space: nowrap; }
.doc-kicker .status::before { content: "·"; margin-inline: var(--space-3); color: var(--color-text-subtle); }
.doc h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.doc-lede { margin: 0; max-inline-size: var(--docs-measure); font-size: var(--text-lg); color: var(--color-text-secondary); }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); }
.doc-meta b { font-weight: 500; color: var(--color-text-muted); }

.doc section + section { margin-block-start: var(--space-12); }
.doc h2 {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-4);
  margin: 0 0 var(--space-4);
  font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); line-height: var(--leading-tight);
}
.doc h2 .n { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 400; color: var(--color-accent); letter-spacing: var(--tracking-wide); }
.doc h2::after { content: ""; grid-column: 2; display: none; }
.doc h3 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-snug); }
.doc p, .doc ul, .doc ol { max-inline-size: var(--docs-measure); margin: 0 0 var(--space-4); color: var(--color-text-secondary); }
.doc ul, .doc ol { padding-inline-start: 1.25rem; }
.doc li { margin-block-end: var(--space-1); }
.doc li::marker { color: var(--color-accent); }
.doc strong { color: var(--color-text); font-weight: 600; }

/* Callouts */
.note {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  max-inline-size: var(--docs-measure);
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border); border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-card);
  background: var(--color-bg-raised);
  font-size: var(--text-sm);
}
.note > b { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); padding-block-start: 0.2em; }
.note--warn { border-inline-start-color: var(--color-warning); }
.note--warn > b { color: var(--color-warning); }
.note p:last-child { margin: 0; }

/* Definition tables */
.kv, .tbl { inline-size: 100%; border-collapse: collapse; margin: var(--space-4) 0 var(--space-6); font-size: var(--text-sm); }
.kv th, .kv td, .tbl th, .tbl td { padding: var(--space-3) var(--space-3); border-block-end: 1px solid var(--color-divider); vertical-align: top; text-align: start; }
.kv th { inline-size: 14rem; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.tbl thead th { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); border-block-end-color: var(--color-border-strong); }
.tbl td { color: var(--color-text-secondary); }
.tbl td:first-child, .kv td:first-child { color: var(--color-text); }
.tbl .num { text-align: end; font-family: var(--font-mono); font-feature-settings: var(--font-feature-numeric); }
.tag { display: inline-block; padding: 0.1em 0.5em; border-radius: 999px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); }
.tag--live { color: var(--color-accent); border-color: var(--color-border-accent); background: var(--color-accent-softer); }
.tag--model { color: var(--color-warning); border-color: var(--color-warning-border); background: var(--color-warning-soft); }

/* Figures ---------------------------------------------------------------- */

.fig {
  margin: var(--space-6) 0 var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-raised);
  overflow: hidden;
}
.fig > svg { display: block; inline-size: 100%; block-size: auto; }
.fig figcaption {
  display: block;
  padding: var(--space-3) var(--space-5);
  border-block-start: 1px solid var(--color-divider);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.fig figcaption b { margin-inline-end: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent); font-weight: 500; }
.fig figcaption code { font-size: 0.85em; }

/* Diagram vocabulary (inline SVG). Fonts are set here so figures inherit brand type. */
.dg { font-family: var(--font-mono); font-size: 11px; }
.dg text { fill: var(--color-text-secondary); }
.dg .t-title { fill: var(--color-text); font-size: 12px; font-weight: 600; }
.dg .t-muted { fill: var(--color-text-subtle); }
.dg .t-accent { fill: var(--color-accent); }
.dg .t-caps { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--color-text-subtle); }
.dg .t-num { font-size: 14px; fill: var(--color-text); font-weight: 600; }
.dg .box { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1; rx: 6; }
.dg .box-accent { fill: var(--color-accent-softer); stroke: var(--color-border-accent); stroke-width: 1; rx: 6; }
.dg .box-ghost { fill: none; stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 3; rx: 6; }
.dg .box-warn { fill: var(--color-warning-soft); stroke: var(--color-warning-border); stroke-width: 1; rx: 6; }
.dg .lane { fill: none; stroke: var(--color-divider); stroke-width: 1; }
.dg .edge { fill: none; stroke: var(--color-border-strong); stroke-width: 1.25; }
.dg .edge-accent { fill: none; stroke: var(--color-accent); stroke-width: 1.5; }
.dg .edge-dashed { fill: none; stroke: var(--color-text-subtle); stroke-width: 1; stroke-dasharray: 4 3; }
.dg .node { fill: var(--color-accent); }
.dg .node-ghost { fill: var(--color-bg-raised); stroke: var(--color-border-strong); stroke-width: 1.25; }
.dg .bar { fill: var(--color-accent); }
.dg .bar-muted { fill: var(--color-text-subtle); }
.dg .bar-soft { fill: var(--color-accent-soft); }
.dg .axis { stroke: var(--color-border-strong); stroke-width: 1; }
.dg .grid { stroke: var(--color-divider); stroke-width: 1; }
.dg .pill { fill: var(--color-bg); stroke: var(--color-border-strong); stroke-width: 1; rx: 9; }

/* Doc index cards (overview page) */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; }
.doc-card { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-panel, var(--color-bg-raised)); text-decoration: none; color: var(--color-text); }
.doc-card:hover { border-color: var(--color-border-accent); color: var(--color-text); }
.doc-card .n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); letter-spacing: var(--tracking-wide); }
.doc-card strong { font-size: var(--text-lg); letter-spacing: var(--tracking-snug); }
.doc-card span { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Prev / next */
.doc-foot { display: flex; justify-content: space-between; gap: var(--space-4); margin-block-start: var(--space-16); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-divider); font-size: var(--text-sm); }
.doc-foot a { display: grid; gap: 2px; text-decoration: none; color: var(--color-text-muted); }
.doc-foot a b { color: var(--color-text); font-weight: 600; }
.doc-foot a:last-child { text-align: end; }
.doc-foot a:hover b { color: var(--color-accent); }

/* Responsive / print */
@media (max-width: 56rem) {
  .docs-shell { grid-template-columns: 1fr; gap: var(--space-8); padding-inline: var(--space-4); }
  .docs-nav { position: static; }
  .docs-nav ol { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
  .kv th { inline-size: 7rem; }
  /* Tables scroll sideways inside the document instead of widening the page. */
  .kv, .tbl { display: block; max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { white-space: nowrap; }
  .tbl td:not(.num) { white-space: normal; min-inline-size: 10rem; }
  .kv td { overflow-wrap: anywhere; }
  .doc code { overflow-wrap: anywhere; }
  .doc h1 { font-size: 1.75rem; }
}

@media print {
  html, body { background: #fff; color: #111; }
  .docs-nav, .doc-foot { display: none; }
  .docs-shell { display: block; max-inline-size: none; padding: 0; }
  .fig { break-inside: avoid; }
}

/* Flow dots (added by flow.js): a particle per edge, travelling in the edge's drawn direction. */
.dg .flow-dot { fill: var(--color-text); opacity: 0.9; }
.dg .flow-dot--accent { fill: var(--color-accent); filter: drop-shadow(0 0 3px rgb(201 242 75 / 0.7)); }
.dg .flow-dot--dashed { fill: var(--color-text-muted); opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .dg .flow-dot { display: none; } }