/*
 * Sessions page — the passwordless login flow (/inloggen + /inloggen/code).
 *
 * Composes shared primitives from _layout.css (.container),
 * _page_hero.css (.page-hero, .page-hero-title, .page-hero-lead,
 * .page-eyebrow), _cards.css (.card, .card-body), _forms.css
 * (.form-group, .form-label, .form-input), _buttons.css (.btn,
 * .btn-primary), _alerts.css (.alert, .alert-*). Only the cream-
 * background section, the amber dev notice, and the 6-cell code
 * row are sessions-specific.
 *
 * No literal colour, spacing, or font values — everything routes
 * through var() tokens from _tokens.css. See docs/design_system.md
 * §"Do Nots".
 */

/*
 * Section wrapper below the page-hero. Cream bg so the hero's forest
 * block lands on a warm page surface instead of pure white. The card
 * inside is narrow and centred — this is a focused single-purpose
 * auth moment, not a dashboard.
 */
.session-section {
  background: var(--cream);
  padding-block: 3rem 5rem;
  min-height: 20rem;
}

.session-container {
  max-width: 28rem;
}

/* Emphasised token in the hero lead (the user's email address).
 * The surrounding --on-dark-75 body text recedes; the emphasised
 * address reads at full white weight so the "we sent it to X" is
 * scannable at a glance. */
.page-hero-lead-emph {
  color: white;
  font-weight: 600;
}

/*
 * The auth card. Uses the design system's .card primitive for the
 * white surface + sand border + shadow. Body padding is slightly
 * larger than the default 1.5rem so the form has breathing room.
 */
.session-card-body {
  padding: 2rem 1.75rem;
}

.session-card-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .375rem;
}

.session-card-lead {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.session-form,
.session-code-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Full-width primary button at the bottom of the auth card — clear
 * terminal affordance, matches the expected single-purpose flow. */
.session-submit {
  width: 100%;
  justify-content: center;
  padding-block: .875rem;
}

/*
 * Flash stack. Rendered by views (not the layout) between the hero
 * and the card. Single child alert → no gap cost; multiple → stack
 * cleanly. Margin-bottom matches the hero-to-card rhythm.
 */
.flash-stack {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

/*
 * Dev-only amber notice. Sits above the card so it's clearly NOT
 * part of the user-facing surface — an explicit out-of-band dev
 * affordance. Warn-* tokens make the "this is dev tooling" status
 * obvious. Production never sees this (Rails.env.local? guard in
 * the view).
 */
.session-dev-notice {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border: 1px solid var(--warn-border);
  border-radius: var(--r);
  font-size: var(--fs-sm);
  margin-bottom: 1rem;
}

.session-dev-notice-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .125rem .5rem;
  background: var(--warn-border);
  color: white;
  border-radius: var(--r);
}

.session-dev-notice code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--warn-ink);
}

/*
 * 6-cell code row — pinned dimensions per
 * docs/plans/2026-04-18-001-feat-m4-1-passwordless-auth-plan.md §Unit 5.
 * 44x52 tap target, .5rem gap, monospace + fs-xl so the code reads
 * unambiguously as "one character per cell". Centred inside the card.
 */
.login-code-cells {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-block: .25rem .5rem;
}

.login-code-cell {
  width: 2.75rem;
  height: 3.25rem;
  padding: 0;
  border: 1.5px solid var(--sand);
  border-radius: var(--r);
  background: var(--stone);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  caret-color: transparent;
  transition: border-color .15s, background .15s;
}

.login-code-cell:focus {
  border-color: var(--forest);
  background: white;
  outline: none;
}

.login-code-cell.error {
  border-color: var(--err-border);
  background: var(--err-bg);
}