/* Круги витрины: чем набраны киты и чем набран деск.
 *
 * Палитра — оттенки одного акцента, а не восемь разных цветов: правило деска
 * «один акцент на экран» держится и здесь, а восемь долек различаются
 * светлотой. Восьмой цвет — серый: он достаётся «прочему», и это не оттенок
 * акцента нарочно — остаток не имя, а сумма имён.
 */
.wl-pies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 0 0 20px;
}

.wl-pie {
  border: 1px solid rgb(138 148 140 / .18);
  border-radius: 0;
  padding: 14px 16px 16px;
  background: #0d110e;
}

.wl-pie-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.wl-pie-note { font-size: 11px; color: #8a948c; }

.wl-pie-body { display: flex; align-items: center; gap: 16px; }

.wl-pie-svg { width: 132px; height: 132px; flex: 0 0 132px; transform: rotate(-90deg); }

.wl-pie-track { fill: none; stroke: rgb(138 148 140 / .14); stroke-width: 14; }

.wl-pie-arc {
  fill: none;
  stroke-width: 14;
  transition: stroke-width .15s ease, opacity .15s ease;
  opacity: .78;
}

.wl-pie-arc.is-on { stroke-width: 18; opacity: 1; }

/* Подписи в центре не крутятся вместе с кругом. */
.wl-pie-mid,
.wl-pie-sub {
  transform: rotate(90deg);
  transform-origin: 60px 60px;
  font-variant-numeric: tabular-nums;
}

.wl-pie-mid { fill: #f4f6f4; font-size: 13px; font-weight: 700; }
.wl-pie-sub { fill: #8a948c; font-size: 11px; }

.wl-pie-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }

.wl-pie-key {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
  color: #c9d2cb;
  text-decoration: none;
  cursor: default;
}

a.wl-pie-key { cursor: pointer; }
a.wl-pie-key:hover .wl-pie-name,
a.wl-pie-key:focus-visible .wl-pie-name { color: #33ff66; }

.wl-pie-key.is-on .wl-pie-name { color: #f4f6f4; }

.wl-pie-dot { width: 9px; height: 9px; flex: 0 0 9px; }

.wl-pie-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wl-pie-pct { font-variant-numeric: tabular-nums; color: #8a948c; }

/* Оттенки одного акцента: от терминального зелёного вниз по светлоте. */
.wl-pie-c0 .wl-pie-dot, .wl-pie-c0.wl-pie-arc { background: #33ff66; stroke: #33ff66; }
.wl-pie-c1 .wl-pie-dot, .wl-pie-c1.wl-pie-arc { background: #2ae07f; stroke: #2ae07f; }
.wl-pie-c2 .wl-pie-dot, .wl-pie-c2.wl-pie-arc { background: #23c084; stroke: #23c084; }
.wl-pie-c3 .wl-pie-dot, .wl-pie-c3.wl-pie-arc { background: #1fa382; stroke: #1fa382; }
.wl-pie-c4 .wl-pie-dot, .wl-pie-c4.wl-pie-arc { background: #1c8674; stroke: #1c8674; }
.wl-pie-c5 .wl-pie-dot, .wl-pie-c5.wl-pie-arc { background: #1a6b62; stroke: #1a6b62; }
.wl-pie-c6 .wl-pie-dot, .wl-pie-c6.wl-pie-arc { background: #19524f; stroke: #19524f; }
.wl-pie-c7 .wl-pie-dot, .wl-pie-c7.wl-pie-arc { background: #1b3a3c; stroke: #1b3a3c; }
.wl-pie-c8 .wl-pie-dot, .wl-pie-c8.wl-pie-arc { background: #5a635c; stroke: #5a635c; }

@media (prefers-reduced-motion: reduce) {
  .wl-pie-arc { transition: none; }
}

@media (max-width: 520px) {
  .wl-pie-body { flex-direction: column; align-items: stretch; }
  .wl-pie-svg { align-self: center; }
}