.insights-page {
  background: linear-gradient(135deg, #ffffff 0%, #f2f6fa 100%);
  border: 1px solid #d7e1eb;
  border-radius: 12px;
  margin: 0.5rem;
  padding: 1rem;
}

.insights-title {
  color: #073b5a;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.insights-cards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 0.75rem;
}

.insight-card {
  background: #ffffff;
  border: 1px solid #d7e1eb;
  border-radius: 10px;
  padding: 0.75rem;
}

.insight-label {
  color: #476276;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.insight-value {
  color: #0b2f45;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.insight-sub,
.insights-summary {
  color: #29485f;
  font-size: 0.86rem;
  line-height: 1.45;
}

.insights-empty {
  color: #3f5a6f;
  margin: 0;
}

.insights-table-wrap {
  overflow-x: auto;
}

.insights-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.insights-table th,
.insights-table td {
  border-bottom: 1px solid #d7e1eb;
  padding: 0.5rem 0.45rem;
  text-align: left;
}

.insights-table th {
  color: #073b5a;
  font-weight: 700;
}

.insights-details .insights-summary {
  margin-bottom: 0.65rem;
}

.global-insights-overlay {
  align-items: center;
  backdrop-filter: blur(6px);
  background:
    radial-gradient(circle at 12% 12%, rgba(22, 102, 153, 0.22), transparent 42%),
    radial-gradient(circle at 86% 84%, rgba(18, 46, 92, 0.24), transparent 45%),
    rgba(7, 23, 41, 0.62);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  position: fixed;
  z-index: 1200;
}

.global-insights-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 42%, #fdfefe 100%);
  border: 1px solid #d7e3f0;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(2, 13, 30, 0.28);
  max-height: min(92vh, 960px);
  max-width: 1320px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
  position: relative;
  width: min(1320px, 96vw);
  animation: globalInsightsPanelIn 240ms ease-out;
}

.global-insights-header {
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #dce8f2;
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.2rem;
  position: relative;
  z-index: 1;
}

.global-insights-header .insights-title {
  line-height: 1.2;
  margin: 0;
}

.global-insights-close {
  border-radius: 999px;
  min-width: 7rem;
  transition: transform 120ms ease, box-shadow 160ms ease;
}

.global-insights-close:hover {
  box-shadow: 0 4px 12px rgba(11, 69, 112, 0.2);
  transform: translateY(-1px);
}

#globalInsightsBody {
  max-height: none;
  overflow: auto;
  padding: 1rem 1.2rem 1.25rem;
  scroll-padding-top: 1rem;
}

.global-insights-loading {
  align-items: center;
  color: #23485f;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: center;
  min-height: 280px;
}

.global-insights-loading p {
  margin: 0;
}

.global-insights-spinner {
  animation: globalInsightsSpin 0.85s linear infinite;
  border: 3px solid #d4e5f3;
  border-radius: 50%;
  border-top-color: #1d6c9b;
  height: 30px;
  width: 30px;
}

