@wtfalch/design 0.9.0 → 0.10.0

package/dist/styles/index.css

@@ -17,12 +17,9 @@
     --font-sans: var(--font-sans);
     --font-mono: var(--font-mono);
     --text-xs: var(--text-xs);
-    --text-xs--line-height: inherit;
     --text-sm: var(--text-sm);
-    --text-sm--line-height: inherit;
     --text-base: var(--text-base);
     --text-lg: var(--text-lg);
-    --text-lg--line-height: inherit;
     --text-xl: var(--text-xl);
     --font-weight-normal: var(--weight);
     --tracking-normal: var(--tracking);
@@ -37,19 +34,20 @@
     --spacing-5: var(--space-5);
     --spacing-6: var(--space-6);
     --spacing-10: var(--space-10);
-    --text-2xs--line-height: inherit;
     --text-2xs: var(--text-2xs);
     --text-md: var(--text-md);
     --font-weight-strong: var(--weight-strong);
     --radius-pill: var(--radius-pill);
     --color-text: var(--text);
     --color-muted: var(--muted);
-    --color-accent: var(--accent);
     --color-border: var(--border);
     --color-border-strong: var(--border-strong);
   }
 }
 @layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
   .collapse {
     visibility: collapse;
   }
@@ -82,6 +80,9 @@
   .sticky {
     position: sticky;
   }
+  .inset-0 {
+    inset: 0px;
+  }
   .z-\[60\] {
     z-index: 60;
   }
@@ -115,12 +116,21 @@
   .mt-1 {
     margin-top: var(--spacing-1);
   }
+  .mt-2 {
+    margin-top: var(--spacing-2);
+  }
+  .mt-px {
+    margin-top: 1px;
+  }
   .mb-3 {
     margin-bottom: var(--spacing-3);
   }
   .ml-2 {
     margin-left: var(--spacing-2);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .block {
     display: block;
   }
@@ -145,6 +155,9 @@
   .table {
     display: table;
   }
+  .h-4 {
+    height: var(--spacing-4);
+  }
   .h-\[14px\] {
     height: 14px;
   }
@@ -163,6 +176,9 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-4 {
+    width: var(--spacing-4);
+  }
   .w-\[18px\] {
     width: 18px;
   }
@@ -190,6 +206,18 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-\[0_0_var\(--split\)\] {
+    flex: 0 0 var(--split);
+  }
+  .flex-\[1_1_0\] {
+    flex: 1 1 0;
+  }
+  .flex-\[1_1_260px\] {
+    flex: 1 1 260px;
+  }
+  .flex-\[1_1_auto\] {
+    flex: 1 1 auto;
+  }
   .flex-none {
     flex: none;
   }
@@ -220,6 +248,9 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-items-center {
+    place-items: center;
+  }
   .items-baseline {
     align-items: baseline;
   }
@@ -253,6 +284,9 @@
   .gap-\[var\(--border-width\)\] {
     gap: var(--border-width);
   }
+  .gap-px {
+    gap: 1px;
+  }
   .self-center {
     align-self: center;
   }
@@ -300,9 +334,6 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-accent {
-    border-color: var(--color-accent);
-  }
   .border-border {
     border-color: var(--color-border);
   }
@@ -318,9 +349,15 @@
   .p-2 {
     padding: var(--spacing-2);
   }
+  .p-3 {
+    padding: var(--spacing-3);
+  }
   .p-4 {
     padding: var(--spacing-4);
   }
+  .px-2 {
+    padding-inline: var(--spacing-2);
+  }
   .px-4 {
     padding-inline: var(--spacing-4);
   }
@@ -339,6 +376,12 @@
   .py-10 {
     padding-block: var(--spacing-10);
   }
+  .pt-2 {
+    padding-top: var(--spacing-2);
+  }
+  .pb-1 {
+    padding-bottom: var(--spacing-1);
+  }
   .pb-2 {
     padding-bottom: var(--spacing-2);
   }
@@ -353,19 +396,18 @@
   }
   .text-2xs {
     font-size: var(--text-2xs);
-    line-height: var(--tw-leading, var(--text-2xs--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
   }
   .text-lg {
     font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
   }
   .text-sm {
     font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
   }
   .text-xs {
     font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
   }
   .leading-\[0\] {
     --tw-leading: 0;
@@ -379,6 +421,10 @@
     --tw-leading: 1.25;
     line-height: 1.25;
   }
+  .leading-\[1\.35\] {
+    --tw-leading: 1.35;
+    line-height: 1.35;
+  }
   .leading-\[16px\] {
     --tw-leading: 16px;
     line-height: 16px;
@@ -420,12 +466,12 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .opacity-0 {
-    opacity: 0%;
-  }
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-90 {
+    opacity: 90%;
+  }
   .opacity-\[0\.55\] {
     opacity: 0.55;
   }
@@ -465,9 +511,6 @@
   .surface-panel {
     background: var(--panel);
   }
-  .surface-panel-2 {
-    background: var(--panel-2);
-  }
   .disabled\:cursor-default:disabled {
     cursor: default;
   }
@@ -707,7 +750,19 @@
   }
 }
 
-/* ---- ./base.css ---- */
+/* ---- ./_system-light.css ---- */
+/* The `system` theme's light half.
+ *
+ * Its own file, and outside the components layer, because it is a *theme*
+ * rather than a component rule. `tokens.css` states the dark base on `:root`
+ * and is unlayered; the moment this sat inside `@layer components` it lost to
+ * that, and every `system` specimen rendered dark on a light-mode machine.
+ * Unlayered beats layered whatever the selector says, which is exactly the
+ * trap this repository keeps finding in different costumes.
+ *
+ * The underscore marks it the same way `_tailwind.built.css` is marked:
+ * `copy-css.mjs` passes both through without wrapping them.
+ */
 /* Light, only under the `system` theme. This used to override `:root`
    unconditionally, so choosing a dark theme on a light-mode laptop got
    silently repainted. Every other theme states its own palette. */
@@ -736,6 +791,8 @@
     }
 }
 
