/**
 * WastHub ERP — Shared ERP Components (Phase 3)
 * Visual and composition contracts only. Data, APIs, sorting, filtering,
 * pagination, selection, exports, and business actions remain page-owned.
 */

/* Page and section structure */
html[data-wast-ui] .wh-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wh-space-1); margin: 0 0 var(--wh-space-2); padding: 0; color: var(--wh-color-text-muted); list-style: none; font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-breadcrumb > li + li::before { content: "/"; margin-inline-end: var(--wh-space-1); color: var(--wh-color-border-strong); }
html[data-wast-ui] .wh-breadcrumb a { color: inherit; text-decoration: none; }
html[data-wast-ui] .wh-page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wh-space-4) var(--wh-space-6); align-items: end; padding-block: var(--wh-space-2) var(--wh-space-5); }
html[data-wast-ui] .wh-page-header__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wh-space-2); }
html[data-wast-ui] .wh-page-header__title { margin: 0; color: var(--wh-color-text-primary); font-size: var(--wh-font-size-3xl); line-height: var(--wh-line-height-tight); }
html[data-wast-ui] .wh-page-header__description { max-inline-size: 52rem; margin: var(--wh-space-2) 0 0; color: var(--wh-color-text-secondary); }
html[data-wast-ui] .wh-page-header__meta { display: flex; flex-wrap: wrap; gap: var(--wh-space-2); margin-block-start: var(--wh-space-3); color: var(--wh-color-text-muted); font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-page-header__actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--wh-space-2); }
html[data-wast-ui] .wh-section-header { display: flex; align-items: start; justify-content: space-between; gap: var(--wh-space-4); margin-block-end: var(--wh-space-4); }
html[data-wast-ui] .wh-section-header__title { margin: 0; font-size: var(--wh-font-size-xl); }
html[data-wast-ui] .wh-section-header__description { margin: var(--wh-space-1) 0 0; color: var(--wh-color-text-secondary); font-size: var(--wh-font-size-sm); }

