/* The Library's reading surface (docs/specs/LIBRARY.md §2a). The books' emphasis is typography:
   asterisk runs from the importers arrive as <em>/<strong>; grades as weight. Literata is the
   reading serif (SIL Open Font License, self-hosted); DM Mono carries every citation and path. */
@font-face { font-family: 'Literata'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('/fonts/literata/Literata-opsz12-400-700.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-weight: 400 700; font-style: italic; font-display: swap; src: url('/fonts/literata/Literata-Italic-opsz12-400-700.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 400; font-display: swap; src: url('/app/fonts/dm-mono/DMMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-weight: 500; font-display: swap; src: url('/app/fonts/dm-mono/DMMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('/app/fonts/atkinson-next/AtkinsonNext-400-700.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-weight: 400 700; font-style: italic; font-display: swap; src: url('/app/fonts/atkinson-next/AtkinsonNext-Italic-400-700.woff2') format('woff2'); }
/* Fallbacks stretched and shifted to the room the web faces take, so the swap moves nothing (CLS).
   Android has Roboto and Noto Serif, desktop Arial and Georgia; a face the device lacks is skipped.
   [measured 2026-10-14: tools/fonts/fallback-metrics.py, mean advance over English letter frequencies plus
   the space, hhea ascent and descent; Literata at wght 400, opsz 12; Arial and Georgia from macOS, Roboto and
   Noto Serif from google/fonts 66928797] */
@font-face { font-family: 'Atkinson Fallback Roboto'; src: local('Roboto'); size-adjust: 99.45%; ascent-override: 98.95%; descent-override: 31.78%; line-gap-override: 0%; }
@font-face { font-family: 'Atkinson Fallback Arial'; src: local('Arial'), local('ArialMT'); size-adjust: 99.98%; ascent-override: 98.42%; descent-override: 31.61%; line-gap-override: 0%; }
@font-face { font-family: 'Literata Fallback Georgia'; src: local('Georgia'); size-adjust: 108.57%; ascent-override: 108.40%; descent-override: 28.37%; line-gap-override: 0%; }
/* The italic and the bold have their own fallbacks: a rubric's grade-2 list is italic and its grade-3 bold, and
   both drew in Georgia's upright regular until Literata's arrived, which moved the rubric page 0.055 CLS at 1280px
   [measured 2026-10-15, tools/perf/library.mjs; metrics from fallback-metrics.py, Literata italic at wght 400, bold at 700]. */
@font-face { font-family: 'Literata Fallback Georgia'; font-style: italic; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 100.01%; ascent-override: 117.69%; descent-override: 30.80%; line-gap-override: 0%; }
@font-face { font-family: 'Literata Fallback Georgia'; font-weight: 700; src: local('Georgia Bold'), local('Georgia-Bold'); size-adjust: 99.64%; ascent-override: 118.12%; descent-override: 30.91%; line-gap-override: 0%; }
@font-face { font-family: 'Literata Fallback Noto Serif'; src: local('Noto Serif'); size-adjust: 99.54%; ascent-override: 118.24%; descent-override: 30.94%; line-gap-override: 0%; }

/* THEME. Three states, not two. The Library never chose dark: it follows the reader's device,
   which after dusk on a doctor's phone is dark. That default stays, and the header button now
   makes it a choice -- system (nothing stamped), then `data-theme="light"`, then `"dark"`.
   Every colour is a token declared in the bare :root block, and the dark values are restated in
   both a media query (guarded so an explicit light choice beats a dark device) and an attribute
   rule (so the toggle wins the other way).

   `--paper-2`, `--muted` and `--amber-ink` were USED before they were declared: the polar-generals
   block set `background: var(--paper-2)` and `color: var(--ink)`, so on a dark device it
   painted near-white text on a near-white card -- unreadable, and shipped [measured 2026-09-19]. */
/* The light paper and inks are the brand's own (DESIGN_SYSTEM §2): vitalisCream, creamDeep,
   caseDark, inkSoft, miasmSlate, amberInk. The Library carried near-misses of each (#FBF8F1,
   #1B211D, #5C635D) and read as another product beside the app (design audit 2026-09-25 #19). */
:root {
  --paper: #FAF3E8; --paper-2: #F1E7D4; --ink: #0F2818; --ink-soft: #3A423D; --muted: #5A6B62;
  --rule: rgba(26, 86, 50, 0.16); --rule-2: rgba(26, 86, 50, 0.28);
  --green: #1A5632; --green-tint: rgba(26, 86, 50, 0.08); --amber: #C48B2C; --amber-ink: #8A5E17;
  --globule: radial-gradient(circle at 35% 35%, #E8C580, #C48B2C 60%, #8B5E1A);
  --shadow: 0 2px 10px rgba(27, 33, 29, 0.10);
  --serif: 'Literata', 'Literata Fallback Georgia', 'Literata Fallback Noto Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Atkinson Hyperlegible Next', 'Atkinson Fallback Roboto', 'Atkinson Fallback Arial', system-ui, sans-serif;
  /* Overlines, citations and codes only (ADR-105). Titles are Literata too: one serif, so a Library page draws no display face (owner, 2026-10-14). */
  --mono: 'DM Mono', ui-monospace, monospace; --display: var(--serif);
  --measure: 68ch;
  /* The reader's text size (settings panel): 17px is the phone floor (LIBRARY.md §2a), and only
     the reading text scales -- the chrome stays put so the controls do not move under a thumb. */
  --read: 17px;
}
:root[data-size="l"] { --read: 19px; }
:root[data-size="xl"] { --read: 21px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15191A; --paper-2: #1C2123; --ink: #ECE7DB; --ink-soft: #B9B3A6; --muted: #9A958A;
    --rule: rgba(143, 184, 154, 0.22); --rule-2: rgba(143, 184, 154, 0.38);
    --green: #8FB89A; --green-tint: rgba(143, 184, 154, 0.12); --amber-ink: #D9A441;
    --shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --paper: #15191A; --paper-2: #1C2123; --ink: #ECE7DB; --ink-soft: #B9B3A6; --muted: #9A958A;
  --rule: rgba(143, 184, 154, 0.22); --rule-2: rgba(143, 184, 154, 0.38);
  --green: #8FB89A; --green-tint: rgba(143, 184, 154, 0.12); --amber-ink: #D9A441;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; }
/* Every `display` rule below outranks the user agent's `[hidden] { display: none }`, so a row the
   filter hid still drew itself as a card, and the back-to-top control sat over the first screen
   of every page [measured 2026-09-19]. One guard, before anything sets a display. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* Two faces with two jobs: the chrome — header, lists, labels, notes — is the brand's Atkinson Hyperlegible Next,
   as in the app; the books' own words (their text, their rubric headings) keep the reading
   serif, Literata, below. */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--read); line-height: 1.55; text-rendering: optimizeLegibility; font-variant-ligatures: common-ligatures; font-synthesis: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--green); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.lib-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 15px; }
.lib-nav .wordmark { line-height: 0; color: var(--ink); display: inline-flex; align-items: center; }
/* The wordmark (DESIGN_SYSTEM §6a, ADR-104): an inline SVG from brand/wordmark.ts, lowercase
   "curanon" with a sugar globule as its o; letters in currentColor, so both reader themes colour it. */
.lib-nav .wordmark-svg { display: block; flex: none; width: auto; height: 20px; }
main[data-reading], .book-text, .prose, .fulltext, .sentence, .passage, .run-in, .rel-line, .search-text, .page-context, .cell-body, .footnote, .rubric, h1.rubric-head, .letter { font-family: var(--serif); }
/* Book prose takes the book's own figures (1805, page numbers read like a book); a table's figures line up. */
.book-text, .prose, .fulltext { font-variant-numeric: oldstyle-nums; }
.reltable { font-variant-numeric: lining-nums tabular-nums; }
.lib-nav nav { display: flex; gap: 4px; }
.lib-nav nav a { padding: 12px 10px; min-height: 48px; display: inline-flex; align-items: center; font-weight: 600; }
.lib { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
.lib-foot { max-width: 860px; margin: 0 auto; padding: 24px 16px 40px; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 14px; color: var(--ink-soft); }

.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin: 8px 0 6px; }
.eyebrow a { color: var(--green); }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 42px); line-height: 1.1; margin: 0 0 12px; text-wrap: balance; }
h1 .abbr { font-family: var(--sans); font-weight: 600; font-feature-settings: 'tnum'; font-size: 0.5em; color: var(--ink-soft); vertical-align: middle; }
h1.rubric-head { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 4vw, 32px); }
h2 { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); border-top: 2px solid var(--green); padding-top: 14px; margin: 36px 0 10px; }
h3 { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); margin: 22px 0 6px; }
.lede { color: var(--ink-soft); font-size: var(--read); max-width: var(--measure); margin: 0 0 8px; text-wrap: pretty; }
.muted { color: var(--ink-soft); }
.cite, .cite-line, .page, .abbr, .counts, .grade-count, code { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.show-page { margin-top: 20px; font-family: var(--sans); font-size: 15px; }
.show-page a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.cite-this { margin-top: 32px; font-family: var(--sans); font-size: 14px; color: var(--ink-soft); }
.cite-this code { background: var(--green-tint); padding: 4px 8px; border-radius: 6px; display: inline-block; margin-top: 4px; word-break: break-word; }

.books, .remedies, .rubrics, .chapters { list-style: none; margin: 8px 0 0; padding: 0; }
.chapters { counter-reset: ch; }
.books li, .remedies li, .rubrics li, .chapters li { border-bottom: 1px solid var(--rule); }
.books a, .remedies a, .rubrics a, .chapters a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 4px; min-height: 48px; align-items: center; }
.books a { grid-template-columns: 1fr; }
.books .title { font-weight: 600; font-size: 18px; }
.books .meta, .remedies .abbr { font-family: var(--sans); color: var(--ink-soft); font-size: 15px; }
.chapters .chapter { font-weight: 600; }
.rubrics .rubric { font-weight: 500; }
.rubrics .page { grid-column: 1 / -1; margin-top: -4px; }
.letters { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0 8px; font-family: var(--mono); }
.letters a { padding: 8px 10px; min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: 8px; }
.letter { font-family: var(--serif); text-transform: none; letter-spacing: 0; font-size: 24px; color: var(--ink); border-top-width: 1px; }

