.ch-grid-cards {
  align-items:stretch;
  display:grid;
  gap:1rem;
  grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
  margin-bottom:1rem;
}

.ch-card-side,.ch-card-wide {
  margin-bottom:0!important;
}

.ch-card-wide {
  min-width:0;
}

.ch-card-side {
  display:flex;
  flex-direction:column;
  min-width:0;
}

@media (max-width:980px) {
  .ch-grid-cards {
    grid-template-columns:1fr;
  }
}

.chart-wrap {
  margin-top:.5rem;
  min-height:150px;
  width:100%;
}

.ch-svg {
  display:block;
  height:auto;
  overflow:visible;
  width:100%;
}

.ch-grid {
  stroke:rgba(232,67,95,.16);
  stroke-dasharray:3 5;
  stroke-width:1;
}

.ch-tick {
  fill:var(--muted2);
}

.ch-tick,.ch-x {
  font-family:var(--font);
  font-size:11px;
}

.ch-x {
  fill:var(--muted);
}

.ch-line {
  animation:chDraw .5s cubic-bezier(.4,0,.2,1) forwards;
  fill:none;
  filter:drop-shadow(0 2px 6px rgba(232,67,95,.45));
  stroke:#e8435f;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.5;
}

@keyframes chDraw {
  to {
    stroke-dashoffset:0;
  }
}

.ch-area {
  animation:chFade .3s ease .12s forwards;
  opacity:0;
}

@keyframes chFade {
  to {
    opacity:1;
  }
}

.ch-dot {
  fill:#fff;
  stroke:#e8435f;
  stroke-width:2.5;
  transition:r .15s;
}

.ch-hit {
  cursor:pointer;
  fill:transparent;
}

.ch-hit:hover+.ch-hit,.ch-svg:hover .ch-dot {
  r:5.5;
}

.chart-donut {
  align-items:center;
  display:flex;
  flex:1;
  gap:1rem;
  margin-top:.6rem;
}

.ch-ringbox {
  flex:none;
  position:relative;
}

.ch-ring,.ch-ringbox {
  height:140px;
  width:140px;
}

.ch-ring {
  display:block;
  transform:rotate(-90deg);
}

.ch-track {
  fill:none;
  stroke:hsla(0,0%,100%,.07);
  stroke-width:13;
}

body.light .ch-track {
  stroke:rgba(142,15,42,.08);
}

.ch-seg {
  animation:chSweep .4s cubic-bezier(.3,0,.2,1) both;
  fill:none;
  stroke-linecap:butt;
  stroke-width:13;
  transition:opacity .15s,stroke-width .15s;
}

@keyframes chSweep {
  0% {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

.ch-seg:hover {
  opacity:.92;
  stroke-width:16;
}

.ch-center {
  display:grid;
  inset:0;
  line-height:1.25;
  place-content:center;
  pointer-events:none;
  position:absolute;
  text-align:center;
}

.ch-center b {
  color:var(--text);
  font-size:22px;
  font-weight:800;
}

.ch-center span {
  color:var(--muted);
  font-size:10px;
}

.ch-legend {
  flex:1;
  flex-direction:column;
  list-style:none;
  margin:0;
  padding:0;
}

.ch-legend,.ch-legend li {
  display:flex;
  gap:.45rem;
  min-width:0;
}

.ch-legend li {
  align-items:center;
  font-size:.82rem;
}

.ch-dotkey {
  border-radius:3px;
  flex:none;
  height:10px;
  width:10px;
}

.ch-leglabel {
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ch-legval {
  font-weight:800;
  margin-inline-start:auto;
}

.ch-legpct {
  color:var(--muted2);
  font-size:.74rem;
  min-width:3.2ch;
  text-align:end;
}

.chart-empty {
  color:var(--muted);
  padding:2.4rem 1rem;
  text-align:center;
}

@media (max-width:520px) {
  .chart-wrap {
    min-height:130px;
  }
  .ch-xalt {
    display:none;
  }
  .ch-tick,.ch-x {
    font-size:12px;
  }
  .chart-donut {
    align-items:stretch;
    flex-direction:column;
    gap:.7rem;
  }
  .ch-ring,.ch-ringbox {
    height:128px;
    width:128px;
  }
  .ch-ringbox {
    align-self:center;
  }
  .ch-legend {
    gap:.5rem;
  }
  .ch-legend li {
    font-size:.86rem;
  }
}

@media (max-width:380px) {
  .ch-ring,.ch-ringbox {
    height:112px;
    width:112px;
  }
  .ch-center b {
    font-size:20px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .ch-line {
    animation:none;
    stroke-dashoffset:0;
  }
  .ch-area,.ch-seg {
    animation:none;
    opacity:1;
  }
}