/* ============================================================================
   CloserKit — shared onboarding stylesheet.

   ⚠️ THIS FILE IS DUPLICATED ACROSS TWO REPOSITORIES AND MUST STAY IDENTICAL.
      • closerkit-signup/closerkit.css   (this file — signup)
      • closerkit/css/closerkit.css      (the app — complete-account)

   The two repos are separate, deploy to separate Cloudflare Pages projects, and
   share no build step, so there is nowhere for one copy to live. A change to
   either MUST be applied to both — diff them before shipping.

   Signup-only rules (the private-beta gate) are deliberately NOT here; they live
   in a <style> block in signup's index.html, so this file stays byte-identical
   between the two repos.

   Source: design handoff 2026-08-02. Do not restyle — the prototype is the
   visual reference of record.
   ============================================================================ */

/* ============================================================
   CloserKit onboarding — shared stylesheet
   Used by BOTH signup.html and complete-account.html.
   The two surfaces share this file 1:1 — it has NOT diverged.
   Font: Hanken Grotesk (loaded via Google Fonts in each page's <head>).
   ============================================================ */

:root{
  --slate:#2d3748; --teal:#0d9488; --teal-dark:#0b827a; --teal-light:#5eddd0;
  --muted:#718096; --faint:#a0aec0; --border:#cbd5e0; --border-lt:#e6ecf0;
  --tint:#e6f6f4; --wash:#f0fdf9; --chip:#99e3dc;
  --red:#dc2626; --red-wash:#fef2f2; --red-border:#fecaca;
  --panel:#f4f7f9; --num-ink:#0f172a; --num-sub:#64748b;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;background:var(--panel);
  -webkit-font-smoothing:antialiased;min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:44px 24px;
}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-dark)}
input,button{font-family:inherit}
input::placeholder{color:var(--faint)}
[hidden]{display:none !important}

@keyframes ckspin{to{transform:rotate(360deg)}}
@keyframes ckpulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- shared primitives ---------- */

.card{background:#fff;border-radius:16px;border:1px solid var(--border-lt);box-shadow:0 18px 50px rgba(45,55,72,.08)}

.h1{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--slate);text-align:center;margin:0 0 6px}
.h1--success{font-size:26px}
.sub{font-size:15px;color:var(--muted);line-height:1.5;text-align:center;margin:0 0 26px}