/* Filters */
html[data-wast-ui] .wh-filter-bar { display: flex; align-items: end; flex-wrap: wrap; gap: var(--wh-space-3); padding: var(--wh-space-4); background: var(--wh-color-surface-card); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-xl); }
html[data-wast-ui] .wh-filter-bar__primary { flex: 1 1 18rem; }
html[data-wast-ui] .wh-filter-bar__field { flex: 1 1 11rem; min-inline-size: 10rem; }
html[data-wast-ui] .wh-filter-bar__actions { display: flex; align-items: center; gap: var(--wh-space-2); }
html[data-wast-ui] .wh-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wh-space-2); }
html[data-wast-ui] .wh-active-filters__label { color: var(--wh-color-text-muted); font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-active-filter { display: inline-flex; align-items: center; gap: var(--wh-space-1); min-block-size: var(--wh-control-height-compact); padding: var(--wh-space-1) var(--wh-space-2); color: var(--wh-color-text-secondary); background: var(--wh-color-surface-subtle); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-full); font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-active-filter__remove { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; padding: 0; color: inherit; background: transparent; border: 0; border-radius: var(--wh-radius-full); cursor: pointer; }
html[data-wast-ui] .wh-active-filter__remove:hover { background: var(--wh-color-border-default); }
html[data-wast-ui] .wh-filter-drawer .wh-modal__dialog { block-size: 100%; max-block-size: 100%; margin-inline-start: auto; border-radius: 0; }

/* Data table and toolbar */
html[data-wast-ui] .wh-table-shell { min-inline-size: 0; overflow: hidden; background: var(--wh-color-surface-card); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-xl); box-shadow: var(--wh-elevation-1); }
html[data-wast-ui] .wh-table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--wh-space-3); padding: var(--wh-space-3) var(--wh-space-4); border-block-end: var(--wh-border-width-default) solid var(--wh-color-border-default); }
html[data-wast-ui] .wh-table-toolbar__context { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--wh-space-2); }
html[data-wast-ui] .wh-table-toolbar__count { color: var(--wh-color-text-primary); font-weight: var(--wh-font-weight-bold); }
html[data-wast-ui] .wh-table-toolbar__hint { color: var(--wh-color-text-muted); font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-table-toolbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wh-space-2); }
html[data-wast-ui] .wh-table-scroll { max-inline-size: 100%; overflow: auto; overscroll-behavior-inline: contain; }
html[data-wast-ui] .wh-data-table { inline-size: 100%; min-inline-size: 52rem; border-collapse: separate; border-spacing: 0; color: var(--wh-color-text-primary); font-size: var(--wh-font-size-md); }
html[data-wast-ui] .wh-data-table :where(th, td) { padding: var(--wh-space-3) var(--wh-space-4); text-align: start; vertical-align: middle; border-block-end: var(--wh-border-width-default) solid var(--wh-color-border-default); }
html[data-wast-ui] .wh-data-table th { color: var(--wh-color-text-secondary); background: var(--wh-color-surface-subtle); font-size: var(--wh-font-size-sm); font-weight: var(--wh-font-weight-semibold); white-space: nowrap; }
html[data-wast-ui] .wh-data-table tbody tr { transition: background-color var(--wh-duration-fast) var(--wh-easing-standard); }
html[data-wast-ui] .wh-data-table tbody tr:hover { background: var(--wh-component-control-hover); }
html[data-wast-ui] .wh-data-table tbody tr[data-wh-state="selected"] { background: var(--wh-color-action-primary-subtle); }
html[data-wast-ui] .wh-data-table tbody tr:last-child td { border-block-end: 0; }
html[data-wast-ui] .wh-data-table[data-wh-density="compact"] :where(th, td) { padding: var(--wh-space-2) var(--wh-space-3); }
html[data-wast-ui] .wh-data-table[data-wh-sticky-header="true"] thead { position: sticky; z-index: var(--wh-z-sticky); inset-block-start: 0; }
html[data-wast-ui] .wh-data-table :where(th, td)[data-wh-sticky="end"] { position: sticky; z-index: 1; inset-inline-end: 0; background: var(--wh-color-surface-card); box-shadow: calc(var(--wh-space-1) * -1) 0 var(--wh-space-2) color-mix(in srgb, var(--wh-color-neutral-900) 8%, transparent); }
html[data-wast-ui] .wh-data-table th[data-wh-sticky="end"] { background: var(--wh-color-surface-subtle); }
html[data-wast-ui] .wh-data-table__select { inline-size: 2.75rem; }
html[data-wast-ui] .wh-sort-button { display: inline-flex; align-items: center; gap: var(--wh-space-1); padding: 0; color: inherit; background: transparent; border: 0; font: inherit; font-weight: inherit; cursor: pointer; }
html[data-wast-ui] .wh-sort-indicator { color: var(--wh-color-text-muted); }
html[data-wast-ui] th[aria-sort="ascending"] .wh-sort-indicator::before { content: "↑"; }
html[data-wast-ui] th[aria-sort="descending"] .wh-sort-indicator::before { content: "↓"; }
html[data-wast-ui] th[aria-sort="none"] .wh-sort-indicator::before { content: "↕"; }
html[data-wast-ui] .wh-cell-stack { display: grid; gap: var(--wh-space-1); min-inline-size: 0; }
html[data-wast-ui] .wh-cell-primary { color: var(--wh-color-text-primary); font-weight: var(--wh-font-weight-semibold); }
html[data-wast-ui] .wh-cell-secondary { color: var(--wh-color-text-muted); font-size: var(--wh-font-size-xs); }
html[data-wast-ui] .wh-money-cell { font-weight: var(--wh-font-weight-semibold); white-space: nowrap; }
html[data-wast-ui] .wh-date-cell,
html[data-wast-ui] .wh-identifier-cell,
html[data-wast-ui] .wh-phone-cell { white-space: nowrap; }
html[data-wast-ui] .wh-identifier-cell { color: var(--wh-color-action-primary); font-family: var(--wh-font-family-mono); font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-user-cell { display: flex; align-items: center; gap: var(--wh-space-2); min-inline-size: 10rem; }
html[data-wast-ui] .wh-user-cell__avatar { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; color: var(--wh-color-action-primary); background: var(--wh-color-action-primary-subtle); border-radius: var(--wh-radius-full); font-size: var(--wh-font-size-xs); font-weight: var(--wh-font-weight-bold); }
html[data-wast-ui] .wh-table-state { padding: var(--wh-space-6); }

/* Bulk action and pagination */
html[data-wast-ui] .wh-bulk-action-bar { display: none; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--wh-space-3); padding: var(--wh-space-3) var(--wh-space-4); color: var(--wh-color-text-primary); background: var(--wh-color-action-primary-subtle); border: var(--wh-border-width-default) solid var(--wh-color-border-interactive); border-radius: var(--wh-radius-lg); }
html[data-wast-ui] .wh-bulk-action-bar[data-wh-state="active"] { display: flex; }
html[data-wast-ui] .wh-bulk-action-bar__count { font-weight: var(--wh-font-weight-bold); }
html[data-wast-ui] .wh-bulk-action-bar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wh-space-2); }
html[data-wast-ui] .wh-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--wh-space-3); padding: var(--wh-space-3) var(--wh-space-4); border-block-start: var(--wh-border-width-default) solid var(--wh-color-border-default); }
html[data-wast-ui] .wh-pagination__summary { color: var(--wh-color-text-muted); font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-pagination__pages { display: flex; align-items: center; gap: var(--wh-space-1); }
html[data-wast-ui] .wh-pagination__page { display: inline-grid; place-items: center; min-inline-size: var(--wh-control-height-compact); min-block-size: var(--wh-control-height-compact); padding: var(--wh-space-1); color: var(--wh-color-text-secondary); background: transparent; border: var(--wh-border-width-default) solid transparent; border-radius: var(--wh-radius-md); font: inherit; cursor: pointer; }
html[data-wast-ui] .wh-pagination__page:hover { background: var(--wh-component-control-hover); }
html[data-wast-ui] .wh-pagination__page[aria-current="page"] { color: var(--wh-color-text-on-primary); background: var(--wh-color-action-primary); }
html[data-wast-ui] .wh-pagination__page:disabled { color: var(--wh-color-text-disabled); cursor: not-allowed; }

/* Forms and review */
html[data-wast-ui] .wh-form-section,
html[data-wast-ui] .wh-detail-section { padding: var(--wh-space-5); background: var(--wh-color-surface-card); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-xl); }
html[data-wast-ui] .wh-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--wh-space-4); }
html[data-wast-ui] .wh-form-grid > * { grid-column: span 6; }
html[data-wast-ui] .wh-form-grid > [data-wh-span="full"] { grid-column: 1 / -1; }
html[data-wast-ui] .wh-form-grid > [data-wh-span="third"] { grid-column: span 4; }
html[data-wast-ui] .wh-sticky-actions { position: sticky; z-index: var(--wh-z-sticky); inset-block-end: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--wh-space-2); padding: var(--wh-space-3) var(--wh-space-4); background: var(--wh-color-surface-elevated); border-block-start: var(--wh-border-width-default) solid var(--wh-color-border-default); box-shadow: 0 calc(var(--wh-space-2) * -1) var(--wh-space-4) color-mix(in srgb, var(--wh-color-neutral-900) 8%, transparent); }
html[data-wast-ui] .wh-error-summary { padding: var(--wh-space-4); color: var(--wh-color-status-negative); background: var(--wh-color-status-negative-surface); border: var(--wh-border-width-default) solid var(--wh-color-border-error); border-radius: var(--wh-radius-lg); }
html[data-wast-ui] .wh-error-summary__title { margin: 0 0 var(--wh-space-2); font-size: var(--wh-font-size-md); }
html[data-wast-ui] .wh-error-summary ul { margin: 0; padding-inline-start: var(--wh-space-5); }
html[data-wast-ui] .wh-error-summary a { color: inherit; }
html[data-wast-ui] .wh-review-summary { display: grid; gap: var(--wh-space-4); padding: var(--wh-space-5); background: var(--wh-color-surface-subtle); border-radius: var(--wh-radius-xl); }

