nitro_kit 2.0.0.alpha.3 → 2.0.0.alpha.4

data/app/assets/stylesheets/nitro_kit.css

@@ -38,6 +38,19 @@
     --nk-typeset-leading: 1.75;
     --nk-typeset-flow: 1.25em;
 
+    /* The title scale. Four roles cover every owned title and legend: page
+       for the one page heading, section for full-width section headers,
+       surface for cards, dialogs, sheets, empty states, and fieldsets, and
+       compact for control-group legends and status titles. */
+    --nk-title-page-size: var(--nk-text-2xl);
+    --nk-title-page-weight: var(--nk-font-weight-bold);
+    --nk-title-section-size: var(--nk-text-xl);
+    --nk-title-section-weight: var(--nk-font-weight-bold);
+    --nk-title-surface-size: var(--nk-text-lg);
+    --nk-title-surface-weight: var(--nk-font-weight-bold);
+    --nk-title-compact-size: var(--nk-text-sm);
+    --nk-title-compact-weight: var(--nk-font-weight-semibold);
+
     --nk-font-weight-normal: 400;
     --nk-font-weight-medium: 500;
     --nk-font-weight-semibold: 600;
@@ -56,12 +69,16 @@
     --nk-border-width: 1px;
     --nk-focus-width: 2px;
     --nk-focus-offset: 2px;
+    --nk-disabled-opacity: 0.6;
 
-    --nk-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.08);
-    --nk-shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1),
-      0 2px 4px -2px oklch(0 0 0 / 0.1);
-    --nk-shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.12),
-      0 4px 6px -4px oklch(0 0 0 / 0.12);
+    --nk-shadow-xs: 0 1px 2px 0
+      color-mix(in oklab, var(--nk-black) 5%, transparent);
+    --nk-shadow-sm: 0 1px 2px
+      color-mix(in oklab, var(--nk-black) 8%, transparent);
+    --nk-shadow-md: 0 4px 6px -1px color-mix(in oklab, var(--nk-black) 10%, transparent),
+      0 2px 4px -2px color-mix(in oklab, var(--nk-black) 10%, transparent);
+    --nk-shadow-lg: 0 10px 15px -3px color-mix(in oklab, var(--nk-black) 12%, transparent),
+      0 4px 6px -4px color-mix(in oklab, var(--nk-black) 12%, transparent);
 
     --nk-duration-fast: 100ms;
     --nk-duration-normal: 150ms;
@@ -69,11 +86,27 @@
     --nk-ease: cubic-bezier(0.4, 0, 0.2, 1);
 
     --nk-control-height-xs: 1.5rem;
-    --nk-control-height-sm: 1.75rem;
-    --nk-control-height-md: 2.5rem;
+    --nk-control-height-sm: 2rem;
+    --nk-control-height-md: 2.25rem;
     --nk-control-height-lg: 2.75rem;
     --nk-control-height-xl: 3.5rem;
 
+    --nk-control-padding-inline: calc(var(--nk-space) * 3);
+
+    --nk-choice-size-md: 1.125rem;
+    --nk-choice-size-lg: 1.5rem;
+
+    --nk-icon-size-xs: 0.75rem;
+    --nk-icon-size-sm: 1rem;
+    --nk-icon-size-md: 1.25rem;
+    --nk-icon-size-lg: 1.75rem;
+    --nk-icon-size-xl: 2.25rem;
+
+    --nk-avatar-size-xs: 1.5rem;
+    --nk-avatar-size-sm: 2rem;
+    --nk-avatar-size-md: 3rem;
+    --nk-avatar-size-lg: 4rem;
+
     --nk-content-sm: 24rem;
     --nk-content-md: 32rem;
     --nk-content-lg: 48rem;
@@ -81,89 +114,479 @@
 
     --nk-app-shell-sidebar-width: 16rem;
     --nk-app-shell-topbar-height: 3.5rem;
