@humanforest/nuxt-layer 0.1.0

package/styles.cdn.gen.css

@@ -0,0 +1,2047 @@
+/* GENERATED by scripts/layer.ts — do not edit. Run `bun run build:layer`.
+   Fonts from the CDN. The build npm ships — import as @humanforest/nuxt-layer/styles.cdn.gen.css. */
+
+/* Forest brand fonts — CDN build (absolute urls — host must send Access-Control-Allow-Origin).
+   GENERATED by scripts/fonts.ts from packages/fonts/files/*. Do not edit by hand.
+   Licence: Mohr = Black + UPPERCASE only; GT Haptik unrestricted; JetBrains Mono OFL. */
+
+/* Mohr's caps sit above its own box centre; these re-hang the face so the box matches
+   GT Haptik's (ascent + descent) and the cap band lands centred (ascent − descent = cap height). */
+@font-face {
+  font-family: 'MohrAlt';
+  src: url('https://assets.forest.bike/fonts/MohrAlt-Black.woff2') format('woff2'),
+       url('https://assets.forest.bike/fonts/MohrAlt-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  ascent-override: 98.7549%;
+  descent-override: 26.7334%;
+  line-gap-override: 0%;
+  font-display: swap;
+}
+
+/* Mohr's caps sit above its own box centre; these re-hang the face so the box matches
+   GT Haptik's (ascent + descent) and the cap band lands centred (ascent − descent = cap height). */
+@font-face {
+  font-family: 'Mohr-BlackIt';
+  src: url('https://assets.forest.bike/fonts/Mohr-BlackIt.woff2') format('woff2'),
+       url('https://assets.forest.bike/fonts/Mohr-BlackIt.woff') format('woff');
+  font-weight: 900;
+  font-style: italic;
+  ascent-override: 98.7549%;
+  descent-override: 26.7334%;
+  line-gap-override: 0%;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GT Haptik';
+  src: url('https://assets.forest.bike/fonts/GTHaptik-Regular.woff2') format('woff2'),
+       url('https://assets.forest.bike/fonts/GTHaptik-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GT Haptik';
+  src: url('https://assets.forest.bike/fonts/GTHaptik-RegularOblique.woff2') format('woff2'),
+       url('https://assets.forest.bike/fonts/GTHaptik-RegularOblique.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GT Haptik';
+  src: url('https://assets.forest.bike/fonts/GTHaptik-Bold.woff2') format('woff2'),
+       url('https://assets.forest.bike/fonts/GTHaptik-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'GT Haptik';
+  src: url('https://assets.forest.bike/fonts/GTHaptik-BoldOblique.woff2') format('woff2'),
+       url('https://assets.forest.bike/fonts/GTHaptik-BoldOblique.woff') format('woff');
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('https://assets.forest.bike/fonts/JetBrainsMono-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('https://assets.forest.bike/fonts/JetBrainsMono-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+/* Forest 50–950 ramps + named brand tokens — generated by scripts/scales.ts (OKLCH, v2 engine).
+   Byte-for-byte the docs' buildPCHIP output. Display-P3 primary + sRGB hex fallback. Brand naming
+  : forest / maple / river / warm / amber / acid / neutral. Additive to scales.css. Do not edit. */
+:root {
+  --forest-0: #F4FDF7;
+  --forest-0: color(display-p3 0.9617 0.9904 0.9692);
+  --forest-50: #E8FBEE;
+  --forest-50: color(display-p3 0.9221 0.9812 0.9381);
+  --forest-100: #CEF5DD;
+  --forest-100: color(display-p3 0.8366 0.9550 0.8714);
+  --forest-200: #99E9BC;
+  --forest-200: color(display-p3 0.6692 0.9055 0.7508);
+  --forest-300: #3BD996;
+  --forest-300: color(display-p3 0.4365 0.8410 0.6100);
+  --forest-400: #0ABB7F;
+  --forest-400: color(display-p3 0.2782 0.7321 0.5042);
+  --forest-500: #019F6D;
+  --forest-500: color(display-p3 0.1537 0.6308 0.4214);
+  --forest-600: #00845C;
+  --forest-600: color(display-p3 0.2237 0.5096 0.3721);
+  --forest-700: #046C4C;
+  --forest-700: color(display-p3 0.1815 0.4169 0.3069);
+  --forest-800: #075640;
+  --forest-800: color(display-p3 0.1446 0.3337 0.2565);
+  --forest-900: #074235;
+  --forest-900: color(display-p3 0.1092 0.2548 0.2097);
+  --forest-950: #002A24;
+  --forest-950: color(display-p3 0.0519 0.1616 0.1416);
+  --maple-0: #FFF8F8;
+  --maple-0: color(display-p3 1.0000 0.9720 0.9730);
+  --maple-50: #FFF1F2;
+  --maple-50: color(display-p3 0.9985 0.9449 0.9465);
+  --maple-100: #FFE1E2;
+  --maple-100: color(display-p3 1.0000 0.8781 0.8806);
+  --maple-200: #FFC2C4;
+  --maple-200: color(display-p3 0.9973 0.7533 0.7546);
+  --maple-300: #FF9A9B;
+  --maple-300: color(display-p3 0.9961 0.5849 0.5840);
+  --maple-400: #F26F70;
+  --maple-400: color(display-p3 0.8993 0.4544 0.4449);
+  --maple-500: #D35A59;
+  --maple-500: color(display-p3 0.7916 0.3578 0.3444);
+  --maple-600: #AA514E;
+  --maple-600: color(display-p3 0.6214 0.3379 0.3175);
+  --maple-700: #8C4340;
+  --maple-700: color(display-p3 0.5112 0.2789 0.2593);
+  --maple-800: #6E3633;
+  --maple-800: color(display-p3 0.4027 0.2236 0.2061);
+  --maple-900: #532A27;
+  --maple-900: color(display-p3 0.3056 0.1743 0.1597);
+  --maple-950: #3B1C1A;
+  --maple-950: color(display-p3 0.2159 0.1166 0.1048);
+  --river-0: #F6FBFF;
+  --river-0: color(display-p3 0.9669 0.9829 1.0000);
+  --river-50: #EDF6FF;
+  --river-50: color(display-p3 0.9341 0.9657 1.0000);
+  --river-100: #D8ECFF;
+  --river-100: color(display-p3 0.8580 0.9250 1.0000);
+  --river-200: #B2D9FF;
+  --river-200: color(display-p3 0.7169 0.8475 1.0000);
+  --river-300: #81C0FF;
+  --river-300: color(display-p3 0.5424 0.7476 1.0000);
+  --river-400: #43A2FF;
+  --river-400: color(display-p3 0.3493 0.6273 0.9890);
+  --river-500: #3588DF;
+  --river-500: color(display-p3 0.2668 0.5237 0.8840);
+  --river-600: #3C72B2;
+  --river-600: color(display-p3 0.2865 0.4405 0.6806);
+  --river-700: #355D93;
+  --river-700: color(display-p3 0.2436 0.3601 0.5609);
+  --river-800: #2D4974;
+  --river-800: color(display-p3 0.2015 0.2837 0.4416);
+  --river-900: #253858;
+  --river-900: color(display-p3 0.1613 0.2166 0.3341);
+  --river-950: #19263E;
+  --river-950: color(display-p3 0.1098 0.1474 0.2378);
+  --warm-0: #FDFAF6;
+  --warm-0: color(display-p3 0.9904 0.9785 0.9624);
+  --warm-50: #FFF9F2;
+  --warm-50: color(display-p3 0.9959 0.9773 0.9519);
+  --warm-100: #FCE6CB;
+  --warm-100: color(display-p3 0.9861 0.9003 0.7854);
+  --warm-200: #FFD6A6;
+  --warm-200: color(display-p3 0.9740 0.8452 0.6748);
+  --warm-300: #FEAF59;
+  --warm-300: color(display-p3 0.9642 0.6946 0.3782);
+  --warm-400: #F48519;
+  --warm-400: color(display-p3 0.8990 0.5431 0.2243);
+  --warm-500: #DB6300;
+  --warm-500: color(display-p3 0.8006 0.4157 0.1565);
+  --warm-600: #A75633;
+  --warm-600: color(display-p3 0.6145 0.3552 0.2294);
+  --warm-700: #8A462E;
+  --warm-700: color(display-p3 0.5077 0.2898 0.2006);
+  --warm-800: #6D3828;
+  --warm-800: color(display-p3 0.4006 0.2302 0.1713);
+  --warm-900: #532B22;
+  --warm-900: color(display-p3 0.3046 0.1778 0.1408);
+  --warm-950: #44231C;
+  --warm-950: color(display-p3 0.2491 0.1436 0.1165);
+  --amber-0: #FBFAF3;
+  --amber-0: color(display-p3 0.9856 0.9819 0.9552);
+  --amber-50: #FAF7E9;
+  --amber-50: color(display-p3 0.9780 0.9698 0.9198);
+  --amber-100: #F8EFCB;
+  --amber-100: color(display-p3 0.9701 0.9381 0.8003);
+  --amber-200: #F6DC99;
+  --amber-200: color(display-p3 0.9475 0.8648 0.6327);
+  --amber-300: #F7BD41;
+  --amber-300: color(display-p3 0.9381 0.7477 0.3311);
+  --amber-400: #E59E00;
+  --amber-400: color(display-p3 0.8716 0.6255 0.1299);
+  --amber-500: #C78100;
+  --amber-500: color(display-p3 0.7654 0.5049 0.0000);
+  --amber-600: #A56819;
+  --amber-600: color(display-p3 0.6118 0.4173 0.1721);
+  --amber-700: #875219;
+  --amber-700: color(display-p3 0.5015 0.3318 0.1466);
+  --amber-800: #6A3F18;
+  --amber-800: color(display-p3 0.3908 0.2530 0.1231);
+  --amber-900: #502F16;
+  --amber-900: color(display-p3 0.2948 0.1895 0.1031);
+  --amber-950: #391F0E;
+  --amber-950: color(display-p3 0.2095 0.1264 0.0666);
+  --acid-0: #F8FCF1;
+  --acid-0: color(display-p3 0.9758 0.9875 0.9485);
+  --acid-50: #F2F8E5;
+  --acid-50: color(display-p3 0.9535 0.9727 0.9050);
+  --acid-100: #E5EFC9;
+  --acid-100: color(display-p3 0.9041 0.9369 0.8019);
+  --acid-200: #CFDD90;
+  --acid-200: color(display-p3 0.8226 0.8663 0.5989);
+  --acid-300: #B4BD11;
+  --acid-300: color(display-p3 0.7123 0.7400 0.2471);
+  --acid-400: #A2A707;
+  --acid-400: color(display-p3 0.6420 0.6544 0.1046);
+  --acid-500: #8C8C00;
+  --acid-500: color(display-p3 0.5529 0.5517 0.0000);
+  --acid-600: #767502;
+  --acid-600: color(display-p3 0.4628 0.4579 0.1356);
+  --acid-700: #626006;
+  --acid-700: color(display-p3 0.3837 0.3754 0.1127);
+  --acid-800: #4E4B0C;
+  --acid-800: color(display-p3 0.3054 0.2964 0.0993);
+  --acid-900: #3C3A0E;
+  --acid-900: color(display-p3 0.2347 0.2264 0.0854);
+  --acid-950: #2A2808;
+  --acid-950: color(display-p3 0.1634 0.1553 0.0508);
+  --neutral-0: #FEFBFC;
+  --neutral-0: color(display-p3 0.9945 0.9834 0.9863);
+  --neutral-50: #F9F6F7;
+  --neutral-50: color(display-p3 0.9748 0.9637 0.9666);
+  --neutral-100: #F3EFF0;
+  --neutral-100: color(display-p3 0.9486 0.9375 0.9405);
+  --neutral-200: #E7E3E4;
+  --neutral-200: color(display-p3 0.9031 0.8922 0.8951);
+  --neutral-300: #D5D1D2;
+  --neutral-300: color(display-p3 0.8325 0.8217 0.8246);
+  --neutral-400: #A29FA0;
+  --neutral-400: color(display-p3 0.6336 0.6233 0.6261);
+  --neutral-500: #757273;
+  --neutral-500: color(display-p3 0.4570 0.4474 0.4500);
+  --neutral-600: #545252;
+  --neutral-600: color(display-p3 0.3293 0.3202 0.3227);
+  --neutral-700: #423F40;
+  --neutral-700: color(display-p3 0.2554 0.2467 0.2491);
+  --neutral-800: #282626;
+  --neutral-800: color(display-p3 0.1558 0.1478 0.1500);
+  --neutral-900: #191617;
+  --neutral-900: color(display-p3 0.0956 0.0882 0.0902);
+  --neutral-950: #0C090A;
+  --neutral-950: color(display-p3 0.0441 0.0372 0.0391);
+
+  --forest-brand-forest: var(--forest-600);
+  --forest-dark-forest: var(--forest-700);
+  --forest-darkest-forest: var(--forest-950);
+  --warm-ice-cream: var(--warm-50);
+  --warm-peach-cream: var(--warm-200);
+  --warm-acer-orange: var(--warm-500);
+  --warm-bark-brown: var(--warm-950);
+  --acid-acid-green: var(--acid-300);
+}
+
+
+/* Forest ramps → Tailwind/Nuxt UI colours — generated by scripts/scales.ts. Do not edit.
+   @theme: literal hex registers each family as a Tailwind colour (generates bg-forest-* etc.).
+   :root: re-points --color-<fam>-* to the P3-capable ramp var, and bridges the raw families to
+   Nuxt UI's --ui-color-<family>-* so `color="forest"` works. Semantic roles auto-derive. */
+@theme static {
+  --color-forest-0: #F4FDF7;
+  --color-forest-50: #E8FBEE;
+  --color-forest-100: #CEF5DD;
+  --color-forest-200: #99E9BC;
+  --color-forest-300: #3BD996;
+  --color-forest-400: #0ABB7F;
+  --color-forest-500: #019F6D;
+  --color-forest-600: #00845C;
+  --color-forest-700: #046C4C;
+  --color-forest-800: #075640;
+  --color-forest-900: #074235;
+  --color-forest-950: #002A24;
+  --color-maple-0: #FFF8F8;
+  --color-maple-50: #FFF1F2;
+  --color-maple-100: #FFE1E2;
+  --color-maple-200: #FFC2C4;
+  --color-maple-300: #FF9A9B;
+  --color-maple-400: #F26F70;
+  --color-maple-500: #D35A59;
+  --color-maple-600: #AA514E;
+  --color-maple-700: #8C4340;
+  --color-maple-800: #6E3633;
+  --color-maple-900: #532A27;
+  --color-maple-950: #3B1C1A;
+  --color-river-0: #F6FBFF;
+  --color-river-50: #EDF6FF;
+  --color-river-100: #D8ECFF;
+  --color-river-200: #B2D9FF;
+  --color-river-300: #81C0FF;
+  --color-river-400: #43A2FF;
+  --color-river-500: #3588DF;
+  --color-river-600: #3C72B2;
+  --color-river-700: #355D93;
+  --color-river-800: #2D4974;
+  --color-river-900: #253858;
+  --color-river-950: #19263E;
+  --color-warm-0: #FDFAF6;
+  --color-warm-50: #FFF9F2;
+  --color-warm-100: #FCE6CB;
+  --color-warm-200: #FFD6A6;
+  --color-warm-300: #FEAF59;
+  --color-warm-400: #F48519;
+  --color-warm-500: #DB6300;
+  --color-warm-600: #A75633;
+  --color-warm-700: #8A462E;
+  --color-warm-800: #6D3828;
+  --color-warm-900: #532B22;
+  --color-warm-950: #44231C;
+  --color-amber-0: #FBFAF3;
+  --color-amber-50: #FAF7E9;
+  --color-amber-100: #F8EFCB;
+  --color-amber-200: #F6DC99;
+  --color-amber-300: #F7BD41;
+  --color-amber-400: #E59E00;
+  --color-amber-500: #C78100;
+  --color-amber-600: #A56819;
+  --color-amber-700: #875219;
+  --color-amber-800: #6A3F18;
+  --color-amber-900: #502F16;
+  --color-amber-950: #391F0E;
+  --color-acid-0: #F8FCF1;
+  --color-acid-50: #F2F8E5;
+  --color-acid-100: #E5EFC9;
+  --color-acid-200: #CFDD90;
+  --color-acid-300: #B4BD11;
+  --color-acid-400: #A2A707;
+  --color-acid-500: #8C8C00;
+  --color-acid-600: #767502;
+  --color-acid-700: #626006;
+  --color-acid-800: #4E4B0C;
+  --color-acid-900: #3C3A0E;
+  --color-acid-950: #2A2808;
+  --color-neutral-0: #FEFBFC;
+  --color-neutral-50: #F9F6F7;
+  --color-neutral-100: #F3EFF0;
+  --color-neutral-200: #E7E3E4;
+  --color-neutral-300: #D5D1D2;
+  --color-neutral-400: #A29FA0;
+  --color-neutral-500: #757273;
+  --color-neutral-600: #545252;
+  --color-neutral-700: #423F40;
+  --color-neutral-800: #282626;
+  --color-neutral-900: #191617;
+  --color-neutral-950: #0C090A;
+}
+
+:root {
+  --color-forest-0: var(--forest-0);
+  --color-forest-50: var(--forest-50);
+  --color-forest-100: var(--forest-100);
+  --color-forest-200: var(--forest-200);
+  --color-forest-300: var(--forest-300);
+  --color-forest-400: var(--forest-400);
+  --color-forest-500: var(--forest-500);
+  --color-forest-600: var(--forest-600);
+  --color-forest-700: var(--forest-700);
+  --color-forest-800: var(--forest-800);
+  --color-forest-900: var(--forest-900);
+  --color-forest-950: var(--forest-950);
+  --color-maple-0: var(--maple-0);
+  --color-maple-50: var(--maple-50);
+  --color-maple-100: var(--maple-100);
+  --color-maple-200: var(--maple-200);
+  --color-maple-300: var(--maple-300);
+  --color-maple-400: var(--maple-400);
+  --color-maple-500: var(--maple-500);
+  --color-maple-600: var(--maple-600);
+  --color-maple-700: var(--maple-700);
+  --color-maple-800: var(--maple-800);
+  --color-maple-900: var(--maple-900);
+  --color-maple-950: var(--maple-950);
+  --color-river-0: var(--river-0);
+  --color-river-50: var(--river-50);
+  --color-river-100: var(--river-100);
+  --color-river-200: var(--river-200);
+  --color-river-300: var(--river-300);
+  --color-river-400: var(--river-400);
+  --color-river-500: var(--river-500);
+  --color-river-600: var(--river-600);
+  --color-river-700: var(--river-700);
+  --color-river-800: var(--river-800);
+  --color-river-900: var(--river-900);
+  --color-river-950: var(--river-950);
+  --color-warm-0: var(--warm-0);
+  --color-warm-50: var(--warm-50);
+  --color-warm-100: var(--warm-100);
+  --color-warm-200: var(--warm-200);
+  --color-warm-300: var(--warm-300);
+  --color-warm-400: var(--warm-400);
+  --color-warm-500: var(--warm-500);
+  --color-warm-600: var(--warm-600);
+  --color-warm-700: var(--warm-700);
+  --color-warm-800: var(--warm-800);
+  --color-warm-900: var(--warm-900);
+  --color-warm-950: var(--warm-950);
+  --color-amber-0: var(--amber-0);
+  --color-amber-50: var(--amber-50);
+  --color-amber-100: var(--amber-100);
+  --color-amber-200: var(--amber-200);
+  --color-amber-300: var(--amber-300);
+  --color-amber-400: var(--amber-400);
+  --color-amber-500: var(--amber-500);
+  --color-amber-600: var(--amber-600);
+  --color-amber-700: var(--amber-700);
+  --color-amber-800: var(--amber-800);
+  --color-amber-900: var(--amber-900);
+  --color-amber-950: var(--amber-950);
+  --color-acid-0: var(--acid-0);
+  --color-acid-50: var(--acid-50);
+  --color-acid-100: var(--acid-100);
+  --color-acid-200: var(--acid-200);
+  --color-acid-300: var(--acid-300);
+  --color-acid-400: var(--acid-400);
+  --color-acid-500: var(--acid-500);
+  --color-acid-600: var(--acid-600);
+  --color-acid-700: var(--acid-700);
+  --color-acid-800: var(--acid-800);
+  --color-acid-900: var(--acid-900);
+  --color-acid-950: var(--acid-950);
+  --color-neutral-0: var(--neutral-0);
+  --color-neutral-50: var(--neutral-50);
+  --color-neutral-100: var(--neutral-100);
+  --color-neutral-200: var(--neutral-200);
+  --color-neutral-300: var(--neutral-300);
+  --color-neutral-400: var(--neutral-400);
+  --color-neutral-500: var(--neutral-500);
+  --color-neutral-600: var(--neutral-600);
+  --color-neutral-700: var(--neutral-700);
+  --color-neutral-800: var(--neutral-800);
+  --color-neutral-900: var(--neutral-900);
+  --color-neutral-950: var(--neutral-950);
+
+  --ui-color-forest-0: var(--forest-0);
+  --ui-color-forest-50: var(--forest-50);
+  --ui-color-forest-100: var(--forest-100);
+  --ui-color-forest-200: var(--forest-200);
+  --ui-color-forest-300: var(--forest-300);
+  --ui-color-forest-400: var(--forest-400);
+  --ui-color-forest-500: var(--forest-500);
+  --ui-color-forest-600: var(--forest-600);
+  --ui-color-forest-700: var(--forest-700);
+  --ui-color-forest-800: var(--forest-800);
+  --ui-color-forest-900: var(--forest-900);
+  --ui-color-forest-950: var(--forest-950);
+  --ui-forest: var(--forest-500);
+  --ui-color-maple-0: var(--maple-0);
+  --ui-color-maple-50: var(--maple-50);
+  --ui-color-maple-100: var(--maple-100);
+  --ui-color-maple-200: var(--maple-200);
+  --ui-color-maple-300: var(--maple-300);
+  --ui-color-maple-400: var(--maple-400);
+  --ui-color-maple-500: var(--maple-500);
+  --ui-color-maple-600: var(--maple-600);
+  --ui-color-maple-700: var(--maple-700);
+  --ui-color-maple-800: var(--maple-800);
+  --ui-color-maple-900: var(--maple-900);
+  --ui-color-maple-950: var(--maple-950);
+  --ui-maple: var(--maple-500);
+  --ui-color-river-0: var(--river-0);
+  --ui-color-river-50: var(--river-50);
+  --ui-color-river-100: var(--river-100);
+  --ui-color-river-200: var(--river-200);
+  --ui-color-river-300: var(--river-300);
+  --ui-color-river-400: var(--river-400);
+  --ui-color-river-500: var(--river-500);
+  --ui-color-river-600: var(--river-600);
+  --ui-color-river-700: var(--river-700);
+  --ui-color-river-800: var(--river-800);
+  --ui-color-river-900: var(--river-900);
+  --ui-color-river-950: var(--river-950);
+  --ui-river: var(--river-500);
+  --ui-color-warm-0: var(--warm-0);
+  --ui-color-warm-50: var(--warm-50);
+  --ui-color-warm-100: var(--warm-100);
+  --ui-color-warm-200: var(--warm-200);
+  --ui-color-warm-300: var(--warm-300);
+  --ui-color-warm-400: var(--warm-400);
+  --ui-color-warm-500: var(--warm-500);
+  --ui-color-warm-600: var(--warm-600);
+  --ui-color-warm-700: var(--warm-700);
+  --ui-color-warm-800: var(--warm-800);
+  --ui-color-warm-900: var(--warm-900);
+  --ui-color-warm-950: var(--warm-950);
+  --ui-warm: var(--warm-500);
+  --ui-color-acid-0: var(--acid-0);
+  --ui-color-acid-50: var(--acid-50);
+  --ui-color-acid-100: var(--acid-100);
+  --ui-color-acid-200: var(--acid-200);
+  --ui-color-acid-300: var(--acid-300);
+  --ui-color-acid-400: var(--acid-400);
+  --ui-color-acid-500: var(--acid-500);
+  --ui-color-acid-600: var(--acid-600);
+  --ui-color-acid-700: var(--acid-700);
+  --ui-color-acid-800: var(--acid-800);
+  --ui-color-acid-900: var(--acid-900);
+  --ui-color-acid-950: var(--acid-950);
+  --ui-acid: var(--acid-500);
+  --ui-color-neutral-0: var(--neutral-0);
+  --ui-color-neutral-50: var(--neutral-50);
+  --ui-color-neutral-100: var(--neutral-100);
+  --ui-color-neutral-200: var(--neutral-200);
+  --ui-color-neutral-300: var(--neutral-300);
+  --ui-color-neutral-400: var(--neutral-400);
+  --ui-color-neutral-500: var(--neutral-500);
+  --ui-color-neutral-600: var(--neutral-600);
+  --ui-color-neutral-700: var(--neutral-700);
+  --ui-color-neutral-800: var(--neutral-800);
+  --ui-color-neutral-900: var(--neutral-900);
+  --ui-color-neutral-950: var(--neutral-950);
+  --ui-neutral: var(--neutral-500);
+}
+
+
+/* Forest typography core — generated by scripts/type.ts (size ramp = Tailwind's default scale). Do not edit.
+   Parallels packages/tokens/scales/scales.css: a systematic ramp + named roles. Families resolve via the shared
+   @theme vars in packages/ui/src/styles/forest.css (--font-display / --font-sans / --font-mono). */
+:root {
+  /* size ramp = Tailwind's default font-size scale, named xs…7xl (md = 16px base). Namespaced so it
+     never collides with Tailwind's own --text-* scale. Use as var(--type-text-lg) etc. For real
+     text-<name> Tailwind utilities, import the opt-in packages/tokens/type/type.theme.css. */
+  --type-text-xs: 0.75rem;
+  --type-text-sm: 0.875rem;
+  --type-text-md: 1rem; /* md · base */
+  --type-text-lg: 1.125rem;
+  --type-text-xl: 1.25rem;
+  --type-text-2xl: 1.5rem;
+  --type-text-3xl: 1.875rem;
+  --type-text-4xl: 2.25rem;
+  --type-text-5xl: 3rem;
+  --type-text-6xl: 3.75rem;
+  --type-text-7xl: 4.5rem;
+  --type-text-8xl: 6rem;
+  --type-text-9xl: 8rem;
+
+  /* role bundles — size · leading · weight · tracking · family */
+  --type-display-size: 3rem;
+  --type-display-line-height: 1;
+  --type-display-weight: 900;
+  --type-display-tracking: 0.01em;
+  --type-display-family: var(--font-display);
+  --type-display-transform: uppercase;
+  --type-display-size-fluid: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
+  --type-headline-size: 1.875rem;
+  --type-headline-line-height: 1.1;
+  --type-headline-weight: 900;
+  --type-headline-tracking: 0.01em;
+  --type-headline-family: var(--font-display);
+  --type-headline-transform: uppercase;
+  --type-title-size: 1.5rem;
+  --type-title-line-height: 1.18;
+  --type-title-weight: 700;
+  --type-title-tracking: 0em;
+  --type-title-family: var(--font-sans);
+  --type-title-transform: none;
+  --type-heading-sm-size: 1.125rem;
+  --type-heading-sm-line-height: 1.3;
+  --type-heading-sm-weight: 700;
+  --type-heading-sm-tracking: 0em;
+  --type-heading-sm-family: var(--font-sans);
+  --type-heading-sm-transform: none;
+  --type-heading-xs-size: 1rem;
+  --type-heading-xs-line-height: 1.3;
+  --type-heading-xs-weight: 700;
+  --type-heading-xs-tracking: 0em;
+  --type-heading-xs-family: var(--font-sans);
+  --type-heading-xs-transform: none;
+  --type-subtitle-size: 1.125rem;
+  --type-subtitle-line-height: 1.5;
+  --type-subtitle-weight: 400;
+  --type-subtitle-tracking: 0em;
+  --type-subtitle-family: var(--font-sans);
+  --type-subtitle-transform: none;
+  --type-body-size: 1rem;
+  --type-body-line-height: 1.6;
+  --type-body-weight: 400;
+  --type-body-tracking: 0em;
+  --type-body-family: var(--font-sans);
+  --type-body-transform: none;
+  --type-body-sm-size: 0.875rem;
+  --type-body-sm-line-height: 1.5;
+  --type-body-sm-weight: 400;
+  --type-body-sm-tracking: 0em;
+  --type-body-sm-family: var(--font-sans);
+  --type-body-sm-transform: none;
+  --type-label-size: 0.875rem;
+  --type-label-line-height: 1.2;
+  --type-label-weight: 700;
+  --type-label-tracking: 0.01em;
+  --type-label-family: var(--font-sans);
+  --type-label-transform: none;
+  --type-caption-size: 0.75rem;
+  --type-caption-line-height: 1.4;
+  --type-caption-weight: 400;
+  --type-caption-tracking: 0em;
+  --type-caption-family: var(--font-sans);
+  --type-caption-transform: none;
+  --type-overline-size: 0.75rem;
+  --type-overline-line-height: 1.1;
+  --type-overline-weight: 700;
+  --type-overline-tracking: 0.08em;
+  --type-overline-family: var(--font-sans);
+  --type-overline-transform: uppercase;
+}
+
+/* role utility classes — set the whole bundle in one class (text-transform baked in for Mohr/overline) */
+.type-display {
+  font-family: var(--type-display-family);
+  font-size: var(--type-display-size);
+  line-height: var(--type-display-line-height);
+  font-weight: var(--type-display-weight);
+  letter-spacing: var(--type-display-tracking);
+  text-transform: var(--type-display-transform);
+}
+.type-headline {
+  font-family: var(--type-headline-family);
+  font-size: var(--type-headline-size);
+  line-height: var(--type-headline-line-height);
+  font-weight: var(--type-headline-weight);
+  letter-spacing: var(--type-headline-tracking);
+  text-transform: var(--type-headline-transform);
+}
+.type-title {
+  font-family: var(--type-title-family);
+  font-size: var(--type-title-size);
+  line-height: var(--type-title-line-height);
+  font-weight: var(--type-title-weight);
+  letter-spacing: var(--type-title-tracking);
+  text-transform: var(--type-title-transform);
+}
+.type-heading-sm {
+  font-family: var(--type-heading-sm-family);
+  font-size: var(--type-heading-sm-size);
+  line-height: var(--type-heading-sm-line-height);
+  font-weight: var(--type-heading-sm-weight);
+  letter-spacing: var(--type-heading-sm-tracking);
+  text-transform: var(--type-heading-sm-transform);
+}
+.type-heading-xs {
+  font-family: var(--type-heading-xs-family);
+  font-size: var(--type-heading-xs-size);
+  line-height: var(--type-heading-xs-line-height);
+  font-weight: var(--type-heading-xs-weight);
+  letter-spacing: var(--type-heading-xs-tracking);
+  text-transform: var(--type-heading-xs-transform);
+}
+.type-subtitle {
+  font-family: var(--type-subtitle-family);
+  font-size: var(--type-subtitle-size);
+  line-height: var(--type-subtitle-line-height);
+  font-weight: var(--type-subtitle-weight);
+  letter-spacing: var(--type-subtitle-tracking);
+  text-transform: var(--type-subtitle-transform);
+}
+.type-body {
+  font-family: var(--type-body-family);
+  font-size: var(--type-body-size);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--type-body-weight);
+  letter-spacing: var(--type-body-tracking);
+  text-transform: var(--type-body-transform);
+}
+.type-body-sm {
+  font-family: var(--type-body-sm-family);
+  font-size: var(--type-body-sm-size);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--type-body-sm-weight);
+  letter-spacing: var(--type-body-sm-tracking);
+  text-transform: var(--type-body-sm-transform);
+}
+.type-label {
+  font-family: var(--type-label-family);
+  font-size: var(--type-label-size);
+  line-height: var(--type-label-line-height);
+  font-weight: var(--type-label-weight);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
+}
+.type-caption {
+  font-family: var(--type-caption-family);
+  font-size: var(--type-caption-size);
+  line-height: var(--type-caption-line-height);
+  font-weight: var(--type-caption-weight);
+  letter-spacing: var(--type-caption-tracking);
+  text-transform: var(--type-caption-transform);
+}
+.type-overline {
+  font-family: var(--type-overline-family);
+  font-size: var(--type-overline-size);
+  line-height: var(--type-overline-line-height);
+  font-weight: var(--type-overline-weight);
+  letter-spacing: var(--type-overline-tracking);
+  text-transform: var(--type-overline-transform);
+}
+
+/* fluid display — marketing/hero: scales with the viewport up to the top of the ramp */
+.type-display--fluid {
+  font-size: var(--type-display-size-fluid);
+}
+
+/* treatments — orthogonal to size, compose onto any role. Family/figures, never a size. */
+.type-tabular {
+  /* Mohr ships no tnum feature — measured, its "1" is 13.01px against "0" at 23.66px (30px/700), and
+     font-variant-numeric moves neither. So aligned digits need the family too, not just the figure set:
+     --font-sans goes flat at 0 spread. Composing this onto a display role therefore swaps the family.
+     That is the trade — a metric that must align cannot be set in the display face. Note --font-sans
+     caps at 700, so a display role's 900 renders as bold here, lighter than an adjacent Mohr heading. */
+  font-family: var(--font-sans);
+  font-variant-numeric: tabular-nums; /* aligned digits: tables, metrics */
+  /* Display roles uppercase, which is correct for a heading and wrong for a measured value: unit
+     letters are case-significant, so "4m 12s" must not render as "4M 12S" (mega, siemens). */
+  text-transform: none;
+}
+.type-mono {
+  font-family: var(--font-mono); /* code, token names, hex, IDs at whatever size the role sets */
+  font-size: 0.875em; /* mono runs optically large; the shrink matches sans x-height at the same step */
+}
+
+/* bare <code>/<kbd>/<samp> default: Tailwind Preflight already sets font-family: var(--font-mono) at
+   1em, so this only adds the optical shrink — making a bare tag identical to .type-mono. <pre> keeps
+   its own size so Shiki code blocks are untouched. */
+@layer base {
+  code,
+  kbd,
+  samp {
+    font-size: 0.875em;
+  }
+  /* Inline <code> renders as a boxed chip — the system's inline-code treatment, distinct from the bare
+     .type-mono treatment (which is for data: hex, token names, numbers, never boxed). Use <code> for
+     actual code/syntax in prose. Shiki blocks (pre code) opt out below. box-decoration-break keeps the
+     box intact when inline code wraps across lines. */
+  :not(pre) > code {
+    background: var(--ui-bg-elevated);
+    border: 1px solid var(--ui-border-muted);
+    border-radius: 0.25rem;
+    padding: 0.05em 0.35em;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
+  }
+  pre code {
+    font-size: inherit;
+    background: none;
+    border: 0;
+    padding: 0;
+  }
+}
+
+
+/* Forest motion ladder — generated by scripts/motion.ts. Do not edit.
+
+   The source of truth for animation across the system, the same "name it once, derive everywhere"
+   model as --ui-radius. Components reference these via the (--motion-*) arbitrary shorthand
+   (e.g. duration-(--motion-base), ease-(--motion-ease-out)); nothing hard-codes a millisecond value or
+   a bezier curve. Documented at /foundations/motion.
+
+   This file is framework-agnostic — plain custom properties and one media query, no at-rules a bundler
+   has to understand — so a non-Tailwind surface (the Slidev deck theme runs UnoCSS) imports the same
+   ladder the product does instead of restating it. The Tailwind half lives in motion.theme.css.
+
+   DURATIONS — bucketed by element class, all ≤ 300 ms (the UI ceiling: past ~300 ms a control feels
+   sluggish rather than smooth). Forest sits on the snappy end of every bucket on purpose — a faster
+   animation reads as a faster app.
+     instant  press feedback, the keycap lift/press (state, not decoration)
+     fast     small / near elements — tooltips, input focus, card & slider feedback, overlay EXITS
+     base     overlays that scale in — popover, dropdown, menus, tabs indicator, switch
+     slow     larger travel — collapsible & accordion height, nav viewport resize, sidebar collapse, slideover panel, progress
+
+   EASINGS — strong CUSTOM curves. The built-in CSS easings (ease-out / ease-in) are too weak to read as
+   intentional, and ease-in is banned outright: it starts slow, which makes the interface feel unresponsive
+   at the exact moment the user is watching. Enter AND exit both use ease-out (exits just run shorter).
+     ease-out     the default — enters, exits, presses, colour fades
+     ease-in-out  on-screen movement that both accelerates and settles — tabs indicator, nav resize, the sidebar collapse
+     ease-drawer  iOS-style sheet/drawer curve (Ionic) — long, weighted pull for bottom sheets. Unreferenced by choice; vaul already ships this exact curve.
+
+   ★ ease-drawer is unreferenced BY CHOICE, and it costs nothing. MEASURED: UDrawer's sheet opens on a
+   keyframe animation from vaul's own injected stylesheet (`slideFromBottom`, 500ms,
+   cubic-bezier(0.32, 0.72, 0, 1)) — the identical curve this token names, so the shipped sheet already
+   runs it. Attaching the token would mean overriding animation-duration and animation-timing-function
+   against a four-attribute selector vaul owns, to arrive at the same motion. That 500ms sits past the
+   ≤300ms ceiling above; the ceiling is about controls, and a bottom sheet is a weighted pull (iOS ships
+   ~500ms too). It is animation, NOT transition: `transition-duration` on that element governs only the
+   drag-follow, so overriding it changes a real property and moves nothing.
+
+   REDUCED MOTION is handled below, once, for the whole system (WCAG 2.3.3). The token values themselves
+   stay unconditional — a component that wants to say something about its own reduced-motion behaviour
+   still writes `motion-reduce:` (the button keycap in themes/button.mechanics.ts does, so its lift/press
+   snaps while the colour step survives). But a per-component gate can only ever cover components Forest
+   overrides, and most motion in the app is stock: the skeleton pulse, indeterminate progress, the table
+   loader, vaul's drawer. A global floor covers those too, so it is the floor that carries the contract
+   and the per-component gates are the exception on top of it. */
+:root {
+  --motion-instant: 80ms;
+  --motion-fast: 140ms;
+  --motion-base: 180ms;
+  --motion-slow: 240ms;
+
+  /* DWELL — how long a pointer has to REST before a hover-only affordance appears, so a cursor crossing
+     the region on its way somewhere else never summons it. Not a duration and so not bound by the ≤300ms
+     ceiling above: the motion itself still runs at `fast`, this is only the wait before it starts. It is
+     one-way — the affordance leaves immediately, because a control that lingers after the pointer has
+     gone reads as stuck. */
+  --motion-dwell: 500ms;
+
+  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --motion-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* ── Reduced motion — the system-wide floor ────────────────────────────────────────────────────────
+   The contract from the doctrine above: fewer and gentler, NOT zero. WCAG 2.3.3 is about motion, not
+   about change, so this removes movement and keeps the colour and opacity fades that carry meaning.
+
+   Two deliberate choices, both load-bearing:
+
+   1. `animation-duration: 1ms` rather than `animation: none`. Reka drives overlay teardown off the
+      exit keyframe — a UPopover/UModal/UDropdown with `data-[state=closed]` unmounts when its
+      animation finishes — and a suppressed animation is the classic way to strand a closed overlay in
+      the DOM, invisible but still focusable. Measured on Reka 2.x here: BOTH forms tear down cleanly,
+      because its Presence primitive falls back to `animation-name: none`. 1ms is kept anyway — it does
+      not depend on that fallback staying, and it costs nothing. `animation-iteration-count: 1` is the
+      part that matters unconditionally: it stops the infinite loaders (skeleton pulse, indeterminate
+      progress, the table loading bar) from looping forever at 1ms.
+
+   2. `transition-property` is re-declared as an ALLOW-LIST of non-motion properties rather than
+      zeroing the duration. An element that was only transitioning `transform` is left with nothing to
+      transition, so it snaps; an element transitioning `background-color` keeps its fade at its own
+      duration. Zeroing the duration instead would have flattened both, which is the "zero" the
+      doctrine rules out.
+
+   ★ UNLAYERED, deliberately. Do not wrap this in `@layer`: for `!important` declarations the cascade
+      reverses layer order, so a layered `!important` beats an unlayered one. Wrapping the floor would
+      silently re-rank it against any layered `!important` a consumer ships.
+
+   This is the floor, and it covers what a per-component gate structurally cannot: stock motion Forest
+   never overrides. Components may still add their own `motion-reduce:` where they want to say
+   something more specific — the button keycap does. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-delay: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-property:
+      color, background-color, border-color, outline-color, text-decoration-color, fill, stroke,
+      opacity, box-shadow !important;
+  }
+
+  html {
+    scroll-behavior: auto !important;
+  }
+}
+
+
+/* Forest motion — the Tailwind v4 half — generated by scripts/motion.ts. Do not edit.
+
+   A bare `transition` (no duration, no easing) is the single most common motion utility in the stock
+   recipes — the hover affordance on a card, a calendar cell, a rating star. Left alone it runs on
+   Tailwind's own defaults, 150ms and the weak built-in `ease`, which is a hard-coded value the
+   doctrine in motion.css doesn't reach. Re-pointing the two Tailwind defaults at the tokens brings every
+   undurationed `transition` onto the ladder at once, so a component only needs an explicit
+   duration-/ease- pair when it wants something OTHER than the near-element default.
+
+   ★ Import this WITH motion.css, not instead of it — the values it points at are declared there. And
+   unlike type.theme.css this one is not optional: dropping it does not remove a convenience, it hands
+   every bare `transition` in the framework back to Tailwind's 150ms/`ease`. */
+@theme {
+  --default-transition-duration: var(--motion-fast);
+  --default-transition-timing-function: var(--motion-ease-out);
+}
+
+
+/* Forest brand layer for Nuxt UI — the NON-colour brand config: fonts, radius, the coarse variant.
+   The colour ramps are owned by the engine: packages/tokens/scales/ramps.css emits the --<family>-* values and
+   packages/tokens/scales/theme.css registers them as Tailwind/Nuxt UI colours (--color-<family>-*). Do not add
+   a colour ramp here — it would shadow the generated one and drift (this file used to, and did).
+   Import order in an app: tailwindcss → @nuxt/ui → @humanforest/fonts → ramps.css → theme.css → this file. */
+
+/* Brand fonts. GT Haptik for everything; Mohr (display) for headings via .font-display;
+   JetBrains Mono (self-hosted in @humanforest/fonts) for code/tokens. */
+@theme {
+  --font-sans: 'GT Haptik', system-ui, sans-serif;
+  --font-display: 'MohrAlt', 'GT Haptik', system-ui, sans-serif;
+  /* The italic display cut, named so a theme fragment never has to spell the family out. It is a
+     token of its own rather than a re-point of --font-display, because that re-point is keyed on
+     the .forest-context-mobile CLASS (below) and only ForestContext stamps it: a fragment reading
+     var(--font-display) resolves to the UPRIGHT cut anywhere the class is absent, which is how
+     mobile would quietly render marketing's face. This one always means the italic cut. */
+  --font-display-italic: 'Mohr-BlackIt', 'GT Haptik', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Two-weight system: every family ships regular + bold only (Mohr is display-black 900). No 500
+     or 600 cut exists, so font-medium and font-semibold resolve to the same faces as normal/bold —
+     these re-maps make the tokens say so, and keep the fallback stack (which HAS real 500/600
+     cuts) from flashing a weight the brand fonts can't render during font-display: swap. */
+  --font-weight-medium: 400;
+  --font-weight-semibold: 700;
+}
+
+/* Forest reads softer than Nuxt UI's default sharp radius — base bumped 0.25→0.5rem. This is the
+   only lever: the rounded-* utilities inline calc(var(--ui-radius) * N) at build, so the whole scale
+   derives from this one var. Per-:root --radius-* overrides are NOT read by the utilities (an
+   @theme override is the only way to bend an individual step). */
+:root {
+  --ui-radius: 0.5rem;
+}
+
+/* The header band. Stock is 4rem; Forest runs 3rem, which clears the 32px control it holds with 8px
+   either side.
+   ★ It is not only a height. UDashboardNavbar root, UDashboardSidebar header and UHeader root +
+   container take it as a box; USidebar, UModal and USlideover headers take it as a floor; UMain and
+   UError subtract it from the viewport; UPageAside and ProseH1–H4 read it as a sticky offset and a
+   scroll margin. Thirteen recipes in all, so the value also decides where an anchored heading rests. */
+:root {
+  --ui-header-height: 3rem;
+}
+
+/* ── The well ──────────────────────────────────────────────────────────────────────────────────────
+   The WELL is the capped, centred content column — UContainer — and it is the only thing in the
+   system that caps page width. A page never sets max-w-*. See LAYOUT-SPEC.md.
+
+   `--ui-container` (Nuxt UI's own token, 80rem) is the lever, exactly as --ui-radius is for radius:
+   one var, everything derives. UContainer reads it, so using UContainer IS the fix for a shell that
+   would otherwise be uncapped.
+
+   ★ SCOPE OF THAT CLAIM. None of the DASHBOARD primitives consume --ui-container, which is why an app
+   shell is uncapped by default. The PAGE-CHROME family is the opposite: UHeader, UFooter, UBanner,
+   UPageHero, UPageSection and UPageCTA each embed a UContainer of their own, so they self-cap and
+   nesting one inside a well double-applies the gutters. There are also two further width mechanisms
+   that have nothing to do with this token — USidebar declares its own --sidebar-width (16rem, fixed
+   positioning) and UDashboardSidebar negotiates a PERCENTAGE with its group (default 15, persisted).
+   The well is the only cap a PAGE sets; it is not the only cap in the system. /layout/well carries
+   the register.
+
+   THREE RUNGS, by what the content is:
+     .well-reading  46rem — a single column of prose or one form. The reading measure.
+     (default)      80rem — the working surface: lists, detail, settings, mixed content
+     .well-full     uncapped — maps, boards, timelines, canvases only
+     .well-flush    drops the gutters, opt-in ON TOP of well-full
+
+   The rungs are named for content, not density, because density does not predict a width. There is
+   deliberately no rung above `working`: no measured cap supports one. Every cap anyone publishes sits
+   BELOW it — Vercel's Geist works at 1200px, Notion at 720px, and Forest's own shipped product layout
+   caps at 48rem — and caps track product class and column count rather than a house maximum.
+
+   Releasing the cap and removing the gutters are separate levers, matching the two systems that
+   publish theirs: Primer's containerWidth="full" leaves padding alone (a separate `padding` prop
+   owns it), and Carbon's .cds--grid--full-width is defined solely as max-inline-size: 100%. So most
+   `full` content keeps its gutters; only content that must touch the panel edge adds .well-flush. */
+:root {
+  --forest-well-reading: 46rem;
+}
+
+@utility well-reading {
+  --ui-container: var(--forest-well-reading);
+}
+@utility well-full {
+  --ui-container: 100%;
+}
+
+/* well-flush is NOT an @utility, deliberately. It has to beat UContainer's own gutters
+   (px-4 sm:px-6 lg:px-8), and those live in Tailwind's `utilities` layer inside media queries — a
+   same-layer rule loses to them on position no matter how it's written. Unlayered CSS outranks every
+   layer, so a plain rule wins cleanly and no !important is needed. It also reads correctly: this is a
+   deliberate opt-out of a component's padding, not another utility competing with it. */
+.well-flush {
+  padding-inline: 0;
+}
+
+/* ── The canvas HUD ────────────────────────────────────────────────────────────────────────────────
+   The second layout pattern: chrome OVER a full-bleed canvas (map, camera) rather than around
+   content. The canvas reaches the physical edge and runs under the status bar; chrome never does.
+
+   Safe area is chrome's problem, and it arrives two ways. A real device reports it through
+   `env(safe-area-inset-*)`. A device MOCK — an SVG phone drawn inside a desktop page — has no notch
+   for the browser to report, so the frame supplies measured numbers by setting these vars on the
+   screen element. One read order covers both: the var wins where a frame set it, `env()` elsewhere.
+   No `isDocs` branch, and the shipped component is the same component in either place.
+
+   Left as `initial` rather than 0 so the `env()` fallback is what actually resolves off a device;
+   a var declared here as a length would shadow it everywhere. */
+:root {
+  --forest-chrome-gutter: 1rem; /* inset between chrome and the safe edge — never the canvas's */
+  /* The gutter the dashboard panel floats in — its own margin (themes/dashboard-panel.ts) and the
+     app shell's bands both read it, so a band's edges track the card's rather than restating a
+     number that has to agree. */
+  --forest-panel-inset: 1rem;
+  /* ONE CONTROL — a FAB, a square icon button. The canvas HUD's areas are all measured in these rather
+     than in hand-picked heights, so a diagram of the shell derives from the shell.
+
+     ★ IT IS NOT ONE SIZE, because it is not one job. 2.75rem is the TOUCH target floor (44px), and on a
+     pointer surface it reads as oversized against every map tool a console operator has used — Mapbox's
+     own control measures 32px, Apple's about 30. 2.25rem (36px) is the pointer size: comfortably past
+     the 24px WCAG 2.2 minimum, and in the band the market actually uses.
+
+     ★ TWO signals raise it, and both are needed. `pointer: coarse` catches a real touch device. The
+     mobile CONTEXT catches a phone rendered on a desktop — a device mock in these docs has a fine
+     pointer and would otherwise draw thumb controls at desk size. Neither alone is sufficient; that
+     distinction is the one the contexts layer exists to make. */
+  --forest-canvas-control: 2.25rem;
+  /* ★ Reserved for the BASEMAP, not for taste. Mapbox's terms require its wordmark (bottom-left) and
+     its attribution (bottom-right) to stay visible, so the whole bottom strip of a map canvas belongs
+     to the basemap and no chrome may float over it. 0 by default — a camera or a board canvas owes
+     nothing — and the canvas HUD adds it to its bottom inset when a surface sets it. */
+  --forest-canvas-basemap-strip: 0px;
+  /* ★ The chrome fill, NAMED. The utility below reads it, and so does anything that has to restate the
+     surface under a variant — a disabled control, whose recipe sets its own `disabled:bg-*` and wins on
+     source order, so it must be handed this value rather than a second copy of the colour-mix. */
+  --forest-canvas-chrome-fill: color-mix(in oklab, var(--ui-bg) 85%, transparent);
+  /* ★ The DISABLED chrome fill. A dimmed glyph alone was not enough — measured, a switched-off control
+     still read as pressable because its surface was identical to a live one. This moves the surface
+     itself toward the middle: `--ui-bg-elevated` is greyer than the base in light and lighter than it in
+     dark, so the tile recedes in BOTH modes without either becoming a different hue. Same 85% and the
+     same blur, so it stays the same MATERIAL — a quieter instance of it, not another object. */
+  --forest-canvas-chrome-fill-disabled: color-mix(in oklab, var(--ui-bg-elevated) 85%, transparent);
+}
+
+/* The touch floor, from either signal — a real coarse pointer, or a surface declaring itself a phone. */
+@media (pointer: coarse) {
+  :root {
+    --forest-canvas-control: 2.75rem;
+  }
+}
+:where(.forest-context-mobile) {
+  --forest-canvas-control: 2.75rem;
+}
+
+/* ── CHROME OVER A CANVAS ──────────────────────────────────────────────────────────────────────────
+   The surface every piece of chrome takes when it floats ON a canvas rather than beside it — a HUD
+   panel, a control cluster, a filter column, a legend. It is one treatment because it answers one
+   question, and the answer has to be the same everywhere it is asked: how much of the map does the
+   operator keep while something sits on top of it?
+
+   Semi-opaque rather than solid, so the canvas underneath stays legible as CONTEXT — the thing being
+   filtered, measured or dispatched is still visible through its own controls. Blurred rather than
+   merely translucent, because a basemap is high-frequency: street lines and labels read straight
+   through a flat 85% fill and turn the text on top of it to noise. The blur is what buys the
+   translucency its legibility, so the two ship together or not at all.
+
+   85%, one value. It was authored five ways (80, 85, 90 × two blur radii) before this existed, which
+   is exactly the drift a shared treatment removes: chrome on one map read differently from chrome on
+   the next with nothing naming the difference.
+
+   ★ An @utility, not a plain class, so ordinary utilities still beat it — `hover:bg-default` on a
+   pressable HUD tile has to win, and a plain class outside the utilities layer would take that away
+   (the reason `well-flush` above is deliberately NOT an @utility is the mirror image of this one).
+
+   ★ NEVER ON A CONTROL THAT CARRIES ITS OWN SOLID FILL. This replaces background-color, so on a solid
+   button it removes the very fill the label colour was chosen against and leaves that ink sitting on a
+   translucent surface — unreadable in both modes (a primary FAB on the canvas specimen shipped exactly
+   that). Solid controls are already opaque over a basemap and need nothing from this; it is for the
+   neutral, outline and ghost chrome whose surface would otherwise be a flat card over a moving map.
+
+   ★ color-mix at the ELEMENT, not a var precomputed on :root. --ui-bg re-points inside .light/.dark
+   islands — a browser frame drawing a dark screen inside a light page is one — and a derived value
+   computed once at the root would stay the outer mode's colour inside them. */
+@utility forest-canvas-chrome {
+  /* ★ Read through VARS so a parent can switch the surface off on its children. A merged control group
+     draws ONE surface and needs its members bare, and it cannot win that by selector: this rule is
+     doubled (below), so a child selector on the group loses to it. Declaring the var on the child wins
+     without any specificity contest, because it is the same rule reading a different value. The
+     defaults are the surface itself, so an unqualified use is unchanged. */
+  /* ★ Doubled selector, for a fight a single class loses. Chrome over a canvas is often a COMPONENT —
+     a UBadge, a UButton — whose own recipe already ships `bg-default`, and that recipe's utility sits
+     later in the same layer, so a one-class rule here is overruled and the tile renders opaque
+     (measured: the HUD's badges lost their translucency to exactly this). Two classes outrank it.
+     Variants still win, which is the point of staying in the utilities layer: `hover:bg-default` is
+     class + pseudo-class, the same specificity, and Tailwind emits variants after base utilities. */
+  &.forest-canvas-chrome {
+    background-color: var(--forest-canvas-chrome-fill);
+    -webkit-backdrop-filter: var(--forest-canvas-chrome-blur, blur(12px));
+    backdrop-filter: var(--forest-canvas-chrome-blur, blur(12px));
+  }
+}
+
+/* ── CANVAS SHELL · THE SURFACE REFLOW ─────────────────────────────────────────────────────────────
+   FCanvasHud adapts to the width of its own container, so ONE instance is correct on a phone
+   browser and on a console. Two things change together, and they have to:
+
+     narrow   top rails 9rem (a card), bottom rails one control wide (a FAB strip) sitting ABOVE a
+              full-width dock — the only place a rail can go above a CTA that spans the thumb zone.
+     wide     top rails 17rem and bottom rails 19rem (panels), and the bottom band mirrors the top
+              one: rails in the CORNERS with the dock between them, because a centred dock leaves
+              those corners free and a detail panel belongs in one.
+
+   ★ CONTAINER queries, not media queries. The shell is often NOT the viewport: on the console it is
+   the interior of an inset dashboard panel, several hundred pixels narrower than the window and
+   narrower again when the sidebar expands. A media query would reflow it on the wrong measurement.
+   The shell's root declares `container: forest-canvas / inline-size`.
+
+   ★ The threshold is a LITERAL 60rem and cannot be a token: a container query condition may not read
+   a custom property. 60rem is where the wide arrangement starts to fit — two 19rem rails are 38rem of
+   it, and below that the dock has no room left between them.
+
+   Pinning: `[data-surface]` overrides the query in both directions, for a specimen that has to draw a
+   given surface regardless of how wide it happens to be rendered.
+
+   ★ THESE ARE THE ONLY COPIES of the rail measures. The component applies them as `var(...)` rather than as
+   JS values, a diagram sizes its chips from the same properties, and documentation reads them back off a
+   hidden probe instead of restating them — so changing a number here changes it everywhere it is claimed. */
+.forest-hud {
+  /* Ceiling on a rail, not its width. A rail HUGS its control — `fit-content(cap)` sizes to content
+     and stops here — so a 36px button leaves 36px and the hub keeps the rest. A fixed track left a
+     control floating in dead space, and the card beside it indented by space nothing occupied. The
+     cap still earns its keep: an oversized child clamps here instead of starving the hub. */
+  --forest-canvas-rail-max: 9rem;
+  /* The card measure. This is the number the top rails used to carry, moved to the areas that hold
+     cards — which is the whole point of splitting the two. Inert on a phone, where the card spans the
+     measure between its band's rails instead. */
+  --forest-canvas-card: 9rem;
+  /* Ceiling on a band's height: half the canvas, so a card in each band still leaves the map its middle.
+     `cqh` against the chrome layer's size container, like the bottom rail's ceiling. */
+  --forest-canvas-card-max: 50cqh;
+}
+
+/* ★ ONE GRID PER BAND, not one for the HUD.
+   A single grid means one set of columns for the whole chrome layer, and every coupling that caused
+   came with it: an empty top rail could not free its column because the BOTTOM rail was holding it
+   open; a card in each band was pinned to the same track whatever its band wanted. Bands sized
+   independently have none of it, and nothing outside a band can move what is inside it. */
+.forest-hud-band {
+  display: grid;
+  grid-template-columns:
+    fit-content(var(--forest-canvas-rail-max))
+    fit-content(var(--forest-canvas-card))
+    minmax(0, 1fr)
+    fit-content(var(--forest-canvas-card))
+    fit-content(var(--forest-canvas-rail-max));
+  /* Top band: everything hangs from the top edge, so a short control sits level with a tall card's
+     top rather than dangling at its bottom. The bottom band flips this — see --dock. */
+  align-items: start;
+  pointer-events: none;
+  /* ★ THE CAP IS ON THE TRACK, NOT ON THE ITEM. A `max-height` on a grid item clamps what it PAINTS and
+     nothing else: the auto row still sizes to the item's content, so a 2000px card left the area drawn at
+     its 383px ceiling inside a 2116px band, and the band pushed the dock out of the layer exactly as if
+     there were no cap at all.
+     `fit-content(cap)` and not `minmax(0, cap)`: a fixed `0` minimum makes the base size 0 and the track
+     resolves to its growth limit, so a band holding a 165px rail claimed the whole half and starved the
+     other band of the room it was owed. fit-content is content-sized up to the cap — which is the rule
+     being stated. It only binds because the card area carries `min-height: 0`; without it the scroll
+     wrapper's min-content contribution is the card's full height and no track can clamp below it. */
+  grid-template-rows: fit-content(var(--forest-canvas-card-max));
+  /* ★ THE TOP BAND YIELDS, THE BOTTOM ONE NEVER DOES. Half a canvas per band plus the hub row plus the
+     dock is more than a canvas, so something has to give, and it is never the primary action. */
+  min-height: 0;
+}
+
+/* The card fills the measure between its band's rails on a phone; on a console it takes its own
+   track and stops at the card measure. `fit-content` is what lets the unused card track collapse to
+   nothing rather than claim width — and it cannot be wrapped in `minmax()`, which is not valid and
+   silently drops the whole declaration to `auto`. */
+.forest-hud-card {
+  grid-column: 2 / 5;
+}
+
+/* The dock rides its own full-width row under the band on a phone, so the rails sit on its top edge.
+   `end` here and `start` on the base: the bottom band grows UPWARD from the dock, so a short control
+   sits level with a tall card's BOTTOM. */
+.forest-hud-band--dock {
+  grid-template-rows: fit-content(var(--forest-canvas-card-max)) auto;
+  align-items: end;
+  flex-shrink: 0;
+}
+.forest-hud-dock {
+  grid-row: 2;
+  grid-column: 1 / -1;
+}
+
+@container forest-canvas (min-width: 60rem) {
+  .forest-hud:not([data-surface='phone']) {
+    --forest-canvas-rail-max: 17rem;
+    /* ★ A PROPORTION, not a measure, and only where the card takes a track of its own. A third across
+       and a half down is the card's shape wherever the canvas is; a fixed 17rem was a third of one
+       particular panel and a different share of every other. It lands within 10px of the number it
+       replaces at a typical console width, and keeps that share when the panel is not typical.
+       `cqi` against the chrome layer, matching the `cqh` the height ceiling already uses. */
+    --forest-canvas-card: calc(100cqi / 3);
+  }
+  .forest-hud:not([data-surface='phone']) .forest-hud-card--start {
+    grid-column: 2 / 3;
+  }
+  .forest-hud:not([data-surface='phone']) .forest-hud-card--end {
+    grid-column: 4 / 5;
+  }
+  /* Console: the dock joins the band's single row, spanning it so it centres on the CANVAS rather
+     than on whatever the rails and cards left over. */
+  .forest-hud:not([data-surface='phone']) .forest-hud-band--dock {
+    grid-template-rows: fit-content(var(--forest-canvas-card-max));
+  }
+  .forest-hud:not([data-surface='phone']) .forest-hud-dock {
+    grid-row: 1;
+  }
+}
+
+.forest-hud[data-surface='web'] {
+  --forest-canvas-rail-max: 17rem;
+  --forest-canvas-card: calc(100cqi / 3);
+}
+.forest-hud[data-surface='web'] .forest-hud-card--start {
+  grid-column: 2 / 3;
+}
+.forest-hud[data-surface='web'] .forest-hud-card--end {
+  grid-column: 4 / 5;
+}
+.forest-hud[data-surface='web'] .forest-hud-band--dock {
+  grid-template-rows: fit-content(var(--forest-canvas-card-max));
+}
+.forest-hud[data-surface='web'] .forest-hud-dock {
+  grid-row: 1;
+}
+
+/* Kill Nuxt UI's pure-white literals so EVERY surface/text/border rides the warm Forest neutral ramp
+   (neutral-0 = #FEFBFC, a hair warm) instead of flat #fff. Nuxt hardcodes white on the max-contrast /
+   inverted slots; we redirect each to neutral-0. Light and dark hit different tokens (white lands on
+   different slots per mode). The mid-range tokens already derive from --ui-color-neutral-* — untouched.
+   Note: dark bg-default stays Nuxt's neutral-900 (the card) so it lifts off the neutral-950 shell. */
+:root:not(.dark), .light {
+  --ui-bg: var(--ui-color-neutral-0);            /* page/card base — was pure white */
+  --ui-text-inverted: var(--ui-color-neutral-0); /* text on inverted surfaces — was pure white */
+}
+
+.dark {
+  --ui-bg-inverted: var(--ui-color-neutral-0);        /* inverted surface (solid tooltips/cards) */
+  --ui-text-highlighted: var(--ui-color-neutral-0);   /* strongest text (headings) — was pure white */
+  --ui-border-inverted: var(--ui-color-neutral-0);    /* border on inverted surfaces — was pure white */
+}
+
+/* ── Card nesting — depth-stepped surface + concentric corners ─────────────────────────────────────
+   Drives `.forest-card` (set on UCard's root by forest-preset; soft/subtle fill from --forest-card-bg).
+   The neutral SURFACE ramp is compressed (in dark bg-muted == bg-elevated), so translucent fills can't
+   separate nested cards. Instead each nesting level steps one NEUTRAL-RAMP level — the standard surface
+   ladder (Material 3 surface-containers · Apple system-background levels · Radix gray 1/2/3): surfaces
+   step AWAY from the page — light DARKER, dark LIGHTER. Corners stay concentric: nested radius =
+   parent radius − padding, floored at 8px (std 24→8, held · mkt/mobile 32→16→8 — a larger outer
+   radius buys one more step). Capped at 3 levels (deeper reuses L3). Scoped to `.forest-card`
+   so it can't leak into other components' data-slot=root. Coupled to Nuxt UI's card DOM by design. */
+:root {
+  --forest-card-pad: 1rem;      /* p-4 — the inset between a card and its nested child */
+  --forest-card-radius: 1.5rem; /* xl / 24px — outer radius, the base for the concentric calc */
+  --forest-drawer-radius: 1.5rem; /* drawer edge radius — xl/24 standard; mobile/marketing → 2rem */
+}
+/* Drawer edge radius per context: mobile + marketing round to 2xl/32. Set on the context MARKER CLASS
+   (forest-context-*, stamped by ForestContext.vue on the same wrapper as the diagnostic data-context
+   attr) so it INHERITS down into the drawer content (which reads rounded-*-[var(--forest-drawer-radius)]).
+   The var route, not a slot class: the radius lives in the preset's compoundVariants (stock sets it
+   there per direction+inset, beating any base slot), and a context UTheme can only add slots.
+   The marker class is the sanctioned hook here; data-context stays diagnostic-only (test-asserted). */
+:where(.forest-context-mobile, .forest-context-marketing) { --forest-drawer-radius: 2rem; }
+/* Mobile's display face is Mohr-BlackIt — the italic, always-uppercase cut, licensed for THIS context
+   only (web/marketing keep upright MohrAlt). Rather than make every author remember the swap, the
+   context re-points --font-display, so the plain `font-display` utility (and anything else reading the
+   token) resolves to the italic cut inside a mobile subtree. Family rides the var; slant and case
+   can't, so they're pinned on the utility itself — Mohr is ALWAYS uppercase, the two travel together.
+   Scoped to the context MARKER CLASS, which reaches portaled Reka content the way a theme slot can't. */
+.forest-context-mobile {
+  --font-display: 'Mohr-BlackIt', 'GT Haptik', system-ui, sans-serif;
+}
+:where(.forest-context-mobile) .font-display {
+  font-style: italic;
+  text-transform: uppercase;
+}
+/* Mobile + marketing drawer: roomier horizontal padding (24px vs the standard 16px p-4). Vertical
+   stays. One CSS rule on the context marker class rather than the same container slot restated in
+   both context themes. */
+:where(.forest-context-mobile, .forest-context-marketing) [data-vaul-drawer] [data-slot="container"] {
+  padding-inline: 1.5rem;
+}
+/* Level surfaces = the page mixed with a little ink, in small EVEN steps (5/10/15 %). color-mix
+   paints for background (unlike box-shadow, where the ring must stay rgb). Auto mode-aware: both
+   --ui-bg and --ui-text-highlighted flip by mode (light = page + a little black; dark = page + a
+   little white). Small even steps keep surfaces close to the page so text contrast holds even at
+   L3 — the neutral ramp's uneven 100→200 jump drifted too far toward mid-grey.
+   Declared on EVERY mode-boundary selector (:root, .light, .dark), NOT just :root: the formula
+   derives from --ui-bg/--ui-text-highlighted, and a custom property computes ONCE where it's declared
+   then inherits that fixed colour. On :root alone, a nested force-light island (marketing) or
+   force-dark island re-lights --ui-bg but inherits :root's already-resolved surface — so a .light
+   marketing card stayed DARK on a dark page. Re-declaring here makes the island recompute with its
+   own --ui-bg. */
+:root, .light, .dark {
+  --forest-card-l1: color-mix(in oklab, var(--ui-bg), var(--ui-text-highlighted) 3%);
+  --forest-card-l2: color-mix(in oklab, var(--ui-bg), var(--ui-text-highlighted) 8%);
+  --forest-card-l3: color-mix(in oklab, var(--ui-bg), var(--ui-text-highlighted) 13%);
+}
+/* Map — WHICH PALETTE OWNS WHICH REGION (José, 2026-07-26). Two rules, and they do not overlap:
+     the DISC and the BADGE take the VIVID set (plus neutrals). They are categorical: they say WHICH
+       kind of thing this is, and vivid separates further than the CVD-gated set does at marker size.
+     the RING and the DOT take SEMANTIC colours. They say how BAD something is — charge and
+       connectivity — so they must move with --ui-warning / --ui-error / --ui-success like every other
+       warning in the system.
+   Aliased here rather than used raw: `--dataviz-categorical-vivid-*` names a position in a chart palette,
+   which tells a layer nothing about meaning, and re-pointing one would mean editing every call site.
+   ⚠ Measured against the real resolved tokens (canvas readback, both modes). Two collisions are live and
+   accepted — see MAPS-SPEC, "accepted collisions": functional-disc vs the high-charge ring (ΔE 17 light / 24 dark, so the
+   border goes quiet on a charged functional bike), and damage-disc vs the critical ring and the offline dot
+   (ΔE 7 in dark — same red; the dot's own outline is what keeps it readable). */
+:root {
+  --forest-map-functional: var(--dataviz-categorical-vivid-green);
+  --forest-map-damage: var(--dataviz-categorical-vivid-red);
+  /* ⚠ AMBER, AND THE RING OWNS AMBER (José, 2026-07-26, with the numbers in front of him). Measured against
+     --ui-warning: ΔE 9 light / 15 dark. A hold-family vehicle on a LOW charge therefore reads as ONE amber
+     shape — the ring merges into the disc and the charge signal is lost on that group. This is a deliberate
+     accepted collision, not an oversight; `pink` (ΔE 37) was the measured alternative and was declined. */
+  --forest-map-hold: var(--dataviz-categorical-vivid-amber);
+  --forest-map-lost: var(--dataviz-categorical-vivid-purple);
+  /* `parked` is the one disc that is NOT vivid: off the street, accounted for, nobody looking for it — and a
+     categorical palette has no neutral. Its OWN token rather than `--ui-text-dimmed`, which is tuned for type
+     on a page: a disc is a surface carrying a glyph, and borrowing a text role tied it to a paragraph
+     decision. The step flips by mode because the ramp does not, and a 500 grey that reads as inert on a light
+     basemap disappears into a dark one. */
+  /* `parked` is inventory — off the street and accounted for — and it takes SKY rather than the old neutral:
+     with six groups the neutral was the only one that did not look like a decision. */
+  --forest-map-parked: var(--dataviz-categorical-vivid-sky);
+  /* ★ `retired` is its OWN group and its own value: the inverted colour, so a dead vehicle is the one mark that
+     is not a hue at all. It flips with the mode, which is the point — it stays maximally separated from the page
+     in both. ⚠ ΔE 0 against the locked pause mark, which is also the inverted colour; harmless only because a
+     retired vehicle cannot be on a rental. */
+  --forest-map-retired: var(--ui-bg-inverted);
+  /* ★ A PLACE'S COLOUR IS ITS CONDITION, NOT ITS KIND (José). The glyph says what it is — the Mohr P, or a
+     house — and the colour says what state it is in. A condition is a SEVERITY, so it takes semantic roles for
+     the same reason the battery ring does, and colour-by-kind was making the colour and the glyph say the same
+     thing twice with nowhere left to put "suspended".
+     ★ It also keeps the two palettes apart by construction: vehicle discs are CATEGORICAL and take the vivid
+     set; place squares are SEVERITY and take these. Before this, sky was both a bay and a `parked` vehicle. */
+  /* ★ A WAREHOUSE IS OFF THE SEVERITY SCALE, not at the good end of it (José). It takes the inverted colour,
+     which is not a semantic role at all — so it does not claim a condition it cannot have. Same move as
+     `retired` on the vehicle disc: the one value that is not a hue is how the set says "this is not on the
+     scale the others are on". A bay's colour is its condition; a warehouse's colour says it has none. */
+  --forest-map-warehouse: var(--ui-bg-inverted);
+  --forest-map-place-ok: var(--ui-info);
+  --forest-map-place-suspended: var(--ui-warning);
+  --forest-map-place-removed: var(--ui-error);
+  /* Badges: measured as the two vivid hues furthest from everything already on the mark — sky is 46/49
+     from the nearest disc and 92/98 from the ring; pink is 37/38 and 37/42. */
+  /* ⚠ The badge has NO tokens of its own any more. It draws from the vivid set plus the inverted colour, by
+     name, through BADGE_COLOURS in map/vehicle.ts — five `--forest-map-badge-N` aliases named positions in a
+     palette rather than meanings, and three of them pointed outside the categorical set entirely. */
+
+  /* IN USE — the rental axis, and the only disc that is a GRADIENT. Vivid amber into vivid green: chosen by
+     searching 824 ramp pairs on the WORST distance to everything else on the mark (five discs, three ring
+     bands), where this pair scores ΔE 42.7 against a floor of 33. The winners are all OLIVE means, because
+     an olive sits between the green cluster and the amber/red ring cluster — a position no pure green and no
+     pure warm can hold at once.
+     ⚠ Brightness here is capped by the GLYPH, not by the palette: the pine is painted in the background
+     colour, so above roughly L 60 the disc's mean drops under 3:1 against it and the mark reads as a blank
+     chip with a ghost in it. This pair sits at L 54.7 / 3.70.
+     ★ VERIFIED on the published style (mapbox-gl 3.24.1): the gradient renders and substitution reaches
+     stop-color. -inuse-flat is now an OPTION rather than a fallback — point BOTH stops at it for a flat
+     in-use disc, which measures better on separation (44.7) and changes nothing else. */
+  --forest-map-inuse-from: var(--dataviz-categorical-vivid-amber);
+  --forest-map-inuse-to: var(--dataviz-categorical-vivid-green);
+  --forest-map-inuse-flat: var(--acid-700);
+
+  /* The pause mark a locked rental puts in the bottom-right corner. INK: the rental axis is neither a
+     category among the state groups nor a severity, so it takes neither palette — and ink is the strongest
+     value against every disc colour, including the gradient it sits on. */
+  --forest-map-locked: var(--ui-bg-inverted);
+}
+
+
+/* Zones — a region, not a mark, so these are a FILL plus a LINE (see map/zone.ts).
+   ★ The fill is faint by design: a zone covers a large part of the screen, and the vehicles inside it are
+   what the map is for. The LINE carries the boundary, which is the part an operator actually reads —
+   "where does the rule stop" — so it takes the saturated value and the fill takes 10–12% alpha of it.
+   ★ COLOUR IS WHAT THE RULE DOES TO A RENTAL (José, 2026-07-26), and it is a SEVERITY, so it takes the
+   semantic roles rather than the categorical set. Green permits, amber limits, red forbids. Riding is not
+   the axis — parking is: a low-speed zone limits the ride and leaves parking alone, which is why it is
+   amber and not red.
+   ★ The BUSINESS ZONE IS INK, not a hue. It is the container every other zone nests in, and it makes no
+   claim about behaviour inside itself — the map is the service area, and its line is where the service
+   stops. Ink flips with the mode, so the outermost boundary stays maximally separated from the page in
+   both. Same move as `retired` on the vehicle disc and `warehouse` on the place square.
+   ★ The EXCLUSION IS GREEN, and green is correct rather than ironic: the pocket PERMITS parking inside a
+   zone that forbids it. It is dashed and operations-only, so it cannot be read as a business boundary.
+   ★ The EVENT ZONE IS PINK — next to red in hue, because an event zone IS a no-parking zone, and one step
+   away from it, because it is temporary. The dash carries the schedule; the hue carries the kinship. Blue
+   was the alternative and was declined: it reads permissive, and this zone forbids.
+   ⚠ Three of these are spoken for elsewhere on a map: --ui-warning is a hold-family disc and a low charge,
+   --ui-error is damage and a critical charge, vivid pink is a badge. All of those are MARKS ON TOP of a
+   faint field and shape resolves before colour — but the zone LINE is saturated, so the pairs are measured
+   on /maps/zones rather than assumed. */
+:root {
+  --forest-map-zone: var(--ui-bg-inverted);
+  --forest-map-zone-low-speed: var(--ui-warning);
+  --forest-map-zone-no-parking: var(--ui-error);
+  --forest-map-zone-event: var(--dataviz-categorical-vivid-pink);
+  --forest-map-zone-exclusion: var(--ui-primary);
+}
+/* Drawing — the shape a reader is authoring right now, which is a different kind of thing from every
+   other mark on the map: it is not data, it is an unfinished sentence.
+   ★ It is PRIMARY, not a zone hue. A draft has no kind yet — the operator has not said whether they are
+   drawing a no-parking zone or an event — so painting it in one would be a claim the geometry does not
+   make. Primary says "this is the thing you are doing", which is exactly what it is.
+   ★ The HANDLE IS THE PAGE COLOUR, ringed in the draw colour. A grabbable disc has to read as an object
+   sitting above the map rather than a dot painted on it, and a filled disc in the draw colour reads as a
+   vertex of the shape instead of a control over it. Flipping with the mode keeps that separation in both.
+   ★ INVALID IS ERROR, and the ring keeps painting in it. A self-crossing draft that vanished at the moment
+   of the mistake would take the reader's work with it. */
+:root {
+  --forest-map-draw: var(--ui-primary);
+  --forest-map-draw-invalid: var(--ui-error);
+  --forest-map-draw-handle: var(--ui-bg);
+}
+/* Balance and density paint — see map/density.ts and map/heat.ts.
+   ★ THE SEQUENTIAL RAMP IS NOT ALIASED HERE, DELIBERATELY. A bin map samples the engine's own
+   `--dataviz-sequential-forest-*` through map/ramp.ts, which also reverses the order after dark. This
+   block used to restate five of those positions; a seven-bucket map then asked for a sixth that did not
+   exist, and an undefined var in a GL paint property falls back to the inherited colour instead of
+   failing — London's densest cells painted grey under a green legend. Sampling cannot miss a stop.
+   The DIVERGING set below stays aliased, because its dark centre is not a position on any ramp. */
+/* Balance — a SIGNED gap against an expectation. The ARMS are sampled from the engine's diverging
+   families by map/ramp.ts (blueOrange by default, and it is a prop). Only the CENTRE lives here.
+   ★ THE CENTRE IS THE ONE COLOUR NOT ON ANY RAMP. Stop 4 means "no meaningful gap", so it has to
+   vanish against the basemap in BOTH modes. Every family's own centre is a pale neutral — right on a
+   light ground, wrong on a dark one, where it would make "nothing to report" the loudest thing on the
+   map. --ui-bg-muted is near-white in light and a dark neutral in dark, so it disappears in both.
+   ⚠ NOT --ui-bg: measured on the running app, that resolves to the same near-white in BOTH modes, so a
+   dark centre pointed at it paints white over the night basemap. */
+:root {
+  --forest-map-balance-centre: var(--ui-bg-muted);
+}
+/* subtle's ring/divide: RELATIVE translucent hairline (not a fixed ramp token, which collides with
+   the stepped fill). rgb, NOT color-mix — color-mix doesn't paint in box-shadow/ring here. */
+:root:not(.dark), .light { --forest-card-ring: rgb(0 0 0 / 0.09); }
+.dark { --forest-card-ring: rgb(255 255 255 / 0.12); }
+/* Input recess line — the solid inset top edge that makes a field read as pressed INTO the page (see
+   themes/input.ts). It must always be DARKER than the field, in both modes: a light neutral ramp step
+   works on a white field but glares on a dark one. rgb, NOT color-mix — color-mix doesn't paint in
+   box-shadow here. Light keeps the neutral-100 tone; dark drops to a translucent black. */
+:root:not(.dark), .light { --forest-input-recess: rgb(0 0 0 / 0.06); }
+.dark { --forest-input-recess: rgb(0 0 0 / 0.35); }
+/* Input focus halo — the soft 3px outer glow a focused field gains behind its ring (themes/input.ts).
+   The numbered ramp steps do NOT flip by mode (only the semantic roles like --ui-primary do), so a
+   fixed 200 step swung from 1.39:1 against the light page to 12.61:1 against the dark one — louder
+   than the ring it sits behind, inverting the hierarchy. Each mode therefore picks its own step:
+   light stays at 200 (~1.3-1.5:1), dark drops to 800 (~1.9-2.1:1) — a hair more present than light,
+   which a glow needs on a dark surface, but still soft. Same soft-tint-light / deep-tone-dark shape
+   the --forest-card-* accents use. NEUTRAL is the exception: its ladder is the deep near-black one
+   (see COLOUR-DECISIONS.md), so 800 collapses onto the page (1.19:1) — it takes 600 (2.32:1). */
+:root:not(.dark), .light {
+  --forest-halo-primary:   var(--ui-color-primary-200);
+  --forest-halo-secondary: var(--ui-color-secondary-200);
+  --forest-halo-success:   var(--ui-color-success-200);
+  --forest-halo-info:      var(--ui-color-info-200);
+  --forest-halo-warning:   var(--ui-color-warning-200);
+  --forest-halo-error:     var(--ui-color-error-200);
+  --forest-halo-forest:    var(--ui-color-forest-200);
+  --forest-halo-maple:     var(--ui-color-maple-200);
+  --forest-halo-river:     var(--ui-color-river-200);
+  --forest-halo-warm:      var(--ui-color-warm-200);
+  --forest-halo-acid:      var(--ui-color-acid-200);
+  --forest-halo-neutral:   var(--ui-color-neutral-200);
+}
+.dark {
+  --forest-halo-primary:   var(--ui-color-primary-800);
+  --forest-halo-secondary: var(--ui-color-secondary-800);
+  --forest-halo-success:   var(--ui-color-success-800);
+  --forest-halo-info:      var(--ui-color-info-800);
+  --forest-halo-warning:   var(--ui-color-warning-800);
+  --forest-halo-error:     var(--ui-color-error-800);
+  --forest-halo-forest:    var(--ui-color-forest-800);
+  --forest-halo-maple:     var(--ui-color-maple-800);
+  --forest-halo-river:     var(--ui-color-river-800);
+  --forest-halo-warm:      var(--ui-color-warm-800);
+  --forest-halo-acid:      var(--ui-color-acid-800);
+  --forest-halo-neutral:   var(--ui-color-neutral-600);
+}
+/* Coloured recess — for an EXPLICIT colour intent the recessed depth line is the intent's own ring
+   colour (the 500 step, same hue the focus ring / border uses) at low alpha, so the line reads as a
+   translucent tint of the field's own accent rather than a separate tone. Only applied while the ring
+   is coloured (the `highlight` state, in themes/input*.ts) — a plain rest field keeps the neutral line.
+   Relative-colour `oklch(from … l c h / a)` resolves to a concrete colour that PAINTS in box-shadow (a
+   bare `color-mix()` does not). Dark carries a touch more alpha so the tint holds against the darker
+   field. neutral is omitted — its highlight ring is the inverted (near-ink) tone, which the default
+   neutral recess line already matches. */
+:root:not(.dark), .light {
+  --forest-recess-primary:   oklch(from var(--ui-color-primary-500) l c h / 0.22);
+  --forest-recess-secondary: oklch(from var(--ui-color-secondary-500) l c h / 0.22);
+  --forest-recess-success:   oklch(from var(--ui-color-success-500) l c h / 0.22);
+  --forest-recess-info:      oklch(from var(--ui-color-info-500) l c h / 0.22);
+  --forest-recess-warning:   oklch(from var(--ui-color-warning-500) l c h / 0.22);
+  --forest-recess-error:     oklch(from var(--ui-color-error-500) l c h / 0.22);
+  --forest-recess-forest:    oklch(from var(--ui-color-forest-500) l c h / 0.22);
+  --forest-recess-maple:     oklch(from var(--ui-color-maple-500) l c h / 0.22);
+  --forest-recess-river:     oklch(from var(--ui-color-river-500) l c h / 0.22);
+  --forest-recess-warm:      oklch(from var(--ui-color-warm-500) l c h / 0.22);
+  --forest-recess-acid:      oklch(from var(--ui-color-acid-500) l c h / 0.22);
+}
+.dark {
+  --forest-recess-primary:   oklch(from var(--ui-color-primary-500) l c h / 0.35);
+  --forest-recess-secondary: oklch(from var(--ui-color-secondary-500) l c h / 0.35);
+  --forest-recess-success:   oklch(from var(--ui-color-success-500) l c h / 0.35);
+  --forest-recess-info:      oklch(from var(--ui-color-info-500) l c h / 0.35);
+  --forest-recess-warning:   oklch(from var(--ui-color-warning-500) l c h / 0.35);
+  --forest-recess-error:     oklch(from var(--ui-color-error-500) l c h / 0.35);
+  --forest-recess-forest:    oklch(from var(--ui-color-forest-500) l c h / 0.35);
+  --forest-recess-maple:     oklch(from var(--ui-color-maple-500) l c h / 0.35);
+  --forest-recess-river:     oklch(from var(--ui-color-river-500) l c h / 0.35);
+  --forest-recess-warm:      oklch(from var(--ui-color-warm-500) l c h / 0.35);
+  --forest-recess-acid:      oklch(from var(--ui-color-acid-500) l c h / 0.35);
+}
+/* Expressiveness traits (--fx-*) — the per-context loudness knobs, documented in
+   EXPRESSIVENESS-MODES-RESEARCH.md. Defaults = the restrained web voice, so an unwrapped tree renders
+   exactly as before these existed. A context (mobile/marketing — see the *-theme.ts deltas) re-points
+   them on SLOT classes inside its <UTheme> delta, never on a wrapper element: UTheme rides Vue
+   provide/inject so slot-attached values survive teleported overlays; a DOM-scoped var would not. */
+:root {
+  --fx-title-family: var(--font-sans);   /* card/section titles — GT Haptik; marketing flips to Mohr */
+  --fx-title-transform: none;            /* marketing pairs Mohr with uppercase */
+  /* KPI figures. GT Haptik at rest because Mohr ships no tnum — measured, its "1" is 13.01px against
+     its "0" at 23.66px — so a column of figures set in it never lines up and a figure updating in
+     place jitters as it changes width. The expressive contexts (mobile, marketing) flip it back:
+     there the number is a statement, not something read down a column. */
+  --fx-metric-family: var(--font-sans);
+  --fx-metric-transform: none;           /* Mohr is always uppercase; the sans cut is not */
+}
+
+/* Marketing accent surfaces — tinted cards off the brand ramps (featured/promo/marketing), NOT part
+   of the neutral nesting ladder. Each hue mode-flips like the inverted surface: light = a soft tint
+   (ramp-50 lifted ~20% toward ramp-300), dark = the deep ramp-950 tone — a light tint would glare on
+   a dark page. The tint is fixed across contexts — the soft tint IS the accents' character; a louder
+   context reads bolder through shape + the Mohr title, not a deeper tint. Ring = a translucent
+   ramp-500/300 hairline. Neutral ink reads on both (dark text on the light tint, near-white title on
+   the deep tone). Hues: peach=warm · mint=forest · sky=river · amber=amber. Add a hue by cloning one
+   --forest-card-<hue>-* pair + a preset card variant. */
+:root:not(.dark), .light {
+  --forest-card-peach-bg: color-mix(in oklab, var(--warm-50),   var(--warm-300) 20%);
+  --forest-card-peach-ring: color-mix(in oklab, var(--warm-500),  transparent 82%);
+  --forest-card-mint-bg:  color-mix(in oklab, var(--forest-50), var(--forest-300) 20%);
+  --forest-card-mint-ring:  color-mix(in oklab, var(--forest-500), transparent 82%);
+  --forest-card-sky-bg:   color-mix(in oklab, var(--river-50),  var(--river-300) 20%);
+  --forest-card-sky-ring:   color-mix(in oklab, var(--river-500),  transparent 82%);
+  --forest-card-amber-bg: color-mix(in oklab, var(--amber-50),  var(--amber-300) 20%);
+  --forest-card-amber-ring: color-mix(in oklab, var(--amber-500),  transparent 82%);
+  /* Tone-on-tone ink: title = the deep ramp step, description = a step lighter — both hue-aligned to
+     the tint and readable on the light surface. Mode-flipped in .dark below. */
+  --forest-card-peach-text: var(--warm-900);   --forest-card-peach-muted: var(--warm-700);
+  /* Handle + edge on a peach surface (mobile drawer): ONE solid brand step, no mix and no alpha —
+     Bark Brown, the warm ramp's deep anchor. Both marks read as drawn ON the sheet rather than as a
+     wash of it, which is why this is not the peach CARD hairline (a translucent mix at 82%): a card
+     sits in the page and can whisper, a sheet floats over it. Dark flips to Acer Orange — Bark Brown
+     IS the dark fill, so the mark has to come up the ramp instead of down. */
+  --forest-card-peach-mark: var(--warm-bark-brown);
+  --forest-card-mint-text:  var(--forest-900);  --forest-card-mint-muted:  var(--forest-700);
+  --forest-card-sky-text:   var(--river-900);   --forest-card-sky-muted:   var(--river-700);
+  --forest-card-amber-text: var(--amber-900);   --forest-card-amber-muted: var(--amber-700);
+}
+.dark {
+  --forest-card-peach-bg: var(--warm-950);
+  --forest-card-peach-ring: color-mix(in oklab, var(--warm-300),  transparent 84%);
+  --forest-card-mint-bg:  var(--forest-950);
+  --forest-card-mint-ring:  color-mix(in oklab, var(--forest-300), transparent 84%);
+  --forest-card-sky-bg:   var(--river-950);
+  --forest-card-sky-ring:   color-mix(in oklab, var(--river-300),  transparent 84%);
+  --forest-card-amber-bg: var(--amber-950);
+  --forest-card-amber-ring: color-mix(in oklab, var(--amber-300),  transparent 84%);
+  /* On the deep ramp-950 tone: light hue-aligned ink. */
+  --forest-card-peach-text: var(--warm-100);   --forest-card-peach-muted: var(--warm-300);
+  --forest-card-peach-mark: var(--warm-acer-orange);
+  --forest-card-mint-text:  var(--forest-100);  --forest-card-mint-muted:  var(--forest-300);
+  --forest-card-sky-text:   var(--river-100);   --forest-card-sky-muted:   var(--river-300);
+  --forest-card-amber-text: var(--amber-100);   --forest-card-amber-muted: var(--amber-300);
+}
+.forest-card { --forest-card-bg: var(--forest-card-l1); }
+.forest-card .forest-card {
+  --forest-card-bg: var(--forest-card-l2);
+  border-radius: calc(var(--forest-card-radius) - var(--forest-card-pad));  /* std 24→8 · mkt 32→16 */
+}
+/* One more concentric step, FLOORED at 8px. A bolder context starts from a larger outer radius
+   (marketing/mobile set --forest-card-radius:2rem), so it has room for a third distinct corner
+   (32→16→8) before the floor. Standard (1.5rem) already hits the floor at L2 (24→8), so max() holds
+   it at 8px and nothing changes. The floor stops a 3rd step reaching 0px (square = broken). L4+ reuse
+   this rule (more specific than L2), so they hold the floor too — only the fill keeps stepping. */
+/* A KPI tile joined into a divided row squares off: the group draws the corners, and a rounded
+   fill inside a joined strip leaves the selected tile's underline detached at both ends. Declared
+   here rather than as a utility on the tile because this file is unlayered — the concentric rule
+   above outranks any `rounded-none` a component could carry. */
+.forest-card.forest-kpi-joined {
+  border-radius: 0;
+}
+
+.forest-card .forest-card .forest-card {
+  --forest-card-bg: var(--forest-card-l3);
+  border-radius: max(calc(var(--forest-card-radius) - 2 * var(--forest-card-pad)), 0.5rem);
+}
+
+/* A CANVAS card opts out of the concentric ramp entirely. The ramp models a surface nested INSIDE
+   another surface — each step is a card sitting on the card that contains it. Chrome floating over a
+   map is not that: it sits on the CANVAS, and the fact that the canvas is itself inside a card (a map
+   panel on a dashboard, or a specimen in these docs) says nothing about the corner a floating readout
+   should have. Left to the ramp it stepped 24→8 and read as a different, sharper object than the side
+   panel beside it.
+   Its radius pairs with the side panel's instead — one corner for the surfaces on a canvas, against the
+   controls' 12. Written here rather than as a utility on the component because this file is unlayered:
+   the ramp above outranks any `rounded-*` a component could carry, and only a rule of equal specificity
+   later in the same file can answer it. FCanvasCard adds the marker; UCard always supplies the other
+   half of the selector. */
+.forest-card.forest-canvas-card {
+  border-radius: var(--forest-canvas-card-radius, 1rem);
+}
+
+/* Motion — MOVED. The ladder (--motion-instant/fast/base/slow/dwell, --motion-ease-out/in-out/drawer),
+   the Tailwind default-transition re-point, and the system-wide reduced-motion floor now live in the
+   engine, generated by scripts/motion.ts:
+
+     packages/tokens/motion/motion.css        the ladder + the reduced-motion floor (framework-agnostic)
+     packages/tokens/motion/motion.theme.css  the @theme re-point of --default-transition-* (Tailwind)
+     packages/tokens/motion/motion.json       the same values for consumers that cannot read CSS
+
+   They left this file because this file is the NUXT UI brand layer — anything that cannot pull the
+   preset could not have the tokens either, so every non-Tailwind surface had to restate them. Both
+   generated sheets are pulled by styles/index.css and inlined by scripts/layer.ts, so every consumer
+   that had motion before still has it.
+
+   ★ Do NOT re-add them with an `@import` here. scripts/layer.ts reads THIS FILE AS TEXT and
+   concatenates it into the middle of packages/nuxt-layer/styles.gen.css, where an @import is invalid.
+   The layer takes the motion sheets as their own entries in that array instead. */
+
+/* ── Scrollbars ────────────────────────────────────────────────────────────────────────────────────
+   Whether a scrollbar auto-hides is an OS decision, not ours. macOS "Show scroll bars: Automatic"
+   means overlay on a trackpad and CLASSIC — opaque, permanent, taking width from the content — the
+   moment a mouse is attached. CSS cannot turn a classic scrollbar into an overlay one. All we can do
+   is make the classic case quiet, and not break the overlay case for everyone else.
+
+   Which rules out `::-webkit-scrollbar`. Setting a width or height on it forces a classic scrollbar
+   even where the platform would have drawn an overlay, so the legacy route makes the problem WORSE
+   for trackpad users. The standard properties respect the platform: on an overlay scrollbar `thin`
+   still only paints the thumb while you actually scroll.
+
+   Two @supports gates, not one — the properties are NOT at the same support level. scrollbar-width
+   is Baseline 2024 (Chrome 121 / Firefox 64 / Safari 18.2), but scrollbar-color only reached Safari
+   in 26.2, so a single combined gate would withhold the thinning from a large slice of Safari.
+
+   `scrollbar-width` is not an inherited property, hence the universal selector; `*` carries zero
+   specificity, so any component recipe still wins. `none` is deliberately not used anywhere — it
+   removes the only visible affordance for mouse-drag scrolling. */
+:root:not(.dark), .light { --forest-scrollbar-thumb: var(--neutral-400); }
+.dark { --forest-scrollbar-thumb: var(--neutral-500); }
+
+@supports (scrollbar-width: thin) {
+  * {
+    scrollbar-width: thin;
+  }
+
+  /* Page-level only. Reserving the gutter stops the layout shifting as you move between a short
+     page and a long one; putting it on every scroller instead would paint an empty lane inside
+     small panels that have nothing to scroll. `stable both-edges` is avoided — Chromium doubles
+     the gutter on retina displays. Inert where scrollbars overlay, which is the correct no-op. */
+  html {
+    scrollbar-gutter: stable;
+  }
+}
+
+/* Transparent track, always. The opaque lane is most of what reads as visual weight, and unlike the
+   thumb it stays painted whether or not anything is scrolling. No global hover treatment: there is no
+   selector for "is a scroll container", so strengthening the thumb on hover would mean a universal
+   `*:hover` rule paying a style recalc across the whole tree for polish only scrollers can show.
+   UScrollArea — the one component that colours its scrollbar deliberately — does carry one. */
+@supports (scrollbar-color: lime hotpink) {
+  * {
+    scrollbar-color: var(--forest-scrollbar-thumb) transparent;
+  }
+}
+
+/* Display utility — Mohr Black, always uppercase (web cut = MohrAlt, upright). */
+.font-display {
+  font-family: var(--font-display);
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+/* One-step touch promotion — for the controls that have NO baked touch ladder of their own. These
+   reach mobile size by DEFAULTING to a larger `size` prop (forestMobileProps), so a touched phone
+   would step twice if this fired there too: hence `:not(.cut-fixed)`, which the mobile cut stamps to
+   opt out. Controls WITH a baked ladder use `touch:` below instead — same numbers under either
+   trigger, so no escape is needed. Ships WITH the preset (the recipes use it, so the variant must
+   travel with them; a consuming app gets it by importing this file). Replaces the built-in
+   `pointer-coarse:`, which the fixed cut couldn't opt out of. */
+@custom-variant coarse {
+  @media (pointer: coarse) {
+    &:not(.cut-fixed) {
+      @slot;
+    }
+  }
+  /* Docs-simulation hook: a `coarse:` rule ALSO fires inside a `[data-force-coarse]` container, so
+     the docs can preview the touch bump on a fine-pointer desktop (the Context switch's "Coarse
+     pointer" toggle stamps the attribute via ContextScope). Lives here because a @custom-variant is
+     defined once. Inert in production — no app sets this attribute; `:where()` keeps it
+     zero-specificity; `:not(.cut-fixed)` is kept so a baked cut (mobile) stays put under the sim,
+     exactly as on a real phone. */
+  &:where([data-force-coarse] *):not(.cut-fixed) {
+    @slot;
+  }
+}
+
+/* THE TOUCH LADDER — one set of sizes, two triggers. A control is drawn at touch size when it is
+   BEING touched (coarse primary pointer) or when it is BAKED for touch (the mobile cut stamps
+   `.cut-fixed`). Both land on the SAME per-size numbers — 28/36/40/44/52 for xs→xl vs the fine-pointer
+   24/28/32/36/40 — so the values are authored once, in each control's size variant, and a real phone
+   cannot step twice. Every size keeps its own rung: lg is 44 (Apple's min tap target) and xl 52; this
+   is a LADDER SWAP, not a shift to the next size up, which is why xl has somewhere to go.
+   Consumed by the `touch:*` classes in button.ts, input.ts and the other field controls.
+
+   Why the baked branch exists at all: the desktop mock of the mobile app and the native/Flutter
+   export have no pointer to query, so they must show true touch size on a fine-pointer machine.
+
+   Each branch is deliberately TWO classes (0,2,0). Stock hangs a responsive `md:text-*` shrink per
+   size on the field controls; a one-class touch rule ties with it and loses on order, which flipped a
+   control's type between the desktop mock and a real phone. `.cut-fixed` supplies its second class
+   naturally; the pointer branches borrow one from a class that never exists. */
+@custom-variant touch {
+  &.cut-fixed {
+    @slot;
+  }
+  @media (pointer: coarse) {
+    &:not(.forest-fine) {
+      @slot;
+    }
+  }
+  /* Docs-simulation hook — see `coarse:` above. `:where()` keeps the container selector at zero
+     specificity so the 0,2,0 total is unchanged. Inert in production. */
+  &:where([data-force-coarse] *):not(.forest-fine) {
+    @slot;
+  }
+}
+
+
+/* Forest data-visualization palette — generated by scripts/dataviz.ts. Do not edit by hand. */
+/* Three categorical variants: -safe- = the 6-colour brand-led CVD-safe set (the default, on
+   --vis-color0..5); -vivid- = vivid 12 (first 6 = curated 6, label-dependent, NOT CVD-safe); -pairs- =
+   brand pairs (3 hues × deep/soft, brand-forward, NOT CVD-safe). All flip light/dark. Sequential:
+   invert stop order in dark mode. Diverging: darken the centre stop in dark mode. */
+:root {
+  --dataviz-categorical-safe-1: #009d7c;
+  --dataviz-categorical-safe-2: #cc7044;
+  --dataviz-categorical-safe-3: #617de6;
+  --dataviz-categorical-safe-4: #b0175f;
+  --dataviz-categorical-safe-5: #8a34ab;
+  --dataviz-categorical-safe-6: #5b6c00;
+  --dataviz-categorical-vivid-green: #00a447;
+  --dataviz-categorical-vivid-amber: #da7600;
+  --dataviz-categorical-vivid-sky: #0084c8;
+  --dataviz-categorical-vivid-indigo: #4f39f6;
+  --dataviz-categorical-vivid-pink: #e30076;
+  --dataviz-categorical-vivid-red: #e40015;
+  --dataviz-categorical-vivid-emerald: #009669;
+  --dataviz-categorical-vivid-orange: #ec5600;
+  --dataviz-categorical-vivid-blue: #155dfc;
+  --dataviz-categorical-vivid-purple: #9810fa;
+  --dataviz-categorical-vivid-fuchsia: #c500da;
+  --dataviz-categorical-vivid-rose: #e60044;
+  --dataviz-categorical-pairs-forest-deep: #019f6d;
+  --dataviz-categorical-pairs-forest-soft: #3bd996;
+  --dataviz-categorical-pairs-warm-deep: #db6300;
+  --dataviz-categorical-pairs-warm-soft: #feaf59;
+  --dataviz-categorical-pairs-river-deep: #3588df;
+  --dataviz-categorical-pairs-river-soft: #81c0ff;
+  --dataviz-sequential-forest-0: #dcffee;
+  --dataviz-sequential-forest-1: #bef9de;
+  --dataviz-sequential-forest-2: #99e8c5;
+  --dataviz-sequential-forest-3: #69d2a8;
+  --dataviz-sequential-forest-4: #30b889;
+  --dataviz-sequential-forest-5: #289c74;
+  --dataviz-sequential-forest-6: #208361;
+  --dataviz-sequential-forest-7: #186c4f;
+  --dataviz-sequential-forest-8: #11563e;
+  --dataviz-sequential-indigo-0: #f3f4fe;
+  --dataviz-sequential-indigo-1: #e6e8fd;
+  --dataviz-sequential-indigo-2: #ced0fc;
+  --dataviz-sequential-indigo-3: #b1b3f8;
+  --dataviz-sequential-indigo-4: #9494e8;
+  --dataviz-sequential-indigo-5: #7b78da;
+  --dataviz-sequential-indigo-6: #6763bb;
+  --dataviz-sequential-indigo-7: #54519b;
+  --dataviz-sequential-indigo-8: #43407b;
+  --dataviz-sequential-moss-0: #ffffe5;
+  --dataviz-sequential-moss-1: #f7fcb9;
+  --dataviz-sequential-moss-2: #d9f0a3;
+  --dataviz-sequential-moss-3: #addd8e;
+  --dataviz-sequential-moss-4: #78c679;
+  --dataviz-sequential-moss-5: #41ab5d;
+  --dataviz-sequential-moss-6: #238443;
+  --dataviz-sequential-moss-7: #006837;
+  --dataviz-sequential-moss-8: #004529;
+  --dataviz-sequential-cividis-0: #00204d;
+  --dataviz-sequential-cividis-1: #00336f;
+  --dataviz-sequential-cividis-2: #39486b;
+  --dataviz-sequential-cividis-3: #575d6d;
+  --dataviz-sequential-cividis-4: #707173;
+  --dataviz-sequential-cividis-5: #8a8779;
+  --dataviz-sequential-cividis-6: #a69d75;
+  --dataviz-sequential-cividis-7: #c4b56c;
+  --dataviz-sequential-cividis-8: #e4cf5b;
+  --dataviz-sequential-cividis-9: #ffea46;
+  --dataviz-sequential-viridis-0: #440154;
+  --dataviz-sequential-viridis-1: #482878;
+  --dataviz-sequential-viridis-2: #3e4a89;
+  --dataviz-sequential-viridis-3: #31688e;
+  --dataviz-sequential-viridis-4: #26828e;
+  --dataviz-sequential-viridis-5: #1f9e89;
+  --dataviz-sequential-viridis-6: #35b779;
+  --dataviz-sequential-viridis-7: #6dcd59;
+  --dataviz-sequential-viridis-8: #b4de2c;
+  --dataviz-sequential-viridis-9: #fde725;
+  --dataviz-sequential-magma-0: #000004;
+  --dataviz-sequential-magma-1: #1c1044;
+  --dataviz-sequential-magma-2: #4f127b;
+  --dataviz-sequential-magma-3: #812581;
+  --dataviz-sequential-magma-4: #b5367a;
+  --dataviz-sequential-magma-5: #e65164;
+  --dataviz-sequential-magma-6: #fb8861;
+  --dataviz-sequential-magma-7: #fec287;
+  --dataviz-sequential-magma-8: #fcfdbf;
+  --dataviz-diverging-forest-warm-0: #155e42;
+  --dataviz-diverging-forest-warm-1: #238862;
+  --dataviz-diverging-forest-warm-2: #38b484;
+  --dataviz-diverging-forest-warm-3: #69deac;
+  --dataviz-diverging-forest-warm-4: #f6ece8;
+  --dataviz-diverging-forest-warm-5: #fab18b;
+  --dataviz-diverging-forest-warm-6: #dc804f;
+  --dataviz-diverging-forest-warm-7: #b05925;
+  --dataviz-diverging-forest-warm-8: #7d3a11;
+  --dataviz-diverging-blue-orange-0: #12518d;
+  --dataviz-diverging-blue-orange-1: #3377be;
+  --dataviz-diverging-blue-orange-2: #5b9fe9;
+  --dataviz-diverging-blue-orange-3: #9dc8f9;
+  --dataviz-diverging-blue-orange-4: #f6ece8;
+  --dataviz-diverging-blue-orange-5: #fab18b;
+  --dataviz-diverging-blue-orange-6: #dc804f;
+  --dataviz-diverging-blue-orange-7: #b05925;
+  --dataviz-diverging-blue-orange-8: #7d3a11;
+  --dataviz-diverging-purple-green-0: #673682;
+  --dataviz-diverging-purple-green-1: #8e5bab;
+  --dataviz-diverging-purple-green-2: #b682d5;
+  --dataviz-diverging-purple-green-3: #ddaff9;
+  --dataviz-diverging-purple-green-4: #e8f1ec;
+  --dataviz-diverging-purple-green-5: #69deac;
+  --dataviz-diverging-purple-green-6: #38b484;
+  --dataviz-diverging-purple-green-7: #238862;
+  --dataviz-diverging-purple-green-8: #155e42;
+  --dataviz-diverging-red-blue-0: #b2182b;
+  --dataviz-diverging-red-blue-1: #d6604d;
+  --dataviz-diverging-red-blue-2: #f4a582;
+  --dataviz-diverging-red-blue-3: #fddbc7;
+  --dataviz-diverging-red-blue-4: #f7f7f7;
+  --dataviz-diverging-red-blue-5: #d1e5f0;
+  --dataviz-diverging-red-blue-6: #92c5de;
+  --dataviz-diverging-red-blue-7: #4393c3;
+  --dataviz-diverging-red-blue-8: #2166ac;
+}
+.dark {
+  --dataviz-categorical-safe-1: #029e72;
+  --dataviz-categorical-safe-2: #d46b01;
+  --dataviz-categorical-safe-3: #89b0ff;
+  --dataviz-categorical-safe-4: #ff9cb2;
+  --dataviz-categorical-safe-5: #a663ac;
+  --dataviz-categorical-safe-6: #becf68;
+  --dataviz-categorical-vivid-green: #05df72;
+  --dataviz-categorical-vivid-amber: #fabc00;
+  --dataviz-categorical-vivid-sky: #00bbfd;
+  --dataviz-categorical-vivid-indigo: #7d87ff;
+  --dataviz-categorical-vivid-pink: #fb64b6;
+  --dataviz-categorical-vivid-red: #ff6568;
+  --dataviz-categorical-vivid-emerald: #00d294;
+  --dataviz-categorical-vivid-orange: #ff8b1e;
+  --dataviz-categorical-vivid-blue: #56a2ff;
+  --dataviz-categorical-vivid-purple: #bf7eff;
+  --dataviz-categorical-vivid-fuchsia: #ec6dff;
+  --dataviz-categorical-vivid-rose: #ff6880;
+  --dataviz-categorical-pairs-forest-deep: #0abb7f;
+  --dataviz-categorical-pairs-forest-soft: #99e9bc;
+  --dataviz-categorical-pairs-warm-deep: #f48519;
+  --dataviz-categorical-pairs-warm-soft: #ffd6a6;
+  --dataviz-categorical-pairs-river-deep: #43a2ff;
+  --dataviz-categorical-pairs-river-soft: #b2d9ff;
+}
+
+
+/* Forest → Unovis adapter — generated by scripts/dataviz.ts. Do not edit by hand. */
+/* var() indirection, plus the one vendor rule that cannot be expressed as a var. Import AFTER
+   dataviz.css and the semantic theme. */
+/* :root:root — Unovis injects its own :root defaults at runtime (after this sheet loads), so we
+   need to win on specificity, not order. */
+:root:root {
+  --vis-color0: var(--dataviz-categorical-safe-1);
+  --vis-color1: var(--dataviz-categorical-safe-2);
+  --vis-color2: var(--dataviz-categorical-safe-3);
+  --vis-color3: var(--dataviz-categorical-safe-4);
+  --vis-color4: var(--dataviz-categorical-safe-5);
+  --vis-color5: var(--dataviz-categorical-safe-6);
+  --vis-font-family: var(--font-sans);
+  --vis-dark-font-family: var(--font-sans);
+  --vis-axis-grid-color: var(--ui-border);
+  --vis-dark-axis-grid-color: var(--ui-border);
+  --vis-axis-tick-color: var(--ui-border);
+  --vis-dark-axis-tick-color: var(--ui-border);
+  --vis-axis-tick-label-color: var(--ui-text-muted);
+  --vis-dark-axis-tick-label-color: var(--ui-text-muted);
+  --vis-axis-label-color: var(--ui-text-muted);
+  --vis-dark-axis-label-color: var(--ui-text-muted);
+  --vis-legend-label-color: var(--ui-text);
+  --vis-dark-legend-label-color: var(--ui-text);
+  --vis-tooltip-background-color: color-mix(in oklab, var(--ui-bg-elevated) 80%, transparent);
+  --vis-dark-tooltip-background-color: color-mix(in oklab, var(--ui-bg-elevated) 80%, transparent);
+  --vis-tooltip-backdrop-filter: blur(12px) saturate(1.4);
+  --vis-dark-tooltip-backdrop-filter: blur(12px) saturate(1.4);
+  --vis-tooltip-border-color: var(--ui-border);
+  --vis-dark-tooltip-border-color: var(--ui-border);
+  --vis-tooltip-text-color: var(--ui-text-highlighted);
+  --vis-dark-tooltip-text-color: var(--ui-text-highlighted);
+  --vis-tooltip-border-radius: var(--ui-radius);
+  --vis-dark-tooltip-border-radius: var(--ui-radius);
+  --vis-tooltip-padding: 0;
+  --vis-dark-tooltip-padding: 0;
+  --vis-crosshair-line-stroke-color: var(--ui-text-dimmed);
+  --vis-dark-crosshair-line-stroke-color: var(--ui-text-dimmed);
+  --vis-donut-background-color: transparent;
+  --vis-dark-donut-background-color: transparent;
+  --vis-donut-central-label-font-size: 28px;
+  --vis-dark-donut-central-label-font-size: 28px;
+  --vis-donut-central-label-font-weight: 700;
+  --vis-dark-donut-central-label-font-weight: 700;
+  --vis-donut-central-label-text-color: var(--ui-text-highlighted);
+  --vis-dark-donut-central-label-text-color: var(--ui-text-highlighted);
+  --vis-donut-central-sub-label-font-size: 13px;
+  --vis-dark-donut-central-sub-label-font-size: 13px;
+  --vis-donut-central-sub-label-text-color: var(--ui-text-muted);
+  --vis-dark-donut-central-sub-label-text-color: var(--ui-text-muted);
+  --vis-nested-donut-central-label-font-size: 20px;
+  --vis-dark-nested-donut-central-label-font-size: 20px;
+  --vis-nested-donut-central-label-font-weight: 700;
+  --vis-dark-nested-donut-central-label-font-weight: 700;
+  --vis-nested-donut-central-label-text-color: var(--ui-text-highlighted);
+  --vis-dark-nested-donut-central-label-text-color: var(--ui-text-highlighted);
+  --vis-nested-donut-central-sublabel-text-color: var(--ui-text-muted);
+  --vis-dark-nested-donut-central-sublabel-text-color: var(--ui-text-muted);
+  --vis-nested-donut-background-color: transparent;
+  --vis-dark-nested-donut-background-color: transparent;
+  --vis-nested-donut-segment-stroke-color: var(--ui-bg);
+  --vis-dark-nested-donut-segment-stroke-color: var(--ui-bg);
+  --vis-nested-donut-segment-stroke-width: 3px;
+  --vis-dark-nested-donut-segment-stroke-width: 3px;
+  --vis-timeline-row-even-fill-color: var(--ui-bg);
+  --vis-dark-timeline-row-even-fill-color: var(--ui-bg);
+  --vis-timeline-row-odd-fill-color: var(--ui-bg-muted);
+  --vis-dark-timeline-row-odd-fill-color: var(--ui-bg-muted);
+  --vis-timeline-label-color: var(--ui-text-muted);
+  --vis-dark-timeline-label-color: var(--ui-text-muted);
+  --vis-timeline-scrollbar-background-color: var(--ui-bg-muted);
+  --vis-dark-timeline-scrollbar-background-color: var(--ui-bg-muted);
+  --vis-timeline-scrollbar-color: var(--ui-border-accented);
+  --vis-dark-timeline-scrollbar-color: var(--ui-border-accented);
+  --vis-sankey-node-label-color: var(--ui-text-highlighted);
+  --vis-dark-sankey-node-label-color: var(--ui-text-highlighted);
+  --vis-sankey-node-label-background-fill-color: var(--ui-bg);
+  --vis-dark-sankey-node-label-background-fill-color: var(--ui-bg);
+  --vis-sankey-node-label-background-stroke-color: var(--ui-border);
+  --vis-dark-sankey-node-label-background-stroke-color: var(--ui-border);
+  --vis-sankey-icon-color: var(--ui-bg);
+  --vis-dark-sankey-icon-color: var(--ui-bg);
+  --vis-treemap-internal-label-font-size: 16px;
+  --vis-dark-treemap-internal-label-font-size: 16px;
+  --vis-treemap-tile-radius: 12px;
+  --vis-dark-treemap-tile-radius: 12px;
+  --vis-treemap-tile-gap: 4px;
+  --vis-dark-treemap-tile-gap: 4px;
+  --vis-tooltip-title-color: var(--ui-text-highlighted);
+  --vis-tooltip-title-border-bottom: 1px solid var(--ui-border);
+  --vis-tooltip-label-color: var(--ui-text);
+  --vis-tooltip-value-color: var(--ui-text-highlighted);
+}
+
+/* Treemap concentric corners. Unovis draws group and leaf tiles as flat sibling rects sharing one
+   rx, so nesting gets no radius of its own and equal radii read as pinched inner corners. The
+   concentric rule is inner = outer − gap: with the house 8px corner and 4px padding, leaves take
+   4px. Leaves are the only tiles carrying the clickable class (treemapDefaults turns the affordance
+   on for exactly this reason); rx/ry are SVG geometry properties, so CSS overrides the attribute
+   Unovis sets. Matched on the emotion class suffix — Unovis hashes the prefix per build, the label
+   is stable. Separation comes from the padding gap showing the darker group tile beneath, not from
+   a stroke: a stroke on every tile double-borders the nesting. */
+rect[class*="-clickable-tile"] {
+  rx: calc(var(--vis-treemap-tile-radius, 8px) - var(--vis-treemap-tile-gap, 4px));
+  ry: calc(var(--vis-treemap-tile-radius, 8px) - var(--vis-treemap-tile-gap, 4px));
+}
+
+/* Re-centre the central label pair. Unovis anchors both texts on the hole's centre and separates
+   them with dy ±0.55em on each text's OWN font-size, so the block's optical centre always sits
+   above the true centre — and the gap widens with the label size. Shifting by a fraction of the
+   label size restores the centring and keeps it correct if a chart overrides the size locally.
+   dy is an attribute CSS cannot reach; translate composes with the transform attribute Unovis
+   sets, so it is the one lever here.
+
+   The two components need separate rules because they disagree twice. The flat donut sizes its
+   label from --vis-donut-*, the nested one from --vis-nested-donut-*, so one shared rule shifts
+   the nested label by half the FLAT donut's 28px. And they class their texts differently: the flat
+   donut gives BOTH texts the -central-label suffix, while the nested one names its second
+   -central-sub-label. Matching only the first suffix therefore moved the nested label down onto a
+   sub-label that stayed put. Both texts of a pair must shift by the same amount — that is what preserves
+   their spacing while re-centring the block. (No backticks in this comment: it lives inside a
+   template literal.) */
+g[class*="-donut-component"]:not([class*="-nested-donut-component"]) text[class*="-central-label"] {
+  translate: 0 calc(0.5 * var(--vis-donut-central-label-font-size, 16px));
+}
+
+g[class*="-nested-donut-component"] text[class*="-central-label"],
+g[class*="-nested-donut-component"] text[class*="-central-sub-label"] {
+  translate: 0 calc(0.5 * var(--vis-nested-donut-central-label-font-size, 16px));
+}
+
+/* Group labels get their own size. Unovis scales label type to tile area for LEAVES only
+   (enableTileLabelFontSizeVariation, gated on the node having no children), so an internal node
+   keeps the flat default
+   however large its group is — a zone heading ends up smaller than the station labels inside it.
+   Internal nodes carry their own class, so the heading can be sized here; it has to stay within
+   the tilePaddingTop strip the group reserves for it. */
+text[class*="-internal-label"] {
+  font-size: var(--vis-treemap-internal-label-font-size, 16px);
+}
+
+/* Square the label clip. Unovis gives each tile's label a clipPath rect that copies the tile's
+   corner radius and is inset by labelOffset on every side — and it translates the label group to
+   exactly that rect's top-left. The first glyph therefore lands on its own clip's rounded corner
+   and gets sliced, at every radius, and raising labelOffset cannot help because it moves the label
+   and the clip together. The clip's job is to stop text overflowing the tile, which a square does;
+   the tile keeps its own radius, and the label stays inset by labelOffset. */
+[class*="-tile-group"] clipPath rect {
+  rx: 0;
+  ry: 0;
+}
+
+
+@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));