/* Page-specific styles. MDWDS, sdac-table.css and sdac-hero.css load first. */

/* Hero with logo */
.sdac-hero.hero.hero--logo { display: flex; align-items: center; gap: 24px; }
.sdac-hero.hero.hero--logo .hero__inner { flex: 1 1 auto; min-width: 0; }
.hero__logo { flex-shrink: 0; width: 140px; height: auto; }

/* Hero and view controls; frozen at the top while the Charts tab is open */
.page-top { padding-bottom: 24px; background: #fff; }
.page-top .view-controls { margin-bottom: 0; }
@media (min-width: 701px) {
  /* MDWDS sets body height: 100%, which would release the sticky header after one screen */
  body.charts-active { height: auto; }
  body.charts-active .page-top { position: sticky; top: 0; z-index: 10; }
}

/* Compact table density: all 16 years fit across the panel on desktop; narrow screens still scroll */
.table-scroll .usa-table { min-width: 0; font-size: clamp(0.7rem, 0.95vw, 0.85rem); }
.table-scroll .usa-table th,
.table-scroll .usa-table td { padding: 0.4rem 0.35rem; white-space: nowrap; }
.table-scroll .usa-table tbody th { white-space: normal; min-width: 7.5em; }
.table-scroll .usa-table td { text-align: right; }
.table-scroll .usa-table thead th:not(:first-child) { text-align: right; }

/* Jurisdiction column stays put while the years scroll sideways */
.table-scroll .usa-table tr > :first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 #dee2e6; }

/* Highest value in each row, and its legend swatch */
.table-scroll .usa-table tbody td.row-max { background: #ffe396; font-weight: 700; }
.swatch { display: inline-block; width: 1.5em; height: 1em; margin-right: 0.5em; vertical-align: middle; border: 1px solid #71767a; }
.swatch--row-max { background: #ffe396; }

/* Charts */
.chart-area { position: relative; height: 440px; padding: 20px; }
.chart-area--tall { height: 560px; }
#chart-view > .panel + .panel { margin-top: 24px; }

@media (max-width: 700px) {
  .hero__logo { width: 80px; }
  .chart-area { height: 340px; padding: 12px; }
}