/* onboarding/shell.css — chrome for every onboarding overlay (templates/onboarding/_shell.html).
   Card, background canvas, logo, toggles, progress dots. Per-step content: steps.css.

   ⚠️ EVERY rule here is scoped under `.onb-overlay`, and new ones must be too. The `.onb-*`
   prefix is NOT ours alone: the review/settings pages' sticky banners (`.onb-banner`, and inside
   them `.onb-msg`, `.onb-check`, `.onb-sub`, `.onb-flask`, `.onb-spin`) got there first, and this
   file loads AFTER review.css / settings.css. An unscoped `.onb-check` here turned the progress
   banner's ✓ into an empty 20px box, and an unscoped `.onb-msg` stripped the banner text of its
   `flex: 1 1 auto` — both silently, on a page this file has no business touching.

   Spacing note, because this was the whole point of the 2026-08-17 pass: the card is sized by
   its CONTENT. The old hero reserved a `min-height: min(520px, 82vh)` stage with the logo
   absolutely pinned at `top: 34px` and the copy vertically centred inside it, which meant a
   three-line step floated in ~300px of nothing. There is no fixed stage, no `roomy` variant, and
   the logo is back in normal flow. Anything added here must keep that property: if a rule
   reserves height a step might not use, it is the bug coming back. */

.onb-overlay {
  position: fixed; inset: 0; z-index: 80;
  /* flex-start + `margin: auto` on the card, NOT align-items: center: a centered flex item
     taller than the flex line has its overflowing top cut off and unreachable. This way the card
     centers while it fits and the overlay scrolls to it once it doesn't (phone landscape, a long
     locale, a browser text-size bump). */
  display: flex; align-items: flex-start; justify-content: center; padding: 20px;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg);
}
.onb-overlay[hidden] { display: none; }
/* compact (the settings confirm dialog): translucent dim, so the page it is asking about stays
   visible behind it. The wizard proper stays opaque — it is a block, and showing the client a
   panel they cannot reach would only invite them to try. */
.onb-overlay.is-compact {
  background: rgba(12,20,36,.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}

/* Living background: the same aurora + particle field as the page background, painted by
   js/onboarding/shell.js. Animates while body.bg-live is set (the _ui_polish animation toggle);
   otherwise one static frame. pointer-events: none so dim-area clicks reach the overlay itself.
   position: fixed (not absolute): the overlay scrolls, and an absolute inset:0 child would be
   sized to its padding box — the aurora would end where the first screenful does. */
.onb-overlay .onb-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.onb-overlay .onb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* box-sizing is declared here on purpose: base.css sets no global `* { box-sizing: border-box }`,
   so without this `max-width` would size the CONTENT box and the card would render ~70px wider
   than the number says (the old hero's "560px" was really a 652px card). Stating it keeps the
   max-width an actual card width. */
.onb-overlay .onb-card {
  box-sizing: border-box;
  max-width: 520px; width: 100%; margin: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 36px);
  position: relative; overflow: hidden; text-align: center;
}

/* Toggles (top-right of the card): same .icon-btn look as the masthead ones; shell.js proxies
   clicks to the _ui_polish masthead toggles so all state handling stays in one place. */
.onb-overlay .onb-toggles { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 3; }

/* Logo: in flow, at a size that reads as a mark rather than a splash screen. It sits above a
   title, so its bottom margin is the title's top margin — do not add one to .onb-title.
   Mark = /review/assets/studio-logo, the same PNG the masthead and the mails use; it is square,
   not the 2:1 wordmark that used to be inlined here — hence the narrower clamp. Width only,
   height follows. */
.onb-overlay .onb-logo { width: clamp(56px, 10vw, 76px); margin: 0 auto 16px; }
.onb-overlay .onb-logo img { display: block; width: 100%; height: auto; }

/* Progress dots — only rendered for a genuinely multi-step run (see wizard.html). */
.onb-overlay .onb-dots { display: flex; justify-content: center; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.onb-overlay .onb-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--line);
  transition: width .25s ease, background-color .25s ease;
}
.onb-overlay .onb-dot.is-on { width: 20px; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.onb-overlay .onb-dot.is-done { background: var(--brand); }

/* Gradient headline with a solid-ink fallback. 28px, not the old 40px: at 40 a two-word title in
   this card read as a landing page rather than a dialog, and it was a big part of why these felt
   empty. The cap is set by the LONGEST title, not the shortest — "Wygenerujmy pierwszy artykuł"
   at 32px filled the content box edge to edge and looked one character from breaking. Check the
   long Polish and German titles before raising it. */
.onb-overlay .onb-title {
  margin: 0 0 16px; font-size: clamp(22px, 4.5vw, 28px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; color: var(--ink);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .onb-overlay .onb-title {
    background: linear-gradient(90deg, var(--brand), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.onb-overlay .onb-body { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }

/* Flat 24px. This was `clamp(24px, 8vh, 66px)` — on a laptop that is 66px of nothing between the
   copy and the only control on the card. */
.onb-overlay .onb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }

/* An inert control must LOOK inert; both required steps ship their advance button this way and
   their JS clears the class on satisfaction. */
.onb-overlay .btn.is-disabled { opacity: .5; pointer-events: none; cursor: not-allowed; box-shadow: none; }

.onb-overlay .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Short viewports (phone landscape, split screen, a text-size bump): trim the card's own padding
   and the logo. Nothing else needs a break-point now that the fixed stage is gone. */
@media (max-height: 620px) {
  .onb-overlay .onb-card { padding: 22px clamp(20px, 5vw, 30px); }
  .onb-overlay .onb-logo { width: clamp(46px, 8vw, 60px); margin-bottom: 12px; }
  .onb-overlay .onb-actions { margin-top: 18px; }
}