@media (max-width: 1340px) {
  .crx-workspace-grid {
    grid-template-columns: 1fr !important;
  }
}


@media (max-width: 991px) {
  .crx-app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    z-index: 1000;
  }
  
  .crx-app-sidebar.crx-sidebar-active {
    transform: translateX(0);
  }
  
  .crx-mobile-header {
    display: flex !important;
    padding: 1rem 1.5rem;
    background: #16233b;
    justify-content: space-between;
    align-items: center;
  }
  
  .crx-workspace-grid {
    padding: 1.5rem !important;
  }
}


@media (max-width: 768px) {
  
  /* Keep content images fluid WITHOUT clobbering deliberately-sized UI
     images (logos, badges, avatars, icons). No !important so explicit
     class/inline sizes still win. */
  img:not([class*="logo"]):not([class*="badge"]):not([class*="avatar"]):not([class*="icon"]):not([class*="emoji"]) {
    max-width: 100%;
    height: auto;
  }
  
  .crx-logo-img, .crx-centered-logo, .crx-brand img {
    height: 55px !important;
  }
  
  button, .crx-btn, a[style*="padding: 0.75rem"] {
    min-height: 44px;
  }

  /* ---- Tame oversized headings on small screens ----
     Covers both class-based titles and inline font-size styles so big
     serif headers shrink to a comfortable, readable size on phones. */
  .crx-hub-title { font-size: 1.7rem !important; }
  .crx-panel-title { font-size: 1.4rem !important; }
  .crx-hub-subtitle { font-size: 1rem !important; }
  h1[style*="font-size: 2.5rem"],
  h1[style*="font-size: 2.4rem"],
  h1[style*="font-size: 2.2rem"],
  h2[style*="font-size: 2.5rem"],
  h2[style*="font-size: 2.2rem"] { font-size: 1.7rem !important; }
  h1[style*="font-size: 2rem"],
  h2[style*="font-size: 2rem"],
  h3[style*="font-size: 2rem"] { font-size: 1.4rem !important; }
  [style*="font-size: 3.5rem"] { font-size: 2.4rem !important; }
  [style*="font-size: 3rem"]:not(.fas):not(.far):not(.fab) { font-size: 2rem !important; }

  /* ---- Collapse dense multi-column grids so cards aren't cramped ---- */
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  .crx-premium-banner {
    flex-direction: column !important;
    padding: 1.5rem !important;
    gap: 1.5rem !important;
  }
  .crx-premium-banner > div:first-child {
    max-width: 100% !important;
  }
  .crx-premium-banner h1 {
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
  }
  .crx-premium-banner p {
    font-size: 0.85rem !important;
  }
  .crx-premium-banner a, .crx-premium-banner button {
    font-size: 0.75rem !important;
    padding: 0.6rem 1.2rem !important;
  }
  .crx-premium-banner span[id="overallProgressText"] {
    font-size: 1.1rem !important;
  }
  .crx-premium-banner div[id="bannerStreakText"], .crx-premium-banner div[id="bannerScoreText"] {
    font-size: 0.75rem !important;
  }
  .crx-premium-banner > div:last-child {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 1.2rem !important;
    padding: 1.2rem !important;
  }
  
  .crx-my-classes-grid, div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .crx-my-classes-grid > :first-child, div[style*="grid-template-columns: repeat(3"] > :first-child {
    grid-column: 1 / -1;
  }
  .crx-my-classes-grid.crx-two-cards > :first-child {
    grid-column: auto !important;
  }
  
  .crx-journey-widget {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.5rem !important;
  }
  .crx-journey-stats {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  div[style*="justify-content: space-between"][style*="flex-wrap: wrap"] > a {
    width: 100% !important;
    text-align: center !important;
  }
  
  header[style*="padding: 120px"] {
    padding: 90px 1.5rem 2rem !important;
  }
  header[style*="padding: 120px"] h1 {
    font-size: 2rem !important;
  }
  
  .crx-split-layout {
    grid-template-columns: 1fr !important;
    padding: 1.5rem !important;
    gap: 1.5rem !important;
  }
  
  .crx-hub-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  
  .crx-hub-grid {
    grid-template-columns: 1fr !important;
  }
  
  #progressDropdownContainer {
    width: calc(100vw - 2rem) !important;
    left: 1rem !important;
    right: 1rem !important;
    padding: 1.2rem !important;
  }
  #progressDropdownContainer > div:nth-child(2) {
    gap: 0.6rem !important;
  }
  #progressDropdownContainer > div:nth-child(2) > div {
    padding: 0.8rem 0.5rem !important;
  }
  #progressDropdownContainer > div:nth-child(2) > div > div:first-child {
    width: 45px !important;
    height: 45px !important;
    margin-bottom: 0.5rem !important;
  }
  #progressDropdownContainer > div:nth-child(2) > div > div:first-child > div {
    width: 35px !important;
    height: 35px !important;
  }
  #progressDropdownContainer h2 {
    font-size: 1.2rem !important;
    margin-bottom: 0 !important;
  }
  #progressDropdownContainer h4 {
    font-size: 0.85rem !important;
  }
  #progressDropdownContainer > div:first-child {
    margin-bottom: 1rem !important;
  }

  .crx-quiz-container {
    padding: 1rem !important;
  }
  
  .crx-quiz-card {
    padding: 1.5rem !important;
  }
  
  .crx-matching-columns {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  .crx-matching-column {
    width: 100% !important;
  }

  .crx-quiz-context {
    padding: 1rem !important;
  }
  
  .crx-quiz-footer {
    flex-direction: column-reverse !important;
    gap: 1rem !important;
  }
  .crx-quiz-footer .crx-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .crx-avatar-container {
    width: 100% !important;
    height: auto !important;
    max-width: 300px !important;
    aspect-ratio: 1/1 !important;
  }
  
  .crx-tutor-controls {
    padding: 0 1.5rem !important;
    width: 100% !important;
  }
  
  section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  table { width: 100%; }
  table td, table th { white-space: normal !important; word-break: break-word; }

  /* Sit above the bottom-right chatbot button, well clear of the
     top-right hamburger menu */
  #darkModeToggle {
    top: auto !important;
    bottom: 6rem !important;
    right: 1rem !important;
  }
}


