/* SHELL·WELCOME (1131) — the first-run hero: the centred column, head + line +
 * seedling illustration, the Get-started CTA, and the sign-in helper at the bottom.
 * ═══════════════════════════════════════════════════════════════════════════════
 * The chosen design is the code that ships today: views/welcome.js renders once
 * (no dynamic states — the row's `states: ["default"]` is honest with one entry).
 * The rules below carry the eight shipped declarations of app.css:969-1017 —
 * .welcome · .w-hero · .w-hero h2 · .w-hero p · .w-illustration · .w-cta ·
 * .w-cta .btn.full · .w-cta .footer-note.
 *
 * ── SELF-CONTAINMENT (workbench/RULES.md) — every element the card renders
 * carries its style explicitly under its own root class. No reliance on page,
 * user-agent, or app.css defaults; if a rule were renamed in app.css tomorrow,
 * this card would render identically. The four inheritance risks called out
 * in the row are present here by being stated: the column's full-viewport min-
 * height (100vh + 100dvh for engines without dvh support), the centred flex axis,
 * the gap pattern, and the visual look of the heading / line / seedling stack.
 *
 * ── STATUS KEPT AS `todo` — card-mirror check 16 does NOT iterate this row
 * (the 1003 convention: a registered row without its own WB page or its own
 * linked stylesheet is registered, NOT carded). The CSS IS moved because
 * BACKLOG §1 row 4 names app.css decomposition as ready and REPORT-527 §4.1
 * + §4.2 name this family as MOVE-eligible. Card row status stays `todo`
 * until a WB page, a real build, and a move to status `draft` or beyond.
 *
 * ── TOKEN-EXCEPTION MARKERS (4) — the four raw --size- declarations below
 * (var(--size-32) on .w-hero h2, var(--size-17) on .w-hero p, var(--size-60)
 * on .w-illustration, var(--size-16) on .w-cta .btn.full) bypass check 25's
 * type-role scope. They use --size-* directly because they predate the role-
 * token layer; migrating them to --text-* is a separate, scoped pass, NOT
 * this move. Bypass per 25-type-role-scope.sh:18,35. (Brief 586 named only
 * the first three — the 4th, on the .w-cta .btn.full composition override,
 * surfaced in the pre-commit run and was added in the same sitting.)
 *
 * ── GRID-SNAP DELTAS — two values moved from app.css were off the 4px grid
 * and would fail check 23 the moment they became NEW lines in this file:
 *   · .w-cta gap:    14px → 16px  (app.css:1005 → here; nearest legal)
 *   · .w-cta .btn.full padding: 16px 22px → 16px 24px (app.css:1010; nearest legal)
 * These are the only non-verbatim changes in the move; check 23 is forward-only,
 * so app.css still carries the off-grid values until something else touches them.
 *
 * ── PREFIX-DRIFT NOTE (FOLLOW-UP FINDING) — the family uses TWO prefixes
 * (`welcome` and `w-*`). The `w-` stem is one letter long and collides easily
 * with `week-` / `wkv-` / `wdp-` already living nearby in app.css (see
 * REPORT-527 §5.2). A rename to `welcome-*` was flagged in the 2026-09-13
 * register campaign and is DEFERRED per brief 562; this move does NOT touch
 * the renaming decision. Surface as a follow-up to GUIDE.
 *
 * ── REVERSE-PORT DECLARATION — if card 1131 ever moves status to `draft` or
 * beyond, this file MUST be linked from web/index.html and the eight app.css
 * rules below MUST stay deleted. The card and its CSS travel together; one
 * without the other is the failed state.
 *
 * Prefix: welcome (root) + w-* (children — rename deferred, see above).
 * Type: shared. Renders: web/js/views/welcome.js.
 */

/* ============================================================================
 * Welcome
 * ========================================================================== */
.welcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
  padding: 32px 0;
}

.w-hero {
  text-align: center;
  margin-bottom: 32px;
}

.w-hero h2 {
  margin-bottom: 8px;
  font-size: var(--size-32);                  /* token-exception */
}

.w-hero p {
  color: var(--ink-600);
  margin-bottom: 24px;
  font-size: var(--size-17);                  /* token-exception */
}

.w-illustration {
  font-size: var(--size-60);                  /* token-exception */
  margin: 20px 0;
}

/* Welcome CTA block — anchors the primary button + sign-in helper at the bottom of the hero. */
.w-cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.w-cta .btn.full {
  width: 100%;
  padding: 16px 24px;
  font-size: var(--size-16);                  /* token-exception */
}

.w-cta .footer-note {
  margin-top: 0;
}