/* ============================================================
   Log in, sign up and reset password, matched to detailbook.co.uk.

   These pages are where someone lands from the marketing site, so they
   wear the site's look rather than the app's: the dark homepage hero,
   Plus Jakarta Sans and the site's gradient. They look the same in light
   and dark mode, so nothing here depends on the theme, and the form
   itself stays on a white card.

   Linked last on login.html, register.html and reset-password.html.
   Hex values live in the token block below and nowhere else.
   ============================================================ */

body.auth-site {
  /* The site's own colours (MARKETING-SITE-DESIGN-RULES.md, marketing repo). */
  --site-night: #0D0B18;
  --site-bar: rgba(14, 11, 28, 0.88);
  --site-hairline: rgba(255, 255, 255, 0.07);
  --site-glass: rgba(255, 255, 255, 0.07);
  --site-glass-line: rgba(255, 255, 255, 0.16);
  --site-text: #FFFFFF;
  --site-text-soft: rgba(255, 255, 255, 0.72);
  --site-lilac: #D8D2FF;
  --site-lilac-soft: #C4B5FD;
  --site-lilac-dot: #A99BFF;
  --site-gradient: linear-gradient(135deg, #667eea, #764ba2);
  --site-gradient-text: linear-gradient(105deg, #A99BFF 0%, #C4B5FD 50%, #8B5CF6 100%);
  --site-glow-violet: rgba(118, 75, 162, 0.42);
  --site-glow-indigo: rgba(102, 126, 234, 0.2);
  --site-hero-top: #141028;
  --site-link-on-white: #5B4FD6;

  /* The same design tokens the pages already use, pointed at the site. */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-extrabold: 600;
  --fw-bold: 600;
  --brand: var(--site-link-on-white);
  --brand-gradient: var(--site-gradient);
  --r-sm: 11px;
  --r-md: 13px;

  color-scheme: light only;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 0;
  background-color: var(--site-night);
  background-image:
    radial-gradient(620px 460px at 74% 46%, var(--site-glow-violet) 0, transparent 68%),
    radial-gradient(620px 380px at 6% 0, var(--site-glow-indigo) 0, transparent 70%),
    linear-gradient(170deg, var(--site-hero-top) 0, var(--site-night) 70%);
  background-attachment: fixed;
}

body.auth-site strong {
  font-weight: 600;
}

/* theme.css gives dark mode its own body background, which has to lose here. */
html[data-theme="dark"] body.auth-site {
  background-color: var(--site-night);
  background-image:
    radial-gradient(620px 460px at 74% 46%, var(--site-glow-violet) 0, transparent 68%),
    radial-gradient(620px 380px at 6% 0, var(--site-glow-indigo) 0, transparent 70%),
    linear-gradient(170deg, var(--site-hero-top) 0, var(--site-night) 70%);
  background-attachment: fixed;
}

/* ── top bar, as on the homepage ───────────────────────────────────── */
.auth-bar {
  flex: none;
  height: 72px;
  background: var(--site-bar);
  border-bottom: 1px solid var(--site-hairline);
}

.auth-bar-in {
  max-width: 1140px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-logo img {
  display: block;
  height: 38px;
  width: auto;
}

.auth-bar-link {
  color: var(--site-text);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.auth-bar-cta {
  padding: 10px 18px;
  border-radius: 11px;
  background: var(--site-gradient);
  color: var(--site-text);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(102, 126, 234, 0.32);
}

/* ── two columns: the promise on the left, the form on the right ───── */
.auth-layout {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 32px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 448px;
  grid-template-rows: auto 1fr;
  column-gap: 72px;
  align-items: start;
}

.auth-pitch {
  grid-column: 1;
  grid-row: 1;
  padding-top: 32px;
  color: var(--site-text);
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--site-glass);
  border: 1px solid var(--site-glass-line);
  color: var(--site-lilac);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--site-lilac-dot);
  box-shadow: 0 0 0 3px rgba(169, 155, 255, 0.18);
}

.auth-pitch h1 {
  color: var(--site-text);
  font-size: 50px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.auth-hl {
  background: var(--site-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-pitch > p {
  margin-top: 16px;
  color: var(--site-text-soft);
  font-size: 17px;
  line-height: 1.65;
}

.auth-pitch .trust-bullets {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.auth-pitch .trust-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--site-text);
  font-size: 15.5px;
  font-weight: 600;
}

.auth-pitch .trust-bullets .tick {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--site-glass);
  border: 1px solid var(--site-glass-line);
  color: var(--site-lilac-soft);
}

.auth-pitch .trust-bullets .tick svg {
  width: 15px;
  height: 15px;
}

/* ── the white form card ───────────────────────────────────────────── */
.auth-layout > .login-container,
.auth-layout > .register-container,
.auth-layout > .reset-container {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  max-width: none;
  padding: 32px;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

/* ── the review under the promise (sign up only) ───────────────────── */
.auth-layout > .single-testimonial {
  grid-column: 1;
  grid-row: 2;
  max-width: 440px;
  margin: 32px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--site-hairline);
  text-align: left;
}

.auth-layout > .single-testimonial blockquote {
  color: var(--site-text-soft);
}

.auth-layout > .single-testimonial figcaption,
.auth-layout > .single-testimonial figcaption strong {
  color: var(--site-text-soft);
}

/* footer.js pins itself to the screen, which on a page this long would float
   its links over the form. It sits at the end of the page instead. */
body.auth-site #site-footer {
  flex: none;
  position: static !important;
  background: transparent !important;
  border-top-color: var(--site-hairline) !important;
  color: var(--site-text-soft) !important;
}

body.auth-site #site-footer p,
html body.auth-site #site-footer a.footer-link {
  color: var(--site-text-soft) !important;
}

/* ── phones ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .auth-bar { height: 60px; }
  .auth-bar-in { padding: 0 20px; }
  .auth-logo img { height: 30px; }
  .auth-bar-link,
  .auth-bar-cta { font-size: 13.5px; }
  .auth-bar-cta { padding: 9px 14px; }

  .auth-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    align-content: start;
    max-width: 460px;
    padding: 24px 16px calc(40px + env(safe-area-inset-bottom, 0px));
    row-gap: 20px;
  }

  .auth-pitch {
    grid-column: 1;
    grid-row: auto;
    padding: 0 4px;
  }

  .auth-eyebrow { display: none; }
  .auth-pitch h1 { font-size: 30px; line-height: 1.1; }
  .auth-pitch > p { margin-top: 8px; font-size: 15.5px; }
  .auth-pitch .trust-bullets { margin-top: 14px; gap: 8px; }
  .auth-pitch .trust-bullets li { font-size: 14px; }
  .auth-pitch .trust-bullets .tick { width: 24px; height: 24px; border-radius: 7px; }
  .auth-pitch .trust-bullets .tick svg { width: 13px; height: 13px; }

  .auth-layout > .login-container,
  .auth-layout > .register-container,
  .auth-layout > .reset-container {
    grid-column: 1;
    grid-row: auto;
    padding: 22px 18px;
    border-radius: 18px;
  }

  .auth-layout > .single-testimonial {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    margin: 4px 4px 0;
  }
}

@media (max-width: 480px) {
  body.auth-site .form-row {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }
}