/**
 * Shared non-D3 figure shell.
 *
 * Every selector excludes data-renderer="d3" so bespoke D3 figures retain
 * their original layout, typography and responsive behaviour.
 */
:root {
  --chart-surface: var(--pearl-warm);
  --chart-title-size: 1.625rem;
  --chart-subtitle-size: 1rem;
  --chart-label-size: 0.9375rem;
  --chart-note-size: 1rem;
  --chart-meta-size: 0.9375rem;
  --chart-header-inline: 1.75rem;
  --chart-stage-inline: 1.5rem;
}

.e20-viz:not([data-renderer="d3"]) {
  overflow: clip;
  background: var(--chart-surface);
  border-color: var(--limestone);
}

.e20-viz:not([data-renderer="d3"]) > .e20-viz__header {
  padding: 1.5rem var(--chart-header-inline) 1rem;
  border-bottom: 0;
  background: var(--chart-surface);
}

.e20-viz:not([data-renderer="d3"]) > .e20-viz__header h3 {
  max-width: 48rem;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--chart-title-size);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.e20-viz:not([data-renderer="d3"])
  > .e20-viz__header
  > p:last-child,
.e20-viz:not([data-renderer="d3"])
  > .e20-viz__header
  > div
  > p:last-child {
  max-width: 46rem;
  margin-top: 0.5rem;
  color: var(--graphite);
  font-family: var(--font-sans);
  font-size: var(--chart-subtitle-size);
  line-height: 1.5;
}

.e20-viz:not([data-renderer="d3"]) > .e20-viz__stage {
  min-width: 0;
  padding: 1rem var(--chart-stage-inline) 1.25rem;
  background: var(--chart-surface);
}

.e20-viz:not([data-renderer="d3"]) .e20-plot,
.e20-viz:not([data-renderer="d3"]) [data-figure-chart] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.e20-viz:not([data-renderer="d3"]) .choices-viz__note,
.e20-viz:not([data-renderer="d3"]) .publication-editorial__caption {
  padding-inline: var(--chart-header-inline);
  background: var(--chart-surface);
}

.e20-viz:not([data-renderer="d3"]) > .e20-viz__finding,
.e20-viz:not([data-renderer="d3"]) > .e20-condition-line,
.e20-viz:not([data-renderer="d3"]) > .e20-data-panel,
.e20-viz:not([data-renderer="d3"]) > .publication-editorial__data {
  background: var(--chart-surface);
}

.e20-viz:not([data-renderer="d3"])
  .publication-editorial__takeaway,
.e20-viz:not([data-renderer="d3"]) .choices-viz__note {
  color: var(--basalt);
  font-size: var(--chart-note-size);
  line-height: 1.55;
}

.e20-viz:not([data-renderer="d3"])
  .publication-editorial__caveat {
  color: var(--graphite);
  font-size: var(--chart-meta-size);
  line-height: 1.55;
}

.e20-viz:not([data-renderer="d3"]) > .e20-viz__footer {
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 1rem 1.25rem;
  padding: 0.875rem 1.5rem 1.125rem;
  border-top: 1px solid var(--limestone);
  background: var(--chart-surface);
}

.e20-viz:not([data-renderer="d3"]) .e20-viz__brand {
  min-width: 0;
  min-height: 2.75rem;
  padding: 0;
}

.e20-viz:not([data-renderer="d3"]) .e20-viz__brand img {
  width: 6.5rem;
  max-width: 100%;
  height: auto;
}

.e20-viz:not([data-renderer="d3"]) .e20-viz__source {
  max-width: none;
  color: var(--graphite);
  font-size: var(--chart-meta-size);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.e20-viz:not([data-renderer="d3"])
  .e20-viz__actions
  :is(a, button) {
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
}

.e20-viz:not([data-renderer="d3"]) .choices-share__bar {
  height: 2rem;
}

@media (max-width: 760px) {
  :root {
    --chart-title-size: 1.4375rem;
    --chart-header-inline: 1.125rem;
    --chart-stage-inline: 1rem;
  }

  .e20-viz:not([data-renderer="d3"]) > .e20-viz__header {
    padding-block: 1.25rem 0.875rem;
  }

  .e20-viz:not([data-renderer="d3"]) > .e20-viz__stage {
    padding-block: 0.75rem 1rem;
  }

  .e20-viz:not([data-renderer="d3"]) > .e20-viz__footer {
    grid-template-areas:
      "source source"
      "brand actions";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1.125rem 1rem;
  }

  .e20-viz:not([data-renderer="d3"]) .e20-viz__brand img {
    width: 5.375rem;
  }
}

@media (max-width: 360px) {
  :root {
    --chart-header-inline: 0.875rem;
    --chart-stage-inline: 0.75rem;
  }

  .e20-viz:not([data-renderer="d3"]) > .e20-viz__footer {
    padding-inline: 0.875rem;
  }
}

@media (forced-colors: active) {
  .e20-viz:not([data-renderer="d3"]) {
    border-color: CanvasText;
  }
}