/*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; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(4) { transition-delay: 0.6s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(5) { transition-delay: 0.65s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(6) { transition-delay: 0.7s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(7) { transition-delay: 0.75s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(8) { transition-delay: 0.8s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(9) { transition-delay: 0.82s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(10) { transition-delay: 0.84s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(11) { transition-delay: 0.86s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(12) { transition-delay: 0.88s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(13) { transition-delay: 0.9s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(14) { transition-delay: 0.91s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(15) { transition-delay: 0.92s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(16) { transition-delay: 0.93s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(17) { transition-delay: 0.94s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(18) { transition-delay: 0.95s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(19) { transition-delay: 0.96s; }
.bgp-countrylist-items .bgp-countrybtn:nth-child(20) { transition-delay: 0.97s; }

.bgp-countrylist-items .bgp-countrybtn:nth-child(n+21) {
  transition-delay: 0.98s;
}

/* 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-height: 84vh !important;
  max-width: 84vw !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;
}


  

    /*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;
}





    /*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-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-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;
}

    /*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;
  
}


    .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;
}

  
    /*MOBILE*/

    @media (max-width: 1023px){
      .bgp-panel:not(.panel-1){
  height: 240px !important;
  max-height: 240px !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-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;
}
}

/*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;
}



.bgp-cover-head {
  background: rgba(20, 30, 40, 0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 17.5px 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: 16px;
  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: 40px !important;
}


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

/*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*/
}


/*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  ============ */

@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
   ========================================================= */

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

  body.bgp-barometer .bgp-cover--gapometer.is-active{
    width: min(860px, 76vw) !important;
    max-width: min(860px, 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--snapshot:not(.is-active){
    width: min(820px, 85vw) !important;
    max-width: none !important;
  }

  body.bgp-barometer .bgp-cover--snapshot:not(.is-active) .bgp-cover-body{
    display: none !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;
}



/* =========================================================
   NON-GAPOMETER SPLIT LAYOUT — PRODUCTION
   ========================================================= */

@media (min-width: 1024px){

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-split{
    display: grid !important;
    grid-template-columns: minmax(250px, 30%) minmax(0, 70%) !important;
    gap: 20px !important;
    align-items: start !important;
    padding: 16px !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-insights{
    min-width: 0 !important;
    width: 100% !important;
    align-self: stretch !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-insights .bgp-summary-card{
    height: 100% !important;
    min-height: 520px !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-charts{
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-charts .bgp-panel{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-charts .bgp-panel .bgp-cap{
    height: 58px !important;
    min-height: 58px !important;
    padding: 8px 12px !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-charts .bgp-thumb-unified,
  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-charts .bgp-thumb{
    padding: 8px 10px 10px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-charts img.bgp-img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 260px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-charts .bgp-panel.panel-5{
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(100%, 700px) !important;
    max-width: 700px !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-charts .bgp-panel.panel-5 img.bgp-img{
    max-height: 250px !important;
  }
}

@media (max-width: 1023px){
  body.bgp-barometer .bgp-cover:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-split{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 16px !important;
  }

  body.bgp-barometer .bgp-cover:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-split .bgp-cover-charts{
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  body.bgp-barometer .bgp-cover:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-split .bgp-cover-charts .bgp-panel{
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  body.bgp-barometer .bgp-cover:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-split .bgp-cover-charts img.bgp-img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* =========================================================
   FIRST CAROUSEL: SOLO CHART CARDS
   ========================================================= */

@media (min-width: 1024px){

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-solo{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-solo .bgp-panel{
    width: min(100%, 760px) !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    background: rgba(255,255,255,0.02) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-solo .bgp-panel .bgp-cap{
    height: 56px !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-solo .bgp-thumb-unified,
  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-solo .bgp-thumb{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px 10px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  body.bgp-barometer .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-solo img.bgp-img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 420px !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

@media (max-width: 1023px){
  body.bgp-barometer .bgp-cover:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-solo{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px !important;
  }

  body.bgp-barometer .bgp-cover:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-solo .bgp-panel{
    width: 100% !important;
    margin: 0 auto !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  body.bgp-barometer .bgp-cover:not(.bgp-cover--gapometer) .bgp-cover-body.bgp-cover-solo img.bgp-img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

.bgp-cover-body.bgp-cover-split{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) minmax(0, 2fr);
  gap:18px;
  align-items:stretch;
}

.bgp-cover-insights{
  min-width:0;
}

.bgp-cover-charts{
  min-width:0;
}

.bgp-cover-charts .bgp-panel,
.bgp-cover-charts .bgp-thumb,
.bgp-cover-charts .bgp-thumb-unified,
.bgp-cover-charts .bgp-img{
  width:100%;
  max-width:none;
  margin:0;
}

/* Split cards */
.bgp-cover-body.bgp-cover-split{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(0,2.2fr);
  gap:18px;
  align-items:stretch;
}

/* Ensure right column can expand */
.bgp-cover-charts{
  min-width:0;
  display:flex;
  align-items:stretch;
}

/* THIS IS THE CRITICAL FIX */
.bgp-cover-charts .bgp-panel{
  width:100%;
  max-width:none;
  margin:0;
  flex:1 1 auto;
}

/* ensure thumbnails fill panel */
.bgp-cover-charts .bgp-thumb,
.bgp-cover-charts .bgp-thumb-unified{
  display:block;
  width:100%;
  max-width:none;
}

/* ensure image fills thumbnail */
.bgp-cover-charts .bgp-img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}

/* Split cards: insights left, chart right */
#bgp-live-coverflow .bgp-cover-body.bgp-cover-split{
  display:grid !important;
  grid-template-columns:minmax(280px, 1fr) minmax(0, 2fr) !important;
  gap:18px !important;
  align-items:stretch !important;
}

/* Left text column */
#bgp-live-coverflow .bgp-cover-body.bgp-cover-split .bgp-cover-insights{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

/* Right chart column */
#bgp-live-coverflow .bgp-cover-body.bgp-cover-split .bgp-cover-charts{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  justify-self:stretch !important;
  align-self:stretch !important;
}

/* Kill inherited shrinking on chart wrappers */
#bgp-live-coverflow .bgp-cover-body.bgp-cover-split .bgp-cover-charts .bgp-panel,
#bgp-live-coverflow .bgp-cover-body.bgp-cover-split .bgp-cover-charts .bgp-thumb,
#bgp-live-coverflow .bgp-cover-body.bgp-cover-split .bgp-cover-charts .bgp-thumb-unified,
#bgp-live-coverflow .bgp-cover-body.bgp-cover-split .bgp-cover-charts .bgp-img{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
}

/* Image should fill the available chart column */
#bgp-live-coverflow .bgp-cover-body.bgp-cover-split .bgp-cover-charts .bgp-img{
  height:auto !important;
}

@media (max-width: 1023px){
  #bgp-live-coverflow .bgp-cover-body.bgp-cover-split{
    grid-template-columns:1fr !important;
  }
}

body.bgp-barometer #bgp-live-coverflow .bgp-cover.is-active:not(.bgp-cover--gapometer){
  width: 860px !important;
  max-width: 860px !important;
  height: 480px !important;
  min-height: 480px !important;
  max-height: 480px !important;
}

/* =========================
9) CSS  FOR 2 track coverflow - Mpotherhood and Impact
========================= */

body.bgp-barometer .bgp-coverflow-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

body.bgp-barometer .bgp-lane-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 4px 0;
}

body.bgp-barometer .bgp-snapshot-reset{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(232,246,251,0.88);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0.15px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.bgp-barometer .bgp-snapshot-reset:hover{
  background: rgba(0,114,153,0.18);
  border-color: rgba(0,180,240,0.28);
  color: rgba(245,250,255,0.96);
  transform: translateY(-1px);
}

body.bgp-barometer .bgp-snapshot-reset.is-active{
  background: rgba(0,114,153,0.24);
  border-color: rgba(0,180,240,0.34);
  color: rgba(245,250,255,0.98);
}

body.bgp-barometer .bgp-lane-segment{
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

body.bgp-barometer .bgp-lane-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(232,246,251,0.70);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0.15px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

body.bgp-barometer .bgp-lane-tab:hover{
  color: rgba(245,250,255,0.92);
}

body.bgp-barometer .bgp-lane-tab.is-active{
  background: rgba(0,114,153,0.24);
  color: rgba(245,250,255,0.98);
  box-shadow: 0 0 0 1px rgba(0,180,240,0.20) inset;
}

body.bgp-barometer #bgp-live-coverflow .bgp-cover-title,
body.bgp-barometer .bgp-country-panel .bgp-cover-title{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  text-align: center;
  color: #e8f6fb;
  font-size: 21px;
  font-weight: 540;
  letter-spacing: 0.18px;
}

body.bgp-barometer #bgp-live-coverflow .bgp-cover-count,
body.bgp-barometer .bgp-country-panel .bgp-cover-count{
  font-size: 0.72em;
  font-weight: 420;
  opacity: 0.52;
  letter-spacing: 0.02em;
}

@media (max-width: 1023px){
  body.bgp-barometer .bgp-lane-controls{
    gap: 10px;
    flex-wrap: wrap;
  }

  body.bgp-barometer .bgp-lane-tab{
    min-width: 104px;
  }
}


/* Reset button (formerly Snapshot) */

.bgp-reset-btn {
  display: block;
  margin: 10px auto 0;
  padding: 4px 12px;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3px;
  color: rgba(200,220,235,.75);

  background: transparent;

  border: 1px solid rgba(200,220,235,.35);
  border-radius: 999px;

  cursor: pointer;

  transition: all .18s ease;
}

.bgp-reset-btn:hover {
  color: #fff;
  border-color: rgba(200,220,235,.6);
  background: rgba(255,255,255,.05);
}

.bgp-reset-btn.is-active {
  color: rgba(200,220,235,.6);
  border-color: rgba(200,220,235,.25);
}

.bgp-reset-btn {
  opacity: .85;
}

.bgp-reset-btn:hover {
  opacity: 1;
}


/* stack the controls into two rows */
.bgp-lane-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
}

/* keep the radios centered */
.bgp-lane-segment{
  display:flex;
  justify-content:center;
  gap:6px;
}

/* reset button styling */
.bgp-reset-btn{
  display:block;

  padding:3px 12px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.35px;

  color:rgba(200,220,235,.7);
  background:transparent;

  border:1px solid rgba(200,220,235,.35);
  border-radius:999px;

  cursor:pointer;
  transition:all .18s ease;
}

.bgp-reset-btn:hover{
  color:#fff;
  border-color:rgba(200,220,235,.6);
  background:rgba(255,255,255,.05);
}

/* =========================================
   COVERFLOW — top-aligned cards
   ========================================= */

body.bgp-barometer #bgp-live-coverflow{
  position: relative !important;
}

body.bgp-barometer #bgp-live-coverflow .bgp-cover{
  top: 0 !important;
  transform: translateX(-50%) translateX(var(--tx,0%)) scale(1) !important;
}

/* =========================================
   COVERFLOW CHEVRONS — fixed vertical rail
   ========================================= */

body.bgp-barometer #bgp-live-coverflow .bgp-cover .bgp-nav-btn{
  top: 246px !important;   /* tune this value */
  transform: translateY(-50%) !important;
}

:root{
  --bgp-panel-height: 380px;   /* adjust once here if needed */
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active:not(.bgp-cover--gapometer)
.bgp-cover-body{
  display: grid !important;
  grid-template-columns: minmax(280px,1fr) minmax(0,2fr) !important;
  gap: 18px !important;
  align-items: stretch !important;

  height: var(--bgp-panel-height) !important;
  min-height: var(--bgp-panel-height) !important;
  max-height: var(--bgp-panel-height) !important;

  overflow: hidden !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover-insights{
  display: flex !important;
  height: 100% !important;
  min-height: 0 !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-summary-card{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-summary-card-inner{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px !important;
}

/* =========================================
   COVERFLOW — hide inactive cards completely
   ========================================= */

/* Default: every cover is hidden */
body.bgp-barometer #bgp-live-coverflow .bgp-cover{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Active cover is visible */
body.bgp-barometer #bgp-live-coverflow .bgp-cover.is-active{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep transition states visible if your JS uses them */
body.bgp-barometer #bgp-live-coverflow .bgp-cover.is-animating-in,
body.bgp-barometer #bgp-live-coverflow .bgp-cover.is-animating-out{
  visibility: visible !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover{
  width: 960px !important;
  max-width: 92vw !important;
}

/* =========================================
   NON-GAPOMETER CARDS — taller outer card + taller inner body
   ========================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active:not(.bgp-cover--gapometer){
  width: 960px !important;
  max-width: 92vw !important;

  height: 572px !important;
  min-height: 572px !important;
  max-height: 572px !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active:not(.bgp-cover--gapometer)
.bgp-cover-body{
  height: 480px !important;
  min-height: 480px !important;
  max-height: 480px !important;
}

/* =========================================
   CHART IMAGE — preserve aspect ratio
   ========================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-thumb,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-thumb-unified{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Chart image scaling */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-img{
  width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* =========================================
   CHART AREA
   Remove visible sub-panel around charts
   ========================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover-charts
.bgp-panel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Kill hover lift on chart sub-panels */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover-charts
.bgp-panel:hover{
  transform: none !important;
  box-shadow: none !important;
}

/* Keep caption but tighten it */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover-charts
.bgp-panel
.bgp-cap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 0 8px !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Remove inner chart wrapper padding */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover-charts
.bgp-thumb,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover-charts
.bgp-thumb-unified{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;

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

/* Preserve chart aspect ratio */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover-charts
.bgp-img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* =========================================
   GAPOMETER CARD LAYOUT TUNING
   ========================================= */

/* Set overall Gapometer card height */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer.is-active{
  height: 684px !important;
  min-height: 684px !important;
  max-height: 684px !important;
}

/* Redistribute width: wider insights, narrower chart */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer.is-active
.bgp-cover-body.bgp-gapometer-split{
  grid-template-columns: 360px minmax(0,1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Allow insights card to use the new width */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer.is-active
.bgp-summary-card{
  width: 100% !important;
  max-width: 360px !important;
}

/* Chart container fills remaining column */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer.is-active
.bgp-panel.panel-1{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Ensure chart scales cleanly */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer.is-active
.bgp-panel.panel-1
img.bgp-img{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: top right !important;
}

/* =========================================
   TOP NAV BUTTONS — Snapshot / Motherhood / Impact
   ========================================= */

body.bgp-barometer .bgp-lane-controls{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  width: min(720px, 100%);
  margin: 0 auto 2px auto;
}

body.bgp-barometer .bgp-lane-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 16px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(232,246,251,0.88);

  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0.15px;
  cursor: pointer;

  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.bgp-barometer .bgp-lane-btn:hover{
  background: rgba(0,114,153,0.18);
  border-color: rgba(0,180,240,0.28);
  color: rgba(245,250,255,0.96);
  transform: translateY(-1px);
}

/* =========================================
   CHART CARDS (2–N) — column balance
   ========================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active:not(.bgp-cover--gapometer)
.bgp-cover-body{
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 3.2fr) !important;
  gap: 14px !important;
}

/* Push the Snapshot / Motherhood / Impact buttons down */
body.bgp-barometer .bgp-lane-controls{
  margin-top: 2px !important;
}

 

.bgp-cover-title-main{
  font-weight:500;
  letter-spacing:.01em;
}

/* =========================================
   COVERFLOW CHEVRONS — fixed vertical rail
   ========================================= */

body.bgp-barometer #bgp-live-coverflow .bgp-cover .bgp-nav-btn{
  transform: translateY(-50%) !important;
}

/* Card 1 (Snapshot / Gapometer) */
body.bgp-barometer #bgp-live-coverflow .bgp-cover--snapshot .bgp-nav-btn{
  top: 300px !important;
}

/* All other cards */
body.bgp-barometer #bgp-live-coverflow .bgp-cover:not(.bgp-cover--snapshot) .bgp-nav-btn{
  top: 300px !important;
}

/* =========================================
   Expand buttons etc
   ========================================= */


/* Nudge Expand button slightly downward */
body.bgp-barometer .bgp-snapshot-expand-btn{
  bottom: -24px !important;
}

/* Subtle vertical breathing room around charts (panels 2 → n only) */

#bgp-live-coverflow
body.bgp-barometer
.bgp-panel:not(.panel-1)
img.bgp-img{
  background: rgb(22,22,22) !important;
  border-top: 6px solid rgb(18,18,18) !important;
  border-bottom: 6px solid rgb(18,18,18) !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
}

/* Ensure panels provide positioning context for Expand button */

body.bgp-barometer
#bgp-live-coverflow
.bgp-panel{
  position: relative !important;
  overflow: visible !important;
}


/* Expand button – clearer contrast vs chart */

body.bgp-barometer
#bgp-live-coverflow
.bgp-snapshot-expand-btn{

  left: auto !important;
  right: 28px !important;
  top: 18px !important;
  bottom: auto !important;

  transform: none !important;
  z-index: 40 !important;

  font-size: 11px !important;
  font-weight: 500 !important;

  padding: 4px 9px !important;

  color: rgb(210,210,210) !important;
  background: rgba(40,40,40,0.88) !important;

  border: 1px solid rgba(120,120,120,0.25) !important;
  border-radius: 6px !important;
}





/*
/* ==========================================================
   CARD PERIMETER + LANE COLOR SYSTEM
   ----------------------------------------------------------
   Previously the lower card perimeter appeared thicker than
   the top border due to stacked gradients and inner shadows
   on child elements.

   We remove those visual layers and instead give the card a
   single outer lift shadow. This preserves border uniformity
   while maintaining depth.

   In addition, active cards now use a lane-based header/border
   system to reinforce narrative structure:

   • motherhood = teal
   • impact     = deep red
   • report / learn-more = neutral slate

   This is a semantic lane system, not a chart-series color
   system. Do not try to match each chart's individual series
   colors with the card chrome.

   NOTE:
   Do not reintroduce background-image or box-shadow on the
   immediate child wrappers of .bgp-cover.is-active, or the
   perimeter may again appear visually heavier on some edges.
   ========================================================== */

.bgp-cover.is-active {
  background-image: none !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.55) !important;
}

.bgp-cover.is-active > * {
  box-shadow: none !important;
  background-image: none !important;
}


/* ==========================================================
   MOTHERHOOD LANE
   ----------------------------------------------------------
   Teal border + darker teal header.
   ========================================================== */

.bgp-cover[data-lane="motherhood"].is-active {
  border-color: #0c6a86 !important;
}

.bgp-cover[data-lane="motherhood"].is-active > .bgp-cover-head {
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.18)
    ),
    #0c5a70 !important;

  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}


/* ==========================================================
   IMPACT LANE
   ----------------------------------------------------------
   Deep red border + darker red header.
   ========================================================== */

.bgp-cover[data-lane="impact"].is-active {
  border-color: #662828 !important;
}

.bgp-cover[data-lane="impact"].is-active > .bgp-cover-head {
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.05),
      rgba(0,0,0,0.22)
    ),
    #522020 !important;

  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}


/* ==========================================================
   REPORT / LEARN MORE CARD
   ----------------------------------------------------------
   Force neutral styling even if this card sits inside an
   impact lane sequence.
   ========================================================== */

.bgp-cover[data-cover="report"].is-active {
  border-color: rgba(255,255,255,0.18) !important;
}

.bgp-cover[data-cover="report"].is-active > .bgp-cover-head {
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.05),
      rgba(0,0,0,0.20)
    ),
    rgba(20,30,40,0.92) !important;

  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}


/* ----------------------------------------------------------
   CHEVRON OUTER RINGS
   ---------------------------------------------------------- */
body.bgp-barometer #bgp-live-coverflow .bgp-cover[data-lane="motherhood"].is-active .bgp-nav-btn{
  border-color: rgba(0,180,240,0.62) !important;
  background: rgba(0,0,0,0.42) !important;
}

body.bgp-barometer #bgp-live-coverflow .bgp-cover[data-lane="impact"].is-active .bgp-nav-btn{
  border-color: rgba(102,40,40,0.72) !important;
  background: rgba(0,0,0,0.42) !important;
}

body.bgp-barometer #bgp-live-coverflow .bgp-cover[data-cover="report"].is-active .bgp-nav-btn{
  border-color: rgba(255,255,255,0.22) !important;
  background: rgba(0,0,0,0.42) !important;
}

/* =========================================================
   TOP LANE BUTTONS — ACTIVE STATE FOLLOWS LANE
   ---------------------------------------------------------
   Purpose:
   Make the top navigation buttons visually follow the same
   lane logic as the cards below:

   • Snapshot   = neutral
   • Motherhood = teal
   • Impact     = deep red

   Design intent:
   - Inactive buttons stay restrained and dark.
   - Only the active lane button picks up the lane tint.
   - This should feel like a navigation state, not a second
     headline competing with the main card.

   IMPORTANT:
   If an older generic `.bgp-lane-btn.is-active` rule still
   exists above, either remove it or keep it ABOVE this block
   so these selectors win.
   ========================================================= */

/* ---------------------------------------------------------
   Base inactive top-lane buttons
   --------------------------------------------------------- */
body.bgp-barometer .bgp-lane-btn{
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(232,246,251,0.88) !important;
  box-shadow: none !important;
}

body.bgp-barometer .bgp-lane-btn:hover{
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(245,250,255,0.96) !important;
}


/* ---------------------------------------------------------
   Snapshot active — neutral
   --------------------------------------------------------- */
body.bgp-barometer .bgp-lane-btn[data-lane-target="snapshot"].is-active,
body.bgp-barometer .bgp-lane-btn[data-lane-target="snapshot"][aria-current="page"]{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.04),
      rgba(0,0,0,0.14)
    ),
    rgba(255,255,255,0.05) !important;

  border-color: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset !important;
}


/* ---------------------------------------------------------
   Motherhood active — teal
   --------------------------------------------------------- */
body.bgp-barometer .bgp-lane-btn[data-lane-target="motherhood"].is-active,
body.bgp-barometer .bgp-lane-btn[data-lane-target="motherhood"][aria-current="page"]{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.05),
      rgba(0,0,0,0.14)
    ),
    rgba(12,90,112,0.34) !important;

  border-color: rgba(0,180,240,0.66) !important;
  color: #ffffff !important;

  box-shadow:
    0 0 0 1px rgba(0,180,240,0.18) inset,
    0 0 18px rgba(0,180,240,0.10) !important;
}

body.bgp-barometer .bgp-lane-btn[data-lane-target="motherhood"].is-active:hover,
body.bgp-barometer .bgp-lane-btn[data-lane-target="motherhood"][aria-current="page"]:hover{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.06),
      rgba(0,0,0,0.16)
    ),
    rgba(12,90,112,0.40) !important;
}


