/* Enscribe default theme — Nature-inspired academic journal style.
 *
 * Design language: clean, editorial, high information density.
 * Inspired by Nature journal: tight leading on headings, restrained serif body,
 * generous white-space on structure, no decorative color.
 *
 * Does NOT override .tippy-box or .tippy-content (hover-preview.css owns those).
 * Does NOT use @font-face, dark mode, print styles, or SCSS.
 */

/* ─── Design tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Color */
  --enscribe-text-primary:   #1a1a1a;
  --enscribe-text-secondary: #555;
  --enscribe-text-muted:     #888;
  --enscribe-link:           #0052cc;
  --enscribe-link-hover:     #003d99;
  --enscribe-link-visited:   #0052cc;
  --enscribe-bg:             #ffffff;
  --enscribe-bg-subtle:      #f7f7f7;
  --enscribe-bg-code:        #f5f5f5;
  --enscribe-border:         #e1e1e1;
  --enscribe-border-strong:  #ccc;
  --enscribe-accent:         #444;

  /* Book reading interface (Slice C) — the active chapter's tinted block + left
   * accent in the chapter rail. Default to the existing palette so themes that set
   * none still render; themes may retune these two without touching structure. */
  --enscribe-toc-active-bg:     var(--enscribe-bg-subtle);
  --enscribe-toc-active-accent: var(--enscribe-link);

  /* Frameable border "looks" (#58, `border=<name>`) — the document names the
   * look; these properties define how it renders. Themes may override them. */
  --enscribe-border-accent:  var(--enscribe-accent);   /* accent look: border color */
  --enscribe-border-thick:   3px;                       /* thick look: border width */
  --enscribe-border-subtle:  #e6e6e6;                   /* subtle look: thin light-gray color */
  --enscribe-error:          #c0392b;

  /* Callout / admonition accents (#31 Phase B). Per-type accent + light
   * background tint for <aside type=…> callouts; themes may override these.
   * Each tint is light enough that the body text (--enscribe-text-primary on
   * the tint) keeps WCAG AA contrast, and the accent is one of THREE cues
   * (accent / icon / title) so a variant is never distinguished by color
   * alone — it stays legible for color-blind readers and in monochrome print. */
  --enscribe-callout-note-accent:    #0052cc;
  --enscribe-callout-note-bg:        #eef4ff;
  --enscribe-callout-info-accent:    #0b7285;
  --enscribe-callout-info-bg:        #e7f6f8;
  --enscribe-callout-tip-accent:     #1f7a4d;
  --enscribe-callout-tip-bg:         #eafaf1;
  --enscribe-callout-warning-accent: #8a6d1f;
  --enscribe-callout-warning-bg:     #fff8e1;
  --enscribe-callout-caution-accent: #c0392b;
  --enscribe-callout-caution-bg:     #fdecea;

  /* Typography — Inter (sans) and Source Code Pro (mono) are bundled as base64
   * @font-face rules and injected before this CSS. System stacks serve as
   * fallback for any consumer that includes default.css without the font loader. */
  --enscribe-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;
  --enscribe-font-mono:  'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco,
                    Consolas, "Liberation Mono", "Courier New", monospace;
  /* Theming tokens (Phase 8 Slice 2). Defaults reproduce the current look — a
   * serif body, a sans heading/label face, and bold headings — so adding these
   * is output-neutral. A theme overrides them (and the tokens below) to change
   * the appearance without touching any structural rule. */
  --enscribe-font-body:      Georgia, "Times New Roman", serif;
  --enscribe-font-heading:   var(--enscribe-font-sans);
  --enscribe-weight-heading: 700;
  --enscribe-text-base:  1rem;
  --enscribe-text-sm:    0.875rem;
  --enscribe-text-xs:    0.75rem;
  --enscribe-text-code:  0.95rem;

  /* Heading scale */
  --enscribe-h1-size: 2.25rem;
  --enscribe-h2-size: 1.5rem;
  --enscribe-h3-size: 1.2rem;
  --enscribe-h4-size: 1.05rem;

  /* Spacing */
  --enscribe-line-height:         1.65;
  --enscribe-line-height-heading: 1.3;
  --enscribe-line-height-tight:   1.4;
  --enscribe-space-1:  0.25rem;
  --enscribe-space-2:  0.5rem;
  --enscribe-space-3:  0.75rem;
  --enscribe-space-4:  1rem;
  --enscribe-space-6:  1.5rem;
  --enscribe-space-8:  2rem;
  --enscribe-space-12: 3rem;

  /* Layout */
  --enscribe-content-width:   760px;
  --enscribe-content-padding: 1.5rem;
}

