@aparte/core 0.16.7 → 0.16.9

package/dist/index.css

@@ -183,7 +183,6 @@
      below (it was a frozen plum hex that outlived every rebrand); the assistant is
      plain prose (AI-chat convention) — flip it to get a two-bubble chat-app look. */
   --aparte-message-content-bg-assistant: transparent;
-  --aparte-message-content-radius: 14px;
 
   /* Aliases used by some segment renderers (artifact card, tool pill).
      Mapped to existing tokens so consumers that override --aparte-surface-1/2
@@ -206,8 +205,6 @@
   --aparte-thumb-remove-bg-hover: rgba(0, 0, 0, 0.85);
   --aparte-thumb-remove-color: #ffffff;
 
-  /* Action Bar */
-  --aparte-action-bar-btn-size: 28px;
   /* The mark (display/mark.css): how much of its intent a marked row's ground takes,
      and how wide the bar on its start edge is. One pair for the select's chosen option,
      the checked field choice, the active conversation and an answered question. */
@@ -215,12 +212,16 @@
   --aparte-mark-bar: 2px;
 
   /* Branch Picker */
-  --aparte-branch-picker-btn-size: 20px;
-  --aparte-branch-picker-btn-icon-size: 16px;
   --aparte-branch-picker-label-min-width: 32px;
 
   /* Avatars */
   --aparte-avatar-size: 32px;
+  /* Fractions of the size, computed on the element (display/avatar.css): the initials'
+     type, the corner and the group's overlap follow the ramp instead of sitting at one
+     absolute value for 20px and 56px alike. */
+  --aparte-avatar-initials-ratio: 0.34;
+  --aparte-avatar-radius-ratio: 0.28;
+  --aparte-avatar-overlap-ratio: 0.28;
   --aparte-avatar-image-user: none;
   --aparte-avatar-image-assistant: none;
   --aparte-avatar-image-size: 90%;
@@ -230,21 +231,18 @@
   /* Input */
   --aparte-input-editor-max-height: 200px;
 
-  /* Icons — one knob, inherited: a container declares it, every glyph below follows. */
-  --aparte-icon-size: 14px;
-  --aparte-icon-size-sm: 12px;
-  --aparte-icon-size-lg: 16px;
-  --aparte-icon-size-xl: 20px;
+  /* Icons: one knob, inherited — a container declares `--aparte-icon-size` and every
+     glyph below follows. The steps are on the type scale, in the derived layer. */
 
-  /* Send button + inline action buttons */
-  --aparte-send-btn-size: 36px;
-  --aparte-input-action-btn-size: 36px;
+  /* Send button + inline action buttons (their size is the lg step, in the derived layer) */
   --aparte-input-action-btn-icon-size: 20px;
   --aparte-model-select-min-width: 120px;
 
   /* Status Indicator */
   --aparte-status-bg: transparent;
   --aparte-status-dot-size: 6px;
+  /* The floor of every pulsing dot's opacity: above the perception threshold. */
+  --aparte-pulse-floor: 0.55;
 
   /* Waiting Indicator (the bubble's own dots, before the first token) */
   --aparte-waiting-height: 1.5em;
@@ -252,7 +250,6 @@
   /* Thinking Segment */
   --aparte-thinking-content-max-height: 300px;
   --aparte-thinking-content-line-height: 1.55;
-  --aparte-thinking-toggle-size: 9px;
   --aparte-thinking-rail-width: 2px;
 
   /* Elicitation — the panel a tool's question is asked in.
@@ -282,8 +279,7 @@
   --aparte-code-copy-icon-size: 14px;
   --aparte-code-inline-font-size: 0.875em;
 
-  /* Scroll-to-bottom button */
-  --aparte-scroll-btn-size: 36px;
+  /* Scroll-to-bottom button (its size is the lg step, in the derived layer) */
   --aparte-scroll-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 
   /* Error segment */
@@ -291,8 +287,6 @@
   --aparte-error-border: #fecaca;
   --aparte-error-solid: #dc2626;
   --aparte-error-text: #991b1b;
-  --aparte-error-title: #7f1d1d;
-  --aparte-error-icon-size: 20px;
   --aparte-error-rail-width: 4px;
 
   /* Prose (aparte-segment-content) */
@@ -327,21 +321,21 @@
 
   /* Input (composer) */
 
-  /* Conversation List */
-  --aparte-conv-action-btn-size: 20px;
 
   /* Scroll rail — the ticks beside the transcript. Off-scale on purpose: a 2px line
      and a 14px mark are a minimap's measures, not spacing steps. */
-  --aparte-scroll-rail-width: 20px;
   --aparte-scroll-rail-tick-size: 14px;
   --aparte-scroll-rail-tick-thickness: 2px;
-
-  --aparte-scroll-rail-gap: 8px;
+  /* What a tick is to a POINTER, as opposed to what it is to the eye: WCAG 2.5.8's
+     24px minimum. The drawn line stays 14×2 — this sizes the pseudo-element around it,
+     and the gap below derives from it so the pitch rises with the zone. The rail is
+     `display: none` under `(pointer: coarse)`, so 2.5.8's 24px is the bar here and not
+     2.5.5's 44px. */
+  --aparte-scroll-rail-hit-size: 24px;
 
   /* Context gauge, ring variant — a diameter, and a stroke in the ring's own 36-unit
      box. Literals like the rail's: a 22px ring is a toolbar's measure, not a spacing step. */
   --aparte-context-ring-size: 22px;
-  --aparte-context-ring-stroke: 4;
 
   /* Shell — the sidebar's column, the header's row and the split's seam. */
   --aparte-sidebar-width: 260px;
@@ -353,9 +347,15 @@
      is 12px because that is a target, and it grows to the touch target on a coarse
      pointer (responsive.css). */
   --aparte-split-position: 38%;
-  --aparte-split-min: 20rem;
+  /* Never more than the container has: at 320px this floor was wider than a phone, so
+     the primary pane took everything and the end pane was annihilated to 0. */
+  --aparte-split-min: min(20rem, 100%);
   --aparte-split-max: 60%;
-  --aparte-split-handle-size: 4px;
+  /* The seam's TRACK — the grab zone, and what the grid reserves. The painted line
+     inside it is `--aparte-split-seam-width` (derived layer): one token used to size
+     both, so the line could not be thinned without moving the layout, and at 4px it
+     was four times the kit's rule with no grip — an interaction drawn as a decoration. */
+  --aparte-split-handle-size: 12px;
   --aparte-split-hit-area: 12px;
   /* Sizes that are not steps of a scale. Each is off-scale on purpose — a 40px
      file tile is a tile, not fourteen spacing units — so each gets a name rather
@@ -406,6 +406,9 @@
   --aparte-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   --aparte-popover-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.16);
   --aparte-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  /* The composer laid over the transcript (overlay-composer): a thing that floats has to
+     be seen floating, and its ground is the transcript's own. */
+  --aparte-composer-overlay-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
   --aparte-switch-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   --aparte-range-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
 
@@ -444,11 +447,28 @@
   --aparte-skeleton-text-last-width: 60%;
   --aparte-progress-indeterminate-width: 40%;
 
+  /* The control height scale — four steps, and EVERY control reads one: a text
+     button used to have no height (23px of padding and line-height) beside 24, 29, 32,
+     36 and 44px neighbours, and the 36px family (send, the input's action button, the
+     scroll button) lived off the scale as literals. sm is the small control (action bar,
+     branch arrows, a row's ⋯), md the default button, lg the field and the composer's
+     controls at rest, xl the large button. */
   --aparte-btn-size-sm: 24px;
   --aparte-btn-size-md: 32px;
-  --aparte-btn-size-lg: 40px;
+  --aparte-btn-size-lg: 36px;
+  --aparte-btn-size-xl: 40px;
+  /* The field family's literal sizes, beside the button's: the derived knobs
+     (paddings, radius) sit in the anchored layer below, like the button's own. */
+  --aparte-field-textarea-min-height: 80px;
+  --aparte-checkbox-size: 18px;
+  --aparte-radio-size: 18px;
+  --aparte-radio-dot-size: 8px;
+  --aparte-switch-width: 40px;
+  --aparte-switch-height: 22px;
+  --aparte-switch-thumb-inset: 2px;
+  --aparte-range-thumb-size: 16px;
+  --aparte-range-track-height: 4px;
 
-  --aparte-focus-outline-offset: -2px;
   --aparte-tool-spinner-size: 10px;
   --aparte-model-select-chevron-room: 28px;
 }
@@ -482,6 +502,9 @@
     --aparte-scroll-btn-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
     --aparte-select-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.55);
     --aparte-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+    --aparte-composer-overlay-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
+    /* Declared once at :root it darkened a dark page by 8/255: the modal state vanished. */
+    --aparte-scrim: rgba(0, 0, 0, 0.6);
     --aparte-popover-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.55);
     --aparte-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
     --aparte-switch-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -491,7 +514,6 @@
     --aparte-error-border: #7f1d1d;
     --aparte-error-solid: #f87171;
     --aparte-error-text: #fca5a5;
-    --aparte-error-title: #fecaca;
   }
 }
 
@@ -521,6 +543,10 @@
   --aparte-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   --aparte-popover-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.16);
   --aparte-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+  /* The composer laid over the transcript (overlay-composer): a thing that floats has to
+     be seen floating, and its ground is the transcript's own. */
+  --aparte-composer-overlay-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
+  --aparte-scrim: rgba(0, 0, 0, 0.35);
   --aparte-switch-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   --aparte-range-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
   --aparte-ink-l: 0.40;
@@ -528,7 +554,6 @@
   --aparte-error-border: #fecaca;
   --aparte-error-solid: #dc2626;
   --aparte-error-text: #991b1b;
-  --aparte-error-title: #7f1d1d;
 }
 
 
@@ -568,6 +593,8 @@
   --aparte-scroll-btn-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
   --aparte-select-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.55);
   --aparte-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+  --aparte-composer-overlay-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
+  --aparte-scrim: rgba(0, 0, 0, 0.6);
   --aparte-popover-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.55);
   --aparte-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
   --aparte-switch-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
@@ -587,7 +614,6 @@
   --aparte-error-border: #7f1d1d;
   --aparte-error-solid: #f87171;
   --aparte-error-text: #fca5a5;
-  --aparte-error-title: #fecaca;
 }
 
 /* =========================================
@@ -653,8 +679,14 @@ aparte-chat {
   --aparte-font-size-xs: calc(0.6875rem * var(--aparte-font-scale));
   --aparte-font-size-sm: calc(0.75rem * var(--aparte-font-scale));
   --aparte-font-size-md: calc(0.8125rem * var(--aparte-font-scale));
-  --aparte-font-size-lg: calc(0.875rem * var(--aparte-font-scale));
   --aparte-font-size-base: calc(0.9375rem * var(--aparte-font-scale));
+  /* Above the body, in the order the names say. `lg` used to be 0.875rem — SMALLER than
+     `base` — with nothing above it, so a title and a placeholder shared a size and a
+     card's title was smaller than its body. A scale whose name lies is worse than a
+     short one. */
+  --aparte-font-size-lg: calc(1.0625rem * var(--aparte-font-scale));
+  --aparte-font-size-xl: calc(1.25rem * var(--aparte-font-scale));
+  --aparte-font-size-2xl: calc(1.5rem * var(--aparte-font-scale));
 
   /* Elicitation and the conversation item, on the scale.
      They were literals off every step — 0.76 / 0.78 / 0.8 / 0.82rem and a `7px 10px`
@@ -680,7 +712,6 @@ aparte-chat {
      vertical half (#56) — a shorthand cannot be read by parts. */
   --aparte-message-padding-block: var(--aparte-space-8);
   --aparte-message-padding-inline: var(--aparte-space-6);
-  --aparte-message-padding: var(--aparte-message-padding-block) var(--aparte-message-padding-inline);
   --aparte-message-content-padding: var(--aparte-space-5) var(--aparte-space-7);
   --aparte-action-bar-gap: var(--aparte-space-2);
   --aparte-branch-picker-gap: var(--aparte-space-2);
