/* State of CRA page (GH #179) — chunk-internal styles only.
   Content sections are native Bricks + ACSS tokens; this covers the
   interactive/data chunks: progress bar, era chart tabs, map carousel,
   chart frames. ACSS variables throughout. */

/* ── scroll progress bar ─────────────────────────────────────────── */
.socp-progress {
  position: fixed;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2147483647; /* higher than snoop dog */
  pointer-events: none;
  background: transparent;
}
.socp-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transition: width 80ms linear;
}

/* ── chart frame chrome ──────────────────────────────────────────── */
.socp-frame {
  background: var(--neutral-trans-60);
  border: 1px solid var(--primary-trans-50);
  border-radius: var(--radius);
  padding: var(--space-m);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.socp-frame-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light-muted);
  margin: 0 0 var(--space-s);
}
.socp-note,
.socp-source {
  font-size: var(--text-xs);
  color: var(--text-light-muted);
  margin-top: var(--space-s);
}
.socp-source {
  opacity: 0.75;
}

/* recharts output is width-locked at capture time; keep it fluid */
.socp-frame .recharts-wrapper,
.socp-frame .recharts-wrapper svg {
  max-width: 100%;
  height: auto;
}

/* ── era chart tabs + states ─────────────────────────────────────── */
.socp-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-s);
}
.socp-tabs-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light-muted);
  margin-right: var(--space-xs);
}
.socp-tab {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-light-muted);
  background: transparent;
  border: 1px solid var(--primary-trans-50);
  border-radius: var(--radius-circle);
  padding: 0.4em 1.1em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.socp-tab:hover {
  color: var(--text-light);
  border-color: var(--secondary-semi-light);
}
.socp-tab.is-active {
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}
.socp-chart-state {
  display: none;
}
.socp-chart-state.is-active {
  display: block;
}

/* era legend pills under the chart */
.socp-era-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-l); /* clear the x-axis year labels */
}
.socp-era-pill {
  font-size: var(--text-xs);
  color: var(--text-light-muted);
  border: 1px solid var(--neutral-semi-dark);
  border-radius: var(--radius-circle);
  padding: 0.25em 0.9em;
}

/* ── map carousel ────────────────────────────────────────────────── */
.socp-map-slide {
  display: none;
}
.socp-map-slide.is-active {
  display: block;
}
.socp-map-kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4em;
}
.socp-map-title {
  font-family: "ES Build", sans-serif;
  font-size: var(--text-l);
  font-weight: 600;
  color: var(--text-light);
  margin: 0 0 0.3em;
}
.socp-map-sub {
  font-size: var(--text-s);
  color: var(--text-light-muted);
  margin: 0 0 var(--space-s);
}
.socp-map-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.socp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-s);
}
.socp-legend-label {
  flex-basis: 100%;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light-muted);
}
.socp-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--text-xs);
  color: var(--text-light-muted);
}
.socp-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* nav row: arrows + view pills */
.socp-map-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}
.socp-map-arrow {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--primary-trans-50);
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.socp-map-arrow:hover {
  border-color: var(--secondary-semi-light);
}
.socp-map-count {
  flex-basis: 100%;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-light-muted);
  margin-top: 0.4em;
}

/* methodology accordion */
.socp-method {
  margin-top: var(--space-s);
  border: 1px solid var(--neutral-semi-dark);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-xs);
  color: var(--text-light-muted);
}
.socp-method summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-light);
}
.socp-method p {
  margin: 0.6em 0 0;
}

/* ── site-integration + mobile fixes ─────────────────────────────── */
/* Sitewide horizontal clip (header off-canvas/dropdown panels) */
body {
  overflow-x: hidden;
}

/* captured recharts SVGs carry inline width/height/max-height clamps —
   neutralize them all so wrapper and svg scale together (a max-height left
   in place makes the svg overflow the wrapper and overlap what follows) */
.socp-frame .recharts-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}
.socp-frame .recharts-wrapper svg {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* data tables scroll within their card on narrow viewports */
.socp-table {
  overflow-x: auto;
  max-width: 100%;
}

/* Containers on this page must honor the sitewide responsive clamp
   (ACSS [class*="brxe-"] max-width:100%); something page-specific loses
   that battle here, so restate it with container specificity. */
#brx-content .brxe-container {
  max-width: 100%;
}

/* ── chart hover tooltip ─────────────────────────────────────────── */
.socp-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  padding: var(--space-xs);
  background: var(--neutral);
  border: 1px solid var(--primary-trans-50);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow-1);
}
.socp-tooltip[hidden] {
  display: none;
}
.socp-tip-head {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-light);
}
.socp-tip-line {
  font-size: var(--text-xs);
  color: var(--text-light-muted);
}

/* interactive map svg */
.socp-map-host {
  min-height: 320px;
}
.socp-map-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.socp-map-svg path {
  transition: filter 0.1s ease;
}
.socp-map-svg path:hover {
  filter: brightness(1.6);
  stroke: var(--white);
  stroke-width: 0.6;
}

/* ── sticky horizontal jumplink nav ──────────────────────────────── */
.socp-jumpnav {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--gutter);
  background: var(--neutral-trans-90);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--primary-trans-50);
}
.socp-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-light-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-circle);
  padding: 0.35em 1em;
  transition: all 0.2s ease;
}
.socp-jump span {
  color: var(--secondary-semi-light);
  font-size: 0.85em;
}
.socp-jump:hover {
  color: var(--text-light);
  border-color: var(--primary-trans-50);
}
.socp-jump.is-active {
  color: var(--white);
  background: var(--primary-trans-30);
  border-color: var(--primary);
}

/* jumpnav: single scrollable row on small screens */
@media (max-width: 767px) {
  .socp-jumpnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .socp-jumpnav::-webkit-scrollbar {
    display: none;
  }
  .socp-jump {
    flex-shrink: 0;
  }
}

/* ── map zoom controls ───────────────────────────────────────────── */
.socp-zoom-ui {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}
.socp-zoom-ui button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-m);
  line-height: 1;
  color: var(--text-light);
  background: var(--neutral-trans-90);
  border: 1px solid var(--primary-trans-50);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.socp-zoom-ui button:hover {
  border-color: var(--secondary-semi-light);
}
.socp-map-host.is-zoomed .socp-map-svg {
  cursor: grab;
}
.socp-map-host.is-zoomed .socp-map-svg:active {
  cursor: grabbing;
}

/* dynamic era chart state */
.socp-chart-dyn {
  display: none;
}
.socp-chart-dyn.is-active {
  display: block;
}
.socp-era-filters {
  margin-top: calc(var(--space-xs) * -0.5);
}