/* Login page. Phone and tablet: the app's Login screen (back button, logo, title,
   fields, buttons). Wider than 1040px: the desktop Login, a narrow white card
   between the legacy header and footer. Shared field/button styles: app-form.css. */
.adSkin, .header, .footer { display: none; }
.login-page { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--color-paper); }
.login-page .pageLayer { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.login { flex: 1; width: 100%; max-width: 560px; margin: 0 auto; padding: calc(var(--space-5) + env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) calc(var(--space-6) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left)); }
.login-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-card); color: var(--color-ink); }
.login-logo { display: block; width: 180px; margin: var(--space-4) auto var(--space-5); }
.login-logo img { display: block; width: 180px; height: 75px; }
.login-head { margin-bottom: var(--space-5); text-align: center; }
.login-head h1 { margin: var(--space-3) 0 var(--space-1); color: var(--text-header-title-color); font: var(--text-header-title-font-weight) var(--text-header-title-font-size)/var(--text-header-title-line-height) var(--text-header-title-font-family); }
.login-head p { margin: 0; font: var(--text-subtitle-font-weight) var(--text-subtitle-font-size)/var(--text-subtitle-line-height) var(--text-subtitle-font-family); }

.login-form { display: grid; gap: var(--space-4); }
.login-forgot { justify-self: end; color: var(--color-primary); text-decoration: none; }
.login-form .form-error { margin: 0; }
.login-form .btn { width: 100%; }
.login-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-ink-soft); }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-line); }
.login-signup { display: block; padding-inline: var(--space-4); text-decoration: none; }
.login-disclaimer { margin: 0; text-align: center; }
.login-disclaimer a { color: var(--color-primary); text-decoration: underline; }

@media (min-width: 1041px) {
  .adSkin, .header, .footer { display: block; }
  .footer { margin-top: auto; flex-shrink: 0; }
  .login-page { color: var(--color-ink); font: 14px/1.4 var(--text-body-text-font-family); }
  .login-back, .login-logo { display: none; }
  .login { flex: 0 0 auto; width: 480px; max-width: none; margin: 25px auto; padding: var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-card); box-shadow: 0 7px 18px rgba(20, 42, 32, .13);
    /* Text roles at their design size (1x), so the card sits in proportion with the 12px header and footer. */
    --text-header-title-font-size: 19.2px; --text-header-title-line-height: 27px;
    --text-subtitle-font-size: 14px; --text-subtitle-line-height: 20px;
    --text-body-text-font-size: 14px; --text-body-text-line-height: 20px;
    --text-label-font-size: 14px; --text-label-line-height: 20px;
    --text-field-text-font-size: 14px; --text-field-text-line-height: 20px;
    --text-button-text-font-size: 15px; --text-button-text-line-height: 21px;
    font: var(--text-body-text-font-weight) var(--text-body-text-font-size)/var(--text-body-text-line-height) var(--text-body-text-font-family); }
  .login-head h1 { margin-top: 0; }
  .login a:not(.btn):not(.login-forgot) { text-decoration: none; }
  .login-disclaimer a { text-decoration: underline; }
}