/**
 * Донат долей (ТЗ, часть 4 §21).
 *
 * Кольцо и легенда стоят рядом на широком экране и друг под другом
 * на телефоне. Цвета — только из палитры `--donut-*`: HEX в компонент
 * не попадает, иначе диаграмма однажды разойдётся с остальным порталом.
 */

.donut {
    display: flex;
    align-items: center;
    gap: var(--space-7);
    margin: 0;
}

.donut__chart {
    position: relative;
    flex: 0 0 auto;
    width: 180px;
    height: 180px;
}

.donut__chart svg {
    width: 100%;
    height: 100%;
    /* Первый сегмент должен начинаться сверху, а не справа. */
    transform: rotate(-90deg);
}

.donut__track {
    stroke: var(--bg-soft);
}

.donut__slice {
    transition: opacity var(--t-fast) var(--ease);
}

.donut__slice--0 { stroke: var(--donut-0); }
.donut__slice--1 { stroke: var(--donut-1); }
.donut__slice--2 { stroke: var(--donut-2); }
.donut__slice--3 { stroke: var(--donut-3); }
.donut__slice--4 { stroke: var(--donut-4); }
.donut__slice--5 { stroke: var(--donut-5); }

.donut__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}

.donut__center-value {
    font-size: 22px;
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-heading);
    color: var(--text-primary);
}

.donut__center-note {
    font-size: var(--fs-micro);
    color: var(--text-muted);
}

.donut__legend {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.donut__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-small);
}

.donut__marker {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.donut__marker--0 { background: var(--donut-0); }
.donut__marker--1 { background: var(--donut-1); }
.donut__marker--2 { background: var(--donut-2); }
.donut__marker--3 { background: var(--donut-3); }
.donut__marker--4 { background: var(--donut-4); }
.donut__marker--5 { background: var(--donut-5); }

.donut__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.donut__share {
    flex: 0 0 auto;
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .donut {
        flex-direction: column;
        gap: var(--space-5);
    }

    .donut__chart {
        width: 156px;
        height: 156px;
    }

    .donut__legend {
        width: 100%;
    }
}