/* ==========================================================================
   The market bar (screens/v2/partials/market-bar.jsp, js/v2/market-bar.js)
   at the top of the home page (both modes) and of the BSE overview
   (/control/trading).  Moved here from css/v2/home.css section 8 so both
   pages load the same rules.
   ========================================================================== */

/* ---- the bar: left the switch and the BSE status,
   right one line of prices running right to left.  div.mb_track holds the
   list twice and moves by -50 % in a loop; js/v2/market-bar.js sets the
   duration from the list's width (about 32 px/s).  It stops under the
   pointer and while a link in it has the focus; with reduced motion it
   stands still and the strip scrolls instead. */
body.v2 .mkt_bar {
    display: flex; align-items: stretch; height: 48px; margin: 0 0 20px;
    background: #fff; border: 1px solid #dfe6ef; border-radius: 10px; overflow: hidden;
}
body.v2 .mb_left {
    display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-width: 0;
    padding: 0 14px; background: #f7f9fc; border-right: 1px solid #dfe6ef;
}
/* the switch: a segmented control, as the trades page's Full / Compact */
body.v2 .mb_seg { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; background: #fff; border: 1px solid #cdd6e2; border-radius: 8px; }
body.v2 .mb_mode_btn {
    min-height: 32px; padding: 0 12px; border-radius: 6px;
    color: #1e4280; font-size: 14px; font-weight: 600; white-space: nowrap;
}
body.v2 .mb_mode_btn:hover { background: #f0f3f6; }
body.v2 .mb_mode_btn[aria-pressed="true"] { background: #1e4280; color: #fff; cursor: default; }
body.v2 .mb_mode_btn:focus-visible { outline: 2px solid #1e4280; outline-offset: 1px; }
body.v2 .mb_mode_btn[disabled] { cursor: progress; }
body.v2 .mb_st { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; color: #1a2740; white-space: nowrap; }
body.v2 .mb_st_t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.v2 .mb_dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #8a94a3; }
body.v2 .mb_st.is_live .mb_dot { background: #00935d; box-shadow: 0 0 0 3px #e6f5ee; }
body.v2 .mb_run {
    position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
/* the margin, not a padding: -50 % is of the track's own width, which must
   be exactly the two equal lists */
body.v2 .mb_track { display: flex; flex: 0 0 auto; margin-left: 24px; animation: mb_run 60s linear infinite; }
body.v2 .mb_run:hover .mb_track, body.v2 .mb_run:focus-within .mb_track { animation-play-state: paused; }
body.v2 .mb_list { display: flex; flex: 0 0 auto; }
/* each item carries its gap after it, so the two copies are exactly equal
   and -50 % lands the second on the first */
body.v2 a.mb_i {
    display: inline-flex; align-items: baseline; gap: 6px; flex: 0 0 auto;
    padding: 0 28px 0 0; color: #1f2733; font-size: 14px; white-space: nowrap;
}
body.v2 a.mb_i:hover .mb_n { color: #1e4280; text-decoration: underline; }
body.v2 a.mb_i:focus-visible { outline: 2px solid #1e4280; outline-offset: -2px; }
body.v2 .mb_n { color: #5b6675; }
body.v2 .mb_v { font-weight: 600; }
body.v2 .mb_d { font-weight: 600; }
@keyframes mb_run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    body.v2 .mb_track { animation: none; }
    body.v2 .mb_run { overflow-x: auto; scrollbar-width: thin; }
    body.v2 .mb_list[aria-hidden="true"] { display: none; }
}

/* a phone: the bar in two rows - the switch and the status, then the prices */
@media (max-width: 640px) {
    body.v2 .mkt_bar { flex-wrap: wrap; height: auto; margin-bottom: 16px; }
    body.v2 .mb_left { flex: 1 1 100%; gap: 10px; height: 48px; padding: 0 10px; border-right: 0; border-bottom: 1px solid #dfe6ef; }
    body.v2 .mb_mode_btn { min-height: 36px; padding: 0 12px; }
    body.v2 .mb_st { font-size: 12px; }
    body.v2 .mb_run { flex: 1 1 100%; height: 42px; }
}