/* ============ FMSDJ WEBSITE CORE ============
   Design system shared by every page. The hero's discipline is law:
   compositor-only motion, gated animations, tiers, reduced-motion. */

:root{
  --ink:#f1ece2; --dim:#b9b2a4; --amber:#e8a13d; --navy:#0a0e18;
  --paper:#f4efe6; --coal:#0c0f14;
  --strong:#e8a13d; --good:#9fd2a8; --maybe:#8fb8d8; --stretch:#b9a4c4;
  --serif:'Fraunces',serif; --mono:'Fragment Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{background:var(--navy);color:var(--ink);font-family:var(--serif);
  min-height:100svh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px}

/* film grain (off in lite) */
body::after{content:"";position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
body.lite::after{display:none}
body.still *{animation-play-state:paused !important}

/* ---------- page sections + transition engine ---------- */
/* will-change:transform would make every page a containing block for its
   position:fixed children (worlds, cues) even at transform:none — so the hint
   only rides along during the actual transition classes */
.page{position:fixed;inset:0;visibility:hidden;overflow:hidden;
  opacity:0;will-change:opacity}
/* F133: an inactive page is OUT of the render tree, not just invisible. visibility:hidden
   kept all ten full-screen pages laid out, animating, and fetching their loading="lazy"
   art at startup (~3.5 MB on a phone). The router never plays leave-* moves, so the
   outgoing page can vanish at once; app.js warms the next page's first frame at idle. */
.page:not(.active){display:none}
.page[class*="enter-"],.page[class*="leave-"]{will-change:opacity,transform}
.page.active{position:relative;min-height:100svh;visibility:visible;opacity:1;overflow:visible}
.page.scrolls{overflow-y:auto}
/* signature moves — applied by the router per pair */
.page.enter-rise{animation:pageRise .65s cubic-bezier(.22,.9,.24,1) both}
.page.enter-fade{animation:pageFade .5s ease both}
.page.enter-zoom{animation:pageZoom .7s cubic-bezier(.22,.9,.24,1) both}
.page.leave-sink{animation:pageSink .45s ease both}
.page.leave-fade{animation:pageFadeOut .35s ease both}
.page.leave-zoomout{animation:pageZoomOut .55s cubic-bezier(.55,.04,.45,.96) both}
@keyframes pageRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes pageFade{from{opacity:0}to{opacity:1}}
@keyframes pageZoom{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes pageSink{to{opacity:0;transform:translateY(-26px)}}
@keyframes pageFadeOut{to{opacity:0}}
@keyframes pageZoomOut{to{opacity:0;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){
  .page[class*=enter-],.page[class*=leave-]{animation-duration:.01s !important}}
body.rm .page[class*=enter-],body.rm .page[class*=leave-]{animation-duration:.01s !important}

/* cloud veil between big moments */
#veil{position:fixed;inset:-12%;z-index:90;pointer-events:none;opacity:0;
  background:
    radial-gradient(58% 46% at 28% 62%, rgba(238,242,248,.98) 0 38%, transparent 70%),
    radial-gradient(64% 52% at 72% 40%, rgba(226,233,244,.97) 0 42%, transparent 72%),
    radial-gradient(80% 60% at 50% 52%, rgba(232,238,247,.99) 0 52%, transparent 78%)}
#veil.go{animation:veilSweep 1.05s ease-in-out both}
@keyframes veilSweep{0%{opacity:0;transform:scale(1.06)}38%{opacity:1}62%{opacity:1}100%{opacity:0;transform:scale(.98)}}
body.rm #veil.go{animation-duration:.01s}

/* ---------- nav ---------- */
#nav{position:fixed;z-index:80;inset:0 0 auto 0;display:flex;align-items:center;gap:14px;
  padding:18px clamp(16px,3vw,34px);pointer-events:none}
/* soft top vignette so the brand + chips never collide visually with content that
   scrolls beneath the fixed bar (dashboard cards etc.). Fades to nothing, so it reads
   as a gentle gradient on the cinematic pages rather than a hard bar. */
#nav::before{content:"";position:absolute;inset:0 0 auto 0;height:98px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,10,18,.58),rgba(7,10,18,.16) 54%,transparent)}
/* the dashboard scrolls real content (role cards) right up to the very top, so the gentle
   cinematic scrim isn't enough — a card bleeds through behind the brand (worse in half-screen /
   narrow widths). On the dashboard ONLY, make the bar a near-opaque strip that fully hides
   anything scrolling under it, still fading out so there's no hard edge. */
body:has(#p-results.active) #nav::before{height:116px;
  background:linear-gradient(to bottom,rgba(8,11,19,.99) 0%,rgba(8,11,19,.99) 38%,rgba(8,11,19,.8) 60%,rgba(8,11,19,.34) 82%,transparent 100%)}
#nav>*{pointer-events:auto}
#brand{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;text-shadow:0 1px 3px rgba(7,10,18,.7)}
#brand .bshort{display:none}
#nav .spacer{flex:1}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(241,236,226,.34);border-radius:99px;padding:8px 14px;color:var(--ink);
  background:rgba(10,14,24,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  white-space:nowrap;transition:border-color .25s,background .25s}
.chip:hover{border-color:rgba(241,236,226,.7)}
.chip.quota b{color:var(--amber)}

/* ---------- shared components ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;font-size:clamp(.8rem,1.5vw,.95rem);
  color:var(--coal);background:var(--paper);border-radius:99px;padding:1.15em 2.6em;
  transition:transform .3s;will-change:transform;text-decoration:none}
.btn:hover{transform:scale(1.045)}
.btn:active{transform:scale(.985)}
.btn .dot{width:9px;height:9px;border-radius:50%;background:var(--amber)}
.btn.ghost{color:var(--ink);background:transparent;border:1px solid rgba(241,236,226,.4)}
.btn.ghost:hover{border-color:rgba(241,236,226,.85)}
.btn[disabled]{opacity:.45;pointer-events:none}

.card{background:rgba(12,15,22,.58);border:1px solid rgba(241,236,226,.14);border-radius:18px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:clamp(18px,3vw,30px)}
.lite .card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(12,15,22,.88)}

.field{display:grid;gap:7px;margin:0 0 16px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.field input{font:inherit;font-size:1rem;color:var(--ink);background:rgba(241,236,226,.07);
  border:1px solid rgba(241,236,226,.22);border-radius:12px;padding:.85em 1em;outline:none;
  transition:border-color .2s}
.field input:focus{border-color:var(--amber)}
.field .err{font-family:var(--mono);font-size:11.5px;color:#e88d7a;min-height:15px}

.tierchip{font-family:var(--mono);font-size:12px;letter-spacing:.1em;border-radius:8px;padding:5px 11px;color:var(--coal)}
.tierchip.S{background:var(--strong)} .tierchip.G{background:var(--good)}
.tierchip.M{background:var(--maybe)}  .tierchip.X{background:var(--stretch)}

/* toast */
#toast{position:fixed;left:50%;bottom:34px;translate:-50% 0;z-index:96;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.06em;background:rgba(12,15,22,.92);border:1px solid rgba(241,236,226,.25);
  color:var(--ink);border-radius:12px;padding:12px 18px;opacity:0;pointer-events:none;
  transition:opacity .25s,translate .25s}
