/* PR-UI18: Auth-only visual alignment with the closed PR-UI17 guest home. */
body[data-shell="login"] {
  --ui18-green: #064e40;
  --ui18-green-deep: #043d33;
  --ui18-green-soft: #eaf2ef;
  --ui18-coral: #c95749;
  --ui18-coral-strong: #a9453b;
  --ui18-gold: #d9b45b;
  --ui18-canvas: #f3f6f5;
  --ui18-line: #cbd8d4;
  --ui18-ink: #17332d;
  --ui18-muted: #596d68;
  background: var(--ui18-canvas);
  color: var(--ui18-ink);
}

body[data-shell="login"] main {
  min-block-size: calc(100dvh - 48px);
  display: grid;
  place-items: center;
  padding: 2.5rem 1.5rem 3.5rem;
}

body[data-shell="login"] .login-page {
  inline-size: min(100%, 70rem);
  gap: 1rem;
}

body[data-shell="login"] .login-back-home {
  gap: 0.4rem;
  min-block-size: 44px;
  padding-inline: 0.25rem;
  color: var(--ui18-green);
  font-size: 0.875rem;
  font-weight: 750;
  text-underline-offset: 0.2em;
}

body[data-shell="login"] .login-back-home:hover {
  color: var(--ui18-coral-strong);
  text-decoration: underline;
}

body[data-shell="login"] .login-shell {
  grid-template-columns: minmax(18rem, 0.78fr) minmax(30rem, 1.22fr);
  min-block-size: 36.5rem;
  border-color: var(--ui18-line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgb(4 61 51 / 14%);
}

body[data-shell="login"] .login-page-copy {
  position: relative;
  isolation: isolate;
  justify-content: flex-start;
  overflow: hidden;
  padding: 3.5rem 2.5rem;
  border: 0;
  border-inline-end: 1px solid rgb(255 255 255 / 16%);
  background-color: var(--ui18-green);
  background-image: url("/assets/home-hero-ui17-temporary.png");
  background-repeat: no-repeat;
  background-position: 58% 100%;
  background-size: auto 48%;
  color: #fff;
}

body[data-shell="login"] .login-page-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(4 61 51 / 78%);
  pointer-events: none;
}

body[data-shell="login"] .login-page-copy::after {
  content: "";
  inline-size: 3.5rem;
  block-size: 2px;
  position: absolute;
  inset-block-start: 2.25rem;
  inset-inline-start: 2.5rem;
  background: var(--ui18-gold);
}

body[data-shell="login"] .login-page-copy .eyebrow {
  margin: 1.25rem 0 0.75rem;
  color: #f1d58d;
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
}

body[data-shell="login"] .login-page-copy h1 {
  max-inline-size: 12ch;
  margin-block-end: 1rem;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1.28;
  text-wrap: balance;
}

body[data-shell="login"] .login-page-copy > p:not(.eyebrow) {
  max-inline-size: 30ch;
  color: rgb(255 255 255 / 82%);
  font-size: 0.9375rem;
  line-height: 1.75;
}

body[data-shell="login"] .login-note {
  max-inline-size: 30ch;
  margin-block-start: 1.75rem;
  padding-block-start: 1rem;
  border-block-start-color: rgb(217 180 91 / 60%);
}

body[data-shell="login"] .login-note strong {
  color: #fff;
  font-size: 0.9375rem;
}

body[data-shell="login"] .login-note span {
  color: rgb(255 255 255 / 72%);
  font-size: 0.875rem;
}

body[data-shell="login"] .login-page .auth-card {
  padding: 3.25rem 3.5rem;
  background: #fff;
}

body[data-shell="login"] .login-page .tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-block-end: 2.25rem;
  padding: 0;
  border: 0;
  border-block-end: 1px solid var(--ui18-line);
  border-radius: 0;
  background: transparent;
}

body[data-shell="login"] .login-page .tabs .tab {
  min-block-size: 48px;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ui18-muted);
  font-weight: 750;
}

body[data-shell="login"] .login-page .tabs .tab::after {
  content: "";
  block-size: 3px;
  position: absolute;
  inset-inline: 22%;
  inset-block-end: -1px;
  background: transparent;
}

body[data-shell="login"] .login-page .tabs .tab.is-active {
  background: transparent;
  color: var(--ui18-green);
  box-shadow: none;
}

body[data-shell="login"] .login-page .tabs .tab.is-active::after {
  background: var(--ui18-coral);
}

body[data-shell="login"] .auth-form {
  gap: 1.125rem;
}

body[data-shell="login"] .auth-form h2 {
  color: var(--ui18-ink);
  font-size: 1.55rem;
  line-height: 1.3;
}

body[data-shell="login"] .auth-form :is(label, legend) {
  color: var(--ui18-ink);
  font-size: 0.875rem;
  font-weight: 750;
}

body[data-shell="login"] .auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-block-size: 50px;
  border: 1px solid #aebfba;
  border-radius: 6px;
  background: #fff;
  color: var(--ui18-ink);
  box-shadow: inset 0 1px 2px rgb(4 61 51 / 5%);
}

body[data-shell="login"] .auth-form input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--ui18-green);
  box-shadow: 0 0 0 3px rgb(6 78 64 / 14%);
}

body[data-shell="login"] .auth-form input[aria-invalid="true"] {
  border-color: #a33434;
  background: #fff8f7;
  box-shadow: inset 3px 0 0 #a33434;
}

body[data-shell="login"] .auth-password-toggle {
  inset-block: 5px;
  inset-inline-end: 5px;
  min-block-size: 40px;
  border-inline-start-color: var(--ui18-line);
  color: var(--ui18-green);
}

body[data-shell="login"] .auth-password-toggle:hover {
  color: var(--ui18-coral-strong);
}

