@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap");
@import "tokens.css";

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-base);
  line-height: var(--line-height-body);
  color: var(--text-primary);
  background: var(--bg-page);
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--link-hover);
}

:focus {
  outline-color: var(--focus-ring);
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Shared content blocks (chapters + back matter) */
.key-points {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--bg-surface);
  border-left: 3px solid var(--ink-manuscript-sepia);
  border-radius: 0 6px 6px 0;
}

.key-points h3 {
  margin-top: 0 !important;
  font-size: 1rem;
  font-family: var(--font-ui);
}

.key-points ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}
.ledger-table th,
.ledger-table td {
  text-align: left;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.ledger-table td:first-child {
  white-space: nowrap;
  width: 1%;
  color: var(--text-muted);
}
.ledger-table tr:last-child td {
  border-bottom: none;
}

/* Epigraph zone. Export tags the block; the look lives here (FI-OPS-JBL-014).
   Style the marker, never an <em> the pipeline would have to invent. */
.war-story {
  margin: 1.5rem 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
}

.war-story p {
  font-style: italic;
  margin-bottom: 0.75rem;
}

.war-story p:last-child {
  margin-bottom: 0;
}

/* FAQ objection beats — pulled question voice. Quote marks are presentation,
   not prose, so they are drawn here rather than stored in the manuscript. */
p.objection-quote {
  color: var(--text-muted);
  font-style: italic;
}

p.objection-quote::before {
  content: "\201C";
}

p.objection-quote::after {
  content: "\201D";
}

figure.diagram {
  margin: 2rem 0;
  padding: 1.25rem;
  /* Theme-aware surface — the diagram has light/dark SVG variants, so the figure
     uses the book's own surface in both modes (no more forced white canvas). */
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

figure.diagram figcaption {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
  text-align: center;
}

/* Show the SVG variant that matches the active theme — system preference AND the
   manual [data-theme] pin (mirrors tokens.css). Specificity beats `figure.diagram
   img { display:block }` below. */
figure.diagram img.diagram-dark { display: none; }
figure.diagram img.diagram-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) figure.diagram img.diagram-light { display: none; }
  :root:not([data-theme="light"]) figure.diagram img.diagram-dark { display: block; }
}
:root[data-theme="dark"] figure.diagram img.diagram-light { display: none; }
:root[data-theme="dark"] figure.diagram img.diagram-dark { display: block; }
:root[data-theme="light"] figure.diagram img.diagram-light { display: block; }
:root[data-theme="light"] figure.diagram img.diagram-dark { display: none; }

figure.diagram svg,
figure.diagram img {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin-inline: auto;
}

.chapter-bridge {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-style: italic;
  color: var(--text-muted);
}

.chapter-bridge a {
  font-style: normal;
}

.run-id {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}