explico 0.7.0 → 0.11.0

package/src/components/memo/Memo.astro

@@ -2,23 +2,44 @@
 /**
  * A collapsible side-note authored inline and moved between the surrounding
  * paragraphs by `remark-memo.mjs`. The remark adapter owns `number` and
- * `anchorId`; this component owns the block, persistence, hover preview, and
- * click/deep-link behavior.
+ * `anchorId`; this component owns the block, its marker's hover preview, and
+ * the marker's click behavior.
  *
- * The numbered permalink and chain-icon permalink are siblings of `<details>`,
- * positioned into its title row. They cannot be children of `<summary>`:
- * nesting a focusable link inside that disclosure control is invalid and trips
- * axe's `nested-interactive` rule.
+ * Named like every float (docs/plans/titles-and-containers.md Part 3): the
+ * required `caption` is the memo's bar and heads its preview; the optional
+ * `short` caption is what its marker's tooltip calls it. The marker is the
+ * memo's per-page letter (`a`, `b`, …), set as a superscript in the prose so
+ * it never reads as a citation's `[1]` (Q7); the bar shows the same letter.
+ *
+ * **A memo is a `######`-rank section** (Part 4): its bar is an `<h6>` in the
+ * same `.sl-heading-wrapper` a Markdown heading gets, marked collapsible, so
+ * `CollapsibleSections.astro` folds it exactly like a section — the gutter
+ * chevron, the hover peek, the "Hidden here: …" line, the animation, the
+ * chain icon that copies its link, persistence and print-as-shown. Its
+ * first-visit state is the course's `disclosure.memos` (closed by default),
+ * independent of `subsections`; `defaultOpen` overrides it at one memo. The
+ * `<h6>` is drawn by this component, not written in the lesson, so it is not
+ * in the outline, "On this page", or the heading rules — nor in the
+ * accessibility tree's headings (`role="none"`: a memo after a `##` is not a
+ * sixth-level heading of the page, and axe's heading order says so; the
+ * summary it sits in still reads its caption). The frame is marked
+ * `data-section-contained`, so neither its own heading nor any in its body
+ * ends a section around it (`section-parts.ts`), and its wrapper
+ * `data-section-to-end`, so its section is the whole body.
  */
