/*
    THE LOSS DONUT'S OWN STYLESHEET.

    Everything Components/Shared/LossDonutChart.razor needs and nothing else.

    SIX TONES, AND THE RING DRAWS NO MORE SLICES THAN IT HAS. Six blues against thirteen loss
    categories give two adjacent wedges one colour and two legend swatches nobody can tell apart, so
    the tail is gathered once into "Everything else (n)" and the ring and the list are drawn from
    that one list. The slice and swatch modifiers are numbered to match, which is why they stop
    at five.

    THE LEGEND IS A BLOCK BESIDE THE RING, never a row justified to the widget's edge: on a
    full-width proposal box that puts a percentage half a page from the name it belongs to.

    WHAT IT DOES NOT OWN. .sv-chart and .sv-measured are utilities and stay in utilities.css.
*/

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

.sv-donut__svg {
  width: 200px;
  height: 200px;
  flex: 0 0 auto;
}

/* Six data tones in one family, not six brand colours. The blues are DATA - the
   same rule the canvas follows - and keeping them in one family stops a slice
   reading as "the amber one", which would imply an emphasis nobody chose. */
.sv-donut__slice--0, .sv-donut__swatch--0 { fill: var(--sv-loss-1); background: var(--sv-loss-1); }
.sv-donut__slice--1, .sv-donut__swatch--1 { fill: var(--sv-loss-2); background: var(--sv-loss-2); }
.sv-donut__slice--2, .sv-donut__swatch--2 { fill: var(--sv-loss-3); background: var(--sv-loss-3); }
.sv-donut__slice--3, .sv-donut__swatch--3 { fill: var(--sv-loss-4); background: var(--sv-loss-4); }
.sv-donut__slice--4, .sv-donut__swatch--4 { fill: var(--sv-loss-5); background: var(--sv-loss-5); }
.sv-donut__slice--5, .sv-donut__swatch--5 { fill: var(--sv-loss-6); background: var(--sv-loss-6); }

.sv-donut__total {
  font: 600 22px/1 var(--sv-font-mono);
  fill: var(--sv-text);
}

.sv-donut__caption {
  font: 400 9px/1 var(--sv-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--sv-text-tertiary);
}

.sv-donut__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 200px;
  min-width: 200px;
}

.sv-donut__legend-item {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  padding: 3px 0;
  font: 400 12px/1.4 var(--sv-font-sans);
}

.sv-donut__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.sv-donut__legend-name {
  flex: 1 1 auto;
  color: var(--sv-text-secondary);
}

.sv-donut__legend-value {
  font-family: var(--sv-font-mono);
  color: var(--sv-text);
}