@hjmds/react 1.7.0 → 1.9.0

package/dist/styles.css

@@ -1,3 +1,4 @@
+/* Broad neutral and pale-brand surfaces use the theme canvas. Selection stays visible through borders; primary actions and compact state marks retain their semantic fills. */
 .hjm-root,
 .hjm-root *,
 .hjm-root *::before,
@@ -70,14 +71,14 @@
   overflow-wrap: anywhere;
   border: 1px solid transparent;
   border-radius: var(--hjm-radius-lg);
-  background: var(--hjm-color-surface);
+  background: var(--hjm-color-bg);
 }
 /* A child image would otherwise spill past the rounded corner. An elevated tone
    opts out because clipping cuts off its own shadow. */
 .hjm-surface[data-clips="true"] { overflow: hidden; }
 .hjm-surface[data-tone="raised"] { background: var(--hjm-color-bg); box-shadow: 0 4px 12px rgb(0 0 0 / 12%); }
-.hjm-surface[data-tone="accent"] { background: var(--hjm-color-surface-accent); }
-.hjm-surface[data-tone="sunken"] { background: var(--hjm-color-surface-alt); }
+.hjm-surface[data-tone="accent"] { background: var(--hjm-color-bg); }
+.hjm-surface[data-tone="sunken"] { background: var(--hjm-color-bg); }
 .hjm-surface[data-tone="subtle"] { background: var(--hjm-color-bg); }
 .hjm-surface[data-bordered="true"] { border-color: var(--hjm-color-border); }
 .hjm-surface[data-tone="accent"][data-bordered="true"] { border-color: color-mix(in srgb, var(--hjm-color-primary) 30%, transparent); }
@@ -165,7 +166,7 @@
   max-inline-size: 100%;
   overflow: hidden;
   border-radius: var(--hjm-radius-md);
-  background: var(--hjm-color-surface-alt);
+  background: var(--hjm-color-bg);
   vertical-align: middle;
 }
 .hjm-image__asset,
@@ -179,7 +180,7 @@
   display: grid;
   place-items: center;
   color: var(--hjm-color-text-muted);
-  background: var(--hjm-color-surface-alt);
+  background: var(--hjm-color-bg);
 }
 .hjm-image__fallback-icon { display: inline-grid; place-items: center; }
 
@@ -230,7 +231,7 @@
   line-height: var(--hjm-type-body-large-line-height);
 }
 .hjm-button[data-tone="primary"], .hjm-icon-button[data-tone="primary"] { color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
-.hjm-button[data-tone="secondary"], .hjm-icon-button[data-tone="secondary"] { color: var(--hjm-color-text); background: var(--hjm-color-surface-alt); border-color: var(--hjm-color-border-control); }
+.hjm-button[data-tone="secondary"], .hjm-icon-button[data-tone="secondary"] { color: var(--hjm-color-text); background: var(--hjm-color-bg); border-color: var(--hjm-color-border-control); }
 .hjm-button[data-tone="ghost"], .hjm-icon-button[data-tone="ghost"] { color: var(--hjm-color-text-muted); background: transparent; }
 .hjm-button[data-tone="danger"], .hjm-icon-button[data-tone="danger"] { color: var(--hjm-color-on-danger); background: var(--hjm-color-danger-fill); }
 /* A link-tone control is inline copy; the size axis' padding would push it out
@@ -238,7 +239,7 @@
 .hjm-button[data-tone="link"] { color: var(--hjm-color-content-brand); background: transparent; padding-inline: 0; }
 /* Toggle treatment: aria-pressed already carried the state, so without a paired
    visual every consumer painted the selected background in product styles. */
-.hjm-button[data-selected="true"], .hjm-icon-button[data-selected="true"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-surface-accent); border-color: var(--hjm-color-content-brand); }
+.hjm-button[data-selected="true"], .hjm-icon-button[data-selected="true"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); border-color: var(--hjm-color-content-brand); }
 .hjm-button:active:not(:disabled):not([aria-disabled="true"]), .hjm-icon-button:active:not(:disabled):not([aria-disabled="true"]) { opacity: var(--hjm-button-pressed-opacity); }
 .hjm-button:disabled, .hjm-icon-button:disabled { cursor: not-allowed; opacity: var(--hjm-button-disabled-opacity); }
 /* 라벨은 자르지 않고 두 줄까지 접는다(buttonRecipe.label). 잘린 행동 라벨은 무엇을 하는
@@ -281,11 +282,15 @@
 .hjm-switch:focus-visible .hjm-switch__track,
 .hjm-segmented__item:has(input:focus-visible),
 .hjm-tabs__tab:focus-visible,
-.hjm-list-row:focus-visible {
+.hjm-list-row:focus-visible,
+.hjm-virtual-list:focus-visible,
+.hjm-virtual-list__row:focus-visible {
   outline: var(--hjm-focus-width) solid var(--hjm-color-focus);
   outline-offset: var(--hjm-focus-offset);
 }
 
+/* Input interiors use the theme canvas (white in light mode), not tinted
+   surfaces. Focus and selection still use blue borders and compact indicators. */
 .hjm-field { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; }
 .hjm-field__label { color: var(--hjm-color-text-body); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-field__control {
@@ -293,9 +298,9 @@
   align-items: center;
   min-block-size: var(--hjm-control-field-height);
   padding-inline: var(--hjm-space-md);
-  border: var(--hjm-field-border-width) solid var(--hjm-color-text-muted);
+  border: var(--hjm-field-border-width) solid var(--hjm-color-border-control);
   border-radius: var(--hjm-radius-md);
-  background: var(--hjm-color-surface);
+  background: var(--hjm-color-bg);
 }
 .hjm-field[data-variant="inset"] .hjm-field__control { background: var(--hjm-color-bg); }
 .hjm-field[data-shape="large"] .hjm-field__control { border-radius: var(--hjm-radius-lg); }
@@ -338,7 +343,7 @@
 .hjm-field__affix { display: inline-flex; align-items: center; color: var(--hjm-color-text-muted); }
 .hjm-field__description, .hjm-choice__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
 .hjm-field__error { color: var(--hjm-color-danger); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); }
-.hjm-search-field__clear { inline-size: 32px; block-size: 32px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; color: inherit; background: transparent; font: inherit; cursor: pointer; }
+.hjm-search-field__clear { inline-size: var(--hjm-control-min-touch-target); block-size: var(--hjm-control-min-touch-target); display: inline-grid; place-items: center; border: 0; border-radius: 50%; color: inherit; background: transparent; font: inherit; cursor: pointer; }
 .hjm-search-field__spinner { inline-size: 32px; block-size: 32px; display: inline-grid; place-items: center; color: var(--hjm-color-content-brand); }
 .hjm-search-field__spinner:empty::before { content: ""; inline-size: 1em; block-size: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: hjm-spin 800ms linear infinite; }
 .hjm-password-field--large .hjm-field__control { min-block-size: var(--hjm-control-button-large); padding-inline: var(--hjm-space-lg); }
@@ -394,6 +399,7 @@
     (var(--hjm-otp-slot-size) * var(--hjm-otp-length)) +
     (var(--hjm-otp-gap) * (var(--hjm-otp-length) - 1))
   );
+  /* Numeric codes keep their entry order in RTL (docs/otp-field.md); mirroring digits would reorder the code. */
   direction: ltr;
 }
 .hjm-otp-field__control[data-size="large"] {
@@ -427,10 +433,10 @@
   display: grid;
   place-items: center;
   padding-block: var(--hjm-space-xxs);
-  border: 1px solid var(--hjm-color-text-muted);
+  border: 1px solid var(--hjm-color-border-control);
   border-radius: var(--hjm-radius-md);
   color: var(--hjm-color-text);
-  background: var(--hjm-color-surface);
+  background: var(--hjm-color-bg);
   font-size: var(--hjm-type-title-size);
   line-height: var(--hjm-type-title-line-height);
   font-weight: var(--hjm-font-weight-semibold);
@@ -497,7 +503,7 @@
   text-decoration: none;
   overflow-wrap: anywhere;
 }
