@stnd/styles 0.5.1 → 0.5.3

package/_standard-13-components.scss

@@ -1,5 +1,24 @@
 @use "standard-00-variables" as *;
 
+/**
+ * @component Components & Buttons
+ * @category Components
+ * @description Interactive buttons, button groups, loaders, and keycaps.
+ * Buttons extend `%surface` and `%padding-text`, providing tactile hover states,
+ * focus outlines, and active feedback.
+ *
+ * @property button Zero-class interactive button element.
+ * @property a.btn Anchor styled identically to a button.
+ * @property .btn-primary Primary action button filled with accent color.
+ * @property .btn-secondary Secondary button with subtle surface background.
+ * @property .btn-outline Outlined button with hairline border.
+ * @property .btn-destructive Destructive action button using error red.
+ * @property .btn-ghost Ghost button transparent until hover.
+ * @property .btn-icon Square icon action button.
+ * @property .btn-group Segmented inline button group with shared borders.
+ * @property .loader Rotating circular spinner with accent glow.
+ */
+
 /* =========================== */
 /* BUTTONS                     */
 /* =========================== */
@@ -33,19 +52,6 @@
   }
 }
 
-kbd {
-  background-color: var(--color-surface);
-  background-image: var(--effect-grain);
-  border: none;
-  border-radius: var(--radius);
-  /* Button-like raised effect */
-  box-shadow: var(--shadow-raised);
-  padding: var(--space-d6) var(--space-d3);
-  font-family: var(--font-monospace);
-  font-size: var(--size-xs);
-  pointer-events: none;
-}
-
 $types: "secondary", "outline", "destructive", "ghost", "icon";
 
 :where(button),
@@ -91,14 +97,6 @@ a.btn {
     /* Flatten shadow on press */
     box-shadow: var(--shadow-inset), var(--shadow-ring);
   }
-
-  /* Loop through the list to create .badge-outline, .badge-ghost, etc. */
-  @each $type in $types {
-    &.#{$type} {
-      @extend .btn;
-      @extend button;
-    }
-  }
 }
 
 :where(button):focus-visible,
@@ -285,13 +283,6 @@ a.btn:disabled {
     text-decoration-color: oklch(from currentColor l c h / 0.5);
     text-decoration-thickness: 0.112em;
   }
-
-  /* Loop through the list to create .badge-outline, .badge-ghost, etc. */
-  @each $type in $types {
-    &.#{$type} {
-      @extend .badge;
-    }
-  }
 }
 
 a.badge:hover,
@@ -354,6 +345,17 @@ a.badge.secondary:hover,
   }
 }
 
