/* Pegs onboarding. Components follow DESIGN-SYSTEM.md v0.3; values come from tokens.css only. */
*{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);font:var(--text-md)/var(--lh-body) var(--font-sans)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
main:focus,h1:focus{outline:none}
.skip{position:absolute;left:var(--space-2);top:calc(-1 * var(--space-7));background:var(--color-surface);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);z-index:1}
.skip:focus{top:var(--space-2)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* AuthShell: TopBar only, single column max 520px, no nav */
header.top{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--space-3) var(--space-4);display:flex;align-items:center;justify-content:space-between;min-height:var(--target-min)}
.logo{font-weight:var(--weight-strong);font-size:var(--text-lg)}
main{width:100%;max-width:520px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-7)}
h1{font-size:var(--text-xl);line-height:var(--lh-tight);margin:var(--space-2) 0}
h2{font-size:var(--text-lg);line-height:var(--lh-tight);margin:var(--space-5) 0 var(--space-3)}
h3{font-size:var(--text-md);line-height:var(--lh-tight);margin:0 0 var(--space-1)}
p{margin:0 0 var(--space-3)}
.muted{color:var(--color-text-secondary);font-size:var(--text-sm)}
.center{text-align:center}
.hero{text-align:center;padding-top:var(--space-5)}
.hero-icon{display:flex;justify-content:center;color:var(--color-brand)}
.hero-icon.ok{color:var(--color-success)}
.hero-icon.warn{color:var(--color-warning)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);box-shadow:var(--shadow-1);margin-bottom:var(--space-3)}
.stack-top{margin-top:var(--space-3)}

/* Button: primary / secondary / google */
.btn{min-height:var(--target-min);padding:0 var(--space-4);border-radius:var(--radius-sm);border:1.5px solid var(--color-brand);background:var(--color-brand);color:var(--color-on-brand);font-weight:var(--weight-strong);width:100%;margin-top:var(--space-2);display:flex;align-items:center;justify-content:center;gap:var(--space-2);text-decoration:none}
.btn.sec{background:var(--color-surface);color:var(--color-brand-strong)}
.btn.google{border-color:var(--color-border);color:var(--color-text);background:var(--color-surface)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[aria-busy=true]{cursor:progress}
.btn.inline{width:auto;margin-top:0;display:inline-flex}

/* LinkButton (+ disabled: secondary text, no underline) */
.linkbtn{background:none;border:0;text-decoration:underline;color:var(--color-brand-strong);min-height:var(--target-min);padding:0 var(--space-2);font-size:inherit}
.linkbtn[disabled]{color:var(--color-text-secondary);text-decoration:none;cursor:not-allowed}
.links{display:flex;flex-direction:column;align-items:center}

/* Divider "or" */
.or{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-secondary);font-size:var(--text-sm);margin:var(--space-4) 0 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--color-border)}

/* FormField */
label{display:block;font-weight:var(--weight-strong);font-size:var(--text-sm);margin:var(--space-4) 0 var(--space-1)}
input[type=text],input[type=email],select{width:100%;min-height:var(--target-min);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);padding:0 var(--space-3);background:var(--color-surface)}
[aria-invalid=true]{border-color:var(--color-danger)}
.err{color:var(--color-danger);font-size:var(--text-sm);margin-top:var(--space-1)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}

/* Alert */
.alert{background:var(--color-danger-tint);border-radius:var(--radius-sm);padding:var(--space-3);color:var(--color-danger);margin-bottom:var(--space-3);font-size:var(--text-sm)}

/* Stepper */
.prog{font-size:var(--text-xs);color:var(--color-text-secondary);margin-bottom:var(--space-1)}
.stepper{display:flex;gap:var(--space-1);margin:0 0 var(--space-4);padding:0;list-style:none}
.stepper li{flex:1;height:var(--space-2);border-radius:var(--radius-pill);background:var(--color-border)}
.stepper li.on{background:var(--color-brand)}