.remedy-grades .grade-head { border: 0; padding-top: 4px; margin: 20px 0 4px; }
/* A rubric's remedies are the book's own words, typeset the way the book printed them (typography memo 3.6):
   Literata, three tiers a reader tells apart at a glance. Grade 3 = bold small capitals on the green tint (capitals
   keep the book's "capitals mean top grade" signal at an even colour), grade 2 = true italic, grade 1 = roman in ink-soft. */
.remedy-list { font-family: var(--serif); font-size: 17px; line-height: 2; margin: 0; }
.remedy-list a { padding: 4px 6px; border-radius: 6px; display: inline-block; }
.remedy-list a.g3 { font-weight: 700; font-variant-caps: all-small-caps; color: var(--ink); background: var(--green-tint); }
.remedy-list a.g2 { font-style: italic; color: var(--ink); }
.remedy-list a.g1 { color: var(--ink-soft); }

.book-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; font-family: var(--sans); font-size: 14px; }
.book-toc a { padding: 8px 14px; min-height: 48px; display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap; }
.book-section { max-width: var(--measure); }
.book-text { margin: 0 0 14px; text-wrap: pretty; hyphens: auto; }
.book-text em { font-style: italic; }
.book-text strong { font-weight: 600; letter-spacing: 0.01em; }
.sentence:target, .book-text:target { background: var(--green-tint); border-radius: 4px; }
.fulltext { font-family: var(--serif); color: var(--ink); }
@media (max-width: 480px) { .lib { padding: 16px 16px 48px; } .lib-nav nav a { padding: 12px 8px; } }

/* Text books: the Organon and Close (kind 'text'). One aphorism per section, its paragraphs in
   Literata; footnotes smaller and indented; the fifth-edition text folded beneath the sixth. */
.prose .aphorism { margin: 0 0 2.2rem; }
.prose .aphorism h2 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 0 0 0.6rem; }
.prose .aphorism h2 .ed { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-left: 0.6rem; vertical-align: middle; }
.prose .passage { font-family: var(--serif); font-size: calc(var(--read) + 1px); line-height: 1.65; margin: 0 0 1rem; max-width: 42em; hyphens: auto; }
.prose .run-in { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 1.4rem 0 0.4rem; }
.prose .footnote { font-family: var(--serif); font-size: 0.95rem; line-height: 1.55; color: var(--muted); margin: 0 0 0.8rem 1.5rem; max-width: 40em; }
.prose .variant { margin: 0.4rem 0 0 0; border-left: 2px solid var(--rule); padding-left: 1rem; }
.prose .variant summary { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted); cursor: pointer; margin-bottom: 0.6rem; }
.prose .variant .passage { font-size: var(--read); }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; font-family: var(--sans); }

