/* ==========================================================================
   auth.css — the single stylesheet for every FoodChaser auth surface.

   Covers:  /login  ·  /login/chaser  ·  /login/vendor  ·  Facebook vendor
            /buyer/signup  ·  /seller/signup
            accept-invite, new-user setup, confirm password reset

   Replaces six near-identical <style> blocks that used to live inside the
   views (~490 lines of duplicated CSS, and the dead BetterBuyBarn page art).

   Built on the --fc-* tokens in foodchaser-tokens.css: no literal colour,
   and no spacing or radius value that a token covers. Dark only.
   The exceptions, all deliberate and all geometry: the two split-screen
   measures (440px / 620px), the two breakpoints, the `em` art sizes, one
   optical letter-spacing (-0.8px) and one hairline (2px). Nothing here
   invents a colour or a type step.

   Load order: foodchaser-tokens.css → foodchaser.css → common.css → auth.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page ground
   Only loaded on auth pages, so it may own <body>. The old blocks flipped the
   body to `background-color: white` and centred it with flex; both are gone.
   -------------------------------------------------------------------------- */

body {
  background: var(--fc-bg);
  color: var(--fc-on);
  font-family: var(--fc-font-body);
}

.fc-auth {
  min-height: 100vh;
  background: var(--fc-bg);
  color: var(--fc-on);
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-body);
  line-height: var(--fc-lh-normal);
}

/* --------------------------------------------------------------------------
   2. The split screen
   Left = brand (yellow ground, ink type, food art). Right = form (dark).
   -------------------------------------------------------------------------- */

.fc-auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: stretch;
  min-height: 100vh;
}

/* Single-column variant for the short flows that run inside _InviteLayout
   (accept invite, new-user setup, password reset). */
.fc-auth-solo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fc-space-7) var(--fc-space-5);
}

.fc-auth-solo .fc-auth-shell {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-panel);
  overflow: hidden;
}

.fc-auth-solo .fc-auth-brand {
  gap: var(--fc-space-3);
  padding: var(--fc-space-6);
}

.fc-auth-solo .fc-auth-tagline {
  font-size: var(--fc-text-title);
  max-width: none;
}

.fc-auth-solo .fc-auth-panel {
  align-items: stretch;
  padding: var(--fc-space-7) var(--fc-space-6) var(--fc-space-8);
}

.fc-auth-solo .fc-auth-card {
  max-width: none;
}

/* --------------------------------------------------------------------------
   3. Brand panel
   -------------------------------------------------------------------------- */

.fc-auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fc-space-6);
  padding: var(--fc-space-9) var(--fc-space-8);
  background: var(--fc-yellow);
  color: var(--fc-on-yellow);
}

.fc-auth-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-3);
  color: var(--fc-on-yellow);
  text-decoration: none;
  flex: 0 0 auto;
  align-self: flex-start;
}

.fc-auth-lockup:hover,
.fc-auth-lockup:focus {
  color: var(--fc-on-yellow);
  text-decoration: none;
}

.fc-auth-lockup img {
  display: block;
}

.fc-auth-lockup .fc-auth-wordmark {
  height: var(--fc-space-6);
  width: auto;
  border-radius: 0;
}

/* The trademark notice on first prominent use, riding the wordmark's cap
   height. TRADEMARK.md: use the mark once per page, then plain text. */
.fc-auth-lockup .fc-auth-tm {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-micro);
  font-weight: 700;
  line-height: 1;
  align-self: flex-start;
  color: var(--fc-on-yellow);
}

/* One tagline per surface. Never stack two. */
.fc-auth-tagline {
  font-family: var(--fc-font-display);
  font-size: var(--fc-h2);
  font-weight: 800;
  line-height: var(--fc-lh-tight);
  letter-spacing: var(--fc-track-heading);
  color: var(--fc-on-yellow);
  margin: 0;
  max-width: 15em;
}

.fc-auth-note {
  font-family: var(--fc-font-body);
  font-size: var(--fc-text-body);
  line-height: var(--fc-lh-normal);
  color: var(--fc-on-yellow);
  opacity: 0.78;
  margin: 0;
  max-width: 34em;
}

/* Photo-forward element: hero-mosaic.svg from Content/images/brand — five
   overlapping rounded photo tiles, authored for this panel. Painted as a
   background so a missing asset degrades to the plain yellow ground rather
   than a broken-image glyph. */
