/* Shared sign-in layout. Only the theme tokens differ between portals. */
.auth-screen--pro {
  color-scheme: dark;
  --auth-page: oklch(13% 0.006 25);
  --auth-field: oklch(19% 0.006 25);
  --auth-field-hover: oklch(22% 0.006 25);
  --auth-line: oklch(32% 0.008 25);
  --auth-line-hover: oklch(45% 0.01 25);
  --auth-ink: oklch(96% 0.005 25);
  --auth-label: oklch(80% 0.008 25);
  --auth-accent: oklch(57% 0.22 27);
  --auth-accent-hover: oklch(53% 0.21 27);
  --auth-accent-active: oklch(49% 0.19 27);
  --auth-focus: oklch(72% 0.17 27);
  --auth-error: oklch(76% 0.14 27);
}

.auth-screen--drive {
  color-scheme: light;
  --auth-page: oklch(99% 0.003 255);
  --auth-field: oklch(97% 0.005 255);
  --auth-field-hover: oklch(95% 0.007 255);
  --auth-line: oklch(85% 0.012 255);
  --auth-line-hover: oklch(69% 0.018 255);
  --auth-ink: oklch(23% 0.016 255);
  --auth-label: oklch(38% 0.018 255);
  --auth-accent: oklch(52% 0.23 260);
  --auth-accent-hover: oklch(47% 0.21 260);
  --auth-accent-active: oklch(43% 0.19 260);
  --auth-focus: oklch(52% 0.23 260);
  --auth-error: oklch(46% 0.18 25);
}

.shell:has(> .auth-screen:not([hidden])) {
  max-width: none;
  padding: 0;
}

.auth-screen {
  display: grid;
  place-items: center;
  min-height: 100svh;
  min-height: 100dvh;
  padding: max(48px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: var(--auth-page);
  color: var(--auth-ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.auth-screen[hidden], .auth-screen.hidden {
  display: none;
}

.auth-screen .auth-panel {
  width: 100%;
  max-width: 360px;
  min-width: 0;
}

.auth-screen .auth-logo {
  display: block;
  width: min(280px, 100%);
  height: 94px;
  margin: 0 auto 44px;
  object-fit: contain;
}

.auth-screen .auth-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.auth-screen .auth-form {
  display: grid;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.auth-screen .auth-field {
  min-width: 0;
}

.auth-screen .auth-field label {
  display: block;
  margin: 0 0 8px;
  color: var(--auth-label);
  font: 500 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.auth-screen .auth-field input {
  display: block;
  width: 100%;
  height: 56px;
  min-height: 56px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--auth-line);
  border-radius: 10px;
  background: var(--auth-field);
  color: var(--auth-ink);
  font: 400 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  outline: none;
  box-shadow: none;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.auth-screen .auth-field input:hover:not(:disabled) {
  border-color: var(--auth-line-hover);
  background: var(--auth-field-hover);
}

.auth-screen .auth-field input:focus {
  border-color: var(--auth-focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--auth-focus) 20%, transparent);
}

.auth-screen .auth-field input:disabled {
  opacity: 0.65;
  cursor: wait;
}

.auth-screen .auth-error {
  min-height: 0;
  margin: -8px 0;
  color: var(--auth-error);
  font: 400 14px/21px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overflow-wrap: anywhere;
}

.auth-screen .auth-error:empty {
  display: none;
}

.auth-screen .auth-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  min-height: 56px;
  margin: 8px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--auth-accent);
  color: oklch(99% 0.003 255);
  font: 600 16px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 180ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1);
}

.auth-screen .auth-submit:hover:not(:disabled) {
  background: var(--auth-accent-hover);
}

.auth-screen .auth-submit:active:not(:disabled) {
  background: var(--auth-accent-active);
  transform: translateY(1px);
}

.auth-screen .auth-submit:focus-visible {
  outline: 2px solid var(--auth-focus);
  outline-offset: 4px;
}

.auth-screen .auth-submit:disabled {
  cursor: wait;
  opacity: 0.75;
}

.auth-screen .auth-submit__spinner {
  position: absolute;
  right: 20px;
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in oklch, currentColor 35%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
}

.auth-screen .is-loading .auth-submit__spinner {
  display: block;
  animation: auth-spin 800ms linear infinite;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-screen .auth-field input, .auth-screen .auth-submit {
    transition: none;
  }
  .auth-screen .is-loading .auth-submit__spinner {
    animation: none;
  }
}