/* The sign-in and set-up pages (/login, /enrol): one narrow column, centred across and a fixed way down from the top (the
   card does not move between the pages or when a message appears), in the same plain iOS
   look as the app (tokens from DESIGN.md, light by default, dark follows the iPhone). Ported from Stakes. Self-contained
   and scoped to body.auth, so it does not depend on app.css. Kept in a file, not a <style> block: the
   Content-Security-Policy allows no inline style. Sizes are in rem so text follows the iPhone text-size setting. */
body.auth {
  --ground: #f2f2f7; --section: #ffffff; --label: #0b0b0c; --label-2: #6e6e73; --separator: rgba(60, 60, 67, .17);
  --fill: rgba(120, 120, 128, .13); --blue: #0a64d8; --blue-soft: rgba(10, 100, 216, .12); --on-blue: #ffffff;
  --bad: #c42b21;
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 9rem) 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  background: var(--ground); color: var(--label); box-sizing: border-box;
  font: -apple-system-body; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) {
  body.auth {
    --ground: #000000; --section: #1c1c1e; --label: #f5f5f7; --label-2: rgba(235, 235, 245, .62);
    --separator: rgba(84, 84, 88, .55); --fill: rgba(120, 120, 128, .26); --blue: #0a84ff;
    --blue-soft: rgba(10, 132, 255, .2); --bad: #ff453a;
  }
}
body.auth *, body.auth *::before, body.auth *::after { box-sizing: border-box; }
body.auth .authwrap { width: 100%; max-width: 24.5rem; }
body.auth .authbrand { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin: 0 .25rem 1rem; }
body.auth .card { background: var(--section); border-radius: 1.125rem; box-shadow: 0 0 0 .5px var(--separator); }
body.auth .authcard { padding: 1.5rem 1.375rem; }
body.auth .authic {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--blue-soft); color: var(--blue);
  display: grid; place-items: center; margin-bottom: 1rem;
}
body.auth .i { width: 1.5rem; height: 1.5rem; flex: none; }
body.auth .h1 { font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; margin: 0; }
body.auth .sub { color: var(--label-2); margin: .4rem 0 1.25rem; line-height: 1.4; text-wrap: balance; }
body.auth .form { display: grid; gap: 1rem; margin-top: .25rem; }
body.auth .fld { display: grid; gap: .375rem; }
body.auth .fld label { font-size: .85rem; font-weight: 600; color: var(--label-2); }
body.auth .inp {
  width: 100%; min-height: 3rem; padding: .625rem .875rem; border: 0; border-radius: .75rem; background: var(--fill);
  color: var(--label); font: inherit; font-size: 1.0625rem; -webkit-appearance: none; appearance: none;
}
body.auth .inp.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
body.auth .inp:focus-visible, body.auth .btn:focus-visible, body.auth a:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
body.auth .btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.125rem; padding: .5rem 1rem;
  border: 0; border-radius: .875rem; font: inherit; font-size: 1.0625rem; font-weight: 600; cursor: pointer;
  background: var(--fill); color: var(--blue);
}
body.auth .btn.primary { background: var(--blue); color: var(--on-blue); }
body.auth .btn[disabled] { opacity: .5; cursor: default; }
body.auth .status { margin: 0; font-size: .9rem; line-height: 1.4; color: var(--label); }
body.auth .status:not(:empty) { margin-top: .875rem; }       /* nothing to say: no gap under the button (the live region stays in place) */
body.auth .status.bad { color: var(--bad); }       /* a refusal or a failure, in the app's red */
body.auth .foot { margin: 1rem 0 0; text-align: center; text-wrap: balance; font-size: .85rem; line-height: 1.35;
  color: var(--label-2); }
body.auth .foot a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body.auth .foot .i { display: inline-block; width: 1rem; height: 1rem; margin-right: .375rem; vertical-align: -.2em; }