/* Goldfish Bowl — /app/ real-account screens (login, signup, waiting list,
   admin). Reuses app.css's colour and type variables so this matches the
   rest of the product, but these are plain server-rendered pages, not the
   JS app shell, so they get their own light layout rules on top. */

.auth-screen{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px calc(32px + env(safe-area-inset-bottom,0px));
}
.auth-card{
  width:100%;
  max-width:380px;
}
.auth-logo-wrap{
  background:#fff; border-radius:14px; padding:9px 20px; display:inline-flex;
  align-items:center; justify-content:center; margin-bottom:22px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.auth-logo{ height:24px; width:auto; display:block; }
.auth-eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 8px;
}
.auth-h1{ font-size:22px; font-weight:650; letter-spacing:-.01em; margin:0 0 6px; }
.auth-sub{ font-size:14px; color:var(--muted); line-height:1.5; margin:0 0 24px; }
.auth-error{
  background:rgba(232,98,63,.1); border:1px solid var(--hot); color:var(--hot);
  border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:16px; line-height:1.4;
}
.auth-status{
  background:var(--surface-2); border-radius:10px; padding:10px 12px; font-size:13px;
  color:var(--ink); margin-bottom:16px; line-height:1.4;
}
.auth-footer{
  margin-top:20px; text-align:center; font-size:13px; color:var(--muted);
}
.auth-footer a{ color:var(--accent); font-weight:600; text-decoration:none; }
.field-checkbox{
  display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:13.5px; color:var(--muted);
}
.field-checkbox input{ width:16px; height:16px; }

/* Waiting-list holding page */
.waiting-icon{
  width:52px; height:52px; border-radius:50%; background:var(--surface-2); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px;
}

/* The logged-in area (home, events, contacts, reminders, admin, menu) now
   reuses app.css's own .topbar/.content/.bottom-cta/.lead-row/.show-row
   components directly, the same ones the demo is built from, rather than
   a separate, plainer set invented for these pages. Nothing extra needed
   here for those; #screen without .auth-screen already lays out exactly
   like the demo's shell (see app.css). What's left below is just for the
   pages that come before an approved account exists, where that shell
   doesn't apply yet: login, signup, the waiting list, and the invite
   landing page. */