@terpjs/react-core 0.8.0 → 0.10.0

package/src/styles.ts

@@ -13,12 +13,18 @@
  * anything. A new escalation is therefore a claim that some element still styles
  * itself inline on the same property — state it, with the file, or do not add it.
  *
- * The migration itself is not finished: five modules still declare module-scope
- * base style objects (23 between them, gated in markers.test.ts). They are just no
- * longer in anyone's way — of what they render, only `module-nav` and
- * `resource-list` carry a marker, and no rule in `terp.state` targets either, so
- * retiring the last escalations left nothing inert. Checked by scanning the layer
- * against those files rather than by spot-checking a hover.
+ * THE LEDGER IS EMPTY. No module declares a module-scope base style object any more,
+ * and the unmarked-surface worklist is empty with it — both gated in markers.test.ts,
+ * both kept rather than deleted, for the reason the escalation ledger below is kept:
+ * an empty gate is where the next entry has to justify itself.
+ *
+ * And the measure is now the whole surface rather than the annotated part of it. The
+ * ledger counts module-scope `CSSProperties` declarations, which a call-site literal and
+ * an unannotated style object both slip past — that is how the built-in admin views kept
+ * five base styles through the entire migration with both ratchets reading clean. A third
+ * gate counts inline style SITES per file, so the only way out of it is to render none;
+ * the nine that remain are ADR 0094 §3's permanent inline side and nothing else, named
+ * one by one in markers.test.ts.
  *
  * A migrated component gets its base here and renders no `style={}` for it —
  * though it may still pass an inline value the sheet has no business owning, which
@@ -68,11 +74,37 @@
  * is what lets an app override any framework rule without `!important` — the
  * restyling this phase exists to enable.
  *
+ * ## Motion
+ *
+ * Every `transition` here names the published motion scale rather than a literal.
+ * It wrote `150ms ease` 28 times and `100ms ease` once while reading a motion token
+ * zero times — four duration tokens and three easings published in 2a with no reader,
+ * which is the shape `--color-fg-on-brand` was deleted for. Wiring them was provably
+ * inert: `--motion-duration-fast` IS `150ms`, `--motion-duration-instant` IS `100ms`
+ * and `--motion-easing-standard` IS `ease`, so all 29 literals mapped onto a token
+ * pair and no computed value changed.
+ *
+ * Four tokens stay unread, and that is a recorded position rather than an oversight:
+ * `--motion-duration-base`, `--motion-duration-slow`, `--motion-easing-entrance` and
+ * `--motion-easing-exit` map onto no literal this sheet contains. Deleting them is a
+ * contract change (the manifest publishes them); giving them readers means inventing
+ * overlay entrance/exit animations, which is a behaviour change dressed as a token
+ * wiring — and the screenshot lane runs with `animations: "disabled"`, so it could not
+ * see either the animation or a wrong duration in it. They are named in
+ * `tokens.guard.test.ts` as an exact list, so wiring one shrinks that list and
+ * publishing an eighth forces the decision instead of drifting.
+ *
+ * The spinner's `0.8s` is the one deliberate literal left. It is a rotation period
+ * rather than an interaction step, and the scale tops out at 400ms, so there is no
+ * token to name — the gate is scoped to `transition` for exactly that reason.
+ *
  * The injector is idempotent, SSR-safe (guarded on `document`), and appends
  * the rules through `textContent` — never `innerHTML` — so no HTML sink is
  * touched.
  */
 
+import { WIDE_VIEWPORT_QUERY } from "./breakpoints";
+
 /** The `<style>` element id used to detect a prior injection. */
 export const TERP_STYLES_ID = "terp-core-styles";
 
