/*
 * jobplanr auth-page component layer.
 *
 * Single source of truth for the chrome and form controls shared by every
 * redesigned auth page (login, signup, account-confirmed, verification-sent,
 * password-reset, ...). Pairs with palette.css: palette.css owns the *tokens*
 * (colours, fonts, radii), this file owns the *components* that consume them.
 *
 * Page-specific layout (signup's hero grid, a page's bespoke card) stays in
 * that page's template. Everything here is meant to be identical across pages —
 * if a page needs to differ, that's a design decision, not a copy-paste.
 *
 * Reconciliation notes (previously drifted between standalone templates):
 *   - Footer uses the Montserrat --font-footer-* tokens (the canonical auth
 *     footer); verification_sent had drifted to the Inter auth-footer tokens.
 *   - Footer copyright reads "jobplanr.ai" (the product domain), not ".com".
 * See specs/decisions/ADR-021-figma-metadata-reconciliation.md.
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-button-family);
  background-color: var(--color-brand-full);
  color: var(--color-neutral-brand-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page {
  background-color: var(--color-brand-full);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
}

/* ── Header ──────────────────────────────────────────────────────────────
   Flex row: an optional logo on the left, actions on the right. Pages that
   omit the logo (e.g. signup, which puts the logo in its hero) still get the
   actions pinned right via margin-left:auto on .header-actions. */
.header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 10px;
  box-shadow: 0 2px 3px 0 var(--color-login-glow);
}
.header-logo {
  display: inline-block;
  line-height: 0;
}
.header-logo img {
  display: block;
  height: 48px;
  width: auto;
}
.header-actions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
  padding: 8px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────*/
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  font-family: var(--font-button-family);
  font-weight: var(--font-button-weight);
  font-size: var(--font-button-size);
  line-height: var(--font-button-line-height);
  letter-spacing: var(--font-button-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-button);
  border: 0;
  cursor: pointer;
}
.button-login {
  background-color: var(--color-brand-full);
  color: var(--color-neutral-brand-white);
  padding: 8px 18px;
  box-shadow: 0 0 8px 2px var(--color-login-glow);
}
.button-login:hover { color: var(--color-accent-red-base-full); }
.button-submit {
  background-color: var(--color-brand-full);
  color: var(--color-neutral-brand-white);
  padding: 4px 18px;
  min-width: 100px;
}
.button-submit:hover { box-shadow: 0 0 8px 2px var(--color-login-glow); }

/* ── Form card ───────────────────────────────────────────────────────────*/
.form-card {
  background-color: var(--color-form-card-bg);
  color: var(--color-form-heading);
  border-radius: var(--radius-form-card);
  padding: 24px;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}
.form-heading {
  font-family: var(--font-dialog-title-family);
  font-weight: var(--font-dialog-title-weight);
  font-size: var(--font-dialog-title-size);
  line-height: var(--font-dialog-title-line-height);
  letter-spacing: var(--font-dialog-title-letter-spacing);
  text-transform: uppercase;
  color: var(--color-form-heading);
  margin: 0;
  padding: 0 24px;
}
.form-body { display: flex; flex-direction: column; gap: 10px; padding: 0 24px; }

/* ── Field (the {% auth_field %} component) ───────────────────────────────*/
.field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.field-main {
  padding-top: 7px;
}
.field-control {
  position: relative;
}
/* The error/warning glyph hangs in the left gutter, vertically centred on the
   input, without shifting the input — per the field-styling Figma reference
   (node 2088:15342). */
.field-status-icon {
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
.field-label {
  position: absolute;
  top: -7px;
  left: 14px;
  background-color: var(--color-form-card-bg);
  padding: 0 4px;
  font-family: var(--font-field-input-label-family);
  font-weight: var(--font-field-input-label-weight);
  font-size: var(--font-field-input-label-size);
  line-height: var(--font-field-input-label-line-height);
  letter-spacing: var(--font-field-input-label-letter-spacing);
  color: var(--color-field-label);
}
.field-label--required { font-weight: var(--font-field-input-label-required-weight); }
.field-input {
  font-family: var(--font-field-input-value-family);
  font-weight: var(--font-field-input-value-weight);
  font-size: var(--font-field-input-value-size);
  line-height: var(--font-field-input-value-line-height);
  letter-spacing: var(--font-field-input-value-letter-spacing);
  color: var(--color-field-value);
  background-color: var(--color-form-card-bg);
  border: 1px solid var(--color-field-border-focus);
  border-radius: var(--radius-button);
  padding: 8px 14px;
  outline: none;
  width: 100%;
}
.field-input:focus { border-color: var(--color-field-border-focus); }
/* Error state: red border + red leading icon; the label stays brand blue
   (the Figma error variant does not recolour the label). */
.field--error .field-input { border-color: var(--color-field-border-error); }
.field--error .field-status-icon {
  background-image: url("../images/icons/error.svg");
}
/* The message row is always present and reserves its height so the fields
   never shift when an error appears — it's just faded out (opacity 0) until
   the field enters its error state. */
.field-error-message {
  margin: 0;
  min-height: 18px;
  line-height: 18px;
  font-family: var(--font-field-input-message-family);
  font-weight: var(--font-field-input-message-weight);
  font-size: var(--font-field-input-message-size);
  color: var(--color-field-error-message);
  opacity: 0;
}
.field--error .field-error-message { opacity: 1; }

/* Non-field (form-wide) errors, e.g. invalid login credentials. */
.non-field-errors {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-field-border-error);
  color: var(--color-field-error-message);
  border-radius: var(--radius-button);
  font-family: var(--font-field-input-message-family);
  font-weight: var(--font-field-input-message-weight);
  font-size: var(--font-field-input-message-size);
}
.non-field-errors p { margin: 0; }

/* The "switch" / fine-print link row (e.g. "forgot your password? Reset",
   "already have an account? Login"). */
.switch-link {
  font-family: var(--font-fine-family);
  font-weight: var(--font-fine-weight);
  font-size: var(--font-fine-size);
  color: var(--color-form-heading);
}
.switch-link a {
  color: var(--color-switch-link);
  text-decoration: none;
}
.switch-link a:hover { text-decoration: underline; }

/* ── Footer ──────────────────────────────────────────────────────────────*/
.footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  font-family: var(--font-footer-family);
  font-weight: var(--font-footer-weight);
  font-size: var(--font-footer-size);
  line-height: var(--font-footer-line-height);
  color: var(--color-accent-gray-deep-h05);
}
.footer-links {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-links a {
  color: var(--color-accent-gray-deep-h05);
  text-decoration: none;
}
.footer-links a.mailto { color: var(--color-accent-gold-deep-h50); }
.footer-links a:hover { text-decoration: underline; }