/* =====================================================
   TALEEM — Single Public Stylesheet

  /* -------------------------------
     Global Page Reset
     ------------------------------- */
  
     html,body {
      height: 100%;
       overflow: hidden;
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      background: var(--backgroundColor, #0b1220);
      color: var(--primaryColor, #e6e9ff);
    }
    
    #app {
      position: relative;
      width: 100vw;
      min-height: 100vh;
      overflow: hidden;
    }
    
    /* -------------------------------
       Browser / Player Layers
       ------------------------------- */
    .taleem-browser-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center;
    }
    
    .taleem-browser-slide {
      position: relative;
      z-index: 1;
    }
    
    /* -------------------------------
       Base Slide Grammar
       ------------------------------- */
    .slide {
      height: 100vh;
      box-sizing: border-box;
    
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    
      padding: 64px 80px;
      gap: 32px;
    
      overflow: hidden;
      background: transparent;
      color: var(--primaryColor, #e6e9ff);
    
      font-size: 2.4rem;
      line-height: 1.6;
      letter-spacing: 0.01em;
      text-align: center;
    }
    
    /* -------------------------------
       Global Image Safety
       ------------------------------- */
    .slide img {
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
      display: block;
    }
    
    /* -------------------------------
       Headings
       ------------------------------- */
    .slide h1 {
      margin: 0;
      letter-spacing: -0.015em;
    }
    
    /* -------------------------------
       Slide Types
       ------------------------------- */
    .slide.titleSlide h1 {
      font-size: 5.6rem;
      font-weight: 700;
      line-height: 1.2;
    }
    
    .slide.titleAndSubtitle h1 {
      font-size: 5.8rem;
      font-weight: 700;
    }
    
    .slide.titleAndSubtitle h2 {
      font-size: 3.8rem;
      font-weight: 400;
      opacity: 0.8;
      margin: 0;
    }
    
    .slide.titleAndPara h1 {
      font-size: 4.8rem;
      font-weight: 600;
    }
    
    .slide.titleAndPara p {
      font-size: 3rem;
      max-width: 70ch;
      opacity: 0.9;
      margin: 0;
    }
    
    /* -------------------------------
       Bullet List
       ------------------------------- */
    .slide.bulletList ul {
      list-style: disc;
      padding-left: 2rem;
      margin: 0;
    }
    
    .slide.bulletList li {
      font-size: 3.6rem;
      margin-bottom: 1rem;
      text-align: left;
      font-weight: 500;
    }
    
    /* -------------------------------
       Image Variants
       ------------------------------- */
    .slide.imageSlide {
      padding: 0;
    }
    
    .slide.imageSlide img {
      object-fit: contain;
    }
    
    .slide.imageWithTitle {
      position: relative;
      padding: 48px;
    }
    
    .slide.imageWithTitle img {
      height: calc(100vh - 96px);
      border-radius: 12px;
    }
    
    .slide.imageWithTitle h1 {
      position: absolute;
      bottom: 64px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 4.6rem;
      background: rgba(0, 0, 0, 0.45);
      padding: 0.4em 0.8em;
      border-radius: 6px;
    }
    
    .slide.imageWithCaption {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 32px;
      height: 100vh;
      overflow: hidden;
    }
    
    .slide.imageWithCaption img {
      max-height: 55vh;        /* reduce slightly */
      object-fit: contain;
      flex-shrink: 0;
    }
    
    .slide.imageWithCaption p {
      max-height: 20vh;        /* hard cap text */
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* -------------------------------
   Two Column Text
   ------------------------------- */


   .slide.twoColumnText {
    flex-direction: row;
    justify-content: center;   /* center the columns block */
    align-items: center;
    gap: 64px;
  }
  
  .slide.twoColumnText > div {
    flex: 1;
    max-width: 520px;          /* keeps columns visually centered */
  }
  

    /* QUOTE SLIDE */
    .slide.quoteSlide {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 32px;
      height: 100vh;
      overflow: hidden;
    }
    
    .slide.quoteSlide blockquote {
      max-height: 60vh;
      overflow: hidden;
    }
    
    .slide.quoteSlide cite {
      flex-shrink: 0;
    }
    
    /* -------------------------------
       Quote Slide
       ------------------------------- */
    .slide.quoteSlide blockquote {
      font-size: 3.8rem;
      font-style: italic;
      max-width: 60ch;
    }
    
    .slide.quoteSlide cite {
      font-size: 2.4rem;
      opacity: 0.75;
    }
    
    /* -------------------------------
       Big Number
       ------------------------------- */
    .slide.bigNumber .number {
      font-size: 9rem;
      font-weight: 700;
    }
    
    /* -------------------------------
       Fill Image (Full Bleed)
       ------------------------------- */
    .slide.fillImage {
      padding: 0;
      height: 100vh;
      display: block;
    }
    
    .slide.fillImage img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* -------------------------------
       Demo / Player UI (Optional)
       ------------------------------- */
    #timebar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 32px;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      z-index: 10;
    }
    

    /* -------------------------------
   Image + Bullets (Side by Side)
   ------------------------------- */

.slide.imageRightBulletsLeft,
.slide.imageLeftBulletsRight {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  text-align: left;
}

/* image on right */
.slide.imageRightBulletsLeft img {
  order: 2;
}
/* -------------------------------
   Table Slide
   ------------------------------- */

   .slide.table {
    display: flex;
    justify-content: center;
    align-items: center;
  
    width: 100%;
    height: 100vh;
  
    padding: 64px 80px;
    box-sizing: border-box;
  }
  
  /* actual table */
  .slide.table table {
    border-collapse: collapse;
    width: 100%;
    max-width: 1200px;
  
    font-size: 2.8rem;
    line-height: 1.4;
    text-align: center;
  
    color: var(--primaryColor, #e6e9ff);
  }
  
  /* header cells (title row) */
  .slide.table thead th {
    font-weight: 700; /* title row bold */
    padding: 20px 24px;
  
    border: 2px solid rgba(255, 255, 255, 0.35);
  }
  
  /* body cells */
  .slide.table tbody td {
    padding: 20px 24px;
  
    border: 2px solid rgba(255, 255, 255, 0.25);
  }
/* hide empty table header row */
.slide.table thead th:empty {
  display: none;
}

.slide.table thead tr:has(th:empty) {
  display: none;
}
  

/* =====================================================
   EQ — Final visual behavior
   ===================================================== */

/* EQ should grow from TOP, not vertical center */
.slide.eq.imageRightBulletsLeft {
  align-items: flex-start;
}

/* ---------- EQ: equation lines as table rows ---------- */

.slide.eq.imageRightBulletsLeft .eq-lines {
  flex: 1;
  list-style: none;          /* remove bullet visuals */
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  gap: 0;
}

.slide.eq.imageRightBulletsLeft .eq-lines li {
  padding: 14px 18px;
  font-size: 2.6rem;
  line-height: 1.45;

  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);

  transition: background 0.25s ease, color 0.25s ease;
}

/* selected (latest) line */
.slide.eq.imageRightBulletsLeft .eq-lines li:last-child {
  background: rgba(245, 197, 66, 0.18); /* soft yellow */
  color: #ffd7a3;                      /* warm / reddish */
  font-weight: 600;
}

/* ---------- RIGHT: fixed explanation panel ---------- */

.slide.eq.imageRightBulletsLeft .eq-side-panel {
  flex: 1;
  height: 75vh;               /* FIXED height → no shaking */
  overflow: hidden;           /* contain layout */

  padding: 28px 32px;

  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);

  display: flex;
  flex-direction: column;
}

