/* Reading + app-shell styles for the docs section (docs/brain/**.html). v2.
   Loaded AFTER styles.css and additive to it: the site shell (.wrap, .site, .bar, .nav, .skip,
   .site-foot) and every colour/type token come from there, so a palette change on the landing
   page carries here for free and the two surfaces cannot drift apart.

   Layout contract (matches scripts/build_docs.py's shell):
     >=1200px  three panes: file tree | article (reading measure) | on-this-page TOC,
               both rails sticky and independently scrollable.
     <1200px   the TOC rail folds into the flow above the article as a tap-to-open row.
     <900px    the file tree folds the same way. Rows are <details open>; docs.js collapses
               them on small screens and closes them after a selection. JS off = open. */

/* Docs pages get their own container width: an exact-fit sum (48 gutter + 264 tree + 48 gap +
   640 article + 48 gap + 232 TOC + 48 gutter). A fixed cap, not vw-relative: the .wrap gutter
   already provides the outer margin, and a vw term double-charges it (measured 53 CPL at 1280).
   body.doc exists only on generated pages, so the landing and 404 keep the 1080 --wrap. */
body.doc { --wrap: 1328px; }

.doc-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 40rem) 232px;
  gap: 48px;
  padding-block: clamp(24px, 4vw, 48px) clamp(48px, 8vw, 96px);
}
.doc-main { min-width: 0; }

/* ---------------------------------------------------------------- rails */
.rail { font-size: var(--t-sm); }
.rail-box > summary {
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm);
  color: var(--ink); cursor: pointer; list-style: none;
  padding: .55rem .75rem; border: 1px solid var(--rule-strong); border-radius: 8px;
}
.rail-box > summary::-webkit-details-marker { display: none; }
.rail-box > summary::before { content: "\25B8\00A0"; color: var(--ink-faint); }
.rail-box[open] > summary::before { content: "\25BE\00A0"; }

.rail-h {
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-faint); margin: 1.1rem 0 .35rem;
}
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { margin: 0; }
.rail-list a {
  display: block; padding: .28rem .5rem; border-radius: 6px;
  color: var(--ink-soft); text-decoration: none; line-height: 1.35;
  border-left: 2px solid transparent;
}
.rail-list a:hover { color: var(--ink); background: var(--paper-2); }
.rail-list a[aria-current="page"] {
  color: var(--accent-ink); border-left-color: var(--accent); background: var(--paper-2);
  font-weight: 600;
}
.rail-sub a { padding-left: 1.1rem; font-size: var(--t-xs); }
.toc-list a { border-left: 2px solid var(--rule); border-radius: 0; }
.toc-list a:hover { border-left-color: var(--rule-strong); background: none; }
.toc-h3 a { padding-left: 1.2rem; }

@media (min-width: 1280px) {
  .rail-box > summary { display: none; }        /* rails are ambient panels, not disclosures */
  .rail > .rail-box { border: 0; }
  /* Sticky lives on the GRID ITEM with align-self:start. On the inner div it had zero travel
     (its <details> parent was content-height while the column was ~17,000px tall — measured
     -1887px off-screen after one scroll), and a stretched grid item has no travel either. */
  .rail { align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
  .rail-scroll {
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto; overscroll-behavior: contain;
    padding-right: .25rem;
  }
  .rail-files .rail-scroll { border-right: 1px solid var(--rule); }
  .rail-toc .rail-scroll { border-left: 1px solid var(--rule); padding-left: .75rem; }
  .rail-h:first-child { margin-top: 0; }
}

@media (max-width: 1279.98px) {
  /* Two-pane: the article keeps its measure cap here too — uncapped it hit 77 CPL at 1100px,
     which then COLLAPSED to ~51 at the old three-pane breakpoint. Both bands now cap at 40rem. */
  .doc-shell { grid-template-columns: 264px minmax(0, 40rem); }
  /* the TOC rail leaves the grid and reflows above the article, inside .doc-main's column */
  .rail-toc { grid-column: 2; grid-row: 1; margin-bottom: 1rem; }
  .doc-main { grid-column: 2; grid-row: 2; }
  .rail-files { grid-column: 1; grid-row: 1 / span 2; align-self: start;
                position: sticky; top: calc(var(--header-h) + 24px); }
  .rail-files .rail-scroll {
    max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto;
  }
  .rail-box > summary { margin-bottom: .5rem; }
  .rail-toc .rail-box > summary { display: block; }
  .rail-files .rail-box > summary { display: none; }
  .rail-toc .rail-scroll { padding: .25rem .75rem .5rem; border: 1px solid var(--rule); border-radius: 8px; }
}

@media (max-width: 899.98px) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); }
  .rail-files { grid-column: 1; grid-row: 1; margin-bottom: .5rem;
                position: static; align-self: auto; }
  .rail-toc { grid-column: 1; grid-row: 2; }
  .doc-main { grid-column: 1; grid-row: 3; }
  .rail-files .rail-box > summary { display: block; }
  .rail-files .rail-scroll {
    position: static; max-height: 60vh; overflow-y: auto;
    padding: .25rem .75rem .5rem; border: 1px solid var(--rule); border-radius: 8px;
  }
}

