/* The sign in pages (layout "signin": /signin, /signin/email, /signin/text).
   A file of its own, not base.css: the service worker answers /static/ from
   its cache first (whatever the ?v= says) and refreshes it behind, so after
   a deploy a browser that has the app shell would draw the new sign in page
   with yesterday's base.css once; a new file is fetched fresh. The tokens
   (--pine, --ink ...) and fonts still come from base.css and partials/theme. */

/* 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; }
.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); }