UI correctness fixes

Problem/Motivation

Several presentation defects affect real usage. The bubble tail escapes the panel because --act-bubble-inset is the only custom property consumed without a fallback, and the filter results container has no padding. The filter input is unreadable under host dark color-scheme themes because no color-scheme is declared. State badges are misaligned relative to the metadata they annotate, the summary gutter is not reset on narrow containers, and the RTL margins use physical left. One state string is injected untranslatably from CSS.

Steps to reproduce

• Open a thread, type in the filter: cards lose gutters and bubble tails stick past the panel edge.
• Apply a dark color-scheme theme: the filter input is near-black on dark.
• Inspect a card with a state badge: it aligns to a different left edge than its metadata.

Proposed resolution

• Add the --act-bubble-inset fallback and pad the filter results container.
• Declare color-scheme on the thread and form containers.
• Move state badges inside the summary header and reset the gutter under 600px.
• Use logical margins in RTL.
• Move the CSS-injected string into a rendered element.
• Remove the dead focus rule at comment-thread.css:56, a strict subset of the rule at :99 that can never apply.
• Unify the focus ring: action links use a 2px accent ring while everything else uses a 3px --act-color-focus ring.
• Declare the card component's dependency on the library that supplies its scoping ancestor. Nearly every rule in comment.css requires .advanced-comment-thread, which comes from a different component's template in a different library, but comment.component.yml has no libraryOverrides.dependencies. Rendering the card SDC standalone (a Canvas single-card preview, a direct #type: component embed) yields an almost unstyled card, including a half-state where the globally scoped "Unpublished" badge styles while the thread-scoped dashed border does not. Either add the dependency or re-scope comment.css to .act-comment-card, which also resolves the inconsistency where comment.css:197, :201 and :205 use three different scoping roots. docs/hooks-and-assets.md:68 currently implies this already works.
• Give .is-arriving and .is-refreshing a short guarded transition. Both change background-color with no transition and hold for 1500 ms (comment-thread.js:1242, :1277), so each arriving row is a hard yellow flash on and off. It is not an animation, so prefers-reduced-motion does not apply, but a ~200 ms fade is a better default for photosensitivity in a busy thread.
• Make the filter result count plural-aware: Drupal.t('@count matching comments.') at comment-thread.js:597 renders "1 matching comments." Use Drupal.formatPlural.

Remaining tasks

• Verify filter, dark-theme, mobile, and RTL rendering.
• Verify the card component renders styled when embedded outside a thread.

User interface changes

Corrects filter-results padding, dark-theme readability, badge alignment, mobile gutter, RTL spacing, standalone card styling, and the arrival flash.

API changes

None anticipated.

Data model changes

None anticipated.

AI-Generated: Yes (Used Opus 5 and DeepSeek Flash to review and discover these issues)