/* auth.css — the one door in. Narrow and quiet on purpose: a single decision
   on screen. Signup and login are the SAME Discord button, so the three
   checkmarks (not the heading) do the work of telling the two apart. */

.auth-panel { max-width: 440px; text-align: center; padding: 52px 40px; }
.auth-logo { width: 48px; height: 48px; font-size: 1.4rem; margin: 0 auto 18px; display: flex; }
.auth-panel h1 { font-size: 1.7rem; margin-bottom: 24px; }
.auth-btn { width: 100%; }

/* the three checkmarks: new user, returning user, what the trial costs.
   Hanging indent so wrapped lines sit under the text, not under the tick. */
.auth-safety { list-style: none; text-align: left; margin: 26px 0 0; }
.auth-safety li {
  padding: 10px 0 10px 24px; text-indent: -24px;
  font-size: 0.88rem; line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.auth-safety li:last-child { border-bottom: none; }
.auth-safety li::before {
  content: "✓"; color: var(--green); font-weight: 800;
  display: inline-block; width: 24px; text-indent: 0;
}

/* "your session ran out" banner, unhidden by auth-expiry-notice.js */
.auth-expired {
  background: var(--blurple-tint); color: var(--blurple);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 18px;
  font-size: 0.86rem; font-weight: 600;
}

/* phone-only heads-up: app session != browser session (see auth.html comment) */
.auth-note-mobile { display: none; }

@media (max-width: 600px) {
  .auth-panel { padding: 40px 24px; }
  .auth-note-mobile {
    display: block;
    margin-top: 14px; padding: 11px 14px;
    background: var(--blurple-tint); color: var(--blurple);
    border-radius: 10px; font-size: 0.82rem; font-weight: 600; text-align: left;
  }
}