+
+    /* The poles of every scale. */
+    --nk-white: #fff;
+    --nk-black: #000;
+
+    /* The color scales. Every family ships all eleven steps, appearance
+       independent; the appearance blocks below sample them. 50-200 are tints
+       and surfaces, 400-600 accents and markers, 700-950 content.
+    
+       Harmonized derivations of the Tailwind CSS v4 palette (MIT, (c) Tailwind
+       Labs Inc.): each family's lightness, chroma, and hue follow smooth local
+       fits through the source ramp, bounded to an imperceptible distance
+       (OKLab delta E <= 0.01 per value) and never more saturated outside sRGB
+       than the source. */
+    --nk-slate-50: oklch(98.4% 0.004 247.3);
+    --nk-slate-100: oklch(96.8% 0.006 249.8);
+    --nk-slate-200: oklch(93.6% 0.013 252.5);
+    --nk-slate-300: oklch(85.9% 0.023 254.2);
+    --nk-slate-400: oklch(71.2% 0.038 255.7);
+    --nk-slate-500: oklch(55.7% 0.045 257.6);
+    --nk-slate-600: oklch(45% 0.045 257.1);
+    --nk-slate-700: oklch(36.4% 0.043 257.5);
+    --nk-slate-800: oklch(28.5% 0.042 260.9);
+    --nk-slate-900: oklch(20.6% 0.042 263.3);
+    --nk-slate-950: oklch(12.9% 0.042 265.8);
+
+    --nk-gray-50: oklch(98.5% 0.002 250.4);
+    --nk-gray-100: oklch(96.7% 0.002 260.5);
+    --nk-gray-200: oklch(93.6% 0.005 264.1);
+    --nk-gray-300: oklch(86.2% 0.011 259.5);
+    --nk-gray-400: oklch(71.4% 0.02 261.5);
+    --nk-gray-500: oklch(55.6% 0.027 261.6);
+    --nk-gray-600: oklch(44.9% 0.031 260);
+    --nk-gray-700: oklch(36.4% 0.033 256.9);
+    --nk-gray-800: oklch(28.6% 0.034 260.1);
+    --nk-gray-900: oklch(20.7% 0.033 261.5);
+    --nk-gray-950: oklch(13% 0.028 262.7);
+
+    --nk-zinc-50: oklch(98.5% 0 none);
+    --nk-zinc-100: oklch(96.7% 0.001 286.4);
+    --nk-zinc-200: oklch(93% 0.003 286.3);
+    --nk-zinc-300: oklch(86.1% 0.007 286.3);
+    --nk-zinc-400: oklch(71.4% 0.013 286.1);
+    --nk-zinc-500: oklch(55.5% 0.017 285.9);
+    --nk-zinc-600: oklch(44.7% 0.016 285.8);
+    --nk-zinc-700: oklch(36% 0.012 285.9);
+    --nk-zinc-800: oklch(28.2% 0.008 285.9);
+    --nk-zinc-900: oklch(20.8% 0.005 285.9);
+    --nk-zinc-950: oklch(14% 0.005 285.8);
+
+    --nk-neutral-50: oklch(98.5% 0 none);
+    --nk-neutral-100: oklch(97% 0 none);
+    --nk-neutral-200: oklch(93.2% 0 none);
+    --nk-neutral-300: oklch(86% 0 none);
+    --nk-neutral-400: oklch(71.6% 0 none);
+    --nk-neutral-500: oklch(55.7% 0 none);
+    --nk-neutral-600: oklch(44.7% 0 none);
+    --nk-neutral-700: oklch(36.1% 0 none);
+    --nk-neutral-800: oklch(27.8% 0 none);
+    --nk-neutral-900: oklch(20.7% 0 none);
+    --nk-neutral-950: oklch(14.3% 0 none);
+
+    --nk-stone-50: oklch(98.5% 0.001 114.2);
+    --nk-stone-100: oklch(97% 0.001 85.2);
+    --nk-stone-200: oklch(93.3% 0.003 64.5);
+    --nk-stone-300: oklch(85.9% 0.005 52.4);
+    --nk-stone-400: oklch(71.5% 0.01 56.1);
+    --nk-stone-500: oklch(55.7% 0.012 62.1);
+    --nk-stone-600: oklch(45% 0.012 71.1);
+    --nk-stone-700: oklch(36.4% 0.01 62.3);
+    --nk-stone-800: oklch(27.8% 0.007 44.5);
+    --nk-stone-900: oklch(21.1% 0.006 46.3);
+    --nk-stone-950: oklch(14.7% 0.004 51.8);
+
+    --nk-red-50: oklch(97% 0.013 17.5);
+    --nk-red-100: oklch(93.9% 0.029 17.5);
+    --nk-red-200: oklch(88.4% 0.061 18.3);
+    --nk-red-300: oklch(80.2% 0.113 19.7);
+    --nk-red-400: oklch(71% 0.183 22.3);
+    --nk-red-500: oklch(63.6% 0.237 25.3);
+    --nk-red-600: oklch(57.5% 0.235 27.3);
+    --nk-red-700: oklch(50.7% 0.207 27.6);
+    --nk-red-800: oklch(45.3% 0.178 26.7);
+    --nk-red-900: oklch(38.6% 0.14 25.9);
+    --nk-red-950: oklch(26.8% 0.093 25.8);
+
+    --nk-orange-50: oklch(98.1% 0.015 73.9);
+    --nk-orange-100: oklch(95.2% 0.038 74.5);
+    --nk-orange-200: oklch(90.3% 0.075 71.7);
+    --nk-orange-300: oklch(83% 0.124 65.1);
+    --nk-orange-400: oklch(75.3% 0.173 56.1);
+    --nk-orange-500: oklch(70.5% 0.203 47.6);
+    --nk-orange-600: oklch(64.6% 0.212 41.1);
+    --nk-orange-700: oklch(55.3% 0.185 38.4);
+    --nk-orange-800: oklch(48% 0.158 37.7);
+    --nk-orange-900: oklch(39.8% 0.122 37.7);
+    --nk-orange-950: oklch(27.6% 0.079 36.7);
+
+    --nk-amber-50: oklch(98.8% 0.016 94.9);
+    --nk-amber-100: oklch(96% 0.069 96.5);
+    --nk-amber-200: oklch(92.4% 0.118 95.3);
+    --nk-amber-300: oklch(87.9% 0.167 92.1);
+    --nk-amber-400: oklch(82.8% 0.179 84.4);
+    --nk-amber-500: oklch(76.9% 0.178 70.1);
+    --nk-amber-600: oklch(66.6% 0.169 58.3);
+    --nk-amber-700: oklch(55.5% 0.153 49.1);
+    --nk-amber-800: oklch(48.1% 0.135 46.1);
+    --nk-amber-900: oklch(40.4% 0.112 45.4);
+    --nk-amber-950: oklch(28.9% 0.077 46.2);
+
+    --nk-yellow-50: oklch(98.7% 0.021 102.2);
+    --nk-yellow-100: oklch(97.3% 0.071 103.1);
+    --nk-yellow-200: oklch(94.5% 0.13 101.7);
+    --nk-yellow-300: oklch(90.4% 0.175 97.8);
+    --nk-yellow-400: oklch(85.2% 0.189 91.9);
+    --nk-yellow-500: oklch(79.5% 0.174 86);
+    --nk-yellow-600: oklch(68.1% 0.152 75.8);
+    --nk-yellow-700: oklch(55.6% 0.125 66.6);
+    --nk-yellow-800: oklch(48.3% 0.111 61.5);
+    --nk-yellow-900: oklch(41.1% 0.094 57.5);
+    --nk-yellow-950: oklch(29.6% 0.067 54.1);
+
+    --nk-lime-50: oklch(98.6% 0.026 120.7);
+    --nk-lime-100: oklch(96.8% 0.076 122.4);
+    --nk-lime-200: oklch(93.8% 0.129 124.4);
+    --nk-lime-300: oklch(89.7% 0.195 126.6);
+    --nk-lime-400: oklch(84.1% 0.228 128.9);
+    --nk-lime-500: oklch(76.8% 0.223 130.8);
+    --nk-lime-600: oklch(64.8% 0.19 131.7);
+    --nk-lime-700: oklch(53.5% 0.147 131.5);
+    --nk-lime-800: oklch(46.2% 0.125 131);
+    --nk-lime-900: oklch(39.5% 0.1 131.1);
+    --nk-lime-950: oklch(28.4% 0.073 132);
+
+    --nk-green-50: oklch(98.1% 0.017 155.9);
+    --nk-green-100: oklch(96.3% 0.046 156.6);
+    --nk-green-200: oklch(92.6% 0.088 156.1);
+    --nk-green-300: oklch(86.7% 0.151 154.3);
+    --nk-green-400: oklch(79.8% 0.204 151.8);
+    --nk-green-500: oklch(72.3% 0.209 149.6);
+    --nk-green-600: oklch(62.7% 0.184 149.2);
+    --nk-green-700: oklch(52.9% 0.145 150);
+    --nk-green-800: oklch(45.6% 0.121 151.4);
+    --nk-green-900: oklch(38.3% 0.094 152.4);
+    --nk-green-950: oklch(27.6% 0.066 153.1);
+
+    --nk-emerald-50: oklch(97.9% 0.019 165.4);
+    --nk-emerald-100: oklch(95% 0.056 164.5);
+    --nk-emerald-200: oklch(90.6% 0.095 164);
+    --nk-emerald-300: oklch(84.2% 0.143 164.5);
+    --nk-emerald-400: oklch(76.7% 0.167 163.3);
+    --nk-emerald-500: oklch(69.6% 0.16 162.5);
+    --nk-emerald-600: oklch(59.6% 0.135 163.2);
+    --nk-emerald-700: oklch(50.8% 0.108 165.5);
+    --nk-emerald-800: oklch(44% 0.09 167);
+    --nk-emerald-900: oklch(36.9% 0.074 169.2);
+    --nk-emerald-950: oklch(27.1% 0.052 172.3);
+
+    --nk-teal-50: oklch(98.3% 0.011 180.8);
+    --nk-teal-100: oklch(95.5% 0.057 180.5);
+    --nk-teal-200: oklch(91.1% 0.097 180.6);
+    --nk-teal-300: oklch(85.2% 0.136 181);
+    --nk-teal-400: oklch(77.8% 0.142 181.9);
+    --nk-teal-500: oklch(70.3% 0.13 182.5);
+    --nk-teal-600: oklch(60.1% 0.108 184.6);
+    --nk-teal-700: oklch(51% 0.089 186.6);
+    --nk-teal-800: oklch(44.5% 0.077 187.6);
+    --nk-teal-900: oklch(37.6% 0.062 189);
+    --nk-teal-950: oklch(28.6% 0.047 192);
+
+    --nk-cyan-50: oklch(98.3% 0.017 201.2);
+    --nk-cyan-100: oklch(95.8% 0.045 202.8);
+    --nk-cyan-200: oklch(91.8% 0.083 205);
+    --nk-cyan-300: oklch(86.2% 0.126 207.5);
+    --nk-cyan-400: oklch(78.9% 0.144 211.5);
+    --nk-cyan-500: oklch(71.5% 0.133 215.3);
+    --nk-cyan-600: oklch(61% 0.116 221.6);
+    --nk-cyan-700: oklch(52% 0.097 223.4);
+    --nk-cyan-800: oklch(45.5% 0.085 224.7);
+    --nk-cyan-900: oklch(38.8% 0.07 227.1);
+    --nk-cyan-950: oklch(30.9% 0.056 229.8);
+
+    --nk-sky-50: oklch(97.8% 0.011 237.7);
+    --nk-sky-100: oklch(94.9% 0.026 234.2);
+    --nk-sky-200: oklch(90% 0.059 232.1);
+    --nk-sky-300: oklch(82.7% 0.108 230.2);
+    --nk-sky-400: oklch(75.3% 0.153 232.8);
+    --nk-sky-500: oklch(68.5% 0.159 237.3);
+    --nk-sky-600: oklch(58.8% 0.148 242);
+    --nk-sky-700: oklch(50.1% 0.124 242.7);
+    --nk-sky-800: oklch(44.5% 0.104 241.2);
+    --nk-sky-900: oklch(38.1% 0.089 241.3);
+    --nk-sky-950: oklch(30.1% 0.067 242.7);
+
+    --nk-blue-50: oklch(96.8% 0.015 255.3);
+    --nk-blue-100: oklch(93.6% 0.03 254.3);
+    --nk-blue-200: oklch(88.2% 0.059 253.8);
+    --nk-blue-300: oklch(80.4% 0.101 252.6);
+    --nk-blue-400: oklch(70.9% 0.155 254.7);
+    --nk-blue-500: oklch(62.1% 0.205 259.4);
+    --nk-blue-600: oklch(54.9% 0.244 262.8);
+    --nk-blue-700: oklch(48.4% 0.239 264.6);
+    --nk-blue-800: oklch(43.2% 0.201 265.2);
+    --nk-blue-900: oklch(37% 0.15 266);
+    --nk-blue-950: oklch(28.8% 0.087 267.6);
+
+    --nk-indigo-50: oklch(96.2% 0.018 272.3);
+    --nk-indigo-100: oklch(93% 0.033 272.8);
+    --nk-indigo-200: oklch(87% 0.063 273.7);
+    --nk-indigo-300: oklch(78% 0.112 275.2);
+    --nk-indigo-400: oklch(67.6% 0.173 276.7);
+    --nk-indigo-500: oklch(58.4% 0.23 277.2);
+    --nk-indigo-600: oklch(51.4% 0.257 277);
+    --nk-indigo-700: oklch(45.3% 0.241 277);
+    --nk-indigo-800: oklch(40.7% 0.196 277.4);
+    --nk-indigo-900: oklch(34.9% 0.146 278.8);
+    --nk-indigo-950: oklch(26.4% 0.088 281.2);
+
+    --nk-violet-50: oklch(96.8% 0.016 294);
+    --nk-violet-100: oklch(94.5% 0.027 293.9);
+    --nk-violet-200: oklch(89.2% 0.058 293.8);
+    --nk-violet-300: oklch(80.8% 0.106 293.4);
+    --nk-violet-400: oklch(70.3% 0.173 293.4);
+    --nk-violet-500: oklch(60.6% 0.24 292.7);
+    --nk-violet-600: oklch(54.2% 0.279 292.7);
+    --nk-violet-700: oklch(48.8% 0.269 292.7);
+    --nk-violet-800: oklch(43.8% 0.234 293.2);
+    --nk-violet-900: oklch(37.1% 0.192 292.8);
+    --nk-violet-950: oklch(28.8% 0.139 291.6);
+
+    --nk-purple-50: oklch(97.4% 0.014 308.2);
+    --nk-purple-100: oklch(95.2% 0.029 307.4);
+    --nk-purple-200: oklch(90.1% 0.061 306.7);
+    --nk-purple-300: oklch(82.1% 0.114 306.3);
+    --nk-purple-400: oklch(71.4% 0.193 305.5);
+    --nk-purple-500: oklch(62.7% 0.255 303.9);
+    --nk-purple-600: oklch(55.7% 0.286 302.3);
+    --nk-purple-700: oklch(49.6% 0.261 302.2);
+    --nk-purple-800: oklch(44.1% 0.22 303.7);
+    --nk-purple-900: oklch(37.3% 0.182 304);
+    --nk-purple-950: oklch(29.5% 0.145 303.3);
+
+    --nk-fuchsia-50: oklch(97.7% 0.017 319.8);
+    --nk-fuchsia-100: oklch(95.2% 0.035 319.4);
+    --nk-fuchsia-200: oklch(90.3% 0.075 319.7);
+    --nk-fuchsia-300: oklch(82.9% 0.143 321.2);
+    --nk-fuchsia-400: oklch(74.3% 0.228 322.1);
+    --nk-fuchsia-500: oklch(66.5% 0.291 322.3);
+    --nk-fuchsia-600: oklch(59.1% 0.283 322.9);
+    --nk-fuchsia-700: oklch(51.8% 0.243 323.8);
+    --nk-fuchsia-800: oklch(45.9% 0.211 324.8);
+    --nk-fuchsia-900: oklch(39.1% 0.171 325.5);
+    --nk-fuchsia-950: oklch(30.1% 0.135 325.7);
+
+    --nk-pink-50: oklch(97.1% 0.015 343.1);
+    --nk-pink-100: oklch(94.9% 0.027 342.4);
+    --nk-pink-200: oklch(89.9% 0.062 343.3);
+    --nk-pink-300: oklch(81.7% 0.125 346);
+    --nk-pink-400: oklch(72.6% 0.196 349.7);
+    --nk-pink-500: oklch(65.2% 0.242 354.8);
+    --nk-pink-600: oklch(59.2% 0.239 0.2);
+    --nk-pink-700: oklch(52.5% 0.213 3.9);
+    --nk-pink-800: oklch(46.8% 0.188 3.7);
+    --nk-pink-900: oklch(39.8% 0.152 3.1);
+    --nk-pink-950: oklch(29.3% 0.109 3.2);
+
+    --nk-rose-50: oklch(96.9% 0.015 12.9);
+    --nk-rose-100: oklch(94.2% 0.027 11.4);
+    --nk-rose-200: oklch(89% 0.058 10.9);
+    --nk-rose-300: oklch(80.7% 0.112 11.2);
+    --nk-rose-400: oklch(71.3% 0.184 13.5);
+    --nk-rose-500: oklch(64.5% 0.244 16.2);
+    --nk-rose-600: oklch(58.6% 0.243 17.6);
+    --nk-rose-700: oklch(51.4% 0.212 16.9);
+    --nk-rose-800: oklch(46.4% 0.185 13.4);
+    --nk-rose-900: oklch(40% 0.157 10.9);
+    --nk-rose-950: oklch(28.1% 0.107 11.4);
+
+    /* The tint axis shared by Badge, Alert, and Toast. Semantic families
+       default to the same steps as their hue families, so `info` renders
+       exactly like `blue`; override --nk-palette-{semantic} to retheme the
+       tints without moving the raw hues, and --nk-color-{semantic} to move
+       fills and markers. Decorative hues stay the color they name. */
+    --nk-palette-neutral: var(--nk-zinc-400);
+    --nk-palette-info: var(--nk-blue-400);
+    --nk-palette-success: var(--nk-green-400);
+    --nk-palette-warning: var(--nk-amber-400);
+    --nk-palette-destructive: var(--nk-red-400);
+
+    --nk-palette-red: var(--nk-red-400);
+    --nk-palette-orange: var(--nk-orange-400);
+    --nk-palette-amber: var(--nk-amber-400);
+    --nk-palette-yellow: var(--nk-yellow-400);
+    --nk-palette-lime: var(--nk-lime-400);
+    --nk-palette-green: var(--nk-green-400);
+    --nk-palette-emerald: var(--nk-emerald-400);
+    --nk-palette-teal: var(--nk-teal-400);
+    --nk-palette-cyan: var(--nk-cyan-400);
+    --nk-palette-sky: var(--nk-sky-400);
+    --nk-palette-blue: var(--nk-blue-400);
+    --nk-palette-indigo: var(--nk-indigo-400);
+    --nk-palette-violet: var(--nk-violet-400);
+    --nk-palette-purple: var(--nk-purple-400);
+    --nk-palette-fuchsia: var(--nk-fuchsia-400);
+    --nk-palette-pink: var(--nk-pink-400);
+    --nk-palette-rose: var(--nk-rose-400);
   }
 
   :where(:root, [data-theme="light"]) {
     color-scheme: light;
 
-    --nk-color-canvas: oklch(0.993 0 0);
-    --nk-color-surface: oklch(1 0 0);
-    --nk-color-elevated: oklch(0.985 0 0);
-    --nk-color-foreground: oklch(0.21 0.006 285.885);
-    --nk-color-muted: oklch(0.967 0.001 286.375);
-    --nk-color-muted-foreground: oklch(0.552 0.016 285.938);
-    --nk-color-border: oklch(0.92 0.004 286.32);
-    --nk-color-focus: oklch(0.546 0.245 262.881);
-    --nk-color-primary: oklch(0.274 0.006 286.033);
-    --nk-color-primary-foreground: oklch(1 0 0);
-    --nk-color-neutral: oklch(0.552 0.016 285.938);
-    --nk-color-neutral-content: oklch(0.37 0.013 285.805);
-    --nk-color-info: oklch(0.546 0.245 262.881);
-    --nk-color-info-content: oklch(0.424 0.199 265.638);
-    --nk-color-success: oklch(0.627 0.194 149.214);
-    --nk-color-success-content: oklch(0.393 0.095 152.535);
-    --nk-color-warning: oklch(0.681 0.162 75.834);
-    --nk-color-warning-content: oklch(0.421 0.095 57.708);
-    --nk-color-danger: oklch(0.577 0.237 25.331);
-    --nk-color-danger-foreground: oklch(1 0 0);
-    --nk-color-danger-content: oklch(0.444 0.177 26.899);
-    --nk-color-overlay: oklch(0 0 0 / 0.5);
+    --nk-color-canvas: color-mix(
+      in oklab,
+      var(--nk-zinc-50) 47%,
+      var(--nk-white)
+    );
+    --nk-color-surface: var(--nk-white);
+    --nk-color-elevated: var(--nk-zinc-50);
+    --nk-color-foreground: var(--nk-zinc-900);
+    --nk-color-muted: var(--nk-zinc-100);
+    --nk-color-muted-foreground: var(--nk-zinc-500);
+    --nk-color-border: var(--nk-zinc-200);
+    --nk-color-focus: var(--nk-blue-600);
+    --nk-color-primary: var(--nk-zinc-800);
+    --nk-color-primary-foreground: var(--nk-white);
+    --nk-color-neutral: var(--nk-zinc-500);
+    --nk-color-neutral-content: var(--nk-zinc-700);
+    --nk-color-info: var(--nk-blue-600);
+    --nk-color-info-content: var(--nk-blue-800);
+    --nk-color-success: var(--nk-green-600);
+    --nk-color-success-content: var(--nk-green-900);
+    --nk-color-warning: var(--nk-yellow-600);
+    --nk-color-warning-content: var(--nk-yellow-900);
+    --nk-color-destructive: var(--nk-red-600);
+    --nk-color-destructive-foreground: var(--nk-white);
+    --nk-color-destructive-content: var(--nk-red-800);
+    --nk-color-overlay: color-mix(in oklab, var(--nk-black) 50%, transparent);
+
+    --nk-palette-neutral-content: var(--nk-zinc-700);
+    --nk-palette-info-content: var(--nk-blue-800);
+    --nk-palette-success-content: var(--nk-green-800);
+    --nk-palette-warning-content: var(--nk-amber-800);
+    --nk-palette-destructive-content: var(--nk-red-700);
+
+    --nk-palette-red-content: var(--nk-red-700);
+    --nk-palette-orange-content: var(--nk-orange-800);
+    --nk-palette-amber-content: var(--nk-amber-800);
+    --nk-palette-yellow-content: var(--nk-yellow-800);
+    --nk-palette-lime-content: var(--nk-lime-800);
+    --nk-palette-green-content: var(--nk-green-800);
+    --nk-palette-emerald-content: var(--nk-emerald-800);
+    --nk-palette-teal-content: var(--nk-teal-800);
+    --nk-palette-cyan-content: var(--nk-cyan-800);
+    --nk-palette-sky-content: var(--nk-sky-800);
+    --nk-palette-blue-content: var(--nk-blue-800);
+    --nk-palette-indigo-content: var(--nk-indigo-700);
+    --nk-palette-violet-content: var(--nk-violet-700);
+    --nk-palette-purple-content: var(--nk-purple-700);
+    --nk-palette-fuchsia-content: var(--nk-fuchsia-700);
+    --nk-palette-pink-content: var(--nk-pink-700);
+    --nk-palette-rose-content: var(--nk-rose-700);
   }
 
   @media (prefers-color-scheme: dark) {
     :where(:root:not([data-theme])) {
       color-scheme: dark;
 
-      --nk-color-canvas: oklch(0.141 0.005 285.823);
-      --nk-color-surface: oklch(0.178 0.006 285.885);
-      --nk-color-elevated: oklch(0.21 0.006 285.885);
-      --nk-color-foreground: oklch(0.967 0.001 286.375);
-      --nk-color-muted: oklch(0.274 0.006 286.033);
-      --nk-color-muted-foreground: oklch(0.705 0.015 286.067);
-      --nk-color-border: oklch(0.37 0.013 285.805);
-      --nk-color-focus: oklch(0.488 0.243 264.376);
-      --nk-color-primary: oklch(1 0 0);
-      --nk-color-primary-foreground: oklch(0.274 0.006 286.033);
-      --nk-color-neutral: oklch(0.705 0.015 286.067);
-      --nk-color-neutral-content: oklch(0.92 0.004 286.32);
-      --nk-color-info: oklch(0.623 0.214 259.815);
-      --nk-color-info-content: oklch(0.882 0.059 254.128);
-      --nk-color-success: oklch(0.723 0.219 149.579);
-      --nk-color-success-content: oklch(0.925 0.084 155.995);
-      --nk-color-warning: oklch(0.828 0.189 84.429);
-      --nk-color-warning-content: oklch(0.945 0.129 101.54);
-      --nk-color-danger: oklch(0.577 0.245 27.325);
-      --nk-color-danger-foreground: oklch(0.985 0 0);
-      --nk-color-danger-content: oklch(0.704 0.191 22.216);
-      --nk-color-overlay: oklch(0 0 0 / 0.65);
+      --nk-color-canvas: var(--nk-zinc-950);
+      --nk-color-surface: color-mix(
+        in oklab,
+        var(--nk-zinc-950) 45%,
+        var(--nk-zinc-900)
+      );
+      --nk-color-elevated: var(--nk-zinc-900);
+      --nk-color-foreground: var(--nk-zinc-100);
+      --nk-color-muted: var(--nk-zinc-800);
+      --nk-color-muted-foreground: var(--nk-zinc-400);
+      --nk-color-border: var(--nk-zinc-800);
+      --nk-color-focus: var(--nk-blue-700);
+      --nk-color-primary: var(--nk-white);
+      --nk-color-primary-foreground: var(--nk-zinc-800);
+      --nk-color-neutral: var(--nk-zinc-400);
+      --nk-color-neutral-content: var(--nk-zinc-200);
+      --nk-color-info: var(--nk-blue-500);
+      --nk-color-info-content: var(--nk-blue-200);
+      --nk-color-success: var(--nk-green-500);
+      --nk-color-success-content: var(--nk-green-200);
+      --nk-color-warning: var(--nk-amber-400);
+      --nk-color-warning-content: var(--nk-yellow-200);
+      --nk-color-destructive: var(--nk-red-600);
+      --nk-color-destructive-foreground: var(--nk-zinc-50);
+      --nk-color-destructive-content: var(--nk-red-400);
+      --nk-color-overlay: color-mix(in oklab, var(--nk-black) 65%, transparent);
+
+      --nk-palette-neutral-content: var(--nk-zinc-200);
+      --nk-palette-info-content: var(--nk-blue-200);
+      --nk-palette-success-content: var(--nk-green-200);
+      --nk-palette-warning-content: var(--nk-amber-200);
+      --nk-palette-destructive-content: var(--nk-red-200);
+
+      --nk-palette-red-content: var(--nk-red-200);
+      --nk-palette-orange-content: var(--nk-orange-200);
+      --nk-palette-amber-content: var(--nk-amber-200);
+      --nk-palette-yellow-content: var(--nk-yellow-200);
+      --nk-palette-lime-content: var(--nk-lime-200);
+      --nk-palette-green-content: var(--nk-green-200);
+      --nk-palette-emerald-content: var(--nk-emerald-200);
+      --nk-palette-teal-content: var(--nk-teal-200);
+      --nk-palette-cyan-content: var(--nk-cyan-200);
+      --nk-palette-sky-content: var(--nk-sky-200);
+      --nk-palette-blue-content: var(--nk-blue-200);
+      --nk-palette-indigo-content: var(--nk-indigo-200);
+      --nk-palette-violet-content: var(--nk-violet-200);
+      --nk-palette-purple-content: var(--nk-purple-200);
+      --nk-palette-fuchsia-content: var(--nk-fuchsia-200);
+      --nk-palette-pink-content: var(--nk-pink-200);
+      --nk-palette-rose-content: var(--nk-rose-200);
     }
   }
 
   :where([data-theme="dark"]) {
     color-scheme: dark;
 
-    --nk-color-canvas: oklch(0.141 0.005 285.823);
-    --nk-color-surface: oklch(0.178 0.006 285.885);
-    --nk-color-elevated: oklch(0.21 0.006 285.885);
-    --nk-color-foreground: oklch(0.967 0.001 286.375);
-    --nk-color-muted: oklch(0.274 0.006 286.033);
-    --nk-color-muted-foreground: oklch(0.705 0.015 286.067);
-    --nk-color-border: oklch(0.37 0.013 285.805);
-    --nk-color-focus: oklch(0.488 0.243 264.376);
-    --nk-color-primary: oklch(1 0 0);
-    --nk-color-primary-foreground: oklch(0.274 0.006 286.033);
-    --nk-color-neutral: oklch(0.705 0.015 286.067);
-    --nk-color-neutral-content: oklch(0.92 0.004 286.32);
-    --nk-color-info: oklch(0.623 0.214 259.815);
-    --nk-color-info-content: oklch(0.882 0.059 254.128);
-    --nk-color-success: oklch(0.723 0.219 149.579);
-    --nk-color-success-content: oklch(0.925 0.084 155.995);
-    --nk-color-warning: oklch(0.828 0.189 84.429);
-    --nk-color-warning-content: oklch(0.945 0.129 101.54);
-    --nk-color-danger: oklch(0.577 0.245 27.325);
-    --nk-color-danger-foreground: oklch(0.985 0 0);
-    --nk-color-danger-content: oklch(0.704 0.191 22.216);
-    --nk-color-overlay: oklch(0 0 0 / 0.65);
+    --nk-color-canvas: var(--nk-zinc-950);
+    --nk-color-surface: color-mix(
+      in oklab,
+      var(--nk-zinc-950) 45%,
+      var(--nk-zinc-900)
+    );
+    --nk-color-elevated: var(--nk-zinc-900);
+    --nk-color-foreground: var(--nk-zinc-100);
+    --nk-color-muted: var(--nk-zinc-800);
+    --nk-color-muted-foreground: var(--nk-zinc-400);
+    --nk-color-border: var(--nk-zinc-800);
+    --nk-color-focus: var(--nk-blue-700);
+    --nk-color-primary: var(--nk-white);
+    --nk-color-primary-foreground: var(--nk-zinc-800);
+    --nk-color-neutral: var(--nk-zinc-400);
+    --nk-color-neutral-content: var(--nk-zinc-200);
+    --nk-color-info: var(--nk-blue-500);
+    --nk-color-info-content: var(--nk-blue-200);
+    --nk-color-success: var(--nk-green-500);
+    --nk-color-success-content: var(--nk-green-200);
+    --nk-color-warning: var(--nk-amber-400);
+    --nk-color-warning-content: var(--nk-yellow-200);
+    --nk-color-destructive: var(--nk-red-600);
+    --nk-color-destructive-foreground: var(--nk-zinc-50);
+    --nk-color-destructive-content: var(--nk-red-400);
+    --nk-color-overlay: color-mix(in oklab, var(--nk-black) 65%, transparent);
+
+    --nk-palette-neutral-content: var(--nk-zinc-200);
+    --nk-palette-info-content: var(--nk-blue-200);
+    --nk-palette-success-content: var(--nk-green-200);
+    --nk-palette-warning-content: var(--nk-amber-200);
+    --nk-palette-destructive-content: var(--nk-red-200);
+
+    --nk-palette-red-content: var(--nk-red-200);
+    --nk-palette-orange-content: var(--nk-orange-200);
+    --nk-palette-amber-content: var(--nk-amber-200);
+    --nk-palette-yellow-content: var(--nk-yellow-200);
+    --nk-palette-lime-content: var(--nk-lime-200);
+    --nk-palette-green-content: var(--nk-green-200);
+    --nk-palette-emerald-content: var(--nk-emerald-200);
+    --nk-palette-teal-content: var(--nk-teal-200);
+    --nk-palette-cyan-content: var(--nk-cyan-200);
+    --nk-palette-sky-content: var(--nk-sky-200);
+    --nk-palette-blue-content: var(--nk-blue-200);
+    --nk-palette-indigo-content: var(--nk-indigo-200);
+    --nk-palette-violet-content: var(--nk-violet-200);
+    --nk-palette-purple-content: var(--nk-purple-200);
+    --nk-palette-fuchsia-content: var(--nk-fuchsia-200);
+    --nk-palette-pink-content: var(--nk-pink-200);
+    --nk-palette-rose-content: var(--nk-rose-200);
   }
 
   :where(:root, [data-theme]) {
@@ -198,7 +621,7 @@
       var(--nk-color-primary),
       transparent 10%
     );