-.hjm-bottom-navigation__item:hover { background: var(--hjm-color-surface-alt); }
+.hjm-bottom-navigation__item:hover { background: var(--hjm-color-bg); }
 .hjm-bottom-navigation__item:active { background: var(--hjm-bottom-navigation-pressed-background); }
 .hjm-bottom-navigation__item:focus-visible {
   outline: 2px solid var(--hjm-color-content-brand);
@@ -581,8 +587,8 @@
 .hjm-number-field__stepper[data-direction="increment"] {
   border-inline-start: 1px solid var(--hjm-color-border);
 }
-.hjm-number-field__stepper:hover:not(:disabled) { background: var(--hjm-color-surface-alt); }
-.hjm-number-field__stepper:active:not(:disabled) { background: var(--hjm-color-surface-accent); }
+.hjm-number-field__stepper:hover:not(:disabled) { background: var(--hjm-color-bg); }
+.hjm-number-field__stepper:active:not(:disabled) { background: var(--hjm-color-bg); }
 .hjm-number-field__stepper:disabled { cursor: not-allowed; opacity: 0.5; }
 .hjm-number-field__stepper:focus-visible {
   outline: 2px solid var(--hjm-color-content-brand);
@@ -698,7 +704,8 @@
 }
 .hjm-slider__input:disabled { cursor: not-allowed; }
 
-.hjm-choice { display: inline-flex; align-items: center; gap: var(--hjm-space-sm); min-block-size: 56px; padding: var(--hjm-space-sm) var(--hjm-space-md); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); cursor: pointer; }
+/* Long choice labels wrap within the parent. */
+.hjm-choice { display: inline-flex; align-items: center; gap: var(--hjm-space-sm); min-block-size: 56px; max-inline-size: 100%; padding: var(--hjm-space-sm) var(--hjm-space-md); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); cursor: pointer; }
 .hjm-choice[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-choice[data-readonly="true"] { cursor: default; }
 .hjm-choice[data-presentation="plain"] { padding: 0; border-color: transparent; background: transparent; }
@@ -706,11 +713,11 @@
 .hjm-choice[data-presentation="card"][data-state="checked"],
 .hjm-choice[data-presentation="card"][data-state="mixed"],
 .hjm-choice[data-presentation="grouped"][data-state="checked"],
-.hjm-choice[data-presentation="grouped"][data-state="mixed"] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-surface-accent); }
+.hjm-choice[data-presentation="grouped"][data-state="mixed"] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
 .hjm-choice[data-size="small"] { min-block-size: 44px; gap: var(--hjm-space-xs); padding: var(--hjm-space-xs) var(--hjm-space-sm); }
 .hjm-choice[data-size="small"][data-presentation="plain"] { padding: 0; }
 .hjm-choice__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
-.hjm-choice__indicator { flex: 0 0 24px; display: grid; place-items: center; inline-size: 24px; block-size: 24px; margin-block-start: 2px; border: 2px solid var(--hjm-color-text-muted); background: var(--hjm-color-surface); }
+.hjm-choice__indicator { flex: 0 0 24px; display: grid; place-items: center; inline-size: 24px; block-size: 24px; margin-block-start: 2px; border: 2px solid var(--hjm-color-text-muted); background: var(--hjm-color-bg); }
 .hjm-choice[data-size="small"] .hjm-choice__indicator { flex-basis: 20px; inline-size: 20px; block-size: 20px; }
 .hjm-choice__leading { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--hjm-color-text-muted); }
 .hjm-choice[data-kind="checkbox"] .hjm-choice__indicator { border-radius: var(--hjm-radius-sm); }
@@ -727,7 +734,7 @@
 .hjm-radio-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-radio-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
 .hjm-radio-group[data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-xxs); }
