/* app.threshield.net: additions to the site's own stylesheet (/assets/css/site.css). The app's CSP has no
 * 'unsafe-inline', so every style the pages need lives here. */
button.auth-btn{width:100%;font:inherit;font-size:15px;font-weight:600;text-align:left}
.auth-buttons{display:grid;gap:10px}
form.inline{display:inline}
.app-section{padding:40px 0 64px}
.app-narrow{max-width:560px;margin:0 auto}
.app-wide{max-width:980px;margin:0 auto}
.app-h1{font-size:30px;margin:6px 0 10px}
.app-h2{font-size:18px;margin:18px 0 4px}
.app-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.app-signed{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.note{padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);margin:0 0 18px}
.note.bad{border-color:#fda29b}
.pill.ok{color:#067647;background:rgba(6,118,71,.1)}
.pill.bad{color:#b42318;background:rgba(180,35,24,.08)}
.ws-actions .pill,.ws-row .pill{margin-bottom:0}
.ws-list{list-style:none;padding:0;margin:0}
.ws-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)}
.ws-row:last-child{border-bottom:0}
.ws-actions{display:flex;gap:10px;align-items:center}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
.choice{display:block;text-decoration:none;color:inherit}
.choice:hover{border-color:var(--accent)}
.app-table{width:100%;border-collapse:collapse}
.app-table td,.app-table th{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;font-size:15px}
.app-table .num{text-align:right}
.inline-field .suffix{white-space:nowrap}
@media(max-width:640px){.choice-grid{grid-template-columns:1fr}}

/* "Setting up your account…" (the portal's welcome animation) */
body.welcome{min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%,var(--navy-2),var(--navy));color:var(--on-navy);padding:24px 16px}
.wl{width:100%;max-width:520px;text-align:center}
.wl .brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:20px;text-decoration:none;margin-bottom:28px}
.wl .brand svg{width:30px;height:30px}
.wl .dot-light{color:#6f93ff}
.wl h1{color:#fff;font-size:clamp(26px,6vw,34px);letter-spacing:-.5px;margin:18px 0 8px}
.wl p{color:var(--on-navy-muted);margin:0 0 14px}
.wl a:not(.btn){color:#a9c2ff}
.shield{width:112px;height:128px;margin:0 auto}
.shield svg{width:100%;height:100%;overflow:visible}
.shield .outline{fill:none;stroke:rgba(255,255,255,.14);stroke-width:5}
.shield .trace{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:330;stroke-dashoffset:330;animation:wl-trace 2.6s ease-in-out infinite}
.shield .core{fill:var(--brand);transform-box:fill-box;transform-origin:center;animation:wl-pulse 2.6s ease-in-out infinite}
.shield .check{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.done .shield .trace{animation:none;stroke-dashoffset:0;stroke:var(--teal)}
.done .shield .check{transition:stroke-dashoffset .5s ease;stroke-dashoffset:0}
@keyframes wl-trace{0%{stroke-dashoffset:330}60%{stroke-dashoffset:0}100%{stroke-dashoffset:-330}}
@keyframes wl-pulse{0%,100%{transform:scale(.92);opacity:.85}50%{transform:scale(1);opacity:1}}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin:22px auto 18px;max-width:360px}
.bar i{display:block;height:100%;width:4%;background:linear-gradient(90deg,var(--brand),var(--teal));border-radius:99px;transition:width 1.2s ease}
/* .wl-scoped: www's site.css has its own .steps (a 3-column grid) that split these into columns (seen 2026-10-06) */
.wl .steps{display:block;list-style:none;padding:0;margin:0 auto 8px;max-width:360px;text-align:left;counter-reset:none}
.wl .steps li{display:flex;gap:10px;align-items:center;padding:6px 0;color:var(--on-navy-muted);opacity:.55;transition:opacity .4s}
.wl .steps li.on{opacity:1;color:#fff}.wl .steps li.past{opacity:.85}
.tick{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.3);flex:none}
.wl .steps li.on .tick{border-color:var(--accent);border-top-color:transparent;animation:wl-spin 1s linear infinite}
.wl .steps li.past .tick{background:var(--teal);border-color:var(--teal)}
@keyframes wl-spin{to{transform:rotate(360deg)}}
.panel[hidden]{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.shield .trace{animation:none;stroke-dashoffset:0}.shield .core{animation:none}.wl .steps li.on .tick{animation:none}.bar i{transition:none}}
/* sign-up: e-mail + Next, then the name and a few questions (owner 2026-10-06) */
.su-next{margin-top:18px}
.su-names{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.su-names{grid-template-columns:1fr}}
.email-first>input[type=email]{display:block;width:100%;box-sizing:border-box;font:16px var(--font);padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.email-first>input[type=email]:focus{outline:2px solid var(--brand);outline-offset:1px}
.su-skip{margin-top:10px}
.su-captcha{margin-top:16px;min-height:65px}
.form-card label.su-terms{margin-top:18px}