/* Polar generals on a remedy page (POLAR.md §4): a small table above the books. */
.polar { margin: 1.6rem 0 2.4rem; padding: 1.2rem 1.4rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper-2); }
.polar h2 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; margin: 0 0 0.3rem; }
.polar .paxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem 1.6rem; margin-top: 1rem; }
.polar .paxis h3 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.35rem; }
.polar .paxis ul { list-style: none; margin: 0; padding: 0; }
.polar .paxis li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-family: var(--sans); font-size: 0.98rem; line-height: 1.45; padding: 0.2rem 0; }
.polar .pval { color: var(--ink); }
.polar .pbooks { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.polar .pbook { font-family: var(--mono); font-size: 0.72rem; padding: 0.05rem 0.45rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); text-decoration: none; }
.polar .pbook:hover { border-color: var(--green); color: var(--green); }
.polar .disagree h3 { color: var(--amber-ink); }
.polar .pflag { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 0.8rem; color: var(--amber-ink); margin-left: 0.4rem; }


/* ── Reading controls ──────────────────────────────────────────────────────────────────────
   Three things a long book page needs and had none of: a way back to the top, a way to jump
   between its parts without scrolling, and a way to narrow a list of two thousand names.
   All three are progressive: the markup works with JavaScript off, and `library.js` reveals
   the parts that need it. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.small { font-size: 14px; }

.settings-btn { appearance: none; background: none; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); font-size: 16px; line-height: 1; min-width: 48px; min-height: 48px; margin-left: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 20px; }
.settings-btn:hover, .settings-btn[aria-expanded="true"] { color: var(--green); border-color: var(--rule-2); }

.to-top { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  width: 48px; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule-2); box-shadow: var(--shadow); font-size: 20px; }
.to-top:hover { color: var(--green); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 6px; }
.filter { flex: 1 1 260px; display: block; }
.filter input { width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule-2); border-radius: 10px; padding: 11px 14px; min-height: 48px; }
.filter input::placeholder { color: var(--muted); }
.filter-count { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.filter-empty { font-family: var(--sans); color: var(--muted); margin: 18px 0; }

/* The jump navs stay put while the reader scrolls, which is the whole reason they exist. */
.letters.sticky, .book-toc { position: sticky; top: 0; z-index: 10; background: var(--paper); padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
/* Anything with an id is a jump target, and a jump target that lands under the sticky nav is a
   broken link as far as the reader is concerned. */
[id] { scroll-margin-top: 104px; }
.book-toc .toc-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); align-self: center; margin-right: 2px; }
.in-page { margin: 20px 0 28px; padding: 14px 18px; border: 1px solid var(--rule); border-left: 3px solid var(--green); border-radius: 10px; background: var(--paper-2); }
.in-page h2 { border: 0; padding: 0; margin: 0 0 6px; }
.in-page ol { margin: 0; padding-left: 1.2em; font-family: var(--sans); font-size: 15px; }
.in-page li { margin: 4px 0; }
.in-page a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); }

/* ── Relationship books (Gibson Miller, Knerr) ─────────────────────────────────────────────
   The book is a printed table, so it is a table here: one row per remedy, the book's own column
   headings, every abbreviation a link. Below the breakpoint each row becomes a card with the
   column heading as the label, because six columns on a phone is not a table, it is a mess. */
.reltable-wrap { margin: 10px -16px 0; padding: 0 16px; }
.reltable { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.reltable thead th { position: sticky; top: 0; z-index: 5; background: var(--paper); text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 10px 8px; border-bottom: 2px solid var(--green); }
.reltable tbody tr { border-bottom: 1px solid var(--rule); }
.reltable tbody tr:target { background: var(--green-tint); }
/* The remedy column shrinks to its longest name; the book's own columns take what is left.
   Left to itself the browser gave the names a quarter of the table and squeezed "Antidotes"
   down to one abbreviation a line. */
.reltable th[scope="row"] { text-align: left; vertical-align: top; padding: 12px 10px; white-space: nowrap; width: 1%; }
.reltable thead th { text-wrap: balance; }
.reltable td { min-width: 9ch; }
.reltable th[scope="row"] .rname { display: block; font-family: var(--serif); font-weight: 600; font-size: 16px; }
.reltable th[scope="row"] .rabbr { display: block; font-family: var(--sans); font-weight: 600; font-feature-settings: 'tnum'; font-size: 12px; color: var(--muted); }
.reltable td { vertical-align: top; padding: 12px 10px; line-height: 2; }
.reltable .nil { color: var(--rule-2); }
.reltable .cell-body { display: block; }
.chip { font-family: var(--sans); font-weight: 600; font-feature-settings: 'tnum'; font-size: 13px; padding: 3px 7px; border-radius: 6px; background: var(--green-tint); color: var(--ink); display: inline-block; }
.chip:hover { background: var(--green); color: var(--paper); }
.dur { font-family: var(--sans); font-weight: 600; font-feature-settings: 'tnum'; font-size: 15px; color: var(--ink); white-space: nowrap; }
.cell-note { display: block; margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--ink-soft); white-space: normal; }

