/* Nakładki · the page wizard "Załóż stronę" (prototype A_Zaloz.dc.html), on top of nk-tokens.css and app.css. The
   values are the prototype's: the 720 px card with 44 px inside (22 px on a phone), "Krok N z 4" over four bars, the
   step, then "Wstecz" and "Dalej" 28 px under it. No media queries: like the prototype, everything wraps (the type
   cards three in a row, one per row on a phone). The colour picker and the style cards of step 3 are look.css.
   Radio buttons and checkboxes stay real inputs, visually hidden inside their label (.wz-pick), so the form works
   without JavaScript and the keyboard, the focus ring and screen readers work as usual; the span after the input draws
   the prototype's button. Targets are 44 px (house rule): where the prototype draws a smaller control (the 40 px
   style pills, the checkbox rows of step 4), the label is 44 px and a negative margin of the difference
   keeps the prototype's spacing. */

.wz { max-width: 720px; margin: 0 auto; padding: clamp(22px, 4vw, 44px); border-radius: var(--nk-r-hero, 28px); }
.wz [hidden] { display: none !important; }
/* The title that is not an h1 to h6 element (a card to choose: the kind of page, the organisation): the display face
   of the headings (app.css), like the titles of the steps. */
.wz-card__title { font-family: var(--nk-font-display, 'Hanken Grotesk', 'Sofia Sans', system-ui, sans-serif); }

