/* Auth pages are exactly one viewport; no scrolling to reach the log in button.
   The page is a flex column: header and footer take their natural height, main
   absorbs whatever is left, and the card centres inside it. */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.auth-page main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--s3);
}

.auth-page .site-head { flex: 0 0 auto; }

.auth-page .site-foot {
  flex: 0 0 auto;
  padding: var(--s2) var(--s4);
  font-size: 0.66rem;
}

/* On a short window the card scrolls internally rather than pushing the page taller. */
.auth-page .auth-card {
  max-height: 100%;
  overflow-y: auto;
}

.auth-card {
  width: min(480px, 100%);
  padding: clamp(var(--s3), 4vh, var(--s5)) var(--s4);
  background: var(--ink-soft);
  border: var(--edge);
  border-left: 12px solid var(--accent);
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.6);
  transform: skewX(-2deg);
  animation: slam var(--slow) var(--ease-slam) both;
}
.auth-card > * { transform: skewX(2deg); }

.auth-card__eyebrow {
  font-family: var(--display);
  letter-spacing: 0.3em;
  color: var(--accent);
  margin: 0 0 var(--s2);
}
.auth-card h1 { font-size: clamp(2rem, min(8vw, 7vh), 4.2rem); }

.auth-form { display: grid; gap: clamp(var(--s2), 2vh, var(--s3)); }
.auth-form label {
  display: grid;
  gap: var(--s1);
  font-family: var(--display);
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  color: var(--paper-dim);
}
.auth-form input {
  padding: var(--s2) var(--s3);
  font: inherit;
  color: var(--paper);
  background: #000;
  border: 2px solid var(--paper-dim);
}
.auth-form input:focus { border-color: var(--accent); outline: none; }

/* Sentence case rather than signage, like .field-rule: a checkbox row reads as a
   sentence to agree with, not a field name to fill in.
   Written as `label.auth-form__remember` because `.auth-form label` above is the more
   specific selector and was winning: the row inherited display:grid and the box sat
   stranded on its own line above its own words, centred over nothing. */
.auth-form label.auth-form__remember {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s2);
  margin-top: calc(var(--s1) * -1);
  font-family: var(--body, inherit);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.85rem;
  color: var(--paper-dim);
  cursor: pointer;
}
.auth-form label.auth-form__remember input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  accent-color: var(--accent);
  cursor: pointer;
}
.auth-form label.auth-form__remember span { line-height: 1.3; }

/* Sentence case and no letterspacing: the labels above are signage, this is something
   to read.
   Folded away until the field is in use. Three rules stacked open at once turned a
   two-field form into a page of small print, and none of it is worth reading until
   you are in the box it belongs to. It opens on focus, stays open while there is
   something typed in, and opens regardless the moment what is typed is wrong. */
.field-rule {
  display: block;
  overflow: hidden;
  max-height: 0;
  margin: 0;
  font-family: var(--body, inherit);
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-dim);
  opacity: 0;
  transition: max-height var(--fast, 140ms) linear, opacity var(--fast, 140ms) linear,
              margin var(--fast, 140ms) linear;
}
.auth-form input:focus + .field-rule,
.auth-form input:not(:placeholder-shown) + .field-rule,
.auth-form input.is-ruled:not(:placeholder-shown):invalid + .field-rule {
  max-height: 8rem;
  margin-top: var(--s1);
  opacity: 0.85;
}
/* Only once something has actually been typed. :invalid on its own lights up the
   moment the page loads, because a required field starts empty and empty is invalid.
   :placeholder-shown is what distinguishes "not filled in yet" from "filled in wrong"
  ; which is why this is scoped to .is-ruled: a field with no placeholder attribute
   never shows one, so the guard silently inverts and marks it red while still blank.
   The password field learned that the hard way. */
.auth-form input.is-ruled:not(:placeholder-shown):invalid {
  border-color: var(--accent-sentai, #E01B24);
}
.auth-form input.is-ruled:not(:placeholder-shown):invalid + .field-rule {
  color: var(--accent-sentai, #E01B24);
  opacity: 1;
}
.auth-form .btn { justify-self: start; margin-top: var(--s2); }

.auth-card__alt {
  margin-top: clamp(var(--s2), 2.5vh, var(--s4));
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
}

.stat-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2) var(--s3);
  margin: var(--s4) 0 0;
}
.stat-list dt {
  font-family: var(--display);
  letter-spacing: 0.12em;
  color: var(--accent);
}
.stat-list dd { margin: 0; }