/* ============================================================
   wizard-shell.css — THE guided-flow chrome.

   The frame every step of every guided flow wears: the top bar with its
   breadcrumb and Save & exit, the "Saved" hint, and the welcome block —
   mono eyebrow, display heading with its accent phrase, and the lede.

   ── Why this file exists, and why it is scoped ────────────────────────
   launch-studio.css carries between 10 and 12 copies of these rules, one per
   page scope. Measured: `.topbar-actions`, `.save-hint`, `.save-hint svg` and
   `.welcome h1 .accent` are byte-identical in every copy; `.welcome-eyebrow`
   and `.welcome h1` differ only by a margin or a font-size.

   So the FIRST attempt was to collapse all twelve into a bare `.topbar` /
   `.welcome` component, the way the assistant panel was collapsed. A
   computed-style A/B in a real browser refused it, and was right to:

     · #page-launch-overview, -sites and -manage use `.welcome` WITHOUT the
       display-heading treatment. Their h1 is the plain shell h1. Give them a
       bare `.welcome h1` rule and they gain Bricolage at 30px, an accent
       colour and a new line-height — 68 changed properties on two pages.
     · #page-launch-phase-one and -publish have a `.welcome` with no
       max-width. Deleting the duplicate does not leave them unstyled; it
       leaves them INHERITING a max-width they never had.

   The second is invisible in a diff — the diff shows what was deleted, not
   what is now inherited — which is exactly why the test exists.

   The honest reading: those twelve copies are not twelve copies of one thing.
   Most of them are, and three are a different, plainer header that happens to
   share a class name. Collapsing them needs a per-page markup change on a
   surface another session is actively developing (dev moved 3,600 lines of
   launch-studio.js this week), and that is a bad trade for tidiness.

   So this file is scoped to `.wz-shell`. It carries the website builder's own
   values, verbatim, and the course builder wears it — which is what Alex
   asked for, without touching thirteen working pages to get there. Any launch
   page that wants to adopt it can add the class and delete its copy, one page
   at a time, with tests/browser/wizard-shell-css.browser.js proving each one
   moved nothing.

   ── What belongs here ─────────────────────────────────────────────────
   HERE: the frame. Bar, actions, save hint, eyebrow, heading, lede.
   NOT HERE: anything about what a particular step is FOR — the question card,
   the palette grid, the preview. Those are per-step and stay per-step.

   Loaded by app.html before every page stylesheet that uses it, so a page's
   own nudges outrank these.
   ============================================================ */

/* ── The top bar: where am I, and how do I leave ─────────────────────── */
.wz-shell .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.wz-shell .topbar-actions { display: flex; align-items: center; gap: 10px; }

/* "Saved" — a guided flow saves as you go, and the promise has to be visible
   or the coach hoards their answers and never presses anything. */
.wz-shell .save-hint { font-size: 12.5px; color: var(--text-3); display: inline-flex; align-items: center; gap: 7px; }
.wz-shell .save-hint svg { width: 14px; height: 14px; color: var(--good); }

/* ── The welcome block: which step, what it is, what it costs ────────── */
.wz-shell .welcome { margin-bottom: 22px; max-width: 720px; }
.wz-shell .welcome-eyebrow { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.wz-shell .welcome-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.wz-shell .welcome h1 { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 30px; margin: 0; letter-spacing: -0.02em; line-height: 1.06; }
/* The half-sentence that is about THEM — their brand, their name, their
   course. It is the accent colour everywhere, on every step, without
   exception, which is why this one selector was identical in all ten copies. */
.wz-shell .welcome h1 .accent { color: var(--accent); }
.wz-shell .welcome .lede { color: var(--text-2); font-size: 15px; margin-top: 8px; line-height: 1.5; }