/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================
   
   Mobile breakpoint styles for various components.
   
   NOTE: This file contains responsive rules from the unmapped section.
   Additional responsive styles may exist in other sections of the original
   style.css and should be consolidated here eventually.
   
   ============================================================================ */

/* ============================================================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================================================ */

@media (max-width: 768px) {
    /* Document viewer layout */
    .viewer-main {
        flex-direction: column;
    }
    
    /* Table of contents sidebar */
    .toc-sidebar {
        width: 100%;
        max-height: 300px;
    }
    
    /* Document grid */
    .document-grid {
        grid-template-columns: 1fr;
    }
    
    /* Page controls */
    .page-controls {
        flex-direction: column;
    }
}