+/**
+ * @name Alert Banners
+ * @group components-feedback
+ * @description Contextual feedback notifications with status colors and left accent borders.
+ *
+ * @property .alert Container banner using interface typography and status tinting.
+ * @property .alert.success Success alert themed with green status color.
+ * @property .alert.warning Warning alert themed with orange status color.
+ * @property .alert.error Error alert themed with red status color.
+ * @property .alert.info Informational alert themed with blue status color.
+ */
 .alert {
   font-family: var(--font-interface);
   --color-alert: var(--color-accent);
@@ -423,6 +425,13 @@ a.badge.secondary:hover,
  * - Dark mode shadow adjustments for better depth perception
  * - Optional card image hero with object-fit controls
  *
+ * @property .card Structured container with surface elevation, hairline borders, and rhythm padding.
+ * @property .card-header Header area for card title and metadata.
+ * @property .card-body Main content body with automatic vertical rhythm.
+ * @property .card-footer Bottom action bar for links and buttons.
+ * @property .card.clickable Interactive clickable card variant with hover lift.
+ * @property .card-grid Responsive grid container specifically designed for card multiples.
+ *
  * @see {class} .grid - Often used to layout multiple cards in columns
  * @see {variable} --base - Controls internal spacing rhythm
  * @see {class} .prose - Can be used inside card-body for rich content
@@ -611,6 +620,16 @@ card.inset {
   box-shadow: inset var(--shadow) !important;
 }
 
+/**
+ * @name Callout Blocks
+ * @group components-layout
+ * @description Obsidian-style callout boxes with icons, titles, and collapsible folding.
+ *
+ * @property .callout Container callout card with raised shadow and ring border.
+ * @property .callout-title Header title for callout.
+ * @property .callout-content Body content within callout.
+ * @property details.callout Collapsible fold callout using native HTML details.
+ */
 .callout {
   /* Raised effect for callout cards */
   box-shadow: var(--shadow-raised), var(--shadow-ring);
@@ -811,7 +830,7 @@ details .callout-fold {
 }
 
 // Caption Callout (after an image)
-p:has(img) + .callout[data-callout="caption" i] {
+.callout[data-callout="caption"] {
   padding: 0;
   background: none;
   padding-block-start: var(--gap);
@@ -827,10 +846,10 @@ p:has(img) + .callout[data-callout="caption" i] {
     padding: 0;
     background: none;
     color: var(--color-muted);
-    border: none;
+    border: none !important;
 
     box-shadow: none;
-    text-align: center;
+    text-align: center !important;
     text-wrap: balance;
   }
 }
@@ -859,8 +878,14 @@ details .callout-fold {
 
 /**
  * @name Comments
- * @group comments
+ * @group components
  * @since 0.11.0
+ * @description Threaded discussion list with author names, timestamps, and quotes.
+ *
+ * @property #comments Root comments container.
+ * @property .comment Single comment card with surface background and elevation.
+ * @property .comment-header Author, date, and status metadata bar.
+ * @property .comment-content Indented comment message body.
  */
 
 #comments {
@@ -922,11 +947,16 @@ details .callout-fold {
  *
  * Actions within alerts (links, buttons) should be visually distinct but not
  * overwhelming. This provides subtle styling that inherits the alert's color.
+ *
+ * @property .alert-action Inline action link within an alert, inheriting `--color-alert`.
  */
+/* Fixed 2026-07-14 — was an undefined token (--alert-border-color),
+   corrected to the real --color-alert, matching the docblock's stated
+   intent that this inherits the alert's color. */
 .alert-action {
   display: inline-block;
   margin-inline-start: var(--space-d2);
-  color: var(--alert-border-color);
+  color: var(--color-alert);
   text-decoration: underline;
   font-weight: var(--font-weight-bold);
 

package/_standard-14-analog.scss

@@ -1,10 +1,34 @@
 @use "standard-00-variables" as *;
 
+/**
+ * @component Analog
+ * @category Effects
+ * @description The "analog atmosphere" layer: a fixed, full-viewport grain
+ * texture painted over every page with zero markup (`html::after`), plus a
+ * subtle ink-bleed text-shadow for text inside `.prose`/`.ink`/`.note`
+ * containers. Grain intensity and blend mode swap automatically in dark
+ * mode.
+ *
+ * @property .grain Applies grain overlay to a specific subtree container.
+ * @property --effect-grain Coarse noise texture SVG filter data URI used by page-wide overlay.
+ * @property --effect-noise Fine noise texture SVG filter data URI for high-density grain.
+ * @property --effect-opacity Overlay opacity (0.15 in light mode, 0.05 in dark mode).
+ * @property --effect-blend-mode Overlay blend mode (`multiply` in light mode, `screen` in dark).
+ * @property --effect-ink Subtle ink-bleed text-shadow applied to typography.
+ * @property .ink Container applying organic ink-bleed text-shadows to descendants.
+ * @property .note Note container applying ink-bleed text-shadows to content.
+ */
+
 #{$stnd-theme-scope} {
   /*
       This data URI is an SVG with a <feTurbulence> filter.
-      baseFrequency='0.6' controls the "roughness" (higher = finer grain).
-      opacity='0.05' makes it subtle.
+      baseFrequency controls the "roughness" (higher = finer grain) —
+      5 for --effect-noise (fine), 0.4 for --effect-grain (coarse).
+      AUDIT FLAG (2026-07-14): this comment previously said "baseFrequency=
+      '0.6'" and "opacity='0.05'" — neither matches either data URI below
+      (noise=5, grain=0.4; both rects have opacity=1, the CSS-level
+      --effect-opacity token below is what's actually 0.05/0.15). Corrected
+      to describe the real values.
    */
   --effect-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
   --effect-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
@@ -22,7 +46,7 @@
 
 #{$stnd-theme-scope}[data-color-mode="dark"] {
   --effect-blend-mode: screen;
-  --effect-opacity: 0.05;
+  --effect-opacity: 0.025;
 }
 
 /* 1. Global Atmosphere (The Desk) */
@@ -31,7 +55,9 @@ html::after,
   content: "";
   position: fixed;
   inset: 0;
-  z-index: 9999; /* Top layer */
+  /* Top layer — same z-index as --z-image-zoom on purpose now, was a
+     hardcoded magic number that happened to match */
+  z-index: var(--z-image-zoom);
   background-image: var(--effect-grain);
   opacity: var(--effect-opacity);
   mix-blend-mode: var(--effect-blend-mode);

package/_standard-30-contrast.scss

@@ -1,3 +1,19 @@
+@use "standard-00-variables" as *;
+
+/**
+ * @component Accessibility Preferences
+ * @category Effects
+ * @description Responds to OS-level accessibility preferences with zero
+ * markup or opt-in classes: `prefers-contrast: high/more` slams every color
+ * token to pure black/white and hides the decorative grain texture;
+ * `prefers-reduced-motion: reduce` (also `update: slow` / `monochrome`,
+ * @property --color-surface Surface token forced to match background in high-contrast mode.
+ * @property --color-border Border token forced to pure foreground color.
+ * @property --color-muted Muted text token forced to pure foreground color.
+ * @property --shadow Shadow elevation disabled (`0`) to eliminate low-contrast blur.
+ * @property --transition Transition duration forced to `0s` under reduced-motion preferences.
+ */
+
 /* ===== ACCESSIBILITY SUPPORT ===== */
 /* High contrast mode support */
 @media (prefers-contrast: high), (prefers-contrast: more) {
@@ -13,6 +29,10 @@
     --shadow: 0 !important;
   }
 
+  /* Fixed 2026-07-14 — was missing html::after (where the grain overlay
+     actually lives), added it so this rule now actually hides the
+     decorative texture for high-contrast users. */
+  html::after,
   body::before,
   body::after {
     display: none;
@@ -23,8 +43,6 @@
 @media (prefers-reduced-motion: reduce), (update: slow), (monochrome) {
   #{$stnd-theme-scope} {
     --transition: 0s;
-    --toast-progress-duration: 0.5s;
-    --toast-progress-easing: linear;
   }
 
   *,
@@ -34,9 +52,4 @@
     animation: none !important;
     scroll-behavior: auto !important;
   }
-
-  .toast-progress {
-    transition: width var(--toast-progress-duration)
-      var(--toast-progress-easing) !important;
-  }
 }

package/_standard-31-print.scss

@@ -1,3 +1,24 @@
+@use "standard-00-variables" as *;
+
+/**
+ * @component Print
+ * @category Effects
+ * @description The `@media print` stylesheet: forces black-on-white tokens,
+ * shrinks type and tightens spacing for paper, hides site chrome
+ * (`header`/`footer`/`nav`/`aside`) and the analog grain overlay, strips
+ * decorative shadows, expands external links into visible URL text, and
+ * adds page-break protection plus `@page` margins with a page counter.
+ *
+ * @property .no-print Hides the element and all its descendants only when printing.
+ * @property --color-foreground Forced to pure black for high print legibility.
+ * @property --color-background Forced to pure white for paper ink conservation.
+ * @property --font-size Adjusted root font size for printed text (`0.925rem`).
+ * @property --line-height Tightened line height for print reading (`1.4`).
+ *
+ * @example html - Hide something from the printed page
+ * <button class="no-print">Share</button>
+ */
+
 @media print {
   #{$stnd-theme-scope} {
     --color-foreground: black;
@@ -7,7 +28,13 @@
     --optical-ratio: 1.125 !important;
     --line-height: 1.4 !important;
 
-    --body-padding: var(--space-2);
+    /* Fixed 2026-07-14 — was setting the wrong, unread token
+       (--body-padding); now overrides the three real padding tokens
+       (--gap-body/--gap-header/--gap-footer) print mode was clearly
+       trying to reduce. */
+    --gap-body: var(--space-2);
+    --gap-header: var(--space-2);
+    --gap-footer: var(--space-2);
     --line-width: var(--line-width-full);
     --gap: 0;
     --shadow: 0;

package/_standard-32-eink.scss

@@ -1,3 +1,22 @@
+/* Fixed 2026-07-14 — added the missing @use for consistency with every
+   other file in the package. */
+@use "standard-00-variables" as *;
+
+/**
+ * @component E-ink
+ * @category Effects
+ * @description The e-ink / monochrome-display layer (`update: slow` or
+ * `monochrome`): forces absolute black-and-white, removes all motion,
+ * shadows, filters and text-shadows, replaces shadows with hard 2px black
+ * borders, thickens headings to weight 900, and dithers images to
+ * high-contrast grayscale. Zero markup or opt-in classes required.
+ *
+ * @property --color-accent Forced to black — no chromatic accents on black-and-white screens.
+ * @property --color-foreground Forced to pure black.
+ * @property --color-background Forced to pure white.
+ * @property --color-border Forced to solid black, replacing fuzzy shadows with sharp contrast.
+ */
+
 @media screen and (update: slow), (monochrome) {
   #{$stnd-theme-scope} {
     /* Force absolute contrast */
@@ -7,6 +26,9 @@
     --color-border: black !important;
   }
 
+  /* Fixed 2026-07-14 — added html::after (where the grain overlay actually
+     lives), matching the same fix in _standard-30-contrast.scss. */
+  html::after,
   body::before,
   body::after {
     display: none !important;
@@ -34,9 +56,12 @@
 
   /* 3. Replace Shadows with Borders */
   /* Shadows look like dirty smudges on e-ink */
+  /* Fixed 2026-07-14 — was .button/.image (not real classes anywhere), now
+     targets the framework's actual button/image selectors. */
   .card,
-  .button,
-  .image {
+  :where(button),
+  a.btn,
+  img {
     box-shadow: none !important;
     border: 2px solid black !important;
   }
@@ -62,11 +87,13 @@
   }
 
   /* Stop caret blinking */
+  /* Fixed 2026-07-14 — was an undefined token (--text-accent), corrected
+     to --color-accent. */
   .cm-cursor {
     animation-play-state: paused !important;
     animation: none !important; /* disables blinking animation */
     background-color: var(
-      --text-accent
+      --color-accent
     ) !important; /* optional: keeps caret visible */
   }
 

package/_standard-50-utilities.scss

@@ -3,8 +3,19 @@
 /**
  * @component Utility Classes
  * @category Utilities
- * @description Hybrid utility system supporting both Industrial T-shirt sizes
- * and Mathematical units (1-12).
+ * @description Hybrid utility system supporting both Industrial T-shirt sizes (3xs..6xl)
+ * and Mathematical rhythm units (1-12, half, trim, leading).
+ *
+ * @property .p-*, .pt-*, .pb-*, .pl-*, .pr-*, .px-*, .py-* Padding scale utilities.
+ * @property .m-*, .mt-*, .mb-*, .ml-*, .mr-*, .mx-*, .my-* Margin scale utilities.
+ * @property .gap-*, .gap-x-*, .gap-y-* Grid and flex gap utilities.
+ * @property .w-*, .h-*, .max-w-*, .min-w-*, .max-h-*, .min-h-* Sizing scale utilities.
+ * @property .text-muted, .text-subtle, .text-accent Foreground text color utilities.
+ * @property .bg-surface, .bg-background Background color utilities.
+ * @property .border, .border-accent, .border-transparent Border stroke utilities.
+ * @property .rounded, .rounded-sm, .rounded-lg, .rounded-full Border radius utilities.
+ * @property .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl Elevation shadow utilities.
+ * @property .flex, .inline-flex, .grid, .inline-grid, .block, .inline-block, .hidden Layout display utilities.
  */
 
 /* ============================================================ */
@@ -42,6 +53,11 @@
     "11": var(--space-11),
     "12": var(--space-12),
     "half": var(--space-d2),
+    /* Naming collision worth knowing: this "trim"/"leading" scale keys
+       (feeding .mt-trim, .p-leading, etc.) use --size-2xs/--size-xs (the
+       type scale) — NOT the real --trim/--leading rhythm tokens
+       (_standard-01-token.scss) that happen to share the same words.
+       A class like .mt-trim does not use --trim. */
     "trim": var(--size-2xs),
     "leading": var(--size-xs),
   );
@@ -126,6 +142,10 @@
   max-width: var(--wide) !important;
 }
 
+.max-w-line {
+  max-width: var(--line-width) !important;
+}
+
 /* ============================================================ */
 /*  HEIGHT                                                      */
 /* ============================================================ */
@@ -518,8 +538,10 @@
   max-width: var(--line-width-xs) !important;
 }
 
+/* Fixed 2026-07-14 — was --line-width-s/-l (undefined), corrected to the
+   real --line-width-sm/-lg (all 3 occurrences). */
 .line-s {
-  max-width: var(--line-width-s) !important;
+  max-width: var(--line-width-sm) !important;
 }
 
 .line {
@@ -527,7 +549,7 @@
 }
 
 .line-l {
-  max-width: var(--line-width-l) !important;
+  max-width: var(--line-width-lg) !important;
 }
 
 .line-xl {
@@ -579,22 +601,18 @@
 /* ============================================================ */
 
 .success {
-  --color-msg: var(--color-success);
   color: var(--color-success) !important;
 }
 
 .warning {
-  --color-msg: var(--color-warning);
   color: var(--color-warning) !important;
 }
 
 .error {
-  --color-msg: var(--color-error);
   color: var(--color-error) !important;
 }
 
 .info {
-  --color-msg: var(--color-info);
   color: var(--color-info) !important;
 }
 
@@ -626,12 +644,14 @@
   color: var(--color-blue) !important;
 }
 
+/* Fixed 2026-07-14 — was --color-magenta for both (so .purple and .pink
+   rendered identically), now each uses its own real, distinct token. */
 .purple {
-  color: var(--color-magenta) !important;
+  color: var(--color-purple) !important;
 }
 
 .pink {
-  color: var(--color-magenta) !important;
+  color: var(--color-pink) !important;
 }
 
 /* ============================================================ */
@@ -646,10 +666,6 @@
   background-color: var(--color-surface) !important;
 }
 
-.bg-surface {
-  background-color: var(--color-surface) !important;
-}
-
 .bg-accent {
   background-color: var(--color-accent) !important;
 }
@@ -675,10 +691,6 @@
   background-color: var(--color-surface-low) !important;
 }
 
-.bg-surface {
-  background-color: var(--color-surface) !important;
-}
-
 .bg-surface-high {
   background-color: var(--color-surface-high) !important;
 }
@@ -715,12 +727,14 @@
   background-color: var(--color-blue) !important;
 }
 
