/* --------------------------------------------------------------------------- * Flow v2 -- the approved v3 design, scoped to the v2 dashboard container. * * flow.css styles mfd-* and nothing this markup emits. Rather than rename the * design's classes to fit the old markup, or edit flow.css and risk v1, the * mockup's stylesheet is republished here under `.mfd[data-v="2"]`. A rule * that requires that attribute cannot reach v1, so the two render side by side * and the version flag is a real switch. * * The mockup's :root tokens become the container's tokens for the same reason: * scoped there they cannot leak into v1 or the rest of the site. * * Generated from flow-dashboard-v3-terminal.html by build_v2css.py -- edit the * mockup and regenerate rather than editing this file. * ------------------------------------------------------------------------ */ .mfd[data-v="2"]{--sh1:0 1px 2px rgba(0,0,0,.35); --sh2:0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.28); --sh3:0 4px 12px rgba(0,0,0,.4), 0 18px 48px rgba(0,0,0,.35); --bg:#0d1117; --panel:#131922; --card:#161b22; --sunk:#0d1520; --line:#2a313c; --line2:#1d242e; --text:#e6edf3; --mut:#9aa7b4; --dim:#6b7684; --accent:#16b3a0; --on:#16324a; --up:#34d399; --dn:#f87171; --warn:#fb923c; --s-markets:#6EA8FE; --s-macro:#5AD1B0; --s-live:#fb923c; --s-risk:#f87171; --s-research:#F2C14E; --s-strat:#818cf8; --ui:system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;} .mfd[data-v="2"] *, .mfd[data-v="2"] *::before, .mfd[data-v="2"] *::after{box-sizing:border-box} .mfd[data-v="2"] [hidden]{display:none!important} .mfd[data-v="2"] a{color:var(--accent);text-decoration:none} .mfd[data-v="2"] code, .mfd[data-v="2"] .mono{font-family:var(--mono);font-size:.86em} .mfd[data-v="2"] .num{font-family:var(--mono);font-variant-numeric:tabular-nums} .mfd[data-v="2"] .frame{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden} .mfd[data-v="2"] .framebar{display:flex;align-items:center;gap:9px;padding:8px 13px;background:var(--sunk); border-bottom:1px solid var(--line);font-size:11.5px;color:var(--dim);flex-wrap:wrap} .mfd[data-v="2"] .dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex:none} .mfd[data-v="2"] .framebar .url{font-family:var(--mono);font-size:11px} .mfd[data-v="2"] .framebar .who{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mfd[data-v="2"] .tog{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--ui);color:var(--mut); cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:6px;padding:4px 9px} .mfd[data-v="2"] .tog:hover{color:var(--text);border-color:var(--accent)} .mfd[data-v="2"] .tog[aria-pressed="true"]{background:var(--on);color:#bfe9e0;border-color:#2c5b53} .mfd[data-v="2"] .sitenav{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap} .mfd[data-v="2"] .sitenav .brand{font:700 17px var(--ui);letter-spacing:-.02em} .mfd[data-v="2"] .sitenav .links{display:flex;gap:17px;flex-wrap:wrap;margin-left:auto} .mfd[data-v="2"] .sitenav .links a{color:var(--mut);font:500 13px var(--ui)} .mfd[data-v="2"] .sitenav .links a[aria-current="page"]{color:var(--accent)} .mfd[data-v="2"] .sitenav .links a:hover{color:var(--text)} .mfd[data-v="2"] .secrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .mfd[data-v="2"] .sections{display:flex;gap:3px;padding:4px;border:1px solid var(--line); border-radius:9px;background:var(--card);flex-wrap:wrap} .mfd[data-v="2"] .sections .sec{border:0;background:transparent;color:var(--mut);cursor:pointer; font:500 12.5px var(--ui);padding:6px 13px;border-radius:6px;white-space:nowrap} .mfd[data-v="2"] .sections .sec:hover{color:var(--text)} .mfd[data-v="2"] .sections .sec[aria-current="page"]{background:var(--on);color:#bfe9e0;font-weight:600} .mfd[data-v="2"] .searchwrap{margin-left:auto;display:flex;align-items:center;gap:7px;flex:1 1 200px; justify-content:flex-end} .mfd[data-v="2"] .searchbox{flex:1 1 180px;max-width:320px;background:var(--sunk);color:var(--text); border:1px solid var(--line);border-radius:8px;padding:8px 11px;font:400 12.5px var(--ui)} .mfd[data-v="2"] .searchbox::placeholder{color:var(--dim)} .mfd[data-v="2"] .qmark{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line); background:var(--sunk);color:var(--mut);cursor:pointer;font:600 12.5px var(--ui)} .mfd[data-v="2"] .cols{display:grid;grid-template-columns:minmax(0,2.8fr) minmax(0,1fr);gap:14px;align-items:start} .mfd[data-v="2"] .main{display:flex;flex-direction:column;gap:12px;min-width:0} .mfd[data-v="2"] .rail{display:flex;flex-direction:column;gap:10px;min-width:0} .mfd[data-v="2"] .hero{border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2); background:var(--card);padding:20px 22px;display:flex;flex-direction:column;gap:14px} .mfd[data-v="2"] .hero h2{font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.25} .mfd[data-v="2"] .hero .lede{margin:0;color:var(--mut);font-size:15px;max-width:68ch;line-height:1.5} .mfd[data-v="2"] .herogrid{display:flex;flex-direction:column;gap:14px} .mfd[data-v="2"] .drivers{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none} .mfd[data-v="2"] .drivers li{display:flex;gap:9px;align-items:baseline;font-size:13px;color:var(--mut)} .mfd[data-v="2"] .drivers .tick{flex:none;width:5px;height:5px;border-radius:1px;background:var(--accent); transform:translateY(-2px)} .mfd[data-v="2"] .drivers b{color:var(--text);font-weight:600} .mfd[data-v="2"] .invalid{display:flex;gap:9px;align-items:flex-start;border-left:2px solid #5a3d22; padding-left:10px;font-size:12.5px;color:var(--mut)} .mfd[data-v="2"] .invalid b{color:#f4b183;font-weight:600;display:block;font-size:10px;letter-spacing:.09em; text-transform:uppercase;margin-bottom:2px} .mfd[data-v="2"] .hero .foot{display:flex;align-items:center;gap:11px;flex-wrap:wrap} .mfd[data-v="2"] .btn{border:1px solid var(--line);background:var(--sunk);color:var(--text);border-radius:7px; padding:6px 12px;font:500 12.5px var(--ui);cursor:pointer} .mfd[data-v="2"] .btn.primary{background:var(--on);border-color:#1d4f6b;color:#bfe9e0} .mfd[data-v="2"] .btn:hover{border-color:var(--accent)} .mfd[data-v="2"] .btn.mini{padding:3px 9px;font-size:11.5px} @keyframes flash{0%{box-shadow:0 0 0 0 rgba(242,193,78,.5)} 100%{box-shadow:0 0 0 14px rgba(242,193,78,0)}} .mfd[data-v="2"] .resband.flash{animation:flash 1s ease-out} .mfd[data-v="2"] .controls{display:flex;flex-direction:column;box-shadow:var(--sh1); border:1px solid var(--line);border-radius:10px;background:var(--card)} .mfd[data-v="2"] .crow{display:flex;flex-wrap:wrap;align-items:stretch} .mfd[data-v="2"] .grp{display:flex;align-items:center;justify-content:center;gap:7px; padding:7px 9px;min-width:0;flex:1 0 auto} .mfd[data-v="2"] .grp + .grp{border-left:1px solid var(--line)} .mfd[data-v="2"] .lab{font:700 9px var(--ui);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);flex:none} .mfd[data-v="2"] .seg{display:flex;background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px} .mfd[data-v="2"] .seg button{border:0;background:transparent;color:var(--mut);cursor:pointer; font:500 12.5px/1 var(--ui);padding:0 8px;height:26px;border-radius:6px;white-space:nowrap; display:inline-flex;align-items:center;gap:5px} .mfd[data-v="2"] .seg button[aria-pressed="true"]{background:var(--on);color:#bfe9e0} .mfd[data-v="2"] .seg button:hover{color:var(--text)} .mfd[data-v="2"] .cbadge{background:#2c5b53;color:#8fd8cc;border-radius:999px;padding:0 4px; font:700 9px/13px var(--ui);min-width:13px;text-align:center} .mfd[data-v="2"] .seg button[aria-pressed="true"] .cbadge{background:var(--accent);color:#04231f} .mfd[data-v="2"] .dd{position:relative} .mfd[data-v="2"] .ddbtn{display:inline-flex;align-items:center;justify-content:space-between;gap:7px; background:var(--sunk);border:1px solid var(--line);border-radius:8px;color:var(--text); cursor:pointer;font:500 12.5px/1 var(--ui);height:30px;padding:0 10px;min-width:60px; white-space:nowrap} .mfd[data-v="2"] .ddbtn:hover{border-color:var(--accent)} .mfd[data-v="2"] .ddbtn[aria-expanded="true"]{background:var(--on);border-color:#2c5b53;color:#bfe9e0} .mfd[data-v="2"] .ddbtn .car{color:var(--dim);font-size:10px} .mfd[data-v="2"] .ddmenu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:214px; background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px; box-shadow:0 12px 28px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:1px} .mfd[data-v="2"] .ddmenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0; background:transparent;color:var(--mut);cursor:pointer;font:500 12.5px var(--ui); padding:7px 9px;border-radius:6px} .mfd[data-v="2"] .ddmenu button:hover{background:var(--sunk);color:var(--text)} .mfd[data-v="2"] .ddmenu button[aria-checked="true"]{background:var(--on);color:#bfe9e0} .mfd[data-v="2"] .ddmenu .sw{width:7px;height:7px;border-radius:50%;flex:none} .mfd[data-v="2"] .ddmenu .pro{margin-left:auto;font:700 9.5px var(--ui);letter-spacing:.06em;color:var(--s-research)} .mfd[data-v="2"] .ddsep{height:1px;background:var(--line);margin:5px 2px} .mfd[data-v="2"] .ddhead{font:700 9.5px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim); padding:6px 9px 3px} .mfd[data-v="2"] .flow{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px; background:var(--card);overflow:hidden;box-shadow:var(--sh2)} .mfd[data-v="2"] .flowhead{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line); background:var(--sunk);flex-wrap:wrap} .mfd[data-v="2"] .flowhead h4{font-size:12.5px;font-weight:600} .mfd[data-v="2"] .flowhead .count{font:400 11.5px var(--mono);color:var(--dim)} .mfd[data-v="2"] .flowhead .fresh{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10.5px; color:var(--dim);white-space:nowrap} .mfd[data-v="2"] .flowbody{max-height:var(--flow-h,436px);overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:#39424f transparent} .mfd[data-v="2"] .flowbody.expanded{max-height:none;overflow:visible} .mfd[data-v="2"] .flowbody::-webkit-scrollbar{width:9px} .mfd[data-v="2"] .flowbody::-webkit-scrollbar-thumb{background:#39424f;border-radius:5px; border:3px solid var(--card)} .mfd[data-v="2"] .flowbody::-webkit-scrollbar-track{background:transparent} .mfd[data-v="2"] .flowbody:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .mfd[data-v="2"] .flowfoot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 13px; border-top:1px solid var(--line);background:var(--sunk);font-size:11.5px;color:var(--dim)} .mfd[data-v="2"] .flowfoot b{color:var(--mut);font-weight:600;font-variant-numeric:tabular-nums} .mfd[data-v="2"] .flowfoot .sevdot{width:6px;height:6px;border-radius:50%;flex:none} .mfd[data-v="2"] .flowfoot .sevdot.c{background:var(--s-risk)} .mfd[data-v="2"] .flowfoot .sevdot.i{background:var(--s-markets)} .mfd[data-v="2"] .flowfoot .grow{margin-left:auto;display:flex;gap:7px} .mfd[data-v="2"] .live-dot{width:6px;height:6px;border-radius:50%;background:var(--up);flex:none} @media (prefers-reduced-motion:no-preference){ .mfd[data-v="2"] .live-dot{animation:bp 2.6s ease-in-out infinite} @keyframes bp{0%,100%{opacity:1}50%{opacity:.3}} } .mfd[data-v="2"] .row{display:grid;grid-template-columns:3px 1fr auto;border-bottom:1px solid var(--line2); cursor:pointer;transition:background .12s,box-shadow .12s;position:relative} .mfd[data-v="2"] .row:last-child{border-bottom:0} .mfd[data-v="2"] .row:hover{background:rgba(110,168,254,.05);box-shadow:inset 3px 0 0 rgba(110,168,254,.35)} .mfd[data-v="2"] .row:hover .open{opacity:1} .mfd[data-v="2"] .row .sev{background:var(--line)} .mfd[data-v="2"] .row[data-imp="2"] .sev{background:var(--s-risk)} .mfd[data-v="2"] .row[data-imp="1"] .sev{background:var(--s-markets)} .mfd[data-v="2"] .row .body{padding:10px 0 10px 11px;display:flex;flex-direction:column;gap:3px;min-width:0} .mfd[data-v="2"] .row .meta{padding:10px 12px 10px 0;display:flex;align-items:center;gap:11px;white-space:nowrap} .mfd[data-v="2"] .title{font-size:13.5px;font-weight:500;letter-spacing:-.005em;overflow-wrap:anywhere; display:flex;align-items:baseline;gap:7px} .mfd[data-v="2"] .title .bw{color:var(--s-research);font-size:10px} .mfd[data-v="2"] .title .trig{font-size:11.5px;color:var(--dim);font-weight:400} .mfd[data-v="2"] .title .trig::before{content:"· ";color:var(--line)} .mfd[data-v="2"] .verd{font:700 9.5px var(--ui);letter-spacing:.06em;text-transform:uppercase; border-radius:4px;padding:2px 6px;border:1px solid;white-space:nowrap} .mfd[data-v="2"] .verd.rich{color:var(--dn);border-color:#5a2c2c;background:rgba(248,113,113,.09)} .mfd[data-v="2"] .verd.cheap{color:var(--up);border-color:#2c5b43;background:rgba(52,211,153,.09)} .mfd[data-v="2"] .verd.fair{color:var(--mut);border-color:var(--line);background:var(--sunk)} .mfd[data-v="2"] .sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;font-size:11.5px;color:var(--dim)} .mfd[data-v="2"] .sub .stream{font-weight:600} .mfd[data-v="2"] .s-markets{color:var(--s-markets)} .mfd[data-v="2"] .s-risk{color:var(--s-risk)} .mfd[data-v="2"] .s-macro{color:var(--s-macro)} .mfd[data-v="2"] .s-live{color:var(--s-live)} .mfd[data-v="2"] .s-research{color:var(--s-research)} .mfd[data-v="2"] .sub .cad{color:var(--s-live);font-weight:600} .mfd[data-v="2"] .prov{display:flex;gap:7px;font-size:11.5px;color:var(--mut);border-left:2px solid var(--line); padding-left:8px;margin-top:2px} .mfd[data-v="2"] .prov b{color:#c8d4e0;font-weight:500} .mfd[data-v="2"] .fstrip{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px;padding-left:8px; border-left:2px solid var(--line)} .mfd[data-v="2"] .fcell{display:flex;align-items:center;gap:7px;min-width:0} .mfd[data-v="2"] .fnm{font-size:10.5px;color:var(--dim);white-space:nowrap} .mfd[data-v="2"] .fcell.wide .fnm{color:var(--mut);font-weight:500} .mfd[data-v="2"] .fbar{display:block;width:34px;height:4px;border-radius:2px;background:var(--line2); overflow:hidden;flex:none} .mfd[data-v="2"] .fbar i{display:block;height:100%;border-radius:2px} .mfd[data-v="2"] .fbar i.dn{background:var(--dn)} .mfd[data-v="2"] .fbar i.up{background:var(--up)} .mfd[data-v="2"] .fmore{font-size:10.5px;color:var(--dim);align-self:center} .mfd[data-v="2"] .prov.byline{align-items:center;gap:8px;flex-wrap:wrap} .mfd[data-v="2"] .prov.byline .au{color:var(--text);font-weight:500} .mfd[data-v="2"] .prov.byline .track{font:400 11px var(--mono);color:var(--dim)} .mfd[data-v="2"] .prov.byline .track:not(:empty)::before{content:"· ";color:var(--line)} .mfd[data-v="2"] .foll{border:1px solid #2c5b53;background:rgba(22,179,160,.1);color:#8fd8cc; border-radius:5px;cursor:pointer;font:600 10.5px var(--ui);padding:2px 8px} .mfd[data-v="2"] .foll:hover{border-color:var(--accent);color:#bfe9e0} .mfd[data-v="2"] .rel{display:inline-flex;align-items:center;gap:5px;border-radius:5px;padding:2px 7px; font:600 10.5px var(--ui);border:1px solid transparent} .mfd[data-v="2"] .rel.pos{background:rgba(22,179,160,.13);color:#7fd6c7;border-color:#2c5b53} .mfd[data-v="2"] .rel.int{background:rgba(110,168,254,.11);color:#9dc4fe;border-color:#2d4a6d} .mfd[data-v="2"] .prorow{font:700 9px var(--ui);letter-spacing:.07em;color:var(--s-research); border:1px solid #5c4d21;border-radius:4px;padding:1.5px 5px} .mfd[data-v="2"] .conf{display:inline-flex;align-items:center;gap:2px;flex:none} .mfd[data-v="2"] .conf i{width:4px;height:4px;border-radius:50%;background:var(--line);display:block} .mfd[data-v="2"] .conf i.on{background:var(--s-research)} .mfd[data-v="2"] .conf .cl{font:400 9.5px var(--mono);color:var(--dim);margin-left:3px} .mfd[data-v="2"] .win{font:400 10px var(--mono);color:var(--dim);border:1px solid var(--line); border-radius:4px;padding:1px 5px;flex:none} .mfd[data-v="2"] .rowmenu{position:relative;flex:none} .mfd[data-v="2"] .dots{border:0;background:transparent;color:var(--dim);cursor:pointer;font-size:14px; line-height:1;padding:2px 4px;border-radius:5px;opacity:.4;transition:opacity .12s} .mfd[data-v="2"] .row:hover .dots, .mfd[data-v="2"] .row:focus-within .dots{opacity:1} .mfd[data-v="2"] .dots:hover{background:var(--sunk);color:var(--text)} .mfd[data-v="2"] .rmenu{position:absolute;z-index:40;right:0;top:calc(100% + 4px);min-width:172px; background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:4px; box-shadow:var(--sh3);display:flex;flex-direction:column;gap:1px} .mfd[data-v="2"] .rmenu button{border:0;background:transparent;color:var(--mut);cursor:pointer;text-align:left; font:500 12px var(--ui);padding:6px 9px;border-radius:5px;white-space:nowrap} .mfd[data-v="2"] .rmenu button:hover{background:var(--sunk);color:var(--text)} .mfd[data-v="2"] .openbtn{opacity:.45;transition:opacity .12s;flex:none} .mfd[data-v="2"] .row:hover .openbtn, .mfd[data-v="2"] .row:focus-within .openbtn{opacity:1} .mfd[data-v="2"] .dirv{font:500 11.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--mut)} .mfd[data-v="2"] .dirv .up{color:var(--up)} .mfd[data-v="2"] .dirv .dn{color:var(--dn)} .mfd[data-v="2"] .open{opacity:.45;transition:opacity .12s;color:var(--accent);font-size:15px;line-height:1;flex:none} .mfd[data-v="2"] .row.locked{background:rgba(242,193,78,.035)} .mfd[data-v="2"] .row.locked .title{color:var(--mut)} .mfd[data-v="2"] .row.locked .sev{box-shadow:inset 2px 0 0 #5c4d21} .mfd[data-v="2"] .lockmsg{font-size:11.5px;color:var(--dim);border-left:2px solid #5c4d21;padding-left:8px;margin-top:2px} .mfd[data-v="2"] .row.specimen{background:rgba(242,193,78,.04)} .mfd[data-v="2"] .specimark{font:700 9px var(--ui);letter-spacing:.07em;color:var(--s-research); border:1px solid #5c4d21;border-radius:4px;padding:1.5px 5px} .mfd[data-v="2"] .upsell{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:9px 13px; background:rgba(242,193,78,.06);border-top:1px solid #5c4d21} .mfd[data-v="2"] .upsell .tx{display:flex;flex-direction:column;gap:2px;flex:1 1 230px;min-width:0} .mfd[data-v="2"] .upsell b{font-size:12.5px;color:#f0dcae} .mfd[data-v="2"] .upsell span{font-size:11.5px;color:var(--mut)} .mfd[data-v="2"] .upsell .btn{margin-left:auto;border-color:#5c4d21;background:rgba(242,193,78,.1);color:#f0dcae} .mfd[data-v="2"] .btn.unlock{border-color:#5c4d21;background:rgba(242,193,78,.1);color:#f0dcae; opacity:.55;transition:opacity .12s} .mfd[data-v="2"] .row.locked:hover .unlock, .mfd[data-v="2"] .row.locked:focus-within .unlock{opacity:1} .mfd[data-v="2"] .btn.unlock:hover{border-color:var(--s-research)} .mfd[data-v="2"] a.btn.unlock, .mfd[data-v="2"] a.btn.pl{text-decoration:none} .mfd[data-v="2"] .lockmsg .lk{vertical-align:-1px;margin-right:3px} /* Teaser: a market the free viewer doesn't follow. Dashed edge, not the gold * of a locked row -- nothing here is paywalled, it is one Follow away. */ .mfd[data-v="2"] .row.teaser .sev{box-shadow:inset 2px 0 0 var(--line)} .mfd[data-v="2"] .row.teaser .title{color:var(--mut)} .mfd[data-v="2"] .whyline{font-size:11.5px;color:var(--dim);margin-top:2px} .mfd[data-v="2"] .tagnw{font:600 10.5px var(--ui);border-radius:5px;padding:2px 7px;flex:none; color:var(--dim);border:1px dashed var(--line)} .mfd[data-v="2"] .btn.follow6{border-color:#2c5b53;background:rgba(22,179,160,.1);color:#8fd8cc;flex:none} .mfd[data-v="2"] .btn.follow6:hover{border-color:var(--accent)} .mfd[data-v="2"] .btn.follow6.done{opacity:.6;cursor:default} .mfd[data-v="2"] .btn.pl{border-color:#5c4d21;color:#f0dcae;flex:none} .mfd[data-v="2"] .fnote{flex-basis:100%;font-size:11px;color:var(--mut);text-align:right} .mfd[data-v="2"] .fnote a{color:var(--accent)} .mfd[data-v="2"] .rail .mod li .follow6{margin-left:auto;padding:2px 8px} .mfd[data-v="2"] .since{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px; border:1px solid #5a3d22;border-radius:10px;background:rgba(251,146,60,.06); padding:8px 12px} .mfd[data-v="2"] .since .lead{display:flex;align-items:center;gap:7px;flex:none} .mfd[data-v="2"] .since .lead b{font-size:12.5px;color:#f4b183;font-weight:600;white-space:nowrap} .mfd[data-v="2"] .since .when{font:400 10.5px var(--mono);color:var(--dim);white-space:nowrap} .mfd[data-v="2"] .since .cluster{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap; border:1px solid var(--line);border-radius:8px;background:transparent; padding:3px 7px} .mfd[data-v="2"] .since .clab{font:700 9px var(--ui);letter-spacing:.08em;text-transform:uppercase; color:var(--mut);white-space:nowrap} .mfd[data-v="2"] .since .ar{color:var(--s-live);font-size:11px;margin-left:1px} .mfd[data-v="2"] .since .figs{display:flex;flex-wrap:wrap;gap:6px} .mfd[data-v="2"] .since .fig{border:1px solid var(--line);border-radius:6px;background:var(--sunk); padding:2.5px 7px;font:500 11.5px var(--ui);color:var(--mut);white-space:nowrap; cursor:pointer;transition:border-color .12s,background .12s} .mfd[data-v="2"] .since button.fig:hover{border-color:var(--s-live);color:var(--text)} .mfd[data-v="2"] .since button.fig.on{border-color:var(--s-live);background:rgba(251,146,60,.14);color:#f4b183} .mfd[data-v="2"] .since .fig:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mfd[data-v="2"] .since .clearbtn{border:0;background:transparent;color:var(--s-live);cursor:pointer; font:500 11.5px var(--ui);padding:2px 4px} .mfd[data-v="2"] .since .clearbtn:hover{text-decoration:underline} .mfd[data-v="2"] .since .fig b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)} .mfd[data-v="2"] .since .fig.crit b{color:var(--s-risk)} .mfd[data-v="2"] .since .fig.live b{color:var(--s-live)} .mfd[data-v="2"] .since .fig.mine b{color:#7fd6c7} .mfd[data-v="2"] .since .cluster + .cluster{margin-left:0} .mfd[data-v="2"] .since .btn{margin-left:auto;border-color:#5a3d22;background:rgba(251,146,60,.1);color:#f4b183} .mfd[data-v="2"] .since .btn:hover{border-color:var(--s-live)} .mfd[data-v="2"] .row.isnew{background:rgba(251,146,60,.05)} .mfd[data-v="2"] .newdot{width:6px;height:6px;border-radius:50%;background:var(--s-live);flex:none} @media (hover:none){ .mfd[data-v="2"] .dots, .mfd[data-v="2"] .openbtn, .mfd[data-v="2"] .open, .mfd[data-v="2"] .btn.unlock{opacity:1} } .mfd[data-v="2"] .empty{padding:24px 16px;text-align:center;color:var(--dim);font-size:12.5px} .mfd[data-v="2"] .empty b{color:var(--mut);font-weight:500;display:block;margin-bottom:4px} .mfd[data-v="2"] .mod{border:1px solid var(--line);border-radius:10px;background:var(--card); overflow:hidden;box-shadow:var(--sh1);transition:border-color .14s,box-shadow .14s} .mfd[data-v="2"] .mod:hover{border-color:#39424f;box-shadow:var(--sh2)} .mfd[data-v="2"] .mod > .mh{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent; color:var(--text);cursor:pointer;padding:10px 12px;font:600 12.5px var(--ui);text-align:left} .mfd[data-v="2"] .mod > .mh:hover{background:var(--sunk)} .mfd[data-v="2"] .mod > .mh .chev{color:var(--dim);font-size:10px;transition:transform .15s;flex:none} .mfd[data-v="2"] .mod[open] > .mh .chev{transform:rotate(90deg)} .mfd[data-v="2"] .mod > .mh .cue{margin-left:auto;font:500 10.5px var(--ui);color:var(--dim);flex:none} .mfd[data-v="2"] .mod > .mh .cue[data-live]{display:inline-flex;align-items:center;gap:6px;color:#7fd6c7} .mfd[data-v="2"] .mod > .mh .cue[data-live]::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--up)} @media (prefers-reduced-motion:no-preference){ .mfd[data-v="2"] .mod > .mh .cue[data-live]::before{animation:bp 2.6s ease-in-out infinite} } .mfd[data-v="2"] .mod .mb{border-top:1px solid var(--line)} .mfd[data-v="2"] .mod ul{margin:0;padding:0;list-style:none} .mfd[data-v="2"] .mod li{display:flex;align-items:center;gap:9px;padding:7px 12px;border-bottom:1px solid var(--line2); font-size:12.5px;min-width:0;cursor:pointer} .mfd[data-v="2"] .mod li:last-child{border-bottom:0} .mfd[data-v="2"] .mod li:hover{background:var(--sunk)} .mfd[data-v="2"] .mod li .nm{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto} .mfd[data-v="2"] .mod li .spark{flex:none} .mfd[data-v="2"] .meta .spark{flex:none} .mfd[data-v="2"] .mod li .vl{flex:none;font:500 11.5px var(--mono);font-variant-numeric:tabular-nums;min-width:52px; text-align:right} .mfd[data-v="2"] .mod li .vl.up{color:var(--up)} .mfd[data-v="2"] .mod li .vl.dn{color:var(--dn)} .mfd[data-v="2"] .stackhead{display:flex;align-items:center;gap:9px;padding:1px 2px 0} .mfd[data-v="2"] .stackhead.sub{margin-top:6px} .mfd[data-v="2"] .colmeta{display:flex;align-items:center;gap:9px;height:20px;padding:0 3px} .mfd[data-v="2"] .colmeta .kick{font:700 10px var(--ui);letter-spacing:.11em;text-transform:uppercase; color:var(--accent)} .mfd[data-v="2"] .colmeta .stamp{margin-left:auto;font-size:11px;color:var(--dim);white-space:nowrap} .mfd[data-v="2"] .colmeta .fresh{display:inline-flex;align-items:center;gap:6px;font:400 10.5px var(--mono); color:var(--dim)} .mfd[data-v="2"] .colmeta .allbtn{margin-left:auto;border:0;background:transparent;color:var(--accent); cursor:pointer;font:500 11px var(--ui);padding:2px 0} .mfd[data-v="2"] .colmeta .allbtn:hover{text-decoration:underline} .mfd[data-v="2"] .colmeta .allbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mfd[data-v="2"] .stackhead.sub span:first-child{font:700 10px var(--ui);letter-spacing:.12em; text-transform:uppercase;color:var(--mut)} .mfd[data-v="2"] .stackhead .fresh{display:inline-flex;align-items:center;gap:6px;font:400 10px var(--mono); color:var(--dim)} .mfd[data-v="2"] .stackhead .allbtn{margin-left:auto;border:0;background:transparent;color:var(--accent); cursor:pointer;font:500 11px var(--ui);padding:2px 0} .mfd[data-v="2"] .stackhead .allbtn:hover{text-decoration:underline} .mfd[data-v="2"] .mod li .spark{opacity:.55} .mfd[data-v="2"] .volbar{flex:none;width:40px;height:5px;border-radius:3px;background:var(--line2); overflow:hidden;display:inline-block} .mfd[data-v="2"] .volbar > span{display:block;height:100%;border-radius:3px; background:linear-gradient(90deg,var(--s-markets),var(--warn))} .mfd[data-v="2"] .rtag{flex:none;font:700 8.5px var(--ui);letter-spacing:.06em;text-transform:uppercase; border-radius:3px;padding:1.5px 5px;border:1px solid} .mfd[data-v="2"] .rtag.wide{color:var(--dn);border-color:#5a2c2c;background:rgba(248,113,113,.08)} .mfd[data-v="2"] .rtag.tight{color:var(--up);border-color:#2c5b43;background:rgba(52,211,153,.08)} .mfd[data-v="2"] .mod .mhead{display:flex;align-items:baseline;gap:8px;padding:7px 12px 4px; font:700 9px var(--ui);letter-spacing:.11em;text-transform:uppercase;color:var(--dim)} .mfd[data-v="2"] .mod .mhead .tf{margin-left:auto;font:400 9.5px var(--mono);letter-spacing:0; text-transform:none;color:#55606d} .mfd[data-v="2"] .mod li .lv{flex:none;font:400 11px var(--mono);color:var(--dim); font-variant-numeric:tabular-nums;min-width:44px;text-align:right} .mfd[data-v="2"] .mod li .nm{flex:1 1 auto} .mfd[data-v="2"] .mod .mempty{padding:12px;font-size:12px;color:var(--dim)} .mfd[data-v="2"] .mod .mempty b{color:var(--mut);font-weight:500;display:block;margin-bottom:3px} .mfd[data-v="2"] .mod .mempty .hl{color:#8fd8cc;font-weight:500} .mfd[data-v="2"] .mod .mfoot{padding:8px 12px;border-top:1px solid var(--line2);display:flex;gap:8px;flex-wrap:wrap} .mfd[data-v="2"] .resband{border:1px solid var(--line);border-left:3px solid var(--s-research);border-radius:10px; background:var(--card);overflow:hidden} .mfd[data-v="2"] .resband .rh{display:flex;align-items:center;gap:9px;padding:10px 13px; border-bottom:1px solid var(--line);flex-wrap:wrap} .mfd[data-v="2"] .resband .rh .kick{font:700 10px var(--ui);letter-spacing:.11em;text-transform:uppercase; color:var(--s-research)} .mfd[data-v="2"] .resband .rh .tx{font-size:12.5px;color:var(--mut)} .mfd[data-v="2"] .resband .rh .tx b{color:var(--text);font-weight:600} .mfd[data-v="2"] .resband .rh .hl{color:#8fd8cc;font-weight:500} .mfd[data-v="2"] .resband .rh .btn{margin-left:auto} .mfd[data-v="2"] .reslist{display:grid;grid-template-columns:repeat(3,1fr)} .mfd[data-v="2"] .rescard{padding:11px 13px;border-right:1px solid var(--line2);display:flex;flex-direction:column; gap:5px;cursor:pointer;min-width:0} .mfd[data-v="2"] .rescard:last-child{border-right:0} .mfd[data-v="2"] a.rescard{color:inherit;text-decoration:none} .mfd[data-v="2"] a.rescard .rt{color:var(--text)} /* Research as a list: one report per line, title left, meta right. */ .mfd[data-v="2"] .resband .reslist{display:flex;flex-direction:column} .mfd[data-v="2"] .resband .rescard{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px; padding:9px 13px;border-right:0;border-top:1px solid var(--line2);text-align:left} .mfd[data-v="2"] .resband .rescard .rt{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mfd[data-v="2"] .resband .rescard .rm{flex:none;flex-wrap:nowrap;white-space:nowrap} @media (max-width:640px){ .mfd[data-v="2"] .resband .rescard{flex-direction:column;gap:3px} .mfd[data-v="2"] .resband .rescard .rt{white-space:normal} } .mfd[data-v="2"] .rescard:hover{background:var(--sunk)} .mfd[data-v="2"] .rescard .rt{font-size:13px;font-weight:500;letter-spacing:-.005em} .mfd[data-v="2"] .rescard .rm{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--dim);flex-wrap:wrap} .mfd[data-v="2"] .spec{display:flex;flex-direction:column;gap:13px} .mfd[data-v="2"] .spec h2{font-size:18px;font-weight:600;letter-spacing:-.01em} .mfd[data-v="2"] .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:11px} .mfd[data-v="2"] .layers.two{grid-template-columns:repeat(2,1fr)} .mfd[data-v="2"] .lay{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:13px 14px; display:flex;flex-direction:column;gap:7px;position:relative} .mfd[data-v="2"] .lay::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;border-radius:10px 0 0 10px} .mfd[data-v="2"] .lay.l1::before{background:var(--s-markets)} .mfd[data-v="2"] .lay.l2::before{background:var(--accent)} .mfd[data-v="2"] .lay.l3::before{background:var(--s-live)} .mfd[data-v="2"] .lay .n{font:700 10px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .mfd[data-v="2"] .lay h3{font-size:14px;font-weight:600} .mfd[data-v="2"] .lay p{margin:0;font-size:12.5px;color:var(--mut)} .mfd[data-v="2"] .lay .t{font-family:var(--mono);font-size:11px;color:var(--accent)} .mfd[data-v="2"] .notes{display:grid;grid-template-columns:repeat(2,1fr);gap:11px} .mfd[data-v="2"] .note{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:12px 14px; display:flex;flex-direction:column;gap:5px} .mfd[data-v="2"] .note h4{font-size:12.5px;font-weight:600} .mfd[data-v="2"] .note p{margin:0;font-size:12px;color:var(--mut)} .mfd[data-v="2"] .note code{color:#a9c4d6} .mfd[data-v="2"] .note.warn{border-color:#5a3d22;background:rgba(251,146,60,.05)} .mfd[data-v="2"] .note.warn h4{color:#f4b183} .mfd[data-v="2"] .note.keep{border-color:#2c5b53;background:rgba(22,179,160,.05)} .mfd[data-v="2"] .note.keep h4{color:#8fd8cc} @media (max-width:1020px){ .mfd[data-v="2"] .cols{grid-template-columns:1fr} } @media (max-width:860px){ .mfd[data-v="2"] .herogrid{grid-template-columns:1fr} .mfd[data-v="2"] .layers, .mfd[data-v="2"] .notes{grid-template-columns:1fr} .mfd[data-v="2"] .reslist{grid-template-columns:1fr} .mfd[data-v="2"] .rescard{border-right:0;border-bottom:1px solid var(--line2)} .mfd[data-v="2"] .sitenav .links, .mfd[data-v="2"] .searchwrap{margin-left:0} } @media (max-width:560px){ .mfd[data-v="2"] .row{grid-template-columns:3px 1fr} .mfd[data-v="2"] .row .meta{grid-column:2;padding:0 0 10px 11px} } /* --------------------------------------------------------------------------- * Global View hero. * * These rules live in research-page.css, which the dashboard does not load, so * the hero arrived as unstyled text. Copied here scoped rather than enqueuing * that whole stylesheet, whose other rules would land on the dashboard * uninvited. * ------------------------------------------------------------------------ */ .mfd[data-v="2"] .mf-gv-hero{display:flex;justify-content:space-between;align-items:center;gap:18px; flex-wrap:wrap;background:#12202a;border:1px solid rgba(22,179,160,.4); border-radius:12px;padding:18px 22px;margin:0 0 1.5rem} .mfd[data-v="2"] .mf-gv-hero.compact{padding:15px 18px} .mfd[data-v="2"] .mf-gv-in{flex:1;min-width:0} .mfd[data-v="2"] .mf-gv-kicker{font:700 11px/1 inherit;letter-spacing:.09em;text-transform:uppercase; color:#16b3a0} .mfd[data-v="2"] .mf-gv-hero h2{font-size:19px;font-weight:700;margin:6px 0 0;color:#e6edf3} .mfd[data-v="2"] .mf-gv-hero p{font-size:14px;line-height:1.55;color:#c7cdd6;margin:7px 0 0} .mfd[data-v="2"] .mf-gv-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px} .mfd[data-v="2"] .mf-gv-chip{font-size:11.5px;padding:3px 10px;border-radius:12px; background:#0d1520;border:1px solid #2a313c;color:#9aa7b4;white-space:nowrap} .mfd[data-v="2"] .mf-gv-chip b{font-weight:700} .mfd[data-v="2"] .mf-gv-chip.up{border-color:rgba(52,211,153,.5);color:#34d399} .mfd[data-v="2"] .mf-gv-chip.dn{border-color:rgba(248,113,113,.5);color:#f87171} .mfd[data-v="2"] .mf-gv-models{display:inline-block;margin-top:9px;font-size:11.5px;color:#6b7684} .mfd[data-v="2"] .mf-gv-cta{flex:none;align-self:center;white-space:nowrap;padding:10px 18px; border-radius:8px;background:#16b3a0;color:#0d1520!important; font:700 13.5px/1 inherit;text-decoration:none} .mfd[data-v="2"] .mf-gv-cta:hover{background:#1ac9b4;color:#0d1520!important} .mfd[data-v="2"] .mf-gv-cta.locked{background:transparent;border:1px solid #16b3a0;color:#16b3a0!important} .mfd[data-v="2"] .mf-gv-cta.locked:hover{background:rgba(22,179,160,.12);color:#16b3a0!important} .mfd[data-v="2"] .mf-gv-raw{white-space:pre-wrap;font-size:13px;line-height:1.6} @media(max-width:640px){ .mfd[data-v="2"] .mf-gv-hero{flex-direction:column;align-items:stretch} .mfd[data-v="2"] .mf-gv-cta{text-align:center;align-self:stretch;padding:12px} } /* The mockup defines --s-strat but never writes the rule that uses it, so strategy rows showed an uncoloured stream label. Same treatment as the other five. */ .mfd[data-v="2"] .s-strat{color:var(--s-strat)} /* --------------------------------------------------------------------------- * Theme utility collisions. * * Scoping this stylesheet to .mfd[data-v="2"] stops the design leaking into * the site. It does not stop the site leaking into the design: neve's * style-main-new.min.css styles .row, .title and .btn as global utilities, and * the mockup uses those same names for its own components. Specificity means * the design wins every property it sets -- and loses every property it does * not. * * Only the properties neve sets and the design does not are reset here, so * nothing above is overridden. * * .row margin:0 -15px pulled every row 15px left, and .flow's * overflow:hidden then clipped the 3px severity * stripe clean off. That is the missing bar. * .title line-height and text-transform, inherited from the h1 custom * properties, which have nothing to do with a row. * ------------------------------------------------------------------------ */ .mfd[data-v="2"] .row{margin:0} .mfd[data-v="2"] .title{line-height:inherit;text-transform:none} /* --------------------------------------------------------------------------- * Row alignment in the scrolling feed. * * .flowbody is a fixed viewport, so a scroll can stop anywhere and slice a row * through the middle of its title. A half-cut headline reads as broken markup * rather than as "there is more below". * * Proximity, not mandatory: rows vary in height (a factor row carries its * comparison strip, a strategy row its reason line), and mandatory snapping on * variable heights fights the reader. Proximity settles on an edge when the * scroll ends near one and otherwise leaves it alone. * ------------------------------------------------------------------------ */ .mfd[data-v="2"] .flowbody{scroll-snap-type:y proximity;scroll-padding-top:0} .mfd[data-v="2"] .flowbody .row{scroll-snap-align:start} .mfd[data-v="2"] .flowbody.expanded{scroll-snap-type:none} /* --------------------------------------------------------------------------- * Heading reset. * * The mockup resets heading margins in one rule whose selector list begins * with h1. The generator that scoped this file drops page-chrome selectors, * and it dropped the whole rule rather than just the h1 part -- taking h2, h3 * and h4 with it. * * Without it, neve's h1..h6{margin-bottom:30px} applies to the "Signals" h4 * inside .flowhead. In a centred flex row a 30px bottom margin inflates the * line box, which is what pushed the count onto a second line under the title. * ------------------------------------------------------------------------ */ .mfd[data-v="2"] h2, .mfd[data-v="2"] h3, .mfd[data-v="2"] h4{margin:0;text-wrap:balance} /* --------------------------------------------------------------------------- * Filters: a bar on desktop, a sheet on a phone. * * Stacked, the four labelled groups took more vertical space than the first * two signals -- the controls pushed the thing they control off the screen. * Below 760px they collapse behind a button on the Signals header: attached to * the list it filters, and within thumb reach rather than at the top of a * scroll. * ------------------------------------------------------------------------ */ .mfd[data-v="2"] .fbtn{display:none} .mfd[data-v="2"] .controls > .grab{display:none} .mfd[data-v="2"] .controls > .btn.wide{display:none} .mfd[data-v="2"] .v2scrim{display:none} @media (max-width:760px){ .mfd[data-v="2"] .fbtn{flex:none;margin-left:auto;display:inline-flex; align-items:center;gap:6px;border:1px solid var(--line);background:var(--card); color:var(--mut);border-radius:8px;padding:0 10px;min-height:32px; font:500 12px var(--ui);cursor:pointer} .mfd[data-v="2"] .fbtn:active{background:var(--sunk);color:var(--text)} .mfd[data-v="2"] .fbtn .n{background:var(--accent);color:#04231f;border-radius:999px; padding:0 5px;font:700 10px/15px var(--ui);min-width:15px;text-align:center} /* The bar is gone until asked for. */ .mfd[data-v="2"] .controls{display:none} /* Inside the dialog the bar is just a column; the dialog does the positioning. */ .mfd[data-v="2"] .controls.sheetopen{display:flex;position:static;border:0; background:none;box-shadow:none;padding:0;gap:12px;width:100%} .mfd[data-v="2"] .controls.sheetopen > .grab{display:block;width:36px;height:4px; border-radius:2px;background:var(--line);align-self:center;flex:none} .mfd[data-v="2"] .controls.sheetopen > .btn.wide{display:block;width:100%} /* In a sheet the groups are stacked sections, not a row: the dividers and centring that made them read as one bar work against them here. */ .mfd[data-v="2"] .controls.sheetopen .crow{flex-direction:column;align-items:stretch;gap:2px} .mfd[data-v="2"] .controls.sheetopen .grp{justify-content:flex-start;flex-wrap:wrap; padding:8px 0;border-left:0;border-top:1px solid var(--line2)} .mfd[data-v="2"] .controls.sheetopen .crow > .grp:first-child{border-top:0} .mfd[data-v="2"] .controls.sheetopen .lab{min-width:84px} .mfd[data-v="2"] .v2scrim{display:block;position:fixed;inset:0;z-index:999; background:rgba(0,0,0,.5)} } /* --------------------------------------------------------------------------- * The filter sheet needs the viewport, not .mfd. * * flow.css sets `contain: layout style` on .mfd. `contain: layout` makes the * element a containing block for fixed-position descendants, so `bottom:0` on * the sheet resolved to the bottom of the whole dashboard -- several thousand * pixels below the fold -- rather than the bottom of the screen. The sheet was * opening correctly every time and landing off-screen. * * Containment is dropped only while the sheet is up, and only at the width * where the sheet exists, so the paint isolation flow.css wants is kept for * every other state. * ------------------------------------------------------------------------ */ @media (max-width:760px){ .mfd[data-v="2"].sheeting, .mfd[data-v="2"]:has(.controls.sheetopen){contain:none} } /* --------------------------------------------------------------------------- * Overlay portal. * * The sheet is moved here while open so no ancestor can act as its containing * block. It keeps the .mfd scope for the rules and the tokens, and this class * removes .mfd's own layout -- the padding, the container width, the 70vh * minimum and, above all, the containment that started this. * ------------------------------------------------------------------------ */ .mfd.v2portal{padding:0;margin:0;max-width:none;min-height:0;contain:none; background:none;font:inherit} .mfd.v2portal .controls{display:none} @media (max-width:760px){ .mfd.v2portal .controls.sheetopen{display:flex} } /* --------------------------------------------------------------------------- * The filter sheet is a in the top layer. * * As a fixed element inside the page it kept landing off-screen: any ancestor * with contain, transform, filter, perspective or will-change becomes the * containing block for a fixed child, and bottom:0 then means the bottom of * that element rather than of the screen. flow.css sets `contain: layout * style` on .mfd. The top layer sits outside page layout altogether, so no * ancestor can reach it -- the same reason the site's search modal works. * * NOTE the `inset` and `margin:0`: the UA styles a modal as * `inset:0; margin:auto` to centre it. Setting only some sides leaves the rest * in force and the auto margins absorb the slack, so the sheet drifts to the * middle. All four sides in one `inset`, and zero the margin. * ------------------------------------------------------------------------ */ dialog.v2portal{padding:0;margin:0;max-width:none;max-height:none;min-height:0; contain:none;border:0;background:none;color:var(--text);overflow:visible} dialog.v2portal::backdrop{background:rgba(0,0,0,.5)} dialog.v2portal[open]{display:block;position:fixed; inset:auto 0 0 0;width:100%; background:var(--panel);border-top:1px solid var(--line); border-radius:16px 16px 0 0;padding:10px 14px 18px; max-height:82vh;overflow-y:auto; box-shadow:0 -12px 32px rgba(0,0,0,.5)} dialog.v2portal[open] .controls{display:flex} dialog.v2portal .grab{display:block;width:36px;height:4px;border-radius:2px; background:var(--line);align-self:center;flex:none;margin-bottom:8px} dialog.v2portal .btn.wide{display:block;width:100%;margin-top:4px} dialog.v2portal .crow{flex-direction:column;align-items:stretch;gap:2px} dialog.v2portal .grp{justify-content:flex-start;flex-wrap:wrap;padding:8px 0; border-left:0;border-top:1px solid var(--line2)} dialog.v2portal .crow > .grp:first-child{border-top:0} dialog.v2portal .lab{min-width:84px} /* Above the breakpoint the sheet should never be reachable at all. */ @media (min-width:761px){ dialog.v2portal[open]{display:none} } /* --------------------------------------------------------------------------- * Clickable rows, and controls with nowhere to go. * * A row that navigates has to say so, or it is a trap that only rewards people * who try it. A row that does not navigate must not say so either -- the * default cursor is the honest signal that this one has no instrument page. * * The disabled Open signal buttons are macro, research, strategy and factor * rows: real events whose destinations do not exist yet. Shown greyed rather * than hidden, because a row with no action at all reads as broken, and * removing the button would make these rows quietly different from the rest. * ------------------------------------------------------------------------ */ .mfd[data-v="2"] .row{cursor:default} .mfd[data-v="2"] .row.haslink{cursor:pointer} .mfd[data-v="2"] .row.haslink:hover .title{color:var(--accent)} .mfd[data-v="2"] .btn[disabled], .mfd[data-v="2"] .btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none} .mfd[data-v="2"] a.openbtn{text-decoration:none;display:inline-flex; align-items:center;justify-content:center} /* =========================================================================== * Following page. * * Scoped to .mfwl2, tighter than the rest of this file. Both stylesheets load * on this page and the two mockups reuse several generic names -- .card, * .empty, .chead, .n -- for different components, so the scope is what keeps * the watchlist's rules off the feed and the feed's off the watchlist. * * Tokens are inherited from .mfd[data-v="2"] rather than redeclared: one place * to change a colour. * * Generated from flow-watchlist-following.html by build_wl_css.py -- edit the * mockup and regenerate rather than editing this block. * ======================================================================== */ .mfd[data-v="2"] .mfwl2 [hidden]{display:none!important} .mfd[data-v="2"] .mfwl2 h2, .mfd[data-v="2"] .mfwl2 h3, .mfd[data-v="2"] .mfwl2 h4{margin:0;text-wrap:balance} .mfd[data-v="2"] .mfwl2 code{font-family:var(--mono);font-size:.86em} .mfd[data-v="2"] .mfwl2 .frame{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden} .mfd[data-v="2"] .mfwl2 .framebar{display:flex;align-items:center;gap:9px;padding:8px 13px;background:var(--sunk); border-bottom:1px solid var(--line);font:400 11.5px var(--mono);color:var(--dim)} .mfd[data-v="2"] .mfwl2 .dot{width:8px;height:8px;border-radius:50%;background:var(--line)} .mfd[data-v="2"] .mfwl2 .sitenav{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap} .mfd[data-v="2"] .mfwl2 .sitenav .brand{font:700 17px var(--ui);letter-spacing:-.02em} .mfd[data-v="2"] .mfwl2 .sitenav .links{display:flex;gap:17px;flex-wrap:wrap;margin-left:auto} .mfd[data-v="2"] .mfwl2 .sitenav .links a{color:var(--mut);font:500 13px var(--ui);text-decoration:none} .mfd[data-v="2"] .mfwl2 .sitenav .links a[aria-current="page"]{color:var(--accent)} .mfd[data-v="2"] .mfwl2 .sections{display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:9px; background:var(--card);align-self:flex-start;flex-wrap:wrap} .mfd[data-v="2"] .mfwl2 .sections button{border:0;background:transparent;color:var(--mut);cursor:pointer; font:500 12.5px var(--ui);padding:6px 13px;border-radius:6px} .mfd[data-v="2"] .mfwl2 .sections button[aria-current="page"]{background:var(--on);color:#bfe9e0;font-weight:600} .mfd[data-v="2"] .mfwl2 .ptop{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .mfd[data-v="2"] .mfwl2 .ptop h2{font-size:20px;font-weight:600;letter-spacing:-.015em} .mfd[data-v="2"] .mfwl2 .ptop .sub{font-size:12.5px;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .ptop .sp{margin-left:auto;display:flex;gap:8px} .mfd[data-v="2"] .mfwl2 .btn{border:1px solid var(--line);background:var(--sunk);color:var(--text);border-radius:8px; padding:7px 13px;font:500 12.5px var(--ui);cursor:pointer} .mfd[data-v="2"] .mfwl2 .btn:hover{border-color:var(--accent)} .mfd[data-v="2"] .mfwl2 .btn.primary{background:var(--on);border-color:#1d4f6b;color:#bfe9e0} .mfd[data-v="2"] .mfwl2 .btn.mini{padding:4px 9px;font-size:11.5px} .mfd[data-v="2"] .mfwl2 .cols{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:14px;align-items:start} .mfd[data-v="2"] .mfwl2 .colA{display:flex;flex-direction:column;gap:12px;min-width:0} .mfd[data-v="2"] .mfwl2 .colB{display:flex;flex-direction:column;gap:12px;min-width:0} .mfd[data-v="2"] .mfwl2 .card{border:1px solid var(--line);border-radius:11px;background:var(--card); box-shadow:var(--sh1);overflow:hidden} .mfd[data-v="2"] .mfwl2 .chead{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line); background:var(--sunk);flex-wrap:wrap} .mfd[data-v="2"] .mfwl2 .chead h3{font-size:12.5px;font-weight:600} .mfd[data-v="2"] .mfwl2 .chead .n{font:400 11px var(--mono);color:var(--dim)} .mfd[data-v="2"] .mfwl2 .chead .sp{margin-left:auto;display:flex;gap:6px;align-items:center} .mfd[data-v="2"] .mfwl2 .kinds{display:flex;gap:5px;flex-wrap:wrap;padding:9px 13px;border-bottom:1px solid var(--line2)} .mfd[data-v="2"] .mfwl2 .kinds button{border:1px solid var(--line);background:var(--sunk);color:var(--mut); border-radius:999px;padding:4px 10px;font:500 11.5px var(--ui);cursor:pointer; display:inline-flex;align-items:center;gap:6px} .mfd[data-v="2"] .mfwl2 .kinds button[aria-pressed="true"]{background:var(--on);color:#bfe9e0;border-color:#2c5b53} .mfd[data-v="2"] .mfwl2 .kinds .c{font:700 10px var(--mono)} .mfd[data-v="2"] .mfwl2 .frow{display:grid;grid-template-columns:22px 1fr auto;gap:0 10px;align-items:center; padding:9px 13px;border-bottom:1px solid var(--line2)} .mfd[data-v="2"] .mfwl2 .frow:last-child{border-bottom:0} .mfd[data-v="2"] .mfwl2 .frow:hover{background:var(--sunk)} .mfd[data-v="2"] .mfwl2 .gl{font-size:13px;text-align:center;opacity:.85} .mfd[data-v="2"] .mfwl2 .fmain{display:flex;flex-direction:column;gap:2px;min-width:0} .mfd[data-v="2"] .mfwl2 .fname{font-size:13.5px;font-weight:500} .mfd[data-v="2"] .mfwl2 .fmeta{display:flex;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .kind{font:700 9px var(--ui);letter-spacing:.07em;text-transform:uppercase; border:1px solid var(--line);border-radius:4px;padding:1.5px 5px;color:var(--mut)} .mfd[data-v="2"] .mfwl2 .kind.country{color:#9dc4fe;border-color:#2d4a6d} .mfd[data-v="2"] .mfwl2 .kind.instrument{color:#7fd6c7;border-color:#2c5b53} .mfd[data-v="2"] .mfwl2 .kind.sector{color:#c3b0ff;border-color:#40396b} .mfd[data-v="2"] .mfwl2 .kind.strategy{color:#a8b0ff;border-color:#3b4080} .mfd[data-v="2"] .mfwl2 .kind.contributor{color:#f0dcae;border-color:#5c4d21} .mfd[data-v="2"] .mfwl2 .kind.factor{color:#8fd8cc;border-color:#2c5b53} .mfd[data-v="2"] .mfwl2 .fact{display:flex;align-items:center;gap:7px} .mfd[data-v="2"] .mfwl2 .rate{font:400 11px var(--mono);color:var(--dim);white-space:nowrap} .mfd[data-v="2"] .mfwl2 .sw{border:1px solid var(--line);background:var(--sunk);border-radius:999px;width:34px;height:20px; position:relative;cursor:pointer;flex:none} .mfd[data-v="2"] .mfwl2 .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%; background:var(--dim);transition:transform .14s,background .14s} .mfd[data-v="2"] .mfwl2 .sw[aria-checked="true"]{background:rgba(22,179,160,.2);border-color:#2c5b53} .mfd[data-v="2"] .mfwl2 .sw[aria-checked="true"]::after{transform:translateX(14px);background:var(--accent)} .mfd[data-v="2"] .mfwl2 .xb{border:0;background:transparent;color:var(--dim);cursor:pointer;font-size:15px; padding:2px 5px;border-radius:5px} .mfd[data-v="2"] .mfwl2 .xb:hover{color:var(--dn);background:rgba(248,113,113,.1)} .mfd[data-v="2"] .mfwl2 .addwrap{padding:11px 13px;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:8px} .mfd[data-v="2"] .mfwl2 .searchbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px; background:var(--sunk);padding:9px 11px} .mfd[data-v="2"] .mfwl2 .searchbox input{flex:1;border:0;background:transparent;color:var(--text);font:400 13px var(--ui); outline:none;min-width:0} .mfd[data-v="2"] .mfwl2 .searchbox input::placeholder{color:var(--dim)} .mfd[data-v="2"] .mfwl2 .closex{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line); background:var(--card);color:var(--mut);cursor:pointer;font:400 17px/1 var(--ui); display:inline-flex;align-items:center;justify-content:center; transition:background .12s,color .12s,border-color .12s} .mfd[data-v="2"] .mfwl2 .closex:hover{background:rgba(248,113,113,.12);color:var(--dn);border-color:#5a2c2c} .mfd[data-v="2"] .mfwl2 .closex:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mfd[data-v="2"] .mfwl2 .searchbox:focus-within{border-color:var(--accent)} .mfd[data-v="2"] .mfwl2 .results{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px; background:var(--sunk);overflow:hidden} .mfd[data-v="2"] .mfwl2 .rsec{font:700 9px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim); padding:7px 11px 3px} .mfd[data-v="2"] .mfwl2 .rrow{display:grid;grid-template-columns:20px 1fr auto;gap:9px;align-items:center; padding:7px 11px;border-top:1px solid var(--line2)} .mfd[data-v="2"] .mfwl2 .rrow:hover{background:var(--card)} .mfd[data-v="2"] .mfwl2 .rname{font-size:12.5px} .mfd[data-v="2"] .mfwl2 .rname small{display:block;color:var(--dim);font-size:11px} .mfd[data-v="2"] .mfwl2 .builder{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:10px 13px; border-bottom:1px solid var(--line2);background:var(--sunk)} .mfd[data-v="2"] .mfwl2 .builder select, .mfd[data-v="2"] .mfwl2 .builder input{background:var(--card);color:var(--text); border:1px solid var(--line);border-radius:7px;padding:6px 9px;font:500 12px var(--ui); min-height:30px} .mfd[data-v="2"] .mfwl2 .builder select:focus-visible, .mfd[data-v="2"] .mfwl2 .builder input:focus-visible{outline:2px solid var(--accent); outline-offset:1px} .mfd[data-v="2"] .mfwl2 .btn.primary.mini{background:var(--on);border-color:#1d4f6b;color:#bfe9e0} .mfd[data-v="2"] .mfwl2 .crow{display:grid;grid-template-columns:22px 1fr auto;gap:0 10px;align-items:center; padding:9px 13px;border-bottom:1px solid var(--line2)} .mfd[data-v="2"] .mfwl2 .crow:last-child{border-bottom:0} .mfd[data-v="2"] .mfwl2 .crow:hover{background:var(--sunk)} .mfd[data-v="2"] .mfwl2 .cmain{display:flex;flex-direction:column;gap:2px;min-width:0} .mfd[data-v="2"] .mfwl2 .crule{font-size:13px} .mfd[data-v="2"] .mfwl2 .crule b{font-weight:600} .mfd[data-v="2"] .mfwl2 .crule .op{color:var(--dim);font-weight:400} .mfd[data-v="2"] .mfwl2 .crule .val{font-family:var(--mono);font-size:12px;color:#9dc4fe} .mfd[data-v="2"] .mfwl2 .cwhen{font-size:11.5px;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .cstate{font:700 9px var(--ui);letter-spacing:.07em;text-transform:uppercase; border:1px solid;border-radius:4px;padding:2px 6px;white-space:nowrap} .mfd[data-v="2"] .mfwl2 .cstate.armed{color:#7fd6c7;border-color:#2c5b53;background:rgba(22,179,160,.08)} .mfd[data-v="2"] .mfwl2 .cstate.fired{color:var(--s-live);border-color:#5a3d22;background:rgba(251,146,60,.1)} .mfd[data-v="2"] .mfwl2 .cstate.due{color:#9dc4fe;border-color:#2d4a6d;background:rgba(110,168,254,.08)} .mfd[data-v="2"] .mfwl2 .cstate.paused{color:var(--dim);border-color:var(--line)} .mfd[data-v="2"] .mfwl2 .sugg{display:flex;flex-direction:column} .mfd[data-v="2"] .mfwl2 .sug{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center; padding:10px 13px;border-bottom:1px solid var(--line2)} .mfd[data-v="2"] .mfwl2 .sug:last-child{border-bottom:0} .mfd[data-v="2"] .mfwl2 .sug .why{font-size:11.5px;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .sug .why b{color:#8fd8cc;font-weight:500} .mfd[data-v="2"] .mfwl2 .grp{padding:11px 13px;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:8px} .mfd[data-v="2"] .mfwl2 .grp:last-child{border-bottom:0} .mfd[data-v="2"] .mfwl2 .glab{font:700 9.5px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .chips{display:flex;gap:6px;flex-wrap:wrap} .mfd[data-v="2"] .mfwl2 .chip{border:1px solid var(--line);background:var(--sunk);color:var(--mut);border-radius:999px; padding:5px 11px;font:500 12px var(--ui);cursor:pointer;display:inline-flex;align-items:center;gap:6px} .mfd[data-v="2"] .mfwl2 .chip[aria-pressed="true"]{background:var(--on);color:#bfe9e0;border-color:#2c5b53} .mfd[data-v="2"] .mfwl2 .chip[data-locked]{opacity:.85;cursor:not-allowed} .mfd[data-v="2"] .mfwl2 .chip .sw2{width:7px;height:7px;border-radius:50%} .mfd[data-v="2"] .mfwl2 .chip .lk{font-size:9px;opacity:.8} .mfd[data-v="2"] .mfwl2 .hint{font-size:11.5px;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .hint b{color:var(--mut);font-weight:500} .mfd[data-v="2"] .mfwl2 .arow{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line2)} .mfd[data-v="2"] .mfwl2 .arow:last-child{border-bottom:0} .mfd[data-v="2"] .mfwl2 .atext{display:flex;flex-direction:column;gap:2px;min-width:0} .mfd[data-v="2"] .mfwl2 .atext b{font-size:12.5px;font-weight:600} .mfd[data-v="2"] .mfwl2 .atext span{font-size:11.5px;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .arow .sp{margin-left:auto;display:flex;align-items:center;gap:8px} .mfd[data-v="2"] .mfwl2 .prot{font:700 9px var(--ui);letter-spacing:.07em;color:var(--s-research); border:1px solid #5c4d21;border-radius:4px;padding:1.5px 5px} .mfd[data-v="2"] .mfwl2 .saved{display:flex;flex-direction:column} .mfd[data-v="2"] .mfwl2 .srow{display:flex;gap:9px;align-items:baseline;padding:8px 13px;border-bottom:1px solid var(--line2); font-size:12.5px} .mfd[data-v="2"] .mfwl2 .srow:last-child{border-bottom:0} .mfd[data-v="2"] .mfwl2 .srow .src{font:400 10.5px var(--mono);color:var(--dim);flex:none} .mfd[data-v="2"] .mfwl2 .srow .tt{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mfd[data-v="2"] .mfwl2 .empty{padding:14px 13px;font-size:12.5px;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .empty b{display:block;color:var(--mut);font-weight:500;margin-bottom:3px} @media (max-width:980px){ .mfd[data-v="2"] .mfwl2 .cols{grid-template-columns:1fr} } /* A follow the engine has never spoken about. Stated, not hidden: the reader needs to know the silence is the coverage, not a fault. */ .mfd[data-v="2"] .mfwl2 .rate.quiet{color:var(--dim);font-style:italic} .mfd[data-v="2"] .mfwl2 .kind.macro{color:#9dc4fe;border-color:#2d4a6d} .mfd[data-v="2"] .mfwl2 .kind.other{color:var(--dim)} /* --------------------------------------------------------------------------- * Following page: vertical rhythm. * * The mockup got this from its demo wrapper, which the scoping generator drops * as page chrome -- correctly, but nothing replaced it, so the launch strip, * the title and the columns sat flush against each other. * * Matches the dashboard: 18px under the strip, then a column gap between the * page head and the cards. The two pages are one product and should breathe * the same way. * ------------------------------------------------------------------------ */ .mfd[data-v="2"] .mfwl2{display:flex;flex-direction:column;gap:16px;margin-top:18px} .mfd[data-v="2"] .mfwl2 .ptop{gap:12px;padding:0 2px} .mfd[data-v="2"] .mfwl2 .ptop h2{font-size:22px;font-weight:600;letter-spacing:-.02em} .mfd[data-v="2"] .mfwl2 .ptop .sub{color:var(--mut);font-size:13.5px} .mfd[data-v="2"] .mfwl2 .ptop .sp{margin-left:auto} /* A card's last group should not double its own bottom border. */ .mfd[data-v="2"] .mfwl2 .grp:last-child{border-bottom:0} /* -------------------------------------------------------------------------- * Write feedback * * Controls here move before the server answers, so the only states that need * drawing are the two where something is not yet settled: a row waiting on a * reply, and the line that appears when the reply is no. * ----------------------------------------------------------------------- */ /* Refusals only. A change that works says so by the control having moved, and * a confirmation toast for every switch would be noise on a settings page. */ .mfd[data-v="2"] .mfwl2 .wlmsg{margin:0 0 14px;padding:9px 13px;border-radius:9px; border:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent); color:var(--text);font:500 13px/1.45 var(--ui)} /* Plan limits: the market counter, paused rows, and the "replace which?" * picker shown when a follow would pass the limit. */ .mfd[data-v="2"] .mfwl2 .chead .mkt{font:500 11.5px var(--mono);color:var(--mut)} .mfd[data-v="2"] .mfwl2 .chead .sp{margin-left:auto;display:flex;align-items:center;gap:8px} .mfd[data-v="2"] .mfwl2 a.prot{text-decoration:none} .mfd[data-v="2"] .mfwl2 .frow.paused .fname{color:var(--dim)} .mfd[data-v="2"] .mfwl2 .ptag{font:500 10.5px var(--ui);color:var(--warn)} .mfd[data-v="2"] .mfwl2 .wlpick{margin:0 0 14px;padding:11px 13px;border-radius:9px; border:1px solid var(--line);background:var(--panel);font:500 13px/1.45 var(--ui)} .mfd[data-v="2"] .mfwl2 .wlpick p{margin:0 0 9px;color:var(--text)} .mfd[data-v="2"] .mfwl2 .wlpick .opts{display:flex;flex-wrap:wrap;gap:6px} .mfd[data-v="2"] .mfwl2 .wlpick .foot{display:flex;align-items:center;justify-content:space-between; gap:8px;margin-top:10px} /* Mid-request. Deliberately faint: the click has already been acknowledged by * the control moving, and this only says the server has not answered yet. */ .mfd[data-v="2"] .mfwl2 .going{opacity:.45;pointer-events:none;transition:opacity .12s ease} /* A followed suggestion. It stays on the list rather than vanishing -- the new * row is above and out of view, so the button is the only place the reader * finds out it worked. */ .mfd[data-v="2"] .mfwl2 .sug .btn.done{border-color:var(--accent);color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent);opacity:1} .mfd[data-v="2"] .mfwl2 .sug .btn[disabled]{cursor:default} @media (prefers-reduced-motion:reduce){ .mfd[data-v="2"] .mfwl2 .going{transition:none} } /* -------------------------------------------------------------------------- * The onboarding multi-select, on Flow's tokens. * * Same class names and same shape as #mf-onboarding-overlay .msx-*, because it * is presented to the reader as the same control; only the palette changes, * since that stylesheet is scoped to the overlay and never loads here. * ----------------------------------------------------------------------- */ .mfd[data-v="2"] .mfwl2 .msx{position:relative;margin:6px 0 8px} .mfd[data-v="2"] .mfwl2 .msx-btn{width:100%;display:flex;align-items:center; justify-content:space-between;gap:8px;background:var(--sunk);border:1px solid var(--line); border-radius:7px;color:var(--mut);font:500 12px var(--ui);padding:9px 11px; cursor:pointer;text-align:left} .mfd[data-v="2"] .mfwl2 .msx-btn:hover{border-color:var(--accent)} .mfd[data-v="2"] .mfwl2 .msx-btn.has{color:var(--text);border-color:var(--accent)} .mfd[data-v="2"] .mfwl2 .msx-btn svg{flex:none;transition:transform .15s} .mfd[data-v="2"] .mfwl2 .msx-btn[aria-expanded="true"] svg{transform:rotate(180deg)} .mfd[data-v="2"] .mfwl2 .msx-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mfd[data-v="2"] .mfwl2 .msx-panel{position:absolute;z-index:6;left:0;right:0;top:calc(100% + 4px); background:var(--card);border:1px solid var(--line);border-radius:7px;max-height:220px; overflow:auto;padding:5px;box-shadow:var(--sh3,0 14px 30px rgba(0,0,0,.5))} .mfd[data-v="2"] .mfwl2 .msx-panel[hidden]{display:none} .mfd[data-v="2"] .mfwl2 .msx-search{position:sticky;top:0;background:var(--card);padding:2px 2px 6px;z-index:1} .mfd[data-v="2"] .mfwl2 .msx-search input{width:100%;background:var(--sunk);border:1px solid var(--line); border-radius:5px;color:var(--text);font:400 12px var(--ui);padding:7px 9px} .mfd[data-v="2"] .mfwl2 .msx-search input::placeholder{color:var(--mut)} .mfd[data-v="2"] .mfwl2 .msx-search input:focus{outline:none;border-color:var(--accent)} .mfd[data-v="2"] .mfwl2 .msx-empty{padding:10px 9px;font-size:12px;color:var(--mut)} .mfd[data-v="2"] .mfwl2 .msx-tools{display:flex;justify-content:flex-end;padding:0 4px 4px} .mfd[data-v="2"] .mfwl2 .msx-all{background:none;border:0;color:var(--accent); font:600 11.5px var(--ui);cursor:pointer;padding:2px 4px;border-radius:4px} .mfd[data-v="2"] .mfwl2 .msx-all:hover{color:var(--text);background:var(--sunk)} .mfd[data-v="2"] .mfwl2 .msx-all:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .mfd[data-v="2"] .mfwl2 .msx-opt{display:flex;align-items:center;gap:9px;padding:7px 8px; border-radius:5px;font-size:12px;color:var(--text);cursor:pointer} .mfd[data-v="2"] .mfwl2 .msx-opt:hover{background:var(--sunk)} .mfd[data-v="2"] .mfwl2 .msx-opt input{appearance:none;-webkit-appearance:none;width:13px;height:13px; border-radius:3px;border:1px solid var(--line);background:var(--sunk);flex:none;position:relative; margin:0;cursor:pointer} .mfd[data-v="2"] .mfwl2 .msx-opt input:checked{background:var(--accent);border-color:var(--accent)} .mfd[data-v="2"] .mfwl2 .msx-opt input:checked::after{content:"";position:absolute;left:4px;top:1px; width:3px;height:6px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)} .mfd[data-v="2"] .mfwl2 .msx-pin{font:700 10px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase; color:var(--mut);padding:7px 8px 3px} .mfd[data-v="2"] .mfwl2 .msx-sep{height:1px;background:var(--line);margin:5px 4px} .mfd[data-v="2"] .mfwl2 .msx-opt[hidden],.mfd[data-v="2"] .mfwl2 .msx-pin[hidden], .mfd[data-v="2"] .mfwl2 .msx-sep[hidden],.mfd[data-v="2"] .mfwl2 .msx-all[hidden]{display:none} @media (prefers-reduced-motion:reduce){ .mfd[data-v="2"] .mfwl2 .msx-btn svg{transition:none} } /* The toolbar's .grp (align-items:center; justify-content:center) also matches * these groups, because .mfwl2 sits inside .mfd[data-v="2"]. The rule above * resets display and flex-direction but not those two, so every child was * shrinking to its content width and centring -- the dropdown could not fill * the column, and the labels and hints sat centred against the mockup, which * has no competing .grp and so gets stretch by default. */ .mfd[data-v="2"] .mfwl2 .grp{align-items:stretch;justify-content:flex-start} /* The panel is positioned against .msx, so if .msx is ever not full width the * dropdown is narrow too. Stated rather than relying on the parent. */ .mfd[data-v="2"] .mfwl2 .msx{width:100%} /* .card clips to its radius, which also clipped the open dropdown: the sectors * panel showed two rows and stopped at the card's edge, with the next card * painted over it. The card holding the panels opts out, and takes a stacking * context above its siblings so the panel is not covered by the card below. */ .mfd[data-v="2"] .mfwl2 .card.pops{overflow:visible} .mfd[data-v="2"] .mfwl2 .card.pops{position:relative;z-index:20} /* The panel is the tallest thing that opens here, and the sectors list is * short enough that capping it at 220px only ever hid rows for no reason. */ .mfd[data-v="2"] .mfwl2 .msx-panel{max-height:min(280px,60vh)} /* Squared controls ------------------------------------------------------- * * .chip, .kinds button and .sw were the only pills left; every other control * in these cards is already 4-7px, so the pills read as the exception rather * than the style. Appended rather than edited in place so the original design * values stay visible in the rule above. * --------------------------------------------------------------------- */ .mfd[data-v="2"] .mfwl2 .chip{border-radius:6px} .mfd[data-v="2"] .mfwl2 .kinds button{border-radius:6px} .mfd[data-v="2"] .mfwl2 .sw{border-radius:5px} /* The knob was centred only because .sw inherits padding:1px from a global * button rule, which made top:2px happen to sit 2px inside an 18px padding * box. Centring it against its own height instead holds regardless of the * track height or any padding that arrives later. */ .mfd[data-v="2"] .mfwl2 .sw::after{border-radius:3px;top:50%;transform:translateY(-50%)} .mfd[data-v="2"] .mfwl2 .sw[aria-checked="true"]::after{transform:translateY(-50%) translateX(14px)} /* --------------------------------------------------------------------------- * Following page, plan tiers (Phase 4). * * The list is grouped: your markets, what is always included, countries and * sectors, then everything else. ALWAYS ON means included for everyone; the * gold PLUS tag and dashed gold chips mean a paid feature -- the two never * share a style, so a lock is never mistaken for a feature that is simply on. * ------------------------------------------------------------------------ */ .mfd[data-v="2"] .mfwl2 .lgh{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:7px 13px;background:var(--sunk);border-bottom:1px solid var(--line2); font:700 9.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#9dc4fe} .mfd[data-v="2"] .mfwl2 .lgh .lgn{font:500 11px var(--ui);letter-spacing:0;text-transform:none;color:var(--dim);text-align:right} .mfd[data-v="2"] .mfwl2 .lgh a{color:#f0dcae} .mfd[data-v="2"] .mfwl2 .lgroup .empty{border-bottom:1px solid var(--line2)} .mfd[data-v="2"] .mfwl2 .hrow{display:grid;grid-template-columns:22px 1fr;gap:0 10px;align-items:center; padding:9px 13px;border-bottom:1px solid var(--line2)} .mfd[data-v="2"] .mfwl2 .aon{font:700 9px var(--ui);letter-spacing:.06em;color:#7fd6c7; border:1px solid #2c5b53;border-radius:4px;padding:1.5px 5px;margin-left:5px} .mfd[data-v="2"] .mfwl2 .fmeta .aon{margin-left:0} .mfd[data-v="2"] .mfwl2 .plusb{font:700 9px var(--ui);letter-spacing:.06em;color:var(--s-research); border:1px solid #5c4d21;border-radius:4px;padding:1.5px 5px;margin-left:5px} .mfd[data-v="2"] .mfwl2 .hint .plusb{margin:0 3px 0 0} .mfd[data-v="2"] .mfwl2 .plink{color:#f0dcae;font-weight:600} .mfd[data-v="2"] .mfwl2 .fam{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px} .mfd[data-v="2"] .mfwl2 .fam .f{font:600 10px var(--ui);padding:2px 6px;border-radius:4px; background:rgba(22,179,160,.12);color:#7fd6c7} .mfd[data-v="2"] .mfwl2 .fam .f.lk{background:transparent;border:1px dashed #5c4d21;color:#f0dcae;text-decoration:none} .mfd[data-v="2"] .mfwl2 .btn.danger{border-color:rgba(248,113,113,.55);color:#f87171} .mfd[data-v="2"] .mfwl2 .btn.upg{border-color:#5c4d21;background:rgba(242,193,78,.1);color:#f0dcae;text-decoration:none} .mfd[data-v="2"] .mfwl2 .ptop .btn.pl{text-decoration:none;margin-right:8px} .mfd[data-v="2"] .mfwl2 .riskgrp .glab{display:flex;justify-content:space-between;align-items:baseline} .mfd[data-v="2"] .mfwl2 .rword{font:600 12px var(--ui);letter-spacing:0;text-transform:none;color:#7fd6c7} .mfd[data-v="2"] .mfwl2 .rslider{display:flex;flex-direction:column;gap:4px} .mfd[data-v="2"] .mfwl2 .rslider input{width:100%;accent-color:var(--accent)} .mfd[data-v="2"] .mfwl2 .rends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Timezone setting (Following page, Interests). Same field look as the * country and sector pickers. */ .mfd[data-v="2"] .mfwl2 .tzctl{display:inline-flex;align-items:center;gap:6px;margin-right:8px;padding:0 4px 0 10px; border:1px solid var(--line);border-radius:8px;background:var(--sunk);color:var(--mut);height:34px;box-sizing:border-box} .mfd[data-v="2"] .mfwl2 .tzctl svg{flex:none;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .tznow{font:600 12.5px var(--mono);color:var(--text);font-variant-numeric:tabular-nums} .mfd[data-v="2"] .mfwl2 .tzsel{max-width:190px;border:0;background:transparent;color:var(--mut); font:500 12.5px var(--ui);padding:6px 4px;cursor:pointer} .mfd[data-v="2"] .mfwl2 .tzsel:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:5px} .mfd[data-v="2"] .mfwl2 .tzsel option{background:var(--panel);color:var(--text)} .mfd[data-v="2"] a.tzl{color:inherit;text-decoration:underline dotted;text-underline-offset:2px} @media (max-width:760px){.mfd[data-v="2"] .mfwl2 .tzsel{max-width:130px}} /* --------------------------------------------------------------------------- * Condition builder (Following page, Conditions card). * One panel under the header: item, rule, value. PLUS rules are gold and * locked; COMING SOON rules are dimmed and not selectable. * ------------------------------------------------------------------------ */ .mfd[data-v="2"] .mfwl2 .cbuild{display:flex;flex-direction:column;gap:8px;padding:12px 13px 13px; border-bottom:1px solid var(--line2);background:var(--sunk)} .mfd[data-v="2"] .mfwl2 .cbuild[hidden]{display:none} .mfd[data-v="2"] .mfwl2 .cbl{font:700 9.5px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .cbin{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px; background:var(--panel);color:var(--text);font:500 13px var(--ui);padding:8px 10px} .mfd[data-v="2"] .mfwl2 .cbstep{display:flex;flex-direction:column;gap:6px} .mfd[data-v="2"] .mfwl2 .cbstep[hidden]{display:none} .mfd[data-v="2"] .mfwl2 .cbrules{display:flex;flex-direction:column;gap:5px} .mfd[data-v="2"] .mfwl2 .cbr{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line); border-radius:8px;background:var(--panel);cursor:pointer;font-size:13px} .mfd[data-v="2"] .mfwl2 .cbr[hidden]{display:none} .mfd[data-v="2"] .mfwl2 .cbr:has(input:checked){border-color:var(--accent)} .mfd[data-v="2"] .mfwl2 .cbr input{accent-color:var(--accent);margin:0} .mfd[data-v="2"] .mfwl2 .cbr .cbt{flex:1;min-width:0} .mfd[data-v="2"] .mfwl2 .cbr .cbt i{font-style:normal;color:#9dc4fe} .mfd[data-v="2"] .mfwl2 .cbtag{font:700 9px var(--ui);letter-spacing:.06em;color:#7fd6c7;white-space:nowrap} .mfd[data-v="2"] .mfwl2 .cbr.paid{cursor:default;border-style:dashed;border-color:#5c4d21} .mfd[data-v="2"] .mfwl2 .cbr.paid .cbtag a{color:#f0dcae;text-decoration:none} .mfd[data-v="2"] .mfwl2 .cbr.soon{cursor:default;opacity:.55} .mfd[data-v="2"] .mfwl2 .cbr.soon .cbtag{color:var(--dim)} .mfd[data-v="2"] .mfwl2 .cbval{display:flex;align-items:center;gap:8px} .mfd[data-v="2"] .mfwl2 .cbval .cbin{max-width:110px} .mfd[data-v="2"] .mfwl2 #cbUnit{font-size:12.5px;color:var(--mut)} .mfd[data-v="2"] .mfwl2 .cbnote{margin:0;font-size:11.5px;color:var(--dim)} .mfd[data-v="2"] .mfwl2 .cbmsg{margin:0;font-size:12px;color:var(--warn)} .mfd[data-v="2"] .mfwl2 .cbfull{margin:0;padding:8px 10px;border:1px solid #5c4d21;border-radius:8px; background:rgba(242,193,78,.06);font-size:12.5px;color:var(--text)} .mfd[data-v="2"] .mfwl2 .cbfoot{display:flex;justify-content:flex-end;gap:8px} /* Setup summary after onboarding (27-flow-write.php mf_flow2_setup_summary_html) */ .mfsu-overlay{position:fixed;inset:0;z-index:100000;background:rgba(5,9,13,.78);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:40px 16px} .mfsu{width:100%;max-width:820px;box-sizing:border-box;background:#111a23;border:1px solid #243242;border-radius:14px;padding:28px 32px 24px;display:flex;flex-direction:column;gap:18px;color:#e5e7eb;box-shadow:0 24px 60px rgba(0,0,0,.5);font-size:14px;text-align:left} .mfsu *{box-sizing:border-box} .mfsu a{color:#16b3a0;text-decoration:none}.mfsu a:hover{color:#3fd4c0} .mfsu-top{display:flex;align-items:flex-start;gap:14px} .mfsu-ttl{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0} .mfsu-kick{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#16b3a0} .mfsu h2{margin:0;font-size:26px;font-weight:600;letter-spacing:-.01em;color:#e5e7eb;line-height:1.2} .mfsu h3{margin:0;font-size:14px;font-weight:600;color:#e5e7eb} .mfsu-sub{margin:0;font-size:12.5px;color:#9aa4b2} .mfsu-sub b{color:#e5e7eb;font-weight:600} .mfsu-plan{display:inline-flex;align-items:center;height:40px;padding:0 14px;box-sizing:border-box;border:1px solid #2c3b4c;border-radius:8px;font-size:13px;font-weight:600;color:#c9d1db;white-space:nowrap} /* !important: the theme styles every