/* Links from the sims into Learn Day Trading: the rail's Lessons pane (js/learn-panel.js)
   and the coach review's "Practice this" link (js/trade-coach.js lessonLink). */

/* Lessons pane: the Learn page's gold + mono identity inside the terminal. */
.s8-learn-pane{--lp-gold:#F5C451;--lp-gold-2:#D9A632;--lp-gold-line:rgba(245,196,81,.42);--lp-gold-tint:rgba(245,196,81,.12);--lp-card:#171a20;--lp-card-2:#1e222a;--lp-well:#0f1216;--lp-mono:'IBM Plex Mono',ui-monospace,monospace;--lp-ease:cubic-bezier(.22,.8,.24,1);display:flex;flex-direction:column;flex:1 1 auto;height:100%;min-height:0;overflow:hidden}
/* the header stays put; only the course below it scrolls (#sidePanels clips overflow) */
.s8-learn-pane .sim__head{flex:none}
.s8-learn-pane__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.s8-learn-pane[hidden]{display:none!important}
.s8-learn-pane .sim__head svg{fill:none;stroke:var(--lp-gold);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp{display:flex;flex-direction:column;gap:14px;padding:14px 14px 20px}
.lp-note{margin:14px;color:var(--s8-fg-3);font-size:var(--s8-fs-sm)}

/* progress header */
.lp-hero{position:relative;display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;padding:14px;border:1px solid var(--s8-line);border-radius:12px;background:radial-gradient(130% 100% at 0% 0%,rgba(245,196,81,.15),transparent 58%),linear-gradient(180deg,var(--lp-card),#12151a);overflow:hidden;isolation:isolate}
.lp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:14px 14px;-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 100%);mask-image:linear-gradient(100deg,transparent 35%,#000 100%)}
.lp-hero__ring{position:relative;width:64px;height:64px}
.lp-ring{display:block;width:64px;height:64px;transform:rotate(-90deg)}
.lp-ring__track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:5}
.lp-ring__fill{fill:none;stroke:var(--lp-gold);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(245,196,81,.5));animation:lp-ring 1.1s var(--lp-ease) both}
.lp-hero__n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--lp-mono);line-height:1}
.lp-hero__n b{color:#fff;font-size:18px;font-weight:600}
.lp-hero__n small{margin-top:5px;color:var(--s8-fg-4);font-size:10px;font-weight:500}
.lp-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--lp-gold);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.lp-kicker i{width:14px;height:2px;background:var(--lp-gold)}
.lp-hero__t{display:block;margin:5px 0 4px;color:#fff;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.lp-hero__sub{display:block;color:var(--s8-fg-3);font-size:12px;line-height:1.45;text-wrap:pretty}

/* up next */
.lp-next{display:block;border:1px solid var(--s8-line-2);border-radius:12px;background:var(--lp-card);color:inherit;text-decoration:none;overflow:hidden;transition:border-color var(--s8-t-fast) var(--s8-ease),transform var(--s8-t) var(--lp-ease),box-shadow var(--s8-t) var(--lp-ease)}
.lp-next:hover,.lp-next:focus-visible{border-color:var(--lp-gold-line);color:inherit;text-decoration:none;transform:translateY(-1px);box-shadow:0 16px 32px -20px rgba(0,0,0,.95),0 0 0 1px rgba(245,196,81,.1)}
.lp-next__chart{position:relative;height:108px;overflow:hidden;background:var(--lp-well)}
.lp-next__chart img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%;opacity:.82;transition:opacity .5s ease,transform .7s var(--lp-ease)}
.lp-next:hover .lp-next__chart img{opacity:1;transform:scale(1.04)}
.lp-next__chart::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,26,32,0) 40%,var(--lp-card) 100%);pointer-events:none}
.lp-next__chart.is-loading img{opacity:0}
.lp-next__chart.is-loading{background:linear-gradient(100deg,var(--lp-well) 30%,#181c22 50%,var(--lp-well) 70%) 0 0/300% 100%;animation:lp-shimmer 1.4s linear infinite}
.lp-next__chip{position:absolute;left:10px;top:10px;z-index:1;padding:3px 7px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:rgba(10,12,16,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:600 10px var(--lp-mono);letter-spacing:.04em}
.lp-next__body{display:flex;flex-direction:column;gap:5px;padding:12px 14px 14px}
.lp-next__k{color:var(--lp-gold);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lp-next__t{color:#fff;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lp-next__b{color:var(--s8-fg-3);font-size:12.5px;line-height:1.45;text-wrap:pretty}
.lp-next__foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.lp-next__mins{color:var(--s8-fg-3);font:500 11px var(--lp-mono)}
.lp-next__go{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:8px;background:linear-gradient(180deg,var(--s8-accent-hi),var(--s8-accent));box-shadow:0 8px 20px -10px rgba(43,143,224,.9),inset 0 1px 0 rgba(255,255,255,.18);color:#fff;font:600 12.5px var(--s8-sans)}
.lp-next__go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--s8-t) var(--lp-ease)}
.lp-next:hover .lp-next__go svg{transform:translateX(3px)}

/* level tabs */
.lp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--s8-line);border-radius:10px;background:var(--lp-well)}
.lp-tab{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 6px;padding:7px 8px 8px;border:0;border-radius:7px;background:transparent;color:var(--s8-fg-3);font:600 11.5px var(--s8-sans);text-align:left;cursor:pointer;transition:background var(--s8-t-fast) var(--s8-ease),color var(--s8-t-fast) var(--s8-ease)}
.lp-tab:hover{color:#fff}
.lp-tab.is-on{background:var(--lp-card-2);box-shadow:inset 0 0 0 1px var(--s8-line-2);color:#fff}
.lp-tab__n{color:var(--s8-fg-4);font:500 10px var(--lp-mono)}
.lp-tab__bar{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.lp-tab__bar i{display:block;height:100%;border-radius:inherit;background:var(--s8-up)}

/* lesson rows: a path, each mark joined to the one above */
.lp-list{display:flex;flex-direction:column}
.lp-unit{margin:14px 0 4px;color:var(--s8-fg-4);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lp-unit:first-child{margin-top:2px}
.lp-row{position:relative;display:grid;grid-template-columns:22px 1fr auto 12px;align-items:center;gap:10px;margin:0 -8px;padding:7px 8px;border-radius:8px;color:var(--s8-fg-2);font-size:13px;line-height:1.3;text-decoration:none;animation:lp-in .38s var(--lp-ease) both;animation-delay:calc(var(--i,0) * 22ms)}
.lp-row::before{content:"";position:absolute;left:18.5px;top:-7px;width:1px;height:14px;background:var(--s8-line-2)}
.lp-unit+.lp-row::before{display:none}
.lp-row.is-done+.lp-row::before{background:rgba(38,166,154,.55);background:color-mix(in srgb,var(--s8-up) 55%,transparent)}
.lp-row:hover,.lp-row:focus-visible{background:var(--s8-hover);color:#fff;text-decoration:none}
.lp-row__mark{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--s8-line-2);border-radius:50%;background:var(--s8-panel);color:var(--s8-fg-3);font:600 10.5px var(--lp-mono)}
.lp-row__mark svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lp-row.is-done .lp-row__mark{border-color:transparent;background:var(--s8-up-tint);color:var(--s8-up)}
.lp-row.is-done .lp-row__t{color:var(--s8-fg-3)}
.lp-row.is-check .lp-row__mark{color:var(--lp-gold-2)}
.lp-row.is-check .lp-row__mark svg{fill:currentColor;stroke:none;width:11px;height:11px}
.lp-row.is-check.is-done .lp-row__mark svg{fill:none;stroke:currentColor;width:12px;height:12px}
.lp-row.is-next{background:linear-gradient(90deg,var(--lp-gold-tint),transparent 75%);color:#fff}
.lp-row.is-next .lp-row__mark{border-color:var(--lp-gold);color:var(--lp-gold);animation:lp-pulse 2.4s ease-in-out infinite}
.lp-row.is-locked{color:var(--s8-fg-4)}
.lp-row.is-locked .lp-row__mark{border-style:dashed;color:var(--s8-fg-4)}
.lp-row__t{min-width:0}
.lp-row__m{color:var(--s8-fg-4);font:500 10.5px var(--lp-mono)}
.lp-ext{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translate(-3px,3px);transition:opacity var(--s8-t-fast) var(--s8-ease),transform var(--s8-t-fast) var(--s8-ease)}
.lp-row:hover .lp-ext,.lp-row:focus-visible .lp-ext{opacity:.75;transform:none}
.lp-all{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;color:var(--s8-accent-fg);font-size:12.5px;font-weight:600;text-decoration:none}
.lp-all:hover,.lp-all:focus-visible{color:var(--s8-accent-hi);text-decoration:none}
.lp-all .lp-ext{opacity:.8;transform:none}

@keyframes lp-in{from{opacity:0;transform:translateY(4px)}}
@keyframes lp-ring{from{stroke-dashoffset:157.1}}
@keyframes lp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,196,81,.32)}50%{box-shadow:0 0 0 4px rgba(245,196,81,0)}}
@keyframes lp-shimmer{to{background-position:-300% 0}}
@media (prefers-reduced-motion:reduce){.lp-row,.lp-ring__fill,.lp-row.is-next .lp-row__mark,.lp-next__chart.is-loading{animation:none}.lp-next,.lp-next__chart img,.lp-next__go svg{transition:none}}

/* Coach review: "Practice this" lesson link */
.s8-coach-lesson{display:flex;align-items:center;gap:var(--s8-3);margin:0;padding:10px var(--s8-3);border:1px solid var(--s8-accent-line);border-radius:var(--s8-r);background:var(--s8-accent-tint);color:var(--s8-fg);text-decoration:none;transition:border-color var(--s8-t-fast) var(--s8-ease)}
.s8-coach-lesson:hover,.s8-coach-lesson:focus-visible{border-color:var(--s8-accent);color:var(--s8-fg);text-decoration:none}
.s8-coach-lesson__icon svg{display:block;width:18px;height:18px;fill:none;stroke:var(--s8-accent-fg);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.s8-coach-lesson__txt{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.s8-coach-lesson__k{color:var(--s8-accent-fg);font-size:var(--s8-fs-micro);font-weight:700;letter-spacing:var(--s8-ls-caps);text-transform:uppercase}
.s8-coach-lesson__t{color:var(--s8-fg);font-size:var(--s8-fs-sm);font-weight:600}
.s8-coach-lesson__go{flex:none;color:var(--s8-accent-fg);font-weight:700}

/* Pro gate (js/learn-gate.js) in the Lessons pane */
.lp-free{display:inline-block;margin-left:7px;padding:1px 5px;border:1px solid var(--s8-up-line);border-radius:4px;color:var(--s8-up);font:600 9.5px var(--lp-mono);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.lp-row.is-locked .lp-row__mark svg{width:11px;height:11px}
.lp-next.is-locked:hover{border-color:var(--lp-gold-line)}
.lp-next__go.is-pro{background:var(--s8-reward-grad);box-shadow:0 8px 20px -10px rgba(245,177,74,.8),inset 0 1px 0 rgba(255,255,255,.35);color:#1A1206}
.lp-next__go.is-pro svg{width:13px;height:13px;stroke-width:2.2}
.lp-next:hover .lp-next__go.is-pro svg{transform:none}
.lp-row.is-check.is-locked .lp-row__mark{color:var(--s8-fg-4)}.lp-row.is-check.is-locked .lp-row__mark svg{fill:none;stroke:currentColor;width:11px;height:11px}

/* Lessons a level hasn't opened yet (its lesson 1 not done, no Pro): plain disabled rows, no lock or Pro wording. */
.lp-row.is-off{color:var(--s8-fg-4);cursor:default;opacity:.55}
.lp-row.is-off:hover{background:none;color:var(--s8-fg-4)}
.lp-row.is-off .lp-row__mark{color:var(--s8-fg-4);border-color:var(--s8-line)}

/* NEW on the Lessons rail button (js/learn-panel.js): gold cap icon that glows three times after
   load, a solid gold micro-pill on the button's lower edge with a passing sheen, and a NEW chip in
   the tooltip. All of it goes the first time the tab is opened. */
.s8-learn-railbtn.is-new{color:var(--s8-gold,#F5B14A)}
.s8-learn-railbtn.is-new>svg{animation:s8-railnew-glow 2.2s ease-in-out .9s 3}
.s8-railnew{position:absolute;left:50%;bottom:4px;z-index:1;display:inline-flex;align-items:center;height:12px;padding:0 4px;overflow:hidden;transform:translateX(-50%);pointer-events:none;border-radius:3px;background:linear-gradient(180deg,#FFD27A,#F5B14A);color:#3A2503;font:800 7.5px/1 var(--s8-mono,monospace);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 0 1.5px var(--s8-panel,#14171c),0 3px 10px -2px rgba(245,177,74,.75)}
.s8-railnew::after{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:9px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-14px) skewX(-20deg);animation:s8-railnew-sheen 5s ease-in-out 1.2s infinite}
.s8-railnew-chip{display:inline-flex;align-items:center;height:15px;margin-left:7px;padding:0 5px;vertical-align:1px;border:1px solid rgba(245,177,74,.42);border-radius:3px;background:rgba(245,177,74,.16);color:#FFD27A;font:700 9px/1 var(--s8-mono,monospace);letter-spacing:.1em;text-transform:uppercase}
@keyframes s8-railnew-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(245,177,74,0))}50%{filter:drop-shadow(0 0 6px rgba(245,177,74,.9))}}
@keyframes s8-railnew-sheen{0%{transform:translateX(-14px) skewX(-20deg)}18%,100%{transform:translateX(40px) skewX(-20deg)}}
@media(prefers-reduced-motion:reduce){.s8-learn-railbtn.is-new>svg,.s8-railnew::after{animation:none}}