/* ─── Reset / base ──────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--enscribe-font-body);
  font-size: var(--enscribe-text-base);
  line-height: var(--enscribe-line-height);
  color: var(--enscribe-text-primary);
  background: var(--enscribe-bg);
  margin: var(--enscribe-space-12) auto;
  padding: 0 var(--enscribe-content-padding);
  max-width: var(--enscribe-content-width);
}

/* ─── Article structure ─────────────────────────────────────────────────────── */

article {
  display: block;
}

article-front {
  display: block;
  margin-bottom: var(--enscribe-space-8);
  padding-bottom: var(--enscribe-space-6);
  border-bottom: 2px solid var(--enscribe-border-strong);
}

article-body {
  display: block;
}

article-back {
  display: block;
  margin-top: var(--enscribe-space-8);
  padding-top: var(--enscribe-space-6);
  border-top: 1px solid var(--enscribe-border);
}

/* Front-matter metadata container. display:contents lets children flow as
 * direct descendants of article-front for styling purposes. */
meta[data-document-type] {
  display: contents;
}

article-title {
  display: block;
  font-family: var(--enscribe-font-heading);
  font-size: var(--enscribe-h1-size);
  font-weight: var(--enscribe-weight-heading);
  line-height: var(--enscribe-line-height-heading);
  color: var(--enscribe-text-primary);
  margin-bottom: var(--enscribe-space-2);
}

article-subtitle {
  display: block;
  font-family: var(--enscribe-font-heading);
  font-size: var(--enscribe-h2-size);
  font-weight: 400;
  line-height: var(--enscribe-line-height-heading);
  color: var(--enscribe-text-secondary);
  margin-bottom: var(--enscribe-space-4);
}

/* Individual author element. Multiple <author> elements render as a run. */
author {
  display: inline;
  font-family: var(--enscribe-font-sans);
  font-size: var(--enscribe-text-sm);
  color: var(--enscribe-text-secondary);
}

author + author::before {
  content: ", ";
}

/* Wrap all authors in a block display. Achieved by making article-front a
 * flex column or by wrapping the author run with a display:block pseudo. */

/* ─── Book structure ────────────────────────────────────────────────────────── */

/*
 * RQ-BOOK-S1. Book documents wrap their content in <book> with <book-front>,
 * <book-body>, <book-back> regions, each holding <book-part> chapters/parts.
 * Custom elements default to display:inline, so without these rules a whole
 * book collapses into one inline run. These rules mirror the article-structure
 * baseline: block regions, a prominent book-title, and a chapter-level
 * book-part-title sized clearly between the book-title and section-title.
 */
book,
book-front,
book-body,
book-back,
book-part {
  display: block;
}

book-front {
  margin-bottom: var(--enscribe-space-8);
  padding-bottom: var(--enscribe-space-6);
  border-bottom: 2px solid var(--enscribe-border-strong);
}

book-back {
  margin-top: var(--enscribe-space-8);
  padding-top: var(--enscribe-space-6);
  border-top: 1px solid var(--enscribe-border);
}

/* Each chapter/part is set off with generous top space. */
book-part {
  margin-top: var(--enscribe-space-12);
}

/* RQ-BOOK-S1: book-title is the most prominent heading on the page (block, at
 * least --enscribe-h1-size). Reasonable default: 1.25× the article h1 token, so the
 * book cover title sits clearly above every chapter and section heading while
 * still scaling with the theme's heading token. */
book-title {
  display: block;
  font-family: var(--enscribe-font-heading);
  font-size: calc(var(--enscribe-h1-size) * 1.25);
  font-weight: var(--enscribe-weight-heading);
  line-height: var(--enscribe-line-height-heading);
  color: var(--enscribe-text-primary);
  margin-bottom: var(--enscribe-space-2);
}

book-subtitle {
  display: block;
  font-family: var(--enscribe-font-heading);
  font-size: var(--enscribe-h2-size);
  font-weight: 400;
  line-height: var(--enscribe-line-height-heading);
  color: var(--enscribe-text-secondary);
  margin-bottom: var(--enscribe-space-4);
}

/* RQ-BOOK-S1: book-part-title is a chapter-level heading — block, prominent,
 * and clearly above section-title scale (--enscribe-h2-size). Uses --enscribe-h1-size so
 * a chapter heading sits between the book-title and section headings. */
book-part-title {
  display: block;
  font-family: var(--enscribe-font-heading);
  font-size: var(--enscribe-h1-size);
  font-weight: var(--enscribe-weight-heading);
  line-height: var(--enscribe-line-height-heading);
  color: var(--enscribe-text-primary);
  margin-bottom: var(--enscribe-space-4);
}

book-part-subtitle {
  display: block;
  font-family: var(--enscribe-font-heading);
  font-size: var(--enscribe-h3-size);
  font-weight: 400;
  line-height: var(--enscribe-line-height-heading);
  color: var(--enscribe-text-secondary);
  margin-bottom: var(--enscribe-space-4);
}

/* ─── Section hierarchy ─────────────────────────────────────────────────────── */

