/* Momentum Bell — "Today's momentum stories" cards (under the watchlist). */
.ms{ margin:14px 0 0; border-top:1px solid var(--line); padding:16px 0 6px; position:relative; }
.ms-title{
  display:flex; align-items:center; gap:6px; position:relative;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim);
  font-weight:600; margin:0; padding:0 14px 10px; line-height:1.5;
}
.ms-wrap{ position:relative; }
.ms-track{
  display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:2px 14px 12px;
  scroll-snap-type:x mandatory; scroll-padding:0 14px; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; outline:none;
}
.ms-track::-webkit-scrollbar{ height:8px; }
.ms-track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.ms-track:focus-visible{ box-shadow:inset 0 0 0 2px var(--hot-dim); border-radius:12px; }

.ms-card{
  flex:0 0 min(310px, 84%); scroll-snap-align:start; display:flex; flex-direction:column; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 15px 15px;
  animation:msIn .7s cubic-bezier(.4,0,.2,1) both; position:relative; overflow:hidden;
}
/* v0.163+ — the ticker search box hides non-matching cards by setting their
   "hidden" attribute in JS. Without this rule, the "display:flex" above
   (being our own CSS, not the browser's built-in default) wins over the
   browser's normal hidden-means-invisible behavior, so a "hidden" card was
   staying visible. This rule is just more specific than the one above, so
   it wins instead, and hidden cards actually disappear as expected. */
.ms-card[hidden]{ display:none; }
.ms-card::before{  /* thin accent line along the top; colour follows the state badge */
  content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--ms-c, var(--dim)); opacity:.8;
}
.ms-card[data-state="up"]  { --ms-c:var(--hot); }
.ms-card[data-state="cool"]{ --ms-c:var(--warn); }
.ms-card[data-state="gone"]{ --ms-c:#4b5360; }
@keyframes msIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .ms-card{ animation:none; } }

.ms-hd{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.ms-sym{ font-family:var(--mono); font-size:20px; font-weight:800; color:#f2f3f4; letter-spacing:.01em; }
.ms-px{ font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text); }
.ms-badge{
  margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ms-c, var(--dim)); border:1px solid var(--ms-c, var(--line)); border-radius:20px; padding:2px 8px; white-space:nowrap;
}
.ms-stats{ display:flex; gap:22px; }
.ms-stats div{ display:flex; flex-direction:column; gap:1px; }
.ms-stats label{ font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--dim); }
.ms-stats b{ font-family:var(--mono); font-size:15px; font-weight:700; color:var(--hot); }
.ms-stats b.neg{ color:#e5534b; }
.ms-stats b.mx{ color:var(--text); }

.ms-news{ border-left:2px solid var(--line); padding-left:10px; display:flex; flex-direction:column; gap:5px; }
.ms-news[hidden]{ display:none; }
.ms-news .ms-nh{
  font-size:12px; line-height:1.4; color:#c3c8cf;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ms-news .ms-nh::before{ content:"🗞 "; }

.ms-story{ font-size:12.5px; line-height:1.6; color:#aab0b8; margin:0; }
.ms-story b{ color:#f2f3f4; font-weight:600; }
.ms-story q{ color:#c3c8cf; quotes:"“" "”"; }

.ms-arrow{
  position:absolute; top:50%; transform:translateY(-58%); z-index:3; width:38px; height:38px; border-radius:50%;
  background:rgba(17,20,23,.92); border:1px solid #2a3037; color:var(--text); cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.5);
  transition:border-color .2s ease, opacity .2s ease;
}
.ms-arrow:hover{ border-color:var(--hot); color:#fff; }
.ms-arrow:focus-visible{ outline:2px solid var(--hot); outline-offset:2px; }
.ms-arrow svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ms-prev{ left:4px; } .ms-next{ right:4px; }
.ms-arrow[hidden]{ display:none; }
@media (max-width:600px){ .ms-arrow{ display:none; } .ms-sym{ font-size:18px; } }