/* Sign in and the waitlist: the launch view on the slate on the left, the card on the stone ground on the right. */

.auth {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  /* The page or the card column keeps its scroll when the card changes its height, so the tab bar stays in place.
     Without this, Chromium moves the scroll to keep a block lower down in place. */
  overflow-anchor: none;
}
/* Two columns above 1024 px, or above 1000 px in landscape. An iPad Pro 12.9 in portrait is 1024 px wide, and it
   gets the stacked layout. On a wide screen the page is one window tall and never scrolls. A card taller than the
   window scrolls in its own column. */
@media (min-width: 1025px), (min-width: 1001px) and (orientation: landscape) {
  .auth {
    height: 100vh;
    height: 100dvh;
  }
  /* two classes, so this wins over the overflow of .auth__side further down */
  .auth > .auth__side {
    overflow-y: auto;
  }
}

/* left: slate with faint topography, and the launch view */
/* the panel stays in place at the height of the window, so a tall card scrolls on its own side */
.auth__show {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--slate);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 48px) clamp(24px, 3.4vw, 64px);
}
.auth__show::before {
  content: '';
  position: absolute;
  inset: -5%;
  background: var(--cream);
  opacity: 0.14;
  -webkit-mask: url(/assets/img/contours-st-helens.svg) center / cover no-repeat;
  mask: url(/assets/img/contours-st-helens.svg) center / cover no-repeat;
  animation: topo 60s ease-in-out infinite alternate;
}
.auth__show > * {
  position: relative;
}
/* a light snowfall over the slate, behind the countdown */
.auth__show > .snow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@keyframes topo {
  to {
    transform: scale(1.08) translate(-2%, 1%);
  }
}
.auth__logo img {
  height: clamp(28px, 2.4vw, 42px);
  width: auto;
}
/* the logo stays top left */
.auth__show > .auth__logo {
  position: absolute;
  top: clamp(28px, 3vw, 48px);
  left: clamp(24px, 3.4vw, 64px);
  /* the logo comes first in the panel, so a later block would cover it and take its click */
  z-index: 2;
}
.auth__main {
  width: min(700px, 100%);
  margin: auto;
  padding-top: clamp(48px, 5vw, 72px);
}

/* the launch view: the opening and the countdown, left aligned with the logo. It sits in the middle of the first
   screen, not of the panel. The panel grows when the card loads, and this keeps the view still. The top padding
   moves the view down by half its height. At 1440 px the view then sits where the approved design puts it. */
