reviewzy 0.3.0 → 0.4.0

package/src/dashboard/static/tokens.css

@@ -60,6 +60,20 @@
   --surface-2: oklch(0.345 0.026 280);   /* hover, nested         */
   --surface-3: oklch(0.395 0.028 280);   /* pressed, selected     */
 
+  /* The sky: one light above the page, the page hue drifted toward the accent,
+     painted on body::after as a radial ground 780px tall. The stops are
+     declared grounds, never an alpha over the page, so each is a measured pair.
+     On the peak: --text 9.89, --text-2 7.13, --text-3 5.37, --text-4 4.62:1,
+     --accent-text 7.73. On the mid: 10.87 / 7.84 / 5.90 / 5.08, --accent-text
+     8.50. NO HEADROOM: --text-4 falls under 4.5:1 once the ground passes
+     L 0.31, so the peak never rises. */
+  --sky-peak:  oklch(0.305 0.040 252);
+  --sky-mid:   oklch(0.278 0.032 262);
+  /* The accent band's ground, the page's closing ask: the page tone turned
+     toward the sapphire. --text 11.26, --text-2 8.12, --text-3 6.11, --text-4
+     5.26:1, --accent-text 8.81, and --accent as a fill 7.21 against it. */
+  --band-accent: oklch(0.265 0.050 242);
+
   /* The system draws its own scrollbar, so the thumb is a graphic this file owns
      and it clears 3:1 on every ground a scroller has: 5.20:1 on --well, 4.68 on
      --bg, 4.05 on --surface-1, 3.43 on a --surface-2 hover tint. --surface-3, the
@@ -87,25 +101,45 @@
 
      Measured on a 300x140 card, blue channel against --bg, deepest pixel and
      the width of that last 1-level band:
-       --elev-1      24 levels under, 12 beside; band 5px under, 5px beside
+       --elev-1      23 levels under, 11 beside; band 3px under, 2px beside
        --elev-2      23 / 12;  band 7 / 6
        --elev-float  34 / 18;  band 8 / 6
      The shipped v1 set measured 9 / 5 with a 15px band, which is the ring.
 
+     DEPTH IS NOT WHAT DRAWS THE CORNER, REACH IS. --elev-1's outer coat ran
+     `0 8px 16px -6px` and its footprint reached 21px under the card, 13 beside
+     and 18 out of the corner on the diagonal, so the far end of the footprint
+     closed as a curve tracing the box and the corner read as a smear. Depth was
+     never the problem: at `0 4px 8px -4px` the deepest pixel moves 24 to 23 and
+     the reach halves to 10 / 6 / 10.
+
      THE EDGE IS WHAT THE EYE READS AS THE CARD STARTING, not the tone step.
      A card sits .045 L over the page and .065 is not available: the fourth
      text step falls to 4.40:1 on it. So separation is bought on the edge and
-     the contact instead, where no colour moves and no ratio re-derives. */
+     the contact instead, where no colour moves and no ratio re-derives.
+     Measured on a card at --surface-1: --lit-1 paints 18 sRGB levels of lift
+     along the top, --lit-2 21.
+
+     A CARD CARRIES A DRAWN LINE. `.card` and `.stat-card` take `--card-line`,
+     a crisp 1px line drawn outside the box (box-shadow 0 0 0 1px, zero blur,
+     content box unchanged). A card at rest
+     wears the one line and no coat. Every other raised surface keeps the straight --lit-1,
+     and glass keeps --glass-edge. The line is a hairline, not a graphic, so it
+     is not held to a 3:1 floor; measured with tools/contrast.mjs against the
+     card's own fill and every surface it sits on, tightest first: sky peak
+     2.03:1, --surface-1 (the fill) 2.08:1, sky mid 2.24:1, --band-accent
+     2.32:1, --bg 2.41:1, --well 2.67:1. */
   --lit-1: inset 0 1px 0 0 oklch(1 0 0 / 0.085);
   --lit-2: inset 0 1px 0 0 oklch(1 0 0 / 0.100);
