@hjmds/react 1.26.1 → 1.27.1

package/dist/styles.css

@@ -13,6 +13,9 @@
   line-height: var(--hjm-type-body-line-height, 1.25rem);
   background: var(--hjm-color-bg);
   color: var(--hjm-color-text);
+  /* Korean wraps between words, not inside them ("표 / 정." at 402, 2026-10-17 review E19). It inherits to every
+     HJM text; overflow-wrap: anywhere on the text rules still breaks unspaced URLs and identifiers. */
+  word-break: keep-all;
 }
 
 /* host="contents": the element only carries the theme variables, dir and data
@@ -266,7 +269,9 @@
    Selection uses content color without an added border (2026-10-10 user request); focus stays separate. */
 .hjm-button[data-selected="true"], .hjm-icon-button[data-selected="true"] { color: var(--hjm-color-content-brand); background: var(--hjm-color-bg); border-color: transparent; }
 .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); }
+/* data-state="disabled" also covers focusable boundaries (aria-disabled, e.g. Carousel previous on the first slide),
+   which looked enabled while Native dimmed them (2026-10-17 review E9). */
+.hjm-button:disabled, .hjm-icon-button:disabled, .hjm-button[data-state="disabled"], .hjm-icon-button[data-state="disabled"] { cursor: not-allowed; opacity: var(--hjm-button-disabled-opacity); }
 /* 라벨은 자르지 않고 두 줄까지 접는다(buttonRecipe.label). 잘린 행동 라벨은 무엇을 하는
    버튼인지 잃고, 무제한 줄바꿈은 하단 CTA 행 같은 남의 레이아웃을 밀어낸다. */
 .hjm-button__label { min-inline-size: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--hjm-button-label-lines, 2); overflow: hidden; }
@@ -412,31 +417,6 @@
 }
 .hjm-password-field__toggle:disabled { cursor: not-allowed; opacity: 0.6; }
 .hjm-password-field__toggle:focus-visible { outline: 2px solid var(--hjm-color-content-brand); outline-offset: -2px; }
-.hjm-password-field__toggle > span:empty {
-  position: relative;
-  inline-size: 18px;
-  block-size: 12px;
-  display: block;
-  border: 2px solid currentColor;
-  border-radius: 70% 20%;
-  transform: rotate(45deg);
-}
-.hjm-password-field__toggle > span:empty::after {
-  content: "";
-  position: absolute;
-  inset: 2px;
-  border-radius: 50%;
-  background: currentColor;
-}
-.hjm-password-field__toggle[data-revealed] > span:empty::before {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  inset-block-start: 4px;
-  inset-inline-start: -3px;
-  inline-size: 22px;
-  border-block-start: 2px solid currentColor;
-}
 .hjm-otp-field__control {
   --hjm-otp-slot-size: var(--hjm-control-min-touch-target);
   --hjm-otp-gap: var(--hjm-space-xs);
@@ -528,7 +508,8 @@
   display: grid;
   grid-template-columns: repeat(var(--hjm-bottom-navigation-columns), minmax(var(--hjm-bottom-navigation-item-min-width), 1fr));
   align-items: start;
-  margin: 0;
+  max-inline-size: var(--hjm-bottom-navigation-content-max-width, none);
+  margin: 0 auto;
   padding: 0;
   list-style: none;
 }
@@ -609,13 +590,14 @@
 }
 .hjm-number-field__input {
   block-size: 100%;
-  padding-inline: var(--hjm-space-md);
+  min-inline-size: 3ch;
+  padding-inline: var(--hjm-space-xxs); /* numberFieldRecipe.sizes.medium.paddingHorizontal */
   text-align: center;
   font-variant-numeric: tabular-nums;
 }
 .hjm-number-field[data-size="large"] .hjm-number-field__input {
   min-block-size: calc(var(--hjm-control-button-large) - 2px);
-  padding-inline: var(--hjm-space-lg);
+  padding-inline: var(--hjm-space-xs);
   font-size: var(--hjm-type-body-large-size);
   line-height: var(--hjm-type-body-large-line-height);
 }
@@ -773,13 +755,15 @@
 .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); }
+/* Agreement and TransferList rows draw the same indicator outside a .hjm-choice, keyed on the indicator itself. */
+.hjm-choice[data-kind="checkbox"] .hjm-choice__indicator, .hjm-choice__indicator[data-kind="checkbox"] { border-radius: var(--hjm-radius-sm); }
 .hjm-choice[data-kind="radio"] .hjm-choice__indicator { border-radius: 50%; }
-.hjm-choice[data-state="checked"] .hjm-choice__indicator, .hjm-choice[data-state="mixed"] .hjm-choice__indicator { border-color: var(--hjm-color-primary); background: var(--hjm-color-primary); }
-.hjm-choice[data-state="checked"] .hjm-choice__indicator::after { content: ""; inline-size: 8px; block-size: 4px; border-inline-start: 2px solid var(--hjm-color-on-primary); border-block-end: 2px solid var(--hjm-color-on-primary); transform: rotate(-45deg); }
-[dir="rtl"] .hjm-choice[data-state="checked"] .hjm-choice__indicator::after { transform: rotate(45deg); }
+.hjm-choice[data-state="checked"] .hjm-choice__indicator, .hjm-choice[data-state="mixed"] .hjm-choice__indicator,
+.hjm-choice__indicator[data-state="checked"], .hjm-choice__indicator[data-state="mixed"] { border-color: var(--hjm-color-primary); background: var(--hjm-color-primary); }
+.hjm-choice[data-state="checked"] .hjm-choice__indicator::after, .hjm-choice__indicator[data-kind="checkbox"][data-state="checked"]::after { content: ""; inline-size: 8px; block-size: 4px; border-inline-start: 2px solid var(--hjm-color-on-primary); border-block-end: 2px solid var(--hjm-color-on-primary); transform: rotate(-45deg); }
+[dir="rtl"] .hjm-choice[data-state="checked"] .hjm-choice__indicator::after, [dir="rtl"] .hjm-choice__indicator[data-kind="checkbox"][data-state="checked"]::after { transform: rotate(45deg); }
 .hjm-choice[data-kind="radio"][data-state="checked"] .hjm-choice__indicator::after { inline-size: 8px; block-size: 8px; border: 0; border-radius: 50%; background: var(--hjm-color-on-primary); transform: none; }
-.hjm-choice[data-state="mixed"] .hjm-choice__indicator::after { content: ""; inline-size: 10px; block-size: 2px; background: var(--hjm-color-on-primary); }
+.hjm-choice[data-state="mixed"] .hjm-choice__indicator::after, .hjm-choice__indicator[data-state="mixed"]::after { content: ""; inline-size: 10px; block-size: 2px; background: var(--hjm-color-on-primary); }
 .hjm-choice__copy { display: grid; gap: var(--hjm-space-xxs); padding-block: 2px; }
 .hjm-choice[data-state="checked"] .hjm-choice__copy > :first-child,
 .hjm-choice[data-state="mixed"] .hjm-choice__copy > :first-child { font-weight: var(--hjm-font-weight-bold); }
@@ -800,7 +784,7 @@
 .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; }