+/* ---- ./base.css ---- */
+@layer components {
 /* Derived from the two surfaces every theme already defines, so a theme gets a
    control colour without knowing this exists. */
 /* Pseudo-elements too. `*` does not match them, and `box-sizing` is not
@@ -1453,23 +1510,6 @@ input:active, textarea:active, select:active { transform: none; }
    template are allowed to diverge, and this is only saying that they have. */
 .set-hint.drifted { color: var(--warn); }
 
-/* What an applet drew, read back. A tree rather than prose, so it is left as
-   preformatted text and given a ceiling -- a busy applet is a hundred lines and
-   this sits inside a settings pane. */
-.drawn {
-  margin: var(--space-2) 0 0;
-  padding: var(--space-2) var(--space-2);
-  max-height: 220px;
-  overflow: auto;
-  font-size: var(--text-xs);
-  line-height: 1.45;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--panel-2);
-}
-
 /* One applet, alone on the page, at `/applet/<id>`. Fills the window: there is
    no grid here to decide a height, and a screenshot of an applet letterboxed
    inside a page is mostly not the applet. */
@@ -1516,11 +1556,6 @@ input:active, textarea:active, select:active { transform: none; }
    that belongs to a conversation lives here any more, so it can breathe. */
 .topbar .ctl-grow { flex: 1; min-width: 0; }
 
-/* Back on the left, Next on the right, with the gap between them doing the
-   separating -- so the button that goes forward is in the same place on both
-   pages instead of sliding when Back appears. */
-.first-run-actions { align-items: center; }
-
 @keyframes listening-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
 
 /* table ---------------------------------------------------------------- */
@@ -1596,8 +1631,10 @@ input:active, textarea:active, select:active { transform: none; }
   color: var(--muted);
   opacity: 1;
 }
+}
 
 /* ---- ./select.css ---- */
