/* Sign-in, two-step setup, recovery and password screens. 18px body, nothing under 15px, theme tokens only. */
:root{--sans:"Archivo",ui-sans-serif,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--t1);font:400 18px/1.55 var(--sans)}
a{color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.a-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1120px;margin:0 auto;padding:20px 24px}
.a-logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px;color:var(--t1);text-decoration:none}
.a-mark{width:28px;height:28px;border-radius:50%;border:3px solid var(--t1);display:grid;place-items:center}
.a-mark::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--t1)}
.a-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.call-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1.5px solid var(--line-3);border-radius:8px;color:var(--t1);text-decoration:none;font:600 16px/1 var(--sans);background:transparent}
.call-btn:hover{background:var(--s2)}
.a-main{max-width:440px;margin:24px auto 64px;padding:0 24px}
.a-main.wide{max-width:600px}
.a-main h1{font-size:28px;font-weight:600;line-height:1.25;margin:8px 0 10px;letter-spacing:-.01em;outline:none}
.a-main p{margin:0 0 14px}
.step-label{font-size:16px;font-weight:600;color:var(--t2);margin:0}
.field{margin:18px 0 0}
.field label{display:block;font-size:16px;font-weight:600;margin:0 0 6px;color:var(--t1)}
.field input[type=email],.field input[type=password],.field input[type=text]{width:100%;height:56px;padding:0 14px;border:1.5px solid var(--line-3);border-radius:8px;background:var(--s1);color:var(--t1);font:400 18px/1 var(--sans)}
.field input:focus{outline:2px solid var(--focus);outline-offset:1px}
.check{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:18px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--accent);margin:0}
.code-input{width:100%;max-width:220px;height:64px;padding:0 14px;border:1.5px solid var(--line-3);border-radius:8px;background:var(--s1);color:var(--t1);font:500 32px/1 var(--mono);letter-spacing:.12em}
.actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.actions.end{justify-content:flex-end}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:var(--accent-ink);font:600 18px/1 var(--sans);cursor:pointer;text-decoration:none}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary[disabled]{background:var(--s3);border-color:var(--line-2);color:var(--t2);cursor:not-allowed;filter:none}
.btn-primary.full{width:100%;margin-top:26px}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1.5px solid var(--line-3);border-radius:8px;background:transparent;color:var(--t1);font:600 18px/1 var(--sans);cursor:pointer;text-decoration:none}
.btn-secondary:hover{background:var(--s2)}
.btn-link{background:none;border:0;padding:0;color:var(--accent);font:400 18px/1.5 var(--sans);text-decoration:underline;cursor:pointer;min-height:44px}
.below{margin-top:18px}
.help{color:var(--t2);font-size:16px;margin-top:18px}
.alert{margin:0 0 18px;padding:14px 16px;border-radius:8px;border:1px solid var(--red-l);background:var(--red-w);color:var(--t1);font-size:18px}
.notice{margin:0 0 18px;padding:14px 16px;border-radius:8px;border:1px solid var(--line-2);background:var(--s2);color:var(--t1);font-size:18px}
.lock-panel{margin:0 0 18px;padding:14px 16px 14px 18px;border-left:4px solid var(--red);background:var(--s2);color:var(--t1);font-size:18px;border-radius:0 8px 8px 0}
.lock-panel strong{display:block;font-weight:600}
.lock-panel p{margin:4px 0 0}
.signup{margin-top:32px;padding-top:24px;border-top:1px solid var(--line-2);color:var(--t2);font-size:18px}
.signup a{color:var(--accent);text-decoration:underline}
.qr-tile{display:inline-block;background:var(--qr-tile);padding:16px;border-radius:8px;line-height:0;margin:8px 0 12px}
.qr-tile svg{width:240px;height:240px;display:block}
.key{font:500 20px/1.4 var(--mono);letter-spacing:.04em;word-spacing:.3em;margin:6px 0 10px;color:var(--t1)}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin:18px 0;padding:18px 20px;border:1px solid var(--line-2);border-radius:8px;background:var(--s2);list-style:none}
.codes li{font:500 20px/1.4 var(--mono);color:var(--t1)}
.btn-pair{display:flex;gap:12px;flex-wrap:wrap}
.btn-pair .btn-secondary{flex:1 1 160px}
.foot{max-width:1120px;margin:0 auto;padding:24px;color:var(--t2);font-size:15px;border-top:1px solid var(--line)}
@media (max-width:520px){.a-main{margin-top:8px}.a-main h1{font-size:26px}.codes{grid-template-columns:1fr 1fr;gap:8px 16px;padding:14px}.codes li{font-size:18px}.actions{flex-direction:column-reverse;align-items:stretch}.actions .btn-primary,.actions .btn-secondary{width:100%}}
/* Recovery codes print on one page: ink on white, only the codes and a heading. */
@media print{
  body{background:var(--qr-tile);color:var(--qr-ink)}
  .a-head,.foot,.no-print,.actions,.btn-pair,.check,.step-label{display:none!important}
  .a-main{max-width:none;margin:0;padding:0}
  .a-main h1{color:var(--qr-ink);font-size:20pt}
  .codes{background:var(--qr-tile);border:1px solid var(--qr-ink);break-inside:avoid}
  .codes li{color:var(--qr-ink);font-size:14pt}
  .print-note{display:block!important;color:var(--qr-ink)}
}
.print-note{display:none}
/* (The faint grid is the shared .sb-grid.faint from theme.css now, on each heading block; see .a-hero below.) */
/* ---- design pass 2: sign-in, two-step and setup (Design Critic list) ---- */
/* Link spacing: one rhythm for the links and buttons under a form. */
.a-main p.below{margin:16px 0 0}
.a-main p.below + p.below{margin-top:12px}
.a-main p.help{margin-top:24px}
.a-main p.signup{margin-top:32px}
/* One message slot under the intro: notice, Locked panel or error, never two at once. */
.msg-slot:empty{display:none}
.lock-panel strong{font-size:20px;line-height:1.3}
.lock-panel:focus{outline:2px solid var(--focus);outline-offset:2px}
/* Disabled primary reads as disabled in dark too (3:1 border, muted text). */
.btn-primary[disabled],.btn-primary:disabled{background:var(--s3);border:1.5px solid var(--line-3);color:var(--t2)}
/* Theme toggle: 8px between the glyph and the words. */
[data-theme-toggle],.btn-secondary{gap:8px}
/* Setup steps sit on a framed surface; the header grid stays visible around it, never under the fields. */
.setup-main > section{background:var(--s2);border:1px solid var(--line-2);border-radius:12px;padding:32px}
@media (max-width:520px){.setup-main > section{padding:20px}}
@media print{.setup-main > section{background:none;border:0;padding:0}}