section,
sub-section,
sub-sub-section {
  display: block;
  margin-top: var(--enscribe-space-8);
}

section-title,
sub-section-title,
sub-sub-section-title {
  display: block;
  font-family: var(--enscribe-font-heading);
  font-weight: var(--enscribe-weight-heading);
  line-height: var(--enscribe-line-height-heading);
  color: var(--enscribe-text-primary);
  margin-bottom: var(--enscribe-space-3);
}

section-title {
  font-size: var(--enscribe-h2-size);
  margin-top: 0;
}

sub-section-title {
  font-size: var(--enscribe-h3-size);
}

sub-sub-section-title {
  font-size: var(--enscribe-h4-size);
}

/* Section numbering (#57). The build-time number is emitted as a
 * <section-number> element at the start of the section title (and the
 * book-part title of a numbered appendix) — real, copy/paste-able content. It
 * inherits the heading's weight/size; the theme controls only the spacing /
 * separator before the title text. The document carries the canonical dotted
 * number; the presentation (separator, any "Chapter N" framing) is the theme's. */
section-number {
  margin-right: var(--enscribe-space-2);
}

/* Suppress top margin on section directly following article-body open. */
article-body > section:first-child {
  margin-top: 0;
}

/* ─── Prose ─────────────────────────────────────────────────────────────────── */

