/* ================== Logged-out screens (auth) ====================
   Login + the four password-reset steps. Split screen per the design guide:
   photo and quote on the left, a white card on a light background on the
   right. The palette variables are the dashboard's, so the two stay in step.
   ================================================================= */
:root {
  /* --bo-auth-photo is set inline by the template, which is the only place
     that can resolve {% static %}. The flat colour under it shows while the
     photo loads and is the whole pane if it ever fails — a login must not
     depend on an image. */
  --bo-auth-aside-bg: #0a0d14;
  /* Darker than the dashboard's own --bo-bg: here it's a backdrop for a single
     white card, which needs the contrast to read as raised. */
  --bo-auth-bg: #e4e9f0;
}

.bo-auth {
  min-height: 100vh;
  display: flex;
  background: var(--bo-auth-bg);
}

/* ---- left: photo + quote (decorative) ---- */
.bo-auth__aside {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  background-color: var(--bo-auth-aside-bg);
  background-image: var(--bo-auth-photo);
  background-size: cover;
  /* Landscape source in a portrait pane, so `cover` crops top and bottom. The
     lit court sits in the lower half — anchoring there keeps it in frame
     instead of filling the pane with dark empty stands. */
  background-position: center 68%;
}
/* Darkening wash: the quote is white and the court is bright blue, so the
   photo alone can't guarantee the contrast behind it. Heavier at the bottom,
   where the text sits. */
.bo-auth__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The arena shot is already dark, so this stays light — it only has to stop
     the quote from landing on the bright blue court behind it. */
  background: linear-gradient(180deg, rgba(6, 20, 34, .2) 0%, rgba(6, 20, 34, 0) 40%, rgba(6, 20, 34, .55) 100%);
}
.bo-auth__brand,
.bo-auth__quote { position: relative; z-index: 1; }

/* The logo asset is wide (wordmark + icon), so it is sized by width: a height
   alone blows it up past the pane. */
.bo-auth__brand { width: 150px; height: auto; display: block; }
.bo-auth__quote {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
}

/* ---- right: the card ---- */
.bo-auth__panel {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.bo-auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--bo-card);
  border-radius: 18px;
  padding: 36px 34px 30px;
  box-shadow: var(--bo-shadow-md);
  text-align: center;
}
/* The dark-lettered logo sits straight on the card — no plate behind it. Sized
   by width: it's a wide wordmark, so a height would blow it up. */
.bo-auth__mark {
  width: 132px; height: auto;
  display: block;
  margin: 0 auto 22px;
}
.bo-auth__title {
  margin: 0;
  font-size: 23px; font-weight: 700; letter-spacing: -.01em;
  color: var(--bo-text);
}
.bo-auth__sub {
  margin: 7px 0 24px;
  font-size: 13px; line-height: 1.5;
  color: var(--bo-mute);
}
.bo-auth__sub:empty { display: none; }

/* ---- form controls ---- */
/* Placeholders carry the field name (as in the guide), so the labels are for
   screen readers only — never removed, or the inputs become unlabelled. */
.bo-auth__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.bo-auth__input {
  width: 100%;
  background: var(--bo-card);
  border: 1px solid var(--bo-border-strong);
  border-radius: 10px;
  padding: 13px 15px;
  margin-bottom: 12px;
  color: var(--bo-text);
  font-family: inherit;
  font-size: 14px;
}
.bo-auth__input::placeholder { color: var(--bo-faint); }
.bo-auth__input:focus {
  outline: none;
  border-color: var(--bo-cyan);
  box-shadow: 0 0 0 3px rgba(var(--bo-cyan-rgb), .16);
}

.bo-auth__submit {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--bo-cyan);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px; font-weight: 700;
  padding: 13px;
  margin-top: 6px;
  cursor: pointer;
}
.bo-auth__submit:hover { filter: brightness(1.05); }
.bo-auth__submit:disabled { opacity: .55; cursor: default; }
/* The "done" screen's call to action is a link wearing the button. */
.bo-auth__submit--link { display: block; text-align: center; text-decoration: none; }

.bo-auth__link {
  display: inline-block;
  margin: 4px 0 2px;
  font-size: 12.5px; font-weight: 500;
  color: var(--bo-cyan-ink);
  text-decoration: underline;
}
.bo-auth__link:hover { color: var(--bo-text); }
/* Prose on the reset steps ("check your email", …). */
.bo-auth__text {
  margin: 0 0 20px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--bo-text-2);
}
.bo-auth__alert {
  background: var(--bo-bad-bg);
  border: 1px solid rgba(194, 65, 12, .3);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--bo-bad);
  text-align: left;
}

/* Narrow screens: the photo is decoration, so drop it and give the form the
   whole viewport rather than stacking a tall image above it. */
@media (max-width: 900px) {
  .bo-auth__aside { display: none; }
  .bo-auth__panel { flex: 1 1 100%; }
}