+.hjm-switch { display: inline-flex; align-items: center; gap: var(--hjm-space-sm); min-block-size: var(--hjm-switch-row-min-height); padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
 /* 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; }
@@ -814,6 +798,8 @@
 .hjm-switch__copy { display: flex; flex-direction: column; gap: var(--hjm-space-xxs); min-inline-size: 0; text-align: start; overflow-wrap: anywhere; }
 .hjm-switch__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); }
 .hjm-switch[data-presentation="row"] { display: flex; inline-size: 100%; justify-content: space-between; }
+/* switchRecipe.rowTwoLineMinHeight (= list-row comfortable two-line 68), same as Native for a described switch. */
+.hjm-switch[data-two-line="true"] { min-block-size: var(--hjm-switch-row-two-line-min-height); }
 .hjm-switch[data-presentation="row"] .hjm-switch__copy { order: -1; flex: 1; }
 /* Inherited layout variables reset at nested providers and keep ./selection independent. */
 .hjm-root { --hjm-switch-row-direction: row; --hjm-switch-row-align: center; --hjm-switch-copy-flex: 1; }
@@ -831,7 +817,8 @@
 .hjm-switch[data-state="checked"] .hjm-switch__thumb { transform: translateX(var(--hjm-switch-track-offset)); box-shadow: 0 1px 3px rgb(0 0 0 / 20%); }
 [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; }
+/* margin: 0 resets the UA fieldset 2px inline margin (as the other HJM fieldsets do); it offset the track from the parent edges. */
+.hjm-segmented { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
 /* segmentedControlRecipe (2026-10-06 follow-up): track padding/gap spacing.xxs 4, radius lg, 1px border; item radius md,
    medium 44 · padding md, small 36 · padding sm with a 4px vertical hit slop. Web had drawn a 2px track with radius md,
    no small size, and a 1px selected ring; Native already read the recipe. */
@@ -877,9 +864,9 @@
 .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-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 { min-block-size: 24px; padding: 2px var(--hjm-space-xs); border: 1px solid var(--hjm-color-border); 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; padding-inline: var(--hjm-space-xxs); font-size: var(--hjm-type-caption-size); } /* badgeRecipe.sizes.small.paddingHorizontal xxs 4 (2026-10-06; Web had kept medium's 8) */
-.hjm-badge[data-tone="strong"] { color: var(--hjm-color-bg); background: var(--hjm-color-text); }
+.hjm-badge[data-tone="strong"] { color: var(--hjm-color-bg); background: var(--hjm-color-text); border-color: transparent; } /* neutral/brand plates are canvas-white and need badgeRecipe's border to stay visible (2026-10-17) */
 .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: 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); }
@@ -893,7 +880,7 @@
 .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-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 { min-block-size: 20px; padding-inline: var(--hjm-space-xxs); border: 1px solid var(--hjm-color-border); 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); }
@@ -917,7 +904,10 @@
 
 .hjm-card { overflow: hidden; }
 .hjm-card__media > * { display: block; inline-size: 100%; }
-.hjm-card__body { display: grid; gap: var(--hjm-space-xs); padding: var(--hjm-space-md); }
+/* The implicit auto column grew to the min-content of slotted children (e.g. a SegmentedControl with max-content items),
+   pushing content past the card padding at narrow widths (2026-10-17 STEA schedule card at 402). minmax(0, 1fr) keeps every
+   slot inside the padded body so scroll/wrap rules of the child apply. */
+.hjm-card__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hjm-space-xs); padding: var(--hjm-space-md); }
 .hjm-card__header { display: flex; align-items: flex-start; gap: var(--hjm-space-sm); min-inline-size: 0; }
 .hjm-card__leading { flex: 0 0 auto; display: inline-grid; place-items: center; line-height: 1; }
 .hjm-card__copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xs); }
@@ -944,9 +934,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-list-row__leading { display: flex; align-items: center; justify-content: center; inline-size: var(--hjm-list-row-leading-size); block-size: var(--hjm-list-row-leading-size); overflow: hidden; }
 .hjm-list-row__leading[data-shape="circle"] { border-radius: var(--hjm-radius-full); }
 .hjm-list-row__content { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--hjm-space-xxs); }
-.hjm-list-row__title { color: var(--hjm-color-text-body); font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
+/* listRowRecipe title bodyLarge / description body (2026-10-17: Web inherited 14 for both while Native used the recipe). */
+.hjm-list-row__title { color: var(--hjm-color-text-body); font-size: var(--hjm-type-body-large-size); line-height: var(--hjm-type-body-large-line-height); font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
 .hjm-list-row[data-tone="danger"] .hjm-list-row__title { color: var(--hjm-color-danger); }
 .hjm-list-row__description, .hjm-list-row__trailing { color: var(--hjm-color-text-muted); overflow-wrap: anywhere; }
+.hjm-list-row__description { font-size: var(--hjm-type-body-size); line-height: var(--hjm-type-body-line-height); }
 
 .hjm-section { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; overflow-wrap: anywhere; }
 .hjm-section__header { display: flex; align-items: center; justify-content: space-between; gap: var(--hjm-space-sm); min-inline-size: 0; }
@@ -957,17 +949,19 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-section__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); overflow-wrap: anywhere; }
 .hjm-section__action { flex: 0 0 auto; }
 .hjm-section__content { min-inline-size: 0; }
-/* Stack below breakpoint.medium (600), the shared compact/medium edge; 640 had been a Web-only number. */
-@media (max-width: 599.98px) {
-  .hjm-section__header { align-items: stretch; flex-direction: column; }
-}
+/* The header stacks only at large text (provider data-large-text = largeTextThreshold 1.6), the same trigger as Native
+   Section (textScale >= 1.6). Until 2026-10-17 Web stacked below 600px, so every phone-width Web Section dropped and
+   stretched its action under the title while Native kept one row (screen review S5#3). */
+.hjm-root[data-large-text="true"] .hjm-section__header { align-items: stretch; flex-direction: column; }
 
 /* chipRecipe.sizes (2026-10-06 follow-up): medium 44 · padding md 16 · gap xs 8, small 36 · padding sm 12 · gap xxs 4 with a
    4px vertical hit slop. Web had drawn padding 12/8 and gap 8 for both sizes. */
 /* ActivityChip (2026-10-10): one 44px status pill in a header slot. Colours are the theme roles that
    activityChipRecipe.emphasis references (surface/text/border, primary/onPrimary); the component sets the
    recipe-only sizes as custom properties so theme.ts does not pull this opt-in contract into every graph. */
-.hjm-activity-chip { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-block-size: var(--hjm-control-min-touch-target); max-inline-size: var(--hjm-activity-chip-max-width); min-inline-size: 0; padding-block: 0; padding-inline: var(--hjm-space-xxs) var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: 999px; color: var(--hjm-color-text); background: var(--hjm-color-surface); font: inherit; font-size: var(--hjm-type-label-size, 0.75rem); line-height: var(--hjm-type-label-line-height, 1.5); font-weight: var(--hjm-font-weight-bold); cursor: pointer; }
+/* fit-content: a column Stack stretched the pill to its max width with empty space after the label; Native sizes it
+   to its content (2026-10-17 review F N13). Unlike align-self it keeps vertical centering in a TopBar row. */
+.hjm-activity-chip { display: inline-flex; align-items: center; gap: var(--hjm-space-xxs); min-block-size: var(--hjm-control-min-touch-target); inline-size: fit-content; max-inline-size: var(--hjm-activity-chip-max-width); min-inline-size: 0; padding-block: 0; padding-inline: var(--hjm-space-xxs) var(--hjm-space-sm); border: 1px solid var(--hjm-color-border); border-radius: 999px; color: var(--hjm-color-text); background: var(--hjm-color-surface); font: inherit; font-size: var(--hjm-type-label-size, 0.75rem); line-height: var(--hjm-type-label-line-height, 1.5); font-weight: var(--hjm-font-weight-bold); cursor: pointer; }
 /* Without media the pill keeps the symmetric label inset; the media hugs the start edge like an avatar chip. */
 .hjm-activity-chip:not([data-media]) { padding-inline-start: var(--hjm-space-sm); }
 .hjm-activity-chip[data-emphasis="emphasis"] { border-color: var(--hjm-color-primary); color: var(--hjm-color-on-primary); background: var(--hjm-color-primary); }
