/* ==========================================================================
   JobShouter — Pathway Explorer
   Every selector is prefixed .jsp- and every rule is scoped inside .jsp-root
   so nothing here can leak into your theme and nothing in your theme can
   accidentally restyle the widget.
   ========================================================================== */

.jsp-root{
  /* --- light palette (also the fallback for every other state) --- */
  --jsp-paper:#F2F5F3;
  --jsp-surface:#FFFFFF;
  --jsp-surface-2:#E8EDE9;
  --jsp-ink:#13201E;
  --jsp-ink-2:#4E5E5A;
  --jsp-ink-3:#78877F;
  --jsp-line:#D2DAD5;
  --jsp-line-2:#BCC7C1;
  --jsp-accent:#0F6E5A;
  --jsp-accent-soft:#E0EEE9;
  --jsp-t-study:#2B58A6;
  --jsp-t-skill:#A2601A;
  --jsp-t-work:#14705A;
  --jsp-t-service:#8A3A50;
  --jsp-t-study-bg:#E6EDF9;
  --jsp-t-skill-bg:#F7EBDC;
  --jsp-t-work-bg:#DFEEE9;
  --jsp-t-service-bg:#F6E5E9;
  --jsp-shadow:0 1px 2px rgba(19,32,30,.06), 0 8px 24px -12px rgba(19,32,30,.18);
  --jsp-r:7px;
  --jsp-display:"Anek Latin","Trebuchet MS",sans-serif;
  --jsp-body:"Mukta","Segoe UI",system-ui,sans-serif;
  --jsp-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Offset for a sticky theme header. Set this to your header height, e.g.
     .jsp-root{ --jsp-sticky-top:72px; }  in Appearance > Customise > Extra CSS */
  --jsp-sticky-top:0px;

  box-sizing:border-box !important;
  background:var(--jsp-paper) !important;
  color:var(--jsp-ink) !important;
  font-family:var(--jsp-body) !important;
  font-size:15px !important;
  line-height:1.55 !important;
  -webkit-font-smoothing:antialiased !important;
  display:block !important;
  margin:0 !important;
  border-radius:var(--jsp-r) !important;
  overflow:hidden !important;
}
.jsp-root *,.jsp-root *::before,.jsp-root *::after{box-sizing:border-box !important;}

/* --------------------------------------------------------------------------
   Theme armour. WordPress themes style bare elements (button, a, code, dl…)
   aggressively, and often force them. This resets those elements inside the
   widget only, and the component rules below are more specific so they win.
   Your theme is untouched: nothing here applies outside .jsp-root.
   The design tokens above are deliberately left unlocked, so you can still
   recolour the widget from Appearance > Customise > Additional CSS.
   -------------------------------------------------------------------------- */
.jsp-root div,.jsp-root p,.jsp-root span,.jsp-root nav,.jsp-root aside,.jsp-root i,
.jsp-root button,.jsp-root a,.jsp-root code,.jsp-root svg,
.jsp-root h2,.jsp-root h3,.jsp-root dl,.jsp-root dt,.jsp-root dd,.jsp-root ul,.jsp-root li{
  margin:0 !important;padding:0 !important;border:0 !important;outline:0 !important;background:none !important;box-shadow:none !important;
  font-family:inherit !important;font-size:inherit !important;font-weight:inherit !important;font-style:normal !important;
  line-height:inherit !important;color:inherit !important;text-align:left !important;text-transform:none !important;
  letter-spacing:normal !important;text-decoration:none !important;text-shadow:none !important;border-radius:0 !important;
  list-style:none !important;min-width:0 !important;min-height:0 !important;max-width:none !important;width:auto !important;height:auto !important;
  float:none !important;position:static !important;transform:none !important;
}
.jsp-root button{cursor:pointer !important;-webkit-appearance:none !important;appearance:none !important;}

