/* site-ticker.css — Yahoo-Finance-style STATIC ticker (no scroll animation).
   Tiles stream fresh data in place (JS polling); nothing moves, so there's no
   continuous CPU/GPU cost like the old auto-scrolling tape.

   Each tile: NAME on top, then PRICE + CHANGE (colored). PC: the eight tiles share
   the row and are all visible. Mobile: the row becomes a swipeable, snap-scrolling
   strip (~2 tiles) so it is never crammed. */
.stk-ticker{display:flex;align-items:stretch;width:100%;height:100%;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stk-ticker::-webkit-scrollbar{display:none}
.stk-ticker-empty{display:flex;align-items:center;padding:0 16px;
  font:.66rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(233,241,255,.55);letter-spacing:.06em}

.stk-tick{flex:1 1 0;min-width:130px;display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:5px 16px;border-right:1px solid rgba(120,150,210,.10);overflow:hidden;scroll-snap-align:start}
.stk-tick:last-child{border-right:0}
.stk-tick-name{display:flex;align-items:baseline;gap:6px;min-width:0;
  font:800 10.5px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:#cfe0ff}
.stk-tick-sub{font-weight:500;font-size:9px;letter-spacing:0;text-transform:none;color:#7f97bd;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.stk-tick-row{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.stk-tick-px{font:800 14px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#eaf1ff}
.stk-tick-chg{display:inline-flex;align-items:baseline;gap:3px;
  font:700 12px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.stk-tick-chg.up{color:#22c55e}
.stk-tick-chg.dn{color:#ef4444}
.stk-tick-arrow{font-size:8.5px;line-height:1}

/* subtle flash when a tile's value updates (data streaming in) */
@keyframes stkTickFlash{0%{background:rgba(68,241,255,.14)}100%{background:transparent}}
.stk-tick.is-fresh{animation:stkTickFlash .7s ease}

/* Mobile / small screens: fixed-width tiles so at least ~3 show on a phone and MORE
   appear as the screen widens (the row scrolls). Compact type keeps them readable. */
@media(max-width:640px){
  .stk-ticker{scroll-snap-type:x proximity}
  .stk-tick{flex:0 0 auto;min-width:104px;padding:5px 12px}
  .stk-tick-name{font-size:9.5px}
  .stk-tick-px{font-size:12.5px}
  .stk-tick-chg{font-size:10.5px}
}
@media(max-width:360px){
  .stk-tick{min-width:98px;padding:5px 10px}
}