@hjmds/react 1.6.0 → 1.8.0

package/dist/styles.layered.css

@@ -1,4 +1,5 @@
 @layer hjm {
+/* 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,
@@ -71,14 +72,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); }
@@ -166,7 +167,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,
@@ -180,7 +181,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; }
 
@@ -231,7 +232,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
@@ -239,7 +240,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). 잘린 행동 라벨은 무엇을 하는
@@ -282,11 +283,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 {
@@ -294,9 +299,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); }
@@ -395,6 +400,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"] {
@@ -428,10 +434,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);
@@ -498,7 +504,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);
@@ -582,8 +588,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);
@@ -699,7 +705,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; }
@@ -707,11 +714,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); }
@@ -728,7 +735,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; }
@@ -736,17 +743,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); }
@@ -776,33 +780,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; }
@@ -829,11 +817,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); }
@@ -845,9 +833,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; }
@@ -860,7 +848,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); }
@@ -887,7 +876,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
@@ -909,16 +898,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
@@ -927,7 +916,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; }
@@ -942,7 +931,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)); }
@@ -963,7 +952,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); }
@@ -1037,7 +1026,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; }
@@ -1057,7 +1046,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 {
@@ -1081,7 +1070,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; }
@@ -1161,7 +1150,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); }
 
@@ -1218,7 +1207,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,
@@ -1227,12 +1221,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;
@@ -1284,10 +1274,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. */
@@ -1302,7 +1296,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);
 }
@@ -1322,7 +1316,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"] {
@@ -1347,6 +1341,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;
@@ -1356,6 +1353,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,
@@ -1429,7 +1427,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 {
@@ -1450,6 +1448,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 {
@@ -1464,10 +1464,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; }
@@ -1491,7 +1491,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;
@@ -1499,7 +1499,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);
 }
@@ -1530,7 +1530,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;
 }
@@ -1555,7 +1555,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;
@@ -1586,7 +1586,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; }
@@ -1666,7 +1666,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);
 }
@@ -1718,12 +1718,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;
@@ -1736,7 +1732,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)); }
@@ -1810,7 +1806,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,
@@ -1859,6 +1855,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,
@@ -1977,12 +1975,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; }
@@ -1996,7 +1990,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"] {
@@ -2048,13 +2042,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);
@@ -2065,12 +2055,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;
 }
@@ -2106,7 +2099,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 {
@@ -2126,7 +2119,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; }
@@ -2151,13 +2144,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); }
@@ -2183,7 +2176,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,
@@ -2198,7 +2191,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); }
@@ -2242,7 +2235,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); }
@@ -2256,7 +2249,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); }
@@ -2279,10 +2272,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; }
 
@@ -2307,7 +2300,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); }
@@ -2324,10 +2317,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); }
@@ -2338,8 +2331,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); }
@@ -2361,12 +2354,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); }
 
@@ -2463,7 +2456,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); }
@@ -2564,29 +2557,31 @@ 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. */
@@ -2594,4 +2589,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .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; }
+
 }