explico 0.4.0 → 0.6.0

package/src/styles/global.css

@@ -13,12 +13,43 @@
   --sl-color-accent-high: #123c32;
 }
 
+/* Every intentionally wide surface owns a local horizontal scroller. Keep a
+   replaced element (notably an SVG containing `foreignObject`) from widening
+   iOS WebKit's layout viewport before that local overflow rule takes effect.
+   `clip` does not create the accidental vertical scroll container that
+   `overflow-x: hidden` would create when the other axis remains visible. */
+html,
+body {
+  overflow-x: clip;
+}
+
 .lab-shell {
   margin-block: 1.5rem;
   padding: clamp(1rem, 3vw, 1.5rem);
   border: 1px solid var(--sl-color-gray-5);
-  border-radius: 0.75rem;
-  background: var(--sl-color-gray-7);
+  border-top: 4px solid var(--sl-color-accent);
+  border-radius: 0.2rem;
+  /* `--sl-color-gray-7` (the previous background) is only defined in
+     Starlight's light-theme override, not the dark-theme base palette — it
+     silently fell back to no background at all in dark mode. `--sl-color-bg`
+     is defined in both. */
+  background: color-mix(in srgb, var(--sl-color-bg) 94%, var(--sl-color-accent) 6%);
+  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.13);
+}
+
+/* A lab already wrapped in a `<Figure>` sits inside `.keyed-figure__details`,
+   which draws this exact same card (border, thick top line, tinted
+   background) around the title *and* the lab together — a nested
+   `.lab-shell` drawing its own copy of that card again would stack two
+   borders/backgrounds/lines instead of one. Strip it back to plain spacing
+   here; a `.lab-shell` used on its own (not inside a figure) is unaffected. */
+.keyed-figure__body .lab-shell {
+  margin-block: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
 }
 
 .lab-shell label,
@@ -206,7 +237,7 @@
 }
 
 .assessment-shell {
-  margin-block: 1.5rem;
+  margin-block: 0.75rem 1.5rem;
   padding: clamp(1rem, 3vw, 1.5rem);
   border: 1px solid var(--sl-color-gray-5);
   border-radius: 0.75rem;
@@ -218,23 +249,20 @@
   outline-offset: 2px;
 }
 
-.assessment-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.5rem 1rem;
-  margin-bottom: 1rem;
+.assessment-heading-number {
+  color: var(--sl-color-text-accent);
+  white-space: nowrap;
 }
 