-.hjm-radio-group[data-presentation="grouped"] .hjm-radio-group__items { gap: 0; overflow: hidden; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-surface); }
+.hjm-radio-group[data-presentation="grouped"] .hjm-radio-group__items { gap: 0; overflow: hidden; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
 .hjm-radio-group[data-orientation="horizontal"] .hjm-radio-group__items { flex-direction: row; flex-wrap: wrap; gap: var(--hjm-space-md); }
 .hjm-radio-group[data-orientation="horizontal"][data-presentation="plain"] .hjm-radio-group__items { gap: var(--hjm-space-sm); }
 .hjm-radio-group[data-orientation="horizontal"][data-presentation="grouped"] .hjm-radio-group__items { gap: 0; }
@@ -735,17 +742,14 @@
 .hjm-checkbox-group legend { margin-block-end: var(--hjm-space-xs); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-checkbox-group__items { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
 .hjm-checkbox-group[data-presentation="plain"] .hjm-checkbox-group__items { gap: var(--hjm-space-xxs); }
-.hjm-checkbox-group[data-presentation="grouped"] .hjm-checkbox-group__items { gap: 0; overflow: hidden; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-surface); }
+.hjm-checkbox-group[data-presentation="grouped"] .hjm-checkbox-group__items { gap: 0; overflow: hidden; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
 .hjm-checkbox-group[data-orientation="horizontal"] .hjm-checkbox-group__items { flex-direction: row; flex-wrap: wrap; gap: var(--hjm-space-md); }
 .hjm-checkbox-group[data-orientation="horizontal"][data-presentation="plain"] .hjm-checkbox-group__items { gap: var(--hjm-space-sm); }
 .hjm-checkbox-group[data-orientation="horizontal"][data-presentation="grouped"] .hjm-checkbox-group__items { gap: 0; }
 
 .hjm-switch { display: inline-flex; align-items: center; gap: var(--hjm-space-sm); min-block-size: var(--hjm-control-min-touch-target); padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
-/* A disabled switch still has to report what it is set to, so `switchRecipe.colors`
-   swaps hue instead of fading the row — a flat `opacity` made on and off nearly
-   identical, and it would also double-fade the calibrated 38% on-track. The fade is
-   kept on the label alone, so the row still reads disabled at a glance while the
-   control keeps the contrast its colours were chosen for. */
+/* Disabled switch colors preserve on/off contrast; row opacity would erase state
+   and double-fade the calibrated38% track. Only the label fades (switchRecipe.colors). */
 .hjm-switch:disabled { cursor: not-allowed; }
 .hjm-switch:disabled .hjm-switch__label { opacity: 0.5; }
 .hjm-switch:disabled .hjm-switch__track { background: var(--hjm-color-border); box-shadow: inset 0 0 0 1px var(--hjm-color-border); }
@@ -775,33 +779,17 @@
 [dir="rtl"] .hjm-switch[data-state="checked"] .hjm-switch__thumb { transform: translateX(calc(-1 * var(--hjm-switch-track-offset))); }
 
 .hjm-segmented { min-inline-size: 0; padding: 0; border: 0; }
-.hjm-segmented__items { display: flex; min-inline-size: 0; gap: 2px; padding: 2px; border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface-alt); overflow-x: auto; }
+.hjm-segmented__items { display: flex; min-inline-size: 0; gap: 2px; padding: 2px; border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); overflow-x: auto; }
 .hjm-segmented__item { position: relative; flex: 1 1 0; min-inline-size: max-content; min-block-size: var(--hjm-control-min-touch-target); display: grid; place-items: center; padding: var(--hjm-space-xs) var(--hjm-space-sm); border-radius: calc(var(--hjm-radius-md) - 2px); color: var(--hjm-color-text-muted); cursor: pointer; }
 .hjm-segmented__item input { position: absolute; opacity: 0; }
-.hjm-segmented__item[data-state="checked"] { color: var(--hjm-color-text); background: var(--hjm-color-surface-accent); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-segmented__item[data-state="checked"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); color: var(--hjm-color-text); background: var(--hjm-color-bg); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-segmented__item[data-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
 
-/* segmentedControlRecipe.adaptive.largeTextLayout = "stacked": equal-width
-   segments stop being comparable once large text wraps a syllable per line, and
-   on a narrow viewport the row overflows into a horizontal scroller instead.
-   React Native reads the recipe and stacks; this renderer had no translation of
-   it, so one contract rendered two layouts.
-
-   There are two triggers because web has two large-text signals. A browser
-   user changes the default font size, which `em` in a media query reads
-   directly; a product that declares `textScale` to the provider publishes
-   `data-large-text`, which is the recipe's `stackAtFontScale` resolved once
-   (a stylesheet cannot compare the raw number). Before #20 only the first
-   existed, so the declared axis reached RN and not this renderer. 11em is 176px at 100% (no real viewport, so the
-   row is untouched) and 352px at 200%. Measured on the sea view: the row is
-   195px at 100%, 263px at 150% and 333px at 200%, so 320px/200% overflowed
-   (10em) while 360px/200% did not (11.25em) — the threshold sits between them.
-   Stacking releases two row-only declarations: `flex: 1 1 0` would collapse an
-   auto-height column to its padding, and `max-content` would stop a long label
-   from wrapping inside its own full-width row.
-
-   `renderers.ssr.test.tsx` fails if the recipe stops declaring "stacked" while
-   these rules remain, so the two do not drift apart silently. */
+/* segmentedControlRecipe.adaptive.largeTextLayout stacks oversized labels, matching RN.
+   Both browser font size (em query) and provider data-large-text must trigger it (#20).
+   11em = 176px at100%, 352px at200%: measured row333px fits360px but overflows320px.
+   Reset flex and max-content in columns to avoid collapsed height and unwrapped labels.
+   renderers.ssr.test.tsx checks that the recipe still declares stacked. */
 @media (max-width: 11em) {
   .hjm-segmented__items { flex-direction: column; overflow-x: visible; }
   .hjm-segmented__item { flex: 0 0 auto; min-inline-size: 0; }
@@ -828,11 +816,11 @@
 .hjm-tabs[data-orientation="vertical"] .hjm-tabs__tab[data-state="selected"]::after { inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; inline-size: 2px; block-size: auto; }
 
 .hjm-badge, .hjm-tag { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); max-inline-size: 100%; overflow-wrap: anywhere; }
-.hjm-badge { min-block-size: 24px; padding: 2px var(--hjm-space-xs); border: 1px solid transparent; border-radius: var(--hjm-radius-full); color: var(--hjm-color-text-muted); background: var(--hjm-color-surface-alt); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-font-weight-bold); }
+.hjm-badge { min-block-size: 24px; padding: 2px var(--hjm-space-xs); border: 1px solid transparent; border-radius: var(--hjm-radius-full); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-font-weight-bold); }
 .hjm-badge[data-size="small"] { min-block-size: 20px; font-size: var(--hjm-type-caption-size); }
 .hjm-badge[data-tone="strong"] { color: var(--hjm-color-bg); background: var(--hjm-color-text); }
 .hjm-badge[data-tone="brand"] { color: var(--hjm-color-content-brand); }
-.hjm-badge[data-tone="info"], .hjm-tag[data-tone="info"] { color: var(--hjm-accent-info); background: color-mix(in srgb, var(--hjm-accent-info) 14%, transparent); border-color: color-mix(in srgb, var(--hjm-accent-info) 30%, transparent); }
+.hjm-badge[data-tone="info"], .hjm-tag[data-tone="info"] { color: var(--hjm-accent-info); background: var(--hjm-color-bg); border-color: color-mix(in srgb, var(--hjm-accent-info) 30%, transparent); }
 .hjm-badge[data-tone="success"], .hjm-tag[data-tone="success"] { color: var(--hjm-accent-success); background: color-mix(in srgb, var(--hjm-accent-success) 14%, transparent); border-color: color-mix(in srgb, var(--hjm-accent-success) 30%, transparent); }
 .hjm-badge[data-tone="warning"] { color: var(--hjm-accent-warning); background: color-mix(in srgb, var(--hjm-accent-warning) 14%, transparent); border-color: color-mix(in srgb, var(--hjm-accent-warning) 30%, transparent); }
 .hjm-badge[data-tone="attention"], .hjm-tag[data-tone="attention"] { color: var(--hjm-accent-attention); background: color-mix(in srgb, var(--hjm-accent-attention) 14%, transparent); border-color: color-mix(in srgb, var(--hjm-accent-attention) 30%, transparent); }
@@ -844,9 +832,9 @@
 .hjm-badge[data-variant="outline"][data-tone="warning"] { border-color: color-mix(in srgb, var(--hjm-accent-warning) 30%, transparent); }
 .hjm-badge[data-variant="outline"][data-tone="attention"] { border-color: color-mix(in srgb, var(--hjm-accent-attention) 30%, transparent); }
 .hjm-badge[data-variant="outline"][data-tone="danger"] { border-color: color-mix(in srgb, var(--hjm-color-danger) 30%, transparent); }
-.hjm-tag { min-block-size: 20px; padding-inline: var(--hjm-space-xxs); border: 1px solid transparent; border-radius: var(--hjm-radius-sm); color: var(--hjm-color-text-muted); background: var(--hjm-color-surface-alt); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-font-weight-semibold); }
-.hjm-tag[data-tone="brand"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-surface-accent); }
-.hjm-tag[data-tone="info"] { background: color-mix(in srgb, var(--hjm-accent-info) 10%, transparent); }
+.hjm-tag { min-block-size: 20px; padding-inline: var(--hjm-space-xxs); border: 1px solid transparent; border-radius: var(--hjm-radius-sm); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: var(--hjm-font-weight-semibold); }
+.hjm-tag[data-tone="brand"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
+.hjm-tag[data-tone="info"] { background: var(--hjm-color-bg); }
 .hjm-tag[data-tone="success"] { background: color-mix(in srgb, var(--hjm-accent-success) 10%, transparent); }
 .hjm-tag[data-tone="attention"] { background: color-mix(in srgb, var(--hjm-accent-attention) 10%, transparent); }
 .hjm-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
@@ -859,7 +847,8 @@
 .hjm-icon[data-tone="warning"] { color: var(--hjm-accent-warning); }
 .hjm-icon[data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-icon[data-tone="inverse"] { color: var(--hjm-color-on-primary); }
-.hjm-counter-badge { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: var(--hjm-space-xs); border-radius: var(--hjm-radius-full); color: var(--hjm-color-bg); background: var(--hjm-color-text); font-size: var(--hjm-type-caption-size); line-height: 1; font-weight: var(--hjm-font-weight-bold); font-variant-numeric: tabular-nums; }
+/* Counts must not flex-shrink below their text and padding in narrow rows. */
+.hjm-counter-badge { flex-shrink: 0; display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: var(--hjm-space-xs); border-radius: var(--hjm-radius-full); color: var(--hjm-color-bg); background: var(--hjm-color-text); font-size: var(--hjm-type-caption-size); line-height: 1; font-weight: var(--hjm-font-weight-bold); font-variant-numeric: tabular-nums; }
 .hjm-counter-badge[data-size="small"] { min-inline-size: 16px; block-size: 16px; padding-inline: var(--hjm-space-xxs); }
 .hjm-counter-badge[data-tone="brand"] { color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
 .hjm-counter-badge[data-tone="danger"] { color: var(--hjm-color-on-danger); background: var(--hjm-color-danger-fill); }
@@ -886,7 +875,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row[data-density="relaxed"][data-lines="two"] { min-block-size: var(--hjm-list-row-relaxed-two-line); }
 .hjm-list-row[data-density="spacious"] { min-block-size: var(--hjm-list-row-spacious-one-line); padding-inline: var(--hjm-list-row-spacious-padding-inline); padding-block: var(--hjm-list-row-spacious-padding-block); }
 .hjm-list-row[data-density="spacious"][data-lines="two"] { min-block-size: var(--hjm-list-row-spacious-two-line); }
-.hjm-list-row[data-state="selected"] { background: var(--hjm-color-surface-accent); }
+.hjm-list-row[data-state="selected"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-list-row[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-list-row__leading, .hjm-list-row__trailing { flex: 0 0 auto; }
 /* `leadingSize` was declared by the recipe but unbound, so consumers rebuilt
@@ -908,16 +897,16 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   .hjm-section__header { align-items: stretch; flex-direction: column; }
 }
 
-.hjm-chip { min-block-size: var(--hjm-control-min-touch-target); display: inline-flex; align-items: center; gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: 999px; background: var(--hjm-color-surface); color: var(--hjm-color-text-body); font: inherit; font-weight: var(--hjm-font-weight-medium); cursor: pointer; }
+.hjm-chip { min-block-size: var(--hjm-control-min-touch-target); display: inline-flex; align-items: center; gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: 999px; background: var(--hjm-color-bg); color: var(--hjm-color-text-body); font: inherit; font-weight: var(--hjm-font-weight-medium); cursor: pointer; }
 .hjm-chip[data-size="small"] { min-block-size: 36px; padding-inline: var(--hjm-space-xs); }
-.hjm-chip[data-selected] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-surface-accent); color: var(--hjm-color-content-brand); }
+.hjm-chip[data-selected] { border-color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); color: var(--hjm-color-content-brand); }
 .hjm-chip:disabled { opacity: 0.5; cursor: not-allowed; }
 .hjm-chip:focus-visible { outline: var(--hjm-focus-width) solid var(--hjm-color-focus); outline-offset: var(--hjm-focus-offset); }
 .hjm-chip__indicator, .hjm-chip__leading, .hjm-chip__trailing { display: inline-flex; flex: 0 0 auto; }
 .hjm-chip__label { overflow-wrap: anywhere; }
 
 .hjm-list { overflow: hidden; min-inline-size: 0; }
-.hjm-list[data-appearance="grouped"] { border-radius: var(--hjm-radius-lg); background: var(--hjm-color-surface); }
+.hjm-list[data-appearance="grouped"] { border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); }
 .hjm-list__item { min-inline-size: 0; }
 .hjm-list[data-separator="full"] > .hjm-list__item + .hjm-list__item { border-block-start: 1px solid var(--hjm-color-border); }
 /* Indent only the divider: moving the row shifted every title after the first
@@ -926,7 +915,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list[data-separator="indented"] > .hjm-list__item + .hjm-list__item::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--hjm-space-xl) 0; border-block-start: 1px solid var(--hjm-color-border); pointer-events: none; }
 
 .hjm-statistic { display: grid; gap: var(--hjm-space-xxs); min-inline-size: 0; color: var(--hjm-color-text-body); }
-.hjm-statistic[data-presentation="surface"] { padding: var(--hjm-space-md); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); }
+.hjm-statistic[data-presentation="surface"] { padding: var(--hjm-space-md); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); }
 .hjm-statistic[data-density="compact"] { gap: 2px; }
 .hjm-statistic__label { color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-medium); overflow-wrap: anywhere; }
 .hjm-statistic__value-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--hjm-space-xxs); min-inline-size: 0; }
@@ -941,7 +930,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   .hjm-statistic-group { grid-template-columns: minmax(0, 1fr); }
 }
 
-.hjm-notice { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--hjm-space-sm); padding: var(--hjm-space-md); border: 1px solid; border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-body); background: var(--hjm-color-surface); border-color: var(--hjm-color-border); }
+.hjm-notice { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--hjm-space-sm); padding: var(--hjm-space-md); border: 1px solid; border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-body); background: var(--hjm-color-bg); border-color: var(--hjm-color-border); }
 .hjm-notice[data-tone="info"] { border-color: var(--hjm-accent-info); }
 .hjm-notice[data-tone="success"] { border-color: var(--hjm-accent-success); background: color-mix(in srgb, var(--hjm-accent-success) 10%, var(--hjm-color-bg)); }
 .hjm-notice[data-tone="warning"] { border-color: var(--hjm-accent-warning); background: color-mix(in srgb, var(--hjm-accent-warning) 10%, var(--hjm-color-bg)); }
@@ -962,7 +951,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-result[data-status="success"] .hjm-result__icon:empty::before { content: "✓"; }
 .hjm-result[data-status="failure"] .hjm-result__icon { color: var(--hjm-color-danger); background: color-mix(in srgb, var(--hjm-color-danger) 12%, transparent); }
 .hjm-result[data-status="failure"] .hjm-result__icon:empty::before { content: "!"; }
-.hjm-result[data-status="info"] .hjm-result__icon { color: var(--hjm-accent-info); background: color-mix(in srgb, var(--hjm-accent-info) 12%, transparent); }
+.hjm-result[data-status="info"] .hjm-result__icon { color: var(--hjm-accent-info); background: var(--hjm-color-bg); }
 .hjm-result__title { margin: 0; color: var(--hjm-color-text); font-size: var(--hjm-type-title-large-size); line-height: var(--hjm-type-title-large-line-height); overflow-wrap: anywhere; }
 .hjm-result__description { max-inline-size: 40rem; margin: 0; color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
 .hjm-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hjm-space-sm); margin-block-start: var(--hjm-space-xs); }
@@ -1036,7 +1025,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-spinner[data-size="small"] { font-size: 14px; }
 .hjm-spinner[data-size="medium"] { font-size: 20px; }
 .hjm-spinner[data-size="large"] { font-size: 28px; }
-.hjm-skeleton { display: block; inline-size: 100%; min-block-size: var(--hjm-space-xxl); border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface-alt); }
+.hjm-skeleton { border: 1px solid var(--hjm-color-border); display: block; inline-size: 100%; min-block-size: var(--hjm-space-xxl); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); }
 .hjm-skeleton[data-shape="text"] { min-block-size: var(--hjm-space-md); border-radius: var(--hjm-radius-sm); }
 .hjm-skeleton[data-shape="circle"] { inline-size: var(--hjm-skeleton-circle-size); block-size: var(--hjm-skeleton-circle-size); border-radius: var(--hjm-radius-full); }
 .hjm-skeleton[data-animated="true"] { animation: hjm-pulse var(--hjm-skeleton-duration) var(--hjm-skeleton-easing) infinite alternate; }
@@ -1056,7 +1045,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   overflow: hidden;
   border: 1px solid var(--hjm-color-border);
   border-radius: var(--hjm-radius-lg);
-  background: var(--hjm-color-surface);
+  background: var(--hjm-color-bg);
   box-shadow: 0 16px 48px rgb(0 0 0 / 28%);
 }
 .hjm-command-palette__search {
@@ -1080,7 +1069,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   padding-inline: var(--hjm-space-sm);
   border-radius: var(--hjm-radius-sm);
 }
-.hjm-command-palette__item[aria-selected="true"] { background: var(--hjm-color-surface-accent); }
+.hjm-command-palette__item[aria-selected="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-command-palette__item[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
 .hjm-command-palette__item[data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-command-palette__copy { display: flex; min-inline-size: 0; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: var(--hjm-space-xs); overflow-wrap: anywhere; }
@@ -1124,6 +1113,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   color: var(--hjm-color-on-primary);
   font-size: var(--hjm-type-label-size);
 }
+/* 44px hit slop without growing the mark (2026-09-30 audit WR-0930-5/7) */
+.hjm-data-table__check, .hjm-data-table__sort, .hjm-transfer-list__select-all { position: relative; }
+.hjm-data-table__check::after, .hjm-data-table__sort::after, .hjm-transfer-list__select-all::after { content: ""; position: absolute; inset: calc(50% - var(--hjm-control-min-touch-target) / 2); }
 .hjm-data-table__check[aria-checked="true"],
 .hjm-data-table__check[aria-checked="mixed"] { border-color: var(--hjm-color-primary); background: var(--hjm-color-primary); }
 .hjm-data-table__sort:focus-visible,
@@ -1160,7 +1152,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   border-radius: var(--hjm-radius-sm);
   overflow-wrap: anywhere;
 }
-.hjm-mentions__option[aria-selected="true"] { background: var(--hjm-color-surface-accent); }
+.hjm-mentions__option[aria-selected="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-mentions__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
 .hjm-mentions__empty { margin: 0; padding: var(--hjm-space-xs); color: var(--hjm-color-text-muted); }
 
@@ -1217,7 +1209,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   border-radius: var(--hjm-radius-sm);
   overflow-wrap: anywhere;
 }
-.hjm-transfer-list__option[aria-selected="true"] { background: var(--hjm-color-surface-accent); }
+/* The label is a flex item; reset its intrinsic min-width so long localized values wrap inside a narrow panel. */
+.hjm-transfer-list__option > span:last-child { min-inline-size: 0; overflow-wrap: anywhere; }
+/* Panel headings and empty-state copy share the same narrow column as rows. */
+.hjm-transfer-list__title,
+.hjm-transfer-list__empty { min-inline-size: 0; overflow-wrap: anywhere; }
+.hjm-transfer-list__option[aria-selected="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-transfer-list__option[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
 .hjm-transfer-list__option:focus-visible,
 .hjm-transfer-list__empty:focus-visible,
@@ -1226,12 +1223,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-transfer-list__actions { display: flex; flex-direction: column; gap: var(--hjm-space-xs); padding-block-start: var(--hjm-space-xl); }
 
 /* AuthProviderButton ------------------------------------------------------ */
-/*
-  Brand fills come in as custom properties from the provider guideline table,
-  never from the theme: recoloring them would fail provider review. HJM keeps
-  the height, radius, target and focus ring so a stack of providers lines up,
-  and the ring is drawn outside the fill so it survives every brand color.
-*/
+/* Provider guideline colors cannot follow the theme without failing provider review.
+   HJM owns geometry and an outer focus ring that remains visible on every brand fill. */
 .hjm-auth-provider-button {
   display: flex;
   align-items: center;
@@ -1283,10 +1276,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   selection semantics underneath. The hovered preview uses the same states, so
   there is one set of rules rather than a committed and a provisional set.
 */
+/* Each hit/hover layer belongs to its own day. Without this containing block
+   the last absolute layer covered the whole preview and stole pointer clicks. */
+.hjm-date-range .hjm-calendar__day { position: relative; isolation: isolate; }
+.hjm-date-range .hjm-calendar__day-label { position: relative; z-index: 1; pointer-events: none; }
 .hjm-date-range__cell { position: absolute; inset: 0; border-radius: var(--hjm-radius-sm); pointer-events: auto; }
-.hjm-date-range__cell[data-range="between"] { background: var(--hjm-color-surface-accent); }
+.hjm-date-range__cell[data-range="between"] { box-shadow: inset 0 -2px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
 .hjm-date-range__cell[data-range="start"],
-.hjm-date-range__cell[data-range="end"] { background: var(--hjm-color-surface-accent); outline: 2px solid var(--hjm-color-focus); }
+.hjm-date-range__cell[data-range="end"] { background: var(--hjm-color-bg); outline: 2px solid var(--hjm-color-focus); }
 .hjm-date-range__cell[data-range="none"] { background: transparent; }
 
 /* AvatarGroup: overlap comes from the recipe ratio, not a per-size pixel value. */
@@ -1301,7 +1298,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   padding-inline: var(--hjm-space-xxs);
   border: 2px solid var(--hjm-color-bg);
   border-radius: var(--hjm-radius-full);
-  background: var(--hjm-color-surface-alt);
+  background: var(--hjm-color-bg);
   color: var(--hjm-color-text-muted);
   font-size: var(--hjm-type-label-size);
 }
@@ -1321,7 +1318,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-text-format[data-kind="code"] {
   padding-inline: var(--hjm-space-xxs);
   border-radius: var(--hjm-radius-sm);
-  background: var(--hjm-color-surface-alt);
+  background: var(--hjm-color-bg);
   font-family: var(--hjm-font-family-code, ui-monospace, SFMono-Regular, Consolas, monospace);
 }
 .hjm-text-format[data-kind="kbd"] {
@@ -1346,6 +1343,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   position: absolute;
   inset-block-start: var(--hjm-skip-nav-offset);
   inset-inline-start: var(--hjm-skip-nav-offset);
+  /* A localized skip label can be longer than a narrow viewport; keep the focused link on-screen. */
+  box-sizing: border-box;
+  max-inline-size: calc(100vw - var(--hjm-skip-nav-offset) * 2);
   z-index: 1300;
   display: inline-flex;
   align-items: center;
@@ -1355,6 +1355,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   background: var(--hjm-color-primary);
   color: var(--hjm-color-on-primary);
   text-decoration: none;
+  overflow-wrap: anywhere;
   transform: translateY(calc(-100% - var(--hjm-skip-nav-offset) * 2));
 }
 .hjm-skip-nav:focus-visible,
@@ -1428,7 +1429,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   min-block-size: 100%;
   padding: var(--hjm-space-sm) var(--hjm-space-xs);
   border-inline-end: 1px solid var(--hjm-color-border);
-  background: var(--hjm-color-surface-alt);
+  background: var(--hjm-color-bg);
   overflow: auto;
 }
 .hjm-sidebar__toggle {
@@ -1449,6 +1450,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   color: var(--hjm-color-text-muted);
   font-size: var(--hjm-type-label-size);
   font-weight: var(--hjm-type-label-weight);
+  /* The rail has a fixed width; wrap long localized headings so their meaning stays visible instead of clipping or widening the shell. */
+  overflow-wrap: anywhere;
 }
 .hjm-sidebar__list { display: flex; flex-direction: column; gap: var(--hjm-sidebar-gap); margin: 0; padding: 0; list-style: none; }
 .hjm-sidebar__item {
@@ -1463,10 +1466,10 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   overflow-wrap: anywhere;
 }
 .hjm-sidebar__item[aria-current="page"] {
-  background: var(--hjm-color-surface-accent);
+  background: var(--hjm-color-bg);
   color: var(--hjm-color-content-brand);
   font-weight: var(--hjm-font-weight-semibold);
-}
+ box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-sidebar__item[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
 .hjm-sidebar__item:focus-visible,
 .hjm-sidebar__toggle:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
@@ -1490,7 +1493,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   padding-inline: var(--hjm-toggle-padding);
   border: 1px solid var(--hjm-color-border-control);
   border-radius: var(--hjm-toggle-radius);
-  background: var(--hjm-color-surface);
+  background: var(--hjm-color-bg);
   color: var(--hjm-color-text-body);
   font: inherit;
   cursor: pointer;
@@ -1498,7 +1501,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* The pressed state is announced by aria-pressed; color only reinforces it. */
 .hjm-toggle-group__item[aria-pressed="true"] {
   border-color: var(--hjm-color-focus);
-  background: var(--hjm-color-surface-accent);
+  background: var(--hjm-color-bg);
   color: var(--hjm-color-content-brand);
   font-weight: var(--hjm-font-weight-semibold);
 }
@@ -1529,7 +1532,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   min-block-size: var(--hjm-tags-tag-min-height);
   padding-inline: var(--hjm-space-xs);
   border-radius: var(--hjm-radius-full);
-  background: var(--hjm-color-surface-alt);
+  background: var(--hjm-color-bg);
   color: var(--hjm-color-text-body);
   overflow-wrap: anywhere;
 }
@@ -1554,7 +1557,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   min-inline-size: var(--hjm-tags-remove-target);
   min-block-size: var(--hjm-tags-remove-target);
 }
-.hjm-tags-input__tag { position: relative; }
+.hjm-tags-input__tag { position: relative; border: 1px solid var(--hjm-color-border-control); }
 .hjm-tags-input__input {
   flex: 1 1 8ch;
   min-inline-size: 8ch;
@@ -1585,7 +1588,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.hjm-tags-input__suggestion[aria-selected="true"] { background: var(--hjm-color-surface-accent); }
+.hjm-tags-input__suggestion[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
 .hjm-tags-input__suggestion[aria-disabled="true"] { color: var(--hjm-color-text-weak); cursor: default; }
 .hjm-tags-input__description { margin: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
 .hjm-tags-input[data-disabled] .hjm-tags-input__frame { opacity: 0.6; cursor: default; }
@@ -1665,7 +1668,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   gap: var(--hjm-space-sm);
   padding: var(--hjm-space-sm) var(--hjm-space-md);
   border-radius: var(--hjm-radius-md);
-  background: var(--hjm-color-surface-alt);
+  background: var(--hjm-color-bg);
   font-size: var(--hjm-type-body-large-size);
   line-height: var(--hjm-type-body-large-line-height);
 }
@@ -1717,12 +1720,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-agreement__detail:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
 
 /* Tree -------------------------------------------------------------------- */
-/*
-  A flat list of treeitems with aria-level, not nested group elements: the
-  roving tab stop and the contract's visible-node navigation both operate on one
-  resolved array, and WAI-ARIA accepts either shape. Indentation is presentation
-  only — depth is announced, never inferred from the padding.
-*/
+/* Flat aria-level treeitems match the contract's visible-node array and roving focus.
+   WAI-ARIA permits this shape; depth is announced rather than inferred from indentation. */
 .hjm-tree { display: flex; flex-direction: column; }
 .hjm-tree__node {
   display: flex;
@@ -1735,7 +1734,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   color: var(--hjm-color-text);
   cursor: default;
 }
-.hjm-tree__node[aria-selected="true"] { background: var(--hjm-color-surface-accent); }
+.hjm-tree__node[aria-selected="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-tree__node[aria-disabled="true"] { color: var(--hjm-color-text-weak); }
 .hjm-tree__node:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
 .hjm-tree__indent { flex: 0 0 auto; inline-size: calc(var(--hjm-tree-depth) * var(--hjm-tree-indent)); }
@@ -1809,7 +1808,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   align-items: center;
   justify-content: center;
   padding: var(--hjm-space-md);
-  background: rgb(0 0 0 / 58%);
+  background: var(--hjm-backdrop-modal);
   overscroll-behavior: contain;
 }
 .hjm-dialog,
@@ -1858,6 +1857,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   overflow-wrap: anywhere;
 }
 .hjm-dialog > .hjm-dialog__description { padding-inline: var(--hjm-space-lg); }
+/* Consumer-authored identifiers can be unbroken; keep modal body text inside the narrow viewport. */
+.hjm-dialog__body { overflow-wrap: anywhere; }
 .hjm-dialog__body,
 .hjm-sheet__body { padding: var(--hjm-space-lg); }
 .hjm-dialog__footer,
@@ -1976,12 +1977,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-sheet[data-placement="end"] {
   block-size: calc(100dvh - (2 * var(--hjm-space-md)));
 }
-/*
-  SidePanel docks to a logical viewport edge, so it drops the floating radius the
-  Dialog/Sheet cards keep (sidePanelRecipe.content.radius is null) and spans the
-  full block size. The non-modal panel has no backdrop element at all — the page
-  behind it stays interactive — so it positions itself instead of a positioner.
-*/
+/* sidePanelRecipe.content.radius=null: dock at a logical edge with full block height.
+   Non-modal panels position themselves; no backdrop may block the interactive page. */
 .hjm-side-panel-positioner { padding: 0; }
 .hjm-side-panel-positioner[data-edge="start"] { justify-content: flex-start; }
 .hjm-side-panel-positioner[data-edge="end"] { justify-content: flex-end; }
@@ -1995,7 +1992,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   border: 1px solid var(--hjm-color-border);
   border-radius: 0;
   color: var(--hjm-color-text);
-  background: var(--hjm-color-surface);
+  background: var(--hjm-color-bg);
   box-shadow: 0 16px 48px rgb(0 0 0 / 28%);
 }
 .hjm-side-panel[data-modal="false"] {
@@ -2047,13 +2044,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   padding: var(--hjm-space-sm) var(--hjm-space-lg)
     max(var(--hjm-space-sm), env(safe-area-inset-bottom, 0px));
 }
-/*
-  Tour keeps the veil and the card in separate portals: the veil must cover the
-  page while the card is positioned against its anchor, and the shared anchored
-  popup helper owns the card's coordinates. The highlight is a ring drawn at the
-  measured anchor box — decoration only, so it is hidden from assistive tech.
-*/
-.hjm-tour-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 58%); pointer-events: auto; }
+/* Separate portals let Tour's veil cover the page while the shared popup helper anchors
+   its card. The measured highlight ring is decorative and hidden from assistive tech. */
+.hjm-tour-backdrop { position: fixed; inset: 0; background: var(--hjm-backdrop-modal); pointer-events: auto; }
 .hjm-tour-highlight {
   position: fixed;
   border-radius: var(--hjm-radius-md);
@@ -2064,12 +2057,15 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   display: flex;
   flex-direction: column;
   gap: var(--hjm-space-sm);
+  /* The anchored popup is viewport-height bounded; scrolling keeps long translations and actions usable without truncating copy or detaching controls. */
+  overflow-y: auto;
+  overscroll-behavior: contain;
   box-sizing: border-box;
   padding: var(--hjm-space-md);
   border: 1px solid var(--hjm-color-border);
   border-radius: var(--hjm-radius-md);
   color: var(--hjm-color-text);
-  background: var(--hjm-color-surface);
+  background: var(--hjm-color-bg);
   box-shadow: 0 16px 48px rgb(0 0 0 / 28%);
   pointer-events: auto;
 }
@@ -2105,7 +2101,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   padding: var(--hjm-space-xxs);
   border: 1px solid var(--hjm-color-border);
   border-radius: var(--hjm-radius-md);
-  background: var(--hjm-color-surface);
+  background: var(--hjm-color-bg);
   box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
 }
 .hjm-menu__item {
@@ -2125,7 +2121,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 }
 .hjm-menu__content[data-density="comfortable"] .hjm-menu__item { min-block-size: 3.5rem; }
 .hjm-menu__item:hover,
-.hjm-menu__item[data-focus="true"] { background: var(--hjm-color-surface-alt); }
+.hjm-menu__item[data-focus="true"] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-menu__item[data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-menu__item[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -2150,13 +2146,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-select__indicator { flex: 0 0 auto; color: var(--hjm-color-text-muted); pointer-events: none; }
 .hjm-select__busy-indicator { flex: 0 0 auto; inline-size: 1em; block-size: 1em; border: 2px solid var(--hjm-color-content-brand); border-inline-end-color: transparent; border-radius: 50%; animation: hjm-spin 800ms linear infinite; }
 .hjm-select__native + .hjm-select__indicator { margin-inline-start: calc(-1 * var(--hjm-space-lg)); }
-.hjm-select__listbox { position: fixed; z-index: 800; max-inline-size: min(26.25rem, calc(100vw - (2 * var(--hjm-space-md)))); max-block-size: 22.5rem; overflow: auto; padding: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
+.hjm-select__listbox { position: fixed; z-index: 800; max-inline-size: min(26.25rem, calc(100vw - (2 * var(--hjm-space-md)))); max-block-size: 22.5rem; overflow: auto; padding: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
 .hjm-select__section-label { padding: var(--hjm-space-xs) var(--hjm-space-sm); color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-select__option, .hjm-select__message { min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xs) var(--hjm-space-sm); border-radius: var(--hjm-radius-sm); overflow-wrap: anywhere; }
 .hjm-select[data-density="comfortable"] .hjm-select__option,
 .hjm-select__listbox[data-density="comfortable"] .hjm-select__option { min-block-size: 3.5rem; }
 .hjm-select__option { cursor: pointer; }
-.hjm-select__option[data-active="true"] { background: var(--hjm-color-surface-alt); }
+.hjm-select__option[data-active="true"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
 .hjm-select__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-bold); }
 .hjm-select__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-select__option-copy { min-inline-size: 0; flex: 1 1 auto; display: grid; gap: var(--hjm-space-xxs); }
@@ -2182,7 +2178,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   padding: var(--hjm-space-xxs);
   border: 1px solid var(--hjm-color-border);
   border-radius: var(--hjm-radius-md);
-  background: var(--hjm-color-surface);
+  background: var(--hjm-color-bg);
   box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
 }
 .hjm-combobox__option,
@@ -2197,7 +2193,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-combobox[data-density="comfortable"] .hjm-combobox__option,
 .hjm-combobox__listbox[data-density="comfortable"] .hjm-combobox__option { min-block-size: 3.5rem; }
 .hjm-combobox__option { cursor: pointer; }
-.hjm-combobox__option[data-state="active"] { background: var(--hjm-color-surface-alt); }
+.hjm-combobox__option[data-state="active"] { box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); background: var(--hjm-color-bg); }
 .hjm-combobox__option[data-state="selected"] { color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-bold); }
 .hjm-combobox__option[data-state="disabled"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-combobox__message { color: var(--hjm-color-text-muted); }
@@ -2241,7 +2237,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   cursor: pointer;
 }
 .hjm-accordion[data-density="compact"] .hjm-accordion__trigger { min-block-size: var(--hjm-control-min-touch-target); padding-block: var(--hjm-space-xs); }
-.hjm-accordion__trigger:hover { background: var(--hjm-color-surface-alt); }
+.hjm-accordion__trigger:hover { background: var(--hjm-color-bg); }
 .hjm-accordion__trigger:disabled { opacity: 0.5; cursor: not-allowed; }
 .hjm-accordion__title { min-inline-size: 0; overflow-wrap: anywhere; }
 .hjm-accordion__indicator { flex: 0 0 auto; color: var(--hjm-color-text-muted); }
@@ -2255,7 +2251,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   border: 1px solid var(--hjm-color-border);
   border-radius: 50%;
   color: var(--hjm-color-text-muted);
-  background: var(--hjm-color-surface-alt);
+  background: var(--hjm-color-bg);
   font-weight: var(--hjm-font-weight-bold);
 }
 .hjm-avatar[data-size="small"] { inline-size: 2rem; block-size: 2rem; font-size: var(--hjm-type-label-size); }
