/* The sign in pages (layout "signin": /signin, /signin/email, /signin/text,
   a sign in link's page /signin/link/<token> and the persona picker /signin/demo).
   A file of its own, not base.css: until fix/resend-wait the service worker
   answered /static/ from its cache first whatever the ?v= said, so after a
   deploy a browser that had the app shell drew a new page with yesterday's
   file, and a new file was the only one fetched fresh. sw.js now answers a
   ?v= URL only with that version, but a browser still runs the old worker
   for its first page after the deploy that brings the new one. The tokens
   (--pine, --ink ...) and fonts still come from base.css and partials/theme.
   The wait pages' own rules are in signin-wait.css. */

/* The first page everyone sees, in the iPhone app and in a browser (Eric
   2026-10-22: "SIMPLE AF"): the brand's logo, one line, one big field and one
   giant button, then "Check your email" (or texts) in the same look. White
   and high contrast; the field and button are 72px tall (3em) with 24px text
   at the default size, and every size is in rem, so Aa and the phone's text
   size grow it all. Each size also has a cap in vw that only the largest
   text sizes reach (past about 1.6 times on a phone), so no word ever breaks
   and the heading stays the largest line. */
.shell-signin { background: #fff; font-size: 1.25rem; }
.signin-main { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; max-width: 30rem; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  --signin-gutter: clamp(16px, 1rem, 20px);
  padding: max(2rem, env(safe-area-inset-top)) max(var(--signin-gutter), env(safe-area-inset-right))
    max(4.5rem, 16vh, calc(env(safe-area-inset-bottom) + 3rem)) max(var(--signin-gutter), env(safe-area-inset-left)); }
.signin-head { text-align: center; }
.signin-logo { display: block; width: min(5.5rem, 26vw); height: auto; aspect-ratio: 1; margin: 0 auto 1.25rem; }
.signin-title { font-family: var(--serif); font-weight: 600; font-size: min(2.25rem, 11.5vw); line-height: 1.15; letter-spacing: -.005em;
  color: var(--ink); text-wrap: balance; overflow-wrap: normal; }
.signin-sent { margin: .875rem 0 0; font-size: min(1.25rem, 8vw); line-height: 1.4; color: var(--brown); text-wrap: balance; }
.signin-addr { display: block; margin-top: .25rem; font-size: min(1.25rem, 7vw); color: var(--ink); overflow-wrap: anywhere; }
.signin-form { margin: 2.5rem 0 0; }
.signin-form form { margin: 0; }
.signin-msg { margin: 0 0 .875rem; font-size: min(1.1875rem, 8vw); font-weight: 700; line-height: 1.3; color: #9A3523; text-wrap: balance; }
.signin-note, .signin-ok, .signin-info { color: var(--ink); }
.signin-label { display: block; margin: 0 0 .5rem; font-size: min(1.25rem, 8.5vw); font-weight: 700; color: var(--ink); }
.shell-signin .signin-input { display: block; width: 100%; min-height: 3em; margin: 0; padding: .25em .75em; font-size: min(1.5rem, 10vw); line-height: 1.2;
  color: var(--ink); background: #fff; border: 2px solid var(--brown-2); border-radius: 1rem;
  /* The phone's own font here, not Atkinson Hyperlegible: its slashed zero read as too technical in a typed phone
     number (Eric 10/24). Plain zeros on iPhone (SF) and Android (Roboto). */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.shell-signin .signin-input:focus { border-color: var(--pine); outline: 4px solid var(--select); outline-offset: 0; }
.signin-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3em; margin: 1rem 0 0; padding: .4em .75em;
  font: 700 min(1.5rem, 10vw)/1.15 var(--sans); text-align: center; text-wrap: balance; color: #fff; background: var(--pine); border: 2px solid var(--pine); border-radius: 1rem; cursor: pointer; }
.signin-btn:hover { background: var(--pine-d); border-color: var(--pine-d); }
.signin-btn-quiet { margin-top: 0; color: var(--pine); background: #fff; }
.signin-btn-quiet:hover { color: var(--pine-d); background: var(--tint); }
.signin-after { display: flex; flex-direction: column; align-items: center; margin: 1rem 0 0; text-align: center; }
.signin-after form { margin: 0; }
.signin-other { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: .25rem .5rem; font: 700 min(1.25rem, 8vw)/1.3 var(--sans);
  color: var(--pine); text-decoration: underline; text-underline-offset: .2em; background: none; border: 0; cursor: pointer; text-wrap: balance; }
.signin-other:hover { color: var(--pine-d); }

/* Buttons drawn as links ("Back to sign in", "Open in the Community app"):
   base.css colors every a:hover, which would hide the words. */
a.signin-btn { text-decoration: none; }
a.signin-btn:hover, a.signin-btn:visited { color: #fff; }
a.signin-btn-quiet, a.signin-btn-quiet:visited { color: var(--pine); }
a.signin-btn-quiet:hover { color: var(--pine-d); }

/* The sign in link's page (/signin/link/<token>, SPEC 6.1.2): the logo, one
   line with the masked address under it, one giant Sign in (and on an
   iPhone in Safari, Open in the Community app); a dead link: the logo, "This
   link no longer works" and Back to sign in. On a phone (the iPhone app,
   Safari on an iPhone or iPad, Chrome on Android) js/signin-link.js adds
   .link-signing to the body while it signs in: only the logo and "Signing
   you in" show, and the button comes back if it stops. */
.link-app { margin-top: 1rem; }
.link-wait { display: none; }
.link-signing .link-wait { display: block; }
.link-signing .link-live { display: none; }

/* The persona picker (/signin/demo, SPEC 6.5.7), a presenter's only page, in
   the same look: the logo, "Choose who to be", who is presenting, the cast
   as big tiles (two across; one across once the words no longer fit two),
   Back to me in a persona session and one Sign out. */
.pick-logo { width: min(4rem, 20vw); margin-bottom: 1rem; }
.pick-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10.25rem, 100%), 1fr)); gap: .75rem; margin: 2rem 0 0; }
.pick-group { grid-column: 1 / -1; margin: 1rem 0 0; font: 700 min(1.125rem, 7.5vw)/1.3 var(--sans); color: var(--brown); text-wrap: balance; }
.pick-group:first-of-type { margin-top: 0; }
.pick-tile { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 0; min-height: min(9rem, 40vw); margin: 0; padding: 1rem .75rem;
  font: inherit; text-align: center; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 1rem; cursor: pointer; }
.pick-tile:hover { border-color: var(--pine); background: var(--tint-2); }
.pick-current { border-color: var(--pine); background: var(--tint); }
.pick-tile .pick-face { width: min(3.25rem, 15vw); height: min(3.25rem, 15vw); font-size: min(1.125rem, 6vw); }
.pick-name { font-weight: 700; font-size: min(1.25rem, 8vw); line-height: 1.2; overflow-wrap: normal; text-wrap: balance; }
.pick-role { font-size: min(1.0625rem, 7vw); line-height: 1.3; color: var(--muted); text-wrap: balance; }
.pick-elsewhere { margin: 2rem 0 0; }
.pick-me { display: flex; flex-direction: column; margin: 2rem 0 0; }
.pick-me form { margin: 0; }
.pick-me .signin-btn { margin: 0 0 .75rem; }
.pick-me .signin-other { width: 100%; }

/* The Android install page (/android, nativeapp): the platform's logo, "Get
   the Community app for Android", one giant Install button and one short
   line about Android's question under it. */
.android-note { margin-top: 1rem; text-align: center; }