/* Sign-in. Shares the Zona Zero identity with the landing page — the same
   wordmark bar, the same lime — over a full-bleed training photograph.

   Type comes from the system stack rather than a web font: core assets are
   local and production carries no CDN dependency. */

:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  --lime: #a6ce00;
  --ink: #171819;
  --bar: #f2f2f2;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: #1b1b1b;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

a { color: inherit; }

:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }

/* ------------------------------------------------------------------ header */

.login-header {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4rem;
  padding: 0.75rem 1.5rem;
  background: var(--bar);
}

.login-header .wordmark {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-decoration: none;
  white-space: nowrap;
}

/* -------------------------------------------------------------------- stage */

.login-stage {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
}

.login-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The photograph is portrait and its subject — the hands on the bars — sits
     in the upper third. A centred crop on a wide screen keeps only the blurred
     field, so the frame is pulled up to hold the rider. */
  object-position: center 26%;
}

/* Keeps the card readable over whichever part of the photograph sits behind
   it, without darkening the image into mud. */
.login-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(10 10 10 / 22%);
  pointer-events: none;
}

/* --------------------------------------------------------------------- card */

.login-card {
  width: min(25.6rem, 100%);
  padding: 2rem clamp(1.2rem, 4vw, 2.4rem) 2.2rem;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 1.2rem;
  background: rgb(236 236 236 / 58%);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 24px 60px rgb(0 0 0 / 28%);
}

/* Where the browser cannot blur, a more opaque panel keeps the same contrast
   instead of leaving the text floating on the photograph. */
@supports not (backdrop-filter: blur(1px)) {
  .login-card { background: rgb(238 238 238 / 92%); }
}

.login-card h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(1.25rem, 3.6vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.login-form label {
  font-size: 0.8125rem;
  font-weight: 400;
}

.login-form label + input { margin-bottom: 0.8rem; }

.login-form input {
  width: 100%;
  /* 20% of 3rem would be 38px — under the 44px touch target this form is
     used at on a phone, so the height stops there while the rest scales. */
  min-height: 2.75rem;
  padding: 0 0.8rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 0.6rem;
  background: rgb(255 255 255 / 52%);
}

.login-form input:focus { background: rgb(255 255 255 / 76%); }

.login-submit {
  align-self: center;
  width: min(11.2rem, 100%);
  min-height: 2.75rem;
  margin-top: 0.8rem;
  padding: 0 1.2rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--lime);
  border: 0;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition: background 150ms ease;
}

.login-submit:hover { background: #f4f4f4; }
.login-submit[disabled] { cursor: progress; opacity: 0.72; }

/* A forgotten password must not be a locked door: this is the only way back
   in, since accounts cannot be created from here. */
.login-recovery {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.4rem;
  font: inherit;
  font-size: 0.8125rem;
  color: #3d3d3d;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  border: 0;
  background: none;
  cursor: pointer;
}

.login-recovery:hover { color: var(--ink); }

.login-message {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  text-align: center;
  line-height: 1.4;
}

.login-message[role="alert"] { color: #8c1d13; font-weight: 700; }

/* ------------------------------------------------------------------ mobile */

/* Same treatment as the landing page's header at this width, and the same
   breakpoint: the wordmark sits over the photograph at the top left and the
   dark bar dissolves into it, instead of a solid strip with a hard seam. It
   scrolls with the page rather than staying fixed. */
@media (max-width: 900px) {
  body { position: relative; }

  .login-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    min-height: 4.5rem;
    justify-content: flex-start;
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1.5rem 1.75rem;
    background: linear-gradient(
      180deg,
      rgb(17 17 17 / 92%) 0%,
      rgb(17 17 17 / 78%) 38%,
      rgb(17 17 17 / 38%) 72%,
      rgb(17 17 17 / 0%) 100%
    );
  }

  /* The 44px row is what puts the wordmark at the same height as on the
     landing page, where the sign-in link sets that row. It also gives the
     home link a touch target of its own. */
  .login-header .wordmark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 1.25rem;
    color: #fff;
  }

  /* The header no longer takes height from the flow, so the photograph and the
     card own the whole viewport. */
  .login-stage { padding-top: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .login-submit { transition: none; }
}