@media (min-width: 821px) { .reltable-wrap { max-width: min(1180px, 96vw); margin-left: calc((100% - min(1180px, 96vw)) / 2); overflow-x: auto; } }
/* Blocks: always on a phone, and at every width for a book that was never a grid. */
.reltable.blocks, .reltable.blocks tbody, .reltable.blocks tr, .reltable.blocks td, .reltable.blocks th { display: block; }
.reltable.blocks thead { display: none; }
.reltable.blocks tbody tr { border: 1px solid var(--rule); border-radius: 12px; padding: 4px 16px 12px; margin: 14px 0; background: var(--paper-2); }
.reltable.blocks th[scope="row"] { padding: 12px 0 8px; border-bottom: 1px solid var(--rule); white-space: normal; width: auto; }
.reltable.blocks th[scope="row"] a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.reltable.blocks th[scope="row"] .rname, .reltable.blocks th[scope="row"] .rabbr { display: inline; }
.reltable.blocks td { padding: 8px 0 2px; }
.reltable.blocks td:has(.nil) { display: none; }
.reltable.blocks td::before { content: attr(data-h); display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
@media (min-width: 821px) {
  /* Wide enough to set the heading beside its remedies rather than above them. */
  .reltable.blocks td { display: grid; grid-template-columns: 160px 1fr; gap: 0 18px; align-items: baseline; }
  .reltable.blocks td::before { line-height: 2; }
}
@media (max-width: 820px) {
  .reltable, .reltable tbody, .reltable tr, .reltable td, .reltable th { display: block; }
  .reltable thead { display: none; }
  .reltable tbody tr { border: 1px solid var(--rule); border-radius: 12px; padding: 4px 12px 10px; margin: 12px 0; background: var(--paper-2); }
  .reltable th[scope="row"] { padding: 10px 0 6px; border-bottom: 1px solid var(--rule); white-space: normal; width: auto; }
  .reltable td { padding: 8px 0 2px; }
  .reltable td:empty, .reltable td:has(.nil) { display: none; }
  .reltable td::before { content: attr(data-h); display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); line-height: 1.6; }
}
/* ── Duration and relationships on a remedy page ──────────────────────────────────────────── */
.duration { margin: 18px 0 8px; padding: 14px 18px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--paper-2); }
.duration h2 { border: 0; padding: 0; margin: 0 0 8px; }
.duration ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.duration li { display: flex; align-items: baseline; gap: 10px; }
.duration .dur-value { font-family: var(--sans); font-weight: 600; font-feature-settings: 'tnum'; font-size: 20px; color: var(--ink); }
.duration .dur-book { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.duration .small { margin: 10px 0 0; }

.relations .rel-book { margin: 0 0 22px; }
.relations .rel-book h3 { margin: 18px 0 8px; font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.relations .rel-book h3 a:hover { color: var(--green); }
.rel-line { display: grid; grid-template-columns: 190px 1fr; gap: 4px 16px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--rule); }
.rel-line h4 { margin: 0; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rel-line .chips { margin: 0; line-height: 2; }
.rel-in { margin-top: 10px; }
.rel-in summary { font-family: var(--sans); font-size: 14px; color: var(--muted); cursor: pointer; padding: 6px 0; }
@media (max-width: 600px) { .rel-line { grid-template-columns: 1fr; } }


/* ── Reading experience v2 (LIBRARY.md §10) ───────────────────────────────────────────────── */
.skip { position: absolute; left: 16px; top: -64px; z-index: 50; padding: 12px 16px; background: var(--green); color: var(--paper); border-radius: 8px; font-family: var(--sans); font-weight: 600; }
.skip:focus { top: 8px; }
.lib-nav nav { align-items: center; }
.nav-search { gap: 6px; }
.nav-search .icon { display: block; }
/* At 360px the wordmark, Library, Search, Aa and Sign in do not fit on one line; Sign in is in
   the footer too, so it is the one that goes. */
/* The reader's door into the clinic (revenue audit 2026-10-07 #8): "Create free account", and on a
   phone the two words that fit. library.js hides it for a signed-in reader. */
.nav-create { color: var(--green); }
.nav-create-short { display: none; }
.nav-create[hidden] { display: none !important; }
@media (max-width: 440px) { .nav-create-long { display: none; } .nav-create-short { display: inline; } }
/* "Sign up" fits one line from 375px with the links' side padding and gaps given back; below that
   (320px) the header keeps its old four items and the footer's "Create free account" is the door
   (library-brand.spec.ts measures the header at 320 and 390px). */
@media (max-width: 400px) { .lib-nav nav { gap: 0; } .lib-nav nav a { padding: 12px 6px; } .lib-nav a.wordmark .wordmark-svg { height: 12px; } }
@media (max-width: 374px) { .lib-nav .nav-create { display: none !important; } }
@media (max-width: 440px) { .nav-signin { display: none !important; } .nav-search .nav-label { display: none; } .nav-search { min-width: 48px; justify-content: center; } .lib-nav .wordmark-svg { height: 14px; } .lib-nav { gap: 8px; } }

.settings { border-bottom: 1px solid var(--rule); background: var(--paper-2); padding: 12px 16px; font-family: var(--sans); }
.settings-row { max-width: 860px; margin: 0 auto 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.settings-label { flex: 0 0 100%; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 600px) { .settings-label { flex: 0 0 120px; } }
.settings-row button { appearance: none; min-height: 48px; padding: 8px 14px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.settings-row button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--paper); font-weight: 600; }

/* Jump indexes on a phone: one row that scrolls sideways inside itself, 64px tall, instead of four
   wrapped rows pinned over a quarter of the screen [measured 2026-09-25: ≈200px of 800 at 360px]. */
@media (max-width: 700px) {
  .letters.sticky, .book-toc { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .letters.sticky::-webkit-scrollbar, .book-toc::-webkit-scrollbar { display: none; }
  .letters.sticky a, .book-toc a, .book-toc .toc-label { flex: 0 0 auto; }
  [id] { scroll-margin-top: 84px; }
}

/* Search */
.search { display: flex; gap: 8px; margin: 16px 0 8px; }
.search-field { flex: 1 1 auto; min-width: 0; }
.search-field input { width: 100%; min-height: 48px; font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 12px; padding: 11px 14px; }
.search-field input::placeholder { color: var(--muted); }
.search-go { flex: 0 0 auto; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--green); color: var(--paper); font-family: var(--sans); font-weight: 600; font-size: 16px; cursor: pointer; }
.search-go.quiet { background: none; color: var(--green); border: 1px solid var(--rule-2); }
/* Ask the books ✦ (LIBRARY.md §5): amber, the AI's colour, never the green of an action here. */
.ask { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; padding: 14px; border: 1px solid var(--rule-2); border-left: 3px solid var(--amber); border-radius: 12px; background: var(--paper-2); }
.ask-head { flex: 1 0 100%; margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--amber-ink); }
.ask .search-field { flex: 1 1 14rem; }
.ask-go { flex: 0 0 auto; min-height: 48px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--amber); color: #0F2818; font-family: var(--sans); font-weight: 600; font-size: 16px; cursor: pointer; }
.ask-note { flex: 1 0 100%; margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.search-tips { font-family: var(--sans); font-size: 15px; color: var(--ink-soft); padding-left: 1.2em; }
.search-tips li { margin: 6px 0; }
.search-scope, .search-reading, .search-count, .search-none { font-family: var(--sans); font-size: 15px; color: var(--ink-soft); }
.search-reading a, .search-scope a, .search-more a, .inline-link, .read-on a, .page-link, .see-ref a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); }
.chips-row { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 6px 14px; border: 1px solid var(--rule-2); border-radius: 999px; font-family: var(--sans); font-size: 15px; }
.search-book h2 a { color: inherit; }
.search-rows { list-style: none; margin: 4px 0 0; padding: 0; }
.search-rows li { border-bottom: 1px solid var(--rule); }
.search-hit { display: block; padding: 12px 4px; min-height: 48px; }
.search-path { display: block; font-weight: 500; }
.search-where { display: block; font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); margin-bottom: 2px; }
.search-text { display: block; max-width: var(--measure); color: var(--ink); }
.search-meta { display: block; font-family: var(--mono); font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.search-grade { margin-right: 10px; color: var(--ink); font-weight: 500; }
.search-more { margin: 10px 0 0; font-family: var(--sans); font-size: 15px; }
mark { background: var(--green-tint); color: inherit; font-weight: 600; border-radius: 3px; padding: 0 1px; box-shadow: inset 0 -2px 0 var(--rule-2); }

/* A printed page of a repertory: the book's tree, indented by level. */
.page-rubrics .lvl-1 a { padding-left: 20px; }
.page-rubrics .lvl-2 a { padding-left: 36px; }
.page-rubrics .lvl-3 a, .page-rubrics .lvl-4 a { padding-left: 52px; }
.goto { display: flex; align-items: flex-end; gap: 8px; margin: 20px 0 8px; font-family: var(--sans); }
.goto label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-soft); }
.goto input { width: 7em; min-height: 48px; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 10px; padding: 8px 12px; }
.goto button { min-height: 48px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--paper); color: var(--green); font: inherit; font-weight: 600; cursor: pointer; }
.pager a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; color: var(--green); font-weight: 600; }

