/* Turf Line component styles for the sign-in screen (TASK-0016).
   Consumes the token custom properties from styles.css; carries no
   literal colour, size, or radius value of its own except where a
   design token needed a derived, AA-safe shade for text (noted below).
   Scoped to Views/Account/Login.cshtml via _LayoutAuth.cshtml.

   TASK-0024 moved the form primitives that used to live here --
   .fp-field, .fp-label, .fp-input, .fp-help, .fp-validation-summary,
   and the .fp-btn/.fp-btn--primary base -- into styles.css, because the
   account page needs them and its layout does not load this file. What
   stays here is specific to the auth shell itself: the app bar as it
   renders on the signed-out login screen, the auth card and column, and
   the two provider button skins and the divider that only Login.cshtml
   uses. */


.fp-auth-shell {
  min-height: calc(100vh - var(--fp-navbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fp-space-9) var(--fp-space-8);
}

.fp-auth-column {
  width: 100%;
  max-width: var(--fp-width-auth);
}

.fp-auth-title {
  font-size: var(--fp-size-title);
  font-weight: var(--fp-weight-bold);
  color: var(--fp-text-body);
  margin: 0 0 var(--fp-space-2);
  text-align: center;
}

.fp-auth-subtitle {
  font-size: var(--fp-size-body);
  color: var(--fp-dim);
  text-align: center;
  margin: 0 0 var(--fp-space-8);
}

.fp-auth-card {
  background: var(--fp-bg-card);
  border: var(--fp-border-hairline) solid var(--fp-border-card);
  border-radius: var(--fp-radius-2xl);
  padding: var(--fp-pad-card);
}

.fp-btn--google {
  background: var(--fp-surface);
  color: var(--fp-text-body);
  border: var(--fp-border-hairline) solid var(--fp-border-card);
  margin-bottom: var(--fp-space-4);
}

.fp-btn--facebook {
  /* --fp-facebook (#1877F2) is the token, but white text on it reads at
     4.23:1 -- short of the 4.5:1 AA needs for 14px text (criterion 6).
     color-mix darkens it 10% toward black at the component level,
     without touching the ported token; that alone clears 5:1. Recorded
     in the task Log rather than silently. */
  background: color-mix(in srgb, var(--fp-facebook) 90%, black);
  color: var(--fp-action-primary-text);
  border: none;
}

.fp-divider {
  display: flex;
  align-items: center;
  gap: var(--fp-space-4);
  margin-bottom: var(--fp-space-8);
}

.fp-divider__line {
  flex: 1;
  height: var(--fp-border-hairline);
  background: var(--fp-line);
}

.fp-divider__label {
  font-size: var(--fp-size-meta);
  color: var(--fp-dim);
}