/* ---------------------------------------------------------
   Impact active — deep red
   --------------------------------------------------------- */
body.bgp-barometer .bgp-lane-btn[data-lane-target="impact"].is-active,
body.bgp-barometer .bgp-lane-btn[data-lane-target="impact"][aria-current="page"]{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.04),
      rgba(0,0,0,0.18)
    ),
    rgba(82,32,32,0.34) !important;

  border-color: rgba(150,50,50,0.72) !important;
  color: #ffffff !important;

  box-shadow:
    0 0 0 1px rgba(150,50,50,0.18) inset,
    0 0 18px rgba(120,30,30,0.10) !important;
}

body.bgp-barometer .bgp-lane-btn[data-lane-target="impact"].is-active:hover,
body.bgp-barometer .bgp-lane-btn[data-lane-target="impact"][aria-current="page"]:hover{
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.05),
      rgba(0,0,0,0.20)
    ),
    rgba(82,32,32,0.40) !important;
}

/* =========================================================
   TOP LANE BUTTONS — LANE HINT ON HOVER
   ---------------------------------------------------------
   Purpose:
   Provide subtle lane-color hints on hover while inactive.

   Behaviour:
   Snapshot   → neutral white hint
   Motherhood → teal border hint
   Impact     → red border hint

   IMPORTANT:
   These rules affect only :hover when NOT active.
   Active styling remains controlled by the active rules.
   ========================================================= */


/* Snapshot hover — neutral */
body.bgp-barometer .bgp-lane-btn[data-lane-target="snapshot"]:hover:not(.is-active){
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset !important;
}


/* Motherhood hover — teal hint */
body.bgp-barometer .bgp-lane-btn[data-lane-target="motherhood"]:hover:not(.is-active){
  border-color: rgba(0,180,240,0.55) !important;

  box-shadow:
    0 0 0 1px rgba(0,180,240,0.12) inset,
    0 0 10px rgba(0,180,240,0.08) !important;
}


/* Impact hover — red hint */
body.bgp-barometer .bgp-lane-btn[data-lane-target="impact"]:hover:not(.is-active){
  border-color: rgba(180,60,60,0.65) !important;

  box-shadow:
    0 0 0 1px rgba(180,60,60,0.14) inset,
    0 0 10px rgba(140,30,30,0.10) !important;
}

/* =========================================================
   BIRTHGAP BAROMETER
   Chart Expand Button
   ---------------------------------------------------------
   Purpose:
   Small utility control used to open the chart lightbox.

   Design goals:
   • subtle instrument-style control (not a CTA)
   • lane color hint via left accent
   • consistent across Snapshot / Motherhood / Impact lanes
   • readable over dark charts
========================================================= */

/* =========================================================
   BIRTHGAP BAROMETER
   Chart Expand Button
========================================================= */  


/* ---------------------------------------------------------
   Lane Accent Colors
--------------------------------------------------------- */

:root{

  --bgp-accent-snapshot:   rgba(76,160,15,0.9) !important;
  --bgp-accent-motherhood: rgba(0,166,214,0.90) !important;
  --bgp-accent-impact:     rgba(194,74,74,0.90) !important;

}

/* ---------------------------------------------------------
   Expand Button Base
--------------------------------------------------------- */

.bgp-snapshot-expand-btn{

  position:absolute !important;
  top:16px !important;
  right:16px !important;

  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;

  height:27px !important;
  padding:0 9px !important;

  border-radius:6px !important;

  border:1px solid rgba(255,255,255,0.06) !important;
  border-left:3px solid rgba(255,255,255,0.18) !important;

  background:rgba(28,31,36,0.92) !important;
  color:rgba(232,237,240,0.86) !important;

  font-size:11px !important;
  font-weight:540 !important;
  letter-spacing:0.03px !important;

  backdrop-filter:blur(4px) !important;

  box-shadow:
    0 3px 10px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;

  transition:
    transform 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease !important;

  cursor:pointer !important;
  z-index:30 !important;
}

/* ---------------------------------------------------------
   Icon inside button
--------------------------------------------------------- */

.bgp-snapshot-expand-btn svg{
  width:11px !important;
  height:11px !important;
  opacity:0.80 !important;
}



/* ---------------------------------------------------------
   Lane Accent — Snapshot
--------------------------------------------------------- */

#bgp-live-coverflow
.bgp-cover--snapshot.is-active
.bgp-snapshot-expand-btn{
  border-left-color:var(--bgp-accent-snapshot) !important;
}

/* ---------------------------------------------------------
   Lane Accent — Motherhood
--------------------------------------------------------- */

#bgp-live-coverflow
.bgp-cover.is-active[data-lane="motherhood"]
.bgp-snapshot-expand-btn{
  border-left-color:var(--bgp-accent-motherhood) !important;
}

/* ---------------------------------------------------------
   Lane Accent — Societal Impact
--------------------------------------------------------- */

#bgp-live-coverflow
.bgp-cover.is-active[data-lane="impact"]
.bgp-snapshot-expand-btn{
  border-left-color:var(--bgp-accent-impact) !important;
}

/* ---------------------------------------------------------
   Chart 1 / Snapshot only — position adjustment
--------------------------------------------------------- */

#bgp-live-coverflow
.bgp-cover--gapometer.is-active
.bgp-snapshot-expand-btn{
  top:10px !important;
  right:10px !important;
}

/* =========================================================
   Make sure hint boxes can escape all containers
========================================================= */

#bgp-live-panel,
#bgp-live-panel .bgp-body,
#bgp-live-coverflow,
#bgp-live-coverflow .bgp-cover,
#bgp-live-coverflow .bgp-cover.is-active,
#bgp-live-coverflow .bgp-cover-body,
#bgp-live-coverflow .bgp-cover-charts,
#bgp-live-coverflow .bgp-cover-insights,
.bgp-panelwrap,
.bgp-country-panel{
  overflow:visible !important;
  contain:none !important;
}

/* =========================================================
   Chevron buttons
========================================================= */

#bgp-live-coverflow .bgp-nav-btn{
  position:absolute !important;
  z-index:999999 !important;
}


/* =========================================================
   Hint box base
========================================================= */

#bgp-live-coverflow .bgp-nav-btn[data-tip]::after{
  content: attr(data-tip) !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 150px !important;
  min-height: 68px !important;
  padding: 26px 12px 10px 12px !important;

  border-radius: 12px !important;
  background: rgba(8,16,22,0.97) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  color: rgba(236,242,246,0.96) !important;
  font-size: 12px !important;
  font-weight: 640 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;

  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 140ms ease !important;
  z-index: 9002 !important;
}


/* =========================================================
   Right hint
========================================================= */

#bgp-live-coverflow .bgp-nav-next[data-tip]::after,
#bgp-live-coverflow .bgp-nav-next[data-tip]::before{
  left: calc(100% + 18px) !important;
}

/* =========================================================

   Left hint
========================================================= */

#bgp-live-coverflow .bgp-nav-prev[data-tip]::after,
#bgp-live-coverflow .bgp-nav-prev[data-tip]::before{
  right: calc(100% + 18px) !important;
}


/* =========================================================
   Show on hover
========================================================= */

#bgp-live-coverflow .bgp-nav-btn[data-tip]:hover::before,
#bgp-live-coverflow .bgp-nav-btn[data-tip]:hover::after{
  opacity: 1 !important;
}

/* =========================================================
   Lane tint
========================================================= */

#bgp-live-coverflow .bgp-nav-btn[data-tip-lane="snapshot"]::after{
  border-color: rgba(76,160,150,0.82) !important;
}

#bgp-live-coverflow .bgp-nav-btn[data-tip-lane="motherhood"]::after{
  border-color: rgba(0,166,214,0.82) !important;
}

#bgp-live-coverflow .bgp-nav-btn[data-tip-lane="impact"]::after{
  border-color: rgba(194,74,74,0.82) !important;
}

/* Keep sidebar above page background, but below tooltip-capable right panel */
.bgp-md-left{
  position: sticky !important;
  z-index: 20 !important;
}

/* Raise the entire right panel stacking context above the sidebar */
.bgp-md-right{
  position: relative !important;
  z-index: 40 !important;
}

.bgp-panelwrap{
  position: relative !important;
  z-index: 41 !important;
}

#bgp-live-coverflow{
position: relative !important;
  z-index: 42 !important;
}


/* ────────────────────────────────────────────────
   SNAPSHOT EXPAND BUTTON — FINAL RAISED HOVER
   (no more overrides after your cleanup)
   ──────────────────────────────────────────────── */

.bgp-snapshot-expand-btn {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;

  height: 27px !important;
  padding: 0 9px !important;

  border-radius: 6px !important;

  border: 1px solid rgba(255,255,255,0.06) !important;
  border-left: 3px solid rgba(255,255,255,0.18) !important;

  background: rgba(28,31,36,0.92) !important;
  color: rgba(232,237,240,0.86) !important;

  font-size: 11px !important;
  font-weight: 540 !important;
  letter-spacing: 0.03px !important;

  backdrop-filter: blur(4px) !important;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;

  transition:
    transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;

  cursor: pointer !important;
  z-index: 9999 !important; /* high to escape stacking */

  pointer-events: auto !important; /* ensure hover works */
  will-change: transform, box-shadow, background !important;
  transform-style: preserve-3d !important;
  isolation: isolate !important;
}

.bgp-snapshot-expand-btn svg {
  width: 11px !important;
  height: 11px !important;
  opacity: 0.80 !important;
}

/* Pronounced raised hover — now unblocked */
.bgp-snapshot-expand-btn:hover {
  transform: translateY(-4px) scale(1.04) translateZ(15px) !important;
  background: rgba(50,55,62,0.98) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-left: 3px solid rgba(255,255,255,0.40) !important;
  box-shadow:
    0 16px 36px -4px rgba(0,0,0,0.45) !important,
    0 6px 14px rgba(0,0,0,0.28) !important,
    inset 0 2px 1px rgba(255,255,255,0.12) !important;
  z-index: 99999 !important;
}

/* Pressed feel on click */
.bgp-snapshot-expand-btn:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.40) !important,
    inset 0 2px 4px rgba(0,0,0,0.25) !important;
  transition:
    transform 80ms ease,
    box-shadow 80ms ease !important;
}

/* Lane accent colors (unchanged) */
#bgp-live-coverflow .bgp-cover--gapometer.is-active .bgp-snapshot-expand-btn {
  border-left-color: var(--bgp-accent-snapshot) !important;
  top: 10px !important;
  right: 10px !important;
}

#bgp-live-coverflow .bgp-cover.is-active[data-lane="motherhood"] .bgp-snapshot-expand-btn {
  border-left-color: var(--bgp-accent-motherhood) !important;
}

#bgp-live-coverflow .bgp-cover.is-active[data-lane="impact"] .bgp-snapshot-expand-btn {
  border-left-color: var(--bgp-accent-impact) !important;
}

/* ────────────────────────────────────────────────
   KILL CLIPPING & STACKING CONTEXTS
   (critical for absolute button lift to be visible)
   ──────────────────────────────────────────────── */

/* Reset clipping and stacking context issues */
.bgp-cover-body,
.bgp-panel,
.bgp-panel.panel-1,
.bgp-thumb-unified,
.bgp-cover,
.bgp-cover-charts,
.bgp-snapshot-visual {
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  contain: none !important;
  transform: none !important;   /* breaks transform isolation / new stacking context */
  will-change: auto !important;
}

/* ────────────────────────────────────────────────
   Raised hover effect — lift + shadow only
   (no color change, keeps original appearance)
   ──────────────────────────────────────────────── */
#bgp-live-coverflow .bgp-cover.is-active .bgp-snapshot-expand-btn:hover {
  transform: translateY(-4px) scale(1.04) translateZ(10px) !important;
  box-shadow: 0 16px 36px -4px rgba(0,0,0,0.50) !important,   
              0  6px 14px    rgba(0,0,0,0.30) !important,
              inset 0  2px  1px rgba(255,255,255,0.12) !important;
  z-index: 9999 !important;
  transition: all 180ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Restore bright whitish SVG icon color (consistent on rest + hover) */
.bgp-snapshot-expand-btn svg,
.bgp-snapshot-expand-btn:hover svg {
  fill: rgba(232,237,240,0.92) !important;
  opacity: 0.92 !important;
}

/* Optional: subtle icon pop on hover */
.bgp-snapshot-expand-btn:hover svg {
  filter: brightness(1.15) !important;
}

/* =========================================================
   Chevron Hint Cooldown + Smooth Fade
   ---------------------------------------------------------
   Prevents immediate re-appearance of hint boxes after
   navigation click and adds a gentle fade motion.
========================================================= */

/* smooth hint transitions */

#bgp-live-coverflow .bgp-nav-btn::before,
#bgp-live-coverflow .bgp-nav-btn::after{
  transition:
    opacity 260ms ease,
    transform 260ms ease !important;
}

/* temporary suppression state */

body.bgp-nav-hints-suppressed
#bgp-live-coverflow .bgp-nav-btn::before,
body.bgp-nav-hints-suppressed
#bgp-live-coverflow .bgp-nav-btn::after{

  opacity:0 !important;
  visibility:hidden !important;

  transform:translateY(-4px) !important;

}



/* =========================================================
   LANE PANELS — NEUTRAL SHELLS, PRESERVE COLOURED HEADERS
   ---------------------------------------------------------
   Purpose:
   - Keep the existing coloured header bands for each lane
   - Neutralise the main card shell/interior so charts remain primary
   - Keep lane identity via border/accent treatment only
   - Do NOT override .bgp-cover-head here
   ========================================================= */

