/* TradingAlgo mobile prototype — adapted 1:1 from the approved mockups (outputs/ios_redesign_mockups/mobile.css). Same tokens as apps/desktop and dashboard tokens.css. Adapted for a real viewport: fluid width, dynamic height, safe-area insets, real scrolling, tap states. */ :root{ --ta-bg:#0a0a0a; --ta-surface-1:#121212; --ta-surface-2:#181818; --ta-surface-3:#202020; --ta-hairline:rgba(255,255,255,0.07); --ta-hairline-strong:rgba(255,255,255,0.12); --ta-text:#ededed; --ta-text-dim:#9a9a9a; --ta-text-faint:#6a6a6a; --ta-pos:#00ff88; --ta-pos-dim:#00cc6e; --ta-neg:#ff4d4d; --ta-warn:#ffb020; --ta-info:#4d9dff; --ta-pos-glow:rgba(0,255,136,0.18); --ta-neg-glow:rgba(255,77,77,0.18); --brain:#a78bfa; --machine:#4d9dff; --tabbar-h:calc(60px + env(safe-area-inset-bottom,0px)); } *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;} html,body{height:100%;background:#000;color:var(--ta-text); font-family:'Inter',ui-sans-serif,system-ui,sans-serif;overscroll-behavior:none;} .mono{font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;font-variant-numeric:tabular-nums;} .pos{color:var(--ta-pos);}.neg{color:var(--ta-neg);}.warn{color:var(--ta-warn);}.info{color:var(--ta-info);} .dim{color:var(--ta-text-dim);}.faint{color:var(--ta-text-faint);} /* ---- app canvas (fluid; centered column on desktop) ---- */ .phone{width:100%;max-width:430px;height:100vh;height:100dvh;background:var(--ta-bg);overflow:hidden; position:relative;display:flex;flex-direction:column;margin:0 auto;} .safetop{flex:0 0 env(safe-area-inset-top,0px);} /* ---- app header ---- */ .apphead{flex:0 0 44px;display:flex;align-items:center;gap:9px;padding:0 14px;} .apphead .mark{width:27px;height:27px;border-radius:7px;background:#050505; box-shadow:inset 0 0 0 1px rgba(0,255,136,.4), 0 0 10px rgba(0,255,136,.12); display:flex;align-items:center;justify-content:center;} .apphead .name{font-size:15.5px;font-weight:800;letter-spacing:-.01em;} .apphead .spacer{flex:1;} .connpill{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ta-text-dim); background:var(--ta-surface-2);border-radius:999px;padding:4px 10px; box-shadow:inset 0 0 0 1px var(--ta-hairline);white-space:nowrap;} .connpill .dot{width:6px;height:6px;border-radius:50%;background:var(--ta-warn); box-shadow:0 0 8px rgba(255,176,32,.3);} /* ---- screen title row + context chips ---- */ .screenrow{padding:6px 14px 0;display:flex;align-items:baseline;gap:8px;} .screenrow h1{font-size:20px;font-weight:800;letter-spacing:-.01em;} .screenrow .sub{font-size:10.5px;color:var(--ta-text-faint);} .chiprow{display:flex;gap:6px;padding:8px 14px 2px;overflow-x:auto;flex-wrap:nowrap; scrollbar-width:none;flex:0 0 auto;} .chiprow::-webkit-scrollbar{display:none;} /* ---- honesty / status chips (desktop parity) ---- */ .chip{font-size:8.5px;font-weight:700;letter-spacing:.07em;padding:3px 7px;border-radius:4px; display:inline-flex;align-items:center;gap:4px;white-space:nowrap;text-transform:uppercase;} .chip.dg{color:var(--ta-pos);background:rgba(0,255,136,.10);box-shadow:inset 0 0 0 1px rgba(0,255,136,.35);} .chip.cx{color:var(--ta-info);background:rgba(77,157,255,.10);box-shadow:inset 0 0 0 1px rgba(77,157,255,.35);} .chip.nz{color:var(--ta-warn);background:rgba(255,176,32,.10);box-shadow:inset 0 0 0 1px rgba(255,176,32,.35);} .chip.neg{color:var(--ta-neg);background:rgba(255,77,77,.10);box-shadow:inset 0 0 0 1px rgba(255,77,77,.35);} .chip.mut{color:var(--ta-text-dim);background:var(--ta-surface-3);box-shadow:inset 0 0 0 1px var(--ta-hairline-strong);} .chip.brain{color:var(--brain);background:rgba(167,139,250,.10);box-shadow:inset 0 0 0 1px rgba(167,139,250,.35);} /* ---- sub-navigation inside a tab (Signal · Decisions · …) ---- */ .subnav{display:flex;gap:6px;padding:8px 14px 4px;overflow-x:auto;flex:0 0 auto; scrollbar-width:none;} .subnav::-webkit-scrollbar{display:none;} .subnav .s{font-size:11.5px;font-weight:600;color:var(--ta-text-dim);padding:6px 12px; border-radius:999px;background:var(--ta-surface-2);box-shadow:inset 0 0 0 1px var(--ta-hairline); white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;} .subnav .s:active{opacity:.7;} .subnav .s.on{color:#031;background:var(--ta-pos);box-shadow:none;font-weight:700;} .subnav .s .k{font-size:9px;margin-left:4px;opacity:.75;font-family:'JetBrains Mono',monospace;} /* ---- segmented pickers ---- */ .seg{display:inline-flex;background:var(--ta-surface-2);border-radius:8px;padding:2px; box-shadow:inset 0 0 0 1px var(--ta-hairline);} .seg .o{font-size:11px;font-weight:700;padding:4.5px 13px;border-radius:6px;color:var(--ta-text-dim); cursor:pointer;user-select:none;-webkit-user-select:none;white-space:nowrap;} .seg .o:active{opacity:.7;} .seg .o.on{background:var(--ta-surface-3);color:var(--ta-text);box-shadow:inset 0 0 0 1px var(--ta-hairline-strong);} /* ---- scrolling content ---- */ .scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:6px 12px 0;display:flex; flex-direction:column;gap:10px;position:relative;} /* every direct child keeps its natural height — without this, grids/rows that sit OUTSIDE a .card (tiles, seg rows) flex-shrink to fit the viewport, so the screen looks cut off and never overflows enough to scroll (iPhone bug: Macro/Markets screens wouldn't scroll). .card already carried flex:0 0 auto. */ .scroll>*{flex:0 0 auto;} /* Bottom clearance for the overlaid tab bar is a REAL flex item, not padding: WebKit (the iOS WKWebView the app runs in) drops the bottom padding of an overflowed flex column past its last item, so the last card sat pinned behind the nav and could not be scrolled into view — while Chromium honored the padding and looked fine. A ::after spacer is counted in scrollHeight by every engine. */ .scroll::after{content:"";display:block;flex:0 0 calc(var(--tabbar-h) + 24px);} /* ---- rich trading chart (port of dashboard TradingChart.tsx) ---- */ .tchart{width:100%;position:relative;border-radius:8px;overflow:hidden;} .tchart .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:11px;color:var(--ta-text-faint);z-index:2;} .togchip{font-size:10px;font-weight:700;padding:4px 9px;border-radius:6px;color:var(--ta-text-faint); background:transparent;cursor:pointer;user-select:none;-webkit-user-select:none; font-family:'JetBrains Mono',monospace;} .togchip.on{background:rgba(255,255,255,.1);color:var(--ta-text-dim);} .togchip:active{opacity:.7;} /* ---- cards ---- */ .card{background:var(--ta-surface-1);border-radius:14px;box-shadow:inset 0 0 0 1px var(--ta-hairline); overflow:hidden;flex:0 0 auto;} .chead{display:flex;align-items:center;gap:7px;padding:11px 13px 9px;flex-wrap:wrap;} .chead b{font-size:12.5px;font-weight:700;} .chead .sub{font-size:10px;color:var(--ta-text-faint);} .chead .r{margin-left:auto;display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end;row-gap:3px;max-width:100%;} .cbody{padding:0 13px 12px;} .cbody svg{width:100%;height:auto;display:block;} .cnote{font-size:9.5px;color:var(--ta-text-faint);line-height:1.5;padding:8px 13px 11px; border-top:1px solid var(--ta-hairline);} /* key-value rows */ .krow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6.5px 0; border-top:1px solid var(--ta-hairline);} .krow:first-child{border-top:none;} .krow .l{font-size:11.5px;color:var(--ta-text-dim);} .krow .v{font-size:11.5px;font-weight:600;text-align:right; font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;} /* list rows (streams, trades, decisions) */ .lrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--ta-hairline);} .lrow:first-child{border-top:none;} .lrow .t{font-size:10px;color:var(--ta-text-faint);font-family:'JetBrains Mono',monospace;flex:0 0 34px;} .lrow .txt{font-size:11.5px;color:var(--ta-text);flex:1;min-width:0;line-height:1.45;} .lrow .txt small{display:block;font-size:9.5px;color:var(--ta-text-faint);font-weight:400;} .lrow .amt{font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace;text-align:right;} /* Fleet · Workers — EVERY rostered worker renders; collapsed is a scroll box, never a truncated list, so "Show all" changes the height and never the number of rows. */ .wlist.clip{max-height:264px;overflow-y:auto;-webkit-overflow-scrolling:touch; overscroll-behavior:contain; mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent 100%); -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent 100%);} .wlist .lrow .txt small.mono{font-family:'JetBrains Mono',monospace;font-size:9px;opacity:.75;} /* side tags */ .tag{font-size:8px;font-weight:800;letter-spacing:.06em;padding:2px 5.5px;border-radius:4px;text-transform:uppercase;} .tag.long{color:var(--ta-pos);background:rgba(0,255,136,.12);} .tag.short{color:var(--ta-neg);background:rgba(255,77,77,.12);} .tag.chop{color:var(--ta-warn);background:rgba(255,176,32,.12);} /* Binance-futures-style position cards (matches the dashboard PositionCard the old iOS shell showed: side tag + leverage, PnL/ROE hero, metric grid) */ .poslist{display:flex;flex-direction:column;gap:8px;} .poscard{position:relative;background:var(--ta-surface-2);border-radius:12px; box-shadow:inset 0 0 0 1px var(--ta-hairline);padding:10px 12px 11px 15px;overflow:hidden;} .poscard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;} .poscard.long::before{background:linear-gradient(180deg,var(--ta-pos),rgba(0,255,136,.25));} .poscard.short::before{background:linear-gradient(180deg,var(--ta-neg),rgba(255,77,77,.25));} .poscard .ph{display:flex;align-items:center;gap:7px;} .poscard .sym{font-size:14px;font-weight:800;letter-spacing:-.01em; font-family:'JetBrains Mono',ui-monospace,monospace;} .poscard .pmeta{font-size:8.5px;color:var(--ta-text-faint);letter-spacing:.04em;} .poscard .pnl{margin-left:auto;text-align:right;line-height:1.2; font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;} .poscard .pnl b{display:block;font-size:15.5px;font-weight:700;} .poscard .pnl small{font-size:9.5px;font-weight:600;opacity:.85;} .poscard .pgrid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:8px 10px;margin-top:9px;} .poscard .pc small{display:block;font-size:7.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--ta-text-faint);margin-bottom:2px;} .poscard .pc b{display:block;font-size:11px;font-weight:600;color:var(--ta-text-dim); font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;} .poscard .pc i{display:block;font-style:normal;font-size:8.5px;color:var(--ta-text-faint); font-family:'JetBrains Mono',ui-monospace,monospace;} /* hero numbers */ .hero{display:flex;align-items:flex-end;gap:10px;} .hero .big{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1; font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;display:block;} .hero .lab{display:block;white-space:nowrap;font-size:10px;color:var(--ta-text-faint);letter-spacing:.09em;text-transform:uppercase;margin-bottom:3px;} /* stat tile pair/trio */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .tiles.t3{grid-template-columns:1fr 1fr 1fr;} .tiles.t4{grid-template-columns:1fr 1fr 1fr 1fr;} .tile{background:var(--ta-surface-2);border-radius:10px;padding:9px 11px; box-shadow:inset 0 0 0 1px var(--ta-hairline);} .tile small{display:block;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--ta-text-faint);margin-bottom:4px;} .tile b{font-size:15px;font-weight:700;font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;} .tile .d{font-size:9.5px;color:var(--ta-text-faint);margin-top:2px;} /* attribution bars */ .abar{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--ta-hairline);} .abar:first-child{border-top:none;} .abar .l{flex:0 0 118px;font-size:11px;color:var(--ta-text);} .abar .l small{display:block;font-size:8.5px;color:var(--ta-text-faint);} .abar .track{flex:1;height:7px;border-radius:4px;background:var(--ta-surface-3);position:relative;overflow:hidden;} .abar .track i{position:absolute;top:0;bottom:0;border-radius:4px;} .abar .track i.p{background:linear-gradient(90deg,rgba(0,255,136,.35),var(--ta-pos));left:50%;} .abar .track i.n{background:linear-gradient(270deg,rgba(255,77,77,.35),var(--ta-neg));right:50%;} .abar .track .zero{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--ta-hairline-strong);} .abar .v{flex:0 0 46px;text-align:right;font-size:11px;font-weight:700; font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;} /* gate / checklist rows */ .gate{display:flex;gap:9px;padding:7.5px 0;border-top:1px solid var(--ta-hairline);align-items:flex-start;} .gate:first-child{border-top:none;} .gate .ic{flex:0 0 16px;font-size:12px;line-height:1.3;} .gate .b{flex:1;font-size:11.5px;line-height:1.45;} .gate .b small{display:block;font-size:9.5px;color:var(--ta-text-faint);} .gate .chip{margin-top:1px;} /* progress */ .pbar{height:6px;border-radius:4px;background:var(--ta-surface-3);overflow:hidden;position:relative;} .pbar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--ta-pos);} .pbar i.w{background:var(--ta-warn);} .pbar i.b{background:var(--ta-info);} /* bottom fade above the tab bar */ .fade{position:absolute;left:0;right:0;bottom:var(--tabbar-h);height:56px;pointer-events:none; background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.92));z-index:5;} /* ---- bottom tab bar ---- */ /* SIX tabs on a 375pt phone = ~62pt each. The padding comes off the bar, the glyph shrinks and the label ellipses — the TAP TARGET stays full-height. */ .tabbar{position:absolute;left:0;right:0;bottom:0;height:var(--tabbar-h);z-index:6; background:rgba(14,14,14,.96);border-top:1px solid var(--ta-hairline); display:flex;align-items:flex-start;padding:9px 2px 0;backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);} .tabbar .tb{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px; color:var(--ta-text-faint);cursor:pointer;user-select:none;-webkit-user-select:none;} .tabbar .tb svg{width:21px;height:21px;} .tabbar .tb:active{opacity:.7;} .tabbar .tb.on{color:var(--ta-pos);} .tabbar .tb .lab{font-size:9px;font-weight:600;letter-spacing:-.01em;max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* the sonar ray sweeps only on the ACTIVE tab — never six animations at once */ .tabbar .tb.on .sweep{transform-box:view-box;transform-origin:12px 12px; animation:snspin 2.8s linear infinite;} @keyframes snspin{to{transform:rotate(360deg)}} /* ---- per-screen extras (fleet dots, perp lens rows, whale rows) ---- */ .dots{display:grid;grid-template-columns:repeat(13,1fr);gap:7px;padding:2px 0 4px;} .dots i{width:9px;height:9px;border-radius:50%;background:var(--ta-pos);box-shadow:0 0 7px var(--ta-pos-glow);} .lrow2{display:flex;align-items:center;gap:7px;padding:4px 0;} .lrow2 .lab{flex:0 0 92px;font-size:9.5px;color:var(--ta-text-dim);font-family:'JetBrains Mono',monospace;} .lrow2 .track{flex:1;height:8px;border-radius:4px;background:var(--ta-surface-3);overflow:hidden;position:relative;} .lrow2 .track i{position:absolute;top:0;bottom:0;left:0;border-radius:4px;} .lrow2 .v{flex:0 0 56px;text-align:right;font-size:9.5px;font-family:'JetBrains Mono',monospace;color:var(--ta-text-dim);} .wr{display:flex;align-items:center;gap:7px;padding:6.5px 0;border-top:1px solid var(--ta-hairline);} .wr:first-child{border-top:none;} .wr .t{flex:0 0 34px;font-size:9.5px;color:var(--ta-text-faint);font-family:'JetBrains Mono',monospace;} .wr .m{flex:0 0 44px;} .wr .bar{flex:1;height:9px;border-radius:5px;background:var(--ta-surface-3);overflow:hidden;display:flex;} .wr .bar i.b{background:var(--ta-pos);height:100%;} .wr .bar i.s{background:var(--ta-neg);height:100%;} .wr .v{flex:0 0 54px;text-align:right;font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;} /* small utility */ .rowflex{display:flex;align-items:center;gap:8px;} .grow{flex:1;} svg text{font-family:'JetBrains Mono',monospace;} /* ---- LIVE CAPITAL (real money) ---- The only real money in the app. The treatment is structural, not a label: a red rail down every live card, a REAL MONEY marker, and an arm banner that grows a glow the moment real orders are enabled. Tokens only. */ .card.live{box-shadow:inset 0 0 0 1px rgba(255,77,77,.32);position:relative;overflow:hidden;} .card.live::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ta-neg);} .card.live .chead b{color:var(--ta-text);} .livebanner{position:relative;padding:12px 13px 13px 15px;background:var(--ta-surface-2);border-radius:10px;} .livebanner .rail{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:var(--ta-neg);} .livebanner.armed{box-shadow:inset 0 0 0 2px var(--ta-neg), 0 0 22px var(--ta-neg-glow);} .livebanner .tag{font-size:8px;font-weight:800;letter-spacing:.16em;color:var(--ta-neg);} .livebanner .state{font-size:14.5px;font-weight:800;letter-spacing:-.01em;margin-top:5px;line-height:1.3;} .livebanner .sub{font-size:10.5px;color:var(--ta-text-dim);margin-top:5px;line-height:1.5;} .consolebtn{display:block;width:100%;text-align:center;padding:11px;border-radius:10px;margin-top:10px; background:var(--ta-surface-3);color:var(--ta-text);font-size:12px;font-weight:700;text-decoration:none; box-shadow:inset 0 0 0 1px var(--ta-hairline-strong);} .consolebtn:active{opacity:.7;} .okbox{padding:9px 11px;border-radius:9px;font-size:10.5px;line-height:1.5;color:var(--ta-text-dim); background:rgba(0,255,136,.05);box-shadow:inset 0 0 0 1px rgba(0,255,136,.22);} .warnbox{padding:9px 11px;border-radius:9px;font-size:10.5px;line-height:1.5;color:var(--ta-text); background:rgba(255,77,77,.07);box-shadow:inset 0 0 0 1px rgba(255,77,77,.3);} .subnav .s.live{color:var(--ta-neg);box-shadow:inset 0 0 0 1px rgba(255,77,77,.4);} /* Selected: a red TINT, not a solid red slab — the pill says "you are here" and the state bar says what the sleeve is. (It must never inherit .s.on's solid GO-green either; see the switch block below for why green is barred here.) */ .subnav .s.live.on{color:var(--ta-neg);background:rgba(255,77,77,.14); box-shadow:inset 0 0 0 1px rgba(255,77,77,.55);font-weight:700;} /* DISARMED: nothing is at risk, so nothing is red. Neutral-lit selection. */ .subnav .s.live.on.off{color:var(--ta-text);background:var(--ta-surface-3); box-shadow:inset 0 0 0 1px var(--ta-hairline-strong);} .subnav .s.live.off{color:var(--ta-text-dim);box-shadow:inset 0 0 0 1px var(--ta-hairline);} /* ---- arm / disarm: two buttons, one tap each ---- */ .armrow{display:flex;gap:9px;margin-top:10px;} .armbtn{flex:1;padding:14px 10px;border-radius:11px;border:none;font-family:'Inter',sans-serif; font-size:13.5px;font-weight:800;letter-spacing:.09em;} .armbtn:disabled{opacity:.55;} .armbtn:active{opacity:.75;} .armbtn.arm{background:var(--ta-surface-3);color:var(--ta-text); box-shadow:inset 0 0 0 1px var(--ta-hairline-strong);} .armbtn.arm.on{background:var(--ta-neg);color:#200;box-shadow:0 0 18px var(--ta-neg-glow);} .armbtn.disarm{background:var(--ta-pos);color:#031;} /* ---- research gate: per-item approve / reject, two taps each ---- */ .gaterow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;} .gatebtn{flex:1 1 45%;padding:11px 9px;border-radius:10px;border:none;font-family:'Inter',sans-serif; font-size:11.5px;font-weight:800;line-height:1.25;} .gatebtn:disabled{opacity:.55;} .gatebtn:active{opacity:.75;} .gatebtn.ok{background:var(--ta-pos);color:#031;} .gatebtn.no{background:var(--ta-surface-3);color:var(--ta-text); box-shadow:inset 0 0 0 1px var(--ta-hairline-strong);} .gatebtn.armed{background:var(--ta-warn);color:#210;} /* the readout is a document, not a table — preserve its own line breaks */ .rdbody{font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.65; color:var(--ta-text-dim);white-space:pre-wrap;word-break:break-word;} /* ---- auto-disarm banner: stays until acknowledged ---- */ .autodisarm{position:relative;background:var(--ta-surface-1);border-radius:12px;padding:11px 13px 12px 16px; box-shadow:inset 0 0 0 1px rgba(255,77,77,.45);} .autodisarm .rail{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:var(--ta-neg);} .autodisarm .t{font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--ta-neg);} .autodisarm .m{font-size:11.5px;color:var(--ta-text);margin-top:4px;line-height:1.5;} .ackbtn{margin-top:9px;width:100%;padding:9px;border-radius:9px;border:none;font-family:'Inter',sans-serif; font-size:11.5px;font-weight:700;background:var(--ta-surface-3);color:var(--ta-text); box-shadow:inset 0 0 0 1px var(--ta-hairline-strong);} /* ---- round trips: dense tabular rows, every numeral monospace ---- */ .triprow{padding:9px 0;border-top:1px solid var(--ta-hairline);} .triprow:first-child{border-top:none;} .triprow .th{display:flex;align-items:center;gap:6px;} .triprow .tt{font-size:10px;color:var(--ta-text-faint);font-family:'JetBrains Mono',monospace;} .triprow .tn{margin-left:auto;font-size:12.5px;font-weight:700; font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;} .triprow .tg{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin-top:7px;} .triprow .tc small{display:block;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--ta-text-faint);} .triprow .tc b{font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums;color:var(--ta-text);} /* ---- Brain · Why — one-tap fused view (2026-08-04, display-only) -------- */ .whyfs{position:relative;border-radius:12px;padding:4px 2px 8px; background:radial-gradient(120% 90% at 50% 0%,#0a1428 0%,#04070f 60%); border:1px solid rgba(55,242,255,.14);overflow:hidden} .whyfs::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px)} .whytop{display:flex;align-items:center;gap:8px;padding:8px 10px 2px} .whymode{flex:1;text-align:center;font-size:8px;letter-spacing:.22em;color:#ffc257} .whyclose{font-size:16px;color:#7fa3c9;padding:4px 10px;border:1px solid rgba(55,242,255,.2); border-radius:6px;background:rgba(10,20,38,.5)} .whystage{position:relative;height:300px;margin:2px 4px} #whyfield{position:absolute;inset:0;width:100%;height:100%} .whycore{position:absolute;left:50%;top:50%;width:128px;height:128px; transform:translate(-50%,-50%);pointer-events:none} .whyring{position:absolute;inset:-14px;border-radius:50%; border:1px dashed rgba(55,242,255,.35);animation:whyspin 26s linear infinite} .whyring.r2{inset:-24px;border-color:rgba(255,67,216,.18);animation:whyspin 40s linear infinite reverse} @keyframes whyspin{to{transform:rotate(360deg)}} .whynum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;animation:whybreathe 3.6s ease-in-out infinite} @keyframes whybreathe{50%{transform:scale(1.025)}} .whynum b{font-size:31px;color:#fff;text-shadow:0 0 16px #37f2ff,0 0 40px rgba(55,242,255,.5)} .whynum small{font-size:7.5px;letter-spacing:.28em;color:#8fd8ff;margin-top:3px} .whynum span{font-size:10px;font-weight:700;letter-spacing:.12em;margin-top:2px} @media (prefers-reduced-motion: reduce){.whyring,.whyring.r2,.whynum{animation:none}} .whyaxis{position:relative;height:26px;margin:0 22px 6px} .whyaxis .bar{position:absolute;left:0;right:0;top:12px;height:3px;border-radius:2px; background:linear-gradient(90deg,#ff4d6a,rgba(90,110,140,.35) 46%,rgba(90,110,140,.35) 54%,#3dffa4)} .whyaxis i{position:absolute;top:6px;width:3px;height:15px;border-radius:2px;background:#fff; box-shadow:0 0 10px #37f2ff;transition:left 1s cubic-bezier(.2,.9,.25,1)} .whyaxis .l,.whyaxis .r{position:absolute;top:0;font-size:8px;letter-spacing:.18em;color:var(--ta-text-faint)} .whyaxis .l{left:0}.whyaxis .r{right:0} .whypanel{border-color:rgba(55,242,255,.16)} .whystate{font-size:15px;font-weight:800;letter-spacing:.08em} .whymeter{position:relative;height:9px;border-radius:5px;margin:7px 0 3px; background:linear-gradient(90deg,rgba(255,77,106,.28),rgba(60,80,110,.22) 47%,rgba(60,80,110,.22) 53%,rgba(61,255,164,.28)); border:1px solid rgba(120,160,200,.18)} .whymeter i{position:absolute;top:1px;bottom:1px;border-radius:4px;transition:width 1s ease} .whymeter i.pos{background:linear-gradient(90deg,rgba(61,255,164,.3),#3dffa4);box-shadow:0 0 12px rgba(61,255,164,.6)} .whymeter i.neg{background:linear-gradient(270deg,rgba(255,77,106,.3),#ff4d6a);box-shadow:0 0 12px rgba(255,77,106,.6)} .whychips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} .whychips .chip.hot{color:#031018;background:#ffc257;border-color:#ffc257;font-weight:700; box-shadow:0 0 10px rgba(255,194,87,.55)} .whyduel{display:flex;align-items:center;gap:10px;text-align:center} .whyduel>div{flex:1}.whyduel .mid{flex:0 0 auto;font-size:9.5px} .whyduel small{display:block;font-size:7px;letter-spacing:.2em;color:var(--ta-text-faint)} .whyduel b{font-size:19px}.whyduel .cy{color:#37f2ff;text-shadow:0 0 12px rgba(55,242,255,.6)} .wtag{font-size:7px;letter-spacing:.1em;padding:1px 5px;border-radius:2px;font-weight:700} .wtag.prior{color:#031018;background:#ffc257} .wtag.earned{color:#02131c;background:#37f2ff} .wtag.zero{color:#6f8dad;border:1px solid rgba(120,150,190,.3)} .wtag.excl{color:#556;border:1px solid #345} .whybadge{font-size:6.5px;letter-spacing:.1em} .whybadge.acc{color:#37f2ff}.whybadge.skill{color:#3dffa4} .whybadge.noskill{color:#ff4d6a}.whybadge.excl{color:#556} .whysig.zero{opacity:.6}.whysig.excluded{opacity:.4} .whyduel .tiersub{display:block;font-size:6.5px;letter-spacing:.12em;color:var(--ta-text-faint);margin-top:2px} .whyduel b{font-size:17px} .whyref{display:block;font-size:8px;letter-spacing:.14em;color:#8fd8ff;margin-top:3px} .compacttiers .whyduel b{font-size:12.5px;text-shadow:none} .compacttiers .whyduel .cy{text-shadow:0 0 8px rgba(55,242,255,.35)} /* ---- Brain · Why v2 — Babak's reactor-core design (handoff 2026-08-04). Gated behind WHY_DESIGN; v1 above stays the default until Babak flips. */ .w2top{display:flex;align-items:center;gap:9px;padding:2px 2px 8px} .w2mark{position:relative;width:30px;height:30px;flex:0 0 30px} .w2mark i{position:absolute;inset:2px;border:1px solid rgba(0,255,136,.55);border-radius:50%; border-top-color:transparent;animation:w2spin 3.2s linear infinite} .w2mark i.r2{inset:7px;border-color:rgba(0,255,136,.35);border-bottom-color:transparent; animation:w2spin 2.1s linear infinite reverse} .w2mark b{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%; background:#00ff88;box-shadow:0 0 8px #00ff88;animation:w2pulse 2s ease-in-out infinite} @keyframes w2spin{to{transform:rotate(360deg)}} @keyframes w2pulse{50%{transform:scale(1.35)}} .w2word{font:700 13px Inter,system-ui,sans-serif;letter-spacing:.16em;color:#ededed} .w2word b{color:#00ff88} .w2word small{display:block;font:500 8.5px "JetBrains Mono",monospace;letter-spacing:.1em;color:#6a6a6a;margin-top:1px} .w2pill{margin-left:auto;font:600 8px "JetBrains Mono",monospace;letter-spacing:.1em;color:#9a9a9a; padding:4px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .w2pill.armed{color:#ff8080;box-shadow:inset 0 0 0 1px rgba(255,77,77,.45),0 0 12px rgba(255,77,77,.25); animation:w2blink 1.6s ease-in-out infinite} @keyframes w2blink{50%{opacity:.55}} .w2switch{display:flex;align-items:center;gap:8px;margin:4px 0 8px} .w2segwrap{display:flex;background:rgba(255,255,255,.05);border-radius:999px;padding:3px} .w2seg{min-height:30px;display:flex;align-items:center;padding:5px 13px;border-radius:999px; font:600 11px Inter,system-ui,sans-serif;color:#9a9a9a;transition:all .2s;cursor:pointer} .w2seg.on{background:#00ff88;color:#04140c;box-shadow:0 0 12px rgba(0,255,136,.4)} .w2eps{margin-left:auto;font:600 8.5px "JetBrains Mono",monospace;letter-spacing:.12em;color:#ffb020} .w2assets{display:flex;align-items:center;gap:10px;margin:0 0 8px} .w2assets .seg .o small{display:block;font:500 8px "JetBrains Mono",monospace;color:#6a6a6a;margin-top:1px;letter-spacing:.03em} .w2assets .seg .o.on small{color:#9a9a9a} .w2cap{font:500 8.5px "JetBrains Mono",monospace;color:#6a6a6a;letter-spacing:.08em} .w2frame{position:relative;height:392px;border-radius:14px;overflow:hidden; background:radial-gradient(300px 220px at 50% 42%, rgba(0,255,136,.06), transparent 70%), #0c0e0d; box-shadow:0 0 0 1px rgba(0,255,136,.14), inset 0 0 40px rgba(0,255,136,.03)} .w2frame::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px)} #w2cv{position:absolute;inset:0;width:100%;height:100%} .w2hud{position:absolute;top:9px;left:11px;z-index:3;font:600 7.5px "JetBrains Mono",monospace; letter-spacing:.18em;color:rgba(0,255,136,.6)} .w2live{position:absolute;top:9px;right:11px;z-index:3;font:500 7.5px "JetBrains Mono",monospace; letter-spacing:.14em;color:rgba(255,255,255,.4)} .w2center{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);z-index:2; text-align:center;pointer-events:none} .w2center b{display:block;font:600 34px "JetBrains Mono",monospace;color:#eafff4; text-shadow:0 0 18px rgba(0,255,136,.65)} .w2center small{display:block;font:500 7.5px "JetBrains Mono",monospace;letter-spacing:.22em; color:rgba(255,255,255,.5);margin-top:3px} .w2center span{display:block;font:600 10px "JetBrains Mono",monospace;color:#00ff88; text-shadow:0 0 10px rgba(0,255,136,.7);margin-top:2px} .w2center .w2ref{display:block;font:500 7px "JetBrains Mono",monospace;font-style:normal;letter-spacing:.08em;color:#6a6a6a;margin-top:5px} .w2legend{position:absolute;left:0;right:0;bottom:8px;z-index:3;display:flex;gap:10px; justify-content:center;font:500 7px "JetBrains Mono",monospace;letter-spacing:.1em;color:#9a9a9a} .w2legend i{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:3px;vertical-align:1px} .w2legend .w2tap{color:#6a6a6a} .w2feedwrap{position:absolute;inset:0;padding:30px 12px 10px;overflow-y:auto} .w2fhead{font:600 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:#00ff88;margin-bottom:8px} .w2fdot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#00ff88; box-shadow:0 0 8px #00ff88;margin-right:6px;animation:w2blink 1.4s ease-in-out infinite} .w2fsub{float:right;color:#6a6a6a;font-weight:500} .w2fline{padding:6px 0;border-top:1px solid rgba(255,255,255,.05);animation:w2rise .3s ease} @keyframes w2rise{from{opacity:0;transform:translateY(6px)}} .w2ft{font:500 8.5px "JetBrains Mono",monospace;color:#6a6a6a;margin-right:7px} .w2ftxt{font:500 10.5px "JetBrains Mono",monospace} .w2ftxt.earned{color:#00ff88}.w2ftxt.accruing{color:#ffb020}.w2ftxt.measuring{color:#9a9a9a} .w2fbar{position:relative;height:3px;margin-top:4px;background:rgba(255,255,255,.05);border-radius:2px} .w2fbar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;transition:width .6s} .w2fbar span{position:absolute;right:0;top:-11px;font:500 6.5px "JetBrains Mono",monospace;color:#6a6a6a} .w2sheet{margin-top:10px;background:var(--ta-surface-2,#181818);border-radius:12px;padding:12px 13px; box-shadow:inset 0 0 0 1px rgba(0,255,136,.3);animation:w2rise .25s ease} .w2shead{display:flex;align-items:center;gap:8px} .w2shead b{font:600 13px Inter,system-ui,sans-serif;color:#ededed;flex:1} .w2badge{font:600 7.5px "JetBrains Mono",monospace;letter-spacing:.1em;padding:3px 7px;border-radius:4px} .w2badge.amber{color:#ffb020;box-shadow:inset 0 0 0 1px rgba(255,176,32,.5)} .w2badge.grey{color:#9a9a9a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .w2badge.red{color:#ff8080;box-shadow:inset 0 0 0 1px rgba(255,77,77,.5)} .w2badge.blue{color:#4d9dff;box-shadow:inset 0 0 0 1px rgba(77,157,255,.45)} .w2close{width:44px;height:32px;display:flex;align-items:center;justify-content:center; color:#9a9a9a;font-size:14px;cursor:pointer} .w2smono{font:500 9.5px "JetBrains Mono",monospace;color:#9a9a9a;margin-top:6px} .w2snote{font:400 11px Inter,system-ui,sans-serif;color:#9a9a9a;line-height:1.45;margin-top:6px} @media (prefers-reduced-motion:reduce){.w2mark i,.w2mark b,.w2pill.armed,.w2fdot{animation:none}} /* ============ Markets · Flow — the FlowX semi-manual READ (M1) ============ */ .fxpanel{border-radius:18px;overflow:hidden;margin-bottom:0} .fxpanel.ai{background:linear-gradient(180deg,rgba(77,157,255,.07),rgba(77,157,255,.015));box-shadow:inset 0 0 0 1.5px rgba(77,157,255,.45)} .fxpanel.you{background:linear-gradient(180deg,rgba(0,255,136,.06),rgba(0,255,136,.012));box-shadow:inset 0 0 0 1.5px rgba(0,255,136,.45);margin-bottom:12px} .fxband{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid rgba(77,157,255,.25)} .fxpanel.you .fxband{border-bottom-color:rgba(0,255,136,.25)} .fxico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;background:rgba(77,157,255,.12);box-shadow:inset 0 0 0 1px rgba(77,157,255,.5)} .fxpanel.you .fxico{background:rgba(0,255,136,.1);box-shadow:inset 0 0 0 1px rgba(0,255,136,.5)} .fxband .tt{flex:1} .fxband .tt b{display:block;font-size:14.5px;letter-spacing:.02em} .fxband .tt small{display:block;font-size:10px;color:var(--ta-text-dim);margin-top:1px} .fxtag{font:700 8px "JetBrains Mono",monospace;letter-spacing:.1em;border-radius:6px;padding:4px 8px;color:#bcd7ff;background:rgba(77,157,255,.14)} .fxtag.you{color:#04140c;background:#00ff88;box-shadow:0 0 10px rgba(0,255,136,.4)} .fxbody{padding:12px 15px 16px} .fxlab{font:700 9px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--ta-text-faint);margin:15px 0 7px} .fxbody .fxlab:first-child{margin-top:0} .fxverdict{background:rgba(255,255,255,.03);border-radius:13px;padding:13px 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .fxverdict.neg{background:rgba(255,77,77,.08);box-shadow:inset 0 0 0 1px rgba(255,77,77,.35)} .fxverdict.pos{background:rgba(0,255,136,.06);box-shadow:inset 0 0 0 1px rgba(0,255,136,.3)} .fxverdict .v1{font:700 15px "JetBrains Mono",monospace;letter-spacing:.02em} .fxverdict .v1.neg{color:#ff4d4d;text-shadow:0 0 14px rgba(255,77,77,.4)} .fxverdict .v1.pos{color:#00ff88;text-shadow:0 0 14px rgba(0,255,136,.4)} .fxverdict .v2{font-size:11px;color:var(--ta-text-dim);margin-top:5px;line-height:1.55} .fxverdict .v2 b{color:var(--ta-text)} .fxsplit{display:flex;height:20px;border-radius:6px;overflow:hidden;font:700 8.5px "JetBrains Mono",monospace} .fxsplit .s{background:linear-gradient(180deg,#1aff9d,#00c46a);color:#04140c;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden} .fxsplit .l{background:linear-gradient(180deg,#ff6b6b,#d92f2f);color:#1c0505;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden} .fxnote{font-size:10px;color:var(--ta-text-dim);line-height:1.5;margin-top:6px} .fxnote b{color:var(--ta-text)} .fxstats{display:flex;gap:8px} .fxstats .stat{flex:1;background:rgba(0,0,0,.28);border-radius:11px;padding:10px 11px} .fxstats .stat b{display:block;font:600 13px "JetBrains Mono",monospace} .fxstats .stat small{display:block;font-size:9px;color:var(--ta-text-dim);margin-top:3px;line-height:1.4} .fxlad{font:500 11px "JetBrains Mono",monospace} .fxlrow{display:flex;align-items:center;gap:8px;padding:5px 0} .fxlrow .px{width:66px;color:var(--ta-text-dim)} .fxlrow .desc{flex:1;font-size:9.5px;color:var(--ta-text-faint);font-family:Inter,-apple-system,sans-serif} .fxz{font:700 7.5px "JetBrains Mono",monospace;letter-spacing:.08em;border-radius:5px;padding:3px 7px} .fxz.sell{color:#ff4d4d;background:rgba(255,77,77,.12)} .fxz.buy{color:#00ff88;background:rgba(0,255,136,.1)} .fxst{font:700 7.5px "JetBrains Mono",monospace;letter-spacing:.08em;border-radius:5px;padding:3px 7px} .fxst.testing{color:#ffb020;background:rgba(255,176,32,.12)} .fxst.near{color:#bcd7ff;background:rgba(77,157,255,.12)} .fxst.watch{color:var(--ta-text-faint);background:rgba(255,255,255,.05)} .fxmark{text-align:center;color:#eafff4;font:700 11px "JetBrains Mono",monospace;letter-spacing:.05em;padding:7px 0;border-top:1px dashed rgba(255,255,255,.12);border-bottom:1px dashed rgba(255,255,255,.12);text-shadow:0 0 10px rgba(0,255,136,.4)} .fxtape .fxtl{display:flex;gap:8px;font:500 10px "JetBrains Mono",monospace;padding:3.5px 0;border-bottom:1px solid rgba(255,255,255,.04)} .fxtape .fxtl.block{background:rgba(255,176,32,.05)} .fxtape .fxtl .t{width:52px;color:var(--ta-text-faint)} .fxhand{display:flex;align-items:center;gap:10px;padding:18px 6px} .fxhand .ln{flex:1;height:1px;background:linear-gradient(90deg,rgba(77,157,255,.4),rgba(0,255,136,.4))} .fxhand .txt{font:600 9px "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--ta-text-dim);text-align:center;line-height:1.6} .fxprefill{display:flex;gap:8px;background:rgba(77,157,255,.07);border-radius:10px;padding:8px 11px;font-size:10px;color:var(--ta-text-dim);margin-bottom:12px} .fxprefill b{color:#bcd7ff;font-weight:600} .fxside{display:flex;gap:8px;margin-bottom:5px} .fxside .sb{flex:1;border-radius:11px;padding:13px 0;font:700 13px Inter,-apple-system,sans-serif;background:var(--ta-surface-2,#181818);color:var(--ta-text-faint);text-align:center} .fxside .sb.on-long{color:#04140c;background:linear-gradient(180deg,#1aff9d,#00c46a);box-shadow:0 0 16px rgba(0,255,136,.4)} .fxside .sb.on-short{color:#1c0505;background:linear-gradient(180deg,#ff6b6b,#e33d3d);box-shadow:0 0 16px rgba(255,77,77,.4)} .fxeditnote{font-size:9px;color:var(--ta-text-faint);text-align:center;margin-bottom:12px} .fxrow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05)} .fxrow .l{font-size:11.5px;color:var(--ta-text-dim)} .fxrow .l small{display:block;font-size:9px;color:var(--ta-text-faint);margin-top:2px} .fxrow .v{font:600 13px "JetBrains Mono",monospace} .fxrow .v small{font:500 9px "JetBrains Mono",monospace;color:var(--ta-text-faint);margin-left:5px} .fxsign{width:100%;border:0;border-radius:13px;padding:16px 0;font:700 13.5px Inter,-apple-system,sans-serif;margin-top:14px;color:var(--ta-text-faint);background:var(--ta-surface-2,#181818);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)} .fxsign:disabled{opacity:.75} .fxsignfoot{text-align:center;font:500 8.5px "JetBrains Mono",monospace;color:var(--ta-text-faint);letter-spacing:.05em;margin-top:9px;line-height:1.7} /* ---- M2 manual-trade (testnet) UI — dark until ta_manual_trade='on' ---- */ .fxconnect{width:100%;border:0;border-radius:13px;padding:15px 0;font:700 13.5px Inter,-apple-system,sans-serif;color:#04140c;background:linear-gradient(180deg,#4d9dff,#2f7fe6);box-shadow:0 0 18px rgba(77,157,255,.4)} .fxwallet{display:flex;align-items:center;gap:8px;font:600 9px "JetBrains Mono",monospace;letter-spacing:.06em;margin-bottom:10px} .fxwallet .w{color:#ffb020;border:1px solid rgba(255,176,32,.4);border-radius:999px;padding:4px 9px;background:rgba(255,176,32,.06)} .fxwallet .n{color:#bcd7ff;border:1px solid rgba(77,157,255,.4);border-radius:999px;padding:4px 9px;background:rgba(77,157,255,.08)} .fxwallet .e{margin-left:auto;color:var(--ta-text-dim)} .fxsign.live{color:#04140c;background:linear-gradient(180deg,#18ffa0,#00d574);box-shadow:0 0 22px rgba(0,255,136,.45)} .fxsign.live:disabled{opacity:.55} .fxcancel{font:700 8.5px "JetBrains Mono",monospace;color:#ff4d4d;border:1px solid rgba(255,77,77,.35);border-radius:7px;padding:4px 9px} .fxmodalwrap{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.72);display:flex;align-items:flex-end;backdrop-filter:blur(2px)} .fxmodal{width:100%;background:var(--ta-surface-2,#181818);border-radius:20px 20px 0 0;padding:18px 18px 28px;box-shadow:0 -4px 40px rgba(0,255,136,.12)} .fxmodal>b{font-size:16px} .fxrestate{font-size:13px;line-height:1.55;background:var(--ta-surface,#141414);border-radius:11px;padding:11px 13px;margin:12px 0 10px} .fxrestate b{color:#00ff88} .fxchecks{font:500 10px "JetBrains Mono",monospace;color:var(--ta-text-dim);line-height:1.8;margin-bottom:12px} .fxmbtns{display:flex;gap:10px} .fxmbtns .c{flex:1.2;border-radius:12px;padding:14px 0;font:700 13px Inter,-apple-system,sans-serif;background:var(--ta-surface-3,#1f1f1f);text-align:center} .fxmbtns .s{flex:1;border-radius:12px;padding:14px 0;font:700 12px Inter,-apple-system,sans-serif;color:#04140c;background:linear-gradient(180deg,#18ffa0,#00d574);box-shadow:0 0 18px rgba(0,255,136,.4);text-align:center} /* ---- Home two-tier tile (P2, flag-gated — Babak 2026-08-04) ---- */ .tiles.t2wrap{grid-template-columns:1fr;display:grid;gap:8px} .tile.t2{width:100%} .tile.t2 b{display:inline;font-size:15px;font-family:"JetBrains Mono",monospace} .t2row{display:flex;align-items:baseline;gap:6px;margin-top:5px} .t2row .t2l{font-size:8.5px;letter-spacing:.04em;color:var(--ta-text-dim);min-width:118px} .t2row .t2lean{font-size:9px;color:var(--ta-text-faint);margin-left:auto} .t2row.mut b{color:var(--ta-text-dim);font-size:13px} .t2cap{font-size:9.5px;color:var(--ta-text-faint);line-height:1.55;padding:8px 2px 2px} .t2cap b{color:var(--ta-text-dim);font-weight:600} /* ---- reactor Home (HOME_REACTOR, Babak-approved mockup 2026-08-05) ---- */ .armpillh{display:inline-flex;align-items:center;gap:6px;font:700 8.5px ui-monospace,monospace; color:var(--ta-text-dim);border:1px solid var(--ta-line);border-radius:20px;padding:4px 9px} .armpillh.on{color:var(--ta-pos);border-color:#164a2e;background:rgba(0,255,136,.06)} .armpillh.on::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ta-pos); box-shadow:0 0 7px var(--ta-pos)} /* live-capital box leading the positions area (Babak pick (b), 2026-08-05): the REAL position rides the paper-card treatment with a red accent */ .poscard.real{border-color:#5c2430;background:linear-gradient(180deg,rgba(255,80,100,.05),transparent 40%)} .poscard .pmeta.realtag{color:var(--ta-neg);font-weight:700} /* ---- Road-to-live RUNWAY (Babak picked Concept 1, 2026-08-05) ---- */ .rtl-track{position:relative;height:64px;margin:6px 2px 0} .rtl-rail{position:absolute;top:22px;left:6px;right:6px;height:2px;background:#20302a} .rtl-rail .done{position:absolute;left:0;top:0;bottom:0;background:var(--ta-pos);box-shadow:0 0 8px rgba(0,255,136,.6)} .rtl-rail .dash{position:absolute;right:0;top:0;bottom:0; background:repeating-linear-gradient(90deg,#2a3a32 0 6px,transparent 6px 12px)} .rtl-stop{position:absolute;top:14px;width:72px;margin-left:-36px;text-align:center} .rtl-stop i{display:block;width:11px;height:11px;border-radius:50%;margin:0 auto 4px; background:#131c17;border:2px solid var(--ta-text-faint)} .rtl-stop.on i{background:var(--ta-pos);border-color:var(--ta-pos);box-shadow:0 0 12px var(--ta-pos)} .rtl-stop.next i{border-color:#ffb020} .rtl-stop small{display:block;font:600 7.5px/1.25 "JetBrains Mono",monospace;color:var(--ta-text-dim)} .rtl-stop.on small{color:var(--ta-pos)} .rtl-stop.next small{color:#ffb020} .rtl-stop .when{font-weight:500;color:var(--ta-text-faint);font-size:7px} .rtl-lbl{display:flex;justify-content:space-between;font:600 8.5px "JetBrains Mono",monospace; color:var(--ta-text-dim);margin:10px 0 4px} .rtl-lbl b{color:var(--ta-text)} .rtl-segbar{display:flex;gap:2px} .rtl-segbar i{flex:1;height:9px;border-radius:2px;background:#131c17;border:1px solid #1d2a22} .rtl-segbar i.trial{background:#17251d;border-color:#24382c;box-shadow:inset 0 0 3px rgba(255,176,32,.25)} .rtl-segbar i.won{background:var(--ta-pos);border-color:var(--ta-pos);box-shadow:0 0 5px rgba(0,255,136,.5)} .rtl-cap{font:500 8px "JetBrains Mono",monospace;color:var(--ta-text-faint);margin-top:3px} .rtl-lanes{margin-top:9px;border-top:1px solid var(--ta-line);padding-top:7px} .rtl-lane{display:flex;align-items:center;gap:8px;font:600 8.5px "JetBrains Mono",monospace;padding:2.5px 0} .rtl-lane .tag{width:44px;text-align:center;border-radius:4px;padding:2px 0;font-size:8px} .rtl-lane.real .tag{background:#2a1218;color:var(--ta-neg)} .rtl-lane.paper .tag{background:#132015;color:var(--ta-pos)} .rtl-lane svg{flex:1;height:14px;min-width:0} .rtl-lane .st{color:var(--ta-text-dim);font-weight:500;text-align:right;max-width:132px} .rtl-sheet{margin-top:9px;background:#0a100d;border:1px solid #23342b;border-radius:10px;padding:9px 11px} .rtl-sheet .sh{display:flex;justify-content:space-between;font:700 9.5px "JetBrains Mono",monospace;color:#ffb020} .rtl-sheet .sh .x{color:var(--ta-text-faint)} .rtl-sheet p{font:400 10px/1.5 -apple-system,sans-serif;color:var(--ta-text-dim);margin:5px 0 5px} /* truth-audit 2026-08-05: two-gate section labels + unmistakable glow */ .rtl-sec{font:700 8px "JetBrains Mono",monospace;color:var(--ta-text-faint); letter-spacing:.08em;margin:2px 0 5px;padding-bottom:3px;border-bottom:1px dashed #1c2a22} .rtl-segbar i.trial{opacity:.75} .rtl-cap b{font-weight:700} /* ============================ SONAR — the orderflow desk ============================ Babak-approved mockup 2026-08-06 (outputs/sonar-mobile-mockup/index.html), ported onto the app's own tokens. Every class is `sn`-prefixed so nothing here can reach another screen. Display only — no control in this block writes. */ .snstage{display:flex;flex-direction:column;gap:5px;margin:-2px 0 3px;} /* THE CHART IS THE PRIMARY VIEW (2026-08-06 restructure). 212px was a lane on a scrolling page; the Chart segment gives it the screen. `dvh` so it adapts to the device rather than assuming a 14 Pro, clamped so a small phone still has room for the ladder beneath and a large one does not run away with it. */ /* sized against the space actually LEFT, not the raw viewport: the header, the segment bar, the chip row, the preset row and the tab bar take ~300px between them, and `66dvh` overflowed the shell while under-filling Safari. */ .snstage.seg-chart .snchart{height:clamp(280px, calc(100dvh - 300px), 600px);} /* TRADE's chart: the SAME desk as the Chart tab — every layer its toggles expose — at 240px, the old single-scroll Sonar chart plus ~13%. It is shorter than Chart's because the flow read, the tape and the ticket share the page with it, not because it draws less. */ .snstage.seg-trade .snchart{height:240px;border-radius:0 0 12px 12px;} /* the price strip sits directly on top of the sparkline, as one card */ .snpxs{flex:0 0 auto;display:flex;align-items:baseline;gap:9px;padding:8px 11px 5px; background:var(--ta-surface-1);border-radius:12px 12px 0 0; box-shadow:inset 1px 1px 0 var(--ta-hairline), inset -1px 0 0 var(--ta-hairline);} .snpxs .sym{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9px; font-weight:700;letter-spacing:.06em;color:var(--ta-text-faint);} .snpxs .px{font-size:19px;font-weight:700;letter-spacing:-.01em;} .snpxs .chg{font-size:11px;font-weight:700;} .snpxs .r{margin-left:auto;display:flex;align-items:center;gap:6px;} .snstage.seg-trade{gap:0;} .snstage.seg-trade .sncvdwrap{margin-top:5px;} .snchart{flex:0 0 auto;height:212px;border-radius:12px;position:relative;overflow:hidden; background:linear-gradient(180deg,#0c1110,#080a09 72%);box-shadow:inset 0 0 0 1px var(--ta-hairline);} .snchart canvas{position:absolute;inset:0;width:100%;height:100%;display:block;} /* GESTURES (step 2). `pan-y` is the whole trick on the chart body: the browser keeps vertical scrolling (a drag down is the user reading the desk, not zooming), while pinch and horizontal drags come to us — and pinch-zoom of the PAGE is off, so two fingers mean the chart. The two axis strips take `touch-action:none` because a drag on either is always ours. */ .snchart{touch-action:pan-y;} .snyax,.snxax{position:absolute;z-index:4;touch-action:none;background:transparent;} /* the price gutter — PADR (50px) in sonar.js, stopping above the time axis */ .snyax{top:0;right:0;width:50px;bottom:15px;cursor:ns-resize;} /* the time axis strip across the full width */ .snxax{left:0;right:0;bottom:0;height:15px;cursor:ew-resize;} /* SENS — the heatmap's liquidity floor. Bottom-right, clear of the toast (bottom-left) and the full-screen control (top-right). */ /* bottom-LEFT: the right edge belongs to the depth histogram now */ .snsens{position:absolute;z-index:6;left:9px;bottom:19px;display:flex;align-items:center;gap:6px; padding:3px 7px;border-radius:8px;background:rgba(10,10,10,.6); box-shadow:inset 0 0 0 1px var(--ta-hairline);backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);touch-action:none;} .snsens .k{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:7.5px;font-weight:700; letter-spacing:.09em;color:var(--ta-text-faint);} /* the live count of what survives the floor — it is the SAME number the field was drawn with, so the readout can never be a second opinion */ .snsens .v{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:8px;font-weight:700; color:var(--ta-text-dim);white-space:nowrap;} .snsens input[type=range]{-webkit-appearance:none;appearance:none;width:64px;height:16px; background:transparent;margin:0;} .snsens input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px; background:linear-gradient(90deg,rgba(0,255,136,.5),rgba(255,214,10,.75));} .snsens input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none; width:12px;height:12px;border-radius:50%;background:var(--ta-text);margin-top:-4.5px; box-shadow:0 0 5px rgba(0,0,0,.6);} .snsens input[type=range]::-moz-range-track{height:3px;border-radius:2px; background:linear-gradient(90deg,rgba(0,255,136,.5),rgba(255,214,10,.75));} .snsens input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%; background:var(--ta-text);} /* the zoom readout lives ON the time axis (drawn by sonar.js), so it can never collide with the SENS control or the depth profile */ .snovl{position:absolute;z-index:3;pointer-events:none; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;} .snohlc{top:6px;left:9px;font-size:9px;color:rgba(154,154,154,.8);letter-spacing:.02em;} /* under the OHLC line, not the bottom-left corner — that corner is the SENS control's now, and the bottom strip is the time axis */ .sntoast{left:9px;top:22px;max-width:74%;font-size:9.5px;font-weight:700;padding:5px 8px; border-radius:6px;opacity:0;transform:translateY(5px);transition:opacity .3s,transform .3s; background:rgba(0,0,0,.62);} .sntoast.show{opacity:1;transform:none;} /* perp context strip — scrolls sideways, fades at the edge so it reads as more */ .snpwrap{position:relative;flex:0 0 auto;} .snpwrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:26px;pointer-events:none; border-radius:0 9px 9px 0;background:linear-gradient(90deg,rgba(18,18,18,0),rgba(18,18,18,.96));} .snstrip{height:27px;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9px;white-space:nowrap; background:var(--ta-surface-1);border-radius:9px;box-shadow:inset 0 0 0 1px var(--ta-hairline);padding:0 4px;} .snstrip::-webkit-scrollbar{display:none;} .snstrip .it{padding:0 8px;display:flex;align-items:center;gap:5px;height:15px; border-right:1px solid var(--ta-hairline);} .snstrip .it:last-child{border-right:none;} .snstrip .k{color:var(--ta-text-faint);letter-spacing:.05em;} .snstrip .v{font-weight:700;} .sncvdwrap{flex:0 0 auto;height:58px;border-radius:12px;position:relative;overflow:hidden; background:linear-gradient(180deg,#0c1110,#080a09 72%);box-shadow:inset 0 0 0 1px var(--ta-hairline);} .sncvdwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;} .sncvdlab{position:absolute;top:5px;left:9px;z-index:2;font-size:8.5px;font-weight:700; max-width:54%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; letter-spacing:.05em;color:var(--ta-text-dim);pointer-events:none; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;} .sncvdval{position:absolute;top:4px;right:9px;z-index:2;font-size:10px;font-weight:700;pointer-events:none; max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* depth ladder */ .snladhd{display:flex;gap:6px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:8px; color:var(--ta-text-faint);letter-spacing:.07em;padding:3px 0 5px;} .snladhd .p{flex:0 0 58px;}.snladhd .t{flex:1;} .snladhd .s{flex:0 0 46px;text-align:right;}.snladhd .d{flex:0 0 40px;text-align:right;} .snlv{display:flex;align-items:center;gap:6px;padding:3.5px 0;} .snlv .p{flex:0 0 58px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10.5px; color:var(--ta-text-dim);} .snlv .t{flex:1;height:10px;border-radius:3px;background:var(--ta-surface-3);position:relative;overflow:hidden;} .snlv .t i{position:absolute;top:0;bottom:0;right:0;border-radius:3px;transition:width .35s ease-out;} .snlv .t i.a{background:linear-gradient(270deg,rgba(255,77,77,.9),rgba(255,77,77,.3));} .snlv .t i.b{background:linear-gradient(270deg,rgba(0,255,136,.9),rgba(0,255,136,.28));} .snlv .s{flex:0 0 46px;text-align:right;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:10px;color:var(--ta-text-dim);} .snlv .s.warn{color:var(--ta-warn);} .snlv .d{flex:0 0 40px;text-align:right;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-size:9px;color:var(--ta-text-faint);} .snspread{display:flex;align-items:center;gap:6px;margin:5px 0;padding:6px 8px;border-radius:7px; background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--ta-hairline); font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10px;} .snspread .big{font-size:12.5px;font-weight:700;color:var(--ta-pos);} .snspread .r{margin-left:auto;color:var(--ta-text-faint);font-size:9px;text-align:right;} /* absorb/pull record + tape */ .snev{display:flex;gap:7px;align-items:baseline;padding:5.5px 0;border-top:1px solid var(--ta-hairline); font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10px;} .snev:first-child{border-top:none;} .snev .tm{flex:0 0 38px;color:var(--ta-text-faint);} .snev .wh{flex:1;color:var(--ta-text-dim);min-width:0;overflow:hidden;text-overflow:ellipsis;} .snev .rs{flex:0 0 72px;text-align:right;font-weight:700;} .sntape{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10px; display:flex;flex-direction:column;} .sntp{display:flex;justify-content:space-between;gap:8px;padding:3.5px 0; border-top:1px solid rgba(255,255,255,.045);} .sntp:first-child{border-top:none;} .sntp.fresh{animation:sntapein .35s ease-out;} @keyframes sntapein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .sntp .s{flex:0 0 38px;font-weight:700;} .sntp .q{flex:1;text-align:right;color:var(--ta-text-dim);min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;} .sntp .px{flex:0 0 66px;text-align:right;color:var(--ta-text-faint);} .snnote{font-size:10px;color:var(--ta-text-faint);line-height:1.5;padding:4px 0;} /* the docked TESTNET ticket — display shell; manual.js owns every signature */ .sntk{position:absolute;left:8px;right:8px;bottom:calc(var(--tabbar-h) + 6px);z-index:7;cursor:pointer; background:linear-gradient(180deg,#171105,#111111 72%);border-radius:14px; box-shadow:inset 0 0 0 1px rgba(255,176,32,.35), 0 -8px 26px rgba(0,0,0,.65);padding:8px 10px 9px;} .sntk.armed{box-shadow:inset 0 0 0 1px rgba(0,255,136,.55), 0 0 24px rgba(0,255,136,.15), 0 -8px 26px rgba(0,0,0,.65);} .sntkrow{display:flex;align-items:center;gap:8px;} .sntkfoot{font-size:8.5px;color:var(--ta-text-faint);margin-top:5px;line-height:1.4; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;display:flex;align-items:center;gap:6px; flex-wrap:wrap;} .sntkfoot b{color:var(--ta-text-dim);font-weight:600;} .snside{display:inline-flex;background:#0c0c0c;border-radius:7px;padding:2px;flex:0 0 auto; box-shadow:inset 0 0 0 1px var(--ta-hairline);} .snside span{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700; padding:5px 8px;border-radius:5px;color:var(--ta-text-faint);} .snside span.on{background:rgba(0,255,136,.14);color:var(--ta-pos);box-shadow:inset 0 0 0 1px rgba(0,255,136,.4);} .snside span.on.sh{background:rgba(255,77,77,.14);color:var(--ta-neg);box-shadow:inset 0 0 0 1px rgba(255,77,77,.4);} .sntkmeta{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9px; color:var(--ta-text-dim);line-height:1.4;flex:1;min-width:0;} .snsign{flex:0 0 auto;text-align:center;padding:9px 11px;border-radius:9px;cursor:pointer;min-height:34px; display:flex;align-items:center;justify-content:center; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:700; letter-spacing:.03em;background:linear-gradient(180deg,rgba(255,176,32,.24),rgba(255,176,32,.08)); color:var(--ta-warn);box-shadow:inset 0 0 0 1px rgba(255,176,32,.5);} .snsign:active{opacity:.7;} /* review sheet */ .snshade{position:absolute;inset:0;background:rgba(0,0,0,.66);z-index:10;opacity:0; pointer-events:none;transition:opacity .22s;} .snshade.on{opacity:1;pointer-events:auto;} .snsheet{position:absolute;left:0;right:0;bottom:0;z-index:11;background:var(--ta-surface-1); border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.7), inset 0 0 0 1px var(--ta-hairline-strong); transform:translateY(102%);transition:transform .28s cubic-bezier(.22,1,.36,1); padding:10px 13px calc(16px + env(safe-area-inset-bottom,0px));max-height:84%;overflow-y:auto;} .snsheet.on{transform:none;} .sngrab{width:36px;height:4px;border-radius:3px;background:var(--ta-hairline-strong);margin:2px auto 10px;} .snsheet h2{font-size:15px;font-weight:800;} .snshsub{font-size:10.5px;color:var(--ta-text-faint);margin:2px 0 8px;} .snsheetclose{margin-top:9px;padding:12px;border-radius:10px;text-align:center;cursor:pointer; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:700; background:var(--ta-surface-2);color:var(--ta-text-dim);box-shadow:inset 0 0 0 1px var(--ta-hairline);} /* ---- P4-10: the three promotion gates, per signal on the report card ---- Three equal cells, each one gate: the verdict the scorer wrote and the one number that gate turns on. Colour carries the verdict, never the size of the number — a big red number and a small red number are the same answer. */ .gatelegend{font-size:9.5px;color:var(--ta-text-faint);line-height:1.6; padding:2px 0 8px;border-bottom:1px solid var(--ta-hairline);margin-bottom:8px;} .gatelegend b{color:var(--ta-text-dim);font-weight:700;} .gatelegend i{font-style:normal;font-weight:700;color:var(--ta-text-dim);} .gaterow{display:flex;gap:5px;margin:-2px 0 7px;} .gaterow .g{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px; padding:5px 6px;border-radius:8px;background:var(--ta-surface-2); box-shadow:inset 0 0 0 1px var(--ta-hairline);} .gaterow .g .h{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:8px; font-weight:700;letter-spacing:.07em;color:var(--ta-text-faint); display:flex;align-items:center;gap:4px;white-space:nowrap;} .gaterow .g .h i{font-style:normal;font-size:10px;line-height:1;} .gaterow .g .n{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:9.5px; font-weight:700;color:var(--ta-text-dim);overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} /* the economic gate's second number (the CI lower bound) — one line each, so neither truncates in a third of a phone's width */ .gaterow .g .n2{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:8.5px; font-weight:700;opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .gaterow .g.pass{background:rgba(0,255,136,.09);box-shadow:inset 0 0 0 1px rgba(0,255,136,.32);} .gaterow .g.pass .h,.gaterow .g.pass .n,.gaterow .g.pass .n2{color:var(--ta-pos);} .gaterow .g.fail{background:rgba(255,77,77,.09);box-shadow:inset 0 0 0 1px rgba(255,77,77,.30);} .gaterow .g.fail .h,.gaterow .g.fail .n,.gaterow .g.fail .n2{color:var(--ta-neg);} .gaterow .g.wait{background:rgba(255,176,32,.07);box-shadow:inset 0 0 0 1px rgba(255,176,32,.24);} .gaterow .g.wait .h{color:var(--ta-warn);} /* the tag the card carries while the protocol itself is under review */ .gatenote{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:8px; font-weight:700;letter-spacing:.04em;color:var(--ta-warn);opacity:.85; margin:-4px 0 8px;} /* ---- Sonar: the study sub-panes (RSI · MACD · ATR) ---- Each is its own short lane under the CVD one, sharing the chart's time axis. They are `display:none` until their toggle is on, so an unused pane costs no height and no frame. */ .snpanes{display:flex;flex-direction:column;gap:5px;} .snpane{flex:0 0 auto;height:46px;border-radius:12px;position:relative;overflow:hidden; background:var(--ta-surface-1);box-shadow:inset 0 0 0 1px var(--ta-hairline);} .snpane canvas{position:absolute;inset:0;width:100%;height:100%;display:block;} .snpanelab{position:absolute;top:3px;left:6px;z-index:2;pointer-events:none; font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:8px;font-weight:700; letter-spacing:.06em;color:var(--ta-text-faint); padding:2px 4px;border-radius:5px;background:rgba(10,10,10,.66);} .snpaneval{position:absolute;top:3px;right:6px;z-index:2;pointer-events:none; font-size:8.5px;font-weight:700;color:var(--ta-text-dim); padding:2px 4px;border-radius:5px;background:rgba(10,10,10,.66);} /* in full screen the panes keep their real height; only the chart flexes */ .snfswrap .snpanes{flex:0 0 auto;} @media (orientation:landscape){ .snfswrap .snpane{height:40px;} } /* the spot total sits beside the perp one on the CVD lane's readout */ .sncvdval .sp{color:#4aa3ff;margin-left:6px;font-weight:700;} /* ---- Sonar: the INDICATOR MENU ---- The same bottom-sheet idiom as the ticket review, with its own node so the two can never fight over one element. Rows are thumb-sized; every row carries the source line under its name. */ .chiprow .chip.tog.ind{color:var(--ta-text);background:var(--ta-surface-2); box-shadow:inset 0 0 0 1px var(--ta-hairline-strong);} .chiprow .chip.tog.ind .n{font-style:normal;margin-left:5px;padding:1px 5px;border-radius:6px; background:rgba(0,255,136,.16);color:var(--ta-pos);font-size:8.5px;font-weight:700;} /* ABOVE THE FULL-SCREEN CHART (Babak 2026-08-06: the menu would not open up there). The trigger was fine — the chip row is adopted into `.snfswrap` and the tap fired — but `.snfswrap` is a `z-index:60` fixed layer and this sheet sat at 11, so it opened UNDERNEATH the chart every time. It and its shade now own the two levels above the wrapper, and nothing else on this surface goes that high — 66/65 sits ABOVE the wrapper and still BELOW manual.js's signing modal at 70, which must never be covered by a display menu. `overscroll-behavior:contain` stops a pull at the top of the sheet from rubber-banding whatever is behind it while the drag-to-dismiss runs. */ .snindp{position:absolute;left:0;right:0;bottom:0;z-index:66;background:var(--ta-surface-1); overscroll-behavior:contain; border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.6); transform:translateY(102%);transition:transform .28s cubic-bezier(.22,1,.36,1); padding:10px 13px calc(16px + env(safe-area-inset-bottom,0px));max-height:84%;overflow-y:auto;} .snindp.on{transform:none;} .snindshade{z-index:65;} /* the top of the sheet is the drag zone, so it must never be claimed by the browser's own panning — the handle alone is a 4px-tall target */ .snindp .sngrab{touch-action:none;cursor:grab;} .snindp.dragging{transition:none;} .snindp h2{font-size:15px;font-weight:800;} .snindsub{font-size:10.5px;color:var(--ta-text-faint);margin:2px 0 10px;line-height:1.45;} .snindg{margin-bottom:10px;} .snindgh{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:8px;font-weight:700; letter-spacing:.09em;color:var(--ta-text-faint);text-transform:uppercase;margin:0 0 4px;} .snindrow{display:flex;align-items:center;gap:10px;padding:8px 2px;cursor:pointer; border-top:1px solid var(--ta-hairline);min-height:44px;} .snindrow:first-of-type{border-top:none;} .snindrow:active{opacity:.7;} .snindrow .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;} .snindrow .l b{font-size:12px;font-weight:600;color:var(--ta-text-dim);} .snindrow.on .l b{color:var(--ta-text);} .snindrow .src{font-size:9.5px;color:var(--ta-text-faint);line-height:1.35;} .snindrow .sw{flex:0 0 38px;height:22px;border-radius:12px;background:var(--ta-surface-3); box-shadow:inset 0 0 0 1px var(--ta-hairline);position:relative;transition:background .16s;} .snindrow .sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%; background:var(--ta-text-faint);transition:transform .16s, background .16s;} .snindrow.on .sw{background:rgba(0,255,136,.20);box-shadow:inset 0 0 0 1px rgba(0,255,136,.45);} .snindrow.on .sw i{transform:translateX(16px);background:var(--ta-pos);} /* ---- THE CHART LEGEND (Babak 2026-08-07) ---- Same sheet furniture as the indicator menu — the desk has one idiom for "a panel slides up from the bottom" — but the rows are READING rows, not controls: a swatch drawn in the layer's own colour, a name, and a plain sentence. Nothing in here is tappable except DONE, which is why there is no :active state and no cursor:pointer on a row. */ .snhelpp{position:absolute;left:0;right:0;bottom:0;z-index:66;background:var(--ta-surface-1); overscroll-behavior:contain; border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.6); transform:translateY(102%);transition:transform .28s cubic-bezier(.22,1,.36,1); padding:10px 13px calc(16px + env(safe-area-inset-bottom,0px));max-height:86%;overflow-y:auto;} .snhelpp.on{transform:none;} .snhelpshade{z-index:65;} .snhelpp .sngrab{touch-action:none;cursor:grab;} .snhelpp.dragging{transition:none;} .snhelpp h2{font-size:15px;font-weight:800;} .snlgg{margin-bottom:12px;} .snlgg .offtag{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:7.5px; font-weight:700;color:var(--ta-warn);letter-spacing:.04em;text-transform:none;} .snlgrow{display:flex;align-items:flex-start;gap:10px;padding:9px 2px; border-top:1px solid var(--ta-hairline);} .snlgrow:first-of-type{border-top:none;} .snlgrow .l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;} .snlgrow .l b{font-size:12px;font-weight:600;color:var(--ta-text);} .snlgrow .tx{font-size:10.5px;color:var(--ta-text-faint);line-height:1.5;} .snlgrow .tx b{font-weight:700;color:var(--ta-text-dim);} .snlgrow .tx b.pos{color:var(--ta-pos);} .snlgrow .tx b.neg{color:var(--ta-neg);} .snlgrow .tx b.warn{color:var(--ta-warn);} /* the swatch column: a fixed 34px gutter so every row's text starts on the same left edge however the swatch is drawn */ .snlgrow .sw{flex:0 0 34px;display:flex;flex-direction:column;justify-content:center; align-items:center;gap:3px;padding-top:3px;min-height:22px;} .snlgrow .sw i{display:block;} .snlgrow .sw .ramp{width:30px;height:7px;border-radius:2px;} .snlgrow .sw .ln{width:30px;height:0;} .snlgrow .sw .dt{width:11px;height:11px;border-radius:50%;} .snlgrow .sw .bx{width:13px;height:11px;border-radius:2px;} .snlgrow .sw .gl{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px; font-weight:800;line-height:1;} /* one column of the heatmap, so "left to right is time" has a picture */ .snlgrow .sw .col{width:8px;height:20px;border-radius:1px; background:linear-gradient(180deg,rgba(255,92,92,.65),rgba(255,92,92,.15) 42%, rgba(0,255,136,.15) 58%,rgba(0,255,136,.65));} .snlgrow .sw .warn-i{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:13px; font-weight:800;color:var(--ta-warn);line-height:1;} /* the docked ticket floats over the rail — give the last card room to clear it */ #snrail::after{content:"";display:block;height:78px;} /* Sonar's chip-row toggles: thumb-sized tap targets, and an OFF state that reads as off rather than as a dead feed (that is what the amber chips say). */ .chiprow .chip.tog{cursor:pointer;padding:5px 8px;min-height:26px;display:inline-flex;align-items:center;} .chiprow .chip.tog:active{opacity:.65;} .chiprow .chip.off{color:var(--ta-text-faint);background:var(--ta-surface-2); box-shadow:inset 0 0 0 1px var(--ta-hairline);} /* ---- Sonar: the primary segmented nav — Chart · Trade · System ---- The shipping `.seg` / `.o` control at nav size, so the desk has ONE idiom for "pick one of these" rather than a new component per level. */ /* SHORTER (Babak 2026-08-06: the nav was taking page the chart wants). The saving comes from the padding AROUND the control, not from the control itself — each segment stays ~26px tall and 120px wide, which is inside what iOS uses for its own segmented control, and a mis-tap lands on a neighbouring segment rather than on nothing. The row below it tightens too, so the block above the chart loses real height instead of just this one bar. */ .snsegbar{display:flex;padding:4px 12px 0;} .snsegbar .seg{flex:1;padding:2px;} .snsegbar .seg .o{flex:1;text-align:center;font-size:11px;font-weight:700;padding:6px 0; letter-spacing:.02em;} /* Sonar stacks three rows of chrome above the chart — trim the gaps between them (the shared .chiprow keeps its own padding everywhere else) */ .snsegbar + .chiprow{padding-top:5px;padding-bottom:0;} .mkpreset{padding-top:5px;} /* ---- Sonar: the preset row ---- Twenty-four switches is a menu, not a decision. These are the curated sets. */ .mkpreset{display:flex;gap:6px;padding:6px 12px 0;align-items:center;overflow-x:auto; scrollbar-width:none;flex-wrap:nowrap;} .mkpreset::-webkit-scrollbar{display:none;} .mkpreset .lab{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:8px; font-weight:700;letter-spacing:.09em;color:var(--ta-text-faint);flex:0 0 auto;} .mkpreset .chip{flex:0 0 auto;cursor:pointer;min-height:26px;display:inline-flex; align-items:center;padding:5px 8px;} .mkpreset .chip:active{opacity:.65;} /* the depth-relay venue chips are ONE element so sonarSync can refresh them without rebuilding the chip row — it must still carry the row's own gap */ #snvenues{display:flex;gap:6px;flex:0 0 auto;} .chiprow .seg .o i{width:4px;height:4px;border-radius:50%;background:var(--ta-pos); display:inline-block;margin-left:3px;vertical-align:middle;} .screenrow .live{margin-left:auto;font-size:12.5px;font-weight:700;} /* ---- Sonar: full-screen chart (TradingView-style, Babak 2026-08-06) ---- CSS full-screen, not the Fullscreen API: iOS grants that only to