/* public/login.css — the sign-in page (UI-20, r2.7 AU-1). No script on the page: the server sets body[data-state] and this
   sheet shows the matching message inside #signin-msg. Empty state: the link form only. `sent`: the code form only (the
   link form hides; "Use a different address" goes back to /login). `invalid`: both forms. The state rules carry
   #signin-msg so they out-rank the hiding rule (#1444: an id-bearing hide rule had out-ranked them and no message showed).
   Skin (#1444, 2026-11-03): the WorkWide brief style — one white card with a navy header band, the logo and a pill. */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: #edf0f5; color: #1f2430;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.signin { background: #fff; border: 1px solid #dde3ec; border-radius: 16px; padding: 0 32px; width: 100%; max-width: 400px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(44, 51, 68, .08); }
.signin-head { background: #2c3344; color: #fff; margin: 0 -32px 24px; padding: 26px 32px 20px; }
.signin-head img { display: block; width: 40px; height: 40px; margin-bottom: 14px; }
h1 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: #fff; }
.chip { display: inline-block; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px;
  padding: 3px 12px; font-size: 12.5px; margin-top: 10px; }
#signin-msg { margin: 0; font-size: 14px; }
body[data-state="sent"] #signin-msg { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: #dcfce7; }
body[data-state="invalid"] #signin-msg { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: #fee2e2; }
#signin-msg [data-msg] { display: none; }
body[data-state="sent"] #signin-msg [data-msg="sent"] { display: inline; color: #15803d; }
body[data-state="invalid"] #signin-msg [data-msg="invalid"] { display: inline; color: #b91c1c; }
form { display: grid; gap: 8px; }
#code-form { display: none; margin-top: 20px; padding-top: 16px; border-top: 1px solid #dde3ec; }
body[data-state="sent"] #code-form, body[data-state="invalid"] #code-form { display: grid; }
body[data-state="sent"] #link-form { display: none; }
body[data-state="sent"] #code-form { margin-top: 0; padding-top: 0; border-top: 0; }
#other-address { display: none; margin-top: 14px; font-size: 14px; text-align: center; color: #0a5bd0; }
body[data-state="sent"] #other-address { display: block; }
label { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
input { font: inherit; padding: 9px 12px; border: 1px solid #c9d2de; border-radius: 10px; color: #1f2430; }
input:focus { outline: 2px solid #0a5bd0; outline-offset: 0; border-color: #0a5bd0; }
button { font: inherit; margin-top: 6px; padding: 10px 18px; border: 0; border-radius: 999px; background: #0a5bd0; color: #fff; font-weight: 600; cursor: pointer; }
button:hover { background: #0849a8; }
.foot { margin: 24px -32px 0; border-top: 1px solid #dde3ec; padding: 14px 32px; color: #6b7280; font-size: 12px; }