/* The human pages: claim, the Call, key rotation. They wear the site's
   stylesheet (/style.css) and header; this file adds only what their forms
   need. */
:root { --error: #a32020; --ok: #1f6b3a; }
@media (prefers-color-scheme: dark) { :root { --error: #f08080; --ok: #7fd19b; } }
main.id-page > * { max-width: var(--measure); }
main.id-page section { border-top: 1px solid var(--rule); margin-top: var(--s4); }
main.id-page section > h2 { padding-top: var(--s4); }
label { display: block; margin: var(--s3) 0; font-weight: 500; }
label.check { display: flex; gap: .5rem; align-items: baseline; font-weight: 400; }
label input[type=text], label input:not([type]) { display: block; width: 100%; margin-top: var(--s1); font-weight: 400; }
.dev, button.dev { border: 1px dashed var(--muted); }
button.dev { color: var(--text); background: transparent; }
form.dev, fieldset.dev { padding: .4rem 1rem; margin: 1rem 0; border-radius: 6px; }
.tag { color: var(--muted); font-size: var(--step--1); margin: .4rem 0; }
code.wrap { word-break: break-all; }
.secret { padding: .2rem 1rem 1rem; border: 2px solid var(--accent); border-radius: 8px; }
.statement { padding: .2rem 0; }
.error { color: var(--error); }
.notice { color: var(--ok); }
button.quiet { color: var(--accent); background: transparent; }