/*BAROMETER CSS*/

/* Base hidden state for sidebar – starts off-screen left */
.bgp-md-left {
  opacity: 0;
  transform: translateX(-60px);          /* slide distance – tweak as needed */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: 0.4s;                /* slight delay so it doesn't compete with header */
}

/* Revealed state – slides in from left */
.bgp-md-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Optional: stagger the inner country list items (buttons) for extra polish */
.bgp-countrylist-items .bgp-countrybtn {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 1.0s ease-out, transform 0.8s ease-out;
}

/* Stagger delay per item (CSS variable or :nth-child) */
.bgp-countrylist-items .bgp-countrybtn:nth-child(1) { transition-delay: 0.4s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(2) { transition-delay: 0.5s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(3) { transition-delay: 0.6s; }
/* ... continue or use JS for dynamic staggering if many items */

/* When sidebar is visible, animate children */
.bgp-md-left.is-visible .bgp-countrybtn {
  opacity: 1;
  transform: translateX(0);
}



/* Base hidden state – starts off-screen to the right */
.bgp-md-right {
  opacity: 0;
  transform: translateX(240px);           /* starts 80px to the right – adjust distance */
  transition: 
    opacity 1.2s ease-out,
    transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);  /* smooth overshoot feel */
  transition-delay: 0.65s;               /* tiny delay so left sidebar can start first */
  will-change: opacity, transform;       /* performance hint */
}

/* Revealed state – slides in from right */
.bgp-md-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}