.fc-auth-art {
  flex: 1 1 auto;
  min-height: calc(var(--fc-space-10) * 2);
  background-image: url('../../images/brand/hero-mosaic.svg');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.fc-auth-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fc-space-2) var(--fc-space-5);
}

.fc-auth-facts li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--fc-space-2);
  font-size: var(--fc-text-caption);
  color: var(--fc-on-yellow);
}

.fc-auth-facts b {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-heading);
  font-weight: 700;
  line-height: 1;
}

.fc-auth-brand-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
}

.fc-auth-brand-foot a {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-space-2);
  color: var(--fc-on-yellow);
  font-size: var(--fc-text-micro);
  font-weight: 700;
  letter-spacing: var(--fc-track-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
}

.fc-auth-brand-foot a:hover,
.fc-auth-brand-foot a:focus {
  color: var(--fc-on-yellow);
  text-decoration: underline;
}

.fc-auth-brand-foot img {
  height: var(--fc-space-5);
  width: auto;
  display: block;
}

/* Focus has to stay visible on the yellow ground too. */
.fc-auth-brand a:focus-visible {
  outline: 2px solid var(--fc-on-yellow);
  outline-offset: 3px;
  border-radius: var(--fc-radius-chip);
}

/* --------------------------------------------------------------------------
   4. Form panel
   -------------------------------------------------------------------------- */

.fc-auth-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-bg);
  padding: var(--fc-space-9) var(--fc-space-6);
}

.fc-auth-card {
  width: 100%;
  max-width: 440px;
  display: grid;
  gap: var(--fc-space-6);
}

.fc-auth-card-wide {
  max-width: 620px;
}

.fc-auth-head {
  display: grid;
  gap: var(--fc-space-2);
}

.fc-auth-title {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-display);
  font-weight: 700;
  line-height: var(--fc-lh-snug);
  letter-spacing: -0.8px;
  color: var(--fc-on);
  margin: 0;
}

.fc-auth-sub {
  font-size: var(--fc-text-body);
  line-height: var(--fc-lh-normal);
  color: var(--fc-muted);
  margin: 0;
}

/* Secondary route out of the form: sign-up link, back-to-sign-in link. */
.fc-auth-alt {
  font-size: var(--fc-text-caption);
  color: var(--fc-subtle);
  text-align: center;
}

.fc-auth-alt a {
  color: var(--fc-pink-soft);
  font-weight: 600;
}

/* A right-aligned inline link (forgot password) that sits with the field. */
.fc-auth-inline {
  display: flex;
  justify-content: flex-end;
}

.fc-auth-inline .fc-btn-link {
  font-size: var(--fc-text-caption);
}

.fc-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--fc-space-3);
  font-size: var(--fc-text-micro);
  font-weight: 700;
  letter-spacing: var(--fc-track-eyebrow);
  text-transform: uppercase;
  /* This label is content ("Get the app"), not a rule: --fc-faint is
     decorative-only at 3.8:1, so it reads at --fc-subtle instead. */
  color: var(--fc-subtle);
}

.fc-auth-divider::before,
.fc-auth-divider::after {
  content: "";
  flex: 1 1 auto;
  height: var(--fc-border);
  background: var(--fc-outline);
}

/* --------------------------------------------------------------------------
   5. The chooser (/login) — two doors
   -------------------------------------------------------------------------- */

.fc-auth-doors {
  display: grid;
  gap: var(--fc-space-4);
}

.fc-auth-door {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fc-space-4);
  padding: var(--fc-space-5);
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-tile);
  color: var(--fc-on);
  text-decoration: none;
  transition: border-color var(--fc-dur-state) var(--fc-ease),
              transform var(--fc-dur-press) var(--fc-ease);
}

.fc-auth-door:hover,
.fc-auth-door:focus {
  border-color: var(--fc-pink);
  color: var(--fc-on);
  text-decoration: none;
  transform: translateY(-2px);
}

.fc-auth-door .ic {
  width: var(--fc-space-8);
  height: var(--fc-space-8);
  border-radius: var(--fc-radius-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fc-text-heading);
  background: var(--fc-overlay);
  color: var(--fc-pink-soft);
}

