@erclx/canon 4.109.0 → 4.111.0

package/src/design/components.ts

@@ -200,10 +200,20 @@ export const COMPONENTS: readonly Component[] = [
   HAND_DRAWN_FIGURE,
 ]
 
+/**
+ * Where the course sidebar stops being a column and becomes an overlay.
+ *
+ * The media query below and both `matchMedia` calls in `@/teach/nav` read this
+ * one value. Three literals is what it was, and each had a test asserting its
+ * own copy, so a half-finished move passed green while the scripts switched at
+ * one width and the layout at another.
+ */
+export const TEACH_SIDEBAR_BREAKPOINT = 1100
+
 const TEACH_CHROME: Component = {
   name: 'teach-chrome',
   note: [
-    'The masthead, breadcrumb, jump menu, theme toggle, progress track, and footer',
+    'The masthead, breadcrumb, jump menu, theme toggle, course sidebar, and footer',
     'navigation shared by every teach page. Recovered from two gitignored',
     'course.css files that predate a regression that dropped this layer from the',
     "generator, and rewritten onto this module's tokens rather than the",
@@ -213,6 +223,7 @@ const TEACH_CHROME: Component = {
   reads: [
     '--color-background',
     '--color-surface',
+    '--color-chrome',
     '--color-border',
     '--color-text',
     '--color-text-body',
@@ -222,7 +233,6 @@ const TEACH_CHROME: Component = {
     '--teach-sans',
     '--teach-mono',
     '--teach-measure',
-    '--teach-chrome',
     '--teach-shadow',
     '--color-teach-accent-bg',
     '--type-body-family',
@@ -230,14 +240,14 @@ const TEACH_CHROME: Component = {
     '--t3',
     '--t4',
     '--t5',
+    '--t6',
   ],
   rules: `:root {
   --teach-sans: var(--type-body-family);
   --teach-hand: 'Virgil', 'Excalifont', cursive;
   --teach-mono: var(--type-code-family);
   --teach-measure: 52rem;
-  --teach-chrome: 52rem;
-  --teach-mast-h: 4.4rem;
+  --teach-mast-h: 3.5rem;
   --teach-shadow: 0 1px 2px rgba(20, 20, 20, 0.04);
   --color-teach-accent-bg: color-mix(in srgb, var(--color-accent) 14%, var(--color-background));
 
@@ -267,11 +277,16 @@ const TEACH_CHROME: Component = {
 
 html { scroll-padding-top: calc(var(--teach-mast-h) + 1rem); }
 
-/* No horizontal padding on the body, so the sticky bar reaches both window
-   edges. The gutter moves onto \`main\`, which is the only thing that needed it. */
+/* No padding at all on the body, so the sticky bar reaches both window edges
+   and the sidebar can travel the full height. The gutter moves onto \`main\` and
+   the bottom room onto \`.pane\`: a flex item's sticky containing block is the
+   flex container's content box, so padding here is space the sidebar could
+   never reach and it would ride up by exactly that much near the foot. */
 body {
   margin: 0;
-  padding: 0 0 7rem;
+  padding: 0;
+  display: flex;
+  align-items: flex-start;
   background: var(--color-background);
   color: var(--color-text-body);
   font-family: var(--teach-sans);
@@ -287,6 +302,24 @@ body {
 main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); margin: 0 auto; padding: 2.25rem 1.5rem 0; }
 .wide-body { max-width: calc(var(--teach-measure) + 3rem); }
 
+/* Everything but the sidebar. \`flow-root\` rather than a bare block, because a
+   bottom margin collapsing out of here makes the document taller than the flex
+   container and a sticky sidebar can only travel inside its containing block,
+   so it would ride up by exactly the escaped margin on a tall window. The
+   border box is what keeps \`min-height: 100vh\` plus the bottom room from
+   scrolling every short page by that padding. */
+.pane {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flow-root;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding-bottom: 7rem;
+  border-left: 1px solid var(--color-border);
+}
+
+html.sb-shut .pane { border-left: 0; }
+
 .bar {
   position: sticky;
   top: 0;
@@ -294,37 +327,44 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
   background: var(--color-background);
   border-bottom: 1px solid var(--color-border);
   padding: 0 1.5rem;
+  cursor: default;
 }
 
+/* The reading bar rides the masthead's own bottom edge rather than arriving as
+   a second element. It reports position inside the lesson, which nothing
+   reported, where the retired track reported position in the course, which the
+   sidebar now reports. */
+.bar::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  height: 2px;
+  width: var(--read, 0%);
+  background: var(--color-accent);
+}
+
+/* The height is the token rather than the sum of two paddings, so the sidebar's
+   own top row lands on the same seam the bar's bottom border draws. The row
+   spans the window rather than the reading measure: capped, the toggle and the
+   theme control floated in from the edges by an amount that changed per page. */
 .mast {
-  max-width: var(--teach-chrome);
-  margin: 0 auto;
-  padding: 0.8rem 0 0.7rem;
+  max-width: none;
+  margin: 0;
+  min-height: var(--teach-mast-h);
+  padding: 0 0.9rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 1rem;
+  gap: 0.55rem;
   font-size: var(--t5);
   color: var(--color-muted);
+  cursor: default;
 }
 
 .mast a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
 .mast a:hover { text-decoration: underline; }
 
-.theme {
-  font-family: var(--teach-sans);
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--color-muted);
-  background: transparent;
-  border: 1px solid var(--color-border);
-  border-radius: 99px;
-  padding: 0.25rem 0.7rem;
-  cursor: pointer;
-}
-
-.theme:hover { border-color: var(--color-accent); color: var(--color-accent); }
-
 .nav {
   width: 100%;
   margin: 0;
@@ -371,7 +411,7 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
    restates either. */
 /* A breadcrumb rather than a row of links. The gap tightens because the
    separators now carry the spacing the gap used to. */
-.mast-left { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
+.mast-left { display: flex; align-items: center; gap: 0.3rem; min-width: 0; flex-wrap: wrap; cursor: default; }
 
 /* \`--rule\` measured 1.27:1 here. It is a border token, and a border is a
    shape a reader infers rather than a glyph they resolve, so it is the wrong
@@ -379,6 +419,7 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
 .crumb-sep {
   color: var(--color-muted);
   font-size: var(--t4);
+  margin: 0 0.1rem;
   user-select: none;
 }
 
@@ -391,27 +432,55 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
 
 .crumb { display: inline-flex; align-items: center; }
 
-/* The label and its caret are one segment visually and two controls in fact:
-   the label navigates, the caret opens the menu. */
-.crumb-item { display: inline-flex; align-items: center; gap: 0.1rem; }
+/* The label and its caret are one component with two zones, like a split
+   button: the label navigates, the caret opens the menu, and one surface fills
+   for both so the pair reads as a single chip rather than two loose pieces.
+   The pointer covers the gap between them, which is interactive on both sides. */
+.crumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  border-radius: 7px;
+  padding: 0.1rem 0.15rem 0.1rem 0.35rem;
+  cursor: pointer;
+}
+
+.crumb-item:has(details.jump):hover,
+.crumb-item:has(details.jump[open]) { background: var(--color-chrome); }
 
-.crumb-here { color: var(--color-text); font-weight: 600; }
+/* Accent reports where you are. A crumb is navigation you can take, so it is
+   neutral, and \`.mast a\` keeps the accent for any other bar link. */
+.mast a.crumb { color: var(--color-text-secondary); padding: 0.1rem 0.15rem 0.1rem 0; }
+.mast a.crumb:hover { text-decoration: none; }
+.crumb-item:hover a.crumb { color: var(--color-text); }
 
-/* The caret is now the whole control, so it carries the 24 pixel minimum on
-   its own rather than inheriting a label's width. */
+.crumb-here { color: var(--color-text); font-weight: 650; }
+
+/* \`align-items: center\` centres boxes, and a label's line box carries
+   half-leading above the cap and descender room below, so its capitals sit
+   above its own centre by an amount that scales with the font size. Trimming
+   the label to its cap band fixes the box rather than nudging the mark. It
+   lands on a span holding the text alone, since the link's own \`inline-flex\`
+   ignores it. Firefox ships no \`text-box\` and keeps the caret a pixel low. */
+.crumb-t, .crumb-here, .sb-ws .ws-name {
+  display: block;
+  text-box: trim-both cap alphabetic;
+}
+
+/* The caret is the whole control, so it carries the 24 pixel minimum on its
+   own rather than inheriting a label's width. It fills nothing itself, since
+   the chip around it does. */
 .crumb-item > .jump > summary {
   min-width: 1.5rem;
   min-height: 1.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  padding: 0.15rem 0.3rem 0.15rem 0;
   border: 0;
   background: transparent;
 }
 
-.crumb-item > .jump > summary:hover { background: var(--color-surface); border-radius: 5px; }
-
 /* A bar link is its own tap target rather than a line of text, so it carries
    the 24 pixel minimum the a11y rule sets. */
 .mast a,
@@ -427,23 +496,25 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
   color: var(--color-muted);
 }
 
-.mast-right { display: flex; align-items: center; gap: 0.85rem; }
+.mast-right { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; }
 
+/* No border, at the fold control's size and radius, so every control on the
+   bar is drawn one way. */
 .theme {
-  width: 1.9rem;
-  height: 1.9rem;
+  width: 1.75rem;
+  height: 1.75rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
-  border: 1px solid var(--color-border);
-  border-radius: 99px;
+  border: 0;
+  border-radius: 6px;
   background: transparent;
   color: var(--color-muted);
   cursor: pointer;
 }
 
-.theme:hover { border-color: var(--color-accent); color: var(--color-accent); }
+.theme:hover { color: var(--color-text); background: var(--color-chrome); }
 .theme svg { width: 0.95rem; height: 0.95rem; display: block; }
 .theme .moon { display: none; }
 :root[data-theme="dark"] .theme .sun { display: none; }
@@ -454,28 +525,225 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
   :root:not([data-theme="light"]) .theme .moon { display: block; }
 }
 
-/* ---- Track: where you are in the course ---- */
+/* ---- The course sidebar ---- */
+
+/* A segmented progress strip used to sit here, one \`flex: 1\` segment per
+   lesson, and it stopped working at the scale a reader most needs it: fifty
+   lessons rendered as a row of dots. The sidebar reports course position
+   instead, at any length, and the bar reports position inside the lesson. */
+
+/* The toggle in the masthead, left of the breadcrumb. */
+.sb-fold {
+  flex: none;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-right: 0.35rem;
+  font: inherit;
+  font-size: var(--t5);
+  line-height: 1;
+  color: var(--color-muted);
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.sb-fold:hover { color: var(--color-text); background: var(--color-chrome); }
+
+.sb {
+  flex: 0 0 var(--sb-w, 16rem);
+  width: var(--sb-w, 16rem);
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  background: transparent;
+  font-family: var(--teach-sans);
+  transition: flex-basis 0.14s, width 0.14s;
+}
 
-/* The track rides inside the bar, so it needs no sticky position, no seam
-   overlap, and no stacking context of its own. */
+html.sb-shut .sb { flex-basis: 0; width: 0; overflow: hidden; }
 
-.track {
+.sb-top {
+  flex: none;
   display: flex;
-  gap: 0.25rem;
-  max-width: var(--teach-chrome);
-  margin: 0 auto;
-  padding: 0 0 0.75rem;
+  align-items: center;
+  height: var(--teach-mast-h);
+  padding: 0 0.95rem;
+  border-bottom: 1px solid var(--color-border);
 }
 
-.track i {
-  flex: 1;
-  height: 3px;
+.sb-ws { position: relative; }
+
+.sb-ws > summary {
+  list-style: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.3rem;
+  border-radius: 6px;
+  font-size: var(--t4);
+  font-weight: 650;
+  color: var(--color-text);
+}
+
+.sb-ws > summary::-webkit-details-marker { display: none; }
+.sb-ws > summary:hover, .sb-ws[open] > summary { background: var(--color-chrome); color: var(--color-text); }
+.sb-ws .car { color: var(--color-muted); display: inline-flex; align-items: center; }
+
+.sb-wl {
+  position: absolute;
+  top: calc(100% + 0.35rem);
+  left: 0;
+  z-index: 40;
+  min-width: 13rem;
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 9px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
+  padding: 0.3rem;
+}
+
+:root[data-theme="dark"] .sb-wl { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
+
+/* The popover chrome comes from \`.sb-wl\`, so the list nested inside it drops
+   its own rather than drawing a second border inside the first. */
+.sb-wl .jump-list {
+  position: static;
+  min-width: 0;
+  max-width: none;
+  border: 0;
+  box-shadow: none;
+  padding: 0;
+  background: transparent;
+}
+
+.sb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 1rem; }
+
+.sb-meta {
+  padding: 1rem 1.25rem 0.55rem;
+  color: var(--color-muted);
+  font-size: var(--t6);
+  font-variant-numeric: tabular-nums;
+}
+
+.sb-filter { padding: 0 0.95rem 0.6rem; }
+
+.sb-filter input {
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  font-size: var(--t6);
+  color: var(--color-text);
+  background: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: 7px;
+  padding: 0.3rem 0.55rem;
+}
+
+.sb-filter input:focus { outline: none; border-color: var(--color-accent); }
+
+.sb-list { list-style: none; margin: 0; padding: 0 0.7rem; }
+.sb-list li { margin: 0; }
+.sb-list li.hide { display: none; }
+
+.sb-l {
+  position: relative;
+  display: flex;
+  gap: 0.55rem;
+  align-items: baseline;
+  padding: 0.38rem 0.55rem;
+  border-radius: 6px;
+  text-decoration: none;
+  color: var(--color-text-body);
+  font-size: var(--t5);
+  line-height: 1.45;
+}
+
+.sb-l:hover { background: var(--color-chrome); color: var(--color-text); }
+
+.sb-n {
+  flex: none;
+  font-family: var(--teach-mono);
+  font-size: var(--t6);
+  color: var(--color-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.sb-on { color: var(--color-text); font-weight: 650; }
+
+.sb-on::before {
+  content: "";
+  position: absolute;
+  left: -0.6rem;
+  top: 0.28rem;
+  bottom: 0.28rem;
+  width: 2px;
   border-radius: 2px;
+  background: var(--color-accent);
+}
+
+.sb-on .sb-n { color: var(--color-accent); }
+
+.sb-empty { padding: 0.3rem 1.2rem; color: var(--color-muted); font-size: var(--t6); }
+
+.sb-foot {
+  flex: none;
+  padding: 0.7rem 1.25rem;
+  border-top: 1px solid var(--color-border);
+  color: var(--color-muted);
+  font-size: var(--t6);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The panel is resizable between a width that still fits a lesson title and one
+   that would start eating the reading measure. */
+.sb-grip {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -3px;
+  width: 7px;
+  z-index: 25;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.sb-grip::before {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 2.2rem;
+  border-radius: 1px;
   background: var(--color-border);
+  opacity: 0;
+  transition: opacity 0.12s;
 }
 
-.track i.done { background: var(--color-accent); }
-.track i.here { background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-teach-accent-bg); }
+.sb-grip:hover::before, .sb-grip:focus-visible::before, html.sb-drag .sb-grip::before {
+  opacity: 1;
+  background: var(--color-accent);
+}
+
+.sb-grip:focus-visible { outline: none; }
+html.sb-drag { cursor: col-resize; user-select: none; }
+html.sb-shut .sb-grip { display: none; }
+
+/* Both belong to the overlay and the script appends both on every page, so
+   each is hidden until the breakpoint hands it a job. Without this the close
+   control renders as an unstyled button stretched across the column, and the
+   scrim becomes a flex item of the body. */
+.sb-close, .sb-scrim { display: none; }
 
 /* ---- Footer navigation, the only place it appears ---- */
 
@@ -516,48 +784,58 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
 }
 
 .jump summary::-webkit-details-marker { display: none; }
-.jump summary:hover { border-color: var(--color-accent); color: var(--color-accent); }
-/* The caret says "this is a menu" and nothing else. It used to flip to say
-   "the menu is open", which the open panel underneath already says, so the
-   motion carried no information a reader could not already see. */
-.jump summary .caret { opacity: 0.55; }
-.jump summary:hover .caret { opacity: 1; }
-.jump[open] summary { border-color: var(--color-accent); color: var(--color-accent); }
-.jump[open] summary .caret { opacity: 1; }
+/* The caret says "this is a menu" and nothing else, so it is drawn at full
+   strength in every state and stays muted. A reveal on hover hid the only
+   route into the menu from a reader who cannot hover, and an affordance is not
+   a state, so it takes no accent on hover or while open. */
+.jump summary .caret { color: var(--color-muted); }
 
 .jump-list {
   position: absolute;
   top: calc(100% + 0.4rem);
   left: 0;
   z-index: 20;
-  min-width: 21rem;
   background: var(--color-background);
   border: 1px solid var(--color-border);
   border-radius: 9px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
-  padding: 0.35rem;
+  padding: 0.25rem;
   list-style: none;
   margin: 0;
 }
 
 :root[data-theme="dark"] .jump-list { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
 
+/* One row recipe wherever the menu is mounted, on the steps the lesson list
+   beside it already reads: the label at \`--t5\` and the numeral at \`--t6\` mono.
+   The weight is restated because \`.mast a\` sets 600 for the bar's own links. */
 .jump-list a {
   display: grid;
   grid-template-columns: 1.65rem 1fr auto;
-  gap: 0.7rem;
+  gap: 0.55rem;
   align-items: center;
-  padding: 0.45rem 0.55rem;
+  padding: 0.38rem 0.55rem;
   border-radius: 6px;
   text-decoration: none;
   color: var(--color-text-body);
-  font-size: 0.875rem;
+  font-size: var(--t5);
+  font-weight: 400;
+  line-height: 1.45;
+}
+
+.jump-list a:hover { background: var(--color-chrome); }
+.jump-list .n { font-family: var(--teach-mono); font-size: var(--t6); color: var(--color-muted); }
+/* The third column used to hold a status dot that read the same on every row,
+   so it reported nothing. It is a per-entry trailing slot now: the workspace
+   menu puts a lesson count there and the lesson menu leaves it empty. */
+.jump-list .ct {
+  font-family: var(--teach-mono);
+  font-size: var(--t6);
+  color: var(--color-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
 }
 
-.jump-list a:hover { background: var(--color-surface); }
-.jump-list .n { font-family: var(--teach-mono); font-size: 0.75rem; color: var(--color-muted); }
-.jump-list .dot { width: 6px; height: 6px; border-radius: 99px; background: var(--color-border); }
-.jump-list .dot.done { background: var(--color-accent); }
 .jump-list li.at a { background: var(--color-teach-accent-bg); }
 .jump-list li.at .n { color: var(--color-accent); }
 .jump-list li.soon a { color: var(--color-muted); }
@@ -568,11 +846,11 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
 .jump-list li.all a { color: var(--color-accent); }
 .jump-list li.all .n { color: var(--color-accent); }
 
-/* The menu is \`min-width: 21rem\` and anchored to its summary, which puts its
-   right edge 35 pixels past a 390 pixel viewport. Clamping the width and
-   letting a long row wrap keeps it on screen without a breakpoint. */
+/* The menu fits its content above an 11rem floor rather than padding three
+   short titles out to a wide panel. It is anchored to its summary, so the
+   clamp keeps a long row wrapping on screen without a breakpoint. */
 .jump-list {
-  min-width: min(21rem, calc(100vw - 2rem));
+  min-width: min(11rem, calc(100vw - 2rem));
   max-width: calc(100vw - 2rem);
 }
 
@@ -593,8 +871,7 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
 @media (max-width: 640px) {
   .bar { padding: 0 1rem; }
     main { padding-left: 1rem; padding-right: 1rem; }
-    .mast { font-size: 0.75rem; gap: 0.5rem; }
-    .mast-left { gap: 0.5rem; row-gap: 0.35rem; }
+    .mast { font-size: 0.75rem; }
 }
 
 @media (max-width: 640px) {
@@ -606,6 +883,94 @@ main { box-sizing: border-box; max-width: calc(var(--teach-measure) + 3rem); mar
     min-width: 0;
     max-width: none;
   }
+}
+
+/* ---- What gives way below 1100px ---- */
+
+/* Hiding the sidebar outright leaves the toggle painted exactly where it cannot
+   act, and it deletes the filter and the per-lesson outline, which the
+   breadcrumb caret does not carry. The panel becomes an overlay instead, and it
+   states its own ground because \`.sb\` is transparent by design for a column
+   sitting on the page rather than floating over the lesson. */
+@media (max-width: ${TEACH_SIDEBAR_BREAKPOINT}px) {
+  .pane { border-left: 0; }
+
+  .sb {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 60;
+    width: min(21rem, 86vw);
+    height: 100dvh;
+    overflow-y: auto;
+    background: var(--color-background);
+    border-right: 1px solid var(--color-border);
+    box-shadow: 0 0 40px rgb(0 0 0 / 35%);
+    transform: translateX(-100%);
+    transition: transform 0.18s;
+  }
+
+  html:not(.sb-shut) .sb { transform: none; }
+
+  /* The wide rule collapses a shut panel to \`width: 0\` and outranks a bare
+     \`.sb\` in here, which produced a one-pixel panel whose contents spilled out
+     and intercepted every click on the toggle. The shut state restates the
+     width so the transform is what moves the panel off screen. */
+  html.sb-shut .sb { width: min(21rem, 86vw); flex-basis: auto; overflow-y: auto; }
+
+  /* A transform moves the panel out of sight and leaves every control inside it
+     in the tab order, so the first Tab from a shut page landed on the workspace
+     switcher inside an invisible panel. Visibility takes it out of the
+     sequence, delayed on the way out so the slide still shows. */
+  html.sb-shut .sb { visibility: hidden; transition: transform 0.18s, visibility 0s linear 0.18s; }
+  html:not(.sb-shut) .sb { visibility: visible; transition: transform 0.18s, visibility 0s; }
+
+  .sb-grip { display: none; }
+
+  /* The panel covers the masthead and the toggle that opened it, so it carries
+     its own way out rather than leaving the scrim as the only route on a phone.
+     It carries no border, at 1.75rem to match \`.sb-fold\` and \`.theme\`, which also clears
+     the 24 pixel pointer target floor. */
+  .sb-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0.55rem;
+    right: 0.6rem;
+    z-index: 61;
+    appearance: none;
+    width: 1.75rem;
+    height: 1.75rem;
+    font: inherit;
+    font-size: var(--t5);
+    line-height: 1;
+    color: var(--color-muted);
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+
+  .sb-close:hover { color: var(--color-text); background: var(--color-chrome); }
+
+  .sb-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 55;
+    background: rgb(0 0 0 / 45%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.18s;
+  }
+
+  html:not(.sb-shut) .sb-scrim { opacity: 1; pointer-events: auto; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sb, .sb-scrim, .sb-grip::before { transition: none; }
 }`,
 }
 
@@ -1148,83 +1513,30 @@ ol.succ li { margin-bottom: 0.4rem; }
 const TEACH_OUTLINE: Component = {
   name: 'teach-outline',
   note: [
-    'The in-lesson outline rail in the gutter the reading measure leaves over, and',
-    'the workspace-switcher row inside the lesson jump menu.',
+    'The in-lesson outline, folded under the lesson being read in the course',
+    'sidebar. It used to be a fixed rail in the gutter the reading measure left',
+    'over, which reported the same thing twice once the sidebar carried the',
+    'course and disappeared entirely below 1420px.',
   ].join('\n   '),
-  reads: [
-    '--color-border',
-    '--color-text-body',
-    '--color-muted',
-    '--color-accent',
-    '--teach-sans',
-    '--teach-measure',
-    '--teach-mast-h',
-    '--t5',
-  ],
-  rules: `/* ---- In-lesson outline, in the gutter the measure leaves over ---- */
-
-.outline {
-  position: fixed;
-  top: calc(var(--teach-mast-h) + 2.2rem);
-  /* Four pixels of padding with the position pulled back by the same amount,
-     so a focus ring at the rail's edge has somewhere to draw. \`overflow-y\`
-     clips horizontally too, which took a bite out of every ring in here. */
-  left: calc(50% + var(--teach-measure) / 2 + 2.5rem - 4px);
-  padding: 0 4px;
-  width: calc(13rem + 8px);
-  max-height: calc(100vh - var(--teach-mast-h) - 4rem);
-  overflow-y: auto;
-  font-size: var(--t5);
-  line-height: 1.45;
-}
-
-/* The heading is a control rather than a label, because returning to the top
-   of a long lesson is the one thing the rail could not do. */
-.outline .to-top {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  width: 100%;
-  font-family: var(--teach-sans);
-  font-size: 0.6563rem;
-  font-weight: 700;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--color-muted);
-  background: none;
-  border: 0;
-  border-bottom: 1px solid var(--color-border);
-  border-radius: 3px 3px 0 0;
-  margin: 0 0 0.6rem;
-  padding: 0.2rem 0 0.55rem;
-  cursor: pointer;
-  text-align: left;
-}
+  reads: ['--color-text', '--color-text-secondary', '--color-accent', '--t6'],
+  rules: `/* ---- In-lesson outline, folded under the lesson being read ---- */
 
-.outline .to-top:hover { color: var(--color-accent); border-bottom-color: var(--color-border); }
+/* The rail this replaces was \`position: fixed\` in the right-hand gutter, which
+   only existed above 1420px and reported nothing at all below it. Folding the
+   headings under the current lesson puts the course and the lesson in one
+   column, so a reader tracks both in one place at any window width. */
+.sb-out { list-style: none; margin: 0.1rem 0 0.55rem; padding: 0 0 0 1.45rem; }
 
-.outline .to-top::before {
-  content: "";
-  width: 11px;
-  height: 8px;
-  background:
-    linear-gradient(var(--color-muted) 0 0) 0 0 / 11px 1.5px no-repeat,
-    linear-gradient(var(--color-muted) 0 0) 0 3.2px / 8px 1.5px no-repeat,
-    linear-gradient(var(--color-muted) 0 0) 0 6.5px / 11px 1.5px no-repeat;
-}
-
-.outline a {
+.sb-out a {
   display: block;
-  padding: 0.3rem 0 0.3rem 0.7rem;
-  border-left: 2px solid var(--color-border);
-  color: var(--color-muted);
+  padding: 0.18rem 0.5rem;
   text-decoration: none;
+  color: var(--color-text-secondary);
+  font-size: var(--t6);
 }
 
-.outline a:hover { color: var(--color-text-body); border-left-color: var(--color-border); }
-.outline a.on { color: var(--color-accent); border-left-color: var(--color-accent); }
-
-@media (max-width: 1420px) { .outline { display: none; } }`,
+.sb-out a:hover { color: var(--color-text); }
+.sb-out a.on { color: var(--color-accent); }`,
 }
 
 const TEACH_REFERENCES: Component = {