/* ============================================================
   Login + MFA — the auth ENTRY screen.
   This is NOT a registerPage page: the markup is hardcoded in
   index.html and an IIFE in pages/login.js binds to it by id and
   queries `.login-btn`. Class names are therefore FIXED — do not
   rename them. See docs/FRONTEND-ARCHITECTURE.md.

   Layout = structure only (sizing/grid/flow/spacing), zero color.
   Design = paint + type, every value a --mea-* / --t-* token (D10).

   Identity note: this is a fixed DARK navy auth screen. Its dark
   identity is intentional and is expressed via --mea-* tokens here,
   not via the themeable --t-* palette (the form sits on a light card
   over a dark backdrop). The roots carry `app-screen login`; the
   `.login` rules below override the generic `.app-screen` layout/paint
   so the entry screen stays full-bleed and dark in every theme.
   ============================================================ */

@layer layout {
  /* Full-bleed centered backdrop. Overrides the generic .app-screen
     single-column grid: the auth screen centers one card on a full
     viewport. */
  .app-screen.login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
  }
  .login-screen::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 600px;
    height: 600px;
    border-radius: var(--mea-radius-circle);
    pointer-events: none;
  }
  .login-screen::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: var(--mea-radius-circle);
    pointer-events: none;
  }

  .login-card {
    position: relative;
    z-index: var(--mea-z-base);
    width: 400px;
    max-width: calc(100vw - var(--mea-space-8));
    border-radius: var(--mea-radius-2xl);
    padding: var(--mea-space-10);
  }

  .login-logo {
    text-align: center;
    margin-bottom: var(--mea-space-8);
  }
  .login-logo .mea-wordmark {
    justify-content: center;
  }
  .login-subtitle {
    margin-top: var(--mea-space-2);
  }

  .login-field {
    margin-bottom: var(--mea-space-4);
  }
  .login-label {
    display: block;
    margin-bottom: var(--mea-space-1);
  }
  .login-input {
    width: 100%;
    padding: 10px var(--mea-space-3);
    border-radius: var(--mea-radius-md);
    border-width: 1.5px;
    border-style: solid;
    outline: none;
  }

  .login-error {
    padding: var(--mea-space-2) var(--mea-space-3);
    border-radius: var(--mea-radius-md);
    margin-bottom: var(--mea-space-4);
  }

  .login-btn {
    width: 100%;
    height: 44px;
    border-radius: var(--mea-radius-md);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mea-space-2);
    margin-top: var(--mea-space-6);
  }
  .login-btn:disabled {
    cursor: not-allowed;
  }

  .spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-style: solid;
    border-radius: var(--mea-radius-circle);
    animation: spin 0.6s linear infinite;
  }

  .login-use-notice {
    margin-top: var(--mea-space-3);
    padding: var(--mea-space-2) var(--mea-space-3);
    border-left-width: 3px;
    border-left-style: solid;
    border-radius: var(--mea-radius-sm);
  }
  .login-use-notice strong {
    display: block;
    margin-bottom: var(--mea-space-1);
  }
  .login-use-notice p {
    margin: 0;
  }

  .mfa-card {
    width: 460px;
  }
  .mfa-title {
    margin: 0 0 var(--mea-space-3);
  }
  .mfa-summary {
    margin: 0 0 var(--mea-space-4);
  }
  .mfa-disclosure {
    border-left-width: 3px;
    border-left-style: solid;
    border-radius: var(--mea-radius-sm);
    margin-bottom: var(--mea-space-4);
    padding: var(--mea-space-3);
  }
  .mfa-consent {
    align-items: flex-start;
    display: flex;
    gap: var(--mea-space-2);
  }
  .mfa-consent input {
    margin-top: 3px;
  }
  .mfa-cancel {
    border: 0;
    cursor: pointer;
    display: block;
    margin: var(--mea-space-5) auto 0;
    padding: var(--mea-space-2);
  }

  /* "Fair. Safe. Just." tagline + the citation/help links below the form. */
  .login-tagline {
    margin-top: var(--mea-space-2);
  }
  .login-links {
    text-align: center;
    margin-top: var(--mea-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--mea-space-3);
  }
}