.fields{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.label{font-size:13px;font-weight:600;color:var(--slate)}
.helper{font-size:13px;color:var(--faint);line-height:1.5;margin-top:14px}
.err-text{font-size:13px;font-weight:500;color:var(--red)}

.input{
  padding:12px 14px;font-size:16px; /* 16px is deliberate — prevents iOS Safari zoom on focus. Do not reduce. */
  border:1.5px solid var(--border);border-radius:10px;background:#fff;color:var(--slate);
  outline:none;width:100%;
}
.input:focus{border-color:var(--teal)} /* focus = border colour only. No ring, no shadow, no outline. */
.input--error{border-color:var(--red);background:var(--red-wash)}
.input--error:focus{border-color:var(--teal)}

.btn{
  width:100%;padding:13px;font-size:15px;font-weight:600;color:#fff;background:var(--teal);
  border:none;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
}
.btn:hover{background:var(--teal-dark)}
.btn:disabled{background:var(--border);cursor:not-allowed}
.btn:disabled:hover{background:var(--border)}

.link-btn{background:none;border:none;padding:0;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer}
.link-btn:hover{color:var(--slate)}
.teal-link{background:none;border:none;padding:0;font-size:14px;font-weight:600;color:var(--teal);cursor:pointer}
.teal-link:hover{color:var(--teal-dark)}

.alert{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:12px 14px;margin-bottom:18px}
.alert__badge{width:20px;height:20px;flex:none;border-radius:50%;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.alert__text{font-size:14px;font-weight:500;color:var(--slate);line-height:1.45}
.alert--info{background:var(--tint)}
.alert--info .alert__badge{background:var(--teal)}
.alert--error{background:var(--red-wash);border:1px solid var(--red-border)}
.alert--error .alert__badge{background:var(--red)}

.spin{display:inline-block;width:17px;height:17px;border:2.5px solid var(--border-lt);border-top-color:var(--slate);border-radius:50%;animation:ckspin .7s linear infinite;flex:none}
.spin--white{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.spin--teal{width:22px;height:22px;border-color:var(--tint);border-top-color:var(--teal)}

/* success / done card (identical on both surfaces) */
.final-card{width:440px;max-width:100%;padding:48px 40px 44px;text-align:center}
.final-card__circle{width:76px;height:76px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.final-card__body{font-size:15px;color:var(--muted);line-height:1.5;margin-bottom:26px}
.final-card__body strong{color:var(--slate);font-weight:600;font-variant-numeric:tabular-nums}
.final-card__spin{display:flex;justify-content:center}

/* ============================================================
   SURFACE 1 — SIGNUP
   Page state: <body data-step="account" | "email" | "success">
   ============================================================ */

.signup-card{display:flex;width:920px;max-width:100%;overflow:hidden}
body[data-step="success"] .signup-card{display:none}
#signup-success{display:none}
body[data-step="success"] #signup-success{display:block}

/* brand panel */
.brand{width:360px;flex:none;background:var(--slate);padding:40px 36px;display:flex;flex-direction:column}
.brand__logo{height:30px;width:auto;display:block;align-self:center}
.brand__head{color:#fff;font-size:26px;font-weight:700;line-height:1.45;letter-spacing:-.02em;margin:36px 0 26px;text-align:center}
.brand__bullets{display:flex;flex-direction:column;gap:16px}
.bullet{display:flex;gap:11px;align-items:flex-start}
.bullet__tick{width:20px;height:20px;flex:none;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;margin-top:1px}
.bullet__text{font-size:14px;line-height:1.5;color:var(--border)}
.brand__foot{margin-top:auto;padding-top:28px;font-size:13px;color:#8a97a8;text-align:center}

.pane{flex:1;padding:38px 48px 32px}

/* stepper */
.stepper{display:flex;align-items:flex-start;justify-content:center;margin:0 0 28px}
.step-node{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px}
.step-circle{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid #e2e8f0;background:#fff;color:var(--faint)}
.step-label{font-size:11.5px;font-weight:600;color:var(--faint)}
.connector{flex:none;width:80px;height:2px;background:#e2e8f0;border-radius:2px;margin-top:14px;overflow:hidden}
.connector__fill{width:0;height:100%;background:var(--teal);transition:width .4s ease}
.step-circle .check-ico{display:none}
/* node 1 is always active-or-done */
.step-node--1 .step-circle{border-color:var(--teal);background:var(--teal);color:#fff}
.step-node--1 .step-label{color:var(--slate)}
/* on step "email": node 1 shows a check, node 2 lights, connector fills */
body[data-step="email"] .step-node--1 .step-circle .num{display:none}
body[data-step="email"] .step-node--1 .step-circle .check-ico{display:block}
body[data-step="email"] .step-node--2 .step-circle{border-color:var(--teal);background:var(--teal);color:#fff}
body[data-step="email"] .step-node--2 .step-label{color:var(--slate)}
body[data-step="email"] .connector__fill{width:100%}

/* step visibility */
#step-account{display:none}
body[data-step="account"] #step-account{display:block}
#step-email{display:none}
body[data-step="email"] #step-email{display:block}

/* step 1 details */
#step-account .h1{margin-bottom:22px}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pw-chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:transparent;border:1px solid var(--border-lt);color:var(--faint)}
.pw-chip.is-ok{background:var(--wash);border-color:var(--chip);color:var(--teal)}
/* when the password field is in error, unmet chips turn red */
.field--pw.is-error .pw-chip:not(.is-ok){border-color:var(--red-border);color:var(--red)}
.signup-foot{text-align:center;margin-top:18px;font-size:14px;font-weight:500;color:var(--muted)}
.signup-foot a{font-weight:600;cursor:pointer}

/* step 2 details */
.code-row{display:flex;gap:10px;justify-content:center;margin-bottom:16px}
.code{width:46px;height:54px;text-align:center;font-size:22px;font-weight:700;color:var(--slate);border:2px solid var(--border);background:#fff;border-radius:10px;outline:none;padding:0}
.code:focus{border-color:var(--teal)}
.code-row.is-full .code{border-color:var(--teal-light);background:var(--wash)}
.vstatus{min-height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.vstatus > *{display:none}
.vstatus[data-status="checking"] .vs-checking{display:flex}
.vstatus[data-status="verified"] .vs-verified{display:inline-flex}
.vstatus[data-status="wrong"]    .vs-wrong{display:block}
.vstatus[data-status="expired"]  .vs-expired{display:block}
.vs-checking{align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--muted)}
.vs-verified{align-items:center;gap:7px;background:var(--wash);border:1px solid var(--chip);border-radius:999px;padding:6px 14px}
.vs-verified__dot{width:17px;height:17px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center}
.vs-verified__text{font-size:13.5px;font-weight:600;color:var(--teal)}
.vs-wrong,.vs-expired{font-size:13px;font-weight:500;color:var(--red);text-align:center;line-height:1.5;max-width:340px}
.step2-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.step2-bottom__resend{font-size:14px;color:var(--muted)}
.resend.is-cooldown{color:var(--faint);cursor:default}
.resend.is-cooldown:hover{color:var(--faint)}

/* responsive collapse (<880px): one column, compact header */
@media (max-width:880px){
  .signup-card{flex-direction:column;width:auto;max-width:480px}
  .brand{width:auto;padding:20px 28px}
  .brand__bullets,.brand__foot{display:none}
  .brand__head{font-size:17px;margin:12px 0 0}
}

/* ============================================================
   SURFACE 2 — COMPLETE ACCOUNT
   Page state:  <body data-step="npn" | "number" | "done">
   Step B state: <section id="step-number" data-phase="initial" |
     "searching" | "results" | "none" | "purchasing" | "failed" | "failed2">
   ============================================================ */

#step-npn,#step-number,#account-done{display:none}
body[data-step="npn"] #step-npn{display:block}
body[data-step="number"] #step-number{display:block}
body[data-step="done"] #account-done{display:block}

.ca-card{padding:36px 40px 30px}
.ca-card--number{width:560px;max-width:100%;padding:34px 40px 28px}
#step-npn{width:460px;max-width:100%}
#step-number{width:560px;max-width:100%}
.ca-logo{display:flex;justify-content:center;margin-bottom:24px}
.ca-logo img{height:26px;width:auto;display:block}

/* NPN pill note */
.pill-note-wrap{text-align:center;margin-bottom:20px}
.pill-note{display:inline-flex;align-items:center;gap:7px;background:var(--wash);border:1px solid var(--chip);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--teal-dark)}
.pill-note__dot{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.npn-helper a{color:var(--faint);text-decoration:underline}
#npn-continue{margin-top:22px}

/* --- Step B: search header --- */
.search-modes{display:flex;align-items:baseline;gap:16px}
.search-modes__label{font-size:13px;color:var(--faint)}
.mode-btn{background:none;border:none;padding:2px 0 5px;font-size:14px;cursor:pointer;font-weight:500;color:var(--faint)}
.mode-btn.is-on{font-weight:700;color:var(--slate);box-shadow:inset 0 -2px 0 var(--teal)}
.search-row{display:flex;gap:10px;margin-top:10px}
.search-row .input{flex:1;min-width:0}
.search-row .btn{width:auto;flex:none;padding:12px 20px}
/* the search header is hidden while purchasing / failed — no re-search mid-flight */
#step-number[data-phase="purchasing"] .search-area,
#step-number[data-phase="failed"] .search-area,
#step-number[data-phase="failed2"] .search-area{display:none}

/* phase visibility */
.phase{display:none}
#step-number[data-phase="initial"]    .phase--initial{display:block}
#step-number[data-phase="searching"]  .phase--searching{display:block}
#step-number[data-phase="results"]    .phase--results{display:block}
#step-number[data-phase="none"]       .phase--none{display:block}
#step-number[data-phase="purchasing"] .phase--purchasing{display:block}
#step-number[data-phase="failed"]     .phase--failed{display:block}
#step-number[data-phase="failed2"]    .phase--failed2{display:block}

/* --- phase: initial (before any search) --- */
.phase--initial{margin-top:24px;text-align:center;padding:6px 0 4px;overflow:hidden}
.ghost-row{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin-bottom:22px}
.ghost{width:104px;background:#fff;border:1px solid var(--border-lt);border-radius:12px;padding:12px 14px;text-align:left;box-shadow:0 8px 20px rgba(45,55,72,.06)}
.ghost--l{transform:rotate(-4deg) translateY(6px)}
.ghost--r{transform:rotate(4deg) translateY(6px)}
.ghost__code{font-size:23px;font-weight:800;color:var(--border);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ghost__city{font-size:11.5px;font-weight:600;color:#e2e8f0}
.ghost--hero{width:112px;border-color:var(--chip);padding:14px 16px;transform:translateY(-4px);box-shadow:0 14px 28px rgba(13,148,136,.12)}
.ghost--hero .ghost__code{font-size:26px;color:var(--teal)}
.ghost--hero .ghost__city{font-size:12px;color:var(--teal-light)}
.initial-title{font-size:15px;font-weight:700;color:var(--slate);margin-bottom:5px}
.initial-sub{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:16px}
.try-row{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.try-row__label{font-size:13px;color:var(--faint)}
.try-chip{background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--slate);cursor:pointer}
.try-chip:hover{border-color:var(--teal);color:var(--teal)}

/* --- phase: searching --- */
.phase--searching{margin-top:20px}
.searching-line{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--muted);margin-bottom:12px}
.skel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.skel{height:88px;border-radius:12px;background:#f1f5f9;animation:ckpulse 1.3s ease-in-out infinite}

/* --- phase: results --- */
.phase--results{margin-top:20px}
.alert--taken{display:none;gap:10px;align-items:center;background:var(--wash);border:1px solid var(--chip);border-radius:10px;padding:11px 14px;margin-bottom:12px}
.phase--results.has-banner .alert--taken{display:flex}
.alert--taken .alert__badge{background:var(--chip);color:var(--slate)}
.results-label{font-size:13px;color:var(--muted);margin-bottom:8px}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.results-grid.is-expanded{max-height:336px;overflow-y:auto;padding-right:4px}
.number-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  padding:13px 16px;border-radius:12px;cursor:pointer;text-align:left;position:relative;
  border:1px solid var(--border-lt);background:#fff;
}
.number-card:hover{border-color:var(--chip)}
.number-card.is-selected{border-color:var(--teal);background:var(--tint);box-shadow:inset 0 0 0 .5px var(--teal)}
.number-card.is-selected:hover{border-color:var(--teal)}
.number-card__code{font-size:26px;font-weight:800;color:var(--num-ink);letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums}
.number-card__rest{font-size:14px;font-weight:500;color:var(--num-sub);font-variant-numeric:tabular-nums}
.number-card__city{font-size:12.5px;font-weight:600;color:var(--teal);margin-top:5px}
.number-card__check{display:none;position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--teal);align-items:center;justify-content:center}
.number-card.is-selected .number-card__check{display:flex}
.show-more-wrap{text-align:center;margin-top:8px}
.show-more{background:none;border:none;padding:4px 8px;font-size:13.5px;font-weight:600;color:var(--teal);cursor:pointer}
.show-more:hover{color:var(--teal-dark)}

/* --- TCPA acknowledgment (inside results phase; hidden until a number is selected) --- */
.tcpa{margin-top:16px;border:1px solid var(--border-lt);border-radius:10px;padding:14px 16px}
.tcpa__intro{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:10px}
.tcpa__row{display:flex;gap:11px;align-items:flex-start}
.checkbox{width:20px;height:20px;flex:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;margin-top:1px;border:1.5px solid var(--border);background:#fff}
.checkbox svg{display:none}
.checkbox.is-checked{border-color:var(--teal);background:var(--teal)}
.checkbox.is-checked svg{display:block}
.commitments{display:flex;flex-direction:column;gap:5px;cursor:pointer}
.commit{display:flex;gap:8px;font-size:13.5px;font-weight:500;color:var(--slate);line-height:1.45}
.commit__dot{flex:none;width:4px;height:4px;border-radius:50%;background:var(--muted);margin-top:8px}
.tcpa__assure{font-size:12.5px;color:var(--faint);line-height:1.5;margin-top:10px}
.tcpa__assure a{font-weight:600;cursor:pointer}
#complete-btn{margin-top:18px}

/* --- phase: none (no results — NOT an error) --- */
.phase--none{margin-top:20px;background:var(--panel);border-radius:12px;padding:28px 24px;text-align:center}
.none-title{font-size:14.5px;font-weight:600;color:var(--slate);margin-bottom:6px}
.none-sub{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:18px}
.widen-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--teal);border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600;color:var(--teal);cursor:pointer}
.widen-btn:hover{background:var(--wash)}

/* --- phase: purchasing (progress, staged) --- */
.phase--purchasing{margin-top:20px;border:1px solid var(--border-lt);border-radius:12px;padding:22px 24px}
.pbar{height:4px;border-radius:4px;background:var(--tint);overflow:hidden;margin-bottom:20px}
.pbar__fill{height:100%;background:var(--teal);border-radius:4px;transition:width .5s ease;width:14%}
#step-number[data-stage="1"] .pbar__fill{width:52%}
#step-number[data-stage="2"] .pbar__fill{width:86%}
.psteps{display:flex;flex-direction:column;gap:14px}
.pstep{display:flex;align-items:center;gap:11px}
.pstep__icon{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center}
.pstep__done{width:20px;height:20px;border-radius:50%;background:var(--teal);display:none;align-items:center;justify-content:center}
.pstep__spin{display:none}
.pstep__dot{width:8px;height:8px;border-radius:50%;background:var(--border);display:none}
.pstep__label{font-size:14px;font-weight:500;color:var(--faint)}
.pstep.is-done .pstep__done{display:flex}
.pstep.is-done .pstep__label{color:var(--slate)}
.pstep.is-run .pstep__spin{display:inline-block}
.pstep.is-run .pstep__label{color:var(--slate);font-weight:600}
.pstep.is-todo .pstep__dot{display:block}
.purchasing-note{font-size:13px;color:var(--faint);margin-top:18px}

/* --- phases: failed / failed2 --- */
.phase--failed,.phase--failed2{margin-top:20px}
.sel-summary{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--teal);margin-bottom:14px}
.sel-summary__code{font-size:24px;font-weight:800;color:var(--num-ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sel-summary__rest{font-size:15px;font-weight:500;color:var(--num-sub);font-variant-numeric:tabular-nums}
.sel-summary__spacer{flex:1}
.sel-summary__city{font-size:12.5px;font-weight:600;color:var(--teal)}
.phase--failed .alert,.phase--failed2 .alert{margin-bottom:16px}