/* Record and details */
html[data-wast-ui] .wh-record-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--wh-space-4); padding: var(--wh-space-5); background: var(--wh-color-surface-card); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-xl); }
html[data-wast-ui] .wh-record-summary__identity { display: flex; align-items: center; gap: var(--wh-space-3); min-inline-size: 0; }
html[data-wast-ui] .wh-record-summary__title { margin: 0; font-size: var(--wh-font-size-2xl); }
html[data-wast-ui] .wh-record-summary__subtitle { margin: var(--wh-space-1) 0 0; color: var(--wh-color-text-secondary); }
html[data-wast-ui] .wh-key-value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wh-space-4); margin: 0; }
html[data-wast-ui] .wh-key-value { min-inline-size: 0; }
html[data-wast-ui] .wh-key-value dt { margin-block-end: var(--wh-space-1); color: var(--wh-color-text-muted); font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-key-value dd { margin: 0; color: var(--wh-color-text-primary); overflow-wrap: anywhere; }
html[data-wast-ui] .wh-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
html[data-wast-ui] .wh-timeline__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--wh-space-3); padding-block-end: var(--wh-space-5); }
html[data-wast-ui] .wh-timeline__item::before { content: ""; position: absolute; inset-block: 1.25rem 0; inset-inline-start: calc(var(--wh-space-2) - 1px); inline-size: var(--wh-border-width-strong); background: var(--wh-color-border-default); }
html[data-wast-ui] .wh-timeline__item:last-child::before { display: none; }
html[data-wast-ui] .wh-timeline__marker { position: relative; z-index: 1; inline-size: var(--wh-space-4); block-size: var(--wh-space-4); margin-block-start: var(--wh-space-1); background: var(--wh-color-action-primary); border: var(--wh-border-width-strong) solid var(--wh-color-surface-card); border-radius: var(--wh-radius-full); }
html[data-wast-ui] .wh-audit-entry { display: grid; gap: var(--wh-space-1); }
html[data-wast-ui] .wh-audit-entry__meta { color: var(--wh-color-text-muted); font-size: var(--wh-font-size-xs); }
html[data-wast-ui] .wh-audit-entry__change { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wh-space-2); }
html[data-wast-ui] .wh-attachment-list { display: grid; gap: var(--wh-space-2); margin: 0; padding: 0; list-style: none; }
html[data-wast-ui] .wh-attachment { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--wh-space-3); padding: var(--wh-space-3); background: var(--wh-color-surface-subtle); border-radius: var(--wh-radius-lg); }
html[data-wast-ui] .wh-attachment__meta { color: var(--wh-color-text-muted); font-size: var(--wh-font-size-xs); }