-  --elev-1: var(--lit-1),
-            0 1px 2px -1px oklch(0.11 0.025 280 / 0.72),
-            0 3px 6px -2px oklch(0.11 0.025 280 / 0.68),
-            0 8px 16px -6px oklch(0.11 0.025 280 / 0.64);
-  --elev-2: var(--lit-2),
-            0 1px 2px -1px oklch(0.11 0.025 280 / 0.66),
-            0 4px 8px -2px oklch(0.11 0.025 280 / 0.62),
-            0 10px 18px -8px oklch(0.11 0.025 280 / 0.58);
+  --card-line: oklch(0.48 0.032 280);
+  --contact-1: 0 1px 2px -1px oklch(0.11 0.025 280 / 0.72),
+               0 2px 4px -1px oklch(0.11 0.025 280 / 0.66),
+               0 4px 8px -4px oklch(0.11 0.025 280 / 0.60);
+  --contact-2: 0 1px 2px -1px oklch(0.11 0.025 280 / 0.66),
+               0 4px 8px -2px oklch(0.11 0.025 280 / 0.62),
+               0 10px 18px -8px oklch(0.11 0.025 280 / 0.58);
+  --elev-1: var(--lit-1), var(--contact-1);
+  --elev-2: var(--lit-2), var(--contact-2);
   --elev-float: var(--lit-2),
                 0 2px 4px -1px oklch(0.09 0.022 280 / 0.72),
                 0 6px 12px -3px oklch(0.09 0.022 280 / 0.68),
@@ -125,7 +159,7 @@
      tint with --bg: a bar is the page held still, and content passing under it
      is the only thing that says a surface is there. Panels keep the raised
      tone at the clearest alpha the dim ramp allows: --text-2 holds 4.67:1 on
-     the worst case at 0.86 and fails at 0.82 (4.07, round 1), so 0.86 is the
+     the worst case at 0.86 and fails at 0.82 (4.09:1), so 0.86 is the
      floor. On that worst case, a white plate composited through the panel,
      --text holds 6.48:1, --glass-dim 4.67, --glass-danger 4.62. The panel
      moves 35.7 sRGB levels black to white, the measured (1 - alpha) * 255
@@ -133,23 +167,49 @@
      crushing the backdrop enough to protect it crushes the blur with it,
      measured across nine chains. ---- */
   --glass-bar-tint: oklch(0.255 0.024 280 / 0.90);
