/* ==========================================================================
   Account screens — sign in (login.html) and the two steps after it (welcome.html).
   One centred column on the dark page: the mark, a title and subtitle, then the
   controls. Everything here is shared by both pages; [data-step] on welcome.html
   decides which block is shown.
   ========================================================================== */

.auth {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 5rem 1.25rem 3.5rem;
}

.auth__box {
  width: 100%;
  max-width: 20rem;
  text-align: center;
}
.auth__box[hidden] { display: none; }

.auth__mark {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0 auto 1.6rem;
  color: var(--pearl);
}
.auth__mark svg { width: 100%; height: 100%; }

.auth__title {
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--pearl);
}

.auth__sub {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--smoke);
}

/* The plan or early-access line a visitor arrived with */
.auth__plan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .3rem .5rem;
  margin-top: 1.1rem;
  font-size: max(.62rem, 11px);
  letter-spacing: .12em;
}
.auth__plan[hidden] { display: none; }
.auth__plan-label { color: var(--smoke); }
.auth__plan-name { color: var(--champagne); }
.auth__plan-change { color: var(--smoke); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.auth__controls { margin-top: 2.2rem; }

.auth__provider,
.auth__submit,
.auth__input,
.auth__select {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color .2s linear, border-color .2s linear, color .2s linear;
}

/* Provider: the one filled button on the sign-in screen */
.auth__provider {
  gap: .6rem;
  background: var(--pearl);
  color: var(--ink);
}
.auth__provider[hidden] { display: none; }
.auth__provider:hover { background: #fff; }
.auth__provider:disabled { opacity: .7; cursor: progress; }
.auth__provider-icon { display: inline-flex; width: 1.05rem; height: 1.05rem; }
.auth__provider-icon svg { width: 100%; height: 100%; }

/* OR rule */
.auth__divider {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.1rem 0;
  font-size: max(.6rem, 10.5px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--smoke);
}
/* Nothing left to divide when the provider is not enabled on the project and auth
   hides its button. */
.auth__provider[hidden] + .auth__divider { display: none; }

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair);
}

/* Fields, and the quieter button under them */
.auth__input,
.auth__select {
  justify-content: flex-start;
  /* 16px floor: iOS Safari zooms into any field with smaller text and never zooms back
     out, which leaves the rest of the form off the side of the screen. */
  font-size: max(.9375rem, 16px);
  background: color-mix(in srgb, var(--pearl) 7%, transparent);
  color: var(--pearl);
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
/* --ash, not --smoke: a placeholder carries the only label these fields have, so it has
   to be readable rather than a hint. */
.auth__input::placeholder { color: var(--ash); opacity: 1; }
.auth__input:focus-visible,
.auth__select:focus-visible { outline: 2px solid var(--pearl); outline-offset: 2px; }
.auth__input[aria-invalid="true"] { border-color: var(--alert); }
.auth__input[readonly] { color: var(--ash); cursor: default; }

.auth__select {
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 50%, calc(100% - .75rem) 50%;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
.auth__select option { background: var(--ink); color: var(--pearl); }

.auth__submit {
  margin-top: .5rem;
  background: color-mix(in srgb, var(--pearl) 10%, transparent);
  color: var(--pearl);
  cursor: pointer;
}
.auth__submit:hover { background: color-mix(in srgb, var(--pearl) 16%, transparent); }
.auth__submit:disabled { opacity: .55; cursor: not-allowed; }
.auth__submit[aria-busy="true"] { cursor: progress; }
/* Not yet answerable, but still focusable and still announced: js/welcome.js says what is
   missing when it is pressed. */
.auth__submit[aria-disabled="true"] { opacity: .55; }

/* The step that finishes the account leads with the filled button instead */
.auth__submit--solid { background: var(--pearl); color: var(--ink); }
.auth__submit--solid:hover { background: #fff; }
.auth__submit--solid:disabled:hover,
.auth__submit--solid[aria-disabled="true"]:hover { background: var(--pearl); }

.auth__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
/* The gap inside .auth__row is the grid's; a sibling rule here would push Last name a
   row below First name instead. */
.auth__controls > .auth__field + .auth__field,
.auth__row + .auth__field { margin-top: .5rem; }
.auth__field { min-width: 0; }

.auth__error {
  margin-top: .5rem;
  font-size: max(.72rem, 12px);
  line-height: 1.4;
  color: var(--alert);
  text-align: left;
}
/* Empty, not absent: display:none takes a live region out of the accessibility tree, and
   a region added at the moment it fills is not announced. */
.auth__error:empty { margin-top: 0; }

.auth__status {
  margin-top: 1rem;
  font-size: max(.72rem, 12px);
  line-height: 1.4;
  color: var(--ash);
}
.auth__status:empty { margin-top: 0; }
.auth__status[data-tone="error"] { color: var(--alert); }
.auth__status[data-tone="success"] { color: var(--champagne); }

/* Subscribe tick, and the quiet Skip under the second step */
.auth__check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.4rem;
  font-size: .875rem;
  color: var(--ash);
  cursor: pointer;
}
.auth__check input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--pearl);
  cursor: pointer;
}

.auth__skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  margin-top: .4rem;
  font-size: .9375rem;
  color: var(--smoke);
  cursor: pointer;
}
.auth__skip:hover { color: var(--pearl); }

.auth__legal {
  margin-top: 2.4rem;
  font-size: max(.72rem, 12px);
  line-height: 1.5;
  color: var(--smoke);
}
.auth__legal a { color: var(--ash); text-decoration: underline; text-underline-offset: 3px; }
.auth__legal a:hover { color: var(--pearl); }

/* --------------------------------------------------------------------------
   Back to the site: the only chrome on these screens
   -------------------------------------------------------------------------- */
.auth-page .chrome { --chrome-top: 1.6rem; }
.nav--auth {
  position: fixed;
  top: var(--chrome-top);
  right: var(--gutter);
  display: flex;
  /* .nav stacks its links in a column, where align-items is the horizontal axis: without
     this the one link here sits at the top of the box instead of level with the mark. */
  flex-direction: row;
  align-items: center;
  min-height: var(--brand-size);
}
.nav--auth .nav__back { display: inline-flex; align-items: center; gap: .4rem; color: var(--ash); }
/* arrow-diag points down-right; ahead of "Back to site" it has to point back. */
.nav--auth .nav__back .icon-arrow { margin-left: 0; transform: rotate(180deg); }
.nav--auth .nav__back:hover { color: var(--pearl); }

@media (min-width: 48rem) {
  .auth { padding-top: 6rem; }
  .auth__box { max-width: 21.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .auth__provider,
  .auth__submit,
  .auth__input,
  .auth__select { transition: none; }
}