@@ -2278,10 +2274,10 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-table__caption { padding: var(--hjm-space-sm); color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); text-align: start; }
 .hjm-table__header,
 .hjm-table__cell { padding: var(--hjm-space-sm); border-block-end: 1px solid var(--hjm-color-border); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
-.hjm-table__header { color: var(--hjm-color-text); background: var(--hjm-color-surface-alt); }
+.hjm-table__header { color: var(--hjm-color-text); background: var(--hjm-color-bg); }
 .hjm-table__header[data-align="center"], .hjm-table__cell[data-align="center"] { text-align: center; }
 .hjm-table__header[data-align="end"], .hjm-table__cell[data-align="end"] { text-align: end; }
-.hjm-table__row:hover { background: var(--hjm-color-surface-alt); }
+.hjm-table__row:hover { background: var(--hjm-color-bg); }
 .hjm-table__sort { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); padding: var(--hjm-space-xxs); border: 0; color: inherit; background: transparent; font: inherit; font-weight: inherit; cursor: pointer; }
 .hjm-table__empty { padding: var(--hjm-space-xl); color: var(--hjm-color-text-muted); text-align: center; }
 
@@ -2306,7 +2302,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   border-radius: var(--hjm-radius-md);
 }
 .hjm-pagination__item { color: var(--hjm-color-text-body); background: transparent; font: inherit; cursor: pointer; }
