Refine header emphasis, field-on-layer treatment, and narrow-pane control collapse

docs/architecture/10-interaction-and-feedback.md

@@ -303,8 +303,10 @@ Carbon search/active-search, NN/g #3. This bullet is the contract; cite it, not
 
 **Resolved — library sort (APG menu-button + NN/g recognition).** The Sort control (spec
 §02) reuses the **disclosure popover** primitive (the settings-popover model above), **not**
-an ARIA menu — but its trigger shows the **current state for recognition** ("Sort: Modified
-↓"), per NN/g #6 (recognition over recall), instead of a bare gear. Fields are **Modified /
+an ARIA menu — but its trigger shows the **current state for recognition** ("Modified
+↓"), per NN/g #6 (recognition over recall), instead of a bare gear. (The visible text drops
+the "Sort:" verb prefix to stay compact in the narrow library rail — §8; the full name
+"Sort by Modified, descending" rides in `aria-label`.) Fields are **Modified /
 Created / Name / Size**; the active field shows a **direction arrow** (↓ desc / ↑ asc) in both
 the trigger and the field row, and the arrow's meaning is mirrored into the field's
 `aria-label` ("Modified, descending") so it isn't carried by the glyph alone. **Selection
@@ -454,6 +456,42 @@ iconography contract, [arch 09 §5](09-visual-design.md).)
 
 ---
 
+## 8. Space-constrained controls (responsive collapse)
+
+The three work panes resize independently, so a toolbar's room is a function of its
+**pane's** width, not the viewport's. Controls must stay usable at the pane minimum
+without clipping, wrapping, or crowding.
+
+- **Query the pane, not the window.** Use a CSS **container query**
+  (`container-type: inline-size` on the row, `@container` on the controls), not a
+  media query — the pane width is what changed. Scope the container to the toolbar
+  row itself, away from heavy children (e.g. the Monaco editor) whose own layout
+  shouldn't inherit size containment.
+- **Shed labels under pressure; keep a contested primary labelled.** When a toolbar
+  would wrap or crowd, **secondary** actions collapse to icon-only and the label
+  moves to `aria-label`/`title`. A **primary that shares the row with secondaries**
+  keeps its text — the label is what marks it as _the_ action to take (the editor
+  toolbar below ~480px: Publish stays "Publish"; Extract/Revert become glyphs). A
+  **standalone primary CTA**, whose prominence is carried by fill + size + position
+  rather than its words, _may_ collapse to a universal-set icon at the pane floor
+  (the library's "Create New Snippet" → "+" below ~250px). Either way it's a
+  degradation that preserves the accessible name — distinct from the closed
+  icon-only set (arch 09 §5.1 rule 4).
+- **Trim a compact trigger's prose, not its state.** A disclosure trigger that names
+  its current state for recognition (NN/g #6) may drop the **verb prefix** to fit a
+  narrow rail — the library Sort trigger shows "Modified ↓", not "Sort: Modified ↓"
+  — but the full name (`aria-label="Sort by Modified, descending"`) is preserved for
+  assistive tech, so only redundant visible words are cut.
+- **A flex control must be able to shrink.** A side control (a Sort button) carries
+  `flex: 0 0 auto` so the flexible field (search) absorbs the slack; the field's
+  `<input>` needs `min-width: 0`, or its intrinsic ~20ch width overflows the slot
+  and overlaps its neighbour. Right-aligned toolbars (`justify-content: flex-end`)
+  clip their **leftmost** item on overflow — left-align so the trimmable end is a
+  settings affordance, not a primary control, and size the pane minimum so it
+  doesn't overflow at all.
+
+---
+
 ## Do / Don't
 
 **Do**