explico 0.13.1 → 0.14.0

package/src/styles/global.css

@@ -1,5 +1,7 @@
 @import 'katex/dist/katex.min.css';
 @import './surfaces.css';
+@import './zones.css';
+@import './deck.css';
 
 :root {
   --sl-color-accent-low: #132f2a;
@@ -288,19 +290,31 @@ body {
 
 /* 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. */
+   spacing and the cards scale together. The steps are a geometric series,
+   each 2^(1/4) (about 1.19) times the one below, from 50% to 100%.
+   `--explico-text-scale` is the same choice as a bare number, for what is
+   drawn in px and so does not follow the root: a diagram, scaled as a whole
+   (`Diagram.astro`). 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='50'] {
+    --explico-text-scale: 0.5;
   }
 
-  :root[data-text-size='80'] {
-    font-size: 80%;
+  :root[data-text-size='59'] {
+    --explico-text-scale: 0.59;
   }
 
-  :root[data-text-size='70'] {
-    font-size: 70%;
+  :root[data-text-size='71'] {
+    --explico-text-scale: 0.71;
+  }
+
+  :root[data-text-size='84'] {
+    --explico-text-scale: 0.84;
+  }
+
+  :root[data-text-size] {
+    font-size: calc(var(--explico-text-scale, 1) * 100%);
   }
 }
 
@@ -594,8 +608,12 @@ a.explico-part-overview::before {
 /* 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 {
+   reads as a separate control that happens to share the line. The three
+   `summary` rules here are for a part's header, and `:not(.about-toggle)`
+   keeps them off the `[?]` About button, which the phone menu also holds:
+   unlayered, they beat its own styles and made it a square with the `?`
+   at its start. */
+.layout-navigation-content summary:not(.about-toggle) {
   justify-content: flex-start;
   gap: 0.25rem;
 }
@@ -645,6 +663,20 @@ details.layout-part-has-open > summary > .group-label {
   background: var(--sl-color-accent-low);
 }
 
+/* `»` and the Overview row open the same page, so pointing at one lights
+   both. The control is a sibling before the part's list, so the row is
+   reachable from it; a compact part's tile has its own hover style (below,
+   in the `min-width: 50rem` block). The open part page needs no lighting. */
+details.layout-part-has-open
+  > .layout-part-open:is(:hover, :focus-visible)
+  ~ ul
+  > li
+  > a.explico-part-overview:not([aria-current='page']) {
+  --explico-overview-gap: var(--ex-row-hover);
+  color: var(--sl-color-white);
+  background: var(--ex-row-hover);
+}
+
 @media print {
   .layout-part-open {
     display: none;
@@ -653,18 +685,21 @@ details.layout-part-has-open > summary > .group-label {
 
 /* 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. */
+   says which line the pointer is actually on. The fill is each rail's own
+   colour with a little ink in it (`--ex-row-hover`, `zones.css`), so it shows
+   on whatever colour the rail is: `gray-6` was the dark rail's own colour. */
 .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 {
+  --explico-overview-gap: var(--ex-row-hover);
   color: var(--sl-color-white);
-  background: var(--sl-color-gray-6);
+  background: var(--ex-row-hover);
 }
 
 /* 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 {
+.layout-navigation-content summary:not(.about-toggle) {
   border-radius: 0.25rem;
 }
 
@@ -677,9 +712,9 @@ details.layout-part-has-open > summary > .group-label {
   background: var(--sl-color-accent-low);
 }
 
-.layout-navigation-content summary:hover,
-.layout-navigation-content summary:focus-visible {
-  background: var(--sl-color-gray-6);
+.layout-navigation-content summary:not(.about-toggle):hover,
+.layout-navigation-content summary:not(.about-toggle):focus-visible {
+  background: var(--ex-row-hover);
 }
 
 .layout-page-sidebar-content a:hover,
@@ -722,6 +757,647 @@ details.layout-part-has-open > summary > .group-label {
   }
 }
 
+/* The reader's own marks (`page-marks.ts`, set by `LayoutSidebar.astro`): a
+   quiet ring beside a page they have not opened yet, an accent dot beside one
+   whose content changed since they last did. Both sit in the panel's margin
+   just past the row's end, out of the way of the title and the progress rail:
+   centred in the side padding (`--sl-sidebar-pad-x`, 1rem), so a mark takes no
+   room from a title and the marks line up in one column. */
+.layout-navigation-content {
+  --page-mark-size: 0.4375rem;
+}
+
+.layout-navigation-content li[data-page-mark] {
+  position: relative;
+}
+
+.layout-navigation-content li[data-page-mark]::after,
+.explico-page-marks-legend__item::before {
+  content: '';
+  box-sizing: border-box;
+  width: var(--page-mark-size);
+  height: var(--page-mark-size);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.layout-navigation-content li[data-page-mark]::after {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: calc(var(--page-mark-size) / -2 - 0.5rem);
+  transform: translateY(-50%);
+}
+
+.layout-navigation-content li[data-page-mark='unopened']::after,
+.explico-page-marks-legend__item[data-page-mark='unopened']::before {
+  border: 1.5px solid var(--sl-color-gray-4);
+}
+
+.layout-navigation-content li[data-page-mark='changed']::after,
+.explico-page-marks-legend__item[data-page-mark='changed']::before {
+  background: var(--sl-color-text-accent);
+}
+
+/* A closed part (the phone's menu) keeps its marks out of sight; its label
+   carries the strongest one inside it, a change over a page not yet opened. */
+.layout-navigation-content details[data-page-marks]:not([open]) > summary .group-label::after {
+  content: '';
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--page-mark-size);
+  height: var(--page-mark-size);
+  margin-inline-start: 0.45rem;
+  border: 1.5px solid var(--sl-color-gray-4);
+  border-radius: 50%;
+  vertical-align: 0.1em;
+}
+
+.layout-navigation-content details[data-page-marks~='changed']:not([open]) > summary .group-label::after {
+  border: 0;
+  background: var(--sl-color-text-accent);
+}
+
+/* A lesson's row (`sidebar-editions.ts`): it opens the lead edition under
+   the lesson's title, and the other edition is an icon at its end, as `»`
+   ends a part's header. The icon lies over the end of the row's own link,
+   which keeps room for it, so the row's hover and open-page fill run under
+   the icon, and pointing at the icon lights the icon alone. The icon's text
+   is its accessible name ("Slides: …"), shown only as the tooltip the
+   panel's script places; a compact part makes the icon a tile (below). */
+.layout-navigation-content li[data-editions='pair'] {
+  position: relative;
+}
+
+.layout-navigation-content li[data-editions='pair'] > a:first-child {
+  padding-inline-end: 1.95rem;
+}
+
+/* Centred by its margins, not a transform: a transformed icon would hold its
+   tooltip's `position: fixed` inside itself, where the panel clips it. */
+.layout-navigation-content li > a.layout-edition-other {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0.25rem;
+  display: grid;
+  place-items: center;
+  width: 1.4rem;
+  height: 1.4rem;
+  margin-block: auto;
+  border-radius: 0.25rem;
+  padding: 0;
+  color: var(--sl-color-gray-3);
+  background: transparent;
+}
+
+/* With a part's deck open, the chapter whose section is on screen lights
+   its section's link (`aria-current="location"`, `LayoutSidebar.astro`) as
+   the open page lights its own: as a row's lead, as the icon, as a tile.
+   The chapter's own link beside it stays unlit. */
+.layout-navigation-content li > a[data-deck-section][aria-current='location']:not(.layout-edition-other) {
+  font-weight: 600;
+  color: var(--sl-color-text-invert);
+  background-color: var(--sl-color-text-accent);
+}
+
+/* On the open page's row, the icon reads against the row's accent fill. */
+.layout-navigation-content
+  li[data-editions='pair']
+  > :is(a[aria-current='page'], a[data-deck-section][aria-current='location'])
+  + a.layout-edition-other:not(:hover, :focus-visible) {
+  color: var(--sl-color-text-invert);
+}
+
+.layout-navigation-content li > a.layout-edition-other:hover,
+.layout-navigation-content li > a.layout-edition-other:focus-visible {
+  color: var(--sl-color-text-accent);
+  background: var(--sl-color-accent-low);
+}
+
+.layout-navigation-content li > a.layout-edition-other:is([aria-current='page'], [data-deck-section][aria-current='location']) {
+  color: var(--sl-color-text-invert);
+  background: var(--sl-color-text-accent);
+}
+
+/* Overview as the icon at its part's deck's row end: its two sheets, the
+   sliver between them the icon's own ground. */
+.layout-navigation-content li > a.layout-edition-other.explico-part-overview:is(:hover, :focus-visible) {
+  --explico-overview-gap: var(--sl-color-accent-low);
+}
+
+.layout-navigation-content
+  li[data-editions='pair']
+  > a[aria-current='page']
+  + a.layout-edition-other.explico-part-overview:not(:hover, :focus-visible) {
+  --explico-overview-gap: var(--sl-color-text-accent);
+}
+
+/* A link's second line (`sidebar-editions.ts`), inside its name's `<span>`:
+   a tooltip's quieter line (below), never a labelled row's text. */
+.layout-edition-detail {
+  display: none;
+}
+
+.layout-navigation-content li > a.layout-edition-other > span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The other edition's own mark, on its icon's corner as on a compact tile,
+   ringed in the panel's colour. An element of its own, `i.layout-edition-mark`,
+   since the icon's `::before` and `::after` draw its glyph. */
+.layout-edition-mark {
+  display: none;
+}
+
+.layout-navigation-content a.layout-edition-other[data-page-mark] > .layout-edition-mark {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  box-sizing: border-box;
+  inset-block-start: -0.15rem;
+  inset-inline-end: -0.15rem;
+  width: var(--page-mark-size);
+  height: var(--page-mark-size);
+  margin: 0;
+  border-radius: 50%;
+  background-color: var(--sl-color-bg-sidebar);
+  box-shadow: 0 0 0 2px var(--sl-color-bg-sidebar);
+  pointer-events: none;
+}
+
+.layout-navigation-content a.layout-edition-other[data-page-mark='unopened'] > .layout-edition-mark {
+  border: 1.5px solid var(--sl-color-gray-4);
+}
+
+.layout-navigation-content a.layout-edition-other[data-page-mark='changed'] > .layout-edition-mark {
+  background-color: var(--sl-color-text-accent);
+}
+
+/* On the open page's row the mark lies on the accent fill: drawn in the
+   fill's ink, as the icon is, ringed in the fill. */
+.layout-navigation-content
+  li[data-editions='pair']
+  > :is(a[aria-current='page'], a[data-deck-section][aria-current='location'])
+  + a.layout-edition-other
+  > .layout-edition-mark {
+  border-color: var(--sl-color-text-invert);
+  background-color: var(--sl-color-text-accent);
+  box-shadow: 0 0 0 2px var(--sl-color-text-accent);
+}
+
+.layout-navigation-content
+  li[data-editions='pair']
+  > :is(a[aria-current='page'], a[data-deck-section][aria-current='location'])
+  + a.layout-edition-other[data-page-mark='changed']
+  > .layout-edition-mark {
+  background-color: var(--sl-color-text-invert);
+}
+
+/* A chapter's glyph: a sheet with lines of text on it, a mask over the
+   link's own colour, so it takes the link's colour in every state. A part is
+   two plain sheets (`a.explico-part-overview`), a deck a slide frame
+   (`deck.css`). */
+:root {
+  --explico-chapter-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2015'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%3E%3Crect%20x='0.75'%20y='0.75'%20width='10.5'%20height='13.5'%20rx='1.6'%20stroke-width='1.5'/%3E%3Cpath%20d='M3.4%204.7h5.2M3.4%207.5h5.2M3.4%2010.3h3.2'%20stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+/* A lesson that is only a chapter while slides lead carries the chapter's
+   sheet before its title, as a slides-first lesson carries the deck's
+   (`deck.css`) while chapters lead: the exception is marked, nothing else.
+   The other edition's icon is the same sheet. A compact tile is a sheet
+   already. */
+.sidebar-content a.explico-chapter-lesson,
+.layout-navigation-content a.explico-chapter-lesson {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+:is(a.explico-chapter-lesson, a.layout-edition-other[data-edition='chapter'])::before {
+  content: '';
+  flex: none;
+  width: 0.62rem;
+  height: 0.78rem;
+  background: currentColor;
+  -webkit-mask: var(--explico-chapter-glyph) center / contain no-repeat;
+  mask: var(--explico-chapter-glyph) center / contain no-repeat;
+}
+
+/* Forced colours paint a background as the canvas: a masked glyph keeps its
+   link's colour, the system's link colour then. */
+@media (forced-colors: active) {
+  :is(a.explico-chapter-lesson, a.layout-edition-other[data-edition='chapter'])::before {
+    forced-color-adjust: none;
+    background: currentColor;
+  }
+}
+
+/* The slides column: a contents list's decks (`CourseContents.astro`,
+   `PartOverview.astro`, the cells from `deck-lane.ts`). When the course has
+   a deck, each title starts with the glyph of what it opens, a part's
+   heading with Overview's two sheets (`--explico-part-glyph`, the sidebar's
+   bordered sheets as a mask), and every row ends in one 1.7rem column per
+   lane. A lesson's own deck is a tile on its title line; a part's deck is a
+   bar, one cell per row it covers, joined from the first covered title to
+   the last. A list sets how its rows meet: `--deck-lane-rows`, the grid
+   rows a bar's cell spans; `--deck-lane-down`, from a row's content to the
+   line under it; `--deck-lane-up`, from that line to the next row's
+   content. A cell reaches the line by negative margins, so the pieces join
+   with no `subgrid`, and the line shows faintly across the bar. */
+:root {
+  --explico-part-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2016'%3E%3Cg%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.6%200.75h7.9a1.75%201.75%200%200%201%201.75%201.75v9.6'/%3E%3Crect%20x='0.75'%20y='3.25'%20width='9.6'%20height='12'%20rx='1.6'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.contents-glyph {
+  display: inline-block;
+  margin-inline-end: 0.45em;
+  vertical-align: -0.06em;
+  background: currentColor;
+  -webkit-mask: var(--contents-glyph) center / contain no-repeat;
+  mask: var(--contents-glyph) center / contain no-repeat;
+}
+
+.contents-glyph--chapter {
+  --contents-glyph: var(--explico-chapter-glyph);
+  width: 0.62em;
+  height: 0.78em;
+}
+
+.contents-glyph--deck {
+  --contents-glyph: var(--explico-deck-glyph);
+  width: 1em;
+  height: 0.625em;
+  vertical-align: 0.02em;
+}
+
+.contents-glyph--part-deck {
+  --contents-glyph: var(--explico-part-deck-glyph);
+  width: 1em;
+  height: 0.75em;
+}
+
+.contents-glyph--part {
+  --contents-glyph: var(--explico-part-glyph);
+  width: 0.76em;
+  height: 0.87em;
+  margin-inline-end: 0.35em;
+}
+
+.deck-lane {
+  --deck-lane-line: 1.75rem;
+  --deck-lane-join: color-mix(in srgb, var(--sl-color-text-accent) 30%, transparent);
+  position: relative;
+  grid-row: 1;
+  align-self: stretch;
+  min-height: var(--deck-lane-line);
+  border: 1px solid var(--sl-color-text-accent);
+  border-radius: 0.4rem;
+  color: var(--sl-color-text-accent);
+  background: var(--sl-color-accent-low);
+  text-decoration: none;
+}
+
+/* The glyph sits on the row's title line, wherever the cell starts. */
+.deck-lane::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: calc(var(--deck-lane-lead, 0px) - 1px);
+  height: var(--deck-lane-line);
+}
+
+.deck-lane--tile {
+  align-self: start;
+  height: var(--deck-lane-line);
+}
+
+.deck-lane--start,
+.deck-lane--middle {
+  grid-row: 1 / span var(--deck-lane-rows, 2);
+}
+
+.deck-lane--start {
+  margin-block-end: calc(-1 * var(--deck-lane-down, 0px));
+  border-block-end: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.deck-lane--middle,
+.deck-lane--end {
+  --deck-lane-lead: var(--deck-lane-up, 0px);
+  margin-block-start: calc(-1 * var(--deck-lane-up, 0px));
+  border-block-start-color: var(--deck-lane-join);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.deck-lane--middle {
+  margin-block-end: calc(-1 * var(--deck-lane-down, 0px));
+  border-block-end: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.deck-lane--deck::before,
+.deck-lane--part-deck::before,
+.deck-lane:is(:hover, :focus-visible)::before {
+  background: currentColor;
+  -webkit-mask: var(--explico-deck-glyph) center / 1rem 0.625rem no-repeat;
+  mask: var(--explico-deck-glyph) center / 1rem 0.625rem no-repeat;
+}
+
+.deck-lane--part-deck::before,
+.deck-lane--part-deck:is(:hover, :focus-visible)::before {
+  -webkit-mask: var(--explico-part-deck-glyph) center / 1.05rem 0.79rem no-repeat;
+  mask: var(--explico-part-deck-glyph) center / 1.05rem 0.79rem no-repeat;
+}
+
+/* Under the pointer or focus a cell fills, and one with no glyph of its own
+   shows the deck's play mark. */
+.deck-lane:is(:hover, :focus-visible) {
+  color: var(--sl-color-text-invert);
+  background: var(--sl-color-text-accent);
+}
+
+.deck-lane:focus-visible {
+  outline: 2px solid var(--sl-color-text-accent);
+  outline-offset: 2px;
+}
+
+@media (forced-colors: active) {
+  .contents-glyph,
+  :is(.deck-lane--deck, .deck-lane--part-deck, .deck-lane:is(:hover, :focus-visible))::before {
+    forced-color-adjust: none;
+    background: currentColor;
+  }
+}
+
+/* The reading-memory question (`ReadingMemoryNotice.astro`): a card at the
+   bottom of the window, over nothing the reader needs, until they answer.
+   Its two answers are the same size and weight: neither is the easy one.
+   Above the explanation cards' layer (`--sl-z-index-navbar`), below the skip
+   link; a phone's menu is a popover in the top layer, above it. */
+.explico-reading-notice {
+  position: fixed;
+  z-index: calc(var(--sl-z-index-navbar) + 2);
+  inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
+  inset-inline-start: 1rem;
+  width: min(25rem, calc(100vw - 2rem));
+  display: grid;
+  gap: 0.65rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.6rem;
+  padding: 0.9rem 1rem;
+  color: var(--sl-color-text);
+  background: var(--sl-color-bg-nav);
+  box-shadow: var(--sl-shadow-lg);
+  font-size: var(--sl-text-sm);
+  line-height: 1.45;
+}
+
+.explico-reading-notice[hidden] {
+  display: none;
+}
+
+.explico-reading-notice p {
+  margin: 0;
+}
+
+.explico-reading-notice strong {
+  display: block;
+  margin-block-end: 0.2rem;
+  font-size: var(--sl-text-base);
+}
+
+.explico-reading-notice__actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.explico-reading-notice__actions button {
+  border: 1px solid var(--sl-color-text-accent);
+  border-radius: 0.4rem;
+  padding: 0.4rem 0.6rem;
+  color: var(--sl-color-text-accent);
+  background: transparent;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.explico-reading-notice__actions button:hover,
+.explico-reading-notice__actions button:focus-visible {
+  background: var(--sl-color-accent-low);
+}
+
+.explico-reading-notice__actions button:focus-visible {
+  outline: 2px solid var(--sl-color-accent-high);
+  outline-offset: 2px;
+}
+
+.explico-reading-notice__note {
+  color: var(--sl-color-gray-3);
+  font-size: var(--sl-text-xs);
+}
+
+@media not all and (min-width: 50rem) {
+  .explico-reading-notice {
+    inset-inline: 0;
+    inset-block-end: 0;
+    width: auto;
+    border-inline: 0;
+    border-block-end: 0;
+    border-radius: 0.75rem 0.75rem 0 0;
+    padding-block-end: calc(0.9rem + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+@media print {
+  .explico-reading-notice {
+    display: none;
+  }
+}
+
+/* The panel's foot, under the chapter list: how a lesson's row opens
+   (`sidebar-editions.ts`), then what the marks on screen mean. The panel's
+   scripts fill it; empty, it takes no room. */
+.explico-sidebar-foot {
+  display: grid;
+  gap: 0.6rem;
+  margin: 1rem 0 0.5rem;
+  border-top: 1px solid var(--sl-color-hairline-light);
+  padding: 0.6rem var(--sl-sidebar-item-padding-inline, 0.5rem) 0;
+  color: var(--sl-color-gray-3);
+  font-size: var(--sl-text-xs);
+  line-height: 1.4;
+}
+
+.explico-sidebar-foot:empty {
+  display: none;
+}
+
+/* "Lessons open as" Chapter | Slides, a segmented pair of radios, and "List
+   the other edition too", a checkbox. The radios stay native, laid
+   transparent over their segments, so the keyboard, a screen reader and a
+   click all reach the real control. The legend is floated so that it is a
+   flex item beside the segments, not drawn on the fieldset's border. */
+.explico-sidebar-editions {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.explico-sidebar-editions__lead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem 0.5rem;
+  min-inline-size: 0;
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+
+.explico-sidebar-editions__lead > legend {
+  float: left;
+  padding: 0;
+}
+
+.explico-sidebar-editions__segments {
+  display: inline-flex;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.3rem;
+  overflow: hidden;
+}
+
+.explico-sidebar-editions__segment {
+  position: relative;
+  display: inline-flex;
+}
+
+.explico-sidebar-editions__segment + .explico-sidebar-editions__segment {
+  border-inline-start: 1px solid var(--sl-color-gray-5);
+}
+
+.explico-sidebar-editions__segment > input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.explico-sidebar-editions__segment > span {
+  padding: 0.1rem 0.55rem;
+  color: var(--sl-color-gray-2);
+}
+
+.explico-sidebar-editions__segment > input:not(:checked):hover + span {
+  color: var(--sl-color-text-accent);
+  background: var(--sl-color-accent-low);
+}
+
+.explico-sidebar-editions__segment > input:checked + span {
+  color: var(--sl-color-text-invert);
+  background: var(--sl-color-text-accent);
+  font-weight: 600;
+}
+
+.explico-sidebar-editions__segment > input:focus-visible + span {
+  outline: 2px solid var(--sl-color-accent-high);
+  outline-offset: -2px;
+}
+
+.explico-sidebar-editions__other {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  justify-self: start;
+  cursor: pointer;
+}
+
+.explico-sidebar-editions__other > input {
+  margin: 0;
+  accent-color: var(--sl-color-text-accent);
+  cursor: pointer;
+}
+
+/* What the marks on screen mean, and the two ways to reset them, last in the
+   panel's foot. The line stays while the reader's record is kept, with no
+   mark on screen too, so a reset can always be undone; what an action did is
+   said in the line's own status, under its buttons. */
+.explico-page-marks-legend {
+  min-width: 0;
+}
+
+.explico-page-marks-legend__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.85rem;
+}
+
+.explico-page-marks-legend__item:not([hidden]) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.explico-page-marks-legend__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-inline-start: auto;
+}
+
+.explico-page-marks-legend__action {
+  border: 0;
+  border-radius: 0.25rem;
+  padding: 0.1rem 0.3rem;
+  color: var(--sl-color-text-accent);
+  background: none;
+  font: inherit;
+  cursor: pointer;
+}
+
+.explico-page-marks-legend__action:not([aria-disabled='true']):hover,
+.explico-page-marks-legend__action:focus-visible {
+  background: var(--sl-color-accent-low);
+}
+
+/* Out of use (nothing to change), in its place: the same muted grey as the
+   legend's text, so it reads as an option that does nothing now. */
+.explico-page-marks-legend__action[aria-disabled='true'] {
+  color: var(--sl-color-gray-3);
+  cursor: default;
+}
+
+.explico-page-marks-legend__status {
+  margin: 0;
+}
+
+.explico-page-marks-legend__status:not(:empty) {
+  margin-block-start: 0.35rem;
+}
+
+@media print {
+  .explico-sidebar-foot {
+    display: none;
+  }
+
+  .layout-navigation-content li[data-page-mark]::after {
+    content: none;
+  }
+}
+
 @media (min-width: 50rem) {
   :root {
     --layout-edge-rail-width: 2.5rem;
@@ -857,18 +1533,30 @@ details.layout-part-has-open > summary > .group-label {
     background: var(--sl-color-bg-sidebar);
   }
 
+  /* A chapter is a sheet with lines of text; a part (below) two plain
+     sheets, and a deck a slide frame with a play mark (`deck.css`). */
   .layout-compact-sidebar
     details[data-compact]
     > ul:not(.top-level)
     > li
     > a::before {
     content: '';
-    width: 0.65rem;
-    height: 0.78rem;
-    border: 1.5px solid currentColor;
-    border-radius: 0.13rem;
-    box-shadow: 0.18rem 0.18rem 0 -0.1rem var(--sl-color-bg-sidebar),
-      0.18rem 0.18rem 0 0 currentColor;
+    width: 0.74rem;
+    height: 0.94rem;
+    background: currentColor;
+    -webkit-mask: var(--explico-chapter-glyph) center / contain no-repeat;
+    mask: var(--explico-chapter-glyph) center / contain no-repeat;
+  }
+
+  @media (forced-colors: active) {
+    .layout-compact-sidebar
+      details[data-compact]
+      > ul:not(.top-level)
+      > li
+      > a:not(.explico-part-overview)::before {
+      forced-color-adjust: none;
+      background: currentColor;
+    }
   }
 
   .layout-compact-sidebar
@@ -881,6 +1569,21 @@ details.layout-part-has-open > summary > .group-label {
     > ul:not(.top-level)
     > li
     > a:focus-visible {
+    --explico-overview-gap: var(--sl-color-accent-low);
+    border-color: var(--sl-color-accent);
+    color: var(--sl-color-text-accent);
+    background: var(--sl-color-accent-low);
+  }
+
+  /* `»` lights the compact part's Overview tile as a pointer on the tile
+     would (see the expanded row's rule beside `.layout-part-open`). */
+  .layout-compact-sidebar
+    details[data-compact].layout-part-has-open
+    > .layout-part-open:is(:hover, :focus-visible)
+    ~ ul:not(.top-level)
+    > li
+    > a.explico-part-overview:not([aria-current='page']) {
+    --explico-overview-gap: var(--sl-color-accent-low);
     border-color: var(--sl-color-accent);
     color: var(--sl-color-text-accent);
     background: var(--sl-color-accent-low);
@@ -890,7 +1593,7 @@ details.layout-part-has-open > summary > .group-label {
     details[data-compact]
     > ul:not(.top-level)
     > li
-    > a[aria-current='page'] {
+    > a:is([aria-current='page'], [data-deck-section][aria-current='location']) {
     color: var(--sl-color-text-invert);
     background: var(--sl-color-text-accent);
   }
@@ -900,7 +1603,8 @@ details.layout-part-has-open > summary > .group-label {
     > ul:not(.top-level)
     > li
     > a
-    > span {
+    > span,
+  .layout-navigation-content li > a.layout-edition-other[data-tooltip-open] > span {
     position: absolute;
     z-index: 2;
     inset-block-start: 50%;
@@ -929,11 +1633,28 @@ details.layout-part-has-open > summary > .group-label {
     > ul:not(.top-level)
     > li
     > a:is(:hover, :focus-visible)
-    > span {
+    > span,
+  .layout-navigation-content li > a.layout-edition-other[data-tooltip-open] > span {
     opacity: 1;
     transform: translateY(-50%) translateX(0);
   }
 
+  /* The row's icon names itself out of sight (above) until its tooltip
+     shows, and as a compact tile it is a tooltip like any other. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li
+    > a.layout-edition-other
+    > span,
+  .layout-navigation-content li > a.layout-edition-other[data-tooltip-open] > span {
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+
   /* 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
@@ -948,7 +1669,8 @@ details.layout-part-has-open > summary > .group-label {
     > ul:not(.top-level)
     > li
     > a[data-tooltip-open]
-    > span {
+    > span,
+  .layout-navigation-content li > a.layout-edition-other[data-tooltip-open] > span {
     position: fixed;
     z-index: calc(var(--sl-z-index-menu) + 2);
     inset-inline: auto;
@@ -986,7 +1708,16 @@ details.layout-part-has-open > summary > .group-label {
     > ul:not(.top-level)
     > li
     > a.explico-part-overview::before {
+    width: 0.65rem;
+    height: 0.78rem;
+    border: 1.5px solid currentColor;
+    border-radius: 0.13rem;
     background: currentColor;
+    -webkit-mask: none;
+    mask: none;
+    box-shadow:
+      0.18rem 0.18rem 0 -0.1rem var(--explico-overview-gap),
+      0.18rem 0.18rem 0 0 currentColor;
   }
 
   /* On the part's own page the tile is already accent-filled, so filled
@@ -998,6 +1729,7 @@ details.layout-part-has-open > summary > .group-label {
     > ul:not(.top-level)
     > li
     > a.explico-part-overview[aria-current='page'] {
+    --explico-overview-gap: var(--sl-color-text-accent);
     color: var(--sl-color-text-invert);
     border-color: var(--sl-color-text-accent);
   }
@@ -1017,10 +1749,209 @@ details.layout-part-has-open > summary > .group-label {
     > ul:not(.top-level)
     > li[data-covered]
     > a:not([aria-current='page']) {
+    --explico-overview-gap: var(--sl-color-accent-low);
     border-color: var(--sl-color-accent-low);
     background: var(--sl-color-accent-low);
   }
 
+  /* A lesson's row in a compact part (`sidebar-editions.ts`): its two
+     links are two tiles in one item, the lead first, joined as a chapter's
+     tile and its deck's are without the script (`deck.css`). The second
+     tile lies over the first's last pixel, its own start border clear, so
+     the line between them is the first tile's border, lit with whichever
+     tile is lit (not on a covered pair, which keeps its tint), and the open
+     page's tile is outlined in accent. The item says it is a pair: no
+     `:has()`. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair'] {
+    display: flex;
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair']
+    > a:first-child {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair']
+    > a.layout-edition-other {
+    inset: auto;
+    margin-block: 0;
+    margin-inline-start: -1px;
+    border-inline-start-color: transparent;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    background-clip: padding-box;
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair']:not([data-covered])
+    > a.layout-edition-other:is(:hover, :focus-visible) {
+    border-inline-start-color: var(--sl-color-accent);
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair']
+    > a:is([aria-current='page'], [data-deck-section][aria-current='location']) {
+    border-color: var(--sl-color-text-accent);
+  }
+
+  /* A tile keeps its own colour beside an open page's tile; the row's icon
+     turned to the accent fill's ink only where the fill runs under it. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair']
+    > :is(a[aria-current='page'], a[data-deck-section][aria-current='location'])
+    + a.layout-edition-other:not(:hover, :focus-visible) {
+    color: var(--sl-color-gray-3);
+  }
+
+  /* A compact tile has no row end: the reader's mark (`page-marks.ts`) sits
+     on its corner, as a badge on an icon does, ringed in the panel's colour
+     so it reads against the tile's border. The tile keeps its size, and the
+     tooltip names the mark under the title. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-page-mark]::after {
+    z-index: 1;
+    inset-block-start: -0.15rem;
+    inset-inline-end: -0.15rem;
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: var(--sl-color-bg-sidebar);
+    box-shadow: 0 0 0 2px var(--sl-color-bg-sidebar);
+    transform: none;
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-page-mark='changed']::after {
+    background-color: var(--sl-color-text-accent);
+  }
+
+  /* In a pair, the row's own mark is on its own tile's corner, where the
+     two tiles meet; the second tile carries its own, as the row's icon
+     does (`.layout-edition-mark`), at a tile's size. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair'][data-page-mark]::after {
+    inset-inline-end: calc(1.75rem - 1px - 0.15rem);
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li
+    > a.layout-edition-other
+    > .layout-edition-mark {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  /* A tile's mark is on the panel, never on its neighbour's fill. */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair']
+    > :is(a[aria-current='page'], a[data-deck-section][aria-current='location'])
+    + a.layout-edition-other[data-page-mark='unopened']
+    > .layout-edition-mark {
+    border-color: var(--sl-color-gray-4);
+    background-color: var(--sl-color-bg-sidebar);
+    box-shadow: 0 0 0 2px var(--sl-color-bg-sidebar);
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair']
+    > :is(a[aria-current='page'], a[data-deck-section][aria-current='location'])
+    + a.layout-edition-other[data-page-mark='changed']
+    > .layout-edition-mark {
+    background-color: var(--sl-color-text-accent);
+    box-shadow: 0 0 0 2px var(--sl-color-bg-sidebar);
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-page-mark]
+    > a:not(.layout-edition-other)
+    > span::after,
+  .layout-navigation-content li > a.layout-edition-other[data-page-mark] > span::after {
+    display: block;
+    color: var(--sl-color-gray-3);
+    font-weight: 400;
+  }
+
+  /* A link's second line where its name is a tooltip: a part's deck's
+     chapters and slides, a section's slides (`sidebar-editions.ts`). */
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li
+    > a
+    > span
+    > .layout-edition-detail,
+  .layout-navigation-content li > a.layout-edition-other > span > .layout-edition-detail {
+    display: block;
+    color: var(--sl-color-gray-3);
+    font-size: inherit;
+    font-weight: 400;
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-page-mark='unopened']
+    > a:not(.layout-edition-other)
+    > span::after,
+  .layout-navigation-content li > a.layout-edition-other[data-page-mark='unopened'] > span::after {
+    content: 'Not opened yet' / '';
+  }
+
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-page-mark='changed']
+    > a:not(.layout-edition-other)
+    > span::after,
+  .layout-navigation-content li > a.layout-edition-other[data-page-mark='changed'] > span::after {
+    content: 'Changed since you last opened it' / '';
+  }
+
+  /* The panel folded away to its edge: the restore control says that a
+     page changed since the reader opened it. Pages not yet opened do not
+     claim it; on a first visit that would be every page. */
+  .layout-navigation-panel[data-page-marks~='changed']
+    .layout-navigation-toggle[aria-expanded='false']::after {
+    content: '';
+    position: absolute;
+    inset-block-start: -0.2rem;
+    inset-inline-end: -0.2rem;
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: 50%;
+    background: var(--sl-color-text-accent);
+    box-shadow: 0 0 0 2px var(--sl-color-bg-nav);
+  }
+
   .layout-navigation-toggle {
     position: fixed;
     z-index: calc(var(--sl-z-index-menu) + 1);
@@ -1202,7 +2133,7 @@ details.layout-part-has-open > summary > .group-label {
   .right-sidebar {
     width: max-content;
     max-width: 80ch;
-    background-color: var(--sl-color-bg);
+    background-color: var(--ex-zone-toc);
     /* 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