/* gowizardgo — structural stylesheet.
   Structure only: the row of steps, the numbered mark, the connecting line and
   the button row. Every colour is currentColor or a --gwz-* variable with a
   neutral default, so a host skins the wizard with one class of its own
   (Wizard.CSSClass) and never has to fight these rules.

   One variable is not optional in practice: --gwz-bg. The mark is a disc that
   has to HIDE the connecting line running behind it, so its background must be
   opaque in every state. A colour mixed with `transparent` is a hole, not a
   tint, and the line shows through it. */

.gwz {
  --gwz-mark: 1.5rem;                                             /* diameter of the numbered disc */
  --gwz-bg: Canvas;                                               /* opaque ground behind the disc */
  --gwz-line: color-mix(in oklab, currentColor 20%, transparent);
  --gwz-edge: color-mix(in oklab, currentColor 25%, transparent);
  --gwz-hover: color-mix(in oklab, currentColor 7%, transparent);
  --gwz-muted: color-mix(in oklab, currentColor 55%, transparent);
  /* CanvasText, not currentColor: these two land on the disc, whose own colour
     the same rule set changes — and `currentColor` inside a custom property is
     resolved where it is USED, so the current step's disc came out white on
     white. A concrete system colour cannot fold in on itself, and a host that
     wants its accent sets the variable anyway. */
  --gwz-done: CanvasText;
  --gwz-current: CanvasText;
  --gwz-current-text: Canvas;
  /* Tło pozycji, na której akurat jesteśmy. Domyślnie żadne — sam pogrubiony
     tekst i wypełnione kółko wystarczają za oznaczenie, a host, który chce
     mocniejszego wskazania, podaje tu swój kolor. Domieszka z `transparent`,
     nie z tłem: kółko rysuje własne, kryjące. */
  --gwz-current-wash: transparent;
  --gwz-min: 7rem;                                                /* narrowest a step may get before the row scrolls */
}

/* Wiersz nagłówka: nazwa po lewej, wyjście awaryjne po prawej. Pusty <span>
   po stronie nazwy trzyma przycisk przy prawej krawędzi, gdy nazwy nie ma. */
.gwz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.gwz-restart { margin: 0; }

.gwz-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gwz-muted);
}

/* The row scrolls sideways instead of wrapping. A wrapped navigator changes
   height as steps change state, and a control that resizes the page under the
   reader is worse than one that scrolls. */
.gwz-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.gwz-row {
  position: relative;
  flex: 1 1 0;
  min-width: var(--gwz-min);
}

/* The line joins consecutive steps into one path — without it the row reads as
   a set of links, and it is meant to read as a way through. It runs from the
   centre of one disc to the centre of the next; the discs themselves cover the
   parts that would cross them.

   Solid behind a finished step, dashed ahead: the same distinction as the tick
   against the number, readable out of the corner of an eye. */
.gwz-row + .gwz-row::before {
  content: "";
  position: absolute;
  top: calc(var(--gwz-mark) / 2);
  right: 50%;
  width: 100%;
  border-top: 1px dashed var(--gwz-line);
}
.gwz-row:has(.gwz-item[data-gwz-state="done"])::before {
  border-top-style: solid;
  border-top-color: var(--gwz-done);
}

.gwz-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  padding: 0.25rem 0.35rem 0.4rem;
  border: 0;
  border-radius: 0.375rem;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
}

/* Only an entry that leads somewhere reacts to the pointer. */
a.gwz-item,
button.gwz-item { cursor: pointer; }
a.gwz-item:hover,
button.gwz-item:hover { background: var(--gwz-hover); }

.gwz-mark {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--gwz-mark);
  height: var(--gwz-mark);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gwz-edge);
  border-radius: 999px;
  background: var(--gwz-bg);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gwz-muted);
}

.gwz-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.gwz-label { font-size: 0.8125rem; line-height: 1.2; }
.gwz-hint { font-size: 0.6875rem; line-height: 1.2; color: var(--gwz-muted); }

/* A finished step trades its number for a tick: it no longer needs its place
   in the queue, and a sign reads faster than a digit. */
.gwz-item[data-gwz-state="done"] .gwz-mark {
  border-color: var(--gwz-done);
  color: var(--gwz-done);
  font-size: 0;
}
.gwz-item[data-gwz-state="done"] .gwz-mark::before {
  content: "\2713";
  font-size: 0.75rem;
}

.gwz-item[aria-current="step"] {
  background: var(--gwz-current-wash);
  font-weight: 600;
}
.gwz-item[aria-current="step"] .gwz-mark {
  border-color: var(--gwz-current);
  background: var(--gwz-current);
  color: var(--gwz-current-text);
}

/* A step there is nothing to go to yet. Dimmed by COLOUR, not by opacity:
   opacity over the whole entry dilutes the disc's background too, and then the
   line underneath starts showing through it. */
.gwz-item[data-gwz-state="disabled"] { color: color-mix(in oklab, currentColor 40%, transparent); }
.gwz-item[data-gwz-state="disabled"] .gwz-mark {
  border-color: color-mix(in oklab, currentColor 15%, transparent);
  color: color-mix(in oklab, currentColor 45%, transparent);
}

/* „Zanim pójdziesz dalej" — struktura, nie wygląd: ramkę i kolor daje host
   przez NoticeClass, bo ma już swój styl komunikatu. */
.gwz-notice-head { margin: 0 0 0.25rem; font-weight: 600; }
/* list-style jawnie: gospodarz z resetem w stylu Tailwind Preflight gasi
   znaczniki na wszystkich listach, a lista braków bez nich zlewa się w akapit. */
.gwz-notice-list { margin: 0; padding-left: 1.1rem; list-style: disc; }
.gwz-notice-list > li + li { margin-top: 0.15rem; }

/* Licznik jest opcjonalny (Strings.CounterFmt domyślnie pusty) — nawigator
   z ptaszkami mówi to samo. */
.gwz-count {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  color: var(--gwz-muted);
}

/* Back on the left, Next on the right, whatever is missing still holding its
   side — so the Next button does not jump to the middle on the first step. */
.gwz-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.gwz-arrow { font-size: 0.9em; }

@media print {
  .gwz,
  .gwz-actions { display: none; }
}