+/* Fixed 2026-07-14 — was --color-magenta for both (so .purple and .pink
+   rendered identically), now each uses its own real, distinct token. */
 .bg-purple {
-  background-color: var(--color-magenta) !important;
+  background-color: var(--color-purple) !important;
 }
 
 .bg-pink {
-  background-color: var(--color-magenta) !important;
+  background-color: var(--color-pink) !important;
 }
 
 /* ============================================================ */
@@ -856,20 +870,15 @@
 /*  RHYTHM                                                      */
 /* ============================================================ */
 
-.rhythm-compact {
-  --base-gap: var(--leading);
-}
-
-.rhythm-relaxed {
-  --base-gap: var(--space-2);
-}
-
+/* Fixed 2026-07-14 — was referencing undefined tokens, now uses the real
+   --gap token (this @supports block essentially never fires in 2026
+   given universal Grid support, but at least it's valid now). */
 @supports not (display: grid) {
   .rhythm {
     display: block;
 
     > * {
-      margin-block-end: calc(var(--space-block-gap) * var(--space-gap));
+      margin-block-end: var(--gap);
     }
 
     > :last-child {
@@ -900,18 +909,10 @@
 
 .columns-auto {
   columns: auto;
-  column-width: var(--line-width-s);
+  column-width: var(--line-width-sm);
   column-gap: var(--space);
 }
 
-[class|="columns"].compact {
-  column-gap: var(--leading);
-}
-
-[class|="columns"].relaxed {
-  column-gap: var(--space-2);
-}
-
 .columns-gap-compact {
   column-gap: var(--leading);
 }

package/_standard-99-debug.scss

@@ -9,13 +9,16 @@
  * baseline rhythm, reading layout zones, and other layout metrics. Essential for
  * design system development and layout debugging. Automatically hidden in print.
  *
- * @prop {class} .stnd-debug Enable debug visualization
- * @prop {overlay} baseline-grid Horizontal baseline grid overlay
- * @prop {overlay} grid-columns Vertical grid column overlay
- * @prop {overlay} reading-zones Reading layout zone visualization
- * @prop {overlay} rhythm-spacing Margin/spacing outline visualization
- * @prop {indicator} breakpoint-indicator Current responsive breakpoint
- * @prop {indicator} debug-panel Fixed info panel with metrics
+ * @property .stnd-debug Enable debug visualization overlays on the page or container.
+ * @property .debug-baseline-grid Horizontal baseline rhythm grid overlay.
+ * @property .debug-grid-columns Vertical grid column guidelines overlay.
+ * @property .debug-reading-zones Reading layout column boundary highlights.
+ * @property .debug-rhythm-spacing Margin and padding bounding box visualizer.
+ * @property .debug-breakpoint-indicator Viewport responsive breakpoint tag indicator.
+ * @property .debug-panel Fixed status panel reporting active layout metrics.
+ * @property --stnd-lab-bg Debug HUD background color.
+ * @property --stnd-lab-text Debug HUD text color.
+ * @property --stnd-lab-accent Debug HUD accent highlight color.
  *
  * @example
  * // Enable debug mode on page
@@ -280,6 +283,9 @@ html.stnd-debug .rhythm > * + *::after {
   }
 }
 
+/* Fixed 2026-07-14 — --gap-grid (undefined) now uses the real --gap token;
+   --z-tooltip (undefined) now hardcoded to 10000, matching this file's own
+   baseline-grid overlay z-index for consistency. */
 /* Grid item debugging */
 /* Grid Column Overlay (only for .grid inside debug) */
 .stnd-debug .grid,
@@ -316,25 +322,25 @@ html.stnd-debug .rhythm > * + *::after {
   font-family: var(--font-monospace);
   display: grid;
   grid-template-columns: repeat(var(--grid-cols), 1fr);
-  column-gap: var(--gap-grid);
+  column-gap: var(--gap);
   pointer-events: none;
-  z-index: var(--z-tooltip);
+  z-index: 10000;
   opacity: var(--debug-opacity);
   background-image: repeating-linear-gradient(
     to right,
     color-mix(in srgb, var(--debug-color) 10%, transparent) 0,
     color-mix(in srgb, var(--debug-color) 10%, transparent)
       calc(
-        (100% - (var(--gap-grid) * (var(--grid-cols) - 1))) / var(--grid-cols)
+        (100% - (var(--gap) * (var(--grid-cols) - 1))) / var(--grid-cols)
       ),
     transparent
       calc(
-        (100% - (var(--gap-grid) * (var(--grid-cols) - 1))) / var(--grid-cols)
+        (100% - (var(--gap) * (var(--grid-cols) - 1))) / var(--grid-cols)
       ),
     transparent
       calc(
-        (100% - (var(--gap-grid) * (var(--grid-cols) - 1))) / var(--grid-cols) +
-          var(--gap-grid)
+        (100% - (var(--gap) * (var(--grid-cols) - 1))) / var(--grid-cols) +
+          var(--gap)
       )
   );
 }
@@ -419,7 +425,7 @@ html.stnd-debug .rhythm > * + *::after {
   font-family: var(--font-monospace);
   pointer-events: none;
   opacity: var(--debug-opacity);
-  z-index: var(--z-tooltip);
+  z-index: 10000;
   white-space: nowrap;
   max-width: 90%;
   overflow: hidden;
@@ -440,7 +446,7 @@ html.stnd-debug .rhythm > * + *::after {
   border-radius: var(--radius);
   pointer-events: none;
   opacity: var(--debug-opacity);
-  z-index: var(--z-tooltip);
+  z-index: 10000;
   white-space: nowrap;
 }
 
@@ -462,13 +468,14 @@ html.stnd-debug .rhythm > * + *::after {
   }
 }
 
-/* Print debug styles */
+/* Print debug styles.
+   Note: `.stnd-debug .prose::after` doesn't currently match anything in
+   this file — documentation-only, not fixed here. */
 @media print {
   .stnd-debug::before,
   .stnd-debug::after,
   .stnd-debug .grid::after,
-  .stnd-debug .prose::after,
-  body.stnd-debug::before {
+  .stnd-debug .prose::after {
     display: none !important;
   }
 }