/* The login, callback and account pages: site.css (served at /site.css) plus these. */

.site-head .head-back { margin-left: auto; color: var(--ink); font-weight: 600; text-decoration: none; padding: 0.5rem 0.25rem; }
.site-head .head-back:hover { text-decoration: underline; }

.auth-main { display: grid; justify-items: center; padding-block: clamp(2rem, 1rem + 5vw, 5rem) var(--section); }
.auth-card {
  width: 100%; max-width: 28rem;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 1.25rem;
  padding: clamp(1.25rem, 0.75rem + 2vw, 2rem);
}
.auth-card h1 { font-size: var(--step-3); }
.auth-lede { color: var(--ink-2); }
.auth-wide { width: 100%; }

.auth-or { display: flex; justify-content: center; color: var(--ink-2); font-size: var(--step--1); margin: 1.25rem 0; }
.auth-signup-code { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
/* .btn sets display, which would otherwise beat the hidden attribute (the redirect Google button). */
.auth-card .btn[hidden] { display: none; }

.auth-form { display: grid; gap: 0.5rem; }
.auth-form[hidden], #choose[hidden], #googleBlock[hidden], .auth-google[hidden] { display: none; }
.auth-form label { font-weight: 700; font-family: var(--font-display); }
.auth-form input {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: var(--radius-s);
  padding: 0.65rem 0.75rem; min-height: 2.875rem; width: 100%;
}
.auth-form input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink-2); }
#code { font-size: 1.375rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.auth-form .btn { margin-top: 0.5rem; }
.auth-links { margin: 0.5rem 0 0; font-size: var(--step--1); color: var(--ink-2); }

.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: var(--tap); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}
button:disabled { opacity: 0.6; cursor: default; }

.auth-message { margin: 1rem 0 0; padding: 0.75rem 0.9rem; border-radius: var(--radius-s); background: var(--warn-bg); color: var(--warn-ink); font-weight: 600; }
.auth-message a { color: inherit; }
.auth-legal { margin: 1.5rem 0 0; }

/* Account page */
.account-card { max-width: 36rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.25rem; margin: 0 0 1.5rem; }
.facts dt { font-weight: 700; font-family: var(--font-display); }
.facts dd { margin: 0; color: var(--ink-2); }
.account-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.5rem; }
.danger, .section { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1.5rem; }
.section[hidden] { display: none; }
.danger h2, .section h2 { font-size: var(--step-1); }
.btn-danger { background: #b42318; color: #fff; border-color: #8f1c13; }
.btn-danger:hover { background: #c8281c; }
.btn-danger:disabled:hover { background: #b42318; }
@media (max-width: 30rem) { .facts { grid-template-columns: 1fr; gap: 0.15rem; } .facts dd { margin-bottom: 0.5rem; } }
/* Turnstile (managed, shown only when it needs a click): at most the card's width. */
.auth-captcha { max-width: 100%; }
.auth-captcha.is-open { margin-top: 1rem; }
.auth-captcha[hidden] { display: none; }
.auth-google { display: flex; justify-content: center; min-height: 44px; }