/* ---------------------------------------------------------
   MOTHERHOOD LANE
   --------------------------------------------------------- */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="motherhood"]{
  background: #151a1d !important;
  border: 1px solid rgba(0,180,240,0.24) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.55) !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="motherhood"]
.bgp-cover-body{
  background: transparent !important;
}


body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="motherhood"]
.bgp-cover-charts
.bgp-panel,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="motherhood"]
.bgp-cover-charts
.bgp-thumb,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="motherhood"]
.bgp-cover-charts
.bgp-thumb-unified{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}



/* ---------------------------------------------------------
   IMPACT LANE
   --------------------------------------------------------- */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="impact"]{
  background: #15171a !important;
  border: 1px solid rgba(200,70,70,0.25) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.55) !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="impact"]
.bgp-cover-body{
  background: transparent !important;
}


body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="impact"]
.bgp-cover-charts
.bgp-panel,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="impact"]
.bgp-cover-charts
.bgp-thumb,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="impact"]
.bgp-cover-charts
.bgp-thumb-unified{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   CHART SURFACE POLISH — ALL ACTIVE CARDS
   ---------------------------------------------------------
   Purpose:
   - Give chart areas a subtle premium “instrument panel” lift
   - Add a faint grounded reflection below charts
   - Keep effect crisp and restrained (not modal / not marketing-card)
   - Apply across Snapshot, Motherhood, Impact, Report/TGI chart surfaces
   ========================================================= */

/* ---------------------------------------------------------
   Base chart container lift
   --------------------------------------------------------- */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active
.bgp-thumb,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active
.bgp-thumb-unified{
  position: relative !important;
  border-radius: 6px !important;

  box-shadow:
    0 18px 30px rgba(0,0,0,0.58),
    0 6px 12px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.035),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;

  overflow: visible !important;
  isolation: isolate !important;
}

/* =========================================================
   CHART REFLECTION / GROUNDING HAZE — ALL ACTIVE CARDS
   ---------------------------------------------------------
   Put the reflection on the panel itself, not the thumb.
   ========================================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active
.bgp-cover-charts
.bgp-panel{
  position: relative !important;
  overflow: visible !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active
.bgp-cover-charts
.bgp-panel::after{
  content: "" !important;
  position: absolute !important;
  left: 10% !important;
  right: 10% !important;
  bottom: -18px !important;
  height: 28px !important;

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.00) 75%
  ) !important;

  filter: blur(8px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Do not add this under the report teaser paper stack */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover[data-cover="report"].is-active
.bgp-cover-charts
.bgp-panel::after{
  display: none !important;
}

/* Slightly softer on mobile */
@media (max-width: 1023px){
  body.bgp-barometer
  #bgp-live-coverflow
  .bgp-cover.is-active
  .bgp-cover-charts
  .bgp-panel::after{
    bottom: -12px !important;
    height: 20px !important;
    filter: blur(6px) !important;
    opacity: 0.78 !important;
  }
}



/* ---------------------------------------------------------
   Keep actual chart image clean
   --------------------------------------------------------- */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active
.bgp-thumb img.bgp-img,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active
.bgp-thumb-unified img.bgp-img{
  display: block !important;
  border-radius: 4px !important;
}


/* ---------------------------------------------------------
   Slightly reduce effect on mobile
   --------------------------------------------------------- */
@media (max-width: 1023px){
  body.bgp-barometer
  #bgp-live-coverflow
  .bgp-cover.is-active
  .bgp-thumb,
  body.bgp-barometer
  #bgp-live-coverflow
  .bgp-cover.is-active
  .bgp-thumb-unified{
    box-shadow:
      0 12px 20px rgba(0,0,0,0.46),
      0 4px 8px rgba(0,0,0,0.26),
      0 0 0 1px rgba(255,255,255,0.03),
      inset 0 1px 0 rgba(255,255,255,0.035) !important;
  }

  body.bgp-barometer
  #bgp-live-coverflow
  .bgp-cover.is-active
  .bgp-thumb::after,
  body.bgp-barometer
  #bgp-live-coverflow
  .bgp-cover.is-active
  .bgp-thumb-unified::after{
    bottom: -12px !important;
    height: 20px !important;
    filter: blur(6px) !important;
    opacity: 0.75 !important;
  }
}


/* =========================================================
   FINAL HARD OVERRIDES — top lane buttons + snapshot card
   Put at the VERY END of the CSS file
   ========================================================= */

/* ---------------------------------------------------------
   1) TOP LANE BUTTONS — base reset for active state
   --------------------------------------------------------- */
body.bgp-barometer button#bgp-live-nav-snapshot.bgp-lane-btn,
body.bgp-barometer button#bgp-live-nav-motherhood.bgp-lane-btn,
body.bgp-barometer button#bgp-live-nav-impact.bgp-lane-btn{
  background-image: none !important;
}

/* ---------------------------------------------------------
   2) SNAPSHOT BUTTON — dark steel interior + mustard edge
   --------------------------------------------------------- */
body.bgp-barometer button#bgp-live-nav-snapshot.bgp-lane-btn[aria-current="page"],
body.bgp-barometer button#bgp-live-nav-snapshot.bgp-lane-btn.is-active{
  background: linear-gradient(
    180deg,
    rgba(29,34,37,0.96) 0%,
    rgba(20,24,27,0.98) 100%
  ) !important;
  border-color: rgba(52,130,136,0.78) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(52,130,136,0.16) inset,
    0 6px 14px rgba(0,0,0,0.36) !important;
}

body.bgp-barometer button#bgp-live-nav-snapshot.bgp-lane-btn[aria-current="page"]:hover,
body.bgp-barometer button#bgp-live-nav-snapshot.bgp-lane-btn.is-active:hover{
  background: linear-gradient(
    180deg,
    rgba(33,38,41,0.98) 0%,
    rgba(22,26,29,1.00) 100%
  ) !important;
  border-color: rgba(76,160,150,0.92) !important;
}
/* ---------------------------------------------------------
   3) MOTHERHOOD BUTTON — dark steel interior + blue edge
   --------------------------------------------------------- */
body.bgp-barometer button#bgp-live-nav-motherhood.bgp-lane-btn[aria-current="page"],
body.bgp-barometer button#bgp-live-nav-motherhood.bgp-lane-btn.is-active{
  background: linear-gradient(
    180deg,
    rgba(28,42,46,0.96) 0%,
    rgba(20,32,36,0.98) 100%
  ) !important;
  border-color: rgba(70,150,220,0.58) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(70,150,220,0.18) inset,
    0 6px 14px rgba(0,0,0,0.35) !important;
}

body.bgp-barometer button#bgp-live-nav-motherhood.bgp-lane-btn[aria-current="page"]:hover,
body.bgp-barometer button#bgp-live-nav-motherhood.bgp-lane-btn.is-active:hover{
  background: linear-gradient(
    180deg,
    rgba(30,46,50,0.98) 0%,
    rgba(22,34,38,1.00) 100%
  ) !important;
  border-color: rgba(100,180,255,0.72) !important;
}

/* ---------------------------------------------------------
   4) IMPACT BUTTON — dark charcoal-red interior + red edge
   --------------------------------------------------------- */
body.bgp-barometer button#bgp-live-nav-impact.bgp-lane-btn[aria-current="page"],
body.bgp-barometer button#bgp-live-nav-impact.bgp-lane-btn.is-active{
  background: linear-gradient(
    180deg,
    rgba(40,32,34,0.96) 0%,
    rgba(24,24,26,0.98) 100%
  ) !important;
  border-color: rgba(150,50,50,0.62) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(150,50,50,0.14) inset,
    0 6px 14px rgba(0,0,0,0.35) !important;
}

body.bgp-barometer button#bgp-live-nav-impact.bgp-lane-btn[aria-current="page"]:hover,
body.bgp-barometer button#bgp-live-nav-impact.bgp-lane-btn.is-active:hover{
  background: linear-gradient(
    180deg,
    rgba(44,34,36,0.98) 0%,
    rgba(26,24,26,1.00) 100%
  ) !important;
  border-color: rgba(170,68,68,0.76) !important;
}

/* ---------------------------------------------------------
   5) SNAPSHOT MAIN CARD —  outer border
   Snapshot is the Gapometer cover, so target it directly
   --------------------------------------------------------- */
body.bgp-barometer #bgp-live-coverflow section.bgp-cover--gapometer.is-active{
  border-color: rgba(52,130,136,0.78) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.80),
    0 0 0 2px rgba(52,130,136,0.22) inset !important;
}

/* optional: snapshot chevrons match color too */
body.bgp-barometer #bgp-live-coverflow section.bgp-cover--gapometer.is-active .bgp-nav-btn{
  border-color: rgba(52,130,136,0.72) !important;
}


/* ============================================
   SNAPSHOT LANE —  HEADER 
   ============================================ */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active.bgp-cover--gapometer
.bgp-cover-head,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-cover="gapometer"]
.bgp-cover-head,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="snapshot"]
.bgp-cover-head{

  background:
    linear-gradient(
      180deg,
      rgba(22, 74, 78, 0.94) 0%,
      rgba(15, 56, 60, 0.98) 52%,
      rgba(8, 31, 35, 0.99) 100%
    ) !important;

  border-bottom: 1px solid rgba(76, 160, 150, 0.42) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.34) !important;
}

/* ============================================
   SNAPSHOT HEADER TEXT
   ============================================ */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active.bgp-cover--gapometer
.bgp-cover-head,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-cover="gapometer"]
.bgp-cover-head,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="snapshot"]
.bgp-cover-head,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active.bgp-cover--gapometer
.bgp-cover-title,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-cover="gapometer"]
.bgp-cover-title,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="snapshot"]
.bgp-cover-title,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active.bgp-cover--gapometer
.bgp-cover-title-main,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-cover="gapometer"]
.bgp-cover-title-main,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="snapshot"]
.bgp-cover-title-main,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active.bgp-cover--gapometer
.bgp-cover-title-index,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-cover="gapometer"]
.bgp-cover-title-index,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="snapshot"]
.bgp-cover-title-index{

  color: rgba(248,246,240,0.97) !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.20) !important;
}


/* =========================================================
   RANKING BENCHMARK CARD
   Small summary card inside the insights panel showing:
   - Global Average
   - Global Rank
   - "View Global Rankings" button
   ========================================================= */

.bgp-benchmark{
  margin:0 0 18px 0;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}

.bgp-benchmark-title{
  margin:0 0 10px 0;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(210,230,240,0.72);
}

.bgp-benchmark-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:0 0 6px 0;
}

.bgp-benchmark-row:last-child{
  margin-bottom:0;
}

.bgp-benchmark-label{
  font-size:14px;
  color:rgba(220,230,235,0.78);
}

.bgp-benchmark-value{
  font-size:15px;
  font-weight:700;
  color:#eef7fb;
  white-space:nowrap;
}

.bgp-benchmark-openrank{
  margin-top:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,180,255,0.28);
  background:rgba(0,140,200,0.08);
  color:#cfefff;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}

.bgp-benchmark-openrank:hover{
  background:rgba(0,140,200,0.14);
  border-color:rgba(0,180,255,0.42);
}



/* =========================================================
   MOTHERHOOD LANE — CHART GLOW
   Applies only to active cards in the Motherhood lane
   ========================================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="motherhood"]
.bgp-cover-charts
.bgp-thumb,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="motherhood"]
.bgp-cover-charts
.bgp-thumb-unified{
  box-shadow:
    0 -4px 16px rgba(52,130,136,0.10),
    0 10px 30px rgba(52,130,136,0.04),
    0 12px 22px rgba(0,0,0,0.60),
    0 5px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;

  border-radius: 6px !important;
  position: relative !important;
  z-index: 5 !important;
}

/* =========================================================
   IMPACT LANE — CHART GLOW
   Applies only to active cards in the Impact lane
   ========================================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="impact"]
.bgp-cover-charts
.bgp-thumb,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active[data-lane="impact"]
.bgp-cover-charts
.bgp-thumb-unified{
  box-shadow:
    0 -4px 16px rgba(150,40,40,0.12),
    0 10px 30px rgba(150,40,40,0.05),
    0 12px 22px rgba(0,0,0,0.60),
    0 5px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;

  border-radius: 6px !important;
  position: relative !important;
  z-index: 5 !important;
}

/* =========================================================
   LIGHTBOX — LANE COLOUR SYSTEM
========================================================= */

body[data-lightbox-lane="motherhood"] {
  --lb-hint-color: #007299; /* Birthgap teal */
}

body[data-lightbox-lane="impact"] {
  --lb-hint-color: #C43C2E; /* Birthgap red */
}

body[data-lightbox-lane="snapshot"] {
  --lb-hint-color: rgb(76,160,150); /* teal green */
}


/* =========================================================
   LIGHTBOX — OUTER FRAME (DELIBERATE + GLOW)
========================================================= */

.bgp-lightbox .bgp-lightbox-inner {
  border: 2px solid var(--lb-hint-color, transparent) !important;

  box-shadow:
    /* crisp structural edge */
    0 0 0 1px rgba(0,0,0,0.64),

    /* near-edge lane glow */
    0 0 10px color-mix(in srgb, var(--lb-hint-color) 32%, transparent),

    /* soft outer atmosphere */
    0 0 28px color-mix(in srgb, var(--lb-hint-color) 18%, transparent),

    /* depth */
    0 28px 78px rgba(0,0,0,0.74) !important;

  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


/* =========================================================
   LIGHTBOX — INNER AREA (NEUTRAL ONLY)
========================================================= */

.bgp-lightbox-frame,
.bgp-image-wrapper,
.bgp-lightbox .bgp-image-wrapper {
  border: 1px solid rgba(255,255,255,0.055) !important;
  box-shadow: none !important;
  background: rgba(0,0,0,0.56) !important;
}

/* kill any inherited inner glow / borders */
.bgp-lightbox-frame::before,
.bgp-lightbox-frame::after,
.bgp-image-wrapper::before,
.bgp-image-wrapper::after,
.bgp-lightbox .bgp-image-wrapper::before,
.bgp-lightbox .bgp-image-wrapper::after {
  box-shadow: none !important;
  border-color: transparent !important;
}


/* =========================================================
   LIGHTBOX — IMPACT LANE BACKGROUND CONTROL
========================================================= */

body[data-lightbox-lane="impact"] .bgp-lightbox .bgp-lightbox-inner,
body[data-lightbox-lane="impact"] .bgp-lightbox-frame,
body[data-lightbox-lane="impact"] .bgp-image-wrapper {
  background: #0c0a0a !important;
}


/* =========================================================
   MAGNIGTING GLASS EFFECT OVER CHARTS
========================================================= */


.chart-magnifier-glass {
  position: absolute;
  border: 3px solid #334;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(0,0,0,0.5), inset 0 0 8px rgba(0,0,0,0.4);
  pointer-events: none;
  display: none;
  z-index: 30;
  background-color: #000;
  background-repeat: no-repeat;
  transition: none; /* instant movement, feels snappy */

}



/* =========================================================
   BENCHMARK STRIP ABOVE CHART/INSIGHTS SPLIT
========================================================= */

#bgp-live-coverflow .bgp-cover-body--with-benchmark{
  display:block;
}

#bgp-live-coverflow .bgp-benchmark-strip{
  margin: 0 0 14px 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(9,22,30,0.34);
  border: 1px solid rgba(120,190,210,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 10px 24px rgba(0,0,0,0.18);
}

#bgp-live-coverflow .bgp-benchmark--strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 22px;
  background:none;
  border:none;
  box-shadow:none;
  padding:0;
  margin:0;
  min-height:unset;
}

#bgp-live-coverflow .bgp-benchmark--strip .bgp-benchmark-title{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.9;
}

#bgp-live-coverflow .bgp-benchmark--strip .bgp-benchmark-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0;
  white-space:nowrap;
}

#bgp-live-coverflow .bgp-benchmark--strip .bgp-benchmark-label{
  opacity:0.82;
}

#bgp-live-coverflow .bgp-benchmark--strip .bgp-benchmark-value{
  font-weight:700;
}

#bgp-live-coverflow .bgp-benchmark--strip .bgp-benchmark-openrank{
  margin:0 0 0 8px;
}

@media (max-width: 1100px){
  #bgp-live-coverflow .bgp-benchmark--strip{
    flex-wrap:wrap;
    row-gap:10px;
  }
}



/* =========================================================
   LIVE CARD STRUCTURE FIX
   Benchmark row above split row - Insights and Chart below
========================================================= */

#bgp-live-coverflow .bgp-cover.is-active .bgp-cover-body.bgp-cover-body--with-benchmark {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 16px !important;
  padding: 0 16px 16px 16px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

/* Benchmark = full-width top row */
#bgp-live-coverflow .bgp-cover.is-active .bgp-benchmark-strip {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

/* Split row underneath */
#bgp-live-coverflow .bgp-cover.is-active .bgp-cover-split {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.35fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}

/* Left column */
#bgp-live-coverflow .bgp-cover.is-active .bgp-cover-split > .bgp-cover-insights {
  grid-column: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* Right column */
#bgp-live-coverflow .bgp-cover.is-active .bgp-cover-split > .bgp-cover-charts {
  grid-column: 2 !important;  
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 0 !important;

  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: stretch !important;
}

#bgp-live-coverflow .bgp-cover.is-active .bgp-cover-split > .bgp-cover-charts .bgp-panel {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* =========================================================
   BENCHMARK ROW — FT / BLOOMBERG STYLE (OPTION B)
   Flat ticker, minimal chrome, preserves chart space
========================================================= */

#bgp-live-coverflow .bgp-cover .bgp-benchmark-strip{
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Main ticker row */
#bgp-live-coverflow .bgp-cover .bgp-benchmark,
#bgp-live-coverflow .bgp-cover .bgp-benchmark--strip{
  display: flex;
  align-items: center;
  gap: 16px;

  min-height: 30px;
  padding: 3px 0 7px 0;
  margin: 0;

  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(214,232,244,0.14);

  border-radius: 0;
  box-shadow: none;
}

/* Title (very subtle) */
#bgp-live-coverflow .bgp-cover .bgp-benchmark-title{
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.42);
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Each metric */
#bgp-live-coverflow .bgp-cover .bgp-benchmark-row{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

