/* whitepaper.css — typography for the math-team explainer site.
 *
 * Premium-restraint register: layered grayscale via OkLCH, modular fluid
 * type scale via clamp(), 8px spacing grid, narrow editorial measure for
 * long-form reading.
 *
 * Body: Source Serif 4 (variable, optical-size axis).
 * Headings: Inter (variable weight axis 100–900).
 * Mono: JetBrains Mono.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==== Modular type scale (fluid via clamp) ==== *
 * Ratio ≈ minor third (1.2). Body ~17px on standard screens, ~15px on phones.
 */
:root {
  --fs-100:  clamp(10.5px, 0.65vw + 0.45rem, 12px);   /* eyebrow / caption */
  --fs-200:  clamp(12px,   0.75vw + 0.55rem, 14px);   /* small / meta / pill */
  --fs-300:  clamp(15px,   1.05vw + 0.6rem,  18px);   /* body */
  --fs-400:  clamp(17px,   1.2vw  + 0.75rem, 21px);   /* h3 / lede */
  --fs-500:  clamp(20px,   1.5vw  + 0.9rem,  26px);   /* h2 */
  --fs-600:  clamp(28px,   2.4vw  + 1.1rem,  40px);   /* h1 / cover title */
  --fs-700:  clamp(36px,   3.5vw  + 1.4rem,  56px);   /* hero */
}

/* ==== Spacing tokens (8px grid; 4px sub-grid for tight intra-component) ==== */
:root {
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-24: 6rem;      /* 96px */
  --sp-32: 8rem;      /* 128px */
}

/* ==== Color palette — OkLCH layered grayscale + restrained accents ==== */
:root {
  /* Tone scale — same hue (cool 260) at varying lightness; chroma kept low
     so the grays read as "ink on paper" rather than "computer gray." */
  --tone-0:   oklch(0.99 0.003 260);   /* page surround */
  --tone-1:   oklch(0.97 0.003 260);   /* sheet bg */
  --tone-2:   oklch(0.94 0.003 260);   /* soft panels, code-bg */
  --tone-3:   oklch(0.88 0.005 260);   /* rules, borders */
  --tone-4:   oklch(0.78 0.008 260);   /* subtle dividers */
  --tone-5:   oklch(0.62 0.01  260);   /* tertiary text */
  --tone-7:   oklch(0.50 0.012 260);   /* secondary text / eyebrow / byline */
  --tone-9:   oklch(0.22 0.025 260);   /* body text */
  --tone-10:  oklch(0.14 0.035 260);   /* headings, near-black with cool tint */
  /* Accents — low-medium chroma so they read as "ink color" not "neon" */
  --accent:        oklch(0.55 0.13 50);    /* warm orange */
  --accent-soft:   oklch(0.92 0.04 50);    /* orange-tinted callout bg */
  --link:          oklch(0.42 0.13 250);   /* navy-ish blue */
  --link-hover:    oklch(0.32 0.16 250);
  --pill-done-bg:  oklch(0.93 0.05 150);
  --pill-done-fg:  oklch(0.35 0.10 150);
  --pill-info-bg:  oklch(0.93 0.04 250);
  --pill-info-fg:  oklch(0.35 0.13 250);
  --pill-warn-bg:  oklch(0.93 0.05 80);
  --pill-warn-fg:  oklch(0.40 0.10 80);
  --pill-soft-bg:  oklch(0.94 0.01 290);
  --pill-soft-fg:  oklch(0.42 0.06 290);
  --pill-alert-bg: oklch(0.93 0.05 25);
  --pill-alert-fg: oklch(0.42 0.13 25);

  /* Backward-compat aliases — keep existing rules working */
  --body-color:      var(--tone-9);
  --title-color:     var(--tone-10);
  --eyebrow-gray:    var(--tone-7);
  --rule-gray:       var(--tone-3);
  --link-color:      var(--link);
  --code-bg:         var(--tone-2);
  --accent-orange:   var(--accent);
  --before-box:      var(--accent);
  --after-box:       var(--tone-10);
  --page-bg:         var(--tone-0);
  --sheet-bg:        var(--tone-1);
  --soft-bg:         var(--tone-2);
  --callout-bg:      var(--accent-soft);
  --pill-active-bg:  var(--pill-info-bg);
  --pill-active-fg:  var(--pill-info-fg);
  --pill-pending-bg: var(--pill-warn-bg);
  --pill-pending-fg: var(--pill-warn-fg);
  --pill-gated-bg:   var(--pill-soft-bg);
  --pill-gated-fg:   var(--pill-soft-fg);
  --pill-sorry-bg:   var(--pill-alert-bg);
  --pill-sorry-fg:   var(--pill-alert-fg);

  /* Apple-style ease — fast exit, slow settle */
  --ease-premium: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark theme — layered near-blacks (not pure black), off-white text
 * (not pure white). Same hue (260) as light theme, inverted lightness
 * scale. */
[data-theme="dark"] {
  --tone-0:   oklch(0.13 0.005 260);   /* page surround — deepest */
  --tone-1:   oklch(0.16 0.005 260);   /* sheet bg */
  --tone-2:   oklch(0.20 0.005 260);   /* soft panels */
  --tone-3:   oklch(0.28 0.008 260);   /* rules */
  --tone-4:   oklch(0.36 0.01  260);
  --tone-5:   oklch(0.55 0.012 260);
  --tone-7:   oklch(0.68 0.015 260);   /* secondary text */
  --tone-9:   oklch(0.86 0.008 260);   /* body — off-white, not pure white */
  --tone-10:  oklch(0.96 0.005 260);   /* headings */
  --accent:        oklch(0.72 0.13 60);
  --accent-soft:   oklch(0.24 0.05 60);
  --link:          oklch(0.72 0.13 240);
  --link-hover:    oklch(0.82 0.13 240);
  --pill-done-bg:  oklch(0.26 0.06 150);
  --pill-done-fg:  oklch(0.85 0.13 150);
  --pill-info-bg:  oklch(0.26 0.05 250);
  --pill-info-fg:  oklch(0.82 0.10 250);
  --pill-warn-bg:  oklch(0.26 0.06 80);
  --pill-warn-fg:  oklch(0.85 0.10 80);
  --pill-soft-bg:  oklch(0.26 0.04 290);
  --pill-soft-fg:  oklch(0.82 0.10 290);
  --pill-alert-bg: oklch(0.26 0.06 25);
  --pill-alert-fg: oklch(0.85 0.13 25);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tone-0:   oklch(0.13 0.005 260);
    --tone-1:   oklch(0.16 0.005 260);
    --tone-2:   oklch(0.20 0.005 260);
    --tone-3:   oklch(0.28 0.008 260);
    --tone-7:   oklch(0.68 0.015 260);
    --tone-9:   oklch(0.86 0.008 260);
    --tone-10:  oklch(0.96 0.005 260);
    --accent:        oklch(0.72 0.13 60);
    --accent-soft:   oklch(0.24 0.05 60);
    --link:          oklch(0.72 0.13 240);
  }
}

