/* StrikeBench — shared design system. One source of truth for tokens, resets, and base primitives. Every surface links this; change here and it applies everywhere. */ @layer reset,tokens,primitives,components,surfaces,responsive,utilities; @layer tokens{ :root{ color-scheme:dark; --ground:#080B11; --panel:#10151E; --panel-2:#0C111A; --setup:#0A0F17; --nav:#070A0F; --bg:var(--ground); --line:#1F2836; --line-soft:#161D28; --text:#EDF1F8; --dim:#8C97A9; --faint:#5B6577; --accent:#39C7D4; --accent-2:#1c5c63; --accent-wash:rgba(57,199,212,.10); --profit:#41C892; --loss:#F35D64; --caution:#E7AC44; --violet:#9B8CFF; --series-1:var(--accent); --series-2:var(--violet); --series-3:var(--profit); --series-4:var(--caution); --series-5:#F08CD0; --series-6:#6B96EF; --series-7:#D3C86B; --series-8:#FF9B6B; --profit-wash:rgba(65,200,146,.15); --loss-wash:rgba(243,93,100,.15); --caution-wash:rgba(231,172,68,.12); --violet-wash:rgba(155,140,255,.16); --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --fs:1; --f-2xs:clamp(10.4px,calc(8.8px + .13vw),12px); --f-xs:clamp(11px,calc(9.3px + .14vw),12.9px); --f-sm:clamp(12.7px,calc(10.7px + .16vw),14.8px); --f-base:clamp(14.2px,calc(12.2px + .16vw),16.5px); --f-md:clamp(15.5px,calc(13.2px + .19vw),18.1px); --f-lg:clamp(17.2px,calc(14.4px + .22vw),20.2px); --f-xl:clamp(19px,calc(15.7px + .26vw),22.3px); --f-num:var(--f-base); /* One palette for every panel, control and data row. Surface rules choose a role; they do not invent another near-black. */ --surface-detail:linear-gradient(180deg,#0E141D,#0A0F17); --surface-top:linear-gradient(#0C121B,#0A0F17); --surface-raised:linear-gradient(180deg,var(--panel),var(--panel-2)); --surface-control:#0D131C; --surface-control-raised:#0E141D; --surface-control-strong:#131A24; --surface-control-selected:#0F1C22; --surface-input:#0B1017; --surface-canvas:#0B0F16; --surface-table-head:#0A0F16; --surface-row-hot:#132030; --surface-accent-tail:#0D1720; --track:#18212E; --line-hover:#33465C; --line-strong:#39465B; --scroll-thumb:#242E3D; --ink-on-accent:#06212A; --ink-on-accent-deep:#04222A; --ink-on-violet:#0A0F18; --accent-deep:#1FA1AE; --caution-deep:#8A6620; --brand-mark:conic-gradient(from 210deg,var(--accent),#237E86 55%,#123A3F); --raise:var(--surface-raised); --panel-detail:var(--surface-detail); --grad-top:var(--surface-top); --raise-sheen:inset 0 1px 0 rgba(255,255,255,.02); /* One interaction grammar. */ --row-hover:#101823; --sel-wash:linear-gradient(90deg,var(--accent-wash),transparent 70%); --sel-bar:inset 2px 0 0 var(--accent); --pop-surface:var(--surface-control-raised); --tip-surface:#161D29; --pop-shadow:0 14px 34px #000b; --tip-shadow:0 6px 18px #0008; --focus-ring:0 0 0 3px var(--accent-wash); --control-hit:26px; --control-hit-touch:44px; --control-radius:6px; --row-radius:7px; --panel-radius:9px; --mo-dur:340ms; --mo-ease:cubic-bezier(.22,.68,.28,1); --mo-quick:140ms; } :root[data-theme="light"]{ color-scheme:light; --ground:#F2F6F9; --panel:#FFFFFF; --panel-2:#F7F9FC; --setup:#F5F8FA; --nav:#EAF0F4; --bg:var(--ground); --line:#C9D4DF; --line-soft:#DFE6ED; --text:#182437; --dim:#536176; --faint:#647287; --accent:#087E8B; --accent-2:#79C7CF; --accent-wash:rgba(8,126,139,.10); --profit:#087A54; --loss:#C93643; --caution:#946100; --violet:#6554C0; --series-1:var(--accent); --series-2:var(--violet); --series-3:var(--profit); --series-4:var(--caution); --series-5:#B83280; --series-6:#3568C8; --series-7:#817700; --series-8:#C25227; --profit-wash:rgba(8,122,84,.12); --loss-wash:rgba(201,54,67,.11); --caution-wash:rgba(148,97,0,.10); --violet-wash:rgba(101,84,192,.11); --surface-detail:linear-gradient(180deg,#FFFFFF,#F5F8FA); --surface-top:linear-gradient(#FFFFFF,#F4F7FA); --surface-raised:linear-gradient(180deg,var(--panel),var(--panel-2)); --surface-control:#F1F5F8; --surface-control-raised:#F7F9FB; --surface-control-strong:#EAF0F5; --surface-control-selected:#DFF1F3; --surface-input:#FFFFFF; --surface-canvas:#FFFFFF; --surface-table-head:#EDF2F6; --surface-row-hot:#E4F1F5; --surface-accent-tail:#EAF6F7; --track:#DCE5EC; --line-hover:#8DA0B4; --line-strong:#71849A; --scroll-thumb:#A5B2C0; --ink-on-accent:#F7FFFF; --ink-on-accent-deep:#FFFFFF; --ink-on-violet:#FFFFFF; --accent-deep:#056974; --caution-deep:#775000; --brand-mark:conic-gradient(from 210deg,var(--accent),#2E9CA7 55%,#8ED8DE); --raise-sheen:inset 0 1px 0 rgba(255,255,255,.88); --row-hover:#E9F0F5; --sel-wash:linear-gradient(90deg,var(--accent-wash),transparent 70%); --pop-surface:#FFFFFF; --tip-surface:#FFFFFF; --pop-shadow:0 14px 34px rgba(20,34,52,.18); --tip-shadow:0 6px 18px rgba(20,34,52,.14); --focus-ring:0 0 0 3px rgba(8,126,139,.13); } } @layer reset{ *{box-sizing:border-box} html,body{margin:0;height:100%} body{background:var(--ground);color:var(--text);font-family:var(--sans);font-size:var(--f-base);line-height:1.42;-webkit-font-smoothing:antialiased;overflow:hidden} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.2px} .pos{color:var(--profit)} .neg{color:var(--loss)} .warn{color:var(--caution)} .dim{color:var(--dim)} .lbl{font-size:var(--f-xs);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:600} button{font-family:inherit;color:inherit;cursor:pointer;background:transparent;border:0;appearance:none;-webkit-appearance:none} :focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:5px;border:2px solid var(--ground)} } @layer primitives{ /* buttons + segmented control — one primary definition (was drifting per file) */ .btn{border:1px solid var(--line);background:var(--surface-control-strong);color:var(--text);padding:9px 15px;border-radius:var(--control-radius);font-weight:600;font-size:var(--f-base)} .btn:hover{border-color:var(--line-hover)} .btn.pri{background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:var(--ink-on-accent);border-color:transparent;box-shadow:0 6px 18px -8px rgba(57,199,212,.55)} .btn.pri:hover{filter:brightness(1.06)} .seg{display:flex;gap:3px} .seg button{position:relative;border:1px solid var(--line);background:var(--surface-control-raised);color:var(--dim);border-radius:5px;padding:5px 11px;font-size:var(--f-sm);font-weight:600} .seg button.on{border-color:var(--accent-2);background:var(--surface-control-selected);color:var(--text)} /* seg tooltip reconciled (#39): appearance now inherits from base .tip / .tip.sm; only the seg-anchored positioning + hover reveal stay scoped here. (seg tooltip markup should carry class="tip sm" to pick up the small variant.) */ .seg button .tip{left:50%;top:calc(100% + 6px);transform:translateX(-50%)} .seg button:hover .tip{opacity:1} /* ===================================================================== primary COMPONENT LIBRARY (numbers map to _plan.md #1–#46) ===================================================================== */ /* --------------------------------------------------------------------- SHELL (#1–#10) --------------------------------------------------------------------- */ /* #1 .top — top-bar frame */ .top{display:flex;align-items:stretch;height:44px;background:var(--grad-top);border-bottom:1px solid var(--line)} .top>div{display:flex;align-items:center} /* #2 .brand — wordmark */ .brand{display:flex;align-items:center;gap:8px;padding:0 13px;border-right:1px solid var(--line-soft)} .brand .mk{width:20px;height:20px;border-radius:5px;background:var(--brand-mark)} .brand b{font-weight:700;font-size:var(--f-md)} /* #3 .rail + .nav — nav rail (hoisted verbatim from home.html; .nav .tip flyout POSITIONING stays per-file per §6, only shared tooltip appearance lives in base .tip #39) */ .rail{background:var(--nav);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:3px} .nav{position:relative;width:40px;height:40px;border:0;background:0;border-radius:8px;color:var(--dim);display:flex;align-items:center;justify-content:center} .nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7} .nav:hover{background:var(--row-hover);color:var(--text)} .nav.on{background:var(--accent-wash);color:var(--accent)} .nav.on::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--accent)} .rail .gap{flex:1} .rail a.nav{text-decoration:none;color:var(--dim)} .rail a.nav.on{color:var(--accent)} @media (max-width:980px){ .rail{flex-direction:row;height:48px;width:auto;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;padding:6px 8px;gap:4px} .rail .gap{display:none} .nav{flex:none} } /* #4 .fields — editable-field strip container */ .fields{display:flex;flex:1;overflow:hidden} /* #5 .fld — editable field (button-reset folded in so it serves button + div) */ .fld{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:0 13px;cursor:pointer;position:relative;background:0;border:0;border-right:1px solid var(--line-soft);text-align:left} .fld .k{font-family:var(--sans);font-size:var(--f-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:0;background:0} /* fully self-styled: neutralizes both the tile-cell .k (padding/bg) and the span.k (mono) bleeds */ .fld .v{display:flex;align-items:center;gap:5px;font-weight:600;font-size:var(--f-base)} .fld .v .car{color:var(--dim);font-size:var(--f-2xs)} /* #6 .tkr — ticker block */ .tkr{display:flex;align-items:center;gap:9px;padding:0 13px;border-right:1px solid var(--line-soft)} .tkr .spark{width:52px;height:20px} /* #7 .acct — account block */ .acct{display:flex;align-items:center;gap:14px;padding:0 13px;border-left:1px solid var(--line-soft)} .acct .m{text-align:right} .acct .m .v{font-family:var(--mono);font-weight:600;font-size:var(--f-base)} /* #8 .scale — density control (shared .scale button/:hover transcribed from home.html) */ .scale{display:flex;align-items:center;border-left:1px solid var(--line-soft);padding-right:4px} .scale button{border:0;background:0;color:var(--dim);width:32px;height:100%;font-size:var(--f-lg);font-weight:600} .scale button:hover{background:var(--surface-control-selected);color:var(--accent)} .scale .a{font-size:var(--f-xs);color:var(--faint)} /* #9 .mtog — mobile toggle hook */ .mtog{display:none} /* #10 .nscope — borderless scope toggle */ .nscope{display:flex;gap:3px;margin-left:auto} .nscope button{border:1px solid transparent;background:0;color:var(--faint);padding:2px 7px;font-size:var(--f-2xs);font-weight:700;border-radius:4px} .nscope button.on{background:var(--accent-wash);color:var(--accent);border-color:var(--accent-2)} /* --------------------------------------------------------------------- CONTAINERS (#11–#19) --------------------------------------------------------------------- */ /* #11 .pane */ .pane{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden} /* #12 .ph — pane header (distinct from .ch2 — false-twin) */ .ph{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);flex:none} .ph h2{margin:0;font-size:var(--f-md);font-weight:700;letter-spacing:.01em} .ph .r{margin-left:auto;color:var(--dim);font-size:var(--f-sm)} /* #13 .ch2 — inner card/band header (distinct from .ph and .mh) */ .ch2{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--line);flex:none} .ch2 .lbl{color:var(--dim)} .ch2 .scope{margin-left:auto;color:var(--faint);font-size:var(--f-2xs);letter-spacing:.02em;text-align:right} .ch2 .scope b{color:var(--dim)} /* #14 .mh — map/chart header (no border, floats over SVG) */ .mh{display:flex;align-items:center;gap:8px;padding:7px 13px;flex:none} .mh .lbl{color:var(--dim)} .mh .leg{margin-left:auto} /* #15 .sec — labeled section band (.sec .hint retired → use bare .hint #41) */ .sec{padding:11px 13px;border-bottom:1px solid var(--line-soft)} .sec>.lbl{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px} .sec.tight>.lbl{margin-bottom:6px} /* optional: preserve compose .bsec tighter inner gap */ /* #16 .pane-setup / .pane-center — side-pane wrappers (added as helper classes) */ .pane-setup{background:var(--setup);border-right:1px solid var(--line)} .pane-center{background:var(--panel-2);border-left:1px solid var(--line)} /* #17 .box — card with hairline header (base flat; lift via .raised) */ .box{border:1px solid var(--line);border-radius:7px;background:var(--panel);overflow:hidden} .box>.bh{display:flex;align-items:center;gap:7px;padding:7px 11px;border-bottom:1px solid var(--line-soft)} .box>.bh .r{margin-left:auto} .box.raised{background:var(--raise);box-shadow:var(--raise-sheen)} /* #18 .dcols — detail column grid */ .dcols{flex:1;min-height:0;display:grid;overflow:auto} .dc{padding:11px;display:flex;flex-direction:column;gap:10px} .dc-pay{border-right:1px solid var(--line-soft)} /* #19 .dhead — detail-column header wrapper (+.compact for single-row) */ .dhead{padding:9px 13px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:9px;flex:none} .dhead.compact{gap:0} /* --------------------------------------------------------------------- CONTROLS (#20–#23) --------------------------------------------------------------------- */ /* #20 .lvl .lseg — Beginner/Expert level toggle (primary weight 700, accent-wash .on) */ .lvl{display:flex;align-items:center;gap:0;border-left:1px solid var(--line-soft);padding:0 8px} .lvl .lseg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden} .lvl .lseg button{border:0;background:var(--surface-control-raised);color:var(--dim);padding:5px 10px;font-size:var(--f-sm);font-weight:700;border-right:1px solid var(--line-soft)} .lvl .lseg button:last-child{border-right:0} .lvl .lseg button.on{background:var(--accent-wash);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)} /* #21 .dial — joined equal-width 3-way selector (unscoped) */ .dial{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--line);border-radius:5px;overflow:hidden} .dial button{padding:8px 0;background:var(--panel-2);font-weight:600;border-right:1px solid var(--line)} .dial button:last-child{border-right:0} .dial button.on{background:var(--accent-wash);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)} /* #22 .slider — range slider (hoisted verbatim from plan-desk .setup .slider, de-scoped; ::-moz-range-thumb added to match ::-webkit-slider-thumb) */ .slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--line);margin:2px 0} .slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--ground);cursor:pointer} .slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--ground);cursor:pointer} } @layer components{ /* One optical icon/control geometry. The DOM keeps readable Unicode fallbacks, while CSS draws the visible marks from fixed geometry so +, −, play and pause do not drift with font metrics. */ .iconbtn,.playb,.microcta{ position:relative;display:inline-grid;place-items:center;flex:none; inline-size:var(--control-hit);block-size:var(--control-hit);min-inline-size:var(--control-hit); padding:0;border:1px solid var(--line); background:var(--surface-control-raised);color:var(--dim);cursor:pointer } .iconbtn,.microcta{border-radius:var(--control-radius)} .iconbtn:hover,.playb:hover,.microcta:hover{border-color:var(--accent-2);color:var(--accent)} .iconbtn:disabled,.playb:disabled,.microcta:disabled{cursor:default;opacity:.45} .playb{border-radius:50%;border-color:var(--accent-2);font-size:0} .playb::before{ content:"";display:block;width:0;height:0;margin-left:2px; border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor } .playb::after{content:"";display:none} .playb.on{background:var(--accent);border-color:var(--accent);color:var(--ink-on-accent-deep)} .playb.on::before,.playb.on::after{ display:block;position:absolute;top:50%;width:3px;height:10px;border:0;background:currentColor; transform:translateY(-50%) } .playb.on::before{content:"";left:calc(50% - 4px);margin:0} .playb.on::after{content:"";left:calc(50% + 2px)} .mstp{ --step-value-min:34px; display:inline-flex;align-items:center;min-block-size:var(--control-hit); border:1px solid var(--line);border-radius:var(--control-radius);overflow:hidden; background:var(--surface-control) } .mstp .ml{font-size:var(--f-xs);color:var(--faint);padding:0 5px;letter-spacing:.04em;text-transform:uppercase} .mstp>button{ position:relative;display:inline-grid;place-items:center; inline-size:var(--control-hit);block-size:var(--control-hit);min-inline-size:var(--control-hit); padding:0;border:0;border-left:1px solid var(--line-soft); background:var(--surface-control-raised);color:var(--dim);font-size:0 } .mstp>button:hover{background:var(--surface-control-selected);color:var(--accent)} .mstp>button::before,.mstp>button::after{ content:"";position:absolute;left:50%;top:50%;border-radius:1px; background:currentColor;transform:translate(-50%,-50%) } .mstp>button::before{width:9px;height:1.5px} .mstp>button::after{display:none;width:1.5px;height:9px} .mstp>button[data-d="1"]::after,.mstp>button[data-wf$="up"]::after{display:block} .mstp .mv{ min-width:var(--step-value-min);padding:0 3px;text-align:center; color:var(--text);font-family:var(--mono);font-size:var(--f-sm) } /* ScenarioSpectrum owns its complete internal grammar here. Surfaces may place and size the panel, but they do not restyle tiles or playback controls by route or viewport. The component responds to its own inline size, so New Idea and Position render the same facts the same way. */ .scenpanel{ container:scenario-spectrum / inline-size; display:flex;flex:none;flex-direction:column;gap:7px;min-width:0;min-height:0 } .scenpanel .smx.barmode{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:5px 0 } .scenpanel .srow{ position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name odds" "pl value";align-items:center; column-gap:4px;row-gap:2px;min-width:0;min-height:36px;padding:3px 5px; overflow:hidden;border:1px solid transparent;border-radius:7px; background:transparent;color:inherit;text-align:left;cursor:pointer;font-size:var(--f-sm); transition:background var(--mo-quick) var(--mo-ease),border-color var(--mo-quick) var(--mo-ease),transform var(--mo-quick) var(--mo-ease) } .scenpanel .srow:hover,.scenpanel .srow.hot{background:var(--row-hover)} .scenpanel .srow:hover{border-color:var(--line);transform:translateY(-1px)} .scenpanel .srow .sn{ grid-area:name;display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:center;gap:2px;min-width:0 } .scenpanel .srow .sn .snm{ display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--text);font-size:var(--f-xs);font-weight:650;line-height:1.2 } .scenpanel .srow .sn .snfull{display:block} .scenpanel .srow .sn .snshort{display:none} .scenpanel .srow .sn .smv{ flex:none;font-family:var(--mono);font-size:var(--f-xs);line-height:1 } .scenpanel .scenarioodds{ grid-area:odds;display:flex;justify-self:end;align-items:center;gap:3px;min-width:0 } .scenpanel .scenarioodds .sprob{ font-family:var(--mono);font-size:var(--f-2xs);color:var(--dim);line-height:1 } .scenpanel .scenarioodds .cg{width:12px;height:11px;flex:none;opacity:.6} .scenpanel .srow .sdesc,.scenpanel .srow .slk,.scenpanel .srow .splay{display:none} .scenpanel .srow .smv.up{color:var(--profit)} .scenpanel .srow .smv.dn{color:var(--loss)} .scenpanel .srow .smv.fl{color:var(--faint)} .scenpanel .srow .sbw{ grid-area:pl;position:relative;height:12px; border:1px solid var(--line-soft);border-radius:3px;background:var(--surface-control) } .scenpanel .srow .sbw::before{ content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--faint) } .scenpanel .srow .sb{position:absolute;top:1px;bottom:1px;border-radius:2px} .scenpanel .srow .sb.p{left:50%;background:var(--profit)} .scenpanel .srow .sb.n{right:50%;background:var(--loss)} .scenpanel .srow .sv{ grid-area:value;min-width:62px;text-align:right;font-family:var(--mono);font-weight:650 } .scenpanel .srow.best{background:rgba(65,200,146,.09)} .scenpanel .srow.best .snm{color:var(--profit)} .scenpanel .srow.worst{background:rgba(243,93,100,.09)} .scenpanel .srow.worst .snm{color:var(--loss)} .scenpanel .srow.likely{ border-color:rgba(70,213,181,.45);box-shadow:inset 2px 0 0 var(--accent) } .scenpanel .srow.live{ background:var(--accent-wash);box-shadow:inset 2px 0 0 var(--accent) } .scenpanel .srow.live .snm{color:var(--accent)} .scenpanel .srow.pinned{ background:var(--accent-wash);border-color:var(--accent-2); box-shadow:inset 2px 0 0 var(--accent) } .scenpanel .srow.pinned .snm{color:var(--accent)} .scenpanel .srow-ctl{ grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr); grid-template-areas:"play" "steps";align-items:center;gap:6px; min-width:0;max-width:100%;margin-top:6px;padding:5px 6px; border:1px solid var(--line-soft);border-left:2px solid var(--accent); border-radius:7px;background:var(--surface-control);cursor:default; transition:border-color var(--mo-quick) var(--mo-ease),background var(--mo-quick) var(--mo-ease) } .scenpanel .srx-read{ font-size:var(--f-2xs);color:var(--dim);line-height:1.35;text-align:center; display:flex;align-items:center;gap:5px } .scenpanel .srx-read b{color:var(--text)} .scenpanel .srx-read b.pos{color:var(--profit)} .scenpanel .srx-read b.neg{color:var(--loss)} .scenpanel .scenplay{ grid-area:play;display:flex;align-items:center;gap:6px;min-width:0;max-width:100%; padding:0;border:0;border-radius:6px;background:transparent } .scenpanel .scenplay .playb{transition:background .12s,color .12s} .scenpanel .scenplay .tk{ flex:none;white-space:nowrap;color:var(--dim); font-family:var(--mono);font-size:var(--f-2xs);letter-spacing:.02em } .scenpanel .scenplay .tk.now,.scenpanel .scenplay .tk.end{display:none} .scenpanel .scenplay .tk.pos{color:var(--profit)} .scenpanel .scenplay .tk.neg{color:var(--loss)} .scenpanel .scenplay .scrub{ flex:1;min-width:32px;block-size:var(--control-hit);margin:0; -webkit-appearance:none;appearance:none;border-radius:3px;cursor:pointer; background:linear-gradient(90deg,var(--accent-2),var(--accent)) center/100% 4px no-repeat } .scenpanel .scenplay .scrub::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%; background:var(--text);border:2px solid var(--accent);cursor:grab; box-shadow:0 1px 3px rgba(0,0,0,.5) } .scenpanel .scenplay .scrub::-moz-range-thumb{ width:14px;height:14px;border-radius:50%;background:var(--text); border:2px solid var(--accent);cursor:grab } .scenpanel .scenplay .scrub:active::-webkit-slider-thumb{cursor:grabbing} .scenpanel .scenplay .spd{ flex:none;display:inline-flex;border:1px solid var(--line-soft); border-radius:5px;overflow:hidden } .scenpanel .scenplay .spd button{ inline-size:var(--control-hit);block-size:var(--control-hit);min-inline-size:var(--control-hit); padding:0;border:0;border-left:1px solid var(--line-soft); background:var(--surface-control-raised);color:var(--dim); font-family:var(--mono);font-size:var(--f-2xs);cursor:pointer } .scenpanel .scenplay .spd button:first-child{border-left:0} .scenpanel .scenplay .spd button.on{background:var(--accent-2);color:var(--text)} .scenpanel .smstps{ grid-area:steps;display:flex;align-items:center;justify-content:flex-start; flex-wrap:wrap;gap:5px;min-width:0;max-width:100% } .scenpanel .smstps .mstp{flex:none;border-radius:5px} .scenpanel .smstps .mstp .ml{padding:0 6px} .scenpanel .smstps .mstp .mv{ min-width:38px;padding:0 3px;font-size:var(--f-2xs) } .scenpanel .smstps .mstp .mv.pos{color:var(--profit)} .scenpanel .smstps .mstp .mv.neg{color:var(--loss)} .scenpanel .smstps .mstp .mv.warn{color:var(--caution)} .scenpanel .smstps .tunit{display:inline-flex;border-left:1px solid var(--line-soft)} .scenpanel .smstps .tunit button{ inline-size:var(--control-hit);block-size:var(--control-hit); padding:0;border:0;border-left:1px solid var(--line-soft); background:var(--surface-control-raised);color:var(--dim); font-family:var(--mono);font-size:var(--f-2xs);cursor:pointer;text-transform:uppercase } .scenpanel .smstps .tunit button:first-child{border-left:0} .scenpanel .smstps .tunit button.on{background:var(--accent-2);color:var(--text)} .scenpanel .scenmatch{ margin-left:auto;color:var(--faint);font:700 var(--f-2xs)/1 var(--mono);white-space:nowrap } .scenpanel .scenmatch.neg{color:var(--loss)} .scenpanel .microcta.iconbtn{border-radius:50%;font-size:0} .scenpanel .microcta.iconbtn::before,.scenpanel .microcta.iconbtn::after{ content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px; border-radius:1px;background:currentColor } .scenpanel .microcta.iconbtn::before{transform:translate(-50%,-50%) rotate(45deg)} .scenpanel .microcta.iconbtn::after{transform:translate(-50%,-50%) rotate(-45deg)} .scenpanel .customstory{ grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:6px 9px; border:1px solid var(--accent-2);border-radius:8px;background:var(--accent-wash) } .scenpanel .customstory .csdot{ width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none; box-shadow:0 0 0 3px rgba(57,199,212,.15) } .scenpanel .customstory .cslbl{ display:flex;align-items:baseline;gap:7px;min-width:0;font-size:var(--f-xs);color:var(--dim) } .scenpanel .customstory .cslbl b{color:var(--text)} .scenpanel .customstory .cslbl span{ min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .scenpanel .scensum{ display:flex;align-items:baseline;flex-wrap:wrap;gap:9px 18px; margin-top:0;padding:7px 2px 1px;border-top:1px solid var(--line-soft);font-size:var(--f-sm) } .scenpanel .scensum .e{display:flex;align-items:baseline;gap:7px} .scenpanel .scensum .e .lbl{margin-bottom:1px} .scenpanel .scensum .e .v{font-family:var(--mono);font-weight:600} .scenpanel .scensum .range{margin-left:auto} .scenpanel .scensum .sumshort{display:none} @container scenario-spectrum (min-width:900px){ .scenpanel .srow-ctl{ grid-template-columns:minmax(180px,1fr) auto; grid-template-areas:"play steps";gap:8px } .scenpanel .smstps{flex-wrap:nowrap} } @container scenario-spectrum (max-width:800px){ .scenpanel .srow{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name name" "pl value" } .scenpanel .srow .sn{gap:3px;overflow:hidden;padding-right:56px} .scenpanel .srow .sn .snm{ white-space:normal;overflow:visible;text-overflow:clip;line-height:1.1 } .scenpanel .scenarioodds{position:absolute;right:6px;top:5px} } @container scenario-spectrum (min-width:501px) and (max-width:800px){ /* A four-column spectrum in a 601–800px owner has room for all eight stories and the complete playback controls, but not for the roomy two-row control grammar used by narrower/mobile owners. Compact the shared component by its own measured width; routes and viewport bands do not get separate copies of this decision. */ .scenpanel{ --upanel-pad:7px 10px;--upanel-lens-gap:0; gap:4px } .scenpanel .smx.barmode{margin:2px 0} .scenpanel .srow{ grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"name name name" "pl odds value"; min-height:32px;padding:2px 5px;row-gap:2px } .scenpanel .srow .sn{display:block;overflow:hidden;padding-right:0} .scenpanel .srow .sn .snm{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1 } .scenpanel .srow .sn .smv{position:absolute;left:5px;bottom:4px} .scenpanel .srow .sbw{margin-left:32px} .scenpanel .scenarioodds{position:static} .scenpanel .srow-ctl{ grid-template-columns:minmax(110px,1fr) auto;grid-template-areas:"play steps"; align-items:center;gap:4px;margin-top:3px;padding:3px 4px } .scenpanel .scenplay{gap:4px} .scenpanel .scenplay .scrub{min-width:24px;block-size:22px} .scenpanel .scenplay .spd button{ inline-size:22px;block-size:22px;min-inline-size:22px } .scenpanel .smstps{flex-wrap:nowrap;gap:3px} .scenpanel .smstps .mstp .ml{padding-inline:3px} .scenpanel .smstps .mstp .mv{min-width:30px;padding-inline:2px} .scenpanel .smstps .mstp>button, .scenpanel .smstps .tunit button{inline-size:22px;block-size:22px;min-inline-size:22px} .scenpanel .scenmatch{font-size:9px} } @container scenario-spectrum (max-width:500px){ .scenpanel .smx.barmode{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .scenpanel .srow{min-height:58px} } } @layer primitives{ /* --------------------------------------------------------------------- CHIPS / BADGES (#24–#28) --------------------------------------------------------------------- */ /* #24 .chip — selectable filter/scope chip (base radius 20; modifiers override radius) */ .chip{border:1px solid var(--line);background:var(--surface-control);color:var(--dim);border-radius:var(--control-radius);padding:4px 10px;font-size:var(--f-sm);font-weight:600;cursor:pointer} .chip.on{border-color:var(--accent-2);background:var(--accent-wash);color:var(--accent)} .chip.mono{font-family:var(--mono);border-radius:5px} /* data .symchip ticker chips */ .chip.rm{padding:2px 4px 2px 8px} /* plan-desk .cmpchip removable token */ /* #25 .chip.regime — market-regime marker */ .chip.regime{font-size:var(--f-xs);font-weight:600;padding:3px 8px;border-radius:3px;border:1px solid var(--accent-2);color:var(--accent);background:var(--accent-wash);cursor:default} /* #26 .badge — status/context pill (base = accent outline; .ok/.warn/.bad = filled) */ .badge{font-size:var(--f-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent-2);padding:2px 8px;border-radius:5px;white-space:nowrap} .badge.ok {color:var(--profit); background:var(--profit-wash); border-color:var(--profit)} .badge.warn{color:var(--caution);background:var(--caution-wash); border-color:var(--caution)} .badge.bad {color:var(--loss); background:var(--loss-wash); border-color:var(--loss)} .badge.num {font-family:var(--mono)} /* #27 .atag — alert severity micro-tag (bg set inline via JS TAGBG[]) */ .atag{font-size:var(--f-2xs);letter-spacing:.05em;text-transform:uppercase;font-weight:700;padding:1.5px 5px;border-radius:3px} /* #28 .eyebrow — accent micro-label (renamed from .tag to kill collision) */ .eyebrow{font-size:var(--f-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700} /* --------------------------------------------------------------------- TABLES / ROWS (#29–#33) --------------------------------------------------------------------- */ /* #29 table.mx — dense sortable table (core from plan-desk td 6px 8px / th 7px 8px; modifiers tr.dis/.grp/td.attn + wide header tooltip from portfolio; stray 2nd position:sticky removed; hover→--row-hover, selection→--sel-wash/--sel-bar) */ table.mx{width:100%;border-collapse:collapse;font-size:var(--f-base)} table.mx thead th{position:sticky;top:0;z-index:2;background:var(--surface-table-head);text-align:right;padding:7px 8px;font-size:var(--f-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap} table.mx thead th.l{text-align:left} table.mx thead th:hover{color:var(--dim)} table.mx thead th.srt{color:var(--accent)} table.mx tbody tr{border-bottom:1px solid var(--line-soft);cursor:pointer} table.mx tbody tr:hover, table.mx tbody tr.hot{background:var(--row-hover)} table.mx tbody tr.sel{background:var(--sel-wash);box-shadow:var(--sel-bar)} table.mx tbody tr.dis{opacity:.34} table.mx tbody tr.grp td{background:var(--surface-table-head);color:var(--faint);font-size:var(--f-2xs);letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:5px 8px;cursor:default} table.mx td{padding:6px 8px;text-align:right;white-space:nowrap} table.mx td.l{text-align:left} table.mx td.attn{position:relative} /* wide header-cell tooltip: appearance from base .tip + .tip.wide (#39); anchor + th-context typography reset stay with the table (folds portfolio .thtip → .tip.wide) */ table.mx thead th .thi{position:relative} table.mx thead th .tip.wide{left:0;top:calc(100% + 5px);font-weight:500;letter-spacing:0;text-transform:none} table.mx thead th:hover .tip.wide{opacity:1} /* #30 .snm / .slg — ticker + sub-label cell helpers (slg keeps 10px to preserve pixels) */ .snm{font-weight:600} .slg{color:var(--faint);font-family:var(--mono);font-size:var(--f-xs)} /* #31 .is-sel — shared selected-row grammar (sourced from same tokens as table tr.sel) */ .is-sel{background:var(--sel-wash);box-shadow:var(--sel-bar)} /* #32 .nitem — feed/news/alert row (primary from home; dot settled at 6px) */ .nitem{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:8px 12px;border-bottom:1px solid var(--line-soft)} .nitem:hover{background:var(--row-hover)} .nitem.wide{grid-template-columns:auto 1fr auto} /* data 3-col */ .sdot{width:6px;height:6px;border-radius:50%} /* feed-row content sub-labels (structure transcribed from home; content-category colors stay file-local) */ .nitem .scp{display:inline-block;font-size:var(--f-2xs);letter-spacing:.05em;text-transform:uppercase;font-weight:700;padding:1px 5px;border-radius:3px;margin-right:6px;vertical-align:1.5px} .nitem .ht{font-size:var(--f-sm);line-height:1.36;color:var(--text)} .nitem .mt{margin-top:3px;font-size:var(--f-xs);color:var(--faint)} /* #33 .kv — label:value readout row (+.ruled) */ .kv{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:var(--f-sm);color:var(--dim)} .kv .num{font-family:var(--mono);color:var(--text);font-weight:500} .kv .num.pos{color:var(--profit)} .kv .num.neg{color:var(--loss)} .kv .num.warn{color:var(--caution)} /* P/L semantics must survive .kv .num text-color */ .kv.ruled{border-top:1px solid var(--line-soft)} /* portfolio .trow tax rows */ /* --------------------------------------------------------------------- TILES (#34–#36) --------------------------------------------------------------------- */ /* #34 .kgrid + .k — KPI/stat tile grid (column count stays inline; .lg opt-in for f-lg) */ .kgrid{display:grid;gap:1px;background:var(--line-soft)} .kgrid.boxed{border:1px solid var(--line);border-radius:7px;overflow:hidden} .kgrid.inset{border-bottom:1px solid var(--line)} .kgrid.setup .k{background:var(--setup)} /* absorbs .dgrid; home uses border-top override */ .k{background:var(--panel);padding:8px 10px} .k .lbl{margin-bottom:3px} .k .v{font-family:var(--mono);font-size:var(--f-md);font-weight:600;letter-spacing:-.3px} .k .v small{font-size:var(--f-xs);color:var(--dim);font-family:var(--sans)} .k .v.na{color:var(--caution)} .kgrid.lg .v{font-size:var(--f-lg)} /* inline formula/value highlight — in card text. Same class as the tile cell but an inline SPAN, so it must NOT inherit the tile's block padding/background. */ span.k{padding:0;background:0;font-family:var(--mono);color:var(--text)} /* #35 .greeks — centered greeks readout (+.dense 6-col from portfolio) */ .greeks{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line);border-radius:7px;overflow:hidden} .greeks .g{background:var(--panel);padding:7px 8px;text-align:center} .greeks .g .v{font-family:var(--mono);font-weight:600;font-size:var(--f-base)} .greeks.dense .g{padding:6px 6px} .greeks.dense .g .lbl{margin-bottom:2px;font-size:var(--f-2xs)} .greeks.dense .g .v{font-size:var(--f-sm)} /* #36 .kt — cockpit stat cell = .k + interactive. FILE-LOCAL (portfolio): the shared skeleton is the .k cell plus the two lines below; the .cap/.xtra/.on/.hero/.armed state modifiers + the .kt .v f-lg override stay in portfolio.html. */ .kt{cursor:pointer;position:relative} /* --------------------------------------------------------------------- INPUTS (#37–#38) --------------------------------------------------------------------- */ /* #37 .searchbox — icon + bare input (symsearch gets the focus glow via .sm, no .flush) */ .searchbox{display:flex;align-items:center;gap:7px;background:var(--surface-input);border:1px solid var(--line);border-radius:8px;padding:0 10px} .searchbox:focus-within{border-color:var(--accent-2);box-shadow:var(--focus-ring)} .searchbox svg{color:var(--faint)} .searchbox:focus-within svg{color:var(--accent)} .searchbox input{flex:1;background:0;border:0;color:var(--text)} .searchbox.sm{height:30px} /* #38 .input / .textarea — text fields (same accent-wash focus glow as .searchbox) */ .input,.textarea{background:var(--surface-control);border:1px solid var(--line);border-radius:7px;color:var(--text);font-family:var(--mono)} .input{padding:9px 12px;font-size:var(--f-sm)} .textarea{padding:10px 12px;font-size:var(--f-xs);resize:vertical} .input:focus,.textarea:focus{border-color:var(--accent-2);box-shadow:var(--focus-ring)} .input.formula{color:var(--accent)} /* compose .syn order-string field */ /* --------------------------------------------------------------------- OVERLAYS / FEEDBACK (#39–#46) --------------------------------------------------------------------- */ /* #39 .tip — tooltip (base appearance only; anchor positioning stays parent-scoped: .nav .tip / .seg button .tip / table.mx thead th .tip.wide). Order: base → .sm → .wide */ .tip{position:absolute;background:var(--tip-surface);border:1px solid var(--line);color:var(--text);font-size:var(--f-sm);white-space:nowrap;padding:4px 9px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:60;box-shadow:var(--tip-shadow)} .tip.sm{font-size:var(--f-xs);padding:3px 8px;border-radius:5px;color:var(--dim);box-shadow:none} /* was .seg button .tip */ .tip.wide{white-space:normal;width:180px} /* was .thtip */ /* #40 .callout — left-stripe explanatory note (+.caution/.solid) */ .callout{background:var(--panel-2);border:1px solid var(--line-soft);border-left:2px solid var(--accent-2);border-radius:5px;padding:7px 9px;font-size:var(--f-xs);line-height:1.45;color:var(--dim)} .callout.caution{border-left-color:var(--caution)} .callout.solid{border:1px solid var(--accent-2);background:var(--accent-wash);border-radius:7px} /* portfolio .yline, .decide .e.lead surface */ /* #41 .hint — always-visible inline helper text (distinct from .tip — false-twin) */ .hint{font-weight:500;text-transform:none;letter-spacing:0;color:var(--faint);font-size:var(--f-xs)} /* #42 .dh — detail/drawer title row (+.dh.sm). Trailing slot holds .badge (#26) or .close (#43) */ .dh{display:flex;align-items:flex-start;gap:8px} .dh .nm{font-size:var(--f-xl);font-weight:700} .dh .lg{font-family:var(--mono);color:var(--dim);font-size:var(--f-sm);margin-top:2px} .dh.sm .nm{font-size:var(--f-lg)} /* home .idt */ /* #43 .dh .close — small ghost button (hoisted verbatim from portfolio) */ .dh .close{margin-left:auto;border:1px solid var(--line);background:var(--surface-control-raised);color:var(--dim);border-radius:var(--control-radius);padding:3px 9px;font-size:var(--f-sm);font-weight:600} .dh .close:hover{border-color:var(--accent);color:var(--accent)} /* #44 .toast — staged-confirm banner (hoisted from data; body/shadow tokenized to §0) */ .toast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%) translateY(14px);background:var(--pop-surface);border:1px solid var(--accent-2);color:var(--text);padding:9px 15px;border-radius:8px;font-size:var(--f-sm);box-shadow:var(--pop-shadow);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:90;max-width:80vw} .toast.on{opacity:1;transform:translateX(-50%) translateY(0)} .toast b{color:var(--accent)} /* #45 .empty — empty states (+.box/.hero) */ .empty{text-align:center;color:var(--faint)} .empty.box{border:1px dashed var(--line);border-radius:7px;padding:14px 10px;font-size:var(--f-sm);line-height:1.5} /* compose .legempty */ .empty.hero{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:26px} /* data .empty-ans */ /* #46 .info — info-dot trigger (hoisted from portfolio .brow .info, de-scoped; pairs with base .tip) */ .info{width:13px;height:13px;border-radius:50%;background:var(--line);color:var(--dim);font-size:var(--f-2xs);display:inline-flex;align-items:center;justify-content:center;margin-left:4px} } @layer surfaces{ /* ============================================================================================ SERVED DESK SURFACES Surface rules compose the primary primitives above. Responsive rules may change page composition, but component geometry and palette remain owned by the primitives/tokens. ============================================================================================ */ /* ===================================================================== index.html — the whole Desk as one breathing decision canvas (site root). NO tabs, NO rail. One zoom axis: Market > Sector > Book > Position. Everything below is NEW layout + FLIP animation. Colors/type/atoms are reused from app.css while primary backend owners replace staged fixtures. ===================================================================== */ #app{height:100%;display:flex;flex-direction:column;overflow:hidden} /* ---- THE THREAD (the only persistent chrome: breadcrumb + command) ---- */ .thread{height:46px;flex:none;display:flex;align-items:center;gap:14px;padding:0 14px; border-bottom:1px solid var(--line);background:var(--grad-top)} .brandmk{width:18px;height:18px;border-radius:5px;flex:none;border:0;cursor:pointer;padding:0; background:var(--brand-mark);transition:filter var(--mo-quick) var(--mo-ease)} .brandmk:hover{filter:brightness(1.15)} .thctl{display:flex;align-items:center;gap:9px;flex:none} .thsep{width:1px;height:20px;background:var(--line-soft);flex:none} .thctx{flex:1;min-width:0;display:flex;align-items:center;gap:13px;overflow:hidden} /* swaps market-strip ⇄ crumbs+state by zoom */ .thread.zoomed .mktstrip{display:none} .thread:not(.zoomed) .crumbs,.thread:not(.zoomed) .tstate{display:none} .cmdsym{border:0;background:var(--panel-2);border-radius:6px;color:var(--dim);font-family:var(--mono); font-size:var(--f-2xs);padding:3px 7px;margin-right:2px;cursor:pointer;flex:none;white-space:nowrap;transition:color var(--mo-quick) var(--mo-ease)} .cmdsym b{color:var(--accent);font-weight:700} .cmdsym:hover{color:var(--text)} /* depth is short by design → crumbs size to content; the reclaimed middle carries live STATE. The old .crumbs{flex:1} is what stretched the clickable row across the whole strip → rail feel. */ .crumbs{display:flex;align-items:center;gap:1px;flex:none} .crumb{border:0;background:0;color:var(--dim);font-size:var(--f-sm);font-weight:600; padding:5px 9px;border-radius:6px;white-space:nowrap;max-width:38ch;overflow:hidden; text-overflow:ellipsis;transition:background var(--mo-quick) var(--mo-ease),color var(--mo-quick) var(--mo-ease)} .crumb:hover:not(.cur){color:var(--text);background:var(--row-hover)} .crumb.cur{color:var(--text);font-weight:700;cursor:default} .crumb .cx{color:var(--dim);font-weight:600} .crumb.home .hmk{vertical-align:-1.5px;margin-right:6px;opacity:.7;transition:opacity var(--mo-quick) var(--mo-ease)} .crumb.home.cur{cursor:default} /* lone home token = a place, not a link */ .crumb.home:not(.cur):hover .hmk{opacity:1} /* a zoom-OUT only once it's a real ancestor */ .sep{color:var(--faint);font-size:var(--f-base);padding:0 1px;user-select:none} /* live pulse of wherever you're zoomed — STATE, never navigation (that's what keeps it off the rail) */ /* A row of live facts with a fade at its edge. The fade is the right affordance — it says there is more — but it was the only thing there: the tail simply could not be reached. It scrolls on its own axis now, so the fade means "keep going" instead of "this is gone". */ .tstate{flex:1;min-width:0;display:flex;align-items:center;gap:13px;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;font-size:var(--f-sm);color:var(--dim);white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)} .tstate .tz{display:inline-flex;align-items:baseline;gap:5px;flex:none} .tstate .tk{font-size:var(--f-2xs);color:var(--faint);text-transform:uppercase;letter-spacing:.06em} .tstate .tz b{font-family:var(--mono);font-weight:700;color:var(--text)} .tstate .tz b.pos{color:var(--profit)} .tstate .tz b.neg{color:var(--loss)} .tstate .tz b.sim{color:var(--violet)} /* echoes the simRibbon / Simulated segment */ .tstate .tdot{width:3px;height:3px;border-radius:50%;background:var(--faint);flex:none} .tstate:empty{display:none} @media (max-width:1200px){ .thread.zoomed .tstate{display:none} } /* narrow: yield the strip to crumbs + command */ .cmd{flex:none;width:min(386px,44vw);display:flex;align-items:center;gap:7px} .thread .searchbox{width:auto;flex:1;min-width:0} .themetoggle{--control-hit:30px;color:var(--dim);background:var(--surface-input)} .themetoggle svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .themetoggle .theme-moon{display:none} :root[data-theme="light"] .themetoggle .theme-sun{display:none} :root[data-theme="light"] .themetoggle .theme-moon{display:block} /* market-mode control (Observed · Simulated) — replaces the old level toggle in the thread */ .mktmode{flex:none} .mktmode .mmseg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel-2)} .mktmode .mmseg button{border:0;background:0;color:var(--dim);font-size:var(--f-sm);font-weight:600;padding:5px 11px;cursor:pointer;border-left:1px solid var(--line);transition:background var(--mo-quick) var(--mo-ease),color var(--mo-quick) var(--mo-ease)} .mktmode .mmseg button:first-child{border-left:0} .mktmode .mmseg button:hover{color:var(--text)} .mktmode .mmseg button.on{background:var(--accent-2);color:var(--text)} .mktmode .mmseg button[data-mkt="sim"].on{background:var(--violet);color:var(--ink-on-violet)} /* simulated-market control ribbon (Home, sim mode only) */ .simribbon{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:7px 16px;border-bottom:1px solid var(--line);background:rgba(155,140,255,.08)} .simribbon .simlbl{font-family:var(--mono);font-size:var(--f-xs);font-weight:700;color:var(--violet);letter-spacing:.05em} .simribbon .simctl{display:inline-flex;align-items:center;gap:7px} .simribbon .sck{font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--faint)} .simribbon .seg{display:inline-flex;border:1px solid var(--line-soft);border-radius:5px;overflow:hidden} .simribbon .seg button{border:0;border-left:1px solid var(--line-soft);background:var(--panel-2);color:var(--dim);font-size:var(--f-2xs);padding:3px 9px;cursor:pointer} .simribbon .seg button:first-child{border-left:0} .simribbon .seg button.on{background:var(--violet);color:var(--ink-on-violet)} .simribbon .magb{width:19px;height:19px;border:1px solid var(--line-soft);background:var(--panel-2);color:var(--dim);border-radius:4px;cursor:pointer;font-weight:600} .simribbon .simseedv{font-family:var(--mono);font-weight:700;min-width:24px;text-align:center} .simribbon .simfp{font-family:var(--mono);font-size:var(--f-2xs);color:var(--faint)} .simribbon .simnote{font-size:var(--f-2xs);color:var(--faint);margin-left:auto} /* ---- STAGE ---- */ #stage{flex:1;min-height:0;display:flex;flex-direction:column} /* ---- LANDING HEADER (book view only): market pulse · your-book line · opportunities. Three slim rows fold in light Data + ambient posture so there's no rail anywhere. ---- */ .summary{flex:none;display:flex;flex-direction:column;border-bottom:1px solid var(--line);background:var(--panel-2)} .lv-position .summary{display:none} .summary .sblock{display:flex;flex-direction:column;gap:1px} .summary .sv{font-family:var(--mono);font-weight:700;font-size:var(--f-lg);letter-spacing:-.3px} .summary .sv.warnv{color:var(--caution)} .summary .sblock-btn{border:0;background:0;text-align:left;cursor:pointer;padding:3px 8px;margin:-3px -2px;border-radius:7px;align-items:flex-start; transition:background var(--mo-quick) var(--mo-ease)} .summary .sblock-btn:hover{background:var(--row-hover)} .summary .sblock-btn .lbl{position:relative} .summary .sblock-btn:hover .lbl::after{content:'interrogate ›';position:absolute;left:100%;margin-left:6px;white-space:nowrap;color:var(--accent);font-size:var(--f-xs);letter-spacing:.02em} /* MARKET STRIP — the folded pulse, now living INLINE in the merged top row's middle zone (was a whole second .pulse row). Mode shows ONCE here: the .mktsrc source tag flips teal→violet and .mktstrip.sim tints every value violet — the #mktMode segment stays the control, never echoed. */ .mktstrip{display:flex;align-items:center;gap:13px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;padding-right:18px;scroll-padding-inline-end:18px; -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)} .mktstrip .mktsrc{font-size:var(--f-2xs);font-family:var(--mono);color:var(--accent);letter-spacing:.03em;flex:none} .mktstrip.sim .mktsrc{color:var(--violet)} .mktstrip.sim .idx b,.mktstrip.sim .mktsec b{color:var(--violet)} .mktstrip .idx{font-size:var(--f-xs);color:var(--dim);font-family:var(--mono);display:inline-flex;gap:5px;align-items:baseline;flex:none} .mktstrip .idx b{color:var(--text);font-weight:700} .mktstrip .idx i{font-style:normal;font-size:var(--f-sm)} .mktstrip .idx i.pos{color:var(--profit)} .mktstrip .idx i.neg{color:var(--loss)} .mktstrip .pdiv{width:1px;height:15px;background:var(--line-soft);flex:none} .mktstrip .mktsec{font-size:var(--f-xs);font-family:var(--mono);color:var(--dim);flex:none} .mktstrip .mktsec b{color:var(--text);font-weight:700} .mktstrip .badge{flex:none} .mktstrip .heat{display:flex;align-items:flex-end;gap:9px;flex:none} .mktstrip .hx{display:flex;flex-direction:column;align-items:center;gap:3px} .mktstrip .hx .hxbar{height:18px;display:flex;align-items:flex-end} .mktstrip .hx i{display:block;width:8px;border-radius:2px 2px 0 0;background:var(--dim);min-height:3px} .mktstrip .hx.you i{background:var(--caution)} .mktstrip .hx em{font-style:normal;font-size:var(--f-2xs);color:var(--faint);letter-spacing:.01em;line-height:1;white-space:nowrap} .mktstrip .hx.you em{color:var(--caution)} /* row 2 — book line */ /* book-performance hero — equity curve + the numbers that tell the story */ .perfband{display:grid;grid-template-columns:minmax(150px,auto) minmax(200px,1fr) auto;gap:26px;align-items:center; padding:13px 18px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--accent-wash),transparent 70%)} .perfband .pf-lead{display:flex;flex-direction:column;gap:1px} .perfband .pf-lead .lbl{font-size:var(--f-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:700} .pf-net{font-family:var(--mono);font-size:calc(var(--f-lg) * 1.35);font-weight:800;letter-spacing:-.6px;line-height:1.05} .pf-net.pos{color:var(--profit)} .pf-net.neg{color:var(--loss)} .pf-day{font-size:var(--f-xs);font-family:var(--mono);font-weight:700} .pf-day.pos{color:var(--profit)} .pf-day.neg{color:var(--loss)} .pf-eq{width:100%;height:58px;display:block;overflow:visible} .beq-zero,.beq-high,.beq-now{font-family:var(--mono);font-variant-numeric:tabular-nums; paint-order:stroke fill;stroke:var(--panel-2);stroke-width:2.5px;stroke-linejoin:round} .beq-zero{fill:var(--faint);font-size:var(--f-2xs);font-weight:650;letter-spacing:.02em} .beq-high{fill:var(--profit);font-size:var(--f-2xs);font-weight:750} .beq-now{font-size:var(--f-xs);font-weight:800} .pf-stats{display:grid;grid-template-columns:repeat(3,auto);gap:5px 22px} .pf-stats .pfs{display:flex;flex-direction:column;gap:0} .pf-stats .pfk{font-size:var(--f-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.3px} .pf-stats .pfv{font-family:var(--mono);font-weight:700;font-size:var(--f-sm);color:var(--text)} .pf-stats .pfv.pos{color:var(--profit)} .pf-stats .pfv.neg{color:var(--loss)} @media (max-width:1100px){ .perfband{grid-template-columns:1fr;gap:12px} } .bookline{display:flex;align-items:center;gap:20px;padding:10px 18px;flex-wrap:wrap} .bookline .sneed{display:inline-flex;align-items:center;gap:9px;border:0;background:0;cursor:pointer;padding:3px 6px;border-radius:6px} .bookline .sneed:hover{background:var(--row-hover)} .posture{display:flex;align-items:center;gap:7px;margin-left:auto;padding-left:16px;border-left:1px solid var(--line-soft)} .posture .pgt{font-size:var(--f-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700} .pchip{border:1px solid var(--line);background:var(--surface-control);color:var(--dim);border-radius:var(--control-radius);padding:4px 11px; font-size:var(--f-xs);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px; transition:border-color var(--mo-quick) var(--mo-ease),color var(--mo-quick) var(--mo-ease)} .pchip:hover{border-color:var(--accent-2);color:var(--text)} .pchip.static{cursor:default;background:0;border-style:dashed} .pchip.static:hover{border-color:var(--line);color:var(--dim)} .pchip .pcsub{color:var(--faint);font-family:var(--mono);font-size:var(--f-xs)} .pchip .ld{font-family:var(--mono);font-size:var(--f-sm)} .pchip .ld.real{color:var(--profit)} .pchip .ld.paper{color:var(--violet)} .landing-acts{display:flex;align-items:center;gap:8px} /* row 3 — opportunities */ .oppstrip{display:flex;align-items:center;gap:9px;padding:7px 18px 9px;border-top:1px solid var(--line-soft);flex-wrap:wrap} .opp-lbl{font-size:var(--f-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700;flex:none} .oppchip{border:1px solid var(--line);background:var(--panel);color:var(--dim);border-radius:7px;padding:5px 11px; font-size:var(--f-xs);cursor:pointer;text-align:left;line-height:1.3;transition:border-color var(--mo-quick) var(--mo-ease),background var(--mo-quick) var(--mo-ease)} .oppchip:hover{border-color:var(--accent-2);background:var(--surface-control-selected)} .oppchip b{color:var(--text)} .oppchip .oi{margin-right:2px} .oppchip .oi{display:inline-flex;vertical-align:-4px;color:var(--accent)} .oppchip .oi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .oppchip .tridot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:middle;flex:none} .oppchip .tridot.bad{background:var(--loss);box-shadow:0 0 0 3px rgba(243,93,100,.14)} .oppchip .tridot.warn{background:var(--caution);box-shadow:0 0 0 3px rgba(231,172,68,.14)} .oppchip .tridot.ok{background:var(--profit)} .oppchip.proactive{border-style:dashed;border-color:var(--accent-2)} .oppchip.proactive:hover{background:var(--accent-wash)} /* The wide Home header is one orientation band, composed from the existing performance and book line components. Position-specific triage now lives on the position rail instead of repeating as a second row of sentence chips. */ .homesummary{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(760px,1fr);align-items:stretch} .homesummary .perfband{padding:8px 16px;gap:18px;border-top:0;border-bottom:0} .homesummary .pf-eq{height:48px} .homesummary .pf-stats{grid-template-columns:repeat(3,auto);gap:4px 18px} .homesummary .bookline{padding:8px 14px;gap:13px;flex-wrap:nowrap;border-left:1px solid var(--line-soft)} .homesummary .bookline .sblock{min-width:82px} .homesummary .bookline .sneed{padding:3px 5px;flex:none} .homesummary .bookline .sneed .hint{display:none} .homesummary .posture{padding-left:11px;gap:5px} .homesummary .posture .pgt,.homesummary .posture .pchip.static{display:none} .homesummary .pchip{padding:3px 7px;background:transparent} .homesummary .landing-acts .btn{width:32px;height:30px;padding:0;display:grid;place-items:center;font-size:0} .homesummary .landing-acts .btn::before{content:'↧';font-size:var(--f-lg);color:var(--accent)} .hshort{display:none} @media (max-width:2050px){ .homesummary{grid-template-columns:minmax(0,1.5fr) minmax(680px,1fr)} .homesummary .pf-stats{gap:3px 11px}.homesummary .bookline{gap:9px}.homesummary .pchip .pcsub{display:none} } @media (max-width:1700px){ .homesummary{display:flex;flex-direction:column}.homesummary .bookline{border-left:0;border-top:1px solid var(--line-soft)} } /* board = the zoom stage */ /* The board is the desk's one scrolling surface. It used to hide its overflow, which is how a composition slightly taller than the window lost its last row instead of scrolling to it. */ .board{flex:1;min-height:0;display:flex;gap:14px;padding:14px;overflow:hidden auto} /* Home panel ownership is declared once in the primary composition block near the end of this layer. These base rules only establish the internal behavior shared by every breakpoint. */ .book{min-width:0;min-height:0;display:grid;grid-template-columns:1fr; grid-template-rows:auto;grid-auto-rows:minmax(min-content,auto);gap:5px;align-content:start} .lv-book .book>.rosterhd{padding-block:2px;gap:8px;min-width:0} .lv-book .book>.rosterhd>.eyebrow{flex:none} .lv-book .book>.rosterhd>.hint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bookoverflowmeta{margin-left:auto;min-width:112px;max-width:150px}.bookoverflowmeta .overflowhair{min-width:58px} #activityBand,#riskMain,#bookrisk,#chainBand,#univBand,#sectorBand,#newsBand{display:none} #riskMain{position:relative} .lv-book #activityBand{display:flex;grid-area:activity;flex-direction:column;min-width:0;min-height:0} .lv-book #riskMain{display:flex;grid-area:map;flex-direction:column;min-height:0} .lv-book #bookrisk{display:flex;grid-area:bookrisk;flex-direction:column;min-height:0} .lv-book #chainBand{display:flex;grid-area:chain;flex-direction:column;min-height:0} .lv-book #univBand{display:flex;flex-direction:column;min-height:0} .lv-book #sectorBand{display:flex;grid-area:sector;flex-direction:column;min-height:0} .lv-book #newsBand{display:flex;grid-area:news;flex-direction:column;min-height:0} /* The cockpit scales continuously through normal desktop widths. The earlier two-column fallback turned the same six lenses into a four-row page at 1280–1440px, hiding universe and news below the fold. Keep the signed-off 12-column ownership and compact its internals instead. */ @media (min-width:1200px) and (max-width:1700px){ .homesummary{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(500px,.95fr);align-items:stretch} .homesummary .hfull{display:none}.homesummary .hshort{display:inline} .homesummary .perfband{grid-template-columns:minmax(180px,auto) minmax(190px,1fr);padding:6px 10px;gap:10px} .homesummary .pf-eq{height:42px}.homesummary .pf-stats{gap:2px 7px}.homesummary .pf-stats .pfk{white-space:nowrap} .homesummary .pf-lead .lbl{font-size:10px;line-height:1.1;white-space:nowrap}.homesummary .pf-net{font-size:16px}.homesummary .pf-day{font-size:11px;line-height:1.1} .homesummary .pf-stats .pfk{font-size:9px;line-height:1.1}.homesummary .pf-stats .pfv{font-size:12px;line-height:1.2} .homesummary .bookline{padding:6px 8px;gap:5px;flex-wrap:nowrap;border-top:0;border-left:1px solid var(--line-soft)} .homesummary .bookline .sblock{min-width:68px} .homesummary .bookline .sblock .lbl{font-size:9px;line-height:1.1;white-space:nowrap}.homesummary .bookline .sblock .sv{font-size:12px;line-height:1.2} .homesummary .bookline .sneed{padding:2px 3px}.homesummary .bookline .sneed .badge{font-size:10px;padding:2px 5px} .homesummary .posture{gap:2px;padding-left:5px}.homesummary .pchip{padding:2px 4px;font-size:10px} .lv-book #riskMain .lenshd{gap:5px}.lv-book #riskMain .lenshd .eyebrow{white-space:nowrap;font-size:12px}.lv-book #riskMain .rkleg{gap:4px;font-size:9px} .lv-book #riskMain>.rkpanel,.lv-book #bookrisk>.rkpanel,.lv-book #chainBand>.rkpanel, .lv-book #univBand>.rkpanel,.lv-book #sectorBand>.rkpanel,.lv-book #newsBand>.rkpanel{padding:9px 10px} .lv-book .book .card{padding:2px 7px}.lv-book .book .card>.cface{grid-template-rows:auto 20px} .lv-book .book .cpeek{height:20px} .chpanel .chpicker{gap:4px;margin:5px 0 4px}.chpick{padding:2px 6px}.chtf{margin-bottom:4px} .marketpanel .uitem{padding:1px 4px}.marketpanel .universegrid{gap:1px} .sectorfact{padding:4px 5px}.govdetail{padding-top:5px}.govverdict{margin-bottom:4px}.govfacts{margin:5px 0} .govtab .gklong{display:none}.govtab .gkshort{display:inline} button.nitem.homenews{padding:5px 8px}.homenews .ht{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} } @media (min-width:1200px) and (max-width:1700px) and (max-height:800px){ .lv-book .book .card{padding:1px 7px} .govtab .gklong{display:none}.govtab .gkshort{display:inline} } .recede,.focus,.panel{display:none} .lv-position .book{display:none} .lv-position .recede{display:flex;flex-direction:column;gap:8px;flex:0 0 172px;overflow:auto} .lv-position .focus{display:flex;flex:1;min-width:0;overflow:hidden} /* ---- THE CARD (one node, three faces by parent container) ---- */ .card{border:1px solid var(--line);border-radius:10px;background:var(--raise); box-shadow:var(--raise-sheen);overflow:hidden;position:relative;will-change:transform} .cardopen{position:absolute;inset:0;z-index:1;border:0;border-radius:inherit;background:transparent; color:transparent;cursor:pointer} .cardopen:focus-visible{outline:2px solid var(--accent);outline-offset:-3px} .card .cface{position:relative;z-index:0;pointer-events:none} .focus .cardopen{display:none} .focus .card .cface{pointer-events:auto} .crow1{display:flex;align-items:baseline;gap:9px} .crisk{width:8px;height:8px;border-radius:50%;flex:none;align-self:center} /* risk-character dot (defined/secured/undef) */ .csym{font-size:var(--f-xl);font-weight:800;letter-spacing:.01em} .cstruct{color:var(--dim);font-size:var(--f-sm)} .cstatuses{display:inline-flex;align-items:center;gap:5px;min-width:0} .cpnl{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:var(--f-md)} /* share-of-book row — the roster IS the concentration list, so no second list is needed */ .cshareRow{display:flex;align-items:center;gap:8px} .cshare{flex:1;height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden} .cshare i{display:block;height:100%;border-radius:3px} .csharev{font-family:var(--mono);font-size:var(--f-2xs);color:var(--dim);width:34px;text-align:right} .ccap{color:var(--faint);font-size:var(--f-xs);font-family:var(--mono)} /* peek — attn·cap·mini-payoff, revealed on hover/hot (density earned by focus) */ .cpeek{display:flex;gap:8px;align-items:center;max-height:0;opacity:0;overflow:hidden; transition:max-height var(--mo-quick) var(--mo-ease),opacity var(--mo-quick) var(--mo-ease)} .cplspark{width:48px;height:16px;flex:none} .cdetail{display:none} /* book tile face — COMPACT scalable row (~52px); peeks on hover, blooms on click */ .book .card{padding:8px 11px;cursor:pointer;transition:border-color var(--mo-quick) var(--mo-ease),transform var(--mo-quick) var(--mo-ease)} .book .card.needs.bad{border-left-color:var(--loss)} .book .card.needs.warn{border-left-color:var(--caution)} .book .card>.cface{display:flex;flex-direction:column;gap:5px} .book .card:hover{border-color:var(--line-hover);transform:translateY(-1px)} .book .card:hover .cpeek{max-height:120px;opacity:1;margin-top:3px} /* Desktop roster: six fixed-height rows, with the hover preview cross-fading over row two instead of growing the card. The same card nodes still move through the book → bloom FLIP transition. */ @media (min-width:901px){ .lv-book .book{gap:6px} .lv-book .book .card{padding:5px 9px} .lv-book .book .card>.cface{display:grid;grid-template-rows:auto 24px;gap:2px;min-width:0} .lv-book .book .crow1{grid-column:1;grid-row:1;line-height:1.1;min-width:0;align-items:center;flex-wrap:wrap;column-gap:6px;row-gap:1px} .lv-book .book .csym{font-size:var(--f-lg);line-height:1} /* The strategy name is the card's identity — never clip it. Keep it whole and let the header wrap the trailing badge/P&L to a second line when a long name + symbol don't fit. */ .lv-book .book .cstruct{font-size:var(--f-xs);line-height:1.2;white-space:nowrap;flex-shrink:0} .lv-book .book .cpnl{font-size:var(--f-sm);line-height:1} .lv-book .book .cshareRow,.lv-book .book .cpeek{grid-column:1;grid-row:2;min-width:0;align-self:center} .lv-book .book .cshareRow{opacity:1;transition:opacity var(--mo-quick) var(--mo-ease)} .lv-book .book .cpeek{max-height:none;height:24px;margin:0;opacity:0;gap:6px;align-items:center} .lv-book .book .cpeek .cspark{height:20px;min-width:44px} .lv-book .book .card:hover .cshareRow{opacity:0} .lv-book .book .card:hover .cpeek{max-height:none;margin:0;opacity:1} } @media (max-height:1199px) and (min-width:1701px){ .lv-book .book{gap:5px} .lv-book .book .card{padding:3px 8px} .lv-book .book .card>.cface{grid-template-rows:auto 20px} .lv-book .book .cpeek{height:20px} .lv-book .book .cpeek .badge{padding:1px 6px;line-height:1.2} } /* receded strip chip face */ .recede .card{padding:9px 11px;cursor:pointer;border-radius:9px} .recede .card>.cface{display:flex;flex-direction:column;gap:5px} .recede .card .cstruct,.recede .card .cpeek,.recede .card .cdetail{display:none} .recede .card .cshareRow .cplspark{display:none} /* The narrow sibling rail keeps financial identity intact. P/L owns a complete line so the card's deliberate overflow boundary never truncates a signed amount to make room for symbol/status. */ .recede .card .crow1{display:grid;grid-template-columns:auto minmax(0,1fr); grid-template-areas:"risk symbol" "pnl pnl" "status status";gap:3px 6px;min-width:0} .recede .card .crisk{grid-area:risk}.recede .card .csym{grid-area:symbol} .recede .card .cstatuses{grid-area:status;min-width:0;display:flex;flex-wrap:wrap} .recede .card .cpnl{grid-area:pnl;min-width:0;white-space:nowrap;text-align:right} .recede .card .cshareRow{min-width:0} .recede .card .cshareRow>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .recede .card .csym{font-size:var(--f-md)} .recede .card .cpnl{font-size:var(--f-sm)} .recede .card:hover{border-color:var(--accent-2);background:var(--surface-control-selected)} .recede .card.is-focus{display:none} .recstrip-hd{font-size:var(--f-xs);letter-spacing:.11em;text-transform:uppercase; color:var(--faint);font-weight:600;padding:2px 2px 4px} /* focus bloom face */ .focus .card{flex:1;display:flex;flex-direction:column;padding:0;cursor:default;border-radius:12px} .focus .card>.cface{padding:15px 20px 13px;border-bottom:1px solid var(--line-soft); display:flex;flex-direction:column;gap:8px} .focus .card .csym{font-size:calc(var(--f-xl)*1.25)} .focus .card .cstruct{font-size:var(--f-md)} .focus .card .cpnl{font-size:var(--f-lg)} .focus .card .cshareRow,.focus .card .cpeek{display:none} /* the bloom header is crow1 only; detail lives in .cdetail */ /* bloom: one full-width causal stack — payoff first, then the SAME scenario spectrum used by Decide. At 2560 the spectrum is one eight-card row; narrower desktop containers reflow it without shortening names. This keeps the payoff→scenario relationship legible and removes the dead middle-column void. */ .focus .card>.cdetail{flex:1;display:flex;flex-direction:column;padding:13px 18px 14px;min-height:0;overflow-y:auto;overflow-x:hidden} /* the little colour keys that teach what the two bars mean (replaces the click-CTA prose) */ .probkey{display:inline-flex;vertical-align:middle;margin:0 1px} .probkey i{display:inline-block;width:14px;height:5px;border-radius:2px} .probkey .pk-odds{background:var(--accent)} .probkey .pk-pl{background:linear-gradient(90deg,var(--loss),var(--profit))} .adjnums.inline .adjn{gap:6px} .adjnums.inline .adjn .lbl{width:auto} .pendacts{display:flex;align-items:center;gap:9px;flex:none} /* inline close confirm — no separate Decide subscreen */ .closebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:11px 13px;border:1px solid var(--loss);border-radius:9px;background:var(--loss-wash)} .closetext{flex:1;min-width:240px;font-size:var(--f-sm);color:var(--text);line-height:1.5} .whatif{margin-top:auto;padding:8px 2px 2px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:7px} .whatif .wf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px} .whatif .wf-main{font-size:var(--f-xs);color:var(--dim);line-height:1.4;min-width:0} .whatif .wf-main b{color:var(--text)} .whatif .wf-acts{display:flex;align-items:center;gap:12px;flex:none;white-space:nowrap} .magctl{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--control-radius);padding:2px 4px 2px 8px;background:var(--surface-control)} .magctl .lbl{margin:0;font-size:var(--f-xs)} .magctl .magb{border:1px solid var(--line-soft);background:var(--surface-control-raised);color:var(--dim);width:22px;height:22px;border-radius:4px;font-size:var(--f-md);font-weight:600;cursor:pointer} .magctl .magb:hover{border-color:var(--accent-2);color:var(--text)} .magctl .magv{font-family:var(--mono);font-weight:700;font-size:var(--f-sm);min-width:40px;text-align:center} .magctl .magv.pos{color:var(--profit)} .magctl .magv.neg{color:var(--loss)} .whatif .wf-main .wf-mv{font-family:var(--mono);color:var(--dim)} .pfhandle rect{fill-opacity:.42;transition:fill-opacity var(--mo-quick) var(--mo-ease)} .pfhandle:hover rect{fill-opacity:1} /* detail internals */ .bd-pay{margin-bottom:13px} .paytitle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px} .paytitle .hint{font-family:var(--mono)} .payread{display:none;align-items:baseline;gap:5px;margin-left:auto;color:var(--faint);font-family:var(--mono);font-size:var(--f-2xs);white-space:nowrap} .payread i{color:var(--faint);font-style:normal}.payread b{font-size:var(--f-xs)} .cbig{width:100%;height:clamp(200px,32vh,286px);display:block; border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2)} .k .v.pos{color:var(--profit)} .k .v.neg{color:var(--loss)} .k .v.warn{color:var(--caution)} .bd-actions{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px; border-top:1px solid var(--line-soft)} .linklike{border:0;background:0;color:var(--accent);font-weight:600;font-size:inherit;cursor:pointer;padding:0} .linklike:hover{text-decoration:underline} /* TIER 1 — inline adjust tray (minor tweaks in the bloom, no full-Decide carpet) */ .adjtray{margin-top:14px;border:1px solid var(--accent-2);border-radius:10px;background:var(--panel-2); padding:12px 14px;animation:riseIn var(--mo-dur) var(--mo-ease)} .adjhd{display:flex;align-items:center;gap:10px;margin-bottom:11px} .adjhd .hint{flex:1;min-width:0} .adjbody{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start} .adjlegs{display:flex;flex-direction:column;gap:6px} .adjside{display:flex;flex-direction:column;gap:11px} .adjexp{display:flex;align-items:center;justify-content:space-between;gap:10px} .adjnums{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line-soft);border-radius:8px;padding:9px 11px;background:var(--panel)} .adjn{display:flex;align-items:baseline;gap:8px} .adjn .lbl{flex:none;width:60px} .adjn b{font-family:var(--mono);font-weight:700;font-size:var(--f-sm)} .adjn b.pos{color:var(--profit)} .adjn b.neg{color:var(--loss)} .adjd{font-family:var(--mono);font-size:var(--f-xs);font-weight:600;margin-left:auto} .adjd.pos{color:var(--profit)} .adjd.neg{color:var(--loss)} .adjd.flat{color:var(--faint)} .adjacts{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft)} /* compact inline "+ Add leg" chip — NOT the full-width dashed bar (that was the "huge button") */ .addleg.sm{width:auto;margin:0;padding:6px 12px;font-size:var(--f-xs);align-self:center} @media (max-width:900px){ .adjbody{grid-template-columns:1fr} } /* research LENS (proves research is a lens on focus, not a destination) */ .lens{border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2); padding:12px;display:flex;flex-direction:column;gap:11px;height:100%} .lenshd{display:flex;align-items:center;justify-content:space-between} .lenspx{display:flex;align-items:center;gap:11px} .lpx{font-size:var(--f-lg);font-weight:700} .plspark{flex:1;height:30px;display:block} .lenswhy .lbl{margin-bottom:3px} .lenswhy .wtext{color:var(--text);font-size:var(--f-sm);line-height:1.45} .lensnews{display:flex;gap:8px;align-items:flex-start;font-size:var(--f-xs);color:var(--dim); line-height:1.45;border-top:1px solid var(--line-soft);padding-top:10px} .lensnews .sdot{margin-top:5px;flex:none} /* --- staggered reveal of detail after the geometry settles --- */ .focus .card>.cdetail>*{opacity:0;transform:translateY(10px); transition:opacity var(--mo-dur) var(--mo-ease),transform var(--mo-dur) var(--mo-ease)} .focus .card>.cdetail.reveal>*{opacity:1;transform:none} .focus .card>.cdetail.reveal>.decband{transition-delay:.01s} .focus .card>.cdetail.reveal>.depth{transition-delay:.15s} /* --- SECTOR / MARKET panels (lighter — the axis extends outward) --- */ .lvhd{margin-bottom:16px} .lvhd h1{margin:6px 0 3px;font-size:var(--f-xl);font-weight:800} .lvhd p{margin:0;max-width:64ch} .secblock{margin-top:18px} .secblock>.lbl{margin-bottom:9px} .holdrow{display:flex;flex-wrap:wrap;gap:8px} .holdchip{font-family:var(--mono);display:inline-flex;gap:6px;align-items:baseline} .msgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px;max-width:840px} .msector{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:13px; text-align:left;display:flex;flex-direction:column;gap:9px;transition:border-color var(--mo-quick) var(--mo-ease)} .msector.you{border-color:var(--accent-2);background:linear-gradient(180deg,var(--accent-wash),transparent 80%)} /* passive 'your sector' highlight — no pointer/jump */ .msrow{display:flex;align-items:center;gap:8px} .msrow b{font-size:var(--f-md)} .msbar{height:6px;background:var(--line-soft);border-radius:4px;overflow:hidden} .msbar i{display:block;height:100%;background:var(--accent);border-radius:4px} .msector.you .msbar i{background:var(--caution)} .mssub{display:flex;justify-content:space-between;align-items:baseline} /* ---- DATA LENS (the zoom-out research surface: chart · vol scan · providers) ---- */ .dlens{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:18px} .dlcol{display:flex;flex-direction:column;gap:16px;min-width:0} .dpanel{border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2);padding:13px 15px} .dpanel .lenshd{margin-bottom:10px} .mdchart{width:100%;height:154px;display:block;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel)} .mdmeta{display:flex;gap:16px;margin-top:9px;font-size:var(--f-xs);color:var(--dim)} .mdmeta b{font-family:var(--mono);color:var(--text)} .vshd,.vsrow{display:grid;grid-template-columns:52px 1fr 46px 52px 74px;align-items:center;gap:10px} .vshd{font-size:var(--f-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:0 8px 6px} .vshd span:not(:nth-child(2)){text-align:right} .volscan{display:flex;flex-direction:column;gap:1px} .vsrow{padding:7px 8px;border-radius:6px;cursor:pointer;font-size:var(--f-sm);border:1px solid transparent;text-align:left; transition:background var(--mo-quick) var(--mo-ease),border-color var(--mo-quick) var(--mo-ease)} .vsrow:hover{background:var(--row-hover);border-color:var(--line-soft)} .vsrow.you{background:var(--accent-wash)} .vsrow .vsym{font-family:var(--mono);font-weight:800;color:var(--text)} .vsrow .vsym .uheld{color:var(--accent-2);font-size:var(--f-2xs);font-weight:700} .vsrow .vscat{color:var(--caution);font-size:var(--f-xs)} .vsrow .vncat{color:var(--caution);font-size:var(--f-xs);opacity:.85} .vsrow .vname{color:var(--dim);font-size:var(--f-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vsrow .vv{font-family:var(--mono);text-align:right;color:var(--dim);font-size:var(--f-xs)} .vsrow .vscell{text-align:right} .vsrow .vsig{font-size:var(--f-xs);font-weight:700;letter-spacing:.03em} .vsig.rich{color:var(--profit)} .vsig.fair{color:var(--faint)} .vsig.cheap{color:var(--loss)} .vsrow .vsgo{display:none;color:var(--accent);font-size:var(--f-xs);font-weight:700} .vsrow:hover .vsig{display:none} .vsrow:hover .vsgo{display:inline} .provider{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px} .pvchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:4px 11px;font-size:var(--f-xs);color:var(--dim)} .pvchip .pvdot{width:7px;height:7px;border-radius:50%;background:var(--profit)} .pvchip .pvdot.warn{background:var(--caution)} /* zoom-in enter animation for panel/plain transitions */ /* ONE shared motion vocabulary: the zoom-out panels (book↔sector↔market) BREATHE the same way the bloom FLIP does (var(--mo-dur)/var(--mo-ease)) — a scaled breath, not a flat fade — and their contents ASSEMBLE with a short stagger so it reads as a morph, not a page load. */ .zoomin{animation:zoomin var(--mo-dur) var(--mo-ease)} @keyframes zoomin{from{opacity:0;transform:scale(.965) translateY(8px)}to{opacity:1;transform:none}} @keyframes riseIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}} .zoomin .lvhd,.zoomin .kgrid,.zoomin .secblock,.zoomin .holdchip,.zoomin .msector,.zoomin .callout{ animation:riseIn var(--mo-dur) var(--mo-ease) backwards} .zoomin .msector:nth-child(2),.zoomin .holdchip:nth-child(2){animation-delay:.03s} .zoomin .msector:nth-child(3),.zoomin .holdchip:nth-child(3){animation-delay:.06s} .zoomin .msector:nth-child(4),.zoomin .holdchip:nth-child(4){animation-delay:.09s} .zoomin .msector:nth-child(5),.zoomin .holdchip:nth-child(5){animation-delay:.12s} .zoomin .msector:nth-child(6),.zoomin .holdchip:nth-child(6){animation-delay:.15s} .zoomin .secblock{animation-delay:.08s} /* Decide entry: everything EXCEPT the payoff settles in around the morphing candidate chart */ @keyframes decSettle{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} .decwrap.morphin .dectop,.decwrap.morphin .dcleft,.decwrap.morphin .dcright, .decwrap.morphin .dccenter .paytitle,.decwrap.morphin .dccenter .numrow{ animation:decSettle var(--mo-dur) var(--mo-ease) backwards} .decwrap.morphin .dcright{animation-delay:.04s} /* payoff SVG typography: numeric axes stay tabular; semantic annotations get enough weight and a quiet surface halo so they remain crisp over the probability and payoff fills. */ .pfax{fill:var(--faint);font-family:var(--mono);font-size:var(--f-2xs);font-weight:650} .pflab{fill:var(--dim);font-family:var(--sans);font-size:var(--f-2xs);font-weight:700;letter-spacing:.01em} .pfpx{fill:var(--dim);font-family:var(--mono);font-size:var(--f-2xs);font-weight:650} .pfpct{fill:var(--faint);font-family:var(--sans);font-size:var(--f-2xs);font-weight:550;letter-spacing:.02em} .pfplat{font-family:var(--mono);font-size:var(--f-2xs);font-weight:750} .pfp{fill:var(--profit)} .pfl{fill:var(--loss)} .pfbe{fill:var(--caution);font-family:var(--mono);font-size:var(--f-2xs);font-weight:750} .pfscen{transition:r var(--mo-quick) var(--mo-ease)} .pfmk{fill:var(--dim);font-family:var(--mono);font-size:var(--f-2xs);font-weight:650} .pfxp{font-family:var(--mono);font-size:var(--f-2xs);font-weight:750} .pfplat,.pfbe,.pfmk,.pfxp,.pflab,.pfpin,.pfpop{paint-order:stroke fill;stroke:var(--panel-2);stroke-width:3px;stroke-linejoin:round} .pfpin{font-family:var(--sans);font-size:var(--f-2xs);font-weight:800;letter-spacing:.01em} .pfpop{fill:var(--accent);font-family:var(--sans);font-size:var(--f-2xs);font-weight:750;letter-spacing:.01em} .pfstrike{font-family:var(--sans);font-size:10.5px;font-weight:800;pointer-events:none} /* ============================================================ BLOOM COMPOSITION — inner content of .cdetail (ported grammar). A·decision band B·payoff+scenarios C·depth lenses D·rail. Only NEW structural CSS lives here; colors/type/atoms = app.css. ============================================================ */ /* A — DECISION BAND (the spine) */ .decband{display:flex;flex-direction:column;gap:8px; padding:10px 16px;margin-bottom:10px;border:1px solid var(--line-soft);border-left:3px solid var(--accent-2); border-radius:10px;background:var(--panel-2)} .decrow{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:18px;align-items:center} .decband.tone-warn{border-left-color:var(--caution);background:linear-gradient(100deg,var(--caution-wash),transparent 55%)} .decband.tone-bad{border-left-color:var(--loss);background:linear-gradient(100deg,var(--loss-wash),transparent 55%)} .decband.tone-ok{border-left-color:var(--profit);background:linear-gradient(100deg,var(--profit-wash),transparent 55%)} /* the now→at-expiry P/L bridge: reconciles today's mark with the at-expiry-if-it-holds value */ .decbridge{border-top:1px solid var(--line-soft);padding-top:9px;font-size:var(--f-xs);color:var(--dim);line-height:1.5} .decbridge .nowv{font-family:var(--mono);color:var(--dim)} .decbridge .arrow{color:var(--faint);padding:0 4px} .decbridge .expv{font-family:var(--mono);font-weight:700} .decbridge .expv.pos{color:var(--profit)} .decbridge .expv.neg{color:var(--loss)} .decbridge .brq{color:var(--faint)} .decpl{display:flex;flex-direction:column;gap:3px;padding-right:16px;border-right:1px solid var(--line-soft)} .decplv{font-family:var(--mono);font-weight:800;font-size:calc(var(--f-xl)*1.4);letter-spacing:-.6px;line-height:1} .decsub{font-size:var(--f-xs);color:var(--faint);display:flex;flex-wrap:wrap;gap:8px;align-items:baseline} .decmain{display:flex;flex-direction:column;gap:8px;min-width:0} .deceyebrow{display:flex;align-items:center;gap:9px} .decread{font-size:var(--f-md);line-height:1.5;color:var(--text)} .decread b,.verdict b{font-weight:700;color:var(--text)} .decacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px} .verdict{display:flex;align-items:flex-start;gap:10px;font-size:var(--f-md);line-height:1.5;color:var(--text)} .verdict .vdot{width:8px;height:8px;border-radius:50%;background:var(--profit);margin-top:6px;flex:none;box-shadow:0 0 0 4px var(--profit-wash)} /* B — numbers row under the payoff (reuses .kgrid.boxed/.k) */ .numrow .v{font-size:var(--f-sm)} /* greek values while a scenario animates + the projected hero P/L (glow keeps semantic colors) */ .mgv.breath,.expv.proj-live{text-shadow:0 0 9px rgba(57,199,212,.35)} /* C — DEPTH BAND (three quiet lenses) — deliberately RECESSIVE: it must read as secondary to the payoff+decision hero, so type is smaller and titles are muted. */ .depth{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:11px} .depth .lens{padding:9px 12px;background:var(--panel-2);gap:8px} .depth .lenshd .eyebrow{color:var(--faint)} /* recede lens titles from accent */ .depth .lenshd .hint{font-size:var(--f-xs)} .mechlens .greeks.dense{margin-top:2px} .ivrow{display:flex;align-items:center;gap:8px;margin:3px 0 1px} .depth .lpx{font-size:var(--f-md)} .depth .lenswhy .wtext{font-size:var(--f-xs);color:var(--dim);line-height:1.45} .depth .lensnews{font-size:var(--f-sm);padding-top:8px} .mechrow{margin-top:9px} .mechrow .kv{padding:3px 0;font-size:var(--f-xs)} .beg-help{display:block;font-size:var(--f-xs);color:var(--faint);line-height:1.5;margin-top:2px} .beg-help b{color:var(--dim)} /* level lens on depth: Beginner gets the plain gloss ONLY; the raw greeks + edge/yield/ assign figures are Expert-only. Nothing conceptual is lost — the gloss carries the facts. */ .mechnums{display:none} /* mechanics + book-help are IDENTICAL for both levels (one graphic, all numbers present) so toggling Beginner/Expert never reflows the flex hero — that was the abrupt graph resize. */ .booktext{font-size:var(--f-xs);color:var(--dim);line-height:1.5} .booktext b{color:var(--text)} .bookbar{height:6px;border-radius:4px;background:var(--line-soft);overflow:hidden;margin:9px 0 5px} .bookbar.big{height:9px} .bookbar i{display:block;height:100%;background:var(--caution);border-radius:4px} /* research: relative-strength mini bars (stock vs sector vs market) */ .lblrow{margin:9px 0 4px} .relgrid{display:flex;flex-direction:column;gap:4px} .relrow{display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:8px;font-size:var(--f-xs)} .relrow .rell{color:var(--dim);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .relrow .relbar{height:6px;background:var(--track);border-radius:3px;overflow:hidden} .relrow .relbar i{display:block;height:100%;border-radius:3px} .relrow .relbar i.pos{background:var(--profit)} .relrow .relbar i.neg{background:var(--loss)} .relrow .relv{font-family:var(--mono);font-weight:700;text-align:right} .relrow .relv.pos{color:var(--profit)} .relrow .relv.neg{color:var(--loss)} /* book context compact */ .bkmeta{font-size:var(--f-xs);color:var(--dim);line-height:1.4} .bkmeta b{color:var(--text)} .bkmeta b.warn{color:var(--caution)} .corrrow{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap} .corrrow .lbl{margin:0} .corrchip{font-family:var(--mono);font-size:var(--f-sm);font-weight:700;color:var(--dim);border:1px solid var(--line);border-radius:5px;padding:1px 6px} /* The signed-off wide bloom keeps payoff and the complete scenario spectrum full width. At tall desktop sizes, recover the small remaining vertical overrun inside the already-wide decision and depth bands instead of adding a nested scrollbar or narrowing the scenario descriptions. Shorter viewports retain the natural stack and its internal scroll fallback. */ @media (min-width:1900px) and (min-height:1180px){ .focus .card>.cdetail{padding-top:10px;padding-bottom:10px} .focus .card .decmain{display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"eye acts" "read acts";column-gap:16px;row-gap:4px;align-items:center} .focus .card .deceyebrow{grid-area:eye} .focus .card .decread{grid-area:read;line-height:1.35} .focus .card .decacts{grid-area:acts;margin-top:0;align-self:center} .focus .card .decband{gap:6px;padding-top:8px;padding-bottom:8px;margin-bottom:7px} .focus .card .decbridge{padding-top:6px;line-height:1.35} .focus .card .depth{margin-top:8px;gap:10px} .focus .card .depth .lens{padding:8px 10px;gap:7px} .focus .card .depth>.mechlens{display:grid; grid-template-columns:minmax(0,2fr) minmax(250px,1fr);grid-template-rows:auto auto; column-gap:12px;row-gap:7px;align-content:start} .focus .card .depth>.mechlens>.lenshd{grid-column:1/-1} .focus .card .depth>.mechlens>.mechg{grid-column:1;grid-row:2;margin-top:0} .focus .card .depth>.mechlens>.mechstats{grid-column:2;grid-row:2;margin-top:0;align-self:start} .focus .card .depth>.lens:nth-child(2){display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); grid-template-areas:"hd hd" "px px" "label why" "rel why" "iv news"; column-gap:12px;row-gap:6px;align-content:start} .focus .card .depth>.lens:nth-child(2)>.lenshd{grid-area:hd} .focus .card .depth>.lens:nth-child(2)>.lenspx{grid-area:px} .focus .card .depth>.lens:nth-child(2)>.lblrow{grid-area:label;margin:0} .focus .card .depth>.lens:nth-child(2)>.relgrid{grid-area:rel} .focus .card .depth>.lens:nth-child(2)>.ivrow{grid-area:iv;margin:0} .focus .card .depth>.lens:nth-child(2)>.lenswhy{grid-area:why} .focus .card .depth>.lens:nth-child(2)>.lensnews{grid-area:news;padding-top:5px} .focus .card .bd-actions{margin-top:9px;padding-top:8px} } @media (min-width:1900px) and (min-height:1180px) and (max-height:1299px){ .focus .card>.cdetail{padding:7px 14px 5px} .focus .card .decband{gap:4px;padding:6px 12px;margin-bottom:5px} .focus .card .decbridge{padding-top:4px;line-height:1.25} .focus .card .depth{margin-top:6px;gap:8px} .focus .card .depth .lens{padding:6px 8px;gap:5px} .focus .card .depth .lensnews{padding-top:3px} .focus .card .bd-actions{margin-top:5px;padding-top:5px} } .lv-position .focus .card>.cdetail{overflow:hidden} .focus .card .ksecondary{margin-bottom:1px} /* Short desktop viewports keep the same decision-band component but use its wide, horizontal composition. That gives the payoff a real row instead of allowing its 230px canvas to paint through a flex-shrunk parent and underneath the scenario spectrum (Safari exposed this first). */ @media (min-width:1501px) and (max-height:1179px){ .focus .card .decmain{display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"eye acts" "read acts";column-gap:14px;row-gap:3px;align-items:center} .focus .card .deceyebrow{grid-area:eye} .focus .card .decread{grid-area:read;line-height:1.35} .focus .card .decacts{grid-area:acts;margin-top:0;align-self:center;justify-content:flex-end} .focus .card .decband{gap:5px;padding:7px 12px;margin-bottom:5px} .focus .card .decbridge{padding-top:5px;line-height:1.3} } @media (max-width:1280px){ } @media (max-width:1000px){ .lv-position .focus .card>.cdetail{overflow:auto} } /* ============================================================ DECIDE — the merged Plan+Compose+Trades focus (overlay stage). REUSES the bloom's twin-hero payoff/scenarios/numbers + level lens. A·intent spine B·candidate heroes + mode C·depth D·place ticket. ============================================================ */ .decstage{position:fixed;top:47px;left:0;right:0;bottom:0;z-index:40;background:var(--ground); overflow:hidden;display:none;opacity:0;transition:opacity 200ms var(--mo-ease)} .decstage.on{display:block;opacity:1} /* DENSE TERMINAL LAYOUT — full-bleed (left edge = 14px like book/bloom at ALL widths), a thin top spine + a height-capped 3-column grid + stable execution dock. Default columns do not scroll; only the selected detail well may scroll when its content genuinely expands. .decwrap is the FLIP hero (breathes from the origin control). */ /* Desktop is a bounded decision desk: header and dock size to content, while the work row owns the remaining height. Genuine candidate overflow has one owner (.fanrows); no column becomes a second page. Mobile changes to a single route scroller in its structural media rule below. */ .decwrap{position:absolute;inset:0;padding:10px 15px 12px;display:grid; grid-template-rows:max-content minmax(0,1fr) max-content;gap:9px;overflow:hidden} .decgrid{--dec-left:clamp(600px,34vw,860px);--dec-right:clamp(500px,28vw,680px); display:grid;grid-template-columns:var(--dec-left) minmax(0,1fr) var(--dec-right);gap:13px;min-width:0} .decgrid{min-height:0;overflow:hidden} .deccol{min-height:0;min-width:0;display:flex;flex-direction:column;gap:9px;overflow:hidden} .deccol.dccenter{display:grid; grid-template-rows:minmax(0,1fr) clamp(210px,32vh,480px); gap:7px} @media(min-width:1701px){ /* The wide desk's market owner contains four independent analyses (quote, history, execution and research). Its measured floor is 380px; the former 32vh row clipped the final analysis at 1920×1080 even though the payoff owner above had room to yield. */ .deccol.dccenter{grid-template-rows:minmax(0,1fr) clamp(394px,35vh,480px)} } /* The dock is the surface's last grid row and it must not be overlapped by the work row above it. `align-items:end` was fine; what was missing is a stacking context of its own, so that if the work row ever does exceed its track (a mid-render measurement, a font that loads late) the dock stays legible rather than being printed through. */ .decdock{display:block;min-width:0;position:relative;z-index:2;background:var(--bg)} .decdock .dockorder span{font-size:var(--f-2xs);color:var(--faint)} .decdock>span{display:none} .decdock>.execute{width:100%;min-width:0} .decwrap.closewrap{display:flex;flex-direction:column;gap:11px;overflow:auto} /* templates row + wide (order) stepper reuse of .mstp */ .tmplrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:1px 0 3px} .tmplrow .lbl{margin:0} .tmplbtn{border:1px solid var(--line);background:var(--surface-control);color:var(--dim);border-radius:var(--control-radius);padding:3px 10px;font-size:var(--f-xs);font-weight:600;cursor:pointer;white-space:nowrap} .tmplbtn .tmplshort{display:none} .tmplbtn:hover{border-color:var(--accent-2);color:var(--text)} .mstp.wide{display:inline-flex;width:100%} .mstp.wide .mv{flex:1;text-align:left;font-size:var(--f-sm)} /* thin top spine: back · title · objective chips · recommendation (horizontal) */ .dectop{position:relative;flex:none;display:flex;align-items:center;gap:13px;padding:1px} .dectop .decttl{font-weight:800;font-size:var(--f-lg);white-space:nowrap} .dectop .decttl .dctx{color:var(--faint);font-weight:600;font-size:var(--f-sm)} .dectop .objrow{gap:7px;flex:none} .decintent{display:inline-flex;align-items:center;gap:9px;min-width:0;border:1px solid var(--line);border-radius:7px; background:var(--panel-2);color:var(--dim);padding:5px 8px 5px 11px;font-size:var(--f-sm);font-weight:650;cursor:pointer} .decintent:hover,.decintent.on{border-color:var(--accent-2);background:var(--accent-wash);color:var(--text)} .decintent b{font-family:var(--mono);color:var(--text)} .decintent .idots{color:var(--faint)} .decintent svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .intentpop{position:absolute;left:142px;top:calc(100% + 7px);z-index:70;display:flex;align-items:center;gap:7px; padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--pop-surface); box-shadow:0 14px 40px rgba(0,0,0,.55);animation:zoomin var(--mo-quick) var(--mo-ease)} .ideacomposer{gap:10px;overflow:hidden}.ideacomposer .lenshd .hint.num{font-family:var(--mono);color:var(--accent);font-weight:700}.ideacomposer .objrow{display:flex;flex-direction:column;align-items:stretch;gap:7px;overflow:auto;padding-right:2px}.ideacomposer .objchip{display:grid;grid-template-columns:88px minmax(0,1fr);width:100%;min-width:0}.ideacomposer .objchip>.ok{display:flex;align-items:center}.ideacomposer .objchip .oseg{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));min-width:0}.ideacomposer .objchip .oseg button{min-height:31px;padding:4px 6px}.ideacomposer .pickchip{position:relative}.ideacomposer .pickchip .pickbtn{width:100%;text-align:left} /* In the composer the symbol picker flows IN PLACE (the floating variant clipped against the scrolling declaration column — the "clipped search" defect). Rows push down instead. */ .ideacomposer .pickchip .univpop{position:static;grid-column:1/-1;width:100%;margin-top:6px;box-shadow:none} .ideacomposer .goaldeclarations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:9px;border:1px solid var(--accent-2);border-radius:8px;background:var(--accent-wash)} .ideacomposer .goaldeclarations>p{grid-column:1/-1;margin:0;color:var(--dim);font-size:var(--f-xs);line-height:1.4} .ideacomposer .goalfield{display:flex;flex-direction:column;gap:4px;min-width:0}.ideacomposer .goalfield span{color:var(--faint);font-size:var(--f-2xs);font-weight:750;letter-spacing:.04em;text-transform:uppercase}.ideacomposer .goalfield input{width:100%;min-width:0;height:33px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);padding:5px 8px;font:700 var(--f-sm) var(--mono);outline:none}.ideacomposer .goalfield input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash)} .ideacomposer .composerstatus{min-height:15px;color:var(--faint);font-size:var(--f-2xs);line-height:1.35}.ideacomposer .composerstatus.needs{color:var(--caution)} .ideacomposer .composerstructure{padding:8px;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel-2)}.ideacomposer .composeractions{display:flex;align-items:center;gap:6px;margin-top:2px}.ideacomposer .composeractions .btn:first-child{flex:1}.ideacomposer .composeractions .btn:disabled{opacity:.45;filter:saturate(.35);cursor:not-allowed;box-shadow:none}.ideacomposer .catalogdrawer{position:absolute;z-index:25;inset:42px 0 0;padding:10px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:var(--panel)} .dectop .rec{flex:1;min-width:0;padding:7px 12px} .dectop .rec .recmain{font-size:var(--f-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dectop .rec .receyebrow{display:inline;margin:0 4px 0 0;vertical-align:baseline} .dectop .rec .recwhy{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .backendstate{margin-left:auto;display:inline-flex;align-items:center;gap:6px;max-width:34ch;padding:4px 8px;border:1px solid var(--line-soft);border-radius:6px; color:var(--dim);font-family:var(--mono);font-size:var(--f-2xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .backendstate i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)} .backendstate.err{color:var(--loss);border-color:rgba(255,105,120,.35)}.backendstate.err i{background:var(--loss);box-shadow:0 0 0 3px var(--loss-wash)} .backendnotice{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:7px 9px;border:1px solid var(--line-soft);border-left:2px solid var(--accent);border-radius:7px;background:var(--panel-2);font-size:var(--f-xs);color:var(--dim);line-height:1.45} .backendnotice.err{border-left-color:var(--loss);color:var(--text)} .dcleft>.backendnotice,.evsimstage>.backendnotice{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .conditionedpatherror{height:100%;min-height:0;display:flex;align-items:center} .conditionedpathacts{display:flex;gap:8px;flex-wrap:wrap}.conditionedpatherror .backendnotice{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:12px}.conditionedpatherror .backendnotice b{color:var(--loss)}.conditionedpatherror .backendnotice .btn{margin-top:2px} .authpending{grid-column:1/-1;min-height:min(62vh,560px);display:grid;grid-template-columns:minmax(230px,.72fr) minmax(360px,1.45fr) minmax(260px,.85fr);gap:10px} .authpending .authpane{border:1px solid var(--line-soft);border-radius:9px;background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:hidden} .authpending .authpane.hero{background:linear-gradient(145deg,var(--panel),var(--panel-2))} .authpending .authline{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--line-soft),var(--row-hover),var(--line-soft));background-size:220% 100%;animation:authpulse 1.4s ease-in-out infinite} .authpending .authline:nth-child(2){width:76%}.authpending .authline:nth-child(3){width:58%}.authpending .authline.chart{height:clamp(150px,26vh,250px);width:100%;border-radius:7px} .authpending .authmessage{margin:auto;max-width:42ch;text-align:center;color:var(--dim);font-size:var(--f-sm);line-height:1.5}.authpending .authmessage b{display:block;color:var(--text);margin-bottom:5px} .authfailed{grid-column:1/-1;align-self:center;justify-self:center;width:min(720px,100%);padding:22px 24px; border:1px solid rgba(255,105,120,.34);border-left:3px solid var(--loss);border-radius:10px;background:var(--panel);box-shadow:0 18px 50px rgba(0,0,0,.18)} .authfailed .eyebrow{color:var(--loss)}.authfailed h2{margin:8px 0 7px;font-size:var(--f-xl);color:var(--text)} .authfailed p{margin:0;max-width:66ch;color:var(--dim);font-size:var(--f-sm);line-height:1.55;overflow-wrap:anywhere} .authfailed .authfailact{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:16px} .authfailed .authfailact .hint{flex:1;min-width:220px;line-height:1.4} .authempty{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:minmax(270px,.86fr) minmax(420px,1.35fr) minmax(280px,.9fr);gap:10px} .emptycard{min-width:0;border:1px solid var(--line-soft);border-radius:10px;background:var(--panel);padding:16px;overflow:auto} .emptycard.hero{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,var(--panel),var(--panel-2));border-color:var(--accent-2);padding:clamp(22px,4vw,52px)} .emptycard h2{margin:8px 0 8px;color:var(--text);font-size:clamp(20px,1.5vw,30px);line-height:1.15}.emptycard p{margin:0;color:var(--dim);font-size:var(--f-sm);line-height:1.55} .emptyfacts{display:grid;gap:7px;margin-top:13px}.emptyfact{padding:8px 9px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2);font-size:var(--f-xs);line-height:1.45;color:var(--dim);overflow-wrap:anywhere} .emptyfact b{display:block;color:var(--text);font-size:var(--f-xs);margin-bottom:2px}.emptyactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.emptyactions .btn{min-height:34px} .contextfacts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;margin-top:14px;font-size:var(--f-xs)}.contextfacts dt{color:var(--faint);text-transform:uppercase;letter-spacing:.05em}.contextfacts dd{margin:0;color:var(--text);font-family:var(--mono);overflow-wrap:anywhere} /* Ranking without endorsement is a useful comparison field, not a secretly selected first row. The ranked field keeps its ordinary left owner; the remaining width holds one compact choice analysis and the SAME package-independent market owner selected ideas use. No empty third rail, payoff, legs, paths, or order controls are invented before an explicit package choice. */ .decgrid.comparisonrequired{grid-template-columns:var(--dec-left) minmax(0,1fr)} .decgrid.comparisonrequired .comparisoncontext{display:grid; grid-template-columns:minmax(280px,.58fr) minmax(520px,1.42fr); grid-template-rows:minmax(0,1fr);gap:9px} .comparisonchoice{min-width:0;min-height:0;height:100%;border:1px solid var(--line-soft); border-radius:10px;background:var(--panel);padding:clamp(16px,2vw,30px);overflow:hidden} .comparisonchoice.hero{display:flex;flex-direction:column;justify-content:center; border-color:var(--accent-2);background:linear-gradient(145deg,var(--panel),var(--panel-2))} .comparisonchoice.hero.compact{padding:clamp(14px,1.6vw,24px)} .comparisonchoice h2{margin:9px 0 7px;font-size:clamp(22px,1.7vw,34px);line-height:1.12} .comparisonchoice p,.comparisonchoice small{max-width:62ch;margin:0;color:var(--dim);line-height:1.5} .comparisonchoiceflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; margin:clamp(18px,4vh,36px) 0 12px} .comparisonchoiceflow span{display:flex;align-items:center;gap:8px;min-width:0;padding:10px; border:1px solid var(--line-soft);border-radius:8px;background:var(--panel-2)} .comparisonchoiceflow i{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%; border:1px solid var(--accent-2);color:var(--accent);font:700 var(--f-xs) var(--mono)} .comparisonchoiceflow b{min-width:0;font-size:var(--f-xs);line-height:1.25} .comparisoncontext .marketlens.underlyingcontext{height:100%} .comparisoncontext .marketlens.underlyingcontext .neutralchain .packagebooknear{ display:flex;flex-direction:column;min-height:0} /* Production Book/Position states use the same visual grammar as Decide while retaining the approved cockpit composition. The file:// regression never enters these selectors. */ .bookauthority{grid-column:1/-1;grid-row:1/-1;min-width:0;min-height:0;display:flex;overflow:hidden} .bookauthority>.authpending,.bookauthority>.authempty{width:100%;height:100%} .bookauthority>.authfailed{margin:auto} .bookauthority .emptycard.hero .emptyactions{margin-top:22px} .authbookpanel{height:100%;min-height:min-content;display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel)} /* …except in the bands that occupy a sized board row. There the content floor made the panel taller than its band — a 412px #sectorBand holding an 818px panel — and an opaque panel drew over its neighbour: 24 cross-panel overprints at 2000x963 with twelve positions. Scoped, not removed: #riskMain's panel keeps the floor, because taking it away amputates 213px of the Scout workbench at 1000x800. */ /* …except in the bands that occupy a sized board row. There the content floor made the panel taller than its band — a 412px #sectorBand holding an 818px panel — and because the panel no longer clips (clipping hid facts), it drew straight across its neighbour: 24 cross-panel overprints at 2000x963 with twelve positions, 23 at 1920x1080, both now 0. Scoped deliberately: #riskMain KEEPS the floor. Without it the Scout workbench is amputated 213px below the GOAL row at 1000x800. Putting the floor on the bands instead, or removing it from #riskMain too, each just moves the overprint somewhere else — measured, three ways. The one width where #riskMain's panel still overflows its row is recorded in visual review. */ #univBand .authbookpanel,#sectorBand .authbookpanel,#newsBand .authbookpanel,#chainBand .authbookpanel, #bookrisk .authbookpanel{min-height:0} .authmetricgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px} .authmetric{min-width:0;padding:5px 7px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2);display:flex;flex-direction:column;gap:2px} .authmetric span{color:var(--faint);font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.06em}.authmetric b{color:var(--text);font-family:var(--mono);font-size:var(--f-sm);overflow-wrap:anywhere}.authmetric b.pos{color:var(--profit)}.authmetric b.neg{color:var(--loss)} .authmetric.unavailable{border-style:dashed}.authmetric.unavailable b{color:var(--muted);font-size:var(--f-xs);text-transform:uppercase}.authmetric small{color:var(--faint);font-size:var(--f-2xs);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sourcefacts{margin-top:auto;padding-top:8px;border-top:1px solid var(--line-soft);color:var(--faint);font-size:var(--f-2xs);line-height:1.45;overflow-wrap:anywhere} .authlist{display:flex;flex-direction:column;gap:5px;min-height:0;overflow:auto} .lv-book .authlist,.lv-book .authmarketwatch{overflow:hidden} .authmore{padding:3px 2px;color:var(--faint);font-size:var(--f-2xs);font-family:var(--mono)} .authlistrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:7px 8px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2);font-size:var(--f-xs);color:var(--dim)} .authlistrow b{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.authlistrow span:last-child{font-family:var(--mono);color:var(--faint);white-space:nowrap} .authsharerow{grid-template-columns:minmax(0,1fr) auto auto;align-items:center}.authsharerow .authrowmain{min-width:0;display:flex;flex-direction:column;gap:2px}.authsharerow .authrowmain small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.authshareshead{margin-top:4px} .authrosterempty{min-height:0;display:flex;flex:1;flex-direction:column;justify-content:center;gap:7px;padding:14px 10px;color:var(--dim);font-size:var(--f-xs);line-height:1.5} .authrosterempty b{color:var(--text);font-size:var(--f-sm)}.authrosterempty p{margin:0}.authrosterempty .emptyactions{margin-top:7px} .authemptybook{flex:1;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:9px;border:1px solid var(--line-soft);border-radius:8px;background:linear-gradient(145deg,var(--panel-2),var(--accent-wash));color:var(--dim);font-size:var(--f-xs);line-height:1.45} .authemptybook b{color:var(--text);font-size:var(--f-sm)}.authemptybook .emptyfacts{grid-template-columns:1fr 1fr;margin-top:4px}.authemptybook .emptyfact{margin:0;padding:6px 7px} .authlistbutton{width:100%;border:1px solid var(--line-soft);cursor:pointer;text-align:left;font:inherit;transition:border-color var(--mo-quick) var(--mo-ease),background var(--mo-quick) var(--mo-ease)} .authlistbutton:hover,.authlistbutton:focus-visible{border-color:var(--accent-2);background:var(--row-hover);outline:none} .authlistbutton .authrowmain{min-width:0;display:flex;flex-direction:column;gap:2px}.authlistbutton .authrowmain b{display:block}.authlistbutton .authrowmain small{color:var(--faint);font-size:var(--f-2xs);white-space:normal;line-height:1.3} .authlistbutton .authrowgo{color:var(--accent);font-family:var(--sans);font-size:var(--f-xs);font-weight:750} .authmarkethero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"symbol change price" "facts facts facts";align-items:baseline;gap:4px 10px;padding:10px;border:1px solid var(--line-soft);border-radius:8px;background:linear-gradient(145deg,var(--panel-2),var(--accent-wash))} .authmarkethero .amh-symbol{grid-area:symbol;font-family:var(--mono);font-size:var(--f-sm);font-weight:800;color:var(--text)}.authmarkethero .amh-price{grid-area:price;font-family:var(--mono);font-size:clamp(18px,1.35vw,25px);font-weight:800;color:var(--text);align-self:center}.authmarkethero .amh-change{grid-area:change;min-width:0;font-family:var(--mono);font-size:var(--f-xs)} .authmarkethero .amh-facts{grid-area:facts;display:inline-flex;min-width:0;gap:11px;align-items:baseline;color:var(--faint);font-size:var(--f-2xs);white-space:nowrap}.authmarkethero .amh-facts b{color:var(--dim);font-family:var(--mono)}.authmarkethero .amh-facts .pos{color:var(--profit)}.authmarkethero .amh-facts .neg{color:var(--loss)} .authmarketfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.authmarketfact{padding:6px 7px;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel-2);min-width:0} .authmarketfact span{display:block;color:var(--faint);font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.05em}.authmarketfact b{display:block;margin-top:2px;color:var(--text);font-family:var(--mono);font-size:var(--f-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .authmarketwatch{display:flex;flex-direction:column;gap:5px;min-height:0;overflow:auto} .authmarketwatch.elegantscroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity} .authmarketwatch.elegantscroll>[data-scroll-row]{flex:none;scroll-snap-align:start} .authhomenews.elegantscroll{flex:1 1 auto} .lv-book #univBand .authlist.elegantscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity} .lv-book #univBand .authlist.elegantscroll>[data-scroll-row]{scroll-snap-align:start} .watchoverflowmeta .overflowhair,.planoverflowmeta .overflowhair{min-width:45px} #authHomeOpportunity{flex:1;min-height:0;display:flex;overflow:hidden}#authHomeOpportunity>.opportunitylens{flex:1}#authHomeOpportunity .opportunityrows{flex:1} .authmarketrow{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2);color:var(--dim);overflow:hidden} .authmarketrow:hover,.authmarketrow:focus-within,.authmarketrow.on{border-color:var(--accent-2);background:var(--row-hover);outline:none}.authmarketrow.on{box-shadow:inset 2px 0 0 var(--accent)} .authmarketfocus{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 8px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer} .authmarketfocus:focus-visible,.authmarketgo:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .authmarketrow b{font-family:var(--mono);color:var(--text)}.authmarketrow span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--f-2xs);color:var(--faint)}.authmarketrow em{font-family:var(--mono);font-style:normal;color:var(--text);white-space:nowrap} .authtrackedrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;min-width:0; border:1px solid var(--line-soft);border-radius:8px;background:var(--panel-2);overflow:hidden} .authtrackedrow:hover,.authtrackedrow:focus-within{border-color:var(--accent-2);background:var(--row-hover)} .authtrackedfocus{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"account sym detail pnl"; align-items:center;gap:6px;min-width:0;border:0;background:transparent;color:var(--dim);padding:6px 8px;text-align:left;cursor:pointer} .authtrackedfocus .accountchip{grid-area:account}.authtrackedfocus>b{grid-area:sym;color:var(--text);font-family:var(--mono)} .authtrackedfocus>span:not(.accountchip){grid-area:detail;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--f-2xs);color:var(--faint)} .authtrackedfocus>em{grid-area:pnl;min-width:0;font-style:normal;font-family:var(--mono);font-size:var(--f-xs);text-align:right;white-space:nowrap} .authtrackedfocus>em small{display:block;color:var(--faint);font-size:9px} .accountchip{display:inline-flex;align-items:center;width:max-content;padding:1px 4px;border:1px solid var(--line); border-radius:999px;color:var(--dim);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.05em} .accountchip.tracked{border-color:var(--accent-2);color:var(--accent);background:var(--accent-wash)} .authtrackedstage{border:0;border-left:1px solid var(--line-soft);background:transparent;color:var(--accent); padding:4px 8px;font-size:var(--f-2xs);font-weight:750;cursor:pointer;white-space:nowrap} .authtrackedstage:hover,.authtrackedstage:focus-visible{background:var(--accent-wash);outline:none} @media (max-width:640px){ .authtrackedfocus{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"account sym pnl" "detail detail detail"} .authtrackedstage{padding-inline:6px} } .authmarketgo{min-width:64px;padding:5px 7px;border:0;border-left:1px solid var(--line-soft);background:var(--accent-wash);color:var(--accent);font-size:var(--f-2xs);font-weight:800;cursor:pointer;white-space:nowrap}.authmarketgo:hover{background:var(--accent);color:var(--bg)} .authhomenews{display:flex;flex-direction:column;gap:5px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity}.authhomenews>[data-scroll-row]{flex:none;scroll-snap-align:start}.authhomenews a{display:block;padding:7px 8px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2);color:var(--dim);font-size:var(--f-xs);line-height:1.35;text-decoration:none}.authhomenews a:hover,.authhomenews a:focus-visible{border-color:var(--accent-2);color:var(--text);outline:none}.authhomenews small{display:block;margin-top:3px;color:var(--faint);font-size:var(--f-2xs)} .newsoverflowmeta{margin-left:auto;min-width:92px;max-width:132px}.newsoverflowmeta .overflowhair{min-width:45px} .authmarketpulse{gap:7px}.authmarketfacts.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.authmarketfacts.compact .authmarketfact{padding:4px 6px}.authhomehistory{min-height:min-content;flex:1;display:flex;flex-direction:column;overflow:visible;border:1px solid var(--line-soft);border-radius:7px;background:linear-gradient(180deg,var(--panel-2),transparent);padding:5px 6px 3px}.authhomehistory svg{width:100%;height:100%;min-height:104px;display:block}.authhomehistory svg text{font-family:var(--mono);font-size:9px;fill:var(--faint)}.authhomehistorymeta{display:flex;justify-content:space-between;gap:8px;color:var(--faint);font-family:var(--mono);font-size:var(--f-2xs)} .opportunitylens{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);min-width:0;width:100%;max-width:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column}.opportunityprompt{display:flex;align-items:center;gap:8px;padding:7px 8px;border:1px solid var(--line-soft);border-radius:7px;background:linear-gradient(100deg,var(--accent-wash),transparent)}.opportunityprompt span{flex:1;min-width:0;color:var(--dim);font-size:var(--f-xs);line-height:1.35}.opportunityrows{display:grid;gap:5px;margin-top:6px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;scrollbar-width:thin;scrollbar-color:transparent transparent}.opportunityrows:hover,.opportunityrows:focus-within{scrollbar-color:var(--line) transparent}.opportunityrow{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;padding:6px;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel);color:var(--dim);font:inherit;text-align:left;scroll-snap-align:start;cursor:pointer}.opportunityrow:hover,.opportunityrow:focus-visible{border-color:var(--accent-2);background:var(--row-hover);outline:none}.opportunityrow>strong{align-self:start;padding-top:2px;font-family:var(--mono);color:var(--text)}.opportunityrow>span{min-width:0}.opportunitymain>b{overflow:hidden;text-overflow:ellipsis;color:var(--text);font-size:var(--f-xs);line-height:1.25;display:block;white-space:nowrap}.opportunityrow small{display:block;overflow:hidden;text-overflow:ellipsis;margin-top:2px;color:var(--faint);font-size:var(--f-2xs);white-space:nowrap} .opportunityrow .scoutfacts{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;white-space:normal;overflow:visible} .opportunityrow .scoutfacts>[data-scout-fact]{flex:none;white-space:nowrap} .scoutchecks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:4px}.scoutcheck{min-width:0;padding:3px 5px;border-left:2px solid var(--line);background:var(--panel-2);border-radius:3px}.scoutcheck>i{display:block;color:var(--faint);font-style:normal;font-size:var(--f-3xs);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.scoutcheck>b{display:block!important;margin-top:1px;color:var(--text);font-family:var(--mono);font-size:var(--f-2xs)!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}.scoutcheck>small{margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .opportunityrow em.pos{color:var(--profit)}.opportunityrow em.neg{color:var(--loss)} .opportunitygo{min-height:28px;padding:4px 7px;border:1px solid var(--accent-2);border-radius:5px;background:var(--accent-wash);color:var(--accent);font-size:var(--f-2xs);font-weight:800;white-space:nowrap;display:grid;place-items:center}.opportunityrow:hover .opportunitygo,.opportunityrow:focus-visible .opportunitygo{background:var(--accent);color:var(--bg)} .opportunitycontrols{display:flex;align-items:center;gap:7px 12px;margin-bottom:7px;min-width:0;flex-wrap:wrap}.opportunitycontrol{display:inline-flex;align-items:center;min-width:0;border:1px solid var(--line-soft);border-radius:6px;overflow:hidden;background:var(--panel-2)}.opportunitycontrol>b{padding:3px 6px;color:var(--faint);font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.05em}.opportunitycontrol button{min-height:24px;padding:3px 7px;border:0;border-left:1px solid var(--line-soft);background:transparent;color:var(--dim);font-size:var(--f-2xs);font-weight:650;white-space:nowrap;cursor:pointer}.opportunitycontrol button:hover{background:var(--row-hover);color:var(--text)}.opportunitycontrol button.on{background:var(--accent-wash);color:var(--accent)}.opportunitycontrol button small{color:var(--faint);font-family:var(--mono)} .scoutprogress{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px 8px;align-items:center;margin-top:6px;padding:7px 9px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2);color:var(--dim);font-size:var(--f-2xs)} .scoutprogress b{color:var(--text)} .scoutprogress meter{width:100%;height:5px;accent-color:var(--accent)} .scoutphase{letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:700;white-space:nowrap} .scoutmsg{color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 120px} /* the four counts: each its own quantity, none sharing a denominator with another */ .scoutcounts{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 13px;min-width:0} .scoutcount{color:var(--faint);white-space:nowrap} .scoutcount b{font-family:var(--mono)}.opportunityrows.provisional .opportunityrow{border-style:dashed}.opportunityrows.provisional .opportunityrow .opportunitymain>b:after{content:" · provisional";color:var(--accent);font-size:var(--f-3xs);font-weight:700} /* WAITING: work in flight or not yet asked for. A dashed edge says "this will fill in", which a solid panel does not. It is deliberately quiet — nothing is wrong. */ .deskwaiting{flex:1;min-height:52px;margin-top:5px;padding:9px;border:1px dashed var(--line-soft); border-radius:7px;display:grid;place-items:center;text-align:center;color:var(--faint); font-size:var(--f-2xs);line-height:1.5} /* ABSENT: genuinely nothing here, plus the next step. */ .deskabsent{min-height:0;display:flex;flex:1;flex-direction:column;justify-content:center;gap:7px; padding:14px 10px;color:var(--dim);font-size:var(--f-xs);line-height:1.5} .deskabsent b{color:var(--text);font-size:var(--f-sm)} .deskabsent p{margin:0} .deskabsent .emptyactions{margin-top:7px} .scoutwaiting{flex:1;min-height:52px;margin-top:5px;padding:9px;border:1px dashed var(--line-soft);border-radius:7px;display:grid;place-items:center;color:var(--faint);font-size:var(--f-2xs);line-height:1.4;text-align:center} .emptyopportunitypanel #authEmptyOpportunity,.emptyopportunitypanel #authHomeOpportunity{flex:1;min-height:0}.emptyopportunitypanel .opportunitylens{height:100%;display:flex;flex-direction:column} #authHomeOpportunity .opportunitylens:not(.expanded) .opportunitycontrols{gap:4px 6px;margin-bottom:3px;flex:none}#authHomeOpportunity .opportunitylens:not(.expanded) .opportunitycontrol button{padding-inline:5px}#authHomeOpportunity .opportunitylens:not(.expanded) .lenshd.sub{flex:none;margin-top:2px}#authHomeOpportunity .opportunitylens:not(.expanded) .opportunityrows{flex:1;min-height:66px;margin-top:4px}#authHomeOpportunity .opportunitylens:not(.expanded) .authpulsefoot{flex:none;margin-top:4px}#authHomeOpportunity .opportunitylens:not(.expanded) .authpulsefoot>span{white-space:nowrap} .authchainslice{min-height:0}.authchainhead,.authchainrow{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:6px;text-align:center;align-items:center}.authchainhead{color:var(--faint);font-size:var(--f-2xs);padding:1px 4px 3px}.authchainhead b{color:var(--dim);font-family:var(--mono)}.authchainrows{display:grid;gap:2px}.authchainrow{width:100%;padding:2px 5px;border:1px solid var(--line-soft);border-radius:5px;background:var(--panel-2);font-family:var(--mono);font-size:var(--f-2xs);color:var(--dim)}.authchainrow:hover,.authchainrow:focus-within{border-color:var(--accent-2);outline:none}.authchainrow.on{border-color:var(--accent-2);background:var(--accent-wash)}.authchainstrike{min-width:0;border:0;background:transparent;color:var(--text);font:inherit;cursor:pointer}.authchainstrike.atm{color:var(--accent);background:var(--accent-wash);border-radius:4px;padding:1px}.authchainbook{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0}.authchainbook button{min-width:0;padding:1px 2px;border:0;border-radius:3px;background:transparent;color:var(--dim);font:inherit;cursor:pointer}.authchainbook button:hover,.authchainbook button:focus-visible,.authchainstrike:hover,.authchainstrike:focus-visible{color:var(--accent);background:var(--accent-wash);outline:1px solid var(--accent-2)}.authchainbook i{color:var(--faint);font-style:normal}.authchainbook.unavailable{color:var(--faint)}.authchainslice>.sourcefacts{margin-top:3px;padding-top:3px}.authpulsefoot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--dim);font-size:var(--f-2xs)}.authpulsefoot>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.authresearchpulse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.authresearchpulse span{padding:6px;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel-2);color:var(--faint);font-size:var(--f-2xs)}.authresearchpulse b{display:block;color:var(--text);font-family:var(--mono);font-size:var(--f-sm)} .lv-book[data-book-authority="empty"] #bookrisk,.lv-book[data-book-authority="empty"] .book{display:none} .emptyopportunitypanel{background:linear-gradient(145deg,var(--panel),var(--accent-wash));border-color:var(--accent-2)} .authriskviz{flex:1;min-height:150px;width:100%;display:block}.authriskviz text{font-family:var(--mono);font-size:10px;fill:var(--faint)}.authriskviz .riskgrid{stroke:var(--line-soft);stroke-dasharray:2 4}.authriskviz .riskpoint{cursor:pointer}.authriskviz .riskpoint circle{transition:r var(--mo-quick) var(--mo-ease),fill-opacity var(--mo-quick) var(--mo-ease)}.authriskviz .riskpoint:hover circle,.authriskviz .riskpoint:focus circle{r:9px;fill-opacity:.62}.authriskviz .riskpoint:focus{outline:none} .authpos{display:flex;flex-direction:column;gap:8px;min-height:0;height:100%;padding-top:8px;border-top:1px solid var(--line-soft);overflow:hidden} .authpositionnav{display:none} .authposhero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.95fr);gap:10px;flex:none;min-height:clamp(205px,22vh,275px)} .authpaypanel,.authposside,.authresearchpanel{min-width:0;min-height:min-content;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2);padding:11px} .authpaypanel{display:flex;flex-direction:column}.authpayoff{width:100%;flex:1;min-height:150px;display:block} .authpaykey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:7px}.authpaykey span{min-width:0;padding:5px 6px;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel);color:var(--faint);font-size:var(--f-2xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.authpaykey b{display:block;margin-top:2px;color:var(--text);font-family:var(--mono);font-size:var(--f-xs);overflow:hidden;text-overflow:ellipsis}.authpaykey b.pos{color:var(--profit)}.authpaykey b.neg{color:var(--loss)} .authposside{display:flex;flex-direction:column;gap:8px}.authposside .authmetricgrid{grid-template-columns:1fr 1fr} .authpossub{min-width:0;min-height:0;display:flex;flex-direction:column} .authlifecycle{border-left:3px solid var(--accent-2);border-radius:7px;background:var(--panel);padding:7px 9px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:start} .authlifecycle.bad{border-left-color:var(--loss)}.authlifecycle.warn{border-left-color:var(--caution)}.authlifecycle.ok{border-left-color:var(--profit)} .authlifecycle .badge{grid-row:1/3;align-self:start}.authlifecycle b{font-size:var(--f-sm);line-height:1.2}.authlifecycle p{margin:0;color:var(--dim);font-size:var(--f-2xs);line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .authlifefacts{grid-column:1/-1;display:flex;gap:9px;flex-wrap:wrap;color:var(--faint);font:600 var(--f-2xs)/1.2 var(--mono)} .authdeclaredexit{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px 10px;align-items:center;border:1px solid var(--line-soft);border-left:3px solid var(--profit);border-radius:7px;background:var(--panel);padding:6px 9px} .authdeclaredexit b{font-size:var(--f-xs);white-space:nowrap} .authdeclaredexit p{margin:0;flex:1 1 260px;color:var(--dim);font-size:var(--f-2xs);line-height:1.3;display:block;-webkit-line-clamp:unset;overflow:visible} .authdeclaredexit.runup{border-left-color:var(--caution)} .authdeclaredexit.floor{border-left-color:var(--loss)} .dbfact.dbprotection{flex:1 1 100%;white-space:normal;line-height:1.35;color:var(--text)} .lifebadge{white-space:nowrap}.lifebadge.bad{color:var(--loss);border-color:var(--loss)}.lifebadge.warn{color:var(--caution);border-color:var(--caution)}.lifebadge.ok{color:var(--profit);border-color:var(--profit)}.lifebadge.pick{color:var(--accent);border-color:var(--accent-2)}.lifebadge.violet{color:var(--violet);border-color:var(--violet)} .authleglist{display:flex;flex-direction:column;gap:5px;max-height:155px;overflow:auto;padding-right:2px} .authleg{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px 8px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel);font-family:var(--mono);font-size:var(--f-xs);min-width:0} .authleg .side{font-weight:800}.authleg .side.buy{color:var(--profit)}.authleg .side.sell{color:var(--loss)}.authleg .contract{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.authleg .mark{color:var(--dim);white-space:nowrap} .authresearchgrid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,.72fr) minmax(0,1.35fr) minmax(0,.9fr) minmax(540px,1.25fr);gap:10px;min-height:0;align-items:stretch} .authresearchpanel{display:flex;flex-direction:column;gap:8px}.authhistory{width:100%;height:105px;display:block}.authhistory .emptyline{stroke:var(--line);stroke-dasharray:3 5} .authchainrow[data-chain-k]{transition:background var(--mo-quick) var(--mo-ease)} .authchainrow[data-chain-k]:hover{background:var(--row-hover);border-radius:4px} .authnews{display:flex;flex-direction:column;gap:5px;min-height:0;overflow:auto}.authnews a,.authnewsitem{display:block;padding:7px 8px;border:1px solid var(--line-soft);border-radius:6px;color:var(--dim);font-size:var(--f-sm);line-height:1.4;text-decoration:none}.authnews a b,.authnewsitem b{font-weight:650;color:var(--text)}.authnews a:hover{border-color:var(--accent-2)}.authnews small,.authnewsitem small{display:block;color:var(--faint);margin-top:3px;font-size:var(--f-xs)} /* Headlines are the only content in the news slot — bold+bright made them shout over the surface. They read as body text; the source line stays fainter beneath. */ .authnews a b,.authnewsitem b{font-weight:600;color:var(--dim)} .newsdisclosure{flex:none;min-height:26px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;color:var(--accent);font:650 var(--f-xs)/1.2 var(--sans);text-align:left}.newsdisclosure:hover,.newsdisclosure:focus-visible{border-color:var(--accent-2);background:var(--accent-wash);outline:none} .authpositionnotice{margin:auto;max-width:56ch;text-align:center;color:var(--dim);font-size:var(--f-sm);line-height:1.5}.authpositionnotice b{display:block;color:var(--text);margin-bottom:5px} .authscenstage{min-width:0;flex:1 1 auto;min-height:0;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2);padding:10px;display:flex;flex-direction:column;gap:8px} .authscenstage.unavailable{flex:0 0 auto;min-height:0;padding:8px 10px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center} .authscenstage.unavailable .lenshd{margin:0;gap:8px} .authscenstage.unavailable .authpositionnotice{margin:0;max-width:none;text-align:left;display:flex;align-items:baseline;gap:6px;font-size:var(--f-xs)} .authscenstage.unavailable .authpositionnotice b{display:inline;margin:0} .authpositionnoticeactions{display:inline-flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap} .authscenarioarea{display:grid;grid-template-columns:minmax(540px,1.12fr) minmax(400px,.88fr);gap:10px;min-width:0;flex:1;min-height:clamp(225px,25vh,300px)} .authscenpanel,.authpathpanel{min-width:0;min-height:0;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel);overflow:hidden} .authscenpanel{padding:7px} .authpathpanel{padding:9px} .authpathpanel{display:grid;grid-template-rows:auto minmax(90px,1fr) auto;gap:6px}.authpathviewport{min-width:0;min-height:0;display:flex;overflow:hidden}.authpathviewport>.authpositionnotice{flex:1}.authpathchart{width:100%;height:100%;min-height:0;display:block;overflow:hidden} .pathfan text{font-family:var(--mono);font-size:9px;fill:var(--faint)} .pathfan .fan-grid{stroke:var(--line-soft);stroke-dasharray:2 4} .pathfan .fan-story{stroke:var(--accent);stroke-opacity:.32;stroke-dasharray:3 3} .pathfan .fan-story-label{fill:var(--accent)} .pathfan .fan-band{stroke:none}.pathfan .fan-path,.pathfan .fan-median{fill:none} .pathfan .fan-context{stroke:var(--dim);stroke-opacity:.2;stroke-width:.85} .pathfan .fan-focusghost{stroke:var(--accent);stroke-opacity:.24;stroke-width:1.25} .pathfan .fan-focus{stroke:var(--accent);stroke-opacity:.98;stroke-width:2.1} .pathfan .fan-median{stroke:var(--accent);stroke-width:1.9} .pathfan .fan-hit{fill:none;stroke:transparent;stroke-width:11;pointer-events:none} .pathfan .fan-zero{stroke:var(--line);stroke-dasharray:3 4} .pathfan .fan-terminal{stroke:var(--dim);stroke-opacity:.36} .pathfan .fan-cursor{stroke:var(--accent);stroke-opacity:.5} .pathfan .fan-cursor-dot{fill:var(--ground);stroke:var(--accent);stroke-width:2} .pathfan .fan-cursor-label{fill:var(--text)} .pathfan .fan-interaction,.mcinteraction{fill:transparent;pointer-events:all;cursor:crosshair} .pathfan [data-fan-line]{transition:stroke-opacity var(--mo-quick) var(--mo-ease),stroke-width var(--mo-quick) var(--mo-ease)} .pathfan [data-fan-line].hot{stroke:var(--accent)!important;stroke-opacity:1!important;stroke-width:2.3!important} .authscenmetrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.authscenmetric{min-width:0;padding:6px 7px;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel-2)}.authscenmetric span{display:block;color:var(--faint);font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.05em}.authscenmetric b{display:block;margin-top:2px;font-family:var(--mono);font-size:var(--f-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.authscenmetric b.pos{color:var(--profit)}.authscenmetric b.neg{color:var(--loss)} .authscenrisk{width:100%;height:44px;display:block;margin-top:5px}.authscenrisk .track{stroke:var(--line);stroke-width:1}.authscenrisk .checkpoint{fill:var(--dim);fill-opacity:.35}.authscenrisk .live{fill:var(--accent);stroke:var(--text);stroke-width:1.2;filter:drop-shadow(0 0 3px rgba(70,213,181,.45))} .evidencesummary{display:flex;align-items:center;gap:7px 12px;flex-wrap:wrap;margin-top:5px; color:var(--faint);font:var(--f-2xs)/1.35 var(--mono)} .evidencesummary .badge{color:var(--violet);border-color:var(--violet)} .evidencesummary.pathsummary{justify-content:space-between} .authscendebug{display:none} body:has(#fixtureFlag:not([hidden])) .authscendebug{display:contents} .card.authoritative .cshare i{background:var(--accent)}.card.authoritative .cpeek{color:var(--dim)} .card.authoritative .cdetail{min-height:0} @media(max-width:1250px){.authscenarioarea{grid-template-columns:1fr}.authpathpanel{min-height:260px}} @media(max-width:1100px){.authposhero,.authresearchgrid{grid-template-columns:1fr}.authposhero{min-height:0}.authpayoff{min-height:220px}.authresearchpanel{min-height:220px}} /* On the principal desktop widths the decision sequence is causal: current position, its possible futures, then the supporting market analyses. All three remain visible in the default canvas. */ @media(min-width:1501px){ .authposhero{order:1;flex:0 0 clamp(270px,28vh,330px);min-height:0} .authposhero .authpaypanel,.authposhero .authposside{min-height:0;overflow:hidden} .authscenstage{order:2;min-height:0}.authscenarioarea{min-height:0} .authresearchgrid{order:3;flex:0 0 clamp(150px,16vh,190px);min-height:150px} .authresearchgrid .authresearchpanel{min-height:0;overflow:hidden;padding:7px;gap:4px} .authresearchgrid .authhistory{height:70px} .authresearchgrid .authmetricgrid{gap:3px}.authresearchgrid .authmetric{padding:3px 5px} .authresearchgrid .authlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;overflow:hidden} .authresearchgrid .authlistrow{padding:3px 5px;font-size:var(--f-2xs)} .authresearchgrid .authmanageacts{margin-top:4px;gap:4px;flex-wrap:nowrap} .authposside{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto auto minmax(0,1fr);gap:5px 8px} .authposside>.lenshd,.authposside>.authlifecycle,.authposside>.authmetricgrid{grid-column:1/-1} /* The verdict badge, fresh-eyes question and exact facts already communicate the resting decision. The generic policy sentence repeated that state and stole the final held leg at the owner's desktop height; retain it in the normal document/mobile composition only. */ .authposside>.authlifecycle:not(.lifeblocked)>p{display:none} /* A missing close mark is one compact evidence state, not a second hero. Keep the named missing input, observation time, and recovery action visible while preserving the exact held-leg rows below it. */ .authposside>.authlifecycle.lifeblocked{grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"badge facts retry";align-items:center;gap:3px 7px;padding-block:5px} .authposside>.authlifecycle.lifeblocked>.badge{grid-area:badge;justify-self:start} .authposside>.authlifecycle.lifeblocked>b{display:none} .authposside>.authlifecycle.lifeblocked>p{display:none} .authposside>.authlifecycle.lifeblocked>.authlifefacts{grid-area:facts;grid-column:auto;min-width:0; flex-wrap:wrap;gap:2px 8px;overflow:hidden} .authposside>.authlifecycle.lifeblocked>.authfailact{grid-area:retry} .authposside:has(>.authlifecycle.lifeblocked) .declegpanel.posheld .declegs .legr{padding-block:1px} .authposside>.authposgreeks{grid-column:1;grid-row:4}.authposside>.authposlegs{grid-column:2;grid-row:4} .authposside .authpossub>.lenshd{margin:0 0 4px} /* The exact held-leg count and expiration are an analysis result. Give them the full second row rather than truncating them between the section title and its action. */ .authposside .authposlegs>.lenshd{display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title action" "facts facts";gap:3px 6px;align-items:center;margin-bottom:0} .authposside .authposlegs>.lenshd .eyebrow{grid-area:title} .authposside .authposlegs>.lenshd .hint{grid-area:facts;margin-left:0;min-width:0; overflow:visible;text-overflow:clip;white-space:normal;line-height:1.1} .authposside .authposlegs>.lenshd .btn{grid-area:action;flex:none;padding:3px 7px} .authposside .authposgreeks .mechg{gap:4px;margin-top:0}.authposside .authposgreeks .mgt{padding:4px 6px} .authposside .authposgreeks .mgbar{margin:3px 0 0}.authposside .authposgreeks .mgc{display:none} .authposside .authmetricgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px} .authposside .authmetric{padding:6px 7px} .authposside .declegpanel.posheld .declegs{max-height:112px;gap:2px} .authposside .declegpanel.posheld .declegs .legr{padding:2px 5px;gap:1px} .authposside .declegpanel.posheld .declegs .legr-top{row-gap:1px} .authposside .declegpanel.posheld .declegs .lgm{line-height:1} /* Multi-leg held packages reuse the exact LegRow, but earn a two-column package area. The prior 112px cap silently hid the third through sixth contracts while the hero still had horizontal room. One/two-leg packages retain the established compact composition. */ .authposside:has(.authposlegs .legr:nth-child(3)){ grid-template-columns:minmax(170px,.55fr) minmax(0,1.45fr)} /* One full-width row per contract — the two-column split cramped every chip while the section had vertical room to spare. Same composition grammar as the Decide legs panel. */ .authposside:has(.authposlegs .legr:nth-child(3)) .authposlegs .declegs{ display:flex;flex-direction:column; max-height:none;overflow:visible;gap:3px} .authposside:has(.authposlegs .legr:nth-child(3)) .authposlegs .lgm{ flex-wrap:wrap;white-space:normal;overflow:visible} /* Six endpoint readings fit on one compact row at desktop. Their risk journey remains visible below the fan, but no implicit grid row can be clipped by the fixed-height Position canvas. */ .authpathpanel{grid-template-rows:auto minmax(105px,1fr) auto;gap:3px} .authpathpanel .mcpathread{display:none} .authpathpanel>div:last-child{min-height:0} .authpathpanel .scenmetriccap{margin-bottom:2px;font-size:9px;line-height:1.1} .authpathpanel .authscenmetrics{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px} .authpathpanel .authscenmetric{padding:3px 4px} .authpathpanel .authscenmetric b{margin-top:0} .authpathpanel .authscenrisk{height:22px;margin-top:2px} } @media(max-width:700px){.authscenmetrics{grid-template-columns:repeat(2,minmax(0,1fr))}.authscenarioarea{min-height:0}.authpathpanel{min-height:235px}.authleg{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"side qty mark" "side contract contract"}.authleg .side{grid-area:side}.authleg>span:nth-child(2){grid-area:qty}.authleg .contract{grid-area:contract}.authleg .mark{grid-area:mark}.authmarketfacts.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.authhomehistorymeta{flex-direction:column;gap:2px}.authresearchpulse{grid-template-columns:1fr}.authchainhead,.authchainrow{grid-template-columns:minmax(0,1fr) 62px minmax(0,1fr)}.authpaykey{grid-template-columns:repeat(2,minmax(0,1fr))}.authscenstage.unavailable{grid-template-columns:minmax(0,1fr)}.authscenstage.unavailable .authpositionnotice{display:block}.authscenstage.unavailable .authpositionnotice b{display:block;margin-bottom:3px}.authpositionnoticeactions{display:flex;margin:8px 0 0;white-space:normal;flex-wrap:wrap}} @keyframes authpulse{50%{background-position:100% 0;opacity:.58}} .authcompare{display:grid;gap:7px;margin-top:8px}.authcompare .acrow{display:grid;grid-template-columns:minmax(120px,1fr) repeat(4,minmax(64px,.62fr));gap:8px;align-items:center;padding:7px 8px;border:1px solid var(--line-soft);border-radius:6px;font-size:var(--f-xs)} .authcompare button.acrow{width:100%;background:var(--panel);color:inherit;text-align:inherit;cursor:pointer}.authcompare button.acrow:hover,.authcompare button.acrow.on{border-color:var(--accent-2);background:var(--accent-wash)} .authcompare .acrow.head{border:0;padding-block:2px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-size:var(--f-2xs)}.authcompare .acrow.proposed{background:var(--accent-wash);border-color:var(--accent-2)} .authcompare .acrow b,.authcompare .acrow span:not(:first-child){font-family:var(--mono)}.authcompare .acrow span:not(:first-child){text-align:right}.authcompare .acrow b{text-align:left;color:var(--text)} .authcompare .acrow b small{color:var(--accent);font-family:var(--sans);font-weight:650} .upanel.bookcmp{display:flex;flex-direction:column;min-height:0} .upanel.bookcmp .authcompare.acrows{flex:1 1 auto;min-height:0;margin-top:0;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;align-content:start;scrollbar-width:none} .upanel.bookcmp .authcompare.acrows::-webkit-scrollbar{width:0} .upanel.bookcmp .authcompare.acrows>[data-scroll-row]{scroll-snap-align:start} .inspectpane:has(.upanel.bookcmp){display:flex;flex-direction:column;min-height:0;overflow:hidden} .inspectpane:has(.upanel.bookcmp)>.upanel.bookcmp{flex:1;min-height:0} .authbasis{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.authbasis .badge{color:var(--violet);border-color:var(--violet)} .btn.xs{padding:5px 10px;font-size:var(--f-sm);border-radius:6px} .btn.ghost{background:transparent;border-color:var(--line);color:var(--dim)} .btn.ghost:hover{border-color:var(--accent-2);color:var(--text)} /* CENTER — payoff is a bounded hero (was flex:1, i.e. as-tall-as-the-column); scenarios + numbers + legs + execute flow beneath it. Still the drag surface, just not vertically dominant. */ .dcctop{display:grid;grid-template-rows:minmax(170px,1fr) max-content;min-height:0;gap:7px;align-items:stretch;margin-bottom:0;overflow:hidden} .dcctop .dccpay{display:flex;height:100%;min-height:0;flex-direction:column;gap:6px;min-width:0;overflow:hidden} .dccenter .decpay{flex:1 1 auto;height:auto;min-height:130px;width:100%;display:block;border:1px solid var(--line-soft); border-radius:9px;background:var(--panel-2)} .dccenter .paytitle{margin-bottom:2px} .dccenter .scenpanel{height:auto} .dccenter .numrow{flex:none} /* LEFT — ideas lead, then the exact package, with the linked risk/reward map as supporting context. Screens/caps is summoned over this single rail instead of becoming another destination. */ .dcleft{position:relative} .dcleft .modebar{margin:0;flex:none} .dcleft .srcpanel,.dcleft .govpanel{margin:0} /* The ranked field owns its real rows, not an arbitrary half-column. It shrinks only when the support region would otherwise disappear; that genuine overflow stays in .fanrows. The exact package therefore follows the last visible recommendation immediately, and the map receives every pixel the list did not earn. */ /* THE one intentional overflow owner on this surface (review's definition of done: "only one intentional overflow owner where content genuinely exceeds capacity"). Twenty candidates should scroll in place, not make the whole overlay three thousand pixels tall. The bound is in viewport units on purpose: it used to be `calc(100% - 224px)` of a column that is now content-sized, so the percentage no longer resolved, the list never bounded, and its "+N more" affordance stopped appearing at all. */ .dcleft .fan{flex:0 1 auto;min-height:110px;max-height:none;overflow:hidden;padding-right:2px} .dcleft .fanrows{flex:0 1 auto} .fanrows{flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;scrollbar-width:none;mask-image:linear-gradient(to bottom,transparent 0,#000 0,#000 100%,transparent 100%)} .fanrows::-webkit-scrollbar,.elegantscroll::-webkit-scrollbar{width:0;height:0}.fanrows:hover,.fanrows:focus-within,.elegantscroll:hover,.elegantscroll:focus-within{scrollbar-width:thin;scrollbar-color:var(--line) transparent}.fanrows:hover::-webkit-scrollbar,.elegantscroll:hover::-webkit-scrollbar{width:4px}.fanrows:hover::-webkit-scrollbar-thumb,.elegantscroll:hover::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} .fanrows .fanr,.elegantscroll>[data-scroll-row],.elegantscroll>.card{scroll-snap-align:start;scroll-snap-stop:normal;flex:none} .fangroup{display:flex;align-items:baseline;gap:7px;min-height:18px;padding:2px 7px 0;color:var(--dim);font-size:var(--f-2xs);line-height:1.2} .fangroup b{color:var(--accent);font-size:var(--f-xs);letter-spacing:.035em;text-transform:uppercase} .fangroup span{margin-left:auto;color:var(--faint);font-family:var(--mono);text-align:right} .fangroup.different b{color:var(--caution)}.fangroup.unavailable b{color:var(--faint)} .overflowmeta{display:none;flex:none;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;height:15px;color:var(--faint);font-size:9px;line-height:1}.hasoverflow+.overflowmeta,.overflowmeta.on{display:grid}.overflowhair{height:2px;border-radius:2px;background:var(--line-soft);overflow:hidden}.overflowhair i{display:block;height:100%;width:20%;background:var(--accent-2);transform:translateX(0);border-radius:2px}.overflowread{border:0;background:transparent;white-space:nowrap;font-family:var(--mono);padding:0;color:inherit;cursor:pointer}.overflowread:hover,.overflowread:focus-visible{color:var(--accent);outline:none} .disclosure-collapsed{overflow:hidden!important;scroll-snap-type:none!important;mask-image:none!important} .mobilefold,.mobilefoldbody{display:contents} .mobilefoldtoggle{display:none} .disclosure-expanded{overflow-y:auto!important} /* the support strip absorbs the column's leftover so the risk/reward map grows to the bottom — no dead band under the map */ /* The legs + risk map take the height their content needs; the candidate FAN above is the one intentional scroller and absorbs the squeeze. As a shrinkable flex item with overflow:hidden this panel was crushed 34px below its content at 2000x963 — the coverage line was cut and the risk map's remnant was pushed into the order dock's band. */ /* ONE composition at every width: exact legs first, then the risk/reward map below them at the column's full width. The side-by-side split squeezed the map into a ~200px track where its axis labels collided; a full-width landscape map is the readable form. */ .dcleft .leftsupport{flex:0 0 auto;min-height:min-content;display:grid; grid-template-columns:minmax(0,1fr);gap:9px;align-items:stretch} .dcleft .leftsupport>.declegpanel{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;align-self:start} .dcleft .pickmap{min-width:0;min-height:0;display:flex;flex-direction:column;gap:4px; border-top:1px solid var(--line-soft);padding-top:7px;overflow:hidden} .dcleft .decmap{flex:1;height:auto;min-height:150px} .dcleft .srchd.sub{margin:2px 0 0} .dcleft .srchd .gshown{margin-left:auto;font-family:var(--mono);font-size:var(--f-sm);font-weight:700;color:var(--accent)} .dcleft .srchd .gshown small{color:var(--faint);font-weight:600} @media (min-width:1900px) and (min-height:1200px){ /* Keep the decision sequence spatially honest on tall wide canvases: the selected package follows its ranked alternatives immediately instead of being pushed to the bottom by an expanding empty fan rail. Shorter canvases let the list flex to the full column instead. */ .dcleft .fan{flex:0 1 auto;height:auto;max-height:46vh} .dcleft .leftsupport{display:grid;grid-template-columns:minmax(0,1fr);gap:9px} .dcleft .pickmap{min-height:0;height:auto;border-top:1px solid var(--line-soft);border-left:0;padding:7px 0 0} .dcleft .decmap{min-height:195px} /* A short package should not force a tall empty workbench. On the largest canvas its compact inline editor sits beside a larger linked map, immediately after the ranked field. */ /* Geometry never depends on the SELECTED candidate: a 2-leg package must not rearrange the workbench/map strip. The map keeps a bounded landscape aspect on full fields; a few-ideas load (a per-load fact) may give the full-width map the leftover height. */ .dcleft .pickmap{max-height:none} } @media (min-width:1900px) and (min-height:1000px){ /* Wide canvases use the same two-row centre ownership as every other desktop. Width enriches the plot and analyses; it does not install a second sizing algorithm. */ .dccenter .scenpanel{min-height:0} } /* compact governor — smaller sliders, tighter rows; a control strip, not the headline */ .dcleft .govpanel{padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2)} .dcleft .govhd{margin-bottom:8px} .dcleft .gov{margin-bottom:8px} .dcleft .gov .gh{margin-bottom:3px} .dcleft .gov .slider{height:3px} .dcleft .gov .slider::-webkit-slider-thumb{width:11px;height:11px;border-width:2px} .dcleft .gov .slider::-moz-range-thumb{width:11px;height:11px;border-width:2px} .dcleft .gct{margin-bottom:5px} .dcleft .bpread{margin-top:8px;padding-top:8px} .dcleft .raildrawer.capsdrawer{position:absolute;z-index:25;inset:34px 0 0;padding:10px;overflow:auto; border:1px solid var(--line);border-radius:10px;background:var(--pop-surface);box-shadow:0 16px 42px rgba(0,0,0,.58)} .dcleft .raildrawer.catalogdrawer{position:absolute;z-index:25;inset:34px 0 0;padding:10px;overflow:auto; border:1px solid var(--line);border-radius:10px;background:var(--pop-surface);box-shadow:0 16px 42px rgba(0,0,0,.58)} .catalogintro{margin:7px 0 9px;color:var(--dim);font-size:var(--f-xs);line-height:1.45} .cataloglist{display:flex;flex-direction:column;gap:5px} .catalogrow{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 8px; border:1px solid var(--line-soft);border-radius:7px;background:var(--panel);color:var(--dim);text-align:left} button.catalogrow{cursor:pointer;font:inherit}.catalogrow.now{border-color:var(--accent-2);background:var(--accent-wash)} button.catalogrow:hover,button.catalogrow:focus-visible{border-color:var(--accent);outline:none}.catalogrow.blocked{opacity:.62} .catalogshape{width:42px;height:22px}.catalogshape polyline{fill:none;stroke:var(--accent-2);stroke-width:1.5;vector-effect:non-scaling-stroke} .catalogcopy{min-width:0}.catalogcopy b{display:block;color:var(--text);font-size:var(--f-xs)} .catalogcopy em{display:block;margin-top:1px;color:var(--accent-2);font:normal var(--f-2xs)/1.25 var(--mono)} .catalogcopy small{display:block;margin-top:2px;color:var(--faint);font-size:var(--f-2xs);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .catalogstate{font-family:var(--mono);font-size:var(--f-2xs);white-space:nowrap;color:var(--faint)} .catalogrow.now .catalogstate{color:var(--accent)}.catalogrow.screened .catalogstate{color:var(--caution)} /* Decide RIGHT column: one Understand owner. Stored history belongs to the centre; compact package pricing and research accompany Paths without becoming another state owner. */ .dcright{gap:12px} .dcright>*:first-child{flex:1 1 auto;min-height:0} .understand{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;container:understand / inline-size;overflow:hidden} @media (max-width:1700px){ .decgrid,.decdock{--dec-left:clamp(340px,28vw,500px);--dec-right:clamp(300px,25vw,440px);gap:9px} .decwrap{padding-left:10px;padding-right:10px} .tmplbtn .tmpllong{display:none}.tmplbtn .tmplshort{display:inline} .dcleft .srchd.sub{min-width:0;gap:5px}.dcleft .srchd.sub .lbl{flex:none;white-space:nowrap;margin-right:0} .dcleft .srchd.sub .hint{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right} .dcleft .pickmap .fanleg{display:none} } @media (min-width:1501px) and (max-width:1700px){ /* Known desktop widths keep the idea/leg rail readable while reserving a real analysis column for the stored path ensemble. The payoff remains the visual center without consuming the evidence surface. */ .decgrid,.decdock{--dec-left:clamp(470px,34vw,560px);--dec-right:clamp(400px,29vw,480px)} } @media (min-width:1501px) and (max-width:1700px) and (min-height:851px) and (max-height:1000px){ .dcleft .declegpanel .declegs{max-height:none} } @media (min-width:1501px) and (max-width:1700px) and (max-height:1000px){ .decwrap{padding-top:7px;padding-bottom:8px;gap:6px} .deccol{gap:5px}.dcctop{gap:5px} .deccol.dccenter{ /* At laptop height the Market owner needs its measured 349px to retain history, execution evidence and news. The shared compact four-column ScenarioSpectrum fits the remaining analysis row without clipping its final stories. */ grid-template-rows:minmax(0,1fr) clamp(330px,39vh,360px)} .dccenter .marketlens .histchart{flex:1;height:auto;min-height:60px} .dccenter .marketlens .histstrip{display:none} /* Short desktops keep all three left-rail jobs visible. Candidates and longer exact-leg stacks scroll only inside their own panels; the linked risk map retains a real chart area. */ .dcleft .fan{min-height:86px} .dcleft .declegpanel .declegs{max-height:none} .dcleft .pickmap{min-height:0} .declegpanel{padding:4px 6px}.decleghead{align-items:center;gap:6px;margin-bottom:2px} .dccenter .decpay{min-height:110px} .dccenter .kgrid.calm .k{padding-top:5px;padding-bottom:5px} .dccenter .ksecondary{margin-top:2px;gap:10px} .dccenter .tmplrow{flex-wrap:nowrap;gap:4px;margin:0}.dccenter .tmplrow .lbl{font-size:var(--f-2xs)} .dccenter .tmplbtn{padding:2px 6px;font-size:11px} .dccenter .leghd{margin:3px 0 2px}.dccenter .leghd .hint{display:none} .dccenter .declegs{flex-wrap:nowrap;margin:0}.dccenter .declegs .lgm{display:none} .dccenter .declegs .tgl{padding:1px 3px;font-size:10px} .dccenter .declegs .legr{flex:1;min-width:0}.dccenter .addleg.sm{padding:4px 7px;font-size:11px;white-space:nowrap} .dccenter .addleg.sm .addlong{display:none}.dccenter .addleg.sm{width:30px;padding-left:0;padding-right:0} .dcleft .srchd.sub{min-width:0;gap:5px}.dcleft .srchd.sub .lbl{flex:none;white-space:nowrap;margin-right:0} .dcleft .srchd.sub .hint{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right} .dcleft .pickmap .fanleg{display:none}.dcleft .decmap{min-height:135px} .understand{gap:5px}.understand .inspectwell{min-height:0} .inspectpane{padding:7px 8px} .inspectpane>.upanel .lenshd{gap:6px;margin-bottom:3px;min-width:0} .inspectpane>.upanel .lenshd .eyebrow{flex:none;white-space:nowrap} .inspectpane>.upanel .lenshd .hint{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inspectpane .evgrid{gap:3px}.inspectpane .evrow{gap:9px}.inspectpane .evrow .evk{width:auto} .inspectpane .evrow .evtxt{font-size:var(--f-xs);line-height:1.25} .inspectpane .evsimstage{min-height:100px;margin-top:5px} .inspectpane .evidencesummary{margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inspectpane .evidencesummary span:last-child{display:none} .bookimpact .lenshd{margin-bottom:4px} .bookimpact .paneverdict{padding:6px 7px}.bookimpact .paneverdict span{display:none} .bookimpact .bookfacts{gap:4px;margin-top:5px} .bookimpact .bookfact2{padding:4px 6px}.bookimpact .bookfact2 b{margin-top:1px;font-size:var(--f-xs)} .bookimpact .bookcompare,.bookimpact .bookgreeks{margin-top:5px} .bookimpact .bookgreeks span{padding-top:1px;padding-bottom:1px} .bookimpact .corrrow{margin-top:5px;gap:4px}.bookimpact .corrchip{font-size:var(--f-xs);padding:0 4px} .bookimpact .panefoot{padding-top:5px;font-size:var(--f-2xs);line-height:1.25} .inspectpane .cohpips{gap:4px;margin:2px 0 5px}.inspectpane .cohpip{padding:4px 6px}.inspectpane .cohpip .cohnote{display:none} .inspectpane .cohprose{padding-top:5px;font-size:var(--f-2xs);line-height:1.3} .inspectpane .tailpanel{padding:6px 7px}.inspectpane .tailpanel .lenshd{margin-bottom:1px} .inspectpane .tailmain{font-size:var(--f-xs);line-height:1.3;margin:2px 0}.inspectpane .tailsub{font-size:var(--f-2xs);line-height:1.25} .inspectpane .fitbudget{margin-top:5px;padding:6px 7px} .inspectpane .mechg{gap:4px;margin-top:2px}.inspectpane .mgt{padding:5px 6px}.inspectpane .mgbar{margin:3px 0 2px} .inspectpane .mgc{font-size:var(--f-2xs)}.inspectpane .mechstats{gap:4px 8px;margin-top:5px} .inspectpane .sensitivity{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:5px;padding-top:5px} .inspectpane .sensitivity>.lbl{grid-column:1/-1} .inspectpane .sensrow{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab val" "track track";gap:2px 4px;margin-top:0} .inspectpane .sensrow>span{grid-area:lab;white-space:nowrap}.inspectpane .sensrow>i{grid-area:track}.inspectpane .sensrow>b{grid-area:val} .inspectpane .legsummary{margin-top:5px;padding-top:5px;gap:3px} .inspectpane .ensembleresult{grid-template-rows:auto minmax(72px,1fr) auto;gap:2px} .inspectpane .ensembleresult .mcfan{min-height:72px} .inspectpane .ensembleresult .mcstats{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px} .inspectpane .ensembleresult .mcs{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px} .inspectpane .ensembleresult .mck,.inspectpane .ensembleresult .mcv{font-size:10px} .dccenter:has(.srow-ctl) .decpay{min-height:92px} } @media (min-width:1501px) and (max-width:1899px) and (min-height:851px) and (max-height:1150px), (min-width:1900px) and (max-height:999px){ /* Desk-height density changes internal components only. The centre's two ownership rows remain the same, so How it reacts cannot paint into Market as content wraps. */ .dcright{overflow:hidden} .dccenter .marketlens .histchart{flex:1;height:auto;min-height:72px} .dccenter .marketlens .histstrip{display:none} .dccenter .scenpanel{height:auto;min-height:0} } .execute{flex:none} .usechead{font-size:var(--f-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);font-weight:700;margin-bottom:1px} .upanel{border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2);padding:var(--upanel-pad,10px 12px)} .upanel .lenshd{margin-bottom:var(--upanel-lens-gap,7px)} .upanel .mechg{margin-top:4px} .decisionbrief{border:1px solid var(--line-soft);border-left:2px solid var(--accent);border-radius:9px;background:var(--panel-2);padding:10px 11px} .decisionbrief.warn{border-left-color:var(--caution)}.decisionbrief.bad{border-left-color:var(--loss)} .decisionbrief .dbtop{display:flex;align-items:center;gap:8px}.decisionbrief .dbtop b{font-size:var(--f-sm);color:var(--text)} .decisionbrief .dbfit{margin-left:auto;font-size:var(--f-2xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)} .decisionbrief.warn .dbfit{color:var(--caution)}.decisionbrief.bad .dbfit{color:var(--loss)} .decisionbrief .dbfacts{display:flex;align-items:center;gap:9px;margin-top:8px;flex-wrap:wrap} .decisionbrief .dbfact{font-size:var(--f-2xs);color:var(--faint);display:inline-flex;align-items:baseline;gap:4px} .decisionbrief .dbfact b{font-family:var(--mono);font-size:var(--f-xs)} .decisionbrief .dbaction{display:block;width:max-content;max-width:100%;margin-top:6px} .decisionstates{display:flex;align-items:stretch;gap:5px;margin-top:7px;flex-wrap:wrap} .decisionstate{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:3px 6px;border:1px solid var(--line); border-radius:5px;background:var(--surface-control);color:var(--dim)} .decisionstate small{font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--faint)} .decisionstate b{font-size:var(--f-2xs);white-space:nowrap;color:var(--text)} .decisionstate.good{border-color:color-mix(in srgb,var(--profit) 45%,var(--line));background:color-mix(in srgb,var(--profit) 7%,var(--surface-control))} .decisionstate.good b{color:var(--profit)} .decisionstate.warn{border-color:color-mix(in srgb,var(--caution) 50%,var(--line));background:color-mix(in srgb,var(--caution) 7%,var(--surface-control))} .decisionstate.warn b{color:var(--caution)} .decisionstate.bad{border-color:color-mix(in srgb,var(--loss) 50%,var(--line));background:color-mix(in srgb,var(--loss) 7%,var(--surface-control))} .decisionstate.bad b{color:var(--loss)} .decisionstate.assumed b{color:var(--caution)} /* F (#9): ONE EV analysis — the realized-vol result owns the verdict color; the market-implied result is muted and carries a persistent (non-tooltip) benchmark caption; premium richness is muted too. */ .evsummary{display:flex;flex-direction:column;gap:6px;margin-top:8px} .evsummary .evrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;padding:6px 8px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel)} .evsummary .evrow.primary{border-color:var(--line)} .evsummary .evrow.primary.pos{border-left:3px solid var(--profit)} .evsummary .evrow.primary.neg{border-left:3px solid var(--loss)} .evsummary .evlabel{font-size:var(--f-2xs);color:var(--dim)} .evsummary .evrow.muted .evlabel{color:var(--faint)} .evsummary .evlabel small{color:var(--faint);font-weight:400} .evsummary .evval{font-family:var(--mono);font-size:var(--f-sm);color:var(--dim)} .evsummary .evval.pos{color:var(--profit)} .evsummary .evval.neg{color:var(--loss)} .evsummary .evband{grid-column:1/-1;font-size:var(--f-2xs);color:var(--faint);font-family:var(--mono);margin-top:2px} .evsummary .evcaption{grid-column:1/-1;font-size:var(--f-2xs);color:var(--faint);line-height:1.4;margin-top:2px} .evsummary.compact .evrow{padding:5px 7px} .inspectrail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px} .inspectrail.five{grid-template-columns:repeat(5,minmax(0,1fr))} .inspecttab{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico name" "ico value";align-items:center;column-gap:5px; border:1px solid var(--line-soft);border-radius:7px;background:var(--panel);color:var(--faint);padding:6px 7px;text-align:left; font-size:var(--f-2xs);font-weight:700;cursor:pointer;min-width:0} .inspecttab:hover,.inspecttab.on{border-color:var(--accent-2);color:var(--text);background:var(--accent-wash)} .inspecttab svg{grid-area:ico;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .inspecttab span{grid-area:name;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inspecttab b{grid-area:value;font-family:var(--mono);font-size:var(--f-2xs);color:var(--dim);font-weight:700;line-height:1.2;white-space:normal;overflow-wrap:anywhere} .inspecttab.on b{color:var(--accent)} @container understand (max-width:420px){ .understand .inspectrail,.understand .inspectrail.five{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px} .understand .inspecttab{padding:3px 6px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico name" "ico value"} .understand .inspecttab b{grid-area:value;text-align:left} .understand .decisionbrief{padding:6px 7px} .understand .decisionbrief .dbtop b{font-size:var(--f-xs);line-height:1.25} .understand .decisionbrief .dbfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:5px} .understand .decisionbrief .dbfact{display:flex;min-width:0;flex-direction:column;gap:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* The VALUE ellipsised but the label did not, so a fact's name lost its last characters with no sign that anything was missing — "…cost benchmar". Both truncate visibly now. */ .understand .decisionbrief .dbfact b,.understand .decisionbrief .dbfact>span{overflow:hidden;text-overflow:ellipsis} } @container understand (min-width:340px) and (max-width:420px){ /* A 340–420px decision rail can carry the five short lens names in one row. The former two-column rule made five tabs consume three rows, starving the actual evidence plot. */ .understand .inspectrail.five{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px} .understand .inspectrail.five .inspecttab{display:flex;min-width:0;min-height:37px; flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:3px 5px} .understand .inspectrail.five .inspecttab svg{display:none} .understand .inspectrail.five .inspecttab span, .understand .inspectrail.five .inspecttab b{width:100%;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} } .inspectwell{flex:1;height:auto;min-height:0;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2);overflow:hidden} .inspectpane{height:100%;min-height:0;padding:8px 10px;overflow:hidden} /* Greeks/mechanics is the pane's only child: distribute the pane's real height instead of stacking intrinsic margins past it — no scrollbar at desk heights, scroll only as a true too-small fallback */ .inspectpane>.upanel:only-child:has(>.mechg){height:auto;display:grid;grid-template-rows:auto auto auto auto auto;gap:7px;align-content:start} .inspectpane>.upanel:only-child:has(>.mechg)>.mechg{height:100%;min-height:0;margin:0;grid-auto-rows:minmax(0,1fr)} .inspectpane>.upanel:only-child:has(>.mechg)>.mechg .mgt{display:flex;flex-direction:column;justify-content:center;min-height:0;overflow:hidden} .inspectpane>.upanel:only-child:has(>.mechg)>.mechstats{margin:0} .inspectpane>.upanel:only-child:has(>.mechg)>.sensitivity{margin:0;min-height:0} .inspectpane>.upanel:only-child:has(>.mechg)>.legsummary{margin:0;padding-top:6px} .inspectpane>.upanel{border:0;background:transparent;padding:0} .inspectpane>.upanel:only-child{height:100%;min-height:0;display:flex;flex-direction:column} .inspectpane .cohpanel+.tailpanel{margin-top:8px} .inspectpane .bookimpact{height:100%;display:flex;flex-direction:column} .historicalreplay{display:flex;height:100%;min-height:0;flex-direction:column;gap:7px} .replaycontrols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:end} .replaycontrols label{display:flex;min-width:0;flex-direction:column;gap:3px;color:var(--faint);font-size:var(--f-2xs)} .replaycontrols input{min-width:0;width:100%;height:30px;border:1px solid var(--line-soft);border-radius:6px; background:var(--panel);color:var(--text);padding:3px 6px;font:650 var(--f-xs)/1 var(--mono)} .replaycontrols .btn{display:inline-flex;height:30px;min-height:30px;align-items:center;justify-content:center; padding:0 14px;line-height:1;white-space:nowrap} .replayempty,.replaypending{display:flex;flex:1;min-height:110px;align-items:center;justify-content:center; gap:9px;border:1px dashed var(--line-soft);border-radius:8px;color:var(--dim);text-align:left} .replayempty{flex-direction:column;text-align:center;padding:12px}.replayempty b,.replaypending b{color:var(--text)} .replayempty span,.replaypending span{display:block;color:var(--faint);font-size:var(--f-xs);line-height:1.35} .replayresult{display:flex;min-height:0;flex-direction:column;gap:7px;padding:7px;border:1px solid var(--line-soft); border-radius:8px;background:var(--panel)} .replayresult.stale{opacity:.78} .replayresulthead{display:flex;align-items:center;justify-content:space-between;gap:8px} .replayresulthead>div{display:flex;min-width:0;flex-direction:column}.replayresulthead b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .replaymetrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px} .replaymetrics span{min-width:0;padding:5px;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel-2)} .replaymetrics small,.replaymetrics b{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .replaymetrics small{color:var(--faint);font-size:9px}.replaymetrics b{margin-top:2px;color:var(--text);font:750 var(--f-xs)/1.2 var(--mono)} .replaybasis{display:flex;flex-wrap:wrap;gap:4px}.replaybasis span{padding:2px 5px;border-radius:999px;background:var(--panel-2);color:var(--dim);font-size:var(--f-2xs)} .replayresult details{color:var(--dim);font-size:var(--f-xs)}.replayresult details ul{margin:5px 0 0;padding-left:18px} .replaydisclaimer{margin:0;color:var(--faint);font-size:var(--f-2xs);line-height:1.3} @container understand (max-width:420px){ .replaycontrols{grid-template-columns:repeat(2,minmax(0,1fr))}.replaycontrols .btn{grid-column:1/-1} .replaymetrics{grid-template-columns:repeat(2,minmax(0,1fr))} } /* evidence & simulation */ .evgrid{display:flex;flex-direction:column;gap:6px} .evrow{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);align-items:start;column-gap:14px;row-gap:3px;font-size:var(--f-xs)} .evrow .evk{color:var(--faint);width:auto;white-space:nowrap} .evrow .evbar{flex:1;height:6px;background:var(--line-soft);border-radius:3px;overflow:hidden} .evrow .evbar i{display:block;height:100%;background:var(--accent);border-radius:3px} .evrow .evv{font-family:var(--mono);font-weight:700;color:var(--text);font-size:var(--f-sm)} .evrow .evtxt{color:var(--dim);flex:1;font-size:var(--f-sm)} .evidenceglance{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px} .evidenceglance>span{padding:3px 6px;border:1px solid var(--line-soft);border-radius:999px; color:var(--dim);font-size:var(--f-2xs);line-height:1.2} .evidencedetails{flex:none;margin-top:5px;color:var(--dim);font-size:var(--f-xs)} .evidencedetails>summary{width:max-content;max-width:100%;cursor:pointer;color:var(--accent)} .evidencedetails[open]{padding:7px 8px;border:1px solid var(--line-soft);border-radius:8px; background:var(--panel)} .evidencedetails[open]>.evgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 10px;margin-top:7px} .evidencedetails[open] .evrow{grid-template-columns:minmax(88px,max-content) minmax(0,1fr); column-gap:8px} @media(max-width:1000px){.evidencedetails[open]>.evgrid{grid-template-columns:minmax(0,1fr)}} .wfhd{font-size:var(--f-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:10px 0 4px} .wflist{display:flex;flex-direction:column;gap:5px} .wfrow{display:grid;grid-template-columns:16px 1fr auto auto;align-items:center;gap:9px;font-size:var(--f-xs);padding:5px 6px;border-radius:5px} .wfrow:hover{background:var(--row-hover)} .wfrow .wfic{color:var(--faint);text-align:center} .wfrow .wfn{color:var(--text)} .wfrow .wfp{font-family:var(--mono);color:var(--faint)} .wfrow .wfv{font-family:var(--mono);font-weight:700;text-align:right;font-size:var(--f-sm)} .wfrow .wfv.pos{color:var(--profit)} .wfrow .wfv.neg{color:var(--loss)} .evsimstage{position:relative;flex:1;height:auto;min-height:205px;margin-top:9px;overflow:hidden;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel)} .ensembleidle,.ensemblerun,.ensembleresult{position:absolute;inset:0} .ensembleidle{border:0;background:linear-gradient(105deg,var(--panel),var(--surface-accent-tail));color:var(--accent);cursor:pointer;overflow:hidden} .ensembleidle:hover{background:linear-gradient(105deg,var(--accent-wash),var(--surface-accent-tail))} .ensembleidle .mcmini{position:absolute;inset:21px 48px 40px 12px;width:calc(100% - 60px);height:calc(100% - 61px);opacity:.72} .ensembleidle .mcmini path{fill:none;stroke:var(--accent-2);stroke-width:1.2;stroke-linecap:round;vector-effect:non-scaling-stroke} .ensembleidle .mcmini path:nth-of-type(3){stroke:var(--accent);stroke-width:1.7} .ensembleidle .mcmini .mczero{stroke:var(--line);stroke-dasharray:3 4} .ensembleidle .mcplay{position:absolute;right:14px;top:50%;width:31px;height:31px;transform:translateY(-50%);border-radius:50%;display:grid;place-items:center; border:1px solid var(--accent);background:var(--ground);box-shadow:0 0 0 5px rgba(70,213,181,.08);font-size:10px} .ensembleidle .mcplay::before{content:"";width:0;height:0;margin-left:2px;border-top:5px solid transparent; border-bottom:5px solid transparent;border-left:8px solid currentColor} .ensemblecap{position:absolute;left:12px;bottom:10px;font-size:var(--f-2xs);color:var(--faint);letter-spacing:.04em;text-transform:uppercase} .ensemblerun{display:grid;place-items:center;color:var(--dim);font-size:var(--f-xs)} .ensembleempty{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;overflow:auto} .ensembleempty b{display:block;margin-bottom:5px;color:var(--text);font-size:var(--f-xs)} .ensembleempty span{display:block;max-width:46ch;color:var(--faint);font-size:var(--f-2xs);line-height:1.5} .ensembleempty .btn{margin-top:9px} .runorb{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);border-top-color:var(--accent);animation:runorb .8s linear infinite;box-shadow:0 0 0 8px rgba(70,213,181,.04)} .runmsg{position:absolute;top:calc(50% + 37px);font-family:var(--mono);font-size:var(--f-2xs);color:var(--faint)} @keyframes runorb{to{transform:rotate(360deg)}} .ensembleresult{padding:7px 9px 8px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:4px} .ensembleresult .mchd{display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:nowrap;min-width:0} .ensembleresult .mchd>.eyebrow{min-width:0} .ensembleresult .mchd .hint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ensembleresult .mchdacts{flex:none;display:flex;align-items:center;gap:6px} .mcviewseg{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line-soft);border-radius:6px;background:var(--ground)} .mcviewseg button{border:0;border-radius:4px;background:transparent;color:var(--faint);font:700 var(--f-2xs)/1 var(--sans);padding:4px 7px;cursor:pointer}.mcviewseg button.on{background:var(--accent-wash);color:var(--accent)}.mcviewseg button:disabled{opacity:.4;cursor:default} /* The fan is an evidence analysis, so it is visible on the first rendered frame. It used to animate from a fully clipped state; ordinary re-renders repeatedly restarted that concealment and made a populated panel look blank. Evidence never depends on motion or timing to become readable. */ .ensembleresult .mcfan{height:auto;min-height:120px;align-self:stretch;clip-path:inset(0)} .mcpathread{min-width:0;white-space:normal;line-height:1.3;color:var(--faint);font-size:var(--f-2xs)} .ensembleresult .mcstats{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0} .ensembleresult .mcs:nth-child(n+5){display:none} .ensembleresult .mcv{font-size:var(--f-xs)} /* coherence panel — one verdict + four honest checks + plain-English why */ .cohpanel .cohverdict{margin-left:auto;font-size:var(--f-sm);font-weight:800;padding:2px 9px;border-radius:5px;border:1px solid var(--line);letter-spacing:.01em} .cohverdict.on{color:var(--profit);border-color:var(--profit);background:var(--profit-wash)} .cohverdict.mid{color:var(--caution);border-color:var(--caution);background:var(--caution-wash)} .cohverdict.off{color:var(--loss);border-color:var(--loss);background:var(--loss-wash)} /* Coherence checks read as a tight ledger, not four airy cards: one row per check, the note wrapping beside its verdict mark — the freed space belongs to real content (market, stress). */ .cohpips{display:grid;grid-template-columns:1fr;gap:5px;margin:2px 0 8px} .cohpip{display:flex;align-items:baseline;gap:6px;font-size:var(--f-xs);font-weight:700;color:var(--dim);border:1px solid var(--line-soft);border-radius:6px;padding:5px 8px} .cohpip .cohmk{font-weight:800;flex:none} .cohpip.on{color:var(--text)} .cohpip.on .cohmk{color:var(--profit)} .cohpip.mid .cohmk{color:var(--caution)} .cohpip.off .cohmk{color:var(--loss)} .cohpip .cohnote{flex:1;min-width:0;font-weight:400;font-style:normal;color:var(--faint);font-size:var(--f-sm);line-height:1.3} .cohprose{font-size:var(--f-xs);color:var(--dim);line-height:1.45;border-top:1px solid var(--line-soft);padding-top:8px} .cohswap{border:0;background:0;color:var(--accent);font-weight:700;font-size:var(--f-xs);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px} .mcfan{width:100%;height:130px;display:block} .mcstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:6px 0 4px} .mcs{display:flex;flex-direction:column;gap:1px} .mcs .mck{font-size:var(--f-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.3px} .mcs .mcv{font-family:var(--mono);font-weight:800;font-size:var(--f-sm);white-space:nowrap} .mcs .mcv.pos{color:var(--profit)} .mcs .mcv.neg{color:var(--loss)} /* gap-risk = a downside concept → a thin loss-red left accent on a normal panel, not a loud amber tab */ .tailpanel{border-color:var(--line-soft);background:var(--panel-2);border-left:2px solid var(--loss)} .tailpanel .lenshd{display:flex;align-items:center;gap:8px;margin-bottom:3px} .tailpanel .eyebrow{color:var(--loss);display:inline-flex;align-items:center} .tailpanel .eyebrow .tdot{width:6px;height:6px;border-radius:50%;background:var(--loss);margin-right:6px;box-shadow:0 0 0 3px rgba(243,93,100,.13)} .tailpanel .tev{font-size:var(--f-xs);color:var(--caution);font-weight:700} .tailmain{font-size:var(--f-sm);line-height:1.5;color:var(--dim);margin:3px 0 4px} .tailmain b{color:var(--text)} .tailmain b.neg{color:var(--loss)} .tailmain b.pos{color:var(--profit)} .tailmain .tmax{font-size:var(--f-xs);color:var(--loss);border:1px solid var(--loss);border-radius:4px;padding:0 4px;margin-left:1px;font-weight:700;text-transform:uppercase;letter-spacing:.03em} .tailsub{font-size:var(--f-xs);line-height:1.4;color:var(--faint)} .tailsub b{color:var(--text)} /* book impact — graphical */ .upanel .bkbar{height:9px;border-radius:5px;background:var(--line-soft);overflow:hidden;display:flex;margin:2px 0 5px} .upanel .bkbar .bkexist{background:var(--accent-2);opacity:.55;height:100%} .upanel .bkbar .bknew{background:var(--caution);height:100%} .bklabels{display:flex;justify-content:space-between;font-size:var(--f-xs);color:var(--faint)} .bklabels .bkl2{color:var(--caution);font-weight:600} .bkcap{display:flex;align-items:baseline;gap:6px;margin-top:7px;font-size:var(--f-xs);color:var(--faint)} .bkcap b{font-family:var(--mono);color:var(--text);font-weight:700} .paneverdict{display:flex;align-items:flex-start;gap:9px;padding:8px 9px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel)} .paneverdict i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-wash);margin-top:5px;flex:none} .paneverdict.warn i{background:var(--caution);box-shadow:0 0 0 4px var(--caution-wash)} .paneverdict b{display:block;font-size:var(--f-sm);line-height:1.25}.paneverdict span{display:block;margin-top:2px;color:var(--dim);font-size:var(--f-xs);line-height:1.35} .bookfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px} .bookfact2{border:1px solid var(--line-soft);border-radius:7px;background:var(--panel);padding:7px 8px;min-width:0} .bookfact2 span{display:block;color:var(--faint);font-size:var(--f-2xs);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bookfact2 b{display:block;margin-top:3px;font-family:var(--mono);font-size:var(--f-sm);white-space:nowrap}.bookfact2 b.neg{color:var(--loss)}.bookfact2 b.pos{color:var(--profit)}.bookfact2 b.warn{color:var(--caution)} .bookimpact .bookfact2{overflow:hidden}.bookimpact .bookfact2 b{white-space:normal;line-height:1.2} .bookcompare{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;margin-top:8px;color:var(--faint);font-size:var(--f-2xs)} .bookcompare .track,.tailtrack{height:7px;border-radius:4px;background:var(--line-soft);overflow:hidden;position:relative} .bookcompare .track i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--caution));border-radius:4px} .bookgreeks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:8px} .bookgreeks span{border-left:2px solid var(--line);padding:3px 6px;color:var(--faint);font-size:var(--f-2xs)} .bookgreeks b{display:block;margin-top:2px;font-family:var(--mono);font-size:var(--f-xs);color:var(--text)} .bookcluster{display:none} @media (min-width:1900px) and (min-height:1100px){ .bookcluster{display:flex;flex:1;min-height:290px;flex-direction:column;margin:13px 0 10px;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel);overflow:hidden} .bchd,.bcresult{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 11px;color:var(--faint);font-size:var(--f-xs)} .bchd{border-bottom:1px solid var(--line-soft);text-transform:uppercase;letter-spacing:.04em}.bchd b{color:var(--text);font-family:var(--mono)} .bcstage{position:relative;flex:1;min-height:220px;background:radial-gradient(circle at 56% 52%,rgba(57,199,212,.07),transparent 48%)} .bcstage::before,.bcstage::after{content:"";position:absolute;border:1px solid var(--line-soft);border-radius:50%} .bcstage::before{inset:12% 9%} .bcstage::after{inset:28% 26%;border-color:rgba(57,199,212,.16)} .bczone{position:absolute;left:12px;top:10px;color:var(--accent-2);font-size:var(--f-2xs);letter-spacing:.08em;text-transform:uppercase} .bcshock{position:absolute;left:12px;bottom:10px;display:inline-flex;align-items:center;gap:7px;color:var(--loss);font-family:var(--mono);font-size:var(--f-xs)} .bcshock::before{content:"";width:28px;height:1px;background:var(--loss);box-shadow:9px -3px 0 -3px var(--loss)} .bcnode{position:absolute;left:var(--x);top:var(--y);width:var(--sz);height:var(--sz);transform:translate(-50%,-50%);display:grid;place-content:center;text-align:center;border:1px solid var(--accent-2);border-radius:50%;background:rgba(57,199,212,.10);box-shadow:0 0 0 4px rgba(57,199,212,.025);z-index:1} .bcnode b{font-family:var(--mono);font-size:var(--f-xs);color:var(--text)}.bcnode em{font-style:normal;font-family:var(--mono);font-size:var(--f-2xs);color:var(--dim)} .bcnode.warn{border-color:var(--caution);background:var(--caution-wash)}.bcnode.bad{border-color:var(--loss);background:var(--loss-wash)} .bcnode.idea{border-style:dashed;border-width:2px;border-color:var(--accent);background:var(--accent-wash);box-shadow:0 0 0 6px rgba(70,213,181,.05)}.bcnode.idea b{color:var(--accent)} .bcresult{border-top:1px solid var(--line-soft)}.bcresult b{font-family:var(--mono);color:var(--loss)}.bcresult i{color:var(--faint);font-style:normal} /* The Fit pane stays a tight ledger even on tall canvases — no stretched verdict cards; the right column's remaining height belongs to the always-visible market band below the well. */ .inspectpane:has(>.cohpanel){display:flex;flex-direction:column;gap:10px;overflow:hidden} .inspectpane:has(>.cohpanel)>.tailpanel,.inspectpane:has(>.cohpanel)>.fitbudget{margin:0} .inspectpane>.upanel:only-child:has(>.mechg){display:grid;grid-template-rows:auto auto auto auto auto;gap:12px;align-content:start} .inspectpane>.upanel:only-child:has(>.mechg)>.mechg{height:100%;margin:0} .inspectpane>.upanel:only-child:has(>.mechg) .mgt{display:flex;flex-direction:column;justify-content:flex-start;padding:9px 12px} .inspectpane>.upanel:only-child:has(>.mechg) .mgbar{height:6px} .inspectpane>.upanel:only-child:has(>.mechg)>.mechstats{margin:0} .inspectpane>.upanel:only-child:has(>.mechg)>.sensitivity{display:grid;grid-template-rows:auto repeat(3,minmax(0,1fr));align-items:center;margin:0;padding-top:12px} .inspectpane>.upanel:only-child:has(>.mechg) .sensrow{grid-template-columns:88px minmax(0,1fr) auto;margin:0}.inspectpane>.upanel:only-child:has(>.mechg) .sensrow>i{height:7px} .inspectpane>.upanel:only-child:has(>.mechg)>.legsummary{margin:0;padding-top:10px} } .panefoot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line-soft);font-size:var(--f-xs);line-height:1.4;color:var(--dim)} .panefoot b{color:var(--text)} .fitbudget{margin-top:8px;padding:8px 9px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel)} .fitbudget .fbh{display:flex;justify-content:space-between;align-items:baseline;gap:7px;font-size:var(--f-xs);color:var(--faint)} .fitbudget .fbh b{font-family:var(--mono);color:var(--text)} .fitbudget .tailtrack{margin-top:6px}.fitbudget .tailtrack i{display:block;height:100%;border-radius:4px;background:var(--accent)} .sensitivity{margin-top:9px;padding-top:8px;border-top:1px solid var(--line-soft)} .sensrow{display:grid;grid-template-columns:68px 1fr auto;gap:7px;align-items:center;margin-top:6px;font-size:var(--f-xs)} .sensrow>span{color:var(--faint)}.sensrow>i{height:5px;border-radius:3px;background:var(--line-soft);position:relative} .sensrow>i::after{content:"";position:absolute;left:var(--mark,50%);top:-2px;width:2px;height:9px;border-radius:2px;background:var(--accent)} .sensrow>b{font-family:var(--mono);font-size:var(--f-xs);color:var(--text)} .legsummary{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line-soft)} .legsummary .lsleg{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid var(--line-soft);border-radius:5px;background:var(--panel);font-size:var(--f-2xs)} .legsummary .lsleg b{font-family:var(--mono);color:var(--text)}.legsummary .sell i{color:var(--loss)}.legsummary .buy i{color:var(--profit)} /* execute */ .execbox{border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2);padding:12px 13px;margin-top:2px} .execgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px} .efield{display:flex;flex-direction:column;gap:4px} .efield .elbl{font-size:var(--f-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700} .signedlimit{min-height:32px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px; padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--faint);font-family:var(--mono)} .signedlimit:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-wash)} .signedlimit input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit} .efield .seg{width:100%} .efield .seg button{flex:1} .decdock .usechead{display:none} .decdock .execbox{margin:0;padding:8px 10px;border-radius:9px} .decdock .execbox.open{padding-top:9px} .decdock .execbox.open .execgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px 10px} .dockrow{display:grid;grid-template-columns:minmax(260px,1.3fr) minmax(210px,.8fr) auto auto;align-items:center;gap:12px;min-height:42px} .dockorder{display:flex;align-items:baseline;gap:7px;min-width:0;flex-wrap:wrap;white-space:normal} .dockorder b{flex:0 1 auto;min-width:0;font-size:var(--f-sm)} .dockorder span{flex:1 1 240px;min-width:0;font-size:var(--f-xs);color:var(--dim);white-space:normal} .dockrow .fillbar{margin:0;min-width:0}.dockrow .fillbar .fbstate{display:none} .dockrow .btn.place{padding:7px 18px} .comparisonhold .dockrow{grid-template-columns:minmax(0,1fr) auto} .decdock .btn:disabled{opacity:.42;filter:saturate(.42);box-shadow:none;cursor:not-allowed} .ticketedit{width:30px;height:29px;display:grid;place-items:center;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel);color:var(--accent);cursor:pointer} .ticketedit:hover,.ticketedit.on{border-color:var(--accent);background:var(--accent-wash)} .ticketedit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .decdock .execbox.open .execact{margin-top:7px}.decdock .execbox.open>.fillbar{margin-top:5px} .decdock .execbox.open .placefoot{position:absolute;right:10px;bottom:8px;border:0;margin:0;padding:0} .decdock .execbox.open{position:relative;padding-right:165px} .decdock .execbox.open .placenote{display:none} .execline{margin-top:11px;padding:9px 11px;background:var(--panel);border:1px solid var(--line-soft);border-radius:8px; font-size:var(--f-xs);color:var(--dim);line-height:1.5} .execline b{color:var(--text)} /* execute preview: a compact action line + a graphical fill ladder (bid⟷ask) — replaces the sentence that restated the order type and destination; the ONE non-obvious bit (fills vs rests) is shown. */ .execact{display:flex;align-items:baseline;gap:10px;margin-top:10px;font-size:var(--f-sm);flex-wrap:wrap} .execact b{color:var(--text)} .execact .execcash{color:var(--dim);font-size:var(--f-xs)} .execact .execcash b{color:var(--text)} .fillbar{display:flex;align-items:center;gap:9px;margin-top:7px;font-size:var(--f-2xs)} .fillbar .fbend{color:var(--faint);text-transform:uppercase;letter-spacing:.05em;flex:none} .fillbar .fbtrack{position:relative;flex:1;height:6px;border-radius:3px; background:linear-gradient(90deg,var(--caution) 0%,var(--line-soft) 45%,var(--line-soft) 55%,var(--profit) 100%);opacity:.55} .fillbar .fbmid{position:absolute;left:50%;top:-2px;width:1px;height:10px;background:var(--dim)} .fillbar .fbmark{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%); background:var(--panel);border:2px solid var(--accent);box-shadow:0 0 0 2px var(--ground)} .fillbar .fbmark.now{border-color:var(--caution)} .fillbar .fbmark.rest{border-color:var(--profit)} .fillbar .fbstate{flex:none;font-family:var(--mono);font-weight:700;letter-spacing:.02em} .fillbar .fbstate.now{color:var(--caution)} .fillbar .fbstate.rest{color:var(--profit)} /* coherence chip on the hero (the whole "on your view" pane folded into one line) */ .fitchip{font-size:var(--f-sm);font-weight:700;padding:2px 9px;border-radius:5px;border:1px solid var(--line);white-space:nowrap} .fitchip.on{color:var(--profit);border-color:var(--profit);background:var(--profit-wash)} .fitchip.mid{color:var(--caution);border-color:var(--caution);background:var(--caution-wash)} .fitchip.off{color:var(--loss);border-color:var(--loss);background:var(--loss-wash)} /* compact governors for the narrow left column — two caps side by side, tighter screens */ .dcleft .govs{grid-template-columns:1fr 1fr;gap:0 16px} .dcleft .govcol{margin-bottom:2px} .dcleft .gov .gpass,.dcleft .gov .govcap{font-size:var(--f-xs);margin-top:1px} .dechead{display:flex;align-items:center;gap:11px;margin-bottom:14px} .dback{border:1px solid var(--line);background:var(--surface-control-strong);color:var(--dim);border-radius:var(--control-radius); padding:5px 11px;font-size:var(--f-sm);font-weight:600} .dback:hover{color:var(--text);border-color:var(--accent-2)} .dechead .dtitle{font-size:var(--f-lg);font-weight:800} .dechead .dctx{color:var(--faint);font-size:var(--f-sm)} /* A — INTENT SPINE (context · editable objective · the recommendation front-and-center) */ .intent{border:1px solid var(--line-soft);border-left:3px solid var(--accent-2);border-radius:10px; background:var(--panel-2);padding:13px 15px;margin-bottom:14px;display:flex;flex-direction:column;gap:11px} .objrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .objrow .lbl{margin-right:2px} .objchip{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:6px; background:var(--panel-2);overflow:hidden} .objchip>.ok{padding:4px 9px;font-size:var(--f-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:700;background:transparent} .objchip .oseg{display:flex} .objchip .oseg button{border:0;background:0;color:var(--dim);padding:4px 9px;font-size:var(--f-sm);font-weight:600;border-left:1px solid var(--line-soft)} .objchip .oseg button.on{color:var(--accent);background:var(--accent-wash)} .objchip .ostatic{padding:4px 10px;font-size:var(--f-sm);font-weight:600;color:var(--text);font-family:var(--mono)} .objchip .uxspot{color:var(--faint);font-weight:600} /* underlying picker (search + select) — kills the AMD lock */ .pickchip{position:relative} .pickchip .pickbtn{border:0;background:0;color:var(--text);font-family:var(--mono);font-weight:700;font-size:var(--f-sm); padding:4px 10px;display:inline-flex;align-items:center;gap:4px;cursor:pointer} .pickchip .pickbtn:hover{color:var(--accent)} .pickchip .pcar{color:var(--faint);font-size:var(--f-xs)} .univpop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:288px;background:var(--pop-surface); border:1px solid var(--line);border-radius:9px;box-shadow:0 14px 40px rgba(0,0,0,.55);overflow:hidden; animation:zoomin var(--mo-quick) var(--mo-ease)} .univsearch{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid var(--line-soft);color:var(--faint)} .univsearch input{flex:1;background:0;border:0;color:var(--text);font-size:var(--f-sm);font-weight:600;outline:none} .univlist{max-height:290px;overflow:auto;padding:5px} .univrow{width:100%;display:grid;grid-template-columns:52px 1fr auto auto;align-items:center;gap:9px; border:0;background:0;color:var(--dim);padding:7px 8px;border-radius:6px;cursor:pointer;text-align:left; transition:background var(--mo-quick) var(--mo-ease)} .univrow:hover{background:var(--row-hover)} .univrow.on{background:var(--sel-wash)} .univrow .us{font-family:var(--mono);font-weight:800;color:var(--text);font-size:var(--f-sm)} .univrow .un{font-size:var(--f-xs);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .univrow .un .uheld{color:var(--accent-2);font-weight:700;font-size:var(--f-xs);letter-spacing:.04em;text-transform:uppercase} .univrow .uv{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim)} .univrow .ue{font-family:var(--mono);font-size:var(--f-sm);font-weight:600} .univrow .ue.pos{color:var(--profit)} .univrow .ue.neg{color:var(--loss)} .rec{display:flex;align-items:center;gap:12px;border:1px solid var(--accent-2);border-radius:9px; background:var(--accent-wash);padding:11px 14px} .rec .recico{width:26px;height:26px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center; background:var(--accent);color:var(--ink-on-accent);font-weight:800;font-size:var(--f-md)} .rec .rectext{min-width:0;flex:1} .rec .receyebrow{font-size:var(--f-sm);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:2px} .rec .recmain{font-size:var(--f-md);font-weight:700;color:var(--text)} .rec .recmain .recnums{font-family:var(--mono);color:var(--dim);font-weight:600} .rec .recwhy{font-size:var(--f-xs);color:var(--dim);line-height:1.4;margin-top:3px} .rec .btn{flex:none} /* B — MODE toggle + candidate source (engine picks vs build your own — ONE at a time) */ /* always-visible editable legs on the Decide hero (the pick's strikes are right there) */ .leghd{display:flex;align-items:center;gap:9px;margin:9px 0 5px} .leghd .lbl{margin-right:0} .declegs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:1px 0 5px} .declegs .legr{margin:0;gap:3px;padding:3px 5px} /* very compact chips so a 4-leg structure (iron condor) fits on ONE row */ .declegs .tgl{padding:2px 5px;font-size:var(--f-2xs)} .declegs .mstp{border-radius:4px} .declegs .mstp .ml{display:none} /* type implies call/put; drop the K/Qty labels for width */ .declegs .mstp .mv{min-width:30px;font-size:var(--f-sm);padding:0 2px} .declegs .lrm{font-size:var(--f-2xs);padding:0 2px} .declegshint{flex-basis:100%;color:var(--faint);margin-top:0} @media (min-width:1800px){ .dcleft .declegpanel .mstp .ml{display:block} } .modebar{display:flex;align-items:center;gap:10px;margin:4px 0 10px} .modebar .hint{margin-left:auto} .railtools{display:flex;align-items:center;gap:6px;margin-left:auto} .railtool{width:27px;height:25px;display:grid;place-items:center;border:1px solid var(--line-soft);border-radius:6px; background:var(--panel);color:var(--faint);cursor:pointer} .railtool:hover,.railtool.on{border-color:var(--accent-2);color:var(--accent);background:var(--accent-wash)} .railtool svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .raildrawer{min-height:0;overflow:auto;border-top:1px solid var(--line-soft);padding-top:8px;animation:govIn var(--mo-dur) var(--mo-ease)} .raildrawer .pickmap{min-height:210px} .raildrawer .govpanel{margin:0} .srcpanel{border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2);padding:11px 12px;margin-bottom:14px} .srchd{display:flex;align-items:center;gap:9px;margin-bottom:10px} .srchd .lbl{margin-right:auto} /* ranked fan (list) */ /* engine-idea rows — 2-line cards: payoff-shape icon · name+fit · risk-chip + key metrics (no clipping) */ .fan{display:flex;flex-direction:column;gap:4px} .candidatefieldmore{display:none} /* ranked ideas are a TABLE: one row per idea, labels once in the header, verdicts as glyphs */ /* The amount columns must hold a five-figure package — "+$25,408.37" is 11 mono glyphs ≈ 70px — because overflow:hidden on a NUMBER cuts digits, and a cut digit is a wrong number on screen. The flexible name column absorbs the width; names already ellipsize. */ .fan .fanr,.fan .fanhead{display:grid;grid-template-columns:30px minmax(0,1fr) 142px 74px 72px 48px 72px 80px;gap:0 7px;align-items:center;width:100%;text-align:left} .fanhead{padding:0 8px 2px;color:var(--faint);font-size:10px;letter-spacing:.05em;text-transform:uppercase;user-select:none} .fanhead .fnum{text-align:right}.fanhead .fh-i{text-align:center} .fanr{background:0;padding:3px 8px;min-height:30px;border-radius:8px;cursor:pointer;border:1px solid transparent; transition:background var(--mo-quick) var(--mo-ease),box-shadow var(--mo-quick) var(--mo-ease),border-color var(--mo-quick) var(--mo-ease)} .fanr .fnum{font-family:var(--mono);font-size:var(--f-xs);text-align:right;white-space:nowrap;overflow:hidden;color:var(--dim)} .fanr .fnum.pos{color:var(--profit)}.fanr .fnum.neg{color:var(--loss)} .fanr .fnum.bad{color:var(--loss)}.fanr .fnum.warn{color:var(--caution)}.fanr .fnum.ok{color:var(--profit)} .fanr .fev{text-align:right;font-family:var(--mono);font-weight:800;font-size:var(--f-sm);color:var(--dim)} .fvd{min-width:0;max-width:142px;display:inline-flex;align-items:center;justify-self:stretch;gap:4px; border-radius:5px;padding:3px 6px;font-size:var(--f-2xs);font-weight:800;line-height:1.1;white-space:normal} /* Fit is a decision fact, not a tooltip teaser. Long backend verdicts wrap inside their bounded column so the distinction between favorable, teaching-market, and below-threshold remains visible; package names and numeric columns keep their existing owners. */ .fvd i{font-style:normal;flex:none}.fvd b{min-width:0;overflow:visible;text-overflow:clip;white-space:normal} .fvd.ok{color:var(--profit);border:1px solid var(--profit)} .fvd.bad{color:var(--loss);border:1px solid var(--loss)} .fvd.neg{color:var(--loss);font-size:var(--f-2xs)} .fvd.neg i{display:none} .fvd.inc{border:1.5px dashed var(--caution)} .fvd.mid{color:var(--caution);border:1px solid var(--caution)} /* Favorable economics without a live-market endorsement: green like the facts it reports, dashed unlike Endorsed — visibly better than Mixed, visibly less than an evidence-backed endorsement. */ .fvd.fav{color:var(--profit);border:1px dashed var(--profit)} .fvd.scr{color:var(--faint);border:1px dashed var(--line)} @media (max-width:2100px){ .fan .fanr,.fan .fanhead{grid-template-columns:26px minmax(0,1fr) 112px 60px 58px 44px 70px} .fvd{max-width:112px} .fanr .fcol-cap,.fanhead .fcol-cap{display:none} } @media (max-width:1000px){ .fan .fanr,.fan .fanhead{grid-template-columns:30px minmax(0,1fr) 18px 70px 66px 50px 70px 72px} .fan:not(.showall) .fanrows>.fanr.field-extra:not(.sel){display:none} .candidatefieldmore{display:block;width:100%;min-height:40px;border:1px dashed var(--line); border-radius:7px;background:transparent;color:var(--accent);font-weight:700} } @media(max-width:500px){ /* Mobile keeps the selected payoff and exact legs in the main reading flow. Secondary comparison canvases become explicit disclosures, so the page remains one scroller without silently deleting either capability. */ .decisionmobilefold{display:block;min-width:0} .decisionmobilefold .mobilefoldtoggle{display:flex;width:100%;min-height:44px;align-items:center; justify-content:space-between;gap:8px;padding:7px 9px;border:1px solid var(--line); border-radius:8px;background:var(--panel-2);color:var(--text);text-align:left} .decisionmobilefold .mobilefoldtoggle span{display:flex;min-width:0;flex-direction:column;gap:2px} .decisionmobilefold .mobilefoldtoggle small{color:var(--dim);font-size:var(--f-2xs)} .decisionmobilefold .mobilefoldtoggle i::before{content:"+";font-style:normal;color:var(--accent);font-size:18px} .decisionmobilefold.mobileopen .mobilefoldtoggle i::before{content:"−"} .decisionmobilefold .mobilefoldbody{display:none} .decisionmobilefold.mobileopen .mobilefoldbody{display:block;margin-top:7px} } .fanr:hover{background:var(--row-hover);border-color:var(--line-soft)} .fanr.sel{border-color:var(--accent-2);background:var(--sel-wash);box-shadow:var(--sel-bar)} .fanr.sel .fnm{white-space:normal;text-overflow:clip;line-height:1.15;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} /* the recommendation lives HERE (top row), not in a separate banner */ .fanr.pick:not(.sel){border-color:var(--line-soft);background:transparent;box-shadow:inset 3px 0 0 var(--profit)} .fanr.pick.sel{box-shadow:var(--sel-bar),inset 3px 0 0 var(--profit)} .fanr.dis{opacity:1} .fanr.dis .fanicon,.fanr.dis .fnum,.fanr.dis .fev{opacity:.58} .fanr.hot{background:var(--surface-row-hot);box-shadow:inset 2px 0 0 var(--accent)} .badge.pickbadge{color:var(--ink-on-accent);background:var(--accent);border-color:var(--accent);padding:1px 6px;flex:none} .fanicon{width:30px;height:20px;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel-2);flex:none} .fanmain{min-width:0;display:flex;flex-direction:column;gap:3px} .fanmain .fr1{display:flex;align-items:center;gap:7px;min-width:0} .fanr .fnm{font-family:var(--mono);font-weight:700;color:var(--text);font-size:var(--f-sm);white-space:normal;overflow:visible;min-width:0;line-height:1.15} .fanname{min-width:0;display:flex;flex-direction:column;justify-content:center}.fanname .fsub{display:none;margin-top:2px;color:var(--faint);font-size:var(--f-2xs);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .decgrid.few-ideas .dcleft .fan{flex:none;min-height:0;max-height:none}.decgrid.few-ideas .fanrows{overflow:visible;mask-image:none!important}.decgrid.few-ideas .fanr{min-height:36px}.decgrid.few-ideas .dcleft .fan .overflowmeta{display:none!important} .fanmain .fr1 .ffit{margin-left:auto;font-size:var(--f-2xs);letter-spacing:.05em;text-transform:uppercase;font-weight:700;flex:none} .ffit.on{color:var(--profit)} .ffit.mid{color:var(--caution)} .ffit.off{color:var(--loss)} /* A comparison field intentionally has no selected row, but that must not hide the compact economics users need to compare it. The full rationale remains in the Understand surface. */ .fanmain .rchip{font-size:var(--f-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.03em;border:1px solid;border-radius:4px;padding:0 5px;justify-self:start} .fanmain .fmet{font-family:var(--mono);font-size:var(--f-xs);color:var(--dim)} .fanmain .fmet.pos{color:var(--profit)} .fanmain .fgapchip{font-family:var(--mono);font-size:var(--f-xs);font-weight:700} .fanmain .fgapchip.ok{color:var(--profit)} .fanmain .fgapchip.warn{color:var(--caution)} .fanmain .fgapchip.bad{color:var(--loss)} .fanmain .fscr{font-size:var(--f-2xs);color:var(--caution);font-weight:700;text-transform:uppercase} @media (max-width:2200px){ .fanr{grid-template-columns:32px minmax(0,1fr);gap:7px} .fanmain .fr1{gap:5px} .fanmain .fscr{display:none} } /* shared strategy-identity chips — ONE appearance for the fan row, the Decide hero, and the held-position face */ .rchip{font-size:var(--f-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.03em;border:1px solid;border-radius:4px;padding:0 5px} .fgapchip{font-family:var(--mono);font-size:var(--f-xs);font-weight:700} .fgapchip.ok{color:var(--profit)} .fgapchip.warn{color:var(--caution)} .fgapchip.bad{color:var(--loss)} .ffit{font-size:var(--f-2xs);letter-spacing:.05em;text-transform:uppercase;font-weight:700} .kgrid.calm{grid-template-columns:repeat(3,minmax(0,1fr))!important} .kgrid.calm .k{padding-top:8px;padding-bottom:8px} .ksecondary{display:flex;align-items:center;gap:17px;margin-top:5px;padding:0 4px;color:var(--faint);font-size:var(--f-2xs);flex-wrap:wrap} .ksecondary span{display:inline-flex;align-items:baseline;gap:5px}.ksecondary b{font-family:var(--mono);color:var(--dim);font-size:var(--f-xs)} .decspectrum{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;padding:20px 4px 4px;margin-top:3px} .decspectrum::before{content:'';position:absolute;left:5%;right:5%;top:29px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--loss),var(--caution) 42%,var(--accent-2) 58%,var(--profit));opacity:.45} .ssnode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:0;color:var(--faint); min-width:0;padding:0 2px 3px;cursor:pointer} .ssnode .ssdot{width:10px;height:10px;border-radius:50%;background:var(--panel);border:2px solid var(--dim);box-shadow:0 0 0 3px var(--panel-2)} .ssnode.loss .ssdot{border-color:var(--loss)}.ssnode.profit .ssdot{border-color:var(--profit)} .ssnode.likely .ssdot{width:14px;height:14px;border-color:var(--accent);box-shadow:0 0 0 4px rgba(70,213,181,.09)} .ssnode.pinned .ssdot{background:var(--accent);border-color:var(--accent);transform:scale(1.08)} .ssnode .ssname{max-width:100%;font-size:var(--f-2xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ssnode:hover .ssname,.ssnode.pinned .ssname{color:var(--text)} .ssread{display:flex;align-items:baseline;gap:14px;padding:7px 8px 2px;border-top:1px solid var(--line-soft);font-size:var(--f-xs);color:var(--dim)} .ssread .sslead{font-weight:700;color:var(--text)}.ssread .ssmove{font-family:var(--mono);color:var(--faint)} .ssread .sspl{font-family:var(--mono);font-weight:800}.ssread .sspl.pos{color:var(--profit)}.ssread .sspl.neg{color:var(--loss)} .ssread .ssrange{margin-left:auto;color:var(--faint);font-size:var(--f-2xs)} /* The exact package is a persistent workbench beside its ranked ideas, not a hidden mode. Engine ideas remain immutable; the first direct edit forks the visible package into a draft. Every exact leg owns a full-width row. Longer structures use a bounded vertical workbench, keeping contract text readable without widening the page or compressing controls. */ .declegpanel{flex:none;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2);padding:7px 9px} .declegpanel.is-draft{border-color:var(--accent-2);background:linear-gradient(100deg,var(--accent-wash),transparent 68%)} .decleghead{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;min-width:0} .decleghead>.eyebrow{flex:none;white-space:nowrap} .decleghead .hint{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .declegstate{margin-left:auto;flex:none;border:1px solid var(--line);border-radius:4px;padding:0 6px; color:var(--faint);font-size:var(--f-2xs);font-weight:750;letter-spacing:.05em;text-transform:uppercase} .declegpanel.is-draft .declegstate{color:var(--accent);border-color:var(--accent-2)} .declegpanel .declegs{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px;min-width:0;min-height:0;max-width:100%; max-height:none;margin:0;overflow:hidden;padding:0} .declegpanel .declegs .legr{flex:none;width:100%;min-width:0;max-width:none;padding:5px 7px;gap:3px;scroll-snap-align:start} .declegpanel .declegs .legr-top{flex-wrap:wrap;min-width:0}.declegpanel .declegs .lgm{white-space:normal;line-height:1.25;overflow-wrap:anywhere} .declegpanel .declegs .leg-editors{display:inline-flex;align-items:center;gap:5px;min-width:0} /* the remove-x anchors the row's right edge so a full-width panel doesn't read as dead space */ .declegpanel .declegs .legr-top .lrm{margin-left:auto} .declegpanel .declegs .lgm{display:flex;flex-wrap:wrap;row-gap:1px;align-items:baseline;justify-content:flex-end;gap:3px 5px;min-width:0;color:var(--faint)} /* Leg-meta cells shrank-and-clipped a few px each (bid/ask, fill, source·freshness) to force one line. Don't shrink below content on desktop — wrap the row instead so nothing clips. Narrow-width media rules below still set their own shrink for the mobile stacked layout. */ .declegpanel .declegs .lgm i{font-style:normal;color:var(--line);flex:none}.declegpanel .declegs .legdetail{min-width:0;flex-shrink:0} .declegpanel .declegs .legdetail-book,.declegpanel .declegs .legdetail-entry{color:var(--dim);font-family:var(--mono)} .declegpanel .declegs .legdetail-book .executable{color:var(--accent);font-weight:800} .declegpanel .declegs .legdetail-wide{color:var(--dim)} .declegpanel .declegs .inlineleg{border-color:color-mix(in srgb,var(--line-soft) 85%,var(--accent-2));background:var(--panel)} .declegpanel .addleg.sm{flex:none;width:100%;min-height:32px;align-self:auto;display:flex;align-items:center;justify-content:center;gap:4px;margin:0;scroll-snap-align:end} .addlegpicker{margin-top:6px;border:1px solid var(--accent-2);border-radius:8px;background:var(--panel);padding:8px 10px;display:flex;flex-direction:column;gap:8px} .addlegloading{color:var(--dim);font-size:var(--f-xs)} .addlegchoices{display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px;min-width:0} .addleggroup{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0} .addleggroup>.hint{flex:none;text-transform:uppercase;letter-spacing:.05em;font-size:var(--f-2xs);white-space:nowrap} .addlegstrike{min-width:0} .addlegstrike select{width:100%;min-width:0;max-width:170px;min-height:30px;border:1px solid var(--line);border-radius:6px; background:var(--surface-control-strong);color:var(--text);font:600 var(--f-xs)/1 var(--mono);padding:4px 8px} .addlegstrike select:disabled{color:var(--faint);border-color:var(--line-soft)} .addlegactions{display:flex;justify-content:flex-end;gap:8px} /* The chosen Side/Contract chip must be unmistakable — .on had no rule here, so clicks looked dead. */ .addlegpicker .btn.on{border-color:var(--accent-2);background:var(--accent-wash);color:var(--accent);font-weight:800} .legdetailtoggle{display:none;min-height:28px;border:1px solid var(--line);border-radius:6px; background:transparent;color:var(--accent);font:700 var(--f-2xs)/1 var(--sans);padding:4px 7px} .declegfoot{display:flex;align-items:center;gap:8px;margin-top:5px;min-width:0} .declegfoot .hint{flex:1;min-width:0;white-space:normal;line-height:1.3} .declegfoot .draftok{color:var(--profit)}.declegfoot .drafterr{color:var(--loss)} .declegfoot .btn{padding:5px 9px;white-space:nowrap} .declegpanel.posheld{padding:0;border:0;background:transparent} .declegpanel.posheld .declegs{max-height:clamp(150px,20vh,220px)} .declegpanel.posheld .declegfoot .hint{white-space:normal;line-height:1.35} @media (min-width:901px){ /* A desktop leg owns two compact lines: controls first, then the complete executable book. Keeping the analysis out of a competing grid track makes the strikes and both bid/ask values readable at every supported desktop width. */ .declegpanel .declegs .legr{display:flex;flex-direction:column;align-items:stretch;padding:3px 6px} .declegpanel .declegs .legr-top{flex-wrap:wrap;row-gap:3px} .declegpanel .declegs .lgm{min-width:0;text-align:left;justify-content:flex-start;flex-wrap:nowrap; overflow:visible;line-height:1.1} .declegpanel .declegs .legdetail{display:block;min-width:0;white-space:nowrap} .declegpanel .declegs .legdetail-primary{flex-shrink:0} .declegpanel .declegs .legdetail-book,.declegpanel .declegs .legdetail-entry{flex-shrink:1} .declegpanel .declegs .legdetail-wide{flex-shrink:3} } @media (min-width:1701px){ .declegpanel .declegs .lgm{gap:2px;font-size:var(--f-xs)} } @media (max-width:1450px){ .declegpanel{padding:5px 7px}.decleghead{margin-bottom:3px} .decleghead .hint{display:block;flex:1 1 100%;order:3;white-space:normal;overflow:visible;text-overflow:clip} .declegpanel .declegs .tgl{padding-left:5px;padding-right:5px} .declegpanel .declegs .lgm{font-size:var(--f-xs)} } @media (min-width:1001px) and (max-width:1700px){ /* narrow desktops drop only the wide extras; exp and fill stay as truncating cells */ .declegpanel .declegs .legdetail-wide,.declegpanel .declegs .lgm i{display:none} .declegpanel .legdetailtoggle{display:inline-flex;align-items:center;justify-content:center} .declegpanel.showlegdetails .declegs .legdetail-wide{display:block} } /* risk/reward map (ported from plan-desk) */ .decmap{width:100%;height:200px;display:block;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel)} .mapcap{font-size:var(--f-xs);color:var(--faint);padding:7px 2px 0;line-height:1.4} .mapcap b{color:var(--text);font-family:var(--mono)} .fanleg{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--f-sm);color:var(--faint);padding-top:9px} .fanleg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px;vertical-align:middle} .fanleg .mapsizekey{display:inline-flex;align-items:center;gap:3px} .fanleg .mapsizekey i{display:inline-block;margin:0;border:1px solid var(--faint);background:transparent} .fanleg .mapsizekey i:first-child{width:5px;height:5px}.fanleg .mapsizekey i:nth-child(2){width:10px;height:10px} /* GOVERNORS — a proper, visible control panel that shapes the fan (caps + screens) */ .govpanel{border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2);padding:11px 13px;margin-bottom:12px} .govhd{display:flex;align-items:center;gap:9px;margin-bottom:10px} .govhd .lbl,.govhd .eyebrow{margin-right:auto} .govhd .gshown{font-family:var(--mono);font-size:var(--f-sm);font-weight:700;color:var(--accent)} .govhd .gshown small{color:var(--faint);font-weight:600} .govs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 20px} .govcol .gct{font-size:var(--f-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:7px} .gov{margin-bottom:12px} .gov:last-child{margin-bottom:0} .gov .gh{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-xs);color:var(--dim);margin-bottom:6px} .gov .gh .num{font-family:var(--mono);color:var(--text);font-weight:700;font-size:var(--f-sm)} .gov .slider{margin:0 0 1px} /* primary dark .slider (app.css #22); behavior unchanged */ .gov .gpass{display:inline-flex;align-items:center;gap:5px;font-size:var(--f-sm);color:var(--faint);margin-top:6px; font-weight:600} .gov .gpass .gdot{width:6px;height:6px;border-radius:50%;background:var(--profit)} .gov .gpass.some .gdot{background:var(--caution)} .gov .gpass b{color:var(--text);font-family:var(--mono)} .govcap{font-size:var(--f-sm);color:var(--faint);letter-spacing:.03em;margin-top:5px} .bpread{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);font-size:var(--f-xs);color:var(--faint);line-height:1.55} .bpread b{font-family:var(--mono);color:var(--text);font-weight:700} .bpread b.pos{color:var(--profit)} .bpread b.neg{color:var(--loss)} /* MECHANICS — one elegant GRAPHICAL greeks component shown to BOTH levels (numbers present) */ .mechg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:7px} /* min-width:0 so a tile can actually shrink inside its grid track; wrap so a value that does not fit beside its label moves under it instead of bleeding out of the tile — measured at 2000x963, a gamma of "-1.378" ran 5px into the neighbouring leg's SELL badge. Numbers stay whole. */ .mgt{border:1px solid var(--line-soft);border-radius:7px;background:var(--panel);padding:8px 10px;min-width:0;overflow:hidden} .mgt .mgtop{display:flex;align-items:baseline;justify-content:space-between;gap:6px;flex-wrap:wrap} .mgk{font-size:var(--f-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:700} .mgv{font-family:var(--mono);font-weight:700;font-size:var(--f-sm)} .mgbar{height:4px;border-radius:2px;background:var(--track);margin:6px 0 4px;position:relative;overflow:hidden} .mgbar i{position:absolute;top:0;bottom:0;border-radius:2px} .mgbar.center::before{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;background:var(--line-strong);z-index:1} .mgc{font-size:var(--f-sm);color:var(--dim);line-height:1.25} /* compact assignment/edge/yield/mark stat grid (replaces the tall stacked gauges) */ .mechstats{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:9px} .mgs .mgstop{display:flex;align-items:baseline;justify-content:space-between;gap:6px} .mgs .mgsk{font-size:var(--f-xs);letter-spacing:.04em;color:var(--faint);font-weight:600} .mgs .mgsv{font-family:var(--mono);font-weight:700;font-size:var(--f-sm)} .mgs .mgsv.pos{color:var(--profit)} .mgs .mgsv.neg{color:var(--loss)} .mgs .mgsv.warn{color:var(--caution)} .mgs .mgbar{margin:5px 0 0} /* persistent thread New-idea button */ .threadnew{flex:none;white-space:nowrap;margin-left:2px} .mgauge{margin-top:9px} .mgauge .gl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-xs);color:var(--dim);margin-bottom:4px} .mgauge .gl .num{font-family:var(--mono);font-weight:700} .mgauge .gbar{height:7px;border-radius:4px;position:relative; background:linear-gradient(90deg,var(--profit) 0%,var(--caution) 55%,var(--loss) 100%);opacity:.5} .mgauge .gbar .gmark{position:absolute;top:-2px;width:3px;height:11px;border-radius:2px;background:var(--text); box-shadow:0 0 0 2px var(--ground);transform:translateX(-50%)} .mgmeter{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:var(--f-xs);color:var(--dim)} .mgmeter .mml{white-space:nowrap} .mgmeter .num{font-family:var(--mono);font-weight:700} .mgmeter .mgbar{flex:1;margin:0} .mgmeter .mmdot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none} .mgmeter .mmdot.pos{background:var(--profit)} .mgmeter .mmdot.neg{background:var(--loss)} .mech-more{margin-top:2px;padding-top:8px;border-top:1px solid var(--line-soft)} /* shown to BOTH levels */ /* LINKED map + list (two views of one fan, wired to the hero) */ .picklink{display:grid;grid-template-columns:1fr;gap:12px} .pickmap{position:relative} .mapcard{position:absolute;z-index:20;pointer-events:none;background:var(--pop-surface);border:1px solid var(--line); border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:8px 10px;min-width:158px;max-width:220px;font-size:var(--f-xs); opacity:0;transform:translateY(3px);transition:left var(--mo-dur) var(--mo-ease),top var(--mo-dur) var(--mo-ease),opacity var(--mo-quick) var(--mo-ease),transform var(--mo-quick) var(--mo-ease)} .mapcard.show{opacity:1;transform:none} .mapcard.mc-place{transition:opacity var(--mo-quick) var(--mo-ease),transform var(--mo-quick) var(--mo-ease)} /* first placement: no slide from origin */ .mapcard .mcnm{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--text);margin-bottom:5px} .mapcard .mcnm .mcrisk{width:8px;height:8px;border-radius:50%;flex:none} .mapcard .mcg{display:grid;grid-template-columns:auto auto;gap:2px 12px} .mapcard .mcg .kk{color:var(--faint)} .mapcard .mcg .vv{font-family:var(--mono);text-align:right} .mapcard .mcg .vv.pos{color:var(--profit)} .mapcard .mcg .vv.neg{color:var(--loss)} .mapcard .mcfit{margin-top:5px;font-size:var(--f-xs);color:var(--dim)} /* legs editor (build your own — ported from compose) */ .leged{display:flex;flex-direction:column;gap:6px} .legr{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:6px 8px} .legr-top{display:flex;flex-wrap:wrap;gap:5px;align-items:center} .legr .lgm{font-family:var(--mono);font-size:var(--f-sm);color:var(--faint);padding-left:2px;white-space:nowrap} .legr .lgm b{font-weight:700} .legr .lgm b.pos{color:var(--profit)} .legr .lgm b.neg{color:var(--loss)} .tgl{border:1px solid var(--line);background:var(--surface-control-raised);color:var(--dim);border-radius:5px;padding:3px 8px;font-size:var(--f-sm);font-weight:700;letter-spacing:.04em} .tgl.sell{color:var(--loss);border-color:var(--loss)} .tgl.buy{color:var(--profit);border-color:var(--profit)} .tgl.callc{color:var(--accent)} .tgl.putc{color:var(--violet)} .tgl.stockc{color:var(--dim)} .legr .lmeta{font-size:var(--f-xs);color:var(--faint);margin-left:auto;font-family:var(--mono)} .legr .lrm{border:0;background:0;color:var(--faint);font-size:var(--f-sm);cursor:pointer;padding:2px 4px} .legr .lrm{min-width:26px;min-height:26px;display:inline-flex;align-items:center;justify-content:center} .legr .lrm:hover{color:var(--loss)} .addleg{margin-top:4px;width:100%;border:1px dashed var(--line);background:0;color:var(--accent);border-radius:6px;padding:7px;font-weight:600;font-size:var(--f-sm)} .addleg:hover{border-color:var(--accent);background:var(--accent-wash)} /* D — PLACE ticket (ported from trades order ticket) */ .placegrid{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;align-items:start} .placebox{border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2);padding:13px 15px} .psec{margin-bottom:12px} .psec:last-child{margin-bottom:0} /* ONE label row wherever a control needs a name and an aside. It was scoped to .psec, so every other use rendered as a bare block and the label ran straight into its hint with no gap. */ .field-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px} .field-lbl .hint{text-align:right} .pricehint{font-size:var(--f-xs);color:var(--faint);margin-top:5px}.pricehint b{color:var(--dim);font-family:var(--mono)} .placefoot{border-top:1px solid var(--line);margin-top:13px;padding-top:12px} .placefoot .btn.wide{width:100%;justify-content:center;display:flex} /* place CTA — prominent but not a giant bar: content-sized, the reassurance note beside it */ .placefoot:has(.btn.place){display:flex;align-items:center;gap:14px;flex-wrap:wrap} .btn.place{padding:8px 22px;font-size:var(--f-sm);border-radius:7px} .placefoot .placenote{font-size:var(--f-xs);color:var(--faint)} .placenote{text-align:center;font-size:var(--f-xs);color:var(--faint);margin-top:7px} .confirmwrap{border:1px solid var(--accent-2);background:var(--accent-wash);border-radius:8px;padding:11px 13px;margin-top:11px} .confirmwrap .crow{display:flex;gap:8px;margin-top:9px} /* Review owns the existing dock. It never appends another card below the viewport or changes the three-column geometry; the analysis, checks, and final action stay in one bounded row. */ .reviewbar{min-height:54px;display:grid;grid-template-columns:minmax(260px,1.05fr) minmax(340px,1.45fr) auto; align-items:center;gap:14px;border:1px solid var(--accent-2);border-radius:9px;background:linear-gradient(100deg,var(--accent-wash),var(--panel-2) 68%);padding:6px 10px} .revieworder{min-width:0;line-height:1.2}.revieworder .eyebrow{display:inline;margin:0 7px 0 0}.revieworder b{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--f-sm)} .revieworder span{display:block;margin-top:3px;color:var(--dim);font-size:var(--f-xs)} .revieworder .reviewblock{color:var(--caution);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .reviewchecks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px} .reviewcheck{min-width:0;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel);padding:5px 7px} .reviewcheck i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:var(--profit)} .reviewcheck.warn i{background:var(--caution)}.reviewcheck span{color:var(--faint);font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.04em} .reviewcheck b{display:block;margin-top:1px;font-family:var(--mono);font-size:var(--f-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .reviewacks{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px} .reviewacks .reviewcheck{display:flex;align-items:flex-start;gap:7px;cursor:pointer}.reviewacks .reviewcheck input{margin-top:2px;accent-color:var(--accent)} .reviewacks .reviewcheck span{text-transform:none;letter-spacing:0;line-height:1.35;color:var(--dim)} .reviewbar>.placenote{grid-column:1/-1;color:var(--caution)} .reviewacts{grid-column:3;grid-row:1;display:flex;align-items:center;gap:8px;white-space:nowrap}.reviewacts .btn{padding:7px 12px} @media (max-width:1450px){ .dockrow{grid-template-columns:minmax(220px,1.2fr) minmax(170px,.8fr) auto auto;gap:8px} .dockorder{min-width:0} .reviewbar{grid-template-columns:minmax(220px,1fr) minmax(270px,1.2fr) auto;gap:8px;padding:6px 8px} .reviewcheck{padding:3px 5px}.reviewacts .btn{padding:6px 9px} } .decdepth{grid-template-columns:repeat(4,1fr)} /* ============================================================ SHARED OVERLAY WRAP + IMPORT + BOOK-RISK lenses ============================================================ */ .ovwrap{position:absolute;inset:0;overflow:auto;padding:12px 18px 30px;will-change:transform} .ovwrap .dectop{margin-bottom:14px} /* IMPORT */ .impgrid{display:grid;grid-template-columns:minmax(360px,.8fr) minmax(560px,1.45fr);gap:20px;align-items:stretch;width:100%;max-width:2100px;margin:0 auto} /* the paste box takes the height the preview column needs, so the two sides read as one surface rather than a short form beside a tall result */ .impsrc{display:flex;flex-direction:column;border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2);padding:14px 15px} .impmode{margin-bottom:10px} .manrow{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 2px} .manrow label{display:flex;flex-direction:column;gap:4px;flex:1 1 130px;min-width:0} .manrow input,.impsrc select{background:var(--surface-control);border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit;padding:7px 9px;min-width:0} .mannewacct{display:grid;grid-template-columns:minmax(200px,2fr) minmax(140px,1fr) minmax(120px,1fr);gap:8px;margin:6px 0 2px} .mannewacct input,.mannewacct select{background:var(--surface-control);border:1px solid var(--line);border-radius:7px;color:var(--text);font:inherit;padding:7px 9px;min-width:0} .mannewacct .backendnotice{grid-column:1/-1} @media (max-width:760px){.mannewacct{grid-template-columns:1fr}} .manlegs{display:flex;flex-direction:column;gap:6px;margin-bottom:6px} .manleg{display:grid;grid-template-columns:minmax(84px,auto) auto auto minmax(76px,1fr) auto minmax(78px,auto) minmax(120px,auto) minmax(64px,auto) minmax(64px,auto) minmax(90px,auto) auto;gap:6px;align-items:center;padding:7px 8px;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel)} .manleg.stock{grid-template-columns:minmax(84px,auto) auto auto minmax(76px,1fr) auto minmax(64px,auto) minmax(90px,auto) auto} .manleg input,.manleg select{background:var(--surface-control);border:1px solid var(--line);border-radius:6px;color:var(--text);font:inherit;font-size:var(--f-xs);padding:6px 7px;min-width:0;width:100%} .manleg .manshares{white-space:nowrap} @media (max-width:760px){.manleg,.manleg.stock{grid-template-columns:repeat(4,minmax(0,1fr))}} .scoutneeds.warn{color:var(--caution)} .impsrc .pastearea{flex:1 1 auto} /* the surface owns its own rhythm; it used to be eleven inline nudges */ .impsrc>.lenshd{margin-bottom:10px} .impsrc>.field-lbl+.ibrkopts{margin-bottom:2px} .impsrc>.ibrkopts+.field-lbl,.impsrc>.pasteinp+.field-lbl{margin-top:12px} .impsrc>.btn.pri.wide,.impsrc>.backendnotice{margin-top:10px} .imppreview.empty{padding:24px} .imppreview.empty .deskwaiting{margin:0;padding:26px 20px;max-width:52ch} .impresult{grid-template-columns:repeat(3,minmax(0,1fr))} .impnote{margin-top:12px} .pasteinp{width:100%;background:var(--surface-control);border:1px solid var(--line);border-radius:7px;color:var(--text); font-family:var(--mono);font-size:var(--f-xs);padding:9px 11px} .pastearea{width:100%;min-height:200px;resize:vertical;background:var(--surface-control);border:1px solid var(--line); border-radius:7px;color:var(--text);font-family:var(--mono);font-size:var(--f-xs);line-height:1.6;padding:10px 11px} .pasteinp:focus,.pastearea:focus{outline:none;border-color:var(--accent)} .ibrkopts{display:flex;flex-wrap:wrap;gap:6px} .ibrkopt{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:5px 12px; color:var(--dim);font-size:var(--f-xs);font-weight:600;cursor:pointer; transition:border-color var(--mo-quick) var(--mo-ease),color var(--mo-quick) var(--mo-ease),background var(--mo-quick) var(--mo-ease)} .ibrkopt:hover{border-color:var(--accent-2);color:var(--text)} .ibrkopt.on{border-color:var(--accent);background:var(--sel-wash);color:var(--text)} .imppreview{border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2);padding:14px 16px} .imppreview.empty{display:flex;align-items:center;justify-content:center;min-height:280px} /* one parsed package: its identity + selection, then its legs as a table the eye can scan down */ .impgroup{border:1px solid var(--line);border-radius:9px;background:var(--panel);margin-top:10px;overflow:hidden; transition:border-color var(--mo-quick) var(--mo-ease)} .impgroup.on{border-color:var(--accent)} .igsel{display:grid;grid-template-columns:20px 1fr auto auto;align-items:center;gap:10px;width:100%; padding:9px 12px;background:none;border:0;border-bottom:1px solid var(--line-soft);cursor:pointer;text-align:left} .impgroup.on .igsel{background:var(--sel-wash)} .igmark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px; border:1px solid var(--line);color:var(--bg);background:transparent;font-size:11px;font-weight:800;line-height:1} .impgroup.on .igmark{background:var(--accent);border-color:var(--accent)} .igttl{font-family:var(--mono);font-size:var(--f-xs);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ignet{font-family:var(--mono);font-weight:700;font-size:var(--f-sm)} .ignet .pos{color:var(--profit)} .ignet .neg{color:var(--loss)} .iglegs{display:flex;flex-direction:column} .ileg{display:grid;grid-template-columns:52px 46px 62px 1fr 84px 84px 78px;align-items:center;gap:10px; padding:6px 12px;font-family:var(--mono);font-size:var(--f-xs);color:var(--dim);border-top:1px solid var(--line-soft)} .ileg:first-child{border-top:0} /* the two price columns carry different facts — what the broker filled, and what it marks now */ .ilhead{color:var(--faint);font-family:var(--sans);letter-spacing:.05em;text-transform:uppercase; font-size:var(--f-2xs);font-weight:700;padding-top:7px;padding-bottom:3px} .ilact{font-weight:700;letter-spacing:.04em} .ilact.pos{color:var(--profit)} .ilact.neg{color:var(--loss)} .ilqty,.ilpx,.ilmark{text-align:right} .ilsym{color:var(--text);font-weight:700} .ilpx{color:var(--text)} .iwarn{padding:6px 12px;font-size:var(--f-xs);color:var(--caution);border-top:1px solid var(--line-soft)} .ighint{padding:8px 12px;font-size:var(--f-xs);color:var(--faint);line-height:1.55;border-top:1px solid var(--line-soft)} .impdests{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)} .igdest{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0} .igdest .lbl{font-size:var(--f-xs);color:var(--dim)} .igdest select{background:var(--surface-control);border:1px solid var(--line);border-radius:var(--control-radius);color:var(--text); font-size:var(--f-xs);padding:5px 8px} @media (max-width:760px){ /* The import surface uses the same overlay frame as wide desktop analyses, but a phone cannot carry its 18px side gutters plus the intrinsic one-line title/context. Give the dialog the phone gutter, let every column shrink inside it, and keep only the useful title in the header. */ #importStage .ovwrap{padding:8px 8px 22px;overflow-x:hidden} #importStage .dectop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center} #importStage .dectop .decttl{min-width:0;white-space:normal;overflow-wrap:anywhere} #importStage .dectop .dctx{display:none} #importStage .impgrid,#importStage .impsrc,#importStage #impPreviewCol, #importStage .imppreview{min-width:0;max-width:100%} /* Imported fills retain every exact fact on a phone. The former seven fixed columns were wider than the dialog and the owning package clipped the current mark and evidence flags. */ .igsel{grid-template-columns:20px minmax(0,1fr) auto;padding:9px 10px} .igsel .ignet{grid-column:2/-1;justify-self:start} .ileg{grid-template-columns:minmax(64px,.75fr) minmax(56px,.65fr) minmax(68px,.75fr) minmax(0,1.35fr); gap:4px 8px;padding:8px 10px} .ileg.ilhead{display:none} .ileg .ilpx,.ileg .ilmark{grid-row:2;text-align:left} .ileg .ilpx{grid-column:3}.ileg .ilmark{grid-column:4} .ileg .ilpx::before{content:'Filled ';color:var(--faint)} .ileg .ilmark::before{content:'Mark ';color:var(--faint)} } /* rows the parser refused, each with its reason — absence is shown, never dropped */ .impquar{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)} .iqrow{display:grid;grid-template-columns:64px 120px 1fr;align-items:baseline;gap:10px;padding:4px 0; font-size:var(--f-xs);color:var(--faint)} .iqline{font-family:var(--mono)} .iqref{font-family:var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .iqwhy{line-height:1.5} /* BOOK-RISK */ .rkhero{display:flex;align-items:center;gap:22px;margin-left:auto;padding-left:18px;border-left:1px solid var(--line-soft)} .rkhero .rkh{display:flex;flex-direction:column;gap:1px} .rkhero .rkh b{font-family:var(--mono);font-weight:800;font-size:var(--f-lg);letter-spacing:-.3px} .rkhero .rkh b.warn{color:var(--caution)} .rkhero .rkh b.pos{color:var(--profit)} .rkgrid{display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(300px,1fr) minmax(320px,1.15fr);gap:18px;align-items:start;max-width:1720px;margin:0 auto} .rkcol{display:flex;flex-direction:column;gap:16px} .rkpanel{border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2);padding:13px 15px} .rkrow{width:100%;display:grid;grid-template-columns:56px 1fr 44px;grid-template-areas:"sym bar val" "struct struct struct";gap:3px 11px; align-items:center;border:0;background:0;cursor:pointer;padding:7px 6px;border-radius:6px;text-align:left; transition:background var(--mo-quick) var(--mo-ease)} .rkrow:hover{background:var(--row-hover)} .rkrow .rksym{grid-area:sym;font-family:var(--mono);font-weight:800;color:var(--text);font-size:var(--f-sm)} .rkrow .rkbar{grid-area:bar;height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden} .rkrow .rkbar i{display:block;height:100%;border-radius:4px} .rkrow .rkv{grid-area:val;font-family:var(--mono);font-weight:700;text-align:right;font-size:var(--f-sm)} .rkrow .rkstruct{grid-area:struct;font-size:var(--f-sm);color:var(--faint)} .explist{display:flex;flex-direction:column;gap:7px;margin-top:9px} .exprow{display:flex;align-items:center;gap:10px} .exprow .expk{font-family:var(--mono);font-weight:700;color:var(--dim);width:64px;flex:none;font-size:var(--f-sm)} .exprow .expdots{display:flex;gap:5px;flex-wrap:wrap;flex:1} .expdot{border:1px solid var(--line);background:var(--panel);color:var(--dim);border-radius:5px;padding:2px 7px; font-family:var(--mono);font-size:var(--f-sm);font-weight:700;cursor:pointer} .expdot:hover{border-color:var(--accent-2);color:var(--text)} .rkcard{width:100%;text-align:left;border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2);padding:12px 14px;cursor:pointer; transition:border-color var(--mo-quick) var(--mo-ease)} .rkcard:hover{border-color:var(--accent-2)} .rkcard .rkct{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .rkmapp .rkmap{width:100%;height:240px;margin:8px 0 4px} /* HOME book-intelligence band */ #riskMain .lenshd{flex:none} #riskMain .homemap{flex:1;min-height:230px;height:auto;width:100%;margin:7px 0 5px} .mapcard .mcst{color:var(--dim);font-weight:400;font-size:var(--f-xs)} /* ===== Home v2 grid bands — book-risk · chain+candles · folded universe/sector ===== */ #bookrisk>.rkpanel,#chainBand>.rkpanel,#univBand>.rkpanel,#sectorBand>.rkpanel,#newsBand>.rkpanel{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden} .iconcta{width:34px;height:34px;flex:none;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:9px; background:linear-gradient(180deg,var(--raise),var(--panel));color:var(--dim);cursor:pointer;box-shadow:var(--raise-sheen); transition:transform var(--mo-quick) var(--mo-ease),border-color var(--mo-quick) var(--mo-ease),color var(--mo-quick) var(--mo-ease),background var(--mo-quick) var(--mo-ease)} .iconcta:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent);background:var(--accent-wash)} .iconcta:active{transform:translateY(0) scale(.96)} .iconcta svg,.scopeflow svg,.rkgesture svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .iconcta svg,.scopeflow svg{width:18px;height:18px} .iconcta.hedge{color:var(--accent);border-color:var(--accent-2);box-shadow:inset 0 0 0 1px rgba(102,203,216,.08),0 0 18px rgba(102,203,216,.07)} .microcta{vertical-align:middle;border-color:var(--line-soft);background:var(--panel);color:var(--accent)} .microcta:hover{border-color:var(--accent);background:var(--accent-wash)} .microcta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .lensacts{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0} .scopeflow{width:28px;height:24px;display:inline-grid;place-items:center;color:var(--faint);border:1px solid var(--line-soft);border-radius:7px;background:var(--panel)} .rkidletools{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:28px} .rkidletools .rktemp{display:flex;align-items:center;gap:7px;min-width:155px} .rkgestures{display:flex;align-items:center;gap:5px;margin-left:auto} .rkgesture{width:29px;height:25px;display:grid;place-items:center;color:var(--faint);border:1px solid var(--line-soft);border-radius:6px;background:var(--panel)} .rkgesture svg{width:15px;height:15px} .flash{animation:bandflash .7s ease} @keyframes bandflash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 2px var(--accent)}} /* Book Governor — four causes remain visible as readouts; one causal detail breathes in place. */ .bookband{gap:9px} .bookband>.lenshd{flex:none} .bookband>.lenshd .rkhero{margin-left:auto;gap:12px;padding-left:12px} .bookband>.lenshd .rkhero .rkh b{font-size:var(--f-md)} .govtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;flex:none} .govtab{border:1px solid var(--line-soft);border-radius:7px;background:var(--panel);color:var(--dim);padding:7px 8px;text-align:left;cursor:pointer; transition:border-color var(--mo-quick) var(--mo-ease),background var(--mo-quick) var(--mo-ease),transform var(--mo-quick) var(--mo-ease)} .govtab:hover{border-color:var(--accent-2);transform:translateY(-1px)} .govtab.on{border-color:var(--accent);background:var(--accent-wash)} .govtab .gk{display:block;font-size:var(--f-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint);white-space:nowrap} .govtab .gkshort{display:none} .govtab .gv{display:block;margin-top:2px;font-family:var(--mono);font-weight:800;font-size:var(--f-sm);color:var(--text)} .govtab .gv.warn{color:var(--caution)} .govtab .gv.bad{color:var(--loss)} .govdetail{flex:1;min-height:0;border-top:1px solid var(--line-soft);padding:9px 2px 0 0;overflow:auto;animation:govIn var(--mo-dur) var(--mo-ease)} @keyframes govIn{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:none}} .govverdict{font-size:var(--f-sm);line-height:1.42;color:var(--dim);margin-bottom:8px} .govverdict b{color:var(--text)} .govbars{display:flex;flex-direction:column;gap:4px} .govbar{display:grid;grid-template-columns:46px 1fr 34px;gap:7px;align-items:center;border:0;background:0;color:var(--dim);padding:2px 3px;border-radius:5px;text-align:left;cursor:pointer} .govbar:hover{background:var(--row-hover)} .govbar b{font-family:var(--mono);font-size:var(--f-xs);color:var(--text)} .govbar .gb{height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden}.govbar .gb i{display:block;height:100%;border-radius:3px;background:var(--caution)} .govbar em{font-family:var(--mono);font-style:normal;font-size:var(--f-xs);text-align:right} .govfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0} .govfact{border-left:2px solid var(--line);padding:4px 7px}.govfact span{display:block;font-size:var(--f-2xs);color:var(--faint);text-transform:uppercase;letter-spacing:.04em} .govfact b{display:block;margin-top:2px;font-family:var(--mono);font-size:var(--f-md)} .govhedge{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line-soft);padding-top:8px;font-size:var(--f-xs);line-height:1.4;color:var(--dim)} .govhedge span{flex:1}.govhedge b{color:var(--text)} .govdetail .expcal{min-height:108px;margin:7px 0 3px} .govdetail .rkcard{margin-top:7px;background:var(--panel);padding:10px 11px} .govcampaign{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:11px 0} .govround{border:1px solid var(--line-soft);border-radius:7px;padding:8px 7px;background:var(--panel)} .govround span{display:block;color:var(--faint);font-size:var(--f-2xs);text-transform:uppercase}.govround b{display:block;margin-top:3px;font-family:var(--mono);font-size:var(--f-sm)} /* folded market/sector bands */ .mdrow{display:flex;gap:12px;align-items:stretch;margin:8px 0 9px} .mdchart.mdmini{height:auto;min-height:104px;flex:1} .mdmeta.col{flex:none;display:flex;flex-direction:column;gap:5px;justify-content:center;min-width:96px} .msgrid.tight{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:9px} .msgrid.tight .msector{padding:6px 8px} .lenshd.sub{margin:10px 0 6px} .marketpanel .mdrow,.sectorpanel .mdrow{margin:6px 0 7px} .marketpanel .mdchart.mdmini,.sectorpanel .mdchart.mdmini{height:92px;min-height:92px} .marketpanel .msgrid.tight{gap:4px;margin-bottom:6px} .marketpanel .msgrid.tight .msector{padding:4px 6px;border-radius:6px;gap:3px;color:inherit;width:100%} .marketpanel .msgrid.tight .msector .msrow b{font-size:var(--f-sm)} .marketpanel .msgrid.tight .msector .msbar{height:4px} .marketpanel .msgrid.tight .msector .mssub{line-height:1} .marketpanel .lenshd.sub{margin:6px 0 4px} .marketpanel .msector[data-secctx]{cursor:pointer} .marketpanel .msector[data-secctx]:hover{border-color:var(--accent-2)} .universegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;min-height:0;overflow:auto} .uitem{display:grid;grid-template-columns:42px 1fr auto;gap:6px;align-items:center;border:1px solid transparent;border-radius:5px;background:0;color:var(--dim);padding:4px 6px;text-align:left;cursor:pointer;min-width:0} .uitem:hover,.uitem.on{background:var(--row-hover);border-color:var(--line-soft)} .uitem.on{box-shadow:inset 2px 0 0 var(--accent)} .uitem .us{font-family:var(--mono);font-weight:800;color:var(--text)} .uitem .un{font-size:var(--f-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .uitem .um{font-family:var(--mono);font-size:var(--f-2xs);text-align:right}.uitem .um.rich{color:var(--caution)} .sectorfacts{display:flex;flex:1;min-height:0;flex-direction:column;justify-content:space-around;gap:3px;margin-top:6px;overflow:auto} .sectorfact{display:grid;grid-template-columns:78px 1fr auto;gap:8px;align-items:start;padding:6px 7px;border-top:1px solid var(--line-soft);font-size:var(--f-xs);line-height:1.36;color:var(--dim)} .sectorfact:first-child{border-top:0}.sectorfact .sfk{color:var(--faint);text-transform:uppercase;letter-spacing:.04em;font-size:var(--f-2xs)}.sectorfact b{color:var(--text)} .sectorfact .sfsrc{font-family:var(--mono);color:var(--faint);white-space:nowrap} .sectorpanel .holdrow{gap:5px}.sectorpanel .holdchip{padding:4px 7px;font-size:var(--f-xs)} .sectorpanel .callout{margin-top:7px;padding:8px 9px;font-size:var(--f-xs)} /* News/research is a contextual lens, not a destination. primary .nitem grammar stays intact. */ .newspanel{padding-left:0;padding-right:0}.newspanel>.lenshd{padding:0 15px 8px}.newsfeed{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;border-top:1px solid var(--line-soft)} button.nitem.homenews{width:100%;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;background:0;color:inherit;text-align:left;cursor:pointer} button.nitem.homenews:hover{background:var(--row-hover)} .homenews>span:nth-child(2){min-width:0} .homenews .newsend{position:relative;display:grid;place-items:center;min-width:30px;text-align:right} .homenews .newsend>.mt{transition:opacity var(--mo-quick) var(--mo-ease)} .homenews .scopego{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);opacity:0;transform:scale(.8); transition:opacity var(--mo-quick) var(--mo-ease),transform var(--mo-quick) var(--mo-ease)} .homenews .scopego svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .homenews:hover .newsend>.mt,.homenews:focus-visible .newsend>.mt{opacity:0} .homenews:hover .scopego,.homenews:focus-visible .scopego{opacity:1;transform:none} .homenews .ndot{width:6px;height:6px;border-radius:50%;margin-top:7px;background:var(--accent)} .homenews .ndot.pos{background:var(--profit)}.homenews .ndot.warn{background:var(--caution)}.homenews .ndot.neg{background:var(--loss)} .homenews .scp.market{background:var(--accent-wash);color:var(--accent)}.homenews .scp.sector{background:var(--caution-wash);color:var(--caution)}.homenews .scp.position{background:var(--violet-wash);color:var(--violet)} .homenews .mt{display:block} .newscap{padding:7px 15px 0;font-size:var(--f-2xs);color:var(--faint);line-height:1.4} /* option chain + candles */ .chpanel .chpicker{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 7px} .chpick{border:1px solid var(--line-soft);background:var(--panel);color:var(--dim);border-radius:6px;padding:3px 9px;font-family:var(--mono);font-weight:700;font-size:var(--f-xs);cursor:pointer} .chpick.on{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)} .chtf{display:inline-flex;flex:none;border:1px solid var(--line-soft);border-radius:6px;overflow:hidden;margin-bottom:8px} .chtf button{border:0;border-left:1px solid var(--line-soft);background:var(--panel);color:var(--dim);font-size:var(--f-2xs);font-family:var(--mono);padding:3px 8px;cursor:pointer} .chtf button:first-child{border-left:0}.chtf button.on{background:var(--accent-2);color:var(--text)} .chtf button.none{color:var(--faint);border-bottom:2px dashed var(--line)} .chchartwrap{height:120px;min-height:120px;flex:none;display:flex;flex-direction:column;margin-bottom:9px} .mdchart.candles{flex:1;min-height:120px;height:auto} .mdna{border:1px dashed var(--line);border-radius:8px;padding:16px;text-align:center;color:var(--faint);display:flex;flex-direction:column;gap:5px;min-height:120px;justify-content:center} .mdna b{color:var(--dim)}.mdna span{font-size:var(--f-xs);line-height:1.5} .chaintbl{font-family:var(--mono);font-size:var(--f-xs)} .chrow{display:grid;grid-template-columns:1fr 1fr 60px 40px 1fr 1fr;gap:6px;align-items:center;padding:3px 6px;border-radius:4px} .chrow.chhd{color:var(--faint);font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line-soft)} .chrow.atm{background:var(--sel-wash);box-shadow:inset 2px 0 0 var(--accent)} .chrow .chk{text-align:center;color:var(--text);font-weight:700} .chrow .chiv{text-align:center;color:var(--caution)} .chrow .chb{color:var(--profit)} .chrow .cha,.chrow .cha.p{color:var(--dim)} .chrow .chb.p{color:var(--loss)} /* On a genuinely tall, wide canvas the lower lenses and chain distribute their existing information through the available field. This is continuous fill behavior, not a second desktop composition: narrower/shorter viewports retain the same components and bounded rows. */ @media (min-width:1701px) and (min-height:1200px){ .lv-book #chainBand .chaintbl{flex:1;min-height:0;display:flex;flex-direction:column} .lv-book #chainBand .chrow{flex:1;min-height:0;padding-top:2px;padding-bottom:2px} .lv-book .marketpanel .universegrid{flex:1;overflow:hidden;grid-auto-rows:minmax(0,1fr)} .lv-book .bookband .govdetail{display:flex;flex-direction:column;overflow:hidden} .lv-book .bookband .govhedge{margin-top:auto} .lv-book .newspanel .newsfeed{display:flex;flex-direction:column;overflow:hidden} .lv-book .newspanel .homenews{flex:1;min-height:0} } @media (max-height:1199px) and (min-width:1701px){ #riskMain .homemap{min-height:185px} .chchartwrap{height:84px;min-height:84px;margin-bottom:6px} .mdchart.candles,.mdna{min-height:84px} .marketpanel .uitem{padding:2px 6px} button.nitem.homenews{padding:5px 10px} .homenews .ht{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .homenews .mt{margin-top:1px} } @media (max-height:1100px) and (min-width:1701px){ .lv-book .book .card{padding:1px 8px} .lv-book .book .card>.cface{grid-template-rows:auto 20px} .lv-book .book .cpeek{height:20px} #riskMain .homemap{min-height:160px} .chchartwrap{height:64px;min-height:64px;margin-bottom:4px} .mdchart.candles,.mdna{min-height:64px} .marketpanel .uitem{padding:1px 6px} .marketpanel .universegrid{gap:2px} .sectorfact{padding:5px 7px} .govdetail{padding-top:6px} .govverdict{margin-bottom:5px} .govfacts{margin:6px 0} .govhedge{padding-top:6px} .govtab .gklong{display:none} .govtab .gkshort{display:inline} } @media (min-width:1001px) and (max-width:1700px){ #riskMain .homemap{min-height:200px} .chchartwrap{height:100px;min-height:100px;margin-bottom:6px} .mdchart.candles,.mdna{min-height:100px} .marketpanel .uitem{padding:3px 6px} } @media (min-width:1200px) and (max-width:1700px){ #riskMain .homemap{min-height:clamp(140px,21vh,215px);margin:4px 0 3px} .chchartwrap{height:clamp(62px,9vh,96px);min-height:clamp(62px,9vh,96px);margin-bottom:4px} .mdchart.candles,.mdna{min-height:clamp(62px,9vh,96px)} } @media (min-width:1200px) and (max-width:1700px) and (max-height:800px){ .lv-book .bookband{gap:4px} .lv-book .bookband>.lenshd .rkhero{gap:6px;padding-left:6px} .lv-book .bookband>.lenshd .rkhero .rkh b{font-size:var(--f-sm)} .lv-book .govtabs{gap:3px}.lv-book .govtab{padding:3px 4px} .lv-book .govtab .gv{margin-top:0;font-size:var(--f-xs)} .lv-book .govdetail{padding-top:4px;overflow:hidden} .lv-book .govverdict{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-bottom:3px;line-height:1.25} .lv-book .govbars{gap:1px}.lv-book .govbar{padding:0 2px;line-height:1.15} .lv-book .govfacts{gap:3px;margin:3px 0}.lv-book .govfact{padding:2px 5px} .lv-book .govfact b{margin-top:0;font-size:var(--f-xs)} .lv-book .govhedge{padding-top:3px;line-height:1.2}.lv-book .govhedge>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lv-book .govhedge .iconcta{width:27px;height:27px;border-radius:7px}.lv-book .govhedge .iconcta svg{width:15px;height:15px} .lv-book .govdetail .expcal{min-height:55px;margin:3px 0}.lv-book .govdetail .rkcard{margin-top:3px;padding:5px 7px} .lv-book .govcampaign{gap:3px;margin:4px 0}.lv-book .govround{padding:3px 4px} .lv-book .marketpanel .mdrow,.lv-book .sectorpanel .mdrow{height:48px;margin:3px 0 4px;flex:none} .lv-book .marketpanel .mdchart.mdmini,.lv-book .sectorpanel .mdchart.mdmini{height:48px;min-height:48px} .lv-book .mdmeta.col{min-width:75px;gap:1px;font-size:var(--f-xs)} .lv-book .marketpanel .msgrid.tight{gap:2px;margin-bottom:3px} .lv-book .marketpanel .msgrid.tight .msector{padding:2px 4px;gap:1px} .lv-book .marketpanel .lenshd.sub{margin:2px 0} .lv-book .marketpanel .universegrid{flex:1;overflow:hidden;gap:0} .lv-book .marketpanel .uitem{grid-template-columns:34px minmax(0,1fr) auto;gap:3px;padding:0 3px;line-height:1.1} .lv-book .sectorpanel .holdrow{gap:2px}.lv-book .sectorpanel .holdchip{padding:1px 4px} .lv-book .sectorpanel .sectorfacts{justify-content:stretch;gap:1px;margin-top:3px;overflow:hidden} .lv-book .sectorpanel .sectorfact{grid-template-columns:58px minmax(0,1fr);gap:4px;padding:2px 3px;line-height:1.15} .lv-book .sectorpanel .sectorfact>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lv-book .sectorpanel .sectorfact .sfsrc{display:none} .lv-book .newspanel>.lenshd{padding:0 10px 5px} .lv-book .newspanel .newsfeed{overflow:hidden} .lv-book .newspanel .homenews{padding:4px 7px} .lv-book .newspanel .homenews .ht,.lv-book .newspanel .homenews .mt{line-height:1.15} .lv-book .newspanel .homenews .mt{margin-top:1px} } @media (min-width:1200px) and (max-width:1700px) and (min-height:801px) and (max-height:1000px){ .lv-book .bookband{gap:6px}.lv-book .bookband>.lenshd .rkhero{gap:8px;padding-left:8px} .lv-book .govtabs{gap:4px}.lv-book .govtab{padding:4px 5px} .lv-book .govdetail{padding-top:5px;overflow:hidden} .lv-book .govverdict{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-bottom:4px;line-height:1.3} .lv-book .govbars{gap:2px}.lv-book .govbar{padding:1px 2px;line-height:1.2} .lv-book .govfacts{gap:4px;margin:4px 0}.lv-book .govfact{padding:3px 6px}.lv-book .govfact b{margin-top:1px;font-size:var(--f-sm)} .lv-book .govhedge{padding-top:4px;line-height:1.25}.lv-book .govhedge>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lv-book .govdetail .expcal{min-height:72px;margin:4px 0}.lv-book .govdetail .rkcard{margin-top:4px;padding:7px 8px} .lv-book .govcampaign{gap:4px;margin:6px 0}.lv-book .govround{padding:4px 5px} .lv-book .marketpanel .mdrow,.lv-book .sectorpanel .mdrow{height:70px;margin:4px 0 5px;flex:none} .lv-book .marketpanel .mdchart.mdmini,.lv-book .sectorpanel .mdchart.mdmini{height:70px;min-height:70px} .lv-book .mdmeta.col{min-width:82px;gap:2px;font-size:var(--f-xs)} .lv-book .marketpanel .msgrid.tight{gap:3px;margin-bottom:4px} .lv-book .marketpanel .msgrid.tight .msector{padding:3px 5px;gap:2px} .lv-book .marketpanel .lenshd.sub{margin:3px 0} .lv-book .marketpanel .universegrid{flex:1;overflow:hidden;gap:0} .lv-book .marketpanel .uitem{grid-template-columns:38px minmax(0,1fr) auto;gap:4px;padding:1px 3px;line-height:1.15} .lv-book .sectorpanel .holdrow{gap:3px}.lv-book .sectorpanel .holdchip{padding:2px 5px} .lv-book .sectorpanel .sectorfacts{justify-content:stretch;gap:2px;margin-top:4px;overflow:hidden} .lv-book .sectorpanel .sectorfact{grid-template-columns:66px minmax(0,1fr);gap:5px;padding:3px 4px;line-height:1.2} .lv-book .sectorpanel .sectorfact>span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lv-book .sectorpanel .sectorfact .sfsrc{display:none} .lv-book .newspanel .newsfeed{overflow:hidden} .lv-book .newspanel .homenews{padding:5px 8px} .lv-book .newspanel .homenews .ht,.lv-book .newspanel .homenews .mt{line-height:1.2} .lv-book .newspanel .homenews .mt{margin-top:1px} } .srctag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:var(--f-2xs);color:var(--dim);border:1px solid var(--line-soft);border-radius:4px;padding:1px 6px} .srctag.sim{color:var(--violet);border-color:var(--violet)} /* risk-map size legend */ .rkleg{display:inline-flex;align-items:center;gap:9px;font-size:var(--f-2xs);color:var(--faint);margin-left:auto} .rkleg .rkls{display:inline-flex;align-items:center;gap:4px} .rkleg svg{overflow:visible} /* concentration "one bet" hero */ .conchero{max-width:1720px;margin:14px auto 4px;border:1px solid var(--line-soft);border-radius:12px;background: linear-gradient(180deg,rgba(155,140,255,.06),transparent 60%),var(--panel-2);padding:15px 18px} .ch-verdict{font-size:var(--f-lg);line-height:1.4;color:var(--dim);letter-spacing:-.2px} .ch-verdict b{color:var(--text);font-weight:800} .ch-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:13px} .ch-hedge{display:flex;align-items:center;gap:14px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line-soft)} .ch-hedge .chh-txt{flex:1;font-size:var(--f-sm);line-height:1.45;color:var(--dim)} .ch-hedge .chh-txt b{color:var(--text)} .ch-hedge .chh-txt b.neg{color:var(--loss)} .ch-hedge .chh-txt b.pos{color:var(--profit)} .ch-hedge .chh-note{display:block;margin-top:3px;font-size:var(--f-xs);color:var(--faint)} .ch-hedge .btn.xs{flex:none} .chs{display:flex;flex-direction:column;gap:2px;padding:2px 0 2px 13px;border-left:2px solid var(--line)} .chs .chk{font-size:var(--f-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.4px} .chs .chv{font-family:var(--mono);font-weight:800;font-size:calc(var(--f-lg) * 1.16);letter-spacing:-.4px;color:var(--text)} .chs .chv.warn{color:var(--caution)} .chs .chsub{font-size:var(--f-xs);color:var(--dim);line-height:1.3} /* expiry bar-calendar */ .expcal{display:flex;align-items:flex-end;gap:9px;margin:12px 0 2px;min-height:118px} .expcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:0;cursor:pointer;padding:4px 2px 2px;border-radius:7px; transition:background var(--mo-quick) var(--mo-ease)} .expcol:hover{background:var(--row-hover)} .expcol .expamt{font-family:var(--mono);font-weight:700;font-size:var(--f-sm);color:var(--dim)} .expcol .expbarwrap{width:100%;height:74px;display:flex;align-items:flex-end;justify-content:center} .expcol .expbar{display:block;width:60%;max-width:34px;background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:4px 4px 2px 2px} .expcol.hot .expbar{background:linear-gradient(180deg,var(--caution),var(--caution-deep))} .expcol.hot .expamt{color:var(--caution)} .expcol .expdt{font-family:var(--mono);font-weight:700;font-size:var(--f-sm);color:var(--text)} .expcol .expn{font-size:var(--f-xs);color:var(--faint)} /* exposure temperature legend + box-select readout */ .rktemp{display:flex;align-items:center;gap:8px;padding:2px 2px 0;flex-wrap:wrap} .rktemp .lbl{font-size:var(--f-sm);color:var(--faint)} .rktempbar{flex:0 0 96px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--profit),var(--caution),var(--loss))} .rktempcap{font-size:var(--f-xs);color:var(--faint);margin-left:2px} @media (max-width:1100px){ .rkgrid{grid-template-columns:1fr} .impgrid{grid-template-columns:1fr} .ch-stats{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .opportunitycontrol.goals{max-width:100%;overflow-x:auto;scrollbar-width:none} .authbookpanel{height:auto}.authriskviz{min-height:150px}.authmarketfacts{grid-template-columns:1fr 1fr} .authsharerow{grid-template-columns:minmax(0,1fr) auto}.authsharerow .btn{grid-column:1/-1;justify-self:start} .placegrid{grid-template-columns:1fr} .govs{grid-template-columns:1fr} .decdepth{grid-template-columns:repeat(2,1fr)} } .keep{display:none} @media (max-width:900px){ .cmd{width:44vw} } @media (max-width:1000px){ .lv-position .board{flex-direction:column} .lv-position .recede{flex:none;flex-direction:row;overflow-x:auto;width:100%} .lv-position .recede .card{flex:0 0 auto} .lv-position .depth{grid-template-columns:1fr} .lv-position .decrow{grid-template-columns:1fr} .lv-position .decpl{padding-right:0;border-right:0;border-bottom:1px solid var(--line-soft);padding-bottom:9px} } /* ============================================================ TOUCH FLOOR — a phone is touched, not clicked. Controls sized for a mouse (16-20px tall pills, an 18px brand mark, a 17px command field) are a coin toss under a fingertip: the press lands on the row behind, or on the neighbouring pill. On a touch-primary screen every offered action gets a real target. Nothing is hidden, moved or restyled — only the hit area grows, so the composition is the same one the desk shows. ============================================================ */ @media (max-width:900px) and (pointer:coarse), (max-width:500px){ .histpill,.histchip{min-height:26px;min-width:30px;padding-inline:9px} .histseg button{min-height:26px;min-width:34px;padding-inline:9px} .brandmk{width:28px;height:28px} .mmseg button{min-height:28px} .cmd input,#cmd{min-height:30px} .bookfanrow{min-height:30px;align-content:center} .ibrkopt{min-height:28px} .opportunityrow{min-height:34px} .crumb{min-height:26px} } /* Decide changes composition on narrow screens. The overlay itself becomes the one bounded reading surface; its columns do not acquire nested scrollbars, and each leg becomes a full- width row. This is a structural mobile layout, not the desktop grid scaled down. */ @media (max-width:1000px){ #decideStage{--control-hit:40px} /* New Idea joins the document on mobile. The page is the sole vertical scroll owner; no full-screen overlay or nested panel can hide content below its own viewport. */ body:has(#decideStage.on){height:auto;min-height:100%;overflow-y:auto} #app:has(>#decideStage.on){height:auto;min-height:100dvh;overflow:visible} #app:has(>#decideStage.on)>#stage{display:none} #decideStage.on{position:relative;top:auto;right:auto;bottom:auto;left:auto;min-height:calc(100dvh - 47px); overflow:visible} .decwrap:not(.closewrap){position:relative;inset:auto;display:flex;flex-direction:column;min-height:100%;overflow:visible;padding:8px 8px 22px} .decwrap:not(.closewrap) .dectop{order:0} .decwrap:not(.closewrap) .rehearsalstrip{order:1} .decwrap:not(.closewrap) .decgrid{order:2} .decwrap:not(.closewrap) .decdock{order:3} .decwrap:not(.closewrap) .dectop{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px 9px;margin-bottom:10px} .decwrap:not(.closewrap) .dectop .decttl{min-width:0;overflow:hidden;text-overflow:ellipsis} .decwrap:not(.closewrap) .dectop .decintent{grid-column:1/-1;width:100%;justify-content:center;white-space:normal;text-align:center} .decwrap:not(.closewrap) .intentpop{position:fixed;left:8px;right:8px;top:116px;max-height:calc(100vh - 130px);overflow:auto;align-items:stretch} .decgrid,.decdock{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0} .deccol,.deccol.dccenter{display:flex;min-width:0;min-height:0;overflow:visible;gap:9px} /* The desktop comparison context has two useful siblings: its choice analysis and the existing Market owner. Once New Idea becomes a document those siblings follow the same one-column reading order as every selected package; the desktop grid's 280px + 520px floors must not survive as an 800px-wide child on a phone. */ .decgrid.comparisonrequired .comparisoncontext{display:flex;flex-direction:column; grid-template-columns:minmax(0,1fr);width:100%;min-width:0;height:auto;overflow:visible} .dcleft .fan{flex:none;min-height:0;max-height:none;overflow:visible;padding-right:0} .dcleft .leftsupport{display:flex;flex:none;height:auto;flex-direction:column;gap:9px;min-height:0;overflow:visible} .dcleft .leftsupport>.declegpanel{width:100%;align-self:stretch} .dcleft .pickmap{flex:none;height:clamp(250px,68vw,360px);min-height:250px;border-top:1px solid var(--line-soft);border-left:0;padding:7px 0 0} .dcleft .decmap{min-height:185px} .dcleft .pickmap .fanleg{display:flex} .dcleft .declegpanel .declegs{flex-direction:column;align-items:stretch;max-height:none;overflow:visible;padding:0;scroll-snap-type:none} .declegpanel .declegs .legr{flex:none;width:100%;min-width:0;max-width:none;min-height:42px;scroll-snap-align:none} .declegpanel .declegs .lgm{justify-content:flex-start;flex-wrap:wrap;gap:2px 4px;padding-top:2px} .declegpanel .addleg.sm{flex:none;width:100%;min-height:36px;align-self:auto;display:flex;align-items:center;justify-content:center;gap:4px} .dccenter .dcctop{display:flex;flex-direction:column;gap:9px;margin:0} .dccenter .dccpay{height:auto;overflow:visible} .dccenter .decpay,.dccenter:has(.declegs) .decpay,.dccenter:has(.srow-ctl) .decpay, .dccenter:has(.declegs):has(.srow-ctl) .decpay{height:230px;min-height:230px;max-height:none} .dccenter .scenpanel{height:auto;min-height:0;overflow:visible} .understand,.understand .inspectwell{height:auto;min-height:0;overflow:visible} .understand .inspectpane{height:auto;min-height:0;overflow:visible} /* On one narrow column the page owns scrolling. The evidence fan uses a readable landscape plot plus its exact statistics; it does not reserve almost a viewport of empty canvas. */ .understand .evsimstage{flex:none;height:auto;min-height:0} .understand .evsimstage .ensembleresult{position:static} .understand .ensembleresult{grid-template-rows:auto auto auto} .understand .ensembleresult .mcfan{height:clamp(210px,56vw,280px);min-height:0} .dccenter .marketlens{flex:none;min-height:0;max-height:none;height:auto;overflow:visible} .dccenter .marketlens .histwrap{flex:none;min-height:230px} .dccenter .marketlens .marketctx{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:10px;overflow:visible} .dccenter .marketlens .marketcol,.dccenter .marketlens .authnews, .dccenter .marketlens .packagebooknear,.dccenter .marketlens .packagebookcol, .dccenter .marketlens .packagebook{height:auto;min-height:0;max-height:none;overflow:visible} .decdock{margin-top:10px} .decdock>span{display:none}.decdock>.execute,.decdock.reviewdock>.execute{width:100%;grid-column:auto} .dockrow{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"order edit place" "fill fill fill";gap:7px} .dockrow .dockorder{grid-area:order}.dockrow .fillbar{grid-area:fill}.dockrow .ticketedit{grid-area:edit}.dockrow .btn.place{grid-area:place} .decdock .execbox.open{padding:9px 9px 54px} .decdock .execbox.open .execgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .decdock .execbox.open .placefoot{left:9px;right:9px;bottom:8px;justify-content:flex-end} .reviewbar{grid-template-columns:1fr;gap:7px;padding:9px} .reviewchecks{grid-template-columns:repeat(3,minmax(0,1fr))}.reviewacts{grid-column:1;grid-row:auto;justify-content:flex-end} #decideStage button:not(.fanr):not(.srow):not(.iconbtn):not(.playb):not(.microcta){min-height:40px} #decideStage .railtool,#decideStage .lrm,#decideStage .histpill, #decideStage .histseg button,#decideStage .histchip,#decideStage .mcviewseg button, #decideStage .inspecttab,#decideStage .spd button,#decideStage .ticketedit, #decideStage button.tgl{min-width:40px;min-height:40px} .dockorder{flex-wrap:wrap;white-space:normal;overflow:visible} .dockorder b,.dockorder span{flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip} #decideStage select,#decideStage input:not([type="range"]){min-height:40px} .authpending{display:flex;flex-direction:column;min-height:0}.authpending .authpane{min-height:150px}.authpending .authpane.hero{order:-1;min-height:260px} .authempty{display:flex;flex-direction:column}.emptycard.hero{order:-1;padding:22px}.emptycard{overflow:visible} .comparisonchoice{height:auto;min-height:220px;overflow:visible} .comparisonchoice.hero{order:-1} .comparisonchoiceflow{margin:16px 0 10px} /* Composition is an action surface: on narrow screens its complete controls come before the explanatory analysis. The ordinary empty-state hero ordering remains unchanged elsewhere. */ .declarationedit .ideacomposer{order:-2} } @media (min-width:1001px) and (max-width:1199px){ /* Intermediate desktop is a two-column decision document, not a clipped full-screen cockpit and not a 4,000px phone column. Ranked ideas and the exact package remain beside the analysis; Understand receives a full-width evidence row below them. The document owns the only scroll. */ body:has(#decideStage.on){height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden} #app:has(>#decideStage.on){height:auto;min-height:100dvh;overflow:visible} #app:has(>#decideStage.on)>#stage{display:none} #decideStage{--control-hit:36px} #decideStage.on{position:relative;top:auto;right:auto;bottom:auto;left:auto; min-height:calc(100dvh - 47px);overflow:visible} .decwrap:not(.closewrap){position:relative;inset:auto;min-height:calc(100dvh - 47px); height:auto;grid-template-rows:max-content max-content max-content;overflow:visible} .decgrid{grid-template-columns:minmax(390px,42%) minmax(0,58%); grid-template-rows:max-content max-content; grid-template-areas:"left center" "right right";gap:8px;overflow:visible;align-items:start} .decgrid>.dcleft{grid-area:left} .decgrid>.dccenter{grid-area:center} .decgrid>.dcright{grid-area:right} .decgrid.comparisonrequired{grid-template-columns:minmax(390px,42%) minmax(0,58%); grid-template-rows:max-content;grid-template-areas:"left comparison"} .decgrid.comparisonrequired .comparisoncontext{grid-area:comparison;height:auto;min-height:520px} .deccol,.deccol.dccenter,.understand,.understand .inspectwell, .understand .inspectpane{height:auto;min-height:0;overflow:visible} .deccol.dccenter{display:flex} .dcleft .fan{flex:none;min-height:92px;max-height:none;overflow:visible} .dcleft .fanrows{overflow:visible;mask-image:none!important} .dcleft .leftsupport{flex:none;display:grid;grid-template-columns:minmax(0,1fr); grid-template-rows:max-content minmax(190px,auto);min-height:270px;gap:7px;overflow:visible} .dcleft .leftsupport>.declegpanel{height:auto;overflow:visible} .dcleft .pickmap{width:100%;height:auto;min-height:190px;max-height:none; border-left:0;border-top:1px solid var(--line-soft);padding:7px 0 0;overflow:visible} .dcleft .decmap{min-height:140px} .dccenter .dcctop{grid-template-rows:minmax(245px,auto) max-content;overflow:visible} .dccenter .dccpay{min-height:245px} .dccenter .decpay{min-height:175px} .dccenter .scenpanel,.dccenter .marketlens{height:auto;min-height:0;max-height:none; overflow:visible} .dccenter .marketlens .histwrap{min-height:220px} .understand{display:grid;grid-template-columns:minmax(330px,.42fr) minmax(0,.58fr); grid-template-rows:max-content max-content max-content;gap:6px 9px;align-items:start} .understand>.usechead{grid-column:1/-1;grid-row:1} .understand>.decisionbrief{grid-column:1;grid-row:2} .understand>.inspectrail{grid-column:1;grid-row:3} .understand>.inspectwell{grid-column:2;grid-row:2/4;flex:none} .understand .evsimstage{flex:none;min-height:410px;height:auto;max-height:none; overflow:visible} .understand .evsimstage .ensembleresult{position:static} /* Four children live here: heading, interaction readout, SVG, and terminal stats. The former three-row override assigned the 380px chart row to the readout and pushed the actual fan below a clipped stage. Name all four rows so the chart itself earns the canvas. */ .understand .ensembleresult{height:auto;min-height:0; grid-template-rows:auto auto minmax(260px,300px) auto} .understand .ensembleresult .mcfan{height:clamp(260px,25vw,300px);min-height:260px} #decideStage button:not(.fanr):not(.srow):not(.iconbtn):not(.playb):not(.microcta){min-height:36px} #decideStage .railtool,#decideStage .lrm,#decideStage .histpill, #decideStage .histseg button,#decideStage .histchip,#decideStage .mcviewseg button, #decideStage .inspecttab,#decideStage .spd button,#decideStage .ticketedit, #decideStage button.tgl{min-width:36px;min-height:36px} #decideStage select,#decideStage input:not([type="range"]){min-height:36px} } @media (min-width:1200px) and (max-width:1500px){ /* 1280 and 1440 are desktop workspaces, not enlarged phones. Keep all three product owners co-visible and let the ranked list own its genuine overflow. Package pricing and research now accompany Paths, so the right rail borrows a little width from both neighbors without starving the payoff/history center or the candidate/leg rail. */ .decgrid,.decdock{ --dec-left:clamp(330px,26vw,370px); --dec-right:clamp(370px,30vw,420px); gap:8px } .deccol.dccenter{grid-template-rows:minmax(0,1fr) clamp(336px,41.5vh,382px)} .dccenter .marketlens{ display:grid;height:100%;min-height:0;overflow:hidden; grid-template-rows:max-content max-content minmax(105px,.45fr) minmax(135px,.55fr) } .dccenter .marketlens>*{min-height:0} .dccenter .marketlens .histwrap{min-height:105px} .dccenter .marketlens .histstrip{display:none} .dccenter .marketlens .authmarkethero{display:flex;align-items:baseline;gap:8px} .dccenter .marketlens .authmarkethero .amh-facts{ margin-left:auto;display:inline-flex;gap:7px;color:var(--faint); font-size:var(--f-2xs);white-space:nowrap } .dccenter .marketlens .authmarkethero .amh-facts b{color:var(--dim);font-family:var(--mono)} .dccenter .marketlens .marketctx{ display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); min-height:135px;height:100%;gap:0 7px;overflow:hidden } .dccenter .marketlens .marketcol{display:flex;min-width:0;min-height:0;flex-direction:column;overflow:hidden} .dccenter .marketlens .packagebooknear,.dccenter .marketlens .authnews{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none } .dcleft .fan{min-height:240px} .dcleft .fanhead{display:none} .dcleft .fan .fanr{display:grid;grid-template-columns:26px minmax(0,1fr) 62px 58px 64px; grid-template-areas:"icon name name fit fit" "net net loss chance ev"; min-height:43px;gap:2px 5px;padding:4px 6px} .dcleft .fan .fanicon{grid-area:icon} .dcleft .fan .fanname{grid-area:name;min-width:0} .dcleft .fan .fanname .fnm{display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2;overflow:hidden;line-height:1.15} .dcleft .fan .fanname .fstrikelbl{display:none} .dcleft .fan .fvd{grid-area:fit;justify-self:end;width:auto;max-width:100%} .dcleft .fan .fan-net{grid-area:net;text-align:left} .dcleft .fan .fan-loss{grid-area:loss} .dcleft .fan .fan-chance{grid-area:chance} .dcleft .fan .fan-ev{grid-area:ev} .dcleft .leftsupport{min-height:0} .understand{gap:5px} .understand .inspectwell{min-height:0} } @media (pointer:coarse) and (max-width:1500px){ #decideStage{--control-hit:40px} #decideStage button,#decideStage select,#decideStage input:not([type="range"]){ min-height:40px} .lv-position .histpill,.lv-position .histchip,.lv-position .histseg button, .lv-position .playb,.lv-position .spd button, .lv-position .mstp>button,.lv-position .tunit button{ min-width:40px;min-height:40px } } @media (max-width:500px){ .thread{height:78px;flex-wrap:wrap;align-content:center;gap:4px 7px;padding:4px 6px} .thread .brandmk{order:1}.thread .thctl{order:2;flex:1;min-width:0;gap:4px}.thread .thsep,.thread .thctx{display:none} .thread .mktmode{flex:1;min-width:0}.thread .mktmode .mmseg{display:flex;width:100%}.thread .mktmode .mmseg button{flex:1;min-width:0;font-size:10px;padding:4px 2px}.thread .threadnew{padding:5px 6px} .thread .cmd{order:3;flex:0 0 100%;width:100%}.thread .searchbox{height:29px} .thread .themetoggle{--control-hit:29px} #app:has(>.decstage.on) #stage{display:none} #decideStage.on{min-height:calc(100dvh - 78px)} .decwrap:not(.closewrap){padding-left:6px;padding-right:6px} .decwrap:not(.closewrap) .dectop .dctx{display:none} .decwrap:not(.closewrap) .dectop .decintent{font-size:var(--f-xs);gap:5px;padding-left:7px;padding-right:7px} .ideacomposer .objchip{grid-template-columns:86px minmax(0,1fr);column-gap:6px}.ideacomposer .goaldeclarations{grid-template-columns:1fr} /* Cash truth is three exact account facts, not one ellipsised sentence. Each fact receives its own row so the amount and authority remain readable down to the 320px viewport. */ .liquidityfigure{flex-basis:auto;width:100%;min-width:0} .liquiditylegend{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:3px; white-space:normal} .liquiditylegend span{overflow:visible;text-overflow:clip;white-space:normal} .comparisonchoiceflow{grid-template-columns:minmax(0,1fr)} /* Home opportunity-lens controls: the 5-goal segmented row (Income…Exit) overruns a 390px viewport and clips Exit unreachably. Let the segments wrap so every goal stays selectable. */ .opportunitycontrols .objchip{align-items:flex-start} .opportunitycontrols .objchip .oseg{flex-wrap:wrap;row-gap:2px} /* Market-regime sentence is context, not a chip — on a phone it must wrap, not clip to one line. Give it the full row of the pulse footer and let the Shape button drop below it. */ .authmarketpulse .authpulsefoot{flex-wrap:wrap;row-gap:5px} .authmarketpulse .authpulsefoot>span{white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 100%;min-width:0;line-height:1.3} .scenariosummary{flex-wrap:wrap} .packageexpirynotice{align-items:flex-start;flex-direction:column} .modebar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center} .modebar .eyebrow{grid-column:1}.modebar .railtools{grid-column:2;grid-row:1} .modebar .hint{grid-column:1/-1;grid-row:2;margin-left:0;white-space:normal;line-height:1.25} .fangroup{align-items:flex-start;flex-direction:column;gap:1px;padding-top:5px}.fangroup span{margin-left:0;text-align:left} .dectop .backendstate{grid-column:1/-1;max-width:none;white-space:normal;overflow:visible} .fan .fanhead{display:none} .fan .fanr{display:grid;grid-template-columns:30px repeat(5,minmax(0,1fr)) minmax(58px,auto); grid-template-areas:"icon name name name name name fit" "net net loss loss chance chance chance" "cap cap cap ev ev ev ev"; gap:5px 6px;min-height:92px;padding:7px 8px} .fan .fanr .fanicon{grid-area:icon}.fan .fanr .fanname{grid-area:name} .fan .fanr>.fvd{grid-area:fit;justify-self:end} .fan .fanr .fan-net{grid-area:net}.fan .fanr .fan-loss{grid-area:loss} .fan .fanr .fan-chance{grid-area:chance}.fan .fanr .fan-cap{grid-area:cap} .fan .fanr .fan-ev{grid-area:ev} .fan .fanr .fnum,.fan .fanr .fev,.fan .fanr .fcol-cap{display:flex;flex-direction:column;align-items:flex-start;text-align:left;overflow:visible} .fan .fanr .fnum::before,.fan .fanr .fev::before{display:block;color:var(--faint);font:650 9px/1.1 var(--sans);letter-spacing:.04em;text-transform:uppercase} .fan .fanr .fan-net::before{content:"net premium"}.fan .fanr .fan-loss::before{content:"max loss"} .fan .fanr .fan-chance::before{content:"market POP"}.fan .fanr .fan-cap::before{content:"capital"} .fan .fanr .fan-ev::before{content:"after-cost EV"} .dcleft .leftsupport,.dcleft .pickmap{min-width:0;max-width:100%;overflow:clip} .dcleft .decmap{max-width:100%;overflow:hidden} .dcleft .pickmap .mapcard{left:6px!important;right:6px;min-width:0;max-width:none} .decleghead{align-items:center;flex-wrap:wrap}.decleghead .hint{flex:1;white-space:normal;line-height:1.25} .declegstate{margin-left:auto}.declegpanel .declegs .legr-top{flex-wrap:wrap} .declegpanel .declegs .legr-top{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-areas:"side type spacer remove" "editors editors editors editors";align-items:center;gap:5px} .declegpanel .declegs .leg-side{grid-area:side}.declegpanel .declegs .leg-type{grid-area:type} .declegpanel .declegs .leg-editors{grid-area:editors;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .declegpanel .declegs .leg-editors>.mstp{width:100%;min-width:0} .declegpanel .declegs .leg-editors>.mstp .mv{flex:1;min-width:24px} .declegpanel .declegs .leg-remove{grid-area:remove;justify-self:end} .declegpanel .declegs .mstp .ml{display:block} .declegpanel .declegs .lgm{white-space:normal;line-height:1.3} .dccenter .decpay,.dccenter:has(.declegs) .decpay,.dccenter:has(.srow-ctl) .decpay, .dccenter:has(.declegs):has(.srow-ctl) .decpay{height:210px;min-height:210px} /* Book comparison does not amputate best-tail and gain-odds facts on a phone. Identity earns the first line; the four named outcomes share the second, preserving the complete analysis. */ .authcompare .acrow{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 5px} .authcompare .acrow:not(.head)>b{grid-column:1/-1} .authcompare .acrow.head>*:first-child{display:none} .kgrid.calm{grid-template-columns:1fr!important}.ksecondary{gap:7px 12px} .inspectrail{grid-template-columns:repeat(2,minmax(0,1fr))} .understand .decisionbrief .dbfacts{grid-template-columns:1fr 1fr} .decdock .execbox.open .execgrid{grid-template-columns:1fr} .dockrow{grid-template-columns:minmax(0,1fr) 40px;grid-template-areas:"order edit" "fill fill" "place place"} .dockrow .btn.place{width:100%} .reviewchecks{grid-template-columns:1fr}.reviewacts{white-space:normal;justify-content:stretch}.reviewacts .btn{flex:1} } @media (max-width:360px){ .declegpanel .declegs .leg-strike .ml, .declegpanel .declegs .leg-qty .ml{font-size:0;padding-inline:3px} .declegpanel .declegs .leg-strike .ml::after{content:"K";font-size:var(--f-xs)} .declegpanel .declegs .leg-qty .ml::after{content:"Qty";font-size:var(--f-xs)} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} .focus .card>.cdetail>*{opacity:1;transform:none} .book .card:hover{transform:none} } /* ===== LEARN — the summoned lens (reuses .decstage/.ovwrap) + the glossary hover popover ===== */ .gloss{border-bottom:1px dotted var(--accent-2);cursor:help;color:inherit} .gloss:hover{color:var(--accent)} .glosspop{position:fixed;z-index:60;display:none;max-width:268px;background:var(--panel);border:1px solid var(--line); border-radius:9px;padding:9px 11px;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transform:translateY(-3px); transition:opacity var(--mo-quick) var(--mo-ease),transform var(--mo-quick) var(--mo-ease);pointer-events:none} .glosspop.on{opacity:1;transform:none} .glosspop b{font-size:var(--f-sm)} .glosspop .ga{color:var(--faint);font-size:var(--f-2xs);font-family:var(--mono)} .glosspop .gpd{font-size:var(--f-xs);color:var(--dim);line-height:1.5;margin-top:4px} .glosspop .gph{font-size:var(--f-2xs);color:var(--faint);margin-top:6px;font-style:italic} .lrn .lsearch{margin-left:auto;flex:none;width:min(420px,40vw)} .lrn .lsearch input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--text); font-size:var(--f-sm);padding:7px 12px;font-family:var(--sans)} .lrn .lsearch input:focus{outline:0;border-color:var(--accent-2)} .lrn-body{display:flex;flex-direction:column;gap:16px} .lsec-h{display:flex;align-items:baseline;gap:9px;margin-bottom:9px} .lsec.lead{background:var(--panel-2);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px} .lconcepts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:11px} .lconcept{border:1px solid var(--line-soft);border-radius:10px;background:var(--panel);padding:12px 14px;cursor:pointer;transition:border-color var(--mo-quick) var(--mo-ease)} .lconcept:hover{border-color:var(--accent-2)} .lconcept.big{cursor:default;grid-column:1/-1;background:var(--panel-2)} .lconcept .lc-h{display:flex;align-items:center;gap:9px;margin-bottom:6px} .lconcept .lci{width:25px;height:25px;border-radius:7px;background:var(--accent-wash);display:flex;align-items:center;justify-content:center;flex:none} .lconcept .lci svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.7} .lconcept b{font-size:var(--f-sm)} .lconcept p{margin:0;color:var(--dim);font-size:var(--f-xs);line-height:1.55} .lexpl{display:flex;flex-direction:column;gap:9px} .lexpl-h{display:flex;align-items:center;gap:9px}.lexpl-h b{font-size:var(--f-lg)}.lexpl-h .ga{color:var(--faint);font-size:var(--f-xs);font-family:var(--mono)} .lexpl-tag{color:var(--dim);font-size:var(--f-sm);line-height:1.5} .learncap{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 12px;align-items:start; padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:7px; background:var(--panel-2);font-size:var(--f-xs);line-height:1.4} .learncap b{color:var(--text)}.learncap span{color:var(--dim)} .learncap.blocked{border-left-color:var(--loss)}.learncap.education{border-left-color:var(--caution)} .learncap.auto{border-left-color:var(--violet)} @media (max-width:600px){.learncap{grid-template-columns:1fr;gap:3px}} .lexpl-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .lchip{font-size:var(--f-2xs);border:1px solid var(--line-soft);border-radius:5px;padding:2px 8px;color:var(--text)}.lchip i{color:var(--faint);font-style:normal;margin-right:5px;text-transform:uppercase;letter-spacing:.05em} .lgrks{display:inline-flex;gap:6px;margin-left:auto}.lgrk{font-family:var(--mono);font-size:var(--f-2xs);color:var(--accent-2)} .lexpl-pay{width:100%;height:150px;border:1px solid var(--line-soft);border-radius:9px;background:var(--surface-canvas);display:block} .lexpl-beg{margin:0;color:var(--dim);font-size:var(--f-sm);line-height:1.6}.lexpl-beg b{color:var(--text)} .lgloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:9px} .lgi{border:1px solid var(--line-soft);border-radius:9px;background:var(--panel);padding:9px 11px} .lgi-h{display:flex;align-items:baseline;gap:7px}.lgi-h b{font-size:var(--f-sm)}.lgi-h .ga{color:var(--faint);font-size:var(--f-2xs);font-family:var(--mono)} .lgi-cat{margin-left:auto;font-size:var(--f-2xs);color:var(--faint);text-transform:uppercase;letter-spacing:.05em} .lgi-def{font-size:var(--f-xs);color:var(--dim);line-height:1.5;margin-top:3px} .llearn{border:1px solid var(--line-soft);background:var(--panel-2);color:var(--dim);border-radius:6px;font-size:var(--f-2xs); padding:2px 8px;cursor:pointer;flex:none;transition:color var(--mo-quick) var(--mo-ease)} .llearn:hover{color:var(--accent);border-color:var(--accent-2)} .fixtureflag{flex:none;border:1px solid rgba(227,179,65,.34);border-radius:999px;padding:3px 8px;color:var(--caution); background:rgba(227,179,65,.07);font:600 9px/1.2 var(--mono);letter-spacing:.045em;text-transform:uppercase;white-space:nowrap} @media(max-width:900px){.fixtureflag{max-width:112px;overflow:hidden;text-overflow:ellipsis}} /* ===== convergence increment: book fan · Market lens · compact ranked rows ===== */ /* the map's region captions must survive gridlines beneath them */ .decmap text.maplab{paint-order:stroke;stroke:var(--panel-2);stroke-width:3.5px;stroke-linejoin:round} /* an empty dock is no dock: comparison-required narrates once, above the ranked list */ .decdock.empty{display:none} .fanr .fev.pos{color:var(--profit)} .fanr .fev.neg{color:var(--loss)} .fanname .fstrikelbl{display:block;font-family:var(--mono);font-size:var(--f-xs);color:var(--faint);line-height:1.25} .candidateaccountfit{display:block;margin-top:1px;font:650 var(--f-2xs)/1.2 var(--sans);white-space:normal} .candidateaccountfit.ok{color:var(--profit)}.candidateaccountfit.warn{color:var(--caution)} .candidateaccountfit.bad{color:var(--loss)}.candidateaccountfit.unknown{color:var(--faint)} .overflowmeta.on .overflowread{cursor:pointer;color:var(--accent)} .overflowmeta.on .overflowread:hover{text-decoration:underline} /* below ~1080px of height the ranked list keeps priority; the support strip still stacks legs over the full-width map, and the candidate fan above absorbs the squeeze */ @media (min-width:1001px) and (max-height:1079px), (min-width:1900px) and (min-height:1080px) and (max-height:1150px){ /* Sizes to its legs and risk map; the candidate fan above is the one scroller and absorbs the squeeze. As a shrinkable item this was crushed 34px under its content at 2000x963 — coverage line cut, risk-map remnant pushed into the order dock's band. */ .dcleft .fan{min-height:110px} .dcleft .leftsupport{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;align-items:stretch;flex:0 0 auto;min-height:min-content;max-height:none} .dcleft .leftsupport>.declegpanel{min-width:0;min-height:0;margin:0;display:flex;flex-direction:column;overflow:hidden} /* Four primary legs are default composition, not overflow. The exact-package rail earns a scrollbar only for genuinely longer custom structures; ranked ideas keep the other primary overflow owner. */ .dcleft .declegpanel .declegs{flex:1;min-height:0;max-height:none;overflow:hidden;gap:3px;padding-right:0} .dcleft .declegpanel .declegs .legr{display:flex;flex-direction:column;row-gap:2px;padding:3px 5px} .dcleft .declegpanel .declegs .legr-top{gap:2px} .dcleft .declegpanel .declegs .tgl{padding:1px 3px;font-size:10px;line-height:16px} .dcleft .declegpanel .declegs .mv,.dcleft .declegpanel .declegs .lgm{font-size:10px} .dcleft .declegpanel .declegs .lgm{justify-content:flex-start;overflow:visible;line-height:1.05;min-height:11px} .dcleft .declegfoot{margin-top:3px}.dcleft .declegfoot .hint{display:none} .dcleft .declegpanel .addleg.sm{min-height:24px;padding:3px 6px} .dcleft .pickmap{min-width:0;min-height:170px;height:auto;max-height:320px;border-top:0;border-left:1px solid var(--line-soft);padding:0 0 0 9px} .dcleft .decmap{flex:1;min-height:118px} .dcleft .pickmap .fanleg{display:none} .declegpanel .legr{padding:3px 6px} /* Few ranked ideas is a per-load fact (never per-selection): list pressure is gone, so the complete package sits below the short list and the linked map earns the full rail width. */ } @media (min-width:1001px) and (max-width:1450px) and (max-height:1079px){ /* In the compact side-by-side support row the selected candidate already owns expiration. Repeating its wide expiry badge is the only element that can widen the exact-leg panel. */ .dcleft .decleghead>.badge{display:none} } @media (min-width:1200px) and (max-width:1500px) and (max-height:1079px){ /* At intermediate desktop widths the ranked field is the primary decision surface. The risk map owns its complete 202px drawing box; the former 170px clamp cropped the x-axis and legend. */ .dcleft .pickmap{height:202px;min-height:202px;max-height:202px;flex:0 0 202px} .dcleft .decmap{min-height:100px} /* The count, named explanation disclosure, and retry remain visible; the long sentence that repeats the disclosure is the only part omitted in this compact rail. */ .dcleft .mappartial>span{display:none} .decgrid.few-ideas:not(.comparisonrequired) .dcleft .leftsupport{ flex:1 1 auto;grid-template-rows:max-content minmax(202px,1fr)} .decgrid.few-ideas:not(.comparisonrequired) .dcleft .pickmap{ height:auto;min-height:202px;max-height:none;flex:1 1 auto} } /* book-level possible futures — ONE hero row that always fits its cell: the fan flexes wide, the legend and the POP × loss facet ride beside it, every column clipped to the row height. */ .bookfuturespanel{gap:6px} .bookfanwrap{flex:1;min-height:0;display:grid; grid-template-columns:minmax(0,1fr) minmax(150px,200px); grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"fan legend" "facts facts"; gap:6px 9px;align-items:stretch} .bookfanstage{grid-area:fan;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:min-content;overflow:visible} .bookfan{width:100%;flex:1;min-height:0;height:auto;display:block;border:1px solid var(--line-soft);border-radius:9px;background:var(--panel-2)} .bookfanstage .mcpathread{flex:none} .bookfanactions{display:flex;align-items:center;gap:6px;flex:none}.bookfanactions .bookfanprimary{margin-left:auto;color:var(--accent);border-color:var(--accent-2);background:var(--accent-wash)}.bookfanactions span{min-width:0;color:var(--faint);font-size:var(--f-2xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bookfanlegendwrap{grid-area:legend;display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0} .bookfanlegend{display:flex;flex:1 1 auto;flex-direction:column;gap:4px;min-width:0;min-height:0;overflow:auto} .bookfanoverflowmeta{min-width:0} #authBookFanFacts{grid-area:facts;min-width:0} .bookfanrow{display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"dot sym val" "dot struct val"; column-gap:7px;row-gap:0;align-items:center;text-align:left;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel); padding:3px 7px;cursor:pointer;color:var(--dim);transition:border-color var(--mo-quick) var(--mo-ease)} .bookfanrow:hover,.bookfanrow.hot{border-color:var(--accent-2);background:var(--row-hover)} .bookfanrow i{grid-area:dot;width:9px;height:9px;border-radius:50%;flex:none} .bookfanrow b{grid-area:sym;color:var(--text);font-size:var(--f-xs);line-height:1.1} .bookfanrow span{grid-area:struct;font-size:var(--f-2xs);color:var(--faint);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* The value cell is right-aligned in a track that may shrink below its content. Without a floor of its own it spilled LEFT across the symbol — "BOOK" + "needs more data" rendered as "BOOKeds more data". It clips itself instead. */ .bookfanrow em{grid-area:val;justify-self:end;min-width:0;max-width:100%;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-family:var(--mono); font-size:var(--f-xs);text-align:right;line-height:1.15} .bookfanrow em>*{max-width:100%;overflow:hidden;text-overflow:ellipsis} .bookfanrow em b{font-size:var(--f-xs)} .bookfanrow em .pos{color:var(--profit)} .bookfanrow em .neg{color:var(--loss)} .bookfanrow em small{display:block;color:var(--faint);font-size:var(--f-2xs)} .bookfanrow em small.warn{color:var(--caution)} /* An unavailable projection is an exact evidence state, not a value that may be shortened. Let the legend row earn a second line when its bounded value track is narrower than the phrase. */ .bookfanrow em small.warn{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.05} .bookfanrow.booktotal{border-color:var(--line);background:color-mix(in srgb,var(--panel-2) 82%,var(--text) 3%);cursor:default} .bookfanrow.booktotal i{background:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 12%,transparent)} .bookfanrow.booktotal.unavailable i{background:transparent;border:1px dashed var(--faint);box-shadow:none} .bookonefacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:0} .bookonefacts .authmetric{min-width:0} .bookonefacts .authmetric b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bookaggregatefacts{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:1201px){ /* A one-position Book has no comparative cloud to plot. Give its measured futures the canvas, keep its four exact facts in one atomic row below rather than crushing values in the legend. */ .bookfanwrap.singleposition{grid-template-columns:minmax(0,1fr) minmax(190px,220px)} } .card.fanhot{outline:1px solid var(--accent-2);outline-offset:1px} @media (max-width:1200px){.bookfanwrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"fan" "legend" "facts";grid-template-rows:auto}.bookfanlegend{flex-direction:row;flex-wrap:wrap}.bookfanrow{flex:1 1 150px}.bookonefacts{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:640px){.bookonefacts{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1001px) and (max-height:1079px){ .inspectwell{min-height:110px} .bookfanrow{padding:3px 7px;column-gap:6px} .bookfanrow em small{display:inline;margin-left:4px} .bookmaprow .authriskviz.compactrisk{min-height:84px;max-height:104px} } /* position management actions */ .authmanageacts{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px} .authmanagement{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;gap:5px} .authmanagementblocked{margin:auto 0}.authmanagementblocked b{color:var(--text)} .authactionchoices{display:flex;align-items:stretch;gap:4px;min-width:0;flex-wrap:wrap} .authactionchoices>.btn{min-height:27px;padding:3px 7px;white-space:nowrap} .authactionchoices>.btn.on{border-color:var(--accent-2);background:var(--accent-wash);color:var(--accent)} .authactionselect{display:flex;align-items:stretch;min-width:116px;border:1px solid var(--line-soft); border-radius:6px;background:var(--panel);overflow:hidden} .authactionselect>span{display:grid;place-items:center;padding:2px 6px;color:var(--faint); font-size:var(--f-2xs);font-weight:750;text-transform:uppercase;letter-spacing:.04em} .authactionselect select{min-width:0;max-width:132px;border:0;border-left:1px solid var(--line-soft); border-radius:0;background:var(--panel-2);color:var(--text);font:650 var(--f-2xs)/1.2 var(--sans); padding:3px 20px 3px 6px} .authactionfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;min-width:0} .authactionfact{min-width:0;padding:3px 5px;border:1px solid var(--line-soft);border-radius:5px;background:var(--panel)} .authactionfact small,.authactionfact b,.authactionfact em{display:block;min-width:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .authactionfact small{color:var(--faint);font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.04em} .authactionfact b{margin-top:1px;color:var(--text);font:750 var(--f-2xs)/1.15 var(--mono)} .authactionfact em{margin-top:1px;color:var(--faint);font:normal var(--f-2xs)/1.15 var(--mono)} .authactionreview{min-height:0;margin:0;padding:5px 6px;border:1px solid var(--accent-2);border-radius:6px; background:var(--accent-wash);font-size:var(--f-2xs)} .authactionreview.blocked{border-color:var(--loss)} .authactionreview.deskwaiting{display:flex;align-items:center;justify-content:flex-start} .authreviewfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px} .authreviewfacts span{min-width:0}.authreviewfacts small{display:block;color:var(--faint);font-size:var(--f-2xs)} .authreviewfacts b{display:block;color:var(--text);font:750 var(--f-2xs)/1.2 var(--mono); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .authactionreview p{margin:4px 0 0;color:var(--dim);line-height:1.25;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .authactionfoot,.authactioncontext{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0} .authactionfoot{margin-top:4px}.authactionfoot>span,.authactioncontext>span{min-width:0;color:var(--faint); font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .authactioncontext{margin-top:auto;padding-top:3px;border-top:1px solid var(--line-soft)} .authactioncontext .btn{flex:none;min-height:24px;padding:2px 6px} .authmanagement:has(.authactionreview.signed)>.authactionchoices, .authmanagement:has(.authactionreview.signed)>.authmanagementidentity, .authmanagement:has(.authactionreview.signed)>.authactioncontext{display:none} /* A durable Plan rehearsal is an additive management view, not a replacement loading state for the exact-package decision surface. Its compact analysis keeps identity, progress, result and provenance together without growing a second wizard. */ .rehearsalstrip{display:grid;grid-template-columns:minmax(260px,1fr) minmax(360px,.9fr) auto; align-items:center;gap:9px 16px;padding:7px 10px;border:1px solid var(--line); border-left:2px solid var(--violet);border-radius:8px;background:var(--violet-wash)} .rehearsalstrip.error{border-left-color:var(--loss);background:var(--loss-wash)} .rehearsalcopy{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1px 7px;align-items:baseline} .rehearsalcopy .eyebrow{color:var(--violet);white-space:nowrap} .rehearsalstrip.error .rehearsalcopy .eyebrow{color:var(--loss)} .rehearsalcopy b{min-width:0;color:var(--text);font-size:var(--f-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rehearsalcopy small{grid-column:1/-1;color:var(--dim);font-size:var(--f-2xs);line-height:1.25} .rehearsalprogress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;min-width:0} .rehearsalprogress span{display:flex;align-items:center;gap:4px;min-width:0;color:var(--faint); font:600 var(--f-2xs)/1.15 var(--sans);white-space:nowrap} .rehearsalprogress i{width:7px;height:7px;flex:none;border:1px solid var(--line-strong);border-radius:50%;background:var(--panel)} .rehearsalprogress span.on{color:var(--text)}.rehearsalprogress span.on i{border-color:var(--violet);box-shadow:0 0 0 2px var(--violet-wash)} .rehearsalprogress span.done{color:var(--dim)}.rehearsalprogress span.done i{border-color:var(--profit);background:var(--profit)} /* the bloom's standing chain panel (same component as Home and the Decide market band) */ .authposchain .authchainrows{min-height:0} .authposchain .backendnotice{margin-top:2px} .authchainhead b{white-space:nowrap} /* Position already names the exact expiration in its panel heading. Repeating the full ISO date in the narrow table's strike column stole width from executable bid/ask values. Keep one expiration owner, align the two book headings, and reserve only the strike's real width below. */ .authposchain .authchainhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3px} .authposchain .authchainhead>b{display:none} .authposchain .authchainrow{ grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:2px; font-size:calc(var(--f-2xs)*.9)} .authposchain .authchainbook{overflow:hidden} /* compact roster faces — a couple dozen positions must scan, not sprawl */ .card.authoritative .cface{padding:6px 9px 5px} .card.authoritative .crow1{gap:6px} .card.authoritative .cshareRow{margin-top:2px} .card.authoritative .cpeek{margin-top:2px} .card.authoritative .cpeek .ccap{font-size:var(--f-2xs)} /* the Home summary is ONE slim, evidence-backed orientation band. The allocation plot is a direct rendering of the same liquidity analysis as its labels—not a second account model. */ .summary.authbooksummaryhost{background:linear-gradient(180deg,var(--accent-wash),var(--panel-2) 90%)} .bookline.authsummary{display:flex;align-items:center;gap:22px;padding:8px 16px;flex-wrap:nowrap;overflow:hidden} .bookline.authsummary .sblock{min-width:0} .bookline.authsummary .sblock .lbl{white-space:nowrap} .bookline.authsummary .sblock .sv{white-space:nowrap} .bookline.authsummary .sblock.lead .sv.big{font-size:var(--f-lg);font-weight:800} .bookline.authsummary .sblock.lead .sv.big small{font-size:var(--f-xs);font-weight:600;margin-left:6px} .liquidityfigure{flex:1 1 420px;min-width:330px;max-width:700px;padding:5px 9px;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel)}.liquidityhead{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--faint);font-size:var(--f-2xs);text-transform:uppercase;letter-spacing:.06em}.liquidityhead b{color:var(--text);font:700 var(--f-xs) var(--mono)}.liquiditybar{display:flex;width:100%;height:6px;margin:4px 0;border-radius:4px;overflow:hidden;background:var(--line-soft)}.liquiditybar>i{display:block;min-width:0}.liquiditybar .enc,.liquiditylegend .enc{background:var(--caution)}.liquiditybar .pending,.liquiditylegend .pending{background:var(--violet)}.liquiditybar .free,.liquiditylegend .free{background:var(--profit)}.liquiditylegend{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--faint);font-size:var(--f-2xs);white-space:nowrap}.liquiditylegend span{min-width:0;overflow:hidden;text-overflow:ellipsis}.liquiditylegend span>i{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%}.liquiditylegend b{color:var(--dim);font-family:var(--mono);font-weight:650} .bookline.authsummary .landing-acts{margin-left:auto;flex:none} .bookline.authsummary .sv.pos{color:var(--profit)} .bookline.authsummary .sv.neg{color:var(--loss)} @media(max-width:1100px){.bookline.authsummary{flex-wrap:wrap;gap:8px 16px}.liquidityfigure{order:3;flex-basis:100%;max-width:none;min-width:0}.bookline.authsummary .landing-acts{margin-left:auto}} /* ===== the market history instrument — one widget, every surface ===== */ .histwrap{display:flex;flex-direction:column;gap:4px;min-width:0} .histctl{display:flex;flex-wrap:wrap;align-items:center;gap:3px;row-gap:3px} .histspacer{flex:1} .histpill{border:1px solid var(--line-soft);background:var(--panel-2);color:var(--dim);border-radius:5px;font:700 var(--f-2xs) var(--mono);padding:1px 4px;cursor:pointer} .histpill:hover:not(.off){color:var(--text);border-color:var(--accent-2)} .histpill.on{color:var(--accent);border-color:var(--accent-2);background:var(--accent-wash)} .histpill.off{opacity:.35;cursor:default} .histseg{display:inline-flex;border:1px solid var(--line-soft);border-radius:5px;overflow:hidden;margin-left:3px} .histseg button{border:0;background:var(--panel-2);color:var(--dim);font:600 var(--f-2xs) var(--sans);padding:2px 6px;cursor:pointer} .histseg button.on{background:var(--accent-wash);color:var(--accent)} .histchip{border:1px solid var(--line-soft);background:var(--panel-2);color:var(--faint);border-radius:5px;font:600 var(--f-2xs) var(--mono);padding:1px 5px;cursor:pointer;margin-left:2px} .histchip.on{color:var(--violet);border-color:var(--violet);background:var(--violet-wash)} .histchart{width:100%;height:172px;min-height:0;display:block;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel-2)} .histchart text{font-family:var(--mono);font-size:10px;fill:var(--faint)} .histstrip{width:100%;height:14px;min-height:0;display:block;cursor:grab} .histread{min-height:14px;white-space:normal} /* real floor, not min-height:0 — under font-metric pressure (Safari wraps the control rows wider than Chromium) a 0-floor lets flex crush the chart to a sliver and clip the chain */ .authhomehistory .histchart{min-height:112px;height:168px} .authchainrows .authchainrow{flex:none} .authhomehistory .histstrip{min-height:0;height:13px} /* the pulse panel: chart and chain side by side where the cell is wide; stacked (and the panel grows, the board already scrolls) below the wide layout. Columns are hard-contained — they can NEVER paint over the footer, and the chart flexes to whatever height the cell provides. */ .authmarketpulse .pulsecols{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-height:0} .authmarketpulse .pulsecols>*{min-height:min-content;min-width:0;display:flex;flex-direction:column} .authmarketpulse .amh-facts{margin-left:auto;display:inline-flex;gap:11px;align-items:baseline;color:var(--faint);font-size:var(--f-2xs);white-space:nowrap} .authmarketpulse .amh-facts b{color:var(--dim);font-family:var(--mono)} .authmarketpulse .amh-facts .pos{color:var(--profit)} .authmarketpulse .amh-facts .neg{color:var(--loss)} @media (min-width:1001px){ .authmarketpulse .pulsecols{grid-template-columns:minmax(0,1fr) minmax(236px,272px);grid-template-rows:minmax(0,1fr);align-items:stretch;flex:1} /* floors: Safari's wider font metrics must never flex-crush the chart or the chain */ .authmarketpulse .authchainslice{min-height:150px} .authmarketpulse .authmarkethero{display:flex;align-items:baseline;gap:10px;flex:none} .authmarketpulse .authhomehistory{flex:1;min-height:168px} .authmarketpulse .authhomehistory .histwrap{flex:1;min-height:0} /* `height:auto` gave the SVG its intrinsic width-derived height, so the wider Home market panel demanded a taller chart and overflowed its own grid row. The panel owns height; the shared chart flexes into it without inventing an aspect ratio. */ .authmarketpulse .authhomehistory .histchart{height:0;flex:1 1 0;min-height:84px} .authmarketpulse .authchainslice .authchainrows{min-height:0;overflow:hidden} .authmarketpulse .authchainslice .lenshd.sub{margin:0 0 3px;flex-wrap:nowrap;overflow:hidden} .authmarketpulse .authchainslice .lenshd.sub .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .authmarketpulse .authchainslice .lenshd.sub .eyebrow{white-space:nowrap} .authmarketpulse .authchainhead,.authmarketpulse .authchainrow{grid-template-columns:minmax(0,1fr) minmax(72px,auto) minmax(0,1fr);gap:4px;font-size:var(--f-2xs);padding:0 5px;margin:0;min-height:0;line-height:1.4} .authmarketpulse .authchainrow{height:21px;align-items:center;overflow:hidden} .authmarketpulse .authchainhead{height:15px} .authmarketpulse .authchainrows{gap:1px} .authmarketpulse .authpulsefoot{margin:0;padding-top:4px} .authmarketpulse .authchainrow span,.authmarketpulse .authchainhead span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .authmarketpulse .authchainslice .sourcefacts{display:none} .authmarketpulse{padding:9px 12px} } @media (max-width:1700px){ .lv-book #chainBand .authbookpanel{height:auto;min-height:100%} } /* compact hosts keep every behavior (pills, toggles, hover, drag-zoom) — the context strip is the one enhancement reserved for hosts with room */ .authresearchpanel .histchart{height:auto;flex:1;min-height:120px} .authresearchpanel .histwrap{flex:1;min-height:0} .authresearchpanel .histstrip{display:none} /* One headline list owns genuine desktop overflow. Mobile releases that same list into the page scroller below; no second renderer or nested mobile viewport exists. */ .authresearchpanel .authnews{overflow-y:auto;overflow-x:hidden;flex:1;min-height:0} .authposchain .authchainhead b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--f-2xs)} .authpathpanel .mcpathread{min-height:15px} /* a chosen future (exact fan path) is the active story — the tiles stay unpinned, this strip says why */ .customstory{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--accent-2);border-radius:8px;background:var(--accent-wash)} .customstory .csdot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;box-shadow:0 0 0 3px rgba(57,199,212,.15)} .customstory .cslbl{display:flex;align-items:baseline;gap:7px;min-width:0;font-size:var(--f-xs);color:var(--dim)} .customstory .cslbl b{color:var(--text)} .customstory .cslbl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ===== product-integrity completion: exact books, explicit coverage, content-earned geometry ===== */ /* A global New idea is one focused sheet over the still-visible Desk. It reuses ideaComposer; no alternate wizard, full-screen bloom, or empty explanatory columns exist. */ .decstage.composeonly{display:block;background:transparent;pointer-events:none;overflow:hidden} .composebackdrop{position:absolute;inset:0;border:0;background:rgba(3,7,12,.66);backdrop-filter:blur(2px);pointer-events:auto;cursor:default} .composepanel{position:absolute;z-index:1;top:12px;right:12px;bottom:auto;width:min(700px,calc(100vw - 32px));max-height:calc(100vh - 71px);overflow:hidden; border:1px solid var(--line);border-radius:13px;background:var(--ground);box-shadow:0 24px 70px rgba(0,0,0,.62);pointer-events:auto} .composepanel .decwrap{position:relative;inset:auto;height:auto;max-height:calc(100vh - 73px);padding:0;display:flex;flex-direction:column} .composepanel .dectop{flex:none;padding:9px 11px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--accent-wash),transparent)} .composebody{flex:none;min-height:0;display:flex;flex-direction:column;padding:11px;gap:8px;overflow-y:auto;overflow-x:hidden} .composebody>.ideacomposer{width:100%;flex:none;min-height:0;padding:0;border:0;background:transparent;overflow:visible} .composebody .ideacomposer .objrow{flex:none;min-height:0;overflow:visible} .composeguidance{flex:none;display:flex;align-items:baseline;gap:8px;padding:8px 10px;border-top:1px solid var(--line-soft); color:var(--faint);font-size:var(--f-2xs);line-height:1.4} .composeguidance b{color:var(--accent);white-space:nowrap} /* One visible explanation of the strategy field. The complete existing catalog remains the drawer; this button exposes it instead of duplicating catalog or recommendation logic. */ .strategycoverage{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;padding:7px 8px; border:1px solid var(--line-soft);border-radius:8px;background:linear-gradient(105deg,var(--accent-wash),transparent); color:var(--dim);text-align:left;cursor:pointer} .strategycoverage:hover,.strategycoverage:focus-visible,.strategycoverage.on{border-color:var(--accent-2);outline:none;background:var(--row-hover)} .strategycoverage>span{display:flex;flex-direction:column;gap:1px}.strategycoverage b{color:var(--text);font-size:var(--f-xs)} .strategycoverage small{color:var(--faint);font:600 var(--f-2xs) var(--mono)} .strategycoverage strong{color:var(--accent);font-size:var(--f-2xs);white-space:nowrap} /* Sparse ranked fields should not leave the exact legs in a narrow half-width slot beside a portrait map. The candidate rows earn only their content; the complete leg analysis follows immediately, then a wide map uses the remaining height. This is one desktop composition rule, independent of package leg count. */ @media (min-width:1501px){ .decgrid.few-ideas:not(.comparisonrequired) .dcleft .leftsupport{ display:grid;grid-template-columns:minmax(0,1fr); grid-template-rows:max-content minmax(190px,1fr);gap:8px;min-height:260px; flex:1 1 auto} .decgrid.few-ideas:not(.comparisonrequired) .dcleft .leftsupport>.declegpanel{ align-self:stretch;height:auto} .decgrid.few-ideas:not(.comparisonrequired) .dcleft .pickmap{ width:100%;height:auto;min-height:190px;max-height:none;border-left:0; border-top:1px solid var(--line-soft);padding:7px 0 0} .decgrid.few-ideas:not(.comparisonrequired) .dcleft .decmap{min-height:145px} } /* A single surviving point is a data point, not a giant comparative chart. This rule outranks the few-ideas growth rules (higher specificity, later in source) in every media regime. */ @media(min-width:1001px){ .decgrid .dcleft .pickmap.single-point, .decgrid.few-ideas .dcleft .pickmap.single-point{flex:1 1 auto;height:auto;min-height:190px;max-height:none} .decgrid .dcleft .pickmap.single-point .decmap{min-height:135px} /* Two or three comparable points need enough space to read their relationship, but they do not justify a portrait canvas. The exact legs keep priority and the sparse plot stops at a useful landscape analysis instead of stretching merely because the rail has leftover height. */ .decgrid .dcleft .pickmap.sparse-points, .decgrid.few-ideas .dcleft .pickmap.sparse-points{ flex:1 1 auto;align-self:stretch;height:auto;min-height:210px;max-height:none} .decgrid .dcleft .pickmap.sparse-points .decmap{min-height:150px} .decgrid.few-ideas .dcleft .leftsupport:has(.pickmap.sparse-points){ grid-template-rows:max-content minmax(210px,1fr);align-content:stretch} } /* A chart with no comparable POP/realistic-EV analyses must not reserve the same canvas as a populated comparison. Keep the named absence visible, but return the unused height to exact candidates and legs. This is one state rule at every viewport, not another breakpoint fork. */ .decgrid .dcleft .pickmap.no-points, .decgrid.few-ideas .dcleft .pickmap.no-points{ flex:0 0 auto;height:auto;min-height:0;max-height:none} .mapabsence{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;align-items:baseline;gap:5px 9px; padding:7px 8px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2)} .mapabsence>b{color:var(--text);font-size:var(--f-xs)} .mapabsence>span{min-width:0;color:var(--dim);font-size:var(--f-2xs);line-height:1.35} .mapgapdetails{grid-column:1/-1;color:var(--faint);font-size:var(--f-2xs)} .mapgapdetails summary{cursor:pointer;color:var(--accent)} .mapgapdetails>span{display:block;margin-top:4px;padding-top:4px;border-top:1px solid var(--line-soft)} .mapabsence .maprefresh,.mappartial .maprefresh{justify-self:end} .mappartial{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;align-items:baseline; gap:4px 8px;padding:5px 7px;border:1px solid var(--line-soft);border-radius:7px; background:var(--panel-2);color:var(--dim);font-size:var(--f-2xs);line-height:1.3} .mappartial>strong{color:var(--caution);white-space:nowrap} .mappartial>span{min-width:0}.mappartial>span b{color:var(--text)} .decgrid .dcleft .pickmap.no-points .fanleg{display:none} @media(min-width:1001px){ /* No-data is a compact analysis, not a miniature empty chart. Let the exact package keep the useful width, then name the unavailable comparison once on a full-width line. */ .decgrid .dcleft .leftsupport:has(.pickmap.no-points){ grid-template-columns:minmax(0,1fr);grid-template-rows:max-content auto; align-content:start} .decgrid .dcleft .leftsupport:has(.pickmap.no-points) .pickmap.no-points{ width:100%;height:auto;min-height:28px;max-height:none;border-left:0; border-top:1px solid var(--line-soft);padding:5px 0 0} } /* The selected package's captured book is the primary premium analysis. An ambient chain is shown only when its expiration is identical; otherwise the UI explicitly withholds the false join. */ .packagebook{display:flex;flex-direction:column;gap:3px} .packagebooknear{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-soft)}.packagebooknear>.hint{display:block;margin-bottom:4px} .cshareRow.trackedlots{justify-content:flex-start}.cshareRow.trackedlots .csharev{margin-left:0} .leg-symbol{font-weight:800;color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 35%,var(--line))} .packageexpirynotice{display:flex;align-items:center;justify-content:space-between;gap:8px} .packageexpirynotice .btn{flex:none} .packageexpiryactions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:5px} .trackedexpirychoices{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px} .trackedexpirychoices .btn.on{border-color:var(--accent-2);background:var(--accent-wash);color:var(--accent)} .trackedactionread{display:flex;min-height:0;flex-direction:column;gap:5px} .trackedactionlabels{display:flex;flex-wrap:wrap;gap:4px} .packagebooknear>.packageexpiryactions{margin-top:5px} .scenariosummary{display:flex;align-items:baseline;gap:6px;min-width:0; padding:4px 7px;border-top:1px solid var(--line-soft);color:var(--faint);font-size:var(--f-2xs);line-height:1.25} .scenariosummary b{flex:none;color:var(--dim)} .scenariosummary span{min-width:0;white-space:normal} .settlementevidence{display:inline}.settlementevidence summary{display:inline;cursor:pointer;color:var(--accent)} .settlementevidence[open]{display:block;margin-top:3px} .settlementevidence>span{display:block;padding:2px 0;border-top:1px solid var(--line-soft)} .ideasaved{min-width:0;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--profit);font:650 var(--f-2xs) var(--mono)} .fieldnote,.fieldwarning{display:block;margin-top:3px;color:var(--faint);font-size:var(--f-2xs);line-height:1.3} .fieldwarning{color:var(--caution)} /* Scout is an actionable cross-sector launcher. The persistent Market lens owns sectors; the workbench shapes the scan and keeps the four decision rows in one compact analysis. */ .opportunityprompt .scoutprimary{flex:none;min-width:170px;min-height:34px;font-weight:800} .authmarketrow span small{display:inline-block;margin-right:6px;padding:1px 4px;border:1px solid var(--line-soft);border-radius:4px;color:var(--accent);font-size:9px} /* Watch row's middle cell crams sector-group badge + change + freshness on one nowrap line; in the narrow (~200px) watch column that clipped the sector name AND the freshness tag. Stack it into two lines so every fact stays readable without widening the panel. */ .authmarketrow .authmarketfocus>span{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2} .authmarketrow .authmarketfocus>span small{white-space:normal;max-width:100%;margin-right:0} /* Sparse books do not reserve empty roster/risk columns. A one-position Book carries lifecycle and Greeks in its compact roster cell; the aggregate future and live market keep the top row. */ .homeonesummary{display:flex;flex-direction:column;gap:7px;padding-top:4px;border-top:1px solid var(--line-soft)} .homeonesummary .authlifecycle{padding:6px 7px;gap:3px 6px} .homeonesummary .authlifecycle b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .homeonesummary .authlifecycle p{-webkit-line-clamp:2} .homeonesummary .authlifefacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 7px} .homeonesummary .authlifefacts span{min-width:0;white-space:normal;line-height:1.25} .homeonegreeks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px} .homeonegreeks span{padding:5px;border:1px solid var(--line-soft);border-radius:6px;color:var(--faint);font-size:var(--f-2xs)} .homeonegreeks b{display:block;color:var(--text);font:700 var(--f-xs) var(--mono)} .homeoneshares{display:flex;flex-direction:column;gap:3px;padding-top:4px;border-top:1px solid var(--line-soft);min-height:0} .homeoneshares .lenshd{margin:0} .homeoneshares .authlist{gap:3px;overflow:visible} .homeoneshares .authsharerow{padding:3px 5px;gap:5px;font-size:var(--f-2xs)} .homeoneshares .authsharerow .authrowmain{gap:0} .homeoneshares .authsharerow .btn{padding:2px 5px} @media(min-width:1501px){ .lv-book[data-position-count="1"] .book{overflow:hidden;grid-template-rows:auto auto 1fr;grid-auto-rows:auto} } /* Opening recency stays a badge, not a unique cyan frame around one entire surface. A position with no siblings also has no empty sibling rail. */ .card.authoritative.justopened{border-color:var(--line);box-shadow:var(--raise-sheen)} /* Home's orientation band and its cells use the same surface grammar at every density. */ .homesummary{border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--panel),var(--ground))} .homesummary .perfband,.homesummary .bookline{background:transparent} @media(max-width:1000px){ #app:has(>.decstage.on.composeonly) #stage{display:flex} .composepanel{top:6px;right:6px;bottom:6px;width:calc(100vw - 12px);max-height:none} .composepanel .decwrap{position:absolute;inset:0;height:100%;max-height:none} .composepanel .dectop{padding:7px}.composebody{padding:8px} .composebody{flex:1;overflow:hidden}.composebody>.ideacomposer{flex:1;overflow:hidden}.composebody .ideacomposer .objrow{flex:1;overflow-y:auto} .strategycoverage{grid-template-columns:minmax(0,1fr) auto} .opportunityprompt{align-items:stretch;flex-direction:column}.opportunityprompt .scoutprimary{width:100%} } @media(max-width:600px){ .composepanel{top:0;right:0;bottom:0;width:100vw;border-radius:0;border-inline:0} .composebody .ideacomposer .objrow{overflow-y:auto}.composeguidance{align-items:flex-start;flex-direction:column;gap:2px} .opportunitycontrol.goals{max-width:100%;overflow-x:auto;scrollbar-width:none} .opportunityrow{grid-template-columns:42px minmax(0,1fr) auto; grid-template-areas:"symbol detail action"} .opportunityrow>strong{grid-area:symbol}.opportunityrow>span{grid-area:detail} .opportunityrow>.opportunitygo{grid-area:action;align-self:stretch} .homeonegreeks{grid-template-columns:1fr 1fr} } @media(max-width:900px){ /* Mobile has one page scroller: Scout participates in the page instead of becoming a clipped miniature desktop viewport with a second scrollbar inside its result list. */ .lv-book #riskMain:has(.homescoutpanel){display:block;height:auto;min-height:auto;overflow:visible} .homescoutpanel, .homescoutpanel #authHomeOpportunity, .homescoutpanel .opportunitylens{height:auto;min-height:0;overflow:visible;flex:none} .homescoutpanel .opportunityrows{height:auto;min-height:0;overflow:visible;flex:none} } /* Home is one permanent composition, not a launcher plus a succession of modal surfaces. The workbench owns both a governed field scan and one exact staged underlying. */ .homeworkbenchpanel{gap:7px} .homeworkbenchpanel.emptyopportunitypanel{background:var(--panel);border-color:var(--line)} .homeworkbenchpanel .opportunitylens{margin-top:2px;padding-top:6px} .homeworkbenchpanel .opportunitycontrols{gap:4px;margin-bottom:4px} .homeworkbenchpanel .opportunitycontrol{border-color:var(--line);background:var(--panel-2)} .homeworkbenchpanel .opportunitycontrol>.ok{padding:3px 5px;font-size:var(--f-2xs)} .homeworkbenchpanel .opportunitycontrol .oseg button{min-height:27px;padding:3px 5px;font-size:var(--f-xs)} .homeworkbenchpanel .opportunitycontrol.goals .oseg button{padding-inline:3px} .homeideasearch{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2)} .homeideasearch>span{color:var(--accent);font-size:var(--f-2xs);font-weight:750;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .homeideasearch input,.homeacquirefields input{min-width:0;width:100%;height:30px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--text);padding:4px 7px;font:650 var(--f-sm) var(--mono);outline:none} .homeideasearch input:focus,.homeacquirefields input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash)} .homeideamatchhost{min-height:0} .scoutbar{display:flex;align-items:flex-end;gap:8px;margin-top:8px} .scoutbar .homeideasearch{flex:1;margin:0} .scoutbar .scoutgo{flex:none;min-width:140px;min-height:34px;white-space:nowrap} .scoutbar .scoutalt{flex:none;white-space:nowrap} .homeworkbenchpanel .homeideamatchhost:empty{display:none} .scoutresults{flex:1;min-height:0;margin-top:8px;display:flex;flex-direction:column;overflow:hidden} .scoutresults:empty{display:none} .scoutidle{flex:none;min-height:42px;display:grid;grid-template-columns:auto auto minmax(0,1fr); align-items:center;gap:7px;padding:8px 10px;border:1px dashed var(--line-soft);border-radius:7px; color:var(--faint);font-size:var(--f-xs);line-height:1.35} .scoutidle>span{color:var(--accent);font:800 var(--f-md) var(--mono)} .scoutidle b{color:var(--dim);white-space:nowrap}.scoutidle small{min-width:0;color:var(--faint)} .homeworkbenchpanel .btn.pri:disabled,.homeworkbenchactions .btn.pri:disabled{opacity:.5;filter:saturate(.55);box-shadow:none;cursor:not-allowed} .homeworkbenchpanel .btn.xs{border-color:var(--accent-2);color:var(--accent);background:transparent} .homeworkbenchpanel .btn.xs:hover{background:var(--accent-wash);color:var(--accent)} .opportunityrow:hover,.opportunityrow:focus-visible{box-shadow:var(--sel-bar)} .opportunityrow.provisional,.opportunityrows .opportunityrow[aria-current="true"]{box-shadow:var(--sel-bar)} .homeideahelp{padding:5px 7px;color:var(--faint);font-size:var(--f-2xs);line-height:1.35} .homeideachosen{display:flex;align-items:center;gap:8px;padding:5px 7px;border-left:2px solid var(--accent);background:var(--accent-wash);color:var(--dim);font-size:var(--f-2xs)} .homeideachosen span{flex:1}.homeideachosen b{color:var(--text);font-family:var(--mono)}.homeideachosen button{border:0;background:transparent;color:var(--accent);cursor:pointer} .homeideamatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:4px} .homeideamatch{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;min-width:0;padding:5px 7px;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel);color:var(--dim);cursor:pointer;text-align:left} .homeideamatch:hover,.homeideamatch:focus-visible,.homeideamatch.on{border-color:var(--accent-2);background:var(--row-hover);outline:none} .homeideamatch b{color:var(--text);font:750 var(--f-xs) var(--mono)}.homeideamatch span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--f-2xs);color:var(--faint)}.homeideamatch em{font-style:normal;color:var(--accent);font-size:var(--f-2xs)} .homeideamatch.homesectormatch b{font-family:var(--sans)}.homeideamatch.homesectormatch{border-style:dashed} .homeacquirefields{display:grid;grid-template-columns:1fr 1fr;gap:6px} .homeacquirefields label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:7px;padding:5px 7px;border:1px solid var(--accent-2);border-radius:7px;background:var(--accent-wash)} .homeacquirefields span{color:var(--dim);font-size:var(--f-2xs);white-space:nowrap} .homesectorchips{display:flex;align-items:center;gap:4px;min-width:0;flex:1 1 auto; flex-wrap:wrap;overflow:visible;scrollbar-width:none;padding:1px 0} .homesectorchips.overflowing{mask-image:none} .homesectorchips::-webkit-scrollbar{display:none} .homesectorchips button{flex:none;min-height:24px;padding:3px 10px;border:1px solid var(--line);border-radius:var(--control-radius);background:var(--surface-control-strong);color:var(--dim);font-size:var(--f-xs);font-weight:650;white-space:nowrap;cursor:pointer} .homesectorchips button:hover{background:var(--row-hover);color:var(--text)} .homesectorchips button.on{border-color:var(--accent-2);background:var(--accent-wash);color:var(--accent)} .homeworkbenchactions{display:flex;align-items:center;gap:8px} .homeworkbenchactions .btn{min-width:150px}.homeworkbenchactions>span{min-width:0;color:var(--faint);font-size:var(--f-2xs);line-height:1.35} .homeworkbenchpanel .scoutresults>.opportunityrows{flex:1 1 82px;min-height:82px;margin-top:2px} .homeworkbenchpanel .scoutbar{margin-top:4px}.homeworkbenchpanel .scoutresults{margin-top:1px} .homeworkbenchpanel .scoutprogress{margin-top:0;padding:3px 7px;gap:3px 7px} .homeworkbenchpanel .scoutcounts{flex-wrap:nowrap;gap:2px 9px;overflow:hidden} .homeworkbenchpanel .scoutmsg{flex:1 1 60px} .scoutresulthead{display:flex;align-items:baseline;gap:8px;min-width:0;margin:1px 0 2px} .scoutresulthead>.eyebrow{flex:none}.scoutresulthead>.hint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .scoutcountsfinal{grid-column:auto;flex:0 1 auto;margin:0 0 0 auto;padding:3px 6px;border:1px solid var(--line-soft); border-radius:6px;background:var(--panel-2);gap:2px 8px;overflow:hidden} .compactbookfutures .bookonefacts .authmetric{padding:4px 6px} .compactbookfutures .bookonefacts .authmetric{gap:0} .compactbookfutures .bookonefacts .authmetric span{font-size:9px;line-height:1.1} .compactbookfutures .bookonefacts .authmetric b{font-size:11px;line-height:1.1} .compactbookfutures .bookfanrow{grid-template-columns:auto minmax(0,1fr) auto;padding:2px 6px} .compactbookfutures>.lenshd{min-width:0;flex-wrap:nowrap;overflow:hidden} .compactbookfutures>.lenshd .eyebrow{flex:none;white-space:nowrap} .compactbookfutures>.lenshd .hint{min-width:0;white-space:normal;line-height:1.2;text-align:right} .compactbookfutures .bookfanrow span{display:none} .compactbookfutures .bookfanrow em{white-space:nowrap} .compactbookfutures .bookfanrow em small{display:inline;margin-left:4px} @media(max-width:600px){ /* Book is a document on phones. The subject and projection analysis each own a complete row instead of competing inside a clipped desktop header. */ .compactbookfutures>.lenshd{display:grid;grid-template-columns:minmax(0,1fr);gap:3px; align-items:start;overflow:visible} .compactbookfutures>.lenshd .eyebrow{white-space:normal;overflow-wrap:anywhere} .compactbookfutures>.lenshd .hint{text-align:left} } /* ===== Home composition ================================================================ Six existing content owners, one composition: - Scout and exact-idea workbench - focused Market history + chain - cross-sector Watch - compact Book futures - one Positions + Working ideas activity rail - Research & news The activity wrapper is structural only. Its children retain their ids, renderers and event delegation; the wrapper simply gives their combined overflow one owner instead of two narrow, half-empty panels. */ .lv-book .board{display:grid;min-width:0;min-height:0;gap:10px;padding:10px;overflow-x:hidden} .activityrail{border:1px solid var(--line-soft);border-radius:var(--panel-radius); background:var(--panel);padding:9px;gap:10px;scrollbar-width:none} .activityrail:hover,.activityrail:focus-within{scrollbar-width:thin;scrollbar-color:var(--line) transparent} .activityrail::-webkit-scrollbar{width:0}.activityrail:hover::-webkit-scrollbar{width:4px} .activityrail:hover::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} .lv-book #activityBand>.book,.lv-book #activityBand>#univBand{flex:none;min-width:0;min-height:0;overflow:visible} .lv-book #activityBand>.book{gap:4px} .lv-book #activityBand>#univBand>.authbookpanel{height:auto;min-height:0;padding:0;border:0;border-radius:0;background:transparent;gap:5px;overflow:visible} .lv-book #activityBand #homePlansList{height:auto;max-height:none;overflow:visible;mask-image:none!important} .lv-book #activityBand .bookoverflowmeta,.lv-book #activityBand .planoverflowmeta{min-width:82px;max-width:124px} .lv-book #activityBand .authrosterempty{min-height:84px;padding:8px 4px} .activitymore{width:100%;min-height:25px;border:1px dashed var(--line);border-radius:7px; background:transparent;color:var(--accent);font:650 var(--f-2xs)/1.2 var(--sans);cursor:pointer} .activitymore:hover,.activitymore:focus-visible{border-color:var(--accent-2);background:var(--accent-wash);outline:none} /* Representative rows stay visible at rest at every viewport. The existing section action releases the remainder into Home's one activity owner (the desktop rail or the mobile page). */ .lv-book #activityBand:not(.positions-expanded) [data-activity-overflow="positions"], .lv-book #activityBand:not(.ideas-expanded) [data-activity-overflow="ideas"]{display:none} .lv-book[data-position-count="1"] #bookrisk{display:flex} .compactbookfutures .bookfanwrap,.compactbookfutures .bookfanwrap.singleposition{ grid-template-columns:minmax(0,1fr);grid-template-areas:"fan" "legend" "facts";grid-template-rows:minmax(0,1fr) auto auto} .compactbookfutures .bookfanlegend{flex-direction:row;flex-wrap:wrap;overflow:auto} .compactbookfutures .bookfanrow{flex:1 1 190px} .compactbookfutures .bookonefacts{grid-template-columns:repeat(4,minmax(0,1fr))} .compactbookfutures .bookfan{min-height:105px} .compactbookfutures .bookfanactions span{display:none} /* No projection is an exact analysis, but it is not a chart. Keep the backend reason, the position/Book legend, and the risk facts; release the empty SVG canvas so an unavailable artifact cannot become Home's largest visual object. */ .lv-book[data-book-fan-state="unavailable"] .compactbookfutures .bookfanstage{display:none} .lv-book[data-book-fan-state="unavailable"] .compactbookfutures .bookfanwrap, .lv-book[data-book-fan-state="unavailable"] .compactbookfutures .bookfanwrap.singleposition{ grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto; grid-template-areas:"legend" "facts"} .lv-book[data-book-fan-state="unavailable"] .compactbookfutures .bookfanlegend{ flex-direction:column;flex-wrap:nowrap;overflow:visible} .lv-book[data-book-fan-state="unavailable"] .compactbookfutures .bookfanrow{flex:0 0 auto} /* Home composition has one owner for each viewport range. Component-density rules may be shared below, but only these range-specific blocks place the six Home owners. */ @media(min-width:1600px){ .lv-book .board{grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:minmax(340px,1.85fr) minmax(190px,.72fr) minmax(150px,.55fr); grid-template-areas: "map map map map map chain chain chain chain chain chain chain" "activity activity activity activity bookrisk bookrisk bookrisk bookrisk sector sector sector sector" "activity activity activity activity news news news news news news news news"; align-content:stretch;overflow:hidden} .lv-book[data-book-authority="empty"] .board{ grid-template-areas: "map map map map map chain chain chain chain chain chain chain" "activity activity activity activity activity chain chain chain chain chain chain chain" "sector sector sector sector sector news news news news news news news"} .lv-book[data-book-authority="empty"][data-plan-count="0"] .board{ grid-template-areas: "map map map map map chain chain chain chain chain chain chain" "sector sector sector sector sector chain chain chain chain chain chain chain" "news news news news news news news news news news news news"} /* A tracked holding can make the Book authoritative while no Practice package has a stored joint projection. Do not reserve a blank Book-futures cell for an artifact that does not exist; the three useful lower owners share that space. */ .lv-book[data-book-fan-state="empty"] .board{ grid-template-rows:minmax(300px,.72fr) minmax(300px,1fr) minmax(150px,.55fr); grid-template-areas: "map map map map map chain chain chain chain chain chain chain" "activity activity activity activity activity chain chain chain chain chain chain chain" "sector sector sector sector sector news news news news news news news"} } @media(min-width:1200px) and (max-width:1599px){ .lv-book .board{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); grid-template-rows:minmax(285px,1.28fr) minmax(215px,.92fr) minmax(140px,.6fr); grid-template-areas:"map chain" "bookrisk activity" "sector news"; align-content:stretch;overflow:hidden} .lv-book[data-book-authority="empty"] .board{ grid-template-areas:"map chain" "activity chain" "sector news"} .lv-book[data-book-authority="empty"][data-plan-count="0"] .board{ grid-template-areas:"map chain" "sector chain" "news news"} .lv-book[data-book-fan-state="empty"] .board{ grid-template-areas:"map chain" "sector activity" "news news"} /* The chart already supports direct window selection, and the exact market regime belongs in New Idea. On this bounded Home composition those optional repeats otherwise collide with the market analysis while starving Book and activity—the two panels unique to Home. */ .authmarketpulse .histstrip{display:none} .authmarketpulse .authpulsefoot>span{display:none} .authmarketpulse .authpulsefoot{justify-content:flex-end} /* The position legend and the activity row already open the exact position at this density. Repeating a third action under the fan made its min-content height paint through the exact four-fact row. Give the chart the bounded row and remove only that redundant action. */ .compactbookfutures .bookfanactions{display:none} .compactbookfutures .bookfan{min-height:90px} } @media(min-width:1200px){ /* Home has one spatial grammar: orient and discover — permanent Scout beside the focused market; decide and monitor — compact Book, one activity rail, Watch, and Research. Sparse lower owners are content-sized instead of stretching bordered voids to the bottom of the viewport. Market earns the durable large canvas; Scout remains permanently available. */ .lv-book .board>#riskMain,.lv-book .board>#bookrisk,.lv-book .board>#chainBand, .lv-book .board>#sectorBand,.lv-book .board>#newsBand,.lv-book .board>#activityBand{min-width:0;min-height:0} .lv-book #riskMain>.authbookpanel,.lv-book #chainBand>.authbookpanel{ height:100%;min-height:0;overflow:hidden} .lv-book #bookrisk>.authbookpanel,.lv-book #sectorBand>.authbookpanel, .lv-book #newsBand>.authbookpanel{height:100%;min-height:0;overflow:hidden} .lv-book #bookrisk,.lv-book #sectorBand,.lv-book #newsBand, .lv-book #activityBand{align-self:stretch} .lv-book[data-book-fan-state="empty"] #bookrisk{display:none} .lv-book[data-scout-state="idle"] #riskMain>.authbookpanel{ height:100%;align-self:stretch;overflow:hidden} .lv-book[data-scout-state="idle"] #authHomeOpportunity, .lv-book[data-scout-state="idle"] #authHomeOpportunity>.opportunitylens{height:100%;min-height:0} .lv-book[data-scout-state="idle"] .homeworkbenchpanel .scoutresults{ flex:1;min-height:42px;overflow:hidden;justify-content:stretch} .lv-book[data-scout-state="idle"] .homeworkbenchpanel .scoutidle{ flex:1;min-height:42px;align-content:center} .lv-book[data-scout-state]:not([data-scout-state="idle"]) .homeworkbenchpanel .scoutresults>.opportunityrows{ align-content:start;grid-auto-rows:max-content} .lv-book #activityBand{overflow:hidden} .lv-book #activityBand.positions-expanded,.lv-book #activityBand.ideas-expanded{overflow-y:auto} .authmarketpulse .pulsecols{grid-template-columns:minmax(0,1fr) clamp(260px,24vw,420px)} .activityrail{padding:7px;gap:6px} .authmarketwatch{gap:3px} .authmarketfocus{padding:4px 6px;gap:6px} .authmarketgo{padding:3px 6px} .authmarketrow .authmarketfocus>span{display:flex;flex-direction:row;align-items:center;gap:4px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .authmarketrow .authmarketfocus>span small{flex:none;white-space:nowrap;margin-right:0} .authhomenews{gap:3px} .authhomenews a{padding:5px 6px;line-height:1.2} .authhomenews small{margin-top:1px} .homeworkbenchpanel .opportunityrow{min-height:34px;padding:2px 5px;gap:5px} .homeworkbenchpanel .opportunityrow>.opportunitymain{display:block;min-width:0;overflow:hidden} .homeworkbenchpanel .opportunityrow b{font-size:var(--f-2xs);line-height:1.15;-webkit-line-clamp:1} .homeworkbenchpanel .opportunityrow b,.homeworkbenchpanel .opportunityrow small{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .homeworkbenchpanel .opportunityrow b{flex:0 1 42%} .homeworkbenchpanel .opportunityrow small{flex:1 1 auto;margin-top:0;line-height:1.1} .homeworkbenchpanel .scoutfacts{display:flex;align-items:baseline;gap:0 7px} .homeworkbenchpanel .scoutfacts>[data-scout-fact]{flex:none;white-space:nowrap} .homeworkbenchpanel .scoutchecks{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:2px;gap:3px} .homeworkbenchpanel .scoutcheck{padding:2px 4px} .homeworkbenchpanel .scoutcheck>i{font-size:0} .homeworkbenchpanel .scoutcheck[data-scout-check="economics"]>i::after{content:"EV"} .homeworkbenchpanel .scoutcheck[data-scout-check="evidence"]>i::after{content:"Evidence"} .homeworkbenchpanel .scoutcheck[data-scout-check="compensation"]>i::after{content:"Premium"} .homeworkbenchpanel .scoutcheck[data-scout-check="book"]>i::after{content:"Book"} .homeworkbenchpanel .scoutcheck>i::after{ font-size:var(--f-3xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase } /* Home is the opportunity index, not a second analysis screen. Each result keeps the four named check outcomes and its exact-package action; the explanatory reasons already travel in the check title and belong on the primary New Idea surface after Analyze. This gives the permanent result list a stable whole-row grammar instead of clipping paragraph-sized cards. */ .homeworkbenchpanel .scoutcheck>small{display:none} .homeworkbenchpanel .opportunityrows.provisional .opportunityrow{padding-block:1px} .homeworkbenchpanel .opportunityrows.provisional .scoutchecks{margin-top:1px} /* Empty books relinquish the absent Book panel. Existing working ideas keep the left activity rail below Scout while Market spans both rows. Watch and Research remain compact and useful. */ .lv-book[data-book-authority="empty"][data-plan-count="0"] #activityBand{display:none} .lv-book[data-plan-count="0"] #activityBand .authrosterempty{min-height:38px;padding:3px 2px; display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center} .lv-book[data-plan-count="0"] #activityBand .authrosterempty p{display:none} .lv-book[data-plan-count="0"] #activityBand .authrosterempty .emptyactions{margin:0} /* The Book panel stays useful without becoming another hero. Its fan and legend share the field; the separate risk-map implementation stays out of Home because it duplicated the same positions and starved the actual path artifact on tall screens. */ .compactbookfutures .bookfanwrap,.compactbookfutures .bookfanwrap.singleposition{ grid-template-columns:minmax(0,1fr) minmax(150px,190px); grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"fan legend" "facts facts"} .compactbookfutures .bookfanstage{grid-area:fan} .compactbookfutures .bookfanlegend{grid-area:legend;flex-direction:column;flex-wrap:nowrap;overflow-y:auto} .compactbookfutures .bookfan{min-height:120px} /* When a joint Book projection is unavailable, a dense book can still contain many exact position analyses. Keep the compact panel in its assigned row and make the legend the one intentional overflow owner. */ .lv-book[data-book-fan-state="unavailable"] #bookrisk>.authbookpanel{ height:100%;align-self:stretch;overflow:hidden} .lv-book[data-book-fan-state="unavailable"] .compactbookfutures .bookfanwrap, .lv-book[data-book-fan-state="unavailable"] .compactbookfutures .bookfanwrap.singleposition{ grid-template-rows:minmax(0,1fr) auto} .lv-book[data-book-fan-state="unavailable"] .compactbookfutures .bookfanlegend{ min-height:0;max-height:114px;overflow-y:auto} } @media(min-width:1501px){ /* Research owns a wide lower band on a full desktop. Two reading columns spend that width on reachable headlines instead of turning each title into a long sparse ribbon. */ .lv-book #newsBand .authhomenews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start} } @media(min-width:1501px) and (min-height:1150px){ .lv-book #chainBand>.authbookpanel{max-height:none;align-self:stretch} .lv-book #bookrisk>.authbookpanel,.lv-book #sectorBand>.authbookpanel, .lv-book #newsBand>.authbookpanel{max-height:none} } @media(min-width:1501px) and (max-height:1050px){ /* The range strip is an optional duplicate navigator on a short desktop; the primary chart already supports drag-to-window. Removing it keeps the exact history analysis and Shape action on separate readable rows instead of letting them paint through one another. */ .authmarketpulse .histstrip{display:none} .authmarketpulse .authpulsefoot>span{display:none} .authmarketpulse .authpulsefoot{justify-content:flex-end} /* A completed Scout row is 87px at this density once its four analyses and action are present. */ .homeworkbenchpanel .scoutresults>.opportunityrows{ flex-basis:88px;min-height:88px} } @media(min-width:901px) and (max-width:1199px){ /* Intermediate Home is a scrolling document, so Scout evidence should wrap rather than masquerade as a one-line desktop chip. Two checks per row preserve the named economics/evidence/compensation/ Book distinction without an ellipsis swallowing the actual reason. */ .homeworkbenchpanel .scoutchecks{grid-template-columns:repeat(2,minmax(0,1fr))} .homeworkbenchpanel .scoutcheck>small{white-space:normal;overflow:visible;text-overflow:clip; display:block;line-height:1.25} } @media(min-width:901px) and (max-width:1199px){ body:has(#stage.lv-book){height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden} #app:has(>#stage.lv-book){height:auto;min-height:100dvh;overflow:visible} #stage.lv-book{flex:none;min-height:calc(100dvh - 78px);overflow:visible} .lv-book .board{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content; grid-auto-rows:max-content;grid-template-areas:"map" "chain" "bookrisk" "activity" "sector" "news"; flex:none;height:auto;min-height:0;gap:9px;overflow:visible} .lv-book[data-book-authority="empty"] .board{grid-template-areas:"map" "chain" "activity" "sector" "news"} .lv-book[data-book-authority="empty"][data-plan-count="0"] #activityBand{display:none} .lv-book[data-book-authority="empty"][data-plan-count="0"] .board{grid-template-areas:"map" "chain" "sector" "news"} .lv-book #activityBand,.lv-book #riskMain,.lv-book #bookrisk,.lv-book #chainBand, .lv-book #sectorBand,.lv-book #newsBand{height:auto;min-height:0;overflow:visible} .lv-book #riskMain>.authbookpanel,.lv-book #bookrisk>.authbookpanel, .lv-book #chainBand>.authbookpanel,.lv-book #sectorBand>.authbookpanel, .lv-book #newsBand>.authbookpanel{height:auto;min-height:0;overflow:visible} .lv-book #activityBand #homePlansList, .homeworkbenchpanel .scoutresults>.opportunityrows, .authmarketwatch.elegantscroll,.authhomenews.elegantscroll{height:auto;max-height:none;overflow:visible;mask-image:none!important} .lv-book #activityBand{max-height:none;mask-image:none!important} .newsoverflowmeta,.watchoverflowmeta,.planoverflowmeta,.rowsoverflowmeta{display:none!important} } @media(max-width:900px){ /* Phones and tablets use the document as their one scroller. Every Home child releases its content into that flow; #board is layout only and cannot trap the page in a nested viewport. */ body:has(#stage.lv-book){height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden} #app:has(>#stage.lv-book){height:auto;min-height:100dvh;overflow:visible} #stage.lv-book{flex:none;min-height:calc(100dvh - 78px);overflow:visible} .lv-book .board{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content; grid-auto-rows:max-content;grid-template-areas:"map" "chain" "bookrisk" "activity" "sector" "news"; flex:none;height:auto;min-height:0;gap:8px;padding:8px;overflow:visible} .lv-book[data-book-authority="empty"] .board{grid-template-areas:"map" "chain" "activity" "sector" "news"} .lv-book[data-book-authority="empty"][data-plan-count="0"] #activityBand{display:none} .lv-book[data-book-authority="empty"][data-plan-count="0"] .board{grid-template-areas:"map" "chain" "sector" "news"} .lv-book #activityBand,.lv-book #riskMain,.lv-book #bookrisk,.lv-book #chainBand, .lv-book #sectorBand,.lv-book #newsBand{height:auto;min-height:0;overflow:visible} .lv-book #riskMain>.authbookpanel,.lv-book #bookrisk>.authbookpanel, .lv-book #chainBand>.authbookpanel,.lv-book #sectorBand>.authbookpanel, .lv-book #newsBand>.authbookpanel{height:auto;min-height:0;overflow:visible} .lv-book #riskMain:has(.homeworkbenchpanel){display:block;height:auto;min-height:auto;overflow:visible} .lv-book button{min-height:40px} .lv-book .histseg{display:flex;flex-wrap:wrap;width:100%;margin-left:0;overflow:visible} .lv-book .histseg button{flex:1 0 40px} /* Chain rows are actions, not dense table text. Mobile releases vertical space to the page scroller, so keep the complete bid/ask row and a genuine touch target instead of preserving the 21px desktop compacting rule. */ .authmarketpulse .authchainrow{height:auto;min-height:40px;padding-block:6px} .lv-book .authmarketpulse .authchainbook button, .lv-book .authmarketpulse .authchainstrike{min-width:40px;min-height:40px} .homeworkbenchpanel,.homeworkbenchpanel #authHomeOpportunity,.homeworkbenchpanel .opportunitylens{ height:auto;min-height:0;overflow:visible;flex:none} .homeworkbenchpanel .opportunityrows{height:auto;min-height:0;overflow:visible;flex:none} .homeworkbenchpanel .scoutbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch} .homeworkbenchpanel .scoutbar .homeideasearch{grid-column:1/-1} .homeworkbenchpanel .scoutbar .scoutgo,.homeworkbenchpanel .scoutbar .scoutalt{ width:100%;min-width:0;min-height:44px} .homeworkbenchpanel .opportunitycontrol .oseg button, .homeworkbenchpanel .homeideasearch input, .homeworkbenchpanel .homeacquirefields input, .homesectorchips button,.authmarketfocus,.authmarketgo,.activitymore, .lv-book .authlistbutton,.lv-book .authsharerow .btn, .lv-book .overflowread{min-height:40px} /* One touch policy for the compact control vocabulary. Text such as "$", "Vol", or "Exit" must not collapse the hit box to its intrinsic label width. Groups may wrap; their controls never shrink below a finger-sized square. */ .lv-book .opportunitycontrol button, .lv-book .histseg button,.lv-book .histpill,.lv-book .histchip, .lv-book button.tgl{min-width:40px;min-height:40px} /* The full sector vocabulary is visible in the page flow on touch devices. A masked horizontal chip scroller hid sectors without a cue and made the selected lens feel lost. */ .homesectorchips,.homesectorchips.overflowing{flex-wrap:wrap;overflow:visible;mask-image:none} /* On the narrowest supported phone, the descriptive demo-market label needs the whole row. Keeping it beside the "Market" eyebrow widened the document beyond the viewport. */ .authmarketpulse .lenshd{flex-wrap:wrap} .authmarketpulse .lenshd>.homesectorchips{flex:1 1 100%;width:100%} .authmarketpulse .homesectorchips button{max-width:100%;white-space:normal;overflow-wrap:anywhere} .lv-book .cstatuses{overflow:hidden} .lv-book .cstatuses>.badge{min-width:0;max-width:100%;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .homeworkbenchpanel .opportunityrow{min-height:44px;padding:6px;gap:7px} .homeworkbenchpanel .opportunityrow>span{display:block} .homeworkbenchpanel .opportunityrow b{font-size:var(--f-xs);line-height:1.25;-webkit-line-clamp:2} .homeworkbenchpanel .opportunityrow small{margin-top:2px;line-height:normal} .homeworkbenchpanel .scoutfacts{display:flex;flex-wrap:wrap;gap:2px 7px;overflow:visible} .homeworkbenchpanel .scoutfacts>[data-scout-fact]{white-space:normal} .homeworkbenchpanel .scoutchecks{grid-template-columns:repeat(2,minmax(0,1fr))} .homeworkbenchpanel .scoutcounts{flex-wrap:wrap;overflow:visible} .scoutresulthead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px} .scoutresulthead>.hint{text-align:right} .scoutresulthead .scoutcountsfinal{grid-column:1/-1;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin:0;overflow:visible} .scoutresulthead .scoutcount{min-width:0;white-space:normal} .authhomenews.elegantscroll,.homeworkbenchpanel .scoutresults>.opportunityrows, .authmarketwatch.elegantscroll,.lv-book #activityBand #homePlansList{ height:auto;max-height:none;overflow:visible;overscroll-behavior:auto;scroll-snap-type:none;mask-image:none!important} .lv-book #activityBand{max-height:none;overscroll-behavior:auto;scroll-snap-type:none;mask-image:none!important} .newsoverflowmeta,.watchoverflowmeta,.planoverflowmeta,.rowsoverflowmeta{display:none!important} .homeideamatches{grid-template-columns:1fr}.homeideasearch,.homeacquirefields label{grid-template-columns:1fr} .homeworkbenchactions{align-items:stretch;flex-direction:column}.homeworkbenchactions .btn{width:100%} .compactbookfutures .bookfanlegend{height:auto;max-height:none;overflow:visible} } @media(max-width:420px){ .homeworkbenchpanel .scoutchecks{grid-template-columns:minmax(0,1fr)} /* Two 155px receded cards cannot carry a complete position identity at 320px. Preserve every card and let the document own the extra vertical space. */ .lv-position .recede{grid-template-columns:minmax(0,1fr)} } /* ---- Identity ------------------------------------------------------------------------ The signed-out surface is the whole page: a private instance has exactly one thing a visitor can do, so nothing else competes with it. body{overflow:hidden} owns the desk's scrolling, so the card centres inside the viewport and stays inside 320px. */ .signin{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px} .signin-card{width:min(420px,100%);min-width:280px;background:var(--raise);border:1px solid var(--line); border-radius:14px;box-shadow:var(--pop-shadow),var(--raise-sheen);padding:26px 24px;text-align:left} .signin-mark{width:30px;height:30px;border-radius:9px;margin-bottom:16px; background:conic-gradient(from 210deg,var(--accent),var(--violet),var(--accent));opacity:.9} .signin-card h1{margin:0 0 8px;font-size:var(--f-xl);font-weight:650;letter-spacing:-.01em} .signin-card p{margin:0 0 18px;color:var(--dim);font-size:var(--f-base);line-height:1.5} .signin-card .btn.pri{display:block;width:100%;text-align:center;text-decoration:none;padding:10px 14px;font-size:var(--f-md)} .signin-card .signin-foot{margin:14px 0 0;font-size:var(--f-sm);color:var(--faint)} .whoami{display:flex;align-items:center;gap:8px;min-width:0;padding-left:10px;margin-left:2px;border-left:1px solid var(--line-soft)} .whoname{font-size:var(--f-sm);color:var(--dim);max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .whoform{display:contents} .wholink{border:0;background:none;padding:0;font:inherit;font-size:var(--f-sm);color:var(--accent);text-decoration:none;white-space:nowrap;cursor:pointer} .wholink:hover{text-decoration:underline} @media(max-width:900px){.whoami{display:none}} /* A screen the user has not set is visibly off, not merely at some value. */ .gov.govunset .gh .num{color:var(--faint);font-style:italic} .gov.govunset .slider{opacity:.42} .gov.govunset:hover .slider,.gov.govunset .slider:focus{opacity:1} /* The centre Market lens is one bounded evidence component on the desktop desk. The old flex arrangement let history shrink below the combined height of its own controls/chart/readout, while the following context painted with overflow:visible. That is how the two context headings ended up printed through the history analysis. One grid now owns the four rows; history and context share the available height, and neither may paint outside its assigned row. */ @media (min-width:1501px){ /* The shared history instrument's controls, chart and analysis need 123px under Safari's font metrics. Give the Market row those eleven pixels instead of clipping the analysis; the compact ScenarioSpectrum above already surrendered substantially more redundant prose. */ .dccenter .marketlens{display:grid;height:100%;min-height:0; grid-template-rows:max-content max-content minmax(124px,.48fr) minmax(150px,.52fr); align-content:stretch;overflow:hidden;padding-block:6px} .dccenter .dccpay{min-height:0} .dccenter .marketlens>*{min-height:0} .dccenter .marketlens .authmarkethero{margin-bottom:4px;display:flex;align-items:baseline;gap:9px} .dccenter .marketlens .authmarkethero .amh-facts{margin-left:auto;display:inline-flex;gap:10px;color:var(--faint);font-size:var(--f-2xs);white-space:nowrap} .dccenter .marketlens .authmarkethero .amh-facts b{color:var(--dim);font-family:var(--mono)} /* Execution and news share the final track below the primary stored-history instrument. */ .dccenter .marketlens .marketctx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:clamp(168px,16vh,210px);height:100%;max-height:none; gap:0 12px;margin-top:4px;overflow:hidden} .dccenter .marketlens .marketcol{display:flex;height:100%;min-width:0;min-height:0; flex-direction:column;overflow:hidden} .dccenter .marketlens .marketcol .authnews{flex:1 1 auto;min-height:0;overflow-y:auto; overscroll-behavior:contain;scrollbar-width:none} /* the strike book owns the evidence column's height: rows fill it, and when the column is short the book scrolls to its +N disclosure instead of clipping or leaving a void */ .dccenter .marketlens .packagebookcol{min-height:0} .dccenter .marketlens .packagebooknear{flex:1 1 auto;min-height:0;overflow-y:auto; overscroll-behavior:contain;scrollbar-width:none} /* min-height:0 + overflow:hidden cut the last strike row (126px of 134 at 2000x963). The list shows what it holds; the lens column has the room. */ .dccenter .marketlens .packagebook{display:flex;min-height:min-content;flex-direction:column} /* The market context uses the shared package-price component at compact density. The full arithmetic remains in the DOM and in the execution dock, while this placement reserves real height for the separately-owned nearby chain instead of clipping it behind the analysis. */ .dccenter .marketlens .packagebook:has(.packagebooknear){ display:grid;grid-template-rows:max-content minmax(0,1fr);align-content:stretch;gap:2px; min-height:0;overflow:visible } .dccenter .marketlens .packagebook .packageprice{ width:100%;min-width:0;max-width:100%;margin-top:2px;padding:2px 6px;box-sizing:border-box } .dccenter .marketlens .packagebook .packageprice .prhd, .dccenter .marketlens .packagebook .prgrid, .dccenter .marketlens .packagebook .prmeta{width:100%;min-width:0;max-width:100%} .dccenter .marketlens .packagebook .packageprice .prhd{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start; gap:4px;margin-bottom:1px;line-height:1.15 } .dccenter .marketlens .packagebook .packageprice .prhd .eyebrow, .dccenter .marketlens .packagebook .packageprice .prhd .hint{ min-width:0;font-size:var(--f-2xs);line-height:1.05;overflow:visible; text-overflow:clip;white-space:normal } .dccenter .marketlens .packagebook .prgrid{ grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 8px } .dccenter .marketlens .packagebook .prrow{ flex-direction:row;align-items:baseline;gap:4px;overflow:visible;line-height:1.05 } .dccenter .marketlens .packagebook .prk, .dccenter .marketlens .packagebook .prv{ min-width:0;font-size:var(--f-2xs);line-height:1.05;white-space:nowrap } .dccenter .marketlens .packagebook .prmeta{ margin-top:1px;gap:1px 4px;flex-wrap:wrap;overflow:visible; font-size:var(--f-2xs);line-height:1.05;white-space:normal } .dccenter .marketlens .packagebook .prmeta span{ min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap } .dccenter .marketlens .packagebook .prmeta span:not(.prfp):not(:last-child)::after{ margin-left:4px } /* The analysis fingerprint is diagnostic identity, not a financial fact. The full analysis and review surface retain it; the compact market context spends those pixels on source, freshness, observation time, fees, and executable cash instead. */ .dccenter .marketlens .packagebook .prmeta .prfp{display:none} /* Two resting headlines fit without scrolling. Expanding the explicit +N action creates the one intentional list scroller; every headline remains reachable without moving the adjacent execution analysis or painting back through history. */ .dccenter .marketlens .authnews{flex:1 1 auto;min-height:0;overflow-y:auto; overscroll-behavior:contain;scrollbar-width:none} .dccenter .marketlens .authnews:has([data-news-disclosure][aria-expanded="true"]){ overflow-y:auto} .dccenter .marketlens .authnews::-webkit-scrollbar{width:0} .dccenter .marketlens .lenshd.sub{margin-top:3px} .dccenter .marketlens .sourcefacts{margin-top:3px;padding-top:3px} .dccenter .marketlens .chainmore{margin-top:3px;min-height:24px;padding-block:3px} /* This is the same package/news evidence in a compact composition, not a second renderer. Previously only one height-specific media band received it. */ .dccenter .marketlens .evline{flex-wrap:nowrap;gap:4px;margin-bottom:3px;font-size:var(--f-2xs)} .dccenter .marketlens .evline>*{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dccenter .marketlens .packagebooknear{display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head more" "rows rows" "facts facts";align-content:start;gap:1px 5px;margin-top:0;padding-top:0} .dccenter .marketlens .packagebooknear .authchainhead, .dccenter .marketlens .packagebooknear .authchainrow{ grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); gap:4px;padding-inline:4px;line-height:1.2 } .dccenter .marketlens .packagebooknear .authchainhead{ grid-area:head;height:14px;padding-block:0 } .dccenter .marketlens .packagebooknear .authchainrows{grid-area:rows} .dccenter .marketlens .packagebooknear .authchainrow{height:17px;padding-block:0} .dccenter .marketlens .packagebooknear .authchainrows{gap:1px} .dccenter .marketlens .packagebooknear .compactchainfacts{grid-area:facts;align-self:center;margin:0;padding:0;border:0; min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.1} .dccenter .marketlens .packagebooknear .chainmore{ grid-area:more;align-self:center;min-height:14px;margin:0;padding:0 4px;font-size:var(--f-2xs) } .dccenter .marketlens .authnews.compactnews{gap:3px} .dccenter .marketlens .authnews.compactnews a{padding:3px 5px;line-height:1.25} .dccenter .marketlens .authnews.compactnews a b{display:block;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2} } @media (min-width:1501px) and (max-height:1199px){ .dccenter .marketlens .histstrip{display:none} .dccenter .marketlens .histwrap{min-height:96px} } @media (min-width:1501px) and (max-height:1199px){ /* A 130px SVG floor plus the title, exact KPI row and secondary analysis is 15px taller than the centre track at 1920×1080. Keep every analysis and give the chart the remaining 115px; when playback/review also earns a control row, 96px preserves a useful plot without clipping the payoff owner itself. */ .dccenter .decpay{min-height:115px} .dccenter:has(.srow-ctl) .decpay{min-height:96px} } /* Laptop heights between the short-desktop rules (<=850) and the tall-desktop rules (>=1000) keep the same ownership rule; only the lower-value volume strip yields. */ @media (min-width:1501px) and (min-height:851px) and (max-height:999px){ /* The 390px tall-market appetite is correct once the viewport reaches four figures, but at 851–999px it steals the final payoff labels after a scenario is pinned or review opens. The compact history grammar below needs 94px (not the tall desktop's 123px), so this band can return those pixels to the decision evidence without clipping either owner. */ .dccenter .marketlens{padding-bottom:3px} .dccenter .dccpay{gap:2px} .dccenter .decpay{min-height:96px} .dccenter .kgrid.calm .k{padding-top:5px;padding-bottom:5px} .dccenter .ksecondary{margin-top:1px;gap:10px} .dccenter .marketlens>.lenshd{margin-bottom:2px} .dccenter .marketlens>.authmarkethero{margin-bottom:2px;padding:4px 7px} .dccenter .marketlens .authmarkethero .amh-price{font-size:22px} .dccenter .marketlens .histwrap{gap:2px;min-height:94px} /* Honest `1 session` / `5 sessions` labels are wider than the old 1D/1W shorthand. The decorative flexible spacer was the only reason the expected-move control wrapped onto a second row at 2000×963; remove that empty gap in this compact-height grammar. */ .dccenter .marketlens .histspacer{display:none} .dccenter .marketlens .histstrip{display:none} .dccenter .marketlens .histwrap .hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* The desktop Market context has a 216px relaxed-height allocation. In the owner's 963px window its compact chain/analysis/news grammar fits in 204px; returning those twelve surplus pixels keeps the payoff chart and pinned playback complete without hiding any Market fact. */ /* The floor stays; the fixed height and ceiling were cutting up to 44px of market context on rows with more rows — this was the "migrating" clip that survived three container fixes, because the clamp was on the element itself in a later media block. */ .dccenter .marketlens .marketctx{margin-top:2px;min-height:168px;height:auto;max-height:none} .dccenter .marketlens .packagebook .packageprice{margin-top:0;padding-block:0} .dccenter .marketlens .marketctx .lenshd.sub{margin-top:2px} .dccenter .marketlens .newsdisclosure{min-height:22px;padding-block:2px} .understand .evsimstage{min-height:196px} } /* The mechanical protocol: one row per typed rule — what it is, the value that triggers it with its unit, and what the policy says to do. Values are tabular so the lines compare down the column, the way a rule sheet should read. */ .protocolpanel{margin-top:7px} .protogrid{display:flex;flex-direction:column;gap:4px} .protorow{display:grid;grid-template-columns:minmax(84px,auto) minmax(70px,auto) 1fr;gap:8px;align-items:baseline; padding:5px 7px;border:1px solid var(--line-soft);border-radius:7px;background:var(--panel-2)} .protok{font-size:var(--f-sm);color:var(--text);font-weight:600;white-space:nowrap} .protov{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--f-sm);color:var(--accent);white-space:nowrap} .protoa{font-size:var(--f-xs);color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .protometa{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;font-size:var(--f-xs);color:var(--faint)} .protometa span:not(:last-child)::after{content:'·';margin-left:6px;color:var(--line)} /* §3.3 package-price analysis — one component, three placements (order dock, candidate row, position close). Values are tabular so option net, package net, fees and after-fee net line up down the column and the arithmetic is checkable by eye. */ .packageprice{margin-top:8px;padding:8px 10px;border:1px solid var(--line-soft);border-radius:8px;background:var(--panel-2)} .packageprice .prhd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:5px} .prgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:2px 12px} .prbreak{grid-column:1/-1;color:var(--faint);font-size:var(--f-2xs);font-family:var(--mono);line-height:1.3} .prrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0} .prk{font-size:var(--f-xs);color:var(--dim);white-space:nowrap} .prv{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--f-sm)} .prmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:var(--f-2xs);color:var(--faint)} .prmeta span:not(.prfp):not(:last-child)::after{content:'·';margin-left:6px;color:var(--line)} .prfp{font-family:var(--mono);color:var(--faint);opacity:.8} .packageprice.unavailable{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px} .packageprice.unavailable .prv{color:var(--caution)} .packageprice.unavailable .prwhy{font-size:var(--f-xs);color:var(--dim);min-width:0} /* The one-line option/shares/package bridge under a hero KPI row. Present only when a package moves cash in shares as well as options — otherwise the two numbers are the same and a line explaining their difference would be noise. */ .prline{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px;font-size:var(--f-xs);color:var(--dim)} .prline b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text);margin-left:4px} .prline .prsum b{color:var(--accent)} /* Package provenance on one line inside the package-book column: which book priced it, how completely, as of when. */ .evline{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;font-size:var(--f-xs);color:var(--dim);margin-bottom:5px;min-width:0} .evline b{color:var(--text);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .evline .evsep{color:var(--line)} /* ============================================================ M3: the last static inline styles, moved into the components that own them. What remains inline in index.html is only DRAWING data — a bar's computed width, a series colour, a marker's position — which belongs on the element because it is the datum. Spacing, alignment and palette are the stylesheet's job, and having them in markup meant one component had as many grammars as it had call sites. ============================================================ */ .kgrid.boxed.numrow.calm{margin-top:8px} .kgrid.boxed.numrow{margin-top:9px} .kgrid.boxed.numrow[style*="--numrow-cols"]{grid-template-columns:repeat(var(--numrow-cols),minmax(0,1fr))} .hint.pushright{margin-left:auto} .placebox{max-width:540px} .booktext.closelede{margin:3px 0 11px} .booktext.confirmline{margin-top:6px} .dctx.dctxdim{color:var(--dim)} .hint.pickempty{padding:9px 10px} .hint.pickprompt{padding:12px 10px} .tailsub{margin-top:5px} .legsummary .lbl.legsummarylbl{flex-basis:100%} .screenedout{color:var(--caution)} [data-mapi].mapdot{cursor:pointer} [data-mapi].mapdot:focus-visible{outline:none;stroke:var(--text);stroke-width:3px;filter:drop-shadow(0 0 4px var(--accent))} [data-mapi].mapbuild{cursor:default} .psec+.psec,.placebox>.psec{margin-top:10px} /* Ink drawn INSIDE an interactive canvas: labels, guides, markers. They are read, never pressed, so they must not swallow the pointer meant for the shape underneath. One class says that once, instead of thirteen identical inline declarations. */ .svgink{pointer-events:none} .svgmono{font-family:var(--mono)} /* the risk-character key: three swatches whose colour IS the vocabulary */ .fanleg .swatch,.legendkey .swatch{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px} .swatch.defined{background:var(--profit)} .swatch.secured{background:var(--violet)} .swatch.undefined{background:var(--loss)} .pfhandle{cursor:ew-resize} /* The scenario metrics describe the END of the selected story, not the position as it stands. Both readings use the same greek labels — they are the same quantities — so the group says which moment it is reporting, rather than leaving two identical labels to be read as one number. */ .scenmetriccap{margin:0 0 4px;color:var(--faint);font-size:var(--f-2xs);letter-spacing:.04em;text-transform:uppercase} } @layer responsive{ /* Position uses two deliberate compositions. Full desktop keeps the whole decision in view and gives every fixed analysis its measured content floor. Intermediate widths become one document: the page, not five little panels, owns vertical overflow. */ @media(min-width:1501px){ /* A desktop Position is one bounded decision, not three elastic canvases. Payoff and possible futures receive useful, capped plot areas; the supporting analyses own the remaining height. This keeps a short viewport honest without turning a 1440px-tall viewport into empty chart background. */ /* One desktop allocation owns every Position, regardless of leg count. The hero grows with the viewport until the complete lifecycle/leg analysis has a useful ceiling; possible futures stay landscape-sized; supporting evidence receives the remainder. This replaces the former fifth-leg and height-band exceptions that fixed one fixture by stealing space elsewhere. */ /* The complete four-leg package is a first-screen fact. Give Position-now its measured 389px desktop need and take the space from the formerly oversized scenario band; this keeps all held contracts visible without a nested leg scroller or overlap. */ .authposhero{flex:0 0 clamp(360px,36vh,420px);min-height:360px} .authscenstage{flex:0 0 clamp(200px,20vh,250px)} /* Missing/rejected saved paths are a compact recovery analysis. The desktop chart allocation must not reserve a 325px void when there is no chart to show. */ .authscenstage.unavailable{flex:0 0 auto;min-height:0;height:auto} .authscenarioarea{flex:1;min-height:0} /* One desktop owner: the focused card consumes the bounded board and its three measured bands fit inside it. No ancestor becomes an accidental page scroller. */ .lv-position .focus{align-items:stretch;overflow:hidden} .lv-position .focus>.card{flex:1 1 auto;width:100%;height:100%;min-height:0} .lv-position .focus>.card>.cdetail{flex:1 1 auto;min-height:0} .lv-position .authpos{height:100%;min-height:0} .authresearchgrid{flex:1 1 230px;min-height:230px;max-height:none} .lv-position .focus,.lv-position .focus>.card{overflow:hidden} /* Default desktop composition fits the board. The previous 21px detail scroller came from oversized fixed chart appetites, so the owning allocation yields those pixels instead of creating a second page or shrinking text. */ .lv-position .focus>.card>.cdetail{overflow:hidden} .lv-position .authpos{height:100%;min-height:0;overflow:hidden} .lv-position .authpathpanel,.lv-position .authresearchpanel{min-height:0;overflow:hidden} .authmanagementpanel .authactionfacts{grid-template-columns:repeat(6,minmax(0,1fr))} } @media(min-width:1501px) and (min-height:1150px){ /* The evidence fan uses the rail it owns; tall canvases no longer leave an inert void below a fixed-height chart. */ .understand .evsimstage{flex:1 1 auto;height:auto;min-height:285px;max-height:none} /* Position's supporting evidence is the only region that can turn extra height into additional history and research visibility. Let it consume the tall-screen remainder instead of leaving a large bordered void beneath the complete decision. */ .authresearchgrid{flex:1 1 0;min-height:430px;max-height:none} } @media(min-width:1501px) and (max-height:1000px){ /* At the owner's effective 2000×963 canvas, reduce chart appetite—not typography or exact evidence. The support rail gets a real content floor and may use its one news-list overflow; provenance, expiry, and chain rows remain readable. */ .authposhero{flex-basis:360px;min-height:360px} .authscenstage{flex-basis:200px} .authscenstage{padding:6px;gap:4px} .authscenarioarea{gap:6px} .authscenpanel,.authpathpanel{padding:6px} .authpathpanel{gap:4px;grid-template-rows:auto minmax(90px,1fr) auto auto} .authresearchgrid{gap:8px} .authresearchgrid .authresearchpanel{padding:6px;gap:3px} .authresearchgrid .lenshd{margin-bottom:0;gap:5px} .authresearchgrid>.authresearchpanel:first-child .lenshd>.hint{display:none} .authresearchgrid>.authresearchpanel:first-child .authmetric{padding:3px 5px;gap:1px} .authresearchgrid>.authresearchpanel:first-child .authmetric b{ font-size:var(--f-xs);line-height:1.2} .authresearchgrid>.authresearchpanel:first-child .backendnotice{ padding:4px 6px;font-size:var(--f-2xs);line-height:1.25;gap:2px 5px} .authresearchgrid .histwrap{gap:2px} .authresearchgrid .histctl{flex-wrap:wrap;overflow:visible;gap:2px} .authresearchgrid .histchart{height:0;min-height:72px;flex:1 1 0} .authresearchgrid .histread{min-height:22px;font-size:var(--f-2xs);line-height:1.2; white-space:normal;overflow:visible;text-overflow:clip} .authposchain .authchainhead{min-height:16px;height:auto;padding-block:0} .authposchain .authchainrows{gap:1px} .authposchain .authchainrow{height:24px;min-height:24px;padding:2px 3px;line-height:1.2} .authposchain .sourcefacts{margin-top:2px;padding-top:2px;font-size:var(--f-2xs);line-height:1.2; white-space:normal;overflow:visible;text-overflow:clip} .authpositionchainmore{min-height:28px;padding:4px 6px;font-size:var(--f-2xs)} .authmanagementpanel>.lenshd>.hint{display:none} .authmanagementpanel .authmanagement{gap:3px} .authmanagementpanel .authmanagementidentity{padding:3px 5px} .authmanagementpanel .authactionchoices{gap:3px} .authmanagementpanel .authactionchoices>.btn{min-height:28px;padding:3px 6px} .authmanagementpanel .authactionselect{min-width:104px} .authmanagementpanel .authactionselect>span{padding-inline:4px} .authmanagementpanel .authactionselect select{max-width:112px;padding-block:2px} .authmanagementpanel .authactionfact{padding:2px 3px} .authmanagementpanel>.lenshd .btn{min-width:0;padding-inline:5px} .authmanagementpanel .authactioncontext{padding-top:2px} } @media(min-width:1001px) and (max-width:1500px){ body:has(#stage.lv-position){height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden} #app:has(>#stage.lv-position){height:auto;min-height:100dvh;overflow:visible} #stage.lv-position{flex:none;min-height:calc(100dvh - 47px);overflow:visible} .lv-position .board{flex:none;flex-direction:column;min-height:0;overflow:visible;align-items:stretch} .lv-position .recede{flex:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); width:100%;overflow:visible;order:2} .lv-position .focus{order:1} .lv-position .recede .card{min-width:0} .lv-position .focus,.lv-position .focus .card,.lv-position .focus .card>.cdetail{ flex:none;width:100%;min-height:0;overflow:visible} .lv-position .focus .card>.cdetail{padding-bottom:18px} /* This must match the desktop owner's specificity (`.lv-position .authpos`). A bare `.authpos` loses the cascade and clips the second support row at 1280/1366 even though the document itself correctly owns scrolling. */ .lv-position .authpos{height:auto;min-height:0;overflow:visible} .authposhero{flex:none;min-height:360px;height:auto} .authposhero .authpaypanel,.authposhero .authposside{min-height:360px;overflow:visible} /* At the 1001–1100 seam the hero stacks, but the full-width held package can still present three pairs of contracts. Keeping six rows in one column pushed half the package outside its own Position-now panel even though the page itself correctly became a document. */ .authposside:has(.authposlegs .legr:nth-child(3)) .authposlegs .declegs{ display:flex;flex-direction:column; max-height:none;overflow:visible;gap:4px} .authresearchgrid{flex:none;grid-template-columns:repeat(3,minmax(0,1fr)); height:auto;min-height:0;max-height:none} .authresearchgrid .authresearchpanel{min-height:230px;height:auto;overflow:visible} .authresearchgrid .authmanagementpanel{grid-column:span 2} .authresearchgrid .authhistory{height:150px} .authresearchgrid .authlist,.authresearchgrid .authnews,.authleglist{ max-height:none;overflow:visible} .authscenstage,.authscenpanel,.authpathpanel,.authpathviewport{ flex:none;height:auto;min-height:0;overflow:visible} .authscenarioarea{flex:none;height:auto;min-height:300px;overflow:visible} .authpathpanel{grid-template-rows:auto minmax(235px,auto) auto} .authpathchart{height:235px;min-height:235px} } @media(min-width:1001px) and (max-width:1100px){ /* Once the hero becomes a vertical document, an unconstrained SVG inherits the full column width and turns a useful payoff into a 700px poster. Keep the same chart and facts at a deliberate landscape height; the Position-now panel remains content-sized below it. */ .lv-position .authposhero{grid-template-rows:400px auto;align-items:start} .lv-position .authposhero .authpaypanel{ height:400px;min-height:400px;max-height:400px} .lv-position .authposhero .authposside{height:auto;min-height:0} .lv-position .authposhero .authpayoff{height:285px;min-height:285px} } /* At the 1000px composition the product chrome still has four independent owners: commands, context, live state, and search. The context is useful, but its trailing live metrics already appear in the focused Position. Keep the route identity and release those duplicate metrics before they are clipped inside `.thctx`. */ @media(min-width:901px) and (max-width:1100px){ .thread .tstate{display:none} .thread.zoomed .thctx{gap:6px} .thread.zoomed .crumbs{min-width:0;max-width:100%;overflow:hidden} .thread.zoomed .crumb{max-width:13ch;padding-inline:6px} .thread.zoomed .crumb.home{width:32px;font-size:0;padding-inline:7px} .thread.zoomed .crumb.home .hmk{margin-right:0} } /* Touch/coarse pointers use the same components and facts with a larger interaction target. Responsive policy changes the token once; it never restates each component's geometry. */ @media(max-width:1000px){ /* Position is a document on narrow screens. The page owns the only vertical scroll; sibling positions wrap into the document instead of creating a hidden horizontal carousel. */ body:has(#stage.lv-position){height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden} #app:has(>#stage.lv-position){height:auto;min-height:100dvh;overflow:visible} #stage.lv-position{flex:none;min-height:calc(100dvh - 78px);overflow:visible} .lv-position .board{flex:none;flex-direction:column;min-height:0;overflow:visible;align-items:stretch} .lv-position .recede{display:none} .lv-position .recede .card{min-width:0;width:auto} .lv-position .focus,.lv-position .focus .card,.lv-position .focus .card>.cdetail{ flex:none;width:100%;min-height:0;overflow:visible} .lv-position .focus .card>.cdetail{padding:9px 8px 18px} .lv-position .focus .card>.cface{padding:10px 12px} .lv-position .focus .crow1{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto; grid-template-areas:"risk symbol filler pnl" ". structure structure structure" ". statuses statuses statuses"; align-items:center;gap:3px 7px;min-width:0} .lv-position .focus .crow1 .crisk{grid-area:risk} .lv-position .focus .crow1 .csym{grid-area:symbol;font-size:var(--f-xl)} .lv-position .focus .crow1 .cstruct{grid-area:structure;min-width:0;white-space:normal;line-height:1.25} .lv-position .focus .crow1 .cstatuses{grid-area:statuses;flex-wrap:wrap} .lv-position .focus .crow1 .cpnl{grid-area:pnl;margin-left:0;max-width:45vw;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;text-align:right} .authpos{height:auto;min-height:0;overflow:visible;scrollbar-gutter:auto} .authpositionnav{display:flex;order:0} .authpositionnav .btn{width:100%;min-height:44px;text-align:left} .authposhero{order:1}.authscenstage{order:3} .authposhero .authposside{order:1}.authposhero .authpaypanel{order:2} /* Management belongs with the current decision; possible futures belong before background reading. `display:contents` lets the five existing support panels participate in the one page-owned order without creating another renderer or nested scroller. */ .authresearchgrid{display:contents} .authresearchgrid>.authresearchpanel{min-height:0} .authresearchgrid>.authmanagementpanel{order:2} .authresearchgrid>.positionsupporttoggle{order:4} .authresearchgrid>.authmarketpanel{order:5} .authresearchgrid>.authposchain{order:6} .authresearchgrid>.authhistorypanel{order:7} .authresearchgrid>.authnewspanel{order:8} .positionmobilefold>.mobilefoldtoggle{display:flex;width:100%;min-height:44px;align-items:center; justify-content:space-between;gap:8px;padding:7px 9px;border:1px solid var(--line); border-radius:8px;background:var(--panel-2);color:var(--text);text-align:left} .positionmobilefold>.mobilefoldtoggle span{display:flex;min-width:0;flex-direction:column;gap:2px} .positionmobilefold>.mobilefoldtoggle small{color:var(--dim);font-size:var(--f-2xs)} .positionmobilefold>.mobilefoldtoggle i::before{content:"+";font-style:normal;color:var(--accent);font-size:18px} .positionmobilefold.mobileopen>.mobilefoldtoggle i::before{content:"−"} .authpaypanel:not(.mobileopen)>.authpayoff{display:none} .authscenstage:not(.mobileopen)>.authscenarioarea{display:none} .authresearchgrid:not(.mobileopen)>.authresearchpanel:not(.authmanagementpanel){display:none} .lv-position .authpositionchainmore{min-height:44px;padding:7px 9px;font-size:var(--f-xs)} .authscenarioarea{grid-template-columns:minmax(0,1fr);min-height:0} .authscenstage,.authscenpanel,.authpathpanel,.authpathviewport{height:auto;min-height:0;overflow:visible} .authpathpanel{grid-template-rows:auto minmax(235px,auto) auto} .authpathchart{height:235px;min-height:235px} /* The compact desktop-height rule is also true for a 390x844 phone. Position therefore owns its narrow toolbar explicitly: one complete playback row, then wrapping assumptions. The end label is already present in the selected story/readout, so it need not force the speed control beyond the viewport. */ .lv-position .authscenpanel .srow-ctl{display:grid;grid-template-columns:minmax(0,1fr); grid-template-areas:"play" "steps";gap:6px;min-width:0;max-width:100%} .lv-position .authscenpanel .srow-ctl>.scenplay, .lv-position .authscenpanel .srow-ctl>.smstps{width:100%;min-width:0;max-width:100%} .lv-position .authscenpanel .srow-ctl>.smstps{flex-wrap:wrap;justify-content:flex-start} .lv-position .authscenpanel .srow-ctl .scenplay{gap:4px} .lv-position .authscenpanel .srow-ctl .scenplay .tk{display:none} .lv-position .authscenpanel .srow-ctl .scenplay .scrub{min-width:24px} .lv-position .authposlegs>.lenshd{display:grid;grid-template-columns:minmax(0,1fr); grid-template-areas:"title" "facts" "action";gap:5px;align-items:start} .lv-position .authposlegs>.lenshd .eyebrow{grid-area:title} .lv-position .authposlegs>.lenshd .hint{grid-area:facts;text-align:left;min-width:0; overflow:visible;text-overflow:clip;white-space:normal} .lv-position .authposlegs>.lenshd .btn{grid-area:action;min-height:40px;width:100%} .lv-position .authlifecycle.lifeblocked{grid-template-columns:minmax(0,1fr); grid-template-areas:"badge" "question" "summary" "facts" "retry";gap:5px} .lv-position .authlifecycle.lifeblocked>.badge{grid-area:badge;grid-row:auto;justify-self:start; max-width:100%;white-space:normal} .lv-position .authlifecycle.lifeblocked>b{grid-area:question} .lv-position .authlifecycle.lifeblocked>p{grid-area:summary} .lv-position .authlifecycle.lifeblocked>.authlifefacts{grid-area:facts;grid-column:auto} .lv-position .authlifecycle.lifeblocked>.authfailact{grid-area:retry} .lv-position .authlifecycle p{-webkit-line-clamp:3} .lv-position .authlifecycle .btn,.lv-position .authscenstage.unavailable .btn{min-height:40px} .lv-position .authmanagement{gap:8px} .lv-position .authactionchoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .lv-position .authactionchoices>.btn,.lv-position .authactionselect{min-height:44px;width:100%} .lv-position .authactionselect{min-width:0} .lv-position .authactionselect select{max-width:none;flex:1} .lv-position .authactionfacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .lv-position .authactionfact{padding:7px 8px} .lv-position .authactionfact small{font-size:var(--f-2xs)} .lv-position .authactionfact b{font-size:var(--f-xs)} .lv-position .authactionfact em{font-size:var(--f-2xs)} .lv-position .authactioncontext{flex-wrap:wrap;gap:7px} .lv-position .authactioncontext .btn,.lv-position .authactionfoot .btn{min-height:44px} .lv-position .authactionreview p{white-space:normal;overflow:visible} .lv-position .authmanagement:has(.authactionreview)>.authactionfacts{display:grid} .lv-position .authmanagement:has(.authactionreview)>.authactioncontext{display:flex} .declegpanel.posheld .declegs{max-height:none;overflow:visible;scroll-snap-type:none} .rehearsalstrip{grid-template-columns:minmax(0,1fr);gap:8px;padding:8px} .rehearsalcopy{grid-template-columns:minmax(0,1fr)} .rehearsalcopy .eyebrow,.rehearsalcopy b{white-space:normal} .rehearsalcopy small{grid-column:1} .rehearsalprogress{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:900px){ .authnews,.authresearchpanel .authnews{height:auto;max-height:none;overflow:visible;overscroll-behavior:auto} /* A phone gives each Position story enough width for its complete name, move, match, and P/L. The legacy four-column desktop compaction was clipping all four facts into one another. */ .lv-position .authscenpanel .smx.barmode{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} /* New Idea's market evidence joins the one document scroller. The late desktop band rules used to win the cascade and keep two 170px columns inside a 390px page, clipping both the chain and the news while also forcing the whole page 87px wider than the viewport. */ .dccenter .marketlens .marketctx{display:flex;flex:none;height:auto;min-height:0;flex-direction:column;gap:10px;overflow:visible} .dccenter .marketlens .marketcol,.dccenter .marketlens .packagebookcol, .dccenter .marketlens .packagebook,.dccenter .marketlens .packagebooknear{ height:auto;min-height:0;max-height:none;overflow:visible} /* Nearby option quotes are actions, not table decoration. A numeric label such as 3.35 is narrower than a finger, so intrinsic text width cannot own the target on touch screens. */ .dccenter .marketlens .packagebooknear .authchainbook button{min-width:40px;min-height:40px} .dccenter .marketlens .packagebooknear .authchainstrike{min-width:40px;min-height:40px} .lv-position .authposchain .authchainrow{height:auto;min-height:40px;font-size:var(--f-2xs)} .lv-position .authposchain .authchainbook button, .lv-position .authposchain .authchainstrike{min-width:40px;min-height:40px} .dccenter .marketlens .authnews{min-height:0} .authmarkethero{display:grid;grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"symbol change price" "facts facts facts";align-items:baseline;gap:4px 8px;padding:7px} .authmarkethero .amh-symbol{grid-area:symbol} .authmarkethero .amh-change{grid-area:change;min-width:0} .authmarkethero .amh-price{grid-area:price;grid-row:auto;grid-column:auto} .authmarkethero .amh-facts{grid-area:facts;margin-left:0;display:flex;flex-wrap:wrap;white-space:normal} } @media(max-width:420px){ .lv-position .recede{grid-template-columns:minmax(0,1fr)} } @media (pointer:coarse){ :root{--control-hit:var(--control-hit-touch)} #decideStage{--control-hit:var(--control-hit-touch)} .tgl,.lrm{min-width:var(--control-hit-touch);min-height:var(--control-hit-touch)} } } @layer utilities{ /* Hidden is a semantic application state, not a layout suggestion. It deliberately outranks every component and responsive display rule and exists exactly once in the served stylesheet. */ [hidden]{display:none!important} .layoutprobe{position:fixed;right:6px;bottom:6px;z-index:99999;padding:6px 8px; border:1px solid var(--accent-2);border-radius:6px;background:color-mix(in srgb,var(--ground) 88%,transparent); color:var(--accent);font:var(--f-xs)/1.35 var(--mono);pointer-events:none;white-space:pre;text-align:left} } /* ============================================================================================ ONE-LINE LEG ROWS — LAST IN SOURCE ON PURPOSE. Several media blocks above restyle .legr as a flex column; when this container query applies, its grid must win by order. The composition follows the PANEL's width (the legs panel lives in clamped columns, so viewport breakpoints lie in both directions): stacked rows below 620px of panel, one line above it. */ .declegpanel .declegs{container-type:inline-size} @container (min-width:620px){ .declegpanel .declegs .legr{display:grid !important; grid-template-columns:max-content max-content max-content max-content minmax(0,1fr) max-content; grid-template-areas:none;align-items:center;column-gap:8px;row-gap:0} .declegpanel .declegs .legr-top{display:contents} .declegpanel .declegs .leg-editors{display:contents} .declegpanel .declegs .lgm{order:5;display:flex;flex-wrap:wrap;justify-content:flex-end;margin:0;min-width:0;white-space:normal} .declegpanel .declegs .legr-top .lrm{order:6;margin-left:0} .declegpanel .declegs .legr .tgl,.declegpanel .declegs .legr .mstp{width:auto;justify-self:start} } .opportunitycontrol.scopenudge{animation:scopenudge 1.5s var(--mo-ease)} @keyframes scopenudge{0%,100%{box-shadow:none}20%,60%{box-shadow:0 0 0 2px var(--accent-2),0 0 18px -4px var(--accent)}} .pathfan .fan-nowdot{fill:var(--accent);stroke:var(--ground);stroke-width:1.4} .pathfan .fan-nowlabel{fill:var(--text);font-size:10px;font-weight:700;paint-order:stroke;stroke:var(--ground);stroke-width:3px;stroke-linejoin:round} .scenario-boundary-short{display:none} /* A 1280×720 desktop is short, not mobile. All three decision owners remain co-visible, but their internals use the compact forms they already own: two ranked rows plus disclosure, a complete exact package, a landscape risk map, payoff KPIs, all eight scenarios, market evidence, and the path fan. Nothing is pushed beneath the fixed dock or silently clipped. */ @media (min-width:1200px) and (max-width:1500px) and (max-height:800px){ .decwrap{padding-top:6px;padding-bottom:7px;gap:5px} .decgrid{gap:7px} .deccol{gap:5px} .deccol.dccenter{grid-template-rows:minmax(0,1fr) 264px;gap:5px} .dccenter .dcctop{grid-template-rows:minmax(148px,1fr) 110px;gap:4px} .dccenter .dccpay{min-height:148px;gap:3px} .dccenter .paytitle{min-height:16px;margin:0;flex-wrap:nowrap;gap:5px} .dccenter .paytitle .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dccenter .paytitle .hint{flex:none;white-space:nowrap} .dccenter .decpay{height:auto;min-height:78px} .dccenter .kgrid.calm .k{padding:3px 6px} .dccenter .ksecondary{display:none} .dccenter .scenpanel{height:110px;min-height:110px;max-height:110px; --upanel-pad:4px 8px;--upanel-lens-gap:0;gap:2px} .dccenter .scenpanel .smx.barmode{margin:1px 0;gap:3px} .dccenter .scenpanel .srow{min-height:29px;padding-block:1px} .dccenter .scenpanel .scenariosummary{min-height:15px;flex-wrap:nowrap;gap:5px; padding-top:2px;overflow:hidden;font-size:9px;line-height:1.15;white-space:nowrap} .dccenter .scenpanel .scenariosummary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dccenter .scenpanel .scenario-boundary-long{display:none} .dccenter .scenpanel .scenario-boundary-short{display:inline} .dccenter .marketlens{--upanel-pad:6px 9px;--upanel-lens-gap:2px; grid-template-rows:max-content 38px minmax(98px,.54fr) minmax(88px,.46fr)} .dccenter .marketlens .authmarkethero{height:38px;min-height:38px;padding-block:3px} .dccenter .marketlens .histwrap{min-height:98px} .dccenter .marketlens .marketctx{min-height:88px} .dccenter .marketlens .authnews.compactnews a{padding-block:2px} .dcleft .fan{flex:0 0 88px;min-height:88px;max-height:88px} .dcleft .leftsupport{flex:1 1 auto;min-height:0;height:auto;overflow:hidden; grid-template-rows:max-content minmax(102px,1fr);gap:5px} .dcleft .leftsupport>.declegpanel{padding:4px 6px} .dcleft .decleghead{margin-bottom:2px} .dcleft .declegpanel .declegs{gap:2px} .dcleft .declegpanel .declegs .legr{padding:2px 5px;gap:1px} .dcleft .declegpanel .declegs .legr-top{row-gap:1px} .dcleft .declegpanel .declegs .lgm{line-height:1.05} .dcleft .declegpanel .addleg.sm{min-height:24px;padding:2px 5px} .dcleft .pickmap{height:auto;min-height:102px;padding-top:4px} .dcleft .decmap{min-height:82px} .understand{gap:4px} .understand .decisionbrief{padding:5px 6px} .understand .decisionbrief .dbtop{gap:5px} .understand .decisionbrief .dbtop b{font-size:11px;line-height:1.15} .understand .decisionbrief .dbfit{font-size:9px;line-height:1.1;text-align:right} .understand .decisionstates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px;margin-top:4px} .understand .decisionstate{padding:2px 4px;gap:3px;overflow:hidden} .understand .decisionstate.assumed{grid-column:1/-1} .understand .decisionstate b{min-width:0;overflow:hidden;text-overflow:ellipsis} .understand .decisionbrief .dbfacts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px 6px;margin-top:4px} .understand .inspectrail,.understand .inspectrail.five{ grid-template-columns:repeat(5,minmax(0,1fr));gap:3px} .understand .inspectrail.five .inspecttab{display:flex;min-width:0;min-height:35px; flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:2px 4px} .understand .inspectrail.five .inspecttab svg{display:none} .understand .inspectrail.five .inspecttab span, .understand .inspectrail.five .inspecttab b{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .understand .inspectpane:has(.evsimstage)>.upanel{height:100%;min-height:0; display:flex;flex-direction:column} .understand .inspectpane .evidenceglance{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:3px} .understand .inspectpane .evidenceglance>span{min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .understand .inspectpane .evsimstage{flex:1 1 auto;min-height:110px;margin-top:4px} .understand .inspectpane .ensembleresult .mchd{min-height:22px} .understand .inspectpane .ensembleresult .mchd>.eyebrow{min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;font-size:9px} .understand .inspectpane .ensembleresult .mchd>.hint, .understand .inspectpane .ensembleresult .mcpathread{display:none} .understand .inspectpane .ensembleresult{grid-template-rows:auto minmax(60px,1fr) auto;gap:2px} .understand .inspectpane .ensembleresult .mcfan{height:100%;min-height:0} .understand .inspectpane .ensembleresult .mcstats{ grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 6px} .understand .inspectpane .ensembleresult .mcs{ display:flex;min-width:0;gap:0} .understand .inspectpane .ensembleresult .mck, .understand .inspectpane .ensembleresult .mcv{font-size:9px;overflow:hidden; text-overflow:ellipsis} } /* New Idea support composition ---------------------------------------------------------- Stored history owns the wide centre support band. Paths, exact package pricing, and current research share the narrower Understand well. These are fragments of one existing market owner, not parallel data paths. */ .dccenter>.decmarkethistory{display:grid;height:100%;min-height:0;overflow:hidden; grid-template-rows:max-content max-content minmax(0,1fr);padding:7px 9px} .dccenter>.decmarkethistory>.lenshd{margin-bottom:4px} .dccenter>.decmarkethistory>.authmarkethero{margin-bottom:4px;padding:5px 8px} .dccenter>.decmarkethistory>.histwrap{display:flex;height:100%;min-height:0;overflow:hidden; flex-direction:column} .dccenter>.decmarkethistory .histchart{flex:1 1 auto;height:0;min-height:120px} .dccenter>.decmarkethistory .histstrip{display:none} @media(min-width:1001px){ .dccenter>.decmarkethistory>.authmarkethero{display:flex;align-items:baseline;gap:9px} .dccenter>.decmarkethistory>.authmarkethero .amh-facts{margin-left:auto} } .pathmarketpanel{height:100%;min-height:0;display:flex;flex-direction:column} .pathmarketstack{flex:1 1 auto;min-height:0;display:grid; grid-template-rows:minmax(0,.82fr) minmax(0,1.18fr);gap:7px} .pathmarketstack>.marketcontextonly{height:100%;min-height:0;overflow:hidden;padding:6px 7px} .pathmarketstack>.marketcontextonly>.marketctx{display:grid;height:100%;min-height:0; grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;overflow:hidden} .pathmarketstack .marketcontextonly .marketcol{display:flex;height:100%;min-width:0;min-height:0; flex-direction:column;overflow:hidden} .pathmarketstack .marketcontextonly .lenshd.sub{margin:0 0 4px;gap:5px} .pathmarketstack .marketcontextonly .lenshd.sub .hint{min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pathmarketstack .marketcontextonly .packagebook{height:100%;min-height:0;overflow-y:auto; overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none} .pathmarketstack .marketcontextonly .packagebook::-webkit-scrollbar{width:0} .pathmarketstack .marketcontextonly .packagebooknear{flex:none;min-height:min-content;overflow:visible} .pathmarketstack .marketcontextonly .authnews{flex:1 1 auto;min-height:0;overflow-y:auto; overscroll-behavior:contain;scrollbar-width:none} .pathmarketstack .marketcontextonly .authnews::-webkit-scrollbar{width:0} .pathmarketstack .marketcontextonly .packageprice{margin-top:0;padding:5px 7px} .pathmarketstack .marketcontextonly .authnews.compactnews{gap:4px} .pathmarketstack .marketcontextonly .authnews.compactnews a{padding:4px 6px;line-height:1.22} @media(min-width:501px){ .pathmarketstack>.decisionmobilefold{display:block;min-height:0;overflow:hidden} .pathmarketstack>.decisionmobilefold>.mobilefoldbody{ display:flex;height:100%;min-height:0;flex-direction:column } .pathmarketstack .evsimstage{flex:1 1 auto;min-height:0;margin-top:0} } @media(max-width:1000px){ .dccenter>.decmarkethistory{height:auto;min-height:300px} .dccenter>.decmarkethistory>.histwrap{min-height:240px} .pathmarketstack{display:flex;flex-direction:column;gap:9px} .pathmarketstack>.marketcontextonly{height:auto;overflow:visible} .pathmarketstack>.marketcontextonly>.marketctx{height:auto;grid-template-columns:minmax(0,1fr); overflow:visible} .pathmarketstack .marketcontextonly .marketcol, .pathmarketstack .marketcontextonly .packagebook, .pathmarketstack .marketcontextonly .packagebooknear, .pathmarketstack .marketcontextonly .authnews{height:auto;overflow:visible} } @media(min-width:1200px) and (max-width:1500px) and (max-height:800px){ .pathmarketpanel>.evidenceglance,.pathmarketstack .evidencesummary{display:none} .pathmarketstack{grid-template-rows:104px minmax(0,1fr)} .pathmarketstack>.marketcontextonly{padding:5px} .pathmarketstack>.marketcontextonly>.marketctx{gap:5px} .pathmarketstack .marketcontextonly .lenshd.sub{margin-bottom:2px} .pathmarketstack .marketcontextonly .lenshd.sub .hint{display:none} .pathmarketstack .marketcontextonly .packageprice{padding:3px 4px} } @media(max-width:500px){ .pathmarketstack>.decisionmobilefold{overflow:visible} .pathmarketstack>.decisionmobilefold>.mobilefoldbody{height:auto} }