/* =====================================================================
   MY PATH — mobile redesign (2026 handoff package)
   Scope: header, tab strip, chapter card, path nodes, connectors,
   sticky Companies/Daily Mix rail, Continue bar, chapter divider/teaser,
   Company Detective grid adapted to the new node/card grammar.
   Font note: spec calls for Nunito 600 on body copy; this codebase only
   self-hosts Nunito 400/700/800 (no 600 file exists on disk), so 700 is
   used as the closest already-available weight everywhere "Nunito 600"
   is specified. Flagged, not silently guessed.
   ===================================================================== */

/* ---------- Header (3 rows) ---------- */
.jp-header{background:var(--surface);border-bottom:3px solid var(--ink);
  padding-top:calc(10px + env(safe-area-inset-top));position:sticky;top:0;z-index:40}
.jp-row1{padding:0 12px 8px;display:flex;align-items:center;gap:7px}
.jp-avatar{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--ink);
  background:var(--avatar-tint);display:flex;align-items:center;justify-content:center;
  font-size:19px;flex:none;cursor:pointer}
.jp-wordmark{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;
  letter-spacing:-.2px;flex:1;min-width:0;white-space:nowrap}
.jp-wordmark b{color:var(--blue);font-weight:800}
.jp-counters{display:flex;gap:5px;flex:none}
.jp-pill{height:30px;padding:0 7px;border-radius:10px;display:flex;align-items:center;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:12.5px;color:var(--ink);
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;white-space:nowrap}
.jp-pill.iq{border:2.5px solid var(--blue);background:var(--blue-tint)}
.jp-pill.inbux{border:2.5px solid var(--orange);background:var(--orange-tint)}
.jp-pill .unit{font-size:9px;opacity:.7;margin-left:2px}
.jp-settingsbtn{width:30px;height:30px;border:2.5px solid var(--ink);border-radius:10px;
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-size:14px;flex:none;cursor:pointer;position:relative}
.jp-settingsmenu{position:absolute;top:36px;right:0;background:var(--surface);
  border:3px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 rgba(22,48,75,.18);
  min-width:150px;overflow:hidden;z-index:50}
.jp-settingsmenu button{display:block;width:100%;text-align:left;padding:12px 14px;
  border:none;background:var(--surface);font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:14.5px;color:var(--ink);cursor:pointer}
.jp-settingsmenu button+button{border-top:2px solid rgba(22,48,75,.12)}
.jp-settingsmenu button:active{background:var(--ground)}

.jp-row2{padding:0 12px 9px;display:flex;gap:6px}
.jp-chip{border:2.5px solid var(--ink);border-radius:11px;padding:5px 8px;
  display:flex;flex-direction:column;gap:1px;cursor:default;min-width:0}
.jp-chip.clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.jp-chip-k{font-family:'Nunito',sans-serif;font-weight:800;font-size:8.5px;
  letter-spacing:.07em;color:var(--ink-soft);text-transform:uppercase;white-space:nowrap}
.jp-chip-v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:baseline;gap:4px}
.jp-chip-v .cur{font-family:'Nunito',sans-serif;font-weight:800;font-size:9px;color:var(--blue)}
.jp-chip.portfolio{flex:1;background:var(--blue-tint);min-width:0}
.jp-chip.cash{flex:1;background:var(--teal-tint)}
.jp-chip.ret{width:74px;background:var(--surface);flex:none}
.jp-chip.ret .jp-chip-v{color:var(--teal-text)}
.jp-chip.ret .jp-chip-v.neg{color:var(--red)}

.jp-curmenu{position:absolute;top:64px;background:var(--surface);border:3px solid var(--ink);
  border-radius:14px;box-shadow:0 5px 0 rgba(22,48,75,.18);overflow:hidden;z-index:50;min-width:110px}
