/* What only a logged-out page wants of the centered shell (centered_shell.css,
   which draws the frame): .app-main narrowed to a form, the check-email
   page's late note, and Terms in the footer. Flat for the same reason that
   file is. A generic part a logged-out page draws (.card-note) keeps its
   look in application.css; only how this page brings it in lives here.

   Each width is the content's plus .app-main's 2rem gutter a side, since
   the box is border-box: 40rem holds a 36rem column. On a phone every cap
   is wider than the viewport, so the gutter is all that bounds the page. */

/* ---------- The page ---------- */

.logged-out .app-main {
  max-width: 40rem;
}

/* :has() rather than a `wide:` local threaded through the layout -- the
   shell wraps `yield` from layouts/application, so the page itself has no
   way to pass one in. The card sets its own width; this only stops the
   column from overriding it. */
.logged-out .app-main:has(.signup-shell--wide) {
  max-width: 56rem;
}

/* A long read, not a form (long_read.css). */
.logged-out .app-main:has(.long-read) {
  max-width: 48rem;
}

/* ---------- Check your email ----------

   The pointer to Spam (shared/_check_email_note) turns up ten seconds
   after the rest of the page, so the card opens to make room and the note
   then drops into it: appearing in a jump beside text the reader has
   already read would look like the page glitching, and downward because
   the card's edge is moving downward too.

   Three layers, because the card has to grow before the note is seen. The
   outer one is a one-row grid whose row opens from 0fr to 1fr (a height to
   `auto` won't animate, a grid row will), the clip hides what the row
   hasn't opened yet, and the .card-note falls in once most of the space is
   there. The gap above the note is the clip's ::before rather than a
   margin, which the global :first-child reset would zero, or padding, which
   a 0fr row can't shrink. */
.logged-out .check-email-note:not([hidden]) {
  display: grid;
  grid-template-rows: 1fr;
  animation: check-email-note-open 0.35s ease-out;
}

.logged-out .check-email-note-clip {
  min-height: 0;
  overflow: hidden;
}

.logged-out .check-email-note-clip::before {
  content: "";
  display: block;
  height: 1.25rem;
}

.logged-out .check-email-note .card-note {
  animation: check-email-note-drop 0.3s ease-out 0.2s backwards;
}

@keyframes check-email-note-open {
  from {
    grid-template-rows: 0fr;
  }
}

@keyframes check-email-note-drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ---------- The footer ---------- */

.logged-out .app-footer .inner {
  padding-block: 1rem 1.5rem;
}

.logged-out .app-footer a {
  font-size: 0.75rem;
  color: var(--color-warm-muted);
}