/* ===== SIGN UP MODAL =====
   Markup lives in includes/signup.html and is injected on every page by
   js/includes.js, so these rules are global chrome like the nav and footer.
   Stacking: the dialog sits above the desktop nav (1003) and, on mobile,
   just under .mobile-action-bar so the sheet slides up behind that bar. */

.auth-modal {
  --auth-body: #171719;
  --auth-field: #0d0d0d;
  --auth-accent: #701629;
  --auth-ink: #f6f2ea;
  --auth-ink-soft: rgba(246, 242, 234, 0.52);
  --auth-hairline: rgba(255, 255, 255, 0.06);
  --auth-focus: #63636b;
  --auth-radius: 1.15rem;
  --auth-action-bar: 4.4rem;

  position: fixed;
  z-index: 1010;
  inset: 0;
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex-direction: column;
  padding: clamp(1rem, 4vh, 2.5rem) 1rem;
  font-family: var(--font-body, Inter, Arial, sans-serif);
}

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

body.is-auth-open {
  overflow: hidden;
}

/* ---- Scrim: the 45% black wash plus the page blur ---- */

.auth-modal__scrim {
  position: fixed;
  inset: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--dur-short, 220ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.auth-modal.is-open .auth-modal__scrim {
  opacity: 1;
}

/* ---- Shell ---- */

.auth-modal__shell {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(100%, 27rem);
  /* Auto margins centre the dialog while it fits and collapse to zero when it
     does not, so a short window can still scroll down to the Sign Up button.
     `align-content: center` would strand the overflow out of scroll range. */
  margin: auto;
  opacity: 0;
  transform: translateY(1.5rem) scale(0.975);
  transition: opacity var(--dur-short, 220ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--dur-long, 420ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.auth-modal.is-open .auth-modal__shell {
  opacity: 1;
  transform: none;
}

.auth-modal__art {
  position: relative;
  z-index: 1;
  display: block;
  width: 84%;
  max-width: 21rem;
  height: auto;
  margin: 0 auto -2.5rem;
  pointer-events: none;
  filter: drop-shadow(0 1.1rem 1.6rem rgba(0, 0, 0, 0.55));
}

.auth-modal__card {
  position: relative;
  padding: 3.1rem 1.55rem 1.55rem;
  color: var(--auth-ink);
  background: var(--auth-body);
  border: var(--rule-hair, 1px) solid var(--auth-hairline);
  border-radius: var(--auth-radius);
  box-shadow: 0 1.5rem 3.4rem rgba(0, 0, 0, 0.55);
}

/* The burgundy card behind, peeking out under the bottom edge. */
.auth-modal__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0.85rem -1rem;
  height: 2.2rem;
  background: var(--auth-accent);
  border-radius: 0 0 0.95rem 0.95rem;
}

.auth-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  place-items: center;
  color: var(--auth-ink);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-micro, 120ms) ease;
}

.auth-modal__close img {
  display: block;
  width: 1.15rem;
  height: 1.15rem;
}

