/* The live match page on phones and tablets (≤980px, js/live-mobile.js): bet365's mobile event
   page — BettingPlatform.API/mobile-event-css, its sheets 1:1 under /vendor/live-scout/mobile/css.
   This file only joins them to the page: our brand colours on their BRAND variables, what of the
   desktop page steps aside, the header and the pitch / video zone sticky under the site's header,
   and the few states our data needs. The bet365 sheets load after this one (with the page), so
   every rule carries the page's id. Above 980px only bet365's match header (and the follow bell
   ending the statistics bar) is drawn from it: the rules without .lmm-on. */

/* Desktop: the pitch / video zone's wrappers (index.html) have no box — the rail is what it
   always was. On a phone they are bet365's sticky zone. */
.lmm-Wrap { display: contents; }

/* BRAND (mobile-event-css README, "Branding"): the site's prices, picks and green. The greys
   are bet365's own. Where the header and the zone stick: under the fixed site header, and under
   the account-verification banner when it shows. */
#page-live-match.lmm-Root {
    --color-yellowFFDF1B: var(--accent-odds);
    --color-yellow1: var(--accent-odds);
    --color-greyE4: var(--odd-selected-bg);
    --color-green126E51: var(--odd-selected-ink);
    --color-green28FFBB: var(--accent-green);
    --color-green3: var(--accent-green);
    --color-green189970-75p: var(--accent-teal);
    --color-grey2: var(--bg-primary);
    --lmm-top: var(--header-height);
    --lmm-crumb-h: 51px;
}
body.has-verify-banner #page-live-match.lmm-Root { --lmm-top: calc(var(--header-height) + 44px); }

/* The desktop page's own score bar steps aside for bet365's header on every width (its minute
   and periods stay in the page: the header's status line reads them); on a phone the category
   strip too. The market search's bar stays: the tabs' search opens it, under them. */
#page-live-match #live-md-detail-top,
#page-live-match.lmm-on .md-categories-wrapper { display: none !important; }

/* Until bet365's sheets are in (js/live-mobile.js apply): drawn without them, the header, the
   market tabs and the markets showed as raw lists for a moment (a page opened straight on a
   match, or back from idle). */
#page-live-match.lmm-pending .lmm-Header,
#page-live-match.lmm-pending.lmm-on #lmm-tabs,
#page-live-match.lmm-pending.lmm-on #live-md-markets { display: none !important; }

/* Edge to edge and without gaps between the blocks, as bet365's page. */
body:has(#page-live-match.lmm-on.active) .content { padding-left: 0; padding-right: 0; padding-top: 0; }
/* The footer's negative sides answer .content's padding, off here: it stood 10px past the
   screen's edge, and the page could move sideways by that much. */
body:has(#page-live-match.lmm-on.active) .site-footer { margin-left: 0; margin-right: 0; }
#page-live-match.lmm-on .live-md-cols { gap: 0; --md-col-gap: 0px; }

/* The match header: first, sticky under the site's header. */
#page-live-match.lmm-on #lmm-header {
    order: 0;
    position: sticky;
    top: var(--lmm-top);
    z-index: 37;
}
/* Sports without the pitch module: the minute / period under the score. */
#page-live-match .lmm-Status {
    padding: 6px 10px 6px;
    background: var(--bg-primary);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
}

/* The pitch / video zone, sticky under the header (svm's own top is 0: ours is set here). */
#page-live-match.lmm-on .lmm-Wrap { display: block; }
#page-live-match.lmm-on #lmm-zone {
    order: 3;
    position: sticky;
    top: calc(var(--lmm-top) + var(--lmm-crumb-h));
    z-index: 35;
}
/* The statistics bar's swipe (js/live.js _wireMdSwipe) slides the zone and the panel a whole
   width out and in. .live-md-side clips them on the desktop; here it is display: contents (no
   box: its overflow-x: clip does nothing), and the pane slid out made the page wider than the
   screen - the page moved left and right with it. The column clips them instead: clip, not
   hidden - no scroll container, so the header and the zone stay sticky. */
#page-live-match.lmm-on .live-md-cols { overflow-x: clip; }
#page-live-match.lmm-on .lmm-Zone_TabViewContainer { display: flex; flex-direction: column; }
/* The page's own statistics and summary (volleyball's, table tennis's, ice hockey's, cricket's,
   and football's with its video in front) on the surface the pitch modules draw theirs on -
   football's, tennis's, basketball's - not a lighter card under the bar. */
#page-live-match.lmm-on #live-md-summary {
    background: var(--bg-primary);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
/* ...in their colours: each side's own (LiveSports.colours), bet365's grey for the figures, and
   what leads - a period's total, the set in play - in their yellow (tennis's sets, the header's
   score), not the site's green. */
