/** * window-containers.css — CSS Container Query layer for OS windows * * Supplements existing @media queries with @container queries so pages * adapt to their actual OS window size, not just the browser viewport. * * window-responsive.js sets `container-type: inline-size` on when * the page loads inside an iframe, enabling these rules. On standalone * pages these rules are inert (no container context). * * Include on any page: * * * Uses the hy-compact / hy-medium / hy-wide classes set by * window-responsive.js as a fallback for browsers without @container. */ /* ═══════════════════════════════════════════════════════════════════ §1 CLASS-BASED FALLBACKS (all browsers) Applied by window-responsive.js based on postMessage width. ═══════════════════════════════════════════════════════════════════ */ /* ── Compact (<700px): single-column, hide secondary panels ── */ .hy-compact .hy-sidebar, .hy-compact .sidebar, .hy-compact [class*="sidebar"], .hy-compact .side-panel, .hy-compact .right-panel { display: none !important; } .hy-compact .hy-mobile-header { display: flex !important; } .hy-compact .main-content, .hy-compact .content-area, .hy-compact [class*="main-col"], .hy-compact [class*="content-col"] { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* Stack multi-column grids */ .hy-compact .grid-2col, .hy-compact .grid-3col, .hy-compact [class*="grid-cols-2"], .hy-compact [class*="grid-cols-3"] { grid-template-columns: 1fr !important; } /* Scale down paddings */ .hy-compact .page-wrap, .hy-compact .page-content, .hy-compact [class*="page-inner"] { padding-left: 8px !important; padding-right: 8px !important; } /* ── Medium (700–1000px): compact sidebars, tighter spacing ── */ .hy-medium .hy-sidebar, .hy-medium .sidebar, .hy-medium [class*="sidebar"] { width: 200px !important; min-width: 200px !important; max-width: 200px !important; } .hy-medium .grid-3col, .hy-medium [class*="grid-cols-3"] { grid-template-columns: 1fr 1fr !important; } /* ═══════════════════════════════════════════════════════════════════ §2 CSS CONTAINER QUERIES (modern browsers) These fire based on the actual container width when the page is loaded inside an OS window iframe. ═══════════════════════════════════════════════════════════════════ */ @supports (container-type: inline-size) { /* ── ≤800px: collapse sidebars to drawers ── */ @container (max-width: 800px) { .sidebar, [class*="sidebar"]:not(.hy-drawer), .side-panel:not(.hy-drawer) { position: fixed; left: -100%; width: 280px; max-width: 85vw; top: 0; bottom: 0; z-index: 8000; transition: left 0.3s ease; } .hy-mobile-header { display: flex !important; } .main-content, .content-area, [class*="main-col"], [class*="content-col"] { margin-left: 0 !important; width: 100% !important; } } /* ── ≤600px: single-column everything ── */ @container (max-width: 600px) { .grid-2col, .grid-3col, [class*="grid-cols-2"], [class*="grid-cols-3"], [class*="grid-cols-4"] { grid-template-columns: 1fr !important; } /* Compact card layouts */ .card-grid, .gene-card-grid, [class*="card-grid"] { grid-template-columns: 1fr !important; } /* Reduce table horizontal overflow */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Stack flex rows */ .flex-row, [class*="flex-row"], .toolbar-row { flex-direction: column !important; align-items: stretch !important; } } /* ── ≤400px: ultra-compact (absolute minimum) ── */ @container (max-width: 400px) { /* Aggressive font scaling */ h1 { font-size: 1.25rem !important; } h2 { font-size: 1.1rem !important; } h3 { font-size: 1rem !important; } /* Minimal padding */ .page-wrap, .page-content, [class*="page-inner"] { padding: 4px !important; } /* Hide non-essential UI chrome */ .breadcrumb, .page-subtitle, [class*="description-text"] { display: none !important; } } } /* ═══════════════════════════════════════════════════════════════════ §3 SMOOTH TRANSITIONS for layout shifts ═══════════════════════════════════════════════════════════════════ */ .sidebar, [class*="sidebar"], .side-panel, .main-content, .content-area { transition: width 0.3s ease, margin 0.3s ease, transform 0.3s ease; }