/* ==========================================================================
   litedoc4 — the whole stylesheet.

   No framework, no webfont, no CDN: a site built by `litedoc4 build` has to
   render from a bare directory with no network at all.

   The colour pairs are written `light-dark(light, dark)` so both themes sit
   on one line and cannot drift apart. `color-scheme` on :root decides which
   half wins; the theme toggle sets `data-theme` and overrides it.

   Two rules are taken from doc-gen4 rather than written here — `.fn` and
   `.break_within` (marked in place). Both solve a problem specific to Lean
   signatures, and both are reformatted but otherwise unchanged:

       Copyright (c) 2021 Henrik Böving. All rights reserved.
       Released under Apache 2.0 license as described in the file LICENSE.

   Everything else in this file is litedoc4's own. See docs/provenance.md.
   ========================================================================== */

/* -- 1. reset ------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: 2px; }

/* -- 2. tokens ----------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg:        light-dark(#fcfcfb, #0e1b2a);
  --bg-sub:    light-dark(#f0f3f7, #12212f);
  --bg-code:   light-dark(#e9eef4, #172634);
  --bg-hover:  light-dark(#e3e9f1, #1c2c3c);
  --bg-sel:    light-dark(#f7edda, #2a2318);

  --fg:        light-dark(#16202c, #dbe3ec);
  --fg-dim:    light-dark(#4d5a6a, #9fadbd);
  /* Not lighter than this: `--fg-faint` carries the `source` links, the
     namespace prefixes and the sidebar headings, and it has to clear 4.5:1
     against both `--bg` and `--bg-sub` (the smaller of the two is 4.78:1). */
  --fg-faint:  light-dark(#5f6c7a, #8494a5);

  --line:      light-dark(#d9e0e8, #223040);
  --line-soft: light-dark(#e9edf3, #1a2836);

  --link:      light-dark(#1a5aa8, #7db4ec);
  --link-hov:  light-dark(#103f7d, #a9cef5);
  /* Current position, the anchor a reader landed on, the focus ring, and
     nothing else. Never decoration, never a surface. */
  --mark:      light-dark(#9a6412, #e0a447);

  /* Five families, not one kind per keyword; and none of them warm, because
     that hue is `--mark`'s and sharing it would make the kind column compete
     with the reader's own position. */
  --k-prop:    light-dark(#6a45c0, #b49ceb);
  --k-def:     light-dark(#0f7350, #5ec79c);
  --k-type:    light-dark(#ad3963, #ee8bad);
  --k-inst:    light-dark(#0d6a86, #63bcd8);
  --k-other:   light-dark(#5f6c7a, #8a99aa);

  /* The one thing on a page that outranks the reader's own position, so it is
     warm where the kind families are not — 30 degrees of hue off `--mark`,
     which is the nearest thing to it. 5.9:1 on the lighter surface and 7.6:1
     on the darker one. */
  --hole:      light-dark(#b02a1f, #f09a92);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  /* No webfont, so the mathematics comes out of what is installed: `Menlo`
     on macOS, `Consolas` on Windows, and the last three are the fallbacks
     that actually have ℝ ℕ ∑ ∈ ₁. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "DejaVu Sans Mono", "Liberation Mono", "Noto Sans Mono", monospace;

  --topbar-h: 3rem;
  --side-w: 17rem;
  /* The kind column, sized to the longest *word* a kind can contain, which is
     `noncomputable`: a word that does not fit breaks mid-syllable and reads as
     a bug. Longer *phrases* wrap at their space, so this is not sized for
     `noncomputable instance`. */
  --gutter: 7.75rem;
  --radius: 4px;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* -- 3. base ------------------------------------------------------------- */

body {
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  overflow-wrap: break-word;
}

a { color: var(--link); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { color: var(--link-hov); text-decoration-color: currentColor; }

code, pre, .sig, .tree, .toc a, .decl-name, kbd { font-family: var(--mono); }

/* One rule, so the three labels cannot drift into three sizes. */
.side-title, .stats dt, .kind {
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
}

.skip {
  position: absolute; left: .5rem; top: -3rem; z-index: 100;
  padding: .5rem .75rem; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); transition: top .15s ease;
}
.skip:focus { top: .5rem; }

/* -- 4. topbar ----------------------------------------------------------- */

/* Opaque, not translucent: what scrolls under is dense monospace, and the
   half-legible ghost of a signature is worse than a line. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .5rem;
  height: var(--topbar-h);
  padding-inline: .75rem;
  background: var(--bg-sub);
  border-bottom: 1px solid var(--line);
}

.iconbtn {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: var(--radius); color: var(--fg-dim);
}
.iconbtn:hover { background: var(--bg-hover); color: var(--fg); }
.iconbtn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.iconbtn[aria-pressed="true"] { color: var(--fg); }

.home {
  font-family: var(--mono); font-weight: 700; letter-spacing: -.01em;
  color: var(--fg); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home:hover { color: var(--link); }

/* -- 5. search ----------------------------------------------------------- */

.search { position: relative; margin-left: auto; flex: 1 1 12rem; max-width: 26rem; }
.search input {
  width: 100%; height: 2.25rem;
  padding: 0 .7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
}
.search input::placeholder { color: var(--fg-faint); }
.search input:focus { border-color: var(--mark); outline: none; }

.search-results {
  position: absolute; top: calc(100% + .35rem); right: 0; left: 0; z-index: 40;
  max-height: min(28rem, 70dvh); overflow-y: auto;
  list-style: none;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 28px light-dark(rgb(16 32 48 / .14), rgb(0 0 0 / .5));
}
.search-results:empty, .search-results[hidden] { display: none; }
.search-results li > a {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .4rem .6rem; text-decoration: none; color: var(--fg);
  font-family: var(--mono); font-size: .85rem;
}
.search-results li > a:hover,
.search-results li[aria-selected="true"] > a { background: var(--bg-sel); }
.search-results .kind { flex: none; width: 4.5rem; color: var(--fg-faint); }
.search-results .where { margin-left: auto; color: var(--fg-faint); font-size: .72rem; }
.search-empty { padding: .6rem; color: var(--fg-faint); font-size: .85rem; }

/* -- 6. shell and sidebar ------------------------------------------------ */

.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }

.sidebar {
  position: sticky; top: var(--topbar-h);
  height: calc(100dvh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.25rem .55rem 4rem;
  border-right: 1px solid var(--line);
  background: var(--bg-sub);
}

.side + .side { margin-top: 1.75rem; }
.side-title {
  color: var(--fg-faint);
  padding: 0 .4rem .35rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}

/* The hanging indent is what says a wrapped second line is still one entry. */
.toc { list-style: none; }
.toc a, .tree a, .tree .node-name {
  display: block; font-size: .78rem; line-height: 1.5;
  text-decoration: none; color: var(--fg-dim);
  word-break: break-all;
}
.toc a {
  padding: .22rem .4rem .22rem 1.45rem;
  text-indent: -1.05rem;
  border-radius: var(--radius);
}
.toc .name { word-break: normal; }
.toc a:hover, .tree .row:hover a { background: var(--bg-hover); color: var(--fg); }
/* The bar is what survives at a glance; the wash is what makes it findable
   after scrolling a 400-entry tree. */
.toc a[aria-current], .tree a[aria-current] {
  background: var(--bg-sel); color: var(--fg); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--mark);
}

/* A row is [disclosure][name]: separate targets, because a module can be both
   a page and a parent. */
.tree ul { list-style: none; padding-left: .75rem; }
.tree > ul { padding-left: 0; }
.tree li { line-height: 1.5; }
.tree .row { display: flex; align-items: center; border-radius: var(--radius); }
.tree .row:hover { background: var(--bg-hover); }
.tree .twisty, .tree .twisty-spacer {
  flex: none; width: 1.1rem; align-self: stretch;
  color: var(--fg-faint); font-size: .9rem; line-height: 1;
}
.tree .twisty::before {
  content: "›"; display: inline-block; transition: transform .15s ease;
}
.tree .twisty[aria-expanded="true"]::before { transform: rotate(90deg); }
.tree .twisty:hover { color: var(--fg); }
.tree a, .tree .node-name { flex: 1; min-width: 0; padding: .2rem .3rem .2rem .4rem; }
.tree .node-name { color: var(--fg-faint); }

.scrim { display: none; }

/* -- 7. page ------------------------------------------------------------- */

.content {
  min-width: 0;
  max-width: 74rem;
  padding: 2rem clamp(1rem, 4vw, 3rem) 8rem;
}

.modhead { padding-bottom: 1.1rem; border-bottom: 2px solid light-dark(#16202c, #41566c); }
.modhead h1 {
  font-family: var(--mono);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 1.9rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  word-break: break-all;
}
.modhead h1 .name { word-break: normal; }
.modactions { margin-top: .5rem; }

.src {
  font-family: var(--font); font-size: .75rem; letter-spacing: .02em;
  color: var(--fg-faint); text-decoration: none;
}
.src:hover { color: var(--link); text-decoration: underline; }

.modmeta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: .8rem 0; }
.imports { font-size: .85rem; }
.imports > summary {
  cursor: pointer; color: var(--fg-dim); width: fit-content;
  padding: .15rem .35rem; border-radius: var(--radius);
}
.imports > summary:hover { background: var(--bg-hover); color: var(--fg); }
.imports .count { color: var(--fg-faint); }
.imports ul { list-style: none; padding: .35rem 0 0 1.2rem; }
.imports li { font-family: var(--mono); font-size: .8rem; line-height: 1.7; word-break: break-all; }
.imports a { text-decoration: none; }
.imports a:hover { text-decoration: underline; }

/* -- 8. declaration ------------------------------------------------------ */

/* A rule across the full width, which is what makes a 200-declaration page
   countable by eye. */
.decl {
  position: relative;
  padding: 1.6rem 0 1.9rem var(--gutter);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
/* A marker in the gutter says "here" without repainting the block the reader
   came to read. */
.decl:target::before {
  content: ""; position: absolute; left: calc(var(--gutter) - 1.4rem);
  top: 1.6rem; bottom: 1.9rem;
  width: 3px; background: var(--mark); border-radius: 2px;
}

.decl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.decl-name {
  font-size: 1.125rem; font-weight: 700; line-height: 1.35;
  min-width: 0; word-break: break-all;
}
.decl-name .name { word-break: normal; }
.decl-name a { color: var(--fg); text-decoration: none; }
.decl-name a:hover { color: var(--link); text-decoration: underline; }
.decl-head .src { margin-left: auto; align-self: center; }

.kind { font-family: var(--mono); color: var(--k-other); }
/* Out of the flex row and into the gutter; `top` is the block's own padding
   plus the drop from the name's line box to its cap height. It wraps rather
   than running into the name: widening the column for the one longest kind
   would cost every signature on every page that width instead. */
.decl-head .kind {
  position: absolute; left: 0; top: calc(1.6rem + .32rem);
  width: calc(var(--gutter) - 1.25rem);
  line-height: 1.4;
}
.decl[data-kind="theorem"] .kind,
.decl[data-kind="axiom"] .kind    { color: var(--k-prop); }
.decl[data-kind="def"] .kind,
.decl[data-kind="opaque"] .kind   { color: var(--k-def); }
.decl[data-kind="structure"] .kind,
.decl[data-kind="class"] .kind,
.decl[data-kind="inductive"] .kind { color: var(--k-type); }
.decl[data-kind="instance"] .kind { color: var(--k-inst); }

.attrs {
  font-family: var(--mono); font-size: .76rem; color: var(--fg-faint);
  margin-top: .35rem;
}

/* What the signature cannot say. A pill rather than a line of prose: it sits
   between the name and the type, where anything tall pushes the thing the
   reader came for off the first screen. */
.flags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.flag {
  font-size: .74rem; line-height: 1.6;
  padding: 0 .5rem;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--fg-dim);
}
.flag code { font-family: var(--mono); font-size: .95em; }
.flag a { color: inherit; }
/* `sorry` is two claims and they are drawn as two: the declaration's own hole
   is filled, a hole underneath it is only outlined. */
.flag[data-flag="sorry-direct"] {
  color: var(--hole);
  border-color: color-mix(in srgb, var(--hole) 45%, transparent);
  background: color-mix(in srgb, var(--hole) 10%, transparent);
}
.flag[data-flag="sorry-transitive"] {
  color: var(--hole);
  border-color: color-mix(in srgb, var(--hole) 30%, transparent);
}

/* -- 9. signature -------------------------------------------------------- */

/* The IR's spans carry replayed whitespace, so `pre-wrap` *inside* a term is
   load-bearing. It must not go on `.sig` itself: the renderer puts a newline
   between binders for the sake of the source, and under `pre-wrap` those become
   real line breaks. Inside a `.fn` there is no such newline. */
.sig {
  margin-top: .8rem;
  font-size: .875rem; line-height: 1.7;
  overflow-x: auto;
}

/* One binder per line, so a reader can count a declaration's hypotheses without
   reading them. Scoped to `> ` because `.colon` is also a field signature's
   separator (§10), where it stays inline. */
.sig > .binder { display: block; padding-left: 1.6ch; color: var(--fg-dim); }
.sig > .binder.implicit { color: var(--fg-faint); }

.sig > .colon {
  display: block; margin: .5rem 0 .35rem;
  color: var(--fg-dim); line-height: 1;
}
/* Short: a full-width rule would read as another declaration separator. */
.sig > .colon::after {
  content: ""; display: inline-block; vertical-align: .1em;
  width: min(100% - 2.4ch, 30rem); margin-left: .45ch;
  border-top: 1px solid var(--line);
}

.sig-type {
  display: block; padding-left: 1.6ch;
  white-space: pre-wrap; font-size: .9375rem; color: var(--fg);
}

/* A declaration with no binders has no context to separate from its
   conclusion, so the colon goes back to being a colon. Where `:has()` is not
   supported the block form shows, which is correct and merely emptier. */
.sig:not(:has(> .binder)) > .colon { display: inline; }
.sig:not(:has(> .binder)) > .colon::after { content: none; }
.sig:not(:has(> .binder)) > .sig-type { display: inline; padding-left: .6ch; }

/* Hanging indent per term, so a wrapped subterm sits under its opener rather
   than at the left margin — the reason a signature stays readable at 375 px.
   From doc-gen4 `static/style.css:608-615` (see the header). */
.fn {
  display: inline-block;
  text-indent: -1ex; padding-left: 1ex;
  white-space: pre-wrap;
  vertical-align: top;
}
.binder { vertical-align: top; }
.colon { color: var(--fg-faint); }
.extends { color: var(--fg-faint); font-weight: 600; }

/* Colouring every constant turns the type into confetti: underline only. */
.sig a, .field-sig a, .equations a {
  color: inherit; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 25%, transparent);
  text-underline-offset: .16em;
}
.sig a:hover, .field-sig a:hover, .equations a:hover {
  color: var(--link); text-decoration-color: currentColor;
}

/* Break a long name anywhere, except across the dots that separate its
   components. From doc-gen4 `static/style.css:664-670` (see the header). */
.break_within { word-break: break-all; }
.break_within .name { word-break: normal; }

/* -- 10. structure fields and inductive constructors ---------------------- */

/* A constructor is laid out exactly like a direct field, so `.ctors`/`.ctor`
   share the field rules; the selectors differ only because the HTML has to
   name what each list is. */
.fields, .ctors { list-style: none; margin-top: 1rem; }
.field, .ctor {
  padding: .4rem 0 .4rem .9rem;
  border-left: 2px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
.field + .field, .ctor + .ctor { margin-top: .15rem; }
.field-sig { font-family: var(--mono); font-size: .84rem; white-space: pre-wrap; }
.field-name { font-weight: 700; }
.field.inherited { border-left-style: dashed; }
.field.inherited .field-name { font-weight: 500; color: var(--fg-dim); }
.field-doc { margin-top: .2rem; font-size: .88rem; color: var(--fg-dim); }
.ctor-note { margin-top: .7rem; font-size: .8rem; color: var(--fg-faint); }
.ctor-note code { font-family: var(--mono); }

/* -- 11. equations / instances ------------------------------------------- */

.extra { margin-top: .9rem; font-size: .85rem; }
.extra > summary {
  cursor: pointer; width: fit-content; color: var(--fg-dim);
  padding: .15rem .35rem; border-radius: var(--radius);
}
.extra > summary:hover { background: var(--bg-hover); color: var(--fg); }
.extra > ul { list-style: none; padding: .4rem 0 0 1rem; }
.extra li { font-family: var(--mono); font-size: .82rem; line-height: 1.7; }
.equations li { white-space: pre-wrap; padding-block: .15rem; }

/* -- 12. docstrings ------------------------------------------------------ */

.moddoc, .doc { max-width: 72ch; }
.moddoc { padding-block: 1.4rem; }
.doc { margin-top: 1rem; }

.doc > * + *, .moddoc > * + * { margin-top: .8rem; }
.moddoc :is(h1, h2, h3, h4, h5, h6),
.doc :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.3; font-weight: 650; margin-top: 1.9rem;
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
.moddoc h1, .doc h1 { font-size: 1.35rem; letter-spacing: -.01em; }
.moddoc h2, .doc h2 { font-size: 1.1rem; }
.moddoc h3, .doc h3 { font-size: 1rem; }
.moddoc :is(h4, h5, h6), .doc :is(h4, h5, h6) { font-size: .95rem; }
.moddoc > :first-child, .doc > :first-child { margin-top: 0; }

.hover-link {
  margin-left: .3em; color: var(--fg-faint); text-decoration: none;
  opacity: 0; transition: opacity .12s ease;
}
:is(h1, h2, h3, h4, h5, h6):hover > .hover-link,
.hover-link:focus-visible { opacity: 1; }

.doc :is(ul, ol), .moddoc :is(ul, ol) { padding-left: 1.4rem; }
.doc li + li, .moddoc li + li { margin-top: .2rem; }

.doc code, .moddoc code, .field-doc code {
  font-size: .875em;
  background: var(--bg-code);
  padding: .12em .32em; border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.doc pre, .moddoc pre {
  background: var(--bg-code); border: 1px solid var(--line-soft);
  padding: .75rem 1rem; border-radius: var(--radius);
  overflow-x: auto; font-size: .84rem; line-height: 1.6;
}
.doc pre code, .moddoc pre code { background: none; padding: 0; font-size: 1em; }

.doc blockquote, .moddoc blockquote {
  padding-left: .9rem; border-left: 3px solid var(--line);
  color: var(--fg-dim);
}
.doc table, .moddoc table {
  display: block; overflow-x: auto;
  border-collapse: collapse; font-size: .88rem;
}
.doc :is(th, td), .moddoc :is(th, td) {
  border: 1px solid var(--line); padding: .3rem .6rem; text-align: left;
}
.doc th, .moddoc th { background: var(--bg-sub); }
.doc hr, .moddoc hr { border: 0; border-top: 1px solid var(--line); }

/* -- 13. index, search and not-found pages ------------------------------- */

body.plain .shell { grid-template-columns: minmax(0, 1fr); }
/* Wide enough for the module index to run in three columns, not two. */
body.plain .content { max-width: 76rem; }
body.plain .modhead h1 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem); }

.lede { margin-top: .7rem; max-width: 66ch; color: var(--fg-dim); }

.stats { display: flex; flex-wrap: wrap; gap: .35rem 3rem; margin-top: 1.6rem; }
.stats dt { color: var(--fg-faint); }
.stats dd { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; line-height: 1.4; }

.section-title { margin-top: 2.75rem; font-size: 1rem; letter-spacing: -.01em; }

.modlist { list-style: none; margin-top: 1rem; columns: 19rem; column-gap: 2.5rem; }
.modlist li { break-inside: avoid; }
/* Only when the package described its modules. A grid of one wide row each is
   the wrong shape for a list of bare names — 432 of them in one column is a
   page nobody scrolls — so the columns stay until there is a second thing in
   the row to line up. */
.modlist-described { columns: auto; }
.modlist-described li {
  display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: 0 1.5rem; align-items: baseline;
}
.modsummary { color: var(--fg-faint); font-size: .85rem; line-height: 1.5; }
.modlist a {
  display: block; padding: .2rem .4rem .2rem 1.45rem;
  text-indent: -1.05rem; border-radius: var(--radius);
  font-family: var(--mono); font-size: .82rem;
  text-decoration: none; color: var(--fg-dim); word-break: break-all;
}
.modlist .name { word-break: normal; }
.modlist a:hover { background: var(--bg-hover); color: var(--fg); }

.results { list-style: none; margin-top: 1.25rem; }
.results a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  padding: .45rem .5rem; border-radius: var(--radius);
  font-family: var(--mono); font-size: .875rem;
  text-decoration: none; color: var(--fg); word-break: break-all;
}
.results a:hover { background: var(--bg-hover); }
.results .kind { flex: none; width: 5rem; color: var(--fg-faint); }
.results .where {
  margin-left: auto; font-family: var(--font); font-size: .78rem; color: var(--fg-faint);
  word-break: normal;
}
.results-note { margin-top: .9rem; color: var(--fg-faint); font-size: .85rem; }

.missing-path {
  font-family: var(--mono); font-size: .9em;
  background: var(--bg-code); padding: .15em .4em; border-radius: var(--radius);
  overflow-wrap: anywhere;
}

/* -- 14. namespaces ------------------------------------------------------ */

/* `break_within` wraps each dot-separated component in `.name`, so the last one
   is the name and the rest is where it lives; dimming the prefix is what lets a
   reader skip a namespace every heading on the page repeats. Only where a
   *full* name is displayed — inside a signature the components are already dim
   as a whole. */
.modhead h1 .name,
.decl-name .name,
.toc a .name,
.modlist a .name { color: var(--fg-faint); font-weight: 500; }
.modhead h1 .name:last-of-type,
.decl-name .name:last-of-type { color: inherit; font-weight: inherit; }
/* These two are `--fg-dim` as a whole, so "inherit" would leave the name no
   darker than the namespace it is being separated from. */
.toc a .name:last-of-type,
.modlist a .name:last-of-type { color: var(--fg); font-weight: inherit; }

/* -- 15. narrow screens -------------------------------------------------- */

@media (min-width: 60.001rem) {
  #nav-toggle { display: none; }
}

@media (max-width: 60rem) {
  .modlist-described li { grid-template-columns: minmax(0, 1fr); }
  .modsummary { padding: 0 .4rem .35rem 1.45rem; }
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed; z-index: 35;
    top: var(--topbar-h); bottom: 0; left: 0;
    width: min(21rem, 84vw); height: auto;
    transform: translateX(-101%);
    transition: transform .18s ease;
    box-shadow: 0 0 32px light-dark(rgb(16 32 48 / .18), rgb(0 0 0 / .5));
  }
  body[data-nav="open"] .sidebar { transform: none; }

  .scrim {
    display: block; position: fixed; inset: var(--topbar-h) 0 0; z-index: 34;
    background: rgb(0 0 0 / .35);
  }
  .scrim[hidden] { display: none; }

  /* The gutter costs the signature more width than the column is worth here. */
  .decl { padding-left: 0; }
  .decl-head .kind { position: static; width: auto; }
  .decl:target::before { left: -.6rem; }

  .content { padding-top: 1.5rem; }
  .search { flex-basis: 7rem; }
  .home { max-width: 7rem; font-size: .9rem; }
}

@media (max-width: 26rem) {
  .decl-head .src { margin-left: 0; }
}

/* -- 15a. the index page's intro ----------------------------------------- */

/* `litedoc4.toml`'s `index`, rendered by the docstring renderer, so it reuses
   `.doc`'s typography and only needs to be told where it sits. */
.intro { margin-block: 1.4rem; }

/* -- 15b. mathematics ---------------------------------------------------- */

/* `Litedoc4.Md` writes MathML into docstrings at build time, so there is no
   MathJax and no KaTeX here — the browser lays this out itself. What it still needs is the CSS `math-core`'s output assumes.

   Taken from `math-core`'s own `css/mathmlfixes.css` (MIT, Copyright 2024
   Charles Edward Gagnon / Thomas MK; see NOTICE and docs/provenance.md),
   reformatted, with two changes and no others:

     - **no webfont.** Upstream names a Libertinus or Computer Modern `.woff2`
       next to the stylesheet; this file's first line says no webfont, and the
       cost is 400-700 KB per site for a typeface. `font-family: math` is the
       CSS generic for "the math font this browser already has".
     - `merror.math-core-unknown-cmd` is gone. `litedoc4_md::to_mathml` leaves
       `ignore_unknown_commands` at `false`, so an unknown command is an error
       the renderer answers `None` to rather than markup — nothing here can
       produce that element.

   The `menclose` block is kept even though the measurement corpus produces
   none (measured 2026-08-22: 0 of 2,113 converted spans). It is not dead the way
   the `merror` rule is: a docstring that writes `\cancel{…}` produces it, and
   without these rules Chromium draws nothing at all. */

math { font-family: math; }
/* Prose inside a formula is prose: `\text{…}` should not switch typeface. */
math mtext { font-family: inherit; }

/* The MathML Core default, which Firefox does not apply, and unpadded edges so
   that a matrix does not sit inside a margin of its own. */
mtd { padding: .5ex .4em; }
mtr > mtd:first-child { padding-left: 0; }
mtr > mtd:last-child { padding-right: 0; }

/* Chromium only — it implements no `<menclose>`, so the element is drawn out of
   the `mrow`s `math-core` emits beside it. */
@supports (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)) {
  menclose { position: relative; padding: .5ex 0; }
  menclose[notation~="box" i] { border: .04em solid; padding: .3rem; }
  menclose[notation~="actuarial" i] {
    padding: .03889rem .03889rem 0 .03889rem;
    border-width: .08em .08em 0 0;
    border-style: solid;
    margin-right: .03889rem;
  }
  menclose[notation~="phasorangle" i] {
    border-bottom: .067em solid;
    padding: .2em .2em .1em .6em;
  }
  mrow.menclose-phasorangle {
    display: inline-block;
    position: absolute;
    left: .5px;
    bottom: -.04em;
    height: 100%;
    aspect-ratio: .5;
    background-color: currentcolor;
    clip-path: polygon(.05em 100%, 0 calc(100% - .05em), calc(100% - .05em) 0, 100% .05em);
  }
  mrow.menclose-updiagonalstrike,
  mrow.menclose-downdiagonalstrike {
    display: inline-block;
    position: absolute;
    left: .5px;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: currentcolor;
  }
  mrow.menclose-updiagonalstrike {
    clip-path: polygon(.05em 100%, 0 calc(100% - .05em), calc(100% - .05em) 0, 100% .05em);
  }
  mrow.menclose-downdiagonalstrike {
    clip-path: polygon(0 .05em, .05em 0, 100% calc(100% - .05em), calc(100% - .05em) 100%);
  }
}

/* Chromium and Safari — the accent gap Firefox already produces. 42 of the
   corpus's spans carry an accent (measured 2026-08-22). */
@supports (not (-moz-appearance: none)) {
  mover[accent="true" i] > mo:nth-child(2) { margin-bottom: .15ex; }
}

/* `overflow-x` because a formula cannot be wrapped and must not widen the
   page — the same problem `.doc pre` has. */
:is(.moddoc, .doc, .field-doc) math[display="block"] {
  overflow-x: auto;
  margin: .6rem 0;
}

/* -- 16. print ----------------------------------------------------------- */

@media print {
  .topbar, .sidebar, .scrim, .skip { display: none; }
  .shell { grid-template-columns: 1fr; }
  .content { max-width: none; padding: 0; }
  /* CSS cannot open a `<details>`; `app.js` opens them for `beforeprint`. */
  .extra > summary, .imports > summary { color: var(--fg); }
  a { text-decoration: none; }
}