+import { courseDisclosure } from '../disclosure/course-disclosure';
+
 export interface Props {
   /** Stable lowercase/hyphenated key used by the marker and persistence. */
   id: string;
-  /** Short summary shown on the disclosure itself. */
-  title: string;
-  /** Required context shown before the body in the marker's hover preview. */
-  description: string;
-  /** Optional prose label for the marker; omission gives the numbered `[n]` form. */
+  /** The memo's caption: its bar, and the head of its marker's hover preview. */
+  caption: string;
+  /** Optional short caption: the marker's tooltip; rule S1 measures it. */
+  short?: string;
+  /** Optional prose label for the marker; omission gives the lettered form. */
   label?: string;
+  /** State for a reader with nothing saved yet. Default: the course's `disclosure.memos`. */
+  defaultOpen?: boolean;
   /** Persist the reader's open/closed choice across visits, per page. Default: `true`. */
   rememberState?: boolean;
   /** Computed by `remark-memo.mjs` — never author this directly. */
@@ -29,8 +50,9 @@ export interface Props {
 
 const {
   id,
-  title,
-  description,
+  caption,
+  short,
+  defaultOpen,
   rememberState = true,
   number,
   anchorId,
@@ -39,149 +61,107 @@ const {
 if (typeof id !== 'string' || !id.trim()) {
   throw new Error('Memo requires a non-empty `id` prop.');
 }
-if (typeof title !== 'string' || !title.trim()) {
-  throw new Error('Memo requires a non-empty `title` prop.');
+for (const removed of ['title', 'description'] as const) {
+  if (removed in Astro.props) {
+    throw new Error(
+      `<Memo id="${id}"> has no \`${removed}\` prop: a memo is named by its \`caption\` (its bar and preview) and an optional \`short\` caption.`,
+    );
+  }
 }
-if (typeof description !== 'string' || !description.trim()) {
-  throw new Error('Memo requires a non-empty `description` prop.');
+if (typeof caption !== 'string' || !caption.trim()) {
+  throw new Error('Memo requires a non-empty `caption` prop.');
 }
 if (!number || !anchorId) {
   throw new Error(
     'Memo is missing its computed `number`/`anchorId` — register remark-memo after remark-mdx in the Markdown remark pipeline.',
   );
 }
+
+const open = defaultOpen ?? (await courseDisclosure()).memos.defaultOpen;
+const name = `Memo ${number}: ${short ?? caption}`;
 ---
 
-<div class="memo-block-frame">
-  <a
-    class="memo-block__anchor"
-    href={`#${anchorId}`}
-    aria-label={`Link to memo ${number}: ${title}`}
-    data-memo-self-link
-  >[{number}]</a>
-  <details
-    class="memo-block"
-    id={anchorId}
-    data-memo-key={id}
-    data-memo-number={number}
-    data-memo-description={description}
+<div
+  class="memo-block memo-block-frame ex-tier-aside ex-tier-aside--tinted"
+  data-memo-key={id}
+  data-memo-number={number}
+  data-memo-short={short}
+  data-section-contained
+>
+  <div
+    class="sl-heading-wrapper level-h6 memo-block__titlebar"
+    data-collapsible="true"
+    data-default-open={String(open)}
     data-remember-state={String(rememberState)}
+    data-section-to-end
   >
-    <summary class="memo-block__summary">{title}</summary>
-    <div class="memo-block__body">
-      <slot />
-    </div>
-  </details>
-  <a
-    class="memo-block__title-anchor"
-    href={`#${anchorId}`}
-    aria-label={`Link to memo ${number} titled “${title}”`}
-    data-memo-anchor-link
-  >
-    <svg
-      aria-hidden="true"
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      ><path
-        d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"
-      ></path></svg
+    <h6 id={anchorId} class="memo-block__heading" data-memo-number={number} role="none"
+      >{caption}</h6
+    >
+    <a class="sl-anchor-link" href={`#${anchorId}`}
+      ><span aria-hidden="true" class="sl-anchor-icon"
+        ><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"
+          ><path
+            d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 1 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 0 0-1.42-1.42m8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 1 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l3.88-3.89a4.49 4.49 0 0 0 0-6.33M8.83 15.17a1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.92-4.92a1 1 0 1 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42"
+          ></path></svg
+        ></span
+      ><span class="sr-only" data-pagefind-ignore>{name}</span></a
     >
-  </a>
+  </div>
+  <div class="memo-block__body">
+    <slot />
+  </div>
 </div>
 
 <style>
+  /* The aside tier, tinted (`ex-tier-aside ex-tier-aside--tinted`,
+     `surfaces.css`): a left rule and the accent tint, no box around it. Its
+     inline-start padding is the gutter the section chevron centres in, as
+     a `[card]` section's padding is. The folding itself — chevron, peek,
+     "Hidden here" line, animation — is the section wrapper's
+     (`CollapsibleSections.astro`, `global.css`). */
   .memo-block-frame {
-    position: relative;
+    --ex-section-gutter: 1.75rem;
     margin-block: 1rem;
-    border: 1px solid var(--sl-color-gray-5);
-    border-inline-start: 4px solid var(--sl-color-accent);
-    border-radius: 0.35rem;
-    background: color-mix(in srgb, var(--sl-color-bg) 95%, var(--sl-color-accent) 5%);
+    padding: 0.45rem 1rem 0.45rem var(--ex-section-gutter);
   }
 
-  .memo-block {
-    margin: 0;
-    padding: 0;
-    scroll-margin-block-start: 5rem;
+  .memo-block-frame > :global(*) {
+    margin-block: 0;
   }
 
-  .memo-block__summary {
-    padding: 0.7rem 2.75rem 0.7rem 3.25rem;
-    color: var(--sl-color-white);
-    font-weight: 600;
+  .memo-block__heading {
+    scroll-margin-block-start: 5rem;
   }
 
-  .memo-block__anchor {
-    position: absolute;
-    z-index: 1;
-    inset-block-start: 0.7rem;
-    inset-inline-start: 0.9rem;
+  /* The memo's letter before its caption: the same italic accent letter the
+     marker in the prose shows. Generated content, so the heading's text —
+     its accessible name and what a preview copies — stays the caption. */
+  .memo-block__heading::before {
+    content: attr(data-memo-number);
+    margin-inline-end: 0.45em;
     color: var(--sl-color-text-accent);
+    font-style: italic;
     font-weight: 600;
-    text-decoration: none;
-  }
-
-  .memo-block__anchor:hover,
-  .memo-block__anchor:focus-visible {
-    text-decoration: underline;
-    text-underline-offset: 0.15em;
-  }
-
-  .memo-block__title-anchor {
-    position: absolute;
-    z-index: 1;
-    inset-block-start: 0.55rem;
-    inset-inline-end: 0.65rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.75rem;
-    height: 1.75rem;
-    color: var(--sl-color-gray-3);
-    text-decoration: none;
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  .memo-block__title-anchor svg {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .memo-block__title-anchor:hover,
-  .memo-block__title-anchor:focus-visible {
-    color: var(--sl-color-text-accent);
-  }
-
-  .memo-block__title-anchor:focus-visible {
-    outline: 2px solid var(--sl-color-accent);
-    outline-offset: 0.1rem;
-  }
-
-  @media (hover: hover) {
-    .memo-block__title-anchor {
-      opacity: 0;
-    }
-
-    .memo-block__title-anchor:focus-visible,
-    .memo-block-frame:hover .memo-block__title-anchor {
-      opacity: 1;
-    }
+    font-size: 0.85em;
+    vertical-align: 0.3em;
   }
 
   .memo-block__body {
-    padding: 0 0.9rem 0.9rem;
+    padding-block-start: 0.5rem;
   }
 
-  .memo-block__body > :first-child {
+  .memo-block__body > :global(:first-child) {
     margin-block-start: 0;
   }
 
+  /* A superscript italic letter, the footnote convention — never the
+     bracketed `[1]` a citation prints. */
   :global(.sl-markdown-content .memo-marker) {
+    padding-inline: 0.1em;
     border-radius: 0.2em;
     color: var(--sl-color-text-accent);
+    font-style: italic;
     font-weight: 600;
     text-decoration: underline;
     text-underline-offset: 0.15em;
@@ -202,7 +182,7 @@ if (!number || !anchorId) {
     vertical-align: super;
   }
 
-  :global(.memo-preview__description) {
+  :global(.memo-preview__caption) {
     margin: 0 0 0.65rem;
     color: var(--sl-color-gray-2);
   }
@@ -216,29 +196,13 @@ if (!number || !anchorId) {
 
   @media print {
     .memo-block-frame {
-      border-color: currentColor;
       background: transparent;
     }
-
-    .memo-block__summary::before {
-      display: none !important;
-    }
-
-    .memo-block__title-anchor {
-      display: none;
-    }
-
-    /* The script opens the native disclosure while print media is active.
-       Keep the body explicit in case author CSS would otherwise hide it. */
-    .memo-block__body {
-      display: block !important;
-    }
   }
 </style>
 
 <script>
   import { attachHoverPeek, closeHoverPeek } from '../disclosure/hover-preview';
-  import { wirePersistedDetails } from '../disclosure/persisted-disclosure';
   import { animatedScrollIntoView } from '../scroll-animation';
 
   let memoPreviewSerial = 0;
@@ -317,132 +281,99 @@ if (!number || !anchorId) {
     return clone;
   }
 
-  function targetInside(details: HTMLDetailsElement): boolean {
-    if (!location.hash) return false;
-    let id = location.hash.slice(1);
-    try {
-      id = decodeURIComponent(id);
-    } catch {
-      /* keep the raw fragment */
-    }
-    const target = document.getElementById(id);
-    return target === details || (!!target && details.contains(target));
-  }
 
-  document
-    .querySelectorAll<HTMLDetailsElement>('.memo-block:not([data-memo-wired])')
-    .forEach((details) => {
-      details.dataset.memoWired = 'true';
-      const key = details.dataset.memoKey;
-      const number = details.dataset.memoNumber;
-      const body = details.querySelector<HTMLElement>(':scope > .memo-block__body');
-      const summary = details.querySelector<HTMLElement>(
-        ':scope > .memo-block__summary',
-      );
-      const selfLinks = Array.from(
-        details.parentElement?.querySelectorAll<HTMLAnchorElement>(
-          ':scope > [data-memo-self-link], :scope > [data-memo-anchor-link]',
-        ) ?? [],
-      );
-      if (!key || !number || !body || !summary || selfLinks.length === 0) return;
+  // The section wrapper (`CollapsibleSections.astro`) builds the memo's
+  // `<details>` at runtime, possibly after this script: find it lazily.
+  const sectionOf = (heading: HTMLElement) =>
+    heading.closest<HTMLDetailsElement>('details.sl-section-collapsible');
+  const whenSection = (
+    frame: HTMLElement,
+    heading: HTMLElement,
+    ready: (details: HTMLDetailsElement) => void,
+  ) => {
+    const found = sectionOf(heading);
+    if (found) return ready(found);
+    const observer = new MutationObserver(() => {
+      const details = sectionOf(heading);
+      if (!details) return;
+      observer.disconnect();
+      ready(details);
+    });
+    observer.observe(frame, { childList: true, subtree: true });
+  };
 
-      if (details.dataset.rememberState === 'true') {
-        wirePersistedDetails(details, `memo:${key}`, false);
-      } else {
-        details.open = false;
-      }
+  document
+    .querySelectorAll<HTMLElement>('.memo-block[data-memo-key]:not([data-memo-wired])')
+    .forEach((frame) => {
+      frame.dataset.memoWired = 'true';
+      const key = frame.dataset.memoKey;
+      const number = frame.dataset.memoNumber;
+      const heading = frame.querySelector<HTMLElement>('.memo-block__heading');
+      const body = frame.querySelector<HTMLElement>('.memo-block__body');
+      if (!key || !number || !heading || !body) return;
 
       const markers = Array.from(
         document.querySelectorAll<HTMLAnchorElement>(
           `.memo-marker[data-memo-key="${key}"]`,
         ),
-      ).filter(
-        (marker) => marker.getAttribute('aria-controls') === details.id,
-      );
-
-      const syncMarkers = () => {
-        for (const marker of markers) {
-          marker.setAttribute('aria-expanded', String(details.open));
-          if (details.open) closeHoverPeek(marker);
-        }
-      };
-      details.addEventListener('toggle', syncMarkers);
-      syncMarkers();
-
-      const revealForHash = () => {
-        if (targetInside(details)) details.open = true;
-      };
-      revealForHash();
-      window.addEventListener('hashchange', revealForHash);
-
-      for (const selfLink of selfLinks) {
-        selfLink.addEventListener('click', (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          details.open = true;
-          if (location.hash !== `#${details.id}`) {
-            history.pushState(null, '', `#${details.id}`);
+      ).filter((marker) => marker.getAttribute('aria-controls') === heading.id);
+      const isOpen = () => sectionOf(heading)?.dataset.state === 'open';
+
+      whenSection(frame, heading, (details) => {
+        const syncMarkers = () => {
+          for (const marker of markers) {
+            marker.setAttribute('aria-expanded', String(isOpen()));
+            if (isOpen()) closeHoverPeek(marker);
           }
+        };
+        new MutationObserver(syncMarkers).observe(details, {
+          attributes: true,
+          attributeFilter: ['data-state'],
         });
-      }
-
-      // A closed native <details> suppresses its body at the UA rendering
-      // layer, beyond what an author stylesheet can reliably override. Open it
-      // while print media is active, then put the reader's exact screen state
-      // back when the print dialog/export ends (the same approach used by
-      // CollapsibleSections for its native disclosures).
-      const printMedia = window.matchMedia('print');
-      let screenOpen: boolean | null = null;
-      const syncPrintState = () => {
-        if (document.querySelector('[data-explico-print-controller]')) return;
-        if (printMedia.matches) {
-          if (screenOpen === null) screenOpen = details.open;
-          details.open = true;
-        } else if (screenOpen !== null) {
-          details.open = screenOpen;
-          screenOpen = null;
-        }
-      };
-      printMedia.addEventListener('change', syncPrintState);
-      window.addEventListener('beforeprint', syncPrintState);
-      window.addEventListener('afterprint', syncPrintState);
-      syncPrintState();
+        syncMarkers();
+      });
 
       for (const marker of markers) {
         const suppressWhenOpen = (event: Event) => {
-          if (details.open) event.stopImmediatePropagation();
+          if (isOpen()) event.stopImmediatePropagation();
         };
         marker.addEventListener('pointerenter', suppressWhenOpen);
         marker.addEventListener('focus', suppressWhenOpen);
 
         attachHoverPeek(marker, {
           label: `Memo ${number} preview`,
-          // Keep the description visible above up to 20em of body content.
+          // Keep the caption visible above up to 20em of body content.
           maxHeightEm: 24,
           getContent: () => {
             const wrap = document.createElement('div');
-            const heading = document.createElement('strong');
-            heading.textContent = summary.textContent?.trim() || `Memo ${number}`;
-            const description = document.createElement('p');
-            description.className = 'memo-preview__description';
-            description.textContent = details.dataset.memoDescription ?? '';
-            wrap.append(heading, description, cloneMemoBody(body));
+            const caption = document.createElement('p');
+            caption.className = 'memo-preview__caption';
+            const letter = document.createElement('strong');
+            letter.textContent = `Memo ${number}`;
+            caption.append(letter, ` ${heading.textContent?.trim() ?? ''}`);
+            wrap.append(caption, cloneMemoBody(body));
             return wrap;
           },
         });
 
+        // The marker opens the memo where it is and goes there, and closes
+        // it again: the section's own summary does the folding, so the
+        // animation, the peek and the saved choice stay the section's.
         marker.addEventListener('click', (event) => {
+          const details = sectionOf(heading);
+          const summary = details?.querySelector<HTMLElement>(':scope > summary');
+          if (!details || !summary) return;
           event.preventDefault();
-          const opening = !details.open;
-          details.open = opening;
+          const opening = !isOpen();
+          summary.click();
           if (!opening) return;
 
           closeHoverPeek(marker);
-          if (location.hash !== `#${details.id}`) {
-            history.pushState(null, '', `#${details.id}`);
+          if (location.hash !== `#${heading.id}`) {
+            history.pushState(null, '', `#${heading.id}`);
           }
           requestAnimationFrame(() => {
-            animatedScrollIntoView(details, { block: 'start' });
+            animatedScrollIntoView(frame, { block: 'start' });
           });
         });
       }

package/src/components/memo/ShortNote.astro

@@ -30,7 +30,7 @@ if (!anchorId) {
 ---
 
 <aside
-  class="short-note"
+  class="short-note ex-tier-aside"
   id={anchorId}
   data-short-note-key={id}
   aria-label={description}
@@ -43,11 +43,12 @@ if (!anchorId) {
 </aside>
 
 <style>
+  /* Opened, the note is the aside tier untinted (`ex-tier-aside`,
+     `surfaces.css`): the shared left rule and nothing else. */
   .short-note {
     margin-block: 0.65rem;
     padding-inline-start: 0.9rem;
     scroll-margin-block-start: 5rem;
-    border-inline-start: 2px solid var(--sl-color-accent);
   }
 
   .short-note[hidden] {
@@ -105,10 +106,9 @@ if (!anchorId) {
   }
 
   @media print {
-    .short-note[hidden] {
-      display: block !important;
-    }
-
+    /* No `.short-note[hidden]` override: print follows the screen
+       (`../disclosure/print-as-shown.ts`), so a note the reader left closed
+       stays closed and gets a "(content collapsed …)" note instead. */
     .short-note__collapse {
       display: none;
     }

package/src/components/notation/NotationFormula.astro

@@ -56,6 +56,9 @@ registerPageNotationDependencies(
 );
 const latex = stripNotationMarkers(formula);
 const numbered = Boolean(number && numberHref);
+// The copy tooltip names what it copies, the way a lesson equation's does
+// with its `\caption{}`: here the owning entry's label.
+const copyTitle = entryLabel ? `Copy LaTeX — ${entryLabel}` : 'Copy LaTeX';
 ---
 
 <div class="notation-formula-block">
@@ -63,6 +66,7 @@ const numbered = Boolean(number && numberHref);
     class:list={['notation-formula-math', numbered && 'notation-formula-math--numbered']}
     data-notation-formula
     data-latex={latex}
+    data-copy-title={copyTitle}
     role="group"
     aria-label={entryLabel ? `${entryLabel} formula` : 'Formula'}
   >
@@ -87,7 +91,7 @@ const numbered = Boolean(number && numberHref);
           data-notation-formula-copy
           data-latex={latex}
           aria-label={`Copy LaTeX for Equation ${number}`}
-          title="Copy LaTeX"
+          title={copyTitle}
         >
           <svg viewBox="0 0 24 24" aria-hidden="true">
             <rect x="9" y="9" width="10" height="10" rx="1"></rect>

package/src/components/notation/NotationGlossary.astro

@@ -150,7 +150,7 @@ const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
         (left, right) => left.data.title.localeCompare(right.data.title),
       );
       return (
-        <article id={`notation-${entry.data.key}`}>
+        <article id={`notation-${entry.data.key}`} class="ex-tier-meta">
           <header>
             <span
               class="glossary-symbol-trigger"
@@ -159,13 +159,19 @@ const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
               <NotationMath class="glossary-symbol" latex={entry.data.latex} />
             </span>
             <div>
-              <h2>
-                <a
-                  class="glossary-term-link"
-                  href={`#notation-${entry.data.key}`}
-                >
-                  {labelOf(entry.data)}
-                </a>
+              {/* The anchor is a sibling of the heading, not a child — the
+                  same shape `rehype-heading-anchors` gives a lesson heading.
+                  Inside the `h2` its `aria-label` joins the heading's
+                  accessible name ("Velocity Link to “Velocity”"). */}
+              <div class="glossary-heading">
+                <h2>
+                  <a
+                    class="glossary-term-link"
+                    href={`#notation-${entry.data.key}`}
+                  >
+                    {labelOf(entry.data)}
+                  </a>
+                </h2>
                 <a
                   class="glossary-anchor"
                   href={`#notation-${entry.data.key}`}
@@ -177,7 +183,7 @@ const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
                     </svg>
                   </span>
                 </a>
-              </h2>
+              </div>
               <code>{entry.data.key}</code>
             </div>
             <span class="glossary-status">{entry.data.editorialStatus}</span>
@@ -310,12 +316,11 @@ const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
     margin-block-start: 2rem;
   }
 
+  /* A generated reference entry: the meta tier (`ex-tier-meta`,
+     `surfaces.css`) draws its surface, border and radius. */
   article {
     scroll-margin-block-start: 5rem;
     padding: 1.25rem;
-    border: 1px solid var(--sl-color-gray-5);
-    border-radius: 0.7rem;
-    background: var(--sl-color-gray-7);
   }
 
   article > header {
@@ -330,6 +335,11 @@ const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
     font-size: var(--sl-text-xl);
   }
 
+  .glossary-heading {
+    display: flex;
+    align-items: center;
+  }
+
   .glossary-term-link {
     color: inherit;
     text-decoration: none;
@@ -396,8 +406,8 @@ const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
       opacity: 0;
     }
 
-    h2:hover .glossary-anchor,
-    h2:focus-within .glossary-anchor,
+    .glossary-heading:hover .glossary-anchor,
+    .glossary-heading:focus-within .glossary-anchor,
     .glossary-anchor:focus-visible {
       opacity: 1;
     }