/* /css/layout.css: page grid, header, rail, footer, reading progress, sidenotes, wide and full figures (§4.3, §4.4).

   ≥ 1300px   [ rail 220 ][ 40 ][ main ≤680 ][ 40 ][ margin 260 ]   centered
   1200–1299  [ rail 220 ][ 32 ][ main ≤680 ][ 32 ][ margin 200 ]
   900–1199   [ main ≤680 ][ 32 ][ margin 220 ]                     rail → drawer
   < 900      [ main 100%, 16px gutters ]                             rail → drawer; sidenotes inline
   Sidenotes and wide figures reach into the margin column with negative margins (--sn-w, --sn-gap). */

:root { --sn-w: 0px; --sn-gap: 0px; --bleed-l: 16px; --bleed-r: 16px; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-sans);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.005em;
  white-space: nowrap;
  min-height: 44px;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; color: var(--c-lab); fill: none; stroke: currentColor; flex: none; }
.top-nav { display: flex; gap: var(--s-1); align-items: center; }
.top-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: .8rem;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-s);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.header-inner .theme-toggle svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; }
.header-inner .theme-toggle { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
.rail-toggle { order: -1; }
@media (max-width: 759px) {
  .top-nav { display: none; }
  .brand span { font-size: .95rem; }
}
@media (max-width: 380px) {
  .brand span { display: none; }
}

.reading-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
}
.reading-progress-bar {
  display: block;
  height: 100%;
  background: var(--c-light);
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform;
}

/* ---------------------------------------------------------------- page grid */

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main";
  padding: var(--s-6) var(--s-4) var(--s-8);
  margin: 0 auto;
}
/* Full-bleed figures (figure.full) reach the viewport edges with negative margins; clipping on body, not on the
   max-1280px .page, keeps them full width on wide screens while never allowing a horizontal page scroll. */
html, body { overflow-x: clip; }   /* html too: in Chromium a 2px overflow (below-decks at 320px) still reached the root scroller */
.page > main { grid-area: main; min-width: 0; }
main { outline: none; }

@media (min-width: 900px) {
  :root { --sn-w: 220px; --sn-gap: 32px; --bleed-l: max(16px, calc((100vw - 932px) / 2)); --bleed-r: calc(var(--bleed-l) + 252px); }
  .page {
    grid-template-columns: minmax(0, var(--measure)) var(--sn-gap) var(--sn-w);
    grid-template-areas: "main . margin";
    justify-content: center;
    padding-top: var(--s-7);
  }
}
@media (min-width: 1200px) {
  :root { --sn-w: 200px; --sn-gap: 32px; --bleed-l: calc((100vw - 1164px) / 2 + 252px); --bleed-r: calc((100vw - 1164px) / 2 + 232px); }
  .page {
    grid-template-columns: var(--rail-w) var(--sn-gap) minmax(0, var(--measure)) var(--sn-gap) var(--sn-w);
    grid-template-areas: "rail . main . margin";
    max-width: 1280px;
  }
}
@media (min-width: 1300px) {
  :root { --sn-w: 260px; --sn-gap: 40px; --bleed-l: calc((100vw - 1240px) / 2 + 260px); --bleed-r: calc((100vw - 1240px) / 2 + 300px); }
}

/* Generic vertical rhythm for prose containers. */
:where(.chapter-head, .beat, .page-body, .callout, .reconcile, .recap, .deep-dive, details.solution, details.hint, details.long-desc, .ex-prompt, .ex-model, .code-task, .sidenote, .sagredo, main > section, main > article > section) > * + * {
  margin-top: var(--flow, 1em);
}
:where(.beat, .page-body, main > section) > :is(h2, h3, h4) + * { margin-top: .7em; }
:where(.beat, .page-body, main > section) > * + :is(h3, h4) { margin-top: 1.8em; }

/* ---------------------------------------------------------------- chapter head and beats */

