@media (min-width:1051px) { .research-layout { grid-template-columns:220px minmax(0,1fr); } }
@media (min-width:851px) and (max-width:1050px) { .research-layout { grid-template-columns:180px minmax(0,1fr); } }

html[data-theme="dark"] .research-rail nav a.active { background: #141414; }

.design-insight svg,
.emissions-insight svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #fff;
}

.chart-scroll-hint { display: none; }
.chart-scroll-region:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
}

/* Preserve the figure's label size on phones without widening the page. */
@media screen and (max-width: 600px) {
  .chart-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    color: var(--gray);
    font-size: 12px;
    line-height: 1.5;
  }
  .chart-scroll-hint span { font-size: 18px; line-height: 1; }
  .chart-scroll-region {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gray) var(--paper);
    padding-bottom: 8px;
  }
  .chart-scroll-region svg { min-width: 900px; }
}

.design-insight svg {
  --design-ink: #26302b;
  --design-muted: #656569;
  --design-label-accent: #187638;
  --design-canvas: #fff;
  --design-development: #e7f6ec;
  --design-production: #f5f5f5;
  --design-hatch: #d8e1d9;
  --design-area: #3c3c3e;
  --design-divider: #c4cac5;
  --design-axis: #adb5ae;
}

html[data-theme="dark"] .design-insight svg {
  --design-ink: #fff;
  --design-muted: #b6b6ba;
  --design-label-accent: #4bdf73;
  --design-canvas: #000;
  --design-development: #102017;
  --design-production: #141414;
  --design-hatch: #303b32;
  --design-area: #555558;
  --design-divider: #424845;
  --design-axis: #555b57;
  background: #000;
}

.emissions-insight svg {
  /* Brighter shades of the report's burgundy hue, tuned for each canvas. */
  --emissions-accent: #d5243c;
  --emissions-ink: #3c3c3e;
  --emissions-muted: #6e6e70;
  --emissions-surface: #fff;
  --emissions-grid: #dcdcdf;
  --emissions-bar: #3c3c3e;
}

html[data-theme="dark"] .emissions-insight svg {
  --emissions-accent: #ff5d73;
  --emissions-ink: #fff;
  --emissions-muted: #b6b6ba;
  --emissions-surface: #000;
  --emissions-grid: #414145;
  --emissions-bar: #8d8d93;
  background: #000;
}

/* Print the complete chart, including when the browser does not fire beforeprint. */
@media print {
  .design-insight [data-design-reveal],
  .design-insight [data-design-caption-reveal] {
    x: 550px;
    width: 1484px;
  }

  .design-insight [data-design-statistic],
  .design-insight [data-design-marker] {
    transform: none !important;
    opacity: 1 !important;
  }

  .design-insight [data-design-marker-line] {
    stroke-dashoffset: 0 !important;
  }
}

.emissions-insight [data-emissions-percent] { font-variant-numeric:tabular-nums; }
@media print {
 .emissions-insight [data-emissions-reveal] { x:596px; width:1518px; }
 .emissions-insight [data-emissions-statistic] { opacity:1!important; }
 .emissions-insight[data-emissions-progress] [data-emissions-bar] { y:var(--emissions-final-y); height:var(--emissions-final-height); }
}