.auth__main--launch {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(100dvh - 2 * clamp(28px, 3vw, 48px));
  margin: 0;
  padding-top: clamp(96px, 11.25vw, 216px);
}
.launch {
  max-width: 640px;
  color: var(--cream);
}
.launch__eyebrow {
  margin-bottom: clamp(20px, 1.95vw, 36px);
  font-size: clamp(13px, 1.05vw, 17px);
  /* a set line height, so the swap to the web font does not move the heading */
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
.launch__title {
  font-size: clamp(64px, 7vw, 124px);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.02em;
}
.launch__units {
  display: flex;
  gap: clamp(32px, 3.9vw, 72px);
  margin-top: clamp(40px, 4.45vw, 80px);
}
.launch__unit {
  display: grid;
  justify-items: start;
}
.launch__num {
  font-size: clamp(48px, 5vw, 96px);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.launch__label {
  margin-top: 10px;
  font-size: clamp(13px, 0.98vw, 17px);
  line-height: 1.3;
  opacity: 0.75;
}
/* on /signin the browser reads its own clock, so the digits fade into the space the server kept for them */
.launch__count--in {
  animation: launch-in 0.6s var(--ease) both;
}
@keyframes launch-in {
  from {
    opacity: 0;
  }
}

/* right: the card on plain stone */
.auth__side {
  position: relative;
  overflow: hidden;
  background: var(--stone);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Safe: a card taller than the column starts at the top of it and stays reachable. When the height of the card
     changes, AuthCard keeps the card at its top, so the tabs do not move. */
  justify-content: safe center;
  padding: clamp(56px, 7vh, 96px) var(--gut) clamp(24px, 3vh, 48px);
}
.auth__mlogo {
  display: none;
}
.auth__back {
  position: absolute;
  top: clamp(28px, 3vw, 48px);
  right: var(--gut);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--ink-2);
}
.auth__back:hover {
  color: var(--ink);
}
.auth__back .icon {
  width: 16px;
  height: 16px;
}

.acard {
  position: relative;
  width: min(480px, 100%);
  background: var(--raise);
  border-radius: var(--r);
  padding: clamp(22px, 2.2vw, 34px);
  box-shadow: 0 30px 80px rgba(28, 27, 29, 0.08);
}
.acard__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  background: var(--stone);
  border-radius: var(--r-btn);
  margin-bottom: 20px;
}
.acard__tabs button {
  all: unset;
  cursor: pointer;
  text-align: center;
  padding: 11px 8px;
  border-radius: var(--r-btn);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
}
.acard__tabs button[aria-selected='true'] {
  background: var(--pick);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* The two forms share one box. The open form sets the height of the box, and the closed form fades out on top of
   it. AuthCard sets the height, and the change animates. The padding gives focus rings room inside the clip. */
.acard__panes {
  position: relative;
  margin: -6px;
  padding: 6px;
  overflow: hidden;
  transition: height 0.2s var(--ease);
}
/* The closed form fades out before the open form fades in, so the two never show together. */
.acard__pane {
  transition: opacity 0.2s var(--ease) 0.12s;
}
.acard__pane[inert] {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.12s var(--ease),
    visibility 0s linear 0.12s;
}
.acard__form {
  display: grid;
  gap: 14px;
}
.acard__form label,
.acard__form legend {
  display: grid;
  gap: 6px;
  font-size: var(--t-body3);
  font-weight: 500;
}
.acard__form label em {
  font-style: normal;
  font-weight: 400;
  color: var(--mute);
}
.acard__form input,
.acard__form select,
.acard__form textarea {
  width: 100%;
  border: 1px solid var(--stone-2);
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  background: var(--field);
}
.acard__form input,
.acard__form select {
  height: 48px;
}
/* the place of an input until the page hydrates: the same box, empty */
.acard__wait {
  display: block;
  height: 48px;
  border: 1px solid var(--stone-2);
  border-radius: 12px;
  background: var(--field);
}
.acard__form textarea {
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.4;
}
.acard__form input:focus,
.acard__form select:focus,
.acard__form textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.acard__form fieldset {
  border: 0;
  display: grid;
  gap: 8px;
}
.acard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.acard__form .btn {
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
.acard__form .btn--line {
  border: 1px solid var(--ink);
  background: transparent;
}
.acard__steps {
  display: flex;
  gap: 6px;
}
.acard__steps span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--stone);
  transition: background 0.3s;
}
.acard__steps span.is-on {
  background: var(--ink);
}
.acard__step {
  font-size: 13px;
  color: var(--mute);
  margin-top: -4px;
}
.acard__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.acard__form .acard__checks label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.acard__form .acard__checks input {
  width: 18px;
  height: 18px;
  padding: 0;
  accent-color: var(--ink);
}
.acard__nav {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.acard__nav .btn--ink {
  flex: 1;
}
.acard__error {
  font-size: 14px;
  color: var(--warn);
}
.acard__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0;
  font-size: 13px;
  color: var(--mute);
}
.acard__or::before,
.acard__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--stone);
}
.acard__sso {
  width: 100%;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
}
.acard__sso + .acard__sso {
  margin-top: 10px;
}
.acard__sso .icon {
  width: 18px;
  height: 18px;
}
.acard__note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute);
  text-align: center;
}

/* the waitlist in the card: a title, one line, four fields in two columns, then the two optional questions */
.wl__title {
  font-size: var(--t-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
  outline: none;
}
.wl__lead {
  margin-top: 8px;
  font-size: var(--t-body2);
  line-height: 1.45;
  color: var(--ink-2);
}
.wl .acard__form {
  margin-top: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  align-items: start;
}
.wl .acard__form > * {
  grid-column: 1 / -1;
}
.wl .acard__form > .wl__field:not(.wl__ask) {
  grid-column: auto;
}
@media (max-width: 520px) {
  .wl .acard__form > .wl__field:not(.wl__ask) {
    grid-column: 1 / -1;
  }
}
.wl__field {
  display: grid;
  gap: 6px;
}
.acard__form input[aria-invalid='true'] {
  border-color: var(--warn);
}
.wl__error {
  font-size: 14px;
  line-height: 1.4;
  color: var(--warn);
}
.acard__form .wl__submit {
  margin-top: 6px;
}
.wl__note {
  margin-top: 20px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mute);
  text-align: center;
}
.wl--done {
  padding: 8px 0;
  animation: launch-in 0.4s var(--ease) both;
}
/* the sent form while the page scrolls back up to it, before the thank-you takes its place */
.wl--leaving {
  opacity: 0.4;
  transition: opacity 0.3s var(--ease);
}
/* The two optional questions: under a divider line, with lighter labels and small toggle pills. The legend carries
   the divider line and the space around it. WebKit does not float a legend, so a float gave a different space there. */
