/* ============================================================
   CAREER PATH FINDER

   Written in the site's own language rather than a separate one.
   Earlier versions looked bolted on because they broke four of the
   theme's rules at once:

     - the theme puts NO shadow on cards; this had shadows everywhere
     - the theme hovers with a paper tint; this lifted and dropped shadow
     - the notebook grid is global on body::before; this painted a
       SECOND grid inside every panel, which is what made it read busy
     - the theme uses one radius (16px) and a plain paper background

   So: flat white surfaces, hairline --line borders, 16px radius, tint
   on hover, the global grid left to show through. Type follows the
   theme — Archivo headings, Inter labels, mono only for numbers.

   Everything is scoped under .pf. The prototype styled bare header,
   footer, h1 and button, which would restyle the real site chrome.
   ============================================================ */

.pf{
  /* wider than the 1240px content column: this is a tool, and the tree
     needs the room. --max-head is the theme's own wide measure, used by
     the site header, so it is not an arbitrary number. */
  --pf-max:var(--max-head, 1400px);

  --pf-rail:28px;
  --pf-row:40px;
  --nw:192px;
  --nh:70px;

  --pf-hi:#0e8a5f;      /* the theme's --verify green */
  --pf-mid:#b45309;
  --pf-low:#be2c2c;

  color:var(--ink);
}
.pf *{box-sizing:border-box}
.pf-shell{max-width:var(--pf-max);margin:0 auto;padding:0 var(--gut)}

/* ---------- page head, in the theme's section-head idiom ---------- */
.pf-crumb{
  display:flex;align-items:center;gap:8px;padding:20px 0 0;
  font-family:var(--f-data);font-size:11px;letter-spacing:.04em;color:var(--muted);
}
.pf-crumb a{color:var(--muted)}
.pf-crumb a:hover{color:var(--blue)}
.pf-crumb span[aria-current]{color:var(--ink);font-weight:600}

.pf-intro{padding:26px 0 22px}
.pf-eyebrow{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-family:var(--f-data);font-size:11px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.pf-eyebrow i{
  width:6px;height:6px;border-radius:50%;background:var(--verify);
  box-shadow:0 0 0 3px rgba(14,138,95,.16);
}
.pf-intro h1{
  margin:0;font-family:var(--f-display);font-weight:800;letter-spacing:-.032em;
  line-height:1.06;font-size:clamp(26px,3vw,37px);text-wrap:balance;
}
.pf-intro h1 em{font-style:normal;color:var(--blue)}
.pf-intro p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:40rem}

/* counts as a ledger strip, the way the theme presents figures */
.pf-stats{
  display:flex;gap:0;margin:22px 0 0;padding:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pf-stats > div{padding:14px 26px 14px 0;border-right:1px solid var(--line-2)}
.pf-stats > div + div{padding-left:26px}
.pf-stats > div:last-child{border-right:0}
.pf-stats dt{
  margin:0;font-family:var(--f-data);font-size:10.5px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.pf-stats dd{
  margin:5px 0 0;font-family:var(--f-display);font-size:24px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}

/* ---------- toolbar ---------- */
/* Pinned under the site header rather than behind it. site.js keeps
   --icg-head-h in step with the header as it condenses, so the toolbar
   rides its underside instead of jumping when the fold finishes. */
.pf-bar{
  position:sticky;top:var(--icg-head-h,0px);z-index:30;
  display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  padding:14px 0;margin-bottom:18px;
  background:rgba(251,250,247,.9);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}

.pf-search{position:relative;flex:1 1 260px;max-width:340px}
.pf-search svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.6;
  stroke-linecap:round;pointer-events:none;
}
.pf #q{
  width:100%;font-family:var(--f-body);font-size:14px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px 10px 36px;transition:border-color .18s ease;
}
.pf #q::placeholder{color:var(--faint)}
.pf #q:focus{outline:none;border-color:rgba(27,63,196,.45)}

