/* ══════════════════════════════════════════════════════════════
   Nebryx v2 — design system  (light / clean redesign)

   Same token + class vocabulary as before, so every page restyles
   without touching its HTML. Visual language flipped from the dark
   "brutal" square look to a light, calm, modern marketplace: soft
   surfaces, gentle rounding, teal as the single action colour, quiet
   borders and subtle elevation instead of hard hairlines.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ── */
:root{
  /* Light is the product's only shipped theme. Declaring it here (rather
     than leaving it to `normal`) is what stops a dark-OS machine from
     painting the UA's own surfaces dark underneath a light page:
     scrollbars, form controls, autofill, spellcheck squiggles and the
     canvas behind the body all follow this, not our tokens. The dark
     palette in site.css is kept but now opts in via html[data-theme]. */
  color-scheme:light;

  /* Brand green — the same pair as site.css, so the logo and the button
     you click do not change colour when you cross the sign-in page.
     --brand is a fill only (dark label); --brand-dp is the legible-on-
     white version used wherever the green is drawn as the colour itself. */
  --brand:#2fe39b;
  --brand-2:#22cf8b;
  --brand-dp:#0b9a68;
  --brand-ink:#04231a;
  --mark:#363c47;        /* the wordmark at rest — matches site.css */

  --teal:#0d9488;        /* accent text, links, eyebrow — stays teal: it is
                            body-copy sized, where the mint cannot go */
  --teal-lt:#14b8a6;     /* bright fills, meter, tag-hit */
  --teal-btn:#0d9488;    /* legacy alias, kept for anything still on it */
  --teal-dk:#0f766e;
  --teal-soft:#e9f9f6;   /* soft hover / selected background */
  --amber:#d97706;
  --rose:#e11d48;
  --purple:#7c3aed;
  --green:#059669;

  --bg:#ffffff;
  --bg-2:#f6f8fa;        /* section / card surface */
  --bg-3:#eef1f5;
  --surface:#ffffff;

  --line:#e4e9ef;
  --line-soft:#eef1f5;

  --tx:#0f172a;
  --tx-mu:#556070;
  --tx-dim:#94a1b0;

  /* Space Grotesk across the whole product, not just the marketing
     surface — two faces either side of the sign-in page reads as two
     different companies. */
  --sans:'Space Grotesk','Space Grotesk Variable',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r-btn:8px;   /* squared controls, shared with site.css */
  /* System mono: Ubuntu Mono is no longer loaded now that the pages
     ship Space Grotesk, and naming a font nobody fetches just yields
     an unpredictable fallback. */
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r:10px;
  --r-sm:8px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.05);
  --shadow-lift:0 2px 6px rgba(15,23,42,.06),0 12px 30px rgba(15,23,42,.08);

  --gut:clamp(18px,4vw,56px);
  --max:1340px;
  --nav-h:64px;
}

/* ── 2. RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
/* The reset above also clears the UA's `dialog{margin:auto}`, which is the
   only thing that centres a modal in its top layer — without it every
   dialog in the product opened pinned to the top-left corner. Restore it
   for dialog alone; `auto` on all four sides is what the UA sheet says. */
dialog{margin:auto;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px);}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--tx);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px;}
::selection{background:#3297fd;color:#fff;}

/* ── 3. TYPE ── */
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--tx);text-wrap:balance;}
h1{font-size:clamp(32px,5.4vw,60px);letter-spacing:-.03em;}
h2{font-size:clamp(24px,3.4vw,40px);letter-spacing:-.025em;}
h3{font-size:clamp(17px,2vw,21px);letter-spacing:-.01em;font-weight:700;}
h4{font-size:15px;font-weight:700;letter-spacing:-.01em;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.lead{text-wrap:pretty;}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--teal);
}
.eyebrow::before{content:'';width:22px;height:2px;background:currentColor;border-radius:2px;}
.muted{color:var(--tx-mu);}
.dim{color:var(--tx-dim);}
.lead{font-size:clamp(15px,1.5vw,18px);line-height:1.65;color:var(--tx-mu);}

/* ── 4. LAYOUT ── */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut);}
.page{padding-top:calc(var(--nav-h) + 40px);padding-bottom:80px;min-height:100vh;}
.stack{display:flex;flex-direction:column;}
.row{display:flex;align-items:center;}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-24{gap:24px}
.between{justify-content:space-between;}
.wrapf{flex-wrap:wrap;}
.grid{display:grid;gap:0;}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.mb-32{margin-bottom:32px}
.hairline{height:1px;background:var(--line);border:none;}

