@property st-global(--wds-color-border-dark-secondary);
@property st-global(--wds-color-border-standard-primary);
@property st-global(--wds-color-border-standard-secondary);
@property st-global(--wds-color-fill-standard-tertiary);
@property st-global(--wds-color-fill-standard-tertiary-hover);
@property st-global(--wsr-color-D60);
@property st-global(--wsr-color-D80);
@property st-global(--wsr-color-B30);
@property st-global(--wsr-color-B40);
@property st-global(--wsr-color-B60);
@property st-global(--wds-space-100);
@property st-global(--wds-border-radius-200);
@property st-global(--wds-border-radius-400);

.root {}

/* ---------------------------------------------------------------------------
 * Desktop step row — bordered card with hover/focus tinting. Hover only
 * applies to rows that are actually interactive (not focused / completed /
 * locked), gated by the `hoverable` state.
 *
 * Every var() carries the WDS fallback chain — semantic --wds token →
 * legacy --wsr token → hard-coded value — so the widget renders correctly
 * even when no theme stylesheet is loaded (same chains WDS ships itself).
 * ------------------------------------------------------------------------- */
.row {
  -st-states: focused, hoverable, clickable;

  display: flex;
  flex-direction: column;
  /* nearest default-theme token to the ~7-8px row padding; matches the SP1
   * inner gaps for a consistent 6px rhythm */
  padding: var(--wds-space-100, 6px);
  border-radius: var(--wds-border-radius-200, 4px);
  border: 1px solid var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB));
  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
  /* clip (not hidden) keeps focus rings on the inner CTA from being cut off */
  overflow: clip;
}

.row:clickable {
  cursor: pointer;
}

.row:hoverable:hover {
  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
  border-color: var(--wds-color-border-standard-secondary, var(--wsr-color-B40, #D6E6FE));
}

.row:focused {
  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
  border-color: var(--wds-color-border-standard-primary, var(--wsr-color-B30, #A8CAFF));
}

/* Completed step's CTA is revealed on row hover/focus (desktop), mirroring the
 * existing Setup widget. It still occupies space so the row height is stable. */
.completedCta {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}

.row:hover .completedCta,
.row:focus-within .completedCta {
  opacity: 1;
}

/* ---------------------------------------------------------------------------
 * Mobile step card — shadowed card; the focused (primary) card gets a soft
 * blue surface so the screen has one clear next-action target.
 * ------------------------------------------------------------------------- */
.card {
  -st-states: primary, clickable;

  display: block;
  width: 100%;
  border: none;
  border-radius: var(--wds-border-radius-400, 8px);
  background-color: var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #FFFFFF));
  box-shadow: 0 0 6px 0 rgba(0, 6, 36, 0.1), 0 2px 4px 0 rgba(0, 6, 36, 0.05);
  overflow: clip;
  box-sizing: border-box;
  text-align: start;
  font: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
}

.card:primary {
  background-color: var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B60, #F4F7FF));
}

.card:clickable {
  cursor: pointer;
}