/* Labels */
#bgp-live-coverflow .bgp-cover .bgp-benchmark-label{
  font-size: 11px;
  line-height: 1.1;
  color: rgba(255,255,255,0.54);
  font-weight: 500;
  margin: 0;
  padding: 0;
}

/* Values (primary emphasis) */
#bgp-live-coverflow .bgp-cover .bgp-benchmark-value{
  font-size: 12px;
  line-height: 1.1;
  color: rgba(255,255,255,0.95);
  font-weight: 650;
  margin: 0;
  padding: 0;
}

/* Right-side action (de-emphasised) */
#bgp-live-coverflow .bgp-cover .bgp-benchmark-openrank{
  margin-left: auto;

  background: transparent;
  border: 0;
  padding: 0;

  color: rgba(196,220,236,0.82);
  font-size: 10.5px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.06em;

  cursor: pointer;
}

/* Subtle hover — editorial, not buttony */
#bgp-live-coverflow .bgp-cover .bgp-benchmark-openrank:hover{
  color: #d9edf9;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =========================================================
   SPLIT LAYOUT — FINAL BALANCED RATIO
========================================================= */

#bgp-live-coverflow .bgp-cover.is-active .bgp-cover-split {
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.5fr) !important;
  padding-top: 10px !important;

}

/* =========================================================
   SPLIT LAYOUT — SNAPSHOT VARIANT (TEXT-HEAVIER)
   ---------------------------------------------------------
   Snapshot cards contain more narrative/benchmark content,
   so we widen the insights panel (~35 / 65 split)

   Base = ~30 / 70
   Snapshot = ~35 / 65
========================================================= */

#bgp-live-coverflow
.bgp-cover.bgp-cover--snapshot.is-active
.bgp-cover-split {
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.45fr) !important;
}

/* =========================================================
   INSIGHTS PANEL — PRUNED REBUILD
========================================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card *{
  text-align:left !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;

  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  line-height:1.35 !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card-inner{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;

  padding:26px 26px 22px 18px !important;
  border-left:2px solid rgba(255,255,255,0.08) !important;
  gap:12px !important;

  background:transparent !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card h3{
  margin:0 0 18px 0 !important;
  font-size:28px !important;
  line-height:1.12 !important;
  font-weight:700 !important;
  color:#e8f2f8 !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card p{
  margin:0 0 14px 0 !important;
  font-size:15px !important;
  line-height:1.5 !important;
  color:rgba(235,240,245,0.94) !important;
  font-weight:500 !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card ul{
  margin:0 0 14px 0 !important;
  padding-left:20px !important;
  list-style:disc !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card li{
  margin-bottom:10px !important;
  font-size:14px !important;
  line-height:1.5 !important;
  color:rgba(225,232,238,0.78) !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card li:last-child{
  margin-bottom:0 !important;
}

/* =========================================================
   INSIGHTS PANEL — REFINEMENT PASS
========================================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card-inner{
  padding:22px 24px 20px 20px !important;
  border-left:1px solid rgba(255,255,255,0.10) !important;
  gap:10px !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card h3{
  margin:0 0 14px 0 !important;
  font-size:24px !important;
  line-height:1.12 !important;
  font-weight:700 !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card p{
  margin:0 0 12px 0 !important;
  font-size:14.5px !important;
  line-height:1.48 !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card ul{
  margin:2px 0 10px 0 !important;
  padding-left:18px !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card li{
  margin-bottom:8px !important;
  font-size:13.5px !important;
  line-height:1.45 !important;
  color:rgba(225,232,238,0.72) !important;
}


/* =========================================================
   INSIGHTS SUBTITLE AS LOW-KEY BADGE
========================================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-subtitle{
  display:inline-flex !important;
  align-self:flex-start !important;

  padding:4px 8px !important;
  margin:2px 0 8px 0 !important;

  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  letter-spacing:0.05em !important;
  text-transform:uppercase !important;

  color:rgba(205,215,225,0.68) !important;
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:6px !important;
}

/* =========================================================
   INSIGHTS PANEL — FINAL POLISH
========================================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-subtitle{
  background:rgba(255,255,255,0.02) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  color:rgba(205,215,225,0.58) !important;
  margin:4px 0 10px 0 !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-title{
  margin-bottom:12px !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-lead{
  margin:4px 0 12px 0 !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-divider{
  display:none !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-bullets li{
  color:rgba(225,232,238,0.68) !important;
}

/* =========================================================
   INSIGHTS SUBTITLE — FINAL POSITION + SIZE
========================================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-card-inner{
  padding-top:8px !important;
  display:flex !important;
  flex-direction:column !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-subtitle{
  order:-1 !important;

  display:inline-block !important;
  align-self:flex-start !important;

  padding:2px 6px !important;
  margin:0 0 5px 0 !important;
  border-radius:6px !important;

  font-size:10px !important;
  line-height:1.1 !important;
  letter-spacing:0.04em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-insights-title{
  margin:0 0 10px 0 !important;
}


/* =========================================================
   INSIGHTS YEAR BADGE
   Moves the old header year badge into the insights panel
   as a compact secondary row beneath the main answer title.
========================================================= */


#bgp-live-coverflow .bgp-insights-year-badge{
  display: inline-flex;
  align-items: center;

  width: auto;
  max-width: max-content;
  white-space: nowrap;

  margin: 0 0 10px 0;
  padding: 2px 8px 3px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);

  border-radius: 4px;
  box-shadow: none;
}

/* Ensure clean spacing into headline */
#bgp-live-coverflow .bgp-insights-title{
  margin-top: 0;
}


/* ============================================
   LEGACY SUMMARY TYPOGRAPHY — STRUCTURAL RHYTHM
   --------------------------------------------
   Although scoped to non-Gapometer cards, this
   block indirectly stabilises vertical rhythm
   across the coverflow (title height, wrapping,
   spacing).

   Removing or relocating this can cause:
   - Gapometer insights panel to grow vertically
   - Chart column to shift downward
   - Expand button misalignment

   Treat as layout-critical, not purely visual.
   If refactoring, replicate equivalent spacing
   in .bgp-cover--gapometer before removing.
============================================ */


body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-cover-insights
.bgp-summary-kicker{
  margin-bottom: 10px !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgba(190,210,225,0.72) !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover:not(.bgp-cover--gapometer)
.bgp-cover-insights
.bgp-summary-title{
  margin: 0 0 18px 0 !important;
  line-height: 1.1 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #e8f2f8 !important;
}


/* ============================================
   SUMMARY CARD BASE — STRUCTURAL SIZING + FLOW
   --------------------------------------------
   Controls core dimensions of the summary /
   Gapometer insights panel (height, padding,
   typography scale).

   Although visually subtle, this block affects:
   - Total card height (min-height + padding)
   - Text wrapping density (title + bullets)
   - Alignment with chart column
   - Expand button vertical position

   Removing or altering can cause:
   - Gapometer card to stretch vertically
   - Misalignment between insights and charts
   - Expand button dropping below panel

   Treat as layout-critical baseline.
   If redesigning, replicate spacing + scale
   before removing.
============================================ */

/* ---- 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 / SNAPSHOT INSIGHTS PANEL
   ---------------------------------------------------------
   Purpose:
   Align the Snapshot / Gapometer insights panel with the
   non-Gapometer cards while preserving Snapshot-specific
   structure and darker body fill.

   Includes:
   - compact FT-style year badge
   - matching title/body/bullets hierarchy
   - no boxed inner panel
   - subtle left rule
   - darker card body fill
   - no grey strip at bottom
========================================================= */

/* Snapshot shell must own the dark fill too */
body.bgp-barometer
#bgp-live-coverflow
section.bgp-cover--gapometer.is-active{
  background:
    linear-gradient(
      90deg,
      rgba(6,16,24,0.92) 0%,
      rgba(7,18,27,0.90) 32%,
      rgba(9,20,30,0.86) 52%,
      rgba(12,22,32,0.82) 100%
    ) !important;

  display:flex !important;
  flex-direction:column !important;
}

/* Base summary alignment */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-card,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-card *{
  text-align:left !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-card{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:auto !important;
  line-height:1.35 !important;

  margin:0 !important;
  padding:0 !important;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-card-inner{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  height:100% !important;

  padding:8px 24px 20px 20px !important;
  gap:0 !important;

  background:transparent !important;
  border:none !important;
  border-left:1px solid rgba(255,255,255,0.12) !important;
  box-shadow:none !important;
  border-radius:0 !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Hide legacy snapshot elements if present */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-kicker,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-insights-subtitle,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-insights-divider{
  display:none !important;
}

/* Year badge */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-insights-year-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:auto !important;
  max-width:max-content !important;
  white-space:nowrap !important;

  margin:0 0 12px 0 !important;
  padding:2px 8px 3px !important;

  font-size:10px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:0.07em !important;
  text-transform:uppercase !important;

  color:rgba(255,255,255,0.88) !important;
  background:rgba(255,255,255,0.035) !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  border-radius:4px !important;
  box-shadow:none !important;
}

/* Title */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-title,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-insights-title,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-card h3{
  margin:2px 0 8px 0 !important;
  font-size:24px !important;
  line-height:1.12 !important;
  font-weight:700 !important;
  letter-spacing:-0.01em !important;
  color:#f1f7fb !important;
}

/* Lead */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-lead,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-card p{
  margin:0 0 12px 0 !important;
  font-size:14.5px !important;
  line-height:1.48 !important;
  font-weight:500 !important;
  color:rgba(235,240,245,0.94) !important;
}

/* Bullets */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-bullets,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-card ul{
  margin:2px 0 12px 0 !important;
  padding-left:18px !important;
  list-style:disc !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-bullets li,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-card li{
  margin-bottom:8px !important;
  font-size:13.5px !important;
  line-height:1.45 !important;
  color:rgba(225,232,238,0.72) !important;
}

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

/* Read more link */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-summary-more{
  margin-top:auto !important;
  padding-top:8px !important;
  font-size:15px !important;
  line-height:1.3 !important;
  font-weight:500 !important;
}

/* Snapshot body fill — includes grey-strip fix */
body.bgp-barometer
#bgp-live-coverflow
section.bgp-cover--gapometer.is-active
.bgp-cover-body{
  background:
    linear-gradient(
      90deg,
      rgba(6,16,24,0.92) 0%,
      rgba(7,18,27,0.90) 32%,
      rgba(9,20,30,0.86) 52%,
      rgba(12,22,32,0.82) 100%
    ) !important;

  flex:1 1 auto !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  border-bottom-left-radius:inherit !important;
  border-bottom-right-radius:inherit !important;
  overflow:hidden !important;
}

/* Keep chart area visually clean */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-panel,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-thumb,
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-thumb-unified{
  background:transparent !important;
}


/* =========================================================
   GAPOMETER / SNAPSHOT — TICKER ROW
   ---------------------------------------------------------
   Purpose:
   Add a non-scrolling FT/Bloomberg-style ticker row below
   the Snapshot header for structural consistency with the
   other cards.
========================================================= */

#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-cover-body--with-gapometer-ticker{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  gap:16px !important;
  padding:0 16px 16px 16px !important;
  box-sizing:border-box !important;
  align-items:stretch !important;
}

#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-gapometer-ticker-strip{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-gapometer-ticker{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;

  min-height:30px !important;
  padding:3px 0 7px 0 !important;
  margin:0 !important;

  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid rgba(214,232,244,0.14) !important;

  border-radius:0 !important;
  box-shadow:none !important;

  flex-wrap:wrap !important;
}

#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-gapometer-ticker-item{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:6px !important;
  white-space:nowrap !important;
}

#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-gapometer-ticker-label{
  font-size:11px !important;
  line-height:1.1 !important;
  color:rgba(255,255,255,0.54) !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  letter-spacing:0.04em !important;
}

#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-gapometer-ticker-value{
  font-size:12px !important;
  line-height:1.1 !important;
  color:rgba(255,255,255,0.95) !important;
  font-weight:650 !important;
  text-transform:uppercase !important;
}

#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-gapometer-ticker-sep{
  font-size:14px !important;
  line-height:1 !important;
  color:rgba(255,255,255,0.34) !important;
}

#bgp-live-coverflow
.bgp-cover--gapometer
.bgp-cover-body--with-gapometer-ticker
.bgp-gapometer-split{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
}




/* Snapshot ticker – full-width banner at top of card body */
.bgp-cover-body .bgp-at-a-glance-ticker-strip,
.bgp-cover-body [class*="ticker-strip"] {
  width: 100% !important;
  margin: 0 0 24px 0 !important;
  padding: 16px 24px !important;
  background: rgba(20, 40, 60, 0.6) !important;   /* darker teal-ish for contrast */
  border-radius: 12px !important;
  border: 1px solid rgba(80, 160, 200, 0.25) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #e0f0ff !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* Make ticker items horizontal and spaced */
.bgp-at-a-glance-ticker,
[class*="ticker"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.bgp-at-a-glance-ticker-item,
[class*="ticker-item"] {
  white-space: nowrap !important;
}

/* Extra breathing room below ticker */
.bgp-cover-split {
  margin-top: 0 !important;   /* no extra top margin needed */
  padding-top: 12px !important;
  gap: 32px !important;
}

/* Emergency escape for ticker if accidentally nested */
.bgp-cover-body .bgp-snapshot-ticker-strip {
  width: 100vw !important;              /* force full viewport if needed */
  max-width: 100% !important;
  margin-left: calc(-50vw + 50%) !important;  /* center breakout */
  margin-right: calc(-50vw + 50%) !important;
  border-radius: 0 !important;           /* full-bleed look */
  box-sizing: border-box !important;
}

/* But prefer normal if correctly placed */
.bgp-cover-body > .bgp-snapshot-ticker-strip {
  width: 100% !important;
  margin: 0 0 28px 0 !important;
  padding: 16px 24px !important;
  background: rgba(20, 40, 60, 0.65) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(80, 160, 200, 0.3) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #e0f0ff !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45) !important;
}


/* ============================================================
   ACTIVE COVER CARD HEIGHT SYSTEM
   ------------------------------------------------------------
   Purpose:
   Establish a single, maintainable height system for active
   coverflow cards.

   Why:
   - Replaces older duplicated fixed-height rules
   - Makes card sizing easy to tune in one place
   - Keeps gapometer excluded from this sizing system
   - Allows special cards (like snapshot) to override cleanly

   How it works:
   - Standard active cards use the base variables below
   - Snapshot card gets a larger override via its own variables
   - Other special cards can follow the same pattern later

   Generator dependency:
   - Snapshot card must include: .bgp-cover--snapshot
============================================================ */

body.bgp-barometer{
  --bgp-active-card-height: 578px;
  --bgp-active-card-body-height: 460px;

  /* Snapshot needs more vertical room */
  --bgp-snapshot-card-height: 768px;
  --bgp-snapshot-card-body-height: 640px;
}

/* Standard active cards */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active:not(.bgp-cover--gapometer):not(.bgp-cover--snapshot){
  height: var(--bgp-active-card-height) !important;
  min-height: var(--bgp-active-card-height) !important;
  max-height: var(--bgp-active-card-height) !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.is-active:not(.bgp-cover--gapometer):not(.bgp-cover--snapshot)
.bgp-cover-body{
  height: var(--bgp-active-card-body-height) !important;
  min-height: var(--bgp-active-card-body-height) !important;
  max-height: var(--bgp-active-card-body-height) !important;
}

/* Snapshot active card override */
body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.bgp-cover--snapshot.is-active{
  height: var(--bgp-snapshot-card-height) !important;
  min-height: var(--bgp-snapshot-card-height) !important;
  max-height: var(--bgp-snapshot-card-height) !important;
}

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover.bgp-cover--snapshot.is-active
.bgp-cover-body{
  height: var(--bgp-snapshot-card-body-height) !important;
  min-height: var(--bgp-snapshot-card-body-height) !important;
  max-height: var(--bgp-snapshot-card-body-height) !important;
}


/* =========================================================
   SNAPSHOT CARD — TONED DARK TEAL BACKGROUND
   ---------------------------------------------------------
   Purpose:
   Provide a darker, more "report-like" background for the
   snapshot card while maintaining visual cohesion with the
   chart panel (rgb(18,18,18)).

   Rationale:
   - Previous teal tones appeared too green vs chart background
   - Pure dark (near black) created visual separation
   - This value (10,18,20) is deliberately desaturated to sit
     close to the chart background while retaining a subtle
     teal identity

   Result:
   - Chart feels embedded within the card
   - Reduced contrast between card and chart layers
   - More cohesive, premium dashboard appearance

   Scope:
   - Snapshot cards only (.bgp-cover--snapshot)
   - Active state only
========================================================= */

.bgp-cover.bgp-cover--snapshot.is-active{
  background: rgba(10, 18, 20, 0.98) !important;
}

/* =========================================================
   SNAPSHOT CARD — ACTIVE VERTICAL OFFSET
   ---------------------------------------------------------
   Purpose:
   The snapshot card is taller than standard cards and
   appears visually low due to added height and content
   weight (especially charts).

   This offset re-centres the card within the viewport so
   it reads as the primary, featured panel.

   Value:
   -32px was chosen as the visual balance point after testing

   Notes:
   - Uses margin-top (not transform) to avoid interfering
     with coverflow positioning/animation logic
   - Scoped to snapshot + active only
========================================================= */



/* =========================================================
   COVER TITLE INDEX (e.g. 3/7)
   ---------------------------------------------------------
   Purpose:
   Secondary navigation indicator — should be visible but
   clearly subordinate to the main title.

   Tuned to ~70% scale with reduced emphasis.
========================================================= */

body.bgp-barometer
#bgp-live-coverflow
.bgp-cover-title-index{
  font-size: 0.7em;
  opacity: 0.6;
  font-weight: 400;
  letter-spacing: 0.1px;
  position: relative;
  top: -1px;
}



/* ============================================
   SNAPSHOT EXPLORE MORE CTA BUTTON
============================================ */
.bgp-explore-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  width: fit-content;
  align-self: flex-end;
  margin-left: auto;
  margin-top: 16px;

  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.26);

  background: rgba(5,54,60,0.92);
  color: #f5f5f5;
  text-decoration: none;
  cursor: pointer;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.15px;

  box-shadow:
    0 5px 14px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.14);

  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

.bgp-explore-more:hover{
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 7px 18px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

.bgp-explore-more:active{
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.bgp-explore-more .arrow{
  display: inline-block;
  transform: translateY(0.5px);
  font-size: 13px;
}


/* =========================================================
   BENCHMARK STRIP — CENTERED DATA RIBBON (ALL CARDS)

   PURPOSE:
   The snapshot card displays its benchmark/ticker content
   as a centred horizontal "data strip".

   Other cards were left-aligned because their layout uses
   flex rows without centering the parent container.

   This block standardises behaviour across ALL cards by:
   - Treating the benchmark strip as a single flex row
   - Centering that row within the card
   - Keeping each label+value pair tightly grouped
   - Preserving horizontal layout (no stacking)

   IMPORTANT:
   - Do NOT use width:100% on rows (causes vertical stacking)
   - Do NOT rely on text-align alone (flex layout overrides it)
   - Centering must be applied at the STRIP level

   RESULT:
   [ Global Rank 23/42 ] [ EU Rank 12/27 ] [ Avg 1.62 ] [ View Rankings ]
   → centered as a single visual unit, consistent with snapshot
========================================================= */

#bgp-live-coverflow .bgp-cover .bgp-benchmark--strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  text-align: center;
  flex-wrap: wrap; /* prevents overflow on smaller widths */
}

/* Keep each metric pair tight (label + value) */
#bgp-live-coverflow .bgp-cover .bgp-benchmark--strip .bgp-benchmark-row {
  display: inline-flex;
  align-items: baseline;
}



/* DEV NOTE:
   Benchmark divider under each card benchmark strip.
   Styled directly on .bgp-benchmark--strip because this is the rendered line
   that responds reliably in live coverflow states. Keeps lane differentiation
   subtle without introducing the orange tone into the impact lane.
*/

#bgp-live-coverflow .bgp-cover .bgp-benchmark--strip{
  border-bottom: 2px solid transparent !important;
}

