/* Fraud risk, drawn (fraud-viz.js): the curve, the meter and the sparkline. */

/* the score over a call */
.sfv{display:block;overflow:visible;touch-action:pan-y}
.sfv-g{stroke:rgba(203,213,255,.10);stroke-width:1;stroke-dasharray:3 5}
.sfv-base{stroke:rgba(203,213,255,.16);stroke-width:1}
.sfv-bl{font:600 10.5px 'Geist',system-ui,sans-serif;letter-spacing:.02em;opacity:.72}
.sfv-ax{fill:#6B7396;font:500 10.5px 'Geist',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.sfv-glow{fill:none;stroke-width:8;opacity:.16;stroke-linecap:round;stroke-linejoin:round}
.sfv-line{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* a finished call opened afresh: its line draws in, then the rest */
.sfv.intro .sfv-line{stroke-dasharray:1;animation:sfvDraw 1.15s cubic-bezier(.45,0,.2,1) both}
.sfv.intro .sfv-area{animation:sfvFade .9s .25s ease both}
.sfv.intro .sfv-glow{animation:sfvFade .9s .4s ease both}
.sfv.fresh{animation:sfvFade .4s ease both}
@keyframes sfvDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sfvFade{from{opacity:0}}
/* a dot where the score changed */
.sfv .pd{stroke:#0E0B1C;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:sfvPop .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes sfvPop{from{transform:scale(0)}}

/* the head, on the end of the line while the call is on, with the score in it */
.sfv-hdi{transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.sfv.ended .sfv-hdi{transform:scale(.3);opacity:0}
.sfv-ring{fill:#0E0B1C;stroke-width:2.5}
.sfv-hn{fill:#fff;font:700 11px 'Geist',system-ui,sans-serif;font-variant-numeric:tabular-nums}

/* over: the peak, a dotted line in the colour it reached with everything
   under it filled (drawn out from the peak by fraud-viz.js) */
.sfv-pl{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:0 5.5}
.sfv-pr{opacity:.22;transform-box:fill-box;transform-origin:center;animation:sfvPop .45s cubic-bezier(.34,1.56,.64,1) both}
.sfv-pt{font:650 11px 'Geist',system-ui,sans-serif;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:#0E0B1C;stroke-width:4px;stroke-linejoin:round;animation:sfvFade .4s both}

/* the meter: the whole scale, the score as a knob on it */
.sfm{position:relative;height:16px;display:flex;align-items:center}
.sfm-t{position:relative;flex:1;height:8px;border-radius:99px;overflow:hidden;
  background:linear-gradient(90deg,#34D399 0%,#A3E635 18%,#FBBF24 34%,#F97316 62%,#F43F5E 82%,#E11D48 100%)}
.sfm-t::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
/* past the score the scale dims, so the filled part reads as the score */
.sfm-fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;box-shadow:0 0 0 999px rgba(10,8,22,.55);clip-path:inset(0 -999px 0 0);
  animation:sfmGrow .9s cubic-bezier(.16,1,.3,1) both}
@keyframes sfmGrow{from{width:0}}
.sfm-k{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px var(--k),0 0 18px 2px var(--k),0 2px 6px rgba(0,0,0,.5);animation:sfmKnob .9s cubic-bezier(.16,1,.3,1) both}
@keyframes sfmKnob{from{left:0}}
.sfm-pk{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;border-radius:2px;background:rgba(255,255,255,.7)}

/* a trend in a list row */
.sfs{display:block;overflow:visible}

/* a picture of a finished call (opts.still): nothing moves in */
.sfv.still .pd,.sfv.still .sfv-pr,.sfv.still .sfv-pt{animation:none}

@media (prefers-reduced-motion:reduce){
  .sfv,.sfv-line,.sfv-glow,.sfv-area,.sfv .pd,.sfv-pr,.sfv-pt,.sfm-fill,.sfm-k{animation:none}
  .sfv-hdi{transition:none}
}