@layer context {
  .ui-trend-chart {
    display: grid;
    gap: var(--ui-space-4);
    min-inline-size: 0;
    margin: 0;
  }

  .ui-trend-chart > figcaption {
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-size-sm);
  }

  .ui-trend-chart--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-trend-chart--line {
    gap: 0;
  }

  .ui-trend-chart__panel {
    contain: inline-size paint;
    min-inline-size: 0;
    padding: var(--ui-space-3);
    border: var(--ui-border-width) solid var(--ui-color-border);
    border-radius: var(--ui-radius-control);
    background: color-mix(in srgb, var(--ui-color-action) 3%, var(--ui-color-surface));
    overflow-x: auto;
  }

  .ui-trend-chart__columns {
    display: grid;
    grid-template-columns: repeat(var(--ui-trend-columns, 6), minmax(10px, 1fr));
    align-items: end;
    gap: clamp(3px, 0.7vw, 8px);
    min-block-size: 116px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-inline-size: max(100%, calc(var(--ui-trend-columns, 6) * 2.5rem));
  }

  .ui-trend-chart__column,
  .ui-trend-chart__bar-visual {
    min-inline-size: 0;
    block-size: 100%;
  }

  .ui-trend-chart__bar-visual {
    display: grid;
    position: relative;
    grid-template-rows: 16px 78px 16px;
    justify-items: center;
    gap: 2px;
  }

  .ui-trend-chart__bar-visual.ui-tooltip-trigger {
    cursor: help;
  }

  .ui-trend-chart__bar-visual.ui-tooltip-trigger:focus-visible {
    outline: 2px solid var(--ui-color-action);
    outline-offset: 2px;
    border-radius: var(--ui-radius-control);
  }

  .ui-trend-chart__bar-visual .ui-tooltip {
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .ui-trend-chart__column:first-child .ui-tooltip {
    inset-inline-start: 0;
    transform: none;
  }

  .ui-trend-chart__column:last-child .ui-tooltip {
    inset-inline-start: 100%;
    transform: translateX(-100%);
  }

  .ui-trend-chart__value,
  .ui-trend-chart__label {
    max-inline-size: 100%;
    overflow: hidden;
    color: var(--ui-color-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-trend-chart__track {
    display: flex;
    inline-size: min(24px, 76%);
    block-size: 78px;
    align-items: end;
    overflow: hidden;
    border-radius: 5px 5px 2px 2px;
    background: color-mix(in srgb, var(--ui-color-action) 14%, var(--ui-color-surface));
  }

  .ui-trend-chart__fill {
    display: block;
    inline-size: 100%;
    block-size: var(--ui-trend-height, 0%);
    min-block-size: min(4px, var(--ui-trend-height, 0%));
    border-radius: inherit;
    background: var(--ui-color-action);
  }

  .ui-trend-chart--signed .ui-trend-chart__track {
    position: relative;
    display: block;
    overflow: visible;
    border-radius: var(--ui-radius-control);
    background: color-mix(in srgb, var(--ui-color-action) 8%, var(--ui-color-surface));
  }

  .ui-trend-chart--signed .ui-trend-chart__zero-line {
    position: absolute;
    inset: 50% 0 auto;
    z-index: 1;
    border-block-start: var(--ui-border-width) solid var(--ui-color-text-muted);
  }

  .ui-trend-chart--signed .ui-trend-chart__fill {
    position: absolute;
    inset-inline: 0;
    block-size: calc(var(--ui-trend-height, 0%) / 2);
    min-block-size: 0;
    border-radius: 3px;
  }

  .ui-trend-chart--signed .ui-trend-chart__column--positive .ui-trend-chart__fill {
    inset-block-end: 50%;
  }

  .ui-trend-chart--signed .ui-trend-chart__column--negative .ui-trend-chart__fill {
    inset-block-start: 50%;
    background: var(--ui-color-danger);
  }

  .ui-trend-chart--signed .ui-trend-chart__column--zero .ui-trend-chart__fill {
    display: none;
  }

  .ui-trend-chart--readable {
    gap: var(--ui-space-2);
  }

  .ui-trend-chart--readable .ui-trend-chart__panel {
    padding: var(--ui-space-2);
  }

  .ui-trend-chart--readable .ui-trend-chart__columns {
    gap: var(--ui-space-2);
    min-block-size: 138px;
    min-inline-size: max(100%, calc(var(--ui-trend-columns, 6) * 3.25rem));
  }

  .ui-trend-chart--readable .ui-trend-chart__bar-visual {
    grid-template-rows: 20px 94px 20px;
    gap: 2px;
  }

  .ui-trend-chart--readable .ui-trend-chart__value,
  .ui-trend-chart--readable .ui-trend-chart__label {
    max-inline-size: 100%;
    overflow: hidden;
    font-size: 0.74rem;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-trend-chart--readable .ui-trend-chart__track {
    inline-size: min(34px, 62%);
    block-size: 94px;
  }

  .ui-trend-chart--readable .ui-trend-chart__data {
    font-size: 0.78rem;
  }

  .ui-trend-chart__empty {
    margin: 0;
    padding: var(--ui-space-4);
    color: var(--ui-color-text-muted);
  }

  .ui-trend-chart__data {
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-size-sm);
  }

  .ui-trend-chart__data summary {
    cursor: pointer;
    font-weight: 700;
  }

  .ui-trend-chart__table-scroll {
    max-block-size: 18rem;
    margin-block-start: var(--ui-space-2);
    overflow: auto;
  }

  .ui-trend-chart__data table {
    inline-size: 100%;
    border-collapse: collapse;
    color: var(--ui-color-text);
  }

  .ui-trend-chart__data th,
  .ui-trend-chart__data td {
    padding: var(--ui-space-2);
    border-block-end: var(--ui-border-width) solid var(--ui-color-border);
    text-align: start;
  }

  .ui-trend-chart__data td:last-child,
  .ui-trend-chart__data th:last-child {
    text-align: end;
  }

  .ui-trend-chart__line-panel {
    display: grid;
    align-content: space-between;
    gap: var(--ui-space-2);
  }

  .ui-trend-chart--line .ui-trend-chart__line-panel {
    container: trend-line / inline-size;
    min-block-size: 148px;
    overflow: hidden;
  }

  .ui-trend-chart__line-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    color: var(--ui-color-text-muted);
    font-size: var(--ui-font-size-sm);
  }

  .ui-trend-chart__line-heading strong {
    color: var(--ui-color-text);
  }

  .ui-trend-chart__line-stage {
    display: grid;
    grid-template-rows: clamp(8.5rem, 10vw, 11rem) 1.25rem;
    inline-size: 100%;
    min-inline-size: 0;
  }

  .ui-trend-chart__line-plot,
  .ui-trend-chart__line-axis {
    position: relative;
    min-inline-size: 0;
  }

  .ui-trend-chart__line-svg,
  .ui-trend-chart__line-points {
    position: absolute;
    inset: 0;
  }

  .ui-trend-chart__line-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .ui-trend-chart__grid-line {
    stroke: var(--ui-color-border);
    stroke-width: 1;
  }

  .ui-trend-chart__line {
    fill: none;
    stroke: var(--ui-color-action);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
  }

  .ui-trend-chart__dot {
    position: absolute;
    box-sizing: border-box;
    inline-size: 8px;
    block-size: 8px;
    border: 2px solid var(--ui-color-action);
    border-radius: 50%;
    background: var(--ui-color-surface);
    transform: translate(-50%, -50%);
  }

  .ui-trend-chart__line-point {
    position: absolute;
    z-index: 1;
    inset-block-start: var(--ui-trend-line-y, 90%);
    inset-inline-start: var(--ui-trend-line-x, 0%);
  }

  .ui-trend-chart__line-point.ui-tooltip-trigger {
    cursor: help;
  }

  .ui-trend-chart__line-point.ui-tooltip-trigger:is(:hover, :focus-visible) {
    z-index: 2;
  }

  .ui-trend-chart__line-point .ui-tooltip {
    inset-block-end: 1rem;
    inset-inline-start: 0;
    transform: translateX(-50%);
  }

  .ui-trend-chart__line-point--tooltip-below .ui-tooltip {
    inset-block-start: 1rem;
    inset-block-end: auto;
  }

  .ui-trend-chart__line-point--first .ui-tooltip {
    transform: none;
  }

  .ui-trend-chart__line-point--last .ui-tooltip {
    transform: translateX(-100%);
  }

  .ui-trend-chart__line-point.ui-tooltip-trigger:focus-visible .ui-trend-chart__dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-color-action) 35%, transparent);
  }

  .ui-trend-chart__line-label,
  .ui-trend-chart__line-value {
    display: none;
    position: absolute;
    color: var(--ui-color-text-muted);
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .ui-trend-chart__line-value {
    inset-block-end: 0.55rem;
    color: var(--ui-color-text);
    font-weight: 800;
  }

  .ui-trend-chart__line-label {
    inset-block-start: 0.25rem;
    inset-inline-start: var(--ui-trend-line-x, 0%);
  }

  .ui-trend-chart__line-point--compact .ui-trend-chart__line-value,
  .ui-trend-chart__line-label--compact {
    display: block;
  }

  .ui-trend-chart__line-point--first .ui-trend-chart__line-value,
  .ui-trend-chart__line-label--first {
    transform: none;
  }

  .ui-trend-chart__line-point--last .ui-trend-chart__line-value,
  .ui-trend-chart__line-label--last {
    transform: translateX(-100%);
  }

  @container trend-line (min-width: 52rem) {
    .ui-trend-chart__line-point--medium .ui-trend-chart__line-value,
    .ui-trend-chart__line-label--medium {
      display: block;
    }
  }

  @container trend-line (min-width: 72rem) {
    .ui-trend-chart__line-value,
    .ui-trend-chart__line-label {
      display: block;
    }

    .ui-trend-chart__line-point--first .ui-trend-chart__line-value,
    .ui-trend-chart__line-point--last .ui-trend-chart__line-value,
    .ui-trend-chart__line-label--first,
    .ui-trend-chart__line-label--last {
      transform: translateX(-50%);
    }
  }

  @media (max-width: 720px) {
    .ui-trend-chart--split {
      grid-template-columns: minmax(0, 1fr);
    }

    .ui-trend-chart__panel {
      overflow-x: auto;
    }
  }
}