/* onboarding/steps.css — the inside of a wizard step (templates/onboarding/steps/*.html).
   Card/logo/dots chrome: shell.css.

   ⚠️ EVERY rule here is scoped under `.onb-overlay`, and new ones must be too — see the warning
   at the top of shell.css. `.onb-msg` and `.onb-check` below are the exact names the review page's
   progress banner uses for its message text and its ✓ glyph; unscoped, this file quietly restyled
   both.

   Every block here is content-sized. No min-heights, no vh-scaled gaps — a step with three lines
   of copy must produce a card with three lines of copy in it. */

.onb-overlay .onb-step[hidden] { display: none; }
/* Entrance for a step swapped in by the stepper. Never plays on the FIRST step: that one is
   already on screen when the overlay appears, and animating it read as a double reveal. */
.onb-overlay .onb-step.is-in { animation: onb-step-in .32s ease both; }
@keyframes onb-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .onb-overlay .onb-step.is-in { animation: none; } }

/* --- Bullets (welcome, generate) ------------------------------------------------------- */
/* Left-aligned inside a centred card on purpose: a ragged-both-edges list of three different
   lengths is unreadable, and centring them made the card look like a poster. The block itself is
   centred, the text inside it is not. */
.onb-overlay .onb-bullets {
  margin: 16px auto 0; padding: 0; list-style: none;
  display: inline-flex; flex-direction: column; gap: 8px;
  text-align: left; max-width: 340px;
}
.onb-overlay .onb-bullets li {
  position: relative; padding-left: 24px;
  color: var(--muted); font-size: 13.5px; line-height: 1.5;
}
.onb-overlay .onb-bullets li::before {
  content: ""; position: absolute; left: 6px; top: .55em;
  width: 6px; height: 6px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--accent));
}

/* --- Ready list (welcome_ready step) ---------------------------------------------------- */
/* A heavier bullet list: each row is a ✓ plus a headline and one grey line under it, because this
   step is inventorying things that already exist rather than listing promises. Left-aligned block,
   centred in the card — same reasoning as .onb-bullets. Rows are rendered only for a non-zero
   count, so this list can be one item long and must still look deliberate. */
.onb-overlay .onb-ready {
  margin: 18px auto 0; padding: 0; list-style: none;
  display: inline-flex; flex-direction: column; gap: 12px;
  text-align: left; max-width: 360px;
}
.onb-overlay .onb-ready-item { display: flex; align-items: flex-start; gap: 10px; }
/* Self-painted like the consent box (and with the same tick asset) rather than a text ✓: the glyph
   renders at a different weight and baseline in every font, and it sits next to bold copy here. */
.onb-overlay .onb-ready-tick {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6 9.2 18 20 6.4'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--brand), var(--accent));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 13px 13px, 100% 100%;
}
.onb-overlay .onb-ready-copy { display: flex; flex-direction: column; gap: 2px; }
.onb-overlay .onb-ready-h { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.onb-overlay .onb-ready-d { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* --- Field row (e-mail step) ------------------------------------------------------------ */
/* Wraps rather than squeezing the field: the Save label is a translated word (DE "Speichern" is
   twice the EN one) and the row only has ~280px on a phone. */
.onb-overlay .onb-field-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.onb-overlay .onb-input { flex: 1 1 200px; max-width: 300px; text-align: left; }

/* --- Consent ---------------------------------------------------------------------------- */
/* The row is a <label>, so the whole thing is the hit target. Left-aligned text for the same
   reason as the bullets — this is a paragraph with two links in it, not a caption. */
.onb-overlay .onb-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px auto 0; max-width: 380px;
  text-align: left; cursor: pointer;
}
/* The real control stays in the accessibility tree; only its paint is ours (same reason as
   .consent-box / .xrow-box elsewhere — the native box renders differently in every browser and
   this one sits on a brand surface). */
.onb-overlay .onb-check-input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.onb-overlay .onb-check {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  /* --line alone is a hairline meant for panel edges — on a 20px box it read as "no box at all",
     so this borrows some --muted to darken it and goes 2px. */
  border: 2px solid color-mix(in srgb, var(--muted) 55%, var(--line)); border-radius: 6px; background: var(--card);
  transition: border-color .15s ease, background-color .15s ease;
}
/* Two background layers: the tick on top, the brand gradient as the fill under it. Declared as
   longhands — a `background:` shorthand here would reset the layers declared after it. Mind the
   closing paren on url(...): without it the parser swallows every following declaration to the }. */
.onb-overlay .onb-check-input:checked + .onb-check {
  border-color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.6 9.2 18 20 6.4'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--brand), var(--accent));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 13px 13px, 100% 100%;
}
/* Keyboard focus has to be visible on a control whose native ring we hid. */
.onb-overlay .onb-check-input:focus-visible + .onb-check { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Unticked-and-asked-for: the same red treatment .consent-field.is-missing uses on the feedback
   forms, so "you missed this" looks identical everywhere on the site. */
.onb-overlay .onb-consent.is-missing .onb-check { border-color: var(--err); }
.onb-overlay .onb-consent.is-missing .onb-consent-text { color: var(--err); }
.onb-overlay .onb-consent-text { font-size: 13px; line-height: 1.5; color: var(--muted); }
.onb-overlay .onb-consent-text a { color: var(--brand); text-decoration: underline; }

/* --- Shared feedback lines -------------------------------------------------------------- */
/* Collapses entirely while empty. It used to reserve a permanent 18px line "so a result does not
   shunt the button down mid-click" — but every step carries one, so that was a blank line above
   every button on every screen, which is exactly the dead space this pass exists to remove. The
   shift when a message does appear is one line, and it happens in response to the client's own
   completed action. */
.onb-overlay .onb-msg:empty { display: none; }
.onb-overlay .onb-msg { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.onb-overlay .onb-msg.is-ok { color: var(--ok); }
.onb-overlay .onb-msg.is-err { color: var(--err); }

/* Why the advance button is inert. Hidden by the step's JS the moment it stops being true. */
.onb-overlay .onb-hint { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--warn-ink); }
.onb-overlay .onb-hint[hidden] { display: none; }

/* The generate step's opt-out. Deliberately a quiet text link under the CTA, not a second
   button: it is a way past, not an alternative offer. */
.onb-overlay .onb-skip {
  display: block; margin: 14px auto 0; padding: 4px 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 12.5px; text-decoration: underline;
}
.onb-overlay .onb-skip:hover { color: var(--ink); }