.jp-curmenu button{display:block;width:100%;padding:11px 16px;border:none;background:var(--surface);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.jp-curmenu button+button{border-top:2px solid rgba(22,48,75,.12)}
.jp-curmenu button.on{background:var(--blue-tint);color:var(--blue)}

.jp-row3{padding:0 12px 10px;position:relative}
.jp-tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-right:26px}
.jp-tabs::-webkit-scrollbar{display:none}
.jp-tabfade{position:absolute;top:0;right:0;bottom:10px;width:26px;
  background:linear-gradient(to right, rgba(255,255,255,0), #FFFFFF 70%);pointer-events:none}
.jp-tab{flex:none;height:38px;padding:0 13px;border:2.5px solid var(--ink);border-radius:12px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;display:flex;align-items:center;
  gap:5px;background:var(--surface);color:var(--ink);box-shadow:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;white-space:nowrap}
.jp-tab.on{background:var(--ink);color:var(--surface);box-shadow:0 3px 0 rgba(22,48,75,.25)}
.jp-tabspacer{flex:none;width:8px}

/* ---------- Chapter card ---------- */
.jp-content{padding:14px 16px 18px;background:var(--ground)}
.jp-chaptercard{border:3px solid var(--ink);border-radius:18px;background:var(--surface);
  box-shadow:0 5px 0 rgba(22,48,75,.15);padding:14px 15px 15px;margin-bottom:22px}
.jp-chaptercard .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;
  letter-spacing:.1em;color:var(--teal-text);text-transform:uppercase;margin-bottom:3px}
.jp-chaptercard h3{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:23px;
  line-height:1.15;letter-spacing:-.3px;color:var(--ink)}
.jp-chaptercard .d{font-family:'Nunito',sans-serif;font-weight:700;font-size:13.5px;
  color:var(--ink-soft);margin-top:5px}
.jp-progressrow{margin-top:12px;display:flex;align-items:center;gap:9px}
.jp-track{flex:1;height:12px;border:2.5px solid var(--ink);border-radius:8px;
  background:var(--track);overflow:hidden}
.jp-track > i{display:block;height:100%;background:var(--teal)}
.jp-progresscount{font-family:'Nunito',sans-serif;font-weight:800;font-size:12.5px;color:var(--ink);
  white-space:nowrap}

/* ---------- Path column & nodes ---------- */
.jp-nodecol{display:flex;flex-direction:column;align-items:center;position:relative}
.jp-noderow{display:flex;flex-direction:column;align-items:center;position:relative}
.jp-node-l{transform:translateX(-26px)} .jp-node-r{transform:translateX(26px)}
.jp-node{border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);
  cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;flex:none;
  transition:transform .08s}
.jp-node:active{transform:translateY(3px)}
.jp-node.done{width:72px;height:72px;background:var(--teal);box-shadow:0 5px 0 rgba(22,48,75,.22)}
.jp-node.done .g{font-size:30px;font-weight:800;color:var(--surface)}
.jp-node.progress{width:72px;height:72px;background:var(--surface);box-shadow:0 5px 0 rgba(22,48,75,.18)}
.jp-node.progress .g{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:19px;color:var(--ink)}
.jp-node.open{width:72px;height:72px;background:var(--surface);box-shadow:0 5px 0 rgba(22,48,75,.18)}
.jp-node.open .g{font-size:28px}
.jp-node.locked{width:72px;height:72px;background:var(--locked-fill);border-color:var(--locked-border);
  box-shadow:none;cursor:pointer}
.jp-node.locked .g{font-size:26px;opacity:.85}
.jp-activewrap{width:92px;height:92px;display:grid;place-items:center;position:relative}
.jp-halo{position:absolute;inset:0;border-radius:50%;background:var(--teal);
  animation:jpHalo 2.2s ease-in-out infinite}
@keyframes jpHalo{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.14);opacity:.18}}
.jp-node.active{width:78px;height:78px;background:var(--teal);box-shadow:0 5px 0 rgba(22,48,75,.28);
  position:relative;animation:jpBob 2.6s ease-in-out infinite}
@keyframes jpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.jp-node.active .g{font-size:34px}
@media (prefers-reduced-motion: reduce){
  .jp-halo,.jp-node.active{animation:none}
}

