: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 "Inter",system-ui,sans-serif;padding-bottom:44px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.muted{color:var(--muted);font-size:12px}
/* drop235: a retained row - matched earlier today, not on the live scan.
Dimmed rather than recoloured, because every colour on this board already
means something (up/down, tier, strength) and a new one would read as a
new dimension rather than as age. The left rule is the only structural
marker, so the row still scans as part of the same table. */
#whispers-body tr.stale{opacity:.55}
#whispers-body tr.stale td:first-child{box-shadow:inset 2px 0 0 var(--muted)}
#whispers-body tr.stale:hover{opacity:.85}
.hidden{display:none!important}
button{background:var(--amber);color:#141005;border:0;border-radius:6px;
font:700 12px "Inter";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)}
/* drop236: ice for an active toggle is not a new colour - #pm-toggle.active
and #cam-toggle.active already turn it, and the LABEL does the
distinguishing (drop199's rule). */
#live-toggle{margin-left:14px}
#live-toggle.active{color:var(--ice);border-color:#5CC8FF55;background:#5CC8FF0F}
input,textarea{background:var(--panel2);border:1px solid var(--border);border-radius:6px;
color:var(--text);font:14px "Inter";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 "Space Grotesk";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 "Inter";
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 "Space Grotesk";letter-spacing:.14em;margin:0 0 2px}
h3{font:800 12px "Space Grotesk";letter-spacing:.14em;margin:18px 0 8px}
h4{font:800 11px "Space Grotesk";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 "Inter";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 "Inter";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);transition:color .2s}
.hb::before{content:"●";margin-right:6px;color:var(--muted)}
.hb.ok::before{color:var(--up)}
/* ---- drop191: the LABEL carries the state, not just the dot ----
Six identical grey labels differing by one bullet colour is a signal you
have to go looking for, which is the opposite of what a health strip is
for. A hard failure also pulses; a degraded one does not, so the pulse
keeps meaning "act now". */
.hb.bad{color:var(--down);animation:hb-pulse 1.8s ease-in-out infinite}
.hb.bad::before{color:var(--down);text-shadow:0 0 6px #FB4E5D88}
.hb.warn{color:var(--amber)}
@keyframes hb-pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* Colour must never depend on a motion preference - drop the animation and
keep the red, or reduced-motion users lose the signal entirely. */
@media (prefers-reduced-motion: reduce){
.hb.bad, #hb-status.bad{animation:none}
}
.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 "Space Grotesk";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 "Inter";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 "Space Grotesk";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 "Space Grotesk";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 "Inter";
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 "Inter";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 "Inter";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 "Inter";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 "Space Grotesk";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 "Inter";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 "Inter";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:12.5px;color:var(--muted);
letter-spacing:.08em;text-transform:uppercase}
/* ---- drop198/199: which board you are on ----
ONE outlined pill containing the mode AND its detail. Outline in the style
of the topbar buttons - dark fill, hairline border, coloured text - keeping
the ice that #pm-toggle.active and #cam-toggle.active already use, so the
pill and the button agree by construction.
Every board gets the SAME outline: the word identifies it, which is how the
toggles already work. An amber variant would have set amber against --anom
yellow, and the palette note at the top of this file exists to keep those
two separable. */
.scanbar-metarow{display:flex;align-items:center;justify-content:flex-end;
margin-top:10px}
.bmetabar{display:inline-flex;align-items:center;gap:10px;max-width:100%;
border:1px solid var(--ice);border-radius:8px;padding:6px 14px;
background:#5CC8FF10}
.bmetabar .scanbar-meta{margin-top:0;text-align:left;color:var(--anom);
font-size:12px}
.bbadge{font:800 11.5px "IBM Plex Mono";letter-spacing:.16em;line-height:1;
color:var(--anom);white-space:nowrap;
padding-right:10px;border-right:1px solid #5CC8FF55}
.bbadge:empty{display:none}
.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 "Inter";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 "Inter";
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 "Inter";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 "Inter";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 "Space Grotesk";letter-spacing:.12em;color:var(--muted);margin:10px 0 3px}
.ev.ec-out{border-left:2px solid #2E3A52;background:#161D2B66;opacity:.82}
.ev.ec-out.ec-act{border-left-color:var(--amber);opacity:1}
/* drop369: pinned while the days scroll - sticky inside the card body,
panel background so rows slide underneath, above the day headers. */
.wk-imp{position:sticky;top:-13px;z-index:6;background:var(--panel);margin:0 0 6px;padding:8px 0 6px}
.imp-chip{font:700 9px "Inter";letter-spacing:.08em;padding:3px 9px}
.imp-chip.on.HIGH{background:#E5484D22;color:#FF8589;border-color:#E5484D66}
.imp-chip.on.MED{background:#F5A52422;color:var(--amber);border-color:#F5A52466}
.imp-chip.on.LOW{background:#2E3A52aa;color:var(--text);border-color:#46536E}
/* 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)}
/* drop244 */
.flt-block{margin-bottom:12px}
.flt-block:last-of-type{margin-bottom:0}
/* drop246: the SAME colours the journal uses for these strategies (.sc-cam,
.sc-cml) - one colour means one strategy everywhere, not one thing on the
board and another here. */
.flt-block{border:1px solid var(--border);border-radius:7px;overflow:hidden;
background:#0E1420}
.flt-block[open]{border-color:#243044}
.flt-block > summary{cursor:pointer;user-select:none;display:flex;
align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;
list-style:none}
.flt-block > summary::-webkit-details-marker{display:none}
.flt-block > summary::after{content:"\25BE";font-size:10px;opacity:.6;
transition:transform .12s}
.flt-block[open] > summary::after{transform:rotate(180deg)}
.flt-block .set-row{padding-left:12px;padding-right:12px}
.flt-block > div:last-child{padding:0 12px 10px}
.flt-count{font:600 9.5px "IBM Plex Mono";letter-spacing:.08em;
color:var(--muted);opacity:.85;margin-left:auto}
/* drop247: the affordance. A closed bar does not otherwise say it opens - the
disclosure triangle is 10px at 60% opacity, and a hint that only appears on
hover is invisible to anyone who does not hover. It hides once the fields
are showing: the instruction has been answered. */
.flt-hint{font:500 10px "Inter";color:var(--muted);opacity:.7;
letter-spacing:.04em}
/* drop248: the label column is narrow here, so the marker sits tight to the
text rather than taking the 4px the table headers use. */
.flt-qi{margin-left:5px;flex:0 0 auto}
#set-filters .set-row > span:first-child{display:inline-flex;align-items:center}
.flt-block[open] .flt-hint{display:none}
.flt-camillo > span:first-child{color:var(--ice)}
.flt-camarilla > span:first-child{color:var(--anom)}
.flt-camillo{background:#5CC8FF0F;border-bottom:1px solid #5CC8FF33}
.flt-camarilla{background:#FFE6000F;border-bottom:1px solid #FFE60033}
.flt-block:not([open]) > summary{border-bottom:none}
#set-filters input[type=number]::placeholder{color:var(--muted);opacity:.65}
.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 "Inter";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 "Space Grotesk";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 "Space Grotesk";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 "Space Grotesk";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 "Inter";letter-spacing:.1em}
/* ---- drop6r: unified rich text (desk + briefing) ---- */
.dsk-h2{font:800 12.5px "Space Grotesk";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 "Space Grotesk";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 "Inter";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 "Inter";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 "Space Grotesk";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 "Inter";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 "Inter";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 "Space Grotesk";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}
/* drop163: CAM watchlist scrolls after ~6 rows. Its rows are two lines tall
(DAY TYPE wraps), so the height is generous. Headers are already
position:sticky, so they pin to this scrollport rather than to #main. */
.table-wrap.cam-scroll{max-height:var(--cam-wrap-h,430px);overflow-y:auto}
/* drop364: whispers gets its own scrollport so the base sheet's sticky
headers pin to something that scrolls. Engages only when the list
exceeds the cap - short boards render exactly as before. */
.table-wrap.wh-scroll{max-height:var(--wh-wrap-h,560px);overflow-y:auto}
/* ---- drop203: a CAM row opens a ticket ---- */
.cam-clickable{cursor:pointer}
/* drop210: a proxied open is not an open. Dashed underline + muted, so it
reads as provisional at a glance and cannot pass for the real number. */
.open-proxy{font-family:"IBM Plex Mono";color:var(--muted);
border-bottom:1px dashed #5F6A8099}
.btr-model{font:800 9.5px "IBM Plex Mono";letter-spacing:.14em;margin-left:10px;
padding:4px 9px;border-radius:6px;white-space:nowrap;
color:var(--muted);border:1px solid var(--border)}
.btr-model.cam{color:var(--anom);border-color:#FFE60066;background:#FFE6000F}
/* ---- drop196: CAM signal surface ---- */
/* One hue, escalating weight. --anom already means "outlier"; the anomaly
columns and the pivot columns are disjoint, so the column disambiguates
and yellow needs no second meaning. Direction is an arrow, never
green/red - those own signed values, and a red ENTER on a valid short
reads as "do not". */
.sig{font:700 10px "IBM Plex Mono";letter-spacing:.03em;white-space:nowrap;
padding:3px 7px;border-radius:5px;display:inline-block}
.sig-hit{background:var(--anom);color:#141005}
.sig-arm{color:var(--anom);background:#FFE6001A;box-shadow:inset 0 0 0 1px #FFE60066}
.sig-watch{color:var(--muted);padding-left:0}
/* drop213: a premarket signal is preparatory - same words, dashed outline and
no fill, matching .open-proxy. It alerts nothing and grades nothing. */
.sig-plan{background:none!important;color:var(--anom)!important;
box-shadow:none!important;border:1px dashed #FFE60099}
.sig-sub{font:600 9.5px "IBM Plex Mono";color:var(--muted);margin-left:5px}
.pivot-live{color:var(--anom);font-weight:700;background:#FFE6001A;
border-radius:4px;padding:2px 5px;box-shadow:inset 0 0 0 1px #FFE60055}
/* SYM / FIT / SIGNAL pin left.
drop197: the `left` offsets are MEASURED by camPin() and delivered as
--cam-p1 / --cam-p2. They were declared, and #whispers-table lays out
AUTO, so a `width` on a td is advisory - SYM renders past any number I
pick because it carries a logo tile and a ticker pill. A wrong offset does
not degrade, it stacks the columns on top of each other and hides the one
underneath. min-width stays as a FLOOR only, so SIGNAL cannot collapse
narrower than its ENTER chip. */
/* drop269: BY NAME, not by position. These rules were written when CAM_COLS
was [symbol, fit, signal, ...]; drop265 inserted "edge" at index 2 and
every nth-child shifted one column right - FIT inherited SIGNAL's 172px
floor and SIGNAL stopped being pinned. thead carries data-key and tbody
carries data-col (drop233), both generated from CAM_DEFS, so naming the
column means inserting one stops renaming three others. */
.cam-scroll #whispers-table thead th[data-key="symbol"],
.cam-scroll #whispers-table thead th[data-key="edge"],
.cam-scroll #whispers-table thead th[data-key="fit"],
.cam-scroll #whispers-table tbody td[data-col="symbol"],
.cam-scroll #whispers-table tbody td[data-col="edge"],
.cam-scroll #whispers-table tbody td[data-col="fit"]{
position:sticky;background:var(--panel);z-index:2}
.cam-scroll #whispers-table thead th[data-key="symbol"],
.cam-scroll #whispers-table thead th[data-key="edge"],
.cam-scroll #whispers-table thead th[data-key="fit"]{top:0;z-index:6}
.cam-scroll #whispers-table th[data-key="symbol"],
.cam-scroll #whispers-table td[data-col="symbol"]{left:0;min-width:92px}
.cam-scroll #whispers-table th[data-key="edge"],
.cam-scroll #whispers-table td[data-col="edge"]{left:var(--cam-p1,92px)}
.cam-scroll #whispers-table th[data-key="fit"],
.cam-scroll #whispers-table td[data-col="fit"]{left:var(--cam-p2,150px)}
/* the pinned block reads as one unit with a hard edge, not three cells that
happen to be stuck */
.cam-scroll #whispers-table thead th[data-key="fit"],
.cam-scroll #whispers-table tbody td[data-col="fit"]{
box-shadow:1px 0 0 var(--border), 8px 0 12px -4px #0009}
/* the pinned cells are opaque, so they need the hover colour too or the row
visibly splits in two under the cursor */
.cam-scroll #whispers-table tbody tr:hover td[data-col="symbol"],
.cam-scroll #whispers-table tbody tr:hover td[data-col="edge"],
.cam-scroll #whispers-table tbody tr:hover td[data-col="fit"]{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 "Inter";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 "Inter";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 "Inter";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 "Inter";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 "Inter";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 "Space Grotesk";letter-spacing:.12em;color:var(--amber)}
#guide-search{flex:1;max-width:460px;padding:8px 12px;font:500 12.5px "Inter";
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 "Inter";
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 "Space Grotesk";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 ---- */
#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 "Inter";letter-spacing:.16em;color:#5F6A80;margin-bottom:8px}
.gsec-title{font:800 22px "Space Grotesk";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 "Space Grotesk";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)}
/* ---- drop188: guide v3 - callout kinds + section kicker ---- */
.callout.cx-warn{border-left-color:var(--ice);background:#7FC8F80B}
.callout.cx-warn strong{color:var(--ice)}
.callout.cx-rule{border-left-color:var(--red,#E5484D);background:#E5484D0F}
.callout.cx-rule strong{color:var(--red,#E5484D)}
/* ---- drop189: guide v3 - grouped nav, jump strip, version chip ---- */
/* ---- drop218: P&L calendar ---- */
.pnl-card{margin-bottom:14px}
.pnl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pnl-title{font:600 12px "IBM Plex Mono";letter-spacing:.14em;color:var(--amber)}
.pnl-seg{display:inline-flex;border:1px solid var(--border);border-radius:7px;
overflow:hidden}
.pnl-seg button{background:var(--void);color:var(--muted);border:0;
padding:5px 11px;font:700 10px "IBM Plex Mono";letter-spacing:.1em;cursor:pointer}
.pnl-seg button.on{background:var(--ice);color:#08131C}
.pnl-cells{display:flex;flex-wrap:wrap;gap:6px}
.pnl-cell{min-width:74px;flex:0 0 auto;border:1px solid var(--border);
border-radius:7px;padding:7px 9px;display:flex;flex-direction:column;gap:2px;
position:relative}
.pnl-cd{font:600 9px "IBM Plex Mono";letter-spacing:.08em;color:var(--muted)}
.pnl-cv{font:700 12.5px "IBM Plex Mono")}
.pnl-cn{position:absolute;top:5px;right:7px;font:600 8.5px "IBM Plex Mono";
color:#4A5468}
.pc-up{border-color:#2E7D5B66;background:#1FA97014}
.pc-up .pnl-cv{color:var(--up)}
.pc-dn{border-color:#8B333866;background:#E5484D14}
.pc-dn .pnl-cv{color:var(--down)}
#pnl-note{font:500 10.5px "IBM Plex Mono")}
/* ---- drop217: journal strategy chip + day dividers ---- */
.strat-chip{font:700 9px "IBM Plex Mono";letter-spacing:.1em;padding:3px 7px;
border-radius:5px;white-space:nowrap;border:1px solid}
/* CAM PIVOTS takes --anom, the accent the whole Camarilla surface already
uses; CAMILLO takes --ice. Neither is a new colour. */
.sc-cam{color:var(--anom);border-color:#FFE60055;background:#FFE6000F}
.sc-cml{color:var(--ice);border-color:#5CC8FF55;background:#5CC8FF0F}
/* MANUAL takes --muted deliberately: it is the ABSENCE of a playbook, and
a third saturated colour beside a violet USER chip on the same row
would read as a third strategy rather than as none. */
/* MANUAL takes pink: not a playbook, and distinct from CAM PIVOTS (--anom),
CAMILLO (--ice), the amber structure and the red/green signed values. */
.sc-man{color:#FF6FB5;border-color:#FF6FB555;background:#FF6FB50F}
tr.jn-day td{background:#0E1420;border-top:1px solid var(--amber);
border-bottom:1px solid var(--border);padding:7px 12px!important}
.jn-day-d{font:700 11px "IBM Plex Mono";letter-spacing:.12em;color:var(--amber)}
.jn-day-m{font:600 10px "IBM Plex Mono";color:var(--muted);margin-left:14px}
.jn-day-p{font:700 11px "IBM Plex Mono";margin-left:14px}
tr.jn-day:hover td{background:#0E1420}
/* ---- drop216: two strategies in one Risk Budget card ---- */
.set-strat{font:700 9.5px "IBM Plex Mono";letter-spacing:.15em;color:var(--amber);
margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.set-strat:first-of-type{margin-top:4px}
.gnav-group{padding:15px 18px 5px;font:700 9px "Inter";letter-spacing:.16em;
color:#4A5468;border-top:1px solid var(--border)}
#guide-toc .gnav-group:first-child{border-top:0;padding-top:10px}
#guide-toc a{padding-left:26px}
.gver{font:700 9px "Inter";letter-spacing:.12em;color:#5F6A80;
padding:5px 9px;border:1px dashed var(--border);border-radius:7px;white-space:nowrap}
.gsec-jump{display:flex;flex-wrap:wrap;gap:6px;max-width:760px;margin:0 0 20px}
.gjump{border:1px solid var(--border);background:var(--void);color:var(--muted);
padding:5px 10px;border-radius:20px;cursor:pointer;
font:600 10px "Inter";letter-spacing:.04em}
.gjump:hover{border-color:var(--amber);color:var(--amber)}
.gsearch-group{font:700 8.5px "Inter";letter-spacing:.14em;color:var(--ice);
display:block;margin-bottom:3px}
.gsec-when{margin:-10px 0 20px;padding:7px 12px;max-width:760px;
border:1px dashed var(--border);border-radius:8px;background:var(--void);
font:600 10px "Inter";letter-spacing:.1em;color:#5F6A80}
.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 "Inter";letter-spacing:.14em;color:var(--ice);
background:#5CC8FF12;border-radius:4px;padding:2px 7px;margin-right:10px}
.gsearch-title{font:700 13px "Space Grotesk";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 */
/* drop191: was `background`, but this ::before's content is a "●" glyph, so
warn painted an amber RECTANGLE behind a muted bullet. Its ok/bad siblings
both use `color`; widened in place rather than stacked (13.6/13.55). */
.hb.warn::before{color:var(--amber);text-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 "Inter";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:11px}
.bmetabar{padding:5px 10px;gap:8px;flex-wrap:wrap}
.bbadge{font-size:10px;letter-spacing:.12em;padding-right:8px}
#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}
.gnav-group{border-top:0;padding:0 6px;align-self:center;white-space:nowrap;
color:var(--amber);opacity:.55}
#guide-toc a{padding-left:12px}
#guide-ver{display:none}
#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 "Inter";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 "Inter";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 "Inter";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 "Space Grotesk";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 "Inter";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 "Inter";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}
/* drop191: on a phone every .hb is display:none behind this button, so
without these the mobile user sees nothing when a feed dies. */
#hb-status.warn{color:var(--amber)}
#hb-status.bad{color:var(--down);animation:hb-pulse 1.8s ease-in-out infinite}
/* 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}
}
/* drop237: the summary button is the desktop treatment too - the six labels
collapse behind it exactly as they do on a phone. The mobile block above
already owns the dot colours; nothing here re-states them. */
@media (min-width: 761px){
#healthbar > .hb{display:none}
/* drop239: SCAN / NEWS / SOCIAL live in the STATUS popup now, so the
footer copy is the same three numbers twice. HIDDEN, never removed:
hbPopBuild reads this element's .innerHTML and loadHealth writes it, so
deleting the span would empty the popup's freshness row silently - the
build guards `meta ? ... : ""` and would treat absent as nothing to
show. display:none leaves .innerHTML entirely readable. */
#healthbar > #hb-meta{display:none}
#hb-status{display:inline-flex;align-items:center;gap:7px;
font:700 9.5px "Inter";letter-spacing:.12em;color:var(--muted);
background:var(--panel);border:1px solid var(--border);border-radius:7px;
padding:5px 11px;cursor:pointer}
#hb-status:hover{color:var(--text)}
#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}
#hb-status.warn{color:var(--amber)}
#hb-status.bad{color:var(--down)}
}
#hb-pop{position:fixed;left:14px;bottom:var(--hb-h,44px);z-index:60;width:340px;
background:var(--panel);border:1px solid var(--border);border-radius:10px;
padding:12px 14px;box-shadow:0 12px 34px #00000070;
font:12px "Inter";margin-bottom:8px}
#hb-pop.hidden{display:none}
.hbp-head{display:flex;justify-content:space-between;align-items:center;
margin-bottom:9px;letter-spacing:.1em;font-size:10px;color:var(--muted)}
.hbp-close{background:transparent;border:1px solid var(--border);
color:var(--muted);border-radius:6px;padding:3px 9px;font:700 9px "Inter";
letter-spacing:.1em;cursor:pointer}
.hbp-close:hover{color:var(--text)}
.hbp-row{display:flex;align-items:center;gap:8px;padding:5px 0}
.hbp-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:#4ADE80}
.hbp-dot.warn{background:var(--amber)}
.hbp-dot.bad{background:var(--down)}
.hbp-name{flex:1;color:var(--text);font-size:11px;letter-spacing:.06em}
.hbp-state{font:700 9px "Inter";letter-spacing:.1em;color:var(--up)}
.hbp-state.warn{color:var(--amber)}
.hbp-state.bad{color:var(--down)}
.hbp-tip{color:var(--muted);font-size:10.5px;line-height:1.45;
padding:0 0 6px 15px;margin-top:-2px}
.hbp-fresh{border-top:1px solid var(--border);margin-top:8px;padding-top:8px;
display:flex;gap:12px;color:var(--muted);font-size:10px}
/* Each reading is one token - `SCAN 4m ago` must not break after the number,
which is what a bare flex row did at this width. */
.hbp-fresh > *{white-space:nowrap}
/* ---------- drop260: replay scorecard ---------- */
/* drop288: was float:right, which does NOTHING on a flex item -
.panel-title is display:flex, so the tabs simply sat after the
title and nothing ever reached the right edge of this row. */
.crp-tabs{display:flex;gap:4px;margin-left:16px}
.crp-w{background:transparent;border:1px solid var(--border);color:var(--muted);
border-radius:6px;padding:3px 9px;font:700 9px "Inter";
letter-spacing:.1em;cursor:pointer}
.crp-w:hover{color:var(--text)}
.crp-w.active{color:var(--ice);border-color:#5CC8FF66;background:#5CC8FF12}
.crp-meta{display:flex;gap:16px;flex-wrap:wrap;padding:8px 0 10px;
font:500 10.5px "IBM Plex Mono";color:var(--muted);letter-spacing:.04em}
.crp-meta span{white-space:nowrap}
.crp-tbl{width:100%;border-collapse:collapse;font-size:12px}
.crp-tbl th{font:700 9px "Inter";letter-spacing:.12em;color:var(--muted);
text-align:left;padding:6px 8px;border-bottom:1px solid var(--border)}
.crp-tbl th.num,.crp-tbl td.num{text-align:right}
.crp-tbl td{padding:7px 8px;border-bottom:1px solid #1B2230;
font-family:"IBM Plex Mono"}
.crp-tbl tbody tr{transition:filter .12s}
.crp-tbl tbody tr:hover{filter:brightness(1.35)}
.crp-cell b{font:700 13px "IBM Plex Mono";color:var(--text)}
/* The direction chips reuse the journal's strategy colours - one colour
means one thing everywhere in the platform. */
.crp-dir{font:700 8.5px "Inter";letter-spacing:.1em;margin-left:7px;
padding:2px 5px;border-radius:4px}
.crp-dir.long{color:var(--up);background:#4ADE8018}
.crp-dir.short{color:var(--down);background:#F8717118}
.crp-tbl .up{color:var(--up)}
.crp-tbl .down{color:var(--down)}
.crp-yrs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;
padding:12px 0 4px}
.crp-yl{font:700 9px "Inter";letter-spacing:.12em;color:var(--muted);
margin-right:4px}
.crp-yr{font:500 10.5px "IBM Plex Mono";padding:4px 9px;border-radius:6px;
border:1px solid var(--border);display:inline-flex;gap:7px;align-items:center}
.crp-yr b{color:var(--text);font-weight:700}
.crp-cav{margin-top:10px;padding-top:9px;border-top:1px solid var(--border);
font-size:10.5px;line-height:1.6;color:var(--muted);opacity:.85}
/* ---- 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 "Space Grotesk";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 "Inter";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 "Space Grotesk";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}
/* drop200: this was `.kk-tag` and nothing has ever emitted that class - the
bell maps kind `tag` to the LABEL "THEME", so the chip is kk-theme and has
rendered unstyled since these rules were written. */
.kk-theme{color:var(--amber);border-color:#F5A52455;background:#F5A52410}
.kk-cam{color:var(--anom);border-color:#FFE60055;background:#FFE6000F}
.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 "Inter";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 "Space Grotesk";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 "Space Grotesk";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 "Space Grotesk";letter-spacing:.13em;border-radius:4px;padding:3px 8px}
.brk-badge.ok{color:#0F2818;background:var(--up)}
/* drop369: the dead-key state - down-red, because a pair that no longer
authenticates is a broken connection wearing a green badge otherwise */
.brk-badge.warn{color:#2A0B0B;background:var(--down)}
.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 "Inter";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 "Inter";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 "Space Grotesk";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 "Inter";letter-spacing:.02em;
text-transform:none}
.set-seg-head.plat{color:#B48CFF;border-bottom-color:#B48CFF26;margin-top:26px}
/* drop245: three columns by SUBJECT - account, discovery, system - and each
is a flex column so a short panel is followed by the next one instead of
padding out to the tallest sibling. That is what removes the voids; no
panel is restyled.
Not grid-auto-flow:dense - it reorders by whatever fits and would scatter
the grouping. Not CSS columns - they can split a panel across a break. */
.settings-grid.row-user{grid-template-columns:1.05fr 1.25fr .9fr;align-items:start}
.set-col{display:flex;flex-direction:column;gap:16px;min-width:0}
/* drop246: a real header, not a caption. These were 9.5px at 75% opacity -
dimmer and smaller than the panel titles beneath them, so they read as
footnotes to the thing they were supposed to be heading. */
.set-col-label{font:800 13px "Space Grotesk";letter-spacing:.18em;color:var(--text);
padding:0 0 8px;margin-bottom:2px;border-bottom:1px solid var(--border)}
.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:1fr 1fr} }
@media (max-width: 1180px){
/* One column: the labels would each head a full-width block and read as
section dividers rather than column headers, which is more chrome than
the grouping is worth at this width. */
.settings-grid.settings-grid.row-user{grid-template-columns:1fr}
.set-col-label{display:none}
}
@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 "Inter";
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}
/* ---- drop225: journal trades table - header pinned to its own
scrollport. The wrap already scrolls internally (sizeJournalWrap sets
max-height); it simply never had the rule. Same shape as #view-scans
above, including box-shadow rather than border-bottom - a border does
not survive position:sticky reliably.
Scoped to #journal-wrap, NOT #view-journal: the POSITIONS table shares
that view and does not scroll.
KNOWN LIMIT: at <=760px the breakpoint sets #view-journal table to
display:block for horizontal swipe, which stops thead being a
table-header-group and makes top-sticky a no-op. Desktop pins, mobile
does not, and saying so beats shipping a rule that quietly fails. ---- */
#journal-wrap{scrollbar-gutter:stable}
#journal-wrap thead th{position:sticky;top:0;background:var(--panel);
z-index:3;box-shadow:0 1px 0 var(--border)}
/* tag source chips */
.tag-src{font:800 7.5px "Space Grotesk";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 "Space Grotesk";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 "Space Grotesk";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 "Space Grotesk";letter-spacing:.14em;color:var(--amber)}
.tbl-count{color:var(--muted);letter-spacing:.06em}
.tbl-filters{display:flex;gap:8px;flex-wrap:wrap}
/* ---- drop220: Camarilla signal scorecard ---- */
/* ---- drop223: change flash on the CAM board ----
renderCamWatchlist rebuilds innerHTML wholesale, so each render produces a
fresh node and the animation restarts on its own - no timer needed to strip
the class. 900ms is long enough to catch out of the corner of an eye and
short enough to have faded before the next 5s pass. */
@keyframes camFlashUp { from{background:#1FA97038} to{background:transparent} }
@keyframes camFlashDn { from{background:#E5484D38} to{background:transparent} }
@keyframes camFlashChg { from{background:#FFB02E30} to{background:transparent} }
.cf-up{animation:camFlashUp .9s ease-out 1}
.cf-dn{animation:camFlashDn .9s ease-out 1}
.cf-chg{animation:camFlashChg .9s ease-out 1}
@media (prefers-reduced-motion:reduce){
/* keep the signal, drop the motion: a static tint that the next render
clears, same treatment the healthbar got in drop191. */
.cf-up,.cf-dn,.cf-chg{animation:none}
.cf-up{background:#1FA97024}
.cf-dn{background:#E5484D24}
.cf-chg{background:#FFB02E20}
}
/* drop221: the footer's per-strategy slot labels */
.hm-sub{font:600 8.5px "IBM Plex Mono";letter-spacing:.1em;color:#5F6A80;
margin:0 9px 0 3px}
/* drop313: minmax(0,1fr), not 1fr. `1fr` is minmax(AUTO,1fr) and auto
resolves to MIN-CONTENT, so a six-column table forced its track wider than
the container and the last panel ran off the edge. Three columns rather
than auto-fit because six panels auto-fitting a wide screen gives 5 and an
orphan; 3/2/1 always divides evenly. */
.camsc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px}
.camsc-h{font:600 10px "IBM Plex Mono";letter-spacing:.14em;color:var(--muted);
margin-bottom:6px}
.camsc-amb{font:600 9px "IBM Plex Mono";color:var(--amber);margin-left:5px}
@media (max-width:1180px){ .camsc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .camsc-grid{grid-template-columns:minmax(0,1fr)} }
/* drop219: .pnl-head joins the existing rule rather than getting a second one
(13.6). drop218's calendar head styled nothing, so its select rendered as a
browser default - light fill, system font - and its ticker input had no width
and ate the whole row. */
.tbl-filters input,.tbl-filters select,.pnl-head input,.pnl-head select{padding:5px 8px;font-size:12px;width:110px;background:var(--panel2);border:1px solid var(--border);border-radius:6px;color:var(--text)}
.pnl-head select{width:auto;min-width:132px;font-family:"IBM Plex Mono";
font-weight:600;letter-spacing:.06em}
.pnl-head input{width:96px;font-family:"IBM Plex Mono"}
.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}
.pnl-head select,.pnl-head input{width:46%;min-width:0}
.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 "Space Grotesk";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 "Space Grotesk";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 "Space Grotesk";letter-spacing:.1em;color:var(--muted);
align-self:center}
.btrade-label{font:800 8.5px "Space Grotesk";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 "Space Grotesk";letter-spacing:.1em;color:var(--muted)}
.btrade-grid b{text-align:right}
.btrade-place{padding:10px;font:800 11px "Space Grotesk";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 "Space Grotesk";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 "Inter";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 "Inter";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,#cam-toggle.active,#whispers-toggle.active{background:var(--ice);color:#08131C;border-color:var(--ice)}
/* drop366: clean small gap between the mode buttons. Scoped to the panel
because .board-head is shared; adjacent-sibling so LIVE (separated from
the cluster by PREMARKET's inline auto margin, which outranks this) and
the title are untouched. */
#whispers-panel .board-head button.ghost+button.ghost{margin-left:8px}
/* ---- 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 "Inter";
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 "Inter";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 "Inter";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 "Inter";color:var(--text);
margin-bottom:9px}
.bt-ai-rel{display:inline-block;font:700 9px "Inter";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 "Inter";color:var(--muted);margin-left:9px}
.bt-ai-sec{font:700 9px "Inter";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 "Inter";letter-spacing:.1em;color:var(--text);
margin-bottom:6px;text-transform:uppercase}
.bt-find-b{font:400 12px/1.6 "Inter";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 "Inter";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 "Inter";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 "Inter";color:var(--muted);display:block;
margin-top:3px}
.bt-ai-cav{font:400 10.5px/1.6 "Inter";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 "Inter";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}
/* ---------- company marks (drop175) ---------- */
/* One tile to the left of every ticker on the platform. Sized from a single
var so the whole platform retunes with one number.
background-size:cover fills the tile edge to edge - flush, no letterbox -
and the inset hairline keeps a transparent or white logo reading as a tile
against the panel rather than floating. The box is a FIXED size whether the
image loads or not, so a missing logo can never shift a row. */
:root{ --lgo:22px; --lgo-zoom:1.22 }
/* .earn-logo joins here rather than keeping its own 18px/contain rule: one
size var for every mark on the platform, and `contain` letterboxed a logo
inside its tile instead of filling it. Equal specificity, and this block is
at the END of the file, so source order decides (13.48). */
/* The tile is a CLIPPING WRAPPER, not the image itself. The upstream PNGs carry
transparent padding inside the file, so object-fit:cover fills the tile with
that padding and the mark reads small - the only way to reach the edges is to
scale the image up and clip. --lgo-zoom is the dial; 1 disables the crop. */
.lgo{
display:inline-block;
width:var(--lgo); height:var(--lgo);
vertical-align:middle;
border-radius:5px;
overflow:hidden;
background:#FFFFFFF0; /* most marks are dark; they vanish on a dark tile */
flex:0 0 auto;
margin-right:7px;
}
.lgo img{
display:block;
width:100%; height:100%;
object-fit:cover;
transform:scale(var(--lgo-zoom));
}
/* Fallback for a ticker the upstream has no mark for. A blank white square is
worse than no square, and hiding it would shift the row. */
.lgo-mono{
display:inline-flex; align-items:center; justify-content:center;
font:700 11px "Inter"; letter-spacing:0; color:#E8EDF5;
}
/* .earn-row is display:flex with its own gap, so the tile's margin would be
ADDED to it rather than merged - 17px where 9 was wanted. */
.earn-row .lgo{ margin-right:0 }
/* ---------- earnings figures, stacked (drop184) ---------- */
/* Was one nowrap line with margin-left:auto - actual, surprise and estimate
for BOTH revenue and EPS on a single line in a 350px rail, which clipped.
Column, right-aligned, estimates muted beneath the actuals. */
.earn-eps{
margin-left:auto;
display:flex; flex-direction:column; align-items:flex-end;
gap:1px; line-height:1.3; white-space:nowrap;
}
.ef-a{ font:500 11px "IBM Plex Mono" }
.ef-e{ font:500 10px "IBM Plex Mono"; color:var(--muted); opacity:.85 }
/* ---------- briefing / wrap tabs (drop184) ---------- */
#brief-tabs{ margin:0 0 8px }
#brief-tabs .tab{ font-size:10.5px }
/* ---------- briefing date header (drop185) ---------- */
/* Bigger, heavier, white with a black stroke so it reads against the panel.
text-stroke does the outline; the shadow keeps it legible where the stroke
thins on curves. */
#briefing-date{
font:800 21px/1.15 "Inter";
letter-spacing:.01em;
color:#FFFFFF;
-webkit-text-stroke:1px #000;
text-stroke:1px #000;
text-shadow:0 1px 2px #000C, 0 0 8px #0008;
display:inline-block;
}
@media (max-width:760px){ #briefing-date{ font-size:18px } }
/* ================================================================
drop231 - MOBILE CHASSIS
Appended deliberately: every rule below is at the same or higher
specificity than the one it corrects, so SOURCE ORDER decides and
nothing upstream had to be surgically removed (13.6).
================================================================ */
/* the two panel caps that used to be inline on index.html. They live here
now so a media query can reach them - an inline style cannot be overridden
without !important, and this codebase does not use it. */
.perf-wrap{max-height:230px;overflow-y:auto}
.dec-wrap{max-height:150px;overflow-y:auto}
/* quality floor: a visible keyboard focus ring, every width */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible{
outline:2px solid var(--amber); outline-offset:2px}
/* --- the desk is a SHEET below the docked layout, not a flex sibling ---
drop6h's `#desk{position:static;height:auto}` is unconditioned and last in
the file, so it defeated the fixed rule in the 1250px query above. These
sit later still, and reset the 380px flex basis that made the desk push
#main off a phone screen. */
@media (max-width:1250px){
#desk{position:fixed; top:0; right:0; bottom:0; left:auto;
height:100dvh; flex:0 0 auto; z-index:60;
box-shadow:-18px 0 44px #000A}
#desk-log{flex:1 1 auto; min-height:0}
}
/* ---------------- phones ---------------- */
@media (max-width:760px){
/* 1. the board floor is the BOARD's, not every .table-wrap on the platform */
.table-wrap{min-height:0}
#whispers-panel .table-wrap{min-height:38dvh}
#whispers-empty{min-height:24dvh}
.perf-wrap{max-height:min(230px, 32dvh)}
.dec-wrap{max-height:min(210px, 30dvh)}
/* 2. desk: full bleed, composer clears the home indicator */
#desk{left:0; width:100vw; max-width:100vw; border-left:0}
#desk .desk-input{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
/* 3. #main owns the scroll. No welded pane heights, no dvh guesses.
SCOPED to .left-rail: `.card-body` is also the ALERTS dropdown list,
which sits inside `#alerts-drop{overflow:hidden}` and would lose its
own scrollport - every alert past 70dvh unreachable. */
#view-scanner[data-mtab="brief"] #briefing-body,
#view-scanner[data-mtab="brief"] #briefing-body.formatted,
#view-scanner[data-mtab="week"] #weekahead-body{
min-height:0; max-height:none; overflow-y:visible}
.left-rail .card-body{max-height:none}
/* 3b. ALERTS was `position:fixed; top:58px` - written for a 58px desktop
topbar, so on a phone whose topbar wraps to four rows it opened
UNDERNEATH the nav and tape. It becomes a bottom sheet like the rest.
`:not(.hidden)` is deliberate. `.hidden{display:none!important}` would
in fact still win here - but only because of that `!important`, which
means the open/closed state of this dropdown would be resting on a
modifier in an unrelated rule 2000 lines away. Declaring `display`
only for the state that wants it keeps the two rules from ever
arguing (13.41). */
#alerts-drop:not(.hidden){top:auto; bottom:0; left:0; right:0;
width:auto; max-width:100vw; max-height:76dvh;
border-radius:14px 14px 0 0; z-index:62;
display:flex; flex-direction:column;
padding-bottom:env(safe-area-inset-bottom)}
#alerts-drop .card-head{flex:0 0 auto}
#alerts-list{flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto}
/* 4. chrome budget measured, not guessed. dockStrip() publishes both. */
#main{padding-bottom:calc(var(--hb-h,78px) + var(--ss-h,0px) + 20px)}
/* 5a. paper strip wraps instead of hiding the P&L off the right edge */
.scorestrip{flex-wrap:wrap; white-space:normal; overflow-x:visible;
row-gap:4px; column-gap:12px; justify-content:flex-start; padding:8px 12px}
.scorestrip #ss-body{flex:1 1 100%; min-width:0}
.scorestrip a{flex:0 0 auto}
/* 5b. TRADE DECISIONS rows wrap instead of clipping at the panel edge */
#decisions-body .ev{flex-wrap:wrap; row-gap:2px; align-items:baseline}
#decisions-body .ev .t{min-width:0; flex:0 0 auto}
#decisions-body .ev .muted{min-width:0; overflow-wrap:anywhere}
/* 6. wide tables scroll horizontally on purpose rather than squashing.
drop38's `display:block` is reverted here: it detaches
from its
own width and breaks drop225's sticky thead. */
#journal-wrap table, #scans-wrap table{display:table; width:100%; min-width:900px}
#perf-table{min-width:940px}
.table-wrap, #journal-wrap, #scans-wrap{overscroll-behavior-x:contain}
/* 7. tape: delta inline reclaims a whole row of chrome from a 3-line cell */
#tape{gap:5px}
.tp .tp-s{font-size:clamp(8.5px, 2.4vw, 10px)}
.tp .tp-v{font-size:clamp(9.5px, 2.8vw, 11.5px)}
.tp .tp-v i{display:inline; margin-left:4px;
font-size:clamp(8px, 2.2vw, 9.5px)}
/* 8. fluid chrome 320-760 instead of one snap at the breakpoint */
#topbar{padding:8px clamp(8px,3vw,14px); gap:6px 8px}
.brand{font-size:clamp(15px, 4.4vw, 18px)}
.tb-actions{gap:5px}
.tb-actions button, .tb-actions .pill{
padding:6px 8px; font-size:clamp(9px, 2.6vw, 10.5px)}
#topbar nav{gap:clamp(12px, 4.6vw, 20px)}
#topbar nav a{font-size:clamp(10.5px, 3vw, 12px)}
.board-head h2{font-size:clamp(12px, 3.4vw, 14px)}
/* 9. dialogs become bottom sheets that can never exceed the viewport */
.mt-card, .btrade-card{width:100vw; max-width:100vw;
max-height:88dvh; overflow-y:auto; border-radius:14px 14px 0 0;
padding-bottom:calc(18px + env(safe-area-inset-bottom))}
#lv-modal, #mt-modal, .btrade-wrap{align-items:flex-end}
#drawer{height:100dvh}
#tpw{width:96vw; max-height:88dvh; overflow-y:auto}
}
/* ================================================================
drop232 - the mobile scroll model
drop6h pins the scanner view and the board column to 100% height so the
board panel can own a scrollport. Correct on a desktop, where that column
holds a scanbar and a table. On a phone it also holds TRADES PERFORMANCE,
TRADE DECISIONS and the mobile section tabs, which together exceed the
viewport before the board is reached - so the board and everything under
it overflow a height-pinned box, #main's scrollHeight never grows, and
the content is unreachable no matter how far you drag.
One scrollport per screen. On a phone that is #main.
================================================================ */
@media (max-width:760px){
#view-scanner.grid-scanner{height:auto; min-height:0}
.board-col{height:auto; min-height:0}
.board-col > .panel{flex:0 0 auto; min-height:0; max-height:none;
overflow-y:visible}
.left-rail{max-height:none; overflow-y:visible; position:static; min-height:0}
/* the board table keeps presence when empty and grows when it is not.
It scrolls sideways (drop38's 860px min-width) but never vertically:
a scrollport inside a scrollport is the thing that made this page feel
broken under a thumb. */
#whispers-panel .table-wrap{overflow-y:visible}
/* same release for the three JS-measured wraps. The sizers now bail on
mobile (see app.js), so these are the resting values rather than a
fight with an inline style. */
#scans-wrap, #journal-wrap, #tc-box, #tw-box{
max-height:none; overflow-y:visible}
/* the docked strip is fixed, so #main has to reserve its real height -
see the --ss-h fix in dockStrip(). Nothing else changes here. */
}
/* ================================================================
drop233 - CAM DAILY WATCHLIST as cards below 760px
drop197's three pinned columns have min-width floors of 92 + 58 + 172 =
322px, and they are floors: SYM carries a logo tile and a ticker pill,
SIGNAL an ENTER chip. A phone scrollport is ~346px. The pin was the whole
screen and the remaining 19 columns sat outside the scroll extent.
Every selector below is prefixed `#whispers-table`. The base rules in this
file are `#whispers-table td` at (1,0,2) and `#whispers-table thead th` at
(1,0,2); a bare `.cam-scroll td[data-col=x]` is (0,2,2) and loses on the id
alone (13.6).
================================================================ */
@media (max-width:760px){
/* 1. UNPIN - drop197's three, and drop38's positional nth-child(2), which
pins the ticker on the WHISPERS board and FIT on this one. */
.cam-scroll #whispers-table thead th[data-key="symbol"],
.cam-scroll #whispers-table thead th[data-key="edge"],
.cam-scroll #whispers-table thead th[data-key="fit"],
.cam-scroll #whispers-table tbody td[data-col="symbol"],
.cam-scroll #whispers-table tbody td[data-col="edge"],
.cam-scroll #whispers-table tbody td[data-col="fit"],
.cam-scroll #whispers-table th[data-key="symbol"],
.cam-scroll #whispers-table td[data-col="symbol"],
.cam-scroll #whispers-table th[data-key="edge"],
.cam-scroll #whispers-table td[data-col="edge"],
.cam-scroll #whispers-table th[data-key="fit"],
.cam-scroll #whispers-table td[data-col="fit"]{
position:static; left:auto; min-width:0; box-shadow:none; z-index:auto}
/* 2. one scrollport per screen (drop232) - the cam wrap stops being one */
.table-wrap.cam-scroll{max-height:none; overflow-y:visible; overflow-x:visible}
#whispers-panel .cam-scroll{min-height:0}
/* 3. the table becomes a stack of cards */
.cam-scroll #whispers-table{min-width:0; width:100%; display:block}
.cam-scroll #whispers-table thead{display:none}
/* drop269: the 64px column ceiling is a TABLE constraint; in card
mode these are grid items and a cap would clip the label. */
.cam-scroll #whispers-table td[data-col="edge"],
.cam-scroll #whispers-table td[data-col="fit"]{
width:auto; min-width:0; max-width:none}
.cam-scroll #whispers-table tbody{display:block}
.cam-scroll #whispers-table tbody tr{
display:grid; grid-template-columns:repeat(10,1fr);
column-gap:9px; row-gap:9px;
padding:11px 12px 10px; margin:0 0 9px;
border:1px solid var(--border); border-radius:10px;
background:var(--panel)}
.cam-scroll #whispers-table tbody tr.muted{opacity:.55}
.cam-scroll #whispers-table tbody td{
display:flex; flex-direction:column; gap:2px; align-items:flex-start;
padding:0; border:0; min-width:0; text-align:left;
font-size:12px; line-height:1.35; overflow-wrap:anywhere}
/* the label is the column header, straight from CAM_DEFS via data-label -
one map builds the thead and the cards, so they cannot disagree (13.7) */
.cam-scroll #whispers-table tbody td::before{
content:attr(data-label);
font:700 7.5px "Inter"; letter-spacing:.15em;
color:var(--muted); white-space:nowrap}
/* 4. reading order, not column order. Ten units per row, every row exact,
so the pivot ladder lands as one strip of five by construction rather
than wherever a wrap happened to break. */
.cam-scroll #whispers-table tbody td[data-col="symbol"]{
order:0; grid-column:span 7; font-size:15px; font-weight:700}
.cam-scroll #whispers-table tbody td[data-col="fit"]{
order:1; grid-column:span 3; align-items:flex-end; text-align:right;
font-size:17px; font-weight:700; font-family:"IBM Plex Mono"}
.cam-scroll #whispers-table tbody td[data-col="signal"]{
order:2; grid-column:1 / -1}
.cam-scroll #whispers-table tbody td[data-col="trend"]{order:10; grid-column:span 4}
.cam-scroll #whispers-table tbody td[data-col="bias"]{order:11; grid-column:span 3}
.cam-scroll #whispers-table tbody td[data-col="day_type"]{order:12; grid-column:span 3}
.cam-scroll #whispers-table tbody td[data-col="zone"]{order:20; grid-column:span 5}
.cam-scroll #whispers-table tbody td[data-col="setup"]{order:21; grid-column:span 5}
.cam-scroll #whispers-table tbody td[data-col="last_price"]{order:30; grid-column:span 4}
.cam-scroll #whispers-table tbody td[data-col="gap_open"]{order:31; grid-column:span 3}
.cam-scroll #whispers-table tbody td[data-col="gap_pct"]{order:32; grid-column:span 3}
.cam-scroll #whispers-table tbody td[data-col="open_px"]{order:33; grid-column:span 4}
.cam-scroll #whispers-table tbody td[data-col="rvol"]{order:34; grid-column:span 3}
.cam-scroll #whispers-table tbody td[data-col="atr14"]{order:35; grid-column:span 3}
/* the ladder: five cells at span 2 = exactly one row, read left to right
top to bottom as R4 R3 CP S3 S4. Contiguous background so it reads as one
strip; the entry-pivot spotlight paints over it, unchanged. */
.cam-scroll #whispers-table tbody td[data-col="R4"],
.cam-scroll #whispers-table tbody td[data-col="R3"],
.cam-scroll #whispers-table tbody td[data-col="CP"],
.cam-scroll #whispers-table tbody td[data-col="S3"],
.cam-scroll #whispers-table tbody td[data-col="S4"]{
grid-column:span 2; align-items:center; text-align:center;
background:#0d1420; padding:6px 1px 5px; border-radius:4px;
font-family:"IBM Plex Mono"; font-size:11px}
.cam-scroll #whispers-table tbody td[data-col="R4"]{order:40}
.cam-scroll #whispers-table tbody td[data-col="R3"]{order:41}
.cam-scroll #whispers-table tbody td[data-col="CP"]{order:42}
.cam-scroll #whispers-table tbody td[data-col="S3"]{order:43}
.cam-scroll #whispers-table tbody td[data-col="S4"]{order:44}
.cam-scroll #whispers-table tbody td[data-col="wide_narrow"]{order:50; grid-column:span 3}
.cam-scroll #whispers-table tbody td[data-col="set"]{order:51; grid-column:span 4}
.cam-scroll #whispers-table tbody td[data-col="close_source"]{order:52; grid-column:span 3}
/* 5. drop203 makes the row the ticket. On a desktop that is a deliberate
click; under a thumb it needs to be announced, because `tr.title` does
not exist on touch. */
.cam-scroll #whispers-table tbody tr.cam-clickable::after{
content:"TAP FOR TRADE TICKET"; order:99; grid-column:1 / -1;
font:700 7.5px "Inter"; letter-spacing:.16em;
color:var(--amber); opacity:.45; text-align:right;
border-top:1px solid var(--border); padding-top:7px}
/* 6. sort, which the header row used to carry */
#cam-filters .cam-sortk{flex:1 1 auto; min-width:0; width:auto}
#cam-filters .cam-sortd{flex:0 0 auto; min-width:74px; font-size:10px}
}
/* the sortable headers already do this job above the breakpoint */
@media (min-width:761px){ .cam-sortk, .cam-sortd{display:none} }
/* drop268: EDGE and FIT are two digits; without a constraint the 100%-width
auto layout hands them the slack SIGNAL/SETUP do not claim. data-key is
already on every th; cells inherit via the same column. */
/* Two digits each. The header's `?` tooltip span is what inflated their
intrinsic width, so the ceiling goes on BOTH th and td - a width on the
header alone is advisory in an auto-layout table. */
/* drop293: the CELLS stay at 64px - two digits - but the HEADER carries a
`?` tooltip and, when active, the sort arrow as well. Three things in a
two-digit box clipped the arrow off. */
#whispers-table td[data-col="edge"], #whispers-table td[data-col="fit"]{
width:64px; min-width:64px; max-width:64px; padding-left:6px; padding-right:6px}
#whispers-table th[data-key="edge"], #whispers-table th[data-key="fit"]{
width:78px; min-width:78px; padding-left:6px; padding-right:6px;
white-space:nowrap}
/* ---------- drop270: filter bar ---------- */
.tbl-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* group separator - search | dimensions | thresholds | display */
.f-div{width:1px;height:20px;background:var(--border);margin:0 3px;flex:0 0 auto}
/* a persistent prefix, so the label survives the value being typed */
.f-num{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border);
border-radius:7px;overflow:hidden;background:#0F1622}
.f-num > span{font:700 8.5px "Inter";letter-spacing:.1em;color:var(--muted);
padding:0 7px;white-space:nowrap}
.f-num > input{width:52px;border:0;background:transparent;padding:6px 7px 6px 0;
font:500 12px "IBM Plex Mono";color:var(--text)}
.f-num > input::-webkit-outer-spin-button,
.f-num > input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.f-num > input[type=number]{-moz-appearance:textfield}
.f-num:focus-within{border-color:#5CC8FF66}
/* ACTIVE: the whole point. A filter you cannot see is one you forget. */
.tbl-filters .f-on,
.tbl-filters .f-num.f-on{border-color:var(--amber)!important;
background:#F5A5240F;box-shadow:inset 0 0 0 1px #F5A52433}
.tbl-filters .f-num.f-on > span{color:var(--amber)}
.f-pill{border:1px solid var(--border);background:transparent;color:var(--muted);
border-radius:7px;padding:6px 11px;font:700 9px "Inter";
letter-spacing:.1em;cursor:pointer}
.f-pill:hover{color:var(--text)}
.f-pill.f-on{border-color:var(--amber);color:var(--amber);background:#F5A5240F}
.f-hidden-cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
/* the count sits WITH the controls that cause it */
.f-count{font:500 10.5px "IBM Plex Mono";color:var(--muted);
letter-spacing:.03em;white-space:nowrap;margin-left:2px}
.f-count.f-on{color:var(--amber)}
/* a live button that does nothing teaches distrust of the ones beside it */
#cam-clear:disabled{opacity:.35;cursor:default;pointer-events:none}
/* ---------- drop271: setup toggles, presets, chips ---------- */
.f-row2{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
margin-top:8px;padding-top:8px;border-top:1px solid var(--border);flex:1 1 100%;width:100%}
.f-lbl{font:700 8.5px "Inter";letter-spacing:.12em;color:var(--muted)}
/* the six letters read as ONE control, not six buttons */
.f-setups{display:inline-flex;border:1px solid var(--border);border-radius:7px;
overflow:hidden}
.f-sb{border:0;border-right:1px solid var(--border);background:transparent;
color:var(--muted);font:700 11px "IBM Plex Mono";padding:5px 11px;cursor:pointer}
.f-sb:last-child{border-right:0}
.f-sb:hover{color:var(--text);background:#FFFFFF08}
.f-sb.f-on{background:#F5A52422;color:var(--amber)}
/* a chip IS the filter: it labels itself and removes itself */
.f-chips{display:inline-flex;gap:6px;flex-wrap:wrap}
.f-chip{display:inline-flex;align-items:center;gap:7px;
border:1px solid #F5A52455;background:#F5A5240F;color:var(--amber);
border-radius:999px;padding:4px 9px 4px 11px;
font:600 10px "IBM Plex Mono";letter-spacing:.02em;cursor:pointer}
.f-chip:hover{background:#F5A52422;border-color:var(--amber)}
.f-chip > i{font-style:normal;font-size:12px;line-height:1;opacity:.65}
.f-chip:hover > i{opacity:1}
/* ---------- drop272 ---------- */
/* drop271 split the bar into two rows and left SET: AUTO and HIDE AVOID
outside .tbl-filters, which is what styles them - the select rendered as a
raw native control. Same selector list, extended, so the two rows cannot
drift apart. */
.f-row2 input, .f-row2 select{padding:5px 8px;font-size:12px;
background:var(--panel2);border:1px solid var(--border);border-radius:6px;
color:var(--text)}
.f-row2 select{width:auto;min-width:132px}
/* quick-picks: attached to the field they modify, not floating beside it */
.f-quick{display:inline-flex;margin-left:-3px}
.f-quick > button{border:1px solid var(--border);border-left:0;background:transparent;
color:var(--muted);font:600 10px "IBM Plex Mono";padding:6px 8px;cursor:pointer}
.f-quick > button:first-child{border-left:1px solid var(--border);
border-radius:0 0 0 0}
.f-quick > button:last-child{border-radius:0 7px 7px 0}
.f-quick > button:hover{color:var(--text);background:#FFFFFF08}
.f-quick > button.f-on{background:#F5A52422;color:var(--amber);
border-color:#F5A52455}
/* the chips belong at the END of the row, after the controls that create
them - reading order follows causal order */
.f-chips{margin-left:12px}
#whispers-empty .emp-t{font:700 13px "Space Grotesk";letter-spacing:.04em;
color:var(--text);margin-bottom:5px}
#whispers-empty .emp-s{font-size:11.5px;color:var(--muted);margin-bottom:11px;
line-height:1.55}
/* ---------- drop278: CAM quick reference drawer ---------- */
/* Same mechanics as #desk - a second drawer that behaved differently would be
a second thing to learn. */
#camref{position:fixed;top:0;right:0;bottom:0;width:min(820px,96vw);
background:var(--panel);border-left:1px solid var(--border);
display:flex;flex-direction:column;z-index:16}
#camref.hidden{display:none}
#camref-body{flex:1;overflow:auto;padding:22px 26px 56px;font-size:13px}
.qr-sec{font:800 13px 'Space Grotesk';letter-spacing:.16em;color:var(--amber);
margin:30px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--border)}
.qr-sec:first-child{margin-top:0}
.qr-map{background:#0C111A;border:1px solid var(--border);border-radius:8px;
padding:10px}
.qr-map svg{width:100%;height:auto;
--txt:#E8EAF0;--mut:#7E879B;--bd:#2A3446}
.qr-note{font-size:13px;line-height:1.7;color:var(--muted);margin-top:13px}
.qr-tbl{width:100%;border-collapse:collapse;font-size:13px}
.qr-tbl td,.qr-tbl th{padding:11px 9px;border-bottom:1px solid #1B2230;
vertical-align:top;text-align:left}
.qr-tbl th{font:700 10.5px "Inter";letter-spacing:.12em;
color:var(--muted)}
.qr-l{font:800 22px "IBM Plex Mono";width:34px}
.qr-tbl b{display:block;font:700 10px "Inter";letter-spacing:.06em;
color:var(--text)}
.qr-tbl span{display:block;font:500 11px "IBM Plex Mono";color:var(--muted);
margin-top:3px}
.qr-d{color:var(--muted);line-height:1.55;font-size:10.5px}
.qr-b{color:var(--text)}
.qr-t{font:700 11.5px "IBM Plex Mono";white-space:nowrap}
.qr-t.up{color:var(--up)} .qr-t.dn{color:var(--down)} .qr-t.nu{color:var(--muted)}
.qr-io{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qr-io > div{border:1px solid var(--border);border-radius:8px;padding:11px}
.qr-io b{font:800 10px 'Space Grotesk';letter-spacing:.1em;color:var(--text)}
.qr-io span{display:block;font-size:10px;color:var(--muted);margin:5px 0 7px;
line-height:1.5}
.qr-io i{font-style:normal;font-size:10.5px;color:var(--ice)}
/* setup colours - the platform’s own tokens, matching the map */
:root{--sA:#F5A524;--sB:#4ADE80;--sC:#5CC8FF;--sD:#A78BFA;--sE:#F472B6;--sF:#FB923C}
@media (max-width:640px){ .qr-io{grid-template-columns:1fr} }
/* ---------- drop279 ---------- */
/* Far right of the row, in its own colour: it opens reference material, it
does not filter anything, and sitting in the filter run made it read as
though it did. */
#camref-open{border:1px solid #4ADE8066;background:#4ADE8014;
color:var(--up);border-radius:7px;padding:6px 12px;
font:700 9px "Inter";letter-spacing:.12em;cursor:pointer;
white-space:nowrap}
#camref-open:hover{background:#4ADE8026;border-color:var(--up)}
/* the description wraps BELOW its heading - beside it, the column was clipped
at the drawer edge */
.qr-su{border-bottom:1px solid #1B2230;padding:15px 0}
.qr-suh{display:flex;align-items:center;gap:10px}
.qr-nm{flex:1;min-width:0}
.qr-nm b{display:block;font:700 13px "Inter";letter-spacing:.05em;
color:var(--text)}
.qr-nm i{display:block;font:500 11px "IBM Plex Mono";color:var(--muted);
font-style:normal;margin-top:3px}
.qr-tag{font:700 9.5px "Inter";letter-spacing:.1em;padding:4px 9px;
border-radius:4px;white-space:nowrap}
.qr-tag.with{color:var(--up);background:#4ADE8018}
.qr-tag.against{color:var(--down);background:#F8717118}
.qr-su p{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--muted)}
.qr-rr{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.qr-rr > div{border:1px solid var(--border);border-radius:7px;padding:9px 4px;
text-align:center}
.qr-rr b{display:block;font:800 17px "IBM Plex Mono";color:var(--text)}
.qr-rr span{display:block;font:600 12px "IBM Plex Mono";color:var(--ice);
margin-top:5px}
/* drop280: the notes carry emphasis now that they hold the definitions */
.qr-note b{color:var(--text);font-weight:700}
.qr-map{overflow-x:auto}
/* drop283: one spacer, one job. It sits between HIDE AVOID and QUICK REF and
eats the free width, which is what actually pins the button to the edge -
an auto margin on the last item has nothing left to push against. */
.f-grow{flex:1 1 auto;min-width:8px}
/* drop285: the diagrams fill the wider drawer */
#camref .qr-map{padding:14px}
#camref .qr-map svg{width:100%;height:auto}
.qr-io > div{padding:14px}
.qr-io b{font-size:12px}
.qr-io span{font-size:11.5px}
.qr-io i{font-size:12px}
@media (max-width:900px){ #camref{width:96vw} }
/* ---------- drop286: day-type filter ---------- */
.crp-dts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
margin:10px 0 4px}
.crp-dl{font:700 9px "Inter";letter-spacing:.12em;color:var(--muted);
margin-right:4px}
.crp-d{background:transparent;border:1px solid var(--border);color:var(--muted);
border-radius:6px;padding:4px 10px;font:700 9px "Inter";
letter-spacing:.1em;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.crp-d:hover{color:var(--text)}
.crp-d.active{color:var(--ice);border-color:#5CC8FF66;background:#5CC8FF12}
.crp-d > i{font-style:normal;font:500 9px "IBM Plex Mono";opacity:.65}
/* ---------- drop287: day type column ---------- */
.crp-dt{font:700 8.5px "Inter";letter-spacing:.09em;white-space:nowrap}
.crp-dt.dt-i{color:#C4B5FD} /* inside day - wide central range */
.crp-dt.dt-o{color:#7DD3FC} /* outside day - narrow central range */
.crp-dt.dt-n{color:var(--muted);opacity:.65}
/* the title row spreads: name and tabs left, QUICK REF hard right */
.crp-title{flex-wrap:wrap}
.crp-title > .crp-qr{margin-left:auto}
.crp-qr{border:1px solid #4ADE8066;background:#4ADE8014;color:var(--up);
border-radius:7px;padding:6px 12px;font:700 9px "Inter";
letter-spacing:.12em;cursor:pointer;white-space:nowrap}
.crp-qr:hover{background:#4ADE8026;border-color:var(--up)}
/* ---------- drop294: journal pager ---------- */
.jp{display:flex;align-items:center;gap:8px;justify-content:flex-end;
padding:10px 12px;flex-wrap:wrap}
.jp:empty{display:none}
.jp button{font:700 9px "Inter";letter-spacing:.1em;padding:6px 11px}
.jp button:disabled{opacity:.3;cursor:default;pointer-events:none}
.jp-at{font:500 11px "IBM Plex Mono";color:var(--muted);margin:0 4px}
/* drop296: the pager sits ABOVE the rows - below a long list it is a control
you must scroll to the end to reach, which is what paging exists to avoid.
justify-content flips to space-between so the count reads left and the
controls sit right, instead of everything crowding one edge. */
.jp{justify-content:space-between;padding:8px 12px 4px}
.jp .jp-at{margin:0;order:-1}
/* ---------- drop301: journal SETUP cell ---------- */
/* A letter, boxed, so it reads as a category rather than as a stray initial
in a row of numbers. Amber because it is structure - the same reason the
pivot surfaces are amber - and mono so A..F align down the column. */
.dc-fit{color:var(--ice)}
.dec-filter{margin:2px 0 8px}
.dec-filter input{width:180px}
#briefing-body .tkr,#wrap-body .tkr,#weekend-body .tkr{cursor:pointer}
#briefing-body .tkr:hover,#wrap-body .tkr:hover,#weekend-body .tkr:hover{
background:#5CC8FF2E}
.jn-setup{display:inline-block;min-width:20px;text-align:center;
padding:1px 6px;border:1px solid var(--amber);border-radius:3px;
font:700 11px "IBM Plex Mono";letter-spacing:.06em;color:var(--amber)}
/* ---------- drop304 ---------- */
/* near a pivot, but NOT the signal's own level - a quieter cue, because a
marker identical to pivot-live would make the precise one meaningless */
.pivot-near{border-bottom:1px dashed #5CC8FF88;color:var(--ice);
padding-bottom:1px}
/* HIDE AVOID follows the bar's convention: lit when filtering */
#cam-hide-avoid-btn{border-color:var(--border);color:var(--muted);
background:transparent}
#cam-hide-avoid-btn.f-on{border-color:var(--amber);color:var(--amber);
background:#F5A5240F}
/* ---------- drop310: live vs replay ---------- */
.camsc-cmp{margin-bottom:14px}
.camsc-cmp .mini-table td,.camsc-cmp .mini-table th{padding:7px 8px}
/* a thin cell is shown, never hidden - and never tinted */
.camsc-thin td{opacity:.72}
.camsc-few{font-style:normal;color:var(--amber);font-size:9px;margin-left:3px;
vertical-align:super}
.camsc-note{font-size:11px;line-height:1.6;color:var(--muted);margin-top:9px}
/* ---------- drop313: breakdowns as cards ---------- */
/* min-width:0 on the ITEM as well as the track - each defaults to min-content
independently, so both are needed before a table can be narrower than its
natural width. */
.camsc-panel{min-width:0;border:1px solid var(--border);border-radius:9px;
padding:12px 13px 10px;background:#0F1622}
.camsc-panel .camsc-h{font:800 9px "Inter";letter-spacing:.14em;
color:var(--amber);margin:0 0 9px;padding-bottom:7px;
border-bottom:1px solid var(--border)}
.camsc-panel .mini-table{width:100%;table-layout:fixed}
.camsc-panel .mini-table th{font:700 8px "Inter";letter-spacing:.09em;
color:var(--muted);padding:0 4px 6px;white-space:nowrap}
.camsc-panel .mini-table td{padding:5px 4px;font-size:11px;
border-top:1px solid #161C28}
/* the label column takes what it needs; the numeric ones share the rest and
ellipsis rather than pushing the card wider */
.camsc-panel .mini-table td:first-child,
.camsc-panel .mini-table th:first-child{width:44%;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.camsc-panel .mini-table td.num,.camsc-panel .mini-table th.num{
text-align:right;font-family:"IBM Plex Mono"}
/* the comparison is the headline: full width, above the grid, its own weight */
.camsc-cmp{border:1px solid #F5A52433;background:#F5A5240A;border-radius:9px;
padding:13px 14px 11px}
.camsc-cmp .mini-table{width:100%}
.camsc-cmp .camsc-h{color:var(--amber)}
@media (max-width:640px){
.camsc-panel{padding:10px}
.camsc-panel .mini-table td{font-size:10.5px}
}
/* ---------- drop314: readable type on the scorecard ---------- */
/* these are numbers to READ, not a dense grid to scan */
.camsc-panel .mini-table th{font-size:10px;padding-bottom:8px}
.camsc-panel .mini-table td{font-size:12.5px;padding:7px 5px}
.camsc-panel .camsc-h{font-size:10.5px}
.camsc-cmp .mini-table th{font-size:10.5px;padding-bottom:9px}
.camsc-cmp .mini-table td{font-size:13px;padding:8px 7px}
.camsc-cmp .camsc-h{font-size:11.5px}
.camsc-note{font-size:12px}
/* the ? must not push a fixed-layout column wider than its share */
.camsc-panel .mini-table .qi,.camsc-cmp .mini-table .qi{margin-left:3px;
width:12px;height:12px;line-height:12px;font-size:8px;vertical-align:1px}
/* with the ? present the label column needs a little more room */
.camsc-panel .mini-table td:first-child,
.camsc-panel .mini-table th:first-child{width:40%}
@media (max-width:640px){
.camsc-panel .mini-table td{font-size:11.5px}
.camsc-cmp .mini-table td{font-size:12px}
}
/* drop315: the scorecard title spreads, so QUICK REF reaches the edge.
.panel-title is display:flex, so a float here would do nothing (drop288). */
.camsc-title{flex-wrap:wrap}
.camsc-title > .crp-qr{margin-left:auto}
/* ---------- drop316: the comparison table is not a breakdown card ---------- */
/* It carries `camsc-panel camsc-cmp`, so it inherited rules written for six
cards across: fixed layout and a 40% label column. Right for a narrow card,
wrong for one table spanning the panel - eight columns ended up in the left
40% with a third of the card empty. */
.camsc-cmp .mini-table{width:100%;table-layout:auto}
.camsc-cmp .mini-table th:first-child,
.camsc-cmp .mini-table td:first-child{width:auto;min-width:150px;
white-space:nowrap;overflow:visible;text-overflow:clip}
/* the numeric columns share what is left, with room between them */
.camsc-cmp .mini-table th.num,
.camsc-cmp .mini-table td.num{width:auto;padding-left:16px;
white-space:nowrap}
/* R/SIG, REPLAY and DELTA are the comparison - give them the most air */
.camsc-cmp .mini-table th:nth-last-child(-n+3),
.camsc-cmp .mini-table td:nth-last-child(-n+3){padding-left:26px}
/* ---------- drop320: the desk read sits beside the table ---------- */
/* two columns on a wide card, stacked when there is not room for both */
.camsc-cmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:18px;align-items:start}
.camsc-cmp > .camsc-h{grid-column:1 / -1}
.camsc-cmp > .mini-table,.camsc-cmp > .camsc-note{grid-column:1}
.camsc-ai{grid-column:2;grid-row:2 / span 2}
.camsc-ai .bt-ai{margin:0}
#sc-ai-go:disabled{opacity:.5;cursor:default;pointer-events:none}
@media (max-width:1180px){
.camsc-cmp{grid-template-columns:minmax(0,1fr)}
.camsc-ai{grid-column:1;grid-row:auto}
}
/* ---------- drop321: desk read shell ---------- */
.bt-ai-idle{display:flex;align-items:center;justify-content:center;
min-height:220px}
.sc-ai-cta{text-align:center;max-width:340px;padding:18px}
.sc-ai-btn{border:1px solid var(--amber);background:#F5A5240F;color:var(--amber);
border-radius:8px;padding:11px 22px;font:800 11px "Inter";
letter-spacing:.14em;cursor:pointer}
.sc-ai-btn:hover{background:#F5A52422}
.sc-ai-btn:disabled{opacity:.5;cursor:default;pointer-events:none}
.sc-ai-cta-n{font-size:11.5px;line-height:1.6;color:var(--muted);margin-top:12px}
.sc-ai-step{font:600 11.5px "IBM Plex Mono";color:var(--text);margin:14px 0 9px;
letter-spacing:.02em}
.sc-ai-bar{height:3px;background:#1B2230;border-radius:2px;overflow:hidden}
.sc-ai-bar > i{display:block;height:100%;background:var(--amber);
transition:width .9s linear}
.sc-ai-spin{width:22px;height:22px;margin:0 auto;border-radius:50%;
border:2px solid #1B2230;border-top-color:var(--amber);
animation:scspin .8s linear infinite}
@keyframes scspin{to{transform:rotate(360deg)}}
/* the result scrolls INSIDE the card, so the two columns stay aligned and the
panel stops growing with the analysis */
.sc-ai-scroll{max-height:560px;overflow-y:auto;padding-right:8px;margin-top:10px}
.camsc-ai .bt-ai{border:1px solid var(--border);border-radius:9px;
padding:12px 13px;background:#0F1622}
/* ---------- drop322: the desk read is as tall as the table ---------- */
/* `align-items:start` stopped the card stretching, so it sized itself by its
own content: a 220px hole when empty, 560px past the last row when full.
This grid has two columns and they should match - the row height is set by
the taller one and the card fills it. */
.camsc-cmp{align-items:stretch}
/* the chain must be UNBROKEN. Miss a link and the child's content height wins
again - especially min-height:0, because a flex child defaults to
min-content and refuses to shrink below its content whatever overflow says. */
.camsc-ai{display:flex;min-height:0}
.camsc-ai > .bt-ai{flex:1 1 auto;display:flex;flex-direction:column;
min-height:0}
.camsc-ai .sc-ai-scroll{flex:1 1 auto;min-height:0;max-height:none;
overflow-y:auto}
/* idle and busy centre in whatever height they are GIVEN, rather than
asserting one */
.camsc-ai > .bt-ai-idle{min-height:0;align-items:center}
/* ---------- drop323: flush, and never grows the row ---------- */
/* drop322 stretched the card, which also let it SET the row height - a long
analysis pushed the row taller and the whole card grew. Stretching and
not-contributing are different things.
Absolutely positioned = OUT OF FLOW: contributes nothing to the parent's
height, so the row is sized by the TABLE alone and this fills it exactly. */
.camsc-ai{position:relative;display:block;min-height:0}
.camsc-ai > .bt-ai{position:absolute;inset:0;display:flex;flex-direction:column;
min-height:0;margin:0}
.camsc-ai .sc-ai-scroll{flex:1 1 auto;min-height:0;max-height:none;
overflow-y:auto}
/* idle and busy: no box. A full-height empty rectangle with a button in the
middle is a lot of furniture around one action. */
.camsc-ai > .bt-ai-idle{border:0;background:transparent;padding:0;
align-items:center;justify-content:center}
/* ---------- drop324: prose reads like prose ---------- */
.sc-discs{margin:14px 0 4px}
.sc-disc{margin-bottom:14px}
.sc-disc-h{font:800 10px "Inter";letter-spacing:.13em;color:var(--amber);
margin-bottom:6px}
.sc-disc-b{font-size:13px;line-height:1.75;color:var(--text)}
/* findings are prose too now - the mono evidence line is gone */
.camsc-ai .bt-find-b{font-size:12.5px;line-height:1.7}
.camsc-ai .bt-find-e{display:none}
/* ---------- drop325: close the gap under the heading ---------- */
/* one `gap` value applies to ROWS as well as columns, so the 18px meant to
separate the two columns was also inserted under the header row. They are
different distances doing different jobs. */
.camsc-cmp{gap:6px 18px}
.camsc-cmp > .camsc-h{margin-bottom:2px;padding-bottom:6px}
/* the table and the card both start at the same line */
.camsc-cmp > .mini-table{margin-top:0}
.camsc-cmp > .mini-table th{padding-top:0}
/* ---------- drop326: the comparison table scrolls ---------- */
/* A wrapper, not overflow on the
: that needs display:block, which
destroys the table layout keeping these columns aligned. */
.sc-tblwrap{max-height:52vh;overflow-y:auto;min-height:0}
.sc-tblwrap > .mini-table{width:100%}
/* the header STAYS while the rows move - a scrolling table whose header
leaves is unreadable */
.sc-tblwrap thead th{position:sticky;top:0;z-index:1;background:#111826;
/* padding is what gives the row its height AND the space its background is
drawn in; drop325 removed it to move the row up and took the tint with
it. The row moves up by closing the row GAP instead. */
padding-top:9px;padding-bottom:9px}
.camsc-cmp > .sc-tblwrap{grid-column:1}
/* ---------- drop327: the header is a row ---------- */
/* The band was text + padding on the cells and nothing else, so it read as a
thin strip clipped under the title. Padding alone only moves the text down
inside the same strip - the ROW needs a height. */
.camsc-cmp > .sc-tblwrap{margin-top:8px}
.sc-tblwrap thead tr{height:38px}
/* the background must stay on the CELL: a sticky
does not paint, so a
thead-level background scrolls away under the rows */
.sc-tblwrap thead th{height:38px;padding-top:0;padding-bottom:0;
vertical-align:middle;
/* a rule under it, so it reads as a header rather than a shaded line */
box-shadow:inset 0 -1px 0 var(--border)}
.sc-tblwrap thead th:first-child{border-top-left-radius:6px}
.sc-tblwrap thead th:last-child{border-top-right-radius:6px}
/* ---------- drop367: settings tabs + paper reset ---------- */
/* Tabbed, each column has the full row: the column becomes a card grid so
three cards do not stack in a third of the width (13.101: the width a flex
or grid CHILD gets is the container's decision, so the change is made on
the container, not fought on the cards). */
.settings-grid.row-user{grid-template-columns:1fr}
.settings-grid.row-user .set-col{display:grid;
grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
gap:16px;align-items:start}
.settings-grid.row-user .set-col-label{display:none}
#set-tabs{margin-left:18px}
.rst-row{display:flex;align-items:center;justify-content:space-between;
gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.rst-row:last-of-type{border-bottom:0}
.rst-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
font:500 12px "Inter"}
.rst-info b{font:700 11px "IBM Plex Mono";letter-spacing:.08em}
.rst-btn{color:var(--down);border-color:var(--down)}
.rst-btn:disabled{opacity:.45;cursor:not-allowed}
.rst-note{font-size:11px;line-height:1.5;margin-top:10px}
/* ---------- drop368: typed-confirm modal (mt-modal family) ---------- */
#confirm-modal{position:fixed;inset:0;background:#000A;z-index:90;
display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
#confirm-modal.hidden{display:none}
.cf-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;
padding:18px;width:min(480px,94vw);box-shadow:0 18px 60px #000C}
.cf-head{display:flex;justify-content:space-between;align-items:center;
margin-bottom:12px;font:700 12px "Space Grotesk";letter-spacing:.1em;color:var(--down)}
.cf-body{font:500 12.5px "Inter";color:var(--text);line-height:1.55;
margin-bottom:14px}
#cf-word{width:100%;box-sizing:border-box;padding:10px 11px;
font:600 13px "IBM Plex Mono";letter-spacing:.14em;background:var(--void);
color:var(--text);border:1px solid var(--border);border-radius:8px}
#cf-word:focus{outline:none;border-color:var(--down)}
.cf-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.cf-danger{background:var(--down);color:#2A0B0B;border:1px solid var(--down);
border-radius:7px;padding:9px 18px;font:700 11px "IBM Plex Mono";
letter-spacing:.12em;cursor:pointer}
.cf-danger:disabled{background:transparent;color:var(--muted);
border-color:var(--border);cursor:not-allowed}
/* ---------- drop368: seg tabs - flush fill, brand-amber active ---------- */
/* The base preset rule carries margin-left:6px into .presets.seg buttons,
whose override never reset it - so every seg button floated 6px inside a
clipped rounded container and the container background leaked around the
active fill. margin:0 fixes the whole family (settings tabs AND the admin
USERS/FLAGS/AUDIT tabs). Active goes to the platform's selected
vocabulary: amber fill, dark text - same as .presets button.active and
the broker PAPER toggle. These land after the ~line-704 dark override, so
the cascade supersedes it without editing it. */
.presets.seg button{margin:0}
.presets.seg button.active{background:var(--amber);color:#141005}
.presets.seg button.active:hover{background:var(--amber);color:#141005}
/* ---------- drop374: SCORECARD page - strategy selector, NOW, DIGEST, ADAPTIVE BACKTEST ---------- */
#scans-tabs{align-items:flex-end;flex-wrap:wrap;row-gap:6px}
.sc-strat{display:inline-flex;align-self:center;margin:0 16px 6px 0;padding:3px;
border:1px solid var(--border);border-radius:9px;background:var(--panel2)}
.sc-strat-btn{font:700 10.5px "IBM Plex Mono";letter-spacing:.12em;color:var(--muted);
background:transparent;border:0;border-radius:6px;padding:7px 14px;cursor:pointer}
.sc-strat-btn:hover{color:var(--text)}
.sc-strat-btn.active{background:var(--amber);color:#141005}
.scans-tab.strat-off{display:none!important}
@media (max-width:760px){ .sc-strat{width:100%;margin-right:0} .sc-strat-btn{flex:1} }
.sc-set{font:700 12px "IBM Plex Mono"}
.sc-set-A{color:var(--sA)} .sc-set-B{color:var(--sB)} .sc-set-C{color:var(--sC)}
.sc-set-D{color:var(--sD)} .sc-set-E{color:var(--sE)} .sc-set-F{color:var(--sF)}
.sc-good{color:var(--up)} .sc-mid{color:var(--amber)} .sc-bad{color:var(--down)}
.sc-n{font-style:normal;font-size:9.5px;color:var(--muted);margin-left:5px}
.sc-tbl td,.sc-tbl th{white-space:nowrap}
.sc-tblwrap{overflow-x:auto}
/* regime chip: two halves, SPY and VOL */
.sc-reg{display:inline-flex;gap:0;margin-left:8px;vertical-align:middle;
border:1px solid var(--border);border-radius:5px;overflow:hidden}
.sc-reg i{font:700 9px "IBM Plex Mono";font-style:normal;letter-spacing:.08em;
padding:3px 6px;color:var(--muted)}
.sc-reg.spy-up i:first-child{color:var(--up);background:#4ADE8014}
.sc-reg.spy-dn i:first-child{color:var(--down);background:#F8717114}
.sc-reg.vol-up i:last-child{color:var(--amber);background:#F5A52414}
.sc-reg.vol-dn i:last-child{color:var(--ice);background:#5CC8FF12}
.sc-reg i + i{border-left:1px solid var(--border)}
/* centred +/- bar */
.sc-bar{position:relative;display:block;height:8px;border-radius:4px;background:#0B111B;min-width:60px}
.sc-bar-0{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:#2E3A50}
.sc-bar-f{position:absolute;top:0;bottom:0;border-radius:3px}
.sc-bar-f.pos{background:var(--up)} .sc-bar-f.neg{background:var(--down)}
/* ---- NOW ---- */
.cn-regime{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
padding:16px 18px;margin:2px 0 18px;border:1px solid #F5A52433;border-radius:11px;
background:linear-gradient(135deg,#F5A5240F,#5CC8FF08)}
.cn-regime.stale{border-color:#F8717155;background:#F871710C}
.cn-k{font:700 9.5px "Inter";letter-spacing:.16em;color:var(--muted);display:flex;align-items:center}
.cn-reg-label{font:600 21px "Inter";color:var(--text);margin:7px 0 5px;letter-spacing:-.01em}
.cn-reg-sub{font:500 11.5px "IBM Plex Mono";color:var(--muted)}
.cn-reg-side{display:flex;gap:22px;flex-wrap:wrap}
.cn-kv{display:flex;flex-direction:column;gap:5px}
.cn-kv span{font:700 9px "Inter";letter-spacing:.14em;color:var(--muted)}
.cn-kv b{font:600 15px "IBM Plex Mono"}
.cn-sec-h,.cn-sub-h{font:800 9.5px "Inter";letter-spacing:.15em;color:var(--muted);margin:0 0 10px}
.cn-sub-h{margin:14px 0 8px;padding-top:10px;border-top:1px solid var(--border)}
.cn-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px;margin-bottom:18px}
.cn-tile{border:1px solid var(--border);border-radius:10px;padding:12px 13px;background:#0F1622;
display:flex;flex-direction:column;gap:9px;min-width:0}
.cn-tile.on{border-color:#4ADE8055;box-shadow:inset 0 0 0 1px #4ADE8018}
.cn-tile-h{display:flex;align-items:center;gap:2px}
.cn-badge{margin-left:auto;font:700 8.5px "Inter";letter-spacing:.12em;color:var(--up);
background:#4ADE8018;border-radius:4px;padding:3px 6px}
.cn-edge-row{display:flex;align-items:baseline;gap:10px}
.cn-edge{font:600 34px "IBM Plex Mono";line-height:1;letter-spacing:-.02em}
.cn-delta{font:600 10.5px "IBM Plex Mono"}
.cn-meter{position:relative;height:5px;border-radius:3px;background:#0B111B}
.cn-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:currentColor;opacity:.9}
.cn-meter u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text);opacity:.55;text-decoration:none}
.cn-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cn-stats div{display:flex;flex-direction:column;gap:3px;min-width:0}
.cn-stats span{font:700 8px "Inter";letter-spacing:.1em;color:var(--muted);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.cn-stats b{white-space:nowrap}
.cn-stats b .sc-n{margin-left:4px}
.cn-stats b{font:600 12px "IBM Plex Mono"}
.cn-stats em{font:normal 9.5px "IBM Plex Mono";color:var(--muted)}
.cn-states{display:grid;grid-template-columns:34px 1fr 1fr;gap:3px;align-items:center;
padding-top:8px;border-top:1px solid var(--border)}
.cn-st-h{font:700 8px "IBM Plex Mono";color:var(--muted);text-align:center;letter-spacing:.06em}
.cn-st{font:600 11px "IBM Plex Mono";text-align:center;padding:3px 0;border-radius:4px;
background:#0B111B;border:1px solid transparent}
.cn-st.cur{border-color:var(--amber);background:#F5A52412}
.cn-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
@media (max-width:1100px){ .cn-grid2{grid-template-columns:minmax(0,1fr)} }
.cn-grid2 .camsc-panel .mini-table{max-width:none}
/* calibration rows + funnel */
.sc-cal{display:flex;flex-direction:column;gap:7px}
.sc-cal-gap{height:6px}
.sc-calrow{display:grid;grid-template-columns:minmax(96px,34%) 1fr 64px 38px;gap:10px;align-items:center}
.sc-calrow.pass .sc-cal-l{color:var(--text)}
.sc-calrow.pass .sc-cal-l::after{content:" \2713";color:var(--up)}
.sc-cal-l{font:600 11px "IBM Plex Mono";color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-calrow b{font:600 12px "IBM Plex Mono";text-align:right}
.sc-calrow em{font:normal 10px "IBM Plex Mono";color:var(--muted);text-align:right}
.sc-both{font-size:11.5px;color:var(--muted);margin-top:11px;line-height:1.6}
.sc-both b{font-family:"IBM Plex Mono";color:var(--text)}
.sc-both b.chg-up{color:var(--up)} .sc-both b.chg-down{color:var(--down)}
.sc-check{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:11.5px;margin:5px 0}
.sc-check-m{font:700 10px "IBM Plex Mono";letter-spacing:.1em;width:42px}
.sc-verdict{font:700 9.5px "Inter";letter-spacing:.12em}
.sc-funnel{display:flex;flex-direction:column;gap:6px}
.sc-frow{display:grid;grid-template-columns:minmax(120px,36%) 1fr 44px 66px;gap:10px;align-items:center;font-size:11.5px}
.sc-frow b{font:600 12px "IBM Plex Mono";text-align:right}
.sc-frow > span:last-child{font:600 11.5px "IBM Plex Mono";text-align:right}
.sc-f-l{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-frow.main .sc-f-l{color:var(--text);font-weight:600}
.sc-f-bar{height:8px;border-radius:4px;background:#0B111B;overflow:hidden}
.sc-f-bar i{display:block;height:100%;background:#5CC8FF66;border-radius:4px}
.sc-frow.main .sc-f-bar i{background:var(--amber)}
.sc-res{font:700 8.5px "Inter";letter-spacing:.1em}
/* ---- DIGEST ---- */
.dg-nav{margin-left:auto;display:inline-flex;gap:6px;align-items:center}
.dg-nav select{background:var(--panel2);color:var(--text);border:1px solid var(--border);
border-radius:6px;font:600 11px "IBM Plex Mono";padding:5px 8px}
.dg-nav .crp-w:disabled{opacity:.35;cursor:default}
.dg-hero{padding:18px 20px;margin:2px 0 16px;border:1px solid var(--border);border-radius:11px;
background:linear-gradient(135deg,#5CC8FF0C,#F5A5240A)}
.dg-week{font:600 20px "Inter";letter-spacing:-.01em;margin-bottom:10px}
.dg-head{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px}
.dg-head li{font-size:13.5px;line-height:1.55;color:var(--text)}
.dg-head li::marker{color:var(--amber)}
.dg-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
@media (max-width:1100px){ .dg-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .dg-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dg-kpi{border:1px solid var(--border);border-radius:10px;padding:12px 13px;background:#0F1622;
display:flex;flex-direction:column;gap:5px;min-width:0}
.dg-kpi span{font:700 8.5px "Inter";letter-spacing:.14em;color:var(--muted)}
.dg-kpi b{font:600 22px "IBM Plex Mono";line-height:1.1}
.dg-kpi em{font:normal 10.5px "IBM Plex Mono";color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dg-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:14px}
@media (max-width:760px){ .dg-days{grid-template-columns:repeat(2,minmax(0,1fr))} }
.dg-day{border:1px solid var(--border);border-radius:9px;padding:9px 10px;display:flex;
flex-direction:column;gap:6px;align-items:flex-start;background:var(--panel2)}
.dg-day > span{font:700 9.5px "IBM Plex Mono";letter-spacing:.08em;color:var(--muted)}
.dg-day .sc-reg{margin-left:0}
.dg-day.chg{border-color:#F5A52466}
.dg-day em{font:700 8px "Inter";font-style:normal;letter-spacing:.12em;color:var(--amber)}
.sc-chg{display:grid;grid-template-columns:1fr 40px;gap:8px;align-items:center;min-width:110px}
.sc-chg em{font:600 11px "IBM Plex Mono";font-style:normal;text-align:right}
/* ---- ADAPTIVE BACKTEST ---- */
.abt-form{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin:2px 0 16px}
.abt-form label{display:flex;flex-direction:column;gap:4px}
.abt-form label span{font:700 8.5px "Inter";letter-spacing:.14em;color:var(--muted)}
.abt-form input{background:var(--panel2);color:var(--text);border:1px solid var(--border);
border-radius:6px;font:500 12px "IBM Plex Mono";padding:6px 8px;width:118px}
.abt-form input[type=number]{width:84px}
.abt-go{background:var(--amber);color:#141005;border:0;border-radius:6px;
font:700 11px "IBM Plex Mono";letter-spacing:.12em;padding:8px 18px;cursor:pointer}
.abt-reset{padding:7px 12px}
.abt-cmp{border:1px solid #F5A52433;border-radius:9px;background:#F5A5240A;padding:12px 14px}
.abt-cmp-h,.abt-cmp-r{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;align-items:center}
.abt-cmp-h{font:800 9px "Inter";letter-spacing:.14em;color:var(--muted);
padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.abt-cmp-h span:not(:first-child),.abt-cmp-r b{text-align:right}
.abt-cmp-r{padding:6px 0;border-bottom:1px solid #1B2331}
.abt-cmp-r:last-child{border-bottom:0}
.abt-cmp-r span{font:700 9.5px "Inter";letter-spacing:.1em;color:var(--muted)}
.abt-cmp-r b{font:600 13px "IBM Plex Mono"}
.abt-svg{width:100%;height:230px;display:block}
.abt-svg text{font:500 10px "IBM Plex Mono";fill:var(--muted)}
.abt-zero{stroke:#2E3A50;stroke-width:1;stroke-dasharray:3 3}
.abt-l-b{fill:none;stroke:#8B94A7;stroke-width:1.6;vector-effect:non-scaling-stroke}
.abt-l-a{fill:none;stroke:var(--amber);stroke-width:2.2;vector-effect:non-scaling-stroke}
.abt-legend{margin-left:auto;font:600 9.5px "IBM Plex Mono";letter-spacing:.04em;color:var(--muted);
display:inline-flex;gap:6px;align-items:center;float:right}
.abt-legend i{display:inline-block;width:14px;height:2px;margin-left:8px}
.abt-legend i.b{background:#8B94A7} .abt-legend i.a{background:var(--amber)}
.abt-top{align-items:stretch}
#cam-abt .camsc-note b{color:var(--text)}
.abt-msg{font-size:12px;margin:-6px 0 12px;min-height:0}
.abt-msg:empty{display:none}
.abt-go:disabled{opacity:.6;cursor:wait}
/* ---------- drop375: QUICK REF on WHAT'S WORKING NOW; the tile explainer ---------- */
.cn-title > .crp-qr{margin-left:auto}
.cn-info{margin-left:auto;flex:none;width:17px;height:17px;border-radius:50%;padding:0;
display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
border:1px solid #5A637699;background:transparent;color:var(--muted);
font:700 10px "IBM Plex Mono";line-height:1}
.cn-badge + .cn-info{margin-left:8px}
@media (max-width:760px){ .cn-info{min-height:0;width:24px;height:24px;font-size:12px} }
.cn-info:hover,.cn-info:focus-visible{border-color:var(--amber);color:var(--amber);outline:none}
.cn-meter-row{display:flex;align-items:center;gap:6px}
.cn-meter-row .cn-meter{flex:1}
.cn-mk{display:inline-flex;align-items:center;justify-content:center;flex:none;
width:15px;height:15px;border-radius:50%;margin-left:5px;vertical-align:middle;
background:var(--amber);color:#141005;font:700 9px "IBM Plex Mono";font-style:normal;
letter-spacing:0}
.cn-pop{position:fixed;z-index:60;max-height:calc(100vh - 24px);overflow:auto;
background:var(--panel);border:1px solid #F5A52455;border-radius:12px;
box-shadow:0 18px 48px #000000A0;padding:14px 16px 12px}
.cn-pop.pinned{border-color:var(--amber)}
.cn-pop-h{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:9px;
border-bottom:1px solid var(--border)}
.cn-pop-h > span{font:800 9.5px "Inter";letter-spacing:.15em;color:var(--amber);margin-right:4px}
.cn-pop-x{margin-left:auto;background:transparent;border:0;color:var(--muted);
font:400 18px/1 "Inter";cursor:pointer;padding:0 2px}
.cn-pop-x:hover{color:var(--text)}
.cn-pop-body{display:grid;grid-template-columns:232px minmax(0,1fr);gap:16px;align-items:start}
.cn-pop-tile .cn-tile{pointer-events:none}
.cn-pop-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cn-pop-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:start}
.cn-pop-list li .cn-mk{margin:1px 0 0}
.cn-pop-list li > div > b:first-child{display:block;font:700 9.5px "Inter";
letter-spacing:.12em;color:var(--text);text-transform:uppercase;margin-bottom:2px}
.cn-pop-list li span{font-size:12px;line-height:1.45;color:#C3CAD7}
.cn-pop-list li span b{font-family:"IBM Plex Mono";color:var(--text)}
.cn-pop-list li span b.chg-up,.cn-pop-list li span b.sc-good{color:var(--up)}
.cn-pop-list li span b.chg-down{color:var(--down)}
.cn-pop-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.cn-pop-f button{background:transparent;border:1px solid var(--border);border-radius:6px;
color:var(--amber);font:600 10.5px "IBM Plex Mono";letter-spacing:.06em;padding:6px 10px;cursor:pointer}
.cn-pop-f button:hover{border-color:var(--amber)}
@media (max-width:760px){
.cn-pop-body{grid-template-columns:minmax(0,1fr)}
.cn-pop-tile{max-width:260px}
}
/* guide and Desk tables (mdLite): the guide has carried pipe tables since
v3 and they rendered as raw text */
.dsk-tblwrap{overflow-x:auto;margin:6px 0 16px}
.dsk-tbl{border-collapse:collapse;font-size:12.5px;line-height:1.5;min-width:50%}
.dsk-tbl th{font:700 9.5px "Inter";letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);text-align:left;padding:6px 14px 6px 0;border-bottom:1px solid var(--border)}
.dsk-tbl td{padding:6px 14px 6px 0;border-bottom:1px solid #1B2331;vertical-align:top;color:#C9D1E0}
.dsk-tbl td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
/* ================= drop376: THE TRADING DESK - QUBIT =================
Last in the file on purpose: the desk carries five generations of rules
above (drop6h, the 1250px sheet, the phone bleed), and every rule here is
#desk-scoped or Qubit-only so it wins by order without touching them. */
#btn-chat{position:relative;display:inline-flex;align-items:center;gap:7px}
#btn-chat.q-ping{animation:bellping 1s ease-out 2}
.q-dot{width:9px;height:9px;border-radius:50%;background:#4A5368;flex:0 0 auto;
display:inline-block;position:relative}
.q-dot.ok{background:var(--up);animation:qpulse 2.2s ease-out infinite}
.q-dot.ok.thinking{animation-duration:.85s}
.q-dot.warn{background:var(--amber);animation:qpulse-amber 2.2s ease-out infinite}
.q-dot.bad{background:var(--down);animation:none}
@keyframes qpulse{0%{box-shadow:0 0 0 0 #4ADE80A0}70%{box-shadow:0 0 0 8px #4ADE8000}
100%{box-shadow:0 0 0 0 #4ADE8000}}
@keyframes qpulse-amber{0%{box-shadow:0 0 0 0 #F5A524A0}70%{box-shadow:0 0 0 8px #F5A52400}
100%{box-shadow:0 0 0 0 #F5A52400}}
@media (prefers-reduced-motion: reduce){ .q-dot.ok,.q-dot.warn{animation:none} }
#desk .desk-head{gap:10px;padding:12px 14px}
#desk .desk-head button{margin-left:0}
#desk .q-name{font:800 12px "Space Grotesk";letter-spacing:.14em;white-space:nowrap}
#desk .q-sp{flex:1 1 auto}
#desk .q-statebar{display:flex;align-items:baseline;gap:10px;padding:6px 14px 7px;flex:0 0 auto;
border-bottom:1px solid #1E2738;font:500 9.5px "IBM Plex Mono";letter-spacing:.04em;
color:var(--muted);background:#0E1320}
#desk .q-state{min-width:0}
#desk #desk-model{margin-left:auto;white-space:nowrap;font:inherit}
#desk .q-day{background:#151C2B;border:1px solid #242E44;color:var(--muted);
font:600 9.5px "Inter";letter-spacing:.08em;padding:3px 4px;border-radius:5px;
max-width:96px;flex:0 0 auto}
#desk #q-read{font:700 9.5px "Inter";letter-spacing:.1em;padding:4px 8px;
white-space:nowrap}
#desk #q-read.hidden{display:none}
.q-watch{display:flex;gap:6px;overflow-x:auto;padding:9px 14px;flex:0 0 auto;
border-bottom:1px solid #1E2738;align-items:center;scrollbar-width:none}
.q-watch::-webkit-scrollbar{display:none}
.q-w-lbl{font:800 9px "Space Grotesk";letter-spacing:.14em;color:var(--muted);white-space:nowrap;
margin-right:2px}
.q-w-empty{font-size:10.5px;color:var(--muted);font-style:italic;white-space:nowrap}
.q-w{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:0 0 auto;
background:#151C2B;border:1px solid #2A3550;border-radius:6px;padding:4px 8px;
font:500 11px "IBM Plex Mono";color:var(--text);cursor:pointer;letter-spacing:0}
.q-w:hover{border-color:var(--amber)}
.q-w b{font-weight:600}
.q-w i{font:700 8.5px "Inter";letter-spacing:.1em;font-style:normal;color:var(--muted)}
.q-w.q-wc-high{border-color:#4ADE8077;background:#4ADE8012}
.q-w.q-wc-high i{color:var(--up)}
.q-w.q-w-triggered{border-color:var(--ice);background:#5CC8FF14}
.q-w.q-w-triggered i{color:var(--ice)}
.q-w.q-w-avoid{border-color:#F8717166;background:#F8717110}
.q-w.q-w-avoid i{color:var(--down)}
.q-w.q-w-invalidated{opacity:.55}
.q-w.q-w-invalidated b{text-decoration:line-through}
.q-past{padding:8px 14px;font-size:11px;color:var(--amber);background:#F5A5240D;
border-bottom:1px solid #F5A52433;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.q-past.hidden{display:none}
.q-past button{margin-left:auto;font-size:9.5px;padding:3px 8px}
.q-intro{border:1px dashed #2A3550;border-radius:10px;padding:14px 15px;font-size:12px;
line-height:1.6;color:#AEB6C6}
.q-intro b{color:var(--text)}
#desk .msg.ai.q-post{max-width:97%;white-space:normal}
#desk .msg.ai.q-feed{align-self:stretch;max-width:none}
.q-ph{display:flex;align-items:center;gap:7px;margin:-2px 0 7px;
font:700 9px "Inter";letter-spacing:.12em;color:var(--muted)}
.q-who{color:var(--up)}
.q-kind{color:var(--text);padding:1px 6px;border:1px solid #2A3550;border-radius:4px}
.q-conv{padding:1px 6px;border-radius:4px;background:#232E45}
.q-c-high .q-conv{background:#4ADE801F;color:var(--up)}
.q-priv{color:var(--ice)}
.q-at{margin-left:auto;font:500 9.5px "IBM Plex Mono";letter-spacing:0}
.q-title{font:600 13px "Inter";color:var(--text);margin:0 0 6px;line-height:1.4}
#desk .q-feed{border-left:3px solid #2A3550}
#desk .q-k-setup{border-left-color:var(--up)}
#desk .q-k-avoid,#desk .q-k-risk{border-left-color:var(--down)}
#desk .q-k-macro{border-left-color:var(--amber)}
#desk .q-k-plan,#desk .q-k-recap,#desk .q-k-position{border-left-color:var(--ice)}
#desk .q-private{background:#111A2A}
#desk textarea#desk-msg:disabled{opacity:.45}
@media (min-width:1251px){ #desk{width:440px;flex:0 0 440px} }
/* the top bar has no room to spare below ~1500px (pristine fits 1280 to the
pixel): there the button reads DESK and the dot becomes a corner LED that
adds no width */
@media (max-width:1500px){
#btn-chat .q-lbl-long{display:none}
#btn-chat .q-dot{position:absolute;top:-4px;left:-4px;width:8px;height:8px;
border:2px solid var(--void)}
}
@media (max-width:760px){
#desk .q-day{display:none}
}
/* ================================================================
drop383 - WHISPERS COLOURS, QUBIT GREEN WHERE THE AGENT LIVES
Operator, after drop382: "go back to the whispers branding scheme,
but RETAIN the Qubit coloring for where the agent lives... The
orange coloring was better. The green just doesn't look good."
Everything above this block is the WHISPERS sheet exactly as it was
at 838ac9a - its own amber, navy-graphite and colours - with only the
font names changed (Space Grotesk headings, Inter interface; operator
kept the drop379 fonts). This block adds what did not exist then:
- HOME, in the WHISPERS palette (amber is the accent again)
- the seventh nav item's spacing
- QUBIT'S ZONES in Qubit green: the Trading Desk (status band,
portrait, chat bubbles, greeting) and HOME's Qubit card.
Green appears nowhere else as chrome.
================================================================ */
:root{
--accent:#F5A524; --accent-ink:#141005; --accent-dim:#C97F12;
--warn:#F5A524; --plat:#F5A524; --title:var(--text);
--glow:0 0 18px #F5A52433;
/* Qubit's zone */
--q:#5BE38F; --q-band:#0E2A1F; --q-band-line:#1B4635;
--q-bg:#10151C; --q-line:#232C38;
--q-bubble:#1A2523; --q-bubble-line:#26352F; --q-text:#DCE4E1;
/* drop389: your own messages in ghost yellow - a translucent wash, not the
cold --anom yellow, which means "outlier" on the boards */
--q-user:#FFE38A12; --q-user-line:#FFE38A47; --q-user-label:#F2D46B;
--q-struct:#6FCBE0;
}
/* HOME is a seventh nav item; below 1700px the bar had no width to give it
(six fitted 1280 to the pixel), so the spacing tightens there */
@media (min-width:761px) and (max-width:1700px){
#topbar nav{gap:15px}
#topbar nav a{letter-spacing:.055em}
}
@media (min-width:761px) and (max-width:1360px){
#topbar nav{gap:10px}
#topbar nav a{letter-spacing:.03em}
}
/* ================================================================
drop379 - HOME, the landing page (#/home). Everything below is new
and prefixed hp- so it cannot collide with the dashboard's .hm-*
footer classes.
================================================================ */
#view-home{display:block;max-width:1720px;margin:0 auto;
container-type:inline-size;container-name:home} /* the Desk docks beside it, so it sizes by its own width */
#view-home.hidden{display:none!important}
.hp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.4fr);gap:18px;
align-items:stretch;margin-bottom:16px}
.hp-hello{position:relative;padding:22px 24px 20px;border-radius:14px;overflow:hidden;
background:linear-gradient(135deg,#0E121A 0%,#090C11 60%);border:1px solid #191F2C;
box-shadow:inset 0 1px 0 #FFFFFF08, 0 12px 32px #0007}
.hp-hello::before{content:"";position:absolute;inset:auto -60px -90px auto;width:260px;height:260px;
border-radius:50%;background:radial-gradient(circle,#F5A52422,transparent 65%);pointer-events:none}
.hp-eyebrow{font:600 10.5px "IBM Plex Mono";letter-spacing:.18em;color:var(--ice);text-transform:uppercase}
.hp-title{font:700 30px/1.12 "Space Grotesk";letter-spacing:-.01em;margin:8px 0 4px;color:var(--text)}
.hp-title b{color:var(--accent);font-weight:700}
.hp-sub{color:var(--muted);font-size:13px;margin-bottom:16px}
.hp-sess-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hp-sess-state{font:700 11px "IBM Plex Mono";letter-spacing:.14em;padding:4px 9px;border-radius:99px;
color:var(--muted);border:1px solid var(--border)}
.hp-sess-state.rth{color:var(--accent);border-color:#F5A52455;background:#F5A5240F;box-shadow:var(--glow)}
.hp-sess-state.pre,.hp-sess-state.post{color:var(--ice);border-color:#5CC8FF55;background:#5CC8FF0D}
.hp-sess-next{font:500 12px "IBM Plex Mono";color:var(--muted)}
.hp-sess-next b{color:var(--text);font-weight:600}
.hp-rail{position:relative;height:40px;margin-top:4px}
.hp-rail-track{position:absolute;left:0;right:0;top:15px;height:4px;border-radius:4px;background:#141924}
.hp-rail-seg{position:absolute;top:15px;height:4px;border-radius:4px}
.hp-rail-seg.pre{background:#5CC8FF40}.hp-rail-seg.rth{background:linear-gradient(90deg,#F5A52466,#5CC8FF66)}
.hp-rail-seg.ah{background:#5CC8FF30}
.hp-rail-tick{position:absolute;top:11px;width:1px;height:12px;background:#29344A}
.hp-rail-tick.cut{background:var(--warn)}
.hp-rail-lbl{position:absolute;top:26px;transform:translateX(-50%);font:500 9px "IBM Plex Mono";
letter-spacing:.08em;color:#5E6677;white-space:nowrap}
.hp-rail-lbl.cut{top:-2px;color:var(--warn)}
.hp-rail-now{position:absolute;top:9px;width:3px;height:16px;margin-left:-1.5px;border-radius:2px;
background:var(--accent);box-shadow:0 0 10px #F5A524}
.hp-idx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hp-ix{position:relative;padding:14px 14px 10px;border-radius:12px;background:var(--panel);
border:1px solid var(--border);overflow:hidden;min-height:118px;
box-shadow:inset 0 1px 0 #FFFFFF06, 0 8px 22px #0005}
.hp-ix-s{font:700 11px "IBM Plex Mono";letter-spacing:.14em;color:var(--muted)}
.hp-ix-p{font:600 20px "IBM Plex Mono";color:var(--text);margin-top:6px;font-variant-numeric:tabular-nums}
.hp-ix-c{font:600 12px "IBM Plex Mono";margin-top:2px}
.hp-ix svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:max(34px,min(calc(100% - 84px),110px))}
.hp-ix .sp-l{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.hp-ix .sp-up .sp-l{stroke:var(--up)} .hp-ix .sp-dn .sp-l{stroke:var(--down)}
.hp-ix .sp-up .sp-a{fill:url(#hp-g-up)} .hp-ix .sp-dn .sp-a{fill:url(#hp-g-dn)}
.hp-ix-note{position:absolute;left:14px;bottom:10px;font:500 9.5px "IBM Plex Mono";color:#596172;letter-spacing:.06em}
.hp-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
.hp-k{padding:14px 16px;border-radius:12px;background:var(--panel);border:1px solid var(--border);
box-shadow:inset 0 1px 0 #FFFFFF06, 0 8px 22px #0005;min-width:0;cursor:default}
.hp-k[data-go]{cursor:pointer}
.hp-k[data-go]:hover{border-color:#F5A52440}
.hp-k-l{font:600 9.5px "IBM Plex Mono";letter-spacing:.16em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-k-v{font:600 24px "IBM Plex Mono";margin-top:6px;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.hp-k-v.acc{color:var(--accent);text-shadow:0 0 18px #F5A52444}
.hp-k-s{font:500 11px "IBM Plex Mono";color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-k-s b{color:var(--text);font-weight:600}
.hp-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px;align-items:start}
.hp-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.hp-card{border-radius:14px;background:var(--panel);border:1px solid var(--border);
box-shadow:inset 0 1px 0 #FFFFFF06, 0 10px 28px #0006;overflow:hidden;min-width:0}
.hp-card-h{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid #131821}
.hp-card-t{font:700 11.5px "Space Grotesk";letter-spacing:.16em;color:var(--text);white-space:nowrap}
.hp-card-t i{font-style:normal;color:var(--accent)}
.hp-card-m{font:500 10.5px "IBM Plex Mono";color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-more{margin-left:auto;font:600 10.5px "IBM Plex Mono";letter-spacing:.1em;color:var(--accent);
text-decoration:none;white-space:nowrap;background:none;border:0;padding:0;cursor:pointer}
.hp-more:hover{text-decoration:underline;background:none}
.hp-card-b{padding:6px 8px 10px}
.hp-empty{padding:22px 16px;color:var(--muted);font-size:13px;line-height:1.55}
/* top setups */
.hp-su{display:grid;grid-template-columns:minmax(150px,1.15fr) minmax(128px,1fr) minmax(0,1fr) minmax(0,1fr) 78px;
align-items:center;gap:16px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .12s}
.hp-su:hover{background:#0F131A}
.hp-su + .hp-su{border-top:1px solid #10141D}
.hp-su-hd{font:600 9.5px "IBM Plex Mono";letter-spacing:.14em;color:#596172;cursor:default;padding-top:4px;padding-bottom:4px}
.hp-su-hd:hover{background:none}
.hp-su-id{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:3px;align-items:center;min-width:0}
.hp-su-id .lgo{grid-row:1 / span 2}
.hp-su-id .tkr{font:700 13px "IBM Plex Mono";justify-self:start}
.hp-su-sub{display:flex;align-items:center;gap:6px;min-width:0;grid-column:2}
.hp-su-set{font:700 10px "IBM Plex Mono";letter-spacing:.06em;white-space:nowrap}
.hp-su-set.long{color:var(--up)}
.hp-su-set.short{color:var(--down)}
.hp-sg{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.hp-sg .sig{font-size:9.5px}
.hp-sg-l{font:500 10.5px "IBM Plex Mono";color:var(--muted);white-space:nowrap}
.hp-meter{display:flex;align-items:center;gap:8px;min-width:0}
.hp-meter b{font:600 12.5px "IBM Plex Mono";min-width:24px;text-align:right;color:var(--text)}
.hp-meter b.ok{color:var(--accent)}
.hp-ml{display:none;font:600 9px "IBM Plex Mono";letter-spacing:.12em;color:#596172;width:30px;flex:none}
.hp-bar{position:relative;flex:1;height:5px;border-radius:5px;background:#141924;min-width:40px}
.hp-bar > i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:#303C54}
.hp-bar > i.ok{background:linear-gradient(90deg,#C97F12,#F5A524);box-shadow:0 0 8px #F5A52466}
.hp-bar > u{position:absolute;top:-3px;bottom:-3px;width:1px;background:#848D9E;opacity:.7}
.hp-su-px{text-align:right;font:500 12px "IBM Plex Mono";color:var(--text)}
.hp-su-px span{display:block;font-size:10px;color:var(--muted)}
.hp-tag{font:700 8px "IBM Plex Mono";letter-spacing:.12em;color:var(--accent);
border:1px solid #F5A52455;background:#F5A5240D;border-radius:4px;padding:1px 4px;white-space:nowrap}
/* positions */
.hp-pos{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(0,2fr) 150px;gap:16px;
align-items:center;padding:12px 10px;border-radius:10px}
.hp-pos + .hp-pos{border-top:1px solid #10141D}
.hp-pos-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.hp-pos-id .tkr{font:700 13px "IBM Plex Mono"}
.hp-side{font:700 9.5px "IBM Plex Mono";letter-spacing:.1em;text-transform:uppercase}
.hp-pos-q{font:500 11px "IBM Plex Mono";color:var(--muted);width:100%}
.hp-pos-rail{position:relative;height:34px}
.hp-pos-rail .rt{position:absolute;left:0;right:0;top:13px;height:6px;border-radius:6px;
background:linear-gradient(90deg,#F8717133,#141924 45%,#141924 55%,#4ADE8033)}
.hp-pos-rail .re{position:absolute;top:9px;width:2px;height:14px;margin-left:-1px;background:#848D9E}
.hp-pos-rail .rp{position:absolute;top:8px;width:12px;height:16px;margin-left:-6px;border-radius:4px;
background:var(--text);box-shadow:0 0 0 2px var(--panel)}
.hp-pos-rail .rp.up{background:var(--up);box-shadow:0 0 0 2px var(--panel),0 0 12px #4ADE8088}
.hp-pos-rail .rp.dn{background:var(--down);box-shadow:0 0 0 2px var(--panel),0 0 12px #F8717188}
.hp-pos-rail .rl{position:absolute;top:24px;font:500 9.5px "IBM Plex Mono";color:var(--muted);white-space:nowrap}
.hp-pos-rail .rl.l{left:0}.hp-pos-rail .rl.r{right:0;text-align:right}
.hp-pos-rail .rl.top{top:-4px}
.hp-pos-pl{text-align:right;font:600 15px "IBM Plex Mono";font-variant-numeric:tabular-nums}
.hp-pos-pl span{display:block;font:500 10.5px "IBM Plex Mono";color:var(--muted);margin-top:2px}
.hp-warn{font:700 8.5px "IBM Plex Mono";letter-spacing:.1em;color:var(--warn);border:1px solid #F5A52466;
border-radius:4px;padding:1px 5px;white-space:nowrap}
/* market pulse (the briefing card's text, cloned) */
.hp-pulse{position:relative;padding:4px 16px 0;max-height:260px;overflow:hidden;font-size:13px;line-height:1.6}
.hp-pulse.open{max-height:none;padding-bottom:12px}
.hp-pulse:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
background:linear-gradient(180deg,transparent,var(--panel));pointer-events:none}
.hp-pulse strong{color:var(--accent);font-weight:600}
.hp-pulse ul{padding-left:18px;margin:6px 0}
.hp-pulse li::marker{color:var(--ice)}
.hp-pulse-f{display:flex;justify-content:center;padding:8px 0 12px}
/* Qubit */
.hp-q{background:linear-gradient(180deg,#0D1017 0%,var(--panel) 46%)}
.hp-q-head{display:flex;align-items:center;gap:14px;padding:16px 16px 12px}
.hp-q-av{position:relative;width:54px;height:54px;flex:none;border-radius:50%;
background:radial-gradient(circle at 50% 45%,#151A25,#06080C 70%);
box-shadow:0 0 0 1px #F5A52433, 0 0 26px #F5A52430}
.hp-q-av svg{position:absolute;inset:4px;width:46px;height:46px}
.hp-q-av .qa-o{fill:none;stroke:var(--accent);stroke-width:1.1;opacity:.75}
.hp-q-av .qa-o2{stroke:var(--ice);opacity:.8}
.hp-q-av .qa-n{fill:#FFE3B0;filter:drop-shadow(0 0 4px #F5A524)}
@media (prefers-reduced-motion:no-preference){
.hp-q-av .qa-spin{animation:hp-orbit 18s linear infinite;transform-origin:23px 23px}
.hp-q-av .qa-spin.r{animation-duration:26s;animation-direction:reverse}
@keyframes hp-orbit{to{transform:rotate(360deg)}}
}
.hp-q-name{font:700 15px "Space Grotesk";letter-spacing:.16em;display:flex;align-items:center;gap:9px}
.hp-q-name .q-dot{position:static}
.hp-q-state{font:500 10.5px "IBM Plex Mono";letter-spacing:.06em;color:var(--muted);margin-top:3px;line-height:1.45}
.hp-q-head .hp-more{align-self:flex-start}
.hp-q-watch{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.hp-q-watch .q-w{font-size:10.5px}
.hp-q-feed{padding:2px 10px 6px;display:flex;flex-direction:column;gap:8px;max-height:430px;overflow-y:auto}
.hp-qp{padding:10px 12px;border-radius:10px;background:#0A0D13;border:1px solid #141923;
border-left:3px solid #242D40;cursor:pointer}
.hp-qp:hover{border-color:#F5A52433}
.hp-qp.k-setup,.hp-qp.k-plan{border-left-color:var(--accent)}
.hp-qp.k-avoid,.hp-qp.k-risk{border-left-color:var(--down)}
.hp-qp.k-macro{border-left-color:var(--warn)}
.hp-qp.k-position{border-left-color:var(--ice)}
.hp-qp-h{display:flex;align-items:center;gap:8px;font:600 9.5px "IBM Plex Mono";letter-spacing:.12em;color:var(--muted)}
.hp-qp-h .k{color:var(--accent)}
.hp-qp.k-avoid .hp-qp-h .k,.hp-qp.k-risk .hp-qp-h .k{color:var(--down)}
.hp-qp.k-macro .hp-qp-h .k{color:var(--warn)}
.hp-qp-h .t{margin-left:auto;color:#596172}
.hp-qp-ti{font:600 13px "Inter";color:var(--text);margin-top:5px;line-height:1.35}
.hp-qp-b{font-size:12.5px;line-height:1.5;color:#A7ADB9;margin-top:4px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hp-qp-b strong{color:var(--text);font-weight:600}
.hp-q-ask{display:flex;gap:8px;padding:10px 12px 14px;border-top:1px solid #131821;margin-top:6px}
.hp-q-ask input{flex:1;min-width:0;background:#090C11;border-color:#1A212F;border-radius:10px;font-size:13px}
.hp-q-ask button{border-radius:10px;padding:9px 14px}
/* today */
.hp-ev{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:baseline;
padding:9px 8px;border-radius:8px}
.hp-ev + .hp-ev{border-top:1px solid #10141D}
.hp-ev-t{font:600 11px "IBM Plex Mono";color:var(--text);white-space:nowrap}
.hp-ev-t span{display:block;font-size:9.5px;color:var(--muted);font-weight:500}
.hp-ev-n{font-size:12.5px;color:var(--text);min-width:0}
.hp-ev-n span{display:block;font:500 10.5px "IBM Plex Mono";color:var(--muted);margin-top:2px}
.hp-ev-i{font:700 9px "IBM Plex Mono";letter-spacing:.12em;padding:2px 6px;border-radius:4px}
.hp-ev-i.HIGH{color:var(--down);background:#F8717114}
.hp-ev-i.MED{color:var(--warn);background:#F5A52414}
.hp-ev-i.ERN{color:var(--ice);background:#5CC8FF14}
.hp-ev.done{opacity:.55}
.hp-day{font:700 9.5px "IBM Plex Mono";letter-spacing:.16em;color:var(--ice);padding:10px 8px 4px}
@container home (max-width:1240px){
.hp-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.hp-kpis .hp-k{grid-column:span 2}
.hp-kpis .hp-k:nth-child(n+4){grid-column:span 3}
.hp-grid{grid-template-columns:1fr}
}
@container home (max-width:1040px){
.hp-hero{grid-template-columns:1fr}
}
@container home (max-width:700px){
.hp-title{font-size:24px}
.hp-idx{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-ix{min-height:132px}
.hp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-kpis .hp-k,.hp-kpis .hp-k:nth-child(n+4){grid-column:auto}
.hp-kpis .hp-k:last-child{grid-column:1 / -1}
.hp-su{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}
.hp-su-hd{display:none}
.hp-su-px{grid-column:2;grid-row:1}
.hp-ml{display:inline}
.hp-sg{grid-column:2;grid-row:2;align-items:flex-end}
.hp-pos{grid-template-columns:minmax(0,1fr) auto}
.hp-pos-rail{grid-column:1 / -1;grid-row:2}
}
/* ================================================================
drop383 - QUBIT'S ZONE: the Trading Desk and HOME's Qubit card
After the operator's mock: a green QUBIT AGENT band, the portrait,
green-led chat bubbles, a greeting with a tail. Prose inside the
bubbles keeps drop381's hierarchy (ruled ## headers, kicker caps,
white bold) in Qubit's colours.
================================================================ */
#desk{background:var(--q-bg);border-left:1px solid var(--q-line)}
#desk .desk-head{padding:13px 16px;border-bottom:0;background:var(--q-bg)}
#desk .q-name{display:inline-flex;align-items:center;gap:9px;font:700 13px "Space Grotesk";letter-spacing:.16em;color:#F2F5F4;white-space:nowrap}
#desk .q-name .q-mini{width:22px;height:22px}
.q-agentbar{display:flex;align-items:center;justify-content:center;gap:9px;flex:0 0 auto;
padding:9px 14px;background:var(--q-band);border-top:1px solid var(--q-band-line);border-bottom:1px solid var(--q-band-line);
font:700 11.5px "Space Grotesk";letter-spacing:.16em;color:#E8F2EC}
.q-agentbar .q-dot{width:9px;height:9px}
.q-aw.ok{color:var(--q)} .q-aw.warn{color:var(--amber)} .q-aw.bad{color:var(--down)}
.q-hero{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 14px 6px;flex:0 0 auto}
.q-hero-av{width:84px;height:84px;filter:drop-shadow(0 0 16px #62F5E42E)}
.q-hero-name{font:700 12.5px "Space Grotesk";letter-spacing:.2em;color:#F2F5F4}
#desk .q-statebar{display:flex;justify-content:center;text-align:center;background:none;
border-bottom:1px solid var(--q-line);padding:2px 14px 10px;color:#8B94A7}
#desk .q-statebar #desk-model{margin-left:0}
#desk .q-watch{border-bottom-color:var(--q-line)}
#desk .q-w:hover{border-color:var(--q)}
#desk-log{gap:12px;padding:14px;background:var(--q-bg)}
#desk .msg{border-radius:10px;font-size:14px;line-height:1.6}
#desk .msg.ai{background:var(--q-bubble);border:1px solid var(--q-bubble-line);color:var(--q-text);
padding:12px 14px;max-width:100%;box-shadow:none}
#desk .msg.ai.q-post{white-space:normal}
#desk .msg.ai.q-feed{align-self:stretch;border-left-width:3px}
#desk .q-ph{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:#8B94A7;font:700 9px "Inter";letter-spacing:.12em}
#desk .q-who{font:600 12.5px "IBM Plex Mono";letter-spacing:0;color:var(--q)}
#desk .q-kind{font:700 9px "Inter";letter-spacing:.12em;color:#B8C4C1;border:1px solid #33403C;padding:1px 6px;border-radius:4px}
#desk .q-conv{font:700 9px "Inter";letter-spacing:.12em;background:#26302D;color:#B8C4C1;padding:1px 6px;border-radius:4px}
#desk .q-c-high .q-conv{color:var(--q);background:#5BE38F1A}
#desk .q-title{font:600 15px/1.4 "Inter";color:#FFFFFF;margin:2px 0 6px}
#desk .msg.user{background:var(--q-user);border:1px solid var(--q-user-line);color:#F4F7F6;
align-self:stretch;max-width:100%;padding:11px 14px}
#desk .msg.user::before{content:"YOU";display:block;font:600 12px "IBM Plex Mono";letter-spacing:.04em;color:var(--q-user-label);margin-bottom:3px}
#desk .msg.pending{background:var(--q-bubble);border:1px solid var(--q-bubble-line)}
#desk .dots i{background:var(--q)}
.q-greet{position:relative;flex:0 0 auto;margin:2px 14px 16px;padding:12px 15px;border:1.5px solid #A9DCEB;border-radius:12px;
background:#0F1519;color:#F2F5F4;font-size:14.5px;line-height:1.5}
.q-greet::after{content:"";position:absolute;left:26px;bottom:-8px;width:13px;height:13px;background:#0F1519;
border-right:1.5px solid #A9DCEB;border-bottom:1.5px solid #A9DCEB;transform:rotate(45deg)}
#desk-log:has(.msg.user:not(.q-old)) ~ .q-greet,#desk-log:has(.q-intro) ~ .q-greet{display:none}
.q-intro{border:1px dashed #33403C;color:var(--q-text)}
#desk .desk-input,#desk-input{gap:10px;padding:12px 14px 14px;background:var(--q-bg);border-top:1px solid var(--q-line)}
#desk #desk-msg{background:#141A21;border:1px solid #2C3440;border-radius:10px;font-size:14px;color:#F2F5F4}
#desk #desk-msg:focus{border-color:#5BE38F88}
#desk #desk-send{background:var(--q);color:#06170E;border-color:var(--q)}
#desk #desk-send:hover{background:#86F0AE}
#desk .q-day{background:#141A21;border-color:#2C3440}
/* prose inside Qubit's bubbles */
#desk .msg.ai p{margin:0 0 10px}
#desk .msg.ai p:last-child{margin-bottom:0}
#desk .msg.ai strong{color:#FFFFFF;font-weight:650}
#desk .msg.ai ul,#desk .msg.ai ol{margin:4px 0 12px;padding-left:20px}
#desk .msg.ai li{margin:6px 0}
#desk .msg.ai li::marker{color:var(--q)}
#desk .msg.ai code{background:#0E1418;border:1px solid var(--q-bubble-line);color:#D3DDDB}
#desk .msg.ai .dsk-h2{position:relative;display:block;background:none;border:0;border-radius:0;
border-top:1px solid var(--q-bubble-line);margin:18px 0 9px;padding:13px 0 0 13px;
font:700 12.5px "Space Grotesk";letter-spacing:.09em;text-transform:uppercase;color:#FFFFFF}
#desk .msg.ai .dsk-h2::before{content:"";position:absolute;left:0;top:14px;width:3px;height:13px;border-radius:2px;background:var(--q)}
#desk .msg.ai .dsk-h2:first-child{border-top:0;margin-top:0;padding-top:0}
#desk .msg.ai .dsk-h2:first-child::before{top:1px}
#desk .msg.ai .dsk-h{display:block;margin:14px 0 6px;padding:0;border:0;
font:700 10.5px "Space Grotesk";letter-spacing:.14em;text-transform:uppercase;color:var(--q)}
#desk .msg.ai .dsk-hr{border:0;border-top:1px solid var(--q-bubble-line);margin:14px 0}
#desk .dsk-tbl th{color:#8B94A7;border-bottom:1px solid #33403C}
#desk .dsk-tbl td{color:var(--q-text);border-bottom-color:var(--q-bubble-line)}
#desk .dsk-tbl td:first-child{color:#FFFFFF}
@media (max-height:820px){
.q-hero{flex-direction:row;justify-content:center;padding:10px 14px 4px}
.q-hero-av{width:44px;height:44px}
}
@media (max-width:760px){
.q-hero{flex-direction:row;padding:8px 14px 2px}
.q-hero-av{width:40px;height:40px}
.q-greet{display:none}
}
/* HOME's Qubit card: the same zone */
.hp-q{background:var(--q-bg);border-color:var(--q-line)}
.hp-q .hp-q-head{border-bottom:1px solid var(--q-band-line);background:linear-gradient(180deg,#0E2A1F66,transparent)}
.hp-q-av{background:none;box-shadow:none}
.hp-q-av svg.qbot{position:absolute;inset:0;width:54px;height:54px;filter:drop-shadow(0 0 12px #62F5E42E)}
.hp-q-name{color:#F2F5F4}
.hp-q .hp-more{color:var(--q)}
.hp-q-watch{padding-top:12px}
.hp-qp{background:var(--q-bubble);border:1px solid var(--q-bubble-line);border-left:3px solid #33403C}
.hp-qp:hover{border-color:#5BE38F55}
.hp-qp.k-setup,.hp-qp.k-plan{border-left-color:var(--q)}
.hp-qp.k-avoid,.hp-qp.k-risk{border-left-color:var(--down)}
.hp-qp.k-macro{border-left-color:var(--amber)}
.hp-qp.k-position{border-left-color:var(--ice)}
.hp-qp-h .k{color:var(--q)}
.hp-qp.k-avoid .hp-qp-h .k,.hp-qp.k-risk .hp-qp-h .k{color:var(--down)}
.hp-qp.k-macro .hp-qp-h .k{color:var(--amber)}
.hp-qp-ti{color:#FFFFFF}
.hp-qp-b{color:var(--q-text)}
.hp-qp-b strong{color:#FFFFFF}
.hp-q-ask{border-top-color:var(--q-line)}
.hp-q-ask input{background:#141A21;border-color:#2C3440}
.hp-q-ask button.solid{background:var(--q);color:#06170E;border-color:var(--q)}
.hp-q-ask button.solid:hover{background:#86F0AE}
/* ================================================================
drop384 - THE iTradeDesk MARK STAYS
Operator, after drop383: "The iTradeDesk should KEEP this look!" - the
drop379 mark (green bars, teal orbit, glowing core) and the wordmark
with its green "i". The brand is iTradeDesk's own; it sits on the
WHISPERS amber chrome by choice, like Qubit's green zone.
================================================================ */
.brand{color:var(--text)}
.brand .bm-w{white-space:nowrap}
.brand .bm-i{color:#00FF88;text-shadow:0 0 14px #00FF8866}
.mark{fill:none;overflow:visible}
.mark .mk-orbit{fill:none;stroke:#14B8B0;stroke-width:1.2;opacity:.85}
.mark .mk-bar{fill:#00FF88}
.mark .mk-core{fill:#B6FFD9;filter:drop-shadow(0 0 3px #00FF88)}
/* ================================================================
drop385 - QUBIT SCORE, DAY REPLAY, POST RATINGS, NEW CONVERSATION
================================================================ */
/* the Desk: rating buttons, the New conversation divider and its fold */
#desk .q-rate{display:flex;justify-content:flex-end;gap:4px;margin:8px -4px -4px 0}
#desk .q-rv{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;padding:0;
background:none;border:1px solid transparent;border-radius:6px;color:#5E6878;cursor:pointer}
#desk .q-rv svg{width:13px;height:13px;fill:currentColor}
#desk .q-rv-dn svg{transform:rotate(180deg)}
#desk .q-rv:hover{color:#B8C4C1;border-color:#33403C}
#desk .q-rv-up.on{color:var(--q);border-color:#5BE38F55;background:#5BE38F14}
#desk .q-rv-dn.on{color:var(--down);border-color:#FF6B6B55;background:#FF6B6B12}
#desk .q-reset{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0;padding:10px 0 4px;
border-top:1px solid var(--q-line)}
#desk .q-reset-l{font:700 10px "Space Grotesk";letter-spacing:.18em;color:var(--q)}
#desk .q-reset-show{font:600 10px "Inter";letter-spacing:.1em;padding:3px 10px}
#desk .q-old:not(.q-shown){display:none}
#desk .q-old.q-shown{opacity:.6}
/* the header now carries NEW CHAT too: keep every control on one line */
#desk .desk-head{flex-wrap:nowrap;min-width:0}
#desk .desk-head .q-name{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
#desk .desk-head .ghost{white-space:nowrap;flex:0 0 auto;padding:5px 9px;font-size:10px;letter-spacing:.08em}
@media (max-width:760px){
#desk .desk-head{gap:6px;padding:10px}
#desk .desk-head .q-name{font-size:11px;letter-spacing:.1em}
#desk .desk-head .ghost{padding:4px 7px}
}
/* SCORECARD: QUBIT SCORE */
.qs-days{background:var(--panel2,#141A21);border:1px solid var(--border);border-radius:6px;color:var(--text);
font:600 11px "Inter";padding:3px 8px}
.qs-v{display:inline-block;font:800 9px "Inter";letter-spacing:.12em;padding:2px 7px;border-radius:4px;
border:1px solid var(--border);color:var(--text)}
.qs-v-high{color:var(--up);border-color:#4ADE8055}
.qs-v-watch{color:#B8C4C1}
.qs-v-avoid{color:var(--down);border-color:#FF6B6B55}
.qs-v-gate{color:var(--amber);border-color:#F5A52455}
.qs-thin,.qs-sh{display:inline-block;margin-left:4px;font:700 8px "Inter";letter-spacing:.1em;color:var(--amber);
border:1px solid #F5A52444;border-radius:3px;padding:0 4px;vertical-align:1px}
.qs-sh{color:#8B94A7;border-color:#33403C}
.camsc-panel .qs-tbl{max-width:none;table-layout:auto}
.camsc-panel .qs-tbl td:first-child,.camsc-panel .qs-tbl th:first-child{width:auto;overflow:visible;white-space:nowrap}
.camsc-panel .qs-tbl td{white-space:nowrap}
.qs-tbl .sc-chg{grid-template-columns:minmax(70px,1fr) 64px;min-width:150px}
.camsc-panel .qr-cmp,.camsc-panel .qr-list{max-width:640px}
.qs-recent{margin-bottom:14px}
.qs-scroll{max-height:460px;overflow:auto}
.qs-scroll thead th{position:sticky;top:0;background:var(--panel,#10151C)}
.qs-rules{margin-bottom:14px}
.qs-rules summary{cursor:pointer;list-style:none}
.qs-rules summary::-webkit-details-marker{display:none}
.qs-rules summary::after{content:" +";color:var(--muted)}
.qs-rules[open] summary::after{content:" \2212"}
.qs-rules .dg-head{margin-top:10px}
.qs-rules .dg-head li{font-size:12.5px}
.qs-guide{margin-top:10px}
.qs-guide button{font:600 10.5px "Inter";letter-spacing:.06em;padding:4px 10px}
/* DAY REPLAY */
.qr-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 10px}
.qr-form select{background:var(--panel2,#141A21);border:1px solid var(--border);border-radius:6px;color:var(--text);
font:600 12px "Inter";padding:5px 8px}
.qr-form .muted{font-size:11.5px}
.qr-live{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:12.5px;color:var(--text)}
.qr-list{margin-bottom:10px}
.qr-cmp{max-width:560px;margin:6px 0 12px}
.qr-f{border-top:1px solid var(--border);padding:8px 0}
.qr-f summary{cursor:pointer;display:flex;gap:10px;align-items:baseline;font-size:12.5px}
.qr-f .qr-n{margin-left:auto;color:var(--muted);font:600 11px "IBM Plex Mono"}
.qr-sides{margin:10px 0 4px}
.qr-p{margin:0 0 10px;font-size:12.5px;color:var(--text);line-height:1.45}
.qr-p .q-kind{font:700 8.5px "Inter";letter-spacing:.12em;border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:#B8C4C1}
.qr-pb{margin-top:4px;color:var(--muted);font-size:12px;white-space:pre-wrap}
@media (max-width:760px){
.qr-form{flex-direction:column;align-items:stretch}
.qs-scroll{max-height:none}
}
/* ================================================================
drop386 - CHECK THIS TRADE
================================================================ */
.q-chk{display:inline-block;margin-left:6px;padding:1px 6px;vertical-align:1px;cursor:pointer;
font:700 8.5px "Inter";letter-spacing:.1em;color:#5BE38F;background:transparent;
border:1px solid #5BE38F55;border-radius:4px;line-height:1.5}
.q-chk:hover{background:#5BE38F1A;border-color:#5BE38F}
@media (max-width:760px){ .q-chk{padding:3px 8px;font-size:9.5px} }
/* ================================================================
drop387 - THE DESK TOOLBAR AND QUBIT'S WATCH, RE-DRAWN
The day picker, NEW CHAT and READ NOW sit with what they act on, just
above the watch list; the watch list is a wrapping grid of small cards
(two rows, SHOW ALL for the rest) instead of a strip that scrolls sideways.
================================================================ */
#desk .q-tools{display:flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;
padding:9px 14px;border-top:1px solid var(--q-line);border-bottom:1px solid var(--q-line);background:var(--q-bg)}
#desk .q-tools .ghost,#desk .q-tools .q-day{white-space:nowrap;padding:5px 11px;font:600 10px "Inter";
letter-spacing:.1em;border-radius:6px}
#desk .q-tools .q-day{background:#141A21;border:1px solid #2C3440;color:#C9D1D9;cursor:pointer}
#desk .q-tools .ghost:hover,#desk .q-tools .q-day:hover{border-color:var(--q);color:#F2F5F4}
#desk .q-statebar{border-bottom:0}
#desk .q-watch{display:block;overflow:visible;padding:10px 14px 12px;flex:0 0 auto;
border-bottom:1px solid var(--q-line);background:var(--q-bg)}
.qw-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-width:0}
.qw-lbl{font:800 9.5px "Space Grotesk";letter-spacing:.16em;color:#8B94A7;white-space:nowrap}
.qw-sum{flex:1;min-width:0;font:500 11px "IBM Plex Mono";color:#6E7787;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qw-toggle{flex:0 0 auto;background:none;border:1px solid #2C3440;border-radius:5px;color:#B8C4C1;cursor:pointer;
font:700 9px "Inter";letter-spacing:.1em;padding:3px 8px}
.qw-toggle:hover{border-color:var(--q);color:#F2F5F4}
.qw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;
max-height:110px;overflow:hidden}
.qw-grid.open{max-height:none}
.qw-card{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;height:52px;
padding:6px 9px;border:1px solid #2C3440;border-radius:8px;background:#121820;color:#E8EAF0;
text-align:left;cursor:pointer}
.qw-card:hover{border-color:var(--q)}
.qw-top{display:flex;align-items:center;gap:5px;width:100%;min-width:0}
.qw-top b{font:700 13px "IBM Plex Mono";letter-spacing:0;white-space:nowrap}
.qw-dir{font-style:normal;font-size:10px}
.qw-dir.up{color:var(--up)} .qw-dir.dn{color:var(--down)}
.qw-top em{margin-left:auto;font:700 8.5px "Inter";letter-spacing:.1em;font-style:normal;color:#8B94A7}
.qw-sub{font:500 10.5px "IBM Plex Mono";color:#8B94A7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.qw-high{border-color:#5BE38F66;background:#5BE38F0F} .qw-high em{color:var(--q)}
.qw-live{border-color:#5CC8FF77;background:#5CC8FF12} .qw-live em{color:var(--ice)}
.qw-avoid{border-color:#FB4E5D55;background:#FB4E5D0D} .qw-avoid em{color:var(--down)}
.qw-off{opacity:.55} .qw-off b{text-decoration:line-through}
#desk .q-tools #q-read,#desk .q-tools #q-new{font:600 10px "Inter";letter-spacing:.1em;padding:5px 11px}
#desk .q-tools #q-read.hidden{display:none}
@media (max-width:760px){
/* a phone keeps its chat: one row of cards, SHOW ALL for the rest */
.qw-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));max-height:52px}
#desk .q-tools{gap:6px;padding:6px 10px}
#desk .q-watch{padding:8px 10px 9px}
.qw-head{margin-bottom:6px}
}
/* SCORECARD -> WEEKLY DIGEST: YOUR COACHING (drop387) */
.dg-coach{margin-bottom:14px}
.dg-coach .cg-stats{display:flex;flex-wrap:wrap;gap:8px 18px;margin:2px 0 12px;font:500 12px "IBM Plex Mono";color:var(--muted)}
.dg-coach .cg-stats b{color:var(--text);font-weight:600}
.dg-coach .cg-title{font:600 15px/1.4 "Inter";color:var(--text);margin:4px 0 8px}
.dg-coach .cg-body{font-size:13.5px;line-height:1.6;color:var(--text)}
.dg-coach .cg-body p{margin:0 0 9px}
.dg-coach .cg-focus{margin:12px 0 4px;padding:10px 13px;border-left:3px solid #A78BFA;border-radius:6px;
background:#A78BFA12;font-size:13px;color:var(--text)}
.dg-coach .cg-focus span{display:block;font:800 9px "Inter";letter-spacing:.14em;color:#A78BFA;margin-bottom:3px}
.dg-coach .cg-meta{margin-top:8px;font-size:11px;color:var(--muted)}
.dg-coach .cg-empty{color:var(--muted);font-size:12.5px;line-height:1.5}
.dg-coach .cg-write{margin-top:10px}
#desk .q-k-coach{border-left-color:#A78BFA}
#desk .q-k-coach .q-kind{color:#C4B5FD;border-color:#A78BFA66}
/* drop388: time zones. A converted New York time keeps ET in its tooltip. */
.lt{text-decoration:underline dotted #8B94A766;text-underline-offset:3px;cursor:help}
#drawer-body .pf-tz{width:100%;margin-bottom:6px;padding:9px 12px;background:var(--panel2);border:1px solid var(--border);
border-radius:6px;color:var(--text);font:14px "Inter"}
#drawer-body .pf-tz-now{font-size:11.5px;line-height:1.5;margin-bottom:6px}
/* drop389: the Desk colour-codes Qubit's posts the way HOME does - the left
edge and the kind chip carry the kind. The drop382 bubble rule
(#desk .msg.ai) out-ranked the old drop376 per-kind edges, so every post
had drawn the same neutral edge; these selectors out-rank it in turn. */
#desk .msg.ai.q-feed{border-left:3px solid #33403C}
#desk .msg.ai.q-k-setup,#desk .msg.ai.q-k-plan{border-left-color:var(--q)}
#desk .msg.ai.q-k-avoid,#desk .msg.ai.q-k-risk{border-left-color:var(--down)}
#desk .msg.ai.q-k-macro{border-left-color:var(--amber)}
#desk .msg.ai.q-k-position{border-left-color:var(--ice)}
#desk .msg.ai.q-k-coach{border-left-color:#A78BFA}
#desk .q-feed .q-kind{color:var(--q);border-color:#5BE38F55}
#desk .q-k-avoid .q-kind,#desk .q-k-risk .q-kind{color:var(--down);border-color:#FB4E5D66}
#desk .q-k-macro .q-kind{color:var(--amber);border-color:#F5A52466}
#desk .q-k-position .q-kind{color:var(--ice);border-color:#5CC8FF66}
#desk .q-k-coach .q-kind{color:#C4B5FD;border-color:#A78BFA66}
/* drop390: the whole card takes the kind's colour too - a faint wash and a
tinted outline - on the Desk and on HOME alike */
#desk .msg.ai.q-k-setup,#desk .msg.ai.q-k-plan,.hp-qp.k-setup,.hp-qp.k-plan{background:#5BE38F0D;border-color:#5BE38F3D}
#desk .msg.ai.q-k-avoid,#desk .msg.ai.q-k-risk,.hp-qp.k-avoid,.hp-qp.k-risk{background:#F871710F;border-color:#F8717147}
#desk .msg.ai.q-k-macro,.hp-qp.k-macro{background:#F5A5240F;border-color:#F5A52447}
#desk .msg.ai.q-k-position,.hp-qp.k-position{background:#5CC8FF0D;border-color:#5CC8FF3D}
#desk .msg.ai.q-k-coach,.hp-qp.k-coach{background:#A78BFA0F;border-color:#A78BFA47}
#desk .msg.ai.q-k-setup,#desk .msg.ai.q-k-plan,.hp-qp.k-setup,.hp-qp.k-plan{border-left-color:var(--q)}
#desk .msg.ai.q-k-avoid,#desk .msg.ai.q-k-risk,.hp-qp.k-avoid,.hp-qp.k-risk{border-left-color:var(--down)}
#desk .msg.ai.q-k-macro,.hp-qp.k-macro{border-left-color:var(--amber)}
#desk .msg.ai.q-k-position,.hp-qp.k-position{border-left-color:var(--ice)}
#desk .msg.ai.q-k-coach,.hp-qp.k-coach{border-left-color:#A78BFA}
.hp-qp.k-setup:hover,.hp-qp.k-plan:hover{border-color:#5BE38F80}
.hp-qp.k-avoid:hover,.hp-qp.k-risk:hover{border-color:#F8717180}
.hp-qp.k-macro:hover{border-color:#F5A52480}
.hp-qp.k-position:hover{border-color:#5CC8FF80}