/* PrismCore docs — monospace-grid aesthetic (after the-monospace-web), in the
   kinogaki green palette. Single centered reading column, character grid, rules,
   bordered box callouts. Mobile-first by construction. */
:root {
  --bg: #627f64;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --faint: rgba(255, 255, 255, 0.24);
  --rule: rgba(255, 255, 255, 0.42);
  --code-bg: #1b231c;
  --accent: #ffffff;
  --line-height: 1.35rem;
  --font: "JetBrains Mono", ui-monospace, Menlo, Monaco, "Cascadia Mono",
    "Roboto Mono", "Source Code Pro", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--line-height);
  font-weight: 500;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}
.page {
  max-width: min(82ch, 100%);
  margin: 0 auto;
  padding: calc(var(--line-height) * 2) 2ch calc(var(--line-height) * 4);
}
img, svg { max-width: 100%; }

/* masthead */
.topbar {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 0.85; margin-bottom: calc(var(--line-height) * 2);
}
.topbar a { color: var(--text); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .right a { margin-left: 2ch; }

h1 {
  font-size: 2rem; line-height: calc(2 * var(--line-height));
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  margin: 0;
}
.tagline { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; }
.lead { font-size: 1.05rem; margin: var(--line-height) 0; }

hr, .rule-double {
  border: none; border-top: 3px double var(--rule);
  margin: var(--line-height) 0;
}

/* contents index */
.index {
  border: 1px solid var(--faint); padding: var(--line-height) 2ch;
  margin: calc(var(--line-height) * 2) 0;
}
.index .label { text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; font-size: 0.75rem; margin: 0 0 var(--line-height); }
.index ol { list-style: none; counter-reset: item; margin: 0; padding: 0; columns: 2; column-gap: 3ch; }
.index li { counter-increment: item; break-inside: avoid; }
.index li::before { content: counter(item, decimal-leading-zero) "  "; opacity: 0.45; }
.index a { color: var(--text); text-decoration: none; }
.index a:hover { text-decoration: underline; }

/* sections */
.kicker { display: none; }
h2 {
  font-size: 1rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em;
  margin: calc(var(--line-height) * 2.5) 0 var(--line-height);
  padding-top: var(--line-height); border-top: 1px solid var(--faint);
}
h2::before { content: "## "; opacity: 0.4; }
h3 { font-size: 1rem; text-transform: uppercase; font-weight: 600; letter-spacing: 0.04em; margin: calc(var(--line-height) * 1.5) 0 var(--line-height); }
p { margin: var(--line-height) 0; }
strong { font-weight: 800; }
em { font-style: italic; }

main a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
main a:hover { opacity: 0.8; }

/* lists with monospace dash markers */
main ul { list-style: none; padding-left: 2ch; margin: var(--line-height) 0; }
main ul li { position: relative; margin: calc(var(--line-height) / 2) 0; }
main ul li::before { content: "–"; position: absolute; left: -2ch; opacity: 0.55; }

/* definition lists */
.deflist { margin: var(--line-height) 0; }
.deflist dt { font-weight: 800; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; margin-top: var(--line-height); }
.deflist dd { margin: 0 0 0 2ch; color: var(--muted); }

/* code */
code { background: rgba(0, 0, 0, 0.22); padding: 0 0.5ch; border-radius: 2px; font-size: 0.95em; }
pre {
  background: var(--code-bg); border: 1px solid var(--faint);
  padding: var(--line-height) 2ch; overflow-x: auto;
  margin: var(--line-height) 0; font-size: 0.82rem; line-height: 1.55;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* bordered box callout */
.note { border: 1px solid var(--faint); padding: var(--line-height) 2ch; margin: calc(var(--line-height) * 1.5) 0; }

/* svg diagram — wireframe on green */
.diagram-svg { margin: calc(var(--line-height) * 1.5) 0; text-align: center; border: 1px solid var(--faint); padding: var(--line-height) 1ch; }
.diagram-svg figcaption { color: var(--muted); font-size: 0.8rem; margin-top: calc(var(--line-height) / 2); }
.d-box { fill: rgba(255, 255, 255, 0.05); stroke: #fff; stroke-width: 1.2; }
.d-box-accent { fill: rgba(255, 255, 255, 0.18); stroke: #fff; stroke-width: 1.6; }
.d-title { fill: #fff; font-weight: 700; }
.d-muted { fill: rgba(255, 255, 255, 0.72); }
.d-flow { fill: none; stroke: #fff; }
.d-dot { fill: #fff; }

/* doc nav + footer */
.docnav { display: flex; justify-content: space-between; gap: 2ch; margin-top: calc(var(--line-height) * 3); padding-top: var(--line-height); border-top: 3px double var(--rule); }
.docnav a { color: var(--text); text-decoration: underline; }
.footer { text-align: center; margin-top: calc(var(--line-height) * 2); color: var(--muted); font-size: 0.8rem; }

@media (max-width: 480px) {
  html { font-size: 14px; }
  .page { padding: var(--line-height) 1ch calc(var(--line-height) * 3); }
  .index ol { columns: 1; }
  h1 { font-size: 1.7rem; }
}