explico 0.11.1 → 0.13.0

package/src/components/card-manager.ts

@@ -25,7 +25,12 @@
  * - a card's grip drags it anywhere between the sidebars, or into the side
  *   column, and its arrow keys move it (`./card-drag.ts`);
  * - the kept cards are remembered when the page is left and come back when
- *   the reader does, even after a browser restart (`./card-memory.ts`).
+ *   the reader does, even after a browser restart (`./card-memory.ts`);
+ * - with "Carry cards" on, a kept card stays on screen, held at the window's
+ *   top or bottom edge once its place scrolls past it (`heldAt`,
+ *   `./card-placement.ts`, rules K2–K4), and comes along to every page of
+ *   the course: attached to its trigger again on its own page, rebuilt from
+ *   that page anywhere else (`./card-carry.ts`, K5).
  *
  * The registry's rules are pure functions over plain `CardState` records
  * (`escapeTarget`, `chainOf`, `closedByOpening`, …) so `tests/unit/` can check
@@ -39,7 +44,6 @@ import {
   movedAt,
   movedSpot,
   nudgeSpot,
-  sidebarsBetween,
   type CardDrag,
   type DragHost,
   type MovedSpot,
@@ -51,38 +55,78 @@ import {
   writeRememberedCards,
   type RememberedCard,
 } from './card-memory';
+import {
+  capturePicture,
+  carriedKeyOf,
+  decodeCarried,
+  encodeCarried,
+  forgetCarried,
+  openedAtText,
+  readCardConfig,
+  readCarried,
+  readCarry,
+  restorePicture,
+  sectionPlace,
+  stashOpenedAt,
+  takeOpenedAt,
+  writeCarried,
+  writeCarry,
+  type CarriedCard,
+  type CarriedSet,
+  type OpenedAt,
+} from './card-carry';
+import { isThisPage, pageTitleOf } from './card-fetch';
+import { wireJumpArrow } from './card-jump';
+import { readableText } from './readable-text';
+import { animatedScrollIntoView } from './scroll-animation';
 import {
   anchoredSpot,
   articleColumn,
   cardLayer,
+  heldAt,
   moveTo,
   placeElement,
   reanchorElement,
   scrollContainersOf,
   watchCardLayout,
   type CardAnchor,
+  type Held,
+  type HoldCard,
+  type HoldEdge,
   type SideSpot,
 } from './card-placement';
 import {
   articleContainers,
   articleLeft,
+  closedRoom,
   columnLeft,
-  createKeepLeftToggle,
+  createSideControls,
   headerBottom,
   layoutColumn,
   lineTopOf,
   measureSide,
+  offeredWidths,
+  railLeftEdge,
   readKeepLeft,
+  readSideWidth,
+  readSideWidthOffered,
   remToPx,
   roomAt,
   sideColumn,
+  sideWidthPixels,
+  sidebarsBetween,
   slideArticle,
+  SIDE_WIDTH_OPTIONS,
   writeKeepLeft,
+  writeSideWidth,
+  writeSideWidthOffered,
   type ColumnEntry,
-  type KeepLeftToggle,
   type SideColumn,
+  type SideControls,
+  type SideControlsState,
   type SideMeasure,
   type SideOptions,
+  type SideWidthPreset,
 } from './card-side';
 import { startTrip, type Box, type Point, type Trip } from './card-travel';
 
@@ -111,6 +155,8 @@ export const CARD_CONSTANTS = {
   travelTripMaxMs: 2500,
   /** C8: how long a kept card flashes (ms). */
   flashMs: 500,
+  /** K7: how long the trigger an "Opened at" link lands on stays lit (ms). */
+  originFlashMs: 1200,
   /** S1: the side column's gaps to the article and to the rail (px). */
   sideGap: 16,
   /** S1: the side card's narrowest and widest. */
@@ -261,6 +307,34 @@ export interface CardSource {
   render(item: string, trigger: HTMLElement): HTMLElement | null | Promise<HTMLElement | null>;
   /** After any of this layer's cards opens, closes or changes mode: the open items. */
   onChange?(open: ReadonlyMap<string, CardMode>): void;
+  /**
+   * The item's own element on this page, which a card may hang from as from
+   * a trigger (`keepCardFor`): a float's number, for its toolbar's Pin and
+   * Dock. It is no trigger: hovering or clicking it opens nothing.
+   */
+  ownAnchor?(item: string): HTMLElement | null;
+  /**
+   * K5: the card for `item`, which a trigger on `page` opened, built for
+   * another page from `page`, fetched (`./card-fetch.ts`). Links in it go to
+   * `page`. Without it, the layer's cards do not travel.
+   */
+  build?(item: string, page: string): HTMLElement | null | Promise<HTMLElement | null>;
+  /**
+   * K5: `item`'s name on another page, when its own name means something only
+   * on `page`: a citation's number, a reference to `page`'s own equation. The
+   * card's key there is `layer:awayItem`. Default: `item` itself.
+   */
+  awayItem?(item: string, page: string): string;
+  /**
+   * D4, K6: the glyph a trigger shows, comparable across pages (a notation
+   * entry's LaTeX), or `null`. A card from another page for a symbol of
+   * that page's own (`data-card-scope="local"`, its glyph in
+   * `data-card-glyph`) points at a trigger with its glyph with a dashed
+   * arrow: the same letters, defined elsewhere.
+   */
+  glyphOf?(trigger: HTMLElement): string | null;
+  /** D4: every trigger on the page outside the cards whose glyph is `glyph`. */
+  lookalikes?(glyph: string): HTMLElement[];
 }
 
 let shellSerial = 0;
@@ -283,6 +357,16 @@ export function cloneCardShell(template: HTMLTemplateElement): HTMLElement | nul
 // The manager.
 // ---------------------------------------------------------------------------
 
+/** K5: a card carried here from another page, where its trigger is. */
+interface Away {
+  /** The carried card as the set names it: its page, its item there, its occurrence, its place there. */
+  readonly saved: CarriedCard;
+  /** K2: the edge it is held at here. */
+  edge: HoldEdge;
+  /** Its left against the article column's (px). */
+  dx: number;
+}
+
 interface CardRecord extends CardState {
   readonly key: string;
   readonly item: string;
@@ -301,6 +385,21 @@ interface CardRecord extends CardState {
   dropAt: Point | null;
   /** S2, D3: a docked card's top minus its trigger's line top; a drop sets its own. */
   sideDy: number;
+  /** S11: a docked card's own width, from its edge; `null` takes the column's. */
+  width: number | null;
+  /** K2: where the card is held at the window's edge, while it is. */
+  held: Held | null;
+  /** K2: the place the layout gave it with the page, kept while it is held. */
+  natural: { readonly left: string; readonly top: string; readonly maxHeight: string } | null;
+  /** K3: its height whole and its header row's, measured while it shows whole. */
+  fullHeight: number;
+  headerHeight: number;
+  /** K3: the lowest-ranked held card collapses first: its order, renewed when the reader expands it. */
+  rank: number;
+  /** K5: carried here from another page, with no trigger on this one; `null` for a card attached here. */
+  away: Away | null;
+  /** K7: where the card was opened, once it is kept. */
+  openedAt: OpenedAt | null;
   graceTimer: ReturnType<typeof setTimeout> | null;
   flashTimer: ReturnType<typeof setTimeout> | null;
   unwatch: () => void;
@@ -356,7 +455,10 @@ let slid = 0;
 let pointedKey: string | null = null;
 /** S9: "Keep the article left", as the reader last set it. */
 let keepLeft = false;
-let keepLeftToggle: KeepLeftToggle | null = null;
+let sideControls: SideControls | null = null;
+/** S11: the width menu's choice, and whether the menu is offered yet. */
+let sideWidth: SideWidthPreset = 'default';
+let sideWidthOffered = false;
 /** S5: the one arrow, from a kept card to an occurrence of its item. */
 let arrow: ArrowOverlay | null = null;
 /** S4: the animations moving cards and the article now. */
@@ -369,6 +471,28 @@ let dragged: {
   readonly measure: SideMeasure | null;
   readonly column: SideColumn | null;
 } | null = null;
+/** K1: "Carry cards", as the reader last set it. */
+let carry = false;
+/** S9, S11: the side column the controls row sits at the top of, while it is in use. */
+let columnInUse: { readonly left: number; readonly width: SideControlsState['width'] } | null = null;
+/** K2: whether the one scroll listener that holds cards is on. */
+let holding = false;
+/** K5: no carrying in a standalone export, which has no other pages to fetch. */
+let standalone = false;
+/** K5: the course's base path, which names its carried set. */
+let base = '/';
+/** K5: carried cards from other pages, waiting for their layer, then for their build. */
+let awayQueue: CarriedCard[] = [];
+const awayBuilding = new Set<CarriedCard>();
+/** K5: every carried card from another page this page restored, to find a child's parent. */
+let awayEntries: CarriedCard[] = [];
+/** C10, K3: the order a restored card had, so cards arriving late keep their place. */
+const restoreOrder = new Map<RememberedCard, number>();
+/** K5: the set this page last stored, to tell when another page changed it (Back, Forward). */
+let lastStored: string | null = null;
+let saveTimer: ReturnType<typeof setTimeout> | null = null;
+/** K5: no saving while the cards are put back from a stored set. */
+let quiet = false;
 /** Cards this page had open when the reader last left it, not restored yet. */
 let remembered: RememberedCard[] = [];
 let rememberedPointed: string | null = null;
@@ -431,6 +555,7 @@ function wanted(card: CardRecord): boolean {
 }
 
 function notify(source: CardSource): void {
+  scheduleSave();
   if (!source.onChange) return;
   const open = new Map<string, CardMode>();
   for (const card of ordered()) if (card.source === source) open.set(card.item, card.mode);
@@ -439,6 +564,8 @@ function notify(source: CardSource): void {
 
 function syncMode(card: CardRecord): void {
   card.el.dataset.cardMode = card.mode;
+  showOpenedAt(card);
+  syncMark(card);
   for (const pin of card.el.querySelectorAll<HTMLElement>('[data-card-pin]')) {
     pin.setAttribute('aria-pressed', String(card.mode === 'pinned'));
   }
@@ -463,7 +590,10 @@ function setMode(card: CardRecord, mode: CardMode): void {
     card.moved = null;
     card.dropAt = null;
   }
-  if (mode !== 'side') card.sideDy = -CARD_CONSTANTS.sideLineOffset;
+  if (mode !== 'side') {
+    card.sideDy = -CARD_CONSTANTS.sideLineOffset;
+    card.el.style.width = '';
+  }
   if (isKept(mode)) {
     cancelGrace(card);
     if (travel?.card === card) endTravel();
@@ -472,6 +602,8 @@ function setMode(card: CardRecord, mode: CardMode): void {
   }
   syncMode(card);
   notify(card.source);
+  if (!arranging) syncControls();
+  hold();
 }
 
 /** P4: the card clicked, focused or opened last is on top. */
@@ -580,6 +712,12 @@ function watch(card: CardRecord): void {
 
 /** P2, P6: place `card` next to its trigger, clear of every other open card. */
 function place(card: CardRecord): void {
+  release(card);
+  if (card.away) {
+    placeAway(card);
+    watch(card);
+    return;
+  }
   const others = ordered()
     .filter((other) => other !== card)
     .map((other) => other.el);
@@ -593,10 +731,32 @@ function place(card: CardRecord): void {
   watch(card);
 }
 
+/**
+ * S11: each width menu size in pixels, in the card's text; Default is S1's
+ * widest. Measured once per root font size (the reader's text size, the
+ * browser's zoom), not on every layout pass.
+ */
+let sideWidthCache: { readonly font: string; readonly widths: Map<SideWidthPreset, number> } | null =
+  null;
+function sideWidths(): Map<SideWidthPreset, number> {
+  const font = getComputedStyle(document.documentElement).fontSize;
+  if (sideWidthCache?.font !== font) {
+    sideWidthCache = {
+      font,
+      widths: sideWidthPixels(cardLayer(LAYER_VARIABLES), remToPx(CARD_CONSTANTS.sideWidthMax)),
+    };
+  }
+  return sideWidthCache.widths;
+}
+
+/** S1, S11: the widest a docked card gets is the width menu's size. */
 const sideOptions = (): SideOptions => ({
   gap: CARD_CONSTANTS.sideGap,
   minWidth: remToPx(CARD_CONSTANTS.sideWidthMin),
-  maxWidth: remToPx(CARD_CONSTANTS.sideWidthMax),
+  maxWidth:
+    sideWidth === 'default'
+      ? remToPx(CARD_CONSTANTS.sideWidthMax)
+      : (sideWidths().get(sideWidth) ?? remToPx(CARD_CONSTANTS.sideWidthMax)),
 });
 
 /**
@@ -637,12 +797,39 @@ function placeMoved(card: CardRecord): void {
   moveTo(card.el, keepBetween(at.x, width, sidebarsBetween(CARD_CONSTANTS.edge)), at.y);
 }
 
+/**
+ * P1: a card beside a trigger the reader folded away — its section collapsed,
+ * its fold closed — has nothing to stand next to, and the text that moved up
+ * into the trigger's place would run under it. It waits out of sight, keeping
+ * its size, and comes back beside its trigger when the trigger shows again.
+ * Returns whether the card is folded away.
+ */
+function foldAway(card: CardRecord): boolean {
+  const { trigger } = card;
+  // A closed `<details>` hides its content with `content-visibility: hidden`,
+  // which keeps the trigger's last box: only `checkVisibility` sees it gone.
+  // A trigger in a card that is itself folded away goes with it.
+  const folded =
+    trigger.isConnected &&
+    (!(typeof trigger.checkVisibility === 'function'
+      ? trigger.checkVisibility()
+      : trigger.getClientRects().length > 0) ||
+      trigger.closest('[data-card-folded]') !== null);
+  card.el.toggleAttribute('data-card-folded', folded);
+  return folded;
+}
+
 /** P1: a card that is not docked goes back to its place after a layout change. */
 function reanchor(card: CardRecord, measure: SideMeasure | null): void {
+  if (card.away) {
+    placeAway(card);
+    return;
+  }
   if (card.mode === 'moved') {
     placeMoved(card);
     return;
   }
+  if (foldAway(card)) return;
   const { anchor } = card;
   if (!anchor) return;
   if (anchor.column) {
@@ -684,7 +871,8 @@ function columnTops(
   extra: ColumnEntry | null = null,
 ): { left: number; docked: CardRecord[]; tops: Map<string, number>; origin: DOMRect } {
   const skip = (card: CardRecord) => card === dragged?.card || card.key === extra?.key;
-  const docked = ordered().filter((card) => card.mode === 'side' && !skip(card));
+  // K5: a card from another page has no line here; it is held at its edge.
+  const docked = ordered().filter((card) => card.mode === 'side' && !skip(card) && !card.away);
   const left = columnLeft(column, slide, CARD_CONSTANTS.sideGap);
   const right = left + column.width;
   // Page coordinates, so the layout does not depend on the scroll position.
@@ -727,10 +915,52 @@ function layoutDocked(column: SideColumn, first: CardRecord | null): void {
   const maxHeight = sideMaxHeight();
   for (const card of docking) card.el.style.maxHeight = `${maxHeight}px`;
   if (first) pointedKey = first.key;
+  for (const card of docking) card.el.style.width = card.width ? `${card.width}px` : '';
   const { left, docked, tops, origin } = columnTops(column, slid, pointedKey);
   for (const card of docked) {
     moveTo(card.el, left, (tops.get(card.key) ?? 0) + origin.top);
   }
+  // K5: a card from another page takes the column's edge; its edge of the window holds it.
+  for (const card of docking) {
+    if (card.away) moveTo(card.el, left, card.el.getBoundingClientRect().top);
+  }
+  coverRail();
+}
+
+/** S11: the width menu, once the reader has resized a card and a wider size fits. */
+function widthMenu(): SideControlsState['width'] {
+  if (!sideWidthOffered) return null;
+  const widths = sideWidths();
+  const offered = offeredWidths(widths, closedRoom(CARD_CONSTANTS.sideGap));
+  if (offered.length < 2 && sideWidth === 'default') return null;
+  const custom = ordered().some((card) => card.mode === 'side' && card.width !== null);
+  return {
+    offered: offered.includes(sideWidth) ? offered : [...offered, sideWidth],
+    value: custom ? 'custom' : sideWidth,
+    characters: new Map(SIDE_WIDTH_OPTIONS.map((option) => [option.id, option.characters])),
+  };
+}
+
+/** S11: a size from the menu, for every docked card and the next ones. */
+function chooseSideWidth(preset: SideWidthPreset): void {
+  sideWidth = preset;
+  writeSideWidth(preset);
+  for (const card of cards.values()) card.width = null;
+  arrange({ from: motionFrom() });
+}
+
+/**
+ * S11: a docked card wider than the room reaches over the rail (your width,
+ * or a size the menu offers only with both panels collapsed). The rail then
+ * goes under the card layer, so the card and its edge's handle stay whole;
+ * the header still covers both.
+ */
+function coverRail(): void {
+  const railLeft = railLeftEdge();
+  const over = ordered().some(
+    (card) => card.mode === 'side' && card.el.getBoundingClientRect().right > railLeft + 0.5,
+  );
+  document.documentElement.toggleAttribute('data-card-over-rail', over);
 }
 
 interface Motion {
@@ -814,6 +1044,9 @@ function arrange(options: ArrangeOptions = {}): void {
   arranging = true;
   try {
     stopMotion();
+    // K2: every card back with the page while the layout measures it.
+    releaseAll();
+    for (const card of cards.values()) card.headerHeight = 0;
     const docked = ordered().filter((card) => card.mode === 'side');
     const needed =
       docked.length > 0 || keepLeft || ordered().some((card) => card.anchor?.column);
@@ -835,10 +1068,11 @@ function arrange(options: ArrangeOptions = {}): void {
     slid = !column ? 0 : keepLeft ? column.maxSlide : docking > 0 ? column.slide : 0;
     slideArticle(slid, column?.maxSlide ?? 0);
     if (column) {
-      cardLayer(LAYER_VARIABLES).style.setProperty(
-        '--explico-card-side-width',
-        `${column.width}px`,
-      );
+      // S11: Default keeps S1's width, at most the room; a wider size is the
+      // reader's choice, kept even where it reaches over the rail.
+      const width =
+        sideWidth === 'default' ? column.width : Math.max(column.width, sideOptions().maxWidth);
+      cardLayer(LAYER_VARIABLES).style.setProperty('--explico-card-side-width', `${width}px`);
     }
     // The card being dragged goes where the pointer takes it, nowhere else.
     for (const card of ordered()) {
@@ -848,11 +1082,13 @@ function arrange(options: ArrangeOptions = {}): void {
     }
     if (column) layoutDocked(column, options.first ?? null);
     for (const card of fresh) if (isOpen(card) && card !== dragged?.card) place(card);
-    keepLeftToggle?.update({
-      visible: !!column && (keepLeft || docking > 0),
-      on: keepLeft,
-      left: column ? columnLeft(column, slid, CARD_CONSTANTS.sideGap) : 0,
-    });
+    columnInUse =
+      column && (keepLeft || docking > 0)
+        ? { left: columnLeft(column, slid, CARD_CONSTANTS.sideGap), width: widthMenu() }
+        : null;
+    syncControls();
+    if (!column || docking === 0) document.documentElement.removeAttribute('data-card-over-rail');
+    holdNow();
     arrow?.redraw();
     if (options.from) play(options.from);
   } finally {
@@ -864,6 +1100,58 @@ function arrange(options: ArrangeOptions = {}): void {
   }
 }
 
+/**
+ * S9, S11, K1: the controls row. At the top of the side column while it is
+ * in use, with "Article left", the width menu and "Carry cards"; else
+ * "Carry cards" alone at the article's top right, while a card is kept (D7).
+ */
+function syncControls(): void {
+  if (!sideControls) return;
+  const anyKept = ordered().some((card) => isKept(card.mode));
+  const article = document
+    .querySelector<HTMLElement>('.main-pane .sl-markdown-content')
+    ?.getBoundingClientRect();
+  const windowRight = document.documentElement.clientWidth;
+  sideControls.update({
+    visible: !!columnInUse || anyKept,
+    at: columnInUse
+      ? { left: columnInUse.left }
+      : {
+          right:
+            article && article.width > 0
+              ? Math.max(0, windowRight - article.right)
+              : CARD_CONSTANTS.edge,
+        },
+    keepLeft: { visible: !!columnInUse, on: keepLeft },
+    carry: { visible: anyKept && !standalone, on: carry },
+    width: columnInUse?.width ?? null,
+  });
+}
+
+/** K1: the reader's "Carry cards". */
+function setCarry(on: boolean): void {
+  carry = on;
+  writeCarry(on);
+  if (on) {
+    // K5: the cards kept here start their journey.
+    saveCarried();
+  } else {
+    // K5: the journeys end; the cards from other pages go with them.
+    awayQueue = [];
+    awayBuilding.clear();
+    awayStranded = [];
+    for (const card of ordered().reverse()) if (isOpen(card) && card.away) close(card);
+    forgetCarried(base);
+    lastStored = null;
+  }
+  for (const card of cards.values()) {
+    showOpenedAt(card);
+    syncMark(card);
+  }
+  syncControls();
+  hold();
+}
+
 /** P1: the layout changed. While cards or the article are moving, wait until they stop. */
 function reanchorAll(): void {
   if (motion.size > 0) {
@@ -873,6 +1161,202 @@ function reanchorAll(): void {
   arrange();
 }
 
+// ---------------------------------------------------------------------------
+// K2–K4: kept cards held at the window's edges while the reader carries them.
+// ---------------------------------------------------------------------------
+
+/** K2: a held card back with the page, where the layout last put it. */
+function release(card: CardRecord): void {
+  const { natural, el } = card;
+  card.held = null;
+  if (!natural) return;
+  card.natural = null;
+  el.style.position = '';
+  el.style.left = natural.left;
+  el.style.top = natural.top;
+  el.style.maxHeight = natural.maxHeight;
+  el.removeAttribute('data-card-held');
+  el.removeAttribute('data-card-collapsed');
+}
+
+function releaseAll(): void {
+  for (const card of cards.values()) release(card);
+}
+
+/** K3: how tall the card is collapsed to its header row. */
+function collapsedHeight(card: CardRecord): number {
+  const { el } = card;
+  if (el.hasAttribute('data-card-collapsed')) return el.getBoundingClientRect().height;
+  el.setAttribute('data-card-collapsed', '');
+  const height = el.getBoundingClientRect().height;
+  el.removeAttribute('data-card-collapsed');
+  return height;
+}
+
+/**
+ * K2: where a kept card is with the page, in the viewport, at its full
+ * height: where it is, or, while held, the place the layout gave it.
+ */
+function naturalBox(card: CardRecord, layer: DOMRect): Box {
+  const rect = card.el.getBoundingClientRect();
+  const { natural, held } = card;
+  if (!natural) {
+    card.fullHeight = rect.height;
+    return rect;
+  }
+  if (held && !held.collapsed && held.maxHeight === null) card.fullHeight = rect.height;
+  const left = layer.left + (Number.parseFloat(natural.left) || 0);
+  const top = layer.top + (Number.parseFloat(natural.top) || 0);
+  return { left, top, right: left + rect.width, bottom: top + card.fullHeight };
+}
+
+/** K2: the window under the header, and the side controls row a docked card stacks under. */
+function holdBand(): { top: number; bottom: number; blocks: Box[] } {
+  const row = sideControls?.box() ?? null;
+  return {
+    top: headerBottom() + CARD_CONSTANTS.edge,
+    bottom: document.documentElement.clientHeight - CARD_CONSTANTS.edge,
+    blocks: row ? [row] : [],
+  };
+}
+
+/** K2: fix a card at its edge of the window, or give it back to the page. */
+function applyHeld(card: CardRecord, held: Held | null, layer: DOMRect): void {
+  if (!held) {
+    release(card);
+    return;
+  }
+  const { el } = card;
+  const natural = card.natural ?? {
+    left: el.style.left,
+    top: el.style.top,
+    maxHeight: el.style.maxHeight,
+  };
+  card.natural = natural;
+  card.held = held;
+  el.style.position = 'fixed';
+  el.style.left = `${Math.round(layer.left + (Number.parseFloat(natural.left) || 0))}px`;
+  el.style.top = `${Math.round(held.top)}px`;
+  el.style.maxHeight =
+    held.maxHeight === null ? natural.maxHeight : `${Math.round(held.maxHeight)}px`;
+  el.dataset.cardHeld = held.edge;
+  el.toggleAttribute('data-card-collapsed', held.collapsed);
+}
+
+/** K2: the one scroll listener that holds cards, on only while carry is on and a card is kept. */
+function listenForHold(on: boolean): void {
+  if (on === holding) return;
+  holding = on;
+  if (on) window.addEventListener('scroll', onHoldScroll, { passive: true });
+  else window.removeEventListener('scroll', onHoldScroll);
+}
+
+function onHoldScroll(): void {
+  hold();
+  arrow?.redraw();
+}
+
+/** K2–K4, after anything that changes the kept cards. A layout pass holds them once it is done. */
+function hold(): void {
+  if (!arranging) holdNow();
+}
+
+/**
+ * K2–K4: with carry on, every kept card whose place has scrolled past an
+ * edge of the window is held at that edge, stacked and collapsed as
+ * `heldAt` says; the others follow the page. A hovered card a kept child
+ * holds open (C9) counts as kept. K4: a card opened from inside a held card
+ * moves with it, and collapses with it. The card being dragged goes where
+ * the pointer takes it.
+ */
+function holdNow(): void {
+  const kept = carry
+    ? ordered().filter((card) => !isTransient(cards, card.key) && card !== dragged?.card)
+    : [];
+  const keptKeys = new Set(kept.map((card) => card.key));
+  for (const card of cards.values()) if (!keptKeys.has(card.key)) release(card);
+  listenForHold(kept.length > 0);
+  if (kept.length === 0) {
+    makeRoom(0);
+    return;
+  }
+  const layer = cardLayer(LAYER_VARIABLES).getBoundingClientRect();
+  // K4: up to the outermost kept card it was opened inside; a card from
+  // another page (K5) has no trigger inside another and is held on its own.
+  const rootOf = (card: CardRecord): CardRecord => {
+    let root = card;
+    for (
+      let parent = card.away || !card.parentKey ? undefined : cards.get(card.parentKey);
+      parent && keptKeys.has(parent.key);
+      parent = parent.away || !parent.parentKey ? undefined : cards.get(parent.parentKey)
+    ) {
+      root = parent;
+    }
+    return root;
+  };
+  const boxes = new Map(kept.map((card) => [card, naturalBox(card, layer)] as const));
+  const roots = kept.filter((card) => rootOf(card) === card);
+  const input: HoldCard[] = roots.map((card) => {
+    if (!card.headerHeight) card.headerHeight = collapsedHeight(card);
+    return {
+      key: card.key,
+      box: boxes.get(card) ?? card.el.getBoundingClientRect(),
+      headerHeight: card.headerHeight,
+      order: card.order,
+      rank: card.rank,
+      edge: card.away?.edge ?? null,
+    };
+  });
+  const band = holdBand();
+  const spots = heldAt(input, band, CARD_CONSTANTS.gap);
+  // K5: a card from another page held at the bottom edge never leaves it.
+  // The page grows by their stack, so its end scrolls clear of them.
+  let room = 0;
+  for (const card of roots) {
+    const spot = spots.get(card.key);
+    if (card.away && spot?.edge === 'bottom') {
+      room = Math.max(room, band.bottom - spot.top + CARD_CONSTANTS.edge);
+    }
+  }
+  makeRoom(room);
+  for (const card of kept) {
+    const root = rootOf(card);
+    const spot = spots.get(root.key) ?? null;
+    if (root === card || !spot) {
+      applyHeld(card, spot, layer);
+      continue;
+    }
+    const shift = spot.top - (boxes.get(root)?.top ?? 0);
+    applyHeld(
+      card,
+      {
+        edge: spot.edge,
+        top: (boxes.get(card)?.top ?? 0) + shift,
+        collapsed: spot.collapsed,
+        maxHeight: null,
+      },
+      layer,
+    );
+  }
+}
+
+/** K5: the room at the end of the page that cards from other pages held at the bottom take. */
+let carriedRoom = 0;
+function makeRoom(px: number): void {
+  const room = Math.ceil(px);
+  if (room === carriedRoom) return;
+  carriedRoom = room;
+  const root = document.documentElement;
+  if (room > 0) root.style.setProperty('--explico-carried-room', `${room}px`);
+  else root.style.removeProperty('--explico-carried-room');
+}
+
+/** K3: a collapsed card the reader opens counts as the newest from now on. */
+function expand(card: CardRecord): void {
+  card.rank = ++opened;
+  hold();
+}
+
 /** S6, S7: the Side button — into the side column, or back next to the trigger. */
 function toggleSide(card: CardRecord): void {
   const from = motionFrom();
@@ -896,17 +1380,69 @@ const awayFromTrigger = (mode: CardMode | undefined): boolean =>
   mode === 'side' || mode === 'moved';
 
 /** S5: the arrow from a kept card to an occurrence of its item. Not while the card is dragged. */
-function pointAt(card: CardRecord, target: HTMLElement): void {
+function pointAt(card: CardRecord, target: HTMLElement, lookalike = false): void {
   if (!arrow || !isKept(card.mode) || dragged?.card === card) return;
-  arrow.show(card.el, target);
+  arrow.show(card.el, target, { lookalike });
+}
+
+/**
+ * D4, K6: a card carried in from another page for one of that page's own
+ * symbols, whose glyph is `glyph`: the same letters here mean something
+ * else.
+ */
+const looksLike = (card: CardRecord, glyph: string): boolean =>
+  !!card.away && card.el.dataset.cardScope === 'local' && card.el.dataset.cardGlyph === glyph;
+
+/** D4: the reader points at `hit`; the newest card from another page whose symbol looks like it points back, dashed. */
+function pointLookalike(hit: Hit): void {
+  const glyph = hit.source.glyphOf?.(hit.trigger);
+  const own = cards.get(hit.key);
+  // A kept card of its own already points at it, solid (C8, S5).
+  if (!glyph || (own && isKept(own.mode))) return;
+  const card = ordered()
+    .reverse()
+    .find((candidate) => candidate.key !== hit.key && looksLike(candidate, glyph));
+  if (card) pointAt(card, hit.trigger, true);
+}
+
+/**
+ * S5, K5, D4: pointing at a card from another page shows the nearest place
+ * on this page it belongs to: an occurrence of its item (a shared symbol, a
+ * reference to the same float), else, for a page's own symbol, one that
+ * only looks like it, dashed.
+ */
+function pointFromAway(card: CardRecord): void {
+  const glyph = card.el.dataset.cardScope === 'local' ? card.el.dataset.cardGlyph : undefined;
+  const same = occurrencesOf(card.source, new Set([card.item]), null).get(card.item) ?? [];
+  const alike = same.length === 0 && glyph ? (card.source.lookalikes?.(glyph) ?? []) : [];
+  const box = card.el.getBoundingClientRect();
+  const middle = (box.top + box.bottom) / 2;
+  let nearest: HTMLElement | null = null;
+  let distance = Number.POSITIVE_INFINITY;
+  for (const target of same.length > 0 ? same : alike) {
+    const rect = target.getClientRects()[0];
+    if (!rect) continue;
+    const far = Math.abs((rect.top + rect.bottom) / 2 - middle);
+    if (far < distance) {
+      nearest = target;
+      distance = far;
+    }
+  }
+  if (nearest) pointAt(card, nearest, same.length === 0);
 }
 
 /** C8: move a card to another occurrence of its item. A docked card re-aligns to its line. */
 function reattach(card: CardRecord, trigger: HTMLElement): void {
+  if (card.away) {
+    // K5: a card from another page, attached here: this page is its page now.
+    card.away = null;
+    card.el.removeAttribute('data-card-away');
+  }
   card.trigger = trigger;
   card.parentKey = cardContaining(trigger)?.key ?? null;
   if (card.mode !== 'side') {
     place(card);
+    hold();
     return;
   }
   const from = motionFrom();
@@ -960,6 +1496,12 @@ const dragHost: DragHost = {
   begin(el) {
     const card = cardContaining(el);
     if (!card || card.el !== el) return null;
+    if (card.held) {
+      // K2: a held card leaves its edge from where it is.
+      const rect = el.getBoundingClientRect();
+      release(card);
+      moveTo(el, rect.left, rect.top);
+    }
     const measure = measureSide();
     const column = measure ? sideColumn(measure, sideOptions()) : null;
     const home = homeSpot(card, measure);
@@ -992,6 +1534,15 @@ const dragHost: DragHost = {
       return;
     }
     const from = motionFrom();
+    if (card.away) {
+      // K5: a card from another page goes to the edge it was dropped nearer.
+      awayAt(
+        card,
+        outcome.kind === 'moved' ? outcome.left : card.el.getBoundingClientRect().left,
+        outcome.top,
+      );
+      scheduleSave();
+    }
     if (outcome.kind === 'side') {
       // D3: at the drop height; S2 resolves overlaps, the article slides (S3).
       setMode(card, 'side');
@@ -1029,10 +1580,12 @@ const dragHost: DragHost = {
       grab,
     );
     const from = motionFrom();
+    if (card.away) awayAt(card, at.x, at.y);
     setMode(card, 'moved');
     card.dropAt = at;
     raise(card);
     arrange({ from });
+    scheduleSave();
   },
   home(el) {
     const card = cardContaining(el);
@@ -1095,6 +1648,8 @@ function close(card: CardRecord): void {
   if (undocking) arrange({ from });
   // C9: the parent was kept open by this child; check it again.
   if (parent && isOpen(parent) && parent.mode === 'hover') graceCheck(parent);
+  if (!arranging) syncControls();
+  hold();
 }
 
 /** C7: close the transient cards outside the chain of `hostKey`. */
@@ -1105,10 +1660,22 @@ function closeOutside(hostKey: string | null): void {
   }
 }
 
-function mount(hit: Hit, el: HTMLElement, mode: CardMode): void {
+interface MountOptions {
+  /** C10, K3: the order a restored card had. */
+  readonly order?: number;
+  /** K5: a card carried from another page. */
+  readonly away?: Away;
+  /** C9: the card it was opened from, when its trigger is not inside it here (K5). */
+  readonly parentKey?: string | null;
+  /** K7: where a restored card was opened. */
+  readonly openedAt?: OpenedAt | null;
+}
+
+function mount(hit: Hit, el: HTMLElement, mode: CardMode, options: MountOptions = {}): void {
   el.dataset.cardKey = hit.key;
   el.hidden = false;
   el.style.visibility = 'hidden';
+  el.toggleAttribute('data-card-away', !!options.away);
   cardLayer(LAYER_VARIABLES).append(el);
   const card: CardRecord = {
     key: hit.key,
@@ -1116,13 +1683,24 @@ function mount(hit: Hit, el: HTMLElement, mode: CardMode): void {
     source: hit.source,
     el,
     trigger: hit.trigger,
-    parentKey: cardContaining(hit.trigger)?.key ?? null,
+    parentKey:
+      options.parentKey !== undefined
+        ? options.parentKey
+        : (cardContaining(hit.trigger)?.key ?? null),
     mode,
-    order: ++opened,
+    order: options.order ?? ++opened,
     anchor: null,
     moved: null,
     dropAt: null,
     sideDy: -CARD_CONSTANTS.sideLineOffset,
+    width: null,
+    held: null,
+    natural: null,
+    fullHeight: 0,
+    headerHeight: 0,
+    rank: options.order ?? opened,
+    away: options.away ?? null,
+    openedAt: options.openedAt ?? null,
     graceTimer: null,
     flashTimer: null,
     unwatch: noop,
@@ -1144,6 +1722,8 @@ function mount(hit: Hit, el: HTMLElement, mode: CardMode): void {
     if (isOpen(card) && card.mode === 'hover') graceCheck(card);
   });
   notify(card.source);
+  if (isKept(mode) && !arranging) syncControls();
+  hold();
 }
 
 function settle(key: string, token: number, el: HTMLElement | null): void {
@@ -1220,11 +1800,12 @@ function onPointerOver(event: PointerEvent): void {
   const host = cardContaining(event.target);
   if (
     host &&
-    awayFromTrigger(host.mode) &&
+    (awayFromTrigger(host.mode) || host.away) &&
     arrow?.card !== host.el &&
     !(event.relatedTarget instanceof Node && host.el.contains(event.relatedTarget))
   ) {
-    pointAt(host, host.trigger);
+    if (host.away) pointFromAway(host);
+    else pointAt(host, host.trigger);
   }
   const hit = findTrigger(event.target);
   if (!hit) return;
@@ -1241,6 +1822,7 @@ function onPointerOver(event: PointerEvent): void {
     }
   }
   hoverOpen(hit);
+  pointLookalike(hit);
 }
 
 function onPointerOut(event: PointerEvent): void {
@@ -1272,14 +1854,17 @@ function onFocusIn(event: FocusEvent): void {
   const card = cardContaining(event.target);
   if (card) raise(card);
   const visible = event.target instanceof Element && event.target.matches(':focus-visible');
-  if (card && awayFromTrigger(card.mode) && visible && arrow?.card !== card.el) {
-    pointAt(card, card.trigger);
+  if (card?.held?.collapsed && visible) expand(card); // K3: and so does the keyboard
+  if (card && (awayFromTrigger(card.mode) || card.away) && visible && arrow?.card !== card.el) {
+    if (card.away) pointFromAway(card);
+    else pointAt(card, card.trigger);
   }
   const hit = findTrigger(event.target);
   if (!hit || hit.trigger === refocusing) return;
   // C1: keyboard focus opens a card; the focus a click leaves behind does not.
   if (!visible) return;
   hoverOpen(hit);
+  pointLookalike(hit);
 }
 
 function onFocusOut(event: FocusEvent): void {
@@ -1290,9 +1875,23 @@ function onFocusOut(event: FocusEvent): void {
   if (card && card.trigger === hit.trigger && card.mode === 'hover') graceCheck(card);
 }
 
-/** C3, C4, C6, C8, S6, D5: clicks on a card's controls and on triggers. */
+/** C3, C4, C6, C8, S6, D5, K7: clicks on a card's controls and on triggers. */
 function onClick(event: MouseEvent): void {
   const host = cardContaining(event.target);
+  const openedAt =
+    host && event.target instanceof Element
+      ? event.target.closest<HTMLAnchorElement>('a[data-card-opened-at]')
+      : null;
+  if (host && openedAt) {
+    // A modified click keeps its native meaning: the anchor, in a new tab.
+    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    goToOpened(host, openedAt);
+    return;
+  }
   const control =
     host && event.target instanceof Element
       ? event.target.closest<HTMLElement>('[data-card-pin], [data-card-close], [data-card-side]')
@@ -1312,6 +1911,11 @@ function onClick(event: MouseEvent): void {
     }
     return;
   }
+  // K3: a click on a collapsed card opens it.
+  if (host?.held?.collapsed) {
+    expand(host);
+    return;
+  }
 
   const hit = findTrigger(event.target);
   if (!hit) return;
@@ -1396,6 +2000,16 @@ function occurrencesOf(
     if (list) list.push(el);
     else found.set(item, [el]);
   }
+  // An item's own anchor comes after its triggers, so their indices hold.
+  if (!scope && source.ownAnchor) {
+    for (const item of items) {
+      const own = source.ownAnchor(item);
+      if (!own || layer.contains(own)) continue;
+      const list = found.get(item);
+      if (list) list.push(own);
+      else found.set(item, [own]);
+    }
+  }
   return found;
 }
 
@@ -1434,6 +2048,7 @@ function rememberCards(): void {
       anchor: card.anchor,
       moved: card.mode === 'moved' ? card.moved : null,
       sideDy: card.mode === 'side' ? card.sideDy : null,
+      width: card.width,
     });
   }
   writeRememberedCards({
@@ -1444,10 +2059,14 @@ function rememberCards(): void {
 
 /** Open a remembered card as it was: in its mode, at its place. */
 function revive(hit: Hit, el: HTMLElement, saved: RememberedCard): void {
-  mount(hit, el, saved.mode === 'hover' ? 'hover' : 'pinned');
+  mount(hit, el, saved.mode === 'hover' ? 'hover' : 'pinned', {
+    order: restoreOrder.get(saved),
+    openedAt: 'openedAt' in saved ? (saved as CarriedCard).openedAt : null,
+  });
   const card = cards.get(hit.key);
   if (!card || card.el !== el) return;
   if (saved.anchor) card.anchor = saved.anchor;
+  card.width = saved.width ?? null;
   if (saved.mode === 'side') {
     setMode(card, 'side');
     if (saved.sideDy !== null) card.sideDy = saved.sideDy;
@@ -1511,6 +2130,429 @@ function restoreRemembered(): void {
   }
 }
 
+// ---------------------------------------------------------------------------
+// K7: "Opened at", back to where a kept card was opened (`./card-carry.ts`).
+// ---------------------------------------------------------------------------
+
+/**
+ * K8: while carrying is on, a kept card says whether its meaning holds on
+ * every page — a globe: shared notation, citations, abbreviations, numbered
+ * references — or only on its own page: a page and "this page", for one of
+ * that page's own symbols (`data-card-scope="local"`). The page is the one
+ * the card was read off (`data-card-defined-in`), which need not be where it
+ * was opened: a symbol in an equation from another lesson is that lesson's.
+ * Never the pin's icon.
+ */
+function syncMark(card: CardRecord): void {
+  const mark = card.el.querySelector<HTMLElement>('[data-card-mark]');
+  if (!mark) return;
+  mark.hidden = !(carry && isKept(card.mode));
+  if (mark.hidden) return;
+  const own = card.el.dataset.cardScope === 'local';
+  mark.dataset.cardMark = own ? 'page' : 'global';
+  const where = card.el.dataset.cardDefinedIn;
+  const label = !own
+    ? 'Means the same on every page of the course'
+    : where
+      ? `Defined on ${where}: it means this only there`
+      : 'Defined on this page: it means this only here';
+  mark.title = label;
+  mark.setAttribute('aria-label', label);
+}
+
+/** K7: the place on its page a trigger sits in: a numbered equation, else its section. */
+function placeOf(trigger: HTMLElement): Pick<OpenedAt, 'anchor' | 'label' | 'name'> {
+  const equation = trigger.closest<HTMLElement>('.keyed-equation[id]');
+  const number = equation?.dataset.eqNumber;
+  if (equation && number) {
+    return { anchor: equation.id, label: `(${number})`, name: equation.dataset.eqShort ?? '' };
+  }
+  const list = trigger.closest<HTMLElement>('.notation-list[id]');
+  if (list) return { anchor: list.id, label: 'the notation list', name: '' };
+  // The last section heading before it in the article: a numbered section,
+  // worked example or knowledge check, or, where the course shows no
+  // numbers, an outline heading. A fold's bar and a memo are no sections.
+  const article = document.querySelector<HTMLElement>('.main-pane .sl-markdown-content');
+  const isSection = (candidate: HTMLElement) =>
+    !!(candidate.dataset.secNumber || candidate.dataset.checkNumber || candidate.dataset.exNumber) ||
+    (/^H[234]$/.test(candidate.tagName) &&
+      !candidate.id.startsWith('fold-') &&
+      !candidate.dataset.memoNumber &&
+      !candidate.closest('figure, aside'));
+  let heading: HTMLElement | null = null;
+  for (const candidate of article?.querySelectorAll<HTMLElement>(
+    'h2[id], h3[id], h4[id], h5[id], h6[id]',
+  ) ?? []) {
+    if (!(candidate.compareDocumentPosition(trigger) & Node.DOCUMENT_POSITION_FOLLOWING)) break;
+    if (isSection(candidate)) heading = candidate;
+  }
+  // Before the first section: the page's own heading.
+  if (!heading) return { anchor: '_top', label: 'the start', name: '' };
+  const title = readableText(heading.querySelector('.block-heading__title') ?? heading);
+  return { anchor: heading.id, ...sectionPlace(heading.dataset, title) };
+}
+
+/**
+ * K7: where `card` was opened: its trigger's place on this page, or, for a
+ * card opened from inside another, where the outermost one was opened.
+ */
+function ensureOpenedAt(card: CardRecord): OpenedAt | null {
+  if (card.openedAt) return card.openedAt;
+  const parent = card.parentKey ? cards.get(card.parentKey) : undefined;
+  if (parent) {
+    card.openedAt = ensureOpenedAt(parent);
+    return card.openedAt;
+  }
+  const { trigger } = card;
+  if (card.away || !trigger.isConnected) return null;
+  const occurrence =
+    occurrencesOf(card.source, new Set([card.item]), null).get(card.item)?.indexOf(trigger) ?? -1;
+  if (occurrence < 0) return null;
+  card.openedAt = {
+    page: window.location.pathname,
+    title: pageTitleOf(document) ?? '',
+    ...placeOf(trigger),
+    layer: card.source.layer,
+    item: card.item,
+    occurrence,
+  };
+  return card.openedAt;
+}
+
+/**
+ * K7: a kept card's "Opened at" link, beside its "Go to …", while carrying
+ * is on; none on a hovered card. Where it was opened is recorded on keeping
+ * either way, for a journey started later.
+ */
+function showOpenedAt(card: CardRecord): void {
+  let link = card.el.querySelector<HTMLAnchorElement>('a[data-card-opened-at]');
+  const at = isKept(card.mode) ? ensureOpenedAt(card) : null;
+  if (!at || !carry) {
+    if (link) link.hidden = true;
+    return;
+  }
+  if (!link) {
+    link = document.createElement('a');
+    link.className = 'hover-panel-action';
+    link.dataset.cardOpenedAt = '';
+    const label = document.createElement('span');
+    label.dataset.openedAtLabel = '';
+    const jump = document.createElement('span');
+    jump.setAttribute('aria-hidden', 'true');
+    jump.dataset.jumpArrow = '';
+    link.append(label, jump);
+    const actions = [...card.el.querySelectorAll<HTMLElement>('.hover-panel-action')];
+    const last = actions[actions.length - 1];
+    if (last) {
+      last.after(link);
+    } else {
+      const row = document.createElement('p');
+      row.append(link);
+      card.el.querySelector('.hover-panel-scroll')?.append(row);
+    }
+  }
+  const text = openedAtText(at);
+  const label = link.querySelector<HTMLElement>('[data-opened-at-label]');
+  if (label) label.textContent = text.label;
+  link.title = text.title;
+  link.href = isThisPage(at.page) ? `#${at.anchor}` : `${at.page}#${at.anchor}`;
+  link.hidden = false;
+  wireJumpArrow(link);
+}
+
+/** K7: the trigger a card was opened at, on this page. */
+function triggerAt(at: OpenedAt): HTMLElement | null {
+  const source = sources.find((candidate) => candidate.layer === at.layer);
+  if (!source) return null;
+  return occurrencesOf(source, new Set([at.item]), null).get(at.item)?.[at.occurrence] ?? null;
+}
+
+/** K7: light a trigger up a moment, where an "Opened at" link brought the reader. */
+function flashOrigin(trigger: HTMLElement): void {
+  trigger.classList.remove('is-card-origin');
+  void trigger.offsetWidth; // restart the animation
+  trigger.classList.add('is-card-origin');
+  setTimeout(() => trigger.classList.remove('is-card-origin'), CARD_CONSTANTS.originFlashMs);
+}
+
+/** K7: to the trigger itself, its section's anchor in the address bar. */
+function scrollToOrigin(trigger: HTMLElement, anchor: string): void {
+  animatedScrollIntoView(trigger, { block: 'center' }, () => {
+    if (window.location.hash !== `#${anchor}`) history.pushState(null, '', `#${anchor}`);
+    flashOrigin(trigger);
+  });
+}
+
+/** K7: follow a card's "Opened at" link: here, to the trigger; elsewhere, there, then to it. */
+function goToOpened(card: CardRecord, link: HTMLAnchorElement): void {
+  const at = card.openedAt;
+  if (!at) return;
+  if (!isThisPage(at.page)) {
+    stashOpenedAt(at);
+    window.location.assign(link.href);
+    return;
+  }
+  const trigger = triggerAt(at);
+  if (trigger && trigger.getClientRects().length > 0) {
+    scrollToOrigin(trigger, at.anchor);
+  } else {
+    // Folded away: its section's anchor, as without JavaScript.
+    window.location.hash = at.anchor;
+  }
+}
+
+/** K7: the trigger an "Opened at" link on another page brought the reader here for. */
+let arriving: OpenedAt | null = null;
+
+/** K7: once its layer is here, scroll to it. */
+function arrive(): void {
+  const at = arriving;
+  if (!at || !sources.some((source) => source.layer === at.layer)) return;
+  arriving = null;
+  requestAnimationFrame(() => {
+    const trigger = triggerAt(at);
+    if (trigger && trigger.getClientRects().length > 0) scrollToOrigin(trigger, at.anchor);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// K5: carrying the kept cards to every page of the course (`./card-carry.ts`).
+// ---------------------------------------------------------------------------
+
+/** K5: the article column's left edge, against which a card's place across the window travels. */
+const articleLeftEdge = (): number => articleColumn(document.body)?.left ?? 0;
+
+/**
+ * K5: a card from another page, across the window where it was against the
+ * article, at its edge of the window; `holdNow` keeps it there.
+ */
+function placeAway(card: CardRecord): void {
+  const { away } = card;
+  if (!away) return;
+  const between = sidebarsBetween(CARD_CONSTANTS.edge);
+  const { width, height } = card.el.getBoundingClientRect();
+  const x = keepBetween(articleLeftEdge() + away.dx, width, between);
+  const band = holdBand();
+  moveTo(card.el, x, away.edge === 'top' ? band.top : band.bottom - height);
+}
+
+/** K5: a card from another page, put at (`left`, `top`): the edge it is nearer, its place across. */
+function awayAt(card: CardRecord, left: number, top: number): void {
+  const { away } = card;
+  if (!away) return;
+  const { height } = card.el.getBoundingClientRect();
+  away.edge = top + height / 2 < document.documentElement.clientHeight / 2 ? 'top' : 'bottom';
+  away.dx = Math.round(left - articleLeftEdge());
+}
+
+const awayItemOf = (layer: string, saved: CarriedCard): string =>
+  sources.find((source) => source.layer === layer)?.awayItem?.(saved.item, saved.page) ??
+  saved.item;
+
+/** K5: open a card rebuilt from its page, as it was there: in its mode, at its edge. */
+function mountAway(source: CardSource, saved: CarriedCard, el: HTMLElement): void {
+  const item = awayItemOf(source.layer, saved);
+  const key = `${source.layer}:${item}`;
+  if (!carry || cards.has(key)) return;
+  if (saved.picture) restorePicture(el, saved.picture);
+  const parent = saved.parentKey
+    ? awayEntries.find((entry) => entry.page === saved.page && keyOf(entry) === saved.parentKey)
+    : undefined;
+  mount(
+    // Its trigger is on its own page: this one stands in for it, never connected.
+    { source, trigger: document.createElement('span'), item, key },
+    el,
+    saved.mode === 'hover' ? 'hover' : 'pinned',
+    {
+      order: restoreOrder.get(saved),
+      away: { saved, edge: saved.edge, dx: saved.dx },
+      openedAt: saved.openedAt ?? null,
+      parentKey: parent ? `${parent.layer}:${awayItemOf(parent.layer, parent)}` : null,
+    },
+  );
+  const card = cards.get(key);
+  if (!card || card.el !== el) return;
+  card.width = saved.width ?? null;
+  if (saved.mode === 'side') setMode(card, 'side');
+  else if (saved.mode === 'moved') setMode(card, 'moved');
+}
+
+/** K5: carried cards whose page could not be fetched; carried on, never retried on this page. */
+let awayStranded: CarriedCard[] = [];
+
+/** K5: rebuild every waiting card from another page whose layer has registered. */
+function restoreAway(): void {
+  for (const saved of [...awayQueue]) {
+    const source = sources.find((candidate) => candidate.layer === saved.layer);
+    if (!source) continue; // its layer has not registered yet
+    awayQueue = awayQueue.filter((other) => other !== saved);
+    if (!source.build) continue; // the layer's cards do not travel
+    awayBuilding.add(saved);
+    const done = (el: HTMLElement | null) => {
+      awayBuilding.delete(saved);
+      // Its page no longer has it: the journey ends.
+      if (!el) return;
+      mountAway(source, saved, el);
+      arrange();
+    };
+    let built: HTMLElement | null | Promise<HTMLElement | null>;
+    try {
+      built = source.build(saved.item, saved.page);
+    } catch {
+      built = null;
+    }
+    if (built instanceof Promise) {
+      built.then(done, () => {
+        awayBuilding.delete(saved);
+        awayStranded.push(saved);
+      });
+    } else {
+      done(built);
+    }
+  }
+}
+
+/** K5: the cards this page carries on, in their order, with the ones still on their way. */
+function carriedSet(): CarriedSet {
+  const here = window.location.pathname;
+  const article = articleLeftEdge();
+  const entries: { readonly order: number; readonly card: CarriedCard }[] = [];
+  // Each card saved so far, by its key here: its key and page in the set.
+  const stored = new Map<string, { readonly key: string; readonly page: string }>();
+  const lookups = new Map<string, Map<string, HTMLElement[]>>();
+  const kept = ordered().filter((card) => !isTransient(cards, card.key));
+  for (const card of kept) {
+    const parent = card.parentKey ? stored.get(card.parentKey) : undefined;
+    // A card opened from inside another travels only with it.
+    if (card.parentKey !== null && !parent) continue;
+    const original = card.away?.saved;
+    let page: string;
+    let item: string;
+    let occurrence: number;
+    if (original) {
+      ({ page, item, occurrence } = original);
+    } else {
+      if (!card.trigger.isConnected) continue;
+      const scope = card.parentKey ? (cards.get(card.parentKey)?.el ?? null) : null;
+      const lookup = `${card.source.layer}|${card.parentKey ?? ''}`;
+      let triggers = lookups.get(lookup);
+      if (!triggers) {
+        const items = new Set(
+          kept
+            .filter(
+              (other) =>
+                other.source === card.source && other.parentKey === card.parentKey && !other.away,
+            )
+            .map((other) => other.item),
+        );
+        triggers = occurrencesOf(card.source, items, scope);
+        lookups.set(lookup, triggers);
+      }
+      occurrence = triggers.get(card.item)?.indexOf(card.trigger) ?? -1;
+      if (occurrence < 0) continue;
+      // A card opened inside another counts its occurrence there, on that card's page.
+      page = parent?.page ?? here;
+      item = card.item;
+    }
+    const rect = card.el.getBoundingClientRect();
+    const dx = card.away?.dx ?? Math.round(rect.left - article);
+    const edge: HoldEdge =
+      card.away?.edge ??
+      card.held?.edge ??
+      (rect.top + rect.height / 2 < document.documentElement.clientHeight / 2 ? 'top' : 'bottom');
+    const picture = capturePicture(card.el) ?? original?.picture;
+    const entry: CarriedCard = {
+      layer: card.source.layer,
+      item,
+      occurrence,
+      parentKey: parent?.key ?? null,
+      mode: card.mode,
+      anchor: original ? original.anchor : card.anchor,
+      moved:
+        card.mode === 'moved'
+          ? ((original ? original.moved : card.moved) ?? { x: dx, y: 0 })
+          : null,
+      sideDy: card.mode === 'side' ? (original ? original.sideDy : card.sideDy) : null,
+      width: card.width,
+      page,
+      edge,
+      dx,
+      ...(picture ? { picture } : {}),
+      ...(card.openedAt ? { openedAt: card.openedAt } : {}),
+    };
+    stored.set(card.key, { key: keyOf(entry), page });
+    entries.push({ order: card.order, card: entry });
+  }
+  // Cards still on their way here travel on as they came.
+  const saved = new Set(entries.map((entry) => carriedKeyOf(entry.card)));
+  for (const pending of [...awayQueue, ...awayBuilding, ...awayStranded]) {
+    if (saved.has(carriedKeyOf(pending))) continue;
+    entries.push({ order: restoreOrder.get(pending) ?? Number.MAX_SAFE_INTEGER, card: pending });
+  }
+  entries.sort((a, b) => a.order - b.order);
+  return {
+    cards: entries.map((entry) => entry.card),
+    pointed: pointedKey ? (stored.get(pointedKey)?.key ?? null) : null,
+  };
+}
+
+/** K5: store the carried set now, when it changed: this tab's, and the course's last. */
+function saveCarried(): void {
+  if (saveTimer !== null) clearTimeout(saveTimer);
+  saveTimer = null;
+  if (!carry || quiet) return;
+  // As it would come back: a reload that changed nothing writes nothing.
+  const fresh = carriedSet();
+  const set = decodeCarried(encodeCarried(fresh)) ?? fresh;
+  if (encodeCarried(set) === lastStored) return;
+  lastStored = writeCarried(base, set);
+}
+
+/** K5: after any change to the kept cards, store the set once the change is done. */
+function scheduleSave(): void {
+  if (!carry || quiet || saveTimer !== null) return;
+  saveTimer = setTimeout(saveCarried, 0);
+}
+
+/** K5: put back a stored set: its cards from this page at their triggers, the others from theirs. */
+function restoreCarriedSet(set: CarriedSet): void {
+  restoreOrder.clear();
+  for (const [index, card] of set.cards.entries()) restoreOrder.set(card, opened + index + 1);
+  opened += set.cards.length;
+  remembered = set.cards.filter((card) => isThisPage(card.page));
+  awayQueue = set.cards.filter((card) => !isThisPage(card.page));
+  awayEntries = [...awayQueue];
+  awayStranded = [];
+  rememberedPointed = set.pointed;
+  lastStored = encodeCarried(set);
+}
+
+/**
+ * K5: a page the browser brings back as it was left (Back, Forward) has the
+ * cards it had then; when another page changed the set since, it takes the
+ * set as it is now.
+ */
+function resyncCarried(): void {
+  if (!carry) return;
+  const set = readCarried(base);
+  if (encodeCarried(set) === lastStored) return;
+  quiet = true;
+  try {
+    for (const card of ordered().reverse()) if (isOpen(card)) close(card);
+  } finally {
+    quiet = false;
+  }
+  restoreCarriedSet(set);
+  restoreRemembered();
+  restoreAway();
+}
+
+/** As the page is left: the carried set, or, with carrying off, this page's card memory. */
+function leavePage(): void {
+  if (carry) saveCarried();
+  else rememberCards();
+}
+
 function install(): void {
   if (layout) return;
   layout = watchCardLayout(reanchorAll);
@@ -1529,22 +2571,48 @@ function install(): void {
     stepLarge: CARD_CONSTANTS.keyboardStepLarge,
     layer,
   });
-  keepLeftToggle = createKeepLeftToggle(layer, (on) => {
-    keepLeft = on;
-    writeKeepLeft(on);
-    arrange({ from: motionFrom() });
+  sideControls = createSideControls(layer, {
+    onKeepLeft: (on) => {
+      keepLeft = on;
+      writeKeepLeft(on);
+      arrange({ from: motionFrom() });
+    },
+    onCarry: setCarry,
+    onWidth: chooseSideWidth,
   });
+  sideWidth = readSideWidth();
+  sideWidthOffered = readSideWidthOffered();
+  document.addEventListener('pointerdown', onResizeDown, true);
+  document.addEventListener('keydown', onResizeKey);
+  document.addEventListener('dblclick', onResizeReset);
+  // K1: off unless the reader or the course turned it on; K5: never in a
+  // standalone export, which has no other pages.
+  const config = readCardConfig();
+  base = config.base;
+  standalone = document.documentElement.hasAttribute('data-explico-standalone');
+  carry = !standalone && readCarry(config.carry);
   // S9: a reader who keeps the article left finds it there on every page.
   keepLeft = readKeepLeft();
   if (keepLeft) arrange();
-  // The cards the reader left this page with, restored as each layer registers.
-  const page = readRememberedCards();
-  remembered = [...page.cards];
-  rememberedPointed = page.pointed;
-  window.addEventListener('pagehide', rememberCards);
+  // The cards the reader carries (K5), or, with carrying off, the ones this
+  // page had when the reader last left it; restored as each layer registers.
+  if (carry) {
+    restoreCarriedSet(readCarried(base));
+  } else {
+    const page = readRememberedCards();
+    remembered = [...page.cards];
+    rememberedPointed = page.pointed;
+  }
+  window.addEventListener('pagehide', leavePage);
   document.addEventListener('visibilitychange', () => {
-    if (document.visibilityState === 'hidden') rememberCards();
+    if (document.visibilityState === 'hidden') leavePage();
   });
+  window.addEventListener('pageshow', (event) => {
+    if (event.persisted) resyncCarried();
+  });
+  // K7: an "Opened at" link from another page brought the reader here.
+  const jump = takeOpenedAt();
+  if (jump && isThisPage(jump.page)) arriving = jump;
   document.addEventListener('pointerover', onPointerOver);
   document.addEventListener('pointerout', onPointerOut);
   document.addEventListener('pointermove', onPointerMove, { passive: true });
@@ -1558,6 +2626,94 @@ function install(): void {
   window.addEventListener('resize', interruptTravel, { passive: true });
 }
 
+// ---------------------------------------------------------------------------
+// S11: a docked card's right edge widens it.
+// ---------------------------------------------------------------------------
+
+/** The docked card a resize handle belongs to. */
+function resizeTarget(node: EventTarget | null): { card: CardRecord; handle: HTMLElement } | null {
+  const handle = node instanceof Element ? node.closest<HTMLElement>('[data-card-resize]') : null;
+  const card = handle ? cardContaining(handle) : null;
+  return handle && card && card.mode === 'side' ? { card, handle } : null;
+}
+
+/** The narrowest a docked card gets, and the widest: to the window's edge, past the rail (S11). */
+function resizeBounds(card: CardRecord): { min: number; max: number } {
+  const left = card.el.getBoundingClientRect().left;
+  return {
+    min: remToPx(CARD_CONSTANTS.sideWidthMin),
+    max: Math.max(0, document.documentElement.clientWidth - CARD_CONSTANTS.edge - left),
+  };
+}
+
+function setCardWidth(card: CardRecord, width: number | null): void {
+  card.width = width === null ? null : Math.round(width);
+  card.el.style.width = card.width === null ? '' : `${card.width}px`;
+  coverRail();
+}
+
+/** Resizing one card offers the width menu from then on. */
+function offerWidthMenu(): void {
+  if (sideWidthOffered) return;
+  sideWidthOffered = true;
+  writeSideWidthOffered();
+}
+
+function onResizeDown(event: PointerEvent): void {
+  const target = resizeTarget(event.target);
+  if (!target || event.button !== 0) return;
+  event.preventDefault();
+  event.stopPropagation();
+  const { card, handle } = target;
+  const startX = event.clientX;
+  const startWidth = card.el.getBoundingClientRect().width;
+  const { min, max } = resizeBounds(card);
+  const root = document.documentElement;
+  root.setAttribute('data-card-resizing', '');
+  handle.setPointerCapture(event.pointerId);
+  const move = (moveEvent: PointerEvent) => {
+    setCardWidth(card, Math.min(max, Math.max(min, startWidth + moveEvent.clientX - startX)));
+  };
+  const end = () => {
+    handle.removeEventListener('pointermove', move);
+    root.removeAttribute('data-card-resizing');
+    offerWidthMenu();
+    arrange();
+  };
+  handle.addEventListener('pointermove', move);
+  handle.addEventListener('pointerup', end, { once: true });
+  handle.addEventListener('pointercancel', end, { once: true });
+}
+
+function onResizeKey(event: KeyboardEvent): void {
+  const target = resizeTarget(event.target);
+  if (!target) return;
+  const { card } = target;
+  if (event.key === 'Home') {
+    event.preventDefault();
+    setCardWidth(card, null);
+    arrange();
+    return;
+  }
+  const step = event.shiftKey ? CARD_CONSTANTS.keyboardStepLarge : CARD_CONSTANTS.keyboardStep;
+  const delta = event.key === 'ArrowRight' ? step : event.key === 'ArrowLeft' ? -step : 0;
+  if (delta === 0) return;
+  event.preventDefault();
+  const { min, max } = resizeBounds(card);
+  const now = card.el.getBoundingClientRect().width;
+  setCardWidth(card, Math.min(max, Math.max(min, now + delta)));
+  offerWidthMenu();
+  arrange();
+}
+
+/** A double click on the edge gives the card back the column's width. */
+function onResizeReset(event: MouseEvent): void {
+  const target = resizeTarget(event.target);
+  if (!target) return;
+  setCardWidth(target.card, null);
+  arrange();
+}
+
 /**
  * Hand a layer's triggers to the manager. A source registered again under
  * the same `layer` replaces the old one and closes its cards.
@@ -1573,6 +2729,34 @@ export function registerCardSource(source: CardSource): void {
     sources.splice(at, 1, source);
   }
   restoreRemembered();
+  restoreAway();
+  arrive();
+}
+
+/**
+ * Open `layer`'s card for `anchor` already kept, as a click on a trigger
+ * pins one: `'pinned'` next to `anchor`, or `'side'` beside the article (S7:
+ * a note says so when there is no room). `anchor` is a trigger or the item's
+ * own anchor (`CardSource.ownAnchor`), a float's number for its toolbar. A
+ * card already open for the item moves to `anchor` and takes the mode.
+ */
+export function keepCardFor(layer: string, anchor: HTMLElement, mode: 'pinned' | 'side'): void {
+  const source = sources.find((candidate) => candidate.layer === layer);
+  const item = source?.itemFor(anchor) ?? null;
+  if (!source || item === null) return;
+  const key = `${layer}:${item}`;
+  let card = cards.get(key);
+  if (card) {
+    if (card.trigger !== anchor) reattach(card, anchor);
+    if (card.mode === 'hover' || card.mode === 'moved') setMode(card, 'pinned');
+    closeOutside(card.key);
+  } else {
+    request({ source, trigger: anchor, item, key }, 'pinned');
+    card = cards.get(key);
+  }
+  if (!card) return;
+  if ((mode === 'side') !== (card.mode === 'side')) toggleSide(card);
+  raise(card);
 }
 
 /**