@@ -992,7 +986,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Indent only the divider: moving the row shifted every title after the first
    and narrowed its text column in the notification-settings composition. */
 .hjm-list[data-separator="indented"] > .hjm-list__item + .hjm-list__item { position: relative; }
-.hjm-list[data-separator="indented"] > .hjm-list__item + .hjm-list__item::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: calc(40px + var(--hjm-space-sm)) 0; border-block-start: 1px solid var(--hjm-color-border); pointer-events: none; } /* listRecipe.separators.indented.insetStart = leading 40 + sm 12 = 52, as Native (2026-10-06; Web had 24) */
+.hjm-list[data-separator="indented"] > .hjm-list__item + .hjm-list__item::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: calc(var(--hjm-space-xs) + 40px + var(--hjm-space-sm)) 0; border-block-start: 1px solid var(--hjm-color-border); pointer-events: none; } /* listRecipe.separators.indented.insetStart = row padding 8 + leading 40 + sm 12 = 60, as Native (2026-10-17) */
 
 /* statisticRecipe.density (2026-10-06 follow-up): line gap comfortable xs 8 · compact xxs 4, surface padding md 16 · sm 12,
    group gap xs 8. Web had drawn 4/2, a fixed 16 and 12, Native read the recipe. */
@@ -1032,28 +1026,38 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-notice__title, .hjm-notice__description { overflow-wrap: anywhere; }
 
 /* emptyStateRecipe.density.regular paddingVertical xxxl 40 (2026-10-06; Web had xxl 32, Native read the recipe). */
-.hjm-empty-state { display: grid; justify-items: center; gap: var(--hjm-space-xs); padding: var(--hjm-space-xxxl) var(--hjm-space-xl); color: var(--hjm-color-text-muted); text-align: center; }
-.hjm-empty-state[data-density="compact"] { padding-block: var(--hjm-space-xl); }
+/* Like Native, a regular empty state fills the rest of a flex host and centers in it; compact (cards, sheets) stays content-high. */
+.hjm-empty-state { display: grid; flex-grow: 1; align-content: center; justify-items: center; gap: var(--hjm-space-xs); padding: var(--hjm-space-xxxl) var(--hjm-space-xl); color: var(--hjm-color-text-muted); text-align: center; }
+.hjm-empty-state[data-density="compact"] { flex-grow: 0; padding-block: var(--hjm-space-xl); }
 .hjm-empty-state__title { color: var(--hjm-color-text); }
 .hjm-result { display: grid; justify-items: center; gap: var(--hjm-space-sm); padding: var(--hjm-space-xxxl) var(--hjm-space-xl); text-align: center; }
 .hjm-result__icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--hjm-radius-full); font-size: 1.5rem; font-weight: var(--hjm-font-weight-bold); }
-.hjm-result__icon:empty::before { content: "i"; }
 .hjm-result[data-status="success"] .hjm-result__icon { color: var(--hjm-accent-success); background: color-mix(in srgb, var(--hjm-accent-success) 12%, transparent); }
-.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: 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); }
 .hjm-progress { display: grid; gap: var(--hjm-space-xs); }
 .hjm-progress__copy { display: flex; justify-content: space-between; gap: var(--hjm-space-md); color: var(--hjm-color-text-body); }
-.hjm-progress__native { inline-size: 100%; block-size: 8px; border: 0; border-radius: var(--hjm-radius-full); overflow: hidden; accent-color: var(--hjm-color-content-brand); }
+/*
+  progressRecipe paints a tone fill on the sunken track. Authored box styles drop Chromium/WebKit out of native
+  appearance, which then ignores accent-color and paints its UA green bar on grey (2026-10-17 review), so the bar opts
+  out of native appearance explicitly and paints both parts. The track uses the same surface as the circular ring.
+*/
+.hjm-progress { --hjm-progress-fill: var(--hjm-color-content-brand); --hjm-progress-track: var(--hjm-color-surface-alt); }
+.hjm-progress[data-tone="success"] { --hjm-progress-fill: var(--hjm-accent-success); }
+.hjm-progress[data-tone="warning"] { --hjm-progress-fill: var(--hjm-accent-warning); }
+.hjm-progress[data-tone="danger"] { --hjm-progress-fill: var(--hjm-color-danger); }
+.hjm-progress__native { -webkit-appearance: none; appearance: none; inline-size: 100%; block-size: 8px; border: 0; border-radius: var(--hjm-radius-full); overflow: hidden; background: var(--hjm-progress-track); color: var(--hjm-progress-fill); }
+.hjm-progress__native::-webkit-progress-bar { border-radius: inherit; background: var(--hjm-progress-track); }
+.hjm-progress__native::-webkit-progress-value { border-radius: inherit; background: var(--hjm-progress-fill); }
+.hjm-progress__native::-moz-progress-bar { border-radius: inherit; background: var(--hjm-progress-fill); }
+/* Without a value there is no progress-value box; show the same fixed 30% start-edge segment as the Native renderer. */
+.hjm-progress[data-state="indeterminate"] .hjm-progress__native { background: linear-gradient(to right, var(--hjm-progress-fill) 0 30%, var(--hjm-progress-track) 30%); }
+.hjm-progress[data-state="indeterminate"] .hjm-progress__native:dir(rtl) { background: linear-gradient(to left, var(--hjm-progress-fill) 0 30%, var(--hjm-progress-track) 30%); }
 .hjm-progress[data-size="small"] .hjm-progress__native { block-size: 4px; }
 .hjm-progress[data-size="large"] .hjm-progress__native { block-size: 12px; }
