@ps1ui/core 0.0.0 → 0.1.0

package/dist/styles.css

@@ -0,0 +1,1930 @@
+@import "@fontsource-variable/jetbrains-mono";
+/* Palette hexes are mirrored in .storybook/ps1uiTheme.ts — see note there. */
+:root {
+  --ps1ui-font-mono:
+    "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas,
+    monospace;
+
+  --ps1ui-color-bg: #0b0f14;
+  --ps1ui-color-surface: #0f1520;
+  --ps1ui-color-border: #21262d;
+  --ps1ui-color-border-strong: #30363d;
+  --ps1ui-color-fg: #c7d5df;
+  --ps1ui-color-fg-muted: #8b98a5;
+  /* fg-subtle must maintain ≥ 4.5:1 (WCAG AA) vs BOTH --ps1ui-color-bg and --ps1ui-color-surface.
+     Surface is the tighter case; verified by Text.contrast.test.tsx. */
+  --ps1ui-color-fg-subtle: #7a8593;
+  --ps1ui-color-primary: #7ee787;
+  --ps1ui-color-primary-hover: #56d364;
+  --ps1ui-color-primary-active: #3fb950;
+  --ps1ui-color-primary-fg: #0b0f14;
+  --ps1ui-color-accent: #ffa657;
+  --ps1ui-color-focus-ring-soft: color-mix(in srgb, var(--ps1ui-color-primary) 14%, transparent);
+  --ps1ui-shadow-focus-ring: 0 0 0 3px var(--ps1ui-color-focus-ring-soft);
+
+  /* Syntax-highlight palette for CodeBlock. Every value is verified ≥ 4.5:1 vs
+     BOTH --ps1ui-color-bg and --ps1ui-color-surface by CodeBlock.contrast.test.tsx. */
+  --ps1ui-code-comment: #7a8593;
+  --ps1ui-code-string: #f0c880;
+  --ps1ui-code-keyword: #ff7b95;
+  --ps1ui-code-function: #79c0ff;
+  --ps1ui-code-constant: #ffa657;
+  --ps1ui-code-type: #5eead4;
+  --ps1ui-code-tag: #ff9587;
+  --ps1ui-code-attr: #ffdc99;
+  --ps1ui-code-punctuation: #7a8593;
+  /* Diff-specific: green = added, rose = removed. Kept separate from tag/string so
+     the semantic overlap doesn't leak between grammars (a removed diff line has
+     nothing to do with an HTML <tag>, and an added line isn't a string literal). */
+  --ps1ui-code-inserted: #7ee787;
+  --ps1ui-code-deleted: #ff8896;
+
+  --ps1ui-radius-md: 3px;
+  --ps1ui-radius-lg: 4px;
+
+  --ps1ui-space-xs: 4px;
+  --ps1ui-space-sm: 8px;
+  --ps1ui-space-md: 12px;
+  --ps1ui-space-lg: 16px;
+  --ps1ui-space-xl: 24px;
+  --ps1ui-space-2xl: 32px;
+
+  /* Vertical padding for 1px-bordered controls (Button, Input): border +
+     padding = --ps1ui-space-sm (8px), so this is a derived value, not a new
+     spacing step. */
+  --ps1ui-control-padding-y: 7px;
+
+  /* Container max-widths, in rem so they scale with the user's browser
+     font-size preference (WCAG-friendly). Numeric equivalents at the
+     browser-default 16px root: 40 = 640, 48 = 768, 64 = 1024, 80 = 1280.
+     Doubles as the breakpoint scale — see --ps1ui-breakpoint-* below. */
+  --ps1ui-container-sm: 40rem;
+  --ps1ui-container-md: 48rem;
+  --ps1ui-container-lg: 64rem;
+  --ps1ui-container-xl: 80rem;
+
+  /* Responsive breakpoints, in rem for the same accessibility reason.
+     Values are identical to --ps1ui-container-* by design: a Container
+     of size=lg (64rem) fills at exactly the `lg` breakpoint. These are
+     documentation tokens — @container / @media conditions cannot use
+     `var()` per the CSS spec, so the same numeric values are also
+     hardcoded in each component's CSS. Keep in sync. */
+  --ps1ui-breakpoint-sm: 40rem;
+  --ps1ui-breakpoint-md: 48rem;
+  --ps1ui-breakpoint-lg: 64rem;
+  --ps1ui-breakpoint-xl: 80rem;
+
+  /* Type scale, in rem so text tracks the user's browser font-size preference
+     (same rationale as the container/breakpoint tokens above). All values sit
+     on the 0.125rem (2px) grid; px equivalents at the default 16px root:
+     12 / 14 / 16 / 18 / 22 / 26 / 32. */
+  --ps1ui-font-size-xs: 0.75rem;
+  --ps1ui-font-size-sm: 0.875rem;
+  --ps1ui-font-size-md: 1rem;
+  --ps1ui-font-size-lg: 1.125rem;
+  --ps1ui-font-size-xl: 1.375rem;
+  --ps1ui-font-size-2xl: 1.625rem;
+  --ps1ui-font-size-3xl: 2rem;
+
+  --ps1ui-transition-fast: 120ms ease;
+}
+/* ==========================================================================
+ * Reset
+ * --------------------------------------------------------------------------
+ * Included in base.css (and therefore in styles.css) so consumers who commit
+ * fully to the PS1 UI look get a consistent baseline across browsers.
+ *
+ * NEVER duplicate any of these rules in components.css — that entry is for
+ * consumers embedding PS1 UI into a foreign design system, where a global
+ * reset would collide with the host system. The invariant is enforced by
+ * scripts/check-css-split.mjs at build time.
+ *
+ * Consumer heads-up: raw semantic tags rendered outside PS1 UI's own
+ * components lose their UA appearance under this reset — a bare <a> paints
+ * with inherited color/no underline (route through <Anchor>), a bare <h1>
+ * collapses to body text (route through <Heading>), a bare <button> has no
+ * chrome (route through <Button>), <img> becomes block (breaks inline avatar
+ * layouts unless you set display:inline explicitly), <ul>/<ol> lose their
+ * bullets. Locked in by src/styles/reset.test.tsx.
+ * ========================================================================== */
+/* Box model + border baseline. Applied to `*` only — NOT to ::before/::after
+   /::backdrop/::file-selector-button. Pseudo-elements with border-drawn
+   glyphs (the classic rotated-L checkmark, tooltip carets, radio-dot rings)
+   need the initial `box-sizing: content-box` so their declared width/height
+   sit INSIDE the border. Josh Comeau's reset excludes pseudos for this
+   exact reason; Tailwind Preflight includes them but then has to document
+   the "authors doing border tricks must override" caveat. We pick the
+   Comeau side because ps1ui components (Checkbox) already use the trick.
+   Locked in by reset.test.tsx's "reset does not touch pseudos" block. */
+* {
+  box-sizing: border-box;
+  border: 0 solid;
+}
+body,
+blockquote,
+dl,
+dd,
+figure,
+fieldset,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+menu,
+ol,
+p,
+pre,
+ul {
+  margin: 0;
+}
+fieldset,
+legend,
+menu,
+ol,
+ul {
+  padding: 0;
+}
+html {
+  color-scheme: dark;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  -moz-tab-size: 4;
+    -o-tab-size: 4;
+       tab-size: 4;
+  text-rendering: optimizeLegibility;
+}
+body {
+  min-height: 100dvh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* Heading responsibility belongs to <Heading>; raw h1..h6 inherit so a bare
+   <h1> outside <Heading> doesn't blow up to the UA default. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+p {
+  text-wrap: pretty;
+  overflow-wrap: break-word;
+}
+ol,
+ul,
+menu {
+  list-style: none;
+}
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+/* Anchor responsibility belongs to <Anchor>; raw <a> inherits color/decoration
+   so it doesn't paint as UA blue underline against the dark canvas. */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+/* UA still refuses to inherit font/color into form controls in 2026.
+   Inherit font-feature-settings / font-variation-settings too so JetBrains
+   Mono Variable's axes stay live inside <input> / <textarea>. */
+button,
+input,
+optgroup,
+select,
+textarea,
+::file-selector-button {
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  background-color: transparent;
+  border-radius: 0;
+  opacity: 1;
+}
+:where(select:is([multiple], [size])) optgroup {
+  font-weight: bolder;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+input:where([type="button"], [type="reset"], [type="submit"]),
+::file-selector-button {
+  -moz-appearance: button;
+       appearance: button;
+  -webkit-appearance: button;
+}
+button {
+  cursor: pointer;
+}
+textarea {
+  resize: vertical;
+}
+/* `in srgb` for consistency with the library's other color-mix calls. The
+   space is irrelevant when mixing with `transparent` (premultiplied-alpha
+   interpolation, CSS Color 4), so diverging from Tailwind Preflight's oklab
+   here is visually a no-op. */
+::-moz-placeholder {
+  opacity: 1;
+  color: color-mix(in srgb, currentcolor 55%, transparent);
+}
+::placeholder {
+  opacity: 1;
+  color: color-mix(in srgb, currentcolor 55%, transparent);
+}
+::-webkit-date-and-time-value {
+  min-height: 1lh;
+  text-align: inherit;
+}
+::-webkit-datetime-edit {
+  display: inline-flex;
+  padding: 0;
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+  height: auto;
+}
+/* number spinner: Chromium is already handled by ::-webkit-inner/outer-spin-button
+   { appearance: none } above. Firefox needs its own vendor prefix — the unprefixed
+   `appearance: textfield` is deprecated per CSS UI Level 4 (moved to compatibility
+   appendix) and dropped by Tailwind v4 Preflight, so we omit it. */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+::-webkit-search-decoration,
+::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+:-moz-focusring:where(:not(iframe)) {
+  outline: auto;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+small {
+  font-size: 80%;
+}
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--ps1ui-font-mono);
+  font-size: 1em;
+}
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+q::before,
+q::after {
+  content: "";
+}
+/* Keeps sub/sup from expanding the parent line-height. */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+hr {
+  height: 0;
+  color: inherit;
+  border-top: 1px solid;
+}
+summary {
+  display: list-item;
+}
+/* [hidden] would lose to `display: flex` etc. without this. */
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none !important;
+}
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    interpolate-size: allow-keywords;
+  }
+}
+/* ==========================================================================
+ * Ambient environment
+ * --------------------------------------------------------------------------
+ * `background`/`color`/`font-family` intentionally live on `html`, not `body`.
+ * Rationale: the reset above zeros `body { margin }`, but the browser still
+ * paints the area beyond `body` (macOS/iOS rubber-band overscroll region,
+ * horizontal-scroll overflow, viewport slack) using the canvas root's
+ * background — which is `html`. If these rules were on `body`, that overscroll
+ * area would reveal the light UA default and flash white on scroll. `color`
+ * and `font-family` cascade down to `body` and descendants naturally.
+ * ========================================================================== */
+html {
+  background: var(--ps1ui-color-bg);
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+}
+::-moz-selection {
+  background: var(--ps1ui-color-primary);
+  color: var(--ps1ui-color-primary-fg);
+}
+::selection {
+  background: var(--ps1ui-color-primary);
+  color: var(--ps1ui-color-primary-fg);
+}
+/* ==========================================================================
+ * Cascade & overrides — why this file does NOT use @layer
+ * --------------------------------------------------------------------------
+ * Wrapping these styles in `@layer ps1ui { … }` was considered and rejected:
+ * unlayered styles beat layered ones regardless of specificity, and host
+ * design systems (this entry's target audience) invariably ship unlayered
+ * element-level rules (`button { … }`, `input { … }`, `a { … }`). Layering
+ * ps1ui would let every such host rule silently override component classes,
+ * breaking components by default exactly where this entry is meant to be
+ * embedded. So component rules stay unlayered, and selectors like
+ * `.ps1ui-checkbox:checked:hover:not(:disabled)` keep real specificity.
+ *
+ * Overriding ps1ui styles, in preference order:
+ *   1. Redefine `--ps1ui-*` design tokens (the supported theming surface) —
+ *      colors, spacing, radii, fonts all flow from tokens.css.
+ *   2. Match or exceed the component selector's specificity, e.g.
+ *      `.my-app .ps1ui-button { … }`.
+ *   3. If YOUR system is fully layered, import this entry into a low layer
+ *      yourself — `@import "@ps1ui/core/components.css" layer(vendor);` —
+ *      and your layered rules above it win without extra specificity.
+ * ========================================================================== */
+/* PS1Root establishes the app-level responsive containment context.
+   `container-type: inline-size` turns this element into a query context for
+   `@container` rules used by responsive ps1ui components. Named `ps1ui-root`
+   for future targeted queries; unnamed queries in component CSS match this
+   via nearest-ancestor lookup. */
+/* Containment side-effect defense (align-self / justify-self / min-width) lives
+   in components.css's shared selector list — see the block header there. */
+.ps1ui-root {
+  container: ps1ui-root / inline-size;
+}
+.ps1ui-anchor {
+  font-family: var(--ps1ui-font-mono);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+  border-radius: var(--ps1ui-radius-md);
+  cursor: pointer;
+  transition:
+    color var(--ps1ui-transition-fast),
+    text-decoration-color var(--ps1ui-transition-fast);
+}
+/* outline (not box-shadow) so a wrapping inline anchor renders as connected fragments
+   per line-box instead of two disjoint rectangles. Modern browsers follow border-radius. */
+.ps1ui-anchor:focus-visible {
+  outline: 2px solid var(--ps1ui-color-primary);
+  outline-offset: 2px;
+}
+/* text-decoration-color defaults to currentColor, so setting only `color` per state
+   also shifts the underline. subtle's default intentionally decouples the two — the
+   underline is dimmer than the text — hence the explicit override there. */
+.ps1ui-anchor--primary {
+  color: var(--ps1ui-color-primary);
+}
+.ps1ui-anchor--primary:hover {
+  color: var(--ps1ui-color-primary-hover);
+}
+.ps1ui-anchor--primary:active {
+  color: var(--ps1ui-color-primary-active);
+}
+.ps1ui-anchor--subtle {
+  color: inherit;
+  text-decoration-color: var(--ps1ui-color-fg-subtle);
+}
+/* Reset text-decoration-color to currentColor so the underline follows the
+   hover/active color shift; without this it would stay pinned to fg-subtle
+   from the base rule. */
+.ps1ui-anchor--subtle:hover {
+  color: var(--ps1ui-color-primary);
+  text-decoration-color: currentColor;
+}
+.ps1ui-anchor--subtle:active {
+  color: var(--ps1ui-color-primary-active);
+  text-decoration-color: currentColor;
+}
+.ps1ui-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ps1ui-space-sm);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  /* Applied at base rather than per-variant so primary and secondary read as
+     equal-weight siblings — variant should encode affordance (fill vs outline),
+     not typography weight. A per-variant weight difference used to make
+     secondary feel "one size smaller" next to primary. */
+  font-weight: 600;
+  line-height: 1;
+  /* 14px: 2× the 7px vertical rhythm; deliberately off the space scale. */
+  padding: var(--ps1ui-control-padding-y) 14px;
+  border-radius: var(--ps1ui-radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  transition:
+    background var(--ps1ui-transition-fast),
+    border-color var(--ps1ui-transition-fast),
+    color var(--ps1ui-transition-fast);
+}
+.ps1ui-button:focus-visible {
+  outline: none;
+  border-color: var(--ps1ui-color-primary);
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+.ps1ui-button:disabled {
+  cursor: not-allowed;
+}
+.ps1ui-button--primary {
+  background: var(--ps1ui-color-primary);
+  color: var(--ps1ui-color-primary-fg);
+  border-color: var(--ps1ui-color-primary);
+}
+.ps1ui-button--primary:hover:not(:disabled) {
+  background: var(--ps1ui-color-primary-hover);
+  border-color: var(--ps1ui-color-primary-hover);
+}
+.ps1ui-button--primary:active:not(:disabled) {
+  background: var(--ps1ui-color-primary-active);
+  border-color: var(--ps1ui-color-primary-active);
+}
+.ps1ui-button--primary:disabled {
+  background: transparent;
+  color: var(--ps1ui-color-fg-subtle);
+  border-color: var(--ps1ui-color-border);
+}
+.ps1ui-button--secondary {
+  background: transparent;
+  color: var(--ps1ui-color-fg);
+  /* fg-subtle (~5:1 vs --ps1ui-color-bg) instead of border-strong (~1.7:1) so
+     the 1px outline actually defines the click target on the dark canvas —
+     otherwise the boundary reads as a ghost and the button visually shrinks
+     down to its text glyphs next to a solid primary. */
+  border-color: var(--ps1ui-color-fg-subtle);
+}
+.ps1ui-button--secondary:hover:not(:disabled) {
+  border-color: var(--ps1ui-color-primary);
+  background: color-mix(in srgb, var(--ps1ui-color-primary) 6%, transparent);
+}
+.ps1ui-button--secondary:active:not(:disabled) {
+  border-color: var(--ps1ui-color-primary-active);
+  background: color-mix(in srgb, var(--ps1ui-color-primary-active) 10%, transparent);
+}
+.ps1ui-button--secondary:disabled {
+  color: var(--ps1ui-color-fg-subtle);
+  border-color: var(--ps1ui-color-border);
+}
+.ps1ui-checkbox {
+  -moz-appearance: none;
+       appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  flex-shrink: 0;
+  font-family: var(--ps1ui-font-mono);
+  color: var(--ps1ui-color-primary-fg);
+  background: var(--ps1ui-color-bg);
+  border: 1px solid var(--ps1ui-color-border-strong);
+  border-radius: var(--ps1ui-radius-md);
+  cursor: pointer;
+  transition:
+    background var(--ps1ui-transition-fast),
+    border-color var(--ps1ui-transition-fast),
+    box-shadow var(--ps1ui-transition-fast);
+}
+.ps1ui-checkbox:hover:not(:disabled) {
+  border-color: var(--ps1ui-color-primary);
+}
+.ps1ui-checkbox:focus-visible {
+  outline: none;
+  border-color: var(--ps1ui-color-primary);
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+.ps1ui-checkbox:checked,
+.ps1ui-checkbox:indeterminate {
+  background: var(--ps1ui-color-primary);
+  border-color: var(--ps1ui-color-primary);
+}
+.ps1ui-checkbox:checked:hover:not(:disabled),
+.ps1ui-checkbox:indeterminate:hover:not(:disabled) {
+  background: var(--ps1ui-color-primary-hover);
+  border-color: var(--ps1ui-color-primary-hover);
+}
+.ps1ui-checkbox:checked:active:not(:disabled),
+.ps1ui-checkbox:indeterminate:active:not(:disabled) {
+  background: var(--ps1ui-color-primary-active);
+  border-color: var(--ps1ui-color-primary-active);
+}
+/* Checkmark: classic rotated-L trick — draws the right + bottom border of a small
+   rectangle, then rotates 45deg so it reads as a ✓. `:not(:indeterminate)` makes
+   precedence explicit for the mixed DOM state (both .checked and .indeterminate
+   true) so the indeterminate bar wins without relying on source order. Uses
+   `currentColor` so the disabled state can dim the mark by changing `color`.
+   Depends on the pseudo's initial `box-sizing: content-box` so the 2px borders
+   sit OUTSIDE the 4×8 content — base.css's reset intentionally excludes pseudo
+   elements from its `box-sizing: border-box` block for exactly this pattern.
+   Rendered geometry locked in by Checkbox.checkmark-geometry.test.tsx. */
+.ps1ui-checkbox:checked:not(:indeterminate)::after {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 4px;
+  height: 8px;
+  border-style: solid;
+  border-color: currentColor;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.ps1ui-checkbox:indeterminate::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 6px;
+  width: 10px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+}
+/* forced-colors force-replaces author backgrounds, so the background-drawn
+   indeterminate bar would vanish — redraw it as a border, which survives as
+   system ink (same 6–8px band; the checked ✓ is already border-drawn and
+   needs nothing). The focus-outline counterpart lives in the grouped
+   forced-colors rule in styles/components.css. Tested in
+   src/styles/forced-colors.test.tsx. */
+@media (forced-colors: active) {
+  .ps1ui-checkbox:indeterminate::after {
+    background: none;
+    height: 0;
+    border-top: 2px solid currentColor;
+    border-radius: 0;
+  }
+}
+.ps1ui-checkbox:disabled {
+  cursor: not-allowed;
+  color: var(--ps1ui-color-fg-subtle);
+  background: var(--ps1ui-color-surface);
+  border-color: var(--ps1ui-color-border);
+}
+.ps1ui-checkbox:disabled:checked,
+.ps1ui-checkbox:disabled:indeterminate {
+  background: var(--ps1ui-color-surface);
+  border-color: var(--ps1ui-color-border);
+}
+/* Input custom properties emitted by Container.tsx per set responsive-prop
+   breakpoint (`--_container-<axis>-<bp>`). Registered as non-inheriting for
+   the same reason as Stack — see Stack.css's @property block for the full
+   rationale (CSS Custom Properties Level 1 §2 inheritance default;
+   `unset`/`revert` won't block; only `initial` or `@property inherits:false`
+   works). Any new responsive axis added to Container.tsx must add matching
+   @property blocks here. */
+@property --_container-size-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_container-size-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_container-size-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_container-size-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_container-size-xl {
+  syntax: "*";
+  inherits: false;
+}
+@property --_container-px-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_container-px-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_container-px-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_container-px-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_container-px-xl {
+  syntax: "*";
+  inherits: false;
+}
+/* Container — max-width + horizontal padding + auto centering.
+   Establishes an inline-size containment context so descendants respond to
+   Container's width via `@container` queries. Named `ps1ui-container` for
+   future targeted queries.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_container-size-{bp}` / `--_container-px-{bp}` via
+   inline style (see Container.tsx). Each `@container (min-width: X)` block
+   below overrides `--_size` / `--_px` with the value for the matching
+   breakpoint — the fallback chain in `--_size-{bp}` inherits the previous
+   breakpoint's effective value so a partial responsive object cascades
+   naturally.
+
+   Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
+   inline as literal values because `@container` conditions cannot resolve
+   `var()`. Keep them in sync. */
+/* Containment side-effect defense (align-self / justify-self / min-width) lives
+   in components.css's shared selector list — see the block header there. */
+.ps1ui-container {
+  container: ps1ui-container / inline-size;
+  width: 100%;
+  margin-inline: auto;
+
+  --_size-base: var(--_container-size-base, var(--ps1ui-container-lg));
+  --_size-sm: var(--_container-size-sm, var(--_size-base));
+  --_size-md: var(--_container-size-md, var(--_size-sm));
+  --_size-lg: var(--_container-size-lg, var(--_size-md));
+  --_size-xl: var(--_container-size-xl, var(--_size-lg));
+
+  --_px-base: var(--_container-px-base, var(--ps1ui-space-lg));
+  --_px-sm: var(--_container-px-sm, var(--_px-base));
+  --_px-md: var(--_container-px-md, var(--_px-sm));
+  --_px-lg: var(--_container-px-lg, var(--_px-md));
+  --_px-xl: var(--_container-px-xl, var(--_px-lg));
+
+  --_size: var(--_size-base);
+  --_px: var(--_px-base);
+
+  max-width: var(--_size);
+  padding-inline: var(--_px);
+}
+@container (min-width: 40rem) {
+  .ps1ui-container {
+    --_size: var(--_size-sm);
+    --_px: var(--_px-sm);
+  }
+}
+@container (min-width: 48rem) {
+  .ps1ui-container {
+    --_size: var(--_size-md);
+    --_px: var(--_px-md);
+  }
+}
+@container (min-width: 64rem) {
+  .ps1ui-container {
+    --_size: var(--_size-lg);
+    --_px: var(--_px-lg);
+  }
+}
+@container (min-width: 80rem) {
+  .ps1ui-container {
+    --_size: var(--_size-xl);
+    --_px: var(--_px-xl);
+  }
+}
+/* Input custom properties emitted by Grid.tsx per set responsive-prop
+   breakpoint (`--_grid-<axis>-<bp>`). Registered as non-inheriting for the
+   same reason as Stack — see Stack.css's @property block for the full
+   rationale. Any new responsive axis added to Grid.tsx must add matching
+   @property blocks here. */
+@property --_grid-columns-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_grid-columns-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_grid-columns-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_grid-columns-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_grid-columns-xl {
+  syntax: "*";
+  inherits: false;
+}
+@property --_grid-gap-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_grid-gap-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_grid-gap-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_grid-gap-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_grid-gap-xl {
+  syntax: "*";
+  inherits: false;
+}
+/* Grid — display:grid + N-column tracks + gap.
+   Establishes an inline-size containment context so descendants respond to
+   Grid's width via `@container` queries. Named `ps1ui-grid` for future
+   targeted queries.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_grid-columns-{bp}` / `--_grid-gap-{bp}` via inline
+   style (see Grid.tsx). Each `@container (min-width: X)` block below
+   overrides `--_columns` / `--_gap` with the value for the matching
+   breakpoint; the fallback chain in `--_columns-{bp}` inherits the
+   previous breakpoint's effective value so a partial responsive object
+   cascades naturally.
+
+   Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
+   inline as literal values because `@container` conditions cannot resolve
+   `var()`. Keep them in sync. */
+/* Containment side-effect defense (align-self / justify-self / min-width) lives
+   in components.css's shared selector list — see the block header there. */
+.ps1ui-grid {
+  container: ps1ui-grid / inline-size;
+  display: grid;
+
+  --_columns-base: var(--_grid-columns-base, 1);
+  --_columns-sm: var(--_grid-columns-sm, var(--_columns-base));
+  --_columns-md: var(--_grid-columns-md, var(--_columns-sm));
+  --_columns-lg: var(--_grid-columns-lg, var(--_columns-md));
+  --_columns-xl: var(--_grid-columns-xl, var(--_columns-lg));
+
+  --_gap-base: var(--_grid-gap-base, var(--ps1ui-space-md));
+  --_gap-sm: var(--_grid-gap-sm, var(--_gap-base));
+  --_gap-md: var(--_grid-gap-md, var(--_gap-sm));
+  --_gap-lg: var(--_grid-gap-lg, var(--_gap-md));
+  --_gap-xl: var(--_grid-gap-xl, var(--_gap-lg));
+
+  --_columns: var(--_columns-base);
+  --_gap: var(--_gap-base);
+
+  grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
+  gap: var(--_gap);
+}
+@container (min-width: 40rem) {
+  .ps1ui-grid {
+    --_columns: var(--_columns-sm);
+    --_gap: var(--_gap-sm);
+  }
+}
+@container (min-width: 48rem) {
+  .ps1ui-grid {
+    --_columns: var(--_columns-md);
+    --_gap: var(--_gap-md);
+  }
+}
+@container (min-width: 64rem) {
+  .ps1ui-grid {
+    --_columns: var(--_columns-lg);
+    --_gap: var(--_gap-lg);
+  }
+}
+@container (min-width: 80rem) {
+  .ps1ui-grid {
+    --_columns: var(--_columns-xl);
+    --_gap: var(--_gap-xl);
+  }
+}
+/* Input custom properties emitted by GridItem.tsx per set responsive-prop
+   breakpoint (`--_griditem-col-span-<bp>`). Registered as non-inheriting for
+   the same reason as Stack — see Stack.css's @property block for the full
+   rationale. Any new responsive axis added to GridItem.tsx must add matching
+   @property blocks here. */
+@property --_griditem-col-span-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_griditem-col-span-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_griditem-col-span-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_griditem-col-span-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_griditem-col-span-xl {
+  syntax: "*";
+  inherits: false;
+}
+/* GridItem — child of Grid that spans multiple column tracks.
+   GridItem is a leaf: it queries an ancestor containment context (typically
+   the parent Grid, which establishes `container: ps1ui-grid / inline-size`),
+   but does NOT establish one itself. Establishing containment on every
+   GridItem would fragment the query surface for descendants and impose a
+   `contain: layout` side effect on every cell — needless overhead for a
+   component whose only job is to declare its own column span.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_griditem-col-span-{bp}` via inline style (see
+   GridItem.tsx). Each `@container (min-width: X)` block below overrides
+   `--_col-span` with the value for the matching breakpoint; the fallback
+   chain in `--_col-span-{bp}` inherits the previous breakpoint's effective
+   value so a partial responsive object cascades naturally.
+
+   Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
+   inline as literal values because `@container` conditions cannot resolve
+   `var()`. Keep them in sync.
+
+   Fallback default: `1` — a bare `<GridItem>` with no colSpan behaves
+   exactly like a plain grid child (`grid-column: span 1`), so wrapping
+   existing Grid children in `<GridItem>` never changes layout by itself.
+
+   Used outside a display:grid parent, `grid-column` is an inert property —
+   the item still renders, the declaration is simply ignored. That matches
+   the "no runtime enforcement of parent type" convention used across the
+   library. */
+.ps1ui-griditem {
+  --_col-span-base: var(--_griditem-col-span-base, 1);
+  --_col-span-sm: var(--_griditem-col-span-sm, var(--_col-span-base));
+  --_col-span-md: var(--_griditem-col-span-md, var(--_col-span-sm));
+  --_col-span-lg: var(--_griditem-col-span-lg, var(--_col-span-md));
+  --_col-span-xl: var(--_griditem-col-span-xl, var(--_col-span-lg));
+
+  --_col-span: var(--_col-span-base);
+
+  grid-column: span var(--_col-span);
+}
+@container (min-width: 40rem) {
+  .ps1ui-griditem {
+    --_col-span: var(--_col-span-sm);
+  }
+}
+@container (min-width: 48rem) {
+  .ps1ui-griditem {
+    --_col-span: var(--_col-span-md);
+  }
+}
+@container (min-width: 64rem) {
+  .ps1ui-griditem {
+    --_col-span: var(--_col-span-lg);
+  }
+}
+@container (min-width: 80rem) {
+  .ps1ui-griditem {
+    --_col-span: var(--_col-span-xl);
+  }
+}
+.ps1ui-input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.4;
+  color: var(--ps1ui-color-fg);
+  background: var(--ps1ui-color-bg);
+  border: 1px solid var(--ps1ui-color-border-strong);
+  border-radius: var(--ps1ui-radius-md);
+  padding: var(--ps1ui-control-padding-y) var(--ps1ui-space-md);
+  transition:
+    border-color var(--ps1ui-transition-fast),
+    box-shadow var(--ps1ui-transition-fast);
+}
+.ps1ui-input::-moz-placeholder {
+  color: var(--ps1ui-color-fg-subtle);
+}
+.ps1ui-input::placeholder {
+  color: var(--ps1ui-color-fg-subtle);
+}
+.ps1ui-input:hover:not(:disabled) {
+  border-color: var(--ps1ui-color-primary);
+}
+.ps1ui-input:focus {
+  outline: none;
+  border-color: var(--ps1ui-color-primary);
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+.ps1ui-input:disabled {
+  cursor: not-allowed;
+  color: var(--ps1ui-color-fg-subtle);
+  border-color: var(--ps1ui-color-border);
+  background: var(--ps1ui-color-surface);
+}
+.ps1ui-label {
+  display: inline-block;
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  font-weight: 500;
+  line-height: 1.6;
+  color: var(--ps1ui-color-fg);
+}
+/* List — semantic <ul>/<ol> wrapper with plain-text markers.
+
+   The global reset in base.css sets `list-style: none` on every <ul>/<ol>,
+   which strips the UA bullet/number glyph. List re-introduces a marker via
+   `::before` on each direct <li> — `-` for unordered, `NN.` for ordered —
+   so the "reset removes bullets" side effect turns into an on-brand
+   plain-text glyph rather than a hole.
+
+   The ordered marker uses `counter(list-item)` — the browser-maintained
+   list-item counter that already honours `<ol start>`, `<ol reversed>`,
+   and per-item `<li value>`. Using a hand-rolled `counter-reset` /
+   `counter-increment` would silently ignore all three attributes and
+   diverge from what assistive tech announcing the native counter reads.
+
+   `::before` (not `::marker`) is used because `::marker` styleability
+   lands late in some engines (custom `content` on `::marker` only reached
+   Safari 17) and because the inline-block `::before` + negative margin
+   pattern composes cleanly with block-flow content — a nested <List>
+   inside a <li> flows below the item text, with its own indent stacking
+   on top of the outer's. An earlier `display: grid` layout collided here
+   (nested list fell into the marker column and shoved the outer text
+   right); block flow avoids all of it.
+
+   Forced-colors (Windows High Contrast) repaints the `::before` glyph
+   with `CanvasText` — the marker survives as system-foreground ink; no
+   forced-colors-specific defense is needed. */
+.ps1ui-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ps1ui-space-xs);
+  padding: 0;
+  margin: 0;
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+}
+/* Hanging indent — `padding-left` reserves the marker column; the ::before
+   is inline-block with a negative `margin-left` that pulls it into that
+   reservation. Wrapped item text continues from the padding-left position
+   on line 2+, so long items don't slip back under the marker. Block-flow
+   content nested inside the <li> (a sub <List>, a paragraph, etc.) also
+   respects the padding-left, so it renders indented under the item's text
+   rather than under the marker.
+
+   Marker column widths are hard-coded per variant (not lifted to a custom
+   property) because the same numeric value shows up in `padding-left` on
+   the <li> and in `width` / `margin-left` on the ::before; a shared var
+   would need to be either non-inheriting (breaking pseudo-element access)
+   or inheriting (leaking into descendants and violating the codebase's
+   `--_*` = non-inheriting convention). Duplicating a `1ch` / `3ch`
+   literal is the smaller cost.
+
+   Ordered's `3ch` marker column fits `1.` through `99.`; lists past 99
+   items visually break the right-align column — an acceptable trade for
+   the common < 100 case. */
+.ps1ui-list--unordered > li {
+  padding-left: calc(1ch + var(--ps1ui-space-sm));
+}
+.ps1ui-list--ordered > li {
+  padding-left: calc(3ch + var(--ps1ui-space-sm));
+}
+.ps1ui-list > li::before {
+  display: inline-block;
+  padding-right: var(--ps1ui-space-sm);
+  color: var(--ps1ui-color-fg-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.ps1ui-list--unordered > li::before {
+  content: "-";
+  width: 1ch;
+  margin-left: calc((1ch + var(--ps1ui-space-sm)) * -1);
+}
+.ps1ui-list--ordered > li::before {
+  content: counter(list-item) ".";
+  width: 3ch;
+  margin-left: calc((3ch + var(--ps1ui-space-sm)) * -1);
+}
+/* Breathing room above a nested <List>. Descendant combinator (not child)
+   so the rule still applies when a consumer wraps the sublist in a layout
+   primitive — `<li><Stack><List>…</List></Stack></li>` gets the same gap
+   as `<li><List>…</List></li>`. The outer flex `gap` on `.ps1ui-list`
+   only reaches direct children, so without this rule any nested list
+   loses breathing room. */
+.ps1ui-list li .ps1ui-list {
+  margin-top: var(--ps1ui-space-xs);
+}
+/* ListItem — no rules of its own.
+
+   The `.ps1ui-listitem` class (naming parallels `.ps1ui-griditem`) is a
+   stable API hook for consumers. All marker / padding / hanging-indent
+   rules live on `.ps1ui-list > li` in List.css so a bare `<li>` inside
+   `<List>` continues to render identically to `<ListItem>`. Keeping this
+   file present (and imported from components.css) matches the
+   per-component file layout the `new-component` skill enforces. */
+.ps1ui-card {
+  background: var(--ps1ui-color-surface);
+  border: 1px solid var(--ps1ui-color-border);
+  border-radius: var(--ps1ui-radius-lg);
+  padding: var(--ps1ui-space-xl);
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+}
+/* Code — inline code chip.
+
+   Companion to <CodeBlock>, but for inline fragments that live inside body
+   text: `<Text>call <Code>useState()</Code> to add state.</Text>`.
+
+   Font-size is `0.9em` (relative) so the chip auto-scales with the surrounding
+   text. Inside a default `<Text size="sm">` (14 px) the chip renders at
+   ~12.6 px, matching a small-caps rhythm without overriding the parent's
+   size axis. Consumers who want an absolute size still can — an inline
+   `style={{ fontSize: ... }}` outranks this rule.
+
+   `overflow-wrap: anywhere` lets long identifiers (`veryLongIdentifier`,
+   `a.b.c.d`, file paths) break inside a narrow container instead of forcing
+   a horizontal scroll on the parent. `break-word` was rejected because it
+   only fires when NO other soft-wrap opportunity exists on the line — that
+   fails the common "long path inside a short label" case. `anywhere` is
+   the correct choice for inline code fragments where preserving whole-word
+   integrity has no value (code has no natural word breaks).
+
+   Font-family is set explicitly (rather than relying on base.css's `code {
+   font-family: var(--ps1ui-font-mono); }` reset) because Code must render
+   the same way when consumed via the components-only CSS entry, which
+   ships no reset. Same reason Card/Text/etc. redeclare font-family.
+
+   No variant axis: inline code is overwhelmingly used at a single visual
+   weight. Consumers who need a colored fragment can override via inline
+   style (`style={{ color: "var(--ps1ui-color-primary)" }}`) or a caller
+   className — the base chip stays a single API surface.
+
+   `padding-block: 0.1em` assumes the parent's line-height leaves at least
+   ~0.1em of vertical slack per side. Inline padding does NOT extend the
+   line box (per CSS 2.1 §10.8), so an outer `line-height: 1` container
+   would paint the chip's background/border into the adjacent line. All
+   in-repo callers (Text = 1.6, Heading = 1.3) leave ample slack;
+   consumers who tighten line-height below ~1.2 need to widen it around
+   inline `<Code>` themselves. */
+.ps1ui-code {
+  font-family: var(--ps1ui-font-mono);
+  font-size: 0.9em;
+  padding: 0.1em 0.35em;
+  background: var(--ps1ui-color-surface);
+  border: 1px solid var(--ps1ui-color-border);
+  border-radius: var(--ps1ui-radius-md);
+  color: var(--ps1ui-color-fg);
+  overflow-wrap: anywhere;
+}
+.ps1ui-codeblock {
+  margin: 0;
+  padding: var(--ps1ui-space-md) var(--ps1ui-space-lg);
+  background: var(--ps1ui-color-surface);
+  border: 1px solid var(--ps1ui-color-border);
+  border-radius: var(--ps1ui-radius-lg);
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+  overflow-x: auto;
+  -moz-tab-size: 2;
+    -o-tab-size: 2;
+       tab-size: 2;
+  /* Explicit `left` (not `start`) — <pre> defaults to text-align: inherit, so a
+     consumer that centers text on an ancestor would center each code line too.
+     `left` (rather than `start`) is deliberate: source code is inherently LTR
+     and should stay left-aligned even inside an RTL context. */
+  text-align: left;
+  /* Force LTR text flow so code renders identically inside `<html dir="rtl">` /
+     `<div dir="rtl">` ancestors — the character order and the horizontal scroll
+     direction both stay consistent with what a developer expects from code. */
+  direction: ltr;
+  /* Explicit `pre` overrides consumer reset CSS that globally sets
+     `pre { white-space: pre-wrap; }` — wrapping would defeat overflow-x: auto
+     and collapse the scrollable-region focus semantics. Per-instance opt-in
+     to wrapping is still possible via `style={{ whiteSpace: "pre-wrap" }}`. */
+  white-space: pre;
+}
+.ps1ui-codeblock:focus-visible {
+  outline: none;
+  border-color: var(--ps1ui-color-primary);
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+.ps1ui-codeblock code {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background: none;
+}
+/* Prism token classes, mapped to ps1ui code palette (see tokens.css).
+   Refractor emits hast <span class="token <type>"> nodes; keep this list
+   in sync with the token types produced by Prism grammars. */
+.ps1ui-codeblock .token.comment,
+.ps1ui-codeblock .token.prolog,
+.ps1ui-codeblock .token.doctype,
+.ps1ui-codeblock .token.cdata {
+  color: var(--ps1ui-code-comment);
+  font-style: italic;
+}
+.ps1ui-codeblock .token.punctuation,
+.ps1ui-codeblock .token.operator {
+  color: var(--ps1ui-code-punctuation);
+}
+.ps1ui-codeblock .token.property,
+.ps1ui-codeblock .token.tag,
+.ps1ui-codeblock .token.symbol {
+  color: var(--ps1ui-code-tag);
+}
+.ps1ui-codeblock .token.attr-name {
+  color: var(--ps1ui-code-attr);
+}
+.ps1ui-codeblock .token.string,
+.ps1ui-codeblock .token.char,
+.ps1ui-codeblock .token.url,
+.ps1ui-codeblock .token.attr-value,
+.ps1ui-codeblock .token.regex {
+  color: var(--ps1ui-code-string);
+}
+/* diff: line-level markers get their own hue so "+" reads as added (green) and
+   "-" reads as removed (rose). Distinct from tag/string groups on purpose. */
+.ps1ui-codeblock .token.inserted {
+  color: var(--ps1ui-code-inserted);
+}
+.ps1ui-codeblock .token.deleted {
+  color: var(--ps1ui-code-deleted);
+}
+.ps1ui-codeblock .token.number,
+.ps1ui-codeblock .token.boolean,
+.ps1ui-codeblock .token.constant,
+.ps1ui-codeblock .token.entity {
+  color: var(--ps1ui-code-constant);
+}
+.ps1ui-codeblock .token.class-name,
+.ps1ui-codeblock .token.builtin {
+  color: var(--ps1ui-code-type);
+}
+.ps1ui-codeblock .token.function,
+.ps1ui-codeblock .token.method {
+  color: var(--ps1ui-code-function);
+}
+.ps1ui-codeblock .token.keyword,
+.ps1ui-codeblock .token.selector,
+.ps1ui-codeblock .token.atrule,
+.ps1ui-codeblock .token.important {
+  color: var(--ps1ui-code-keyword);
+}
+.ps1ui-codeblock .token.important,
+.ps1ui-codeblock .token.bold {
+  font-weight: 600;
+}
+.ps1ui-codeblock .token.italic {
+  font-style: italic;
+}
+.ps1ui-details {
+  background: var(--ps1ui-color-surface);
+  border: 1px solid var(--ps1ui-color-border);
+  border-radius: var(--ps1ui-radius-md);
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+}
+.ps1ui-details__summary {
+  padding: var(--ps1ui-control-padding-y) var(--ps1ui-space-md);
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  color: var(--ps1ui-color-fg);
+  border-radius: var(--ps1ui-radius-md);
+  transition:
+    color var(--ps1ui-transition-fast),
+    box-shadow var(--ps1ui-transition-fast);
+  /* base.css's reset keeps summary's default `display: list-item`; kill the
+     marker so our ::before glyph is the only disclosure indicator. */
+  list-style: none;
+}
+/* Older WebKit (Safari < 17) renders a native disclosure triangle via its
+   private ::-webkit-details-marker pseudo — `list-style: none` alone doesn't
+   suppress it there. Explicitly hide it so ::before is the only glyph. */
+.ps1ui-details__summary::-webkit-details-marker {
+  display: none;
+}
+/* Glyph disclosure marker: `▸` when closed, `▾` when open. Fixed
+   inline-block width so the summary text baseline stays put across states —
+   the two glyphs don't measure identically in the JetBrains Mono fallback
+   monospace stack. Colored with fg-muted so the arrow reads as chrome, not
+   content; ::before is not exposed to the a11y tree so this is safe. */
+.ps1ui-details__summary::before {
+  content: "▸";
+  display: inline-block;
+  width: 1.25ch;
+  margin-right: var(--ps1ui-space-sm);
+  color: var(--ps1ui-color-fg-muted);
+}
+.ps1ui-details[open] > .ps1ui-details__summary::before {
+  content: "▾";
+}
+.ps1ui-details__summary:hover {
+  color: var(--ps1ui-color-primary);
+}
+/* Focus ring lives on the summary (the interactive element), not on details
+   itself — .ps1ui-details__summary:focus-visible is registered in
+   styles/components.css's forced-colors grouped selector so the box-shadow
+   ring falls back to a real outline in high-contrast mode. */
+.ps1ui-details__summary:focus-visible {
+  outline: none;
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+.ps1ui-details__body {
+  padding: var(--ps1ui-space-md);
+  border-top: 1px solid var(--ps1ui-color-border);
+}
+/* Input custom properties emitted by Stack.tsx per set responsive-prop
+   breakpoint (`--_stack-<axis>-<bp>`). Registered as non-inheriting so a
+   parent Stack's `--_stack-gap-md` (etc.) does NOT cascade into a nested
+   Stack — CSS custom properties inherit by default (css-variables §2), and
+   without this guard the `var(--_stack-<axis>-<bp>, fallback)` chain below
+   picks up the ancestor's value on every descendant and silently overrides
+   the child's own responsive resolution when the matching @container query
+   fires. `syntax: "*"` lets us omit `initial-value` — the default value is
+   the guaranteed-invalid value, which makes the fallback branch of each
+   `var()` in the intermediate chain fire exactly as intended. Only inline
+   styles emitted by Stack.tsx (author-origin, inline specificity) set these
+   per-element, which beats the @property registration in the cascade. If a
+   new responsive axis is added to Stack.tsx, a matching @property block MUST
+   be added here; the nested-Stack regression tests in Stack.test.tsx cover
+   every axis so a forgotten one trips CI immediately. `unset` / `revert` /
+   `revert-layer` are NOT interchangeable with this approach for custom
+   properties — they resolve to the inherited value, defeating the block. */
+@property --_stack-direction-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-direction-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-direction-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-direction-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-direction-xl {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-gap-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-gap-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-gap-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-gap-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-gap-xl {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-align-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-align-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-align-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-align-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-align-xl {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-justify-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-justify-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-justify-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-justify-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-justify-xl {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-wrap-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-wrap-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-wrap-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-wrap-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_stack-wrap-xl {
+  syntax: "*";
+  inherits: false;
+}
+/* Stack — flexbox composition of children along one axis.
+   Establishes an inline-size containment context so descendants respond to
+   Stack's width via `@container` queries. Named `ps1ui-stack` for future
+   targeted queries.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_stack-{axis}-{bp}` via inline style (see Stack.tsx).
+   Each `@container (min-width: X)` block below overrides `--_{axis}` with
+   the value for the matching breakpoint; the fallback chain in
+   `--_{axis}-{bp}` inherits the previous breakpoint's effective value so a
+   partial responsive object cascades naturally.
+
+   Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
+   inline as literal values because `@container` conditions cannot resolve
+   `var()`. Keep them in sync.
+
+   Fallback defaults:
+   - direction: `column` — vertical stacks are the mobile-first default
+     for a column-major layout primitive
+   - gap: `--ps1ui-space-md` — matches Container's default padding scale
+   - align: `normal` — the CSS box-alignment initial value; in a flex
+     context, `normal` behaves as `stretch`, matching Flexbox's default
+   - justify: `normal` — behaves as `flex-start` in a flex context
+   - wrap: `nowrap` — the flex-wrap CSS initial value
+   Each default matches the property's own initial-value behaviour so
+   omitting the corresponding prop is equivalent to not writing the
+   declaration at all. */
+/* Containment side-effect defense (align-self / justify-self / min-width) lives
+   in components.css's shared selector list — see the block header there. */
+.ps1ui-stack {
+  container: ps1ui-stack / inline-size;
+  display: flex;
+
+  --_direction-base: var(--_stack-direction-base, column);
+  --_direction-sm: var(--_stack-direction-sm, var(--_direction-base));
+  --_direction-md: var(--_stack-direction-md, var(--_direction-sm));
+  --_direction-lg: var(--_stack-direction-lg, var(--_direction-md));
+  --_direction-xl: var(--_stack-direction-xl, var(--_direction-lg));
+
+  --_gap-base: var(--_stack-gap-base, var(--ps1ui-space-md));
+  --_gap-sm: var(--_stack-gap-sm, var(--_gap-base));
+  --_gap-md: var(--_stack-gap-md, var(--_gap-sm));
+  --_gap-lg: var(--_stack-gap-lg, var(--_gap-md));
+  --_gap-xl: var(--_stack-gap-xl, var(--_gap-lg));
+
+  --_align-base: var(--_stack-align-base, normal);
+  --_align-sm: var(--_stack-align-sm, var(--_align-base));
+  --_align-md: var(--_stack-align-md, var(--_align-sm));
+  --_align-lg: var(--_stack-align-lg, var(--_align-md));
+  --_align-xl: var(--_stack-align-xl, var(--_align-lg));
+
+  --_justify-base: var(--_stack-justify-base, normal);
+  --_justify-sm: var(--_stack-justify-sm, var(--_justify-base));
+  --_justify-md: var(--_stack-justify-md, var(--_justify-sm));
+  --_justify-lg: var(--_stack-justify-lg, var(--_justify-md));
+  --_justify-xl: var(--_stack-justify-xl, var(--_justify-lg));
+
+  --_wrap-base: var(--_stack-wrap-base, nowrap);
+  --_wrap-sm: var(--_stack-wrap-sm, var(--_wrap-base));
+  --_wrap-md: var(--_stack-wrap-md, var(--_wrap-sm));
+  --_wrap-lg: var(--_stack-wrap-lg, var(--_wrap-md));
+  --_wrap-xl: var(--_stack-wrap-xl, var(--_wrap-lg));
+
+  --_direction: var(--_direction-base);
+  --_gap: var(--_gap-base);
+  --_align: var(--_align-base);
+  --_justify: var(--_justify-base);
+  --_wrap: var(--_wrap-base);
+
+  flex-direction: var(--_direction);
+  gap: var(--_gap);
+  align-items: var(--_align);
+  justify-content: var(--_justify);
+  flex-wrap: var(--_wrap);
+}
+@container (min-width: 40rem) {
+  .ps1ui-stack {
+    --_direction: var(--_direction-sm);
+    --_gap: var(--_gap-sm);
+    --_align: var(--_align-sm);
+    --_justify: var(--_justify-sm);
+    --_wrap: var(--_wrap-sm);
+  }
+}
+@container (min-width: 48rem) {
+  .ps1ui-stack {
+    --_direction: var(--_direction-md);
+    --_gap: var(--_gap-md);
+    --_align: var(--_align-md);
+    --_justify: var(--_justify-md);
+    --_wrap: var(--_wrap-md);
+  }
+}
+@container (min-width: 64rem) {
+  .ps1ui-stack {
+    --_direction: var(--_direction-lg);
+    --_gap: var(--_gap-lg);
+    --_align: var(--_align-lg);
+    --_justify: var(--_justify-lg);
+    --_wrap: var(--_wrap-lg);
+  }
+}
+@container (min-width: 80rem) {
+  .ps1ui-stack {
+    --_direction: var(--_direction-xl);
+    --_gap: var(--_gap-xl);
+    --_align: var(--_align-xl);
+    --_justify: var(--_justify-xl);
+    --_wrap: var(--_wrap-xl);
+  }
+}
+/* Table — semantic <table> with box-drawing-style grid borders, wrapped in a
+   horizontal-scroll container.
+
+   Scroll wrapper: `display: table` boxes don't honor overflow, so Table.tsx
+   renders a dedicated `__scroller` div with `overflow-x: auto`. It follows
+   CodeBlock's keyboard contract — tabIndex=0 only while the table actually
+   overflows — and reuses the shared box-shadow focus ring, so
+   `.ps1ui-table__scroller:focus-visible` is registered in the forced-colors
+   grouped selector in styles/components.css (box-shadow is force-stripped in
+   high-contrast mode; the grouped rule restores a real outline).
+
+   Grid borders: `border-collapse: collapse` + a uniform 1px cell border in
+   --ps1ui-color-border draw the closed single-stroke grid a box-drawing
+   table (┌─┬─┐) renders — collapsing is what merges adjacent
+   cell edges into one shared rule. The header row separates on two axes:
+   a surface background and a border-strong bottom rule. That rule is
+   declared on the <th> (cell origin) deliberately — in border-collapse
+   conflict resolution, equal-width equal-style borders from two adjacent
+   cells resolve to the topmost cell's color, so the th's strong bottom edge
+   wins over the first body row's plain top edge. Declaring it on the row or
+   row group instead would lose (cell origin outranks both).
+
+   All rules target `.ps1ui-table <element>` selectors, not the
+   ps1ui-thead/tbody/tr/th/td wrapper classes: a bare <thead>/<tr>/<th>/<td>
+   inside <Table> must render identically to the wrapper components (same
+   contract as `.ps1ui-list > li` vs ListItem). The wrapper classes are
+   stable hooks only.
+
+   Self-sufficiency: `border-collapse` and the <th> font-weight/text-align
+   neutralizations are declared here even though base.css's reset also
+   collapses table borders — the components.css entry ships without the
+   reset, and UA <th> defaults (bold, center) would leak through. */
+.ps1ui-table__scroller {
+  overflow-x: auto;
+}
+.ps1ui-table__scroller:focus-visible {
+  outline: none;
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+/* No width override — the UA's shrink-to-fit keeps the grid hugging its
+   content like a box-drawing table. Call sites that want a full-bleed table
+   (e.g. a props table filling a docs column) opt in with `width: 100%`. */
+.ps1ui-table {
+  border-collapse: collapse;
+  color: var(--ps1ui-color-fg);
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.6;
+}
+.ps1ui-table th,
+.ps1ui-table td {
+  border: 1px solid var(--ps1ui-color-border);
+  padding: var(--ps1ui-space-sm) var(--ps1ui-space-md);
+  /* `start` (not `left`): tables carry natural-language content and should
+     mirror in RTL contexts — unlike CodeBlock, which pins `left` because
+     source code stays LTR. Explicit on both cell kinds because the UA
+     default for <th> is center. */
+  text-align: start;
+  /* Multi-line cells align their first lines instead of drifting toward
+     vertical centers of unequal-height neighbors. */
+  vertical-align: top;
+}
+.ps1ui-table th {
+  background: var(--ps1ui-color-surface);
+  font-weight: 600;
+}
+.ps1ui-table thead th {
+  border-bottom-color: var(--ps1ui-color-border-strong);
+}
+/* Thead — no rules of its own.
+
+   The `.ps1ui-thead` class is a stable API hook for consumers. All header
+   rendering (surface background, strong bottom rule) lives on
+   `.ps1ui-table thead th` in Table.css so a bare <thead> inside <Table>
+   continues to render identically to <Thead>. Keeping this file present
+   (and imported from components.css) matches the per-component file layout
+   the `new-component` skill enforces — same precedent as ListItem.css. */
+/* Tbody — no rules of its own.
+
+   The `.ps1ui-tbody` class is a stable API hook for consumers. All cell
+   rendering lives on `.ps1ui-table th / td` in Table.css so a bare <tbody>
+   inside <Table> continues to render identically to <Tbody>. Keeping this
+   file present (and imported from components.css) matches the per-component
+   file layout the `new-component` skill enforces — same precedent as
+   ListItem.css. */
+/* Tr — no rules of its own.
+
+   The `.ps1ui-tr` class is a stable API hook for consumers. All cell
+   rendering lives on `.ps1ui-table th / td` in Table.css so a bare <tr>
+   inside <Table> continues to render identically to <Tr>. Keeping this file
+   present (and imported from components.css) matches the per-component file
+   layout the `new-component` skill enforces — same precedent as
+   ListItem.css. */
+/* Th — no rules of its own.
+
+   The `.ps1ui-th` class is a stable API hook for consumers. All header-cell
+   rendering (grid border, padding, surface background, weight) lives on
+   `.ps1ui-table th` in Table.css so a bare <th> inside <Table> continues to
+   render identically to <Th>. Keeping this file present (and imported from
+   components.css) matches the per-component file layout the `new-component`
+   skill enforces — same precedent as ListItem.css. */
+/* Td — no rules of its own.
+
+   The `.ps1ui-td` class is a stable API hook for consumers. All data-cell
+   rendering (grid border, padding, alignment) lives on `.ps1ui-table td` in
+   Table.css so a bare <td> inside <Table> continues to render identically to
+   <Td>. Keeping this file present (and imported from components.css) matches
+   the per-component file layout the `new-component` skill enforces — same
+   precedent as ListItem.css. */
+/* Input custom properties emitted by Text.tsx per set responsive-prop
+   breakpoint (`--_text-<axis>-<bp>`). Registered as non-inheriting for the
+   same reason as Stack — see Stack.css's @property block for the full
+   rationale. */
+@property --_text-size-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_text-size-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_text-size-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_text-size-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_text-size-xl {
+  syntax: "*";
+  inherits: false;
+}
+@property --_text-weight-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_text-weight-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_text-weight-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_text-weight-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_text-weight-xl {
+  syntax: "*";
+  inherits: false;
+}
+/* Text — typography primitive.
+   Text is a leaf component: it queries an ancestor containment context (a
+   PS1Root / Container / Grid / Stack), but does NOT establish one itself.
+   Establishing containment on every Text would fragment the query surface
+   for descendants and impose a `contain: layout` side effect on every
+   paragraph — needless overhead for a component that carries no children
+   worth measuring.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_text-size-{bp}` / `--_text-weight-{bp}` via inline
+   style. Each `@container (min-width: X)` block below overrides `--_size`
+   / `--_weight` with the value for the matching breakpoint; the fallback
+   chain in `--_size-{bp}` inherits the previous breakpoint's effective
+   value so a partial responsive object cascades naturally.
+
+   `weight` fallback is `initial` (= normal / 400). Consumers who want bold
+   text pass `weight="bold"` explicitly; a bare `<Text as="strong">` renders
+   as normal weight (Text is the source of truth for its own typography,
+   NOT the UA `<strong>` style). Users who need the UA-strong appearance
+   should pair `as="strong"` with `weight="bold"` for consistency across
+   engines. */
+.ps1ui-text {
+  margin: 0;
+  font-family: var(--ps1ui-font-mono);
+  line-height: 1.6;
+
+  --_size-base: var(--_text-size-base, var(--ps1ui-font-size-sm));
+  --_size-sm: var(--_text-size-sm, var(--_size-base));
+  --_size-md: var(--_text-size-md, var(--_size-sm));
+  --_size-lg: var(--_text-size-lg, var(--_size-md));
+  --_size-xl: var(--_text-size-xl, var(--_size-lg));
+
+  --_weight-base: var(--_text-weight-base, initial);
+  --_weight-sm: var(--_text-weight-sm, var(--_weight-base));
+  --_weight-md: var(--_text-weight-md, var(--_weight-sm));
+  --_weight-lg: var(--_text-weight-lg, var(--_weight-md));
+  --_weight-xl: var(--_text-weight-xl, var(--_weight-lg));
+
+  --_size: var(--_size-base);
+  --_weight: var(--_weight-base);
+
+  font-size: var(--_size);
+  font-weight: var(--_weight);
+}
+@container (min-width: 40rem) {
+  .ps1ui-text {
+    --_size: var(--_size-sm);
+    --_weight: var(--_weight-sm);
+  }
+}
+@container (min-width: 48rem) {
+  .ps1ui-text {
+    --_size: var(--_size-md);
+    --_weight: var(--_weight-md);
+  }
+}
+@container (min-width: 64rem) {
+  .ps1ui-text {
+    --_size: var(--_size-lg);
+    --_weight: var(--_weight-lg);
+  }
+}
+@container (min-width: 80rem) {
+  .ps1ui-text {
+    --_size: var(--_size-xl);
+    --_weight: var(--_weight-xl);
+  }
+}
+.ps1ui-text--truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.ps1ui-text--truncate-inline {
+  display: inline-block;
+}
+.ps1ui-text--body {
+  color: var(--ps1ui-color-fg);
+}
+.ps1ui-text--muted {
+  color: var(--ps1ui-color-fg-muted);
+}
+.ps1ui-text--subtle {
+  color: var(--ps1ui-color-fg-subtle);
+}
+.ps1ui-text--primary {
+  color: var(--ps1ui-color-primary);
+}
+.ps1ui-text--accent {
+  color: var(--ps1ui-color-accent);
+}
+/* Input custom properties emitted by Heading.tsx per set responsive-prop
+   breakpoint (`--_heading-<axis>-<bp>`). Registered as non-inheriting for
+   the same reason as Stack — see Stack.css's @property block for the full
+   rationale. */
+@property --_heading-size-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_heading-size-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_heading-size-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_heading-size-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_heading-size-xl {
+  syntax: "*";
+  inherits: false;
+}
+@property --_heading-weight-base {
+  syntax: "*";
+  inherits: false;
+}
+@property --_heading-weight-sm {
+  syntax: "*";
+  inherits: false;
+}
+@property --_heading-weight-md {
+  syntax: "*";
+  inherits: false;
+}
+@property --_heading-weight-lg {
+  syntax: "*";
+  inherits: false;
+}
+@property --_heading-weight-xl {
+  syntax: "*";
+  inherits: false;
+}
+/* Heading — semantic heading primitive with level-driven typography.
+   Like Text, Heading is a leaf: it queries an ancestor containment context
+   but does not establish one itself. See Text.css for the rationale.
+
+   Responsive values propagate via a CSS custom-property cascade. The
+   component emits `--_heading-size-{bp}` / `--_heading-weight-{bp}` via
+   inline style, always at least at `-base` (Heading.tsx normalizes the
+   level's default into the base breakpoint if the caller didn't supply
+   one). Each `@container (min-width: X)` block below overrides `--_size`
+   / `--_weight` for the matching breakpoint; the fallback chain inherits
+   the previous breakpoint's effective value so a partial responsive object
+   cascades naturally.
+
+   Heading.tsx contract: `--_heading-size-base` and `--_heading-weight-base`
+   are ALWAYS emitted via inline style (see Heading.tsx — `size` and
+   `weight` both pass through `withResponsiveBase(..., LEVEL_DEFAULTS[level].
+   size|weight)`, which guarantees the `base` breakpoint is populated for
+   every render). The `--_size-base` / `--_weight-base` fallback branches
+   below are therefore defensive floors only — they should never be reached
+   in normal rendering. If Heading.tsx ever changes to NOT normalize the
+   base breakpoint, these floors keep the component in a legible default
+   (font-size sm, font-weight normal). Text.css uses a live fallback path
+   because Text.tsx does not normalize its size/weight props. */
+.ps1ui-heading {
+  margin: 0;
+  font-family: var(--ps1ui-font-mono);
+  color: var(--ps1ui-color-fg);
+  line-height: 1.3;
+
+  /* Defensive-floor fallbacks. Never reached under normal render — see
+     the comment above. Kept as font-size sm / weight normal so a
+     bypassed Heading.tsx contract still yields legible output. */
+  --_size-base: var(--_heading-size-base, var(--ps1ui-font-size-sm));
+  --_size-sm: var(--_heading-size-sm, var(--_size-base));
+  --_size-md: var(--_heading-size-md, var(--_size-sm));
+  --_size-lg: var(--_heading-size-lg, var(--_size-md));
+  --_size-xl: var(--_heading-size-xl, var(--_size-lg));
+
+  --_weight-base: var(--_heading-weight-base, normal);
+  --_weight-sm: var(--_heading-weight-sm, var(--_weight-base));
+  --_weight-md: var(--_heading-weight-md, var(--_weight-sm));
+  --_weight-lg: var(--_heading-weight-lg, var(--_weight-md));
+  --_weight-xl: var(--_heading-weight-xl, var(--_weight-lg));
+
+  --_size: var(--_size-base);
+  --_weight: var(--_weight-base);
+
+  font-size: var(--_size);
+  font-weight: var(--_weight);
+}
+@container (min-width: 40rem) {
+  .ps1ui-heading {
+    --_size: var(--_size-sm);
+    --_weight: var(--_weight-sm);
+  }
+}
+@container (min-width: 48rem) {
+  .ps1ui-heading {
+    --_size: var(--_size-md);
+    --_weight: var(--_weight-md);
+  }
+}
+@container (min-width: 64rem) {
+  .ps1ui-heading {
+    --_size: var(--_size-lg);
+    --_weight: var(--_weight-lg);
+  }
+}
+@container (min-width: 80rem) {
+  .ps1ui-heading {
+    --_size: var(--_size-xl);
+    --_weight: var(--_weight-xl);
+  }
+}
+/* Containment side-effect defense — applied uniformly to every primitive that
+   establishes a `container-type: inline-size` context (i.e. every layout
+   primitive whose responsive props drive `@container` queries).
+
+   `container-type: inline-size` implies `contain: inline-size`, which treats
+   the element's intrinsic inline-size as 0 for parent sizing. Placing any of
+   these primitives inside a shrink-to-fit flex/grid parent (`align-items:
+   flex-start`, `justify-items: start`, etc.) would otherwise collapse them to
+   0 wide, silently degrading every `@container`-driven descendant.
+
+   `align-self: stretch` and `justify-self: stretch` force fill-cross-axis /
+   fill-inline-track in flex and grid contexts respectively (both no-ops in
+   block context). `min-width: 0` lets the primitive shrink below content-min
+   inside a narrow row parent so inner overflow-scroll surfaces (CodeBlock)
+   take over instead of bursting the row open.
+
+   Adding a new responsive-container primitive means adding its class to this
+   selector list — that's the load-bearing invariant. Per-primitive regression
+   tests (Stack.test.tsx / Container.test.tsx / Grid.test.tsx / PS1Root.test.tsx's
+   "resists collapse via align-self: stretch in shrink-wrap flex parent") catch
+   accidental removal. */
+.ps1ui-root,
+.ps1ui-container,
+.ps1ui-grid,
+.ps1ui-stack {
+  align-self: stretch;
+  justify-self: stretch;
+  min-width: 0;
+}
+/* forced-colors (Windows High Contrast) strips box-shadow, so every component
+   whose focus ring is box-shadow-based needs a real outline there — one rule,
+   one owner, same precedent as the containment grouped selector above. Add new
+   box-shadow-focus components to this list. Component-specific forced-colors
+   adjustments (e.g. Checkbox's indeterminate bar) stay in their own CSS.
+   Tested in src/styles/forced-colors.test.tsx. */
+@media (forced-colors: active) {
+  .ps1ui-button:focus-visible,
+  .ps1ui-checkbox:focus-visible,
+  .ps1ui-codeblock:focus-visible,
+  .ps1ui-details__summary:focus-visible,
+  .ps1ui-input:focus,
+  .ps1ui-table__scroller:focus-visible {
+    outline: 2px solid CanvasText;
+    outline-offset: 2px;
+  }
+}