-  /* the bar carries only --text and --text-2: 6.21:1 for text-2 on the bar's
-     worst case (a white plate through 0.90 of the page colour), no re-floor */
+  /* the bar re-floors the same tokens as a panel, since the glass block names
+     both: --text-3/--text-4/--text-placeholder become --glass-dim, --danger
+     becomes --glass-danger, --text-disabled becomes --glass-disabled. Measured
+     over the bar's worst plate (white through 0.90 of the page colour): --text-2
+     6.21:1, --glass-danger 6.14:1, --glass-disabled 4.34:1. */
   --glass-tint: oklch(0.300 0.024 280 / 0.86);
   --glass-blur: 22px;
   --glass-sat:  1.25;
   --glass-dim:  oklch(0.800 0.030 280);   /* --text-3 and --text-4 on a panel:
      4.67:1 on the worst case; unlifted, .720 / .680 fall to 3.52 / 3.03 */
   --glass-danger: oklch(0.84 0.140 15);   /* 4.62:1 on the panel worst case.
-     --danger is 3.31:1 there, and the round-1 value L 0.78 fell to 4.04 at
+     --danger is 3.31:1 there, and L 0.78 fell to 4.04 at
      0.86, so the re-floor moves with the alpha */
   --glass-disabled: oklch(0.700 0.030 280);   /* 3.27:1 on the panel worst case.
      --text-disabled falls to 2.49 there, and the opacity: 0.45 costume this
      replaces measured 2.17, which is what the panel had been shipping */
   /* A translucent tint over a translucent surface composites twice and drifts 21
      levels with the backdrop: --accent-text on it measures 4.40:1. The same mix
-     laid down opaque holds one tone and 5.95:1. */
-  --glass-quiet: color-mix(in oklab, var(--accent) 16%, var(--surface-1));
+     laid down opaque holds one tone and 5.95:1 on a panel. This is the accent's
+     share of that opaque fill; the glass block mixes --accent-quiet from it onto
+     each surface's own --glass-ground, so a bar's fill reads the bar's tone. */
+  --glass-quiet-share: 16%;
+  /* --danger-text on a glass surface, where --danger is already --glass-danger:
+     the hover and press tints mix opaque onto the surface (--tint-ground), so
+     the plate behind it no longer moves them. On the panel 5.64 / 4.74:1, on
+     the bar 6.55 / 5.38, the menu hover 6.50; 0.86 leaves the panel press at
+     4.52, so 0.88 holds a margin over the floor. */
+  --glass-danger-text: oklch(0.88 0.140 15);
+  /* what every translucent tint in components.css mixes onto. Transparent, so
+     off glass a tint paints exactly as `X p%, transparent` did. A glass surface
+     sets its own tone here, turning each tint inside it into an opaque mix the
+     backdrop cannot move; every rule that paints an opaque ground resets it to
+     transparent, so a tint nested in that ground composites over it. One value
+     for both themes. */
+  --tint-ground: transparent;
+  /* the same glass tone for a tint painted OUTSIDE its own box (an invalid
+     field's ring): an opaque ground resets --tint-ground on itself, but its
+     ring lands on whatever surrounds it, so no rule resets this one */
+  --glass-ground: transparent;
+  /* --accent-line on a glass surface, laid opaque on the surface's own
+     --glass-ground at the same 38 percent, so a focus ring and a primary edge
+     stop drifting with the backdrop the way the quiet share stopped the fill */
+  --glass-line-share: 38%;
   /* The one place a drawn line beats the lit edge. A glass panel has no reliable
      tone difference from its backdrop, since it takes that backdrop on, so the
      edge is what says where the pane starts. Still a hairline. */
@@ -168,7 +228,7 @@
   /* the hint inside a control. One step under --text-4 so a placeholder does
      not read as a typed value or as metadata: 4.99:1 on --well. */
   --text-placeholder: oklch(0.630 0.030 280);
-  /* a control that cannot act, her call 2026-09-02, replacing the opacity: 0.45
+  /* a control that cannot act, replacing the opacity: 0.45
      ten declarations across twelve component classes rode. It takes the 3:1 graphics floor rather than the 4.5:1
      text floor, so it can sit a real step under --text-4: 4.99:1 on --well, 4.50
      on --bg, 3.89 on --surface-1, 3.29 on the --surface-2 a disabled fill takes.
@@ -188,15 +248,25 @@
   --accent-glow:  0 0 10px 0 oklch(0.76 0.110 238 / 0.55);
   --on-accent:    oklch(0.22 0.020 280);   /* 8.22:1 on the fill */
 
+  /* no on-colour: identity rule 7 makes accent-2 annotation only, never a fill,
+     so the pair it would sit on cannot exist */
   --accent-2:    oklch(0.72 0.130 42);     /* editorial, 6.09:1, once per screen */
-  --on-accent-2: oklch(0.22 0.020 42);     /* 6.69:1 on the fill */
+
+  /* The brand mark's ring: rose, the identity accent. A 2px graphic on the
+     .sona, held to the 3:1 graphics floor on every bar surface it sits on;
+     measured with tools/contrast.mjs: surface-1 6.06:1, well 7.78:1, --bg
+     7.01:1, sky peak 5.93:1 dark; 5.16 / 4.20 / 4.59 / 5.16 light. */
+  --brand-ring: oklch(0.76 0.110 340);
 
   /* ---- Status. Levelled under --text so no pill outshouts a title. ---- */
   --success: oklch(0.80 0.130 150);   /* 8.89:1 */
   --warning: oklch(0.84 0.110  90);   /* 9.68:1 */
   --danger:  oklch(0.72 0.140  15);   /* 5.98:1 */