/* ── 5. NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.nav.scrolled{
  background:rgba(255,255,255,.9);border-bottom-color:var(--line);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

/* ── premium motion: staggered scroll-reveal (JS-gated, no-JS = visible) ── */
@media (prefers-reduced-motion: no-preference){
  .reveal-on [data-reveal]{
    opacity:0;transform:translateY(22px);will-change:opacity,transform;
    transition:opacity .72s cubic-bezier(.16,.8,.24,1) var(--rd,0ms),
               transform .72s cubic-bezier(.16,.8,.24,1) var(--rd,0ms);
  }
  .reveal-on [data-reveal].in{opacity:1;transform:none;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .frame{animation:none;}
}
.nav-in{
  height:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
/* The wordmark is drawn geometry now (see icons.js), so it is sized by
   HEIGHT rather than font-size and carries no font dependency. */
/* The supplied logo file. Product pages are always light, so they only ever
   need the dark version — the mint one is the marketing nav's scrolled state. */
.brand{display:inline-flex;align-items:center;}
.brand img{display:block;height:40px;width:auto;}
/* Reference-style rounded pill controls in the top bar. */
.nav-right .btn{border-radius:var(--r-btn);}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
  font-family:var(--sans);font-size:14px;font-weight:500;
  padding:8px 13px;color:var(--tx-mu);border-radius:var(--r-sm);
  transition:background .15s,color .15s;
}
.nav-links a:hover,.nav-links a.active{background:var(--teal-soft);color:var(--teal-dk);}
.nav-right{display:flex;align-items:center;gap:10px;}

/* ── dropdown mega-menu ── */
.nav-menu{display:flex;align-items:center;gap:2px;}
.nav-drop{position:relative;display:flex;align-items:center;height:100%;}
.nav-trigger{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:none;border:none;font-family:var(--sans);font-size:14px;font-weight:500;
  color:var(--tx-mu);padding:8px 13px;border-radius:var(--r-sm);
  transition:background .15s,color .15s;
}
.nav-trigger:hover{background:var(--bg-2);color:var(--tx);}
.nav-trigger .chev{transition:transform .2s ease;}
/* transparent bridge so the pointer can cross the gap to the panel */
.nav-drop::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px;}
.nav-panel{
  position:absolute;top:calc(100% + 10px);left:0;z-index:120;min-width:264px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lift);
  padding:14px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;
}
.nav-drop--right .nav-panel{left:auto;right:0;}
.nav-drop.open .nav-panel,
.nav-drop.open .chev{opacity:1;}
.nav-drop.open .nav-panel{visibility:visible;transform:none;transition-delay:0s;}
.nav-drop.open .chev,
.nav-drop.open .nav-trigger{color:var(--tx);}
.nav-drop.open .chev{transform:rotate(180deg);}
@media (hover:hover){
  .nav-drop:hover .nav-panel,.nav-drop:focus-within .nav-panel{
    opacity:1;visibility:visible;transform:none;transition-delay:0s;}
  .nav-drop:hover .chev,.nav-drop:focus-within .chev{transform:rotate(180deg);}
  .nav-drop:hover .nav-trigger{background:var(--bg-2);color:var(--tx);}
}
.nav-cols{display:grid;gap:1px;min-width:236px;}
.nav-cols a{
  display:block;padding:10px 12px;font-size:14px;font-weight:500;color:var(--tx);
  border-radius:var(--r-sm);transition:background .13s,color .13s;
}
.nav-cols a:hover{background:var(--teal-soft);color:var(--teal-dk);}
.nav-cta{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  margin-top:12px;padding-top:14px;border-top:1px solid var(--line);
}
.nav-cta span{font-size:14px;font-weight:700;color:var(--tx);white-space:nowrap;}

/* ── 6. BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;cursor:pointer;border-radius:var(--r-btn);
  font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:0;white-space:nowrap;
  border:1px solid var(--teal);background:#fff;color:var(--teal);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s,opacity .15s;
}
/* Secondary buttons fill dark on hover, matching the marketing pages.
   Declared before the variants so .btn-primary / .btn-quiet / .btn-danger
   still win by source order at equal specificity. */
