/* Theme: the palette and type of the author's site (avtarfr.github.io) -- Deep Kombu, Warm Bone
   and Moss, set in Plus Jakarta Sans. The font is served from this site, not from Google, so the
   privacy page's "nothing loaded from anyone else" stays true. Licence: fonts/OFL.txt. */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f5f3ef;
  --surface: #ffffff;
  --panel: #ece8e1;
  --raised: #f0ebe3;
  --fg: #35402b;
  --fg-bright: #1f2617;
  --muted: #5d6e4e;
  --rule: #d8d0c3;
  --hair: #e4ded4;
  --link: #495b2d;
  --accent: #5e733b;
  --accent-hover: #405027;
  --accent-contrast: #ffffff;
  --original: #4e6330;
  --adapted: #36627c;
  --quoted: #8a5716;
  --draft: #75610f;
  --hold: #a13a2b;
  --head-bg: rgb(245 243 239 / 0.92);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: var(--sans);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --measure: 46rem;
  --head-h: 3.4rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #151913; --surface: #21281e; --panel: #1c2219; --raised: #2a3326;
    --fg: #e0d8ce; --fg-bright: #f5efeb; --muted: #9cad86; --rule: #364231; --hair: #262e22;
    --link: #b8cc8f; --accent: #88a059; --accent-hover: #a5bc74; --accent-contrast: #11160c;
    --original: #b8cc8f; --adapted: #93bcd3; --quoted: #d9ac67; --draft: #d2bb5f; --hold: #e99383;
    --head-bg: rgb(21 25 19 / 0.92);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #151913; --surface: #21281e; --panel: #1c2219; --raised: #2a3326;
  --fg: #e0d8ce; --fg-bright: #f5efeb; --muted: #9cad86; --rule: #364231; --hair: #262e22;
  --link: #b8cc8f; --accent: #88a059; --accent-hover: #a5bc74; --accent-contrast: #11160c;
  --original: #b8cc8f; --adapted: #93bcd3; --quoted: #d9ac67; --draft: #d2bb5f; --hold: #e99383;
  --head-bg: rgb(21 25 19 / 0.92);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 0.5rem); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  transition: background-color .2s ease, color .2s ease;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px;
    text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--accent-contrast); }
code, kbd { font-family: var(--mono); font-size: 0.88em; }
main { max-width: var(--measure); margin: 0 auto; padding: 2rem 16px 5rem; }
h1, h2, h3, h4 { font-family: var(--sans); line-height: 1.22; letter-spacing: -0.015em; color: var(--fg-bright); font-weight: 700; }
h1 { font-size: 2.1rem; margin: 0.6rem 0 0.8rem; }
h2 { font-size: 1.35rem; margin-top: 2.5rem; }
.small-head { font-size: 1rem; margin-top: 1.5rem; }
.lede { font-size: 1.08rem; font-weight: 500; line-height: 1.6; color: var(--muted); }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.2rem 0; }

/* Private-preview banner (only on builds made with --preview) */
.preview-note {
  margin: 0; padding: 0.45rem 16px; text-align: center;
  font: 0.8rem var(--sans); letter-spacing: 0.01em;
  color: var(--quoted);
  background: color-mix(in oklab, var(--quoted) 10%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--quoted) 22%, transparent);
}

