/* ==========================================================================
   Asign Portal — Auth screens
   --------------------------------------------------------------------------
   The operator sign-in / sign-up / password-recovery screens. Split layout:
   a gradient brand panel (left) + a centered white form column (right).
   Shared by login / signup / forgot-password / reset-password / check-email.
   Requires: tokens.css -> base.css -> typography.css -> components.css.

   Measurements mirror the Figma "Auth/Brand Panel" component + the auth
   frames (file 9Y0U8GdxqSiq5IgnBOAovY): brand panel 800/1920 ≈ 42%, form
   card 440px, section gap 24, field gap 14. Reuses the .field primitive
   from components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shell — two columns, min full height (grows + body-scrolls on tall content)
   -------------------------------------------------------------------------- */
.auth {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Brand panel (left) — signature Blue -> Purple gradient, oriented per the
   Figma auth design (blue top-right, purple bottom-left).
   -------------------------------------------------------------------------- */
.auth__brand {
  position: relative;
  flex: 0 0 42%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-40);
  padding: 72px 64px 80px;
  overflow: hidden;
  background-image: linear-gradient(
    247deg,
    var(--color-gradient-start) 13%,
    var(--color-gradient-end) 87%
  );
  color: var(--color-on-primary);
}

.auth__brand-logo {
  position: relative;
  z-index: 1;
  width: 158px;
  height: auto;
}

/* Brand graphic (the layered diagonal capsules from the brand guidelines).
   Position + scale are ported from Figma, but the box is locked to the SVG's
   native aspect ratio (2726×2242) and sized off the panel's stable axis
   (height), so the shape NEVER skews as the window resizes — it only scales
   and shifts. At the 800×1080 design frame it lands pixel-exact. The panel's
   overflow:hidden clips it. */
.auth__graphic {
  position: absolute;
  z-index: 0;
  top: -133.43%;
  left: -20.5%;
  height: 207.59%;
  aspect-ratio: 2726 / 2242;
  pointer-events: none;
}
.auth__graphic img {
  display: block;
  width: 100%;
  height: 100%;
}

.auth-tagline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 460px;
}
.auth-tagline__title {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-display-size);   /* 30 / 38 */
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
  color: var(--color-on-primary);
}
.auth-tagline__text {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-lg-size);   /* 16 / 26 */
  line-height: var(--text-body-lg-lh);
  color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------------------
   Form column (right) — centers the card
   -------------------------------------------------------------------------- */
.auth__form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 64px;
  background: var(--color-surface);
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 440px;
  max-width: 100%;
}
/* Confirmation variant (check-email) — everything centered */
.auth-card--center { align-items: center; text-align: center; }

/* --------------------------------------------------------------------------
   Head — eyebrow + title + subtitle
   -------------------------------------------------------------------------- */
.auth-head { display: flex; flex-direction: column; gap: var(--space-8); }
.auth-card--center .auth-head { gap: var(--space-12); align-items: center; }

.auth-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-label-size);     /* 13 / 16 */
  line-height: var(--text-label-lh);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-primary);
}
.auth-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-h1-size);        /* 24 / 32 */
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  color: var(--color-navy);
}
.auth-subtitle {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-size);      /* 15 / 22 */
  line-height: var(--text-body-lh);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */
.auth-fields { display: flex; flex-direction: column; gap: 14px; }

/* Password field: inline "show/hide" toggle sitting inside the input box */
.field-affix { position: relative; width: 100%; }
.field-affix .field__control { padding-right: 46px; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.pw-toggle img { width: 22px; height: 22px; opacity: 0.7; transition: opacity var(--duration-fast) var(--ease-standard); }
.pw-toggle:hover img,
.pw-toggle[aria-pressed="true"] img { opacity: 1; }

/* Helper text under a field group (e.g. password rules on reset) */
.auth-hint {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size);   /* 13 / 18 */
  line-height: var(--text-body-sm-lh);
  color: var(--color-text-muted);
}

/* "Forgot password?" row — right-aligned link */
.auth-forgot { display: flex; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Actions — full-width primary button + meta rows
   -------------------------------------------------------------------------- */
.auth-actions { display: flex; flex-direction: column; gap: 18px; }
.auth-actions .btn { width: 100%; }

/* Centered "question? link" meta rows */
.auth-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}
.auth-meta__q {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size);   /* 13 / 18 */
  line-height: var(--text-body-sm-lh);
  color: var(--color-text-muted);
}

/* Legal / fine print (signup) */
.auth-legal {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--color-text-muted);
  text-align: center;
}

/* Inline link-styled button (e.g. "Resend email" — a backend action that
   reads as a text link, not a filled button) */
.btn-link {
  font-family: var(--font-action);
  font-weight: var(--weight-semibold);
  font-size: var(--text-link-size);
  line-height: var(--text-link-lh);
  color: var(--color-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.btn-link:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* Auth links: brand colour, no underline until hover (matches design) */
.auth a { text-decoration: none; }
.auth a:hover { text-decoration: underline; }
/* Meta/legal links read at the Action/Link size */
.auth-meta a,
.auth-legal a,
.auth-back { font-size: var(--text-link-size); }

.auth-back__arrow { margin-right: 2px; }

/* --------------------------------------------------------------------------
   Confirmation badge (check-email) — icon in a tinted circle
   -------------------------------------------------------------------------- */
.auth-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-pill);
  background: var(--color-tint-blue);
}
.auth-badge img { width: 32px; height: 32px; }

/* --------------------------------------------------------------------------
   Responsive — collapse to a single column with a slim gradient header
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .auth { flex-direction: column; }
  .auth__brand {
    flex: none;
    max-width: none;
    gap: 0;
    padding: 28px 32px;
  }
  .auth__brand-logo { width: 128px; }
  .auth-tagline,
  .auth__graphic { display: none; }
  .auth__form { padding: 40px 24px; justify-content: flex-start; }
}