/* Instruction modal enhancements (namespaced under app "home") */

/* Smooth scrolling inside the scrollable modal container */
#instructionModalContent {
  scroll-behavior: smooth;
}

/* Sticky TOC inside the modal */
#instructionToc.instruction-toc {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Ensure section headers don't get hidden behind sticky TOC */
.instruction-section-title {
  scroll-margin-top: 72px; /* adjust if header/padding changes */
}

/* Better focus visibility for accessibility */
#instructionToc a:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Optional: compact list layout within TOC on small screens */
@media (max-width: 520px) {
  #instructionToc ul {
    gap: 8px 12px;
  }
}