/* Frontier LLMs, From the Inside — shared stylesheet
   Color tokens are fixed across the book: Q = accent, K = accent-2, V = accent-3,
   gradients = warn, forward activations = accent. See bible/bible.md §5. */

:root {
  --paper: #fbf7f0;
  --paper-2: #f3ede2;
  --ink: #1f1b16;
  --ink-2: #4a433b;
  --muted: #8a8177;
  --rule: #d9d1c3;
  --accent: #1f6fd1;     /* Q, forward activations */
  --accent-2: #e0812b;   /* K */
  --accent-3: #2c9a63;   /* V */
  --warn: #d0413b;       /* gradients, loss, surprise */
  --gold: #b8860b;
  --code-bg: #f1ece3;
  --block-bg: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(40,30,10,.06);
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --measure: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171512;
    --paper-2: #1f1c18;
    --ink: #ece6da;
    --ink-2: #c9c1b3;
    --muted: #8d857a;
    --rule: #37322b;
    --accent: #6ea4ee;
    --accent-2: #f0a052;
    --accent-3: #55c48a;
    --warn: #ef6f68;
    --gold: #d9a441;
    --code-bg: #211e19;
    --block-bg: #1d1a16;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --paper: #171512; --paper-2: #1f1c18; --ink: #ece6da; --ink-2: #c9c1b3; --muted: #8d857a;
  --rule: #37322b; --accent: #6ea4ee; --accent-2: #f0a052; --accent-3: #55c48a; --warn: #ef6f68;
  --gold: #d9a441; --code-bg: #211e19; --block-bg: #1d1a16;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Layout */
.page { max-width: var(--measure); margin: 0 auto; padding: 2rem 16px 6rem; }
.wide { max-width: 64rem; margin-left: auto; margin-right: auto; }
header.chapter-head { margin: 1rem 0 3rem; }
header.chapter-head .kicker {
  font-family: var(--font-ui); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
header.chapter-head h1 { font-size: 2.6rem; line-height: 1.1; margin: .3rem 0 .6rem; letter-spacing: -.01em; }
header.chapter-head .sub { font-size: 1.2rem; color: var(--ink-2); margin: 0; }
nav.topnav { font-family: var(--font-ui); font-size: .85rem; display: flex; gap: 1rem; color: var(--muted); }
nav.topnav a { color: var(--muted); text-decoration: none; }
nav.topnav a:hover { color: var(--accent); }

h2 { font-size: 1.8rem; margin: 3rem 0 1rem; line-height: 1.2; letter-spacing: -.01em; }
h3 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
h2 .num { color: var(--muted); font-weight: 400; margin-right: .5rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--accent); }
strong { font-weight: 650; }
em { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: .4rem; }
small, .small { font-size: .9rem; }
.muted { color: var(--muted); }

/* Code */
code, kbd, samp { font-family: var(--font-mono); font-size: .88em; }
p code, li code, td code { background: var(--code-bg); padding: .08em .35em; border-radius: 4px; }
pre {
  background: var(--code-bg); border: 1px solid var(--rule); border-radius: 8px;
  padding: 1rem 1.1rem; overflow-x: auto; font-size: .85rem; line-height: 1.5; margin: 0 0 1rem;
  font-family: var(--font-mono);
}
pre code { background: none; padding: 0; font-size: inherit; }
pre.out { background: var(--paper-2); border-style: dashed; color: var(--ink-2); white-space: pre-wrap; }
pre.out::before { content: "output"; display: block; font-family: var(--font-ui); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
pre.ascii { font-size: .8rem; line-height: 1.3; }
.c-kw { color: var(--accent); } .c-str { color: var(--accent-3); } .c-cm { color: var(--muted); font-style: italic; }
.c-num { color: var(--accent-2); }

/* Tables */
table { border-collapse: collapse; width: 100%; margin: 0 0 1.4rem; font-size: .95rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-size: .9rem; }
table.compact td, table.compact th { padding: .3rem .5rem; }

/* Named blocks (bible §2) */
.block {
  background: var(--block-bg); border: 1px solid var(--rule); border-radius: 12px;
  padding: 1.2rem 1.4rem 1rem; margin: 1.8rem 0; box-shadow: var(--shadow);
  position: relative;
}
.block > .label {
  display: inline-block; font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--paper);
  background: var(--ink); padding: .25em .7em; border-radius: 999px; margin: -1.9rem 0 .8rem;
  position: relative;
}
.block > .label.picture { background: var(--accent); }
.block > .label.map { background: var(--accent-3); }
.block > .label.byhand { background: var(--gold); }
.block > .label.breakit { background: var(--warn); }
.block > .label.rebuild { background: var(--ink); }
.block > .label.math { background: var(--ink-2); }
.block > .label.exercise { background: var(--accent-2); }
.block > .label.where { background: var(--muted); }
.block > .label.further { background: var(--muted); }
.block > :last-child { margin-bottom: 0; }
.block p:last-child { margin-bottom: 0; }

/* Claim markers (bible §2) */
.claim { font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .1em .45em; border-radius: 4px; vertical-align: middle; margin-left: .3em; }
.claim.public { background: color-mix(in srgb, var(--accent-3) 18%, transparent); color: var(--accent-3); }
.claim.inferred { background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2); }
.claim.unknown { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }

/* Asides */
.aside {
  border-left: 3px solid var(--rule); padding: .2rem 0 .2rem 1rem; margin: 1.2rem 0; color: var(--ink-2);
  font-size: 1rem;
}
.aside.joke { border-color: var(--gold); }