/* Optional: give inner panels/cards a subtle cascade/fade */
.bgp-panelwrap > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.bgp-md-right.is-visible .bgp-panelwrap > * {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children slightly (first child no delay, others cascade) */
.bgp-panelwrap > *:nth-child(1) { transition-delay: 0.1s; }
.bgp-panelwrap > *:nth-child(2) { transition-delay: 0.25s; }
.bgp-panelwrap > *:nth-child(3) { transition-delay: 0.4s; }
/* Add more if you have many top-level children */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .bgp-md-right,
  .bgp-md-right * {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}



.bgp-md{
  max-width: var(--bg-max, 960px);
  margin: 0 auto;
  padding: 16px 14px 60px;
}

    .bgp-md-shell{
  display: grid;
  grid-template-columns: 256px 1fr;
  gap: 16px;
  align-items: start;
}

    /*Sidebar*/
    .bgp-md-left{
  position: sticky;
  top: 80px;
  align-self: start;
  z-index: 10;
  margin-bottom: 40px;
}

    /*Country list*/
    .bgp-countrylist{
  background: var(--bg-card, #16262C);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

    .bgp-countrylist-head{
  padding: 10px 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

    .bgp-countrylist-title{
  margin: 0;
  font-size: 13.5px;
  letter-spacing: .3px;
  opacity: .95;
}

    .bgp-countrylist-sub{
  margin: 4px 0 0;
  font-size: 12px;
  opacity: .75;
  line-height: 1.35;
}

    .bgp-countrylist-items{
  display: block;
}

    /*Country buttons*/
    .bgp-countrybtn{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  text-align: left;
  color: inherit;
}

    .bgp-countrybtn:last-child{
  border-bottom: 0;
}

    .bgp-countrybtn:hover{
  background: rgba(255,255,255,.04);
}

    .bgp-countrybtn[aria-selected="true"]{
  background: rgba(0,114,153,.35);
  color: #fff;
  font-weight: 900;
  border-left: 4px solid #007299;
  padding-left: 6px;
}

    .bgp-countrybtn .bgp-flag{
  width: 18px;
  height: 13.5px;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}

    .bgp-countrybtn .bgp-countryname{
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.1;
}

    .bgp-countrybtn .bgp-years{
  font-size: 11.5px;
  opacity: .7;
  margin-left: auto;
  flex: 0 0 auto;
}

    /*Panels: only one active*/
    .bgp-country-panel{
  display: none;
}
    .bgp-country-panel.is-active{
  display: block;
}

    /*Chart grid base*/
    .bgp-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  align-items: start;
  margin-top: 20px;
}

    .bgp-grid > .bgp-section{
  grid-column: 1 / -1;
}

    .bgp-panel{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

    .bgp-panel:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}

    /*Panel 1: hero*/
    .bgp-panel.panel-1{
  grid-column: 1 / -1;
  aspect-ratio: 1 / 1;
  max-width: 540px;
  margin: 0 auto 48px;
}

    .bgp-panel.panel-1 img.bgp-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

    /*Thumbnails*/
    .bgp-panel:not(.panel-1){
  aspect-ratio: 4 / 3;
  height: 240px;
  max-height: 240px;
}

    /*(merged: this selector appeared twice; kept combined “winning” proper…*/
    .bgp-panel:not(.panel-1) img.bgp-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.28s ease;
  filter: brightness(1.5) contrast(1.05);
}

    .bgp-panel:not(.panel-1):hover img.bgp-img{
  transform: scale(1.06);
}

    /*Responsive*/
    @media (max-width: 1023px){
      .bgp-md-shell{
  grid-template-columns: 1fr;
}
      .bgp-md-left{
  position: relative;
  top: auto;
  margin-bottom: 16px;
}
      .bgp-grid{
  grid-template-columns: 1fr;
  gap: 16px;
}
      .bgp-panel.panel-1{
  max-width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 32px;
}
      .bgp-panel:not(.panel-1){
  height: 200px;
  aspect-ratio: 16 / 10;
}
    }

    @media (min-width: 1024px){
      body.bgp-barometer .bgp-country-panel .bgp-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
    }

    /*Lightbox (unchanged)*/
    .bgp-lightbox .bgp-lightbox-inner{
  position: relative !important;
  padding: 20px 72px 20px 20px !important;
  border-radius: 18px !important;
  background: rgba(18, 24, 28, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 35px 90px rgba(0,0,0,0.65) !important;
  overflow: hidden !important;
}

    .bgp-lightbox .bgp-lightbox-frame{
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  background: rgba(0,0,0,0.35) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset !important;
}

    .bgp-lightbox .bgp-lightbox-frame img{
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 84vw !important;
  max-height: 84vh !important;
  border-radius: 8px !important;
}

    .bgp-lightbox-actions{
  position: absolute;
  top: 20px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

    .bgp-lb-btn{
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

    .bgp-lb-btn:hover{
  background: rgba(0,0,0,0.70) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

    .bgp-lb-btn svg{
  width: 18px !important;
  height: 18px !important;
}

    .bgp-mmodal-inner{
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  background: rgba(20, 28, 32, 0.97);
  box-shadow: 0 25px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;
  overflow: hidden;
}

    /*BGP COVERFLOW (REFRACTORED) — "CENTER CARD + MINI PEEKS" - Removes AL…*/

    /*Stage*/
    .bgp-coverflow{
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  display: block !important;
  min-height: 720px !important;
  background: none !important;
  perspective: none !important;
  margin: 60px 0 80px !important;
  padding: 0 !important;
}

    /*KILL any old overlay panels*/
    .bgp-coverflow::before,
    .bgp-coverflow::after{
  content: none !important;
  display: none !important;
}

    /*Covers (ONLY active is visible) ---------- (*/
    .bgp-cover{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(820px, 85vw) !important;
  border-radius: 20px !important;
  background: rgba(28, 38, 48, 0.94) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
  z-index: 10 !important;
}

    /*Also ignore any legacy data-pos styling*/
    .bgp-cover[data-pos]{
  
}

    /*Active cover (*/
    .bgp-cover.is-active{
  z-index: 40 !important;
  border-color: rgba(0, 180, 240, 0.60) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.80),
        0 0 0 2px rgba(0, 180, 240, 0.50) inset !important;
  background: rgba(28, 38, 48, 0.98) !important;
}

    /*Cover header/body*/
    .bgp-cover-head{
  padding: 20px 28px !important;
  font-size: 22px !important;
  border-bottom: 1px solid rgba(255,255,255,0.09) !important;
  background: rgba(20, 30, 40, 0.7) !important;
  text-align: center !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
}

    .bgp-cover-body{
  display: none !important;
  padding: 28px 26px !important;
  overflow: hidden !important;
}
    .bgp-cover.is-active .bgp-cover-body {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 22px 22px !important;
  justify-content: center !important;
  justify-items: center !important;
  padding: 0 !important;

}

/* Desktop only */
@media (min-width: 1024px) {

  /* Make panel-5 span the full row and center itself when active */
  .bgp-cover.is-active .bgp-panel.panel-5 {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }

}

    /*Make 2x2 cards always fit comfortably*/
    @media (min-width: 1024px){
      .bgp-cover.is-active .bgp-panel{
  height: 240px !important;
}
      .bgp-cover.is-active .bgp-panel img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
    }

    /*Reuse your existing sizing*/
    .bgp-cover.is-active{
  --bgp-thumb-h: 240px;
  --bgp-gap: 22px;
}

    .bgp-cover.is-active.peek-hovered {
  opacity: 0.65 !important;
  filter: blur(1.4px) brightness(0.94) !important;
  transition: opacity 240ms ease, filter 240ms ease !important;
}
  

    /*If this cover contains only the Gapometer chart, make it 2x2 area*/
    .bgp-cover--gapometer.is-active .bgp-cover-body{
  grid-template-columns: repeat(2, 1fr) !important;
}


    .bgp-cover--gapometer.is-active .bgp-panel img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}



    /*Mini Peek Cards*/
    .bgp-peek{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 190px !important;
  height: 260px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(20,28,32,0.70) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.60) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 20 !important;
  opacity: 0.92 !important;
  transition: transform 220ms ease, opacity 220ms ease, filter 420ms ease !important;
}

    .bgp-peek.left{
  left: 48px !important;
}
    .bgp-peek.right{
  right: 48px !important;
}

.bgp-peek:hover{
  z-index: 45 !important;
  opacity: 1 !important;
  filter: blur(0) brightness(1.10) contrast(1.08) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

    .bgp-peek .bgp-peek-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.08) !important;
  filter: blur(1.2px) brightness(0.95) contrast(1.05) !important;
}

    .bgp-peek .bgp-peek-cap{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 10px 10px 9px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .25px !important;
  color: rgba(255,255,255,0.92) !important;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0)) !important;
  text-shadow: 0 10px 30px rgba(0,0,0,0.85) !important;
}

    .bgp-peek.left::after{
  content: "‹" !important;
  left: 10px !important;
}
    .bgp-peek.right::after{
  content: "›" !important;
  right: 10px !important;
}



    /*Mobile: stacked*/
    @media (max-width: 1023px){
      .bgp-coverflow{
  margin: 40px 0 60px !important;
}

      .bgp-cover{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  margin: 0 0 18px !important;
}

      .bgp-peek{
  display: none !important;
}

      .bgp-cover-body{
  display: none !important;
}
      .bgp-cover.is-active .bgp-cover-body{
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}
    }

    body.bgp-barometer .bgp-wrap{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

    body.bgp-barometer .bgp-md{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

    /*Force the master-detail grid to be wide again*/
    body.bgp-barometer .bgp-md-shell{
  display: grid !important;
  grid-template-columns: minmax(280px, 340px) 1fr !important;
  gap: 32px !important;
  max-width: 1920px !important;
  margin: 0 auto !important;
  padding: 0 5vw !important;
  box-sizing: border-box !important;
  align-items: start !important;
}

    /*Sidebar sizing*/
    body.bgp-barometer .bgp-md-left{
  width: 340px !important;
  min-width: 280px !important;
}

    /*Right pane must be allowed to shrink/expand*/
    body.bgp-barometer .bgp-md-right{
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 0 80px !important;
}

    /*Make sure nothing upstream is “boxing” the carousel*/
    body.bgp-barometer .bgp-panelwrap,
    body.bgp-barometer .bgp-panelwrap > div{
  max-width: none !important;
  width: 100% !important;
}

    /*Transition helpers: allow 2 covers visible during swap*/
    .bgp-cover.is-animating-out,
    .bgp-cover.is-animating-in{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

    /*Put the incoming card on top*/
    .bgp-cover.is-animating-in{
  z-index: 45 !important;
}
    .bgp-cover.is-animating-out{
  z-index: 35 !important;
}

    /*Show 2x2 grid while animating (otherwise you only see the title)*/
    .bgp-cover.is-animating-in .bgp-cover-body,
    .bgp-cover.is-animating-out .bgp-cover-body{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 22px 22px !important;
}

    /*FORCE GAPOMETER TO BE A TRUE SQUARE (wins against everything)*/
    .bgp-coverflow section.bgp-cover--gapometer.is-active .bgp-cover-body{
  justify-items: center !important;
}

    /*make the label + img actually fill the square*/
    .bgp-coverflow section.bgp-cover--gapometer.is-active .bgp-cover-body > .bgp-panel.panel-1 label{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

    .bgp-coverflow section.bgp-cover--gapometer.is-active .bgp-cover-body > .bgp-panel.panel-1 img.bgp-img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

    .bgp-peek .bgp-peek-mini{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 0.96 !important;
}

    .bgp-peek .bgp-peek-mini-head{
  padding: 10px 10px 8px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: .25px !important;
  color: rgba(255,255,255,0.92) !important;
  background: rgba(0,0,0,0.35) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  text-shadow: 0 10px 30px rgba(0,0,0,0.55) !important;
}

    .bgp-peek .bgp-peek-mini-grid{
  flex: 1 1 auto !important;
  display: grid !important;
  gap: 6px !important;
  padding: 10px !important;
  background: rgba(0,0,0,0.20) !important;
}

    .bgp-peek .bgp-peek-mini-grid[data-count="1"]{
  grid-template-columns: 1fr !important;
}
    .bgp-peek .bgp-peek-mini-grid:not([data-count="1"]){
  grid-template-columns: repeat(2, 1fr) !important;
}

    .bgp-peek .bgp-peek-tile{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  filter: blur(1.6px) brightness(0.98) contrast(1.05) !important;
  transform: scale(1.06) !important;
}


    /*guaranteed dissolve trigger*/
    .bgp-peek.bgp-peek-updating .bgp-peek-mini-head,
    .bgp-peek.bgp-peek-updating .bgp-peek-mini-grid{
  opacity: 0 !important;
  transform: translateY(6px) !important;
}

    .bgp-peek.bgp-peek-updating{
  opacity: 0.6 !important;
}

    /*FORCE PEEKS TO RENDER (protect against global button/reset CSS)*/
    .bgp-coverflow {
  position: relative !important;
}

    .bgp-coverflow > .bgp-peek{
  display: block !important;
  visibility: visible !important;
  opacity: 0.92 !important;
  pointer-events: auto !important;
}

    /*SPEED DIALS (merged; last wins)*/
    :root{
  --bgp-incoming: 1500ms;
  --bgp-peekfade: 1500ms;
  --bgp-ease: cubic-bezier(0.16, 1, 0.30, 1);
  --bgp-incoming-ease: cubic-bezier(0.16, 1, 0.30, 1);
  --bgp-in-opacity-from: 0;
  --bgp-in-opacity-to: 1;
  --bgp-in-blur-from: 12px;
  --bgp-in-blur-to: 0px;
}

    /*Peek timing control (final winner uses --bgp-peekfade)*/
    .bgp-peek .bgp-peek-mini-head,
    .bgp-peek .bgp-peek-mini-grid{
  transition: opacity var(--bgp-peekfade) ease,
        transform var(--bgp-peekfade) ease !important;
  will-change: opacity, transform !important;
}

    /*default "resting" state*/
    .bgp-peek .bgp-peek-mini-head,
    .bgp-peek .bgp-peek-mini-grid{
  opacity: 1 !important;
  transform: translateY(0) !important;
}

    /*Respect reduced motion*/
    @media (prefers-reduced-motion: reduce){
      .bgp-peek,
      .bgp-peek .bgp-peek-mini-head,
      .bgp-peek .bgp-peek-mini-grid{
  transition: none !important;
}
    }

.bgp-cover{
  opacity: 1 !important;
  filter: none !important;
  transform: translate(-50%, -50%) translateX(var(--tx, 0%)) scale(1) !important;
  transition: none !important;
}



    /*PANEL STRUCTURE*/

    .bgp-panel:not(.panel-1) {
  display: flex !important;
  flex-direction: column !important;
  height: 280px !important;
  max-height: 280px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.02) !important;
  border-radius: 12px !important;
}

    .bgp-panel:not(.panel-1) .bgp-cap {
  order: -1 !important;
  flex: 0 0 auto !important;
  height: 64px !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 8px 12px !important;
  background: rgba(0, 20, 0, 0.125) !important;
  border-bottom: 1px solid rgba(0,0,0,0) !important;
  overflow: hidden !important;
}

    /*CAPTION TEXT (PSEUDO ELEMENT)*/

    .bgp-panel:not(.panel-1) .bgp-cap::before {
  content: "" !important;
  color: #e2e2e2 !important;
  font-size: 16px !important;
  line-height: 1.32 !important;
  font-weight: 300 !important;
  letter-spacing: 0.3px !important;
  white-space: pre-line !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

    /*Panel-specific caption text*/
    .bgp-panel.panel-3  .bgp-cap::before {
  content: "What Share of Women Become Mothers?" !important;
}
    .bgp-panel.panel-4  .bgp-cap::before {
  content: "How Many Children Do Mothers Have?" !important;
}
    .bgp-panel.panel-5  .bgp-cap::before {
  content: "At What Age Do Women Become Mothers?" !important;
}
    .bgp-panel.panel-7  .bgp-cap::before {
  content: "How Low Are Overall Births?" !important;
}
    .bgp-panel.panel-8  .bgp-cap::before {
  content: "What is the Future Trajectory?" !important;
}
    .bgp-panel.panel-9  .bgp-cap::before {
  content: "What Share of Women\A Remain Childless for Life?" !important;
}
    .bgp-panel.panel-10 .bgp-cap::before {
  content: "What Share of Mothers Have\A Exactly One Child?" !important;
}
    .bgp-panel.panel-11 .bgp-cap::before {
  content: "What Share of Mothers Have\A Exactly Two Children?" !important;
}
    .bgp-panel.panel-12 .bgp-cap::before {
  content: "What Share of Mothers Have\A Three or More Children?" !important;
}
    .bgp-panel.panel-13 .bgp-cap::before {
  content: "How Many Babies Are Born\A Each Year?" !important;
}
    .bgp-panel.panel-14 .bgp-cap::before {
  content: "How Do Births\A Compare to Future Retirees?" !important;
}

    /*Slight tonal overrides for specific panels*/
    .bgp-panel.panel-3  .bgp-cap::before,
    .bgp-panel.panel-4  .bgp-cap::before,
    .bgp-panel.panel-5  .bgp-cap::before,
    .bgp-panel.panel-7  .bgp-cap::before,
    .bgp-panel.panel-8  .bgp-cap::before,
    .bgp-panel.panel-9  .bgp-cap::before,
    .bgp-panel.panel-10 .bgp-cap::before,
    .bgp-panel.panel-11 .bgp-cap::before,
    .bgp-panel.panel-12 .bgp-cap::before,
    .bgp-panel.panel-13 .bgp-cap::before,
    .bgp-panel.panel-14 .bgp-cap::before {
  color: #d4d4d4 !important;
  font-weight: 400 !important;
}

    /*IMAGE LAYOUT*/

    .bgp-panel:not(.panel-1) .bgp-thumb-unified {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 12px 16px !important;
  margin: 0 !important;
}

    .bgp-panel:not(.panel-1) img.bgp-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 6px !important;
  transition: transform 0.28s ease !important;
}

    .bgp-panel:not(.panel-1):hover img.bgp-img {
  transform: scale(1.06) !important;
}

    /*COVERFLOW NAV BUTTONS*/

    .bgp-peek::after,
    .bgp-cover::before,
    .bgp-cover::after{
  content: none !important;
  display: none !important;
}

    .bgp-cover.is-active{
  position: relative !important;
}

    .bgp-cover .bgp-nav-btn{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 999 !important;
  display: none !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.70) !important;
  border: 2px solid rgba(0,180,240,0.65) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55) !important;
  color: #e5e5e5 !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  padding-bottom: 2px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 180ms ease,
        border-color 180ms ease,
        box-shadow 220ms ease,
        transform 160ms ease,
        opacity 180ms ease !important;
  opacity: 0.85 !important;
}

    .bgp-cover.is-active .bgp-nav-btn{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

    .bgp-cover .bgp-nav-prev{
  left: -28px !important;
}
    .bgp-cover .bgp-nav-next{
  right: -28px !important;
}

    .bgp-cover .bgp-nav-btn:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(0,180,240,0.55) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
  transform: translateY(-50%) scale(1.04) !important;
  opacity: 1 !important;
}

    .bgp-cover .bgp-nav-btn:active{
  transform: translateY(-50%) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important;
}

    .bgp-cover .bgp-nav-btn:focus-visible{
  outline: 2px solid rgba(0,180,240,0.95) !important;
  outline-offset: 3px !important;
}

    /*MICRO-PEEK GHOSTS*/

    .bgp-peek-ghost{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 124px !important;
  height: 180px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: rgba(14, 22, 26, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55) !important;
  z-index: 15 !important;
  pointer-events: none !important;
  opacity: 0.55 !important;
  filter: blur(0.6px) saturate(0.95) !important;
}

    .bgp-peek-ghost.left  {
  left: -18px !important;
}
    .bgp-peek-ghost.right {
  right: -18px !important;
}

    .bgp-peek-ghost::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--bgp-ghost-img, none) !important;
  background-size: cover !important;
  background-position: center !important;
  filter: blur(2.4px) brightness(0.78) contrast(1.05) !important;
  transform: scale(1.08) !important;
}

    .bgp-peek-ghost::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
        to right,
        rgba(0,0,0,0.50),
        rgba(0,0,0,0.12) 55%,
        rgba(0,0,0,0.35)
      ) !important;
}

    /*MOBILE*/

    @media (max-width: 1023px){
      .bgp-panel:not(.panel-1){
  height: 240px !important;
  max-height: 240px !important;
}

      .bgp-panel:not(.panel-1) .bgp-cap{
  height: 52px !important;
  min-height: 52px !important;
  padding: 6px 10px !important;
  font-size: 11.8px !important;
}

      .bgp-panel:not(.panel-1) .bgp-thumb-unified{
  padding: 8px 10px 12px !important;
}

      .bgp-cover .bgp-nav-btn{
  width: 48px !important;
  height: 48px !important;
  font-size: 28px !important;
  font-weight: 240 !important;
}

      .bgp-cover .bgp-nav-prev{
  left: -22px !important;
}
      .bgp-cover .bgp-nav-next{
  right: -22px !important;
}

      .bgp-peek-ghost{
  display: none !important;
}
    }

    
    .bgp-panel img.bgp-img,
    .bgp-thumb-unified img.bgp-img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 80px !important;
}