p {
  margin: 0 0 var(--enscribe-space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

blockquote {
  margin: var(--enscribe-space-6) 0;
  padding: var(--enscribe-space-3) var(--enscribe-space-6);
  border-left: 3px solid var(--enscribe-border-strong);
  color: var(--enscribe-text-secondary);
  font-style: italic;
}

blockquote p {
  margin-bottom: var(--enscribe-space-2);
}

blockquote p:last-child {
  margin-bottom: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--enscribe-border);
  margin: var(--enscribe-space-8) 0;
}

ul,
ol {
  margin: var(--enscribe-space-3) 0 var(--enscribe-space-4);
  padding-left: var(--enscribe-space-6);
}

li {
  margin-bottom: var(--enscribe-space-1);
}

li:last-child {
  margin-bottom: 0;
}

/* ─── Links and cross-references ────────────────────────────────────────────── */

a {
  color: var(--enscribe-link);
  text-decoration: none;
}

a:hover {
  color: var(--enscribe-link-hover);
  text-decoration: underline;
}

a:visited {
  color: var(--enscribe-link-visited);
}

/* Resolved cross-reference: styled as a link. */
a.ref {
  color: var(--enscribe-link);
  text-decoration: none;
  font-style: normal;
}

a.ref:hover {
  text-decoration: underline;
}

/* Unresolved cross-reference: error color, wavy underline. */
a.ref-error {
  color: var(--enscribe-error);
  text-decoration: underline;
  text-decoration-style: wavy;
  cursor: help;
}

/* ─── Citations ─────────────────────────────────────────────────────────────── */

cite.cite {
  font-style: normal;
  cursor: pointer;
}

cite.cite-error {
  font-style: normal;
  color: var(--enscribe-error);
  cursor: help;
}

/* ─── Math ──────────────────────────────────────────────────────────────────── */

/*
 * Flex layout for display-math: equation centered, number flush right.
 *
 * HTML structure emitted by the interpreter:
 *   <display-math>
 *     <span class="katex-display">...</span>   ← KaTeX in display mode
 *     <equation-number>(N)</equation-number>  ← only when numbered
 *   </display-math>
 *
 * KaTeX's own stylesheet sets .katex-display { display: block; text-align: center; }.
 * When display-math becomes a flex container, .katex-display becomes a flex item
 * (flex: 1) while retaining text-align: center for its content.
 *
 * For unnumbered equations (no equation-number sibling), .katex-display fills
 * the full width and the equation is centered by KaTeX's text-align: center.
 *
 * RQ-MATH-S3: the math-environment wrappers (math, align, cases, matrix,
 * eqnarray) share this layout. Each renders displayMode KaTeX (so each has a
 * .katex-display child) and may carry a single equation-number, so grouping
 * them with display-math makes them render as display blocks with vertical
 * margin and presents any equation number flush-right, consistently with the
 * display-math case. (Per-line align numbering is out of spec — a single
 * number for the whole block is the documented baseline.)
 */
display-math,
math,
align,
cases,
matrix,
eqnarray {
  display: flex;
  align-items: center;
  margin: var(--enscribe-space-6) 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* KaTeX display block: grows to fill available space; equation centered within. */
display-math > .katex-display,
math > .katex-display,
align > .katex-display,
cases > .katex-display,
matrix > .katex-display,
eqnarray > .katex-display {
  flex: 1;
  margin: 0;            /* override KaTeX's default 1em top/bottom margin */
  overflow-x: auto;
  overflow-y: hidden;   /* mirror the wrapper (#217): an `auto` x-axis computes a `visible` y to `auto` */
}

/* Equation number: does not grow; sits flush right at same vertical centre. */
display-math > equation-number,
math > equation-number,
align > equation-number,
cases > equation-number,
matrix > equation-number,
eqnarray > equation-number {
  flex: 0 0 auto;
  min-width: 3em;
  text-align: right;
  padding-left: var(--enscribe-space-4);
  font-family: var(--enscribe-font-sans);
  font-size: var(--enscribe-text-sm);
  color: var(--enscribe-text-secondary);
  white-space: nowrap;
}

inline-math {
  display: inline;
}

/* ─── Theorem family ────────────────────────────────────────────────────────── */

/*
 * RQ-THM-S1: each theorem-family element renders display:block with vertical
 * margin. Custom elements default to display:inline, so without this the
 * theorem statement collapses into the surrounding paragraph. The vertical
 * margin matches the display-math block rhythm (--enscribe-space-6).
 */
theorem,
lemma,
corollary,
proposition,
definition,
example,
remark,
proof {
  display: block;
  margin: var(--enscribe-space-6) 0;
}

/*
 * RQ-THM-S2: the leading <{kind}-label> element ("Theorem 1.", "Lemma 2 (Name).",
 * "Proof.") renders with prominence (font-weight: 700). Matches the
 * weight-only convention of <figure-label> / <table-label>; the label already
 * carries a trailing space from the handler, so no extra margin is needed.
 * Italicised statement bodies (an amsthm convention) are out of spec for S2
 * and left to a later theme.
 */
theorem-label,
lemma-label,
corollary-label,
proposition-label,
definition-label,
example-label,
remark-label,
proof-label {
  font-weight: 700;
}

/* ─── Code ──────────────────────────────────────────────────────────────────── */

code {
  font-family: var(--enscribe-font-mono);
  font-size: var(--enscribe-text-code);
  background: var(--enscribe-bg-code);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

pre {
  background: var(--enscribe-bg-code);
  border: 1px solid var(--enscribe-border);
  border-radius: 4px;
  padding: var(--enscribe-space-4);
  overflow-x: auto;
  margin: var(--enscribe-space-4) 0;
}

pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: var(--enscribe-text-sm);
  line-height: var(--enscribe-line-height-tight);
}

/* code-block is the custom element wrapper for sigil ``` blocks. */
code-block {
  display: block;
  margin: var(--enscribe-space-4) 0;
}

code-block pre {
  margin: 0;
}

/* ─── Figures and tables ─────────────────────────────────────────────────────── */

figure {
  display: block;
  margin: var(--enscribe-space-8) 0;
}

/* #274: a figure's text content (prose, lists, code, tables — common in a <frame> /
 * <minipage>, which also lower to <figure>) flows LEFT-aligned like ordinary HTML.
 * Per the lean-on-conventions principle, none of HTML / markdown / Quarto / LaTeX /
 * bookdown centre lists / code / prose / tables; left is the universal default. The
 * blanket `figure { text-align: center }` that used to centre everything is gone.
 * Only the figure MEDIA stays centred (the academic convention for a figure's image):
 *   - <img> — centred by margin auto below (independent of text-align);
 *   - a figure's own <svg> — centred here (it is inline, so it relied on the blanket
 *     text-align). Scoped to a DIRECT child (`figure > svg`) so it never matches a
 *     nested KaTeX glyph <svg> inside math, which must keep its own layout;
 *   - display equations — centred by KaTeX's own `.katex-display { text-align: center }`
 *     and the math-environment rules above, independent of this rule. */
figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

figure > svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

figcaption {
  font-size: var(--enscribe-text-sm);
  color: var(--enscribe-text-secondary);
  margin-top: var(--enscribe-space-2);
  text-align: left;
  line-height: var(--enscribe-line-height-tight);
}

figure-label {
  font-weight: 700;
  margin-right: var(--enscribe-space-1);
}

/* RQ-FRM-S5 (#70): the frameable TITLE — <figcaption class="title"> (figure
 * family), <caption class="title"> (table family), or <p class="title"> (boxed
 * prose / aside) — is rendered ABOVE the body and must read as a prominent
 * title, visually distinct from the bottom caption (which is small + secondary).
 * Without this rule a title <figcaption class="title"> would inherit the plain
 * figcaption look and be indistinguishable from the caption. This shared `.title`
 * hook styles all three element forms uniformly across the frameable families. */
.title {
  font-size: var(--enscribe-text-base);
  font-weight: 700;
  color: var(--enscribe-text-primary);
  text-align: left;
  line-height: var(--enscribe-line-height-tight);
  margin: 0 0 var(--enscribe-space-2) 0;
}

/* RQ-FRM-S6 (#70): the boxed-prose bottom CAPTION is a <p class="caption">. The
 * figure/table families style their bare <figcaption>/<caption> by element
 * selector; a <p> would otherwise read as body text, so `.caption` gives it the
 * same small/secondary caption look (the counterpart hook to `.title`). */
.caption {
  font-size: var(--enscribe-text-sm);
  color: var(--enscribe-text-secondary);
  text-align: left;
  line-height: var(--enscribe-line-height-tight);
  margin: var(--enscribe-space-2) 0 0 0;
}

/* RQ-FRM-S4: a frame renders <figure class="frameable-border">. The border
 * class draws a visible outline box around the frameable, setting the bordered
 * callout off from the body text. Reasonable baseline: a 1px solid rule in the
 * theme's strong border color, a subtle 4px radius (matching <pre>), and
 * padding so content does not touch the rule. */
.frameable-border {
  border: 1px solid var(--enscribe-border-strong);
  border-radius: 4px;
  padding: var(--enscribe-space-4);
}

/* Frameable border looks (#58). `border=<name>` adds a `frameable-border-<name>`
 * modifier class alongside the base `.frameable-border`; each look overrides one
 * facet of the base rule. The default theme ships this starter menu (accent /
 * thick / dashed / subtle); the mechanism is open — a theme can override the
 * `--enscribe-border-*` properties above, or add its own `.frameable-border-<name>`
 * rules (the document just names the look). */
.frameable-border-accent { border-color: var(--enscribe-border-accent); }
.frameable-border-thick  { border-width: var(--enscribe-border-thick); }
.frameable-border-dashed { border-style: dashed; }
.frameable-border-subtle { border-color: var(--enscribe-border-subtle); }

/* Callouts / admonitions (#31 Phase B). An <aside type=…> is a frameable
 * boxed-prose element — it already carries .frameable-border (the box) and an
 * optional <p class="title"> / <p class="caption">. These rules add the
 * per-type treatment for the admonition types the vocabulary defines
 * (note / info / tip / warning / caution); the plain `sidebar` / `callout`
 * types keep the unadorned box. The icon comes through ::before (CSS only — no
 * markup injected, so the HTML stays a clean semantic tree and the fixtures are
 * unchanged; the pseudo-element is decorative, outside the accessibility tree).
 * Each variant is signalled by THREE cues — accent, icon, and the title text —
 * so color is never the only distinguisher (legible color-blind / in mono). */
aside[data-aside-type="note"],
aside[data-aside-type="info"],
aside[data-aside-type="tip"],
aside[data-aside-type="warning"],
aside[data-aside-type="caution"] {
  border-left-width: 4px;
  border-left-style: solid;
}

aside[data-aside-type="note"]::before,
aside[data-aside-type="info"]::before,
aside[data-aside-type="tip"]::before,
aside[data-aside-type="warning"]::before,
aside[data-aside-type="caution"]::before {
  margin-right: var(--enscribe-space-2);
  font-weight: 700;
}

aside[data-aside-type="note"] {
  border-left-color: var(--enscribe-callout-note-accent);
  background: var(--enscribe-callout-note-bg);
}
aside[data-aside-type="note"]::before { content: "\270E"; color: var(--enscribe-callout-note-accent); }

aside[data-aside-type="info"] {
  border-left-color: var(--enscribe-callout-info-accent);
  background: var(--enscribe-callout-info-bg);
}
aside[data-aside-type="info"]::before { content: "\2139\FE0E"; color: var(--enscribe-callout-info-accent); }

aside[data-aside-type="tip"] {
  border-left-color: var(--enscribe-callout-tip-accent);
  background: var(--enscribe-callout-tip-bg);
}
aside[data-aside-type="tip"]::before { content: "\1F4A1"; color: var(--enscribe-callout-tip-accent); }

aside[data-aside-type="warning"] {
  border-left-color: var(--enscribe-callout-warning-accent);
  background: var(--enscribe-callout-warning-bg);
}
aside[data-aside-type="warning"]::before { content: "\26A0\FE0E"; color: var(--enscribe-callout-warning-accent); }

aside[data-aside-type="caution"] {
  border-left-color: var(--enscribe-callout-caution-accent);
  background: var(--enscribe-callout-caution-bg);
}
aside[data-aside-type="caution"]::before { content: "\26D4"; color: var(--enscribe-callout-caution-accent); }

/* "See source" disclosure (#19). A rendered-from-DSL block (mermaid / abc) with
 * the `show-source` <config> switch on emits the authored source in a native
 * <details class="enscribe-source"><summary>See source</summary><pre>…</pre>.
 * The default theme gives the <summary> an intentional, button-like control
 * look — drawn from the EXISTING palette (the same label idiom as the ToC
 * summary, the same border / radius as the frameable box and <pre>; no new
 * tokens). Document says *what* (source is available); theme says *how*. The
 * inner <pre> inherits the base code-block styling above; only its margin is
 * reset so it sits flush under the control. */
.enscribe-source {
  margin: var(--enscribe-space-4) 0 var(--enscribe-space-6);
}

.enscribe-source > summary {
  display: inline-block;
  cursor: pointer;
  font-family: var(--enscribe-font-sans);
  font-size: var(--enscribe-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--enscribe-text-muted);
  background: var(--enscribe-bg-subtle);
  border: 1px solid var(--enscribe-border);
  border-radius: 4px;
  padding: var(--enscribe-space-1) var(--enscribe-space-3);
  user-select: none;
}

.enscribe-source > summary:hover {
  color: var(--enscribe-text-secondary);
  border-color: var(--enscribe-border-strong);
}

.enscribe-source[open] > summary {
  margin-bottom: var(--enscribe-space-2);
}

.enscribe-source > pre {
  margin: 0;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--enscribe-space-6) 0;
  font-size: var(--enscribe-text-sm);
}

caption {
  caption-side: top;
  text-align: left;
  font-size: var(--enscribe-text-sm);
  color: var(--enscribe-text-secondary);
  margin-bottom: var(--enscribe-space-2);
  font-weight: normal;
}

table-label {
  font-weight: 700;
  margin-right: var(--enscribe-space-1);
}

th,
td {
  border: 1px solid var(--enscribe-border-strong);
  padding: var(--enscribe-space-2) var(--enscribe-space-3);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--enscribe-bg-subtle);
  font-weight: 700;
  font-family: var(--enscribe-font-sans);
  font-size: var(--enscribe-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--enscribe-accent);
}

