explico 0.7.0 → 0.11.0

package/src/styles/global.css

@@ -1,4 +1,5 @@
 @import 'katex/dist/katex.min.css';
+@import './surfaces.css';
 
 :root {
   --sl-color-accent-low: #132f2a;
@@ -13,6 +14,57 @@
   --sl-color-accent-high: #123c32;
 }
 
+/* Heading sizes, one even step (about 1.25) apart. Starlight's defaults are
+   sized for a wide docs column: from 50em up an h2 is 35px, which fits some
+   25 characters of a lesson column. Everything that sizes itself from a
+   heading reads these tokens — the section chevron's centring, a folded bar,
+   the `1.5em` above a section — so it all follows. Both breakpoints are set
+   here: Starlight's own values are layered, so this unlayered block would
+   otherwise beat its wide-screen step too. */
+:root {
+  --sl-text-h1: 1.875rem;
+  --sl-text-h2: 1.5rem;
+  --sl-text-h3: 1.25rem;
+  --sl-text-h4: 1.0625rem;
+  --sl-text-h5: 1rem;
+}
+
+@media (min-width: 50em) {
+  :root {
+    --sl-text-h1: 2.25rem;
+    --sl-text-h2: 1.75rem;
+    --sl-text-h3: 1.375rem;
+    --sl-text-h4: 1.125rem;
+    --sl-text-h5: 1rem;
+  }
+}
+
+/* Previous / Next under a lesson: side by side down to a 26rem column.
+   Starlight stacks them below 2 × 18rem, and a lesson column between both
+   sidebars is already narrower than that, so every page ended in two
+   full-width cards. Their titles are one step smaller. Starlight's footer
+   also keeps a 3rem top margin for its "last updated" and edit links; a
+   course that shows neither keeps only the footer's own gap. Starlight's
+   rules are layered, so these unlayered ones win. */
+.pagination-links {
+  grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
+}
+
+.pagination-links .link-title {
+  font-size: var(--sl-text-lg);
+}
+
+footer .meta:not(:has(*)) {
+  margin-top: 0;
+}
+
+/* The first block under the title keeps only the content panel's own
+   padding; a card's or a section's top margin on top of it doubled the gap
+   under the title rule. */
+.sl-markdown-content > :first-child {
+  margin-block-start: 0;
+}
+
 /* 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.
@@ -25,31 +77,32 @@ body {
 
 .lab-shell {
   margin-block: 1.5rem;
-  padding: clamp(1rem, 3vw, 1.5rem);
-  border: 1px solid var(--sl-color-gray-5);
-  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. */
+}
+
+/* A lab is figure material, and a figure is the plain tier (`surfaces.css`):
+   no card of its own, only spacing. Inside a `<Figure>` the figure's own
+   margin already spaces it. A lab that should read as set apart goes in a
+   `### … [card]` section instead (docs/plans/titles-and-containers.md,
+   settled decision 7). */
 .keyed-figure__body .lab-shell {
   margin-block: 0;
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
+}
+
+/* A lab's tools, in the tray after its figure's caption line
+   (`Figure.astro`'s `tools` slot): the tray pads them, so they bring no
+   margin of their own. Their first line says what to do. */
+.keyed-figure__tools .lab-shell {
+  margin-block: 0;
+}
+
+.lab-tools > :last-child {
+  margin-block-end: 0;
+}
+
+.lab-instruction {
+  margin-block: 0 0.75rem;
+  font-size: var(--sl-text-sm);
+  color: var(--sl-color-gray-2);
 }
 
 .lab-shell label,
