/* halpha_mobile.css — H Alpha phone layer (2026-09-08) --------------------------------------------------------------------------- ONE stylesheet, linked last in the head of every H Alpha document, holding every rule that only applies to a hand-held screen. Nothing here fires above 860px, so the desk layouts, the themes and the type scale are untouched on a laptop; this file cannot change what Rajiv already approved. It is the STATIC half of the phone layer. The other half, halpha_mobile.js, reads each page's own stylesheet at load and derives the overrides that cannot be written by hand here — the pages share a palette and a typeface but not a class vocabulary (`.lpanel` on freight, `.frow` on the cover, `.tc` on the register), so a hand-written rule per page would be wrong by the next page that ships. What CAN be written once is written here. Breakpoint 860px: a phone in landscape is 844 wide (iPhone 14/15, and the Huawei/Xiaomi/Honor sizes that dominate the Chinese market), so 860 catches both orientations and leaves tablets on the desk layout. --------------------------------------------------------------------------- */ /* ── always on, any width ─────────────────────────────────────────────────── */ /* A table wider than the screen must scroll INSIDE its own box; a page that scrolls sideways as a whole is the single most common way a desk layout fails on a phone. halpha_mobile.js puts this wrapper around every table it finds, so no page markup has to change. */ .ha-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;} .ha-scroll>table{margin:0;} img,svg,canvas,video,iframe{max-width:100%;} @media (max-width:860px){ /* ── page frame ───────────────────────────────────────────────────────────── */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%;} html,body{max-width:100%;overflow-x:hidden !important;} /* Long unbroken tokens — HS codes, vessel IMOs, lane ids, URLs, pinyin port names — are what actually force the sideways scroll once the containers are fluid. Break them rather than let one cell set the page width. */ body{overflow-wrap:break-word;word-break:break-word;} td,th,code,pre,.mono{overflow-wrap:break-word;} pre{white-space:pre-wrap;} /* ── navigation ───────────────────────────────────────────────────────────── */ /* The tab strip is not wrapped and it is not folded into a hamburger: every desk here has 4-8 tabs and a folded menu would hide the module the reader came for. It scrolls sideways, which is the gesture a phone reader already uses, and the strip keeps the charcoal/gold treatment unchanged. */ nav{padding-left:12px !important;padding-right:12px !important;height:auto !important; min-height:48px;flex-wrap:wrap !important;row-gap:2px;} .nav-tabs,.nav-links,.tabs,.tabbar{ display:flex !important;flex-wrap:nowrap !important; overflow-x:auto !important;-webkit-overflow-scrolling:touch; scrollbar-width:none;max-width:100%;margin-left:0 !important; padding-bottom:4px;} .nav-tabs::-webkit-scrollbar,.nav-links::-webkit-scrollbar, .tabs::-webkit-scrollbar,.tabbar::-webkit-scrollbar{display:none;} .nav-tab,.nav-links a{flex:0 0 auto;padding:9px 12px !important;} /* The tab strip is nested one div deep inside