thead th {
  border-bottom: 2px solid var(--enscribe-border-strong);
}

/* ─── Notes ─────────────────────────────────────────────────────────────────── */

note-list {
  display: block;
  font-size: var(--enscribe-text-sm);
  color: var(--enscribe-text-secondary);
  margin-top: var(--enscribe-space-8);
  padding-top: var(--enscribe-space-4);
  border-top: 1px solid var(--enscribe-border);
}

/* "Notes" heading supplied by ::before; no heading element is emitted. */
note-list::before {
  content: "Notes";
  display: block;
  font-family: var(--enscribe-font-sans);
  font-size: var(--enscribe-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--enscribe-text-muted);
  margin-bottom: var(--enscribe-space-3);
}

/* Override hover-preview.css which also sets these to 0. Both agree here. */
note-list ol {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

note-list li {
  margin-bottom: var(--enscribe-space-2);
  padding-left: var(--enscribe-space-6);
  text-indent: calc(-1 * var(--enscribe-space-6));
}

.note-backref {
  font-size: var(--enscribe-text-xs);
  color: var(--enscribe-text-muted);
  text-decoration: none;
  margin-left: var(--enscribe-space-1);
}

.note-backref:hover {
  color: var(--enscribe-link);
}

/* Sidenote fallback: inline sidenotes collected to end (deferred feature). */
.sidenote-fallback {
  font-style: italic;
}

/* Inline note marker superscript. */
sup[data-note-id] {
  font-family: var(--enscribe-font-sans);
  font-size: var(--enscribe-text-xs);
  color: var(--enscribe-link);
  cursor: pointer;
}

/* ─── Bibliography ───────────────────────────────────────────────────────────── */

bibliography {
  display: block;
  margin-top: var(--enscribe-space-6);
}

bibliography h2 {
  font-family: var(--enscribe-font-heading);
  font-size: var(--enscribe-h3-size);
  font-weight: var(--enscribe-weight-heading);
  line-height: var(--enscribe-line-height-heading);
  color: var(--enscribe-text-primary);
  margin: 0 0 var(--enscribe-space-4);
}

.csl-bib-body {
  font-size: var(--enscribe-text-sm);
}

.csl-entry {
  margin-bottom: var(--enscribe-space-3);
  padding-left: var(--enscribe-space-6);
  text-indent: calc(-1 * var(--enscribe-space-6));
  line-height: var(--enscribe-line-height-tight);
  color: var(--enscribe-text-primary);
}

/* ─── Table of contents (Phase 8 Slice 1) ───────────────────────────────────── */

/*
 * Opt-in sidebar. Every rule here is scoped to `.enscribe-layout--toc`, which the
 * renderer emits ONLY when the `toc` option is on — so a document without a ToC
 * is completely unaffected by this block. The body's single-column cap is relaxed
 * via :has() only when a ToC layout is present, letting the sidebar + body grid be
 * wider; non-ToC bodies keep the centered --enscribe-content-width column.
 */
body:has(.enscribe-layout--toc) {
  max-width: none;
  padding: 0;
}

.enscribe-layout--toc {
  margin: 0 auto;
  padding: 0 var(--enscribe-content-padding);
  max-width: var(--enscribe-content-width);
}

/* Let wide content (tables, code, math) shrink instead of blowing out the grid. */
.enscribe-body {
  min-width: 0;
}

.enscribe-toc {
  font-family: var(--enscribe-font-sans);
  font-size: var(--enscribe-text-sm);
  line-height: var(--enscribe-line-height-tight);
}

.enscribe-toc-summary {
  font-size: var(--enscribe-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--enscribe-text-muted);
  cursor: pointer;
  margin-bottom: var(--enscribe-space-3);
}

.enscribe-toc ul {
  list-style: none;
  margin: 0;
  padding-left: var(--enscribe-space-4);
}

.enscribe-toc-details > ul {
  padding-left: 0;
}

.enscribe-toc li {
  margin: 0;
}

.enscribe-toc a {
  display: block;
  color: var(--enscribe-text-secondary);
  text-decoration: none;
  padding: var(--enscribe-space-1) 0;
}

.enscribe-toc a:hover {
  color: var(--enscribe-link);
}

/* Scroll-spy active state (#20). The scroll-spy script (injected with the ToC
 * sidebar) sets aria-current + .enscribe-toc-active on the entry for the section
 * at the top of the viewport, and .enscribe-toc-active-trail on its ancestor
 * entries (the "you are here" path). Styled from the existing palette; document
 * says *what* (which entry is current), theme says *how* it's shown. JS off →
 * none of these are set, so the ToC renders exactly as before (the script is a
 * pure progressive enhancement). */
.enscribe-toc a.enscribe-toc-active,
.enscribe-toc a[aria-current] {
  color: var(--enscribe-link);
  font-weight: 700;
}

.enscribe-toc a.enscribe-toc-active-trail {
  color: var(--enscribe-text-primary);
}

/* Desktop: a two-column grid with the ToC as a sticky left sidebar; the
 * disclosure is forced open (its <summary> toggle hidden). */
@media (min-width: 900px) {
  .enscribe-layout--toc {
    display: grid;
    grid-template-columns: 14rem minmax(0, var(--enscribe-content-width));
    column-gap: var(--enscribe-space-12);
    max-width: calc(14rem + var(--enscribe-space-12) + var(--enscribe-content-width));
  }

  .enscribe-toc {
    position: sticky;
    top: var(--enscribe-space-8);
    align-self: start;
    max-height: calc(100vh - 2 * var(--enscribe-space-8));
    overflow-y: auto;
  }

  .enscribe-toc-summary {
    display: none;
  }
}

/* ─── Chapter prev/next + opt-in paging (Phase 8 Slice 3; Slice C) ───────────── */

/*
 * `.enscribe-chapter-nav` (prev/next at each chapter foot) is STATIC markup in the
 * one-scroll reading interface (built in lib/toc.js — see the book section below).
 * `.chapter-hidden` / `.enscribe-chapter-showall` are inert hooks used only by the
 * OPT-IN paging script (`chapterNav: true`); without it (the book default) and for
 * any article, nothing here paginates. Progressive enhancement throughout.
 */
.chapter-hidden {
  display: none;
}

/* Prev / next chapter links at the foot of each chapter (static in the one-scroll
 * book; the opt-in paging script reuses the same bar). */
.enscribe-chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--enscribe-space-4);
  margin-top: var(--enscribe-space-12);
  padding-top: var(--enscribe-space-4);
  border-top: 1px solid var(--enscribe-border);
  font-family: var(--enscribe-font-heading);
  font-size: var(--enscribe-text-sm);
}