#page-live-match.lmm-on .lmst-pb-bar-h { background: var(--team-home); }
#page-live-match.lmm-on .lmst-pb-bar-a { background: var(--team-away); }
#page-live-match.lmm-on .lmst-pb-val { color: var(--color-greyCC); }
#page-live-match.lmm-on .lmst-pb-val.is-lead { color: var(--text-primary); }
#page-live-match.lmm-on .lmst-pb-total .lmst-pb-val { color: var(--text-primary); }
#page-live-match.lmm-on .lmst-pb-total .lmst-pb-val.is-lead { color: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lvs-pb-cur th,
#page-live-match.lmm-on .lvs-pb-cur td { color: inherit; }
#page-live-match.lmm-on .lvs-pb-cur th { color: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lmst-ck-bat { color: var(--color-yellowFFDF1B); }

/* Cricket's statistics as the modules draw theirs (tennis's results, football's statistics):
   flat on the zone's surface in their type - 11px labels, 14px bold figures, #ccc - the side
   batting marked as tennis marks the server, its dot yellow, the other's grey. They were cards
   of a lighter grey with a green edge and green scores. */
#page-live-match.lmm-on .lmst-ck { gap: 10px; }
#page-live-match.lmm-on .lmst-ck-innings { gap: 0; }
#page-live-match.lmm-on .lmst-ck-inn {
    padding: 7px 4px;
    background: none;
    border-left: 0;
    border-radius: 0;
}
#page-live-match.lmm-on .lmst-ck-inn-team { font-size: 14px; font-weight: 700; color: var(--text-primary); }
#page-live-match.lmm-on .lmst-ck-inn-team::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 9px 2px 0;
    border-radius: 50%;
    background: var(--color-grey4F);
    vertical-align: middle;
}
#page-live-match.lmm-on .lmst-ck-inn-live .lmst-ck-inn-team::before { background: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lmst-ck-inn-score,
#page-live-match.lmm-on .lmst-ck-inn-live .lmst-ck-inn-score { font-size: 14px; font-weight: 700; color: var(--text-primary); }
#page-live-match.lmm-on .lmst-ck-inn-live .lmst-ck-inn-score { color: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lmst-ck-live { gap: 16px; padding: 0 4px; }
#page-live-match.lmm-on .lmst-ck-col { padding: 0; background: none; border-radius: 0; }
#page-live-match.lmm-on .lmst-ck-hdr,
#page-live-match.lmm-on .lmst-ck-meta {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-greyCC);
}
#page-live-match.lmm-on .lmst-ck-bat-name,
#page-live-match.lmm-on .lmst-ck-bowl-row { font-size: 13px; color: var(--color-greyCC); }
#page-live-match.lmm-on .lmst-ck-bat-rb { font-size: 13px; color: var(--color-greyCC); }
#page-live-match.lmm-on .lmst-ck-strike { color: var(--color-yellowFFDF1B); }
#page-live-match.lmm-on .lmst-ck-target {
    padding: 8px 4px 2px;
    background: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    font-size: 11px;
    font-weight: 400;
    color: var(--color-greyCC);
}
#page-live-match.lmm-on #live-md-media-switch { order: -1; }
/* Scrolled into the markets, the zone shrinks to 60% in the top right corner, as bet365's
   PartiallyStickyVideoManager does (svm…_Video-scaled: scale(.6) from that corner), so the odds
   show beside and under it; a tap on it (its mask) or the top of the page brings it back whole
   (js/live-mobile.js zoneScroll). */
#page-live-match.lmm-on #lmm-zone > .svm-PartiallyStickyVideoManager_Mask { z-index: 60; }
#page-live-match.lmm-on #lmm-zone > .svm-PartiallyStickyVideoManager_Mask[hidden] { display: none; }
#page-live-match.lmm-on #live-md-scout {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* The live-matches list (inplay-switcher, from the header's ⌄ / names) is bet365's full-screen
   modal: over the site's header and bottom bar too, as it is there — its own z-index (62) is
   under them here. It mounts on <body>, hence the two-element prefix to outrank its sheet. */
html body .ipn-EventViewNavigationFloat { z-index: 1000; }
/* Its BRAND colours (inplay-switcher README, "Stilimi"): the competition names in the site's
   green, the scores and the serve dot in its yellow. */
html body .ipe-EventHeaderFlyout {
    --color-green3: var(--accent-green);
    --color-yellow1: var(--accent-odds);
}

/* The market tabs, right above the markets; the search's bar between them when it is open. */
#page-live-match.lmm-on #lmm-tabs { order: 5; }
/* Early in the page, drawn under the zone: Chrome kept them in place when the zone's height
   changed (the video taking the court's place) by scrolling the page that much - and past 48px
   the zone shrank to its corner (js/live-mobile.js zoneScroll). The strip and the markets are
   out of scroll anchoring already (css/style.css). */
#page-live-match.lmm-on #lmm-tabs { overflow-anchor: none; }
#page-live-match.lmm-on #live-md-search-bar,
#page-live-match.lmm-on #live-md-markets { order: 6; }
/* The search, in the 50px bet365 keeps on the right for its match alerts. */
#page-live-match.lmm-on .lmm-Search {
    width: 50px;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
}
#page-live-match.lmm-on.allow-hover .lmm-Search:hover { color: var(--text-primary); }
#page-live-match.lmm-on .lmm-Search:focus-visible { outline: 2px solid var(--accent-green); outline-offset: -2px; }