body[data-shell="login"] .auth-card .auth-form .button.full[data-auth-submit] {
  min-block-size: 50px;
  border-color: var(--ui18-coral);
  border-radius: 6px;
  background: var(--ui18-coral);
  color: #fff;
  box-shadow: 0 8px 18px rgb(169 69 59 / 18%);
  font-weight: 800;
}

body[data-shell="login"] .auth-card .auth-form .button.full[data-auth-submit]:hover:not(:disabled) {
  border-color: var(--ui18-coral-strong);
  background: var(--ui18-coral-strong);
  transform: translateY(-1px);
}

body[data-shell="login"] .auth-card .auth-form .button.full[data-auth-submit]:active:not(:disabled) {
  transform: translateY(1px);
}

body[data-shell="login"] .auth-card .auth-form .button.full[data-auth-submit]:disabled {
  border-color: #ad7b73;
  background: #ad7b73;
  cursor: wait;
}

body[data-shell="login"] :is(.auth-field-hint, .auth-submit-status, #oauth-login-status) {
  color: var(--ui18-muted);
}

body[data-shell="login"] :is(.auth-field-error, .auth-form-error) {
  color: #a33434;
}

body[data-shell="login"] .auth-form-error {
  border-inline-start-color: #a33434;
  border-radius: 0 6px 6px 0;
  background: #fff2f0;
}

body[data-shell="login"] .registration-role-options label {
  min-block-size: 48px;
  border-color: var(--ui18-line);
  border-radius: 6px;
  background: #fff;
}

body[data-shell="login"] .registration-role-options label:has(input:checked) {
  border-color: var(--ui18-green);
  background: var(--ui18-green-soft);
  color: var(--ui18-green);
  box-shadow: inset 0 0 0 1px var(--ui18-green);
}

body[data-shell="login"] .privacy-consent-field {
  border-inline-start: 3px solid var(--ui18-gold);
  border-radius: 0 6px 6px 0;
  background: #f7faf9;
}

body[data-shell="login"] :is(.auth-form-links .text-button, .privacy-consent-field .text-button) {
  color: var(--ui18-green);
  text-underline-offset: 0.2em;
}

body[data-shell="login"] .oauth-login {
  border-block-start-color: var(--ui18-line);
}

body[data-shell="login"] .oauth-login-button {
  border-color: var(--ui18-line);
  border-radius: 6px;
  background: #fff;
}

body[data-shell="login"] .auth-action-dialog {
  border: 1px solid var(--ui18-line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgb(4 61 51 / 18%);
}

body[data-shell="login"] .auth-action-dialog .button:not(.ghost) {
  border-color: var(--ui18-coral);
  background: var(--ui18-coral);
}

body[data-shell="login"] .home-ad-placeholder {
  display: none !important;
}

body[data-shell="login"] #site-copyright-strip {
  border-block-start-color: var(--ui18-line);
  background: #fff;
  color: var(--ui18-muted);
}

body[data-shell="login"] :is(a, button, input):focus-visible {
  outline-color: var(--ui18-gold);
  outline-offset: 3px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body[data-shell="login"] main {
    padding: 1.5rem 1rem 2.5rem;
  }

  body[data-shell="login"] .login-page {
    inline-size: min(100%, 50rem);
  }

  body[data-shell="login"] .login-shell {
    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
  }

  body[data-shell="login"] .login-page-copy {
    padding: 2.75rem 1.75rem;
    background-position: 58% 100%;
    background-size: auto 39%;
  }

  body[data-shell="login"] .login-page-copy::after {
    inset-block-start: 1.75rem;
    inset-inline-start: 1.75rem;
  }

  body[data-shell="login"] .login-page-copy h1 {
    font-size: 1.75rem;
  }

  body[data-shell="login"] .login-page .auth-card {
    padding: 2.75rem 2rem;
  }
}

@media (max-width: 767px) {
  body[data-shell="login"] main {
    display: block;
    padding: 0;
  }

  body[data-shell="login"] .login-page {
    gap: 0;
  }

  body[data-shell="login"] .login-back-home {
    margin: calc(env(safe-area-inset-top, 0px) + 0.375rem) 1rem 0.375rem;
  }

  body[data-shell="login"] .login-shell {
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 0;
    border-block: 1px solid var(--ui18-line);
    border-radius: 0;
    box-shadow: none;
  }

  body[data-shell="login"] .login-page-copy {
    min-block-size: 5.25rem;
    padding: 1.125rem 1.25rem 1rem;
    border: 0;
    border-block-end: 1px solid rgb(255 255 255 / 18%);
    background-image: none;
  }

  body[data-shell="login"] .login-page-copy::before {
    background: transparent;
  }

  body[data-shell="login"] .login-page-copy::after {
    inline-size: 2.25rem;
    inset-block-start: 1rem;
    inset-inline-start: auto;
    inset-inline-end: 1.25rem;
  }

  body[data-shell="login"] .login-page-copy .eyebrow {
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
  }

  body[data-shell="login"] .login-page-copy h1 {
    max-inline-size: calc(100% - 3rem);
    font-size: 1.35rem;
    line-height: 1.25;
  }

  body[data-shell="login"] .login-page .auth-card {
    padding: 1.5rem 1.25rem 2.75rem;
  }

  body[data-shell="login"] .login-page .tabs {
    margin-block-end: 1.5rem;
  }

  body[data-shell="login"] .auth-form {
    gap: 1rem;
  }

  body[data-shell="login"] .auth-form h2 {
    font-size: 1.35rem;
  }

  body[data-shell="login"] .auth-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-block-size: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-shell="login"] .auth-card .auth-form .button.full[data-auth-submit] {
    transition: none;
  }
}