@ntmats/hc-ui 0.1.1 → 0.3.0

package/dist/styles.css

@@ -14,21 +14,30 @@
 }
 [data-hc-ds] .hc-ui-surface[data-tone='elevated'] {
   background: var(--hc-color-bg-elevated);
-  border: 1px solid var(--hc-color-border);
   border-radius: var(--hc-radius-md);
   box-shadow: var(--hc-shadow-card);
 }
 [data-hc-ds] .hc-ui-surface[data-tone='overlay'] {
   background: var(--hc-color-bg-elevated);
-  border: 1px solid var(--hc-color-border);
   border-radius: var(--hc-radius-md);
   box-shadow: var(--hc-shadow-float);
 }
+/* HCUI's `surface` mixin: surface fill in both themes, the card ring and soft shadow
+   (no border), 20px corners; 24px with radius="xl" (HCUI's card-surface). */
+[data-hc-ds] .hc-ui-surface[data-tone='card'] {
+  background: var(--hc-color-bg-surface);
+  border-radius: var(--hc-radius-lg);
+  box-shadow: var(--hc-shadow-card);
+}
+[data-hc-ds] .hc-ui-surface:not([data-tone='page'], [data-tone='main'])[data-radius='md'] { border-radius: var(--hc-radius-md); }
+[data-hc-ds] .hc-ui-surface:not([data-tone='page'], [data-tone='main'])[data-radius='lg'] { border-radius: var(--hc-radius-lg); }
+[data-hc-ds] .hc-ui-surface:not([data-tone='page'], [data-tone='main'])[data-radius='xl'] { border-radius: var(--hc-radius-xl); }
 
 /* Visual reference: HCUI segmented track (3px inset, 2px gap, raised knob). */
 [data-hc-ds] .hc-ui-segmented {
   display: inline-flex;
   align-items: center;
+  flex: 0 0 auto;
   gap: 2px;
   max-width: 100%;
   padding: 3px;
@@ -83,7 +92,7 @@
 
 [data-hc-ds] .hc-ui-segmented__option:focus-visible {
   outline: 2px solid var(--hc-focus-ring);
-  outline-offset: 2px;
+  outline-offset: var(--hc-focus-ring-offset, 2px);
 }
 
 [data-hc-ds] .hc-ui-segmented__option:disabled { opacity: 0.48; cursor: not-allowed; }
@@ -91,6 +100,64 @@
 [data-hc-ds] .hc-ui-segmented__icon svg { display: block; width: 18px; height: 18px; }
 [data-hc-ds] .hc-ui-segmented__label { overflow: hidden; text-overflow: ellipsis; }
 
+/* Equal width: one grid column (or row) per option, as wide as the widest, or as
+   --hc-segmented-option-width (the `optionWidth` prop). */
+[data-hc-ds] .hc-ui-segmented[data-equal-width] {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--hc-segmented-option-width, minmax(0, 1fr));
+}
+[data-hc-ds] .hc-ui-segmented[data-equal-width][data-orientation='vertical'] {
+  grid-auto-flow: row;
+  grid-auto-columns: auto;
+  grid-auto-rows: minmax(0, 1fr);
+}
+
+/* Sliding knob — HCUI's point cost toggle (`.point-cost-toggle`): no gap, one knob
+   that moves its own width with a pop, 34px options (a 40px track), 12px/600 labels,
+   muted until chosen, and the whole track shrinks on press. */
+[data-hc-ds] .hc-ui-segmented[data-indicator='slide'] {
+  position: relative;
+  isolation: isolate;
+  gap: 0;
+  transition: transform var(--hc-dur-short) var(--hc-ease-standard);
+}
+[data-hc-ds] .hc-ui-segmented[data-indicator='slide']:has(.hc-ui-segmented__option:active:not(:disabled)) { transform: scale(0.97); }
+[data-hc-ds] .hc-ui-segmented__indicator {
+  position: absolute;
+  z-index: -1;
+  top: 3px;
+  left: 3px;
+  width: calc((100% - 6px) / var(--hc-segmented-count, 1));
+  height: calc(100% - 6px);
+  background-color: var(--hc-color-bg-surface);
+  border-radius: var(--hc-radius-full);
+  box-shadow: var(--hc-shadow-knob);
+  transform: translateX(calc(var(--hc-segmented-index, 0) * 100%));
+  transition: transform 260ms var(--hc-ease-pop), background-color var(--hc-transition-base);
+  pointer-events: none;
+}
+[data-hc-ds] .hc-ui-segmented[data-orientation='vertical'] .hc-ui-segmented__indicator {
+  width: calc(100% - 6px);
+  height: calc((100% - 6px) / var(--hc-segmented-count, 1));
+  transform: translateY(calc(var(--hc-segmented-index, 0) * 100%));
+}
+[data-hc-ds] .hc-ui-segmented[data-indicator='slide'] .hc-ui-segmented__option {
+  min-height: 34px;
+  padding: 0 var(--hc-space-2);
+  color: var(--hc-color-text-muted);
+  font-size: var(--hc-font-size-xs);
+  font-weight: var(--hc-font-weight-semibold);
+  font-stretch: normal;
+  transition: color var(--hc-transition-base);
+}
+[data-hc-ds] .hc-ui-segmented[data-indicator='slide'][data-density='compact'] .hc-ui-segmented__option { min-height: 32px; }
+[data-hc-ds] .hc-ui-segmented[data-indicator='slide'] .hc-ui-segmented__option[data-selected] {
+  color: var(--hc-color-text-primary);
+  background: transparent;
+  box-shadow: none;
+}
+
 /* Shared by Button, IconButton and Chip: reset, touch and press feedback. */
 [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip) {
   appearance: none;
@@ -116,7 +183,7 @@
 
 [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip):focus-visible {
   outline: 2px solid var(--hc-focus-ring);
-  outline-offset: 2px;
+  outline-offset: var(--hc-focus-ring-offset, 2px);
 }
 
 [data-hc-ds] :is(.hc-ui-button__icon, .hc-ui-icon-button__icon, .hc-ui-chip__icon) { display: inline-flex; flex: 0 0 auto; }
@@ -157,9 +224,23 @@
 [data-hc-ds] .hc-ui-button[data-variant='primary'] { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); }
 [data-hc-ds] .hc-ui-button[data-variant='outline'] { background-color: transparent; box-shadow: inset 0 0 0 1px var(--hc-color-border-strong); }
 [data-hc-ds] .hc-ui-button[data-variant='danger'] { color: var(--hc-color-text-on-danger); background-color: var(--hc-color-bg-danger); }
+[data-hc-ds] .hc-ui-button[data-size='sm'] { min-height: var(--hc-control-height-chip); padding: 0 var(--hc-space-4); font-size: var(--hc-font-size-sm); }
 [data-hc-ds] .hc-ui-button[data-size='lg'] { min-height: var(--hc-control-height-lg); padding: 0 var(--hc-space-6); font-size: var(--hc-font-size-base); }
 [data-hc-ds] .hc-ui-button[data-full-width] { width: 100%; }
 [data-hc-ds] .hc-ui-button:disabled { opacity: 0.4; cursor: default; }