/* Header and footer */
.site-head {
  position: sticky; top: 0; z-index: 10; min-height: var(--head-h);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem;
  padding: 0.6rem max(16px, calc((100% - 1080px) / 2)); font-family: var(--sans);
  background: var(--head-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-name { font-weight: 700; font-size: 1.02rem; color: var(--fg-bright); text-decoration: none; white-space: nowrap; }
.site-head nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; margin-left: auto; align-items: center; }
.site-head nav a { font-size: 0.88rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s ease; }
.site-head nav a:hover { color: var(--fg-bright); }
.basket-count { background: var(--accent); color: var(--accent-contrast); border-radius: 4px; padding: 0 0.4rem; font-size: 0.75rem; font-weight: 700; }
/* The header is sticky only where it fits on one line (measured: it wraps below 760px with the
   widest nav). A wrapped sticky header would cover the top of every unit a link jumps to, so on
   narrower screens it scrolls away and reserves no space. */
@media (max-width: 799px) {
  :root { --head-h: 0rem; }
  .site-head { position: static; }
}
/* A labelled button, as on the author's site: it names the theme it switches to. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; padding: 5px 12px;
  background: var(--raised); border: 1px solid var(--rule); color: var(--fg-bright); border-radius: 6px;
  font: 600 0.75rem/1.2 var(--sans); cursor: pointer; transition: border-color .15s ease;
}
.theme-toggle:hover { border-color: var(--accent); }
.dev-flag { font: 600 0.7rem var(--sans); text-transform: uppercase; color: var(--draft); border: 1px solid var(--draft); border-radius: 3px; padding: 0 0.3rem; }
.site-foot { max-width: var(--measure); margin: 0 auto; padding: 1.5rem 16px 3rem; border-top: 1px solid var(--rule); color: var(--muted); font: 0.86rem/1.6 var(--sans); }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--fg-bright); }

/* Badges */
.badge {
  display: inline-block; font: 600 0.7rem/1.5 var(--sans); letter-spacing: 0.01em;
  border-radius: 4px; padding: 0.05rem 0.45rem; vertical-align: 0.08em;
  background: color-mix(in oklab, currentColor 12%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 45%, transparent);
}
.badge-original { color: var(--original); }
.badge-adapted { color: var(--adapted); }
.badge-quoted { color: var(--quoted); }
.status { font: 600 0.7rem/1.5 var(--sans); padding: 0.05rem 0.45rem; border-radius: 4px; background: color-mix(in oklab, currentColor 12%, transparent); border: 1px solid color-mix(in oklab, currentColor 45%, transparent); }
.status-verified { color: var(--original); }
.status-draft { color: var(--draft); }
.status-needs-human { color: var(--hold); }
.legend { list-style: none; padding: 0; font-size: 0.95rem; }
.legend li { margin: 0.3rem 0; }

/* Contents */
.part h2 { border-bottom: 1px solid var(--rule); padding-bottom: 0.3rem; }
.chapters { list-style: none; padding: 0; }
.chapters li { margin: 0.8rem 0; }
.chapters a { font-family: var(--sans); font-weight: 600; }
.chapters p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.95rem; }
.count { color: var(--muted); font: 0.8rem var(--sans); }
.sub { color: var(--muted); font: 0.85rem/1.5 var(--sans); margin: 0.3rem 0 0; }
.toc-buttons { display: flex; gap: 0.5rem; margin: 0.75rem 0 0; }
.foot-links { margin-top: 0.75rem; }
.foot-author { margin-top: 0.25rem; }
.foot-author a { color: var(--link); }
.foot-links a { color: var(--muted); }