/* ---- admin-change cancel link (copy-kit §11j-2) ---- */
.a-main p.big{font-size:18px;line-height:1.55;margin:0 0 24px}
.text-link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.btn-danger{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border:1px solid var(--red);border-radius:8px;background:var(--red);color:var(--s1);font:600 18px/1 var(--sans);cursor:pointer}
.btn-danger:hover{filter:brightness(1.07)}
.btn-danger:disabled{background:var(--s3);border:1.5px solid var(--line-3);color:var(--t2);cursor:progress;filter:none}
.btn-danger.full{width:100%;margin-top:10px}
.btn-danger:focus-visible,.btn-outline:focus-visible,.btn-primary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border:1.5px solid var(--line-3);border-radius:8px;background:transparent;color:var(--t1);font:600 18px/1 var(--sans);text-decoration:none}
.btn-outline:hover{background:var(--s2)}
@media (max-width:520px){#done .btn-primary,#used .btn-outline{width:100%}}
/* Locked on the code, recovery or setup screen: the sign-in Locked panel, then one 56px way back. */
#v-locked .lock-panel{margin-top:8px}
#v-locked .lock-back{margin:24px 0 0}
@media (max-width:520px){#v-locked .lock-back .btn-primary{width:100%}}
/* Homepage header and check-in-circle mark on every sign-in page (not the old bullseye). 1200 frame like home. */
.a-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1200px;min-height:68px;margin:0 auto;padding:0 24px;border-bottom:1px solid var(--line-2)}
.a-nav .a-logo{font-weight:700;font-size:19px;letter-spacing:-.01em;font-variation-settings:"wdth" 92;gap:10px}
.a-logo svg{display:block;flex:none}
.a-check{stroke:var(--accent)}
.a-navlink{display:inline-flex;align-items:center;min-height:44px;font-size:16px;color:var(--t1);text-decoration:none}
.a-navlink:hover{text-decoration:underline}
/* Shared faint grid behind the heading block only; it stops at the block's bottom edge, never under a field. */
.a-hero{padding:16px 0 4px}
.a-main .sb-grid::before{inset:0 -24px 0 -24px}
.setup-main .sb-grid::before{inset:-32px -32px 0 -32px}
/* Title-block footer with the Display toggle (same frame as the homepage). */
.a-tb{display:grid;grid-template-columns:1.3fr 2.6fr 1.3fr auto;max-width:1152px;margin:48px auto 0;border-top:1px solid var(--t1);border-bottom:1px solid var(--line-2)}
.a-tb > div{padding:14px 16px;border-right:1px solid var(--line-2);font-size:15px;min-height:82px}
.a-tb > div:last-child{border-right:0}
.a-tb .k{display:block;font-stretch:75%;font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:15px;color:var(--t2);margin-bottom:6px}
.a-tb p{margin:0;color:var(--t2);font-size:15px;line-height:1.5}
.a-tb .a-logo-sm{font-size:16px;font-weight:700;gap:8px;margin-bottom:4px}
.a-tb .tb-link{display:inline-flex;align-items:center;min-height:44px;font:500 16px/1.35 var(--sans);color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.a-tb .btn-secondary{min-height:44px;font-size:16px;padding:0 14px}
@media (max-width:760px){.a-tb{grid-template-columns:1fr 1fr;margin:40px 24px 0}.a-tb > div{border-bottom:1px solid var(--line-2)}.a-tb > div:nth-child(2n){border-right:0}}
@media print{.a-nav,.a-tb{display:none!important}}

/* "Keep me signed in on this device" (sign-in and two-step pages): the box, then one line of plain help under it. */
.check.remember{align-items:flex-start}
.check.remember input{flex:none;margin-top:3px}
.remember-help{margin:4px 0 0 32px;font-size:16px;line-height:1.45;color:var(--t2)}