/* ChartPulse v2 · "Odds, not opinions" layer (owner, 5 Oct 2026): sky header with a live pulse line,
   probability dial + odds rings on the Bias Desk. Loaded after cp.css. */
:root{--sky:#8FD3FF;--sky-2:#4FA8E8;--sky-deep:#0B2338}

/* header: light sky glass over the dark page, with a heartbeat line running along its lower edge */
.site-head{background:linear-gradient(180deg,rgba(143,211,255,.24),rgba(79,168,232,.12) 70%,rgba(11,35,56,.6));
  border-bottom:1px solid rgba(143,211,255,.22);box-shadow:0 8px 30px -18px rgba(79,168,232,.55)}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;pointer-events:none;opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='14' viewBox='0 0 240 14'%3E%3Cpath d='M0 12 H70 L78 12 L84 3 L90 13 L96 6 L100 12 H240' fill='none' stroke='%238FD3FF' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0/240px 14px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  animation:od-pulse 9s linear infinite}
@keyframes od-pulse{to{background-position:240px 0}}
.site-head .logo svg{filter:drop-shadow(0 0 10px rgba(143,211,255,.45))}

/* probability dial */
.od-dial{position:relative;max-width:360px;margin:6px auto 2px}
.od-dial svg{display:block;width:100%;overflow:visible}
.od-track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:16;stroke-linecap:round}
.od-arc{fill:none;stroke-width:8;stroke-linecap:round;opacity:.9}
.od-zone{fill:none;stroke:rgba(143,211,255,.35);stroke-width:16;stroke-dasharray:2 4}
.od-ticks line{stroke:rgba(255,255,255,.28);stroke-width:1.5}
.od-needle{transform-origin:110px 104px}
.od-needle line{stroke:#EAF6FF;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(143,211,255,.8))}
.od-needle circle{fill:var(--sky-deep);stroke:var(--sky);stroke-width:2.5}
.od-read{text-align:center;line-height:1.15;margin-top:-4px}
.od-read b{display:block;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:#EAF6FF}
.od-read span{font-size:12px;color:var(--ink-3,#8b8b94)}
.od-ends{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3,#8b8b94);margin-top:2px}
.od-ends span:nth-child(2){color:rgba(143,211,255,.75)}

/* odds rings: what history says about setups like this one */
.od-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px}
.od-ring{position:relative;margin:0;padding:12px 8px 10px;border-radius:14px;background:rgba(143,211,255,.04);border:1px solid rgba(143,211,255,.12);text-align:center}
.od-ring svg{width:72px;height:72px;transform:rotate(-90deg)}
.od-r0{fill:none;stroke:rgba(255,255,255,.07);stroke-width:7}
.od-r1{fill:none;stroke-width:7;stroke-linecap:round}
.od-ring.good .od-r1{stroke:#22AB94}.od-ring.even .od-r1{stroke:#F4B740}.od-ring.bad .od-r1{stroke:#F7525F}
.od-rv{position:absolute;left:0;right:0;top:38px;font-size:17px;font-variant-numeric:tabular-nums;color:#EAF6FF}
.od-ring figcaption{font-size:12px;line-height:1.3;color:var(--ink-2,#c4c4cc);margin-top:4px}
.od-ring figcaption small{display:block;color:var(--ink-3,#8b8b94);font-size:11px}
.od-ring.na{opacity:.55}
@media(max-width:520px){.od-rings{gap:6px}.od-ring svg{width:58px;height:58px}.od-rv{top:32px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.site-head::after{animation:none}}

/* ---------- depth layer: 3D tilt, extruded verdict, isometric histogram, flip-in rings, flowing dial ---------- */
.od-3d{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.od-3d::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(143,211,255,.10),transparent 45%)}
.od-3d:hover::before{opacity:1}
.od-3d .dk-bias{transform:translateZ(40px);text-shadow:0 1px 0 rgba(0,0,0,.35),0 2px 0 rgba(0,0,0,.3),0 3px 0 rgba(0,0,0,.25),0 4px 0 rgba(0,0,0,.2),0 14px 28px currentColor;
  animation:od-float 6s ease-in-out infinite}
@keyframes od-float{50%{transform:translateZ(40px) translateY(-3px)}}
.od-3d .od-dial{transform:translateZ(28px)}
.od-3d .od-rings{transform:translateZ(18px);perspective:600px}
.od-ring{transform-origin:50% 100%;animation:od-flip .9s cubic-bezier(.2,.9,.25,1.2) both}
.od-ring:nth-child(2){animation-delay:.12s}.od-ring:nth-child(3){animation-delay:.24s}
@keyframes od-flip{from{opacity:0;transform:rotateX(75deg) translateY(10px)}}
.od-ring.good{box-shadow:inset 0 0 24px -12px #22AB94}.od-ring.bad{box-shadow:inset 0 0 24px -12px #F7525F}

/* particles riding the dial arc */
.od-flow circle{fill:#EAF6FF;filter:drop-shadow(0 0 4px #8FD3FF)}

/* isometric histogram: each bar gets a lit top face and a shaded side face */
.dk-hist.od-iso{perspective:none;gap:10px;height:96px;padding-right:8px}
.dk-hist.od-iso i{position:relative;border-radius:0;opacity:1;overflow:visible;
  background:linear-gradient(90deg,var(--c) 0 100%)!important;box-shadow:inset -6px 0 0 rgba(0,0,0,.18)}
.dk-hist.od-iso i::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:var(--c);filter:brightness(1.35);
  transform:skewX(-45deg);transform-origin:0 100%}
.dk-hist.od-iso i::after{content:"";position:absolute;top:-6px;right:-6px;width:6px;bottom:0;background:var(--c);filter:brightness(.6);
  transform:skewY(-45deg);transform-origin:0 0}
.dk-hist.od-iso i b{position:absolute;left:0;right:0;top:-24px;text-align:center;font:600 11px/1 var(--f-mono,monospace);color:var(--ink-2,#c4c4cc);opacity:0;transition:opacity .4s .9s}
.dk-hist.od-iso.on i b{opacity:1}

/* score bars: a light sweeps across once they have grown */
.dk-tr i{overflow:hidden}
.dk-tr i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:od-sweep 1.2s ease 1.4s 1 both}
@keyframes od-sweep{to{transform:translateX(100%)}}

@media(prefers-reduced-motion:reduce){.od-3d,.od-3d .dk-bias,.od-ring,.dk-tr i::after{animation:none!important;transition:none!important;transform:none!important}}