/* ---------------------------------------------------------------- breadcrumb + provenance */
.crumb {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-faint);
  margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: baseline;
}
.crumb a { color: var(--ink-soft); }
.crumb-here { color: var(--ink); }

.doc-meta {
  border-left: 2px solid var(--rule-strong);
  padding: .1rem 0 .1rem 1rem; margin-bottom: 2.5rem;
}
.doc-meta p { margin: .25rem 0; font-size: var(--t-sm); color: var(--ink-soft); }
.doc-path code { font-size: inherit; }

/* ---------------------------------------------------------------- document body */
.doc-body { font-size: var(--t-base); line-height: 1.65; color: var(--ink); }
.doc-body > :first-child { margin-top: 0; }

.doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 {
  font-family: var(--display); line-height: 1.25; color: var(--ink);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.doc-body h1 { font-size: 1.9rem; margin: 0 0 1.5rem; letter-spacing: -.015em; }
.doc-body h2 {
  font-size: 1.35rem; margin: 2.75rem 0 1rem;
  padding-top: 1.25rem; border-top: 1px solid var(--rule);
}
.doc-body h3 { font-size: 1.1rem; margin: 2rem 0 .75rem; }
.doc-body h4 { font-size: 1rem; margin: 1.5rem 0 .5rem; color: var(--ink-soft); }

.doc-body p { margin: 0 0 1.1rem; }
.doc-body ul, .doc-body ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.doc-body li { margin-bottom: .5rem; }
.doc-body li > ul, .doc-body li > ol, .doc-body ul ul, .doc-body ol ol,
.doc-body ul ol, .doc-body ol ul { margin: .5rem 0 0; }
.doc-body strong { font-weight: 650; }
.doc-body a { color: var(--accent); text-underline-offset: .15em; }
.doc-body a:hover { color: var(--accent-ink); }

.doc-body code {
  font-family: var(--mono); font-size: .875em;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px;
  padding: .1em .35em;
  overflow-wrap: anywhere;            /* a long memory/ path must never widen the page */
}
.doc-body pre {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 1rem 1.1rem; margin: 0 0 1.1rem;
  overflow-x: auto;                   /* the code block scrolls, the page does not */
}
.doc-body pre code { background: none; border: 0; padding: 0; font-size: var(--t-sm); }

.doc-body blockquote {
  margin: 0 0 1.1rem; padding: .6rem 0 .6rem 1rem;
  border-left: 3px solid var(--rule-strong); color: var(--ink-soft);
}
.doc-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* Wide rule tables (the routing table is the widest thing in the corpus) scroll inside their own
   box rather than pushing the body sideways. */
.tablewrap { overflow-x: auto; margin: 0 0 1.4rem; }
.doc-body table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.doc-body th, .doc-body td {
  text-align: left; vertical-align: top;
  padding: .55rem .7rem; border-bottom: 1px solid var(--rule);
}
.doc-body th { font-family: var(--display); font-weight: 600; border-bottom-color: var(--rule-strong); }

/* pjax swap: a brief fade keeps the transition legible without being showy */
.doc-main.swapping { opacity: .4; transition: opacity .12s ease; }
@media (prefers-reduced-motion: reduce) { .doc-main.swapping { transition: none; } }