/* Dark mode. Add data-jsp-theme="light" or "dark" on the widget to force one. */
@media (prefers-color-scheme:dark){
  .jsp-root:not([data-jsp-theme="light"]){
    --jsp-paper:#0D1513; --jsp-surface:#16211F; --jsp-surface-2:#1E2B28;
    --jsp-ink:#E7EEEA; --jsp-ink-2:#9CACA6; --jsp-ink-3:#7A8A84;
    --jsp-line:#2A3835; --jsp-line-2:#3A4B47;
    --jsp-accent:#4FC2A4; --jsp-accent-soft:#16302A;
    --jsp-t-study:#86A9E9; --jsp-t-skill:#DFA361; --jsp-t-work:#5FC8A4; --jsp-t-service:#E0839A;
    --jsp-t-study-bg:#182338; --jsp-t-skill-bg:#2D2318; --jsp-t-work-bg:#12302A; --jsp-t-service-bg:#301A21;
    --jsp-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
.jsp-root[data-jsp-theme="dark"]{
  --jsp-paper:#0D1513; --jsp-surface:#16211F; --jsp-surface-2:#1E2B28;
  --jsp-ink:#E7EEEA; --jsp-ink-2:#9CACA6; --jsp-ink-3:#7A8A84;
  --jsp-line:#2A3835; --jsp-line-2:#3A4B47;
  --jsp-accent:#4FC2A4; --jsp-accent-soft:#16302A;
  --jsp-t-study:#86A9E9; --jsp-t-skill:#DFA361; --jsp-t-work:#5FC8A4; --jsp-t-service:#E0839A;
  --jsp-t-study-bg:#182338; --jsp-t-skill-bg:#2D2318; --jsp-t-work-bg:#12302A; --jsp-t-service-bg:#301A21;
  --jsp-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

.jsp-root .jsp-wrap{max-width:1240px !important;margin:0 auto !important;padding-inline:20px !important;}

/* ---------- masthead (optional, header="no" removes it) ---------- */
.jsp-root .jsp-masthead{padding-block:28px 20px !important;border-bottom:1px solid var(--jsp-line) !important;}
.jsp-root .jsp-brandrow{display:flex !important;align-items:baseline !important;gap:10px !important;flex-wrap:wrap !important;margin:0 0 14px !important;}
.jsp-root .jsp-brand{font-family:var(--jsp-display) !important;font-weight:700 !important;font-size:14px !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--jsp-accent) !important;}
.jsp-root .jsp-brand-dot{width:5px !important;height:5px !important;border-radius:50% !important;background:var(--jsp-line-2) !important;align-self:center !important;}
.jsp-root .jsp-brand-note{font-size:12.5px !important;letter-spacing:.07em !important;text-transform:uppercase !important;color:var(--jsp-ink-3) !important;font-weight:500 !important;}
.jsp-root .jsp-title{
  font-family:var(--jsp-display) !important;font-weight:700 !important;font-size:clamp(30px,5.2vw,48px) !important;
  line-height:1.04 !important;margin:0 0 10px !important;letter-spacing:-.02em !important;text-wrap:balance !important;color:var(--jsp-ink) !important;padding:0 !important;
}
.jsp-root .jsp-title em{font-style:normal !important;color:var(--jsp-accent) !important;}
.jsp-root .jsp-lede{max-width:60ch !important;margin:0 !important;color:var(--jsp-ink-2) !important;font-size:16px !important;}

/* ---------- path bar ---------- */
.jsp-root .jsp-pathbar{
  position:sticky !important;top:var(--jsp-sticky-top) !important;z-index:8 !important;
  background:var(--jsp-paper) !important;
  border-bottom:1px solid var(--jsp-line) !important;
}
.jsp-root .jsp-pathbar-in{display:flex !important;align-items:center !important;gap:12px !important;padding-block:11px !important;flex-wrap:wrap !important;}
.jsp-root .jsp-crumbs{display:flex !important;align-items:center !important;gap:5px !important;overflow-x:auto !important;flex:1 1 320px !important;min-width:0 !important;padding-bottom:2px !important;scrollbar-width:thin !important;}
.jsp-root .jsp-crumb{
  font-family:var(--jsp-display) !important;font-weight:600 !important;font-size:13px !important;line-height:1.4 !important;
  border:1px solid var(--jsp-line-2) !important;background:var(--jsp-surface) !important;color:var(--jsp-ink) !important;
  padding:5px 11px !important;border-radius:999px !important;cursor:pointer !important;white-space:nowrap !important;flex:none !important;
  transition:border-color .15s,background .15s !important;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;
}
.jsp-root .jsp-crumb:hover{border-color:var(--jsp-accent) !important;background:var(--jsp-surface) !important;}
.jsp-root .jsp-crumb[aria-current="true"]{background:var(--jsp-ink) !important;color:var(--jsp-paper) !important;border-color:var(--jsp-ink) !important;}
.jsp-root .jsp-crumb-sep{color:var(--jsp-ink-3) !important;flex:none !important;font-size:13px !important;}
.jsp-root .jsp-urlchip{
  font-family:var(--jsp-mono) !important;font-size:11.5px !important;color:var(--jsp-ink-3) !important;
  background:var(--jsp-surface-2) !important;border:1px solid var(--jsp-line) !important;border-radius:5px !important;
  padding:5px 9px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;max-width:100% !important;
}
.jsp-root .jsp-reset{
  font-family:var(--jsp-display) !important;font-weight:600 !important;font-size:12.5px !important;letter-spacing:.04em !important;
  background:none !important;border:none !important;color:var(--jsp-accent) !important;cursor:pointer !important;padding:5px 2px !important;text-transform:uppercase !important;box-shadow:none !important;
}
.jsp-root .jsp-reset:hover{text-decoration:underline !important;background:none !important;}

/* ---------- stage ---------- */
.jsp-root .jsp-stage{display:grid !important;grid-template-columns:1fr !important;gap:22px !important;padding-block:22px 32px !important;align-items:start !important;}
@media (min-width:1080px){ .jsp-root .jsp-stage{grid-template-columns:minmax(0,1fr) 352px !important;gap:28px !important;} }

.jsp-root .jsp-canvas-wrap{overflow-x:auto !important;overflow-y:hidden !important;padding-bottom:8px !important;margin-inline:-4px !important;padding-inline:4px !important;}
.jsp-root .jsp-canvas{position:relative !important;display:flex !important;gap:96px !important;align-items:flex-start !important;min-height:220px !important;width:max-content !important;min-width:100% !important;}
.jsp-root .jsp-wires{position:absolute !important;inset:0 !important;pointer-events:none !important;overflow:visible !important;}
.jsp-root .jsp-wirelabels{position:absolute !important;inset:0 !important;pointer-events:none !important;}
.jsp-root .jsp-wirelabel{
  position:absolute !important;transform:translate(-50%,-50%) !important;
  font-family:var(--jsp-display) !important;font-size:10.5px !important;font-weight:600 !important;letter-spacing:.04em !important;
  color:var(--jsp-ink-2) !important;background:var(--jsp-paper) !important;padding:1px 6px !important;border-radius:4px !important;
  white-space:nowrap !important;border:1px solid var(--jsp-line) !important;
}

.jsp-root .jsp-col{display:flex !important;flex-direction:column !important;gap:10px !important;width:204px !important;flex:none !important;}
.jsp-root .jsp-col-head{font-family:var(--jsp-display) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase !important;color:var(--jsp-ink-3) !important;padding-bottom:2px !important;}
.jsp-root .jsp-col-head span{color:var(--jsp-line-2) !important;margin-right:6px !important;}

.jsp-root .jsp-node{
  position:relative !important;text-align:left !important;width:100% !important;
  background:var(--jsp-surface) !important;border:1px solid var(--jsp-line) !important;border-radius:var(--jsp-r) !important;
  padding:11px 12px !important;cursor:pointer !important;color:var(--jsp-ink) !important;font-family:var(--jsp-body) !important;font-size:15px !important;
  display:flex !important;flex-direction:column !important;gap:2px !important;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;
  transition:border-color .15s,transform .15s,box-shadow .15s !important;
}
.jsp-root .jsp-node:hover{border-color:var(--jsp-line-2) !important;transform:translateY(-1px) !important;background:var(--jsp-surface) !important;}
.jsp-root .jsp-node:focus-visible{outline:2px solid var(--jsp-accent) !important;outline-offset:2px !important;}
.jsp-root .jsp-node-track{font-family:var(--jsp-display) !important;font-size:9.5px !important;font-weight:700 !important;letter-spacing:.12em !important;text-transform:uppercase !important;display:flex !important;align-items:center !important;gap:5px !important;}
.jsp-root .jsp-node-track i{width:6px !important;height:6px !important;border-radius:50% !important;background:currentColor !important;font-style:normal !important;}
.jsp-root .jsp-node-name{font-family:var(--jsp-display) !important;font-weight:600 !important;font-size:15px !important;line-height:1.2 !important;letter-spacing:-.005em !important;color:var(--jsp-ink) !important;}
.jsp-root .jsp-node-sub{font-size:12.5px !important;color:var(--jsp-ink-2) !important;line-height:1.35 !important;}
.jsp-root .jsp-node-via{
  margin-top:6px !important;font-family:var(--jsp-display) !important;font-size:10px !important;font-weight:700 !important;
  letter-spacing:.08em !important;text-transform:uppercase !important;color:var(--jsp-ink-3) !important;
  border:1px solid var(--jsp-line) !important;border-radius:4px !important;padding:1px 6px !important;align-self:flex-start !important;
  max-width:100% !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
}
.jsp-root .jsp-node-more{font-family:var(--jsp-display) !important;font-size:10.5px !important;font-weight:600 !important;letter-spacing:.06em !important;color:var(--jsp-ink-3) !important;text-transform:uppercase !important;margin-top:3px !important;}
.jsp-root .jsp-node.is-on{border-color:currentColor !important;border-width:1.5px !important;box-shadow:var(--jsp-shadow) !important;padding:10.5px 11.5px !important;}
.jsp-root .jsp-node.is-on .jsp-node-via{border-color:currentColor !important;color:currentColor !important;}
.jsp-root .jsp-node.is-root{width:196px !important;}

.jsp-root .jsp-t-study{color:var(--jsp-t-study) !important;}   .jsp-root .jsp-t-study.is-on{background:var(--jsp-t-study-bg) !important;}
.jsp-root .jsp-t-skill{color:var(--jsp-t-skill) !important;}   .jsp-root .jsp-t-skill.is-on{background:var(--jsp-t-skill-bg) !important;}
.jsp-root .jsp-t-work{color:var(--jsp-t-work) !important;}     .jsp-root .jsp-t-work.is-on{background:var(--jsp-t-work-bg) !important;}
.jsp-root .jsp-t-service{color:var(--jsp-t-service) !important;} .jsp-root .jsp-t-service.is-on{background:var(--jsp-t-service-bg) !important;}
.jsp-root .jsp-t-root{color:var(--jsp-accent) !important;}     .jsp-root .jsp-t-root.is-on{background:var(--jsp-accent-soft) !important;}

/* ---------- detail ---------- */
.jsp-root .jsp-detail{background:var(--jsp-surface) !important;border:1px solid var(--jsp-line) !important;border-radius:var(--jsp-r) !important;padding:18px 18px 16px !important;box-shadow:var(--jsp-shadow) !important;}
@media (min-width:1080px){ .jsp-root .jsp-detail{position:sticky !important;top:calc(var(--jsp-sticky-top) + 60px) !important;} }
.jsp-root .jsp-d-track{font-family:var(--jsp-display) !important;font-size:10px !important;font-weight:700 !important;letter-spacing:.13em !important;text-transform:uppercase !important;display:flex !important;align-items:center !important;gap:6px !important;margin:0 0 7px !important;}
.jsp-root .jsp-d-track i{width:7px !important;height:7px !important;border-radius:50% !important;background:currentColor !important;font-style:normal !important;}
.jsp-root .jsp-d-name{font-family:var(--jsp-display) !important;font-weight:700 !important;font-size:22px !important;line-height:1.14 !important;margin:0 0 3px !important;letter-spacing:-.015em !important;text-wrap:balance !important;color:var(--jsp-ink) !important;padding:0 !important;}
.jsp-root .jsp-d-sub{color:var(--jsp-ink-2) !important;font-size:13.5px !important;margin:0 0 16px !important;}
.jsp-root .jsp-facts{display:grid !important;grid-template-columns:auto 1fr !important;gap:7px 16px !important;margin:0 0 16px !important;font-size:13.5px !important;}
.jsp-root .jsp-facts dt{font-family:var(--jsp-display) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--jsp-ink-3) !important;padding-top:3px !important;margin:0 !important;}
.jsp-root .jsp-facts dd{margin:0 !important;font-variant-numeric:tabular-nums !important;color:var(--jsp-ink) !important;}
.jsp-root .jsp-sec-label{font-family:var(--jsp-display) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--jsp-ink-3) !important;margin:0 0 7px !important;}
.jsp-root .jsp-chips{display:flex !important;flex-wrap:wrap !important;gap:6px !important;margin:0 0 16px !important;}
.jsp-root .jsp-chip{font-size:12.5px !important;background:var(--jsp-surface-2) !important;border:1px solid var(--jsp-line) !important;border-radius:5px !important;padding:3px 9px !important;color:var(--jsp-ink-2) !important;font-family:var(--jsp-body) !important;line-height:1.5 !important;}
.jsp-root .jsp-chip code{font-family:var(--jsp-mono) !important;font-size:11px !important;background:none !important;padding:0 !important;}
.jsp-root .jsp-chip-go{cursor:pointer !important;background:var(--jsp-surface) !important;color:var(--jsp-ink) !important;border:1px solid var(--jsp-line-2) !important;transition:border-color .15s !important;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;}
.jsp-root .jsp-chip-go:hover{border-color:var(--jsp-accent) !important;color:var(--jsp-accent) !important;background:var(--jsp-surface) !important;}
.jsp-root .jsp-chip-go:focus-visible{outline:2px solid var(--jsp-accent) !important;outline-offset:2px !important;}
.jsp-root .jsp-reality{border-left:2px solid var(--jsp-t-skill) !important;padding:2px 0 2px 13px !important;margin:0 0 18px !important;}
.jsp-root .jsp-reality-h{font-family:var(--jsp-display) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:var(--jsp-t-skill) !important;margin:0 0 3px !important;}
.jsp-root .jsp-reality p{margin:0 !important;font-size:13.5px !important;color:var(--jsp-ink-2) !important;line-height:1.5 !important;}
.jsp-root .jsp-ctas{display:flex !important;gap:8px !important;flex-wrap:wrap !important;border-top:1px solid var(--jsp-line) !important;padding-top:14px !important;}
.jsp-root .jsp-cta{
  font-family:var(--jsp-display) !important;font-weight:600 !important;font-size:13px !important;padding:8px 14px !important;border-radius:5px !important;
  border:1px solid var(--jsp-accent) !important;background:var(--jsp-accent) !important;color:var(--jsp-paper) !important;cursor:pointer !important;
  text-decoration:none !important;display:inline-block !important;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;line-height:1.4 !important;
}
.jsp-root .jsp-cta:hover{background:var(--jsp-accent) !important;color:var(--jsp-paper) !important;opacity:.92 !important;}
.jsp-root .jsp-cta-2{background:none !important;color:var(--jsp-accent) !important;}
.jsp-root .jsp-cta-2:hover{background:none !important;color:var(--jsp-accent) !important;}
.jsp-root .jsp-cta:focus-visible{outline:2px solid var(--jsp-accent) !important;outline-offset:2px !important;}
.jsp-root .jsp-cta-note{width:100% !important;font-size:11.5px !important;color:var(--jsp-ink-3) !important;margin:2px 0 0 !important;}