.jp-label{text-align:center;margin-top:8px;max-width:152px}
.jp-label.active{margin-top:10px;max-width:150px}
.jp-chip-mech{display:inline-flex;height:22px;padding:0 9px;border:2.5px solid var(--ink);
  border-radius:8px;background:var(--surface);font-family:'Nunito',sans-serif;font-weight:800;
  font-size:10px;letter-spacing:.06em;color:var(--ink);align-items:center;white-space:nowrap}
.jp-label.active .jp-chip-mech{height:24px;padding:0 10px;font-size:10.5px;
  box-shadow:0 3px 0 rgba(22,48,75,.18)}
.jp-label .title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14.5px;
  line-height:1.2;color:var(--ink);margin-top:6px}
.jp-label.active .title{font-weight:800;font-size:17px;margin-top:7px}
.jp-label .meta{font-family:'Nunito',sans-serif;font-weight:700;font-size:12px;
  color:var(--ink-soft);margin-top:2px}
.jp-label .meta.done{font-size:11px;color:var(--teal-text)}
.jp-label.locked .title{color:var(--locked-ink)}

.jp-connector{position:relative;height:46px;width:100%}
.jp-connector i{position:absolute;left:50%;top:50%;width:6px;height:69px;
  margin:-34.5px 0 0 -3px;background-size:6px 14px;background-repeat:repeat-y;display:block}
.jp-connector i.rtl{transform:rotate(-48deg)}
.jp-connector i.ltr{transform:rotate(48deg)}
.jp-connector i.done{background-image:radial-gradient(circle, var(--teal) 2.6px, transparent 2.7px)}
.jp-connector i.future{background-image:radial-gradient(circle, var(--dots-future) 2.6px, transparent 2.7px)}

