/* Ticker's stock walkthrough (stock-guide.js): lens, speech bubble and launcher. The character itself is styled in ticker.css. */
.tk-stage,.tk-launch{--tk-ease:cubic-bezier(.2,.8,.2,1);--tk-spring:cubic-bezier(.34,1.5,.64,1);--tk-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;--tk-text:'Figtree','DM Sans',system-ui,sans-serif}
.tk-stage{position:fixed;inset:0;z-index:950;pointer-events:none;--tk-size:168px;font-family:var(--tk-text)}
.tk-lens,.tk-sparks{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}

/* Tones: each mood colours the bubble, its numbers and the step track. */
.tk-card,.tk-dot{--tk-tone:38,208,180;--tk-ink:#0a6a5c}
[data-tone="gold"]{--tk-tone:255,186,40;--tk-ink:#875400}
[data-tone="amber"]{--tk-tone:255,146,48;--tk-ink:#8f4300}
[data-tone="blue"]{--tk-tone:104,152,255;--tk-ink:#264b9a}
[data-tone="rose"]{--tk-tone:255,104,150;--tk-ink:#a2245a}
[data-tone="violet"]{--tk-tone:150,128,255;--tk-ink:#4a37a6}

/* Speech bubble: placed beside Ticker by script on wide screens; a bottom sheet on phones. */
.tk-card{position:fixed;left:0;top:0;width:min(372px,calc(100vw - 32px));pointer-events:auto;will-change:transform}
.tk-bubble{position:relative;padding:14px 18px 13px;border-radius:24px;background:linear-gradient(180deg,#fff 0,#fbfdfc 100%);color:#15222b;box-shadow:0 34px 70px -22px rgba(3,28,26,.55),0 10px 24px -12px rgba(3,28,26,.25),0 0 0 1px rgba(var(--tk-tone),.32);transition:box-shadow .5s;transform-origin:calc(100% + 10px) var(--tail,40px)}
.tk-bubble.is-pop{animation:tk-pop .62s var(--tk-spring) both}
.tk-card.is-away{pointer-events:none}
.tk-card.is-away .tk-bubble{animation:tk-unpop .2s ease-in both}
.tk-measure{visibility:hidden;left:-10000px!important;pointer-events:none!important}
.tk-measure .tk-bubble{animation:none!important}
.tk-card[data-tail="left"] .tk-bubble{transform-origin:-10px var(--tail,40px)}
.tk-card[data-tail="top"] .tk-bubble{transform-origin:var(--tail,300px) -10px}
.tk-bubble::before{content:"";position:absolute;width:18px;height:18px;border-radius:4px;background:#fff;box-shadow:0 0 0 1px rgba(var(--tk-tone),.32);clip-path:polygon(0 0,100% 0,100% 100%);transition:top .4s var(--tk-ease),left .4s var(--tk-ease)}
.tk-card[data-tail="right"] .tk-bubble::before{right:-8px;top:calc(var(--tail,40px) - 9px);transform:rotate(45deg)}
.tk-card[data-tail="left"] .tk-bubble::before{left:-8px;top:calc(var(--tail,40px) - 9px);transform:rotate(-135deg)}
.tk-card[data-tail="top"] .tk-bubble::before{top:-8px;left:calc(var(--tail,300px) - 9px);transform:rotate(-45deg)}
.tk-stage.is-leaving .tk-bubble{animation:tk-unpop .38s ease-in both}
.tk-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.tk-brand{font:500 12px/1 var(--tk-display);color:#5b6873;white-space:nowrap}
.tk-brand b{margin-right:2px;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#0b1f1c}
.tk-chip{margin-left:auto;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(var(--tk-tone),.15);color:var(--tk-ink);font:700 11.5px/1 var(--tk-text);white-space:nowrap;transition:background .45s,color .45s}
.tk-stage .tk-close{display:grid;place-items:center;flex:none;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:50%;background:#f0f4f3;color:#3b4b57;font-size:12px;cursor:pointer;transition:background .2s,transform .3s var(--tk-spring)}
.tk-stage .tk-close:hover{background:#e2ebe8;transform:rotate(90deg)}
.tk-stage .tk-title{margin:4px 0 8px;font-family:var(--tk-display);font-size:24px;line-height:1.08;font-weight:780;font-variation-settings:"wdth" 100,"opsz" 48;letter-spacing:-.018em;color:#0a1916}
.tk-stage .tk-title.is-in{animation:tk-title .75s var(--tk-ease) both}
.tk-text{max-height:min(42vh,330px);overflow:auto;font-size:16px;line-height:1.62;color:#1c2933;overscroll-behavior:contain}
.tk-line{margin:0 0 8px}
.tk-line.is-bullet{position:relative;padding-left:17px}
.tk-line.is-bullet::before{content:"";position:absolute;left:3px;top:.68em;width:7px;height:7px;border-radius:50%;background:rgb(var(--tk-tone))}
.tk-w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(4px)}
.tk-w.is-in{animation:tk-word .56s var(--tk-ease) both}
.tk-w.is-emoji.is-in{animation:tk-emoji .72s var(--tk-spring) both}
.tk-num{padding:0 2px;border-radius:3px;font-weight:760;color:var(--tk-ink);font-variant-numeric:tabular-nums;background:linear-gradient(90deg,rgba(var(--tk-tone),.42),rgba(var(--tk-tone),.2)) no-repeat 0 90%/0% 44%;transition:background-size .6s var(--tk-ease)}
.tk-num.is-in{background-size:100% 44%;animation:tk-word .56s var(--tk-ease) both,tk-num .62s var(--tk-spring) both}
.tk-w.is-still{animation:none!important;opacity:1;transform:none;filter:none;transition:none!important;background-size:100% 44%}
.tk-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tk-end{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.tk-end[hidden]{display:none}
.tk-stage .tk-end a,.tk-stage .tk-end button{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid rgba(var(--tk-tone),.4);border-radius:999px;background:rgba(var(--tk-tone),.1);color:var(--tk-ink);font:650 13px var(--tk-text);text-decoration:none;cursor:pointer;transition:background .2s,transform .25s var(--tk-spring)}
.tk-stage .tk-end a:hover,.tk-stage .tk-end button:hover{background:rgba(var(--tk-tone),.2);transform:translateY(-2px)}
.tk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:10px}
.tk-track{display:flex;flex:1 0 100%;align-items:center;gap:5px;min-width:0;padding:2px 0}
.tk-stage .tk-dot{width:8px;height:8px;min-height:0;padding:0;border:0;border-radius:99px;background:rgba(var(--tk-tone),.3);cursor:pointer;transition:width .45s var(--tk-spring),background .3s}
.tk-stage .tk-dot.is-done{background:rgba(var(--tk-tone),.75)}
.tk-stage .tk-dot[aria-current]{width:24px;background:rgb(var(--tk-tone))}
.tk-stage .tk-dot:hover{transform:scale(1.25)}
.tk-controls{display:flex;align-items:center;gap:6px}
.tk-stage .tk-controls button{position:relative;display:grid;place-items:center;min-height:0;height:38px;padding:0;border:1px solid #e1e8ec;border-radius:999px;background:#fff;color:#22303c;font:700 14px var(--tk-display);cursor:pointer;transition:transform .25s var(--tk-spring),background .2s,border-color .2s}
.tk-stage .tk-back,.tk-stage .tk-auto{width:38px}
.tk-stage .tk-controls button:hover:not(:disabled){transform:translateY(-2px);border-color:#c6d6d1}
.tk-stage .tk-controls button:disabled{opacity:.35;cursor:default}
.tk-stage .tk-controls .tk-next{display:flex;gap:6px;padding:0 17px;border-color:transparent;background:var(--tk-ink);color:#fff;letter-spacing:.01em;transition:transform .25s var(--tk-spring),background .45s}
.tk-ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none}
.tk-ring circle{fill:none;stroke-width:2.6}
.tk-ring circle:first-child{stroke:transparent}
.tk-ring .tk-ring-fill{stroke:rgb(var(--tk-tone));stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.tk-auto-icon{width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.tk-auto.is-playing .tk-auto-icon{clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.tk-stage :focus-visible,.tk-launch:focus-visible{outline:3px solid rgb(var(--tk-tone,38,208,180));outline-offset:2px}

/* What Ticker talks about gets a little lift on the page. */
.tk-hot{animation:tk-hot .9s var(--tk-spring)}
.tk-wobble{animation:tk-wobble .7s ease-in-out}

/* Launcher: Ticker peeks from the corner and offers the walkthrough. */
.tk-launch{position:fixed;right:22px;bottom:20px;z-index:940;display:flex;align-items:center;gap:10px;padding:6px 18px 6px 8px;border:1px solid #d3e9e3;border-radius:999px;background:#fff;color:#0b1f1c;box-shadow:0 16px 40px -10px rgba(4,36,32,.32);font-family:var(--tk-text);cursor:pointer;transform:translateY(170%);transition:transform .8s var(--tk-spring),padding .45s var(--tk-ease),box-shadow .25s}
.tk-launch.is-in{transform:none}
.tk-launch.is-hidden{transform:translateY(170%);pointer-events:none}
.tk-launch.is-caught{animation:tk-catch .6s var(--tk-spring)}
.tk-launch:hover{box-shadow:0 20px 46px -10px rgba(4,36,32,.4)}
.tk-launch-art{position:relative;flex:none;width:74px;height:60px;margin:-28px 0 0 -4px}
.tk-launch-art img{display:block;width:100%;height:auto;transform-origin:50% 90%}
.tk-launch.is-in .tk-launch-art img{animation:tk-hello 1.6s ease-in-out .7s both,tk-hover 3.2s ease-in-out 2.3s infinite}
.tk-launch:hover .tk-launch-art img,.tk-launch:focus-visible .tk-launch-art img{animation:tk-hop .6s var(--tk-spring)}
.tk-launch-text{display:grid;gap:2px;max-width:240px;overflow:hidden;text-align:left;white-space:nowrap;transition:max-width .5s var(--tk-ease),opacity .3s}
.tk-launch-text b{font:780 15px/1.1 var(--tk-display);letter-spacing:-.01em}
.tk-launch-text small{font-size:12.5px;color:#56636f}
.tk-launch.is-compact{padding-right:8px}
.tk-launch.is-compact .tk-launch-text{max-width:0;opacity:0}
.tk-launch.is-compact:hover,.tk-launch.is-compact:focus-visible{padding-right:18px}
.tk-launch.is-compact:hover .tk-launch-text,.tk-launch.is-compact:focus-visible .tk-launch-text{max-width:240px;opacity:1}
.report-actions .report-guide-btn{display:inline-flex;align-items:center;gap:7px}
.report-guide-btn img{width:32px;height:auto;margin:-8px -2px -8px -6px}

@keyframes tk-pop{from{opacity:0;transform:scale(.55)}60%{opacity:1}}
@keyframes tk-unpop{to{opacity:0;transform:scale(.6)}}
@keyframes tk-title{from{opacity:0;transform:translateY(10px);font-weight:380;font-variation-settings:"wdth" 75,"opsz" 48;letter-spacing:.03em}}
@keyframes tk-word{from{opacity:0;transform:translateY(.45em);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes tk-emoji{0%{opacity:0;transform:scale(0) rotate(-30deg);filter:none}60%{opacity:1;transform:scale(1.4) rotate(10deg);filter:none}100%{opacity:1;transform:none;filter:none}}
@keyframes tk-num{0%,30%{font-weight:520}60%{transform:scale(1.14);font-weight:880}100%{transform:none;font-weight:760}}
@keyframes tk-hot{35%{transform:scale(1.035)}}
@keyframes tk-wobble{20%,60%{transform:translateX(-4px) rotate(-.6deg)}40%,80%{transform:translateX(4px) rotate(.6deg)}}
@keyframes tk-catch{30%{transform:scale(1.08,.9)}60%{transform:scale(.96,1.05)}}
@keyframes tk-hello{20%,60%{transform:rotate(-8deg)}40%,80%{transform:rotate(8deg)}}
@keyframes tk-hover{50%{transform:translateY(-5px)}}
@keyframes tk-hop{40%{transform:translateY(-10px) scale(1.04,.97)}70%{transform:translateY(0) scale(.97,1.03)}}

@media (max-width:700px){
  .tk-stage{--tk-size:110px}
  .tk-card{left:10px;right:10px;top:auto;bottom:10px;width:auto;transform:none!important}
  .tk-bubble{padding:12px 14px 11px;border-radius:20px}
  .tk-stage .tk-title{font-size:20px}
  .tk-text{max-height:30vh;font-size:15px}
  .tk-launch{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .tk-stage *,.tk-stage *::before,.tk-stage *::after,.tk-launch,.tk-launch *,.tk-hot,.tk-wobble{animation:none!important;transition:none!important}
  .tk-w{opacity:1;transform:none;filter:none}
  .tk-num{background-size:100% 44%}
}
@media print{.tk-stage,.tk-launch{display:none!important}}