+[data-hc-ds] .hc-ui-button { max-width: 100%; }
+[data-hc-ds] .hc-ui-button__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+[data-hc-ds] .hc-ui-button[aria-busy='true'] { cursor: progress; }
+[data-hc-ds] .hc-ui-button__spinner {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--hc-radius-full);
+  animation: hc-ui-spin 700ms linear infinite;
+}
+@keyframes hc-ui-spin { to { transform: rotate(360deg); } }
 
 /* IconButton — HCUI icon-button / close-button. */
 [data-hc-ds] .hc-ui-icon-button {
@@ -175,6 +256,22 @@
 [data-hc-ds] .hc-ui-icon-button[data-tone='secondary'] { color: var(--hc-color-text-secondary); }
 /* 36px keeps a 44px touch target; the veil stays clipped to the circle. */
 [data-hc-ds] .hc-ui-icon-button[data-size='sm']::before { content: ''; position: absolute; inset: -4px; }
+/* Fills: surface (HCUI's mobile theme button: surface, card ring and shadow) and ghost
+   (HCUI's desktop utilities: no fill, muted fill and primary text on hover). */
+[data-hc-ds] .hc-ui-icon-button[data-variant='surface'] { background-color: var(--hc-color-bg-surface); box-shadow: var(--hc-shadow-card); }
+[data-hc-ds] .hc-ui-icon-button[data-variant='outline'] { background-color: var(--hc-color-bg-surface); box-shadow: inset 0 0 0 1px var(--hc-color-border); }
+[data-hc-ds] .hc-ui-icon-button[data-variant='ghost'] { background-color: transparent; }
+@media (hover: hover) {
+  [data-hc-ds] .hc-ui-icon-button[data-variant='ghost']:hover:not(:disabled, [aria-pressed='true']) { color: var(--hc-color-text-primary); background-color: var(--hc-color-bg-muted); }
+}
+[data-hc-ds] .hc-ui-icon-button[data-shape='rounded'] { border-radius: var(--hc-radius-sm); }
+[data-hc-ds] .hc-ui-icon-button[aria-pressed='true'] { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); }
+/* iconKey: the new icon turns in (HCUI's theme sun and moon). */
+[data-hc-ds] .hc-ui-icon-button__icon[data-swap] { animation: hc-ui-icon-swap 360ms var(--hc-ease-pop) both; }
+@keyframes hc-ui-icon-swap {
+  from { opacity: 0; transform: rotate(-60deg) scale(0.6); }
+  to { opacity: 1; transform: rotate(0) scale(1); }
+}
 [data-hc-ds] .hc-ui-icon-button:disabled { opacity: 0.4; cursor: default; }
 
 /* Chip — HCUI chip / chip-active. */
@@ -192,11 +289,194 @@
 }
 @media (hover: hover) {
   [data-hc-ds] .hc-ui-chip:hover:not(:disabled) { background-color: var(--hc-color-bg-muted); }
-  [data-hc-ds] .hc-ui-chip[aria-pressed='true']:hover:not(:disabled) { background-color: var(--hc-color-accent); }
+  [data-hc-ds] .hc-ui-chip:is([aria-pressed='true'], [aria-checked='true']):hover:not(:disabled) { background-color: var(--hc-color-accent); }
 }
-[data-hc-ds] .hc-ui-chip[aria-pressed='true'] { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); box-shadow: none; }
+/* Selected: a toggle (aria-pressed) or the chosen radio of a SheetChips (aria-checked). */
+[data-hc-ds] .hc-ui-chip:is([aria-pressed='true'], [aria-checked='true']) { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); box-shadow: none; }
 [data-hc-ds] .hc-ui-chip:disabled { opacity: 0.4; cursor: default; }
 
