/*
 * FlowEntry Tour - Shepherd.js theme overrides
 * Brand: dark + gold ("Luxury Terminal")
 *
 * Loaded after shepherd.css so these rules win on specificity / order.
 * Scope: every selector starts with .shepherd-element.fe-tour to avoid
 * leaking into anything else if Shepherd is ever used elsewhere.
 */

/* ============================================================
   FE-TOUR: Mobile fallback button styling
   The bottom-center "first-visit pill" toast was removed in favour of
   auto-opening the tour's welcome card directly. .fe-tour-pill-btn is
   kept here because the mobile fallback card still uses it for its
   "Got it" button.
   ============================================================ */
.fe-tour-pill-btn{
  background:#c9a227;border:none;border-radius:999px;
  color:#08090d;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;
  padding:6px 14px;cursor:pointer;transition:background 0.15s,transform 0.1s;
}
.fe-tour-pill-btn:hover{background:#e8c84a}
.fe-tour-pill-btn:active{transform:translateY(1px)}

/* ============================================================
   FE-MTOUR: Mobile story (growth Step 6)
   Replaces the "works best on desktop" dead end. The panel sits BELOW the
   chart rather than on top of it: .chart-area is a flex column whose
   #chart-container is flex:1, so padding-bottom on .chart-area shrinks the
   chart and TV re-lays out its panes. Nothing the copy talks about (Sigma,
   Pulse, D. Momentum) ends up hidden behind the panel.
   --fe-mtour-h is measured in JS per beat, because the CTA beat is taller.
   ============================================================ */
body.fe-mtour-on .chart-area{padding-bottom:var(--fe-mtour-h,150px);transition:padding-bottom .2s ease}

.fe-mtour{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  font-family:'Outfit',sans-serif;
  opacity:0;transform:translateY(12px);transition:opacity .26s ease,transform .26s ease;
  pointer-events:none;
}
.fe-mtour.show{opacity:1;transform:translateY(0)}

/* Top row floats just above the panel; only the close button is clickable so
   the chart stays fully draggable during the story (dragging is the proof:
   the markers are time-anchored and stay welded to their candle). */
/* X sits LEFT: on the right it collided with the "Subscribe to unlock" lock
   badge, and a close button under the reading thumb invites an accidental
   exit from a 60-second story. */
.fe-mtour-top{
  position:absolute;bottom:100%;left:0;right:0;
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:0 12px 8px;pointer-events:none;
}
.fe-mtour-head{display:none}
.fe-mtour-x{
  pointer-events:auto;
  background:rgba(14,16,21,.92);border:1px solid #1a1d28;color:#c4c4cc;
  width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;
  cursor:pointer;backdrop-filter:blur(6px);
}
.fe-mtour-x:active{transform:scale(.94)}

/* Replay sits INSIDE the panel on the final card's footer row (dots left,
   replay right). Floating it above the card collided with the chart's
   "Subscribe to unlock" lock badge. */
.fe-mtour-replay{
  display:none;margin-left:auto;
  background:transparent;border:1px solid #8a7020;color:#e8c84a;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:12.5px;
  padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.fe-mtour-replay.show{display:inline-flex;align-items:center;gap:6px}
.fe-mtour-replay:active{transform:scale(.96);background:rgba(232,200,74,.1)}

.fe-mtour-bottom{
  pointer-events:auto;cursor:pointer;
  background:#0e1015;border-top:2px solid #c9a227;
  box-shadow:0 -14px 34px rgba(0,0,0,.55);
  padding:13px 16px calc(13px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:9px;
}
.fe-mtour-bottom:active{background:#111319}

.fe-mtour-eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#c9a227;
  display:flex;align-items:center;gap:7px;
}
.fe-mtour-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:#e8c84a;box-shadow:0 0 6px rgba(232,200,74,.65);
}
.fe-mtour-title{font-size:18px;font-weight:700;line-height:1.2;color:#f0f0f2;letter-spacing:-.01em}
.fe-mtour-body{
  font-size:13.5px;line-height:1.45;color:#c4c4cc;margin:0;
}
.fe-mtour-body.fe-mt-in{animation:feMtIn .3s ease}

/* Reveal cards state the outcome outright so the viewer never has to work out
   which way the chart just went. Tease cards never show this. */
.fe-mtour-move{display:none}
.fe-mtour-move.show{
  display:block;font-weight:700;font-size:14.5px;letter-spacing:-.01em;
  animation:feMtIn .34s ease .06s both;
}
.fe-mtour-move.up{color:#22c55e}
.fe-mtour-move.down{color:#ef4444}
@keyframes feMtIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.fe-mtour-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fe-mtour-dots{display:flex;gap:5px}
.fe-mtour-dots i{width:16px;height:3px;border-radius:3px;background:#2a2d38;display:block}
.fe-mtour-dots i.done{background:#8a7020}
.fe-mtour-dots i.on{background:#e8c84a;box-shadow:0 0 8px rgba(232,200,74,.6)}
.fe-mtour-prompt{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;color:#e8c84a;letter-spacing:.03em;white-space:nowrap;
}
.fe-mt-caret{display:inline-block;animation:feMtNudge 1.5s ease-in-out infinite}
@keyframes feMtNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

.fe-mtour-cta{display:none;flex-direction:column;gap:8px;margin-top:2px}
.fe-mtour-cta.show{display:flex}
.fe-mtour-btn{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:14.5px;
  padding:13px 16px;border-radius:11px;text-align:center;text-decoration:none;
  cursor:pointer;border:1px solid transparent;display:block;
}
.fe-mtour-btn.primary{background:#c9a227;color:#08090d}
.fe-mtour-btn.primary:active{background:#e8c84a}
.fe-mtour-btn.ghost{background:transparent;color:#c4c4cc;border-color:#1a1d28}
.fe-mtour-btn.ghost:active{border-color:#8a7020;color:#f0f0f2}

@media (prefers-reduced-motion:reduce){
  .fe-mtour,.fe-mtour-body.fe-mt-in,.fe-mt-caret,body.fe-mtour-on .chart-area{
    transition:none;animation:none;
  }
}

/* ============================================================
   FE-TOUR: Confirm-redirect modal (shown if user isn't on BTC)
   ============================================================ */
.fe-tour-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:9100;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
  opacity:0;transition:opacity 0.25s;
}
.fe-tour-modal-backdrop.show{display:flex;opacity:1}
.fe-tour-modal{
  background:#0e1015;border:1px solid #1a1d28;border-top:2px solid #c9a227;
  border-radius:14px;padding:24px 24px 20px;max-width:380px;width:90%;
  font-family:'Outfit',sans-serif;color:#f0f0f2;
  box-shadow:0 30px 80px rgba(0,0,0,0.7);
}
.fe-tour-modal h3{font-size:16px;font-weight:700;color:#c9a227;margin-bottom:10px}
.fe-tour-modal p{font-size:13px;line-height:1.55;color:#c4c4cc;margin-bottom:16px}
.fe-tour-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.fe-tour-modal-btn{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;
  padding:8px 16px;border-radius:8px;cursor:pointer;border:1px solid transparent;
  transition:all 0.15s;
}
.fe-tour-modal-btn.primary{background:#c9a227;color:#08090d;border-color:#c9a227}
.fe-tour-modal-btn.primary:hover{background:#e8c84a;border-color:#e8c84a}
.fe-tour-modal-btn.secondary{background:transparent;color:#c4c4cc;border-color:#1a1d28}
.fe-tour-modal-btn.secondary:hover{color:#f0f0f2;border-color:#252938}

/* ============================================================
   FE-TOUR: Mobile fallback card
   Shown on viewports < 1024px instead of running the tour.
   ============================================================ */
.fe-tour-mobile-card{
  position:fixed;left:12px;right:12px;bottom:18px;z-index:9000;
  background:#0e1015;border:1px solid #c9a227;border-radius:14px;
  padding:16px 18px 14px;font-family:'Outfit',sans-serif;color:#f0f0f2;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  display:none;
}
.fe-tour-mobile-card.show{display:block}
.fe-tour-mobile-card h3{font-size:14px;font-weight:700;color:#c9a227;margin-bottom:8px}
.fe-tour-mobile-card p{font-size:12px;line-height:1.55;color:#c4c4cc;margin-bottom:12px}
.fe-tour-mobile-card .fe-tour-pill-btn{display:block;margin-left:auto}

/* ============================================================
   FE-TOUR: Soft dim - chart stays visible, page chrome dims
   Shepherd's built-in modal masks the entire page; we override
   by making the dark portion 40% (not 80%) and explicitly never
   covering the chart container.
   ============================================================ */
.shepherd-modal-overlay-container{
  fill:rgba(0,0,0,0.40);
  transition:opacity 0.25s;
  z-index:8000;
}
/* Keep the chart pane fully readable while the tour runs.
   We don't fight Shepherd's SVG mask - instead we punch a hole
   by NOT using attachTo's modal-cutout for chart steps and
   relying on a lower overlay opacity overall. The chart steps
   that DO use attachTo on #chart-container get a normal cutout. */

/* ============================================================
   FE-TOUR: Tooltip (the actual step balloon)
   Override Shepherd defaults to match FlowEntry's dark+gold look.
   ============================================================ */
.shepherd-element.fe-tour{
  background:#0e1015;
  border:1px solid #1a1d28;
  border-top:2px solid #c9a227;
  border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 0 4px rgba(201,162,39,0.05);
  font-family:'Outfit',-apple-system,sans-serif;
  color:#f0f0f2;
  max-width:340px;
  /* Above Shepherd's default overlay (9997) and tooltip (9999), and above
     anything else on the page. Use !important because Shepherd's CSS is
     appended to <head> AFTER tour.css and will otherwise override us. */
  z-index:10500 !important;
}
.shepherd-element.fe-tour .shepherd-arrow:before{
  background:#0e1015;
  border:1px solid #1a1d28;
}
.shepherd-element.fe-tour[data-popper-placement^="bottom"] .shepherd-arrow:before{
  border-top-color:#c9a227;
}

.shepherd-element.fe-tour .shepherd-header{
  background:transparent;
  padding:14px 18px 4px;
  border-radius:12px 12px 0 0;
}
.shepherd-element.fe-tour .shepherd-title{
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:800;
  color:#c9a227;
  letter-spacing:0.4px;
  text-transform:uppercase;
}

.shepherd-element.fe-tour .shepherd-text{
  padding:8px 18px 14px;
  font-size:13px;
  line-height:1.6;
  color:#e6e6ea;
}
.shepherd-element.fe-tour .shepherd-text b{color:#e8c84a;font-weight:700}
.shepherd-element.fe-tour .shepherd-text em{color:#c4c4cc;font-style:normal}

/* Inline checklist used in the "setup three" step */
.shepherd-element.fe-tour .fe-tour-checklist{
  list-style:none;
  margin:6px 0 4px;
  padding:0;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
}
.shepherd-element.fe-tour .fe-tour-checklist li{
  padding:6px 0;
  display:flex;
  align-items:center;
  gap:8px;
  color:#8b8b94;
  transition:color 0.2s;
}
.shepherd-element.fe-tour .fe-tour-checklist li.done{color:#22c55e}
.shepherd-element.fe-tour .fe-tour-checklist li::before{
  content:"○";
  display:inline-block;
  width:14px;
  font-weight:700;
}
.shepherd-element.fe-tour .fe-tour-checklist li.done::before{
  content:"✓";
  color:#22c55e;
}

.shepherd-element.fe-tour .shepherd-footer{
  padding:6px 18px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.shepherd-element.fe-tour .shepherd-button{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:12px;
  border-radius:8px;
  padding:7px 14px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all 0.15s;
  margin:0;
}
.shepherd-element.fe-tour .shepherd-button.fe-primary{
  background:#c9a227;
  color:#08090d;
  border-color:#c9a227;
}
.shepherd-element.fe-tour .shepherd-button.fe-primary:hover{
  background:#e8c84a;
  border-color:#e8c84a;
}
.shepherd-element.fe-tour .shepherd-button.fe-primary:disabled{
  background:#3a3320;
  color:#6a5a20;
  border-color:#3a3320;
  cursor:not-allowed;
}
.shepherd-element.fe-tour .shepherd-button.fe-skip{
  background:transparent;
  color:#8b8b94;
  border:none;
  padding:7px 8px;
}
.shepherd-element.fe-tour .shepherd-button.fe-skip:hover{
  color:#f0f0f2;
}

/* Step counter "3 / 13" left of the buttons */
.shepherd-element.fe-tour .fe-tour-counter{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#71717a;
  margin-right:auto;
}

/* ============================================================
   FE-TOUR: Welcome + Closing centered cards
   Shepherd uses its own positioning - for centered/no-target
   steps we set attachTo: undefined and Shepherd centers it.
   We add a slightly larger feel for these "chapter" steps.
   ============================================================ */
.shepherd-element.fe-tour.fe-tour-center{
  max-width:420px;
}
.shepherd-element.fe-tour.fe-tour-center .shepherd-title{
  font-size:14px;
}
.shepherd-element.fe-tour.fe-tour-center .shepherd-text{
  font-size:14px;
  padding-top:10px;
}

/* Special closing-card flair - no border-top stripe, full gold border instead */
.shepherd-element.fe-tour.fe-tour-closing{
  border:1px solid #c9a227;
  background:linear-gradient(180deg,#12141b 0%,#0e1015 100%);
}
.shepherd-element.fe-tour.fe-tour-closing .shepherd-text{
  text-align:center;
  font-size:15px;
  line-height:1.6;
  color:#f0f0f2;
}
.shepherd-element.fe-tour.fe-tour-closing .shepherd-footer{
  justify-content:center;
}

/* ============================================================
   FE-TOUR: "Tour" relaunch button in the top nav-tabs row.
   Reuses .nav-tab class but adds an icon and gold pulse.
   ============================================================ */
.nav-tab.fe-tour-relaunch{
  position:relative;
  color:#c9a227;
  border-color:rgba(201,162,39,0.25);
}
.nav-tab.fe-tour-relaunch:hover{
  color:#e8c84a;
  background:rgba(201,162,39,0.08);
  border-color:rgba(201,162,39,0.4);
}
.nav-tab.fe-tour-relaunch::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:#c9a227;
  margin-right:6px;
  vertical-align:middle;
  box-shadow:0 0 6px rgba(201,162,39,0.7);
  animation:fe-tour-pulse 2.4s infinite;
}
@keyframes fe-tour-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.45;transform:scale(0.85)}
}

/* ============================================================
   FE-TOUR: Highlighted target - gold ring around the active
   element so the user knows exactly what to click.
   ============================================================ */
.shepherd-target.fe-tour-target{
  outline:2px solid #c9a227 !important;
  outline-offset:3px;
  border-radius:8px;
  box-shadow:0 0 0 4px rgba(201,162,39,0.18);
  transition:outline-color 0.2s,box-shadow 0.2s;
}

/* Hide tour relaunch button on small screens - mobile gets its own card */
@media(max-width:1023px){
  .nav-tab.fe-tour-relaunch{display:none}
}

/* ============================================================
   FE-TOUR: Attention overlay (rings + arrows over the chart)
   A single full-viewport SVG layer sits above the chart but below
   the Shepherd tooltip. Rings are absolutely-positioned divs (not
   SVG circles) so we can use box-shadow for the soft glow.
   pointer-events:none on the layer + each child so the user can
   still click chart, scroll, etc.
   ============================================================ */
.fe-tour-overlay{
  position:fixed;
  inset:0;
  z-index:10300;            /* above chart (default), below shepherd tooltip (10500) */
  pointer-events:none;
  overflow:hidden;
}
.fe-tour-overlay svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

/* Attention ring/spotlight - gold outline drawn over a bar/candle/button.
   Two flavors: .active = pulses + draws-on; .static = just sits there.
   FlowEntry gold-light (#e8c84a) - brighter than the chart's gold bars
   so the ring reads as separate from the bar it's highlighting. */
.fe-ring{
  position:absolute;
  border-radius:50%;
  border:3px solid #e8c84a;
  box-sizing:border-box;
  pointer-events:none;
  transform:translate(-50%,-50%);  /* center on its left/top coords */
  opacity:0;
}
.fe-ring.active{
  animation:fe-ring-pulse 1.4s ease-in-out infinite,
            fe-ring-in 0.35s ease-out forwards;
  box-shadow:0 0 0 6px rgba(232,200,74,0.18),
             0 0 22px rgba(232,200,74,0.55);
}
.fe-ring.static{
  opacity:0.85;
  border-color:rgba(232,200,74,0.85);
  box-shadow:0 0 0 4px rgba(232,200,74,0.12);
}
@keyframes fe-ring-in{
  from{opacity:0;transform:translate(-50%,-50%) scale(0.6)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes fe-ring-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);    box-shadow:0 0 0 6px rgba(232,200,74,0.18),0 0 22px rgba(232,200,74,0.55)}
  50%    {transform:translate(-50%,-50%) scale(1.06); box-shadow:0 0 0 14px rgba(232,200,74,0.05),0 0 36px rgba(232,200,74,0.85)}
}

/* Full-height vertical date-range highlight (steps 4-12).
   Spans the entire chart frame (price + every indicator pane) and covers
   ±3 days around the step's narrative date. Replaces the per-bar/per-candle
   ring + spotlight oval used previously, which suffered from Y-axis drift.
   .active = current step (gold-light, pulsing); .static = prior step (dim). */
.fe-date-rect{
  position:absolute;
  pointer-events:none;
  box-sizing:border-box;
  border-left:2px solid #c9a227;
  border-right:2px solid #c9a227;
  background:rgba(232,200,74,0.08);
  border-radius:2px;
  opacity:0;
  animation:fe-rect-in 0.35s ease-out forwards;
}
.fe-date-rect.active{
  background:rgba(232,200,74,0.13);
  border-color:#e8c84a;
  box-shadow:0 0 22px rgba(232,200,74,0.45),
             inset 0 0 28px rgba(232,200,74,0.18);
  animation:fe-rect-in 0.35s ease-out forwards,
            fe-rect-pulse 1.8s ease-in-out 0.35s infinite;
}
.fe-date-rect.static{
  background:rgba(232,200,74,0.05);
  border-color:rgba(232,200,74,0.55);
}
@keyframes fe-rect-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes fe-rect-pulse{
  0%,100%{
    background:rgba(232,200,74,0.13);
    box-shadow:0 0 22px rgba(232,200,74,0.45),inset 0 0 28px rgba(232,200,74,0.18);
  }
  50%{
    background:rgba(232,200,74,0.20);
    box-shadow:0 0 36px rgba(232,200,74,0.65),inset 0 0 36px rgba(232,200,74,0.26);
  }
}

/* Trend arrows - green for price-up, red for price-down.
   Drawn as SVG paths inside the overlay's <svg>. Animated draw-on. */
.fe-arrow{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:fe-arrow-draw 0.9s ease-out 0.3s forwards;
}
.fe-arrow.up{stroke:#22c55e}
.fe-arrow.down{stroke:#ef4444}
@keyframes fe-arrow-draw{
  to{stroke-dashoffset:0}
}

/* ============================================================
   FE-TOUR: Fixed-right card position (steps 4-12)
   Pin the Shepherd tooltip to the center-right of the viewport
   so it covers the Trades sidebar and leaves the chart unobstructed.
   We override Shepherd's popper-driven positioning with !important.
   ============================================================ */
.shepherd-element.fe-tour.fe-tour-fixed-right{
  position:fixed !important;
  top:50% !important;
  right:18px !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  max-width:340px;
  width:340px;
}
/* Hide the pointer arrow when pinned-right - it would point at nothing. */
.shepherd-element.fe-tour.fe-tour-fixed-right .shepherd-arrow{display:none}