/*FORCE BIGGER THUMB PANELS (DESKTOP)*/
@media (min-width: 1024px){

  /*Country grid thumbs*/
  body.bgp-barometer .bgp-country-panel .bgp-panel:not(.panel-1){
  height: 320px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

  body.bgp-barometer .bgp-country-panel .bgp-panel:not(.panel-1) .bgp-cap{
  height: 76px !important;
  min-height: 76px !important;
}

  /*Make sure the image area can actually grow*/
  body.bgp-barometer .bgp-country-panel .bgp-panel:not(.panel-1) .bgp-thumb-unified{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

  /*Coverflow thumbs (the 2x2 inside the active card)*/
  body.bgp-barometer .bgp-cover.is-active .bgp-panel:not(.panel-1){
  height: 320px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

  /*If your coverflow “window” is clipping, raise the stage height too*/
  min-height: 980px !important;
  body.bgp-barometer .bgp-coverflow{
}
}

/*Active card appearance – no corner dimming*/
.bgp-cover {
  border-radius: 20px !important;
  background: rgba(28, 38, 48, 0.98) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4) !important;
}

/*Active card normal state (keep your existing rules)*/
.bgp-cover.is-active {
  z-index: 40 !important;
  border-color: rgba(0, 180, 240, 0.60) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.80), 0 0 0 2px rgba(0, 180, 240, 0.50) inset !important;
  background: rgba(28, 38, 48, 0.98) !important;
  opacity: 1 !important;
  filter: none !important;
  transition: opacity 240ms ease, filter 240ms ease, transform 240ms ease !important;
}

/*When a peek is hovered → fade + blur the active center card*/
.bgp-cover.is-active.peek-hovered {
  opacity: 0.65 !important;
  filter: blur(1.4px) brightness(0.94) !important;
  transform: translate(-50%, -50%) scale(0.98) !important;
}

/*Make hovered peek stand out more (forward + crisp)*/
.bgp-peek:hover {
  z-index: 45 !important;
  opacity: 1 !important;
  filter: blur(0) brightness(1.10) contrast(1.08) !important;
  transform: translateY(-50%) scale(1.05) !important;
  transition: all 220ms ease !important;
}

.bgp-cover-head {
  background: rgba(20, 30, 40, 0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 20px 20px 0 0 !important;
}

/*Sidebar: disable sticky & smooth scroll to prevent jumps*/
.bgp-md-left {
  position: static !important;
  top: auto !important;
  scroll-behavior: auto !important;
}

/*Suppress animation during country switches*/
.bgp-coverflow.bgp-no-anim-country-switch .bgp-cover,
.bgp-coverflow.bgp-no-anim-country-switch .bgp-cover.is-active {
  transition: none !important;
  opacity: 1 !important;
  filter: none !important;
}


.bgp-coverflow {
  margin: 40px auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.bgp-cover {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  /*transform: translate(-50%, -50%) translateX(var(--tx, 0%)) scale(var(--scale, 1)) !important;
  transform-origin: center center !important;*/
  margin: 0 !important;
  box-sizing: border-box !important;
}


.bgp-coverflow,
.bgp-cover {
  margin: 0 !important;
  padding: 0 !important;
}

.bgp-md-right,
.bgp-panelwrap {
  padding: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.bgp-cover {
  will-change: transform, opacity, filter !important;
  backface-visibility: hidden !important;
}




/*Lightbox popup table (single source of truth)*/

.bgp-lightbox-frame,
.bgp-image-wrapper{
  position: relative;
  display: inline-block;
}

.bgp-popup{
  position: absolute;
  right: 18px;
  top: 18px;
  display: inline-block;
  width: auto;
  max-width: min(92vw, 760px);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10, 14, 16, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.70);
  color: rgba(255,255,255,.88);
  z-index: 200;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

/*show on hover (desktop)*/
.bgp-image-wrapper:hover .bgp-popup{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}



/*optional: make it more solid when interacting*/
.bgp-popup:hover,
.bgp-popup:focus-within{
  background: rgba(10, 14, 16, 0.86);
}

/*header*/
.bgp-popup-head{
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0,114,153,.18), rgba(0,114,153,.08));
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: center;
}

.bgp-popup-title{
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.bgp-popup-subtitle{
  margin-top: 4px;
  font-size: 11px;
  opacity: .75;
}

/*body*/
.bgp-popup-body{
  padding: 12px 12px 10px;
  text-align: center;
}


/*table wrapper: collapsed by default*/
.bgp-popup-tablewrap{
  position: relative;
  max-height: 236px;
  overflow: hidden;
  border-radius: 12px;
}



/*fade at bottom when collapsed*/
.bgp-popup-tablewrap::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10,20,26,0.00),
    rgba(10,20,26,0.70),
    rgba(10,20,26,0.92)
  );
}

/*expanded state*/
.bgp-popup.is-expanded .bgp-popup-tablewrap{
  max-height: 520px;
  overflow: auto;
}
.bgp-popup.is-expanded .bgp-popup-tablewrap::after{
  display: none;
}

/*table sizing*/
.bgp-popup-table{
  display: inline-block;
  width: auto;
  max-width: 100%;
}
.bgp-popup-table table{
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.bgp-popup-table th{
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.76);
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: center;
  white-space: normal;
}

.bgp-popup-table td{
  padding: 6px 10px;
  font-size: 11px;
  color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/*controls*/
button.bgp-popup-toggle{
  display: grid;
  place-items: center;
  width: 34px;
  height: 26px;
  margin: 10px auto 0;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
}

button.bgp-popup-toggle .bgp-chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.55);
  border-bottom: 2px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  transition: transform .18s ease;
}

/*Copy button hidden by default (collapsed state)*/
button.bgp-copy-btn{
  margin: 10px auto 0;
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
  cursor: pointer;
}



/*COLLAPSE TO ~4 BODY ROWS (header + 4 rows)*/
.bgp-popup-tablewrap{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  max-height: 140px;
}



/*Copy hidden by default*/
.bgp-popup button.bgp-copy-btn{
  display: none !important;
}

/*Show copy when expanded via click toggle*/
.bgp-popup.is-expanded button.bgp-copy-btn{
  display: block !important;
}

/*Hide toggle when expanded*/
.bgp-popup.is-expanded .bgp-popup-toggle{
  display: none !important;
}

/*Hide toggle on desktop hover devices*/
@media (hover:hover) and (pointer:fine){
  .bgp-popup-toggle{
  display: none;
}
}


/*Show copy when expanded via hover/focus (your desktop behavior)*/
@media (hover:hover) and (pointer:fine){
  .bgp-popup:hover button.bgp-copy-btn,
  .bgp-popup:focus-within button.bgp-copy-btn{
  display: block !important;
}
}


@media (hover:hover) and (pointer:fine){
  .bgp-popup:hover .bgp-popup-tablewrap{
  max-height: 520px;
}
  .bgp-popup:hover .bgp-popup-tablewrap::after{
  display: none;
}
}


/*CHEVRON / TOGGLE: show ONLY when collapsed - Hidden when expanded by…*/

/*default: show (collapsed state)*/
.bgp-popup .bgp-popup-toggle{
  display: grid !important;
}

/*expanded-by-click: hide toggle completely*/
.bgp-popup.is-expanded .bgp-popup-toggle{
  display: none !important;
}

/*expanded-by-hover (desktop): hide toggle while expanded*/
@media (hover:hover) and (pointer:fine){
  .bgp-popup:hover .bgp-popup-toggle,
  .bgp-popup:focus-within .bgp-popup-toggle{
  display: none !important;
}
}


/*POPUP TABLE WIDTH CONTROL Collapsed: show ONLY 2 columns (Year + firs…*/

/*1) Default collapsed view: hide columns 3+*/
.bgp-popup .bgp-popup-table th:nth-child(n+3),
.bgp-popup .bgp-popup-table td:nth-child(n+3){
  display: none !important;
}


/*Keep the first 2 columns stable*/
.bgp-popup .bgp-popup-table table{
  table-layout: fixed !important;
  width: auto !important;
}

.bgp-popup .bgp-popup-table th:nth-child(1),
.bgp-popup .bgp-popup-table td:nth-child(1){
  width: 76px;
  max-width: 76px;
}

.bgp-popup .bgp-popup-table th:nth-child(2),
.bgp-popup .bgp-popup-table td:nth-child(2){
  width: 140px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*2) Expanded-by-click: show all columns*/
.bgp-popup.is-expanded .bgp-popup-table th,
.bgp-popup.is-expanded .bgp-popup-table td{
  display: table-cell !important;
}

@media (hover:hover) and (pointer:fine){
  /*3) Expanded-by-hover (desktop): show all columns*/
  .bgp-popup:hover .bgp-popup-table th,
  .bgp-popup:hover .bgp-popup-table td,
  .bgp-popup:focus-within .bgp-popup-table th,
  .bgp-popup:focus-within .bgp-popup-table td{
  display: table-cell !important;
}
}
/*COLLAPSED TABLE: show ONLY 2 columns (Year + first value) Expanded (c…*/

/*Default collapsed: hide columns 3+ ONLY if popup actually has extra c…*/
.bgp-popup.bgp-has-hidden-cols:not(.is-expanded) .bgp-popup-table th:nth-child(n/**/+3),
.bgp-popup.bgp-has-hidden-cols:not(.is-expanded) .bgp-popup-table td:nth-child(n/**/+3){
  display: none !important;
}

/*Desktop hover: show all columns while hovered*/
@media (hover:hover) and (pointer:fine){
  .bgp-popup.bgp-has-hidden-cols:not(.is-expanded):hover .bgp-popup-table th:nth-child(n/**/+3),
  .bgp-popup.bgp-has-hidden-cols:not(.is-expanded):hover .bgp-popup-table td:nth-child(n/**/+3){
  display: table-cell !important;
}
}

/*Keep the 2 visible columns sane when collapsed (only for extra-col ta…*/
.bgp-popup.bgp-has-hidden-cols:not(.is-expanded) .bgp-popup-table table{
  table-layout: fixed !important;
  width: auto !important;
}

.bgp-popup.bgp-has-hidden-cols:not(.is-expanded) .bgp-popup-table th:nth-child(1),
.bgp-popup.bgp-has-hidden-cols:not(.is-expanded) .bgp-popup-table td:nth-child(1){
  width: 76px;
  max-width: 76px;
}

.bgp-popup.bgp-has-hidden-cols:not(.is-expanded) .bgp-popup-table th:nth-child(2),
.bgp-popup.bgp-has-hidden-cols:not(.is-expanded) .bgp-popup-table td:nth-child(2){
  width: 140px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/*CHEVRON: when hidden cols exist + collapsed - keep button ROUND (no s…*/

/*Only apply to popups that actually hide columns*/
.bgp-popup.bgp-has-hidden-cols:not(.is-expanded) .bgp-popup-toggle{
  margin: 10px 0 0 0 !important;
}

/*Your border-corner chevron: 90deg = ↙ (not 135deg)*/
.bgp-popup.bgp-has-hidden-cols:not(.is-expanded) .bgp-popup-toggle .bgp-chev{
  transform: rotate(75deg) !important;
}


.bgp-popup-tablewrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), 
              opacity    0.3s ease;
  will-change: max-height, opacity;
  max-height: 148px;
}

.bgp-popup.is-expanded .bgp-popup-tablewrap {
  max-height: 580px;
  opacity: 1;
}