/* Chapter page */
.crumbs { font: 0.875rem var(--sans); color: var(--muted); }
.chapter-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.button {
  display: inline-flex; align-items: center; gap: 6px; font: 600 0.86rem/1.25 var(--sans); padding: 0.5rem 1rem; border-radius: 6px;
  border: 1px solid var(--rule); background: transparent; color: var(--fg-bright); text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.button:hover { border-color: var(--accent); background: var(--raised); color: var(--fg-bright); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.chapter-toc { border: 1px solid var(--rule); border-radius: 6px; padding: 0.8rem 1.15rem; font: 0.92rem var(--sans); margin: 1.5rem 0; background: var(--surface); }
.chapter-toc ol, .chapter-toc ul { list-style: none; padding-left: 0; }
.chapter-toc ul { padding-left: 1rem; }
.chapter-toc li { margin: 0.22rem 0; }
.chapter-toc .ctoc-section, .chapter-toc .ctoc-unit { display: grid; grid-template-columns: 1.3rem 1fr; align-items: baseline; }
.chapter-toc .ctoc-section > ul { grid-column: 1 / -1; }
.chapter-toc .ctoc-section > a { font-weight: 600; }
.chapter-toc .toc-check { align-self: center; }
.chapter-toc .sub { margin: 0.3rem 0 0.5rem; }
.chapter-toc a { color: var(--fg); text-decoration: none; }
.chapter-toc a:hover { text-decoration: underline; text-underline-offset: 2px; }
.chapter-toc summary { cursor: pointer; font-weight: 600; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; }
.chapter-toc ul { margin: 0.2rem 0 0.4rem; }
.chapter-section > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 0.6rem; margin-top: 3rem; border-bottom: 1px solid var(--hair); }
.chapter-section > summary::-webkit-details-marker { display: none; }
.chapter-section > summary h2 { margin: 0 0 0.3rem; flex: 1; }
/* A disclosure arrow drawn in text so it inherits colour and needs no asset. */
.chapter-section > summary::before {
  content: '\25be'; color: var(--muted); font: 0.8rem var(--sans); line-height: 1;
  transition: transform .15s ease; transform-origin: center;
}
.chapter-section:not([open]) > summary::before { transform: rotate(-90deg); }
.chapter-section:not([open]) > summary { opacity: 0.75; }
.chapter-section > summary:hover { opacity: 1; }
.chapter-section > summary:hover h2 { color: var(--link); }

/* Units */
.unit { margin: 3rem 0 3.25rem; }
.unit-head { display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; align-items: baseline; border-bottom: 1px solid var(--hair); padding-bottom: 0.55rem; }
.unit-kind { grid-column: 1 / -1; margin: 0 0 0.1rem; font: 600 0.7rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; }
.unit-head h3 { margin: 0.1rem 0; font-size: 1.32rem; font-weight: 660; }
.unit-head h3 a { color: inherit; text-decoration: none; }
.unit-badges { margin: 0; }
/* Still a real checkbox (keyboard, screen readers and the basket all use it), drawn as a small
   toggle under the provenance badge so it reads as an action on the unit, not a stray form field. */
.basket-toggle {
  grid-column: 2; justify-self: end; display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem;
  font: 500 0.76rem var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.12rem 0.6rem 0.12rem 0.45rem;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.basket-toggle:hover { color: var(--fg); border-color: var(--muted); }
.basket-toggle input { margin: 0; width: 0.85rem; height: 0.85rem; accent-color: var(--accent); cursor: pointer; }
.basket-toggle:has(input:checked) { color: var(--link); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.basket-toggle:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }

.unit-summary { color: var(--muted); font-style: italic; }
.unit-prereqs { font: 0.9rem var(--sans); color: var(--muted); }
.xref-missing { color: var(--muted); border-bottom: 1px dotted var(--muted); }

/* Blocks */
.block { margin: 1.5rem 0; padding: 0.1rem 0 0.1rem 1.15rem; border-left: 2px solid var(--rule); }
.block.prov-original { border-left-color: color-mix(in oklab, var(--original) 55%, transparent); }
.block.prov-adapted { border-left-color: color-mix(in oklab, var(--adapted) 55%, transparent); }
.block.prov-quoted { border-left-color: color-mix(in oklab, var(--quoted) 55%, transparent); font-style: italic; }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; font-family: var(--sans); font-size: 0.95rem; }
.block-label { font-weight: 650; }
.block-title { color: var(--muted); }
.block-src { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); }
.block-src a { color: inherit; }
.block > :last-child { margin-bottom: 0.4rem; }
blockquote.block { margin-left: 0; margin-right: 0; }
.unit-sources { margin-top: 1rem; font: 0.85rem/1.5 var(--sans); color: var(--muted); }
.unit-sources h4 { margin: 0; font-size: 0.85rem; }
.unit-sources ul { margin: 0.2rem 0; padding-left: 1.2rem; }