.btn:hover{background:var(--tx);border-color:var(--tx);color:var(--bg);}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);}
/* `color` is restated deliberately: .btn:hover now sets a light label for
   the dark fill, and it outranks the .btn-primary base rule, so without
   this the primary button would hover to white-on-mint. */
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:var(--brand-ink);box-shadow:var(--shadow);}
.btn-quiet{border-color:var(--line);color:var(--tx-mu);background:#fff;}
.btn-quiet:hover{background:var(--bg-2);border-color:var(--tx-dim);color:var(--tx);}
.btn-danger{border-color:var(--rose);color:var(--rose);background:#fff;}
.btn-danger:hover{background:var(--rose);color:#fff;}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn:disabled:hover{background:#fff;color:var(--teal);}
.btn-primary:disabled:hover{background:var(--brand);color:var(--brand-ink);}

/* ── 7. FORMS ── */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.field label{
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:0;color:var(--tx);
}
.input,.select,.textarea{
  width:100%;padding:11px 14px;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--line);color:var(--tx);
  font-family:var(--sans);font-size:14.5px;letter-spacing:0;
  transition:border-color .18s,box-shadow .18s;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft);outline:none;
}
.input::placeholder,.textarea::placeholder{
  color:var(--tx-dim);text-transform:none;letter-spacing:0;font-size:14px;
}
.textarea{min-height:120px;resize:vertical;line-height:1.6;}
.select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-mu) 50%),
                   linear-gradient(135deg,var(--tx-mu) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;}
