/* Emergent Role Explorer — page styles.
 * Extracted from the inline <style> block in index.html so the CSP can drop
 * style-src 'unsafe-inline' (plan Phase 5). Utility classes at the end of this file
 * replace the inline style="" attributes that removal also required.
 */
:root{
  --darker-kale:#10292C; --emerald:#338632; --dark-green-black:#424D53;
  --lighter-green-black:#E7E9EA; --lightest-green-black:#F5F5F5; --almost-white:#FAFAFA; --white:#FFFFFF;
  --dark-kale:#1F3A3D; --teal:#307C84; --light-emerald:#7FC87C; --lighter-emerald:#D9EED8;
  --lightest-emerald:#ECF7EC; --light-kale:#7CBFC7; --lighter-kale:#E0F3F5; --lightest-kale:#F0FAFB;
  --opal:#B0D6CE; --light-opal:#E7F2F0;
  --ink:#10292C; --body:#424D53; --line:#E7E9EA; --accent:#338632;
  --t-live:#338632; --t-warm:#307C84; --t-stable:#9DBAB3; --t-na:#CBD6D2;
  --serif:'Droid Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--body);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:var(--teal)}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.2}
.eyebrow{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald)}

/* masthead */
.masthead{border-bottom:1px solid var(--line);background:var(--white);position:sticky;top:0;z-index:50}
.masthead .container{display:flex;align-items:center;justify-content:space-between;height:58px}
.masthead img{height:22px;display:block;min-width:80px}
.masthead nav a{font-size:13.5px;font-weight:600;color:var(--dark-kale);text-decoration:none;margin-left:22px}
.masthead nav a:hover{color:var(--emerald)}