/* Spinner keyframes — motion only, no paint; safe outside the cascade
   layers (keyframe definitions are not subject to layer precedence). */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@layer design {
  /* Dark navy backdrop + the two soft radial glows. The glows were
     rgba(130,203,245,0.08) (= --mea-baby-blue) and rgba(20,66,217,0.10)
     (= --mea-blue); expressed token-only via color-mix so there is no
     raw hex and no new token is introduced. */
  .app-screen.login {
    background: var(--mea-navy);
    color: var(--mea-gray-900);
  }
  .login-screen::before {
    background: radial-gradient(circle,
      color-mix(in srgb, var(--mea-baby-blue) 8%, transparent) 0%,
      transparent 70%);
  }
  .login-screen::after {
    background: radial-gradient(circle,
      color-mix(in srgb, var(--mea-blue) 10%, transparent) 0%,
      transparent 70%);
  }

  .login-card {
    background: var(--mea-surface-card);
    box-shadow: var(--mea-shadow-lg);
  }

  .login-subtitle {
    font-size: var(--mea-desk-base);
    color: var(--mea-gray-700);   /* gray-500 was 4.2:1 on white at 11px; gray-700 ~= 8:1 */
    font-weight: var(--mea-w-medium);
  }

  .login-label {
    font-size: var(--mea-desk-sm);
    font-weight: var(--mea-w-bold);
    color: var(--mea-gray-700);
    text-transform: uppercase;
    letter-spacing: var(--mea-ls-wide);
  }
  .login-input {
    /* gray-200 (#D2E6F5) border on a white card read as no field at all — the
       input was invisible until focus. gray-400 border + a faint gray-50 fill
       make it unmistakably an input box while unfocused. */
    border-color: var(--mea-gray-400);
    font-family: var(--mea-font-body);
    font-size: var(--mea-desk-md);
    color: var(--mea-gray-900);
    background: var(--mea-gray-50);
    transition: border-color var(--mea-dur-normal) var(--mea-ease-default);
  }
  .login-input:focus {
    border-color: var(--mea-blue);
  }
  .login-input::placeholder {
    color: var(--mea-gray-400);
  }

  .login-error {
    background: var(--mea-red-light);
    color: var(--mea-red-dark);
    font-size: var(--mea-desk-base);
    font-weight: var(--mea-w-semibold);
  }

  .login-btn {
    background: var(--mea-grad-blue-btn);
    color: var(--mea-white);
    font-family: var(--mea-font-body);
    font-size: var(--mea-desk-lg);
    font-weight: var(--mea-w-bold);
    transition: opacity var(--mea-dur-fast) var(--mea-ease-default);
  }
  .login-btn:hover {
    opacity: 0.92;
  }
  .login-btn:active {
    opacity: 0.85;
  }
  .login-btn:disabled {
    opacity: 0.6;
  }

  .spinner {
    /* track = rgba(255,255,255,0.3), head = --mea-white; token-only. */
    border-color: color-mix(in srgb, var(--mea-white) 30%, transparent);
    border-top-color: var(--mea-white);
  }

  .login-use-notice {
    background: var(--mea-gray-100);
    border-left-color: var(--mea-amber);
    color: var(--mea-gray-700);
    font-size: 0.7rem;       /* sub-token caption size; no --mea token exists */
    line-height: 1.4;
  }
  .login-use-notice strong {
    color: var(--mea-gray-900);
    font-size: 0.75rem;      /* sub-token caption size; no --mea token exists */
  }

  .mfa-title {
    color: var(--mea-gray-900);
    font-size: var(--mea-desk-xl);
  }
  .mfa-summary {
    color: var(--mea-gray-700);
    font-size: var(--mea-desk-base);
    line-height: 1.5;
  }
  .mfa-disclosure {
    background: var(--mea-gray-100);
    border-left-color: var(--mea-blue);
    color: var(--mea-gray-700);
    font-size: var(--mea-desk-sm);
    line-height: 1.5;
  }
  .mfa-consent {
    color: var(--mea-gray-800);
    font-size: var(--mea-desk-base);
    line-height: 1.45;
  }
  .mfa-cancel {
    background: transparent;
    color: var(--mea-blue);
    font-size: var(--mea-desk-base);
  }
  .mfa-cancel:focus-visible {
    outline: 2px solid var(--mea-blue);
    outline-offset: 2px;
  }

  .login-tagline {
    font-size: var(--mea-desk-sm, 12px);
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .login-citation-link {
    /* Royal blue per both design references (baby-blue had no design
       provenance and was 1.78:1 on the white card — previously masked by
       an unlayered legacy rule winning the cascade). */
    color: var(--mea-blue);
    font-size: var(--mea-desk-base);
    font-weight: var(--mea-w-semibold);
  }
  .login-help-text {
    font-size: var(--mea-desk-sm, 12px);
    color: var(--mea-gray-700);   /* gray-400 was 2.36:1 on white; gray-700 ~= 8:1 */
  }
}