@import url("./health-eye-foundations.css");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@500;600;700;800&display=swap");

@layer he-components {
  .he-viz {
    --he-viz-series-1: var(--he-color-data-categorical-1);
    --he-viz-series-2: var(--he-color-data-categorical-2);
    --he-viz-series-3: var(--he-color-data-categorical-3);
    display: grid;
    min-inline-size: 0;
    gap: var(--he-space-4);
    color: var(--he-color-text-primary);
  }

  .he-viz__header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--he-space-3); }
  .he-viz__title { margin: 0; font: var(--he-font-weight-bold) var(--he-font-size-lg)/var(--he-font-line-height-snug) var(--he-font-family-display); }
  .he-viz__summary { margin: var(--he-space-1) 0 0; color: var(--he-color-text-secondary); }
  .he-viz__plot { position: relative; min-block-size: var(--he-visualization-plot-minimum-height); overflow: hidden; border-block-end: var(--he-visualization-plot-grid-width) solid var(--he-color-data-grid); background-image: linear-gradient(var(--he-color-data-grid) 1px, transparent 1px); background-size: 100% 25%; }
  .he-viz__plot svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
  .he-viz__axis-label { fill: var(--he-color-text-tertiary); font: var(--he-font-size-xs) var(--he-font-family-mono); }
  .he-viz__series { fill: none; stroke: var(--he-viz-series-1); stroke-width: var(--he-visualization-series-observed-width); vector-effect: non-scaling-stroke; }
  .he-viz__series--baseline { stroke: var(--he-viz-series-2); stroke-dasharray: 6 4; }
  .he-viz__series--predicted { stroke: var(--he-viz-series-3); stroke-dasharray: 2 4; }
  .he-viz__uncertainty { fill: color-mix(in srgb, var(--he-viz-series-3) 14%, transparent); stroke: none; }
  .he-viz__threshold { stroke: var(--he-color-status-review-border); stroke-width: var(--he-visualization-annotation-line-width); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
  .he-viz__missing { fill: url("#he-missing-pattern"); color: var(--he-color-text-tertiary); }
  .he-viz__point { r: var(--he-visualization-series-point-radius); fill: var(--he-color-surface-primary); stroke: var(--he-viz-series-1); stroke-width: 2; }
  .he-viz__point:focus { r: calc(var(--he-visualization-series-point-radius) + 2px); outline: none; stroke-width: var(--he-visualization-series-focus-width); }
  .he-viz__legend { display: flex; flex-wrap: wrap; gap: var(--he-space-2) var(--he-visualization-legend-gap); margin: 0; padding: 0; list-style: none; }
  .he-viz__legend-item { display: inline-flex; min-block-size: var(--he-size-target-minimum); align-items: center; gap: var(--he-space-2); }
  .he-viz__legend-swatch { inline-size: var(--he-visualization-legend-swatch-size); block-size: var(--he-visualization-legend-swatch-size); border-radius: 3px; background: var(--he-swatch, var(--he-viz-series-1)); }
  .he-viz__annotation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--he-visualization-annotation-gap); color: var(--he-color-text-secondary); font-size: var(--he-font-size-sm); }
  .he-viz__table { max-inline-size: 100%; overflow: auto; }

  .he-viz-example {
    display: grid;
    min-inline-size: 0;
    margin: 0;
    overflow: clip;
    border: 1px solid var(--he-color-border-default);
    border-radius: var(--he-radius-lg);
    background: var(--he-color-surface-primary);
    color: var(--he-color-text-primary);
    container-type: inline-size;
  }
  .he-viz-example__plot {
    display: grid;
    min-block-size: 14rem;
    place-items: center;
    padding: var(--he-space-3);
    border-block-end: 1px solid var(--he-color-border-subtle);
    background: var(--he-color-surface-secondary);
  }
  .he-viz-example__plot svg { display: block; inline-size: 100%; max-inline-size: 32rem; block-size: auto; }
  .he-d3-root { font-family: var(--he-font-family-body-stack); }
  .he-d3-axis text, .he-d3-axis-label { font-family: var(--he-font-family-mono-stack); font-size: var(--he-font-size-xs); }
  .he-d3-axis path, .he-d3-axis line { vector-effect: non-scaling-stroke; }
  .he-viz-example__caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--he-space-2); padding: var(--he-space-4); }
  .he-viz-example__caption h4 { min-inline-size: 0; margin: 0; font: var(--he-font-weight-bold) var(--he-font-size-md)/var(--he-font-line-height-snug) var(--he-font-family-display); }
  .he-viz-example__caption code { align-self: start; padding: var(--he-space-1) var(--he-space-2); border-radius: var(--he-radius-sm); background: var(--he-color-background-canvas); color: var(--he-color-text-secondary); font-size: var(--he-font-size-xs); }
  .he-viz-example__caption p, .he-viz-example__caption small { grid-column: 1 / -1; margin: 0; }
  .he-viz-example__caption p { color: var(--he-color-text-secondary); font-size: var(--he-font-size-sm); }
  .he-viz-example__caption small { color: var(--he-color-text-tertiary); font: var(--he-font-size-xs)/var(--he-font-line-height-normal) var(--he-font-family-mono); }
  .he-viz-example__data { border-block-start: 1px solid var(--he-color-border-subtle); }
  .he-viz-example__data summary { display: flex; min-block-size: var(--he-size-target-minimum); align-items: center; padding: 0 var(--he-space-4); color: var(--he-color-link-default); font-weight: var(--he-font-weight-semibold); cursor: pointer; }
  .he-viz-example__data table { inline-size: 100%; border-collapse: collapse; font-size: var(--he-font-size-xs); }
  .he-viz-example__data th, .he-viz-example__data td { padding: var(--he-space-2) var(--he-space-4); border-block-start: 1px solid var(--he-color-border-subtle); text-align: start; }
  .he-viz-example__data th { color: var(--he-color-text-secondary); font-weight: var(--he-font-weight-semibold); }

  .he-viz-example__grid { stroke: var(--he-color-data-grid); stroke-width: 1; }
  .he-viz-example__axis { stroke: var(--he-color-border-strong); stroke-width: 1.25; }
  .he-viz-example__label { fill: var(--he-color-text-secondary); font: var(--he-font-size-xs) var(--he-font-family-mono); }
  .he-viz-example__line { fill: none; stroke: var(--he-color-data-categorical-1); stroke-width: 3; vector-effect: non-scaling-stroke; }
  .he-viz-example__line--secondary { stroke: var(--he-color-data-categorical-2); stroke-dasharray: 6 5; }
  .he-viz-example__point { fill: var(--he-color-surface-primary); stroke: var(--he-color-data-categorical-1); stroke-width: 2; }
  .he-viz-example__bar { fill: var(--he-color-data-categorical-1); }
  .he-viz-example__bar--accent { fill: var(--he-color-data-categorical-3); }
  .he-viz-example__dot { stroke: var(--he-color-surface-primary); stroke-width: 2; }
  .he-viz-example__dot--1 { fill: var(--he-color-data-categorical-1); }
  .he-viz-example__dot--2 { fill: var(--he-color-data-categorical-2); }
  .he-viz-example__dot--3 { fill: var(--he-color-data-categorical-3); }
  .he-viz-example__trend { stroke: var(--he-color-text-tertiary); stroke-width: 1.5; stroke-dasharray: 5 5; }
  .he-viz-example__heat { stroke: var(--he-color-surface-primary); stroke-width: 2; }
  .he-viz-example__heat--1 { fill: color-mix(in srgb, var(--he-color-data-categorical-1) 22%, var(--he-color-surface-primary)); }
  .he-viz-example__heat--2 { fill: color-mix(in srgb, var(--he-color-data-categorical-1) 42%, var(--he-color-surface-primary)); }
  .he-viz-example__heat--3 { fill: color-mix(in srgb, var(--he-color-data-categorical-1) 66%, var(--he-color-surface-primary)); }
  .he-viz-example__heat--4 { fill: color-mix(in srgb, var(--he-color-data-categorical-1) 86%, var(--he-color-surface-primary)); }
  .he-viz-example__distribution { fill: color-mix(in srgb, var(--he-color-data-categorical-1) 32%, transparent); stroke: var(--he-color-data-categorical-1); stroke-width: 2; }
  .he-viz-example__median { stroke: var(--he-color-text-primary); stroke-width: 2; }
  .he-viz-example__radial-base { fill: var(--he-color-surface-secondary); }
  .he-viz-example__radial-1 { fill: var(--he-color-data-categorical-1); }
  .he-viz-example__radial-2 { fill: var(--he-color-data-categorical-2); }
  .he-viz-example__radial-3 { fill: var(--he-color-data-categorical-3); }
  .he-viz-example__radial-hole { fill: var(--he-color-surface-secondary); }
  .he-viz-example__composition { stroke: var(--he-color-surface-primary); stroke-width: 3; }
  .he-viz-example__composition--1 { fill: color-mix(in srgb, var(--he-color-data-categorical-1) 58%, var(--he-color-surface-primary)); }
  .he-viz-example__composition--2 { fill: color-mix(in srgb, var(--he-color-data-categorical-2) 58%, var(--he-color-surface-primary)); }
  .he-viz-example__composition--3 { fill: color-mix(in srgb, var(--he-color-data-categorical-3) 58%, var(--he-color-surface-primary)); }
  .he-viz-example__edge { stroke: var(--he-color-border-strong); stroke-width: 2; }
  .he-viz-example__node { stroke: var(--he-color-surface-primary); stroke-width: 2; }
  .he-viz-example__node--1 { fill: color-mix(in srgb, var(--he-color-data-categorical-1) 58%, var(--he-color-surface-primary)); }
  .he-viz-example__node--2 { fill: color-mix(in srgb, var(--he-color-data-categorical-2) 58%, var(--he-color-surface-primary)); }
  .he-viz-example__node--3 { fill: color-mix(in srgb, var(--he-color-data-categorical-3) 58%, var(--he-color-surface-primary)); }
  .he-viz-example__flow { opacity: .52; }
  .he-viz-example__flow--1 { fill: var(--he-color-data-categorical-1); }
  .he-viz-example__flow--2 { fill: var(--he-color-data-categorical-3); }
  .he-viz-example__stage { fill: var(--he-color-surface-primary); stroke: var(--he-color-border-strong); stroke-width: 2; }
  .he-viz-example__map { fill: color-mix(in srgb, var(--he-color-data-categorical-1) 16%, var(--he-color-surface-primary)); stroke: var(--he-color-data-categorical-1); stroke-width: 2; }
  .he-viz-example__map-point { stroke: var(--he-color-surface-primary); stroke-width: 2; }
  .he-viz-example__route { fill: none; stroke: var(--he-color-data-categorical-3); stroke-width: 3; stroke-dasharray: 7 4; }
  .he-viz-example__camera { fill: var(--he-color-background-inverted); }
  .he-viz-example__cow { fill: color-mix(in srgb, var(--he-color-surface-primary) 72%, transparent); }
  .he-viz-example__box { fill: none; stroke: var(--he-color-data-categorical-3); stroke-width: 3; }
  .he-viz-example__keyline { stroke: var(--he-color-data-categorical-2); stroke-width: 2; }
  .he-viz-example__keypoint { fill: var(--he-color-data-categorical-3); stroke: var(--he-color-background-inverted); stroke-width: 1; }
  .he-viz-example__wick { stroke: var(--he-color-text-secondary); stroke-width: 2; }
  .he-viz-example__candle { fill: var(--he-color-data-categorical-1); }
  .he-viz-example__candle--down { fill: var(--he-color-data-categorical-3); }

  @container (max-width: 24rem) {
    .he-viz-example__plot { min-block-size: 11rem; padding: var(--he-space-2); }
    .he-viz-example__caption { grid-template-columns: minmax(0, 1fr); }
    .he-viz-example__caption code { justify-self: start; }
  }

  @container (max-width: 32rem) {
    .he-viz__header { display: grid; }
    .he-viz__plot { min-block-size: 12rem; }
    .he-viz__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .he-viz * { animation: none !important; transition: none !important; }
  .he-viz-example * { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .he-viz-example__line, .he-viz-example__trend, .he-viz-example__edge, .he-viz-example__route, .he-viz-example__box, .he-viz-example__keyline, .he-viz-example__wick { stroke: CanvasText; }
  .he-viz-example__bar, .he-viz-example__dot, .he-viz-example__heat, .he-viz-example__distribution, .he-viz-example__composition, .he-viz-example__node, .he-viz-example__map-point, .he-viz-example__candle { fill: CanvasText; stroke: Canvas; }
  .he-viz-example__label { fill: CanvasText; }
}