/* ============================================================================ responsive.css — shared mobile/responsive layer for index.html + client.html ---------------------------------------------------------------------------- Mirrors the engine.js shared-asset pattern: ONE file, linked by both pages, loaded LAST in so it wins the cascade. It is purely additive and lives almost entirely inside @media queries, so it cannot affect the desktop layout. Why !important here is justified (and scoped): the app is a desktop-first, inline-style-heavy single-file app. Overriding its grids/типography from an external sheet — especially inline style="" attributes — requires !important. It is confined to mobile/tablet breakpoints, so desktop specificity is intact. Benchmarks targeted (UI/UX Pro Max): · no horizontal scroll on mobile · 44px minimum touch targets · readable body text (≥15px mobile) · visible focus states · reflow at 375 / 768 / 1024 / 1440 · prefers-reduced-motion respected ========================================================================== */ /* ---- breakpoint scale (documentation only; CSS can't use custom-prop in @media) ---- --bp-mobile: 640px --bp-tablet: 960px --bp-desktop: 1200px */ /* ── Global safety (all viewports): never let content exceed the viewport ── */ html, body { max-width: 100%; } body { overflow-x: hidden; } /* belt-and-braces vs stray wide children */ img, canvas, svg, video { max-width: 100%; height: auto; } /* Keyboard focus visibility (a11y) — applies everywhere, harmless on desktop */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible, .tab-btn:focus-visible { outline: 2px solid var(--coral, #B86B52); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ── Tablet (≤ 960px): drop the sidebar, thin the densest heat grids ── */ @media (max-width: 960px) { .main-grid { grid-template-columns: 1fr !important; } .hero-heatmap { grid-template-columns: repeat(6, 1fr) !important; } .house-lens-grid { grid-template-columns: repeat(3, 1fr) !important; } .container { padding-left: 14px; padding-right: 14px; } } /* ── Mobile (≤ 640px): the real work ───────────────────────────────────── */ @media (max-width: 640px) { /* Typography uplift — lift the page toward the readable floor without destroying data density. Body to 15px; the named small-text classes to a 12–13px floor. (The deeper px→rem fluid-type refactor lands separately.) */ body { font-size: 15px !important; line-height: 1.6 !important; } .subtitle, .abu-body, .abu-card .abu-body, .voter-expand-body, .cc-narrative, .voter-detail, .detail-note, .footer, .label { font-size: 12px !important; line-height: 1.55 !important; } h1 { font-size: 20px !important; line-height: 1.25 !important; } h2 { font-size: 17px !important; } h3 { font-size: 15px !important; } /* Tighten the page frame */ .container { padding: 12px 12px 32px !important; } .header-top { flex-direction: column; align-items: flex-start !important; gap: 10px; } .header-top > div[style*="text-align:right"], .header-top > div:last-child { text-align: left !important; } /* Tab bar → horizontal scroll strip (no ugly wrap), 44px touch targets */ .tab-bar { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { flex: 0 0 auto !important; min-height: 44px; padding: 10px 16px !important; font-size: 12px !important; white-space: nowrap; scroll-snap-align: start; } /* Collapse every multi-column grid to 1–2 columns */ .main-grid, .planet-grid, .voter-grid, .upcoming-grid, .dob-row, .dob-row-time { grid-template-columns: 1fr !important; } .kpi-strip, .house-lens-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Heat grids stay multi-cell but shrink so they don't overflow */ .heatmap-grid, .hero-heatmap { grid-template-columns: repeat(6, 1fr) !important; } /* Wide fixed-column rows / tables / charts → scroll instead of overflowing */ .sr-planet-row { grid-template-columns: repeat(7, minmax(40px, 1fr)) !important; } table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .chart-wrap, .chart-container, canvas { max-width: 100% !important; } /* Touch targets for the remaining interactive controls */ .period-mode-btn, .house-tab-btn, .btn-reset, select, button, input[type="date"], input[type="text"], input[type="number"] { min-height: 44px; } select, input { font-size: 16px !important; } /* ≥16px stops iOS auto-zoom on focus */ /* Form controls must never exceed the column — a