.fc-auth-door .n {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-heading);
  font-weight: 600;
  line-height: var(--fc-lh-snug);
  display: block;
}

.fc-auth-door .s {
  font-size: var(--fc-text-caption);
  color: var(--fc-muted);
  line-height: 1.5;
  display: block;
  margin-top: var(--fc-space-1);
}

.fc-auth-door .go {
  color: var(--fc-faint);
  font-size: var(--fc-text-caption);
}

.fc-auth-door:hover .go,
.fc-auth-door:focus .go {
  color: var(--fc-pink-soft);
}

/* The vendor reassurance, required wherever crowd reporting is in play. */
.fc-auth-door .assure {
  font-size: var(--fc-text-micro);
  font-weight: 700;
  color: var(--fc-yellow);
  margin-top: var(--fc-space-2);
  display: block;
}

/* --------------------------------------------------------------------------
   6. Store badges
   -------------------------------------------------------------------------- */

.fc-auth-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fc-space-3);
}

.fc-auth-badges a {
  display: inline-flex;
  border-radius: var(--fc-radius-chip);
}

.fc-auth-badges a:focus-visible {
  outline: 2px solid var(--fc-pink-soft);
  outline-offset: 3px;
}

.fc-auth-badges img {
  height: var(--fc-space-8);
  width: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   7. States: sent, error, loading
   -------------------------------------------------------------------------- */

.fc-auth-state {
  display: grid;
  gap: var(--fc-space-3);
  justify-items: start;
  padding: var(--fc-space-6);
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-outline);
  border-radius: var(--fc-radius-card);
}

.fc-auth-state .ic {
  font-size: var(--fc-text-title);
  color: var(--fc-success);
}

.fc-auth-state.is-bad .ic {
  color: var(--fc-danger);
}

.fc-auth-state h2 {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-title);
  font-weight: 600;
  line-height: var(--fc-lh-snug);
  margin: 0;
}

.fc-auth-state p {
  font-size: var(--fc-text-caption);
  color: var(--fc-muted);
  line-height: var(--fc-lh-normal);
  margin: 0;
}

.fc-auth-loading {
  color: var(--fc-subtle);
  font-size: var(--fc-text-caption);
  text-align: center;
  padding: var(--fc-space-6) 0;
}

/* Errors go below the field, never in the placeholder. foodchaser.css owns
   .field-validation-error, .validation-summary-errors and
   .input-validation-error; this only positions them inside .fc-field. */
.fc-auth .fc-field .field-validation-error,
.fc-auth .fc-field .fc-error {
  margin-top: var(--fc-space-1);
}

.fc-auth .validation-summary-errors {
  padding: var(--fc-space-3) var(--fc-space-4);
  background: var(--fc-raised);
  border: var(--fc-border) solid var(--fc-danger);
  border-radius: var(--fc-radius-chip);
}

/* The Stripe card Element mounts an iframe into a div. .fc-input gives it the
   field shell; this makes the iframe sit on the text baseline inside it. */
.fc-auth .fc-stripe-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fc-auth .fc-stripe-field .StripeElement,
.fc-auth .fc-stripe-field iframe {
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. Mobile — one column, brand panel becomes a compact header
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .fc-auth-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .fc-auth-brand {
    gap: var(--fc-space-4);
    padding: var(--fc-space-6) var(--fc-space-5);
  }

  .fc-auth-brand .fc-auth-art,
  .fc-auth-brand .fc-auth-facts,
  .fc-auth-brand .fc-auth-note {
    display: none;
  }

  .fc-auth-brand-foot {
    display: none;
  }

  .fc-auth-tagline {
    font-size: var(--fc-text-title);
    max-width: none;
  }

  .fc-auth-panel {
    padding: var(--fc-space-7) var(--fc-space-5) var(--fc-space-8);
    align-items: flex-start;
  }

  .fc-auth-solo .fc-auth-shell {
    border: 0;
    border-radius: 0;
  }
}

@media (max-width: 520px) {
  .fc-auth-title {
    font-size: var(--fc-text-title);
  }

  .fc-auth-door {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--fc-space-3) var(--fc-space-4);
  }

  .fc-auth-door .go {
    display: none;
  }

  .fc-auth-badges img {
    height: var(--fc-space-7);
  }
}