/* Kent's "(See …)" resolved to the rubric it names. */
.see-ref { margin: -2px 0 10px; padding: 0 4px; font-family: var(--sans); font-size: 15px; line-height: 1.9; }
.see-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.see-sep { color: var(--muted); }
h1 + .lede + .see-ref { margin: 8px 0 0; }

/* Remedy names: hidden to the eye until asked for, always there for a screen reader. */
.remedy-list .fn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root[data-names="full"] .remedy-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 12px; line-height: 1.5; }
:root[data-names="full"] .remedy-list a { display: flex; gap: 10px; align-items: baseline; min-height: 40px; padding: 8px 6px; border-radius: 6px; }
:root[data-names="full"] .remedy-list .fn { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-family: var(--serif); text-transform: none; font-variant-caps: normal; font-size: var(--read); }
.grades-bar { display: flex; justify-content: flex-end; margin-top: 12px; }
.names-btn, .copy-btn { appearance: none; min-height: 48px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--paper); color: var(--green); font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; }
.names-btn[aria-pressed="true"] { background: var(--green-tint); }
.grade-n { font-family: var(--mono); font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.cite-this { display: grid; gap: 6px; justify-items: start; }
.cite-this p { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.read-on { font-family: var(--sans); font-size: 15px; margin: 4px 0 24px; }
.continue h2 { margin-top: 28px; }
.continue .rubrics a { grid-template-columns: 1fr; }
.continue .when { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.resume { position: sticky; top: 8px; z-index: 12; display: flex; justify-content: center; margin: 0 0 12px; }
.resume a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule-2); box-shadow: var(--shadow); font-family: var(--sans); font-weight: 600; color: var(--green); }

/* Tap a paragraph: it is marked, and a bar offers its citation and its link. */
[data-cite] .book-text[id], [data-cite] .sentence[id], [data-cite] .passage[id], [data-cite] .footnote[id] { cursor: pointer; border-radius: 4px; }
.is-selected { background: var(--green-tint); box-shadow: 0 0 0 4px var(--green-tint); }
.cite-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--paper-2); border-top: 1px solid var(--rule-2); box-shadow: var(--shadow); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); font-family: var(--sans); }
.cite-bar-text { max-width: 860px; margin: 0 auto 8px; font-family: var(--mono); font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.cite-bar-actions { max-width: 860px; margin: 0 auto; display: flex; gap: 8px; }
.cite-bar-actions button { appearance: none; min-height: 48px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cite-bar-actions [data-cite-close] { margin-left: auto; min-width: 48px; font-size: 20px; }
.cite-bar-status { max-width: 860px; margin: 6px auto 0; min-height: 1em; font-size: 14px; color: var(--green); }

@media (prefers-reduced-motion: no-preference) {
  .settings:not([hidden]), .cite-bar:not([hidden]) { animation: lib-enter 180ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes lib-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Print: the book and its citation, never the chrome. A heading stays with its first lines. */
@media print {
  .lib-nav, .lib-foot, .book-toc, .letters, .to-top, .skip, .settings, .cite-bar, .toolbar, .search, .goto, .pager, .names-btn, .copy-btn, .resume, .continue, .show-page, .read-on { display: none !important; }
  :root { --paper: #fff; --paper-2: #fff; --ink: #000; --ink-soft: #222; --muted: #444; --green: #000; --read: 11pt; }
  body { background: #fff; color: #000; }
  .lib { max-width: none; padding: 0; }
  h1, h2, h3 { break-after: avoid; }
  .book-text, .passage { orphans: 3; widows: 3; }
  .letters.sticky, .reltable thead th { position: static; }
  a { text-decoration: none; }
}

/* 48px touch bounds for the standalone links the v2 audit measured short (in-page contents 18px,
   "All N in Kent" 18px, a result group's book name 18px, the wordmark 34px). Links inside a
   sentence stay inline, as WCAG 2.5.8 allows. */
.lib-nav .wordmark, .search-more a, .search-book h2 a, .in-page li a, .continue .rubrics a { display: inline-flex; align-items: center; min-height: 48px; }
.in-page li { margin: 0; }
.page-context { padding: 14px 4px 4px; font-weight: 600; color: var(--ink-soft); }
.page-context .cont { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rubrics .see-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.rubrics .see-ref a, .see-ref a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; grid-template-columns: none; }
/* "Practise this rubric" into Learn: one quiet line under the grades, never a banner (teardown item 9). */
.practise { margin: 4px 0 12px; font-family: var(--sans); font-size: 15px; }
.practise a { display: inline-flex; align-items: center; min-height: 48px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2); }
.section-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 20px; font-family: var(--sans); font-size: 14px; }
.section-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; }
main:focus { outline: none; }
/* The page a rubric starts on is the student's answer ("locate the rubric"), so it is a real
   target, not a word in a line; a book's heading on the all-books page opens that book alone. */
.lede .page-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; margin: 0 2px; border: 1px solid var(--rule-2); border-radius: 999px; text-decoration: none; font-family: var(--mono); font-size: 15px; vertical-align: middle; }
.book-section > h2 a { display: inline-flex; align-items: center; min-height: 48px; }
.imprint { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); max-width: var(--measure); margin: 0 0 8px; }
.search-note { font-family: var(--sans); font-size: 15px; color: var(--amber-ink); }
/* A section head and its Cite button on one line; the button is 48px tall and never wraps the heading. */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sec-head > h2, .sec-head > h3 { flex: 1 1 auto; }
.cite-sec { flex: 0 0 auto; appearance: none; min-height: 48px; min-width: 48px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font-family: var(--sans); font-size: 13px; cursor: pointer; }
.cite-sec:hover, .cite-sec:focus-visible { color: var(--green); border-color: var(--rule-2); }
.prose .aphorism .sec-head h2 { margin: 0; }
@media print { .cite-sec { display: none !important; } }

/* The saved-copy line library-sw.js adds above a page served with no connection: the amber ink of
   a state, never an error red; and the list of saved pages when the one asked for is not kept. */
.lib-offline { max-width: 860px; margin: 12px auto 0; padding: 10px 16px; border-radius: 8px; background: var(--paper-2); color: var(--amber-ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
.lib-offline-list { padding-left: 1.2em; font-family: var(--serif); font-size: var(--read); line-height: 1.6; }
@media print { .lib-offline { display: none !important; } }

/* The meter's wall and a reader's saved pages (ADR-096, LIBRARY.md §7a). The wall sits under the
   page's own heading, so the reader still sees what they opened; what follows it is hidden, not
   removed (the full text stays in the HTML every crawler and reader receives). One green action. */
main[data-walled] > .meter-wall ~ * { display: none !important; }
.meter-wall { margin: 20px 0 32px; padding: 22px 20px; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--paper-2); box-shadow: var(--shadow); font-family: var(--sans); }
.meter-wall h2 { border: 0; padding: 0; margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.2; }
.meter-wall p { margin: 0 0 14px; font-size: 17px; }
.meter-wall .meter-adds { margin: 16px 0 0; font-size: 15px; color: var(--ink-soft); }
.meter-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.meter-actions a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 12px; font-weight: 600; font-size: 16px; }
.meter-primary { background: var(--green); color: var(--paper); }
.meter-primary:hover { color: var(--paper); opacity: 0.92; }
.meter-secondary { border: 1px solid var(--rule-2); color: var(--green); }
@media (max-width: 420px) { .meter-actions a { flex: 1 1 100%; } }
.save-btn { appearance: none; min-height: 48px; margin: 4px 0 12px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--paper); color: var(--green); font: inherit; font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; }
.save-btn[aria-pressed="true"] { background: var(--green-tint); }
.saved-list ul { list-style: none; margin: 0; padding: 0; }
.saved-list li a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--rule); }
@media print { .save-btn { display: none !important; } }

