/* Sign in, sign up and join screens on a phone (auth.js; the two-column layout is in app.css). Owner: Dan (UI).
   On a phone the big hero used to fill the first screen and push the form below the fold. Now: a short banner, the form straight under it, everything centred,
   and room at the bottom so the Feedback button never sits on a link. */
@media (max-width: 900px) {
  .entry-art { min-height: 0; padding: 22px 20px 20px; align-items: center; justify-content: center; text-align: center; }
  .entry-art svg { right: 50%; top: 0; height: 100%; opacity: .07; transform: translateX(50%); }
  .entry-art h1 { font-size: clamp(26px, 8vw, 34px); max-width: none; margin: 6px 0 4px; }
  .entry-pillars { font-size: 10px; letter-spacing: .16em; margin-top: 8px; }
  .entry .auth { max-width: 460px; padding: 22px 20px calc(96px + env(safe-area-inset-bottom)); text-align: center; }
  .entry .auth-mark { display: none; }   /* the top bar already shows the logo */
  .entry .auth h1, .entry .auth h2 { font-size: clamp(22px, 6.6vw, 28px); margin-top: 6px; }
  .entry .auth form, .entry .auth .form, .entry .auth label.f { text-align: left; }   /* fields read left to right; headings, buttons and links are centred */
  .entry .auth ul, .entry .auth li { text-align: left; }   /* a checklist reads left to right beside its ticks */
  .entry .auth .btn { width: 100%; }
  .entry .auth-foot, .entry .auth-alt { text-align: center; }
}