/* Workflow and approval */
html[data-wast-ui] .wh-approval-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wh-space-4); padding: var(--wh-space-5); background: var(--wh-color-surface-card); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-inline-start: var(--wh-border-width-strong) solid var(--wh-color-status-waiting); border-radius: var(--wh-radius-xl); }
html[data-wast-ui] .wh-approval-panel__title { margin: 0 0 var(--wh-space-1); font-size: var(--wh-font-size-xl); }
html[data-wast-ui] .wh-approval-panel__description { margin: 0; color: var(--wh-color-text-secondary); }
html[data-wast-ui] .wh-approval-panel__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wh-space-2); }
html[data-wast-ui] .wh-workflow { display: grid; grid-template-columns: repeat(var(--wh-workflow-steps, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
html[data-wast-ui] .wh-workflow[data-wh-steps="5"] { --wh-workflow-steps: 5; }
html[data-wast-ui] .wh-workflow__step { position: relative; display: grid; justify-items: center; gap: var(--wh-space-2); padding-inline: var(--wh-space-2); text-align: center; }
html[data-wast-ui] .wh-workflow__step::before { content: ""; position: absolute; z-index: 0; inset-block-start: calc(var(--wh-space-4) - 1px); inset-inline-start: calc(-50% + var(--wh-space-4)); inline-size: calc(100% - var(--wh-space-8)); block-size: var(--wh-border-width-strong); background: var(--wh-color-border-default); }
html[data-wast-ui] .wh-workflow__step:first-child::before { display: none; }
html[data-wast-ui] .wh-workflow__marker { position: relative; z-index: 1; display: grid; place-items: center; inline-size: var(--wh-space-8); block-size: var(--wh-space-8); color: var(--wh-color-text-muted); background: var(--wh-color-surface-card); border: var(--wh-border-width-strong) solid var(--wh-color-border-strong); border-radius: var(--wh-radius-full); font-weight: var(--wh-font-weight-bold); }
html[data-wast-ui] .wh-workflow__step[data-wh-state="completed"] .wh-workflow__marker { color: var(--wh-color-text-on-primary); background: var(--wh-color-status-positive); border-color: var(--wh-color-status-positive); }
html[data-wast-ui] .wh-workflow__step[data-wh-state="current"] .wh-workflow__marker { color: var(--wh-color-text-on-primary); background: var(--wh-color-action-primary); border-color: var(--wh-color-action-primary); box-shadow: var(--wh-focus-ring); }
html[data-wast-ui] .wh-workflow__step[data-wh-state="failed"] .wh-workflow__marker { color: var(--wh-color-text-on-primary); background: var(--wh-color-status-negative); border-color: var(--wh-color-status-negative); }
html[data-wast-ui] .wh-workflow__label { color: var(--wh-color-text-secondary); font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-workflow__step[data-wh-state="current"] .wh-workflow__label { color: var(--wh-color-text-primary); font-weight: var(--wh-font-weight-bold); }

/* Operational components */
html[data-wast-ui] .wh-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wh-space-4); }
html[data-wast-ui] .wh-stat-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wh-space-3); padding: var(--wh-space-4); color: var(--wh-color-text-primary); background: var(--wh-color-surface-card); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-xl); text-decoration: none; }
html[data-wast-ui] .wh-stat-card[href]:hover { border-color: var(--wh-color-border-interactive); box-shadow: var(--wh-elevation-2); }
html[data-wast-ui] .wh-stat-card__label { color: var(--wh-color-text-muted); font-size: var(--wh-font-size-sm); }
html[data-wast-ui] .wh-stat-card__value { margin-block: var(--wh-space-1); font-size: var(--wh-font-size-3xl); font-weight: var(--wh-font-weight-bold); line-height: var(--wh-line-height-tight); }
html[data-wast-ui] .wh-stat-card__secondary { color: var(--wh-color-text-secondary); font-size: var(--wh-font-size-xs); }
html[data-wast-ui] .wh-stat-card__trend[data-wh-tone="positive"] { color: var(--wh-color-status-positive); }
html[data-wast-ui] .wh-stat-card__trend[data-wh-tone="negative"] { color: var(--wh-color-status-negative); }
html[data-wast-ui] .wh-stat-card__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; color: var(--wh-color-action-primary); background: var(--wh-color-action-primary-subtle); border-radius: var(--wh-radius-lg); }
html[data-wast-ui] .wh-operational-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--wh-space-3); padding: var(--wh-space-4); background: var(--wh-color-status-warning-surface); border: var(--wh-border-width-default) solid var(--wh-color-status-warning); border-radius: var(--wh-radius-xl); }
html[data-wast-ui] .wh-operational-alert__deadline { color: var(--wh-color-status-warning); font-size: var(--wh-font-size-sm); font-weight: var(--wh-font-weight-bold); }
html[data-wast-ui] .wh-quick-action { display: flex; align-items: center; gap: var(--wh-space-3); min-block-size: var(--wh-control-height-touch); padding: var(--wh-space-3) var(--wh-space-4); color: var(--wh-color-text-primary); background: var(--wh-color-surface-card); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-xl); font: inherit; font-weight: var(--wh-font-weight-semibold); text-align: start; text-decoration: none; cursor: pointer; }
html[data-wast-ui] .wh-quick-action:hover { border-color: var(--wh-color-border-interactive); background: var(--wh-component-control-hover); }