/* ── The running head and the peek panel (LIBRARY.md §10h) ──────────────────────────────────
   The running head is one 48px bar, fixed to the top once the page's heading has scrolled away:
   book › chapter › section, previous / next section, and a 2px line for how far down the page the
   reader is. It replaces the sticky letter and book indexes (they stay at the top as contents), so
   a phone never pins more than 48px. A line of chrome, not a box: no border, a hairline shadow. */
.rh { position: fixed; top: 0; left: 0; right: 0; z-index: 25; height: 48px; background: var(--paper); box-shadow: inset 0 -1px 0 var(--rule), var(--shadow); font-family: var(--sans); font-size: 14px; }
.rh-inner { max-width: 860px; height: 48px; margin: 0 auto; display: flex; align-items: center; padding: 0 4px; }
.rh-step { appearance: none; flex: 0 0 48px; width: 48px; height: 48px; border: 0; border-radius: 999px; background: none; color: var(--green); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.rh-step:disabled { color: var(--rule-2); cursor: default; }
.rh-trail { flex: 1 1 auto; min-width: 0; height: 48px; line-height: 48px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); }
.rh-trail > span + span::before { content: ' › '; color: var(--muted); }
.rh-trail > span:last-child { color: var(--ink); font-weight: 600; }
.rh-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.rh-progress > span { display: block; height: 100%; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; }
/* On a phone the book and chapter make way for where the reader is: the last two levels show. */
@media (max-width: 600px) { .rh-trail > span:not(:nth-last-child(-n+2)) { display: none; } .rh-trail > span:nth-last-child(2)::before { content: none; } }
.has-rh .letters.sticky, .has-rh .book-toc { position: static; }
.has-rh .resume { top: 56px; }

/* The peek panel: a column beside the text from 1100px; below that a link opens its page (§10j).
   Its text is the page's own markup and takes the reader's text size and paper like the page. */
