/* Sign-in page. Tokens, fonts, buttons and focus rings come from style.css.
   The pitch is always a night pitch (both themes): the form side follows the theme. */

.login-page {
  --night: #0E1512;
  --grass: #13201A;
  --mow-a: #15241D;
  --mow-b: #122019;
  --chalk: rgba(243, 244, 246, 0.26);
  --run-red: #FF3B30;
  --run-gold: #E5C36A;
  --run-chalk: #F3F4F6;
  min-height: 100vh;
  min-height: 100dvh;
}

.login {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(420px, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Pitch ------------------------------------------------------------------ */

.login-pitch {
  position: relative;
  overflow: hidden;
  background: var(--night);
  perspective: 1500px;
  isolation: isolate;
}

.pitch-stage {
  position: absolute;
  inset: -6% -16% -26%;
  transform: rotateX(46deg);
  transform-origin: 50% 58%;
}

.pitch {
  display: block;
  width: 100%;
  height: 100%;
}

/* Horizon fade at the top, a dark floor under the caption, a soft corner vignette. */
.login-pitch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--night) 0%, rgba(14, 21, 18, 0) 26%),
    linear-gradient(to top, rgba(14, 21, 18, 0.94) 0%, rgba(14, 21, 18, 0) 38%),
    radial-gradient(120% 90% at 50% 60%, rgba(14, 21, 18, 0) 55%, rgba(14, 21, 18, 0.7) 100%);
}

/* Floodlight: a soft pool of light on the near half, the far end falls into the night. */
.login-pitch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(70% 55% at 50% 62%, rgba(229, 195, 106, 0.07), rgba(229, 195, 106, 0) 70%);
}

.pitch .grass { fill: #101A15; }
.pitch .mow-a { fill: var(--mow-a); }
.pitch .mow-b { fill: var(--mow-b); }

.pitch .lines {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 2.5;
}

.pitch .lines .spot {
  fill: var(--chalk);
  stroke: none;
}

.pitch .sprint { --run: var(--run-red); }
.pitch .gold { --run: var(--run-gold); }
.pitch .chalk { --run: var(--run-chalk); }

/* The run's history as GPS sample points. */
.pitch .ghost {
  fill: none;
  stroke: var(--run);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 0 13;
  opacity: 0.22;
}

/* The run drawing itself: drawn by default, so it stays visible when motion is reduced. */
.pitch .trace {
  fill: none;
  stroke: var(--run);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: run 9s linear infinite backwards;
}

.pitch .chalk.trace { stroke-width: 4; }
.pitch .d2 { animation-delay: 1.4s; }
.pitch .d3 { animation-delay: 2.8s; }
.pitch .d4 { animation-delay: 4.2s; }
.pitch .d5 { animation-delay: 5.6s; }
.pitch .d6 { animation-delay: 7s; }

@keyframes run {
  0% { stroke-dashoffset: 1; opacity: 1; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  70% { opacity: 0.75; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.pitch .head {
  fill: var(--run);
  stroke: #fff;
  stroke-width: 2.5;
}

@media (prefers-reduced-motion: reduce) {
  .pitch .heads { display: none; }
}

.pitch-caption {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  bottom: clamp(24px, 4vw, 52px);
  z-index: 2;
}

.pitch-wordmark {
  display: block;
  width: clamp(200px, 22vw, 300px);
  height: auto;
}

.pitch-club {
  margin: 14px 0 0;
  color: var(--run-gold);
  font: 24px/1 var(--font-display);
  letter-spacing: 0.08em;
}

/* Form ------------------------------------------------------------------- */

.login-page main.login-panel {
  margin: 0; /* style.css offsets <main> for the app sidebar */
}

.login-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 5vw, 64px) clamp(24px, 4.5vw, 72px) 28px;
  background: var(--canvas);
}

.login-body {
  width: 100%;
  max-width: 380px;
  margin: auto 0;
  padding: 40px 0 32px;
}

.login-mark {
  display: block;
  width: 40px;
  height: auto;
}

.login-mark.on-light { display: none; }
:root[data-theme="light"] .login-mark.on-dark { display: none; }
:root[data-theme="light"] .login-mark.on-light { display: block; }

.login-panel h1 {
  margin: 28px 0 10px;
  color: var(--ink);
  font: 400 clamp(60px, 5.6vw, 84px)/0.88 var(--font-display);
  letter-spacing: 0.01em;
}

.login-lede {
  margin: 0 0 36px;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

.field + .field { margin-top: 18px; }

.field label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.login-form input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px; /* 16px keeps iOS from zooming into the field */
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}

.login-form input:hover { border-color: var(--ink-3); }

.login-form input:focus-visible {
  outline: none;
  border-color: var(--nav-heading);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nav-heading) 30%, transparent);
}