/* Snapshot lane */
#bgp-live-coverflow .bgp-cover[data-lane="snapshot"] .bgp-benchmark--strip{
  border-bottom-color: rgba(52,130,136,0.72) !important;
}

/* Motherhood lane */
#bgp-live-coverflow .bgp-cover[data-lane="motherhood"] .bgp-benchmark--strip{
  border-bottom-color: rgba(52,130,136,0.82) !important;
}

/* Impact lane */
#bgp-live-coverflow .bgp-cover[data-lane="impact"] .bgp-benchmark--strip{
  border-bottom-color: rgba(150,56,56,0.82) !important;
}

/* DEV NOTE:
   Lock Explore More button to a dedicated footer inside insights cards.
   Prevents the CTA from drifting off-screen when insight text runs long.
*/

#bgp-live-coverflow .bgp-cover .bgp-cover-insights,
#bgp-live-coverflow .bgp-cover .bgp-insights-card,
#bgp-live-coverflow .bgp-cover .bgp-insights-card-inner{
  height: 100%;
}

#bgp-live-coverflow .bgp-cover .bgp-insights-card-inner{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#bgp-live-coverflow .bgp-cover .bgp-insights-main{
  flex: 1 1 auto;
  min-height: 0;
}

#bgp-live-coverflow .bgp-cover .bgp-insights-footer{
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: flex-end;
}

#bgp-live-coverflow .bgp-cover .bgp-insights-footer .bgp-explore-more{
  margin-top: 0;
  align-self: flex-start;
}




/* DEV NOTE:
   The Numbered Jump Nav Button Rows
*/

/* Secondary card-number row */
body.bgp-barometer .bgp-card-jump{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: min(720px, 100%);
  margin: 8px auto 14px;
  position: relative;
  z-index: 5;
}

body.bgp-barometer .bgp-card-jump[hidden]{
  display: none !important;
}

body.bgp-barometer .bgp-card-jump-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  color: rgba(230,235,238,0.80);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

body.bgp-barometer .bgp-card-jump-btn:hover{
  background: rgba(0,114,153,0.16);
  border-color: rgba(0,180,240,0.26);
  color: rgba(245,250,255,0.94);
  transform: translateY(-1px);
}

body.bgp-barometer .bgp-card-jump-btn.is-active,
body.bgp-barometer .bgp-card-jump-btn[aria-current="true"]{
  background: rgba(0,114,153,0.26);
  border-color: rgba(0,180,240,0.36);
  color: rgba(245,250,255,0.98);
  box-shadow: 0 0 0 1px rgba(0,180,240,0.16) inset;
}

/* Learn More nav button */
body.bgp-barometer .bgp-card-jump-btn-learn{
  width: auto;
  min-width: 28px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.2px;
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(235,240,242,0.88);
}

body.bgp-barometer .bgp-card-jump-btn-learn:hover{
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.08);
  color: rgba(245,248,250,0.96);
}

/* Lane-themed states */
body.bgp-barometer .bgp-card-jump.is-lane-motherhood .bgp-card-jump-btn{
  border-color: rgba(0,180,240,0.34);
  background: rgba(0,180,240,0.03);
  color: rgba(230,244,248,0.72);
}

body.bgp-barometer .bgp-card-jump.is-lane-motherhood .bgp-card-jump-btn.is-active,
body.bgp-barometer .bgp-card-jump.is-lane-motherhood .bgp-card-jump-btn[aria-current="true"]{
  border-color: rgba(0,180,240,0.82);
  background: rgba(0,180,240,0.16);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(0,180,240,0.18) inset;
}

body.bgp-barometer .bgp-card-jump.is-lane-impact .bgp-card-jump-btn{
  border-color: rgba(170,76,76,0.40);
  background: rgba(170,76,76,0.03);
  color: rgba(255,236,236,0.72);
}

body.bgp-barometer .bgp-card-jump.is-lane-impact .bgp-card-jump-btn.is-active,
body.bgp-barometer .bgp-card-jump.is-lane-impact .bgp-card-jump-btn[aria-current="true"]{
  border-color: rgba(150,50,50,0.85);
  background: rgba(150,50,50,0.14);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(150,50,50,0.16) inset;
}

@media (max-width: 1023px){
  body.bgp-barometer .bgp-card-jump{
    gap: 6px;
    margin: 8px auto 12px;
  }

  body.bgp-barometer .bgp-card-jump-btn{
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

/* 
------------------------------------------------------------------------------
BGP COVERFLOW HEIGHT + JUMP NAV SPACING FIX
------------------------------------------------------------------------------

Problem:
- Coverflow container (.bgp-coverflow / #bgp-live-coverflow) was forced to a 
  fixed stage height via:
    height: var(--bgp-stage-min) !important;
    min-height: var(--bgp-stage-min) !important;

- This caused excessive empty space under shorter cards (e.g. motherhood, impact),
  pushing the jump navigation row too far down.

- Additional bottom spacing (margin/padding) on #bgp-live-coverflow further 
  increased the gap.

Root Cause:
- CSS was overriding dynamic JS resizing of the active card.
- Layout assumed tallest (snapshot) card height for all lanes.

Fix:
1. Allow JS to control height for shorter lanes (motherhood, impact)
2. Remove bottom spacing from the live coverflow container

Important:
- We KEEP margin-top (e.g. 60px) to preserve vertical positioning of the card
- We ONLY remove forced height + bottom spacing
- Snapshot lane remains unaffected (still uses stage sizing)

Result:
- Coverflow height matches active card
- Jump nav sits directly below card with consistent spacing
- No layout shift for snapshot lane

------------------------------------------------------------------------------
*/

body.bgp-barometer.bgp-lane-motherhood .bgp-country-panel.is-active .bgp-coverflow,
body.bgp-barometer.bgp-lane-impact .bgp-country-panel.is-active .bgp-coverflow {
  min-height: 0 !important;
  height: unset !important;
}

#bgp-live-coverflow {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/*
------------------------------------------------------------------------------
INLINE COUNTRY NAVIGATION (▲ ▼) — HEADER CONTROLS
------------------------------------------------------------------------------

Purpose:
Adds compact previous/next country controls directly beside the country name
in the live panel header.

UX Rationale:
- Country navigation is conceptually separate from card navigation
- Left/right chevrons = move between cards
- ▲ ▼ controls = move between countries
- Placing controls beside the country label reinforces this ownership

Design Decisions:
- Inline placement (no vertical space required)
- Small, low-emphasis buttons (secondary control)
- Circular shape to match existing control language
- Subtle opacity and border to avoid competing with primary UI

Implementation Notes:
- Buttons live ONLY in the live shell (not in generated country panels)
- Mobile header clones this element, so styles must work in both contexts
- IDs are stripped in mobile clone; styling must NOT rely on IDs

Sizing:
- Desktop: 18px buttons for clarity
- Mobile: 16px buttons to reduce visual weight

Accessibility:
- Buttons include aria-label + title for clarity
- Hover/focus states improve discoverability

Do NOT:
- Increase size to match card chevrons (breaks visual hierarchy)
- Move controls onto the card itself (causes UX ambiguity)
- Reintroduce year range in header (space is intentionally reclaimed)

If adjusting:
- Keep gap tight (4–8px max)
- Maintain subtle styling (low contrast until hover)
- Recheck alignment with flag + country name baseline

------------------------------------------------------------------------------
*/

body.bgp-barometer .bgp-country-inline-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

body.bgp-barometer .bgp-country-inline-btn {
  appearance: none;
  border: 1px solid rgba(160,190,205,0.28);
  background: rgba(255,255,255,0.03);
  color: rgba(220,235,242,0.82);
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
}

body.bgp-barometer .bgp-country-inline-btn:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(235,245,250,0.96);
}

.mobile-country-header .bgp-country-inline-btn {
  width: 16px;
  height: 16px;
  font-size: 7px;
}


/*
------------------------------------------------------------------------------
COUNTRY HEADER LAYOUT — GRID (FLAG + NAME ABOVE, NAV BELOW)
------------------------------------------------------------------------------

Problem:
Inline country navigation (▲ ▼) caused horizontal shifting depending on
country name length. Flex-based stacking also broke the flag/name alignment.

Solution:
Use CSS Grid on .bgp-country-line to explicitly control layout:

Row 1:
  [flag] [country name]

Row 2:
  [   nav (▲ ▼ centered across full width)   ]

Why Grid:
- Guarantees stable positioning regardless of text length
- Keeps flag + name aligned on a single row
- Allows nav to span full width cleanly
- More reliable than flex for mixed row/column layouts

Important:
- Do NOT switch this back to flex-direction: column
  → breaks flag/name alignment
- Do NOT use inline nav placement
  → causes layout jitter
- Nav must span both columns (grid-area: nav)

Result:
- Stable, centered controls
- No horizontal movement across countries
- Clear separation between label (row 1) and controls (row 2)

Scope:
Applied only to #bgp-live-panel to avoid affecting repo templates.
------------------------------------------------------------------------------
*/
/* Country header layout */
#bgp-live-panel .bgp-country-line{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Flag + country name stay on first row */
#bgp-live-panel .bgp-country-line > .bgp-flag,
#bgp-live-panel .bgp-country-line > .bgp-country-name{
  display: inline-flex;
  align-items: center;
}

/* Nav (triangles) forced onto second row */
#bgp-live-panel .bgp-country-line > .bgp-country-inline-nav{
  flex-basis: 100%;          /* forces new row */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
  position: static;
}

/* Button spacing */
#bgp-live-panel .bgp-country-inline-btn{
  margin: 0 4px;
}

#bgp-live-panel .bgp-country-line{
  gap: 2px 8px; /* row gap, column gap */
}


#bgp-live-panel .bgp-country-line{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2px 8px; /* ↓ tighter vertical spacing */
}

/* Nav (triangles) */
#bgp-live-panel .bgp-country-line > .bgp-country-inline-nav{
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;              /* 🔥 remove extra push down */
}

/* Buttons */
#bgp-live-panel .bgp-country-inline-btn{
  margin: 0 3px;
  height: 16px;               /* ↓ slightly smaller */
  line-height: 1;
}

#bgp-live-panel .bgp-country-line .bgp-country-inline-nav {
  margin-top: -10px !important;
}



/* =============================================================================
   BGP Nav Button Tooltip – FINAL PRODUCTION VERSION
   - Vertical centering + comfortable spacing
   - Allows wrapping on long titles
   - Everything !important to override any conflicts
   - Hover-only (no permanent text on button)
============================================================================= */

#bgp-live-coverflow .bgp-nav-btn:hover::after {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  line-height: 1.45 !important;
  min-height: 38px !important;
  margin: 0 !important;
}


/* =============================================================================
   PYRAMID FOR TGO
============================================================================= */

/* Core pyramid structure */
.bgp-tgi-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding-top: 0;
}

/* Stage container */
.bgp-tgi-stage {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Label above bar */
.bgp-tgi-stage-label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: rgba(255,255,255,0.92);
}

