@property --chart-label-gap {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.chart {
  --chart-body-size: 17.5rem;
  --chart-label-size: calc((var(--font-size-caption) * var(--line-height-ui)) + var(--space-2xs));
  --chart-band-size: calc(100% - var(--chart-label-size));
  --chart-mark-size: 1.5rem;
  --chart-mark-min: 0.125rem;
  --chart-mark-gap: var(--space-3xs);
  --chart-column-share: 70cqi;
  --chart-mark-radius: calc(var(--chart-column-share) / 6);
  --chart-name-size: 9rem;
  --chart-value-size: 4rem;
  --chart-ticks-size: 4rem;
  --chart-line-size: 0.25rem;
  --chart-swatch-size: 0.625rem;
  --chart-wash-opacity: 0.2;
  --chart-dim-opacity: 0.5;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-xs);
}

.chart > :not(.chart__caption, .chart__toggle) {
  grid-column: 1 / -1;
}

.chart__caption {
  grid-column: 2;
  grid-row: 1;
  color: var(--color-text-muted);
  font-size: var(--font-size-heading-2);
  font-weight: var(--font-weight-thick);
  line-height: var(--line-height-ui);
}

.chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

.chart__key {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-ui);
  transition: opacity var(--duration-state) var(--easing-state);
}

.chart__swatch {
  inline-size: var(--chart-swatch-size);
  block-size: var(--chart-swatch-size);
  border-radius: var(--radius-sm);
}

.chart__mark--incoming {
  fill: var(--color-incoming-fill);
  background-color: var(--color-incoming-fill);
}

.chart__mark--outgoing {
  fill: var(--color-outgoing);
  background-color: var(--color-outgoing);
}

.chart__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.chart__body--fixed {
  block-size: var(--chart-body-size);
}

.chart__views {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-block-size: 0;
}

.chart__frame,
.chart__data {
  grid-row: 1;
  grid-column: 1;
}

.chart__frame {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  min-block-size: 0;
}

.chart__ticks {
  position: relative;
  inline-size: var(--chart-ticks-size);
  block-size: var(--chart-band-size);
}

.chart__tick {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(var(--chart-offset) * 100%);
  translate: 0 -50%;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart__plot {
  position: relative;
}

.chart__canvas {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  inline-size: 100%;
  block-size: var(--chart-band-size);
  overflow: visible;
}

.chart__gridline,
.chart__baseline {
  vector-effect: non-scaling-stroke;
  stroke: var(--color-border);
  stroke-width: var(--border-width);
}

.chart__baseline {
  stroke: var(--color-outline);
}

.chart__line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke: var(--chart-line-stroke, var(--color-incoming));
  stroke-width: var(--chart-line-size);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart__stop--incoming {
  stop-color: var(--color-incoming);
}

.chart__stop--outgoing {
  stop-color: var(--color-outgoing);
}

.chart__stop--edge {
  stop-opacity: var(--chart-wash-opacity);
}

.chart__stop--zero {
  stop-opacity: 0;
}

.chart__slots {
  --chart-label-gap: var(--space-xs);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  block-size: 100%;
}

.chart__slot {
  position: relative;
  display: grid;
  container-type: inline-size;
}

.chart__slot .chart__mark {
  position: absolute;
  inset-block-start: calc(var(--chart-offset) * var(--chart-band-size));
  inset-inline-start: calc((100cqi - var(--chart-column-share)) / 2);
  inline-size: var(--chart-column-share);
  block-size: max(0px, calc((var(--chart-extent) * var(--chart-band-size)) - (var(--chart-mark-gap) / 2)));
  pointer-events: none;
  transition: opacity var(--duration-state) var(--easing-state);
}

.chart__slot .chart__mark--incoming {
  border-start-start-radius: var(--chart-mark-radius);
  border-start-end-radius: var(--chart-mark-radius);
}

.chart__slot .chart__mark--outgoing {
  inset-block-start: calc((var(--chart-offset) * var(--chart-band-size)) + (var(--chart-mark-gap) / 2));
  border-end-start-radius: var(--chart-mark-radius);
  border-end-end-radius: var(--chart-mark-radius);
}

.chart__slot::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: var(--border-width);
  block-size: var(--chart-band-size);
  background-color: var(--color-outline);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-state) var(--easing-state);
}

.chart__slot:focus-within::after {
  opacity: 1;
}

@media (hover: hover) {
  .chart__slot:hover::after {
    opacity: 1;
  }
}

