/* The sign-in page (web spec §8.3, §8.4). Every field and button has at least
   16 px text: iOS zooms in on a smaller field when it takes focus (§12.2). */
:root { color-scheme: light dark; --bg: #f4f4f6; --card: #fff; --label: #1d1d1f; --label-2: #6e6e73; --line: rgba(0, 0, 0, 0.12); --accent: #0066cc; --err: #d70015; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1c1c1e; --card: #2c2c2e; --label: #f5f5f7; --label-2: #a1a1a6; --line: rgba(255, 255, 255, 0.14); --err: #ff6961; }
}
html, body { margin: 0; background: var(--bg); color: var(--label); font: 16px -apple-system, system-ui, sans-serif; }
.login { max-width: 360px; margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.login h1 { margin: 0 0 8px; font-size: 28px; }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.login-card h2 { margin: 0; font-size: 17px; }
.login-hint { margin: 0; color: var(--label-2); font-size: 14px; }
.login-hint code { font-size: 14px; word-break: break-all; }
#add { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 14px; color: var(--label-2); }
input, button { font: inherit; font-size: 16px; }
input { min-height: 44px; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--label); }
#code { letter-spacing: 0.12em; text-transform: uppercase; }
button { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--label); cursor: pointer; font-weight: 600; }
/* White on #0066cc is 5.6:1 (on #0a84ff it was 3.65:1), as on the app page's line. */
.login-primary, #add-submit { background: var(--accent); color: #fff; border-color: transparent; }
button:disabled { opacity: 0.5; cursor: default; }
.login-message { margin: 0; min-height: 1.4em; color: var(--err); }