/* hero */
.hero{background:linear-gradient(180deg,var(--lightest-kale),var(--white) 82%);padding:72px 0 30px;text-align:center}
.hero h1{font-size:clamp(34px,5.2vw,56px);margin:14px auto 18px;max-width:820px}
.hero p.sub{max-width:720px;margin:0 auto;font-size:17px}
.hero .stats{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero .stat{text-align:center}
.hero .stat b{display:block;font-family:var(--serif);font-size:26px;color:var(--ink)}
.hero .stat span{font-size:12.5px;color:var(--dark-green-black);letter-spacing:.04em;text-transform:uppercase}

/* tool */
.tool{padding:34px 0 8px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(16,41,44,.06);padding:26px 26px 22px;position:relative}
.steplab{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-green-black);margin-bottom:8px}
.searchwrap{position:relative}
.bigsearch{width:100%;font-family:var(--sans);font-size:17px;padding:14px 16px 14px 44px;border:1.5px solid var(--line);border-radius:10px;outline:none;color:var(--ink);background:var(--almost-white)}
.bigsearch:focus{border-color:var(--emerald);background:var(--white)}
.searchwrap .mag{position:absolute;left:15px;top:50%;transform:translateY(-50%);opacity:.45;pointer-events:none}
.dd{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--white);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(16,41,44,.14);max-height:320px;overflow:auto;z-index:40;display:none}
.dd.open{display:block}
.dd .it{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14.5px;cursor:pointer;color:var(--ink)}
.dd .it:hover,.dd .it.act{background:var(--lightest-emerald)}
.dd .tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:20px;flex:none}
.dd .tag.role{background:var(--lighter-kale);color:var(--dark-kale)}
.dd .tag.cand{background:var(--lighter-emerald);color:var(--emerald)}
.dd .tag.skill{background:var(--lightest-green-black);color:var(--dark-green-black)}
.dd .sub2{margin-left:auto;font-size:12px;color:#6c7a76}
.dd .note{padding:10px 14px;font-size:12.5px;color:#5d6f6a;background:var(--lightest-kale);border-bottom:1px solid var(--line);line-height:1.5}
.tryrow{margin-top:12px;font-size:13px;color:var(--dark-green-black)}
.tryrow a{color:var(--teal);text-decoration:none;border-bottom:1px dashed var(--opal);margin:0 4px;cursor:pointer}
.tryrow a:hover{color:var(--emerald)}

/* chips */
.chipzone{margin-top:20px;display:none}
.chipzone.show{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--lightest-emerald);border:1px solid var(--lighter-emerald);color:var(--dark-kale);border-radius:20px;padding:5px 8px 5px 12px;font-size:13.5px;font-weight:500;animation:pop .18s ease}
.chip .x{cursor:pointer;width:17px;height:17px;border-radius:50%;background:rgba(16,41,44,.08);display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:var(--dark-kale)}
.chip .x:hover{background:var(--emerald);color:#fff}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.addwrap{position:relative;display:inline-block}
.addskill{font-family:var(--sans);font-size:13.5px;padding:6px 12px;border:1.5px dashed var(--opal);border-radius:20px;outline:none;color:var(--ink);width:190px;background:transparent}
.addskill:focus{border-color:var(--emerald)}
.clearall{font-size:12.5px;color:#6c7a76;margin-left:10px;cursor:pointer;text-decoration:underline;background:none;border:none;font-family:var(--sans)}
.whynote{margin-top:14px;font-size:13px;color:var(--dark-green-black)}
.whynote summary{cursor:pointer;color:var(--teal);font-weight:600;font-size:12.5px;width:fit-content}
.whynote summary:hover{color:var(--emerald)}
.whynote p{margin-top:8px;padding:12px 16px;background:var(--lightest-kale);border-left:3px solid var(--opal);border-radius:0 10px 10px 0;max-width:720px;line-height:1.55}

/* result */
.result{margin-top:26px;display:none}
.result.show{display:block;animation:rise .35s ease}
/* Scoring is a network round trip now. The previous reading stays on screen and dims
   rather than emptying, so adjusting a skill never flashes the layout. */
.result.busy{opacity:.55;transition:opacity .12s;pointer-events:none}
.result.busy .mbar i{transition:none}
@media(prefers-reduced-motion:reduce){
  .result.show{animation:none}
  .chip{animation:none}
  .mbar i{transition:none}
  html{scroll-behavior:auto}
}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.rgrid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:18px}
@media(max-width:900px){.rgrid{grid-template-columns:1fr}}
.rcard{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--almost-white)}
.rcard.hero-card{background:linear-gradient(160deg,var(--lightest-emerald),var(--white));border-color:var(--lighter-emerald)}
.rcard h3{font-size:15px;margin-bottom:4px}
.rcard .lab{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-green-black);margin-bottom:10px}
.mixrow{margin-bottom:10px}
.mixrow .nm{display:flex;justify-content:space-between;font-size:13px;color:var(--ink);font-weight:500}
.mbar{height:7px;background:var(--lighter-green-black);border-radius:4px;overflow:hidden;margin-top:4px}
.mbar i{display:block;height:100%;background:var(--teal);border-radius:4px;width:0;transition:width .7s cubic-bezier(.2,.7,.3,1)}
.pullname{font-family:var(--serif);font-size:24px;color:var(--ink);margin:2px 0 2px}
.tierpill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-radius:20px;padding:3px 10px;margin-bottom:10px}
.pulldesc{font-size:13.5px;color:var(--body);margin:8px 0 14px}
.pullmeter .nm{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--ink)}
.pullmeter .mbar i{background:var(--emerald)}
.runners{margin-top:12px;border-top:1px dashed var(--lighter-green-black);padding-top:10px}
.runners .mixrow .mbar i{background:var(--opal)}
.factline{font-size:12.5px;color:var(--dark-green-black);margin-top:10px}
.bridge{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px dashed var(--lighter-green-black)}
.bridge:last-of-type{border-bottom:none}
.bridge .dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--white);border:2px solid var(--emerald);color:var(--emerald);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.bridge b{display:block;font-size:14px;color:var(--ink)}
.bridge span{font-size:12px;color:#6c7a76}
.sharerow{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer;border:1.5px solid var(--emerald);background:var(--emerald);color:#fff}
.btn.ghost{background:transparent;color:var(--emerald)}
.btn:hover{filter:brightness(1.06)}
.hintline{font-size:13px;color:#6c7a76;margin-top:14px}

/* map */
.mapsec{padding:46px 0 0}
.mapsec .head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.mapsec h2{font-size:clamp(22px,3vw,30px)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--dark-green-black);align-items:center}
.legend .sw{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px}
#graphwrap{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,var(--white),var(--lightest-kale))}
#graph{display:block;width:100%;height:min(74vh,680px);cursor:grab;touch-action:none}
#graph.grabbing{cursor:grabbing}
#gtip{position:absolute;pointer-events:none;background:var(--darker-kale);color:#fff;font-size:12px;line-height:1.45;padding:8px 11px;border-radius:8px;opacity:0;transition:opacity .12s;max-width:240px;z-index:5}
.mapnote{font-size:12.5px;color:#6c7a76;margin-top:10px}
.gbtns{position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:6}
.gbtn{font-family:var(--sans);font-size:12px;font-weight:600;background:var(--white);border:1px solid var(--line);border-radius:7px;padding:6px 11px;cursor:pointer;color:var(--dark-kale);box-shadow:0 2px 8px rgba(16,41,44,.08)}
.gbtn:hover{border-color:var(--emerald);color:var(--emerald)}

/* method + footer */
.method{padding:52px 0 26px}
.method .box{border-left:3px solid var(--emerald);background:var(--lightest-emerald);border-radius:0 12px 12px 0;padding:20px 24px;font-size:14px}
.method .box b{color:var(--ink)}
.foot{margin-top:46px;border-top:1px solid var(--line);background:var(--darker-kale);color:var(--lighter-green-black);padding:34px 0}
.foot .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.foot img{height:20px;filter:brightness(0) invert(1);opacity:.92;min-width:74px}
.foot .tag{font-size:13px}
.foot a{color:var(--light-emerald);text-decoration:none}
.foot a:hover{text-decoration:underline}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--darker-kale);color:#fff;font-size:13.5px;padding:10px 18px;border-radius:8px;opacity:0;transition:all .25s;z-index:99;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= UTILITY CLASSES =================
   These replace the thirteen inline style="" attributes index.html used to carry. They
   exist for one reason: CSP style-src blocks inline style ATTRIBUTES as well as inline
   <style> blocks, so extracting the stylesheet alone would not have let us drop
   'unsafe-inline'. Removing both did.

   Note this does not constrain app.js: assignments through the CSSOM (el.style.width = …)
   are not inline styles as far as CSP is concerned and continue to work untouched. The
   is-hidden class below is therefore only an initial state — any el.style.display the app
   sets later wins over it, because an inline style beats a class. */
.is-hidden{display:none}
.steplab--tight{margin-top:6px}
.steplab-note{font-weight:500;text-transform:none;letter-spacing:0;color:#6c7a76}
.addrow{margin-top:10px}
.tierpill--split{background:var(--teal)}
.sw--live{background:var(--t-live)}
.sw--warm{background:var(--t-warm)}
.sw--stable{background:var(--t-stable)}
.sw--na{background:var(--t-na)}
.sw--unclustered{background:#D7DEDC}
.foot-tag{margin-top:8px}
/* The fourteenth. This one lived in an app.js innerHTML template rather than in
   index.html, so it survived the original sweep and only surfaced once the CSP was
   actually being enforced — it fires on every contested result. */
.factline--lead{margin:0 0 8px}