@master/internal-site 0.1.2 → 0.2.0

package/src/styles/system/callout.css

@@ -0,0 +1,14 @@
+/* callout: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-callout code { padding: .125em .375em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: color-mix(in oklab, var(--ui-text-strong) 60%, var(--ui-text-body)); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-regular) .84em/1 var(--font-family-mono); overflow-wrap: anywhere; }
+  .ui-callout { --tone: var(--ui-tone-neutral); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ui-space-sm); padding: .875rem var(--ui-space-md); border-radius: var(--ui-radius-lg);
+    background: color-mix(in oklab, var(--tone) 2.5%, var(--ui-surface-canvas)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 12%, var(--ui-line-contour)); color: var(--ui-text-body); font-size: var(--ui-text-small); line-height: var(--ui-leading-small); }
+  .ui-callout > svg { width: 1rem; height: 1rem; margin-top: .21875rem; color: color-mix(in oklab, var(--tone) 80%, var(--ui-text-strong)); }
+  .ui-callout > div { min-width: 0; overflow-wrap: anywhere; }
+  .ui-callout > div > :first-child { margin-top: 0; } .ui-callout > div > :last-child { margin-bottom: 0; }
+  .ui-callout b { color: var(--ui-text-strong); font-weight: var(--ui-weight-strong); }
+  .ui-callout[data-tone="info"] { --tone: var(--ui-status-info); }
+  .ui-callout[data-tone="success"], .ui-callout[data-tone="do"] { --tone: var(--ui-status-success); }
+  .ui-callout[data-tone="warning"] { --tone: var(--ui-status-warning); }
+  .ui-callout[data-tone="danger"], .ui-callout[data-tone="dont"] { --tone: var(--ui-status-danger); }
+}

package/src/styles/system/chart.css

@@ -0,0 +1,18 @@
+/* chart: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-chart { display: grid; gap: var(--ui-space-md); padding: var(--ui-space-lg); border-radius: var(--ui-radius-xl); @apply --ui-sheet-face; box-shadow: var(--ui-elevation-rise-1); }
+  .ui-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ui-space-xs) var(--ui-space-md); }
+  .ui-chart-head b { color: var(--ui-text-strong); font-size: var(--ui-text-small); font-weight: var(--ui-weight-strong); }
+  .ui-chart-head small { display: block; color: var(--ui-text-muted); font: var(--ui-weight-regular) var(--ui-text-caption)/1.5 var(--font-family-sans); font-variant-numeric: tabular-nums; }
+  .ui-chart-row { display: grid; grid-template-columns: minmax(6.5rem, 12rem) minmax(0, 1fr) minmax(4.5rem, auto); align-items: center; gap: var(--ui-space-xs) var(--ui-space-sm); font-size: .8125rem; }
+  .ui-chart-row > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--ui-space-xs); min-width: 0; color: var(--ui-text-strong); overflow-wrap: anywhere; }
+  .ui-chart-row > span:first-child > small { flex-basis: 100%; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1.4 var(--font-family-sans); font-variant-numeric: tabular-nums; }
+  .ui-chart-row > output { color: var(--ui-text-body); font: var(--ui-weight-regular) .8125rem/1 var(--font-family-sans); text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
+  .ui-chart-row > .ui-legend { grid-column: 2 / -1; gap: 2px var(--ui-space-md); font-size: .75rem; }
+  .ui-chart-row > .ui-legend b { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
+  @media (width < 35rem) {
+    .ui-chart-row { grid-template-columns: minmax(0, 1fr) auto; }
+    .ui-chart-row > .ui-bar { grid-column: 1 / -1; grid-row: 2; }
+    .ui-chart-row > .ui-legend { grid-column: 1 / -1; }
+  }
+}

package/src/styles/system/checks.css

@@ -0,0 +1,18 @@
+@prune native;
+/* checks: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-xs); color: var(--ui-text-strong); font-size: var(--ui-text-small); cursor: pointer; }
+  .ui-check > input:not(.ui-switch) { appearance: none; display: grid; place-items: center; flex: none; width: 1.125rem; height: 1.125rem; margin: 0; border-radius: var(--ui-radius-sm); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); cursor: pointer; transition: background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick); }
+  .ui-check > input:not(.ui-switch):not(:checked) { box-shadow: var(--ui-elevation-sink), inset 0 0 0 1px var(--ui-line-divider); }
+  .ui-check > input:not(.ui-switch)::after { content: ""; width: 10px; height: 10px; opacity: 0; background: var(--ui-text-inverse); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
+  .ui-check > input:not(.ui-switch):checked { background: var(--ui-surface-ink); box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .16), oklch(100% 0 none)), 0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .5)); }
+  .ui-check > input:not(.ui-switch):checked::after { opacity: 1; }
+  .ui-check > input[type="radio"] { border-radius: 50%; }
+  .ui-check > input[type="radio"]::after { width: 6px; height: 6px; border-radius: 50%; mask: none; }
+  .ui-check > input:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+  .ui-switch { position: relative; appearance: none; flex: none; width: 2.25rem; height: 1.375rem; margin: 0; border-radius: var(--ui-radius-pill); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); cursor: pointer; transition: background-color var(--ui-duration-base) var(--ui-ease); }
+  .ui-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)); box-shadow: 0 0 0 1px var(--ui-line-contour), 0 1px 1px var(--ui-shade-1), 0 2px 3px -1px var(--ui-shade-2); transition: translate var(--ui-duration-base) var(--ui-ease); }
+  .ui-switch:checked { background: var(--ui-surface-ink); box-shadow: inset 0 1px 2px oklch(0% 0 none / .3); }
+  .ui-switch:checked::before { translate: .875rem 0; background: light-dark(linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)), linear-gradient(180deg, oklch(26% .0024 265), oklch(20% .002 265))); }
+  .ui-switch:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
+}

package/src/styles/system/code-panel.css

@@ -0,0 +1,82 @@
+/* code-panel: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-code { position: relative; min-width: 0; overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-surface-code); color: var(--ui-code-text); box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip); }
+  .ui-code { --code-corner: calc(var(--ui-space-md) + var(--ui-text-code) * var(--ui-leading-code) / 2 - 1rem); }
+  .ui-code-bar { display: flex; align-items: center; gap: var(--ui-space-xs); min-height: calc(var(--code-corner) + 2rem); padding: var(--code-corner) var(--code-corner) 0 var(--ui-space-md); }
+  .ui-code-bar > .ui-tabs { flex: 1; min-width: 0; margin-left: calc(var(--code-corner) - var(--ui-space-md)); }
+  .ui-code-file { display: inline-flex; align-items: center; gap: var(--ui-space-xs); flex: 1; min-width: 0; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); }
+  .ui-code-file svg { flex: none; width: 14px; height: 14px; }
+  .ui-code pre { margin: 0; padding: var(--ui-space-md) 0; overflow-x: auto; font: var(--ui-weight-regular) var(--ui-text-code)/var(--ui-leading-code) var(--font-family-mono); tab-size: 2; scrollbar-width: thin; }
+  .ui-code pre:focus-visible { @apply --ui-focus-ring; outline-offset: -4px; border-radius: var(--ui-radius-md); }
+  .ui-code:has(> .ui-code-bar) pre { padding-top: var(--ui-space-2xs); }
+  .ui-code-line { display: block; padding: 0 var(--ui-space-lg) 0 calc(var(--ui-space-md) + var(--code-diff-gutter, 0px)); }
+  .ui-code-line { min-height: 1lh; }
+  .ui-code[data-numbers] { counter-reset: line; }
+  .ui-code[data-numbers] .ui-code-line::before { counter-increment: line; content: counter(line); display: inline-block; width: 1.75rem; margin-right: var(--ui-space-sm); color: var(--ui-text-disabled); text-align: right; user-select: none; }
+  .ui-code-line[data-mark="active"] { background: var(--ui-code-active); box-shadow: inset 2px 0 0 var(--ui-line-mark); }
+  .ui-code-line[data-mark="added"] { background: var(--ui-code-added); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ui-status-success) 70%, transparent); }
+  .ui-code-line[data-mark="removed"] { background: var(--ui-code-removed); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ui-status-danger) 70%, transparent); }
+  .ui-code pre:has(.ui-code-line:is([data-mark="added"], [data-mark="removed"])) { --code-diff-gutter: calc(1ch + var(--ui-space-sm)); }
+  .ui-code-line:is([data-mark="added"], [data-mark="removed"]) { position: relative; min-width: min-content; }
+  .ui-code-line[data-mark="added"]::after, .ui-code-line[data-mark="removed"]::after { position: absolute; top: 0; left: var(--ui-space-md); width: 1ch; text-indent: 0; text-align: center; color: var(--ui-text-disabled); user-select: none; }
+  .ui-code-line[data-mark="added"]::after { content: "+"; }
+  .ui-code-line[data-mark="removed"]::after { content: "−"; }
+  .ui-code-line mark { padding: 1px 2px; border-radius: 3px; background: light-dark(oklch(22% .002 265 / .08), oklch(100% 0 none / .1)); color: inherit; box-shadow: inset 0 -1px 0 var(--ui-line-mark); }
+  .ui-code .t { color: var(--ui-code-function); } .ui-code .a { color: var(--ui-code-property); } .ui-code .s { color: var(--ui-code-string); }
+  .ui-code .p { color: var(--ui-code-punctuation); } .ui-code .k { color: var(--ui-code-keyword); } .ui-code .c { color: var(--ui-code-comment); font-style: italic; } .ui-code .n { color: var(--ui-code-number); }
+  .ui-code > .ui-disclosure { border-top: 1px solid var(--ui-line-hair); }
+  .ui-code > .ui-disclosure > summary { padding-inline: var(--ui-space-md); }
+  .ui-code > .ui-disclosure > pre { padding-top: 0; }
+}
+
+
+/*
+ * Code panels (`ui-code`, styles/system/code.css) as the site renders them: Shiki lines are `ui-code-line` parts, the
+ * copy action sits in the bar or, without one, in the corner, and tab panels all show on paper and without scripts.
+ */
+@layer components {
+  /* The file's name keeps its width; a long result wraps in the room left beside the copy button. */
+  .ui-code-bar > .ui-code-file { flex: 1 0 auto; }
+  .ui-code-bar > .ui-copy { flex: 0 1 auto; min-width: 0; margin-left: auto; }
+  /* Without a bar the copy takes the panel's corner (`--code-corner`, code.css). A long line scrolls under it: the panel's own face fades in behind the button and runs to the edge, so code never runs through it. */
+  .ui-code > .ui-copy { position: absolute; z-index: 1; top: var(--code-corner); right: var(--code-corner); padding-left: var(--ui-space-sm); border-radius: var(--ui-radius-md); background: linear-gradient(90deg, transparent, var(--ui-surface-code) var(--ui-space-sm));
+    /* The face runs on to the panel's contour (1px short of the edge), so a scrolled line never shows again past the button. */
+    box-shadow: calc(var(--code-corner) - 1px) 0 0 var(--ui-surface-code); }
+  .ui-code:has(> .ui-copy) .ui-code-line { padding-right: 3rem; }
+  /* A shell command is read whole: it wraps under a hanging indent instead of hiding its flags behind the copy button. */
+  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre, .ui-code[data-lang="sh"] > pre, .ui-code[data-lang="shell"] > pre { white-space: pre-wrap; overflow-wrap: anywhere; }
+  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre .ui-code-line, .ui-code:is([data-lang="sh"], [data-lang="shell"]) > pre .ui-code-line { padding-left: calc(var(--ui-space-md) + var(--code-diff-gutter, 0px) + 2ch); text-indent: -2ch; }
+  /* Flags wrap whole: a token never breaks at its own hyphen, so `--yes` cannot split into `-` and `-yes`. */
+  :is(.ui-code, [role="tabpanel"])[data-lang="bash"] > pre .ui-code-line > span, .ui-code:is([data-lang="sh"], [data-lang="shell"]) > pre .ui-code-line > span { display: inline-block; text-indent: 0; }
+  /* Plain text, such as a prompt for an agent, is prose set in mono: it wraps at the panel like prose. */
+  :is(.ui-code, [role="tabpanel"])[data-lang="text"] > pre { white-space: pre-wrap; overflow-wrap: break-word; }
+
+  /* A Generated CSS disclosure right after its source closes the same panel: one frame, the output under a hairline,
+     as in a demo tray. Alone (after a table or a paragraph) it stays a quiet disclosure. */
+  .ui-prose > .ui-code:has(+ .ui-disclosure[data-generated]) { margin-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: inset 1px 0 0 var(--ui-line-contour), inset -1px 0 0 var(--ui-line-contour), inset 0 1px 0 var(--ui-line-contour); }
+  .ui-prose > .ui-code + .ui-disclosure[data-generated] {
+    max-width: none; margin-top: 0; margin-inline: calc(var(--bleed) * -1); padding-inline: var(--ui-space-md);
+    border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl); background: var(--ui-surface-code);
+    box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip);
+  }
+  .ui-prose > .ui-code + .ui-disclosure[data-generated] > summary { margin-inline: calc(var(--ui-space-md) * -1); padding-inline: var(--ui-space-md); box-shadow: inset 0 1px 0 var(--ui-line-hair); }
+  .ui-prose > .ui-code + .ui-disclosure[data-generated] > .ui-code { margin-inline: calc(var(--ui-space-md) * -1); border-radius: 0 0 var(--ui-radius-xl) var(--ui-radius-xl); background: transparent; box-shadow: inset 0 1px 0 var(--ui-line-hair); }
+
+  /* @WARN and @ERROR marks: a wavy underline in the status tone instead of a wash. */
+  .ui-code-line mark[data-tone] { padding: 0; background: none; box-shadow: none; text-decoration: underline wavy 1px; text-underline-offset: 3px; }
+  .ui-code-line mark[data-tone="warning"] { text-decoration-color: var(--ui-status-warning); }
+  .ui-code-line mark[data-tone="danger"] { text-decoration-color: var(--ui-status-danger); }
+  /* [!code focus] blurs the other lines until the pointer reaches the code. */
+  .ui-code pre.has-focused .ui-code-line { transition: filter var(--ui-duration-base) var(--ui-ease); }
+  .ui-code pre.has-focused:not(:hover, :focus-visible) .ui-code-line:not(.focus) { filter: blur(3px); }
+  .ui-code ::selection { background: color-mix(in oklab, var(--ui-code-function) 22%, transparent); }
+  @media print {
+    .ui-code { break-inside: avoid; }
+    /* Paper cannot scroll: keep complete commands and long source lines readable. */
+    .ui-code pre { overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
+    .ui-code pre.has-focused .ui-code-line { filter: none; }
+  }
+  @media (prefers-reduced-motion: reduce) { .ui-code pre.has-focused .ui-code-line { transition: none; } }
+  @media (forced-colors: active) { .ui-code { border: 1px solid CanvasText; } }
+
+}

