/* The sign-up and email sign-in screens (onboarding), after the design's
   "First time UX" screens (Figma 662:56898, 662:56916 and 662:57506). Every
   colour, font, radius and space comes from design-system/tokens.css; only
   the sizes the design fixes are written here. On the sign-in page these
   rules sit on top of auth.css, so each is scoped to .screens and wins. */
.screens-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Figma's "bg" wash: its faint discovery lilac, gone by 220px. */
  background: linear-gradient(180deg, var(--background-discovery-light) 0, var(--surface-card) 220px);
  color: var(--text-body);
  font-family: var(--font-sans);
}
/* The landing page wraps the screens in a div, since its body also serves
   the flag-off page: that body takes no margin either. */
body:has(> .screens-page) { margin: 0; }
/* Figma's bar is 64px tall, with the 28px wordmark 18px down and 64px in. */
.screens-top { padding: 18px var(--space-16); }
.screens-top img { display: block; }
/* The design's column is 350px wide. */
.screens {
  flex: 1;
  width: 100%;
  max-width: calc(350px + 2 * var(--space-4));
  margin: 0 auto;
  padding: var(--space-10) var(--space-4);
  box-sizing: border-box;
}
/* The design centres the screen on the page. */
.screens-page > .screens {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* The email-code screens nested in the sign-in page take its column. */
.screens[data-kind="signin"] { flex: none; max-width: none; padding: 0; }
/* One track, as wide as the column: a wider headline overflows it, centred. */
.screens form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
/* Text for screen readers only: the fields show placeholders instead. */
.screens-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The design's headline is 48px and may be wider than the column. */
.screens-title {
  justify-self: center;
  /* 8px of padding keeps the descenders inside the text clip; the margin
     is 8px less, so the space around the headline stays the design's. */
  margin: 0 0 calc(var(--space-4) - 8px);
  padding-bottom: 8px;
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -1.92px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  background: var(--gradient-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* "Sign up. Building" in solid purple, then the gradient line under it. */
.screens-title-split {
  background: none;
  color: var(--icon-discovery);
}
.screens-title-split span {
  display: block;
  /* Room for the descenders, which the text clip would cut off. */
  margin: 2px 0 -8px;
  padding-bottom: 8px;
  background: var(--gradient-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 480px) {
  .screens-title { font-size: 36px; line-height: 38px; letter-spacing: -1.4px; white-space: normal; }
}
.screens-lead {
  margin: 0 0 var(--space-4);
  text-align: center;
  font-size: var(--fs-body-small);
  line-height: var(--lh-label-s);
  letter-spacing: var(--ls-body-small);
  color: var(--text-regular);
}
/* The design puts the lead 8px under the headline, and 32px over the rest. */
.screens-title + .screens-lead { margin-top: calc(-1 * var(--space-6)); }
.screens-strong { color: var(--text-strong); font-weight: 500; letter-spacing: var(--ls-label-s); }
/* The design's small print: under the button, then a short rule, then Log in. */
.screens-note, .screens-alt {
  margin: 0;
  text-align: center;
  font-size: var(--fs-label-s);
  line-height: var(--lh-label-s);
  letter-spacing: var(--ls-label-s);
  font-weight: 500;
  color: var(--text-light-done);
}
.screens-note { margin-top: var(--space-6); }
.screens .screens-note a { color: var(--button-borderless-text-default); text-decoration: underline; }
.screens .screens-alt a { margin-left: 2px; color: var(--button-borderless-text-default); text-decoration: none; }
.screens-rule {
  justify-self: center;
  width: 24px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border-light);
}
.screens-field { display: grid; gap: var(--space-1); }
.screens-label { font-size: var(--fs-body-small); color: var(--text-light); }
/* The fields are the design guide's text field from the primitives, at
   its medium size. */
.screens input:not([type="checkbox"]) {
  padding: var(--space-150) var(--space-200);
  font-size: var(--font-size-200);
  line-height: var(--line-height-250);
  border-radius: 12px;
}
.screens-tick {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--fs-body-small);
  line-height: var(--lh-body-small);
  color: var(--text-light);
}
/* The tick boxes are the design guide's checkbox, from the primitives. */
.screens-tick input {
  margin: 2px 0 0;
}
.screens a { color: var(--text-body); }
.screens .screens-wide { width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); }
/* Busy: the button shrinks to a pill holding only the guide's spinner,
   which comes from design-system/primitives.css. The label is still the
   button's text, so screen readers keep announcing it. */
.screens .btn-primary[aria-busy="true"] {
  justify-self: center;
  width: auto;
  min-width: calc(2 * var(--space-400) + 24px);
  padding: var(--space-150) var(--space-400);
  font-size: 0;
}
/* The design's code boxes are the guide's PIN: 56px square, 12px
   corners, 8px apart. */
.screens-boxes { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.screens .screens-boxes input {
  width: 56px;
  height: 56px;
  padding: 0;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  text-align: center;
}
.screens .screens-back {
  justify-self: center;
  margin-top: var(--space-4);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--fs-label-s);
  line-height: var(--lh-label-s);
  letter-spacing: var(--ls-label-s);
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
}
.screens .screens-back:disabled { color: var(--text-subtle); cursor: not-allowed; }
.screens-status {
  min-height: 1.5em;
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--fs-body-small);
  color: var(--text-light);
}
.screens-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-height: 64px;
  padding: 0 var(--space-16);
  box-sizing: border-box;
  font-size: var(--fs-label-xs);
  line-height: var(--lh-label-xs);
  letter-spacing: var(--ls-label-xs);
  font-weight: 500;
  color: var(--text-subtle);
}
.screens-foot nav { display: flex; align-items: center; gap: var(--space-4); }
.screens-foot a { color: var(--button-borderless-text-default); text-decoration: none; }
/* The grey links are the design guide's subtle link: they darken on
   hover and again when pressed. */
.screens :is(.screens-note, .screens-alt) a,
.screens-foot a {
  transition: color var(--motion-duration-hover) var(--motion-easing-standard);
}
.screens :is(.screens-note, .screens-alt) a:hover,
.screens-foot a:hover {
  color: var(--button-borderless-text-hovered);
}
.screens :is(.screens-note, .screens-alt) a:active,
.screens-foot a:active {
  color: var(--button-borderless-text-pressed);
}
.screens-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-subtle); }
@media (max-width: 600px) {
  .screens-top, .screens-foot { padding-left: var(--space-4); padding-right: var(--space-4); }
}
.screens [hidden], .screens[hidden] { display: none !important; }
/* Recovery's last screen, and the notes the flow shows when it needs them. */
.screens section { display: grid; gap: var(--space-4); }
.screens-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  text-align: center;
  font-size: var(--fs-label-s);
  line-height: var(--lh-label-s);
  color: var(--text-regular);
}
.screens a.btn-primary { color: var(--button-primary-text-default); text-decoration: none; }
.screens [data-saved], .screens [data-help] {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--fs-label-s);
  line-height: var(--lh-label-s);
  color: var(--text-light-done);
}
/* Sign-in's other ways in, under the short rule. */
.screens-more { display: grid; gap: var(--space-4); margin-top: var(--space-6); }