/* Bibliography, tables */
.bibliography li { margin: 0.8rem 0; }
.bibliography p { margin: 0; }
.cited-by { font: 0.85rem var(--sans); color: var(--muted); }
table { border-collapse: collapse; width: 100%; font: 0.9rem var(--sans); display: block; overflow-x: auto; }
th, td { text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--rule); }

/* Basket page */
.basket-group h3 { font-size: 1rem; margin: 1.5rem 0 0.3rem; }
.basket-list { list-style: none; padding: 0; margin: 0; }
.basket-list li { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid var(--rule); }
.basket-list li span { flex: 1; }
.basket-list button { font: 0.8rem var(--sans); background: none; border: none; color: var(--hold); cursor: pointer; }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 0.75rem 1rem; margin: 1rem 0; font-family: var(--sans); font-size: 0.95rem; }
.panel label { display: block; margin: 0.25rem 0; }
.panel input[type='text'] { width: 100%; font: inherit; padding: 0.4rem 0.55rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); color: var(--fg); }

/* In-progress panel: local builds only */
.inflight { border: 1px solid var(--rule); border-radius: 8px; padding: 0.9rem 1.1rem; margin: 1.5rem 0; }
.inflight h2 { margin-top: 0; }
.inflight-tiles { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0 0 0.8rem; font: 0.85rem var(--sans); color: var(--muted); }
.inflight-tiles b { font-size: 1.25rem; display: block; line-height: 1.2; color: var(--fg); }
.inflight-tiles b.ok { color: var(--original); } .inflight-tiles b.work { color: var(--draft); } .inflight-tiles b.hold { color: var(--hold); }
.inflight-table { font-size: 0.82rem; }
.inflight-table code { font-size: 0.75rem; }
.inflight .sub { color: var(--muted); font: 0.8rem var(--sans); margin: 0.5rem 0 0; }

/* ---- Table of contents (home page) ---------------------------------------------------- */
.toc-jump { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1.25rem 0; }
.toc-jump a {
  font: 500 0.8rem var(--sans); text-decoration: none; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 6px; padding: 0.22rem 0.65rem; background: var(--surface);
  transition: color .15s ease, border-color .15s ease;
}
.toc-jump a:hover { border-color: var(--accent); color: var(--fg-bright); }


.toc-part > h2 { display: flex; align-items: center; gap: 0.5rem; margin-top: 2rem; }
.toc-check { display: inline-flex; align-items: center; cursor: pointer; }
.toc-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; margin: 0; }

details.toc-chapter { border-left: 1px solid var(--rule); margin: 0.5rem 0 0.5rem 0.5rem; padding-left: 0.9rem; }
details.toc-chapter > summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none;
  font: 600 1rem var(--sans); padding: 0.25rem 0;
}
details.toc-chapter > summary::-webkit-details-marker { display: none; }
/* The fold arrow sits OUTSIDE the title: the title is a link to the chapter, and a click on the
   arrow must still fold rather than navigate. */