.chart__slot > .chart__tip {
  --delay-intent: 0s;

  display: grid;
}

.chart__zone {
  position: relative;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-ui);
  text-decoration: none;
  transition:
    color var(--duration-state) var(--easing-state),
    translate var(--duration-state) var(--easing-state);
}

.chart__zone .chart__label {
  position: absolute;
  inset-block-end: var(--space-2xs);
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: max-content;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
}

.chart__slots--tight .chart__slot:first-child .chart__label {
  inset-inline-start: 0;
  translate: none;
}

.chart__slots--tight .chart__slot:last-child .chart__label {
  inset-inline: auto 0;
  translate: none;
}

.chart__slot--minor .chart__label {
  visibility: hidden;
}

@media (hover: hover) {
  a.chart__zone:hover {
    color: var(--color-text);
  }

  a.chart__zone:hover .chart__label {
    background-color: var(--color-surface-hover);
    box-shadow: 0 0 0 var(--space-2xs) var(--color-surface-hover);
  }
}

.chart__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.chart__entry {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
  text-decoration: none;
  transition:
    color var(--duration-state) var(--easing-state),
    translate var(--duration-state) var(--easing-state);
}

@media (hover: hover) {
  a.chart__entry:hover {
    background-color: var(--color-surface-hover);
  }
}

.chart__name {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-xs);
  inline-size: var(--chart-name-size);
  min-inline-size: 0;
  font-weight: var(--font-weight-bold);
}

.chart__icon {
  flex: none;
  color: var(--color-text-muted);
}

.chart__name .chart__label {
  flex: 1;
  min-inline-size: 0;
}

.chart__track {
  display: flex;
  flex: 1;
  align-items: center;
  min-inline-size: 0;
  block-size: var(--chart-mark-size);
}

.chart__track .chart__mark {
  flex: none;
  min-inline-size: var(--chart-mark-min);
  inline-size: calc(var(--chart-share) * 100%);
  block-size: 100%;
  border-radius: var(--radius-sm);
  transition: opacity var(--duration-state) var(--easing-state);
}

@media (hover: hover) {
  .chart:has(.chart__key--incoming:hover) .chart__key--outgoing,
  .chart:has(.chart__key--incoming:hover) .chart__mark--outgoing:not(.chart__swatch),
  .chart:has(.chart__key--outgoing:hover) .chart__key--incoming,
  .chart:has(.chart__key--outgoing:hover) .chart__mark--incoming:not(.chart__swatch) {
    opacity: var(--chart-dim-opacity);
  }
}

.chart__value {
  flex: none;
  min-inline-size: var(--chart-value-size);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.chart__toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}

.chart__toggle-label--table,
.chart:has(.chart__view:checked) .chart__toggle-label--chart {
  display: none;
}

.chart:has(.chart__view:checked) .chart__toggle-label--table {
  display: revert;
}

.chart__data {
  border-radius: var(--radius-lg);
  overflow-y: auto;
}

.chart__table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-ui);
}

.chart__table thead {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-surface);
}

.chart__table thead th:first-child {
  border-start-start-radius: var(--radius-lg);
}

.chart__table thead th:last-child {
  border-start-end-radius: var(--radius-lg);
}

.chart__table tbody tr:last-child :is(th, td):first-child {
  border-end-start-radius: var(--radius-lg);
}

.chart__table tbody tr:last-child :is(th, td):last-child {
  border-end-end-radius: var(--radius-lg);
}

.chart__table th,
.chart__table td {
  padding: var(--space-sm);
  text-align: start;
  border-block-end: var(--border-width) solid var(--color-border);
}

.chart__table tbody tr:last-child :is(th, td) {
  border-block-end: 0;
}

.chart__table th {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-thick);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.chart__table :is(th, td).chart__cell--numeric {
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chart__frame,
.chart:has(.chart__view:checked) .chart__data {
  visibility: visible;
}

.chart__data,
.chart:has(.chart__view:checked) .chart__frame {
  visibility: hidden;
}

.chart:has(.chart__view:checked) .chart__legend {
  display: none;
}

.chart__header {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

@media (forced-colors: active) {
  .chart__mark {
    forced-color-adjust: none;
    fill: currentcolor;
    background-color: currentcolor;
    outline: var(--border-width) solid currentcolor;
  }

  .chart__gridline,
  .chart__baseline,
  .chart__line {
    stroke: currentcolor;
  }

  .chart__area {
    display: none;
  }

  .chart__slot::after {
    background-color: currentcolor;
  }
}