/* =====================================================================
   nx.css — the ONE stylesheet every NXTalent screen shares.
   Set a colour or a component here once; every page picks it up.

   THEME: "NXON" dark-violet (aligned to nxon.ai — accent violet #7C3AED
   over a dark violet-black surface). Token NAMES are kept from the
   original kickoff palette so the vocabulary stays consistent across the
   app; only their VALUES changed for dark mode. The product's signature
   survives the reskin: confirmed = solid green, inferred = hollow muted,
   mono for data moments.
   ===================================================================== */

/* ---- 1. design tokens (the palette + type, named once) --------------- */
:root{
  --ink:#ECEAF6;        /* primary text (near-white, faint lavender)      */
  --paper:#0C0A14;      /* page background (dark violet-black)            */
  --petrol:#7C3AED;     /* PRIMARY ACCENT — the NXON violet (rail, buttons) */
  --bright:#8B5CF6;     /* accent hover + focus ring (brighter violet)    */
  --confirmed:#34D399;  /* "confirmed by the client" — emerald, pops on dark */
  --inferred:#7E7A96;   /* "inferred from a JD" — muted lavender-grey     */
  --clay:#F0774E;       /* restricted / alerts — warm coral on dark       */
  --line:#26232F;       /* hairline borders on dark                       */

  --paper-2:#15131F;    /* card / input surface (slightly lifted)         */
  --rail-bg:#100E1A;    /* nav rail surface (behind the violet glow)      */
  --ink-2:#A6A1BC;      /* secondary text (muted lavender)                */
  --confirmed-wash:rgba(52,211,153,.10);
  --inferred-wash:rgba(255,255,255,.05);
  --clay-wash:rgba(240,119,78,.12);

  --rail:280px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:10px;
}

/* ---- 2. reset + base ------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.45}
a{color:inherit}
h1,h2,h3{letter-spacing:-.2px; margin:0}
:focus-visible{outline:2px solid var(--bright); outline-offset:2px; border-radius:4px}
::placeholder{color:var(--ink-2); opacity:.6}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-2)}

/* ---- 3. app shell: identity rail + page area ------------------------- */
.nx-shell{display:grid; grid-template-columns:var(--rail) 1fr; min-height:100vh}
/* the rail is a lifted dark-violet panel with a soft violet glow up top,
   echoing the nxon.ai gradient hero — the one bold touch, kept restrained. */
.nx-rail{
  background:
    radial-gradient(120% 55% at 50% -8%, rgba(124,58,237,.38), transparent 62%),
    var(--rail-bg);
  color:#EDEBF5; padding:22px 20px; display:flex; flex-direction:column; gap:26px;
  position:sticky; top:0; align-self:start; height:100vh;
  border-right:1px solid var(--line);
}
.nx-brand{display:flex; align-items:center; gap:10px; font-weight:650}
.nx-brand .dot{width:11px; height:11px; border-radius:50%;
  background:var(--petrol); box-shadow:0 0 12px 1px rgba(139,92,246,.7)}