.select option{background:#fff;color:var(--tx);}
.hint{font-size:12.5px;color:var(--tx-dim);font-family:var(--sans);letter-spacing:0;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.check{display:flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--sans);font-size:14px;letter-spacing:0;color:var(--tx-mu);}
.check input{
  appearance:none;width:18px;height:18px;flex-shrink:0;border-radius:5px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.check input:checked{background:var(--teal-btn);border-color:var(--teal-btn);}
.check input:checked::after{
  content:'';display:block;width:5px;height:9px;margin:1px auto 0;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* ── 8. CARDS + GRID CELLS ── */
.card{border:1px solid var(--line);border-radius:var(--r);padding:24px;
  background:#fff;box-shadow:var(--shadow);}
.cells{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  border-top:none;border-left:none;}
.cells>*{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-4{grid-template-columns:repeat(4,1fr);}

/* ── 9. TAGS / PILLS ── */
.tags{display:flex;flex-wrap:wrap;gap:6px;}
.tag{
  font-family:var(--sans);font-size:12.5px;letter-spacing:0;font-weight:500;
  padding:5px 11px;border-radius:100px;
  border:1px solid var(--line);color:var(--tx-mu);background:var(--bg-2);
}
.tag-hit{border-color:var(--teal-lt);color:var(--teal-dk);background:var(--teal-soft);}
.tag-miss{border-color:#f3c6c6;color:var(--rose);background:#fdeced;}

/* ── 10. VERDICT + STATUS ── */
.verdict,.status{
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.02em;padding:4px 11px;border-radius:100px;
  border:1px solid currentColor;
}
.v-connect{color:var(--green);}
.v-hold{color:var(--amber);}
.v-pass{color:var(--tx-dim);}
.s-submitted{color:var(--tx-mu);}
.s-screening{color:var(--teal);}
.s-shortlisted{color:var(--purple);}
.s-interviewing{color:var(--amber);}
.s-offer{color:var(--green);}
.s-hired{color:var(--green);}
.s-rejected{color:var(--rose);}
.s-withdrawn{color:var(--tx-dim);}

/* ── 11. MATCH METER ── */
.meter{display:flex;gap:3px;height:8px;margin:10px 0;}
.meter i{flex:1;background:var(--line);border-radius:100px;}
.meter i.on{background:var(--teal-lt);}
.meter.warn i.on{background:var(--amber);}
.meter.low i.on{background:var(--rose);}
.score{
  font-family:var(--mono);font-size:26px;font-weight:700;
  color:var(--teal);line-height:1;
}
.factors{border-top:1px solid var(--line-soft);margin-top:14px;}
.factor{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.factor .fl{font-family:var(--sans);font-size:13.5px;letter-spacing:0;}
.factor .fd{font-size:12.5px;color:var(--tx-dim);}
.factor .fv{font-family:var(--mono);font-size:13px;color:var(--teal);font-weight:700;}

/* ── 12. TABLE ── */
.table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;}
.table th{
  text-align:left;padding:11px 12px;font-size:12px;letter-spacing:.02em;
  color:var(--tx-mu);border-bottom:2px solid var(--line);font-weight:600;
}
.table td{padding:13px 12px;border-bottom:1px solid var(--line);}
.table tr:hover td{background:var(--bg-2);}

/* ── 13. FEEDBACK ── */
.alert{
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--sans);font-size:14px;letter-spacing:0;
  display:flex;align-items:flex-start;gap:10px;
}
.alert-err{border-color:#f3c6c6;color:var(--rose);background:#fdeced;}
.alert-ok{border-color:#bfe6d5;color:var(--green);background:#e8f8f0;}
.alert-info{border-color:var(--teal-lt);color:var(--teal-dk);background:var(--teal-soft);}
.alert[hidden]{display:none;}

.empty{
  padding:56px 24px;text-align:center;border:1px dashed var(--line);
  border-radius:var(--r);color:var(--tx-dim);font-family:var(--sans);
  font-size:14.5px;letter-spacing:0;background:var(--bg-2);
}

.skel{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:#fff;}
.skel div{height:11px;border-radius:6px;background:var(--line-soft);margin-bottom:10px;
  animation:pulse 1.3s ease-in-out infinite;}
.skel div:nth-child(2){width:72%}
.skel div:nth-child(3){width:45%}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ── 14. AUTH LAYOUT ── */
.auth{min-height:100vh;display:grid;place-items:center;
  padding:calc(var(--nav-h) + 32px) 20px 48px;background:var(--bg-2);}
.auth-box{width:100%;max-width:420px;border:1px solid var(--line);border-radius:14px;
  padding:34px 30px;background:#fff;box-shadow:var(--shadow-lift);}
.auth-box h1{font-size:28px;letter-spacing:-.02em;margin-bottom:6px;}
.auth-alt{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);
  text-align:center;font-family:var(--sans);font-size:13.5px;color:var(--tx-mu);
  letter-spacing:0;}
.auth-alt a{color:var(--teal);font-weight:600;}
.auth-alt a:hover{text-decoration:underline;}

/* role toggle on signup */
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;padding:3px;gap:3px;background:var(--bg-2);}
.seg button{
  flex:1;padding:10px;background:transparent;color:var(--tx-mu);cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;
  border:none;border-radius:var(--r-sm);transition:background .15s,color .15s;
}
/* Same card as the primary button, so it takes the same green — a teal
   segment sitting directly above a mint button reads as two brands. */
.seg button.on{background:var(--brand);color:var(--brand-ink);}

/* ── 15. RESPONSIVE ── */
@media(max-width:900px){
  .cols-3,.cols-4{grid-template-columns:repeat(2,1fr);}
  .nav-links,.nav-menu{display:none;}
}
@media(max-width:620px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ── NAV PANELS, matched to the marketing sheet ──────────────────────
   The product pages can't just load site.css — its body.nx block resets
   the heading scale, which would blow every h1 on these pages up to
   display size. So the panel look is restated here, scoped to .nav-panel
   only, and nothing else on the page is touched. */
.nav-panel{
  border-radius:0 0 var(--r) var(--r);
  padding:26px 28px 22px;
  min-width:320px;
}
.nav-cols{gap:20px;}
.nav-cols a{
  padding:0;border-radius:0;font-size:16px;font-weight:450;
  position:relative;width:max-content;
}
.nav-cols a:hover{background:none;color:var(--teal-dk);}
/* underline grows from the left, same as the marketing panels */
.nav-cols a::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:1.5px;
  background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.16,.84,.28,1);
}
.nav-cols a:hover::after,.nav-cols a:focus-visible::after{transform:scaleX(1);}
.nav-cta{margin-top:22px;padding-top:20px;}
.nav-cta span{font-size:17px;font-weight:500;}

/* Log in: two centred links, nothing else — same as the marketing bar. */
.nav-drop--right .nav-panel{
  min-width:238px;padding:14px 18px;text-align:center;
  border-radius:var(--r-btn);
}
.nav-drop--right .nav-cols{gap:0;}
.nav-drop--right .nav-cols a{
  display:block;width:auto;padding:15px 8px;border-radius:var(--r-btn);
  font-size:17px;font-weight:500;
}
.nav-drop--right .nav-cols a::after{display:none;}
.nav-drop--right .nav-cols a:hover{background:var(--teal-soft);color:var(--teal-dk);}

/* The reading-progress bar that used to live here has been removed — a
   coloured 2px rule pinned above the bar competed with the nav for the
   top edge of the screen. Its markup and the rules in site.css went with
   it, so nothing is left styling an element that no longer ships. */

/* Says why the queue looks the way it does, above the queue rather than
   in place of it — the matches are real and worth reading even when the
   reason they are poor is one the reader can fix in a minute. */
.thin-note{
  margin-bottom:24px;padding:14px 18px;border-radius:var(--r);
  background:var(--teal-soft);border:1px solid var(--teal-lt);
  font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--tx);
}
.thin-note a{color:var(--teal-dk);font-weight:600;text-decoration:underline;}