-  --on-success: oklch(0.22 0.02 150); /* 9.68:1 on the fill */
-  --on-warning: oklch(0.22 0.02  90); /* 10.59:1 on the fill */
+  /* the danger label on its own hover and press tint: --danger there falls to
+     4.04 / 3.49:1 on surface-1, because label and tint are one hue. Lightness
+     stepped, chroma held: 6.04 / 5.16:1 on --bg, 5.27 / 4.55 on surface-1, and
+     5.76 on .menu-item.danger's 10 percent hover. */
+  --danger-text: oklch(0.81 0.140  15);
   --on-danger:  oklch(0.22 0.02  15); /* 6.58:1 on the fill */
   --info: var(--accent);              /* folded in: it was the same hue */
 
@@ -228,8 +298,9 @@
 
   /* ---- Radius. Softer than v1's 1px, which rendered as 0. ---- */
   --r-1: 10px;   /* controls        */
-  --r-2: 14px;   /* cards, menus    */
+  --r-2: 14px;   /* cards, menus, icon tiles */
   --r-3: 18px;   /* modals, sheets  */
+  --r-4: 24px;   /* KPI tiles       */
   --r-pill: 999px;
 
   /* ---- Motion. Duration follows distance. ---- */
@@ -245,9 +316,17 @@
   --dur-out-near: calc(var(--dur-near) * 0.6);
   --dur-out-far:  calc(var(--dur-far)  * 0.6);
 
-  /* ---- Type. 8 distinct steps; 11px and 12px are real tokens. ---- */
+  /* ---- The jelly press. A spring settle, NOT a travel
+     distance, so it takes no --dur-* slot: --press-dur is how long the wobble
+     takes to settle, and --press-spring is the 320/18 spring sampled over
+     49 points as a linear() curve, normalized to settle at 1. ---- */
+  --press-dur: 380ms;
+  --press-spring: linear(0, 2.0833% 0.0098, 4.1667% 0.0372, 6.2500% 0.0793, 8.3333% 0.1334, 10.4167% 0.1970, 12.5000% 0.2675, 14.5833% 0.3428, 16.6667% 0.4208, 18.7500% 0.4996, 20.8333% 0.5777, 22.9167% 0.6538, 25.0000% 0.7267, 27.0833% 0.7954, 29.1667% 0.8592, 31.2500% 0.9176, 33.3333% 0.9702, 35.4167% 1.0168, 37.5000% 1.0574, 39.5833% 1.0919, 41.6667% 1.1205, 43.7500% 1.1435, 45.8333% 1.1613, 47.9167% 1.1740, 50.0000% 1.1823, 52.0833% 1.1865, 54.1667% 1.1871, 56.2500% 1.1845, 58.3333% 1.1793, 60.4167% 1.1718, 62.5000% 1.1626, 64.5833% 1.1520, 66.6667% 1.1404, 68.7500% 1.1281, 70.8333% 1.1155, 72.9167% 1.1028, 75.0000% 1.0904, 77.0833% 1.0783, 79.1667% 1.0668, 81.2500% 1.0560, 83.3333% 1.0461, 85.4167% 1.0370, 87.5000% 1.0289, 89.5833% 1.0217, 91.6667% 1.0155, 93.7500% 1.0103, 95.8333% 1.0060, 97.9167% 1.0026, 1);
+
+  /* ---- Type. 9 distinct steps; 11px and 12px are real tokens. ---- */
   --t-1: 11px; --t-2: 12px; --t-3: 14px; --t-4: 16px;
   --t-5: 20px; --t-6: 26px; --t-7: 34px; --t-8: 46px;
+  --t-9: 64px;
   --caps: 0.09em;              /* the one tracking value */
 
   /* ---- Controls share one height ladder with inputs ---- */
@@ -255,13 +334,18 @@
 
   /* ---- Layout ---- */
   --page-w: 1200px;   /* .page column; one override retunes a build */
