@erclx/canon 4.110.0 → 4.112.0

package/src/design/components.ts

@@ -223,6 +223,7 @@ const TEACH_CHROME: Component = {
   reads: [
     '--color-background',
     '--color-surface',
+    '--color-chrome',
     '--color-border',
     '--color-text',
     '--color-text-body',
@@ -232,7 +233,6 @@ const TEACH_CHROME: Component = {
     '--teach-sans',
     '--teach-mono',
     '--teach-measure',
-    '--teach-chrome',
     '--teach-shadow',
     '--color-teach-accent-bg',
     '--type-body-family',
@@ -247,8 +247,7 @@ const TEACH_CHROME: Component = {
   --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));
 
@@ -292,7 +291,7 @@ body {
   color: var(--color-text-body);
   font-family: var(--teach-sans);
   font-size: var(--t3);
-  line-height: 1.62;
+  line-height: 1.55;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -328,6 +327,7 @@ html.sb-shut .pane { border-left: 0; }
   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
@@ -345,37 +345,26 @@ html.sb-shut .pane { border-left: 0; }
 }
 
 /* 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. */
+   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;
+  max-width: none;
+  margin: 0;
   min-height: var(--teach-mast-h);
-  padding: 0;
+  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;
@@ -404,10 +393,9 @@ html.sb-shut .pane { border-left: 0; }
 
 .nav .lbl {
   display: block;
-  font-size: 0.6563rem;
+  font-size: var(--t6);
   font-weight: 700;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
+  letter-spacing: 0;
   color: var(--color-muted);
   margin-bottom: 0.15rem;
 }
@@ -422,7 +410,7 @@ html.sb-shut .pane { border-left: 0; }
    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
@@ -430,6 +418,7 @@ html.sb-shut .pane { border-left: 0; }
 .crumb-sep {
   color: var(--color-muted);
   font-size: var(--t4);
+  margin: 0 0.1rem;
   user-select: none;
 }
 
@@ -442,27 +431,55 @@ html.sb-shut .pane { border-left: 0; }
 
 .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,
@@ -478,23 +495,25 @@ html.sb-shut .pane { border-left: 0; }
   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; }
@@ -528,7 +547,7 @@ html.sb-shut .pane { border-left: 0; }
   cursor: pointer;
 }
 
-.sb-fold:hover { color: var(--color-text); background: var(--color-surface); }
+.sb-fold:hover { color: var(--color-text); background: var(--color-chrome); }
 
 .sb {
   flex: 0 0 var(--sb-w, 16rem);
@@ -564,7 +583,7 @@ html.sb-shut .sb { flex-basis: 0; width: 0; overflow: hidden; }
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  padding: 0.2rem 0.4rem;
+  padding: 0.25rem 0.3rem;
   border-radius: 6px;
   font-size: var(--t4);
   font-weight: 650;
@@ -572,7 +591,7 @@ html.sb-shut .sb { flex-basis: 0; width: 0; overflow: hidden; }
 }
 
 .sb-ws > summary::-webkit-details-marker { display: none; }
-.sb-ws > summary:hover, .sb-ws[open] > summary { background: var(--color-surface); color: var(--color-text); }
+.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 {
@@ -585,7 +604,7 @@ html.sb-shut .sb { flex-basis: 0; width: 0; overflow: hidden; }
   border: 1px solid var(--color-border);
   border-radius: 9px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
-  padding: 0.25rem;
+  padding: 0.3rem;
 }
 
 :root[data-theme="dark"] .sb-wl { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); }
@@ -644,7 +663,7 @@ html.sb-shut .sb { flex-basis: 0; width: 0; overflow: hidden; }
   line-height: 1.45;
 }
 
-.sb-l:hover { background: var(--color-surface); color: var(--color-text); }
+.sb-l:hover { background: var(--color-chrome); color: var(--color-text); }
 
 .sb-n {
   flex: none;
@@ -764,46 +783,47 @@ html.sb-shut .sb-grip { display: none; }
 }
 
 .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-surface); }