.enscribe-chapter-prev {
  margin-right: auto;
}

.enscribe-chapter-next {
  margin-left: auto;
  text-align: right;
}

.enscribe-chapter-prev,
.enscribe-chapter-next {
  display: inline-flex;
  align-items: baseline;
  gap: var(--enscribe-space-2);
  color: var(--enscribe-link);
  text-decoration: none;
}

.enscribe-chapter-prev:hover,
.enscribe-chapter-next:hover {
  color: var(--enscribe-link-hover);
}

chapter-arrow {
  color: var(--enscribe-text-muted);
}

/* "Show whole book" toggle, appended to the ToC by the opt-in paging script. */
.enscribe-chapter-showall {
  display: block;
  width: 100%;
  margin-top: var(--enscribe-space-4);
  padding-top: var(--enscribe-space-3);
  border: none;
  border-top: 1px solid var(--enscribe-border);
  background: none;
  text-align: left;
  font-family: var(--enscribe-font-heading);
  font-size: var(--enscribe-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--enscribe-text-muted);
  cursor: pointer;
}

.enscribe-chapter-showall:hover {
  color: var(--enscribe-link);
}

/* ─── Book reading interface (Slice C) ──────────────────────────────────────────
 *
 * A book + ToC renders as ONE scrolling document with chapter-navigation chrome:
 * a left chapter rail (`nav.enscribe-toc.enscribe-chapter-rail`), the reading
 * column, and a right "on this page" rail (`nav.enscribe-onthispage`). Every rule
 * here is gated on `.enscribe-layout--book`, which lib/toc.js emits ONLY for a book
 * — so an ARTICLE ToC (`.enscribe-layout--toc` without `--book`) is visually
 * untouched. Highlight hooks (`.enscribe-toc-active`) are set at runtime by
 * scroll-spy (left) and the on-this-page script (right); JS off → no highlight.
 */