-.hjm-pagination__item:hover:not([aria-disabled="true"]) { background: var(--hjm-color-surface-alt); }
+.hjm-pagination__item:hover:not([aria-disabled="true"]) { background: var(--hjm-color-bg); }
 .hjm-pagination__item[data-state="current"] { border-color: var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); font-weight: var(--hjm-font-weight-bold); }
 .hjm-pagination__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-pagination__ellipsis { color: var(--hjm-color-text-muted); }
@@ -2323,10 +2319,10 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-steps { display: grid; grid-template-columns: repeat(var(--hjm-steps-count, auto-fit), minmax(0, 1fr)); gap: var(--hjm-space-xs); margin: 0; padding: 0; list-style: none; }
 .hjm-steps__step { min-inline-size: 0; display: grid; gap: var(--hjm-space-xs); }
 .hjm-steps__rail { display: flex; align-items: center; min-inline-size: 0; }
-.hjm-steps__indicator { flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; border: 1px solid var(--hjm-color-border); border-radius: 50%; color: var(--hjm-color-text-muted); background: var(--hjm-color-surface); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-bold); }
+.hjm-steps__indicator { flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; display: grid; place-items: center; border: 1px solid var(--hjm-color-border); border-radius: 50%; color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-bold); }
 .hjm-steps__connector { flex: 1 1 auto; block-size: 1px; background: var(--hjm-color-border); }
 .hjm-steps__step[data-status="current"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-content-brand); color: var(--hjm-color-content-brand); }