@media (max-width: 480px) {
  
  header[style*="padding: 120px"], 
  header[style*="padding: 90px"] {
    padding: 70px 1rem 1.5rem !important;
  }
  header[style*="padding: 120px"] h1 {
    font-size: 1.75rem !important;
  }
  
  .crx-workspace-grid,
  .crx-split-layout {
    padding: 1rem !important;
  }
  
  .crx-premium-banner,
  .crx-journey-widget,
  .crx-quiz-card {
    padding: 1.25rem !important;
  }
  
  .crx-premium-banner h1 {
    font-size: 1.6rem !important;
  }

  /* Headings a notch smaller again on the smallest phones */
  .crx-hub-title { font-size: 1.5rem !important; }
  .crx-panel-title { font-size: 1.25rem !important; }
  h1[style*="font-size: 2.5rem"],
  h1[style*="font-size: 2.4rem"],
  h1[style*="font-size: 2.2rem"],
  h2[style*="font-size: 2.5rem"] { font-size: 1.5rem !important; }
  h1[style*="font-size: 2rem"],
  h2[style*="font-size: 2rem"],
  h3[style*="font-size: 2rem"] { font-size: 1.3rem !important; }

  p[style*="font-size: 0.9rem"],
  p[style*="font-size: 0.95rem"] {
    font-size: 0.85rem !important;
  }
  
  #progressDropdownContainer {
    width: calc(100vw - 1rem) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
  }
  
  .crx-quiz-option {
    padding: 1rem !important;
  }
}