.auth-modal__title {
  margin: 0;
  font-size: clamp(1.3rem, 5.4vw, 1.55rem);
  font-weight: 500;
  letter-spacing: 0.012em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

.auth-modal__lede {
  margin: 0.6rem auto 1.4rem;
  max-width: 21rem;
  color: var(--auth-ink-soft);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  text-transform: none;
}

/* ---- Form ---- */

.auth-form {
  display: grid;
  gap: 0.6rem;
}

.auth-form__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.auth-field {
  width: 100%;
  min-height: 3.3rem;
  padding: 0 1.05rem;
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 300;
  background: var(--auth-field);
  border: var(--rule-hair, 1px) solid var(--auth-hairline);
  border-radius: 0.6rem;
  appearance: none;
}

.auth-field::placeholder {
  color: rgba(246, 242, 234, 0.34);
  opacity: 1;
}

.auth-field--reveal {
  padding-inline-end: 3.1rem;
}

.auth-field-wrap {
  position: relative;
}

.auth-reveal {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  place-items: center;
  color: var(--color-hero-gold, #e0ae4f);
  background: none;
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer;
  transform: translateY(-50%);
}

/* aria-pressed="true" means the password is showing, so offer "hide" instead. */
.auth-reveal img {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
}

/* Descendant selectors, so these outrank `.auth-reveal img` above. */
.auth-reveal .auth-reveal__off,
.auth-reveal[aria-pressed="true"] .auth-reveal__on {
  display: none;
}

.auth-reveal[aria-pressed="true"] .auth-reveal__off {
  display: block;
}

/* ---- Country calling code ---- */

.auth-country {
  position: relative;
}

.auth-country__toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 4.4rem;
  height: 100%;
  min-height: 3.3rem;
  padding: 0 0.7rem;
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 300;
  background: var(--auth-field);
  border: var(--rule-hair, 1px) solid var(--auth-hairline);
  border-radius: 0.6rem;
  cursor: pointer;
}

.auth-country__flag {
  display: block;
  width: 1.35rem;
  height: 1rem;
  object-fit: cover;
  border-radius: 0.1rem;
}

.auth-country__dial {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.auth-country__menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 0.35rem);
  left: 0;
  display: grid;
  gap: 0.4rem;
  width: min(17rem, 78vw);
  padding: 0.5rem;
  background: var(--auth-field);
  border: var(--rule-hair, 1px) solid rgba(255, 255, 255, 0.1);
  border-radius: 0.7rem;
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.6);
}

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

.auth-country__search {
  width: 100%;
  min-height: 2.35rem;
  padding: 0 0.7rem;
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 300;
  background: #000;
  border: var(--rule-hair, 1px) solid var(--auth-hairline);
  border-radius: 0.45rem;
  appearance: none;
}

.auth-country__list {
  overflow-y: auto;
  max-height: 13rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overscroll-behavior: contain;
}

.auth-country__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  color: var(--auth-ink);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: start;
  background: none;
  border: 0;
  border-radius: 0.45rem;
  cursor: pointer;
}

.auth-country__option img {
  flex: none;
  width: 1.3rem;
  height: 0.975rem;
  object-fit: cover;
  border-radius: 0.1rem;
}

.auth-country__option-name {
  overflow: hidden;
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-country__option-dial {
  flex: none;
  color: var(--auth-ink-soft);
  font-variant-numeric: tabular-nums;
}

.auth-country__option[aria-selected="true"] {
  background: rgba(112, 22, 41, 0.55);
}

.auth-country__empty {
  padding: 0.7rem 0.55rem;
  color: var(--auth-ink-soft);
  font-size: 0.82rem;
  text-align: center;
}

/* ---- Buttons ---- */

.auth-form__verify {
  min-height: 3.3rem;
  padding: 0 1.15rem;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--auth-accent);
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background-color var(--dur-micro, 120ms) ease, opacity var(--dur-micro, 120ms) ease;
}

.auth-form__submit {
  min-height: 3.5rem;
  margin-block-start: 0.3rem;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--auth-accent);
  border: 0;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background-color var(--dur-micro, 120ms) ease, opacity var(--dur-micro, 120ms) ease;
}

.auth-form__verify:disabled,
.auth-form__submit:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* ---- Toast ---- */

.auth-toast {
  margin: 0.1rem 0 0;
  padding: 0.72rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
  border: var(--rule-hair, 1px) solid transparent;
  border-radius: 0.55rem;
}

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

.auth-toast.is-success {
  color: #e6f6e2;
  background: rgba(58, 104, 40, 0.32);
  border-color: rgba(126, 196, 96, 0.6);
}

.auth-toast.is-error {
  color: #ffd4d9;
  background: rgba(140, 26, 42, 0.32);
  border-color: rgba(214, 72, 92, 0.62);
}

/* ---- Legal + log in ---- */

.auth-modal__legal {
  margin: 1rem auto 0;
  max-width: 22rem;
  color: var(--auth-ink-soft);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-transform: none;
}

