/* Buyer authentication pages: the wider, centered composition of the reference storefront. */
body.auth-route .cat-nav { display: none; }
body.auth-route { background: #f0f0f2; }

main.auth-reference-page {
  width: min(52rem, calc(100% - 2rem));
  padding: 3rem 0 5rem;
}

.auth-reference-card.auth {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 2px 18px rgba(31, 27, 39, .07);
  padding: 2.1rem 3.7rem 2.4rem;
}

.auth-reference-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .08rem;
  margin: 0 0 1.65rem;
  text-align: center;
  text-transform: uppercase;
}
.auth-reference-heading span { font-size: .76rem; font-weight: 600; color: #414047; letter-spacing: .06em; }
.auth-reference-heading strong { font-size: clamp(1.6rem, 3vw, 2.05rem); line-height: 1.1; color: var(--accent); letter-spacing: -.04em; }
.auth-reference-heading small { font-size: .78rem; font-weight: 500; color: #65656b; text-transform: none; }

.auth-reference-card form { display: grid; gap: .4rem; }
.auth-reference-card label { margin-top: .42rem; font-size: .9rem; color: #49494e; }
.auth-reference-card input[type="email"],
.auth-reference-card input[type="password"],
.auth-reference-card input[type="text"],
.auth-reference-card input:not([type]) {
  height: 44px;
  border: 1px solid #dedee2;
  border-radius: 4px;
  background: #fff;
  padding: .6rem .8rem;
  font-size: .92rem;
}
.auth-reference-card input:focus { outline: 2px solid rgba(239, 96, 61, .22); border-color: var(--accent); }
.auth-password-field { position: relative; }
.auth-password-field input { padding-right: 3rem !important; }
.auth-password-toggle {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #77777d;
  cursor: pointer;
}
.auth-password-toggle:hover { color: var(--accent); }
.auth-password-toggle:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.auth-forgot { margin: -.1rem 0 .65rem; text-align: right; font-size: .82rem; }
.auth-turnstile { margin: .2rem 0 .4rem; }
.auth-forgot a, .auth-signup a { color: var(--accent); text-decoration: none; }
.auth-forgot a:hover, .auth-signup a:hover { text-decoration: underline; }
.auth-reference-card .auth-submit {
  justify-self: center;
  width: min(18rem, 100%);
  min-height: 48px;
  padding: .65rem 1rem;
  border-radius: 3px;
  background: var(--accent);
  font-size: .95rem;
  font-weight: 600;
}
.auth-reference-card .auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-reference-card .auth-signup { margin: 1.15rem 0 1.5rem; text-align: left; color: #595960; font-size: .88rem; }

.auth-reference-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 12.5rem;
  overflow: hidden;
  padding: 1.3rem 2.4rem;
  color: #fff;
  background: radial-gradient(circle at 82% 120%, #f9d064 0 26%, transparent 26.5%),
              radial-gradient(circle at 98% -22%, #ffad31 0 32%, transparent 32.5%),
              linear-gradient(115deg, #f0583b, #f88743 72%, #f7a444);
}
.auth-reference-promo::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 8%;
  width: 8rem;
  height: 8rem;
  border: 1.1rem solid rgba(255,255,255,.18);
  border-radius: 50%;
}
.auth-reference-promo .promo-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.auth-reference-promo strong { z-index: 1; font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.1; font-weight: 900; font-style: italic; letter-spacing: -.05em; }
.auth-reference-promo .promo-disc { position: absolute; right: 18%; bottom: .8rem; font-size: 4.8rem; line-height: 1; font-weight: 800; opacity: .28; }
.auth-reference-promo .promo-disc small { font-size: 1rem; }

.auth-reference-totp { min-height: 23rem; }
.auth-reference-totp h1 { margin: .5rem 0 1rem; text-align: center; font-size: 1.55rem; }
.auth-reference-totp .lede { margin: 0 auto 1.25rem; text-align: center; }
.auth-reference-totp .btn { justify-self: center; width: min(18rem, 100%); min-height: 48px; margin-top: 1rem; }

@media (min-width: 721px) {
  body.auth-route .header-tools { display: none; }
  body.auth-route .header-bar { grid-template-columns: auto minmax(18rem, 1fr); }
}

@media (max-width: 720px) {
  body.auth-route .topbar { display: none; }
  main.auth-reference-page { width: calc(100% - 2rem); padding: 3.7rem 0 5rem; }
  .auth-reference-card.auth { padding: 1.25rem 2rem 2rem; background: rgba(255,255,255,.9); }
  .auth-reference-heading { margin-bottom: 1.35rem; }
  .auth-reference-heading strong { font-size: 1.55rem; }
  .auth-reference-card label { font-size: .84rem; }
  .auth-reference-card input[type="email"],
  .auth-reference-card input[type="password"],
  .auth-reference-card input[type="text"] { height: 42px; }
  .auth-reference-card .auth-submit { min-height: 52px; width: 100%; }
  .auth-reference-card .auth-signup { margin: 1rem 0; font-size: .82rem; }
  .auth-reference-promo { min-height: 9rem; padding: 1.1rem; }
  .auth-reference-promo strong { font-size: 2.15rem; }
}

@media (max-width: 380px) {
  .auth-reference-card.auth { padding-inline: 1.3rem; }
}