/* The pages before you are signed in (AUT-251 sign-in; AUT-256 the rest):
   sign up, password reset, email confirmation. One card on the design
   system's tokens, the environment said before anyone types a password.
   tokens.css is loaded first; every colour here is a token, so dark mode
   follows. Replaces account/css/style.css. */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    font-family: var(--font-family); background: var(--bg); color: var(--ink-900);
    display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
.card {
    width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-2); padding: 28px 28px 24px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; margin-bottom: 18px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.env {
    font-size: 10px; font-weight: 700; letter-spacing: .06em; background: var(--env-bg); color: var(--env-fg);
    padding: 2px 6px; border-radius: 4px;
}
h1 { font-size: 20px; font-weight: 650; margin: 0 0 4px; }
p.lead { margin: 0 0 18px; color: var(--ink-500); font-size: 13px; }
p.text { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-700); }
label { display: block; font-size: 12px; color: var(--ink-500); font-weight: 500; margin: 0 0 4px; }
.field { position: relative; margin-bottom: 14px; }
.field .hint { font-size: 12px; color: var(--ink-500); margin-top: 4px; }
input[type=email], input[type=password], input[type=text] {
    width: 100%; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-1);
    padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink-900); background: var(--surface);
}
/* Room for the eye whichever type the toggle has set (a shown password is
   type=text: has-toggle was never applied, AUT-387). */
input[type=password], .control input { padding-right: 40px; }
input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-100); }
/* The eye sits in the input: 40px tall input, 28px button, 6px in. */
.field .control { position: relative; }
.toggle {
    position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; background: transparent;
    color: var(--ink-500); cursor: pointer; border-radius: 4px;
}
.toggle:focus-visible { outline: 2px solid var(--focus); }
.submit {
    display: block; width: 100%; height: 40px; line-height: 40px; border: 0; border-radius: var(--r-1);
    background: var(--navy); color: var(--on-navy); font: 600 14px var(--font-family); cursor: pointer;
    margin-top: 4px; text-align: center; text-decoration: none; padding: 0;
}
.submit:hover { background: var(--navy-700); color: var(--on-navy); text-decoration: none; }
.links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; }
.links.center { justify-content: center; }
.links a { color: var(--link); text-decoration: none; }
.links a:hover { text-decoration: underline; }
.error {
    background: var(--state-missing-bg); border: 1px solid var(--state-missing-line); color: var(--ink-900);
    border-radius: var(--r-1); padding: 10px 12px; font-size: 13px; margin-bottom: 14px;
}
.error ul { margin: 0; padding-left: 18px; }
.login-footer { text-align: center; font-size: 12px; color: var(--ink-500); padding: 16px; }

/* The verifier page (AUT-380): one published document's text checked
   against the approved register. A wider card, the two answers first, then
   the facts the document itself prints. */
.card.verify { max-width: 560px; }
.verdict {
    border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-1);
    padding: 10px 12px; margin-bottom: 12px;
}
.verdict b { display: block; font-size: 15px; font-weight: 650; }
.verdict p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-700); }
.verdict.approved, .verdict.current { border-left-color: var(--state-ok-line); background: var(--state-ok-bg); }
.verdict.changed, .verdict.superseded, .verdict.withdrawn { border-left-color: var(--state-check-line); background: var(--state-check-bg); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 18px 0 0; font-size: 13px; }
dl.facts dt { color: var(--ink-500); }
dl.facts dd { margin: 0; color: var(--ink-900); overflow-wrap: anywhere; }
dl.facts code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
dl.facts .hint { display: block; font-size: 12px; color: var(--ink-500); }
@media (max-width: 420px) { dl.facts { grid-template-columns: 1fr; } dl.facts dd { margin-bottom: 6px; } }