package/src/styles/system/code-tabs.css

@@ -0,0 +1,40 @@
+/* code-tabs: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  .ui-tabs::-webkit-scrollbar { display: none; }
+  .ui-tabs > [role="tab"] {
+    appearance: none; display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 2rem; padding: 0 .625rem; border: 0; border-radius: var(--ui-radius-md);
+    background: transparent; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); cursor: pointer; transition: color var(--ui-duration-quick), background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
+  }
+  .ui-tabs > [role="tab"] svg { width: 14px; height: 14px; }
+  .ui-tabs > [role="tab"]:hover { color: var(--ui-text-strong); }
+  .ui-tabs > [role="tab"][aria-selected="true"] { background: var(--ui-surface-chip); color: var(--ui-text-strong); box-shadow: inset 0 0 0 1px var(--ui-line-hair); }
+  .ui-tabs > [role="tab"]:focus-visible { @apply --ui-focus-ring; outline-offset: -2px; }
+}
+
+
+/*
+ * Code panels (`ui-code`, styles/system/code.css) as the site renders them: Shiki lines are `ui-code-line` parts, the
+ * copy action sits in the bar or, without one, in the corner, and tab panels all show on paper and without scripts.
+ */
+@layer components {
+  /* The file's name keeps its width; a long result wraps in the room left beside the copy button. */
+  /* Without a bar the copy takes the panel's corner (`--code-corner`, code.css). A long line scrolls under it: the panel's own face fades in behind the button and runs to the edge, so code never runs through it. */
+  /* A shell command is read whole: it wraps under a hanging indent instead of hiding its flags behind the copy button. */
+  /* Flags wrap whole: a token never breaks at its own hyphen, so `--yes` cannot split into `-` and `-yes`. */
+  /* Plain text, such as a prompt for an agent, is prose set in mono: it wraps at the panel like prose. */
+
+  /* A Generated CSS disclosure right after its source closes the same panel: one frame, the output under a hairline,
+     as in a demo tray. Alone (after a table or a paragraph) it stays a quiet disclosure. */
+
+  /* @WARN and @ERROR marks: a wavy underline in the status tone instead of a wash. */
+  /* [!code focus] blurs the other lines until the pointer reaches the code. */
+
+  [data-code-tabs] > [role="tabpanel"] > .ui-code-file { display: none; }
+  @media (scripting: none), print {
+    [data-code-tabs] > .ui-code-bar { display: none; }
+    [data-code-tabs] > [role="tabpanel"][hidden] { display: block; }
+    [data-code-tabs] > [role="tabpanel"] > .ui-code-file { display: flex; padding: var(--ui-space-sm) var(--ui-space-md) 0; }
+  }
+
+}