/* ---------- Chapter divider + locked teaser ---------- */
.jp-divider{margin:26px 0 22px;display:flex;align-items:center;gap:10px}
.jp-divider i{flex:1;height:3px;background:var(--rule)}
.jp-divider span{font-family:'Nunito',sans-serif;font-weight:800;font-size:10.5px;
  letter-spacing:.12em;color:#8A8781;white-space:nowrap}
.jp-teaser{border:3px dashed var(--locked-border);border-radius:18px;background:var(--locked-surface);
  padding:13px 15px;display:flex;align-items:center;gap:12px}
.jp-teaser .icon{width:46px;height:46px;border-radius:50%;background:var(--locked-fill);
  border:3px solid var(--locked-border);display:flex;align-items:center;justify-content:center;
  font-size:20px;flex:none}
.jp-teaser .txt h4{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;color:var(--locked-title)}
.jp-teaser .txt p{font-family:'Nunito',sans-serif;font-weight:700;font-size:12px;color:var(--locked-ink);margin-top:2px}

/* ---------- Sticky shortcut rail ---------- */
.jp-rail{position:sticky;z-index:30;align-self:stretch;height:0;
  display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.jp-rail-card{width:56px;height:52px;border:2.5px solid var(--ink);border-radius:13px;
  background:var(--surface);box-shadow:0 4px 0 rgba(22,48,75,.2);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;
  pointer-events:auto;-webkit-tap-highlight-color:transparent}
.jp-rail-card:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(22,48,75,.2)}
.jp-rail-card .ic{font-size:17px;line-height:1}
.jp-rail-card .cap{font-family:'Nunito',sans-serif;font-weight:800;font-size:8.5px;color:var(--ink)}
.jp-rail-card.locked{opacity:.85}

/* ---------- Continue bar ---------- */
.jp-continuewrap{position:sticky;bottom:0;z-index:40;padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, #FDF3E7 55%, rgba(253,243,231,0))}
.jp-continue{min-height:56px;border:3px solid var(--ink);border-radius:16px;background:var(--teal);
  box-shadow:0 5px 0 #16304B;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.jp-continue:active{transform:translateY(3px);box-shadow:0 2px 0 #16304B}
.jp-continue .txt{min-width:0}
.jp-continue .k{font-family:'Nunito',sans-serif;font-weight:800;font-size:9.5px;
  letter-spacing:.1em;color:rgba(255,255,255,.85)}
.jp-continue .l{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;color:var(--surface);
  line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-continue .arrow{font-size:20px;color:var(--surface);flex:none}

/* ---------- Company Detective grid, adapted to the new node/card language ---------- */
.jp-capgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.jp-captile{border:2.5px solid var(--ink);border-radius:13px;background:var(--surface);
  box-shadow:0 4px 0 rgba(22,48,75,.18);padding:8px 6px;display:flex;flex-direction:column;
  align-items:center;gap:3px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jp-captile:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(22,48,75,.18)}
.jp-captile .ic{font-size:22px;line-height:1}
.jp-captile .nm{font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;color:var(--ink);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.jp-capmore{margin-top:10px;min-height:44px;width:100%;border:2.5px solid var(--ink);
  border-radius:13px;background:var(--surface);font-family:'Baloo 2',sans-serif;font-weight:800;
  font-size:14px;color:var(--ink);cursor:pointer}

/* ---------- Locked-tap toast ---------- */
.jp-toast{position:fixed;left:16px;right:16px;bottom:90px;z-index:60;background:var(--ink);
  color:var(--surface);border-radius:14px;padding:12px 16px;font-family:'Nunito',sans-serif;
  font-weight:700;font-size:13.5px;text-align:center;box-shadow:0 5px 0 rgba(0,0,0,.2);
  animation:jpToastIn .18s ease-out}
@keyframes jpToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media (min-width:431px){
  .jp-content{max-width:430px;margin:0 auto}
}

/* ---------- Desktop adaptation (Option B): same design, wider column, bigger
   nodes — no 2nd path column, since the path is inherently a single sequence.
   Additive only; nothing above this block is touched or overridden below
   ~900px, so phones/tablets render exactly as before. ---------- */
@media (min-width:900px){
  .jp-content{max-width:640px}
  .jp-tabs{max-width:640px;margin:0 auto}
  .jp-row2, .jp-row1{max-width:640px;margin-left:auto;margin-right:auto}
  .jp-node.done, .jp-node.progress, .jp-node.locked, .jp-node.open{width:84px;height:84px}
  .jp-node.done .g{font-size:34px}
  .jp-activewrap{width:104px;height:104px}
  .jp-node.active{width:88px;height:88px}
  .jp-node.active .g{font-size:38px}
  .jp-node-l{transform:translateX(-46px)} .jp-node-r{transform:translateX(46px)}
  .jp-label, .jp-label.active{max-width:220px}
  .jp-chaptercard h3{font-size:26px}
}

/* ---------- Bottom navigation bar (replaces the top horizontal strip) ----------
   6 destinations: Path, School, Companies, Portfolio, Games, Leaderboard.
   Exchange stays reachable via the header Inbux pill (already wired); Prices
   moves into Settings — both real, existing destinations, just relocated, not
   removed. Reuses the exact same button ids/onclicks as the old top strip, so
   showTab()'s existing highlight logic needs zero changes. */
.jp-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);
  border-top:3px solid var(--ink);display:flex;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.jp-bnav-btn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;min-height:52px;border:none;background:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;padding:2px}
.jp-bnav-glyph{width:46px;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:19px;border-radius:10px}
.jp-bnav-btn.on .jp-bnav-glyph{background:var(--ink)}
.jp-bnav-label{font-family:'Nunito',sans-serif;font-weight:800;font-size:10px;color:var(--ink-soft)}
.jp-bnav-btn.on .jp-bnav-label{color:var(--ink)}
body.has-bottomnav .jp-header{padding-bottom:0}
body.has-bottomnav #app{padding-bottom:64px}
@media (min-width:900px){
  .jp-bottomnav{max-width:640px;left:50%;transform:translateX(-50%);
    border-left:3px solid var(--ink);border-right:3px solid var(--ink);
    border-radius:18px 18px 0 0}
}