/* Pipsly: first-run welcome, guided tour, practice mode, finish screen
   and Help & Tutorial. Colours, spacing, radius, easing and durations all come
   from shared/css/tokens.css. Only transform and opacity ever animate.
   The 80% dim is --bg-deep (#040404) at .8. */

/* ---------- welcome: the logo reveal plays once and holds; a chrome glow breathes behind it ---------- */
.tut-welcome { position: fixed; inset: 0; z-index: 60; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
  padding: calc(var(--safe-t) + var(--s4)) max(var(--s4), var(--safe-r)) calc(var(--safe-b) + var(--s5)) max(var(--s4), var(--safe-l));
  background: var(--bg-deep); opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.tut-welcome.in { opacity: 1; }
.tut-welcome.out, .tut-finish.out { opacity: 0; transition-duration: var(--t-base); }
.tw-hero { position: relative; flex: none; display: flex; justify-content: center; width: 100%; }
.tw-glow, .tf-glow { position: absolute; left: 50%; top: 50%; width: 120vmin; height: 120vmin; margin: -60vmin 0 0 -60vmin; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 204, 209, .22), rgba(201, 204, 209, .07) 48%, transparent 74%);
  will-change: transform, opacity; animation: tut-breathe 6s var(--ease-in-out) infinite alternate; }
@keyframes tut-breathe { from { opacity: .5; transform: scale(.94); } to { opacity: 1; transform: scale(1.05); } }
.tw-stage { position: relative; flex: none; width: min(100%, 880px, (100svh - 320px) * 16 / 9); aspect-ratio: 16 / 9; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 82%, transparent);
  mask-composite: intersect; }
.tw-stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  opacity: 0; transition: opacity var(--t-reveal) var(--ease-out); }
.tw-stage > .on { opacity: 1; }
.tw-body { position: relative; width: 100%; max-width: 400px; text-align: center; }
.tw-body .eyebrow { margin: 0; }
.tw-title { margin: var(--s2) 0 var(--s5); font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em; font-weight: 650; }
.tw-actions { display: flex; flex-direction: column; gap: var(--s3); }
.tw-actions .btn { --btn-h: 52px; --btn-fs: 16px; }
.tw-link { align-self: center; min-height: 44px; padding: 10px 12px; border: 0; background: none; color: var(--accent); font-size: 14px; font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; }
.tw-in { opacity: 0; }
.tut-welcome.in .tw-in { opacity: 1; animation: pp-rise var(--t-slow) var(--ease-out) both; animation-delay: calc(var(--t-reveal) + var(--d) * var(--stagger) * 2); }
@media (orientation: landscape) and (max-height: 560px) {
  .tut-welcome { flex-direction: row; gap: var(--s5); }
  .tw-hero { width: min(50%, (100svh - 40px) * 16 / 9); }
  .tw-stage { width: 100%; }
  .tw-body { max-width: 340px; }
  .tw-title { font-size: var(--fs-h3); margin-bottom: var(--s4); }
  .tw-actions { gap: var(--s2); }
  .tw-actions .btn { --btn-h: 46px; --btn-fs: 15px; }
}

/* ---------- the tour: dim, hole, chrome ring ---------- */
.tut { position: fixed; inset: 0; z-index: 50; overflow: hidden; touch-action: none; opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.tut.in { opacity: 1; }
.tut-dim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(4, 4, 4, .8); transform-origin: 0 0; will-change: transform; }
.tut-cn { position: absolute; left: 0; top: 0; width: var(--tut-r, 18px); height: var(--tut-r, 18px); will-change: transform; transition: opacity var(--t-base) var(--ease-out); }
.tut-cn[data-c="tl"] { background: radial-gradient(circle at 100% 100%, transparent calc(var(--tut-r, 18px) - .5px), rgba(4, 4, 4, .8) var(--tut-r, 18px)); }
.tut-cn[data-c="tr"] { background: radial-gradient(circle at 0 100%, transparent calc(var(--tut-r, 18px) - .5px), rgba(4, 4, 4, .8) var(--tut-r, 18px)); }
.tut-cn[data-c="bl"] { background: radial-gradient(circle at 100% 0, transparent calc(var(--tut-r, 18px) - .5px), rgba(4, 4, 4, .8) var(--tut-r, 18px)); }
.tut-cn[data-c="br"] { background: radial-gradient(circle at 0 0, transparent calc(var(--tut-r, 18px) - .5px), rgba(4, 4, 4, .8) var(--tut-r, 18px)); }
/* reduced motion: a plain fade covers the move instead */
.tut-veil { position: absolute; inset: 0; background: rgba(4, 4, 4, .8); opacity: 0; pointer-events: none; transition: opacity var(--t-base) linear; }
.tut.veiled .tut-veil { opacity: 1; }
.tut-ring { position: absolute; left: 0; top: 0; border: 2px solid var(--accent-2); border-radius: var(--tut-r, 18px); pointer-events: none;
  box-shadow: 0 0 18px rgba(201, 204, 209, .32), inset 0 0 14px rgba(201, 204, 209, .1);
  transform-origin: 0 0; will-change: transform; opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
.tut-ring.on { opacity: 1; }
.tut.veiled .tut-ring { opacity: 0; }
.tut-ring::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; box-shadow: 0 0 22px rgba(255, 255, 255, .32); opacity: .35;
  animation: tut-glow 2.8s var(--ease-in-out) infinite alternate; }