-.assessment-header h3 {
-  margin: 0;
+.assessment-shell > h3 {
+  margin-block: 0 0.75rem;
 }
 
 .assessment-progress {
-  margin: 0;
+  margin: 0 0 0.75rem;
   font-size: 0.85rem;
   font-variant-numeric: tabular-nums;
+  text-align: end;
   color: var(--sl-color-gray-2);
 }
 
@@ -291,13 +319,22 @@
 
 .assessment-chevron {
   flex: none;
-  transition: transform 0.15s ease;
+  transition:
+    opacity 150ms ease 700ms,
+    transform 150ms ease;
 }
 
 .assessment-disclosure[aria-expanded='true'] .assessment-chevron {
+  opacity: 0;
   transform: rotate(180deg);
 }
 
+.assessment-disclosure[aria-expanded='true']:hover .assessment-chevron,
+.assessment-disclosure[aria-expanded='true']:focus-visible .assessment-chevron {
+  opacity: 1;
+  transition: opacity 100ms ease;
+}
+
 .assessment-panel {
   padding: 0 1rem 1rem;
   border-top: 1px solid var(--sl-color-gray-5);
@@ -445,7 +482,7 @@
   }
 
   .layout-navigation-panel {
-    min-height: 100%;
+    min-height: auto;
   }
 
   /* A compact chapter remains useful as a row of lesson icons. The
@@ -627,25 +664,83 @@
 }
 
 @media (min-width: 72rem) {
-  :root {
-    /* Mirrors Starlight's responsive right-column allocation. The main frame
-       is the viewport minus the current navigation width, which can itself be
-       the collapsed edge rail. */
-    --layout-page-sidebar-open-width: max(
-      var(--sl-sidebar-width),
-      calc(
-        var(--sl-sidebar-width) +
-          (
-            100vw - var(--sl-content-inline-start, 0rem) -
-              var(--sl-content-width) - var(--sl-sidebar-width)
-          ) /
-          2
-      )
-    );
+  /* Starlight's own formula (`TwoColumnContent.astro`) makes this column at
+     least as wide as the left nav, plus half of whatever space is left over
+     past the article's own max width — on a wide monitor that can be a very
+     wide rail for a handful of short heading links. `width: max-content`
+     shrink-wraps it to exactly as wide as its longest single-line item
+     needs (browsers compute that unwrapped-line width unprompted — the same
+     thing that makes it wrap at any *narrower* width), and `max-width: 80ch`
+     caps that for a page with one genuinely long heading, at which point it
+     wraps rather than growing further. Both the resting state and the
+     hover-to-peek state (below, while collapsed to the edge rail) use the
+     same two declarations, so peeking never opens to a different width than
+     the rail would normally sit at. */
+  .right-sidebar-container {
+    width: max-content;
+    max-width: 80ch;
   }
 
   .right-sidebar {
+    width: max-content;
+    max-width: 80ch;
     background-color: var(--sl-color-bg);
+    /* Anchor to the viewport edge instead of Starlight's default static
+       position (wherever `.right-sidebar-container`'s reserved flex column
+       happens to land, which drifts left as `.main-pane` grows on a wide
+       screen — see below). This is the *same* anchor, `inset-inline-end: 0`,
+       the collapsed rail and its hover-to-peek state already use a few
+       rules down — matched exactly, not just similarly, so opening the
+       rail moves nothing: without this it jumped from flush against the
+       edge (peeking) to wherever `.main-pane` happened to end (open), often
+       a very different spot on a wide screen even though the box itself is
+       the same size both times, reading as a new, apparently larger panel
+       rather than the same one staying put. */
+    inset-inline-end: 0;
+  }
+
+  /* Starlight's own `.main-pane` width formula (`TwoColumnContent.astro`,
+     first two `min()` branches below, unchanged) grows the reading column
+     past its own comfortable measure (`--sl-content-width`) by handing it
+     half of whatever space is left over after the left nav — sized on the
+     assumption that the toc might need the *other* half. `.right-sidebar`
+     above no longer does (it shrinks to fit its content) and, now that it's
+     edge-anchored rather than positioned relative to `.main-pane`, growing
+     `.main-pane` too far really can run it into the toc instead of just
+     leaving unused space the way it would have under the old static
+     positioning (which always placed the toc *after* `.main-pane`,
+     whatever its width — the one thing that positioning had going for it).
+     The third branch is that safety net: never let `.main-pane` extend
+     within `--toc-gap` of where the (edge-anchored) toc's own left edge
+     is. `--toc-actual-width` is `LayoutHeader.astro`'s live measurement of
+     `.right-sidebar`'s real rendered width, set once it's actually on
+     screen — plain CSS has no way to know that ahead of time, since a
+     `position: fixed` element's size normally can't feed back into a
+     sibling's layout the way an ordinary flex child's would. Until that
+     measurement lands (or without JS), `--toc-reserved-fallback` covers
+     the worst case the toc could ever actually be: its own 80ch cap above,
+     plus the same margin. Because the toc is now independently
+     edge-anchored (not positioned from `.main-pane` any more), measuring
+     it doesn't close a loop back into this formula the way it would have
+     under the old positioning. */
+  :root {
+    --toc-gap: 2rem;
+    --toc-reserved-fallback: calc(80ch + 3rem);
+  }
+
+  html[data-has-sidebar][data-has-toc]:not([data-page-sidebar-hidden])
+    .main-pane {
+    width: min(
+      calc(100% - var(--sl-sidebar-width)),
+      calc(
+        var(--sl-content-width) +
+          (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
+      ),
+      calc(
+        100% - var(--toc-gap) -
+          var(--toc-actual-width, var(--toc-reserved-fallback))
+      )
+    );
   }
 
   .layout-page-sidebar {
@@ -701,7 +796,8 @@
 
   html[data-page-sidebar-hidden]:not([data-page-sidebar-peek-suppressed])
     .right-sidebar:hover {
-    width: var(--layout-page-sidebar-open-width);
+    width: max-content;
+    max-width: 80ch;
     overflow-y: auto;
     box-shadow: var(--sl-shadow-lg);
   }
@@ -793,16 +889,32 @@
   }
 }
 
+/* Native browser tooltips: `<span title="…">` in Markdown content. A dotted
+   underline and hover highlight — same visual treatment as abbreviation terms
+   (N14), distinguishing them from plain text and signalling a hover event. */
+.sl-markdown-content span[title] {
+  text-decoration: underline dotted;
+  text-underline-offset: 0.2em;
+  cursor: help;
+}
+
+.sl-markdown-content span[title]:hover,
+.sl-markdown-content span[title]:focus-visible {
+  background: var(--sl-color-accent-low);
+  color: var(--sl-color-text-accent);
+}
+
 /* Equation identity (D7): a keyed `$$…$$` is wrapped by the remark adapter in
    `.keyed-equation` with an `id="eq-<key>"`, a `data-eq-number`, and a
-   focusable number link. Prose refers to it with `[[eq:key]]` →
-   `a.equation-ref`. The deep-link highlight is a pure-CSS `:target` animation
-   with a reduced-motion fallback; `KeyedFloatEnhancer.astro` only re-triggers it
-   on a repeated activation and moves focus. */
+   `.keyed-equation__controls` pair — a focusable number link, and a "Copy
+   LaTeX" button. Prose refers to it with `[[eq:key]]` → `a.equation-ref`. The
+   deep-link highlight is a pure-CSS `:target` animation with a
+   reduced-motion fallback; `KeyedFloatEnhancer.astro` only re-triggers it on
+   a repeated activation and moves focus. */
 .sl-markdown-content .keyed-equation {
   position: relative;
   scroll-margin-block-start: 5rem;
-  padding-inline-end: 3.5rem;
+  padding-inline-end: 5.25rem;
   border-radius: 0.3rem;
 }
 
@@ -810,11 +922,17 @@
   margin-block: 0;
 }
 
