/* Mobile-first search modal */
#searchModal .search-container {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  padding: 1rem !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media (min-width: 640px) {
  #searchModal .search-container {
    width: auto !important;
    height: auto !important;
    max-width: 28rem !important;
    padding: 1.5rem !important;
    margin: auto !important;
    border-radius: 1rem !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  #searchModal:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
  }
}

/* Ensure all children respect container width */
#searchModal * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile-first search results modal */
#searchResultsModal .results-container {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0.75rem !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

@media (min-width: 640px) {
  #searchResultsModal .results-container {
    width: 90vw !important;
    height: 90vh !important;
    max-width: 48rem !important;
    padding: 1rem !important;
    margin: auto !important;
    border-radius: 1rem !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
  }
  #searchResultsModal:not(.hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
  }
}

/* Ensure all children respect container width */
#searchResultsModal * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix grid layout on mobile */
#searchResultsModal .grid {
  gap: 0.5rem !important;
}

@media (max-width: 639px) {
  #searchResultsModal .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #searchResultsModal .md\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile-first practice modal */
#practiceModal .practice-container {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important; /* dynamic viewport: 100vh hides the bottom action row behind the mobile URL bar (prod bug 2026-08-19) */
  max-width: 100vw !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

@media (min-width: 640px) {
  #practiceModal .practice-container {
    width: 100% !important;
    height: 90vh !important;
    max-width: 32rem !important;
    padding: 1rem !important;
    margin: auto !important;
    border-radius: 1rem !important;
  }
}

@media (min-width: 1024px) {
  #practiceModal .practice-container {
    max-width: 56rem !important;
    height: auto !important;
    max-height: 85vh !important;
    padding: 1.5rem !important;
    border-radius: 1.5rem !important;
  }
}

/* Ensure all content respects container width */
#practiceModal * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Show mobile layout by default, hide on desktop */
#mobileTopicLayout {
  display: flex !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
}

@media (min-width: 768px) {
  #mobileTopicLayout {
    display: none !important;
  }
}

/* Hide desktop layout by default, show on desktop */
#desktopTopicLayout {
  display: none !important;
}

@media (min-width: 768px) {
  #desktopTopicLayout {
    display: flex !important;
  }
}

/* Ensure all children respect container width */
#mobileTopicLayout * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Blisk and browser specific fixes */
@supports (-webkit-touch-callout: none) {
  #mobileTopicLayout {
    height: 100vh !important;
    min-height: 100vh !important;
  }
}

/* Force mobile layout to start from absolute top */
#topicSelectionModal.show-mobile #mobileTopicLayout {
  transform: translateY(0) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure content doesn't start scrolled */
#mobileTopicLayout .flex-1 {
  scroll-behavior: auto !important;
}