/* GST Operations — the two sign-in doors (WP10).
 *
 * Loaded AFTER /static/capture.css, which owns the tokens, the reset, the
 * ribbon, the top bar, .btn and .banner. Nothing is re-declared here and no
 * colour is mixed here: everything below is layout for the three things only
 * these pages have — a stacked form, a grid of names to tap, and a keypad.
 *
 * Sized for a gloved thumb on a phone at a dock, which is the same reason the
 * capture screen's inputs are 56px tall.
 */

.auth{padding:14px 12px 96px;max-width:520px;margin:0 auto}
.auth .banner{margin:0 0 14px}

/* ── The stacked form ────────────────────────────────────── */
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-field{display:block}
.auth-field .lbl{display:block;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:5px}
.auth-field .txt-in{width:100%;min-height:52px}
/* A password is not a code: it is typed as written, not shouted in capitals
   the way .txt-in does for item codes. */
.pw-in{text-transform:none;letter-spacing:.08em}
/* The first action on the page, with the space UNDER it rather than over it —
   `.auth-alt` is for what comes after the form, and the Google button now comes
   before it (2026-09-10). Layout only; the colour is the house `.btn.primary`. */
.auth-lead{margin:0 2px 18px}
.auth-alt{margin:18px 2px 0;font-size:.95rem}
.auth-alt .link,.auth .link{color:var(--green);font-weight:700;
  text-decoration:underline;text-underline-offset:3px}
.auth-out{margin-top:26px;padding-top:14px;border-top:1px solid var(--line)}

/* ── Step one: the names ─────────────────────────────────── */
/* Two columns on a phone, so a name is a target and not a line of a list. */
.name-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:10px;margin:0 0 4px}
.name-grid li{margin:0}
.name-btn{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:78px;padding:10px;background:var(--card);color:var(--ink);
  border:1px solid var(--line-2);border-radius:12px;text-decoration:none;
  font-size:1.15rem;font-weight:800;letter-spacing:.02em;line-height:1.15}
.name-btn:active{border-color:var(--green);background:var(--green-tint)}

/* ── Step two: the keypad ────────────────────────────────── */
.pin-in{width:100%;min-height:64px;text-align:center;
  font-family:inherit;font-size:2rem;font-weight:800;letter-spacing:.5em;
  text-indent:.5em;font-feature-settings:var(--mono-nums);
  background:var(--card);color:var(--ink);
  border:1px solid var(--line-2);border-radius:10px;padding:8px 10px}
.pin-in:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.key{font-family:inherit;font-size:1.7rem;font-weight:800;
  font-feature-settings:var(--mono-nums);min-height:64px;
  background:var(--card);color:var(--ink);border:1px solid var(--line-2);
  border-radius:12px;cursor:pointer}
.key:active{border-color:var(--green);background:var(--green-tint)}
.key.ghost{font-size:1.3rem;color:var(--ink-2);background:transparent}

@media (min-width:560px){
  .name-grid{grid-template-columns:repeat(3,1fr)}
}