/* Optional action-oriented mobile representation; comparative tables remain tables. */
html[data-wast-ui] .wh-responsive-records { display: none; gap: var(--wh-space-3); }
html[data-wast-ui] .wh-responsive-record-card { display: grid; gap: var(--wh-space-3); padding: var(--wh-space-4); background: var(--wh-color-surface-card); border: var(--wh-border-width-default) solid var(--wh-color-border-default); border-radius: var(--wh-radius-xl); }

@media (max-width: 64rem) {
  html[data-wast-ui] .wh-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wast-ui] .wh-key-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-wast-ui] .wh-form-grid > [data-wh-span="third"] { grid-column: span 6; }
}

@media (max-width: 48rem) {
  html[data-wast-ui] .wh-page-header { grid-template-columns: 1fr; align-items: start; }
  html[data-wast-ui] .wh-page-header__actions { justify-content: flex-start; }
  html[data-wast-ui] .wh-filter-bar > :not(.wh-filter-bar__primary, .wh-filter-bar__actions, [data-wh-mobile="visible"]) { display: none; }
  html[data-wast-ui] .wh-approval-panel { grid-template-columns: 1fr; }
  html[data-wast-ui] .wh-workflow { grid-template-columns: 1fr; gap: var(--wh-space-3); }
  html[data-wast-ui] .wh-workflow__step { grid-template-columns: auto 1fr; justify-items: start; align-items: center; text-align: start; }
  html[data-wast-ui] .wh-workflow__step::before { inset-block: calc(-1 * var(--wh-space-3)) auto; inset-inline-start: calc(var(--wh-space-4) - 1px); inline-size: var(--wh-border-width-strong); block-size: var(--wh-space-3); }
}

