/* The moving-average screener's sign-up stage: the sign-up page's two panels
   (what the digest holds, then the form), with the digest form on the white one. */

main.tl:has(.ma-signup) {
  /* Wide enough to fill the area beside the sidebar on a laptop or desktop,
     rather than leaving empty strips left and right of the stage and table. */
  max-width: 96rem;
  /* The stage is first on the page: less air above it, and between it and the title. */
  padding-top: 1rem;
  gap: 2rem;
}

/* main.tl for specificity: the sign-up page's own rules set a tall bottom (room
   for a wave this stage doesn't draw) and a top margin, at desktop widths. */
main.tl .ma-signup {
  margin: 0;
  max-width: none;
  padding: 1.5rem 1.25rem 1.75rem;
}

.ma-signup .signup__wave {
  display: none;
}

@media (min-width: 56rem) {
  main.tl .ma-signup {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 2.5rem;
    padding: 2rem 2.5rem;
  }

  .ma-signup .signup__panel {
    order: 0;
  }
}

.ma-signup__panel .tl-form__label,
.ma-signup__panel .tl-form__sample-title,
.ma-signup__panel .tl-form__sample li {
  color: var(--su-mute);
}

.ma-signup__panel .tl-form__email {
  background: #fff;
  color: var(--su-ink);
  border-color: var(--su-line);
}

.ma-signup__panel .tl-form__submit {
  background: var(--su-green-deep);
  color: #fff;
}



/* The distance column: the percentage, and a bar that runs left of a centre
   line for a stock under its average and right of it for one over. */
.tl-ma__distance {
  white-space: nowrap;
}

/* Room for the red edge of a below-the-average row, so it doesn't cover the rank. */
.tl-board--ma .tl-board__rank {
  padding-left: 0.9rem;
}

/* A fixed width for the percentage, so every row's bar starts in the same place
   and the centre lines line up down the column. */
.tl-ma__distance .tl-return {
  display: inline-block;
  min-width: 4.6rem;
}