-.sl-markdown-content a.keyed-equation__number {
+.sl-markdown-content .keyed-equation__controls {
   position: absolute;
   inset-inline-end: 0.25rem;
   inset-block-start: 50%;
   transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.sl-markdown-content a.keyed-equation__number {
   font-variant-numeric: tabular-nums;
   font-size: var(--sl-text-sm);
   color: var(--sl-color-text-accent);
@@ -827,9 +945,43 @@
   transition: opacity 120ms ease-out;
 }
 
+.sl-markdown-content .keyed-equation__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 999px;
+  color: var(--sl-color-gray-1);
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+  /* Quiet by default for the same reason as the number above — it fades in
+     alongside it, not the equation, so print (which drops it entirely, see
+     below) never has to reconcile the two. */
+  opacity: 0.45;
+  transition:
+    opacity 120ms ease-out,
+    border-color 120ms ease-out,
+    color 120ms ease-out;
+}
+
+.sl-markdown-content .keyed-equation__copy svg {
+  width: 0.85rem;
+  height: 0.85rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
 @media (hover: none) {
-  /* No hover to reveal it on touch, so keep the number legible there. */
-  .sl-markdown-content a.keyed-equation__number {
+  /* No hover to reveal them on touch, so keep both legible there. */
+  .sl-markdown-content a.keyed-equation__number,
+  .sl-markdown-content .keyed-equation__copy {
     opacity: 1;
   }
 }
@@ -842,14 +994,111 @@
   text-decoration: underline;
 }
 
+.sl-markdown-content .keyed-equation:hover .keyed-equation__copy,
+.sl-markdown-content .keyed-equation:focus-within .keyed-equation__copy,
+.sl-markdown-content .keyed-equation:target .keyed-equation__copy,
+.sl-markdown-content .keyed-equation__copy:focus-visible {
+  opacity: 1;
+}
+
+.sl-markdown-content .keyed-equation__copy:hover,
+.sl-markdown-content .keyed-equation__copy:focus-visible {
+  border-color: var(--sl-color-accent);
+  color: var(--sl-color-text-accent);
+}
+
+.sl-markdown-content .keyed-equation__copy:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+
+/* The click-to-copy gesture (`KeyedFloatEnhancer.astro`) works on any part of
+   the equation that isn't a symbol with its own notation card — signal that
+   with a "copy" cursor there, while an explained symbol keeps its existing
+   "help" cursor (`NotationLayer.astro`). The second rule must out-specificity
+   the first regardless of which stylesheet loads later, so it repeats the
+   `.katex-html` step rather than relying on cascade order between files. */
+.sl-markdown-content .keyed-equation .katex-html,
+.sl-markdown-content .inline-equation .katex-html {
+  cursor: copy;
+}
+
+.sl-markdown-content .keyed-equation .katex-html [data-notation-key],
+.sl-markdown-content .inline-equation .katex-html [data-notation-key] {
+  cursor: help;
+}
+
+/* Hovering specifically an unexplained part (not a notation symbol) of a
+   display equation highlights its copy button, so a reader can tell what
+   clicking there will do before they click. `:has()` is well-supported by
+   now; nothing breaks without it, the highlight just never appears. */
+.sl-markdown-content
+  .keyed-equation:has(.katex-html:hover):not(:has([data-notation-key]:hover))
+  .keyed-equation__copy {
+  opacity: 1;
+  border-color: var(--sl-color-accent);
+  color: var(--sl-color-text-accent);
+}
+
+/* `data-copied` is set briefly by the click handler in `KeyedFloatEnhancer.astro`,
+   the same "flash a tooltip, then remove the attribute" pattern as the
+   glossary's copy-link button (`NotationGlossary.astro`) and the notation
+   popup card's own copy button (`NotationLayer.astro`). */
+.sl-markdown-content .keyed-equation__copy[data-copied] {
+  opacity: 1;
+}
+
+.sl-markdown-content .keyed-equation__copy[data-copied]::after {
+  content: 'Copied!';
+  position: absolute;
+  inset-block-end: calc(100% + 0.4rem);
+  inset-inline-end: 0;
+  padding: 0.15rem 0.45rem;
+  border-radius: 0.35rem;
+  background: var(--sl-color-accent-low);
+  color: var(--sl-color-text-accent);
+  font-size: var(--sl-text-xs);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* An inline `$…$` equation (`inlineEquationNode` in `remark-notation.mjs`)
+   carries the same click-to-copy gesture and cursor treatment as a display
+   equation above, but deliberately no visible chrome of its own — a button
+   here would break the reading line, which is the whole reason this exists
+   instead of just reusing `.keyed-equation__copy`. `position: relative` only
+   so its own "Copied!" flash (the click handler has no button to flash
+   instead) has something to anchor to. */
+.sl-markdown-content .inline-equation {
+  position: relative;
+}
+
+.sl-markdown-content .inline-equation[data-copied]::after {
+  content: 'Copied!';
+  position: absolute;
+  inset-block-end: 100%;
+  inset-inline-start: 50%;
+  translate: -50% 0;
+  margin-block-end: 0.25rem;
+  padding: 0.15rem 0.45rem;
+  border-radius: 0.35rem;
+  background: var(--sl-color-accent-low);
+  color: var(--sl-color-text-accent);
+  font-size: var(--sl-text-xs);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .sl-markdown-content a.keyed-equation__number {
+  .sl-markdown-content a.keyed-equation__number,
+  .sl-markdown-content .keyed-equation__copy {
     transition: none;
   }
 }
 
 @media (forced-colors: active) {
-  .sl-markdown-content a.keyed-equation__number {
+  .sl-markdown-content a.keyed-equation__number,
+  .sl-markdown-content .keyed-equation__copy {
     opacity: 1;
   }
 }
@@ -942,27 +1191,46 @@
 }
 
 @media print {
-  .sl-markdown-content a.keyed-equation__number {
+  .sl-markdown-content .keyed-equation__controls {
     position: static;
     display: block;
     transform: none;
     text-align: end;
+  }
+  .sl-markdown-content a.keyed-equation__number {
     color: inherit;
     opacity: 1;
   }
+  /* A clipboard button means nothing on paper. */
+  .sl-markdown-content .keyed-equation__copy {
+    display: none;
+  }
   .sl-markdown-content .keyed-equation {
     padding-inline-end: 0;
   }
 }
 
-/* `<Table>`/`<Figure>` keyed floats (F-tables-figures) — the same deep-link
+/* The generic prose sibling-spacing rule must not insert a blank toolbar-like
+   row between a diagram title and its body. This comes after that generic rule
+   in the cascade: the expand control is overlaid on the title line, so the
+   canvas begins immediately below it. */
+.sl-markdown-content .diagram__summary {
+  margin-block-end: 0;
+}
+
+.sl-markdown-content .diagram__summary + .diagram__body {
+  margin-block-start: 0;
+}
+
+/* `<Table>`/`<Figure>`/`<Diagram>` keyed floats — the same deep-link
    and hover-highlight treatment as equations above, via `KeyedFloatEnhancer`
    and `FloatRefLayer.astro`. Unlike an equation's number (quiet until
    hovered, F4), a table/figure number lives in its always-visible caption,
    so there is no opacity dance to mirror here — only the `:target` flash
    (reusing the `eq-flash` keyframe above) and the ref-highlight. */
 .sl-markdown-content a.table-ref,
-.sl-markdown-content a.figure-ref {
+.sl-markdown-content a.figure-ref,
+.sl-markdown-content a.diagram-ref {
   font-variant-numeric: tabular-nums;
   font-weight: 600;
   text-decoration: underline;
@@ -976,19 +1244,23 @@
 .sl-markdown-content a.table-ref:hover,
 .sl-markdown-content a.table-ref:focus-visible,
 .sl-markdown-content a.figure-ref:hover,
-.sl-markdown-content a.figure-ref:focus-visible {
+.sl-markdown-content a.figure-ref:focus-visible,
+.sl-markdown-content a.diagram-ref:hover,
+.sl-markdown-content a.diagram-ref:focus-visible {
   background: var(--sl-color-accent-low);
 }
 
 .sl-markdown-content .keyed-table:target,
-.sl-markdown-content .keyed-figure:target {
+.sl-markdown-content .keyed-figure:target,
+.sl-markdown-content .diagram:target {
   animation: eq-flash 5s ease-out both;
   border-radius: 0.3rem;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .sl-markdown-content .keyed-table:target,
-  .sl-markdown-content .keyed-figure:target {
+  .sl-markdown-content .keyed-figure:target,
+  .sl-markdown-content .diagram:target {
     animation: none;
     background: var(--sl-color-accent-low);
     outline: 2px solid var(--sl-color-accent);
@@ -1001,7 +1273,8 @@
    highlight it in place instead of opening a preview card
    (`FloatRefLayer.astro` decides which) — mirrors `.eq-ref-highlight`. */
 .sl-markdown-content .keyed-table.tab-ref-highlight,
-.sl-markdown-content .keyed-figure.fig-ref-highlight {
+.sl-markdown-content .keyed-figure.fig-ref-highlight,
+.sl-markdown-content .diagram.dia-ref-highlight {
   background: var(--sl-color-accent-low);
   outline: 2px solid var(--sl-color-accent);
   outline-offset: 0.2rem;
@@ -1014,8 +1287,10 @@
 @media (forced-colors: active) {
   .sl-markdown-content .keyed-table:target,
   .sl-markdown-content .keyed-figure:target,
+  .sl-markdown-content .diagram:target,
   .sl-markdown-content .keyed-table.tab-ref-highlight,
-  .sl-markdown-content .keyed-figure.fig-ref-highlight {
+  .sl-markdown-content .keyed-figure.fig-ref-highlight,
+  .sl-markdown-content .diagram.dia-ref-highlight {
     animation: none;
     outline: 2px solid Highlight;
     outline-offset: 0.2rem;
@@ -1023,7 +1298,9 @@
   .sl-markdown-content a.table-ref:hover,
   .sl-markdown-content a.table-ref:focus-visible,
   .sl-markdown-content a.figure-ref:hover,
-  .sl-markdown-content a.figure-ref:focus-visible {
+  .sl-markdown-content a.figure-ref:focus-visible,
+  .sl-markdown-content a.diagram-ref:hover,
+  .sl-markdown-content a.diagram-ref:focus-visible {
     outline: 2px solid Highlight;
   }
 }
@@ -1080,3 +1357,672 @@
     outline-offset: 0.2rem;
   }
 }
+
+/* Collapsible sections (docs/plans/collapsible-disclosure.md Part 3),
+   wrapped at runtime by `CollapsibleSections.astro` around headings an
+   author opted in with `{collapsible}`. Starlight's own `markdown.css` gives
+   every `<details>` a rotating-chevron `<summary>` marker for free — kept
+   (repositioned below) — but also a left accent border +
+   `padding-inline-start: 1rem` meant for a short, occasional aside-style
+   disclosure. On a wrapped section that padding measurably narrows the
+   content column, which was enough on at least one lesson to push a
+   previously-fitting display equation into horizontal overflow and fail
+   axe's `scrollable-region-focusable` check — so it's stripped back to
+   nothing here, the same way `Figure.astro` already overrides that default
+   border rule for its own box. */
+.sl-markdown-content .sl-section-collapsible {
+  position: relative; /* anchors the peeking body's `position: absolute` */
+  border-inline-start: 0;
+  padding-inline-start: 0;
+}
+
+/* `anchor-links.css`'s `.sl-heading-wrapper > :first-child { display: inline;
+   padding-inline-end: var(--sl-anchor-icon-space); }` rule was written for
+   the heading element that used to sit there, reserving line-end room for
+   the anchor icon. Now that `<details class="sl-section-collapsible">` is
+   `.sl-heading-wrapper`'s first child instead, that same padding lands on
+   `<details>` itself — shrinking every section's *entire body* by that
+   amount, not just one line of heading text. That measured out to ~38px on
+   one lesson, just enough to push a table that fit exactly into horizontal
+   overflow and fail axe's `scrollable-region-focusable` check. Both
+   properties are overridden back off here (the anchor no longer needs
+   inline end-of-line room anyway — it's absolutely positioned now, see
+   below). */
+.sl-markdown-content .sl-heading-wrapper.sl-section-titlebar > .sl-section-collapsible {
+  display: block;
+  padding-inline-end: 0;
+  /* `.sl-heading-wrapper { font-size: var(--sl-text-hN); line-height:
+     var(--sl-line-height-headings) }` (`anchor-links.css`) was sized for a
+     wrapper holding only the heading line + its anchor icon. Now that the
+     section's whole body — a table, an equation, anything — lives inside
+     this `<details>` as a *descendant* of that same wrapper, it would
+     inherit both the heading's larger font-size AND its tighter
+     (headings-only) line-height, inflating/cramping every cell or line of
+     body text. The font-size half of this was caught first (it measurably
+     pushed a table into horizontal overflow); the line-height half is more
+     subtle — it doesn't change layout width, only row/line spacing — which
+     is how it went unnoticed until `TableOverflowExpander.astro`'s expand
+     view (which moves a table *out* of this wrapper) started rendering
+     visibly taller rows than the same table collapsed in place. Both are
+     reset back to normal body text metrics here — the heading itself keeps
+     its own size/spacing regardless, since `markdown.css`/`anchor-links.css`
+     set those directly on `h1`-`h6`/`.sl-heading-wrapper`, not inherited
+     from this rule. */
+  font-size: var(--sl-text-body);
+  line-height: var(--sl-line-height);
+}
+
+.sl-markdown-content .sl-heading-wrapper.sl-section-titlebar {
+  position: relative;
+}
+
+/* The anchor icon's reveal-on-hover must be scoped to *this* section's own
+   title line, not "anywhere inside this now much taller wrapper" — the
+   wrapper's rendered box spans the whole section (title + body), so a plain
+   `.sl-heading-wrapper:hover` (Starlight's own default rule, still in
+   effect from `anchor-links.css`) fires whenever the pointer is anywhere in
+   that box, including over a *nested* subsection's own title further down —
+   revealing this section's anchor while hovering a child's heading, and
+   vice versa. `:has(> .sl-section-collapsible > summary:hover)` only matches
+   when *this* wrapper's own direct-child `<details>`'s own direct-child
+   `<summary>` is hovered — a nested child section's `<summary>` is several
+   levels deeper (inside its own separate `.sl-section-collapsible`), so it
+   never satisfies this selector. Both rules are unlayered, so they win over
+   `anchor-links.css`'s `@layer starlight.content` version regardless of
+   specificity — this replaces that default behavior for sections rather
+   than adding to it. */
+.sl-markdown-content .sl-heading-wrapper.sl-section-titlebar > .sl-anchor-link {
+  position: absolute;
+  top: 0.2em;
+  inset-inline-end: 0;
+  margin-inline-start: 0;
+  opacity: 0;
+}
+
+.sl-markdown-content .sl-heading-wrapper.sl-section-titlebar:has(> .sl-section-collapsible > summary:hover)
+  > .sl-anchor-link,
+.sl-markdown-content .sl-heading-wrapper.sl-section-titlebar:has(> .sl-section-collapsible > summary:focus-visible)
+  > .sl-anchor-link,
+.sl-markdown-content .sl-heading-wrapper.sl-section-titlebar > .sl-anchor-link:hover,
+.sl-markdown-content .sl-heading-wrapper.sl-section-titlebar > .sl-anchor-link:focus-visible {
+  opacity: 1;
+}
+
+/* The chevron sits to the *left* of the title without shifting the title's
+   own position: `markdown.css`'s default marker is inline, right before the
+   text, pushed left slightly by a negative margin — meaning the title
+   itself sits further right than an ordinary (non-collapsible) heading.
+   Taking the marker fully out of flow with `position: absolute` and a
+   negative `left` puts it in the gutter instead, so `.sl-section-summary`'s
+   own text always starts at the same position a plain heading's would. */
+.sl-markdown-content .sl-section-summary {
+  position: relative;
+  /* Room for the absolutely-positioned anchor icon at the end of the line,
+     same reasoning as `.keyed-figure__summary` in `Figure.astro`. */
+  padding-inline-end: 1.5em;
+}
+
+.sl-markdown-content .sl-section-summary::before {
+  position: absolute;
+  left: -1.6em;
+  top: 50%;
+  margin: 0; /* cancel `markdown.css`'s inline-flow margin trick */
+  transform: translateY(-50%);
+  opacity: 0;
+  /* Fade in immediately on hover/focus, but linger for a beat after the
+     pointer leaves before fading back out — a quick flick past the title
+     shouldn't make the chevron flash in and out. This only ever applies to
+     an `open`/`peeking` section, though: a *closed* one overrides `opacity`
+     back to a flat `1` below, with no fade at all — its `>` is the only
+     visible signal that there's hidden content here, so it has to stay put
+     whether or not the reader is currently hovering. */
+  transition:
+    opacity 150ms ease 700ms,
+    transform 150ms ease;
+}
+
+.sl-markdown-content details.sl-section-collapsible[open] > .sl-section-summary::before {
+  transform: translateY(-50%) rotateZ(90deg);
+}
+
+.sl-markdown-content details.sl-section-collapsible[data-state='closed']
+  > .sl-section-summary::before {
+  opacity: 1;
+  transition: none;
+}
+
+.sl-markdown-content .sl-section-summary:hover::before,
+.sl-markdown-content .sl-section-summary:focus-visible::before {
+  opacity: 1;
+  transition: opacity 100ms ease;
+}
+
+/* The section body: normally native `<details>` hiding/showing is all that's
+   needed (nothing renders while closed), but `peeking` (a collapsed section
+   hovered/focused — see `CollapsibleSections.astro`) has to force the
+   `<details>` open to render its real content at all, then relies on this
+   CSS to cap it at 10em and lift it out of flow so it overlays whatever
+   comes next instead of shifting it — and `open` (a real, committed expand)
+   puts it back in normal flow so following content *is* pushed down. Both
+   the peek-to-real-expand growth and the plain open/close animate through
+   `max-height`, driven from `CollapsibleSections.astro`; this transition is
+   what makes those changes smooth instead of instant. */
+.sl-markdown-content .sl-section-body {
+  transition: max-height 220ms ease;
+}
+
+.sl-markdown-content .sl-section-collapsible[data-state='peeking'] > .sl-section-body {
+  --peek-inline-pad: 0.85rem;
+  --peek-border-width: 1px;
+  position: absolute;
+  top: 100%;
+  /* The card's border + padding must NOT narrow the content itself — a
+     table or equation that reflows narrower while peeking than it will once
+     genuinely expanded would visibly re-layout the instant a click promotes
+     the peek to a real expand. `box-sizing: border-box` plus bleeding `left`/
+     `right` outward by exactly (padding + border) keeps the *content box*
+     the same width as the non-collapsed, no-border/no-padding `open` state
+     below — only the decorative card extends past it. */
+  left: calc(-1 * (var(--peek-inline-pad) + var(--peek-border-width)));
+  right: calc(-1 * (var(--peek-inline-pad) + var(--peek-border-width)));
+  box-sizing: border-box;
+  z-index: 4;
+  margin-block-start: 0.35rem;
+  padding: 0.6rem var(--peek-inline-pad);
+  border: var(--peek-border-width) solid var(--sl-color-gray-5);
+  border-radius: 0.4rem;
+  background: var(--sl-color-bg);
+  box-shadow: 0 0.6rem 1.75rem rgba(0, 0, 0, 0.18);
+  max-height: 10em;
+  overflow: auto;
+}
+
+.sl-markdown-content .sl-section-collapsible[data-state='open'] > .sl-section-body {
+  position: static;
+  max-height: none;
+  overflow: visible;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sl-markdown-content .sl-section-summary::before,
+  .sl-markdown-content .sl-section-body {
+    transition: none;
+  }
+}
+
+@media print {
+  .sl-markdown-content .sl-section-summary::before {
+    display: none !important;
+  }
+
+  .sl-markdown-content .sl-heading-wrapper.sl-section-titlebar > .sl-anchor-link {
+    display: none;
+  }
+
+  /* Forcing every section open for print is NOT done here: the HTML spec
+     has the browser skip rendering a closed <details>'s non-summary
+     children outright — a rule no author CSS can override (`display`,
+     `content-visibility`, `!important` included). Only the `open`
+     *attribute* controls it, so `CollapsibleSections.astro` forces every
+     `.sl-section-collapsible` open (and `data-state="open"`) via a
+     `beforeprint`/`matchMedia('print')` listener instead, restoring on
+     `afterprint`. */
+}
+
+/* Table column narrowing + expand-on-overflow
+   (docs/plans/collapsible-disclosure.md Part 4), driven from
+   `TableOverflowExpander.astro` — see that file's module comment for the
+   full design rationale (why the scroll wrapper is necessary, why the
+   container node itself moves to `<body>` on expand, why its expanded width
+   is only as wide as the table needs, etc.). */
+
+/* Narrower than Starlight's own default (`markdown.css`'s `padding: 0.5rem
+   1rem` on every `th`/`td`, plus the ambient body font size) — with real
+   data in them, tables read as too spaced-out at that generosity, and a
+   long one takes noticeably longer to scan a row at a time. Unlayered, so
+   (like the rules below) it wins over `markdown.css`'s `@layer
+   starlight.content` regardless of selector specificity; scoped the same
+   way, so a `not-content`-wrapped table (e.g. inside a lab island) is left
+   at its own sizing. */
+.sl-markdown-content table:not(:where(.not-content *)) {
+  font-size: 90%;
+}
+
+.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+  padding: 0.3rem 0.75rem;
+}
+
+/* Every markdown table's data rows get subtle zebra striping and a hover
+   highlight — plain CSS, so it applies with or without
+   `TableOverflowExpander.astro`'s script, and to every table on the site,
+   not just ones wide enough to overflow. `color-mix` against `--sl-color-bg`
+   (not a fixed gray token) keeps the stripe theme-correct automatically —
+   the same technique `.lab-shell`'s background above uses, and for the same
+   reason: a token like the old `--sl-color-gray-7` is only defined for one
+   theme. The hover rule is unlayered and comes after the stripe rule, so it
+   wins over an even/odd row's own stripe regardless of specificity. */
+.sl-markdown-content table:not(:where(.not-content *)) tbody tr:nth-child(even) {
+  background: color-mix(in srgb, var(--sl-color-bg) 85%, var(--sl-color-gray-5) 15%);
+}
+
+.sl-markdown-content table:not(:where(.not-content *)) tbody tr:hover {
+  background: var(--sl-color-accent-low);
+}
+
+/* `.keyed-table__body`/`.table-overflow-body` are a flex row of
+   `[.table-overflow-scroll, .table-overflow-expand-btn]` — the scroll clip
+   flexes to fill the available width (`min-width: 0` lets it actually
+   shrink below the table's intrinsic width instead of forcing the row to
+   overflow), and the button, only present once the table overflows, is a
+   plain flex sibling — `align-items: stretch` (the flex default) is what
+   makes it exactly as tall as the table for free, no JS height math
+   needed. */
+.keyed-table__body,
+.table-overflow-body {
+  display: flex;
+}
+
+.table-overflow-scroll {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+/* A scrollable region must be reachable by keyboard (WCAG 2.1.1) — the
+   script gives it `tabindex="0"` only while it is actually scrollable, so it
+   needs a visible focus style for exactly that state. */
+.table-overflow-scroll:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: -2px;
+}
+
+/* Starlight's `markdown.css` gives *every* `<table>` under
+   `.sl-markdown-content` its own `display: block; overflow: auto` — a
+   second, independent scroll container. Left in place inside
+   `.table-overflow-scroll`, that inner rule would win first and clip/scroll
+   the table before this wrapper ever saw overflow, leaving
+   `scrollWidth > clientWidth` on it permanently false. This selector is
+   unlayered, so — like `.sl-section-collapsible` above — it wins over that
+   `@layer starlight.content` rule regardless of specificity. Scoped to
+   *inside* the wrapper only: a table with no JS (so no
+   `.table-overflow-scroll` around it yet) keeps Starlight's default
+   per-table scroll as an unmodified fallback. Column *sizing* needed no
+   fix: `table-layout` is `auto` either way, so columns were already sized
+   to content, not to a fixed/equal split. */
+.table-overflow-scroll table {
+  display: table;
+  overflow: visible;
+  /* Centered within the scroll clip when narrower than it (this wrapper
+     itself always fills the available row width via `flex: 1 1 auto`
+     above), same centering `Table.astro`'s own fallback rule gives a
+     keyed table before this wrapper exists — this is what covers a bare
+     markdown table's `.table-overflow-body`, which carries no such rule of
+     its own. Auto margins resolve to 0 once the table overflows, so this is
+     safe unconditionally. */
+  margin-block: 0;
+  margin-inline: auto;
+}
+
+.table-overflow-expand-btn {
+  /* Starlight's own vertical-rhythm rule (`.sl-markdown-content :not(a,
+     strong, …) + :not(a, strong, …) { margin-top: var(--sl-content-gap-y) }`
+     at the top of this file) adds a ~1rem top margin to any block sibling
+     following another — both this button and its expanded-state twin (see
+     `TableOverflowExpander.astro`) are exactly that. Left in place, that
+     margin eats into the flex row's stretch, leaving the button's rendered
+     box shorter than the table by that same margin instead of genuinely
+     spanning it top to bottom. */
+  margin: 0;
+  flex: none;
+  width: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  color: var(--sl-color-gray-2);
+  background: var(--sl-color-bg);
+  font-size: 0.85rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+/* A continuation of the table's own row-separator lines, not a
+   differently-styled floating overlay — same border color, same background
+   as the page/table. Collapsed, this row is `[scroll, button]` — the button
+   is always `:last-child`, divider on its leading (start) side. Expanded,
+   a second button is prepended (`[button, scroll, button]`, the "0th and
+   n+1th column" — see `TableOverflowExpander.astro`); each keeps the
+   divider on whichever side actually borders the table. */
+.table-overflow-expand-btn:last-child {
+  border-inline-start: 1px solid var(--sl-color-gray-5);
+}
+
+.table-overflow-expand-btn:first-child {
+  border-inline-end: 1px solid var(--sl-color-gray-5);
+}
+
+/* Same same-specificity/cascade-order gotcha `.hover-panel[hidden]` guards
+   against in `HoverPanel.astro`: without this, `display: flex` above would
+   win over the UA stylesheet's `[hidden] { display: none }` and defeat the
+   `hidden` attribute the script relies on to hide a non-overflowing table's
+   button. */
+.table-overflow-expand-btn[hidden] {
+  display: none;
+}
+
+.table-overflow-expand-btn:hover {
+  color: var(--sl-color-text);
+  background: var(--sl-color-accent-low);
+}
+
+.table-overflow-expand-btn:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: -2px;
+}
+
+.table-overflow-expanded {
+  position: fixed;
+  /* Above the side rails, but below Starlight's sticky site header. */
+  z-index: calc(var(--sl-z-index-navbar) - 1);
+  /* `target` (see `TableOverflowExpander.astro`) is sometimes the whole
+     `<figure class="keyed-table">`, whose own Astro-scoped style sets
+     `margin-block: 1.5rem` — a scoped selector compiles to an attribute
+     selector (`.keyed-table[data-astro-cid-…]`), which outranks this plain
+     class on specificity alone despite this file's usual unlayered-always-
+     wins convention (that convention only beats *layered* Starlight CSS,
+     not other equally-unlayered author CSS). A `position: fixed` element's
+     `top`/`left` position its margin box, so left in place that margin
+     would silently offset the whole computed position — `!important` is the
+     honest fix, since `target` isn't always `.keyed-table` (a bare table's
+     `.table-overflow-body` carries no such rule to out-rank in the first
+     place, so this is never fighting anything except that one case). */
+  margin: 0 !important;
+  /* No border/border-radius "card" — an expanded table should still read as
+     the same table, just wider. A background is still necessary (it now
+     sits, `position: fixed`, over whatever content is behind it) and a
+     shadow gives just enough depth to read as raised above the page. Tall
+     content (table + caption together, since the whole figure moves — see
+     `TableOverflowExpander.astro`) scrolls inside `max-height` rather than
+     breaking out of the box. */
+  overflow-y: auto;
+  background: var(--sl-color-bg);
+  box-shadow: var(--sl-shadow-lg);
+}
+
+@media print {
+  .table-overflow-expand-btn {
+    display: none !important;
+  }
+}
+
+/* Browser-native lesson printing. The print controller opens real native
+   disclosures before the browser lays out pages; these rules own only the
+   paper presentation and therefore also remain a useful no-JS fallback. */
+@media print {
+  :root[data-theme],
+  :root {
+    color-scheme: light;
+    --sl-color-bg: #fff;
+    --sl-color-bg-nav: #fff;
+    --sl-color-bg-sidebar: #fff;
+    --sl-color-text: #111;
+    --sl-color-white: #111;
+    --sl-color-gray-1: #111;
+    --sl-color-gray-2: #333;
+    --sl-color-gray-3: #555;
+    --sl-color-gray-4: #777;
+    --sl-color-gray-5: #aaa;
+    --sl-color-gray-6: #ddd;
+    --sl-color-gray-7: #fff;
+    --sl-color-accent: #08775b;
+    --sl-color-accent-low: #fff;
+    --sl-color-accent-high: #111;
+    --sl-color-text-accent: #08775b;
+  }
+
+  html,
+  body {
+    overflow: visible !important;
+    color: #111 !important;
+    background: #fff !important;
+  }
+
+  header.header,
+  .sidebar,
+  .right-sidebar-container,
+  .pagination-links,
+  .layout-edge-toggle,
+  [data-explico-export-chrome],
+  [data-popup-root],
+  [data-citation-panel],
+  [data-float-ref-panel],
+  .hover-panel,
+  .notation-popup,
+  .table-overflow-placeholder,
+  .diagram-expand-placeholder,
+  .table-overflow-expand-btn,
+  .keyed-table__pagination-links,
+  .keyed-table__more-row,
+  .diagram-toolbar,
+  .sl-anchor-link,
+  .keyed-figure__title-anchor,
+  .diagram__title-anchor,
+  .memo-block__title-anchor,
+  .short-note__collapse,
+  .assessment-actions,
+  .assessment-chevron,
+  .assessment-feedback.is-idle,
+  .notation-list-anchor,
+  .notation-enhancement-help,
+  .lab-controls {
+    display: none !important;
+  }
+
+  .main-frame,
+  .main-pane,
+  .content-panel,
+  main[data-pagefind-body],
+  main[data-pagefind-body] > .sl-container,
+  .sl-markdown-content {
+    position: static !important;
+    display: block !important;
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    height: auto !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    margin: 0 !important;
+    padding-inline: 0 !important;
+    overflow: visible !important;
+    transform: none !important;
+  }
+
+  main[data-pagefind-body] {
+    padding-block: 0 !important;
+  }
+
+  .sl-markdown-content *,
+  .sl-markdown-content *::before,
+  .sl-markdown-content *::after {
+    animation: none !important;
+    transition: none !important;
+  }
+
+  .sl-markdown-content :is(h1, h2, h3, h4, h5, h6),
+  .keyed-figure__summary,
+  .diagram__summary,
+  .memo-block__summary,
+  .assessment-item-heading {
+    break-after: avoid-page;
+    page-break-after: avoid;
+  }
+
+  .sl-markdown-content p,
+  .sl-markdown-content li {
+    orphans: 3;
+    widows: 3;
+  }
+
+  .keyed-equation,
+  .keyed-table,
+  .keyed-figure,
+  .diagram,
+  .memo-block-frame,
+  .compact-example,
+  .assessment-item,
+  .lab-result,
+  .lab-chart-figure,
+  .sl-markdown-content pre,
+  .sl-markdown-content blockquote {
+    break-inside: avoid-page;
+    page-break-inside: avoid;
+  }
+
+  .keyed-table tr,
+  .lab-data-table tr {
+    break-inside: avoid-page;
+    page-break-inside: avoid;
+  }
+
+  .keyed-table thead,
+  .lab-data-table thead {
+    display: table-header-group;
+  }
+
+  .keyed-table tfoot,
+  .lab-data-table tfoot {
+    display: table-footer-group;
+  }
+
+  .keyed-table__body,
+  .table-overflow-body,
+  .table-overflow-scroll,
+  .lab-table-scroll {
+    position: static !important;
+    display: block !important;
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    max-height: none !important;
+    overflow: visible !important;
+    box-shadow: none !important;
+  }
+
+  .sl-markdown-content table,
+  .table-overflow-scroll table,
+  .lab-table-scroll table,
+  .lab-data-table {
+    display: table !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    margin-inline: 0 !important;
+    overflow: visible !important;
+    font-size: 8.5pt;
+    table-layout: auto;
+  }
+
+  .sl-markdown-content :is(th, td) {
+    padding: 0.18rem 0.35rem;
+    overflow-wrap: anywhere;
+  }
+
+  .keyed-table__body tr[hidden] {
+    display: table-row !important;
+  }
+
+  .assessment-panel[hidden],
+  .short-note[hidden],
+  .compact-example[hidden] {
+    display: block !important;
+  }
+
+  .diagram,
+  .diagram__titlebar,
+  .diagram__details,
+  .diagram__body,
+  .diagram-stage,
+  .diagram-scroll {
+    position: static !important;
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    height: auto !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    overflow: visible !important;
+    contain: none !important;
+    box-shadow: none !important;
+    transform: none !important;
+  }
+
+  .diagram-canvas {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+    aspect-ratio: var(--diagram-print-ratio);
+  }
+
+  .diagram-canvas > svg {
+    display: block;
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 100% !important;
+  }
+
+  .lab-chart,
+  .lab-math,
+  .katex-display {
+    min-height: 0 !important;
+    max-width: 100% !important;
+    overflow: visible !important;
+  }
+
+  .lab-chart svg,
+  .keyed-figure img,
+  .sl-markdown-content img,
+  .sl-markdown-content svg {
+    max-width: 100% !important;
+    height: auto;
+  }
+
+  .assessment-panel {
+    padding-block-start: 0.25rem;
+  }
+
+  .assessment-disclosure {
+    padding-block: 0.4rem;
+    color: #111;
+    cursor: default;
+  }
+
+  .assessment-status {
+    color: #333 !important;
+  }
+
+  :is(
+      .lab-shell,
+      .lab-result,
+      .assessment-shell,
+      .assessment-item,
+      .memo-block-frame,
+      .keyed-figure__details,
+      .compact-examples,
+      .diagram__details
+    ) {
+    color: #111 !important;
+    border-color: #777 !important;
+    background: #fff !important;
+    box-shadow: none !important;
+  }
+
+  .sl-markdown-content a[href] {
+    color: #08775b !important;
+    text-decoration: underline;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+}