/* ==== Page-faithful container ==== *
 * Print width 8.5in − 1.1in×2 margin = 6.3in. We render the on-screen preview
 * inside the same 6.3in column so what you see is approximately what the PDF
 * will look like. Margin auto centers it.
 */
html, body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--body-color);
  font-family: "Source Serif 4", "Source Serif Pro", "Charter", "Liberation Serif", serif;
  font-size: var(--fs-300);
  line-height: 1.6;
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s var(--ease-premium), color 0.2s var(--ease-premium);
}

/* Editorial measure: ~65 characters per line for serif body. */
main, .page {
  max-width: 38rem;
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-6) var(--sp-24) var(--sp-6);
  background: var(--sheet-bg);
  min-height: 100vh;
  transition: background-color 0.2s var(--ease-premium);
}

/* Wider variants for tables, side-by-side comparisons, widget shells. */
.wide  { max-width: 48rem; }
.full  { max-width: 64rem; }
main.wide, main.full, .page.wide, .page.full { /* override main's max-width when needed */ }

/* ==== Mobile responsiveness ==== */
@media (max-width: 700px) {
  main, .page {
    max-width: 100%;
    padding: 1em 0.8em 2em 0.8em;
    min-height: auto;
  }
  body { font-size: 10.5pt; }
  .site-nav {
    padding: 0.4em 0.6em;
    font-size: 9pt;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
  }
  .site-nav .brand { margin-right: 0.5em; flex-shrink: 0; }
  .site-nav a { padding: 0.2em 0.5em; flex-shrink: 0; }
  .site-nav .meta, .site-nav .spacer { display: none; }

  /* Cover scales down */
  .cover .title { font-size: 28pt !important; }
  .cover .subtitle { font-size: 12pt; }

  /* Headings tighten */
  h1 { font-size: 18pt; }
  h2 { font-size: 14pt; }
  h3 { font-size: 11pt; }

  /* Tables and grids get vertical-stack treatment */
  .card-grid, .agent-grid, .compare {
    grid-template-columns: 1fr !important;
  }
  .matrix-walk {
    flex-wrap: wrap;
    gap: 0.4em;
  }

  /* Range inputs in widgets get more touch area */
  .polyact .control-row {
    grid-template-columns: 1fr;
    gap: 0.3em;
  }
  .polyact .control-row label { text-align: left; }
}