@keyframes tut-glow { to { opacity: 1; } }

/* ---------- the tour card: glass, thin chrome border ---------- */
.tut-pos { position: absolute; left: 0; top: 0; will-change: transform; }
.tut-card { position: relative; width: min(400px, calc(100vw - 24px)); padding: 14px 16px 12px; border-radius: 16px;
  background: rgba(21, 24, 29, .8); border: 1px solid rgba(201, 204, 209, .45); box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); touch-action: none;
  opacity: 0; visibility: hidden; transform: translate3d(0, var(--rise-sm), 0);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base); }
.tut-card.in { opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility 0s; }
.tut-card.swiping { transition: none; }
.tut-card.scroll { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.tut.veiled .tut-card { opacity: 0; }
.tut-measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.tut-measure .tut-card { transition: none; transform: none; }
.tc-head { display: flex; flex-direction: column; gap: 9px; }
.tc-dots { display: flex; gap: 6px; }
.tc-dots:empty { display: none; }
.tc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: transform var(--t-base) var(--ease-out); }
.tc-dots i.done { background: rgba(201, 204, 209, .45); }
.tc-dots i.on { background: var(--accent-2); transform: scale(1.45); }
.tc-title { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; outline: none; }
.tc-text { margin: 6px 0 0; color: var(--fg-2); font-size: 14.5px; line-height: 1.45; }
.tc-clip { position: relative; margin-top: var(--s3); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--bg-sunk); border: 1px solid var(--line); }
.tc-clip > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-video { opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.tc-video.on { opacity: 1; }
.tc-actions { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.tc-sp { flex: 1; }
.tc-actions .btn { --btn-px: 16px; }
.tc-skip { --btn-px: 10px; border-color: transparent; color: var(--muted); }
.tc-back.invis { visibility: hidden; }
/* wide and short screens (landscape phones): title and buttons share a row */
.tut-card.wide { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: center; padding: 10px 14px; }
.tut-card.wide .tc-head { grid-column: 1; grid-row: 1; flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.tut-card.wide .tc-actions { grid-column: 2; grid-row: 1; margin-top: 0; }
.tut-card.wide .tc-text { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
.tut-card.wide .tc-clip { display: none; }

/* Hold to CLOSE ALL: the chrome ring fills around the button (pieces scale or fade in from js) */
.tut-ring.demo { border-color: rgba(201, 204, 209, .3); }
.tut-hold { position: absolute; inset: -2px; pointer-events: none; }
.th-e { position: absolute; background: var(--accent); box-shadow: 0 0 10px rgba(255, 255, 255, .7); }
.th-t { left: var(--tut-r, 18px); right: var(--tut-r, 18px); top: 0; height: 2px; transform-origin: 0 50%; transform: scaleX(0); }
.th-r { top: var(--tut-r, 18px); bottom: var(--tut-r, 18px); right: 0; width: 2px; transform-origin: 50% 0; transform: scaleY(0); }
.th-b { left: var(--tut-r, 18px); right: var(--tut-r, 18px); bottom: 0; height: 2px; transform-origin: 100% 50%; transform: scaleX(0); }
.th-l { top: var(--tut-r, 18px); bottom: var(--tut-r, 18px); left: 0; width: 2px; transform-origin: 50% 100%; transform: scaleY(0); }
.th-c { position: absolute; width: var(--tut-r, 18px); height: var(--tut-r, 18px); border: 0 solid var(--accent); opacity: 0; }
.th-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: var(--tut-r, 18px); }
.th-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: var(--tut-r, 18px); }
.th-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: var(--tut-r, 18px); }
.th-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: var(--tut-r, 18px); }
.th-finger { position: absolute; right: 12%; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
  border: 2px solid var(--accent); background: rgba(255, 255, 255, .14); opacity: 0; }
.tut-hold.static .th-e { transform: none; }
.tut-hold.static .th-c, .tut-hold.static .th-finger { opacity: 1; }