-  /* prose measure, MEASURED against loaded Onest at --t-4 rather than estimated:
-     528px lands 64.9 and 68.1 characters per line on two samples, 664px lands
-     84.4 and 85.3. A line that runs the full page column is a line nobody
-     finishes. Erring short is the safer side of 66. */
+  /* prose measure, MEASURED against loaded Onest at --t-4 rather than estimated.
+     A line that runs the full page column is a line nobody finishes, and erring
+     short is the safer side of 66. The width sweep behind the value, five
+     candidates against two samples, is in references/rhythm.md; it lived here
+     too and the two copies had already drifted apart on one sample. */
   --page-narrow: 528px;
-  --navbar-h: 56px;   /* the sticky header and the anchor offset both derive from it */
-  --topbar-h: 52px;   /* the mobile bar; the sticky header pins under this one below 768px */
+  --navbar-h: 56px;   /* the navbar's own height, and nothing else reads it as an offset */
+  --topbar-h: 52px;   /* the mobile bar's own height */
+  /* How far down anything pinned to the top has to start, which is NOT a bar's
+     height: it is the height of whatever bar this page actually holds, and a
+     sidebar shell holds none. Derived on the root below, never set by a page. */
+  --pin-top: 0px;
 
   /* ---- Fonts ---- */
   --font-sans: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
@@ -283,7 +367,7 @@
 }
 
 /* Radius preset: sharp is the opt-in variant, real 0 */
-[data-radius="sharp"] { --r-1: 0px; --r-2: 0px; --r-3: 0px; }
+[data-radius="sharp"] { --r-1: 0px; --r-2: 0px; --r-3: 0px; --r-4: 0px; }
 
 /* ---- Light theme (Latte). EVERY colour and elevation token is
    re-declared, because a partial override is the bug that broke
@@ -299,6 +383,16 @@
   --well:      oklch(0.925 0.008 275);
   --bg:        oklch(0.955 0.006 275);
   --surface-1: oklch(0.995 0.003 275);   /* cards still rise         */
+  /* Light falls onto a light page too: the top goes whiter, which only raises
+     every text ratio there. On the peak: --text 13.46, --text-4 5.55:1,
+     --accent-text 5.68; on the mid 12.72 / 5.25 / 5.37. The peak sits at the
+     card's own lightness, so a card under it separates on the drawn line
+     alone. */
+  --sky-peak:  oklch(0.995 0.008 240);
+  --sky-mid:   oklch(0.975 0.007 255);
+  /* --text 11.17, --text-2 6.94, --text-3 4.92, --text-4 4.61:1, --accent-text
+     4.72; --accent as a fill 3.82 against it, over the 3:1 graphics floor */
+  --band-accent: oklch(0.930 0.030 238);
 
   --line:      oklch(0.890 0.012 275);   /* barely there, 1.22:1     */
   --line-soft: oklch(0.920 0.010 275);
@@ -325,13 +419,15 @@
   --on-accent:    oklch(0.995 0.003 238);
 
   --accent-2:    oklch(0.52 0.150 42);     /* 5.16:1 */
-  --on-accent-2: oklch(0.995 0.003 42);
+
+  --brand-ring: oklch(0.55 0.140 340);
 
   --success: oklch(0.50 0.150 150);   /* 4.85:1 */
   --warning: oklch(0.50 0.130  90);   /* 5.25:1 */
   --danger:  oklch(0.52 0.190  15);   /* 5.36:1 */
-  --on-success: oklch(0.995 0.003 150);
-  --on-warning: oklch(0.995 0.003  90);
+  /* hover / press: 5.25 / 4.61:1 on --bg, 5.87 / 5.10 on surface-1, 6.49 on
+     .menu-item.danger's hover; --danger there falls to 4.14 / 3.63 on --bg */
+  --danger-text: oklch(0.46 0.190  15);
   --on-danger:  oklch(0.995 0.003  15);
   --info: var(--accent);
 
@@ -342,18 +438,32 @@
      banding that governs the dark set is not the binding constraint here; the
      geometry is shared because a component must not change depth on a toggle.
      Measured on a 300x140 card, blue channel against --bg, deepest pixel and
-     the last 1-level band: --elev-1 33 under / 13 beside, band 4 / 4;
+     the last 1-level band: --elev-1 30 under / 13 beside, band 2 / 2;
      --elev-2 32 / 14, band 3 / 2; --elev-float 42 / 19, band 5 / 3. */
