@ntmats/hc-ui 0.2.0 → 0.4.0

package/dist/styles.css

@@ -22,6 +22,16 @@
   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 {
@@ -90,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;
@@ -188,7 +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. */
@@ -206,11 +289,144 @@
 }
 @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); }
@@ -279,9 +495,2148 @@
 
 @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; }
+
+/* ==========================================================================
+   HeroClix game pieces — HCUI's src/heroclix-ui, as it is. Colors that stay the
+   same in both themes (the dial paper, the dark outlines, the translucent rings
+   of the symbols) are HeroClix tokens; black symbols turn white or gray through
+   the `filter-symbol-*` tokens.
+   ========================================================================== */
+
+/* Border-box sizing, as HCUI's global rule, inside every piece. */
+[data-hc-ds] :is(.hc-ui-mini-dial, .hc-ui-power-icon, .hc-ui-special-icon, .hc-ui-equipment-icon, .hc-ui-combat-dial),
+[data-hc-ds] :is(.hc-ui-mini-dial, .hc-ui-power-icon, .hc-ui-special-icon, .hc-ui-equipment-icon, .hc-ui-combat-dial) :is(*, ::before, ::after),
+[data-hc-ds] .hc-ui-combat-dial::before,
+[data-hc-ds] .hc-ui-combat-dial::after { box-sizing: border-box; }
+
+/* MiniDialView — HCUI `.mini-dial`. The cell size is `--hc-mini-dial-cell` (7px),
+   set on the dial or any ancestor; the top margin has zero specificity. */
+:where([data-hc-ds] .hc-ui-mini-dial) { margin-top: 5px; }
+[data-hc-ds] .hc-ui-mini-dial {
+  display: grid;
+  grid-auto-rows: var(--hc-mini-dial-cell, 7px);
+  gap: 1px;
+  width: fit-content;
+  max-width: 100%;
+  padding: 2px;
+  overflow: hidden;
+  border-radius: 3px;
+  background-color: var(--hc-color-bg-muted);
+}
+[data-hc-ds] .hc-ui-mini-dial__cell { display: block; border-radius: 1.5px; }
+/* In play: past clicks fade and the current one is outlined. */
+[data-hc-ds] .hc-ui-mini-dial__cell[data-past] { opacity: .22; }
+[data-hc-ds] .hc-ui-mini-dial__cell[data-round] { border-radius: 50%; }
+[data-hc-ds] .hc-ui-mini-dial__cell[data-now] { outline: 1.5px solid var(--hc-color-danger); }
+/* No power: the paper. Special power: the paper with a dark 1px ring (thicker
+   rings swallow the paper in 5–7px cells). Both themes. */
+[data-hc-ds] .hc-ui-mini-dial__cell[data-empty] { background-color: var(--hc-color-dial-paper); }
+[data-hc-ds] .hc-ui-mini-dial__cell[data-special] {
+  background-color: var(--hc-color-dial-paper);
+  box-shadow: inset 0 0 0 1px var(--hc-color-dial-outline);
+}
+
+/* PowerIconView and StatGlyphView — HCUI `.power-icon` and `.stat-glyph`. */
+[data-hc-ds] .hc-ui-power-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--hc-radius-full);
+  box-shadow: inset 0 0 0 1px var(--hc-color-symbol-outline);
+}
+[data-hc-ds] .hc-ui-power-icon__glyph {
+  display: block;
+  width: 60%;
+  height: 60%;
+  object-fit: contain;
+}
+/* The symbol is black; inverted it turns white, for contrast on dark colors. */
+[data-hc-ds] .hc-ui-power-icon__glyph[data-invert] { filter: var(--hc-filter-symbol-light); }
+/* The black symbol turns neutral gray (dial legend). */
+[data-hc-ds] .hc-ui-stat-glyph {
+  display: inline-block;
+  flex-shrink: 0;
+  object-fit: contain;
+  filter: var(--hc-filter-symbol-muted);
+}
+
+/* SpecialIconView — HCUI `.sp-icon`. */
+[data-hc-ds] .hc-ui-special-icon {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 1px solid var(--hc-color-symbol-outline-strong);
+}
+[data-hc-ds] :is(.hc-ui-special-icon__bg, .hc-ui-special-icon__glyph) {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+/* Keeps the circle's edge visible even on white. */
+[data-hc-ds] .hc-ui-special-icon__bg {
+  border-radius: var(--hc-radius-full);
+  box-shadow: inset 0 0 0 1.5px var(--hc-color-symbol-outline-soft);
+}
+[data-hc-ds] .hc-ui-special-icon__glyph { padding: 22%; }
+
+/* EquipmentIcon — HCUI `.equip-icon`: a white diamond on the purple power. */
+[data-hc-ds] .hc-ui-equipment-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--hc-radius-full);
+  background-color: var(--hc-power-purple);
+  box-shadow: inset 0 0 0 1px var(--hc-color-symbol-outline);
+}
+[data-hc-ds] .hc-ui-equipment-icon path { fill: var(--hc-color-symbol-light); }
+
+/* AvatarView — HCUI `img.avatar-os`, `img.avatar-sq`, `img.avatar-sq--fit` and
+   `img.default-avatar--fallback`. Without `size` the caller's class sizes and crops
+   it (the defaults below have zero specificity); the shapes win over that class. */
+:where([data-hc-ds] .hc-ui-avatar) { display: block; box-sizing: border-box; max-width: 100%; }
+[data-hc-ds] .hc-ui-avatar[data-sized] {
+  width: var(--hc-avatar-size);
+  height: var(--hc-avatar-size);
+  object-fit: cover;
+}
+[data-hc-ds] .hc-ui-avatar[data-sized][data-shape='round'] { border-radius: 50%; }
+/* One-shot: the landscape proportion of the search (avatar width, height ÷ 1.42, proportional corners). */
+[data-hc-ds] .hc-ui-avatar[data-shape='card'] {
+  height: auto;
+  aspect-ratio: 1.42 / 1;
+  border-radius: 13.6% / 19.4%;
+  object-fit: cover;
+}
+/* Maps fill the square; terrain markers show whole, fitted by width or height. */
+[data-hc-ds] .hc-ui-avatar:is([data-shape='square'], [data-shape='square-fit']) {
+  aspect-ratio: 1 / 1;
+  border-radius: 21%;
+  object-fit: cover;
+}
+[data-hc-ds] .hc-ui-avatar[data-shape='square-fit'] { object-fit: contain; background-color: var(--hc-color-bg-muted); }
+[data-hc-ds] .hc-ui-avatar[data-fallback] { background-color: var(--hc-color-bg-muted); }
+
+/* CombatDialView — HCUI `.combat-dial`. `--hc-dial-bleed` (and `--hc-dial-bleed-end`)
+   is the container's padding, so the tracks run to the panel's edge;
+   `--hc-dial-surface` is the fill behind the sticky legend. */
+[data-hc-ds] .hc-ui-combat-dial,
+[data-hc-ds] .hc-ui-combat-dial * { font-variation-settings: 'ROND' var(--hc-rond); }
+[data-hc-ds] .hc-ui-combat-dial__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--hc-space-3);
+}
+[data-hc-ds] .hc-ui-combat-dial__header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--hc-space-3);
+}
+/* HCUI's `eyebrow`. */
+[data-hc-ds] :is(.hc-ui-combat-dial__label, .hc-ui-combat-dial__status) {
+  font-family: var(--hc-font-display);
+  font-weight: 620;
+  font-stretch: 125%;
+  font-size: var(--hc-font-size-2xs);
+  line-height: var(--hc-line-height-xs);
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+[data-hc-ds] .hc-ui-combat-dial__label { color: var(--hc-color-text-muted); letter-spacing: var(--hc-letter-spacing-wide); }
+[data-hc-ds] .hc-ui-combat-dial__status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hc-space-2);
+  font-weight: var(--hc-font-weight-semibold);
+  color: var(--hc-color-text-secondary);
+}
+[data-hc-ds] .hc-ui-combat-dial__status-ko { color: var(--hc-color-danger); }
+
+/* Point value chips, on one line that scrolls sideways. */
+[data-hc-ds] .hc-ui-combat-dial__points {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--hc-space-2);
+  margin-inline: calc(var(--hc-dial-bleed, 0px) * -1) calc(var(--hc-dial-bleed-end, var(--hc-dial-bleed, 0px)) * -1);
+  padding: var(--hc-space-2) 0;
+  /* Condensed as HCUI's numbers (its `__points` rule); the chips inherit it. */
+  font-stretch: 86%;
+  -webkit-overflow-scrolling: touch;
+}
+[data-hc-ds] .hc-ui-combat-dial__points > .hc-ui-combat-dial__chip:first-child { margin-left: var(--hc-dial-bleed, 0px); }
+[data-hc-ds] .hc-ui-combat-dial__points > .hc-ui-combat-dial__chip:last-child { margin-right: var(--hc-dial-bleed-end, var(--hc-dial-bleed, 0px)); }
+[data-hc-ds] .hc-ui-combat-dial__chip {
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hc-space-2);
+  min-height: var(--hc-control-height-chip);
+  margin: 0;
+  padding: 0 14px;
+  border: none;
+  border-radius: var(--hc-radius-full);
+  background-color: var(--hc-color-bg-surface);
+  color: var(--hc-color-text-primary);
+  font: inherit;
+  font-family: var(--hc-font-body);
+  font-weight: var(--hc-font-weight-semibold);
+  font-size: var(--hc-font-size-sm);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  white-space: nowrap;
+  box-shadow: inset 0 0 0 1px var(--hc-color-border-strong);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition-property: transform, background-color, box-shadow, color, opacity;
+  transition-duration: var(--hc-dur-short);
+  transition-timing-function: var(--hc-ease-standard);
+}
+/* HCUI's state layer: a veil of the text color on hover (with a mouse) and press. */
+[data-hc-ds] .hc-ui-combat-dial__chip::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-combat-dial__chip:hover:not(:disabled)::after { opacity: 0.05; }
+}
+[data-hc-ds] .hc-ui-combat-dial__chip:active:not(:disabled)::after { opacity: 0.09; }
+[data-hc-ds] .hc-ui-combat-dial__chip:hover:not(:disabled) { background-color: var(--hc-color-bg-muted); }
+[data-hc-ds] .hc-ui-combat-dial__chip:active:not(:disabled) { transform: scale(0.97); }
+[data-hc-ds] .hc-ui-combat-dial__chip:disabled { cursor: default; opacity: 0.75; }
+[data-hc-ds] .hc-ui-combat-dial__chip[aria-pressed='true'] {
+  background-color: var(--hc-color-bg-muted);
+  box-shadow: inset 0 0 0 1.5px var(--hc-dial-chip-color, var(--hc-color-success));
+}
+[data-hc-ds] .hc-ui-combat-dial__chip-bar {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 2px;
+  height: 16px;
+  border-radius: var(--hc-radius-full);
+  background-color: var(--hc-dial-chip-color, var(--hc-color-success));
+}
+[data-hc-ds] :is(.hc-ui-combat-dial__chip-value, .hc-ui-combat-dial__chip-clicks) { color: inherit; font-size: var(--hc-font-size-sm); }
+[data-hc-ds] .hc-ui-combat-dial__chip-clicks { opacity: 0.8; }
+[data-hc-ds] .hc-ui-combat-dial__chip[aria-pressed='true'] .hc-ui-combat-dial__chip-clicks { opacity: 0.92; }
+[data-hc-ds] .hc-ui-combat-dial__chip[aria-pressed='true'] .hc-ui-combat-dial__chip-value { color: var(--hc-color-text-primary); }
+
+/* The dial track: one row that scrolls sideways (hidden scrollbar). */
+[data-hc-ds] .hc-ui-combat-dial__grid-wrap {
+  position: relative;
+  margin-inline: calc(var(--hc-dial-bleed, 0px) * -1) calc(var(--hc-dial-bleed-end, var(--hc-dial-bleed, 0px)) * -1);
+  padding: var(--hc-space-4) 0;
+}
+[data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap) { overflow-x: auto; scrollbar-width: none; }
+[data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar { display: none; }
+/* With a mouse on HCUI's desktop (960px and up) the tracks show a thin 8px bar,
+   whose thumb appears while the pointer is over the track or focus is inside it;
+   the negative margin gives the bar's height back to the layout. */
+@media (min-width: 960px) and (hover: hover) and (forced-colors: none) {
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap) {
+    overflow: scroll hidden;
+    margin-block-end: -8px;
+    scrollbar-width: auto;
+  }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar { display: block; width: 8px; height: 8px; }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar-track { margin: var(--hc-space-3); background: transparent; }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar-thumb {
+    min-width: var(--hc-space-8);
+    border: 2px solid transparent;
+    border-radius: var(--hc-radius-full);
+    background: transparent padding-box;
+  }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap):is(:hover, :has(:focus-visible))::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--hc-color-text-primary) 26%, transparent);
+  }
+  [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap)::-webkit-scrollbar-thumb:is(:hover, :active) {
+    border-width: 1px;
+    background-color: color-mix(in srgb, var(--hc-color-text-primary) 46%, transparent);
+  }
+  /* Without ::-webkit-scrollbar (Firefox) the system's thin bar takes no room to give back. */
+  @supports not selector(::-webkit-scrollbar) {
+    [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap) {
+      margin-block-end: 0;
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+    }
+    [data-hc-ds] :is(.hc-ui-combat-dial__points, .hc-ui-combat-dial__grid-wrap):is(:hover, :has(:focus-visible)) {
+      scrollbar-color: color-mix(in srgb, var(--hc-color-text-primary) 26%, transparent) transparent;
+    }
+  }
+}
+[data-hc-ds] .hc-ui-combat-dial__grid {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+  min-width: max-content;
+  padding-right: var(--hc-dial-bleed-end, var(--hc-dial-bleed, 0px));
+}
+[data-hc-ds] .hc-ui-combat-dial__col {
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(5, 40px);
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition: transform var(--hc-transition-fast), box-shadow var(--hc-transition-fast);
+}
+/* The legend stays put and covers the bleed: nothing shows to its left. */
+[data-hc-ds] .hc-ui-combat-dial__col[data-kind='legend'] {
+  position: sticky;
+  left: 0;
+  z-index: 4;
+  padding-left: var(--hc-dial-bleed, 0px);
+  padding-right: var(--hc-space-2);
+  color: var(--hc-color-text-secondary);
+  background: var(--hc-dial-surface, var(--hc-color-bg-surface));
+}
+[data-hc-ds] .hc-ui-combat-dial__col[data-kind='click']:hover { background-color: var(--hc-color-bg-muted-2); }
+/* Clicks outside the selected point value fade. */
+[data-hc-ds] .hc-ui-combat-dial__col[data-dimmed] { opacity: 0.32; filter: saturate(0.7); }
+/* Starting line: a colored bar at the left edge of the point value's first click. */
+[data-hc-ds] .hc-ui-combat-dial__col[data-start]::before {
+  content: '';
+  position: absolute;
+  top: 48px;
+  bottom: 0;
+  left: -5px;
+  width: 2px;
+  border-radius: 2px;
+  background-color: var(--hc-dial-start-color, var(--hc-color-success));
+}
+[data-hc-ds] .hc-ui-combat-dial__col[data-current] {
+  background-color: var(--hc-color-bg-muted-2);
+  box-shadow: inset 0 3px 0 0 var(--hc-color-accent);
+}
+[data-hc-ds] .hc-ui-combat-dial__col[data-kind='ko'] { color: var(--hc-color-danger); }
+[data-hc-ds] .hc-ui-combat-dial[data-static] .hc-ui-combat-dial__col[data-kind='click'] { cursor: default; }
+[data-hc-ds] .hc-ui-combat-dial__cell {
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 2px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-combat-dial__cell:focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, 2px);
+}
+[data-hc-ds] .hc-ui-combat-dial__cell[data-round] { border-radius: 50%; }
+[data-hc-ds] .hc-ui-combat-dial__cell[data-kind='legend'] { color: var(--hc-color-text-secondary); }
+/* HCUI's `mono-value`. */
+[data-hc-ds] :is(.hc-ui-combat-dial__cell:is([data-kind='number'], [data-kind='value']), .hc-ui-combat-dial__range) {
+  font-family: var(--hc-font-display);
+  font-weight: 640;
+  font-stretch: 86%;
+  font-variant-numeric: tabular-nums;
+}
+[data-hc-ds] .hc-ui-combat-dial__cell[data-kind='number'] { font-size: var(--hc-font-size-sm); color: var(--hc-color-text-muted); }
+[data-hc-ds] .hc-ui-combat-dial__col[data-current] .hc-ui-combat-dial__cell[data-kind='number'] { color: var(--hc-color-text-primary); font-weight: var(--hc-font-weight-bold); }
+[data-hc-ds] .hc-ui-combat-dial__cell[data-kind='value'] {
+  font-size: var(--hc-font-size-md);
+  font-weight: var(--hc-font-weight-bold);
+  color: var(--hc-color-text-primary);
+  background-color: transparent;
+}
+/* Special powers: a dark outline, as on the printed card. The cell is the paper in
+   both themes, so the fixed outline shows in light and dark. */
+[data-hc-ds] .hc-ui-combat-dial__cell[data-outlined] { box-shadow: inset 0 0 0 2px var(--hc-color-dial-outline); }
+[data-hc-ds] .hc-ui-combat-dial__cell[data-kind='ko'] {
+  font-family: var(--hc-font-display);
+  font-weight: 620;
+  font-stretch: 125%;
+  font-size: var(--hc-font-size-sm);
+  line-height: var(--hc-line-height-xs);
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--hc-color-danger);
+}
+/* Cells with a tip grow their hit area by half the gap on each side (about 48px),
+   without changing their 40px look; neighbors split the gap. */
+[data-hc-ds] .hc-ui-combat-dial__cell[data-tip] { position: relative; cursor: pointer; }
+[data-hc-ds] .hc-ui-combat-dial__cell[data-tip]::after { content: ''; position: absolute; inset: -4px; }
+[data-hc-ds] .hc-ui-combat-dial__special-icon { width: 20px; height: 20px; object-fit: contain; }
+/* Range (number) and targets (bolts) in the top legend cell. */
+[data-hc-ds] .hc-ui-combat-dial__rangebox { flex-direction: column; gap: 1px; }
+[data-hc-ds] .hc-ui-combat-dial__range { font-size: var(--hc-font-size-md); line-height: 1; color: var(--hc-color-text-primary); }
+[data-hc-ds] .hc-ui-combat-dial__bolts { display: inline-flex; align-items: center; gap: 2px; }
+/* `max-width` lets the bolts squeeze into the printed card's 28px legend, as in HCUI. */
+[data-hc-ds] .hc-ui-combat-dial__bolt { width: auto; max-width: 100%; height: 16px; object-fit: contain; filter: var(--hc-filter-symbol-muted); }
+
+/* `presentation="printed"`: the physical card's dial, at HCUnits' measures (20px
+   cells, 23px between clicks, 24px between rows); the white legend sits on the
+   card's dark window. Its numbers keep HCUI's `font` shorthand, without ROND. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__grid-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-block-end: 0;
+  padding: 0;
+  overflow: visible;
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__grid { gap: 3px; min-width: 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col { grid-template-rows: repeat(5, 20px); gap: 4px; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-kind='click']:hover { background: none; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-kind='legend'] {
+  position: static;
+  width: 28px;
+  padding: 0;
+  background: none;
+  color: var(--hc-color-dial-legend-printed);
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-start]::before { top: 22px; bottom: -2px; left: -2px; width: 2px; border-radius: 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-current] { background: none; box-shadow: none; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-dimmed] { opacity: .45; filter: none; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell { width: 20px; height: 20px; border-radius: 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-round] { border-radius: 50%; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-kind='legend'] .hc-ui-combat-dial__cell { width: 28px; color: var(--hc-color-dial-legend-printed); }
+/* Condensed, so two digits fit the 20px cell; no tracking, so they stay centered. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-kind='value'] {
+  font: 600 17px/1 var(--hc-font-body);
+  font-stretch: 50%;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-outlined] { box-shadow: inset 0 0 0 2px var(--hc-color-dial-outline-printed); }
+/* Top numbers and KO in red with a paper outline, as on the card. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell:is([data-kind='number'], [data-kind='ko']) {
+  color: var(--hc-color-dial-number-printed);
+  background: none;
+  -webkit-text-stroke: 3px var(--hc-color-dial-paper);
+  paint-order: stroke fill;
+  font-family: var(--hc-font-body);
+  font-stretch: 75%;
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-kind='number'] { font-size: 16px; font-weight: 800; font-stretch: 62%; letter-spacing: 0; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-kind='ko'] { font-size: 15px; font-weight: 800; letter-spacing: -1px; text-transform: uppercase; }
+/* Only play marks the click: a red circle over the number, like a pen on the card. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-current] .hc-ui-combat-dial__cell[data-kind='number'] {
+  color: var(--hc-color-dial-number-printed);
+  background: var(--hc-color-dial-paper);
+  -webkit-text-stroke: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--hc-color-dial-number-printed);
+}
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__cell[data-tip]::after { inset: -2px -1.5px; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__rangebox { flex-direction: row; gap: 0; align-items: center; }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__range { margin-right: 2px; color: var(--hc-color-dial-legend-printed); font: 300 14px/1 var(--hc-font-body); }
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__bolt { height: 14px; margin-right: -1px; filter: var(--hc-filter-symbol-light); }
+/* The legend symbols are 18px tall at their own width, at most 26px, and white. */
+[data-hc-ds] .hc-ui-combat-dial[data-presentation='printed'] .hc-ui-combat-dial__col[data-kind='legend'] .hc-ui-stat-glyph {
+  width: auto;
+  max-width: 26px;
+  height: 18px;
+  filter: var(--hc-filter-symbol-light);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] :is(.hc-ui-combat-dial__chip, .hc-ui-combat-dial__chip::after, .hc-ui-combat-dial__col) { transition: none; }
+  [data-hc-ds] .hc-ui-combat-dial__chip:active:not(:disabled) { transform: none; }
+}
+
+/* PhysicalCardView — HCUI `.physical-cards`: the printed card in HCUnits' format,
+   375×525 px with absolute positions, scaled to the panel's width. HCUI's fonts
+   (Google Sans Flex, condensed in the titles) with the original card's sizes and
+   positions. The paper and ink follow the theme (`color-card-*`, `filter-card-*`,
+   `blend-card-*`, `opacity-card-*`); seals, dial cells and symbols keep their
+   official colors; the black and white printed parts are the same in both themes. */
+[data-hc-ds] .hc-ui-physical-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  width: 100%;
+  min-width: 0;
+  grid-column: 1 / -1;
+}
+/* HCUI's global rules the card counts on, inside the card only and at zero
+   specificity: border-box, block images and SVGs that never pass their box, no
+   heading or paragraph margin, words that break only when they overflow, the
+   slightly condensed titles. Upright letters, as on the printed card: the card
+   sets `--hc-rond` to 0, so the printed dial inside reads it too. */
+[data-hc-ds] :is(.hc-ui-physical-cards, .hc-ui-card-focus),
+[data-hc-ds] :is(.hc-ui-physical-cards, .hc-ui-card-focus) *,
+[data-hc-ds] :is(.hc-ui-physical-cards, .hc-ui-card-focus) *::before,
+[data-hc-ds] :is(.hc-ui-physical-cards, .hc-ui-card-focus) *::after { box-sizing: border-box; }
+:where([data-hc-ds] .hc-ui-physical-card) :is(img, svg) { display: block; max-width: 100%; }
+:where([data-hc-ds] .hc-ui-physical-card) :is(h2, h3, p) { margin: 0; }
+:where([data-hc-ds] .hc-ui-physical-card) :is(p, span, h2, h3) { overflow-wrap: break-word; }
+:where([data-hc-ds] .hc-ui-physical-card) :is(h2, h3, .hc-ui-physical-card__title, .hc-ui-physical-card__bystander-name) { font-stretch: 92%; }
+[data-hc-ds] .hc-ui-physical-card { --hc-rond: 0; }
+[data-hc-ds] .hc-ui-physical-card,
+[data-hc-ds] .hc-ui-physical-card * { font-variation-settings: 'ROND' var(--hc-rond); }
+
+[data-hc-ds] .hc-ui-physical-card-slot {
+  flex: none;
+  width: calc(var(--hc-card-width) * var(--hc-card-scale));
+  height: calc(var(--hc-card-height) * var(--hc-card-scale));
+}
+[data-hc-ds] .hc-ui-physical-card-tilt { width: 100%; height: 100%; }
+[data-hc-ds] .hc-ui-physical-card {
+  position: relative;
+  width: var(--hc-card-width);
+  height: var(--hc-card-height);
+  overflow: hidden;
+  transform: scale(var(--hc-card-scale));
+  transform-origin: top left;
+  border-radius: 15px;
+  background: var(--hc-color-card-paper);
+  box-shadow: var(--hc-color-card-edge) 0 0 2px;
+  color: var(--hc-color-card-ink);
+  font-family: var(--hc-font-body);
+  text-align: left;
+  user-select: text;
+}
+[data-hc-ds] .hc-ui-physical-card img { user-select: none; }
+/* Paper grain: gray noise in tiles, static, no blur. Under the dial (z-index 2),
+   so the official cell colors do not change. The SVG namespace is percent-encoded:
+   the package source carries no web address. */
+[data-hc-ds] .hc-ui-physical-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
+  opacity: var(--hc-opacity-card-grain);
+  mix-blend-mode: var(--hc-blend-card-grain);
+}
+/* The backgrounds come from the app, as gray images: the filter takes them to the
+   paper's tone in each theme, with no seam where the image ends. */
+[data-hc-ds] :is(.hc-ui-physical-card__bg, .hc-ui-physical-card__legacy, .hc-ui-physical-card__rarity, .hc-ui-physical-card__dial-bg) { position: absolute; left: 0; pointer-events: none; }
+[data-hc-ds] .hc-ui-physical-card__bg[data-side='front'] { top: 0; width: 375px; filter: var(--hc-filter-card-background); }
+[data-hc-ds] .hc-ui-physical-card__bg[data-side='back'] { bottom: 75px; width: 375px; filter: var(--hc-filter-card-background); }
+[data-hc-ds] .hc-ui-physical-card__legacy { top: 0; width: 375px; opacity: 0.2; filter: saturate(0.6); }
+[data-hc-ds] .hc-ui-physical-card__rarity { left: auto; right: 0; top: 0; width: 80px; }
+[data-hc-ds] .hc-ui-physical-card__dial-bg { bottom: 0; width: 100%; filter: var(--hc-filter-card-background); }
+[data-hc-ds] .hc-ui-physical-card__team-up { position: absolute; inset: 0 0 auto; height: 70px; background: var(--hc-color-card-team-up); }
+
+/* Header: name and team abilities, with the keywords or the object's type below. */
+[data-hc-ds] .hc-ui-physical-card__header { position: absolute; left: 10px; top: 2px; width: 305px; }
+[data-hc-ds] .hc-ui-physical-card__header[data-team-up] { --hc-color-card-ink: var(--hc-color-card-print-white); }
+[data-hc-ds] .hc-ui-physical-card__title { display: flex; align-items: center; height: 30px; overflow: hidden; white-space: nowrap; color: var(--hc-color-card-ink); }
+[data-hc-ds] .hc-ui-physical-card h2 {
+  margin: 0 5px 0 0;
+  font-family: var(--hc-font-display);
+  font-weight: 900;
+  font-stretch: 40%;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: 0.2px;
+  color: inherit;
+  white-space: nowrap;
+}
+[data-hc-ds] .hc-ui-physical-card__ability {
+  appearance: none;
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  margin: 0 0 0 1px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--hc-color-card-print-black);
+  color: var(--hc-color-card-print-white);
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+/* A hit area larger than the 20px symbol. */
+[data-hc-ds] .hc-ui-physical-card__ability::after { content: ''; position: absolute; inset: -6px -1px; }
+[data-hc-ds] .hc-ui-physical-card__ability img { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; }
+[data-hc-ds] .hc-ui-physical-card__gear { width: 20px; height: 20px; margin-left: 1px; }
+[data-hc-ds] .hc-ui-physical-card__header-line {
+  position: absolute;
+  top: 26px;
+  left: 0;
+  display: flex;
+  align-items: center;
+  width: 305px;
+  height: 32px;
+  margin: 0;
+  color: var(--hc-color-card-ink);
+  line-height: 1;
+  /* Slanted by the font's axis: less than the italic the browser would fake. */
+  font-variation-settings: 'ROND' var(--hc-rond), 'slnt' -7;
+  font-weight: 600;
+}
+[data-hc-ds] .hc-ui-physical-card__header-line[data-kind='keywords'] { font-size: 12px; font-weight: 500; font-stretch: 80%; }
+[data-hc-ds] .hc-ui-physical-card__header-line[data-kind='type'] { font-size: 16px; font-stretch: 70%; }
+
+/* Collection number and set symbol over the rarity seal. */
+[data-hc-ds] .hc-ui-physical-card__collection {
+  position: absolute;
+  top: 15px;
+  right: 3px;
+  width: 65px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+[data-hc-ds] .hc-ui-physical-card__collection strong {
+  font: 800 20px/1 var(--hc-font-display);
+  font-stretch: 62%;
+  min-height: 19px;
+  color: var(--hc-color-card-print-white);
+  -webkit-text-stroke: 3px var(--hc-color-card-print-black);
+  paint-order: stroke fill;
+}
+[data-hc-ds] .hc-ui-physical-card__set { width: 34px; height: 34px; object-fit: contain; }
+[data-hc-ds] .hc-ui-physical-card__dimensions {
+  position: absolute;
+  top: 85px;
+  right: 5px;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background: var(--hc-color-card-print-black);
+  color: var(--hc-color-card-print-white);
+  font-size: 11px;
+}
+[data-hc-ds] .hc-ui-physical-card__dimensions[data-oval] { width: 28px; height: 18px; border-radius: 9px; }
+
+/* Text columns: the front (its height follows the dial) and the back's two. */
+[data-hc-ds] .hc-ui-physical-card__table {
+  position: absolute;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--hc-color-card-ink-soft);
+}
+[data-hc-ds] .hc-ui-physical-card__table[data-column='front'] { left: 5px; right: 5px; top: 75px; height: var(--hc-card-front-table-height); }
+[data-hc-ds] .hc-ui-physical-card__table:is([data-column='left'], [data-column='right']) { top: 10px; width: 49%; height: var(--hc-card-back-table-height); }
+[data-hc-ds] .hc-ui-physical-card__table[data-column='left'] { left: 5px; }
+[data-hc-ds] .hc-ui-physical-card__table[data-column='right'] { right: 3px; }
+
+/* The portrait (the app's image, with this class) or the object's token. */
+[data-hc-ds] .hc-ui-physical-card__token {
+  float: right;
+  display: block;
+  width: 150px;
+  height: 150px;
+  margin: 10px 0 5px 5px;
+  shape-outside: circle();
+  border-radius: 50%;
+  object-fit: cover;
+  overflow: hidden;
+  background: var(--hc-color-card-token-placeholder);
+}
+[data-hc-ds] .hc-ui-physical-card__table[data-small-token] .hc-ui-physical-card__token { width: 134px; height: 134px; }
+[data-hc-ds] .hc-ui-physical-card__token img { width: 100%; height: 100%; object-fit: cover; }
+/* Objects: a ring in the color of the object's size. */
+[data-hc-ds] .hc-ui-physical-card__token[data-object] img { border-radius: 50%; outline: 8px solid var(--hc-card-object-color, transparent); outline-offset: -8px; }
+
+/* Bystander: a replica of the 195px physical token (HCUnits' `largeCardBystander*`
+   and `smallCard*`). The token has its own colors and does not follow the theme. */
+[data-hc-ds] .hc-ui-physical-card__bystander { display: flex; justify-content: center; }
+[data-hc-ds] .hc-ui-physical-card__bystander-token { position: relative; flex: none; width: 195px; height: 195px; color: var(--hc-color-card-print-white); }
+[data-hc-ds] .hc-ui-physical-card__bystander-clip { position: relative; width: 195px; height: 195px; border-radius: 50%; overflow: hidden; }
+[data-hc-ds] .hc-ui-physical-card__bystander-art {
+  position: absolute;
+  inset: 0;
+  border: 7px solid var(--hc-color-card-print-black);
+  border-radius: 50%;
+  background: var(--hc-color-card-print-black);
+  overflow: hidden;
+}
+/* The art's window: a gray cut-out to the right of the dial's stripe. */
+[data-hc-ds] .hc-ui-physical-card__bystander-window {
+  position: absolute;
+  left: 30px;
+  top: 40px;
+  right: 0;
+  bottom: 16px;
+  background: var(--hc-color-card-token-placeholder);
+  overflow: hidden;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-window img { position: absolute; left: -35px; top: -45px; width: 195px; max-width: none; height: 195px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-stripe {
+  position: absolute;
+  left: 23px;
+  top: 46px;
+  width: 72px;
+  height: 126px;
+  border: 5px solid var(--hc-color-card-print-black);
+  border-left: 0;
+  border-radius: 0 15px 20px 0;
+  background: var(--hc-color-card-print-white);
+  transform: skew(15deg);
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-symbols { position: absolute; left: 7px; top: 47px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab {
+  position: absolute;
+  top: 0;
+  height: 24px;
+  border-radius: 0 10px 12px 0 / 0 12px 12px 0;
+  background: var(--hc-color-card-print-black);
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-tab img { position: absolute; right: 7px; top: 2px; width: 18px; height: 18px; filter: var(--hc-filter-symbol-light); }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='range'] { width: 73px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='speed'] { width: 35px; top: 24px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='attack'] { width: 43px; top: 48px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='defense'] { width: 51px; top: 72px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='damage'] { width: 59px; top: 96px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='range'] span { position: absolute; right: 58px; top: 4px; font: 300 11px/1.2 var(--hc-font-body); }
+[data-hc-ds] .hc-ui-physical-card__bystander-tab[data-stat='range'] img.hc-ui-physical-card__bystander-bolt { right: auto; top: 6px; width: 6px; height: 12px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-name {
+  position: absolute;
+  left: 45px;
+  top: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 105px;
+  height: 45px;
+  font: 500 13px/1 var(--hc-font-body);
+  font-stretch: 80%;
+  text-align: center;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-abilities {
+  position: absolute;
+  top: 50px;
+  left: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+  width: 48px;
+  height: 20px;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-abilities .hc-ui-physical-card__ability { width: 14px; height: 14px; margin: 0; background: none; }
+[data-hc-ds] .hc-ui-physical-card__bystander-abilities .hc-ui-physical-card__ability img { top: 0; left: 0; width: 14px; height: 14px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-abilities .hc-ui-physical-card__ability svg { display: none; }
+[data-hc-ds] .hc-ui-physical-card__bystander-trait { width: 18px; height: 18px; margin-top: -3px; filter: var(--hc-filter-symbol-light); }
+[data-hc-ds] .hc-ui-physical-card__bystander-extra {
+  position: absolute;
+  left: 80px;
+  bottom: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  font: 500 14px/1 var(--hc-font-body);
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-extra img { width: 20px; height: 20px; filter: var(--hc-filter-symbol-light); }
+[data-hc-ds] .hc-ui-physical-card__bystander-extra[data-kind='passengers'] img { width: auto; height: auto; margin-right: 5px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-extra[data-kind='construct'] img { width: 18px; height: auto; }
+[data-hc-ds] .hc-ui-physical-card__bystander-improved { position: absolute; left: 97px; top: 97px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-improved > :is(img, button) { position: absolute; width: 18px; height: 18px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-improved-ability {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-improved-ability img { display: block; width: 18px; height: 18px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-dial { position: absolute; left: 48px; top: 72px; }
+[data-hc-ds] .hc-ui-physical-card__bystander-value {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  margin: 2px;
+  padding: 0;
+  /* Without a power color the cell is the white stripe itself (dark theme too). */
+  background-color: var(--hc-color-dial-paper);
+  color: var(--hc-color-card-print-black);
+  /* The card's dial, in proportion to the 18px cell. */
+  font: 600 16px/1 var(--hc-font-body);
+  font-stretch: 50%;
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+[data-hc-ds] .hc-ui-physical-card__bystander-value[data-special] { box-shadow: inset 0 0 0 2px var(--hc-color-dial-outline-printed); }
+[data-hc-ds] .hc-ui-physical-card__bystander-value[data-tip] {
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+/* A hit area larger than the 18px square. */
+[data-hc-ds] .hc-ui-physical-card__bystander-value[data-tip]::after { content: ''; position: absolute; inset: -3px; }
+[data-hc-ds] :is(.hc-ui-physical-card__ability, .hc-ui-physical-card__bystander-improved-ability, .hc-ui-physical-card__bystander-value[data-tip], .hc-ui-physical-card__improved, .hc-ui-physical-card__point):focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: var(--hc-focus-ring-offset, 2px);
+}
+
+[data-hc-ds] .hc-ui-physical-card__terrain-art { display: block; max-width: min(360px, 100%); max-height: 335px; margin: 5px auto 0; }
+
+/* Rules: tapping the paragraph copies it (`onCopy`). */
+[data-hc-ds] .hc-ui-physical-card__rule { overflow-wrap: anywhere; }
+[data-hc-ds] .hc-ui-physical-card__rule h3 {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  min-height: 22px;
+  margin: 0 0 1px;
+  font: 700 16px/1.1 var(--hc-font-display);
+  font-stretch: 65%;
+  text-transform: uppercase;
+  color: var(--hc-color-card-ink);
+}
+/* As in HCUI's detailed view: without the icon's square border; the symbol's own
+   white circle is the ring, as on HCUnits. */
+[data-hc-ds] .hc-ui-physical-card__rule h3 .hc-ui-special-icon { flex: none; border: none; }
+[data-hc-ds] .hc-ui-physical-card__rule h3 .hc-ui-special-icon__bg { box-shadow: none; }
+[data-hc-ds] .hc-ui-physical-card__rule p { margin: 0 0 2px 5px; white-space: pre-line; }
+/* HCUI's `.copyable`: no selection, a quick fade while pressed. */
+[data-hc-ds] .hc-ui-physical-card__copy {
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity var(--hc-transition-fast);
+}
+[data-hc-ds] .hc-ui-physical-card__copy:active { opacity: 0.6; }
+[data-hc-ds] .hc-ui-physical-card__keyphrase { min-height: 22px; display: flex; align-items: center; font: 700 16px/1.1 var(--hc-font-display); font-stretch: 75%; color: var(--hc-color-card-ink); }
+[data-hc-ds] .hc-ui-physical-card__relic { margin: 0; }
+
+/* Improved abilities right above the dial's window. */
+[data-hc-ds] .hc-ui-physical-card__improved-row { position: absolute; left: 18px; display: flex; gap: 2px; }
+[data-hc-ds] .hc-ui-physical-card__improved-group { display: contents; }
+[data-hc-ds] :is(.hc-ui-physical-card__improved-kind, .hc-ui-physical-card__improved) {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  box-shadow: 0 0 6px 2px var(--hc-color-card-print-white);
+  margin-right: 2px;
+}
+[data-hc-ds] .hc-ui-physical-card__improved {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-physical-card__improved img { display: block; width: 30px; height: 30px; }
+
+/* Above the shine: the cell colors do not change on hover. */
+[data-hc-ds] .hc-ui-physical-card__dial { position: absolute; left: 10px; bottom: 10px; z-index: 2; }
+[data-hc-ds] .hc-ui-physical-card__shine { display: none; }
+
+/* Points on the black bar right of the dial; pressing one changes the point value. */
+[data-hc-ds] .hc-ui-physical-card__points {
+  position: absolute;
+  right: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-stretch: 86%;
+}
+[data-hc-ds] .hc-ui-physical-card__points[data-table='normal'] { top: 386px; }
+[data-hc-ds] .hc-ui-physical-card__points[data-table='long'] { top: 266px; }
+[data-hc-ds] .hc-ui-physical-card__points[data-table='short'] { bottom: 35px; }
+[data-hc-ds] .hc-ui-physical-card__point {
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: 600 18px/23px var(--hc-font-display);
+  font-stretch: 75%;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+[data-hc-ds] .hc-ui-physical-card__point:disabled { cursor: default; opacity: 1; }
+[data-hc-ds] .hc-ui-physical-card__point[data-active] { text-decoration: underline 2px; text-underline-offset: 3px; }
+[data-hc-ds] .hc-ui-physical-card__object-points {
+  position: absolute;
+  left: 15px;
+  bottom: 10px;
+  font: 20px var(--hc-font-mono);
+  color: var(--hc-color-card-print-white);
+  text-shadow: -1px -1px 0 var(--hc-color-card-print-black), 1px -1px 0 var(--hc-color-card-print-black), -1px 1px 0 var(--hc-color-card-print-black), 1px 1px 0 var(--hc-color-card-print-black);
+}
+
+[data-hc-ds] .hc-ui-physical-card__terrain-dial {
+  position: absolute;
+  bottom: 0;
+  left: 94px;
+  display: grid;
+  grid-template-columns: repeat(3, 62px);
+  grid-template-rows: 43px 30px;
+  width: 188px;
+  height: 80px;
+  border-radius: 40px 40px 0 0;
+  background: linear-gradient(to right, var(--hc-color-card-terrain-panel), var(--hc-color-card-terrain-panel) 28%, var(--hc-color-card-terrain-panel-groove) 31%, var(--hc-color-card-terrain-panel) 37%, var(--hc-color-card-terrain-panel) 65%, var(--hc-color-card-terrain-panel-groove) 68%, var(--hc-color-card-terrain-panel) 74%);
+  color: var(--hc-color-card-print-black);
+  text-align: center;
+}
+[data-hc-ds] .hc-ui-physical-card__terrain-dial span { align-self: end; font: 700 24px/1 var(--hc-font-display); }
+[data-hc-ds] .hc-ui-physical-card__terrain-dial img { height: 22px; vertical-align: middle; }
+[data-hc-ds] .hc-ui-physical-card__terrain-dial b { font: 700 24px/30px var(--hc-font-display); font-stretch: 75%; letter-spacing: -1px; }
+
+[data-hc-ds] .hc-ui-physical-card__back-bar {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 375px;
+  height: 75px;
+  padding: 10px 10px 0;
+  background: var(--hc-color-card-print-black);
+  color: var(--hc-color-card-print-white);
+  font-size: 12px;
+  line-height: 19px;
+}
+[data-hc-ds] .hc-ui-physical-card__back-bar p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+[data-hc-ds] .hc-ui-physical-card__back-bar b { font-size: 10px; font-weight: 700; }
+
+/* 3D effect: by the mouse on the desktop and by the motion sensor only in the
+   phone's focus view. Without a mouse over the card or a sensor reading there is
+   no transform here; `[data-tilt]` is set by the view while it moves. */
+@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+  [data-hc-ds] .hc-ui-physical-card-tilt { transition: transform 0.18s ease-out; }
+  [data-hc-ds] .hc-ui-physical-card { transition: box-shadow 0.18s ease-out; }
+  [data-hc-ds] :is(.hc-ui-physical-card__token, .hc-ui-physical-card__terrain-art, .hc-ui-physical-card__bystander-token, .hc-ui-physical-card__header) { transition: translate 0.18s ease-out; }
+  [data-hc-ds] .hc-ui-physical-card__shine {
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
+    background: radial-gradient(circle at var(--hc-card-shine-at, 50% 50%), var(--hc-color-card-shine), transparent 60%);
+    mix-blend-mode: var(--hc-blend-card-shine);
+    transition: opacity 0.18s ease-out;
+  }
+  [data-hc-ds] .hc-ui-physical-card-slot[data-tilt] .hc-ui-physical-card { box-shadow: var(--hc-color-card-edge) 0 0 2px, var(--hc-color-card-lift) 0 14px 28px -10px; }
+  [data-hc-ds] .hc-ui-physical-card-slot[data-tilt] .hc-ui-physical-card__shine { opacity: 1; }
+  /* The front column lets the portrait pass the edge a little instead of cutting it. */
+  [data-hc-ds] .hc-ui-physical-card-slot[data-tilt] .hc-ui-physical-card__table[data-column='front'] { overflow: clip; overflow-clip-margin: 5px; }
+}
+@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
+  [data-hc-ds] .hc-ui-physical-cards[data-focus] .hc-ui-physical-card__shine {
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    opacity: 0;
+    pointer-events: none;
+    background: radial-gradient(circle at var(--hc-card-shine-at, 50% 50%), var(--hc-color-card-shine), transparent 60%);
+    mix-blend-mode: var(--hc-blend-card-shine);
+    transition: opacity 0.18s ease-out;
+  }
+  /* The sensor is already smoothed and updates every frame: no transition. */
+  [data-hc-ds] .hc-ui-physical-cards[data-focus][data-tilt] .hc-ui-physical-card { box-shadow: var(--hc-color-card-edge) 0 0 2px, var(--hc-color-card-lift) 0 14px 28px -10px; }
+  [data-hc-ds] .hc-ui-physical-cards[data-focus][data-tilt] .hc-ui-physical-card__shine { opacity: 1; }
+  [data-hc-ds] .hc-ui-physical-cards[data-focus][data-tilt] .hc-ui-physical-card__table[data-column='front'] { overflow: clip; overflow-clip-margin: 5px; }
+  [data-hc-ds] .hc-ui-physical-cards[data-focus][data-tilt] .hc-ui-physical-card-tilt { will-change: transform; }
+}
+/* Holding the card opens the focus view: no text selection and no image menu. */
+@media (hover: none) and (pointer: coarse) {
+  [data-hc-ds] .hc-ui-physical-cards {
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+  }
+  [data-hc-ds] .hc-ui-physical-cards img { -webkit-touch-callout: none; }
+  [data-hc-ds] .hc-ui-physical-card { -webkit-user-select: none; user-select: none; }
+  /* Outside the focus view the grain stays without blending, which weighs on
+     phones with several cards mounted. */
+  [data-hc-ds] .hc-ui-physical-cards:not([data-focus]) .hc-ui-physical-card::after {
+    opacity: var(--hc-opacity-card-grain-flat);
+    mix-blend-mode: normal;
+  }
+}
+
+/* PhysicalCardFocusView — HCUI `.card-focus`. The blurred background was asked for
+   by HCUI and applies only here. */
+[data-hc-ds] .hc-ui-card-focus {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  margin: 0;
+  padding: calc(env(safe-area-inset-top, 0px) + 16px) 8px calc(max(env(safe-area-inset-bottom, 0px), var(--hc-space-3)) + 8px);
+  border: 0;
+  background: none;
+  color: var(--hc-color-text-primary);
+  overscroll-behavior: contain;
+  touch-action: none;
+}
+[data-hc-ds] .hc-ui-card-focus[open] { display: flex; align-items: center; justify-content: center; }
+/* Darker than the overlay token, so the card stands out. Above ~24px of blur
+   Chromium shows sharp edges and text behind again. */
+[data-hc-ds] .hc-ui-card-focus::backdrop {
+  background-color: var(--hc-color-card-focus-backdrop);
+  -webkit-backdrop-filter: blur(22px);
+  backdrop-filter: blur(22px);
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  [data-hc-ds] .hc-ui-card-focus::backdrop { background-color: var(--hc-color-bg-elevated); }
+}
+[data-hc-ds] .hc-ui-card-focus__actions {
+  grid-row: 2;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 24px;
+}
+/* Quiet: the card is what shows. The outline Button keeps its border and only
+   gets the surface fill, which that variant leaves transparent. */
+[data-hc-ds] .hc-ui-card-focus .hc-ui-card-focus__actions .hc-ui-button[data-variant] { background-color: var(--hc-color-bg-surface); }
+[data-hc-ds] .hc-ui-physical-cards[data-focus] {
+  display: grid;
+  justify-items: center;
+  gap: 0;
+  animation: hc-ui-card-focus-in 0.24s ease-out both;
+}
+/* Front and backs in the same place: flipping turns both faces together, swapping
+   halfway, with the card edge-on. `backface-visibility` is not enough: the back
+   face showed mirrored during the first half of the turn. */
+[data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot {
+  grid-area: 1 / 1;
+  transform: perspective(1400px) rotateY(0deg);
+  transition: transform 0.5s ease-in-out, visibility 0s 0.25s;
+}
+[data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot[data-away] { visibility: hidden; pointer-events: none; }
+[data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot[data-side='front'][data-away] { transform: perspective(1400px) rotateY(-180deg); }
+[data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot[data-side='back'][data-away] { transform: perspective(1400px) rotateY(180deg); }
+@keyframes hc-ui-card-focus-in {
+  from { opacity: 0; transform: scale(0.94); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] .hc-ui-physical-cards[data-focus] { animation: none; }
+  [data-hc-ds] .hc-ui-physical-cards[data-focus] > .hc-ui-physical-card-slot { transition: none; }
+  [data-hc-ds] .hc-ui-physical-card__copy { transition: none; }
+}
+
+/* Map — HCUI `.map-board`, `.map-tooltip`, `.map-swatch`, `.map-scene__legend` and
+   `.map-environment`. The board's white, the selection's shading and the swatch's
+   text are HeroClix tokens, the same in both themes; the environment's black line
+   icons turn light in the dark theme (`filter-map-environment-icon`). */
+[data-hc-ds] :is(.hc-ui-map-board, .hc-ui-map-tooltip, .hc-ui-map-swatch, .hc-ui-map-legend, .hc-ui-map-environment),
+[data-hc-ds] :is(.hc-ui-map-board, .hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment) *,
+[data-hc-ds] :is(.hc-ui-map-board, .hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment) *::before,
+[data-hc-ds] :is(.hc-ui-map-board, .hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment) *::after { box-sizing: border-box; }
+/* ROND everywhere, and HCUI's long words that break only when they overflow. */
+[data-hc-ds] :is(.hc-ui-map-tooltip, .hc-ui-map-swatch, .hc-ui-map-legend, .hc-ui-map-environment),
+[data-hc-ds] :is(.hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment) * { font-variation-settings: 'ROND' var(--hc-rond); }
+:where([data-hc-ds] :is(.hc-ui-map-tooltip, .hc-ui-map-legend, .hc-ui-map-environment)) span,
+:where([data-hc-ds]) :is(.hc-ui-map-swatch, .hc-ui-map-environment) { overflow-wrap: break-word; }
+/* Square corners: the map is a board with its grid and labels up to the edge. The
+   hcmaps canvas draws on white, in both themes. */
+[data-hc-ds] .hc-ui-map-board {
+  position: relative;
+  width: 100%;
+  box-shadow: var(--hc-shadow-card);
+  background-color: var(--hc-color-map-board);
+  cursor: crosshair;
+}
+[data-hc-ds] .hc-ui-map-board:focus-visible { outline: 2px solid var(--hc-color-outline); outline-offset: 4px; }
+[data-hc-ds] .hc-ui-map-board canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+[data-hc-ds] .hc-ui-map-board[data-loading] {
+  aspect-ratio: 2 / 3;
+  background-color: var(--hc-color-bg-muted-2);
+  background-image: linear-gradient(var(--hc-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--hc-color-border) 1px, transparent 1px);
+  background-size: 12.5% 12.5%;
+}
+/* Read by screen readers only. */
+[data-hc-ds] .hc-ui-map-board__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+[data-hc-ds] .hc-ui-map-board__selection {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+[data-hc-ds] .hc-ui-map-board__selection rect { fill: var(--hc-color-map-selection); stroke: var(--hc-color-map-selection-edge); stroke-width: .07; }
+[data-hc-ds] .hc-ui-map-board__selection line { stroke: var(--hc-color-map-selection-line); stroke-width: .14; stroke-linecap: round; }
+
+/* MapSwatch: the board's square, with the terrain's fill and border, in both themes. */
+[data-hc-ds] .hc-ui-map-swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  border: 2px solid;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: var(--hc-font-weight-bold);
+  line-height: 1;
+  color: var(--hc-color-map-swatch-text);
+}
+[data-hc-ds] .hc-ui-map-swatch[data-light-text] { color: var(--hc-color-map-swatch-text-light); }
+[data-hc-ds] .hc-ui-map-swatch[data-wall] { height: 5px; border-width: 0; border-radius: 1px; outline: 1px solid var(--hc-color-border-strong); }
+
+[data-hc-ds] .hc-ui-map-tooltip {
+  position: fixed;
+  z-index: var(--hc-z-tooltip);
+  pointer-events: none;
+  width: max-content;
+  max-width: min(320px, calc(100vw - 16px));
+  padding: var(--hc-space-3);
+  border: 1px solid var(--hc-color-border-strong);
+  border-radius: var(--hc-radius-md);
+  background: var(--hc-color-bg-elevated);
+  color: var(--hc-color-text-primary);
+  box-shadow: var(--hc-shadow-card);
+  font-size: var(--hc-font-size-xs);
+  line-height: var(--hc-line-height-md);
+}
+/* HCUI's slightly condensed titles, at zero specificity. */
+:where([data-hc-ds] .hc-ui-map-tooltip__title) { font-stretch: 92%; }
+[data-hc-ds] .hc-ui-map-tooltip__title { display: flex; align-items: center; gap: var(--hc-space-2); margin-bottom: var(--hc-space-2); font-size: var(--hc-font-size-sm); font-weight: var(--hc-font-weight-bold); }
+[data-hc-ds] .hc-ui-map-tooltip__squares { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--hc-space-3); }
+[data-hc-ds] .hc-ui-map-tooltip__square { display: flex; flex-direction: column; gap: var(--hc-space-1); min-width: 0; color: var(--hc-color-text-secondary); }
+[data-hc-ds] .hc-ui-map-tooltip__square + .hc-ui-map-tooltip__square { padding-left: var(--hc-space-3); border-left: 1px solid var(--hc-color-border); }
+[data-hc-ds] .hc-ui-map-tooltip__coordinate { color: var(--hc-color-text-primary); font-weight: var(--hc-font-weight-bold); }
+[data-hc-ds] .hc-ui-map-tooltip__row { display: flex; align-items: center; gap: var(--hc-space-2); min-height: 18px; }
+[data-hc-ds] .hc-ui-map-tooltip__row[data-kind='terrain'] { color: var(--hc-color-text-primary); }
+[data-hc-ds] .hc-ui-map-tooltip__note { color: var(--hc-color-text-secondary); }
+[data-hc-ds] .hc-ui-map-tooltip .hc-ui-map-environment__item { gap: var(--hc-space-2); }
+[data-hc-ds] .hc-ui-map-tooltip .hc-ui-map-environment img { width: 16px; height: 16px; }
+
+/* MapLegendView: the icons follow the text's size. */
+[data-hc-ds] .hc-ui-map-legend {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--hc-space-1) var(--hc-space-3);
+  margin-top: var(--hc-space-2);
+  font-size: var(--hc-font-size-xs);
+  line-height: var(--hc-line-height-md);
+  color: var(--hc-color-text-secondary);
+}
+[data-hc-ds] .hc-ui-map-legend .hc-ui-map-environment img { width: 16px; height: 16px; }
+[data-hc-ds] .hc-ui-map-legend__key { display: inline-flex; align-items: center; gap: var(--hc-space-1); }
+
+[data-hc-ds] .hc-ui-map-environment {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--hc-space-2);
+  color: var(--hc-color-text-secondary);
+  font-size: var(--hc-font-size-xs);
+  line-height: var(--hc-line-height-md);
+}
+[data-hc-ds] .hc-ui-map-environment__item { display: inline-flex; align-items: center; gap: var(--hc-space-1); white-space: nowrap; }
+[data-hc-ds] .hc-ui-map-environment img { display: block; flex-shrink: 0; width: 18px; max-width: 100%; height: 18px; filter: var(--hc-filter-map-environment-icon); }