/* The colored bar itself */
.bgp-tgi-stage-bar {
  min-height: 30px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b7aa7 0%, #1f9bd1 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 8px 24px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

/* Number inside bar */
.bgp-tgi-stage-value {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* Downward arrow between stages */
.bgp-tgi-arrow {
  width: 0;
  height: 0;
  margin: 2px auto 2px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 16px solid rgba(255,255,255,0.52);
}

/* Responsive adjustments (optional but recommended) */
@media (max-width: 1100px) {
  .bgp-tgi-stage-label {
    font-size: 13px;
  }
  .bgp-tgi-stage-value {
    font-size: 15px;
  }
  .bgp-tgi-stage-bar {
    min-height: 28px;
  }
}

/* Impact-lane red theme for TGI pyramid */
.bgp-tgi-stage-bar {
  min-height: 31px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c45454 0%, #ab3f3f 55%, #8d2d2d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 10px 22px rgba(90,24,24,0.22);
}

/* Darker as we go down (optional perceptual hierarchy) */
.bgp-tgi-stage:nth-of-type(3) .bgp-tgi-stage-bar {
  background: linear-gradient(180deg, #bb4a4a 0%, #a13636 55%, #842727 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 10px 22px rgba(84,20,20,0.22);
}

.bgp-tgi-stage:nth-of-type(5) .bgp-tgi-stage-bar {
  background: linear-gradient(180deg, #b04242 0%, #962f2f 55%, #792222 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.22),
    0 10px 20px rgba(78,18,18,0.20);
}

.bgp-tgi-stage:nth-of-type(7) .bgp-tgi-stage-bar {
  background: linear-gradient(180deg, #a23838 0%, #892828 55%, #6d1d1d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 10px 18px rgba(68,16,16,0.18);
}

/* Brighter numbers lower down (perceptual compensation) */
.bgp-tgi-stage:nth-of-type(1) .bgp-tgi-stage-value { color: rgba(255,255,255,0.88) !important; }
.bgp-tgi-stage:nth-of-type(3) .bgp-tgi-stage-value { color: rgba(255,255,255,0.94) !important; }
.bgp-tgi-stage:nth-of-type(5) .bgp-tgi-stage-value { color: rgba(255,255,255,0.97) !important; }
.bgp-tgi-stage:nth-of-type(7) .bgp-tgi-stage-value { color: #ffffff !important; }

/* Arrow connector */
.bgp-tgi-arrow {
  border-top-color: rgba(255,255,255,0.68) !important;
}


/* TGI layout fix – force flex instead of grid for wide left column */
#bgp-live-coverflow .bgp-cover.is-active[data-cover="tgi"] .bgp-cover-split {
  display: flex !important;
  grid-template-columns: none !important; /* disable grid rule */
  flex-direction: row !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
  min-height: 400px !important;
}

/* Left column: grow comfortably (tune % if needed) */
#bgp-live-coverflow .bgp-cover.is-active[data-cover="tgi"] .bgp-cover-insights {
  flex: 1 1 40% !important;     /* 40% left – wide enough for button + text */
  min-width: 0 !important;
  max-width: none !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* Right column: fill remaining space */
#bgp-live-coverflow .bgp-cover.is-active[data-cover="tgi"] .bgp-cover-charts {
  flex: 1 1 60% !important;     /* 60% right – pyramid gets good space */
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
  box-sizing: border-box !important;
}

/* Production fix: Report card left width — based on successful Test 3 (48%) */
.bgp-cover[data-cover="report"] .bgp-cover-split {
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-auto-columns: none !important;
  flex-direction: row !important;
  gap: 18px !important;               /* matches your original */
  align-items: start !important;
  width: 100% !important;
}

/* Left column: 48% nudge (your Test 3 sweet spot) */
.bgp-cover[data-cover="report"] .bgp-cover-insights {
  flex: 1 1 48% !important;
  min-width: 500px !important;        /* prevents squeeze on smaller screens */
  max-width: 52% !important;          /* caps to protect right side */
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/* Production: Report card left width fix — matches Test 3 success (48%) */
/* This overrides the grid cap on the Report-specific split container */

.bgp-cover[data-cover="report"] .bgp-cover-split {
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-auto-columns: none !important;
  flex-direction: row !important;
  gap: 18px !important;
  align-items: start !important;
  width: 100% !important;
}

/* Left column: 48% (your Test 3 sweet spot) */
.bgp-cover[data-cover="report"] .bgp-cover-insights {
  flex: 1 1 48% !important;
  min-width: 500px !important;
  max-width: 52% !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}





/* Override the column direction on report charts container */
#bgp-live-coverflow .bgp-cover[data-cover="report"] .bgp-cover-charts {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.bgp-report-preview-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  margin-bottom: 40px !important;
}





.bgp-country-inline-nav{
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
}

.bgp-country-inline-btn{
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

#bgp-live-coverflow .bgp-nav-btn::before,
#bgp-live-coverflow .bgp-nav-btn::after {
  transition-delay: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0.1s !important;
}


/* =========================================================
   COVER TITLE HIERARCHY (Lane + Title) — FORCE OVERRIDES
   ========================================================= */

/* Container spacing */
.bgp-cover-title{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
}

/* Lane label (e.g. SOCIETAL IMPACT (3/5)) */
.bgp-cover-lane-label{
  font-size:11px !important;
  letter-spacing:0.14em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,0.65) !important;
  font-weight:700 !important;
}

/* (n/N) index inside lane label */
.bgp-cover-lane-index{
  font-size:11px !important;
  color:rgba(255,255,255,0.40) !important;
  font-weight:500 !important;
}

/* Main card title */
.bgp-cover-title-main{
  font-size:22px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
}





/* =========================================================
   DEV NOTE — GLOBAL TOOLTIPS (INLINE + RICH 2-COLUMN CARD)
   Used for:
   - simple text tooltips (e.g. GGC)
   - rich HTML tooltips (e.g. Birthgap 15™)
   ========================================================= */

.bgp-has-tooltip {
  text-decoration: underline dotted;
  text-underline-offset: 0.12em;
  cursor: help;
}

.bgp-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;

  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;

  background: rgba(10, 30, 40, 0.96);
  color: #e6f0f2;

  font-size: 13px;
  line-height: 1.35;
  white-space: normal;

  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.bgp-tooltip--rich {
  width: 340px;
  max-width: 340px;
  padding: 14px 16px;
}

.bgp-tooltip-title {
  margin: 0 0 10px 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}

.bgp-tooltip-body {
  margin: 0 0 10px 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(230,240,242,0.92);
}

.bgp-tooltip-list {
  margin: 0;
  padding-left: 18px;
  columns: 2;
  column-gap: 24px;
}

.bgp-tooltip-list li {
  margin: 0 0 4px 0;
  break-inside: avoid;
}



/* =========================================================
   DEV NOTE — FLAG INSIDE ACTIVE CARD TITLE
   Removes need for separate top country row on desktop
   ========================================================= */

.bgp-cover-title-main--with-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bgp-cover-title-text {
  display: inline-block;
}

.bgp-inline-flag {
  width: 33px;
  height: 24px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
  opacity: 0.96;
  flex-shrink: 0;
  transform: translateY(1px);
}



/* =========================================================
   DEV NOTE — TOP CONTROL ROW + CARD-HEADER COUNTRY SWITCHER
   - Lane buttons inline with Country Profile CTA
   - Country prev/next moved into active card header
   ========================================================= */
/* ── Top Controls Row ── Single horizontal row, even spacing, no wrap ── */
.bgp-top-controls-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 10px !important;
  margin: 0 0 0.2rem 0 !important;
  padding: 0 10px 8px !important;
  width: 100% !important;
  max-width: none !important;
  overflow-x: hidden !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-sizing: border-box !important;
}

/* ── Button Group Container ── */
.bgp-lane-controls {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  justify-content: space-evenly !important;
}

/* ── All buttons – equal size, shorter/narrower ── */
.bgp-lane-btn {
  flex: 1 1 0 !important;
  min-width: 130px !important;
  padding: 0.55rem 1rem !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  border-radius: 999px !important;
  background: #1a252f !important;
  border: 1px solid #334 !important;
  color: #c9d8e8 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  transition: all 0.18s ease !important;
}

/* Hover & focus */
.bgp-lane-btn:hover,
.bgp-lane-btn:focus {
  background: #2a3b55 !important;
  color: white !important;
  border-color: #4a6b99 !important;
}

/* Active lane */
.bgp-lane-btn.is-active {
  background: #3366cc !important;
  color: white !important;
  border-color: #3366cc !important;
}

/* ── Country Profile – whitish text on Patreon background ── */
.bgp-lane-btn--profile {
  flex: 1 1 0 !important;
  min-width: 130px !important;
  background: var(--color-btn-bg-patreon) !important;
  color: #ffffff !important;                    /* Whitish / pure white text */
  border: 1px solid var(--color-btn-bg-patreon) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Orange/Patreon hover */
.bgp-lane-btn--profile:hover,
.bgp-lane-btn--profile:focus {
  background: color-mix(in srgb, var(--color-btn-bg-patreon) 80%, white) !important;
  border-color: color-mix(in srgb, var(--color-btn-bg-patreon) 80%, white) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}

/* ── Desktop: lock single row ── */
@media (min-width: 980px) {
  .bgp-top-controls-row,
  .bgp-lane-controls {
    flex-wrap: nowrap !important;
    justify-content: space-evenly !important;
  }
}

/* ── Mobile: horizontal scroll, no vertical stacking ── */
@media (max-width: 979px) {
  .bgp-top-controls-row {
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }
  .bgp-lane-btn,
  .bgp-lane-btn--profile {
    min-width: 110px !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.85rem !important;
  }
}

/* ── Hide legacy/redundant elements ── */
.bgp-country-nav,
.bgp-country-updown,
.bgp-country-arrows,
#bgp-live-country-prev,
#bgp-live-country-next,
.bgp-country-inline-btn,
.bgp-country-inline-nav,
.bgp-country-pill,
#bgp-live-flag,
#bgp-live-country-name,
.bgp-country-row--profileonly,
.bgp-country-pill--hidden {
  display: none !important;
}

/* ── Card header country switcher (prev/next arrows inside active card) ── */
#bgp-live-coverflow .bgp-cover .bgp-cover-head {
  position: relative !important;
}

.bgp-cover-country-switcher {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 3 !important;
}

.bgp-cover-country-switch {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(9,22,30,0.72) !important;
  color: #dce8ed !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease !important;
}

.bgp-cover-country-switch:hover {
  background: rgba(14,42,54,0.92) !important;
  border-color: rgba(0,180,255,0.35) !important;
  transform: translateY(-1px) !important;
}

.bgp-cover-country-switch span {
  font-size: 22px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* Responsive tweaks */
@media (max-width: 1180px) {
  .bgp-top-controls-row {
    gap: 8px !important;
  }
  #bgp-live-coverflow .bgp-cover .bgp-cover-title {
    padding-right: 86px !important;
  }
  .bgp-cover-country-switcher {
    top: 16px !important;
    right: 16px !important;
    gap: 6px !important;
  }
  .bgp-cover-country-switch {
    width: 32px !important;
    height: 32px !important;
  }
}

/* ── Country Profile Button – white text on Patreon orange ── */
.bgp-lane-btn--profile,
#bgp-live-profile-btn {
  background: var(--color-btn-bg-patreon) !important;
  color: #ffffff !important;                    /* Pure white text */
  border: 1px solid var(--color-btn-bg-patreon) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  transition: all 0.18s ease !important;
}

/* Hover / Focus – subtle lightening */
.bgp-lane-btn--profile:hover,
.bgp-lane-btn--profile:focus,
#bgp-live-profile-btn:hover,
#bgp-live-profile-btn:focus {
  background: color-mix(in srgb, var(--color-btn-bg-patreon) 85%, white) !important;
  border-color: color-mix(in srgb, var(--color-btn-bg-patreon) 85%, white) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}


/* =========================================================
   CARD-HEADER COUNTRY SWITCHER
   Up/down solid triangles in outlined circles
   ========================================================= */

#bgp-live-coverflow .bgp-cover-head,
#bgp-panels .bgp-cover-head {
  position: relative !important;
  padding-right: 16px !important;
}

#bgp-live-coverflow .bgp-cover-country-switcher,
#bgp-panels .bgp-cover-country-switcher {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 6 !important;
}

#bgp-live-coverflow .bgp-cover-country-switch,
#bgp-panels .bgp-cover-country-switch {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(214, 229, 243, 0.52) !important;
  background: rgba(9, 18, 25, 0.46) !important;
  color: rgba(235, 244, 252, 0.94) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 2px 8px rgba(0,0,0,0.24) !important;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#bgp-live-coverflow .bgp-cover-country-switch:hover,
#bgp-panels .bgp-cover-country-switch:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(235, 244, 252, 0.82) !important;
  background: rgba(14, 28, 38, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 4px 12px rgba(0,0,0,0.32) !important;
}

#bgp-live-coverflow .bgp-cover-country-switch:active,
#bgp-panels .bgp-cover-country-switch:active {
  transform: translateY(0) scale(0.96) !important;
}

#bgp-live-coverflow .bgp-cover-country-switch:focus-visible,
#bgp-panels .bgp-cover-country-switch:focus-visible {
  outline: 2px solid rgba(196, 60, 46, 0.92) !important;
  outline-offset: 2px !important;
}

#bgp-live-coverflow .bgp-cover-country-switch svg,
#bgp-panels .bgp-cover-country-switch svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
  fill: currentColor !important;
}

@media (max-width: 1023px) {
  #bgp-live-coverflow .bgp-cover-head,
  #bgp-panels .bgp-cover-head {
    padding-right: 52px !important;
  }

  #bgp-live-coverflow .bgp-cover-country-switcher,
  #bgp-panels .bgp-cover-country-switcher {
    top: 8px !important;
    right: 8px !important;
    gap: 6px !important;
  }

  #bgp-live-coverflow .bgp-cover-country-switch,
  #bgp-panels .bgp-cover-country-switch {
    width: 26px !important;
    height: 26px !important;
  }

  #bgp-live-coverflow .bgp-cover-country-switch svg,
  #bgp-panels .bgp-cover-country-switch svg {
    width: 11px !important;
    height: 11px !important;
  }
}

/* =========================================================
   CARD-HEADER COUNTRY SWITCHER (HORIZONTAL)
   ========================================================= */

#bgp-live-coverflow .bgp-cover-country-switcher,
#bgp-panels .bgp-cover-country-switcher {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;

  display: flex !important;
  flex-direction: row !important;   /* ← KEY CHANGE */
  gap: 8px !important;

  align-items: center !important;
  justify-content: center !important;
  z-index: 6 !important;
}

/* Optional: slightly smaller + tighter look */
#bgp-live-coverflow .bgp-cover-country-switch,
#bgp-panels .bgp-cover-country-switch {
  width: 26px !important;
  height: 26px !important;
}

/* Mobile tweak */
@media (max-width: 1023px) {
  #bgp-live-coverflow .bgp-cover-country-switcher,
  #bgp-panels .bgp-cover-country-switcher {
    top: 8px !important;
    right: 10px !important;
    gap: 6px !important;
  }

  #bgp-live-coverflow .bgp-cover-country-switch,
  #bgp-panels .bgp-cover-country-switch {
    width: 24px !important;
    height: 24px !important;
  }
}

.bgp-cover-country-switch {
  opacity: 0.7;
}

.bgp-cover-country-switch:hover {
  opacity: 1;
}

.bgp-cover-country-switch {
  border-width: 1.8px !important;
}

.bgp-cover-country-switch svg {
  width: 17px !important;
  height: 17px !important;
}

#bgp-live-coverflow .bgp-cover-country-switch svg,
#bgp-panels .bgp-cover-country-switch svg {
  width: 18px !important;
  height: 18px !important;
}

.bgp-cover-country-switch svg {
  transform: translateY(0.5px); /* optical centering */
}
.bgp-cover-country-switch {
  width: 30px !important;
  height: 30px !important;
} 

/* =========================================================
   JS TOOLTIPS — richer popup style with fine border
   ========================================================= */

.bgp-tooltip {
  position: fixed;
  z-index: 2147483647;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 21, 30, 0.97);
  color: #eef5ff;
  border: 1px solid rgba(185, 205, 230, 0.32);   /* fine delineating border */
  box-shadow:
    0 10px 28px rgba(0,0,0,0.42),
    0 0 0 1px rgba(255,255,255,0.03) inset;
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bgp-tooltip[hidden] {
  display: none !important;
}

.bgp-tooltip:not(.bgp-tooltip--rich) {
  white-space: nowrap;
  max-width: 260px;
}


.bgp-tooltip-title {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: 0.01em;
}

.bgp-tooltip-body {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(231, 240, 250, 0.92);
}

.bgp-tooltip-list {
  margin: 7px 0 0 18px;
  padding: 0;
  color: rgba(220, 232, 246, 0.9);
}

.bgp-tooltip-list li {
  margin: 1px 0;
}


/* =========================================================
   COMPACT SIMPLE TOOLTIPS
   ========================================================= */

.bgp-tooltip:not(.bgp-tooltip--rich) {
  max-width: none !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 5px 9px !important;
  font-size: 11.5px !important;
  line-height: 1.15 !important;
  border-radius: 9px !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.bgp-tooltip:not(.bgp-tooltip--rich) .bgp-tooltip-body,
.bgp-tooltip:not(.bgp-tooltip--rich) .bgp-tooltip-title,
.bgp-tooltip:not(.bgp-tooltip--rich) .bgp-tooltip-list {
  margin: 0 !important;
  padding: 0 !important;
}

#bgp-tooltip[hidden] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#bgp-tooltip:empty {
  display: none !important;
  opacity: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}



/* =========================================================
   TOP LANE BUTTONS — COMPACT WIDTH TUNING
   ========================================================= */

.bgp-lane-controls {
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
}

.bgp-lane-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  padding: 6px 12px !important;
  font-size: 0.88rem !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}

/* First 3 nav buttons specifically */
#bgp-live-nav-snapshot,
#bgp-live-nav-motherhood,
#bgp-live-nav-impact {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: fit-content !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Country profile can stay a touch wider */
.bgp-lane-btn--profile {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.bgp-top-controls-row a.bgp-lane-btn--profile {
  text-decoration: none !important;
}


/* =========================================================
   TOP CONTROLS — CENTERED NAV + CARD-ALIGNED CTA
   ========================================================= */

.bgp-top-controls-row {
  position: relative !important;
}

.bgp-lane-controls {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* CTA aligned independently to the right edge */
.bgp-lane-btn--profile,
#bgp-live-profile-btn {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
}

/* =========================================================
   INSIGHTS REPORT CTA — TONED DOWN
   ========================================================= */

.bgp-lane-btn--profile,
#bgp-live-profile-btn {
  background: rgba(196, 60, 46, 0.82) !important;
  border: 1px solid rgba(196, 60, 46, 0.88) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
  text-decoration: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

.bgp-lane-btn--profile:hover,
#bgp-live-profile-btn:hover {
  background: rgba(196, 60, 46, 0.92) !important;
  border-color: rgba(196, 60, 46, 0.96) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.26) !important;
  text-decoration: none !important;
}

/* =========================================================
   TOP CONTROLS — CENTERED NAV + CARD-ALIGNED CTA
   ========================================================= */

.bgp-top-controls-row {
  position: relative !important;
}

.bgp-lane-controls {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* CTA aligned independently to the right edge */
.bgp-lane-btn--profile,
#bgp-live-profile-btn {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
}

/* =========================================================
   INSIGHTS REPORT CTA — BALANCED, SUBORDINATE BUTTON
   ========================================================= */

.bgp-lane-btn--profile,
#bgp-live-profile-btn {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.1 !important;
  margin-right: 16px !important;

  padding: 5px 14px !important;

  font-size: 0.82rem !important;
  font-weight: 550 !important;

  border-radius: 999px !important;

  background: linear-gradient(
    180deg,
    rgba(196, 60, 46, 0.9),
    rgba(196, 60, 46, 0.75)
  ) !important;

  border: 1px solid rgba(196, 60, 46, 0.85) !important;
  color: #ffffff !important;
  text-decoration: none !important;

  opacity: 0.92 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;

  display: inline-flex !important;
  align-items: center !important;

  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease !important;
}

.bgp-lane-btn--profile:hover,
#bgp-live-profile-btn:hover {
  background: linear-gradient(
    180deg,
    rgba(196, 60, 46, 1),
    rgba(196, 60, 46, 0.85)
  ) !important;

  border-color: rgba(196, 60, 46, 1) !important;
  opacity: 1 !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.28) !important;
  transform: translateY(-50%) translateY(-1px) !important;
  text-decoration: none !important;
}

.bgp-tooltip-note {
  margin-top: 6px;

  font-size: 0.75rem;      /* smaller than body */
  line-height: 1.3;

  font-weight: 400;        /* ensure not bold */
  letter-spacing: 0.01em;


  color: rgba(255,255,255,0.55);  /* softer than body text */
}




.bgp-tooltip-cta {
  margin-top: 8px;
}


.bgp-tooltip-key {
  margin: 6px 0 8px;

  font-size: 0.72rem;
  font-weight: 500;

  color: #f5f5f5;

  /* subtle emphasis */
  background: rgba(255,255,255,0.06);
  padding: 4px 8px;
  border-radius: 6px;

  letter-spacing: 0.01em;
}


.bgp-tooltip-key {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 6px;
}


/* =========================================================
   TOOLTIP HIERARCHY — RANKING TOOLTIPS
   ========================================================= */

.bgp-tooltip-key {
  display: block !important;
  max-width: 100% !important;

  text-align: center !important;
  margin: 0 0 8px 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;

  padding: 4px 10px !important;

  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;

  color: rgba(255,255,255,0.96) !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
}

.bgp-tooltip-title {
  margin: 0 0 4px 0 !important;

  font-size: 0.68rem !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;

  color: rgba(255,255,255,0.78) !important;
  opacity: 0.58 !important;
}

.bgp-tooltip-body {
  font-size: 0.66rem !important;
  line-height: 1.28 !important;
  font-weight: 400 !important;

  color: rgba(255,255,255,0.76) !important;
  opacity: 0.5 !important;
}

.bgp-tooltip-note {
  margin-top: 6px !important;
  padding-top: 6px !important;

  font-size: 0.62rem !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;

  color: rgba(255,255,255,0.78) !important;
  opacity: 0.72 !important;

  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* =========================================================
   TOOLTIP BODY — READABLE BUT SECONDARY
   ========================================================= */

.bgp-tooltip-body{
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,0.78) !important;
  opacity: 0.78 !important;
}

/* Slight lift for title so hierarchy stays clear */
.bgp-tooltip-title{
  opacity: 0.9 !important;
}

/* =========================================================
   CENTER DOT ON SNAPSHOT BENCHMARK STRIP
   ========================================================= */


.bgp-benchmark-sep{
  display: inline-flex;              /* key change */
  align-items: center;               /* vertical centering */
  justify-content: center;

  font-size: 0.9em;
  line-height: 1;                    /* removes font baseline drift */

  opacity: 0.6;
  margin: 0 8px;

}

.arrow {
  /* Prevent underline or dotted border from applying */
  border-bottom: none !important;
  text-decoration: none !important;
  
  /* Optional: fine-tune appearance */
  color: inherit;                /* same color as text */
  vertical-align: text-bottom;        
  font-size: 1.4em;              /* slight size bump if desired */
  margin-left: 0.15em;           /* tiny breathing room */
  pointer-events: none;          /* clicks pass through → no tooltip trigger */
}