-  --lit-1: inset 0 -1px 0 0 oklch(0.55 0.03 275 / 0.10);
-  --lit-2: inset 0 -1px 0 0 oklch(0.55 0.03 275 / 0.12);
-  --elev-1: var(--lit-1),
-            0 1px 2px -1px oklch(0.55 0.03 275 / 0.26),
-            0 3px 6px -2px oklch(0.55 0.03 275 / 0.23),
-            0 8px 16px -6px oklch(0.55 0.03 275 / 0.21);
-  --elev-2: var(--lit-2),
-            0 1px 2px -1px oklch(0.55 0.03 275 / 0.24),
-            0 4px 8px -2px oklch(0.55 0.03 275 / 0.21),
-            0 10px 18px -8px oklch(0.55 0.03 275 / 0.19);
+
+  /* The underside line is a mid tone on a near-white card, so an alpha buys
+     fewer levels here than dark's white on --surface-1: at 0.10 it painted 15
+     against dark's 18. The two themes are matched on the PAINTED delta rather
+     than on each other's alphas, measured on a card: 0.125 lands 18, 0.145
+     lands 21. Matched in sRGB levels, not in oklab: a
+     perceptual match wants 0.165, which reaches 93 percent of --line-soft's
+     own step on a card and starts reading as a drawn line rather than a lit
+     edge. */
+  --lit-1: inset 0 -1px 0 0 oklch(0.55 0.03 275 / 0.125);
+  --lit-2: inset 0 -1px 0 0 oklch(0.55 0.03 275 / 0.145);
+  /* the card line is a hairline, not a graphic, so no 3:1 floor applies;
+     measured with tools/contrast.mjs against every surface a card sits on,
+     tightest first: --well 1.99:1, --band-accent 2.03:1, --bg 2.18:1,
+     --sky-mid 2.31:1, --surface-1 2.45:1, --sky-peak 2.45:1. */
+  --card-line: oklch(0.72 0.020 275);
+  --contact-1: 0 1px 2px -1px oklch(0.55 0.03 275 / 0.26),
+               0 2px 4px -1px oklch(0.55 0.03 275 / 0.23),
+               0 4px 8px -4px oklch(0.55 0.03 275 / 0.21);
+  --contact-2: 0 1px 2px -1px oklch(0.55 0.03 275 / 0.24),
+               0 4px 8px -2px oklch(0.55 0.03 275 / 0.21),
+               0 10px 18px -8px oklch(0.55 0.03 275 / 0.19);
+  --elev-1: var(--lit-1), var(--contact-1);
+  --elev-2: var(--lit-2), var(--contact-2);
   --elev-float: var(--lit-2),
                 0 2px 4px -1px oklch(0.55 0.03 275 / 0.26),
                 0 6px 12px -3px oklch(0.55 0.03 275 / 0.23),
@@ -363,18 +473,29 @@
   /* Glass. The same split the dark block ships: bars tint with --bg, panels
      hold surface-1 at the clearest alpha the ramp allows. Worst case on a light
      page is black behind the panel; composited through it, --text holds 10.76:1,
-     --text-2 6.68, the dim step 4.72 at 0.500 (re-measured twice 2026-09-02, independently) and --danger 4.81. The shipped
-     --text-4 value 0.515 measures 4.44 there, so it joins the dim step. 0.90 is
-     25.5 sRGB levels black to white. --accent-text stays bound to its opaque
-     quiet fill (4.89:1, unchanged, because the fill is opaque). */
-  --glass-bar-tint: oklch(0.955 0.006 275 / 0.92);
+     --text-2 6.68, the dim step 4.72 at 0.500 (re-measured twice 2026-09-02,
+     independently) and --danger 4.81. The shipped --text-4 value 0.515 measures
+     4.44 there, so it joins the dim step. 0.90 is 25.5 sRGB levels black to
+     white. --accent-text stays bound to its opaque quiet fill: 4.89:1 on a
+     panel's, but 4.38 on a bar's own, so every accent label that can sit on a
+     bar carries a mix: the shared light remix at 4.98, `.btn-primary`'s own
+     at 6.27.
+
+     The bar alpha is the floor, not a preference. At 0.92 the bar re-floors
+     --text-3/--text-4/--text-placeholder to --glass-dim, which measured 4.41:1
+     over black, and --glass-danger 4.48:1, both under 4.5:1. At 0.93 both clear:
+     --glass-dim 4.52:1 and --glass-danger 4.59:1 over black, and --glass-disabled
+     3.22:1 over the 3:1 floor. */
+  --glass-bar-tint: oklch(0.955 0.006 275 / 0.93);
   --glass-tint: oklch(0.995 0.003 275 / 0.90);
   --glass-dim:  oklch(0.500 0.018 275);
   --glass-danger: var(--danger);
