/* ==========================================================================
   auth.css: layout for the login and signup pages
   Field styles (inputs, labels, errors) live in page.css with the shared .field rules.
   Signature shape for these pages: a flat gold block offset behind the form card.
   ========================================================================== */

/* .section.auth (two classes) beats a plain .section background regardless of
   which stylesheet loads first. Sand follows the warm-white page hero. */
.section.auth {
  background: var(--white);
  /* Safety net: the gold block pokes out of the card, and clip (unlike hidden)
     stops any overshoot from causing sideways scroll without making a scroll container. */
  overflow-x: clip;

  /* Error colour for alerts on these pages. Replace this value with whatever
     page.css uses for .field__error so form errors and alerts match. */
  --auth-error: #9b2c1f;
}

.auth__grid {
  display: grid;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
  /* How far the gold block is pushed out. Kept under the 1.25rem page margin on
     small screens so it can never create horizontal scroll at 360px. */
  --auth-offset: 1rem;
}

/* Two columns from 900px; form first, info second. Below that they stack. */
@media (min-width: 900px) {
  .auth__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    --auth-offset: 1.5rem;
  }
}

/* ---- Form card with the offset gold block ---- */

/* The block sits on this wrapper, not on the card itself. A ::before with
   z-index -1 inside the card would paint OVER the card's own background. */
.auth__stage {
  position: relative;
  isolation: isolate;
  max-width: 36rem;
}

.auth__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s3), 4vw, var(--s4));
}

.auth__form {
  display: grid;
  gap: var(--s3);
}

/* Full-width primary action, easy to hit on a phone. */
.auth__form .btn {
  width: 100%;
  justify-content: center;
  cursor: pointer;
}

/* Secondary links under the form, separated by a hairline rather than a box. */
.auth__alt {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s1);
  color: var(--muted);
}

.auth__alt p {
  margin: 0;
}

.auth__legal {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
}

.auth__legal a {
  color: var(--green);
  font-weight: 700;
}

/* ---- Alerts and messages above the form ---- */

.auth__alert,
.auth__notice {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  font-weight: 600;
}

.auth__alert p,
.auth__notice p {
  margin: 0;
}

/* Form-level errors (for example "wrong email or password"). */
.auth__alert,
.auth__notice--error {
  border: 1px solid var(--auth-error);
  color: var(--auth-error);
  background: var(--white);
}

/* Django messages: success, info, warning use the calm green treatment. */
.auth__notice {
  border: 1px solid var(--green);
  color: var(--green-ink);
  background: var(--cream);
  margin-bottom: var(--s3);
}

.auth__notice--error {
  /* Keeps the error colours above, and still gets the spacing from .auth__notice. */
  border-color: var(--auth-error);
  color: var(--auth-error);
  background: var(--white);
}

/* ---- Green info aside ---- */

.auth__aside {
  background: var(--green);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s3), 4vw, var(--s4));
}

/* Base heading colour is --green-ink, which disappears on green; reset it here. */
.auth__aside h2 {
  color: var(--cream);
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 0 0 var(--s3);
}

.auth__points {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Hairline rules between points (rules over boxes). */
.auth__points li {
  padding: var(--s3) 0;
  border-top: 1px solid rgba(247, 243, 232, 0.14);
}

.auth__points li:first-child {
  border-top: 0;
  padding-top: 0;
}

.auth__points li:last-child {
  padding-bottom: 0;
}

.auth__points h3 {
  color: var(--cream);
  margin: 0 0 var(--s1);
}

.auth__points p {
  margin: 0;
  opacity: 0.85;
  max-width: 36rem;
}

/* ---- Help text under a field (the existing partial has none) ---- */

/* Django renders password rules as a <ul>, so style the list as well. */
.auth .field__help {
  font-size: 0.95rem;
  color: var(--muted);
}

.auth .field__help ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* ==========================================================================
   Single-card account pages (password reset flow, later email confirmation)
   Used by account/auth_base.html
   ========================================================================== */

/* One centred card instead of form + aside. */
.auth__grid--single {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.auth__grid--single .auth__stage {
  width: 100%;
  max-width: 34rem;
}

.auth__title {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  margin: 0 0 var(--s2);
}

/* Short explanatory paragraph under the title. */
.auth__lead {
  color: var(--muted);
  margin: 0 0 var(--s3);
}

/* Full-width link styled as a button (for example "Request a new link"). */
.auth__action {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

/* ---- Checkbox fields (e.g. Remember me): box and label on one line ---- */
.auth .field:has(input[type="checkbox"]) {
  display: flex;
  flex-direction: row-reverse; /* input comes after the label in the DOM */
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1);
}

.auth .field input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex: none;
  accent-color: var(--green);
  cursor: pointer;
}

.auth .field:has(input[type="checkbox"]) label {
  margin: 0;
  cursor: pointer;
}

/* Help text and errors drop onto their own line below the checkbox. */
.auth .field:has(input[type="checkbox"]) .field__help,
.auth .field:has(input[type="checkbox"]) .field__error {
  flex-basis: 100%;
  order: 3;
}