@import url("/static/tokens.css");
@import url("/static/ui.css");

/* Set-up (/onboarding) and choosing companies (/companies). Same system as the
   dashboard: flat surfaces, hairlines, four radii, no pills. */

/* ── header / progress rail ─────────────────────────────── */
.obhead{display:flex;align-items:center;gap:var(--space-6);padding:12px var(--space-6);
  background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.obbrand{flex:0 0 auto}
.rail{display:flex;gap:var(--space-2);flex:1;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);
  padding:4px 12px 4px 4px;border-radius:var(--radius-m);border:1px solid transparent}
.step i{width:22px;height:22px;border-radius:var(--radius-s);background:var(--quill-empty);color:var(--muted);
  display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.step.is-active{color:var(--ink);border-color:var(--line)}
.step.is-active i{background:var(--ink);color:var(--ground)}
.step.is-done{color:var(--ink)}
.step.is-done i{background:var(--ink);color:var(--ground);font-size:0}
.step.is-done i::after{content:"✓";font-size:12px}
#theme{font-size:13.5px;padding:6px 12px}

/* ── panes ──────────────────────────────────────────────── */
.obmain{max-width:960px;margin:0 auto;padding:var(--space-8) var(--space-6) 96px}
.pane{display:none}
.pane.is-active{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1{font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.06;margin:0 0 10px;text-wrap:balance}
.lede{color:var(--muted);margin:0 0 var(--space-6);max-width:62ch;font-size:17px}

/* ── drop zone ──────────────────────────────────────────── */
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--space-8) var(--space-5);
  border:1.5px dashed var(--line-strong);border-radius:var(--radius-xl);background:var(--surface);
  cursor:pointer;transition:border-color .15s;text-align:center}
.drop:hover,.drop.over{border-color:var(--ink)}
.dropicon{width:40px;height:40px;border-radius:var(--radius-m);border:1px solid var(--line-strong);color:var(--ink);
  font-weight:700;display:grid;place-items:center;font-size:17px;margin-bottom:4px}
.dropmain{font-size:16px;font-weight:600}
.dropmain u{color:var(--cherry);text-decoration-thickness:1px;text-underline-offset:3px}
.dropsub{font-size:13.5px;color:var(--muted)}
.dropfile{margin-top:var(--space-2);font-size:13.5px;color:var(--ink);font-weight:600;
  padding:4px 12px;border:1px solid var(--ink);border-radius:var(--radius-s)}

.or{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-5) 0;color:var(--muted);font-size:13.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

textarea{width:100%;font-size:15px;padding:12px 14px;border-radius:var(--radius-m);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);resize:vertical;line-height:1.6}

/* ── buttons ────────────────────────────────────────────── */
.rowbtns{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap}
.rowbtns.sticky{position:sticky;bottom:0;background:linear-gradient(transparent,var(--ground) 26%);
  padding:var(--space-4) 0 10px;margin-top:var(--space-4)}
.primarybtn{font-size:15px;padding:12px 22px}
.hintline{font-size:13.5px;color:var(--muted)}
.errbox{margin-top:var(--space-4);padding:12px 14px;border-radius:var(--radius-l);font-size:14px;
  border:1px solid var(--amber);color:var(--ink);background:var(--surface)}
.errbox::before{content:"!";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:10px;
  border-radius:var(--radius-s);background:var(--amber);color:var(--on-amber);font-weight:700;font-size:12px;vertical-align:1px}

/* ── industries ─────────────────────────────────────────── */
.indgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:10px}
.ind{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:var(--radius-l);
  border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .15s;
  text-align:left;color:var(--ink);position:relative}
.ind:hover{border-color:var(--line-strong)}
.ind.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ind .indname{font-weight:600;font-size:15px;padding-right:24px}
.ind .indwhy{font-size:13px;color:var(--muted);line-height:1.45}
.ind .tick{position:absolute;top:13px;right:14px;width:18px;height:18px;border-radius:var(--radius-s);
  border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:11px;color:transparent}
.ind.on .tick{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.addrow{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
.addrow input{flex:1;font-size:15px;padding:9px 12px;border-radius:var(--radius-m);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);min-width:0}

.profpeek{margin-top:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-l);
  background:var(--surface);padding:0 16px}
.profpeek summary{cursor:pointer;padding:12px 0;font-size:14px;font-weight:600}
.profpeek textarea{margin-bottom:var(--space-2);font-family:var(--font-mono);font-size:13px}
.tiny{font-size:13.5px;color:var(--muted);margin:0 0 var(--space-3)}

