/* ontiqo.com/account on the account service (account.html): what account.css doesn't already have. */
.account h3{font-size:var(--t-18);margin:0}
.providers{display:grid;gap:var(--s2);max-width:440px}
.providers .btn{justify-content:center;width:100%}
.or{display:flex;align-items:center;gap:var(--s3);max-width:440px;margin:var(--s4) 0;color:var(--ink-3);font-size:var(--t-14)}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.section-lede{color:var(--ink-2);max-width:68ch;margin:0 0 var(--s4)}
.cards{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s4);display:grid;gap:var(--s3);margin-bottom:var(--s3)}
.panel p{margin:0;color:var(--ink-2)}
.panel .form{max-width:none}
.panel .hint{font-size:var(--t-14);color:var(--ink-3)}
.result{margin:0;font-size:var(--t-14);color:var(--ink-2)}
.result.bad{color:var(--bad)}
.result.good{color:var(--ink)}
.tip{color:var(--ink-2);margin:var(--s3) 0 0}
.account .fine{margin-top:var(--s6)}
.add-methods{margin-top:var(--s3);flex-wrap:wrap}
.computers .side{display:flex;gap:var(--s2);align-items:center}
.muted.small{font-size:var(--t-13)}
.btn.danger{color:var(--bad);border-color:currentColor}
#sync{margin-top:var(--s5)}
.flash{margin:0 0 var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r3);background:var(--surface)}
.account h3.sub-h{margin:var(--s5) 0 var(--s2)}
#link-email-form,#link-code-form{margin-top:var(--s3)}
/* Remove asks first (UNLOCK_FLOWS §5): one calm house dialog. */
dialog.confirm{width:min(420px,calc(100% - 32px));padding:var(--s5);border:1px solid var(--line-2);border-radius:var(--r3);background:var(--raised);color:var(--ink);box-shadow:var(--shadow)}
dialog.confirm::backdrop{background:rgb(0 0 0/.42)}
dialog.confirm h2{margin:0 0 var(--s2);font:600 var(--t-18)/1.3 var(--text)}
dialog.confirm p{margin:0 0 var(--s5);color:var(--ink-2)}
dialog.confirm .actions{display:flex;gap:var(--s2);justify-content:flex-end}
/* Each provider button carries its own mark, per the provider's sign-in guidelines. */
.btn.provider svg{width:18px;height:18px;flex:none}