@keyframes globalInsightsSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.global-insights-hero {
  background: radial-gradient(circle at top right, #d1e8ff 0%, #eaf3ff 38%, #f8fbff 100%);
  border: 1px solid #c9def5;
  border-radius: 14px;
  margin-bottom: 0.85rem;
  padding: 0.95rem 1rem;
}

.global-insights-kicker {
  color: #1a4f73;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 0.2rem;
  text-transform: uppercase;
}

.global-insights-text {
  color: #29485f;
  font-size: 0.9rem;
  margin: 0;
}

.global-kpis {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 0.95rem;
}

.global-kpi-card {
  background: #fff;
  border: 1px solid #d6e2ef;
  border-radius: 10px;
  min-height: 92px;
  padding: 0.75rem;
  transition: box-shadow 180ms ease, transform 120ms ease;
}

.global-kpi-card:hover {
  box-shadow: 0 8px 18px rgba(9, 56, 90, 0.12);
  transform: translateY(-1px);
}

.global-kpi-card .kpi-label {
  color: #476276;
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.global-kpi-card strong {
  color: #083654;
  display: block;
  font-size: 1.05rem;
  line-height: 1.3;
}

.global-driver-strip {
  margin-bottom: 0.85rem;
}

.global-section-title {
  color: #1f4f6d;
  font-size: 0.84rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.global-driver-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.global-driver-chip {
  background: #edf4fb;
  border: 1px solid #d3e3f2;
  border-radius: 999px;
  color: #1e4d6a;
  font-size: 0.8rem;
  padding: 0.3rem 0.55rem;
}

.global-ranking-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 0.9rem;
}

.global-chart-card {
  background: #fff;
  border: 1px solid #d6e2ef;
  border-radius: 10px;
  padding: 0.65rem;
  transition: box-shadow 180ms ease;
}

.global-chart-card:hover {
  box-shadow: 0 8px 18px rgba(9, 56, 90, 0.1);
}

.global-chart-card-head {
  align-items: center;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: auto 1fr auto;
  margin-bottom: 0.5rem;
}

.global-rank {
  background: #0b4570;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 2.1rem;
  padding: 0.18rem 0.5rem;
  text-align: center;
}

.global-chart-card-head h4 {
  color: #0f3b58;
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0;
}

.global-trend {
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
}

.global-trend.is-up {
  background: #e5f8ea;
  color: #0c5b28;
}

.global-trend.is-down {
  background: #ffe8ea;
  color: #9f2131;
}

.global-trend.is-flat {
  background: #eef2f6;
  color: #4a6072;
}

.global-intensity-track {
  background: #e9f0f7;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.global-sparkline-wrap {
  margin-bottom: 0.45rem;
}

.global-sparkline-hc {
  height: 30px;
  width: 100%;
}

.global-sparkline-empty {
  color: #6f8190;
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.15rem 0;
}

.global-intensity-track span {
  background: linear-gradient(90deg, #0d4f79 0%, #2e7fb1 100%);
  display: block;
  height: 100%;
}

.global-chart-metrics {
  color: #2b4b60;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.79rem;
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.global-insights-details {
  border-top: 1px solid #d7e1eb;
  padding-top: 0.65rem;
}

.global-insights-details summary {
  color: #174a6a;
  cursor: pointer;
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.insight-infographic-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
}

.insight-infographic-block,
.insight-takeaways,
.global-kpi-card,
.global-chart-card {
  background: #fff;
  border: 1px solid #e3e7ed;
  border-radius: 12px;
  padding: 2rem;
}

.infographic-block-head h4,
.insight-takeaways h4 {
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

.infographic-block-head p {
  color: #445766;
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

.insight-mini-bar {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(120px, 1fr) 2fr auto;
  margin: 0.5rem 0;
}

.mini-bar-label {
  color: #243b53;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-bar-track {
  background: #edf2f7;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.mini-bar-fill {
  background: #445766;
  border-radius: 999px;
  display: block;
  height: 100%;
}

.mini-bar-fill.is-up {
  background: #0e8a3d;
}

.mini-bar-fill.is-down {
  background: #b3263a;
}

.mini-bar-fill.is-flat,
.mini-bar-fill.is-neutral {
  background: #445766;
}

.mini-bar-fill.is-driver {
  background: #1f6fba;
}

.mini-bar-fill.is-category {
  background: #6b4eff;
}

.insight-takeaways {
  margin-top: 1rem;
}

.insight-takeaways ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.insight-takeaways li {
  margin-bottom: 0.35rem;
}

@media (max-width: 768px) {
  .insight-infographic-grid {
    grid-template-columns: 1fr;
  }

  .insight-mini-bar {
    gap: 0.35rem;
    grid-template-columns: 1fr;
  }
}

.story-card-section-title {
  color: #1f4f6d;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0.85rem 0 0.45rem;
  text-transform: uppercase;
}

.story-deep-facts {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.75rem;
}

.story-deep-facts div {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  padding: 0.55rem;
}

.story-deep-facts span,
.story-deep-facts small {
  color: #445766;
  display: block;
  font-size: 0.72rem;
}

.story-deep-facts strong {
  color: #0b2f45;
  display: block;
  font-size: 0.88rem;
  margin: 0.15rem 0;
}

.story-breakdown {
  margin-top: 0.75rem;
}

.story-breakdown-row {
  align-items: center;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(120px, 1fr) 1.5fr auto;
  margin: 0.35rem 0;
}

.story-breakdown-label {
  color: #243b53;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-breakdown-track {
  background: #edf2f7;
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.story-breakdown-fill {
  background: linear-gradient(90deg, var(--story-color, #1f6fba), #6aa9d8);
  border-radius: 999px;
  display: block;
  height: 100%;
}

.story-breakdown-row strong {
  color: #0b2f45;
  font-size: 0.76rem;
  white-space: nowrap;
}

.story-interpretation {
  background: #f7f9fc;
  border-left: 3px solid var(--story-color, #1f6fba);
  border-radius: 10px;
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
}

.story-interpretation p {
  color: #29485f;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
}

.theme-donut-card {
  margin-top: 1rem;
}

.theme-donut {
  height: 280px;
  width: 100%;
}

.theme-mini-summaries {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.theme-summary-card {
  background: #ffffff;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  padding: 0.65rem;
}

.theme-summary-card h5 {
  color: #0f3b58;
  font-size: 0.86rem;
  margin: 0 0 0.25rem;
}

.theme-summary-card p,
.theme-summary-card small {
  color: #445766;
  display: block;
  margin: 0;
}

.coverage-timeline {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .story-deep-facts,
  .story-breakdown-row {
    grid-template-columns: 1fr;
  }
}

.stacked-chart {
  margin-top: 0.75rem;
}

.stacked-track {
  background: #edf2f7;
  border-radius: 999px;
  display: flex;
  height: 14px;
  overflow: hidden;
  width: 100%;
}

.stacked-track span {
  display: block;
  height: 100%;
}

.stacked-legend {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
}

.stacked-legend-item {
  align-items: center;
  color: #243b53;
  display: inline-flex;
  gap: 0.35rem;
}

.stacked-legend-item i {
  border-radius: 999px;
  display: inline-block;
  height: 0.65rem;
  width: 0.65rem;
}

.trend-segment-up,
.stacked-legend-item i.trend-segment-up {
  background: #0e8a3d;
}

.trend-segment-down,
.stacked-legend-item i.trend-segment-down {
  background: #b3263a;
}

.trend-segment-flat,
.stacked-legend-item i.trend-segment-flat {
  background: #445766;
}

.policy-segment-good,
.stacked-legend-item i.policy-segment-good {
  background: #0e8a3d;
}

.policy-segment-bad,
.stacked-legend-item i.policy-segment-bad {
  background: #b3263a;
}

.policy-segment-stable,
.stacked-legend-item i.policy-segment-stable {
  background: #445766;
}

.policy-segment-neutral,
.stacked-legend-item i.policy-segment-neutral {
  background: #1f6fba;
}

.mini-bar-fill.is-dataset {
  background: #805ad5;
}

.insights-row {
  display: flex;
  gap: 1rem;
}

.insight-alert-panel {
  background: #fff8e6;
  border: 1px solid #ffe1a8;
  border-radius: 16px;
  color: #3f3a20;
  margin-top: 1rem;
  padding: 1rem;
}

.insight-alert-panel h4 {
  color: #6f4e00;
  font-size: 1rem;
  margin: 0;
}

.insight-alert-panel ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.insight-alert-panel li {
  margin-bottom: 0.35rem;
}

@keyframes globalInsightsPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-insights-panel,
  .global-insights-close,
  .global-kpi-card,
  .global-chart-card {
    animation: none;
    transition: none;
  }
}

@media (max-width: 768px) {
  .global-insights-panel {
    width: min(1320px, 100%);
  }

  .global-insights-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 0.85rem 0.9rem;
  }

  .global-insights-close {
    width: 100%;
  }

  #globalInsightsBody {
    max-height: none;
    padding: 0.85rem 0.9rem 1rem;
  }
}