/* ---------- legend + footnote ---------- */
.jsp-root .jsp-legend{display:flex !important;flex-wrap:wrap !important;gap:6px 18px !important;padding-block:14px !important;border-top:1px solid var(--jsp-line) !important;}
.jsp-root .jsp-leg{display:flex !important;align-items:center !important;gap:7px !important;font-family:var(--jsp-display) !important;font-size:11.5px !important;font-weight:600 !important;letter-spacing:.06em !important;text-transform:uppercase !important;}
.jsp-root .jsp-leg i{width:8px !important;height:8px !important;border-radius:50% !important;background:currentColor !important;font-style:normal !important;}
.jsp-root .jsp-leg span{color:var(--jsp-ink-2) !important;}
.jsp-root .jsp-foot{border-top:1px solid var(--jsp-line) !important;padding-block:18px 28px !important;color:var(--jsp-ink-3) !important;font-size:12.5px !important;}
.jsp-root .jsp-foot p{margin:0 0 5px !important;max-width:72ch !important;color:var(--jsp-ink-3) !important;}
.jsp-root .jsp-foot b{color:var(--jsp-ink-2) !important;font-weight:600 !important;}

.jsp-root .jsp-back{font-family:var(--jsp-display) !important;font-weight:600 !important;font-size:12.5px !important;background:none !important;border:none !important;color:var(--jsp-accent) !important;cursor:pointer !important;padding:0 0 8px !important;align-self:flex-start !important;box-shadow:none !important;text-transform:none !important;}
.jsp-root .jsp-back:hover{background:none !important;text-decoration:underline !important;}