.toc-fold::before { content: '▸'; color: var(--muted); margin-right: 0.4rem; font-size: 0.8em; }
details[open] > summary .toc-fold::before { content: '▾'; }
.toc-chapter-title { flex: 1; color: inherit; text-decoration: none; }
.toc-chapter-title:hover, .toc-chapter-title:focus-visible { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.toc-open { font: 0.78rem var(--sans); color: var(--muted); text-decoration: none; }
.toc-open:hover { color: var(--link); }
.toc-chapter-summary { margin: 0 0 0.4rem 1.6rem; color: var(--muted); font: 0.88rem/1.45 var(--sans); }

.toc-section-head { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0.2rem 1.6rem; }
.toc-section-head h4 { margin: 0; font: 600 0.84rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.toc-units { list-style: none; margin: 0 0 0.3rem; padding-left: 1.6rem; }
.toc-unit { display: grid; grid-template-columns: auto 1fr auto; gap: 0.1rem 0.5rem; align-items: baseline; padding: 0.34rem 0.4rem 0.34rem 0; border-radius: 5px; border-bottom: 1px solid var(--hair); }
.toc-unit:hover { background: var(--panel); }
.toc-title { font: 0.95rem var(--sans); color: var(--fg); text-decoration: none; }
.toc-title:hover { color: var(--link); text-decoration: underline; }
.toc-tags { display: flex; gap: 0.3rem; align-items: baseline; }
.toc-summary { grid-column: 2 / -1; margin: 0; color: var(--muted); font: 0.82rem/1.4 var(--sans); }
.kind { font: 600 0.68rem/1.5 var(--sans); text-transform: capitalize; color: var(--muted); border-radius: 4px; padding: 0.02rem 0.42rem; white-space: nowrap; background: color-mix(in oklab, currentColor 12%, transparent); border: 1px solid color-mix(in oklab, currentColor 40%, transparent); }
.kind-theorem { color: var(--adapted); }
.kind-definition { color: var(--original); }
.kind-method, .kind-table { color: var(--quoted); }
.kind-advanced { color: var(--draft); }


@media (max-width: 640px) {
  .toc-unit { grid-template-columns: auto 1fr; }
  .toc-tags { grid-column: 2; }
  .toc-summary { grid-column: 2; }
  .toc-units, .toc-section-head { padding-left: 0.6rem; margin-left: 0.6rem; }
  /* Under the badge there is no room on a phone beside a long title; give the toggle its own row. */
  .basket-toggle { grid-column: 1 / -1; justify-self: start; }
}

/* An inline formula is one unbreakable box, so one carrying a long \text{} phrase can be wider
   than a phone. basket.js marks the few paragraphs where that happens, and only those scroll
   sideways, as display maths already does, instead of the whole page. It cannot be every
   paragraph: a scroll container clips vertically too, and tall inline maths (fractions, sums)
   reaches past its line box. The padding gives that maths room inside the container; the
   negative margin keeps the paragraph where it was. */
.math-wide { overflow-x: auto; overflow-y: hidden; padding-block: 0.6em; margin-block: -0.6em; }

/* An explicit `display` beats the browser default for [hidden], so the filter needs this. */
.toc-unit[hidden], .toc-section[hidden], .toc-part[hidden], details.toc-chapter[hidden] { display: none; }

/* ---- One search box ------------------------------------------------------------------------- */
.search { position: relative; margin: 1.6rem 0 2.2rem; }
.search-label { display: block; font: 600 0.8rem var(--sans); color: var(--muted); letter-spacing: 0.02em; margin-bottom: 0.4rem; }
.search-box { position: relative; }
#q {
  width: 100%; font: 500 1rem var(--sans); padding: 0.75rem 2.6rem 0.75rem 0.95rem;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--fg-bright);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#q::placeholder { color: var(--muted); opacity: 0.85; }
#q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.search-key { position: absolute; right: 0.75rem; top: 0.95rem; }
kbd { font: 600 0.7rem var(--mono); color: var(--muted); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 0.05rem 0.35rem; background: var(--raised); }
#q:focus + .search-key, #q:not(:placeholder-shown) + .search-key { display: none; }
.search .sub { margin-top: 0.5rem; }

.search-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 0.35rem;
  max-height: min(70vh, 38rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 0.18); font-family: var(--sans);
}
.sr-group { padding: 0.35rem 0; border-bottom: 1px solid var(--hair); }
.sr-head { margin: 0; padding: 0.45rem 0.95rem 0.25rem; font: 700 0.7rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sr-head span { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 0.35rem; opacity: 0.85; }
.sr-row { display: flex; align-items: center; }
.sr-row .sr-item { flex: 1; min-width: 0; }
.sr-item { display: block; padding: 0.5rem 0.95rem; color: var(--fg); text-decoration: none; border-left: 3px solid transparent; }
.sr-item[aria-selected="true"] { background: var(--panel); border-left-color: var(--accent); }
.sr-title { display: block; font-weight: 600; color: var(--fg-bright); font-size: 0.95rem; line-height: 1.35; }
.sr-title mark, .sr-excerpt mark { background: color-mix(in oklab, var(--accent) 26%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.sr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.2rem; font-size: 0.78rem; color: var(--muted); }
.sr-excerpt { display: block; margin-top: 0.15rem; font-size: 0.84rem; line-height: 1.45; color: var(--fg); }
.sr-pdf { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.8rem; padding: 0.15rem 0.5rem; font: 500 0.72rem var(--sans); color: var(--muted); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.sr-pdf input { margin: 0; accent-color: var(--accent); }
.sr-pdf:has(input:checked) { color: var(--link); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sr-def { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.sr-defcard .sr-title { font-size: 1.02rem; }
.sr-defbody { display: block; margin-top: 0.35rem; font-size: 0.92rem; line-height: 1.6; color: var(--fg); }
.sr-defbody p { margin: 0.25rem 0; }
.sr-defbody .katex-display { margin: 0.35rem 0; overflow-x: auto; overflow-y: hidden; }
.sr-clipped { position: relative; max-height: 12.5em; overflow: hidden; }
.sr-clipped::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2.5em; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--accent) 6%, var(--surface))); }
.sr-loading { color: var(--muted); font-size: 0.85rem; }
.sr-open { margin-left: auto; color: var(--link); font-weight: 600; }
.sr-foot { margin: 0; padding: 0.5rem 0.95rem; font-size: 0.74rem; color: var(--muted); }
.sr-foot kbd { margin: 0 0.1rem; }

/* ---- Toast ------------------------------------------------------------------------------------ */
.toast {
  position: fixed; z-index: 40; left: 50%; bottom: 1.25rem; transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: 0.9rem; max-width: min(36rem, calc(100vw - 32px));
  padding: 0.7rem 0.8rem 0.7rem 1rem; border-radius: 8px; font: 500 0.88rem/1.4 var(--sans);
  background: var(--fg-bright); color: var(--bg); box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease; opacity: 0;
}
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast em { font-style: normal; font-weight: 700; }
.toast-text { flex: 1; min-width: 0; }
.toast-undo, .toast-view { font: 700 0.82rem var(--sans); color: var(--accent-contrast); background: var(--accent); border: 0; border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.toast-undo { background: transparent; color: var(--bg); border: 1px solid color-mix(in oklab, var(--bg) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } .cart.pop { animation: none; } }

/* ---- Floating basket ---------------------------------------------------------------------------- */
.cart { position: fixed; z-index: 30; right: 1rem; bottom: 1rem; font-family: var(--sans); }
.cart-button {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem 0.55rem 0.7rem; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--fg-bright);
  font: 600 0.85rem var(--sans); box-shadow: 0 6px 22px rgb(0 0 0 / 0.16); transition: border-color .15s ease;
}
.cart-button:hover, .cart-button[aria-expanded="true"] { border-color: var(--accent); }
.cart-icon { width: 0.9rem; height: 1.05rem; border: 1.6px solid currentColor; border-radius: 2px; position: relative; }
.cart-icon::after { content: ''; position: absolute; left: 2px; right: 2px; top: 3px; height: 4px; border-top: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; }
.cart-n { min-width: 1.4rem; text-align: center; padding: 0.05rem 0.35rem; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: 0.78rem; font-weight: 700; }
.cart.pop .cart-button { animation: pop .35s cubic-bezier(.2,.8,.2,1.4); }
@keyframes pop { from { transform: scale(.85); } to { transform: scale(1); } }
.cart-panel {
  position: absolute; right: 0; bottom: calc(100% + 0.6rem); width: min(22rem, calc(100vw - 32px));
  max-height: min(65vh, 30rem); overflow-y: auto; padding: 0.9rem 1rem; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 14px 40px rgb(0 0 0 / 0.22);
}
.cart-head { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--fg-bright); }
.cart-chapter { margin: 0.6rem 0 0.15rem; font: 700 0.7rem var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cart-list ul { list-style: none; margin: 0; padding: 0; }
.cart-list li { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.22rem 0; border-bottom: 1px solid var(--hair); font-size: 0.86rem; }
.cart-list li a { flex: 1; color: var(--fg); text-decoration: none; }
.cart-list li a:hover { color: var(--link); text-decoration: underline; }
.cart-list li button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.25rem; }
.cart-list li button:hover { color: var(--hold); }
.cart-more { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--muted); }
.cart-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }
/* The toast sits clear of the floating basket on a phone. */
@media (max-width: 640px) {
  .toast { bottom: 4.6rem; flex-wrap: wrap; gap: 0.6rem; width: calc(100vw - 32px); }
  .toast-text { flex-basis: 100%; }
  .cart-label { display: none; }
}

