/* ==========================================================================
   Sign-in and the one-time code.

   The only screen a staff member sees before their shift starts, and often
   the first impression the app makes on somebody who did not ask for it. It
   gets a little more air than the working screens and no chrome at all —
   nothing to tap except the two things that get you in.
   ========================================================================== */

.auth {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--sp-5) var(--sp-4);
  /* A quiet monsoon sky behind the card: a wash of the accent at the top
     fading into the page ground. Painted with a gradient rather than an image
     so it costs nothing and follows the theme. */
  background:
    radial-gradient(120% 60% at 50% -10%, var(--accent-wash) 0%, transparent 70%),
    var(--bg);
}

.auth__frame {
  width: min(26rem, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.auth__brand { text-align: center; display: grid; justify-items: center; gap: var(--sp-2); }
.auth__brand--tight { gap: var(--sp-1); }

.auth__mark {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--w-heavy);
  font-size: .95rem;
  letter-spacing: .04em;
  box-shadow: var(--shadow-2);
}

.auth__wordmark {
  margin: 0;
  font-size: var(--fs-head);
  font-weight: var(--w-heavy);
  letter-spacing: -.015em;
  color: var(--ink);
}

.auth__tagline { justify-content: center; font-size: var(--fs-meta); color: var(--ink-mute); }

.auth__card {
  background: var(--surface);
  border: var(--bw-hair) solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.auth__card .field + .field { margin-top: 0; }
.auth__card .head { margin-bottom: calc(var(--sp-2) * -1 + .1rem); }
.auth__go { margin-top: var(--sp-1); }

.auth__resend { text-align: center; }
.auth__foot { text-align: center; font-size: var(--fs-meta); color: var(--ink-faint); }
.auth__foot a { color: var(--ink-mute); }

/* ------------------------------------------------------------- code entry */

.otp__head { display: flex; align-items: center; gap: var(--sp-4); }

.otp__ring { position: relative; width: 4.5rem; height: 4.5rem; flex: none; }
.otp__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.otp__ring-track {
  fill: none;
  stroke: var(--rule);
  stroke-width: 5;
}

.otp__ring-live {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  /* One second per step, linear: a countdown that eases is a countdown that
     lies about how much time is left. */
  transition: stroke-dasharray 1s linear;
}

.otp__ring.is-urgent .otp__ring-live { stroke: var(--warn); }
.otp__ring.is-done .otp__ring-live { stroke: var(--danger); }

.otp__ring-time {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-strong);
  font-size: var(--fs-meta);
  color: var(--ink-mute);
}

.otp__demo-code { font-family: var(--font-mono); letter-spacing: .18em; font-size: var(--fs-lead); }

/* -------------------------------------------------------- demo cheatsheet */

.auth__demo {
  background: var(--surface-sunken);
  border: var(--bw-hair) dashed var(--rule-strong);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

.auth__demo-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--ink-mute);
}

.auth__demo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }

.auth__demo-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--sp-2);
  align-items: baseline;
  min-height: var(--tap-min);
  padding: var(--sp-2);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-meta);
  text-align: left;
  cursor: pointer;
}

.auth__demo-row:active { background: var(--accent-wash); }
.auth__demo-name { font-weight: var(--w-strong); }
.auth__demo-role { grid-column: 1; color: var(--ink-faint); font-size: .78rem; }
.auth__demo-user { grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); color: var(--accent); }

/* The full lockup, with the society's name arcing around it, is legible from
   about 180px wide — below that it becomes a red smudge and the compact mark
   is used instead (see verify.html). */
.auth__logo { width: min(15rem, 62vw); padding: var(--sp-2) var(--sp-3); }
.auth__logo--small { width: 9rem; padding: var(--sp-1) var(--sp-2); }