package/src/styles/system/code.css

@@ -1,85 +1,8 @@
-/* Code: a quiet panel that owns its frame. Inside a tray it shares the tray's 10px inner radius and 4px inset. */
-@layer components {
-  .ui-code { position: relative; min-width: 0; overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-surface-code); color: var(--ui-code-text); box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip); }
-  /* One corner for every panel: the copy action is centred on the first line of text (a bar's row or the code's first line)
-     and set in from the end by the same distance. A file name starts where the code's lines start; a tab chip, as tall as
-     the copy button, takes the corner's distance from the start and the top. */
-  .ui-code, .ui-prompt { --code-corner: calc(var(--ui-space-md) + var(--ui-text-code) * var(--ui-leading-code) / 2 - 1rem); }
-  .ui-code-bar { display: flex; align-items: center; gap: var(--ui-space-xs); min-height: calc(var(--code-corner) + 2rem); padding: var(--code-corner) var(--code-corner) 0 var(--ui-space-md); }
-  .ui-code-bar > .ui-tabs { flex: 1; min-width: 0; margin-left: calc(var(--code-corner) - var(--ui-space-md)); }
-  .ui-code-file { display: inline-flex; align-items: center; gap: var(--ui-space-xs); flex: 1; min-width: 0; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); }
-  .ui-code-file svg { flex: none; width: 14px; height: 14px; }
-  /* Without a bar the code sits in equal space above and below, the same 16px that sets its lines in from the edge. */
-  .ui-code pre { margin: 0; padding: var(--ui-space-md) 0; overflow-x: auto; font: var(--ui-weight-regular) var(--ui-text-code)/var(--ui-leading-code) var(--font-family-mono); tab-size: 2; scrollbar-width: thin; }
-  .ui-code pre:focus-visible { @apply --ui-focus-ring; outline-offset: -4px; border-radius: var(--ui-radius-md); }
-  /* Under a bar the code starts a short step down, so the file name reads as its caption. */
-  .ui-code:has(> .ui-code-bar) pre { padding-top: var(--ui-space-2xs); }
-  .ui-code-line { display: block; padding: 0 var(--ui-space-lg) 0 var(--ui-space-md); }
-  /* A blank source line keeps one line of height, even when the highlighter leaves an empty token in it. */
-  .ui-code-line { min-height: 1lh; }
-  .ui-code[data-numbers] { counter-reset: line; }
-  .ui-code[data-numbers] .ui-code-line::before { counter-increment: line; content: counter(line); display: inline-block; width: 1.75rem; margin-right: var(--ui-space-sm); color: var(--ui-text-disabled); text-align: right; user-select: none; }
-  .ui-code-line[data-mark="active"] { background: var(--ui-code-active); box-shadow: inset 2px 0 0 var(--ui-line-mark); }
-  .ui-code-line[data-mark="added"] { background: var(--ui-code-added); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ui-status-success) 70%, transparent); }
-  .ui-code-line[data-mark="removed"] { background: var(--ui-code-removed); box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ui-status-danger) 70%, transparent); }
-  .ui-code-line[data-mark="added"]::after, .ui-code-line[data-mark="removed"]::after { float: right; color: var(--ui-text-disabled); }
-  .ui-code-line[data-mark="added"]::after { content: "+"; }
-  .ui-code-line[data-mark="removed"]::after { content: "−"; }
-  .ui-code-line mark { padding: 1px 2px; border-radius: 3px; background: light-dark(oklch(22% .002 265 / .08), oklch(100% 0 none / .1)); color: inherit; box-shadow: inset 0 -1px 0 var(--ui-line-mark); }
-  .ui-code .t { color: var(--ui-code-function); } .ui-code .a { color: var(--ui-code-property); } .ui-code .s { color: var(--ui-code-string); }
-  .ui-code .p { color: var(--ui-code-punctuation); } .ui-code .k { color: var(--ui-code-keyword); } .ui-code .c { color: var(--ui-code-comment); font-style: italic; } .ui-code .n { color: var(--ui-code-number); }
-  .ui-code > .ui-disclosure { border-top: 1px solid var(--ui-line-hair); }
-  .ui-code > .ui-disclosure > summary { padding-inline: var(--ui-space-md); }
-  .ui-code > .ui-disclosure > pre { padding-top: 0; }
-  /* In a tray, source code (a file tree, a disclosed result) is a lighter field like the stage beside it: tone, not another ring. */
-  .ui-tray > :is(.ui-code, .ui-tree), .ui-tray > .ui-disclosure > .ui-code { box-shadow: none; }
-
-  /* Tabs: a row of quiet chips; the selected one is filled. The row scrolls and so clips any outer shadow, and a raised
-     sheet face is the code panel's own tone: the chip's fill and inset hairline keep it legible in both schemes. */
-  .ui-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
-  .ui-tabs::-webkit-scrollbar { display: none; }
-  .ui-tabs > [role="tab"] {
-    appearance: none; display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 2rem; padding: 0 .625rem; border: 0; border-radius: var(--ui-radius-md);
-    background: transparent; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); cursor: pointer; transition: color var(--ui-duration-quick), background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
-  }
-  .ui-tabs > [role="tab"] svg { width: 14px; height: 14px; }
-  .ui-tabs > [role="tab"]:hover { color: var(--ui-text-strong); }
-  .ui-tabs > [role="tab"][aria-selected="true"] { background: var(--ui-surface-chip); color: var(--ui-text-strong); box-shadow: inset 0 0 0 1px var(--ui-line-hair); }
-  .ui-tabs > [role="tab"]:focus-visible { @apply --ui-focus-ring; outline-offset: -2px; }
-
-  /* Inline code and file references */
-  .ui-inline-code { padding: .125em .375em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: var(--ui-text-strong); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-regular) .84em/1 var(--font-family-mono); overflow-wrap: anywhere; }
-
-  /* Disclosure: native details, one chevron, calm motion */
-  .ui-disclosure { min-width: 0; }
-  .ui-disclosure > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-xs); min-height: 2.75rem; color: var(--ui-text-body); font: var(--ui-weight-medium) .8125rem/1.3 var(--font-family-sans); list-style: none; cursor: pointer; }
-  .ui-disclosure > summary::-webkit-details-marker { display: none; }
-  .ui-disclosure > summary::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; opacity: .6; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate var(--ui-duration-base) var(--ui-ease); }
-  .ui-disclosure[open] > summary::before { rotate: 90deg; }
-  .ui-disclosure > summary:hover { color: var(--ui-text-strong); }
-  .ui-disclosure > summary:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; border-radius: var(--ui-radius-md); }
-  .ui-disclosure > summary .ui-disclosure-meta { margin-left: auto; color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-sans); }
-  .ui-disclosure[data-variant="rule"] { border-block: 1px solid var(--ui-line-hair); }
-  .ui-disclosure[data-variant="rule"] + .ui-disclosure[data-variant="rule"] { border-top: 0; }
-  .ui-disclosure-body { padding-bottom: var(--ui-space-md); }
-  .ui-disclosure > .ui-disclosure-body > :first-child { margin-top: 0; }
-  .ui-disclosure > .ui-disclosure-body > :last-child { margin-bottom: 0; }
-
-  /* Prompt: copyable prose for agents — reads as text, copies as text */
-  .ui-prompt { display: grid; gap: 0; min-width: 0; overflow: hidden; border-radius: var(--ui-radius-xl); background: var(--ui-surface-code); box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip); }
-  .ui-prompt-body { margin: 0; padding: var(--ui-space-xs) var(--ui-space-md) var(--ui-space-md); color: var(--ui-text-strong); font: var(--ui-weight-regular) .9375rem/1.7 var(--font-family-sans); white-space: pre-wrap; }
-  .ui-prompt-body var { padding: 0 .25em; border-radius: var(--ui-radius-xs); background: var(--ui-surface-chip); color: var(--ui-text-body); box-shadow: inset 0 0 0 1px var(--ui-line-hair); font: var(--ui-weight-regular) .8125rem/1 var(--font-family-mono); font-style: normal; }
-
-  /* File tree: names in mono, descriptions in the reading face, guides as hairlines */
-  .ui-tree { margin: 0; overflow-x: auto; overflow-wrap: anywhere; padding: var(--ui-space-sm) 0; border-radius: var(--ui-radius-xl); background: var(--ui-surface-code); box-shadow: inset 0 0 0 1px var(--ui-line-contour), 0 1px 0 var(--ui-lip); }
-  .ui-tree ul { margin: 0; padding: 0; list-style: none; }
-  .ui-tree ul ul { margin-left: 1.375rem; box-shadow: inset 1px 0 0 var(--ui-line-hair); }
-  .ui-tree li > div > * { min-width: 0; }
-  .ui-tree li > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ui-space-sm); padding: .3125rem var(--ui-space-md); }
-  .ui-tree ul ul li > div { padding-left: var(--ui-space-sm); }
-  .ui-tree svg { flex: none; align-self: center; width: 14px; height: 14px; color: var(--ui-text-muted); }
-  .ui-tree b { color: var(--ui-text-strong); font: var(--ui-weight-regular) var(--ui-text-code)/1.5 var(--font-family-mono); }
-  .ui-tree span { color: var(--ui-text-muted); font-size: .78125rem; }
-  .ui-tree [data-mark="added"] > div { background: var(--ui-code-added); }
-  .ui-tree [data-mark="added"] > div > b::after { content: " +"; color: var(--ui-status-success); }
-}
+/* Explicit full code collection. Components import their own leaf stylesheet. */
+@import './code-panel.css';
+@import './prompt.css';
+@import './tray-code.css';
+@import './code-tabs.css';
+@import './inline-code.css';
+@import './disclosure.css';
+@import './tree.css';