/* ---- Basket page: list, with prerequisites beside it (wide) or below it (narrow) ---------------- */
@media (min-width: 1000px) {
  body.page-basket main { max-width: 72rem; }
  .basket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2.5rem; align-items: start; }
  .basket-side { position: sticky; top: calc(var(--head-h) + 1rem); max-height: calc(100vh - var(--head-h) - 2rem); overflow-y: auto; }
}
@media (max-width: 999px) { .basket-side { margin-top: 2rem; } }
.prereq-panel { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 0.2rem 1rem 0.9rem; font-family: var(--sans); }
.prereq-panel[data-missing] { border-color: color-mix(in oklab, var(--quoted) 55%, var(--rule)); }
.prereq-panel > summary { display: flex; align-items: baseline; gap: 0.5rem; cursor: pointer; padding: 0.7rem 0 0.4rem; font-weight: 700; color: var(--fg-bright); list-style: none; }
.prereq-panel > summary::-webkit-details-marker { display: none; }
.prereq-panel > summary::before { content: '\25be'; color: var(--muted); font-size: 0.8rem; transition: transform .15s ease; }
.prereq-panel:not([open]) > summary::before { transform: rotate(-90deg); }
.prereq-panel[data-missing] > summary span:first-of-type { color: var(--quoted); }
.prereq-sub { margin-left: auto; font: 500 0.75rem var(--sans); color: var(--muted); }
.prereq-panel .sub { margin: 0 0 0.7rem; font-size: 0.8rem; }
.prereq-panel #add-missing { margin-bottom: 0.8rem; }

