/* Replay simulator tour (js/sim-tour.js). Same family as the lesson coach
   (s8-lesson.css): gold crown card, s8 badge, mono labels. Adds a notch on any
   side, a gliding spotlight with a travelling glint, and numbered beacons. */
:root{
--s8t-gold:#F5C451;--s8t-gold-2:#D9A632;--s8t-gold-tint:rgba(245,196,81,.14);--s8t-gold-line:rgba(245,196,81,.42);
--s8t-card:#171a20;--s8t-edge:rgba(255,255,255,.16);--s8t-dim:rgba(3,5,9,.7);
--s8t-ease:cubic-bezier(.22,.8,.24,1);--s8t-spring:cubic-bezier(.34,1.4,.5,1);
--s8t-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@property --s8t-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- click shields + spotlight ---------- */
.s8t-block{position:fixed;z-index:1400;display:none;background:transparent}
.s8t-ring{position:fixed;z-index:1401;pointer-events:none;border-radius:10px;opacity:0;
box-shadow:0 0 0 2px var(--s8t-gold-line),0 0 36px 4px rgba(245,196,81,.16),0 0 0 9999px var(--s8t-dim);
transition:left .6s var(--s8t-ease),top .6s var(--s8t-ease),width .6s var(--s8t-ease),height .6s var(--s8t-ease),opacity .35s,box-shadow .45s var(--s8t-ease),border-radius .45s}
.s8t-ring.is-on{opacity:1}
.s8t-ring.is-square{border-radius:2px}
.s8t-ring.is-empty{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent,0 0 0 9999px var(--s8t-dim)}
/* A short bright arc that runs round the spotlight's edge. */
.s8t-ring::before{content:"";position:absolute;inset:-2px;padding:2px;border-radius:inherit;
background:conic-gradient(from var(--s8t-a),transparent 0 72%,rgba(245,196,81,.15) 80%,#ffe7a8 88%,rgba(245,196,81,.15) 94%,transparent);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
animation:s8t-spin 3.6s linear infinite;opacity:.9;transition:opacity .3s}
.s8t-ring.is-empty::before{opacity:0}
@keyframes s8t-spin{to{--s8t-a:360deg}}
.s8t-ring.is-pulse::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--s8t-gold);animation:s8t-pulse 1.6s var(--s8t-ease) infinite}
@keyframes s8t-pulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.06,1.16);opacity:0}}