.bgp-popup.is-expanded .bgp-popup-tablewrap::after {
  opacity: 0;
}

.bgp-popup.is-expanded .bgp-popup-tablewrap{
  max-height: 580px;
  overflow: auto;
}

.bgp-popup-title {
  visibility: hidden;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

.bgp-popup-head::before {
  content: "Milestones";
  display: block;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 460;
  color: inherit;
  visibility: visible;
}

.bgp-popup-subtitle {
  display: none;
}


/*Default / top-right position (your current behavior)*/
.bgp-popup.top-right {
  right: 54px;
  top: 18px;
  left: auto;
  bottom: auto;
  transform: translateY(10px);
}


/*Make sure the hover/appear animation still works nicely for both*/
.bgp-image-wrapper:hover .bgp-popup,
.bgp-popup:focus-within {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/*Optional: give bottom-left a slightly different shadow/offset feel if…*/
.bgp-popup.bottom-left {
  box-shadow: 0 25px 70px rgba(0,0,0,0.75);
}

/*Collapsed state: header + ONLY 2 body rows visible*/
.bgp-popup-tablewrap {
  max-height: 110px;
  overflow: hidden;
  border-radius: 12px;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
}

/*Optional: make sure the fade starts right after row 2*/
.bgp-popup-tablewrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 20, 26, 0.92) 0%,
    rgba(10, 20, 26, 0.65) 35%,
    transparent 80%
  );
  opacity: 1;
  transition: opacity 0.12s ease;
}
/*Bottom-right position — new option*/
.bgp-popup.bottom-right {
  right: 54px;
  bottom: 160px;
  left: auto;
  top: auto;
  transform: translateY(-10px);
  transform-origin: bottom right;
}

/*Ensure the hover/appear animation works consistently for all positions*/
.bgp-image-wrapper:hover .bgp-popup,
.bgp-popup:focus-within {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/*Optional: slightly stronger shadow when in bottom corners (feels more…*/
.bgp-popup.bottom-left,
.bgp-popup.bottom-right {
  box-shadow: 0 28px 80px rgba(0,0,0,0.78);
}

/*ULTRA-EXTREME 120px TEST –*/

.bgp-popup {
  max-width: min(92vw, 160px) !important;
  min-width: 110px !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
}

.bgp-popup-head,
.bgp-popup-body {
  padding: 4px 6px !important;
}

.bgp-popup-title,
.bgp-popup-subtitle {
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin: 2px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bgp-popup-tablewrap,
.bgp-popup-table,
.bgp-popup-table table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.bgp-popup-table table {
  table-layout: fixed !important;
  font-size: 10px !important;
}


/*Year column – tiny*/
.bgp-popup-table th:nth-child(1),
.bgp-popup-table td:nth-child(1) {
  max-width: 45px !important;
  width: 45px !important;
}

/*Value column – tiny*/
.bgp-popup-table th:nth-child(2),
.bgp-popup-table td:nth-child(2) {
  max-width: 75px !important;
}

/*Hide toggle/copy buttons in this test if they push width*/
.bgp-popup-toggle,
.bgp-copy-btn {
  display: none !important;
}

/*Expanded/hover – still very narrow for test*/
.bgp-popup.is-expanded,
.bgp-popup:hover,
.bgp-popup:focus-within {
  max-width: min(92vw, 260px) !important;
}


/*Force table cell styles – highest priority override*/
.bgp-popup .bgp-popup-table table th,
.bgp-popup .bgp-popup-table table td,
.bgp-popup-table th,
.bgp-popup-table td {
  font-weight: 200 !important;
  color: #e5e5e5 !important;
  font-size: 11px !important;
  padding: 4px 6px !important;
  max-width: 80px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  border: none !important;
  background: transparent !important;
}

/*Also force header cells (sometimes they have their own rules)*/
.bgp-popup-table th {
  font-weight: 300 !important;
  color: #E5E5E5 !important;
}

/*Make sure nothing inside cells overrides text color/weight*/
.bgp-popup-table td *,
.bgp-popup-table th * {
  font-weight: inherit !important;
}


/*Collapsible Sources section – clean and minimal*/
.bgp-sources-accordion {
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 16px;
}

.bgp-sources-toggle {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #e0f0ff;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bgp-sources-toggle:hover {
  background: rgba(255,255,255,0.08);
}

.bgp-sources-toggle[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.bgp-sources-toggle .chevron {
  float: right;
  transition: transform 0.25s ease;
  font-size: 12px;
}

.bgp-sources-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, opacity 0.35s ease-out;
  opacity: 0;
  padding: 0 16px;
}

.bgp-sources-content[aria-hidden="false"] {
  max-height: 1200px;
  opacity: 1;
  padding: 16px;
}





/*MOVE ENTIRE COVERFLOW UNIT (CENTER + PEEKS + GHOSTS) TOGETHER Adjust…*/


body.bgp-barometer .bgp-country-panel.is-active .bgp-coverflow{
  margin: 12px auto 18px !important;
  min-height: 0 !important;
  transform: translateY(var(--bgp-flow-shift)) !important;
  transform-origin: top center !important;
}

:root{
  --bgp-flow-shift: -18px;
  --bgp-stage-min: 760px;
}

/*Stable stage: prevents jump*/
body.bgp-barometer .bgp-country-panel.is-active .bgp-coverflow{
  min-height: var(--bgp-stage-min) !important;
  height: var(--bgp-stage-min) !important;
  margin: 12px auto 18px !important;
  transform: translateY(var(--bgp-flow-shift)) !important;
  overflow: visible !important;
}


body.bgp-barometer .bgp-country-panel.is-active .bgp-coverflow{
  margin-top: 60px !important;
}


body.bgp-barometer .bgp-sources-accordion{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 40px;
}

/*Toggle bar — always narrow*/
body.bgp-barometer .bgp-sources-toggle{
  width: 42%;
  max-width: 520px;
  min-width: 280px;
  transition: all .35s ease;
}

/*Keep same width when open*/
body.bgp-barometer .bgp-sources-toggle[aria-expanded="true"]{
  width: 42%;
}

/*Content always full width*/
body.bgp-barometer .bgp-sources-content{
  width: 100%;
  font-weight: 240 !important;
  color: #bbb;
  font-size: 11px;
  margin-top: 24px;
}

body.bgp-barometer .bgp-source-block{
  width: 100%;
  text-align: center;
}

body.bgp-barometer .bgp-source-subtitle{
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
  font-size: 12px;
  font-weight: 300;
  margin: 18px 0 10px;
}

body.bgp-barometer .bgp-source-divider{
  width: 70%;
  max-width: 900px;
  height: 1px;
  margin: 22px auto;
  opacity: .25;
  background: currentColor;
}

body.bgp-barometer .bgp-source-line{
  margin: 10px 0;
}

/*1) Reduce the padding above the accordion content*/
body.bgp-barometer .bgp-sources-content{
  padding-top: 8px;
}

/*2) Kill the extra top margin on the first section/subtitle only*/
body.bgp-barometer .bgp-source-block{
  margin-top: 0;
  padding-top: 0;
}

body.bgp-barometer .bgp-source-block .bgp-source-section:first-child{
  margin-top: 0;
  padding-top: 0;
}

body.bgp-barometer .bgp-source-block .bgp-source-section:first-child .bgp-source-subtitle{
  margin-top: 6px;
}

/*Optional: slightly tighten the toggle button itself if it's tall*/
body.bgp-barometer .bgp-sources-toggle{
  padding-top: 10px;
  padding-bottom: 10px;
}

.bgp-source-sources {
  font-weight: 600;
  font-size: 1.05em;
}

.bgp-source-section--permission {
  max-width: 900px;
  margin: 0 auto;
}

.bgp-source-divider {
  width: 65%;
}

body.bgp-barometer .bgp-source-beta-copyright{
  margin-top: 10px;
  opacity: 0.7;
  font-size: 0.9em;
  letter-spacing: .02em;
}

body.bgp-barometer .bgp-source-section--beta{
  margin-bottom: 10px;
}

.bgp-countrylist-tabs{
  display: flex;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,0.10);
}

.bgp-tab{
  flex: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  cursor: pointer;
}

.bgp-tab.is-active{
  background: rgba(0,114,153,.35);
  border-color: rgba(0,180,240,0.35);
  color: #fff;
}

.bgp-countrylist-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,0.10);
}

.bgp-tab{
  flex: 1 1 calc(50% - 8px);
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

@media (max-width: 420px){
  .bgp-tab{
  flex: 1 1 100%;
} /*stack on very small screens*/
}

/*PEEK TITLES — PERMANENTLY MUTED*/

.bgp-peek .bgp-peek-mini-head{
  filter: blur(0.8px);
  opacity: 0.72;
  color: rgba(255,255,255,0.75) !important;
  transition: filter 220ms ease,
    opacity 220ms ease,
    color 220ms ease;
}

/*On hover — slightly clearer but still secondary*/
.bgp-peek:hover .bgp-peek-mini-head{
  filter: blur(0.4px);
  opacity: 0.9;
  color: rgba(255,255,255,0.9) !important;
}


/*INTRO IMAGE – Smaller, cleaner*/

.bgp-barometer .bg-intro-imgwrap{
  display: flex;
  align-items: center;
  justify-content: center;
}

.bgp-barometer .bg-intro-img{
  max-width: 380px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}


.bg-intro-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: center;
}

.bg-intro-textcol {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 480px;
}

.bg-intro-imgwrap {
  flex: 0 0 auto;
}


  /*Force intro image to reasonable size + match text height feel*/
.bg-intro-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}

.bg-intro-textcol {
  flex: 1 1 380px;
  max-width: 520px;
  min-width: 320px;
}

.bg-intro-imgwrap {
  flex: 0 1 auto;
  max-width: 420px;
  width: 100%;
}

.bg-intro-img {
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  display: block;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.38);
  object-fit: cover;
}

/*Mobile: stack vertically, image smaller*/
@media (max-width: 820px) {
  .bg-intro-row {
  flex-direction: column;
  gap: 24px;
}
  .bg-intro-textcol,
  .bg-intro-imgwrap {
  max-width: 100%;
}
  .bg-intro-img {
  max-width: 360px !important;
}
}
/*┌──────────────────────────────────────────────────────────────┐ │ FI…*/