.pf button.ctl{
  font-family:var(--f-data);font-size:11.5px;font-weight:500;letter-spacing:.04em;
  color:var(--ink-2);cursor:pointer;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.pf button.ctl:hover{background:var(--paper);border-color:rgba(27,63,196,.35);color:var(--blue)}
.pf button.ctl[disabled]{opacity:.4;cursor:default}

.pf .group{
  display:flex;align-items:center;border:1px solid var(--line);
  border-radius:10px;background:var(--card);overflow:hidden;
}
.pf .group button{border:0;border-radius:0;background:transparent;padding:10px 13px}
.pf .group button+button{border-left:1px solid var(--line-2)}
.pf .group .val{
  font-family:var(--f-data);font-size:11.5px;color:var(--ink);
  padding:0 12px;min-width:66px;text-align:center;font-variant-numeric:tabular-nums;
}
.pf .group button.on{background:var(--ink);color:#fff}
.pf .group button.on:hover{background:var(--ink);color:#fff}

.pf .legend{
  display:flex;gap:14px;align-items:center;margin-left:auto;
  font-family:var(--f-data);font-size:11px;color:var(--muted);
}
.pf .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px}
.pf .dot--hi{background:var(--pf-hi)}
.pf .dot--mid{background:var(--pf-mid)}
.pf .dot--low{background:var(--pf-low)}

.pf-status{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  font-family:var(--f-data);font-size:11px;color:var(--muted);
}

/* First-run cue. Rows are quiet by design, which makes it easy to miss that they
   open — so say so once, then get out of the way. Removed from the DOM by the
   script the first time anything is expanded. */
.pf-cue{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 11px 4px 9px;border-radius:20px;
  background:var(--blue-soft);color:var(--blue);
  font-family:var(--f-data);font-size:11px;
  transition:opacity .3s ease,max-width .3s ease,padding .3s ease;
  max-width:20rem;white-space:nowrap;overflow:hidden;
}
.pf-cue b{font-weight:600}
.pf-cue svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;animation:pfNudgeIcon 1.9s ease-in-out 3}
.pf:not(.cue) .pf-cue{opacity:0;max-width:0;padding-left:0;padding-right:0}
.pf #crumbs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pf #crumbs button{
  font-family:var(--f-data);font-size:11px;color:var(--ink-2);
  background:none;border:0;padding:3px 6px;cursor:pointer;border-radius:6px;
}
.pf #crumbs button:hover{background:var(--blue-soft);color:var(--blue)}
.pf #crumbs .sep{color:var(--line)}
.pf #crumbs .now{color:var(--ink);font-weight:600}

/* ---------- surfaces ----------
   Flat white on the global notebook grid, one hairline border, one
   radius. No shadow — the theme does not use them and adding them here
   is what made this page look like a different product. */
.pf #viewport,
.pf #listwrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
}

.pf #viewport{
  position:relative;width:100%;height:70vh;min-height:420px;
  overflow:hidden;cursor:grab;touch-action:none;
}
.pf #viewport.dragging{cursor:grabbing}
.pf.list-mode #viewport{display:none}
.pf #stage{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.pf #links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.pf #links path{fill:none;stroke:var(--line);stroke-width:1.4}
.pf #links path.lit{stroke:var(--blue);stroke-width:2}