-    --nk-color-danger-hover: light-dark(
+    --nk-color-destructive-hover: light-dark(
       oklch(0.54 0.237 25.331),
       oklch(0.59 0.237 25.331)
     );
@@ -233,7 +656,7 @@
   /* Nitro-owned boxes never establish a min-content floor, so long slot
      content shrinks instead of overflowing its flex or grid parent. */
   :where([data-nk], [data-nk] [data-slot]) {
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where(html, :host) {
@@ -333,7 +756,7 @@
   }
 
   :where(input)::-webkit-date-and-time-value {
-    min-height: 1lh;
+    min-block-size: 1lh;
     text-align: inherit;
   }
 
@@ -348,7 +771,7 @@
 
   :where(input)::-webkit-inner-spin-button,
   :where(input)::-webkit-outer-spin-button {
-    height: auto;
+    block-size: auto;
   }
 
   :where(input):-moz-ui-invalid {
@@ -378,12 +801,12 @@
   }
 
   :where(img, video) {
-    max-width: 100%;
-    height: auto;
+    max-inline-size: 100%;
+    block-size: auto;
   }
 
   :where(hr) {
-    height: 0;
+    block-size: 0;
     color: inherit;
     border-top-width: var(--nk-border-width);
   }
@@ -426,8 +849,8 @@
         > [data-slot="accordion-trigger"]
     ) {
     display: flex;
-    width: 100%;
-    min-height: 2.75rem;
+    inline-size: 100%;
+    min-block-size: var(--nk-control-height-lg);
     align-items: center;
     justify-content: space-between;
     gap: calc(var(--nk-space) * 3);
@@ -466,8 +889,8 @@
         > [data-slot="accordion-icon"]
     ) {
     flex: none;
-    width: 1rem;
-    height: 1rem;
+    inline-size: var(--nk-icon-size-sm);
+    block-size: var(--nk-icon-size-sm);
     color: var(--nk-color-muted-foreground);
     transition:
       color var(--nk-duration-fast) var(--nk-ease),
@@ -532,7 +955,6 @@
     --_nk-alert-background: var(--nk-color-surface);
     --_nk-alert-border: var(--nk-color-border);
     --_nk-alert-foreground: var(--nk-color-foreground);
-    --_nk-alert-tint-strength: 12%;
 
     position: relative;
     display: grid;
@@ -549,8 +971,8 @@
   }
 
   :where([data-nk="alert"] > [data-slot="alert-title"]) {
-    font-size: var(--nk-text-base);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-compact-size);
+    font-weight: var(--nk-title-compact-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -559,11 +981,20 @@
     grid-template-columns: auto minmax(0, 1fr);
   }
 
+  /* Centered on the title first line, whatever size the title role
+     resolves to, instead of a hand-tuned nudge for one size. */
   :where([data-nk="alert"] > [data-slot="alert-icon"]) {
+    --_nk-alert-icon-size: var(--nk-icon-size-md);
+
     grid-row: 1 / -1;
-    inline-size: 1.25rem;
-    block-size: 1.25rem;
-    margin-block-start: 0.0625rem;
+    inline-size: var(--_nk-alert-icon-size);
+    block-size: var(--_nk-alert-icon-size);
+    margin-block-start: calc(
+      (
+          var(--nk-title-compact-size) * var(--nk-leading-tight) -
+            var(--_nk-alert-icon-size)
+        ) / 2
+    );
   }
 
   :where(
@@ -583,30 +1014,13 @@
 }
 
 @layer nitro-kit.variant {
+  /* Colour, tint strength, and appearance switching all come from the shared
+     semantic palette, so an Alert and a Toast of the same variant render
+     identically. */
   :where([data-nk="alert"][data-variant]) {
-    --_nk-alert-background: color-mix(
-      in oklab,
-      var(--_nk-palette-tint) var(--_nk-alert-tint-strength),
-      transparent
-    );
-    --_nk-alert-border: color-mix(
-      in oklab,
-      var(--_nk-palette-tint) 45%,
-      transparent
-    );
-    --_nk-alert-foreground: var(--_nk-palette-light);
-  }
-
-  :where([data-theme="dark"] [data-nk="alert"][data-variant]) {
-    --_nk-alert-foreground: var(--_nk-palette-dark);
-    --_nk-alert-tint-strength: 20%;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :where(:root:not([data-theme]) [data-nk="alert"][data-variant]) {
-      --_nk-alert-foreground: var(--_nk-palette-dark);
-      --_nk-alert-tint-strength: 20%;
-    }
+    --_nk-alert-background: var(--_nk-semantic-surface);
+    --_nk-alert-border: var(--_nk-semantic-border);
+    --_nk-alert-foreground: var(--_nk-semantic-content);
   }
 }
 
@@ -678,6 +1092,58 @@
     line-height: var(--nk-leading-tight);
   }
 
+  /* A collapsible label is a row like the items around it: same height,
+     same inline padding, symmetric block margins, and the same hover
+     treatment, so the disclosure target is as easy to hit as a destination. */
+  :where(
+      [data-nk="app-navigation"]
+        summary[data-slot="app-navigation-section-label"]
+    ) {
+    display: flex;
+    gap: var(--nk-space);
+    align-items: center;
+    min-block-size: var(--nk-control-height-md);
+    margin: var(--nk-space) 0;
+    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    list-style: none;
+    user-select: none;
+    cursor: pointer;
+    border-radius: var(--nk-radius-lg);
+    transition:
+      color var(--nk-duration-normal) var(--nk-ease),
+      background-color var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  :where(
+      [data-nk="app-navigation"]
+        summary[data-slot="app-navigation-section-label"]::-webkit-details-marker
+    ) {
+    display: none;
+  }
+
+  :where([data-nk="app-navigation"] [data-slot="app-navigation-section-icon"]) {
+    flex: none;
+    inline-size: var(--nk-icon-size-xs);
+    block-size: var(--nk-icon-size-xs);
+    transition: transform var(--nk-duration-fast) var(--nk-ease);
+  }
+
+  :where(
+      [data-nk="app-navigation"]
+        [data-slot="app-navigation-section-disclosure"]:not([open])
+        [data-slot="app-navigation-section-icon"]
+    ) {
+    transform: rotate(-90deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+        [data-nk="app-navigation"] [data-slot="app-navigation-section-icon"]
+      ) {
+      transition-duration: 0.01ms;
+    }
+  }
+
   :where([data-nk="app-navigation"] [data-slot="app-navigation-item"]) {
     flex: 0 0 auto;
     min-inline-size: 0;
@@ -693,7 +1159,7 @@
     font-weight: var(--nk-font-weight-medium);
     line-height: var(--nk-leading-tight);
     text-decoration: none;
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -709,6 +1175,7 @@
 
   :where(
       [data-nk="app-navigation"] [data-slot="app-navigation-item-icon"],
+      [data-nk="app-navigation"] [data-slot="app-navigation-item-icon-end"],
       [data-nk="app-navigation"] [data-slot="app-navigation-item-badge"]
     ) {
     flex: 0 0 auto;
@@ -746,13 +1213,32 @@
 
   @media (hover: hover) {
     :where(
-        [data-nk="app-navigation"] [data-slot="app-navigation-item-link"]:hover
+        [data-nk="app-navigation"] [data-slot="app-navigation-item-link"]:hover,
+        [data-nk="app-navigation"]
+          summary[data-slot="app-navigation-section-label"]:hover
       ) {
       color: var(--nk-app-shell-sidebar-accent-foreground);
       background: var(--nk-app-shell-sidebar-accent);
     }
   }
 
+  :where(
+      [data-nk="app-navigation"]
+        summary[data-slot="app-navigation-section-label"]:focus-visible
+    ) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: calc(var(--nk-focus-offset) * -1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+        [data-nk="app-navigation"]
+          summary[data-slot="app-navigation-section-label"]
+      ) {
+      transition-duration: 0.01ms;
+    }
+  }
+
   :where(
       [data-nk="app-navigation"]
         [data-slot="app-navigation-item-link"]:focus-visible
@@ -795,7 +1281,7 @@
     color: var(--nk-color-primary-foreground);
     text-decoration: none;
     background: var(--nk-color-primary);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     transform: translateY(calc(-100% - (var(--nk-space) * 4)));
     transition: transform var(--nk-duration-fast) var(--nk-ease);
@@ -850,7 +1336,7 @@
     cursor: pointer;
     background: transparent;
     border: 0;
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       background-color var(--nk-duration-fast) var(--nk-ease),
       scale var(--nk-duration-fast) var(--nk-ease);
@@ -1313,7 +1799,7 @@
       flex-direction: column;
       inline-size: min(
         var(--nk-app-shell-sidebar-width),
-        calc(100vw - (var(--nk-space) * 12))
+        calc(100% - (var(--nk-space) * 12))
       );
       max-inline-size: 100%;
       block-size: 100vh;
@@ -1391,16 +1877,24 @@
       [data-nk="appearance-picker"] > [data-slot="appearance-picker-legend"]
     ) {
     padding: 0;
-    font-size: var(--nk-text-sm);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-compact-size);
+    font-weight: var(--nk-title-compact-weight);
   }
 
+  /* The gap below the label exists only when there is a label. */
   :where(
       [data-nk="appearance-picker"] > [data-slot="appearance-picker-options"]
     ) {
     display: flex;
     flex-wrap: wrap;
     gap: calc(var(--nk-space) * 3);
+  }
+
+  :where(
+      [data-nk="appearance-picker"]
+        > [data-slot="appearance-picker-legend"]
+        + [data-slot="appearance-picker-options"]
+    ) {
     margin-block-start: calc(var(--nk-space) * 2);
   }
 
@@ -1411,15 +1905,17 @@
     display: grid;
   }
 
