/* goseq.app/account's sign-in (and every step around it: forgot password, the second step, making an account), drawn
   like the app's own sign-in (www/css/app.css .si-*): cream and ink (the app's dark palette in dark mode), no card,
   a 34 px extra-bold title, 16 px body, a 12 px caps kicker, 54 px fields, and one dark pill (cream in dark mode) with
   the arc spinner in the button's own colour. /pay and /manage send people here to sign in, so this is their sign-in
   too. Only account.html loads this file (body.si-web), so the console's gate in support.css is unchanged. */

/* the screen edge: 20 px (16 at 360 px and narrower), the same for the header and the form */
@media (max-width: 767px) { .si-web .wrap { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 360px) { .si-web .wrap { padding-left: 16px; padding-right: 16px; } }

.si-web .ad-gate { max-width: 440px; margin: 4vh auto 48px; padding: 8px 20px 32px; background: none; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 480px) { .si-web .ad-gate { margin: 2vh 0 40px; padding: 8px 20px 32px; } }
@media (max-width: 360px) { .si-web .ad-gate { padding-left: 16px; padding-right: 16px; } }

/* type: kicker 12 caps, title 34 extra-bold and tight, body 16 / 1.5 */
.si-web .si-over { display: block; margin: 0 0 12px; color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; }
.si-web .ad-gate h1 { margin: 0 0 12px; color: var(--text); font-size: 34px; font-weight: 800; line-height: 1.08; letter-spacing: -.045em; }
@media (max-width: 360px) { .si-web .ad-gate h1 { font-size: 31px; } }
.si-web .ad-gate p { margin: 0 0 24px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.si-web .ad-gate p b { color: var(--text); }

/* fields: the app's 54 px boxes, radius 12, on the surface colour */
.si-web .ad-gate label { display: block; margin: 16px 0 8px; color: var(--text); font-size: 14px; font-weight: 650; letter-spacing: 0; }
.si-web .ad-gate label:first-of-type { margin-top: 0; }
.si-web .ad-gate .opt { color: var(--muted); font-weight: 500; }
.si-web .ad-gate input:not([type=checkbox]) { min-height: 54px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--text) 18%, transparent); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 17px; transition: border-color .15s, box-shadow .15s; }
.si-web .ad-gate input::placeholder { color: var(--muted); opacity: .8; }
.si-web .ad-gate input:not([type=checkbox]):focus, .si-web .ad-gate input:not([type=checkbox]):focus-visible { outline: none; border-color: color-mix(in srgb, var(--ink, currentColor) 40%, transparent); box-shadow: none; }
.si-web .ad-gate input + label { margin-top: 16px; }
.si-web .ad-gate .ad-check { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; min-height: 44px; font-size: 15px; font-weight: 600; }

/* the main button: a dark pill (cream with ink text in dark mode: the tokens swap), 54 tall, full width */
.si-web .ad-gate button.go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin-top: 24px; padding: 0 20px;
  border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: 700 16px/1.2 var(--font);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--text) 16%, transparent); }
.si-web .ad-gate button.go:hover { background: color-mix(in srgb, var(--text) 88%, var(--bg)); }
.si-web .ad-gate button.go:not(:disabled)::after { content: "→"; font-weight: 600; transition: transform .2s var(--ease); }
.si-web .ad-gate button.go:active::after { transform: translateX(3px); }
.si-web .ad-gate button.go:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.si-web .ad-gate button.go:disabled { cursor: progress; }
/* busy: the arc spinner in the button's own text colour, shown only after 300 ms (a quick answer never flashes it) */
.si-web .ad-gate button.go .arcspin { width: 20px; height: 20px; color: currentColor; opacity: 0; animation: si-late 1ms .3s forwards; }
.si-web .ad-gate button.go .arcspin .trk { opacity: .22; }
@keyframes si-late { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .si-web .ad-gate button.go .arcspin { animation: si-late 1ms .3s forwards, ad-spin 1.2s linear infinite; }
  .si-web .ad-gate button.go { transition: transform .12s ease, box-shadow .15s; }
  .si-web .ad-gate button.go:active { transform: scale(.985); }
}

/* errors sit just above the button, like the app's; nothing is kept for them until there is one */
.si-web .ad-gate .msg { margin: 12px 2px 0; min-height: 0; font-size: 14.5px; line-height: 1.45; }
.si-web .ad-gate .msg:empty { display: none; }
.si-web .ad-gate .msg.bad { color: var(--bad); } .si-web .ad-gate .msg.ok { color: var(--ok); }
.si-web .ad-gate .msg + button.go { margin-top: 16px; }

/* everything else is a text link, each a full 44 px target */
.si-web .ad-gate .linkbtn { min-height: 44px; padding: 10px 0; font: 650 15px var(--font); color: var(--accent); }
.si-web .ad-gate .linkbtn.inline { display: inline-flex; align-items: center; vertical-align: middle; }
.si-web .ad-gate .si-links { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--muted); font-size: 15px; }
.si-web .ad-gate .si-new { justify-content: center; margin-top: 0; }
.si-web .ad-gate .si-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; color: var(--muted); font-size: 14px; }
.si-web .ad-gate .si-or::before, .si-web .ad-gate .si-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.si-web .ad-gate .ad-gate-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin: 12px 0 0; }
.si-web .ad-gate .fineprint { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.si-web .ad-gate .fineprint a { color: var(--accent); font-weight: 650; }

/* arriving: a short rise (transform only, so the text is painted, and counted, from the first frame); reduced motion: none */
.si-web .ad-gate:not([hidden]) { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes si-rise { from { transform: translateY(8px); } }
  .si-web .ad-gate:not([hidden]) { animation: si-rise .22s var(--ease) both; }
  .si-web .ad-gate.shake { animation: ad-shake .42s; }
}