/* ---------- beacons ---------- */
.s8t-beacons{position:fixed;inset:0;z-index:1403;pointer-events:none}
.s8t-beacon{position:fixed;display:grid;place-items:center;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
background:linear-gradient(180deg,#ffd978,var(--s8t-gold-2));box-shadow:0 0 0 2px #0d0f13,0 6px 14px -4px rgba(0,0,0,.8);
color:#1a1408;font:700 11px/1 var(--s8t-mono);pointer-events:auto;cursor:default;
animation:s8t-beacon-in .5s var(--s8t-spring) var(--d,0ms) both;transition:transform .25s var(--s8t-spring),box-shadow .25s,opacity .2s}
.s8t-beacon::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--s8t-gold);animation:s8t-halo 2s var(--s8t-ease) calc(var(--d,0ms) + .5s) infinite;opacity:0}
.s8t-beacon b{position:relative}
.s8t-beacon.is-hi{transform:scale(1.25);box-shadow:0 0 0 2px #0d0f13,0 0 0 6px rgba(245,196,81,.25),0 6px 14px -4px rgba(0,0,0,.8)}
@keyframes s8t-beacon-in{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@keyframes s8t-halo{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}

/* ---------- card ---------- */
.s8t-card{position:fixed;z-index:1410;width:368px;max-width:calc(100vw - 28px);padding:0 18px 16px;border-radius:12px;color:var(--s8-fg,#e8ecf2);
border:1px solid transparent;border-top-width:3px;
background:radial-gradient(320px 120px at 50% 0,rgba(245,196,81,.10),transparent 72%) padding-box,
linear-gradient(var(--s8t-card),var(--s8t-card)) padding-box,
linear-gradient(90deg,var(--s8t-gold-2),var(--s8t-gold) 50%,var(--s8t-gold-2)) top/100% 3px no-repeat border-box,
linear-gradient(var(--s8t-edge),var(--s8t-edge)) border-box;
box-shadow:0 0 0 1px rgba(0,0,0,.55),0 -6px 24px -12px rgba(245,196,81,.5),0 2px 0 rgba(0,0,0,.25),0 30px 80px -20px rgba(0,0,0,.95);
opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);
transition:left .6s var(--s8t-ease),top .6s var(--s8t-ease),width .4s var(--s8t-ease),opacity .3s,transform .35s var(--s8t-ease),visibility 0s .3s}
.s8t-card.is-on{opacity:1;visibility:visible;transform:none;transition:left .6s var(--s8t-ease),top .6s var(--s8t-ease),width .4s var(--s8t-ease),opacity .3s,transform .35s var(--s8t-ease)}
.s8t-card.is-swap{animation:s8t-swap .45s var(--s8t-ease)}
@keyframes s8t-swap{0%{transform:scale(.985)}100%{transform:none}}

/* notch: a rotated square in the card colour; the two outer edges carry the hairline */
.s8t-card::after{content:"";position:absolute;width:14px;height:14px;background:var(--s8t-card);border:1px solid var(--s8t-edge);transform:rotate(45deg);opacity:0;transition:opacity .25s,top .6s var(--s8t-ease),left .6s var(--s8t-ease)}
.s8t-card--n-left::after{left:-8px;top:var(--s8t-notch,24px);margin-top:-7px;border-top:0;border-right:0;opacity:1}
.s8t-card--n-right::after{right:-8px;top:var(--s8t-notch,24px);margin-top:-7px;border-bottom:0;border-left:0;opacity:1}
.s8t-card--n-bottom::after{bottom:-8px;left:var(--s8t-notch,24px);margin-left:-7px;border-top:0;border-left:0;opacity:1}
/* Up-pointing notch grows out of the gold crown, so it is gold too. */
.s8t-card--n-top::after{top:-10px;left:var(--s8t-notch,24px);margin-left:-7px;border:0;background:linear-gradient(135deg,var(--s8t-gold) 50%,transparent 50%);opacity:1}

.s8t-card__head{display:flex;align-items:center;gap:10px;margin:0 -18px;padding:11px 12px 11px 18px;border-radius:9px 9px 0 0;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.s8t-card__badge{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#2b313b,#14171c);box-shadow:0 0 0 1px var(--s8t-gold-line)}
.s8t-card__badge img{display:block;width:18px;height:18px;object-fit:contain}
.s8t-card__who{font:600 12px/1 var(--s8t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--s8t-gold)}
.s8t-card__step{margin-left:auto;font:500 11px/1 var(--s8t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--s8-fg-4,#7b8494);font-variant-numeric:tabular-nums}
.s8t-card__x{display:grid;place-items:center;width:28px;height:28px;margin-left:2px;border:0;border-radius:6px;background:transparent;color:var(--s8-fg-3,#9aa3b2);cursor:pointer;transition:background .15s,color .15s}
.s8t-card__x:hover{background:rgba(255,255,255,.07);color:var(--s8-fg,#fff)}
.s8t-card__x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.s8t-card--center .s8t-card__step{display:none}
.s8t-card--center .s8t-card__x{margin-left:auto}

.s8t-card__prog{display:flex;gap:3px;margin:12px 0 2px}
.s8t-card__prog:empty{display:none}
.s8t-card__prog i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .4s var(--s8t-ease)}
.s8t-card__prog i.is-done{background:rgba(245,196,81,.55)}
.s8t-card__prog i.is-now{background:var(--s8t-gold);box-shadow:0 0 8px rgba(245,196,81,.6)}

.s8t-card__content{padding-top:12px}
.s8t-card__content > *{opacity:0;transform:translateY(6px)}
.s8t-card__content.is-in > *{animation:s8t-in .5s var(--s8t-ease) forwards}
.s8t-card__content.is-in > :nth-child(2){animation-delay:.05s}.s8t-card__content.is-in > :nth-child(3){animation-delay:.1s}.s8t-card__content.is-in > :nth-child(4){animation-delay:.15s}.s8t-card__content.is-in > :nth-child(5){animation-delay:.2s}.s8t-card__content.is-in > :nth-child(n+6){animation-delay:.25s}
@keyframes s8t-in{to{opacity:1;transform:none}}

.s8t-title{margin:0 0 8px;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--s8-fg,#fff)}
.s8t-title--lg{font-size:25px;letter-spacing:-.02em;text-align:center}
.s8t-title .up{color:var(--s8-up,#3ed69b)}.s8t-title .down{color:var(--s8-down,#ff6e7a)}
.s8t-body{margin:0 0 4px;font-size:14px;line-height:1.55;color:var(--s8-fg-2,#c5ccd8)}
.s8t-body b{color:var(--s8-fg,#fff);font-weight:600}
.s8t-card--center .s8t-body{text-align:center}
.s8t-note{display:block;margin:12px 0 0;padding:9px 11px;border-radius:8px;background:rgba(245,196,81,.07);box-shadow:inset 2px 0 0 var(--s8t-gold-line);font-size:12.5px;line-height:1.5;color:var(--s8-fg-3,#9aa3b2)}
.s8t-note b{color:var(--s8-fg-2,#c5ccd8);font-weight:600}
.s8t-note--center{display:block;background:none;box-shadow:none;padding:0;margin-top:16px;text-align:center}
.s8t-card kbd{display:inline-block;min-width:22px;padding:1px 5px;border:1px solid rgba(255,255,255,.18);border-bottom-width:2px;border-radius:4px;background:#0f1216;color:var(--s8-fg,#fff);font:600 11px var(--s8-sans,system-ui);text-align:center}
.s8t-keys{margin:14px 0 0;text-align:center;font-size:12px;color:var(--s8-fg-4,#7b8494)}

/* numbered rows that match the beacons */
.s8t-list{display:grid;gap:2px;margin:4px -8px 0;padding:0;list-style:none}
.s8t-list li{display:flex;gap:11px;padding:7px 8px;border-radius:8px;transition:background .2s}
.s8t-list li.is-hi{background:rgba(245,196,81,.08)}
.s8t-list li > i{display:grid;place-items:center;flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--s8t-gold-tint);box-shadow:inset 0 0 0 1px var(--s8t-gold-line);color:var(--s8t-gold);font:700 10.5px/1 var(--s8t-mono);font-style:normal;transition:background .2s,color .2s}
.s8t-list li.is-hi > i{background:var(--s8t-gold);color:#1a1408}
.s8t-list b{display:block;font-size:13.5px;font-weight:600;color:var(--s8-fg,#fff)}
.s8t-list span{display:block;margin-top:1px;font-size:13px;line-height:1.45;color:var(--s8-fg-3,#9aa3b2)}

/* live readouts during the practice trade */
.s8t-live{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:1px;margin:2px 0 12px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.07)}
.s8t-live > div{display:flex;flex-direction:column;gap:3px;padding:9px 11px;background:#0f1216}
.s8t-live span{font:500 9.5px/1 var(--s8t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--s8-fg-4,#7b8494)}
.s8t-live b{font:600 15px/1.1 var(--s8t-mono);color:var(--s8-fg,#fff);font-variant-numeric:tabular-nums;transition:color .2s}
.s8t-live__pnl b{font-size:17px}
.s8t-live b.up{color:var(--s8-up,#3ed69b)}.s8t-live b.down{color:var(--s8-down,#ff6e7a)}
.s8t-wait{display:flex;align-items:center;gap:9px;margin:12px 0 0;padding:9px 11px;border:1px dashed rgba(255,255,255,.14);border-radius:8px;font:500 11px/1 var(--s8t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--s8-fg-3,#9aa3b2)}
.s8t-wait b{margin-left:auto;font-size:13px;letter-spacing:0;color:var(--s8-fg,#fff);font-variant-numeric:tabular-nums}
.s8t-wait__dot{width:8px;height:8px;border-radius:50%;background:var(--s8-up,#3ed69b);box-shadow:0 0 0 0 rgba(62,214,155,.6);animation:s8t-dot 1.4s ease-out infinite}
@keyframes s8t-dot{0%{box-shadow:0 0 0 0 rgba(62,214,155,.55)}100%{box-shadow:0 0 0 9px rgba(62,214,155,0)}}
.s8t-skip{display:block;margin:12px auto 0;padding:0;border:0;background:none;color:var(--s8-fg-4,#7b8494);font:500 12px var(--s8-sans,system-ui);cursor:pointer;transition:color .15s}
.s8t-skip:hover,.s8t-skip:focus-visible{color:var(--s8-fg-2,#c5ccd8)}

/* buttons */
.s8t-card__foot{display:flex;align-items:center;gap:8px;margin-top:16px}
.s8t-card__foot[hidden]{display:none}
.s8t-card__count{flex:1}
.s8t-actions{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:20px}
.s8t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border:0;border-radius:8px;font:600 14px var(--s8-sans,system-ui);text-decoration:none;cursor:pointer;transition:transform .15s,filter .15s,background .15s,color .15s}
.s8t-btn[hidden]{display:none}
.s8t-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--s8t-ease)}
.s8t-btn--go{background:linear-gradient(180deg,var(--s8-accent-hi,#4aa8f0),var(--s8-accent,#2b8fe0));box-shadow:0 8px 22px -10px rgba(43,143,224,.9),inset 0 1px 0 rgba(255,255,255,.18);color:#fff}
.s8t-btn--go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.s8t-btn--go:hover svg{transform:translateX(2px)}
.s8t-btn--ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:var(--s8-fg,#fff)}
.s8t-btn--ghost:hover{background:rgba(255,255,255,.06);color:var(--s8-fg,#fff)}
.s8t-btn--quiet{height:34px;padding:0 10px;background:transparent;color:var(--s8-fg-3,#9aa3b2)}
.s8t-btn--quiet:hover{background:rgba(255,255,255,.06);color:var(--s8-fg,#fff)}
.s8t-btn--sm{height:36px;padding:0 14px 0 16px;font-size:13px}
.s8t-btn--xs{height:30px;padding:0 12px;font-size:12.5px}
.s8t-btn:focus-visible,.s8t-card__x:focus-visible,.s8t-skip:focus-visible{outline:2px solid var(--s8-accent-fg,#9cd0ff);outline-offset:2px}
.s8t-card a,.s8t-card a:hover,.s8t-prompt a{text-decoration:none}

/* ---------- intro + finish (centred) ---------- */
.s8t-card--center{width:440px;padding:0 28px 24px}
.s8t-card--center .s8t-card__head{margin:0 -28px;padding-left:28px}
.s8t-kicker{margin:4px 0 6px;text-align:center;font:600 11px/1 var(--s8t-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--s8t-gold)}
.s8t-hero{margin:14px -6px 6px;height:76px}
.s8t-hero svg{display:block;width:100%;height:100%;overflow:visible}
.s8t-hero g line{stroke-width:1.4}
.s8t-hero g.u rect{fill:var(--s8-up,#3ed69b)}.s8t-hero g.u line{stroke:var(--s8-up,#3ed69b)}
.s8t-hero g.d rect{fill:var(--s8-down,#ff6e7a)}.s8t-hero g.d line{stroke:var(--s8-down,#ff6e7a)}
.s8t-hero g{opacity:.28;transform-box:fill-box;transform-origin:50% 100%;animation:s8t-candle .5s var(--s8t-spring) calc(var(--i) * 45ms + .1s) both}
@keyframes s8t-candle{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:.28}}
.s8t-hero .route{fill:none;stroke:var(--s8t-gold);stroke-width:1.6;stroke-dasharray:3 4;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(245,196,81,.5));stroke-dashoffset:0;animation:s8t-march 1.2s linear infinite}
@keyframes s8t-march{to{stroke-dashoffset:-14}}
.s8t-hero .stop{fill:#0d0f13;stroke:var(--s8t-gold);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:s8t-beacon-in .45s var(--s8t-spring) calc(var(--i) * 140ms + .55s) both}
.s8t-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.s8t-facts span{height:26px;padding:0 11px;display:inline-flex;align-items:center;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font:500 11.5px/1 var(--s8t-mono);color:var(--s8-fg-2,#c5ccd8)}
.s8t-check{display:grid;place-items:center;margin:20px 0 8px}
.s8t-check svg{width:56px;height:56px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s8t-check circle{stroke:var(--s8t-gold);stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151;animation:s8t-draw .7s var(--s8t-ease) .15s forwards;filter:drop-shadow(0 0 10px rgba(245,196,81,.45))}
.s8t-check path{stroke:var(--s8-up,#3ed69b);stroke-width:3;stroke-dasharray:36;stroke-dashoffset:36;animation:s8t-draw .45s var(--s8t-ease) .7s forwards}
@keyframes s8t-draw{to{stroke-dashoffset:0}}

/* ---------- first-visit prompt ---------- */
.s8t-prompt{position:fixed;z-index:1390;width:232px;padding:12px 14px 12px;border-radius:10px;
border:1px solid transparent;border-top-width:3px;
background:linear-gradient(var(--s8t-card),var(--s8t-card)) padding-box,linear-gradient(90deg,var(--s8t-gold-2),var(--s8t-gold) 50%,var(--s8t-gold-2)) top/100% 3px no-repeat border-box,linear-gradient(var(--s8t-edge),var(--s8t-edge)) border-box;
box-shadow:0 0 0 1px rgba(0,0,0,.5),0 18px 44px -14px rgba(0,0,0,.9);
opacity:0;transform:translateX(10px);transition:opacity .3s,transform .4s var(--s8t-spring)}
.s8t-prompt.is-on{opacity:1;transform:none}
.s8t-prompt::after{content:"";position:absolute;right:-8px;top:var(--s8t-notch,30px);width:14px;height:14px;margin-top:-7px;background:var(--s8t-card);border:1px solid var(--s8t-edge);border-bottom:0;border-left:0;transform:rotate(45deg)}
.s8t-prompt b{display:block;font-size:14px;font-weight:700;color:var(--s8-fg,#fff)}
.s8t-prompt span{display:block;margin-top:2px;font-size:13px;color:var(--s8-fg-3,#9aa3b2)}
.s8t-prompt__act{display:flex;gap:6px;margin-top:10px}

/* ---------- rail button + page while touring ---------- */
.s8t-railbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.s8t-railbtn--glow{color:var(--s8t-gold)!important}
.s8t-railbtn--glow::after{content:"";position:absolute;inset:8px;border-radius:50%;box-shadow:0 0 0 0 rgba(245,196,81,.5);animation:s8t-glow 1.8s ease-out infinite;pointer-events:none}
@keyframes s8t-glow{0%{box-shadow:0 0 0 0 rgba(245,196,81,.45)}100%{box-shadow:0 0 0 14px rgba(245,196,81,0)}}
.s8-tour-on .vertical-tab-tooltip{display:none!important}
/* Fill receipts stay readable above the dim during the practice trade. */
.s8-tour-on .s8-fill-stack{z-index:1405}
.s8t-menuitem{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}

@media (prefers-reduced-motion:reduce){
.s8t-ring,.s8t-card,.s8t-card.is-on{transition:opacity .2s}
.s8t-ring::before,.s8t-ring.is-pulse::after,.s8t-beacon::before,.s8t-hero .route,.s8t-railbtn--glow::after,.s8t-wait__dot{animation:none}
.s8t-card__content.is-in > *,.s8t-beacon,.s8t-hero g,.s8t-hero .stop,.s8t-card.is-swap{animation-duration:.01s;animation-delay:0s}
}