-.hjm-progress[data-tone="success"] .hjm-progress__native { accent-color: var(--hjm-accent-success); }
-.hjm-progress[data-tone="warning"] .hjm-progress__native { accent-color: var(--hjm-accent-warning); }
-.hjm-progress[data-tone="danger"] .hjm-progress__native { accent-color: var(--hjm-color-danger); }
 /*
   The circular shape hides the native bar and draws the same value as a conic
   sweep. The element stays a <progress>, so the value, the indeterminate case
@@ -1070,13 +1074,10 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   inline-size: var(--hjm-progress-diameter);
   block-size: var(--hjm-progress-diameter);
   border-radius: var(--hjm-radius-full);
-  background: conic-gradient(var(--hjm-progress-ring-color, var(--hjm-color-content-brand)) var(--hjm-progress-sweep), var(--hjm-color-surface-alt) 0);
+  background: conic-gradient(var(--hjm-progress-fill) var(--hjm-progress-sweep), var(--hjm-progress-track) 0);
   -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--hjm-progress-stroke)), #000 calc(100% - var(--hjm-progress-stroke)));
   mask: radial-gradient(farthest-side, transparent calc(100% - var(--hjm-progress-stroke)), #000 calc(100% - var(--hjm-progress-stroke)));
 }
-.hjm-progress[data-tone="success"] .hjm-progress__ring { --hjm-progress-ring-color: var(--hjm-accent-success); }
-.hjm-progress[data-tone="warning"] .hjm-progress__ring { --hjm-progress-ring-color: var(--hjm-accent-warning); }
-.hjm-progress[data-tone="danger"] .hjm-progress__ring { --hjm-progress-ring-color: var(--hjm-color-danger); }
 .hjm-progress[data-state="indeterminate"][data-shape="circular"] .hjm-progress__ring { animation: hjm-provider-spin 1200ms linear infinite; }
 @media (prefers-reduced-motion: reduce) {
   .hjm-progress[data-state="indeterminate"][data-shape="circular"] .hjm-progress__ring { animation: none; }
@@ -1260,12 +1261,17 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-line-score__table th.hjm-line-score__team { padding-inline: var(--hjm-space-sm); text-align: start; color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); }
 .hjm-line-score__team-content { display: inline-flex; align-items: center; gap: var(--hjm-space-xs); }
 .hjm-line-score__table tr[data-leader] th.hjm-line-score__team { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
+.hjm-line-score { --hjm-line-score-total-width: 30px; scroll-padding-inline-end: calc(var(--hjm-line-score-total-width) * var(--hjm-line-score-total-count, 0)); }
+.hjm-line-score__table .hjm-line-score__team, .hjm-line-score__table .hjm-line-score__total { position: sticky; z-index: 1; background: var(--hjm-color-surface); }
+.hjm-line-score__table .hjm-line-score__team { inset-inline-start: 0; }
 .hjm-line-score__table td.hjm-line-score__period { min-inline-size: 26px; color: var(--hjm-color-text-sub); }
 .hjm-line-score__table td[data-scored] { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
 .hjm-line-score__table [data-current] { background: var(--hjm-table-family-selected); }
 .hjm-line-score__table th[data-current] { color: var(--hjm-color-content-brand); }
-.hjm-line-score__total { min-inline-size: 30px; color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); }
-.hjm-line-score__total-edge { border-inline-start: 1px solid var(--hjm-color-border); }
+.hjm-line-score__total { inline-size: var(--hjm-line-score-total-width); min-inline-size: var(--hjm-line-score-total-width); color: var(--hjm-color-text-muted); font-weight: var(--hjm-font-weight-semibold); }
+/* A collapsed-table border stays with the table, not the pinned cell, so the edge is an inset shadow. */
+.hjm-line-score__total-edge { box-shadow: inset 1px 0 0 var(--hjm-color-border); }
+.hjm-line-score__total-edge:dir(rtl) { box-shadow: inset -1px 0 0 var(--hjm-color-border); }
 .hjm-line-score__table tbody .hjm-line-score__total-edge { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-bold); }
 .hjm-matrix-table__table th, .hjm-matrix-table__table td { padding: var(--hjm-space-xs); text-align: center; white-space: nowrap; border-block-start: 1px solid var(--hjm-color-border); }
 .hjm-matrix-table__table thead th { border-block-start: 0; color: var(--hjm-color-text-muted); font-size: var(--hjm-type-label-size); font-weight: var(--hjm-font-weight-bold); }
@@ -1423,22 +1429,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   border-block-end: 1px solid var(--hjm-color-border);
 }
 .hjm-transfer-list__title { font-weight: var(--hjm-font-weight-bold); overflow-wrap: anywhere; }
-.hjm-transfer-list__select-all,
-.hjm-transfer-list__mark {
-  display: grid;
-  place-items: center;
-  flex: 0 0 auto;
-  inline-size: var(--hjm-space-md);
-  block-size: var(--hjm-space-md);
-  border: 1px solid var(--hjm-color-border-control);
-  border-radius: var(--hjm-radius-sm);
-  background: transparent;
-  color: var(--hjm-color-on-primary);
-  font-size: var(--hjm-type-label-size);
-}
-.hjm-transfer-list__select-all[aria-checked="true"],
-.hjm-transfer-list__select-all[aria-checked="mixed"],
-.hjm-transfer-list__mark[data-checked] { border-color: var(--hjm-color-primary); background: var(--hjm-color-primary); }
+.hjm-transfer-list__select-all { display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; background: transparent; }
+/* These rows center the indicator, so drop the 2px top offset Checkbox uses to sit on its first text line. */
+.hjm-transfer-list__select-all > .hjm-choice__indicator,
+.hjm-transfer-list__option > .hjm-choice__indicator,
+.hjm-agreement .hjm-choice__indicator { margin-block-start: 0; }
 .hjm-transfer-list__options { display: flex; flex-direction: column; padding: var(--hjm-space-xxs); }
 .hjm-transfer-list__option {
   /* transferListRecipe.item = collectionItemContract: padding/gap sm 12, radius md (2026-10-06; Web had 8 and radius sm, Native 12). */
@@ -1461,7 +1456,14 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-transfer-list__empty:focus-visible,
 .hjm-transfer-list__select-all:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: -2px; }
 .hjm-transfer-list__empty { margin: 0; padding: var(--hjm-space-md) var(--hjm-space-sm); color: var(--hjm-color-text-muted); text-align: center; }
-.hjm-transfer-list__actions { display: flex; flex-direction: column; gap: var(--hjm-space-sm); /* transferListRecipe.moveControls.gap sm 12, as Native */ padding-block-start: var(--hjm-space-xl); }
+.hjm-transfer-list__actions { display: flex; flex-direction: column; gap: var(--hjm-space-xs); /* transferListRecipe.moveControls.gap xs 8 (stacked buttons), as Native */ padding-block-start: var(--hjm-space-xl); }
+.hjm-transfer-list__move-icon[data-orientation="stacked"] { display: none; }
+/* Stacked panels: the buttons follow the source panel directly and point down/up at the panel they move to. */
+@media (max-width: 30rem) {
+  .hjm-transfer-list__actions { padding-block-start: 0; }
+  .hjm-transfer-list__move-icon[data-orientation="inline"] { display: none; }
+  .hjm-transfer-list__move-icon[data-orientation="stacked"] { display: inline-block; }
+}
 
 /* AuthProviderButton ------------------------------------------------------ */
 /* Provider guideline colors cannot follow the theme without failing provider review.
@@ -1945,7 +1947,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   flex-wrap: wrap;
   align-items: center;
   gap: var(--hjm-space-xs);
-  padding-inline: var(--hjm-space-sm);
+  padding-inline: var(--hjm-space-md); /* agreementRecipe.itemLayout.paddingHorizontal: marks align with the all row */
 }
 /* agreementRecipe.itemLayout.labelBasis: details wrap before consent copy is
    squeezed into vertical text at 2x scale (Utilverse adoption QA, 2026-10-07). */
@@ -1976,23 +1978,6 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
   font-size: var(--hjm-type-label-size);
   text-decoration: underline;
 }
-.hjm-agreement__mark {
-  display: grid;
-  place-items: center;
-  flex: 0 0 auto;
-  inline-size: var(--hjm-space-md);
-  block-size: var(--hjm-space-md);
-  border: 1px solid var(--hjm-color-border-control);
-  border-radius: var(--hjm-radius-sm);
-  color: var(--hjm-color-on-primary);
-  font-size: var(--hjm-type-label-size);
-}
-/* A mark is fixed artwork, not font-scaled copy. The former text glyph escaped
-   the 16px frame when the provider doubled label typography. */
-.hjm-agreement__mark[data-state="true"] .hjm-agreement__ink { inline-size: 8px; block-size: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
-.hjm-agreement__mark[data-state="mixed"] .hjm-agreement__ink { inline-size: 10px; block-size: 2px; background: currentColor; }
-.hjm-agreement__mark[data-state="true"],
-.hjm-agreement__mark[data-state="mixed"] { border-color: var(--hjm-color-primary); background: var(--hjm-color-primary); }
 .hjm-agreement__all:focus-visible,
 .hjm-agreement__toggle:focus-visible,
 .hjm-agreement__detail:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
@@ -2248,6 +2233,10 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-sheet[data-placement="bottom"][data-detent="full"] { max-block-size: 100%; }
 /* Detent handle: a control, so it carries the shared minimum target. */
 .hjm-sheet__handle-row { display: flex; justify-content: center; flex: 0 0 auto; }
+/* Drag-to-dismiss zone (handle + header) of bottom sheets; vertical drags must not scroll the page. */
+.hjm-sheet__drag { flex: 0 0 auto; }
+.hjm-sheet__drag[data-swipe] { touch-action: none; cursor: grab; }
+.hjm-sheet[data-dragging] { transition: none !important; }
 .hjm-sheet__handle {
   display: grid;
   place-items: center;
@@ -2616,7 +2605,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 
 /* Expansion renderers --------------------------------------------------- */
 .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__step { min-inline-size: 0; display: grid; align-content: start; 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-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); }
@@ -2625,7 +2614,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .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); }
-.hjm-steps__label { color: var(--hjm-color-text); font-weight: var(--hjm-font-weight-semibold); overflow-wrap: anywhere; }
+.hjm-steps__label { color: var(--hjm-color-text); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); font-weight: var(--hjm-font-weight-semibold); overflow-wrap: anywhere; }
 .hjm-steps__step[data-status="pending"] .hjm-steps__label { color: var(--hjm-color-text-muted); }
 .hjm-steps__step[data-status="error"] .hjm-steps__label { color: var(--hjm-color-danger); }
 .hjm-steps__description { color: var(--hjm-color-text-muted); font-size: var(--hjm-type-caption-size); overflow-wrap: anywhere; }
