cursedbelt 5.0.1 → 5.2.0

package/dist/styles-areas/auth.css

@@ -1,5 +1,5 @@
 /*
- * cursedbelt — the `auth` area. GENERATED BUILD ARTIFACT. Never hand-edit.
+ * cursedbelt — the `auth` area's utility candidates. GENERATED BUILD ARTIFACT. Never hand-edit.
  *
  * the sign-in / register surfaces and the aurora front door — one screen, and never in the app shell.
  *
@@ -13,142 +13,17 @@
  *   @import "cursedbelt/styles-areas/auth.css";
  *   @import "cursedbelt/theme.css";
  *
- * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
- * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 302 candidate(s) scanned.
+ * These are CANDIDATES (`@source inline`), not CSS: the app's own Tailwind pass generates
+ * them, sorted together with the app's utilities, so an area can never put a base utility
+ * after an app's responsive variant (task 2124). An app that imports every area gets exactly
+ * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
+ * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
+ * 10 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --spacing: 0.25rem;
-  }
-}
-@layer utilities {
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
-  .min-h-dvh {
-    min-height: 100dvh;
-  }
-  .self-start {
-    align-self: flex-start;
-  }
-  .self-stretch {
-    align-self: stretch;
-  }
-  .caret-transparent {
-    caret-color: transparent;
-  }
-  .focus-within\:border-field-ring:focus-within {
-    border-color: var(--field-ring);
-  }
-  .focus-within\:ring-2:focus-within {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .focus-within\:ring-field-ring\/30:focus-within {
-    --tw-ring-color: var(--field-ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--field-ring) 30%, transparent);
-    }
-  }
-  .has-\[\[aria-invalid\=true\]\]\:border-field-error:has(:is([aria-invalid=true])) {
-    border-color: var(--field-error);
-  }
-  @media (width >= 40rem) {
-    .sm\:w-11 {
-      width: calc(var(--spacing) * 11);
-    }
-  }
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-    }
-  }
-}
+@source inline("caret-transparent focus-within:border-field-ring focus-within:ring-2");
+@source inline("focus-within:ring-field-ring/30 h-12 has-[[aria-invalid=true]]:border-field-error min-h-dvh");
+@source inline("self-start self-stretch sm:w-11");

package/dist/styles-areas/calendar.css

@@ -1,5 +1,5 @@
 /*
- * cursedbelt — the `calendar` area. GENERATED BUILD ARTIFACT. Never hand-edit.
+ * cursedbelt — the `calendar` area's utility candidates. GENERATED BUILD ARTIFACT. Never hand-edit.
  *
  * the date-picker family: a calendar grid is a whole layout nothing else shares.
  *
@@ -13,404 +13,29 @@
  *   @import "cursedbelt/styles-areas/calendar.css";
  *   @import "cursedbelt/theme.css";
  *
- * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
- * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 203 candidate(s) scanned.
+ * These are CANDIDATES (`@source inline`), not CSS: the app's own Tailwind pass generates
+ * them, sorted together with the app's utilities, so an area can never put a base utility
+ * after an app's responsive variant (task 2124). An app that imports every area gets exactly
+ * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
+ * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
+ * 84 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --color-amber-100: oklch(96.2% 0.059 95.617);
-    --color-amber-200: oklch(92.4% 0.12 95.746);
-    --color-amber-500: oklch(76.9% 0.188 70.08);
-    --color-amber-900: oklch(41.4% 0.112 45.904);
-    --color-green-100: oklch(96.2% 0.044 156.743);
-    --color-green-200: oklch(92.5% 0.084 155.995);
-    --color-green-500: oklch(72.3% 0.219 149.579);
-    --color-green-800: oklch(44.8% 0.119 151.328);
-    --color-green-900: oklch(39.3% 0.095 152.535);
-    --color-emerald-200: oklch(90.5% 0.093 164.15);
-    --color-emerald-500: oklch(69.6% 0.17 162.48);
-    --color-emerald-800: oklch(43.2% 0.095 166.913);
-    --color-emerald-900: oklch(37.8% 0.077 168.94);
-    --color-teal-100: oklch(95.3% 0.051 180.801);
-    --color-teal-200: oklch(91% 0.096 180.426);
-    --color-teal-500: oklch(70.4% 0.14 182.503);
-    --color-teal-800: oklch(43.7% 0.078 188.216);
-    --color-teal-900: oklch(38.6% 0.063 188.416);
-    --color-sky-100: oklch(95.1% 0.026 236.824);
-    --color-sky-200: oklch(90.1% 0.058 230.902);
-    --color-sky-500: oklch(68.5% 0.169 237.323);
-    --color-sky-800: oklch(44.3% 0.11 240.79);
-    --color-sky-900: oklch(39.1% 0.09 240.876);
-    --color-blue-100: oklch(93.2% 0.032 255.585);
-    --color-blue-200: oklch(88.2% 0.059 254.128);
-    --color-blue-500: oklch(62.3% 0.214 259.815);
-    --color-blue-800: oklch(42.4% 0.199 265.638);
-    --color-blue-900: oklch(37.9% 0.146 265.522);
-    --color-violet-100: oklch(94.3% 0.029 294.588);
-    --color-violet-200: oklch(89.4% 0.057 293.283);
-    --color-violet-500: oklch(60.6% 0.25 292.717);
-    --color-violet-800: oklch(43.2% 0.232 292.759);
-    --color-violet-900: oklch(38% 0.189 293.745);
-    --color-purple-100: oklch(94.6% 0.033 307.174);
-    --color-purple-200: oklch(90.2% 0.063 306.703);
-    --color-purple-500: oklch(62.7% 0.265 303.9);
-    --color-purple-800: oklch(43.8% 0.218 303.724);
-    --color-purple-900: oklch(38.1% 0.176 304.987);
-    --color-rose-100: oklch(94.1% 0.03 12.58);
-    --color-rose-200: oklch(89.2% 0.058 10.001);
-    --color-rose-500: oklch(64.5% 0.246 16.439);
-    --color-rose-800: oklch(45.5% 0.188 13.697);
-    --color-rose-900: oklch(41% 0.159 10.272);
-    --color-slate-200: oklch(92.9% 0.013 255.508);
-    --color-slate-500: oklch(55.4% 0.046 257.417);
-    --color-slate-800: oklch(27.9% 0.041 260.031);
-    --spacing: 0.25rem;
-    --text-xs: 0.75rem;
-    --text-xs--line-height: calc(1 / 0.75);
-    --leading-tight: 1.25;
-  }
-}
-@layer utilities {
-  .collapse {
-    visibility: collapse;
-  }
-  .h-3\.5 {
-    height: calc(var(--spacing) * 3.5);
-  }
-  .min-h-\[7rem\] {
-    min-height: 7rem;
-  }
-  .min-h-\[10rem\] {
-    min-height: 10rem;
-  }
-  .min-h-\[44px\] {
-    min-height: 44px;
-  }
-  .w-3\.5 {
-    width: calc(var(--spacing) * 3.5);
-  }
-  .min-w-\[44px\] {
-    min-width: 44px;
-  }
-  .grid-cols-\[repeat\(7\,minmax\(0\,1fr\)\)\] {
-    grid-template-columns: repeat(7,minmax(0,1fr));
-  }
-  .justify-start {
-    justify-content: flex-start;
-  }
-  .border-0 {
-    border-style: var(--tw-border-style);
-    border-width: 0px;
-  }
-  .border-r {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 1px;
-  }
-  .border-border\/40 {
-    border-color: var(--border);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--border) 40%, transparent);
-    }
-  }
-  .bg-amber-100 {
-    background-color: var(--color-amber-100);
-  }
-  .bg-amber-500 {
-    background-color: var(--color-amber-500);
-  }
-  .bg-blue-100 {
-    background-color: var(--color-blue-100);
-  }
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
-  }
-  .bg-emerald-500 {
-    background-color: var(--color-emerald-500);
-  }
-  .bg-green-100 {
-    background-color: var(--color-green-100);
-  }
-  .bg-green-500 {
-    background-color: var(--color-green-500);
-  }
-  .bg-muted\/40 {
-    background-color: var(--muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
-    }
-  }
-  .bg-muted\/60 {
-    background-color: var(--muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 60%, transparent);
-    }
-  }
-  .bg-purple-100 {
-    background-color: var(--color-purple-100);
-  }
-  .bg-purple-500 {
-    background-color: var(--color-purple-500);
-  }
-  .bg-rose-100 {
-    background-color: var(--color-rose-100);
-  }
-  .bg-rose-500 {
-    background-color: var(--color-rose-500);
-  }
-  .bg-sky-100 {
-    background-color: var(--color-sky-100);
-  }
-  .bg-sky-500 {
-    background-color: var(--color-sky-500);
-  }
-  .bg-slate-200 {
-    background-color: var(--color-slate-200);
-  }
-  .bg-slate-500 {
-    background-color: var(--color-slate-500);
-  }
-  .bg-teal-100 {
-    background-color: var(--color-teal-100);
-  }
-  .bg-teal-500 {
-    background-color: var(--color-teal-500);
-  }
-  .bg-violet-100 {
-    background-color: var(--color-violet-100);
-  }
-  .bg-violet-500 {
-    background-color: var(--color-violet-500);
-  }
-  .p-1\.5 {
-    padding: calc(var(--spacing) * 1.5);
-  }
-  .leading-tight {
-    --tw-leading: var(--leading-tight);
-    line-height: var(--leading-tight);
-  }
-  .text-amber-900 {
-    color: var(--color-amber-900);
-  }
-  .text-blue-800 {
-    color: var(--color-blue-800);
-  }
-  .text-emerald-800 {
-    color: var(--color-emerald-800);
-  }
-  .text-green-800 {
-    color: var(--color-green-800);
-  }
-  .text-purple-800 {
-    color: var(--color-purple-800);
-  }
-  .text-rose-800 {
-    color: var(--color-rose-800);
-  }
-  .text-sky-800 {
-    color: var(--color-sky-800);
-  }
-  .text-slate-800 {
-    color: var(--color-slate-800);
-  }
-  .text-teal-800 {
-    color: var(--color-teal-800);
-  }
-  .text-tone-amber-ink {
-    color: var(--tone-amber-ink);
-  }
-  .text-violet-800 {
-    color: var(--color-violet-800);
-  }
-  .line-through {
-    text-decoration-line: line-through;
-  }
-  .outline-1 {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-  .outline-tone-amber-ink {
-    outline-color: var(--tone-amber-ink);
-  }
-  .outline-dashed {
-    --tw-outline-style: dashed;
-    outline-style: dashed;
-  }
-  .group-focus-within\:opacity-100:is(:where(.group):focus-within *) {
-    opacity: 100%;
-  }
-  .last\:border-r-0:last-child {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 0px;
-  }
-  @media (hover: hover) {
-    .hover\:border-border\/80:hover {
-      border-color: var(--border);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:border-border\/80:hover {
-        border-color: color-mix(in oklab, var(--border) 80%, transparent);
-      }
-    }
-    .hover\:bg-muted\/30:hover {
-      background-color: var(--muted);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-muted\/30:hover {
-        background-color: color-mix(in oklab, var(--muted) 30%, transparent);
-      }
-    }
-    .hover\:bg-muted\/40:hover {
-      background-color: var(--muted);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-muted\/40:hover {
-        background-color: color-mix(in oklab, var(--muted) 40%, transparent);
-      }
-    }
-  }
-  .focus\:opacity-100:focus {
-    opacity: 100%;
-  }
-  @media (width >= 40rem) {
-    .sm\:min-h-0 {
-      min-height: 0px;
-    }
-    .sm\:min-h-24 {
-      min-height: calc(var(--spacing) * 24);
-    }
-    .sm\:flex-row {
-      flex-direction: row;
-    }
-    .sm\:items-center {
-      align-items: center;
-    }
-    .sm\:gap-1 {
-      gap: var(--spacing);
-    }
-    .sm\:px-1\.5 {
-      padding-inline: calc(var(--spacing) * 1.5);
-    }
-    .sm\:text-xs {
-      font-size: var(--text-xs);
-      line-height: var(--tw-leading, var(--text-xs--line-height));
-    }
-  }
-  .dark\:bg-amber-900\/40:where(.dark, .dark *) {
-    background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-amber-900) 40%, transparent);
-    }
-  }
-  .dark\:bg-blue-900\/40:where(.dark, .dark *) {
-    background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-blue-900) 40%, transparent);
-    }
-  }
-  .dark\:bg-emerald-900\/40:where(.dark, .dark *) {
-    background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-emerald-900) 40%, transparent);
-    }
-  }
-  .dark\:bg-green-900\/40:where(.dark, .dark *) {
-    background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-green-900) 40%, transparent);
-    }
-  }
-  .dark\:bg-purple-900\/40:where(.dark, .dark *) {
-    background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-purple-900) 40%, transparent);
-    }
-  }
-  .dark\:bg-rose-900\/40:where(.dark, .dark *) {
-    background-color: color-mix(in srgb, oklch(41% 0.159 10.272) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-rose-900) 40%, transparent);
-    }
-  }
-  .dark\:bg-sky-900\/40:where(.dark, .dark *) {
-    background-color: color-mix(in srgb, oklch(39.1% 0.09 240.876) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-sky-900) 40%, transparent);
-    }
-  }
-  .dark\:bg-slate-800:where(.dark, .dark *) {
-    background-color: var(--color-slate-800);
-  }
-  .dark\:bg-teal-900\/40:where(.dark, .dark *) {
-    background-color: color-mix(in srgb, oklch(38.6% 0.063 188.416) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-teal-900) 40%, transparent);
-    }
-  }
-  .dark\:bg-violet-900\/40:where(.dark, .dark *) {
-    background-color: color-mix(in srgb, oklch(38% 0.189 293.745) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-violet-900) 40%, transparent);
-    }
-  }
-  .dark\:text-amber-200:where(.dark, .dark *) {
-    color: var(--color-amber-200);
-  }
-  .dark\:text-blue-200:where(.dark, .dark *) {
-    color: var(--color-blue-200);
-  }
-  .dark\:text-emerald-200:where(.dark, .dark *) {
-    color: var(--color-emerald-200);
-  }
-  .dark\:text-green-200:where(.dark, .dark *) {
-    color: var(--color-green-200);
-  }
-  .dark\:text-purple-200:where(.dark, .dark *) {
-    color: var(--color-purple-200);
-  }
-  .dark\:text-rose-200:where(.dark, .dark *) {
-    color: var(--color-rose-200);
-  }
-  .dark\:text-sky-200:where(.dark, .dark *) {
-    color: var(--color-sky-200);
-  }
-  .dark\:text-slate-200:where(.dark, .dark *) {
-    color: var(--color-slate-200);
-  }
-  .dark\:text-teal-200:where(.dark, .dark *) {
-    color: var(--color-teal-200);
-  }
-  .dark\:text-violet-200:where(.dark, .dark *) {
-    color: var(--color-violet-200);
-  }
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-leading: initial;
-      --tw-outline-style: solid;
-    }
-  }
-}
+@source inline("bg-amber-100 bg-amber-500 bg-blue-100 bg-blue-500 bg-emerald-500 bg-green-100 bg-green-500");
+@source inline("bg-muted/40 bg-muted/60 bg-purple-100 bg-purple-500 bg-rose-100 bg-rose-500 bg-sky-100");
+@source inline("bg-sky-500 bg-slate-200 bg-slate-500 bg-teal-100 bg-teal-500 bg-violet-100 bg-violet-500");
+@source inline("border-0 border-border/40 border-r collapse dark:bg-amber-900/40 dark:bg-blue-900/40");
+@source inline("dark:bg-emerald-900/40 dark:bg-green-900/40 dark:bg-purple-900/40 dark:bg-rose-900/40");
+@source inline("dark:bg-sky-900/40 dark:bg-slate-800 dark:bg-teal-900/40 dark:bg-violet-900/40");
+@source inline("dark:text-amber-200 dark:text-blue-200 dark:text-emerald-200 dark:text-green-200");
+@source inline("dark:text-purple-200 dark:text-rose-200 dark:text-sky-200 dark:text-slate-200 dark:text-teal-200");
+@source inline("dark:text-violet-200 focus:opacity-100 g grid-cols-[repeat(7,minmax(0,1fr))]");
+@source inline("group-focus-within:opacity-100 h-3.5 hover:bg-muted/30 hover:bg-muted/40 hover:border-border/80");
+@source inline("justify-start last:border-r-0 leading-tight line-through min-h-[10rem] min-h-[44px] min-h-[7rem]");
+@source inline("min-w-[44px] outline-1 outline-dashed outline-tone-amber-ink p-1.5 sm:flex-row sm:gap-1");
+@source inline("sm:items-center sm:min-h-0 sm:min-h-24 sm:px-1.5 sm:text-xs text-amber-900 text-blue-800");
+@source inline("text-emerald-800 text-green-800 text-purple-800 text-rose-800 text-sky-800 text-slate-800");
+@source inline("text-teal-800 text-tone-amber-ink text-violet-800 w-3.5");

package/dist/styles-areas/chart-table.css

@@ -1,5 +1,5 @@
 /*
- * cursedbelt — the `chart-table` area. GENERATED BUILD ARTIFACT. Never hand-edit.
+ * cursedbelt — the `chart-table` area's utility candidates. GENERATED BUILD ARTIFACT. Never hand-edit.
  *
  * ChartTablePanel, the chart-with-its-own-data-table composite — 14,838 B of it is the DataTable and the charts it already needs.
  *
@@ -15,27 +15,15 @@
  *   @import "cursedbelt/styles-areas/chart-table.css";
  *   @import "cursedbelt/theme.css";
  *
- * An app that imports every area gets exactly what `cursedbelt/styles-utilities.css`
- * emits — proved rule by rule in src/stylesAreas.spec.ts, which is also what fails
- * when this file is stale. 60 candidate(s) scanned.
+ * These are CANDIDATES (`@source inline`), not CSS: the app's own Tailwind pass generates
+ * them, sorted together with the app's utilities, so an area can never put a base utility
+ * after an app's responsive variant (task 2124). An app that imports every area gets exactly
+ * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
+ * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
+ * 3 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
  * import closures rather than a hand-written list, is scripts/styleAreas.ts.
  */
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer theme, base, components, utilities;
-@layer utilities {
-  .min-w-\[5rem\] {
-    min-width: 5rem;
-  }
-  .shrink-\[2\] {
-    flex-shrink: 2;
-  }
-  .bg-muted\/40 {
-    background-color: var(--muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
-    }
-  }
-}
+@source inline("bg-muted/40 min-w-[5rem] shrink-[2]");