@media (max-width: 30rem) {
  html[data-wast-ui] .wh-page-header__actions > .wh-btn { flex: 1 1 auto; }
  html[data-wast-ui] .wh-section-header { align-items: stretch; flex-direction: column; }
  html[data-wast-ui] .wh-filter-bar__primary { flex-basis: 100%; }
  html[data-wast-ui] .wh-filter-bar__actions { inline-size: 100%; }
  html[data-wast-ui] .wh-filter-bar__actions > .wh-btn { flex: 1; }
  html[data-wast-ui] .wh-bulk-action-bar__actions { inline-size: 100%; }
  html[data-wast-ui] .wh-pagination { justify-content: center; }
  html[data-wast-ui] .wh-pagination__summary { inline-size: 100%; text-align: center; }
  html[data-wast-ui] .wh-form-grid > *,
  html[data-wast-ui] .wh-form-grid > [data-wh-span="third"] { grid-column: 1 / -1; }
  html[data-wast-ui] .wh-sticky-actions > .wh-btn { flex: 1 1 auto; }
  html[data-wast-ui] .wh-record-summary { grid-template-columns: 1fr; }
  html[data-wast-ui] .wh-key-value-grid { grid-template-columns: 1fr; }
  html[data-wast-ui] .wh-attachment { grid-template-columns: auto minmax(0, 1fr); }
  html[data-wast-ui] .wh-attachment > :last-child { grid-column: 1 / -1; }
  html[data-wast-ui] .wh-stat-grid { grid-template-columns: 1fr; }
  html[data-wast-ui] .wh-operational-alert { grid-template-columns: auto minmax(0, 1fr); }
  html[data-wast-ui] .wh-operational-alert > :last-child { grid-column: 1 / -1; }
  html[data-wast-ui] [data-wh-responsive="cards"] .wh-table-shell { display: none; }
  html[data-wast-ui] [data-wh-responsive="cards"] .wh-responsive-records { display: grid; }
}