/* Стекло остаётся неподвижным: перспектива применяется только к диаграмме.
   Благодаря этому текст, ссылки и backdrop-filter сохраняют чёткость. */
.chart-stage { position: relative; perspective: 850px; perspective-origin: 50% 50%; isolation: isolate; --chart-hover-scale: 1.075; }
.chart-stage--bars { width: 100%; }
.chart-stage--donut { width: var(--chart-size, 180px); max-width: 100%; flex: 0 0 auto; margin-block: 20px; --chart-hover-scale: 1.2; }
.chart-plane { transform-origin: center; transform: none; transition: transform .7s cubic-bezier(.2, .85, .2, 1), filter .7s ease; }
.chart-svg { display: block; max-width: 100%; }
.chart-stage--donut .chart-svg { width: 100%; height: auto; }
.chart-card.chart-motion-ready { transition: border-color .5s ease, box-shadow .65s cubic-bezier(.2, .85, .2, 1); }
.chart-card.chart-motion-ready::after {
  background: radial-gradient(280px circle at var(--chart-light-x, 50%) var(--chart-light-y, 30%), rgba(226, 235, 210, .13), transparent 72%);
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
.chart-depth { opacity: 0; transform: translate(0, 0); filter: brightness(.55) saturate(.9); pointer-events: none; transition: opacity .5s ease, transform .65s cubic-bezier(.2, .85, .2, 1); }
.chart-mark { transition: filter .25s ease, opacity .25s ease; }
.donut-seg .chart-mark { transform: translate(0, 0); transition: transform .45s cubic-bezier(.2, .85, .2, 1), filter .25s ease, opacity .25s ease; }
/* A stable hit area keeps the pointer on a slice while its visible face lifts. */
.chart-hit { fill: none; stroke: transparent; pointer-events: stroke; }
.chart-sector { stroke-width: var(--chart-stroke); transition: stroke-width .4s cubic-bezier(.2, .85, .2, 1); }
.chart-selection-marker { opacity: 0; pointer-events: none; transition: none; }
.donut-seg.is-chart-selected .chart-sector { stroke-width: var(--chart-stroke-active); }
.donut-seg.is-chart-selected .chart-selection-marker { opacity: 1; transition: opacity .12s ease; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .chart-card.chart-motion-ready:is(.is-chart-hovered, .is-chart-focused) {
    border-color: var(--accent-border);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .6), 0 3px 12px rgba(0, 0, 0, .12), inset 0 1px 0 var(--glass-highlight);
  }
  .chart-card.chart-motion-ready:is(.is-chart-hovered, .is-chart-focused)::after { opacity: 1; }
  .chart-card:is(.is-chart-hovered, .is-chart-focused) .chart-plane {
    transform: translateY(-5px) rotateX(var(--chart-rx, 5deg)) rotateY(var(--chart-ry, -5deg)) scale(var(--chart-hover-scale));
    filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .24));
  }
  .chart-card.is-chart-hovered .chart-plane { transition-duration: .3s, .65s; }
  .donut-seg.is-chart-selected .chart-mark { transform: translate(var(--chart-pop-x, 0px), var(--chart-pop-y, 0px)); }
  .chart-card:is(.is-chart-hovered, .is-chart-focused) .chart-depth { opacity: .85; transform: translate(0, 5px); }
  .chart-clickable:is(:hover, :focus-visible) .chart-mark { filter: brightness(1.13) drop-shadow(0 2px 2px rgba(0, 0, 0, .16)); }
  [data-theme="light"] .chart-card.chart-motion-ready:is(.is-chart-hovered, .is-chart-focused) {
    box-shadow: 0 20px 44px -24px rgba(36, 65, 44, .35), 0 4px 14px rgba(36, 65, 44, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
  }
  [data-theme="light"] .chart-card:is(.is-chart-hovered, .is-chart-focused) .chart-plane { filter: drop-shadow(0 12px 10px rgba(36, 65, 44, .17)); }
}
.chart-card .donut-seg:hover { opacity: 1; }
.chart-card.has-chart-selection .chart-mark { opacity: .28; filter: saturate(.55); }
.chart-card.has-chart-selection .is-chart-selected .chart-mark { opacity: 1; filter: brightness(1.18) drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.chart-card.has-chart-selection .chart-depth { opacity: .12; }
.chart-card.has-chart-selection .is-chart-selected .chart-depth { opacity: .7; }
.chart-card .legend-row { padding: 3px 4px; margin: -3px -4px; border-radius: 4px; transition: opacity .25s ease, color .25s ease, background .25s ease, box-shadow .25s ease; }
.chart-card .simple-donut .simple-legend {
  max-width: 100%; max-height: 290px; min-width: 0;
  overflow-y: auto; overflow-x: hidden; padding: 6px; margin: -6px;
  overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: var(--border-glass-strong) transparent;
}
.chart-card.has-chart-selection .legend-row:not(.is-chart-selected) { opacity: .42; }
.chart-card .legend-row.is-chart-selected { color: var(--text-primary); background: var(--accent-soft); box-shadow: 0 0 0 5px var(--accent-soft); }
.chart-tooltip {
  position: absolute; z-index: 5;
  left: var(--chart-tip-x, 12px); top: var(--chart-tip-y, 48px);
  width: max-content; max-width: min(280px, calc(100% - 24px));
  padding: 10px 13px; border-radius: 12px;
  background: var(--surface-solid); border: 1px solid var(--border-glass-strong);
  color: var(--text-primary); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  font-size: 12px; line-height: 1.5; font-weight: 550;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .18s ease, transform .25s ease, visibility .18s;
  pointer-events: none; overflow-wrap: anywhere;
}
.chart-tooltip.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
/* An empty tooltip must never paint its rounded shell, even during a transition. */
.chart-tooltip:empty { opacity: 0; visibility: hidden; transition: none; }

/* Each chart starts once its drawing area enters the viewport. Separate SVG
   layers let entrance, selection and the pointer tilt run without collisions. */
@media (prefers-reduced-motion: no-preference) {
  .chart-stage.chart-enter-ready .chart-bar {
    transform: scaleY(0);
    transform-origin: center bottom;
    transform-box: fill-box;
  }
  .chart-stage.chart-enter-ready.is-chart-visible .chart-bar {
    animation: chart-column-rise 1s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--bi, 0) * 55ms);
  }
  .chart-stage.chart-enter-ready .chart-ring-sweep { stroke-dashoffset: 1; }
  .chart-stage.chart-enter-ready.is-chart-visible .chart-ring-sweep {
    animation: chart-ring-draw 1.35s cubic-bezier(.45, 0, .2, 1) both;
  }
  .chart-stage.chart-enter-ready .chart-center-label { opacity: 0; }
  .chart-stage.chart-enter-ready.is-chart-visible .chart-center-label {
    animation: chart-total-appear .8s cubic-bezier(.22, 1, .36, 1) .15s both;
  }
}
@keyframes chart-column-rise {
  from { transform: scaleY(0); opacity: .35; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes chart-ring-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes chart-total-appear {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.chart-stage.chart-enter-skip .chart-bar,
.chart-stage.chart-enter-skip .chart-ring-sweep,
.chart-stage.chart-enter-skip .chart-center-label { animation: none !important; }
.chart-stage.chart-enter-skip .chart-bar,
.chart-stage.chart-enter-skip .chart-center-label { opacity: 1 !important; transform: none !important; }
.chart-stage.chart-enter-skip .chart-ring-sweep { stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .chart-plane, .chart-depth, .chart-mark, .chart-sector, .chart-selection-marker, .chart-tooltip, .chart-card .legend-row, .chart-card.chart-motion-ready, .chart-card.chart-motion-ready::after { transition: none !important; }
  .chart-plane { transform: none !important; filter: none !important; }
  .chart-depth { opacity: 0 !important; transform: none !important; }
  .chart-tooltip { transform: none !important; }
  .chart-bar, .chart-ring-sweep, .chart-center-label { animation: none !important; }
  .chart-bar, .chart-center-label { opacity: 1 !important; transform: none !important; }
  .chart-ring-sweep { stroke-dashoffset: 0 !important; }
}