/* Claret means "this field is wrong"; focus uses gold so the two never look alike. */
.login-form input[aria-invalid="true"] { border-color: var(--claret-bright); }

.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--accent-text);
  box-shadow: 0 0 0 100px var(--surface) inset;
}

.login-form input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--surface) inset, 0 0 0 3px color-mix(in srgb, var(--nav-heading) 30%, transparent);
}

.password-wrap { position: relative; }
.password-wrap input { padding-right: 56px; }

.reveal {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
}

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

.reveal svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reveal .eye-shut,
.reveal[aria-pressed="true"] .eye-open { display: none; }
.reveal[aria-pressed="true"] .eye-shut { display: block; }

.caps-hint {
  margin: 8px 0 0;
  color: var(--nav-heading);
  font-size: 13px;
  font-weight: 600;
}

.login-error {
  margin: 18px 0 0;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--claret-tint);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.login-error:empty { display: none; }

.login-submit {
  position: relative;
  width: 100%;
  min-height: 52px;
  margin-top: 24px;
  border-radius: 8px;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.login-submit .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.login-submit[aria-busy="true"] { cursor: progress; }
.login-submit[aria-busy="true"] .spinner { display: inline-block; }
.login-submit:disabled { opacity: 1; }

@keyframes spin { to { transform: rotate(360deg); } }

.login-help {
  margin: 28px 0 0;
  color: var(--ink-3);
  font-size: 13.5px;
}

.login-foot {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--ink-3);
  font-size: 12.5px;
}

.login-theme {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
}

.login-theme:hover { border-color: var(--line-strong); color: var(--ink); }

.login-theme svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.login-theme .fill { fill: currentColor; stroke: none; }

/* Phones and narrow tablets: the pitch becomes a band above a sheet. ----- */

@media (max-width: 860px) {
  .login {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(190px, 32dvh) auto;
  }

  .pitch-stage {
    inset: -95% -2% -60%;
    transform: rotateX(52deg);
  }

  .login-pitch::after {
    background:
      linear-gradient(to bottom, var(--night) 0%, rgba(14, 21, 18, 0) 32%),
      linear-gradient(to top, rgba(14, 21, 18, 0.97) 0%, rgba(14, 21, 18, 0.8) 38%, rgba(14, 21, 18, 0) 72%);
  }

  .pitch-caption {
    left: 20px;
    bottom: 38px;
  }

  .pitch-wordmark { width: 190px; }
  .pitch-club { margin-top: 8px; font-size: 18px; }

  .login-page main.login-panel { margin-top: -20px; }

  .login-panel {
    z-index: 1;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
  }

  .login-body {
    max-width: 440px;
    margin: 0 auto;
    padding: 24px 0 28px;
  }

  .login-mark { display: none !important; }
  .login-panel h1 { margin-top: 0; font-size: 60px; }
  .login-lede { margin-bottom: 28px; }

  .login-theme {
    top: 18px;
    right: 16px;
  }

  .login-foot { justify-content: center; }
}

/* Short phones (e.g. 320×568): a slimmer band so the Sign in button stays on the first screen. */
@media (max-width: 860px) and (max-height: 640px) and (orientation: portrait) {
  .login { grid-template-rows: minmax(130px, 22dvh) auto; }
  .pitch-caption { bottom: 30px; }
  .pitch-wordmark { width: 150px; }
  .pitch-club { display: none; }
  .login-body { padding-top: 18px; }
  .login-panel h1 { font-size: 46px; }
  .login-lede { margin-bottom: 18px; font-size: 14px; }
  .field + .field { margin-top: 12px; }
  .login-submit { margin-top: 16px; }
}

/* Phones on their side: pitch beside the form, the form scrolls. */
@media (max-width: 860px) and (max-height: 500px) and (orientation: landscape) {
  .login {
    grid-template-columns: 38% 1fr;
    grid-template-rows: none;
  }

  .login-pitch {
    position: sticky;
    top: 0;
    height: 100dvh;
  }

  .pitch-stage {
    inset: -5% 0 13%;
    transform: rotateX(46deg);
  }

  .pitch-caption { bottom: 20px; }
  .pitch-wordmark { width: 150px; }

  .login-page main.login-panel {
    margin-top: 0;
    border-radius: 0;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}