/* Number + title in a rail link: a fixed number gutter so titles align ("1" / "2.1"
 * / "A" all start the title at the same x). These <toc-num> elements are emitted by
 * the BOOK path only (lib/toc.js bookLink); the article ToC keeps its glued link text,
 * so an article ToC — numbered or not — is byte-identical to pre-Slice-C. */
toc-num {
  display: inline-block;
  min-width: 1.6em;
  color: var(--enscribe-text-muted);
  font-variant-numeric: tabular-nums;
}

.enscribe-chapter-rail .enscribe-rail-item toc-num::after {
  content: "·";
  margin-left: var(--enscribe-space-2);
  color: var(--enscribe-border-strong);
}

/* The active chapter in the left rail: a tinted block with a left accent (the
 * scroll-spy hook drives it). The transparent reserved border keeps the inactive
 * entries aligned so activating one never shifts the text. */
.enscribe-layout--book .enscribe-toc a {
  padding-left: var(--enscribe-space-3);
  border-left: 3px solid transparent;
  border-radius: 0 var(--enscribe-radius-sm, 2px) var(--enscribe-radius-sm, 2px) 0;
}

.enscribe-layout--book .enscribe-toc a.enscribe-toc-active {
  background: var(--enscribe-toc-active-bg);
  border-left-color: var(--enscribe-toc-active-accent);
  color: var(--enscribe-text-primary);
}

