@wtfalch/design 0.8.0 → 0.9.0

package/dist/tf.css

@@ -278,6 +278,705 @@
  *
  * `scripts/copy-css.mjs` flattens these into one file at build time.
  */
+/* ---- ./_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-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);
+    --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--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 {
+  .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-accent {
+    border-color: var(--color-accent);
+  }
+  .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);
+    line-height: var(--tw-leading, var(--text-2xs--line-height));
+  }
+  .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;
+    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-0 {
+    opacity: 0%;
+  }
+  .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);
+  }
+  .surface-panel-2 {
+    background: var(--panel-2);
+  }
+  .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;
+    }
+  }
+}
+
 /* ---- ./base.css ---- */
 /* Light, only under the `system` theme. This used to override `:root`
    unconditionally, so choosing a dark theme on a light-mode laptop got
@@ -371,23 +1070,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 +1115,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 +1131,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 +1190,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 +1198,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 +1291,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 +1305,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 +1319,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 +1332,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 +1375,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 +1463,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 +1527,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 +1603,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 +1784,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,6 +1816,57 @@ 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 ---- */
 /* How big a control is, asked for rather than inherited.
    Four sizes existed and every one of them came from a descendant selector:
@@ -1103,8 +1882,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 +1890,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 +1931,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 +1953,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,21 +1962,7 @@ 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. */
-.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
+.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
@@ -1202,18 +1975,6 @@ select,
   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,8 +1986,6 @@ 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; }
-
 .sel-item[data-selected] .sel-tick { opacity: 1; }
 
 /* The icon on a speaker's row in the open list -- `Select`'s `aside`. Last in
@@ -1264,21 +2023,18 @@ select,
 
 /* ---- ./dangerzone.css ---- */
 /* 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);
 }
@@ -1519,33 +2275,46 @@ a.btn.danger:active:not([aria-disabled='true']) {
 .callout button { flex: none; }
 
 /* ---- ./card.css ---- */
+/* `.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 +2361,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,6 +2403,20 @@ 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 ---- */
 .card-action .switch-row { padding: 0; gap: var(--space-2); }
 
@@ -2195,71 +2967,21 @@ input[type='radio']:active:not(:disabled) {
 
 .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 ---- */
 /* 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 {
@@ -2293,6 +3015,14 @@ input[type='radio']:active:not(:disabled) {
 .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;
@@ -2449,6 +3179,38 @@ 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 ---- */
 /* modal --------------------------------------------------------------- */
 
@@ -2489,13 +3251,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 +3301,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; }
 
@@ -2917,7 +3663,8 @@ 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 ---- */
 /* A row you choose. There is no checkbox in it.
@@ -3095,30 +3842,28 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    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; }
-
-.table-scroll { overflow-x: auto; }
+.data-table th .set-hint { font-weight: 400; }
 
-.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,40 +3874,31 @@ 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); }
-
-.size-cell {
-  width: 18px; height: 14px; padding: 0;
-  border: 1px solid var(--border); border-radius: var(--radius-sm);
-  background: var(--panel-2); cursor: pointer;
+/* What is left of the size grid once it draws itself.
+ *
+ * `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. */
+.size-cell.on {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 45%, transparent);
 }
 
-/* `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); }
-
-.size-cell:disabled { cursor: default; opacity: 0.5; }
-
-.size-ceiling { opacity: 0.55; }
-
 /* ---- ./tooltip.css ---- */
 /* 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.
@@ -3171,36 +3907,15 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* 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
+/* 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); }
 
@@ -3301,6 +4016,18 @@ 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 ---- */
 /* fields --------------------------------------------------------------- */
 
@@ -3399,7 +4126,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,6 +4179,31 @@ 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 ---- */
 /* tour ----------------------------------------------------------------- */
 
@@ -3519,136 +4271,32 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    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);
-}
+/* 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. */
+/* 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;
@@ -3914,27 +4562,13 @@ body.splitting * { cursor: inherit !important; }
 }
 
 /* ---- ./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);
-}
+/* 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 +4607,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,6 +4642,8 @@ body.splitting * { cursor: inherit !important; }
   .menu-sheet[data-exiting] { animation: none; }
 }
 
+.menu-sheet { box-shadow: var(--shadow-2); }
+
 /* ---- ./command.css ---- */
 /* The command palette: a field over the app and a list under it. */
 .cmd-scrim {
@@ -4133,14 +4761,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);
@@ -4168,23 +4788,14 @@ body.splitting * { cursor: inherit !important; }
 }
 
 /* ---- ./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);
-}
+/* 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;
@@ -4376,6 +4987,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;