/* book.css — the reader surface.
 *
 * Inherits the site palette from style.css but deliberately calms it down: the
 * marketing pages run a scanline overlay and three radial gradients, which are fine
 * for a 30-second visit and punishing across a 15,000-word chapter. The reader keeps
 * the colours and drops the texture.
 *
 * Layout is a three-column grid so prose stays at a readable measure while code
 * figures break out wider — with ~5,000 code blocks in the book, the code is not an
 * aside, it is half the content.
 */

.chapter {
  display: grid;
  grid-template-columns:
    1fr
    min(68ch, calc(100% - 32px))
    1fr;
  row-gap: 0;
  padding: 8px 0 120px;
  font-size: 17px;
  line-height: 1.72;
}
.chapter > * {
  grid-column: 2;
  margin: 0 0 1.1em;
}

/* Code, tables and blockquotes break the measure — up to a wider ceiling. */
.chapter > figure.code,
.chapter > .table-wrap,
.chapter > blockquote {
  grid-column: 1 / -1;
  width: min(96ch, calc(100% - 32px));
  justify-self: center;
}

/* ---- prose ------------------------------------------------------------- */

/* h1 stays in the prose column. It must NOT get its own `min(68ch, …)` width: `ch` is
 * relative to the element's own font-size, so at 40px it resolves to roughly twice the
 * body measure and the title hangs ~180px left of the text it introduces. */
.chapter h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin: 18px 0 34px;
}
.chapter h2 {
  font-size: 25px;
  font-weight: 800;
  line-height: 1.25;
  margin: 2.2em 0 0.7em;
  padding-top: 0.3em;
  border-top: 1px solid var(--line);
}
.chapter h3 {
  font-size: 19.5px;
  font-weight: 700;
  margin: 1.9em 0 0.6em;
  color: var(--cyan);
}
.chapter h4 { font-size: 17px; font-weight: 700; margin: 1.6em 0 0.5em; }

