/* account pages: auth, onboarding, project-new, workspace. Uses tokens from app.css */

/* ---------- auth ---------- */
.auth-main{min-height:calc(100dvh - var(--header-h) - 180px);display:grid;place-items:start center;padding:var(--s6) 20px var(--s5)}
.auth-card{width:min(440px,100%);display:grid;gap:var(--s5)}
.auth-card .lead{font-size:16px}
.auth-card form{display:grid;gap:var(--s4)}
.pw{position:relative}
.pw .input{padding-right:56px}
.pw-btn{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:transparent;border-radius:10px;display:grid;place-items:center;color:var(--text-2)}
.pw-btn:hover{background:var(--bg);color:var(--text)}
.pw-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pw-btn .i-hide{display:none}
.pw-btn[aria-pressed=true] .i-show{display:none}
.pw-btn[aria-pressed=true] .i-hide{display:block}
.consent{align-items:flex-start;padding:10px 0;font-size:14px;line-height:1.5;color:var(--text-2);cursor:pointer}
.consent input{flex:none;margin:1px 0 0}
.consent a,.auth-alt a,.link{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.auth-alt{text-align:center;font-size:15px;color:var(--text-2)}
.auth-alt a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- wizard ---------- */
.wiz-main{padding:var(--s6) 20px var(--s5)}
.wiz{max-width:640px;margin-inline:auto;display:grid;gap:var(--s5)}
.wiz-head{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.wiz-count{font-size:14px;font-weight:600;color:var(--text-2)}
.wiz-count b{color:var(--text)}
.bar{height:8px;border-radius:99px;background:#E4E7F1;overflow:hidden}
.bar>i{display:block;height:100%;width:var(--w,0%);background:var(--accent);border-radius:inherit;transition:width .25s var(--ease)}
.step{display:grid;gap:var(--s4)}
.step[hidden]{display:none}
.step>h2{font-size:22px;line-height:1.25;font-weight:600;outline:0}
.step-lead{margin-top:calc(var(--s2) * -1)}
.wiz-actions{display:flex;gap:var(--s3);justify-content:space-between;margin-top:var(--s5)}
.wiz-actions .btn{min-width:150px}
.wiz-actions .btn[hidden]{display:none}
.wiz-actions .btn-primary{margin-left:auto}
.hs{font-size:13px;color:var(--text-2);min-height:20px}
.hs.ok{color:var(--ok);font-weight:500}
.hs.bad{color:var(--err);font-weight:500}
.skill-list{display:flex;flex-wrap:wrap;gap:8px;min-height:0}
.skill-list:empty{display:none}
.skill-chip{display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:0 0 0 14px;border-radius:99px;background:var(--accent-soft);color:#2B38C9;font-size:14px;font-weight:600}
.chip-x{width:44px;height:44px;margin:-4px 0;border:0;background:transparent;border-radius:50%;color:inherit;font-size:20px;line-height:1;display:grid;place-items:center}
.chip-x:hover{background:rgba(67,83,255,.14)}
.skill-add{display:flex;gap:var(--s2)}
.skill-add .input{flex:1;min-width:0}
.suggest{display:grid;gap:var(--s2)}
.fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--s2)}
.fieldset>legend{padding:0;font-size:14px;font-weight:600;margin-bottom:var(--s2)}
.opts{display:grid;gap:var(--s2)}
.opt{display:flex;gap:12px;align-items:center;min-height:52px;padding:10px 14px;border:1px solid var(--border-control);border-radius:var(--r-field);background:var(--surface);cursor:pointer;font-weight:500}
.opt input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.opt small{display:block;font-weight:400;color:var(--text-2);font-size:13px}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
@media(min-width:560px){.opts.two{grid-template-columns:1fr 1fr}}
.counter{font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.counter.bad{color:var(--err);font-weight:600}
.help-row{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline}
.xp-banner{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-field);background:var(--ok-soft);color:var(--ok);font-weight:600}
.xp-banner span{font-size:15px}
.done{display:grid;gap:var(--s5)}
.done[hidden]{display:none}
.rec-list{display:grid;gap:var(--s3)}
.rec{display:grid;gap:6px;padding:var(--s4);border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.rec:hover{border-color:var(--border-control)}
.rec h3{font-size:16px;font-weight:600}
.rec p{font-size:14px;color:var(--text-2)}
.done-cta{display:flex;gap:var(--s3);flex-wrap:wrap}

/* ---------- project-new ---------- */
.pn{max-width:760px;margin-inline:auto;display:grid;gap:var(--s5)}
.pn-form{display:grid;gap:var(--s5)}
.pn-sec{display:grid;gap:var(--s4)}
.pn-sec>h2{font-size:18px;font-weight:600}
.pn-grid{display:grid;gap:var(--s4)}
@media(min-width:640px){.pn-grid.two{grid-template-columns:1fr 1fr}}
.role-row{display:grid;gap:var(--s3);padding:var(--s4);border:1px solid var(--border);border-radius:14px;background:var(--bg)}
.role-row-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.role-row-head h3{font-size:14px;font-weight:600}
.pn-submit{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.pn-submit .btn{min-width:200px}
.app-main :is(input,textarea,select){scroll-margin-block:96px}
.pn-form .field .input[type=number]{max-width:160px}

/* ---------- workspace ---------- */
.ws{max-width:960px;margin-inline:auto;display:grid;gap:var(--s5)}
.ws-head{display:grid;gap:6px}
.ws-tabs{min-width:0;max-width:100%;overflow:hidden}
.ws-tabs .tabs{padding:2px 2px 4px}
.tab .cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:8px;border-radius:99px;background:var(--warn-soft);color:var(--warn);font-size:12px;font-weight:700}
.tab[aria-selected=true] .cnt{background:#fff;color:var(--text)}
.ws-panel{display:grid;gap:var(--s4);min-width:0}
.ws-panel:focus{outline:0}
.ws-panel[hidden]{display:none}
.sec-title{font-size:20px;font-weight:600;line-height:1.3}
.stat-grid{display:grid;gap:var(--s4)}
@media(min-width:720px){.stat-grid{grid-template-columns:1.2fr 1fr}}
.xp-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.xp-big strong{font-size:44px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lvl{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:99px;background:var(--text);color:#fff;font-size:13px;font-weight:600}
.note{font-size:13px;color:var(--text-2);padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--border)}
.next-step{display:grid;gap:var(--s3);align-content:start}
.next-step .eyebrow{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.badge-list{display:flex;flex-wrap:wrap;gap:var(--s3)}
.bdg{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 8px;border:1px solid var(--border-control);border-radius:99px;background:var(--surface);font-weight:600;font-size:14.5px}
.bdg:hover{border-color:var(--accent)}
.bdg-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.bdg-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.attn{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--warn-soft);border-color:#F2DCA3}
.attn p{color:var(--warn);font-weight:600}
.item{display:grid;gap:var(--s3);min-width:0}
.item-top{display:flex;gap:var(--s3);align-items:flex-start}
.item-top>div{min-width:0;flex:1}
.item h3{font-size:17px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.item .meta{font-size:14px;color:var(--text-2);display:flex;gap:4px 12px;flex-wrap:wrap}
.item .meta a{color:var(--accent);font-weight:600}
.item a.ttl:hover{text-decoration:underline}
.msg{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere;padding:12px 14px;border-radius:12px;background:var(--bg)}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.actions .btn{min-width:132px}
.item-err{font-size:14px;color:var(--err);font-weight:500}
.item-err:empty{display:none}
.sub-title{font-size:15px;font-weight:600;color:var(--text-2);margin-top:var(--s2)}
.sk-card{height:120px;border-radius:var(--r-card)}
.err-box{display:grid;gap:var(--s3);justify-items:start}
.err-box .form-alert{width:100%}
.people{display:grid;gap:var(--s3)}
.person{display:flex;gap:var(--s3);align-items:center;min-width:0}
.person>div{min-width:0}
.person strong{display:block;overflow-wrap:anywhere}
.link-plain:hover{text-decoration:underline}
.ws-confirm{display:grid;gap:var(--s4)}
.ws-confirm .actions{justify-content:flex-end}
.modal-dl{display:grid;gap:var(--s3)}
.modal-dl dt{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
.modal-dl dd{margin:2px 0 0}

@media(max-width:480px){
  .actions .btn{flex:1 1 140px}
  .xp-big strong{font-size:38px}
  .wiz-actions .btn{min-width:0;flex:1}
}

/* ---------- Google sign-in ---------- */
.g-alt{display:grid;gap:var(--s3)}
.or{display:flex;align-items:center;gap:var(--s3);color:var(--text-2);font-size:13px;font-weight:600}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--border)}
.g-slot{min-height:44px;display:flex;justify-content:center}
.g-slot.is-busy{opacity:.55;pointer-events:none}