-.hjm-steps__step[data-status="complete"] .hjm-steps__indicator { border-color: var(--hjm-accent-success); color: var(--hjm-accent-success); background: var(--hjm-color-surface-alt); }
+.hjm-steps__step[data-status="complete"] .hjm-steps__indicator { border-color: var(--hjm-accent-success); color: var(--hjm-accent-success); background: var(--hjm-color-bg); }
 .hjm-steps__step[data-status="complete"] .hjm-steps__connector { background: var(--hjm-color-content-brand); }
 .hjm-steps__step[data-status="error"] .hjm-steps__indicator { border: 2px solid var(--hjm-color-danger); color: var(--hjm-color-danger); background: var(--hjm-color-danger-fill); }
 .hjm-steps__copy { min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); padding-inline-end: var(--hjm-space-sm); }
@@ -2337,8 +2333,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 
 .hjm-file-picker { display: grid; gap: var(--hjm-space-xs); }
 .hjm-file-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
-.hjm-file-picker__dropzone { min-block-size: 8rem; display: grid; place-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xl); border: 1px dashed var(--hjm-color-border); border-radius: var(--hjm-radius-lg); color: var(--hjm-color-text-muted); background: var(--hjm-color-surface); text-align: center; }
-.hjm-file-picker[data-dragging] .hjm-file-picker__dropzone { border-color: var(--hjm-color-focus); background: var(--hjm-color-surface-accent); }
+.hjm-file-picker__dropzone { min-block-size: 8rem; display: grid; place-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xl); border: 1px dashed var(--hjm-color-border); border-radius: var(--hjm-radius-lg); color: var(--hjm-color-text-muted); background: var(--hjm-color-bg); text-align: center; }
+.hjm-file-picker[data-dragging] .hjm-file-picker__dropzone { border-color: var(--hjm-color-focus); background: var(--hjm-color-bg); }
 .hjm-file-picker__dropzone button { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-space-md); border: 0; border-radius: var(--hjm-radius-md); color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-font-weight-bold); cursor: pointer; }
 .hjm-file-picker__hint { color: var(--hjm-color-text-muted); }
 .hjm-file-picker__error { color: var(--hjm-color-danger); }