/* "Krok N z 4" and the bars, 28 px above the step. */
.wz-progress { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.wz-count { font-size: 14px; font-weight: 600; color: var(--nk-muted, #5D6372); font-variant-numeric: tabular-nums; }
.wz-bars { display: flex; gap: 6px; }
.wz-bar { flex: 1 1 0; height: 6px; border-radius: var(--nk-r-pill, 999px); background: var(--nk-line, #E3E0D9); }
.wz-bar.is-on { background: var(--nk-ink, #0B1220); }

/* A fixed note ("Minęła godzina…") and the error summary (house rule E3: it takes the focus), above the step. The
   summary is focused only by the script (tabindex -1, nobody tabs to it), so it shows no ring; its links do. Each link
   fills its row and is a target of at least 24 px (WCAG 2.5.8), 4 px from the next; as a block it keeps the bullet on
   the first line of a long message. */
.wz-info, .wz-summary { margin-bottom: 20px; }
.wz-summary { display: flex; flex-direction: column; gap: 6px; }
.wz-summary:focus { outline: none; }
.wz-summary__list { margin: 0; padding-left: 20px; }
.wz-summary__list li + li { margin-top: 4px; }
.wz-summary__list a { display: block; padding: 3px 0; }
.wz-summary a { color: inherit; }

/* Titles: a step (38 px) and the done screen (40 px). */
.wz-title { font-size: clamp(28px, 4vw, 38px); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.wz-title--done { font-size: clamp(30px, 4vw, 40px); line-height: 1.08; }

/* A step: a column with the prototype's gap (20 px name and address, 16 px look, 18 px e-mail and code). */
.wz-form { display: block; }
.wz-fields { display: flex; flex-direction: column; gap: 20px; }
.wz-fields--look { gap: 16px; }
.wz-fields--mail, .wz-fields--code { gap: 18px; }
.wz-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.wz-legend { padding: 0; margin-bottom: 18px; }
.wz-label { padding: 0; margin-bottom: 10px; font-weight: 600; }
.wz-group .wz-label { margin-bottom: 8px; }
.wz-label__note { font-weight: 400; color: var(--nk-muted, #5D6372); }
.wz-hint { font-size: 14px; color: var(--nk-muted, #5D6372); }
.wz-strong { color: var(--nk-ink, #0B1220); }

/* Errors at the fields: 14 px, semibold, red; 12 px under the type cards, 10 px under a group. */
.wz-err { font-size: 14px; font-weight: 600; color: var(--nk-danger, #A3262A); }
.wz-set > .wz-err { margin-top: 10px; }
.wz-cards + .wz-err { margin-top: 12px; }

/* A live status (the address, the swatch limit, "Skopiowano"). It stays in the accessibility tree while empty (display:
   none would keep screen readers from announcing its first text); out of the flow, it takes no space. */
.wz-status { font-size: 14px; font-weight: 600; color: var(--nk-ink-2, #3A4050); }
.wz-status[data-state="ok"] { color: var(--nk-success, #1E5E30); }
.wz-status[data-state="taken"], .wz-status[data-state="reserved"], .wz-status[data-state="invalid"] { color: var(--nk-danger, #A3262A); }
.wz-set > .wz-status { margin-top: 10px; }
.wz-status:empty, .wz-toast:empty { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); }

/* Radio buttons and checkboxes inside their label: the input is hidden from sight, its sibling shows the state. */
.wz-pick { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wz-card, .wz-pill, .wz-seg__item { position: relative; cursor: pointer; }
.wz-pick:focus-visible + span { outline: 3px solid var(--nk-link-hover, #1C5F99); outline-offset: 2px; }

/* Step 1 (and the organisations of step 4): cards of at least 200 px, 76 px high, the chosen one with an ink edge. Like
   the prototype's buttons they do not change on hover. A card with a title only (an organisation) has it in the middle;
   the type cards with their two lines fill the 76 px. */
.wz-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.wz-card { flex: 1 1 200px; display: flex; min-width: 0; }
.wz-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 76px;
  padding: 14px 18px;
  border: 1px solid var(--nk-line, #E3E0D9);
  border-radius: var(--nk-r-card, 18px);
  background: var(--nk-surface, #FFFFFF);
  color: var(--nk-ink, #0B1220);
}
.wz-card__title { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.wz-card__desc { font-size: 14px; color: var(--nk-muted, #5D6372); }
.wz-pick:checked + .wz-card__body { border-color: var(--nk-ink, #0B1220); background: var(--nk-bg, #F7F6F2); box-shadow: 0 0 0 1px var(--nk-ink, #0B1220); }

/* Step 2: the address after the fixed part "nakladki.com.pl/", in one 52 px field; the typed part gives way on a narrow
   phone, the fixed part never. The edge is --nk-line-input like every text field (app.css, WCAG 1.4.11); the focus
   ring goes round the whole field. */
.wz-addr { display: flex; align-items: center; min-width: 0; border: 1px solid var(--nk-line-input, #7A7F8C); border-radius: var(--nk-r-field, 14px); background: var(--nk-surface, #FFFFFF); overflow: hidden; }
.wz-addr:focus-within { outline: 3px solid var(--nk-link-hover, #1C5F99); outline-offset: 2px; }
.wz-addr:has(input[aria-invalid="true"]) { border-color: var(--nk-danger, #A3262A); }
.wz-addr__base { flex: 0 0 auto; padding: 0 4px 0 18px; color: var(--nk-muted, #5D6372); white-space: nowrap; }
.wz-addr__input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 0 18px 0 0; border: 0; background: transparent; color: var(--nk-ink, #0B1220); font: inherit; font-size: 16px; }
.wz-addr__input:focus { outline: none; }

/* Step 3: the switch "Wygeneruj w systemie" / "Wgraj swoją nakładkę", always in one row. */
.wz-seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--nk-r-field, 14px); background: var(--nk-surface-3, #ECE9E2); }
.wz-seg__item { flex: 1 1 0; min-width: 0; display: flex; }
.wz-seg__body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--nk-r-seg, 11px);
  color: var(--nk-muted, #5D6372);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.wz-pick:checked + .wz-seg__body { border-color: var(--nk-ink, #0B1220); background: var(--nk-surface, #FFFFFF); color: var(--nk-ink, #0B1220); }

/* The pills of the post background: 40 px in 44 px labels, without a hover state, like the prototype's. The style
   cards of a generated overlay are look.css. */
.wz-pills { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: -2px 0; }
.wz-pill { display: flex; padding: 2px 0; }
.wz-pill__body {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--nk-line-strong, #D6D2C9);
  border-radius: var(--nk-r-pill, 999px);
  background: var(--nk-surface, #FFFFFF);
  color: var(--nk-ink, #0B1220);
  font-size: 14px;
  font-weight: 600;
}
.wz-pick:checked + .wz-pill__body { border-color: var(--nk-ink, #0B1220); background: var(--nk-ink, #0B1220); color: var(--nk-on-ink, #FFFFFF); }

/* "Wgraj swoją nakładkę": the held file (look.css .lk-held), the file field, "Wgraj i odczytaj barwy" and the notes.
   The smaller ghost buttons of the step ("Usuń nakładkę", "Wgraj i odczytaj barwy", "Pokaż style w tych barwach")
   are 44 px. The file field is look.css .lk-file. */
.wz-up { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wz-up > .field { align-self: stretch; }
.wz-small { min-height: 44px; padding: 0 18px; font-size: 15px; line-height: inherit; }
/* Step 4 of a guest: the own overlay is uploaded and comes with the code. */
.wz-held { font-size: 15px; color: var(--nk-ink-2, #3A4050); }

/* The switch shows the style cards (and "Pokaż style w tych barwach") or the upload part. Without :has() the form's
   data-src (from the server, kept by wizard.js) does it; without both, both show. */
@supports selector(:has(*)) {
  .wz-form:has(#wz-src-upload:checked) .wz-gen, .wz-form:has(#wz-src-upload:checked) .wz-gen-only, .wz-form:has(#wz-src-gen:checked) .wz-up { display: none; }
}
@supports not selector(:has(*)) {
  .wz-form[data-src="upload"] .wz-gen, .wz-form[data-src="upload"] .wz-gen-only, .wz-form[data-src="gen"] .wz-up { display: none; }
}

/* The preview (wizard.js): the overlay in a 118 px circle with the floating shadow, then Post 1:1, Post 3:4 and Story,
   standing on one line; it scrolls sideways on a phone, so it takes the focus for the keyboard. */
.wz-preview { display: flex; align-items: flex-end; gap: 12px; padding: 18px; border-radius: var(--nk-r-card, 18px); background: var(--nk-bg, #F7F6F2); overflow-x: auto; }
.wz-art { display: block; flex: 0 0 auto; width: 118px; height: auto; aspect-ratio: 1 / 1; }
.wz-art--ov { border-radius: 50%; background: var(--nk-surface-2, #EFEDE7); box-shadow: var(--nk-shadow-float, 0 0 0 4px #FFFFFF, 0 18px 40px rgba(11, 18, 32, 0.16)); }
.wz-art--p34 { aspect-ratio: 3 / 4; }
.wz-art--st { width: 104px; aspect-ratio: 9 / 16; }

/* "Zamów projekt od grafika": the bordered card of the prototype; a mail icon where its checkbox was. */
.wz-order { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border: 1px solid var(--nk-line, #E3E0D9); border-radius: var(--nk-r-card, 18px); }
.wz-order__icon { display: block; flex: 0 0 auto; margin-top: 4px; color: var(--nk-ink, #0B1220); }
.wz-order__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wz-order__title { font-weight: 600; }
.wz-order__note { font-size: 14px; color: var(--nk-muted, #5D6372); }
.wz-order__note a { color: var(--nk-ink, #0B1220); font-weight: 600; overflow-wrap: anywhere; }
.wz-order__note a:hover { color: var(--nk-link-hover, #1C5F99); }

/* Step 4: checkboxes with their sentence (15 px; the newsletter softer). The row looks 23 px high like the prototype's
   and takes clicks 44 px high. */
.wz-check { display: flex; flex-direction: column; gap: 10px; }
.wz-tick { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10.5px 0; margin: -10.5px 0; font-size: 15px; color: var(--nk-ink, #0B1220); cursor: pointer; }
.wz-tick--soft { color: var(--nk-ink-2, #3A4050); }
.wz-tick input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--nk-ink, #0B1220); cursor: pointer; }

/* Step 4 of a signed-in person: what they chose, in the grey box of the done screen, with links back to the steps.
   "Zmień" looks like a word of the line and takes clicks 44 px high (the negative margin keeps the line). */
.wz-sum { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--nk-r-box, 16px); background: var(--nk-bg, #F7F6F2); color: var(--nk-ink-2, #3A4050); font-size: 15px; }
.wz-sum__row { display: flex; flex-wrap: wrap; gap: 0 12px; }
.wz-sum dt { flex: 0 0 90px; font-weight: 600; color: var(--nk-ink, #0B1220); }
.wz-sum dd { flex: 1 1 260px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.wz-sum__edit { display: inline-block; padding: 10.5px 0; margin: -10.5px 0; font-weight: 600; white-space: nowrap; }

/* The buttons under a step: "Wstecz" (the light pill) on the left, the dark one on the right, both 52 px. Their
   labels have the line height of the text around them, as the prototype's buttons with "font: inherit". */
.wz-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 28px; }
.wz-back { min-height: 52px; padding: 0 22px; }
.wz-next { margin-left: auto; min-height: 52px; padding: 0 26px; font-size: 16px; }
.wz-back, .wz-next, .wz-btn, .wz-submit { line-height: inherit; }
.wz .btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

/* The code (the code step of A_Konto): the full-width 54 px button, then the links. */
.wz-submit { min-height: 54px; font-size: 16px; }
.wz-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
.wz-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--nk-ink, #0B1220); font-weight: 600; text-decoration: underline; }
.wz-link--muted { color: var(--nk-muted, #5D6372); font-weight: 400; }
.wz-toast { font-size: 15px; font-weight: 600; }

/* The done screen: the overlay picture, the title, the address, the grey note and the buttons, 16 px apart. The
   address link takes clicks 45 px high; the negative margin keeps its line where the prototype has it. */
.wz-done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.wz-ring { display: block; flex: 0 0 auto; width: 96px; height: 96px; }
.wz-done__head { display: flex; flex-direction: column; gap: 4px; }
.wz-done__addr { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.wz-done__addr a { display: inline-block; padding: 7px 0; margin: -7px 0; color: var(--nk-ink, #0B1220); text-decoration: none; }
.wz-done__addr a:hover { color: var(--nk-link-hover, #1C5F99); text-decoration: underline; }
.wz-note { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: var(--nk-r-box, 16px); background: var(--nk-bg, #F7F6F2); color: var(--nk-ink-2, #3A4050); font-size: 15px; }
.wz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wz-btn { min-height: 52px; padding: 0 24px; }
.wz-btn--ghost { padding: 0 22px; }

@media (forced-colors: active) {
  /* The drawing of the overlay keeps the page colours (the swatches and cards: look.css); the outline marks the
     chosen ones. */
  .wz-ring { forced-color-adjust: none; }
  .wz-pick:checked + span { outline: 3px solid CanvasText; outline-offset: 2px; }
  .wz-bar { border: 1px solid CanvasText; }
  .wz-bar.is-on { background: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .wz * { transition: none !important; animation: none !important; }
}