package/src/styles/system/compare.css

@@ -0,0 +1,7 @@
+/* compare: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--ui-inset); }
+  .ui-compare > figure { display: grid; grid-template-rows: auto 1fr; gap: 0; min-width: 0; margin: 0; }
+  .ui-compare > figure > figcaption { padding: var(--ui-space-xs) var(--ui-space-sm); color: var(--ui-text-muted); @apply --ui-label-type; }
+  .ui-compare .ui-stage { min-height: 11rem; padding: var(--ui-space-xl) var(--ui-space-lg); }
+}

package/src/styles/system/controls.css

@@ -1,110 +1,11 @@
+/* Explicit full controls collection. Components import their own leaf stylesheet. */
 @import './buttons.css';
-
-@layer components {
-  /* Segmented control: a sunken track, a raised thumb */
-  .ui-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 3px; border-radius: calc(var(--ui-radius-md) + 3px); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); }
-  /* Links to sibling pages use the same control; the page being read carries aria-current="page". */
-  .ui-segmented > :is(button, a) {
-    appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 1.875rem; min-width: 3.5rem; padding: 0 .75rem; border: 0; border-radius: var(--ui-radius-md); background: transparent;
-    color: var(--ui-text-muted); font: var(--ui-weight-medium) .78125rem/1 var(--font-family-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--ui-duration-quick), background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
-  }
-  .ui-segmented > :is(button, a):hover:not(:disabled) { color: var(--ui-text-strong); }
-  .ui-segmented > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="page"]) { color: var(--ui-text-strong); @apply --ui-sheet-face; box-shadow: var(--ui-elevation-rise-1); }
-  .ui-segmented > :is(button, a):focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
-  .ui-segmented > button:disabled { color: var(--ui-text-disabled); cursor: not-allowed; }
-  /* Underline: page-level tabs between sibling documents — words on one hairline, the current one underlined in ink. */
-  .ui-segmented[data-variant="underline"] { display: flex; gap: 0 var(--ui-space-lg); padding: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 var(--ui-line-divider); }
-  .ui-segmented[data-variant="underline"] > :is(button, a) { min-width: 0; min-height: 2.75rem; padding: 0; border-radius: 0; color: var(--ui-text-muted); font: var(--ui-weight-regular) var(--ui-text-small)/1.4 var(--font-family-sans); }
-  .ui-segmented[data-variant="underline"] > :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="page"]) { color: var(--ui-text-strong); background: none; box-shadow: inset 0 -2px 0 var(--ui-text-strong); }
-  .ui-segmented[data-variant="underline"] > :is(button, a):focus-visible { outline-offset: -2px; border-radius: var(--ui-radius-xs); }
-  .ui-segmented[data-size="lg"] { padding: 4px; border-radius: calc(var(--ui-radius-md) + 4px); }
-  .ui-segmented[data-size="lg"] > :is(button, a) { min-height: 2.25rem; border-radius: var(--ui-radius-md); font-size: .8125rem; }
-
-  /* Fields: a well that floats back to the sheet on focus */
-  .ui-field { display: grid; gap: var(--ui-space-xs); color: var(--ui-text-strong); font-size: var(--ui-text-small); font-weight: var(--ui-weight-medium); }
-  .ui-field-hint { color: var(--ui-text-muted); font-size: .75rem; font-weight: var(--ui-weight-regular); }
-  .ui-input, .ui-select {
-    width: 100%; min-height: 2.5rem; padding: .5625rem .75rem; border: 0; border-radius: var(--ui-radius-md);
-    background: var(--ui-surface-well); color: var(--ui-text-strong); box-shadow: var(--ui-elevation-sink);
-    font: var(--ui-weight-regular) var(--ui-text-small)/1.45 var(--font-family-sans); resize: vertical;
-    transition: box-shadow var(--ui-duration-quick), background-color var(--ui-duration-quick);
-  }
-  .ui-input::placeholder { color: var(--ui-text-muted); }
-  .ui-input:hover:not(:focus, :disabled), .ui-select:hover:not(:focus, :disabled) { background: var(--ui-surface-well-hover); }
-  .ui-input:focus, .ui-select:focus-visible { outline: none; background: var(--ui-surface-sheet); box-shadow: inset 0 0 0 1px var(--ui-line-mark), 0 0 0 3px light-dark(oklch(22% .002 265 / .1), oklch(100% 0 none / .12)); }
-  .ui-input:disabled, .ui-select:disabled { color: var(--ui-text-disabled); cursor: not-allowed; }
-  .ui-select { appearance: none; padding-right: 2rem; cursor: pointer;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
-    background-repeat: no-repeat; background-position: right .625rem center; background-size: 14px; }
-  .ui-select[data-variant="raised"] { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--ui-surface-sheet), var(--ui-surface-sheet-lo)); background-position: right .625rem center, 0 0; background-size: 14px, auto; box-shadow: var(--ui-elevation-rise-1); font-weight: var(--ui-weight-medium); }
-  /* Overlay: an invisible native select over a positioned label that shows the value (version, language, appearance) */
-  .ui-select[data-variant="overlay"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
-  :has(> .ui-select[data-variant="overlay"]:focus-visible) { @apply --ui-focus-ring; outline-offset: 2px; }
-
-  /* Range: hairline track, filled to value, raised thumb */
-  .ui-range { --value: 50%; appearance: none; width: 100%; min-width: 6rem; height: 1.75rem; margin: 0; background: transparent; cursor: ew-resize; }
-  .ui-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--ui-radius-pill); background: linear-gradient(90deg, var(--ui-text-strong) var(--value), var(--ui-line-divider) var(--value)); }
-  .ui-range::-moz-range-track { height: 4px; border-radius: var(--ui-radius-pill); background: var(--ui-line-divider); }
-  .ui-range::-moz-range-progress { height: 4px; border-radius: var(--ui-radius-pill); background: var(--ui-text-strong); }
-  .ui-range::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)); box-shadow: 0 0 0 1px var(--ui-line-strong), 0 1px 1px var(--ui-shade-1), 0 2px 4px -1px var(--ui-shade-2); }
-  .ui-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)); box-shadow: 0 0 0 1px var(--ui-line-strong), 0 1px 1px var(--ui-shade-1), 0 2px 4px -1px var(--ui-shade-2); }
-  .ui-range:focus-visible { outline: none; }
-  .ui-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--ui-line-strong), 0 0 0 2px var(--ui-surface-stage), 0 0 0 4px var(--ui-focus); }
-  .ui-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--ui-line-strong), 0 0 0 2px var(--ui-surface-stage), 0 0 0 4px var(--ui-focus); }
-
-  /* Check and switch */
-  .ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-xs); color: var(--ui-text-strong); font-size: var(--ui-text-small); cursor: pointer; }
-  .ui-check > input:not(.ui-switch) { appearance: none; display: grid; place-items: center; flex: none; width: 1.125rem; height: 1.125rem; margin: 0; border-radius: var(--ui-radius-sm); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); cursor: pointer; transition: background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick); }
-  /* An empty box is a small target on a stage of nearly its own tone: a firmer ring keeps it visible in both schemes. */
-  .ui-check > input:not(.ui-switch):not(:checked) { box-shadow: var(--ui-elevation-sink), inset 0 0 0 1px var(--ui-line-divider); }
-  .ui-check > input:not(.ui-switch)::after { content: ""; width: 10px; height: 10px; opacity: 0; background: var(--ui-text-inverse); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
-  .ui-check > input:not(.ui-switch):checked { background: var(--ui-surface-ink); box-shadow: inset 0 1px 0 light-dark(oklch(100% 0 none / .16), oklch(100% 0 none)), 0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .5)); }
-  .ui-check > input:not(.ui-switch):checked::after { opacity: 1; }
-  .ui-check > input[type="radio"] { border-radius: 50%; }
-  .ui-check > input[type="radio"]::after { width: 6px; height: 6px; border-radius: 50%; mask: none; }
-  .ui-check > input:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
-  .ui-switch { position: relative; appearance: none; flex: none; width: 2.25rem; height: 1.375rem; margin: 0; border-radius: var(--ui-radius-pill); background: var(--ui-surface-well); box-shadow: var(--ui-elevation-sink); cursor: pointer; transition: background-color var(--ui-duration-base) var(--ui-ease); }
-  .ui-switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)); box-shadow: 0 0 0 1px var(--ui-line-contour), 0 1px 1px var(--ui-shade-1), 0 2px 3px -1px var(--ui-shade-2); transition: translate var(--ui-duration-base) var(--ui-ease); }
-  .ui-switch:checked { background: var(--ui-surface-ink); box-shadow: inset 0 1px 2px oklch(0% 0 none / .3); }
-  .ui-switch:checked::before { translate: .875rem 0; background: light-dark(linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)), linear-gradient(180deg, oklch(26% .0024 265), oklch(20% .002 265))); }
-  .ui-switch:focus-visible { @apply --ui-focus-ring; outline-offset: 2px; }
-
-  /* Copy: an honest result next to the action */
-  .ui-copy { display: inline-flex; align-items: center; gap: var(--ui-space-xs); }
-  .ui-copy-status { color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); }
-  .ui-copy-status[data-result="success"] { color: var(--ui-status-success); }
-  .ui-copy-status[data-result="error"] { color: var(--ui-status-danger); }
-
-  /* Keyboard key */
-  .ui-kbd { display: inline-grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .3125rem; border-radius: var(--ui-radius-xs); background: transparent; color: var(--ui-text-muted); box-shadow: inset 0 0 0 1px var(--ui-line-contour); font: var(--ui-weight-regular) .6875rem/1 var(--font-family-mono); }
-
-  @media (pointer: coarse) {
-    .ui-button, .ui-input, .ui-select { min-height: 2.75rem; }
-    .ui-segmented > button { min-height: 2.5rem; }
-  }
-
-  /* Tooltip: a small ink chip; names icon-only controls */
-  .ui-tooltip { position: absolute; z-index: 60; padding: .3125rem .5rem; border-radius: var(--ui-radius-sm); background: var(--ui-surface-ink); color: var(--ui-text-inverse); box-shadow: 0 1px 2px var(--ui-shade-1), 0 4px 10px -4px var(--ui-shade-2); font: var(--ui-weight-regular) .71875rem/1.2 var(--font-family-sans); white-space: nowrap; pointer-events: none; }
-  .ui-tooltip[data-side="bottom"]::before { content: ""; position: absolute; bottom: 100%; left: 50%; translate: -50% 0; border: 4px solid transparent; border-bottom-color: var(--ui-surface-ink); }
-  .ui-tooltip > .ui-kbd { height: 1.125rem; min-width: 1.125rem; margin-left: 6px; background: color-mix(in oklab, var(--ui-text-inverse) 14%, transparent); color: var(--ui-text-inverse); box-shadow: none; }
-
-  /* Menu: a floating sheet of choices (version, language, appearance) */
-  .ui-menu { display: grid; gap: 1px; min-width: 12rem; margin: 0; padding: var(--ui-inset); border-radius: var(--ui-radius-lg); background: var(--ui-surface-float); box-shadow: var(--ui-elevation-rise-3); list-style: none; }
-  .ui-menu-label { padding: .375rem .625rem .25rem; color: var(--ui-text-muted); @apply --ui-label-type; }
-  .ui-menu-item { appearance: none; display: flex; align-items: center; gap: var(--ui-space-xs); width: 100%; min-height: 2rem; padding: 0 .625rem; border: 0; border-radius: var(--ui-radius-sm); background: transparent; color: var(--ui-text-body); font: var(--ui-weight-regular) var(--ui-text-small)/1 var(--font-family-sans); text-align: start; text-decoration: none; cursor: pointer; }
-  .ui-menu-item > svg { flex: none; width: 15px; height: 15px; color: var(--ui-text-muted); }
-  .ui-menu-item > small { margin-left: auto; color: var(--ui-text-muted); font: var(--ui-weight-regular) .6875rem/1 var(--font-family-mono); }
-  .ui-menu-item:is(:hover, [data-highlighted]) { color: var(--ui-text-strong); background: light-dark(oklch(22% .002 265 / .05), oklch(100% 0 none / .06)); }
-  .ui-menu-item[aria-checked="true"] { color: var(--ui-text-strong); font-weight: var(--ui-weight-medium); }
-  .ui-menu-item[aria-checked="true"]::after { content: ""; width: 14px; height: 14px; margin-left: auto; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
-  .ui-menu-item:focus-visible { @apply --ui-focus-ring; outline-offset: -2px; }
-  .ui-menu-separator { height: 1px; margin: var(--ui-space-3xs) .375rem; background: var(--ui-line-hair); }
-
-  /* Result feedback on an icon action: the glyph swaps, the label says what happened */
-  .ui-button[data-result] > svg:first-of-type { display: none; }
-  .ui-button:not([data-result]) > .ui-result-icon { display: none; }
-  .ui-button[data-result="success"] { color: var(--ui-status-success); }
-  .ui-button[data-result="error"] { color: var(--ui-status-danger); }
-  .ui-button[data-result="error"] > svg:first-of-type { display: block; }
-  .ui-button[data-result="error"] > .ui-result-icon { display: none; }
-}
+@import './segmented.css';
+@import './fields.css';
+@import './range.css';
+@import './checks.css';
+@import './copy.css';
+@import './kbd.css';
+@import './button-feedback.css';
+@import './tooltip.css';
+@import './menu.css';

