/* ── Mobile responsive layer for CST note pages ── Activated by .mobile-view on , set early by an inline script that Flask injects into . iOS Safari's shrink-to-fit viewport expansion makes @media queries unreliable here — screen.width does reflect the device pixel width regardless. */ .sidebar-toggle { display: none; position: fixed; bottom: 1.25rem; left: 1.25rem; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: rgba(255,255,255,0.92); border: none; cursor: pointer; z-index: 600; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; box-shadow: 0 2px 16px rgba(0,0,0,0.28); transition: opacity 0.12s, transform 0.12s; font-family: sans-serif; } .sidebar-toggle:hover { opacity: 0.85; transform: scale(1.06); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 498; cursor: pointer; } .sidebar-overlay.open { display: block; } /* ── Mobile mode (driven by JS) ── */ html.mobile-view, html.mobile-view body { overflow-x: hidden; max-width: 100vw; } html.mobile-view .layout { grid-template-columns: 1fr !important; overflow-x: hidden; } html.mobile-view .sidebar { position: fixed !important; left: -290px; top: 46px !important; height: calc(100vh - 46px) !important; width: 280px !important; z-index: 499; transition: left 0.24s cubic-bezier(0.4, 0, 0.2, 1); } html.mobile-view .sidebar.open { left: 0 !important; } html.mobile-view .sidebar-toggle { display: flex; } html.mobile-view .main { padding: 1.4rem 1rem 4.5rem !important; max-width: 100% !important; overflow-x: hidden; word-break: break-word; overflow-wrap: break-word; } /* Base font */ html.mobile-view body { font-size: 13.5px !important; line-height: 1.62 !important; } /* Headings */ html.mobile-view .page-title { font-size: 1.55rem !important; line-height: 1.12 !important; margin-bottom: 0.3rem !important; } html.mobile-view .page-meta { font-size: 0.77rem !important; margin-bottom: 1.5rem !important; padding-bottom: 1rem !important; } html.mobile-view h2 { font-size: 1.22rem !important; margin-bottom: 0.85rem !important; padding-bottom: 0.35rem !important; } html.mobile-view h3 { font-size: 0.76rem !important; margin: 1.3rem 0 0.5rem !important; letter-spacing: 0.06em !important; } html.mobile-view h4 { font-size: 0.73rem !important; margin: 0.9rem 0 0.3rem !important; } /* Body text */ html.mobile-view p { font-size: 0.85rem !important; margin-bottom: 0.65rem !important; } html.mobile-view li { font-size: 0.85rem !important; margin-bottom: 0.2rem !important; } html.mobile-view dd { font-size: 0.85rem !important; } html.mobile-view dt { font-size: 0.76rem !important; margin-top: 0.5rem !important; } html.mobile-view ul, html.mobile-view ol { margin-left: 1.2rem !important; margin-bottom: 0.75rem !important; } /* Section spacing */ html.mobile-view .section { margin-bottom: 2.5rem !important; } /* Code */ html.mobile-view pre { font-size: 0.69rem !important; padding: 0.8rem 0.9rem !important; overflow-x: auto; -webkit-overflow-scrolling: touch; line-height: 1.6 !important; } html.mobile-view code { font-size: 0.73em !important; } /* Tables */ html.mobile-view table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.76rem !important; } html.mobile-view th { padding: 0.45rem 0.7rem !important; font-size: 0.67rem !important; } html.mobile-view td { padding: 0.4rem 0.7rem !important; } /* Cards & callouts */ html.mobile-view .card { padding: 0.85rem 0.95rem !important; margin: 0.65rem 0 !important; } html.mobile-view .card-title { font-size: 0.62rem !important; } html.mobile-view .callout { padding: 0.65rem 0.9rem !important; margin: 0.65rem 0 !important; } /* Two-col */ html.mobile-view .two-col { grid-template-columns: 1fr !important; gap: 0.65rem !important; } /* Definition lists */ html.mobile-view dl { margin-bottom: 0.75rem !important; }