/* shared/trader-journey.css — A Girl & Her Futures™
   My Trader Journey (/journey) and its Dayli Desk card. Drawn by shared/trader-journey.js. */

.tj-page{display:grid;gap:18px}
.tj-hero{display:grid;grid-template-columns:1fr 200px;gap:10px;align-items:center;overflow:hidden;position:relative}
.tj-hero-ari{width:200px;height:250px;margin-bottom:-60px}
.tj-say{display:flex;gap:10px;align-items:center;margin-top:14px}
.tj-say .v3-bubble{max-width:420px}
.tj-face{display:none;width:58px;height:58px;border-radius:50%;overflow:hidden;background:var(--bg-fde8ed,#FDE8ED);flex-shrink:0}
.tj-gem{display:inline!important;letter-spacing:0!important;text-transform:none!important;font-size:14px!important;color:var(--fg-2f8f84,#2F8F84)!important}
.tj-ring{display:flex;gap:14px;align-items:center;margin-top:16px}
.tj-ring .r{width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--bg-f4829a,#F4829A) calc(var(--p)*1%),var(--bg-f3e7e1,#F3E7E1) 0);display:grid;place-items:center;flex-shrink:0}
.tj-ring .r b{width:50px;height:50px;border-radius:50%;background:var(--bg-ffffff,#FFFFFF);display:grid;place-items:center;font:900 16px 'Playfair Display',serif;color:var(--dark)}
.tj-ring span{font-size:14px;color:var(--fg-5b463e,#5B463E)}.tj-ring span b{color:var(--dark)}

/* The road */
.tj-map{position:relative;margin-top:10px}
.tj-road{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tj-road .tj-ahead{stroke:var(--fg-eadfd9,#EADFD9)}
.tj-stop{position:absolute;display:flex;align-items:center;gap:12px;transform:translate(-42px,-50%);text-decoration:none;color:inherit}
.tj-stop.big{transform:translate(-55px,-50%)}
.tj-stop.l{flex-direction:row-reverse;text-align:right;transform:translate(calc(-100% + 42px),-50%)}
.tj-stop.big.l{transform:translate(calc(-100% + 55px),-50%)}
.tj-stop.c{flex-direction:column;gap:6px;text-align:center;width:104px;transform:translate(-50%,-30px)}
.tj-stop.c.big{transform:translate(-50%,-37px)}
.tj-lbl{width:170px}
.tj-stop.c .tj-lbl{width:auto}
.tj-lbl b{display:block;font-size:13.5px;color:var(--dark);line-height:1.25}
.tj-lbl span{font-size:12px;color:var(--fg-8a7068,#8A7068)}
.tj-stop.c .tj-lbl b{font-size:12px}
.tj-dot{flex-shrink:0;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:24px;background:var(--bg-ffffff,#FFFFFF);border:3px solid var(--c);box-shadow:0 10px 22px rgba(44,24,16,.12);position:relative}
.tj-stop.big .tj-dot{width:84px;height:84px;font:900 15px 'Playfair Display',serif;color:var(--fg-ffffff,#FFFFFF);background:var(--c);border:5px solid var(--ln-ffffff,#FFFFFF);box-shadow:0 0 0 3px var(--c),0 14px 30px rgba(44,24,16,.16)}
.tj-stop.big .tj-dot small{display:block;font:700 9px 'DM Sans',sans-serif;letter-spacing:.14em;opacity:.9}
.tj-stop.c .tj-dot{width:48px;height:48px;font-size:20px}
.tj-stop.c.big .tj-dot{width:62px;height:62px;font-size:13px}
.tj-stop.c.big .tj-dot small{font-size:8px}
.tj-stop.done .tj-dot::after{content:'✓';position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:var(--bg-2f8f84,#2F8F84);color:var(--fg-ffffff,#FFFFFF);font:900 12px 'DM Sans',sans-serif;display:grid;place-items:center;border:2px solid var(--ln-ffffff,#FFFFFF)}
.tj-stop.locked .tj-dot{background:var(--bg-f3eeeb,#F3EEEB);border-color:var(--ln-e2d8d2,#E2D8D2);color:var(--fg-a8968d,#A8968D);box-shadow:none;filter:grayscale(1)}
.tj-stop.big.locked .tj-dot{background:var(--bg-ede6e2,#EDE6E2);box-shadow:0 0 0 3px var(--ln-e2d8d2,#E2D8D2);color:var(--fg-a8968d,#A8968D)}
.tj-stop.locked .tj-lbl b{color:var(--fg-9c8a82,#9C8A82)}
.tj-stop.now .tj-dot{animation:tjPulse 2s infinite}
@keyframes tjPulse{0%,100%{box-shadow:0 0 0 3px var(--c),0 0 0 10px rgba(126,206,196,.25)}50%{box-shadow:0 0 0 3px var(--c),0 0 0 18px rgba(126,206,196,.08)}}
@media (prefers-reduced-motion:reduce){.tj-stop.now .tj-dot{animation:none}}
.tj-tag{position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:var(--bg-2c1810,#2C1810);color:var(--fg-ffffff,#FFFFFF);font:700 11px 'DM Sans',sans-serif;padding:5px 10px;border-radius:999px;white-space:nowrap}
.tj-ari{position:absolute;left:calc(100% + 2px);top:-30px;width:74px;height:92px}
.tj-stop.r .tj-ari{left:auto;right:calc(100% + 2px)}
.tj-stop.c .tj-ari{left:calc(50% + 30px);right:auto;top:-52px;width:62px;height:80px}
/* Skipped earlier: still open, dashed ring in its colour */
.tj-stop.open .tj-dot{border-style:dashed;box-shadow:none}
.tj-stop.big.open .tj-dot{background:var(--bg-ffffff,#FFFFFF);color:var(--c);box-shadow:0 0 0 3px var(--bg-ffffff,#FFFFFF)}
a.tj-stop:hover .tj-lbl b{color:var(--fg-c2476a,#C2476A)}

/* You are here */
.tj-detail{border-left:4px solid var(--c)}
.tj-h3{font:900 24px 'Playfair Display',serif;color:var(--dark);margin:10px 0 6px}
.tj-h3 em{color:var(--c,#7ECEC4)}
.tj-p{margin:0;color:var(--fg-5b463e,#5B463E);font-size:14.5px;line-height:1.55}
.tj-bar{height:10px;border-radius:99px;background:var(--bg-f3eeeb,#F3EEEB);overflow:hidden;margin:12px 0 6px}
.tj-bar i{display:block;height:100%;background:var(--c,#7ECEC4)}

/* Badges */
.tj-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tj-filters button{border:1.5px solid var(--ln-f0e2da,#F0E2DA);border-radius:999px;padding:7px 14px;font:700 13px 'DM Sans',sans-serif;background:var(--bg-ffffff,#FFFFFF);color:var(--dark);cursor:pointer}
.tj-filters button[aria-selected="true"]{background:var(--bg-fde8ed,#FDE8ED);border-color:var(--ln-f4829a,#F4829A);color:var(--fg-c2476a,#C2476A)}
.tj-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;margin-top:14px}
.tj-b{background:var(--bg-ffffff,#FFFFFF);border:1px solid var(--ln-f0e2da,#F0E2DA);border-radius:18px;padding:14px 10px;text-align:center}
.tj-b i{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 8px;border-radius:50%;font-style:normal;font-size:26px;background:var(--bg-fde8ed,#FDE8ED)}
.tj-b:nth-child(4n+2) i{background:var(--bg-e3f6f3,#E3F6F3)}.tj-b:nth-child(4n+3) i{background:var(--bg-fef1e1,#FEF1E1)}.tj-b:nth-child(4n+4) i{background:var(--bg-eeedfb,#EEEDFB)}
.tj-b b{display:block;font-size:12.5px;color:var(--dark);line-height:1.25}
.tj-b span{font-size:11px;color:var(--fg-8a7068,#8A7068)}
.tj-b.off{background:var(--bg-faf6f4,#FAF6F4)}
.tj-b.off i{filter:grayscale(1);opacity:.45;background:var(--bg-efe8e4,#EFE8E4)!important}
.tj-b.off b{color:var(--fg-a8968d,#A8968D)}

/* The Dayli Desk card */
.tjd{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;background:var(--bg-ffffff,#FFFFFF);border-radius:28px;padding:22px 24px;border:1px solid var(--border);align-items:center}
.tjd-road{position:relative;height:190px}
.tjd-kick{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2f8f84,#2F8F84)}
.tjd .tj-h3{font-size:22px;margin-top:4px}
.tjd-small{display:block;font-size:12px;color:var(--fg-8a7068,#8A7068)}
.tjd-badges{display:flex;gap:8px;align-items:center;margin:14px 0 16px;flex-wrap:wrap}
.tjd-badges i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:20px;background:var(--bg-fde8ed,#FDE8ED)}
.tjd-badges i:nth-child(2){background:var(--bg-e3f6f3,#E3F6F3)}.tjd-badges i:nth-child(3){background:var(--bg-fef1e1,#FEF1E1)}.tjd-badges i:nth-child(4){background:var(--bg-eeedfb,#EEEDFB)}
.tjd-badges span{font-size:12.5px;color:var(--fg-5b463e,#5B463E);margin-left:4px}
.tjd-go{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:700px){
  .tjd{grid-template-columns:1fr;padding:18px}
  .tjd-road{height:180px}
  .tjd-go .tj-btn{flex:1 1 100%}
}
@media (max-width:600px){
  .tj-hero{grid-template-columns:1fr}
  .tj-hero-ari{display:none}
  .tj-face{display:block}
  .tj-stop.big .tj-dot{width:72px;height:72px}
  .tj-ari{display:none}
  .tj-lbl{width:auto;max-width:calc(100vw - 190px)}
  .tj-stop.c .tj-ari{display:none}
}

/* Buttons the Desk card brings with it (the Desk doesn't load the Academy's) */
.tj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font:700 14px 'DM Sans',sans-serif;color:var(--fg-ffffff,#FFFFFF);background:linear-gradient(90deg,var(--bg-f4829a,#F4829A),var(--bg-f5a857,#F5A857));box-shadow:0 10px 24px rgb(var(--pink-rgb,244 130 154) / .3);text-decoration:none}
.tj-btn.ghost{background:var(--bg-ffffff,#FFFFFF);color:var(--dark);border:1.5px solid var(--border);box-shadow:none}
@media (max-width:700px){.tjd-go .tj-btn{flex:1 1 100%}}