/* The match's follow bell, ending the statistics bar on screen (js/live-mobile.js bell): after
   the pitch module's scroller, or after the page's own tabs. */
#page-live-match .lmm-StatsBell {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 42px;
    padding: 0 8px 0 4px;
}
#page-live-match .lmm-StatsBell .push-bell { color: var(--text-secondary); }
/* The desktop: at the end of the pitch module's statistics bar, or of the page's own tabs. */
#page-live-match:not(.lmm-on) .lmm-StatsBell { margin-left: auto; }
/* The page's own tabs centre on the whole bar, as the pitch module's do, not in the room left
   of the bell: a spacer the bell's width opens the bar (giving way when the tabs need the room)
   and the free space goes either side of the tabs. */
#page-live-match .live-md-view-tabs:has(> .lmm-StatsBell)::before {
    content: "";
    flex: 0 1 42px;
    min-width: 0;
}
#page-live-match:not(.lmm-on) .live-md-view-tabs > :first-child { margin-left: auto; }
/* The tabs keep their one line; the spacer is what gives. */
#page-live-match .live-md-view-tabs > * { flex-shrink: 0; white-space: nowrap; }
/* The media button opening the bar on a phone (live.js _pitchButtonInBar), where bet365's module
   has its own: the same button - its icons (me-mediabutton.css: grey, the one in front in
   colour), in its grey box with rounded corners when there is a video to switch to; the pitch's
   icon alone without one, as football's. */
#page-live-match .live-md-view-media {
    display: flex;
    align-items: center;
    align-self: center;
    height: 30px;
    border-radius: var(--media-switch-radius);
    overflow: hidden;
}
#page-live-match .live-md-view-media-video { background: var(--media-switch-bg); }
#page-live-match .live-md-view-media-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
#page-live-match .live-md-view-media-btn:not(.me-MediaButtonLoader) { width: 45px; height: 30px; }
#page-live-match .live-md-view-media-btn.active:not(.me-MediaButtonLoader) { color: var(--text-primary); }
#page-live-match .live-md-view-media-btn:focus-visible { outline: 2px solid var(--accent-green); outline-offset: -2px; }
/* The page's own statistics bar on a phone: more tabs than fit (players, lineups, …) scroll
   sideways under it, the bell staying at the end. It reads as the pitch modules' menu (bet365's
   LocationEventsMenu, football's on this page): 50px on the page's ground, the names 13px in
   white at 80%, the open one bold and white over a 2px line 9px above the bar's foot. */
#page-live-match.lmm-on .live-md-view-tabs {
    justify-content: flex-start;
    gap: 0;
    height: 50px;
    padding-left: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--bg-primary);
    border-bottom: 0;
}
#page-live-match.lmm-on .live-md-view-tab {
    position: relative;
    height: 50px;
    padding: 0 10px;
    border-bottom: 0;
    color: var(--ml-menu-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 43px;
}
#page-live-match.lmm-on .live-md-view-tab.active {
    color: var(--text-primary);
    font-weight: 700;
}
#page-live-match.lmm-on .live-md-view-tab.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 9px;
    height: 2px;
    background: var(--text-primary);
}
#page-live-match.lmm-on .live-md-view-media { margin: 0 10px; }
#page-live-match.lmm-on .live-md-view-tabs:has(> .lmm-StatsBell) { padding-left: 0; }
#page-live-match.lmm-on .live-md-view-tabs::-webkit-scrollbar { display: none; }
#page-live-match.lmm-on .live-md-view-tabs > :first-child,
#page-live-match.lmm-on .live-md-view-tabs > .lmm-StatsBell { margin-left: auto; }
#page-live-match.lmm-on .live-md-view-tabs > .lmm-StatsBell {
    position: sticky;
    right: 0;
    align-self: stretch;
    background: var(--bg-primary);
}

/* The market grid: bet365's groups, in place of the desktop list's own box. */
#page-live-match.lmm-on #live-md-markets {
    display: block;
    margin: 0;
    padding: 0 0 var(--gutter, 10px);
    gap: 0;
    border: 0;
    border-radius: 0;
}
/* Player props (Player Assists, goalscorers…): the player, his line ("Over 0.5") as a label
   of its own that reads apart from the name, and the price at the row's end. */
#page-live-match.lmm-on .lmm-PlayerList .gl-ParticipantBorderless_Handicap {
    margin-left: 8px;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    white-space: nowrap;
}
#page-live-match.lmm-on .lmm-PlayerList .gl-ParticipantBorderless_Odds { margin-left: auto; padding-left: 10px; }
/* A table row with no price for a column keeps its height. */
#page-live-match.lmm-on .lmm-Gap { pointer-events: none; }
/* The cells and headers are divs that act as buttons: a keyboard focus shows. */
#page-live-match.lmm-on .gl-Participant_General:focus-visible,
#page-live-match.lmm-on .sip-MarketGroupButton:focus-visible,
#page-live-match.lmm-on .ipe-GridHeaderTabLink:focus-visible,
#page-live-match.lmm-on [class*="ipe-EventHeaderBreadcrumb_"]:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: -2px;
}