+  --glass-danger-text: var(--danger-text);
   /* light needs no lift here: --text-disabled already measures 3.37:1 on the
      panel worst case, where dark's falls to 2.49 */
   --glass-disabled: var(--text-disabled);
-  --glass-quiet: color-mix(in oklab, var(--accent) 12%, var(--surface-1));
+  --glass-quiet-share: 12%;
+  --glass-line-share: 34%;
   --glass-edge: oklch(0.45 0.03 275 / 0.12);
 
   /* A light page has less room under a dim than a dark one: at the 0.7 the dark
@@ -388,13 +509,13 @@
      mauve here too: against sky the 1-3 pair measured 0.0790 in oklab and now
      measures 0.1556.
 
-     SLOTS 1 AND 4 ARE HELD AT THE sRGB BOUNDARY, her call 2026-09-02. At their
+     SLOTS 1 AND 4 ARE HELD AT THE sRGB BOUNDARY. At their
      old chromas the browser clipped them (slot 1's linear red measured -0.0182,
      slot 4's -0.0020), so the declared values named colours nobody saw and every
      distance taken from a declaration overstated the gap. The gamut runs out at
      C 0.1110 for slot 1 and 0.1378 for slot 4 at these lightnesses and hues;
-     both sit under that with a little margin. `tools/cvd.mjs` reds on any slot
-     outside sRGB, on every run. */
+     both sit under that with a little margin; the sRGB check reds on any slot
+     outside the gamut, on every run. */
   --chart-series-1: oklch(0.50 0.110 238);
   --chart-series-2: oklch(0.52 0.150 42);
   --chart-series-3: oklch(0.55 0.150 305);
@@ -424,6 +545,41 @@
   --cat-blue:      oklch(0.559 0.226 262); --cat-lavender: oklch(0.664 0.175 273);
 }
 