/* Slightly tighter small-screen treatment for tablet-ish */
@media (max-width: 1000px) and (min-width: 701px) {
  main, .page {
    max-width: 92%;
    padding-left: 1em;
    padding-right: 1em;
  }
}

/* ==== Site nav ==== *
 * Small, persistent navigation across the four pages of the math-team
 * explainer site. Sits at the top of every page; current page highlighted.
 */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--sheet-bg) 96%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule-gray);
  padding: 0.5em 1em;
  margin: 0 0 1em 0;
  font-family: "Inter", "Liberation Sans", sans-serif;
  font-size: 9.5pt;
  display: flex;
  gap: 0;
  align-items: center;
  flex-wrap: wrap;
}

/* Theme toggle button — injected by theme-toggle.js into the .site-nav. */
.site-nav .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-gray);
  background: transparent;
  color: var(--body-color);
  border-radius: 3px;
  padding: 0.18em 0.5em;
  margin-left: 0.6em;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.site-nav .theme-toggle:hover {
  background: var(--soft-bg);
  border-color: var(--body-color);
}
.site-nav .theme-toggle .toggle-icon {
  font-size: 11pt;
  line-height: 1;
}

/* Search button (injected by theme-toggle.js when Pagefind is loaded). */
.site-nav .search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-gray);
  background: transparent;
  color: var(--body-color);
  border-radius: 3px;
  padding: 0.18em 0.5em;
  margin-left: 0.4em;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: 1;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.site-nav .search-toggle:hover {
  background: var(--soft-bg);
  border-color: var(--body-color);
}
.site-nav .search-toggle .search-icon {
  font-size: 12pt;
  line-height: 1;
}

/* Search overlay (hidden by default; revealed when search button clicked). */
#pf-overlay[hidden] { display: none; }
#pf-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--body-color) 50%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}
#pf-overlay .pf-modal {
  width: min(640px, calc(100vw - 2em));
  max-height: 75vh;
  background: var(--sheet-bg);
  border-radius: 6px;
  border: 1px solid var(--rule-gray);
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  padding: 0.8em 1em;
  overflow-y: auto;
}
/* Pagefind UI overrides — match site palette */
#pf-search {
  --pagefind-ui-primary: var(--title-color);
  --pagefind-ui-text: var(--body-color);
  --pagefind-ui-background: var(--sheet-bg);
  --pagefind-ui-border: var(--rule-gray);
  --pagefind-ui-tag: var(--soft-bg);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 4px;
  --pagefind-ui-image-border-radius: 4px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: "Inter", "Liberation Sans", sans-serif;
}
.site-nav .brand {
  font-weight: 700;
  color: var(--title-color);
  margin-right: 1em;
  letter-spacing: -0.005em;
}
.site-nav .brand .dim {
  color: var(--eyebrow-gray);
  font-weight: 400;
  letter-spacing: 0.04em;
  font-size: 8.5pt;
  margin-left: 0.4em;
}
.site-nav a {
  color: var(--body-color);
  text-decoration: none;
  padding: 0.3em 0.7em;
  border-radius: 3px;
  margin-right: 0.15em;
}
.site-nav a:hover { background: var(--soft-bg); text-decoration: none; }
.site-nav a.current {
  background: transparent;
  color: var(--tone-10);
  font-weight: 600;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  padding-bottom: calc(0.3em - 1.5px);
}
.site-nav .spacer { flex: 1; }
.site-nav .meta {
  color: var(--eyebrow-gray);
  font-size: 8.5pt;
  letter-spacing: 0.04em;
}

