/* reading-room - artifact identity foundation
   A warm editorial reader: paper background, ink serif text, green accent.
   Extracted from a proven long-form reading page. This file is the entire
   system: tokens, base, typography, components, print.

   How the file is built:
   - Everything lives in `@layer foundation`, so unlayered page CSS always
     overrides it without !important. Paste the whole file into a single-file
     <style> block or link it; both modes work.
   - Dual theme via light-dark() + `color-scheme` on :root. The initial
     scheme is the identity's lead scheme: light. A toggle flips
     html.style.colorScheme to "light" or "dark". There is no data-theme attribute and no duplicated token
     block. color-scheme must stay on html/:root - light-dark() tokens
     re-resolve against the root's scheme only.
   - No JavaScript is required anywhere.
*/

@layer foundation {
  :root {
    color-scheme: light;

    /* Shared semantic vocabulary */
    --bg: light-dark(oklch(0.975 0.006 95), oklch(0.205 0.01 140));
    --surface: light-dark(oklch(1 0 0), oklch(0.24 0.012 140));
    --ink: light-dark(oklch(0.24 0.012 110), oklch(0.92 0.008 110));
    --muted: light-dark(oklch(0.47 0.012 110), oklch(0.72 0.01 110));
    --faint: light-dark(oklch(0.62 0.01 110), oklch(0.55 0.01 110));
    --line: light-dark(oklch(0.895 0.01 110), oklch(0.34 0.015 140));
    --line-soft: light-dark(oklch(0.92 0.008 110), oklch(0.29 0.012 140));
    --accent: light-dark(oklch(0.46 0.115 152), oklch(0.78 0.13 152));
    --accent-ink: light-dark(oklch(0.30 0.09 152), oklch(0.85 0.11 152));
    --accent-soft: light-dark(oklch(0.93 0.035 152), oklch(0.30 0.05 152));
    --ok: light-dark(oklch(0.47 0.115 152), oklch(0.78 0.13 152));
    --ok-soft: light-dark(oklch(0.93 0.035 152), oklch(0.30 0.05 152));
    --warn: light-dark(oklch(0.55 0.11 75), oklch(0.80 0.11 85));
    --warn-soft: light-dark(oklch(0.95 0.045 85), oklch(0.30 0.05 85));
    --danger: light-dark(oklch(0.50 0.14 25), oklch(0.75 0.12 25));
    --danger-soft: light-dark(oklch(0.95 0.03 25), oklch(0.30 0.05 25));
    --radius: 8px;
    --font-serif: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

    /* Identity extras */
    --wash: light-dark(oklch(0.945 0.012 130), oklch(0.25 0.02 150));
    --measure: 70ch;
  }

  /* ---------- Base ---------- */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--accent-ink); }
  strong { font-weight: 700; }
  p { margin: 0 0 1.1rem; max-width: var(--measure); text-wrap: pretty; }
  .rr-lede { font-size: 1.12rem; color: var(--muted); }
  ul, ol { max-width: var(--measure); padding-left: 1.4rem; margin: 0 0 1.1rem; }
  li { margin-bottom: 0.4rem; }
  code {
    font-family: var(--font-mono); font-size: 0.82em;
    background: var(--wash); border: 1px solid var(--line);
    border-radius: 4px; padding: 0.08em 0.35em; white-space: nowrap;
  }

  /* ---------- Masthead ---------- */
  .rr-masthead { border-bottom: 1px solid var(--line); background: var(--surface); }
  .rr-masthead-inner {
    max-width: 1080px; margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  }
  .rr-kicker {
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  .rr-theme-toggle {
    font-family: var(--font-sans); font-size: 0.78rem; color: var(--muted);
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 0.25rem 0.6rem; cursor: pointer; white-space: nowrap;
  }
  .rr-theme-toggle:hover { color: var(--ink); border-color: var(--faint); }

  /* ---------- Hero ---------- */
  .rr-hero { max-width: 1080px; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; }
  .rr-hero h1 {
    font-size: clamp(2.3rem, 6vw, 3.6rem);
    line-height: 1.08; margin: 0 0 1rem;
    font-weight: 700; letter-spacing: -0.015em; text-wrap: balance;
  }
  .rr-dek {
    font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.5;
    color: var(--muted); max-width: 58ch; margin: 0 0 1.5rem; text-wrap: pretty;
  }
  .rr-meta-row {
    font-family: var(--font-sans); font-size: 0.8rem; color: var(--faint);
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem;
  }
  .rr-meta-row strong { color: var(--muted); font-weight: 600; }

  /* ---------- Layout shell ---------- */
  .rr-shell {
    max-width: 1080px; margin: 0 auto; padding: 0 1.5rem 4rem;
    display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem;
  }
  .rr-main { min-width: 0; }

  /* ---------- Table of contents ---------- */
  .rr-toc { position: sticky; top: 1.5rem; align-self: start; font-family: var(--font-sans); }
  .rr-toc-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--faint); margin-bottom: 0.6rem;
  }
  .rr-toc ol { list-style: none; margin: 0; padding: 0; max-width: none; }
  .rr-toc li { margin: 0; }
  .rr-toc a {
    display: block; padding: 0.28rem 0.75rem; font-size: 0.82rem;
    color: var(--muted); text-decoration: none; border-left: 2px solid var(--line);
    line-height: 1.4;
  }
  .rr-toc a:hover { color: var(--ink); }
  .rr-toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
  /* Subsections: nest an <ol> inside the parent section's <li>. Sub-entries
     indent, drop a size, and stay rail-less so the border-left rail stays
     reserved for top-level sections. */
  .rr-toc ol ol { list-style: none; margin: 0 0 0.25rem; padding: 0; }
  .rr-toc ol ol a {
    padding: 0.18rem 0.75rem 0.18rem 1.6rem;
    font-size: 0.74rem; color: var(--faint); border-left-color: transparent;
  }
  .rr-toc ol ol a:hover { color: var(--ink); }
  .rr-toc ol ol a.active { color: var(--accent); font-weight: 600; }
  .rr-toc-mobile { display: none; }

  /* ---------- Sections ---------- */
  .rr-section { margin-bottom: 3.5rem; scroll-margin-top: 1.5rem; }
  .rr-section h2 {
    font-size: 1.65rem; line-height: 1.25; margin: 0 0 1rem;
    letter-spacing: -0.01em; text-wrap: balance;
    padding-top: 0.5rem; border-top: 1px solid var(--line);
  }
  .rr-secnum {
    font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700;
    color: var(--accent); letter-spacing: 0.1em; display: block; margin-bottom: 0.4rem;
  }
  .rr-section h3 { font-size: 1.15rem; margin: 1.8rem 0 0.6rem; }

  /* ---------- Callouts ---------- */
  .rr-callout {
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    background: var(--surface); border-radius: var(--radius);
    padding: 1rem 1.25rem; margin: 1.4rem 0; max-width: 74ch;
  }
  .rr-callout--warn { border-left-color: var(--warn); background: var(--warn-soft); }
  .rr-callout--danger { border-left-color: var(--danger); background: var(--danger-soft); }
  .rr-callout-label {
    font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink);
    display: block; margin-bottom: 0.35rem;
  }
  .rr-callout--warn .rr-callout-label { color: var(--warn); }
  .rr-callout--danger .rr-callout-label { color: var(--danger); }
  .rr-callout p:last-child { margin-bottom: 0; }

  /* ---------- Tables ---------- */
  .rr-table-wrap { overflow-x: auto; margin: 1.3rem 0; }
  .rr-table-wrap table {
    border-collapse: collapse; width: 100%; min-width: 640px;
    font-family: var(--font-sans); font-size: 0.85rem;
  }
  .rr-table-wrap th {
    text-align: left; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--faint); font-weight: 700; padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--line); white-space: nowrap;
  }
  .rr-table-wrap td {
    padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line);
    vertical-align: top; line-height: 1.5;
  }
  .rr-table-wrap tbody tr:hover { background: var(--wash); }

  /* ---------- Chips ---------- */
  .rr-chip {
    display: inline-block; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 99px; padding: 0.2rem 0.65rem; vertical-align: 2px;
  }
  .rr-chip--accent { background: var(--accent-soft); color: var(--accent-ink); }
  .rr-chip--ok { background: var(--ok-soft); color: var(--ok); }
  .rr-chip--warn { background: var(--warn-soft); color: var(--warn); }
  .rr-chip--muted { background: var(--wash); color: var(--muted); }
  .rr-chip--danger { background: var(--danger-soft); color: var(--danger); }

  /* ---------- Cards ---------- */
  .rr-card {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: 1.4rem 1.6rem; margin: 1.4rem 0;
  }
  .rr-card h3 { margin: 0 0 0.3rem; font-size: 1.3rem; }
  .rr-card-sub { font-family: var(--font-sans); font-size: 0.85rem; color: var(--muted); margin: 0 0 1rem; }
  .rr-card dl {
    display: grid; grid-template-columns: 130px 1fr; gap: 0.45rem 1rem;
    font-size: 0.92rem; margin: 0 0 1rem; max-width: none;
  }
  .rr-card dt {
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint);
    padding-top: 0.15rem;
  }
  .rr-card dd { margin: 0; }
  .rr-card-links { font-family: var(--font-sans); font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
  .rr-card-links a { white-space: nowrap; }

  /* ---------- Reading list ---------- */
  .rr-readlist h3 { margin-top: 1.6rem; }
  .rr-readlist ul { list-style: none; padding: 0; max-width: none; }
  .rr-readlist li {
    padding: 0.55rem 0; border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
  }
  .rr-readlist .rr-src {
    display: block; font-family: var(--font-sans); font-size: 0.78rem;
    color: var(--faint); margin-top: 0.1rem;
  }
  .rr-pill-note { font-family: var(--font-sans); font-size: 0.78rem; color: var(--faint); }

  /* ---------- Loading ---------- */
  .rr-skel {
    height: 0.7rem; border-radius: 4px; background: var(--wash);
    border: 1px solid var(--line-soft); max-width: 100%;
  }

  /* ---------- Colophon ---------- */
  .rr-colophon {
    border-top: 1px solid var(--line); background: var(--surface);
    font-family: var(--font-sans); font-size: 0.8rem; color: var(--faint);
  }
  .rr-colophon-inner { max-width: 1080px; margin: 0 auto; padding: 1.5rem; }

  /* ---------- Utilities ---------- */
  .rr-sans { font-family: var(--font-sans); }
  .rr-measure { max-width: var(--measure); }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    body { font-size: 17px; }
    .rr-shell { grid-template-columns: 1fr; gap: 0; padding: 0 1.1rem 3rem; }
    .rr-toc { display: none; }
    .rr-toc-mobile {
      display: block; font-family: var(--font-sans); margin: 1rem 0 2rem;
      border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    }
    .rr-toc-mobile summary {
      cursor: pointer; padding: 0.7rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--muted);
    }
    .rr-toc-mobile ol { list-style: none; margin: 0; padding: 0.25rem 0 0.5rem; }
    .rr-toc-mobile a { display: block; padding: 0.45rem 1.2rem; font-size: 0.88rem; color: var(--muted); text-decoration: none; }
    .rr-toc-mobile ol ol { list-style: none; margin: 0; padding: 0 0 0.25rem; }
    .rr-toc-mobile ol ol a { padding: 0.28rem 1.2rem 0.28rem 2.1rem; font-size: 0.8rem; color: var(--faint); }
    .rr-hero { padding: 2.5rem 1.1rem 1.5rem; }
    .rr-card { padding: 1.1rem 1.1rem; }
    .rr-card dl { grid-template-columns: 1fr; gap: 0.1rem; }
    .rr-card dt { margin-top: 0.5rem; }
  }

  /* ---------- Print ---------- */
  @media print {
    :root { color-scheme: light; }
    .rr-toc, .rr-toc-mobile, .rr-theme-toggle { display: none; }
    .rr-shell { display: block; }
    body { background: #fff; color: #111; font-size: 11.5pt; }
    a { color: inherit; }
    .rr-card, .rr-callout { break-inside: avoid; }
  }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
}