.auth-modal__legal a {
  color: var(--color-hero-gold, #e0ae4f);
  font-weight: 400;
  text-decoration: none;
}

.auth-modal__alt {
  margin: 1.75rem 0 0;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
}

.auth-modal__alt a {
  color: var(--color-hero-gold, #e0ae4f);
  text-decoration: none;
}

/* ---- Focus: plain dark grey ring on every control ---- */

/* A hairline ring: thin enough to disappear into the design, bright enough
   to still read against the near-black fields. */
.auth-modal :is(input, button, a):focus-visible {
  outline: 1px solid var(--auth-focus);
  outline-offset: 2px;
}

.auth-modal .auth-field:focus-visible,
.auth-modal .auth-country__toggle:focus-visible,
.auth-modal .auth-country__search:focus-visible {
  outline-offset: 0;
}

@media (hover: hover) and (pointer: fine) {
  .auth-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .auth-country__option:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .auth-form__verify:not(:disabled):hover,
  .auth-form__submit:not(:disabled):hover {
    background: var(--color-hero-burgundy, #911f37);
  }

  .auth-modal__legal a:hover,
  .auth-modal__alt a:hover {
    text-decoration: underline;
  }
}

/* ---- Mobile: bottom sheet that slides up behind .mobile-action-bar ---- */

@media (max-width: 64rem) {
  .auth-modal {
    overflow: hidden;
    padding: 0;
  }

  /* The action bar stays on top so the sheet rises from behind it. */
  body.is-auth-open .mobile-action-bar {
    z-index: 1011;
  }

  /* The device shot is desktop-only: on a sheet it costs ~200px of the form. */
  .auth-modal__art {
    display: none;
  }

  /* max-height: 100% tracks .auth-modal's own inset:0 box. 100dvh drifts from
     it while the mobile URL bar animates, which pushed the sheet off-screen. */
  .auth-modal__shell {
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: auto 0 0;
    opacity: 1;
    transform: translateY(100%);
    transition: transform var(--dur-long, 420ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  }

  .auth-modal.is-open .auth-modal__shell {
    transform: translateY(0);
  }

  /* The sheet spans the viewport, but the fields keep the dialog measure.
     Nothing overlaps the top edge now, so the padding only has to clear the
     close button rather than the artwork. */
  .auth-modal__card {
    padding-block-start: 3.5rem;
    padding-inline: max(1.55rem, calc((100% - 27rem) / 2));
    border-block-end: 0;
    border-radius: var(--auth-radius) var(--auth-radius) 0 0;
    box-shadow: 0 -0.9rem 2.4rem rgba(0, 0, 0, 0.55);
  }

  .auth-modal__card::after {
    content: none;
  }

  /* Clear both the action bar and the lobby disc that overhangs it. */
  .auth-modal__alt {
    margin: 0;
    padding: 1.15rem 1rem calc(var(--auth-action-bar) + 3.2rem + env(safe-area-inset-bottom));
    background: var(--auth-body);
  }
}

/* Short windows: the full dialog is ~936px tall, so on a laptop or a phone in
   landscape the affiliate field, toast and Sign Up button fall below the fold.
   Shrink the art and the control heights so the whole form stays on screen. */
@media (max-height: 52rem) {
  .auth-modal__art {
    max-width: 14rem;
    margin-block-end: -1.6rem;
  }

  .auth-modal__card {
    padding-block: 2.3rem 1.35rem;
  }

  .auth-modal__lede {
    margin-block-end: 1rem;
  }

  .auth-form {
    gap: 0.45rem;
  }

  .auth-field,
  .auth-country__toggle,
  .auth-form__verify {
    min-height: 2.9rem;
  }

  .auth-form__submit {
    min-height: 3.1rem;
  }

  .auth-modal__legal {
    margin-block-start: 0.8rem;
  }
}

/* Keep the sheet itself compact too, so the log-in line below the card never
   scrolls down into the lobby disc that overhangs the action bar. */
@media (max-width: 64rem) and (max-height: 52rem) {
  /* The block above trims the card's top padding to claw back height, but on a
     sheet that padding is what keeps the title clear of the close button. */
  .auth-modal__card {
    padding-block-start: 3.5rem;
  }

  .auth-modal__alt {
    padding-block-start: 0.75rem;
  }
}

/* Below this the three controls no longer fit on one line. */
@media (max-width: 23rem) {
  .auth-form__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .auth-form__verify {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-modal__scrim,
  .auth-modal__shell {
    transition-duration: 1ms;
  }
}