/* ===== MODERN BROWSER SUPPORT ===== */
/* This page is designed for modern browsers (Chrome 50+, Firefox 50+, Safari 10+, Edge 79+) */

/* ===== GLOBAL VARIABLES ===== */
:root {
  /* Yale Endowment: $40.7 billion */
  --yale-endowment-billions: 40.7;
  
  /* Yale wealth box dimensions (base reference) */
  --yale-width: 101750px;
  --yale-height: 400px;
  
  /* Scale: 1 pixel = $1,000 (canonical) */
  --scale-ratio: 1000;
  
  /* Calculate other wealth boxes relative to Yale area */
  --yale-area: calc(var(--yale-width) * var(--yale-height));
  --one-thousand-width: calc(var(--yale-width) * 1000 / 40700000000);
  --median-wage-width: calc(var(--yale-width) * 72000 / 40700000000);
  --million-width: calc(var(--yale-width) * 1000000 / 40700000000);
  --billion-width: calc(var(--yale-width) * 1000000000 / 40700000000);
  
  /* Infobox spacing */
  --infobox-vertical-spacing: 200px;
  --infobox-section-spacing: 300px;
  

  
  /* Block dimensions relative to Yale width (percentage of Yale's width) */
  --lifetime-block: calc(var(--yale-width) * 0.000047);
  --rent-block: calc(var(--yale-width) * 0.000046);
  --childcare-block: calc(var(--yale-width) * 0.000036);
  --groceries-block: calc(var(--yale-width) * 0.000024);
  --transportation-block: calc(var(--yale-width) * 0.000018);
  --retirement-block: calc(var(--yale-width) * 0.000015);
  --utilities-block: calc(var(--yale-width) * 0.000016);
  --annual-total-block: calc(var(--yale-width) * 0.000153);
  --yale-worker-wage-block: calc(var(--yale-width) * 0.00177);
  --yale-schwarzman-block: calc(var(--yale-width) * 0.0147);
  --yale-residential-block: calc(var(--yale-width) * 0.0037);
  --yale-science-block: calc(var(--yale-width) * 0.0049);
  --yale-campaign-block: calc(var(--yale-width) * 0.172);
  --yale-worker-bonus-block: calc(var(--yale-width) * 0.0098);
  --yale-housing-block: calc(var(--yale-width) * 0.0098);
  --yale-childcare-block: calc(var(--yale-width) * 0.0074);
  --yale-minimum-wage-block: calc(var(--yale-width) * 0.049);
  --yale-housing-large-block: calc(var(--yale-width) * 0.0098);

  
  /* Bar dimensions relative to Yale width */
  --worker-bonus-bar: calc(var(--yale-width) * 0.006);
  --worker-housing-bar: calc(var(--yale-width) * 0.006);
  --worker-childcare-bar: calc(var(--yale-width) * 0.0045);
  --worker-wage-bar: calc(var(--yale-width) * 0.03);
  
  /* Growth bar dimensions - following 1 pixel = $1,000 rule */
  --growth-bar-width: calc(var(--yale-width) * 0.15);
  --growth-bar-height: 60px;
  --growth-wealth-width: calc(var(--yale-width) * 0.2);
  --growth-wealth-height: var(--yale-height);
  
  /* Container height and max block height */
  --yale-container-height: 300px;
  --max-block-height: 300px;
}

/* ===== BASE STYLES ===== */
body, html {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #ffffff;
  overflow-x: auto;
  overflow-y: auto;
}

body,
html,
.wealth-wrapper-outer,
.wealth-row {
  min-height: 100vh;
  width: 100%;
}

/* ===== GLOBAL LINK STYLES ===== */
a {
  color: #ba0c2f;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===== LAYOUT CONTAINERS ===== */
.title-screen {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #ffffff;
}

h1 {
  text-align: center;
  font-size: 42px;
  line-height: 1.2;
  width: 100%;
  margin-top: 80px;
  margin-bottom: 40px;
  color: #cf2e2e;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 800px;
  padding: 0 20px;
}

@media (max-width: 450px) {
  h1 {
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 0 15px;
  }
  
  .title-screen {
    min-height: 80vh;
  }
}
/* ===== NAVIGATION & UI ELEMENTS ===== */
.scroll-this-way {
  align-self: flex-end;
  width: 360px;
  height: 165px;
  position: absolute;
  right: 0;
  bottom: 0;
  padding-top: 42px;
  padding-left: 48px;
  font-size: 30px;
  color: #00000033;
  background-image: url(img/right.svg);
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 50px 40px;
  animation-name: bouncy-arrow;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;
  animation-duration: 3s;
  z-index: 5;
}

@media (max-width: 450px) {
  .scroll-this-way {
    right: -35%;
    width: 300px;
    height: 120px;
    font-size: 24px;
    padding-top: 30px;
    padding-left: 30px;
    background-size: 40%;
    background-position: 30px 25px;
  }
}
.footer {
  position: relative;
  bottom: 0;
  text-align: center;
  font-size: 14px;
  width: 100%;
  background-color: #cf2e2e;
  color: white;
  padding: 30px 0;
  border-top: 3px solid #ff6900;
  line-height: 1.5;
  margin-top: 50px;
}

@media (max-width: 450px) {
  .footer {
    padding: 20px 15px;
    font-size: 12px;
  }
}

.local34-branding {
  margin-bottom: 15px;
}

.local34-logo {
  font-size: 20px;
  font-weight: 800;
  color: #ff6900;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.local34-tagline {
  font-size: 16px;
  color: white;
  margin-bottom: 15px;
  font-weight: 500;
}

.credits {
  font-size: 13px;
  color: #CCCCCC;
  margin-bottom: 8px;
  line-height: 1.4;
}

.credits a {
  color: #ba0c2f;
  text-decoration: none;
}

.credits a:hover {
  text-decoration: underline;
}

.attribution {
  font-size: 12px;
  color: #AAAAAA;
  line-height: 1.4;
}

.attribution a {
  color: #ba0c2f;
  text-decoration: none;
}

.attribution a:hover {
  text-decoration: underline;
}

/* ===== GROWTH BAR STYLES ===== */
.growth-title {
  color: #d32f2f;
  font-size: 1.8em;
  margin-bottom: 20px;
  font-weight: 700;
}

.growth-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

/* Removed old growth-bar-wrapper styles - now using growth-pixel-area */

/* Removed old growth-bar styles - now using pixel-based approach */

.growth-counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  font-weight: 700;
  color: #333;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  z-index: 10;
}

.growth-info {
  font-size: 0.9em;
  color: #666;
  line-height: 1.4;
}

