/* The StockMap preview for signed-out visitors (gate-preview.js). Colours come from the dashboard's own tokens, so light
   and dark mode follow the page. */

/* Log in, where the signed-in chip sits */
#sm2-acct{position:absolute;top:14px;right:18px;z-index:40}
#sm2-acct .btn{box-shadow:var(--shadow);text-decoration:none}
@media (max-width:960px){#sm2-acct{top:68px;right:16px}}

/* Every feature page opens with its title, tabs and menus; everything under them is blurred behind the login card.
   Cut by id, so a page opened from a link is blurred from the first paint. Start Here stays readable. */
.sm2-guest #v-explore,.sm2-guest #v-watchlist,.sm2-guest #v-onepct,.sm2-guest #v-portfolio,.sm2-guest #v-feed,.sm2-guest #v-screener,.sm2-guest #v-compare,.sm2-guest #v-calendar{
  position:relative;max-height:1150px;overflow:clip}
.sm2-guest #v-explore::after,.sm2-guest #v-watchlist::after,.sm2-guest #v-onepct::after,.sm2-guest #v-portfolio::after,
.sm2-guest #v-feed::after,.sm2-guest #v-screener::after,.sm2-guest #v-compare::after,.sm2-guest #v-calendar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:280px;z-index:4;
  background:linear-gradient(to bottom,transparent,var(--main));pointer-events:none}
.sm2-guest #v-explore>:not(.vh):not(.sm2-lock),
.sm2-guest #v-watchlist>:not(.vh):not(.tabs):not(.sm2-lock),
.sm2-guest #v-onepct>:not(.smbar):not(.sm2-lock),
.sm2-guest #v-portfolio>:not(.vh):not(.sm2-lock),
.sm2-guest #v-feed>:not(.vh):not(#feed-f):not(.sm2-lock),
.sm2-guest #v-models>:not(.vh):not(.sm2-lock),
.sm2-guest #v-compare>:not(.vh):not(.sm2-lock),
.sm2-guest #v-calendar>:not(.vh):not(.cl-tabs):not(.cl-bar):not(.sm2-lock),
.sm2-guest #v-screener .scr>:not(#smenus):not(.sm2-lock){filter:blur(9px);opacity:.55;user-select:none;pointer-events:none}
.sm2-guest #sm-page,.sm2-guest #feed-list,.sm2-guest #board,.sm2-guest #wl-body{max-height:1000px;overflow:clip}   /* small blurred layers */

.sm2-lock{position:relative;z-index:6;height:0}
.sm2-box{position:absolute;left:50%;top:clamp(20px,5vh,48px);transform:translateX(-50%);box-sizing:border-box;width:min(480px,100%);
  text-align:center;background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:28px 24px 22px;
  box-shadow:0 18px 50px rgba(20,20,20,.14),var(--shadow)}
.sm2-box h3{margin:12px 0 6px;font-size:22px;line-height:1.25;letter-spacing:-.015em}
.sm2-box p{margin:0 auto 16px;color:var(--ink2);max-width:420px}
.sm2-box .btn{padding:10px 16px;font-size:15px}
.sm2-box small{display:block;margin-top:10px;color:var(--ink3);font-size:13px}
.sm2-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--o1);color:var(--o2)}
.sm2-ic .i{width:22px;height:22px}
.sm2-guest #op-q{cursor:pointer}

/* the login, in the page */
#sm2-login{width:min(420px,calc(100% - 24px));padding:0;border:1px solid var(--line2);border-radius:16px;background:var(--main);color:var(--ink);
  box-shadow:0 24px 80px rgba(0,0,0,.28)}
#sm2-login::backdrop{background:var(--overlay)}
#sm2-login form{position:relative;padding:30px 26px 22px;text-align:center}
#sm2-login .x{position:absolute;top:12px;right:12px;color:var(--ink2)}
#sm2-login .x .i{width:18px;height:18px}
#sm2-login h2{margin:12px 0 6px;font-size:24px;line-height:1.2;letter-spacing:-.02em}
#sm2-login .sm2-why{margin:0 0 18px;color:var(--ink2)}
#sm2-login input[type=email]{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--sunk);
  font-size:15px;text-align:center}
#sm2-login input[type=email]:focus{outline:2px solid var(--focus);outline-offset:1px}
#sm2-login .btn.pri{width:100%;justify-content:center;margin-top:10px;padding:11px 12px;font-size:15px}
#sm2-login .sm2-foot{margin:14px 0 0;font-size:13px;color:var(--ink3)}
#sm2-login .sm2-foot a{color:var(--o2);font-weight:600;text-decoration:none}