/* LWN Pro — one accent, three stepper styles.

   The only section on the page where a screenshot would be actively worse than
   a demo: the claim is that one colour drives everything, and a picture can
   only ever show one colour having done so. Here the reader picks.

   Every colour in the swatch row is live, including a pale yellow chosen to be
   awkward. It is there to be pressed: the text on the circles flips to ink and
   the connector darkens, which is the guarantee the plugin makes — no accent a
   merchant can choose produces unreadable text. Both values are computed in
   style-color.js from the same WCAG definitions ColorDeriver uses. */

.st {
  background: #FFFFFF;
  padding: var(--space-70) 40px;
  container-type: inline-size;
  font-family: var(--font-sans);

  /* Set by the script; these are the defaults it starts from. */
  --st-accent: #1E5EB8;
  --st-on-accent: #FFFFFF;
  --st-line: #1E5EB8;
  --st-tint: #E8EFF8;
  --st-tint-strong: #C9DAF0;
}
/* Copy above, demo across the full width — not side by side like the sections
   around it. The breadcrumb is a full-width component: squeezed into a 520px
   column its segments fell to 120px each, and with 20px of padding and a 14px
   chevron eating a third of that, the labels ran into the notches. Shown at
   the width it actually occupies, it looks like itself. */
.st__in {
  max-width: 1180px;
  margin: 0 auto;
}
.st__copy { max-width: 62ch; margin-bottom: 30px; }

/* --- Copy ---------------------------------------------------------------- */

.st__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
}
.st__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--color-contrast);
  margin: 0 0 14px;
}
.st__lede {
  max-width: 52ch;
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--color-ink-600);
}

/* --- Controls ------------------------------------------------------------ */

.st__controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.st__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.st__rl {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-400);
  min-width: 52px;
}

.st__swatches { display: flex; gap: 8px; }
.st__sw {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--sw);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(23, 24, 26, 0.12);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.st__sw:hover { transform: scale(1.08); }
/* The ring is drawn outside the swatch so it reads on a dark colour and a pale
   one alike — a border would vanish into the near-black one. */
.st__sw.is-on {
  box-shadow: inset 0 0 0 1px rgba(23, 24, 26, 0.12),
              0 0 0 2px #FFFFFF, 0 0 0 4px var(--color-contrast);
}
.st__sw:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 4px; }


/* Six swatches would read as six choices. This says the row is a sample, not
   the menu. A colour-wheel chip said the same thing and said it too quietly —
   at 30px it read as a seventh colour rather than "and the rest". */
.st__any {
  font-size: var(--text-xs);
  color: var(--color-ink-400);
  white-space: nowrap;
}

.st__styles { display: flex; gap: 6px; flex-wrap: wrap; }
.st__st {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--color-line-200);
  background: #FFFFFF;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-500);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.st__st:hover { color: var(--color-contrast); }
.st__st.is-on {
  background: var(--color-contrast);
  border-color: var(--color-contrast);
  color: #FFFFFF;
}
.st__st:focus-visible { outline: 2px solid var(--color-blue-700); outline-offset: 2px; }

/* --- The stepper --------------------------------------------------------- */