package/src/styles/system/copy.css

@@ -0,0 +1,32 @@
+/* copy: owned component styles; shared definitions come from the foundation. */
+@layer components {
+  .ui-copy { display: inline-flex; align-items: center; gap: var(--ui-space-xs); }
+  .ui-copy-status { color: var(--ui-text-muted); font: var(--ui-weight-regular) .75rem/1 var(--font-family-mono); }
+  .ui-copy-status[data-result="success"] { color: var(--ui-status-success); }
+  .ui-copy-status[data-result="error"] { color: var(--ui-status-danger); }
+}
+
+
+/*
+ * Code panels (`ui-code`, styles/system/code.css) as the site renders them: Shiki lines are `ui-code-line` parts, the
+ * copy action sits in the bar or, without one, in the corner, and tab panels all show on paper and without scripts.
+ */
+@layer components {
+  /* The file's name keeps its width; a long result wraps in the room left beside the copy button. */
+  /* Without a bar the copy takes the panel's corner (`--code-corner`, code.css). A long line scrolls under it: the panel's own face fades in behind the button and runs to the edge, so code never runs through it. */
+  /* A shell command is read whole: it wraps under a hanging indent instead of hiding its flags behind the copy button. */
+  /* Flags wrap whole: a token never breaks at its own hyphen, so `--yes` cannot split into `-` and `-yes`. */
+  /* Plain text, such as a prompt for an agent, is prose set in mono: it wraps at the panel like prose. */
+  .ui-copy-status:empty { display: none; }
+
+  /* A Generated CSS disclosure right after its source closes the same panel: one frame, the output under a hairline,
+     as in a demo tray. Alone (after a table or a paragraph) it stays a quiet disclosure. */
+  .ui-copy > .ui-copy-status { min-width: 0; max-width: 16rem; text-align: end; line-height: 1.3; }
+
+  /* @WARN and @ERROR marks: a wavy underline in the status tone instead of a wash. */
+  /* [!code focus] blurs the other lines until the pointer reaches the code. */
+  @media (scripting: none), print {
+    .ui-copy { display: none; }
+  }
+
+}