/* ---------- "?" on each Trade section header: that section's tip only ---------- */
.view[data-view="trade"] .section.has-q { position: relative; padding-right: 34px; }
.tut-q { position: absolute; right: 0; top: 50%; width: 22px; height: 22px; margin-top: -11px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(201, 204, 209, .5); background: rgba(201, 204, 209, .08); color: var(--accent);
  font: 700 12px/1 var(--font); letter-spacing: 0; text-transform: none; transition: transform var(--t-fast) var(--ease-out); }
/* a 44 px target that reaches up into the header's top margin, never down onto the tools */
.tut-q::before { content: ""; position: absolute; top: -18px; bottom: -4px; left: -11px; right: -11px; }
.tut-q:active { transform: scale(var(--press)); }

/* ---------- practice: a striped chrome band on top; Chart and More stay closed ---------- */
.tut-band { position: relative; z-index: 6; flex: none; display: flex; align-items: center; gap: var(--s2);
  padding: calc(var(--safe-t) + 6px) max(var(--s3), var(--safe-r)) 6px max(var(--s3), var(--safe-l));
  background: repeating-linear-gradient(135deg, var(--accent-2) 0 14px, var(--accent) 14px 28px); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; animation: tut-band-in var(--t-slow) var(--ease-out) both; }
@keyframes tut-band-in { from { transform: translate3d(0, -100%, 0); } }
.tb-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-btn { position: relative; flex: none; min-height: 32px; padding: 4px 13px; border-radius: var(--r-pill); border: 1px solid rgba(23, 19, 10, .35);
  background: rgba(23, 19, 10, .1); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; transition: transform var(--t-fast) var(--ease-out); }
.tb-btn::before { content: ""; position: absolute; inset: -6px -3px; }
.tb-btn:active { transform: scale(var(--press)); }
.tb-exit { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); }
body.practice .topbar { padding-top: 10px; }
body.practice .toasts.top { top: calc(var(--safe-t) + 110px); }   /* under the band and the top bar */
body.practice #statusPill { visibility: hidden; }
body.practice .acct-switch { pointer-events: none; }
body.practice .tabbar [data-tab="chart"], body.practice .tabbar [data-tab="more"], body.practice #leftSwitch [data-left="more"] { opacity: .35; }
.tut-chartoff { display: none; }
body.practice .view[data-view="chart"] > :not(.tut-chartoff):not(.panel-head) { display: none; }
body.practice .tut-chartoff { display: block; max-width: 360px; margin: var(--s5) auto; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- finish: the mark scales in with a chrome light sweep, sparks once (under 1.5 s) ---------- */
.tut-finish { position: fixed; inset: 0; z-index: 60; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: calc(var(--safe-t) + var(--s5)) max(var(--s5), var(--safe-r)) calc(var(--safe-b) + var(--s5)) max(var(--s5), var(--safe-l));
  background: rgba(4, 4, 4, .94); opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.tut-finish.in { opacity: 1; }
.tf-glow { top: 38%; animation-iteration-count: 1; animation-duration: 3s; }
/* The art box is the clip's frame; the mark (image or clip) is 62% of it, so both line up. */
.tf-art { position: relative; flex: none; width: 240px; height: 240px; margin-bottom: var(--s2); }
.tf-mark { position: absolute; inset: 19%; overflow: hidden;
  -webkit-mask: url("img/pipsly/mark-chrome-512.png") center / contain no-repeat; mask: url("img/pipsly/mark-chrome-512.png") center / contain no-repeat;
  opacity: 0; transform: scale(.82); transition: transform var(--t-reveal) var(--ease-out), opacity var(--t-slow) var(--ease-out); }
.tut-finish.in .tf-mark { opacity: 1; transform: none; }
.tf-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tf-sweep { position: absolute; top: -10%; bottom: -10%; left: -50%; width: 50%; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 190, .9), transparent); transform: skewX(-14deg); }
.tut-finish.in .tf-sweep { animation: tf-sweep 1000ms var(--ease-in-out) 350ms both; }
@keyframes tf-sweep {
  0% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-14deg); }
  15%, 80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(420%, 0, 0) skewX(-14deg); } }
.tf-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.tf-sparks i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px rgba(255, 255, 255, .9); opacity: 0; }
.tut-finish.in .tf-sparks i { animation: tf-spark 1000ms var(--ease-out) calc(250ms + var(--d)) both; }
@keyframes tf-spark {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(1); } }
/* The Higgsfield shimmer clip (1:1, its black crushed to true black) fills the art box and is
   screen-blended, so only its light shows and its square never does. */