+  /* Like every other control, the segmented row fills its container and the
+     parent owns the available width; the segments share it equally. */
   :where(
       [data-nk="appearance-picker"][data-presentation="segmented"]
         > [data-slot="appearance-picker-options"]
     ) {
-    display: inline-flex;
+    display: flex;
     gap: 0;
     padding: var(--nk-space);
     background: var(--nk-color-muted);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where([data-nk="appearance-picker"] [data-slot="appearance-picker-option"]) {
@@ -1434,8 +1930,8 @@
   :where(
       [data-nk="appearance-picker"] [data-slot="appearance-picker-control"]
     ) {
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+    inline-size: var(--nk-choice-size-md);
+    block-size: var(--nk-choice-size-md);
     margin: 0;
     accent-color: var(--nk-color-primary);
     cursor: pointer;
@@ -1446,8 +1942,10 @@
         [data-slot="appearance-picker-option"]
     ) {
     position: relative;
+    flex: 1 1 0;
+    justify-content: center;
     padding-inline: calc(var(--nk-space) * 3);
-    border-radius: calc(var(--nk-radius-md) - var(--nk-space));
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
   }
 
   :where(
@@ -1471,7 +1969,7 @@
     font: inherit;
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 }
 
@@ -1510,8 +2008,8 @@
 /* Source: src/stylesheets/nitro_kit/components/auth_shell.css */
 @layer nitro-kit.base {
   :where([data-nk="auth-shell"]) {
-    width: 100%;
-    min-width: 0;
+    inline-size: 100%;
+    min-inline-size: 0;
     padding-block: calc(var(--nk-space) * 8);
     padding-inline: calc(var(--nk-space) * 4);
   }
@@ -1521,11 +2019,15 @@
 @layer nitro-kit.base {
   :where([data-nk="avatar"]) {
     position: relative;
+    /* The ring below carries a z-index, so without a stacking context it
+       would paint above overlapping siblings — in a stack, every ring showed
+       through the avatar covering it. Isolation keeps each avatar atomic. */
+    isolation: isolate;
     display: inline-grid;
     flex: none;
     place-items: center;
-    width: var(--_nk-avatar-size);
-    height: var(--_nk-avatar-size);
+    inline-size: var(--_nk-avatar-size);
+    block-size: var(--_nk-avatar-size);
     overflow: hidden;
     font-size: var(--_nk-avatar-font-size);
     font-weight: var(--nk-font-weight-medium);
@@ -1552,8 +2054,8 @@
       [data-nk="avatar"] > [data-slot="avatar-image"]
     ) {
     grid-area: 1 / 1;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     border-radius: inherit;
   }
 
@@ -1580,22 +2082,22 @@
 
 @layer nitro-kit.size {
   :where([data-nk="avatar"][data-size="xs"]) {
-    --_nk-avatar-size: 1.5rem;
+    --_nk-avatar-size: var(--nk-avatar-size-xs);
     --_nk-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
   :where([data-nk="avatar"][data-size="sm"]) {
-    --_nk-avatar-size: 2rem;
+    --_nk-avatar-size: var(--nk-avatar-size-sm);
     --_nk-avatar-font-size: var(--nk-text-xs);
   }
 
   :where([data-nk="avatar"][data-size="md"]) {
-    --_nk-avatar-size: 3rem;
+    --_nk-avatar-size: var(--nk-avatar-size-md);
     --_nk-avatar-font-size: var(--nk-text-sm);
   }
 
   :where([data-nk="avatar"][data-size="lg"]) {
-    --_nk-avatar-size: 4rem;
+    --_nk-avatar-size: var(--nk-avatar-size-lg);
     --_nk-avatar-font-size: var(--nk-text-lg);
   }
 }
@@ -1648,9 +2150,9 @@
     margin-inline-start: 0;
   }
 
+  /* The chip is one of the heads: same fill as the avatar fallbacks and the
+     same hairline ring, drawn as a real border since nothing overlaps it. */
   :where([data-nk="avatar-stack"] > [data-slot="avatar-stack-overflow"]) {
-    --_nk-avatar-stack-fill: var(--nk-color-elevated);
-
     /* Preceding avatars are positioned, so the overflow chip must be too or
        their paint order covers its leading "+". */
     position: relative;
@@ -1659,6 +2161,8 @@
     font-weight: var(--nk-font-weight-semibold);
     line-height: 1;
     color: var(--nk-color-muted-foreground);
+    border: var(--nk-border-width) solid
+      color-mix(in oklab, var(--nk-color-foreground) 10%, transparent);
     border-radius: var(--nk-radius-full);
   }
 
@@ -1666,8 +2170,8 @@
       [data-nk="avatar-stack"][data-size="xs"]
         > [data-slot="avatar-stack-overflow"]
     ) {
-    width: 1.5rem;
-    height: 1.5rem;
+    inline-size: var(--nk-avatar-size-xs);
+    block-size: var(--nk-avatar-size-xs);
     font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
@@ -1675,8 +2179,8 @@
       [data-nk="avatar-stack"][data-size="sm"]
         > [data-slot="avatar-stack-overflow"]
     ) {
-    width: 2rem;
-    height: 2rem;
+    inline-size: var(--nk-avatar-size-sm);
+    block-size: var(--nk-avatar-size-sm);
     font-size: var(--nk-text-xs);
   }
 
@@ -1684,8 +2188,8 @@
       [data-nk="avatar-stack"][data-size="md"]
         > [data-slot="avatar-stack-overflow"]
     ) {
-    width: 3rem;
-    height: 3rem;
+    inline-size: var(--nk-avatar-size-md);
+    block-size: var(--nk-avatar-size-md);
     font-size: var(--nk-text-sm);
   }
 
@@ -1693,8 +2197,8 @@
       [data-nk="avatar-stack"][data-size="lg"]
         > [data-slot="avatar-stack-overflow"]
     ) {
-    width: 4rem;
-    height: 4rem;
+    inline-size: var(--nk-avatar-size-lg);
+    block-size: var(--nk-avatar-size-lg);
     font-size: var(--nk-text-base);
   }
 }
@@ -1702,20 +2206,19 @@
 /* Source: src/stylesheets/nitro_kit/components/badge.css */
 @layer nitro-kit.base {
   :where([data-nk="badge"]) {
-    --_nk-badge-color: var(--_nk-palette-light);
     --_nk-badge-tint-strength: 20%;
 
     display: inline-flex;
     align-items: center;
-    max-width: 100%;
+    max-inline-size: 100%;
     font-weight: var(--nk-font-weight-medium);
     line-height: var(--nk-leading-tight);
-    color: var(--_nk-badge-color);
+    color: var(--_nk-semantic-content);
     white-space: nowrap;
     vertical-align: middle;
     background-color: color-mix(
       in oklab,
-      var(--_nk-palette-tint) var(--_nk-badge-tint-strength),
+      var(--_nk-semantic-accent) var(--_nk-badge-tint-strength),
       transparent
     );
     border: var(--nk-border-width) solid transparent;
@@ -1723,7 +2226,7 @@
   }
 
   :where([data-nk="badge"] > [data-slot="badge-label"]) {
-    min-width: 0;
+    min-inline-size: 0;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -1733,17 +2236,22 @@
 @layer nitro-kit.variant {
   :where([data-nk="badge"][data-variant="outline"]) {
     background-color: transparent;
-    border-color: color-mix(in oklab, var(--_nk-palette-tint) 50%, transparent);
+    border-color: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) 50%,
+      transparent
+    );
   }
 
+  /* Only the tint strength changes with appearance. The colours themselves come
+     from the `--nk-palette-*` roles, whose `-content` half already resolves per
+     appearance. */
   :where([data-theme="dark"] [data-nk="badge"]) {
-    --_nk-badge-color: var(--_nk-palette-dark);
     --_nk-badge-tint-strength: 40%;
   }
 
   @media (prefers-color-scheme: dark) {
     :where(:root:not([data-theme]) [data-nk="badge"]) {
-      --_nk-badge-color: var(--_nk-palette-dark);
       --_nk-badge-tint-strength: 40%;
     }
   }
@@ -1762,7 +2270,7 @@
 
 @layer nitro-kit.size {
   :where([data-nk="badge"][data-size="xs"]) {
-    padding: 0 calc(var(--nk-space) * 1.25);
+    padding: 0 var(--nk-space);
     font-size: var(--nk-text-xs);
   }
 
@@ -1781,11 +2289,11 @@
 @layer nitro-kit.base {
   :where([data-nk="button"]) {
     --_nk-button-height: var(--nk-control-height-md);
-    --_nk-button-padding: calc(var(--nk-space) * 4);
+    --_nk-button-padding: var(--nk-control-padding-inline);
     --_nk-button-icon-padding: calc(var(--nk-space) * 3);
     --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-lg));
     --_nk-button-font-size: var(--nk-text-sm);
-    --_nk-button-line-height: 1.25rem;
+    --_nk-button-line-height: var(--nk-leading-normal);
     --_nk-button-background: var(--nk-button-default-background);
     --_nk-button-hover-background: var(--nk-button-default-hover-background);
     --_nk-button-foreground: var(--nk-button-default-foreground);
@@ -1799,7 +2307,7 @@
       ),
       var(--nk-button-default-border)
     );
-    --_nk-button-shadow: 0 1px 2px 0 oklch(0 0 0 / 0.05);
+    --_nk-button-shadow: var(--nk-shadow-xs);
 
     position: relative;
     display: inline-flex;
@@ -1884,6 +2392,21 @@
     inline-size: var(--_nk-button-height);
     padding-inline: 0;
   }
+
+  /* Touch guidance wants a 44px minimum target. The rendered button keeps
+     its size; an invisible extension expands the tappable area to the large
+     control step on coarse pointers. */
+  @media (pointer: coarse) {
+    :where([data-nk="button"])::after {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      inline-size: max(100%, var(--nk-control-height-lg));
+      block-size: max(100%, var(--nk-control-height-lg));
+      content: "";
+      translate: -50% -50%;
+    }
+  }
 }
 
 @layer nitro-kit.variant {
@@ -1891,27 +2414,31 @@
     --_nk-button-background: var(--nk-color-primary);
     --_nk-button-hover-background: var(--nk-color-primary-hover);
     --_nk-button-foreground: var(--nk-color-primary-foreground);
-    --_nk-button-border: light-dark(oklch(0 0 0 / 0.1), transparent);
+    --_nk-button-border: light-dark(
+      color-mix(in oklab, var(--nk-black) 10%, transparent),
+      transparent
+    );
     --_nk-button-border-bottom: var(--_nk-button-border);
-    --_nk-button-shadow: inset 0 1px oklch(1 0 0 / 0.2);
+    --_nk-button-shadow: inset 0 1px
+      color-mix(in oklab, var(--nk-white) 20%, transparent);
   }
 
   :where([data-nk="button"][data-variant="destructive"]) {
-    --_nk-button-background: var(--nk-color-danger);
-    --_nk-button-hover-background: var(--nk-color-danger-hover);
-    --_nk-button-foreground: var(--nk-color-danger-foreground);
+    --_nk-button-background: var(--nk-color-destructive);
+    --_nk-button-hover-background: var(--nk-color-destructive-hover);
+    --_nk-button-foreground: var(--nk-color-destructive-foreground);
     --_nk-button-border-width: 0;
     --_nk-button-border: transparent;
     --_nk-button-border-bottom: transparent;
-    --_nk-button-shadow: inset 0 1px var(--nk-color-danger),
-      inset 0 2px oklch(1 0 0 / 0.15);
+    --_nk-button-shadow: inset 0 1px var(--nk-color-destructive),
+      inset 0 2px color-mix(in oklab, var(--nk-white) 15%, transparent);
   }
 
   :where([data-nk="button"][data-variant="ghost"]) {
     --_nk-button-background: transparent;
     --_nk-button-hover-background: light-dark(
-      oklch(0.274 0.006 286.033 / 0.05),
-      oklch(1 0 0 / 0.15)
+      color-mix(in oklab, var(--nk-zinc-800) 5%, transparent),
+      color-mix(in oklab, var(--nk-white) 15%, transparent)
     );
     --_nk-button-foreground: var(--nk-color-foreground);
     --_nk-button-border-width: 0;
@@ -1954,22 +2481,21 @@
     --_nk-button-icon-padding: var(--nk-space);
     --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-md));
     --_nk-button-font-size: var(--nk-text-xs);
-    --_nk-button-line-height: 1rem;
-    --_nk-button-avatar-size: 1rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 4);
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.75);
   }
 
   :where([data-nk="button"][data-size="sm"]) {
-    --_nk-button-height: calc(var(--nk-space) * 8);
+    --_nk-button-height: var(--nk-control-height-sm);
     --_nk-button-padding: calc(var(--nk-space) * 3);
     --_nk-button-icon-padding: calc(var(--nk-space) * 2);
     --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-md));
-    --_nk-button-avatar-size: 1.25rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 5);
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
   :where([data-nk="button"][data-size="md"]) {
-    --_nk-button-avatar-size: 1.5rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 6);
     --_nk-button-avatar-font-size: calc(var(--nk-text-xs) * 0.875);
   }
 
@@ -1977,7 +2503,7 @@
     --_nk-button-height: var(--nk-control-height-lg);
     --_nk-button-padding: calc(var(--nk-space) * 5);
     --_nk-button-icon-padding: calc(var(--nk-space) * 4);
-    --_nk-button-avatar-size: 1.75rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 7);
     --_nk-button-avatar-font-size: var(--nk-text-xs);
   }
 
@@ -1987,8 +2513,7 @@
     --_nk-button-icon-padding: calc(var(--nk-space) * 7);
     --_nk-button-radius: var(--nk-button-radius, var(--nk-radius-xl));
     --_nk-button-font-size: var(--nk-text-base);
-    --_nk-button-line-height: 1.5rem;
-    --_nk-button-avatar-size: 2rem;
+    --_nk-button-avatar-size: calc(var(--nk-space) * 8);
     --_nk-button-avatar-font-size: var(--nk-text-xs);
     gap: calc(var(--nk-space) * 4);
   }
@@ -2012,7 +2537,7 @@
     ) {
     pointer-events: none;
     cursor: default;
-    opacity: 0.75;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* Dark surfaces need more than reduced opacity to read a saturated
@@ -2027,7 +2552,7 @@
       ) {
       --_nk-button-background: color-mix(
         in oklab,
-        var(--nk-color-danger) 40%,
+        var(--nk-color-destructive) 40%,
         var(--nk-color-surface)
       );
     }
@@ -2042,7 +2567,7 @@
     ) {
     --_nk-button-background: color-mix(
       in oklab,
-      var(--nk-color-danger) 40%,
+      var(--nk-color-destructive) 40%,
       var(--nk-color-surface)
     );
   }