.growth-rate {
  font-weight: 600;
  color: #4caf50;
}

/* ===== GROWTH WEALTH BAR ===== */
.yale-growth {
  /* Follow the same pattern as other wealth wrappers */
  margin: 1em 3em;
  margin-left: 10px; /* 10px gap from Yale bar */
  flex-shrink: 0;
}

.yale-growth .wealth {
  width: 400px; /* Square area */
  height: 400px;
  background: #f5f5f5;
  border: 2px solid #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  overflow: hidden;
}

.yale-growth .wealth-title {
  color: #333;
  font-size: 1.1em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}

.yale-growth .growth-container {
  width: 95%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yale-growth .growth-pixel-area {
  width: 100%;
  height: 300px;
  background-color: #f8f8f8;
  border: 2px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.growth-pixel {
  transition: top 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: pixelDrop 0.3s ease-out;
}

@keyframes pixelDrop {
  0% { 
    opacity: 0; 
    transform: scale(0) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2) rotate(180deg); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1) rotate(360deg); 
  }
}

/* Removed old yale-growth .growth-bar styles - now using pixel-based approach */

.yale-growth .growth-counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
  font-weight: 700;
  color: #333;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  z-index: 10;
  background: rgba(255,255,255,0.9);
  padding: 4px 8px;
  border-radius: 3px;
}

.yale-growth .growth-info {
  font-size: 0.7em;
  color: #666;
  line-height: 1.2;
  text-align: center;
}

.yale-growth .growth-rate {
  font-weight: 600;
  color: #e8f5e8;
}

@media (max-width: 450px) {
  .yale-growth {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 20px;
  }
  
  .yale-growth .wealth {
    width: 80vw;
    height: 400px;
  }
  
  .yale-growth .growth-pixel-area {
    height: 300px;
  }
  
  .yale-growth .growth-counter {
    font-size: 0.9em;
  }
  
  .yale-growth .wealth-title {
    font-size: 1.2em;
  }
}

/* Removed old growth-bar-wrapper mobile styles */

@keyframes bouncy-arrow {
  0% {background-position: 50px 40px;}
  20% {background-position: 50px 40px;}
  25% {background-position: 70px 40px;}
  30% {background-position: 45px 40px;}
  35% {background-position: 70px 40px;}
  40% {background-position: 50px 40px;}
  100% {background-position: 50px 40px;}
}
/* ===== WEALTH VISUALIZATION LAYOUT ===== */
.wealth-wrapper-outer {
  font-family: sans-serif;
  overflow-x: auto;
  overflow-y: auto;
  display: block;
  width: 100%;
  min-height: 100vh;
  position: relative;
  /* Extend viewport to accommodate growth bar */
  min-width: calc(var(--yale-width) + 410px); /* Yale width + 10px gap + 400px growth bar */
}

.center-sticky {
  position: sticky;
  left: 50%;
  transform: translate(-50%, 0);
}
.navigation {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
}
.navigation .button {
  color: rgba(0,0,0,0);
  width: 20px;
  display: block;
  height: 20px;
  border-radius: 100%;
  background-position: 5px;
  background-color: #d8d8d8;
  box-shadow: inset 1px 6px 12px #e2e2e2, inset -1px -10px 5px #a9a9a9, 1px 2px 1px #797979;
  overflow: hidden;
  margin: 4px;
}
.navigation .button-inner {
  background-repeat: no-repeat;
  background-size: 8px;
  height: 100%;
  background-position: 5px;
}
.navigation .prev-button .button-inner {
  background-image: url(img/prev.svg);
}
.navigation .next-button .button-inner {
  background-image: url(img/next.svg);
  background-position: 7px 5px;
}
.navigation .home-button .button-inner {
  background-image: url(img/house.svg);
  background-size: 12px;
  background-position: 4px 4px;
}
.navigation .about-button .button-inner {
  color: #999999;
  font-weight: bold;
  text-decoration: none;
  text-indent: 5px;
  line-height: 22px;
}


/* ===== WEALTH BOXES & TITLES ===== */
.wealth-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  min-width: max-content;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
}

.arrow {
  margin-left: -6px;
  margin-top: 5px;
  flex-shrink: 0;
}