@@ -113,21 +166,25 @@ body {
 
 /* Long lesson equations must scroll inside the content column instead of
    widening the entire page. This also contains KaTeX's visually hidden MathML
-   tree, whose intrinsic width can otherwise affect narrow viewports. */
+   tree, whose intrinsic width can otherwise affect narrow viewports.
+   `overflow-y: hidden` clips at the padding edge, and with no padding that
+   edge is KaTeX's metric strut — but glyph ink overshoots its metrics (a
+   denominator's `g` descender, a stretched `\right]`), so the bottom of the
+   equation was cut off. The padding is the room that ink needs; em-based so
+   it scales with the math. */
 .sl-markdown-content .katex-display {
   max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
+  padding-block: 0.25em;
 }
 
-.lab-chart-figure {
-  margin: 1.25rem 0;
-}
-
-.lab-chart-figure figcaption {
-  margin-top: 0.5rem;
-  font-size: 0.85rem;
-  color: var(--sl-color-gray-2);
+/* Focusable only while it overflows (`KeyedFloatEnhancer.astro`), so it can
+   be scrolled from the keyboard. */
+.sl-markdown-content .katex-display:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 2px;
+  border-radius: 0.2rem;
 }
 
 .lab-controls {
@@ -236,12 +293,11 @@ body {
   margin: 0;
 }
 
+/* A knowledge check is one accent card around its heading and this shell
+   together (`AssessmentSet.astro` marks the heading `data-card="accent"`,
+   `CollapsibleSections.astro` draws the card), so the shell itself is plain. */
 .assessment-shell {
-  margin-block: 0.75rem 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);
+  margin-block: 0.75rem 0;
 }
 
 .assessment-shell :focus-visible {
@@ -249,23 +305,22 @@ body {
   outline-offset: 2px;
 }
 
-.assessment-heading-number {
-  color: var(--sl-color-text-accent);
-  white-space: nowrap;
-}
-
 .assessment-shell > h3 {
   margin-block: 0 0.75rem;
 }
 
 .assessment-progress {
-  margin: 0 0 0.75rem;
+  margin: 0.75rem 0 0;
   font-size: 0.85rem;
   font-variant-numeric: tabular-nums;
   text-align: end;
   color: var(--sl-color-gray-2);
 }
 
+.assessment-progress:empty {
+  margin: 0;
+}
+
 .assessment-list {
   list-style: none;
   margin: 0;
@@ -275,8 +330,8 @@ body {
 }
 
 .assessment-item {
-  border: 1px solid var(--sl-color-gray-5);
-  border-radius: 0.5rem;
+  border: var(--ex-edge-border);
+  border-radius: var(--ex-radius-accent);
   background: var(--sl-color-bg);
 }
 
@@ -413,12 +468,12 @@ body {
 
 .assessment-feedback.is-correct {
   border-left-color: var(--sl-color-accent);
-  background: var(--sl-color-gray-7);
+  background: var(--ex-surface-tint-neutral);
 }
 
 .assessment-feedback.is-incorrect {
   border-left-color: var(--sl-color-gray-3);
-  background: var(--sl-color-gray-7);
+  background: var(--ex-surface-tint-neutral);
 }
 
 /* Reader-controlled desktop layout. Collapsed panels remain as narrow edge
@@ -433,33 +488,247 @@ body {
   display: none !important;
 }
 
+/* The drag handle that sets a panel's width. It does nothing without the
+   script that wires it, so it ships hidden and that script reveals it. */
+.layout-edge-resizer {
+  display: none;
+}
+
+.layout-edge-resizer[hidden] {
+  display: none !important;
+}
+
+/* A part's own page is reachable two ways, because the two answer different
+   questions. The `Overview` row is part of the chapter list and is there in
+   the HTML, so it is keyboard-reachable, crawlable, and obvious to a reader
+   who has never used this sidebar before; the control in the part's header is
+   the shortcut for one who has. Both point at `/<part>/`. */
+.sidebar-content a.explico-part-overview,
+.layout-navigation-content a.explico-part-overview {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+/* Two stacked sheets: the part, rather than one of its chapters. Drawn from a
+   border and a shadow so it inherits the link's colour in every state and
+   needs no icon font. The sliver between the sheets is the row's background,
+   so it has to follow the row when that background changes. */
+a.explico-part-overview {
+  --explico-overview-gap: var(--sl-color-bg-sidebar);
+}
+
+a.explico-part-overview[aria-current='page'] {
+  --explico-overview-gap: var(--sl-color-text-accent);
+}
+
+a.explico-part-overview::before {
+  content: '';
+  flex: none;
+  width: 0.55rem;
+  height: 0.68rem;
+  border: 1.5px solid currentColor;
+  border-radius: 0.12rem;
+  box-shadow:
+    0.16rem 0.16rem 0 -0.1rem var(--explico-overview-gap),
+    0.16rem 0.16rem 0 0 currentColor;
+}
+
+/* The caret leads its part, the way a disclosure triangle leads the thing it
+   opens: `>` collapsed, `v` open, in the reading direction before the name it
+   applies to. Starlight parks it at the far end of the row instead, where it
+   reads as a separate control that happens to share the line. */
+.layout-navigation-content summary {
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+
+.layout-navigation-content summary > .caret {
+  order: -1;
+}
+
+.layout-navigation-content summary > .group-label {
+  flex: 1;
+  min-width: 0;
+}
+
+/* The part header's own control. The caret having moved to the front, this
+   takes the row's end; the label's click still collapses, exactly as before.
+
+   It is a sibling of `<summary>`, not a child — a link inside a summary is a
+   nested interactive control — so it is lifted into the header row from
+   outside it, and the label reserves the width it needs. */
+details.layout-part-has-open {
+  position: relative;
+}
+
+details.layout-part-has-open > summary > .group-label {
+  padding-inline-end: 1.4rem;
+}
+
+.layout-part-open {
+  position: absolute;
+  inset-block-start: 0.3rem;
+  inset-inline-end: 0.3rem;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 0.25rem;
+  color: var(--sl-color-gray-3);
+  font-size: var(--sl-text-sm);
+  line-height: 1;
+  text-decoration: none;
+}
+
+.layout-part-open:hover,
+.layout-part-open:focus-visible {
+  color: var(--sl-color-text-accent);
+  background: var(--sl-color-accent-low);
+}
+
+@media print {
+  .layout-part-open {
+    display: none;
+  }
+}
+
+/* Both rails answer a pointer. Starlight changes only the text colour on
+   hover, which on a list of 20 chapters is easy to lose track of; a filled row
+   says which line the pointer is actually on. */
+.layout-navigation-content a:not(.layout-part-open):hover,
+.layout-navigation-content a:not(.layout-part-open):focus-visible,
+.layout-page-sidebar-content a:hover,
+.layout-page-sidebar-content a:focus-visible {
+  color: var(--sl-color-white);
+  background: var(--sl-color-gray-6);
+}
+
+/* The part header answers a pointer like the rows under it — it is a control,
+   and it was the one row in the panel that looked inert. */
+.layout-navigation-content summary {
+  border-radius: 0.25rem;
+}
+
+/* …and it says, quietly and all the time, which part the open page belongs
+   to. Three weights, so the states never read as the same thing: the current
+   chapter is a solid accent row, the part holding it is tinted, a hovered row
+   is a neutral fill that goes away again. `:has()` keeps this in CSS, which
+   means it is right in the first painted frame. */
+.layout-navigation-content details:has(a[aria-current='page']) > summary {
+  background: var(--sl-color-accent-low);
+}
+
+.layout-navigation-content summary:hover,
+.layout-navigation-content summary:focus-visible {
+  background: var(--sl-color-gray-6);
+}
+
+.layout-page-sidebar-content a:hover,
+.layout-page-sidebar-content a:focus-visible {
+  color: var(--sl-color-text-accent);
+}
+
+/* How far the reader has come, drawn as the rail itself: the segment beside
+   every chapter already read is accent, the rest is the hairline it always
+   was, so the boundary between them is the reader's position in the course.
+   `data-covered` is set by the panel's own script; without it the rail is
+   simply the hairline throughout. */
+.layout-navigation-content ul ul li {
+  border-inline-start-color: var(--sl-color-hairline-light);
+  transition: border-color 120ms ease;
+}
+
+.layout-navigation-content ul ul li[data-covered] {
+  border-inline-start-color: var(--sl-color-text-accent);
+}
+
+/* The contents rail has no such line of its own; covered headings give it
+   one, so a long page shows how much of itself is behind the reader. */
+.layout-page-sidebar-content nav ul li {
+  border-inline-start: 2px solid transparent;
+  padding-inline-start: 0.35rem;
+}
+
+.layout-page-sidebar-content nav ul li[data-covered] {
+  border-inline-start-color: var(--sl-color-text-accent);
+}
+
+.layout-page-sidebar-content nav ul li[data-current] {
+  border-inline-start-color: var(--sl-color-text-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .layout-navigation-content ul ul li {
+    transition: none;
+  }
+}
+
 @media (min-width: 50rem) {
   :root {
     --layout-edge-rail-width: 2.5rem;
-    --layout-edge-toggle-size: 2rem;
+    /* The collapse control is a rectangle docked into the corner the header
+       and the panel's separator line make, not a round button floating near
+       it. One gap sets both of those edges; the radius rounds only the
+       corner that is free of them. */
+    --layout-edge-toggle-width: 1.875rem;
+    --layout-edge-toggle-height: 1.125rem;
+    --layout-edge-toggle-gap: 2px;
+    --layout-edge-toggle-radius: 0.4375rem;
+    /* What a panel keeps clear at its top so the control never lands on the
+       first chapter's own expand caret, which sits at the same edge. */
+    --layout-edge-toggle-reserve: calc(
+      var(--layout-edge-toggle-height) + var(--layout-edge-toggle-gap) * 2
+    );
+    /* The navigation panel's width as it currently stands: the reader's own
+       if they resized it, the edge rail's while it is collapsed. The control
+       and the drag handle both dock against whichever is in force, so
+       neither needs a second rule for the collapsed state. */
+    --layout-navigation-width: var(--sl-sidebar-width);
+    /* How long the pointer rests on a collapsed rail before it peeks open.
+       Long enough that crossing the rail on the way somewhere else never
+       opens anything, short enough that meaning to look never feels like
+       waiting. `LayoutHeader.astro` reads this and arms the peek; the CSS
+       below stays keyed off `:hover`, with the armed attribute as its
+       gate. */
+    --layout-peek-delay: 40ms;
   }
 
   .layout-edge-toggle:not([hidden]) {
     display: grid;
     place-items: center;
-    width: var(--layout-edge-toggle-size);
-    height: var(--layout-edge-toggle-size);
+    width: var(--layout-edge-toggle-width);
+    height: var(--layout-edge-toggle-height);
     border: 1px solid var(--sl-color-gray-5);
-    border-radius: 999px;
     padding: 0;
     color: var(--sl-color-text-accent);
     background: var(--sl-color-bg-nav);
     box-shadow: var(--sl-shadow-sm);
-    font: inherit;
+    font-family: var(--sl-font-system-mono);
+    font-size: 0.68rem;
+    font-weight: 600;
     line-height: 1;
+    letter-spacing: -0.09em;
     cursor: pointer;
   }
 
-  .layout-edge-toggle .layout-edge-icon {
+  .layout-edge-glyph {
     display: block;
-    flex: none;
-    width: 1rem;
-    height: 1rem;
+    /* A box the width of the resting control, minus its border. Centred here
+       rather than by the button's own `place-items`, so that when the control
+       grows during a peek (below) the glyph's box can be pinned to the end
+       the pointer is on and the glyph itself does not move at all. */
+    width: calc(var(--layout-edge-toggle-width) - 2px);
+    /* The tracking above also trims the run's trailing side bearing; put that
+       much back so the three glyphs sit centred in that box. */
+    padding-inline-start: 0.09em;
+    text-align: center;
+  }
+
+  /* The glyphs point the way the panel travels, which mirrors with the page. */
+  [dir='rtl'] .layout-edge-glyph {
+    transform: scaleX(-1);
   }
 
   .layout-edge-toggle:hover {
@@ -472,17 +741,23 @@ body {
     outline-offset: 2px;
   }
 
-  .layout-edge-toggle .layout-edge-icon-restore,
-  .layout-edge-toggle[aria-expanded='false'] .layout-edge-icon-hide {
+  .layout-edge-toggle .layout-edge-glyph-restore,
+  .layout-edge-toggle[aria-expanded='false'] .layout-edge-glyph-hide {
     display: none;
   }
 
-  .layout-edge-toggle[aria-expanded='false'] .layout-edge-icon-restore {
+  .layout-edge-toggle[aria-expanded='false'] .layout-edge-glyph-restore {
     display: block;
   }
 
   .layout-navigation-panel {
     min-height: auto;
+    /* Starlight's own `.sidebar-content` already pads 1rem above this panel,
+       so reserve only the rest of what the docked control covers. */
+    padding-block-start: max(
+      0px,
+      calc(var(--layout-edge-toggle-reserve) - 1rem)
+    );
   }
 
   /* A compact chapter remains useful as a row of lesson icons. The
@@ -602,6 +877,29 @@ body {
     transform: translateY(-50%) translateX(0);
   }
 
+  /* The panel that holds this tooltip is a scroll container
+     (`.sidebar-pane` is `overflow-y: auto`, which forces `overflow-x` to
+     match), so an absolutely positioned child cannot leave it: a lesson
+     title longer than the panel is wide simply ended at the panel's edge.
+     While one is showing, `LayoutSidebar.astro` marks its link and writes the
+     anchor's own viewport coordinates here — `position: fixed` takes the
+     tooltip out of that scroll container entirely, and the explicit physical
+     insets replace the `inset-inline-start: calc(100% + …)` above, which
+     means something different once the containing block is the viewport. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li
+    > a[data-tooltip-open]
+    > span {
+    position: fixed;
+    z-index: calc(var(--sl-z-index-menu) + 2);
+    inset-inline: auto;
+    top: var(--layout-tooltip-y, 50%);
+    left: var(--layout-tooltip-x, 0px);
+    max-width: min(22rem, 45vw);
+  }
+
   .layout-compact-sidebar details[data-compact] > summary .caret {
     transform: rotateZ(0);
   }
@@ -614,17 +912,164 @@ body {
     transform: rotateZ(180deg);
   }
 
+  /* Compact mode turns every chapter into the same outlined page, so the
+     overview row would be indistinguishable from chapter one. Fill its sheets
+     and give it the accent: the part itself, not a page in it. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li
+    > a.explico-part-overview {
+    color: var(--sl-color-text-accent);
+    border-color: var(--sl-color-text-accent);
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li
+    > a.explico-part-overview::before {
+    background: currentColor;
+  }
+
+  /* On the part's own page the tile is already accent-filled, so filled
+     accent sheets on top of it are one green shape. Invert the glyph and
+     hollow it out: an outline reads at 28px where a fill does not, and it is
+     the same reversal Starlight gives a current chapter's text. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li
+    > a.explico-part-overview[aria-current='page'] {
+    color: var(--sl-color-text-invert);
+    border-color: var(--sl-color-text-accent);
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li
+    > a.explico-part-overview[aria-current='page']::before {
+    background: transparent;
+  }
+
+  /* Compact mode has no rail to colour, so a covered chapter's tile carries
+     the progress instead of the line beside it. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-covered]
+    > a:not([aria-current='page']) {
+    border-color: var(--sl-color-accent-low);
+    background: var(--sl-color-accent-low);
+  }
+
   .layout-navigation-toggle {
     position: fixed;
     z-index: calc(var(--sl-z-index-menu) + 1);
-    inset-block-start: calc(var(--sl-nav-height) + 0.75rem);
+    /* Both panels' controls take this same block start, so the pair reads as
+       one row under the header instead of two separately placed buttons. */
+    inset-block-start: calc(
+      var(--sl-nav-height) + var(--layout-edge-toggle-gap)
+    );
+    /* The 1px is the panel's own separator border: the gap is measured from
+       the line the reader sees, not from the border box behind it. */
     inset-inline-start: calc(
-      var(--sl-sidebar-width) - var(--layout-edge-toggle-size) - 0.35rem
+      var(--layout-navigation-width) - var(--layout-edge-toggle-width) -
+        var(--layout-edge-toggle-gap) - 1px
     );
+    border-radius: 0 0 0 var(--layout-edge-toggle-radius);
+  }
+
+  [dir='rtl'] .layout-navigation-toggle {
+    border-radius: 0 0 var(--layout-edge-toggle-radius) 0;
+  }
+
+  /* The handle that sets the panel's width straddles that same separator. */
+  /* The handle covers the separator line and reaches outward from it, into
+     the article. It deliberately does not reach inward: the navigation panel
+     scrolls, and its scrollbar sits exactly there — a handle straddling the
+     line evenly would take the outer few pixels of that scrollbar with it. */
+  .layout-navigation-resizer {
+    position: fixed;
+    z-index: calc(var(--sl-z-index-menu) + 1);
+    inset-block: var(--sl-nav-height) 0;
+    inset-inline-start: calc(var(--layout-navigation-width) - 1px);
+  }
+
+  .layout-edge-resizer:not([hidden]) {
+    display: block;
+    width: 0.375rem;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  .layout-edge-resizer::after {
+    content: '';
+    display: block;
+    position: absolute;
+    inset-block: 0;
+    width: 1px;
+    background: transparent;
+    transition: background 120ms ease;
+  }
+
+  /* Land the lit line on the separator itself, at whichever end of the
+     handle that panel's separator falls. */
+  .layout-navigation-resizer::after {
+    inset-inline-start: 0;
+  }
+
+  .layout-contents-resizer::after {
+    inset-inline-end: 0;
+  }
+
+  .layout-edge-resizer:is(:hover, [data-resizing])::after {
+    background: var(--sl-color-accent);
+  }
+
+  .layout-edge-resizer:focus-visible {
+    outline: 3px solid var(--sl-color-accent-high);
+    outline-offset: -3px;
+  }
+
+  /* A collapsed panel has no width for the reader to set; its control does
+     that job instead. */
+  html[data-navigation-hidden] .layout-navigation-resizer,
+  html[data-page-sidebar-hidden] .layout-contents-resizer {
+    display: none;
+  }
+
+  /* A panel the reader narrowed past its own labels scrolls sideways rather
+     than wrapping every chapter title into a column of single words. */
+  html[data-navigation-resized] .layout-navigation-content :is(a, summary) {
+    white-space: nowrap;
+  }
+
+  html[data-navigation-resized] .sidebar-pane {
+    overflow-x: auto;
+  }
+
+  /* A compact chapter's tooltip is a child of one of those links, and it is
+     the one label that must still wrap — it is sized by its own max-width,
+     not by the panel, so inheriting `nowrap` would run its text straight out
+     of its own background. */
+  html[data-navigation-resized]
+    .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li
+    > a
+    > span {
+    white-space: normal;
   }
 
   html[data-navigation-hidden] {
     --sl-content-inline-start: var(--layout-edge-rail-width);
+    --layout-navigation-width: var(--layout-edge-rail-width);
   }
 
   html[data-navigation-hidden] .sidebar-pane {
@@ -633,12 +1078,6 @@ body {
     transition: width 140ms ease;
   }
 
-  html[data-navigation-hidden] .layout-navigation-toggle {
-    inset-inline-start: calc(
-      (var(--layout-edge-rail-width) - var(--layout-edge-toggle-size)) / 2
-    );
-  }
-
   html[data-navigation-hidden] .layout-navigation-content {
     visibility: hidden;
     opacity: 0;
@@ -646,7 +1085,9 @@ body {
     transition: opacity 100ms ease;
   }
 
-  html[data-navigation-hidden]:not([data-navigation-peek-suppressed])
+  html[data-navigation-hidden][data-navigation-peek-armed]:not(
+    [data-navigation-peek-suppressed]
+  )
     .sidebar-pane:hover {
     width: var(--sl-sidebar-width);
     overflow-y: auto;
@@ -654,13 +1095,37 @@ body {
     box-shadow: var(--sl-shadow-lg);
   }
 
-  html[data-navigation-hidden]:not([data-navigation-peek-suppressed])
+  html[data-navigation-hidden][data-navigation-peek-armed]:not(
+    [data-navigation-peek-suppressed]
+  )
     .sidebar-pane:hover
     .layout-navigation-content {
     visibility: visible;
     opacity: 1;
     pointer-events: auto;
   }
+
+  /* While the panel peeks open over the article, the control reaches across
+     to the separator the open panel would put there — it does not travel to
+     it. A reader aiming at the control is hovering the rail, which is what
+     triggers the peek in the first place; moving the control at that moment
+     takes it out from under the pointer that was coming for it, and the
+     reader has to chase it across the panel. Growing instead keeps its outer
+     edge, and the glyph inside it, exactly where the pointer found them,
+     while its inner end still shows where the control will settle. The width
+     is a length, like the panel's own, so the two animate in step. */
+  html[data-navigation-hidden][data-navigation-peek-armed]:not(
+    [data-navigation-peek-suppressed]
+  )
+    .sidebar-pane:hover
+    .layout-navigation-toggle {
+    place-items: center start;
+    width: calc(
+      var(--sl-sidebar-width) - var(--layout-edge-rail-width) +
+        var(--layout-edge-toggle-width)
+    );
+    transition: width 140ms ease;
+  }
 }
 
 @media (min-width: 72rem) {
@@ -746,14 +1211,53 @@ body {
   .layout-page-sidebar {
     position: relative;
     min-height: 100%;
-    padding-block-start: 2.75rem;
+    padding-block-start: var(--layout-edge-toggle-reserve);
   }
 
+  /* `.right-sidebar` is `position: fixed` with `padding-top:
+     var(--sl-nav-height)`, so this panel's own top edge is already the
+     underside of the header: the same gap here puts this control at exactly
+     the block start the navigation's fixed control computes. */
   .layout-contents-toggle {
     position: absolute;
     z-index: 1;
-    inset-block-start: 0.5rem;
-    inset-inline-start: 0.35rem;
+    inset-block-start: var(--layout-edge-toggle-gap);
+    inset-inline-start: var(--layout-edge-toggle-gap);
+    border-radius: 0 0 var(--layout-edge-toggle-radius) 0;
+  }
+
+  [dir='rtl'] .layout-contents-toggle {
+    border-radius: 0 0 0 var(--layout-edge-toggle-radius);
+  }
+
+  .layout-contents-resizer {
+    position: fixed;
+    z-index: calc(var(--sl-z-index-toc) + 1);
+    inset-block: var(--sl-nav-height) 0;
+    inset-inline-end: calc(
+      var(--layout-contents-width, var(--toc-actual-width, 0px)) - 1px
+    );
+  }
+
+  /* A width the reader set replaces the shrink-to-fit rail above. The
+     `:not()` keeps this out of the collapsed state's way, which owns the
+     same declaration at the same specificity. */
+  html[data-contents-resized]:not([data-page-sidebar-hidden])
+    .right-sidebar-container,
+  html[data-contents-resized]:not([data-page-sidebar-hidden]) .right-sidebar {
+    width: var(--layout-contents-width);
+    max-width: none;
+  }
+
+  /* Starlight hides this panel's scrollbar (`scrollbar-width: none`), which
+     would quietly cut a heading the reader narrowed the panel past. */
+  html[data-contents-resized]:not([data-page-sidebar-hidden]) .right-sidebar {
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  html[data-contents-resized] .layout-page-sidebar-content :is(a, h2) {
+    white-space: nowrap;
   }
 
   html[data-page-sidebar-hidden] {
@@ -764,15 +1268,6 @@ body {
     width: var(--layout-edge-rail-width);
   }
 
-  html[data-page-sidebar-hidden] .layout-contents-toggle {
-    position: fixed;
-    inset-block-start: calc(var(--sl-nav-height) + 0.5rem);
-    inset-inline-start: auto;
-    inset-inline-end: calc(
-      (var(--layout-edge-rail-width) - var(--layout-edge-toggle-size)) / 2
-    );
-  }
-
   html[data-page-sidebar-hidden] .right-sidebar {
     z-index: var(--sl-z-index-toc);
     inset-inline-start: auto;
@@ -794,7 +1289,9 @@ body {
     transition: opacity 100ms ease;
   }
 
-  html[data-page-sidebar-hidden]:not([data-page-sidebar-peek-suppressed])
+  html[data-page-sidebar-hidden][data-page-sidebar-peek-armed]:not(
+    [data-page-sidebar-peek-suppressed]
+  )
     .right-sidebar:hover {
     width: max-content;
     max-width: 80ch;
@@ -802,13 +1299,32 @@ body {
     box-shadow: var(--sl-shadow-lg);
   }
 
-  html[data-page-sidebar-hidden]:not([data-page-sidebar-peek-suppressed])
+  html[data-page-sidebar-hidden][data-page-sidebar-peek-armed]:not(
+    [data-page-sidebar-peek-suppressed]
+  )
     .right-sidebar:hover
     .layout-page-sidebar-content {
     visibility: visible;
     opacity: 1;
     pointer-events: auto;
   }
+
+  /* The same growth, mirrored. This control is positioned inside its panel,
+     so a peek drags it inward with the panel's own edge unless its outer edge
+     is pinned to where the rail put it; with both insets set, the box grows
+     to meet the separator on its own. */
+  html[data-page-sidebar-hidden][data-page-sidebar-peek-armed]:not(
+    [data-page-sidebar-peek-suppressed]
+  )
+    .right-sidebar:hover
+    .layout-contents-toggle {
+    place-items: center end;
+    inset-inline-end: calc(
+      var(--layout-edge-rail-width) - var(--layout-edge-toggle-width) -
+        var(--layout-edge-toggle-gap) - 1px
+    );
+    width: auto;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -820,6 +1336,162 @@ body {
   }
 }
 
+/* The side column's room (rule S3 of docs/plans/hover-card-consistency.md):
+   while explanation cards sit to the right of the article, the article
+   slides left through its own start margin, which `card-side.ts` computes
+   and hands over as `--explico-article-start`. `.main-pane` keeps its width
+   and the rail stays where it is. `:root` outranks the `html[…] .main-pane`
+   rules above that centre the article; `screen` keeps the slide off paper.
+   The slide's animation is a transform the card manager runs, so this
+   margin is always the final one. */
+@media screen and (min-width: 72rem) {
+  :root[data-article-slid] .main-pane {
+    --sl-content-margin-inline: var(--explico-article-start, 0px) auto;
+  }
+}
+
+/* Both side panels sit above the explanation cards, whose layer takes the
+   header's level just before `.page` (`card-placement.ts`): an open panel is
+   never covered — a reader who needs its room collapses it — and a collapsed
+   one peeks open over the cards. Each panel's controls live inside it, so
+   they rise with it. The header outranks both: the rail's box starts at the
+   window's top, under the header. An expanded table or diagram covers the
+   panels, and the cards opened from inside it must cover it, so while one is
+   open the panels drop back to Starlight's own levels. */
+.header {
+  z-index: calc(var(--sl-z-index-navbar) + 1);
+}
+
+/* A slimmer site header: 3rem at every width, where Starlight's is 3.5rem
+   and 4rem from 50rem up. The title, the logo (sized from the height and
+   padding) and the search box scale with it, so more of the window goes to
+   the lesson, and to the cards and side column under the header.
+   Everything that sits under the header reads `--sl-nav-height`. */
+:root {
+  --sl-nav-height: 3rem;
+  --sl-nav-pad-y: 0.5rem;
+}
+
+.site-title {
+  font-size: var(--sl-text-xl);
+}
+
+@media (min-width: 50rem) {
+  button[data-open-modal] {
+    height: 2rem;
+  }
+}
+
+@media (min-width: 50rem) {
+  :root .sidebar-pane {
+    z-index: var(--sl-z-index-navbar);
+  }
+}
+
+@media (min-width: 72rem) {
+  :root .right-sidebar,
+  :root[data-page-sidebar-hidden] .right-sidebar {
+    z-index: var(--sl-z-index-navbar);
+  }
+}
+
+:root:has(.table-overflow-expanded, .diagram-is-expanded) .sidebar-pane {
+  z-index: var(--sl-z-index-menu);
+}
+
+:root:has(.table-overflow-expanded, .diagram-is-expanded) .right-sidebar {
+  z-index: var(--sl-z-index-toc);
+}
+
+/* S9: "Keep the article left", fixed at the top of the side column just
+   under the header, over the cards scrolling past it. `card-side.ts` sets
+   its `left`. */
+.explico-keep-left {
+  position: fixed;
+  z-index: var(--sl-z-index-navbar);
+  top: calc(var(--sl-nav-height) + 0.5rem);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin: 0;
+  padding: 0.2rem 0.65rem 0.2rem 0.4rem;
+  border: var(--ex-edge-border);
+  border-radius: 999px;
+  font: inherit;
+  font-size: var(--sl-text-xs);
+  line-height: 1.4;
+  color: var(--sl-color-gray-2);
+  background: var(--sl-color-bg);
+  box-shadow: var(--sl-shadow-sm);
+  cursor: pointer;
+}
+
+.explico-keep-left[hidden] {
+  display: none;
+}
+
+.explico-keep-left:hover {
+  color: var(--sl-color-text);
+}
+
+.explico-keep-left:focus-visible {
+  outline: 3px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+
+.explico-keep-left-switch {
+  position: relative;
+  flex: none;
+  width: 1.75em;
+  height: 1em;
+  border-radius: 999px;
+  background: var(--sl-color-gray-4);
+  transition: background-color 100ms ease;
+}
+
+.explico-keep-left-switch::after {
+  content: '';
+  position: absolute;
+  top: 0.125em;
+  left: 0.125em;
+  width: 0.75em;
+  height: 0.75em;
+  border-radius: 50%;
+  background: var(--sl-color-bg);
+  transition: transform 100ms ease;
+}
+
+.explico-keep-left[aria-pressed='true'] .explico-keep-left-switch {
+  background: var(--sl-color-accent);
+}
+
+.explico-keep-left[aria-pressed='true'] .explico-keep-left-switch::after {
+  transform: translateX(0.75em);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .explico-keep-left-switch,
+  .explico-keep-left-switch::after {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .explico-keep-left-switch {
+    border: 1px solid ButtonText;
+  }
+
+  .explico-keep-left[aria-pressed='true'] .explico-keep-left-switch {
+    background: Highlight;
+  }
+}
+
+@media print {
+  .explico-keep-left {
+    display: none !important;
+  }
+}
+
 /* Source citations: inline `[n]` markers and the end-of-page reference list
    emitted by the remark-citation adapter. The hover/pin panel is styled in
    the CitationLayer island. */
@@ -1270,61 +1942,217 @@ body {
   }
 }
 
-.sl-markdown-content .keyed-equation:target {
-  animation: eq-flash 5s ease-out both;
+.sl-markdown-content .keyed-equation:target {
+  animation: eq-flash 5s ease-out both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sl-markdown-content .keyed-equation:target {
+    animation: none;
+    background: var(--sl-color-accent-low);
+    outline: 2px solid var(--sl-color-accent);
+    outline-offset: 0.2rem;
+  }
+}
+
+@media (forced-colors: active) {
+  .sl-markdown-content .keyed-equation:target {
+    animation: none;
+    outline: 2px solid Highlight;
+    outline-offset: 0.2rem;
+  }
+  .sl-markdown-content a.equation-ref:hover,
+  .sl-markdown-content a.equation-ref:focus-visible {
+    outline: 2px solid Highlight;
+  }
+}
+
+@media print {
+  .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;
+  }
+}
+
+/* One caption line for every float (docs/plans/titles-and-containers.md
+   Part 3): `Figure 2.2.1 [chain] ‹caption›` — the number links to the float,
+   the chain icon copies that link (`HeadingAnchorEnhancer.astro`), the
+   caption is the float's one long caption. A figure and a diagram put it
+   below the picture (`FloatCaption.astro`), a table above it, the LaTeX
+   convention. The line never hides (docs/plans/figures-and-short-captions.md,
+   decision 1); its buttons sit at its end (`.float-tools`, below). */
+.sl-markdown-content .float-caption {
+  /* Anchors the button row (`.float-tools`) to the line's end. */
+  position: relative;
+  margin-block: 0.5rem 0;
+  font-size: var(--sl-text-sm);
+  line-height: 1.5;
+  color: var(--sl-color-gray-3);
+  break-before: avoid-page;
+}
+
+.sl-markdown-content .keyed-table > .float-caption {
+  margin-block: 0 0.5rem;
+  break-before: auto;
+  break-after: avoid-page;
+}
+
+/* A float's buttons sit together at the top right of its caption line, in
+   one boxed style, always visible: a table's widen ↔ (the same action as
+   the column at its right edge) and its fold ⌃ / ⌄, a diagram's widen ↔.
+   The caption's text keeps clear of a shown one. A table's scripts add the
+   row (`Table.astro`, `TableOverflowExpander.astro`), whichever runs first;
+   a figure's or a diagram's is rendered by `FloatCaption.astro`. */
+.sl-markdown-content .float-tools {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.sl-markdown-content .float-caption:has(> .float-tools > .float-tool:not([hidden])) {
+  padding-inline-end: 2.25rem;
+}
+
+.sl-markdown-content
+  .float-caption:has(> .float-tools > .float-tool:not([hidden]) ~ .float-tool:not([hidden])) {
+  padding-inline-end: 4.25rem;
+}
+
+.sl-markdown-content .float-tool {
+  display: inline-grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.5rem;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.3rem;
+  background: var(--sl-color-bg);
+  color: var(--sl-color-gray-2);
+  cursor: pointer;
+}
+
+.sl-markdown-content .float-tool[hidden] {
+  display: none;
+}
+
+.sl-markdown-content .float-tool svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.sl-markdown-content .float-tool:hover {
+  color: var(--sl-color-text-accent);
+  border-color: var(--sl-color-text-accent);
+}
+
+.sl-markdown-content .float-tool:focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 1px;
+}
+
+/* The widen button's two faces: ↔ widens, →← brings the float back. */
+.sl-markdown-content .float-tool[aria-expanded='true'] .float-tool__widen,
+.sl-markdown-content .float-tool[aria-expanded='false'] .float-tool__narrow {
+  display: none;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .sl-markdown-content .keyed-equation:target {
-    animation: none;
-    background: var(--sl-color-accent-low);
-    outline: 2px solid var(--sl-color-accent);
-    outline-offset: 0.2rem;
-  }
+/* The fold button's two faces, for a lab's tools (`Figure.astro`): ⌃ folds
+   them away, ⌄ brings them back. A table's toggle swaps its icon instead. */
+.sl-markdown-content .float-tool[aria-expanded='true'] .float-tool__unfold,
+.sl-markdown-content .float-tool[aria-expanded='false'] .float-tool__fold {
+  display: none;
 }
 
-@media (forced-colors: active) {
-  .sl-markdown-content .keyed-equation:target {
-    animation: none;
-    outline: 2px solid Highlight;
-    outline-offset: 0.2rem;
-  }
-  .sl-markdown-content a.equation-ref:hover,
-  .sl-markdown-content a.equation-ref:focus-visible {
-    outline: 2px solid Highlight;
-  }
+/* The caption line's live end: the case a lab's plot shows, after the long
+   caption (`FloatCaption.astro`, `figure/figure-state.ts`). */
+.sl-markdown-content .float-caption__state:not(:empty) {
+  margin-inline-start: 0.25em;
 }
 
 @media print {
-  .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 {
+  .sl-markdown-content .float-tools {
     display: none;
   }
-  .sl-markdown-content .keyed-equation {
+
+  .sl-markdown-content .float-caption:has(> .float-tools) {
     padding-inline-end: 0;
   }
 }
 
-/* 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;
+/* A short caption opens the line as its bold title, the journal-legend
+   style: "**Sampled flight data.** Position, …" (`FloatCaption.astro`,
+   `Table.astro`; docs/plans/figures-and-short-captions.md, decision 9.1). */
+.sl-markdown-content .float-caption__title {
+  color: var(--sl-color-text);
+  font-weight: 600;
 }
 
-.sl-markdown-content .diagram__summary + .diagram__body {
-  margin-block-start: 0;
+.sl-markdown-content .float-caption__number {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--sl-color-text-accent);
+  text-decoration: none;
+}
+
+.sl-markdown-content .float-caption__number:hover,
+.sl-markdown-content .float-caption__number:focus-visible {
+  text-decoration: underline;
+}
+
+.sl-markdown-content .float-caption__anchor {
+  display: inline-flex;
+  width: 1.15em;
+  height: 1.15em;
+  margin-inline: 0.15em 0.3em;
+  vertical-align: -0.2em;
+  align-items: center;
+  justify-content: center;
+  color: var(--sl-color-gray-4);
+  text-decoration: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.sl-markdown-content .float-caption__anchor svg {
+  width: 0.85em;
+  height: 0.85em;
+}
+
+.sl-markdown-content .float-caption__anchor:hover,
+.sl-markdown-content .float-caption__anchor:focus-visible {
+  color: var(--sl-color-text-accent);
+}
+
+.sl-markdown-content :is(.float-caption__number, .float-caption__anchor):focus-visible {
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 0.15rem;
+}
+
+@media print {
+  .sl-markdown-content .float-caption__number {
+    color: inherit;
+  }
 }
 
 /* `<Table>`/`<Figure>`/`<Diagram>` keyed floats — the same deep-link
@@ -1346,12 +2174,36 @@ body {
   white-space: nowrap;
 }
 
+/* `[[sec-…]]` reads the same, but may print a section's title rather than
+   `§ 1.1.2` (an unnumbered heading, or a course that hides section numbers),
+   so it wraps like prose; the no-break space inside `§ 1.1.2` keeps that one
+   whole. `[[check-…]]` and `[[ex-…]]` follow the section rules too
+   (docs/plans/titles-and-containers.md Q11): a course that hides section
+   numbers gets "Example “‹title›”". */
+.sl-markdown-content a.section-ref,
+.sl-markdown-content a.knowledge-check-ref,
+.sl-markdown-content a.example-ref {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  padding-inline: 0.1em;
+  border-radius: 0.2em;
+  color: var(--sl-color-text-accent);
+}
+
 .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.diagram-ref:hover,
-.sl-markdown-content a.diagram-ref:focus-visible {
+.sl-markdown-content a.diagram-ref:focus-visible,
+.sl-markdown-content a.section-ref:hover,
+.sl-markdown-content a.section-ref:focus-visible,
+.sl-markdown-content a.knowledge-check-ref:hover,
+.sl-markdown-content a.knowledge-check-ref:focus-visible,
+.sl-markdown-content a.example-ref:hover,
+.sl-markdown-content a.example-ref:focus-visible {
   background: var(--sl-color-accent-low);
 }
 
@@ -1373,13 +2225,34 @@ body {
   }
 }
 
+/* A reference whose target sits inside a closed memo or section opens a
+   preview card, as if the target were off screen; while that card is open,
+   the fold's bar is marked the same way, so the reader sees where the
+   target lives (`FloatRefLayer.astro`). */
+.sl-markdown-content .float-ref-fold-hint {
+  background: var(--sl-color-accent-low);
+  outline: 2px solid var(--sl-color-accent);
+  outline-offset: 0.2rem;
+  border-radius: 0.3rem;
+  transition:
+    background 120ms ease-out,
+    outline-color 120ms ease-out;
+}
+
+@media (forced-colors: active) {
+  .sl-markdown-content .float-ref-fold-hint {
+    outline-color: Highlight;
+  }
+}
+
 /* A referencing `[[tab-key]]`/`[[fig-key]]` link elsewhere in the prose was
    hovered/focused and the float it points to is already fully on screen:
    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 .diagram.dia-ref-highlight {
+.sl-markdown-content .diagram.dia-ref-highlight,
+.sl-markdown-content :is(h2, h3, h4, h5, h6).sec-ref-highlight {
   background: var(--sl-color-accent-low);
   outline: 2px solid var(--sl-color-accent);
   outline-offset: 0.2rem;
@@ -1395,7 +2268,8 @@ body {
   .sl-markdown-content .diagram:target,
   .sl-markdown-content .keyed-table.tab-ref-highlight,
   .sl-markdown-content .keyed-figure.fig-ref-highlight,
-  .sl-markdown-content .diagram.dia-ref-highlight {
+  .sl-markdown-content .diagram.dia-ref-highlight,
+  .sl-markdown-content :is(h2, h3, h4, h5, h6).sec-ref-highlight {
     animation: none;
     outline: 2px solid Highlight;
     outline-offset: 0.2rem;
@@ -1405,7 +2279,13 @@ body {
   .sl-markdown-content a.figure-ref:hover,
   .sl-markdown-content a.figure-ref:focus-visible,
   .sl-markdown-content a.diagram-ref:hover,
-  .sl-markdown-content a.diagram-ref:focus-visible {
+  .sl-markdown-content a.diagram-ref:focus-visible,
+  .sl-markdown-content a.section-ref:hover,
+  .sl-markdown-content a.section-ref:focus-visible,
+  .sl-markdown-content a.knowledge-check-ref:hover,
+  .sl-markdown-content a.knowledge-check-ref:focus-visible,
+  .sl-markdown-content a.example-ref:hover,
+  .sl-markdown-content a.example-ref:focus-visible {
     outline: 2px solid Highlight;
   }
 }
@@ -1463,6 +2343,197 @@ body {
   }
 }
 
+/* Outline numbers (docs/plans/titles-and-containers.md Part 1). A lesson's
+   numbered heading carries `data-sec-number="1.1.2"` (`remark-notation.mjs`,
+   from the manifest), printed here ahead of the title as generated content —
+   so the heading's own text, its anchor and the "On this page" entry stay the
+   title alone. The number shows on a wide screen and in print; on a narrow one
+   only on a collapsed section's bar, which says what is folded away, and in
+   the chain icon's "Link copied · § 1.1.2". The en space is part of the
+   content, not a margin, so a screen reader hears "1.1.2 Title", not
+   "1.1.2Title". */
+.sl-markdown-content [data-sec-number]::before {
+  content: attr(data-sec-number) '\2002';
+  color: var(--sl-color-text-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+@media screen and (width < 50em) {
+  .sl-markdown-content [data-sec-number]::before {
+    content: none;
+  }
+
+  .sl-markdown-content
+    details.sl-section-collapsible:not([data-state='open'])
+    > .sl-section-summary
+    > [data-sec-number]::before {
+    content: attr(data-sec-number) '\2002';
+  }
+}
+
+@media print {
+  .sl-markdown-content [data-sec-number]::before {
+    color: inherit;
+  }
+}
+
+/* Kind badges (Part 6): the `<h2>` a knowledge check and a worked-example set
+   draw (`BlockHeading.astro`). The kind's icon leads the author's title, as
+   it does in "On this page"; the kind's word and the block's number are a
+   small label in the card's top-right corner, inside its top padding. The
+   label is out of the text flow, so the title keeps the whole line at every
+   width and still wraps word by word, and the number reads as the block's
+   label rather than as a section number. `data-labels="icon"` keeps the word
+   for a screen reader only (`sr-only`). The card's padding is set for it
+   below; `--block-label-lift` is how far the label sits above the title's
+   line box, measured from the card's inner top edge. */
+.sl-markdown-content .ex-section-card:has(> .block-heading-wrapper) {
+  --block-label-lift: 1.25rem;
+  padding-block-start: var(--block-label-lift);
+}
+
+.sl-markdown-content .block-heading-wrapper {
+  position: relative;
+}
+
+.sl-markdown-content .block-heading {
+  /* A wrapped title's later lines start under its first word, not under
+     the icon. */
+  padding-inline-start: 1.1em;
+  text-indent: -1.1em;
+}
+
+.sl-markdown-content .block-heading__icon {
+  display: inline-block;
+  width: 0.8em;
+  height: 0.8em;
+  margin-inline-end: 0.3em;
+  vertical-align: -0.06em;
+  color: var(--sl-color-text-accent);
+}
+
+.sl-markdown-content .block-badge {
+  position: absolute;
+  inset-block-start: calc(0.3rem - var(--block-label-lift, 1.25rem));
+  inset-inline-end: 0;
+  color: var(--sl-color-text-accent);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  line-height: 1.2;
+  text-indent: 0;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* Narrow and touch screens set the heading inline beside the section's
+   chevron, with the summary's own hanging indent (below); the heading's
+   indent above would double it. */
+@media screen and (width < 50em), screen and (hover: none) {
+  .sl-markdown-content .block-heading {
+    padding-inline-start: 0;
+    text-indent: 0;
+  }
+}
+
+/* The number follows the section numbers' rules above (Q11): shown on a wide
+   screen and in print; on a narrow one only on a folded bar, and in the chain
+   icon's "Link copied · Example 1.1.1". Real text, so the heading's name reads
+   "Example 1.1.1 ‹title›" wherever it shows. */
+.sl-markdown-content .block-heading__number {
+  color: var(--sl-color-text-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+@media screen and (width < 50em) {
+  .sl-markdown-content .block-heading__number {
+    display: none;
+  }
+
+  .sl-markdown-content
+    details.sl-section-collapsible:not([data-state='open'])
+    > .sl-section-summary
+    > .block-heading
+    .block-heading__number {
+    display: inline;
+  }
+}
+
+@media print {
+  .sl-markdown-content .block-heading__number {
+    color: inherit;
+  }
+}
+
+/* "On this page" lists a check and an example set by its title alone, as it
+   lists a section; the badge's icon before the title says which kind it is
+   (`LayoutPageSidebar.astro` marks the link `data-block-kind`). A mask, so
+   the icon takes the link's colour, current and hovered alike. */
+:is(starlight-toc, mobile-starlight-toc) a[data-block-kind]::before {
+  content: '';
+  display: inline-block;
+  width: 0.95em;
+  height: 0.95em;
+  margin-inline-end: 0.35em;
+  vertical-align: -0.12em;
+  background-color: currentColor;
+  mask: var(--block-kind-icon) center / contain no-repeat;
+}
+
+:is(starlight-toc, mobile-starlight-toc) a[data-block-kind='check'] {
+  --block-kind-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.5l4 4 8-9'/%3E%3C/svg%3E");
+}
+
+:is(starlight-toc, mobile-starlight-toc) a[data-block-kind='example'] {
+  --block-kind-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Crect x='2' y='2' width='12' height='12' rx='2'/%3E%3Cpath d='M5 8h6M8 5v6'/%3E%3C/svg%3E");
+}
+
+/* "Link copied · § 1.1.2" — `HeadingAnchorEnhancer.astro` places it under the
+   title in page coordinates, clamped to the text column, and removes it
+   after a moment; the same accent chip as an equation's "Copied!", with an
+   edge and a shadow because the section behind it is flashing the same
+   accent tint. */
+.sl-anchor-copied {
+  position: absolute;
+  z-index: 30;
+  padding: 0.15rem 0.5rem;
+  border: 1px solid var(--sl-color-accent);
+  border-radius: 0.35rem;
+  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
+  background: var(--sl-color-accent-low);
+  color: var(--sl-color-text-accent);
+  font-size: var(--sl-text-xs);
+  line-height: 1.5;
+  /* One line for a short name; a long title wraps inside the cap, never
+     wider than the column (the script keeps it inside the column). */
+  width: max-content;
+  max-width: min(28rem, calc(100vw - 2rem));
+  pointer-events: none;
+  animation: sl-anchor-copied 1.8s ease both;
+}
+
+@keyframes sl-anchor-copied {
+  0%,
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sl-anchor-copied {
+    animation: none;
+  }
+}
+
+@media print {
+  .sl-anchor-copied {
+    display: none;
+  }
+}
+
 /* 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
@@ -1535,13 +2606,21 @@ body {
    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. */
+   than adding to it. Like Starlight's own rule, the icon hides only where a
+   hover can reveal it: on a touch screen it stays visible, since it is a
+   real tap target at the end of the title line either way (an invisible one
+   used to take a tap meant for the title and change the URL instead). */
 .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;
+}
+
+@media (hover: hover) {
+  .sl-markdown-content .sl-heading-wrapper.sl-section-titlebar > .sl-anchor-link {
+    opacity: 0;
+  }
 }
 
 .sl-markdown-content .sl-heading-wrapper.sl-section-titlebar:has(> .sl-section-collapsible > summary:hover)
@@ -1553,24 +2632,72 @@ body {
   opacity: 1;
 }
 
+/* A narrow screen shows no section number and, often, has no hover to reveal
+   the chain icon — yet the icon is the way to the section's link and, in its
+   "Link copied · § 1.1.2", its number (docs/plans/titles-and-containers.md
+   Q3). So it is always shown there, smaller and in the muted text colour.
+   The size variable also sets the room `anchor-links.css` reserves for it at
+   the end of the title. After the hover rules above, which it overrides. */
+@media screen and (width < 50em) {
+  .sl-markdown-content .sl-heading-wrapper {
+    --sl-anchor-icon-size: 0.7em;
+  }
+
+  .sl-markdown-content .sl-heading-wrapper > .sl-anchor-link,
+  .sl-markdown-content .sl-heading-wrapper.sl-section-titlebar > .sl-anchor-link {
+    opacity: 1;
+    color: var(--sl-color-gray-3);
+  }
+}
+
 /* 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. */
+   own text always starts at the same position a plain heading's would.
+   That gutter is only `--sl-content-pad-x` wide (16–24px) and ends at the
+   sidebar's border, so the marker is centred in it — a fixed `-1.6em` once
+   put the glyph right on that border line. Inside a `[card]` section the
+   gutter is the card's own padding (`--ex-section-gutter`, `surfaces.css`).
+   Narrow and touch screens have no usable gutter at all; the marker moves
+   into the title line there (below). */
 .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`. */
+  /* Room for the absolutely-positioned anchor icon at the end of the line. */
   padding-inline-end: 1.5em;
+  /* The title's own font size, so the gutter chevron can centre on the
+     title's first line — not on the whole summary, which also holds the
+     "Hidden here" line while closed. */
+  --sl-section-title-size: var(--sl-text-h2);
+}
+
+.sl-markdown-content .sl-section-summary:has(> h3) {
+  --sl-section-title-size: var(--sl-text-h3);
+}
+
+.sl-markdown-content .sl-section-summary:has(> h4) {
+  --sl-section-title-size: var(--sl-text-h4);
+}
+
+.sl-markdown-content .sl-section-summary:has(> h5) {
+  --sl-section-title-size: var(--sl-text-h5);
+}
+
+.sl-markdown-content .sl-section-summary:has(> h6) {
+  --sl-section-title-size: var(--sl-text-h6, var(--sl-text-base));
 }
 
 .sl-markdown-content .sl-section-summary::before {
   position: absolute;
-  left: -1.6em;
-  top: 50%;
+  /* `<summary>` starts 0.5rem left of the text (`markdown.css`), so this
+     centres the marker box on the middle of the gutter. */
+  left: calc(
+    0.5rem - var(--ex-section-gutter, var(--sl-content-pad-x, 1rem)) / 2 -
+      var(--sl-details-marker-size, 1.25rem) / 2
+  );
+  top: calc(var(--sl-section-title-size) * var(--sl-line-height-headings) / 2);
   margin: 0; /* cancel `markdown.css`'s inline-flow margin trick */
   transform: translateY(-50%);
   opacity: 0;
@@ -1602,6 +2729,109 @@ body {
   transition: opacity 100ms ease;
 }
 
+/* A closed section's cues beyond the chevron — the two `aria-hidden` spans
+   `CollapsibleSections.astro` appends to `<summary>` after the heading.
+   `.sl-section-hint` ("(click to expand)", "(tap to expand)" on touch) is
+   for narrow/touch screens only (enabled in the block below);
+   `.sl-section-stub` ("Hidden here: 2 paragraphs, 1 equation") shows on
+   every screen. Both vanish once the section is `open` — the stub by
+   collapsing its grid row, so a peek grown into a real expand slides the
+   body up smoothly instead of jumping by a line. */
+.sl-markdown-content .sl-section-hint {
+  display: none;
+  margin-inline-start: 0.4em;
+  font-size: var(--sl-text-sm);
+  font-weight: 400;
+  color: var(--sl-color-gray-3);
+  white-space: nowrap;
+}
+
+.sl-markdown-content .sl-section-hint::before {
+  content: '(click to expand)';
+}
+
+@media (hover: none) {
+  .sl-markdown-content .sl-section-hint::before {
+    content: '(tap to expand)';
+  }
+}
+
+.sl-markdown-content .sl-section-stub {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  margin-block-start: 0;
+  padding-block-end: 0;
+  border-block-end: 0 dashed var(--sl-color-gray-5);
+  text-indent: 0; /* the narrow-screen hanging indent is for the title only */
+  font-size: var(--sl-text-sm);
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--sl-color-gray-3);
+  transition:
+    grid-template-rows 220ms ease,
+    opacity 150ms ease,
+    margin-block-start 220ms ease,
+    padding-block-end 220ms ease,
+    border-block-end-width 220ms ease;
+}
+
+.sl-markdown-content .sl-section-stub > span {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.sl-markdown-content details.sl-section-collapsible:not([data-state='open'])
+  > .sl-section-summary
+  > .sl-section-stub {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  margin-block-start: 0.3rem;
+  padding-block-end: 0.45rem;
+  border-block-end-width: 1px;
+}
+
+/* Narrow and touch screens: there is no gutter to hold the chevron (on a
+   phone it used to render off-screen), and no hover to reveal it on an open
+   section. It moves into the title line and stays visible in both states —
+   `›` closed, `⌄` open, so it also tells a reader the section can fold —
+   with a hanging indent that keeps a wrapped title's later lines under its
+   text, not under the chevron. The room reserved is the marker's own box
+   minus its negative start margin plus its end gap (`markdown.css`).
+   `screen` only: a printer reports `hover: none` too, and an inline heading
+   would lose the print stylesheet's `break-after: avoid`. */
+@media screen and (width < 50em), screen and (hover: none) {
+  .sl-markdown-content .sl-section-summary {
+    --sl-section-marker-room: calc(
+      var(--sl-details-marker-size, 1.25rem) * 0.75 + 0.25rem
+    );
+    padding-inline-start: calc(0.5rem + var(--sl-section-marker-room));
+    text-indent: calc(-1 * var(--sl-section-marker-room));
+  }
+
+  .sl-markdown-content .sl-section-summary > :is(h1, h2, h3, h4, h5, h6) {
+    display: inline;
+  }
+
+  .sl-markdown-content .sl-section-summary::before {
+    position: static;
+    vertical-align: -0.15em;
+    transform: none;
+    opacity: 1;
+    transition: transform 150ms ease;
+  }
+
+  .sl-markdown-content details.sl-section-collapsible[open] > .sl-section-summary::before {
+    transform: rotateZ(90deg);
+  }
+
+  .sl-markdown-content details.sl-section-collapsible:not([data-state='open'])
+    > .sl-section-summary
+    > .sl-section-hint {
+    display: inline;
+  }
+}
+
 /* 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
@@ -1650,13 +2880,16 @@ body {
 
 @media (prefers-reduced-motion: reduce) {
   .sl-markdown-content .sl-section-summary::before,
-  .sl-markdown-content .sl-section-body {
+  .sl-markdown-content .sl-section-body,
+  .sl-markdown-content .sl-section-stub {
     transition: none;
   }
 }
 
 @media print {
-  .sl-markdown-content .sl-section-summary::before {
+  .sl-markdown-content .sl-section-summary::before,
+  .sl-markdown-content .sl-section-hint,
+  .sl-markdown-content .sl-section-stub {
     display: none !important;
   }
 
@@ -1664,14 +2897,13 @@ body {
     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`. */
+  /* Print follows the screen, and CSS couldn't do otherwise anyway: 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). What JS does
+     at print time (`src/components/disclosure/print-as-shown.ts`) is settle
+     a peeking or mid-animation section to the state it reads as, and add a
+     "(content collapsed …)" note after each closed one. */
 }
 
 /* Table column narrowing + expand-on-overflow
@@ -1702,10 +2934,10 @@ body {
    `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. */
+   the same technique `surfaces.css`'s accent tint uses, and for the same
+   reason: a token like `--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%);
 }
@@ -1731,6 +2963,19 @@ body {
   flex: 1 1 auto;
   min-width: 0;
   overflow-x: auto;
+  /* A size container, so a row spanning the whole table (the "… N more
+     rows …" separator, `Table.astro`) can size its label to the part of
+     the table on screen (`100cqi`), not to its whole scrolled width. It
+     takes its width from the flex row, never from its content, so the
+     inline-size containment this implies changes nothing else. */
+  container-type: inline-size;
+}
+
+/* A preview card sizes itself to its content, and a size container has no
+   width of its own to give it: in a card the table's width sizes the card,
+   as it always did (`FloatRefLayer.astro`). */
+.hover-panel .table-overflow-scroll {
+  container-type: normal;
 }
 
 /* A scrollable region must be reachable by keyboard (WCAG 2.1.1) — the
@@ -1898,6 +3143,7 @@ body {
   .right-sidebar-container,
   .pagination-links,
   .layout-edge-toggle,
+  .layout-edge-resizer,
   [data-explico-export-chrome],
   [data-popup-root],
   [data-citation-panel],
@@ -1909,11 +3155,8 @@ body {
   .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,
+  .float-caption__anchor,
   .short-note__collapse,
   .assessment-actions,
   .assessment-chevron,
@@ -1956,9 +3199,6 @@ body {
   }
 
   .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;
@@ -1978,7 +3218,7 @@ body {
   .compact-example,
   .assessment-item,
   .lab-result,
-  .lab-chart-figure,
+  .lab-chart,
   .sl-markdown-content pre,
   .sl-markdown-content blockquote {
     break-inside: avoid-page;
@@ -2038,15 +3278,15 @@ body {
     display: table-row !important;
   }
 
-  .assessment-panel[hidden],
-  .short-note[hidden],
+  /* An open example set's inactive tabs are hidden only to save screen
+     space. A closed question panel or short note is the reader's own
+     disclosure, and print follows the screen for those — it stays closed
+     and gets a `.explico-collapsed-note` (below) instead. */
   .compact-example[hidden] {
     display: block !important;
   }
 
   .diagram,
-  .diagram__titlebar,
-  .diagram__details,
   .diagram__body,
   .diagram-stage,
   .diagram-scroll {
@@ -2077,6 +3317,32 @@ body {
     height: 100% !important;
   }
 
+  /* WebKit (Safari, every iOS browser) paints a `foreignObject` descendant
+     with its own render layer — every KaTeX `position: relative` span —
+     without the SVG's internal transforms, the `viewBox` scale above
+     included, so a printed diagram loses its formulas. Where CSS can divide
+     lengths, keep the SVG at its build-time size and scale the HTML canvas
+     instead; the negative block margin gives the layout box the scaled
+     height. Without that support the `viewBox` scaling above stays. */
+  @supports (transform: scale(calc(100cqw / 1px))) {
+    .diagram-scroll {
+      container-type: inline-size;
+    }
+
+    .diagram-canvas {
+      width: calc(var(--diagram-width) * 1px) !important;
+      max-width: none !important;
+      height: calc(var(--diagram-height) * 1px) !important;
+      aspect-ratio: auto;
+      margin-block-end: calc(
+        100cqw * var(--diagram-height) / var(--diagram-width) -
+          var(--diagram-height) * 1px
+      );
+      transform: scale(calc(100cqw / (var(--diagram-width) * 1px)));
+      transform-origin: 0 0;
+    }
+  }
+
   .lab-chart,
   .lab-math,
   .katex-display {
@@ -2085,10 +3351,14 @@ body {
     overflow: visible !important;
   }
 
+  /* Not KaTeX's own SVGs: a `\sqrt` radical (and stretchy arrows/accents)
+     is a deliberately oversized SVG clipped by its parent, and its height
+     comes from KaTeX's `height` attribute — `height: auto` resolved it to
+     0, so every printed square root lost its radical sign. */
   .lab-chart svg,
   .keyed-figure img,
   .sl-markdown-content img,
-  .sl-markdown-content svg {
+  .sl-markdown-content svg:not(.katex *) {
     max-width: 100% !important;
     height: auto;
   }
@@ -2108,14 +3378,18 @@ body {
   }
 
   :is(
+      .ex-tier-meta,
+      .ex-tier-accent,
+      .ex-tier-aside,
+      .starlight-aside,
+      .sl-markdown-content article.card,
       .lab-shell,
       .lab-result,
       .assessment-shell,
       .assessment-item,
       .memo-block-frame,
-      .keyed-figure__details,
       .compact-examples,
-      .diagram__details
+      .block-badge
     ) {
     color: #111 !important;
     border-color: #777 !important;
@@ -2130,4 +3404,38 @@ body {
     -webkit-print-color-adjust: exact;
   }
 
+  /* "(content collapsed — full text: …)" under a disclosure the reader left
+     closed (`src/components/disclosure/print-as-shown.ts`). Sized in `rem`:
+     a section's note sits inside its heading-sized title bar. */
+  .explico-collapsed-note {
+    display: block;
+    margin-block: 0.15rem 0.75rem;
+    font-size: 0.8rem;
+    font-style: italic;
+    font-weight: 400;
+    line-height: 1.4;
+    color: #444;
+    overflow-wrap: anywhere;
+    text-indent: 0;
+  }
+
+  .explico-collapsed-note a[href] {
+    color: #08775b !important;
+    text-decoration: underline;
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .memo-block-frame .explico-collapsed-note {
+    margin: 0;
+    padding-block-end: 0.25rem;
+  }
+}
+
+/* The note exists only while a print is being prepared, and never shows on
+   screen even then (the print button prepares before the dialog opens). */
+@media not print {
+  .explico-collapsed-note {
+    display: none;
+  }
 }