+/* Chip as a filter (HCUI's .desktop-filter-bar__pill, .desktop-sort__trigger,
+   .quick-filters__chip and .rules-results__pill): count, badge, chevron, applied and
+   open rings, sizes, the quiet variant and the remove button. */
+[data-hc-ds] .hc-ui-chip__count { color: var(--hc-color-text-secondary); font-weight: var(--hc-font-weight-regular); }
+[data-hc-ds] .hc-ui-chip__badge {
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 var(--hc-space-1);
+  color: var(--hc-color-bg-surface);
+  background-color: var(--hc-color-text-primary);
+  border-radius: var(--hc-radius-full);
+  font-size: var(--hc-font-size-2xs);
+  font-variant-numeric: tabular-nums;
+}
+[data-hc-ds] .hc-ui-chip__chevron { display: inline-flex; flex: 0 0 auto; }
+[data-hc-ds] .hc-ui-chip__chevron svg { display: block; }
+/* Applied filter, or the trigger of an open popup: a 1.5px ring (the selected fill below wins). */
+[data-hc-ds] .hc-ui-chip:is([data-applied], [aria-expanded='true']):not([aria-pressed='true'], [aria-checked='true'], [data-selected]) { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
+/* Line height `normal`, as HCUI's filter pills: on 2x screens 18px moves the text by half a pixel. */
+[data-hc-ds] .hc-ui-chip[data-size='sm'] { padding: 0 var(--hc-space-3); font-size: var(--hc-font-size-xs); line-height: normal; }
+[data-hc-ds] .hc-ui-chip[data-size='xs'] {
+  gap: var(--hc-space-1);
+  min-height: 26px;
+  height: 26px;
+  padding: 0 var(--hc-space-2);
+  background-color: var(--hc-color-bg-muted);
+  box-shadow: none;
+  font-size: var(--hc-font-size-2xs);
+}
+[data-hc-ds] .hc-ui-chip[data-size='xs']:is([data-applied], [aria-expanded='true']):not([aria-pressed='true'], [aria-checked='true'], [data-selected]) { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
+/* Quiet: HCUI's rule filter pills, lighter until applied. */
+[data-hc-ds] .hc-ui-chip[data-variant='quiet'] {
+  gap: 5px;
+  padding: 0 13px;
+  color: var(--hc-color-text-secondary);
+  box-shadow: inset 0 0 0 1px var(--hc-color-border);
+  font-weight: 560;
+}
+[data-hc-ds] .hc-ui-chip[data-variant='quiet'][data-applied] { color: var(--hc-color-text-primary); box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); font-weight: 720; }
+[data-hc-ds] .hc-ui-chip[data-variant='quiet'] .hc-ui-chip__badge { padding: 0 5px; font-weight: var(--hc-font-weight-bold); font-variant-numeric: normal; line-height: 18px; }
+/* With a remove button: the span is the pill and holds two plain buttons. */
+[data-hc-ds] .hc-ui-chip[data-clearable] { cursor: default; }
+[data-hc-ds] .hc-ui-chip[data-clearable][data-size='xs'] { gap: 2px; padding: 0 2px 0 var(--hc-space-2); max-width: 100%; }
+[data-hc-ds] :is(.hc-ui-chip__main, .hc-ui-chip__clear) {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  font: inherit;
+  font-variation-settings: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-chip__main { display: inline-flex; align-items: center; gap: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-hc-ds] span.hc-ui-chip__main { display: block; cursor: inherit; }
+[data-hc-ds] .hc-ui-chip__clear {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  color: var(--hc-color-text-secondary);
+  border-radius: var(--hc-radius-full);
+}
+[data-hc-ds] .hc-ui-chip__clear svg { display: block; }
+[data-hc-ds] .hc-ui-chip__clear:hover:not(:disabled) { color: var(--hc-color-text-primary); background-color: color-mix(in srgb, currentColor 18%, transparent); }
+[data-hc-ds] :is(.hc-ui-chip__main, .hc-ui-chip__clear):focus-visible { outline: 2px solid var(--hc-focus-ring); outline-offset: var(--hc-focus-ring-offset, 2px); }
+[data-hc-ds] .hc-ui-chip__clear:disabled, [data-hc-ds] button.hc-ui-chip__main:disabled { cursor: default; }
+[data-hc-ds] .hc-ui-chip[data-disabled] { opacity: 0.4; }
+/* Selected with a remove button: the contrast fill at xs (HCUI's active quick filter), the accent otherwise. */
+[data-hc-ds] .hc-ui-chip[data-clearable][data-selected],
+[data-hc-ds] .hc-ui-chip[data-clearable][data-selected]:hover { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); box-shadow: none; }
+[data-hc-ds] .hc-ui-chip[data-size='xs']:is([aria-pressed='true'], [aria-checked='true'], [data-selected]),
+[data-hc-ds] .hc-ui-chip[data-size='xs']:is([aria-pressed='true'], [aria-checked='true'], [data-selected]):hover { color: var(--hc-color-text-on-contrast); background-color: var(--hc-color-bg-contrast); }
+[data-hc-ds] .hc-ui-chip:is([aria-pressed='true'], [aria-checked='true'], [data-selected]) .hc-ui-chip__count { color: inherit; }
+[data-hc-ds] .hc-ui-chip[data-selected] .hc-ui-chip__clear { color: inherit; }
+
+/* FilterBar — a row of filters with start, end and footer slots (HCUI's .desktop-filter-bar,
+   .desktop-filter-bar--sheet and .quick-filters). Placement stays with the caller. */
+[data-hc-ds] .hc-ui-filter-bar { box-sizing: border-box; min-width: 0; }
+[data-hc-ds] .hc-ui-filter-bar[data-sticky] {
+  position: sticky;
+  top: var(--hc-filter-bar-top, 0px);
+  z-index: 3;
+  padding-block: var(--hc-space-2);
+  background-color: var(--hc-color-bg-surface);
+}
+[data-hc-ds] .hc-ui-filter-bar__line { display: flex; align-items: center; gap: var(--hc-space-2); min-width: 0; }
+[data-hc-ds] :is(.hc-ui-filter-bar__start, .hc-ui-filter-bar__end) { display: flex; flex: 0 0 auto; align-items: center; gap: var(--hc-space-2); }
+[data-hc-ds] .hc-ui-filter-bar__end { margin-inline-start: auto; }
+[data-hc-ds] .hc-ui-filter-bar__row { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--hc-space-2); min-width: 0; }
+[data-hc-ds] .hc-ui-filter-bar[data-density='compact'] .hc-ui-filter-bar__row { gap: var(--hc-space-1); }
+[data-hc-ds] .hc-ui-filter-bar__footer { margin-top: var(--hc-space-2); }
+/* One line that scrolls sideways. 4px of padding above and below, taken back by the margin,
+   keep focus rings from being cut without changing the layout. */
+[data-hc-ds] .hc-ui-filter-bar[data-layout='scroll'] .hc-ui-filter-bar__row {
+  flex-wrap: nowrap;
+  order: 1;
+  flex-basis: 100%;
+  margin: -4px calc(-1 * var(--hc-filter-bar-bleed, 0px));
+  padding: 4px var(--hc-filter-bar-bleed, 0px);
+  overflow-x: auto;
+  scroll-padding-inline: var(--hc-filter-bar-bleed, 0px);
+  scrollbar-width: none;
+}
+[data-hc-ds] .hc-ui-filter-bar[data-layout='scroll'] .hc-ui-filter-bar__row::-webkit-scrollbar { display: none; }
+/* There is no room beside the slots: they share the first line (the start one grows, as a
+   search field) and the filters scroll on their own line under them. */
+[data-hc-ds] .hc-ui-filter-bar[data-layout='scroll'] .hc-ui-filter-bar__line { flex-wrap: wrap; }
+[data-hc-ds] .hc-ui-filter-bar[data-layout='scroll'] .hc-ui-filter-bar__start { flex: 1 1 auto; min-width: 0; }
+@media (max-width: 959.98px) {
+  [data-hc-ds] .hc-ui-filter-bar[data-layout='auto'] .hc-ui-filter-bar__row {
+    flex-wrap: nowrap;
+    order: 1;
+    flex-basis: 100%;
+    margin: -4px calc(-1 * var(--hc-filter-bar-bleed, 0px));
+    padding: 4px var(--hc-filter-bar-bleed, 0px);
+    overflow-x: auto;
+    scroll-padding-inline: var(--hc-filter-bar-bleed, 0px);
+    scrollbar-width: none;
+  }
+  [data-hc-ds] .hc-ui-filter-bar[data-layout='auto'] .hc-ui-filter-bar__row::-webkit-scrollbar { display: none; }
+  [data-hc-ds] .hc-ui-filter-bar[data-layout='auto'] .hc-ui-filter-bar__line { flex-wrap: wrap; }
+  [data-hc-ds] .hc-ui-filter-bar[data-layout='auto'] .hc-ui-filter-bar__start { flex: 1 1 auto; min-width: 0; }
+}
+
+/* Field — HCUI field. One focus ring, on the pill, never on the inner input. */
+[data-hc-ds] .hc-ui-field { display: grid; align-content: start; gap: var(--hc-space-1); min-width: 0; font-family: var(--hc-font-body); font-variation-settings: 'ROND' var(--hc-rond); }
+[data-hc-ds] .hc-ui-field__label { color: var(--hc-color-text-secondary); font-size: var(--hc-font-size-sm); font-weight: var(--hc-font-weight-medium); line-height: var(--hc-line-height-sm); }
+[data-hc-ds] .hc-ui-field__label[data-hidden] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+[data-hc-ds] .hc-ui-field__control {
+  display: flex;
+  align-items: center;
+  gap: var(--hc-space-2);
+  min-height: var(--hc-control-height-md);
+  padding: 0 var(--hc-space-4);
+  color: var(--hc-color-text-primary);
+  background-color: var(--hc-color-bg-muted);
+  border-radius: var(--hc-radius-full);
+  transition: box-shadow var(--hc-transition-fast), background-color var(--hc-transition-fast);
+}
+[data-hc-ds] .hc-ui-field[data-density='compact'] .hc-ui-field__control { min-height: var(--hc-control-height-sm); padding: 0 var(--hc-space-3); }
+[data-hc-ds] .hc-ui-field__control:focus-within { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
+[data-hc-ds] .hc-ui-field[data-invalid] .hc-ui-field__control { box-shadow: inset 0 0 0 1.5px var(--hc-color-danger); }
+[data-hc-ds] .hc-ui-field[data-disabled] .hc-ui-field__control { opacity: 0.4; }
+[data-hc-ds] .hc-ui-field__input {
+  appearance: none;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: var(--hc-font-size-base);
+  font-variation-settings: inherit;
+  line-height: var(--hc-line-height-base);
+  background: transparent;
+  border: 0;
+  outline: 0;
+  box-shadow: none;
+}
+[data-hc-ds] .hc-ui-field__input::placeholder { color: var(--hc-color-placeholder); opacity: 1; }
+[data-hc-ds] :is(.hc-ui-field__icon, .hc-ui-field__end) { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--hc-color-text-muted); }
+[data-hc-ds] .hc-ui-field__icon svg { display: block; }
+[data-hc-ds] :is(.hc-ui-field__hint, .hc-ui-field__error) { margin: 0; font-size: var(--hc-font-size-xs); line-height: var(--hc-line-height-xs); }
+[data-hc-ds] .hc-ui-field__hint { color: var(--hc-color-text-muted); }
+[data-hc-ds] .hc-ui-field__error { color: var(--hc-color-text-on-danger); }
+
 /* Skeleton — zero specificity on purpose: the consumer sizes each shape. */
 @keyframes hc-ui-skeleton-pulse {
   0%, 100% { opacity: 1; }
@@ -215,7 +495,949 @@
 
 @media (prefers-reduced-motion: reduce) {
   [data-hc-ds] .hc-ui-segmented__option { transition: none; }
+  [data-hc-ds] .hc-ui-segmented[data-indicator='slide'] .hc-ui-segmented__option { transition: none; }
+  [data-hc-ds] :is(.hc-ui-segmented[data-indicator='slide'], .hc-ui-segmented__indicator) { transition: none; }
+  [data-hc-ds] .hc-ui-segmented[data-indicator='slide']:has(.hc-ui-segmented__option:active:not(:disabled)) { transform: none; }
+  [data-hc-ds] .hc-ui-icon-button__icon[data-swap] { animation: none; }
   [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip) { transition: none; }
+  [data-hc-ds] .hc-ui-field__control { transition: none; }
+  [data-hc-ds] .hc-ui-button__spinner { animation: none; }
   [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip):active:not(:disabled) { transform: none; }
   :where([data-hc-ds] .hc-ui-skeleton) { animation: none; }
 }
+
+/* Meter — HCUI's bars of points against the limit: the mobile team bar (3px, no
+   track, `team-bar__meter`), the desktop sidebar draft (4px, `desktop-sidebar__meter`)
+   and the team rules bar (5px, square fill, limit line, `team-rules__bar`).
+   Display and position have zero specificity: the caller places it (absolute, grid). */
+:where([data-hc-ds] .hc-ui-meter) { position: relative; display: block; }
+[data-hc-ds] .hc-ui-meter {
+  height: 4px;
+  overflow: hidden;
+  background-color: var(--hc-color-bg-muted);
+  border-radius: var(--hc-radius-full);
+}
+[data-hc-ds] .hc-ui-meter[data-thickness='3'] { height: 3px; }
+[data-hc-ds] .hc-ui-meter[data-thickness='5'] { height: 5px; }
+[data-hc-ds] .hc-ui-meter[data-track='border'] { background-color: var(--hc-color-border); }
+[data-hc-ds] .hc-ui-meter[data-track='none'] { overflow: visible; background-color: transparent; border-radius: 0; }
+[data-hc-ds] .hc-ui-meter__fill {
+  display: block;
+  height: 100%;
+  background-color: var(--hc-color-text-primary);
+  border-radius: inherit;
+}
+/* Without a track the fill starts flush with the edge and rounds only its end. */
+[data-hc-ds] .hc-ui-meter[data-track='none'][data-cap='round'] .hc-ui-meter__fill { border-radius: 0 var(--hc-radius-full) var(--hc-radius-full) 0; }
+[data-hc-ds] .hc-ui-meter[data-cap='square'] .hc-ui-meter__fill { border-radius: 0; }
+[data-hc-ds] .hc-ui-meter[data-tone='over'] .hc-ui-meter__fill { background-color: var(--hc-color-danger); }
+/* Drawn only above the limit, over the danger fill: in the text color it shows in both themes. */
+[data-hc-ds] .hc-ui-meter__limit {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--hc-color-text-primary);
+}
+[data-hc-ds] .hc-ui-meter[data-animated] .hc-ui-meter__fill { transition: width var(--hc-transition-base); }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] .hc-ui-meter[data-animated] .hc-ui-meter__fill { transition: none; }
+}
+
+/* Checkbox — HCUI Checkbox. The native input sits transparently over the box. */
+[data-hc-ds] .hc-ui-checkbox {
+  --hc-checkbox-size: 20px;
+  --hc-checkbox-radius: 6px;
+  --hc-checkbox-icon: 14px;
+  position: relative;
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  width: var(--hc-checkbox-size);
+  height: var(--hc-checkbox-size);
+  vertical-align: middle;
+}
+[data-hc-ds] .hc-ui-checkbox[data-size='sm'] {
+  --hc-checkbox-size: 16px;
+  --hc-checkbox-radius: 5px;
+  --hc-checkbox-icon: 12px;
+}
+[data-hc-ds] .hc-ui-checkbox__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+[data-hc-ds] .hc-ui-checkbox__input:disabled { cursor: not-allowed; }
+[data-hc-ds] .hc-ui-checkbox__box {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--hc-checkbox-radius);
+  background-color: var(--hc-color-bg-surface);
+  box-shadow: inset 0 0 0 1.5px var(--hc-color-text-muted);
+  color: var(--hc-color-text-inverse);
+  pointer-events: none;
+  transition: background-color var(--hc-transition-fast), box-shadow var(--hc-transition-fast);
+}
+[data-hc-ds] :is(.hc-ui-checkbox__mark, .hc-ui-checkbox__mixed) {
+  display: block;
+  grid-area: 1 / 1;
+  width: var(--hc-checkbox-icon);
+  height: var(--hc-checkbox-icon);
+  visibility: hidden;
+}
+@media (hover: hover) {
+  [data-hc-ds] .hc-ui-checkbox__input:hover:not(:disabled) + .hc-ui-checkbox__box,
+  [data-hc-ds] label:hover .hc-ui-checkbox__input:not(:disabled) + .hc-ui-checkbox__box { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
+}
+[data-hc-ds] .hc-ui-checkbox__input:is(:checked, :indeterminate) + .hc-ui-checkbox__box {
+  background-color: var(--hc-color-accent);
+  box-shadow: none;
+}
+[data-hc-ds] .hc-ui-checkbox__input:checked:not(:indeterminate) + .hc-ui-checkbox__box .hc-ui-checkbox__mark,
+[data-hc-ds] .hc-ui-checkbox__input:indeterminate + .hc-ui-checkbox__box .hc-ui-checkbox__mixed {
+  visibility: visible;
+  animation: hc-ui-check-in 200ms var(--hc-ease-pop);
+}
+@keyframes hc-ui-check-in {
+  from { transform: scale(0.4); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+[data-hc-ds] .hc-ui-checkbox__input:focus-visible { outline: none; }
+[data-hc-ds] .hc-ui-checkbox__input:focus-visible + .hc-ui-checkbox__box {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, 2px);
+}
+[data-hc-ds] .hc-ui-checkbox__input:disabled + .hc-ui-checkbox__box {
+  background-color: var(--hc-color-bg-muted);
+  box-shadow: inset 0 0 0 1.5px var(--hc-color-text-disabled);
+}
+[data-hc-ds] .hc-ui-checkbox__input:disabled:is(:checked, :indeterminate) + .hc-ui-checkbox__box {
+  background-color: var(--hc-color-text-disabled);
+  box-shadow: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] .hc-ui-checkbox__box { transition: none; }
+  [data-hc-ds] .hc-ui-checkbox__input:checked:not(:indeterminate) + .hc-ui-checkbox__box .hc-ui-checkbox__mark,
+  [data-hc-ds] .hc-ui-checkbox__input:indeterminate + .hc-ui-checkbox__box .hc-ui-checkbox__mixed { animation: none; }
+}
+
+/* Dialog — native <dialog> in the top layer. `sm` is HCUI's desktop confirmation
+   (.desktop-confirm); `md` is HCUI's Sheet in its centered desktop form. */
+[data-hc-ds] .hc-ui-dialog {
+  box-sizing: border-box;
+  width: min(400px, calc(100vw - 32px));
+  max-width: none;
+  max-height: calc(100dvh - var(--hc-space-9));
+  margin: auto;
+  padding: var(--hc-space-5);
+  overflow: auto;
+  overscroll-behavior: contain;
+  color: var(--hc-color-text-primary);
+  background-color: var(--hc-color-bg-elevated);
+  border: 0;
+  border-radius: var(--hc-radius-lg);
+  font-family: var(--hc-font-body);
+  font-size: var(--hc-font-size-md);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  line-height: var(--hc-line-height-md);
+  outline: none;
+}
+[data-hc-ds] .hc-ui-dialog[open] { display: grid; align-content: start; gap: var(--hc-space-2); }
+[data-hc-ds] .hc-ui-dialog::backdrop { background-color: var(--hc-color-bg-overlay); }
+[data-hc-ds] .hc-ui-dialog[data-closing] { pointer-events: none; }
+[data-hc-ds] .hc-ui-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hc-space-3);
+  min-width: 0;
+}
+[data-hc-ds] .hc-ui-dialog__title {
+  min-width: 0;
+  margin: 0;
+  color: var(--hc-color-text-primary);
+  font-family: var(--hc-font-display);
+  font-size: var(--hc-font-size-lg);
+  font-weight: var(--hc-font-weight-semibold);
+  /* As HCUI's confirmation title, whose `font` shorthand resets the stretch; ROND stays. */
+  font-stretch: normal;
+  font-variation-settings: 'ROND' var(--hc-rond);
+  line-height: normal;
+}
+[data-hc-ds] .hc-ui-dialog__body { display: grid; gap: var(--hc-space-2); min-width: 0; }
+[data-hc-ds] .hc-ui-dialog__description {
+  margin: 0;
+  color: var(--hc-color-text-secondary);
+  font-size: var(--hc-font-size-sm);
+  line-height: 1.45;
+}
+[data-hc-ds] .hc-ui-dialog__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--hc-space-2);
+  margin-top: var(--hc-space-3);
+}
+/* HCUI's confirmation buttons are 38px, between Button sm (36) and md (44). */
+[data-hc-ds] .hc-ui-dialog[data-size='sm'] .hc-ui-dialog__actions .hc-ui-button[data-size='sm'] { min-height: 38px; }
+
+[data-hc-ds] .hc-ui-dialog[data-size='md'] {
+  width: min(440px, calc(100vw - 2 * var(--hc-space-6)));
+  padding: 0;
+  overflow: hidden;
+  border-radius: var(--hc-radius-sheet);
+  box-shadow: var(--hc-shadow-modal);
+  animation: hc-ui-dialog-in var(--hc-dur-medium) var(--hc-ease-standard) both;
+}
+[data-hc-ds] .hc-ui-dialog[data-size='md'][open] { display: flex; flex-direction: column; gap: 0; }
+[data-hc-ds] .hc-ui-dialog[data-size='md']::backdrop {
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  animation: hc-ui-backdrop-in var(--hc-dur-medium) var(--hc-ease-standard) both;
+}
+[data-hc-ds] .hc-ui-dialog[data-size='md'][data-closing] { animation: hc-ui-dialog-out var(--hc-dur-short) var(--hc-ease-emphasized-accel) forwards; }
+[data-hc-ds] .hc-ui-dialog[data-size='md'][data-closing]::backdrop { animation: hc-ui-backdrop-out var(--hc-dur-short) var(--hc-ease-standard) forwards; }
+[data-hc-ds] .hc-ui-dialog[data-size='md'] .hc-ui-dialog__header { flex: 0 0 auto; padding: var(--hc-space-5) var(--hc-space-5) var(--hc-space-3); }
+[data-hc-ds] .hc-ui-dialog[data-size='md'] .hc-ui-dialog__title {
+  font-size: var(--hc-font-size-xl);
+  font-weight: 720;
+  font-stretch: 88%;
+  line-height: var(--hc-line-height-xl);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  letter-spacing: var(--hc-letter-spacing-snug);
+}
+[data-hc-ds] .hc-ui-dialog[data-size='md'] .hc-ui-dialog__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--hc-space-5);
+  min-height: 0;
+  padding: var(--hc-space-1) var(--hc-space-5) var(--hc-space-5);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+[data-hc-ds] .hc-ui-dialog[data-size='md'] .hc-ui-dialog__actions {
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  margin: 0;
+  padding: var(--hc-space-3) var(--hc-space-5) var(--hc-space-5);
+  box-shadow: 0 -1px 0 var(--hc-color-border);
+}
+[data-hc-ds] .hc-ui-dialog[data-size='md'] .hc-ui-dialog__actions > * { flex: 1 1 0; }
+
+@keyframes hc-ui-dialog-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes hc-ui-dialog-out {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.97); }
+}
+@keyframes hc-ui-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes hc-ui-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] .hc-ui-dialog,
+  [data-hc-ds] .hc-ui-dialog::backdrop,
+  [data-hc-ds] .hc-ui-dialog[data-size='md'],
+  [data-hc-ds] .hc-ui-dialog[data-size='md'][data-closing],
+  [data-hc-ds] .hc-ui-dialog[data-size='md']::backdrop,
+  [data-hc-ds] .hc-ui-dialog[data-size='md'][data-closing]::backdrop { animation: none; }
+}
+
+/* Sheet — a Dialog size="md" that, at the bottom, is HCUI's mobile Sheet (sheet-panel,
+   sheet-host, sheet-header): full width, top corners rounded, grabber, safe area,
+   rising entry. `auto` is at the bottom below 960px, HCUI's cut. `--hc-sheet-drag`
+   tells the drag gesture where the sheet is, so no script reads the width. */
+/* [data-presentation] lifts it above the Dialog's own md width. */
+[data-hc-ds] .hc-ui-sheet[data-presentation] {
+  --hc-sheet-drag: off;
+  width: min(var(--hc-sheet-width, 440px), calc(100vw - 2 * var(--hc-space-6)));
+}
+[data-hc-ds] .hc-ui-sheet[data-presentation='bottom'] {
+  --hc-sheet-drag: on;
+  width: 100%;
+  max-width: none;
+  max-height: calc(100dvh - var(--hc-space-7) - env(safe-area-inset-top, 0px));
+  margin: auto 0 0;
+  padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--hc-space-3));
+  border-radius: var(--hc-radius-sheet) var(--hc-radius-sheet) 0 0;
+  touch-action: pan-y;
+  animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) both;
+  transition: height 320ms var(--hc-ease-sheet), max-height 320ms var(--hc-ease-sheet);
+}
+[data-hc-ds] .hc-ui-sheet[data-presentation='bottom']::before {
+  content: '';
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  z-index: 2;
+  display: block;
+  width: 36px;
+  height: 5px;
+  margin: 0 auto 0 -18px;
+  border-radius: var(--hc-radius-full);
+  background-color: var(--hc-color-border-strong);
+}
+[data-hc-ds] .hc-ui-sheet[data-presentation='bottom'] .hc-ui-dialog__header { padding-top: var(--hc-space-6); }
+/* Full height, after a drag up from the grabber or header. */
+[data-hc-ds] .hc-ui-sheet[data-presentation='bottom'][data-expanded] {
+  height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
+  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
+  border-radius: 20px 20px 0 0;
+}
+[data-hc-ds] .hc-ui-sheet[data-presentation='bottom'][data-closing] { animation: hc-ui-sheet-down var(--hc-dur-medium) var(--hc-ease-emphasized-accel) forwards; }
+
+@media (max-width: 959.98px) {
+  [data-hc-ds] .hc-ui-sheet[data-presentation='auto'] {
+    --hc-sheet-drag: on;
+    width: 100%;
+    max-width: none;
+    max-height: calc(100dvh - var(--hc-space-7) - env(safe-area-inset-top, 0px));
+    margin: auto 0 0;
+    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--hc-space-3));
+    border-radius: var(--hc-radius-sheet) var(--hc-radius-sheet) 0 0;
+    touch-action: pan-y;
+    animation: hc-ui-sheet-up var(--hc-dur-large) var(--hc-ease-sheet) both;
+    transition: height 320ms var(--hc-ease-sheet), max-height 320ms var(--hc-ease-sheet);
+  }
+  [data-hc-ds] .hc-ui-sheet[data-presentation='auto']::before {
+    content: '';
+    position: absolute;
+    top: 6px;
+    left: 50%;
+    z-index: 2;
+    display: block;
+    width: 36px;
+    height: 5px;
+    margin: 0 auto 0 -18px;
+    border-radius: var(--hc-radius-full);
+    background-color: var(--hc-color-border-strong);
+  }
+  [data-hc-ds] .hc-ui-sheet[data-presentation='auto'] .hc-ui-dialog__header { padding-top: var(--hc-space-6); }
+  [data-hc-ds] .hc-ui-sheet[data-presentation='auto'][data-expanded] {
+    height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
+    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
+    border-radius: 20px 20px 0 0;
+  }
+  [data-hc-ds] .hc-ui-sheet[data-presentation='auto'][data-closing] { animation: hc-ui-sheet-down var(--hc-dur-medium) var(--hc-ease-emphasized-accel) forwards; }
+}
+
+/* Closing by drag: the backdrop fades with the sheet instead of waiting for the exit. */
+[data-hc-ds] .hc-ui-sheet.hc-ui-dialog[data-dismissing]::backdrop { opacity: 0; transition: opacity 220ms ease; }
+[data-hc-ds] .hc-ui-sheet.hc-ui-dialog[data-dismissing][data-closing]::backdrop { animation: none; }
+
+@keyframes hc-ui-sheet-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+@keyframes hc-ui-sheet-down {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+
+/* SheetOptions — HCUI's sheet-options: rows with a check on a card-like group. */
+[data-hc-ds] .hc-ui-sheet-options {
+  display: flex;
+  /* Never shrinks in the sheet's flex body: a long list scrolls with the body. HCUI's
+     shrinks and cuts the rows that do not fit, out of reach. */
+  flex: 0 0 auto;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--hc-color-bg-muted-2);
+  border-radius: var(--hc-radius-lg);
+  box-shadow: var(--hc-shadow-card);
+}
+[data-hc-ds] .hc-ui-sheet-options__row {
+  /* The ring goes inside, where the group's overflow does not cut it. */
+  --hc-focus-ring-offset: -2px;
+  appearance: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--hc-space-3);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 52px;
+  margin: 0;
+  padding: var(--hc-space-2) var(--hc-space-4);
+  color: var(--hc-color-text-primary);
+  font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-sheet-options__row + .hc-ui-sheet-options__row { box-shadow: inset 0 1px 0 var(--hc-color-border); }
+/* State layer: a veil on hover and press. */
+[data-hc-ds] .hc-ui-sheet-options__row::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--hc-dur-short) var(--hc-ease-standard);
+}
+@media (hover: hover) {
+  [data-hc-ds] .hc-ui-sheet-options__row:hover:not(:disabled)::after { opacity: 0.04; }
+}
+[data-hc-ds] .hc-ui-sheet-options__row:active:not(:disabled)::after { opacity: 0.07; }
+[data-hc-ds] .hc-ui-sheet-options__row:focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, 2px);
+  border-radius: var(--hc-radius-lg);
+}
+[data-hc-ds] .hc-ui-sheet-options__row:disabled { opacity: 0.4; cursor: default; }
+[data-hc-ds] .hc-ui-sheet-options__icon { display: inline-flex; flex: 0 0 auto; color: var(--hc-color-text-secondary); }
+[data-hc-ds] .hc-ui-sheet-options__icon svg { display: block; }
+[data-hc-ds] .hc-ui-sheet-options__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
+[data-hc-ds] .hc-ui-sheet-options__label { font-size: var(--hc-font-size-md); }
+[data-hc-ds] .hc-ui-sheet-options__row[data-selected] .hc-ui-sheet-options__label { font-weight: var(--hc-font-weight-semibold); }
+[data-hc-ds] .hc-ui-sheet-options__hint { color: var(--hc-color-text-muted); font-size: var(--hc-font-size-sm); }
+[data-hc-ds] .hc-ui-sheet-options__check {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: 20px;
+  color: var(--hc-color-brand);
+  animation: hc-ui-check-in 260ms var(--hc-ease-pop);
+}
+
+/* SheetOptions variant="list" — HCUI's mobile sort sheet (.sort-button__option): plain
+   48px rows with a line under each, 560 weight and 720 once chosen, a 20px check in the text color. */
+[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] { background-color: transparent; border-radius: 0; box-shadow: none; }
+[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__row,
+[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__row + .hc-ui-sheet-options__row {
+  min-height: 48px;
+  padding: 0;
+  font-size: var(--hc-font-size-md);
+  font-weight: 560;
+  line-height: var(--hc-line-height-md);
+  box-shadow: inset 0 -1px 0 var(--hc-color-border);
+}
+[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__row[data-selected] .hc-ui-sheet-options__label { font-weight: 720; }
+[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__row:focus-visible { border-radius: var(--hc-radius-xs); }
+[data-hc-ds] .hc-ui-sheet-options[data-variant='list'] .hc-ui-sheet-options__check { color: var(--hc-color-text-primary); animation: none; }
+
+/* SheetChips — wrapping Chips with radio semantics. */
+[data-hc-ds] .hc-ui-sheet-chips { display: flex; flex-wrap: wrap; gap: var(--hc-space-2); }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] .hc-ui-sheet[data-presentation],
+  [data-hc-ds] .hc-ui-sheet[data-presentation][data-closing] { animation: none; transition: none; }
+  [data-hc-ds] .hc-ui-sheet.hc-ui-dialog[data-dismissing]::backdrop { transition: none; }
+  [data-hc-ds] .hc-ui-sheet-options__row::after { transition: none; }
+  [data-hc-ds] .hc-ui-sheet-options__check { animation: none; }
+}
+
+/* Menu and Popover — popups anchored to their trigger. The menu is HCUI's
+   .desktop-sort__menu and the popover HCUI's .team-rules__popover. No motion:
+   both appear at once, as in HCUI. */
+:where([data-hc-ds] .hc-ui-popup-anchor) { position: relative; display: inline-flex; vertical-align: middle; }
+:where([data-hc-ds] .hc-ui-portal) { display: contents; }
+
+[data-hc-ds] .hc-ui-menu,
+[data-hc-ds] .hc-ui-popover {
+  position: absolute;
+  box-sizing: border-box;
+  display: grid;
+  margin: 0;
+  font-family: var(--hc-font-body);
+  font-size: var(--hc-font-size-xs);
+  font-style: normal;
+  text-align: start;
+  text-transform: none;
+  font-variation-settings: 'ROND' var(--hc-rond);
+  border: 1px solid var(--hc-color-border);
+  outline: none;
+}
+[data-hc-ds] .hc-ui-menu[data-side='bottom'],
+[data-hc-ds] .hc-ui-popover[data-side='bottom'] { top: calc(100% + var(--hc-space-1)); }
+[data-hc-ds] .hc-ui-menu[data-side='top'],
+[data-hc-ds] .hc-ui-popover[data-side='top'] { bottom: calc(100% + var(--hc-space-1)); }
+[data-hc-ds] .hc-ui-menu[data-align='end'],
+[data-hc-ds] .hc-ui-popover[data-align='end'] { right: 0; }
+[data-hc-ds] .hc-ui-menu[data-align='start'],
+[data-hc-ds] .hc-ui-popover[data-align='start'] { left: 0; }
+/* In a portal the coordinates come inline; above page layers, below toasts. */
+[data-hc-ds] .hc-ui-menu[data-portal],
+[data-hc-ds] .hc-ui-popover[data-portal] { position: fixed; z-index: var(--hc-z-tooltip); }
+
+[data-hc-ds] .hc-ui-menu {
+  z-index: 5;
+  width: 200px;
+  padding: var(--hc-space-2);
+  background-color: var(--hc-color-bg-surface);
+  border-radius: var(--hc-radius-md);
+  box-shadow: var(--hc-shadow-soft);
+}
+[data-hc-ds] .hc-ui-menu__group { display: grid; }
+[data-hc-ds] .hc-ui-menu__item {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hc-space-2);
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 36px;
+  margin: 0;
+  padding: var(--hc-space-1) var(--hc-space-2);
+  color: var(--hc-color-text-secondary);
+  font-family: var(--hc-font-body);
+  font-size: var(--hc-font-size-xs);
+  font-weight: var(--hc-font-weight-medium);
+  font-style: normal;
+  font-stretch: normal;
+  /* As HCUI's font shorthand: no inherited numeric or other variants (tabular figures). */
+  font-variant: normal;
+  font-variation-settings: 'ROND' var(--hc-rond);
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: left;
+  text-transform: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--hc-radius-xs);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-hc-ds] .hc-ui-menu__item:hover:not(:disabled) { color: var(--hc-color-text-primary); background-color: var(--hc-color-bg-muted-2); }
+[data-hc-ds] .hc-ui-menu__item[aria-checked='true'] { color: var(--hc-color-text-primary); font-weight: var(--hc-font-weight-semibold); }
+[data-hc-ds] .hc-ui-menu__item[data-danger],
+[data-hc-ds] .hc-ui-menu__item[data-danger]:hover:not(:disabled) { color: var(--hc-color-danger); }
+[data-hc-ds] .hc-ui-menu__item:disabled { color: var(--hc-color-text-muted); cursor: default; }
+[data-hc-ds] .hc-ui-menu__item:focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, 3px);
+}
+[data-hc-ds] .hc-ui-menu__text { min-width: 0; }
+[data-hc-ds] .hc-ui-menu__hint {
+  display: block;
+  margin-top: 1px;
+  color: var(--hc-color-text-muted);
+  font-size: var(--hc-font-size-2xs);
+  font-weight: var(--hc-font-weight-medium);
+  white-space: normal;
+}
+[data-hc-ds] .hc-ui-menu__icon,
+[data-hc-ds] .hc-ui-menu__check { display: inline-flex; flex: 0 0 auto; }
+[data-hc-ds] .hc-ui-menu__icon svg,
+[data-hc-ds] .hc-ui-menu__check svg { display: block; flex: 0 0 auto; }
+[data-hc-ds] .hc-ui-menu__separator { height: 1px; margin: var(--hc-space-1) 0; background-color: var(--hc-color-border); }
+[data-hc-ds] .hc-ui-menu__label {
+  padding: var(--hc-space-1) var(--hc-space-2);
+  color: var(--hc-color-text-muted);
+  font-size: var(--hc-font-size-xs);
+  font-weight: var(--hc-font-weight-regular);
+  line-height: var(--hc-line-height-md);
+}
+
+[data-hc-ds] .hc-ui-popover {
+  z-index: 7;
+  gap: var(--hc-space-2);
+  width: 300px;
+  max-height: min(460px, 70vh);
+  padding: var(--hc-space-3);
+  overflow-y: auto;
+  color: var(--hc-color-text-primary);
+  font-weight: var(--hc-font-weight-regular);
+  line-height: var(--hc-line-height-md);
+  background-color: var(--hc-color-bg-elevated);
+  border-radius: var(--hc-radius-lg);
+  box-shadow: var(--hc-shadow-float);
+}
+
+/* Table — HCUI's desktop Meta table (`.meta-table`): 13px tabular figures, an 11px muted header
+   with a line under it, 4px 8px cells and a line under each row, the muted-2 hover. */
+[data-hc-ds] .hc-ui-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--hc-color-text-primary);
+  font-size: var(--hc-font-size-sm);
+  font-variant-numeric: tabular-nums;
+  font-variation-settings: 'ROND' var(--hc-rond);
+}
+[data-hc-ds] .hc-ui-table :is(th, td) { box-sizing: border-box; }
+[data-hc-ds] .hc-ui-table thead th {
+  padding: var(--hc-space-2);
+  background: var(--hc-color-bg-surface);
+  box-shadow: inset 0 -1px 0 var(--hc-color-border);
+  color: var(--hc-color-text-muted);
+  font-size: var(--hc-font-size-2xs);
+  font-weight: var(--hc-font-weight-medium);
+  white-space: nowrap;
+}
+[data-hc-ds] .hc-ui-table[data-sticky-header] thead th { position: sticky; top: var(--hc-table-sticky-top, 0px); z-index: 2; }
+[data-hc-ds] .hc-ui-table tbody tr { border-bottom: 1px solid var(--hc-color-border); }
+[data-hc-ds] .hc-ui-table tbody tr:hover { background: var(--hc-color-bg-muted-2); }
+[data-hc-ds] .hc-ui-table[data-clickable] tbody tr { cursor: pointer; }
+[data-hc-ds] .hc-ui-table tbody tr[data-selected] { background: var(--hc-color-bg-muted); }
+[data-hc-ds] .hc-ui-table tbody :is(th, td) { padding: var(--hc-space-1) var(--hc-space-2); font-weight: inherit; }
+[data-hc-ds] .hc-ui-table tbody td { white-space: nowrap; }
+[data-hc-ds] .hc-ui-table :is(th, td)[data-align='start'] { text-align: start; }
+[data-hc-ds] .hc-ui-table :is(th, td)[data-align='center'] { text-align: center; }
+[data-hc-ds] .hc-ui-table :is(th, td)[data-align='end'] { text-align: end; }
+[data-hc-ds] .hc-ui-table :is(th, td)[data-numeric] { font-variant-numeric: tabular-nums; }
+[data-hc-ds] .hc-ui-table :is(th, td)[data-tone='muted'] { color: var(--hc-color-text-muted); }
+[data-hc-ds] .hc-ui-table :is(th, td)[data-tone='secondary'] { color: var(--hc-color-text-secondary); }
+[data-hc-ds] :is(.hc-ui-table__sort, .hc-ui-table__row-button) {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-hc-ds] .hc-ui-table__sort { display: inline-flex; align-items: center; gap: 2px; }
+[data-hc-ds] .hc-ui-table__sort:hover { color: var(--hc-color-text-primary); }
+[data-hc-ds] .hc-ui-table__sort > svg { flex-shrink: 0; }
+[data-hc-ds] .hc-ui-table__row-button {
+  display: flex;
+  align-items: center;
+  gap: var(--hc-space-3);
+  width: 100%;
+  min-width: 0;
+  text-align: start;
+}
+[data-hc-ds] :is(.hc-ui-table__sort, .hc-ui-table__row-button):focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, 3px);
+}
+
+/* PageHeader — HCUI's desktop page heading (`.desktop-page-heading`): 22px semibold title on a
+   27.5px line pulled up 4px (the font's inner space), a 40px row, actions at the end. */
+[data-hc-ds] .hc-ui-page-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--hc-space-4);
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 40px;
+}
+[data-hc-ds] .hc-ui-page-header__title {
+  min-width: 0;
+  min-height: 27.5px;
+  margin: -4px 0 0;
+  color: var(--hc-color-text-primary);
+  font: var(--hc-font-weight-semibold) 22px/27.5px var(--hc-font-display);
+  /* The `font` shorthand resets `font-variation-settings`: ROND comes back right after it. */
+  font-variation-settings: 'ROND' var(--hc-rond);
+  letter-spacing: -0.02em;
+}
+[data-hc-ds] .hc-ui-page-header__count {
+  margin-left: var(--hc-space-1);
+  color: var(--hc-color-text-muted);
+  font: var(--hc-font-size-sm) var(--hc-font-body);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+}
+[data-hc-ds] .hc-ui-page-header__actions { display: flex; align-items: center; gap: var(--hc-space-2); }
+[data-hc-ds] .hc-ui-page-header[data-visually-hidden] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  min-height: 0;
+  margin: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* PanelHeader — `bar`: HCUI's desktop context panel header (`.desktop-context__header`);
+   `section`: HCUI's section heading (`section-title`, `.home-dash__head`). */
+[data-hc-ds] .hc-ui-panel-header {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--hc-color-text-primary);
+  font-variation-settings: 'ROND' var(--hc-rond);
+}
+[data-hc-ds] .hc-ui-panel-header[data-variant='bar'] {
+  gap: var(--hc-space-2);
+  min-height: 52px;
+  padding: var(--hc-space-2) var(--hc-space-3) var(--hc-space-2) var(--hc-space-4);
+  border-bottom: 1px solid var(--hc-color-border);
+}
+/* Zero specificity: the gap and a minimum height are the caller's layout (HCUI's desktop home uses 8px and 44px). */
+:where([data-hc-ds] .hc-ui-panel-header[data-variant='section']) { gap: var(--hc-space-3); }
+[data-hc-ds] :is(.hc-ui-panel-header__text, .hc-ui-panel-header__trail) { flex: 1; min-width: 0; }
+[data-hc-ds] .hc-ui-panel-header__text { display: grid; }
+[data-hc-ds] .hc-ui-panel-header__trail {
+  display: flex;
+  align-items: center;
+  gap: var(--hc-space-1);
+  color: var(--hc-color-text-muted);
+  font-size: var(--hc-font-size-sm);
+}
+[data-hc-ds] .hc-ui-panel-header__trail > svg { flex-shrink: 0; }
+[data-hc-ds] .hc-ui-panel-header :is(p, h1, h2, h3, h4, h5, h6) { margin: 0; }
+[data-hc-ds] .hc-ui-panel-header[data-variant='bar'] .hc-ui-panel-header__title {
+  overflow: hidden;
+  color: var(--hc-color-text-primary);
+  font-family: inherit;
+  font-size: inherit;
+  font-stretch: inherit;
+  font-weight: var(--hc-font-weight-semibold);
+  line-height: inherit;
+  letter-spacing: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-hc-ds] .hc-ui-panel-header[data-variant='bar'] .hc-ui-panel-header__text { font-size: var(--hc-font-size-sm); }
+[data-hc-ds] .hc-ui-panel-header[data-variant='bar'] .hc-ui-panel-header__subtitle { overflow: hidden; color: var(--hc-color-text-muted); font-size: var(--hc-font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
+[data-hc-ds] .hc-ui-panel-header[data-variant='section'] .hc-ui-panel-header__title {
+  color: var(--hc-color-text-primary);
+  font-family: var(--hc-font-display);
+  font-size: var(--hc-font-size-lg);
+  font-weight: 680;
+  font-stretch: 90%;
+  line-height: var(--hc-line-height-lg);
+  letter-spacing: var(--hc-letter-spacing-snug);
+  text-transform: none;
+}
+[data-hc-ds] .hc-ui-panel-header[data-variant='section'] .hc-ui-panel-header__subtitle { color: var(--hc-color-text-muted); font-size: var(--hc-font-size-sm); }
+/* subtitleInline: the subtitle follows the title on its baseline and is cut with an ellipsis (HCUI's desktop home). */
+[data-hc-ds] .hc-ui-panel-header[data-subtitle='inline'] .hc-ui-panel-header__text { display: flex; align-items: baseline; gap: var(--hc-space-2); overflow: hidden; }
+[data-hc-ds] .hc-ui-panel-header[data-subtitle='inline'] .hc-ui-panel-header__text > :is(h1, h2, h3, h4, h5, h6) { flex: 0 0 auto; }
+[data-hc-ds] .hc-ui-panel-header[data-subtitle='inline'] .hc-ui-panel-header__subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-hc-ds] .hc-ui-panel-header__eyebrow {
+  overflow: hidden;
+  color: var(--hc-color-text-muted);
+  font-family: var(--hc-font-display);
+  font-size: var(--hc-font-size-2xs);
+  font-weight: 620;
+  font-stretch: 125%;
+  line-height: var(--hc-line-height-xs);
+  letter-spacing: 0.07em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+[data-hc-ds] .hc-ui-panel-header__icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--hc-radius-full);
+  background-color: var(--hc-color-bg-muted);
+  color: var(--hc-color-text-primary);
+}
+[data-hc-ds] .hc-ui-panel-header__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--hc-space-2); }
+[data-hc-ds] :is(.hc-ui-panel-header__step, .hc-ui-panel-header__close) {
+  appearance: none;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: var(--hc-color-text-secondary);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-hc-ds] .hc-ui-panel-header__step {
+  flex-shrink: 0;
+  margin-left: calc(-1 * var(--hc-space-2));
+  padding: var(--hc-space-1) var(--hc-space-2);
+  border-radius: var(--hc-radius-xs);
+  font: inherit;
+}
+[data-hc-ds] .hc-ui-panel-header__close {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: var(--hc-radius-full);
+}
+[data-hc-ds] :is(.hc-ui-panel-header__step, .hc-ui-panel-header__close):hover { background: var(--hc-color-bg-muted); color: var(--hc-color-text-primary); }
+[data-hc-ds] :is(.hc-ui-panel-header__step, .hc-ui-panel-header__close):focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, 3px);
+}
+
+/* ListRow — HCUI's `list-row` mixin: a full-width button row with a translucent veil on hover
+   and press and the focus ring drawn inside, rounded as the group it sits in. The base rule has
+   zero specificity: each list sets its own height, padding, gap, corners and font by class. */
+:where([data-hc-ds] .hc-ui-list-row) {
+  appearance: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--hc-space-3);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 56px;
+  margin: 0;
+  padding: var(--hc-space-2) var(--hc-space-4);
+  border: 0;
+  background: transparent;
+  color: var(--hc-color-text-primary);
+  font: inherit;
+  font-variation-settings: 'ROND' var(--hc-rond);
+  text-align: left;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-list-row::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--hc-dur-short) var(--hc-ease-standard);
+}
+@media (hover: hover) {
+  [data-hc-ds] .hc-ui-list-row:hover:not(:disabled)::after { opacity: 0.04; }
+}
+[data-hc-ds] .hc-ui-list-row:active:not(:disabled)::after { opacity: 0.07; }
+[data-hc-ds] .hc-ui-list-row:focus-visible {
+  border-radius: var(--hc-radius-lg);
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, -2px);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] .hc-ui-list-row::after { transition: none; }
+}
+
+/* CommandPalette — HCUI's desktop ⌘K (.command-palette): 640px wide, at most 560px tall,
+   12vh from the top, a 1px border, `shadow-soft`, no blur and no animation. The backdrop
+   is `bg-overlay` unless `--hc-command-palette-backdrop` says otherwise (HCUI: 28% black). */
+[data-hc-ds] .hc-ui-command-palette {
+  box-sizing: border-box;
+  width: min(640px, calc(100vw - 32px));
+  max-height: min(560px, calc(100dvh - 120px));
+  margin: 12vh auto auto;
+  padding: 0;
+  overflow: hidden;
+  color: var(--hc-color-text-primary);
+  background: var(--hc-color-bg-surface);
+  border: 1px solid var(--hc-color-border);
+  border-radius: var(--hc-radius-lg);
+  box-shadow: var(--hc-shadow-soft);
+  font-family: var(--hc-font-body);
+  font-size: var(--hc-font-size-md);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  line-height: var(--hc-line-height-md);
+  outline: none;
+}
+[data-hc-ds] .hc-ui-command-palette::backdrop { background: var(--hc-command-palette-backdrop, var(--hc-color-bg-overlay)); }
+[data-hc-ds] .hc-ui-command-palette__box { display: flex; flex-direction: column; max-height: inherit; }
+[data-hc-ds] .hc-ui-command-palette__field {
+  display: flex;
+  align-items: center;
+  gap: var(--hc-space-3);
+  padding: var(--hc-space-3) var(--hc-space-4);
+  border-bottom: 1px solid var(--hc-color-border);
+  color: var(--hc-color-text-secondary);
+}
+[data-hc-ds] .hc-ui-command-palette__field > svg { flex-shrink: 0; }
+/* The `font` shorthand, as HCUI's: weight 400 and normal line height; ROND comes back after it. The placeholder
+   keeps the browser's color, as in HCUI. */
+[data-hc-ds] .hc-ui-command-palette__input {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  height: 36px;
+  margin: 0;
+  padding: 1px 2px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--hc-color-text-primary);
+  font: var(--hc-font-size-md) var(--hc-font-body);
+  font-variation-settings: 'ROND' var(--hc-rond);
+}
+[data-hc-ds] .hc-ui-command-palette__status { flex-shrink: 0; color: var(--hc-color-text-muted); font-size: var(--hc-font-size-xs); }
+[data-hc-ds] .hc-ui-command-palette__list { flex: 1; min-height: 0; overscroll-behavior: contain; }
+/* Zero specificity: `listClassName` can change the overflow and padding (HCUI's scroll-panel). */
+:where([data-hc-ds] .hc-ui-command-palette__list) { overflow-y: auto; padding: var(--hc-space-2); }
+[data-hc-ds] .hc-ui-command-palette__heading {
+  margin: var(--hc-space-3) var(--hc-space-2) var(--hc-space-1);
+  color: var(--hc-color-text-muted);
+  font-size: var(--hc-font-size-2xs);
+  font-weight: var(--hc-font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+[data-hc-ds] .hc-ui-command-palette__empty { margin: var(--hc-space-4); color: var(--hc-color-text-muted); font-size: var(--hc-font-size-sm); }
+[data-hc-ds] .hc-ui-command-palette__item {
+  appearance: none;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--hc-space-3);
+  width: 100%;
+  min-height: 44px;
+  margin: 0;
+  padding: var(--hc-space-1) var(--hc-space-2);
+  border: 0;
+  border-radius: var(--hc-radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-hc-ds] .hc-ui-command-palette__item[aria-selected='true'] { background: var(--hc-color-bg-muted); }
+[data-hc-ds] .hc-ui-command-palette__item:focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, -2px);
+}
+[data-hc-ds] .hc-ui-command-palette__icon {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  color: var(--hc-color-text-secondary);
+}
+[data-hc-ds] .hc-ui-command-palette__text { display: grid; flex: 1; min-width: 0; }
+[data-hc-ds] :is(.hc-ui-command-palette__label, .hc-ui-command-palette__detail) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+[data-hc-ds] .hc-ui-command-palette__label { font-size: var(--hc-font-size-sm); font-weight: var(--hc-font-weight-medium); }
+[data-hc-ds] .hc-ui-command-palette__detail { color: var(--hc-color-text-muted); font-size: var(--hc-font-size-2xs); }
+/* The `font` shorthand, as HCUI's: normal weight and line height; ROND comes back after it. */
+[data-hc-ds] .hc-ui-command-palette__kbd {
+  flex-shrink: 0;
+  padding: 1px var(--hc-space-1);
+  border: 1px solid var(--hc-color-border);
+  border-radius: var(--hc-radius-xs);
+  color: var(--hc-color-text-muted);
+  font: var(--hc-font-size-2xs) var(--hc-font-mono);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  white-space: nowrap;
+}
+[data-hc-ds] .hc-ui-command-palette__footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--hc-space-4);
+  padding: var(--hc-space-2) var(--hc-space-4);
+  border-top: 1px solid var(--hc-color-border);
+  color: var(--hc-color-text-muted);
+  font-size: var(--hc-font-size-2xs);
+}
+[data-hc-ds] .hc-ui-command-palette__footer .hc-ui-command-palette__kbd { margin-right: 2px; }