// Shared a11y envelope used by every chart component in the lib.
// Extracted at the third consumer (stacked-bar-chart) per the
// "three similar lines is better than a premature abstraction"
// rule from CLAUDE.md — bar + donut + stacked-bar = three charts
// sharing the same figure / caption / fallback shell, time to
// consolidate.
//
// Imported via `@use` from each chart's own .scss; that file
// only carries the chart-specific tweaks (canvas dimensions,
// chart-specific SVG element rules).

// Host elements default to `display: inline` for Angular custom
// elements, which would let the inner `<figure>` escape flex/grid
// sizing constraints from the parent container and trigger
// horizontal overflow when a chart re-renders before the panel is
// laid out. Forcing `display: block` makes the host fill its grid
// cell and lets `max-width: 100%` actually take effect.
lib-bar-chart,
lib-donut-chart,
lib-stacked-bar-chart {
  display: block;
  min-width: 0;
}

.chart-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.chart-caption {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;

  :where(.dark) & {
    color: #f3f4f6;
  }
}

// Screen-reader-only utility (WCAG technique G81).
.chart-description.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chart-canvas {
  width: 100%;
  // Grid items default to `min-width: auto` which prevents shrinking
  // below the intrinsic content size — when Plot ships an `<svg>`
  // with a fixed `width="720"` attribute (because the canvas was
  // hidden via `[hidden]` on first render and `clientWidth` was 0),
  // the canvas couldn't fit in a narrower column and overflowed the
  // panel, dragging the body's vertical scrollbar with it. The pair
  // `min-width: 0` + `max-width: 100%` on the inner SVG/figure
  // forces the chart to scale down to the actual column width.
  min-width: 0;
  min-height: 16rem;

  // Constrain Plot's rendered output. Plot returns either a bare
  // `<svg>` or a `<figure>` wrapping a legend + `<svg>`, both with
  // fixed pixel dimensions from the `width` config. The browser
  // honours the viewBox aspect ratio when we cap width to 100% and
  // let height adjust accordingly.
  figure {
    max-width: 100%;
    margin: 0;
  }
  svg {
    max-width: 100%;
    height: auto;
  }

  // Plot's default text colour is hardcoded black; override to the
  // theme-aware grayscale so axis ticks and labels stay readable
  // in dark mode without re-rendering.
  svg [text-anchor],
  svg text {
    fill: #374151;

    :where(.dark) & {
      fill: #d1d5db;
    }
  }

  svg[data-no-transitions] * {
    transition: none !important;
    animation: none !important;
  }
}

.chart-fallback {
  font-size: 0.75rem;

  summary {
    cursor: pointer;
    color: #6b7280;
    padding: 0.25rem 0;
    border-radius: 0.125rem;

    &:focus-visible {
      outline: 2px solid var(--color-brand-primary-500, #2563eb);
      outline-offset: 2px;
    }

    :where(.dark) & {
      color: #9ca3af;
    }
  }

  table {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
    color: #374151;

    :where(.dark) & {
      color: #d1d5db;
    }
  }

  th,
  td {
    padding: 0.25rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;

    :where(.dark) & {
      border-bottom-color: #1f2937;
    }
  }

  th[scope='col'] {
    font-weight: 600;
  }

  td {
    font-family: ui-monospace, monospace;
    font-size: 0.6875rem;
  }
}
