/* Load after rankings.css. The chart has no toolbar, legend or new visible copy. */
/* The live chart is the hero's backdrop: it fills the whole hero behind the
   copy, and hero-live.js fades it where it runs under the text. */
.hero-chart.hero-live {
  --hero-dot-ring:#fff;
  --hero-pulse-inner:34%;
  --hero-pulse-crest:85%;
  position:absolute;
  inset:0;
  z-index:1;
  overflow:visible
}

.hero-live-svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none
}

.hero-live-labels {
  position:absolute;
  inset:0;
  pointer-events:none
}

.hero-ccu-card {
  position:absolute;
  left:var(--hero-label-left);
  width:var(--hero-label-width);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 14px;
  border:1px solid var(--glass-edge);
  border-radius:14px;
  background:var(--glass-fill);
  box-shadow:var(--glass-highlight),0 10px 28px -18px #0f224840;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  pointer-events:auto;
  color:var(--ink);
  transition:border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)
}

.hero-ccu-card:hover {
  border-color:var(--glass-edge-strong)
}

.hero-ccu-number {
  display:block;
  font-size:21px;
  line-height:1.15;
  letter-spacing:-.03em;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.hero-ccu-caption {
  display:block;
  font-size:11px;
  line-height:1.35;
  letter-spacing:-.005em;
  font-weight:500;
  margin-top:3px;
  white-space:nowrap;
  color:var(--text-3)
}

/* While the graph is current (.is-current: its leader's line runs unbroken up
   to now, as hero-live.js judges it), the live endpoint is marked by a still
   halo, and a soft ring in the leader's colour also grows from its dot and
   fades, once every 2.4 s, like a news ticker's live dot. hero-live.js keeps
   the ring out of the drawing, on the leader's latest point, and it lies
   beneath the drawing, so the dot and the lines are drawn over it. Transform
   and opacity only, on this one element, so browsers move it without
   repainting. With reduced motion it never moves, and the still halo stays
   alone. */
.hero-live-halo {
  opacity:0;
  transition:opacity var(--t-base) var(--ease-out)
}

.hero-live.is-current .hero-live-halo {
  opacity:.16
}

.hero-live-pulse {
  position:absolute;
  z-index:-1;
  translate:-50% -50%;
  border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,currentColor var(--hero-pulse-inner),transparent) 50%,color-mix(in srgb,currentColor var(--hero-pulse-crest),transparent) 82%,transparent);
  opacity:0;
  pointer-events:none
}

@media(prefers-reduced-motion:no-preference) {
  .hero-live.is-current .hero-live-pulse {
    animation:hero-live-pulse 2.4s cubic-bezier(.22,.61,.36,1) infinite
  }
}

@keyframes hero-live-pulse {
  0% {
    opacity:1;
    transform:scale(.36)
  }
  80%,100% {
    opacity:0;
    transform:scale(1)
  }
}

[data-theme=dark] .hero-chart.hero-live {
  --hero-dot-ring:#eef3fb;
  --hero-pulse-inner:45%;
  --hero-pulse-crest:100%
}

[data-theme=dark] .hero-ccu-card {
  box-shadow:var(--glass-highlight),0 14px 30px -18px #000000b3
}

@media(max-width:1220px) {
  .hero-ccu-card {
    padding-inline:10px
  }
  .hero-ccu-number {
    font-size:19px
  }
  .hero-ccu-caption {
    font-size:9px
  }
}

@media(max-width:980px) and (min-width:861px) {
  .hero-ccu-number {
    font-size:17px
  }
  .hero-ccu-caption {
    font-size:8px
  }
}

@media(max-width:860px) {
  .hero.hero-has-live {
    height:auto;
    display:grid;
    gap:26px;
    margin-bottom:26px
  }
  .hero.hero-has-live .hero-copy {
    width:100%;
    padding-top:22px
  }
  .hero-chart.hero-live {
    position:relative;
    inset:auto;
    width:100%;
    height:245px
  }
  .hero-ccu-number {
    font-size:20px
  }
  .hero-ccu-caption {
    font-size:9px
  }
}

@media(max-width:420px) {
  .hero-chart.hero-live {
    height:220px
  }
  .hero-ccu-card {
    padding-inline:10px;
    border-radius:11px
  }
  .hero-ccu-number {
    font-size:17px;
    letter-spacing:-.6px
  }
  .hero-ccu-caption {
    font-size:8px;
    letter-spacing:-.2px
  }
}