+/* ---- Language hues (GitHub-recognizable categorical) ----
+   The categorical ramp's per-language extension, for dots, bar segments and
+   legend marks. Hue and chroma are each language's own GitHub colour;
+   lightness is re-derived per theme so every mark clears the 3:1 graphics
+   floor on its theme's binding surface: dark marks are light and bind on the
+   lightest surface a dark-theme mark can sit on (--surface-1); light marks
+   are dark and bind on the darkest light-theme surface (--well). Worst
+   measured: dark 3.1:1, light 3.1:1. */
+:root {
+  --cat-rust:       oklch(0.768 0.081  51);  --cat-javascript: oklch(0.896 0.153 102);
+  --cat-typescript: oklch(0.569 0.078 220);  --cat-python:     oklch(0.573 0.102 247);
+  --cat-csharp:     oklch(0.559 0.179 141);  --cat-java:       oklch(0.604 0.123  69);
+  --cat-go:         oklch(0.695 0.130 224);  --cat-html:       oklch(0.622 0.194  35);
+  --cat-css:        oklch(0.585 0.104 300);  --cat-shell:      oklch(0.823 0.196 135);
+  --cat-php:        oklch(0.579 0.091 272);  --cat-kotlin:     oklch(0.687 0.189 297);
+  --cat-qml:        oklch(0.639 0.189 139);  --cat-c:          oklch(0.575 0.020 280);
+  --cat-cpp:        oklch(0.661 0.206   7);  --cat-vue:        oklch(0.702 0.132 160);
+  --cat-svelte:     oklch(0.654 0.234  34);  --cat-lua:        oklch(0.584 0.188 264);
+  --cat-nix:        oklch(0.656 0.187 280);  --cat-dockerfile: oklch(0.573 0.029 220);
+  --cat-makefile:   oklch(0.564 0.137 135);
+}
+[data-theme="light"] {
+  --cat-rust:       oklch(0.609 0.081  51);  --cat-javascript: oklch(0.598 0.153 102);
+  --cat-typescript: oklch(0.523 0.078 220);  --cat-python:     oklch(0.535 0.102 247);
+  --cat-csharp:     oklch(0.540 0.179 141);  --cat-java:       oklch(0.604 0.123  69);
+  --cat-go:         oklch(0.588 0.130 224);  --cat-html:       oklch(0.622 0.194  35);
+  --cat-css:        oklch(0.418 0.104 300);  --cat-shell:      oklch(0.585 0.196 135);
+  --cat-php:        oklch(0.492 0.091 272);  --cat-kotlin:     oklch(0.622 0.189 297);
+  --cat-qml:        oklch(0.586 0.189 139);  --cat-c:          oklch(0.450 0.020 280);
+  --cat-cpp:        oklch(0.629 0.206   7);  --cat-vue:        oklch(0.587 0.132 160);
+  --cat-svelte:     oklch(0.629 0.234  34);  --cat-lua:        oklch(0.271 0.188 264);
+  --cat-nix:        oklch(0.616 0.187 280);  --cat-dockerfile: oklch(0.406 0.029 220);
+  --cat-makefile:   oklch(0.516 0.137 135);
+}
+
 /* ---- Base reset ---- */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { font-size: 16px; }
@@ -438,6 +594,35 @@ body {
   -webkit-font-smoothing: antialiased;
   text-wrap: pretty;
 }
+/* The sky: a 62% x 100% ellipse hung from the top centre, reaching --bg at its
+   own edge, so the 780px box draws no seam where it ends. It is its own layer
+   at z -2, under the dot grid, so it can move slower than the page: it drifts
+   up at a quarter of the scroll speed, and is gone once the
+   page has scrolled 3120px. Absolute by default, which scrolls it with the page,
+   so an engine with no scroll timeline and a reduced-motion reader both get the
+   plain ground. */
+body::after {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 780px;
+  z-index: -2;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse 62% 100% at 50% 0%,
+      var(--sky-peak) 0%, var(--sky-mid) 42%, var(--bg) 100%);
+}
+@supports (animation-timeline: scroll()) {
+  @media (prefers-reduced-motion: no-preference) {
+    body::after {
+      position: fixed;
+      animation: sky-drift linear both;
+      animation-timeline: scroll(root);
+      animation-range: 0 3120px;
+    }
+  }
+}
+@keyframes sky-drift { to { transform: translateY(-780px); } }
 ::selection { background: var(--accent-quiet); color: var(--text); }
 /* `font-family` does not inherit into a <button>: the UA sets it, together with
    a 2px outset border, ButtonFace, ButtonText and centred text, and an author
@@ -475,8 +660,9 @@ h1 { font: 600 var(--t-8)/1.1 var(--font-sans); letter-spacing: -0.03em; }
 h2 { font: 600 var(--t-6)/1.15 var(--font-sans); letter-spacing: -0.02em; }
 h3 { font: 500 var(--t-5)/1.2 var(--font-sans); letter-spacing: -0.01em; }
 h4 { font: 500 var(--t-4)/1.3 var(--font-sans); }
-/* An anchored jump clears the sticky navbar instead of tucking under it. */
-[id] { scroll-margin-top: calc(var(--navbar-h) + var(--space-2)); }
+/* An anchored jump clears whatever bar this page actually holds, not a fixed
+   navbar height: --pin-top is 0 on a page with no bar at all. */
+[id] { scroll-margin-top: calc(var(--pin-top) + var(--space-2)); }
 
 /* ---- Utilities ---- */
 .label {