.chapter p { color: #ded6f2; }
.chapter strong { color: var(--ink); font-weight: 700; }
.chapter em { color: #efe8ff; }

.chapter a {
  color: var(--cyan);
  text-decoration-color: rgba(47, 243, 255, 0.4);
  text-underline-offset: 3px;
}
.chapter a:hover { text-decoration-color: var(--cyan); }

.chapter ul, .chapter ol { padding-left: 1.4em; }
.chapter li { margin: 0.35em 0; color: #ded6f2; }
.chapter li > p { margin: 0.35em 0; }

.chapter blockquote {
  border-left: 3px solid var(--violet);
  background: rgba(157, 78, 221, 0.09);
  padding: 2px 20px;
  border-radius: 0 8px 8px 0;
  color: var(--muted);
}

.chapter hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

/* Inline code — distinct from block code, and never wrapped in a scroller. */
.chapter :not(pre) > code {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.88em;
  background: rgba(47, 243, 255, 0.09);
  border: 1px solid rgba(47, 243, 255, 0.16);
  color: #b9f6ff;
  padding: 0.1em 0.38em;
  border-radius: 5px;
  overflow-wrap: break-word;
}

/* ---- tables ------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }
.chapter table { border-collapse: collapse; width: 100%; font-size: 15px; }
.chapter th, .chapter td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.chapter th { background: var(--panel); font-weight: 700; }
.chapter tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

/* ---- code figures ------------------------------------------------------ */

figure.code {
  background: #0d0819;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.5em auto 1.8em;
}

.code-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.4;
  padding: 9px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  word-break: break-word;
}

/* The caption vocabulary is a fixed contract (STYLE.md §1), so the accent can carry
 * meaning: cyan = a file you can open, magenta = code that is deliberately wrong and
 * must never be copied out, yellow = compiler output, dashed = an illustration with
 * no file behind it. */
figure.code.kind-source      { border-left: 3px solid var(--cyan); }
figure.code.kind-source .code-cap { color: #9be9f7; }
figure.code.kind-wrong       { border-left: 3px solid var(--magenta); }
figure.code.kind-wrong .code-cap {
  color: #ffb3d8;
  background: rgba(255, 62, 165, 0.12);
}
figure.code.kind-generated   { border-left: 3px solid var(--yellow); }
figure.code.kind-generated .code-cap { color: #ffe58a; }
figure.code.kind-illustration { border-left: 3px dashed var(--violet); }

.code-body {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;          /* the only correct answer for 120-col C++ */
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.55;
  tab-size: 4;
  color: #d8d2ea;
}
.code-body code { font: inherit; background: none; border: 0; padding: 0; }

/* ---- toolbar (copy / download) ----------------------------------------- */

.code-cap-text { min-width: 0; overflow-wrap: anywhere; }

.code-tools { margin-left: auto; display: flex; gap: 6px; flex: none; align-items: center; }
.code-tools button {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: 0.3px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.code-tools button:hover {
  color: var(--ink);
  border-color: rgba(47, 243, 255, 0.5);
  background: rgba(47, 243, 255, 0.08);
}
.code-tools button.ok  { color: var(--green);   border-color: rgba(69, 245, 122, 0.5); }
.code-tools button.bad { color: var(--magenta); border-color: rgba(255, 62, 165, 0.5); }

/* Blocks the chapter marked as deliberately wrong say so instead of offering a copy
 * button — the caption exists to stop readers lifting them out of the book. */
.code-warn {
  font: 700 10.5px/1 var(--sans);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--magenta);
  border: 1px solid rgba(255, 62, 165, 0.35);
  border-radius: 6px;
  padding: 5px 9px;
}

/* ---- preview tier: body withheld --------------------------------------- */

/* The captions stay. A reader on the free tier sees exactly which files the chapter
 * builds and how big each block is — that is a better sales page than a banner, and
 * it is honestly gated because the code was never sent to the browser. */
.code-locked {
  padding: 22px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.022) 0 10px,
      transparent 10px 20px
    );
}
.code-locked::before { content: "🔒  "; }

/* ---- complete listings: loaded on demand -------------------------------- */

.code-stub {
  padding: 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.code-stub:hover { color: var(--ink); background: rgba(47, 243, 255, 0.06); }
.code-stub b { color: var(--cyan); }
.code-stub:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
figure.code.is-loading .code-stub { opacity: 0.5; cursor: progress; }

/* ---- page shell: sidebar + reading column ------------------------------- */

.reader {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0 36px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}

.chapter-toc {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 26px 0 40px;
  font-size: 13.5px;
  line-height: 1.45;
  border-right: 1px solid var(--line);
}
.chapter-toc .toc-kicker {
  font: 700 10.5px/1 var(--sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 14px;
}
.chapter-toc a {
  display: block;
  padding: 5px 14px 5px 10px;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.chapter-toc a:hover { color: var(--ink); }
.chapter-toc a.lvl-3 { padding-left: 24px; font-size: 12.5px; }
.chapter-toc a.current {
  color: var(--cyan);
  border-left-color: var(--cyan);
  background: rgba(47, 243, 255, 0.06);
}

/* Free tier: the one banner the reader gets. The locked blocks do the rest of the
 * arguing, since they show exactly which files the chapter builds. */
.tier-note {
  max-width: 760px;
  margin: 26px auto 0;
  padding: 16px 20px;
  border: 1px solid rgba(255, 210, 63, 0.35);
  background: rgba(255, 210, 63, 0.07);
  border-radius: 10px;
  color: #ffe9a8;
  font-size: 14.5px;
}
.tier-note a { color: var(--yellow); font-weight: 700; }

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 96ch;
  margin: 0 auto;
  padding: 28px 0 80px;
  font-size: 14px;
}
.chapter-nav a { color: var(--cyan); text-decoration: none; }
.chapter-nav a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .reader { grid-template-columns: minmax(0, 1fr); }
  .chapter-toc { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .chapter { font-size: 16px; }
  .code-body { font-size: 12.5px; }
  .code-cap { font-size: 11.5px; }
}