/* The sign-in page and the one-message pages (web/login.html, web/message.html): one card in the middle of the page. */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(400px, 100%); background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(22, 27, 38, 0.04); padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 14px; }
.login .wordmark { height: 22px; width: auto; align-self: flex-start; margin-bottom: 6px; }
.login h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.login p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.login form { display: flex; flex-direction: column; gap: 14px; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.login input { height: 40px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--radius-s); font-size: 15px; color: var(--ink);
  background: var(--paper); caret-color: var(--client); }
.login input:hover { border-color: var(--ink-2); }
.login .btn { height: 40px; margin-top: 4px; }
.login .err { color: var(--ink); font-weight: 600; }
.login .or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.login .or::before, .login .or::after { content: ""; flex: 1; border-top: 1px solid var(--hair); }
.login details > summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.login details[open] > summary { margin-bottom: 14px; }
/* the parts the page does not use stay hidden whatever their display above */
.login [hidden] { display: none !important; }