/* ==== Cover ==== */
.cover {
  margin-top: 4cm;
  margin-bottom: 5cm;
}
.cover .eyebrow {
  font-family: "Inter", "Liberation Sans", sans-serif;
  font-size: 9pt;
  letter-spacing: 0.18em;
  color: var(--eyebrow-gray);
  text-transform: uppercase;
  margin: 0 0 1.2em 0;
}
.cover .title {
  font-family: "Inter", "Liberation Sans", sans-serif;
  font-weight: 800;
  font-size: 38pt;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--title-color);
  margin: 0 0 0.5em 0;
}
.cover .subtitle {
  font-style: italic;
  font-size: 14pt;
  line-height: 1.35;
  color: var(--body-color);
  margin: 0 0 2em 0;
  max-width: 5in;
}
.cover .byline {
  font-family: "Inter", "Liberation Sans", sans-serif;
  font-size: 10pt;
  color: var(--eyebrow-gray);
  margin: 0;
}

/* ==== Section headings ==== */
h1, h2 {
  font-family: "Inter", "Liberation Sans", sans-serif;
  font-weight: 700;
  color: var(--title-color);
  letter-spacing: -0.01em;
  break-after: avoid;
}
h1 {
  font-size: 22pt;
  margin: 2em 0 1em 0;
}
h2 {
  font-size: 16pt;
  margin: 1.6em 0 0.6em 0;
}
h3 {
  font-family: "Inter", "Liberation Sans", sans-serif;
  font-weight: 600;
  font-size: 12pt;
  color: var(--title-color);
  margin: 1.4em 0 0.4em 0;
}

/* ==== Body paragraphs ==== */
p {
  margin: 0 0 0.9em 0;
  text-align: left;          /* left-aligned reads better on screen than justified */
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ==== Inline code + code blocks ==== */
code, pre, kbd, samp {
  font-family: "JetBrains Mono", "JetBrainsMono Nerd Font Propo", "Liberation Mono", monospace;
  font-size: 0.92em;
  font-feature-settings: normal;
}
p code, li code {
  background: var(--code-bg);
  padding: 0.05em 0.35em;
  border-radius: 3px;
}
pre {
  background: var(--code-bg);
  padding: 0.8em 1em;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.5;
}

/* ==== Figures ==== */
figure {
  margin: 1.6em 0;
}
figure img {
  max-width: 100%;
  height: auto;
}
figcaption {
  font-style: italic;
  font-size: 0.95em;
  color: var(--body-color);
  margin-top: 0.6em;
}
figcaption.subcaption {
  color: var(--accent-orange);
  font-style: italic;
  font-size: 0.9em;
}

/* ==== Crypto-paper "before" / "after" boxed figure pair ==== */
.box-before, .box-after {
  border: 1.5px solid;
  border-radius: 4px;
  padding: 1em 1.2em;
  margin: 0.6em 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.88em;
  line-height: 1.5;
  white-space: pre-wrap;
}
.box-before { border-color: var(--before-box); }
.box-after  { border-color: var(--after-box); }
.box-arrow {
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 0.85em;
  color: var(--eyebrow-gray);
  margin: 0.6em 0;
  letter-spacing: 0.05em;
}

/* ==== Lists ==== */
ul, ol {
  padding-left: 1.4em;
  margin: 0 0 1em 0;
}
li {
  margin: 0.25em 0;
}

/* ==== Tables ==== */
table {
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.95em;
}
th, td {
  text-align: left;
  padding: 0.45em 0.8em;
  border-bottom: 1px solid var(--rule-gray);
}
th {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  border-bottom-color: var(--body-color);
  border-bottom-width: 1.5px;
}

/* ==== Links ==== */
a {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.04em;
}
a:hover {
  text-decoration-thickness: 0.08em;
}

/* ==== Blockquote (used in skeleton drafts for "Skeleton." placeholders) ==== */
blockquote {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  border-left: 3px solid var(--rule-gray);
  color: #444;
}
blockquote em:first-child,
blockquote p em:first-child {
  color: var(--accent-orange);
}

/* ==== Print rules ==== *
 * For weasyprint or browser-print export. Keeps the same look but at exact
 * 8.5×11 page size with proper page breaks per section.
 */
@page {
  size: letter;
  margin: 1.1in;
}
@media print {
  html, body { background: white; font-size: 11pt; }
  main, .page { box-shadow: none; max-width: none; padding: 0; }
  h1 { page-break-before: auto; break-before: auto; }
  .cover { page-break-after: always; break-after: page; }
}