/* Bridge the hairline gap that can open between the sticky site header and this
   ticker bar: the header's real height (safe-area, wrapped search row, etc.) never
   matches the bar's fixed sticky offset to the exact pixel, so a sliver of page
   content peeked through while scrolling. A solid dark cover in the chrome colour,
   drawn as a box-shadow ABOVE the bar (not a ::before — the bar is overflow:hidden
   and would clip a pseudo-element), fills it so the seam is invisible. Applies
   everywhere .gw2-tickerBar is used (home + the shared site-tickers partial). */
.gw2-tickerBar{box-shadow:0 -26px 0 0 #0a1322}

/* 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. */
/* `safe center` is the whole trick: the tiles are CONTENT-sized (below), so when
   they all fit they sit as one tight, centred group (no more edge-to-edge spread);
   as the viewport narrows and they no longer fit, `safe` degrades to flex-start so
   the strip scrolls from the first tile instead of hiding it. One rule, fully
   adaptive across every screen size. (Unsupported browsers ignore it → flex-start.) */
.stk-ticker{display:flex;align-items:stretch;width:100%;height:100%;justify-content:safe center;
  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}

/* Content-sized (not flex:1 grow) so tiles hug their content and the group can
   centre with tight, even spacing instead of stretching across the whole bar. */
.stk-tick{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:6px 22px;border-right:1px solid rgba(120,150,210,.10);overflow:hidden;scroll-snap-align:start;
  cursor:pointer;text-decoration:none;color:inherit;transition:background .15s ease}
.stk-tick:hover{background:rgba(68,241,255,.06)}
.stk-tick:active{background:rgba(68,241,255,.12)}
.stk-tick:last-child{border-right:0}
.stk-tick-name{display:flex;align-items:baseline;gap:6px;min-width:0;
  font:800 11px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;text-transform:uppercase;color:#dbe8ff}
.stk-tick-sub{font-weight:600;font-size:9.5px;letter-spacing:0;text-transform:none;color:#8ba0c4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.stk-tick-row{display:flex;align-items:baseline;gap:9px;min-width:0;white-space:nowrap}
.stk-tick-px{font:800 15px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#f2f6ff;letter-spacing:-.01em}
.stk-tick-chg{display:inline-flex;align-items:baseline;gap:3px;
  font:800 12.5px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.01em}
.stk-tick-chg.up{color:#2fd08a}
.stk-tick-chg.dn{color:#ff6b7d}
.stk-tick-arrow{font-size:8.5px;line-height:1}
/* clickable stock tiles (NGX/US top-cap) open their chart page */
.stk-tick-link{text-decoration:none;color:inherit;cursor:pointer;transition:background .15s ease}
.stk-tick-link:hover{background:rgba(68,241,255,.06)}
.stk-tick-link:active{background:rgba(68,241,255,.12)}

/* 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}
  /* Roomier tiles + bolder type so the strip reads clearly on a phone (it swipes
     horizontally, so wider tiles just mean fewer are visible at once — never squeezed).
     The cap stops a long company name from growing a tile off-screen — the sub name
     (min-width:0 + ellipsis) truncates within this bound instead. */
  .stk-tick{flex:0 0 auto;min-width:124px;max-width:210px;padding:6px 17px}
  .stk-tick-name{font-size:10.5px}
  .stk-tick-px{font-size:14px}
  .stk-tick-chg{font-size:11.5px}
}
@media(max-width:360px){
  .stk-tick{min-width:116px;padding:6px 14px}
}