@junoput01/junoui 0.2.0

package/dist/css/juno.css

@@ -0,0 +1,4481 @@
+/**
+ * junoui — complete stylesheet (tokens + base + utilities + components).
+ * Generated bundle; edit sources in src/css/ and rebuild.
+ */
+
+/**
+ * junoui design tokens — CSS custom properties.
+ * Core tokens live on :root. Semantic color roles switch with
+ * [data-juno-palette] + [data-juno-mode]; defaults are standard / dark.
+ * Generated by Style Dictionary — do not edit by hand.
+ */
+:root {
+  --juno-border-width-1: 1px;
+  --juno-border-width-2: 2px;
+  --juno-border-width-3: 3px;
+  --juno-bp-sm: 640px;
+  --juno-bp-md: 768px;
+  --juno-bp-lg: 1024px;
+  --juno-bp-xl: 1280px;
+  --juno-bp-2xl: 1536px;
+  --juno-shadow-1: 0 1px 2px rgb(0 0 0 / 0.30);
+  --juno-shadow-2: 0 4px 14px rgb(0 0 0 / 0.35);
+  --juno-shadow-3: 0 12px 32px rgb(0 0 0 / 0.50);
+  --juno-motion-duration-instant: 80ms;
+  --juno-motion-duration-quick: 140ms;
+  --juno-motion-duration-base: 200ms;
+  --juno-motion-duration-deliberate: 300ms;
+  --juno-motion-ease-decel: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --juno-motion-ease-accel: cubic-bezier(0.4, 0, 1, 1);
+  --juno-motion-ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
+  --juno-motion-ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);
+  --juno-opacity-disabled: 0.45;
+  --juno-opacity-muted: 0.65;
+  --juno-opacity-scrim: 0.62;
+  --juno-radius-2: 2px;
+  --juno-radius-3: 3px;
+  --juno-radius-4: 4px;
+  --juno-radius-5: 5px;
+  --juno-radius-8: 8px;
+  --juno-size-tap-min: 24px;
+  --juno-size-tap-comfortable: 44px;
+  --juno-size-dot-sm: 8px;
+  --juno-size-dot-md: 10px;
+  --juno-space-2: 2px;
+  --juno-space-4: 4px;
+  --juno-space-8: 8px;
+  --juno-space-10: 10px;
+  --juno-space-12: 12px;
+  --juno-space-16: 16px;
+  --juno-space-20: 20px;
+  --juno-space-24: 24px;
+  --juno-space-28: 28px;
+  --juno-space-32: 32px;
+  --juno-space-40: 40px;
+  --juno-space-56: 56px;
+  --juno-space-72: 72px;
+  --juno-space-96: 96px;
+  --juno-font-family-sans: 'B612', sans-serif;
+  --juno-font-family-mono: 'B612 Mono', monospace;
+  --juno-font-weight-light: 300;
+  --juno-font-weight-regular: 400;
+  --juno-font-weight-medium: 500;
+  --juno-font-weight-semibold: 600;
+  --juno-font-weight-bold: 700;
+  --juno-font-size-10: calc(10px * var(--juno-font-scale, 1));
+  --juno-font-size-11: calc(11px * var(--juno-font-scale, 1));
+  --juno-font-size-12: calc(12px * var(--juno-font-scale, 1));
+  --juno-font-size-13: calc(13px * var(--juno-font-scale, 1));
+  --juno-font-size-14: calc(14px * var(--juno-font-scale, 1));
+  --juno-font-size-16: calc(16px * var(--juno-font-scale, 1));
+  --juno-font-size-18: calc(18px * var(--juno-font-scale, 1));
+  --juno-font-size-20: calc(20px * var(--juno-font-scale, 1));
+  --juno-font-size-28: calc(28px * var(--juno-font-scale, 1));
+  --juno-font-size-32: calc(32px * var(--juno-font-scale, 1));
+  --juno-font-size-36: calc(36px * var(--juno-font-scale, 1));
+  --juno-font-size-38: calc(38px * var(--juno-font-scale, 1));
+  --juno-font-size-48: calc(48px * var(--juno-font-scale, 1));
+  --juno-font-size-52: calc(52px * var(--juno-font-scale, 1));
+  --juno-font-lineHeight-none: 1;
+  --juno-font-lineHeight-tight: 1.1;
+  --juno-font-lineHeight-snug: 1.2;
+  --juno-font-lineHeight-normal: 1.4;
+  --juno-font-lineHeight-relaxed: 1.5;
+  --juno-font-lineHeight-loose: 1.7;
+  --juno-font-tracking-tight: 0.02em;
+  --juno-font-tracking-normal: 0.06em;
+  --juno-font-tracking-label: 0.08em;
+  --juno-font-tracking-wide: 0.12em;
+  --juno-font-tracking-caps: 0.15em;
+  --juno-font-tracking-wider: 0.2em;
+  --juno-font-tracking-widest: 0.3em;
+  --juno-z-surface: 0;
+  --juno-z-raised: 100;
+  --juno-z-anchored: 2000;
+  --juno-z-overlay: 4000;
+  --juno-z-alert: 5000;
+
+  --juno-nominal: oklch(73% 0.22 148);
+  --juno-active: oklch(76% 0.16 204);
+  --juno-target: oklch(65% 0.26 324);
+  --juno-caution: oklch(77% 0.17 73);
+  --juno-warning: oklch(63% 0.22 28);
+  --juno-data: oklch(93% 0.008 85);
+  --juno-data-dim: oklch(38% 0.010 85);
+  --juno-label: oklch(63% 0.012 85);
+  --juno-muted: oklch(48.5% 0.010 85);
+  --juno-border: oklch(30% 0.012 85);
+  --juno-border-strong: oklch(40% 0.012 85);
+  --juno-s0: oklch(11% 0.010 85);
+  --juno-s1: oklch(15% 0.012 85);
+  --juno-s2: oklch(19% 0.012 85);
+  --juno-s3: oklch(24% 0.012 85);
+}
+
+:root[data-juno-palette="colorblind"]:not([data-juno-mode]) {
+  --juno-nominal: #78A9FF;
+  --juno-active: #BE95FF;
+  --juno-target: #FF7EB6;
+  --juno-caution: #F1C21B;
+  --juno-warning: #FF832B;
+  --juno-data: oklch(93% 0.008 85);
+  --juno-data-dim: oklch(38% 0.010 85);
+  --juno-label: oklch(63% 0.012 85);
+  --juno-muted: oklch(48.5% 0.010 85);
+  --juno-border: oklch(30% 0.012 85);
+  --juno-border-strong: oklch(40% 0.012 85);
+  --juno-s0: oklch(11% 0.010 85);
+  --juno-s1: oklch(15% 0.012 85);
+  --juno-s2: oklch(19% 0.012 85);
+  --juno-s3: oklch(24% 0.012 85);
+}
+
+:root[data-juno-palette="colorblind"][data-juno-mode="dark"] {
+  --juno-nominal: #78A9FF;
+  --juno-active: #BE95FF;
+  --juno-target: #FF7EB6;
+  --juno-caution: #F1C21B;
+  --juno-warning: #FF832B;
+  --juno-data: oklch(93% 0.008 85);
+  --juno-data-dim: oklch(38% 0.010 85);
+  --juno-label: oklch(63% 0.012 85);
+  --juno-muted: oklch(48.5% 0.010 85);
+  --juno-border: oklch(30% 0.012 85);
+  --juno-border-strong: oklch(40% 0.012 85);
+  --juno-s0: oklch(11% 0.010 85);
+  --juno-s1: oklch(15% 0.012 85);
+  --juno-s2: oklch(19% 0.012 85);
+  --juno-s3: oklch(24% 0.012 85);
+}
+
+:root[data-juno-palette="colorblind"][data-juno-mode="light"] {
+  --juno-nominal: #0043CE;
+  --juno-active: #6929C4;
+  --juno-target: #9F1853;
+  --juno-caution: #7D4F00;
+  --juno-warning: #BA4300;
+  --juno-data: oklch(14% 0.008 85);
+  --juno-data-dim: oklch(70% 0.008 85);
+  --juno-label: oklch(42% 0.010 85);
+  --juno-muted: oklch(63% 0.008 85);
+  --juno-border: oklch(82% 0.010 85);
+  --juno-border-strong: oklch(74% 0.010 85);
+  --juno-s0: oklch(97% 0.008 85);
+  --juno-s1: oklch(93% 0.010 85);
+  --juno-s2: oklch(89% 0.010 85);
+  --juno-s3: oklch(85% 0.010 85);
+}
+
+:root[data-juno-palette="soft"]:not([data-juno-mode]) {
+  --juno-nominal: oklch(63% 0.13 155);
+  --juno-active: oklch(67% 0.12 210);
+  --juno-target: oklch(58% 0.14 318);
+  --juno-caution: oklch(72% 0.12 75);
+  --juno-warning: oklch(62% 0.15 30);
+  --juno-data: oklch(90% 0.008 88);
+  --juno-data-dim: oklch(39% 0.010 88);
+  --juno-label: oklch(63% 0.010 88);
+  --juno-muted: oklch(48.5% 0.010 88);
+  --juno-border: oklch(31% 0.010 88);
+  --juno-border-strong: oklch(41% 0.010 88);
+  --juno-s0: oklch(12% 0.012 88);
+  --juno-s1: oklch(16% 0.012 88);
+  --juno-s2: oklch(20% 0.012 88);
+  --juno-s3: oklch(25% 0.012 88);
+}
+
+:root[data-juno-palette="soft"][data-juno-mode="dark"] {
+  --juno-nominal: oklch(63% 0.13 155);
+  --juno-active: oklch(67% 0.12 210);
+  --juno-target: oklch(58% 0.14 318);
+  --juno-caution: oklch(72% 0.12 75);
+  --juno-warning: oklch(62% 0.15 30);
+  --juno-data: oklch(90% 0.008 88);
+  --juno-data-dim: oklch(39% 0.010 88);
+  --juno-label: oklch(63% 0.010 88);
+  --juno-muted: oklch(48.5% 0.010 88);
+  --juno-border: oklch(31% 0.010 88);
+  --juno-border-strong: oklch(41% 0.010 88);
+  --juno-s0: oklch(12% 0.012 88);
+  --juno-s1: oklch(16% 0.012 88);
+  --juno-s2: oklch(20% 0.012 88);
+  --juno-s3: oklch(25% 0.012 88);
+}
+
+:root[data-juno-palette="soft"][data-juno-mode="light"] {
+  --juno-nominal: oklch(40% 0.11 155);
+  --juno-active: oklch(44% 0.11 210);
+  --juno-target: oklch(42% 0.12 318);
+  --juno-caution: oklch(50% 0.12 75);
+  --juno-warning: oklch(42% 0.13 30);
+  --juno-data: oklch(14% 0.008 88);
+  --juno-data-dim: oklch(69% 0.008 88);
+  --juno-label: oklch(44% 0.010 88);
+  --juno-muted: oklch(62.5% 0.008 88);
+  --juno-border: oklch(84% 0.010 88);
+  --juno-border-strong: oklch(76% 0.010 88);
+  --juno-s0: oklch(96% 0.010 88);
+  --juno-s1: oklch(92% 0.010 88);
+  --juno-s2: oklch(88% 0.010 88);
+  --juno-s3: oklch(84% 0.010 88);
+}
+
+:root[data-juno-palette="standard"]:not([data-juno-mode]) {
+  --juno-nominal: oklch(73% 0.22 148);
+  --juno-active: oklch(76% 0.16 204);
+  --juno-target: oklch(65% 0.26 324);
+  --juno-caution: oklch(77% 0.17 73);
+  --juno-warning: oklch(63% 0.22 28);
+  --juno-data: oklch(93% 0.008 85);
+  --juno-data-dim: oklch(38% 0.010 85);
+  --juno-label: oklch(63% 0.012 85);
+  --juno-muted: oklch(48.5% 0.010 85);
+  --juno-border: oklch(30% 0.012 85);
+  --juno-border-strong: oklch(40% 0.012 85);
+  --juno-s0: oklch(11% 0.010 85);
+  --juno-s1: oklch(15% 0.012 85);
+  --juno-s2: oklch(19% 0.012 85);
+  --juno-s3: oklch(24% 0.012 85);
+}
+
+:root[data-juno-palette="standard"][data-juno-mode="dark"] {
+  --juno-nominal: oklch(73% 0.22 148);
+  --juno-active: oklch(76% 0.16 204);
+  --juno-target: oklch(65% 0.26 324);
+  --juno-caution: oklch(77% 0.17 73);
+  --juno-warning: oklch(63% 0.22 28);
+  --juno-data: oklch(93% 0.008 85);
+  --juno-data-dim: oklch(38% 0.010 85);
+  --juno-label: oklch(63% 0.012 85);
+  --juno-muted: oklch(48.5% 0.010 85);
+  --juno-border: oklch(30% 0.012 85);
+  --juno-border-strong: oklch(40% 0.012 85);
+  --juno-s0: oklch(11% 0.010 85);
+  --juno-s1: oklch(15% 0.012 85);
+  --juno-s2: oklch(19% 0.012 85);
+  --juno-s3: oklch(24% 0.012 85);
+}
+
+:root[data-juno-palette="standard"][data-juno-mode="light"] {
+  --juno-nominal: oklch(42% 0.18 148);
+  --juno-active: oklch(47% 0.16 220);
+  --juno-target: oklch(45% 0.22 324);
+  --juno-caution: oklch(50% 0.17 73);
+  --juno-warning: oklch(42% 0.21 26);
+  --juno-data: oklch(14% 0.008 85);
+  --juno-data-dim: oklch(70% 0.008 85);
+  --juno-label: oklch(42% 0.010 85);
+  --juno-muted: oklch(63% 0.008 85);
+  --juno-border: oklch(82% 0.010 85);
+  --juno-border-strong: oklch(74% 0.010 85);
+  --juno-s0: oklch(97% 0.008 85);
+  --juno-s1: oklch(93% 0.010 85);
+  --juno-s2: oklch(89% 0.010 85);
+  --juno-s3: oklch(85% 0.010 85);
+}
+
+/* no data-juno-mode → follow the system color scheme */
+@media (prefers-color-scheme: light) {
+  :root:not([data-juno-mode]) {
+    --juno-nominal: oklch(42% 0.18 148);
+    --juno-active: oklch(47% 0.16 220);
+    --juno-target: oklch(45% 0.22 324);
+    --juno-caution: oklch(50% 0.17 73);
+    --juno-warning: oklch(42% 0.21 26);
+    --juno-data: oklch(14% 0.008 85);
+    --juno-data-dim: oklch(70% 0.008 85);
+    --juno-label: oklch(42% 0.010 85);
+    --juno-muted: oklch(63% 0.008 85);
+    --juno-border: oklch(82% 0.010 85);
+    --juno-border-strong: oklch(74% 0.010 85);
+    --juno-s0: oklch(97% 0.008 85);
+    --juno-s1: oklch(93% 0.010 85);
+    --juno-s2: oklch(89% 0.010 85);
+    --juno-s3: oklch(85% 0.010 85);
+  }
+
+  :root[data-juno-palette="colorblind"]:not([data-juno-mode]) {
+    --juno-nominal: #0043CE;
+    --juno-active: #6929C4;
+    --juno-target: #9F1853;
+    --juno-caution: #7D4F00;
+    --juno-warning: #BA4300;
+    --juno-data: oklch(14% 0.008 85);
+    --juno-data-dim: oklch(70% 0.008 85);
+    --juno-label: oklch(42% 0.010 85);
+    --juno-muted: oklch(63% 0.008 85);
+    --juno-border: oklch(82% 0.010 85);
+    --juno-border-strong: oklch(74% 0.010 85);
+    --juno-s0: oklch(97% 0.008 85);
+    --juno-s1: oklch(93% 0.010 85);
+    --juno-s2: oklch(89% 0.010 85);
+    --juno-s3: oklch(85% 0.010 85);
+  }
+
+  :root[data-juno-palette="soft"]:not([data-juno-mode]) {
+    --juno-nominal: oklch(40% 0.11 155);
+    --juno-active: oklch(44% 0.11 210);
+    --juno-target: oklch(42% 0.12 318);
+    --juno-caution: oklch(50% 0.12 75);
+    --juno-warning: oklch(42% 0.13 30);
+    --juno-data: oklch(14% 0.008 88);
+    --juno-data-dim: oklch(69% 0.008 88);
+    --juno-label: oklch(44% 0.010 88);
+    --juno-muted: oklch(62.5% 0.008 88);
+    --juno-border: oklch(84% 0.010 88);
+    --juno-border-strong: oklch(76% 0.010 88);
+    --juno-s0: oklch(96% 0.010 88);
+    --juno-s1: oklch(92% 0.010 88);
+    --juno-s2: oklch(88% 0.010 88);
+    --juno-s3: oklch(84% 0.010 88);
+  }
+
+  :root[data-juno-palette="standard"]:not([data-juno-mode]) {
+    --juno-nominal: oklch(42% 0.18 148);
+    --juno-active: oklch(47% 0.16 220);
+    --juno-target: oklch(45% 0.22 324);
+    --juno-caution: oklch(50% 0.17 73);
+    --juno-warning: oklch(42% 0.21 26);
+    --juno-data: oklch(14% 0.008 85);
+    --juno-data-dim: oklch(70% 0.008 85);
+    --juno-label: oklch(42% 0.010 85);
+    --juno-muted: oklch(63% 0.008 85);
+    --juno-border: oklch(82% 0.010 85);
+    --juno-border-strong: oklch(74% 0.010 85);
+    --juno-s0: oklch(97% 0.008 85);
+    --juno-s1: oklch(93% 0.010 85);
+    --juno-s2: oklch(89% 0.010 85);
+    --juno-s3: oklch(85% 0.010 85);
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  junoui — base layer
+ *  Reset + document defaults. Sets B612 as the type family but does NOT
+ *  fetch it — that would break under a strict CSP and phone home. Supply the
+ *  fonts yourself, or opt into the self-hosted set: `import 'junoui/fonts.css'`
+ *  (see src/css/fonts.css). Falls back to system sans/mono until then.
+ * ════════════════════════════════════════════════════════════════════ */
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+/* System color scheme. Without data-juno-mode the theme follows the OS
+   (`prefers-color-scheme`; see juno-tokens.css) — `dark light` here lets the
+   UA pick matching scrollbars/form chrome. An explicit mode pins both. */
+:root { color-scheme: dark light; }
+:root[data-juno-mode='dark'] { color-scheme: dark; }
+
+/* Control surfaces. On dark panels the hairline border (~23% L) disappears, so
+   lift the control edge to `muted` and sit controls on `s2`; light mode keeps the
+   true border on `s0`. Form components read these instead of raw surface roles. */
+:root,
+:root[data-juno-mode='dark'] {
+  --juno-control-surface: var(--juno-s2);
+  --juno-control-edge: var(--juno-muted);
+
+  /* Knob + track-rim of the lever controls (switch / slider). Edge and knob
+     are lifted well clear of the track so the control reads at a squint: a
+     light grey lever (face hi→lo) with dark grip lines on a dark track. */
+  --juno-control-edge-strong: var(--juno-label);
+  --juno-knob-edge: var(--juno-label);
+  --juno-knob-face-hi: var(--juno-label);
+  --juno-knob-face-lo: var(--juno-muted);
+  --juno-knob-grip: var(--juno-s0);
+}
+
+:root[data-juno-mode='light'] {
+  color-scheme: light;
+
+  --juno-control-surface: var(--juno-s0);
+  --juno-control-edge: var(--juno-border);
+
+  /* Light mode inverts: a dark grey lever with light grip lines on a near-
+     white track. Same vars, so switch + slider stay in lockstep. */
+  --juno-control-edge-strong: var(--juno-label);
+  --juno-knob-edge: var(--juno-label);
+  --juno-knob-face-hi: var(--juno-muted);
+  --juno-knob-face-lo: var(--juno-label);
+  --juno-knob-grip: var(--juno-s0);
+}
+
+/* no data-juno-mode + a light OS → the light control surfaces above */
+@media (prefers-color-scheme: light) {
+  :root:not([data-juno-mode]) {
+    --juno-control-surface: var(--juno-s0);
+    --juno-control-edge: var(--juno-border);
+    --juno-knob-face-hi: var(--juno-muted);
+    --juno-knob-face-lo: var(--juno-label);
+  }
+}
+
+* { margin: 0; padding: 0; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-14);
+  line-height: var(--juno-font-lineHeight-normal);
+  letter-spacing: var(--juno-font-tracking-tight);
+  color: var(--juno-data);
+  background: var(--juno-s0);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+}
+
+code, kbd, samp, pre { font-family: var(--juno-font-family-mono); }
+
+/* Accessible focus — uses the ACTIVE role so it tracks the theme. */
+:where(a, button, input, select, textarea, [tabindex]):focus-visible {
+  outline: 2px solid var(--juno-active);
+  outline-offset: 2px;
+  border-radius: var(--juno-radius-2);
+}
+
+/* Touch ergonomics — on coarse pointers (finger, not mouse) every control
+   that sizes itself off the tap minimum grows to the comfortable target
+   (44px). A cascade override, not a token change: the token values stay
+   the contract; a phone just reads the bigger one. */
+@media (pointer: coarse) {
+  :root { --juno-size-tap-min: var(--juno-size-tap-comfortable); }
+}
+
+@keyframes juno-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Higher-contrast preference: hairline seams step up to the strong border
+   so panel edges stop disappearing on users who asked for more contrast. */
+@media (prefers-contrast: more) {
+  :root { --juno-border: var(--juno-border-strong); }
+}
+
+/* Windows High Contrast / forced-colors: opt into the system palette so
+   borders and focus stay visible when our colors are overridden. */
+@media (forced-colors: active) {
+  *:focus-visible { outline-color: Highlight; }
+
+  .juno-badge,
+  .juno-btn,
+  .juno-card,
+  .juno-readout { border: 1px solid CanvasText; }
+  .juno-badge { forced-color-adjust: none; } /* keep status fill meaningful */
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  junoui — layout layer (intrinsic & responsive)
+ *
+ *  Composition primitives that reflow by the space available — no media
+ *  queries, no per-app config. Wrap a region in one of these and it adapts
+ *  on resize. Every knob is a custom property with a token default, so you
+ *  override per instance: <div class="juno-grid-auto" style="--juno-grid-min:280px">.
+ *
+ *  Pattern vocabulary follows the well-known "Every Layout" primitives
+ *  (stack / cluster / sidebar / switcher / grid) for familiarity.
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* Center — page/section wrapper with a max measure and fluid gutters. */
+.juno-center {
+  box-sizing: content-box;
+  max-width: var(--juno-measure, var(--juno-bp-xl));
+  margin-inline: auto;
+  padding-inline: clamp(var(--juno-space-16), 4vw, var(--juno-space-40));
+}
+
+/* Stack — vertical rhythm. Gap between siblings only. */
+.juno-stack {
+  display: flex;
+  flex-direction: column;
+}
+.juno-stack > * { margin-block: 0; }
+.juno-stack > * + * { margin-block-start: var(--juno-stack-space, var(--juno-space-16)); }
+
+/* Cluster — wrapping inline group (toolbars, tag rows, button groups). */
+.juno-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: var(--juno-cluster-align, center);
+  gap: var(--juno-cluster-space, var(--juno-space-8));
+}
+
+/* Grid-auto — responsive cards. Columns collapse on their own; no breakpoints.
+   Each column is at least --juno-grid-min, then as many as fit. */
+.juno-grid-auto {
+  display: grid;
+  gap: var(--juno-grid-space, var(--juno-space-16));
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--juno-grid-min, 240px), 100%), 1fr));
+}
+
+/* Tiles — a grid-auto wired to the density layer: min size + gap follow
+   [data-juno-density], so a whole media wall re-densifies from the one
+   attribute. auto-fill keeps tile size honest when few items remain. */
+.juno-grid-auto--tiles {
+  gap: var(--juno-grid-space, var(--juno-gap-content));
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--juno-grid-min, var(--juno-tile-min)), 100%), 1fr));
+}
+
+/* Sidebar — a fixed-ish aside next to fluid content; stacks when the content
+   would get narrower than --juno-sidebar-content-min. No media query. */
+.juno-sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--juno-sidebar-space, var(--juno-space-24));
+}
+
+.juno-sidebar > .juno-sidebar__aside {
+  flex-grow: 1;
+  flex-basis: var(--juno-sidebar-width, 280px);
+}
+
+.juno-sidebar > .juno-sidebar__main {
+  flex-grow: 999;
+  flex-basis: 0;
+  min-inline-size: var(--juno-sidebar-content-min, 60%);
+}
+
+/* Switcher — N children side by side, or all stacked, flipping at a threshold
+   container width (--juno-switcher-threshold). Pure flex-basis math. */
+.juno-switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--juno-switcher-space, var(--juno-space-16));
+}
+
+.juno-switcher > * {
+  flex-grow: 1;
+  flex-basis: calc((var(--juno-switcher-threshold, var(--juno-bp-sm)) - 100%) * 999);
+}
+
+/* Reel — horizontal scroll row (overflowing chips, timelines). */
+.juno-reel {
+  display: flex;
+  gap: var(--juno-reel-space, var(--juno-space-12));
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: inline mandatory;
+}
+.juno-reel > * { scroll-snap-align: start; flex: 0 0 auto; }
+
+/* Hide/show by viewport breakpoint — the rare case an intrinsic primitive
+   can't express (e.g. swap a nav for a menu button). */
+@media (width <= 767.98px) { .juno-hide-below-md { display: none !important; } }
+
+@media (width >= 768px)    { .juno-hide-from-md  { display: none !important; } }
+
+/* ════════════════════════════════════════════════════════════════════
+ *  junoui — density layer
+ *  Semantic padding/gap aliases that switch with [data-juno-density].
+ *  Components reference these instead of raw --juno-space-* for their
+ *  internal padding, so the whole UI compacts from one attribute:
+ *
+ *      <body data-juno-density="compact">   →  dense, data-heavy layout
+ *      <body>                               →  comfortable (default)
+ *
+ *  Density is intentionally NON-linear: compact removes more block
+ *  (vertical) padding than inline, so text never crowds its edges.
+ *  Interactive controls keep their min-height (WCAG tap target) — only
+ *  padding shrinks. Add a new archetype only when a component needs one.
+ * ════════════════════════════════════════════════════════════════════ */
+
+:root,
+[data-juno-density='comfortable'] {
+  /* interactive controls — button, future input/select */
+  --juno-pad-control-block: var(--juno-space-10);
+  --juno-pad-control-inline: var(--juno-space-20);
+  --juno-gap-control: var(--juno-space-8);
+
+  /* surfaces — card / panel bodies */
+  --juno-pad-surface-block: var(--juno-space-16);
+  --juno-pad-surface-inline: var(--juno-space-16);
+
+  /* content — media/tile walls (.juno-grid-auto--tiles) re-densify too */
+  --juno-tile-min: 150px;
+  --juno-gap-content: var(--juno-space-10);
+}
+
+[data-juno-density='compact'] {
+  --juno-pad-control-block: var(--juno-space-4);
+  --juno-pad-control-inline: var(--juno-space-12);
+  --juno-gap-control: var(--juno-space-4);
+  --juno-pad-surface-block: var(--juno-space-10);
+  --juno-pad-surface-inline: var(--juno-space-12);
+  --juno-tile-min: 108px;
+  --juno-gap-content: var(--juno-space-4);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  junoui — type-scale layer
+ *  One multiplier, --juno-font-scale, scales every --juno-font-size-*
+ *  token (the generated token CSS routes each size through it). Set it
+ *  per [data-juno-text] to enlarge all UI text without touching density:
+ *
+ *      <html data-juno-text="large">   →  +12.5% type
+ *      <html data-juno-text="xl">      →  +25% type
+ *      <html>                          →  base (default)
+ *
+ *  Orthogonal to density: density changes padding/gap, type-scale changes
+ *  glyph size. Combine freely. Larger text aids low-vision / squint
+ *  legibility (WCAG 1.4.4 resize text).
+ * ════════════════════════════════════════════════════════════════════ */
+
+:root,
+[data-juno-text='base'] {
+  --juno-font-scale: 1;
+}
+
+[data-juno-text='large'] {
+  --juno-font-scale: 1.125;
+}
+
+[data-juno-text='xl'] {
+  --juno-font-scale: 1.25;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Accordion / disclosure
+ *  Stacked, expandable sections built on native <details>/<summary> —
+ *  keyboard + screen-reader native, ZERO JS. A chevron rotates on open.
+ *  Use a lone <details> for a single disclosure; group them in
+ *  .juno-accordion for a bordered set.
+ *  Usage:
+ *    <div class="juno-accordion">
+ *      <details class="juno-accordion__item" open>
+ *        <summary class="juno-accordion__summary">Region · us-east-1</summary>
+ *        <div class="juno-accordion__body">…</div>
+ *      </details>
+ *      <details class="juno-accordion__item">
+ *        <summary class="juno-accordion__summary">Region · eu-west-1</summary>
+ *        <div class="juno-accordion__body">…</div>
+ *      </details>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-accordion {
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-5);
+  overflow: hidden;
+}
+
+.juno-accordion__item {
+  border-block-end: var(--juno-border-width-1) solid var(--juno-border);
+}
+
+.juno-accordion__item:last-child { border-block-end: none; }
+
+.juno-accordion__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--juno-space-12);
+  padding: var(--juno-pad-control-block) var(--juno-pad-surface-inline);
+  background: var(--juno-s1);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-medium);
+  color: var(--juno-data);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+/* hide the native disclosure triangle (both engines) */
+.juno-accordion__summary::-webkit-details-marker { display: none; }
+
+.juno-accordion__summary:hover { background: var(--juno-s2); }
+
+/* chevron — a rotated corner that flips when the item is open */
+.juno-accordion__summary::after {
+  content: '';
+  flex-shrink: 0;
+  inline-size: var(--juno-space-8);
+  block-size: var(--juno-space-8);
+  border-inline-end: var(--juno-border-width-2) solid var(--juno-muted);
+  border-block-end: var(--juno-border-width-2) solid var(--juno-muted);
+  transform: translateY(-2px) rotate(45deg);
+  transition: transform var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-accordion__item[open] > .juno-accordion__summary::after {
+  transform: translateY(2px) rotate(-135deg);
+}
+
+.juno-accordion__body {
+  padding: var(--juno-space-12) var(--juno-pad-surface-inline) var(--juno-pad-surface-block);
+  background: var(--juno-s0);
+  border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+  font-size: var(--juno-font-size-13);
+  line-height: var(--juno-font-lineHeight-relaxed);
+  color: var(--juno-label);
+}
+
+/* a lone disclosure (no .juno-accordion wrapper) gets its own frame */
+details.juno-accordion__item:only-child {
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-5);
+  overflow: hidden;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Alert / inline notification
+ *  A role-tinted banner for in-context messages: validation summaries,
+ *  system status, callouts. Soft-fill by default with a role accent rail;
+ *  icon + title + text + optional actions + optional dismiss. Color comes
+ *  from --juno-role (set by a .juno--<role> class); default informational.
+ *  Usage:
+ *    <div class="juno-alert juno--warning" role="alert">
+ *      <span class="juno-alert__icon" aria-hidden="true">⚠</span>
+ *      <div class="juno-alert__body">
+ *        <span class="juno-alert__title">Deploy blocked</span>
+ *        <span class="juno-alert__text">Two checks are still failing.</span>
+ *      </div>
+ *      <button class="juno-alert__close" aria-label="Dismiss">✕</button>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-alert {
+  --juno-role: var(--juno-active);
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--juno-space-12);
+  padding: var(--juno-pad-surface-block) var(--juno-pad-surface-inline);
+  background: color-mix(in srgb, var(--juno-role) 10%, transparent);
+  border: var(--juno-border-width-1) solid color-mix(in srgb, var(--juno-role) 30%, transparent);
+  border-inline-start: var(--juno-border-width-3) solid var(--juno-role);
+  border-radius: var(--juno-radius-5);
+  color: var(--juno-data);
+}
+
+.juno-alert__icon {
+  flex-shrink: 0;
+  color: var(--juno-role);
+  font-size: var(--juno-font-size-16);
+  line-height: var(--juno-font-lineHeight-none);
+}
+
+.juno-alert__body {
+  flex: 1;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-2);
+}
+
+.juno-alert__title {
+  font-family: var(--juno-font-family-sans);
+  font-weight: var(--juno-font-weight-semibold);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+}
+
+.juno-alert__text {
+  font-size: var(--juno-font-size-13);
+  line-height: var(--juno-font-lineHeight-relaxed);
+  color: var(--juno-label);
+}
+
+.juno-alert__actions {
+  display: flex;
+  gap: var(--juno-space-8);
+  margin-block-start: var(--juno-space-8);
+}
+
+.juno-alert__close {
+  flex-shrink: 0;
+  appearance: none;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--juno-muted);
+  font-size: var(--juno-font-size-16);
+  line-height: var(--juno-font-lineHeight-none);
+  cursor: pointer;
+}
+
+.juno-alert__close:hover { color: var(--juno-data); }
+
+/* solid — high-emphasis variant: full role fill, text on the base surface */
+.juno-alert--solid {
+  background: var(--juno-role);
+  border-color: var(--juno-role);
+  color: var(--juno-s0);
+}
+
+.juno-alert--solid .juno-alert__icon,
+.juno-alert--solid .juno-alert__title,
+.juno-alert--solid .juno-alert__text,
+.juno-alert--solid .juno-alert__close { color: var(--juno-s0); }
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Avatar  ·  user / entity portrait
+ *  A round (or squared) portrait that holds an <img>, initials, or an
+ *  icon fallback. Sizes ride one custom property; an optional role ring
+ *  marks status (online, alert…). Zero JS. Pairs with a
+ *  .juno-skeleton--circle placeholder while the image loads.
+ *  Usage:
+ *    <span class="juno-avatar"><img src="…" alt="Ada Lovelace" /></span>
+ *    <span class="juno-avatar juno-avatar--lg">AL</span>
+ *    <span class="juno-avatar juno-avatar--ring juno--nominal">
+ *      <svg class="juno-icon"><use href="…#juno-i-user" /></svg>
+ *    </span>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-avatar {
+  --juno-avatar-size: var(--juno-space-32);
+
+  display: inline-grid;
+  place-content: center;
+  flex-shrink: 0;
+  inline-size: var(--juno-avatar-size);
+  block-size: var(--juno-avatar-size);
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  color: var(--juno-label);
+  font-family: var(--juno-font-family-sans);
+
+  /* initials scale with the avatar (~40% of its box) */
+  font-size: calc(var(--juno-avatar-size) * 0.4);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-tight);
+  text-transform: uppercase;
+  user-select: none;
+}
+
+/* the image fills the circle */
+.juno-avatar img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+/* a square / rounded-rect portrait instead of a circle */
+.juno-avatar--square {
+  border-radius: var(--juno-radius-4);
+}
+
+/* status ring — reads the role; pair with a label / title for meaning */
+.juno-avatar--ring {
+  border-color: var(--juno-role);
+  box-shadow: 0 0 0 var(--juno-border-width-2) color-mix(in srgb, var(--juno-role) 30%, transparent);
+}
+
+/* sizes */
+.juno-avatar--sm {
+  --juno-avatar-size: var(--juno-space-24);
+}
+
+.juno-avatar--lg {
+  --juno-avatar-size: var(--juno-space-40);
+}
+
+.juno-avatar--xl {
+  --juno-avatar-size: var(--juno-space-56);
+}
+
+/* overlapping cluster — a row of avatars that tuck under each other */
+.juno-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+.juno-avatar-group .juno-avatar {
+  border-color: var(--juno-s0);
+  border-width: var(--juno-border-width-2);
+}
+
+.juno-avatar-group .juno-avatar + .juno-avatar {
+  margin-inline-start: calc(var(--juno-avatar-size) * -0.3);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Badge / status indicator
+ *  Usage:  <span class="juno-badge juno--nominal">NOMINAL</span>
+ *          <span class="juno-badge juno-badge--outline juno--caution">…</span>
+ *  Color comes from --juno-role (set by an .juno--<role> class).
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-badge {
+  --juno-role: var(--juno-muted);
+
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-11);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  padding: var(--juno-space-4) var(--juno-space-10);
+  border-radius: var(--juno-radius-3);
+  border: var(--juno-border-width-1) solid transparent;
+  white-space: nowrap;
+
+  /* filled (default) */
+  background: var(--juno-role);
+  color: var(--juno-s0);
+}
+
+.juno-badge--outline {
+  background: transparent;
+  color: var(--juno-role);
+  border-color: var(--juno-role);
+}
+
+/* micro — data-UI atom below the badge scale: provenance/kind tags, model
+   names, threshold values. Mono, outline-only, 10px floor (the type scale
+   stops there on purpose). Role via juno--* as usual. */
+.juno-badge--micro {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-normal);
+  padding: var(--juno-space-2) var(--juno-space-4);
+  border-radius: var(--juno-radius-2);
+  background: transparent;
+  color: var(--juno-role);
+  border-color: color-mix(in srgb, var(--juno-role) 55%, transparent);
+}
+
+/* soft — low-fill chip: role text on a tinted wash + faint role border.
+   Quieter than filled; ideal for in-table status (a phase/state per row). */
+.juno-badge--soft {
+  background: color-mix(in srgb, var(--juno-role) 13%, transparent);
+  color: var(--juno-role);
+  border-color: color-mix(in srgb, var(--juno-role) 30%, transparent);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Breadcrumb  ·  hierarchy trail
+ *  A horizontal path of links to ancestor pages, ending at the current
+ *  page. Built on a real <nav><ol>; the separator is a CSS chevron (no
+ *  glyph font). Mark the last crumb aria-current="page". Zero JS.
+ *  Usage:
+ *    <nav class="juno-breadcrumb" aria-label="Breadcrumb">
+ *      <ol>
+ *        <li><a href="/">Home</a></li>
+ *        <li><a href="/fleet">Fleet</a></li>
+ *        <li><a aria-current="page">api-gateway</a></li>
+ *      </ol>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-breadcrumb ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--juno-space-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+}
+
+.juno-breadcrumb li {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+}
+
+.juno-breadcrumb a {
+  color: var(--juno-label);
+  text-decoration: none;
+  border-radius: var(--juno-radius-2);
+}
+
+.juno-breadcrumb a[href]:hover {
+  color: var(--juno-data);
+  text-decoration: underline;
+}
+
+.juno-breadcrumb a:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+/* current page — not a link; brightest */
+.juno-breadcrumb [aria-current='page'] {
+  color: var(--juno-data);
+  font-weight: var(--juno-font-weight-semibold);
+}
+
+/* separator — a CSS chevron between items (no glyph font) */
+.juno-breadcrumb li + li::before {
+  content: '';
+  inline-size: var(--juno-space-4);
+  block-size: var(--juno-space-4);
+  border-block-start: var(--juno-border-width-1) solid var(--juno-muted);
+  border-inline-end: var(--juno-border-width-1) solid var(--juno-muted);
+  transform: rotate(45deg); /* points to the inline-end (flips under RTL via dir) */
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Button
+ *  Usage:  <button class="juno-btn juno--nominal">CONFIRM</button>
+ *          <button class="juno-btn juno-btn--ghost">CANCEL</button>
+ *          <button class="juno-btn juno-btn--sm">EDIT</button>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-btn {
+  --juno-role: var(--juno-active);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-gap-control);
+  min-height: var(--juno-size-tap-min);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  padding: var(--juno-pad-control-block) var(--juno-pad-control-inline);
+  border: var(--juno-border-width-1) solid transparent;
+  border-radius: var(--juno-radius-4);
+  cursor: pointer;
+
+  /* primary (filled) */
+  background: var(--juno-role);
+  color: var(--juno-s0);
+}
+
+.juno-btn:hover { filter: brightness(1.08); }
+.juno-btn:active { filter: brightness(0.94); }
+
+.juno-btn--ghost {
+  background: transparent;
+  color: var(--juno-data);
+  border-color: var(--juno-border);
+  font-weight: var(--juno-font-weight-semibold);
+}
+.juno-btn--ghost:hover { background: var(--juno-s2); filter: none; }
+
+/* Small — for dense desktop toolbars (40–46px bars) where the default
+   control would not fit. Deliberately under the WCAG tap-min target:
+   keep the default size for touch surfaces. Combines with --ghost + roles. */
+.juno-btn--sm {
+  min-height: var(--juno-space-24);
+  font-size: var(--juno-font-size-11);
+  letter-spacing: var(--juno-font-tracking-wide);
+  padding: var(--juno-space-4) var(--juno-space-10);
+  border-radius: var(--juno-radius-3);
+}
+
+.juno-btn:disabled {
+  background: var(--juno-muted);
+  color: var(--juno-label);
+  border-color: transparent;
+  cursor: not-allowed;
+  filter: none;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Card / panel
+ *  Usage:
+ *    <article class="juno-card">
+ *      <header class="juno-card__head">…<span class="juno-badge …">…</span></header>
+ *      <div class="juno-card__body">…</div>
+ *    </article>
+ *  Add a status accent edge: <article class="juno-card juno-card--accent juno--caution">
+ *  Critical full-border:     <article class="juno-card juno-card--alert  juno--warning">
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-card {
+  --juno-role: var(--juno-active);
+
+  background: var(--juno-s1);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-8);
+  overflow: hidden;
+  container-type: inline-size; /* rows below adapt to the card's own width */
+}
+
+/* When the card itself is narrow, stack label/value rows. Driven by the
+   card's container width, not the viewport — works in any layout. */
+@container (max-width: 320px) {
+  .juno-card__row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--juno-space-2);
+  }
+}
+
+.juno-card--accent { border-top: var(--juno-border-width-2) solid var(--juno-role); }
+
+.juno-card--alert { border-color: var(--juno-role); border-top-width: var(--juno-border-width-2); }
+
+.juno-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--juno-space-8);
+  padding: var(--juno-space-12) var(--juno-space-16);
+  border-bottom: var(--juno-border-width-1) solid var(--juno-border);
+  font-size: var(--juno-font-size-12);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-wide);
+  text-transform: uppercase;
+  color: var(--juno-data);
+}
+
+.juno-card--alert .juno-card__head {
+  background: var(--juno-s2);
+  border-bottom-color: var(--juno-role);
+  color: var(--juno-role);
+}
+
+.juno-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-12);
+  padding: var(--juno-pad-surface-block) var(--juno-pad-surface-inline);
+}
+
+/* Label / value row inside a card body */
+.juno-card__row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Checkbox & Radio
+ *  Custom-styled native inputs (appearance:none) — keyboard + screen-reader
+ *  native, zero JS. Checkbox is a targeting-reticle square whose solid core
+ *  drops in on check; radio is a ring with a center dot. Default tint ACTIVE.
+ *  Wrap with .juno-choice for an inline label row.
+ *  Usage:
+ *    <label class="juno-choice">
+ *      <input class="juno-checkbox" type="checkbox" checked /> TCAS
+ *    </label>
+ *    <label class="juno-choice">
+ *      <input class="juno-radio" type="radio" name="mode" /> MANAGED
+ *    </label>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+  cursor: pointer;
+}
+
+.juno-checkbox,
+.juno-radio {
+  --juno-role: var(--juno-active);
+
+  appearance: none;
+  margin: 0;
+  flex-shrink: 0;
+  inline-size: var(--juno-space-16);
+  block-size: var(--juno-space-16);
+  display: inline-grid;
+  place-content: center;
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  cursor: pointer;
+  transition:
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    box-shadow var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-checkbox { border-radius: var(--juno-radius-2); }
+.juno-radio { border-radius: 50%; }
+
+/* the core / dot — drops in on check with a slight overshoot */
+.juno-checkbox::before,
+.juno-radio::before {
+  content: '';
+  inline-size: var(--juno-space-8);
+  block-size: var(--juno-space-8);
+  background: var(--juno-role);
+  transform: scale(0);
+  transition: transform var(--juno-motion-duration-quick) var(--juno-motion-ease-spring);
+}
+
+.juno-checkbox::before { border-radius: 1px; }
+.juno-radio::before { border-radius: 50%; }
+
+.juno-checkbox:checked,
+.juno-radio:checked {
+  border-color: var(--juno-role);
+  box-shadow: 0 0 0 var(--juno-border-width-3) color-mix(in srgb, var(--juno-role) 22%, transparent);
+}
+
+.juno-checkbox:checked::before,
+.juno-radio:checked::before { transform: scale(1); }
+
+/* indeterminate (e.g. a "select all" with a partial set) — a dash, not a core */
+.juno-checkbox:indeterminate {
+  border-color: var(--juno-role);
+  box-shadow: 0 0 0 var(--juno-border-width-3) color-mix(in srgb, var(--juno-role) 22%, transparent);
+}
+
+.juno-checkbox:indeterminate::before {
+  transform: scale(1);
+  block-size: 2px;
+}
+
+.juno-checkbox:disabled,
+.juno-radio:disabled {
+  background: var(--juno-s1);
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-choice:has(:disabled) { color: var(--juno-muted); cursor: not-allowed; }
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Chip / Tag  ·  compact interactive token
+ *  A pill that represents a discrete entity: a filter, a selected value,
+ *  a removable tag. Unlike a badge (a static status label), a chip is
+ *  interactive — selectable and/or dismissible. Reads --juno-role for its
+ *  accent. Use a <button> for a toggle chip; add a remove button for a
+ *  dismissible one. Zero JS — the app owns selection / removal.
+ *  Usage:
+ *    <span class="juno-chip">us-east-1</span>
+ *    <button class="juno-chip juno-chip--toggle" aria-pressed="true">Active</button>
+ *    <span class="juno-chip juno--active">
+ *      filter:prod
+ *      <button class="juno-chip__remove" aria-label="Remove">
+ *        <svg class="juno-icon juno-icon--sm"><use href="…#juno-i-x" /></svg>
+ *      </button>
+ *    </span>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-chip {
+  --juno-role: var(--juno-label);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+  block-size: var(--juno-space-24);
+  padding-inline: var(--juno-space-12);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  border-radius: 999px;
+  background: var(--juno-control-surface);
+  color: var(--juno-data);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-12);
+  letter-spacing: var(--juno-font-tracking-tight);
+  white-space: nowrap;
+}
+
+/* leading accent dot — reads the role; appears when a role class is set */
+.juno-chip.juno--nominal,
+.juno-chip.juno--active,
+.juno-chip.juno--target,
+.juno-chip.juno--caution,
+.juno-chip.juno--warning {
+  border-color: var(--juno-role);
+  color: var(--juno-role);
+  background: color-mix(in srgb, var(--juno-role) 12%, var(--juno-control-surface));
+}
+
+/* toggle chip — a real <button>; pressed = filled accent */
+button.juno-chip {
+  cursor: pointer;
+  transition:
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-chip--toggle[aria-pressed='true'] {
+  border-color: var(--juno-role);
+  background: color-mix(in srgb, var(--juno-role) 18%, var(--juno-control-surface));
+  color: var(--juno-role);
+}
+
+.juno-chip:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+/* remove affordance — a tiny inset button at the trailing edge */
+.juno-chip__remove {
+  display: inline-grid;
+  place-content: center;
+  margin-inline-end: calc(var(--juno-space-4) * -1);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  opacity: var(--juno-opacity-muted);
+  cursor: pointer;
+}
+
+.juno-chip__remove:hover,
+.juno-chip__remove:focus-visible {
+  opacity: 1;
+}
+
+.juno-chip:disabled,
+.juno-chip[aria-disabled='true'] {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Divider  ·  visual / semantic separation
+ *  A hairline rule. Horizontal by default; add --vertical for a column
+ *  separator (stretches to the row's cross size). An optional centered
+ *  label breaks the rule in two ("OR", "MORE"). Use a real <hr> for a
+ *  semantic break, or a styled element when it's purely visual.
+ *  Usage:
+ *    <hr class="juno-divider" />
+ *    <div class="juno-divider juno-divider--label">OR</div>
+ *    <span class="juno-divider juno-divider--vertical"></span>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-divider {
+  border: 0;
+  margin: 0;
+  block-size: var(--juno-border-width-1);
+  inline-size: 100%;
+  background: var(--juno-border);
+}
+
+/* vertical rule — sits inline; relies on the parent giving it block size */
+.juno-divider--vertical {
+  inline-size: var(--juno-border-width-1);
+  block-size: auto;
+  align-self: stretch;
+  min-block-size: var(--juno-space-16);
+}
+
+/* labeled rule — a centered caption with a line on each side */
+.juno-divider--label {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-12);
+  border: 0;
+  background: none;
+  block-size: auto;
+  color: var(--juno-label);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-11);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+}
+
+.juno-divider--label::before,
+.juno-divider--label::after {
+  content: '';
+  flex: 1;
+  block-size: var(--juno-border-width-1);
+  background: var(--juno-border);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Dock (app-shell bottom navigation)
+ *  The narrow-viewport counterpart of the rail: 3–5 primary destinations
+ *  as icon-over-label tap targets pinned to the bottom edge. Zero JS —
+ *  the app sets aria-current="page"; the active item styles off the
+ *  attribute, exactly like the rail.
+ *
+ *  Sticky (not fixed) so it stays in flow: put it last inside the
+ *  scrolling column and it pins itself without overlapping content.
+ *  Pads for the home-indicator via safe-area-inset. Pair with the rail
+ *  using the viewport helpers (see docs/layout.md#app-shell):
+ *    <nav class="juno-rail juno-hide-below-md" …>
+ *    <nav class="juno-dock juno-hide-from-md" aria-label="Primary">
+ *      <a class="juno-dock__item" href="…" aria-current="page">
+ *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+ *        <span class="juno-dock__label">Library</span>
+ *      </a>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-dock {
+  --juno-role: var(--juno-active);
+
+  position: sticky;
+  inset-block-end: 0;
+  z-index: var(--juno-z-raised);
+  display: flex;
+  align-items: stretch;
+  background: var(--juno-s1);
+  border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+  padding-block-end: env(safe-area-inset-bottom, 0);
+}
+
+.juno-dock__item {
+  flex: 1 1 0;
+  min-inline-size: 0;
+  min-block-size: var(--juno-size-tap-comfortable);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-2);
+  padding-block: var(--juno-space-4);
+  border-block-start: var(--juno-border-width-2) solid transparent;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--juno-label);
+  cursor: pointer;
+}
+
+.juno-dock__label {
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-dock__item:hover { color: var(--juno-data); }
+
+/* active = attribute, not class: <a aria-current="page"> */
+.juno-dock__item[aria-current] {
+  border-block-start-color: var(--juno-role);
+  background: var(--juno-s2);
+  color: var(--juno-data);
+}
+
+.juno-dock__item:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Status dot + label
+ *  Usage:
+ *    <span class="juno-status juno--nominal">
+ *      <span class="juno-status__dot"></span>NOMINAL
+ *    </span>
+ *  Pair color with the text label — color is never the sole signal.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-status {
+  --juno-role: var(--juno-nominal);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+  font-size: var(--juno-font-size-12);
+  letter-spacing: var(--juno-font-tracking-label);
+  color: var(--juno-role);
+}
+
+.juno-status__dot {
+  width: var(--juno-size-dot-sm);
+  height: var(--juno-size-dot-sm);
+  border-radius: 50%;
+  background: var(--juno-role);
+  flex-shrink: 0;
+}
+
+.juno-status--lg .juno-status__dot {
+  width: var(--juno-size-dot-md);
+  height: var(--juno-size-dot-md);
+}
+
+/* Live/armed pulse — respects prefers-reduced-motion via base layer. */
+.juno-status--live .juno-status__dot { animation: juno-blink 1.4s ease-in-out infinite; }
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Drawer
+ *  Edge-anchored <dialog> for secondary tasks and settings. Same scrim and
+ *  layer as the modal, but slides along one axis. App owns showModal()/close().
+ *  Default anchors to the inline-end edge; modifiers move it.
+ *  Usage:
+ *    <dialog class="juno-modal juno-drawer">…</dialog>            (inline-end)
+ *    <dialog class="juno-modal juno-drawer juno-drawer--start">…</dialog>
+ *    <dialog class="juno-modal juno-drawer juno-drawer--bottom">…</dialog>
+ *  Reuses .juno-modal for the surface + scrim; this file re-pins + re-slides.
+ *  Selectors are compound (.juno-modal.juno-drawer) so they override the
+ *  modal's centered transform regardless of bundle order.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-modal.juno-drawer {
+  inline-size: 380px;
+  max-inline-size: 100%;
+  block-size: 100dvh;
+  max-block-size: 100dvh;
+  border-radius: 0;
+  border: none;
+
+  /* pin to the inline-end edge (mirrors under RTL) */
+  margin-block: 0;
+  margin-inline: auto 0;
+  border-inline-start: var(--juno-border-width-1) solid var(--juno-border);
+
+  /* slide in from the edge; base speed (lighter than a modal) */
+  transform: translateX(100%);
+  transition:
+    transform var(--juno-motion-duration-base) var(--juno-motion-ease-decel),
+    overlay var(--juno-motion-duration-base) allow-discrete,
+    display var(--juno-motion-duration-base) allow-discrete;
+}
+
+.juno-modal.juno-drawer[open] { transform: translateX(0); }
+
+@starting-style {
+  .juno-modal.juno-drawer[open] { transform: translateX(100%); }
+}
+
+.juno-modal.juno-drawer--start {
+  margin-inline: 0 auto;
+  border-inline: none;
+  border-inline-end: var(--juno-border-width-1) solid var(--juno-border);
+  transform: translateX(-100%);
+}
+
+.juno-modal.juno-drawer--start[open] { transform: translateX(0); }
+
+@starting-style {
+  .juno-modal.juno-drawer--start[open] { transform: translateX(-100%); }
+}
+
+.juno-modal.juno-drawer--bottom {
+  inline-size: 100%;
+  max-inline-size: 100%;
+  block-size: 60dvh;
+  margin-block: auto 0;
+  margin-inline: 0;
+  border: none;
+  border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+  transform: translateY(100%);
+
+  /* keep content above the home indicator */
+  padding-block-end: env(safe-area-inset-bottom, 0);
+}
+
+.juno-modal.juno-drawer--bottom[open] { transform: translateY(0); }
+
+@starting-style {
+  .juno-modal.juno-drawer--bottom[open] { transform: translateY(100%); }
+}
+
+/* ── narrow viewports ────────────────────────────────────────────────────
+   Side drawers cap below the full width so a sliver of scrim survives —
+   the visual cue (and tap target) that "outside" closes the panel. */
+@media (width <= 639.98px) {
+  .juno-modal.juno-drawer:not(.juno-drawer--bottom) { inline-size: min(380px, 85vw); }
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Field
+ *  Wraps any control with a label, optional help, and an error message.
+ *  Usage:
+ *    <div class="juno-field">
+ *      <label class="juno-field__label" for="cs">Order ID
+ *        <span class="juno-field__req" aria-hidden="true">*</span>
+ *      </label>
+ *      <input id="cs" class="juno-input juno-mono" type="text" />
+ *      <span class="juno-field__help">Prefix + number</span>
+ *    </div>
+ *  Error: add aria-invalid="true" to the control and swap help → __error.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-4);
+}
+
+.juno-field__label {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-wider);
+  text-transform: uppercase;
+  color: var(--juno-label);
+}
+
+/* required marker — warning hue, paired with aria-required on the control */
+.juno-field__req {
+  color: var(--juno-warning);
+  margin-inline-start: var(--juno-space-2);
+}
+
+.juno-field__help { font-size: var(--juno-font-size-11); color: var(--juno-label); }
+
+.juno-field__error { font-size: var(--juno-font-size-11); color: var(--juno-warning); }
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Gauge (determinate metric ring)
+ *  A fixed-value ring for readouts (CPU / RAM / DISK …) — the metric
+ *  cousin of the arc loader. Set --juno-gauge-value (0–100) inline or
+ *  from JS; color comes from --juno-role. junoui ships no threshold
+ *  policy: the app maps value → role class (see gauge.md for the
+ *  75/90 recipe).
+ *  Usage:
+ *    <div class="juno-gauge juno--nominal" style="--juno-gauge-value: 67">
+ *      <span class="juno-gauge__value">67</span>
+ *    </div>
+ *    <span class="juno-gauge__label">DISK</span>
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* registered so the sweep can transition when the value changes */
+@property --juno-gauge-value {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+.juno-gauge {
+  --juno-role: var(--juno-active);
+  --juno-gauge-size: 64px;
+  --juno-gauge-width: 4px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--juno-gauge-size);
+  block-size: var(--juno-gauge-size);
+}
+
+/* the ring lives on a pseudo-element: the punch-out mask would clip a
+   child, so the value stays a real child of the unmasked wrapper */
+.juno-gauge::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(
+    var(--juno-role) calc(var(--juno-gauge-value) * 1%),
+    var(--juno-border) 0
+  );
+  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--juno-gauge-width)), #000 calc(100% - var(--juno-gauge-width)));
+          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--juno-gauge-width)), #000 calc(100% - var(--juno-gauge-width)));
+  transition: --juno-gauge-value var(--juno-motion-duration-base) var(--juno-motion-ease-standard);
+}
+
+.juno-gauge__value {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-bold);
+  color: var(--juno-role);
+}
+
+/* caption under (or beside) the ring — a sibling, app-positioned */
+.juno-gauge__label {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  color: var(--juno-label);
+}
+
+.juno-gauge--sm {
+  --juno-gauge-size: 44px;
+  --juno-gauge-width: 3px;
+}
+.juno-gauge--sm .juno-gauge__value { font-size: var(--juno-font-size-11); }
+
+.juno-gauge--lg {
+  --juno-gauge-size: 96px;
+  --juno-gauge-width: 5px;
+}
+.juno-gauge--lg .juno-gauge__value { font-size: var(--juno-font-size-20); }
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Icon  ·  inline SVG glyph
+ *  A zero-JS icon primitive. Reference a symbol from the sprite; the glyph
+ *  inherits the current text color (so a .juno--<role> ancestor tints it)
+ *  and sizes in `em`, tracking font-size and the [data-juno-text] scale.
+ *  Usage:
+ *    <svg class="juno-icon" aria-hidden="true">
+ *      <use href="path/to/juno-icons.svg#juno-i-gear" />
+ *    </svg>
+ *    <svg class="juno-icon juno-icon--lg juno--warning" role="img"
+ *         aria-label="Warning">
+ *      <use href="…#juno-i-warning" />
+ *    </svg>
+ *  Sizing: --juno-icon-size (default 1.25em). Color: currentColor — set
+ *  color, or add .juno-icon--role to read var(--juno-role).
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-icon {
+  --juno-icon-size: 1.25em;
+
+  display: inline-block;
+  inline-size: var(--juno-icon-size);
+  block-size: var(--juno-icon-size);
+  flex-shrink: 0;
+  vertical-align: -0.2em; /* optical baseline alignment next to text */
+  fill: currentcolor;
+}
+
+/* tint by semantic role instead of the surrounding text color */
+.juno-icon--role { color: var(--juno-role); }
+
+/* sizes — relative, so they ride the type scale */
+.juno-icon--sm { --juno-icon-size: 1em; }
+.juno-icon--lg { --juno-icon-size: 1.75em; }
+.juno-icon--xl { --juno-icon-size: 2.5em; }
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Text input / textarea
+ *  Inputs are precise: mono by default (codes, IDs, tokens, values),
+ *  ACTIVE-cyan focus ring always visible, semantic color reserved for
+ *  validation. Add .juno-input--sans for free-text fields.
+ *  Usage:  <input class="juno-input" type="text" value="ORD-519" />
+ *          <input class="juno-input juno-input--sans" placeholder="Type…" />
+ *          <input class="juno-input juno--target" value="38000" />   (managed)
+ *          <input class="juno-input" aria-invalid="true" />          (error)
+ *          <textarea class="juno-input juno-input--sans"></textarea>
+ *
+ *  --juno-role defaults to the control edge, so the resting border is quiet;
+ *  a role class or aria-invalid re-colors it. Focus shows ACTIVE + a 1px ring.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-input {
+  --juno-role: var(--juno-control-edge-strong);
+
+  display: block;
+  inline-size: 100%;
+  min-block-size: var(--juno-size-tap-min);
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-role);
+  border-radius: var(--juno-radius-4);
+  padding: var(--juno-pad-control-block) var(--juno-space-12);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-14);
+  color: var(--juno-data);
+}
+
+.juno-input--sans { font-family: var(--juno-font-family-sans); }
+
+.juno-input::placeholder { color: var(--juno-muted); }
+
+/* focus — ACTIVE border + 1px ring (replaces the base outline on inputs) */
+.juno-input:focus-visible {
+  outline: none;
+  border-color: var(--juno-active);
+  box-shadow: 0 0 0 var(--juno-border-width-1) var(--juno-active);
+}
+
+/* invalid: warning border + text, tied to the a11y attribute */
+.juno-input[aria-invalid='true'] {
+  --juno-role: var(--juno-warning);
+
+  color: var(--juno-warning);
+}
+
+.juno-input:disabled {
+  background: var(--juno-s1);
+  border-color: var(--juno-border);
+  color: var(--juno-muted);
+  cursor: not-allowed;
+}
+
+textarea.juno-input {
+  min-block-size: calc(var(--juno-size-tap-min) * 3);
+  resize: vertical;
+  line-height: var(--juno-font-lineHeight-loose);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — List (grouped rows / vertical data organization)
+ *  The settings-screen pattern: labeled groups of full-width rows, each
+ *  row a leading icon + label (+ support line) with a trailing value,
+ *  control, or drill-in chevron. Rows are plain <div>s for static data
+ *  or <a>/<button> when they navigate — the look is the same; only
+ *  interactive rows get hover/press feedback. Zero JS.
+ *  Usage:
+ *    <section class="juno-list">
+ *      <h3 class="juno-list__header">Playback</h3>
+ *      <ul class="juno-list__group">
+ *        <li><a class="juno-list__row" href="…">
+ *          <svg class="juno-icon juno-list__icon" aria-hidden="true"><use href="…#juno-i-sliders" /></svg>
+ *          <span class="juno-list__main">
+ *            <span class="juno-list__label">Quality</span>
+ *            <span class="juno-list__support">Streaming resolution</span>
+ *          </span>
+ *          <span class="juno-list__value">1080p</span>
+ *          <svg class="juno-icon juno-list__chevron" aria-hidden="true"><use href="…#juno-i-caret-right" /></svg>
+ *        </a></li>
+ *      </ul>
+ *    </section>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-8);
+}
+
+.juno-list + .juno-list { margin-block-start: var(--juno-space-20); }
+
+.juno-list__header {
+  margin: 0;
+  padding-inline: var(--juno-space-16);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-11);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  color: var(--juno-label);
+}
+
+.juno-list__group {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--juno-s1);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-8);
+  overflow: hidden;
+}
+
+.juno-list__row {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-12);
+  inline-size: 100%;
+  min-block-size: var(--juno-size-tap-comfortable);
+  padding: var(--juno-space-8) var(--juno-space-16);
+  background: transparent;
+  border: none;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  text-align: start;
+  text-decoration: none;
+  color: var(--juno-data);
+}
+
+/* hairline between rows only — works for <li>-wrapped and bare rows */
+.juno-list__group > li + li > .juno-list__row,
+.juno-list__group > .juno-list__row + .juno-list__row {
+  border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+}
+
+/* feedback only where a row actually goes somewhere */
+a.juno-list__row,
+button.juno-list__row { cursor: pointer; }
+
+a.juno-list__row:hover,
+button.juno-list__row:hover,
+a.juno-list__row:focus-visible,
+button.juno-list__row:focus-visible { background: var(--juno-s2); }
+
+.juno-list__row:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}
+
+button.juno-list__row:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-list__icon {
+  flex-shrink: 0;
+  color: var(--juno-label);
+}
+
+.juno-list__main {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-2);
+}
+
+.juno-list__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-list__support {
+  font-size: var(--juno-font-size-11);
+  color: var(--juno-label);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-list__value {
+  flex-shrink: 0;
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-12);
+  color: var(--juno-label);
+}
+
+.juno-list__chevron {
+  flex-shrink: 0;
+
+  --juno-icon-size: var(--juno-space-16);
+
+  color: var(--juno-muted);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Loaders (Arc · Beacon · Linear bar)
+ *
+ *  Indeterminate variants loop on their own (CSS only). Determinate
+ *  variants track real progress: set --juno-progress (0–100) on the
+ *  element, inline or from JS:
+ *      el.style.setProperty('--juno-progress', 63);
+ *  Color comes from --juno-role (default = active).
+ * ════════════════════════════════════════════════════════════════════ */
+
+@keyframes juno-arc-rot   { to { transform: rotate(360deg); } }
+
+@keyframes juno-beacon-pulse { 0% { transform: scale(0.28); opacity: 0.85; } 100% { transform: scale(1); opacity: 0; } }
+
+@keyframes juno-bar-slide { 0% { left: -42%; } 100% { left: 100%; } }
+
+/* ── ARC — circular ring ────────────────────────────────────────────── */
+.juno-arc {
+  --juno-role: var(--juno-active);
+  --juno-arc-size: 76px;
+  --juno-arc-width: 4px;
+
+  position: relative;
+  width: var(--juno-arc-size);
+  height: var(--juno-arc-size);
+  border-radius: 50%;
+
+  /* determinate sweep: filled portion = progress */
+  background: conic-gradient(
+    var(--juno-role) calc(var(--juno-progress, 0) * 1%),
+    var(--juno-s3) 0
+  );
+
+  /* punch out the centre to leave a ring */
+  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--juno-arc-width)), #000 calc(100% - var(--juno-arc-width)));
+          mask: radial-gradient(farthest-side, #0000 calc(100% - var(--juno-arc-width)), #000 calc(100% - var(--juno-arc-width)));
+}
+
+.juno-arc--indeterminate {
+  background: conic-gradient(var(--juno-role) 0 70%, #0000 0);
+  animation: juno-arc-rot 1.1s steps(12) infinite; /* mechanical, 12-step sweep */
+}
+
+/* centred readout for determinate arcs — place a span inside */
+.juno-arc__label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+
+  /* the mask clips the ring, not this label: keep it on a sibling when
+     a value is shown — see loader.md */
+}
+
+/* ── BEACON — radiating pulse ───────────────────────────────────────── */
+.juno-beacon {
+  --juno-role: var(--juno-active);
+  --juno-beacon-size: 76px;
+
+  position: relative;
+  width: var(--juno-beacon-size);
+  height: var(--juno-beacon-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.juno-beacon__core {
+  width: 24%;
+  height: 24%;
+  border-radius: 50%;
+  background: var(--juno-role);
+}
+
+/* two pulse rings (staggered) */
+.juno-beacon::before,
+.juno-beacon::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1.5px solid var(--juno-role);
+  animation: juno-beacon-pulse 1.9s ease-out infinite;
+}
+.juno-beacon::after { animation-delay: 0.95s; }
+
+/* determinate: fill grows centre → rim by progress, keeps pulsing + readout */
+.juno-beacon--determinate { --juno-beacon-fill-stop: calc(44% + 0.56% * var(--juno-progress, 0)); }
+.juno-beacon--determinate .juno-beacon__core { display: none; }
+
+.juno-beacon__track {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1px solid var(--juno-border);
+}
+
+.juno-beacon__fill {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: var(--juno-role);
+  -webkit-mask: radial-gradient(circle closest-side, #0000 0 44%, #000 44% var(--juno-beacon-fill-stop), #0000 var(--juno-beacon-fill-stop));
+          mask: radial-gradient(circle closest-side, #0000 0 44%, #000 44% var(--juno-beacon-fill-stop), #0000 var(--juno-beacon-fill-stop));
+}
+
+.juno-beacon__hub {
+  position: absolute;
+  left: 50%; top: 50%;
+  transform: translate(-50%, -50%);
+  width: 42%; height: 42%;
+  border-radius: 50%;
+  background: var(--juno-s1);
+  border: 1px solid var(--juno-border);
+}
+
+.juno-beacon__label {
+  position: relative;
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+}
+
+/* ── LINEAR BAR ─────────────────────────────────────────────────────── */
+.juno-bar {
+  --juno-role: var(--juno-active);
+
+  position: relative;
+  width: 100%;
+  height: 6px;
+  border-radius: var(--juno-radius-3);
+  background: var(--juno-s2);
+  overflow: hidden;
+}
+
+.juno-bar__fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: var(--juno-radius-3);
+  background: var(--juno-role);
+  width: calc(var(--juno-progress, 0) * 1%);
+  transition: width var(--juno-motion-duration-quick) linear;
+}
+
+/* indeterminate: a 40% segment slides across */
+.juno-bar--indeterminate .juno-bar__fill {
+  width: 40%;
+  left: -42%;
+  transition: none;
+  animation: juno-bar-slide 1.3s ease-in-out infinite;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Menu / Dropdown
+ *  A list of immediate actions anchored to its trigger. Section dividers,
+ *  keyboard shortcuts, and a destructive item set apart by WARNING. junoui
+ *  ships the look; the app owns roving focus. Open/close, light-dismiss, and
+ *  ESC come from the native Popover API — the menu lives in the TOP LAYER, so
+ *  it is never clipped by an ancestor's overflow and never fights z-index.
+ *  Usage:
+ *    <button popovertarget="acts" aria-haspopup="menu" aria-expanded="false">ACTIONS ▾</button>
+ *    <ul class="juno-menu" id="acts" popover role="menu">
+ *      <li><button class="juno-menu__item" role="menuitem"
+ *            popovertarget="acts" popovertargetaction="hide">
+ *        <span class="juno-menu__icon">⤓</span>Import data
+ *        <span class="juno-menu__kbd">⌘O</span>
+ *      </button></li>
+ *      <li class="juno-menu__sep" role="separator"></li>
+ *      <li><button class="juno-menu__item juno--warning" role="menuitem"
+ *            popovertarget="acts" popovertargetaction="hide">
+ *        <span class="juno-menu__icon">⨯</span>Delete project
+ *      </button></li>
+ *    </ul>
+ *  (Each item carries popovertargetaction="hide" so activating it closes the
+ *   menu with no JS. The invoker is the menu's implicit anchor.)
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-menu {
+  position: fixed;
+  margin: 0;
+  inset: auto;
+  position-area: block-end span-inline-start;
+  position-try-fallbacks: flip-block, flip-inline;
+  margin-block-start: var(--juno-space-8);
+  min-inline-size: 256px;
+  background: var(--juno-s2);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-5);
+  box-shadow: var(--juno-shadow-2);
+  padding: var(--juno-space-4);
+  list-style: none;
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--juno-space-4)));
+  transition:
+    opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    overlay var(--juno-motion-duration-quick) allow-discrete,
+    display var(--juno-motion-duration-quick) allow-discrete;
+}
+
+.juno-menu:popover-open {
+  opacity: 1;
+  transform: none;
+}
+
+@starting-style {
+  .juno-menu:popover-open {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--juno-space-4)));
+  }
+}
+
+.juno-menu__item {
+  --juno-role: var(--juno-data);
+
+  display: flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  inline-size: 100%;
+  padding: var(--juno-space-8) var(--juno-space-10);
+  background: transparent;
+  border: none;
+  border-radius: var(--juno-radius-4);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-role);
+  text-align: start;
+  text-decoration: none; /* items may be <a> (nav menus), not only <button> */
+  cursor: pointer;
+}
+
+.juno-menu__item:hover,
+.juno-menu__item:focus-visible { background: var(--juno-s3); }
+
+/* destructive item — .juno--warning sets --juno-role to warning */
+.juno-menu__item.juno--warning:hover,
+.juno-menu__item.juno--warning:focus-visible {
+  background: color-mix(in srgb, var(--juno-role) 14%, transparent);
+}
+
+.juno-menu__item:disabled,
+.juno-menu__item[aria-disabled='true'] { opacity: var(--juno-opacity-disabled); cursor: not-allowed; }
+
+.juno-menu__icon {
+  flex-shrink: 0;
+  inline-size: var(--juno-space-16);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-11);
+  color: var(--juno-label);
+}
+
+.juno-menu__item.juno--warning .juno-menu__icon { color: var(--juno-role); }
+
+.juno-menu__kbd {
+  margin-inline-start: auto;
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-10);
+  color: var(--juno-muted);
+}
+
+.juno-menu__sep {
+  block-size: var(--juno-border-width-1);
+  background: var(--juno-border);
+  margin-block: var(--juno-space-4);
+  list-style: none;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Modal / Dialog
+ *  Style a native <dialog>. The app owns open/close (dialog.showModal() /
+ *  .close()) and focus-trapping; junoui ships the look + entry motion.
+ *  Centered, scrim-backed. Reserved for decisions that must block the deck.
+ *  Usage:
+ *    <dialog class="juno-modal">                 (or .juno-modal.juno--warning)
+ *      <div class="juno-modal__stripe"></div>
+ *      <div class="juno-modal__head">
+ *        <span class="juno-modal__tag">CONFIGURATION</span>
+ *        <button class="juno-modal__close" aria-label="Close">✕</button>
+ *      </div>
+ *      <div class="juno-modal__body">
+ *        <h2 class="juno-modal__title">Apply configuration change?</h2>
+ *        <p class="juno-modal__text">…</p>
+ *        <div class="juno-modal__foot">
+ *          <button class="juno-btn juno-btn--ghost">CANCEL</button>
+ *          <button class="juno-btn">APPLY</button>
+ *        </div>
+ *      </div>
+ *    </dialog>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-modal {
+  --juno-role: var(--juno-active);
+
+  inline-size: 440px;
+  max-inline-size: 100%;
+  padding: 0;
+  background: var(--juno-s1);
+  color: var(--juno-data);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-8);
+  overflow: hidden;
+  box-shadow: var(--juno-shadow-3);
+
+  /* enter: scale + rise, decelerating (deliberate — it blocks the deck) */
+  opacity: 0;
+  transform: translateY(var(--juno-space-12)) scale(0.97);
+  transition:
+    opacity var(--juno-motion-duration-deliberate) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-deliberate) var(--juno-motion-ease-decel),
+    overlay var(--juno-motion-duration-deliberate) allow-discrete,
+    display var(--juno-motion-duration-deliberate) allow-discrete;
+}
+
+.juno-modal[open] {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@starting-style {
+  .juno-modal[open] {
+    opacity: 0;
+    transform: translateY(var(--juno-space-12)) scale(0.97);
+  }
+}
+
+/* scrim — one at a time; dark wash + faint blur */
+.juno-modal::backdrop {
+  background: rgb(0 0 0);
+  opacity: var(--juno-opacity-scrim);
+  backdrop-filter: blur(1.5px);
+}
+
+/* status accent stripe across the top (role-colored) */
+.juno-modal__stripe {
+  block-size: var(--juno-border-width-3);
+  background: var(--juno-role);
+}
+
+.juno-modal__head {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+  padding: var(--juno-space-16) var(--juno-pad-surface-inline) 0;
+}
+
+.juno-modal__tag {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-wider);
+  text-transform: uppercase;
+  color: var(--juno-role);
+}
+
+.juno-modal__close {
+  margin-inline-start: auto;
+  inline-size: var(--juno-size-tap-min);
+  block-size: var(--juno-size-tap-min);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: var(--juno-border-width-1) solid transparent;
+  border-radius: var(--juno-radius-4);
+  color: var(--juno-label);
+  cursor: pointer;
+}
+
+.juno-modal__close:hover { background: var(--juno-s2); color: var(--juno-data); }
+
+.juno-modal__body { padding: var(--juno-space-12) var(--juno-pad-surface-inline) var(--juno-pad-surface-inline); }
+
+.juno-modal__title {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-20);
+  font-weight: var(--juno-font-weight-light);
+  line-height: var(--juno-font-lineHeight-snug);
+  color: var(--juno-data);
+  margin-block-end: var(--juno-space-12);
+}
+
+.juno-modal__text {
+  font-size: var(--juno-font-size-13);
+  line-height: var(--juno-font-lineHeight-loose);
+  color: var(--juno-label);
+}
+
+.juno-modal__foot {
+  display: flex;
+  gap: var(--juno-gap-control);
+  justify-content: flex-end;
+  margin-block-start: var(--juno-space-24);
+}
+
+/* ── narrow viewports — the centered dialog becomes a bottom sheet ──────
+   Phones get the native-feeling pattern: full-width, pinned to the bottom
+   edge, top corners rounded, sliding up. Drawers opt out (:not) — they
+   already pin themselves. Scoped to the viewport (not a container): a
+   modal always lives in the top layer, so the screen IS its container. */
+@media (width <= 639.98px) {
+  .juno-modal:not(.juno-drawer) {
+    inline-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: 85dvh;
+    margin-block: auto 0;
+    margin-inline: 0;
+    border: none;
+    border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+    border-start-start-radius: var(--juno-radius-8);
+    border-start-end-radius: var(--juno-radius-8);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    transform: translateY(100%);
+  }
+
+  .juno-modal:not(.juno-drawer)[open] { transform: translateY(0); }
+
+  @starting-style {
+    .juno-modal:not(.juno-drawer)[open] { transform: translateY(100%); }
+  }
+
+  /* keep the foot's actions above the home indicator */
+  .juno-modal:not(.juno-drawer) .juno-modal__body {
+    padding-block-end: calc(var(--juno-pad-surface-inline) + env(safe-area-inset-bottom, 0));
+  }
+
+  /* full-width actions read better on a sheet */
+  .juno-modal:not(.juno-drawer) .juno-modal__foot > .juno-btn { flex: 1; }
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Navbar (stack-navigation top bar)
+ *  The header of a pushed view on phones: a back control on the start
+ *  edge — always, so any screen can unwind — a centered truncating
+ *  title, and trailing actions. junoui ships the look; the app owns the
+ *  navigation stack (what "back" does).
+ *
+ *  Sticky top, safe-area padded. Pair with the dock or pillbar for the
+ *  tab + stack recipe: tabs switch sections, the navbar backs out of
+ *  drilled-in views (see docs/layout.md#app-shell).
+ *  Usage:
+ *    <header class="juno-navbar">
+ *      <a class="juno-navbar__back" href="…">
+ *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-caret-left" /></svg>
+ *        <span class="juno-navbar__back-label">Library</span>
+ *      </a>
+ *      <h1 class="juno-navbar__title">Album</h1>
+ *      <div class="juno-navbar__actions">
+ *        <button class="juno-btn juno-btn--sm juno-btn--ghost">EDIT</button>
+ *      </div>
+ *    </header>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-navbar {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--juno-z-raised);
+  display: grid;
+
+  /* sides never shrink below their (already-truncated) content, so a long
+     title ellipsizes instead of sliding under the back control; with a short
+     title the equal 1fr sides keep it optically centered */
+  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
+  align-items: center;
+  gap: var(--juno-space-8);
+  padding-inline: var(--juno-space-8);
+  padding-block-start: env(safe-area-inset-top, 0);
+  min-block-size: var(--juno-size-tap-comfortable);
+  background: var(--juno-s1);
+  border-block-end: var(--juno-border-width-1) solid var(--juno-border);
+}
+
+.juno-navbar__back {
+  appearance: none;
+  margin: 0;
+  border: none;
+  background: transparent;
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-4);
+  min-block-size: var(--juno-size-tap-comfortable);
+  min-inline-size: var(--juno-size-tap-comfortable);
+  padding-inline: var(--juno-space-4);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-11);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--juno-active);
+  cursor: pointer;
+}
+
+/* RTL: the caret glyph must point "back" in either direction */
+[dir='rtl'] .juno-navbar__back .juno-icon { transform: scaleX(-1); }
+
+.juno-navbar__back:hover { color: var(--juno-data); }
+
+.juno-navbar__back-label {
+  max-inline-size: 14ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-navbar__title {
+  grid-column: 2;
+  margin: 0;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-14);
+  font-weight: var(--juno-font-weight-semibold);
+  color: var(--juno-data);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.juno-navbar__actions {
+  grid-column: 3;
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-4);
+}
+
+.juno-navbar__back:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Pagination  ·  page navigation
+ *  A row of page controls: prev / next plus numbered pages, with the
+ *  current page marked aria-current="page". Built on a real <nav>; the
+ *  app owns which page is active and renders the list. Zero JS.
+ *  Usage:
+ *    <nav class="juno-pagination" aria-label="Pagination">
+ *      <button class="juno-pagination__item" aria-label="Previous" disabled>‹</button>
+ *      <button class="juno-pagination__item" aria-current="page">1</button>
+ *      <button class="juno-pagination__item">2</button>
+ *      <span class="juno-pagination__gap">…</span>
+ *      <button class="juno-pagination__item">9</button>
+ *      <button class="juno-pagination__item" aria-label="Next">›</button>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-pagination {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--juno-space-4);
+}
+
+.juno-pagination__item {
+  display: inline-grid;
+  place-content: center;
+  min-inline-size: var(--juno-size-tap-min, var(--juno-space-32));
+  block-size: var(--juno-space-32);
+  padding-inline: var(--juno-space-8);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  border-radius: var(--juno-radius-4);
+  background: var(--juno-control-surface);
+  color: var(--juno-data);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-13);
+  cursor: pointer;
+  transition:
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-pagination__item:hover:not(:disabled, [aria-current='page']) {
+  border-color: var(--juno-active);
+  color: var(--juno-active);
+}
+
+.juno-pagination__item:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+/* current page — filled active accent, not actionable */
+.juno-pagination__item[aria-current='page'] {
+  border-color: var(--juno-active);
+  background: color-mix(in srgb, var(--juno-active) 18%, var(--juno-control-surface));
+  color: var(--juno-active);
+  cursor: default;
+}
+
+.juno-pagination__item:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* the … gap between page ranges */
+.juno-pagination__gap {
+  display: inline-grid;
+  place-content: center;
+  min-inline-size: var(--juno-space-20);
+  color: var(--juno-muted);
+  font-family: var(--juno-font-family-mono);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Pillbar (floating pill toolbar / tab bar)
+ *  A floating rounded bar hovering above the content's bottom edge —
+ *  the iOS-style alternative to the full-width dock. Holds 2–5 icon
+ *  actions or destinations; the active one styles off aria-current
+ *  (nav links) or aria-pressed (toggle buttons), zero JS.
+ *
+ *  Sticky (not fixed): put it last inside the scrolling column and it
+ *  floats over the content while staying in flow. Clears the home
+ *  indicator via safe-area-inset.
+ *  Usage:
+ *    <nav class="juno-pillbar" aria-label="Primary">
+ *      <a class="juno-pillbar__item" href="…" aria-current="page" aria-label="Library">
+ *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+ *        <span class="juno-pillbar__label">Library</span>
+ *      </a>
+ *      <span class="juno-pillbar__sep"></span>
+ *      <button class="juno-pillbar__item" aria-label="Sync">
+ *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-arrows-clockwise" /></svg>
+ *      </button>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-pillbar {
+  --juno-role: var(--juno-active);
+
+  position: sticky;
+  inset-block-end: calc(var(--juno-space-16) + env(safe-area-inset-bottom, 0px));
+  z-index: var(--juno-z-raised);
+  margin-inline: auto;
+  margin-block-end: var(--juno-space-16);
+  inline-size: fit-content;
+  max-inline-size: calc(100% - 2 * var(--juno-space-16));
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-2);
+  padding: var(--juno-space-4);
+  background: color-mix(in srgb, var(--juno-s1) 88%, transparent);
+  backdrop-filter: blur(12px);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: 999px;
+  box-shadow: var(--juno-shadow-2);
+}
+
+.juno-pillbar__item {
+  appearance: none;
+  margin: 0;
+  border: none;
+  min-inline-size: var(--juno-size-tap-comfortable);
+  min-block-size: var(--juno-size-tap-comfortable);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-4);
+  padding-inline: var(--juno-space-10);
+  background: transparent;
+  border-radius: 999px;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--juno-label);
+  cursor: pointer;
+  transition:
+    color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-pillbar__label {
+  max-inline-size: 12ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-pillbar__item:hover { color: var(--juno-data); }
+
+/* active = attribute, not class: aria-current (links) / aria-pressed (buttons) */
+.juno-pillbar__item[aria-current],
+.juno-pillbar__item[aria-pressed='true'] {
+  background: var(--juno-s3);
+  color: var(--juno-role);
+}
+
+.juno-pillbar__item:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}
+
+.juno-pillbar__item:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-pillbar__sep {
+  align-self: center;
+  inline-size: var(--juno-border-width-1);
+  block-size: var(--juno-space-20);
+  background: var(--juno-border);
+  flex-shrink: 0;
+}
+
+/* reduced-transparency preference → solid surface, no blur */
+@media (prefers-reduced-transparency: reduce) {
+  .juno-pillbar {
+    background: var(--juno-s1);
+    backdrop-filter: none;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Popover
+ *  Anchored, click-triggered surface for rich, interactive content (filters,
+ *  quick-edits, detail cards). Unlike a tooltip it holds focusable controls
+ *  and persists until dismissed.
+ *
+ *  Built on the native Popover API: the panel lives in the browser TOP LAYER,
+ *  so it is never clipped by an ancestor's overflow/transform and never fights
+ *  z-index. A `popovertarget` button is its implicit anchor; CSS anchor
+ *  positioning pins it below, inline-end aligned. Open/close, light-dismiss,
+ *  and ESC all come from the platform — zero JS.
+ *  Usage:
+ *    <button popovertarget="pf" aria-expanded="false">RANGE FILTER ▾</button>
+ *    <div class="juno-popover" id="pf" popover role="dialog">
+ *      …controls…
+ *      <span class="juno-popover__arrow"></span>
+ *    </div>
+ *  (Older engines without anchor positioning fall back to the app setting
+ *   inset on the `toggle` event — junoui ships the surface; the app may pin it.)
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* legacy grouping wrapper — kept for layout; positioning no longer needs it */
+.juno-popover-anchor { position: relative; }
+
+.juno-popover {
+  position: fixed;
+  margin: 0;
+  inset: auto;
+  position-area: block-end span-inline-start;
+  position-try-fallbacks: flip-block, flip-inline;
+  margin-block-start: var(--juno-space-12);
+  inline-size: 280px;
+  max-inline-size: calc(100vw - var(--juno-space-24));
+  background: var(--juno-s2);
+  color: var(--juno-data);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-5);
+  box-shadow: var(--juno-shadow-2);
+  padding: var(--juno-pad-surface-block) var(--juno-pad-surface-inline);
+  opacity: 0;
+  transform: translateY(calc(-1 * var(--juno-space-4)));
+  transition:
+    opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    overlay var(--juno-motion-duration-quick) allow-discrete,
+    display var(--juno-motion-duration-quick) allow-discrete;
+}
+
+.juno-popover:popover-open {
+  opacity: 1;
+  transform: none;
+}
+
+@starting-style {
+  .juno-popover:popover-open {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--juno-space-4)));
+  }
+}
+
+/* arrow back to the anchor (top-end corner) */
+.juno-popover__arrow {
+  position: absolute;
+  inset-block-start: calc(-1 * var(--juno-space-4) - var(--juno-border-width-1));
+  inset-inline-end: var(--juno-space-24);
+  inline-size: var(--juno-space-8);
+  block-size: var(--juno-space-8);
+  background: var(--juno-s2);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-block-end: none;
+  border-inline-end: none;
+  transform: rotate(45deg);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Rail (app-shell side navigation)
+ *  A collapsible icon-and-label nav column: the left edge of the standard
+ *  junoui app shell (see docs/layout.md#app-shell). Zero JS here — the
+ *  app toggles .juno-rail--collapsed and sets aria-current="page"; the
+ *  active item is styled off the attribute, not a class.
+ *  Usage:
+ *    <nav class="juno-rail" aria-label="Primary">
+ *      <div class="juno-rail__brand">JUNO</div>
+ *      <a class="juno-rail__item" href="…" aria-current="page">
+ *        <svg class="juno-icon"><use href="…#juno-i-squares-four" /></svg>
+ *        <span class="juno-rail__label">Library</span>
+ *      </a>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-rail {
+  --juno-role: var(--juno-active);
+  --juno-rail-width: 180px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-2);
+  inline-size: var(--juno-rail-width);
+  min-block-size: 100%;
+  padding-block: var(--juno-space-8);
+  background: var(--juno-s1);
+  border-inline-end: var(--juno-border-width-1) solid var(--juno-border);
+  transition: inline-size var(--juno-motion-duration-base) var(--juno-motion-ease-standard);
+}
+
+.juno-rail__brand {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  padding: var(--juno-space-8) var(--juno-space-16);
+  margin-block-end: var(--juno-space-8);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-wide);
+  text-transform: uppercase;
+  color: var(--juno-data);
+  white-space: nowrap;
+}
+
+.juno-rail__item {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  padding: var(--juno-space-8) var(--juno-space-16);
+  border-inline-start: var(--juno-border-width-2) solid transparent;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-12);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--juno-label);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.juno-rail__item:hover {
+  background: var(--juno-s2);
+  color: var(--juno-data);
+}
+
+/* active = attribute, not class: <a aria-current="page"> */
+.juno-rail__item[aria-current] {
+  background: var(--juno-s3);
+  border-inline-start-color: var(--juno-role);
+  color: var(--juno-data);
+}
+
+.juno-rail__item:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}
+
+/* Collapsed — icons only; labels leave the accessibility tree too, so
+   give collapsed items a title or aria-label from the app. */
+.juno-rail--collapsed {
+  --juno-rail-width: var(--juno-space-56);
+}
+
+.juno-rail--collapsed .juno-rail__label,
+.juno-rail--collapsed .juno-rail__brand .juno-rail__label {
+  display: none;
+}
+
+.juno-rail--collapsed .juno-rail__item,
+.juno-rail--collapsed .juno-rail__brand {
+  justify-content: center;
+  padding-inline: 0;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Data readout tile
+ *  Usage:
+ *    <div class="juno-readout juno--nominal">
+ *      <span class="juno-readout__label">N1</span>
+ *      <span class="juno-readout__value">89.3</span>
+ *      <span class="juno-readout__unit">%</span>
+ *    </div>
+ *  The value takes --juno-role; default role is the neutral data color.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-readout {
+  --juno-role: var(--juno-data);
+
+  display: flex;
+  flex-direction: column;
+  background: var(--juno-s2);
+  border-radius: var(--juno-radius-5);
+  padding: var(--juno-space-20) var(--juno-space-16);
+}
+
+.juno-readout--alert { border: var(--juno-border-width-1) solid var(--juno-role); }
+
+.juno-readout__label {
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-wider);
+  text-transform: uppercase;
+  color: var(--juno-label);
+  margin-bottom: var(--juno-space-8);
+}
+
+.juno-readout__value {
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  font-size: var(--juno-font-size-38);
+  line-height: var(--juno-font-lineHeight-none);
+  color: var(--juno-role);
+  font-variant-numeric: tabular-nums;
+}
+
+.juno-readout__unit {
+  font-size: var(--juno-font-size-11);
+  color: var(--juno-label);
+  margin-top: var(--juno-space-4);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Segmented control
+ *  Exclusive-choice pill row (filters, mode switchers, sort pickers).
+ *  Zero JS: native radios carry the state; the checked pill takes the
+ *  role color (default label-neutral; add .juno--<role> to recolor).
+ *  Usage:
+ *    <fieldset class="juno-seg juno--active">
+ *      <label class="juno-seg__opt"><input type="radio" name="kind" checked /><span>ALL</span></label>
+ *      <label class="juno-seg__opt"><input type="radio" name="kind" /><span>PHOTOS</span></label>
+ *    </fieldset>
+ *  JS-driven apps may use buttons instead; the app flips aria-pressed:
+ *    <div class="juno-seg" role="group">
+ *      <button class="juno-seg__opt" aria-pressed="true">ALL</button>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-seg {
+  --juno-role: var(--juno-data);
+
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--juno-space-4);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.juno-seg__opt {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+/* visually hidden but still focusable + in the tab order */
+.juno-seg__opt input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+}
+
+/* the pill — a span after the radio, or the aria-pressed button itself */
+.juno-seg__opt input + span,
+button.juno-seg__opt {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-11);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  padding: var(--juno-space-4) var(--juno-space-10);
+  color: var(--juno-label);
+  background: transparent;
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-3);
+  transition:
+    color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-seg__opt:hover input:not(:checked) + span,
+button.juno-seg__opt[aria-pressed='false']:hover {
+  background: var(--juno-s2);
+  color: var(--juno-data);
+}
+
+.juno-seg__opt input:checked + span,
+button.juno-seg__opt[aria-pressed='true'] {
+  background: var(--juno-s3);
+  border-color: var(--juno-role);
+  color: var(--juno-role);
+}
+
+.juno-seg__opt input:focus-visible + span,
+button.juno-seg__opt:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+.juno-seg__opt input:disabled + span,
+button.juno-seg__opt:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-seg:disabled .juno-seg__opt,
+.juno-seg__opt:has(:disabled) {
+  cursor: not-allowed;
+}
+
+/* Small — matches .juno-btn--sm; for dense toolbars */
+.juno-seg--sm .juno-seg__opt input + span,
+.juno-seg--sm > button.juno-seg__opt {
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-wide);
+  padding: var(--juno-space-2) var(--juno-space-8);
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Select
+ *  A native <select> styled as an input, with a token-colored chevron.
+ *  Usage:
+ *    <div class="juno-select">
+ *      <select class="juno-input">
+ *        <option>NOMINAL</option><option>CAUTION</option>
+ *      </select>
+ *    </div>
+ *  The inner <select> reuses .juno-input for the box; the wrapper adds the
+ *  chevron and reserves room for it (inline-end, so it mirrors under RTL).
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-select {
+  position: relative;
+  display: block;
+}
+
+.juno-select > .juno-input {
+  appearance: none;
+  padding-inline-end: var(--juno-space-32);
+  font-family: var(--juno-font-family-sans);
+  cursor: pointer;
+}
+
+/* chevron — CSS triangle so it inherits a token color, no SVG asset */
+.juno-select::after {
+  content: '';
+  position: absolute;
+  inset-inline-end: var(--juno-space-12);
+  inset-block-start: 50%;
+  inline-size: 0;
+  block-size: 0;
+  border-inline: var(--juno-space-4) solid transparent;
+  border-block-start: var(--juno-space-4) solid var(--juno-label);
+  transform: translateY(-25%);
+  pointer-events: none;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Skeleton  ·  loading placeholder
+ *  A shimmering block that stands in for content not yet loaded. Same
+ *  shimmer language as the table's row skeleton, generalized: text lines,
+ *  blocks, and circles (avatars). Zero JS — size it with width / height or
+ *  --juno-skeleton-h. Honors prefers-reduced-motion (shimmer → static).
+ *  Mark the loading region aria-busy="true" so AT announces it.
+ *  Usage:
+ *    <div aria-busy="true" aria-live="polite">
+ *      <span class="juno-skeleton juno-skeleton--circle" style="--juno-skeleton-h: 48px;"></span>
+ *      <span class="juno-skeleton juno-skeleton--text" style="inline-size: 60%;"></span>
+ *      <span class="juno-skeleton juno-skeleton--text"></span>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-skeleton {
+  --juno-skeleton-h: var(--juno-space-16);
+
+  display: block;
+  inline-size: 100%;
+  block-size: var(--juno-skeleton-h);
+  border-radius: var(--juno-radius-3);
+  background: linear-gradient(90deg, var(--juno-s2) 0%, var(--juno-s3) 50%, var(--juno-s2) 100%);
+  background-size: 200% 100%;
+  animation: juno-skeleton-shimmer 1.2s ease-in-out infinite;
+}
+
+/* a text line — caps height to one line, soft radius */
+.juno-skeleton--text {
+  --juno-skeleton-h: 1em;
+
+  border-radius: var(--juno-radius-2);
+}
+
+/* round avatar / icon placeholder — keep it square via the inline size */
+.juno-skeleton--circle {
+  inline-size: var(--juno-skeleton-h);
+  border-radius: 50%;
+}
+
+/* a larger surface (card / media) */
+.juno-skeleton--block {
+  --juno-skeleton-h: var(--juno-space-56);
+
+  border-radius: var(--juno-radius-4);
+}
+
+@keyframes juno-skeleton-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .juno-skeleton {
+    animation: none;
+  }
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Slider  ·  track + grip lever
+ *  A recessed channel with detent notches, an accent fill, and a gripped
+ *  lever. Value-driven: the app sets --juno-slider-pct (0–100) and owns
+ *  drag / keyboard / ARIA (role="slider" + aria-value*), the same split as
+ *  the overlays. Two sizes: standard (lever always full) and --compact
+ *  (lever recedes to a slim marker until hover / focus / drag).
+ *  Usage:
+ *    <div class="juno-slider" style="--juno-slider-pct: 72" role="slider"
+ *         tabindex="0" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
+ *      <span class="juno-slider__channel"></span>
+ *      <span class="juno-slider__lever"></span>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-slider {
+  --juno-role: var(--juno-active);
+  --juno-slider-pct: 0;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  inline-size: 100%;
+  block-size: 48px;
+  cursor: pointer;
+  touch-action: none;
+}
+
+.juno-slider__channel {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  block-size: var(--juno-space-20);
+  background-color: var(--juno-s0);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  border-radius: var(--juno-radius-4);
+  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.5);
+  overflow: hidden;
+}
+
+/* detent notches every 10% */
+.juno-slider__channel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: repeating-linear-gradient(
+    90deg,
+    transparent 0 calc(10% - 1px),
+    var(--juno-muted) calc(10% - 1px),
+    var(--juno-muted) 10%
+  );
+  opacity: 0.5;
+}
+
+/* accent fill up to the value */
+.juno-slider__channel::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  inline-size: calc(var(--juno-slider-pct) * 1%);
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--juno-role) 8%, transparent),
+    color-mix(in srgb, var(--juno-role) 34%, transparent)
+  );
+}
+
+/* gripped lever, positioned at the value */
+.juno-slider__lever {
+  position: absolute;
+  inset-inline-start: calc(var(--juno-slider-pct) * 1%);
+  inset-block-start: 50%;
+  transform: translate(-50%, -50%);
+  inline-size: 26px;
+  block-size: 40px;
+  border-radius: var(--juno-radius-4);
+  border: var(--juno-border-width-1) solid var(--juno-knob-edge);
+  background:
+    repeating-linear-gradient(90deg, var(--juno-knob-grip) 0 2px, transparent 2px 5px) center / 12px
+      16px no-repeat,
+    linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.5);
+  pointer-events: none;
+  transition:
+    inline-size var(--juno-motion-duration-base) ease,
+    block-size var(--juno-motion-duration-base) ease,
+    box-shadow var(--juno-motion-duration-base) ease;
+}
+
+/* compact — lever minimizes to a slim marker until engaged */
+.juno-slider--compact .juno-slider__lever {
+  inline-size: 10px;
+  block-size: 22px;
+  border-radius: var(--juno-radius-3);
+  background: linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
+}
+
+.juno-slider--compact:hover .juno-slider__lever,
+.juno-slider--compact:focus-visible .juno-slider__lever,
+.juno-slider--compact:active .juno-slider__lever {
+  inline-size: 26px;
+  block-size: 40px;
+  border-radius: var(--juno-radius-4);
+  background:
+    repeating-linear-gradient(90deg, var(--juno-knob-grip) 0 2px, transparent 2px 5px) center / 12px
+      16px no-repeat,
+    linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.5);
+}
+
+.juno-slider[aria-disabled='true'] {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Spark (sparkline contract)
+ *  junoui ships no charting: the app generates the <polyline> points;
+ *  this class supplies the size / stroke / role-color contract so every
+ *  sparkline matches. Generator recipe: docs/components/spark.md.
+ *  Usage:
+ *    <svg class="juno-spark juno--nominal" viewBox="0 0 120 24" preserveAspectRatio="none">
+ *      <polyline points="0,20 8,14 16,17 …" />
+ *    </svg>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-spark {
+  --juno-role: var(--juno-active);
+
+  display: block;
+  inline-size: 100%;
+  block-size: var(--juno-space-24);
+}
+
+.juno-spark polyline {
+  fill: none;
+  stroke: var(--juno-role);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Stepper  ·  multi-step progress
+ *  A horizontal sequence of steps with numbered markers and connectors.
+ *  Each step carries data-state: complete · current · upcoming. Mark the
+ *  active step aria-current="step". Built on a real <ol>; the app sets the
+ *  states. Zero JS. Reads --juno-role (default active) for the accent.
+ *  Usage:
+ *    <ol class="juno-stepper">
+ *      <li class="juno-stepper__step" data-state="complete">
+ *        <span class="juno-stepper__marker">
+ *          <svg class="juno-icon juno-icon--sm"><use href="…#juno-i-check" /></svg>
+ *        </span>
+ *        <span class="juno-stepper__label">Plan</span>
+ *      </li>
+ *      <li class="juno-stepper__step" data-state="current" aria-current="step">
+ *        <span class="juno-stepper__marker">2</span>
+ *        <span class="juno-stepper__label">Build</span>
+ *      </li>
+ *      <li class="juno-stepper__step" data-state="upcoming">
+ *        <span class="juno-stepper__marker">3</span>
+ *        <span class="juno-stepper__label">Ship</span>
+ *      </li>
+ *    </ol>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-stepper {
+  --juno-stepper-marker: var(--juno-space-28);
+  --juno-role: var(--juno-active);
+
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.juno-stepper__step {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--juno-space-8);
+  text-align: center;
+}
+
+/* connector — a line from the previous marker into this one */
+.juno-stepper__step:not(:first-child)::before {
+  content: '';
+  position: absolute;
+  inset-block-start: calc(var(--juno-stepper-marker) / 2);
+  inset-inline-end: 50%;
+  inline-size: 100%;
+  block-size: var(--juno-border-width-1);
+  background: var(--juno-muted);
+}
+
+/* a reached step (complete or current) lights its incoming connector */
+.juno-stepper__step[data-state='complete']::before,
+.juno-stepper__step[data-state='current']::before {
+  background: var(--juno-role);
+}
+
+.juno-stepper__marker {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-content: center;
+  inline-size: var(--juno-stepper-marker);
+  block-size: var(--juno-stepper-marker);
+  border-radius: 50%;
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  background: var(--juno-control-surface);
+  color: var(--juno-label);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-12);
+  font-weight: var(--juno-font-weight-bold);
+}
+
+.juno-stepper__step[data-state='complete'] .juno-stepper__marker {
+  border-color: var(--juno-role);
+  background: color-mix(in srgb, var(--juno-role) 18%, var(--juno-control-surface));
+  color: var(--juno-role);
+}
+
+.juno-stepper__step[data-state='current'] .juno-stepper__marker {
+  border-color: var(--juno-role);
+  color: var(--juno-role);
+  box-shadow: 0 0 0 var(--juno-border-width-2) color-mix(in srgb, var(--juno-role) 30%, transparent);
+}
+
+.juno-stepper__label {
+  max-inline-size: 14ch;
+  color: var(--juno-label);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-12);
+}
+
+.juno-stepper__step[data-state='complete'] .juno-stepper__label,
+.juno-stepper__step[data-state='current'] .juno-stepper__label {
+  color: var(--juno-data);
+}
+
+/* vertical — steps stack; connector runs down the marker column */
+.juno-stepper--vertical {
+  flex-direction: column;
+}
+
+.juno-stepper--vertical .juno-stepper__step {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--juno-space-12);
+  text-align: start;
+  padding-block-end: var(--juno-space-16);
+}
+
+.juno-stepper--vertical .juno-stepper__step:not(:first-child)::before {
+  inset-block: calc(var(--juno-stepper-marker) / -2) auto;
+  inset-inline: calc(var(--juno-stepper-marker) / 2) auto;
+  inline-size: var(--juno-border-width-1);
+  block-size: 100%;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Switch (toggle)  ·  labeled rocker
+ *  A wide squared slide-switch with the state printed inside the track
+ *  (ON / OFF, mono) and a gripped knob; lit nominal-green when ON. A real
+ *  checkbox drives it; the app owns state. Honors prefers-reduced-motion.
+ *  Usage:
+ *    <label class="juno-switch">
+ *      <input class="juno-switch__input" type="checkbox" role="switch" />
+ *      <span class="juno-switch__track"></span>
+ *      <span>AUTO-SCALING</span>
+ *    </label>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+  cursor: pointer;
+}
+
+/* visually hidden but still focusable + in the tab order */
+.juno-switch__input {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  opacity: 0;
+}
+
+.juno-switch__track {
+  --juno-role: var(--juno-nominal);
+
+  position: relative;
+  flex-shrink: 0;
+  inline-size: 70px;
+  block-size: var(--juno-space-28);
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  border-radius: var(--juno-radius-4);
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.4);
+  transition:
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+/* ON / OFF legend, printed opposite the knob */
+.juno-switch__track::after {
+  content: 'OFF';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: var(--juno-space-8);
+  display: flex;
+  align-items: center;
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-wide);
+  color: var(--juno-muted);
+}
+
+/* knob — gradient face, three grip lines; slides via inset-inline-start (RTL) */
+.juno-switch__track::before {
+  content: '';
+  position: absolute;
+  inset-block-start: var(--juno-space-2);
+  inset-inline-start: var(--juno-space-2);
+  inline-size: 26px;
+  block-size: 22px;
+  border-radius: var(--juno-radius-4);
+  border: var(--juno-border-width-1) solid var(--juno-knob-edge);
+  background:
+    repeating-linear-gradient(90deg, var(--juno-knob-grip) 0 2px, transparent 2px 5px) center / 12px
+      14px no-repeat,
+    linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.5);
+  transition: inset-inline-start var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+/* ON fills the track with a role tint — the filled/empty contrast reads at a
+   squint in both modes, where a border-color flip alone does not. */
+.juno-switch__input:checked + .juno-switch__track {
+  border-color: var(--juno-role);
+  background: color-mix(in srgb, var(--juno-role) 28%, var(--juno-control-surface));
+}
+
+.juno-switch__input:checked + .juno-switch__track::after {
+  content: 'ON';
+  inset-inline: var(--juno-space-8) auto;
+  color: var(--juno-data);
+}
+
+.juno-switch__input:checked + .juno-switch__track::before {
+  inset-inline-start: calc(70px - 26px - var(--juno-space-2));
+}
+
+/* Small — quiet per-row toggle (plugin lists, table rows). Drops the printed
+   ON/OFF legend; keeps grip, role tint and inset shadow so it reads junoui. */
+.juno-switch--sm .juno-switch__track {
+  inline-size: var(--juno-space-40);
+  block-size: var(--juno-space-20);
+}
+
+.juno-switch--sm .juno-switch__track::after,
+.juno-switch--sm .juno-switch__input:checked + .juno-switch__track::after {
+  content: none;
+}
+
+.juno-switch--sm .juno-switch__track::before {
+  inline-size: var(--juno-space-16);
+  block-size: var(--juno-space-12);
+  background:
+    repeating-linear-gradient(90deg, var(--juno-knob-grip) 0 2px, transparent 2px 5px) center / 8px
+      8px no-repeat,
+    linear-gradient(180deg, var(--juno-knob-face-hi), var(--juno-knob-face-lo));
+}
+
+.juno-switch--sm .juno-switch__input:checked + .juno-switch__track::before {
+  inset-inline-start: calc(var(--juno-space-40) - var(--juno-space-16) - var(--juno-space-2));
+}
+
+.juno-switch__input:focus-visible + .juno-switch__track {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+.juno-switch__input:disabled + .juno-switch__track {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Table / Data grid
+ *  Dense, scannable rows that read like instrument readouts: numbers in
+ *  mono, right-aligned; semantic color reserved for status; one selected
+ *  row carries the active rail. junoui ships the LOOK + a11y contract;
+ *  the app owns sort, selection, inline-edit, pagination, and filtering.
+ *
+ *  Real <table> semantics — junoui only dresses it. Wrap in
+ *  `.juno-table-scroll` for a sticky-header, overflow-scrolling viewport.
+ *  Usage:
+ *    <div class="juno-table-scroll">
+ *      <table class="juno-table juno-table--zebra juno-table--sticky">
+ *        <thead><tr>
+ *          <th aria-sort="ascending">FLIGHT</th>
+ *          <th class="juno-table__num" aria-sort="none">ALT</th>
+ *        </tr></thead>
+ *        <tbody>
+ *          <tr aria-selected="true"><td>…</td><td class="juno-table__num">37,000</td></tr>
+ *        </tbody>
+ *      </table>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* ── scroll viewport (sticky header lives here) ───────────────────────── */
+.juno-table-scroll {
+  max-block-size: 480px;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--juno-s3) transparent;
+}
+
+.juno-table-scroll::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
+.juno-table-scroll::-webkit-scrollbar-thumb { background: var(--juno-s3); border-radius: var(--juno-radius-5); }
+.juno-table-scroll::-webkit-scrollbar-track { background: transparent; }
+
+/* ── table ────────────────────────────────────────────────────────────── */
+.juno-table {
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+}
+
+/* header */
+.juno-table thead th {
+  padding: var(--juno-space-12) var(--juno-space-16);
+  background: var(--juno-s2);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-medium);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  color: var(--juno-label);
+  text-align: start;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border-block-end: var(--juno-border-width-1) solid var(--juno-control-edge);
+}
+
+.juno-table--sticky thead th {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--juno-z-raised);
+}
+
+/* sortable header — set aria-sort; the arrow + active color follow */
+.juno-table thead th[aria-sort] { cursor: pointer; }
+
+.juno-table thead th[aria-sort]::after {
+  content: '';
+  display: inline-block;
+  inline-size: var(--juno-space-8);
+  margin-inline-start: var(--juno-space-4);
+  font-family: var(--juno-font-family-mono);
+  font-size: 9px;
+  color: var(--juno-active);
+}
+
+.juno-table thead th[aria-sort='none']:hover { color: var(--juno-data); }
+.juno-table thead th[aria-sort='none']:hover::after { content: '↕'; color: var(--juno-muted); }
+.juno-table thead th[aria-sort='ascending'] { color: var(--juno-data); }
+.juno-table thead th[aria-sort='ascending']::after { content: '▲'; }
+.juno-table thead th[aria-sort='descending'] { color: var(--juno-data); }
+.juno-table thead th[aria-sort='descending']::after { content: '▼'; }
+
+/* body cells */
+.juno-table tbody td {
+  padding: var(--juno-space-12) var(--juno-space-16);
+  color: var(--juno-data);
+  white-space: nowrap;
+  vertical-align: middle;
+  border-block-end: var(--juno-border-width-1) solid var(--juno-border);
+}
+
+/* density — per-table, independent of the global density mode */
+.juno-table--compact thead th { padding: var(--juno-space-8) var(--juno-space-12); }
+.juno-table--compact tbody td { padding: var(--juno-space-8) var(--juno-space-16); }
+
+/* zebra (set on the table; striping the odd body rows) */
+.juno-table--zebra tbody tr:nth-child(even) td { background: var(--juno-s2); }
+:root[data-juno-mode='light'] .juno-table--zebra tbody tr:nth-child(even) td { background: var(--juno-s1); }
+
+/* row interaction — app keeps aria-selected in sync */
+.juno-table tbody tr { transition: background var(--juno-motion-duration-quick) var(--juno-motion-ease-standard); }
+.juno-table tbody tr:hover td { background: var(--juno-s2); }
+:root[data-juno-mode='light'] .juno-table tbody tr:hover td { background: var(--juno-s1); }
+
+.juno-table tbody tr[aria-selected='true'] td {
+  background: color-mix(in srgb, var(--juno-active) 11%, transparent);
+}
+
+/* selection rail — a left bar on the first cell of a selected row */
+.juno-table tbody td:first-child {
+  border-inline-start: var(--juno-border-width-3) solid transparent;
+}
+
+.juno-table tbody tr[aria-selected='true'] td:first-child {
+  border-inline-start-color: var(--juno-active);
+}
+
+/* ── cell flavors ─────────────────────────────────────────────────────── */
+
+/* identifier — mono, bold (callsigns, codes, IDs) */
+.juno-table__id {
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+}
+
+/* numeric — mono, bold, end-aligned (measured values) */
+.juno-table__num {
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  text-align: end;
+}
+
+/* secondary mono (routes, sub-codes) — quieter than data */
+.juno-table__mono {
+  font-family: var(--juno-font-family-mono);
+  color: var(--juno-label);
+}
+
+/* timestamp — mono, muted */
+.juno-table__time {
+  font-family: var(--juno-font-family-mono);
+  text-align: end;
+  color: var(--juno-label);
+}
+
+/* trend / delta — role-colored mono; author supplies ▲ / ▼ + sign */
+.juno-table__trend {
+  --juno-role: var(--juno-nominal);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-4);
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  color: var(--juno-role);
+}
+
+/* inline meter — track + role fill + value; app sets --juno-table-fill (0–100) */
+.juno-table__meter {
+  --juno-role: var(--juno-nominal);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+  justify-content: flex-end;
+  inline-size: 100%;
+}
+
+.juno-table__meter-track {
+  inline-size: var(--juno-space-56);
+  block-size: var(--juno-space-4);
+  border-radius: var(--juno-radius-3);
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.juno-table__meter-fill {
+  display: block;
+  block-size: 100%;
+  inline-size: calc(var(--juno-table-fill, 0) * 1%);
+  background: var(--juno-role);
+  border-radius: var(--juno-radius-3);
+}
+
+.juno-table__meter-val {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-12);
+  color: var(--juno-role);
+  min-inline-size: var(--juno-space-32);
+  text-align: end;
+}
+
+/* row actions — icon buttons, revealed when the row is hovered/focused */
+.juno-table__actions {
+  display: inline-flex;
+  gap: var(--juno-space-8);
+  opacity: 0;
+  transition: opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-table tbody tr:hover .juno-table__actions,
+.juno-table tbody tr:focus-within .juno-table__actions { opacity: 1; }
+
+/* no hover to reveal them on touch — actions stay visible */
+@media (hover: none) {
+  .juno-table__actions { opacity: 1; }
+}
+
+.juno-table__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--juno-space-24);
+  block-size: var(--juno-space-24);
+  border-radius: var(--juno-radius-3);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge);
+  background: transparent;
+  color: var(--juno-label);
+  font-size: var(--juno-font-size-13);
+  cursor: pointer;
+}
+
+.juno-table__action:hover { color: var(--juno-data); background: var(--juno-s2); }
+
+/* ── overflow behaviors (set on a cell) ───────────────────────────────────
+   Scoped under `.juno-table td` so they out-specify the base `white-space:
+   nowrap` on body cells — otherwise wrap / clamp would never break. */
+.juno-table td.juno-table__truncate {
+  max-inline-size: var(--juno-cell-max, 240px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Line-clamp must live on a block child: a <td> stays `table-cell` and ignores
+   `display: -webkit-box`, so clamping it leaks the overflowing line. The td just
+   sets the width + wrap; the inner element does the clamp. */
+.juno-table td.juno-table__clamp {
+  max-inline-size: var(--juno-cell-max, 240px);
+  white-space: normal;
+}
+
+.juno-table__clamp-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.juno-table td.juno-table__wrap {
+  max-inline-size: var(--juno-cell-max, 240px);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+/* ── selection column (checkbox) ──────────────────────────────────────── */
+.juno-table th.juno-table__check,
+.juno-table td.juno-table__check {
+  inline-size: 44px;
+  text-align: center;
+  padding-inline: var(--juno-space-16) var(--juno-space-8);
+}
+
+/* ── editable cells (app swaps the mark for an input on edit) ──────────── */
+.juno-table td.juno-table__editable { cursor: cell; }
+
+.juno-table td.juno-table__editable:hover {
+  background: color-mix(in srgb, var(--juno-active) 8%, transparent);
+  box-shadow: inset 0 0 0 var(--juno-border-width-1) var(--juno-active);
+}
+
+/* the dashed underline that marks a value as editable */
+.juno-table__mark {
+  border-block-end: var(--juno-border-width-1) dashed color-mix(in srgb, var(--juno-label) 50%, transparent);
+  padding-block-end: 1px;
+}
+
+/* the inline editor — a compact input that fills the cell */
+.juno-table__edit-input {
+  inline-size: 100%;
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-active);
+  border-radius: var(--juno-radius-3);
+  padding: var(--juno-space-2) var(--juno-space-8);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+  text-align: inherit;
+  outline: none;
+}
+
+/* ── toolbar / footer / bulk bar (framing rows) ───────────────────────── */
+.juno-table__toolbar,
+.juno-table__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-12);
+  flex-wrap: wrap;
+  padding: var(--juno-space-12) var(--juno-space-16);
+  background: var(--juno-s1);
+}
+
+.juno-table__toolbar { border-block-end: var(--juno-border-width-1) solid var(--juno-border); }
+.juno-table__foot { border-block-start: var(--juno-border-width-1) solid var(--juno-border); }
+
+/* selection / bulk-action bar — shown by the app while rows are selected.
+   The [hidden] override is required: a class `display` beats the UA [hidden]. */
+.juno-table__bulk {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-16);
+  padding: var(--juno-space-10) var(--juno-space-16);
+  background: color-mix(in srgb, var(--juno-active) 10%, transparent);
+  border-block-end: var(--juno-border-width-1) solid var(--juno-active);
+}
+
+.juno-table__bulk[hidden] { display: none; }
+
+.juno-table__bulk-count {
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  font-size: var(--juno-font-size-12);
+  color: var(--juno-active);
+}
+
+/* ── skeleton + empty states ──────────────────────────────────────────── */
+.juno-table__skeleton {
+  block-size: var(--juno-space-10);
+  border-radius: var(--juno-radius-3);
+  background: linear-gradient(
+    90deg,
+    var(--juno-s2) 0%,
+    var(--juno-s3) 50%,
+    var(--juno-s2) 100%
+  );
+  background-size: 200% 100%;
+  animation: juno-table-shimmer 1.2s ease-in-out infinite;
+}
+
+@keyframes juno-table-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+.juno-table__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-12);
+  padding: var(--juno-space-56) var(--juno-space-24);
+  text-align: center;
+  color: var(--juno-label);
+}
+
+.juno-table__empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--juno-space-40);
+  block-size: var(--juno-space-40);
+  border-radius: var(--juno-radius-8);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge);
+  color: var(--juno-muted);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-18);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .juno-table__skeleton { animation: none; }
+}
+
+/* ── stacked mode (opt-in) — card rows for phone-width containers ────────
+   Add `.juno-table--stack` on the table and `data-label="HEADER"` on each
+   td. In a container narrower than 480px the grid flips: the header row
+   hides, every row becomes a bordered card, every cell a label/value pair
+   (::before renders the data-label). Container-driven, so it needs an
+   ancestor with `container-type: inline-size` — usually the
+   .juno-table-scroll wrapper. Semantics stay a real <table>; only the
+   display changes.
+   Usage:
+     <div class="juno-table-scroll" style="container-type:inline-size">
+       <table class="juno-table juno-table--stack">
+         <tbody><tr>
+           <td data-label="FLIGHT" class="juno-table__id">JU-204</td>
+           <td data-label="ALT" class="juno-table__num">37,000</td>
+         </tr></tbody> */
+@container (max-width: 480px) {
+  .juno-table--stack thead { display: none; }
+
+  .juno-table--stack,
+  .juno-table--stack tbody,
+  .juno-table--stack tbody tr { display: block; }
+
+  .juno-table--stack tbody tr {
+    margin-block-end: var(--juno-space-12);
+    border: var(--juno-border-width-1) solid var(--juno-border);
+    border-radius: var(--juno-radius-5);
+    overflow: hidden;
+  }
+
+  .juno-table--stack tbody td {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--juno-space-16);
+    padding: var(--juno-space-8) var(--juno-space-16);
+    border-block-end: none;
+    white-space: normal;
+    text-align: end;
+  }
+
+  /* the column header, rebuilt per cell from data-label */
+  .juno-table--stack tbody td::before {
+    content: attr(data-label);
+    flex-shrink: 0;
+    font-family: var(--juno-font-family-sans);
+    font-size: var(--juno-font-size-10);
+    font-weight: var(--juno-font-weight-medium);
+    letter-spacing: var(--juno-font-tracking-caps);
+    text-transform: uppercase;
+    text-align: start;
+    color: var(--juno-label);
+  }
+
+  /* the selection rail moves from the first cell to the card edge */
+  .juno-table--stack tbody td:first-child { border-inline-start: none; }
+
+  .juno-table--stack tbody tr[aria-selected='true'] {
+    border-inline-start: var(--juno-border-width-3) solid var(--juno-active);
+  }
+
+  /* no hover on most narrow devices — keep row actions visible */
+  .juno-table--stack .juno-table__actions { opacity: 1; }
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Tabs
+ *  A horizontal tablist with an active-cyan underline indicator; the
+ *  selected tab shows its panel. junoui ships the look + the ARIA
+ *  contract; the app owns switching (aria-selected, panel visibility,
+ *  arrow-key roving focus).
+ *  Usage:
+ *    <div class="juno-tabs">
+ *      <div class="juno-tabs__list" role="tablist" aria-label="Service">
+ *        <button class="juno-tabs__tab" role="tab" id="t1"
+ *                aria-controls="p1" aria-selected="true">OVERVIEW</button>
+ *        <button class="juno-tabs__tab" role="tab" id="t2"
+ *                aria-controls="p2" aria-selected="false">METRICS</button>
+ *      </div>
+ *      <div class="juno-tabs__panel" role="tabpanel" id="p1" aria-labelledby="t1">…</div>
+ *      <div class="juno-tabs__panel" role="tabpanel" id="p2" aria-labelledby="t2" hidden>…</div>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-tabs__list {
+  display: flex;
+  gap: var(--juno-space-2);
+  border-block-end: var(--juno-border-width-1) solid var(--juno-border);
+
+  /* tabs never wrap — when space runs out (phone widths) the strip
+     scrolls sideways instead, keeping every tab reachable */
+  overflow: auto hidden;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+}
+
+.juno-tabs__tab {
+  appearance: none;
+  margin: 0;
+  margin-block-end: calc(-1 * var(--juno-border-width-1));
+  padding: var(--juno-space-10) var(--juno-space-16);
+  background: transparent;
+  border: none;
+  border-block-end: var(--juno-border-width-2) solid transparent;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-medium);
+  letter-spacing: var(--juno-font-tracking-label);
+  color: var(--juno-label);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-tabs__tab:hover { color: var(--juno-data); }
+
+.juno-tabs__tab[aria-selected='true'] {
+  color: var(--juno-active);
+  border-block-end-color: var(--juno-active);
+}
+
+.juno-tabs__tab:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-tabs__panel {
+  padding-block-start: var(--juno-space-20);
+}
+
+.juno-tabs__panel[hidden] { display: none; }
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Thumb (media thumbnail + unavailable placeholder)
+ *  A media frame that never shows the browser's broken-image glyph:
+ *  a muted placeholder (icon on s2) sits under the media; the image
+ *  covers it while present. Loading state is .juno-skeleton's job —
+ *  this is for media that is missing or failed.
+ *  A missing thumb is not a warning: the placeholder stays neutral.
+ *  Usage:
+ *    <figure class="juno-thumb" style="aspect-ratio: 1">
+ *      <img src="…" alt="Sunset clip" onerror="this.remove()" />
+ *    </figure>
+ *    <!-- known-missing: ship no <img>; label the figure instead -->
+ *    <figure class="juno-thumb juno-thumb--video" role="img" aria-label="Preview unavailable"></figure>
+ *  The onerror one-liner is the whole JS contract (optional, stateless):
+ *  a broken image removes itself and the placeholder underneath shows.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-thumb {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-4);
+  margin: 0;
+  overflow: hidden;
+  background: var(--juno-s2);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-3);
+}
+
+/* placeholder glyph (Phosphor "images", masked so it takes any color) */
+.juno-thumb::before {
+  --juno-thumb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M160,88a16,16,0,1,1,16,16A16,16,0,0,1,160,88Zm76-32V160a20,20,0,0,1-20,20H204v20a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V88A20,20,0,0,1,40,68H60V56A20,20,0,0,1,80,36H216A20,20,0,0,1,236,56ZM180,180H80a20,20,0,0,1-20-20V92H44V196H180Zm-21.66-24L124,121.66,89.66,156ZM212,60H84v67.72l25.86-25.86a20,20,0,0,1,28.28,0L192.28,156H212Z'/%3E%3C/svg%3E");
+
+  content: '';
+  inline-size: 28%;
+  max-inline-size: var(--juno-space-32);
+  aspect-ratio: 1;
+  background: var(--juno-muted);
+  -webkit-mask: var(--juno-thumb-glyph) center / contain no-repeat;
+          mask: var(--juno-thumb-glyph) center / contain no-repeat;
+}
+
+/* video flavor — play glyph */
+.juno-thumb--video::before {
+  --juno-thumb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.49,111.07,90.41,22.94A20,20,0,0,0,60,39.87V216.13a20,20,0,0,0,30.41,16.93l144.08-88.13a19.82,19.82,0,0,0,0-33.86ZM84,208.85V47.15L216.16,128Z'/%3E%3C/svg%3E");
+}
+
+/* optional text under the glyph (keeps color from being the only signal) */
+.juno-thumb__label {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  color: var(--juno-muted);
+}
+
+/* the media covers the frame; while present the placeholder sits hidden
+   underneath. On error the app's onerror removes the element. */
+.juno-thumb > img,
+.juno-thumb > video {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Toast / snackbar
+ *  A transient, floating notification. Same role-rail language as the
+ *  alert, but elevated (shadow) and stacked in a fixed corner on the
+ *  reserved alert layer (--juno-z-alert, above modals). junoui ships the
+ *  look + enter/exit motion; the app owns creation, auto-dismiss timing,
+ *  and live-region announcement.
+ *  Usage:
+ *    <div class="juno-toast-stack" id="toasts" aria-live="polite"></div>
+ *    // app appends:
+ *    <div class="juno-toast juno--nominal" role="status">
+ *      <span class="juno-toast__icon" aria-hidden="true">✓</span>
+ *      <span class="juno-toast__text">Build promoted.</span>
+ *      <button class="juno-toast__close" aria-label="Dismiss">✕</button>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-toast-stack {
+  position: fixed;
+  z-index: var(--juno-z-alert);
+  inset-block-end: var(--juno-space-24);
+  inset-inline-end: var(--juno-space-24);
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-12);
+  inline-size: min(360px, calc(100vw - var(--juno-space-32)));
+  pointer-events: none;
+}
+
+/* placements */
+.juno-toast-stack--top { inset-block: var(--juno-space-24) auto; }
+.juno-toast-stack--start { inset-inline: var(--juno-space-24) auto; }
+
+.juno-toast {
+  --juno-role: var(--juno-active);
+
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-12);
+  padding: var(--juno-space-12) var(--juno-space-16);
+  background: var(--juno-s2);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-inline-start: var(--juno-border-width-3) solid var(--juno-role);
+  border-radius: var(--juno-radius-5);
+  box-shadow: var(--juno-shadow-2);
+  color: var(--juno-data);
+  transition:
+    opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-quick) var(--juno-motion-ease-decel);
+}
+
+/* enter (freshly inserted) + leaving (app adds the class before removal) */
+@starting-style {
+  .juno-toast { opacity: 0; transform: translateX(var(--juno-space-16)); }
+}
+
+.juno-toast--leaving { opacity: 0; transform: translateX(var(--juno-space-16)); }
+
+.juno-toast__icon {
+  flex-shrink: 0;
+  color: var(--juno-role);
+  font-size: var(--juno-font-size-16);
+  line-height: var(--juno-font-lineHeight-none);
+}
+
+.juno-toast__text {
+  flex: 1;
+  min-inline-size: 0;
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+}
+
+.juno-toast__close {
+  flex-shrink: 0;
+  appearance: none;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--juno-muted);
+  font-size: var(--juno-font-size-16);
+  line-height: var(--juno-font-lineHeight-none);
+  cursor: pointer;
+}
+
+.juno-toast__close:hover { color: var(--juno-data); }
+
+/* ── narrow viewports — snackbar style ──────────────────────────────────
+   The corner stack goes full-width at the bottom edge (thumb reach),
+   clear of the home indicator; toasts slide up instead of sideways. */
+@media (width <= 639.98px) {
+  .juno-toast-stack {
+    inset-inline: var(--juno-space-12);
+    inset-block-end: calc(var(--juno-space-12) + env(safe-area-inset-bottom, 0));
+    inline-size: auto;
+  }
+
+  .juno-toast-stack--top { inset-block: var(--juno-space-12) auto; }
+
+  @starting-style {
+    .juno-toast { transform: translateY(var(--juno-space-16)); }
+  }
+
+  .juno-toast--leaving { transform: translateY(var(--juno-space-16)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .juno-toast { transition: none; }
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Toggle button
+ *  Airbus-style illuminated-legend pushbutton: the body stays dark; a top
+ *  strip lights (NOMINAL) and the surround glows when engaged. A real
+ *  <button aria-pressed>; the app flips aria-pressed.
+ *  Usage:
+ *    <button class="juno-toggle-btn" aria-pressed="true">
+ *      <span class="juno-toggle-btn__strip"></span>
+ *      <span class="juno-toggle-btn__row">
+ *        <span class="juno-toggle-btn__text">
+ *          <span class="juno-toggle-btn__legend">AUTO-SCALING</span>
+ *          <span class="juno-toggle-btn__desc">Scale workers with load</span>
+ *        </span>
+ *        <span class="juno-toggle-btn__status">ON</span>
+ *      </span>
+ *    </button>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-toggle-btn {
+  --juno-role: var(--juno-nominal);
+
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  padding: 0;
+  overflow: hidden;
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  border-radius: var(--juno-radius-4);
+  text-align: start;
+  cursor: pointer;
+  transition:
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    box-shadow var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-toggle-btn[aria-pressed='true'] {
+  border-color: var(--juno-role);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--juno-role) 20%, transparent);
+}
+
+.juno-toggle-btn__strip {
+  block-size: var(--juno-space-4);
+  background: var(--juno-s3);
+  transition:
+    background var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    box-shadow var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-toggle-btn[aria-pressed='true'] .juno-toggle-btn__strip {
+  background: var(--juno-role);
+  box-shadow: 0 0 8px var(--juno-role);
+}
+
+.juno-toggle-btn__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--juno-space-12);
+  padding: var(--juno-pad-control-block) var(--juno-space-16);
+}
+
+.juno-toggle-btn__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-2);
+}
+
+.juno-toggle-btn__legend {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-tight);
+  color: var(--juno-data);
+}
+
+.juno-toggle-btn__desc { font-size: var(--juno-font-size-11); color: var(--juno-label); }
+
+.juno-toggle-btn__status {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-caps);
+  color: var(--juno-muted);
+}
+
+.juno-toggle-btn[aria-pressed='true'] .juno-toggle-btn__status { color: var(--juno-role); }
+
+.juno-toggle-btn:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Tooltip
+ *  Transient hover/focus label. Pure CSS reveal (no JS): the bubble shows
+ *  on hover or keyboard focus of the wrapper. Four placements with an arrow.
+ *  Usage:
+ *    <span class="juno-tooltip">
+ *      <button tabindex="0">RPS</button>
+ *      <span class="juno-tooltip__bubble" role="tooltip">
+ *        Requests / sec · 248
+ *        <span class="juno-tooltip__arrow"></span>
+ *      </span>
+ *    </span>
+ *  Default placement is top; add --right / --bottom / --left on the bubble.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.juno-tooltip__bubble {
+  position: absolute;
+  z-index: var(--juno-z-anchored);
+  inset-block-end: calc(100% + var(--juno-space-8));
+  inset-inline-start: 50%;
+  transform: translateX(-50%) translateY(var(--juno-space-4));
+  white-space: nowrap;
+  background: var(--juno-s3);
+  color: var(--juno-data);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-4);
+  box-shadow: var(--juno-shadow-2);
+  padding: var(--juno-space-4) var(--juno-space-10);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-11);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    visibility var(--juno-motion-duration-quick);
+}
+
+.juno-tooltip:hover .juno-tooltip__bubble,
+.juno-tooltip:focus-within .juno-tooltip__bubble {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* ── top-layer mode ─────────────────────────────────────────────────────
+   The pure-CSS reveal above is clipped if an ancestor sets overflow/clip.
+   Promote the bubble to a `popover="hint"` (a stateless enhancer toggles it
+   on hover/focus and points position-anchor at the trigger) and it renders in
+   the TOP LAYER — never clipped. CSS anchor positioning replaces the
+   wrapper-relative offsets; the arrow + placement classes still apply. */
+.juno-tooltip__bubble[popover] {
+  position: fixed;
+  margin: 0;
+  inset: auto;
+  position-area: block-start;
+  position-try-fallbacks: flip-block;
+  transform: translateY(var(--juno-space-4));
+  transition:
+    opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    overlay var(--juno-motion-duration-quick) allow-discrete,
+    display var(--juno-motion-duration-quick) allow-discrete;
+}
+
+.juno-tooltip__bubble--bottom[popover] {
+  position-area: block-end;
+  transform: translateY(calc(-1 * var(--juno-space-4)));
+}
+
+.juno-tooltip__bubble--right[popover] {
+  position-area: inline-end;
+  transform: translateX(calc(-1 * var(--juno-space-4)));
+}
+
+.juno-tooltip__bubble--left[popover] {
+  position-area: inline-start;
+  transform: translateX(var(--juno-space-4));
+}
+
+.juno-tooltip__bubble[popover]:popover-open {
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+}
+
+@starting-style {
+  .juno-tooltip__bubble[popover]:popover-open { opacity: 0; }
+}
+
+/* arrow — a rotated square straddling the bubble edge nearest the target.
+   The bubble overlaps its inner half, leaving a clean notch. */
+.juno-tooltip__arrow {
+  position: absolute;
+  inline-size: var(--juno-space-8);
+  block-size: var(--juno-space-8);
+  background: var(--juno-s3);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  transform: rotate(45deg);
+  inset-block-start: calc(100% - var(--juno-space-4));
+  inset-inline-start: calc(50% - var(--juno-space-4));
+}
+
+/* ── placements (set on the bubble) ───────────────────────────────────── */
+.juno-tooltip__bubble--bottom {
+  inset-block: calc(100% + var(--juno-space-8)) auto;
+  transform: translateX(-50%) translateY(calc(-1 * var(--juno-space-4)));
+}
+
+.juno-tooltip:hover .juno-tooltip__bubble--bottom,
+.juno-tooltip:focus-within .juno-tooltip__bubble--bottom {
+  transform: translateX(-50%) translateY(0);
+}
+
+.juno-tooltip__bubble--bottom .juno-tooltip__arrow {
+  inset-block-start: calc(-1 * var(--juno-space-4));
+}
+
+.juno-tooltip__bubble--right {
+  inset-block: 50% auto;
+  inset-inline-start: calc(100% + var(--juno-space-8));
+  transform: translateY(-50%) translateX(calc(-1 * var(--juno-space-4)));
+}
+
+.juno-tooltip:hover .juno-tooltip__bubble--right,
+.juno-tooltip:focus-within .juno-tooltip__bubble--right {
+  transform: translateY(-50%) translateX(0);
+}
+
+.juno-tooltip__bubble--right .juno-tooltip__arrow {
+  inset-block-start: calc(50% - var(--juno-space-4));
+  inset-inline-start: calc(-1 * var(--juno-space-4));
+}
+
+.juno-tooltip__bubble--left {
+  inset-block: 50% auto;
+  inset-inline: auto calc(100% + var(--juno-space-8));
+  transform: translateY(-50%) translateX(var(--juno-space-4));
+}
+
+.juno-tooltip:hover .juno-tooltip__bubble--left,
+.juno-tooltip:focus-within .juno-tooltip__bubble--left {
+  transform: translateY(-50%) translateX(0);
+}
+
+.juno-tooltip__bubble--left .juno-tooltip__arrow {
+  inset-block-start: calc(50% - var(--juno-space-4));
+  inset-inline-start: calc(100% - var(--juno-space-4));
+}
+
+/* ════════════════════════════════════════════════════════════════════
+ *  junoui — utilities layer
+ *
+ *  Role helpers set a single custom property --juno-role. Components read
+ *  var(--juno-role), so one class (.juno--warning) re-colors a badge, dot,
+ *  button, card accent, or readout identically. Color = status, always.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno--nominal { --juno-role: var(--juno-nominal); }
+.juno--active  { --juno-role: var(--juno-active);  }
+.juno--target  { --juno-role: var(--juno-target);  }
+.juno--caution { --juno-role: var(--juno-caution); }
+.juno--warning { --juno-role: var(--juno-warning); }
+.juno--muted   { --juno-role: var(--juno-muted);   }
+
+/* Text color roles */
+.juno-text-nominal { color: var(--juno-nominal); }
+.juno-text-active  { color: var(--juno-active);  }
+.juno-text-target  { color: var(--juno-target);  }
+.juno-text-caution { color: var(--juno-caution); }
+.juno-text-warning { color: var(--juno-warning); }
+.juno-text-data    { color: var(--juno-data);    }
+.juno-text-label   { color: var(--juno-label);   }
+.juno-text-muted   { color: var(--juno-muted);   }
+
+/* Surface backgrounds (depth hierarchy) */
+.juno-bg-s0 { background: var(--juno-s0); }
+.juno-bg-s1 { background: var(--juno-s1); }
+.juno-bg-s2 { background: var(--juno-s2); }
+.juno-bg-s3 { background: var(--juno-s3); }
+
+/* Typography helpers */
+.juno-mono { font-family: var(--juno-font-family-mono); }
+
+.juno-value {
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  color: var(--juno-data);
+  line-height: var(--juno-font-lineHeight-none);
+  font-variant-numeric: tabular-nums;
+}
+
+.juno-label {
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-label);
+}
+
+/* Section eyebrow / micro label — 10px uppercase, widely tracked */
+.juno-eyebrow {
+  font-size: var(--juno-font-size-10);
+  letter-spacing: var(--juno-font-tracking-widest);
+  text-transform: uppercase;
+  color: var(--juno-label);
+}
+
+.juno-heading {
+  font-family: var(--juno-font-family-sans);
+  font-weight: var(--juno-font-weight-bold);
+  font-size: var(--juno-font-size-18);
+  letter-spacing: var(--juno-font-tracking-normal);
+  text-transform: uppercase;
+  color: var(--juno-data);
+}
+
+/* Visually hidden, still announced — legends, skip links, icon-only labels */
+.juno-sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}