@@ -2650,13 +2639,12 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-upload-item .hjm-progress__copy > span:last-child:not(:first-child) { flex: 1 1 10rem; overflow-wrap: anywhere; text-align: end; }
 .hjm-upload-item[data-status="success"] .hjm-upload-item__status { color: var(--hjm-accent-success); }
 .hjm-upload-item[data-status="error"] .hjm-upload-item__status { color: var(--hjm-color-danger); }
-.hjm-upload-item__action { flex: 0 0 auto; min-inline-size: var(--hjm-control-min-touch-target); min-block-size: var(--hjm-control-min-touch-target); margin-inline-start: auto; padding-inline: var(--hjm-space-sm); border: 0; color: var(--hjm-color-content-brand); background: transparent; font: inherit; font-weight: var(--hjm-font-weight-bold); white-space: nowrap; word-break: keep-all; cursor: pointer; }
-.hjm-upload-item__action[data-action="cancel"] { color: var(--hjm-color-danger); }
+.hjm-upload-item__action { flex: 0 0 auto; margin-inline-start: auto; }
 
 .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-bg); 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-control); border-radius: var(--hjm-radius-md); color: var(--hjm-color-text-body); background: var(--hjm-color-bg); font: inherit; text-align: start; cursor: pointer; }
 /* datePickerRecipe.sizes.large.minHeight is control.buttonHeight.large (52), as Select/NumberField large. Web drew 56 until 2026-10-06. */
 .hjm-date-picker[data-size="large"] .hjm-date-picker__trigger { min-block-size: var(--hjm-control-button-large); padding-inline-start: var(--hjm-space-lg); }
 .hjm-date-picker[data-invalid] .hjm-date-picker__trigger { border-color: var(--hjm-color-danger); }
@@ -2664,7 +2652,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
    looked enabled on both platforms. datePickerRecipe has no amount, so the field default applies. */
 .hjm-date-picker[data-disabled] :is(.hjm-date-picker__label, .hjm-date-picker__anchor) { opacity: var(--hjm-field-disabled-opacity); }
 .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__clear { position: absolute; inset-inline-end: 0; }
 .hjm-date-picker__popover { position: absolute; z-index: var(--hjm-layer-dropdown); 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: var(--hjm-shadow-floating); }
 .hjm-date-picker__description { color: var(--hjm-color-text-muted); }
 .hjm-date-picker__error { color: var(--hjm-color-danger); }
@@ -2675,10 +2663,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-toast-viewport[data-placement^="bottom"] { inset-block-end: calc(max(var(--hjm-space-md), env(safe-area-inset-bottom)) + var(--hjm-toast-bottom-offset, 0px)); flex-direction: column-reverse; }
 .hjm-toast-viewport[data-placement$="-start"] { margin-inline-start: 0; }
 .hjm-toast-viewport[data-placement$="-end"] { margin-inline-end: 0; }
-/* Cards stay narrow on desktop too; keep close/action rows explicit (docs/toast.md).
+/* Cards stay narrow on desktop too; keep close/action rows explicit (docs/toast.md). The card owns its width cap so a
+   controlled Toast outside the viewport keeps it too (it stretched to 1200px in the layout story, 2026-10-17 review).
    1.10.0 layout: [tone badge][title + description][close] / action pill on its own row, end-aligned.
    The 2px tone strip is retired — the tinted badge carries tone (toastRecipe.toneMark width 0). */
-.hjm-toast { position: relative; min-inline-size: 0; min-block-size: 3.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--hjm-space-sm); row-gap: var(--hjm-space-xs); padding: var(--hjm-space-sm) var(--hjm-space-xs) var(--hjm-space-sm) var(--hjm-space-md); overflow: hidden; border: var(--hjm-toast-border-width) solid var(--hjm-toast-border); border-radius: var(--hjm-toast-radius); color: var(--hjm-color-text); background: var(--hjm-toast-background); box-shadow: var(--hjm-toast-shadow); pointer-events: auto; }
+.hjm-toast { position: relative; min-inline-size: 0; max-inline-size: min(26.25rem, 100%); min-block-size: 3.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: var(--hjm-space-sm); row-gap: var(--hjm-space-xs); padding: var(--hjm-space-sm) var(--hjm-space-xs) var(--hjm-space-sm) var(--hjm-space-md); overflow: hidden; border: var(--hjm-toast-border-width) solid var(--hjm-toast-border); border-radius: var(--hjm-toast-radius); color: var(--hjm-color-text); background: var(--hjm-toast-background); box-shadow: var(--hjm-toast-shadow); pointer-events: auto; }
 /* Whole-card activation is a sibling surface; explicit controls stay above it. */
 .hjm-toast__press { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; padding: 0; background: transparent; cursor: pointer; }
 .hjm-toast__press:focus-visible { outline: 2px solid var(--hjm-color-content-brand); outline-offset: -2px; }
@@ -2721,7 +2710,6 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-toast__action:focus-visible,
 .hjm-toast__close:focus-visible,
 .hjm-file-picker__dropzone button:focus-visible,
-.hjm-upload-item__action:focus-visible,
 .hjm-date-picker__trigger:focus-visible,
 .hjm-date-picker__clear:focus-visible,
 .hjm-table-scroll:focus-visible {
@@ -2785,8 +2773,13 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .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-bg); box-shadow: var(--hjm-bottom-cta-shadow, none); }
 .hjm-bottom-cta[data-position="sticky"] { position: sticky; inset-block-end: 0; z-index: var(--hjm-layer-sticky); }
+/* Inside ScreenLayout's footer the footer owns border, padding, surface and safe area; BottomCTA keeps only its copy,
+   actions and an explicit safeAreaBottom (2026-10-17: the doubled bar inset the buttons twice). */
+.hjm-bottom-cta[data-placement="screen-footer"] { position: static; min-block-size: 0; padding: 0 0 var(--hjm-bottom-cta-safe-area); border: 0; background: none; box-shadow: none; }
 .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); }
+/* bottomCtaRecipe.contentMaxWidth: the surface spans the viewport, its copy and actions stop at the reading width. */
+.hjm-bottom-cta__description, .hjm-bottom-cta__actions { box-sizing: border-box; inline-size: 100%; max-inline-size: var(--hjm-bottom-cta-content-max-width); margin-inline: auto; }
 .hjm-bottom-cta__actions > div { flex: 1 1 calc(var(--hjm-control-min-touch-target) * 3); min-inline-size: 0; }
 .hjm-bottom-cta__actions .hjm-button { inline-size: 100%; block-size: 100%; }
 .hjm-bottom-cta[data-large-text="true"] .hjm-bottom-cta__actions { flex-direction: column-reverse; }
