/* web.css: Market Pulse on the Index website. A pulsing button in the header
   of every page opens the tracker full screen; tracker.html opens it straight
   away (the link for LinkedIn). Tokens map to the site's design system. */

.ipw-overlay{--ip-font:var(--font-body);--ip-display:var(--font-display);--ip-bg:var(--bg-page);--ip-raised:var(--bg-card);
  --ip-border:var(--border-subtle);--ip-text:var(--text-primary);--ip-mute:var(--text-secondary);--ip-faint:var(--text-muted);
  --ip-accent:var(--accent);--ip-on-accent:#04121F;
  /* Red, amber, green for the key factors: the same three hexes as the terminal pop-up (terminal.css). */
  --ip-red:#F65C6D;--ip-amber:#E0B341;--ip-green:#34D399;
  --ip-up:var(--up);--ip-down:var(--down);--ip-gas:#e0628f;--ip-elec:var(--accent-cyan);--ip-oil:#e0a458;--ip-lng:#a78bfa;
  position:fixed;inset:0;z-index:1000;overflow:hidden;overscroll-behavior:contain;
  background:radial-gradient(1200px 600px at 85% -10%,rgba(246,92,109,.08),transparent 60%),
             radial-gradient(900px 500px at 0% 0%,rgba(60,168,251,.07),transparent 55%),var(--bg-page);}
.ipw-overlay[hidden]{display:none;}
.ipw-overlay.opening{animation:ipw-open .7s cubic-bezier(.16,1,.3,1) both;}
.ipw-overlay.closing{animation:ipw-close .32s cubic-bezier(.7,0,.84,0) both;}
@keyframes ipw-open{from{clip-path:circle(0 at var(--ox,90%) var(--oy,40px));}to{clip-path:circle(160% at var(--ox,90%) var(--oy,40px));}}
@keyframes ipw-close{to{clip-path:circle(0 at var(--ox,90%) var(--oy,40px));opacity:.4;}}
html.ipw-lock,html.ipw-lock body{overflow:hidden;}

.ipw-close{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-2);border:1px solid var(--border-strong);
  background:rgba(255,255,255,.02);color:var(--text-primary);font:550 13px var(--font-body);cursor:pointer;}
.ipw-close:hover{border-color:var(--accent);color:var(--accent-soft);}
.ipw-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.ipw-cta{display:flex;gap:10px;flex-wrap:wrap;}

/* The header button: a pulsing red dot and the word Live. */
.ipw-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 11px;border-radius:20px;cursor:pointer;
  border:1px solid rgba(246,92,109,.4);background:rgba(246,92,109,.08);color:var(--text-primary);
  font:600 13px var(--font-body);white-space:nowrap;transition:background .18s,border-color .18s;}
.ipw-pill:hover{background:rgba(246,92,109,.16);border-color:var(--down);}
.ipw-pill i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--down);flex:0 0 8px;}
.ipw-pill i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--down);animation:ip-ping 1.6s cubic-bezier(0,0,.2,1) infinite;}
@keyframes ip-ping{0%{transform:scale(1);opacity:.75;}80%,100%{transform:scale(3.2);opacity:0;}}
/* Phones: the bottom bar already offers Choose a tier, so the header's Get started makes room for this button. */
@media (max-width:560px){.nav__actions .btn--primary{display:none;}}
@media (max-width:340px){.ipw-pill .ipw-long{display:none;}}

/* tracker.html's own page, under the overlay. */
.ipw-page{padding-top:var(--space-9);padding-bottom:var(--space-8);}
.ipw-page .btn{margin-top:var(--space-5);}

@media (prefers-reduced-motion:reduce){.ipw-overlay.opening,.ipw-overlay.closing,.ipw-pill i::after{animation:none;}}