explico 0.11.1 → 0.13.0

package/src/styles/global.css

@@ -149,14 +149,15 @@ body {
   color: var(--sl-color-text);
 }
 
-/* Clip only the inline axis: `overflow-x: auto` alone makes the block axis
-   compute to `auto` too, which adds a spurious vertical scrollbar around
-   display math. */
-.lab-math {
+/* A lab's math (`renderLabMath`), in the element the lab puts it in. The
+   wrapper never scrolls: a display template's `.katex-display` scrolls
+   sideways when it is wider than its box, like a lesson equation (below),
+   so a lab equation is one scroll container at most, and one that fits
+   draws no scrollbar. An inline template (`{ display: false }` — a legend
+   entry, an axis title, a control label) has no `.katex-display`: it sits
+   in its line, with no margin and nothing to scroll. */
+.lab-math:has(.katex-display) {
   margin-block: 1.25rem;
-  padding-block: 0.15rem;
-  overflow-x: auto;
-  overflow-y: hidden;
 }
 
 .lab-math .katex-display {
@@ -171,12 +172,42 @@ body {
    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 {
+   it scales with the math.
+   The inline padding is KaTeX's own: every stacked script box
+   (`.vlist-t2`) has `margin-right: -2px` and holds a 2px spacer cell, which
+   lies outside the box's layout width but inside its scrollable overflow.
+   An equation within 2px of its column's width scrolled by those 2px for
+   nothing. Padding both sides reserves them and keeps a centred equation
+   centred. The same holds for a lab's display math (`.lab-math`, above). */
+.sl-markdown-content .katex-display,
+.lab-math .katex-display {
   max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   padding-block: 0.25em;
+  padding-inline: 2px;
+}
+
+/* An equation wider than the column scrolls inside it, with no scrollbar on
+   a phone: the edge it is cut at fades, so the reader sees the formula goes
+   on (`data-overflow`, set by `KeyedFloatEnhancer.astro`). The mask fades the
+   ink, whatever the background; focus and print show the equation whole. */
+.sl-markdown-content .katex-display[data-overflow='end'] {
+  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
+}
+.sl-markdown-content .katex-display[data-overflow='start'] {
+  mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
+}
+.sl-markdown-content .katex-display[data-overflow='start end'] {
+  mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
+}
+.sl-markdown-content .katex-display[data-overflow]:focus-visible {
+  mask-image: none;
+}
+@media print {
+  .sl-markdown-content .katex-display[data-overflow] {
+    mask-image: none;
+  }
 }
 
 /* Focusable only while it overflows (`KeyedFloatEnhancer.astro`), so it can
@@ -255,6 +286,24 @@ body {
   margin-block-start: 0;
 }
 
+/* The reader's text size on a touch screen (`TextSizeControl.astro`): the
+   root font size, which every `rem` follows, so the text, the math, the
+   spacing and the cards scale together. Screen only: print keeps its own
+   sizes, and a screen with hover has the browser's zoom instead. */
+@media screen and (hover: none) {
+  :root[data-text-size='90'] {
+    font-size: 90%;
+  }
+
+  :root[data-text-size='80'] {
+    font-size: 80%;
+  }
+
+  :root[data-text-size='70'] {
+    font-size: 70%;
+  }
+}
+
 .lab-chart {
   overflow-x: auto;
   min-height: 18rem;
@@ -267,6 +316,14 @@ body {
   background: var(--sl-color-bg);
 }
 
+/* A lab shows the build's copy of its default plot (its children, in an
+   `<astro-slot>`) until it has drawn its own into `.lab-chart-live`. The
+   copy goes the moment the live plot exists, so the two never stack, not
+   even for the frame before the island drops it (rule V3). */
+.lab-chart:has(> .lab-chart-live > svg) > astro-slot {
+  display: none;
+}
+
 .cds-leg-chart:empty {
   display: none;
 }
@@ -1358,6 +1415,15 @@ details.layout-part-has-open > summary > .group-label {
   z-index: calc(var(--sl-z-index-navbar) + 1);
 }
 
+/* Below 50rem Starlight's menu button is not in the header: it is a fixed
+   button in `nav.sidebar`, at the navbar's level, laid over the header's
+   end. It rises above the raised header, or the header's box takes every
+   tap and the navigation never opens on a phone. Starlight hides the
+   button from 50rem up, so the rule needs no media query. */
+.sl-menu-button {
+  z-index: calc(var(--sl-z-index-navbar) + 2);
+}
+
 /* 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
@@ -1399,13 +1465,111 @@ details.layout-part-has-open > summary > .group-label {
   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 {
+/* The row of card controls (`card-side.ts`, S9, S11, K1): at the top of the
+   side column, "Article left", "Carry cards" and, once a card has been
+   resized, the width menu; with no side column in use, "Carry cards" alone
+   at the article's top right while a card is kept (D7). Fixed just under
+   the site header, over the cards scrolling past; `card-side.ts` sets its
+   `left` or `right`. It wraps rather than reaching over the rail. */
+.explico-side-controls {
   position: fixed;
   z-index: var(--sl-z-index-navbar);
   top: calc(var(--sl-nav-height) + 0.5rem);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.explico-side-controls[data-at='article'] {
+  justify-content: flex-end;
+}
+
+.explico-side-controls[hidden] {
+  display: none;
+}
+
+/* S11: the width menu, a pill like the switch beside it. */
+.explico-side-width {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.2rem 0.35rem 0.2rem 0.65rem;
+  border: var(--ex-edge-border);
+  border-radius: 999px;
+  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);
+}
+
+.explico-side-width[hidden] {
+  display: none;
+}
+
+.explico-side-width select {
+  border: 0;
+  padding: 0 0.2rem;
+  font: inherit;
+  color: var(--sl-color-text);
+  background: transparent;
+  cursor: pointer;
+}
+
+.explico-side-width:focus-within {
+  outline: 3px solid var(--sl-color-accent);
+  outline-offset: 2px;
+}
+
+/* K7: a card's "Opened at" link lands on the trigger the card was opened
+   at, and lights it a moment (`card-manager.ts`, `is-card-origin`). */
+.is-card-origin {
+  border-radius: 0.2em;
+  animation: explico-card-origin 1.2s ease-out;
+}
+
+@keyframes explico-card-origin {
+  from {
+    background-color: var(--sl-color-accent-low);
+    box-shadow: 0 0 0 0.2em var(--sl-color-accent-low);
+  }
+  to {
+    background-color: transparent;
+    box-shadow: 0 0 0 0.2em transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .is-card-origin {
+    animation: none;
+    background-color: var(--sl-color-accent-low);
+  }
+}
+
+/* K5: cards carried in from another page and held at the window's bottom
+   edge never leave it, so they would cover the page's last stretch — its
+   Next and Previous links. The page grows by their stack, so its end
+   scrolls clear of them (`card-manager.ts` sets the room). */
+@media screen {
+  body {
+    padding-block-end: var(--explico-carried-room, 0px);
+  }
+}
+
+/* S11: while a docked card reaches over the rail, the rail goes under the
+   card layer, so the card and its edge stay whole; the header covers both. */
+:root[data-card-over-rail] .right-sidebar {
+  z-index: calc(var(--sl-z-index-navbar) - 1);
+}
+
+:root[data-card-resizing],
+:root[data-card-resizing] * {
+  cursor: col-resize !important;
+  user-select: none;
+}
+
+.explico-side-switch {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
@@ -1422,20 +1586,20 @@ details.layout-part-has-open > summary > .group-label {
   cursor: pointer;
 }
 
-.explico-keep-left[hidden] {
+.explico-side-switch[hidden] {
   display: none;
 }
 
-.explico-keep-left:hover {
+.explico-side-switch:hover {
   color: var(--sl-color-text);
 }
 
-.explico-keep-left:focus-visible {
+.explico-side-switch:focus-visible {
   outline: 3px solid var(--sl-color-accent);
   outline-offset: 2px;
 }
 
-.explico-keep-left-switch {
+.explico-side-switch-knob {
   position: relative;
   flex: none;
   width: 1.75em;
@@ -1445,7 +1609,7 @@ details.layout-part-has-open > summary > .group-label {
   transition: background-color 100ms ease;
 }
 
-.explico-keep-left-switch::after {
+.explico-side-switch-knob::after {
   content: '';
   position: absolute;
   top: 0.125em;
@@ -1457,33 +1621,33 @@ details.layout-part-has-open > summary > .group-label {
   transition: transform 100ms ease;
 }
 
-.explico-keep-left[aria-pressed='true'] .explico-keep-left-switch {
+.explico-side-switch[aria-pressed='true'] .explico-side-switch-knob {
   background: var(--sl-color-accent);
 }
 
-.explico-keep-left[aria-pressed='true'] .explico-keep-left-switch::after {
+.explico-side-switch[aria-pressed='true'] .explico-side-switch-knob::after {
   transform: translateX(0.75em);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .explico-keep-left-switch,
-  .explico-keep-left-switch::after {
+  .explico-side-switch-knob,
+  .explico-side-switch-knob::after {
     transition: none;
   }
 }
 
 @media (forced-colors: active) {
-  .explico-keep-left-switch {
+  .explico-side-switch-knob {
     border: 1px solid ButtonText;
   }
 
-  .explico-keep-left[aria-pressed='true'] .explico-keep-left-switch {
+  .explico-side-switch[aria-pressed='true'] .explico-side-switch-knob {
     background: Highlight;
   }
 }
 
 @media print {
-  .explico-keep-left {
+  .explico-side-controls {
     display: none !important;
   }
 }
@@ -1538,14 +1702,6 @@ details.layout-part-has-open > summary > .group-label {
   overflow-wrap: anywhere;
 }
 
-.sl-markdown-content .citation-status {
-  padding-inline: 0.4em;
-  border: 1px solid var(--sl-color-gray-5);
-  border-radius: 999px;
-  font-size: var(--sl-text-xs);
-  text-transform: lowercase;
-}
-
 .sl-markdown-content .citation-backref {
   margin-inline-start: 0.15rem;
 }
@@ -1588,12 +1744,12 @@ details.layout-part-has-open > summary > .group-label {
 }
 
 /* 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
-   `.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. */
+   `.keyed-equation` with an `id="eq-<key>"`, a `data-eq-number`, its number
+   (`.keyed-equation__controls`, a focusable number link) and a "Copy LaTeX"
+   button on its bottom border. 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;
@@ -1628,23 +1784,32 @@ details.layout-part-has-open > summary > .group-label {
   transition: opacity 120ms ease-out;
 }
 
+/* Copy LaTeX, centred on the block's bottom border: the edge of its hover
+   highlight. `float-toolbar.ts` measures each equation and sets
+   `--eq-copy-inline-end`: under the number, or, in an equation too short
+   for the number's copy-link button between the two, slid left along the
+   border, clear of the number. It shows while the equation is hovered or
+   focused, and always on a touch screen. */
 .sl-markdown-content .keyed-equation__copy {
+  --eq-copy-size: 1.375rem;
+  position: absolute;
+  inset-block-end: calc(var(--eq-copy-size) / -2);
+  inset-inline-end: var(--eq-copy-inline-end, 1rem);
+  z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--eq-copy-size);
+  height: var(--eq-copy-size);
   padding: 0;
   border: 1px solid var(--sl-color-gray-5);
   border-radius: 999px;
-  color: var(--sl-color-gray-1);
-  background: transparent;
+  color: var(--sl-color-gray-2);
+  background: var(--sl-color-bg);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
   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;
+  opacity: 0;
   transition:
     opacity 120ms ease-out,
     border-color 120ms ease-out,
@@ -1652,8 +1817,8 @@ details.layout-part-has-open > summary > .group-label {
 }
 
 .sl-markdown-content .keyed-equation__copy svg {
-  width: 0.85rem;
-  height: 0.85rem;
+  width: 0.75rem;
+  height: 0.75rem;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.75;
@@ -1695,6 +1860,78 @@ details.layout-part-has-open > summary > .group-label {
   outline-offset: 2px;
 }
 
+/* The toolbar on a float's number (`float-toolbar.ts`): Pin and Dock just
+   above the number, Copy link just below it, none of them over it. The
+   script places each part against the number, inside the number's own
+   box; it shows only with a mouse, and never prints. */
+.float-toolbar {
+  display: contents;
+}
+
+.float-toolbar[hidden] {
+  display: none;
+}
+
+.float-toolbar__above,
+.float-toolbar__link {
+  position: absolute;
+  z-index: 4;
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.float-toolbar__button,
+.float-toolbar__link {
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  padding: 0;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 999px;
+  color: var(--sl-color-gray-2);
+  background: var(--sl-color-bg);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.float-toolbar__button {
+  display: inline-flex;
+}
+
+.float-toolbar__button:hover,
+.float-toolbar__button:focus-visible,
+.float-toolbar__link:hover,
+.float-toolbar__link:focus-visible {
+  border-color: var(--sl-color-accent);
+  color: var(--sl-color-text-accent);
+}
+
+.float-toolbar svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.float-toolbar__button svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.float-toolbar__link svg {
+  fill: currentColor;
+}
+
+@media print {
+  .float-toolbar {
+    display: none !important;
+  }
+}
+
 /* The click-to-copy gesture (`KeyedFloatEnhancer.astro`) works on any part of
    the box — including the reserved gutter between the equation and its
    number/button, not just the rendered `.katex-html` — that isn't a symbol
@@ -2020,7 +2257,11 @@ details.layout-part-has-open > summary > .group-label {
   gap: 0.25rem;
 }
 
+/* The line is at least as tall as its buttons (`.float-tool`'s height), so
+   the row never hangs below it — past a figure's body, or into a table's
+   header — even when a course hides the caption's text. */
 .sl-markdown-content .float-caption:has(> .float-tools > .float-tool:not([hidden])) {
+  min-block-size: 1.5rem;
   padding-inline-end: 2.25rem;
 }
 
@@ -2092,6 +2333,7 @@ details.layout-part-has-open > summary > .group-label {
   }
 
   .sl-markdown-content .float-caption:has(> .float-tools) {
+    min-block-size: auto;
     padding-inline-end: 0;
   }
 }
@@ -2105,6 +2347,8 @@ details.layout-part-has-open > summary > .group-label {
 }
 
 .sl-markdown-content .float-caption__number {
+  /* The room the chain icon used to keep before the short caption. */
+  margin-inline-end: 0.45em;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   color: var(--sl-color-text-accent);
@@ -2116,31 +2360,7 @@ details.layout-part-has-open > summary > .group-label {
   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 {
+.sl-markdown-content .float-caption__number:focus-visible {
   outline: 2px solid var(--sl-color-accent);
   outline-offset: 0.15rem;
 }
@@ -2628,12 +2848,14 @@ details.layout-part-has-open > summary > .group-label {
   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. */
+/* A narrow screen shows no section number, so the chain 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). There it is 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. A touch screen has no hover to
+   reveal it, so there it is always shown; a narrow window with a mouse
+   reveals it on hover, as a wide one does, instead of showing it on every
+   heading. 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;
@@ -2641,11 +2863,17 @@ details.layout-part-has-open > summary > .group-label {
 
   .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);
   }
 }
 
+@media screen and (width < 50em) and (hover: none) {
+  .sl-markdown-content .sl-heading-wrapper > .sl-anchor-link,
+  .sl-markdown-content .sl-heading-wrapper.sl-section-titlebar > .sl-anchor-link {
+    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
@@ -3102,7 +3330,7 @@ details.layout-part-has-open > summary > .group-label {
   }
 }
 
-/* Browser-native lesson printing. The print controller opens real native
+/* Browser-native page 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 {
@@ -3152,7 +3380,6 @@ details.layout-part-has-open > summary > .group-label {
   .keyed-table__pagination-links,
   .keyed-table__more-row,
   .sl-anchor-link,
-  .float-caption__anchor,
   .short-note__collapse,
   .assessment-actions,
   .assessment-chevron,
@@ -3163,6 +3390,18 @@ details.layout-part-has-open > summary > .group-label {
     display: none !important;
   }
 
+  /* Print is always light (above), so the splash hero prints its light image
+     whatever theme the reader is in; the dark one's pale strokes would vanish
+     on white paper. Starlight's own site logo does this with `print:hidden`
+     and `print:block`, but its hero does not. */
+  .hero > img.light\:sl-hidden {
+    display: none;
+  }
+
+  .hero > img.dark\:sl-hidden {
+    display: block;
+  }
+
   .main-frame,
   .main-pane,
   .content-panel,