aporia 0.1.0

package/dist/style.css

@@ -0,0 +1,977 @@
+/* Slider group - sliders with 4px gap */
+.sliderGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+/*
+ * Flex default min-width:auto uses content min size; an overstretched inner card
+ * could inflate this box and poison ResizeObserver-based base width. min-width:0
+ * keeps the track width equal to the column.
+ */
+.sliderCardWrap {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  overflow: visible;
+}
+
+/* ── Slider card ─────────────────────────────────────────────────────────── */
+
+.sliderCard {
+  position: relative;
+  height: 37px;
+  border-radius: 12px;
+  background: var(--slider-surface);
+  box-shadow: inset 0 0 0 0.5px var(--slider-rim);
+  overflow: hidden;
+  transition: background-color 0.2s ease-out;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  /* Figma: 10px top/bottom + ~17px label line ≈ 37px total; 12px matches horizontal inset */
+  padding: 10px 12px;
+  box-sizing: border-box;
+  max-width: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+}
+
+.sliderCard[data-active='true'] {
+  background: var(--slider-surface-active);
+}
+
+/* Dev-only: thumb overlap heuristic (tint) vs real DOM (outlines) */
+.sliderDebugOverlap {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.sliderDebugOverlap__heuristic {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+}
+
+.sliderDebugOverlap__heuristic--label {
+  background: var(--slider-debug-label-tint);
+}
+
+.sliderDebugOverlap__heuristic--value {
+  right: 0;
+  left: auto;
+  width: auto;
+  background: var(--slider-debug-value-tint);
+}
+
+.sliderDebugOverlap__dom {
+  position: absolute;
+  box-sizing: border-box;
+  border: 2px solid var(--slider-debug-dom-label);
+  background: transparent;
+  box-shadow: 0 0 0 1px var(--slider-debug-dom-shadow);
+}
+
+.sliderDebugOverlap__dom--value {
+  border-color: var(--slider-debug-dom-value);
+}
+
+/* Filled track — 12px rounding on both ends of the progress pill */
+.sliderTrack {
+  position: absolute;
+  inset: 0;
+  right: auto;
+  background: var(--slider-track);
+  border-radius: 12px;
+  pointer-events: none;
+  transition: background-color 0.2s ease-out;
+}
+
+.sliderTrack[data-active='true'] {
+  background: var(--slider-track-active);
+}
+
+/* Tick marks — 10 dots, shown on hover */
+.sliderTicks {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  right: 12px;
+  height: 10px;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.sliderTick {
+  width: 2px;
+  height: 2px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--slider-tick);
+  opacity: var(--slider-tick-layer-opacity);
+}
+
+/* Thumb — 2×16px; height shrinks to 10px when behind label (via motion) */
+.sliderThumb {
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--slider-thumb);
+  transform: translate(-100%, -50%);
+  pointer-events: none;
+  opacity: 0;
+  z-index: 3;
+  transition: background-color 0.15s ease-out;
+}
+
+.sliderThumb[data-dragging='true'] {
+  background: var(--slider-thumb-dragging);
+}
+
+.sliderLabel {
+  position: relative;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--slider-text-muted);
+  letter-spacing: 0.28px;
+  flex: 1;
+  min-width: 0;
+  z-index: 2;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Tight bounds for overlap math (parent flex:1 can be wider than glyphs) */
+.sliderLabelText {
+  display: inline;
+}
+
+.sliderValueText {
+  display: inline;
+}
+
+/* Invisible copy of value text + typography — used to size the edit field to content */
+.sliderValueMeasure {
+  position: absolute;
+  left: 0;
+  top: 0;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: pre;
+  height: 0;
+  overflow: hidden;
+  text-decoration: none;
+}
+
+.sliderValueZone {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 72px;
+  height: 100%;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 12px;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+
+/* Value underline: 1px stroke; color fades with SliderRow motion (0.2s ease-out). */
+.sliderValue {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--slider-text-muted);
+  letter-spacing: 0.28px;
+  white-space: nowrap;
+  cursor: text;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  user-select: none;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition:
+    color 0.2s ease-out,
+    text-decoration-color 0.2s ease-out;
+}
+
+.sliderValue[data-active='true'] {
+  color: var(--slider-text);
+}
+
+.sliderValueZone:hover
+  .sliderValue:not(.sliderValueMeasure) {
+  text-decoration-color: currentColor;
+}
+
+/* After .sliderValue so width measurement isn’t affected by underline metrics */
+.sliderValue.sliderValueMeasure {
+  text-decoration: none;
+}
+
+.sliderValueInput {
+  position: relative;
+  z-index: 4;
+  width: auto;
+  max-width: 100%;
+  min-width: 22px;
+  flex-shrink: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--slider-text);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.28px;
+  text-align: right;
+  outline: none;
+  padding: 0;
+  pointer-events: all;
+  font-variant-numeric: tabular-nums;
+  -moz-appearance: textfield;
+  user-select: text;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition: text-decoration-color 0.2s ease-out;
+}
+
+.sliderValueInput:hover,
+.sliderValueInput:focus {
+  text-decoration-color: currentColor;
+}
+
+.sliderValueInput::selection {
+  background: var(--slider-value-selection-bg);
+  color: var(--slider-value-selection-fg);
+}
+
+.sliderValueInput::-moz-selection {
+  background: var(--slider-value-selection-bg);
+  color: var(--slider-value-selection-fg);
+}
+
+.sliderValueInput::-webkit-inner-spin-button,
+.sliderValueInput::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* The actual range input — invisible, covers the full card */
+.sliderInput {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  margin: 0;
+  z-index: 2;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+/* Stack above slider rows (they use z-index + transform layers). */
+.swatchPopoverPortal {
+  position: relative;
+  z-index: 200000;
+  isolation: isolate;
+}
+
+.swatchPopoverPositioner {
+  z-index: 0;
+}
+
+/* Popover container - minimal styling, content controls its own appearance */
+.swatchPopoverPopup {
+  position: relative;
+  z-index: 1;
+  min-width: 190px;
+  max-width: min(320px, calc(100vw - 24px));
+  padding: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--slider-text);
+  outline: none;
+  transform-origin: top right;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity 0.2s ease-out,
+    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Open/close: Base UI sets these while mount/unmount transitions run */
+.swatchPopoverPopup[data-starting-style],
+.swatchPopoverPopup[data-ending-style] {
+  opacity: 0;
+  transform: translateY(-6px) scale(0.97);
+}
+
+.swatchPopoverPopup[data-instant] {
+  transition-duration: 0ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .swatchPopoverPopup {
+    transition-duration: 0.12s;
+    transition-property: opacity;
+  }
+
+  .swatchPopoverPopup[data-starting-style],
+  .swatchPopoverPopup[data-ending-style] {
+    transform: none;
+  }
+}
+
+.swatchPopoverTitle {
+  margin: 0 0 10px;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--slider-text-muted);
+}
+
+.swatchPopoverBody {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--slider-text-muted);
+}
+
+/* When containing a gradient picker, remove body styling */
+.swatchPopoverBody:has(.gradientPicker) {
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+.swatchPopoverBody p {
+  margin: 0 0 10px;
+}
+
+.swatchPopoverBody p:last-child {
+  margin-bottom: 0;
+}
+
+/* Screen-reader escape hatch for trap-focus (Base UI recommendation) */
+.swatchPopoverCloseSrOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.swatchPopoverNativeColor {
+  display: block;
+  width: 100%;
+  height: 36px;
+  margin-top: 4px;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.swatchPopoverNativeColor::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+
+.swatchPopoverNativeColor::-webkit-color-swatch {
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.swatchPopoverNativeColor::-moz-color-swatch {
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+/* Same shell as SliderRow / ToggleRow */
+
+.colorRowWrap {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  overflow: visible;
+}
+
+.colorCard {
+  position: relative;
+  height: 37px;
+  border-radius: 12px;
+  background: var(--slider-surface);
+  box-shadow: inset 0 0 0 0.5px var(--slider-rim);
+  overflow: hidden;
+  transition: background-color 0.2s ease-out;
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+
+.colorCard[data-active='true'] {
+  background: var(--slider-surface-active);
+}
+
+.colorLabel {
+  position: relative;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--slider-text-muted);
+  letter-spacing: 0.28px;
+  flex: 1;
+  min-width: 0;
+  z-index: 2;
+  pointer-events: none;
+  transition: color 0.2s ease-out;
+}
+
+.colorCard[data-active='true'] .colorLabel {
+  color: var(--slider-text);
+}
+
+/* Wider than slider value column: # + 6 hex + 8px gap + 16px swatch */
+.colorValueZone {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-right: 12px;
+  min-width: 108px;
+  max-width: 50%;
+}
+
+/* Hex cluster — mirrors .sliderValue underline + hover rules */
+.colorRowValue {
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.28px;
+  white-space: nowrap;
+  cursor: text;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  color: var(--slider-text-muted);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition:
+    color 0.2s ease-out,
+    text-decoration-color 0.2s ease-out;
+  min-width: 0;
+}
+
+.colorCard[data-active='true'] .colorRowValue {
+  color: var(--slider-text);
+}
+
+.colorValueZone:hover .colorRowValue {
+  text-decoration-color: currentColor;
+}
+
+.colorHexHash {
+  pointer-events: none;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.colorHexDigits {
+  pointer-events: none;
+}
+
+.colorHexInput {
+  width: 6.2ch;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.28px;
+  color: var(--slider-text);
+  text-align: left;
+  outline: none;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition: text-decoration-color 0.2s ease-out;
+  cursor: text;
+}
+
+.colorHexInput:hover,
+.colorHexInput:focus {
+  text-decoration-color: currentColor;
+}
+
+.colorHexInput::selection {
+  background: var(--slider-value-selection-bg);
+  color: var(--slider-value-selection-fg);
+}
+
+.colorHexInput::-moz-selection {
+  background: var(--slider-value-selection-bg);
+  color: var(--slider-value-selection-fg);
+}
+
+/* 16×16 swatch, native picker trigger; inset 0.5px black @ 20% */
+.colorSwatchBtn {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
+}
+
+.colorSwatchBtn:focus-visible {
+  outline: 2px solid var(--slider-text-muted);
+  outline-offset: 2px;
+}
+/* Mirrors slider row geometry: full width, 37px pill, label + right control column */
+
+.toggleRowWrap {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  overflow: visible;
+}
+
+.toggleCard {
+  position: relative;
+  height: 37px;
+  border-radius: 12px;
+  background: var(--slider-surface);
+  box-shadow: inset 0 0 0 0.5px var(--slider-rim);
+  overflow: hidden;
+  transition: background-color 0.2s ease-out;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  max-width: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  width: 100%;
+  font: inherit;
+  text-align: left;
+  color: inherit;
+}
+
+.toggleCard:hover {
+  background: var(--slider-surface-active);
+}
+
+.toggleCard:focus {
+  outline: none;
+}
+
+.toggleCard:focus-visible {
+  outline: 2px solid var(--slider-text-muted);
+  outline-offset: 2px;
+}
+
+.toggleLabel {
+  position: relative;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.28px;
+  flex: 1;
+  min-width: 0;
+  z-index: 2;
+  pointer-events: none;
+  color: var(--slider-text-muted);
+  transition: color 0.2s ease-out;
+}
+
+.toggleCard:hover .toggleLabel,
+.toggleCard[data-on='true'] .toggleLabel {
+  color: var(--slider-text);
+}
+
+.toggleControl {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 72px;
+  height: 100%;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 12px;
+  pointer-events: none;
+}
+
+/*
+ * 16×16 track (radius 5); thumb 8×14 (radius 4), 1px inset; 6px slide.
+ * Thumb uses opaque row-matched fills (see theme) so it stays visible on white ON track.
+ */
+.toggleSwitch {
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+.toggleSwitch__track {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: 5px;
+  background: var(--slider-track);
+  transition: background-color 0.2s ease-out;
+}
+
+.toggleCard[data-on='true'] .toggleSwitch__track {
+  background: var(--slider-value-selection-bg);
+}
+
+.toggleSwitch__thumb {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 8px;
+  height: 14px;
+  border-radius: 4px;
+  background: var(--toggle-thumb-row-bg);
+  transition:
+    transform 0.22s cubic-bezier(0.33, 1, 0.68, 1),
+    background-color 0.2s ease-out;
+}
+
+.toggleCard:hover .toggleSwitch__thumb {
+  background: var(--toggle-thumb-row-bg-hover);
+}
+
+.toggleCard[data-on='true'] .toggleSwitch__thumb {
+  transform: translateX(6px);
+}
+/* Container - exact Figma specs */
+.gradientPicker {
+  display: flex;
+  flex-direction: column;
+  width: 190px;
+  background: #0a0a0a;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 12px;
+}
+
+/* Header row */
+.gradientPickerHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 6px 2px 6px;
+}
+
+/* Left icons group (shuffle + invert) */
+.gradientPickerHeaderIconsLeft {
+  display: flex;
+  align-items: center;
+}
+
+/* Icon button - 26x26 with centered 14x14 icon */
+.gradientPickerIconBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: background-color 0.15s ease-out, color 0.15s ease-out;
+}
+
+.gradientPickerIconBtn svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+
+.gradientPickerIconBtn:hover {
+  background: #141414;
+  color: #ffffff;
+}
+
+.gradientPickerIconBtn:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.3);
+  outline-offset: 1px;
+}
+
+/* Stops list - no gap, rows are flush */
+.gradientPickerStopsList {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Individual stop row - no hover state */
+.gradientPickerStop {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 37px;
+  width: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* Color swatch + hex container - positioned absolutely with gap */
+.gradientPickerStopColorHex {
+  position: absolute;
+  left: 12px;
+  top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Color swatch - 16px circle */
+.gradientPickerStopSwatch {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 16px;
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
+}
+
+.gradientPickerStopSwatch:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+
+/* Hex text display - matches ColorRow styling */
+.gradientPickerStopHex {
+  display: inline-flex;
+  align-items: baseline;
+  font-size: 14px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.28px;
+  white-space: nowrap;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: text;
+  transition: color 0.2s ease-out;
+}
+
+/* Hash is not selectable */
+.gradientPickerStopHexHash {
+  pointer-events: none;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+/* Only the digits get the underline */
+.gradientPickerStopHexDigits {
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition: text-decoration-color 0.2s ease-out;
+}
+
+.gradientPickerStopHex:hover .gradientPickerStopHexDigits,
+.gradientPickerStopHex:focus .gradientPickerStopHexDigits {
+  text-decoration-color: currentColor;
+}
+
+/* Wrapper for editing state with hash + input */
+.gradientPickerStopHexWrap {
+  display: inline-flex;
+  align-items: baseline;
+  font-size: 14px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.28px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Hex input when editing */
+.gradientPickerStopHexInput {
+  width: 58px;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.28px;
+  color: #ffffff;
+  text-align: left;
+  outline: none;
+  cursor: text;
+  text-decoration: underline;
+  text-decoration-color: currentColor;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+.gradientPickerStopHexInput::selection {
+  background: #ffffff;
+  color: #000000;
+}
+
+/* Delete/minus button - positioned absolutely */
+.gradientPickerStopDelete {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: color 0.15s ease-out, opacity 0.15s ease-out;
+}
+
+.gradientPickerStopDelete:hover:not(:disabled) {
+  color: #ffffff;
+}
+
+.gradientPickerStopDelete:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.gradientPickerStopDelete:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.5);
+  outline-offset: 2px;
+}
+/* Same shell as ColorRow; swatch only (no hex column). */
+
+.gradientRowWrap {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  overflow: visible;
+}
+
+.gradientCard {
+  position: relative;
+  height: 37px;
+  border-radius: 12px;
+  background: var(--slider-surface);
+  box-shadow: inset 0 0 0 0.5px var(--slider-rim);
+  overflow: hidden;
+  transition: background-color 0.2s ease-out;
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+
+.gradientCard[data-active='true'] {
+  background: var(--slider-surface-active);
+}
+
+.gradientLabel {
+  position: relative;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--slider-text-muted);
+  letter-spacing: 0.28px;
+  flex: 1;
+  min-width: 0;
+  z-index: 2;
+  pointer-events: none;
+  transition: color 0.2s ease-out;
+}
+
+.gradientCard[data-active='true'] .gradientLabel {
+  color: var(--slider-text);
+}
+
+.gradientSwatchZone {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 12px;
+  min-width: 28px;
+}
+
+/* 16×16 circle, same inner stroke as ColorRow swatch */
+.gradientSwatchBtn {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
+}
+
+.gradientSwatchBtn:focus-visible {
+  outline: 2px solid var(--slider-text-muted);
+  outline-offset: 2px;
+}