/* The centred, signed-out layout: sign in, accept an invitation, finish a
   recovery. One stylesheet rather than a <style> block on each, because the
   three pages are the same page at three moments and the drift between copies
   is exactly what app.css exists to prevent. */

body {
  line-height: 1.6;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(2rem, env(safe-area-inset-top))
           max(1.5rem, env(safe-area-inset-right))
           max(2rem, env(safe-area-inset-bottom))
           max(1.5rem, env(safe-area-inset-left));
}

/* Wider than the old 22rem: a QR code and two columns of recovery codes have to
   fit, and a form of two fields still looks deliberate at this width. */
main { width: 100%; max-width: 26rem; }

.mark { width: 3rem; height: 3rem; margin: 0 auto 1.25rem; display: block; }

h1 { font-size: 1.5rem; letter-spacing: -0.01em; margin: 0 0 .35rem; text-align: center; }
h2 { font-size: 1.125rem; margin: 0 0 .35rem; text-align: center; }
.lede { margin: 0 0 2rem; text-align: center; font-size: .9375rem; color: var(--muted); }

/* Readable field labels rather than the small caps the tables use. */
label { font-size: .8125rem; letter-spacing: .02em; margin-bottom: .35rem; text-transform: none; color: var(--fg); }

input { margin-bottom: 1rem; }
button { width: 100%; padding: .65rem 1rem; }
button:disabled { cursor: progress; }

/* Holds its line height while empty, so submitting a bad password does not
   shift the form under the pointer. */
.error, .ok { margin: 0 0 1rem; font-size: .875rem; min-height: 1.4em; }

.note { margin: -.6rem 0 1rem; }

.back { display: block; margin-top: 1.5rem; text-align: center; font-size: .875rem; color: var(--muted); }

/* The secondary routes off each page — "forgot your password", "start again".
   Buttons rather than links, because none of them navigates anywhere; styling
   them as links is what makes that invisible to the person using them. */
.links {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: .875rem;
  color: var(--muted);
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.linkish {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.linkish:hover, .linkish:focus-visible { color: var(--accent); }

/* Enrolment brings its own buttons, and they are actions in a row rather than
   the full-width primary this layout gives everything else. */
.modal-actions button { width: auto; }

/* A stack of label/input/button, for the forms enroll.js builds. */
form.stack { display: grid; }

/* The enrolment offer on the invitation page: a short case for taking it, above
   the QR code rather than beside it, so the choice is read before the thing it
   is a choice about. */
.offer {
  margin: 0 0 1.25rem;
  padding: .75rem .9rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--panel);
}

.offer .note { margin: 0; }