/* OptionCard (aria-pressed single choice) */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.opt{width:100%;min-height:calc(var(--target-min) + var(--space-5));border:1.5px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);font-weight:var(--weight-strong);padding:var(--space-3) var(--space-4)}
.opt.wide{align-items:flex-start;text-align:left;margin-bottom:var(--space-2)}
.opt .muted{font-weight:var(--weight-regular)}
.opt[aria-pressed=true]{border-color:var(--color-brand);background:var(--color-brand-tint)}

/* InstructionSteps */
ol.steps{padding:0;margin:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:var(--space-6) 1fr;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border)}
ol.steps li:last-child{border:0}
ol.steps li::before{content:counter(s);width:var(--space-6);height:var(--space-6);border-radius:var(--radius-pill);background:var(--color-brand-tint);color:var(--color-brand-strong);display:grid;place-items:center;font-weight:var(--weight-strong);font-size:var(--text-sm)}
ol.steps p{margin:0}

/* CopyField */
.addr{display:flex;gap:var(--space-2);align-items:center;background:var(--color-surface-sunken);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);margin-top:var(--space-2)}
.addr code{flex:1;font-size:var(--text-sm);word-break:break-all}

/* StatusCard + tags */
.tag{display:inline-block;font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);font-weight:var(--weight-strong);margin-bottom:var(--space-2);line-height:1}
.t-ok{background:var(--color-success-tint);color:var(--color-success)}
.t-warn{background:var(--color-warning-tint);color:var(--color-warning)}
.t-info{background:var(--color-brand-tint);color:var(--color-brand-strong)}
.status{display:flex;gap:var(--space-3);align-items:flex-start}
.status-card.timeout{border-color:var(--color-danger)}
.spin{width:var(--space-5);height:var(--space-5);border:var(--space-1) solid var(--color-brand-tint);border-top-color:var(--color-brand);border-radius:50%;animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.spin.sm{width:var(--space-4);height:var(--space-4);border-width:3px}
.btn .spin.sm{border-color:rgba(255,255,255,.35);border-top-color:currentColor}
.btn.ok{background:var(--color-success);border-color:var(--color-success);opacity:1}

/* CodeField: 6-digit one-time code, shown grouped "482 915" */
input.codefield{display:block;width:100%;min-height:calc(var(--target-min) + var(--space-3));border:1.5px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);text-align:center;font-size:var(--text-xl);font-weight:var(--weight-strong);letter-spacing:.25em;font-variant-numeric:tabular-nums;padding:0 var(--space-3)}
input.codefield[aria-invalid=true]{border-color:var(--color-danger);background:var(--color-danger-tint)}
input.codefield[readonly],input.codefield[disabled]{background:var(--color-surface-sunken);color:var(--color-text-secondary)}
.code{font-size:var(--text-xl);font-weight:var(--weight-strong);letter-spacing:.2em;margin-bottom:var(--space-2)}
.check{color:var(--color-success);flex:none}
.causes{margin:0 0 var(--space-3);padding-left:var(--space-5)}
.rowl{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* Children */
.kid{display:flex;align-items:center;gap:var(--space-3)}
.kid + .kid{margin-top:var(--space-2)}
.av{width:var(--space-6);height:var(--space-6);border-radius:var(--radius-pill);display:grid;place-items:center;color:var(--color-on-brand);font-size:var(--text-sm);font-weight:var(--weight-strong);flex:none}
.c1{background:var(--child-1)}
.c2{background:var(--child-2)}
.grow{flex:1}

/* MailChip */
.mailchip{display:inline-block;background:var(--color-surface-sunken);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);font-weight:var(--weight-strong);word-break:break-all;margin:var(--space-1) 0 var(--space-3)}

.devbar{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:var(--space-6);border-top:1px dashed var(--color-border);padding-top:var(--space-3)}
.gbtn{min-height:44px;display:flex;justify-content:center;margin-bottom:var(--space-3)}
#codeform label{margin-top:0}