/* W1 Auth premium: login-only adapter over the shared Design Platform runtime. */
body.auth-account-center.auth-login-premium {
  --auth-premium-canvas: var(--hrc-color-bg-app);
  --auth-premium-surface: var(--hrc-color-surface);
  --auth-premium-surface-soft: var(--hrc-color-surface-soft);
  --auth-premium-text: var(--hrc-color-text);
  --auth-premium-text-soft: var(--hrc-color-text-soft);
  --auth-premium-muted: var(--hrc-color-text-muted);
  --auth-premium-border: var(--hrc-color-border);
  --auth-premium-border-strong: var(--hrc-color-border-strong);
  --auth-premium-action: var(--hrc-action-primary);
  --auth-premium-action-hover: var(--hrc-action-primary-hover);
  --auth-premium-on-action: var(--hrc-action-on-solid);
  --auth-premium-focus: var(--hrc-color-focus);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--auth-premium-action) 9%, transparent), transparent 34%),
    linear-gradient(145deg, var(--auth-premium-canvas), var(--auth-premium-surface-soft));
  color: var(--auth-premium-text);
}

.auth-account-center.auth-login-premium .auth-shell {
  width: min(var(--hrc-container-lg), calc(100% - (2 * var(--hrc-space-6))));
  padding-block: max(var(--hrc-space-6), env(safe-area-inset-top)) max(var(--hrc-space-6), env(safe-area-inset-bottom));
}

.auth-account-center.auth-login-premium .auth-card {
  grid-template-columns: minmax(var(--hrc-layout-detail-min), .84fr) minmax(0, 1.16fr);
  border-color: var(--auth-premium-border);
  border-radius: var(--hrc-radius-xl);
  background: var(--auth-premium-surface);
  box-shadow: var(--hrc-shadow-lg);
}

.auth-account-center.auth-login-premium .auth-hero {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--hrc-space-8), 4vw, var(--hrc-space-12));
  border-right: var(--hrc-border-width) solid var(--auth-premium-border);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--auth-premium-action) 8%, var(--auth-premium-surface)), var(--auth-premium-surface));
  color: var(--auth-premium-text);
}

.auth-account-center.auth-login-premium .auth-hero::after {
  right: calc(-1 * var(--hrc-space-12));
  bottom: calc(-1 * var(--hrc-space-12));
  width: var(--hrc-illustration-md);
  height: var(--hrc-illustration-md);
  border: var(--hrc-border-width) solid color-mix(in srgb, var(--auth-premium-action) 16%, transparent);
  background: color-mix(in srgb, var(--auth-premium-action) 5%, transparent);
}

.auth-account-center.auth-login-premium .auth-eyebrow,
.auth-account-center.auth-login-premium .auth-main-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--hrc-space-2);
  color: var(--auth-premium-action);
  font-size: var(--hrc-text-xs);
  font-weight: var(--hrc-weight-bold);
  letter-spacing: var(--hrc-tracking-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}

.auth-account-center.auth-login-premium .auth-logo {
  width: calc(var(--hrc-icon-xl) + var(--hrc-space-10));
  height: calc(var(--hrc-icon-xl) + var(--hrc-space-10));
  margin-top: var(--hrc-space-6);
  border: var(--hrc-border-width) solid var(--auth-premium-border);
  border-radius: var(--hrc-radius-lg);
  background: var(--auth-premium-surface);
  box-shadow: var(--hrc-shadow-sm);
}

.auth-account-center.auth-login-premium .auth-hero h1 {
  margin: var(--hrc-space-6) 0 var(--hrc-space-3);
  color: var(--auth-premium-text);
  font-size: var(--hrc-text-3xl);
  letter-spacing: calc(-1 * var(--hrc-tracking-eyebrow) / 2);
}

.auth-account-center.auth-login-premium .auth-hero p {
  color: var(--auth-premium-text-soft);
  font-size: var(--hrc-text-md);
}

.auth-account-center.auth-login-premium .auth-list {
  gap: var(--hrc-space-3);
  margin-top: var(--hrc-space-6);
}

.auth-account-center.auth-login-premium .auth-list span {
  align-items: flex-start;
  color: var(--auth-premium-text-soft);
}

.auth-account-center.auth-login-premium .auth-list b {
  border: var(--hrc-border-width) solid color-mix(in srgb, var(--auth-premium-action) 28%, var(--auth-premium-border));
  background: color-mix(in srgb, var(--auth-premium-action) 9%, var(--auth-premium-surface));
  color: var(--auth-premium-action);
}

