/* First-login use-case view (ticket 477), route #/welcome. One screen, one question: a heading,
   three large cards that are the choice (radios, ticket 986), a video link, a skip link and one Continue. Reuses the shared .card/.glass/.btn/.login-error
   vocabulary from console.css; only the page and card layout below is new. The global
   :focus-visible ring in console.css already covers every control here. */

.welcome {
  max-width: 64rem;
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.welcome__head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.welcome__title {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--ink);
}

.welcome-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.welcome-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.4rem 1.4rem 1.2rem;
}

/* The card's face is the radio: it fills the card, so a click anywhere but "Learn more" chooses it. */
.welcome-card__radio {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[role="radio"].welcome-card__radio {
  cursor: pointer;
}

.welcome-card.is-selected {
  border-color: var(--border-gold);
  background: var(--gold-soft);
}

.welcome-card__title {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
}

.welcome-card__current {
  align-self: flex-start;
  color: var(--ink-muted);
  font: var(--type-footnote);
}

.welcome-card__summary {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.welcome-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.welcome-card__more,
.welcome__video {
  color: var(--gold);
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.welcome__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.welcome__readonly {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fs-sm);
}

/* A plain text control: the skip answer saves a value like any card, so it is a button, but it is
   meant to read as a small link beside the video link, not as a fourth card. */
.welcome__skip {
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--ink-dim);
  background: none;
  border: 0;
  padding: 0.2rem 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.welcome__skip:hover {
  color: var(--ink);
}

.welcome__skip:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Continue is the page's one prominent button, at the trailing end of the footer. */
.welcome__continue {
  margin-left: auto;
}