@@ -113,6 +145,37 @@ export const TERP_STYLES_CSS = `
    depend on that at all: a custom property declared on an ancestor is inherited
    rather than cascaded against, so a DataView stamping the attribute on itself
    wins over :root whatever the source order. */
+/* The comfortable island, which ADR 0094 deferred "until something asks" — and the shell
+   taking a density of its own is what asked. DataView's own docstring names the gap: inside an
+   already-compact subtree, density="comfortable" did not make anything comfortable, because
+   comfortable was the ABSENCE of an attribute and absence cannot override an ancestor.
+   That was fine while nothing could put a DataView inside a compact subtree. With
+   AppShell density="compact" it becomes a legal prop combination that silently does nothing —
+   the shape this phase keeps refusing, most recently in Select's options union. (A running tally
+   lived here and in four other places, and two of them said three. A citation keeps.)
+   The mechanism is the compact rule mirrored, and it works through INHERITANCE rather than
+   specificity: the nearest ancestor carrying either attribute sets the live tokens for its
+   subtree, so an island simply re-sets them. The two selectors never match the same element,
+   so they never compete. Unlayered for the compact rule's reason — inside a layer it would
+   tie with the contract's own unlayered :root values whenever the attribute lands on <html>,
+   which is what the :root-qualified copies below settle.
+   The values are the :root values by construction, so stamping comfortable where nothing is
+   compact computes exactly what it computed before: provably zero-diff. */
+/* Each selector is written twice, and the :root-qualified copy is the load-bearing one. The
+   contract declares these same custom properties on :root, unlayered, at (0,1,0) — and a
+   bare [data-density="..."] on <html> is ALSO (0,1,0), so the two tied and only the order
+   the two sheets happened to load decided the winner. A production build extracts tokens.css
+   to a <link> that precedes the injected sheet, so react-core won by construction and the
+   exposure was the dev server and any host loading the tokens late. :root[data-density] is
+   (0,2,0) and wins outright; the unqualified copy stays for a density island on a subtree,
+   where there is no :root to qualify and nothing to compete with. */
+:root[data-density="comfortable"],
+[data-density="comfortable"] {
+  --density-control-min-height: var(--density-comfortable-control-min-height);
+  --density-cell-pad-y: var(--density-comfortable-cell-pad-y);
+  --density-cell-pad-x: var(--density-comfortable-cell-pad-x);
+}
+:root[data-density="compact"],
 [data-density="compact"] {
   --density-control-min-height: var(--density-compact-control-min-height);
   --density-cell-pad-y: var(--density-compact-cell-pad-y);
@@ -152,9 +215,26 @@ body {
    they match every scrollable element globally). Paired with the color-scheme
    declaration on the token roots so any native chrome we do not restyle here
    (notably the native <select> option popup) also follows the theme. */
+/* And the gutter is reserved whether or not the page is currently long enough to need
+   it. Without this, every navigation between a page that fits and a page that does not
+   changes the width of the content box by the scrollbar's width, so the whole layout —
+   the header, the table, the centred login card — jumps sideways on the way in and back
+   on the way out. The document is the scroll container here (the sidebar is sticky in
+   normal flow rather than a scroller of its own), so the root is the right and only
+   place for it.
+
+   stable, not "stable both-edges": the gutter belongs where the scrollbar goes. The
+   cost is that a page which never scrolls is off true viewport centre by the gutter,
+   most visibly on the sign-in screen, and that is the trade every app that reserves the
+   gutter takes. It is layered, so an app that would rather have the jump can turn it off
+   from its own unlayered theme.css.
+
+   This one moves pixels, which is why it is a deliberate line here rather than something
+   to slip in beside a refactor: it narrows the content box of every scroll-free page. */
 html {
   scrollbar-width: thin;
   scrollbar-color: var(--color-neutral-300) transparent;
+  scrollbar-gutter: stable;
 }
 ::-webkit-scrollbar {
   width: 10px;
@@ -198,8 +278,12 @@ html {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   line-height: 1.2;
-  transition: background-color 150ms ease, color 150ms ease,
-    border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-standard),
+    color var(--motion-duration-fast) var(--motion-easing-standard),
+    border-color var(--motion-duration-fast) var(--motion-easing-standard),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-standard),
+    transform var(--motion-duration-instant) var(--motion-easing-standard);
 }
 [data-terp="button"][data-variant="primary"] {
   background: var(--color-brand-primary);
@@ -219,6 +303,33 @@ html {
   background: transparent;
   color: var(--color-neutral-700);
 }
+/* Size. Two rules, not three: the standard control's geometry is the base rule above, so
+   md is the absence of an attribute — the same shape density takes, where "comfortable" is
+   the token sheet's own :root value and the attribute for it matches no rule.
+
+   The heights are a calc() off the density token rather than a second family of tokens,
+   and that is what makes size and density compose without either knowing about the other:
+   a small button in a compact subtree resolves 2rem - 0.5rem, because the compact
+   re-scoping has already moved the token this reads. A --control-height-sm of its own
+   would have needed a compact counterpart, a re-scoping line, and a rule to keep the two
+   in step, to express something the space scale already says. */
+[data-terp="button"][data-size="sm"] {
+  min-height: calc(var(--density-control-min-height) - var(--space-2));
+  padding: 0 var(--space-3);
+  font-size: var(--font-size-xs);
+}
+[data-terp="button"][data-size="lg"] {
+  min-height: calc(var(--density-control-min-height) + var(--space-2));
+  padding: 0 var(--space-6);
+  font-size: var(--font-size-base);
+}
+/* Full width beats the base rule's width: fit-content on specificity — (0,2,0) against
+   (0,1,0) in the same layer — so it needs neither a layer of its own nor an escalation.
+   It exists as a prop because the only other way to reach it was the caller writing
+   style={{ width: "100%" }}, which app modules may not do. */
+[data-terp="button"][data-full-width="true"] {
+  width: 100%;
+}
 [data-terp="button-icon"] {
   display: inline-flex;
   align-items: center;
@@ -331,7 +442,9 @@ html {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-normal);
   line-height: 1.25;
-  transition: border-color 150ms ease, box-shadow 150ms ease;
+  transition:
+    border-color var(--motion-duration-fast) var(--motion-easing-standard),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
 }
 input[data-terp="input"] {
   min-height: var(--density-control-min-height);
@@ -368,6 +481,14 @@ textarea[data-terp="input"] {
   flex-direction: column;
   gap: var(--space-2);
   margin: 0;
+  /* The list reset both of these primitives document a use for and neither had. as="ul" is
+     offered by Stack and Grid alike, and a <ul> arrives with a 40px inline padding and a
+     marker per child from the UA sheet — so the documented use rendered bulleted and indented.
+     hubpage-grid and resource-list-items already carry exactly this, because both are always
+     lists; these two are lists only when asked, which is why it was missed. A no-op on a div,
+     and the data-padding rules outweigh it at (0,2,0) when an inset is asked for. */
+  padding: 0;
+  list-style: none;
 }
 [data-terp="stack"][data-direction="row"] { flex-direction: row; }
 [data-terp="stack"][data-gap="0"] { gap: var(--space-0); }
@@ -378,6 +499,116 @@ textarea[data-terp="input"] {
 [data-terp="stack"][data-gap="6"] { gap: var(--space-6); }
 [data-terp="stack"][data-gap="8"] { gap: var(--space-8); }
 [data-terp="stack"][data-wrap="true"] { flex-wrap: wrap; }
+/* Padding, the dimension Stack did not have — which is why a padded region was reachable
+   only through a Card, whose border and background came along whether or not they were
+   wanted. A step on the same token scale as gap, so there are no arbitrary insets. */
+[data-terp="stack"][data-padding="0"] { padding: var(--space-0); }
+[data-terp="stack"][data-padding="1"] { padding: var(--space-1); }
+[data-terp="stack"][data-padding="2"] { padding: var(--space-2); }
+[data-terp="stack"][data-padding="3"] { padding: var(--space-3); }
+[data-terp="stack"][data-padding="4"] { padding: var(--space-4); }
+[data-terp="stack"][data-padding="6"] { padding: var(--space-6); }
+[data-terp="stack"][data-padding="8"] { padding: var(--space-8); }
+/* The wide half of a responsive Stack. This block must stay AFTER the rules above and not
+   merely above the Grid family: a stack with direction {narrow: "row", wide: "column"}
+   carries both data-direction="row" and data-direction-wide="column", and the two selectors
+   weigh the same (0,2,0), so nothing but source order decides which wins above the cutover.
+   Same for every gap pair. styles.test.ts pins the order, because getting it backwards
+   renders the narrow value at every width and looks like the prop not working.
+
+   The query is INTERPOLATED from ./breakpoints, which is the one \${…} in this sheet and is
+   deliberate rather than a slip: it is the complement of the exact string AppShell and
+   DataView hand to matchMedia, so the two halves of the cutover partition the viewport by
+   construction. Written out here they would be two literals that agree until someone edits
+   one. (The convention of grepping this literal for \${ still holds — there should be
+   exactly this one.) */
+@media ${WIDE_VIEWPORT_QUERY} {
+  [data-terp="stack"][data-direction-wide="column"] { flex-direction: column; }
+  [data-terp="stack"][data-direction-wide="row"] { flex-direction: row; }
+  [data-terp="stack"][data-gap-wide="0"] { gap: var(--space-0); }
+  [data-terp="stack"][data-gap-wide="1"] { gap: var(--space-1); }
+  [data-terp="stack"][data-gap-wide="2"] { gap: var(--space-2); }
+  [data-terp="stack"][data-gap-wide="3"] { gap: var(--space-3); }
+  [data-terp="stack"][data-gap-wide="4"] { gap: var(--space-4); }
+  [data-terp="stack"][data-gap-wide="6"] { gap: var(--space-6); }
+  [data-terp="stack"][data-gap-wide="8"] { gap: var(--space-8); }
+  /* The split's two columns, at the one cutover the chrome around it already uses.
+     Three list tracks, three rules, no length ever handed in as a style — the listWidth
+     prop is a step for the reason Grid's minColumn is (ADR 0097 §4). The detail track is
+     minmax(0, 1fr) so it takes the remainder and still lets a wide table scroll inside
+     itself rather than widening the row. */
+  [data-terp="splitpage-panes"][data-list-width="sm"] {
+    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
+  }
+  [data-terp="splitpage-panes"][data-list-width="md"] {
+    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
+  }
+  [data-terp="splitpage-panes"][data-list-width="lg"] {
+    grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
+  }
+}
+
+/* Grids -------------------------------------------------------------------- */
+/* The two-dimensional primitive. The base rule is the DEFAULT shape — auto-fit at the
+   sm track floor, stretched cells — so the three defaults match no attribute, exactly
+   as density's "comfortable" and Button's md do.
+
+   min(16rem, 100%) rather than a bare 16rem, and the min() is load-bearing rather than
+   defensive: a bare floor wider than the container makes the single track overflow it,
+   so a grid in a narrow panel would scroll sideways instead of going one-column. Same
+   mechanism the hub grid uses, and the same 16rem, so the two agree by construction
+   rather than by coincidence.
+
+   The four floors are rem literals rather than tokens on purpose. They are a design
+   scale with exactly one consumer today, and vocabulary published before something
+   reads it gets retired here — the four density cell tokens were deleted for precisely
+   that and came back with their readers. They become tokens the day an app asks to move
+   them, which is also when a compact counterpart would have to be decided. */
+[data-terp="grid"] {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
+  gap: var(--space-4);
+  align-items: stretch;
+  min-width: 0;
+  margin: 0;
+  /* See the note on stack above: the same reset, for the same documented as="ul". */
+  padding: 0;
+  list-style: none;
+}
+[data-terp="grid"][data-min-column="xs"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
+}
+[data-terp="grid"][data-min-column="md"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
+}
+[data-terp="grid"][data-min-column="lg"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
+}
+/* A fixed count. minmax(0, 1fr) rather than a bare 1fr, because 1fr floors at the
+   track's min-content size — so one long unbroken word in a cell widens its column and
+   the grid overflows its container, which is the failure a two-column form of long field
+   labels walks straight into. */
+[data-terp="grid"][data-columns="1"] { grid-template-columns: minmax(0, 1fr); }
+[data-terp="grid"][data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+[data-terp="grid"][data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+[data-terp="grid"][data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+[data-terp="grid"][data-gap="0"] { gap: var(--space-0); }
+[data-terp="grid"][data-gap="1"] { gap: var(--space-1); }
+[data-terp="grid"][data-gap="2"] { gap: var(--space-2); }
+[data-terp="grid"][data-gap="3"] { gap: var(--space-3); }
+[data-terp="grid"][data-gap="4"] { gap: var(--space-4); }
+[data-terp="grid"][data-gap="6"] { gap: var(--space-6); }
+[data-terp="grid"][data-gap="8"] { gap: var(--space-8); }
+[data-terp="grid"][data-align="start"] { align-items: start; }
+[data-terp="grid"][data-align="center"] { align-items: center; }
+[data-terp="grid"][data-align="end"] { align-items: end; }
+[data-terp="grid"][data-padding="0"] { padding: var(--space-0); }
+[data-terp="grid"][data-padding="1"] { padding: var(--space-1); }
+[data-terp="grid"][data-padding="2"] { padding: var(--space-2); }
+[data-terp="grid"][data-padding="3"] { padding: var(--space-3); }
+[data-terp="grid"][data-padding="4"] { padding: var(--space-4); }
+[data-terp="grid"][data-padding="6"] { padding: var(--space-6); }
+[data-terp="grid"][data-padding="8"] { padding: var(--space-8); }
 
 /* Detail lists ------------------------------------------------------------- */
 /* The term and value are inline boxes inside a block row, which is what makes
@@ -386,14 +617,66 @@ textarea[data-terp="input"] {
   margin: 0;
   display: grid;
   gap: var(--space-1);
+  grid-template-columns: minmax(0, 1fr);
+}
+[data-terp="detail-list-row"] {
+  min-width: 0;
 }
 [data-terp="detail-list-term"] {
   display: inline;
   font-weight: var(--font-weight-medium);
 }
+/* The colon belongs to the inline layout alone, so it is a rule rather than a text node —
+   aligned and stacked must not have one, and no rule can withdraw a text node. Decorative
+   either way: the dt/dd pairing is what carries the relationship to assistive tech. */
+[data-terp="detail-list"]:not([data-layout]) [data-terp="detail-list-term"]::after {
+  content: ": ";
+  white-space: pre;
+}
 [data-terp="detail-list-value"] {
   display: inline;
   margin: 0;
+  min-width: 0;
+  /* Flooring the track at 0 is not enough on its own, and the specimen is what showed it: a
+     64-character digest has nothing to break at, so it overflows the column whatever the
+     column's floor. This is the declaration that makes it wrap. Same answer profile-email
+     already uses for a long address — where it is noted as unobservable, because that
+     screen's session is a fixed short one; detail-list-long-value is the first picture of
+     the mechanism anywhere in the suite. */
+  overflow-wrap: anywhere;
+}
+/* Two pairs per row. minmax(0, 1fr) rather than 1fr for the reason Grid's fixed counts need
+   it: a bare 1fr floors at min-content, and a 64-character digest with nothing to break on
+   then widens its column and pushes the list past its container — which is the defect the
+   diagnosis was describing, rather than the missing alignment it named. */
+[data-terp="detail-list"][data-columns="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--space-4);
+}
+/* Aligned: every label in a shared column. The row wrapper becomes display: contents so the
+   dt and dd are grid items of the dl itself — the only way to align across rows without
+   changing the DOM, and the reason the wrapper needed a marker at all. */
+[data-terp="detail-list"][data-layout="aligned"] {
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--space-3);
+}
+[data-terp="detail-list"][data-layout="aligned"][data-columns="2"] {
+  grid-template-columns: repeat(2, auto minmax(0, 1fr));
+}
+[data-terp="detail-list"][data-layout="aligned"] [data-terp="detail-list-row"] {
+  display: contents;
+}
+[data-terp="detail-list"][data-layout="aligned"] [data-terp="detail-list-term"],
+[data-terp="detail-list"][data-layout="aligned"] [data-terp="detail-list-value"],
+[data-terp="detail-list"][data-layout="stacked"] [data-terp="detail-list-term"],
+[data-terp="detail-list"][data-layout="stacked"] [data-terp="detail-list-value"] {
+  display: block;
+}
+/* Stacked: label above value. The label takes the muted step so the pair reads as one unit
+   rather than two lines of equal weight. */
+[data-terp="detail-list"][data-layout="stacked"] [data-terp="detail-list-term"] {
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-muted);
 }
 
 /* Checkboxes / radios / switches ------------------------------------------- */
@@ -422,7 +705,7 @@ textarea[data-terp="input"] {
   block-size: 1.25rem;
   accent-color: var(--color-fg-accent);
   cursor: pointer;
-  transition: background-color 150ms ease;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 [data-terp="radio-group"] {
   display: grid;
@@ -471,6 +754,141 @@ textarea[data-terp="input"] {
 [data-terp="card-heading"] {
   min-width: 0;
 }
+/* Chrome off, heading kept. Three declarations removed rather than a second component
+   with six markers of its own describing the same DOM: a titled region inside something
+   that is already a surface wants no second border, and the commonest instance is a
+   section whose body is a DataView — boxed, the table gets a border inside a border and
+   loses the full width its own scroll container gives it.
+
+   padding: 0 rather than dropping the declaration, because the base rule sets it and an
+   absent value inherits nothing useful. */
+[data-terp="card"][data-variant="plain"] {
+  background: none;
+  border-color: transparent;
+  padding: 0;
+}
+
+/* Prose --------------------------------------------------------------------- */
+/* The first readers of the published type scale. --font-line-height-* and
+   --font-letter-spacing-* shipped in 0.7.0 with nothing reading them, and unlike the
+   motion family they could not simply be wired in: this sheet writes line heights of
+   1.2, 1.25, 1.3, 1.4 and 1.5, and the scale offers 1.2, 1.35, 1.5 and 1.7 — so only 8
+   of 32 literals map, and converting the rest would change rendered line heights across
+   a dozen components. That is a typography pass with its own baselines. New components
+   have nothing depending on their metrics, so they take the published scale and the
+   family gets honest consumers; tokens.guard.test.ts tracks what is still unread.
+
+   Headings carry no colour: they inherit the page's ink, so a heading inside a tinted
+   surface stays legible without a rule per surface. margin: 0 because the browser
+   default fights the parent's gap, which is the same reason page-title and card-title
+   both declare it. */
+[data-terp="heading"] {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+  letter-spacing: var(--font-letter-spacing-tight);
+}
+[data-terp="heading"][data-size="sm"] {
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-snug);
+  letter-spacing: var(--font-letter-spacing-base);
+}
+[data-terp="heading"][data-size="base"] {
+  font-size: var(--font-size-base);
+  line-height: var(--font-line-height-snug);
+  letter-spacing: var(--font-letter-spacing-base);
+}
+[data-terp="heading"][data-size="lg"] { font-size: var(--font-size-lg); }
+[data-terp="heading"][data-size="xl"] { font-size: var(--font-size-xl); }
+
+/* Body copy. The base rule is the default tone and step, so neither stamps an
+   attribute. A measure is capped in ch rather than rem, because the readable line
+   length is a count of characters and follows the font size — in rem it would stop
+   being a measure the moment an app changed the type scale. */
+[data-terp="text"] {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-base);
+  line-height: var(--font-line-height-base);
+  color: var(--color-fg-default);
+}
+[data-terp="text"][data-size="xs"] { font-size: var(--font-size-xs); }
+[data-terp="text"][data-size="sm"] { font-size: var(--font-size-sm); }
+[data-terp="text"][data-size="lg"] {
+  font-size: var(--font-size-lg);
+  line-height: var(--font-line-height-relaxed);
+}
+[data-terp="text"][data-tone="muted"] { color: var(--color-fg-muted); }
+[data-terp="text"][data-tone="subtle"] { color: var(--color-fg-subtle); }
+[data-terp="text"][data-measure="narrow"] { max-width: 48ch; }
+[data-terp="text"][data-measure="base"] { max-width: 72ch; }
+
+/* Code. The inline form takes a tinted chip so an identifier reads as one inside a
+   sentence; the block form drops the chip — a bordered box around a bordered box again —
+   and keeps the border on the <pre>. overflow-x on the block is what makes a long line
+   scroll rather than widen the page, and it is the reason the <pre> is focusable: a
+   scroll container a keyboard cannot reach cannot be scrolled at all (SC 2.1.1). */
+[data-terp="code"] {
+  font-family: var(--font-family-mono);
+  font-size: 0.875em;
+  padding: 0.1em 0.32em;
+  border-radius: var(--radius-sm);
+  background: var(--color-neutral-100);
+  color: var(--color-fg-default);
+}
+[data-terp="code-block"] {
+  margin: 0;
+  padding: var(--space-3);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md);
+  background: var(--color-neutral-50);
+  overflow-x: auto;
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-base);
+}
+[data-terp="code-block"] [data-terp="code"] {
+  padding: 0;
+  background: none;
+  border-radius: 0;
+  font-size: inherit;
+}
+
+/* Links. Two selector shapes for one marker, because an in-app link's marker lands on a
+   wrapper: navLink accepts { to, children } and nothing else, so the router's own Link
+   cannot be handed an attribute. The external case marks the anchor itself. Same shape
+   HubCard already uses, for the same reason. */
+[data-terp="link"],
+[data-terp="link"] a {
+  color: var(--color-fg-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+/* Dividers ----------------------------------------------------------------- */
+/* An <hr>, so the separation reaches the accessibility tree and not only the pixels.
+   Its own border reset first: a bare <hr> comes with a browser border and margin that
+   differ between engines, which is most of why a module reaches for a bordered div.
+
+   The vertical form takes its height from its flex or grid line rather than inventing
+   one, so it works between the items of a row Stack and is zero-height in a block
+   parent. That is worth knowing before reaching for it, and it is why its specimen
+   renders inside a fixed-height row — with equal-height siblings there would be nothing
+   to see either way. */
+[data-terp="divider"] {
+  border: 0;
+  margin: 0;
+  align-self: stretch;
+  background: var(--color-neutral-200);
+  block-size: 1px;
+  inline-size: auto;
+}
+[data-terp="divider"][data-orientation="vertical"] {
+  block-size: auto;
+  inline-size: 1px;
+}
+
 [data-terp="card-actions"] {
   flex-shrink: 0;
 }
@@ -513,12 +931,44 @@ textarea[data-terp="input"] {
   margin-block-end: -1px;
   border-top-left-radius: var(--radius-sm);
   border-top-right-radius: var(--radius-sm);
-  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-standard),
+    color var(--motion-duration-fast) var(--motion-easing-standard),
+    border-color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 [data-terp="tab-panel"] {
   color: var(--color-neutral-900);
 }
 
+/* Module navigation -------------------------------------------------------- */
+/* Secondary tabs for a module's sub-pages, and very nearly the same object as tab
+   above: a transparent 2px edge the active item colours, muted ink the active item
+   darkens. The difference is that these are router links rather than buttons, and
+   that difference decides where the active state is keyed — see terp.state.
+
+   The edges are logical (border-block-end) to match tab and appshell-footer rather
+   than the physical borderBottom the component declared. Identical in every writing
+   mode this framework ships, and the sheet already had one convention. */
+[data-terp="module-nav"] {
+  border-block-end: 1px solid var(--color-neutral-200);
+}
+[data-terp="module-nav-list"] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-3);
+}
+[data-terp="module-nav-link"] {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-2) 0;
+  color: var(--color-neutral-600);
+  text-decoration: none;
+  border-block-end: 2px solid transparent;
+}
+
 /* Breadcrumbs -------------------------------------------------------------- */
 /* The trail owns its whole subtree, so the list and its items are addressed
    structurally and the current crumb by the aria-current it already carries —
@@ -549,7 +999,7 @@ textarea[data-terp="input"] {
 [data-terp="breadcrumbs"] a {
   color: var(--color-neutral-600);
   text-decoration: none;
-  transition: color 150ms ease;
+  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 [data-terp="breadcrumbs-separator"] {
   display: inline-flex;
@@ -572,7 +1022,29 @@ textarea[data-terp="input"] {
      shell's hover rule has keyed on it since before this migration.
 
    That is why nothing here needs a style object handed across a public boundary, which
-   is what AppShellLinkContext.style and RenderBrandLink's style param used to be. */
+   is what AppShellLinkContext.style and RenderBrandLink's style param used to be.
+
+   The sidebar paints from its OWN colour family now — --color-sidebar-bg / -fg / -muted /
+   -accent / -border — rather than from the neutral ramp. Those five were declared in all five
+   themes and read by NOTHING, which is exactly the offence --color-fg-on-brand was deleted
+   for; the difference is that here the vocabulary is right and the readers were missing, so
+   wiring is the fix and deleting would have been the mistake. It went unnoticed for four
+   releases because tokens.guard.test.ts tracked three families and --color- was not one.
+
+   Mostly inert, and recounted rather than estimated: of the twenty-five declarations, FIFTEEN
+   already equalled the neutral the sheet was reading — background, foreground and border agree
+   in every theme except the light background. Ten move, in three groups.
+
+   The light sidebar goes #ffffff -> #f8fafc, a faint separation from the canvas that the dark
+   themes always had and light never did. The nav link's resting ink dims in every theme (light
+   #334155 -> #475569, dark #e2e8f0 -> #b4c0d0), which is the deliberate half: a sidebar's
+   resting links are secondary to the page and the active one should carry the weight. And the
+   hover wash changes in four themes — every one but light, where the two values agree — which
+   an earlier version of this comment did not mention at all, because it counted the resting
+   declarations and forgot that accent is one of the five.
+
+   Every text pairing was checked before being wired, not after: 7.24:1 light, 7.94 dark, 7.50
+   midnight, 7.60 twilight, and 18.42 for contrast against its AAA floor. */
 [data-terp="appshell"] {
   display: flex;
   align-items: stretch;
@@ -597,13 +1069,13 @@ textarea[data-terp="input"] {
   top: 0;
   height: 100vh;
   overflow-x: hidden;
-  width: 15rem;
-  background: var(--color-neutral-0);
-  border-inline-end: 1px solid var(--color-neutral-200);
-  transition: width 150ms ease;
+  width: var(--shell-sidebar-width-expanded);
+  background: var(--color-sidebar-bg);
+  border-inline-end: 1px solid var(--color-sidebar-border);
+  transition: width var(--motion-duration-fast) var(--motion-easing-standard);
 }
 [data-terp="appshell-sidebar"][data-collapsed="true"] {
-  width: 4rem;
+  width: var(--shell-sidebar-width-collapsed);
 }
 /* The mobile drawer, reached from the shell root's variant rather than from an attribute
    of its own — the viewport is one fact and the root owns it. 100dvh rather than 100vh so
@@ -636,16 +1108,51 @@ textarea[data-terp="input"] {
   gap: var(--space-2);
   padding: var(--space-1) var(--space-2);
   min-height: 2.25rem;
-  color: var(--color-neutral-900);
+  color: var(--color-sidebar-fg);
   text-decoration: none;
   border-radius: var(--radius-md);
   box-sizing: border-box;
-  transition: background-color 150ms ease;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 [data-terp="appshell-sidebar"][data-collapsed="true"] [data-terp="appshell-brand"] {
   justify-content: center;
   padding-inline: 0;
 }
+/* The brand mark's box (ADR 0098 §9). The brand link used to hand whatever it was given
+   straight into a flex row, so an app's asset sized itself and an oversized one was clipped by
+   the aside's overflow-x: hidden with nothing to say so — in the 4rem rail, which is exactly
+   where a brand most needs to survive. One declared size, published as --shell-brand-size, caps
+   it in every placement, and the descendant rule catches the img or svg inside a wrapper rather
+   than only a direct child.
+   Zero-diff for every shell shipped so far: the default TerpMark is 28px and the token is
+   1.75rem, so the box is exactly the size of the thing that used to be the flex item. */
+[data-terp="appshell-mark"] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--shell-brand-size);
+  height: var(--shell-brand-size);
+}
+[data-terp="appshell-mark"] * {
+  max-width: 100%;
+  max-height: 100%;
+}
+/* The light/dark pair, and the switch is a token because the alternative rots. The framework
+   ships five themes and three of them are dark; a company mark with dark ink is invisible on
+   those three, and the bundled icons' currentColor answer is not available to a brand asset.
+   Enumerating the dark themes HERE would be a list that goes stale the first time one is added,
+   so the token build emits --appearance-show-light / --appearance-show-dark from each theme's
+   declared appearance — the same field it already emits color-scheme from, and one
+   themes.json requires. A sixth theme cannot forget to answer.
+   The values are block / none rather than this rule's own display type, so a theme never has
+   to know what layout the shell uses: the box above does the centring, not the mark. */
+[data-terp="appshell-mark"] > [data-appearance="light"] {
+  display: var(--appearance-show-light);
+}
+[data-terp="appshell-mark"] > [data-appearance="dark"] {
+  display: var(--appearance-show-dark);
+}
 [data-terp="appshell-brand-row"] {
   display: flex;
   align-items: center;
@@ -661,7 +1168,7 @@ textarea[data-terp="input"] {
   white-space: nowrap;
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
-  color: var(--color-neutral-900);
+  color: var(--color-sidebar-fg);
   letter-spacing: 0;
 }
 [data-terp="appshell-nav"] {
@@ -676,6 +1183,47 @@ textarea[data-terp="input"] {
   display: grid;
   gap: var(--space-1);
 }
+/* Navigation groups. The wrapper itself declares nothing in the sidebar: it is a plain block
+   containing the same list, which is what makes adding it to the ungrouped case free.
+
+   The separation is on the ADJACENT SIBLING, and these two rules are the first + combinators in
+   this sheet. That is deliberate rather than careless: what is wanted is a separation BETWEEN
+   siblings, which is exactly what + expresses, and the alternatives are worse here. A gap on the
+   nav would make the nav a grid or flex container, and a stretched single row would then resize
+   the one group every app has today. A margin on every group would need a :first-child to undo
+   it, which is a positional selector where a sibling one says the thing directly. With one group
+   neither rule matches at all, so the flat sidebar is untouched to the pixel.
+
+   SCOPED TO THE SIDEBAR, and that scope is load-bearing. In header placement the nav is a flex
+   ROW (below), where margin-block-start is a CROSS-axis margin — never collapsed, applied to a
+   flex item — so an unscoped rule would push every group after the first down by 1rem and grow
+   the sticky header with it. The mobile drawer is the same aside carrying the same marker, so it
+   keeps this rule, which is correct: the drawer stacks. */
+[data-terp="appshell-sidebar"] [data-terp="appshell-nav-group"] + [data-terp="appshell-nav-group"] {
+  margin-block-start: var(--space-4);
+}
+/* The group label. Not a heading element — see the AppShell render for why the outline is the
+   binding constraint and why axe cannot see it.
+
+   The horizontal padding matches the nav link's own (var(--space-3)), so the label sits on the
+   same left edge as the icons under it rather than floating in the rail's gutter.
+
+   letter-spacing comes from the published scale rather than a bare literal, and this is the rule
+   the scale was waiting for: tokens.guard.test.ts records --font-letter-spacing-wide as unread
+   with the comment "for the uppercase-label treatment nothing in the package uses". This is that
+   treatment, so the token gets its first reader and leaves the unread list. font-weight is our
+   own choice and not inherited from the login separator, which declares none — a group label
+   competing with the links under it needs the weight to read as a header rather than as a
+   disabled item. */
+[data-terp="appshell-nav-group-label"] {
+  display: block;
+  padding: var(--space-1) var(--space-3);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-sidebar-muted);
+}
 /* Sidebar navigation links, and this is the rule the whole shell migration was for. The
    geometry used to be NAV_LINK_STYLE, a CSSProperties object exported from AppShell for
    every router's link renderer to spread — so an app could not restyle a nav link at all
@@ -692,7 +1240,7 @@ textarea[data-terp="input"] {
   gap: var(--space-2);
   padding: var(--space-2) var(--space-3);
   border-radius: var(--radius-md);
-  color: var(--color-neutral-700);
+  color: var(--color-sidebar-muted);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   text-decoration: none;
@@ -700,7 +1248,9 @@ textarea[data-terp="input"] {
   overflow: hidden;
   box-sizing: border-box;
   min-height: 2.25rem;
-  transition: background-color 150ms ease, color 150ms ease;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-standard),
+    color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 /* The collapsed rail's link geometry: one centred fixed-size icon in the content track.
    (0,3,1) against the base's (0,1,1), so it wins on specificity with no source-order
@@ -716,16 +1266,20 @@ textarea[data-terp="input"] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-/* Visually hidden, four elements, one rule. Two are the drawer's focus sentinels, which
+/* Visually hidden, five elements, one rule. One is the skip link, which is the whole point of
+   the block for it: hidden at rest and un-hidden by a rule in terp.state. Two are the drawer's
+   focus sentinels, which
    must stay focusable and so cannot be display: none. The other two are the brand title
    and the nav labels in the icon rail, which were a style-object TERNARY before this —
    the component picked between two objects per render, and the collapsed branch was
    painted by nothing, because the rail state was internal and no specimen could reach it.
    That is what defaultCollapsed is for. */
+[data-terp="appshell-skip-link"],
 [data-terp="drawer-focus-start"],
 [data-terp="drawer-focus-end"],
 [data-terp="appshell-sidebar"][data-collapsed="true"] [data-terp="appshell-brand-title"],
-[data-terp="appshell-sidebar"][data-collapsed="true"] [data-terp="appshell-nav-label"] {
+[data-terp="appshell-sidebar"][data-collapsed="true"] [data-terp="appshell-nav-label"],
+[data-terp="appshell-sidebar"][data-collapsed="true"] [data-terp="appshell-nav-group-label"] {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -752,7 +1306,7 @@ textarea[data-terp="input"] {
   justify-content: space-between;
   gap: var(--space-3);
   padding: var(--space-2) var(--space-4);
-  min-height: 3rem;
+  min-height: var(--shell-header-height);
   box-sizing: border-box;
   background: var(--color-neutral-0);
   border-block-end: 1px solid var(--color-neutral-200);
@@ -791,6 +1345,19 @@ textarea[data-terp="input"] {
   font-weight: var(--font-weight-normal);
   line-height: 1.25;
 }
+/* The drawer's close button sits INSIDE the sidebar, so its INK comes from the sidebar family
+   and not from the header toggle's neutral. Everything else it shares with the toggle above —
+   both are icon buttons in shell chrome, and only the colour depends on which chrome.
+   Wiring the sidebar family without this left two adjacent controls in the same drawer on two
+   different ramps: in dark a nav link hovering to #334155 beside a close button hovering to
+   #263449, and in contrast a blue wash beside a grey one.
+   An override, NOT a split of the rule above. Splitting it was the first attempt and it moved
+   the shared declarations into this selector, so the header toggle lost its background, border,
+   radius, cursor and type — visible immediately as ~1,160 repainted pixels on every shell
+   specimen, which is how a one-line edit to a grouped selector announces itself. */
+[data-terp="appshell-brand-row"] > [data-terp="iconbutton"] {
+  color: var(--color-sidebar-muted);
+}
 [data-terp="appshell-main"] {
   flex-grow: 1;
   padding: var(--space-6);
@@ -805,6 +1372,402 @@ textarea[data-terp="input"] {
   color: var(--color-fg-subtle);
   font-size: var(--font-size-xs);
 }
+/* The header placement (ADR 0098 §8): the nav moves into the header and the sidebar is not
+   rendered at all. Three rules, and the attribute is stamped only on desktop and only when the
+   prop asked for it, so none of them needs a [data-variant] guard and no existing shell is in
+   scope of any of them.
+
+   The header BECOMES the sidebar surface, which is one declaration doing the work of six.
+   Every part of the navigation — the brand, its title, the resting link, the hover wash, the
+   active link — already reads --color-sidebar-*, so moving the surface carries the whole family
+   with it and not one property is overridden here. It is also the only reading that survives
+   theming: an app that paints its sidebar navy gets a navy header with the same legible ink,
+   where per-property overrides would have given it navy ink on a white header. The declared
+   sidebar pairings are therefore still exactly the pairings in play and the contrast gate needs
+   nothing new — which is the check that the mechanism is right rather than merely short.
+
+   In the shipped themes this moves almost nothing: --color-sidebar-bg equals
+   --color-neutral-0 in four of the five, and in light it is the same #f8fafc the sidebar
+   already uses. The rule is load-bearing for an app's theme, not for ours. */
+[data-terp="appshell"][data-nav-placement="header"] [data-terp="appshell-header"] {
+  background: var(--color-sidebar-bg);
+  border-block-end-color: var(--color-sidebar-border);
+}
+/* The list turns horizontal. Flex rather than a row of grid columns, because the header is
+   already a wrapping row: a nav with more items than fit takes a second line and the header
+   grows, instead of overflowing to somewhere no pointer can reach. */
+[data-terp="appshell"][data-nav-placement="header"] [data-terp="appshell-nav-list"] {
+  display: flex;
+  flex-wrap: wrap;
+}
+/* The nav keeps its flex-grow from the sidebar rule, which here takes the slack between the
+   brand and the header group and pins the controls right with no margin of its own.
+   overflow is a FIX rather than a reset: the sidebar's nav is a vertical scroll container, and
+   a computed overflow-y of auto forces overflow-x to auto as well, so in a header — where the
+   box is exactly one link tall — a focused link's 2px outline and 3px ring would be clipped on
+   both edges by a scroller that can never scroll. */
+[data-terp="appshell"][data-nav-placement="header"] [data-terp="appshell-nav"] {
+  overflow: visible;
+  /* The groups are a ROW here, not a column. Without this each group wrapper is a block and a
+     two-group header renders one stacked list per group — a nav placed in the header to avoid
+     permanent chrome, growing the header instead.
+
+     The row lives on the NAV rather than on the wrappers because the wrappers are what has to
+     line up, and it is why the stacking margin above is scoped away from this placement: a
+     block-start margin on a flex item is a cross-axis margin and is never collapsed.
+
+     With one group this changes nothing measurable. The single wrapper becomes a flex item
+     sized to its content instead of a full-width block, and its list is laid out from the same
+     left edge either way; the existing app-shell-header-nav baseline is what says so. */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-5);
+}
+/* A group in the header: its label sits beside its links rather than above them, since a header
+   row has no second line to put it on. The gap is the label-to-list separation and nothing
+   else — the list keeps its own var(--space-1) between links. */
+[data-terp="appshell"][data-nav-placement="header"] [data-terp="appshell-nav-group"] {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+/* The label's block padding is the sidebar's, where it separates the label from the links BELOW
+   it. In a row that padding is on the wrong axis: it adds to the group gap and pushes the label
+   off the links' centre line. Zeroed to the inline axis only, so the label keeps the horizontal
+   rhythm and loses the vertical. */
+[data-terp="appshell"][data-nav-placement="header"] [data-terp="appshell-nav-group-label"] {
+  padding-block: 0;
+}
+
+/* The page frame ----------------------------------------------------------- */
+/* Every routed view is this shape: one header carrying the breadcrumb trail (when
+   there is a path back up) and the title row, then the body. HubPage, OverviewPage
+   and DetailPage are all this frame with a different trail.
+
+   The header is a <header> ELEMENT and Page has to keep it one, which is a
+   constraint this sheet cannot express and the component records at the site: the
+   layout contract's runtime slot check reads article.children and drops the header
+   by TAG NAME, so re-rendering it as a marked <div> would put it back into the body
+   set and fail every governed OverviewPage and DetailPage closed. Marking it is
+   additive; retagging it is not. The body likewise takes no wrapper — not even a
+   display: contents one, since that check is a DOM traversal and would see the node
+   whether or not it generates a box.
+
+   align-content: start is what keeps the rows at the top of a page taller than its
+   content — the loading and error frames, where the body is one small block. With
+   the default the two rows would spread to fill the height. It needs something to
+   stretch the article before it is observable at all, which is why page-loading and
+   page-error render inside a grid box rather than a plain tall div. */
+[data-terp="page"] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-4);
+  align-content: start;
+  min-width: 0;
+}
+/* The narrow frame: a form or a settings screen, capped header and all.
+   32rem is not a new number. It is exactly what admin-form declares on the two packaged create
+   screens and what ProfileView's card carries, and 4b already named that card as a page measure
+   wearing a card's clothes. So this is the mechanism those three were each hand-rolling, and
+   folding them into it is the follow-up rather than part of shipping it.
+   max-width on the ARTICLE, not width on its children, which is the opposite of the shell's
+   content measure one rule above. Two reasons. The header is meant to be capped here — a Save
+   button a screen-width from its field is worse than one over it — so there is nothing to
+   exempt and no :not() to write. And capping the article composes with the shell measure by
+   construction instead of competing with it: the article is already at most the shell's measure,
+   and this takes it narrower still. */
+[data-terp="page"][data-measure="narrow"] {
+  max-width: 32rem;
+}
+[data-terp="page-header"] {
+  display: grid;
+  gap: var(--space-2);
+}
+/* The crumb row keeps a 2rem floor, and it is doing work rather than reserving
+   space for its own sake: the trail is shorter than 2rem at font-size-sm, so
+   dropping the floor closes the gap under the trail on every page that has one.
+   Measured — removing it moves all six baselines with a trail and nothing else. */
+[data-terp="page-breadcrumbs"] {
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+}
+/* Title left, the actions slot right, wrapping rather than overflowing when a long
+   title meets a wide action cluster. */
+[data-terp="page-heading"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+/* The single h1 of the view. margin: 0 is load-bearing — the browser default h1
+   margin would otherwise fight the header's own gap. */
+[data-terp="page-title"] {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0;
+  color: var(--color-neutral-900);
+  line-height: 1.3;
+}
+/* The content measure, and the subheader band, which are ONE declaration rather than two
+   features (ADR 0097 §2). A full-width band only means anything once the column beside it is
+   constrained, and constraining the column is what leaves the header spanning the full track.
+
+   No new element and no portal, and both were considered rather than assumed. A wrapper
+   around the body — display: contents included — becomes the sole child of article.children
+   and fails every governed page closed, because that slot check is a DOM traversal and sees
+   the node whether or not it generates a box. A portal leaves no node and survives that, but
+   createPortal needs a container that exists when the child renders and the shell can only
+   publish one through state: first commit local, second commit in the band, a one-frame jump
+   on every navigation traded for nothing.
+
+   Neither is needed, because [data-terp="page"] is ALREADY a single-column grid. The header
+   keeps the track; every other child takes the measure. So the band is the header that was
+   always there.
+
+   The exemption is keyed on the page-header MARKER rather than on the header TAG, and that
+   distinction is a fix rather than a detail. A :not(header) exempts every <header> that happens
+   to be a direct child, so a bespoke screen writing
+   <Page><header>section head</header><DataView/></Page> — legal, since the plain Page is
+   deliberately unconstrained by the layout contract — would get a second full-width band it
+   never asked for, silently. The frame's own header is the only thing meant to span the track,
+   and the marker says so. (The layout contract's runtime check still drops the header by TAG
+   name, because that check runs where no marker is guaranteed; the two mechanisms answer
+   different questions and only this one is a style.)
+
+   And no backticks in this block, which is not a style note: a backtick here TERMINATES
+   TERP_STYLES_CSS and the parse fails somewhere else entirely with "try inserting a
+   semicolon". This comment cost that mistake once while being written.
+
+   Gated on an attribute the SHELL stamps, so nothing moves for any app today: with
+   data-content-width absent this rule matches nothing at all. And "full width" means the full
+   width of the article's own track — appshell-main's padding is outside it, so this is a
+   measure within the content column rather than a bleed to the window edge, which would need
+   a negative margin and therefore an inline site.
+
+   WIDTH, not max-width, and that is the whole correctness of the rule rather than a
+   preference. This selector weighs (0,4,0) — four attribute selectors, three of them here and
+   one inside :not(), and the universal contributes nothing — so as a max-width it OUTRANKS
+   every component that declares a narrower one, and
+   five of them are legal children of a governed body: resource-list (40rem), admin-form
+   (32rem), dialog (26rem) and text[data-measure] at 48ch and 72ch. Measured before it was
+   fixed: an admin-form inside a measured shell computed max-width 1280px instead of 512px,
+   so the packaged provisioning form rendered two and a half times too wide. The shell would
+   have been WIDENING the very components that already carry their own measure — including the
+   Text prop this mechanism was modelled on.
+
+   As a width it composes instead of competing, because CSS resolves max-width AFTER width:
+   min(100%, measure) caps a child that has no measure of its own, and a child that has one
+   still wins with it. min() rather than a bare token so a track narrower than the measure is
+   untouched rather than overflowing. */
+[data-terp="appshell"][data-content-width="measured"]
+  [data-terp="page"] > *:not([data-terp="page-header"]) {
+  width: min(100%, var(--shell-content-max-width));
+}
+/* The reach-through, for the one body child that generates no box of its own. Markdown is
+   display: contents (see its rule, which used to claim no child-star selector existed in this
+   sheet — the one above is exactly that selector, and the claim is corrected there). The rule
+   above therefore MATCHES the markdown wrapper and then has nothing to apply a width to, since
+   a non-inherited property on a boxless element is dropped. The result was prose running the
+   full width of a measured shell, which is the one thing that mechanism exists to prevent, on
+   the one component whose whole purpose is long-form text. Capping its blocks instead reaches
+   the boxes the wrapper stands in for. */
+[data-terp="appshell"][data-content-width="measured"]
+  [data-terp="page"] > [data-terp="markdown"] > * {
+  width: min(100%, var(--shell-content-max-width));
+}
+
+/* The split archetype ------------------------------------------------------ */
+/* A list beside the record it selects. Mobile-first: one column, list first, so the tab
+   sequence is the reading order in both layouts and the stacked case needs no rule at all.
+   The two-column form lives in the sheet's ONE existing wide-viewport block further down,
+   rather than opening a second @media — same reason Stack's responsive rules went there.
+
+   align-items: start so a short detail pane does not stretch to the list's height, which is
+   what makes the two read as panes rather than as table cells. */
+[data-terp="splitpage-panes"] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-4);
+  align-items: start;
+  min-width: 0;
+}
+/* Each pane is a min-width: 0 grid item, or a wide DataView inside one refuses to shrink and
+   pushes the row past its track — the same floor Grid's cells carry, for the same reason. */
+[data-terp="splitpane"] {
+  min-width: 0;
+}
+
+/* The sign-in screen ------------------------------------------------------- */
+/* The one screen an unauthenticated user sees, and the only full-viewport page in
+   the package: a 100vh grid centring one card. The reset layer's box-sizing note
+   already names this page as the reason it exists — content-box plus 100vh plus
+   padding overflows the viewport by exactly the padding, which is a phantom
+   scrollbar on a page that fits.
+
+   The buttons fill their group, and that is a rule on the GROUP rather than a prop
+   on Button, because it has exactly one consumer in the package. Button declares
+   width: fit-content, which is a definite width — so grid stretch does NOT do this
+   for free, and dropping the declaration shrinks all four buttons to their labels.
+   Two selectors at (0,2,0) against the button's own (0,1,0), same layer, so
+   specificity settles it and source order never enters into it. A block prop on
+   Button would be a new public API minted for one internal caller; the sheet can
+   already reach the thing, which is the test stage 4 set when it deleted Menu's
+   style props.
+
+   The separator's ink moves from --color-neutral-500 to --color-fg-subtle, which is
+   the rest of the migration ec36a2b started rather than a new decision: the two
+   tokens are byte-identical in light and dark, and only fg-subtle has a declared
+   pairing (subtle-on-surface) for the gate to measure. So the screenshot themes do
+   not move and midnight and twilight get the value the gate has been measuring all
+   along. The "or" is aria-hidden but it is visible text, so it is held to AA rather
+   than treated as an ornament.
+
+   The error line has no specimen and cannot have one: the error is internal state set
+   only in a catch, and sso.error needs a real failed callback, which needs a URL the
+   lane owns. Its ink is gated statically instead — danger-on-card, declared for this
+   surface and measured in all five themes. */
+[data-terp="login-view"] {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: var(--space-6);
+  background: var(--color-neutral-50);
+  font-family: var(--font-family-sans);
+  color: var(--color-neutral-900);
+}
+[data-terp="login-card"] {
+  width: 100%;
+  max-width: 24rem;
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  background: var(--color-neutral-0);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+}
+[data-terp="login-brand"] {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-neutral-900);
+}
+[data-terp="login-title"] {
+  margin: 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+}
+[data-terp="login-form"],
+[data-terp="login-sso"] {
+  display: grid;
+  gap: var(--space-3);
+}
+[data-terp="login-separator"] {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+[data-terp="login-separator-rule"] {
+  flex: 1;
+  border-block-start: 1px solid var(--color-neutral-200);
+}
+[data-terp="login-error"] {
+  margin: 0;
+  color: var(--color-status-danger);
+  font-size: var(--font-size-sm);
+}
+
+/* The profile screen ------------------------------------------------------- */
+/* The built-in /profile view: two cards, an avatar tile, and the identity lines.
+   Its cards are its own rather than the Card component's — the same declarations on
+   a different element — and folding the two together is a component decision, not a
+   styling one, so it stays a follow-up rather than riding in on a migration whose
+   whole contract is zero pixel movement.
+
+   overflow-wrap on the address is real and unobservable: the workbench session is a
+   fixed user whose address is short, so no specimen can paint the case it exists for
+   (an address has no spaces to break at, so a long one widens the card past its own
+   max-width instead of wrapping). Asserted in the unit test as the marker it keys on;
+   there is no picture of it and cannot be until the mock session is variable. */
+[data-terp="profile-card"] {
+  display: grid;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  max-width: 32rem;
+  background: var(--color-neutral-0);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-lg);
+}
+/* The initials tile, once. This was two rules — profile-avatar and user-menu-avatar —
+   of eleven declarations each, identical but for a width, a height and a font size,
+   which is a component the framework happened to ship twice under two names.
+
+   It is aria-hidden, so axe skips it by design and the declared pairing is the only
+   thing measuring its ink: brand-primary-contrast on brand-primary is
+   primary-button-label, which the contrast gate holds at AA in all five themes.
+   Exactly the shape of NavIcon's fallback tile, which failed at 1.60 for as long as
+   nothing declared it.
+
+   md carries no attribute of its own, the way every other sized component here works:
+   the base rule IS the default, and a data-size="md" rule would leave two places
+   describing the same tile. */
+[data-terp="avatar"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  flex-shrink: 0;
+  border-radius: var(--radius-full);
+  background: var(--color-brand-primary);
+  color: var(--color-brand-primary-contrast);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+}
+[data-terp="avatar"][data-size="sm"] {
+  width: 2rem;
+  height: 2rem;
+  font-size: var(--font-size-sm);
+}
+[data-terp="profile-email"] {
+  overflow-wrap: anywhere;
+}
+[data-terp="profile-role"] {
+  margin: 0;
+  color: var(--color-neutral-600);
+}
+
+/* The built-in admin screens ----------------------------------------------- */
+/* The packaged /admin views. Three surfaces, and they were invisible to both
+   ratchets for the entire migration — which is why they are here rather than in
+   0.8.0. The worklist names files with NO marker at all, and every admin view
+   rendered none, so it read as a view composition and was excluded on purpose. The
+   ledger counts module-scope CSSProperties declarations, and these were four
+   call-site literals plus one unannotated object. Neither gate was wrong; both were
+   narrower than they looked, and the same commit widens the measure.
+
+   The form box is ONE marker across two files, because UserCreate and GroupCreate
+   constrain their form to the same measure — the same surface twice, not two
+   surfaces that happen to agree today. */
+[data-terp="admin-form"] {
+  max-width: 32rem;
+}
+/* A section heading inside a detail screen: the members list, the permission
+   grants. font-size-base rather than the UA default, which for an h2 is LARGER than
+   the page's own h1 at font-size-lg — so without this a section outranks the view
+   it sits in. */
+[data-terp="admin-section-title"] {
+  margin: 0;
+  font-size: var(--font-size-base);
+}
 
 /* Hub cards --------------------------------------------------------------- */
 /* This whole family was in terp.state, resting declarations and all, for the same
@@ -872,7 +1835,9 @@ textarea[data-terp="input"] {
 [data-terp="hubcard"] {
   height: 100%;
   min-height: 0;
-  transition: box-shadow 150ms ease, transform 150ms ease;
+  transition:
+    box-shadow var(--motion-duration-fast) var(--motion-easing-standard),
+    transform var(--motion-duration-fast) var(--motion-easing-standard);
 }
 [data-terp="hubcard-body"] {
   display: grid;
@@ -886,7 +1851,7 @@ textarea[data-terp="input"] {
   background: var(--color-neutral-0);
   color: var(--color-neutral-900);
   box-sizing: border-box;
-  transition: border-color 150ms ease;
+  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 /* -heading, not -title: in this sheet a heading is the BOX holding a title
    (card-heading, dataview-card-heading) and a title is the text box itself
@@ -916,7 +1881,7 @@ textarea[data-terp="input"] {
   color: var(--color-neutral-900);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
-  transition: color 150ms ease;
+  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 /* neutral-600 rather than fg-muted, and it is not the tinted-surface case: this text
    sits on the card's own neutral-0 and measures 7.58 / 7.94 / 7.50 / 7.60 / 18.42. */
@@ -1154,6 +2119,46 @@ textarea[data-terp="input"] {
   cursor: pointer;
   color: var(--color-fg-subtle);
 }
+/* The password field's reveal toggle, built on the search box above rather than beside
+   it: same positioning context, same absolutely-placed control, same specificity
+   argument. Only type="password" wraps, so every other input is still a bare element
+   and the two child selectors in this sheet that reach for data-terp="input" — the
+   toolbar search and the resource-list create field — can never meet a wrapper. */
+[data-terp="input-password"] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+/* Room for the toggle. It must out-rank input[data-terp="input"] { padding: 0
+   var(--space-3) } and does so on SPECIFICITY — two attributes (0,2,0) against an
+   attribute plus a type (0,1,1) — the same trap and the same escape the search field
+   documents above. Asymmetric on purpose: the glyph sits at the end, and reserving room
+   at both ends would indent the value for nothing. */
+[data-terp="input-password"] > [data-terp="input"] {
+  padding-inline-end: var(--space-6);
+  width: 100%;
+}
+/* The toggle itself, the seventeenth element wearing the iconbutton marker. It takes
+   that marker rather than one of its own because it is one: the shared rule already
+   carries its transition, its hover wash and its disabled treatment, and duplicating
+   those under a new name to avoid editing one enumeration would be the wrong trade. */
+/* Edge ships its own reveal control inside every password field, so without this the user gets
+   two: the native eye sitting on top of ours, in a box sized for one glyph. Same class of fix as
+   the number stepper this sheet already suppresses -- an unthemeable browser affordance the
+   framework replaces rather than competes with. */
+input[data-terp="input"][type="password"]::-ms-reveal {
+  display: none;
+}
+[data-terp="input-password"] > [data-terp="iconbutton"] {
+  position: absolute;
+  inset-inline-end: var(--space-1);
+  display: inline-flex;
+  padding: var(--space-1);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--color-fg-subtle);
+}
 /* "Refreshing…", and this is the one place the prefer-an-existing-DOM-attribute
    rule is REFUSED with its own reasoning. [data-terp="dataview-toolbar"]
    > [role="status"] looks textbook — the component does own this span's role — but
@@ -1222,6 +2227,28 @@ textarea[data-terp="input"] {
   white-space: nowrap;
   background: var(--color-neutral-0);
 }
+/* A column's declared track. A MINIMUM rather than a width, because a specified width is only a
+   preference under table-layout: auto and the algorithm shrinks it to fit — which is why the pixel
+   hint this replaces did nothing at all, measured in the workbench at three columns asking for
+   700px each and fitting the box exactly. What auto layout cannot take away is a minimum.
+
+   Three steps, and no more: these are the three bands the framework's own tables declare, and a
+   step is additive to add and breaking to remove. In rem, so a declared track follows the root
+   font size; the system columns below keep their pixels on purpose, being chrome rather than
+   content, and converting them is a density pass with its own baselines.
+
+   Nothing here ever meets an inline width. A resized column stops emitting the attribute, so the
+   user's own drag replaces the declared track instead of losing to it — the minimum would win the
+   cascade, and a column springing back from a drag reads as a broken resizer. */
+[data-terp="dataview-table"] > thead > tr > th[data-width="xs"] {
+  min-inline-size: 5rem;
+}
+[data-terp="dataview-table"] > thead > tr > th[data-width="sm"] {
+  min-inline-size: 6.5rem;
+}
+[data-terp="dataview-table"] > thead > tr > th[data-width="md"] {
+  min-inline-size: 9.5rem;
+}
 [data-terp="dataview-row"] > td {
   padding: var(--density-cell-pad-y) var(--density-cell-pad-x);
   border-bottom: 1px solid var(--color-neutral-100);
@@ -1613,6 +2640,58 @@ th[data-terp="dataview-actions-cell"] > span {
   color: var(--color-neutral-700);
 }
 
+/* Resource list ------------------------------------------------------------ */
+/* The plain listing screen: a write-gated create row, then the rows. The DataView is
+   the same job at scale, and this one stays deliberately simple, so its rules are
+   geometry plus two inks.
+
+   The create row keeps its flex layout and the input keeps flex: 1 as a RULE rather
+   than becoming a 1fr auto grid, and that is a move rather than a decision. With
+   flex: 1 the input's basis is 0 so it may shrink below its intrinsic width; a 1fr
+   track floors at min-content instead. The two agree at this list's 40rem cap, so
+   swapping them would have changed nothing anybody could see until some narrower
+   container found the difference — which is the kind of diff this migration exists
+   not to introduce.
+
+   Neither paragraph resets its margin, and that is verbatim rather than an
+   oversight: both are <p> elements whose default margin is what separates them from
+   the form above and the rows below. Adding margin: 0 here would move the rows. */
+[data-terp="resource-list"] {
+  display: grid;
+  gap: var(--space-4);
+  max-width: 40rem;
+}
+[data-terp="resource-list-create"] {
+  display: flex;
+  gap: var(--space-2);
+}
+[data-terp="resource-list-create"] > [data-terp="input"] {
+  flex: 1;
+}
+[data-terp="resource-list-error"] {
+  color: var(--color-status-danger);
+}
+[data-terp="resource-list-empty"] {
+  color: var(--color-neutral-600);
+}
+[data-terp="resource-list-items"] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-2);
+}
+[data-terp="resource-list-row"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md);
+  background: var(--color-neutral-0);
+}
+
 /* Empty / error / loading states ------------------------------------------- */
 /* Same centred block, opposite messages: empty is a dashed outline on the page
    surface because nothing is wrong, error is a filled danger wash because
@@ -1939,7 +3018,10 @@ button[data-terp="input"][data-placeholder="true"] {
   font-weight: var(--font-weight-medium);
   line-height: 1.4;
   box-shadow: var(--shadow-md);
-  pointer-events: none;
+  /* No pointer-events: none. It was here, and it makes WCAG 1.4.13's Hoverable clause
+     impossible by construction: a bubble the pointer cannot reach is a bubble nobody
+     tracking with a pointer, or reading under magnification, can finish reading. The
+     component keeps it open across the gap with a short close delay instead. */
   white-space: normal;
 }
 
@@ -1964,7 +3046,10 @@ button[data-terp="input"][data-placeholder="true"] {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-normal);
   line-height: 1.25;
-  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-standard),
+    color var(--motion-duration-fast) var(--motion-easing-standard),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
 }
 /* The panel's contents. This sits INSIDE popover-panel, which supplies the
    surface — so the menu owns only the stacking of its items. */
@@ -1989,7 +3074,9 @@ button[data-terp="input"][data-placeholder="true"] {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-normal);
   line-height: 1.25;
-  transition: background-color 150ms ease, color 150ms ease;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-standard),
+    color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 /* Destructive is the one enumerable choice an item has, so it is an attribute.
    The disabled treatment is a state rule keyed on :disabled, because the element
@@ -2042,7 +3129,12 @@ button[data-terp="input"][data-placeholder="true"] {
   width: 100%;
   padding: var(--space-2);
   text-align: left;
-  color: var(--color-neutral-900);
+  /* The sidebar family, not the neutral one. This row renders inside the sidebar (and inside the
+     header group under navPlacement="header", which takes the sidebar surface), so its ink and
+     that background are a pairing in play — and the contrast gate can only measure a pairing it
+     can name. Provably zero-diff: --color-neutral-900 and --color-sidebar-fg are byte-equal in
+     all five themes. */
+  color: var(--color-sidebar-fg);
   border-color: transparent;
   min-height: 0;
 }
@@ -2052,19 +3144,6 @@ button[data-terp="input"][data-placeholder="true"] {
   gap: 0;
   padding: 0;
 }
-[data-terp="user-menu-avatar"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  flex-shrink: 0;
-  border-radius: var(--radius-full);
-  background: var(--color-brand-primary);
-  color: var(--color-brand-primary-contrast);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
 [data-terp="user-menu-identity"] {
   display: grid;
   min-width: 0;
@@ -2075,9 +3154,17 @@ button[data-terp="input"][data-placeholder="true"] {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Two surfaces, one marker. UserMenu renders this span in the trigger AND in the portalled
+   panel, and only the first sits on the sidebar — the panel is in document.body, where the
+   sidebar palette does not apply. So the sidebar copy is scoped (the portal puts the panel
+   outside this selector by construction) and the panel keeps the neutral. The sheet already
+   argues this exact split for the drawer close button. */
 [data-terp="user-menu-role"] {
   color: var(--color-neutral-600);
 }
+[data-terp="user-menu"] [data-terp="user-menu-role"] {
+  color: var(--color-sidebar-muted);
+}
 /* The panel's identity block, and the panel's own geometry — both keyed on the
    owner, because the portal put them outside every selector that could otherwise
    reach them. */
@@ -2119,8 +3206,14 @@ button[data-terp="input"][data-placeholder="true"] {
    rules ([data-terp="markdown"] p, ... ul), and a declaration added here would
    simply do nothing with nothing to say so. And display: contents does not change
    selector matching, only box generation: a parent's > * child selector now matches
-   this wrapper rather than the blocks. Nothing in this sheet uses one, which is why
-   the wrapper is free today.
+   this wrapper rather than the blocks.
+
+   That last sentence used to end "Nothing in this sheet uses one, which is why the
+   wrapper is free today", and it stopped being true when the measured content width
+   shipped: that rule is a child-star selector on the page's body children. It matched it,
+   found no box to give a width to, and let prose run full-bleed in a measured shell.
+   The reach-through beside that rule is the fix; this wrapper is free of everything
+   else.
 
    Under SSR the sheet is not injected at all (the injector is document-guarded), so
    a server-rendered page has this element as a block box until hydration. That is
@@ -2253,12 +3346,15 @@ button[data-terp="input"][data-placeholder="true"] {
   margin-block-start: var(--space-2);
 }
 
-/* Icon-only buttons. Sixteen elements wear this marker and not one declares a
+/* Icon-only buttons. Seventeen elements wear this marker and not one declares a
    transition inline, so this belongs in terp.base — it sat in terp.state only
    because that is where the hover rules needing it live. Same correction 817f572
    made for Tabs and Breadcrumbs. */
 [data-terp="iconbutton"] {
-  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-easing-standard),
+    color var(--motion-duration-fast) var(--motion-easing-standard),
+    box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
 }
 
 /* Popover ------------------------------------------------------------------ */
@@ -2292,9 +3388,12 @@ button[data-terp="input"][data-placeholder="true"] {
 
    The stacking level is the token that was published for it. Every component in
    the package hardcoded its own number while a full --z-index-* family sat
-   unread. AppShell still writes 50/40/30 for drawer/backdrop/sticky and comes
-   right with its own migration; the toast viewport already reads
-   --z-index-toast. Tooltip's z-index:
+   unread. That is finished: AppShell reads --z-index-drawer, --z-index-backdrop
+   and --z-index-sticky, the skip link reads --z-index-skip-link, and the toast
+   viewport reads --z-index-toast. (This paragraph said "AppShell still writes
+   50/40/30 ... and comes right with its own migration" for a release after that
+   migration landed, which is the shape of stale comment worth naming: it read as
+   a known gap rather than as a finished one.) Tooltip's z-index:
    1 above is deliberately NOT a token — the tooltip is absolutely positioned
    inside its own anchor, so 1 is a local lift within a stacking context rather
    than a place in the app-wide order. */
@@ -2391,12 +3490,24 @@ button[data-terp="input"][data-placeholder="true"] {
   opacity: 0.55;
   cursor: not-allowed;
 }
+/* A loading button IS disabled — the component sets both — so this has to sit here rather
+   than in terp.base beside the other attribute-keyed button rules. In terp.base it would
+   lose to the :disabled rule above on layer order and the cursor would silently stay
+   not-allowed, which reads as "you may not" where the truth is "not yet". Declared after
+   it so source order settles the tie the equal (0,2,0) specificity leaves.
+
+   Neither cursor is visible to any lane: Playwright's screenshots do not paint a pointer.
+   The computed lane asserts both. */
+[data-terp="button"][data-loading="true"] {
+  cursor: progress;
+}
 
 /* Icon-only buttons: the shell's two header toggles, four pagination arrows, the
    toast dismisser, the combobox's clear button, the calendar's two month arrows,
-   the DataView's expand toggle, the view-options panel's two reorder arrows, and
-   the DataView toolbar's clear-search button and two layout toggles.
-   SIXTEEN SITES sharing a transition and nothing else — no shared SURFACE, because
+   the DataView's expand toggle, the view-options panel's two reorder arrows, the
+   DataView toolbar's clear-search button and two layout toggles, and the password
+   field's reveal toggle.
+   SEVENTEEN SITES sharing a transition and nothing else — no shared SURFACE, because
    each is styled by where it sits. Sites rather than elements: the reorder arrows
    render twice per column row, so the element count is a function of how many
    columns a view has, while the list of places to check is fixed.
@@ -2440,7 +3551,7 @@ button[data-terp="input"][data-placeholder="true"] {
 
    The :disabled cursor no longer shouts, and re-deriving that is more useful than
    trusting it. The question is never "has anything migrated" but "can any element
-   this selector matches still beat it" — so: which of the eleven can carry the
+   this selector matches still beat it" — so: which of the seventeen can carry the
    disabled attribute at all? The shell's toggles cannot (no disabled prop). The
    toast dismisser cannot. The combobox's clear button renders only while the
    field is enabled and takes no disabled of its own. The calendar's arrows page
@@ -2452,7 +3563,8 @@ button[data-terp="input"][data-placeholder="true"] {
   background: var(--color-neutral-100);
   color: var(--color-neutral-900);
 }
-[data-terp="iconbutton"]:disabled {
+[data-terp="iconbutton"]:disabled,
+[data-terp="iconbutton"][aria-disabled="true"] {
   opacity: 0.4;
   cursor: not-allowed;
 }
@@ -2466,7 +3578,13 @@ button[data-terp="input"][data-placeholder="true"] {
    only the text controls had migrated left a disabled Combobox painted exactly
    like an enabled one and deleted the aria-invalid border outright. All six
    now take their base from this sheet, so layer order is enough. */
-[data-terp="input"]:hover:not(:disabled):not(:focus) {
+/* The invalid exclusion is not tidying. This selector weighs (0,4,0) and the danger border below
+   weighs (0,2,0), both unlayered against each other inside terp.state — so without the third
+   :not() a pointer resting on a field that has just failed validation repaints its border from
+   the danger token to a neutral grey, and the error state disappears for exactly as long as the
+   user is pointing at the thing they need to fix. Narrowing the aggressor rather than adding a
+   competing [aria-invalid="true"]:hover rule is this sheet's convention. */
+[data-terp="input"]:hover:not(:disabled):not(:focus):not([aria-invalid="true"]) {
   border-color: var(--color-neutral-400);
 }
 [data-terp="input"]:focus,
@@ -2540,8 +3658,8 @@ button[data-terp="input"][data-placeholder="true"] {
    The rail's scrollbar suppression moved from an attribute on the nav to the sidebar's,
    because collapsed is one fact and it now has one owner. */
 [data-terp="appshell-nav"] a:hover:not([aria-current="page"]) {
-  background: var(--color-neutral-100);
-  color: var(--color-neutral-900);
+  background: var(--color-sidebar-accent);
+  color: var(--color-sidebar-fg);
 }
 [data-terp="appshell-nav"] a[aria-current="page"] {
   background: var(--color-brand-primary-soft);
@@ -2552,12 +3670,80 @@ button[data-terp="input"][data-placeholder="true"] {
   overflow-x: hidden;
   scrollbar-width: none;
 }
+/* The rail's group separation. The label is visually hidden here (it joins the block above), so
+   without this the groups are a single undifferentiated column of icons and the structure the
+   expanded sidebar shows simply disappears at 4rem. A rule the LINE has to carry, because the
+   label cannot: the divider is what is left of the label once the text is gone.
+
+   It replaces rather than adds to the expanded margin — same specificity family, one attribute
+   more — so the rail does not pay 1rem per group in a column that is already scrolling. */
+[data-terp="appshell-sidebar"][data-collapsed="true"] [data-terp="appshell-nav-group"] + [data-terp="appshell-nav-group"] {
+  margin-block-start: var(--space-2);
+  padding-block-start: var(--space-2);
+  border-block-start: 1px solid var(--color-sidebar-border);
+}
 [data-terp="appshell-sidebar"][data-collapsed="true"] [data-terp="appshell-nav"]::-webkit-scrollbar {
   width: 0;
   height: 0;
 }
 [data-terp="appshell-brand"]:hover {
-  background: var(--color-neutral-100);
+  background: var(--color-sidebar-accent);
+}
+/* And its hover, for the same reason: the shared iconbutton hover wash is a neutral, which is
+   the header toggle's context and not this one's. */
+[data-terp="appshell-brand-row"] > [data-terp="iconbutton"]:hover {
+  background: var(--color-sidebar-accent);
+  color: var(--color-sidebar-fg);
+}
+/* The skip link, visible only while focused.
+   In terp.state, and that is not filing: the resting half is the shared visually-hidden block
+   in terp.base, which sets position, a 1px box and clip, and un-hiding has to beat all of it.
+   On specificity it would not — a selector list takes the specificity of the member that
+   MATCHES, and for this element that member is [data-terp="appshell-skip-link"] at (0,1,0),
+   the same weight as this rule. (An earlier version of this comment cited the list's (0,3,0)
+   member, which is the collapsed-rail selector and never matches a skip link; that reading
+   would have made the rules a source-order coin flip rather than a layer decision.) Layer
+   order settles it with nothing to reason about.
+   :focus-visible rather than :focus, matching the sheet's shared ring: a skip link reached by
+   pointer is a link nobody asked to see.
+   Above the sticky header (30) and its backdrop (40) so it is not painted under the chrome it
+   sits over; below the drawer (50) because nothing should paint over an open modal. Stacking
+   order does NOT keep it out of the drawer's focus trap and this comment used to say it did —
+   z-index has no bearing on tab order. The link is simply not RENDERED while the drawer is
+   open; see AppShell. */
+/* The skip link's target takes focus and must NOT paint the shared ring.
+   The main element carries a data-terp marker and now a tabIndex of -1, which together put it
+   in scope of the shared [data-terp]:focus-visible ring — so activating the skip link outlined
+   the entire content column, header to footer, plus a 3px halo. Measured: it matches
+   :focus-visible, with a 2px solid outline and rgba(37,99,235,0.35) 0 0 0 3px. The ring exists
+   to say which CONTROL will take the next keystroke; a scroll target that was focused
+   programmatically is not one, and the visible result of following a skip link should be the
+   content rather than a box drawn around it.
+   Scoped to this marker rather than to tabindex=-1 in general: other elements take -1 for other
+   reasons and some of them are controls. */
+[data-terp="appshell-main"]:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+[data-terp="appshell-skip-link"]:focus-visible {
+  position: fixed;
+  top: var(--space-2);
+  inset-inline-start: var(--space-2);
+  z-index: var(--z-index-skip-link);
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: var(--space-2) var(--space-3);
+  clip: auto;
+  overflow: visible;
+  background: var(--color-neutral-0);
+  color: var(--color-fg-accent);
+  border: var(--border-width-thin) solid var(--color-fg-accent);
+  border-radius: var(--radius-md);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
 }
 
 /* Tabs -------------------------------------------------------------------- */
@@ -2578,6 +3764,35 @@ button[data-terp="input"][data-placeholder="true"] {
   cursor: not-allowed;
 }
 
+/* Module navigation ------------------------------------------------------- */
+/* Which sub-page you are on, here for the same reason the selected tab is: the
+   accent edge and the darker ink have to beat the resting pair.
+
+   Keyed on data-active, which ModuleNav writes, and deliberately NOT on the
+   aria-current the same element also carries. That attribute has a second author:
+   TanStack's link props spread the router's own active props LAST, after the
+   caller's, so on a Link the router has the final word on aria-current. This is
+   the breadcrumb lesson in its exact form — reuse a semantic only where the
+   component is its sole author.
+
+   The two notions of "active" are not the same predicate, and they diverge in BOTH
+   directions, which is worth knowing before touching either. activeOptions
+   .includeSearch defaults to true, so the router additionally demands an exact
+   query-string match that ModuleNav does not — the router is narrower there. And
+   with exact matching the router compares through exactPathTest, which is
+   removeTrailingSlash(a) === removeTrailingSlash(b), while ModuleNav compares
+   pathname === item.to raw — so on a path with a trailing slash the ROUTER is
+   active and ModuleNav is not, and this rule withholds the accent edge from a tab
+   the router considers current. That second case is a real defect and it is older
+   than this rule: the inline styling it replaced read the same isActive, so the
+   behaviour is unchanged and only the reasoning was wrong. Fixing the predicate
+   belongs with the navigation model, because that is what decides what "active"
+   should mean. */
+[data-terp="module-nav-link"][data-active="true"] {
+  color: var(--color-neutral-900);
+  border-block-end-color: var(--color-fg-accent);
+}
+
 /* Hub cards --------------------------------------------------------------- */
 /* The hover edge recolours hubcard-BODY, not the card.
 
@@ -2648,13 +3863,14 @@ button[data-terp="input"][data-placeholder="true"] {
 }
 
 /* The pager's disabled ink, scoped rather than added to the shared iconbutton
-   rule above: of the sixteen sites wearing that marker only six can be disabled at
+   rule above: of the seventeen sites wearing that marker only six can be disabled at
    all — these four and the view-options panel's two reorder arrows, which carry
    their own scoped ink below for the same reason — and giving the shared rule a
    colour would change how a disabled calendar arrow looks the day one becomes
    disableable. The shared rule supplies the opacity and the cursor; this supplies
    the ink the pager had inline. */
-[data-terp="dataview-pager"] > [data-terp="iconbutton"]:disabled {
+[data-terp="dataview-pager"] > [data-terp="iconbutton"]:disabled,
+[data-terp="dataview-pager"] > [data-terp="iconbutton"][aria-disabled="true"] {
   color: var(--color-neutral-300);
 }
 
@@ -2684,7 +3900,7 @@ button[data-terp="input"][data-placeholder="true"] {
   table-layout: fixed;
 }
 [data-terp="dataview-table"] tbody tr {
-  transition: background-color 150ms ease;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 [data-terp="dataview-table"] tbody tr:hover td {
   background: var(--color-neutral-50);
@@ -2711,8 +3927,13 @@ button[data-terp="input"][data-placeholder="true"] {
    is enough, and the card's tone rules lose to it on layer rather than on
    specificity. Keeping the escalation past this point is the quiet failure: nothing
    would render differently, the declaration would simply become unthemeable. */
+/* Both halves carry the data-clickable guard, and the card half did not. A card list stamps
+   data-clickable only when onRowClick is set, but renders the selection checkbox on
+   selectionEnabled alone — so in a selectable-but-not-clickable list, focusing a checkbox
+   washed the whole card in brand-soft and buried its data-tone. Focus is not selection, and
+   a card that does nothing when clicked has no "activate me" state to advertise. */
 [data-terp="dataview-row"][data-clickable="true"]:focus-within td,
-[data-terp="dataview-card"]:focus-within {
+[data-terp="dataview-card"][data-clickable="true"]:focus-within {
   background: var(--color-brand-primary-soft);
 }