@wtfalch/design 0.8.0 → 0.9.1

package/dist/tf.css

@@ -278,7 +278,700 @@
  *
  * `scripts/copy-css.mjs` flattens these into one file at build time.
  */
-/* ---- ./base.css ---- */
+/* ---- ./_tailwind.built.css ---- */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: var(--font-sans);
+    --font-mono: var(--font-mono);
+    --text-xs: var(--text-xs);
+    --text-sm: var(--text-sm);
+    --text-base: var(--text-base);
+    --text-lg: var(--text-lg);
+    --text-xl: var(--text-xl);
+    --font-weight-normal: var(--weight);
+    --tracking-normal: var(--tracking);
+    --radius-sm: var(--radius-sm);
+    --radius-md: var(--radius-md);
+    --radius-lg: var(--radius-lg);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --spacing-1: var(--space-1);
+    --spacing-2: var(--space-2);
+    --spacing-3: var(--space-3);
+    --spacing-4: var(--space-4);
+    --spacing-5: var(--space-5);
+    --spacing-6: var(--space-6);
+    --spacing-10: var(--space-10);
+    --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-border: var(--border);
+    --color-border-strong: var(--border-strong);
+  }
+}
+@layer utilities {
+  .collapse {
+    visibility: collapse;
+  }
+  .invisible {
+    visibility: hidden;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .z-\[60\] {
+    z-index: 60;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .m-0 {
+    margin: 0px;
+  }
+  .m-auto {
+    margin: auto;
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .mt-1 {
+    margin-top: var(--spacing-1);
+  }
+  .mb-3 {
+    margin-bottom: var(--spacing-3);
+  }
+  .ml-2 {
+    margin-left: var(--spacing-2);
+  }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .table {
+    display: table;
+  }
+  .h-\[14px\] {
+    height: 14px;
+  }
+  .h-\[18px\] {
+    height: 18px;
+  }
+  .max-h-\[24rem\] {
+    max-height: 24rem;
+  }
+  .max-h-\[280px\] {
+    max-height: 280px;
+  }
+  .min-h-0 {
+    min-height: 0px;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .w-\[18px\] {
+    width: 18px;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .max-w-\[46ch\] {
+    max-width: 46ch;
+  }
+  .max-w-\[min\(20rem\,calc\(100vw-var\(--space-6\)\)\)\] {
+    max-width: min(20rem, calc(100vw - var(--space-6)));
+  }
+  .max-w-\[var\(--shell-measure\)\] {
+    max-width: var(--shell-measure);
+  }
+  .max-w-\[var\(--shell-measure-wide\)\] {
+    max-width: var(--shell-measure-wide);
+  }
+  .min-w-0 {
+    min-width: 0px;
+  }
+  .min-w-\[12rem\] {
+    min-width: 12rem;
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .flex-none {
+    flex: none;
+  }
+  .shrink {
+    flex-shrink: 1;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .cursor-help {
+    cursor: help;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .resize {
+    resize: both;
+  }
+  .list-none {
+    list-style-type: none;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-items-center {
+    justify-items: center;
+  }
+  .gap-0 {
+    gap: 0px;
+  }
+  .gap-1 {
+    gap: var(--spacing-1);
+  }
+  .gap-2 {
+    gap: var(--spacing-2);
+  }
+  .gap-3 {
+    gap: var(--spacing-3);
+  }
+  .gap-4 {
+    gap: var(--spacing-4);
+  }
+  .gap-\[var\(--border-width\)\] {
+    gap: var(--border-width);
+  }
+  .self-center {
+    align-self: center;
+  }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .overscroll-contain {
+    overscroll-behavior: contain;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: var(--border-width);
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: var(--border-width);
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .border-border {
+    border-color: var(--color-border);
+  }
+  .border-border-strong {
+    border-color: var(--color-border-strong);
+  }
+  .p-0 {
+    padding: 0px;
+  }
+  .p-1 {
+    padding: var(--spacing-1);
+  }
+  .p-2 {
+    padding: var(--spacing-2);
+  }
+  .p-4 {
+    padding: var(--spacing-4);
+  }
+  .px-4 {
+    padding-inline: var(--spacing-4);
+  }
+  .py-2 {
+    padding-block: var(--spacing-2);
+  }
+  .py-3 {
+    padding-block: var(--spacing-3);
+  }
+  .py-5 {
+    padding-block: var(--spacing-5);
+  }
+  .py-6 {
+    padding-block: var(--spacing-6);
+  }
+  .py-10 {
+    padding-block: var(--spacing-10);
+  }
+  .pb-2 {
+    padding-bottom: var(--spacing-2);
+  }
+  .pb-3 {
+    padding-bottom: var(--spacing-3);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xs {
+    font-size: var(--text-2xs);
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+  }
+  .leading-\[0\] {
+    --tw-leading: 0;
+    line-height: 0;
+  }
+  .leading-\[1\.5\] {
+    --tw-leading: 1.5;
+    line-height: 1.5;
+  }
+  .leading-\[1\.25\] {
+    --tw-leading: 1.25;
+    line-height: 1.25;
+  }
+  .leading-\[16px\] {
+    --tw-leading: 16px;
+    line-height: 16px;
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-strong {
+    --tw-font-weight: var(--font-weight-strong);
+    font-weight: var(--font-weight-strong);
+  }
+  .tracking-normal {
+    --tw-tracking: var(--tracking-normal);
+    letter-spacing: var(--tracking-normal);
+  }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .text-muted {
+    color: var(--color-muted);
+  }
+  .text-text {
+    color: var(--color-text);
+  }
+  .lowercase {
+    text-transform: lowercase;
+  }
+  .normal-case {
+    text-transform: none;
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .tabular-nums {
+    --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-60 {
+    opacity: 60%;
+  }
+  .opacity-\[0\.55\] {
+    opacity: 0.55;
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + 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);
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .sepia {
+    --tw-sepia: sepia(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .\[font\:inherit\] {
+    font: inherit;
+  }
+  .surface-bg {
+    background: var(--bg);
+  }
+  .surface-panel {
+    background: var(--panel);
+  }
+  .disabled\:cursor-default:disabled {
+    cursor: default;
+  }
+  .disabled\:opacity-50:disabled {
+    opacity: 50%;
+  }
+  .\[\&\>p\]\:m-0 > p {
+    margin: 0px;
+  }
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
+@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;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@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-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
+      --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;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+    }
+  }
+}
+
+/* ---- ./_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. */
@@ -307,6 +1000,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
@@ -371,23 +1066,31 @@ body::before {
    `[aria-disabled='true']` twin rather than a rewrite, which leaves each
    `button` selector at the specificity it had and every committed baseline
    untouched. */
-a.btn {
+.btn {
+  /* The three an anchor brings that a `<button>` does not. Harmless on the
+     button form -- it has no underline and centres already -- and the reason
+     `Button` puts one class on both elements rather than keeping a twin
+     selector for each. */
   text-decoration: none;
   color: var(--text);
   text-align: center;
 }
 
-a.btn[aria-disabled='true'] {
+.btn[aria-disabled='true'] {
   /* A disabled anchor still takes the pointer, so say so. The click itself is
      blocked in the capture phase by the component. */
   cursor: not-allowed;
 }
 
-button,
-a.btn,
-input,
-textarea,
-select {
+/* `:where`, so this base carries no specificity of its own.
+ *
+ * It was `button, input, textarea, select` -- an element selector, which
+ * `.size-sm` and every other class outranked without anyone thinking about
+ * it. Moving it to `.btn` to stop a tab inheriting a control's look raised it
+ * to a class, so it tied with `.size-sm` and won on source order: every
+ * button came out `8px 12px` whatever size it asked for. `:where` puts it
+ * back to zero, which is what the element selector was silently providing. */
+:where(.btn, input, textarea, select) {
   font: inherit;
   color: var(--text);
   background: var(--control);
@@ -408,8 +1111,7 @@ select {
    the icon; the button simply had no opinion about how to arrange two things.
    `inline-flex` and a gap gives it one, and the gap replaces the space
    character people were putting between an icon and its label. */
-button,
-a.btn {
+.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -425,18 +1127,41 @@ a.btn {
 
    Several places already drew this by hand as `.chat-bar-btn.on`. This is the
    same look, said once, on a plain button. */
-button[aria-pressed='true'] {
+.btn[aria-pressed='true'] {
   border-color: var(--accent);
   color: var(--accent);
   background: color-mix(in srgb, var(--accent) 10%, var(--panel));
 }
 
-button[aria-pressed='true']:hover:not(:disabled) { border-color: var(--accent); }
+.btn[aria-pressed='true']:hover:not(:disabled) { border-color: var(--accent); }
 
 /* The glyph never shrinks: in a narrow row flexbox would take it from the icon
    before the text, and half an icon is not a smaller icon. */
-button > svg,
-a.btn > svg { flex: none; }
+.btn > svg { flex: none; }
+
+/* `Select`'s control wears the control styling, and says so.
+ *
+ * It renders React Aria's `Button` -- a bare `<button>` -- and used to take
+ * `font`, colour, the surface and the border from the
+ * `button, input, textarea, select` reset without asking. When that reset
+ * moved to `.btn`, so a tab and a row would stop inheriting a control's look
+ * only to undo it, this lost all of it at once.
+ *
+ * Here rather than in `select.css`, and that placement is the rule, not
+ * tidiness: `font` is a shorthand and it resets `font-size`, so declared
+ * after `.size-sm` below it silently makes every small control full size.
+ * `index.css` says the import order is behaviour; this is what that means.
+ *
+ * `:where` for the same reason the reset above uses it: this is a base a
+ * `size` class has to be able to beat, and a bare class ties with one. */
+:where(.sel-control) {
+  font: inherit;
+  color: var(--text);
+  background: var(--control);
+  border: var(--border-width) solid var(--border-strong);
+  border-radius: var(--radius);
+  cursor: pointer;
+}
 
 .size-sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
 
@@ -461,8 +1186,7 @@ input, textarea, select { width: 100%; }
    same disagreement written twice. */
 textarea { resize: none; }
 
-button:hover:not(:disabled),
-a.btn:hover:not([aria-disabled='true']),
+.btn:hover:not(:disabled),
 input:hover:not(:disabled),
 textarea:hover:not(:disabled),
 select:hover:not(:disabled) { border-color: var(--accent); }
@@ -470,8 +1194,7 @@ select:hover:not(:disabled) { border-color: var(--accent); }
 /* `:focus-visible` on the button so a click does not leave a ring behind it,
    `:focus` on the fields because a focused field is a place you are typing and
    should say so however you got there. */
-button:focus-visible,
-a.btn:focus-visible,
+.btn:focus-visible,
 input:focus,
 textarea:focus,
 select:focus { outline: none; border-color: var(--accent); }
@@ -564,14 +1287,13 @@ input[type='radio']:focus-visible { outline: none; box-shadow: var(--focus-ring)
 input[type='checkbox']:disabled,
 input[type='radio']:disabled { cursor: not-allowed; background: var(--panel-2); }
 
-button:disabled,
-a.btn[aria-disabled='true'],
+.btn:disabled,
+.btn[aria-disabled='true'],
 input:disabled,
 textarea:disabled,
 select:disabled { opacity: 0.45; cursor: not-allowed; }
 
-button.primary,
-a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 
 /* A disabled primary is not a faded primary.
    `opacity: .45` was the whole of it, and a coloured fill at 45% is still a
@@ -579,8 +1301,7 @@ a.btn.primary { background: var(--accent); border-color: var(--accent); color: v
    thing on the panel. That got worse when onboarding started holding people at
    a disabled Next. So it gives up the fill entirely and becomes the shape of a
    disabled control -- the opacity then has nothing left to do. */
-button.primary:disabled,
-a.btn.primary[aria-disabled='true'] {
+.btn.primary:disabled {
   background: var(--panel-2);
   border-color: var(--border);
   color: var(--muted);
@@ -594,7 +1315,7 @@ a.btn.primary[aria-disabled='true'] {
    line under it that travels.
    `aria-busy` rather than a class: the attribute is what a screen reader reads,
    and styling the thing that carries the meaning is how they stay in step. */
-button[aria-busy='true'] {
+.btn[aria-busy='true'] {
   position: relative;
   overflow: hidden;
   cursor: progress;
@@ -607,18 +1328,18 @@ button[aria-busy='true'] {
    something that is working, that reads as a control that failed and went
    grey. So a busy button keeps every colour it had and takes only the loss of
    the cursor and the press; the travelling line is what says why. */
-button[aria-busy='true']:disabled {
+.btn[aria-busy='true']:disabled {
   opacity: 1;
   cursor: progress;
 }
 
-button.primary[aria-busy='true']:disabled {
+.btn.primary[aria-busy='true']:disabled {
   background: var(--accent);
   border-color: var(--accent);
   color: var(--on-accent);
 }
 
-button[aria-busy='true']::after {
+.btn[aria-busy='true']::after {
   content: '';
   position: absolute;
   left: 0;
@@ -650,15 +1371,13 @@ button[aria-busy='true']::after {
 
 /* Quiet: no border, no fill. For the action beside the action -- Cancel next to
    Save -- where a bordered box competes with the thing it is next to. */
-button.ghost,
-a.btn.ghost {
+.btn.ghost {
   background: transparent;
   border-color: transparent;
   color: var(--muted);
 }
 
-button.ghost:hover:not(:disabled),
-a.btn.ghost:hover:not([aria-disabled='true']) {
+.btn.ghost:hover:not(:disabled) {
   background: var(--panel-2);
   border-color: transparent;
   color: var(--text);
@@ -740,7 +1459,7 @@ a.btn.ghost:hover:not([aria-disabled='true']) {
    header.) */
 .row { display: flex; align-items: center; gap: var(--space-3); }
 
-.grow { flex: 1; min-width: 0; }
+.ctl-grow { flex: 1; min-width: 0; }
 
 .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
 
@@ -804,10 +1523,17 @@ a.btn.ghost:hover:not([aria-disabled='true']) {
 /* A pill following a name needs the gap outside its own border. Leading
    whitespace inside the span puts it under the pill's background instead,
    which reads as the badge touching the word it qualifies. */
-.row-pill { margin-left: var(--space-2); vertical-align: baseline; }
+/* A pill beside a name, and the one thing that keeps the pair working:
+   `flex: none`, so the pill never shrinks and the name ellipsises instead.
+   That was `rows.css`'s `.named > .pill`, which meant anybody laying out a
+   name and its pills had to know a package class by name to get it. The
+   variant already says "I am in a row"; it may as well say what that costs. */
+.row-pill { margin-left: var(--space-2); vertical-align: baseline; flex: none; }
 
 /* The tile's only control. Dim until hovered: it is chrome on someone's app. */
 .icon-btn {
+  /* Stated rather than inherited. These came from the `button, input, textarea, select` reset, which applied control styling to everything that happened to be a `<button>` -- so this rule spent its opening lines undoing it, and would break silently if that rule ever moved. It did move, to `.btn`. */
+  font: inherit;
   display: inline-flex; align-items: center; padding: var(--space-1);
   background: none; border: 0; color: var(--muted); opacity: 0.6; cursor: pointer;
 }
@@ -873,19 +1599,17 @@ a.btn.ghost:hover:not([aria-disabled='true']) {
   transition: none;
 }
 
-button.primary:active:not(:disabled),
-a.btn.primary:active:not([aria-disabled='true']) {
+.btn.primary:active:not(:disabled) {
   background: color-mix(in srgb, var(--text) var(--press-ink), var(--accent));
   border-color: color-mix(in srgb, var(--text) var(--press-ink), var(--accent));
 }
 
-button.ghost:active:not(:disabled),
-a.btn.ghost:active:not([aria-disabled='true']) {
+.btn.ghost:active:not(:disabled) {
   background: color-mix(in srgb, var(--text) var(--press-ink), var(--panel-2));
   border-color: transparent;
 }
 
-button[aria-pressed='true']:active:not(:disabled) {
+.btn[aria-pressed='true']:active:not(:disabled) {
   background: color-mix(in srgb, var(--accent) 18%, var(--panel));
 }
 
@@ -1056,7 +1780,7 @@ input:active, textarea:active, select:active { transform: none; }
 
 /* The top bar carries the title, the views and the way into settings. Nothing
    that belongs to a conversation lives here any more, so it can breathe. */
-.topbar .grow { flex: 1; min-width: 0; }
+.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
@@ -1088,7 +1812,60 @@ input:active, textarea:active, select:active { transform: none; }
   to { opacity: 1; }
 }
 
+/* The states the `button` element rule used to hand every bare `<button>` in
+   the package, now asked for by name.
+ *
+ * This is the half of the decoupling that a screenshot cannot show: `:focus-visible`
+ * is not photographed, so nine components would have lost their focus ring in
+ * silence. `keyboard.spec.ts` is what actually holds this.
+ *
+ * `.btn` has its own, in the rules above. These are the ones that are a button
+ * for their behaviour and not for their appearance -- a tab, a row, a card, a
+ * pager step, a grid cell, a remove cross. */
+.tab:focus-visible,
+.row-hit:focus-visible,
+.card:focus-visible,
+.ident-remove:focus-visible,
+.size-cell:focus-visible,
+.pager-step:focus-visible,
+.pager-page:focus-visible,
+.sel-control:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* `:disabled` came from the same rule. A control that cannot be pressed has to
+   say so whatever element it is. */
+.tab:disabled,
+.row-hit:disabled,
+.card:disabled,
+.ident-remove:disabled,
+.size-cell:disabled,
+.pager-step:disabled,
+.pager-page:disabled,
+.sel-control:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* The anchor form's disabled states, alongside the button's.
+ *
+ * `.btn` is one class on two elements, and an `<a>` has no `:disabled` -- it
+ * carries `aria-disabled` and a capture-phase click block instead. Every
+ * rule above that reads `:disabled` needs the attribute twin, or a disabled
+ * link is a link that looks pressable and refuses silently. Folding the old
+ * `a.btn` twins into `.btn` dropped these, and the baselines showed a
+ * disabled link at full strength. */
+.btn.primary[aria-disabled='true'] {
+  background: var(--panel-2);
+  border-color: var(--border);
+  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
@@ -1103,8 +1880,7 @@ input:active, textarea:active, select:active { transform: none; }
 /* Full width, for the one action a card or a step is about. Not a size: a
    `block` button is the same height as any other, it just stops being a thing
    you have to aim at. */
-button.block,
-a.btn.block { display: flex; width: 100%; }
+.btn.ctl-block { display: flex; width: 100%; }
 
 /* The default is `size-md`, spelled once for every control.
    The paragraph above promised one scale for buttons, inputs and selects, and
@@ -1112,13 +1888,24 @@ a.btn.block { display: flex; width: 100%; }
    input was eight pixels taller than the button beside it and no row of the two
    could line up. The download modal's search box against its Search button was
    the version you could see from across the room. */
-button,
-a.btn,
-input,
-textarea,
-select,
+/* `:where`, so this base carries no specificity of its own.
+ *
+ * It was `button, input, textarea, select` -- an element selector, which
+ * `.size-sm` and every other class outranked without anyone thinking about
+ * it. Moving it to `.btn` to stop a tab inheriting a control's look raised it
+ * to a class, so it tied with `.size-sm` and won on source order: every
+ * button came out `8px 12px` whatever size it asked for. `:where` puts it
+ * back to zero, which is what the element selector was silently providing. */
+:where(.btn, input, textarea, select) { padding: var(--space-2) var(--space-3); }
+
+/* The select's control keeps its padding at full class weight, and after
+   `.size-sm` in the cascade, because that is where it has always been: this
+   file is imported after `base.css`, so a `size`d select took the size's type
+   and this padding. Folding it into the `:where` above handed the padding
+   back to `.size-sm` and shrank every small select by seven pixels. */
 .sel-control { padding: var(--space-2) var(--space-3); }
 
+
 /* Centred on the whole block -- the caption and the sentence together -- rather
    than aligned to either end of it. `.field-row` pins to the bottom, which is
    right for a field beside a button and wrong beside two lines of prose. */
@@ -1142,16 +1929,16 @@ select,
 .sel { position: relative; display: inline-block; }
 
 /* The subject of its pane rather than a field in it: full width and a size up.
-   That was `.select-field.block` on the native element, and it carried the
+   That was `.select-field.ctl-block` on the native element, and it carried the
    reason with it -- model ids are long (`qwen2.5-coder:32b-instruct-q4_K_M`) and
    at the narrow size they truncated mid-name. */
-.sel.block { display: block; width: 100%; }
+.sel.ctl-block { display: block; width: 100%; }
 
-.sel.block .sel-control { padding: var(--space-2) var(--space-3); font-weight: 500; }
+.sel.ctl-block .sel-control { padding: var(--space-2) var(--space-3); font-weight: 500; }
 
 /* Not full width otherwise: a select as wide as its row, holding one short
    word, reads as an input somebody forgot to fill in. */
-.sel:not(.block) .sel-control { width: auto; max-width: 320px; }
+.sel:not(.ctl-block) .sel-control { width: auto; max-width: 320px; }
 
 .sel-control {
   display: flex;
@@ -1164,9 +1951,7 @@ select,
   background: var(--control);
 }
 
-.sel-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-.sel-caret { flex: none; opacity: 0.6; transition: transform var(--dur-fast) var(--ease); }
+.sel-caret { transition: transform var(--dur-fast) var(--ease); }
 
 .sel[data-open] .sel-caret { transform: rotate(180deg); }
 
@@ -1175,45 +1960,22 @@ select,
 /* 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. */
+/* 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 {
-  /* `fixed`, and in `document.body`: an ancestor that scrolls or hides its
-     overflow would otherwise clip it, which in this app means every settings
-     pane. Position comes from the button's measured rectangle. */
-  /* Positioned by React Aria -- inline `top`/`left` on a portalled popover
-     that flips when the edge is near. `position: fixed` and the measured
-     rectangle it was placed by are gone with the hand-rolled version. */
-  z-index: 60;
-  max-height: 280px;
-  overflow-y: auto;
-  margin: 0;
-  padding: var(--space-1);
-  /* 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.
-     `scroll-padding` insets what counts as "in view", so it stops short by
-     the same four the sides have. */
   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);
 }
 
-.sel-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: var(--space-2) var(--space-2);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.sel-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
-
 /* Hover and keyboard land on the same row, because they are the same idea --
    two highlights for one cursor is how a list starts lying about where Enter
    will go. */
@@ -1225,7 +1987,18 @@ select,
 
 /* 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. */
-.sel-tick { flex: none; opacity: 0; }
+/* 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; }
 
@@ -1261,24 +2034,23 @@ select,
 .field > input,
 .field > textarea,
 .field > .sel { width: 100%; }
+}
 
 /* ---- ./dangerzone.css ---- */
+@layer components {
 /* Destructive, and legible as such standing still. */
-button.danger,
-a.btn.danger {
+.btn.danger {
   color: var(--bad);
   border-color: color-mix(in srgb, var(--bad) 45%, var(--border-strong));
 }
 
-button.danger:hover:not(:disabled),
-a.btn.danger:hover:not([aria-disabled='true']) {
+.btn.danger:hover:not(:disabled) {
   background: color-mix(in srgb, var(--bad) 12%, var(--panel));
   border-color: var(--bad);
   color: var(--bad);
 }
 
-button.danger:active:not(:disabled),
-a.btn.danger:active:not([aria-disabled='true']) {
+.btn.danger:active:not(:disabled) {
   background: color-mix(in srgb, var(--bad) 20%, var(--panel));
   border-color: var(--bad);
 }
@@ -1377,8 +2149,10 @@ a.btn.danger:active:not([aria-disabled='true']) {
    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
@@ -1517,35 +2291,50 @@ a.btn.danger:active:not([aria-disabled='true']) {
 }
 
 .callout button { flex: none; }
+}
 
 /* ---- ./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
+ * renders `<div className="card">` around three rows, and app-template uses
+ * `card-pick`. Moving the box into `Card`'s own class list took that away
+ * with no type error and no failing test in this package: it broke only
+ * where somebody else had used the class, which is the worst way for an API
+ * to go.
+ *
+ * So the rule stays and `Card` wears it. The lesson generalises to every
+ * class in this package that a consumer can reach: a component may draw
+ * itself with utilities only where its class is genuinely private. */
 .card {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  color: var(--text);
+  text-align: left;
   background: var(--panel);
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius-md);
-  padding: var(--space-3) var(--space-3);
+  padding: var(--space-3);
   margin-bottom: var(--space-3);
 }
 
+/* What is left once `Card` draws its own box: the tones, the pick and
+   selected states, and the rules that reach from the card into what it
+   holds. `:has(.card-icon) .card-inline` is a relationship, and a tone is a
+   `color-mix`; neither is a property on one element. */
+
 /* Header, when there is one. The title and the line under it were retyped at
    every call site and no two agreed on the gap between them. */
-.card-head { display: flex; align-items: flex-start; gap: var(--space-3); }
-
-.card-head:not(:last-child) { margin-bottom: var(--space-3); }
-
-.card-headings { min-width: 0; flex: 1; }
-
 /* The card owns the space between the things it holds. Without this a callout
    and the button under it sit edge to edge, and every caller has to remember a
    margin on whichever child happens to be second. */
-.card-body { display: grid; gap: var(--space-3); }
-
 /* The card's own control, on the card's padding rather than indented into its
    body. Centred against the whole heading block, not against the title -- a
    switch aligned to the first line drifts upward the moment the description
    runs to two. */
-.card-action { flex: none; align-self: center; display: flex; align-items: center; }
-
 /* A row inside a card that lines up with the header rather than indenting past
    it: same left edge as the title, same right edge as the action. Its label is
    a quiet caption, not a second heading -- the card already has one, and two
@@ -1592,17 +2381,6 @@ a.btn.danger:active:not([aria-disabled='true']) {
   color: var(--muted);
 }
 
-/* A card that is itself the choice. Reset first, because it is a `<button>`
-   now and inherits a control's padding and centring. */
-button.card {
-  display: block;
-  width: 100%;
-  text-align: left;
-  font: inherit;
-  color: inherit;
-  padding: var(--space-3);
-}
-
 /* Variants, because a card is doing four jobs and looked like one.
    A search result you can act on, a thing already installed, something that
    went wrong, and a heading with rows under it are not the same object, and
@@ -1645,7 +2423,23 @@ button.card {
 
 .modal-body .card { background: var(--panel-2); }
 
+/* Selected, which used to arrive from `button[aria-pressed='true']`.
+ *
+ * A card marks its choice with `aria-pressed`, and the tint came from the
+ * element rule every bare `<button>` in the package was picking up. That rule
+ * belongs to `Button` now, so the card says what being chosen looks like --
+ * which is the right place for it anyway: a chosen card is a card's idea, not
+ * a button's. */
+.card[aria-pressed='true'] {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+}
+
+.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; }
@@ -1876,8 +2670,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 ---- */
+@layer components {
 .muted { color: var(--muted); }
 
 .pulse-block {
@@ -1932,8 +2728,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
@@ -2194,72 +2992,24 @@ input[type='radio']:active:not(:disabled) {
 .row-hit:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
-
-/* ---- ./empty.css ---- */
-/* `Empty`: a list with nothing in it.
-   
-   Quieter than `.empty`, which is a whole-screen state at `--space-10`. These
-   sit inside a card that already has a heading and a description, so the same
-   padding would leave a card that is mostly air about nothing.
-   
-   Dashed rather than solid: a solid border reads as a thing, and the point of
-   this box is that there is no thing. It marks out where the list will be. */
-.nothing {
-  display: grid;
-  justify-items: center;
-  gap: var(--space-2);
-  padding: var(--space-5) var(--space-4);
-  border: var(--border-width) dashed var(--border-strong);
-  border-radius: var(--radius-md);
-  text-align: center;
 }
 
-.nothing-mark { color: var(--muted); line-height: 0; }
-
-/* The same box with a figure in it, for a whole surface rather than a slot in
-   a card. Two things change and both follow from the size: the dashed outline
-   goes, because an outline marks out where a list will be and a window-sized
-   dashed rectangle reads as a layout that failed rather than a view with
-   nothing on it; and the box centres itself in whatever it was dropped into,
-   which is what makes it land in the middle of an empty dashboard rather than
-   under the header. */
-.nothing-surface {
-  border: none;
-  padding: var(--space-10) var(--space-4);
-  gap: var(--space-3);
-  margin: auto;
-}
-
-/* `currentColor` reaches the figure through the two rules the illustrations
-   ship with, so the colour is set here and the drawing follows it -- the same
-   grey as the sentence under it, in every theme.
-   Two classes, not one: `.illo` sets `color: inherit` further down this file,
-   which beats a single-class rule written earlier and drew the figure in full
-   text black beside a muted sentence. */
-.nothing-surface .nothing-figure { color: var(--muted); }
-
-/* `--text-sm`, not the `--text-xs` these lines used to be: it is a sentence
-   somebody is meant to read, not a caption qualifying something else. */
-.nothing-said { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; max-width: 46ch; }
-
-.nothing-act { margin-top: var(--space-1); }
-
 /* ---- ./progress.css ---- */
+@layer components {
 /* progress ----------------------------------------------------------- */
 
-/* The bar sat 4px under its own label and flush against whatever was above
+/* The bar itself: a track with a child it fills, an animation and a
+   reduced-motion answer. A utility is a property on one element, so none of
+   that is one -- `Progress` draws its own wrapper and head with utilities and
+   this is what is left.
+
+   The bar sat 4px under its own label and flush against whatever was above
    the whole block, so a download row read as four lines of text with a rule
    drawn through the last one. The label is a caption for the bar and stays
    close to it; the block as a whole is a separate statement from the row it
    follows. */
-.progress { display: grid; gap: var(--space-1); }
-
 .card > .progress { margin-top: var(--space-3); }
 
-.progress-head { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); }
-
-.progress-detail { color: var(--muted); font-size: var(--text-xs); }
-
 .bar { height: 6px; background: var(--panel-2); border-radius: var(--radius-pill); overflow: hidden; }
 
 .bar > i {
@@ -2287,12 +3037,22 @@ 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); }
 
 .tab {
+  /* Layout the `button` element rule used to supply. A tab is a button for its behaviour, not its look, so it now says what it wants instead of taking a control's arrangement and undoing the rest. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  /* Stated rather than inherited. These came from the `button, input, textarea, select` reset, which applied control styling to everything that happened to be a `<button>` -- so this rule spent its opening lines undoing it, and would break silently if that rule ever moved. It did move, to `.btn`. */
+  font: inherit;
+  cursor: pointer;
   position: relative;
   z-index: 1;
   background: transparent;
@@ -2381,8 +3141,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 .tabs-vertical .tab:active:not(:disabled) { border-color: transparent; }
+}
 
 /* ---- ./toast.css ---- */
+@layer components {
 /* ---------------------------------------------------------------- toasts */
 .toasts {
   position: fixed;
@@ -2449,7 +3211,41 @@ input[type='radio']:active:not(:disabled) {
 .toast[data-exiting] { animation: none; }
 }
 
+/* The dismiss control, in its own words.
+ *
+ * It was `className="ghost size-sm"` -- `Button`'s vocabulary, borrowed from
+ * a component that does not render a `Button`. That only ever worked because
+ * `.ghost` and `.size-sm` were element-and-class rules any `<button>` could
+ * pick up, which is the coupling this pass is removing. Nothing photographed
+ * it, either: the toast is transient and the close button is not in any
+ * baseline, so this would have gone quiet. */
+.toast-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  font-size: var(--text-xs);
+  padding: var(--space-1) var(--space-2);
+  background: transparent;
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius);
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.toast-close:hover:not(:disabled) {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+.toast-close:focus-visible {
+  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
@@ -2489,13 +3285,6 @@ input[type='radio']:active:not(:disabled) {
    Not `display: contents`, which was the first attempt. An element with no box
    cannot take focus, so React Aria's initial focus fell through to the first
    input and Escape -- handled on the section -- stopped closing the window. */
-.modal-dialog {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-}
-
 .modal {
   background: var(--panel);
   border: 1px solid var(--border);
@@ -2546,18 +3335,9 @@ input[type='radio']:active:not(:disabled) {
    laid out for the bare `<strong>` it used to hold -- 86px tall with them,
    41px without, on a head whose padding is 12 over 8. `font: inherit` so the
    `<strong>` rule above is the one that sets the size. */
-.modal-title { margin: 0; font: inherit; }
-
 /* 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 {
-  margin: 0;
-  padding: 0 var(--space-4) var(--space-3);
-  color: var(--muted);
-  font-size: var(--text-sm);
-  line-height: 1.5;
-  max-width: 62ch;
-}
+.modal-desc { line-height: 1.5; }
 
 .modal-body { padding: var(--space-2) var(--space-4) var(--space-3); overflow-y: auto; }
 
@@ -2696,8 +3476,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
@@ -2917,9 +3699,12 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    buttons only, so a button in a row stood 25px beside a 35px select and no
    size class could ask for the select's height. Type from the row, box from
    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); }
+: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
@@ -3089,36 +3874,36 @@ 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
    versions. */
-.table th .set-hint { font-weight: 400; }
+.data-table th .set-hint { font-weight: 400; }
 
-.table-scroll { overflow-x: auto; }
-
-.table {
+.data-table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--text-sm);
 }
 
-.table th,
-.table td {
+.data-table th,
+.data-table td {
   text-align: left;
   padding: var(--space-2) var(--space-3);
   border-bottom: var(--border-width) solid var(--border);
 }
 
-.table th:first-child,
-.table td:first-child { padding-left: 0; }
+.data-table th:first-child,
+.data-table td:first-child { padding-left: 0; }
 
-.table th:last-child,
-.table td:last-child { padding-right: 0; }
+.data-table th:last-child,
+.data-table td:last-child { padding-right: 0; }
 
-.table thead th {
+.data-table thead th {
   font-size: var(--text-xs);
   font-weight: var(--weight-strong);
   text-transform: uppercase;
@@ -3129,78 +3914,69 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 
 /* The row's own name: a `<th scope="row">`, so it carries weight rather than
    reading as one more cell. */
-.table tbody th { font-weight: var(--weight-strong); }
+.data-table tbody th { font-weight: var(--weight-strong); }
 
-.table tbody tr:last-child th,
-.table tbody tr:last-child td { border-bottom: none; }
+.data-table tbody tr:last-child th,
+.data-table tbody tr:last-child td { border-bottom: none; }
 
 /* Numbers compare by column, so they align right and hold their tracks --
    proportional digits shift the alignment by a pixel per glyph, which is
    exactly the comparison the column was for. */
-.table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
+.data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
 
-.table thead th[style*='right'] { text-align: right; }
+.data-table thead th[style*='right'] { text-align: right; }
+}
 
 /* ---- ./sizegrid.css ---- */
-/* Tile size, picked as a rectangle rather than read as a notation. */
-.size-grid-wrap { display: flex; align-items: center; gap: var(--space-2); }
-
-.size-grid { display: grid; gap: var(--space-1); }
-
+@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.
+ *
+ * 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 {
-  width: 18px; height: 14px; padding: 0;
-  border: 1px solid var(--border); border-radius: var(--radius-sm);
-  background: var(--panel-2); cursor: pointer;
+  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.on {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 45%, transparent);
+}
 
 .size-cell.chosen { border-color: var(--accent); }
-
-.size-cell:disabled { cursor: default; opacity: 0.5; }
-
-.size-ceiling { opacity: 0.55; }
+}
 
 /* ---- ./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
-
-/* The `?` beside a setting, and the box it shows on hover. Built like 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
+   states are three rules the cascade resolves in order, with
+   `data-entering` and `data-exiting` around the transition. None of that is
+   a property on one element.
+
+   The `?` beside a setting, and the box it shows on hover. Built like the
    status dot's tooltip and for the same reasons: `title` waits a second and a
    half, renders newlines however it likes, and cannot be styled. */
-.explain {
-  position: relative;
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  /* The heading it follows is tracked out, which leaves the last letter's
-     spacing sitting between them and reads as none at all. */
-  margin-left: var(--space-2);
-  cursor: help;
-  /* Headings here are uppercase and tracked out, and one of these sits inside
-     a heading. */
-  text-transform: none;
-  letter-spacing: normal;
-  font-weight: 400;
-}
-
-.explain-mark {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: 1px solid var(--border);
-  color: var(--muted);
-  font-size: var(--text-xs);
-  line-height: 16px;
-  text-align: center;
-}
-
 .explain:hover .explain-mark,
 .explain:focus-visible .explain-mark { color: var(--text); border-color: var(--accent); }
 
@@ -3273,8 +4049,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.
@@ -3301,7 +4079,21 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    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
@@ -3399,7 +4191,7 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .adorned > .adorned-mark,
 .adorned > .adorned-end { grid-area: 1 / 1; }
 
-.adorned.block { width: 100%; }
+.adorned.ctl-block { width: 100%; }
 
 .adorned > .adorned-mark {
   justify-self: start;
@@ -3452,7 +4244,34 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 
 .adorned-lg .adorned-clear { padding: var(--space-2); }
 
+/* The eye and the clear button stop borrowing `ghost`.
+ *
+ * Both were `className="icon-btn ghost …"` -- reaching into `Button`'s class
+ * vocabulary from another component, which worked only because `.ghost` was
+ * written as `button.ghost` and they happen to be `<button>`s. It is `.btn.ghost`
+ * now, so the borrowing stopped matching and `.icon-btn`'s panel background
+ * came through: the baselines showed a filled tile where there had been a bare
+ * glyph.
+ *
+ * Stated here instead. What they actually wanted from `ghost` is two lines,
+ * and saying them is cheaper than either component knowing what a button's
+ * classes are called. */
+.secret-eye,
+.adorned-clear {
+  background: transparent;
+  border-color: transparent;
+  color: var(--muted);
+}
+
+.secret-eye:hover:not(:disabled),
+.adorned-clear:hover:not(:disabled) {
+  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
@@ -3514,141 +4333,41 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .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. */
-/* ---- ./kbd.css ---- */
-/* One rule where there were two identical ones, in `menu.css` and
-   `command.css`. Both keep their class as well, so `Menu` and `Command` are
-   `.kbd .menu-key` and `.kbd .cmd-key` now: the declarations are the same, so
-   nothing moves, and the context classes stay available for a rule that ever
-   needs to tell the two apart. */
-.kbd {
-  flex: none;
-  font-family: var(--font-mono);
-  font-size: var(--text-2xs);
-  color: var(--muted);
-  letter-spacing: var(--tracking);
-}
-
 /* ---- ./stat.css ---- */
-/* A figure with furniture. `--space-1` between the three lines because they
-   are one object read top to bottom, not three paragraphs. */
-.stat {
-  display: grid;
-  gap: var(--space-1);
-  padding: var(--space-4);
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--panel);
-}
-
-/* Inside something already bordered. A bordered tile in a bordered row is two
-   boxes saying one thing. */
-.stat-bare {
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  gap: 0;
-  line-height: 1.25;
-}
-
-.stat > p { margin: 0; }
-
-.stat-label {
-  color: var(--muted);
-  font-size: var(--text-xs);
-}
-
-/* Tabular figures are the point: a column of numbers is compared by its
-   digits' positions, and proportional ones move them per row. */
-.stat-value {
-  font-size: var(--text-lg);
-  font-weight: var(--weight-strong);
-  font-variant-numeric: tabular-nums;
-}
-
-.stat-bare .stat-value { font-size: var(--text-sm); }
-
-.stat-note {
-  color: var(--muted);
-  font-size: var(--text-xs);
-}
+@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.
 
-/* Only the figure takes the colour. Colouring the label too makes the tile a
-   status box, and a tone here is a remark about the number. */
+   Only the figure takes the colour. Colouring the label too makes the tile a
+   status box, where a tone here is a remark about the number. */
 .stat[data-tone='info'] .stat-value { color: var(--info); }
 .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 ---- */
-/* The frame. Layout only: every colour and every step is a token, and the
-   page inside it owns its own spacing. */
-.shell {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background: var(--bg);
-  color: var(--text);
 }
 
-.shell-head {
-  border-bottom: var(--border-width) solid var(--border);
-  background: var(--panel);
-  /* `flex: none` so a long page does not squeeze the header. */
-  flex: none;
-}
-
-/* The measure, said once. `--shell-measure` rather than a literal so an app
-   with a different one sets a variable instead of overriding three rules and
-   missing the fourth -- which is how manage ended up with `head-inner-wide`
-   and `main-wide` as separate classes. */
+/* ---- ./shell.css ---- */
+@layer components {
+/* The measure, and only the measure.
+ *
+ * `Shell` draws itself with utilities -- it is layout and nothing else. What
+ * stays here is the one value the header band, the nav band and the main band
+ * all have to agree on: a custom property, so an app changes it in one place
+ * rather than overriding three rules and missing the fourth. That is how
+ * manage ended up carrying `head-inner-wide` and `main-wide` as separate
+ * classes it had to remember together. */
 .shell {
   --shell-measure: 64rem;
   --shell-measure-wide: 90rem;
 }
 
-.shell-head-inner,
-.shell-nav,
-.shell-main {
-  width: 100%;
-  max-width: var(--shell-measure);
-  margin-inline: auto;
-  padding-inline: var(--space-4);
-}
-
-.shell-wide { max-width: var(--shell-measure-wide); }
-
-.shell-head-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-4);
-  padding-block: var(--space-3);
-  min-width: 0;
-}
-
-.shell-who {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  min-width: 0;
-}
-
-.shell-nav { padding-bottom: var(--space-2); }
-
-.shell-main {
-  flex: 1;
-  padding-block: var(--space-6);
-  /* `min-width: 0` because a flex child will not shrink below its content,
-     and one wide table inside then pushes the whole page sideways. */
-  min-width: 0;
-}
-
 /* The label beside the theme control, when it is drawn. */
 .theme-switch {
   display: flex;
@@ -3662,8 +4381,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
@@ -3756,8 +4477,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;
@@ -3857,8 +4580,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. */
@@ -3912,29 +4637,17 @@ body.splitting * { cursor: inherit !important; }
   .pop[data-entering],
   .pop[data-exiting] { animation: none; }
 }
-
-/* ---- ./menu.css ---- */
-/* A list of verbs, on the same sheet as every other anchored surface. */
-.menu-sheet {
-  background: var(--panel);
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-2);
-  min-width: 12rem;
-  max-width: min(20rem, calc(100vw - var(--space-6)));
-  max-height: 24rem;
-  overflow: auto;
-  overscroll-behavior: contain;
-  z-index: 60;
 }
 
-.menu-list {
-  padding: var(--space-1);
-  outline: none;
-  display: grid;
-  gap: var(--border-width);
-}
+/* ---- ./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
+   `box-shadow` stays on the sheet too -- `--shadow-2` is a token, and a
+   utility would have to inline it. */
 
+/* A list of verbs, on the same sheet as every other anchored surface. */
 .menu-item {
   display: flex;
   align-items: center;
@@ -3973,14 +4686,6 @@ body.splitting * { cursor: inherit !important; }
 /* The binding, set in the mono face at the size of the small print. Right of
    the row and never the reason the row is wide: `flex: none` with the label
    taking the slack. */
-.menu-key {
-  flex: none;
-  font-family: var(--font-mono);
-  font-size: var(--text-2xs);
-  color: var(--muted);
-  letter-spacing: var(--tracking);
-}
-
 .menu-more { flex: none; color: var(--muted); }
 
 .menu-rule {
@@ -4016,7 +4721,11 @@ body.splitting * { cursor: inherit !important; }
   .menu-sheet[data-exiting] { animation: none; }
 }
 
+.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;
@@ -4133,14 +4842,6 @@ body.splitting * { cursor: inherit !important; }
   white-space: nowrap;
 }
 
-.cmd-key {
-  flex: none;
-  font-family: var(--font-mono);
-  font-size: var(--text-2xs);
-  color: var(--muted);
-  letter-spacing: var(--tracking);
-}
-
 .cmd-empty {
   margin: 0;
   padding: var(--space-6) var(--space-4);
@@ -4166,25 +4867,18 @@ body.splitting * { cursor: inherit !important; }
   .cmd-scrim[data-exiting],
   .cmd[data-entering] { animation: none; }
 }
+}
 
 /* ---- ./pagination.css ---- */
-/* Moving through a list that does not fit, and saying how far in you are. */
-.pager {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-4);
-  flex-wrap: wrap;
-  padding: var(--space-2) 0;
-  font-size: var(--text-xs);
-  color: var(--muted);
-}
+@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
+   text the caller passed. */
 
-.pager-count { margin: 0; }
+/* Moving through a list that does not fit, and saying how far in you are. */
 .pager-count strong { color: var(--text); font-weight: var(--weight-strong); }
 
-.pager-controls { display: flex; align-items: center; gap: var(--space-1); }
-
 .pager-step,
 .pager-page {
   display: inline-flex;
@@ -4295,8 +4989,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;
@@ -4376,6 +5072,8 @@ body.splitting * { cursor: inherit !important; }
 }
 
 .ident-remove {
+  /* Stated rather than inherited. These came from the `button, input, textarea, select` reset, which applied control styling to everything that happened to be a `<button>` -- so this rule spent its opening lines undoing it, and would break silently if that rule ever moved. It did move, to `.btn`. */
+  font: inherit;
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -4395,6 +5093,7 @@ 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); }
+}
 /* ---- tf: the themes ---- */
 :root[data-theme='night']{--bg:#0f1115;--panel:#161a21;--panel-2:#1c222b;--border:#262d38;--text:#e6e9ef;--muted:#8b94a4;--accent:#5b9dff;--accent-dim:#2a4877;--app-bg:#0f1115;color-scheme:dark}
 :root[data-theme='paper']{--bg:#f6f7f9;--panel:#ffffff;--panel-2:#f0f2f5;--border:#e4e8ec;--border-strong:#8792a1;--text:#191d23;--muted:#5d6773;--accent:#0e7872;--accent-dim:#7fbdb8;--on-accent:#ffffff;--good:#1c7a4a;--warn:#8a6216;--bad:#b3312c;--info:#216bc9;--shadow-1:0 4px 14px rgba(16, 24, 40, 0.08);--shadow-2:0 8px 24px rgba(16, 24, 40, 0.10);--shadow-3:0 12px 32px rgba(16, 24, 40, 0.12);--scrim:rgba(16, 24, 40, 0.32);color-scheme:light}