/* ── discovery progress: Tay's eye ──────────────────────── */
.discobar{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4)}
.discotext{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}

.pickbar{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;padding:12px 0;
  position:sticky;top:57px;background:var(--ground);z-index:12;border-bottom:1px solid var(--line)}
.pickbar input[type=search],.pickbar select{font-size:14px;padding:7px 11px;
  border-radius:var(--radius-m);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.pickbar input[type=search]{min-width:190px}
.spacer{flex:1}
.selcount{font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;
  padding:5px 12px;border-radius:var(--radius-m);border:1px solid var(--line)}

/* ── company chips ──────────────────────────────────────── */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:var(--space-2);margin-top:var(--space-3)}
.comp{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-l);
  border:1px solid var(--line);background:var(--surface);cursor:pointer;
  transition:border-color .12s;color:var(--ink);text-align:left}
.comp:hover{border-color:var(--line-strong)}
.comp.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.comp .tick{flex:0 0 18px;height:18px;border-radius:var(--radius-s);border:1.5px solid var(--line-strong);
  display:grid;place-items:center;font-size:11px;color:transparent}
.comp.on .tick{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.comp .cinfo{min-width:0;flex:1}
.comp .cname{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp .cmeta{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp .croles{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
  padding:2px 7px;border-radius:var(--radius-s);border:1px solid var(--line)}
.comp .cname em{font-style:normal;font-size:11px;font-weight:700;color:var(--cherry);margin-left:4px}
.emptypick{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);padding:34px;font-size:14px}

.missed{margin-top:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-l);
  background:var(--surface);padding:0 14px}
.missed summary{cursor:pointer;padding:12px 0;font-size:13.5px;font-weight:600}

/* ── footer ─────────────────────────────────────────────── */
.obfoot{position:fixed;bottom:0;left:0;right:0;display:flex;gap:var(--space-4);flex-wrap:wrap;
  align-items:center;padding:10px var(--space-6) calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);
  border-top:1px solid var(--line);font-size:13px;color:var(--muted);z-index:25}
.wscode code{font-family:var(--font-mono);font-size:13px;padding:2px 7px;border-radius:var(--radius-s);
  border:1px solid var(--line);color:var(--ink)}
.wsnote{flex:1;min-width:250px}
.obfoot .linkbtn{font-size:13px}
.privacy{margin-top:var(--space-5);font-size:13.5px;color:var(--muted);max-width:62ch}

.resumebar{margin:0 0 var(--space-5);padding:12px 16px;border-radius:var(--radius-l);font-size:14px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.resumebar strong{font-weight:650}
.resumebar a{color:var(--cherry);font-weight:600}

/* ── set-up step 2: what we'll look for ─────────────────── */
.who{padding:var(--space-4);border-radius:var(--radius-l);background:var(--surface);border:1px solid var(--line);
  margin:0 0 var(--space-2);max-width:680px}
.whoname{font-family:var(--font-display);font-size:23px;line-height:1.15}
.whoname span{font-family:var(--font-text);font-size:14px;color:var(--muted)}
.whohead{font-size:15px;color:var(--muted);margin-top:4px}
.h2{font-size:16px;font-weight:650;margin:var(--space-6) 0 4px}
.optional{font-size:12px;font-weight:600;color:var(--muted);margin-left:6px;padding:1px 7px;
  border:1px solid var(--line-strong);border-radius:var(--radius-s);vertical-align:2px}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);max-width:760px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:14px;padding:5px 6px 5px 12px;border-radius:var(--radius-m);
  background:var(--surface);border:1px solid var(--line)}
.chip button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:17px;line-height:1;padding:0 5px}
.chip button:hover{color:var(--ink)}
.itog{font-size:14px;padding:6px 13px;border-radius:var(--radius-m);cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.itog:hover{border-color:var(--line-strong)}
.itog.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}
#paneW .addrow{max-width:520px;margin-top:10px}
#paneW .tiny{margin:0 0 10px}

@media (max-width:640px){
  .obhead{gap:var(--space-3);padding:10px var(--space-4)}
  .rail .step span{display:none}
  .rail{flex-wrap:nowrap}
  .step:not(.is-active){padding:4px}
  .obmain{padding:var(--space-6) var(--space-4) 40px}
  .obfoot{position:static;padding:14px 16px 18px}
  h1{font-size:32px}
  .lede{font-size:15px}
  .obbrand .wa-word{display:none}
  .rowbtns .primarybtn{flex:1 1 100%}
}