/* ---------- canvas node ---------- */
.pf .tnode{
  position:absolute;width:var(--nw);height:var(--nh);
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:11px 12px 12px 15px;overflow:visible;text-align:left;
  transition:background .18s ease,border-color .18s ease;
}
.pf .tnode.parent{cursor:pointer}
.pf .tnode.parent:hover{background:var(--paper);border-color:rgba(27,63,196,.38)}
.pf .tnode.root{border-color:var(--ink)}
.pf .tnode .bar{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:13px 0 0 13px;background:var(--accent)}
.pf .tlabel{
  font-family:var(--f-body);font-size:13px;font-weight:600;line-height:1.32;
  letter-spacing:-.012em;color:var(--ink);padding-right:30px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pf .tmeta{
  margin-top:6px;font-family:var(--f-body);font-size:11px;line-height:1.35;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pf .tscore{
  position:absolute;top:10px;right:12px;
  font-family:var(--f-data);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
}
.pf .tchip{
  position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  font-family:var(--f-data);font-size:10px;color:var(--muted);
  padding:2px 9px;white-space:nowrap;
}
.pf .tnode.parent:hover .tchip{border-color:rgba(27,63,196,.38);color:var(--blue)}
.pf .zoomin{
  position:absolute;right:8px;bottom:7px;width:20px;height:20px;line-height:18px;
  text-align:center;font-size:10px;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:7px;cursor:pointer;opacity:0;
  transition:opacity .18s ease;font-family:var(--f-data);padding:0;
}
.pf .tnode:hover .zoomin,.pf .zoomin:focus-visible{opacity:1}
.pf .zoomin:hover{color:var(--blue);border-color:rgba(27,63,196,.4)}

.pf .hint,.pf .zoombar{position:absolute;bottom:16px;z-index:5}
.pf .hint{
  left:18px;pointer-events:none;
  font-family:var(--f-data);font-size:10.5px;color:var(--muted);
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:9px;padding:7px 11px;
}
.pf .zoombar{right:18px;display:flex;gap:6px}

/* ---------- list ---------- */
.pf #listwrap{display:none;padding:8px 24px 16px}
.pf.list-mode #listwrap{display:block}
.pf .tree{max-width:1160px}

.pf .row{display:flex;align-items:stretch;min-height:var(--pf-row)}
.pf .rail{position:relative;flex:0 0 var(--pf-rail);width:var(--pf-rail)}
.pf .rail.line::before{
  content:"";position:absolute;left:calc(var(--pf-rail)*.462);top:0;bottom:0;
  border-left:1px solid var(--line);
}
.pf .rail.elbow > svg{position:absolute;top:0;left:0;width:var(--pf-rail);height:var(--pf-row);overflow:visible}
.pf .rail.elbow path{fill:none;stroke:var(--line);stroke-width:1}

/* Rows are separated by a hairline rather than being floating cards.
   449 bordered boxes stacked on a grid is exactly what read as noisy. */
.pf .node{
  display:flex;align-items:center;gap:11px;position:relative;flex:1 1 auto;min-width:0;
  padding:9px 14px 9px 0;background:transparent;
  border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  cursor:default;text-align:left;transition:background .18s ease;
}
.pf .node.parent{cursor:pointer}
.pf .node.parent:hover{background:var(--paper)}
.pf .node.on{background:var(--blue-soft)}
.pf .node:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:4px}

/* The stream colour is the one piece of colour on the page, so let it carry
   weight: full row height, and heavier the higher up the tree it sits. */
.pf .node .bar{position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:3px;background:var(--accent)}
.pf .node.d0 .bar{width:4px;top:0;bottom:0}
.pf .node.d1 .bar{width:4px}

.pf .caret{
  flex:0 0 auto;width:13px;margin-left:15px;color:var(--faint);
  font-size:8.5px;line-height:1;
  transition:transform .2s cubic-bezier(.34,1.4,.64,1),color .18s ease;
}
.pf .node.open .caret{transform:rotate(90deg)}
.pf .caret.blank{color:var(--line)}

/* Standing affordance: the caret leans toward the click on hover. */
.pf .node.parent:hover .caret{color:var(--blue);transform:translateX(2px)}
.pf .node.parent.open:hover .caret{transform:rotate(90deg) translateX(2px)}

/* First-run affordance: collapsed rows nudge three times, then stop for good. */
.pf.cue .node.parent:not(.open) .caret{animation:pfNudge 1.9s ease-in-out 3}
@keyframes pfNudge{
  0%,62%,100%{transform:translateX(0);color:var(--faint)}
  74%{transform:translateX(3px);color:var(--blue)}
  86%{transform:translateX(0);color:var(--blue)}
}
@keyframes pfNudgeIcon{
  0%,62%,100%{transform:translateX(0)}
  74%{transform:translateX(3px)}
  86%{transform:translateX(0)}
}

.pf .label{
  flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--f-body);font-size:14.5px;font-weight:600;
  letter-spacing:-.012em;color:var(--ink);
}
.pf .node.d0 .label{font-family:var(--f-display);font-size:17px;font-weight:800;letter-spacing:-.026em}
.pf .node.d1 .label{font-family:var(--f-display);font-size:15px;font-weight:700;letter-spacing:-.02em}
.pf .node.d2 .label{font-weight:600}
.pf .node.d3 .label{font-weight:500;color:var(--ink-2)}

