/* ============================================================ PREDATOR HUD / QUANTANON -- mobile.css Mobile-responsive overrides. Preserves cyberpunk dark theme. Breakpoints: 768px (phone), 1024px (tablet) ============================================================ */ /* ───────── Mobile detection helper ───────── */ /* JS adds .is-mobile to ; CSS uses media queries as primary */ /* ───────── Hamburger menu button (injected by JS) ───────── */ .mobile-hamburger { display: none; background: none; border: 1px solid var(--q-border); border-radius: var(--radius); color: var(--q-cyan); font-size: 22px; width: 44px; height: 44px; cursor: pointer; place-items: center; transition: all var(--t-fast); flex-shrink: 0; } .mobile-hamburger:hover { border-color: var(--q-cyan); box-shadow: var(--q-cyan-glow); } /* ───────── Tablet breakpoint (<=1024px) ───────── */ @media (max-width: 1024px) { /* Grids collapse to 2 columns */ .q-grid--3 { grid-template-columns: repeat(2, 1fr); } /* Workspace side panel stacks */ .super-canvas { grid-template-columns: 1fr; } .super-side { position: static; } /* Monte Carlo summary */ .mc-summary { grid-template-columns: repeat(2, 1fr); } /* Results grid */ .results-grid { grid-template-columns: 1fr 1fr; } /* Route padding reduce */ .route { padding: var(--sp-4) var(--sp-5); } } /* ───────── Phone breakpoint (<=768px) ───────── */ @media (max-width: 768px) { /* ---------- Body layout: single column, allow scroll ---------- */ body { grid-template-columns: 1fr; grid-template-rows: auto; overflow: auto; overflow-x: hidden; height: auto; min-height: 100vh; } /* ---------- Sidebar: off-canvas drawer ---------- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; z-index: 200; transform: translateX(-100%); transition: transform 260ms ease; overflow-y: auto; /* Ensure sidebar has solid background so content below doesn't show through */ background: var(--q-bg, #07090d); border-right: 1px solid var(--q-border, rgba(0,255,200,0.15)); } .sidebar.is-open { transform: translateX(0); box-shadow: 4px 0 40px rgba(0, 0, 0, 0.8); } /* Backdrop when sidebar is open */ .mobile-backdrop { display: none; position: fixed; inset: 0; background: rgba(7, 9, 13, 0.75); z-index: 199; backdrop-filter: blur(3px); } .mobile-backdrop.is-visible { display: block; } /* Show hamburger */ .mobile-hamburger { display: inline-grid; } /* ---------- Topbar adjustments ---------- */ .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); } .topbar__title h1 { font-size: var(--fs-md); letter-spacing: 0.04em; } .topbar__title #routeIcon { font-size: var(--fs-lg); } .topbar__actions { gap: var(--sp-1); } /* Hide export button on mobile -- too wide */ #exportPineBtn { display: none; } /* ---------- Main area ---------- */ .main { grid-template-rows: var(--topbar-h) 1fr; min-height: 100vh; } /* ---------- Route containers ---------- */ .route { padding: var(--sp-3) var(--sp-3); overflow-x: hidden; } /* ---------- Typography: bump minimums for readability ---------- */ :root { --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 14px; --fs-lg: 16px; } /* ---------- Page headers ---------- */ .q-page-header { padding: var(--sp-4) 0 var(--sp-5); margin-bottom: var(--sp-4); } .q-page-header__title { font-size: var(--fs-2xl); } .q-page-header__subtitle { font-size: var(--fs-sm); } /* ---------- All grids: single column ---------- */ .q-grid--2, .q-grid--3, .q-grid--4 { grid-template-columns: 1fr; } .calc-grid, .results-grid, .super-paths { grid-template-columns: 1fr; } /* Workspace stacks */ .workspace { grid-template-columns: 1fr; } .workspace__side { position: static; } /* Monte Carlo layout */ .mc-layout { grid-template-columns: 1fr; } .mc-summary { grid-template-columns: 1fr 1fr; } /* Advisor: stack */ .advisor { grid-template-columns: 1fr; height: auto; } .advisor__menu { max-height: 200px; overflow-y: auto; } /* ---------- Cards: full width, tighter padding ---------- */ .q-card { padding: var(--sp-3); border-radius: var(--radius); } /* ---------- Buttons: touch-friendly (44px min tap target) ---------- */ .q-btn { min-height: 44px; min-width: 44px; padding: 10px 16px; font-size: var(--fs-sm); } .q-btn--big-cta { padding: 14px 20px; font-size: var(--fs-md); width: 100%; } /* Nav items: larger touch targets */ .nav__item { padding: 12px 14px; min-height: 44px; font-size: var(--fs-base); } /* Chips: bigger touch targets */ .q-chip { padding: 10px 14px; font-size: var(--fs-sm); min-height: 44px; } /* ---------- Tables: horizontal scroll ---------- */ .q-tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .q-tbl th, .q-tbl td { padding: 8px 12px; font-size: var(--fs-sm); } /* Compare table scroll */ .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------- Modal: full-width on phone ---------- */ .modal__panel { max-width: 100%; width: calc(100% - 16px); max-height: 85vh; border-radius: var(--radius); } .modal__body { padding: var(--sp-4); } .modal__close { width: 36px; height: 36px; font-size: 24px; } /* ---------- Toast: full width bottom ---------- */ .toast-wrap { left: 8px; right: 8px; bottom: 8px; } .toast { max-width: 100%; } /* ---------- Stat blocks ---------- */ .q-stat__value { font-size: var(--fs-lg); } /* ---------- Form inputs: full width, readable ---------- */ input[type="text"], input[type="number"], input[type="email"], input[type="url"], select, textarea { font-size: 16px !important; /* prevents iOS zoom on focus */ min-height: 44px; width: 100%; box-sizing: border-box; } /* ---------- Sections: collapsible on mobile ---------- */ .q-section__head { cursor: pointer; min-height: 44px; } /* ---------- Stepper / progress: compact ---------- */ .q-stepper { flex-wrap: wrap; gap: 2px; } /* ---------- Pine preview: scroll ---------- */ .pine-preview { overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 11px; } /* ---------- Tour card: full width on phone ---------- */ .q-tour-card { width: calc(100vw - 24px) !important; left: 12px !important; right: 12px !important; max-height: 80vh; } .q-tour-card__title { font-size: var(--fs-xl); } /* ---------- Chart containers: prevent overflow ---------- */ .mc-chart-wrap canvas, canvas { max-width: 100%; } /* ---------- Row data: stack on very small screens ---------- */ .q-row { padding: 8px var(--sp-3); gap: var(--sp-2); } /* ---------- Sidebar footer context card ---------- */ .sidebar__footer .q-card { padding: var(--sp-3); } .sidebar__footer .q-btn { min-height: 40px; } /* ---------- Scrollbar: thinner on mobile ---------- */ *::-webkit-scrollbar { width: 3px; height: 3px; } /* ---------- Chip groups: scroll horizontal if too many ---------- */ .q-chip-group { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } } /* ───────── Small phone (<=400px) ───────── */ @media (max-width: 400px) { :root { --fs-base: 14px; --fs-md: 14px; } .q-page-header__title { font-size: var(--fs-xl); letter-spacing: 0.04em; } .q-btn--big-cta { padding: 12px 16px; letter-spacing: 0.06em; } .mc-summary { grid-template-columns: 1fr; } .q-stat__value { font-size: var(--fs-md); } /* Stack q-row vertically on very small screens */ .q-row { flex-direction: column; align-items: flex-start; gap: 2px; } .q-row__value { align-self: flex-end; } }