.st__stage {
  background: #FFFFFF;
  border: 1px solid var(--color-line-200);
  border-radius: 14px;
  padding: 26px 22px;
  box-shadow: 0 14px 34px -28px rgba(23, 24, 26, 0.45);
  overflow: hidden;
}
.st__flow {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.st__s {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.st__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.st__mark svg { width: 18px; height: 18px; }
.st__sl {
  font-size: var(--text-2xs);
  line-height: 1.3;
  text-align: center;
  color: var(--color-ink-400);
}
.st__s.is-done .st__sl,
.st__s.is-current .st__sl {
  font-weight: var(--weight-semibold);
  color: var(--color-contrast);
}

/* Default — numbered circles on a connector. */
.st__flow.is-default .st__mark,
.st__flow.is-icon .st__mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #F1F4F7;
  border: 2px solid transparent;
  color: var(--color-ink-400);
}
.st__flow.is-default .st__s.is-done .st__mark,
.st__flow.is-icon .st__s.is-done .st__mark,
.st__flow.is-default .st__s.is-current .st__mark,
.st__flow.is-icon .st__s.is-current .st__mark {
  background: var(--st-accent);
  border-color: var(--st-accent);
  color: var(--st-on-accent);
}
.st__flow.is-default .st__s::after,
.st__flow.is-icon .st__s::after {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  border-radius: 2px;
  background: #E1E6EC;
}
.st__flow.is-default .st__s:last-child::after,
.st__flow.is-icon .st__s:last-child::after { display: none; }
.st__flow.is-default .st__s.is-done::after,
.st__flow.is-icon .st__s.is-done::after { background: var(--st-line); }

/* Icon — the same circles, carrying the plugin's own step icons. */
.st__flow.is-icon .st__mark svg { display: block; }

/* Breadcrumb — the block checkout's, rule for rule.

   This is .lscp-bstep-header--breadcrumb, not the classic breadcrumb.css I
   first copied. They are different components and only one of them is what a
   merchant sees when they choose Breadcrumb on the block checkout:

     the strip sits in a bordered, rounded, overflow-hidden container
     every segment is white, clipped to a chevron 14px deep
     .is-done takes the tint, its number becomes a tick on tint-strong,
       and its label takes the accent
     .is-active takes the accent, its number a 25% white wash, its label white
     the sub-label is hidden in this style
     the last segment is not clipped

   The numbers stay. The classic breadcrumb drops them; this one does not. */
.st__flow.is-breadcrumb {
  gap: 0;
  border: 1px solid var(--color-line-200);
  border-radius: 10px;
  overflow: hidden;
}
.st__flow.is-breadcrumb .st__s {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 14px 14px 20px;
  background: #FFFFFF;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.st__flow.is-breadcrumb .st__s:first-child { padding-inline-start: 14px; }
.st__flow.is-breadcrumb .st__s:last-child { clip-path: none; }
.st__flow.is-breadcrumb .st__s::after { display: none; }

.st__flow.is-breadcrumb .st__s.is-done { background: var(--st-tint); }
.st__flow.is-breadcrumb .st__s.is-current { background: var(--st-accent); }

/* The circle is kept in this style — filled palely on a finished step, washed
   with white on the active one. */
.st__flow.is-breadcrumb .st__mark {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  border: 0;
  background: var(--color-line-200);
  color: var(--color-ink-500);
  font-size: 12px;
  font-weight: var(--weight-bold);
}
.st__flow.is-breadcrumb .st__mark svg { width: 13px; height: 13px; }
.st__flow.is-breadcrumb .st__s.is-done .st__mark {
  background: var(--st-tint-strong);
  color: var(--st-line);
}
.st__flow.is-breadcrumb .st__s.is-current .st__mark {
  background: rgba(255, 255, 255, 0.25);
  color: var(--st-on-accent);
}

.st__flow.is-breadcrumb .st__sl {
  font-size: 14px;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-contrast);
  font-weight: var(--weight-semibold);
}
.st__flow.is-breadcrumb .st__s.is-done .st__sl { color: var(--st-line); }
.st__flow.is-breadcrumb .st__s.is-current .st__sl { color: var(--st-on-accent); }

/* --- What was worked out for you ----------------------------------------- */

/* Labelled, because the block header and the classic stepper are separate
   components that draw these three styles differently. Naming which one is on
   screen stops the preview being a promise it cannot keep — as a caption
   rather than a caveat, since it is orientation, not an apology. */
.st__note {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-400);
}

.st__derived {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--color-ink-400);
}
.st__derived b { font-weight: var(--weight-semibold); color: var(--color-ink-600); }

@media (prefers-reduced-motion: reduce) {
  .st__sw, .st__st, .st__mark { transition: none; }
  .st__sw:hover { transform: none; }
}

/* --- Narrow -------------------------------------------------------------- */

@container (max-width: 900px) {
  .st__copy { margin-bottom: 24px; }
}
@container (max-width: 560px) {
  .st { padding: var(--space-60) 20px; }
  .st__stage { padding: 20px 14px; }
  .st__rl { min-width: 0; }
  .st__flow.is-default .st__mark,
  .st__flow.is-icon .st__mark { width: 30px; height: 30px; }
  .st__flow.is-default .st__s::after,
  .st__flow.is-icon .st__s::after { top: 14px; left: calc(50% + 19px); right: calc(-50% + 19px); }
  .st__sl { font-size: 10px; }
  /* Four segments will not fit a phone at a readable size. The block checkout
     hides its header below 600px and shows a single-step card instead; here the
     strip scrolls, which keeps every label legible rather than shrinking them
     all past the point of use. */
  /* overflow-y must be said out loud. Setting one axis to auto computes the
     other to auto as well, so the stage grew a vertical scrollbar for the few
     pixels of ring and shadow around the current step — a stray line down the
     right edge with nothing to scroll to. */
  .st__stage { overflow-x: auto; overflow-y: hidden; }
  .st__flow.is-breadcrumb { min-width: 340px; }
  .st__flow.is-breadcrumb .st__s { padding: 11px 10px 11px 16px; }
  .st__flow.is-breadcrumb .st__sl { font-size: 12.5px; }
}