/* items/login.css — Login restyle (login.html). Scope every rule to body.page-login. Loaded after app.css and the page <style>.

   The Expocity sign-in: one 400px card with a 24px radius on a quiet page, the
   Platinumlist lockup with the product name under it, an MD Nichrome uppercase
   heading, 48px controls with 16px text (iOS zooms anything smaller and never
   zooms back), and the gradient primary button. Built on app.css's `.card`,
   `label.f`, `.inp`, `.btn` and `.pagefoot`; only login-specific geometry here.
   Tokens only — no new colour values. */

/* (0,1,2) beats app.css's `html body:where(...)` gutter and `html body`. */
html body.page-login{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; min-height: 100vh; min-height: 100dvh;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
  font: 16px/1.5 var(--font);
}

/* ── the card ─────────────────────────────────────────────────────────── */
body.page-login .card.login{
  width: 100%; max-width: 400px; margin: 0;
  border-radius: 24px; padding: 30px 26px 26px;
  box-shadow: var(--lift-2);
}

/* Lockup: logo, then the product name tucked under the wordmark. */
body.page-login .lock{ display: inline-flex; flex-direction: column; --w: 168px; margin-bottom: 22px; }
body.page-login .lock img{ width: var(--w); height: auto; }
body.page-login .lock-sub{
  font: 600 calc(var(--w) * .088)/1.2 var(--font); color: var(--content-secondary);
  padding-inline-start: calc(var(--w) * .19); margin-top: 2px;
}

body.page-login h1{
  font: 700 22px/1.2 var(--font-accent); letter-spacing: .01em; text-transform: uppercase;
  color: var(--content-primary); margin: 0 0 6px;
}
body.page-login .sub{ color: var(--content-secondary); font-size: 13.5px; line-height: 1.55; margin: 0 0 20px; }

/* ── fields ───────────────────────────────────────────────────────────── */
body.page-login label.f{ margin-top: 0; }
/* min-height restated: design-system.css's pointer:coarse floor (40px, on
   input[type=…] at higher specificity than .inp) would otherwise shrink it. */
body.page-login .inp{ min-height: 48px; text-align: center; }
body.page-login .inp::placeholder{ color: var(--content-secondary); opacity: .7; }
/* The code reads as a code: bigger, spaced digits. Still ≥16px. */
body.page-login #code{ font-size: 20px; font-weight: 600; letter-spacing: .22em; font-variant-numeric: tabular-nums; }
body.page-login #code::placeholder{ font-size: 16px; font-weight: 500; letter-spacing: .04em; }

/* ── the button ───────────────────────────────────────────────────────── */
body.page-login .btn{ width: 100%; margin-top: 14px; box-shadow: 0 8px 20px var(--glow); }
body.page-login .btn:hover{ filter: brightness(1.06); }
body.page-login .btn:focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; }
body.page-login .btn:disabled{ filter: none; box-shadow: none; }

/* ── status line ──────────────────────────────────────────────────────── */
body.page-login .msg{
  margin-top: 12px; min-height: 21px; font-size: 13.5px; line-height: 1.5;
  color: var(--content-secondary); overflow-wrap: anywhere;
}
body.page-login .msg.err{ color: var(--alert-ink); font-weight: 600; }

/* "Sent to …" and the way back. The container is only ever hidden by the
   attribute; app.css's `[hidden]{display:none!important}` keeps that true. */
body.page-login .otp-note{
  margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--content-secondary);
  /* break-word, not anywhere: a long address wraps before it splits, and the
     full stop after it has no break opportunity, so it never strands alone. */
  overflow-wrap: break-word;
}
body.page-login .otp-note #otpSentTo{ color: var(--content-primary); font-weight: 600; }
/* Link-shaped, but a 44px touch target. */
body.page-login .otp-note button{
  /* Its own line under "Sent to …", so it never wraps mid-phrase. */
  display: flex; align-items: center; min-height: 44px; width: auto;
  margin: 0; padding: 0 2px; background: none; border: 0; cursor: pointer;
  color: var(--signal); font: 600 14px var(--font); text-decoration: underline; text-underline-offset: 3px;
}
body.page-login .otp-note button:hover{ text-decoration: none; }
body.page-login .otp-note button:focus-visible{ outline: 2px solid var(--signal); outline-offset: 2px; border-radius: 6px; }

body.page-login .foot{
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--bg-border);
  font-size: 12px; line-height: 1.55; color: var(--content-secondary);
}

/* The footer sits under the card; no tab bar here, so no 120px phone pad. */
body.page-login .pagefoot{ padding: 0; }

@media (max-width: 420px){
  body.page-login .card.login{ padding: 26px 20px 22px; }
}