/* ============================================================
   Atlas des métiers — conformed to chooseandconnect.com
   Inter everywhere · white surfaces, faint lavender wash
   Near-black text · vivid brand purple · pill CTAs, soft cards
   (Family accents kept for the data-viz: violet/teal/orange/pink)
   ============================================================ */
:root {
  /* surfaces — white, with the site's faint lavender wash at the top */
  --bg:         #ffffff;
  --surface:    #ffffff;   /* cards / panels */
  --surface-2:  #f7f5fb;   /* insets / inputs */
  --line:       #ece9f3;   /* hairline borders (zinc-tinted) */
  --line-soft:  #f3f1f8;

  /* text — the site's exact near-black + muted greys */
  --text:       oklch(0.141 0.005 285.823);   /* near-black */
  --text-dim:   oklch(0.37 0.013 285.8);       /* secondary copy */
  --muted:      oklch(0.55 0.016 285.9);       /* labels / meta */

  /* the brand purple — exact value pulled from chooseandconnect.com.
     --primary is the single source; tints/shadows derive from it. */
  --primary:        oklch(0.60 0.27 302.79);
  --primary-strong: oklch(0.52 0.27 302.79);                 /* hover / links (darker shade) */
  --primary-soft:   oklch(from var(--primary) l c h / 0.10);
  --primary-line:   oklch(from var(--primary) l c h / 0.35);

  --seed:           #0d9488;   /* teal — seed reference (data) */
  --ghost:          #db2777;   /* pink — hover ghost (data) */

  /* job-family accents (functional colour-coding, kept as-is) */
  --fam-interests:   #7c3aed;  /* violet */
  --fam-context:     #0d9488;  /* teal  */
  --fam-dispositions:#ea580c;  /* orange */
  --fam-values:      #db2777;  /* pink  */

  /* one typeface, like the site: Inter for everything (--mono kept for numerics) */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "Inter", ui-monospace, Menlo, monospace;

  /* radius scale */
  --r-card:  24px;   /* panels / cards */
  --r-field: 14px;   /* inputs, dropdowns, ranking rows */
  --r-pill:  999px;  /* buttons, chips, tags */
  --shadow: 0 18px 50px -28px rgba(24,16,40,0.22), 0 2px 8px -4px rgba(24,16,40,0.06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* faint lavender wash anchored to the top of the viewport, fading to white — as
   on the site. A fixed pseudo-element, so it never repaints while scrolling. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #f3eefe 0%, #faf8ff 30%, var(--bg) 62%);
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.65) 0%, transparent 45%);
}

/* ---------- masthead ---------- */
/* h1 spans the top row; the tagline (left) and the method link (right) share
   the next row, vertically centred against each other. */
.masthead { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 56px 40px 14px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
.kicker {
  font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--primary-strong); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px;
  background: var(--primary-soft); padding: 6px 12px; border-radius: var(--r-pill);
}
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.masthead h1 {
  grid-column: 1; grid-row: 1;
  font-family: var(--sans); font-weight: 800; font-size: clamp(40px, 6.6vw, 80px);
  line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 18px; color: var(--text);
}
.accent { color: var(--primary); }
.tagline { grid-column: 1; grid-row: 2; max-width: 600px; color: var(--text-dim); font-size: 18px; line-height: 1.5; margin: 0; }
.tagline em { color: var(--primary-strong); font-style: normal; font-weight: 600; }

/* "how this atlas is built" — opens the method modal */
.about-link {
  grid-column: 2; grid-row: 2; justify-self: end; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--primary-strong);
  background: var(--primary-soft); border: 1px solid var(--primary-line); border-radius: var(--r-pill);
  padding: 9px 16px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.about-link:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-1px); }
.about-link .about-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.about-link .about-arrow { transition: transform .15s; }
.about-link:hover .about-arrow { transform: translateX(3px); }

/* "made by Choose and Connect" — credit + link to their site (masthead top-right) */
.cnc-credit {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--text); transition: color .15s;
}
.cnc-credit .cnc-by { color: var(--muted); font-weight: 500; }
.cnc-credit .cnc-mark { width: 24px; height: 24px; display: block; }
.cnc-credit:hover .cnc-name { color: var(--primary-strong); }

/* narrow screens: stack the masthead in one column */
@media (max-width: 720px) {
  .masthead { grid-template-columns: 1fr; }
  .masthead h1, .tagline, .about-link, .cnc-credit { grid-column: 1; grid-row: auto; justify-self: start; }
  .about-link { margin-top: 16px; }
  .cnc-credit { margin-top: 14px; }
}

/* ---------- layout ---------- */
#app {
  position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 26px 40px 56px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; align-items: start;
}
@media (max-width: 980px) { #app { grid-template-columns: 1fr; } }

.instrument, .results-panel {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow);
}
.instrument { padding: 20px 20px 24px; position: sticky; top: 16px;
  /* cap to the viewport so the tool stays self-contained: when the radar +
     sliders are taller than the screen, scroll within the panel to reach the
     fine-tune cursors — without scrolling the (much longer) jobs list. */
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 980px) { .instrument { position: static; max-height: none; overflow: visible; } }
.results-panel { padding: 20px 18px 22px; }

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto;
  padding: 22px 40px 44px; text-align: center; font-size: 13px; font-weight: 500; color: var(--muted);
  border-top: 1px solid var(--line-soft); }

