explico 0.6.0 → 0.7.0

package/src/styles/global.css

@@ -891,15 +891,30 @@ body {
 
 /* Native browser tooltips: `<span title="…">` in Markdown content. A dotted
    underline and hover highlight — same visual treatment as abbreviation terms
-   (N14), distinguishing them from plain text and signalling a hover event. */
-.sl-markdown-content span[title] {
+   (N14), distinguishing them from plain text and signalling a hover event.
+   Excludes anything inside — or, for `.inline-equation`, that is — a rendered
+   equation: a `title` there is the equation's own dynamic "Copy LaTeX" hint
+   (`KeyedFloatEnhancer.astro`, `NotationLayer.astro`), which needs that
+   gesture's own `copy`/`help` cursor language below, not this feature's
+   term-tooltip styling — `[title]` on a leaf glyph would otherwise win that
+   cursor over the equation's inherited one, since a rule matching the
+   element itself always beats one only inherited from an ancestor. This has
+   to name the equation's own containers (`.keyed-equation`,
+   `.inline-equation`, `[data-notation-formula]`), not just `.katex-html`: a
+   *display* equation's KaTeX output is wrapped in an outer `.katex-display`
+   span first, which sits outside `.katex-html` and is exactly what a reader
+   hovers in the gutter between the equation and its number. */
+.sl-markdown-content
+  span[title]:not(.keyed-equation *, .inline-equation, .inline-equation *, [data-notation-formula] *) {
   text-decoration: underline dotted;
   text-underline-offset: 0.2em;
   cursor: help;
 }
 
-.sl-markdown-content span[title]:hover,
-.sl-markdown-content span[title]:focus-visible {
+.sl-markdown-content
+  span[title]:not(.keyed-equation *, .inline-equation, .inline-equation *, [data-notation-formula] *):hover,
+.sl-markdown-content
+  span[title]:not(.keyed-equation *, .inline-equation, .inline-equation *, [data-notation-formula] *):focus-visible {
   background: var(--sl-color-accent-low);
   color: var(--sl-color-text-accent);
 }
@@ -1013,21 +1028,29 @@ body {
 }
 
 /* The click-to-copy gesture (`KeyedFloatEnhancer.astro`) works on any part of
-   the equation that isn't a symbol with its own notation card — signal that
-   with a "copy" cursor there, while an explained symbol keeps its existing
-   "help" cursor (`NotationLayer.astro`). The second rule must out-specificity
-   the first regardless of which stylesheet loads later, so it repeats the
-   `.katex-html` step rather than relying on cascade order between files. */
-.sl-markdown-content .keyed-equation .katex-html,
-.sl-markdown-content .inline-equation .katex-html {
+   the box — including the reserved gutter between the equation and its
+   number/button, not just the rendered `.katex-html` — that isn't a symbol
+   with its own notation card or the number link itself: signal that with a
+   "copy" cursor there, inherited from the whole container rather than only
+   `.katex-html`, while an explained symbol keeps its existing "help" cursor
+   (`NotationLayer.astro`) and the number link its own `pointer`. The second
+   rule must out-specificity the first regardless of which stylesheet loads
+   later, so it repeats the container step rather than relying on cascade
+   order between files. */
+.sl-markdown-content .keyed-equation,
+.sl-markdown-content .inline-equation {
   cursor: copy;
 }
 
-.sl-markdown-content .keyed-equation .katex-html [data-notation-key],
-.sl-markdown-content .inline-equation .katex-html [data-notation-key] {
+.sl-markdown-content .keyed-equation [data-notation-key],
+.sl-markdown-content .inline-equation [data-notation-key] {
   cursor: help;
 }
 
+.sl-markdown-content a.keyed-equation__number {
+  cursor: pointer;
+}
+
 /* Hovering specifically an unexplained part (not a notation symbol) of a
    display equation highlights its copy button, so a reader can tell what
    clicking there will do before they click. `:has()` is well-supported by
@@ -1040,6 +1063,32 @@ body {
   color: var(--sl-color-text-accent);
 }
 
+/* Hovering the equation itself (anywhere along its line, not just its copy
+   button) highlights the whole box — the same `accent-low` background + ring
+   every other interactive notation surface uses (`[data-notation-key]:hover`
+   below, a glossary formula's own equivalent in `NotationFormula.astro`), so
+   a reader can tell the equation, not just its controls corner, is what
+   they're about to act on. Suppressed while hovering an explained symbol,
+   which already has its own distinct highlight and a different action. */
+.sl-markdown-content
+  .keyed-equation:hover:not(:has([data-notation-key]:hover)),
+.sl-markdown-content
+  .inline-equation:hover:not(:has([data-notation-key]:hover)) {
+  background: var(--sl-color-accent-low);
+  box-shadow: 0 0 0 0.12em var(--sl-color-accent-low);
+}
+
+@media (forced-colors: active) {
+  .sl-markdown-content
+    .keyed-equation:hover:not(:has([data-notation-key]:hover)),
+  .sl-markdown-content
+    .inline-equation:hover:not(:has([data-notation-key]:hover)) {
+    outline: 2px solid Highlight;
+    background: none;
+    box-shadow: none;
+  }
+}
+
 /* `data-copied` is set briefly by the click handler in `KeyedFloatEnhancer.astro`,
    the same "flash a tooltip, then remove the attribute" pattern as the
    glossary's copy-link button (`NotationGlossary.astro`) and the notation
@@ -1068,9 +1117,12 @@ body {
    here would break the reading line, which is the whole reason this exists
    instead of just reusing `.keyed-equation__copy`. `position: relative` only
    so its own "Copied!" flash (the click handler has no button to flash
-   instead) has something to anchor to. */
+   instead) has something to anchor to; `border-radius` matches the hover
+   highlight above and the `[data-notation-key]` glyph highlight it can
+   contain. */
 .sl-markdown-content .inline-equation {
   position: relative;
+  border-radius: 0.16em;
 }
 
 .sl-markdown-content .inline-equation[data-copied]::after {
@@ -1103,6 +1155,59 @@ body {
   }
 }
 
+/* The same "click anywhere in this box to copy its LaTeX" gesture as
+   `.keyed-equation`/`.inline-equation` above, generalized to any element
+   marked `[data-notation-formula]` regardless of which component rendered
+   it: a glossary entry's own formula and the notation popup's cloned copy
+   (`NotationFormula.astro`, `NotationLayer.astro`), or a lab's live
+   interactive equation (`render-lab-math.ts`, e.g.
+   `ProjectileRangeExplorer.tsx`). One canonical implementation here, instead
+   of duplicating it in every producer's own scoped styles, is what keeps
+   every current and future one consistent for free — the click handling
+   that sets `data-copied` (`NotationLayer.astro`) and the exclusion from the
+   native-tooltip styling above both already key off this same attribute. */
+[data-notation-formula] {
+  position: relative;
+  border-radius: 0.3rem;
+  cursor: copy;
+}
+
+[data-notation-formula] [data-notation-key] {
+  cursor: help;
+}
+
+[data-notation-formula]:hover:not(:has([data-notation-key]:hover)) {
+  background: var(--sl-color-accent-low);
+  box-shadow: 0 0 0 0.12em var(--sl-color-accent-low);
+}
+
+@media (forced-colors: active) {
+  [data-notation-formula]:hover:not(:has([data-notation-key]:hover)) {
+    outline: 2px solid Highlight;
+    background: none;
+    box-shadow: none;
+  }
+}
+
+/* Only fires when there's no dedicated copy button to flash instead — a
+   glossary entry's numbered formula has one
+   (`.notation-formula-copy[data-copied]` in `NotationFormula.astro`'s own
+   styles), and the click handler only ever sets `data-copied` directly on
+   this element when no such button exists, so the two never double up. */
+[data-notation-formula][data-copied]::after {
+  content: 'Copied!';
+  position: absolute;
+  inset-block-end: calc(100% + 0.3rem);
+  inset-inline-start: 0;
+  padding: 0.15rem 0.45rem;
+  border-radius: 0.35rem;
+  background: var(--sl-color-accent-low);
+  color: var(--sl-color-text-accent);
+  font-size: var(--sl-text-xs);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
 /* Once a reader has actually arrived at (or clicked through to) an equation —
    a deep-link on load, an in-page `[[eq:key]]` navigation, or pinning its
    preview card (`FloatRefLayer.astro`) — its number stays fully visible