/* Front/body/back grouping in the chapter rail: a hairline above the body and back
 * groups separates the registers (front-matter / chapters / appendices). */
.enscribe-chapter-rail .enscribe-rail-item--body + .enscribe-rail-item--back,
.enscribe-chapter-rail .enscribe-rail-item--front + .enscribe-rail-item--body {
  border-top: 1px solid var(--enscribe-border);
  margin-top: var(--enscribe-space-2);
  padding-top: var(--enscribe-space-2);
}

/* The right "on this page" rail. Static markup lists EVERY chapter's sections; the
 * on-this-page script adds `--spied` and reveals only the current chapter's group. */
.enscribe-onthispage {
  font-family: var(--enscribe-font-sans);
  font-size: var(--enscribe-text-sm);
  line-height: var(--enscribe-line-height-tight);
}

.enscribe-onthispage a {
  display: block;
  color: var(--enscribe-text-secondary);
  text-decoration: none;
  padding: var(--enscribe-space-1) 0;
}

.enscribe-onthispage a:hover {
  color: var(--enscribe-link);
}

.enscribe-onthispage a.enscribe-toc-active,
.enscribe-onthispage a[aria-current] {
  color: var(--enscribe-link);
  font-weight: 700;
}

.enscribe-onthispage ul {
  list-style: none;
  margin: 0;
  padding-left: var(--enscribe-space-4);
}

.enscribe-onthispage-chapter > ul {
  padding-left: 0;
}

/* JS mode: show only the current chapter's section group. With JS off the rail
 * shows all groups (a full on-this-page) — progressive enhancement. */
.enscribe-onthispage--spied .enscribe-onthispage-chapter {
  display: none;
}

.enscribe-onthispage--spied .enscribe-onthispage-chapter--current {
  display: block;
}

/* Desktop: the book becomes a THREE-column grid (chapter rail | reading column |
 * on-this-page rail) when the right rail is present; both rails are sticky. A book
 * with no sections (no right rail) keeps the article two-column grid. */
@media (min-width: 900px) {
  .enscribe-layout--book.enscribe-layout--book-3col {
    grid-template-columns: 14rem minmax(0, var(--enscribe-content-width)) 13rem;
    max-width: calc(14rem + var(--enscribe-space-12) + var(--enscribe-content-width) + var(--enscribe-space-12) + 13rem);
  }

  .enscribe-onthispage {
    position: sticky;
    top: var(--enscribe-space-8);
    align-self: start;
    max-height: calc(100vh - 2 * var(--enscribe-space-8));
    overflow-y: auto;
  }

  .enscribe-onthispage .enscribe-toc-summary {
    display: none;
  }
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body {
    margin: var(--enscribe-space-6) auto;
    padding: 0 var(--enscribe-space-4);
    font-size: 0.95rem;
  }

  article-title {
    font-size: 1.75rem;
  }

  article-subtitle {
    font-size: 1.2rem;
  }

  section-title {
    font-size: 1.25rem;
  }

  table {
    font-size: var(--enscribe-text-xs);
  }
}