/* ---------- search ---------- */
.seedbar { margin-bottom: 16px; }
.search-wrap { position: relative; }
.search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search {
  width: 100%; padding: 14px 14px 14px 44px; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-field); font-family: var(--sans); font-size: 16px; font-weight: 500;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.search::placeholder { color: var(--muted); font-weight: 400; }
.search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); background: var(--surface); }
.results {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-field); box-shadow: var(--shadow); padding: 6px;
}
.results .opt { padding: 10px 12px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.results .opt:hover, .results .opt.active { background: var(--primary-soft); }
.results .opt .o-uni { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.results .opt .o-label { flex: 1; font-weight: 500; }
.results .opt .o-fam { font-size: 12px; color: var(--muted); }
.results .none { padding: 12px; color: var(--muted); font-size: 13px; }

/* ---------- radar ---------- */
.radar-stage { display: flex; flex-direction: column; align-items: center; }
.radar-host { width: 100%; max-width: 480px; touch-action: none; }
.radar-host svg { width: 100%; height: auto; display: block; overflow: visible; }
.ring { fill: none; stroke: var(--line); }
.ring.r4 { stroke: #ddd6ec; }
.spoke { stroke: var(--line); }
.ring-num { fill: #b9b2c8; font-family: var(--mono); font-size: 8px; font-weight: 600; }
.ax-label { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; cursor: default; }
.ax-label.dim { opacity: 0.5; }
.seed-poly { fill: none; stroke: var(--seed); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.85; }
.ghost-poly { fill: rgba(219,39,119,0.08); stroke: var(--ghost); stroke-width: 1.4; pointer-events: none; }
.target-poly { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 2;
  filter: drop-shadow(0 2px 6px oklch(from var(--primary) l c h / 0.28)); transition: fill .12s; }
.handle { fill: var(--surface); stroke: var(--primary); stroke-width: 2; cursor: grab; transition: r .12s, fill .12s; }
.handle:hover, .handle.drag { fill: var(--primary); r: 7; }
.handle.drag { cursor: grabbing; }
.handle-hit { fill: transparent; cursor: grab; }
.handle:focus-visible { outline: none; }
.handle.focus { fill: var(--primary); }

.seed-caption { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.01em;
  margin-top: 6px; text-align: center; min-height: 16px; }
.seed-caption b { color: var(--seed); font-weight: 700; }

/* pre-seed (locked): only search / pick a suggestion is meaningful */
#app.locked .handle, #app.locked .handle-hit { display: none; }
#app.locked .radar-host { opacity: 0.6; }
#app.locked .target-poly { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 3 4; filter: none; }
#app.locked .controls { opacity: 0.45; pointer-events: none; }

/* ---------- secondary sliders ---------- */
.controls { margin-top: 20px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.controls-head { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.ghost-btn { background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); font-family: var(--sans);
  font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer; letter-spacing: 0.01em; transition: .15s; }
.ghost-btn:hover { border-color: var(--primary-line); color: var(--primary-strong); background: var(--primary-soft); }
.sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
@media (max-width: 560px) { .sliders { grid-template-columns: 1fr; } }
.fam-block { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.fam-title { grid-column: 1 / -1; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 11px 0 4px; display: flex; align-items: center; gap: 7px; color: var(--text-dim); }
.fam-title .fdot { width: 8px; height: 8px; border-radius: 3px; }
.srow { display: grid; grid-template-columns: 92px 1fr 22px; align-items: center; gap: 9px; padding: 3px 0; }
.srow label { font-size: 13px; font-weight: 500; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .sval { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.srow input[type=range] { width: 100%; height: 4px; cursor: pointer; } /* accent-color set inline per family */

/* ---------- ranking ---------- */
.rp-head { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 4px 16px; }
.rp-head h2 { font-family: var(--sans); font-weight: 800; font-size: 24px; margin: 0; letter-spacing: -0.025em; color: var(--text); }
.rp-meta { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.ranking { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.jrow {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-field); cursor: pointer;
  background: var(--surface); transition: border-color .14s, background .14s, box-shadow .14s, transform .14s;
}
.jrow:hover { border-color: var(--primary-line); background: var(--primary-soft); transform: translateY(-1px); }
.jrow.is-seed { border-color: var(--seed); background: #effbf9; box-shadow: 0 0 0 1px var(--seed) inset; }
.jrow .jrank { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.jrow.is-seed .jrank { color: var(--seed); }
.jmain { min-width: 0; }
.jname { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: break-word; color: var(--text); }
.jname .seedtag { font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--seed);
  padding: 2px 7px; border-radius: var(--r-pill); margin-left: 8px; vertical-align: middle; text-transform: uppercase; }
.juni { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.juni .udot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.jmatch { text-align: right; min-width: 64px; }
.jmatch .pct { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.jmatch .mbar { display: block; width: 60px; height: 4px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 5px; margin-left: auto; }
.jmatch .mfill { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--seed)); }

/* ---------- start prompt / suggestions ---------- */
.start-prompt { color: var(--text-dim); font-size: 15px; margin: 0 4px 18px; line-height: 1.55; }
.start-prompt em { color: var(--primary-strong); font-style: normal; font-weight: 600; }
.suggestions { display: flex; flex-wrap: wrap; gap: 9px; padding: 0 4px; }
.sugg { font-size: 14px; font-weight: 600; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
  color: var(--text-dim); cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.sugg:hover { border-color: var(--primary-line); color: var(--primary-strong); background: var(--primary-soft); transform: translateY(-1px); }
.sugg .sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ---------- detail drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(24,16,40,0.28); backdrop-filter: blur(2px); }
.drawer {
  position: fixed; z-index: 70; top: 0; right: 0; height: 100%; width: 420px; max-width: 94vw; overflow-y: auto;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px -28px rgba(24,16,40,0.30); padding: 28px 28px 40px; animation: slidein .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer .d-close { position: absolute; top: 18px; right: 18px; }
.drawer .d-uni { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
.drawer .d-uni .udot { width: 8px; height: 8px; border-radius: 50%; }
.drawer h3 { font-family: var(--sans); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; margin: 14px 0 4px; line-height: 1.08; color: var(--text); }
.drawer .d-desc { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin: 12px 0 22px; }
.drawer .d-sub { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.prow { display: grid; grid-template-columns: 116px 1fr 18px; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; font-weight: 500; }
.prow .pbar { display: block; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.prow .pfill { display: block; height: 100%; border-radius: 4px; }
.prow .pn { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.d-actions { margin-top: 24px; display: flex; gap: 10px; }
.btn-primary { flex: 1; background: var(--primary); color: #fff; border: 0; border-radius: var(--r-pill); padding: 14px;
  font-family: var(--sans); font-weight: 700; font-size: 15px; cursor: pointer; transition: .15s; box-shadow: 0 10px 22px -10px oklch(from var(--primary) l c h / 0.65); }
.btn-primary:hover { background: var(--primary-strong); transform: translateY(-1px); }

/* staggered entrance */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .6s cubic-bezier(.2,.8,.2,1) backwards; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- method modal ---------- */
.about {
  border: 0; padding: 0; margin: auto; width: min(640px, 92vw);
  background: var(--surface); color: var(--text); border-radius: var(--r-card);
  box-shadow: 0 40px 100px -30px rgba(24,16,40,0.5);
}
.about::backdrop { background: rgba(24,16,40,0.42); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
  .about[open] { animation: about-in .3s cubic-bezier(.2,.8,.2,1); }
  .about[open]::backdrop { animation: about-fade .3s ease; }
}
@keyframes about-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes about-fade { from { opacity: 0; } to { opacity: 1; } }
.about-inner { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; padding: 30px 32px 34px; position: relative; }
.about-close { position: absolute; top: 18px; right: 18px; }
.about h2 { font-family: var(--sans); font-weight: 800; font-size: clamp(26px, 4.4vw, 34px); letter-spacing: -0.03em;
  line-height: 1.05; margin: 14px 0 16px; color: var(--text); }
.about-lead { color: var(--text-dim); font-size: 16px; line-height: 1.6; margin: 0; }
.about-lead em { color: var(--primary-strong); font-style: normal; font-weight: 600; }
.about-sec { border-top: 1px solid var(--line-soft); padding-top: 20px; margin-top: 22px; }
.about-sec > h3 { font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-strong); margin: 0 0 11px; }
.about-sec p { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0; }
.about-sec p em { color: var(--text); font-style: italic; }
.about-sec p b, .about-fams li b, .about-steps li b { color: var(--text); font-weight: 700; }
.about code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; color: var(--primary-strong); }

.about-fams { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
.about-fams li { font-size: 14.5px; color: var(--text-dim); line-height: 1.5; }
.about-fams .fdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 9px; vertical-align: 1px; }

.about-scale { display: flex; align-items: center; gap: 14px; margin-top: 16px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.about-scale .about-track { flex: 1; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--surface-2), var(--primary)); }

.about-steps { list-style: none; counter-reset: step; margin: 14px 0 0; padding: 0; display: grid; gap: 13px; }
.about-steps li { position: relative; padding-left: 40px; font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
.about-steps li em { color: var(--text); font-style: italic; font-weight: 600; }
.about-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -1px;
  width: 27px; height: 27px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong);
  font-family: var(--sans); font-weight: 800; font-size: 13px; display: grid; place-items: center; }

.about-caveat { border-top: 0; background: var(--surface-2); border-radius: var(--r-field); padding: 16px 18px; margin-top: 24px; }
.about-caveat > h3 { color: var(--text-dim); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #ddd6ec; border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #c9bfe4; background-clip: padding-box; }