@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/table/table.css';
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/_internal/chart-tooltip.css';
@layer cinder.components {
  .cinder-area-chart {
    display: grid;
    gap: var(--cinder-space-3);
    color: var(--_cinder-chart-foreground, currentColor);
    background: var(--_cinder-chart-background, transparent);
  }

  .cinder-area-chart__description {
    margin: 0;
    color: var(--_cinder-chart-muted, currentColor);
    opacity: 0.72;
    font-size: var(--cinder-text-sm);
  }

  .cinder-area-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cinder-space-2);
  }

  .cinder-area-chart__legend button {
    display: inline-flex;
    align-items: center;
    gap: var(--cinder-space-1);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-sm);
    background: var(--_cinder-chart-background, transparent);
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: var(--cinder-text-sm);
    padding: var(--cinder-space-1) var(--cinder-space-2);
  }

  /*
   * CIN-603: a toggled-off series is still an ENABLED control (the user
   * presses it to bring the series back), so its `border.control` boundary
   * stays subject to WCAG 1.4.11's 3:1 floor. The previous `opacity: 0.55`
   * lived on the button itself, which multiplied the border's alpha along
   * with everything else (~26% effective, well under the floor). Scoping the
   * dimming to the swatch dot instead leaves the border at `border.control`'s
   * full, undiluted alpha.
   *
   * The label's color sources `--_cinder-chart-muted` (the same chart-local
   * token every other "muted" chart element in this file already uses, e.g.
   * `.cinder-area-chart__description` above), not the global
   * `--cinder-text-muted` token -- a consumer-supplied `theme.muted` has to
   * keep reaching this label, or it stops matching the rest of a custom
   * chart theme. Its own default is `currentColor` (`chart-model-utilities`'s
   * `theme?.muted ?? 'currentColor'`), so with no consumer theme the label
   * reads at full, undimmed contrast -- the swatch's own `opacity: 0.55`
   * below is what still marks the series as toggled off.
   */
  .cinder-area-chart__legend button[aria-pressed='false'] {
    color: var(--_cinder-chart-muted, currentColor);
  }

  .cinder-area-chart__legend button[aria-pressed='false'] span {
    opacity: 0.55;
  }

  .cinder-area-chart__legend span {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--cinder-radius-full);
  }

  .cinder-area-chart__viewport {
    position: relative;
  }

  .cinder-area-chart svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .cinder-area-chart__area {
    transition: d 0.3s ease;
  }

  .cinder-area-chart__line {
    fill: none;
    stroke-width: 2;
    transition: d 0.3s ease;
  }

  .cinder-area-chart__gridline {
    stroke: var(--_cinder-chart-grid, currentColor);
    stroke-width: 1;
    opacity: 0.22;
  }

  .cinder-area-chart__crosshair {
    stroke: var(--_cinder-chart-muted, currentColor);
    stroke-dasharray: 4 4;
    opacity: 0.72;
  }

  .cinder-area-chart__hit-surface {
    fill: transparent;
  }

  .cinder-area-chart__focus-target {
    fill: transparent;
    outline: none;
    pointer-events: none;
  }

  .cinder-area-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active='true']) {
    fill: transparent;
    stroke: var(--cinder-ring-color);
    stroke-width: var(--cinder-ring-width);
    vector-effect: non-scaling-stroke;
    filter: none;
  }

  .cinder-area-chart__focus-ring-layer {
    pointer-events: none;
  }

  .cinder-area-chart__focus-ring,
  .cinder-area-chart__focus-ring-halo,
  .cinder-area-chart__focus-ring-connector,
  .cinder-area-chart__focus-ring-dot {
    fill: none;
    pointer-events: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cinder-area-chart__focus-ring {
    stroke: var(--cinder-ring-color);
    stroke-width: var(--cinder-ring-width);
    filter: none;
  }

  .cinder-area-chart__focus-ring-halo {
    stroke: var(--cinder-ring-offset-color);
    stroke-width: calc(
      var(--cinder-ring-width) + var(--cinder-ring-offset) + var(--cinder-ring-offset)
    );
    filter: none;
  }

  @media (forced-colors: active) {
    .cinder-area-chart__focus-ring-halo {
      display: none;
    }

    .cinder-area-chart__focus-ring,
    .cinder-area-chart__focus-ring-connector,
    .cinder-area-chart__focus-ring-dot {
      fill: none;
      stroke: ButtonText;
      stroke-width: var(--cinder-ring-width);
      filter: none;
    }

    .cinder-area-chart__focus-target:focus-visible:not([data-cinder-focus-ring-active='true']) {
      fill: transparent;
      stroke: ButtonText;
      stroke-width: var(--cinder-ring-width);
      vector-effect: non-scaling-stroke;
      filter: none;
    }
  }

  .cinder-area-chart__tick-label,
  .cinder-area-chart__axis-title {
    fill: var(--_cinder-chart-muted, currentColor);
    font-size: var(--cinder-text-xs);
  }

  .cinder-area-chart__tick-label {
    opacity: 0.72;
  }

  .cinder-area-chart__state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--_cinder-chart-muted, currentColor);
    background: var(--_cinder-chart-background, transparent);
    z-index: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-area-chart__area,
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-area-chart__line {
      transition: none;
    }
  }
}