@@ -2799,14 +2792,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-carousel__slide input { max-inline-size: 100%; }
 .hjm-carousel__rotation { justify-self: start; }
 .hjm-carousel__controls, .hjm-carousel__dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--hjm-space-xs); }
+.hjm-carousel__controls { flex-wrap: nowrap; } .hjm-carousel__dots { flex-shrink: 1; min-inline-size: 0; }
 .hjm-carousel__dot { display: grid; place-items: center; min-inline-size: var(--hjm-control-min-touch-target); min-block-size: var(--hjm-control-min-touch-target); border: 0; border-radius: var(--hjm-radius-full); background: transparent; cursor: pointer; }
-.hjm-carousel__dot > span { inline-size: var(--hjm-space-xs); block-size: var(--hjm-space-xs); border-radius: var(--hjm-radius-full); background: var(--hjm-color-border); }
+.hjm-carousel__dot > span { inline-size: var(--hjm-space-xs); block-size: var(--hjm-space-xs); border-radius: var(--hjm-radius-full); background: var(--hjm-color-text-weak); } /* carouselRecipe.dot.color.inactive (border.strong), as Native */
 .hjm-carousel__dot[data-current="true"] > span { background: var(--hjm-color-content-brand); }
 .hjm-carousel__dot:focus-visible { outline: 2px solid var(--hjm-color-content-brand); outline-offset: 2px; }
-/* Keep previous/next paired when scaled text would wrap only one to a new row. */
-.hjm-carousel[data-large-text="true"] .hjm-carousel__controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
-.hjm-carousel[data-large-text="true"] .hjm-carousel__dots { grid-column: 1 / -1; grid-row: 1; }
-.hjm-carousel[data-large-text="true"] .hjm-carousel__controls > .hjm-button { grid-row: 2; }
 
 /* The viewport action follows the content in DOM order. Its measured clearance
    belongs on the scroll content, not on the fixed button (docs/floating-action-button.md). */
@@ -2821,7 +2811,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 
 /* Keep the seven-column spatial model and minimum targets; narrow hosts scroll
    the grid instead of shrinking dates or wrapping a week onto another row. */
-.hjm-calendar { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; }
+.hjm-calendar { display: grid; gap: var(--hjm-space-xs); min-inline-size: 0; max-inline-size: var(--hjm-calendar-max-width); }
 .hjm-calendar__header { display: grid; grid-template-columns: var(--hjm-control-min-touch-target) minmax(0, 1fr) var(--hjm-control-min-touch-target); align-items: center; gap: var(--hjm-space-xs); }
 .hjm-calendar__header strong { text-align: center; overflow-wrap: anywhere; font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); font-weight: var(--hjm-font-weight-bold); }
 .hjm-calendar__header button { min-block-size: var(--hjm-control-min-touch-target); border: 0; border-radius: var(--hjm-radius-full); background: transparent; color: var(--hjm-color-text-body); font: inherit; cursor: pointer; }
@@ -2836,8 +2826,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-calendar__day[data-disabled] { opacity: var(--hjm-calendar-disabled-opacity); cursor: not-allowed; }
 .hjm-calendar__content { max-inline-size: 100%; min-block-size: var(--hjm-type-label-line-height); font-size: var(--hjm-type-label-size); line-height: var(--hjm-type-label-line-height); overflow-wrap: anywhere; }
 .hjm-calendar__header button:focus-visible, .hjm-calendar__day:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
-.hjm-date-picker__calendar-close { display: block; margin-inline-start: auto; inline-size: var(--hjm-control-min-touch-target); min-block-size: var(--hjm-control-min-touch-target); border: 0; border-radius: var(--hjm-radius-full); background: transparent; color: inherit; font: inherit; cursor: pointer; }
-.hjm-date-picker__calendar-close:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
+.hjm-date-picker__calendar-close { display: flex; margin-inline-start: auto; }
 
 /* Reserve a common annotation row; dates with a dot must not sit above their neighbours. */
 .hjm-calendar__day-label { display: grid; place-items: center; inline-size: var(--hjm-calendar-indicator-size, var(--hjm-calendar-cell-size)); min-block-size: var(--hjm-calendar-indicator-size, var(--hjm-calendar-cell-size)); border: 1px solid transparent; border-radius: var(--hjm-radius-full); }
@@ -2878,7 +2867,7 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-collapsible__trigger:focus-visible { outline: 2px solid var(--hjm-color-focus); outline-offset: 2px; }
 /* The marker is decoration: aria-expanded carries the state, so it only needs
    to keep one box while the glyph changes. */
-.hjm-collapsible__marker { flex: 0 0 auto; inline-size: 1em; color: var(--hjm-color-text-muted); text-align: center; }
+.hjm-collapsible__marker { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--hjm-color-text-muted); }
 .hjm-collapsible__content { min-inline-size: 0; overflow-wrap: anywhere; }
 
 /* Both surfaces reuse the menu's floating look; only the anchor differs. */
@@ -2888,6 +2877,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .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; }
 /* 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; }
+/* Leading icon slot is 24 wide with the item gap (sm 12) before the label, as Native ContextMenu; the label takes the rest so a trailing shortcut stays at the end. */
+.hjm-context-menu__icon { flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; }
+.hjm-context-menu__label { flex: 1 1 auto; }
 .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; }
@@ -2911,13 +2903,20 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .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; }
+/* The accessory hangs off the outer end/bottom corner, assetRecipe.accessory.offset outside, as Native and the usage
+   guide; a physical translate(25%) moved it into the frame in RTL (2026-10-17 review E22). */
+.hjm-asset__accessory { position: absolute; inset-block-end: calc(-1 * var(--hjm-asset-accessory-offset)); inset-inline-end: calc(-1 * var(--hjm-asset-accessory-offset)); 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; }
+/* Closed, the morph surface is the HJM secondary button (same frame as the reduced-motion/RTL Menu trigger).
+   Bloom animates box-shadow inline for both states, so the closed state needs !important to drop it. */
+.hjm-menu-morph__measure { position: absolute; visibility: hidden; pointer-events: none; inset-block-start: 0; inset-inline-start: 0; }
+.hjm-menu-morph__surface { color: var(--hjm-color-text); background: var(--hjm-color-bg); border: 1px solid var(--hjm-color-border-control); }
+.hjm-menu-morph[data-open="false"] .hjm-menu-morph__surface { box-shadow: none !important; }
+.hjm-menu-morph__trigger { gap: var(--hjm-space-xs); padding-inline: var(--hjm-space-md); font-family: var(--hjm-font-family-ui, inherit); font-size: var(--hjm-type-body-size); font-weight: var(--hjm-font-weight-semibold); line-height: var(--hjm-type-body-line-height); }
 .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); }
@@ -3027,6 +3026,11 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-screen__heading > * { margin: 0; }
 .hjm-screen__notice { padding-inline: var(--hjm-screen-padding); flex: 0 0 auto; }
 .hjm-screen__body { flex: 1 1 0%; min-block-size: 0; min-inline-size: 0; padding: var(--hjm-screen-padding); overflow-wrap: anywhere; }