#bgp-live-coverflow .bgp-cover.is-active:not(.bgp-cover--gapometer) .bgp-cover-split{
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.5fr) !important;
}



/* Secondary “View Rankings” button — compact + toned down */
#bgp-live-coverflow .bgp-cover .bgp-benchmark-openrank{
  margin-left: 14px;

  padding: 3px 9px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;

  border-radius: 999px;
  border: 1px solid rgba(0, 179, 230, 0.20);
  background: rgba(0, 114, 153, 0.08);
  color: rgba(210, 235, 245, 0.85);

  box-shadow: none;
  cursor: pointer;
}

/* Subtle hover — still secondary */
#bgp-live-coverflow .bgp-cover .bgp-benchmark-openrank:hover{
  color: #ffffff;
  border-color: rgba(0, 179, 230, 0.35);
  background: rgba(0, 114, 153, 0.14);
}

/* Metric label — brighter anchor */
#bgp-live-coverflow .bgp-cover .bgp-benchmark-title{
  color: #d9f3ff !important;
  font-weight: 650 !important;
}

#bgp-live-coverflow 
.bgp-cover.is-active 
.bgp-benchmark-strip 
.bgp-has-tooltip{
  color: rgba(217, 243, 255, 0.92) !important;
  font-weight: 650 !important;
}

#bgp-live-coverflow .bgp-cover .bgp-benchmark-sep{
  opacity: 0.5 !important;
  margin: 0 18px !important;
}

#bgp-live-coverflow .bgp-cover .arrow{
  opacity: 0.7 !important;
}

#bgp-live-coverflow .bgp-cover .bgp-benchmark-title{
  margin-right: 6px !important;
}


/* =========================================================
   BG15 BENCHMARK LOGO SYSTEM
   ---------------------------------------------------------
   Special styling for the Birthgap 15™ benchmark logo.

   This is intentionally styled as a branded benchmark badge,
   not as a country flag. Three size tiers are used:

   1) Nav menu
      - .bgp-flag--bg15

   2) Card / cover title header
      - .bgp-inline-flag--bg15

   3) Report card / report cover usage
      - .bgp-inline-flag--report

   Notes:
   - Designed for the updated brighter BG15 SVG icon
   - Keeps BG15 visually distinct from country / bloc flags
   - Uses subtle teal badge treatment for contrast on dark UI
   ========================================================= */


/* -----------------------------------------
   NAV MENU BG15 BADGE
   ----------------------------------------- */

.bgp-flag--bg15 {
  width: 18px;
  height: 13.5px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;

  border-radius: 3px;
  background: rgba(0, 114, 153, 0.18);
  box-shadow: 0 0 0 1px rgba(0, 114, 153, 0.22);

  transform-origin: center;
  transform: scale(0.88) translateY(-0.3px);
  margin-right: 4px;
}


/* -----------------------------------------
   COVER / CARD TITLE BG15 BADGE
   ----------------------------------------- */
.bgp-inline-flag--bg15 {
  width: 30px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;

  padding: 1px;
  border-radius: 3px;
  background: rgba(0, 114, 153, 0.10);
  box-shadow: 0 0 0 1px rgba(0, 114, 153, 0.16);

  transform-origin: center;
  transform: translateY(-0.2px);
  margin-right: 9px;
}


/* -----------------------------------------
   REPORT CARD / REPORT COVER BG15 BADGE
   ----------------------------------------- */
.bgp-inline-flag--report {
  width: 34px;
  height: 26px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;

  padding: 2px 3px;
  border-radius: 4px;
  background: rgba(0, 114, 153, 0.12);
  box-shadow: 0 0 0 1px rgba(0, 114, 153, 0.18);

  transform-origin: center;
  transform: translateY(-0.25px);
  margin-right: 10px;
}


/* -----------------------------------------
   OPTIONAL: SUBTLE NAV HOVER POLISH
   ----------------------------------------- */
.bgp-countrybtn:hover .bgp-flag--bg15 {
  background: rgba(0, 114, 153, 0.24);
}


/* =========================================================
   SPECIAL GROUPINGS TAB + DIVIDER
   ---------------------------------------------------------
   Purpose:
   - Visually distinguish the "Special Groupings" tab
     (Birthgap 15, EU, NATO, G7) from regional tabs
   - Keep within the Birthgap teal palette (not disruptive)
   - Provide subtle separation between:
       • aggregate summaries (e.g. EU, G7)
       • country list below
   ========================================================= */

.bgp-tab--special {
  background: rgba(0,114,153,0.10);
  border: 1px solid rgba(0,114,153,0.45);
  color: rgba(220,240,255,0.95);
}

.bgp-tab--special:hover {
  background: rgba(0,114,153,0.16);
  border-color: rgba(0,114,153,0.65);
}

.bgp-tab--special.is-active,
.bgp-tab--special[aria-selected="true"] {
  background: rgba(0,114,153,0.22);
  border-color: rgba(0,114,153,0.90);
  box-shadow: 0 0 0 1px rgba(0,114,153,0.25) inset;
}

/* Divider between summary rows (EU/G7) and country list */
.bgp-countrylist-divider {
  height: 1px;
  margin: 10px 0 8px;
  background: rgba(255,255,255,0.08);
}





/* =========================================================
   G7 GROUPING BADGE
   ---------------------------------------------------------
   Neutral institutional treatment for the G7 grouping.
   ========================================================= */

.bgp-flag--g7 {
  width: 18px;
  height: 13.5px;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
}

.bgp-inline-flag--g7 {
  width: 30px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10);
  margin-right: 9px;
  transform: translateY(-0.15px);
}



/* =========================================================
   RANKING LIGHTBOX — SINGLE SOURCE OF TRUTH
   ========================================================= */

/* Hide source popup markup inside cards */
.bgp-cover-body > .bgp-ranking-popup,
#bgp-live-coverflow .bgp-cover.is-active .bgp-ranking-popup {
  display: none !important;
}

/* Overlay */
#bgp-ranking-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(1, 8, 14, 0.58);
  backdrop-filter: blur(8px);
}

#bgp-ranking-lightbox.is-open {
  display: flex;
}

#bgp-ranking-lightbox-slot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cloned wrapper only */
#bgp-ranking-lightbox-slot .bgp-ranking-popup {
  display: block !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Main panel — narrower */
#bgp-ranking-lightbox-slot .bgp-ranking-popup-inner {
  position: relative;
  width: min(980px, 92vw);
  max-width: 980px;
  max-height: min(92vh, 1100px);
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(0, 114, 153, 0.18);
  background: linear-gradient(
    180deg,
    rgba(8,16,22,0.97) 0%,
    rgba(6,13,18,0.985) 100%
  );
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color: #e8f3f8;
}

/* Header */
#bgp-ranking-lightbox-slot .bgp-ranking-popup-head {
  position: relative;
  padding: 26px 30px 16px 30px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: transparent;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-title {
  display: inline-flex;
  align-items: center;
  font-size: 0.86rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffe0d0;
  background: rgba(255, 106, 61, 0.16);
  border: 1px solid rgba(255, 106, 61, 0.42);
  border-radius: 999px;
  padding: 6px 11px;
  margin: 0 0 14px 0;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-subtitle {
  margin: 0;
  font-size: 1.95rem;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(247,250,252,0.96);
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-subtitle-range {
  font-size: 0.96rem;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(191,206,216,0.70);
  margin-top: 6px;
}

#bgp-ranking-lightbox-slot .bgp-ranking-hint {
  opacity: 0.68;
  font-weight: 500;
  margin-left: 6px;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(235,243,247,0.82);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-close:hover {
  background: rgba(255,255,255,0.05);
  color: #ffffff;
}

/* Scroll area */
#bgp-ranking-lightbox-slot .bgp-ranking-popup-tablewrap {
  position: relative;
  padding: 0 18px;
  max-height: calc(92vh - 160px);
  overflow: auto;
}

/* Two-column layout */
#bgp-ranking-lightbox-slot .bgp-ranking-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 0;
}

#bgp-ranking-lightbox-slot .bgp-ranking-col {
  min-width: 0;
  background: transparent;
}

#bgp-ranking-lightbox-slot .bgp-ranking-divider {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 1px;
  transform: translateX(-0.5px);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.00),
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.00)
  );
  pointer-events: none;
}

/* Table */
#bgp-ranking-lightbox-slot .bgp-ranking-mini-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table thead tr {
  background: rgba(255,255,255,0.03);
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table thead th {
  padding: 8px 8px 9px;
  background: transparent;
  color: rgba(216,226,233,0.90);
  font-size: 0.78rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  user-select: none;
  cursor: pointer;
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table tbody tr {
  height: 34px;
  background: rgba(255,255,255,0.008);
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.022);
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table tbody tr.is-focus-country {
  background: rgba(255, 106, 61, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 106, 61, 0.22);
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  font-size: 0.88rem;
  line-height: 1.2;
  color: rgba(218,230,236,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
}

/* Column widths — THIS is the key fix */
#bgp-ranking-lightbox-slot .bgp-ranking-mini-table .rank-col,
#bgp-ranking-lightbox-slot .bgp-ranking-mini-table .rank-cell {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table .value-col,
#bgp-ranking-lightbox-slot .bgp-ranking-mini-table .value-cell {
  width: 82px;
  min-width: 82px;
  max-width: 82px;
  text-align: right;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#bgp-ranking-lightbox-slot .rank-cell {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(210,221,228,0.88);
}

#bgp-ranking-lightbox-slot .country-cell {
  color: rgba(238,244,247,0.92);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bgp-ranking-lightbox-slot .value-cell {
  font-size: 0.89rem;
  font-weight: 650;
  color: rgba(238,244,247,0.96);
}

/* Country + flag */
#bgp-ranking-lightbox-slot .bgp-ranking-country-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#bgp-ranking-lightbox-slot .bgp-ranking-country-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bgp-ranking-lightbox-slot .bgp-ranking-flag {
  width: 18px;
  height: 13px;
  border-radius: 3px;
  flex: 0 0 auto;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}

#bgp-ranking-lightbox-slot .bgp-ranking-flag--bg15 {
  width: 16px;
  height: 16px;
  border-radius: 0;
  box-shadow: none;
}

#bgp-ranking-lightbox-slot .bgp-ranking-flag--g7,
#bgp-ranking-lightbox-slot .bgp-ranking-flag--nato {
  width: 18px;
  height: 13px;
  border-radius: 3px;
}

/* Footnote */
#bgp-ranking-lightbox-slot .bgp-ranking-footnote {
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: rgba(191,206,216,0.68);
  font-size: 0.82rem;
  line-height: 1.45;
}

#bgp-ranking-lightbox-slot .bgp-ranking-footnote p {
  margin: 0;
}

#bgp-ranking-lightbox-slot .bgp-ranking-footnote strong {
  color: rgba(226,234,239,0.82);
  font-weight: 650;
}

/* Scrollbar */
#bgp-ranking-lightbox-slot .bgp-ranking-popup-tablewrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-tablewrap::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-tablewrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 980px) {
  #bgp-ranking-lightbox-slot .bgp-ranking-popup-inner {
    width: min(760px, 95vw);
    max-height: 92vh;
  }

  #bgp-ranking-lightbox-slot .bgp-ranking-popup-head {
    padding: 20px 18px 14px 18px;
  }

  #bgp-ranking-lightbox-slot .bgp-ranking-popup-tablewrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  #bgp-ranking-lightbox-slot .bgp-ranking-two-col {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #bgp-ranking-lightbox-slot .bgp-ranking-divider {
    display: none;
  }

  #bgp-ranking-lightbox-slot .bgp-ranking-popup-subtitle {
    font-size: 1.45rem;
  }
}

/* FORCE tighter table layout */
.bgp-ranking-mini-table {
  table-layout: fixed;
  width: 100%;
}

/* COLUMN WIDTHS — aggressive tightening */
.bgp-ranking-mini-table .rank-col {
  width: 48px;
}

.bgp-ranking-mini-table .country-col {
  width: 52%;   /* ↓ from ~70–75% → this is the big win */
}

.bgp-ranking-mini-table .value-col {
  width: 80px;
  text-align: right;
}

/* COUNTRY CELL — remove wasted space */
.bgp-ranking-mini-table .country-cell {
  padding-right: 6px;   /* was too big */
}

/* FLAG + TEXT WRAP */
.bgp-ranking-country-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;   /* tighten */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* TEXT truncation (important) */
.bgp-ranking-country-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* VALUE closer to country */
.bgp-ranking-mini-table .value-cell {
  padding-left: 6px;
}

.bgp-ranking-mini-table td {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* tighten row density slightly */
.bgp-ranking-mini-table tr {
  line-height: 1.2;
}

.bgp-ranking-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;   /* ← increase this (was ~16–20px) */
  padding: 0 8px;
}

#bgp-ranking-lightbox .bgp-ranking-popup-inner {
  max-width: 880px;   /* ↓ tighten overall width */
  margin: 0 auto;
}

.rank-cell {
  text-align: right;
  padding-right: 8px;
}

.value-cell {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.bgp-ranking-mini-table .value-col {
  text-align: center !important;
}

.bgp-ranking-mini-table th.value-col,
.bgp-ranking-mini-table thead th:last-child {
  text-align: center !important;
}

.bgp-ranking-mini-table .value-cell {
  text-align: right;
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table thead th:last-child {
  text-align: right;
  padding-right: 18px;
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table tbody td:last-child {
  text-align: right;
  padding-right: 14px;
}


#bgp-ranking-lightbox-slot .bgp-ranking-mini-table .value-col,
#bgp-ranking-lightbox-slot .bgp-ranking-mini-table .value-cell{
  width: 88px;
  min-width: 88px;
  max-width: 88px;
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table thead th.value-col{
  text-align: right !important;
  padding-right: 28px !important;
}

#bgp-ranking-lightbox-slot .bgp-ranking-mini-table tbody td.value-cell{
  text-align: right !important;
  padding-right: 14px !important;
}


/* Ranking Filter */
.bgp-ranking-filter {
  padding: 12px 16px 8px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  gap: 8px;
  align-items: center;
}

.bgp-ranking-filter-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 9px 12px;
  color: #e6f0ff;
  font-size: 14px;
}

.bgp-ranking-filter-input:focus {
  outline: none;
  border-color: #5fd1ff;
  box-shadow: 0 0 0 2px rgba(95,209,255,0.2);
}

.bgp-ranking-filter-clear {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: none;
}

.bgp-ranking-filter-input:not(:placeholder-shown) + .bgp-ranking-filter-clear {
  display: block;
}

/* Highlighted row (stronger than is-current) */
.bgp-ranking-popup-table tr.is-highlight {
  background: rgba(95, 209, 255, 0.18) !important;
  box-shadow: inset 0 0 0 1.5px rgba(95, 209, 255, 0.45) !important;
  font-weight: 500;
}

/* Ranking Lightbox Filter */
.bgp-ranking-filter {
  padding: 12px 16px 8px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  gap: 8px;
  align-items: center;
}

.bgp-ranking-filter-input {
  flex: 1;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 9px 12px;
  color: #e6f0ff;
  font-size: 14px;
}

.bgp-ranking-filter-input:focus {
  outline: none;
  border-color: #5fd1ff;
  box-shadow: 0 0 0 2px rgba(95,209,255,0.25);
}

.bgp-ranking-filter-clear {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: none;
}

.bgp-ranking-filter-input:not(:placeholder-shown) + .bgp-ranking-filter-clear {
  display: block;
}
/* ==============================================
   RANKING LIGHTBOX — FILTER + HIGHLIGHTS
   ============================================== */

/* Filter container - hidden by default */
.bgp-ranking-filter-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
  opacity: 0;
  pointer-events: none;
}

/* Show filter when hovering header or popup */
.bgp-ranking-popup-head:hover + .bgp-ranking-filter-wrapper,
.bgp-ranking-popup:hover .bgp-ranking-filter-wrapper {
  max-height: 52px;
  opacity: 1;
  pointer-events: auto;
}

/* Subtle header hover feedback */
.bgp-ranking-popup-head {
  transition: background-color 0.2s ease;
}

.bgp-ranking-popup-head:hover {
  background-color: rgba(255,255,255,0.035);
}

