@hawiyah/styles 0.0.0-stage → 0.2.1

package/dist/dga.css

@@ -0,0 +1,316 @@
+/* DGA reference profile — supplied local snapshot, 2026-10-29.
+   This is a source-informed implementation, not an endorsement or parity claim.
+   See docs/dga-reference.md for provenance and accessibility adaptations.
+
+   Structural options inherit from the nearest theme. Explicit non-DGA themes
+   reset them, including when nested inside the default DGA page. The whitespace
+   / initial switches select colors at the component itself, so a nested dark
+   mode resolves its own semantic colors rather than its ancestor's light ones.
+   No @scope or script-driven media measurement is required. */
+:where(:root:not([data-hw-theme]), [data-hw-theme='dga'], [data-hw-theme='custom']) {
+  --hw-dga-on: ;
+  --hw-dga-off: initial;
+  --hw-profile-control-radius: 0.25rem;
+  --hw-profile-button-gap: 0.25rem;
+  --hw-profile-button-padding-block: 0px;
+  --hw-profile-button-padding-lg: 1rem;
+  --hw-profile-button-font: 1rem;
+  --hw-profile-button-leading: 1.5;
+  --hw-profile-field-padding-block: 0.375rem;
+  --hw-profile-field-padding-start: 1rem;
+  --hw-profile-field-padding-end: 1rem;
+  --hw-profile-field-font-lg: 1rem;
+  --hw-profile-field-leading: 1.5;
+  --hw-profile-field-focus-line: 100% 2px;
+  --hw-profile-field-pressed-line: 50% 2px;
+  --hw-profile-field-shadow: none;
+  --hw-profile-textarea-height: 6rem;
+  --hw-profile-textarea-padding: 0.75rem 1rem;
+  --hw-profile-label-leading: 1.42857143;
+  --hw-profile-label-font: 1rem;
+  --hw-profile-header-height: 4.5rem;
+  --hw-profile-header-padding: 0px 2rem;
+  --hw-profile-header-gap: 1rem;
+  --hw-profile-footer-padding: 2.5rem 2rem;
+}
+:where([data-hw-theme]:not([data-hw-theme='dga'], [data-hw-theme='custom'])) {
+  --hw-dga-on: initial;
+  --hw-dga-off: ;
+  --hw-profile-control-radius: initial;
+  --hw-profile-button-gap: initial;
+  --hw-profile-button-padding-block: initial;
+  --hw-profile-button-padding-lg: initial;
+  --hw-profile-button-font: initial;
+  --hw-profile-button-leading: initial;
+  --hw-profile-field-padding-block: initial;
+  --hw-profile-field-padding-start: initial;
+  --hw-profile-field-padding-end: initial;
+  --hw-profile-field-font-lg: initial;
+  --hw-profile-field-leading: initial;
+  --hw-profile-field-focus-line: initial;
+  --hw-profile-field-pressed-line: initial;
+  --hw-profile-field-shadow: initial;
+  --hw-profile-textarea-height: initial;
+  --hw-profile-textarea-padding: initial;
+  --hw-profile-label-leading: initial;
+  --hw-profile-label-font: initial;
+  --hw-profile-header-height: initial;
+  --hw-profile-header-padding: initial;
+  --hw-profile-header-gap: initial;
+  --hw-profile-footer-padding: initial;
+}
+
+/* Button symbols form 2:5126 / 2:5246 / 2:5366: 40/32/24px,
+   padding 16/12/8px, gap4, radius4. Public comfortable sizes map to
+   40/32/40; compact maps to32/24/40. Density tokens own the heights. */
+.hw-button {
+  gap: var(--hw-profile-button-gap, var(--hw-space-2));
+  padding-block: var(--hw-profile-button-padding-block, var(--hw-space-2));
+  border-radius: var(--hw-profile-control-radius, var(--hw-radius-md));
+  font-size: var(--hw-profile-button-font, var(--hw-text-sm));
+  line-height: var(--hw-profile-button-leading, var(--hw-leading-heading));
+}
+.hw-button[data-size='sm'] {
+  padding-block: var(--hw-profile-button-padding-block, var(--hw-space-1));
+  padding-inline: var(--hw-dga-on, var(--hw-space-3)) var(--hw-dga-off, clamp(0.5rem, calc(var(--hw-control-height-sm) - 1.25rem), 0.75rem));
+  font-size: var(--hw-dga-on, var(--hw-text-xs)) var(--hw-dga-off, clamp(0.75rem, calc(var(--hw-control-height-sm) - 1.125rem), 0.875rem));
+}
+.hw-button[data-size='lg'] { padding-inline: var(--hw-profile-button-padding-lg, var(--hw-space-6)); font-size: var(--hw-text-md); }
+.hw-button { --hw-button-control-height: var(--hw-control-height); }
+.hw-button[data-size='sm'] { --hw-button-control-height: var(--hw-control-height-sm); }
+.hw-button[data-size='lg'] { --hw-button-control-height: var(--hw-control-height-lg); }
+.hw-button:is(:not([data-size]), [data-size]) { padding-block: clamp(0px, calc((var(--hw-button-control-height) - 1em * var(--hw-profile-button-leading, var(--hw-leading-heading)) - 2px) / 2), var(--hw-profile-button-padding-block, var(--hw-space-2))); }
+.hw-button[data-icon-only], .hw-button.hw-icon-button { padding-inline: 0; }
+.hw-button[data-variant='danger'] {
+  --hw-button-bg: var(--hw-color-danger-background, var(--hw-color-danger));
+  --hw-button-fg: var(--hw-dga-on, var(--hw-color-surface)) var(--hw-dga-off, #fff);
+}
+.hw-button:not([data-variant], :disabled, [aria-disabled='true']):active,
+.hw-button[data-variant='primary']:not(:disabled, [aria-disabled='true']):active {
+  background: var(--hw-color-primary-active);
+}
+
+/* Text Input form 43:3717(default),43:3813(hover),43:3912/3919(pressed),
+   43:4026/4034(focus),43:4334(medium),43:3741(error).
+   Radius4; comfortable input40; NIC padding16 and label16 supersede the earlier Figma padding8/16 and label14.
+   The source's #9DA4AE 1px resting border fails 3:1 on white. We use
+   Controls/control-border (#6C737F light, #9DA4AE dark) as an explicit
+   accessibility adaptation; the exact source field-border token is retained.
+   The focused bottom line is a dark neutral for empty/unvalidated fields.
+   Nonempty valid values use green, including prefilled values; user-invalid
+   or explicit application errors use danger. Blur hides the active underline.
+   It is the DGA focus indicator, without a duplicate
+   outer ring. Read-only fields keep a single inset keyboard indicator.
+   NIC global.css 2431–2648 supersedes the earlier Figma input timing:
+   500ms ease, pressed line50%, padding16 and no focus shadow. Original
+   Figma measurements remain recorded in dga-foundations.json. */
+:is(.hw-input, .hw-textarea, .hw-select) {
+  padding-block: var(--hw-profile-field-padding-block, var(--hw-space-2));
+  padding-inline: var(--hw-profile-field-padding-start, var(--hw-space-3)) var(--hw-profile-field-padding-end, var(--hw-space-3));
+  border-radius: var(--hw-profile-control-radius, var(--hw-radius-md));
+  background-color: var(--hw-color-field-background, var(--hw-color-surface));
+  background-image: linear-gradient(var(--hw-color-field-active), var(--hw-color-field-active)) var(--_hw-select-image,);
+  background-repeat: no-repeat;
+  background-position: center bottom var(--_hw-select-position,);
+  background-size: 0% 2px var(--_hw-select-size,);
+  line-height: var(--hw-profile-field-leading, var(--hw-leading-normal));
+  transition: var(--hw-dga-on, border-color var(--hw-duration-input) var(--hw-ease-input), background-color var(--hw-duration-input) var(--hw-ease-input), background-size var(--hw-duration-input) var(--hw-ease-input), box-shadow var(--hw-duration-input) var(--hw-ease-input)) var(--hw-dga-off, background-size var(--hw-duration-input, 500ms) var(--hw-ease-input, ease));
+}
+:is(.hw-input, .hw-textarea)::placeholder { color: var(--hw-color-field-placeholder, var(--hw-color-text-subtle)); }
+:is(.hw-input, .hw-textarea, .hw-select):hover:not(:disabled, [readonly]) { border-color: var(--hw-color-field-hover, var(--hw-color-primary)); }
+:is(.hw-input, .hw-textarea, .hw-select):focus:not(:disabled, [readonly]) {
+  border-color: var(--hw-dga-on, var(--hw-color-primary)) var(--hw-dga-off, var(--hw-color-field-active));
+  background-size: var(--hw-profile-field-focus-line, 0% 2px) var(--_hw-select-size,);
+  box-shadow: var(--hw-profile-field-shadow, none);
+}
+:is(.hw-input, .hw-textarea, .hw-select):active:not(:disabled, [readonly]) {
+  background-size: var(--hw-profile-field-pressed-line, 0% 2px) var(--_hw-select-size,);
+  background-color: var(--hw-color-field-background);
+}
+:is(.hw-input, .hw-textarea, .hw-select)[data-size='sm'] { padding-block: var(--hw-profile-button-padding-block, var(--hw-space-1)); }
+:is(.hw-input, .hw-textarea, .hw-select)[data-size='lg'] {
+  padding-inline: var(--hw-profile-field-padding-start, var(--hw-space-4)) var(--hw-profile-field-padding-end, var(--hw-space-4));
+  font-size: var(--hw-profile-field-font-lg, var(--hw-text-lg));
+}
+/* One focus treatment: DGA's active underline, or an inset legacy border.
+   Read-only fields have no active underline, so retain an inset focus cue. */
+:is(.hw-input, .hw-textarea, .hw-select):focus-visible {
+  outline: var(--hw-dga-on, 2px solid var(--hw-color-focus)) var(--hw-dga-off, none);
+  outline-offset: -2px;
+}
+:is(.hw-input, .hw-textarea)[readonly]:focus-visible {
+  outline: 2px solid var(--hw-color-focus);
+}
+:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled'] { background-color: var(--hw-color-surface-muted); background-image: linear-gradient(var(--hw-color-field-active), var(--hw-color-field-active)) var(--_hw-select-image,); background-repeat: no-repeat; background-position: center bottom var(--_hw-select-position,); background-size: 0% 2px var(--_hw-select-size,); }
+:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:focus:not(:disabled, [readonly]) { background-size: var(--hw-profile-field-focus-line, 0% 2px) var(--_hw-select-size,); }
+:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:active:not(:disabled, [readonly]) { background-size: var(--hw-profile-field-pressed-line, 0% 2px) var(--_hw-select-size,); background-color: var(--hw-dga-on, var(--hw-color-field-background)) var(--hw-dga-off, var(--hw-color-surface-muted)); }
+:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:focus-visible { border-color: var(--hw-dga-on, var(--hw-color-border-strong)) var(--hw-dga-off, var(--hw-color-field-active)); }
+/* Presence is adapter-owned; validity stays native. Empty optional fields must
+   not imply success. Explicit application errors take precedence below. */
+:is(.hw-input, .hw-textarea, .hw-select):where([data-hw-filled='true']):valid,
+:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:where([data-hw-filled='true']):valid {
+  background-image: linear-gradient(var(--hw-color-primary-text, var(--hw-color-primary)), var(--hw-color-primary-text, var(--hw-color-primary))) var(--_hw-select-image,);
+}
+:is(.hw-input, .hw-textarea, .hw-select)[aria-invalid='true'],
+:is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled'][aria-invalid='true'] {
+  border-color: var(--hw-color-danger);
+  background-image: linear-gradient(var(--hw-color-danger), var(--hw-color-danger)) var(--_hw-select-image,);
+}
+:is(.hw-input, .hw-textarea, .hw-select)[aria-invalid='true']:is(:hover, :focus, :active) { border-color: var(--hw-color-danger); }
+@supports selector(:user-invalid) {
+  :is(.hw-input, .hw-textarea, .hw-select):user-invalid,
+  :is(.hw-input, .hw-textarea, .hw-select)[data-variant='filled']:user-invalid { border-color: var(--hw-color-danger); background-image: linear-gradient(var(--hw-color-danger), var(--hw-color-danger)) var(--_hw-select-image,); }
+  :is(.hw-input, .hw-textarea, .hw-select):user-invalid:is(:hover, :focus, :active) { border-color: var(--hw-color-danger); }
+}
+:is(.hw-input, .hw-textarea, .hw-select):disabled,
+:is(.hw-input, .hw-textarea)[readonly] { background-size: 0% 2px; box-shadow: none; }
+:is(.hw-input, .hw-textarea, .hw-select):disabled { border-color: var(--hw-color-border); background-color: var(--hw-dga-on, var(--hw-color-disabled)) var(--hw-dga-off, transparent); }
+:is(.hw-input, .hw-textarea)[readonly] { background-color: var(--hw-dga-on, var(--hw-color-surface-muted)) var(--hw-dga-off, transparent); }
+/* Textarea form5:47724:96px high, padding12/16. User resizing remains native. */
+.hw-textarea { min-block-size: var(--hw-profile-textarea-height, 7.5rem); padding: var(--hw-profile-textarea-padding, var(--hw-space-2) var(--hw-space-3)); }
+/* Fit the requested density without clipping translated or zoomed text. */
+:is(.hw-input, .hw-select) { --hw-field-height: max(var(--hw-control-height), var(--hw-control-field-min-height, 0px)); }
+:is(.hw-input, .hw-select)[data-size='sm'] { --hw-field-height: max(var(--hw-control-height-sm), var(--hw-control-field-min-height, 0px)); }
+:is(.hw-input, .hw-select)[data-size='lg'] { --hw-field-height: max(var(--hw-control-height-lg), var(--hw-control-field-min-height, 0px)); }
+:is(.hw-input, .hw-select):is(:not([data-size]), [data-size]) { min-block-size: var(--hw-field-height); padding-block: clamp(0px, calc((var(--hw-field-height) - 1em * var(--hw-profile-field-leading, var(--hw-leading-normal)) - 2px) / 2), var(--hw-profile-field-padding-block, var(--hw-space-2))); }
+:is(.hw-input, .hw-select)[data-size='sm'] { line-height: max(1em, min(calc(1em * var(--hw-profile-field-leading, var(--hw-leading-normal))), calc(var(--hw-field-height) - 2px))); }
+.hw-label { font-size: var(--hw-profile-label-font, var(--hw-text-sm)); }
+.hw-label, .hw-hint, .hw-error { line-height: var(--hw-profile-label-leading, var(--hw-leading-normal)); }
+.hw-input-addon { border-radius: var(--hw-profile-control-radius, var(--hw-radius-md)); }
+/* Group corners must win over the later profile radius. */
+.hw-input-group > :not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; }
+.hw-input-group > :not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
+
+/* Portal header: form2:38369 and service20:4646, height72, desktop
+   inline32; mobile form48:3893 inline16. Header content may wrap when
+   translated/zoomed rather than clipping controls. */
+.hw-portal-header {
+  gap: var(--hw-profile-header-gap, var(--hw-space-5));
+  min-block-size: var(--hw-profile-header-height, 5rem);
+  padding: var(--hw-profile-header-padding, var(--hw-space-4) clamp(1rem, 4vw, 3rem));
+}
+.hw-portal-header-inner, .hw-portal-header-main {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--hw-profile-header-height, auto);
+}
+.hw-portal-header-inner > *, .hw-portal-header-main > * { min-inline-size: 0; }
+.hw-portal-header :is(.hw-portal-actions, .hw-portal-header-actions) { flex-shrink: 0; }
+.hw-portal-header :is(.hw-portal-brand, nav a) { color: var(--hw-color-heading, var(--hw-color-text)); }
+.hw-portal-header nav a { position: relative; padding-inline: 0.5rem; }
+.hw-portal-header nav a[aria-current='page'] { color: var(--hw-color-primary-text); }
+.hw-portal-notice { padding-block: 0.375rem; color: var(--hw-color-text-muted); }
+
+/* Footer form2:44049 / service1:52987: background-SA-Flag #074D31
+   in light mode, inline32. Height is content-driven, not the fixed frame520.
+   Existing simple PortalFooter markup and the composed columns both work. */
+.hw-portal-footer {
+  padding: var(--hw-profile-footer-padding, var(--hw-space-8) clamp(1rem, 4vw, 3rem));
+  background: var(--hw-dga-on, var(--hw-color-canvas)) var(--hw-dga-off, var(--hw-color-footer));
+  color: var(--hw-dga-on, var(--hw-color-text)) var(--hw-dga-off, var(--hw-color-on-footer));
+}
+.hw-portal-footer nav a, .hw-portal-footer > p, .hw-portal-footer > small { color: var(--hw-dga-on, var(--hw-color-primary-text)) var(--hw-dga-off, var(--hw-color-on-footer)); }
+.hw-portal-footer a:focus-visible { outline-color: currentColor; }
+.hw-portal-footer > .hw-service-container { inline-size: min(80rem, 100%); }
+.hw-portal-footer-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 2rem; inline-size: 100%; }
+.hw-portal-footer > .hw-portal-footer-main { flex-basis: 100%; }
+.hw-portal-footer-main > * { min-inline-size: 0; }
+.hw-portal-footer-main :is(h2, h3, h4) { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; font-weight: var(--hw-weight-semibold); }
+.hw-portal-footer-links, .hw-portal-footer .hw-portal-footer-links { display: flex; flex-direction: column; align-items: start; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
+.hw-portal-footer .hw-portal-footer-links ul { display: flex; flex-direction: column; align-items: start; gap: 0.75rem; }
+.hw-portal-footer-links a { color: inherit; font-size: 0.875rem; line-height: 1.42857143; text-underline-offset: 0.2em; }
+.hw-portal-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; inline-size: 100%; padding-block-start: 1.5rem; border-block-start: 1px solid currentColor; }
+.hw-portal-footer > .hw-portal-footer-bottom { flex-basis: 100%; }
+.hw-portal-footer-bottom :is(p, small) { margin: 0; font-size: 0.75rem; line-height: 1.5; }
+
+/* Service page service1:21393/21394/21435 and form2:17299/17300/17331.
+   The desktop reference content is1280 with832main +32gap +416aside.
+   832+32+416=1280. minmax tracks preserve this ratio below the max width.
+   Collapse960 and field collapse600 are implementation policies informed by
+   the source's mobile composition, not assertions about the Figma frame size. */
+:where(.hw-service-container, .hw-service-layout, .hw-service-main,
+  .hw-service-aside, .hw-form-layout, .hw-form-sidebar, .hw-form-main,
+  .hw-form-grid, .hw-stepper-responsive, .hw-stepper-mobile,
+  .hw-service-metadata) { box-sizing: border-box; min-inline-size: 0; font-family: var(--hw-font-sans); }
+.hw-service-container { inline-size: min(80rem, calc(100% - 2 * var(--hw-content-gutter, 2rem))); margin-inline: auto; }
+.hw-service-layout, .hw-form-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 2rem; }
+.hw-service-main, .hw-form-main { display: flex; flex-direction: column; gap: 2rem; color: var(--hw-color-text); }
+.hw-service-main { gap: 4rem; }
+.hw-service-main > *, .hw-form-main > *, .hw-service-aside > * { min-inline-size: 0; }
+.hw-service-aside { display: flex; flex-direction: column; gap: 1.5rem; padding: 2.5rem; border: 1px solid var(--hw-color-border); border-radius: 1rem; background: var(--hw-color-surface); color: var(--hw-color-text); overflow-wrap: anywhere; }
+.hw-service-aside :is(h2, h3, p) { margin: 0; }
+.hw-service-aside :is(h2, h3) { color: var(--hw-color-heading); font-size: var(--hw-text-lg); line-height: var(--hw-leading-heading); font-weight: var(--hw-weight-semibold); }
+.hw-service-aside .hw-divider { margin: 0; }
+.hw-service-metadata { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
+.hw-service-metadata > div { display: grid; gap: 0.25rem; }
+.hw-service-metadata dt { color: var(--hw-color-text-muted); font-size: 0.875rem; line-height: 1.42857143; }
+.hw-service-metadata dd { margin: 0; color: var(--hw-color-heading); font-size: 1rem; line-height: 1.5; font-weight: var(--hw-weight-medium); }
+.hw-form-main { grid-column: 1; grid-row: 1 / span 2; }
+.hw-form-layout > .hw-stepper-responsive { grid-column: 2; grid-row: 1; }
+.hw-form-layout > .hw-service-aside { grid-column: 2; grid-row: 2; }
+.hw-form-sidebar { display: flex; flex-direction: column; gap: 2rem; grid-column: 2; grid-row: 1 / span 2; }
+.hw-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
+.hw-form-grid > * { min-inline-size: 0; }
+.hw-form-grid > [data-span='full'] { grid-column: 1 / -1; }
+
+/* Form progress card desktop2:17331 (40px padding, radius16), mobile
+   2:17587 (16inline/24block). Radial302:28486/28048:64px diameter,
+   88% inner radius (~4px ring), text14/20; summary gap4 and text12/18.
+   A visible count/current label is required; the ring itself is decorative. */
+.hw-stepper-responsive { padding: 2.5rem; border-radius: 1rem; background: var(--hw-color-canvas); color: var(--hw-color-heading); }
+.hw-stepper-responsive .hw-stepper { flex-direction: column; gap: 0; }
+.hw-stepper-responsive .hw-step { position: relative; align-items: start; flex: none; min-block-size: 5rem; gap: 1rem; padding-block-end: 1.5rem; line-height: 1.5; }
+.hw-stepper-responsive .hw-step:last-child { min-block-size: 2rem; padding-block-end: 0; }
+.hw-stepper-responsive .hw-step::before { position: relative; z-index: 1; inline-size: 2rem; block-size: 2rem; box-shadow: none; }
+.hw-stepper-responsive .hw-step:not(:last-child)::after { position: absolute; inset-inline-start: calc(1rem - 1px); inset-block: 2rem 0; inline-size: 2px; min-inline-size: 0; block-size: auto; }
+.hw-stepper-responsive .hw-step:is([data-state='complete'], [data-state='completed'])::after { background: var(--hw-color-primary); }
+.hw-stepper-responsive .hw-step:is([data-state='complete'], [data-state='completed'])::before { border-color: var(--hw-color-primary); background: var(--hw-color-primary); color: var(--hw-color-on-primary); }
+.hw-stepper-mobile { display: none; align-items: center; gap: 0.5rem; }
+.hw-stepper-ring { position: relative; isolation: isolate; display: grid; flex: 0 0 4rem; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: 50%; color: var(--hw-color-text-muted); font-size: 0.875rem; line-height: 1.42857143; font-variant-numeric: tabular-nums; }
+.hw-stepper-ring::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: conic-gradient(var(--hw-color-primary) clamp(0%, var(--hw-step-progress, 25%), 100%), var(--hw-color-border) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); }
+.hw-stepper-summary, .hw-stepper-mobile-content { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; padding-inline-end: 1rem; }
+:is(.hw-stepper-summary, .hw-stepper-mobile-content) strong { color: var(--hw-color-heading); font-size: 0.875rem; line-height: 1.42857143; font-weight: var(--hw-weight-semibold); }
+:is(.hw-stepper-summary, .hw-stepper-mobile-content) :is(p, small, span) { margin: 0; color: var(--hw-color-text-muted); font-size: 0.75rem; line-height: 1.5; }
+
+@media (max-width: 59.999rem) {
+  .hw-service-layout, .hw-form-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
+  .hw-form-layout { grid-template-areas: 'steps' 'main' 'guidance'; }
+  .hw-form-sidebar { display: contents; }
+  .hw-form-main { grid-area: main; }
+  .hw-form-layout > .hw-stepper-responsive, .hw-form-sidebar > .hw-stepper-responsive { grid-area: steps; }
+  .hw-form-layout > .hw-service-aside, .hw-form-sidebar > .hw-service-aside { grid-area: guidance; }
+  .hw-stepper-responsive { padding: 1.5rem 1rem; }
+  .hw-stepper-responsive .hw-stepper { display: none; }
+  .hw-stepper-mobile { display: flex; }
+  .hw-service-aside { padding: 1.5rem; }
+  .hw-portal-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 37.499rem) {
+  .hw-service-container { inline-size: calc(100% - 2 * var(--hw-content-gutter-mobile, 1rem)); }
+  .hw-form-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
+  .hw-service-main { gap: 2rem; }
+  .hw-portal-header { padding-inline: 1rem; }
+  .hw-portal-header-inner { gap: 0.75rem; }
+  .hw-portal-header-inner > nav { order: 3; flex-basis: 100%; }
+  .hw-portal-header-inner > nav ul { flex-direction: column; align-items: stretch; gap: 0.25rem; }
+  .hw-portal-header :is(.hw-portal-header-inner, .hw-portal-header-main) > nav[data-open='false'] { display: none; }
+  .hw-portal-footer-main { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
+  .hw-portal-footer-bottom { align-items: start; flex-direction: column; }
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.hw-input, .hw-textarea, .hw-select) { transition: none; }
+}
+@media (forced-colors: active) {
+  :is(.hw-input, .hw-textarea, .hw-select) { border-color: ButtonText; background-image: none; }
+  :is(.hw-input, .hw-textarea, .hw-select):focus { border-color: Highlight; box-shadow: none; outline: 2px solid Highlight; outline-offset: -2px; }
+  :is(.hw-input, .hw-textarea, .hw-select)[aria-invalid='true'] { border-style: dashed; }
+  :is(.hw-input, .hw-textarea, .hw-select):disabled { border-color: GrayText; color: GrayText; }
+  .hw-portal-footer { border-block-start: 1px solid CanvasText; }
+  .hw-stepper-ring::before { background: none; mask: none; border: 4px solid CanvasText; border-block-start-color: Highlight; }
+  .hw-stepper-responsive .hw-step::before { border-color: CanvasText; }
+  .hw-stepper-responsive .hw-step[aria-current='step']::before { outline: 2px solid Highlight; outline-offset: 2px; }
+}

package/dist/direction.css

@@ -0,0 +1,14 @@
+/* Resolve reading direction at the closest HTML boundary, independent of language.
+   The empty RTL marker enables component-specific values through var() fallbacks. */
+:where([dir='ltr'], [dir='auto']) {
+  --_hw-inline-sign: 1;
+  --_hw-rtl-only: initial;
+}
+:where([dir='rtl']) {
+  --_hw-inline-sign: -1;
+  --_hw-rtl-only: ;
+}
+/* Scope roots retain the browser's first-strong-text test when CSS is minified. */
+@scope ([dir='auto']:dir(rtl)) {
+  :scope { --_hw-inline-sign: -1; --_hw-rtl-only: ; }
+}