/* Customer sign-in pages (login, forgot password, set password from an invitation or a reset link,
   error) in the HMOOD 2.0 look. Loaded only on these pages with PUBLIC_SITE=v2 (views/partials/head.ejs),
   after the site's own header/footer bundle (site/src/chrome.js: base.css, header, footer); the legacy
   stylesheet is not loaded there. Every rule is scoped to body.auth-v2, so the portal, admin and the
   legacy site are never affected. Visual only: markup, fields, actions and auth behaviour are unchanged. */

body.auth-v2 {
  --auth-ink: var(--c-dark);
  --auth-muted: var(--c-ink-60);
  --auth-line: var(--c-ink-15);
  background: var(--c-light);
  color: var(--auth-ink);
}

/* the page: one calm card below the site header */
body.auth-v2 .auth-section {
  padding-block: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.5rem)) clamp(3.5rem, 8vw, 7rem);
  background: var(--c-light);
}
body.auth-v2 .auth-layout {
  display: grid;
  gap: 1rem;
  width: min(100% - 2 * var(--gutter), 34rem);
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 3rem);
  border: 1px solid var(--auth-line);
  border-radius: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  background: #ffffff;
  box-shadow: 0 1.5rem 4rem rgba(17, 17, 17, 0.06);
}
body.auth-v2 .auth-layout > * {
  margin: 0;
}

/* brand line and headings (the brand reuses the class name of the site's mega wordmark: reset it) */
body.auth-v2 .auth-layout .wordmark,
body.auth-v2 .auth-layout > .eyebrow {
  container-type: normal;
  overflow: visible;
  margin: 0;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--auth-ink);
}
body.auth-v2 .auth-layout .wordmark__dot {
  color: var(--c-red);
}
body.auth-v2 .auth-layout h1 {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
body.auth-v2 .auth-layout h2 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
body.auth-v2 .auth-layout > p,
body.auth-v2 .section-heading__intro {
  color: var(--auth-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* the form */
body.auth-v2 .auth-form {
  display: grid;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
body.auth-v2 .form-field {
  display: grid;
  gap: 0.35rem;
}
body.auth-v2 .form-field > label,
body.auth-v2 .form-field > span {
  color: var(--auth-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* quiet underlined inputs, as in the HMOOD 2.0 forms */
body.auth-v2 .form-field input:not([type='radio']):not([type='checkbox']) {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.1rem;
  border: 0;
  border-bottom: 1px solid var(--auth-line);
  border-radius: 0;
  background: transparent;
  color: var(--auth-ink);
  font: 500 1.0625rem / 1.4 var(--f-body);
}
body.auth-v2 .form-field input:not([type='radio']):not([type='checkbox']):hover {
  border-bottom-color: var(--auth-muted);
}
body.auth-v2 .form-field input:not([type='radio']):not([type='checkbox']):focus-visible {
  outline: none;
  border-bottom-color: var(--c-red);
  box-shadow: 0 1px 0 0 var(--c-red);
}
body.auth-v2 .form-field input[aria-invalid='true'] {
  border-bottom-color: var(--c-red);
}
body.auth-v2 .form-field input:not([type='radio']):not([type='checkbox']):autofill,
body.auth-v2 .form-field input:not([type='radio']):not([type='checkbox']):-webkit-autofill {
  box-shadow: inset 0 0 0 100px #ffffff, 0 1px 0 0 var(--auth-line);
  -webkit-text-fill-color: var(--auth-ink);
}
/* consent checkboxes (portal terms, newsletter): box and text side by side */
body.auth-v2 .form-field label:has(> input[type='checkbox']),
body.auth-v2 .form-field > span:has(> input[type='checkbox']) {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--auth-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
body.auth-v2 input[type='checkbox'] {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  accent-color: var(--c-dark);
}
body.auth-v2 .form-hint {
  margin: 0;
  color: var(--auth-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}
body.auth-v2 .form-hint a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* buttons: rounded pills on the site's timing */
body.auth-v2 .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 1rem / 1.2 var(--f-body);
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
}
body.auth-v2 .button--primary {
  border-color: var(--c-dark);
  background: var(--c-dark);
  color: #ffffff;
}
body.auth-v2 .button--primary:hover:not(:disabled) {
  border-color: var(--c-red);
  background: var(--c-red);
}
body.auth-v2 .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
body.auth-v2 .button--secondary {
  border-color: var(--auth-line);
  background: transparent;
  color: var(--auth-ink);
}
body.auth-v2 .button--secondary:hover {
  border-color: var(--auth-ink);
}
body.auth-v2 .auth-layout .button:focus-visible,
body.auth-v2 .auth-layout a:focus-visible,
body.auth-v2 .auth-layout summary:focus-visible,
body.auth-v2 .auth-layout input[type='checkbox']:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}
body.auth-v2 .text-link {
  justify-self: start;
  color: var(--auth-muted);
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: var(--auth-line);
  text-underline-offset: 0.25em;
}
body.auth-v2 .text-link:hover {
  color: var(--auth-ink);
  text-decoration-color: var(--c-red);
}
body.auth-v2 .auth-form > .text-link {
  justify-self: center;
}

/* messages */
body.auth-v2 .form-status {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  border-inline-start: 3px solid var(--auth-ink);
  background: rgba(17, 17, 17, 0.05);
  color: var(--auth-ink);
  font-size: 0.9375rem;
  line-height: 1.55;
}
body.auth-v2 .form-status--error {
  border-inline-start-color: var(--c-red);
  background: rgba(230, 59, 59, 0.07);
}

/* new customers */
body.auth-v2 .auth-onboarding {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--auth-line);
}
body.auth-v2 .auth-onboarding p {
  margin: 0;
  color: var(--auth-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
body.auth-v2 .auth-onboarding__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

/* phones: full-width card and stacked actions */
@media (max-width: 40rem) {
  body.auth-v2 .auth-layout {
    width: calc(100% - 1.5rem);
    padding: 1.5rem 1.25rem;
  }
  body.auth-v2 .auth-onboarding__actions .button,
  body.auth-v2 .auth-form > .button {
    width: 100%;
  }
}

/* motion only for those who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
  body.auth-v2 .button,
  body.auth-v2 .form-field input:not([type='radio']):not([type='checkbox']),
  body.auth-v2 .text-link {
    transition: background-color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), text-decoration-color 0.45s var(--ease-out);
  }
  body.auth-v2 .auth-layout {
    animation: auth-v2-in 0.8s var(--ease-out) both;
  }
}
@keyframes auth-v2-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}