.auth-account-center.auth-login-premium .auth-trust-row {
  display: grid;
  gap: var(--hrc-space-2);
  margin-top: auto;
  padding-top: var(--hrc-space-8);
  color: var(--auth-premium-muted);
  font-size: var(--hrc-text-xs);
  line-height: 1.5;
}

.auth-account-center.auth-login-premium .auth-trust-row span {
  display: flex;
  align-items: center;
  gap: var(--hrc-space-2);
}

.auth-account-center.auth-login-premium .auth-trust-row span::before {
  width: var(--hrc-space-2);
  height: var(--hrc-space-2);
  flex: 0 0 var(--hrc-space-2);
  border-radius: var(--hrc-radius-pill);
  background: var(--hrc-color-success);
  content: "";
}

.auth-account-center.auth-login-premium .auth-main {
  padding: clamp(var(--hrc-space-6), 3.3vw, var(--hrc-space-10));
}

.auth-account-center.auth-login-premium .auth-main-heading {
  margin-bottom: var(--hrc-space-4);
}

.auth-account-center.auth-login-premium .auth-main-heading p {
  margin: var(--hrc-space-1) 0 0;
  color: var(--auth-premium-muted);
  font-size: var(--hrc-text-sm);
  line-height: 1.5;
}

.auth-account-center.auth-login-premium .auth-tabs {
  gap: var(--hrc-space-2);
  margin-bottom: var(--hrc-space-5);
  padding: var(--hrc-space-1);
  border: var(--hrc-border-width) solid var(--auth-premium-border);
  border-radius: var(--hrc-radius-pill);
  background: var(--auth-premium-surface-soft);
}

.auth-account-center.auth-login-premium .auth-tabs a,
.auth-account-center.auth-login-premium .portal-form-switch a {
  border-color: transparent;
  border-radius: var(--hrc-radius-pill);
  background: transparent;
  color: var(--auth-premium-text-soft);
  transition: background-color var(--hrc-motion-fast) ease, color var(--hrc-motion-fast) ease, border-color var(--hrc-motion-fast) ease, transform var(--hrc-motion-fast) ease;
}

.auth-account-center.auth-login-premium .auth-tabs a:hover,
.auth-account-center.auth-login-premium .portal-form-switch a:hover {
  border-color: var(--auth-premium-border);
  background: color-mix(in srgb, var(--auth-premium-action) 7%, var(--auth-premium-surface));
  color: var(--auth-premium-action);
}

.auth-account-center.auth-login-premium .auth-tabs a.active,
.auth-account-center.auth-login-premium .portal-form-switch a.active,
.auth-account-center.auth-login-premium .auth-tabs a.active:hover,
.auth-account-center.auth-login-premium .portal-form-switch a.active:hover {
  border-color: var(--auth-premium-action);
  background: var(--auth-premium-action);
  color: var(--auth-premium-on-action);
  box-shadow: var(--hrc-shadow-xs);
}

.auth-account-center.auth-login-premium .auth-panel,
.auth-account-center.auth-login-premium .role-choice {
  border-color: var(--auth-premium-border);
  border-radius: var(--hrc-radius-lg);
  background: var(--auth-premium-surface);
  box-shadow: none;
}

.auth-account-center.auth-login-premium .auth-panel {
  padding: var(--hrc-space-6);
}

.auth-account-center.auth-login-premium .auth-panel > p,
.auth-account-center.auth-login-premium .auth-section-copy,
.auth-account-center.auth-login-premium .role-choice > span,
.auth-account-center.auth-login-premium .hint {
  color: var(--auth-premium-muted);
}

.auth-account-center.auth-login-premium .role-choice {
  min-height: var(--hrc-illustration-sm);
  padding: var(--hrc-space-5);
  transition: border-color var(--hrc-motion-fast) ease, box-shadow var(--hrc-motion-fast) ease, transform var(--hrc-motion-fast) ease;
}

.auth-account-center.auth-login-premium .role-choice:hover {
  transform: translateY(calc(-1 * var(--hrc-border-width)));
  border-color: var(--auth-premium-action);
  box-shadow: var(--hrc-shadow-sm);
}

