/* ══════════════════════════════════════════════════════════════
   Meetback — welcome (the app's pre-login landing page)

   Depends on the custom properties declared in cards-home.css, which
   index.html loads immediately before this file: --accent, --accent2,
   --text, --r-lg and the safe-area vars. Keep that load order.

   No design reference exists for this screen — see welcome.js. Everything
   here is assembled from values already in the system: the passport
   backdrop's indigo gradient and top-right sheen, Fraunces for display,
   Inter for body, and the same 12px button radius the passport actions use.
   ══════════════════════════════════════════════════════════════ */

.welcome {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  color: var(--surface);
  background: linear-gradient(160deg, var(--accent), var(--accent2));
  padding: calc(28px + var(--sat)) calc(24px + var(--sar))
           calc(28px + var(--sab)) calc(24px + var(--sal));
}

/* The same sheen the passport's backdrop carries, so the two read as one family. */
.welcome::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 85% at 80% -15%, rgba(255, 255, 255, .26), transparent 55%);
  pointer-events: none;
}

.welcome-brand {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 14px);
  text-align: center;
}

.welcome-badge {
  width: clamp(52px, 14vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--surface);
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12) 62%, rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .45),
              inset 0 -2px 6px rgba(20, 24, 38, .28),
              0 6px 18px rgba(20, 16, 60, .28);
  margin-bottom: clamp(2px, 1.5vw, 6px);
}
.welcome-seal { width: 58%; height: 58%; }

.welcome-mark {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(34px, 9.5vw, 46px);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--surface);
}

.welcome-tag {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.45;
  color: rgba(255, 255, 255, .74);
  max-width: 22ch;
}

.welcome-actions {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: clamp(16px, 4vw, 22px);
}

.welcome-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(14px, 3.8vw, 15px);
  color: var(--text);
  background: var(--surface);
  border: 0;
  border-radius: 12px;
  padding: clamp(13px, 3.6vw, 15px);
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(12, 10, 40, .55);
  transition: .15s;
}
.welcome-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.welcome-btn:hover { background: var(--page); }
.welcome-btn:focus-visible { outline: 2px solid var(--surface); outline-offset: 3px; }
.welcome-btn:disabled { opacity: .6; cursor: default; }

.welcome-msg {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  margin-top: 12px;
  min-height: 1.45em;          /* reserve the line so the button never shifts */
}
.welcome-msg.is-error { color: var(--err-soft); }

@media (prefers-reduced-motion: reduce) { .welcome-btn { transition: none; } }

/* Q7 — the welcome screen's edges, declared where its gradient lives. The
   canvas below takes the gradient's END colour, the chrome above its START, so
   in Safari and installed alike the screen reads as one unbroken surface —
   the same edge-to-edge the landing page has. Keyed off the rendered DOM:
   whoever paints this screen (the router, or cards-home's auth listener, which
   is the path that went stale under the JS version) declares these with it. */
body:has([data-screen="welcome"]) { background: var(--accent2); }
[data-screen="welcome"] { --edge-top: var(--accent); }