/* CertaRounds — Welcome screen styles (src/screens/welcome.js). Owned by its M3 screen agent.
   Semantic tokens only (docs/COMPONENTS.md §2); scope every rule under a screen class.
   Components (ValueCard, Button, Card, QuestionOptions, Citation…) keep their own styles. */

/* ============ Frame ============ */
.welcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* the mockup's faint lavender wash behind the hero (tokens only) */
  background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--accent) 7%, var(--bg)) 0%, var(--bg) 72%);
  min-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - var(--sp-6));
  min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--sp-6));
  padding: var(--sp-7) var(--gutter) var(--sp-2);
}

.welcome__main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  min-width: 0;
}

/* ============ Hero ============ */
.welcome__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.welcome__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.welcome__tagline {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  color: var(--text-2);
}
.welcome__title {
  margin-top: var(--sp-7);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--text-strong);
  text-wrap: balance;
}
.welcome__line { display: block; }
.welcome__accent { color: var(--accent); }
.welcome__lead {
  margin-top: var(--sp-3);
  max-width: 36ch;
  font-size: var(--fs-17);
  line-height: var(--lh-body);
  color: var(--text-2);
  text-wrap: pretty;
}

.welcome__main > .value-card { margin-top: var(--sp-6); }

/* ============ Actions ============ */
.welcome__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.welcome__note {
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--text-3);
  text-align: center;
}
.welcome__dev { text-align: center; font-size: var(--fs-13); }
.welcome__dev a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-3); }

/* ============ Sample question (phone / tablet: below the actions) ============ */
.welcome__try { margin-top: var(--sp-8); }
.welcome__try .welcome-sample { text-align: left; }

/* ============ Footer ============ */
.welcome__foot { margin-top: var(--sp-7); text-align: center; }
.welcome__motto {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: .3em;
  line-height: 1.8;
  text-transform: uppercase;
  color: var(--text-3);
}
.welcome__motto span { display: block; }
.welcome__links { margin-top: var(--sp-2); font-size: var(--fs-13); }
.welcome__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2); color: var(--text-2); font-weight: var(--fw-medium); }
.welcome__links a:hover { color: var(--link); }

/* ============ Tablet: same composition, more air ============ */
@media (min-width: 768px) {
  .welcome { padding-top: var(--sp-9); padding-bottom: var(--sp-6); }
  .welcome__main { max-width: 460px; }
  .welcome__title { font-size: var(--fs-44); }
}

/* ============ Desktop: the shared entry layout (login.css .auth--split) ============
   The brand panel carries the H1 and the two actions; the sample question is the one card beside it. */
@media (min-width: 1024px) {
  .auth--welcome .welcome__actions { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: clamp(20px, 4vh, 32px); }
  .auth--welcome .welcome__note { flex-basis: 100%; text-align: left; }
  .auth--welcome .welcome__dev { flex-basis: 100%; text-align: left; }
  .auth--welcome .welcome-sample { box-shadow: var(--shadow-card); }
}

.welcome-sample--state { min-height: 560px; }
.welcome-sample__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.welcome-sample__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.welcome-sample__sub { margin-top: 2px; font-size: var(--fs-13); line-height: 1.45; color: var(--text-3); }
.welcome-sample__sub span { display: block; }
.welcome-sample__chips { margin-top: var(--sp-4); }
.welcome-sample__stem {
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: var(--fs-stem);
  line-height: var(--lh-stem);
  color: var(--text);
  max-width: var(--measure);
}
.welcome-sample__after { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
.welcome-sample__why {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.welcome-sample__why-title { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-strong); }
.welcome-sample__why-text { margin-top: var(--sp-1); font-size: var(--fs-15); line-height: 1.55; color: var(--text-2); }
.welcome-sample__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.welcome-sample__hint { min-width: 0; font-size: var(--fs-13); line-height: 1.45; color: var(--text-3); }
.welcome-sample__bar .btn { flex-shrink: 0; }
.welcome-sample__foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--divider);
}

/* ============ F2 ============ */
/* Specialty chip + the topic as a quiet meta line (a long topic wraps as text, not as a pill) */
.welcome-sample__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3); margin-top: var(--sp-4); }
.welcome-sample__topic { flex: 1 1 12rem; min-width: 0; font-size: var(--fs-13); line-height: 1.4; color: var(--text-2); }
/* After checking: the next step, right where the learner is */
.welcome-sample__cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--w-hero-bg);
}
.welcome-sample__cta-text { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); }
.welcome-sample__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }

/* ============ F3 ============ */
/* After Check answer the options scroll to the top with a little air; the verdict takes focus */
.welcome-sample [role="radiogroup"] { scroll-margin-top: var(--sp-4); }
.welcome-sample__verdict { border-radius: var(--r-md); }
.welcome-sample__verdict:focus { outline: none; }
.welcome-sample__verdict:focus-visible { box-shadow: var(--focus-ring); }
/* Phones/tablets: helper on its own line, then a full-width Check answer once a choice is made */
@media (max-width: 1023px) {
  .welcome-sample__bar { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .welcome-sample__bar .btn--block { width: 100%; }
}
/* A disabled outline keeps its outline in every theme (dark: it no longer melts into the card) */
.welcome-sample__bar .btn--outline:disabled { box-shadow: inset 0 0 0 1px var(--border-strong); background: transparent; }
/* "Try a real question ↓" under the phone CTAs */
.welcome__try-link {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-radius: 10px;
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--link);
}
.welcome__try-link:hover { color: var(--link-hover); text-decoration: underline; }
.welcome__try-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.welcome-sample__title:focus { outline: none; }
/* The verdict's icon sits on the title's optical centre */
.welcome-sample .result { align-items: center; }

/* ============ F4 ============ */
/* After Check: the verdict is the header of the explanation card (one block, not a floating line) */
.welcome-sample__after {
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.welcome-sample__after .welcome-sample__why { padding: 0; background: none; border-radius: 0; }
@media (max-width: 767px) {
  .welcome-sample__after { padding: var(--sp-3) var(--sp-3) var(--sp-4); margin-inline: calc(-1 * var(--sp-2)); }
}
/* 360: Dr. Round steps down so the value card's title keeps the width it needs */
@media (max-width: 379px) {
  .welcome .value-card__art { height: 88px !important; width: auto !important; aspect-ratio: 2 / 3; }
}
/* Desktop (1024+): the sample card is tighter — the topic sits on its own line under the chip, and
   the two sub-lines join into one — so Check answer stays above the fold at 1024×768 */
@media (min-width: 1024px) {
  .welcome-sample__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .welcome-sample__topic { flex: 0 0 auto; }
  .welcome-sample__sub span { display: inline; }
  .welcome-sample__sub span + span::before { content: " "; }
}

/* ============ F5 ============ */
/* Captions on the lavender brand panel and the verdict title on the lavender result box use the
   strong inks (≥4.5:1 on the tint) */
.welcome__note { color: var(--text-2); }
.welcome-sample .result--incorrect .result__title { color: var(--danger-strong); }
.welcome-sample .result--correct .result__title { color: var(--success-strong); }