/* Compact filter row with label */
.bgp-ranking-filter {
  padding: 10px 16px 8px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.bgp-ranking-filter-label {
  color: #aaa;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bgp-ranking-filter-input {
  flex: 0 1 280px;           /* half-width, max 280px */
  min-width: 180px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 8px 12px;
  color: #e6f0ff;
  font-size: 14px;
}

.bgp-ranking-filter-input:focus {
  outline: none;
  border-color: #5fd1ff;
  box-shadow: 0 0 0 2px rgba(95,209,255,0.25);
}

.bgp-ranking-filter-clear {
  background: none;
  border: none;
  color: #aaa;
  font-size: 18px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: none;
  flex-shrink: 0;
}

.bgp-ranking-filter-input:not(:placeholder-shown) + .bgp-ranking-filter-clear {
  display: block;
}

/* Highlight styles */
.bgp-ranking-mini-table tr,
.bgp-ranking-popup-table tr {
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

/* Light highlight for typed matches */
.bgp-ranking-mini-table tr.is-highlight,
.bgp-ranking-popup-table tr.is-highlight {
  background: rgba(95, 209, 255, 0.25) !important;
  box-shadow: inset 0 0 0 1.5px rgba(95, 209, 255, 0.7) !important;
}

/* Alternating rows (only when no highlight) */
.bgp-ranking-mini-table tbody tr:not(.is-highlight):nth-child(even),
.bgp-ranking-popup-table tbody tr:not(.is-highlight):nth-child(even) {
  background: rgba(255,255,255,0.008) !important;
}

.bgp-ranking-mini-table tr.is-highlight,
.bgp-ranking-popup-table tr.is-highlight {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
/* =========================================================
   RANKING POPUP — HEADER ACTIONS
========================================================= */

#bgp-ranking-lightbox-slot .bgp-ranking-popup-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-heading{
  flex:1 1 auto;
  min-width:0;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-actions{
  display:flex;
  align-items:center;
  gap:0 !important;
  flex:0 0 auto;
  position:static;
  margin-left:12px;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-close{
  position:static !important;
  top:auto !important;
  right:auto !important;
  width:42px;
  height:42px;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* =========================================================
   RANKING POPUP — COPY BUTTON
========================================================= */

#bgp-ranking-lightbox-slot .bgp-ranking-popup-copy{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(235,243,247,0.82);
  cursor:pointer;
  position:relative;

  width:42px;
  height:42px;
  border-radius:999px;

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

  padding:0;
  line-height:0;
  margin-right:-16px !important;

  transition:
    background-color 0.06s linear,
    color 0.06s linear,
    transform 0.05s linear,
    box-shadow 0.06s linear;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-copy svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:
    transform 0.05s linear,
    opacity 0.06s linear;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-copy:hover{
  background:rgba(255,255,255,0.11);
  color:rgba(255,255,255,0.98);
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-copy:active{
  transform:scale(0.90);
  background:rgba(255,255,255,0.16);
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-copy:focus-visible{
  outline:2px solid rgba(255,255,255,0.34);
  outline-offset:2px;
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-copy.is-copied{
  background:rgba(80,200,120,0.22);
  color:rgb(120,255,180);
}

#bgp-ranking-lightbox-slot .bgp-ranking-popup-copy.is-copy-failed{
  background:rgba(255,90,90,0.18);
  color:rgb(255,150,150);
}

/* =========================================================
   RANKING POPUP — FLOATING COPY FEEDBACK
========================================================= */

#bgp-ranking-lightbox-slot .bgp-copy-feedback{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translate(-50%, 6px);

  font-size:11px;
  font-weight:600;
  letter-spacing:0.02em;
  white-space:nowrap;

  padding:4px 8px;
  border-radius:6px;

  background:rgba(0,0,0,0.85);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.35);

  opacity:0;
  pointer-events:none;

  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

#bgp-ranking-lightbox-slot .bgp-copy-feedback.is-visible{
  opacity:1;
  transform:translate(-50%, -6px);
}



.bgp-ranking-popup-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.88);
  padding: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.bgp-ranking-popup-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Year Badge - small pill with near-square corners */
.bgp-year-badge {
    background-color: #e6f0fa;
    color: #1a3c5e;
    font-size: 0.79rem;           /* slightly smaller */
    font-weight: 600;
    padding: 2px 9px;             /* very tight vertical padding */
    border-radius: 3px;           /* near-square corners */
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid rgba(26, 60, 94, 0.15);
    line-height: 1.1;             /* tight line height */
    display: inline-flex;
    align-items: center;
    height: 16px;                 /* force consistent height */
    margin-top: 4px;
    margin-right: 24px;

}

/* Snapshot "2025 Pending" badge — final muted style with stronger border */
#bgp-live-coverflow .bgp-insights-year-badge,
.bgp-insights-year-badge {
  display: inline-block !important;
  background: rgba(160, 185, 225, 0.03) !important;
  color: #9ca8c8 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  padding: 2px 9px 3px !important;
  border-radius: 999px !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(160, 190, 230, 0.25) !important;
  text-align: center !important;
} 
/* =========================================================
   CHILDLESSNESS BY AGE — FINAL PRODUCTION
   ========================================================= */

.bgp-cover-charts--childlessness {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 20px 50px !important;
  gap: 7px !important;
}

/* =========================================================
   HCM STRIP
   ========================================================= */

.bgp-childlessness-hcm-row {
  display: flex;
  justify-content: center;
  margin: 0 0 6px 0;
}

.bgp-childlessness-hcm-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 480px;
  padding: 8px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 114, 153, 0.75);
  background: rgba(0, 20, 26, 0.88);
  box-shadow: none;
}

.bgp-childlessness-hcm-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.15;
  font-weight: 600;
  color: rgba(214, 238, 245, 0.84);
  text-align: center;
  gap: 2px;
}

.bgp-hcm-line1 {
  display: block;
}

.bgp-hcm-age {
  display: block;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* =========================================================
   ISLAND
   ========================================================= */

.bgp-childlessness-island {
  width: 100%;
  max-width: 586px;
  margin: 0 auto;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.025);
  border-radius: 24px;
  padding: 18px 22px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    inset 0 -6px 18px rgba(0,0,0,0.18);
}

.bgp-childlessness-section-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(230,235,255,0.82);
  letter-spacing: 0.01em;
  margin-bottom: 18px;
  text-align: center;
}

/* =========================================================
   ROWS
   ========================================================= */

.bgp-childlessness-row {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  gap: 4px !important;
}

.top-row {
  max-width: 620px !important;
  max-height: 120px !important;

}

.bottom-row {
  max-width: 420px !important;
    max-height: 120px !important;
}

/* =========================================================
   BOXES
   ========================================================= */

.bgp-childlessness-box {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 138px !important;
  flex: 0 0 138px !important;
  padding: 10px 14px 16px !important;
  background: rgba(20, 18, 28, 0.96) !important;
  border: 2px solid rgba(120, 100, 170, 0.35) !important;
  border-radius: 14px !important;
  text-align: left !important;
}

.bgp-childlessness-box:hover {
  border-color: rgba(155, 132, 214, 0.58) !important;
  transform: translateY(-4px) !important;
}

.bgp-childlessness-box-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: center !important;
}

/* =========================================================
   AGE LABEL HIERARCHY
   ========================================================= */

.bgp-childlessness-age {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  line-height: 1.05 !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

.bgp-age-prefix {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: rgba(208, 216, 255, 0.55) !important;
  opacity: 0.6 !important;
}

.bgp-age-value {
  display: block !important;
  margin-top: 10px !important;
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  color: rgba(235, 240, 255, 0.95) !important;
  letter-spacing: 0.01em !important;
}

/* =========================================================
   PERCENTAGE — SUPPORTING ONLY
   ========================================================= */

.bgp-childlessness-value {
  margin-top: 2px !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.15px !important;
  color: #c8c6dc !important;
  opacity: 0.6 !important;
}

/* =========================================================
   MINI VERTICAL GAUGE
   ========================================================= */

.bgp-childlessness-gauge {
  position: relative !important;
  width: 18px !important;
  height: 70px !important;
  flex: 0 0 18px !important;
  margin-left: 14px !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  border: 1px solid rgba(185, 205, 230, 0.28) !important;
  background: linear-gradient(
    to top,
    rgba(5, 8, 16, 0.98),
    rgba(10, 14, 26, 1)
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 10px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(80, 110, 150, 0.10) !important;
}

.bgp-childlessness-gauge-fill {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 2px !important;
  border-radius: 0 !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  background: linear-gradient(
    to top,
    rgba(120, 210, 230, 0.88),
    rgba(200, 245, 255, 0.97)
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 14px rgba(120, 210, 230, 0.42) !important;
}

/* =========================================================
   ARROWS
   ========================================================= */

.bgp-childlessness-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 10px;
  color: #8a8fa8;
  user-select: none;
}

.bgp-childlessness-arrow svg {
  width: 28px;
  height: 20px;
}

.bgp-childlessness-arrow.rotated {
  transform: rotate(-210deg);
  margin-top: 8px;
  margin-left: 16px;
}

.bgp-childlessness-arrow.rotated svg {
  width: 26px;
  height: 28px;
}

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

@media (max-width: 640px) {
  .bgp-childlessness-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .bgp-childlessness-box {
    min-width: 190px !important;
    flex: 0 0 auto !important;
  }

  .bgp-childlessness-arrow {
    padding: 0 6px;
  }

  .bgp-childlessness-arrow svg {
    width: 24px;
    height: 18px;
  }
}


/* =========================================================
   HCM — EMPHASIS UPGRADE
   ========================================================= */

.bgp-childlessness-hcm-text {
  font-size: 0.95rem;
  line-height: 1.15;
  font-weight: 600;
  color: rgba(214, 238, 245, 0.8);
}

.bgp-hcm-age {
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.bgp-hcm-age {
  text-shadow: 0 0 10px rgba(120,210,230,0.25);
}

.bgp-childlessness-hcm-text {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
}

.bgp-hcm-line1 {
  display: inline !important;
  white-space: nowrap !important;
}

.bgp-hcm-age {
  display: inline !important;
  font-weight: 700 !important;
  font-size: 1.4em !important;
  line-height: 1 !important;
}

.bgp-childlessness-hcm-text {
  flex-wrap: nowrap !important;
}

/* =========================================================
   HCM (50% Motherhood Age) — SINGLE LINE + CONTROLLED WIDTH
   ========================================================= */

.bgp-childlessness-hcm-text {
  display: flex !important;
  flex-direction: row !important;     /* override inherited column */
  align-items: baseline !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.bgp-hcm-line1,
.bgp-hcm-age {
  display: inline !important;
  white-space: nowrap !important;
}

.bgp-hcm-age {
  font-weight: 700 !important;
  font-size: 1.4em !important;
  line-height: 1 !important;
}

/* container width control */
.bgp-childlessness-hcm-box {
  width: 100% !important;
  max-width: 560px !important;
}

/* =========================================================
   HCM PILL — EMPHASIS REFINEMENTS
   (1) Larger number
   (2) Increased padding
   (3) Subtle glow enhancement
   ========================================================= */

/* Container (pill) */
.bgp-childlessness-hcm-box {
  padding: 10px 18px !important;  /* increased padding */
  box-shadow: 
    0 0 0 1px rgba(0,180,220,0.6),
    0 0 12px rgba(0,180,220,0.25) !important; /* subtle glow */
}

/* Value (e.g. 26.4 years) */
.bgp-hcm-age {
  font-size: 1.6em !important;   /* increased from 1.4 */
  font-weight: 800 !important;   /* stronger emphasis */
  line-height: 1 !important;
}

/* =========================================================
   CHILDLESSNESS % VALUES — FINAL BALANCED EMPHASIS
   ========================================================= */

.bgp-childlessness-value {
  opacity: 0.67 !important;
  font-weight: 520 !important;
  font-size: 1.05em !important;
}


/* =========================================================
   FALLBACK IMAGES
   ========================================================= */

.bgp-report-mini-thumbimg.is-fallback {
  opacity: 0.85;
  filter: grayscale(10%);
}


.bgp-inline-flag.is-fallback--flag {
  object-fit: cover;
  border-radius: 2px;
}



/* =========================================================
TWEAKS TO CHILDLESSNESS BY AGE CARD TO MAKE IT MORE SUBTLE
========================================================= */

/* === Childlessness by Age Card - Toned-down & Balanced === */
.bgp-cover[data-cover="childlessness_age"] {
  background: rgba(18, 23, 32, 0.96) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
}

/* Section title */
.bgp-cover[data-cover="childlessness_age"] .bgp-childlessness-section-title {
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: rgba(220, 235, 255, 0.78) !important;
}

/* Top banner text */
.bgp-cover[data-cover="childlessness_age"] .bgp-childlessness-hcm-text {
  font-size: 0.96rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: rgba(215, 235, 255, 0.82) !important;
}

/* Highlighted age in banner (26.3) */
.bgp-cover[data-cover="childlessness_age"] .bgp-hcm-age,
.bgp-cover[data-cover="childlessness_age"] .bgp-age-value {
  font-size: 1.25rem !important;
  font-weight: 550 !important;
  color: rgba(225, 240, 255, 0.88) !important;
}

/* Big numbers and percentages */
.bgp-cover[data-cover="childlessness_age"] .bgp-childlessness-value {
  font-size: 1.10rem !important;
  font-weight: 500 !important;
  color: rgba(235, 245, 255, 0.90) !important;
}

/* "Childless at age" labels */
.bgp-cover[data-cover="childlessness_age"] .bgp-age-prefix {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: rgba(235, 245, 255, 0.72) !important;
  letter-spacing: 0.015em !important;
  opacity: 0.72 !important;
}

/* Gauge containers + borders */
.bgp-cover[data-cover="childlessness_age"] .bgp-childlessness-gauge {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 
              0 1px 3px rgba(255,255,255,0.08) !important;
}

/* Gauge fills */
.bgp-cover[data-cover="childlessness_age"] .bgp-childlessness-gauge-fill {
  background: linear-gradient(to top, #6ab8ff, #a5d4ff) !important;
  opacity: 0.82 !important;
}

/* ==================== TOP BAR — ULTRA MINIMAL (APPLE STYLE) ==================== */

.bgp-top-controls-row {
  background: rgba(20, 24, 28, 0.88) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;

  padding: 6px 14px !important;
  border-radius: 14px !important;

  max-width: 800px !important;
  width: min(800px, calc(100% - 20px)) !important;
  margin: 8px 0 -4px 192px !important;

  display: flex !important;
  align-items: center !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ==================== LAYOUT ==================== */

.bgp-lane-controls {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ==================== COUNTRY (PLAIN METADATA) ==================== */

.bgp-lane-context {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 170px !important;
  padding-right: 8px !important;
  margin-right: 2px !important;
  position: relative !important;
}

.bgp-lane-context-inner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

.bgp-lane-context-inner::after {
  content: none !important;
  display: none !important;
}

.bgp-lane-context::after {
  content: "" !important;
  position: absolute !important;
  right: -1px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 12px !important;
  background: rgba(255,255,255,0.06) !important;
}

.bgp-lane-context-flag img {
  width: 15px !important;
  height: 10px !important;
  border-radius: 2px !important;
  opacity: 0.75 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) !important;
}

.bgp-lane-context-name {
  font-size: 0.90rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: rgba(255,255,255,0.68) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ==================== LANE BUTTONS ==================== */

.bgp-lane-buttons-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.bgp-lane-buttons-group button,
.bgp-lane-buttons-group a {
  opacity: 0.75 !important;
  transition: opacity 0.15s ease !important;
}

.bgp-lane-buttons-group button:hover,
.bgp-lane-buttons-group a:hover {
  opacity: 1 !important;
}

.bgp-lane-buttons-group .is-active,
.bgp-lane-buttons-group [aria-selected="true"] {
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* ==================== INSIGHTS BUTTON ==================== */

.bgp-lane-btn--profile {
  margin-left: auto !important;
  background: rgba(224, 93, 63, 0.9) !important;
  color: #fff !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

.bgp-lane-btn--profile:hover {
  background: rgba(224, 93, 63, 1) !important;
  transform: translateY(-1px) !important;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 900px) {
  .bgp-top-controls-row {
    width: calc(100% - 16px) !important;
    padding: 6px 10px !important;
  }

  .bgp-lane-context {
    max-width: 140px !important;
  }

  .bgp-lane-context-name {
    font-size: 0.88rem !important;
  }

  .bgp-lane-btn--profile {
    padding: 6px 12px !important;
  }
}


/* ==================== SOURCES / RIGHTS / NOTES — ULTRA MINIMAL ==================== */

.bgp-sources-toggle {
  width: 42% !important;
  max-width: 520px !important;
  min-width: 280px !important;

  padding: 10px 16px !important;

  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;

  color: rgba(255,255,255,0.55) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;

  transition: color 0.25s ease !important;
}

.bgp-sources-toggle:hover {
  background: transparent !important;
  color: rgba(255,255,255,0.80) !important;
  box-shadow: none !important;
}

.bgp-sources-toggle:focus,
.bgp-sources-toggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.bgp-sources-toggle .bgp-sources-toggle-caret,
.bgp-sources-toggle .bgp-sources-caret,
.bgp-sources-toggle svg {
  opacity: 0.7 !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.bgp-sources-toggle:hover .bgp-sources-toggle-caret,
.bgp-sources-toggle:hover .bgp-sources-caret,
.bgp-sources-toggle:hover svg {
  opacity: 0.95 !important;
}

.bgp-sources-toggle[aria-expanded="true"] .bgp-sources-toggle-caret,
.bgp-sources-toggle[aria-expanded="true"] .bgp-sources-caret,
.bgp-sources-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg) !important;
}

/* ==================== SOURCES / RIGHTS / NOTES — CENTERED ULTRA MINIMAL ==================== */

.bgp-sources-toggle {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  padding: 4px 8px !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: rgba(255,255,255,0.55) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  cursor: pointer !important;

  transition: color 0.25s ease !important;
}

.bgp-sources-toggle:hover {
  color: rgba(255,255,255,0.80) !important;
}

/* Ensure parent centers it */
.bgp-sources-accordion {
  display: flex !important;
  justify-content: center !important;
}

/* Caret / triangle */
.bgp-sources-toggle .bgp-sources-toggle-caret,
.bgp-sources-toggle .bgp-sources-caret,
.bgp-sources-toggle svg {
  opacity: 0.65 !important;
  transform: translateY(1px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.bgp-sources-toggle:hover .bgp-sources-toggle-caret,
.bgp-sources-toggle:hover .bgp-sources-caret,
.bgp-sources-toggle:hover svg {
  opacity: 0.9 !important;
}

/* Rotate when open */
.bgp-sources-toggle[aria-expanded="true"] .bgp-sources-toggle-caret,
.bgp-sources-toggle[aria-expanded="true"] .bgp-sources-caret,
.bgp-sources-toggle[aria-expanded="true"] svg {
  transform: translateY(1px) rotate(180deg) !important;
}

/* =========================================================
   DEV NOTE — LEFT COUNTRY SELECTOR SCROLL MODEL

   The country selector must NOT let the whole page scroll
   when a large group (e.g. "All Available") is selected.

   Correct structure:
   - shell = .bgp-countrylist   (fixed-height flex column)
   - head  = .bgp-countrylist-head (inner flex column that can shrink)
   - list  = #bgp-countrylist   (flexible scroll region)

   DOM model:
   shell = #bgp-countrylist.parentElement.parentElement
   head  = #bgp-countrylist.parentElement
   list  = #bgp-countrylist

   Important:
   - min-height: 0 is required on flex parents/children
     or the list will refuse to shrink and internal scroll
     will break.
   - Do NOT move the viewport height constraint onto the
     list itself. It belongs on the OUTER shell.
   - Keep this block late in the CSS so it wins cleanly.

   ========================================================= */

/* OUTER LEFT SELECTOR SHELL */
body.bgp-barometer .bgp-countrylist {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  min-height: 0;
}

/* INNER HEADER + LIST WRAPPER */
body.bgp-barometer .bgp-countrylist-head {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* COUNTRY LIST SCROLL REGION */
body.bgp-barometer #bgp-countrylist {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}