.nx-brand small{display:block; font-weight:500; color:#9A94B4; font-size:12px; letter-spacing:.3px}
.nx-rail nav{display:flex; flex-direction:column; gap:2px}
.nx-rail nav a{display:flex; align-items:center; gap:10px; padding:9px 11px;
  border-radius:8px; font-size:14px; color:#C6C2DA; text-decoration:none}
.nx-rail nav a.on{background:rgba(139,92,246,.18); color:#fff}
.nx-rail nav a:hover{background:rgba(255,255,255,.06)}
.nx-rail nav a .g{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55}
.nx-rail .grp{font-size:11px; letter-spacing:.7px; text-transform:uppercase; color:#7E799A; margin:10px 0 2px 11px}
.nx-rail .ws{margin-top:auto; font-size:12px; color:#9A94B4;
  border-top:1px solid rgba(255,255,255,.10); padding-top:16px}
.nx-rail .ws b{color:#EDEBF5; font-weight:600}
.nx-signout{margin-top:12px; background:none; border:1px solid rgba(255,255,255,.22);
  color:#EDEBF5; font:inherit; font-size:13px; padding:7px 12px; border-radius:8px; cursor:pointer}
.nx-signout:hover{background:rgba(255,255,255,.08)}
.nx-page{padding:30px 34px 64px; max-width:840px}

/* ---- 4. page header -------------------------------------------------- */
.nx-kicker{font-size:12px; letter-spacing:.9px; text-transform:uppercase; color:var(--ink-2); font-weight:600}
.nx-h1{font-size:26px; margin:6px 0 4px}
.nx-lede{color:var(--ink-2); font-size:15px; max-width:60ch}

/* ---- 5. cards + form fields ----------------------------------------- */
.nx-card{background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px}
.nx-field{margin-top:16px}
.nx-field:first-child{margin-top:0}
.nx-field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.nx-field .hint{font-size:12px; color:var(--ink-2); font-weight:400; margin-left:6px}
.nx-input{width:100%; font:inherit; font-size:15px; padding:10px 12px; color:var(--ink);
  background:#0F0D18; border:1px solid var(--line); border-radius:8px}
.nx-input.mono{font-family:var(--mono)}
.nx-input:focus{outline:none; border-color:var(--bright); box-shadow:0 0 0 3px rgba(124,58,237,.28)}
.nx-input.bad{border-color:var(--clay)}
.nx-err{font-size:12.5px; color:var(--clay); margin-top:6px; min-height:1em}
.nx-row{display:flex; gap:14px}
.nx-row > *{flex:1}

/* ---- 6. buttons ------------------------------------------------------ */
.nx-btn{font:inherit; font-size:15px; padding:11px 18px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; background:var(--petrol); color:#fff}
.nx-btn:hover{background:var(--bright)}
.nx-btn:disabled{opacity:.55; cursor:default}
.nx-btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.nx-btn.ghost:hover{background:rgba(255,255,255,.05)}

/* ---- 7. confirmed / inferred markers (the product vocabulary) -------- */
.mk{display:inline-flex; align-items:center; gap:7px}
.mk .disc{width:11px; height:11px; border-radius:50%; flex:0 0 auto}
.mk.confirmed .disc{background:var(--confirmed)}
.mk.inferred  .disc{background:transparent; border:1.5px solid var(--inferred)}

/* ---- 8. states: banner, empty, error, spinner ------------------------ */
.nx-banner{display:flex; gap:12px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; background:var(--inferred-wash); border:1px solid var(--line);
  border-radius:8px; padding:10px 14px; margin-bottom:18px; font-size:13px; color:var(--ink-2)}
.nx-banner .chip{font-family:var(--mono); font-size:11px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--ink)}
.nx-note{font-size:13px; color:var(--ink); background:var(--confirmed-wash);
  border:1px solid var(--confirmed); border-radius:8px; padding:10px 14px}
.nx-alert{font-size:13px; color:var(--clay); background:var(--clay-wash);
  border:1px solid var(--clay); border-radius:8px; padding:10px 14px}
.nx-spin{width:16px; height:16px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff;
  border-radius:50%; display:inline-block; vertical-align:-3px; animation:nx-spin .7s linear infinite}
@keyframes nx-spin{to{transform:rotate(360deg)}}

/* ---- 9. responsive + reduced motion --------------------------------- */
@media (max-width:760px){
  .nx-shell{grid-template-columns:1fr}
  .nx-rail{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px}
  .nx-rail nav{flex-direction:row; flex-wrap:wrap}
  .nx-rail .grp{display:none}
  .nx-rail .ws{margin:0 0 0 auto; border:none; padding:0}
  .nx-signout{margin:0}
  .nx-page{padding:22px 18px 48px}
  .nx-row{flex-direction:column; gap:0}
}
@media (prefers-reduced-motion:reduce){ .nx-spin{animation:none} }