.auth-account-center.auth-login-premium .role-choice-action {
  margin-top: auto;
  color: var(--auth-premium-action);
  font-size: var(--hrc-text-sm);
}

.auth-account-center.auth-login-premium :where(.form-label, .reset-main label) {
  color: var(--auth-premium-text-soft);
}

.auth-account-center.auth-login-premium :where(.form-control, .form-select, .reset-main input, .reset-main select, .reset-main textarea) {
  min-height: calc(var(--hrc-touch-target) + var(--hrc-space-1));
  border-color: var(--auth-premium-border-strong);
  border-radius: var(--hrc-radius-md);
  background: var(--auth-premium-surface);
  color: var(--auth-premium-text);
  transition: border-color var(--hrc-motion-fast) ease, box-shadow var(--hrc-motion-fast) ease, background-color var(--hrc-motion-fast) ease;
}

.auth-account-center.auth-login-premium :where(.form-control, .form-select, .reset-main input, .reset-main select, .reset-main textarea):hover {
  border-color: var(--auth-premium-action);
}

.auth-account-center.auth-login-premium :where(.form-control, .form-select, .reset-main input, .reset-main select, .reset-main textarea):focus {
  border-color: var(--auth-premium-action);
  background: var(--auth-premium-surface);
  box-shadow: var(--hrc-focus-ring);
}

.auth-account-center.auth-login-premium :where(.form-control, input)[aria-invalid="true"] {
  border-color: var(--hrc-color-danger);
  box-shadow: 0 0 0 var(--hrc-focus-width) color-mix(in srgb, var(--hrc-color-danger) 22%, transparent);
}

.auth-account-center.auth-login-premium :where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--hrc-focus-width) solid var(--auth-premium-action);
  outline-offset: var(--hrc-focus-offset);
}

.auth-account-center.auth-login-premium .auth-password-toggle {
  color: var(--auth-premium-action);
}

.auth-account-center.auth-login-premium .auth-password-toggle:hover,
.auth-account-center.auth-login-premium .auth-password-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--auth-premium-action) 9%, var(--auth-premium-surface));
  color: var(--auth-premium-action-hover);
}

.auth-account-center.auth-login-premium :where(.btn-primary, .btn-success, .reset-main button:not(.secondary), .button-link) {
  border-color: var(--auth-premium-action);
  background: var(--auth-premium-action);
  color: var(--auth-premium-on-action);
}

.auth-account-center.auth-login-premium :where(.btn-primary, .btn-success, .reset-main button:not(.secondary), .button-link):hover {
  transform: translateY(calc(-1 * var(--hrc-border-width)));
  border-color: var(--auth-premium-action-hover);
  background: var(--auth-premium-action-hover);
  color: var(--auth-premium-on-action);
}

.auth-account-center.auth-login-premium :where(.btn, .btn-google, .forgot-link) {
  min-height: var(--hrc-touch-target);
  border-radius: var(--hrc-radius-md);
  transition: background-color var(--hrc-motion-fast) ease, border-color var(--hrc-motion-fast) ease, color var(--hrc-motion-fast) ease, transform var(--hrc-motion-fast) ease;
}

.auth-account-center.auth-login-premium .btn-google,
.auth-account-center.auth-login-premium .forgot-link {
  border-color: var(--auth-premium-border-strong);
  background: var(--auth-premium-surface);
  color: var(--auth-premium-action);
}

.auth-account-center.auth-login-premium .btn-google:hover,
.auth-account-center.auth-login-premium .forgot-link:hover {
  border-color: var(--auth-premium-action);
  background: color-mix(in srgb, var(--auth-premium-action) 7%, var(--auth-premium-surface));
  color: var(--auth-premium-action-hover);
}

.auth-account-center.auth-login-premium .auth-feedback:empty {
  display: none;
}

.auth-account-center.auth-login-premium .notice,
.auth-account-center.auth-login-premium .alert {
  border: var(--hrc-border-width) solid var(--auth-premium-border);
  border-radius: var(--hrc-radius-md);
  background: var(--auth-premium-surface-soft);
  color: var(--auth-premium-text);
}

.auth-account-center.auth-login-premium .alert-info {
  border-color: color-mix(in srgb, var(--hrc-color-info) 36%, var(--auth-premium-border));
  background: var(--hrc-color-info-soft);
  color: var(--hrc-color-info);
}

