/* Generated from products/design-system/shared/donut by Navorina/scripts/sync-ds-donut.mjs. Do not edit. */
/* Donut (nv-m-donut): the one source of donut styles for the DS catalog and the product.
   Markup: shared/donut.js. The product gets a byte-identical copy in css/components/nv-donut.css
   via Navorina/scripts/sync-ds-donut.mjs; edit this file only.

   Typography follows the stat canon: label 13, value clamp(17px, 6cqi, 22px), meta 11.
   The ring is the container of its centre, so the value settles at 17 px inside a 132 px ring.
   Every state keeps the same geometry: 132 px ring, 24 px legend rows, one 32 px note row.
   The share column shows only when the island has room for it (wider than the aside). */
.nv-m-donut__content {
  --nv-donut-text: var(--nv-table-text, var(--dash-text));
  --nv-donut-cell: var(--nv-table-cell, var(--dash-text-muted));
  --nv-donut-head: var(--nv-table-head, var(--dash-text-subtle));
  --nv-donut-bone: var(--nv-table-well, var(--nv-chart-track));
  display: grid;
  min-width: 0;
  gap: 16px;
  color: var(--nv-donut-text);
  container: nv-donut / inline-size;
}

.nv-m-donut__body {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-width: 0;
  min-height: 132px;
}

.nv-m-donut__ring {
  position: relative;
  width: 132px;
  aspect-ratio: 1;
  container: nv-donut-ring / inline-size;
}

.nv-m-donut__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Filled shapes only: a stroke inherited from an icon rule would outline every segment. */
.nv-m-donut__svg :is(.nv-m-donut__arc, .nv-m-donut__track) {
  stroke: none;
}

.nv-m-donut__arc {
  transition: opacity 150ms ease;
}

.nv-m-donut__track {
  fill: var(--nv-chart-track);
}

.nv-m-donut__center {
  position: absolute;
  inset: 22px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.nv-m-donut__value {
  max-width: 100%;
  overflow: hidden;
  color: var(--nv-donut-text);
  font-size: clamp(17px, 6cqi, 22px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nv-m-donut__label {
  color: var(--nv-donut-cell);
  font-size: var(--nv-type-callout-size);
  letter-spacing: var(--nv-type-callout-tracking);
  line-height: var(--nv-type-callout-line);
  white-space: nowrap;
}

/* Legend: one grid for every row, so dots, names, amounts and shares sit on shared axes. */
.nv-m-donut__legend {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-content: center;
  column-gap: 12px;
  row-gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nv-m-donut__legend--share {
  grid-template-columns: 8px minmax(0, 1fr) auto 40px;
}

.nv-m-donut__legend li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: 24px;
  margin: 0;
  font-size: var(--nv-type-callout-size);
  letter-spacing: var(--nv-type-callout-tracking);
  line-height: var(--nv-type-callout-line);
}

.nv-m-donut__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nv-donut-bone);
}

.nv-m-donut__name {
  overflow: hidden;
  color: var(--nv-donut-cell);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nv-m-donut__amount {
  color: var(--nv-donut-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.nv-m-donut__share {
  color: var(--nv-donut-head);
  font-size: var(--nv-type-caption-size);
  letter-spacing: var(--nv-type-caption-tracking);
  font-weight: var(--nv-type-caption-weight);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

/* Hovering a legend row keeps its segment and quiets the rest. */
.nv-m-donut__content:has(.nv-m-donut__legend li:hover) .nv-m-donut__arc {
  opacity: .32;
}

.nv-m-donut__content:has(li[data-nv-donut-key="0"]:hover) [data-nv-donut-arc="0"],
.nv-m-donut__content:has(li[data-nv-donut-key="1"]:hover) [data-nv-donut-arc="1"],
.nv-m-donut__content:has(li[data-nv-donut-key="2"]:hover) [data-nv-donut-arc="2"],
.nv-m-donut__content:has(li[data-nv-donut-key="3"]:hover) [data-nv-donut-arc="3"],
.nv-m-donut__content:has(li[data-nv-donut-key="4"]:hover) [data-nv-donut-arc="4"],
.nv-m-donut__content:has(li[data-nv-donut-key="5"]:hover) [data-nv-donut-arc="5"] {
  opacity: 1;
}

/* Note: one quiet row under the chart. Only the glyph carries the direction. */
.nv-m-donut__note {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--nv-donut-cell);
  font-size: var(--nv-type-callout-size);
  letter-spacing: var(--nv-type-callout-tracking);
  line-height: var(--nv-type-callout-line);
}

/* Two classes: page-wide icon colour rules (body.dash-page svg) must not repaint the glyph. */
.nv-m-donut__content .nv-m-donut__note svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--nv-donut-head);
}

.nv-m-donut__content .nv-m-donut__note--up svg { color: var(--nv-chart-green); }
.nv-m-donut__content .nv-m-donut__note--down svg { color: var(--nv-chart-red); }

.nv-m-donut__message {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.nv-m-donut__message p { margin: 0; }

.nv-m-donut__message-title {
  color: var(--nv-donut-text);
  font-size: var(--nv-type-subhead-size);
  letter-spacing: var(--nv-type-subhead-tracking);
  font-weight: var(--nv-type-weight-semibold);
  line-height: var(--nv-type-subhead-line);
}

.nv-m-donut__message-text {
  color: var(--nv-donut-cell);
  font-size: var(--nv-type-callout-size);
  letter-spacing: var(--nv-type-callout-tracking);
  line-height: var(--nv-type-callout-line);
}

/* Retry: the island's ghost action, same metrics as the head link. */
.nv-m-donut__retry {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  margin-inline-start: -8px;
  padding-inline: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nv-donut-text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.nv-m-donut__retry:hover { background: var(--nv-donut-bone); }

.nv-m-donut__retry:focus-visible {
  outline: 2px solid var(--nv-chart-blue);
  outline-offset: 2px;
}

/* Loading and error: the ring is a calm track, text turns into bones of the same size. */
.nv-m-donut__bone {
  display: inline-block;
  border-radius: 999px;
  background: var(--nv-donut-bone);
  color: transparent;
  line-height: 1;
  user-select: none;
}

.nv-m-donut__content--loading .nv-m-donut__track {
  fill: var(--nv-donut-bone);
}

.nv-m-donut__content--error .nv-m-donut__value {
  color: var(--nv-donut-head);
}

/* Aside width (328 px of content): the share column steps out, names keep their room. */
@container nv-donut (max-width: 420px) {
  .nv-m-donut__legend--share {
    grid-template-columns: 8px minmax(0, 1fr) auto;
  }

  .nv-m-donut__share {
    display: none;
  }
}

@container nv-donut (max-width: 300px) {
  .nv-m-donut__body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .nv-m-donut__legend,
  .nv-m-donut__message {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nv-m-donut__arc,
  .nv-m-donut__retry {
    transition: none;
  }
}