.chapter-head { margin-bottom: var(--s-7); }
.chapter-head > * + * { margin-top: var(--s-3); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.chapter-head .eyebrow { display: inline-flex; align-items: center; gap: .6em; }
.chapter-head .eyebrow::before {
  content: "";
  width: 22px;
  height: 0;
  border-top: 2px solid var(--c-light);
  transform: rotate(-45deg);
}
.subtitle { font-size: 1.2rem; font-style: italic; color: var(--ink-muted); line-height: 1.45; }
.chapter-meta { font-family: var(--font-sans); font-size: .8rem; color: var(--ink-muted); }

.beat { margin-top: var(--s-8); scroll-margin-top: 72px; }
.beat:first-of-type { margin-top: 0; }
.beat > h2 { display: flex; align-items: baseline; gap: .5em; }
.beat > h2::before {
  content: "";
  flex: none;
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ink);
  transform: translateY(-.08em);
}

/* ---------------------------------------------------------------- the rail: "Your worldline" */

.rail { font-family: var(--font-sans); font-size: .8rem; }
.rail > a { color: var(--ink-muted); }
.rail-inner { padding: var(--s-2) var(--s-2) var(--s-5) 0; }
.rail-title {
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .7rem;
  color: var(--ink-muted);
  margin: 0 0 var(--s-3) 34px;
}
.rail-list, .rail-chapters, .rail-beats { list-style: none; padding: 0; margin: 0; }
.rail-list { position: relative; }
.rail-list::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  border-left: 2px solid color-mix(in srgb, var(--c-lab) 55%, var(--rule));
}
.rail-list li + li { margin-top: 0; }
.rail-part + .rail-part { margin-top: var(--s-3); }
.rail-part-title {
  margin: var(--s-2) 0 var(--s-1) 34px;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  opacity: .85;
}
.rail-link {
  display: grid;
  grid-template-columns: 24px 1.6em 1fr;
  align-items: center;
  column-gap: 8px;
  min-height: 32px;
  padding: 3px var(--s-2) 3px 0;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-s);
  line-height: 1.25;
}
.rail-link:hover { background: var(--surface-2); text-decoration: none; }
.rail-link[aria-current="page"] { font-weight: 650; }
.rail-num { color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: right; }
.rail-name { overflow-wrap: anywhere; }
.rail-ch.is-not-started .rail-name { color: var(--ink-muted); }
.rail-dot { width: 24px; height: 24px; overflow: visible; position: relative; z-index: 1; }
.rd-dot { fill: var(--bg); stroke: var(--ink-muted); stroke-width: 1.6; }
.rd-half { fill: var(--ink); }
.is-in-progress .rd-dot { stroke: var(--ink); }
.is-passed .rd-dot, .is-mastered .rd-dot { fill: var(--ink); stroke: var(--ink); }
.rd-ring { fill: none; stroke: var(--c-inv); stroke-width: 2; }
.rd-cone { stroke: var(--c-light); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.rd-cone-fill { fill: var(--tint-light); stroke: none; }

.rail-beats { margin: 2px 0 var(--s-2) 0; padding-left: 34px; position: relative; }
.rail-beat a {
  position: relative;
  display: block;
  padding: 3px var(--s-2);
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: var(--r-s);
  min-height: 24px;
}
.rail-beat a::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 50%;
  width: 8px;
  border-top: 1.5px solid var(--ink-muted);
}
.rail-beat.is-seen a { color: var(--ink); }
.rail-beat.is-seen a::before { border-top-color: var(--ink); }
.rail-beat.is-active a { color: var(--ink); background: var(--tint-light); font-weight: 600; }
.rail-beat.is-active a::before { border-top: 2.5px solid var(--c-light); width: 12px; left: -29px; }
.rail-beat a:hover { background: var(--surface-2); }
.rail-foot { margin: var(--s-4) 0 0 34px; color: var(--ink-muted); }