+/* contentInset="body-edge": header, notice and footer keep the gutter; full-width list rows own their inline inset
+   (review S5#9: body 16 + row 16 put DM avatars ~32 from the edge). "none" keeps its host-owns-all meaning. */
+.hjm-screen[data-content-inset="body-edge"] > .hjm-screen__body { padding-inline: 0; }
+/* contentInset="none" hands every inset to the host: no footer rule, as on Native (BottomCTA then draws its own bar). */
+.hjm-screen[data-content-inset="none"] > .hjm-screen__footer { border-block-start: 0; }
 .hjm-screen__body[data-scroll="screen"] { overflow-y: auto; }
 .hjm-screen__body[data-scroll="content"] { display: flex; flex-direction: column; overflow: hidden; }
 .hjm-screen__body[data-content-alignment="center"] { display: flex; flex-direction: column; }
@@ -3055,20 +3059,103 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-message-composer__row { display: flex; gap: var(--hjm-message-composer-gap, var(--hjm-space-sm)); align-items: flex-end; }
 .hjm-message-composer__row > .hjm-field { flex: 1; min-inline-size: 0; }
 .hjm-message-composer__row > .hjm-button { flex-shrink: 0; }
-.hjm-chat-message { display: flex; align-items: flex-start; gap: var(--hjm-space-xs); }
+/* 2026-10-16 timeline standard (measured KakaoTalk iOS chat room, chatMessageRecipe): filled borderless
+   bubbles, one avatar/author/tip per run, time beside the run's last bubble. */
+.hjm-chat-message { display: flex; align-items: flex-start; gap: 8px; }
 .hjm-chat-message[data-direction="outgoing"] { flex-direction: row-reverse; }
+.hjm-chat-message__avatar { flex: 0 0 var(--hjm-chat-avatar-size); inline-size: var(--hjm-chat-avatar-size); display: flex; justify-content: center; }
 /* A visible opposite edge distinguishes authorship even without color; long copy still wraps. */
 .hjm-chat-message__content { max-inline-size: var(--hjm-message-max-width); min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--hjm-space-xxs); }
 .hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__content { align-items: flex-end; }
-.hjm-chat-message__bubble { border: var(--hjm-stroke-default) solid var(--hjm-color-border); border-radius: var(--hjm-radius-lg); background: var(--hjm-color-bg); padding: var(--hjm-space-sm); overflow-wrap: anywhere; white-space: pre-wrap; }
+.hjm-chat-message__body { display: flex; align-items: flex-end; gap: var(--hjm-space-xxs); max-inline-size: 100%; min-inline-size: 0; }
+/* Wrapped bubbles (reaction trigger anchors) must shrink so the time stays beside them. */
+.hjm-chat-message__body > :not(.hjm-chat-message__meta) { flex: 0 1 auto; min-inline-size: 0; }
+.hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__body { flex-direction: row-reverse; }
+.hjm-chat-message__bubble { border-radius: 14px; background: var(--hjm-color-surface); padding: 6px 10px; min-inline-size: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
 .hjm-chat-message[data-direction="outgoing"] .hjm-chat-message__bubble { background: var(--hjm-color-surface-accent); }
-/* One surface and a partial border join the tip to the body without an interior seam. */
-.hjm-chat-message[data-tail] .hjm-chat-message__bubble { position: relative; }
-.hjm-chat-message[data-tail] .hjm-chat-message__bubble::before { content: ""; position: absolute; bottom: var(--hjm-space-sm); inset-inline-start: -5px; width: 8px; height: 8px; background: var(--hjm-color-bg); border-inline-start: var(--hjm-stroke-default) solid var(--hjm-color-border); border-bottom: var(--hjm-stroke-default) solid var(--hjm-color-border); transform: rotate(45deg); pointer-events: none; }
-.hjm-chat-message[data-tail][data-direction="outgoing"] .hjm-chat-message__bubble::before { inset-inline-start: auto; inset-inline-end: -5px; background: var(--hjm-color-surface-accent); border-inline-start: 0; border-inline-end: var(--hjm-stroke-default) solid var(--hjm-color-border); transform: rotate(-45deg); }
-
-.hjm-chat-message__meta { display: flex; align-items: center; gap: var(--hjm-space-xs); }
-.hjm-chat-message__reply { border-inline-start: 2px solid var(--hjm-color-content-brand); padding-inline-start: var(--hjm-space-xs); margin-block-end: var(--hjm-space-xs); }
+/* A flat-topped tip in the bubble surface continues the run's first top edge; that corner tightens to meet it. */
+.hjm-chat-message[data-tail] .hjm-chat-message__bubble { position: relative; border-start-start-radius: 4px; }
+.hjm-chat-message[data-tail] .hjm-chat-message__bubble::before { content: ""; position: absolute; top: 0; inset-inline-start: -6px; width: 7px; height: 10px; background: var(--hjm-color-surface); clip-path: polygon(0 0, 100% 0, 100% 100%); pointer-events: none; }
+.hjm-chat-message[data-tail][data-direction="outgoing"] .hjm-chat-message__bubble { border-start-start-radius: 14px; border-start-end-radius: 4px; }
+.hjm-chat-message[data-tail][data-direction="outgoing"] .hjm-chat-message__bubble::before { inset-inline-start: auto; inset-inline-end: -6px; background: var(--hjm-color-surface-accent); clip-path: polygon(0 0, 100% 0, 0 100%); }
+/* clip-path is physical; mirror the tip for right-to-left layouts. */
+[dir="rtl"] .hjm-chat-message[data-tail] .hjm-chat-message__bubble::before { transform: scaleX(-1); }
+
+.hjm-chat-message__meta { display: flex; flex-shrink: 0; align-items: center; gap: var(--hjm-space-xs); }
+/* A quoted reply heads the bubble and is divided from the answer. */
+.hjm-chat-message__reply { border-block-end: 1px solid var(--hjm-color-border); padding-block-end: var(--hjm-space-xs); margin-block-end: var(--hjm-space-xs); display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
+.hjm-chat-message__quote { inline-size: 100%; border-inline: 0; border-block-start: 0; background: none; padding-inline: 0; padding-block-start: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; }
+.hjm-chat-message__quote:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; border-radius: var(--hjm-radius-sm); }
+.hjm-chat-message__quote-excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hjm-chat-message__media { display: grid; border-radius: 14px; overflow: hidden; max-inline-size: 100%; }
+.hjm-chat-message__media-item { display: block; overflow: hidden; padding: 0; border: 0; background: var(--hjm-color-surface-alt); }
+.hjm-chat-message__media-item > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
+button.hjm-chat-message__media-item { cursor: pointer; }
+button.hjm-chat-message__media-item:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: -2px; }
+.hjm-chat-message__bubble[data-photo-only] { background: none; padding: 0; }
+.hjm-chat-message__bubble[data-photo-only]::before { display: none; }
+/* Only the shared default gutter narrows to the timeline gutter; "none" and "body-edge" keep their own meaning. */
+.hjm-chat-screen[data-content-inset="default"] .hjm-screen__body { padding-inline: 10px; }
+.hjm-chat-screen__footer { position: relative; }
+/* ImageChoiceGroup (2026-10-16): square tiles, brand ring + check when chosen. */
+/* Screen exit (2026-10-17): back chevron follows reading direction. */
+.hjm-screen__exit-glyph[data-kind="back"]:dir(rtl) { transform: scaleX(-1); }
+
+.hjm-image-choice { display: flex; flex-direction: column; gap: var(--hjm-space-xs); }
+.hjm-image-choice__label { font-weight: 600; }
+.hjm-image-choice__tiles { display: flex; flex-wrap: wrap; gap: var(--hjm-image-choice-gap); }
+.hjm-image-choice__tile { position: relative; inline-size: calc(var(--hjm-image-choice-size) + (var(--hjm-image-choice-ring) + var(--hjm-image-choice-offset)) * 2); aspect-ratio: 1; padding: var(--hjm-image-choice-offset); border: var(--hjm-image-choice-ring) solid transparent; border-radius: calc(var(--hjm-image-choice-radius) + var(--hjm-image-choice-ring) + var(--hjm-image-choice-offset)); background: none; cursor: pointer; }
+.hjm-image-choice__tile[data-selected] { border-color: var(--hjm-color-content-brand); }
+.hjm-image-choice__tile:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; }
+.hjm-image-choice__tile:disabled { opacity: 0.5; cursor: default; }
+.hjm-image-choice__image { display: block; inline-size: 100%; block-size: 100%; overflow: hidden; border-radius: var(--hjm-image-choice-radius); background: var(--hjm-color-surface); }
+.hjm-image-choice__image > img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
+.hjm-image-choice__check { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: var(--hjm-image-choice-check); block-size: var(--hjm-image-choice-check); border-radius: 50%; background: var(--hjm-color-content-brand); color: var(--hjm-color-on-primary); font-size: 12px; line-height: var(--hjm-image-choice-check); text-align: center; }
+.hjm-message-composer__leading { flex: 0 0 auto; align-self: center; display: inline-flex; }
+.hjm-message-composer__quick { display: flex; justify-content: space-between; gap: var(--hjm-space-xs); }
+/* Items share the composer width (max 44px) so eight emoji fit beside a host avatar. */
+.hjm-message-composer__quick-item { flex: 1 1 0; min-inline-size: 0; max-inline-size: var(--hjm-quick-size); block-size: var(--hjm-quick-size); border: 0; border-radius: 50%; background: none; font-size: var(--hjm-quick-emoji); line-height: 1; cursor: pointer; }
+.hjm-message-composer__quick-item:hover:not(:disabled) { background: var(--hjm-color-surface); }
+.hjm-message-composer__quick-item:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; }
+.hjm-message-composer__quick-item:disabled { opacity: 0.5; cursor: default; }
+.hjm-message-composer__trailing { display: inline-grid; place-items: center; }
+.hjm-message-composer__trailing > * { grid-area: 1 / 1; }
+
+.hjm-message-composer__reply-card { display: flex; flex-direction: column; gap: var(--hjm-space-sm); }
+.hjm-message-composer__reply-card[data-replying] { padding: var(--hjm-space-sm); border-radius: var(--hjm-radius-xl); background: var(--hjm-color-surface); }
+.hjm-message-composer__reply { display: flex; align-items: flex-start; gap: var(--hjm-space-sm); }
+.hjm-message-composer__reply-text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
+.hjm-message-composer__reply-excerpt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Hold menu below the reaction strip: time header, then reply → product actions → report (danger). */
+.hjm-message-menu { display: flex; flex-direction: column; padding-block: var(--hjm-space-xs); }
+.hjm-message-menu__title { padding: var(--hjm-space-xs) var(--hjm-space-md); }
+.hjm-message-menu__item { min-block-size: 44px; display: flex; align-items: center; gap: var(--hjm-space-sm); padding-inline: var(--hjm-space-md); border: 0; background: none; color: var(--hjm-color-text); font: inherit; text-align: start; cursor: pointer; border-radius: var(--hjm-radius-sm); }
+.hjm-message-menu__item:hover:not(:disabled) { background: var(--hjm-color-surface); }
+.hjm-message-menu__item:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: -2px; }
+.hjm-message-menu__item:disabled { opacity: 0.5; cursor: default; }
+.hjm-message-menu__item[data-tone="danger"] { color: var(--hjm-color-danger); }
+.hjm-message-menu__icon { inline-size: 24px; display: inline-flex; justify-content: center; }
+.hjm-message-menu__label { flex: 1; min-inline-size: 0; }
+.hjm-message-menu__chevron { color: var(--hjm-color-text-muted); }
+/* Measured DM hold menu (holdMenuRecipe): touch rows 56, emoji 28 in 48 targets, card radius 18 when actions exist. */
+@media (pointer: coarse) { .hjm-message-menu__item { min-block-size: 56px; } }
+.hjm-message-reactions .hjm-reaction-picker__glyph { font-size: 28px; line-height: 1; }
+.hjm-message-reactions .hjm-reaction-picker__options > .hjm-button { min-inline-size: 48px; min-block-size: 48px; padding-inline: 0; }
+.hjm-message-reactions:has(.hjm-message-menu) { border-radius: 18px; inline-size: max(200px, max-content); }
+/* 2026-10-16 comment standard (measured Instagram iOS comment sheet, commentThreadRecipe). */
+.hjm-comment-thread { display: flex; flex-direction: column; }
+.hjm-comment-row__avatar { flex: 0 0 auto; display: flex; justify-content: center; }
+.hjm-comment-row__text { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
+.hjm-comment-row__reactions { display: flex; flex-direction: column; gap: 2px; border-radius: var(--hjm-radius-sm); -webkit-touch-callout: none; }
+.hjm-comment-row__reactions:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; }
+.hjm-comment-row__media { align-self: flex-start; overflow: hidden; margin-block-start: 4px; }
+.hjm-comment-row__media > img { display: block; inline-size: 100%; block-size: auto; }
+.hjm-comment-row__like { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
+.hjm-comment-row__like-count { text-align: center; }
+.hjm-comment-row__action { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--hjm-color-text-muted); font: inherit; font-size: var(--hjm-type-caption-size); line-height: var(--hjm-type-caption-line-height); font-weight: 600; cursor: pointer; }
+.hjm-comment-row__action:disabled { opacity: 0.5; cursor: default; }
+.hjm-comment-row__action:focus-visible { outline: 2px solid var(--hjm-color-focus, currentColor); outline-offset: 2px; border-radius: var(--hjm-radius-sm); }
+.hjm-chat-screen__jump { position: absolute; inset-block-end: calc(100% + var(--hjm-space-xs) + var(--hjm-screen-padding)); inset-inline-end: 0; }
 
 /* A composer starts at one control row rather than the document editor minimum;
    content sizing grows up to the shared line cap without stealing the timeline. */