/* ---------- mobile: one step at a time ---------- */
@media (max-width:1079px){
  .jsp-root .jsp-canvas-wrap{overflow:visible !important;}
  .jsp-root .jsp-canvas{width:auto !important;gap:0 !important;flex-direction:column !important;}
  .jsp-root .jsp-col{width:100% !important;}
  .jsp-root .jsp-col:not(.is-current){display:none !important;}
  .jsp-root .jsp-wires,.jsp-root .jsp-wirelabels{display:none !important;}
  .jsp-root .jsp-node.is-root{width:100% !important;}
}
@media (min-width:1080px){ .jsp-root .jsp-back{display:none !important;} }

@media (prefers-reduced-motion:no-preference){
  .jsp-root .jsp-col{animation:jsp-rise .32s cubic-bezier(.2,.7,.3,1) both !important;}
  .jsp-root .jsp-wires path{animation:jsp-draw .5s ease-out both !important;}
  @keyframes jsp-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @keyframes jsp-draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
}

/* ---------- shown only when the page's JavaScript never ran ---------- */
.jsp-root .jsp-fallback{
  border:1px dashed var(--jsp-line-2) !important;border-radius:var(--jsp-r) !important;
  padding:18px 20px !important;margin:4px 0 8px !important;background:var(--jsp-surface) !important;
  max-width:64ch !important;
}
.jsp-root .jsp-fallback b{font-family:var(--jsp-display) !important;font-weight:700 !important;color:var(--jsp-ink) !important;display:block !important;margin-bottom:4px !important;}
.jsp-root .jsp-fallback p{color:var(--jsp-ink-2) !important;font-size:13.5px !important;margin:0 0 6px !important;line-height:1.5 !important;}
.jsp-root .jsp-fallback ul{margin:0 0 0 16px !important;color:var(--jsp-ink-2) !important;font-size:13.5px !important;list-style:disc !important;}
.jsp-root .jsp-fallback li{margin:0 0 3px !important;list-style:disc !important;display:list-item !important;}

/* When the CTA row is absent, don't leave a gap at the foot of the panel. */
.jsp-root .jsp-detail .jsp-chips:last-child{margin-bottom:0 !important;}