/* Wide screens: the rail is a sticky column. */
@media (min-width: 1200px) {
  .rail {
    grid-area: rail;
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    align-self: start;
    max-height: calc(100vh - var(--header-h) - var(--s-6));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .header-inner .rail-toggle, .header-inner .rail-toggle.btn { display: none; }
  /* A sticky rail taller than the window fades at its clipped edge (nav.js toggles the classes). */
  /* the bottom fade stops 26px short of the edge, where the sticky "more ↓" cue sits */
  .rail.has-more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 66px), transparent calc(100% - 26px), #000 calc(100% - 26px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 66px), transparent calc(100% - 26px), #000 calc(100% - 26px)); }
  .rail.has-more-above { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to top, #000 calc(100% - 40px), transparent); }
  .rail.has-more-above.has-more-below { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 66px), transparent calc(100% - 26px), #000 calc(100% - 26px)); mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 66px), transparent calc(100% - 26px), #000 calc(100% - 26px)); }
  .rail-more {
    position: sticky; bottom: 0; display: none; width: 100%; margin: 0; padding: 4px 0 4px 34px;
    border: 0; background: var(--bg); color: var(--ink-muted); text-align: left; cursor: pointer;
    font: 600 .7rem var(--font-sans); letter-spacing: .04em;
  }
  .rail-more:hover { color: var(--ink); }
  .rail.has-more-below .rail-more { display: block; }
}

/* Narrower: the rail is a drawer. Closed drawers are visibility:hidden, so they are out of the tab order. */
@media (max-width: 1199px) {
  .rail {
    position: fixed;
    z-index: 45;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    width: min(330px, 88vw);
    padding: var(--s-4) var(--s-3) var(--s-4) var(--s-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border-right: 1px solid var(--rule);
    box-shadow: var(--shadow-lift);
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 260ms var(--ease), visibility 0s linear 260ms;
  }
  html.rail-open .rail { transform: none; visibility: visible; transition: transform 260ms var(--ease), visibility 0s; }
  .rail-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 44;
    background: rgba(14, 17, 22, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms var(--ease);
  }
  html.rail-open .rail-backdrop { opacity: 1; pointer-events: auto; }
  html.rail-open { overflow: hidden; }
}
@media (min-width: 1200px) { .rail-backdrop { display: none; } }

/* ---------------------------------------------------------------- sidenotes (§4.4) */

.sidenote, .sagredo {
  font-family: var(--font-sans);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 1em 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--rule);
}
.sidenote > :first-child, .sagredo > :first-child { margin-top: 0; }
.sidenote.history { border-left-color: var(--c-light); }
.sidenote.myth { border-left-color: var(--c-bad); }
.sidenote.history::before, .sidenote.myth::before {
  display: block;
  font-weight: 650;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .25em;
}
.sidenote.history::before { content: "Historical note"; color: var(--c-light-text); }
.sidenote.myth::before { content: "Myth"; color: var(--c-bad); }
.sagredo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .9rem;
  color: var(--ink);
  border-left-color: var(--c-lab);
}
/* Inline Sagredo (PATTERNS.md); clear: none keeps it from dropping below a floated sidenote */
.sagredo.is-inline { float: none; clear: none; width: auto; margin: var(--s-4) 0; padding: var(--s-1) 0 var(--s-1) var(--s-3); font-size: 1rem; }
.sagredo .sagredo-quill { width: 1.3em; height: 1.3em; color: var(--c-lab); margin-right: .3em; vertical-align: -.3em; }
.sagredo .sagredo-name {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 650;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-lab);
}

@media (min-width: 900px) {
  .sidenote, .sagredo:not(.is-inline) {
    float: right;
    clear: right;
    width: var(--sn-w);
    margin: .35em calc(-1 * (var(--sn-w) + var(--sn-gap))) 1em 0;
    padding: var(--s-1) 0 var(--s-1) var(--s-3);
  }
  /* Keep exercises, labs and callouts clear of floated notes. */
  figure.lab, figure.wide, figure.full, .chapter-end { clear: right; }
}

/* ---------------------------------------------------------------- wide and full figures */

figure { margin: var(--s-6) 0; }
@media (min-width: 900px) {
  figure.wide {
    width: calc(100% + var(--sn-gap) + var(--sn-w));
    max-width: 980px;
  }
}
figure.full {
  width: auto;
  margin-left: calc(-1 * var(--bleed-l));
  margin-right: calc(-1 * var(--bleed-r));
  max-width: none;
}
figure.full + * { clear: both; }

/* ---------------------------------------------------------------- end-of-chapter and footer */

.chapter-end { margin-top: var(--s-8); clear: both; }

.site-footer {
  border-top: 1px solid var(--rule);
  padding: var(--s-6) var(--s-4) var(--s-7);
  text-align: center;
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-1) var(--s-2); }
.site-footer a, .site-footer .linklike { color: var(--ink); min-height: 24px; display: inline-flex; align-items: center; }
.site-footer .fine { margin-top: var(--s-3); max-width: 60ch; margin-inline: auto; }
body.has-consent-banner .site-footer { padding-bottom: 40vh; }