.peek { position: fixed; z-index: 40; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.18); }
.peek-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; padding: 0 4px; border-bottom: 1px solid var(--rule); }
.peek-bar button { appearance: none; flex: 0 0 48px; width: 48px; height: 48px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.peek-bar button:hover { color: var(--green); }
.peek-title { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 8px; border: 0; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-title:focus { outline: none; }
.peek-full { flex: 0 0 auto; display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--green); }
.peek .peek-body { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; max-width: none; margin: 0; padding: 8px 16px 40px; }
.peek .peek-h1 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--ink); border: 0; padding: 0; margin: 0 0 12px; text-wrap: balance; }
.peek .peek-h1.rubric-head { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 28px); }
.peek .letters.sticky, .peek .book-toc { position: static; margin-left: 0; margin-right: 0; }
.peek [id] { scroll-margin-top: 8px; }
.peek-skel span { display: block; height: 16px; margin: 14px 0; border-radius: 6px; background: var(--paper-2); }
.peek-skel span:first-child { height: 30px; width: 60%; }
.peek-skel span:nth-child(3n) { width: 80%; }
.peek-error { font-family: var(--sans); color: var(--ink-soft); }
.peek-error a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
/* Never drawn below 1100px, even when a narrowed window leaves it open for a frame. */
@media (max-width: 1099.98px) { .peek { display: none !important; } }
/* From 1100px the text keeps its measure beside a panel of 400–560px [measured 2026-10-06, §10h]. */
@media (min-width: 1100px) {
  :root { --peek-w: clamp(400px, 36vw, 560px); }
  .peek { top: 0; right: 0; bottom: 0; width: var(--peek-w); border-left: 1px solid var(--rule-2); box-shadow: var(--shadow); }
  .peek-open body { padding-right: var(--peek-w); }
  .peek-open .rh, .peek-open .cite-bar { right: var(--peek-w); }
  .peek-open .to-top { right: calc(var(--peek-w) + 16px); }
}
@media (prefers-reduced-motion: no-preference) {
  .rh:not([hidden]) { animation: rh-in 160ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes rh-in { from { transform: translateY(-100%); } to { transform: none; } }
  .peek:not([hidden]) { animation: peek-in 160ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  @keyframes peek-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
  .peek-skel span { animation: peek-pulse 1.2s ease-in-out infinite alternate; }
  @keyframes peek-pulse { from { opacity: 1; } to { opacity: 0.5; } }
}
@media print { .rh, .peek { display: none !important; } .peek-open body { padding: 0; } }

/* ── List and detail; search words on arrival (LIBRARY.md §10i) ─────────────────────────────
   From 1100px an index page keeps its list on the left and docks the peek panel open on the right.
   The list column is narrowed so the detail, which is the reading, keeps a book's measure: the
   default panel read at 40–47 characters a line at 1100–1280px (§10h) [measured 2026-10-07, §10i]. */
@media (min-width: 1100px) {
  .md { --master-w: clamp(400px, 36vw, 520px); }
  .md.peek-open { --peek-w: calc(100vw - var(--master-w)); }
  .md .peek .peek-body { padding: 8px 32px 40px; }
  .md .peek .peek-body > * { max-width: var(--measure); }
  .md .peek-back[hidden] + .peek-title { padding-left: 16px; }
}
/* The row the detail shows: a green rule on its leading edge and a tint, as the app marks a chosen row. */
[data-master] > li > a[aria-current="true"] { background: var(--green-tint); box-shadow: inset 3px 0 0 var(--green); border-radius: 0 6px 6px 0; }
[data-master] > li > a[aria-current="true"] .rubric, [data-master] > li > a[aria-current="true"] .name, [data-master] > li > a[aria-current="true"] .chapter { color: var(--green); }

/* Search words: a tint under the word, never a change of weight or slant, because in these books
   bold and italic are the author's grades and emphasis (Kent's three marks, Boericke's keynotes). */
mark.hl { font-weight: inherit; font-style: inherit; padding: 0; }
mark.hl.is-current { background: var(--rule-2); box-shadow: inset 0 -2px 0 var(--green); }
.hl-bar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 2px; margin: 0 0 16px; padding: 0 4px 0 14px; max-width: var(--measure); background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: 12px; font-family: var(--sans); font-size: 15px; }
.has-rh main > .hl-bar { top: 56px; }
.peek .hl-bar { top: 0; }
.hl-count { flex: 1 1 auto; min-width: 0; margin: 0; padding: 12px 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.hl-bar button { appearance: none; flex: 0 0 auto; min-width: 48px; height: 48px; border: 0; border-radius: 999px; background: none; color: var(--green); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.hl-bar .hl-step { font-size: 24px; line-height: 1; }
.hl-bar button:disabled { color: var(--rule-2); cursor: default; }
.hl-bar .hl-clear { padding: 0 12px; }
/* On a phone the bar is one 48px line under the running head: the count and the controls, the words
   being the ones the reader just searched. 96px pinned while marks are shown, until Clear. */
@media (max-width: 600px) { .hl-words { display: none; } .hl-count { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@media print { .hl-bar { display: none !important; } mark.hl { background: none; box-shadow: none; } }

/* Search in this book, from the running head. */
.rh-search { flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; color: var(--green); }

/* ── Reading surface v3 (LIBRARY.md §10j, owner's phone review 2026-10-15) ──────────────────────
   One order on every reading page, so a doctor learns it once: where you are (overline), what this
   is (heading), its source and size in one meta line, then the book. Three levels of heading, each
   told apart by more than size: a book (serif, a green rule across the column), a section of that
   book (a green tick and small capitals), a grade or list (dots or a count). Icons only name kinds:
   the printed page, a citation, a relationship, a direction. */
:root { --green-mid: rgba(26, 86, 50, 0.5); --green-soft: rgba(26, 86, 50, 0.22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --green-mid: rgba(143, 184, 154, 0.6); --green-soft: rgba(143, 184, 154, 0.28); } }
:root[data-theme="dark"] { --green-mid: rgba(143, 184, 154, 0.6); --green-soft: rgba(143, 184, 154, 0.28); }

/* Controls that need library.js are drawn from the first paint when the head script has run, and
   never without it: revealing them after paint moved the text (CLS, §10j). */
html:not(.js) .js-only { display: none !important; }
.ico { flex: none; display: inline-block; vertical-align: -3px; }

a, button { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; }
@media (prefers-reduced-motion: reduce) { a, button { transition: none; } }

/* The page head: overline, heading, one meta line. */
.page-head { margin: 4px 0 18px; }
.page-head h1 { margin-bottom: 8px; }
.page-head .fulltext { margin: -2px 0 8px; font-size: var(--read); color: var(--ink-soft); }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-family: var(--sans); font-size: 15px; color: var(--ink-soft); }
.page-meta .src { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }
.page-meta .meta-n { font-feature-settings: 'tnum'; }
.page-meta .src + .meta-n::before, .page-meta .meta-n + .meta-n::before { content: '·'; margin-right: 10px; color: var(--muted); }
.page-meta .page-link, .page-meta .meta-link, .save-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--green); text-decoration: none; background: var(--paper); position: relative; }
.page-meta .page-link:hover, .page-meta .meta-link:hover, .save-btn:hover { border-color: var(--green); background: var(--green-tint); }
.save-btn { margin-left: auto; cursor: pointer; }
.save-btn[aria-pressed="true"] { background: var(--green-tint); border-color: var(--green-mid); }
.save-btn[aria-pressed="true"] .ico { fill: currentColor; }

/* Headings. h2 is a list or block on the page; a book's own name on a remedy page is the book-head. */
h2 { border-top: 1px solid var(--rule-2); color: var(--green); font-size: 13px; letter-spacing: 0.08em; margin-top: 32px; }
h2 .sec-n, .shelf-n { font-family: var(--mono); font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.book-head { margin: 44px 0 6px; padding-top: 12px; border-top: 3px solid var(--green); }
.book-head h2 { margin: 0; padding: 0; border: 0; font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1.25; }
.book-head .cite-line { margin: 0; }
.book-head h2 a { display: inline-flex; align-items: center; min-height: 48px; }

/* A section of a book (Mind, Head, Stomach): a green tick, small capitals, room above. */
.book-section .sec-head, .prose .sec-head { margin-top: 26px; }
.sec-head > h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 0; font-size: 14px; letter-spacing: 0.08em; color: var(--green); }
.sec-head > h3::before { content: ''; flex: none; width: 3px; height: 18px; border-radius: 2px; background: var(--green); }
.book-section .book-text { margin-bottom: 12px; }
.cite-sec { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 480px) { .cite-sec span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* A chapter's sections as one row that scrolls sideways on a phone; a wrapped cloud of chips took two
   screens before Clarke's first line (owner's phone review, 2026-10-15). The fade says there is more. */
.section-nav a { border-radius: 999px; padding: 0 14px; font-size: 14px; color: var(--ink); background: var(--paper); }
.section-nav a:hover { border-color: var(--green); color: var(--green); }
@media (max-width: 700px) {
  .section-nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 8px -16px 16px; padding: 0 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav a { flex: 0 0 auto; }
}

/* A rubric's remedies: the grades at a glance, then each grade as the book prints it. */
.grades-bar { display: block; margin: 4px 0 0; }
.grade-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.grade-bar { display: block; width: 100%; height: 6px; margin: 10px 0 2px; border-radius: 3px; background: var(--rule); }
.grade-bar .g3 { fill: var(--green); }
.grade-bar .g2 { fill: var(--green-mid); }
.grade-bar .g1 { fill: var(--green-soft); }
.grade-keys { display: flex; flex-wrap: wrap; gap: 0 16px; }
.grade-row .names-btn { margin-left: auto; }
.gkey { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-family: var(--mono); font-size: 14px; color: var(--ink-soft); }
.gkey:hover .gkey-n { color: var(--green); }
.gdots { display: inline-flex; gap: 3px; }
.gdots i { display: block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--green-mid); }
.gdots i.on { background: var(--green); border-color: var(--green); }
.tier { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule); }
.remedy-grades .grade-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 0; border: 0; font-size: 13px; letter-spacing: 0.06em; color: var(--green); }
.tier.g2 .grade-head, .tier.g1 .grade-head { color: var(--ink-soft); }
.remedy-list { font-size: 18px; }
.remedy-list a.g3 { font-size: 19px; padding: 4px 8px; background: rgba(26, 86, 50, 0.13); }
:root[data-theme="dark"] .remedy-list a.g3 { background: rgba(143, 184, 154, 0.2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .remedy-list a.g3 { background: rgba(143, 184, 154, 0.2); } }
.remedy-list a:hover { background: var(--green-tint); color: var(--green); }
.names-btn { font-size: 14px; }

/* Lists of rubrics, chapters, remedies, books: the heading in the book's serif, its count to the right. */
.rubrics a, .chapters a, .remedies a { padding: 10px 4px; gap: 0 16px; }
.rubrics a:hover, .chapters a:hover, .remedies a:hover, .books a:hover { background: var(--green-tint); }
.grade-count { font-feature-settings: 'tnum'; color: var(--ink-soft); }
.rubrics .page { font-size: 12px; color: var(--muted); margin-top: 0; }
.rubrics .see-ref { margin: -10px 0 4px; padding-left: 4px; font-size: 14px; }
.letter { color: var(--green); }

/* The Shelf. */
.shelf .books a { grid-template-columns: 1fr auto; padding: 14px 4px; }
.shelf .books .title { font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.shelf .books .meta { grid-column: 1; }
.shelf .books .counts { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; color: var(--muted); }
@media (max-width: 480px) { .shelf .books .counts { grid-column: 1; grid-row: auto; text-align: left; } }
.practise-shelf { margin-top: 32px; }

/* After a rubric's remedies: the two next steps, side by side where they fit. */
.next-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.next-steps .practise { margin: 0; }
.practise a, .show-page a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid var(--rule-2); border-radius: 12px; color: var(--green); font-weight: 600; text-decoration: none; }
.practise a:hover, .show-page a:hover { border-color: var(--green); background: var(--green-tint); }
.practise-shelf .muted { display: block; margin-top: 6px; font-size: 14px; }
.cite-this .cite-label { display: inline-flex; align-items: center; gap: 6px; }

/* Relationships and polar generals: a glyph per kind, so "what must not follow" is found by shape. */
.rel-line h4 { display: flex; align-items: center; gap: 8px; }
.rel-line h4 .ico { color: var(--green); }
.rel-inimical h4 .ico, .rel-antidote h4 .ico { color: var(--ink-soft); }
.polar .paxis li { flex-wrap: nowrap; align-items: flex-start; }
.polar .pval { flex: 1 1 auto; }
.psign { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; font-family: var(--mono); font-weight: 500; font-size: 14px; line-height: 1; }
.psign.agg { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.psign.amel { background: var(--green-tint); color: var(--green); }
.psign.none { color: var(--muted); }
.duration h2 { display: flex; align-items: center; gap: 8px; }

/* The footer: the ways on, then one line about the editions. */
.foot-links { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 0 4px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; color: var(--green); font-weight: 600; }
.foot-links a:first-child { padding-left: 0; }
.foot-note { margin: 0; color: var(--muted); }

/* Inside the desktop panel the page's own controls stay on the page: "Open full page" is one tap. */
.peek .js-only { display: none !important; }

/* Every letter index is one sideways row on a phone, as the chapter's was (§2c): Gibson Miller's
   wrapped to four rows (≈400px at 390px) before the table began. */
@media (max-width: 700px) {
  .letters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .letters::-webkit-scrollbar { display: none; }
  .letters a { flex: 0 0 auto; }
}
.has-rh .letters.sticky { border-bottom: 0; }

/* A wide index page docks its first row's page beside the list (§10i). Until library.js has run, the
   column it will take is reserved here, so the list is laid out once at its final width; .md takes over. */
@media (min-width: 1100px) { html.js:not(.md):has(main [data-master]) body { padding-right: calc(100vw - clamp(400px, 36vw, 520px)); } }