.wl .wl__sources {
  margin-top: 8px;
  padding: 0;
}
.wl .wl__sources legend {
  width: 100%;
  padding: 20px 0 18px;
  border-top: 1px solid var(--stone);
}
.wl .wl__sources legend,
.wl .wl__ask label {
  display: block;
  font-weight: 400;
  color: var(--ink-2);
}
.wl legend em,
.wl .wl__ask label em {
  font-style: normal;
  color: var(--mute);
}
.wl__pills {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
}
.wl .wl__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--stone-2);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
/* the hover line for a mouse only, so a tap does not leave it behind */
@media (hover: hover) and (pointer: fine) {
  .wl .wl__pill:hover {
    box-shadow: inset 0 0 0 1px var(--mute);
  }
}
.wl .wl__pill:has(:checked) {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: none;
}
.wl .wl__pill:has(:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.wl .wl__pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.wl .wl__ask {
  margin-top: 4px;
}

/* The stacked layout: the card on top, the slate under it. The slate fills the rest of the window, so no strip of
   page shows under it. */
@media (max-width: 1000px), (max-width: 1024px) and (orientation: portrait) {
  .auth {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .auth__show {
    position: relative;
    align-self: stretch;
    height: auto;
    min-height: 0;
  }
  .auth__side {
    order: -1;
  }
  .auth__mlogo {
    display: block;
    align-self: flex-start;
    margin-bottom: 28px;
  }
  .auth__mlogo img {
    height: 30px;
    width: auto;
  }
  .auth__show .auth__logo {
    display: none;
  }
  .auth__main--launch {
    min-height: 0;
    /* the top padding of .auth__main again, because the view is no longer centered */
    padding-top: clamp(48px, 5vw, 72px);
  }
  .auth__side {
    padding-top: 40px;
  }
  .auth__back {
    display: none;
  }
}
@media (max-width: 720px) {
  .acard__row {
    grid-template-columns: 1fr;
  }
}
/* The tabs and the pills show their own state, so a tap gets no grey box from the browser. Only a touch screen
   draws this box, so a mouse sees no change. */
.acard__tabs button,
.wl .wl__pill,
.auth__back,
.auth__logo,
.auth__mlogo {
  -webkit-tap-highlight-color: transparent;
}
/* Touch: each tap target is 44 px or more. An invisible layer makes the small ones bigger, so nothing moves. */
@media (any-pointer: coarse) {
  .acard__tabs button {
    position: relative;
  }
  .acard__tabs button::after {
    content: '';
    position: absolute;
    inset: -4px 0;
  }
  .wl__pills {
    row-gap: 12px;
  }
  .wl .wl__pill::after {
    content: '';
    position: absolute;
    inset: -6px -3px;
  }
  .auth__back::after,
  .auth__logo::after,
  .auth__mlogo::after {
    content: '';
    position: absolute;
    inset: -12px -8px;
  }
  .auth__mlogo {
    position: relative;
  }
  /* the card can start just under the link, so the hit area of the link stays above the edge of the card */
  .auth__back {
    z-index: 1;
  }
}
/* A short window in two columns, such as an iPad in Split View: the launch view gets smaller with the height, so
   it fits under the logo and above the ribbon. GiftRibbon sets the room around it. */
@media (min-width: 1001px) and (max-height: 540px) {
  .launch__eyebrow {
    margin-bottom: min(1.95vw, 3vh);
  }
  .launch__title {
    font-size: min(7vw, 12.5vh);
  }
  .launch__units {
    margin-top: min(4.45vw, 6vh);
  }
  .launch__num {
    font-size: min(5vw, 9vh);
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth__show::before {
    animation: none;
  }
  .acard__panes,
  .acard__pane,
  .acard__pane[inert] {
    transition: none;
  }
  .wl--done {
    animation: none;
  }
  .wl--leaving {
    transition: none;
  }
  .wl .wl__pill {
    transition: none;
  }
  .launch__count--in {
    animation: none;
  }
}