/* charts — data via inline custom properties: --v (0-100) for bars/ring,
   --v1..--v6 (percent) for donut segments, --sv (share) for stacked segments */
@property --v { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --sv { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v4 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v5 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --v6 { syntax: "<number>"; inherits: true; initial-value: 0; }

.s1{--m-c:var(--m-c1)}
.s2{--m-c:var(--m-c2)}
.s3{--m-c:var(--m-c3)}
.s4{--m-c:var(--m-c4)}
.s5{--m-c:var(--m-c5)}
.s6{--m-c:var(--m-c6)}

.chart-bars {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  height: var(--m-chart-h);
}
.bar {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: .3rem;
  justify-items: center;
}
.bar > i {
  position: relative;
  align-self: end;
  width: 100%;
  height: calc(var(--v) * 1%);
  background: var(--m-c, var(--m-c1));
  border-radius: var(--m-r-sm) var(--m-r-sm) 0 0;
}
.bar > i[data-v]::after {
  content: attr(data-v);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -3px);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--m-fg-2);
}
.bar > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9375rem;
  color: var(--m-fg-3);
}

.bar.stacked > i {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  background: transparent;
}
.bar.stacked > i > u {
  flex: var(--sv, 1) 1 0;
  min-height: 0;
  background: var(--m-c, var(--m-c1));
}

.chart-hbars { display: flex; flex-direction: column; gap: .55rem; }
.hbar {
  display: grid;
  grid-template-columns: minmax(3.5rem, 9rem) 1fr auto;
  align-items: center;
  gap: .65rem;
}
.hbar > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .9375rem;
  color: var(--m-fg-2);
}
.hbar > i {
  position: relative;
  display: block;
  height: 1rem;
  border-radius: var(--m-r-full);
  background: var(--m-surface);
}
.hbar > i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--v) * 1%);
  border-radius: inherit;
  background: var(--m-c, var(--m-c1));
}
.hbar > b {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-fg-2);
  font-variant-numeric: tabular-nums;
}

.donut {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--m-donut-size, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    var(--m-c1) 0 calc(var(--v1) * 1%),
    var(--m-c2) 0 calc((var(--v1) + var(--v2)) * 1%),
    var(--m-c3) 0 calc((var(--v1) + var(--v2) + var(--v3)) * 1%),
    var(--m-c4) 0 calc((var(--v1) + var(--v2) + var(--v3) + var(--v4)) * 1%),
    var(--m-c5) 0 calc((var(--v1) + var(--v2) + var(--v3) + var(--v4) + var(--v5)) * 1%),
    var(--m-c6) 0 calc((var(--v1) + var(--v2) + var(--v3) + var(--v4) + var(--v5) + var(--v6)) * 1%),
    var(--m-border) 0
  );
}
.donut::before, .ring::before {
  content: "";
  position: absolute;
  inset: var(--m-donut-w, 1.4rem);
  border-radius: 50%;
  background: var(--m-bg);
}
.donut > *, .ring > * { position: relative; z-index: 1; }
.donut > b, .ring > b { font-size: 1.35rem; }
.donut.pie::before { content: none; }

.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--m-donut-size, 10rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--m-c, var(--m-c1)) calc(var(--v) * 1%), var(--m-border) 0);
}

.spark {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: var(--m-spark-h, 3rem);
}
.spark > i {
  flex: 1;
  min-width: 0;
  height: calc(var(--v) * 1%);
  border-radius: 1px;
  background: var(--m-c, var(--m-c1));
}

.legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .9375rem; color: var(--m-fg-2); }
.legend > span { display: inline-flex; align-items: center; gap: .4em; }
.legend > span > i { width: .8em; height: .8em; border-radius: 3px; background: var(--m-c, var(--m-fg-3)); flex-shrink: 0; }
.legend-v { flex-direction: column; gap: .45rem; }

.bar, .bar.stacked > i > u, .hbar, .ring, .spark > i, .donut {
  transition: --v .45s ease, --sv .45s ease, --v1 .45s ease, --v2 .45s ease, --v3 .45s ease, --v4 .45s ease, --v5 .45s ease, --v6 .45s ease;
}
@media (prefers-reduced-motion: reduce) {
  .bar, .bar.stacked > i > u, .hbar, .ring, .spark > i, .donut { transition: none; }
}