/* The reading order as a path: a rail with a dot per unit, hollow for the ones not yet in the basket. */
.reading-order { list-style: none; margin: 0; padding: 0; counter-reset: ro; }
.reading-order li { position: relative; display: flex; gap: 0.7rem; padding: 0 0 0.75rem; counter-increment: ro; }
.reading-order li::before { content: ''; position: absolute; left: 0.39rem; top: 0.9rem; bottom: -0.2rem; width: 2px; background: var(--rule); }
.reading-order li:last-child::before { display: none; }
.ro-dot { position: relative; flex: none; width: 0.8rem; height: 0.8rem; margin-top: 0.3rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--accent); }
.ro-missing .ro-dot { background: var(--surface); border-color: var(--quoted); border-style: dashed; }
.ro-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; min-width: 0; font-size: 0.86rem; line-height: 1.4; }
.ro-body > a { color: var(--fg-bright); text-decoration: none; font-weight: 600; }
.ro-body > a::before { content: counter(ro) '. '; color: var(--muted); font-weight: 500; }
.ro-body > a:hover { color: var(--link); text-decoration: underline; }
.ro-missing .ro-body > a { color: var(--fg); font-weight: 500; }
.ro-needs { flex-basis: 100%; font-size: 0.76rem; color: var(--muted); }
.ro-add { font: 700 0.72rem var(--sans); color: var(--accent-contrast); background: var(--accent); border: 0; border-radius: 4px; padding: 0.1rem 0.45rem; cursor: pointer; }
.ro-add:hover { background: var(--accent-hover); }
.prereq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0 0 0.9rem; }
.prereq-actions #add-missing { margin: 0; }
.prereq-deep { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.prereq-deep input { margin: 0; accent-color: var(--accent); }
.panel input[type='checkbox'] { accent-color: var(--accent); }