#toast.show{opacity:1;translate:-50% -6px}
#toast{display:inline-flex;align-items:center;gap:2px}
/* inline action button (e.g. Undo) — #toast is pointer-events:none, so the button
   must re-enable pointer-events to be clickable. */
#toast .toast-act{pointer-events:auto;margin-left:10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);background:rgba(232,161,61,.14);
  border:1px solid rgba(232,161,61,.5);border-radius:8px;padding:5px 11px;cursor:pointer;
  transition:background .2s,border-color .2s}
#toast .toast-act:hover{background:rgba(232,161,61,.28);border-color:rgba(232,161,61,.85)}
/* small badge shown on a Hidden-Roles card that was flagged "not relevant" (vs plain hidden) */
.nrtag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(230,184,176,.92);background:rgba(230,184,176,.1);border:1px solid rgba(230,184,176,.34);
  border-radius:99px;padding:4px 10px;margin-right:8px;vertical-align:middle}

@media (max-width:760px){
  .btn{padding:1.05em 2em}
  #nav{padding:14px 16px;gap:8px}
}
/* phones: the bar stays one tidy line — brand shortens to FMSDJ so the auth
   chip never clips off the right edge; chips stay legible with bigger tap area */
@media (max-width:600px){
  #nav{padding:11px 12px;gap:6px;flex-wrap:wrap;row-gap:6px}   /* never clip controls off the right edge on narrow phones */
  #navSound,#navMotion{padding:9px 9px;font-size:10.5px;letter-spacing:.02em}
  #brand .bfull{display:none}
  #brand .bshort{display:inline}
  #brand{font-size:13px;letter-spacing:.2em;white-space:nowrap}
  #nav .chip{font-size:11px;padding:10px 11px;letter-spacing:.05em}
  #navQuota{display:none !important}
  #navBasecamp .nblbl{display:none}   /* icon-only base camp so the nav never clips the account chip (W55) */
  #navAuth{max-width:34vw;overflow:hidden;text-overflow:ellipsis}
}

/* ===== v0.3.42 — estimated-salary badge + Not-relevant feedback ===== */
/* EST badge: muted parchment-grey (--dim), NEVER amber/gold (which reads positive). */
.estbadge{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.12em;
  color:var(--dim);border:1px solid rgba(185,178,164,.5);border-radius:4px;padding:0 4px;margin-left:5px;
  vertical-align:1px;opacity:.85;text-transform:uppercase}
/* "not relevant" card chip — quiet until hover, then a soft (not alarming) warning tint. */
.ractions .chip.nrel{color:var(--dim);border-color:rgba(185,178,164,.35)}
.ractions .chip.nrel:hover{color:#e6b8b0;border-color:rgba(230,184,176,.6)}
/* Optional severity + reason popup after a not-relevant flag. */
.nrpop-back{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,16,.62);backdrop-filter:blur(3px);animation:nrFade .2s ease}
.nrpop-back.closing{animation:nrFade .2s ease reverse}
@keyframes nrFade{from{opacity:0}to{opacity:1}}
.nrpop{width:min(420px,92vw);padding:22px 22px 18px;border-radius:16px}
.nrpop-h{font-family:var(--mono);letter-spacing:.06em;font-size:15px;color:var(--ink);margin-bottom:4px}
.nrpop-sub{font-size:12.5px;color:var(--dim);margin-bottom:16px;line-height:1.45}
.nrpop-l{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.nrpop-l b{color:var(--amber)}
.nrpop input[type=range]{width:100%;accent-color:var(--amber);margin-bottom:14px}
.nrpop textarea{width:100%;min-height:76px;resize:vertical;font:inherit;font-size:14px;color:var(--ink);
  background:rgba(241,236,226,.07);border:1px solid rgba(241,236,226,.2);border-radius:10px;padding:10px 12px;margin-bottom:16px}
.nrpop textarea:focus{border-color:var(--amber);outline:none}
.nrpop-btns{display:flex;gap:10px;justify-content:flex-end}
body.rm .nrpop-back,body.rm .nrpop-back.closing{animation:none}