.bg-intro-card .bg-intro-row {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.bg-intro-card .bg-intro-row,
.bg-intro-card .bg-intro-row * {
  box-sizing: border-box !important;
}

.bg-intro-card .bg-intro-imgwrap {
  flex: 0 0 auto !important;
  max-width: 400px !important;
  width: auto !important;
  min-width: 0 !important;
}

.bg-intro-card .bg-intro-imgwrap img.bg-intro-img {
  max-width: 400px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/*Extra nuclear option if still ignored*/
.bg-intro-card img.bg-intro-img {
  max-width: 400px !important;
  width: auto !important;
}

/*Mobile safety net*/
@media (max-width: 820px) {
  .bg-intro-card .bg-intro-imgwrap,
  .bg-intro-card .bg-intro-imgwrap img.bg-intro-img {
  max-width: 340px !important;
}
}

body.bgp-barometer .bg-intro-img {
  max-width: 380px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/*Also lock the wrapper (in case global forces it wide)*/
body.bgp-barometer .bg-intro-imgwrap {
  max-width: 380px !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/*Cap the whole row for balance*/
body.bgp-barometer .bg-intro-row {
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

/*Mobile safety (smaller)*/
@media (max-width: 820px) {
  body.bgp-barometer .bg-intro-img {
  max-width: 320px !important;
}
  body.bgp-barometer .bg-intro-imgwrap {
  max-width: 320px !important;
}
}

/*┌──────────────────────────────────────────────────────────────┐ │ VI…*/

body.bgp-barometer .bg-intro-imgwrap {
  flex: 0 0 auto !important;
  max-width: 380px !important;
  width: auto !important;
  min-width: 0 !important;
}

body.bgp-barometer .bg-intro-img {
  width: auto !important;
  max-width: 380px !important;
  height: auto !important;
  display: block !important;
}

/*Balance the row (prevents lonely text on huge screens)*/
body.bgp-barometer .bg-intro-row {
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

/*Mobile: even smaller*/
@media (max-width: 820px) {
  body.bgp-barometer .bg-intro-imgwrap,
  body.bgp-barometer .bg-intro-img {
  max-width: 340px !important;
}
}

/*┌──────────────────────────────────────────────────────────────┐ │ GO…*/

/*Lock the entire intro row to a reasonable total width*/
body.bgp-barometer .bg-intro-row {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  gap: 32px !important;
}

/*Shrink and lock image wrapper*/
body.bgp-barometer .bg-intro-imgwrap {
  flex: 0 0 180px !important;
  max-width: 180px !important;
  width: 180px !important;
  min-width: 0 !important;
}

/*Image itself — match wrapper exactly*/
body.bgp-barometer .bg-intro-img {
  max-width: 180px !important;
  width: 180px !important;
  height: auto !important;
  display: block !important;
}

/*Constrain text column so it doesn't stretch forever*/
body.bgp-barometer .bg-intro-textcol {
  flex: 1 1 460px !important;
  max-width: 500px !important;
  min-width: 300px !important;
}

/*Mobile: stack and keep small*/
@media (max-width: 820px) {
  body.bgp-barometer .bg-intro-row {
  max-width: 100% !important;
  flex-direction: column !important;
  gap: 24px !important;
}
  body.bgp-barometer .bg-intro-imgwrap,
  body.bgp-barometer .bg-intro-img {
  max-width: 240px !important;
  width: 240px !important;
}
  body.bgp-barometer .bg-intro-textcol {
  max-width: 100% !important;
}
}

/*EMERGENCY FINAL FIX — override global.css exactly*/

body.bgp-barometer .bg-intro-row {
  max-width: 680px !important;
  margin: 0 auto !important;
  justify-content: center !important;
  gap: 32px !important;
}

body.bgp-barometer .bg-intro-imgwrap {
  flex: 0 0 180px !important;
  max-width: 180px !important;
  width: 180px !important;
  min-width: 0 !important;
}

body.bgp-barometer .bg-intro-img {
  max-width: 180px !important;
  width: 180px !important;
  height: auto !important;
}

/*Make text column behave — don't let it eat all remaining space*/
body.bgp-barometer .bg-intro-textcol {
  flex: 1 1 460px !important;
  max-width: 460px !important;
  min-width: 300px !important;
}

/*Mobile — stack + keep small*/
@media (max-width: 820px) {
  body.bgp-barometer .bg-intro-row {
  max-width: 100% !important;
  flex-direction: column !important;
  gap: 24px !important;
}
  body.bgp-barometer .bg-intro-imgwrap,
  body.bgp-barometer .bg-intro-img {
  max-width: 240px !important;
  width: 240px !important;
}
  body.bgp-barometer .bg-intro-textcol {
  max-width: 100% !important;
}
}

/*Make intro card ~50% height (FINAL)*/
body.bgp-barometer .bg-intro-card{
  padding: 12px 16px !important;
  margin: 12px auto !important;
}

body.bgp-barometer .bg-intro-title{
  margin: 0 0 6px 0 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
}

body.bgp-barometer .bg-intro-text{
  margin: 0 !important;
  line-height: 1.25 !important;
  font-size: 13.5px !important;
}

/*tighten the row itself*/
body.bgp-barometer .bg-intro-row{
  gap: 14px !important;
  align-items: center !important;
}

/*shrink the image contribution to height*/
body.bgp-barometer .bg-intro-imgwrap{
  flex: 0 0 auto !important;
  width: 140px !important;
  max-width: 140px !important;
}

body.bgp-barometer .bg-intro-img{
  width: 140px !important;
  max-width: 140px !important;
  height: auto !important;
  display: block !important;
}

/*Intro: wider + more professional, WITHOUT getting taller*/

body.bgp-barometer .bg-intro-row{
  max-width: 1120px !important;
  margin: 0 auto !important;
  gap: 22px !important;
  align-items: center !important;
}

/*Give the text column more real width*/
body.bgp-barometer .bg-intro-textcol{
  flex: 1 1 720px !important;
  max-width: 760px !important;
  min-width: 520px !important;
}

/*Bigger type, but keep height controlled*/
body.bgp-barometer .bg-intro-text{
  font-size: 17px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
}

/*Title: keep it bold but tight*/
body.bgp-barometer .bg-intro-title{
  font-size: 44px !important;
  line-height: 1.05 !important;
  margin: 0 0 10px 0 !important;
}

/*Image: keep it tidy and proportional*/
body.bgp-barometer .bg-intro-imgwrap{
  flex: 0 0 auto !important;
  width: 220px !important;
  max-width: 220px !important;
}

body.bgp-barometer .bg-intro-img{
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  display: block !important;
}

/*Responsive: avoid forcing huge minimum widths on small screens*/
@media (max-width: 920px){
  body.bgp-barometer .bg-intro-textcol{
  min-width: 0 !important;
}
  body.bgp-barometer .bg-intro-text{
  -webkit-line-clamp: 6 !important;
}
}



/*HERO BANNER — AUTO SLIDE UP ON LOAD*/

body.bgp-barometer .bg-hero-image{
  animation: heroSlideUp 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform-origin: top center;
  will-change: transform, opacity;
}

@keyframes heroSlideUp{
  0%{
  transform: translateY(0);
  opacity: 1;
}
  100%{
  transform: translateY(-100%);
  opacity: 0;
}
}

/*AUTO-COLLAPSE THE TOP HERO IMAGE ON LOAD (LEAVE NAV) Only affects thi…*/


/*the banner image you want to disappear*/
body.bgp-barometer .bg-hero-image{
  display: block;
  transform-origin: top center;
  animation: heroCollapseUp 700ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
  will-change: max-height, opacity, transform, margin;
}

/*Collapse its layout height + fade + slight upward drift*/
@keyframes heroCollapseUp{
  from{
  max-height: 240px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 0;
  margin-bottom: 0;
}
  to{
  max-height: 0;
  opacity: 0;
  transform: translateY(-18px);
  margin-top: 0;
  margin-bottom: 0;
}
}

/*Safety: if global.css sets a fixed height, this wins*/
body.bgp-barometer .bg-hero-image{
  height: auto !important;
  max-height: 240px;
}

/*Reduced motion: just remove it instantly*/
@media (prefers-reduced-motion: reduce){
  body.bgp-barometer .bg-hero-image{
  animation: none !important;
  display: none !important;
}
}

/*Make the barometer intro expander match your page rhythm*/
body.bgp-barometer .bg-intro-expander{
  margin-top: 10px !important;
}

/*Ensure the summary doesn’t look too big or cramped*/
body.bgp-barometer .bg-intro-expander > summary{
  font-size: 14px !important;
}

/*Caption polish*/
body.bgp-barometer .bg-intro-caption{
  margin-top: 8px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  opacity: 0.72 !important;
  text-align: center !important;
}

body.bgp-barometer .bg-intro-textcol > .bg-intro-text{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  overflow: hidden !important;
}

/*Add "dead space" above the left menu only*/
body.bgp-barometer .bgp-md-left{
  padding-top: 54px !important;
}

/*Optional: keep sticky behavior consistent*/
@media (min-width: 1024px){
  body.bgp-barometer .bgp-md-left{
  top: 88px !important;
}
}

/*GLOBAL TOP NAV — COMPACT DARK MODE*/

/*Shrink the light grey strip*/
.bg-topnav{
  background: #0F1C24 !important;
  padding: 10px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.4);
}

/*Tighten inner wrapper height*/
.bg-navwrap{
  padding: 0 !important;
  min-height: unset !important;
}

/*Keep buttons visually identical but reduce vertical waste*/
.bg-btn{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/*Slightly reduce gap between buttons (optional refinement)*/
.bg-navwrap{
  gap: 14px !important;
}

/*Kill white background above/below nav*/
.bg-fullbleed{
  background: #0B1A22 !important;
  padding-bottom: 0 !important;
}

/*Brand strip (Birthgap.org bar)*/
.bg-brand-strip{
  background: #0E2A36 !important;
  padding: 10px 0 !important;
}

/*Nav container*/
.bg-topnav{
  background: #0F1C24 !important;
  padding: 8px 0 !important;
  border: none !important;
}

/*Remove any light borders or shadows creating lines*/
.bg-topnav,
.bg-brand-strip{
  box-shadow: none !important;
}

/*Ensure no sneaky white margins*/
body{
  background: #07141B !important;
}

.bg-brand-inner{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/*Brand title to the left*/
.bg-brand-title{
  margin: 0 !important;
  text-align: left !important;
}

/*Menu trigger to the right*/
.menu-trigger{
  margin-left: auto !important;
}

/*If anything else sits between them, ensure it doesn't re-center*/
.bg-brand-inner > *{
  flex: 0 0 auto;
}

/*COUNTRY HEADER ROW LAYOUT*/

.bgp-country-row{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*Keep the country perfectly centered*/
.bgp-country-center{
  pointer-events: none;
}


/*BAROMETER: Country header row with right CTA*/

body.bgp-barometer .bgp-country-row{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-bottom: 12px;
}

/*The centered title*/
body.bgp-barometer .bgp-country-center{
  font-size: 1.6em;
  font-weight: 700;
  color: var(--color-text-on-dark);
  text-align: center;
}


/* The button (far right) */
body.bgp-barometer .bgp-snapshot-btn{
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);

  height: 32px;
  padding: 0 14px;

  display: flex;
  align-items: center;        /* vertical centering */
  justify-content: center;    /* horizontal centering */

  font-family: var(--bg-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;

  background: var(--color-btn-bg-patreon);
  color: var(--color-btn-text-patreon);
  border: 1px solid var(--color-btn-bg-patreon);
  border-radius: 6px;
}


/* Tooltip container */
.bgp-snapshot-btn{
  position: relative;
}

/* Tooltip text */
.bgp-snapshot-btn::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translateX(-50%);
  
  background: #1f2937;
  color: #fff;
  
  padding: 6px 10px;
  border-radius: 6px;
  
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  width: 220px;
  
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  
  text-align: center;
}

/* Show tooltip */
.bgp-snapshot-btn:hover::after{
  opacity: 1;
}

.bgp-explainer-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.bgp-explainer-modal.active{
  display: block;
}

.bgp-explainer-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
}

.bgp-explainer-box{
  position: relative;
  max-width: 920px;
  margin: 10vh auto;
  padding: 22px 24px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #15262d, #0f1d23);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  color: rgba(255,255,255,0.92);
  font-size: 13.5px;
  line-height: 1.55;
}

.bgp-explainer-box h3{
  margin: 0 0 10px;
  font-size: 15.5px;
  font-weight: 400;
}

.bgp-explainer-box p{
  margin: 0 0 10px;
  opacity: 0.9;
}

.bgp-explainer-close{
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  cursor: pointer;
}
.bgp-explainer-close:hover{
  color: #fff;
}


/*BAROMETER: collapse the button bar into a single small link*/
body.bgp-barometer .bg-topnav{
  padding: 6px 0 !important;
}

body.bgp-barometer .bg-navwrap{
  justify-content: flex-end !important;
  gap: 0 !important;
}

body.bgp-barometer .bg-navwrap .bg-btn{
  display: none !important;
}

/*Keep only Home (matches <a class="bg-btn home desktop-only" ...>)*/
body.bgp-barometer .bg-navwrap .bg-btn.home{
  display: inline-flex !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  opacity: 0.9 !important;
}

/*BAROMETER: remove nav bar row + add home icon in brand strip*/

/*Close the button-row nav completely (page-specific)*/
body.bgp-barometer .bg-topnav{
  display: none !important;
}

/*Left cluster: home icon + title*/
body.bgp-barometer .bg-brand-left{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/*Home icon button*/
body.bgp-barometer .bg-homeicon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  text-decoration: none !important;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease !important;
}

body.bgp-barometer .bg-homeicon svg{
  width: 18px !important;
  height: 18px !important;
  fill: rgba(255,255,255,0.90) !important;
}

body.bgp-barometer .bg-homeicon:hover{
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

body.bgp-barometer .bg-homeicon:focus-visible{
  outline: 2px solid rgba(0,180,240,0.95) !important;
  outline-offset: 3px !important;
}


/*HERO: allow re-reveal before leaving page*/

/*Your banner is currently animated away on load. When we want it back,…*/
body.bgp-barometer.bgp-reveal-hero .bg-hero-image{
  animation: none !important;
  display: block !important;
  max-height: 240px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity    320ms ease,
    transform  420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/*Optional: make the reveal feel smoother / less “snap”*/
body.bgp-barometer.bgp-reveal-hero .bg-fullbleed{
  overflow: hidden !important;
}

/*HOME ICON EXIT: reveal hero + fade barometer content*/

/*Target the barometer content region (everything below header)*/


/*RE-REVEAL the hero banner while leaving*/
body.bgp-barometer.bgp-leaving .bg-hero-image{
  animation: none !important;
  display: block !important;
  max-height: 240px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity    320ms ease,
    transform  420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/*Keep header area from showing artifacts*/
body.bgp-barometer.bgp-leaving .bg-fullbleed{
  overflow: hidden !important;
}

/*Reduced motion: no fancy transitions*/
@media (prefers-reduced-motion: reduce){
  body.bgp-barometer .bgp-wrap,
  body.bgp-barometer .bg-hero-image{
  transition: none !important;
}
}


/*EXIT WASH: fade background to white before navigation*/

body.bgp-barometer::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  background: #ffffff;
  transition: opacity 420ms ease !important;
}

/*When leaving, fade the wash in*/
body.bgp-barometer.bgp-leaving::before{
  opacity: 1 !important;
}


/*Reduced motion: no wash transition*/
@media (prefers-reduced-motion: reduce){
  body.bgp-barometer::before{
  transition: none !important;
}
}



/*──────────────────────────────────────────────── Country header row w…*/
.bgp-country-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 0 0 20px;
  padding: 0 24px;
  background: rgba(10, 20, 30, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}

.bgp-country-center {
  font-size: 1.75rem;
  font-weight: 800;
  color: #e6f2ff;
  text-align: center;
  pointer-events: none;
  line-height: 1.15;
}

.bgp-country-line {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.bgp-country-name {
  font-weight: 900;
  letter-spacing: 0.4px;
}

.bgp-years {
  font-size: 1.1rem;
  opacity: 0.85;
  font-weight: 500;
}


.bgp-snapshot-btn:hover {
  background: rgba(0, 150, 210, 0.40);
  border-color: rgba(0, 190, 255, 0.65);
  transform: translateY(-50%) translateY(-1px);
  box-shadow: 0 6px 20px var(--color-patreon-red-muted);
}

.bgp-snapshot-btn:active {
  transform: translateY(-50%) scale(0.97);
}

/*Mobile adjustments*/
@media (max-width: 820px) {
  .bgp-country-row {
  padding: 0 16px;
  min-height: 46px;
}
  .bgp-country-center {
  font-size: 1.45rem;
}
  .bgp-snapshot-btn {
  font-size: 13px;
  padding: 0 14px;
  height: 36px;
  right: 14px;
}
}

/*LIGHTBOX CENTER LABEL — guaranteed working*/


.bgp-lightbox .bgp-lb-centerlabel{
  position: absolute;
  left: var(--bgp-lb-x, 50%);
  bottom: 20%;
  transform: translateX(-50%);
  font-size: 9px;
  line-height: 1.15;
  letter-spacing: 0.3px;
  font-weight: 400;
  color: rgba(160,160,160,0.45);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 50;
}

/*Header "channel" width fix (*/

/*1) Row is layout only — NO painted background*/
body.bgp-barometer .bgp-country-row{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 24px !important;
}

/*2) Title gets the narrow pill background*/
body.bgp-barometer .bgp-country-center{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: min(72vw, 980px) !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: rgba(10, 20, 30, 0.40) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/*3) Keep the title line from wrapping weirdly*/
body.bgp-barometer .bgp-country-line{
  display: inline-flex !important;
  gap: 12px !important;
  white-space: nowrap !important;
}


.bgp-explainer-divider{
  height: 1px;
  margin: 28px 0 24px 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(176,208,232,0.35),
    transparent
  );
}


.bgp-explainer-box h3{
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0 0 22px 0;
  color: #e5e5e5;
}

.bgp-explainer-final{
  text-align: center;
  margin-top: 28px;
}

.bgp-explainer-final strong{
  display: inline-block;
  font-weight: 700;
}


/*mask window*/
label.bgp-thumb-unified{
  display: block;
  overflow: hidden;
}

/*default: visible*/
label.bgp-thumb-unified img.bgp-img{
  transform: translateY(0);
}

/*Base state: cards/images start slightly offset + faded (subtle enough…*/
.bgp-thumb-unified img.bgp-img,
.bgp-cover:not(.is-active) .bgp-img {
  transform: translateY(16px) scale(0.98);
  opacity: 0.65;
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity   0.55s ease-out;
  will-change: transform, opacity;
}

/*When active → gentle slide up + full opacity + tiny scale settle*/
.bgp-cover.is-active .bgp-thumb-unified img.bgp-img {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition-delay: 0.08s;
}

/*Optional: very subtle card container lift for extra polish*/
.bgp-cover.is-active {
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.bgp-cover:not(.is-active) {
  transform: translateY(8px);
}

/*"start hidden" state just before we add bgp-reveal-run*/
.bgp-cover.is-active.bgp-reveal-prep label.bgp-thumb-unified img.bgp-img{
  transform: translateY(100%) !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce){
  .bgp-cover.is-active.bgp-reveal-run label.bgp-thumb-unified img.bgp-img{
  transition: none !important;
}
}



.force-repaint-dummy {
  transform: translateZ(0);
}


/*All panels start hidden/faded*/
.bgp-country-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/*Active panel takes normal flow + full visibility*/
.bgp-country-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/*Outgoing: gentle fade-out (stays visible longer)*/
.bgp-country-panel.bgp-country-changing {
  opacity: 0.25;
  transition: opacity 0.8s ease-out;
  z-index: 1;
}



/*Shell allows stacking*/
.bgp-md-shell,
.bgp-panelwrap {
  position: relative;
}

/*Panels are absolute during transition so they can overlap*/
.bgp-country-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

/*Active panel stays in normal flow after transition*/
.bgp-country-panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/*Outgoing: fade out slowly, but NEVER hide instantly*/
.bgp-country-panel.bgp-country-changing {
  opacity: 0;
  visibility: visible !important;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.9s ease-out;
}

/*Prevent any accidental blink from reflow*/
.bgp-coverflow {
  min-height: 400px;
  contain: paint style layout;
}



/* The slide-up animation (when bgp-reveal-run is added) */
.bgp-cover.is-active.bgp-reveal-run label.bgp-thumb-unified img.bgp-img{
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity   0.55s ease-out !important;
}

/* =========================
   BAROMETER HEADER: spacing + alignment for Home + logo + wordmark
   (add to barometer.css or your page CSS)
   ========================= */

.bg-brand-left{
  display:flex;
  align-items:center;
  gap: 18px;                 /* space between Home icon and the logo/wordmark group */
}

/* make the logo+wordmark behave as one tight unit */
.bg-brand-mark{
  display:flex;
  align-items:center;
  gap: 1x;                 /* space between logo and “Birthgap·org” */
  text-decoration:none;
  color: inherit;
}

/* ensure the wordmark doesn't introduce default margins */
.bg-brand-title{
  margin: 0;
  line-height: 1;
}

/* home icon sizing + click target */
.bg-homeicon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  text-decoration:none;
  color: inherit;
}

.bg-homeicon svg{
  width: 20px;
  height: 20px;
  fill: currentColor;
  opacity: 0.95;
}

/* optional hover affordance (comment out if you don't want it) */
.bg-homeicon:hover{
  background: rgba(255,255,255,0.08);
}
.bg-brand-mark:hover{
  opacity: 0.95;
}

/* =========================================
   Barometer title badge (above country list)
========================================= */
.bgp-barometer-badge{
  display: flex;
  justify-content: center; /* change to flex-start if you want left aligned */
  margin: 2px 0 14px;
}

.bgp-barometer-badge__inner{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  /* mimic your barometer nav button look */
  background: rgba(14, 42, 54, 0.88);          /* your 0E2A36 softened */
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 10px 14px;

  color: rgba(255,255,255,0.92);
  font-weight: 560;
  letter-spacing: 0.2px;
  font-size: 15px;

  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

.bgp-barometer-badge__inner sup{
  font-size: 0.7em;
  top: -0.35em;
  position: relative;
  opacity: 0.95;
}

.bgp-barometer-badge__inner{
  background: rgba(14, 42, 54, 0.70);
  box-shadow: none;
}

/* Accent line under Barometer title */
.bgp-barometer-badge__inner{
  position: relative;
}

.bgp-barometer-badge__inner::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;

  width: 140px;
  height: 1.4px;
  border-radius: 999px;

  background: var(--color-patreon-red);
}

.bgp-barometer-badge__inner:hover::after{
  box-shadow: 0 0 10px rgba(242,160,61,0.45);
}


/* ==========================================================================
   COVERFLOW INIT FLASH GUARD
   --------------------------------------------------------------------------
   Problem:
   On first activation of a country panel, `.bgp-cover` briefly renders in its
   default centered position (title flashes across the screen) before the
   coverflow layout is measured and transforms/CSS variables are applied.

   Root cause:
   The coverflow JS applies sizing + positioning *after* initial paint.
   The class `.bgp-flow-sized` is added only once layout measurement is complete.

   Solution:
   Hide cover cards until `.bgp-flow-sized` is present, skipping the single
   invalid "centered" frame and preventing visible title/cover flashes.

   Notes:
   - This is NOT an image-loading issue.
   - This is NOT a DevTools overlay.
   - This is a first-paint / layout-init timing issue.
   - Do NOT remove unless coverflow layout is fully synchronous.
   ========================================================================== */

.bgp-coverflow:not(.bgp-flow-sized) .bgp-cover {
  opacity: 0;
  visibility: hidden;
  transition: none;
  animation: none;
}

.bgp-coverflow.bgp-flow-sized .bgp-cover {
  opacity: 1;
  visibility: visible;
}

/* Optional polish: gentle reveal once layout is ready */
.bgp-coverflow.bgp-flow-sized .bgp-cover {
  transition: opacity 120ms ease-out;
}



/* ============ MOBILE  ============ */

/* ============ MOBILE  ============ */

@media (max-width: 1023px) {
  /* Hide the desktop lockout (remove if you deleted it) */
  .bgp-mobile-lock { display: none !important; }

  /* Hide desktop coverflow UI on mobile */
  .bgp-md-right { display: none !important; }   /* hide the whole right desktop region */
  .bgp-md-shell { grid-template-columns: 1fr !important; } /* left column becomes full width */
  .bgp-md-left { position: static !important; top: auto !important; } /* no sticky sidebar */
  .bgp-countrylist { display: none !important; } /* hide the big country list */

  /* Show mobile UI */
  .bgp-mobile-ui { display: block; padding: 0 5vw 28px; }
}



/* Topbar */
.bgp-mobile-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  background: rgba(10, 18, 22, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.bgp-mobile-label{
  position: absolute;
  left: -9999px;
}

.bgp-mobile-select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(18, 34, 40, 0.9);
  color: rgba(230, 242, 255, 0.95);
  font-weight: 650;
  letter-spacing: 0.2px;
}

.bgp-mobile-more{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(18, 34, 40, 0.9);
  color: rgba(230, 242, 255, 0.95);
  font-weight: 650;
  white-space: nowrap;
}

/* Hero container: we’ll inject one .bgp-cover here */
.bgp-mobile-hero{
  margin-top: 14px;
}

/* Make the injected card behave nicely on mobile */
.bgp-mobile-hero .bgp-cover{
  transform: none !important;
  width: 100% !important;
  max-width: auto;
  margin: 0 auto;
}

/* Bottom sheet */
.bgp-mobile-sheet{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none; /* toggled by JS */
}

.bgp-mobile-sheet[aria-hidden="false"]{ display: block; }

.bgp-mobile-sheet-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.bgp-mobile-sheet-panel{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 78vh;
  background: rgba(16, 28, 34, 0.98);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}

.bgp-mobile-sheet-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.bgp-mobile-sheet-title{
  font-size: 15px;
  font-weight: 750;
  color: rgba(230,242,255,0.95);
}

.bgp-mobile-sheet-close{
  border: 0;
  background: transparent;
  color: rgba(230,242,255,0.85);
  font-size: 18px;
  padding: 8px 10px;
}

.bgp-mobile-sheet-list{
  padding: 10px 10px 18px;
  overflow: auto;
}

.bgp-mobile-sheet-item{
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.16);
  color: rgba(230,242,255,0.92);
  margin-bottom: 10px;
}

.bgp-mobile-sheet-item.is-active{
  border-color: rgba(120, 220, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(120, 220, 255, 0.20) inset;
}

.bgp-mobile-sheet-item-title{
  font-weight: 700;
  line-height: 1.2;
}

.bgp-mobile-sheet-item-sub{
  font-size: 12px;
  opacity: 0.75;
}

/* MOBILE HERO: neutralize coverflow layout + prevent clipping */
@media (max-width: 1023px) {


  /* the cloned cover should behave like a normal card */
  .bgp-mobile-hero .bgp-cover{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;

    transform: none !important;
    translate: none !important;

    width: 100% !important;
    max-width: auto;
    margin: 0 auto;

    /* if desktop coverflow uses opacity/filters */
    opacity: 1 !important;
    filter: none !important;
  }


  /* panels/images inside must fluid-fit */
  .bgp-mobile-hero .bgp-panel{
    width: 100% !important;
    max-width: 100% !important;
  }

  .bgp-mobile-hero img.bgp-img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* in case desktop sets overflow hidden on wrappers */
  .bgp-mobile-hero .bgp-thumb,
  .bgp-mobile-hero .bgp-thumb-unified{
    display: block;
    width: 100%;
  }
}



@media (max-width: 1023px){

  /* Mobile: charts should size naturally, no forced aspect boxes */
  .bgp-mobile-hero .bgp-panel,
  .bgp-mobile-hero .bgp-thumb,
  .bgp-mobile-hero .bgp-thumb-unified{
    height: auto !important;
    aspect-ratio: auto !important;
  }

  .bgp-mobile-hero img.bgp-img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;   /* prevents “cover” cropping */
    object-position: center top !important;
    display: block;
  }
}

/* MOBILE: Gapometer should never be cropped */
@media (max-width: 1023px){

  /* Only the Gapometer hero (panel-1) */
  .bgp-cover--gapometer .bgp-panel.panel-1{
    aspect-ratio: auto !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .bgp-cover--gapometer .bgp-panel.panel-1 img.bgp-img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;     /* key change */
    object-position: center center !important;
    display: block !important;
  }

  /* If the label wrapper is forcing height, neutralize it */
  .bgp-cover--gapometer .bgp-panel.panel-1 label.bgp-thumb-unified{
    height: auto !important;
  }
}

/* Gapometer: never crop (all viewports) */
.bgp-panel.panel-1 img.bgp-img{
  object-fit: contain !important;
  height: auto !important;
}
.bgp-panel.panel-1{
  aspect-ratio: auto !important;
}

/* MOBILE: stabilize panel borders + prevent weird blending */
@media (max-width: 1023px){

  .bgp-panel{
    box-sizing: border-box !important;
    background: rgba(28, 38, 48, 0.98) !important; /* pick a stable solid-ish bg */
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 12px !important;

    overflow: hidden !important;          /* key: clip everything to rounded corners */
    background-clip: padding-box !important;
    isolation: isolate !important;        /* prevents blend weirdness with children */
    transform: translateZ(0);             /* forces consistent compositing */
  }

  /* ensure children can't paint outside */
  .bgp-panel > *{
    max-width: 100% !important;
  }
}

@media (max-width: 1023px){

  /* make the label wrapper participate in clipping */
  label.bgp-thumb-unified{
    display: block !important;
    overflow: hidden !important;
    border-radius: 8px !important; /* optional: keeps inner rounding consistent */
  }

  /* image must be block-level and never exceed box */
  img.bgp-img{
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}


/* =========================
   MOBILE HERO: NO CROP / NO SPILL / NO ANIM
   Put this at the VERY END of your CSS
   ========================= */
@media (max-width: 1023px){

  /* Ensure nothing is pushing images around on mobile */
  .bgp-mobile-hero .bgp-thumb-unified img.bgp-img,
  .bgp-mobile-hero .bgp-img{
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }

  /* Let cards size naturally (no aspect-ratio boxes) */
  .bgp-mobile-hero .bgp-panel,
  .bgp-mobile-hero .bgp-thumb,
  .bgp-mobile-hero .bgp-thumb-unified{
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  /* Clip to rounded corners so charts never overrun borders */
  .bgp-mobile-hero .bgp-panel{
    overflow: hidden !important;
    border-radius: 14px !important;
  }
  .bgp-mobile-hero .bgp-thumb,
  .bgp-mobile-hero .bgp-thumb-unified{
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
  }

  /* The actual “no crop” rule */
  .bgp-mobile-hero img.bgp-img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  /* Gapometer: override any lingering cover rules that force cover/square */
  .bgp-mobile-hero .bgp-panel.panel-1{
    width: 100% !important;
    max-width: auto !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 1023px) {

  /* 1. Give panels consistent internal breathing room */
  .bgp-mobile-hero .bgp-panel,
  .bgp-mobile-hero .bgp-panel .bgp-thumb-unified,
  .bgp-mobile-hero .bgp-cover-body .bgp-panel {
    padding: 12px 14px 16px !important;           /* ← more bottom space is key */
    box-sizing: border-box !important;
  }


  /* 3. Prevent chart from truly touching edges */
  .bgp-mobile-hero img.bgp-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center top !important;
    border-radius: 10px !important;               /* ← subtle inner rounding helps a lot */
    overflow: hidden !important;
  }

  /* 4. Extra safety for very edge-hugging charts (Gapometer etc.) */
  .bgp-mobile-hero .bgp-panel.panel-1,
  .bgp-mobile-hero .bgp-panel:not(.panel-1) {
    min-height: 220px;                            /* prevent ultra-flat look */
  }

}



@media (max-width: 1023px) {
  body.bgp-barometer .bgp-mobile-hero section.bgp-cover.is-active div.bgp-cover-body {
    padding: 16px 15px 32px !important;
    box-sizing: border-box !important;
  }
  /* Null in mobile:  making panel-5 span the full row and center itself when active*/
    .bgp-cover.is-active .bgp-panel.panel-5 {
  grid-column: auto !important;
  max-width: auto !important;
}
}



@media (max-width: 1023px) {
  .bgp-mobile-hero .bgp-cover-head {
    font-size: 1.4rem !important;
    padding: 14px 16px !important;
    background: rgba(10,18,22,0.96) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    backdrop-filter: blur(10px) !important;
  }

  .bgp-mobile-hero .bgp-cover-head .bgp-country-line {
    justify-content: center !important;
    gap: 12px !important;
    
  }
  .bgp-mobile-hero .bgp-flag {
    width: 28px !important;
    height: 20px !important;
  }
}
@media (max-width: 1023px) {
  .mobile-country-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;                      /* no vertical padding — height controls it */
    background: rgba(10, 18, 22, 0.80);
    backdrop-filter: blur(8px);
    border-radius: 999px;                 /* extreme rounding = pill shape */
    font-size: 1rem;
    font-weight: 500;
    color: rgba(230, 242, 255, 0.92);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 15;
    margin: 0 auto 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    max-width: 90vw;
    height: 34px;                         /* fixed short height — key to no tall box */
    line-height: 1;                       /* tight vertical centering */
    overflow: hidden;                     /* prevent text push-out */
  }

  .mobile-country-header .bgp-country-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .mobile-country-header .bgp-flag {
    width: 20px;
    height: 15px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
  }

  .mobile-country-header .bgp-country-name {
    font-weight: 500;
    letter-spacing: 0.25px;
  }

  .mobile-country-header .bgp-years {
    font-size: 0.9rem;
    opacity: 0.92;
    font-weight: 500;
  }

  /* Hide explainer button if present */
  .mobile-country-header .bgp-explain-btn {
    display: none !important;
  }

  /* Hide duplicate chart title inside card (optional) */
  #bgp-mobile-hero .bgp-cover-head {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  /* Force the pill to be isolated and rounded */
  .mobile-country-header {
    background: rgba(20, 28, 32, 0.92) !important; /* slightly different shade to stand out */
    backdrop-filter: blur(10px) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 6px 16px !important;
    margin: 8px auto 12px auto !important;
    max-width: 92vw !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    position: relative !important; /* break out of any grid/flex weirdness */
    z-index: 20 !important;
    height: 36px !important;
    line-height: 1.2 !important;
  }

  /* Prevent parent topbar background from bleeding */
  .bgp-mobile-topbar {
    background: transparent !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    padding-bottom: 0 !important;
  }

  /* If hero has unwanted bg */
  #bgp-mobile-hero {
    background: transparent !important;
    padding-top: 0 !important;
  }

  /* Make sure inner line doesn't push height */
  .mobile-country-header .bgp-country-line {
    height: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 1023px) {
  .mobile-country-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(10, 18, 22, 0.88);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(230, 242, 255, 0.92);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 15;
    margin: 8px auto 12px auto;           /* space above/below */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    max-width: 90vw;
    height: 34px;
    line-height: 1;
  }

  /* Make sure it doesn't overlap card too much */
  #bgp-mobile-hero > .mobile-country-header {
    margin-top: 4px;                      /* small top offset if needed */
  }

  /* Card itself gets a little top margin when title is above */
  #bgp-mobile-hero .bgp-cover {
    margin-top: 0 !important;
  }
}

@media (max-width: 1023px) {
  .bgp-mobile-copyright {
    margin: 32px auto auto;           /* space above + generous bottom padding */
    text-align: right;
    font-size: 0.62rem;                    /* small and discreet */
    line-height: 1.45;
    color: rgba(160, 180, 200, 0.75);      /* soft, muted grey-blue */
    letter-spacing: 0.3px;
    opacity: 0.82;
    width: 100%;
    padding: 8px 0;                        /* tiny vertical breathing room */
  }

  /* Optional: make the year stand out slightly if desired */
  .bgp-mobile-copyright span {
    font-weight: 380;
  }

  /* Ensure parent doesn't clip it */
  .bgp-mobile-ui {
    overflow: visible !important;
    padding-bottom: 10px !important;       /* extra space so footer isn't cut off */
  }
}



/* ==================================================
   RESPONSIVE VISIBILITY: desktop vs mobile
   ================================================== */

/* Base (desktop-first): show desktop layout, hide mobile UI */
.bgp-mobile-ui,
.bgp-mobile-sheet {
  display: none;
}

.bgp-md {
  display: block;
}

/* Mobile: hide desktop layout, show mobile UI */
@media (max-width: 1023px) {
  .bgp-md { 
    display: none !important; 
  }

  .bgp-mobile-ui { 
    display: block !important; 
  }

  /* Bottom sheet remains controlled by aria-hidden */
  .bgp-mobile-sheet { 
    display: none; 
  }
  .bgp-mobile-sheet[aria-hidden="false"] { 
    display: block; 
  }
}

/* Desktop: force desktop layout visible */
@media (min-width: 1024px) {
  .bgp-md { 
    display: block !important; 
  }

  .bgp-mobile-ui,
  .bgp-mobile-sheet {
    display: none !important;
  }
}

@media (max-width: 1023px){
  #bgp-mobile-hero:has(.bgp-cover--gapometer.is-active) 
  .mobile-country-header .bgp-years{
    display: none !important;
  }
}

@media (max-width: 1023px){

  /* center everything inside the bottom sheet list */
  .bgp-mobile-sheet-head{
    justify-content: center !important;
    position: relative;
  }
  .bgp-mobile-sheet-close{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .bgp-mobile-sheet-list{
    text-align: center !important;
  }

  .bgp-mobile-sheet-item{
    justify-content: center !important;   /* center the row content */
    text-align: center !important;
  }

  .bgp-mobile-sheet-item-title,
  .bgp-mobile-sheet-item-sub{
    text-align: center !important;
    width: 100%;
  }

  /* if you have a left icon/flag in the item, this keeps it from pushing text */
  .bgp-mobile-sheet-item > *{
    flex: 0 0 auto;
  }
}

/* Ensure the mobile hero container doesn't clip horizontally */
.bgp-mobile-hero {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* When you clone a cover into the hero, force it to behave like mobile */
.bgp-mobile-hero .bgp-cover {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  transform: none !important; /* important if coverflow sets transforms */
}

/* Critical: panels inside the card should not exceed viewport width */
.bgp-mobile-hero .bgp-panel,
.bgp-mobile-hero .bgp-cover-body,
.bgp-mobile-hero .bgp-thumb,
.bgp-mobile-hero img.bgp-img {
  width: 100%;
  max-width: 100%;
}

/* And the images themselves should shrink-to-fit */
.bgp-mobile-hero img.bgp-img {
  height: auto;
  display: block;
}

/* Modal viewport should never crop the image */
.bgp-mmodal-viewport {
  width: 100%;
  max-width: 100vw;
  height: calc(100vh - 160px); /* adjust if your header/footer differs */
  overflow: auto;             /* allows panning when zoomed */
  -webkit-overflow-scrolling: touch;
}

/* Base fit-to-screen */
#bgp-mmodal-img {
  width: 100%;
  height: auto;
  display: block;
}

.bgp-mmodal-viewport{
  width: 100%;
  max-width: 100vw;
  height: calc(100vh - 160px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#bgp-mmodal-stage{
  transform-origin: 0 0;
  touch-action: none;
  will-change: transform;
}

#bgp-mmodal-img{
  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  display: block;
}

.bgp-mmodal-viewport{
  width: 100%;
  max-width: 100vw;

  height: calc(100vh - 140px); /* adjust if header space differs */

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hint shows, then fades out */
#bgp-mmodal-hint{
  transition: opacity 700ms ease, transform 700ms ease;
  opacity: 1;
  transform: translateY(0);
}

#bgp-mmodal-hint.is-faded{
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}


@media (max-width:1023px){
  .bgp-mobile-explainer-btn{
    display:block;
    width:100%;
    margin:12px 0 0 0;
    padding:10px 14px;

    font-size:14px;
    font-weight:600;

    color:#d9ecff;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;

    text-align:center;
    cursor:pointer;
  }

  .bgp-mobile-explainer-btn:active{
    background:rgba(255,255,255,0.12);
  }
}

@media (min-width:1024px){
  .bgp-mobile-explainer-btn{ display:none; }
}


@media (max-width:1023px){

  .bgp-mobile-explainer-btn{
    display:block;
    width:100%;
    max-width:520px;

    margin:14px auto 6px auto;
    padding:10px 14px;

    font-size:14px;
    font-weight:600;

    color:#d9ecff;
    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.12);
    border-radius:10px;

    text-align:center;
    cursor:pointer;
  }

  .bgp-mobile-explainer-btn:active{
    background:rgba(255,255,255,0.12);
  }

}

@media (min-width:1024px){
  .bgp-mobile-explainer-btn{
    display:none;
  }
}

@media (max-width: 1023px){

  #bgp-mobile-hero + .bgp-mobile-explainer-btn{
    display: block;
    margin: 14px auto 0;
    padding: 10px 16px;

    background: var(--color-patreon-red-muted);
    color: #fff;

    border: none;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;

    width: fit-content;   /* prevents full width */
  }

}

@media (max-width: 1023px){

  #bgp-mobile-hero + .bgp-mobile-explainer-btn{
    margin-top: 72px;   
  }

}
/* =========================================================
   GAPOMETER SUMMARY SPLIT — CLEAN VERSION
   ========================================================= */

/* ---- Summary card styling ---- */
.bgp-summary-card{
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  overflow: hidden;
}

.bgp-summary-card-inner{
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  text-align: left;
  padding: 26px 26px 22px;
}

.bgp-summary-kicker{
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(190,210,225,0.72);
}

.bgp-summary-title{
  margin: 0 0 18px 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  color: #e8f2f8;
}

.bgp-summary-bullets{
  margin: 0;
  padding-left: 20px;
  color: rgba(230,236,240,0.92);
  font-size: 15px;
  line-height: 1.55;
}

.bgp-summary-bullets li{
  margin-bottom: 10px;
}

.bgp-summary-more{
  margin-top: 10px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  background: rgba(0,114,153,0.24);
  border: 1px solid rgba(0,180,240,0.30);
  color: #e7f7ff;
}

.bgp-summary-more:hover{
  background: rgba(0,114,153,0.34);
  border-color: rgba(0,180,240,0.45);
}

/* ---- Desktop: split active Gapometer only ---- */
@media (min-width: 1024px){

  body.bgp-barometer .bgp-cover--gapometer.is-active{
    width: min(880px, 76vw) !important;
    max-width: min(880px, 76vw) !important;
  }

  body.bgp-barometer .bgp-cover--gapometer.is-active .bgp-cover-body.bgp-gapometer-split{
    display: grid !important;
    grid-template-columns: 290px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: start !important;
    justify-items: stretch !important;
    padding: 18px !important;
  }

  body.bgp-barometer .bgp-cover--gapometer.is-active .bgp-summary-card{
    width: 100% !important;
    max-width: 290px !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body.bgp-barometer .bgp-cover--gapometer.is-active .bgp-cover-body.bgp-gapometer-split > .bgp-panel.panel-1{
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    aspect-ratio: auto !important;
  }

  body.bgp-barometer .bgp-cover.is-active .bgp-cover-body.bgp-gapometer-split > .bgp-panel.panel-1{
    height: auto !important;
    max-height: none !important;
  }

  body.bgp-barometer .bgp-cover--gapometer.is-active .bgp-cover-body.bgp-gapometer-split > .bgp-panel.panel-1 > label.bgp-thumb-unified{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.bgp-barometer .bgp-cover--gapometer.is-active .bgp-cover-body.bgp-gapometer-split > .bgp-panel.panel-1 img.bgp-img{
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: top left !important;
  }

  /* inactive Gapometer cards should behave like normal coverflow cards */
  body.bgp-barometer .bgp-cover--gapometer:not(.is-active){
    width: min(820px, 85vw) !important;
    max-width: none !important;
  }

  body.bgp-barometer .bgp-cover--gapometer:not(.is-active) .bgp-cover-body{
    display: none !important;
  }
}

/* ---- Mobile: stack summary above Gapometer ---- */
@media (max-width: 1023px){

  .bgp-gapometer-split{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 16px !important;
    align-items: start !important;
  }

  .bgp-summary-card{
    min-height: auto !important;
  }

  .bgp-summary-card-inner{
    padding: 18px 18px 16px;
  }

  .bgp-summary-title{
    font-size: 22px;
  }

  .bgp-summary-bullets{
    font-size: 14px;
    line-height: 1.5;
  }
}

/* =========================================================
   GAPOMETER SUMMARY CARD – TEXT FORMATTING
   ========================================================= */

.bgp-summary-lead{
  margin: 0 0 16px 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(235,240,245,0.95);
  font-weight: 500;
}

.bgp-summary-bullets{
  margin: 0 0 14px 0;
  padding-left: 18px;
  list-style: disc;
}

.bgp-summary-bullets li{
  margin-bottom: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(225,232,238,0.92);
}

.bgp-summary-bullets li:last-child{
  margin-bottom: 0;
}

/* Slight visual hierarchy between lead and bullets */

.bgp-summary-lead + .bgp-summary-bullets{
  margin-top: 6px;
}

/* =========================================================
   FINAL OVERRIDE — GAPOMETER SUMMARY TEXT
   Put this at the VERY END of the CSS file
   ========================================================= */

body.bgp-barometer .bgp-cover--gapometer .bgp-summary-card .bgp-summary-lead{
  display: block !important;
  margin: 0 0 12px 0 !important;
  padding: 0 0 10px 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: rgba(235,240,245,0.95) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

body.bgp-barometer .bgp-cover--gapometer .bgp-summary-card .bgp-summary-bullets{
  margin: 8px 0 14px 0 !important;
  padding-left: 18px !important;
  list-style: disc !important;
}

body.bgp-barometer .bgp-cover--gapometer .bgp-summary-card .bgp-summary-bullets li{
  margin-bottom: 8px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(225,232,238,0.92) !important;
}

body.bgp-barometer .bgp-cover--gapometer .bgp-summary-card .bgp-summary-bullets li:last-child{
  margin-bottom: 0 !important;
}

/* =========================================================
   Hide the H1 Text 
   ========================================================= */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}