/* Figures */
figure { margin: 2rem 0; }
figure svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
figcaption {
  font-family: var(--font-ui); font-size: .85rem; color: var(--ink-2); margin-top: .7rem; line-height: 1.45;
}
figcaption .q { font-weight: 700; color: var(--ink); }
figure.static { display: none; }

/* SVG helpers */
svg text { font-family: var(--font-ui); fill: var(--ink); }
svg .mono { font-family: var(--font-mono); }
svg .muted { fill: var(--muted); }
svg .box { fill: var(--block-bg); stroke: var(--ink-2); stroke-width: 1.2; }
svg .box.soft { stroke: var(--rule); }
svg .edge { stroke: var(--ink-2); stroke-width: 1.4; fill: none; }
svg .edge.acc { stroke: var(--accent); }
svg .edge.warn { stroke: var(--warn); }
svg .tok { fill: var(--paper-2); stroke: var(--rule); }
svg .bar { fill: var(--accent); }
svg .bar.dim { fill: var(--rule); }
svg .bar.warn { fill: var(--warn); }

/* Widgets */
.widget {
  background: var(--block-bg); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.2rem;
  margin: 1.6rem 0; font-family: var(--font-ui); font-size: .92rem; box-shadow: var(--shadow);
}
.widget .title { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; }
.widget .row { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin: .5rem 0; }
.widget label { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink-2); }
.widget input[type=range] { width: 160px; accent-color: var(--accent); }
.widget button {
  font-family: var(--font-ui); font-size: .88rem; padding: .4em .9em; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--ink-2); background: var(--ink); color: var(--paper);
}
.widget button.secondary { background: transparent; color: var(--ink); }
.widget button:hover { filter: brightness(1.1); }
.widget .val { font-family: var(--font-mono); font-size: .85rem; min-width: 3.5em; display: inline-block; }
.widget .note { color: var(--muted); font-size: .82rem; margin-top: .6rem; }
.widget svg { max-width: 100%; height: auto; display: block; }
.widget .stream { font-family: var(--font-mono); font-size: 1rem; line-height: 1.8; min-height: 2.2em;
  padding: .4rem .6rem; background: var(--code-bg); border-radius: 8px; }
.widget .stream .t { display: inline-block; padding: 0 .3em; margin: 0 .1em; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); }
.widget .stream .t.new { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.widget .stream .cursor { color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Animations (respect reduced motion) */
.flow { stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flow, .pulse, .cursor { animation: none !important; } }

/* Chapter nav */
footer.chapter-foot { margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: .9rem; }

/* Print */
@media print {
  :root { --paper: #fff; --ink: #000; --block-bg: #fff; --shadow: none; }
  body { font-size: 11pt; }
  .page { max-width: none; padding: 0; }
  .widget { display: none; }
  figure.static { display: block; }
  nav.topnav, footer.chapter-foot { display: none; }
  .block { break-inside: avoid; }
  pre { white-space: pre-wrap; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- Navigation sidebars (assets/nav.js) ---------- */
:root { --measure: 50rem; --toc-w: 250px; }
.toc-book, .toc-page {
  position: fixed; top: 0; bottom: 0; overflow-y: auto; padding: 1.4rem 1rem 3rem;
  font-family: var(--font-ui); font-size: .84rem; line-height: 1.45; background: var(--paper);
  scrollbar-width: thin;
}
.toc-book { left: 0; width: var(--toc-w); border-right: 1px solid var(--rule); }
.toc-page { right: 0; width: var(--toc-w); border-left: 1px solid var(--rule); }
.toc-book ul, .toc-page ul { list-style: none; padding: 0; margin: 0 0 .8rem; }
.toc-book li, .toc-page li { margin: 0; }
.toc-book a, .toc-page a, .toc-book .todo {
  display: block; padding: .28rem .55rem; border-radius: 6px; color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent;
}
.toc-book a:hover, .toc-page a:hover { background: var(--paper-2); color: var(--ink); }
.toc-book a.active, .toc-page a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-left-color: var(--accent); font-weight: 600; }
.toc-book .todo { color: var(--muted); cursor: default; }
.toc-book .toc-title { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 1rem; padding-left: .55rem; }
.toc-part { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: .9rem 0 .35rem .55rem; }
.toc-page li.sub a { padding-left: 1.4rem; font-size: .8rem; }
.toc-toggle { display: none; position: fixed; left: 12px; bottom: 12px; z-index: 20; font-size: 1.2rem; padding: .35em .6em;
  border-radius: 10px; border: 1px solid var(--rule); background: var(--block-bg); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; }

/* Wide: both sidebars. Medium: left only. Narrow: hidden, toggle shows left as a drawer. */
body.has-nav .page { margin-left: auto; margin-right: auto; }
@media (min-width: 1360px) {
  body.has-nav .page { max-width: var(--measure); margin-left: calc(var(--toc-w) + (100vw - 2 * var(--toc-w) - var(--measure)) / 2); }
}
@media (min-width: 1040px) and (max-width: 1359.98px) {
  .toc-page { display: none; }
  body.has-nav .page { margin-left: calc(var(--toc-w) + (100vw - var(--toc-w) - var(--measure)) / 2); }
}
@media (max-width: 1039.98px) {
  .toc-page { display: none; }
  .toc-book { transform: translateX(-100%); transition: transform .2s ease; z-index: 10; box-shadow: var(--shadow); }
  body.toc-open .toc-book { transform: none; }
  .toc-toggle { display: block; }
}
@media print { .toc-book, .toc-page, .toc-toggle { display: none !important; } body.has-nav .page { margin: 0; } }