/* /auth/email/: the email sign-in screens. Same look as /login/ (login.css) and the shared sign-in pills (signin.css). */
.email-auth h1 { font-size: clamp(30px, 8.4vw, 40px); }
.ea-form { margin-top: 30px; width: min(100%, 340px); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.ea-form[hidden] { display: none; }
.ea-label { font-size: 13.5px; color: #bdbdbd; margin-left: 6px; }
.ea-input { width: 100%; min-height: 54px; padding: 0 20px; border-radius: 999px; border: 1px solid #3a3a3a; background: #0c0c0c; color: #fff;
  font: inherit; font-size: 17px; outline: none; box-sizing: border-box; }
.ea-input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.ea-input[aria-invalid="true"] { border-color: #ff6b6b; }
.ea-code { text-align: center; font-size: 26px; letter-spacing: .35em; font-variant-numeric: tabular-nums; padding-left: calc(20px + .35em); }
.ea-primary { min-height: 52px; border-radius: 999px; border: 0; background: #fff; color: #000; font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; }
.ea-primary:disabled { opacity: .55; cursor: default; }
.ea-primary:focus-visible, .ea-secondary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ea-secondary { flex: 1; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #3a3a3a; background: transparent; color: #e6e6e6;
  font: inherit; font-size: 14px; cursor: pointer; }
.ea-secondary:disabled { color: #8a8a8a; cursor: default; }
.ea-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ea-hint { margin: 2px 6px; font-size: 13.5px; color: #8a8a8a; text-align: center; }
.ea-link { align-self: center; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #e6e6e6; text-underline-offset: 3px; }
.mock-note code { color: #fff; font-size: 14px; letter-spacing: .1em; }
.mock-note a { white-space: normal; word-break: break-all; }

/* login mode: "New to Sono? Sign up now" */
.ea-signup { margin: 22px 0 0; width: min(100%, 340px); padding-top: 16px; border-top: 1px solid #222; font-size: 15px; color: #a6a6a6; text-align: center; }
.ea-signup a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 4px; color: #fff; font-weight: 650; text-underline-offset: 4px; }
.ea-signup[hidden] { display: none; }