@@ -2360,12 +2356,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-date-picker { display: grid; gap: var(--hjm-space-xs); }
 .hjm-date-picker__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-date-picker__anchor { position: relative; display: flex; align-items: center; }
-.hjm-date-picker__trigger { inline-size: 100%; min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; gap: var(--hjm-space-sm); padding-inline: var(--hjm-space-md) 3rem; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-body); background: var(--hjm-color-surface); font: inherit; text-align: start; cursor: pointer; }
+.hjm-date-picker__trigger { inline-size: 100%; min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; gap: var(--hjm-space-sm); padding-inline: var(--hjm-space-md) 3rem; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-body); background: var(--hjm-color-bg); font: inherit; text-align: start; cursor: pointer; }
 .hjm-date-picker[data-size="large"] .hjm-date-picker__trigger { min-block-size: 3.5rem; padding-inline-start: var(--hjm-space-lg); }
 .hjm-date-picker[data-invalid] .hjm-date-picker__trigger { border-color: var(--hjm-color-danger); }
 .hjm-date-picker__trigger [data-placeholder] { color: var(--hjm-color-text-muted); }
 .hjm-date-picker__clear { position: absolute; inset-inline-end: 0; inline-size: var(--hjm-control-min-touch-target); block-size: var(--hjm-control-min-touch-target); border: 0; color: var(--hjm-color-text-muted); background: transparent; font: inherit; cursor: pointer; }
-.hjm-date-picker__popover { position: absolute; z-index: 800; inset-block-start: calc(100% + var(--hjm-space-xs)); inset-inline-start: 0; inline-size: min(22.5rem, calc(100vw - 2rem)); padding: var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); color: var(--hjm-color-text); background: var(--hjm-color-surface); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
+.hjm-date-picker__popover { position: absolute; z-index: 800; inset-block-start: calc(100% + var(--hjm-space-xs)); inset-inline-start: 0; inline-size: min(22.5rem, calc(100vw - 2rem)); padding: var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); color: var(--hjm-color-text); background: var(--hjm-color-bg); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
 .hjm-date-picker__description { color: var(--hjm-color-text-muted); }
 .hjm-date-picker__error { color: var(--hjm-color-danger); }
 