+@layer components {
 /* How big a control is, asked for rather than inherited.
    Four sizes existed and every one of them came from a descendant selector:
    `.set-row button` was 11px in 3px of padding, `.approval-actions button` was
@@ -1692,16 +1729,19 @@ input:active, textarea:active, select:active { transform: none; }
 /* State is read off React Aria's attributes: `data-open` on the root,
    `data-focused` / `data-selected` / `data-disabled` on an item, where
    `.open`, `[data-active]`, `.on` and `.off` used to be. */
-.sel-list { scroll-padding-block: var(--space-1); box-shadow: var(--shadow-2); })` brings up ended flush against the
-     border and read as clipped rather than as one of a set -- and this list
-     opens scrolled to whatever is chosen, so that was the ordinary state.
-     `scroll-padding` insets what counts as "in view", so it stops short by
-     the same four the sides have. */
+/* The list keeps two things the utilities on `Select` cannot say.
+ *
+ * `scroll-padding-block`: the same room while the list is scrolled as it has
+ * at rest. Padding at the top of a scroll container scrolls away with the
+ * content, so the row `scrollIntoView({block: 'nearest'})` brings up ended
+ * flush against the border and read as clipped rather than as one of a set --
+ * and this list opens scrolled to whatever is chosen, so that was the
+ * ordinary state.
+ *
+ * `box-shadow`: `--shadow-2` is a token, and a utility would have to inline
+ * the value, which is the one thing the vocabulary exists to stop. */
+.sel-list {
   scroll-padding-block: var(--space-1);
-  list-style: none;
-  border: var(--border-width) solid var(--border-strong);
-  border-radius: var(--radius-md);
-  background: var(--panel);
   box-shadow: var(--shadow-2);
 }
 
@@ -1716,6 +1756,19 @@ input:active, textarea:active, select:active { transform: none; }
 
 /* The tick marks the chosen row. Colour alone would not: a list where the only
    difference is a hue is a list you cannot read past. */
+/* The tick's resting state lives here, beside the state that overrides it.
+ *
+ * It was `opacity-0` on the element and `opacity: 1` here, which worked only
+ * while this sheet was unlayered. A utility is in `@layer utilities` and
+ * beats `@layer components` whatever the selector, so the moment the sheets
+ * moved into a layer the tick stopped appearing on the selected row -- the
+ * resting state won permanently.
+ *
+ * The rule generalises: a utility for a resting state whose active state is a
+ * relationship between elements will always beat that active state. The pair
+ * has to sit in the same layer. */
+.sel-tick { opacity: 0; }
+
 .sel-item[data-selected] .sel-tick { opacity: 1; }
 
 /* The icon on a speaker's row in the open list -- `Select`'s `aside`. Last in
@@ -1750,8 +1803,10 @@ input:active, textarea:active, select:active { transform: none; }
 .field > input,
 .field > textarea,
 .field > .sel { width: 100%; }
+}
 
 /* ---- ./dangerzone.css ---- */
+@layer components {
 /* Destructive, and legible as such standing still. */
 .btn.danger {
   color: var(--bad);
@@ -1841,8 +1896,6 @@ input:active, textarea:active, select:active { transform: none; }
   border-radius: 4px;
 }
 
-.danger-unavailable { margin-top: var(--space-2); opacity: 0.85; }
-
 /* Label beside the control, for a settings pane: a column of names on the left
    and their controls on the right reads as a list of what is set, where the
    same rows stacked read as a form waiting to be filled in. The description
@@ -1863,8 +1916,10 @@ input:active, textarea:active, select:active { transform: none; }
    controls in the same column at the same indent that do not line up read as
    an accident rather than as a pair. */
 .field-row > button { min-width: 9ch; }
+}
 
 /* ---- ./callout.css ---- */
+@layer components {
 /* One shape for everything that tells you something.
    `.banner` and `.callout` were the same box drawn twice: a bordered, rounded,
    12px panel with a tint. They differed in padding by a pixel in each direction
@@ -1918,8 +1973,6 @@ input:active, textarea:active, select:active { transform: none; }
 /* A callout that leaves on its own.
    Room at the bottom for the bar, and `position: relative` so the bar can sit
    on the border rather than inside the text. */
-.callout-timed { position: relative; padding-bottom: var(--space-5); overflow: hidden; }
-
 /* The countdown. Drawn as a shrinking bar rather than a number: nobody wants to
    read a clock, they want to know whether they have time. Animated width rather
    than a transition, so it starts the moment it is painted. */
@@ -1980,14 +2033,6 @@ input:active, textarea:active, select:active { transform: none; }
    is the operating system's font drawing a glyph beside an app that has an icon
    set for exactly this. The ring went with it: a circle around a warning
    triangle is two shapes saying one thing. */
-.callout-mark {
-  flex: none;
-  display: grid;
-  place-items: center;
-  margin-top: 1px;
-  opacity: 0.9;
-}
-
 /* Held-back history when a local conversation would cross to a hosted model.
    Deliberately loud: the cost of missing it is uploading work that was kept
    local on purpose. */
@@ -2003,8 +2048,23 @@ input:active, textarea:active, select:active { transform: none; }
 }
 
 .callout button { flex: none; }
+/* A state, so it stays a class.
+ *
+ * `Callout` applies this as `running ? ' callout-timed' : ''` inside a
+ * template literal -- which is not a class list a rewrite can read, and the
+ * first pass at converting it deleted the rule while leaving the usage. The
+ * box lost five spacing steps of padding and the countdown bar had nothing
+ * to sit in. A class that appears only inside a conditional is a state; the
+ * sheet is where those belong. */
+.callout-timed {
+  position: relative;
+  padding-bottom: var(--space-5);
+  overflow: hidden;
+}
+}
 
 /* ---- ./card.css ---- */
+@layer components {
 /* `.card` is public API, not this component's private styling.
  *
  * Consumers apply it to their own markup -- the gallery's skeleton specimen
@@ -2059,16 +2119,6 @@ input:active, textarea:active, select:active { transform: none; }
    which reads as a different column of content. */
 .card:has(.card-icon) .card-inline { padding-left: calc(var(--card-icon) + var(--space-3)); }
 
-/* Its own line, above the sentence it introduces. */
-.card-inline-label {
-  display: block;
-  font-size: var(--text-xs);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--muted);
-  margin-bottom: 2px;
-}
-
 .card-title { display: block; font-size: var(--text-base); }
 
 .card-desc { margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
@@ -2146,8 +2196,10 @@ input:active, textarea:active, select:active { transform: none; }
 }
 
 .card[aria-pressed='true']:hover { border-color: var(--accent); }
+}
 
 /* ---- ./toggle.css ---- */
+@layer components {
 .card-action .switch-row { padding: 0; gap: var(--space-2); }
 
 .card-action .switch-row .switch-body { flex: none; }
@@ -2204,12 +2256,8 @@ input:active, textarea:active, select:active { transform: none; }
    tooltip ended up orphaned under it. */
 .set-row > .switch-row { flex: 1; min-width: 0; padding-block: 0; }
 
-.switch-label { color: var(--text); }
-
 .switch-hint { font-size: var(--text-sm); color: var(--muted); }
 
-.switch-said { flex: none; font-size: var(--text-xs); color: var(--muted); }
-
 /* Three sizes, the same names every other control uses. The switch scales with
    the row: a 30x18 track beside 12px text is a different control from the same
    track beside 16px text. */
@@ -2378,19 +2426,10 @@ input[type='radio']:active:not(:disabled) {
 @media (prefers-reduced-motion: reduce) {
   .toggle-sweep::before { animation: none; background: color-mix(in oklab, var(--accent) 45%, transparent); }
 }
-
-/* ---- ./skeleton.css ---- */
-.muted { color: var(--muted); }
-
-.pulse-block {
-  display: inline-block;
-  height: 8px;
-  border-radius: var(--radius-sm);
-  background: var(--muted);
-  animation: ds-pulse 1.4s ease-in-out infinite;
-  vertical-align: middle;
 }
 
+/* ---- ./skeleton.css ---- */
+@layer components {
 /* skeletons ------------------------------------------------------------ */
 
 /* Ink at low alpha, not a named surface.
@@ -2434,8 +2473,10 @@ input[type='radio']:active:not(:disabled) {
   /* Still distinguishable from a real block of colour, and still still. */
   .skel-pulse { animation: none; opacity: 0.8; }
 }
+}
 
 /* ---- ./rows.css ---- */
+@layer components {
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* A name and the pills that qualify it, on one line, where the name is the only
@@ -2647,8 +2688,6 @@ input[type='radio']:active:not(:disabled) {
 
 .rows-split:first-of-type { margin-top: var(--space-2); }
 
-.rows-empty { padding: var(--space-3) 0; }
-
 /* The name, the pills and the line underneath. `min-width: 0` is the whole
    reason this is a class: a flex item will not shrink below its content, so
    without it the name pushes the pills off the end -- and the pills are the
@@ -2665,8 +2704,6 @@ input[type='radio']:active:not(:disabled) {
 
 /* The aligned column. `margin-left: auto` rather than a grid, because the rows
    are flex and a size that varies by two characters does not need a track. */
-.row-trail { flex: none; margin-left: auto; white-space: nowrap; }
-
 .rows-row.rows-top { align-items: flex-start; }
 
 .rows-row.rows-bad .truncate { color: var(--bad); }
@@ -2696,8 +2733,10 @@ input[type='radio']:active:not(:disabled) {
 .row-hit:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+}
 
 /* ---- ./progress.css ---- */
+@layer components {
 /* progress ----------------------------------------------------------- */
 
 /* The bar itself: a track with a child it fills, an animation and a
@@ -2739,8 +2778,10 @@ input[type='radio']:active:not(:disabled) {
   /* Still distinguishable from empty, and from full. */
   .bar-indeterminate > i { animation: none; width: 100%; opacity: 0.35; }
 }
+}
 
 /* ---- ./tabs.css ---- */
+@layer components {
 /* ---------------------------------------------------------------- tabs */
 .tabs { position: relative; display: flex; gap: var(--space-1); }
 
@@ -2808,14 +2849,6 @@ input[type='radio']:active:not(:disabled) {
 
 .tabs-vertical .tab.on .tab-label { color: var(--accent); }
 
-.tab-hint {
-  display: block;
-  margin-top: 1px;
-  font-size: var(--text-xs);
-  color: var(--muted);
-  line-height: 1.35;
-}
-
 /* A heading above a run of tabs. Set apart from the run above by space, not
    a rule -- the rail already has one edge -- and the tabs under it step in
    by the label's own padding so the label reads as theirs. */
@@ -2826,8 +2859,6 @@ input[type='radio']:active:not(:disabled) {
 
 .tabs-vertical .tab-group:first-child { padding-top: var(--space-2); }
 
-.tab-group-label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text); }
-
 .tabs-vertical .tab.in-group { padding-left: var(--space-5); }
 
 /* No line under a vertical strip -- its edge is the border on the right. */
@@ -2841,8 +2872,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 .tabs-vertical .tab:active:not(:disabled) { border-color: transparent; }
+}
 
 /* ---- ./toast.css ---- */
+@layer components {
 /* ---------------------------------------------------------------- toasts */
 .toasts {
   position: fixed;
@@ -2940,8 +2973,10 @@ input[type='radio']:active:not(:disabled) {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
+}
 
 /* ---- ./modal.css ---- */
+@layer components {
 /* modal --------------------------------------------------------------- */
 
 /* `hidden` needs saying out loud here. The browser's own `[hidden]` rule is a
@@ -3033,8 +3068,6 @@ input[type='radio']:active:not(:disabled) {
    `<strong>` rule above is the one that sets the size. */
 /* Under the title, on the header's padding rather than the body's, so it reads
    as part of the heading rather than as the first line of content. */
-.modal-desc { line-height: 1.5; }
-
 .modal-body { padding: var(--space-2) var(--space-4) var(--space-3); overflow-y: auto; }
 
 /* The close cross. Its rule stayed behind in tf's stylesheet when the split
@@ -3172,8 +3205,10 @@ input[type='radio']:active:not(:disabled) {
   .modal.sheet[data-entering],
   .modal.sheet[data-exiting] { animation: none; }
 }
+}
 
 /* ---- ./slider.css ---- */
+@layer components {
 /* slider ----------------------------------------------------------------- */
 /* A number from a range -- `Slider.tsx` says when one is the right control.
    The row is laid out like a switch row: words on the left, the control on the
@@ -3200,12 +3235,8 @@ input[type='radio']:active:not(:disabled) {
 
 .slider-row.is-disabled { opacity: 0.55; }
 
-.slider-body { flex: 1 1 260px; min-width: 0; display: grid; gap: 1px; }
-
 .set-row > .slider-row { flex: 1; min-width: 0; padding-block: 0; }
 
-.slider-label { color: var(--text); }
-
 .slider-hint { font-size: var(--text-sm); color: var(--muted); }
 
 /* The box, with the value printed inside it at the right where a select
@@ -3395,8 +3426,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    the scale, and the two line up; an explicit `size-*` still wins. */
 :where(.set-row) button,
 :where(.set-row) .slider-box { font-size: var(--text-xs); }
+}
 
 /* ---- ./checkbox.css ---- */
+@layer components {
 /* A row you choose. There is no checkbox in it.
    Every one of the fourteen in this app sits beside a name and a line of
    explanation, so the row was always the thing being designed and the 17px
@@ -3429,8 +3462,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* A run of checkboxes is one choice, not several settings that happen to be
    adjacent. Tight enough that the group reads as a block -- at the spacing a
    form field wants, four tools look like four unrelated questions. */
-.choice-group { display: grid; gap: var(--space-1); }
-
 /* The same choice, laid out as tiles instead of a column.
    
    Four short names down the full width of a card is four wide bands for four
@@ -3554,8 +3585,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    second line is what the first line is actually asking for. */
 .choice-why { display: block; color: var(--muted); font-size: var(--text-sm); margin-top: 1px; }
 
-.choice-meta { color: var(--muted); font-size: var(--text-xs); font-family: var(--font-mono); }
-
 .choice[data-disabled] {
   cursor: not-allowed;
   border-color: var(--border);
@@ -3566,8 +3595,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .choice[data-disabled] .choice-why { opacity: 0.5; }
 
 .choice[data-disabled]::after { opacity: 0.4; }
+}
 
 /* ---- ./table.css ---- */
+@layer components {
 /* A second line under a row's name, inside the `<th scope="row">` that makes it
    one. The cell is bold because it is a heading; what hangs under it is not,
    and inherited the weight -- so a pinned version read as loud as the thing it
@@ -3615,27 +3646,48 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
 
 .data-table thead th[style*='right'] { text-align: right; }
+}
 
 /* ---- ./sizegrid.css ---- */
-/* What is left of the size grid once it draws itself.
+@layer components {
+/* The cell's colour, all of it, in one place.
+ *
+ * `SizeGrid` draws the cell's geometry with utilities and leaves every colour
+ * here, because `on` and `chosen` override the resting state -- and a utility
+ * is in `@layer utilities`, which beats `@layer components` whatever the
+ * selector. Stated as `surface-panel-2` and `border-border` on the element,
+ * the resting state won permanently and no cell ever lit up.
  *
- * `on` follows the pointer; `chosen` is what is actually saved, shown only
- * when nothing is hovered so the two can never contradict each other.
- * `chosen` is a border colour and says so at the call site; `on` is a fill
- * mixed from the accent, and `color-mix` in an arbitrary value is less
- * readable than the rule it replaces. */
+ * That is the third time this pattern has bitten: `Select`'s tick and
+ * `Empty`'s figure were the other two. The rule: a resting state whose
+ * active state is a CSS rule has to be a CSS rule too. */
+.size-cell {
+  border: var(--border-width) solid var(--border);
+  background: var(--panel-2);
+}
+
+/* `on` follows the pointer; `chosen` is what is actually saved, shown only
+   when nothing is hovered so the two can never contradict each other. */
 .size-cell.on {
   border-color: var(--accent);
   background: color-mix(in srgb, var(--accent) 45%, transparent);
 }
 
+.size-cell.chosen { border-color: var(--accent); }
+}
+
 /* ---- ./tooltip.css ---- */
+@layer components {
 /* A callout: something worth knowing, with nothing to answer. Distinct from a
    `?`, which is an offer to read more, and from a banner, which is a problem.
    The mark is a round `i` rather than an emoji so it takes the theme's colours
    and stays the same size as the text beside it. */
-/* An info-toned `.callout`, spelled the old way. Identical to it now rather than
-   nearly identical to it, which is the whole point of the consolidation: the
+/* An info-toned `.callout`, spelled the old way. Identical to it now rather
+   than nearly identical to it, which is the whole point of the consolidation.
+   (This comment has been unterminated since before the Tailwind branch -- it
+   stops mid-sentence and never closes, so the CSS parser merged it with the
+   one below and recovered. Nothing was lost from the stylesheet; the rest of
+   the sentence was. Closed here rather than guessed at.) */
 
 /* What is left once `Tooltip` draws its own mark: the hover and focus that
    reach the mark from its parent, and the tip -- whose closed and open
@@ -3718,8 +3770,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 }
 
 .explain-tip strong { color: var(--text); font-weight: 600; }
+}
 
 /* ---- ./illustration.css ---- */
+@layer components {
 /* illustrations -------------------------------------------------------- */
 
 /* Open Peeps, two colours, wearing whatever the theme is.
@@ -3727,8 +3781,9 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    reason they can live in an app with four palettes: `ink` becomes the current
    text colour and `paper` becomes the surface behind it, so one file covers
    Night, Paper and both halves of System. Give the wrapper a `color` and
-   the figure follows it -- `.muted` for a quiet empty state, `--accent` for the
-   one thing on screen worth looking at. */
+   the figure follows it: `--muted` for a quiet empty state, `--accent` for the
+   one thing on screen worth looking at. Set that colour on the wrapper --
+   `Empty` reaches for `text-muted`, and any token works. */
 .illo {
   display: inline-block;
   /* Height is the given dimension and the width comes from the drawing, so a
@@ -3745,20 +3800,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    caller says otherwise. Not `transparent`: these have overlapping shapes, and
    a shirt that lets the arm behind it show through reads as a hole. */
 .illo .paper { fill: var(--illo-paper); }
-
-/* The figure in a whole-surface `Empty`, drawn in the muted grey of the
-   sentence under it.
- *
- * A utility cannot do this, and the reason is worth keeping: `.illo` sets
- * `color: inherit` and is unlayered, while every Tailwind utility lives in
- * `@layer utilities` -- and an unlayered declaration beats a layered one
- * whatever the specificity. So `text-muted` on the figure lost, silently,
- * and the shirt came out full text black beside a muted sentence. The
- * original rule already carried a note about needing two classes to beat
- * `.illo`; layers make that impossible rather than merely fiddly. */
-.nothing-figure { color: var(--muted); }
+}
 
 /* ---- ./field.css ---- */
+@layer components {
 /* fields --------------------------------------------------------------- */
 
 /* Label, description, input, error -- in the order they are wanted. The
@@ -3766,7 +3811,9 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    to what was typed, so it goes after. */
 .field { display: grid; gap: var(--space-1); }
 
-.field-stack-layout { /* the default: label, description, control, error */ }
+/* `.field-stack-layout` carries no rules: stacking is what `.field` already
+   does, and the class is emitted only so that both layouts name themselves
+   the same way (`field-${layout}-layout`). Only the row layout overrides. */
 
 .field-row-layout > .field-label { grid-column: 1; }
 
@@ -3787,8 +3834,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 
 /* Not red. The asterisk marks which fields are required; colouring it the same
    as a failure says something has already gone wrong with every one of them. */
-.field-required { color: var(--muted); }
-
 .field-hint,
 .field-error { margin: 0; font-size: var(--text-sm); line-height: 1.45; }
 
@@ -3810,8 +3855,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* Fields stacked down a form. Wider than the gap inside one field, so the
    label of the next belongs to the input under it rather than to the error
    above it. */
-.field-stack { display: grid; gap: var(--space-4); }
-
 .field-row > .field { flex: 1; min-width: 0; }
 
 /* A password with an eye -- `Input type="password"`.
@@ -3933,14 +3976,12 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
   background: var(--panel-2);
   color: var(--text);
 }
+}
 
 /* ---- ./tour.css ---- */
+@layer components {
 /* tour ----------------------------------------------------------------- */
 
-/* The layer sits over everything and catches nothing: the scrim is painted by
-   the hole's shadow, so there is no full-screen element to swallow a click. */
-.tour { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
-
 /* The control the tour is currently pointing at.
    
    Much of this chrome is invisible until you touch it -- `.view-add` lives at
@@ -3951,11 +3992,14 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    what every control does at rest, and the alternative is naming each one here
    and watching that list drift from the rules that hide them. One declaration
    that outranks whatever the resting state is beats an enumeration that goes
-   stale. It is scoped to a class only ever present on one element at a time. */
-.tour-target {
-  opacity: 1 !important;
-  color: var(--text) !important;
-}
+   stale. It is scoped to a class only ever present on one element at a time.
+
+   Opacity and nothing else. This forced `color: var(--text)` too, from the
+   original port, with no case on record that needed it -- and it broke the
+   first target that painted its own background, turning a primary button's
+   label dark on accent at 2.2:1. The spotlight makes a control visible; what
+   colour it is at rest is the control's business. */
+.tour-target { opacity: 1 !important; }
 
 /* The spotlight. An enormous spread shadow dims the whole window except the
    rectangle it is drawn on, which needs no clip path and no arithmetic. */
@@ -3989,19 +4033,19 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 
 .tour-card:focus { outline: none; }
 
-.tour-title { font-size: var(--text-base); }
-
 .tour-body { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
 
 .tour-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
 
 .tour-count { color: var(--muted); font-size: var(--text-xs); }
+}
 
 /* The mail and forum shell, added in 0.4.0. After the rest, because the
    anchored surfaces (`.pop`, `.menu-sheet`, `.cmd`) sit over everything and a
    rule of equal specificity that came earlier would lose to whatever the
    sheets they cover happen to set. */
 /* ---- ./stat.css ---- */
+@layer components {
 /* What the utilities on `Stat` cannot say: a tone on the tile colouring the
    figure inside it. An attribute on the parent selecting a child is a
    relationship; a utility is a property on one element.
@@ -4012,8 +4056,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .stat[data-tone='good'] .stat-value { color: var(--good); }
 .stat[data-tone='warn'] .stat-value { color: var(--warn); }
 .stat[data-tone='bad'] .stat-value { color: var(--bad); }
+}
 
 /* ---- ./shell.css ---- */
+@layer components {
 /* The measure, and only the measure.
  *
  * `Shell` draws itself with utilities -- it is layout and nothing else. What
@@ -4040,8 +4086,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
   font-size: var(--text-sm);
   white-space: nowrap;
 }
+}
 
 /* ---- ./scrollarea.css ---- */
+@layer components {
 /* A box that scrolls, with its edges drawn.
    
    The fades are `::before`/`::after` on the scroller itself, pinned with
@@ -4134,8 +4182,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
   .scroller.faded::before,
   .scroller.faded::after { transition: none; }
 }
+}
 
 /* ---- ./splitpane.css ---- */
+@layer components {
 /* Two panes and the handle between them. */
 .split {
   display: flex;
@@ -4154,17 +4204,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    the intrinsic width of a mail list is the longest unbroken subject line in
    it. Without this the handle stops partway across and nothing on screen says
    why -- it just refuses, differently for every mailbox. */
-.split-pane {
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.split-first { flex: 0 0 var(--split); }
-.split-second { flex: 1 1 0; }
-
 /* The handle is wider than it looks: a hairline is a correct-looking divider
    and an impossible pointer target. The grip is the line, drawn at
    `--border-width` down the middle of a `--space-3` strip, and the strip is
@@ -4235,8 +4274,10 @@ body.splitting * { cursor: inherit !important; }
 @media (prefers-reduced-motion: reduce) {
   .split-grip { transition: none; }
 }
+}
 
 /* ---- ./popover.css ---- */
+@layer components {
 /* A small surface anchored to what opened it. Same sheet as the select's list,
    because they are the same object -- something that appeared over the page,
    attached to a control. */
@@ -4259,13 +4300,6 @@ body.splitting * { cursor: inherit !important; }
   z-index: 60;
 }
 
-.pop-body {
-  padding: var(--space-3);
-  outline: none;
-  color: var(--text);
-  font-size: var(--text-sm);
-}
-
 /* Entry, and the direction it comes from. `data-placement` is React Aria's,
    set to where the surface actually went rather than where it was asked to go,
    so the movement agrees with the flip. */
@@ -4290,8 +4324,10 @@ body.splitting * { cursor: inherit !important; }
   .pop[data-entering],
   .pop[data-exiting] { animation: none; }
 }
+}
 
 /* ---- ./menu.css ---- */
+@layer components {
 /* What is left once `Menu` draws its sheet and its list: the rows, whose
    `data-focused`, `data-pressed` and danger states React Aria stamps on
    them, and the rules that reach from a row into what it holds. The
@@ -4324,8 +4360,6 @@ body.splitting * { cursor: inherit !important; }
 .menu-icon { flex: none; width: var(--space-4); height: var(--space-4); color: var(--muted); }
 .menu-item[data-focused] .menu-icon { color: var(--text); }
 
-.menu-text { flex: 1 1 auto; min-width: 0; display: grid; }
-.menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .menu-desc {
   font-size: var(--text-xs);
   color: var(--muted);
@@ -4373,8 +4407,10 @@ body.splitting * { cursor: inherit !important; }
 }
 
 .menu-sheet { box-shadow: var(--shadow-2); }
+}
 
 /* ---- ./command.css ---- */
+@layer components {
 /* The command palette: a field over the app and a list under it. */
 .cmd-scrim {
   position: fixed;
@@ -4402,18 +4438,6 @@ body.splitting * { cursor: inherit !important; }
   flex-direction: column;
 }
 
-.cmd-body { outline: none; display: flex; flex-direction: column; min-height: 0; }
-
-.cmd-field {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  border-bottom: var(--border-width) solid var(--border);
-}
-
-.cmd-mark { flex: none; width: var(--space-4); height: var(--space-4); color: var(--muted); }
-
 /* No border, no focus ring on the input itself: the whole surface is the
    field, focus is already in it when it opens, and a ring around a box that
    fills the top of the palette is a ring around the palette. */
@@ -4430,22 +4454,6 @@ body.splitting * { cursor: inherit !important; }
 
 .cmd-input::placeholder { color: var(--muted); }
 
-.cmd-list {
-  padding: var(--space-2);
-  overflow: auto;
-  overscroll-behavior: contain;
-  outline: none;
-  min-height: 0;
-}
-
-.cmd-group-title {
-  padding: var(--space-2) var(--space-2) var(--space-1);
-  font-size: var(--text-2xs);
-  text-transform: uppercase;
-  letter-spacing: var(--tracking);
-  color: var(--muted);
-}
-
 .cmd-item {
   display: flex;
   align-items: center;
@@ -4481,8 +4489,6 @@ body.splitting * { cursor: inherit !important; }
 .cmd-icon { flex: none; width: var(--space-4); height: var(--space-4); color: var(--muted); }
 .cmd-item[data-focused] .cmd-icon { color: var(--text); }
 
-.cmd-text { flex: 1 1 auto; min-width: 0; display: grid; }
-.cmd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cmd-desc {
   font-size: var(--text-xs);
   color: var(--muted);
@@ -4516,8 +4522,10 @@ body.splitting * { cursor: inherit !important; }
   .cmd-scrim[data-exiting],
   .cmd[data-entering] { animation: none; }
 }
+}
 
 /* ---- ./pagination.css ---- */
+@layer components {
 /* What is left once `Pagination` draws its own frame: the step and page
    buttons, whose hover, focus-visible and current states are pseudo-classes
    on two selectors at once, and `.pager-count strong`, which reaches into
@@ -4636,8 +4644,10 @@ body.splitting * { cursor: inherit !important; }
   .pager-page,
   .pager-jump { transition: none; }
 }
+}
 
 /* ---- ./identity.css ---- */
+@layer components {
 /* A person, said in one line: initials, name, sometimes the address. */
 .ident {
   display: inline-flex;
@@ -4680,25 +4690,6 @@ body.splitting * { cursor: inherit !important; }
   font-size: var(--text-2xs);
 }
 
-.ident-text { display: grid; min-width: 0; }
-
-.ident-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: var(--weight);
-}
-
-.ident-address {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--text-xs);
-  color: var(--muted);
-}
-
-.ident-aside { flex: none; color: var(--muted); font-size: var(--text-xs); }
-
 /* A chip in a composer's To field: boxed, tighter, removable. */
 .ident.kind-chip {
   gap: var(--space-1);
@@ -4738,4 +4729,5 @@ body.splitting * { cursor: inherit !important; }
 
 .ident-remove:hover { background: var(--panel); color: var(--text); }
 .ident-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+}