/* 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-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(95% 0.007 255);
  --auth-field-hover: oklch(93% 0.009 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: 340px;
  min-width: 0;
}

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

.auth-screen .auth-title,
.auth-screen .auth-field label {
  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: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

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

.auth-screen .auth-field input {
  display: block;
  width: 100%;
  height: 60px;
  min-height: 60px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 16px;
  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;
}

.auth-screen .auth-field input::placeholder {
  color: var(--auth-label);
  opacity: 1;
}

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

.auth-screen .auth-field input:focus {
  background: var(--auth-field-hover);
  outline: none;
  box-shadow: none;
}

.auth-screen .auth-field input:focus-visible {
  outline: 2px solid var(--auth-focus);
  outline-offset: 3px;
}

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

.auth-screen .auth-error {
  min-height: 0;
  margin: 2px 0 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: 4px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background: var(--auth-accent);
  color: oklch(99% 0.003 255);
  font: 500 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 (max-width: 600px) {
  .auth-screen--pro {
    --auth-page: oklch(0% 0 0);
    --auth-field: oklch(19% 0.006 255);
    --auth-field-hover: oklch(23% 0.006 255);
    --auth-label: oklch(78% 0.009 255);
    --auth-art: url("./assets/brand/dolo-pro-login-mobile.png");
    --auth-art-height: 177.28vw;
    --auth-art-offset: calc(112vw + 32px);
    --auth-button: oklch(44% 0.15 25);
    --auth-button-hover: oklch(49% 0.17 25);
  }

  .auth-screen--drive {
    --auth-page: oklch(100% 0 0);
    --auth-field: oklch(99% 0.004 255);
    --auth-field-hover: oklch(97% 0.006 255);
    --auth-label: oklch(35% 0.04 255);
    --auth-art: url("./assets/dolo-drive-login-truck-v2.png");
    --auth-art-height: 177.47vw;
    --auth-art-offset: calc(112vw + 32px);
    --auth-button: oklch(52% 0.2 260);
    --auth-button-hover: oklch(57% 0.2 260);
  }
}

/* Shared sign-in controls and mobile composition for both portals. */
.auth-screen .auth-input-wrap {
  position: relative;
}

.auth-screen input[type="password"], .auth-screen .auth-input-wrap input[autocomplete="current-password"] {
  padding-right: 58px;
}

.auth-screen .auth-password-toggle {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: auto 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  transform: none;
  background: transparent;
  color: var(--auth-label);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.auth-screen .auth-password-toggle:hover:not(:disabled) {
  background: color-mix(in oklch, var(--auth-ink) 6%, transparent);
  color: var(--auth-ink);
}

.auth-screen .auth-password-toggle svg {
  width: 22px;
  height: 22px;
}

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

.auth-screen .auth-password-toggle:disabled {
  opacity: .65;
  cursor: wait;
}

.auth-screen .auth-submit-arrow {
  position: absolute;
  right: 20px;
  width: 22px;
  height: 22px;
}

.auth-screen .is-loading .auth-submit-arrow {
  display: none;
}

@media (max-width: 600px) {
  .auth-screen {
    --auth-panel-top: max(45svh, calc(62vw + 32px), env(safe-area-inset-top));
    --auth-art-top: calc(var(--auth-panel-top) - var(--auth-art-offset));
    --auth-art-fade: linear-gradient(
      180deg,
      var(--auth-page) 0%,
      color-mix(in oklch, var(--auth-page) 95%, transparent) 4%,
      color-mix(in oklch, var(--auth-page) 70%, transparent) 9%,
      color-mix(in oklch, var(--auth-page) 25%, transparent) 15%,
      transparent 24%,
      transparent 56%,
      color-mix(in oklch, var(--auth-page) 20%, transparent) 67%,
      color-mix(in oklch, var(--auth-page) 60%, transparent) 78%,
      color-mix(in oklch, var(--auth-page) 90%, transparent) 90%,
      var(--auth-page) 100%
    );
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    padding: var(--auth-panel-top) max(9vw, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(9vw, env(safe-area-inset-left));
    background-color: var(--auth-page);
    /* Fade both image edges into each portal's black or white page. */
    background-image: var(--auth-art-fade), var(--auth-art);
    background-repeat: no-repeat;
    background-size: 100% var(--auth-art-height), 100% var(--auth-art-height);
    /* Both photos end the truck near 112% of the rendered image width. */
    background-position: center var(--auth-art-top);
  }

  .auth-screen::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--auth-art-top);
    left: 0;
    width: 100%;
    height: var(--auth-art-height);
    pointer-events: none;
    background-image: var(--auth-art-fade), var(--auth-art);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: blur(14px);
    /* Soften only the edge bands; keep the truck and controls sharp. */
    --auth-blur-mask: linear-gradient(180deg, transparent 0%, black 5%, black 12%, transparent 24%, transparent 56%, black 78%, black 92%, transparent 100%);
    -webkit-mask-image: var(--auth-blur-mask);
    mask-image: var(--auth-blur-mask);
  }

  .auth-screen::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: clamp(64px, 28vw, 160px);
    pointer-events: none;
    /* Anchor the top fade to the viewport even when the photo is cropped. */
    background: linear-gradient(
      180deg,
      var(--auth-page) 0%,
      color-mix(in oklch, var(--auth-page) 75%, transparent) 24%,
      color-mix(in oklch, var(--auth-page) 35%, transparent) 55%,
      transparent 100%
    );
  }

  .auth-screen .auth-panel {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin: 0 auto;
  }

  .auth-screen .auth-logo {
    width: 146px;
    height: 49px;
    margin-bottom: 26px;
  }

  .auth-screen .auth-form {
    gap: 12px;
  }

  .auth-screen .auth-field input {
    height: 56px;
    min-height: 56px;
    font-weight: 400;
  }

  .auth-screen .auth-submit {
    height: 52px;
    min-height: 52px;
    margin-top: 4px;
    background: var(--auth-button);
  }

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

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

}

@media (max-width: 600px) and (max-height: 650px) {
  .auth-screen {
    --auth-panel-top: max(calc(62vw + 32px), calc(100svh - 390px), env(safe-area-inset-top));
  }
}

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