@@ -2462,7 +2458,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-top-bar[data-large-text="true"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
 .hjm-top-bar[data-large-text="true"] .hjm-top-bar__title { grid-column: 1 / -1; grid-row: 2; padding-block: var(--hjm-space-xs); text-align: start; }
 .hjm-top-bar[data-large-text="true"] .hjm-top-bar__trailing { grid-column: 2; grid-row: 1; }
-.hjm-bottom-cta { display: grid; gap: var(--hjm-bottom-cta-gap); min-block-size: var(--hjm-bottom-cta-min-height); padding: var(--hjm-bottom-cta-padding-top) var(--hjm-bottom-cta-padding-inline) max(var(--hjm-bottom-cta-padding-bottom), env(safe-area-inset-bottom, 0px), var(--hjm-bottom-cta-safe-area)); border-block-start: 1px solid var(--hjm-color-border); background: var(--hjm-color-surface); }
+.hjm-bottom-cta { display: grid; gap: var(--hjm-bottom-cta-gap); min-block-size: var(--hjm-bottom-cta-min-height); padding: var(--hjm-bottom-cta-padding-top) var(--hjm-bottom-cta-padding-inline) max(var(--hjm-bottom-cta-padding-bottom), env(safe-area-inset-bottom, 0px), var(--hjm-bottom-cta-safe-area)); border-block-start: 1px solid var(--hjm-color-border); background: var(--hjm-color-bg); }
 .hjm-bottom-cta[data-position="sticky"] { position: sticky; inset-block-end: 0; z-index: 1; }
 .hjm-bottom-cta__description { margin: 0; font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
 .hjm-bottom-cta__actions { display: flex; flex-wrap: wrap; gap: var(--hjm-bottom-cta-gap); }
@@ -2563,32 +2559,68 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Both surfaces reuse the menu's floating look; only the anchor differs. */
 .hjm-context-menu-host { min-inline-size: 0; }
 .hjm-context-menu-host:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
-.hjm-context-menu { position: fixed; max-inline-size: min(24rem, 90vw); max-block-size: calc(100dvh - (2 * var(--hjm-space-md))); overflow: auto; padding: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
+.hjm-context-menu { position: fixed; max-inline-size: min(24rem, 90vw); max-block-size: calc(100dvh - (2 * var(--hjm-space-md))); overflow: auto; padding: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
 .hjm-context-menu__item { min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; justify-content: space-between; gap: var(--hjm-space-sm); padding: var(--hjm-space-xs) var(--hjm-space-sm); border-radius: var(--hjm-radius-sm); color: var(--hjm-color-text-body); cursor: pointer; }
-.hjm-context-menu__item[data-active] { background: var(--hjm-color-surface-alt); }
+/* Wrap long labels so commands stay readable inside the viewport-bounded menu; truncation was rejected because it hides command meaning. */
+.hjm-context-menu__item > span { min-inline-size: 0; overflow-wrap: anywhere; }
+.hjm-context-menu__item[data-active] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-context-menu__item[data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-context-menu__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
-.hjm-context-menu__shortcut { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
+.hjm-context-menu__shortcut { flex: 0 0 auto; white-space: nowrap; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
 
 .hjm-menubar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hjm-menubar-gap); min-block-size: var(--hjm-menubar-min-height); padding-inline: var(--hjm-menubar-padding); }
 .hjm-menubar__menu { position: relative; }
 .hjm-menubar__label { min-block-size: var(--hjm-control-min-touch-target); padding-inline: var(--hjm-menubar-label-padding); border: 0; border-radius: var(--hjm-menubar-label-radius); background: transparent; color: var(--hjm-color-text-body); font: inherit; cursor: pointer; }
-.hjm-menubar__label[data-open] { background: var(--hjm-color-surface-accent); }
+.hjm-menubar__label[data-open] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-menubar__label:disabled { opacity: 0.5; cursor: not-allowed; }
 .hjm-menubar__label:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
-.hjm-menubar__panel { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 900; min-inline-size: 13.75rem; max-inline-size: min(24rem, 90vw); padding: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-surface); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
+.hjm-menubar__panel { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 900; min-inline-size: 13.75rem; max-inline-size: min(24rem, 90vw); padding: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
 .hjm-menubar__item { min-block-size: var(--hjm-control-min-touch-target); display: flex; align-items: center; justify-content: space-between; gap: var(--hjm-space-sm); padding: var(--hjm-space-xs) var(--hjm-space-sm); border-radius: var(--hjm-radius-sm); color: var(--hjm-color-text-body); cursor: pointer; }
-.hjm-menubar__item[data-active] { background: var(--hjm-color-surface-alt); }
+.hjm-menubar__item[data-active] { background: var(--hjm-color-bg);  box-shadow: inset 0 0 0 1px var(--hjm-color-content-brand); }
 .hjm-menubar__item[data-tone="danger"] { color: var(--hjm-color-danger); }
 .hjm-menubar__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
 .hjm-menubar__shortcut { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); }
 
 /* Asset frame ------------------------------------------------------------ */
 .hjm-asset { position: relative; display: inline-flex; flex: 0 0 auto; }
-.hjm-asset__frame { inline-size: var(--hjm-asset-size); block-size: var(--hjm-asset-size); display: grid; place-items: center; overflow: hidden; border: var(--hjm-stroke-default) solid var(--hjm-color-border); border-radius: var(--hjm-asset-radius); background: var(--hjm-color-surface-alt); }
+.hjm-asset__frame { inline-size: var(--hjm-asset-size); block-size: var(--hjm-asset-size); display: grid; place-items: center; overflow: hidden; border: var(--hjm-stroke-default) solid var(--hjm-color-border); border-radius: var(--hjm-asset-radius); background: var(--hjm-color-bg); }
 .hjm-asset__media { inline-size: 100%; block-size: 100%; display: grid; place-items: center; }
 .hjm-asset__media > * { max-inline-size: 100%; max-block-size: 100%; }
 /* The accessory hangs off the outer corner so it never covers the frame's middle. */
 .hjm-asset__accessory { position: absolute; inset-block-end: var(--hjm-asset-accessory-offset); inset-inline-end: var(--hjm-asset-accessory-offset); transform: translate(25%, 25%); display: inline-flex; }
 .hjm-asset-group { display: inline-flex; align-items: center; }
 .hjm-asset-group > .hjm-asset + .hjm-asset { margin-inline-start: var(--hjm-asset-overlap); }
+
+/* Bloom owns geometry only; HJM owns target size, theme and keyboard focus. */
+.hjm-menu-morph { position: relative; z-index: 1; }
+.hjm-menu-morph [role="button"]:focus-visible, .hjm-menu-morph__item:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
+.hjm-menu-morph__item { display: flex; width: 100%; align-items: center; gap: var(--hjm-space-sm); min-height: var(--hjm-control-min-touch-target); padding: var(--hjm-space-sm); border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
+.hjm-menu-morph__item:hover, .hjm-menu-morph__item:focus { background: var(--hjm-color-bg); }
+.hjm-menu-morph__item[data-tone="danger"] { color: var(--hjm-color-danger); }
+.hjm-menu-morph__item:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Selected colors are user data; control surfaces keep the same canvas tokens as other inputs. */
+.hjm-color-picker { border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); color: var(--hjm-color-text); padding: 1rem; margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
+.hjm-color-picker legend { max-inline-size: 100%; overflow-wrap: anywhere; }
+.hjm-color-picker__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
+.hjm-color-picker label { display: flex; flex-direction: column; gap: 0.5rem; min-inline-size: 0; }
+.hjm-color-picker__hex { flex: 1 1 10rem; }
+.hjm-color-picker input { box-sizing: border-box; min-block-size: var(--hjm-color-picker-target); min-inline-size: 0; max-inline-size: 100%; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); background: var(--hjm-color-bg); color: var(--hjm-color-text); font: inherit; }
+.hjm-color-picker input[type="text"] { inline-size: 100%; padding-inline: 0.5rem; }
+.hjm-color-picker input[type="color"] { inline-size: 3rem; padding: 0.25rem; }
+.hjm-color-picker__opacity { margin-block-start: 0.75rem; }
+.hjm-color-picker__opacity input[type="range"] { accent-color: var(--hjm-color-primary); }
+.hjm-color-picker__preview { block-size: 1.5rem; margin-block-start: 0.75rem; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); }
+.hjm-color-picker__presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; }
+.hjm-color-picker__presets button { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: var(--hjm-color-picker-target); max-inline-size: 100%; overflow-wrap: anywhere; border: 1px solid var(--hjm-color-border); border-radius: var(--hjm-radius-md); padding: 0.5rem; background: var(--hjm-color-bg); color: var(--hjm-color-text); font: inherit; cursor: pointer; }
+.hjm-color-picker__presets button[aria-pressed="true"] { border-color: var(--hjm-color-primary); }
+.hjm-color-picker__swatch { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; border: 1px solid var(--hjm-color-border); }
+.hjm-color-picker :is(input, button):focus-visible { outline: 2px solid var(--hjm-color-primary); outline-offset: 2px; }
+.hjm-color-picker__error { color: var(--hjm-color-danger); margin-block: 0.5rem; }
+.hjm-color-picker:disabled { opacity: 0.5; }
+/* SVG labels are decorative and print with the content; neither selection nor pointer input is intercepted. */
+.hjm-watermark { position: relative; isolation: isolate; }
+.hjm-watermark__content { position: relative; z-index: 0; overflow-wrap: anywhere; }
+.hjm-watermark__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; user-select: none; overflow: hidden; color: var(--hjm-color-text-sub); font: inherit; }
+.hjm-affix { color: var(--hjm-color-text); background: var(--hjm-color-bg); overflow-wrap: anywhere; }
+.hjm-affix__marker { display: block; block-size: 0; pointer-events: none; }