@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-color-text-standard-primary);
@property st-global(--wds-color-text-disabled);
@property st-global(--wds-color-text-urgent);
@property st-global(--wsr-color-D10);
@property st-global(--wsr-color-D10-30);
@property st-global(--wsr-color-O10);
@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;
}

/* 24px icon cell (matches the Figma spec): a single-line step row is then
 * 24px + 2×12px padding = 48px tall. The 18px glyph is centered within it, so
 * the icon lines up with the title (single line) or its first line (wrapped). */
.stepIcon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 24px;
}

/* Trailing chevron that replaces the per-step CTA button on mobile. WDS has no
 * dedicated icon-color token; icons take the text-standard color (the Figma
 * variable is grouped as "Text & icon"). */
.chevron {
  display: flex;
  flex-shrink: 0;
  color: var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624));
}

.chevronDisabled {
  display: flex;
  flex-shrink: 0;
  color: var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.30)));
}

/* "IN PROGRESS" label, rendered with a WDS <Text> (so it uses the design
 * system's typography) but in the urgent orange. <Text> has no "urgent" skin,
 * so we override the standard-text color token it reads — this beats the
 * component's own color rule without !important — and uppercase the label to
 * match the Figma spec. Using <Text> (not a Badge) keeps it flush with the
 * title, with no badge padding/offset. */
.inProgressLabel {
  --wds-color-text-standard-primary: var(--wds-color-text-urgent, var(--wsr-color-O10, #FE620F));

  text-transform: uppercase;
}