.auth-account-center.auth-login-premium .alert-danger {
  border-color: color-mix(in srgb, var(--hrc-color-danger) 36%, var(--auth-premium-border));
  background: var(--hrc-color-danger-soft);
  color: var(--hrc-color-danger);
}

.auth-account-center.auth-login-premium .alert-success {
  border-color: color-mix(in srgb, var(--hrc-color-success) 36%, var(--auth-premium-border));
  background: var(--hrc-color-success-soft);
  color: var(--hrc-color-success);
}

.auth-account-center.auth-login-premium .auth-feedback-recovery,
.auth-account-center.auth-login-premium .auth-field-error {
  display: block;
  margin-top: var(--hrc-space-1);
  font-size: var(--hrc-text-xs);
  line-height: 1.5;
}

.auth-account-center.auth-login-premium .auth-field-error:empty {
  display: none;
}

.auth-account-center.auth-login-premium .auth-submit-spinner {
  width: var(--hrc-space-4);
  height: var(--hrc-space-4);
  flex: 0 0 var(--hrc-space-4);
  border: var(--hrc-focus-width) solid color-mix(in srgb, currentColor 34%, transparent);
  border-top-color: currentColor;
  border-radius: var(--hrc-radius-pill);
  animation: auth-premium-spin var(--hrc-motion-slow) linear infinite;
}

.auth-account-center.auth-login-premium form[aria-busy="true"] button[type="submit"] {
  gap: var(--hrc-space-2);
  opacity: var(--hrc-opacity-disabled);
}

.auth-account-center.auth-login-premium :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: var(--hrc-opacity-disabled);
}

@keyframes auth-premium-spin {
  to { transform: rotate(1turn); }
}

@media (max-width: 1023.98px) {
  .auth-account-center.auth-login-premium .auth-card {
    grid-template-columns: minmax(var(--hrc-foldable-pane-min), .72fr) minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .auth-account-center.auth-login-premium .auth-shell {
    width: min(var(--hrc-container-sm), calc(100% - (2 * var(--hrc-space-3))));
    margin: 0 auto;
  }

  .auth-account-center.auth-login-premium .auth-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-account-center.auth-login-premium .auth-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--hrc-space-3);
    padding: var(--hrc-space-4);
    border-right: 0;
    border-bottom: var(--hrc-border-width) solid var(--auth-premium-border);
  }

  .auth-account-center.auth-login-premium .auth-eyebrow,
  .auth-account-center.auth-login-premium .auth-hero p,
  .auth-account-center.auth-login-premium .auth-list,
  .auth-account-center.auth-login-premium .auth-trust-row {
    display: none;
  }

  .auth-account-center.auth-login-premium .auth-logo {
    width: calc(var(--hrc-icon-xl) + var(--hrc-space-5));
    height: calc(var(--hrc-icon-xl) + var(--hrc-space-5));
    margin-top: 0;
  }

  .auth-account-center.auth-login-premium .auth-hero h1 {
    align-self: center;
    margin: 0;
    font-size: var(--hrc-text-xl);
  }

  .auth-account-center.auth-login-premium .auth-main {
    padding: var(--hrc-space-5);
  }

  .auth-account-center.auth-login-premium .community-role-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  body.auth-account-center.auth-login-premium {
    background: var(--auth-premium-surface);
  }

  .auth-account-center.auth-login-premium .auth-shell {
    width: 100%;
    padding: 0 0 env(safe-area-inset-bottom);
  }

  .auth-account-center.auth-login-premium .auth-card {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-account-center.auth-login-premium .auth-main {
    padding: var(--hrc-space-4);
  }

  .auth-account-center.auth-login-premium .auth-tabs {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .auth-account-center.auth-login-premium .auth-tabs a {
    min-width: max-content;
    flex: 1 0 auto;
    padding-inline: var(--hrc-space-3);
  }

  .auth-account-center.auth-login-premium .auth-panel {
    padding: var(--hrc-space-4);
  }

  .auth-account-center.auth-login-premium .auth-browser-handoff {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .auth-account-center.auth-login-premium :where(.auth-card, .auth-panel, .role-choice, .auth-tabs, .form-control, .btn, .forgot-link) {
    forced-color-adjust: auto;
  }

  .auth-account-center.auth-login-premium .auth-trust-row span::before {
    border: var(--hrc-border-width) solid CanvasText;
    background: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-account-center.auth-login-premium .auth-submit-spinner {
    animation: none;
  }
}