/* MarketFlow — site-wide responsive layer. Linked LAST in each page's so it overrides the page's inline CSS. Targets the shared structural classes (header / nav / main / card / table / grids) + the graph workspace, so phones and tablets get a usable layout without per-page work. */ html { -webkit-text-size-adjust: 100%; } img, svg, canvas, video { max-width: 100%; height: auto; } /* ============================ tablet & large phone (<= 820px) ============================ */ @media (max-width: 820px) { /* Header: stack the page title above a single horizontally-scrollable nav row (8 pills would otherwise wrap into 3-4 stacked rows and eat the screen). */ .header-inner { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; padding: 11px 14px !important; } header h1, .header-inner > h1 { font-size: 16px !important; white-space: normal !important; } .nav-links { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px !important; padding-bottom: 3px; scrollbar-width: none; -ms-overflow-style: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { flex: 0 0 auto; padding: 7px 12px !important; font-size: 12.5px !important; } main { padding: 14px !important; } .card { padding: 14px !important; } /* wide tables scroll horizontally inside their card / a .tscroll wrapper — never the whole page */ .card, .tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card table, .tscroll table { white-space: nowrap; } /* toolbars / control rows: wrap nicely and don't force a min-width */ .bar, .ctl, .vtog { flex-wrap: wrap !important; } } /* ================================== phone (<= 480px) ==================================== */ @media (max-width: 480px) { header h1, .header-inner > h1 { font-size: 15px !important; } main { padding: 11px !important; } .card { padding: 12px !important; border-radius: 12px !important; } h2 { font-size: 17px !important; } h3 { font-size: 14.5px !important; } /* collapse multi-column grids to a single column on small phones */ .grid, .stocks { grid-template-columns: 1fr !important; } .stat .v { font-size: 20px !important; } } /* ============================ relationship-graph workspace ============================== */ @media (max-width: 820px) { #cy { height: 56vh !important; min-height: 340px !important; } .bar input#t { width: 100% !important; } /* ticker box full-width (has an inline width) */ .wrap { padding: 0 12px 16px !important; } .side { width: 100% !important; column-width: 100% !important; } /* single-column masonry */ }