@lovett/ui 0.0.11 → 0.2.0

package/src/styles.css

@@ -676,3 +676,1573 @@
     transition: none !important;
   }
 }
+
+/* ---- BOARD TINT LADDER + BOARD CHROME ----
+ *
+ * ADR-146 D7 / `docs/design-briefs/tasks-board-design-language.md` §6.
+ *
+ * An earlier draft budgeted ~90 hand-written declarations (five levels x nine
+ * hues x two themes). This is the cheaper answer the prototype validated: mix
+ * the hue INTO the surface token with `color-mix(in oklab, ...)` rather than
+ * layering a translucent tint OVER it.
+ *
+ * Every rung is therefore OPAQUE in both themes by construction, which is the
+ * exact property CLAUDE.md §2 bans `--surface-overlay*` for lacking. One rule
+ * per hue; the ladder itself is authored once.
+ *
+ * `red` is deliberately absent: `--folder-red` in light mode is `207 14 15`,
+ * byte-identical to `--accent`. A red lane would put the accent on every card
+ * in it and collapse the one-accent-moment-per-view discipline.
+ *
+ * Usage: an element carries BOTH classes — `class="hue hue-blue"`. The
+ * `hueClass()` helper in `hue.ts` returns exactly that pair.
+ */
+.hue {
+  --h: rgb(var(--folder-slate));
+  --tint-container: color-mix(in oklab, var(--h) 10%, rgb(var(--surface-card)));
+  --tint-group: color-mix(in oklab, var(--h) 18%, rgb(var(--surface-card)));
+  --tint-task: color-mix(in oklab, var(--h) 46%, rgb(var(--surface-card)));
+  --tint-fill: color-mix(in oklab, var(--h) 72%, rgb(var(--surface-card)));
+  --tint-done: color-mix(in oklab, var(--h) 22%, rgb(var(--surface-card)));
+  --tint-edge: color-mix(in oklab, var(--h) 34%, rgb(var(--surface-card)));
+  /* The INK rung — the only rung meant to be read as TEXT.
+   *
+   * The six rungs above mix the hue toward the SURFACE, which is right for a
+   * fill and wrong for a glyph: `color: var(--h)` on `--tint-group` measured
+   * 2.77:1 (slate), 3.13:1 (blue) and 3.68:1 (violet) in LIGHT mode, because
+   * the ladder was tuned against the dark theme where a mid-chroma hue on a
+   * near-black card passes for free.
+   *
+   * Mixing toward `--foreground` instead is theme-correct by construction: it
+   * darkens the hue in light mode and lightens it in dark, tracking the same
+   * token the body text uses. The hue survives — this is not "just use
+   * --foreground" — but it lands on the readable side of the surface in both
+   * themes. Measured per hue in a browser at both themes before this shipped.
+   *
+   * Use it for hue-coloured TEXT on a tint (avatar initials). Never for a
+   * fill: that is what the six rungs above are. */
+  --tint-ink: color-mix(in oklab, var(--h) 62%, rgb(var(--foreground)));
+}
+.hue-amber {
+  --h: rgb(var(--folder-amber));
+}
+.hue-emerald {
+  --h: rgb(var(--folder-emerald));
+}
+.hue-teal {
+  --h: rgb(var(--folder-teal));
+}
+.hue-blue {
+  --h: rgb(var(--folder-blue));
+}
+.hue-violet {
+  --h: rgb(var(--folder-violet));
+}
+.hue-pink {
+  --h: rgb(var(--folder-pink));
+}
+.hue-slate {
+  --h: rgb(var(--folder-slate));
+}
+.hue-ink {
+  --h: rgb(var(--folder-ink));
+}
+
+/* A ledger cell settles its colour when checked (~--dur-base), it never pops.
+ * Motion is punctuation: this and the drag transform are the board's only two
+ * moments. */
+.ds-ledger-cell {
+  transition: background var(--dur-base) var(--ease-out);
+}
+
+/* Card hover lifts 1px with a shadow step (design brief §7). Authored here
+ * rather than as a JS hover state so it costs no render. */
+.ds-board-card {
+  /* The RESTING shadow lives here, not inline on the element: an inline
+     box-shadow outranks a stylesheet rule, so while it was inline the hover
+     and focus steps below were dead CSS and the 1px lift was the entire hover
+     treatment. */
+  box-shadow: var(--shadow-sm);
+  transition:
+    box-shadow var(--dur-fast) var(--ease-out),
+    transform var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+/* Inside a DragOverlay the card is off the surface and carries the weight. */
+.ds-board-card[data-overlay='true'] {
+  box-shadow: var(--shadow-lg);
+}
+/* `data-interactive` means the card has an `onOpen`. It is the ONLY thing that
+   gives the card a pointer cursor — the card is not a drag handle, so it must
+   never read `grab`, and a static card must claim no affordance at all. */
+.ds-board-card[data-interactive='true'] {
+  cursor: pointer;
+}
+.ds-board-card[data-interactive='true']:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
+}
+/* Keyboard parity with hover. The card's keyboard control is the title button,
+   which carries its own ring; this lifts the CARD so the keyboard and pointer
+   paths point at visibly the same target. Scoped with :has so focusing the
+   grip or the overflow menu — which act on themselves, not on the card — does
+   not claim the card is about to open. */
+.ds-board-card[data-interactive='true']:has(.ds-board-card-title button:focus-visible) {
+  box-shadow: var(--shadow-md);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-ledger-cell,
+  .ds-board-card {
+    transition: none !important;
+  }
+  .ds-board-card[data-interactive='true']:hover {
+    transform: none !important;
+  }
+}
+
+/* ---- BOARD CHROME (<Board> / <BoardColumn>) ----
+ *
+ * `tasks-board-design-language.md` §4 + `tasks-board-interface-standards.md`.
+ *
+ * The concentric radius chain lives here and in `task-card.tsx`:
+ *   column --radius-2xl (24) − --space-2 (8) = card --radius-lg (16)
+ *   card 16 − --space-2 (8) media inset      = media --radius-sm (8)
+ * Every step derives from the one above it and stays on the --radius-* scale.
+ */
+.ds-board-scroller {
+  display: grid;
+  grid-auto-flow: column;
+  /* No fixed width — a column has a floor, then shares the row. When the
+     columns stop fitting, the scroller overflows and the next column peeks
+     past the fold rather than disappearing (interface-standards §3). */
+  grid-auto-columns: minmax(288px, 1fr);
+  /* ONE row, and it is exactly the scroller's own height — never its content's.
+     `grid-auto-rows` defaults to `auto`, which sizes the row to the TALLEST
+     lane, so a lane with forty cards grew the row, then the scroller, then the
+     board, and the lane body's `flex: 1 1 auto` never had a smaller definite
+     height to shrink against — it just got taller. `minmax(0, 1fr)` is the
+     fix and the `0` is load-bearing: a bare `1fr` still floors at min-content,
+     which is the whole stack of cards. With the row bounded, the lane body is
+     the box that runs out of room, so IT scrolls — which is the one scrollable
+     region the board is allowed (action-bar brief §7.4). */
+  grid-template-rows: minmax(0, 1fr);
+  align-items: stretch;
+  gap: var(--space-4);
+  /* The strip scrolls HORIZONTALLY and never vertically (action-bar brief §7.2).
+     `overflow-y` is declared explicitly because a single `overflow-x: auto`
+     would leave the block axis computing to `auto` too — the coercion rule for
+     a `visible` companion — which is a board-level vertical scrollbar waiting
+     to happen the moment anything inside is a pixel too tall. */
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* No `padding-block-end`. The lanes stretch to this box's content edge, and
+     that edge has to BE the footer's top line (brief §7.3) — 12px of padding
+     under the lanes puts a gap there instead. A classic horizontal scrollbar
+     already takes its own space out of the content box; an overlay one floats
+     over the lane's own 8px of bottom padding, which holds no content. */
+  scroll-padding-inline: var(--space-4);
+  /* Fill the height the host gives us. A board that is the whole page wants
+     its lanes to reach the bottom and scroll inside themselves; a board nested
+     in a taller page just sizes to its content, because min-block-size:0 only
+     bites inside a flex/grid parent that has a height to share. */
+  min-block-size: 0;
+  block-size: 100%;
+}
+
+.ds-board-column {
+  /* The column adapts on its OWN width, not the viewport's — a board in a
+     narrow pane and a board on a wide screen are the same component. */
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-inline-size: 0;
+  background: rgb(var(--surface-frame));
+  border: 1px solid rgb(var(--border));
+  border-radius: var(--radius-2xl);
+  padding: var(--space-2);
+  transition-property: background-color, border-color;
+  transition-duration: var(--dur-fast);
+  transition-timing-function: var(--ease-out);
+}
+
+/* A COLLAPSED lane hugs its header while its neighbours keep filling.
+ *
+ * The scroller keeps `align-items: stretch` so an expanded lane still reaches
+ * the bottom of the page; `align-self` overrides that per item, which is the
+ * only way one lane can shrink on its own. Without it every lane inherits the
+ * tallest row's height and collapse appears to work only when EVERY lane is
+ * collapsed — which is exactly how it was reported.
+ *
+ * The body is not rendered at all when collapsed (see BoardColumn), so the
+ * collapsed shell is padding + header + border and nothing else. This state is
+ * NOT the filter-hidden one: a collapsed lane keeps its place in the strip and
+ * its own count; a filter-hidden lane leaves the strip for the rail. */
+.ds-board-column[data-collapsed='true'] {
+  align-self: start;
+}
+
+/* Drag-over: the border STEPS, the shell lifts one notch. No accent tint —
+   the accent marks the single most important thing in a view, and "a card is
+   hovering here" is not it. */
+.ds-board-column[data-over='true'] {
+  border-color: rgb(var(--border-strong));
+  background: rgb(var(--surface-hover));
+}
+
+.ds-board-column-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  /* --space-1, not --space-2: the collapse caret is a borderless icon control
+     and the larger inset was pushing it off the column's own alignment
+     column, so it read as crowded against the label rather than leading it.
+     Owner correction, 2026-09-06. */
+  padding-inline-start: var(--space-1);
+  min-block-size: var(--ctrl-sm);
+}
+
+.ds-board-column-dot {
+  flex: none;
+  inline-size: 8px;
+  block-size: 8px;
+  border-radius: 2px;
+  background: var(--h);
+}
+
+.ds-board-column-label {
+  margin: 0;
+  min-inline-size: 0;
+  font-size: 12.5px;
+  /* 600, not 650. Inter ships here as discrete STATIC faces (400/500/600/700 —
+     see apps/workspace/index.html), so 650 rounds up to 700 and the label
+     renders a full step heavier than authored. A variable face would honour
+     it; this one cannot. */
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: rgb(var(--foreground));
+  /* `break-word`, not `anywhere`. `anywhere` is allowed to break INSIDE a word
+     at any character AND it feeds min-content sizing, which measured as
+     "countersignatur/e" splitting mid-syllable while the header still grew the
+     column to 75px — so it broke the word AND failed to save the space. */
+  overflow-wrap: break-word;
+}
+
+.ds-board-column-count {
+  margin-inline-start: auto;
+  min-inline-size: 2ch;
+  text-align: end;
+  font-size: 11.5px;
+  font-weight: 600;
+  /* --text-muted is documented (tokens.css) as the NON-TEXT / disabled rung:
+     3.24:1 measured on a light column. A count is real text, so it goes one
+     tier up to --text-tertiary. */
+  color: rgb(var(--text-tertiary));
+}
+
+/* 12px between adjacent bordered controls (interface-standards §3). */
+.ds-board-column-actions {
+  display: flex;
+  align-items: center;
+  /* --space-2. At --space-3 the count, the + and the overflow read as three
+     unrelated controls rather than one action group. Owner correction,
+     2026-09-06. */
+  gap: var(--space-2);
+  margin-inline-start: var(--space-3);
+}
+
+.ds-board-column-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-block-size: 96px;
+  /* Overridable by the consuming surface. Capping it is what produces the
+     next-card peek instead of an infinitely tall column. Declared here rather
+     than spelled as a `var(--x, fallback)` so the token-shape guard can still
+     catch a typo in the name. */
+  /* Was a fixed 64vh. The lane now takes whatever height the column has left
+     after its header, so a full-page board reaches the bottom and a short one
+     does not stretch. The knob stays for hosts that want to cap it. */
+  --board-column-max-block-size: none;
+  max-block-size: var(--board-column-max-block-size);
+  flex: 1 1 auto;
+  overflow-y: auto;
+  scroll-padding-block-end: var(--space-6);
+}
+
+.ds-board-column-empty {
+  margin: 0;
+  padding-block: var(--space-4);
+  padding-inline: var(--space-3);
+  font-size: 12px;
+  line-height: 1.45;
+  text-align: center;
+  color: rgb(var(--text-tertiary));
+}
+
+.ds-board-columns-end {
+  align-self: start;
+  padding-block-start: var(--space-1);
+}
+
+/* ---- HIDDEN COLUMNS (the filtered case) ----
+ *
+ * `tasks-board-header-primitives.md` §3. A lane emptied BY A FILTER leaves the
+ * strip and stacks here as a row carrying `0 / n` — the count of what the
+ * filter is hiding in that lane. Nothing rotates: a row stays readable and has
+ * somewhere to put the count, which a turned-on-its-side column does not.
+ *
+ * The rail is a lane-level container, so it takes the column's own frame and
+ * the same concentric chain: --radius-2xl (24) − --space-2 (8) = the rows'
+ * --radius-lg (16).
+ */
+.ds-board-hidden-rail {
+  align-self: start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-inline-size: 0;
+  background: rgb(var(--surface-frame));
+  border: 1px solid rgb(var(--border));
+  border-radius: var(--radius-2xl);
+  padding: var(--space-2);
+}
+
+.ds-board-hidden-rail-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: var(--ctrl-sm);
+  padding-inline: var(--space-2);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-lg);
+  color: rgb(var(--foreground));
+  cursor: pointer;
+  text-align: start;
+}
+
+.ds-board-hidden-rail-head:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-focus);
+}
+
+.ds-board-hidden-rail-title {
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+}
+
+.ds-board-hidden-rail-count {
+  margin-inline-start: auto;
+  min-inline-size: 2ch;
+  text-align: end;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: rgb(var(--text-tertiary));
+}
+
+.ds-board-hidden-rail-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* A stub of a lane, not a card of its own: opaque surface, hairline border,
+ * and the lane's marker on the left exactly where the column header puts it. */
+.ds-board-hidden-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: var(--ctrl-sm);
+  padding-inline: var(--space-2);
+  background: rgb(var(--surface-card));
+  border: 1px solid rgb(var(--border));
+  border-radius: var(--radius-lg);
+}
+
+.ds-board-hidden-row-label {
+  min-inline-size: 0;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: rgb(var(--text-secondary));
+  overflow-wrap: break-word;
+}
+
+.ds-board-hidden-row-count {
+  margin-inline-start: auto;
+  /* A min-width slot so `0 / 9` and `0 / 12` do not resize the row. */
+  min-inline-size: 5ch;
+  text-align: end;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: rgb(var(--text-tertiary));
+}
+
+/* The view-level footer. `display: contents` until there is something to say,
+ * so a board with no filtering keeps the box tree it had before. */
+.ds-board-shell {
+  display: contents;
+}
+
+.ds-board-shell[data-footer='true'] {
+  display: flex;
+  flex-direction: column;
+  /* No gap: the footer is separated from the board by its own BORDER, not by
+     space and not by a shadow (action-bar brief §6.2). */
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+.ds-board-shell[data-footer='true'] > .ds-board-scroller {
+  block-size: auto;
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+/* The footer — a full-width strip pinned under the board area, with its
+ * content centred (brief §7, the diagram). It takes its height out of the
+ * board's, so the lanes shorten to meet it and the page still does not scroll;
+ * when no filter is hiding anything it is not rendered at all and the lanes
+ * reclaim the height. `flex: none` so it is never the box that shrinks. */
+.ds-board-hidden-summary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+  flex: none;
+  /* A gap ABOVE the rule, so the lanes do not sit on the divider. The margin
+     lands outside the border, which is what puts the space between the lane's
+     bottom edge and the line rather than inside the footer band. */
+  margin-block-start: var(--space-3);
+  /* Symmetric, and one step under the inline padding: the line box already
+     carries space the glyphs do not fill, so equal numbers read bottom-heavy
+     (interface-standards — optically align spacing around text). */
+  padding-block: var(--space-3);
+  padding-inline: var(--space-4);
+  border-block-start: 1px solid rgb(var(--border));
+}
+
+.ds-board-hidden-summary-text {
+  font-size: 12px;
+  color: rgb(var(--text-tertiary));
+}
+
+/* The ring settles into its new arc (--dur-base, authored in CompletionRing);
+ * reduced motion jumps to the end state instead. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-status-ring circle {
+    transition: none !important;
+  }
+}
+
+/* The card responds to the COLUMN's width, not the device's.
+ *
+ * The breakpoint is ABOVE the track floor on purpose. `grid-auto-columns:
+ * minmax(288px, 1fr)` means a column is never narrower than 288px, so the
+ * former `max-width: 250px` could not fire at any viewport — measured 288px at
+ * every width from 1440 down to 380. 320px sits just above the floor, so the
+ * compact treatment engages as soon as the columns stop having slack and are
+ * sitting on their minimum. */
+@container (max-width: 320px) {
+  .ds-board-card-title {
+    font-size: 14px;
+  }
+  .ds-board-card-footer {
+    row-gap: var(--space-2);
+  }
+}
+
+/* ---- HUE SWATCH (the column colour radiogroup) ----
+ *
+ * Two rules from CLAUDE.md §2 collide on this control and the CSS is where
+ * they are resolved:
+ *
+ *   1. A SELECTED state may never be conveyed by a translucent tint. It steps
+ *      up to an opaque surface sandwiched between an accent ring and the
+ *      surface behind it — here, a 2px `--surface-card` gap then a 2px
+ *      `--accent` ring, which reads as a halo at any hue including slate.
+ *   2. The swatch's JOB is to show the hue, so nothing is drawn on top of it:
+ *      the fill is `--tint-fill` (the ladder's most saturated rung, so teal
+ *      and emerald are actually distinguishable) with no glyph. "Not colour
+ *      alone" is carried by the accessible name (the hue's name) and
+ *      `aria-checked`, not by a tick that would need its own contrast budget.
+ *
+ * Authored here rather than inline because the SELECTED and the FOCUSED ring
+ * are both box-shadows and must be able to coexist — an inline box-shadow
+ * cannot be extended by a `:focus-visible` class. */
+.ds-hue-swatch:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-focus);
+}
+.ds-hue-swatch[aria-checked='true'] {
+  box-shadow:
+    0 0 0 2px rgb(var(--surface-card)),
+    0 0 0 4px rgb(var(--accent));
+}
+/* Focused AND selected: a second, wider ring, so keyboard focus is still
+   locatable on the swatch that already carries the selection halo. */
+.ds-hue-swatch[aria-checked='true']:focus-visible {
+  box-shadow:
+    0 0 0 2px rgb(var(--surface-card)),
+    0 0 0 4px rgb(var(--accent)),
+    0 0 0 6px rgb(var(--surface-card)),
+    0 0 0 8px rgb(var(--accent) / 0.45);
+}
+
+.ds-board-card-grip:hover {
+  color: rgb(var(--foreground));
+  background: rgb(var(--surface-inset));
+}
+
+/* ---- AVATAR ----------------------------------------------------------------
+ * A person: a photo when there is one, initials on an identity tint when there
+ * is not. `avatar.tsx` renders through these classes — ADR-147 D14.
+ *
+ * Consolidates four forks (ADR-147 Context). Read `avatar.tsx`'s header for
+ * what each of them got wrong; this file owns the two decisions that are
+ * colour rather than API:
+ *
+ * 1. THE FILL IS OPAQUE BY CONSTRUCTION. The community and admin forks filled
+ *    with `rgb(var(--info) / 0.14)`. CLAUDE.md §2's hard rule is that a
+ *    surface is never a translucent tint: two alpha layers composite against
+ *    whatever happens to be behind them, and the result is not predictable
+ *    from the tokens. Every rung below mixes the hue INTO an opaque surface.
+ * 2. THE GLYPH TAKES THE INK RUNG, NOT THE RAW HUE. See `--avatar-ink`.
+ *
+ * The three rungs use the same ratios, in the same order, against the same
+ * base as the tasks board's `.hue` ladder (`feat/tasks-lens`), so that when
+ * that branch merges its `AvatarStack` adopts this primitive without a single
+ * avatar changing colour. Reconcile the two into one ladder at that merge.
+ */
+.ds-avatar,
+.ds-avatar-group__more {
+  /* Diameter and type size. Overridden by the size modifiers below, or by the
+   * `--avatar-size` / `--avatar-font` pair for a caller-supplied pixel size.
+   * These are off the `--ctrl-*` scale on purpose: an avatar is not a control,
+   * and 22 / 32 / 52 are the diameters the four forks already ship at. */
+  --avatar-size: 22px;
+  --avatar-font: 9.5px;
+
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  /* Explicit rather than inherited from a host's preflight: the 1px edge must
+   * come out of the diameter, or a 22px avatar renders 24px wide. */
+  box-sizing: border-box;
+  inline-size: var(--avatar-size);
+  block-size: var(--avatar-size);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  font-family: var(--font-sans);
+  font-size: var(--avatar-font);
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  user-select: none;
+}
+
+.ds-avatar {
+  --avatar-hue: rgb(var(--folder-slate));
+
+  /* FILL and EDGE mix the hue toward the card, which is right for a surface. */
+  background: color-mix(in oklab, var(--avatar-hue) 18%, rgb(var(--surface-card)));
+  border: 1px solid color-mix(in oklab, var(--avatar-hue) 34%, rgb(var(--surface-card)));
+
+  /* The INK rung — the only one meant to be read as TEXT.
+   *
+   * `color: var(--avatar-hue)` on that fill measured 2.77:1 (slate), 3.13:1
+   * (blue) and 3.68:1 (violet) in LIGHT mode at 9.5px/700, because the ladder
+   * was tuned against the dark theme, where a mid-chroma hue on a near-black
+   * card passes for free. Mixing toward `--foreground` instead darkens in
+   * light and lightens in dark rather than being tuned for one theme; the hue
+   * survives, so this is not "just use --foreground".
+   *
+   * Measured per hue in a browser in both themes before it shipped (tasks
+   * board, `--tint-ink`). `diag:contrast` cannot see this pair — it resolves
+   * token pairs, not `color-mix()` — so do not read a green run as having
+   * checked it. */
+  color: color-mix(in oklab, var(--avatar-hue) 62%, rgb(var(--foreground)));
+}
+
+/* Size modifiers. Applied to a face or to the group's `+N` chip alike. */
+.ds-avatar--md {
+  --avatar-size: 32px;
+  --avatar-font: 12px;
+}
+.ds-avatar--lg {
+  --avatar-size: 52px;
+  --avatar-font: 19px;
+}
+
+/* Identity hues. `red` is absent on purpose — `--folder-red` is byte-identical
+ * to `--accent` in light mode, so a red face would spend the view's single
+ * accent moment on a person. */
+.ds-avatar--amber   { --avatar-hue: rgb(var(--folder-amber)); }
+.ds-avatar--emerald { --avatar-hue: rgb(var(--folder-emerald)); }
+.ds-avatar--teal    { --avatar-hue: rgb(var(--folder-teal)); }
+.ds-avatar--blue    { --avatar-hue: rgb(var(--folder-blue)); }
+.ds-avatar--violet  { --avatar-hue: rgb(var(--folder-violet)); }
+.ds-avatar--pink    { --avatar-hue: rgb(var(--folder-pink)); }
+.ds-avatar--slate   { --avatar-hue: rgb(var(--folder-slate)); }
+.ds-avatar--ink     { --avatar-hue: rgb(var(--folder-ink)); }
+
+/* The monogram. It has its own element because `text-box-trim` is NOT
+ * inherited and a grid container has no line boxes of its own — declaring it
+ * on `.ds-avatar` applies to nothing, which is why the first attempt at this
+ * fix in @lovett/ds measured identically to no fix at all.
+ *
+ * `place-items: center` centres the LINE BOX, and a line box is not the
+ * letter: a capital has no descender, so the empty descender space pushes the
+ * visible ink up — measured at 1.3px high in a 24px avatar. `text-box` trims
+ * to the cap-height/baseline edges so what gets centred is the LETTER, which
+ * scales with every size instead of being nudged for one.
+ *
+ * Degrades correctly by construction: a browser without support ignores both
+ * declarations and renders what shipped before — slightly high, not broken.
+ * That is why there is no @supports fallback nudge; one would double-correct
+ * the moment support lands. */
+.ds-avatar__mono {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}
+
+/* The photo sits OVER the monogram, which stays in the DOM, so a broken `src`
+ * degrades to a legible letter rather than a coloured hole. */
+.ds-avatar__img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+/* The separating ring for overlapping faces, in the HOST SURFACE's colour —
+ * which cannot be guessed from inside the component. A stack on a card sits on
+ * `--surface-card`; one in an inset well sits on `--surface-inset`. Set it
+ * with the `.ds-avatar-on-*` classes below rather than an inline style, so
+ * lens code never has to name an internal surface token (CLAUDE.md §5). */
+.ds-avatar--ring {
+  box-shadow: 0 0 0 2px var(--avatar-ring, rgb(var(--surface-card)));
+}
+
+.ds-avatar-on-card { --avatar-ring: rgb(var(--surface-card)); }
+.ds-avatar-on-frame { --avatar-ring: rgb(var(--surface-frame)); }
+.ds-avatar-on-inset { --avatar-ring: rgb(var(--surface-inset)); }
+
+/* ---- AVATAR GROUP ----
+ * The overlap is a negative margin rather than absolute positioning, so the
+ * group keeps an intrinsic width — a participant stack has to grow with the
+ * number of people in its thread. */
+.ds-avatar-group {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+}
+.ds-avatar-group--overlap > * + * {
+  margin-inline-start: calc(var(--space-2) * -1);
+}
+.ds-avatar-group--overlap > * {
+  box-shadow: 0 0 0 2px var(--avatar-ring, rgb(var(--surface-card)));
+}
+.ds-avatar-group--spaced {
+  gap: var(--space-1);
+}
+
+/* The overflow count. Reads as one of the faces, not as a badge on them, so it
+ * shares the geometry block at the top of this section. Neutral rather than
+ * hued: it is not a person. Tabular so +9 becoming +10 cannot shift the faces
+ * to its left.
+ *
+ * `--text-secondary`, not the `--text-tertiary` the task-card fork used: at
+ * these diameters the label is 9.5-12px, which is normal text, and tertiary on
+ * `--surface-inset` measures 3.70:1 in dark (4.52:1 light) — below AA. Secondary
+ * measures 5.36:1 dark / 6.91:1 light on the same fill. */
+.ds-avatar-group__more {
+  background: rgb(var(--surface-inset));
+  color: rgb(var(--text-secondary));
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── THREAD ──────────────────────────────────────────────────────────────────
+   `--thread-inner-radius` is a COMPONENT-LOCAL custom property, not a token.
+   It exists because the concentric rule (docs/design-briefs/
+   tasks-board-interface-standards.md §1) makes an inner radius a FUNCTION of
+   its container rather than a value someone picks:
+
+       innerRadius = outerRadius - padding
+
+   The panel is `--radius-xl` (20) with `--space-3` (12) of padding, so
+   everything nested directly inside it is 20 - 12 = 8 = `--radius-sm`. Every
+   inner box (the composer shell, an attachment thumbnail, the failure notice)
+   reads the property instead of naming a corner, so a host that mounts the
+   thread inside a differently-rounded container re-derives the whole chain by
+   setting ONE value rather than overriding five components:
+
+       .my-drawer .ds-thread { --thread-inner-radius: var(--radius-md); }
+
+   ...when that drawer is `--radius-2xl` (24) with `--space-3` (12) of padding.
+
+   This lives in `styles.css` rather than a `thread.css` because the package
+   ships exactly two consumer stylesheets and has no CSS loader in its tsup
+   build — a per-component import would make esbuild emit a third artifact that
+   every consumer would then have to know about. Same call `.ds-avatar` made. */
+.ds-thread {
+  /* THE THREAD OWNS ITS SCROLL. Its body (`.ds-thread__scroll`) is
+     `overflow-y: auto` and the root composer sits OUTSIDE it, pinned — but
+     that only does anything if the section itself is bounded. In a host that
+     forgets to bound it (a page, a drawer body that is itself a scroller) the
+     section grew to its content and the HOST scrolled the whole thread,
+     composer and all. Owner, 2026-09-07: "the entire viewport is scrolling
+     down, this is a common issue, make a permanent fix." This is the fix that
+     does not depend on the host: the thread can never be taller than the
+     viewport. A host that bounds it properly (`h-full min-h-0` in a flex
+     column) passes `100%` and the flex chain governs instead. Same rule as the
+     board: fill the available height and stop; only the inside scrolls. */
+  --thread-max-block-size: 100dvh;
+  max-block-size: var(--thread-max-block-size);
+  /* 20 (--radius-xl) - 12 (--space-3) = 8 (--radius-sm). This is the radius of
+     a ROOT THREAD CARD, which is the only thing nested directly inside the
+     panel. */
+  --thread-inner-radius: var(--radius-sm);
+
+  /* The chain continues one rung further INSIDE a root thread card, and it
+     continues by the same mechanism rather than a second variable: the card
+     element re-declares `--thread-inner-radius` to this value for its own
+     descendants, so the composer shell, an attachment thumbnail and the
+     failure notice all keep reading exactly one property and get the right
+     corner for wherever they happen to be mounted. The root composer, which
+     sits directly on the panel and not in a card, still resolves 8.
+
+     The card is 8 with `--space-2` (8) of block padding, so a STRICTLY
+     concentric inner corner is 0. Zero is right for a square inner well and
+     wrong for a control that has to read as a control, and §1 of the interface
+     standards exempts controls from the chain for exactly that reason ("chips,
+     date pill, controls sit flat on the card, not nested inside a rounded box").
+     `--radius-xs` (6) is the next rung DOWN from the card, so the chain still
+     never inverts. */
+  --thread-card-inner-radius: var(--radius-xs);
+
+  /* ── RAIL GEOMETRY ────────────────────────────────────────────────────────
+     Two authored values; everything else is derived from them. The rail is a
+     CONNECTOR — it leaves the parent's avatar, ends in the collapse circle, and
+     turns an elbow into the child's avatar — so every number below is a
+     consequence of where those avatars are, never a hand-picked offset. Change
+     `--thread-avatar` and the entire figure moves correctly.
+
+     AUTHORED: */
+
+  /* The avatar COLUMN width, which is the contract the rail is measured
+     against. The byline renders `<Avatar size="md">` (32) into a cell exactly
+     this wide, so if that named size ever moved, the rail would still be on the
+     column's centre line — the avatar would simply no longer fill its cell.
+     Keep the two in step; the column is what everything else trusts. */
+  --thread-avatar: var(--space-8);
+  /* Avatar → text. Also the offset the body and the action row hang from, so
+     the faces form one continuous edge down the card. */
+  --thread-gap: var(--space-2);
+  /* ONE nesting step, identical at every level. Must exceed `--thread-avatar`/2
+     or the elbow has no room to turn. At 24 against a 32 avatar the child face
+     steps three quarters of a face inward, and the default clamp of 6 tops the
+     total indent out at 144px — a ~380px task drawer still has a readable
+     column at the deepest visible level. */
+  --thread-indent: var(--space-6);
+  /* Vertical separation between comments, and the block-start padding every
+     comment carries. It is a comment's OWN padding rather than a container gap
+     for a structural reason: sibling boxes must be flush so their connector
+     segments concatenate into one unbroken line. It is also 4x the `--space-1`
+     used inside a comment, so grouping is carried by space alone. */
+  --thread-row-gap: var(--space-3);
+  /* The collapse circle. Two thirds of a face — reads as a control, stays
+     quiet. The TARGET is the full `--thread-avatar` column beneath the avatar,
+     so the 24x24 floor is met by transparent padding, not by this. */
+  --thread-circle: var(--space-4);
+  /* The engagement row's floor, and every reaction chip's height. 24 — the
+     accessibility floor. It was 32 for one pass; the owner's eyeball pass
+     (2026-09-07) asked for ~30% smaller icons, so the row came back down and
+     the glyphs inside shrank 16 → 12 (Lucide is a 24-grid set, so 12 is exact
+     half-scale and strokes land on pixel boundaries; 11 would not). It cannot
+     go below 24. The collapse circle derives its own vertical centring from
+     this, so the two stay level. */
+  --thread-action-h: var(--space-6);
+
+  /* Emoji need an explicit stack: a host that sets a narrow `font-family` on an
+     ancestor turns a reaction into tofu, and this primitive does not control
+     its host's typography. Overridable so a product that bundles its own emoji
+     font can point at it. */
+  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+
+  /* DERIVED — do not author these: */
+
+  /* The parent avatar's centre line. The rail's only x. */
+  --thread-rail-x: calc(var(--thread-avatar) / 2);
+  /* Horizontal distance from that line to the child's avatar edge, and — the
+     same value — the elbow's corner radius, which is what makes the elbow a
+     pure quarter arc that terminates exactly ON the avatar rather than near it.
+     24 - 16 = 8, i.e. `--radius-sm`, but derived so it cannot drift. */
+  --thread-elbow-run: calc(var(--thread-indent) - var(--thread-rail-x));
+  /* Distance from a comment's box top to its avatar's centre — where the elbow
+     lands, and where a non-terminal sibling's trunk picks the line back up. */
+  --thread-avatar-center: calc(var(--thread-row-gap) + var(--thread-avatar) / 2);
+  /* Where the body, the action row and the reply composer hang, so all three
+     share one alignment edge with the byline's text. */
+  --thread-content-x: calc(var(--thread-avatar) + var(--thread-gap));
+}
+
+/* ── RICH COMPOSER (ADR-148) ─────────────────────────────────────────────────
+   The TipTap surface inside the composer shell, and the bubble menu that
+   floats over it. Same concentric rule as composer.tsx: the shell reads
+   `--thread-inner-radius`; anything nested one rung further in (the code
+   block, a mention chip) takes the next rung down, `--radius-xs`.
+
+   The editor RESERVES the plain composer's height — `rows` lines of
+   13px / 1.55 plus the same block padding — so the D5 loading state (the plain
+   composer, disabled) and the mounted editor occupy the same box and the swap
+   moves nothing. `--composer-rows` is declared here and overridden inline by
+   the composer from its `rows` prop; `--composer-line` is the line box the
+   textarea already uses. */
+/* The composer's action row is a CONTAINER, so what drops out at a narrow
+   width is decided by the composer's own size and not the viewport's - the
+   same composer lives full-width on a page and ~320px wide in a drawer
+   (interface standards §3: container queries, not device breakpoints).
+   Below the threshold two things go, both meaningless on a touch device: the
+   character counter, and the send button's keycap. Without them the fixed
+   cluster no longer exceeds a 390px screen and the send button stops being cut
+   in half. */
+.ds-composer-footer {
+  container-type: inline-size;
+  container-name: composer-footer;
+}
+@container composer-footer (max-width: 380px) {
+  .ds-composer-meta,
+  .ds-composer-keycap {
+    display: none;
+  }
+}
+
+.ds-thread-rich-composer {
+  --composer-rows: 3;
+  --composer-max-rows: 12;
+  --composer-line: 1.55em;
+}
+.ds-thread-rich-composer .ProseMirror {
+  min-block-size: calc(var(--composer-rows) * var(--composer-line) + 2 * var(--space-2));
+  /* And a CEILING. A contenteditable with only a floor grows with every line
+     typed, pushing the pinned composer taller and the host scroller with it —
+     the second half of the "entire viewport scrolls" report. Past
+     `--composer-max-rows` (12) the editor scrolls internally; ProseMirror's
+     own scrollIntoView then keeps the caret visible inside the editor rather
+     than dragging the page. The plain textarea never had this problem: `rows`
+     is fixed and `resize: none`. */
+  max-block-size: calc(var(--composer-max-rows) * var(--composer-line) + 2 * var(--space-2));
+  overflow-y: auto;
+  /* Stop WHEEL and TOUCH from chaining out of the editor once it is at its
+     own limit. `handleScrollToSelection` handles the caret; this handles the
+     pointer. Without both, the page still moves — they are different input
+     paths to the same defect. */
+  overscroll-behavior: contain;
+  padding: var(--space-2) var(--space-3);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.55;
+  color: rgb(var(--foreground));
+  outline: none;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  caret-color: rgb(var(--accent));
+}
+.ds-thread-rich-composer .ProseMirror[contenteditable="false"] {
+  color: rgb(var(--text-tertiary));
+  cursor: default;
+}
+/* The Placeholder extension marks the empty first block; the hint is drawn
+   here so it sits exactly where the first character will land. */
+.ds-thread-rich-composer .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: rgb(var(--text-tertiary));
+  float: left;
+  block-size: 0;
+  pointer-events: none;
+}
+/* Block rhythm. One gap between blocks, nothing before the first or after the
+   last, so the editor and the rendered comment share a silhouette. */
+.ds-thread-rich-composer .ProseMirror > * + * {
+  margin-block-start: var(--space-2);
+}
+.ds-thread-rich-composer .ProseMirror h1,
+.ds-thread-rich-composer .ProseMirror h2,
+.ds-thread-rich-composer .ProseMirror h3 {
+  line-height: 1.3;
+  color: rgb(var(--foreground));
+}
+.ds-thread-rich-composer .ProseMirror h1 {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.ds-thread-rich-composer .ProseMirror h2 {
+  font-size: 16px;
+  font-weight: 700;
+}
+.ds-thread-rich-composer .ProseMirror h3 {
+  font-size: 14px;
+  font-weight: 600;
+}
+.ds-thread-rich-composer .ProseMirror ul,
+.ds-thread-rich-composer .ProseMirror ol {
+  padding-inline-start: var(--space-5);
+}
+.ds-thread-rich-composer .ProseMirror ul {
+  list-style: disc outside;
+}
+.ds-thread-rich-composer .ProseMirror ol {
+  list-style: decimal outside;
+}
+.ds-thread-rich-composer .ProseMirror li + li {
+  margin-block-start: var(--space-1);
+}
+.ds-thread-rich-composer .ProseMirror li > p + p {
+  margin-block-start: var(--space-1);
+}
+.ds-thread-rich-composer .ProseMirror blockquote {
+  /* Same rule width as the renderer's blockquote (`border-l-4`), on the scale. */
+  border-inline-start: var(--space-1) solid rgb(var(--accent));
+  padding-inline-start: var(--space-3);
+  color: rgb(var(--muted-foreground));
+  font-style: italic;
+}
+.ds-thread-rich-composer .ProseMirror code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  background: rgb(var(--muted));
+  border-radius: var(--radius-xs);
+  padding-inline: var(--space-1);
+}
+.ds-thread-rich-composer .ProseMirror pre {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.5;
+  background: rgb(var(--surface-inset));
+  border: 1px solid rgb(var(--border));
+  border-radius: var(--radius-xs);
+  padding: var(--space-2) var(--space-3);
+  overflow-x: auto;
+  white-space: pre;
+}
+.ds-thread-rich-composer .ProseMirror pre code {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+}
+.ds-thread-rich-composer .ProseMirror hr {
+  border: 0;
+  border-block-start: 1px solid rgb(var(--border));
+  margin-block: var(--space-3);
+}
+.ds-thread-rich-composer .ProseMirror hr.ProseMirror-selectednode {
+  border-block-start-color: rgb(var(--accent));
+}
+.ds-thread-rich-composer .ProseMirror a {
+  color: rgb(var(--accent-ink));
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+.ds-thread-rich-composer .ProseMirror s {
+  color: rgb(var(--muted-foreground));
+}
+/* The mention chip, matching comment-body.tsx's rendered chip so what is typed
+   and what is posted look the same. An atom: one selection, one delete. */
+.ds-thread-rich-composer .ProseMirror .ds-thread-mention {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: baseline;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: rgb(var(--accent-ink));
+  background: rgb(var(--surface-inset));
+  border: 1px solid rgb(var(--border));
+  border-radius: var(--radius-sm);
+  padding-inline: var(--space-1);
+  white-space: nowrap;
+}
+.ds-thread-rich-composer .ProseMirror .ds-thread-mention.ProseMirror-selectednode {
+  border-color: rgb(var(--accent));
+  box-shadow: var(--ring-focus);
+}
+
+/* The bubble menu (D7). floating-ui positions the outer element; this styles
+   the toolbar inside it. Opaque `--surface-card` + border + `--shadow-lg`, the
+   same recipe as Popover — never a translucent overlay token as a surface. */
+.ds-thread-bubble-menu {
+  z-index: 20;
+  transition: opacity var(--dur-fast) var(--ease-out);
+}
+.ds-thread-bubble-menu[data-open="false"] {
+  opacity: 0;
+  pointer-events: none;
+}
+.ds-thread-bubble-menu > [role="toolbar"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1);
+  background: rgb(var(--surface-card));
+  border: 1px solid rgb(var(--border));
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-lg);
+}
+/* A PRESSED formatting button (bold is on, the selection is a link, …) steps
+   up to an opaque surface with an accent border and `--accent-ink` glyph —
+   never an alpha tint alone (CLAUDE.md §2, the SegmentedPill finding). */
+.ds-thread-rich-composer .btn[aria-pressed="true"],
+.ds-thread-bubble-menu .btn[aria-pressed="true"] {
+  background: rgb(var(--surface-card));
+  border-color: rgb(var(--accent));
+  color: rgb(var(--accent-ink));
+  box-shadow: var(--shadow-sm);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-thread-bubble-menu {
+    transition: none;
+  }
+}
+
+/* ── THE SUGGESTION POPUP (ADR-149 D5) ───────────────────────────────────────
+ *
+ * ONE listbox, two triggers. The Suggestion plugin mounts and anchors the
+ * ANCHOR element (floating-ui, already its own dependency) into the document
+ * body, which is what lets the popup escape the thread's scroll clipping; this
+ * styles the list inside it.
+ *
+ * Opaque `--surface-card` + border + `--shadow-lg`, the same recipe as Popover
+ * and the bubble menu — never a translucent overlay token as a surface
+ * (CLAUDE.md §2). The active row steps up to a flat OPAQUE `--muted` with an
+ * accent bar down its inline start, so the state is never carried by alpha or
+ * by colour alone.
+ *
+ * `overscroll-behavior: contain` is load-bearing, not decoration: this popup
+ * appears WHILE someone is typing, and a wheel or a trackpad flick that
+ * chained out of it would scroll the page under the caret — the defect this
+ * codebase has already fixed twice in the composer. The keyboard path is
+ * closed the same way, in `suggestion-list.tsx`: the active option is brought
+ * into view by arithmetic on this element's own `scrollTop`, never
+ * `scrollIntoView`, which walks up and scrolls every ancestor it can.
+ */
+.ds-thread-suggestions-anchor {
+  /* Positioned HERE, not only by floating-ui. The plugin writes `left`/`top`
+     when `computePosition()` resolves, which is a promise: for the frame
+     before it does, an unpositioned block appended to <body> would sit at the
+     end of the document and grow the page. Absolute + a 0,0 origin makes that
+     frame a no-op instead. */
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 30;
+  inline-size: max-content;
+}
+.ds-thread-suggestions {
+  display: block;
+  min-inline-size: 15rem;
+  max-inline-size: 22rem;
+  /* Eight rows plus the padding; past that the popup scrolls, and only it. */
+  max-block-size: calc(8 * var(--ctrl-sm) + 2 * var(--space-1));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--space-1);
+  background: rgb(var(--surface-card));
+  border: 1px solid rgb(var(--border));
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-lg);
+}
+.ds-thread-suggestions__option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  inline-size: 100%;
+  /* The touch floor. Also the row height the max-block-size above counts. */
+  min-block-size: var(--ctrl-sm);
+  padding-inline: var(--space-2);
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: rgb(var(--foreground));
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: start;
+  cursor: pointer;
+}
+.ds-thread-suggestions__option[data-active="true"] {
+  background: rgb(var(--muted));
+  box-shadow: inset 2px 0 0 0 rgb(var(--accent));
+}
+/* A reserved, centred slot: the glyph column must not resize the row when a
+   two-cell emoji follows a one-letter initial. */
+.ds-thread-suggestions__glyph {
+  flex: none;
+  inline-size: var(--space-5);
+  font-size: 15px;
+  line-height: 1;
+  text-align: center;
+  color: rgb(var(--text-secondary));
+}
+.ds-thread-suggestions__label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ds-thread-suggestions__hint {
+  flex: none;
+  font-size: 11px;
+  color: rgb(var(--text-tertiary));
+}
+
+/* ── ITEM DETAIL — the field list's empty state ──────────────────────────────
+ *
+ * `docs/design-briefs/tasks-item-detail-full.md` §4: the field search and the
+ * All / Filled / Empty chips filter the visible rows. A row that does not match
+ * stays MOUNTED and carries `hidden` — unmounting it would throw away a
+ * half-finished edit on the next keystroke in the search box.
+ *
+ * Which leaves "are any rows left?" to answer, and `:has()` answers it in the
+ * one place that already knows: the browser. The alternative — every row
+ * registering itself with `<FieldList>` in an effect so React can count the
+ * matches — is a render-loop hazard for a single line of muted text.
+ */
+.ds-field-list {
+  /* The shared value column. Declared HERE with its default, and overridden
+     inline only when a host passes `labelWidth` — an override knob declares
+     itself and its default rather than living as a bare `var(--x, 132px)`
+     fallback that a typo could hide behind forever (the package's own
+     token-shape rule, and `--board-column-max-block-size` above it). Every
+     row reads it, so the values line up down the list and no row can drift. */
+  --field-label-inline-size: 132px;
+}
+.ds-field-list-empty {
+  display: none;
+}
+.ds-field-list:not(:has([data-field-row]:not([hidden]))) .ds-field-list-empty {
+  display: block;
+}
+
+/* ── ITEM DETAIL — the field row's box, and how it gives way ─────────────────
+ *
+ * The row's gap, label width and direction live HERE rather than on the
+ * element, and that is the whole reason the narrow layout works: an inline
+ * `style` beats a container query, so nothing a band needs to change can be
+ * written in the JSX.
+ *
+ * The defect this answers: the fields pane had no minimum, so dragging the
+ * divider narrow squeezed the value column to nothing and every value wrapped
+ * to about four characters — "Aug 22, 202", "Set star date". `DetailSurface`
+ * now clamps the split so the pane cannot go below 288px, and these bands are
+ * the other half — what the row does with the room it is given.
+ *
+ * WHICH COLUMN YIELDS. The label, first and deliberately. It is a short, fixed
+ * vocabulary the operator has already read and is scanning by icon and
+ * position — "Due date", "Assignee", "Priority" — while the value is the
+ * unknown content the row exists to show. So the label tightens from 132 to
+ * 104 before the value loses a pixel, and when even that is not enough the row
+ * STACKS rather than fighting for a horizontal label column at all.
+ *
+ * THE TWO NUMBERS. Breakpoints, not spacing — they are not on the `--space-N`
+ * scale because they are not a gap, and the arithmetic behind each is:
+ *
+ *   30rem / 480px  tighten the label. Above it there is room for 132.
+ *   25rem / 400px  stack. At exactly 400 the row is still side by side and the
+ *                  value column is 400 − 32 (the list's `--space-4` padding)
+ *                  − 104 (label) − 8 (gap) = 256px. Below it the value takes
+ *                  the full 256+ on its own line. 256px is therefore the floor
+ *                  from BOTH directions, and `FIELDS_MIN` in
+ *                  `detail-surface.tsx` is set to 288 to keep it there.
+ */
+.ds-field-list {
+  container-type: inline-size;
+  container-name: ds-field-list;
+}
+
+[data-field-row] {
+  gap: var(--space-2);
+  min-block-size: var(--ctrl-sm);
+  /* The list is a flex COLUMN, and a flex item shrinks below its content
+     before its scroller ever gets anything to scroll. Single-line rows hid
+     that — they wanted exactly the 32px floor above — but a stacked row wants
+     roughly 52, shrank to 32, and its value overlapped the next row's label.
+     A scrolling list's items do not shrink. */
+  flex-shrink: 0;
+}
+[data-field-row] > [data-slot='field-label'] {
+  gap: var(--space-2);
+  inline-size: var(--field-label-inline-size, 132px);
+  padding-block: var(--space-2);
+}
+
+@container ds-field-list (max-width: 30rem) {
+  [data-field-row] > [data-slot='field-label'] {
+    inline-size: 104px;
+  }
+}
+
+/* Ordered AFTER the band above on purpose: both match under 400px, and the
+   stacked rule has to be the one that lands. */
+@container ds-field-list (max-width: 25rem) {
+  /* Doubled to out-specify the element's own `items-start` utility. */
+  [data-field-row][data-field-row] {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-1);
+  }
+  [data-field-row] > [data-slot='field-label'] {
+    inline-size: 100%;
+    padding-block: var(--space-1) 0;
+  }
+  [data-field-row] > [data-slot='field-value-col'] {
+    inline-size: 100%;
+  }
+}
+
+/* ── ITEM DETAIL — the split, and collapsing a pane ──────────────────────────
+ *
+ * The clip boxes carry the size change, so they are what animates. Not during
+ * a DRAG: the pointer sets the width every frame and a 240ms tween would run
+ * a quarter-second behind the cursor. `:has()` reads the handle's own
+ * `data-dragging`, so there is no second copy of "is the operator dragging"
+ * for the two to disagree about.
+ */
+[data-slot='detail-split'] [data-detail-clip] {
+  transition:
+    inline-size var(--dur-base) var(--ease-out),
+    block-size var(--dur-base) var(--ease-out);
+}
+[data-slot='detail-split']:has([data-resizable-handle][data-dragging])
+  [data-detail-clip] {
+  transition: none;
+}
+/* The PANEL's own leading edge lives outside the split, so the rule above
+   cannot see it — and it must, because the fields pane is `flex: 1 1 0%` and
+   its inline size therefore follows the panel's width. Without this the pane
+   tweens 240ms behind the pointer for the whole drag. */
+[data-slot='detail-panel']:has(
+    [data-slot='detail-panel-resize'] [data-resizable-handle][data-dragging]
+  )
+  [data-detail-clip] {
+  transition: none;
+}
+
+/* The collapse capsule. Revealed by hover on the seam or focus inside it —
+   an `opacity: 0` button is still TABBABLE, which is what lets a keyboard user
+   reach it at all, and `:focus-within` is what makes it visible when they do.
+   `pointer-events` is the half that must NOT stay on: an invisible 24px target
+   sitting over both panes would eat clicks meant for the content. */
+[data-slot='detail-collapse-capsule'] {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--dur-fast) var(--ease-out);
+}
+[data-slot='detail-divider']:hover [data-slot='detail-collapse-capsule'],
+[data-slot='detail-divider']:focus-within [data-slot='detail-collapse-capsule'] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot='detail-split'] [data-detail-clip],
+  [data-slot='detail-collapse-capsule'] {
+    transition: none;
+  }
+}
+
+/* ── ITEM DETAIL — printing one record ───────────────────────────────────────
+ *
+ * §3 lists `Print`, and §7 says it is the one control on that list that CAN be
+ * honest: "the browser has one, and a print stylesheet is honest work". This is
+ * that work. Without it `window.print()` prints the BOARD with a fixed,
+ * viewport-height panel clipped over it — the record's fields and its whole
+ * conversation cut off at the fold — which is a control that runs and produces
+ * the wrong thing, and that is the same defect as one that does nothing.
+ *
+ * The mechanism is the classic print-one-element trick: hide everything, then
+ * un-hide the open detail and its subtree. `visibility` rather than `display`
+ * because it leaves the ancestors in the layout, so the panel is still
+ * positioned by the same boxes it renders in on screen.
+ *
+ * Then the panel stops being a window: no viewport clamp, no fixed height, no
+ * inner scrollers, and no chrome that only makes sense on a screen — the
+ * backdrop, the resize handle, the composer, and the field list's own search
+ * and filter row, which describe how to look at the record rather than what it
+ * says. The header stays: it carries the title, the completion state and when
+ * the record was last touched.
+ */
+@media print {
+  /* The app shell is a viewport-height flex column that never scrolls — the
+     board's height rule. On paper there is no viewport, so those heights have
+     to be released or the record is cut off at one page. */
+  html:has([data-slot='detail-surface'][data-state='open']),
+  body:has([data-slot='detail-surface'][data-state='open']) {
+    block-size: auto !important;
+    max-block-size: none !important;
+    overflow: visible !important;
+  }
+  body:has([data-slot='detail-surface'][data-state='open']) {
+    visibility: hidden;
+    /* The containing block for the record below. Without it the record's
+       `position: absolute` resolves against whichever ancestor happens to be
+       positioned — which is a different box in each mode, and lands the page
+       at an arbitrary offset. */
+    position: relative;
+  }
+  body:has([data-slot='detail-surface'][data-state='open'])
+    [data-slot='detail-surface'][data-state='open'] {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    /* `inset-0` on the wrapper sets a bottom edge too, which pins the record's
+       height to the viewport and clips a long one at the fold. Releasing the
+       trailing edges is what lets it be as tall as it is. */
+    inset-block-end: auto;
+    inset-inline-end: auto;
+    inline-size: 100%;
+    block-size: auto;
+    padding: 0 !important;
+    visibility: visible;
+    /* Not a centring flex box on paper. Centred, the record floats in the
+       middle of a viewport-height frame and pages break in the wrong place;
+       as a block it starts at the top of page one and flows. */
+    display: block !important;
+  }
+  body:has([data-slot='detail-surface'][data-state='open'])
+    [data-slot='detail-surface'][data-state='open'] * {
+    visibility: visible;
+  }
+
+  [data-slot='detail-panel'] {
+    max-inline-size: none !important;
+    inline-size: 100% !important;
+    block-size: auto !important;
+    overflow: visible !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+  /* Every scroller inside the record prints in full. */
+  /* `[data-detail-clip]` is the box a collapse takes to zero. On paper a
+     collapsed pane is not a layout choice, it is half the record missing, so
+     printing releases it — the same reasoning that releases the scrollers. */
+  [data-slot='detail-panel'] [data-slot='detail-split'],
+  [data-slot='detail-panel'] [data-detail-clip],
+  [data-slot='detail-panel'] [data-slot='detail-fields'],
+  [data-slot='detail-panel'] [data-slot='detail-activity'],
+  [data-slot='detail-panel'] [data-slot='field-list-body'],
+  [data-slot='detail-panel'] [role='tabpanel'] {
+    overflow: visible !important;
+    block-size: auto !important;
+    inline-size: auto !important;
+    min-block-size: 0 !important;
+    min-inline-size: 0 !important;
+    flex: none !important;
+  }
+  [data-slot='detail-panel'] [data-slot='detail-split'] {
+    display: block !important;
+  }
+
+  /* Screen-only chrome. */
+  [data-slot='detail-backdrop'],
+  [data-slot='detail-divider'],
+  [data-slot='detail-restore'],
+  [data-slot='activity-composer'],
+  [data-slot='detail-menu-slot'],
+  [data-slot='field-list'] > div:first-child {
+    display: none !important;
+  }
+  /* The header's icon-only controls — step, star, close. They are ways to
+     NAVIGATE the record, and on paper they print as empty boxes. Selected by
+     `aria-label`, which is exactly the set that is icon-only: mark-complete
+     carries its label as visible text because that label is also the state
+     readout, and it stays. */
+  [data-slot='detail-header'] button[aria-label] {
+    display: none !important;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * FORCED COLORS (Windows High Contrast Mode)
+ *
+ * Forced-colors mode replaces every author colour with a small system
+ * palette and, critically, FORCES `box-shadow: none`. Almost every focus
+ * indicator in this package is authored as
+ *
+ *     focus-visible:outline-none focus-visible:[box-shadow:var(--ring-focus)]
+ *
+ * so in HCM the outline is switched off by the author and the box-shadow is
+ * switched off by the platform: measured live, four focused controls all
+ * reported `outline-style: none; box-shadow: none`. A keyboard user in HCM
+ * had NO focus indicator anywhere in the app.
+ *
+ * The same erasure takes out the rest of the depth vocabulary — shadows,
+ * translucent fills, hue tints — so the structure those carry has to come
+ * back as borders/outlines in SYSTEM colours (`CanvasText`, `ButtonBorder`,
+ * `GrayText`, `Highlight`). System colour keywords are the correct answer
+ * here and are not colour literals: a hardcoded hex would be exactly the
+ * thing forced-colors exists to override.
+ *
+ * `forced-color-adjust: none` (opt an element OUT of the substitution) is
+ * used in ONE place below, and only where the colour IS the content.
+ * ───────────────────────────────────────────────────────────────────────── */
+@media (forced-colors: active) {
+  /* ---- 1. THE FOCUS INDICATOR --------------------------------------------
+   *
+   * SPECIFICITY NOTE. This has to beat Tailwind's `focus-visible:outline-none`
+   * utility, which is emitted as `.focus-visible\:outline-none:focus-visible`
+   * — a class plus a pseudo-class, i.e. (0,2,0). `*:focus-visible` is (0,1,0)
+   * and would lose; so would the `@layer base` `:where(...)` baseline higher
+   * up this file, which is deliberately (0,0,0). Rather than chase specificity
+   * with a manufactured selector (and lose again the next time a component
+   * adds its own `focus-visible:` class), `!important` is used — but ONLY on
+   * the three outline properties. Nothing else here is `!important`, so this
+   * cannot become the "wins everything" rule that gets copied around.
+   *
+   * `Highlight` is the system's selection/focus colour, which is what HCM
+   * users are calibrated to look for. `outline-offset` keeps the ring off the
+   * control's own forced border so the two do not read as one thick edge. */
+  *:focus-visible {
+    outline: 2px solid Highlight !important;
+    outline-offset: 2px !important;
+  }
+
+  /* ---- 2. THE TWO EXISTING RING RULES ------------------------------------
+   *
+   * `.ds-board-hidden-rail-head:focus-visible` (the hidden-columns
+   * disclosure) and `.ds-hue-swatch:focus-visible` are the two places this
+   * file authors a ring itself. Both are `outline: none` + box-shadow, so
+   * both are covered by rule 1 above — this rule only neutralises their
+   * `outline: none`, which rule 1's `!important` already does. What is NOT
+   * covered is the hue swatch's SELECTED halo, which is a box-shadow and not
+   * a focus state: see rule 5. */
+
+  /* ---- 3. CARD / PAGE SEPARATION -----------------------------------------
+   *
+   * Every surface below separates from what is behind it with a background
+   * step plus a shadow. In HCM the step collapses (all backgrounds become
+   * `Canvas`) and the shadow is dropped, so a board reads as one flat field
+   * of text with no cards and no lanes in it.
+   *
+   * These are declared explicitly rather than relied upon: most of them do
+   * carry a 1px border already, but `.ds-board-card`'s is an INLINE style on
+   * task-card.tsx and `--border-card` is a theme token that a future theme is
+   * free to make transparent — a transparent border is not forced into
+   * visibility, so the separation would silently vanish again. `ButtonBorder`
+   * is the system's "edge of a thing" colour and reads as structure rather
+   * than as text. */
+  .ds-card-surface,
+  .ds-card-tray,
+  .ds-board-card,
+  .ds-board-column,
+  .ds-board-hidden-rail,
+  .ds-board-hidden-row {
+    border: 1px solid ButtonBorder;
+  }
+
+  /* ---- 4. THE STATUS RING ------------------------------------------------
+   *
+   * `StatusRing` is two concentric `<circle>` strokes: a `--border` track and
+   * a hue arc whose LENGTH is the percentage. `stroke` is one of the forced
+   * properties, so in HCM both circles paint in the same colour and the ring
+   * reads as a solid, meaningless "100%" — the one number it exists to show
+   * is the one that disappears.
+   *
+   * Restored with system colours rather than `forced-color-adjust: none`,
+   * because the arc's length already carries the meaning; it only needs the
+   * track to stop impersonating it. The track drops to `GrayText` (the
+   * system's de-emphasised rung) and the arc takes `CanvasText`.
+   *
+   * `circle + circle` is the arc: CompletionRing renders the track first and
+   * the arc second, and stroke is set there as an SVG presentation attribute,
+   * which any CSS rule outranks. */
+  .ds-status-ring circle {
+    stroke: GrayText;
+  }
+  .ds-status-ring circle + circle {
+    stroke: CanvasText;
+  }
+
+  /* ---- 5. THE HUE SWATCH ------------------------------------------------
+   *
+   * THE ONE `forced-color-adjust: none` IN THIS FILE, and the reason is that
+   * this control's entire job is to show a colour. The column-colour
+   * radiogroup asks "which hue is this lane" and answers with the fill and
+   * nothing else — there is no glyph, no pattern, no second cue by design
+   * (see the HUE SWATCH block above: a tick would need its own contrast
+   * budget on top of a saturated fill). Forced into the system palette, nine
+   * swatches become nine identical squares and the control is unusable.
+   *
+   * Opting out also preserves the SELECTED halo, which is a box-shadow
+   * (`--surface-card` gap + `--accent` ring) and would otherwise be dropped,
+   * leaving the chosen hue unmarked. Focus is unaffected: rule 1's outline is
+   * authored here, not substituted, so `Highlight` still resolves.
+   *
+   * Note that the hue is NOT the swatch's only cue for assistive tech — the
+   * accessible name is the hue's name and `aria-checked` carries selection.
+   * This is a purely visual opt-out for a purely visual control. */
+  .ds-hue-swatch {
+    forced-color-adjust: none;
+  }
+
+  /* ---- 6. THE LANE HUE DOT ----------------------------------------------
+   *
+   * `.ds-board-column-dot` is an 8px square filled with the lane's hue and
+   * nothing else, so in HCM it becomes an invisible hole beside the label.
+   * It gets a border rather than `forced-color-adjust: none` on purpose: the
+   * dot is `aria-hidden` decoration sitting immediately before the lane's own
+   * text label, so the hue is redundant information and does not earn an
+   * opt-out. What it does need is to still read as a marker. */
+  .ds-board-column-dot {
+    border: 1px solid CanvasText;
+  }
+
+  /* ---- 7. LEDGER CELLS ---------------------------------------------------
+   *
+   * `.ds-ledger-cell` encodes done / current / pending as three background
+   * fills (`--tint-fill`, `--tint-task`, `--surface-card`) with no border and
+   * no glyph. Forced to `Canvas`, the whole ledger becomes one blank bar: the
+   * cells stop being distinguishable from each other AND from the run they
+   * sit in.
+   *
+   * The separation is restored with an inset `CanvasText` hairline, so the
+   * cells at least read as discrete cells. The done/pending DISTINCTION is
+   * not recoverable from CSS alone — it lives in an inline `background` on
+   * each cell with no data attribute to select on, and progress-ledger.tsx
+   * was out of scope for this pass. The non-visual cue does exist (the run's
+   * accessible name is "<label>: N of M done"), but a sighted HCM user still
+   * cannot see WHICH cells are done. Logged as a follow-up: the fix is a
+   * `data-state="done|current|pending"` attribute on the cell, at which point
+   * `forced-color-adjust: none` here (or a `Highlight` fill for `done`) would
+   * carry it. */
+  .ds-ledger-cell {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+
+  /* ---- 8. THE OPTION ROW'S BORROWED RING ---------------------------------
+   *
+   * `ToggleRow` paints the focus ring on the ROW because its checkbox input
+   * is `opacity: 0` — an outline on the input itself would be invisible. That
+   * ring is a box-shadow, so it is dropped here, and rule 1 lands the system
+   * outline on the invisible input where nobody can see it. The row takes the
+   * indicator instead. */
+  [data-slot='option-row']:has(:focus-visible) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}