/* The sign-in pages after Cognito (plan phase 3b): finishing a new account and connecting an existing one. */
.sign-in-page { max-width: 480px; padding-block: clamp(32px, 8vw, 72px); display: grid; gap: 16px; }
.sign-in-page h1 { font-size: clamp(28px, 7vw, 38px); line-height: 1.15; }
.sign-in-page p { color: var(--ink-2); }
.sign-in-form { display: grid; gap: 14px; padding: 20px; border-radius: var(--radius-card); background: var(--card); box-shadow: 0 0 0 1px var(--card-edge); }
.sign-in-form label { display: grid; gap: 6px; font-weight: 600; }
.sign-in-form input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 14px; background: var(--fill); color: var(--ink); font: inherit; }
.sign-in-form input[readonly] { color: var(--ink-2); }
.sign-in-form .hint { font-weight: 400; font-size: 14px; color: var(--ink-3); }
.sign-in-form .button { justify-self: start; }
.sign-in-error { padding: 10px 14px; border-radius: 14px; background: var(--note-bg); color: var(--note) !important; }
.sign-in-page .small { font-size: 14px; }
.two-step-steps { display: grid; gap: 12px; margin: 0; padding-left: 22px; color: var(--ink-2); }
.two-step-steps li { padding-left: 4px; }
/* QR codes need a light background to scan, in dark mode too. */
.two-step-qr { display: block; width: 200px; height: 200px; margin: 10px 0; padding: 8px; border-radius: 14px; background: #fff; }
.two-step-key { font: 600 15px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; overflow-wrap: anywhere; color: var(--ink); }
/* The image removal form (GitHub issue #290): a text box, choices and a statement to tick. */
.sign-in-form textarea { width: 100%; padding: 10px 14px; border: 1px solid transparent; border-radius: 14px; background: var(--fill); color: var(--ink); font: inherit; resize: vertical; }
.sign-in-form fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.sign-in-form legend { padding: 0 0 6px; font-weight: 600; }
.sign-in-form label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.sign-in-form label.check input { flex: none; width: 20px; min-height: 0; height: 20px; margin-top: 2px; padding: 0; accent-color: var(--ink); }
.removal-form + .small, .sign-in-page .hint { font-size: 14px; color: var(--ink-3); }