.pf .meta{
  flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--f-body);font-size:13px;color:var(--muted);
}
.pf .meta::before{content:"·\00a0";color:var(--line)}
/* Most leaves have no subtitle. Without this they render a stray middot. */
.pf .meta:empty::before{content:none}

.pf .more{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-data);font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:20px;padding:3px 10px;background:var(--card);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.pf .more i{font-style:normal;color:var(--faint);transition:color .18s ease}
.pf .node.parent:hover .more{background:var(--blue-soft);border-color:rgba(27,63,196,.28);color:var(--blue)}
.pf .node.parent:hover .more i{color:var(--blue)}
.pf .score{
  flex:0 0 auto;font-family:var(--f-data);font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;min-width:26px;text-align:right;
}
.pf .score.hi,.pf .tscore.hi{color:var(--pf-hi)}
.pf .score.mid,.pf .tscore.mid{color:var(--pf-mid)}
.pf .score.low,.pf .tscore.low{color:var(--pf-low)}

.pf mark{background:#fdf0bf;color:var(--ink);border-radius:3px;padding:0 2px}
.pf .empty{color:var(--muted);padding:34px 8px;font-size:15px;font-family:var(--f-body)}

/* ---------- links ---------- */
.pf .label a,.pf .tlabel a{
  color:inherit;border-bottom:1px solid rgba(27,63,196,.22);
  transition:color .18s ease,border-color .18s ease;
}
.pf .label a:hover,.pf .tlabel a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.pf .node.nolink .label,.pf .tnode.nolink .tlabel{color:var(--ink-2);font-weight:500}
.pf .node.nolink.d0 .label,.pf .node.nolink.d1 .label{color:var(--ink)}

/* ---------- route readout ---------- */
.pf-foot{
  position:sticky;bottom:0;z-index:30;margin-top:18px;
  background:var(--ink);color:#eef1f7;border-radius:16px;
  padding:13px 20px;display:flex;gap:14px;align-items:center;
  font-family:var(--f-data);font-size:11.5px;
}
.pf-foot .tag{
  flex:0 0 auto;color:#9aa3b8;letter-spacing:.11em;text-transform:uppercase;font-size:10px;
}
.pf #pathout{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.pf #pathout i{color:#7f8aa4;font-style:normal;padding:0 6px}
.pf #pathout b{font-weight:500;color:#fff}
.pf #pathscore{flex:0 0 auto;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}

/* ---------- narrow ---------- */
@media (max-width:860px){
  .pf-stats{flex-wrap:wrap}
  .pf-stats > div{flex:1 1 33%;padding-right:16px}
  .pf-stats > div + div{padding-left:16px}
  .pf-stats dd{font-size:21px}
}
@media (max-width:820px){
  /* the header is not pinned this narrow, so there is nothing to clear */
  .pf-bar{top:0}
}
@media (max-width:640px){
  .pf{--pf-rail:16px}
  .pf .legend,.pf .meta,.pf .hint{display:none}
  .pf-search{max-width:none;flex:1 1 100%}
  .pf .label{font-size:14px}
  .pf .node.d0 .label{font-size:16px}
  .pf #listwrap{padding:6px 12px 14px}
  .pf-intro{padding:20px 0 18px}
}

@media (prefers-reduced-motion:reduce){
  .pf *{transition:none!important;animation:none!important}
}