/* Hazard Change v2 and Zonal Trends v2. Both pages reuse the shared .atlas-v2
   look (styles_vulnerability_v2.css) and the .hz2 side-by-side map layout
   (styles_hazard_v2.css); this file only adds what those two lack. Every rule
   is scoped under .atlas-v2.t2 so it cannot reach any other page. */

/* stepped legend: flat colour classes instead of a gradient */
.atlas-v2.t2 .t2-legend-steps {
  display: flex;
  height: 14px;
  border: 1px solid rgba(20, 32, 26, .38);
}
.atlas-v2.t2 .t2-legend-steps i { flex: 1; display: block; }
.atlas-v2.t2 .t2-legend-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.atlas-v2.t2 .hz2-panel .hz2-legend { max-width: none; }

/* two stat tiles side by side in the story column */
.atlas-v2.t2 .t2-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atlas-v2.t2 .t2-tiles .hz2-stat:last-child { border-left-color: var(--hair); }
.atlas-v2.t2 .t2-stat-ssp245 { border-left-color: #F97316 !important; }
.atlas-v2.t2 .t2-stat-ssp585 { border-left-color: #DC2626 !important; }
.atlas-v2.t2 .t2-stat-rise { border-left-color: #D9725F !important; }

/* charts */
.atlas-v2.t2 .t2-chart-full {
  border-top: 1px solid var(--hair);
  padding-top: 20px;
}
/* zone names are long, so the two zonal charts stack at full width */
.atlas-v2.t2 .t2-charts-even { grid-template-columns: minmax(0, 1fr); }
.atlas-v2.t2 .t2-metric { width: 230px; }

@media (max-width: 1000px) {
  .atlas-v2.t2 .t2-charts-even { grid-template-columns: minmax(0, 1fr); }
}