/* ---------- Side panel items ---------- */

.slide.eq.imageRightBulletsLeft .eq-explain-item {
  font-size: 1.6rem;
  line-height: 1.75;
  text-align:justify;

  word-wrap: break-word;
  overflow-wrap: break-word;

  background: rgba(255, 255, 255, 0.06);
  padding: 14px 18px;
  border-radius: 12px;

  
}

/* ---------- Side panel image ---------- */

.slide.eq.imageRightBulletsLeft .eq-explain-image img {
  width: 70%;
  margin: 0 auto;            /* center image */
  display: block;

  border-radius: 12px;
}

/* =====================================================
   Bar Chart Slide
   ===================================================== */

   .slide.barChart {
    justify-content: center;
    align-items: center;
    text-align: left;
  }
  
  .slide.barChart .bar-chart {
    width: 100%;
    max-width: 900px;
  
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  
  /* one bar row */
  .slide.barChart .bar-row {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  /* label on the left */
  .slide.barChart .bar-label {
    width: 220px;
    font-size: 2.2rem;
    opacity: 0.9;
    flex-shrink: 0;
  }
  
  /* bar background */
  .slide.barChart .bar-track {
    flex: 1;
    height: 26px;
  
    background: rgba(255, 255, 255, 0.15);
    border-radius: 13px;
    overflow: hidden;
  }
  
  /* actual bar */
  .slide.barChart .bar-fill {
    height: 100%;
    width: 0;
  
    background: #ff9900;
    border-radius: 13px;
  }
  
  /* numeric value on right */
  .slide.barChart .bar-value {
    width: 48px;
    text-align: right;
    font-size: 2rem;
    opacity: 0.85;
  }

  
  /* -------------------------------
   Progress Bar Slide
   ------------------------------- */

.slide.progressbar {
  justify-content: center;
  align-items: center;
  text-align: left;
}

.slide.progressbar .progressbar-item {
  width: 100%;
  max-width: 900px;

  display: flex;
  flex-direction: column;
  gap: 14px;

  margin-bottom: 28px;
}

.slide.progressbar .progressbar-label {
  font-size: 2.4rem;
  font-weight: 600;
  opacity: 0.9;
}

.slide.progressbar .progressbar-track {
  width: 100%;
  height: 28px;

  background: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  overflow: hidden;
}

.slide.progressbar .progressbar-fill {
  height: 100%;
  width: 0;

  background: #ff9900;
  border-radius: 14px;

  transition: width 0.6s ease;
}

/* -------------------------------
   Key Ideas Slide (Corner Words / 4 Quadrants)
   ------------------------------- */

   .slide.keyIdeasSlide {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 0;
  }
  
  /* base idea block */
  .slide.keyIdeasSlide .key-idea {
    position: absolute;
    width: 45%;
    height: 45%;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  
    font-size: 4.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
  }
  
  /* icon */
  .slide.keyIdeasSlide .key-idea .icon {
    font-size: 5.2rem;
    line-height: 1;
  }
  
  /* label */
  .slide.keyIdeasSlide .key-idea .label {
    font-size: 3.6rem;
    font-weight: 600;
  }
  
  /* quadrants */
  .slide.keyIdeasSlide .key-idea:nth-child(1) {
    top: 0;
    left: 0;
  }
  
  .slide.keyIdeasSlide .key-idea:nth-child(2) {
    top: 0;
    right: 0;
  }
  
  .slide.keyIdeasSlide .key-idea:nth-child(3) {
    bottom: 0;
    left: 0;
  }
  
  .slide.keyIdeasSlide .key-idea:nth-child(4) {
    bottom: 0;
    right: 0;
  }