/* ============ TRADINGVIEW CHART LAYER ============ */ .tvbar{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface)} .tvbar .lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)} .tvseg{display:flex;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:2px} .tvseg button{padding:4px 11px;border-radius:6px;font-size:11.5px;font-weight:700;color:var(--text3)} .tvseg button.on{background:var(--surface3);color:var(--text)} .tvseg button:hover{color:var(--text)} .tvhint{margin-left:auto;font-size:10.5px;color:var(--text3);display:inline-flex;align-items:center;gap:5px} .tvhint svg{opacity:.7} .tvhost{position:relative;width:100%;height:100%;min-height:220px} .tvhost iframe{border:0!important;display:block;width:100%!important;height:100%!important} .tvload{position:absolute;inset:0;display:grid;place-items:center;color:var(--text3);font-size:12px;gap:10px;text-align:center;padding:20px} .tvload .sp{width:22px;height:22px;border-radius:50%;border:2px solid var(--border2);border-top-color:var(--accent);animation:tvspin .8s linear infinite;margin:0 auto 10px} @keyframes tvspin{to{transform:rotate(360deg)}} .tvfail{color:var(--warn);font-size:11.5px;line-height:1.7} /* charts get taller when TradingView is driving them */ .tv-on.xchart,.tv-on.tchart,.tv-on.cvchart,.tv-on.tapchart{height:520px} @media(max-width:900px){.tv-on.xchart,.tv-on.tchart,.tv-on.cvchart,.tv-on.tapchart{height:400px}} .tvsrc{font-size:10.5px;color:var(--text3);font-family:var(--ff-mono);margin-left:10px} .tvbar .tvhint{margin-left:auto} /* ============ MEGA HEADER MENUS ============ */ .ndd-menu{max-height:74vh;overflow-y:auto;overscroll-behavior:contain} .ndd-menu.mega{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:min(860px,92vw);gap:0 6px} .ndd-menu.mega .grp{grid-column:1/-1} .ndd-menu.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:min(600px,92vw);gap:0 6px} .ndd-menu.cols2 .grp{grid-column:1/-1} /* keep the rightmost menus on screen */ .nav-links > .ndd:nth-last-child(-n+2) .ndd-menu{left:auto;right:-14px} .ndd-menu a.sub{padding-left:26px;font-weight:500;font-size:12.5px;position:relative} .ndd-menu a.sub::before{content:"";position:absolute;left:13px;top:50%;width:5px;height:1px;background:var(--text3);opacity:.5} @media(max-width:1240px){ .ndd-menu.mega,.ndd-menu.cols2{grid-template-columns:1fr;min-width:300px} } /* ============ HEADER FIT ============ Two real problems, both from the core's nav CSS: 1) .nav-in is capped at --maxw (1320px), so with 7 menus the links overflowed and 運営 sat outside the visible box entirely. 2) .nav-links has overflow-x:auto, which computes overflow-y to auto and CLIPS the dropdown menus. */ /* header and content share one width token — a nav wider than every page under it was the wallet looking "not the size of the website" */ .nav-in{max-width:min(var(--maxw), calc(100vw - 28px))} .nav-links{overflow:visible!important} @media(max-width:1100px){ /* narrow screens go back to a scrolling strip, menus drop below the bar */ .nav-links{overflow-x:auto!important;overflow-y:visible!important} } /* ============ (compacting) ============ 7 menus + the action cluster overflowed and nav-act painted over 運営, making it unclickable. Give the links room and collapse the right-hand labels to icons before anything can overlap. */ .nav-in{gap:10px} .nav-links{flex:1 1 auto;min-width:0;position:relative;z-index:2} .nav-act{flex:0 0 auto;position:relative;z-index:1} @media(max-width:1500px){ .nav-links{gap:2px} .nav-links > a,.nav-links > .ndd > a{padding-left:9px;padding-right:9px;font-size:13.5px} } @media(max-width:1400px){ .nav-act .nav-t{display:none} .chainbtn,.langbtn{padding:7px 8px} #wBtn{padding-left:11px;padding-right:11px} } @media(max-width:1300px){ .nav-links > a,.nav-links > .ndd > a{padding-left:7px;padding-right:7px;font-size:13px} } /* header auto-fit: applied by measurement, so it works in every language */ .nav-in.nav-compact .nav-act .nav-t{display:none} .nav-in.nav-compact .chainbtn,.nav-in.nav-compact .langbtn{padding:7px 8px} .nav-in.nav-compact .nav-links > a, .nav-in.nav-compact .nav-links > .ndd > a{padding-left:8px;padding-right:8px;font-size:13px} /* ============ mobile ============ The terminal is a five-column grid on the desktop; on a phone every one of those panels still has to be reachable, so they stack in trading order: chart, ticket, book, tape, pair list. Nothing is display:none — hiding a panel is what the responsive pass in round 1 had to undo. */ @media(max-width:860px){ .xterm{grid-template-columns:1fr!important;grid-auto-rows:min-content} .xterm > *{order:6} .xterm > .xt-chart,.xterm > div:nth-child(2){order:1;min-height:52vh} .xterm > .xt-form,.xterm > div:nth-child(5){order:2} .xterm > .xt-book{order:3;max-height:400px} .xterm > .xt-tape{order:4;max-height:300px} .xterm > .xt-pairs,.xterm > div:nth-child(1){order:5;max-height:320px;overflow-y:auto} .xt-book .book,.xt-tape .book{max-height:360px} /* the nav collapses to a scroller rather than wrapping into two rows */ .nav-links{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none} .nav-links::-webkit-scrollbar{display:none} /* Dropped in-flow because .nav-links is a horizontal scroller here and would clip an absolutely-positioned menu. But in flow they were only ever opacity:0 + visibility:hidden, which still reserves layout: six closed menus were holding ~700px of height inside the bar. The old fixed 62px nav hid that by clipping it, so freeing the height to let the bar wrap is what made it visible — the space was always being reserved. Closed menus must leave the flow outright, not merely stop painting. */ .ndd-menu,.ndd-menu.cols2,.ndd-menu.mega{position:static!important;min-width:0!important; grid-template-columns:1fr!important;box-shadow:none;border:0;padding-left:0; display:none!important;max-height:none} .ndd:hover > .ndd-menu,.ndd:focus-within > .ndd-menu{display:block!important} .ndd:hover > .ndd-menu.cols2,.ndd:focus-within > .ndd-menu.cols2, .ndd:hover > .ndd-menu.mega,.ndd:focus-within > .ndd-menu.mega{display:grid!important} /* tables scroll inside their own box; the page never scrolls sideways */ .sc-tw,.tw{overflow-x:auto} .sc-t{min-width:780px} .sc-chains{gap:5px} .sc-chip{padding:5px 11px;font-size:12px} .sc-count{margin-left:0} } @media(max-width:520px){ .wrap,.sc-wrap{padding-left:14px;padding-right:14px} .sc-bar{gap:8px} .sc-search{max-width:none} .bk-cap{padding:6px 10px 5px} } /* ---- chart fullscreen (every module) ---- */ .tvfs{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px; border-radius:7px;color:var(--text3);background:none;border:1px solid transparent;cursor:pointer; margin-left:auto;flex:none;transition:.15s} .tvfs:hover{color:var(--text);background:var(--surface3);border-color:var(--border)} .tvbar{align-items:center} .tv-full{position:fixed!important;inset:0!important;z-index:200!important; margin:0!important;border-radius:0!important;max-width:none!important; background:var(--bg);display:flex!important;flex-direction:column} /* The promoted box is the whole chart COLUMN — pair bar, toolbar, chart and the orders panel are all siblings. In fullscreen only the toolbar and the chart itself are shown, and the chart is the one that grows. */ .tv-full > *{display:none} .tv-full > .tvbar{display:flex;flex:none} .tv-full > .xchart,.tv-full > .tchart,.tv-full > .cvchart,.tv-full > .tapchart{ display:block;flex:1;min-height:0;height:auto!important;max-height:none!important} .tv-full .tvhost{height:100%!important;min-height:0} .tv-full .tvfs{color:var(--accent)} html.tv-full-open{overflow:hidden} html.tv-full-open .nav{z-index:1} /* ============ narrow header ============ .nav-act was flex:0 0 auto with min-width:auto, so the action cluster kept its full 317px no matter how narrow the window got. Brand (118) + cluster (317) + gaps held the header row at 497px, and because the header is shared chrome, EVERY view inherited the same sideways scroll — all 56 of them overflowed by exactly 177px at 320px wide, 137px at 360, 107px at 390. The identical number across unrelated pages was the tell: it was never the views. The cluster wraps instead of shedding controls. Hiding the chain picker or the language menu on a phone makes them unreachable, and the round-1 pass already had to undo that kind of fix. Wrapping also survives translation: a longer word in another language costs a row, never an overflow. */ @media(max-width:820px){ /* .nav-in carries a hard height:62px from the inline core. Wrapping inside a fixed-height box does not make the box taller — the extra rows simply paint over the ticker and the hero, which is exactly what the first attempt did. The height has to become a floor before the wrap means anything. */ .nav-in{flex-wrap:wrap;row-gap:8px;height:auto; padding-top:9px;padding-bottom:9px;align-items:center} .brand{flex:0 0 auto;min-width:0} .nav-act{flex:1 1 auto;min-width:0;margin-left:auto; justify-content:flex-end;flex-wrap:wrap;row-gap:6px} .nav-in .nav-act{gap:5px} /* Same trick the bar already uses on .nav-t above 1400px: drop the label, keep the control. The globe and the chain badge still say what they are, and the open menu marks the current choice — nothing becomes unreachable. */ #langCur{display:none} .nav-links{order:3;flex:1 0 100%;min-width:0} } /* Below this the cluster needs its own row outright, or the brand squeezes it into a ragged two-line block beside itself. */ @media(max-width:560px){ .nav-act{flex:1 0 100%;margin-left:0;order:2} .nav-links{order:3} /* The inline core sets .nav-act{gap:8px} and its