:root{ --void:#0B0E14; --panel:#161C28; --panel2:#12161F; --border:#232B3A; --amber:#F5A524; --ice:#5CC8FF; --up:#34D399; --down:#FB4E5D; --text:#E8EAF0; --muted:#5A6376; /* drop117: a FOURTH semantic colour. amber=structure, ice=tickers, up/down=signed values, anom="this reading is an outlier for a name of this size". drop119: yellow, chosen COLD (#FFE600) precisely because --amber #F5A524 owns structure on the same rows - if a future palette change warms this toward amber the two stop being separable. */ --anom:#FFE600; } .anom{color:var(--anom);font-weight:700} .thin-liq{color:var(--down);font-weight:700} *{box-sizing:border-box} body{margin:0;background:var(--void);color:var(--text); font:14px/1.45 "IBM Plex Sans",system-ui,sans-serif;padding-bottom:44px} .mono{font-family:"IBM Plex Mono",ui-monospace,monospace} .muted{color:var(--muted);font-size:12px} .hidden{display:none!important} button{background:var(--amber);color:#141005;border:0;border-radius:6px; font:700 12px "IBM Plex Sans";letter-spacing:.06em;padding:9px 14px;cursor:pointer} button.ghost{background:transparent;color:var(--muted);border:1px solid var(--border)} button.ghost:hover{color:var(--text)} input,textarea{background:var(--panel2);border:1px solid var(--border);border-radius:6px; color:var(--text);font:14px "IBM Plex Sans";padding:9px 12px;outline:none;width:100%} input:focus,textarea:focus{border-color:#F5A52470} /* topbar */ #topbar{display:flex;align-items:center;gap:28px;padding:14px 22px; border-bottom:1px solid var(--border);background:var(--void);position:sticky;top:0;z-index:5} .brand{font:800 20px "Archivo";letter-spacing:.06em} .brand b{color:var(--amber)} #topbar nav{display:flex;gap:20px;flex:1} #topbar nav a{color:var(--muted);text-decoration:none;font:600 11px "IBM Plex Sans"; letter-spacing:.18em;padding:6px 2px;border-bottom:2px solid transparent} #topbar nav a.active{color:var(--text);border-color:var(--amber)} .top-right{display:flex;gap:10px;align-items:center} .pill{font:500 11px "IBM Plex Mono";color:var(--muted);border:1px solid var(--border); border-radius:99px;padding:5px 10px} /* layout */ #main{padding:22px;max-width:1280px;margin:0 auto} .board-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px} h2{font:800 15px "Archivo";letter-spacing:.14em;margin:0 0 2px} h3{font:800 12px "Archivo";letter-spacing:.14em;margin:18px 0 8px} h4{font:800 11px "Archivo";letter-spacing:.14em;margin:16px 0 6px;color:var(--muted)} .panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:auto} .panel.pad{padding:16px} .panel.narrow{max-width:460px} .panel.narrow input{margin-bottom:10px} .empty{padding:26px;text-align:center;color:var(--muted)} .err{color:var(--down);font-size:12px;margin-top:8px} hr{border:0;border-top:1px solid var(--border);margin:18px 0} /* presets */ .presets button{background:transparent;color:var(--muted);border:1px solid var(--border); border-radius:6px;padding:7px 12px;margin-left:6px} .presets button.active{color:#141005;background:var(--amber);border-color:var(--amber)} /* table */ table{width:100%;border-collapse:collapse;font-size:13px} th{font:600 10px "IBM Plex Sans";letter-spacing:.14em;color:var(--muted); text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap} td{padding:9px 12px;border-bottom:1px solid #1B2230;white-space:nowrap} tbody tr{cursor:pointer} tbody tr:hover{background:#1A2130} td.num,th.num{text-align:right;font-family:"IBM Plex Mono"} .chg-up{color:var(--up)} .chg-down{color:var(--down)} .sym{font:600 13px "IBM Plex Mono";color:var(--ice)} .strength-bar{display:inline-block;width:54px;height:6px;background:#232B3A; border-radius:3px;vertical-align:middle;margin-right:8px;position:relative;overflow:hidden} .strength-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--amber);border-radius:3px} .badge{display:inline-block;font:600 9px "IBM Plex Sans";letter-spacing:.1em; border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:middle} .badge.halt{background:#3A1A20;color:var(--down)} .badge.ai{background:#2A2410;color:var(--amber)} .reason-row td{white-space:normal;color:var(--muted);font-size:12px;background:var(--panel2)} /* tags */ .tag-form{display:grid;grid-template-columns:2fr 1.4fr 1.6fr auto;gap:10px} .spark{width:140px;height:26px} .spark polyline{fill:none;stroke:var(--ice);stroke-width:1.5} /* health strip */ #healthbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:16px;align-items:center; background:var(--panel2);border-top:1px solid var(--border);padding:8px 22px; font:500 11px "IBM Plex Mono"} .hb{color:var(--muted)} .hb::before{content:"●";margin-right:6px;color:var(--muted)} .hb.ok::before{color:var(--up)} .hb.bad::before{color:var(--down)} .spacer{flex:1} /* modal */ #modal-wrap{position:fixed;inset:0;background:#0009;display:flex;align-items:center; justify-content:center;z-index:20} #modal{width:min(680px,92vw);max-height:84vh;overflow:auto;background:var(--panel); border:1px solid var(--border);border-radius:10px;padding:20px} .modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} #m-symbol{font:800 22px "Archivo";color:var(--ice)} #m-price{font-size:18px;margin-left:10px} #m-chg{font-size:14px;margin-left:6px} .ai-box{background:var(--panel2);border:1px solid var(--border);border-left:3px solid var(--amber); border-radius:6px;padding:12px;font-size:13px;margin-bottom:12px} .m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .m-cell{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:10px} .m-cell .k{font:600 9px "IBM Plex Sans";letter-spacing:.12em;color:var(--muted)} .m-cell .v{font:500 15px "IBM Plex Mono";margin-top:3px} .news-item{padding:8px 0;border-bottom:1px solid #1B2230;font-size:13px} .news-item a{color:var(--text);text-decoration:none} .news-item a:hover{color:var(--ice)} .news-item .muted{display:block;margin-top:2px} /* research desk */ #desk{position:fixed;top:0;right:0;bottom:0;width:min(420px,94vw);background:var(--panel); border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:15} .desk-head{display:flex;align-items:center;gap:10px;padding:14px 16px; border-bottom:1px solid var(--border);font:800 12px "Archivo";letter-spacing:.14em} .desk-head button{margin-left:auto} #desk-log{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px} .msg{border-radius:8px;padding:10px 12px;font-size:13px;white-space:pre-wrap;max-width:92%} .msg.user{background:#20293B;align-self:flex-end} .msg.ai{background:var(--panel2);border:1px solid var(--border);align-self:flex-start} .desk-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)} .desk-input textarea{resize:none} /* v3 layout: left rail + board */ .grid-scanner{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start} @media (max-width:1020px){.grid-scanner{grid-template-columns:1fr}} .left-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:76px} .card{background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden} .card-head{font:800 10px "Archivo";letter-spacing:.16em;padding:11px 14px; border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center} .card-body{padding:13px 14px;font-size:12.5px;line-height:1.55;white-space:pre-wrap; max-height:340px;overflow:auto} .card-head .tab{color:var(--muted);cursor:pointer;font:600 9px "IBM Plex Sans"; letter-spacing:.12em;padding:3px 8px;border:1px solid var(--border);border-radius:4px} .card-head .tab.active{color:#141005;background:var(--amber);border-color:var(--amber)} .card-head .tabs, .card-head.tabs{justify-content:flex-start} #briefing-card .card-head{color:var(--amber)} /* divergence chart */ #m-chart-wrap{background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:8px} #m-chart{width:100%;height:150px;display:block} #m-chart path.price{fill:none;stroke:var(--ice);stroke-width:1.6} #m-chart path.mentions{fill:none;stroke:var(--amber);stroke-width:1.6} #m-chart rect.mbar{fill:#F5A52433} .chart-legend{display:flex;gap:14px;margin-top:6px} .lg{font:500 10px "IBM Plex Mono";color:var(--muted)} .lg::before{content:"—";margin-right:5px;font-weight:700} .lg.ice::before{color:var(--ice)} .lg.amber::before{color:var(--amber)} /* scoreboard */ .scoreboard{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px} .score{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px 14px} .score .k{font:600 9px "IBM Plex Sans";letter-spacing:.14em;color:var(--muted)} .score .v{font-size:20px;margin-top:4px} /* ---- v3 parity: topbar tape, session, bell, chips, docked desk, expansion ---- */ .brand{display:flex;align-items:center;gap:9px} .mark{width:26px;height:16px;fill:var(--amber)} #tape{display:flex;gap:16px;font-size:12px;color:var(--muted)} .tp b{color:var(--text);font-weight:500} .tp i{font-style:normal} .session{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden} .session span{font:600 9px "IBM Plex Sans";letter-spacing:.1em;color:var(--muted);padding:6px 9px} .session span.on{background:var(--amber);color:#141005} .bell{position:relative} .badge-n{position:absolute;top:-6px;right:-6px;background:var(--down);color:#fff; font:700 9px "IBM Plex Sans";border-radius:99px;padding:2px 5px} #alerts-drop{position:fixed;top:58px;right:220px;width:340px;background:var(--panel); border:1px solid var(--border);border-radius:8px;z-index:30;overflow:hidden} .al-item{padding:7px 0;border-bottom:1px solid #1B2230;font-size:12.5px} #clock{font-size:11px} .scanbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px;flex-wrap:wrap} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{font:500 10.5px "IBM Plex Mono";color:var(--muted);border:1px solid var(--border); border-radius:99px;padding:5px 11px} /* inline expansion */ .expand-row td{background:var(--panel2);padding:14px;white-space:normal;cursor:default} .expand-grid{display:grid;grid-template-columns:250px 1fr 1fr;gap:14px} @media (max-width:1100px){.expand-grid{grid-template-columns:1fr}} .tk-head{font:800 9px "Archivo";letter-spacing:.15em;color:var(--muted);margin-bottom:9px} .ticket,.exp-chart,.exp-ai{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px} .tk-row{display:flex;justify-content:space-between;font-size:12px;padding:4px 0; border-bottom:1px solid #1B2230;color:var(--muted)} .tk-row b{color:var(--text);font-weight:500} .dchart{width:100%;height:120px;display:block;background:var(--void);border-radius:4px} .dchart path.price{fill:none;stroke:var(--ice);stroke-width:1.4} .dchart rect.mbar{fill:#F5A52440} .exp-soc{margin-top:8px;font-size:11px} .ai-text{font-size:12.5px;line-height:1.55;border-left:3px solid var(--amber);padding-left:10px} .exp-news{margin-top:10px} .exp-news .news-item{padding:5px 0;font-size:12px} /* score strip under board */ .scorestrip{display:flex;justify-content:space-between;align-items:center;margin-top:12px; background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:11px 16px; font:500 12px "IBM Plex Mono"} .scorestrip a{color:var(--amber);text-decoration:none;font:700 11px "IBM Plex Sans";letter-spacing:.08em} /* docked desk */ #shell{display:flex} #main{flex:1;min-width:0} #desk{position:sticky;top:58px;height:calc(100vh - 100px);width:380px;flex:0 0 380px; border-left:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column} #desk.hidden{display:none} @media (max-width:1250px){ #desk{position:fixed;top:0;right:0;bottom:0;height:auto;z-index:15} } /* editable chips */ .chip.clickable{cursor:pointer} .chip.clickable:hover{border-color:var(--amber);color:var(--text)} .chip.custom{border-color:var(--amber);color:var(--amber)} .chip-edit{display:inline-flex;align-items:center;gap:5px;font:500 10.5px "IBM Plex Mono"; color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:3px 6px 3px 11px} .chip-edit input{width:84px;padding:4px 7px;font:500 11px "IBM Plex Mono";border-radius:99px} #chips button{padding:6px 11px;font-size:10px} /* ---- drop6e: global button restyle (ghost amber default, .solid for primary) ---- */ button{background:transparent;color:var(--amber);border:1px solid #F5A52466;border-radius:6px; font:700 12px "IBM Plex Sans";letter-spacing:.06em;padding:9px 14px;cursor:pointer} button:hover{background:#F5A5241A;border-color:var(--amber)} button.solid{background:var(--amber);color:#141005;border-color:var(--amber)} button.solid:hover{background:#FFB63E} button.ghost{color:var(--muted);border-color:var(--border)} button.ghost:hover{color:var(--amber);border-color:#F5A52466;background:transparent} /* nav hover */ #topbar nav a:hover{color:var(--amber)} /* scanbar mockup layout */ .scanbar{margin-bottom:14px} .scanbar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .scanbar-meta{text-align:right;margin-top:10px;font-size:11px;color:var(--muted); letter-spacing:.08em;text-transform:uppercase} .chip{color:var(--muted);border-color:#F5A52440} .chip b, .chip{font-family:"IBM Plex Mono"} .presets.seg{margin-left:auto;display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden} .presets.seg button{border:0;border-radius:0;background:transparent;color:var(--muted); font:600 10.5px "IBM Plex Sans";letter-spacing:.12em;padding:9px 15px} .presets.seg button:hover{color:var(--text);background:#1A2130} .presets.seg button.active{background:#232B3A;color:var(--text)} /* ? tooltips */ .qi{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px; border:1px solid var(--muted);border-radius:50%;color:var(--muted);font:600 9px "IBM Plex Sans"; cursor:help;position:relative;vertical-align:middle;margin-left:5px} .qi:hover{border-color:var(--amber);color:var(--amber)} .qi::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%); width:230px;background:#0B0E14;border:1px solid var(--amber);border-radius:6px;padding:9px 11px; font:400 11px/1.5 "IBM Plex Sans";color:var(--text);letter-spacing:0;text-transform:none; opacity:0;pointer-events:none;transition:opacity .12s;z-index:50;text-align:left;white-space:normal} .qi:hover::after{opacity:1} th .qi{margin-left:4px} /* ticket coloring (mockup) */ .tk-row b.ice{color:var(--ice)} .tk-row b.amber{color:var(--amber)} /* week-ahead nav */ .wk-nav{display:flex;gap:6px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border);flex-wrap:wrap} .wk-nav button{padding:4px 9px;font-size:11px} .wk-date{width:118px;padding:5px 7px;font:500 11px "IBM Plex Mono"} #wk-label{flex:1;text-align:center;font-size:10.5px} .ev{display:flex;gap:9px;padding:6px 0;border-bottom:1px solid #1B2230;font-size:12px;align-items:baseline} .ev .t{font-family:"IBM Plex Mono";color:var(--muted);min-width:78px;font-size:11px} .ev .impact{margin-left:auto;font:700 9px "IBM Plex Sans";letter-spacing:.08em} .ev .impact.HIGH{color:var(--down)} .ev .impact.MED{color:var(--amber)} .ev .impact.LOW{color:var(--muted)} .ev-day{font:800 10px "Archivo";letter-spacing:.12em;color:var(--muted);margin:10px 0 3px} /* options flow panel + news timeframe */ .exp-opt .tk-row b{font-family:"IBM Plex Mono"} .news-tf{float:right;width:auto;padding:3px 7px;font:500 10px "IBM Plex Mono"; background:var(--panel2);border:1px solid var(--border);border-radius:5px;color:var(--muted)} /* settings grid */ .settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px} .settings-grid h3{margin-top:0} .set-row{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:7px 0;border-bottom:1px solid #1B2230;font-size:12.5px;color:var(--muted)} .set-row input[type=number]{width:110px;padding:6px 9px;font:500 12px "IBM Plex Mono"} .set-row .val{font-family:"IBM Plex Mono";color:var(--text)} .toggle{width:40px;height:22px;border-radius:99px;border:1px solid var(--border); background:var(--panel2);position:relative;cursor:pointer;padding:0} .toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px; border-radius:50%;background:var(--muted);transition:all .15s} .toggle.on{border-color:var(--amber);background:#F5A52426} .toggle.on::after{left:20px;background:var(--amber)} .expand-grid.four{grid-template-columns:230px 1fr 230px 1fr} @media (max-width:1400px){.expand-grid.four{grid-template-columns:1fr 1fr}} @media (max-width:900px){.expand-grid.four{grid-template-columns:1fr}} /* ---- drop6f: UI corrections ---- */ /* tooltips now JS-driven; disable clipped CSS pseudo version */ .qi::after{display:none!important} /* placement owned by the app.js mouseover handler (measures height, flips below when it can't fit above) */ #tipbox{position:fixed;width:250px;background:#0B0E14;border:1px solid var(--amber); border-radius:6px;padding:10px 12px;font:400 11.5px/1.5 "IBM Plex Sans";color:var(--text); z-index:100;pointer-events:none;box-shadow:0 6px 24px #000A} /* board scrolls internally; header stays pinned */ .board-col > .panel{max-height:calc(100vh - 330px);overflow-y:auto} #whispers-table thead th{position:sticky;top:0;background:var(--panel);z-index:3; box-shadow:0 1px 0 var(--border)} /* week-ahead: single clean line */ .wk-nav{display:flex;gap:8px;align-items:center;padding:8px 12px; border-bottom:1px solid var(--border);flex-wrap:nowrap} .wk-nav button{padding:3px 9px;font-size:12px;line-height:1} #wk-label{flex:1;text-align:center;font-size:11px;white-space:nowrap} .wk-cal{font-size:11px} .wk-custom{background:var(--panel2)} .wk-date{width:112px;flex:0 0 auto} /* scanbar breathing room */ .scanbar-row{row-gap:10px} .chips{align-items:center} /* ---- drop6g: full-width layout + measured board height ---- */ #main{max-width:none;padding:22px 28px} .grid-scanner{grid-template-columns:360px minmax(0,1fr)} .left-rail{position:static} .card-body{max-height:420px} /* board height now set by JS - keep CSS fallback only */ .board-col > .panel{max-height:none;overflow-y:auto} /* ---- drop6h: deterministic flex containment (no JS measuring) ---- */ html,body{height:100%} body{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0} #topbar{flex:0 0 auto} #shell{flex:1 1 auto;min-height:0;display:flex} #main{flex:1 1 auto;min-width:0;overflow-y:auto; padding:20px 36px;max-width:1760px;margin:0 auto;width:100%;box-sizing:border-box} #healthbar{position:static;flex:0 0 auto} #desk{position:static;height:auto} /* scanner view fills the content column; board panel takes the remainder */ #view-scanner.grid-scanner{height:100%;min-height:0} .left-rail{min-height:0;overflow-y:auto;max-height:100%} .board-col{display:flex;flex-direction:column;height:100%;min-height:0} .board-col .scanbar,.board-col .board-head,.board-col .scorestrip{flex:0 0 auto} .board-col > .panel{flex:1 1 auto;min-height:120px;max-height:none;overflow-y:auto} .scorestrip{margin-top:12px;margin-bottom:2px} /* ---- drop6j: week-ahead range prominence + earnings redesign ---- */ #wk-label{color:var(--amber);font:700 12.5px "IBM Plex Mono";letter-spacing:.06em} .wk-cal{display:inline-flex;align-items:center;justify-content:center; color:var(--amber);border-color:var(--amber);padding:5px 8px} .wk-cal:hover{background:#F5A5241A} .wk-nav button{color:var(--amber);border-color:#F5A52455} /* earnings + econ event redesign */ .ev-day{font:800 11px "Archivo";letter-spacing:.14em;color:var(--amber); border-left:3px solid var(--amber);padding-left:8px;margin:14px 0 6px} .ev-day:first-child{margin-top:2px} .earn-row{display:flex;gap:10px;align-items:center;padding:7px 0; border-bottom:1px solid #1B2230;font-size:12.5px} .earn-sym{font:600 12px "IBM Plex Mono";color:var(--ice);cursor:pointer; border:1px solid #5CC8FF33;border-radius:4px;padding:2px 8px;transition:all .12s} .earn-sym:hover{color:var(--amber);border-color:var(--amber);background:#F5A5241A} .earn-eps{margin-left:auto;font:500 11px "IBM Plex Mono";color:var(--muted)} .earn-hint{font-size:10px;color:var(--muted);margin:8px 0 0;font-style:italic} /* ---- desk thinking indicator ---- */ .msg.pending{display:flex;align-items:center;gap:9px;color:var(--muted);font-style:italic} .dots{display:inline-flex;gap:3px} .dots i{width:6px;height:6px;border-radius:50%;background:var(--amber);opacity:.3; animation:dotpulse 1.2s infinite} .dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s} @keyframes dotpulse{0%,60%,100%{opacity:.25;transform:scale(1)}30%{opacity:1;transform:scale(1.25)}} /* ---- desk reply typography ---- */ .msg.ai{line-height:1.6;font-size:12.5px} .msg.ai p{margin:0 0 8px} .msg.ai p:last-child{margin-bottom:0} .msg.ai strong{color:var(--amber);font-weight:600} .msg.ai code{font-family:"IBM Plex Mono";font-size:11.5px;background:#0B0E14; border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--ice)} .msg.ai ul,.msg.ai ol{margin:2px 0 10px;padding-left:18px} .msg.ai li{margin:3px 0} .msg.ai li::marker{color:var(--amber)} .dsk-h{font:800 10px "Archivo";letter-spacing:.14em;color:var(--amber); text-transform:uppercase;margin:14px 0 6px;padding-bottom:4px; border-bottom:1px solid #F5A52426} .dsk-h:first-child{margin-top:2px} /* ---- drop6p: SCAN NOW presence + desk-linked data ---- */ #btn-scan{font:800 13px "Archivo";letter-spacing:.08em;padding:13px 24px;border-radius:8px; box-shadow:0 0 0 0 #F5A52400;transition:all .15s} #btn-scan:hover{background:#FFB63E;box-shadow:0 4px 18px #F5A52440;transform:translateY(-1px)} #btn-scan:active{transform:translateY(0)} /* econ rows clickable -> desk deep-dive */ .ev.clickable{cursor:pointer;border-radius:5px;transition:background .12s} .ev.clickable:hover{background:#F5A5240D} .ev.clickable:hover .ev-name{color:var(--amber)} /* research button in expansion */ .tk-research{width:100%;margin-top:12px;font:700 11px "IBM Plex Sans";letter-spacing:.1em} /* ---- drop6r: unified rich text (desk + briefing) ---- */ .dsk-h2{font:800 12.5px "Archivo";letter-spacing:.1em;color:var(--text); text-transform:uppercase;margin:16px 0 8px;padding:7px 10px; background:#F5A52412;border-left:3px solid var(--amber);border-radius:0 5px 5px 0} .dsk-h2:first-child{margin-top:2px} .dsk-hr{border:0;border-top:1px dashed #F5A52433;margin:14px 0} .tkr{font:600 11.5px "IBM Plex Mono";color:var(--ice);background:#5CC8FF14; border:1px solid #5CC8FF2E;border-radius:4px;padding:0 5px;white-space:nowrap} .msg.ai .mono{font-family:"IBM Plex Mono"} /* briefing card in formatted mode */ #briefing-body.formatted{white-space:normal;font-size:12.5px;line-height:1.6} #briefing-body.formatted p{margin:0 0 8px} #briefing-body.formatted strong{color:var(--amber);font-weight:600} #briefing-body.formatted ul{margin:2px 0 10px;padding-left:16px} #briefing-body.formatted li{margin:4px 0} #briefing-body.formatted li::marker{color:var(--amber)} #briefing-body.formatted .dsk-h2{font-size:10.5px;margin:12px 0 7px} #briefing-body.formatted .dsk-h{font:800 9.5px "Archivo";letter-spacing:.13em; color:var(--amber);margin:11px 0 5px} /* ---- drop14: identity & access management ---- */ .admin-bar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap} .role-chip{display:inline-block;font:600 9px "IBM Plex Sans";letter-spacing:.08em; border:1px solid var(--border);border-radius:4px;padding:2px 7px;margin-right:4px;color:var(--muted)} .role-chip.admin{border-color:var(--amber);color:var(--amber)} .status-pill{font:600 9.5px "IBM Plex Sans";letter-spacing:.08em;border-radius:99px;padding:3px 9px} .status-pill.active{background:#0E2A1E;color:var(--up)} .status-pill.disabled{background:#3A1A20;color:var(--down)} .status-pill.pending{background:#2A2410;color:var(--amber)} .mfa-ok{color:var(--up)} .mfa-off{color:var(--muted)} /* drawer */ #drawer-wrap{position:fixed;inset:0;background:#0009;z-index:25;display:flex;justify-content:flex-end} #drawer{width:min(440px,94vw);height:100%;background:var(--panel);border-left:1px solid var(--border); overflow-y:auto;animation:slidein .18s ease-out} @keyframes slidein{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}} .drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px; border-bottom:1px solid var(--border);font:800 13px "Archivo";letter-spacing:.1em; position:sticky;top:0;background:var(--panel);z-index:2} #drawer-body{padding:16px 18px} #drawer-body h4{margin-top:18px} #drawer-body input{margin-bottom:10px} .drawer-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px} .drawer-actions button{flex:1;min-width:130px;font-size:10.5px;padding:9px 8px} .danger{color:var(--down)!important;border-color:#FB4E5D55!important} .danger:hover{background:#FB4E5D14!important;border-color:var(--down)!important} .roles-row{display:flex;gap:14px;margin:6px 0 4px} .roles-row label{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);cursor:pointer} .flagmx-row{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:7px 0;border-bottom:1px solid #1B2230;font-size:12px} .flagmx-row .k{font-family:"IBM Plex Mono";font-size:11.5px} .deny-btn{font:600 9px "IBM Plex Sans";letter-spacing:.08em;padding:4px 10px} .deny-btn.on{background:#3A1A20;color:var(--down);border-color:#FB4E5D55} /* temp password modal */ #tpw-wrap{position:fixed;inset:0;background:#000C;z-index:40;display:flex;align-items:center;justify-content:center} #tpw{width:min(460px,92vw);background:var(--panel);border:1px solid var(--amber);border-radius:10px;overflow:hidden} .tpw-code{font-size:19px;color:var(--amber);background:var(--void);margin:14px 16px; padding:16px;border-radius:8px;text-align:center;letter-spacing:.06em;user-select:all; border:1px dashed #F5A52444} /* ---- drop14b: scanbar must never flex-grow (it's a .panel too - specificity fix) ---- */ .board-col > .panel.scanbar{flex:0 0 auto;min-height:0} /* ---- drop15: board time machine ---- */ .scanbar-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap} .replay-ctl{display:flex;gap:6px;align-items:center;font:600 10px "IBM Plex Sans";letter-spacing:.1em} .replay-ctl button{padding:4px 9px;font-size:11px} #replay-banner{margin-top:10px;padding:8px 12px;border:1px solid var(--ice);border-radius:6px; background:#5CC8FF12;color:var(--ice);font:600 11px "IBM Plex Mono";letter-spacing:.05em} #replay-exit{color:var(--ice);border-color:#5CC8FF55} /* ---- drop15b: larger nav, stacked topbar-right, local clock ---- */ #topbar nav a{font-size:13.5px;letter-spacing:.09em} #topbar nav{gap:26px} .top-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px} .tb-actions{display:flex;align-items:center;gap:10px} #clock{font-size:11px;letter-spacing:.06em} /* ---- drop18: amber calendar indicators on all date inputs ---- */ input[type="date"]::-webkit-calendar-picker-indicator{ background:transparent url('data:image/svg+xml;utf8,') center/14px no-repeat; cursor:pointer;opacity:.9} input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1} input[type="date"]{color-scheme:dark} .ev .t{min-width:64px;font-size:10.5px} /* ---- drop18d: aggregate range day separators ---- */ .day-sep td{font:800 10.5px "Archivo";letter-spacing:.14em;color:var(--amber); background:#F5A5240D;border-top:1px solid #F5A52433;border-bottom:1px solid #F5A52422; padding:8px 12px!important;cursor:default} /* ================================================================ drop19 - v3 mockup theme: blue-graphite, soft signals, air ================================================================ */ :root{ --void:#0D1119; --panel:#141A26; --panel2:#1A2233; --border:#242E42; --muted:#8B94A7; --text:#E9EDF5; --up:#4ADE80; --down:#F87171; --amber:#F5A524; --ice:#5CC8FF; } body{background:var(--void)} /* panels: rounder, softer, subtle depth */ .panel{background:var(--panel);border:1px solid var(--border);border-radius:10px; box-shadow:0 1px 0 #0006, 0 8px 24px #0004} .card,.left-rail .card{border-radius:10px} /* topbar: quieter, active nav as amber pill */ #topbar{background:#0B0F17;border-bottom:1px solid #1B2333} #topbar nav a{color:#7E879B} #topbar nav a.active,#topbar nav a[aria-current]{color:var(--amber)} #topbar nav a.active{background:#F5A52414;border-radius:6px;padding:6px 10px} /* table: airy rows, hairline separators, hover lift */ #whispers-table th{font-size:10px;letter-spacing:.14em;color:#7E879B;padding:11px 12px} #whispers-table td{padding:11px 12px;border-bottom:1px solid #1B2331} #whispers-table tbody tr:hover{background:#161E2D} #whispers-table tbody tr{transition:background .1s} .sym{font-weight:700} /* signed numbers: mint / soft red everywhere they appear */ .chg-up{color:var(--up)} .chg-down{color:var(--down)} .impact.HIGH{color:var(--down)} /* strength bar: slimmer amber on slate track */ .sbar{height:5px;border-radius:3px;background:#232C3E} .sbar > i{background:linear-gradient(90deg,#C97F12,var(--amber));border-radius:3px} /* trade ticket / expansion: column dividers, slate labels, roomier */ .expand-grid > div{background:#131926;border:1px solid #212B3E;border-radius:9px;padding:14px} .tk-head{color:#7E879B;font-size:10px;letter-spacing:.13em} .tk-row span{color:#8B94A7} .tk-row{padding:6px 0;border-bottom:1px solid #1A2231} .tk-row:last-of-type{border-bottom:0} /* chips + presets: calmer borders */ .chip{border-color:#F5A52436;background:#F5A52408} .presets.seg{background:#10151F;border-color:#212B3E} .presets.seg button.active{background:#222C40} /* scanbar */ .scanbar.panel{background:#131926} .scanbar-meta{color:#6E7789} /* left rail cards */ .card-head{border-bottom:1px solid #1E2738;color:#8B94A7} .ev{border-bottom:1px solid #19212F} .ev .t{color:#6E7789} /* desk: card-style bubbles */ #desk{background:#10151F;border-left:1px solid #1E2738} .msg.user{background:#1B2334;border:1px solid #26304A;border-radius:10px; padding:11px 13px} .msg.ai{background:#131A28;border:1px solid #232E45;border-radius:10px; padding:13px 15px;box-shadow:0 4px 14px #0003} .msg.ai .dsk-h2{background:#F5A5240E} #desk-input{background:#0E1320;border-top:1px solid #1E2738} #desk-msg{background:#151C2B;border:1px solid #242E44;border-radius:8px} /* settings + admin panels inherit panel look; toggles softer track */ .toggle{background:#1A2233;border-color:#2A3550} .set-row{border-bottom:1px solid #1A2231} /* footer health strip */ #healthbar{background:#0B0F17;border-top:1px solid #1B2333;color:#7E879B} /* scrollbars to match */ *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:#232C3E;border-radius:6px;border:2px solid var(--void)} *::-webkit-scrollbar-thumb:hover{background:#2C3750} *::-webkit-scrollbar-track{background:transparent} /* replay banner recolors via ice, day separators soften */ .day-sep td{background:#F5A5240A} #replay-banner{background:#5CC8FF0E;border-color:#5CC8FF44} /* ---- drop20: most-anticipated earnings styling ---- */ .earn-session{font:700 8.5px "IBM Plex Sans";letter-spacing:.08em;border-radius:4px; padding:2px 6px;min-width:32px;text-align:center} .earn-session.BMO{background:#F5A52418;color:var(--amber)} .earn-session.AMC{background:#5CC8FF14;color:var(--ice)} .earn-session.tbd{color:#5A6478} /* ---- drop23: user chip + profile drawer bits ---- */ .userchip{font:600 12px "IBM Plex Mono";color:var(--ice);border-color:#5CC8FF44; text-transform:none;letter-spacing:.02em} .userchip:hover{color:var(--amber);border-color:var(--amber);background:#F5A5241A} .pd-msg{font-size:11.5px;margin-top:6px} .pd-msg.ok{color:var(--up)} .pd-msg.err{color:var(--down)} #drawer label{display:block;font:600 9.5px "IBM Plex Sans";letter-spacing:.12em; color:#8B94A7;margin:10px 0 4px} /* userchip as identity text: quiet until hovered */ .userchip{background:none;border:0;padding:6px 4px;cursor:pointer; font:600 12.5px "IBM Plex Sans";letter-spacing:.02em;color:#AEB6C6; border-bottom:1px solid transparent;border-radius:0;transition:all .12s} .userchip:hover{color:var(--amber);background:none;border-bottom:1px solid var(--amber)} /* logged-in identity block: label over name, spaced from DESK */ .user-block{display:flex;flex-direction:column;align-items:flex-start; margin-left:22px;line-height:1.25} .user-label{font:600 8.5px "IBM Plex Sans";letter-spacing:.14em;color:#5F6A80} .user-block .userchip{padding:0} /* ---- drop24: MFA nudge + enroll UI ---- */ #mfa-nudge{display:flex;align-items:center;gap:14px;margin-bottom:16px; padding:11px 16px;border:1px solid #F5A52455;background:#F5A52410; border-radius:9px;font-size:12.5px;color:var(--text)} #mfa-nudge button{padding:6px 12px;font-size:10.5px} #qr-box{background:#fff;padding:10px;border-radius:8px;width:fit-content;margin:10px 0} .mfa-secret{font:600 12px "IBM Plex Mono";color:var(--ice);background:var(--void); padding:8px 10px;border-radius:6px;user-select:all;margin:6px 0;display:inline-block} /* ---- drop28: user guide ---- */ #btn-guide{font:700 11px "IBM Plex Sans";letter-spacing:.08em} #guide-wrap{position:fixed;inset:0;background:#000B;z-index:45;display:flex; align-items:center;justify-content:center;padding:3vh 3vw} #guide{width:min(1080px,100%);height:min(88vh,100%);background:var(--panel); border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden} .guide-head{display:flex;gap:14px;align-items:center;padding:14px 18px; border-bottom:1px solid var(--border);flex:0 0 auto} .guide-title{font:800 14px "Archivo";letter-spacing:.12em;color:var(--amber)} #guide-search{flex:1;max-width:460px;padding:8px 12px;font:500 12.5px "IBM Plex Sans"; background:var(--void);border:1px solid var(--border);border-radius:7px;color:var(--text)} #guide-search:focus{border-color:var(--amber);outline:none} .guide-body{flex:1;min-height:0;display:flex} #guide-toc{width:230px;flex:0 0 auto;overflow-y:auto;border-right:1px solid var(--border); padding:12px 0} #guide-toc a{display:block;padding:8px 18px;font:600 11px "IBM Plex Sans"; letter-spacing:.06em;color:var(--muted);cursor:pointer;border-left:2px solid transparent} #guide-toc a:hover{color:var(--amber)} #guide-toc a.dim{opacity:.3} #guide-content{flex:1;overflow-y:auto;padding:20px 28px;font-size:13px;line-height:1.65} .guide-sec{margin-bottom:30px} .guide-sec h2{font:800 15px "Archivo";letter-spacing:.08em;color:var(--amber); margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid #F5A52426} .guide-sec.hidden{display:none} #guide-content mark{background:#F5A52433;color:var(--amber);border-radius:3px;padding:0 2px} #guide-content p{margin:0 0 9px} #guide-content strong{color:var(--amber);font-weight:600} #guide-content ul{padding-left:18px;margin:2px 0 10px} #guide-content li::marker{color:var(--amber)} /* tag-spike badge on the board */ .tagspike{display:inline-block;margin-left:6px;font-size:11px;cursor:help} /* ---- drop29: guide v2 - calm reading layout ---- */ .gtabs{display:flex;gap:4px;background:var(--void);border:1px solid var(--border); border-radius:8px;padding:3px} .gtab{border:0;background:none;padding:7px 16px;font:700 11px "IBM Plex Sans"; letter-spacing:.1em;color:var(--muted);border-radius:6px;cursor:pointer} .gtab.active{background:#F5A5241C;color:var(--amber)} .gtab:hover:not(.active){color:var(--text)} #guide-toc a.active{color:var(--amber);border-left-color:var(--amber);background:#F5A52408} #guide-content{padding:26px 40px} .gsec-kicker{font:700 9.5px "IBM Plex Sans";letter-spacing:.16em;color:#5F6A80;margin-bottom:8px} .gsec-title{font:800 22px "Archivo";letter-spacing:.04em;color:var(--text);margin:0 0 18px} .gsec-body{max-width:760px;font-size:13.5px;line-height:1.75;color:#C9D1E0} .gsec-body .dsk-h2, .gsec-body h2{background:none;border:0;border-bottom:1px solid var(--border); padding:0 0 6px;margin:26px 0 10px;font:800 12px "Archivo";letter-spacing:.12em;color:var(--amber)} .gsec-body strong{color:var(--text);font-weight:650} .gsec-body ul{padding-left:20px;margin:6px 0 14px} .gsec-body li{margin-bottom:7px} .gsec-body li::marker{color:#5F6A80} .gsec-body p{margin:0 0 13px} .callout{margin:16px 0;padding:13px 16px;border-left:3px solid var(--amber); background:#F5A5240B;border-radius:0 9px 9px 0;color:var(--text);font-size:13px;line-height:1.7} .callout strong{color:var(--amber)} .gsec-nav{display:flex;justify-content:space-between;margin-top:34px;max-width:760px; padding-top:16px;border-top:1px solid var(--border)} .gsec-nav button{max-width:46%;text-align:left;font-size:10.5px} .gsearch-hit{max-width:760px;padding:14px 16px;margin-bottom:10px;cursor:pointer; border:1px solid var(--border);border-radius:9px;background:#131926;transition:border-color .12s} .gsearch-hit:hover{border-color:var(--amber)} .gsearch-tab{font:700 8.5px "IBM Plex Sans";letter-spacing:.14em;color:var(--ice); background:#5CC8FF12;border-radius:4px;padding:2px 7px;margin-right:10px} .gsearch-title{font:700 13px "Archivo";color:var(--text)} .gsearch-snip{margin-top:7px;font-size:12px;line-height:1.6;color:var(--muted)} .gsearch-snip mark{background:#F5A52433;color:var(--amber);border-radius:3px;padding:0 2px} /* ---- drop30c: clock dead-center in the footer; topbar actions center-align ---- */ #healthbar{position:relative} #healthbar #clock{position:absolute;left:50%;transform:translateX(-50%); font-size:11px;letter-spacing:.04em;color:#8B94A7} #topbar .tb-actions{align-items:center} /* claude status dot: tri-state */ .hb.warn::before{background:var(--amber);box-shadow:0 0 6px #F5A52488} /* ---- drop32: earnings rows with logos + revenue ---- */ .earn-logo{width:18px;height:18px;border-radius:4px;object-fit:contain; background:#FFFFFFF0;padding:1.5px;flex:0 0 auto} .earn-row{display:flex;align-items:center;gap:9px} .earn-rev{color:var(--ice);font-weight:600} .earn-eps{margin-left:auto;white-space:nowrap} /* econ actuals + colored EPS */ .ev-actual{color:var(--text);font-weight:700;font-style:normal} .earn-epsn{color:var(--amber);font-weight:600} /* econ detail line: A / F / P under the title */ .ev-detail{display:flex;gap:14px;margin-top:3px;font:500 10.5px "IBM Plex Mono";color:#6E7789} .ev-detail .ev-a{color:#6E7789} .ev-detail .ev-a.live{color:var(--text);font-weight:700} /* ---- drop35: scorecard + manual trades ---- */ .mini-table{width:100%;max-width:560px;border-collapse:collapse;font:500 12px "IBM Plex Mono"} .mini-table th{font:700 9.5px "IBM Plex Sans";letter-spacing:.12em;color:#7E879B; text-align:left;padding:6px 10px;border-bottom:1px solid var(--border)} .mini-table td{padding:7px 10px;border-bottom:1px solid #1B2331} .mt-add{display:flex;gap:8px;margin:10px 0 14px;flex-wrap:wrap} .mt-add input{padding:7px 9px;font:500 12px "IBM Plex Mono";background:var(--void); border:1px solid var(--border);border-radius:6px;color:var(--text)} .mt-row{display:flex;gap:14px;align-items:center;padding:8px 4px; border-bottom:1px solid #1B2331;font:500 12.5px "IBM Plex Mono"} .mt-row.closed{opacity:.75} .mt-row .mt-close{margin-left:auto;font-size:9.5px;padding:4px 10px} /* ================================================================ drop38 - mobile layer v2: every selector verified against markup ================================================================ */ /* used by index.html around #whispers-table */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---------- ≤1180px: single-column scanner ---------- */ @media (max-width: 1180px){ .grid-scanner{grid-template-columns:1fr} .board-col{order:1} .left-rail{order:2} .settings-grid{grid-template-columns:1fr 1fr} } /* ---------- ≤760px: phones ---------- */ @media (max-width: 760px){ html, body{overflow-x:hidden;max-width:100vw} #shell, #main, .view, .board-col, .left-rail, .panel{max-width:100%;min-width:0} /* TOPBAR: brand+session / actions / nav strip / tape strip */ #topbar{flex-wrap:wrap;gap:8px 10px;padding:10px 12px} .brand{font-size:17px;order:1} .session{order:2;margin-left:auto} .session span{font-size:8.5px;padding:3px 7px} .top-right{order:3;flex:1 1 100%} .tb-actions{width:100%;display:flex;align-items:center;gap:6px} .tb-actions button, .tb-actions .pill{padding:7px 9px;font-size:10px} #btn-guide{font-size:10px} .user-block{margin-left:auto} .user-label{display:none} .userchip{font-size:11.5px;max-width:110px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} #topbar nav{order:4;flex:1 1 100%;overflow-x:auto;gap:18px; -webkit-overflow-scrolling:touch;scrollbar-width:none} #topbar nav::-webkit-scrollbar{display:none} #topbar nav a{white-space:nowrap;font-size:11.5px;padding:4px 0} #tape{order:5;flex:1 1 100%;overflow-x:auto;white-space:nowrap; font-size:11px;scrollbar-width:none;padding-bottom:2px} #tape::-webkit-scrollbar{display:none} /* alerts dropdown anchors to viewport, not desktop offsets */ #alerts-drop{left:8px;right:8px;width:auto;max-height:70dvh} /* MAIN */ #main{padding:10px 10px 110px} .panel.pad{padding:12px} .board-head{flex-wrap:wrap;gap:6px} .board-head h2{font-size:13.5px;letter-spacing:.06em} #mfa-nudge{flex-wrap:wrap;gap:8px;font-size:12px} /* SCANBAR: two swipeable lanes */ .scanbar-row{flex-wrap:nowrap;overflow-x:auto;gap:8px; -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px} .scanbar-row::-webkit-scrollbar{display:none} .scanbar-row > *{flex:0 0 auto} #btn-scan{padding:11px 20px;font-size:12px} .chip{font-size:9.5px;padding:5px 8px} #presets.seg button, .presets.seg button{padding:8px 11px;font-size:10px} .scanbar-foot{flex-wrap:nowrap;overflow-x:auto;gap:8px; scrollbar-width:none;-webkit-overflow-scrolling:touch} .scanbar-foot::-webkit-scrollbar{display:none} .scanbar-foot > *{flex:0 0 auto} .scanbar-meta{font-size:10px} #replay-banner{font-size:10.5px;line-height:1.5;white-space:normal} /* THE BOARD: swipes inside its wrapper, ticker column pinned */ #whispers-table{min-width:860px} #whispers-table th, #whispers-table td{padding:9px 8px;font-size:11.5px} #whispers-table thead th:nth-child(2), #whispers-table tbody td:nth-child(2){ position:sticky;left:0;background:var(--panel);z-index:2; box-shadow:3px 0 8px #0007} .day-sep td{font-size:9.5px;position:static!important} /* EXPANSION: one column, charts contained */ .expand-grid{grid-template-columns:1fr!important;gap:10px} .expand-grid > div{padding:11px;min-width:0} .expand-grid svg, .dchart, .spark{max-width:100%;height:auto} .tk-row{flex-wrap:wrap} /* LEFT RAIL cards */ .left-rail{gap:12px} .card-body{font-size:12.5px} .ev{padding:8px 2px} .ev-detail{gap:10px;flex-wrap:wrap;font-size:10px} .earn-row{gap:7px} .earn-eps{font-size:10.5px} .wk-nav{flex-wrap:wrap;gap:6px} .wk-custom{flex-wrap:wrap} /* DESK: full-screen sheet */ #desk{width:100vw;border-left:0} .desk-head{padding:12px} #desk-log{padding:12px} .msg.user,.msg.ai{max-width:96%} .desk-input{padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom))} /* GENERIC DATA TABLES (journal/scans/tags/admin/audit): self-scrolling */ #view-journal table, #view-scans table, #view-tags table, #view-admin table{display:block;overflow-x:auto;white-space:nowrap; -webkit-overflow-scrolling:touch} #view-journal th, #view-scans th, #view-tags th, #view-admin th, #view-journal td, #view-scans td, #view-tags td, #view-admin td{ padding:8px 9px;font-size:11.5px} /* JOURNAL scoreboard + manual trades */ .scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:8px} .score{min-width:0} .mt-add{gap:6px} .mt-add input{font-size:11px;flex:1 1 30%} .mt-row{flex-wrap:wrap;gap:6px 10px;font-size:11.5px} .mini-table{font-size:11px;display:block;overflow-x:auto} /* TAGS form */ .tag-form{grid-template-columns:1fr;gap:8px} /* SETTINGS / ADMIN chrome */ .settings-grid{grid-template-columns:1fr;gap:12px} .set-row{flex-wrap:wrap;gap:6px} .set-row input{max-width:130px} .tabs{overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{white-space:nowrap} .admin-bar{flex-wrap:wrap;gap:8px} /* DRAWER + MODALS full-bleed */ #drawer{width:100vw;max-width:100vw} .drawer-head{padding:12px} #drawer-body{padding:12px} .drawer-actions{flex-wrap:wrap;gap:8px} #tpw{width:94vw} .m-grid{grid-template-columns:1fr 1fr} /* GUIDE: full screen, TOC as swipe strip */ #guide-wrap{padding:0} #guide{width:100vw;height:100dvh;border-radius:0;border:0} .guide-head{flex-wrap:wrap;gap:8px;padding:10px 12px} .gtabs{order:1} #guide-close{order:2;margin-left:auto} #guide-search{order:3;flex:1 1 100%;max-width:none} .guide-body{flex-direction:column} #guide-toc{width:100%;display:flex;overflow-x:auto;border-right:0; border-bottom:1px solid var(--border);padding:6px 8px;gap:2px; scrollbar-width:none;flex:0 0 auto} #guide-toc::-webkit-scrollbar{display:none} #guide-toc a{white-space:nowrap;border-left:0;border-bottom:2px solid transparent; padding:7px 10px;font-size:10px} #guide-toc a.active{border-bottom-color:var(--amber)} #guide-content{padding:16px 14px} .gsec-title{font-size:18px} .gsec-body{font-size:13px;line-height:1.7} .gsec-nav{flex-wrap:wrap;gap:8px} .gsec-nav button{max-width:100%;font-size:9.5px} .gsearch-hit{padding:11px 12px} /* FOOTER: flowing wrap, clock in-flow */ #healthbar{flex-wrap:wrap;gap:6px 12px;padding:8px 10px;font-size:9px} #healthbar #clock{position:static;transform:none;order:10;flex:1 1 100%; text-align:center;font-size:10px;padding-top:2px} #hb-meta{display:none} .scorestrip{font-size:10px;flex-wrap:wrap;gap:6px} } /* ---------- touch: bigger tap targets ---------- */ @media (hover: none){ .qi{padding:4px 7px} #whispers-table tbody tr td{padding-top:11px;padding-bottom:11px} } /* ---- drop38b: expansion pins to viewport; weekahead is HTML not prose ---- */ #weekahead-body{white-space:normal} /* structured rows, not text */ @media (max-width: 760px){ /* expansion panels ride the screen while the table scrolls beneath */ #whispers-table td .expand-grid{ position:sticky;left:10px; width:calc(100vw - 66px);max-width:calc(100vw - 66px)} /* rail cards: real reading height, internal scroll */ .card-body{max-height:52dvh} #weekahead-body .ev{align-items:flex-start} .ev-name{min-width:0;overflow-wrap:anywhere} } /* ---- drop38c: mobile section tabs (BOARD / BRIEFING / WEEK AHEAD) ---- */ .mtabs{display:none} @media (max-width: 760px){ .mtabs{display:flex;gap:4px;position:sticky;top:0;z-index:12; background:var(--void);padding:8px 0 10px;grid-column:1 / -1} .mtabs button{flex:1;border:1px solid var(--border);background:var(--panel); color:var(--muted);font:700 10.5px "IBM Plex Sans";letter-spacing:.1em; padding:10px 6px;border-radius:8px} .mtabs button.active{color:var(--amber);border-color:#F5A52466; background:#F5A52412} /* one module per screen, driven by data-mtab on the view */ #view-scanner[data-mtab="board"] .left-rail{display:none} #view-scanner[data-mtab="brief"] .board-col{display:none} #view-scanner[data-mtab="brief"] #weekahead-card{display:none} #view-scanner[data-mtab="week"] .board-col{display:none} #view-scanner[data-mtab="week"] #briefing-card{display:none} } /* ---- drop38d: mobile polish round 3 ---- */ @media (max-width: 760px){ /* 1) the ticker list owns real vertical space */ .table-wrap{min-height:48dvh} #whispers-empty{min-height:40dvh;display:flex;align-items:center; justify-content:center;text-align:center;padding:0 24px} /* 2) status bar + clock: locked to the bottom, safe-area aware */ #healthbar{position:fixed;left:0;right:0;bottom:0;z-index:30; background:#0B0F17F2;backdrop-filter:blur(8px); padding-bottom:calc(8px + env(safe-area-inset-bottom))} #main{padding-bottom:130px} /* 3) expanded ticker: near full-bleed, roomier inside */ #whispers-table td .expand-grid{ left:8px;width:calc(100vw - 36px);max-width:calc(100vw - 36px); gap:12px;padding:4px 0} .expand-grid > div{padding:14px} .tk-row{font-size:12.5px;padding:7px 0} .expand-grid .dsk-h, .expand-grid .tk-head{font-size:10.5px} .exp-ai, .ai-text{font-size:12.5px;line-height:1.65} .exp-chart svg{min-height:120px} /* 4+5) briefing & week ahead: tall fixed reading panes, internal scroll */ #view-scanner[data-mtab="brief"] #briefing-body{ max-height:calc(100dvh - 330px);min-height:50dvh;overflow-y:auto; -webkit-overflow-scrolling:touch;font-size:13px;line-height:1.65} #view-scanner[data-mtab="week"] #weekahead-body{ max-height:calc(100dvh - 390px);min-height:44dvh;overflow-y:auto; -webkit-overflow-scrolling:touch} } /* ---- drop38e: paper strip docks flush above the footer (mobile) ---- */ @media (max-width: 760px){ .scorestrip{position:fixed;left:0;right:0;z-index:29; bottom:var(--hb-h, 78px);margin:0;border-radius:0; background:#0E1420F2;backdrop-filter:blur(8px); border-top:1px solid var(--border);padding:8px 12px; flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap} .scorestrip::-webkit-scrollbar{display:none} #main{padding-bottom:176px} /* footer + docked strip */ } /* ---- drop40: header air, footer session dock, live tape ---- */ /* header: generous rhythm now that session is gone */ #topbar{gap:26px} #topbar nav{margin-left:14px;gap:26px} #tape{margin:0 auto;padding:0 18px} .top-right{margin-left:14px} /* footer center: session pill + clock as one centered unit */ #healthbar #hb-center{position:absolute;left:50%;transform:translateX(-50%); display:flex;align-items:center;gap:14px} #healthbar #clock{position:static;transform:none} #healthbar .session{display:flex;gap:3px} #healthbar .session span{font:600 8px "IBM Plex Sans";letter-spacing:.1em; padding:2px 7px;border:1px solid var(--border);border-radius:4px;color:#5F6A80} #healthbar .session span.on{color:#141005;background:var(--amber);border-color:var(--amber)} /* live tape: tick flashes */ @keyframes tickup{0%{color:var(--up);text-shadow:0 0 8px #4ADE8066}100%{color:var(--text)}} @keyframes tickdn{0%{color:var(--down);text-shadow:0 0 8px #F8717166}100%{color:var(--text)}} .tp b.tick-up{animation:tickup 1.2s ease-out} .tp b.tick-dn{animation:tickdn 1.2s ease-out} @media (max-width: 760px){ #healthbar #hb-center{position:static;transform:none;order:10; flex:1 1 100%;justify-content:center;padding-top:2px} } /* ---- drop40b: tighter tape cluster; footer center = between groups ---- */ #tape{display:flex;gap:26px;margin:0 auto;flex:0 1 auto;align-items:baseline} .tp{white-space:nowrap} /* footer: dots | (session+clock centered in remaining space) | meta */ #healthbar #hb-center{position:static;transform:none;flex:1; display:flex;justify-content:center;align-items:center;gap:14px} #healthbar .spacer{display:none} @media (max-width: 760px){ #tape{gap:18px} #healthbar #hb-center{flex:1 1 100%;order:10;padding-top:2px} } /* ---- drop40c: stacked quotes, header fits with the identity block ---- */ #tape{gap:16px} .tp{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25} .tp .tp-s{font:700 9px "IBM Plex Sans";letter-spacing:.12em;color:#7E879B} .tp .tp-v{font-size:12px;white-space:nowrap} .tp .tp-v i{font-size:10.5px;margin-left:4px} /* header rhythm that provably fits: identity never clipped */ #topbar{gap:18px;padding-right:18px} #topbar nav{margin-left:8px;gap:20px} .top-right{margin-left:8px;flex-shrink:0} .user-block{flex-shrink:0} #tape{flex-shrink:1;min-width:0;overflow:hidden} @media (max-width: 760px){ .tp{flex-direction:row;gap:5px;align-items:baseline} /* ribbon stays one-line */ } /* ---- drop40d: quote symbols - bigger, white, glowing, centered ---- */ .tp{align-items:center} .tp .tp-s{font:800 11.5px "Archivo";letter-spacing:.14em;color:var(--ice); text-shadow:0 0 10px #5CC8FF59, 0 0 22px #5CC8FF26} .tp .tp-v{text-align:center} @media (max-width: 760px){ .tp .tp-s{font-size:10.5px;text-shadow:0 0 8px #5CC8FF4D} } /* ---- drop43: desktop rail stretches flush to the paper strip ---- */ @media (min-width: 1181px){ .grid-scanner{align-items:stretch} .left-rail{display:flex;flex-direction:column;gap:16px;min-height:0} .left-rail > .card{flex:1 1 0;display:flex;flex-direction:column;min-height:0} .left-rail .card-body{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto} #weekahead-body{max-height:none} } /* ---- drop43b: briefing scroll runs to the card border ---- */ @media (min-width: 1181px){ .left-rail > .card{overflow:hidden} /* scroll area meets the border */ .left-rail .card-body{margin:0; scrollbar-gutter:stable;padding-bottom:13px} .left-rail .card-body::-webkit-scrollbar-track{margin:4px 0} } /* ---- drop43c: footer meta color coding ---- */ .hm{font:600 9px "IBM Plex Sans";letter-spacing:.1em;margin-left:14px} .hm b{font:600 11px "IBM Plex Mono";margin-left:5px;color:var(--text)} .hm-scan{color:var(--amber)} .hm-news{color:var(--ice)} .hm-soc{color:#4ADE80} .hm-open{color:#B48CFF} .hm-pnl-up{color:#4ADE80} .hm-pnl-up b{color:var(--up)} .hm-pnl-dn{color:#F87171} .hm-pnl-dn b{color:var(--down)} @media (max-width: 760px){ .hm{margin-left:8px} } /* ---- drop43d: outrank the legacy #briefing-body.formatted 460px cap ---- */ @media (min-width: 1181px){ #briefing-body.formatted, #briefing-body{max-height:none;height:auto; flex:1 1 auto;min-height:0;overflow-y:auto} } /* ================================================================ drop44 - mobile hardening pass: collapse, tape grid, best practices ================================================================ */ @media (max-width: 760px){ /* --- iOS best practices: no zoom-on-focus, real tap targets --- */ input, select, textarea, #desk-msg{font-size:16px!important} button{min-height:38px} *{-webkit-tap-highlight-color:transparent} /* --- tape: fixed 4-up grid, VIX always on screen --- */ #tape{display:grid;grid-template-columns:repeat(4,1fr);gap:6px; overflow:visible;white-space:normal;padding:2px 0} .tp{flex-direction:column;gap:1px;align-items:center;line-height:1.2} .tp .tp-s{font-size:9.5px;letter-spacing:.1em} .tp .tp-v{font-size:11px} .tp .tp-v i{font-size:9px;margin-left:3px;display:block} /* --- scanbar: collapsible; collapsed = one slim command row --- */ .scanbar.collapsed .chip, .scanbar.collapsed .presets, .scanbar.collapsed #presets, .scanbar.collapsed .scanbar-foot{display:none} .scanbar.collapsed{padding:8px 10px} .scanbar.collapsed #btn-scan{padding:9px 16px;font-size:11px} #sb-toggle{display:inline-flex;align-items:center;justify-content:center; margin-left:auto;flex:0 0 auto;width:38px;border:1px solid var(--border); background:var(--panel2);color:var(--muted);border-radius:8px;font-size:13px} .scanbar:not(.collapsed) #sb-toggle{transform:rotate(180deg)} /* --- briefing & week ahead: tall panes, truly fully scrollable --- */ #view-scanner[data-mtab="brief"] #briefing-body, #view-scanner[data-mtab="brief"] #briefing-body.formatted, #view-scanner[data-mtab="week"] #weekahead-body{ max-height:48dvh;overflow-y:auto;-webkit-overflow-scrolling:touch} /* JS sizePanes() replaces this with the measured exact height */ /* --- footer: full status set, wrapped and colorized --- */ #hb-meta{display:flex!important;flex:1 1 100%;order:9;justify-content:center; gap:2px;padding-top:2px} .hm{margin-left:10px} .hm b{font-size:10px} /* --- paper strip: compact, one swipe line --- */ .scorestrip{font-size:10px;gap:10px;padding:7px 10px} .scorestrip a{font-size:9.5px;white-space:nowrap} /* --- interior pages: consistent panel rhythm --- */ #view-journal .panel.pad, #view-tags .panel.pad, #view-scans .panel.pad, #view-admin .panel.pad{padding:12px 10px} .drawer-actions button{min-height:40px} .gsec-body{-webkit-overflow-scrolling:touch} } /* ---- drop44c: last-line clearance + session pills that fit ---- */ @media (max-width: 760px){ #briefing-body, #weekahead-body{padding-bottom:30px!important} #hb-center{flex-wrap:wrap;gap:6px 10px;padding:0 6px;min-width:0} #healthbar .session{flex:0 0 auto} #healthbar .session span{font-size:7.5px;padding:2px 5px;letter-spacing:.06em} #healthbar #clock{font-size:9.5px;white-space:nowrap} } /* ---- drop45: mobile footer - one STATUS button, session+clock bottom-left ---- */ @media (max-width: 760px){ /* collapsed by default: dots + meta hide behind the STATUS button */ #healthbar .hb, #healthbar #hb-meta{display:none!important} #healthbar.expanded .hb{display:inline-flex!important} #healthbar.expanded #hb-meta{display:flex!important} #hb-status{display:inline-flex;align-items:center;gap:7px; font:700 9.5px "IBM Plex Sans";letter-spacing:.12em;color:var(--muted); background:var(--panel);border:1px solid var(--border);border-radius:7px; padding:6px 11px;min-height:30px} #hb-status .dot{width:7px;height:7px;border-radius:50%;background:#4ADE80; box-shadow:0 0 6px #4ADE8088} #hb-status.warn .dot{background:var(--amber);box-shadow:0 0 6px #F5A52488} #hb-status.bad .dot{background:var(--down);box-shadow:0 0 6px #F8717188} /* session + clock: one row, bottom-left */ #hb-center{order:12;flex:1 1 100%;justify-content:flex-start; flex-wrap:nowrap;gap:10px;padding:2px 0 0} #healthbar{row-gap:7px} /* ticker list claims the reclaimed space */ .table-wrap{min-height:56dvh} #whispers-empty{min-height:50dvh} } @media (min-width: 761px){ #hb-status{display:none} } /* ---- drop45b: tape evenly spaced between nav and actions (desktop) ---- */ @media (min-width: 761px){ #tape{flex:1 1 auto;margin:0;justify-content:space-evenly; display:flex;gap:0;min-width:0;padding:0 8px} #topbar nav{margin-right:0} .top-right{margin-left:0} } /* ---- drop45c: quotes as a tight centered cluster in the gap ---- */ @media (min-width: 761px){ #tape{justify-content:center;gap:38px} } /* econ actuals: bullish/bearish vs forecast */ .ev-detail .ev-a.live.up{color:var(--up)} .ev-detail .ev-a.live.dn{color:var(--down)} /* ---- drop48b: alert feed - colored variables, unread standout ---- */ .al-body{font:500 11px "IBM Plex Mono";color:#8B94A7;margin:3px 0 2px;line-height:1.5} .al-ice{color:var(--ice);font-weight:600} .al-amber{color:var(--amber);font-weight:600} .al-vio{color:#B48CFF;font-weight:600} .al-white{color:var(--text);font-weight:600} .al-item.unread{border-left:3px solid var(--amber);background:#F5A5240D; padding-left:11px;border-radius:0 8px 8px 0} .al-new{font:800 7.5px "Archivo";letter-spacing:.12em;color:#141005; background:var(--amber);border-radius:4px;padding:2px 5px;margin-left:8px; vertical-align:2px} /* ---- drop48c: alert rows - kind chips, aligned grid ---- */ .al-item{display:grid;grid-template-columns:auto 1fr auto; gap:3px 10px;align-items:center;padding:10px 12px 10px 11px; border-left:3px solid transparent;border-bottom:1px solid #1B2331} .al-item .al-title{font:600 12.5px "IBM Plex Sans";color:var(--text)} .al-item .al-time{font:500 10px "IBM Plex Mono";color:#5F6A80;white-space:nowrap; display:flex;align-items:center;gap:7px} .al-item .al-body{grid-column:1 / -1;margin:0} .al-kind{font:800 7.5px "Archivo";letter-spacing:.13em;border-radius:4px; padding:3px 6px;border:1px solid} .kk-whisper{color:var(--ice);border-color:#5CC8FF55;background:#5CC8FF10} .kk-entry{color:var(--up);border-color:#4ADE8055;background:#4ADE8010} .kk-exit{color:#B48CFF;border-color:#B48CFF55;background:#B48CFF10} .kk-tag{color:var(--amber);border-color:#F5A52455;background:#F5A52410} .kk-halt{color:var(--down);border-color:#F8717155;background:#F8717110} .al-item.k-trade{background:#4ADE8006} .al-item.unread{border-left-color:var(--amber);background:#F5A5240D} /* journal NOTES: truncated inline, full text on hover/tap */ .jn-note{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:500 11.5px "IBM Plex Sans";color:#8B94A7;cursor:help} @media (max-width: 760px){ .jn-note{max-width:180px} } /* alert timestamps: time over date */ .al-tstack{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3} .al-tstack b{font:600 10px "IBM Plex Mono";color:#7E879B} .al-tstack i{font:500 8.5px "IBM Plex Mono";font-style:normal;color:#4E586E; letter-spacing:.05em;text-transform:uppercase} /* ---- drop50: trades performance + manual-trade modal ---- */ #perf-table{width:100%} #perf-table .sym{font-weight:700} #mt-modal{position:fixed;inset:0;background:#000A;z-index:80; display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)} #mt-modal.hidden{display:none} .mt-card{background:var(--panel);border:1px solid var(--border);border-radius:12px; padding:18px;width:min(560px,94vw);box-shadow:0 18px 60px #000C} .mt-head{display:flex;justify-content:space-between;align-items:center; margin-bottom:14px;font:700 12px "Archivo";letter-spacing:.1em;color:var(--amber)} #mt-modal .mt-add{display:flex;gap:8px;flex-wrap:wrap} #mt-modal input{padding:9px 10px;font:500 13px "IBM Plex Mono";background:var(--void); border:1px solid var(--border);border-radius:7px;color:var(--text);flex:1 1 90px} /* manual-source chip in the unified journal */ .src-chip{font:800 7.5px "Archivo";color:#B48CFF;border:1px solid #B48CFF66; border-radius:4px;padding:1px 4px;vertical-align:2px;margin-left:5px} /* bell ping: new alert arrived over the wire */ @keyframes bellping{0%{box-shadow:0 0 0 0 #F5A52488}70%{box-shadow:0 0 0 12px #F5A52400}100%{box-shadow:0 0 0 0 #F5A52400}} .bell-ping{animation:bellping 1s ease-out 2} /* ---- drop58: broker card + branded toast ---- */ .brk-row{display:flex;align-items:center;gap:12px} .brk-badge{font:800 8px "Archivo";letter-spacing:.13em;border-radius:4px;padding:3px 8px} .brk-badge.ok{color:#0F2818;background:var(--up)} .brk-form{display:flex;gap:8px;flex-wrap:wrap} .brk-form input{flex:1 1 200px;padding:9px 11px;font:500 12.5px "IBM Plex Mono"; background:var(--void);border:1px solid var(--border);border-radius:7px;color:var(--text)} #toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px); z-index:200;background:var(--panel);border:1px solid var(--amber);border-radius:10px; color:var(--text);font:600 12.5px "IBM Plex Sans";padding:12px 20px; box-shadow:0 10px 40px #000B, 0 0 24px #F5A52422;opacity:0;pointer-events:none; transition:opacity .18s ease, transform .18s ease;max-width:90vw;text-align:center} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} #toast.show.warn{border-color:var(--down);box-shadow:0 10px 40px #000B, 0 0 24px #F8717133} /* ---- drop58c: endpoint toggle - unmistakable selected state ---- */ #broker-body .seg{display:inline-flex;gap:0;border:1px solid var(--border); border-radius:8px;overflow:hidden} #broker-body .seg button{border:0;border-radius:0;background:transparent; color:var(--muted);font:700 10.5px "IBM Plex Sans";letter-spacing:.1em; padding:8px 18px} #broker-body .seg button.on{color:#141005;background:var(--amber)} #broker-body .seg button#ep-live.on{background:var(--down);color:#2A0B0B} #broker-card{align-self:start} /* ---- drop59: settings segmentation ---- */ .set-seg-head{font:800 10.5px "Archivo";letter-spacing:.16em;color:var(--amber); margin:4px 0 12px;padding-bottom:8px;border-bottom:1px solid #F5A52426; display:flex;align-items:baseline;gap:10px} .set-seg-head .muted{font:500 10.5px "IBM Plex Sans";letter-spacing:.02em; text-transform:none} .set-seg-head.plat{color:#B48CFF;border-bottom-color:#B48CFF26;margin-top:26px} .settings-grid.row-user{grid-template-columns:repeat(4,1fr)} .settings-grid.row-platform{grid-template-columns:repeat(2,1fr)} #broker-card{align-self:stretch} @media (max-width: 1400px){ .settings-grid.row-user{grid-template-columns:repeat(2,1fr)} } @media (max-width: 1180px){ .settings-grid.row-user{grid-template-columns:1fr 1fr} } @media (max-width: 760px){ .settings-grid.row-user, .settings-grid.row-platform{grid-template-columns:1fr} } /* guide CLOSE: a labeled button, hard right */ .guide-head #guide-close{margin-left:auto;order:99;font:700 10px "IBM Plex Sans"; letter-spacing:.12em;padding:8px 16px} @media (max-width: 760px){ .guide-head #guide-close{order:2} #guide-search{order:3} } /* ---- drop64: scan history - internal scroll, sticky header, clean stop ---- */ #scans-wrap{overflow-y:auto;-webkit-overflow-scrolling:touch; scrollbar-gutter:stable} #view-scans thead th{position:sticky;top:0;background:var(--panel);z-index:3; box-shadow:0 1px 0 var(--border)} #view-scans .panel{overflow:hidden} /* tag source chips */ .tag-src{font:800 7.5px "Archivo";letter-spacing:.12em;border-radius:4px; padding:3px 7px;border:1px solid} .tag-src.plat{color:var(--amber);border-color:#F5A52455;background:#F5A52410} .tag-src.user{color:var(--ice);border-color:#5CC8FF55;background:#5CC8FF10} /* ---- THEMES states (drop 70) ---- */ .tag-src.cand{color:#F5A524;border-color:#F5A52455;background:#F5A52410} .tag-src.ret{color:#8b93a7;border-color:#8b93a755;background:#8b93a710} .cand-head{font:800 10px "Archivo";letter-spacing:.14em;color:#F5A524;margin-bottom:8px} .cand-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid #ffffff10;flex-wrap:wrap} .cand-row:last-child{border-bottom:none} .cand-phrase{font-weight:700} .cand-actions{margin-left:auto;display:flex;gap:8px} #theme-retired-panel summary{cursor:pointer;font:800 10px "Archivo";letter-spacing:.14em;color:#8b93a7} /* ---- THEMES boxed tables (drop 72) ---- */ .tbl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--border)} .tbl-title{font:800 10px "Archivo";letter-spacing:.14em;color:var(--amber)} .tbl-count{color:var(--muted);letter-spacing:.06em} .tbl-filters{display:flex;gap:8px;flex-wrap:wrap} .tbl-filters input,.tbl-filters select{padding:5px 8px;font-size:12px;width:110px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;color:var(--text)} .tbl-filters input[type="number"]{width:80px} .tbl-box{max-height:340px;overflow:auto} .tbl-box table{width:100%} .tbl-box thead th{position:sticky;top:0;background:var(--panel);z-index:2} table.sortable th[data-key]{cursor:pointer;user-select:none} table.sortable th.s-asc::after{content:" \25B2";color:var(--amber)} table.sortable th.s-desc::after{content:" \25BC";color:var(--amber)} @media (max-width:760px){ .tbl-head{flex-direction:column;align-items:flex-start} .tbl-filters input,.tbl-filters select{width:31%;min-width:88px} .tbl-filters input[type="number"]{width:88px} .tbl-box{max-height:300px} } /* ---- THEMES spacing + flush candidates (drop 73) ---- */ #theme-cands-panel{margin-top:14px} #theme-retired-panel{margin-top:14px} /* ---- dashboard card alignment (dashcards) ---- */ #perf-panel h3,#decisions-card h3{margin-top:0} .panel .board-head{margin:0;padding:10px 12px;border-bottom:1px solid var(--border)} .panel .board-head h2{margin:0} /* drop93: perf table ticks like the tape */ #perf-body b.tick-up{animation:tickup 1.2s ease-out} #perf-body b.tick-dn{animation:tickdn 1.2s ease-out} /* drop95: level-edit / close-confirm modal */ #lv-modal{position:fixed;inset:0;background:#000A;z-index:80;display:flex;align-items:center;justify-content:center} #lv-modal.hidden{display:none} /* ---- theme intel + desk (themeintel) ---- */ .th-click{cursor:pointer} .th-actions{display:inline-flex;gap:6px;flex-wrap:wrap} .ti-head{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px} .ti-item{padding:6px 0;border-bottom:1px solid #ffffff10} .ti-item:last-child{border-bottom:none} .ti-item a{color:var(--ice)} /* ---- theme heat (themeheat) ---- */ .heat{white-space:nowrap;font-size:11px;letter-spacing:-1px;cursor:help} .heat-off{opacity:.14;filter:grayscale(1)} .heat-cell{width:74px} /* ---- manual trade (manualtrade) ---- */ .btrade-btn{float:right;font-size:9.5px} .btrade-wrap{position:fixed;inset:0;background:#000000cc;z-index:60;display:flex; align-items:center;justify-content:center;padding:16px} .btrade-wrap.hidden{display:none} .btrade-card{background:var(--panel);border:1px solid var(--border);border-radius:12px; width:min(420px,100%);max-height:90vh;overflow:auto} .btrade-head{display:flex;align-items:center;gap:8px;padding:12px 14px; border-bottom:1px solid var(--border);font:800 11px "Archivo";letter-spacing:.14em} .btrade-head button{margin-left:auto} .btrade-body{padding:14px;display:flex;flex-direction:column;gap:10px} .btrade-row{display:flex;align-items:center;gap:10px} .btrade-row label{font:800 9.5px "Archivo";letter-spacing:.12em;color:var(--muted);width:82px} .btrade-row input{flex:1;padding:7px 9px;background:var(--panel2);border:1px solid var(--border); border-radius:6px;color:var(--text);font-family:inherit} .btrade-seg{display:flex;gap:6px} .btrade-seg button{padding:6px 13px;font-size:10px;opacity:.55; border-color:var(--border);color:var(--muted);background:transparent} .btrade-seg button:hover:not([disabled]){opacity:.85} .btrade-seg button.on{opacity:1;background:var(--amber);color:#0B0E14; border-color:var(--amber);font-weight:800;box-shadow:0 0 0 1px #F5A52455} .btrade-seg button[disabled]{opacity:.28;cursor:not-allowed} .btrade-hint{font:800 8px "Archivo";letter-spacing:.1em;color:var(--muted); align-self:center} .btrade-label{font:800 8.5px "Archivo";letter-spacing:.14em;color:var(--muted); margin-bottom:-4px} .btrade-preview{background:transparent;border:1px dashed var(--border); border-radius:8px;padding:11px 12px;min-height:38px} .btrade-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline} .btrade-grid span{font:800 9px "Archivo";letter-spacing:.1em;color:var(--muted)} .btrade-grid b{text-align:right} .btrade-place{padding:10px;font:800 11px "Archivo";letter-spacing:.12em; border-color:var(--ice);color:var(--ice)} .btrade-place[disabled]{opacity:.4;cursor:not-allowed} .btrade-foot{font-size:9.5px;line-height:1.5} @media (max-width:560px){.btrade-row{flex-wrap:wrap}.btrade-row label{width:100%}} .btrade-close{font:800 9px "Archivo";letter-spacing:.12em;padding:5px 11px} .btrade-seg button.on[data-side="short"]{background:#FB4E5D;border-color:#FB4E5D; color:#0B0E14} .src-chip.short{color:#FB4E5D;border-color:#FB4E5D66} /* drop98: pending rows + flush action column */ #perf-table{min-width:1040px} #perf-table th:last-child, #perf-table td:last-child{position:sticky;right:0;z-index:2; background:var(--panel,#0F1420);box-shadow:-8px 0 10px -8px #000C} #perf-table tr.pending-row td{opacity:.9} #perf-table tr.pending-row .sym{color:var(--ice,#7DD3FC)} /* drop98b: pending row spans full width - not sticky */ #perf-table tr.pending-row td:last-child{position:static;background:none;box-shadow:none} /* drop99: themes action column + overflow menu */ .row-actions{white-space:nowrap;text-align:right;width:1%} .row-actions .act-hidden{display:none} .th-actions{flex-wrap:nowrap} .cand-actions.row-actions{justify-content:flex-end;gap:6px} .act-more{padding:2px 9px;font-size:13px;line-height:1.15;letter-spacing:0} #th-menu{position:fixed;z-index:120;min-width:150px;padding:6px;border-radius:8px; background:var(--panel,#0F1420);border:1px solid var(--border,#2A3040); box-shadow:0 12px 30px #000B;display:flex;flex-direction:column;gap:2px} #th-menu.hidden{display:none} #th-menu button{width:100%;text-align:left;background:transparent;border:none; color:var(--text,#E6EAF2);padding:7px 10px;border-radius:6px;cursor:pointer; font:600 11px "IBM Plex Sans";letter-spacing:.07em} #th-menu button:hover{background:#FFFFFF12} #th-menu button.danger{color:var(--down,#F87171)} /* drop100: perf table fits its panel - no horizontal scroll */ #perf-table{min-width:0} #perf-table th,#perf-table td{padding-left:7px;padding-right:7px;white-space:nowrap} /* drop100: phrase detail hint */ .th-hint{display:block;font:400 8px "IBM Plex Sans";letter-spacing:.06em; color:var(--muted,#8B93A7);text-transform:uppercase;margin-top:2px;opacity:.75} .th-click{cursor:pointer} .th-click:hover .th-hint{opacity:1;color:var(--amber,#F5A524)} #pm-toggle.active{background:var(--ice);color:#08131C;border-color:var(--ice)} /* ---- drop127: scorecard + backtest panel styling ---- */ .panel-title{display:flex;align-items:center;gap:8px;font:600 12px "IBM Plex Mono"; letter-spacing:.14em;color:var(--amber);border-bottom:1px solid var(--border); padding-bottom:9px;margin:0 0 14px} .bt-note{font:500 10.5px/1.6 "IBM Plex Mono";color:var(--muted); border:1px solid var(--border);border-left:3px solid var(--amber); border-radius:6px;padding:8px 12px;margin-bottom:14px;background:#F5A52406} .pill{display:inline-block;font:600 9.5px "IBM Plex Mono";letter-spacing:.1em; padding:2px 9px;border-radius:99px;border:1px solid var(--border);color:var(--muted)} .pill.run{color:var(--amber);border-color:#F5A52455} .pill.done{color:var(--up);border-color:#2fbf7144} .pill.err{color:var(--down);border-color:#e4536044} .bt-bar{height:3px;width:110px;background:var(--border);border-radius:2px; overflow:hidden;margin-top:5px} .bt-bar>i{display:block;height:100%;background:var(--amber);transition:width .6s} #scorecard .mini-table, #backtest .mini-table{max-width:none;width:100%} #scorecard .mini-table th, #backtest .mini-table th{color:var(--muted); font-size:10px;letter-spacing:.1em;text-align:left;padding:4px 12px 7px 0; border-bottom:1px solid var(--border)} #scorecard .mini-table td, #backtest .mini-table td{padding:6px 12px 6px 0; border-bottom:1px solid #ffffff08} #backtest tbody tr[data-bt]{cursor:pointer} #backtest tbody tr[data-bt]:hover td{background:#ffffff05} #backtest tbody tr.bt-sel td{background:#F5A52409} #backtest input[type=date]{background:#0d1420;border:1px solid var(--border); color:var(--text);border-radius:6px;padding:6px 10px;font:500 12px "IBM Plex Mono"} /* ---- drop128: compact date row + header/data alignment ---- */ #backtest input[type=date]{width:150px;flex:0 0 auto} #scorecard .mini-table th.num, #backtest .mini-table th.num, #scorecard .mini-table td.num, #backtest .mini-table td.num{ text-align:right;padding-right:14px} #backtest #bt-detail .mini-table{width:100%;min-width:0} #backtest #bt-runs .mini-table{max-width:1100px} #backtest #bt-detail .table-wrap .mini-table{width:auto;min-width:760px} /* ---- drop130b: backtest detail - carded grid, zebra, signed colour ---- */ .bt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:14px;align-items:start} .bt-card{background:#0d1420;border:1px solid var(--border);border-radius:8px; padding:12px 14px;overflow-x:auto} .bt-card .bt-card-title{font:600 10px "IBM Plex Mono";letter-spacing:.14em; color:var(--muted);margin-bottom:9px;display:flex;align-items:center;gap:6px} .bt-card .mini-table{width:100%;min-width:0} .bt-card .mini-table tbody tr:nth-child(odd) td{background:#ffffff04} .bt-card .mini-table td:first-child{color:var(--ice);font-weight:600} .bt-card .mini-table td{white-space:nowrap} .wl-hi{color:var(--up);font-weight:600} .wl-lo{color:var(--down)} .bt-equity-card{background:#0d1420;border:1px solid var(--border); border-radius:8px;padding:12px 14px;margin-top:14px} #bt-detail .table-wrap{background:#0d1420;border:1px solid var(--border); border-radius:8px;padding:4px 14px 10px} #bt-detail .table-wrap .mini-table tbody tr:nth-child(odd) td{background:#ffffff04} .bt-gatebar{display:inline-block;height:5px;background:#e4536066;border-radius:3px; vertical-align:middle;margin-left:8px} /* ---- drop130c: cards must CONTAIN their tables - no horizontal scroll ---- */ .bt-card{overflow-x:hidden} .bt-card .mini-table{font-size:11px} .bt-card .mini-table th{font-size:9px;letter-spacing:.06em;padding:3px 8px 6px 0} .bt-card .mini-table td{padding:5px 8px 5px 0} .bt-card .mini-table th:last-child, .bt-card .mini-table td:last-child{padding-right:0} #scorecard .mini-table th.num, #backtest .mini-table th.num, #scorecard .mini-table td.num, #backtest .mini-table td.num{padding-right:8px} .bt-card .mini-table th.num:last-child, .bt-card .mini-table td.num:last-child{padding-right:0} .bt-gatebar{display:block;margin:3px 0 0 auto} /* ---- drop131: SCANS tabs + true card fit ---- */ .scans-tab{cursor:pointer} .scans-tab.active{border-color:var(--amber);color:var(--amber)} .bt-grid > .bt-card{min-width:0} .bt-card .mini-table{width:100%} .bt-card-gate .mini-table{table-layout:fixed} .bt-card-gate .mini-table td:first-child{overflow:hidden;text-overflow:ellipsis} .bt-card-gate .mini-table th:first-child{width:58%} .bt-sub{display:block;font-size:9px;color:var(--muted);font-weight:400;margin-top:1px} /* ---- drop131e: true tab bar (SCANS) ---- */ .tabbar{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px} .tab{font:600 11px "IBM Plex Mono";letter-spacing:.12em;color:var(--muted); padding:9px 18px 10px;cursor:pointer;position:relative;top:1px; border:1px solid transparent;border-bottom:none;border-radius:7px 7px 0 0; user-select:none;transition:color .12s} .tab:hover{color:var(--text)} .tab.active{color:var(--amber);background:var(--panel); border-color:var(--border);border-bottom:1px solid var(--panel)} /* ---- drop132: SCANS tab bar pins to the top of #main's scrollport ---- #main is the scroll container at every width (the drop6h flex block), and #topbar is a flex SIBLING outside it - so top:0 pins the bar flush under the header with no offset math. Scoped to the id, not .tabbar. z-index 4 clears the in-#main sticky theads (z-index 2-3) and stays under #topbar (z-index 5). The box-shadow paints .tabbar's own 16px margin-bottom, which would otherwise let rows scroll through the gap. */ #scans-tabs{position:sticky;top:0;z-index:4;background:var(--void); box-shadow:0 16px 0 var(--void)} /* ---- drop134: THEMES tabs (WATCHING / CANDIDATES) ---- .pane-off is TAB state and is deliberately NOT .hidden: renderThemes uses .hidden on #theme-cands-panel as DATA state, and one class carrying two meanings is a race. Plain display:none, so .hidden's !important still wins when there is genuinely nothing to show. */ .pane-off{display:none} .themes-tab{cursor:pointer} #themes-tabs{position:sticky;top:0;z-index:4;background:var(--void); box-shadow:0 16px 0 var(--void)} /* ---- drop133: backtest cards fit inside their boxes ---- The rule above carried width:auto;min-width:440px at 0,2,1 - it outranked every .bt-card override and forced a 440px table into a 359px card, which .bt-card{overflow-x:hidden} then clipped. Killed at source (gotcha 6). */ .bt-grid{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))} .bt-card .mini-table{table-layout:fixed;width:100%;min-width:0} .bt-card:not(.bt-card-gate) .mini-table th:first-child{width:36%} .bt-card .mini-table td{overflow:hidden;text-overflow:ellipsis} /* ---- drop138: backtest parameter form ---- */ #bt-params{margin:0 0 14px;border:1px solid var(--border);border-radius:8px; background:#0d1420} #bt-params > summary{cursor:pointer;padding:9px 14px;user-select:none; font:600 10px "IBM Plex Mono";letter-spacing:.14em;color:var(--amber)} #bt-params > summary #bt-pcount{margin-left:8px;font-size:9px;letter-spacing:.1em} .bt-edited-txt{color:var(--amber)!important} .bt-pgroup{padding:2px 14px 10px;display:flex;flex-wrap:wrap;gap:9px 16px; align-items:flex-end} .bt-plabel{width:100%;margin:6px 0 2px;font:700 9px "IBM Plex Sans"; letter-spacing:.12em;color:var(--muted)} .bt-pfield{display:flex;flex-direction:column;gap:3px} .bt-pfield span{font:500 9.5px "IBM Plex Mono";letter-spacing:.06em;color:var(--muted)} #backtest input[type=number]{background:var(--void);border:1px solid var(--border); color:var(--text);border-radius:6px;padding:5px 8px;width:106px; font:500 11px "IBM Plex Mono"} #backtest input[type=number].bt-edited{border-color:var(--amber);color:var(--amber)} /* ---- drop139: legible parameter form + collapsible run rows ---- */ #bt-params > summary{font-size:12px;padding:11px 14px} #bt-params > summary #bt-pcount{font-size:10.5px} .bt-plabel{font:700 11.5px "IBM Plex Sans";letter-spacing:.14em; color:var(--text);margin:10px 0 4px} .bt-pfield span{font:500 11px "IBM Plex Mono";letter-spacing:.04em} .bt-pfield .qi{margin-left:5px} #backtest input[type=number]{font-size:12px;width:118px;padding:6px 9px} /* the runs table is clickable, and clicking again closes */ #bt-runs tbody tr{cursor:pointer} /* ---- drop143: two-column backtest top - RUNS | TRADES ---- #bt-top carries a DEFINITE height and each column is a min-height:0 flex column, so both lists end flush at the bottom by construction rather than by two numbers that drift apart. --bt-toph is the only knob. Every table rule below is prefixed #backtest deliberately: the base rules at the top of this file are `#backtest .mini-table th` (1,1,1), so a bare `.bt-list .mini-table th` (0,2,1) would lose silently - gotcha 6, the same assassin that clipped the detail cards for three drops. */ #backtest{--bt-toph:372px} #bt-top{display:flex;gap:14px;height:var(--bt-toph);align-items:stretch} .bt-col{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column} .bt-list{flex:1 1 auto;min-height:0;overflow:auto;background:#0d1420; border:1px solid var(--border);border-radius:8px;padding:0 12px 6px} .bt-colhead{display:flex;align-items:center;gap:10px;margin-bottom:11px; min-height:30px;font:600 11px "IBM Plex Mono";letter-spacing:.13em; color:var(--muted)} .bt-colhead #bt-sym-filter{width:104px;background:#0d1420;color:var(--text); border:1px solid var(--border);border-radius:6px;padding:4px 9px; font:500 11px "IBM Plex Mono"} .bt-empty{color:var(--muted);font:500 11px "IBM Plex Mono";padding:12px 0} #bt-runbar input[type=date]{width:126px} /* the two lists: compact, zebra'd, header pinned to the box's own scrollport. border-bottom does not survive position:sticky reliably, so the header rule is an inset shadow instead. */ #backtest .bt-list .mini-table{font-size:11px} #backtest .bt-list .mini-table th{position:sticky;top:0;z-index:1; background:#0d1420;padding:7px 8px 6px 0;border-bottom:none; box-shadow:inset 0 -1px 0 var(--border)} #backtest .bt-list .mini-table td{padding:5px 8px 5px 0} #backtest .bt-list .mini-table th.num, #backtest .bt-list .mini-table td.num{padding-right:8px} #backtest .bt-list .mini-table tbody tr:nth-child(odd) td{background:#ffffff04} #backtest .bt-list .mini-table th:last-child, #backtest .bt-list .mini-table td:last-child{padding-right:0} /* stacked below the split point - a 540px column becomes unreadable first */ @media (max-width:1080px){ #bt-top{display:block;height:auto} .bt-col + .bt-col{margin-top:14px} .bt-list{max-height:300px} } /* ---- drop144: geometry strip + BY EXIT card ---- Prefixed #backtest for the same reason drop143's rules are: the base table rules in this file are (1,1,1) and a bare class rule loses. */ .bt-strip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .bt-stat{background:#0d1420;border:1px solid var(--border);border-radius:7px; padding:7px 12px 8px;display:flex;flex-direction:column;gap:3px; min-width:104px;flex:0 1 auto} .bt-stat-l{font:700 8.5px "IBM Plex Sans";letter-spacing:.14em;color:var(--muted)} .bt-stat-v{font:600 14px "IBM Plex Mono";color:var(--text);letter-spacing:.02em} .bt-stat-v.up{color:var(--up)} .bt-stat-v.down{color:var(--down)} .bt-stat-v.warn{color:var(--amber)} @media (max-width:760px){ .bt-stat{min-width:0;flex:1 1 30%} .bt-stat-v{font-size:12.5px} } /* ---- drop145: geometry chip tooltips ---- The label row becomes a flex line so the ? sits on the baseline beside the text rather than wrapping. .qi inherits letter-spacing from .bt-stat-l (.14em), which pushes the glyph off-centre inside a 14px circle - reset it here. Scoped .bt-stat .qi (0,2,0) so it outranks the base .qi (0,1,0). */ .bt-stat-l{display:flex;align-items:center} .bt-stat .qi{width:12px;height:12px;font-size:8px;margin-left:6px; letter-spacing:0;flex:0 0 auto} .bt-stat{min-width:118px} /* ---- drop146: desk read ---- */ .bt-ai{background:linear-gradient(180deg,#0e1622,#0b111b); border:1px solid var(--border);border-left:3px solid var(--ice); border-radius:8px;padding:13px 16px 15px;margin:0 0 14px} .bt-ai-head{display:flex;align-items:center;gap:8px;margin-bottom:11px} .bt-ai-title{font:600 11px "IBM Plex Mono";letter-spacing:.16em;color:var(--ice)} .bt-ai-model{font:500 9.5px "IBM Plex Mono";letter-spacing:.04em; color:var(--muted);padding:2px 8px;border:1px solid var(--border); border-radius:99px} .bt-ai-head button{margin-left:auto;flex:0 0 auto} .bt-ai-verdict{font:500 14.5px/1.55 "IBM Plex Sans";color:var(--text); margin-bottom:9px} .bt-ai-rel{display:inline-block;font:700 9px "IBM Plex Sans";letter-spacing:.14em; padding:2px 9px;border-radius:99px;border:1px solid var(--border); color:var(--muted);vertical-align:middle} .bt-ai-rel.high{color:var(--up);border-color:#2fbf7144} .bt-ai-rel.medium{color:var(--amber);border-color:#F5A52455} .bt-ai-rel.low{color:var(--down);border-color:#e4536044} .bt-ai-reln{font:400 11.5px/1.5 "IBM Plex Sans";color:var(--muted);margin-left:9px} .bt-ai-sec{font:700 9px "IBM Plex Sans";letter-spacing:.16em;color:var(--muted); margin:16px 0 8px} .bt-ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:10px;align-items:start} .bt-find{border:1px solid var(--border);border-left:3px solid var(--muted); border-radius:7px;padding:10px 13px;background:#ffffff03;min-width:0} .bt-find-crit{border-left-color:var(--down)} .bt-find-warn{border-left-color:var(--amber)} .bt-find-info{border-left-color:var(--ice)} .bt-find-t{font:700 10px "IBM Plex Sans";letter-spacing:.1em;color:var(--text); margin-bottom:6px;text-transform:uppercase} .bt-find-b{font:400 12px/1.6 "IBM Plex Sans";color:#C3C9D6} .bt-find-e{font:500 10.5px/1.5 "IBM Plex Mono";color:var(--muted);margin-top:8px; padding-top:8px;border-top:1px dashed #ffffff14;overflow-wrap:anywhere} .bt-test{border:1px dashed #ffffff1f;border-radius:7px;padding:10px 13px; background:#ffffff03;min-width:0} .bt-test-c{font:600 11.5px "IBM Plex Mono";color:var(--amber);margin-bottom:6px; overflow-wrap:anywhere} .bt-test-h{font:400 12px/1.55 "IBM Plex Sans";color:#C3C9D6} .bt-test-r{font:500 10.5px/1.55 "IBM Plex Mono";color:var(--muted);margin-top:7px} .bt-hl{display:flex;flex-wrap:wrap;gap:8px;margin:11px 0 2px} .bt-hl-i{border:1px solid var(--border);border-radius:6px;padding:6px 11px; background:#ffffff04;max-width:280px} .bt-hl-l{font:700 8.5px "IBM Plex Sans";letter-spacing:.14em;color:var(--muted); display:block;margin-bottom:2px} .bt-hl-v{font:600 13px "IBM Plex Mono";color:var(--ice)} .bt-hl-n{font:400 10px/1.4 "IBM Plex Sans";color:var(--muted);display:block; margin-top:3px} .bt-ai-cav{font:400 10.5px/1.6 "IBM Plex Sans";color:var(--muted);margin-top:14px; padding-top:10px;border-top:1px solid var(--border)} .bt-ai-empty,.bt-ai-busy{font:400 12px/1.6 "IBM Plex Sans";color:var(--muted)} .bt-ai-busy{color:var(--amber);font-family:"IBM Plex Mono";font-size:11.5px} .bt-ai-err{font:500 11px "IBM Plex Mono";color:var(--down);margin-top:10px} /* ---- drop148: PARAMETERS must not be clipped by the flush-bottom top ---- The definite height on #bt-top is what makes the two lists end level. An expanded parameter form is taller than that box, so while it is open the height is released and the lists fall back to a ceiling instead. Closing the form restores the flush layout. */ #bt-top.bt-params-open{height:auto} #bt-top.bt-params-open .bt-list{max-height:var(--bt-toph)} #bt-top.bt-params-open #bt-trades{min-height:120px}