/* ===========================================================================
   Speedway Manager — login / registration screen
   Design tokens live in css/tokens.css, which this page links first.

   One scrolling column over a blurred stadium: brand, sign-in card (with the
   cover art as its header), registration card, legal line.
   =========================================================================== */

html, body { min-height: 100%; margin: 0; }

body.login {
  background: #0a0e14;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* ---- backdrop ----
   assets/stadium-blur.png is pre-blurred by tools/build-login-assets.js rather
   than filtered here: a CSS blur of a full-page image costs a repaint on every
   scroll and leaves washed-out edges. The gradient on top keeps the cards
   readable wherever the photo happens to be bright. */

.login__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(6, 9, 14, .36) 0%,
      rgba(6, 9, 14, .53) 52%,
      rgba(6, 9, 14, .75) 100%),
    url("../assets/stadium-blur.png") center / cover no-repeat,
    #0a0e14;
}

.login__wrap {
  width: 100%;
  max-width: 452px;
  margin: 0 auto;
  padding: 46px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 26px;
}

/* ============================== brand ============================== */

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 0 2px;
}

.brand__link {
  display: block;
  line-height: 0;
  text-decoration: none;
  border-radius: 17px;
}

.brand__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.brand__badge {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: linear-gradient(145deg, #ff9c3e 0%, #f2801a 52%, #d96b10 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 -1px 0 rgba(0, 0, 0, .24),
    0 6px 22px rgba(216, 108, 18, .40);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(120, 52, 0, .55);
  user-select: none;
}

.brand__name {
  margin: 18px 0 0;
  font-size: 33px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .6);
}

.brand__tag {
  margin: 9px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .215em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

/* ============================== cards ============================== */

.card {
  background: rgba(18, 22, 29, .88);
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .48);
  overflow: hidden;
}

@supports (backdrop-filter: blur(2px)) {
  .card { background: rgba(18, 22, 29, .78); backdrop-filter: blur(7px); }
}

/* cover art sits flush to the card's top corners */
.card__art { margin: 0; display: block; }

.card__art img {
  display: block;
  width: 100%;
  height: auto;
}

.card__body { padding: 26px 28px 22px; }

.card__title {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: .015em;
  text-transform: uppercase;
  line-height: 1.1;
}

.card__lead {
  margin: 7px 0 22px;
  font-size: 13px;
  color: var(--ink-2);
}

.card__foot {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  text-align: center;
}

/* ============================== form ============================== */

.form { display: flex; flex-direction: column; gap: 15px; }

.field { display: flex; flex-direction: column; gap: 7px; }

.field__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.field__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .165em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field__aside {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.field__aside:hover { text-decoration: underline; }

.field__input {
  width: 100%;
  height: 47px;
  padding: 0 15px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.field__input::placeholder { color: #5d6878; }

.field__input:hover { border-color: rgba(255, 255, 255, .18); }

.field__input:focus {
  outline: none;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 201, 60, .55);
  box-shadow: 0 0 0 3px rgba(255, 201, 60, .13);
}

/* password + confirmation share one row */
.field--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 14px;
}

.field--split > div { display: flex; flex-direction: column; gap: 7px; }
.field--split .field__error { grid-column: 1 / -1; }

.field__input.is-bad {
  border-color: rgba(232, 90, 74, .65);
  background: rgba(232, 90, 74, .07);
}

.field__input.is-bad:focus {
  border-color: rgba(232, 90, 74, .8);
  box-shadow: 0 0 0 3px rgba(232, 90, 74, .15);
}

.field__error {
  margin: 0;
  font-size: 11.5px;
  color: #f08b7e;
}

/* ---- checkbox (terms acceptance) ---- */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.checkbox__input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.checkbox__input.is-bad { outline: 2px solid rgba(232, 90, 74, .65); outline-offset: 2px; }

.checkbox__label {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.checkbox__label a { color: var(--accent); text-decoration: underline; }
.checkbox__label a:hover { color: var(--ink); }

/* ---- buttons ---- */

.btn {
  appearance: none;
  width: 100%;
  height: 52px;
  margin-top: 6px;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .155em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .18s ease, transform .1s ease, box-shadow .18s ease;
}

.btn:active { transform: translateY(1px); }

/* sign in — the one action the page is really for */
.btn--go {
  background: linear-gradient(90deg, #f9c123 0%, #f79a1c 52%, #ef7a17 100%);
  color: #2a1704;
  box-shadow: 0 6px 20px rgba(239, 122, 23, .30);
}

.btn--go:hover { filter: brightness(1.07); }

/* create account — deliberately quieter than signing in */
.btn--found {
  background: rgba(255, 255, 255, .075);
  border: 1px solid rgba(255, 255, 255, .13);
  color: var(--ink);
}

.btn--found:hover { background: rgba(255, 255, 255, .11); }

.btn[aria-busy="true"] { pointer-events: none; filter: saturate(.55) brightness(.85); }

.form__note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 10px 12px;
  background: rgba(255, 201, 60, .08);
  border: 1px solid rgba(255, 201, 60, .22);
  border-radius: 8px;
}

/* ---- divider with a caption ---- */

.rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  color: var(--ink-3);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.rule::before,
.rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, .10);
}

.link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.link:hover { text-decoration: underline; }

/* ============================== legal ============================== */

.login__legal {
  margin: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  color: #66717f;
}

.login__legal a { color: #8b95a4; text-decoration: underline; }
.login__legal a:hover { color: var(--ink-2); }

/* ============================ responsive ============================ */

@media (max-width: 460px) {
  .login__wrap { padding: 30px 12px 28px; gap: 20px; }
  .brand__badge { width: 54px; height: 54px; border-radius: 15px; font-size: 20px; }
  .brand__name { font-size: 26px; letter-spacing: .06em; }
  .brand__tag { font-size: 9.5px; letter-spacing: .17em; }
  .card__body { padding: 22px 18px 18px; }
  .card__title { font-size: 23px; }
  .field--split { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .field__input, .btn { transition: none; }
  html { scroll-behavior: auto !important; }
}