.tf-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen; opacity: 0; transition: opacity var(--t-base) var(--ease-out); pointer-events: none; }
.tut-finish.clip .tf-clip { opacity: 1; }
.tut-finish.clip .tf-mark { opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
.tut-finish.clip .tf-sweep, .tut-finish.clip .tf-sparks, .tut-finish.clip .tf-glow { display: none; }
/* While the clip plays the whole screen is the clip's own black, so its square can never show,
   whether or not the browser blends video. */
.tut-finish.clip { background: #000; }
.tf-title { position: relative; margin: 0; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.02em; font-weight: 650; outline: none; }
.tf-text { position: relative; max-width: 340px; margin: var(--s2) 0 var(--s5); color: var(--fg-2); font-size: var(--fs-body); }
.tf-go { position: relative; max-width: 360px; --btn-h: 52px; --btn-fs: 16px; }
.tf-title, .tf-text, .tf-go { opacity: 0; }
.tut-finish.in .tf-title, .tut-finish.in .tf-text, .tut-finish.in .tf-go { opacity: 1; animation: pp-rise var(--t-slow) var(--ease-out) both; }
.tut-finish.in .tf-title { animation-delay: calc(var(--t-slow) + var(--stagger)); }
.tut-finish.in .tf-text { animation-delay: calc(var(--t-slow) + var(--stagger) * 3); }
.tut-finish.in .tf-go { animation-delay: calc(var(--t-slow) + var(--stagger) * 5); }
/* the install reminder (phones, not installed yet) */
.tf-install { position: relative; max-width: 340px; margin: calc(var(--s2) * -1) 0 var(--s4); color: var(--accent); font-size: 14.5px; font-weight: 600; }
.tf-ins { position: relative; max-width: 360px; margin-top: var(--s2); }
.tf-install, .tf-ins { opacity: 0; }
.tut-finish.in .tf-install, .tut-finish.in .tf-ins { opacity: 1; animation: pp-rise var(--t-slow) var(--ease-out) both; }
.tut-finish.in .tf-install { animation-delay: calc(var(--t-slow) + var(--stagger) * 4); }
.tut-finish.in .tf-ins { animation-delay: calc(var(--t-slow) + var(--stagger) * 6); }

/* ---------- Help & Tutorial (in the bottom sheet) and the More tab row ---------- */
.th-main { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.th-row { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 60px; padding: 10px 14px; border-radius: var(--r-btn);
  background: var(--bg-sunk); border: 1px solid var(--line); text-align: left; transition: transform var(--t-fast) var(--ease-out); }
.th-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.th-row b { font-size: 15px; font-weight: 600; }
.th-row small { color: var(--muted); font-size: 12.5px; }
.help-row { background: var(--surface); border-radius: var(--r-card); }
.th-ic { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--accent-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.th-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.th-row:active, .th-topic:active, .th-vid:active { transform: scale(var(--press)); }
.sheet h4.section { margin: var(--s5) 2px var(--s2); }
.th-topics { display: flex; flex-direction: column; }
.th-topic { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 48px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--fg); font-size: 15px; text-align: left; transition: transform var(--t-fast) var(--ease-out); }
.th-topic span { flex: 1; }
.th-topic:last-child { border-bottom: 0; }
.th-vids { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.th-vid { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; color: var(--fg); text-align: left;
  transition: transform var(--t-fast) var(--ease-out); }
.th-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(201, 204, 209, .1), rgba(201, 204, 209, 0) 60%), var(--bg-sunk); }
.th-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.th-play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: rgba(10, 10, 10, .72); border: 1px solid rgba(201, 204, 209, .6); }
.th-play::after { content: ""; position: absolute; left: 15px; top: 12px; border: 8px solid transparent; border-left: 12px solid var(--accent); border-right: 0; }
.th-vid b { font-size: 13.5px; font-weight: 600; }
.th-vid small { color: var(--muted); font-size: 12px; }
.th-vid.soon { opacity: .7; }
.th-contact .btn { width: 100%; }
.th-player video { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--s3); border-radius: 10px; background: #000; }

/* ---------- reduced motion: fades only, no video autoplay, no particles ---------- */
@media (prefers-reduced-motion: reduce) {
  .tw-glow, .tf-glow, .tut-ring::after { animation: none; }
  .tut-welcome.in .tw-in, .tut-finish.in .tf-title, .tut-finish.in .tf-text, .tut-finish.in .tf-go { animation: pp-fade var(--t-base) linear both; animation-delay: 0s; }
  .tut-card, .tut-card.in { transform: none; }
  .tf-mark { transform: none; transition-property: opacity; }
  .tf-sweep, .tf-sparks { display: none; }
  .tut-band { animation: pp-fade var(--t-base) linear both; }
  .th-row:active, .th-topic:active, .th-vid:active, .tut-q:active, .tb-btn:active { transform: none; }
}

/* Pipsly: the welcome shows the chrome mark (a still), whole and centred */
.tw-stage > .tw-still { object-fit: contain; object-position: 50% 55%; padding: 6% 0; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6)); }