@@ -694,17 +725,23 @@ aparte-chat {
   --aparte-viewport-padding: var(--aparte-space-8);
   --aparte-scrollbar-thumb: var(--aparte-neutral);
   --aparte-input-padding-x: var(--aparte-space-6);
-  --aparte-input-padding-y: var(--aparte-space-5);
+  /* The editor at rest is the control height: half of what the control size leaves once
+     one line of its own text is taken out. It used to be a flat 10px, which made the editor
+     44px beside 36px buttons and, the row aligning at the end, sat the send button 4px
+     below the editor's centre. Derived from the editor's own line (1lh), so a coarse
+     pointer's 44 and a changed font both keep the editor and its buttons on one centre. */
+  --aparte-input-padding-y: calc((var(--aparte-composer-control-size) - 1lh) / 2);
   --aparte-conv-list-gap: var(--aparte-space-1);
   --aparte-conv-item-gap: var(--aparte-space-3);
-  --aparte-elic-option-radius: var(--aparte-radius-lg);
+  --aparte-elic-option-radius: var(--aparte-radius-md);
   --aparte-elic-input-radius: var(--aparte-radius-md);
   --aparte-tool-row-radius: var(--aparte-radius-md);
-  --aparte-avatar-font-size: var(--aparte-font-size-lg);
-  --aparte-name-font-size: var(--aparte-font-size-lg);
+  /* The split's painted seam: the kit's rule, inside a 12px track. */
+  --aparte-split-seam-width: var(--aparte-border-width);
+  --aparte-name-font-size: var(--aparte-font-size-md);
   --aparte-timestamp-font-size: var(--aparte-font-size-sm);
   --aparte-branch-picker-label-size: var(--aparte-font-size-sm);
-  --aparte-input-font-size: var(--aparte-font-size-lg);
+  --aparte-input-font-size: var(--aparte-font-size-base);
   --aparte-content-font-size: var(--aparte-font-size-base);
   --aparte-input-editor-font-size: var(--aparte-font-size-base);
   --aparte-status-font-size: var(--aparte-font-size-md);
@@ -717,6 +754,9 @@ aparte-chat {
      moves --aparte-space-unit or --aparte-font-scale carries them along. */
   /* A tooltip is an INVERTED surface: dark on a light theme, light on a dark one.
      Reading the text pair gives exactly that, and for free — no third palette. */
+  /* The distance between a placed tooltip (`data-side`) and its anchor: the arrow's
+     half-diagonal, so the tip lands on the trigger rather than 2px short of it. */
+  --aparte-tooltip-gap: var(--aparte-space-3);
   --aparte-tooltip-bg: var(--aparte-text);
   --aparte-tooltip-color: var(--aparte-text-inverse);
 
@@ -752,6 +792,14 @@ aparte-chat {
   --aparte-alert-padding: var(--aparte-space-4) var(--aparte-space-5);
   --aparte-alert-radius: var(--aparte-radius-md);
   --aparte-alert-rail-width: var(--aparte-space-1);
+  /* The icon scale, in rem times the type factor — the one scale in the theme that
+     was pinned in px while every type size followed `--aparte-font-scale`, so a glyph
+     beside text shrank optically the moment a reader enlarged the text. The loose
+     default is 16 (it was 14, and its documentation already said 16). */
+  --aparte-icon-size: calc(1rem * var(--aparte-font-scale));
+  --aparte-icon-size-sm: calc(0.75rem * var(--aparte-font-scale));
+  --aparte-icon-size-lg: calc(1.125rem * var(--aparte-font-scale));
+  --aparte-icon-size-xl: calc(1.25rem * var(--aparte-font-scale));
   --aparte-alert-icon-size: var(--aparte-space-8);
   --aparte-alert-dismiss-size: var(--aparte-btn-size-sm);
   --aparte-alert-title-font-size: var(--aparte-font-size-md);
@@ -759,8 +807,7 @@ aparte-chat {
 
   --aparte-avatar-fallback-bg: var(--aparte-surface-3);
   --aparte-avatar-fallback-color: var(--aparte-text);
-  --aparte-avatar-group-overlap: var(--aparte-space-3);
-  --aparte-avatar-group-ring-width: var(--aparte-border-width);
+  --aparte-avatar-group-ring-width: calc(var(--aparte-border-width) * 2);
   --aparte-avatar-group-ring-color: var(--aparte-surface-1);
 
   --aparte-badge-font-size: var(--aparte-font-size-2xs);
@@ -781,7 +828,7 @@ aparte-chat {
   --aparte-card-header-padding: var(--aparte-space-4) var(--aparte-space-5);
   --aparte-card-body-padding: var(--aparte-space-5);
   --aparte-card-footer-padding: var(--aparte-space-4) var(--aparte-space-5);
-  --aparte-card-header-font-size: var(--aparte-font-size-lg);
+  --aparte-card-header-font-size: var(--aparte-font-size-base);
 
   --aparte-divider-margin: var(--aparte-space-5);
   --aparte-divider-label-gap: var(--aparte-space-4);
@@ -797,22 +844,62 @@ aparte-chat {
   --aparte-progress-height: var(--aparte-space-2);
   --aparte-progress-fill: var(--aparte-primary);
 
-  --aparte-skeleton-base: var(--aparte-surface-2);
+  /* The ground of a gauge or a placeholder — the thing a value is read against, so it
+     has to be seen. Derived RELATIVE to the page, not a surface level: a level sat at
+     two different distances from the ground in light and dark. */
+  --aparte-track: color-mix(in srgb, var(--aparte-text) 8%, var(--aparte-bg));
+  --aparte-skeleton-base: var(--aparte-track);
+  /* The rail is as wide as its widest tick (the current one is 1.6× the resting size);
+     it used to be a 20px literal clipping a 22.4px tick. The floor is one tick's
+     pressable zone: the rail clips, so a column narrower than the zone would cut the
+     target back below 24px on the very edge a reader aims at. */
+  --aparte-scroll-rail-width: max(var(--aparte-scroll-rail-hit-size), calc(var(--aparte-scroll-rail-tick-size) * 1.6));
+  /* The distance between two ticks IS the zone minus the line: gap + thickness = the
+     24px pitch, so the zones tile edge to edge. Growing the zone alone would have
+     overlapped them by 14px and left the z-order to decide every press. */
+  --aparte-scroll-rail-gap: calc(var(--aparte-scroll-rail-hit-size) - var(--aparte-scroll-rail-tick-thickness));
   --aparte-skeleton-shine: var(--aparte-surface-3);
-  --aparte-skeleton-text-height: var(--aparte-space-6);
-  --aparte-skeleton-text-gap: var(--aparte-space-3);
+  /* The line it stands for: as tall as the content type, and a gap that is the rest of
+     the content line, so the text that replaces it lands where it was (T21). It was 12px
+     on an 18px step for a 16px line on a 27px step — a third of a line of jump per line. */
+  --aparte-skeleton-text-height: var(--aparte-content-font-size);
+  --aparte-skeleton-text-gap: calc(var(--aparte-content-font-size) * (var(--aparte-content-line-height) - 1));
   --aparte-skeleton-circle-size: var(--aparte-avatar-size);
 
   --aparte-spinner-thickness: var(--aparte-space-1);
 
-  --aparte-field-error-ring: 0 0 0 var(--aparte-focus-outline-width) var(--aparte-error-solid);
+
+  /* The field family's knobs, beside the button's — they used to be declared on
+     `.aparte-field` itself, which is why `.aparte-field-group` (their PARENT) and
+     `.aparte-color` (a sibling recipe) read a property that did not exist there and
+     rendered SQUARE: a custom property is substituted where it is declared and only
+     inherits downwards. Same reason they belong here rather than there: the theming
+     guide sends a consumer to `:root`, and every other family's knobs are here.
+     The *channels* stay local on purpose (`--aparte-checkbox-intent` and friends are
+     filled by a modifier, not set by a theme). */
+  --aparte-field-padding: var(--aparte-space-2) var(--aparte-space-3);
+  --aparte-field-padding-sm: var(--aparte-space-1) var(--aparte-space-2);
+  --aparte-field-padding-lg: var(--aparte-space-3) var(--aparte-space-4);
+  --aparte-field-radius: var(--aparte-radius-md);
+  /* The field's resting height is the lg step of the control scale, one step above the
+     default button and level with the composer's controls; `--sm` and `--lg` sit one
+     step either side. It used to be padding plus line-height, ~29px, the second
+     tallest thing in a row of five different heights. */
+  --aparte-field-size: var(--aparte-btn-size-lg);
+  --aparte-field-size-sm: var(--aparte-btn-size-md);
+  --aparte-field-size-lg: var(--aparte-btn-size-xl);
+  /* The 36px family, on the scale: named, not literal. */
+  --aparte-send-btn-size: var(--aparte-btn-size-lg);
+  --aparte-input-action-btn-size: var(--aparte-btn-size-lg);
+  --aparte-scroll-btn-size: var(--aparte-btn-size-lg);
 
   --aparte-btn-gap: var(--aparte-space-2);
   --aparte-btn-padding: var(--aparte-space-2) var(--aparte-space-3);
   --aparte-btn-radius: var(--aparte-radius-md);
-  --aparte-btn-font-size: var(--aparte-font-size-sm);
+  /* Control text is the md step (14px). One step lower was the origin of the "poor"
+     look: 13px labels in 32px boxes, beside 15px prose. */
+  --aparte-btn-font-size: var(--aparte-font-size-md);
   --aparte-btn-bg-hover: var(--aparte-surface-2);
-  --aparte-btn-focus-offset: var(--aparte-space-1);
   --aparte-btn-bg-active: var(--aparte-surface-3);
   --aparte-btn-bg-toggled: var(--aparte-surface-2);
   --aparte-btn-color-toggled: var(--aparte-text);
@@ -822,11 +909,17 @@ aparte-chat {
   --aparte-btn-padding-sm: var(--aparte-space-1) var(--aparte-space-2);
   --aparte-btn-padding-lg: var(--aparte-space-3) var(--aparte-space-5);
 
+  /* One knob for the composer's control set — the send button, the input's action
+     buttons, the editor's single-line height: the lg step at rest, the touch target
+     under a coarse pointer (responsive.css). It used to be undeclared, with `44px`
+     written as a fallback at every reader, so a desktop composer was a 62px bar around
+     15px of text and the coarse-pointer block had nothing left to enlarge. */
+  --aparte-composer-control-size: var(--aparte-btn-size-lg);
   --aparte-input-container-min-height: var(--aparte-touch-target-size);
-  --aparte-elic-message-size: var(--aparte-font-size-md);
-  --aparte-elic-title-size: var(--aparte-font-size-md);
+  --aparte-elic-message-size: var(--aparte-font-size-base);
+  --aparte-elic-title-size: var(--aparte-font-size-base);
   --aparte-elic-desc-size: var(--aparte-font-size-sm);
-  --aparte-elic-option-title-size: var(--aparte-font-size-lg);
+  --aparte-elic-option-title-size: var(--aparte-font-size-md);
   --aparte-elic-option-desc-size: var(--aparte-font-size-sm);
   --aparte-elic-skip-size: var(--aparte-font-size-md);
   --aparte-elic-step-size: var(--aparte-font-size-sm);
@@ -836,6 +929,17 @@ aparte-chat {
 
   /* Borders */
   --aparte-border-focus: var(--aparte-primary);
+  /* THE focus ring: a 2px outline in this colour, one spacing step OUTSIDE the box, on
+     every control. It used to be drawn two ways — this outline on seventeen recipes and a
+     soft box-shadow wash (30 % of the accent, 1.39:1 against the page) on five — and the
+     offset was −2px, inside the box, so on a bordered row the ring sat as a second
+     concentric line and the next row painted over its edge. */
+  --aparte-focus-outline-offset: var(--aparte-space-1);
+  /* The edge of a CONTROL — a field, a choice box, the select's trigger. `--aparte-border`
+     separates two regions and is right to be faint; a thing someone can touch has to be
+     seen, and six previews showed a control with no visible edge. Derived from the ink
+     and the ground so both schemes follow; the mix is a first setting. */
+  --aparte-border-control: color-mix(in srgb, var(--aparte-text) 30%, var(--aparte-surface-1));
 
   /* Component-specific radius (overridable per app) */
   --aparte-radius-input: var(--aparte-radius-lg);
@@ -843,19 +947,25 @@ aparte-chat {
   --aparte-radius-send-btn: var(--aparte-radius-md);
   --aparte-radius-action-btn: var(--aparte-radius-sm);
   --aparte-radius-select: var(--aparte-radius-md);
-  --aparte-radius-avatar: var(--aparte-radius-md);
   --aparte-radius-bubble: var(--aparte-radius-lg);
+  /* The bubble's corner IS the bubble radius above: it was a 14px literal off the scale,
+     the most visible corner of the transcript, and the knob named for it drove nothing. */
+  --aparte-message-content-radius: var(--aparte-radius-bubble);
   --aparte-radius-code: var(--aparte-radius-lg);
   --aparte-radius-thinking: var(--aparte-radius-lg);
   --aparte-radius-error: var(--aparte-radius-md);
+  /* The floating surfaces. They read a step of the scale directly, so a theme that
+     wanted square menus and round bubbles had to move the step — and every other
+     reader of it. */
+  --aparte-radius-menu: var(--aparte-radius-lg);
+  --aparte-radius-popover: var(--aparte-radius-lg);
+  --aparte-radius-dialog: var(--aparte-radius-xl);
+  --aparte-radius-tooltip: var(--aparte-radius-sm);
 
   /* The error ring on an avatar. A full shadow value, like
      --aparte-scroll-btn-shadow: the whole ring is the knob, not its width. */
   --aparte-avatar-error-ring: 0 0 0 2px var(--aparte-error-solid);
 
-  /* Focus ring — derived from the accent so it themes automatically. */
-  --aparte-focus-ring: 0 0 0 3px color-mix(in srgb, var(--aparte-primary) 30%, transparent);
-
   /* Messages */
   --aparte-message-content-text-user: var(--aparte-text);
   --aparte-message-content-text-assistant: var(--aparte-text);
@@ -865,7 +975,9 @@ aparte-chat {
      in sRGB rather than derived with `oklch(from …)`, because a wash has to keep the
      SURFACE's lightness, not the accent's; 12 % is where the default palette reads as a
      tint, not a fill, on both grounds. */
-  --aparte-message-content-bg-user: color-mix(in srgb, var(--aparte-primary) 12%, var(--aparte-surface-1));
+  /* The mark's own tint: at 12 % the user bubble — the one mark that says "this turn is
+     yours" — sat at 1.03:1 on the light page. */
+  --aparte-message-content-bg-user: color-mix(in srgb, var(--aparte-primary) var(--aparte-mark-tint), var(--aparte-surface-1));
   /* The third surface: the second, pulled 6 % toward the text. Close to what the old
      literals encoded (`#e7dfce` from `#f1ebdf` light, `#342a40` from `#2a2333` dark —
      5 to 9 % per channel, not one figure), now one rule that follows the masters. */
@@ -893,6 +1005,12 @@ aparte-chat {
   --aparte-thumb-radius: var(--aparte-radius-lg);
 
   /* Action Bar */
+  /* The small controls of a turn and of a conversation row are the recipe's small step
+     (24px, the WCAG 2.5.8 floor). The action bar used to feed 28 with a 24 exception for
+     the last user turn, the branch arrows redrew 20 over their own `--sm`, the row's
+     `⋯` redrew 20: three control heights in one 14px row. */
+  --aparte-action-bar-btn-size: var(--aparte-btn-size-sm);
+  --aparte-conv-action-btn-size: var(--aparte-btn-size-sm);
   --aparte-action-bar-btn-color: var(--aparte-text-muted);
   --aparte-action-bar-btn-hover-bg: var(--aparte-surface-2);
   --aparte-action-bar-btn-hover-color: var(--aparte-text);
@@ -903,11 +1021,10 @@ aparte-chat {
   --aparte-branch-picker-label-color: var(--aparte-text-muted);
 
   /* Avatars */
-  --aparte-avatar-radius: var(--aparte-radius-avatar);
   --aparte-avatar-bg-user: var(--aparte-primary);
   --aparte-avatar-text-user: var(--aparte-text-inverse);
   --aparte-avatar-bg-assistant: var(--aparte-surface-3);
-  --aparte-avatar-text-assistant: var(--aparte-text-inverse);
+  --aparte-avatar-text-assistant: var(--aparte-text);
 
   /* Text Sizes */
   --aparte-name-color: var(--aparte-text);
@@ -936,6 +1053,10 @@ aparte-chat {
   --aparte-code-header-bg: var(--aparte-surface-2);
   --aparte-code-border: var(--aparte-border);
   --aparte-code-header-text: var(--aparte-text-muted);
+  /* The block's own type. It used to inherit the prose's size and leading (16px on 1.7)
+     under the browser's generic monospace — the largest, airiest text in the message. */
+  --aparte-code-block-font-size: var(--aparte-font-size-md);
+  --aparte-code-block-line-height: var(--aparte-line-height-normal);
 
   /* Scroll-to-bottom button */
 
@@ -955,6 +1076,9 @@ aparte-chat {
 
   /* Shell */
   --aparte-sidebar-bg: var(--aparte-surface-2);
+  /* The one inline inset of the column's four regions — header, search, body, footer.
+     They used to carry three (16 / 12 / 12 / 16) and the content sat on two axes. */
+  --aparte-sidebar-inset: var(--aparte-space-3);
 
   /* Conversation List */
   --aparte-conv-item-radius: var(--aparte-radius-md);
@@ -1034,6 +1158,28 @@ aparte-chat {
   animation: aparte-pulse var(--aparte-duration-pulse) infinite ease-in-out;
 }
 
+/* Under reduced motion the loop stops outright. The duration tokens are reset to
+   0.01ms in responsive.css, but that leaves `infinite` in place: a 0.01ms cycle
+   is not stillness, it is a flicker. The descendant sweep there does not reach a
+   recipe used outside aparté's own elements, so each looping recipe stops itself,
+   the way display/icon.css already does. */
+@media (prefers-reduced-motion: reduce) {
+  .aparte-dot { animation: none; }
+}
+
+/* `hidden` means hidden. 71 recipes in these sheets set `display` on their base class,
+   and an author declaration beats the browser's own `[hidden] { display: none }` — so a
+   hidden `.aparte-btn` was out of the accessibility tree and still painted: the copy
+   button of a tool-only turn stood there with `hidden` on it. Scoped to our own classes
+   (a prefix match, not a bare `[hidden]`, so a host's markup is not touched), and
+   `!important` because the whole point is to outrank the recipe's `display`. The
+   handful of per-element `[hidden]` rules that predate this stay; they are now
+   redundant, not wrong. */
+[class^="aparte-"][hidden],
+[class*=" aparte-"][hidden] {
+  display: none !important;
+}
+
 /* =========================================
    aparte-conversation-list
    ========================================= */
@@ -1065,7 +1211,7 @@ aparte-conversation-list {
 .aparte-link:hover { color: var(--aparte-link-color-hover); }
 .aparte-link:focus-visible {
   outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
-  outline-offset: var(--aparte-btn-focus-offset);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 /* Quiet — for a link inside a dense row, where a coloured one would shout. It keeps
    the underline, which is the part that carries the meaning. */
@@ -1088,8 +1234,11 @@ aparte-conversation-list {
    same thing at slightly different rhythms; a travelling wave, where a row wants one,
    comes from an animation-delay on its later dots, not from a skewed curve. */
 @keyframes aparte-pulse {
-  0%, 100% { opacity: 0.3; transform: scale(0.85); }
-  50%      { opacity: 1;   transform: scale(1.1);  }
+  /* Opacity alone: the scale that used to ride along made a row of waiting dots change
+     width in a loop. And a floor above the perception threshold — at 0.3 the status
+     dot spent half of every cycle at 1.55:1, and a capture froze it there. */
+  0%, 100% { opacity: var(--aparte-pulse-floor); }
+  50%      { opacity: 1; }
 }
 
 /* One rotation, for every spinner and every spinning glyph. */
@@ -1110,9 +1259,9 @@ aparte-conversation-list {
  *       <aparte-icon name="copy"></aparte-icon>
  *     </button>
  *     <div class="aparte-btn-group" role="group" aria-label="Versions">
- *       <button class="aparte-btn aparte-btn--surface">‹</button>
+ *       <button class="aparte-btn aparte-btn--surface" aria-label="Previous"><aparte-icon name="prevBranch"></aparte-icon></button>
  *       <button class="aparte-btn aparte-btn--surface">1 / 2</button>
- *       <button class="aparte-btn aparte-btn--surface">›</button>
+ *       <button class="aparte-btn aparte-btn--surface" aria-label="Next"><aparte-icon name="nextBranch"></aparte-icon></button>
  *     </div>
  *     <div class="aparte-btn-group" role="group" aria-label="View">
  *       <button class="aparte-btn aparte-btn--primary aparte-btn--outline" aria-pressed="true">Chat</button>
@@ -1139,6 +1288,13 @@ aparte-conversation-list {
  */
 
 .aparte-btn {
+  /* The glyph reads this: an `<aparte-icon>` (or a raw `svg.aparte-icon`) inside a button
+     takes the button's icon size, per size modifier. */
+  --aparte-icon-size: var(--aparte-btn-icon-size);
+  /* The box, for EVERY button: `--icon` and `--circle` used to be the only readers of
+     the size, so a text button was padding plus line-height — 23px beside a 32px icon
+     button in the same row. The size is declared here and read below as a minimum. */
+  --aparte-btn-size: var(--aparte-btn-size-md);
   /* The intent, as a value. Every fill below reads THIS and nothing else, which is
      what keeps the two axes independent. */
   --aparte-btn-intent: var(--aparte-neutral);
@@ -1157,6 +1313,8 @@ aparte-conversation-list {
   --aparte-btn-intent-ink: var(--aparte-btn-intent);
 
   display: inline-flex;
+
+  vertical-align: middle;
   align-items: center;
   justify-content: center;
   gap: var(--aparte-btn-gap);
@@ -1167,6 +1325,7 @@ aparte-conversation-list {
      be set by the composer's own row rule, which is exactly the kind of thing a recipe
      should not need a caller for. */
   box-sizing: border-box;
+  min-block-size: var(--aparte-btn-size);
   padding: var(--aparte-btn-padding);
   border: var(--aparte-border-width) solid transparent;
   border-radius: var(--aparte-btn-radius);
@@ -1321,15 +1480,21 @@ aparte-conversation-list {
 .aparte-btn--soft:active:not(:disabled) { background: color-mix(in srgb, var(--aparte-btn-intent) 30%, transparent); }
 .aparte-btn--solid:active:not(:disabled) { background: var(--aparte-btn-intent); filter: brightness(0.93); }
 
+/* Drawn, not faded. Opacity on the whole button faded the glyph with its ground and
+   read at 2:1 on the send button; "inactive" and "disappearing" are not the same
+   message. A neutral ground, the muted ink, no intent — whatever the fill was. */
 .aparte-btn:disabled,
 .aparte-btn[aria-disabled='true'] {
   cursor: not-allowed;
-  opacity: var(--aparte-disabled-opacity);
+  background: var(--aparte-surface-2);
+  color: var(--aparte-text-muted);
+  border-color: transparent;
+  filter: none;
 }
 
 .aparte-btn:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-btn-intent);
-  outline-offset: var(--aparte-btn-focus-offset);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
 /* Toggled — a disclosure that is open, a toggle that is on, a tab that is current. */
@@ -1362,25 +1527,39 @@ aparte-conversation-list {
 .aparte-btn--block { display: flex; width: 100%; }
 
 .aparte-btn--sm { --aparte-btn-size: var(--aparte-btn-size-sm); --aparte-btn-icon-size: var(--aparte-icon-size-sm); font-size: var(--aparte-font-size-sm); padding: var(--aparte-btn-padding-sm); }
-.aparte-btn--lg { --aparte-btn-size: var(--aparte-btn-size-lg); --aparte-btn-icon-size: var(--aparte-icon-size-xl); font-size: var(--aparte-font-size-lg); padding: var(--aparte-btn-padding-lg); }
+.aparte-btn--lg { --aparte-btn-size: var(--aparte-btn-size-lg); --aparte-btn-icon-size: var(--aparte-icon-size-xl); font-size: var(--aparte-font-size-base); padding: var(--aparte-btn-padding-lg); }
+.aparte-btn--xl { --aparte-btn-size: var(--aparte-btn-size-xl); --aparte-btn-icon-size: var(--aparte-icon-size-xl); font-size: var(--aparte-font-size-base); padding: var(--aparte-btn-padding-lg); }
 .aparte-btn--sm.aparte-btn--icon,
 .aparte-btn--sm.aparte-btn--circle,
 .aparte-btn--lg.aparte-btn--icon,
-.aparte-btn--lg.aparte-btn--circle { padding: 0; }
+.aparte-btn--lg.aparte-btn--circle,
+.aparte-btn--xl.aparte-btn--icon,
+.aparte-btn--xl.aparte-btn--circle { padding: 0; }
 
 /* An icon inside a button never takes the pointer: the click belongs to the button,
-   and an SVG target makes `event.target` lie to a delegated listener. It is sized with
-   the button so the two axes stay in step. */
+   and an SVG target makes `event.target` lie to a delegated listener. */
 .aparte-btn > svg,
+.aparte-btn > aparte-icon,
 .aparte-btn > .aparte-btn__icon {
   pointer-events: none;
   flex-shrink: 0;
+}
+
+/* A raw SVG or a consumer's own icon box is sized with the button so the two axes stay
+   in step. An `<aparte-icon>` is NOT sized here: it renders its `<svg>` inside itself, a
+   grandchild this child combinator never reached, so the documented markup kept the
+   glyph at its loose 14px default in a button that asked for 16. The recipe feeds the
+   icon's own knob instead — `--aparte-icon-size`, declared on `.aparte-btn` above — and
+   `display/icon.css` draws it, at `--sm`'s 12 and `--lg`'s 20 like everything else. */
+.aparte-btn > svg:not(.aparte-icon),
+.aparte-btn > .aparte-btn__icon {
   width: var(--aparte-btn-icon-size);
   height: var(--aparte-btn-icon-size);
 }
 
 /* ── Group — buttons that read as one control. ───────────────────────────────── */
-.aparte-btn-group { display: inline-flex; }
+.aparte-btn-group { display: inline-flex;
+ vertical-align: middle; }
 .aparte-btn-group > .aparte-btn { border-radius: 0; }
 /* Logical properties, so the joined edge follows the writing direction instead of
    assuming left-to-right. */
@@ -1464,24 +1643,24 @@ aparte-conversation-list {
 /* ── The shared text-entry recipe ────────────────────────────────────────────── */
 
 .aparte-field {
-  /* Padding recipe, declared here: nothing in the shared token file defines a field
-     padding yet, so this file owns its own default and size variants. */
-  --aparte-field-padding: var(--aparte-space-2) var(--aparte-space-3);
-  /* Same reason, and a gap the recipe had: every other recipe names its own radius
-     (`--aparte-btn-radius`, `--aparte-tag-radius`, `--aparte-field-choice-radius`) and
-     this one hardcoded the scale step, so a field could not be re-cornered from its
-     own element the way every sibling can. */
-  --aparte-field-radius: var(--aparte-radius-md);
-
+  /* Every knob this family reads lives in `theme.css` on `:root` — including the
+     radius and the paddings, which used to be declared right here. That was the one
+     construction bug of the kit: `.aparte-field-group` is this element's PARENT and
+     `.aparte-color` a sibling recipe, both read `--aparte-field-radius`, and a custom
+     property declared here is invisible to both, so they computed `border-radius: 0`
+     and every field group in the library rendered square. */
   box-sizing: border-box;
   display: block;
   width: 100%;
+  /* A resting height from the control scale, so a field and the button beside it stop
+     disagreeing by 6px; the size modifiers move it a step either way. */
+  min-block-size: var(--aparte-field-size);
   font: inherit;
-  font-size: var(--aparte-font-size-sm);
+  font-size: var(--aparte-font-size-md);
   line-height: var(--aparte-line-height-normal);
   color: var(--aparte-text);
   background: var(--aparte-surface-1);
-  border: var(--aparte-border-width) solid var(--aparte-border);
+  border: var(--aparte-border-width) solid var(--aparte-border-control);
   border-radius: var(--aparte-field-radius);
   padding: var(--aparte-field-padding);
   transition:
@@ -1516,10 +1695,13 @@ aparte-conversation-list {
   border-color: var(--aparte-border-focus);
 }
 
+/* Drawn, not faded: the muted ink on the quieter ground, and the edge back to the region
+   colour. Opacity faded the text with its box and read under 3:1. */
 .aparte-field:disabled {
   cursor: not-allowed;
-  opacity: var(--aparte-disabled-opacity);
   background: var(--aparte-surface-2);
+  color: var(--aparte-text-muted);
+  border-color: var(--aparte-border);
 }
 
 .aparte-field[readonly] {
@@ -1533,37 +1715,35 @@ aparte-conversation-list {
   border-color: var(--aparte-error);
 }
 
+/* The one ring (see --aparte-focus-outline-offset in theme.css): an outline outside the
+   box, and the border left alone — a highlighted border under an offset ring read as two
+   concentric lines. An invalid field's ring takes the error colour. */
 .aparte-field:focus-visible {
-  outline: none;
-  border-color: var(--aparte-border-focus);
-  box-shadow: var(--aparte-focus-ring);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
 .aparte-field[aria-invalid='true']:focus-visible {
-  border-color: var(--aparte-error);
-  box-shadow: var(--aparte-field-error-ring);
+  outline-color: var(--aparte-error-solid);
 }
 
 /* ── Sizes ───────────────────────────────────────────────────────────────────── */
 
 .aparte-field--sm {
-  --aparte-field-padding-sm: var(--aparte-space-1) var(--aparte-space-2);
-
+  --aparte-field-size: var(--aparte-field-size-sm);
   padding: var(--aparte-field-padding-sm);
-  font-size: var(--aparte-font-size-xs);
+  font-size: var(--aparte-font-size-sm);
 }
 
 .aparte-field--lg {
-  --aparte-field-padding-lg: var(--aparte-space-3) var(--aparte-space-4);
-
+  --aparte-field-size: var(--aparte-field-size-lg);
   padding: var(--aparte-field-padding-lg);
-  font-size: var(--aparte-font-size-md);
+  font-size: var(--aparte-font-size-base);
 }
 
 /* ── Textarea ────────────────────────────────────────────────────────────────── */
 
 .aparte-field--textarea {
-  --aparte-field-textarea-min-height: 80px;
 
   display: block;
   min-block-size: var(--aparte-field-textarea-min-height);
@@ -1578,7 +1758,7 @@ aparte-conversation-list {
   display: flex;
   align-items: stretch;
   background: var(--aparte-surface-1);
-  border: var(--aparte-border-width) solid var(--aparte-border);
+  border: var(--aparte-border-width) solid var(--aparte-border-control);
   border-radius: var(--aparte-field-radius);
   /* The addons' ground follows the group's corners; the focus ring is a shadow on the
      group itself, outside this box, so it is not clipped. */
@@ -1600,8 +1780,15 @@ aparte-conversation-list {
   border-radius: 0;
 }
 
+/* The GROUP draws the ring (below): the field inside it draws none. */
 .aparte-field-group > .aparte-field:focus-visible {
-  box-shadow: none;
+  outline: none;
+}
+
+/* A button in the group is as tall as the field it sits beside — the one row where the
+   two recipes meet, and the one where a 4px difference shows. */
+.aparte-field-group > .aparte-btn {
+  --aparte-btn-size: var(--aparte-field-size);
 }
 
 /* An addon has a ground of its own and a rule against the field: on the field's own
@@ -1628,8 +1815,8 @@ aparte-conversation-list {
 }
 
 .aparte-field-group:focus-within {
-  border-color: var(--aparte-border-focus);
-  box-shadow: var(--aparte-focus-ring);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
 /* `aria-invalid` lives on the field itself, not the wrapper the app didn't write a
@@ -1640,7 +1827,7 @@ aparte-conversation-list {
 }
 
 .aparte-field-group:has(.aparte-field[aria-invalid='true']):focus-within {
-  box-shadow: var(--aparte-field-error-ring);
+  outline-color: var(--aparte-error-solid);
 }
 
 /* ── Checkbox ────────────────────────────────────────────────────────────────── */
@@ -1664,7 +1851,6 @@ aparte-conversation-list {
   --aparte-derived-ink: var(--aparte-on-intent);
   /* No shared control-size token covers a checkbox yet (the button's own sizes are
      button-specific), so its box is declared here. */
-  --aparte-checkbox-size: 18px;
 
   box-sizing: border-box;
   appearance: none;
@@ -1675,7 +1861,7 @@ aparte-conversation-list {
   place-content: center;
   width: var(--aparte-checkbox-size);
   height: var(--aparte-checkbox-size);
-  border: var(--aparte-border-width) solid var(--aparte-border);
+  border: var(--aparte-border-width) solid var(--aparte-border-control);
   border-radius: var(--aparte-radius-sm);
   background: var(--aparte-surface-1);
   cursor: pointer;
@@ -1760,7 +1946,7 @@ aparte-conversation-list {
 }
 
 .aparte-checkbox:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-checkbox-intent);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
@@ -1790,8 +1976,6 @@ aparte-conversation-list {
      used. `middle` and not `text-bottom`: the label may wrap. */
   vertical-align: middle;
   --aparte-radio-intent: var(--aparte-primary);
-  --aparte-radio-size: 18px;
-  --aparte-radio-dot-size: 8px;
 
   box-sizing: border-box;
   appearance: none;
@@ -1802,7 +1986,7 @@ aparte-conversation-list {
   place-content: center;
   width: var(--aparte-radio-size);
   height: var(--aparte-radio-size);
-  border: var(--aparte-border-width) solid var(--aparte-border);
+  border: var(--aparte-border-width) solid var(--aparte-border-control);
   border-radius: var(--aparte-radius-full);
   background: var(--aparte-surface-1);
   cursor: pointer;
@@ -1844,7 +2028,7 @@ aparte-conversation-list {
 }
 
 .aparte-radio:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-radio-intent);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
@@ -1875,9 +2059,6 @@ aparte-conversation-list {
      has to live here where `:checked` can override it — a central default could never
      react to the class + state combo. */
   --aparte-switch-track: var(--aparte-surface-3);
-  --aparte-switch-width: 40px;
-  --aparte-switch-height: 22px;
-  --aparte-switch-thumb-inset: 2px;
   /* DERIVED from the track, not a fourth literal to keep in step with the other three:
      the thumb used to be 16px in a 20px track with a 1px border and a 2px top inset —
      2px of air above it and none below, visibly low ("le cercle pas centré"). The
@@ -1896,7 +2077,7 @@ aparte-conversation-list {
   flex-shrink: 0;
   inline-size: var(--aparte-switch-width);
   block-size: var(--aparte-switch-height);
-  border: var(--aparte-border-width) solid var(--aparte-border);
+  border: var(--aparte-border-width) solid var(--aparte-border-control);
   border-radius: var(--aparte-radius-full);
   background: var(--aparte-switch-track);
   cursor: pointer;
@@ -1944,7 +2125,7 @@ aparte-conversation-list {
 }
 
 .aparte-switch:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-switch-intent);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
@@ -1968,8 +2149,6 @@ aparte-conversation-list {
 
 .aparte-range {
   --aparte-range-intent: var(--aparte-primary);
-  --aparte-range-thumb-size: 16px;
-  --aparte-range-track-height: 4px;
 
   appearance: none;
   -webkit-appearance: none;
@@ -2039,11 +2218,11 @@ aparte-conversation-list {
 .aparte-range:active::-moz-range-thumb { transform: scale(1.15); }
 
 .aparte-range:focus-visible::-webkit-slider-thumb {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-range-intent);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 .aparte-range:focus-visible::-moz-range-thumb {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-range-intent);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
@@ -2064,6 +2243,7 @@ aparte-conversation-list {
 
 .aparte-field-label {
   display: inline-block;
+  vertical-align: middle;
   margin-block-end: var(--aparte-space-1);
   font-size: var(--aparte-font-size-sm);
   font-weight: var(--aparte-font-weight-medium);
@@ -2151,7 +2331,7 @@ aparte-conversation-list {
   inline-size: var(--aparte-color-size);
   block-size: var(--aparte-color-size);
   padding: 0;
-  border: var(--aparte-border-width) solid var(--aparte-border);
+  border: var(--aparte-border-width) solid var(--aparte-border-control);
   border-radius: var(--aparte-field-radius);
   background: none;
   cursor: pointer;
@@ -2161,7 +2341,7 @@ aparte-conversation-list {
 .aparte-color::-moz-color-swatch { border: none; border-radius: var(--aparte-radius-sm); }
 .aparte-color:focus-visible {
   outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
-  outline-offset: var(--aparte-btn-focus-offset);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 .aparte-color:disabled { cursor: not-allowed; opacity: var(--aparte-disabled-opacity); }
 
@@ -2217,6 +2397,7 @@ aparte-conversation-list {
    would invite a click. */
 .aparte-output {
   display: inline-block;
+  vertical-align: middle;
   padding: var(--aparte-output-padding);
   border-radius: var(--aparte-radius-sm);
   background: var(--aparte-output-bg);
@@ -2299,19 +2480,22 @@ aparte-conversation-list {
 }
 .aparte-field-choice:has(:focus-visible) {
   outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
-  outline-offset: var(--aparte-btn-focus-offset);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
 .aparte-field-choice__body { flex: 1 1 auto; min-width: 0; }
 /* =========================================
    aparte-avatar — sizes, shape, image + initials fallback
    =========================================
-   --aparte-avatar-size, --aparte-avatar-radius and --aparte-avatar-font-size are
-   NOT invented here: they already exist centrally for the message avatar
-   (bubble.css), and this component deliberately reads the same three rather than
-   declare its own — a generic avatar and a chat-message avatar are the same
-   object, and a size or shape modifier applied here resizes a role-coloured
-   message avatar too, for free, instead of only a second, disconnected one.
+   `--aparte-avatar-size` is NOT invented here: it already exists centrally for the
+   message avatar (bubble.css), and this component reads the same one — a generic
+   avatar and a chat-message avatar are the same object, and a size modifier applied
+   here resizes a role-coloured message avatar too. The corner, the initials and the
+   group's overlap are FRACTIONS of that size (`--aparte-avatar-radius-ratio`,
+   `--aparte-avatar-initials-ratio`, `--aparte-avatar-overlap-ratio`), computed on the
+   element so a size modifier moves them: as absolute tokens the 40px avatar drew the
+   same 11px initials as the 32px one, the corner drifted from squircle to square up
+   the ramp, and a 6px overlap was a fifth of a small avatar and a tenth of a large one.
 
        <span class="aparte-avatar aparte-avatar--sm">AP</span>
        <span class="aparte-avatar">JD</span>
@@ -2326,16 +2510,17 @@ aparte-conversation-list {
 .aparte-avatar {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   width: var(--aparte-avatar-size);
   height: var(--aparte-avatar-size);
-  border-radius: var(--aparte-avatar-radius);
+  border-radius: calc(var(--aparte-avatar-size) * var(--aparte-avatar-radius-ratio));
   background: var(--aparte-avatar-fallback-bg);
   color: var(--aparte-avatar-fallback-color);
-  font-size: var(--aparte-avatar-font-size);
+  font-size: calc(var(--aparte-avatar-size) * var(--aparte-avatar-initials-ratio));
   font-weight: var(--aparte-font-weight-semibold);
   line-height: var(--aparte-line-height-none);
   text-transform: uppercase;
@@ -2359,13 +2544,13 @@ aparte-conversation-list {
 
 /* Square is the default shape and needs no class (it is what the message avatar
    already renders); named anyway so a square avatar can say so rather than omit. */
-.aparte-avatar--square { border-radius: var(--aparte-avatar-radius); }
+.aparte-avatar--square { border-radius: calc(var(--aparte-avatar-size) * var(--aparte-avatar-radius-ratio)); }
 .aparte-avatar--circle { border-radius: var(--aparte-radius-full); }
 
-.aparte-avatar--xs { --aparte-avatar-size: var(--aparte-avatar-size-xs); --aparte-avatar-font-size: var(--aparte-font-size-2xs); }
-.aparte-avatar--sm { --aparte-avatar-size: var(--aparte-avatar-size-sm); --aparte-avatar-font-size: var(--aparte-font-size-xs); }
-.aparte-avatar--lg { --aparte-avatar-size: var(--aparte-avatar-size-lg); --aparte-avatar-font-size: var(--aparte-font-size-lg); }
-.aparte-avatar--xl { --aparte-avatar-size: var(--aparte-avatar-size-xl); --aparte-avatar-font-size: var(--aparte-font-size-lg); }
+.aparte-avatar--xs { --aparte-avatar-size: var(--aparte-avatar-size-xs); }
+.aparte-avatar--sm { --aparte-avatar-size: var(--aparte-avatar-size-sm); }
+.aparte-avatar--lg { --aparte-avatar-size: var(--aparte-avatar-size-lg); }
+.aparte-avatar--xl { --aparte-avatar-size: var(--aparte-avatar-size-xl); }
 
 /* ── Group — a fan of avatars that read as one party. ─────────────────────────
    No z-index is set: later siblings simply paint over earlier ones in normal
@@ -2373,13 +2558,14 @@ aparte-conversation-list {
    the one thing z-index would otherwise be needed for. */
 .aparte-avatar-group {
   display: inline-flex;
+  vertical-align: middle;
   align-items: center;
 }
 .aparte-avatar-group > .aparte-avatar {
   box-shadow: 0 0 0 var(--aparte-avatar-group-ring-width) var(--aparte-avatar-group-ring-color);
 }
 .aparte-avatar-group > .aparte-avatar:not(:first-child) {
-  margin-inline-start: calc(var(--aparte-avatar-group-overlap) * -1);
+  margin-inline-start: calc(var(--aparte-avatar-size) * var(--aparte-avatar-overlap-ratio) * -1);
 }
 .aparte-avatar-group > .aparte-avatar:hover {
   z-index: var(--aparte-z-raised);
@@ -2498,6 +2684,8 @@ aparte-icon {
   --aparte-derived-ink: var(--aparte-on-intent);
 
   display: inline-flex;
+
+  vertical-align: middle;
   align-items: center;
   justify-content: center;
   gap: var(--aparte-badge-gap);
@@ -2595,6 +2783,7 @@ aparte-icon {
 .aparte-tag {
   box-sizing: border-box;
   display: inline-flex;
+  vertical-align: middle;
   align-items: center;
   gap: var(--aparte-tag-gap);
   max-width: 100%;
@@ -2657,8 +2846,8 @@ aparte-icon {
  *     <span class="aparte-thumbnail aparte-thumbnail--lg"><img class="aparte-thumbnail__image"
  *           src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 3'%3E%3Crect width='2' height='3' fill='%23b07d33'/%3E%3C/svg%3E"
  *           alt="A screenshot"></span>
- *     <span class="aparte-thumbnail"><span class="aparte-thumbnail__ext">PDF</span></span>
- *     <span class="aparte-thumbnail aparte-thumbnail--sm"><span class="aparte-thumbnail__ext">MD</span></span>
+ *     <span class="aparte-thumbnail"><span class="aparte-thumbnail__label">PDF</span></span>
+ *     <span class="aparte-thumbnail aparte-thumbnail--sm"><span class="aparte-thumbnail__label">MD</span></span>
  *
  * Distinct from `.aparte-avatar`, which is the same shape for a different reason: an
  * avatar stands for a PERSON and falls back to initials, so it carries type styling and
@@ -2758,21 +2947,30 @@ aparte-icon {
   --aparte-thumbnail-border: var(--aparte-attachment-chip-border);
 }
 
-/* Only an image tile the app declared it can preview is a button — see
-   aparteGlobalConfig.setHostHandlers(). Undeclared, it is a picture, not a control. */
-.aparte-thumb--image[role='button'] {
+/* Only an image the app declared it can preview is a button — see
+   aparteGlobalConfig.setHostHandlers(). Undeclared, it is a picture, not a control.
+
+   Two selectors because the two strips carry the role in two places, and both are
+   right. The sent-message strip has no ✕, so its TILE is the whole control. The
+   composer's tile wraps the remove button, so the control there is the IMAGE — a
+   button inside a button is what the role on the tile used to make. */
+.aparte-thumb--image[role='button'],
+.aparte-thumbnail__image[role='button'] {
   cursor: pointer;
 }
 
 .aparte-thumb--image[role='button']:focus-visible {
-  box-shadow: var(--aparte-focus-ring);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
-.aparte-thumb__img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
+/* Inset, unlike the tile's. The image fills the tile edge to edge and the tile is the
+   frame (`overflow: hidden` above), so an outline drawn outward is cropped away — the
+   focus ring would simply not exist. Pulled in by its own width, it lands just inside
+   the border and stays whole. */
+.aparte-thumbnail__image[role='button']:focus-visible {
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: calc(-1 * var(--aparte-focus-outline-width));
 }
 
 .aparte-thumb--file {
@@ -2781,13 +2979,6 @@ aparte-icon {
   justify-content: center;
 }
 
-.aparte-thumb__ext {
-  font-size: var(--aparte-font-size-xs);
-  font-weight: var(--aparte-font-weight-bold);
-  letter-spacing: 0.03em;
-  color: var(--aparte-text-muted);
-}
-
 .aparte-thumb__name {
   position: absolute;
   left: 0;
@@ -2818,9 +3009,13 @@ aparte-icon {
    */
 
 .aparte-spinner {
-
   display: inline-block;
+  vertical-align: middle;
   flex-shrink: 0;
+  /* The token is the ring's outer size, border included: without this the ring painted
+     16/20/28 for tokens of 12/16/24 (the 2px stroke added on each side), and painted
+     the token's value only on a host page with its own border-box reset. */
+  box-sizing: border-box;
   width: var(--aparte-spinner-size);
   height: var(--aparte-spinner-size);
   border: var(--aparte-spinner-thickness) solid currentColor;
@@ -2835,6 +3030,15 @@ aparte-icon {
 
 .aparte-spinner--sm { --aparte-spinner-size: var(--aparte-spinner-size-sm); }
 .aparte-spinner--lg { --aparte-spinner-size: var(--aparte-spinner-size-lg); }
+
+/* Under reduced motion the loop stops outright. The duration tokens are reset to
+   0.01ms in responsive.css, but that leaves `infinite` in place: a 0.01ms cycle
+   is not stillness, it is a flicker. The descendant sweep there does not reach a
+   recipe used outside aparté's own elements, so each looping recipe stops itself,
+   the way display/icon.css already does. */
+@media (prefers-reduced-motion: reduce) {
+  .aparte-spinner { animation: none; }
+}
 /* =========================================
    aparte-progress — determinate bar + indeterminate variant
    =========================================
@@ -2859,7 +3063,9 @@ aparte-icon {
   width: 100%;
   height: var(--aparte-progress-height);
   border-radius: var(--aparte-radius-full);
-  background: var(--aparte-surface-3);
+  /* The track: a reference the value is read against, so it has to be seen. A surface
+     level put it at 1.06:1 in light and 1.20:1 in dark — one token, two distances. */
+  background: var(--aparte-track);
 }
 
 .aparte-progress__bar {
@@ -2877,6 +3083,21 @@ aparte-icon {
   animation: aparte-progress-slide var(--aparte-duration-pulse) var(--aparte-ease) infinite;
 }
 
+/* Under reduced motion the loop stops outright. The duration tokens are reset to
+   0.01ms in responsive.css, but that leaves `infinite` in place: a 0.01ms cycle
+   is not stillness, it is a flicker. The descendant sweep there does not reach a
+   recipe used outside aparté's own elements, so each looping recipe stops itself,
+   the way display/icon.css already does.
+   Stopped, the sliding segment would sit at one spot and read as a value; the whole
+   track filled says "busy" without naming an amount. */
+@media (prefers-reduced-motion: reduce) {
+  .aparte-progress--indeterminate .aparte-progress__bar {
+    animation: none;
+    width: 100%;
+    inset-inline-start: 0;
+  }
+}
+
 /* inset-inline-start, not transform: translateX — a transform has no logical
    axis, so an RTL page would slide the indeterminate segment backwards. Animating
    a logical inset instead makes the sweep follow reading direction automatically. */
@@ -2909,10 +3130,15 @@ aparte-icon {
          <div>
            <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
            <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
-           <span class="aparte-skeleton aparte-skeleton--text" aria-hidden="true"></span>
+           <span class="aparte-skeleton aparte-skeleton--text" style="max-inline-size: 60%" aria-hidden="true"></span>
          </div>
-         <span class="aparte-skeleton aparte-skeleton--rect" style="grid-column: 1 / -1; block-size: 64px" aria-hidden="true"></span>
+         <span class="aparte-skeleton aparte-skeleton--rect" style="grid-column: 2" aria-hidden="true"></span>
        </div>
+
+   The last line is shorter because the last line of a paragraph is, and the block sits
+   in the text column, under the lines it stands for — not across the avatar's. The
+   rect's height is the family's token (`--aparte-skeleton-rect-height`), not an inline
+   value that contradicts it.
    */
 
 .aparte-skeleton {
@@ -2929,6 +3155,19 @@ aparte-icon {
   animation: aparte-skeleton-shimmer var(--aparte-duration-pulse) linear infinite;
 }
 
+/* Under reduced motion the loop stops outright. The duration tokens are reset to
+   0.01ms in responsive.css, but that leaves `infinite` in place: a 0.01ms cycle
+   is not stillness, it is a flicker. The descendant sweep there does not reach a
+   recipe used outside aparté's own elements, so each looping recipe stops itself,
+   the way display/icon.css already does.
+   The shine goes with the shimmer: a stopped gradient would sit as a pale band. */
+@media (prefers-reduced-motion: reduce) {
+  .aparte-skeleton {
+    animation: none;
+    background-image: none;
+  }
+}
+
 .aparte-skeleton--text {
   width: 100%;
   height: var(--aparte-skeleton-text-height);
@@ -2936,7 +3175,7 @@ aparte-icon {
 }
 .aparte-skeleton--text + .aparte-skeleton--text { margin-block-start: var(--aparte-skeleton-text-gap); }
 /* The ragged last line reads as "text", where a full-width block reads as a bar. */
-.aparte-skeleton--text:last-child { width: var(--aparte-skeleton-text-last-width); }
+.aparte-skeleton--text:last-child:not(:first-child) { width: var(--aparte-skeleton-text-last-width); }
 
 .aparte-skeleton--circle {
   width: var(--aparte-skeleton-circle-size);
@@ -3024,6 +3263,7 @@ aparte-icon {
          <button class="aparte-alert__dismiss" aria-label="Dismiss"><aparte-icon name="close"></aparte-icon></button>
        </div>
        <div class="aparte-alert aparte-alert--danger" role="alert">
+         <span class="aparte-alert__icon"><aparte-icon name="alertTriangle"></aparte-icon></span>
          <div class="aparte-alert__body">
            <p class="aparte-alert__message">The request was refused: no API key is set.</p>
          </div>
@@ -3114,7 +3354,7 @@ aparte-icon {
 }
 .aparte-alert__dismiss:active:not(:disabled) { filter: brightness(0.93); }
 .aparte-alert__dismiss:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-alert-intent);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 .aparte-alert__dismiss:disabled { opacity: var(--aparte-disabled-opacity); cursor: not-allowed; pointer-events: none; }
@@ -3153,6 +3393,12 @@ aparte-icon {
   padding: var(--aparte-card-body-padding);
 }
 
+/* The body owns its edges: a paragraph's block margins fold into the padding instead of
+   stacking on it. The sheet's own example puts a <p> here, and the body band measured
+   twice the height of the header and footer beside it. */
+.aparte-card__body > :first-child { margin-block-start: 0; }
+.aparte-card__body > :last-child { margin-block-end: 0; }
+
 .aparte-card__footer {
   display: flex;
   align-items: center;
@@ -3291,11 +3537,12 @@ aparte-icon {
  * script the caller owns: a <details open> toggling itself, a positioning library placing
  * a menu next to its trigger. Nothing here reaches for position:fixed on your behalf.
  *
- *     <div class="aparte-tabs" role="tablist">
- *       <button class="aparte-tabs__tab" role="tab" aria-selected="true">Preview</button>
- *       <button class="aparte-tabs__tab" role="tab" aria-selected="false">Code</button>
+ *     <div class="aparte-tabs" role="tablist" aria-label="Result view">
+ *       <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-a-preview" aria-controls="tabs-a-preview-panel" aria-selected="true" tabindex="0">Preview</button>
+ *       <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-a-code" aria-controls="tabs-a-code-panel" aria-selected="false" tabindex="-1">Code</button>
  *     </div>
- *     <div class="aparte-tabs__panel" role="tabpanel">The panel for the selected tab.</div>
+ *     <div class="aparte-tabs__panel" role="tabpanel" id="tabs-a-preview-panel" aria-labelledby="tabs-a-preview">The panel for the selected tab.</div>
+ *     <div class="aparte-tabs__panel" role="tabpanel" id="tabs-a-code-panel" aria-labelledby="tabs-a-code" hidden>The panel the other tab opens.</div>
  *
  *     <div class="aparte-accordion">
  *       <details class="aparte-accordion__item" open>
@@ -3342,17 +3589,29 @@ aparte-icon {
    the current tab, which reads as a control rather than as navigation. Neither moves
    anything: `aria-selected` is what says which tab is current, and the app owns it.
 
-       <div class="aparte-tabs aparte-tabs--underline" role="tablist">
-         <button class="aparte-tabs__tab" role="tab" aria-selected="true">Preview</button>
-         <button class="aparte-tabs__tab" role="tab" aria-selected="false">Code</button>
+   The markup below is the whole contract of the role, and all of it is yours to write:
+   ONE tab stop for the list (`tabindex="0"` on the selected tab, `-1` on the rest),
+   `aria-controls` from each tab to its `role="tabpanel"`, and `aria-labelledby` back.
+   The app also owns the ArrowLeft/ArrowRight/Home/End handler that moves the selection
+   and the stop together — `@aparte/plugin-artifacts`' card has a working one to copy.
+   A tablist without those is louder than plain buttons and says less: every tab a tab
+   stop, and none of them naming what it opens.
+
+       <div class="aparte-tabs aparte-tabs--underline" role="tablist" aria-label="Result view">
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-u-preview" aria-controls="tabs-u-preview-panel" aria-selected="true" tabindex="0">Preview</button>
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-u-code" aria-controls="tabs-u-code-panel" aria-selected="false" tabindex="-1">Code</button>
        </div>
-       <div class="aparte-tabs__panel" role="tabpanel">What the selected tab shows.</div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-u-preview-panel" aria-labelledby="tabs-u-preview">What the selected tab shows.</div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-u-code-panel" aria-labelledby="tabs-u-code" hidden>What the other tab shows.</div>
 
-       <div class="aparte-tabs aparte-tabs--segmented" role="tablist">
-         <button class="aparte-tabs__tab" role="tab" aria-selected="true">Light</button>
-         <button class="aparte-tabs__tab" role="tab" aria-selected="false">Dark</button>
-         <button class="aparte-tabs__tab" role="tab" aria-selected="false">System</button>
+       <div class="aparte-tabs aparte-tabs--segmented" role="tablist" aria-label="Theme">
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-light" aria-controls="tabs-s-light-panel" aria-selected="true" tabindex="0">Light</button>
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-dark" aria-controls="tabs-s-dark-panel" aria-selected="false" tabindex="-1">Dark</button>
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-system" aria-controls="tabs-s-system-panel" aria-selected="false" tabindex="-1">System</button>
        </div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-light-panel" aria-labelledby="tabs-s-light">The light theme's settings.</div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-dark-panel" aria-labelledby="tabs-s-dark" hidden>The dark theme's settings.</div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-system-panel" aria-labelledby="tabs-s-system" hidden>Whatever the system asks for.</div>
    ========================================= */
 
 .aparte-tabs {
@@ -3427,7 +3686,7 @@ aparte-icon {
 }
 
 .aparte-tabs__tab:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
@@ -3444,10 +3703,13 @@ aparte-icon {
 
 .aparte-tabs__panel {
   padding-block: var(--aparte-space-6);
+  /* The tab's own inline inset, so the panel's text starts under the label of the tab
+     that opened it rather than 11px to its left. */
+  padding-inline: var(--aparte-space-5);
 }
 
 .aparte-tabs__panel:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
@@ -3471,6 +3733,9 @@ aparte-icon {
    its own raised chip, rather than an underline beneath a plain row. Same markup,
    same states; only the container and the active tab's fill change. */
 .aparte-tabs--segmented {
+  /* A control, not a bar: the track hugs its segments. As a block-level flex row it
+     inherited its container's width — 1207px of track for 160px of chips at 1280. */
+  display: inline-flex;
   gap: 0;
   padding: var(--aparte-space-1);
   background: var(--aparte-surface-2);
@@ -3490,6 +3755,11 @@ aparte-icon {
 .aparte-tabs--segmented .aparte-tabs__tab[aria-selected='true'] {
   background: var(--aparte-surface-1);
   color: var(--aparte-text);
+  /* Raised RELATIVE to the track, not an absolute surface level: surface-1 over
+     surface-2 read as raised in light and as sunken in dark, the same rule inverting
+     its elevation with the theme. A 1px ring in the border colour says "on top" on
+     either ground. */
+  box-shadow: 0 0 0 var(--aparte-border-width) var(--aparte-border);
 }
 /* =========================================
    aparte-accordion — stacked disclosures
@@ -3506,7 +3776,21 @@ aparte-icon {
              Shipping
              <aparte-icon name="expand"></aparte-icon>
            </summary>
-           <div class="aparte-accordion__panel">Free above 50 €.</div>
+           <div class="aparte-accordion__panel">Free above 50 €, otherwise 4,90 €. Two to four working days.</div>
+         </details>
+         <details class="aparte-accordion__item">
+           <summary class="aparte-accordion__header">
+             Returns
+             <aparte-icon name="expand"></aparte-icon>
+           </summary>
+           <div class="aparte-accordion__panel">Thirty days, in the original packaging.</div>
+         </details>
+         <details class="aparte-accordion__item">
+           <summary class="aparte-accordion__header">
+             Payment
+             <aparte-icon name="expand"></aparte-icon>
+           </summary>
+           <div class="aparte-accordion__panel">Card, PayPal, or an invoice for a company account.</div>
          </details>
        </div>
 
@@ -3574,7 +3858,7 @@ aparte-icon {
 }
 
 .aparte-accordion__header:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
@@ -3584,13 +3868,22 @@ aparte-icon {
   opacity: var(--aparte-disabled-opacity);
 }
 
-.aparte-accordion__icon {
+/* Two spellings for the chevron, because the header's documented markup is a bare
+   `<aparte-icon>` and a renderer that wraps a raw glyph needs a class to hang it on:
+   the wrapper `.aparte-accordion__icon` (the thinking block), or an `<aparte-icon>` /
+   `svg.aparte-icon` sitting directly in the header. Both are sized and both turn — the
+   documented form used to match neither rule, so the kit's own example showed an open
+   panel under a chevron still pointing down. */
+.aparte-accordion__icon,
+.aparte-accordion__header > aparte-icon,
+.aparte-accordion__header > .aparte-icon {
+  display: inline-flex;
   flex-shrink: 0;
-  /* Sized off the same step the button recipe already uses for an icon glyph
-     (`--aparte-btn-icon-size: var(--aparte-space-8)`), so a disclosure chevron
-     reads as the same weight of icon as everywhere else in the library. */
-  width: var(--aparte-space-8);
-  height: var(--aparte-space-8);
+  /* Fed to the glyph through its own knob, not drawn as a width/height: the icon
+     recipe reads `--aparte-icon-size`, and a box declared here around it would leave
+     the glyph at its loose default. The step is the one the button recipe uses for an
+     icon glyph, so a disclosure chevron reads as the same weight of icon everywhere. */
+  --aparte-icon-size: var(--aparte-space-8);
   color: var(--aparte-text-muted);
   transition: transform var(--aparte-duration-slow) var(--aparte-ease);
 }
@@ -3599,7 +3892,11 @@ aparte-icon {
    puts aria-expanded on the header itself; native <details> puts `open` on the
    ancestor and gives the browser no attribute to select on at all. */
 .aparte-accordion__header[aria-expanded='true'] .aparte-accordion__icon,
-details[open] > .aparte-accordion__header .aparte-accordion__icon {
+.aparte-accordion__header[aria-expanded='true'] > aparte-icon,
+.aparte-accordion__header[aria-expanded='true'] > .aparte-icon,
+details[open] > .aparte-accordion__header .aparte-accordion__icon,
+details[open] > .aparte-accordion__header > aparte-icon,
+details[open] > .aparte-accordion__header > .aparte-icon {
   transform: rotate(180deg);
 }
 
@@ -3673,10 +3970,13 @@ details[open] > .aparte-accordion__header .aparte-accordion__icon {
   width: max-content;
   min-width: var(--aparte-menu-min-width);
   max-width: var(--aparte-menu-max-width);
+  /* The two caps are the box's outer width, padding and border included — same rule
+     as the popover, for the same reason. */
+  box-sizing: border-box;
   padding: var(--aparte-space-2);
   background: var(--aparte-surface-1);
   border: var(--aparte-border-width) solid var(--aparte-border);
-  border-radius: var(--aparte-radius-lg);
+  border-radius: var(--aparte-radius-menu);
   box-shadow: var(--aparte-menu-shadow);
   color: var(--aparte-text);
   z-index: var(--aparte-z-dropdown);
@@ -3722,7 +4022,7 @@ details[open] > .aparte-accordion__header .aparte-accordion__icon {
 }
 
 .aparte-menu__item:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
@@ -3735,14 +4035,14 @@ details[open] > .aparte-accordion__header .aparte-accordion__icon {
   pointer-events: none;
 }
 
-/* The check mark for menuitemcheckbox / menuitemradio. Reserved as an invisible
-   glyph on every checkable item (matched by the presence of aria-checked, true or
-   false) so labels in a mixed checked/unchecked list stay aligned to one gutter;
-   a plain role="menuitem" without aria-checked gets no gutter at all. Text colour
-   rather than a fill or a box-shadow is deliberate: a glyph inherits `color`,
-   which forced-colors mode preserves, so the checked state survives that mode
-   with no separate override. */
-.aparte-menu__item[aria-checked]::before {
+/* The check mark for menuitemcheckbox / menuitemradio. The gutter is reserved on EVERY
+   item of a panel that holds a checkable one — as an invisible glyph — so all the
+   labels of that panel share one edge. It used to be reserved per checkable item, and
+   a plain role="menuitem" beside a checkable one started 16px further left: two label
+   edges in one menu. Text colour rather than a fill or a box-shadow is deliberate: a
+   glyph inherits `color`, which forced-colors mode preserves, so the checked state
+   survives that mode with no separate override. */
+.aparte-menu:has(.aparte-menu__item[aria-checked]) .aparte-menu__item::before {
   content: '✓';
   flex-shrink: 0;
   visibility: hidden;
@@ -3817,11 +4117,14 @@ details[open] > .aparte-accordion__header .aparte-accordion__icon {
   display: flex;
   flex-direction: column;
   gap: var(--aparte-space-3);
+  /* The cap is the box's outer width: it measured 342px for a documented 320 (padding
+     and border outside the cap) until the recipe said so itself. */
+  box-sizing: border-box;
   max-width: var(--aparte-popover-max-width);
   padding: var(--aparte-space-5);
   background: var(--aparte-surface-1);
   border: var(--aparte-border-width) solid var(--aparte-border);
-  border-radius: var(--aparte-radius-lg);
+  border-radius: var(--aparte-radius-popover);
   box-shadow: var(--aparte-popover-shadow);
   color: var(--aparte-text);
   font-size: var(--aparte-font-size-md);
@@ -3884,7 +4187,7 @@ details[open] > .aparte-accordion__header .aparte-accordion__icon {
   background: var(--aparte-surface-1);
   color: var(--aparte-text);
   border: var(--aparte-border-width) solid var(--aparte-border);
-  border-radius: var(--aparte-radius-xl);
+  border-radius: var(--aparte-radius-dialog);
   box-shadow: var(--aparte-menu-shadow);
 }
 
@@ -3960,11 +4263,20 @@ body:has(.aparte-dialog[open]) {
   .aparte-dialog:modal {
     width: 100%;
     max-width: 100%;
-    height: 100dvh;
+    /* As tall as its content, capped at the screen, sitting on the bottom edge: a sheet
+       stretched to 100dvh held a label, a field and two buttons over 586px of nothing.
+       `fit-content`, not `auto` — on a positioned box with both block insets set, an
+       auto height FILLS them (CSS 2 §10.6.4: the auto margins go to 0 and the height
+       is solved for), so `auto` measured the same 720 the explicit 100dvh had. What
+       the UA gives a dialog is `fit-content`, and it is what lets the auto top margin
+       push the sheet onto the bottom edge. And the safe areas: the ✕ used to sit 6px
+       from the physical top. */
+    height: fit-content;
     max-height: 100dvh;
-    margin: 0;
+    margin: auto 0 0;
+    padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
     border: 0;
-    border-radius: 0;
+    border-radius: var(--aparte-radius-dialog) var(--aparte-radius-dialog) 0 0;
   }
 }
 
@@ -4001,23 +4313,22 @@ body:has(.aparte-dialog[open]) {
    and skips the dark-theme override block for that reason; the artifact "paper" tokens
    are the same decision made for the same reason.
 
-       <span style="position: relative; display: inline-block; margin-block-start: 2.5rem">
-         <div class="aparte-tooltip" role="tooltip"
-              style="position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0">
+       <span class="aparte-tooltip-anchor" style="margin-block-start: 2.5rem; margin-inline-start: 5rem">
+         <div class="aparte-tooltip" data-side="top" role="tooltip">
            Copy to clipboard
            <span class="aparte-tooltip__arrow"></span>
          </div>
          <button class="aparte-btn aparte-btn--icon" aria-label="Copy"><aparte-icon name="copy"></aparte-icon></button>
        </span>
 
-   The two inline styles are the caller's half, shown rather than described: this file
-   draws the box and the arrow, and NOTHING here positions either. An example that
-   omitted them rendered as a black label with an arrow pointing at empty space, which
-   is what the preview frame beside it showed.
-
-   The arrow points DOWN by default — the common case, a tooltip above the thing it
-   labels — and `data-side="bottom"` flips it. Placing the box is yours, as with the
-   popover; only the arrow's two positions are here.
+   `data-side` places it — `top`, `bottom`, `start` or `end` — against the
+   `.aparte-tooltip-anchor` that wraps the trigger, `--aparte-tooltip-gap` away, and turns
+   the arrow to match. The two inline styles that used to do this in the example were a
+   knob missing, not a division of labour: a demo that needs inline styles to work is a
+   recipe with a parameter it forgot. What stays yours is the viewport: nothing here flips
+   a tooltip that would leave the screen — that needs script, a positioning library's job.
+   Without `data-side` the box is not positioned at all, as before, and its placement is
+   yours (the one inline style left in the example is the demo's own margin).
 
    `pointer-events: none` is not a detail: a tooltip describes what the pointer is over,
    so it must never itself become that thing, or hovering it re-triggers the hover that
@@ -4034,11 +4345,17 @@ body:has(.aparte-dialog[open]) {
 
   position: relative;
   display: inline-block;
+  vertical-align: middle;
+  /* As wide as its label, up to the cap. With a `max-width` and no intrinsic width an
+     absolutely-positioned chip shrinks to `min-content`: "Copy to clipboard" broke into
+     two lines at every width, 71px wide — the widest word plus padding. */
+  width: max-content;
+  box-sizing: border-box;
   max-width: var(--aparte-tooltip-max-width);
   padding: var(--aparte-space-2) var(--aparte-space-4);
   background: var(--aparte-tooltip-bg);
   color: var(--aparte-tooltip-color);
-  border-radius: var(--aparte-radius-sm);
+  border-radius: var(--aparte-radius-tooltip);
   box-shadow: var(--aparte-tooltip-shadow);
   font-size: var(--aparte-font-size-sm);
   line-height: var(--aparte-line-height-snug);
@@ -4050,12 +4367,49 @@ body:has(.aparte-dialog[open]) {
   pointer-events: none;
 }
 
-/* Points down by default — the common case of a tooltip sitting above the thing
-   it labels. `[data-side="bottom"]` flips it for a tooltip placed below instead.
-   Horizontal centring uses inline-start + a negative inline-start margin rather
-   than a transform, so it re-centres correctly under `direction: rtl` without a
-   second rule. Placement to either side is the caller's own transform math, the
-   same "position is the caller's job" split as the popover above. */
+/* Where the box goes: the anchor is the trigger's wrapper and the tooltip is placed
+   against it. `translate` centres the box on the axis across the side: with a logical
+   inset of 50% the box's start edge sits at the anchor's middle, and moving it back by
+   half its own size centres it — in both writing directions, because the inset flips
+   with the direction and the translate is half the box either way. */
+.aparte-tooltip-anchor {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.aparte-tooltip[data-side] {
+  position: absolute;
+}
+
+.aparte-tooltip[data-side='top'] {
+  inset-block-end: calc(100% + var(--aparte-tooltip-gap));
+  inset-inline-start: 50%;
+  translate: -50% 0;
+}
+
+.aparte-tooltip[data-side='bottom'] {
+  inset-block-start: calc(100% + var(--aparte-tooltip-gap));
+  inset-inline-start: 50%;
+  translate: -50% 0;
+}
+
+.aparte-tooltip[data-side='start'] {
+  inset-inline-end: calc(100% + var(--aparte-tooltip-gap));
+  inset-block-start: 50%;
+  translate: 0 -50%;
+}
+
+.aparte-tooltip[data-side='end'] {
+  inset-inline-start: calc(100% + var(--aparte-tooltip-gap));
+  inset-block-start: 50%;
+  translate: 0 -50%;
+}
+
+/* The arrow points DOWN by default — the common case, a tooltip above the thing it
+   labels — and each `data-side` turns it toward the anchor. Centring on the box's edge
+   uses a logical inset plus a negative margin rather than a transform, so it re-centres
+   under `direction: rtl` without a second rule. */
 .aparte-tooltip__arrow {
   position: absolute;
   inset-inline-start: 50%;
@@ -4074,6 +4428,26 @@ body:has(.aparte-dialog[open]) {
   inset-block-start: calc(var(--aparte-space-4) * -0.5);
 }
 
+/* On the two inline sides the arrow sits on the edge that faces the anchor, centred
+   vertically: the box is to the START of the trigger, so its arrow is on its END edge,
+   and the reverse. */
+.aparte-tooltip[data-side='start'] .aparte-tooltip__arrow {
+  inset-block-end: auto;
+  inset-block-start: 50%;
+  inset-inline-start: auto;
+  inset-inline-end: calc(var(--aparte-space-4) * -0.5);
+  margin-inline-start: 0;
+  margin-block-start: calc(var(--aparte-space-4) * -0.5);
+}
+
+.aparte-tooltip[data-side='end'] .aparte-tooltip__arrow {
+  inset-block-end: auto;
+  inset-block-start: 50%;
+  inset-inline-start: calc(var(--aparte-space-4) * -0.5);
+  margin-inline-start: 0;
+  margin-block-start: calc(var(--aparte-space-4) * -0.5);
+}
+
 /* ── Forced colors ───────────────────────────────────────────────────────────────
    The menu and the popover already carry a real border by default, so those two
    boxes survive forced-colors mode once background and box-shadow are both
@@ -4116,10 +4490,16 @@ aparte-select {
     align-items: center;
     justify-content: space-between;
     gap: var(--aparte-space-4);
+    box-sizing: border-box;
+    min-block-size: var(--aparte-field-size);
     padding: var(--aparte-space-4) var(--aparte-space-6);
+    /* Its own size: the trigger declared none and took the host page's, so every
+       integrator saw a different select. The control step, like the field and the
+       button. */
+    font-size: var(--aparte-font-size-md);
     background: var(--aparte-select-bg, var(--aparte-surface-1));
-    border: var(--aparte-border-width) solid var(--aparte-select-border, var(--aparte-border));
-    border-radius: var(--aparte-select-radius, var(--aparte-radius-lg));
+    border: var(--aparte-border-width) solid var(--aparte-select-border, var(--aparte-border-control));
+    border-radius: var(--aparte-radius-select);
     cursor: pointer;
     transition: border-color var(--aparte-duration-base), box-shadow var(--aparte-duration-base);
 }
@@ -4128,15 +4508,16 @@ aparte-select {
     border-color: var(--aparte-select-border-hover, var(--aparte-primary));
 }
 
-.aparte-select-trigger:focus {
-    outline: none;
-    border-color: var(--aparte-select-border-focus, var(--aparte-primary));
-    box-shadow: var(--aparte-select-ring, var(--aparte-focus-ring));
+.aparte-select-trigger:focus-visible {
+    outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+    outline-offset: var(--aparte-focus-outline-offset);
 }
 
 aparte-select[disabled] .aparte-select-trigger {
-    opacity: var(--aparte-disabled-opacity);
     cursor: not-allowed;
+    background: var(--aparte-surface-2);
+    color: var(--aparte-text-muted);
+    border-color: var(--aparte-border);
 }
 
 /* The label is a grid with ONE cell: the visible text and, under it, a hidden stack of
@@ -4196,8 +4577,10 @@ aparte-select[open] .aparte-select-chevron {
     position: fixed;
     /* top / left / width are set dynamically by _updatePosition() */
     background: var(--aparte-select-dropdown-bg, var(--aparte-surface-1));
-    border: var(--aparte-border-width) solid var(--aparte-select-border, var(--aparte-border));
-    border-radius: var(--aparte-select-radius, var(--aparte-radius-lg));
+    /* The panel is a region, so its edge is the region border; `--aparte-select-border`
+       is the TRIGGER's edge, a control's, and defaults to the control border. */
+    border: var(--aparte-border-width) solid var(--aparte-border);
+    border-radius: var(--aparte-radius-select);
     box-shadow: var(--aparte-select-shadow);
     z-index: var(--aparte-select-z, var(--aparte-z-dropdown));
     max-height: var(--aparte-select-dropdown-max-height);
@@ -4221,8 +4604,11 @@ aparte-select[open] .aparte-select-chevron {
     font-family: inherit;
 }
 
-.aparte-select-search:focus {
-    outline: none;
+/* Inside, not outside: the field sits at the top of a scrolling panel, and an outset
+   ring would be clipped by it. The one documented exception to the shared offset. */
+.aparte-select-search:focus-visible {
+    outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+    outline-offset: calc(-1 * var(--aparte-focus-outline-width));
 }
 
 /* Options container */
@@ -4359,6 +4745,7 @@ aparte-optgroup[collapsed] .aparte-optgroup-chevron {
 }
 
 .aparte-spinner-small {
+    box-sizing: border-box;
     width: var(--aparte-select-spinner-size);
     height: var(--aparte-select-spinner-size);
     border: 2px solid currentColor;
@@ -4366,6 +4753,12 @@ aparte-optgroup[collapsed] .aparte-optgroup-chevron {
     border-radius: 50%;
     /* `aparte-spin` is declared once, in base.css — see the shared-motion block there. */
     animation: aparte-spin var(--aparte-duration-spin) linear infinite;
+}
+
+/* The element's own sweep in responsive.css already stops this one; the rule is here
+   so the recipe stops on its own terms too, like every other looping recipe. */
+@media (prefers-reduced-motion: reduce) {
+    .aparte-spinner-small { animation: none; }
 }/**
  * AparteProgressSpinner — CSS
  *
@@ -4391,16 +4784,23 @@ aparte-progress-spinner svg {
     overflow: visible;
 }
 
+/* The same stroke as the CSS ring (`.aparte-spinner`), in SCREEN pixels: without
+   `vector-effect` a stroke is in viewBox units and scaled with the box — 2.5 of 24 was
+   1.67px in a 16px spinner, antialiased everywhere and 50 % lighter than its sibling.
+   The track is a visible reference in the control-edge colour: at 15 % of the ink a
+   determinate 62 % was the percentage of a circle nobody could see. */
 .aparte-spinner-track {
     fill: none;
-    stroke: var(--aparte-spinner-track, color-mix(in srgb, currentColor 15%, transparent));
-    stroke-width: var(--aparte-spinner-stroke, 2.5);
+    stroke: var(--aparte-spinner-track, var(--aparte-border-control));
+    stroke-width: var(--aparte-spinner-thickness);
+    vector-effect: non-scaling-stroke;
 }
 
 .aparte-spinner-fill {
     fill: none;
     stroke: var(--aparte-spinner-color, currentColor);
-    stroke-width: var(--aparte-spinner-stroke, 2.5);
+    stroke-width: var(--aparte-spinner-thickness);
+    vector-effect: non-scaling-stroke;
     stroke-linecap: round;
     transition: stroke-dashoffset 0.25s var(--aparte-ease);
 }
@@ -4435,7 +4835,10 @@ aparte-progress-spinner:not([value]) svg {
 
 /* Both host shapes core recognises get the same layout: the vanilla
    <aparte-chat> element AND a framework wrapper's `[data-aparte-chat]` root
-   (React/Vue/Svelte/Angular render `<div data-aparte-chat>`). `[data-aparte-chat]`
+   (React/Vue/Svelte render `<div data-aparte-chat class="aparte-chat-container">`;
+   Angular's host IS `<aparte-chat>` and its shell is the inner
+   `.aparte-chat-container`, which carries no attribute here — the overlay rules
+   below list that third shape for exactly that reason). `[data-aparte-chat]`
    is the SAME selector core uses to resolve the host (see aparte-client /
    aparte-chat-bubble), so one rule covers both — no wrapper-specific class. */
 aparte-chat,
@@ -4448,6 +4851,10 @@ aparte-chat,
   height: 100%;
   width: 100%;
   overflow: hidden;
+  /* The height an author sets IS the box: with the bottom gap below outside it,
+     `style="height: 24rem"` rendered 336px, and a split's seam hung 16px under both
+     panels. */
+  box-sizing: border-box;
   /* The composer used to touch the bottom edge as soon as a conversation started: the
      viewport gives 16px above the composer and there was nothing below it. An app
      cannot fix this from outside without padding the container, which also shrinks the
@@ -4509,16 +4916,26 @@ aparte-chat[overlay-composer] > aparte-chat-viewport,
   z-index: 0;
 }
 
-/* The bottom stack paints over the absolutely positioned viewport. `:not()` is
-   exact here: the only child that is not the viewport IS the stack (the scroll
-   button lives inside the viewport). */
-aparte-chat[overlay-composer] > :not(aparte-chat-viewport),
-[data-aparte-chat][overlay-composer] > :not(aparte-chat-viewport),
-.aparte-chat-container[overlay-composer] > :not(aparte-chat-viewport) {
+/* The bottom stack paints over the absolutely positioned viewport. The `:not()` names
+   what is NOT the stack: the viewport (the scroll button lives inside it), and the
+   scroll rail, which is a child of the shell too. `position: relative` here beat the
+   rail's own `absolute`, so in overlay mode the floating rail dropped into the flow
+   and pushed the composer down — the one child that floats by design has to be named. */
+aparte-chat[overlay-composer] > :not(aparte-chat-viewport, aparte-scroll-rail),
+[data-aparte-chat][overlay-composer] > :not(aparte-chat-viewport, aparte-scroll-rail),
+.aparte-chat-container[overlay-composer] > :not(aparte-chat-viewport, aparte-scroll-rail) {
   position: relative;
   z-index: var(--aparte-z-raised);
 }
 
+/* A thing that floats has to be seen floating. The overlaid composer's shell shares the
+   transcript's ground, so a z-index alone left it flat on the words it covers. */
+aparte-chat[overlay-composer] .aparte-composer-shell,
+[data-aparte-chat][overlay-composer] .aparte-composer-shell,
+.aparte-chat-container[overlay-composer] .aparte-composer-shell {
+  box-shadow: var(--aparte-composer-overlay-shadow);
+}
+
 /* center-empty: the shell centers the composer as a welcome state until the first
    message, then slides to the normal layout. The component toggles [data-empty]
    on itself by watching its viewport — only `flex-grow` animates, so the composer
@@ -4541,6 +4958,17 @@ aparte-chat[center-empty][data-empty] > aparte-chat-viewport {
   height: auto;
 }
 
+/* And no block room at all: at `auto` the empty viewport still stood 32px tall — the
+   rows' wrapper keeps its block padding with no row in it — so `center` centred three
+   items of which the first was invisible, and the welcome group landed 16px low,
+   measured. The padding goes, not the box: capping the viewport itself left a 32px
+   scroll surface inside a 0px box, and "an empty transcript must not overflow" is a
+   browser test every example runs. Inline geometry is kept — the composer's inset is
+   measured from this element. */
+aparte-chat[center-empty][data-empty] > aparte-chat-viewport .aparte-messages-wrapper {
+  padding-block: 0;
+}
+
 /* =========================================
    aparte-chat-viewport
    ========================================= */
@@ -4607,16 +5035,16 @@ aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-thumb {
 
 /* ─── Scroll-to-bottom button ─────────────────────────────────────────────── */
 
-/* The button wears `aparte-btn--lg aparte-btn--circle`, and that IS its shape: 36px is
-   exactly `--aparte-btn-size-lg`, and `--circle` is the round one. So the box, the
-   corner and the 20px glyph all come from the recipe, and what stays here is only what
-   is genuinely this button's — where it floats, and its own surface.
+/* The button wears `aparte-btn--lg aparte-btn--circle`: `--lg` gives it the 20px glyph
+   and the lg step of the scale (36px), `--circle` the round corner, and
+   `--aparte-scroll-btn-size` (the same step, named for this button so a theme can move
+   it alone) is fed to the recipe below. What stays here is only what is genuinely this
+   button's — where it floats, and its own surface.
 
    It used to redraw all three: its own width/height, its own `border-radius: 50%`, and
    an icon-size override that existed only because the box was declared OUTSIDE the size
-   scale, so the glyph stayed at the medium default — a 16px arrow in a 36px circle, 44%
-   of its box where the rest of the library reads at ~57%. Naming the size instead makes
-   the ratio fall out for free, and the override disappears with it.
+   scale, so the glyph stayed at the medium default — a 16px arrow in a 36px circle.
+   Naming the size on the recipe's own token makes the override disappear.
 
    `--aparte-scroll-btn-size` stays the public knob, fed to the recipe. */
 .aparte-scroll-btn {
@@ -4888,7 +5316,11 @@ aparte-chat-bubble {
   box-sizing: border-box;
   display: flex;
   gap: var(--aparte-message-gap);
-  padding: var(--aparte-message-padding);
+  /* The two parts, not the composite `--aparte-message-padding` that used to join them
+     on `:root`: a custom property is substituted where it is declared, so the composite
+     froze both parts at the root and the narrow-container override of them in
+     responsive.css never reached this row. */
+  padding: var(--aparte-message-padding-block) var(--aparte-message-padding-inline);
   width: 100%;
   max-width: var(--aparte-message-max-width);
   margin: 0 auto;
@@ -4976,6 +5408,11 @@ aparte-chat-bubble {
   opacity: 0;
   transition: opacity var(--aparte-duration-base) var(--aparte-ease);
   height: var(--aparte-action-bar-btn-size);
+  /* The INK meets the column, not the box: a glyph is centred in its 24px button, so
+     its ink began half the slack — (24 − 12) / 2 — to the right of the paragraph above.
+     Measured at +5 to +8px in 14 previews. The bar takes that slack back and the box
+     overhangs into the message padding, where nothing else lives. */
+  margin-inline-start: calc((var(--aparte-icon-size-sm) - var(--aparte-btn-size-sm)) / 2);
 }
 
 .aparte-message:hover .aparte-action-bar,
@@ -5040,8 +5477,6 @@ aparte-chat-bubble:last-of-type .aparte-message[data-role="assistant"]:not(.apar
     inset-block-end: calc(-1 * (var(--aparte-message-padding-block) + var(--aparte-message-gap)));
     margin: 0;
     z-index: 1;
-    /* Smaller than the last reply's 28px: this one lives in the padding. */
-    --aparte-action-bar-btn-size: 24px;
   }
 }
 
@@ -5090,12 +5525,11 @@ aparte-chat-bubble:last-of-type .aparte-message[data-role="assistant"]:not(.apar
   display: none;
 }
 
+/* The arrows wear `--sm` and the recipe draws the box: this rule used to redraw
+   width/height to a 20px token over it — two sources for one measure. */
 .aparte-branch-prev,
 .aparte-branch-next {
   color: var(--aparte-branch-picker-btn-color);
-  width: var(--aparte-branch-picker-btn-size);
-  height: var(--aparte-branch-picker-btn-size);
-  font-size: var(--aparte-branch-picker-btn-icon-size);
 }
 
 .aparte-branch-prev:hover:not(:disabled),
@@ -5104,9 +5538,11 @@ aparte-chat-bubble:last-of-type .aparte-message[data-role="assistant"]:not(.apar
   background: var(--aparte-action-bar-btn-hover-bg);
 }
 
+/* The button recipe draws the disabled state (a neutral ground, the muted ink); an
+   opacity over it read the arrow at 1.74:1 — as absent, where the picker means "no
+   further". `default` and not `not-allowed`: the end of a list is not a refusal. */
 .aparte-branch-prev:disabled,
 .aparte-branch-next:disabled {
-  opacity: var(--aparte-disabled-opacity);
   cursor: default;
 }
 
@@ -5206,7 +5642,9 @@ aparte-chat-bubble[data-kind="compaction"] .aparte-message-content {
    Unscoped so it greys the composer in EVERY host (vanilla shell + all wrappers),
    not only a `[data-aparte-chat]` direct child. */
 aparte-composer[data-model-gated] {
-  opacity: var(--aparte-disabled-opacity);
+  /* No group fade: each control draws its own disabled state (the editor's muted ink,
+     the send button's neutral ground), so the text stays legible while it waits. */
+  cursor: not-allowed;
 }
 aparte-composer[data-model-gated] aparte-composer-send {
   pointer-events: none;
@@ -5362,7 +5800,7 @@ aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-thumb {
 
 /* Disabled state */
 .aparte-editor[contenteditable="false"] {
-  opacity: var(--aparte-disabled-opacity);
+  color: var(--aparte-text-muted);
   cursor: not-allowed;
 }
 
@@ -5403,9 +5841,9 @@ aparte-chat-viewport.aparte-viewport--framework::-webkit-scrollbar-thumb {
 }
 
 .aparte-send-button:disabled {
-  opacity: var(--aparte-disabled-opacity);
   cursor: not-allowed;
-  background: var(--aparte-send-disabled-bg, var(--aparte-primary));
+  background: var(--aparte-send-disabled-bg, var(--aparte-surface-2));
+  color: var(--aparte-text-muted);
 }
 
 /* =========================================
@@ -5499,11 +5937,10 @@ aparte-model-selector[hidden],
   border-color: var(--aparte-primary);
 }
 
-.aparte-provider-select:focus,
-.aparte-model-select:focus {
-  outline: none;
-  border-color: var(--aparte-primary);
-  box-shadow: var(--aparte-focus-ring);
+.aparte-provider-select:focus-visible,
+.aparte-model-select:focus-visible {
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
 /* Dark mode overrides for selects */
@@ -5546,13 +5983,14 @@ aparte-composer {
      it would then be the containing block of the `position: fixed` select dropdown
      that exists to escape `overflow: hidden` (select.css, and the same warning in
      split.css). So below 520px the transcript tightens to 8px and this stays at 16.
-     A flat 16 was measured against a step: the step wins for vanilla at phone width
-     and LOSES for framework-managed, which is the majority path, because the
-     transcript's own step targets a class framework mode never builds. Flat is a
-     uniform 10px worst case in both modes — which is the scrollbar gutter the
-     transcript reserves and the composer cannot, and which is 0 on the overlay
-     scrollbars every phone has. */
-  padding-inline: var(--aparte-viewport-padding);
+     So the composer does not guess: the viewport MEASURES where its rows start — the
+     transcript's padding plus the scrollbar gutter it reserves on both edges, at
+     whatever step its container query has taken — and publishes it on the chat host as
+     `--aparte-transcript-inset`. Padding by that puts the composer's box on the row's
+     box at every width. Measured before: 10px apart at 768, the gutter's half at 1280,
+     three left edges 12px apart on the reading-column demo. The fallback is for a
+     composer with no viewport beside it. */
+  padding-inline: var(--aparte-transcript-inset, var(--aparte-viewport-padding));
 }
 
 aparte-composer-input {
@@ -5565,7 +6003,7 @@ aparte-composer-input {
 aparte-composer-input .aparte-ci-editor {
   display: block;
   width: 100%;
-  min-height: var(--aparte-composer-control-size, 44px);
+  min-height: var(--aparte-composer-control-size);
   padding: var(--aparte-input-padding-y) var(--aparte-input-padding-x);
   font-size: var(--aparte-input-font-size);
   line-height: var(--aparte-input-line-height);
@@ -5596,7 +6034,7 @@ aparte-composer-input .aparte-ci-editor:empty::before {
 }
 
 aparte-composer-input .aparte-ci-editor[aria-disabled="true"] {
-  opacity: var(--aparte-disabled-opacity);
+  color: var(--aparte-text-muted);
   cursor: not-allowed;
 }
 
@@ -5688,7 +6126,7 @@ aparte-composer.aparte-is-dragover:not(:has(.aparte-composer-shell)) {
 
 /* Inner row — flex container for input + buttons */
 /* Action buttons sized to the input's single-line height — they derive from
-   --aparte-composer-control-size (default 44px), so a theme resizes the whole
+   --aparte-composer-control-size (default: the lg step, 36px; the touch target under a coarse pointer), so a theme resizes the whole
    composer control set with ONE variable and alignment holds. Combined with
    the row's `align-items: flex-end` this makes the buttons read as vertically
    centered against a single line of text, and keeps them anchored to the
@@ -5720,7 +6158,11 @@ aparte-composer.aparte-is-dragover:not(:has(.aparte-composer-shell)) {
   align-items: flex-end;
   gap: var(--aparte-space-4);
   padding: var(--aparte-space-4) var(--aparte-space-6);
-  --aparte-composer-row-control-size: var(--aparte-composer-control-size, 44px);
+  /* The lg step at rest — 36px, what `--aparte-send-btn-size` says — and the touch
+     target under a coarse pointer (responsive.css). It was 44 everywhere, which made
+     the send button the one control the coarse-pointer block could not enlarge because
+     it already was, and a 62px bar around 15px of text on a desktop. */
+  --aparte-composer-row-control-size: var(--aparte-composer-control-size);
   --aparte-btn-size: var(--aparte-composer-row-control-size);
 }
 
@@ -5838,6 +6280,10 @@ aparte-composer-cancel .aparte-cc-button:hover {
    `.aparte-accordion__header` / `__item` / `__panel` and adds these two lines: a
    quieter face than a real accordion header, and the padding the left rail needs. */
 .aparte-thinking-header {
+  /* The chevron sits beside the label: the accordion recipe puts it at the row's far
+     end, which is what an accordion is, but this is a one-line disclosure, and "Reasoning"
+     and its chevron were 692px apart at 1280 (T18). */
+  justify-content: flex-start;
   padding: var(--aparte-space-1) 0 var(--aparte-space-1) var(--aparte-space-5);
   font-size: var(--aparte-font-size-sm);
   color: var(--aparte-thinking-text);
@@ -5869,7 +6315,7 @@ aparte-composer-cancel .aparte-cc-button:hover {
   margin-inline-end: var(--aparte-space-4);
   /* Logical property */
   text-transform: uppercase;
-  opacity: 0.7;
+  /* The header's ink is already the muted one; an `opacity: .7` on top muted it twice. */
 }
 
 
@@ -5928,11 +6374,14 @@ aparte-composer-cancel .aparte-cc-button:hover {
     flex: none;
     width: var(--aparte-space-8);
     height: var(--aparte-space-8);
-    opacity: 0.5;
-    transition: transform var(--aparte-duration-base);
+    /* Quiet is a colour, not an opacity: at 0.5 the chevron measured 3.00:1 — on the
+       WCAG floor exactly — and it is the control that reveals a `delete_file`'s
+       arguments. The muted ink at rest, the full ink under the pointer. */
+    color: var(--aparte-text-muted);
+    transition: transform var(--aparte-duration-base), color var(--aparte-duration-base);
 }
 .aparte-tool-toggle svg { width: 100%; height: 100%; display: block; }
-.aparte-tool-summary:hover .aparte-tool-toggle { opacity: 0.9; }
+.aparte-tool-summary:hover .aparte-tool-toggle { color: var(--aparte-text); }
 details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180deg); }
 /* A rule down the leading edge, so the disclosure reads as belonging to the
    pill above it rather than continuing the message text below. Without it
@@ -5947,7 +6396,7 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
 }
 .aparte-tool-part-label {
     display: block; font-size: var(--aparte-font-size-xs); text-transform: uppercase;
-    letter-spacing: 0.04em; opacity: 0.55; margin-bottom: var(--aparte-space-1);
+    letter-spacing: 0.04em; color: var(--aparte-text-muted); margin-bottom: var(--aparte-space-1);
 }
 /* A tool's input and result WRAP. They are a message, a path, a JSON object — not
    code to read line by line — and a `<pre>` keeps `white-space: pre` by default, so
@@ -5969,6 +6418,7 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
    green, which made a finished step shout louder than the reply it belongs to. */
 .aparte-tool-label {
     display: inline-flex;
+    vertical-align: middle;
     align-items: center;
     gap: var(--aparte-space-3);
     min-width: 0;
@@ -5985,7 +6435,7 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
     place-items: center;
     width: 1em; height: 1em;
     flex: none;
-    opacity: 0.7;
+    color: var(--aparte-text-muted);
 }
 .aparte-tool-icon svg { width: 1em; height: 1em; display: block; }
 .aparte-tool-name { font-family: var(--aparte-code-font-family); }
@@ -5993,9 +6443,12 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
    Pushed to the far end by DOM order plus an auto inline-start margin, which is
    the placement rule this repo already settled on: no left/right in a name, so
    a right-to-left locale mirrors it for free. */
+/* Beside the tool's name, not at the row's far end: with `margin-inline-start: auto` the
+   state word drifted 63px from the name at 375 and 596px at 1280. The state belongs to
+   the label (T18). */
 .aparte-tool-state {
-    display: inline-flex; align-items: center; gap: var(--aparte-space-2);
-    margin-inline-start: auto;
+    display: inline-flex;
+    vertical-align: middle; align-items: center; gap: var(--aparte-space-2);
     font-size: var(--aparte-font-size-sm); font-weight: var(--aparte-font-weight-medium);
     color: var(--aparte-text-muted);
     user-select: none;
@@ -6031,44 +6484,22 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
 }
 
 /* Pipeline waiting */
-.aparte-error-icon-wrapper {
-  flex-shrink: 0;
-  color: var(--aparte-error-solid);
-  display: flex;
-  align-items: flex-start;
-  padding-top: var(--aparte-space-1);
-}
-
-.aparte-error-icon-wrapper svg {
-  width: var(--aparte-error-icon-size);
-  height: var(--aparte-error-icon-size);
-}
-
-.aparte-error-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.aparte-error-title {
-  font-weight: var(--aparte-font-weight-semibold);
-  font-size: var(--aparte-font-size-lg);
-  margin-bottom: var(--aparte-space-2);
-  color: var(--aparte-error-title);
-}
-
-.aparte-error-message {
-  font-size: var(--aparte-font-size-lg);
-  line-height: var(--aparte-line-height-normal);
-}
-
-.aparte-error-details {
-  margin-top: var(--aparte-space-4);
-  padding-top: var(--aparte-space-4);
-  border-top: var(--aparte-border-width) solid var(--aparte-error-border);
+/* The error segment WEARS the alert recipe — frame and parts (`aparte-alert__icon`,
+   `__body`, `__title`, `__message` come from display/alert.css). It used to put the
+   recipe's class on its root and redraw every part under classes of its own, with a 20px
+   literal for the icon among derived tokens and a title colour nothing else used. What is
+   genuinely the segment's own is the one part the alert has no word for: the details
+   block — a transport's stack, a status line — set as code under the message. */
+.aparte-segment-error__details {
+  margin: var(--aparte-space-4) 0 0;
+  padding-block-start: var(--aparte-space-4);
+  border-block-start: var(--aparte-border-width) solid var(--aparte-error-border);
   font-family: var(--aparte-code-font-family);
   font-size: var(--aparte-font-size-sm);
-  opacity: 0.9;
+  line-height: var(--aparte-line-height-normal);
+  color: var(--aparte-text-secondary);
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 /* ─────────────────────────────────────────────────────────────────────────────
@@ -6182,7 +6613,7 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
      a consumer's screenshot, then here. The padding gives the ring that much room and
      the negative margin gives it back to the layout, so nothing moves; `scroll-padding`
      keeps a keyboard-focused option's ring inside the viewport when the list scrolls. */
-  --aparte-elic-ring-room: calc(var(--aparte-focus-outline-width) + var(--aparte-btn-focus-offset));
+  --aparte-elic-ring-room: calc(var(--aparte-focus-outline-width) + var(--aparte-focus-outline-offset));
   padding: var(--aparte-elic-ring-room);
   margin: calc(-1 * var(--aparte-elic-ring-room));
   scroll-padding: var(--aparte-elic-ring-room);
@@ -6226,7 +6657,10 @@ details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(180
 .aparte-elic-options {
   display: flex;
   flex-direction: column;
-  gap: var(--aparte-space-1);
+  /* At least the focus ring's outset: at 2px the next row painted over the bottom of
+     the focused row's ring and ~8px of it survived. Any list of options that wears an
+     outset ring needs a gap at least as wide as the offset. */
+  gap: var(--aparte-space-3);
 }
 
 /* The row is `.aparte-field-choice`; the panel only tightens its padding, because a
@@ -6300,22 +6734,19 @@ textarea.aparte-elic-text {
   min-height: var(--aparte-elic-textarea-min-height);
 }
 
-.aparte-elic-other-input:focus,
-.aparte-elic-text:focus {
-  border-color: var(--aparte-primary);
-}
-
 .aparte-elic-option--recommended {
   border-color: var(--aparte-primary);
   background: color-mix(in srgb, var(--aparte-primary) 6%, transparent);
 }
 /* One ring at a time. The recommended option is the first to receive focus, and its
    tinted border under the recipe's focus ring read as a double outline (UI audit
-   2026-08-28, §8.3 #9). While it holds focus the ring is the indicator; the tint
-   comes back when focus leaves. */
+   2026-08-28, §8.3 #9). While it holds focus the ring is the one edge, so the border
+   steps aside — and ONLY the border. This rule used to clear the background too, which
+   made the recommended row the only one in the list with no ground at all: sampled on
+   the preview it rendered the page byte for byte while its sisters did not. The
+   recommended state draws in addition to the resting state, never instead of it. */
 .aparte-elic-option--recommended:focus-within {
-  background: transparent;
-  border-color: var(--aparte-border-focus);
+  border-color: transparent;
 }
 
 /* The whole-request escape, in the corner and out of the way of anything that
@@ -6424,7 +6855,7 @@ textarea.aparte-elic-text {
 
 .aparte-approval-args:focus-visible {
   outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
-  outline-offset: 1px;
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
 /* The refusal's reason, in the user's words. Quiet by default and one line tall: it is
@@ -6444,9 +6875,9 @@ textarea.aparte-elic-text {
   min-height: 1.6em;
 }
 
-.aparte-approval-instruction:focus {
-  outline: none;
-  border-top-color: var(--aparte-accent);
+.aparte-approval-instruction:focus-visible {
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
 .aparte-approval-instruction::placeholder {
@@ -6595,8 +7026,8 @@ textarea.aparte-elic-text {
 /* Inside the edge: the list clips horizontally (`overflow-x: hidden` in base.css), and
    a ring drawn outside the row was cut on both sides. */
 .aparte-conv-item__select:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
-  outline-offset: calc(-1 * var(--aparte-focus-outline-width));
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
 .aparte-conv-item__title {
@@ -6617,15 +7048,22 @@ textarea.aparte-elic-text {
   font-weight: var(--aparte-conv-item-font-weight-active);
 }
 
+/* The selection mark: a bar the width of `--aparte-mark-bar` down the row's start
+   edge. Painted as the first pixels of a pseudo the SIZE of the row that inherits its
+   radius, so the bar follows the curve — drawn as a 2px box of its own it stood square
+   in a 9px corner and a sliver of the page's ground showed between the two. Not
+   `overflow: hidden` on the row: that would clip the title button's focus ring. */
 .aparte-conv-item--active::before {
   content: "";
   position: absolute;
-  inset-block: 0;
-  inset-inline-start: 0;
-  width: var(--aparte-mark-bar);
-  background: var(--aparte-primary-ink);
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(to right, var(--aparte-primary-ink) var(--aparte-mark-bar), transparent 0);
   pointer-events: none;
 }
+.aparte-conv-item--active:dir(rtl)::before {
+  background: linear-gradient(to left, var(--aparte-primary-ink) var(--aparte-mark-bar), transparent 0);
+}
 
 .aparte-conv-item--archived .aparte-conv-item__title {
   font-style: italic;
@@ -6639,8 +7077,8 @@ textarea.aparte-elic-text {
 .aparte-conv-item__more {
   flex-shrink: 0;
   opacity: 0;
-  width: var(--aparte-conv-action-btn-size);
-  height: var(--aparte-conv-action-btn-size);
+  /* Fed to the recipe, not drawn here: the token names the size, the button draws it. */
+  --aparte-btn-size: var(--aparte-conv-action-btn-size);
   color: var(--aparte-text-muted);
 }
 
@@ -6718,6 +7156,11 @@ aparte-suggestions[data-empty] {
   flex-wrap: wrap;
   gap: var(--aparte-space-2);
   padding-block: var(--aparte-space-2);
+  /* The composer's column: past its 800px cap the chips no longer followed the composer,
+     188px of offset on a wide host. Same measure, same centring. */
+  box-sizing: border-box;
+  max-inline-size: var(--aparte-message-max-width);
+  margin-inline: auto;
 }
 
 /* A starter's label is a short phrase; it must not become a two-line chip. */
@@ -6753,6 +7196,9 @@ aparte-context[data-empty] {
 .aparte-context .aparte-progress {
   flex: 1;
   min-width: 4rem;
+  /* A gauge has a measure: unbounded, the bar stretched to 1046×4px across a toolbar,
+     88 % of its width for a line that says one number. */
+  max-inline-size: 16rem;
 }
 
 .aparte-context__text {
@@ -6782,10 +7228,13 @@ aparte-context[data-level="danger"] .aparte-progress__bar {
   transform: rotate(-90deg);
 }
 
+/* As heavy as the bar variant, in screen pixels: the same gauge was drawn at two
+   weights — a 4px bar and a 2.44px antialiased ring. */
 .aparte-context__track,
 .aparte-context__value {
   fill: none;
-  stroke-width: var(--aparte-context-ring-stroke);
+  stroke-width: var(--aparte-progress-height);
+  vector-effect: non-scaling-stroke;
 }
 
 .aparte-context__track {
@@ -6820,12 +7269,30 @@ aparte-context[data-level="danger"] .aparte-context__value {
  * chat host. `:has()` gives the host its containing block only while a rail is inside
  * it — a bare `position: relative` on every chat would have moved any absolutely
  * positioned child a consumer already placed there.
+ *
+ * The three shell shapes shell.css already lays out, because an absolute element lands
+ * in the nearest POSITIONED ancestor and a shape missing from this list is a rail that
+ * escaped to the page: the vanilla `<aparte-chat>`, the `[data-aparte-chat]` div
+ * React/Vue/Svelte render, and Angular's inner `.aparte-chat-container` (its host IS
+ * `<aparte-chat>`, but the rail is a child of that inner div). The first two shapes are
+ * both true of the wrapper div, which carries the class and the attribute — listing all
+ * three costs one selector and closes the Angular hole.
  */
 aparte-chat:has(> aparte-scroll-rail),
-[data-aparte-chat]:has(> aparte-scroll-rail) {
+[data-aparte-chat]:has(> aparte-scroll-rail),
+.aparte-chat-container:has(> aparte-scroll-rail) {
   position: relative;
 }
 
+/* The block padding is the room the END zones need, and it is not decoration.
+   The rail clips (`overflow: hidden`, which cuts at the PADDING box) and the list has
+   none of its own, so with no padding here the first tick's top edge sits exactly on the
+   clip line. A zone grows symmetrically — half of `hit − thickness` above and below the
+   line — so the first tick would lose its upper half and the last tick its lower half,
+   to paint AND to hit-testing: 13px of the 24px, on the two ticks a reader aims at most
+   ("jump to the first message", "jump to the latest"). Padding by exactly that half puts
+   the clip line outside every zone instead of through the two end ones. `box-sizing`
+   keeps `max-height` measuring the same box it measured before. */
 aparte-scroll-rail {
   position: absolute;
   inset-inline-end: var(--aparte-space-2);
@@ -6833,7 +7300,9 @@ aparte-scroll-rail {
   transform: translateY(-50%);
   z-index: var(--aparte-z-floating);
   display: block;
+  box-sizing: border-box;
   width: var(--aparte-scroll-rail-width);
+  padding-block: calc((var(--aparte-scroll-rail-hit-size) - var(--aparte-scroll-rail-tick-thickness)) / 2);
   max-height: calc(100% - 2 * var(--aparte-space-8));
   overflow: hidden;
 }
@@ -6853,7 +7322,7 @@ aparte-scroll-rail[data-empty] {
   gap: var(--aparte-scroll-rail-gap);
 }
 
-/* A tick is a real button, drawn as a line. The hit area is the gap around it, drawn
+/* A tick is a real button, drawn as a line. The hit area is the zone around it, drawn
    by the pseudo-element so the line itself can stay two pixels. */
 .aparte-scroll-rail__tick {
   appearance: none;
@@ -6865,17 +7334,32 @@ aparte-scroll-rail[data-empty] {
   padding: 0;
   border: 0;
   border-radius: var(--aparte-radius-full);
-  background: var(--aparte-border);
+  /* A tick is a thing you can press; at rest in the region colour it sat at 1.15:1, a
+     14×2px dash under the perception threshold. */
+  background: var(--aparte-border-control);
   cursor: pointer;
   transition:
     width var(--aparte-duration-fast) var(--aparte-ease),
     background var(--aparte-duration-fast) var(--aparte-ease);
 }
 
+/* The pressable zone: 24px square around a 14×2 line (WCAG 2.5.8). It used to be 22×10
+   — half the 8px gap in the block axis, one spacing step in the inline one — and no
+   spacing exemption covered it, because at a 10px pitch a neighbour's 24px circle
+   overlaps this one's.
+   Block: grow symmetrically to the hit size. The gap is `hit − thickness`, so the pitch
+   is exactly the hit size and two zones meet without overlapping — and the rail pads its
+   block axis by the same half-growth, so the clip does not eat the first and last zone.
+   Inline: grow INWARD only. The rail clips (`overflow: hidden`) and ticks are
+   end-aligned, so a centred zone would hang past the end edge and come back cut to
+   19px; anchored to the tick's end edge it stays whole, and the rail's width carries
+   the hit size as its floor so the column has room for it. */
 .aparte-scroll-rail__tick::before {
   content: "";
   position: absolute;
-  inset: calc(-1 * var(--aparte-scroll-rail-gap) / 2) calc(-1 * var(--aparte-space-2));
+  inset-block: calc((var(--aparte-scroll-rail-tick-thickness) - var(--aparte-scroll-rail-hit-size)) / 2);
+  inset-inline-end: 0;
+  inset-inline-start: calc(var(--aparte-scroll-rail-tick-size) - var(--aparte-scroll-rail-hit-size));
 }
 
 .aparte-scroll-rail__tick:hover {
@@ -6888,7 +7372,7 @@ aparte-scroll-rail[data-empty] {
 }
 
 .aparte-scroll-rail__tick:focus-visible {
-  outline: var(--aparte-focus-outline-width) solid var(--aparte-primary);
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
@@ -6971,7 +7455,10 @@ aparte-sidebar,
   display: flex;
   align-items: center;
   gap: var(--aparte-space-3);
-  padding: var(--aparte-space-4) var(--aparte-space-4) var(--aparte-space-2);
+  /* Inline, every region reads `--aparte-sidebar-inset`: the header and footer padded
+     16 while the search and the body padded 12, and the column's content stood on two
+     vertical axes 4px apart — measured as four left edges on the app-shell demo. */
+  padding: var(--aparte-space-4) var(--aparte-sidebar-inset) var(--aparte-space-2);
 }
 
 .aparte-sidebar__brand {
@@ -6984,8 +7471,8 @@ aparte-sidebar,
 }
 
 .aparte-sidebar__search {
-  margin: var(--aparte-space-2) var(--aparte-space-3);
-  min-width: calc(var(--aparte-sidebar-width) - 2 * var(--aparte-space-3));
+  margin: var(--aparte-space-2) var(--aparte-sidebar-inset);
+  min-width: calc(var(--aparte-sidebar-width) - 2 * var(--aparte-sidebar-inset));
 }
 
 /* The body is the one region that scrolls; the list inside keeps its own gap. */
@@ -6994,7 +7481,7 @@ aparte-sidebar,
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--aparte-space-2) var(--aparte-space-3);
+  padding: var(--aparte-space-2) var(--aparte-sidebar-inset);
   scrollbar-width: thin;
   scrollbar-color: var(--aparte-scrollbar-thumb) var(--aparte-scrollbar-track);
 }
@@ -7003,7 +7490,7 @@ aparte-sidebar,
   display: flex;
   align-items: center;
   gap: var(--aparte-space-3);
-  padding: var(--aparte-space-3) var(--aparte-space-4);
+  padding: var(--aparte-space-3) var(--aparte-sidebar-inset);
   border-block-start: var(--aparte-border-width) solid var(--aparte-border);
   font-size: var(--aparte-font-size-sm);
 }
@@ -7048,7 +7535,7 @@ aparte-sidebar,
  * under 48rem, where the sidebar is a drawer; above it the column is simply there.
  *
  *     <header class="aparte-app-header">
- *       <button class="aparte-btn aparte-btn--icon aparte-app-header__toggle" type="button" aria-label="Toggle the sidebar" data-aparte-sidebar-toggle>☰</button>
+ *       <button class="aparte-btn aparte-btn--icon aparte-app-header__toggle" type="button" aria-label="Toggle the sidebar" data-aparte-sidebar-toggle><aparte-icon name="menu"></aparte-icon></button>
  *       <span class="aparte-app-header__title">Deploy checklist</span>
  *       <div class="aparte-app-header__actions">
  *         <span class="aparte-tag">gpt-4.1</span>
@@ -7109,15 +7596,38 @@ aparte-sidebar,
  * `height: 100dvh` for a page — and everything inside follows. Under 48rem the sidebar
  * leaves the grid to become a drawer, and the header's toggle appears.
  *
- *     <div class="aparte-app-shell" style="height: 18rem">
+ *     <div class="aparte-app-shell" style="height: 24rem">
  *       <aside class="aparte-sidebar">
- *         <div class="aparte-sidebar__header"><span class="aparte-sidebar__brand">aparté</span></div>
- *         <div class="aparte-sidebar__body"><aparte-conversation-list></aparte-conversation-list></div>
+ *         <div class="aparte-sidebar__header">
+ *           <span class="aparte-sidebar__brand">aparté</span>
+ *           <button class="aparte-btn aparte-btn--icon aparte-btn--sm" type="button" aria-label="New chat"><aparte-icon name="edit"></aparte-icon></button>
+ *         </div>
+ *         <div class="aparte-sidebar__search aparte-field-group">
+ *           <input class="aparte-field aparte-field--sm" type="search" placeholder="Search">
+ *         </div>
+ *         <div class="aparte-sidebar__body">
+ *           <div class="aparte-conv-group" role="group" aria-label="Today">
+ *             <div class="aparte-menu__label aparte-conv-group__label" aria-hidden="true">Today</div>
+ *             <div class="aparte-menu__item aparte-conv-item aparte-conv-item--active"><button class="aparte-conv-item__select" type="button"><span class="aparte-conv-item__title">Deploy checklist</span></button></div>
+ *             <div class="aparte-menu__item aparte-conv-item"><button class="aparte-conv-item__select" type="button"><span class="aparte-conv-item__title">Rename the staging bucket</span></button></div>
+ *           </div>
+ *           <div class="aparte-conv-group" role="group" aria-label="Yesterday">
+ *             <div class="aparte-menu__label aparte-conv-group__label" aria-hidden="true">Yesterday</div>
+ *             <div class="aparte-menu__item aparte-conv-item"><button class="aparte-conv-item__select" type="button"><span class="aparte-conv-item__title">Why is total a float?</span></button></div>
+ *           </div>
+ *         </div>
+ *         <div class="aparte-sidebar__footer"><span class="aparte-avatar aparte-avatar--sm">P</span> Paul</div>
  *       </aside>
- *       <header class="aparte-app-header"><span class="aparte-app-header__title">Deploy checklist</span></header>
+ *       <header class="aparte-app-header">
+ *         <span class="aparte-app-header__title">Deploy checklist</span>
+ *         <div class="aparte-app-header__actions"><span class="aparte-tag">gpt-4.1</span></div>
+ *       </header>
  *       <main class="aparte-app-shell__main">
  *         <aparte-chat>
- *           <aparte-chat-viewport></aparte-chat-viewport>
+ *           <aparte-chat-viewport>
+ *             <aparte-chat-bubble message-id="u1" data-role="user" content="Walk me through the deploy."></aparte-chat-bubble>
+ *             <aparte-chat-bubble message-id="a1" data-role="assistant" name="Assistant" content="Build, run the gate, tag, then push the tag — the workflow publishes from it."></aparte-chat-bubble>
+ *           </aparte-chat-viewport>
  *           <aparte-composer>
  *             <div class="aparte-composer-shell">
  *               <div class="aparte-composer-row">
@@ -7174,6 +7684,28 @@ aparte-sidebar,
   min-height: 0;
   height: auto;
 }
+
+/* A phone folds the shell to one column. The sidebar ELEMENT already leaves the grid
+   under 48rem — it becomes a fixed drawer behind the header's toggle — but the grid
+   kept its first column for it, and a class-only sidebar had no story at all: at 375px
+   the shell gave 259 of its 303px to the sidebar and left the chat a 43px band with a
+   send button cut in half. Same query as the element's own, so the recipe teaches the
+   screen the element renders. */
+@media (max-width: 48rem) {
+  .aparte-app-shell {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .aparte-app-shell > .aparte-app-header,
+  .aparte-app-shell__main {
+    grid-column: 1;
+  }
+  /* A sidebar that is not (yet) a drawer — the class recipe alone, or the element
+     before it upgrades — folds out of the flow rather than eating the column. */
+  .aparte-app-shell > .aparte-sidebar:not([data-drawer]),
+  .aparte-app-shell > aparte-sidebar:not([data-drawer]) {
+    display: none;
+  }
+}
 /*
  * aparté — the seam: two panes side by side, and the grid that lets one grow while
  * the other gives way. The fourth piece of the shell, after the sidebar, the header
@@ -7265,35 +7797,47 @@ aparte-split > [data-aparte-chat],
   box-sizing: border-box;
   border: 0;
   padding: 0;
-  background: var(--aparte-border);
+  /* A transparent TRACK: the seam is the 1px line painted by `::before`, centred in it,
+     and the grip is a short bar drawn on the track under the pointer. The track used
+     to be the seam — 4px of paint, four times the kit's rule, with nothing to hold. */
+  background: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
   cursor: col-resize;
   touch-action: none;
+}
+
+.aparte-split__handle::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: calc(50% - var(--aparte-split-seam-width) / 2);
+  inline-size: var(--aparte-split-seam-width);
+  background: var(--aparte-border);
   transition: background-color var(--aparte-duration-fast) var(--aparte-ease);
 }
 
-.aparte-split__handle:hover,
-.aparte-split__handle[data-dragging] {
+.aparte-split__handle:hover::before,
+.aparte-split__handle[data-dragging]::before {
   background: var(--aparte-primary);
 }
 
-/* A real outline, and the ring kept as decoration.
-
-   The seam's whole keyboard story is arrowing it, and its only focus indicator was
-   `--aparte-focus-ring` — a soft wash that measures 1.39:1 against the page in the
-   light palette and 1.83:1 in the dark one, where WCAG asks 3:1 of a focus indicator.
-   `outline: none` with nothing in its place is the shape of that failure: the
-   indicator was not weak, it was absent, on a 4px band with `border: 0` that a
-   keyboard user has no other way to find.
+/* The grip: the convention of every editor's split, so the seam reads as something to
+   take hold of. Drawn as a background so it needs no third element. */
+.aparte-split__handle:hover,
+.aparte-split__handle[data-dragging] {
+  background-image: linear-gradient(var(--aparte-primary), var(--aparte-primary));
+  background-size: calc(var(--aparte-split-seam-width) * 3) var(--aparte-space-8);
+}
 
-   The outline is what carries the contrast (3.54:1 light, 7.36:1 dark, measured); the
-   shadow stays because it reads as a glow AROUND the seam and the two do not fight.
-   The forced-colors entry in responsive.css keeps overriding the colour only — it is
-   now overriding an outline that exists rather than substituting for one that does
-   not. */
+/* The one ring. The seam's whole keyboard story is arrowing it, and its only focus
+   indicator used to be a soft wash at 1.39:1 against the page — not weak, absent, on a
+   4px band with `border: 0` that a keyboard user has no other way to find. The outline
+   carries the contrast (3.54:1 light, 7.36:1 dark, measured), and it is the same outline
+   every other control draws. */
 .aparte-split__handle:focus-visible {
   outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
-  outline-offset: 0;
-  box-shadow: var(--aparte-focus-ring);
+  outline-offset: var(--aparte-focus-outline-offset);
 }
 
 /* The hit slop: a 4px seam is a 4px target, and a pointer misses it. The pseudo-element
@@ -7382,6 +7926,14 @@ aparte-split[orientation='vertical'][primary='end']:not([data-stacked]),
 aparte-split[orientation='vertical'] > .aparte-split__handle,
 .aparte-split--vertical > .aparte-split__handle {
   cursor: row-resize;
+  background-size: var(--aparte-space-8) calc(var(--aparte-split-seam-width) * 3);
+}
+aparte-split[orientation='vertical'] > .aparte-split__handle::before,
+.aparte-split--vertical > .aparte-split__handle::before {
+  inset-block: calc(50% - var(--aparte-split-seam-width) / 2) auto;
+  inset-inline: 0;
+  inline-size: auto;
+  block-size: var(--aparte-split-seam-width);
 }
 
 aparte-split[orientation='vertical'] > .aparte-split__handle::after,
@@ -7639,6 +8191,13 @@ aparte-split[disabled] > .aparte-split__handle:hover {
 .aparte-code-content-wrapper pre {
   margin: 0;
   padding: var(--aparte-space-6);
+  /* The code typeface, at a code size. This rule declared neither and the block fell
+     into the UA's generic `monospace` (Courier New on Windows) at the PROSE's size and
+     leading; only inline code read the family. On the wrapper's `pre`, whatever class
+     the highlighter puts on its replacement. */
+  font-family: var(--aparte-code-font-family);
+  font-size: var(--aparte-code-block-font-size);
+  line-height: var(--aparte-code-block-line-height);
   /* Wrap long lines instead of a horizontal scrollbar. `pre-wrap` honours
      newlines + indentation but soft-wraps overflowing lines; `overflow-wrap:
      anywhere` breaks unbreakable tokens (long URLs, hashes). Applies to both
@@ -7674,23 +8233,11 @@ aparte-split[disabled] > .aparte-split__handle:hover {
   }
 }
 
-/* Windows high contrast. In forced-colors mode the UA repaints colours and
-   drops box-shadow entirely — so the focus indicators drawn with
-   --aparte-focus-ring, and the error ring on an avatar, do not merely change
-   colour, they VANISH. An outline is painted, and `Highlight` is the system's
-   own focus colour, so the indicator survives without fighting the user's
-   palette. Only the indicators that disappear are restated here: everything
-   whose affordance is text or a border already survives on its own — which the
-   split's seam does not, being a 4px band with `border: 0` whose entire keyboard
-   story is arrowing it. */
+/* Windows high contrast. In forced-colors mode the UA repaints colours and drops
+   box-shadow entirely. Every focus indicator is an outline now, which forced colours
+   paint on their own — the one indicator drawn with a box-shadow is the error ring on
+   an avatar, restated here as an outline so it does not vanish. */
 @media (forced-colors: active) {
-  .aparte-thumb--image[role='button']:focus-visible,
-  .aparte-split__handle:focus-visible,
-  .aparte-provider-select:focus,
-  .aparte-model-select:focus {
-    outline: var(--aparte-focus-outline-width) solid Highlight;
-  }
-
   .aparte-message[data-error] .aparte-avatar {
     outline: var(--aparte-focus-outline-width) solid CanvasText;
   }
@@ -7774,15 +8321,28 @@ aparte-split[disabled] > .aparte-split__handle:hover {
     opacity: 1;
   }
 
-  /* Nor the ✕ on a pending attachment, which is the only way to remove one. */
+  /* Nor the ✕ on a pending attachment, which is the only way to remove one — and
+     seeing it is no use at 18px, under the 24 of WCAG 2.2 SC 2.5.8. 24 is not a new
+     number: it is the box `aparte-btn--sm` already draws, so this is the component
+     giving the recipe back its own size on touch rather than out-specifying it.
+     Not `--aparte-touch-target-size`: 44px inside a 72px tile would swallow the
+     picture, and full parity with the neighbouring controls needs the tile to grow
+     with it — a second decision, not this floor. */
   .aparte-thumb__remove {
     opacity: 1;
+    --aparte-thumb-remove-size: var(--aparte-btn-size-sm);
   }
 
   /* Hover cannot reveal the row's ⋯ on touch — keep it visible and tappable. */
   .aparte-conv-item__more {
     opacity: 1;
-    --aparte-conv-action-btn-size: 28px;
+    --aparte-conv-action-btn-size: var(--aparte-touch-target-size);
+  }
+
+  /* The composer's own controls: 36 at rest, the touch target here — the send button, the
+     input's action button and the editor's single-line height move together. */
+  .aparte-composer-row {
+    --aparte-composer-control-size: var(--aparte-touch-target-size);
   }
 
   /* A 4px seam is no target for a finger — the same modality rule the buttons above