@@ -3110,6 +3197,9 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 /* Only the chat strip enlarges glyphs, to the title type step Native's strip uses. The default
    wrap layout keeps the button's own size, as published before the strip existed. */
 .hjm-reaction-picker[data-layout="strip"] .hjm-reaction-picker__glyph { font-size: var(--hjm-type-title-size); line-height: var(--hjm-type-title-line-height); }
+/* Wrap reactions reuse the chip frame (chipRecipe). Emoji ignore the brand content color, so the chosen reaction
+   also takes the accent fill that Native's strip and wrap items use. */
+.hjm-reaction-picker__chip[data-selected] { background: var(--hjm-color-surface-accent); }
 
 /* The embedded circle uses the small 36px recipe; centre it in the field rather than on the text baseline.
    Reduce only its trailing inset to 8px, preserving the text's 16px leading padding. */
@@ -3188,3 +3278,8 @@ button.hjm-list-row, a.hjm-list-row { cursor: pointer; }
 .hjm-segmented[data-presentation="text"] .hjm-segmented__item[data-state="checked"]::after { background:var(--hjm-color-content-brand); }
 .hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item { font-weight:400; }
 .hjm-segmented[data-presentation="text"][data-text-emphasis="regular"] .hjm-segmented__item[data-state="checked"] { font-weight:600; }
+
+/* Long read-only records need a stable label column across wrapped values. */
+.hjm-description-list[data-layout="inline"] { gap: 0; }
+.hjm-description-list[data-layout="inline"] .hjm-description-list__item { grid-template-columns: 24% minmax(0, 1fr); gap: var(--hjm-space-sm); padding-block: var(--hjm-space-sm); }
+.hjm-description-list[data-layout="inline"] .hjm-description-list__item + .hjm-description-list__item { border-block-start: 1px solid var(--hjm-color-border); }