.wealth-wrapper {
  margin: 2em 3em;
  flex-shrink: 0;
  position: relative;
  padding: 0 15px;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wealth {
  background-color: black;
  align-items: center;
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.title {
  margin-bottom: 5px;
}

.billion .wealth > .wealth-title {
  flex-basis: auto;
  position: static;
  text-align: left;
  padding: 8px 12px;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.wealth-title {
  position: relative;
  color: black;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  z-index: 10;
  padding: 8px 0;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 300px;
  text-align: left;
  align-self: flex-start;
}

@media (max-width: 450px) {
  .wealth-title {
    font-size: 16px;
    max-width: 200px;
    padding: 8px 12px;
    margin: 0;
  }
  
  .wealth-wrapper {
    margin: 1em 1.5em;
    padding: 0 10px;
  }
  
  .wealth.one-thousand {
    min-width: 1px;
    min-height: 1px;
  }
  
  .wealth.median-wage {
    min-width: 8px;
    min-height: 8px;
  }
  
  .wealth.million {
    min-width: 30px;
    min-height: 30px;
  }
  
  .wealth.billion {
    min-width: 200px;
    min-height: 150px;
  }
}

.text-infobox .title,
.infobox .chart {
  max-width: 500px;
  font-size: 16px;
  line-height: 1.6;
}

.infobox .chart img {
  max-width: 100%;
  height: auto;
}

/* ===== INFOBOX CONTENT STYLING ===== */
.infobox .chart,
.infobox .title-block-wrapper,
.infobox .title {
  font-weight: normal;
  line-height: 1.6;
  width: 96vw;
  max-width: 1000px;
  font-size: 18px;
  color: black;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Yale section specific overrides */
.yale .infobox .title {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .infobox .chart {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .infobox .title-block-wrapper {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .infobox p {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .infobox li {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .infobox strong {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .what-could-we-do.title {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .yale-endowment-bar .title {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .benefit .title {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .infobox .title-block-wrapper .title {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Make Yale wealth titles white */
.yale .wealth-title {
  color: white;
  background-color: rgba(40, 109, 192, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.yale .wealth > .wealth-title {
  color: white;
  background-color: rgba(40, 109, 192, 0.9);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Target all infoboxes that are children of the yale wealth wrapper */
.yale .infobox .title,
.yale .infobox p,
.yale .infobox li,
.yale .infobox strong,
.yale .infobox .title-block-wrapper,
.yale .infobox .chart,
.yale .infobox .midtext {
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Ensure all other sections have black text */
.one-thousand .infobox .title,
.median-wage .infobox .title,
.million .infobox .title,
.billion .infobox .title,

.one-thousand .infobox p,
.median-wage .infobox p,
.million .infobox p,
.billion .infobox p,
.one-thousand .infobox li,
.median-wage .infobox li,
.million .infobox li,
.billion .infobox li,
.one-thousand .infobox strong,
.median-wage .infobox strong,
.million .infobox strong,
.billion .infobox strong {
  color: #cf2e2e;
  text-shadow: none;
}

@media (max-width: 450px) {
  .infobox .midtext,
  .infobox .title {
    width: 90%;
    font-size: 16px;
  }
  
  .wealth-wrapper {
    margin: 0.5em 1em;
    margin-bottom: 10px;
  }
  
  .yale .wealth {
    width: var(--yale-width);
    max-width: none;
    overflow-x: visible;
  }
}
.infobox.year-veteran .title {
  position: sticky;
  left: 0;
}
.infobox .chart,
.infobox .piechart,
.infobox .worldchart,
.infobox .chart-outer,
.infobox .midtext,
.infobox .title-block-wrapper,
.text-infobox .title {
  position: relative;
  left: 0;
  transform: none;
  max-width: 100%;
  overflow: hidden;
  /* Prevent text overlap */
  z-index: 1;
}

@media (max-width: 450px) {
  .infobox.line-chart .chart-outer {
    left: 5px;
    width: 98%;
    transform: none;
  }
  
  .infobox .block,
  .infobox .title-block-wrapper,
  .infobox .piechart,
  .infobox .chart-outer,
  .infobox .midtext,
  .infobox .title {
    left: 10px;
    transform: none;
    position: relative;
    max-width: calc(100vw - 20px);
  }
  
  .infobox .chart,
  .infobox .piechart,
  .infobox .worldchart,
  .infobox .chart-outer,
  .infobox .midtext,
  .infobox .title-block-wrapper,
  .text-infobox .title {
    position: relative;
    left: 0;
    transform: none;
    max-width: 100%;
  }
}

.sub-infobox .block,
.sub-infobox .midtext,
.sub-infobox .title {
  position: static;
}
/* ===== INFOBOX LAYOUT & POSITIONING ===== */
/* ===== UNIFIED INFOBOX SYSTEM ===== */
/* Base infobox styles */
.infobox {
  z-index: 10;
  position: absolute;
  width: 90vw;
  max-width: 1000px;
  margin-bottom: var(--infobox-vertical-spacing);
  max-height: 300px;
  padding: 20px;
  background-color: transparent;
  border-radius: 0;
  overflow: hidden;
  display: none;
  pointer-events: none;
  color: white;
}

/* Default state for all infoboxes - hidden */
.infobox {
  display: none;
}

/* Only show infoboxes within Yale section */
.yale .infobox {
  display: none;
  color: white;
  border: none;
  pointer-events: auto;
}

/* Hide infoboxes outside of Yale section */
.one-thousand .infobox,
.median-wage .infobox,
.million .infobox,
.billion .infobox {
  display: none;
}

/* Infobox positioning will be handled by JavaScript */
.yale .infobox {
  position: fixed;
  display: none;
  color: white;
  border: none;
  pointer-events: auto;
  z-index: 1000;
  width: 90vw;
  max-width: 1000px;
  max-height: 300px;
  padding: 20px;
  background-color: transparent;
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: none;
  box-shadow: none;
  font-size: 16px;
  line-height: 1.6;
}

/* Content styling */
.infobox .chart,
.infobox .piechart,
.infobox .worldchart,
.infobox .chart-outer,
.infobox .midtext,
.infobox .title-block-wrapper,
.text-infobox .title {
  position: relative;
  left: 0;
  transform: none;
  max-width: 100%;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 450px) {
  .infobox {
    position: relative;
    left: 10px !important;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    margin-bottom: 20px;
    top: auto !important;
    display: block;
  }
  
  .yale .wealth {
    position: relative;
    overflow-x: visible;
  }
  
  .yale .infobox {
    position: relative;
    left: 10px !important;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    margin-bottom: 20px;
    top: auto !important;
    display: block;
  }
}

.flex {
  display: flex;
}

.infobox.first {
  left: 5vw;
  top: 80px;
  background-color: transparent;
}

.infobox.first .title {
  max-width: 500px;
}

.infobox.coming-up .title,
.infobox.five-pixels .title {
  max-width: 500px;
}

/* Regular infoboxes (with blocks/charts) - positioned in the last 2/3 of Yale wealth */
.yale .infobox-first {
  left: calc(5vw + 100vw);
  top: 80px;
}

.yale .infobox-second {
  left: calc(5vw + 200vw);
  top: 80px;
}

.yale .infobox-third {
  left: calc(5vw + 300vw);
  top: 80px;
}

.yale .infobox-fourth {
  left: calc(5vw + 400vw);
  top: 80px;
}

.yale .infobox-fifth {
  left: calc(5vw + 500vw);
  top: 80px;
}

.yale .infobox-sixth {
  left: calc(5vw + 600vw);
  top: 80px;
}

.yale .infobox-seventh {
  left: calc(5vw + 700vw);
  top: 80px;
}

.yale .infobox-eighth {
  left: calc(5vw + 800vw);
  top: 80px;
}

.yale .infobox-ninth {
  left: calc(5vw + 900vw);
  top: 80px;
}

.yale .infobox-tenth {
  left: calc(5vw + 1000vw);
  top: 80px;
}

.yale .infobox-eleventh {
  left: calc(5vw + 1100vw);
  top: 80px;
}

.yale .infobox-twelfth {
  left: calc(5vw + 1200vw);
  top: 80px;
}

.yale .infobox-thirteenth {
  left: calc(5vw + 1300vw);
  top: 80px;
}

.yale .infobox-fourteenth {
  left: calc(5vw + 1400vw);
  top: 80px;
}

.yale .infobox-fifteenth {
  left: calc(5vw + 1500vw);
  top: 80px;
}

.yale .infobox-sixteenth {
  left: calc(5vw + 1600vw);
  top: 80px;
}

.yale .infobox-seventeenth {
  left: calc(5vw + 1700vw);
  top: 80px;
}

.yale .infobox-eighteenth {
  left: calc(5vw + 1800vw);
  top: 80px;
}

.yale .infobox-nineteenth {
  left: calc(5vw + 1900vw);
  top: 80px;
}

.yale .infobox-twentieth {
  left: calc(5vw + 2000vw);
  top: 80px;
}

.yale .infobox-twenty-first {
  left: calc(5vw + 2100vw);
  top: 120px;
}

.yale .infobox-twenty-second {
  left: calc(5vw + 2200vw);
  top: 160px;
}

.yale .infobox-twenty-third {
  left: calc(5vw + 2300vw);
  top: 200px;
}

.yale .infobox-twenty-fourth {
  left: calc(5vw + 2400vw);
  top: 80px;
}

/* Handle infobox-close class */
.yale .infobox-close {
  left: calc(5vw + 2500vw);
  top: 80px;
}

/* Text infoboxes - positioned in the first third of Yale wealth, but starting 25 viewport widths in */
.yale .text-infobox.infobox-first {
  left: calc(5vw + 2500vw);
  top: 80px;
}

.yale .text-infobox.infobox-second {
  left: calc(5vw + 2510vw);
  top: 80px;
}

.yale .text-infobox.infobox-third {
  left: calc(5vw + 2520vw);
  top: 80px;
}

.yale .text-infobox.infobox-fourth {
  left: calc(5vw + 2530vw);
  top: 80px;
}

.yale .text-infobox.infobox-fifth {
  left: calc(5vw + 2540vw);
  top: 80px;
}

.yale .text-infobox.infobox-sixth {
  left: calc(5vw + 2550vw);
  top: 80px;
}

.yale .text-infobox.infobox-seventh {
  left: calc(5vw + 2560vw);
  top: 80px;
}

.yale .text-infobox.infobox-eighth {
  left: calc(5vw + 2570vw);
  top: 80px;
}

.yale .text-infobox.infobox-ninth {
  left: calc(5vw + 2580vw);
  top: 80px;
}

.yale .text-infobox.infobox-tenth {
  left: calc(5vw + 2590vw);
  top: 80px;
}

.yale .text-infobox.infobox-eleventh {
  left: calc(5vw + 2600vw);
  top: 80px;
}

.yale .text-infobox.infobox-twelfth {
  left: calc(5vw + 2610vw);
  top: 80px;
}

.yale .text-infobox.infobox-thirteenth {
  left: calc(5vw + 2620vw);
  top: 80px;
}

.yale .text-infobox.infobox-fourteenth {
  left: calc(5vw + 2630vw);
  top: 80px;
}

.yale .text-infobox.infobox-fifteenth {
  left: calc(5vw + 2640vw);
  top: 80px;
}

.yale .text-infobox.infobox-sixteenth {
  left: calc(5vw + 2650vw);
  top: 80px;
}

.yale .text-infobox.infobox-seventeenth {
  left: calc(5vw + 2660vw);
  top: 80px;
}

.yale .text-infobox.infobox-eighteenth {
  left: calc(5vw + 2670vw);
  top: 80px;
}

.yale .text-infobox.infobox-nineteenth {
  left: calc(5vw + 2680vw);
  top: 80px;
}

.yale .text-infobox.infobox-twentieth {
  left: calc(5vw + 2690vw);
  top: 80px;
}

.yale .text-infobox.infobox-twenty-first {
  left: calc(5vw + 2700vw);
  top: 120px;
}

.yale .text-infobox.infobox-twenty-second {
  left: calc(5vw + 2710vw);
  top: 160px;
}

.yale .text-infobox.infobox-twenty-third {
  left: calc(5vw + 2720vw);
  top: 200px;
}

.yale .text-infobox.infobox-twenty-fourth {
  left: calc(5vw + 2730vw);
  top: 80px;
}

.yale .text-infobox.infobox-close {
  left: calc(5vw + 2740vw);
  top: 80px;
}

@media (max-width: 450px) {
  .infobox {
    position: relative;
    left: 10px !important;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    margin-bottom: 20px;
    top: auto !important;
    display: block;
  }
  
  .yale .wealth {
    position: relative;
    overflow-x: visible;
  }
  
  .yale .infobox {
    position: relative;
    left: 10px !important;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    margin-bottom: 20px;
    top: auto !important;
    display: block;
  }
}
.worker-demands-header {
  font-size: 18px;
  font-weight: 700;
  color: #cf2e2e;
  margin-bottom: 15px;
  text-align: center;
}

.worker-intro {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.worker-demands {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demand-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background-color: rgba(207, 46, 46, 0.1);
  border-radius: 6px;
  border-left: 3px solid #cf2e2e;
}

.demand-icon {
  font-size: 16px;
  min-width: 20px;
}

.demand-text {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.3;
}
.sub-infobox {
  margin: 0 40px;
}
.sub-infobox .title {
  width: 430px;
}
.midtext-wrapper {
  display: flex;
  justify-content: space-around;
  margin-top: 150px;
  width: 60%;
}
.column-infobox .sub-infobox {
  margin-bottom: 20px;
}
/* ===== WEALTH BOX DIMENSIONS (relative to Yale) ===== */
.wealth.one-thousand {
  width: 1px;
  height: 1px;
  margin-top: 5px;
  display: block;
  background-color: black;
  margin-right: 30px;
  max-height: 400px;
}
.wealth.median-wage {
  width: 8.49px;
  height: 8.49px;
  background-color: #FF6B35;
  display: block;
  margin-right: 30px;
  max-height: 400px;
}
.explainer {
  font-size: 16px;
  font-weight: normal;
}
.wealth.million {
  width: 31.62px;
  height: 31.62px;
  background-color: #4CAF50;
  display: block;
  margin-right: 30px;
  max-height: 400px;
}
.wealth.billion {
  width: 2500px;
  height: 400px;
  background-color: #03A9F4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 30px;
  max-height: 400px;
}
@media (max-width: 450px) {
  .billion .wealth {
    border-bottom: 3px dotted #007fb7;
  }
}
.yale .wealth {
  width: var(--yale-width);
  height: var(--yale-height);
  background-color: #286dc0;
  border: none;
  position: relative;
  overflow: visible;
  min-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.yale {
  position: relative;
}

@media (max-width: 450px) {
  .yale .wealth {
    width: var(--yale-width);
    height: var(--yale-height);
    min-height: 400px;
    overflow-x: visible;
  }
}


/* ===== SCALE & MEASUREMENT ELEMENTS ===== */
.ruler {
  background-image: url('img/ruler.svg');
  background-repeat: repeat-x;
  background-position: 0 370px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 10;
}

@media (max-width: 450px) {
  .ruler {
    position: relative;
    background-position: 0 0;
    height: 30px;
    margin-top: 10px;
  }
}
.key {
  position: absolute;
  top: 350px;
  left: 0;
  width: 125px;
  background-image: url(img/scale.1.0.svg);
  background-repeat: no-repeat;
  background-position: 0px 4px;
  display: flex;
  justify-content: center;
}
.key > span {
  display: inline-block;
}
.yale .key > span {
  background-color: #286dc0;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
}

.shadow {
  box-shadow: -3px 5px 10px;
}
.counter {
  align-self: flex-end;
  left: 10px;
  position: sticky;
  transform: translate(0, 27px);
  color: white;
  padding: 8px 12px;
  min-width: 140px;
  background-color: rgba(40, 109, 192, 0.95);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 20;
}

.key {
  position: absolute;
  top: 350px;
  width: 170px;
  background-image: url(img/scale.1.0.svg);
  background-repeat: no-repeat;
  background-position: 0px 4px;
  display: flex;
  justify-content: center;
  z-index: 15;
}

.key > span {
  display: inline-block;
}

.yale .key > span {
  background-color: #286dc0;
  color: white;
  padding: 2px 5px;
  border-radius: 3px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

@media (max-width: 450px) {
  .counter {
    position: relative;
    transform: none;
    left: auto;
    margin: 10px;
  }
  
  .key {
    position: relative;
    top: auto;
    margin: 10px;
    width: 125px;
  }
}
/* ===== COST OF LIVING BLOCKS (relative to Yale) ===== */
.lifetime .block {
  width: max(var(--lifetime-block), 20px);
  height: max(var(--lifetime-block), 20px);
  background-color: blue;
  display: block;
  margin: 10px 0;
}
.rent-annual .block {
  width: max(var(--rent-block), 20px);
  height: max(var(--rent-block), 20px);
  background-color: #ff4444;
  display: block;
  margin: 10px 0;
}
.childcare-annual .block {
  width: max(var(--childcare-block), 20px);
  height: max(var(--childcare-block), 20px);
  background-color: #ff8800;
  display: block;
  margin: 10px 0;
}
.groceries-annual .block {
  width: max(var(--groceries-block), 20px);
  height: max(var(--groceries-block), 20px);
  background-color: #44aa44;
  display: block;
  margin: 10px 0;
}
.transportation-annual .block {
  width: max(var(--transportation-block), 20px);
  height: max(var(--transportation-block), 20px);
  background-color: #4444ff;
  display: block;
  margin: 10px 0;
}
.retirement-annual .block {
  width: max(var(--retirement-block), 20px);
  height: max(var(--retirement-block), 20px);
  background-color: #8844ff;
  display: block;
  margin: 10px 0;
}
.utilities-annual .block {
  width: max(var(--utilities-block), 20px);
  height: max(var(--utilities-block), 20px);
  background-color: #ffaa44;
  display: block;
  margin: 10px 0;
}

.annual-total .block {
  width: max(var(--annual-total-block), 30px);
  height: max(var(--annual-total-block), 30px);
  background-color: #ff0000;
  display: block;
  margin: 10px 0;
}

.yale-worker-wage .block {
  width: max(var(--yale-worker-wage-block), 40px);
  height: max(var(--yale-worker-wage-block), 40px);
  background-color: #00aa00;
  border: 2px solid #008800;
  display: block;
  margin: 10px 0;
}

.yale-schwarzman .block {
  width: var(--yale-schwarzman-block);
  height: var(--yale-schwarzman-block);
  background-color: #cc0000;
  border: 3px solid #990000;
}

.yale-residential .block {
  width: var(--yale-residential-block);
  height: var(--yale-residential-block);
  background-color: #cc6600;
  border: 3px solid #993300;
}

.yale-science .block {
  width: var(--yale-science-block);
  height: var(--yale-science-block);
  background-color: #cc0066;
  border: 3px solid #990033;
}

.yale-campaign .block {
  width: var(--yale-campaign-block);
  height: 400px;
  background-color: #6600cc;
  border: 5px solid #330099;
}

.yale-worker-bonus .block {
  width: var(--yale-worker-bonus-block);
  height: var(--yale-worker-bonus-block);
  background-color: #ff6900;
  border: 2px solid #cf2e2e;
}

.yale-housing .block {
  width: var(--yale-housing-block);
  height: var(--yale-housing-block);
  background-color: #ff6900;
  border: 2px solid #cf2e2e;
}

.yale-childcare .block {
  width: var(--yale-childcare-block);
  height: var(--yale-childcare-block);
  background-color: #ff6900;
  border: 2px solid #cf2e2e;
}

.yale-minimum-wage .block {
  width: var(--yale-minimum-wage-block);
  height: 400px;
  background-color: #ff6900;
  border: 3px solid #cf2e2e;
}

.yale-housing-large .block {
  width: var(--yale-housing-large-block);
  height: var(--yale-housing-large-block);
  background-color: #ff6900;
  border: 3px solid #cf2e2e;
}

/* Utility class for height-constrained blocks */
.block-height-constrained {
  --original-width: var(--block-width, 1%);
  --original-height: var(--block-height, 1%);
  --block-area: calc(var(--original-width) * var(--original-height));
  --constrained-height: min(var(--original-height), 300px);
  --adjusted-width: calc(var(--block-area) / var(--constrained-height));
  
  width: var(--adjusted-width);
  height: var(--constrained-height);
}


/* ===== LINE CHART & ZOOM FUNCTIONALITY ===== */
.line-chart svg {
  max-width: 100%;
}
.line-chart .chart-outer {
  width: 720px;
  max-width: 100%;
  text-align: center;
}
.line-chart .chart-inner {
  height: 200px;
  overflow: hidden;
  margin-bottom: 5px;
}
.zoom.line-chart .chart-inner {
  transition: box-shadow .8s;
  box-shadow: inset 0 0 10px #00000042;
}
.zoom.line-chart svg {
  transition: all 1.5s;
  width: 700%;
  max-width: 700%;
  height: auto;
  margin-top: -84%;
  margin-left: -20%;
}
@media (max-width: 450px) {
  .line-chart .chart-inner .zero,
  .line-chart .chart-inner .tne-thousand-million,
  .line-chart .chart-inner .zuck-name {
    font-size: 28px;
  }
  .zuck-wealth {
    font-size: 20px;
  }
  .line-chart .zero-outer {
    transform: translate(160px, 356px);
  }
  .desktop-zuck {
    display: none;
  }
  .zoom.line-chart svg {
    width: 1200%;
    max-width: 1200%;
    margin-top: -140%;
    margin-left: -36%;
  }
}
@media (min-width: 451px) {
  .mobile-zuck {
    display: none;
  }
}
.zoom-out,
.zoom .zoom-in {
  display: none;
}
.zoom .zoom-out {
  display: inline;
}
.no-single-human {
  left: var(--no-single-human-margin);
}
.no-single-human .title {
  max-width: 390px;
}
/* ===== PEOPLE VISUALIZATIONS ===== */
.people {
  background-image: url('img/person.svg');
  background-size: 20px;
}
.people.first {
  margin-top: -1040px;
}
.people-wrapper-outer h2 {
  font-size: 16px;
  font-weight: normal;
  text-align: center;
  margin: 5px;
}
.people-wrapper {
  width: 800px;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.sixty-percent-people .people {
  width: 800px;
  height: 1974000px;
}
.sixty-percent-people .people-wrapper {
  box-shadow: inset 0 0 10px #000000;
}
.bubble {
  border-radius: 10px;
  font-weight: bold;
  box-shadow: 4px 4px 5px;
  font-size: 28px;
  background-color: white;
  text-align: center;
  padding: 10px;
}
.people-label {
  position: absolute;
  top: 40%;
  left: 39%;
}
.scroll-indicator {
  position: absolute;
  top: 40%;
  left: 260px;
  font-size: 18px;
  max-width: 240px;
}
.people-sub-label {
  font-weight: normal;
  font-style: italic;
  font-size: 14px;
  margin-top: 4px;
}
.people-wrapper .percent {
  background-color: rgb(255, 255, 255);
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  border-radius: 10px;
  box-shadow: 4px 4px 5px;
  padding: 10px;
  position: -webkit-sticky;
  position: sticky;
  margin-top: 1000px;
  top: 160px;
  margin-left: 350px;
}
@media (max-width: 450px) {
  .people {
    background-size: 10px;
  }
  .people-wrapper {
    width: 200px;
    height: 400px;
  }

  .sixty-percent-people .people {
    width: 200px;
    height: 1974000px;
  }
  .people-label {
    left: 35px;
    font-size: 20px;
  }
  .people-wrapper .percent {
    margin-left: 66px;
  }
}
.ninety-wrapper {
  width: 590px;
  max-width: 96%;
}
.plane-wrapper {
  width: 480px;
  max-width: 96%;
}
.ninety-wrapper img,
.plane-wrapper img {
  width: 100%;
  height: auto;
}
.what-could-we-do.title {
  width: 100%;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  color: #cf2e2e;
  margin: 40px 0 20px 0;
  line-height: 1.3;
  text-transform: uppercase;
}


.piechart {
  position: relative;
}
.piechart .piechart-outer {
  width: 300px;
  height: 300px;
  transform: rotate(-50deg);
  background: yellowgreen;
  border-radius: 50%;
}
.piechart .piechart-inner {
  fill: yellowgreen;
  stroke: #655;
  stroke-width: 32;
}
@media (max-width: 450px) {
  .piechart.piechart h2 {
    font-size: 17px;
  }
}
.point-zero-three-percent .piechart-inner {
  stroke-dasharray: .03 100;
}
.two-point-seven-percent .piechart-inner {
  stroke-dasharray: 2.7 100;
}
.three-percent .piechart-inner {
  stroke-dasharray: 3 100;
}
.five-percent .piechart-inner {
  stroke-dasharray: 5 100;
}
.five-point-three-percent .piechart-inner {
  stroke-dasharray: 5.3 100;
}
.six-percent .piechart-inner {
  stroke-dasharray: 6 100;
}
.seven-point-five-percent .piechart-inner {
  stroke-dasharray: 7.5 100;
}
.six-percent .piechart-outer {
  transform: rotate(-45deg);
}
.six-point-eight-percent .piechart-inner {
  stroke-dasharray: 6.8 100;
}
.three-percent .piechart-outer,
.two-point-five-percent .piechart-outer,
.two-point-seven-percent .piechart-outer,
.two-point-eight-percent .piechart-outer {
  transform: rotate(-38deg);
}
.five-percent .piechart-outer,
.four-percent .piechart-outer {
  transform: rotate(-43deg);
}
.four-tenths-percent .piechart-outer {
  transform: rotate(-34deg);
}
.seven-point-five-percent .piechart-outer,
.six-point-three-percent .piechart-outer {
  transform: rotate(-46deg);
}
.four-tenths-percent .piechart-inner {
  stroke-dasharray: .4 100;
}
.two-point-five-percent .piechart-inner {
  stroke-dasharray: 2.5 100;
}
.two-point-eight-percent .piechart-inner {
  stroke-dasharray: 2.8 100;
}
.four-point-three-percent .piechart-inner {
  stroke-dasharray: 4.3 100;
}
.six-point-three-percent .piechart-inner {
  stroke-dasharray: 6.3 100;
}
.four-point-eight-percent .piechart-inner {
  stroke-dasharray: 4.8 100;
}
.forty-percent .piechart-inner {
  stroke-dasharray: 40 100;
}

.one-percent .piechart-inner {
  stroke-dasharray: 1 100;
}
.piechart .dotted-line {
  position: absolute;
  width: 80px;
  height: 0;
  top: 40px;
  left: 270px;
  border-top: 2px dashed black;
  transform: rotate(-38deg);
}
.piechart .label {
  position: absolute;
  left: 347px;
  top: -7px;
  font-size: 20px;
  color: #cf2e2e;
  font-weight: 700;
}
.piechart h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin: 10px 0;
}
@media (max-width: 450px) {
  .piechart .label {
    left: 277px;
    top: 43px;
    font-size: 18px;
  }
  .piechart .dotted-line {
    display: none;
  }
}
.piechart .description {
  width: 300px;
  text-align: center;
}

.piechart .description h2 {
  color: #cf2e2e;
  font-weight: bold;
}

.infobox ul {
  margin: 20px 0;
  padding-left: 25px;
}

.infobox li {
  margin: 12px 0;
  line-height: 1.6;
  font-size: 16px;
}

.infobox strong {
  color: #cf2e2e;
  font-weight: 700;
}

.infobox p {
  margin: 16px 0;
  line-height: 1.6;
}

.yale-worker-bonus {
  width: 100px;
  height: 100px;
  background-color: #ff6900;
  border: 2px solid #cf2e2e;
}

.yale-housing {
  width: 100px;
  height: 100px;
  background-color: #ff6900;
  border: 2px solid #cf2e2e;
}

.yale-childcare {
  width: 87px;
  height: 87px;
  background-color: #ff6900;
  border: 2px solid #cf2e2e;
}

.yale-minimum-wage {
  width: 224px;
  height: 224px;
  background-color: #ff6900;
  border: 3px solid #cf2e2e;
}

.yale-housing-large {
  width: 100px;
  height: 100px;
  background-color: #ff6900;
  border: 3px solid #cf2e2e;
}

.yale-comparison {
  margin: 30px 0;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}



.comparison-header {
  font-size: 20px;
  font-weight: 700;
  color: #cf2e2e;
  margin-bottom: 15px;
  text-align: center;
}

.comparison-intro {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 500;
}



.benefit {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background-color: rgba(255, 105, 0, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(255, 105, 0, 0.2);
}

.benefit .title {
  width: 100%;
  font-size: 16px;
  color: #cf2e2e;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}



.bar.worker-bonus {
  width: 100%;
  max-width: 400px;
  height: 25px;
  background-color: #ff6900;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bar.worker-housing {
  width: 100%;
  max-width: 400px;
  height: 25px;
  background-color: #ff6900;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bar.worker-childcare {
  width: 100%;
  max-width: 300px;
  height: 25px;
  background-color: #ff6900;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bar.worker-wage {
  width: 100%;
  max-width: 500px;
  height: 25px;
  background-color: #ff6900;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.about {
  visibility: hidden;
  transition: opacity .7s;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.65);
}
.about.open {
  visibility: visible;
  opacity: 1;
}
.modal-inner {
  opacity: 1;
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translate(-50%, 0);
  height: 0;
  width: 0;
  overflow: scroll;
  transition: height .7s, width .7s;
  background-color: white;
}
.modal-text {
  width: calc(90% - 40px);
  height: calc(95vh - 40px);
  overflow: visible;
  padding: 20px;
}
.about.open .modal-inner,
.about.open .modal-inner {
  height: 95vh;
  width: 90%;
}
.malaria .babies {
  height: 8800320px;
  background-size: 160px;
  background-image: url(img/baby.svg);
}
.malaria .babies-wrapper {
  box-shadow: inset 0 0 10px #00000042;
  width: 800px;
  height: 320px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.baby-counter {
  top: 127px;
  position: sticky;
  display: inline-block;
  left: 350px;
  margin-top: 1800px;
}
@media (max-width: 450px) {
  .malaria .babies-wrapper {
    max-width: 340px;
    height: 340px;
  }
  .malaria .babies {
    background-size: 68px;
    height: 3740340px;
  }
  .scroll-indicator {
    top: 38%;
    left: 40px;
  }
  .baby-counter {
    left: 135px;
  }
}
.infectious {
  display: flex;
  align-items: center;
}
.ebola-bar {
  max-width: 300px;
}
.ebola-bar .title {
  max-width: 100%;
}
.ebola-bar .block {
  height: 122px;
  width: 122px;
  background-color: #00bb42;
}
.corona-bar .title,
.malaria-bar .title {
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: center;
}
.malaria-bar .block {
  height: 400px;
  width: 1022px;
  background-color: #66c35a;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}
.corona-bar .block {
  height: 400px;
  width: 500px;
  background-color: green;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}
.corona-bar,
.malaria-bar,
.ebola-bar {
  color: black;
  margin: 50px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
@media (max-width: 450px) {
  h3 {
    font-size: 14px;
  }
}
.cares .chart {
  text-align: center;
}
.worldchart-wrapper {
  display: flex;
}
.worldchart {
  text-align: center;
  width: 320px;
}
.worldchart img {
  max-width: 100%;
}
.worldchart-wrapper .description {
  text-align: center;
}
.all-of-them .title {
  width: 370px;
}
@media (max-width: 450px) {
  .all-of-them .title {
    width: 340px;
  }
}
.instructions {
  transition: opacity 300ms;
  margin-top: 40px;
  max-width: 80%;
  color: black;
  font-size: 14px;
  opacity: 0;
}
.instructions.show {
  opacity: 1;
}
@media (max-width: 450px) {
  .instructions {
    display: none;
  }
}
.medical-chart {
  text-align: center;
}

/* Ensure piechart descriptions are black */
.piechart .description h2 {
  color: black;
}

.piechart .description p {
  color: black;
}

/* Ensure all other infobox content is black */
.infobox .chart h3 {
  color: black;
}

.infobox .worldchart .description {
  color: black;
}

/* ===== YALE VISUAL BLOCKS ===== */
.yale-visual-block {
  position: absolute;
  background-color: #ff6900;
  z-index: 1001;
  pointer-events: auto;
  transition: ease-out 0.3s;
  cursor: pointer;
  /* Position above infoboxes */
  top: 20px;
  /* Size based on value/1000 - will be set via JavaScript */
  width: var(--block-size, 20px);
  height: var(--block-size, 20px);
  min-width: 6px;
  min-height: 6px;
  /* Explicitly remove any inherited border styling */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.yale-visual-block:hover {
  transform: scale(1.1);
  z-index: 1002;
}

.yale-visual-block::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #ff6900, #cf2e2e);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.yale-visual-block:hover::before {
  opacity: 1;
}

/* Ensure Yale wealth bar can accommodate visual blocks */
.yale .wealth {
  position: relative;
  overflow: visible;
}

/* Mobile adjustments for visual blocks */
@media (max-width: 450px) {
  .yale-visual-block {
    min-width: 6px;
    min-height: 6px;
    top: 10px;
  }
  
  .yale-visual-block:hover {
    transform: scale(1.05);
  }
}

/* ===== END YALE VISUAL BLOCKS ===== */

/* ===== YALE COUNTER STYLING ===== */
#yale-counter {
  position: fixed;
  top: calc(50vh + 5px); /* Position right below the Yale ruler (which is ~50vh) with 10px gap */
  left: 20px;
  background-color: transparent;
  color: #0066cc;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  z-index: 1000;
  box-shadow: none;
  border: none;
  display: none; /* Hidden by default, shown via JavaScript */
  min-width: 200px;
  text-align: left;
  pointer-events: none; /* Don't interfere with scrolling */
}

#yale-counter::before {
  content: 'Current Value: ';
  font-size: 14px;
  opacity: 0.8;
  display: block;
  margin-bottom: 2px;
}

/* Ensure Yale wealth bar has proper positioning for counter */
.yale .wealth {
  position: relative;
}

/* Mobile adjustments for counter */
@media (max-width: 450px) {
  #yale-counter {
    bottom: 100px; /* Adjust for mobile */
    left: 10px;
    right: auto;
    transform: none;
    font-size: 16px;
    min-width: auto;
  }
}

/* ===== MOBILE LAYOUT TRANSFORMATION ===== */
@media (max-width: 450px) {
  /* Reset base layout for mobile vertical scrolling */
  body, html {
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  /* Transform the wealth wrapper to vertical layout */
  .wealth-wrapper-outer {
    min-width: 100vw;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
  }
  
  /* Transform wealth row to vertical stack */
  .wealth-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 100vw;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 30px;
    padding: 30px 0;
  }
  
  /* Transform wealth wrappers to vertical blocks */
  .wealth-wrapper {
    margin: 0;
    padding: 0;
    width: 90vw;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  /* Transform wealth bars to vertical orientation */
  .wealth {
    width: 90vw !important;
    max-width: 90vw !important;
    min-width: 90vw !important;
    height: auto !important;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    position: relative;
  }
  
  /* Specific wealth bar transformations */
  .wealth.one-thousand {
    width: 90vw !important;
    height: 60px !important;
    min-height: 60px !important;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .wealth.median-wage {
    width: 90vw !important;
    height: 60px !important;
    min-height: 60px !important;
    background-color: #FF6B35;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .wealth.million {
    width: 90vw !important;
    height: 60px !important;
    min-height: 60px !important;
    background-color: #4CAF50;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .wealth.billion {
    width: 90vw !important;
    height: 60px !important;
    min-height: 60px !important;
    background-color: #03A9F4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Yale wealth bar - use device width as constant, calculate height */
  .yale .wealth {
    width: 90vw !important;
    height: calc(90vw * 0.4) !important; /* 40% of width for height */
    min-height: 200px;
    max-height: 400px;
    background-color: #286dc0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
  }
  
  /* Transform title screen for mobile */
  .title-screen {
    width: 100vw;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #ffffff;
    padding: 20px;
  }
  
  /* Update scroll instructions for mobile */
  .scroll-this-way {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    padding: 20px;
    font-size: 18px;
    text-align: center;
    background-image: url(img/arrow.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center 10px;
    animation: bouncy-arrow-mobile 3s infinite;
  }
  
  @keyframes bouncy-arrow-mobile {
    0% {transform: translateY(0px);}
    20% {transform: translateY(0px);}
    25% {transform: translateY(-10px);}
    30% {transform: translateY(0px);}
    35% {transform: translateY(-10px);}
    40% {transform: translateY(0px);}
    100% {transform: translateY(0px);}
  }
  
  /* Transform wealth titles for mobile */
  .wealth-title {
    position: relative;
    color: black;
    margin: 10px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    z-index: 10;
    padding: 8px 12px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 90vw;
    text-align: center;
    align-self: center;
  }
  
  /* Yale wealth titles white on mobile */
  .yale .wealth-title {
    color: white;
    background-color: rgba(40, 109, 192, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
  
  /* Transform infoboxes for mobile vertical layout */
  .infobox {
    position: relative !important;
    left: 5vw !important;
    width: 90vw !important;
    max-width: 90vw !important;
    margin-bottom: 20px !important;
    top: auto !important;
    display: block !important;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 15px;
  }
  
  .yale .infobox {
    position: relative !important;
    left: 5vw !important;
    width: 90vw !important;
    max-width: 90vw !important;
    margin-bottom: 20px !important;
    top: auto !important;
    display: block !important;
    background-color: rgba(255, 255, 255, 0.95);
    color: #333 !important;
    text-shadow: none !important;
  }
  
  /* Transform counter for mobile */
  #yale-counter {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(40, 109, 192, 0.95);
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    z-index: 1000;
    min-width: 200px;
    text-align: center;
    pointer-events: none;
  }
  
  /* Transform key/ruler for mobile */
  .key {
    position: relative;
    top: auto;
    margin: 10px auto;
    width: 125px;
    text-align: center;
  }
  
  .ruler {
    position: relative;
    background-position: 0 0;
    height: 30px;
    margin-top: 10px;
    width: 100%;
  }
  
  /* Transform growth bar for mobile */
  .yale-growth {
    position: relative;
    left: auto;
    top: auto;
    margin: 20px auto;
    width: 90vw;
  }
  
  .yale-growth .wealth {
    width: 90vw !important;
    height: 300px !important;
    background: #f5f5f5;
    border: 2px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  
  .yale-growth .growth-pixel-area {
    width: 95%;
    height: 200px;
    background-color: #f8f8f8;
    border: 2px solid #ddd;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Transform visual blocks for mobile */
  .yale-visual-block {
    position: absolute;
    min-width: 6px;
    min-height: 6px;
    top: 10px;
    background-color: #ff6900;
    z-index: 1001;
    pointer-events: auto;
    transition: ease-out 0.3s;
    cursor: pointer;
  }
  
  .yale-visual-block:hover {
    transform: scale(1.05);
  }
  
  /* Transform blocks for mobile */
  .block {
    width: 90vw !important;
    height: 60px !important;
    min-height: 60px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
  }
  
  /* Specific block transformations */
  .lifetime .block {
    background-color: blue;
  }
  
  .rent-annual .block {
    background-color: #ff4444;
  }
  
  .childcare-annual .block {
    background-color: #ff8800;
  }
  
  .groceries-annual .block {
    background-color: #44aa44;
  }
  
  .transportation-annual .block {
    background-color: #4444ff;
  }
  
  .retirement-annual .block {
    background-color: #8844ff;
  }
  
  .utilities-annual .block {
    background-color: #ffaa44;
  }
  
  .annual-total .block {
    background-color: #ff0000;
  }
  
  .yale-worker-wage .block {
    background-color: #00aa00;
    border: 2px solid #008800;
  }
  
  .yale-minimum-wage .block {
    background-color: #ff6900;
    border: 3px solid #cf2e2e;
  }
  
  .yale-housing-large .block {
    background-color: #ff6900;
    border: 3px solid #cf2e2e;
  }
  
  /* Transform square blocks for mobile */
  .square {
    width: 90vw !important;
    height: 60px !important;
    min-height: 60px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
  }
  
  /* Transform title block wrappers for mobile */
  .title-block-wrapper {
    width: 90vw !important;
    max-width: 90vw !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .title-block-wrapper .title {
    width: 90vw !important;
    max-width: 90vw !important;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
  }
  
  /* Transform title square wrappers for mobile */
  .title-square-wrapper {
    width: 90vw !important;
    max-width: 90vw !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .title-square-wrapper .title {
    width: 90vw !important;
    max-width: 90vw !important;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
  }
  
  /* Transform footer for mobile */
  .footer {
    padding: 20px 15px;
    font-size: 12px;
    margin-top: 30px;
  }
  
  /* Hide horizontal scroll instructions on mobile */
  .instructions {
    display: none;
  }
  
  /* Update scroll direction text */
  .scroll-this-way .desktop-scroll {
    display: none;
  }
  
  .scroll-this-way .mobile-scroll {
    display: block;
    margin-top: 40px;
  }
}

/* Desktop scroll text */
@media (min-width: 451px) {
  .scroll-this-way .desktop-scroll {
    display: block;
  }
  
  .scroll-this-way .mobile-scroll {
    display: none;
  }
}