@@ -2078,8 +2603,8 @@
 
 @layer nitro-kit.compound {
   :where([data-nk="button"] > [data-slot="button-label"] > [data-nk="avatar"]) {
-    width: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
-    height: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
+    inline-size: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
+    block-size: min(var(--_nk-avatar-size), var(--_nk-button-avatar-size));
     font-size: min(
       var(--_nk-avatar-font-size),
       var(--_nk-button-avatar-font-size)
@@ -2173,8 +2698,8 @@
   }
 
   :where([data-nk="card"] > [data-slot="card-title"]) {
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -2235,41 +2760,38 @@
 
 /* Source: src/stylesheets/nitro_kit/components/checkbox.css */
 @layer nitro-kit.base {
+  /* Every box dimension derives from one choice size, so the two sizes are one
+     rule apart and the glyph keeps its proportions at either. The check stroke
+     is two border widths and its optical nudge is one, at every size. */
   :where([data-nk="checkbox"]) {
+    --_nk-choice-size: var(--nk-choice-size-md);
+
     display: inline-grid;
     min-inline-size: var(--nk-control-height-md);
     min-block-size: var(--nk-control-height-md);
     color: var(--nk-color-foreground);
   }
 
+  :where([data-nk="checkbox"][data-size="lg"]) {
+    --_nk-choice-size: var(--nk-choice-size-lg);
+  }
+
   :where([data-nk="checkbox"] > [data-slot="checkbox-label"]) {
     display: grid;
-    grid-template-columns: 1.125rem minmax(0, 1fr);
+    grid-template-columns: var(--_nk-choice-size) minmax(0, 1fr);
     gap: calc(var(--nk-space) * 2);
     align-items: center;
     min-block-size: var(--nk-control-height-md);
     cursor: pointer;
   }
 
-  :where([data-nk="checkbox"][data-size="lg"] > [data-slot="checkbox-label"]) {
-    grid-template-columns: 1.5rem minmax(0, 1fr);
-  }
-
   :where(
       [data-nk="checkbox"] [data-slot="checkbox-control"],
       [data-nk="checkbox"] [data-slot="checkbox-indicator"]
     ) {
     grid-area: 1 / 1;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-  }
-
-  :where(
-      [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-control"],
-      [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
-    ) {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--_nk-choice-size);
+    block-size: var(--_nk-choice-size);
   }
 
   :where([data-nk="checkbox"] [data-slot="checkbox-control"]) {
@@ -2294,20 +2816,13 @@
   }
 
   :where([data-nk="checkbox"] [data-slot="checkbox-indicator"])::after {
-    inline-size: 0.5rem;
-    block-size: 0.3rem;
+    inline-size: calc(var(--_nk-choice-size) * 0.44);
+    block-size: calc(var(--_nk-choice-size) * 0.27);
     content: "";
-    border-block-end: 0.125rem solid currentcolor;
-    border-inline-start: 0.125rem solid currentcolor;
+    border-block-end: calc(var(--nk-border-width) * 2) solid currentcolor;
+    border-inline-start: calc(var(--nk-border-width) * 2) solid currentcolor;
     opacity: 0;
-    transform: translateY(-0.0625rem) rotate(-45deg);
-  }
-
-  :where(
-      [data-nk="checkbox"][data-size="lg"] [data-slot="checkbox-indicator"]
-    )::after {
-    inline-size: 0.625rem;
-    block-size: 0.375rem;
+    transform: translateY(calc(var(--nk-border-width) * -1)) rotate(-45deg);
   }
 
   :where([data-nk="checkbox"] [data-slot="checkbox-label-text"]) {
@@ -2318,17 +2833,11 @@
   :where([data-nk="checkbox"] > [data-slot="checkbox-description"]) {
     display: block;
     margin-block-start: var(--nk-space);
-    padding-inline-start: calc(1.125rem + (var(--nk-space) * 2));
+    padding-inline-start: calc(var(--_nk-choice-size) + (var(--nk-space) * 2));
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     text-wrap: pretty;
   }
-
-  :where(
-      [data-nk="checkbox"][data-size="lg"] > [data-slot="checkbox-description"]
-    ) {
-    padding-inline-start: calc(1.5rem + (var(--nk-space) * 2));
-  }
 }
 
 @layer nitro-kit.state {
@@ -2355,21 +2864,14 @@
       [data-nk="checkbox"][data-state="indeterminate"]
         [data-slot="checkbox-indicator"]
     )::after {
-    inline-size: 0.55rem;
+    inline-size: calc(var(--_nk-choice-size) * 0.49);
     block-size: 0;
-    border-block-end: 0.125rem solid currentcolor;
+    border-block-end: calc(var(--nk-border-width) * 2) solid currentcolor;
     border-inline-start: 0;
     opacity: 1;
     transform: none;
   }
 
-  :where(
-      [data-nk="checkbox"][data-size="lg"][data-state="indeterminate"]
-        [data-slot="checkbox-indicator"]
-    )::after {
-    inline-size: 0.7rem;
-  }
-
   :where(
       [data-nk="checkbox"]
         [data-slot="checkbox-control"]:focus-visible
@@ -2381,12 +2883,12 @@
 
   :where([data-nk="checkbox"][data-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* A server-rendered error describes the value that was submitted. Once the
      user has interacted with the control and it satisfies its own constraints,
-     that error is stale, so the danger border stands down and the native
+     that error is stale, so the destructive border stands down and the native
      checked treatment takes over again. `:user-valid` never matches before the
      user touches the control, so an untouched invalid checkbox keeps its
      border. */
@@ -2395,7 +2897,13 @@
         [data-slot="checkbox-control"][aria-invalid="true"]:not(:user-valid)
         + [data-slot="checkbox-indicator"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="checkbox"] [data-slot="checkbox-indicator"]) {
+      transition-duration: 0.01ms;
+    }
   }
 }
 
@@ -2410,8 +2918,8 @@
 
   :where([data-nk="checkbox-group"] > [data-slot="checkbox-group-legend"]) {
     padding: 0;
-    font-size: var(--nk-text-sm);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-compact-size);
+    font-weight: var(--nk-title-compact-weight);
   }
 
   :where(
@@ -2447,7 +2955,7 @@
     padding: calc(var(--nk-space) * 3);
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 }
 
@@ -2494,8 +3002,8 @@
 
   :where([data-nk="combobox"] > [data-slot="combobox-status"]) {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -2509,7 +3017,7 @@
     position: fixed;
     z-index: 50;
     inline-size: max(var(--_nk-combobox-width, 12rem), 12rem);
-    max-inline-size: min(28rem, calc(100vw - (var(--nk-space) * 8)));
+    max-inline-size: min(28rem, calc(100% - (var(--nk-space) * 8)));
     max-block-size: 15rem;
     margin-block: var(--nk-space);
     padding: var(--nk-space);
@@ -2534,7 +3042,7 @@
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-normal);
     cursor: pointer;
-    border-radius: var(--nk-radius-md);
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -2595,7 +3103,7 @@
       [data-nk="combobox"] [data-slot="combobox-option"][aria-disabled="true"]
     ) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where(
@@ -2607,7 +3115,7 @@
   @keyframes nk-combobox-enter {
     from {
       opacity: 0;
-      transform: translateY(-0.25rem);
+      transform: translateY(calc(var(--nk-space) * -1));
     }
     to {
       opacity: 1;
@@ -2628,12 +3136,17 @@
     inline-size: 100%;
   }
 
+  /* The trigger reads as the search input it opens: Input's plain border,
+     radius, and surface instead of Button's raised treatment. */
   :where([data-nk="command-palette"] > [data-slot="command-palette-trigger"]) {
     justify-content: start;
     inline-size: 100%;
     color: var(--nk-color-muted-foreground);
     font-weight: var(--nk-font-weight-normal);
     background: var(--nk-color-surface);
+    border-color: var(--nk-color-border);
+    border-block-end-color: var(--nk-color-border);
+    border-radius: var(--nk-radius-lg);
     box-shadow: none;
   }
 
@@ -2657,6 +3170,17 @@
     white-space: nowrap;
   }
 
+  /* The chip floats at the trigger's end with the same inset on its top,
+     end, and bottom sides, so the trigger's text padding stands down. */
+  :where(
+      [data-nk="command-palette"]
+        > [data-slot="command-palette-trigger"]:has(
+          [data-slot="command-palette-shortcut"]
+        )
+    ) {
+    padding-inline-end: calc(var(--nk-space) * 2 - var(--nk-border-width));
+  }
+
   :where([data-nk="command-palette"] [data-slot="command-palette-shortcut"]) {
     flex: 0 0 auto;
     margin-inline-start: auto;
@@ -2671,6 +3195,16 @@
     border-radius: var(--nk-radius-sm);
   }
 
+  /* The panel hugs its results and stops growing at the cap; past it, the
+     shrinkable list scrolls. The flex display applies only while open, so
+     the closed dialog keeps the user-agent's display: none. */
+  :where(
+      [data-nk="command-palette"] > [data-slot="command-palette-panel"][open]
+    ) {
+    display: flex;
+    flex-direction: column;
+  }
+
   :where([data-nk="command-palette"] > [data-slot="command-palette-panel"]) {
     inline-size: min(calc(100% - (var(--nk-space) * 8)), var(--nk-content-md));
     max-block-size: min(36rem, calc(100dvh - (var(--nk-space) * 8)));
@@ -2684,6 +3218,16 @@
     box-shadow: var(--nk-shadow-lg);
   }
 
+  /* The modal palette anchors near the viewport top, so hugging grows and
+     shrinks downward and the top edge never jumps while filtering. The
+     non-enhanced fallback keeps the centered default. */
+  :where(
+      [data-nk="command-palette"] > [data-slot="command-palette-panel"]:modal
+    ) {
+    margin-block: 12dvh auto;
+    max-block-size: min(36rem, calc(88dvh - var(--nk-space) * 4));
+  }
+
   :where(
       [data-nk="command-palette"] > [data-slot="command-palette-panel"]
     )::backdrop {
@@ -2695,8 +3239,8 @@
       [data-nk="command-palette"] [data-slot="command-palette-status"]
     ) {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -2708,6 +3252,7 @@
 
   :where([data-nk="command-palette"] [data-slot="command-palette-search"]) {
     display: flex;
+    flex: 0 0 auto;
     gap: calc(var(--nk-space) * 2);
     align-items: center;
     padding: calc(var(--nk-space) * 2);
@@ -2771,8 +3316,10 @@
 
   :where([data-nk="command-palette"] [data-slot="command-palette-results"]) {
     display: grid;
+    flex: 0 1 auto;
     gap: var(--nk-space);
     max-block-size: 26rem;
+    min-block-size: 0;
     padding: calc(var(--nk-space) * 2);
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -2796,7 +3343,7 @@
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-normal);
     text-decoration: none;
-    border-radius: var(--nk-radius-md);
+    border-radius: calc(var(--nk-radius-xl) - var(--nk-space) * 2);
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -2821,6 +3368,25 @@
   }
 }
 
+@layer nitro-kit.compound {
+  /* The search strip is the field: the icon sits inside it and the nested
+     Input drops its own chrome, so the row reads as one input bounded by
+     the hairline below. The caret is the focus indicator, matching every
+     command palette — a ring on a borderless strip would show permanently,
+     because text inputs are always focus-visible. */
+  :where([data-nk="command-palette"] [data-slot="command-palette-input"]) {
+    background: transparent;
+    border-color: transparent;
+  }
+
+  :where(
+      [data-nk="command-palette"]
+        [data-slot="command-palette-input"]:focus-visible
+    ) {
+    outline: none;
+  }
+}
+
 @layer nitro-kit.state {
   @media (hover: hover) {
     :where(
@@ -2859,7 +3425,7 @@
   @keyframes nk-command-palette-enter {
     from {
       opacity: 0;
-      transform: translateY(-0.5rem) scale(0.98);
+      transform: translateY(calc(var(--nk-space) * -2)) scale(0.98);
     }
     to {
       opacity: 1;
@@ -2883,27 +3449,27 @@
 /* Source: src/stylesheets/nitro_kit/components/container.css */
 @layer nitro-kit.base {
   :where([data-nk="container"]) {
-    width: 100%;
-    min-width: 0;
+    inline-size: 100%;
+    min-inline-size: 0;
     margin-inline: auto;
   }
 }
 
 @layer nitro-kit.size {
   :where([data-nk="container"][data-size="sm"]) {
-    max-width: var(--nk-content-sm);
+    max-inline-size: var(--nk-content-sm);
   }
 
   :where([data-nk="container"][data-size="md"]) {
-    max-width: var(--nk-content-md);
+    max-inline-size: var(--nk-content-md);
   }
 
   :where([data-nk="container"][data-size="lg"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
   }
 
   :where([data-nk="container"][data-size="xl"]) {
-    max-width: var(--nk-content-xl);
+    max-inline-size: var(--nk-content-xl);
   }
 }
 
@@ -2962,7 +3528,7 @@
   }
 
   :where([data-nk="control-group"] > [data-nk="select"] > select) {
-    height: 100%;
+    block-size: 100%;
     border-radius: 0;
   }
 
@@ -2983,8 +3549,8 @@
           span[data-slot="control-group-addon"]
         ):first-child
     ) {
-    border-start-start-radius: var(--nk-radius-md);
-    border-end-start-radius: var(--nk-radius-md);
+    border-start-start-radius: var(--nk-radius-lg);
+    border-end-start-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -2995,8 +3561,8 @@
           span[data-slot="control-group-addon"]
         ):last-child
     ) {
-    border-start-end-radius: var(--nk-radius-md);
-    border-end-end-radius: var(--nk-radius-md);
+    border-start-end-radius: var(--nk-radius-lg);
+    border-end-end-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -3042,13 +3608,13 @@
   }
 
   :where([data-nk="control-group"] > [data-nk="select"]:first-child > select) {
-    border-start-start-radius: var(--nk-radius-md);
-    border-end-start-radius: var(--nk-radius-md);
+    border-start-start-radius: var(--nk-radius-lg);
+    border-end-start-radius: var(--nk-radius-lg);
   }
 
   :where([data-nk="control-group"] > [data-nk="select"]:last-child > select) {
-    border-start-end-radius: var(--nk-radius-md);
-    border-end-end-radius: var(--nk-radius-md);
+    border-start-end-radius: var(--nk-radius-lg);
+    border-end-end-radius: var(--nk-radius-lg);
   }
 }
 
@@ -3060,14 +3626,14 @@
     align-items: end;
     gap: calc(var(--nk-space) * 5);
     padding: calc(var(--nk-space) * 6);
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
     background: color-mix(
       in oklab,
-      var(--nk-color-danger) 8%,
+      var(--nk-color-destructive) 8%,
       var(--nk-color-surface)
     );
     border: var(--nk-border-width) solid
-      color-mix(in oklab, var(--nk-color-danger) 50%, transparent);
+      color-mix(in oklab, var(--nk-color-destructive) 50%, transparent);
     border-radius: var(--nk-radius-lg);
   }
 
@@ -3078,14 +3644,14 @@
   }
 
   :where([data-nk="danger-zone"] [data-slot="danger-zone-title"]) {
-    font-size: var(--nk-text-xl);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-section-size);
+    font-weight: var(--nk-title-section-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
 
   :where([data-nk="danger-zone"] [data-slot="danger-zone-description"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);
     text-wrap: pretty;
@@ -3130,14 +3696,14 @@
   }
 
   :where([data-nk="data-section"] [data-slot="data-section-title"]) {
-    font-size: var(--nk-text-xl);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-section-size);
+    font-weight: var(--nk-title-section-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
 
   :where([data-nk="data-section"] [data-slot="data-section-description"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);
@@ -3146,7 +3712,7 @@
 
   :where([data-nk="data-section"] > [data-slot="data-section-table"]),
   :where([data-nk="data-section"] > [data-slot="data-section-empty-state"]) {
-    width: 100%;
+    inline-size: 100%;
   }
 }
 
@@ -3183,11 +3749,13 @@
     text-underline-offset: 0.16em;
   }
 
-  :where(
-      [data-nk="details-table"] [data-slot="details-table-link"]:hover,
-      [data-nk="details-table"] [data-slot="details-table-record"]:hover
-    ) {
-    text-decoration-color: currentcolor;
+  @media (hover: hover) {
+    :where(
+        [data-nk="details-table"] [data-slot="details-table-link"]:hover,
+        [data-nk="details-table"] [data-slot="details-table-record"]:hover
+      ) {
+      text-decoration-color: currentcolor;
+    }
   }
 
   :where([data-nk="details-table"] [data-slot="details-table-file"]) {
@@ -3236,8 +3804,8 @@
   }
 
   :where([data-nk="dialog"] [data-slot="dialog-title"]) {
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -3275,7 +3843,7 @@
   @keyframes nk-dialog-enter {
     from {
       opacity: 0;
-      transform: translateY(0.5rem) scale(0.98);
+      transform: translateY(calc(var(--nk-space) * 2)) scale(0.98);
     }
     to {
       opacity: 1;
@@ -3302,7 +3870,7 @@
     z-index: 50;
     display: none;
     min-inline-size: 12rem;
-    max-inline-size: min(24rem, calc(100vw - (var(--nk-space) * 8)));
+    max-inline-size: min(24rem, calc(100% - (var(--nk-space) * 8)));
     max-block-size: min(24rem, calc(100dvh - (var(--nk-space) * 8)));
     inset: var(--nk-space);
     inset: var(--_nk-overlay-top, var(--nk-space)) auto auto
@@ -3349,7 +3917,7 @@
     cursor: pointer;
     background: transparent;
     border: 0;
-    border-radius: var(--nk-radius-md);
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -3379,7 +3947,7 @@
       [data-nk="dropdown"]
         [data-slot="dropdown-item"][data-variant="destructive"]
     ) {
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
   }
 
   :where(
@@ -3410,8 +3978,8 @@
             [aria-disabled="true"]
           )
       ) {
-      color: var(--nk-color-danger-foreground);
-      background: var(--nk-color-danger);
+      color: var(--nk-color-destructive-foreground);
+      background: var(--nk-color-destructive);
     }
   }
 
@@ -3425,7 +3993,7 @@
         [data-slot="dropdown-item"]:is(:disabled, [aria-disabled="true"])
     ) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where([data-nk="dropdown"] > [data-slot="dropdown-content"]:popover-open) {
@@ -3435,7 +4003,7 @@
   @keyframes nk-dropdown-enter {
     from {
       opacity: 0;
-      transform: translateY(-0.25rem) scale(0.98);
+      transform: translateY(calc(var(--nk-space) * -1)) scale(0.98);
     }
     to {
       opacity: 1;
@@ -3494,7 +4062,7 @@
     color: var(--nk-color-foreground);
     background: var(--nk-color-canvas);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -3543,13 +4111,13 @@
     padding: calc(var(--nk-space) * 2);
     background: var(--nk-color-canvas);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where([data-nk="dropzone"] [data-slot="dropzone-preview-image"]) {
     grid-row: span 2;
-    inline-size: 3rem;
-    block-size: 3rem;
+    inline-size: calc(var(--nk-space) * 12);
+    block-size: calc(var(--nk-space) * 12);
     object-fit: cover;
     border-radius: var(--nk-radius-sm);
   }
@@ -3605,12 +4173,12 @@
   }
 
   :where([data-nk="dropzone"][data-state="error"]) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 
   :where([data-nk="dropzone"][data-state="disabled"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where(
@@ -3639,7 +4207,7 @@
   }
 
   :where([data-nk="dropzone"] > [data-slot="dropzone-error"]) {
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
     font-size: var(--nk-text-sm);
   }
 }
@@ -3709,15 +4277,15 @@
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-icon"]) {
-    inline-size: 2rem;
-    block-size: 2rem;
+    inline-size: calc(var(--nk-space) * 8);
+    block-size: calc(var(--nk-space) * 8);
     color: var(--nk-color-muted-foreground);
   }
 
   :where([data-nk="empty-state"] > [data-slot="empty-state-title"]) {
     max-inline-size: var(--nk-content-md);
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -3769,7 +4337,7 @@
 
   :where([data-nk="field"] > [data-slot="field-error"]) {
     padding: 0;
-    color: var(--nk-color-danger-content);
+    color: var(--nk-color-destructive-content);
     font-size: var(--nk-text-sm);
     list-style: none;
   }
@@ -3829,7 +4397,7 @@
       [data-nk="field"][data-state="invalid"]
         > [data-slot="field-control"][data-nk="input"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }
 
@@ -3865,8 +4433,8 @@
 
   :where([data-nk="fieldset"] > [data-slot="fieldset-legend"]) {
     padding: 0;
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
   }
 
@@ -3894,7 +4462,7 @@
 @layer nitro-kit.base {
   :where([data-nk="flex"]) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-direction: var(--_nk-flex-direction);
     flex-wrap: var(--_nk-flex-wrap);
     gap: var(--_nk-layout-gap);
@@ -4351,7 +4919,7 @@
 @layer nitro-kit.base {
   :where([data-nk="grid"]) {
     display: grid;
-    min-width: 0;
+    min-inline-size: 0;
     grid-template-columns: repeat(var(--_nk-grid-columns), minmax(0, 1fr));
     gap: var(--_nk-layout-gap);
   }
@@ -4669,19 +5237,19 @@
 
 @layer nitro-kit.size {
   :where([data-nk="icon"][data-size="xs"]) {
-    --_nk-icon-size: 0.75rem;
+    --_nk-icon-size: var(--nk-icon-size-xs);
   }
   :where([data-nk="icon"][data-size="sm"]) {
-    --_nk-icon-size: 1rem;
+    --_nk-icon-size: var(--nk-icon-size-sm);
   }
   :where([data-nk="icon"][data-size="md"]) {
-    --_nk-icon-size: 1.25rem;
+    --_nk-icon-size: var(--nk-icon-size-md);
   }
   :where([data-nk="icon"][data-size="lg"]) {
-    --_nk-icon-size: 1.75rem;
+    --_nk-icon-size: var(--nk-icon-size-lg);
   }
   :where([data-nk="icon"][data-size="xl"]) {
-    --_nk-icon-size: 2.25rem;
+    --_nk-icon-size: var(--nk-icon-size-xl);
   }
 }
 
@@ -4693,20 +5261,20 @@
     display: block;
     inline-size: 100%;
     min-block-size: var(--nk-control-height-md);
-    padding-inline: calc(var(--nk-space) * 3);
+    padding-inline: var(--nk-control-padding-inline);
     color: var(--nk-color-foreground);
     font-size: var(--nk-text-base);
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       border-color var(--nk-duration-normal) var(--nk-ease),
       box-shadow var(--nk-duration-normal) var(--nk-ease);
   }
 
   :where([data-nk="input"][type="checkbox"], [data-nk="input"][type="radio"]) {
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
+    inline-size: var(--nk-choice-size-md);
+    block-size: var(--nk-choice-size-md);
     accent-color: var(--nk-color-primary);
   }
 
@@ -4743,6 +5311,33 @@
     border-inline-end: var(--nk-border-width) solid
       var(--nk-button-default-border);
   }
+
+  /* Data-entry controls read --nk-text-base below the md breakpoint, where
+     a focused control under 16px would zoom the viewport, and --nk-text-sm
+     from md up, beside 14px labels and body text. */
+  @media (min-width: 48rem) {
+    :where(
+        [data-nk="input"]:not(
+            [type="checkbox"],
+            [type="radio"],
+            [type="hidden"]
+          )
+      ) {
+      font-size: var(--nk-text-sm);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(
+        [data-nk="input"]:not(
+            [type="checkbox"],
+            [type="radio"],
+            [type="hidden"]
+          )
+      ) {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 @layer nitro-kit.state {
@@ -4766,11 +5361,11 @@
 
   :where([data-nk="input"]:disabled) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where([data-nk="input"][aria-invalid="true"]) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }
 
@@ -5243,15 +5838,15 @@
   }
 
   :where([data-nk="page-header"] > [data-slot="page-header-title"]) {
-    max-width: var(--nk-content-lg);
-    font-size: var(--nk-text-2xl);
-    font-weight: var(--nk-font-weight-bold);
+    max-inline-size: var(--nk-content-lg);
+    font-size: var(--nk-title-page-size);
+    font-weight: var(--nk-title-page-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
 
   :where([data-nk="page-header"] > [data-slot="page-header-description"]) {
-    max-width: var(--nk-content-lg);
+    max-inline-size: var(--nk-content-lg);
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     line-height: var(--nk-leading-relaxed);
@@ -5325,8 +5920,8 @@
         > [data-slot="pagination-ellipsis-label"]
     ) {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    inline-size: 1px;
+    block-size: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
@@ -5395,7 +5990,7 @@
     font-size: var(--nk-text-sm);
     font-weight: var(--nk-font-weight-medium);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -5424,7 +6019,7 @@
 @layer nitro-kit.base {
   :where([data-nk="pagination-bar"]) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
@@ -5432,7 +6027,7 @@
   }
 
   :where([data-nk="pagination-bar"] > [data-slot="pagination-bar-summary"]) {
-    min-width: 0;
+    min-inline-size: 0;
     margin: 0;
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
@@ -5464,117 +6059,185 @@
 }
 
 /* Source: src/stylesheets/nitro_kit/components/palette.css */
+/* The semantic palette shared by Badge, Alert, and Toast.
+ *
+ * Every family resolves through the public `--nk-palette-*` tint axis, which
+ * samples the color scales and is already appearance-aware, so a component
+ * never restates a hue. Semantic families default to the same steps as their
+ * hue families -- `info` renders exactly like `blue` -- and an application
+ * that rethemes a tint role moves all three components at once. `-content`
+ * carries the paired foreground; the base role carries the tinting accent.
+ *
+ * Alert and Toast are the same kind of thing — a status message — so they also
+ * share one tinted surface and border. Only the components that own a different
+ * job, such as Badge's compact label, set their own tint strength.
+ */
 @layer nitro-kit.variant {
   :where(
-      [data-nk="badge"][data-color="zinc"],
       [data-nk="badge"][data-color="neutral"],
-      [data-nk="alert"][data-variant="default"]
+      [data-nk="alert"][data-variant="default"],
+      [data-nk="toast-item"][data-variant="default"]
     ) {
-    --_nk-palette-light: oklch(37% 0.013 285.805);
-    --_nk-palette-dark: oklch(92% 0.004 286.32);
-    --_nk-palette-tint: oklch(70.5% 0.015 286.067);
+    --_nk-semantic-accent: var(--nk-palette-neutral);
+    --_nk-semantic-content: var(--nk-palette-neutral-content);
   }
 
   :where(
-      [data-nk="badge"][data-color="red"],
-      [data-nk="badge"][data-color="danger"],
-      [data-nk="alert"][data-variant="error"]
+      [data-nk="badge"][data-color="info"],
+      [data-nk="alert"][data-variant="info"],
+      [data-nk="toast-item"][data-variant="info"]
     ) {
-    --_nk-palette-light: oklch(50.5% 0.213 27.518);
-    --_nk-palette-dark: oklch(88.5% 0.062 18.334);
-    --_nk-palette-tint: oklch(70.4% 0.191 22.216);
+    --_nk-semantic-accent: var(--nk-palette-info);
+    --_nk-semantic-content: var(--nk-palette-info-content);
   }
-  :where([data-nk="badge"][data-color="orange"]) {
-    --_nk-palette-light: oklch(55.3% 0.195 38.402);
-    --_nk-palette-dark: oklch(90.1% 0.076 70.697);
-    --_nk-palette-tint: oklch(75% 0.183 55.934);
+
+  :where(
+      [data-nk="badge"][data-color="success"],
+      [data-nk="alert"][data-variant="success"],
+      [data-nk="toast-item"][data-variant="success"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-success);
+    --_nk-semantic-content: var(--nk-palette-success-content);
   }
+
   :where(
-      [data-nk="badge"][data-color="amber"],
       [data-nk="badge"][data-color="warning"],
-      [data-nk="alert"][data-variant="warning"]
+      [data-nk="alert"][data-variant="warning"],
+      [data-nk="toast-item"][data-variant="warning"]
     ) {
-    --_nk-palette-light: oklch(55% 0.163 48.998);
-    --_nk-palette-dark: oklch(92.4% 0.12 95.746);
-    --_nk-palette-tint: oklch(82.8% 0.189 84.429);
+    --_nk-semantic-accent: var(--nk-palette-warning);
+    --_nk-semantic-content: var(--nk-palette-warning-content);
+  }
+
+  /* Action components and Alert say `destructive`; Toast announces `error`.
+     Both spellings resolve to the destructive family, and this is the only
+     place they meet. */
+  :where(
+      [data-nk="badge"][data-color="destructive"],
+      [data-nk="alert"][data-variant="destructive"],
+      [data-nk="toast-item"][data-variant="error"]
+    ) {
+    --_nk-semantic-accent: var(--nk-palette-destructive);
+    --_nk-semantic-content: var(--nk-palette-destructive-content);
+  }
+
+  /* The shared status treatment. Defined once so Alert and Toast cannot drift
+     apart again, and so a third status component inherits it by opting in. */
+  :where([data-nk="alert"], [data-nk="toast-item"]) {
+    --_nk-semantic-tint: 12%;
+    --_nk-semantic-surface: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) var(--_nk-semantic-tint),
+      var(--nk-color-surface)
+    );
+    --_nk-semantic-border: color-mix(
+      in oklab,
+      var(--_nk-semantic-accent) 45%,
+      transparent
+    );
+  }
+
+  /* Dark appearances need a stronger tint to separate the surface from the
+     page behind it. */
+  :where([data-theme="dark"])
+    :where([data-nk="alert"], [data-nk="toast-item"]) {
+    --_nk-semantic-tint: 20%;
   }
+
+  @media (prefers-color-scheme: dark) {
+    :where(:root:not([data-theme]))
+      :where([data-nk="alert"], [data-nk="toast-item"]) {
+      --_nk-semantic-tint: 20%;
+    }
+  }
+
+  /* The decorative hues. These name a color rather than a meaning, so they
+     follow `--nk-palette-*` and stay put when an application rethemes its
+     semantic families. `red` and `destructive` are deliberately different: one is
+     a color, the other is whatever destructive currently means. */
+  :where([data-nk="badge"][data-color="red"]) {
+    --_nk-semantic-accent: var(--nk-palette-red);
+    --_nk-semantic-content: var(--nk-palette-red-content);
+  }
+
+  :where([data-nk="badge"][data-color="orange"]) {
+    --_nk-semantic-accent: var(--nk-palette-orange);
+    --_nk-semantic-content: var(--nk-palette-orange-content);
+  }
+
+  :where([data-nk="badge"][data-color="amber"]) {
+    --_nk-semantic-accent: var(--nk-palette-amber);
+    --_nk-semantic-content: var(--nk-palette-amber-content);
+  }
+
   :where([data-nk="badge"][data-color="yellow"]) {
-    --_nk-palette-light: oklch(47.6% 0.114 61.907);
-    --_nk-palette-dark: oklch(94.5% 0.129 101.54);
-    --_nk-palette-tint: oklch(85.2% 0.199 91.936);
+    --_nk-semantic-accent: var(--nk-palette-yellow);
+    --_nk-semantic-content: var(--nk-palette-yellow-content);
   }
+
   :where([data-nk="badge"][data-color="lime"]) {
-    --_nk-palette-light: oklch(45.3% 0.124 130.933);
-    --_nk-palette-dark: oklch(93.8% 0.127 124.321);
-    --_nk-palette-tint: oklch(84.1% 0.238 128.85);
+    --_nk-semantic-accent: var(--nk-palette-lime);
+    --_nk-semantic-content: var(--nk-palette-lime-content);
   }
-  :where(
-      [data-nk="badge"][data-color="green"],
-      [data-nk="badge"][data-color="success"],
-      [data-nk="alert"][data-variant="success"]
-    ) {
-    --_nk-palette-light: oklch(44.8% 0.119 151.328);
-    --_nk-palette-dark: oklch(92.5% 0.084 155.995);
-    --_nk-palette-tint: oklch(79.2% 0.209 151.711);
+
+  :where([data-nk="badge"][data-color="green"]) {
+    --_nk-semantic-accent: var(--nk-palette-green);
+    --_nk-semantic-content: var(--nk-palette-green-content);
   }
+
   :where([data-nk="badge"][data-color="emerald"]) {
-    --_nk-palette-light: oklch(43.2% 0.095 166.913);
-    --_nk-palette-dark: oklch(90.5% 0.093 164.15);
-    --_nk-palette-tint: oklch(76.5% 0.177 163.223);
+    --_nk-semantic-accent: var(--nk-palette-emerald);
+    --_nk-semantic-content: var(--nk-palette-emerald-content);
   }
+
   :where([data-nk="badge"][data-color="teal"]) {
-    --_nk-palette-light: oklch(43.7% 0.078 188.216);
-    --_nk-palette-dark: oklch(91% 0.096 180.426);
-    --_nk-palette-tint: oklch(77.7% 0.152 181.912);
+    --_nk-semantic-accent: var(--nk-palette-teal);
+    --_nk-semantic-content: var(--nk-palette-teal-content);
   }
+
   :where([data-nk="badge"][data-color="cyan"]) {
-    --_nk-palette-light: oklch(45% 0.085 224.283);
-    --_nk-palette-dark: oklch(91.7% 0.08 205.041);
-    --_nk-palette-tint: oklch(78.9% 0.154 211.53);
+    --_nk-semantic-accent: var(--nk-palette-cyan);
+    --_nk-semantic-content: var(--nk-palette-cyan-content);
   }
+
   :where([data-nk="badge"][data-color="sky"]) {
-    --_nk-palette-light: oklch(44.3% 0.11 240.79);
-    --_nk-palette-dark: oklch(90.1% 0.058 230.902);
-    --_nk-palette-tint: oklch(74.6% 0.16 232.661);
+    --_nk-semantic-accent: var(--nk-palette-sky);
+    --_nk-semantic-content: var(--nk-palette-sky-content);
   }
-  :where(
-      [data-nk="badge"][data-color="blue"],
-      [data-nk="badge"][data-color="info"],
-      [data-nk="alert"][data-variant="info"]
-    ) {
-    --_nk-palette-light: oklch(42.4% 0.199 265.638);
-    --_nk-palette-dark: oklch(88.2% 0.059 254.128);
-    --_nk-palette-tint: oklch(70.7% 0.165 254.624);
+
+  :where([data-nk="badge"][data-color="blue"]) {
+    --_nk-semantic-accent: var(--nk-palette-blue);
+    --_nk-semantic-content: var(--nk-palette-blue-content);
   }
+
   :where([data-nk="badge"][data-color="indigo"]) {
-    --_nk-palette-light: oklch(45.7% 0.24 277.023);
-    --_nk-palette-dark: oklch(87% 0.065 274.039);
-    --_nk-palette-tint: oklch(67.3% 0.182 276.935);
+    --_nk-semantic-accent: var(--nk-palette-indigo);
+    --_nk-semantic-content: var(--nk-palette-indigo-content);
   }
+
   :where([data-nk="badge"][data-color="violet"]) {
-    --_nk-palette-light: oklch(49.1% 0.27 292.581);
-    --_nk-palette-dark: oklch(89.4% 0.057 293.283);
-    --_nk-palette-tint: oklch(70.2% 0.183 293.541);
+    --_nk-semantic-accent: var(--nk-palette-violet);
+    --_nk-semantic-content: var(--nk-palette-violet-content);
   }
+
   :where([data-nk="badge"][data-color="purple"]) {
-    --_nk-palette-light: oklch(49.6% 0.265 301.924);
-    --_nk-palette-dark: oklch(90.2% 0.063 306.703);
-    --_nk-palette-tint: oklch(71.4% 0.203 305.504);
+    --_nk-semantic-accent: var(--nk-palette-purple);
+    --_nk-semantic-content: var(--nk-palette-purple-content);
   }
+
   :where([data-nk="badge"][data-color="fuchsia"]) {
-    --_nk-palette-light: oklch(51.8% 0.253 323.949);
-    --_nk-palette-dark: oklch(90.3% 0.076 319.62);
-    --_nk-palette-tint: oklch(74% 0.238 322.16);
+    --_nk-semantic-accent: var(--nk-palette-fuchsia);
+    --_nk-semantic-content: var(--nk-palette-fuchsia-content);
   }
+
   :where([data-nk="badge"][data-color="pink"]) {
-    --_nk-palette-light: oklch(52.5% 0.223 3.958);
-    --_nk-palette-dark: oklch(89.9% 0.061 343.231);
-    --_nk-palette-tint: oklch(71.8% 0.202 349.761);
+    --_nk-semantic-accent: var(--nk-palette-pink);
+    --_nk-semantic-content: var(--nk-palette-pink-content);
   }
+
   :where([data-nk="badge"][data-color="rose"]) {
-    --_nk-palette-light: oklch(51.4% 0.222 16.935);
-    --_nk-palette-dark: oklch(89.2% 0.058 10.001);
-    --_nk-palette-tint: oklch(71.2% 0.194 13.428);
+    --_nk-semantic-accent: var(--nk-palette-rose);
+    --_nk-semantic-content: var(--nk-palette-rose-content);
   }
 }
 
@@ -5628,7 +6291,7 @@
         > [data-slot="progressive-image-placeholder"]
     ) {
     z-index: 1;
-    filter: blur(1rem);
+    filter: blur(calc(var(--nk-space) * 4));
     opacity: 0;
     transform: scale(1.05);
   }
@@ -5711,46 +6374,39 @@
 
 /* Source: src/stylesheets/nitro_kit/components/radio_button.css */
 @layer nitro-kit.base {
+  /* Every dimension derives from one choice size, matching Checkbox: the two
+     sizes are one rule apart and the dot keeps its proportion at either. The
+     dot previously stayed at its medium size inside a large radio; deriving it
+     scales it with the control. */
   :where([data-nk="radio-button"]) {
+    --_nk-choice-size: var(--nk-choice-size-md);
+
     display: inline-grid;
     min-inline-size: var(--nk-control-height-md);
     min-block-size: var(--nk-control-height-md);
     color: var(--nk-color-foreground);
   }
 
+  :where([data-nk="radio-button"][data-size="lg"]) {
+    --_nk-choice-size: var(--nk-choice-size-lg);
+  }
+
   :where([data-nk="radio-button"] > [data-slot="radio-button-label"]) {
     display: grid;
-    grid-template-columns: 1.125rem minmax(0, 1fr);
+    grid-template-columns: var(--_nk-choice-size) minmax(0, 1fr);
     gap: calc(var(--nk-space) * 2);
     align-items: center;
     min-block-size: var(--nk-control-height-md);
     cursor: pointer;
   }
 
-  :where(
-      [data-nk="radio-button"][data-size="lg"]
-        > [data-slot="radio-button-label"]
-    ) {
-    grid-template-columns: 1.5rem minmax(0, 1fr);
-  }
-
   :where(
       [data-nk="radio-button"] [data-slot="radio-button-control"],
       [data-nk="radio-button"] [data-slot="radio-button-indicator"]
     ) {
     grid-area: 1 / 1;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-  }
-
-  :where(
-      [data-nk="radio-button"][data-size="lg"]
-        [data-slot="radio-button-control"],
-      [data-nk="radio-button"][data-size="lg"]
-        [data-slot="radio-button-indicator"]
-    ) {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--_nk-choice-size);
+    block-size: var(--_nk-choice-size);
   }
 
   :where([data-nk="radio-button"] [data-slot="radio-button-control"]) {
@@ -5768,11 +6424,14 @@
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
     border-radius: var(--nk-radius-full);
+    transition:
+      background-color var(--nk-duration-fast) var(--nk-ease),
+      border-color var(--nk-duration-fast) var(--nk-ease);
   }
 
   :where([data-nk="radio-button"] [data-slot="radio-button-indicator"])::after {
-    inline-size: 0.5rem;
-    block-size: 0.5rem;
+    inline-size: calc(var(--_nk-choice-size) * 0.44);
+    block-size: calc(var(--_nk-choice-size) * 0.44);
     content: "";
     background: var(--nk-color-primary);
     border-radius: inherit;
@@ -5787,18 +6446,11 @@
   :where([data-nk="radio-button"] > [data-slot="radio-button-description"]) {
     display: block;
     margin-block-start: var(--nk-space);
-    padding-inline-start: calc(1.125rem + (var(--nk-space) * 2));
+    padding-inline-start: calc(var(--_nk-choice-size) + (var(--nk-space) * 2));
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     text-wrap: pretty;
   }
-
-  :where(
-      [data-nk="radio-button"][data-size="lg"]
-        > [data-slot="radio-button-description"]
-    ) {
-    padding-inline-start: calc(1.5rem + (var(--nk-space) * 2));
-  }
 }
 
 @layer nitro-kit.state {
@@ -5829,19 +6481,25 @@
 
   :where([data-nk="radio-button"][data-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* The server error describes the submitted value. Once the user picks a
      value that satisfies the control's own constraints the error is stale, so
-     the danger border stands down. `:user-valid` never matches before the user
+     the destructive border stands down. `:user-valid` never matches before the user
      touches the control, so an untouched invalid radio keeps its border. */
   :where(
       [data-nk="radio-button"]
         [data-slot="radio-button-control"][aria-invalid="true"]:not(:user-valid)
         + [data-slot="radio-button-indicator"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="radio-button"] [data-slot="radio-button-indicator"]) {
+      transition-duration: 0.01ms;
+    }
   }
 }
 
@@ -5858,8 +6516,8 @@
       [data-nk="radio-button-group"] > [data-slot="radio-button-group-legend"]
     ) {
     padding: 0;
-    font-size: var(--nk-text-sm);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-compact-size);
+    font-weight: var(--nk-title-compact-weight);
   }
 
   :where(
@@ -5905,7 +6563,7 @@
     padding: calc(var(--nk-space) * 3);
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -5916,7 +6574,7 @@
     gap: 0;
     padding: var(--nk-space);
     background: var(--nk-color-muted);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
   }
 
   :where(
@@ -5926,7 +6584,7 @@
     ) {
     min-inline-size: 0;
     padding-inline: calc(var(--nk-space) * 3);
-    border-radius: calc(var(--nk-radius-md) - var(--nk-space));
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
   }
 
   :where(
@@ -5984,7 +6642,7 @@
       [data-nk="radio-button-group"][data-presentation="segmented"]
         [data-slot="radio-button-control"]:focus-visible
     ) {
-    border-radius: calc(var(--nk-radius-md) - var(--nk-space));
+    border-radius: calc(var(--nk-radius-lg) - var(--nk-space));
     outline: var(--nk-focus-width) solid var(--nk-color-focus);
     outline-offset: calc(var(--nk-focus-offset) * -1);
   }
@@ -6005,7 +6663,7 @@
     --lexxy-color-ink-lightest: var(--nk-color-muted);
     --lexxy-color-selected: var(--nk-color-muted);
     --lexxy-color-selected-hover: var(--nk-color-border);
-    --lexxy-radius: var(--nk-radius-md);
+    --lexxy-radius: var(--nk-radius-lg);
     display: block;
     inline-size: 100%;
   }
@@ -6024,7 +6682,7 @@
         > [data-slot="rich-text-area-editor"]
         > [aria-invalid="true"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }
 
@@ -6040,13 +6698,15 @@
     grid-area: 1 / 1;
     inline-size: 100%;
     min-block-size: var(--nk-control-height-md);
-    padding-inline: calc(var(--nk-space) * 3) calc(var(--nk-space) * 9);
+    padding-inline: var(--nk-control-padding-inline)
+      calc(var(--nk-control-padding-inline) * 2 + var(--nk-space) * 4);
     color: inherit;
     font: inherit;
+    font-size: var(--nk-text-base);
     appearance: none;
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       border-color var(--nk-duration-normal) var(--nk-ease),
       box-shadow var(--nk-duration-normal) var(--nk-ease);
@@ -6056,9 +6716,9 @@
     grid-area: 1 / 1;
     align-self: center;
     justify-self: end;
-    inline-size: 1rem;
-    block-size: 1rem;
-    margin-inline-end: calc(var(--nk-space) * 3);
+    inline-size: calc(var(--nk-space) * 4);
+    block-size: calc(var(--nk-space) * 4);
+    margin-inline-end: var(--nk-control-padding-inline);
     color: var(--nk-color-muted-foreground);
     pointer-events: none;
   }
@@ -6070,9 +6730,23 @@
 
   :where([data-nk="select"] > [data-slot="select-control"][multiple]) {
     min-block-size: calc(var(--nk-control-height-md) * 3);
-    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    padding-block: calc(var(--nk-space) * 2);
+    padding-inline: var(--nk-control-padding-inline);
     appearance: auto;
   }
+
+  /* Matches the Input width split. */
+  @media (min-width: 48rem) {
+    :where([data-nk="select"] > [data-slot="select-control"]) {
+      font-size: var(--nk-text-sm);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="select"] > [data-slot="select-control"]) {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 @layer nitro-kit.state {
@@ -6083,13 +6757,13 @@
 
   :where([data-nk="select"] > [data-slot="select-control"]:disabled) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where(
       [data-nk="select"] > [data-slot="select-control"][aria-invalid="true"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }
 
@@ -6100,25 +6774,25 @@
     grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
     gap: calc(var(--nk-space) * 6);
     align-items: start;
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where(
       [data-nk="settings-layout"] > [data-slot="settings-layout-navigation"],
       [data-nk="settings-layout"] > [data-slot="settings-layout-content"]
     ) {
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where([data-nk="settings-layout"] [data-slot="settings-layout-items"]) {
     display: flex;
     flex-direction: column;
     gap: var(--nk-space);
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where([data-nk="settings-layout"] [data-slot="settings-layout-item"]) {
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   :where([data-nk="settings-layout"] [data-slot="settings-layout-item-link"]) {
@@ -6132,7 +6806,7 @@
     font-weight: var(--nk-font-weight-medium);
     line-height: var(--nk-leading-tight);
     text-decoration: none;
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       color var(--nk-duration-normal) var(--nk-ease),
       background-color var(--nk-duration-normal) var(--nk-ease);
@@ -6216,8 +6890,8 @@
   }
 
   :where([data-nk="settings-section"] [data-slot="settings-section-title"]) {
-    font-size: var(--nk-text-xl);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-section-size);
+    font-weight: var(--nk-title-section-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -6294,7 +6968,7 @@
     position: fixed;
     inset-block: 0;
     max-block-size: none;
-    height: 100dvh;
+    block-size: 100dvh;
     margin-block: 0;
     padding: calc(var(--nk-space) * 6);
     overflow: auto;
@@ -6315,15 +6989,15 @@
   }
 
   :where([data-nk="sheet"][data-size="sm"] > [data-slot="sheet-panel"]) {
-    width: min(calc(100% - (var(--nk-space) * 8)), 20rem);
+    inline-size: min(calc(100% - (var(--nk-space) * 8)), 20rem);
   }
 
   :where([data-nk="sheet"][data-size="md"] > [data-slot="sheet-panel"]) {
-    width: min(calc(100% - (var(--nk-space) * 8)), 28rem);
+    inline-size: min(calc(100% - (var(--nk-space) * 8)), 28rem);
   }
 
   :where([data-nk="sheet"][data-size="lg"] > [data-slot="sheet-panel"]) {
-    width: min(calc(100% - (var(--nk-space) * 8)), 40rem);
+    inline-size: min(calc(100% - (var(--nk-space) * 8)), 40rem);
   }
 
   :where([data-nk="sheet"] > [data-slot="sheet-panel"])::backdrop {
@@ -6339,8 +7013,8 @@
 
   :where([data-nk="sheet"] [data-slot="sheet-title"]) {
     padding-inline-end: calc(var(--nk-space) * 10);
-    font-size: var(--nk-text-lg);
-    font-weight: var(--nk-font-weight-bold);
+    font-size: var(--nk-title-surface-size);
+    font-weight: var(--nk-title-surface-weight);
     line-height: var(--nk-leading-tight);
   }
 
@@ -6363,13 +7037,13 @@
   :where(
       [data-nk="sheet"][data-side="left"] > [data-slot="sheet-panel"][open]
     ) {
-    --_nk-sheet-from: -1rem;
+    --_nk-sheet-from: calc(var(--nk-space) * -4);
   }
 
   :where(
       [data-nk="sheet"][data-side="right"] > [data-slot="sheet-panel"][open]
     ) {
-    --_nk-sheet-from: 1rem;
+    --_nk-sheet-from: calc(var(--nk-space) * 4);
   }
 
   /* Sides are logical, but translateX is physical; RTL flips the slide so the
@@ -6378,14 +7052,14 @@
       [data-nk="sheet"][data-side="left"]:dir(rtl)
         > [data-slot="sheet-panel"][open]
     ) {
-    --_nk-sheet-from: 1rem;
+    --_nk-sheet-from: calc(var(--nk-space) * 4);
   }
 
   :where(
       [data-nk="sheet"][data-side="right"]:dir(rtl)
         > [data-slot="sheet-panel"][open]
     ) {
-    --_nk-sheet-from: -1rem;
+    --_nk-sheet-from: calc(var(--nk-space) * -4);
   }
 
   @keyframes nk-sheet-enter {
@@ -6430,7 +7104,7 @@
     display: grid;
     align-content: start;
     gap: calc(var(--nk-space) * 2);
-    min-height: 100%;
+    min-block-size: 100%;
     padding: calc(var(--nk-space) * 5);
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
@@ -6462,11 +7136,31 @@
 
 /* Source: src/stylesheets/nitro_kit/components/switch.css */
 @layer nitro-kit.base {
+  /* Four declared inputs; everything else derives. The block heights ride the
+     control ramp, the track is the block plus the handle's travel, and the
+     handle inset is whatever centers it inside the bordered track. */
   :where([data-nk="switch"]) {
+    --_nk-switch-block-size: var(--nk-control-height-xs);
+    --_nk-switch-handle-size: calc(var(--nk-space) * 4);
+    --_nk-switch-travel: calc(var(--nk-space) * 4);
+    --_nk-switch-track-size: calc(
+      var(--_nk-switch-block-size) + var(--_nk-switch-travel)
+    );
+    --_nk-switch-pad: calc(
+      (var(--_nk-switch-block-size) - var(--_nk-switch-handle-size)) / 2 -
+        var(--nk-border-width)
+    );
+
     display: inline-grid;
     color: var(--nk-color-foreground);
   }
 
+  :where([data-nk="switch"][data-size="lg"]) {
+    --_nk-switch-block-size: var(--nk-control-height-sm);
+    --_nk-switch-handle-size: calc(var(--nk-space) * 6);
+    --_nk-switch-travel: calc(var(--nk-space) * 5);
+  }
+
   :where([data-nk="switch"] > [data-slot="switch-label"]) {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
@@ -6485,8 +7179,8 @@
 
   :where([data-nk="switch"] [data-slot="switch-control"]) {
     z-index: 1;
-    inline-size: 2.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--_nk-switch-track-size);
+    block-size: var(--_nk-switch-block-size);
     margin: 0;
     cursor: pointer;
     appearance: none;
@@ -6496,9 +7190,9 @@
   :where([data-nk="switch"] [data-slot="switch-track"]) {
     display: flex;
     align-items: center;
-    inline-size: 2.5rem;
-    block-size: 1.5rem;
-    padding: 0.1875rem;
+    inline-size: var(--_nk-switch-track-size);
+    block-size: var(--_nk-switch-block-size);
+    padding: var(--_nk-switch-pad);
     pointer-events: none;
     background: var(--nk-color-muted);
     border: var(--nk-border-width) solid var(--nk-color-border);
@@ -6508,28 +7202,15 @@
       border-color var(--nk-duration-normal) var(--nk-ease);
   }
 
-  :where(
-      [data-nk="switch"][data-size="lg"] [data-slot="switch-control"],
-      [data-nk="switch"][data-size="lg"] [data-slot="switch-track"]
-    ) {
-    inline-size: 3.25rem;
-    block-size: 2rem;
-  }
-
   :where([data-nk="switch"] [data-slot="switch-handle"]) {
-    inline-size: 1rem;
-    block-size: 1rem;
+    inline-size: var(--_nk-switch-handle-size);
+    block-size: var(--_nk-switch-handle-size);
     background: var(--nk-color-surface);
     border-radius: var(--nk-radius-full);
     box-shadow: var(--nk-shadow-sm);
     transition: transform var(--nk-duration-normal) var(--nk-ease);
   }
 
-  :where([data-nk="switch"][data-size="lg"] [data-slot="switch-handle"]) {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-  }
-
   :where([data-nk="switch"] [data-slot="switch-label-text"]) {
     display: block;
     grid-column: 2;
@@ -6538,18 +7219,14 @@
   :where([data-nk="switch"] > [data-slot="switch-description"]) {
     display: block;
     margin-block-start: var(--nk-space);
-    padding-inline-start: calc(2.5rem + (var(--nk-space) * 3));
+    padding-inline-start: calc(
+      var(--_nk-switch-track-size) + (var(--nk-space) * 3)
+    );
     color: var(--nk-color-muted-foreground);
     font-size: var(--nk-text-sm);
     font-weight: var(--nk-font-weight-normal);
     text-wrap: pretty;
   }
-
-  :where(
-      [data-nk="switch"][data-size="lg"] > [data-slot="switch-description"]
-    ) {
-    padding-inline-start: calc(3.25rem + (var(--nk-space) * 3));
-  }
 }
 
 @layer nitro-kit.state {
@@ -6568,16 +7245,7 @@
         + [data-slot="switch-track"]
         > [data-slot="switch-handle"]
     ) {
-    transform: translateX(1rem);
-  }
-
-  :where(
-      [data-nk="switch"][data-size="lg"]
-        [data-slot="switch-control"]:checked
-        + [data-slot="switch-track"]
-        > [data-slot="switch-handle"]
-    ) {
-    transform: translateX(1.25rem);
+    transform: translateX(var(--_nk-switch-travel));
   }
 
   :where(
@@ -6591,19 +7259,19 @@
 
   :where([data-nk="switch"][data-disabled="true"]) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   /* The server error describes the submitted value. Once the user toggles the
      control and it satisfies its own constraints the error is stale, so the
-     danger border stands down. `:user-valid` never matches before the user
+     destructive border stands down. `:user-valid` never matches before the user
      touches the control, so an untouched invalid switch keeps its border. */
   :where(
       [data-nk="switch"]
         [data-slot="switch-control"][aria-invalid="true"]:not(:user-valid)
         + [data-slot="switch-track"]
     ) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }
 
@@ -6673,9 +7341,14 @@
     text-decoration: none;
   }
 
+  /* Half-strength through the color channel rather than opacity, so the
+     dimming is one declaration and never cascades into descendants. */
   :where([data-nk="table"] [data-slot="table-sort-indicator"]) {
-    color: var(--nk-color-muted-foreground);
-    opacity: 0.5;
+    color: color-mix(
+      in oklab,
+      var(--nk-color-muted-foreground) 50%,
+      transparent
+    );
   }
 }
 
@@ -6701,7 +7374,6 @@
         [data-slot="table-sort-indicator"]
     ) {
     color: var(--nk-color-primary);
-    opacity: 1;
   }
 
   @media (hover: hover) {
@@ -6714,7 +7386,7 @@
           [data-slot="table-sort"]:hover
           [data-slot="table-sort-indicator"]
       ) {
-      opacity: 1;
+      color: var(--nk-color-muted-foreground);
     }
   }
 
@@ -6780,6 +7452,10 @@
     padding-block: calc(var(--nk-space) * 4);
     line-height: var(--nk-leading-normal);
   }
+
+  :where([data-nk="tabs"] > [data-slot="tabs-panel"][hidden="until-found"]) {
+    padding-block: 0;
+  }
 }
 
 @layer nitro-kit.variant {
@@ -6872,7 +7548,7 @@
     ) {
     color: var(--nk-color-muted-foreground);
     cursor: not-allowed;
-    opacity: 0.55;
+    opacity: var(--nk-disabled-opacity);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -6889,19 +7565,34 @@
   :where([data-nk="textarea"]) {
     display: block;
     inline-size: 100%;
-    min-block-size: 6rem;
-    padding: calc(var(--nk-space) * 2) calc(var(--nk-space) * 3);
+    min-block-size: calc(var(--nk-space) * 24);
+    padding-block: calc(var(--nk-space) * 2);
+    padding-inline: var(--nk-control-padding-inline);
     color: var(--nk-color-foreground);
     font: inherit;
+    font-size: var(--nk-text-base);
     line-height: var(--nk-leading-normal);
     resize: vertical;
     background: var(--nk-color-surface);
     border: var(--nk-border-width) solid var(--nk-color-border);
-    border-radius: var(--nk-radius-md);
+    border-radius: var(--nk-radius-lg);
     transition:
       border-color var(--nk-duration-normal) var(--nk-ease),
       box-shadow var(--nk-duration-normal) var(--nk-ease);
   }
+
+  /* Matches the Input width split. */
+  @media (min-width: 48rem) {
+    :where([data-nk="textarea"]) {
+      font-size: var(--nk-text-sm);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where([data-nk="textarea"]) {
+      transition-duration: 0.01ms;
+    }
+  }
 }
 
 @layer nitro-kit.state {
@@ -6917,11 +7608,11 @@
 
   :where([data-nk="textarea"]:disabled) {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--nk-disabled-opacity);
   }
 
   :where([data-nk="textarea"][aria-invalid="true"]) {
-    border-color: var(--nk-color-danger);
+    border-color: var(--nk-color-destructive);
   }
 }
 
@@ -6938,7 +7629,7 @@
     inset-block-end: calc(var(--nk-space) * 5);
     display: flex;
     flex-direction: column;
-    inline-size: min(26rem, calc(100vw - (var(--nk-space) * 10)));
+    inline-size: min(26rem, calc(100% - (var(--nk-space) * 10)));
     gap: calc(var(--nk-space) * 3);
     margin: 0;
     padding: 0;
@@ -6961,7 +7652,7 @@
     background: var(--_nk-toast-background);
     border: var(--nk-border-width) solid var(--_nk-toast-border);
     border-radius: var(--nk-radius-lg);
-    box-shadow: var(--nk-shadow-lg);
+    box-shadow: var(--nk-shadow-md);
     transition:
       opacity var(--nk-duration-normal) var(--nk-ease),
       transform var(--nk-duration-normal) var(--nk-ease);
@@ -6975,8 +7666,8 @@
   }
 
   :where([data-nk="toast-item"] [data-slot="toast-item-title"]) {
-    font-size: var(--nk-text-sm);
-    font-weight: var(--nk-font-weight-semibold);
+    font-size: var(--nk-title-compact-size);
+    font-weight: var(--nk-title-compact-weight);
     line-height: var(--nk-leading-tight);
     text-wrap: balance;
   }
@@ -6994,60 +7685,13 @@
 }
 
 @layer nitro-kit.variant {
-  :where([data-nk="toast-item"][data-variant="info"]) {
-    --_nk-toast-background: color-mix(
-      in oklab,
-      var(--nk-color-info) 10%,
-      var(--nk-color-surface)
-    );
-    --_nk-toast-foreground: var(--nk-color-info-content);
-    --_nk-toast-border: color-mix(
-      in oklab,
-      var(--nk-color-info) 45%,
-      transparent
-    );
-  }
-
-  :where([data-nk="toast-item"][data-variant="success"]) {
-    --_nk-toast-background: color-mix(
-      in oklab,
-      var(--nk-color-success) 10%,
-      var(--nk-color-surface)
-    );
-    --_nk-toast-foreground: var(--nk-color-success-content);
-    --_nk-toast-border: color-mix(
-      in oklab,
-      var(--nk-color-success) 45%,
-      transparent
-    );
-  }
-
-  :where([data-nk="toast-item"][data-variant="warning"]) {
-    --_nk-toast-background: color-mix(
-      in oklab,
-      var(--nk-color-warning) 10%,
-      var(--nk-color-surface)
-    );
-    --_nk-toast-foreground: var(--nk-color-warning-content);
-    --_nk-toast-border: color-mix(
-      in oklab,
-      var(--nk-color-warning) 45%,
-      transparent
-    );
-  }
-
-  :where([data-nk="toast-item"][data-variant="error"]) {
-    --_nk-toast-background: color-mix(
-      in oklab,
-      var(--nk-color-danger) 10%,
-      var(--nk-color-surface)
-    );
-    --_nk-toast-foreground: var(--nk-color-danger-content);
-    --_nk-toast-border: color-mix(
-      in oklab,
-      var(--nk-color-danger) 45%,
-      transparent
-    );
+  /* Colour, tint strength, and appearance switching all come from the shared
+     semantic palette, so a Toast and an Alert of the same variant render
+     identically. */
+  :where([data-nk="toast-item"][data-variant]) {
+    --_nk-toast-background: var(--_nk-semantic-surface);
+    --_nk-toast-border: var(--_nk-semantic-border);
+    --_nk-toast-foreground: var(--_nk-semantic-content);
   }
 }
 
@@ -7073,7 +7717,7 @@
 @layer nitro-kit.base {
   :where([data-nk="toolbar"]) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
@@ -7085,7 +7729,7 @@
       [data-nk="toolbar"] > [data-slot="toolbar-trailing"]
     ) {
     display: flex;
-    min-width: 0;
+    min-inline-size: 0;
     /* Regions never exceed the toolbar, so nested content such as a
        scrolling ButtonGroup receives real width pressure when stacked. */
     max-inline-size: 100%;
@@ -7135,6 +7779,10 @@
     position: absolute;
     z-index: 50;
     inline-size: max-content;
+    /* Absolutely positioned inside its wrapper, so a percentage would resolve
+       against the trigger, not the viewport. 100vw can overshoot by a classic
+       scrollbar's width, but only below a 22.5rem viewport, where scrollbars
+       overlay. The fixed overlays use 100% of the initial containing block. */
     max-inline-size: min(20rem, calc(100vw - (var(--nk-space) * 8)));
     padding: calc(var(--nk-space) * 1.5) calc(var(--nk-space) * 2.5);
     color: var(--nk-color-foreground);
@@ -7364,7 +8012,7 @@
     border-radius: var(--nk-radius-sm);
   }
   :where([data-nk="typeset"]) > table:not([data-nk], [data-typeset="off"]) {
-    width: 100%;
+    inline-size: 100%;
     border-collapse: collapse;
     font-size: 0.925em;
   }
@@ -7508,7 +8156,7 @@
     }
 
     table {
-      width: 100%;
+      inline-size: 100%;
       border-collapse: collapse;
       font-size: 0.925em;
     }
@@ -7525,8 +8173,8 @@
     }
 
     :where(img, video, svg) {
-      max-width: 100%;
-      height: auto;
+      max-inline-size: 100%;
+      block-size: auto;
       border-radius: var(--nk-radius-md);
     }