-.jump-list .n { font-family: var(--teach-mono); font-size: 0.75rem; color: var(--color-muted); }
+.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. */
@@ -825,11 +845,11 @@ html.sb-shut .sb-grip { display: none; }
 .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);
 }
 
@@ -850,8 +870,7 @@ html.sb-shut .sb-grip { display: none; }
 @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) {
@@ -933,7 +952,7 @@ html.sb-shut .sb-grip { display: none; }
     cursor: pointer;
   }
 
-  .sb-close:hover { color: var(--color-text); background: var(--color-surface); }
+  .sb-close:hover { color: var(--color-text); background: var(--color-chrome); }
 
   .sb-scrim {
     display: block;
@@ -971,6 +990,9 @@ const TEACH_ARTICLE: Component = {
     '--color-accent',
     '--teach-hand',
     '--teach-mono',
+    '--t1',
+    '--t2',
+    '--t3',
     '--t4',
     '--t5',
     '--t6',
@@ -978,8 +1000,8 @@ const TEACH_ARTICLE: Component = {
   rules: `/* ---- Type ---- */
 
 h1 {
-  font-size: 2.15rem;
-  line-height: 1.14;
+  font-size: var(--t1);
+  line-height: 1.1;
   font-weight: 800;
   letter-spacing: -0.022em;
   margin: 0 0 0.55rem;
@@ -987,19 +1009,20 @@ h1 {
 }
 
 h2 {
-  font-size: 1.3rem;
+  font-size: var(--t2);
+  line-height: 1.3;
   font-weight: 700;
   letter-spacing: -0.012em;
   margin: 3rem 0 0.85rem;
 }
 
-h3 { font-size: 1.03rem; font-weight: 700; margin: 1.9rem 0 0.4rem; }
+h3 { font-size: var(--t3); line-height: 1.55; font-weight: 700; margin: 1.9rem 0 0.4rem; }
 
 p { margin: 0 0 1.15rem; }
 
 .lede {
-  font-size: 1.1875rem;
-  line-height: 1.5;
+  font-size: var(--t3);
+  line-height: 1.55;
   color: var(--color-text-secondary);
   margin-bottom: 2rem;
 }
@@ -1011,8 +1034,8 @@ em { font-style: italic; }
 /* ---- Panels ---- */
 
 .assumes, .progress {
-  font-size: 0.8438rem;
-  line-height: 1.7;
+  font-size: var(--t5);
+  line-height: 1.6;
   color: var(--color-text-secondary);
   background: var(--color-surface);
   border-radius: 7px;
@@ -1024,8 +1047,7 @@ em { font-style: italic; }
   display: block;
   color: var(--color-muted);
   font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  letter-spacing: 0;
   font-size: var(--t6);
   margin-bottom: 0.2rem;
 }
@@ -1043,7 +1065,7 @@ code {
 pre {
   font-family: var(--teach-mono);
   font-size: var(--t5);
-  line-height: 1.7;
+  line-height: 1.6;
   background: var(--color-surface);
   padding: 1.15rem 1.3rem;
   border-radius: 7px;
@@ -1064,7 +1086,7 @@ pre code { background: none; padding: 0; font-size: 1em; }
 
 .hard-label {
   font-family: var(--teach-hand);
-  font-size: 1.0625rem;
+  font-size: var(--t3);
   color: var(--color-accent);
   display: block;
   margin-bottom: 0.35rem;
@@ -1074,15 +1096,14 @@ pre code { background: none; padding: 0; font-size: 1em; }
 
 /* ---- Tables ---- */
 
-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0 0 1.5rem; }
+table { width: 100%; border-collapse: collapse; font-size: var(--t4); margin: 0 0 1.5rem; }
 th, td { text-align: right; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--color-border); }
 th:first-child, td:first-child { text-align: left; }
 
 th {
   font-weight: 700;
-  font-size: 0.75rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  font-size: var(--t5);
+  letter-spacing: 0;
   color: var(--color-muted);
   border-bottom-color: var(--color-border);
 }
@@ -1107,26 +1128,22 @@ tbody tr.mark td { background: var(--color-teach-accent-bg); }
 }
 
 .toc a:hover { background: var(--color-surface); }
-.toc .num { font-family: var(--teach-mono); font-size: var(--t5); color: var(--color-accent); }
-.toc b { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.012em; }
+.toc .num { font-family: var(--teach-mono); font-size: var(--t5); color: var(--color-muted); }
+.toc b { font-size: var(--t3); font-weight: 700; letter-spacing: -0.012em; }
 
 .toc .blurb {
   grid-column: 2;
   font-size: var(--t4);
-  line-height: 1.5;
+  line-height: 1.55;
   color: var(--color-text-secondary);
   margin-top: 0.1rem;
 }
 
-/* A dot and a word, not a pill. The jump menus already say written and
-   planned with a filled or hollow dot, so the bordered uppercase badge was a
-   second vocabulary for a fact the design system already had one for. Sentence
-   case and no tracking, per the UI copy rule. */
+/* A word, not a pill and not a dot. A mark reading the same on every live row
+   reports nothing, so the dot retired here as it did from the jump menus.
+   Sentence case and no tracking, per the UI copy rule. */
 .toc .state {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.42rem;
-  font-size: 0.75rem;
+  font-size: var(--t5);
   font-weight: 500;
   letter-spacing: 0;
   text-transform: none;
@@ -1134,24 +1151,10 @@ tbody tr.mark td { background: var(--color-teach-accent-bg); }
   white-space: nowrap;
 }
 
-.toc .state::before {
-  content: "";
-  width: 6px;
-  height: 6px;
-  border-radius: 99px;
-  background: var(--color-border);
-  flex: none;
-}
-
-.toc .state.done { color: var(--color-text-secondary); }
-.toc .state.done::before { background: var(--color-accent); }
-.toc .state.next { color: var(--color-text-secondary); }
-.toc .state.next::before { background: var(--color-accent); }
-
 /* A link leaving the page says so with a mark beside it rather than with a
    badge spelling out the sentence. */
 .toc .ext {
-  font-size: 0.875rem;
+  font-size: var(--t4);
   color: var(--color-muted);
   margin-left: 0.35rem;
 }
@@ -1162,7 +1165,7 @@ ol.succ {
   margin: 0 0 2.5rem;
   padding-left: 1.35rem;
   font-size: var(--t4);
-  line-height: 1.6;
+  line-height: 1.55;
   color: var(--color-text-secondary);
 }
 
@@ -1185,10 +1188,6 @@ ol.succ li { margin-bottom: 0.4rem; }
    accent. Suppressing it only where the token above replaces it. */
 :where(a, button, summary, input, .opt):focus:not(:focus-visible) { outline: none; }
 
-@media (max-width: 640px) {
-  body { font-size: 1.0625rem; }
-}
-
 /* The week plan. Its markup shipped with no rule matching any of its five
    classes, so it rendered as a run of inline spans with the ordinal, the
    title, the description, and the duration all touching. */
@@ -1218,7 +1217,7 @@ ol.succ li { margin-bottom: 0.4rem; }
 
 .road-t {
   font-family: var(--teach-mono);
-  font-size: 0.75rem;
+  font-size: var(--t5);
   color: var(--color-muted);
   white-space: nowrap;
 }
@@ -1253,6 +1252,7 @@ const TEACH_QUIZ: Component = {
     '--color-teach-accent-bg',
     '--t4',
     '--t5',
+    '--t6',
   ],
   rules: `/* ---- Quiz ---- */
 
@@ -1284,7 +1284,7 @@ const TEACH_QUIZ: Component = {
 .opt::before {
   content: attr(data-k);
   font-family: var(--teach-mono);
-  font-size: 0.7188rem;
+  font-size: var(--t6);
   color: var(--color-muted);
   border: 1px solid var(--color-border);
   border-radius: 5px;
@@ -1309,23 +1309,21 @@ const TEACH_QUIZ: Component = {
 }
 
 .opt[data-state="chosen"]::after {
-  content: "your answer";
+  content: "Your answer";
   margin-left: auto;
-  font-size: 0.6563rem;
+  font-size: var(--t6);
   font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
+  letter-spacing: 0;
   color: var(--color-muted);
   align-self: center;
 }
 
 .opt[data-state="right"]::after {
-  content: "correct";
+  content: "Correct";
   margin-left: auto;
-  font-size: 0.6563rem;
+  font-size: var(--t6);
   font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
+  letter-spacing: 0;
   color: var(--color-accent);
   align-self: center;
 }
@@ -1374,34 +1372,37 @@ const TEACH_GLOSSARY: Component = {
   ],
   rules: `/* ---- Glossary view, generated from the markdown source ---- */
 
-h2 .count {
-  font-family: var(--teach-mono);
-  font-size: 0.75rem;
-  font-weight: 400;
-  color: var(--color-muted);
-  border: 1px solid var(--color-border);
-  border-radius: 99px;
-  padding: 0.1rem 0.5rem;
-  margin-left: 0.5rem;
-  vertical-align: middle;
+/* No border, sitting on the page ground, with the count beside it. The border and the
+   reading surface are what made the control look like something to fill in,
+   and the count is what says it filters the list under it. */
+.filter-row {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+  margin: 0 0 1rem;
 }
 
 .filter {
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   font-family: var(--teach-sans);
   font-size: var(--t4);
   color: var(--color-text-body);
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: 7px;
-  padding: 0.55rem 0.8rem;
-  margin: 0 0 1rem;
+  background: transparent;
+  border: 0;
+  padding: 0.3rem 0;
 }
 
-/* Scoped to pointer focus. Written as \`.filter:focus\` it outranked the
-   \`:where(...)\` focus token, whose specificity is zero, and the filter was the
-   one control on the page that a keyboard reached with no ring at all. */
-.filter:focus { border-color: var(--color-accent); }
+.filter-count {
+  font-family: var(--teach-mono);
+  font-size: var(--t5);
+  color: var(--color-muted);
+  white-space: nowrap;
+}
+
+/* The \`:where(...)\` focus token has zero specificity, so a \`.filter:focus\`
+   rule outranks it and leaves a keyboard reaching the control with no ring.
+   The ring stays the token's and only the pointer ring is dropped. */
 .filter:focus:not(:focus-visible) { outline: none; }
 .filter::placeholder { color: var(--color-muted); }
 
@@ -1449,8 +1450,7 @@ h2 .count {
   font-size: var(--t5);
   font-weight: 600;
   color: var(--color-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
+  letter-spacing: 0;
 }
 
 .gloss-group:first-of-type { margin-top: 0; }
@@ -1469,7 +1469,7 @@ ol.succ {
   margin: 0 0 2.5rem;
   padding-left: 1.35rem;
   font-size: var(--t4);
-  line-height: 1.6;
+  line-height: 1.55;
   color: var(--color-text-secondary);
 }
 
@@ -1479,7 +1479,7 @@ ol.succ li { margin-bottom: 0.4rem; }
 /* A filter that matches nothing needs a way back, not just a sentence. */
 .gloss .empty .clear {
   font-family: var(--teach-sans);
-  font-size: 0.875rem;
+  font-size: var(--t4);
   color: var(--color-accent);
   background: none;
   border: 0;
@@ -1534,6 +1534,7 @@ const TEACH_REFERENCES: Component = {
     '--teach-mono',
     '--color-teach-accent-bg',
     '--t5',
+    '--t6',
   ],
   rules: `footer {
   margin-top: 4rem;
@@ -1548,7 +1549,7 @@ const TEACH_REFERENCES: Component = {
 
 sup.cite {
   font-family: var(--teach-mono);
-  font-size: 0.6875em;
+  font-size: var(--t6);
   line-height: 0;
   margin-left: 0.1em;
 }
@@ -1569,7 +1570,7 @@ ol.refs {
   padding: 0;
   margin: 0.9rem 0 1.1rem;
   font-size: var(--t5);
-  line-height: 1.55;
+  line-height: 1.6;
 }
 
 ol.refs li {