/* BetCoach workstation. Layout and component presentation; analytics stay in their existing modules. */
/* Workstation-specific overrides only.

   This block used to be an aliasing layer (--bc-text: var(--bc-text-primary))
   left over from an earlier partial migration. Once both sides of each alias
   resolved to the same canonical name those lines became self-referential —
   which is invalid CSS and made the labels here unreadable — and two of them
   collided on the same key. Only the genuine overrides remain. */
body.bc-workstation {
    /* Cards sit on the raised surface, not the base one. */
    --bc-color-surface: var(--bc-color-surface-raised);
    --bc-color-accent-strong: var(--bc-color-info);
    /* Secondary text is used where other pages would use tertiary. */
    --bc-color-text-tertiary: var(--bc-color-text-secondary);
    /* Full-bleed shell rather than the centred page width. */
    --bc-layout-shell: 100%;
    --bc-layout-gutter: 20px;
    --bc-layout-sidebar: 212px;
    --bc-layout-sidebar-collapsed: 64px;
    /* The workstation sits on the standard canvas, not the deeper one. */
    --bc-color-canvas-deep: var(--bc-color-canvas);
    --bc-color-sidebar: #131b24;
    --bc-color-surface-hover: #253341;
    --bc-color-surface-selected: #20374c;
    --bc-color-orange: #f2a654;
    background: var(--bc-color-canvas);
    color: var(--bc-color-text);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', Inter, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color-scheme: dark;
}
.bc-workstation *, .bc-workstation *::before, .bc-workstation *::after { box-sizing: border-box; }
.bc-workstation :is(button, input, select, summary, a):focus-visible { outline: 2px solid var(--bc-color-accent); outline-offset: 3px; }
.bc-workstation :is(button, a, summary) { transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease; }
.bc-workstation .bc-dash-sidebar { background: var(--bc-color-sidebar); border-right: 1px solid var(--bc-color-line); box-shadow: none; padding: 24px 12px 16px; }
.bc-workstation .bc-dash-brand { padding: 0 8px 28px; gap: 10px; }
.bc-workstation .bc-dash-brand-text strong { font-size: 23px; letter-spacing: -.7px; }
.bc-workstation .bc-dash-brand-text span { font-size: 10px; white-space: normal; color: var(--bc-color-text-secondary); }
.bc-workstation .bc-dash-nav a { min-height: 44px; border-radius: 8px; font-size: 13px; font-weight: 500; margin: 4px 0; }
.bc-workstation .bc-dash-nav a.active { background: var(--bc-color-surface-selected); color: #9bd2ff; border-left: 2px solid var(--bc-color-accent); box-shadow: none; }
.bc-workstation .bc-dash-nav a:hover { background: var(--bc-color-surface-hover); }
.bc-workstation .bc-dash-nav i { color: inherit; }
.bc-workstation .bc-premium-note { background: var(--bc-color-surface-panel); border-color: var(--bc-color-line); }
.bc-workstation .bc-premium-note > i { color: var(--bc-color-orange); }
.bc-workstation .bc-premium-note a { display: flex; justify-content: space-between; color: #111820; background: var(--bc-color-accent); border-radius: 8px; padding: 8px; font-weight: 600; }
.bc-workstation .bc-dash-main { padding-bottom: 24px; min-width: 0; }
.bc-workstation-topbar { display: flex; align-items: center; gap: 24px; padding: 16px 20px; border-bottom: 1px solid var(--bc-color-line); }
.bc-global-search { display: flex; align-items: center; gap: 12px; width: min(560px, 55%); margin: 0; padding: 0 14px; min-height: 40px; border: 1px solid var(--bc-color-line); border-radius: 12px; background: var(--bc-color-surface-raised); color: var(--bc-color-text-secondary); }
.bc-workstation .bc-global-search #teamNameFilter { background: transparent; border: 0; width: 100%; max-width: none; height: 38px; color: var(--bc-color-text); padding: 0; font-size: 13px; box-shadow: none; }
.bc-workstation #teamNameFilter::placeholder { color: var(--bc-color-text-secondary); }
.bc-feed-status { display: flex; align-items: center; gap: 8px; color: var(--bc-color-positive); margin-left: auto; white-space: nowrap; font-size: 12px; }
.bc-feed-status time { color: var(--bc-color-text-secondary); margin-left: 8px; }
.bc-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bc-color-positive); flex: 0 0 auto; }
.bc-account { display: flex; align-items: center; gap: 8px; color: var(--bc-color-text); text-decoration: none; border-left: 1px solid var(--bc-color-line); padding-left: 20px; }
.bc-account i { font-size: 20px; }
.bc-workstation .bc-v2-header { padding: 20px 20px 0; }
.bc-workstation .bc-v2-heading { margin-bottom: 16px; align-items: center; }
.bc-workstation .bc-v2-eyebrow { font-size: 10px; letter-spacing: .13em; font-weight: 600; color: var(--bc-color-text-tertiary); }
.bc-workstation .bc-v2-heading h1 { font-size: 22px; font-weight: 650; letter-spacing: -.5px; margin: 2px 0; }
.bc-workstation .bc-v2-heading p { font-size: 12px; color: var(--bc-color-text-secondary); }
.bc-workstation .bc-v2-live-state { display: none; }
.bc-workstation :is(.bc-v2-view-toggle, .bc-v2-grid-density) { border-radius: 8px; background: var(--bc-color-surface-panel); }
.bc-workstation :is(.bc-v2-view-btn, .bc-v2-smart-sort-btn, .bc-v2-grid-density-btn) { min-height: 32px; font-weight: 500; font-size: 12px; border-radius: 6px; }
.bc-workstation :is(.bc-v2-view-btn, .bc-v2-grid-density-btn).is-active { background: var(--bc-color-surface-selected); color: #a9d9ff; }
/* Phone-first: two KPI tiles, then three from tablet up. */
.bc-kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 769px) {
    .bc-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bc-kpi { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 20px; border: 1px solid var(--bc-color-line); border-radius: 12px; background: var(--bc-color-surface-raised); color: var(--bc-color-text); text-align: left; min-width: 0; }
button.bc-kpi:hover { background: var(--bc-color-surface-hover); }
.bc-kpi > span { color: var(--bc-color-text-secondary); font-size: 12px; }
.bc-kpi strong { font-size: 28px; line-height: 1.3; letter-spacing: -.8px; margin: 4px 0; font-weight: 650; }
.bc-kpi small { color: var(--bc-color-text-secondary); font-size: 11px; }
.bc-kpi > i { position: absolute; right: 20px; top: 43px; font-size: 25px; color: #7296b6; opacity: .65; }
.bc-kpi[aria-pressed=true] { border-color: var(--bc-color-accent); background: var(--bc-color-surface-selected); }
.bc-workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 20px; padding: 8px 12px; border: 1px solid var(--bc-color-line); border-radius: 12px; background: var(--bc-color-surface-panel); }
.bc-workspace-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bc-workspace-toolbar button { background: var(--bc-color-surface-panel); border: 1px solid var(--bc-color-line); border-radius: 8px; padding: 8px 12px; color: var(--bc-color-text-secondary); font-size: 12px; }
.bc-workspace-toolbar button[aria-expanded=true] { color: var(--bc-color-accent); }
.bc-workstation .bc-alert-filter-bar { margin: 12px 20px 0; background: transparent; border: 0; padding: 0; }
.bc-workstation .bc-v2-filter-block--team { display: none; }
.bc-workstation .filters-container { background: var(--bc-color-surface-panel); border: 1px solid var(--bc-color-line); border-radius: 12px; box-shadow: none; margin: 12px 20px; width: auto; }
.bc-workstation .filter-btn { border-radius: 8px; color: var(--bc-color-text-secondary); font-size: 12px; }
.bc-workstation .filter-btn.active { color: #aad9ff; background: var(--bc-color-surface-selected); border-color: var(--bc-color-accent); box-shadow: none; }
.bc-workstation .bc-v2-spotlight-badge { display: none; }
/* Phone-first: one column. Tablet/desktop restore the rail + inspector split. */
.bc-workstation .bc-v2-workspace-shell:not(.bc-v2-view-grid),
.bc-workstation .bc-v2-workspace-shell.bc-v2-view-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 12px;
    align-items: stretch;
    min-width: 0;
}
.bc-workstation .bc-v2-workspace-shell.bc-v2-view-grid .bc-v2-match-rail { display: none; }
.bc-workstation .bc-v2-match-rail { display: none; }
@media (min-width: 769px) {
    .bc-workstation .bc-v2-workspace-shell:not(.bc-v2-view-grid) .bc-v2-match-rail { display: flex; flex-direction: column; }
}
@media (min-width: 769px) {
    .bc-workstation .bc-v2-workspace-shell:not(.bc-v2-view-grid) { display: grid; grid-template-columns: 240px minmax(0, 1fr) 292px; gap: 12px; padding: 0 20px; align-items: start; }
    .bc-workstation .bc-v2-workspace-shell.bc-v2-view-grid { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 12px; padding: 0 20px; align-items: start; }
}
.bc-workstation .bc-v2-grid > .main-content { min-width: 0; padding: 0; width: 100%; margin: 0; }
.bc-workstation .bc-v2-panel { background: var(--bc-color-surface-raised); border: 1px solid var(--bc-color-line); border-radius: 12px; box-shadow: none; min-width: 0; }
/* Rail panel: capped to the viewport, and it scrolls.
 *
 * The cap on its own was a hard stop. The panel is sticky and limited to one
 * viewport height, but nothing here was a scroll container, so with more
 * matches than fit on screen the rest was clipped and unreachable — the rail
 * looked like it had a fixed size no matter how many games were live.
 *
 * Mobile never had the problem because the rail is display:none under 768px
 * and the matches render in #bcV2MobileMatchPicker instead, a normal block in
 * the page flow with no cap, which just grows and lets the page scroll.
 *
 * The scroll goes on the panel, not on the list: at >=1025px the rail is
 * deliberately `display: block`, so a flex child cannot be made to shrink
 * here. The header is pinned with position:sticky instead, which needs no
 * flex context and keeps "Live matches / LIVE" in place as the rows move. */
.bc-workstation .bc-v2-panel-sticky {
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    /* Reaching the end of the rail should not start scrolling the page behind it. */
    overscroll-behavior: contain;
}

.bc-workstation .bc-v2-panel-sticky .bc-v2-panel-head {
    position: sticky;
    top: 0;
    z-index: 1;
    /* Opaque, or the rows scroll visibly through the header. */
    background: var(--bc-color-surface-raised);
}
.bc-workstation .bc-v2-panel-head { padding: 14px 16px; border-bottom: 1px solid var(--bc-color-line); }
.bc-workstation .bc-v2-panel-head h2 { font-size: 13px; font-weight: 600; }
.bc-workstation .bc-v2-panel-head span { font-size: 10px; color: var(--bc-color-positive); letter-spacing: .06em; }
.bc-workstation .bc-v2-match-list { gap: 0; padding: 0; }
.bc-workstation .bc-v2-match-item { border: 0; border-bottom: 1px solid var(--bc-color-line); border-radius: 0; padding: 14px 12px; background: transparent; box-shadow: none; min-height: 88px; }
.bc-workstation .bc-v2-match-item:hover { background: var(--bc-color-surface-hover); }
.bc-workstation .bc-v2-match-item.is-selected { background: var(--bc-color-surface-selected); box-shadow: inset 2px 0 var(--bc-color-accent); }
.bc-workstation .bc-v2-match-teams strong, .bc-workstation .bc-v2-match-teams span { font-size: 12px; color: var(--bc-color-text); font-weight: 500; white-space: normal; line-height: 1.5; }
.bc-workstation .bc-v2-match-score { font-size: 14px; font-weight: 650; color: var(--bc-color-text); }
.bc-workstation .bc-v2-match-live { font-size: 11px; color: var(--bc-color-positive); }
.bc-workstation .bc-v2-match-selected-tag { display: none; }
.bc-workstation .bc-v2-mini-graph { max-width: 72px; }
.bc-workstation .matches-container { padding: 0; gap: 12px; }
.bc-workstation .match-card { border: 1px solid var(--bc-color-line); border-radius: 12px; padding: 0; background: var(--bc-color-surface-panel); box-shadow: none; overflow: hidden; }
.bc-workstation .match-card.is-selected { border-color: var(--bc-color-line); box-shadow: none; }
.bc-match-league { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 0; color: var(--bc-color-text-secondary); font-size: 11px; min-width: 0; }
.bc-match-league-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-match-league-live { color: var(--bc-color-positive); white-space: nowrap; flex-shrink: 0; }
.bc-workstation .bc-v2-match-header { padding: 16px; background: transparent; border: 0; }
.bc-workstation .legend-container { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 12px; align-items: center; padding: 8px 0; }
.bc-workstation .team-name { font-size: clamp(14px, 1.3vw, 21px); font-weight: 600; line-height: 1.3; color: var(--bc-color-text); }
.bc-workstation .score { font-size: 32px; font-weight: 650; letter-spacing: 2px; line-height: 1.2; }
.bc-workstation .minute { color: var(--bc-color-positive); font-size: 12px; background: transparent; }
.bc-workstation .bc-v2-graph-shell { margin: 0 12px; padding: 16px 12px 8px; background: #151e28; border: 1px solid var(--bc-color-line); border-radius: 12px; }
.bc-workstation .bc-v2-graph-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.bc-chart-title { font-size: 14px; font-weight: 600; margin: 0; }
.bc-workstation .bc-v2-guide-pill { background: transparent; border: 0; color: var(--bc-color-text-secondary); font-size: 11px; padding: 0; }
.bc-workstation .bc-v2-graph-guide { gap: 12px; }
.bc-workstation .bc-v2-graph-story { padding: 12px 0; border: 0; background: transparent; }
.bc-workstation .bc-v2-live-reading { font-size: 12px; color: var(--bc-color-text-secondary); }
.bc-workstation .chart-container { height: 300px; min-height: 260px; background: transparent; margin: 0; border: 0; box-shadow: none; }
.bc-workstation .bc-v2-lower-grid { display: block; padding: 12px; margin: 0; }
.bc-workstation .stats-container { background: var(--bc-color-surface-panel); padding: 12px; border-radius: 8px; border: 1px solid var(--bc-color-line); box-shadow: none; }
.bc-workstation .stat-title { color: var(--bc-color-text-secondary); font-size: 11px; text-transform: none; letter-spacing: 0; }
.bc-workstation .bc-v2-stats-head { margin-bottom: 12px; }
.bc-workstation .bc-v2-stats-head strong { font-size: 13px; }
.bc-workstation .bc-v2-right-rail {
    display: none;
    padding: 0; overflow: auto;
    background: var(--bc-color-surface-panel); border: 1px solid var(--bc-color-line); border-radius: 12px;
}
@media (min-width: 769px) {
    .bc-workstation .bc-v2-right-rail {
        display: flex;
        flex-direction: column;
    }
}
.bc-workstation .bc-v2-context,
.bc-workstation .bc-v2-right-rail .bc-v2-feed-section {
    background: transparent; border: 0; border-radius: 0; margin: 0; box-shadow: none; overflow: visible;
}
.bc-workstation .bc-v2-context { display: block; padding: 14px 14px 12px; border-bottom: 1px solid var(--bc-color-line); }
.bc-workstation .bc-v2-right-rail .bc-v2-feed-section { border-bottom: 1px solid var(--bc-color-line); }
.bc-workstation .bc-v2-right-rail .bc-v2-feed-section:last-of-type { border-bottom: 0; }
.bc-workstation .bc-v2-selected-odds-desktop.is-empty-compact { display: none; }
.bc-workstation .bc-v2-right-rail .bc-v2-selected-odds-desktop { border-top: 0; }
.bc-workstation .bc-v2-right-rail .bc-v2-panel-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 10px 14px 6px; border-bottom: 0; min-height: 0;
}
.bc-workstation .bc-v2-right-rail .bc-v2-panel-head h2 {
    font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bc-color-text-tertiary);
}
.bc-workstation .bc-v2-right-rail .bc-v2-panel-head span { display: none; }
.bc-workstation .bc-v2-right-rail .bc-v2-panel-head a { font-size: 11px; font-weight: 500; color: var(--bc-color-accent); text-decoration: none; }
.bc-workstation .bc-v2-right-rail .bc-v2-panel-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bc-momentum-leader { border-left: 3px solid var(--bc-color-home); padding-left: 12px; margin: 12px 0; }
.bc-momentum-leader.is-away { border-color: var(--bc-color-away); }
.bc-momentum-leader span { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.3px; }
.bc-momentum-leader small { display: block; margin-top: 4px; color: var(--bc-color-text-secondary); }
.bc-workstation .bc-v2-context-summary { color: var(--bc-color-text-secondary); font-size: 12px; line-height: 1.55; font-weight: 400; }
.bc-workstation .bc-v2-context-lead { padding: 0; background: transparent; border: 0; border-radius: 0; }
.bc-insights-title { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bc-color-text-tertiary); margin: 16px 0 8px; }
.bc-workstation .bc-v2-right-rail .bc-v2-interpretation-grid { border: 0; border-radius: 0; overflow: visible; }
.bc-workstation .bc-v2-interpretation-row { padding: 7px 0; background: transparent; border-bottom: 1px solid var(--bc-color-line); font-size: 12px; border-radius: 0; }
.bc-workstation .bc-v2-interpretation-row span { color: var(--bc-color-text-tertiary); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.bc-workstation .bc-v2-interpretation-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bc-workstation .bc-v2-context-action { color: var(--bc-color-text-secondary); font-size: 11px; padding-top: 12px; }
.bc-workstation .bc-v2-feed { padding: 0 8px 8px; }
.bc-workstation .bc-v2-feed-item { border: 0; border-bottom: 1px solid var(--bc-color-line); border-radius: 0; background: transparent; padding: 12px 0; }
.bc-workstation .bc-v2-feed-empty { /* empty/error state on the lightest panel: secondary text only
       reached 4.2:1 there, so this one uses the primary label. */
    color: var(--bc-color-text); font-size: 12px; padding: 8px 14px 14px; }
.bc-recent-events { padding: 4px 24px 16px; }
.bc-recent-events h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; margin: 8px 0 12px; }
.bc-recent-events h3 small { font-size: 10px; color: var(--bc-color-text-secondary); font-weight: 400; }
.bc-recent-events ol { margin: 0; padding: 0; list-style: none; }
.bc-recent-events li { display: grid; grid-template-columns: 32px 1fr 1fr; gap: 12px; padding: 8px; font-size: 11px; }
.bc-recent-events li:nth-child(odd) { background: var(--bc-color-surface-panel); border-radius: 6px; }
.bc-recent-events strong { font-weight: 500; }
.bc-recent-events time { color: var(--bc-color-text-secondary); }
.bc-recent-events .is-home { color: #8fc9ff; }
.bc-recent-events .is-away { color: #f2b976; }
.bc-skip-link { position: fixed; top: -60px; left: 16px; z-index: 9999; background: var(--bc-color-accent); color: #111820; padding: 12px 16px; border-radius: 8px; }
.bc-skip-link:focus { top: 12px; }
@media (min-width: 1025px) {
    .bc-workstation:not(.bc-filters-expanded) #filtersContainer { display: none; }
    .bc-workstation .bc-v2-workspace-shell:not(.bc-v2-view-grid) .bc-v2-match-rail { display: block; }
}
@media (max-width: 1399px) and (min-width: 769px) {
    .bc-workstation .bc-v2-workspace-shell:not(.bc-v2-view-grid) { grid-template-columns: 216px minmax(0,1fr); }
    .bc-workstation .bc-v2-workspace-shell.bc-v2-view-grid { grid-template-columns: minmax(0,1fr); }
    .bc-workstation .bc-v2-workspace-shell:not(.bc-v2-view-grid) .bc-v2-right-rail,
    .bc-workstation .bc-v2-workspace-shell.bc-v2-view-grid .bc-v2-right-rail {
        display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
        grid-template-rows: auto 1fr; gap: 0; position: static; max-height: none; overflow: visible;
    }
    .bc-workstation .bc-v2-workspace-shell:not(.bc-v2-view-grid) .bc-v2-right-rail { grid-column: 2; }
    .bc-workstation .bc-v2-workspace-shell.bc-v2-view-grid .bc-v2-right-rail { grid-column: 1; }
    .bc-workstation .bc-v2-right-rail .bc-v2-context {
        grid-column: 1; grid-row: 1 / span 2; border-bottom: 0; border-right: 1px solid var(--bc-color-line);
    }
    .bc-workstation .bc-v2-right-rail .bc-v2-feed-section { grid-column: 2; }
    .bc-workstation .bc-v2-right-rail .bc-inspector-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bc-workstation .bc-v2-interpretation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
}
@media (max-width: 1100px) and (min-width: 769px) {
    .bc-workstation .bc-dash-sidebar { width: 64px; }
    .bc-workstation .bc-dash-sidebar .bc-dash-brand-text, .bc-workstation .bc-dash-sidebar .bc-dash-nav span, .bc-workstation .bc-premium-note { display: none; }
    .bc-workstation .bc-dash-main { margin-left: 64px; }
    .bc-workstation .bc-v2-heading p, .bc-feed-status time { display: none; }
    .bc-workstation .bc-kpi { padding: 12px; }
    .bc-workstation .bc-kpi > i { display: none; }
}
@media (max-width: 768px) {
    .bc-workstation .bc-dash-main { margin-left: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .bc-workstation-topbar { padding: 12px; gap: 12px; flex-wrap: wrap; }
    .bc-global-search { width: 100%; order: 2; min-height: 44px; }
    .bc-feed-status { margin-left: 0; font-size: 11px; }
    .bc-account { margin-left: auto; padding-left: 12px; }
    .bc-workstation .bc-v2-header { padding: 16px 12px 0; }
    .bc-workstation .bc-v2-heading { flex-direction: row; align-items: center; gap: 8px; }
    .bc-workstation .bc-v2-heading h1 { font-size: 20px; }
    .bc-workstation .bc-v2-heading p, .bc-workstation .bc-v2-eyebrow { display: none; }
    .bc-workstation .bc-v2-heading-actions { gap: 4px; }
    .bc-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bc-workstation .bc-v2-workspace-shell:not(.bc-v2-view-grid),
    .bc-workstation .bc-v2-workspace-shell.bc-v2-view-grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: minmax(0, 1fr);
        padding: 0 12px;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }
    .bc-kpi { padding: 12px; }
    .bc-kpi strong { font-size: 24px; }
    .bc-kpi > i { top: 36px; right: 12px; font-size: 20px; }
    /* 11px is the smallest size that stays comfortably legible on a phone;
       10px captions were the only body text on this page below it. */
    .bc-kpi small { font-size: 11px; }
    .bc-workspace-toolbar { display: none; }
    .bc-workstation .bc-alert-filter-bar { margin: 12px; }
    .bc-workstation .bc-v2-mobile-filter-bar { display: flex; margin: 12px; }
    .bc-workstation .bc-v2-match-rail, .bc-workstation .bc-v2-right-rail { display: none; }
    .bc-workstation .bc-v2-match-header { display: none; }
    .bc-workstation .bc-match-league { font-size: 10px; padding: 12px; }
    .bc-workstation .bc-v2-selected-hero { padding: 0 12px 12px; }
    .bc-workstation .bc-v2-mobile-team { font-size: 15px; white-space: normal; }
    .bc-workstation .bc-v2-mobile-metric-strip { display: none; }
    .bc-workstation .bc-v2-mobile-tabs { background: var(--bc-color-surface-panel); border-bottom: 1px solid var(--bc-color-line); border-radius: 0; }
    .bc-workstation .bc-v2-mobile-tab { min-height: 44px; color: var(--bc-color-text-secondary); }
        /* Selected state matches the desktop view buttons exactly: the fill and the
       text carry it. No accent border and no accent underline — those were the
       only difference between the two, and they made the phone look like a
       different product. */
.bc-workstation .bc-v2-mobile-tab.is-active { color: #a9d9ff; background: var(--bc-color-surface-selected); }
    .bc-workstation .bc-v2-graph-shell { margin: 8px; padding: 12px 4px; }
    .bc-workstation .bc-v2-graph-head, .bc-workstation .bc-v2-graph-story { padding: 0 8px 12px; }
    .bc-workstation .chart-container { min-height: 240px; height: 260px; }
    .bc-workstation .filters-container { margin: 0; }
    .bc-workstation .bc-v2-mobile-match-picker { margin-top: 16px; border-radius: 12px; background: var(--bc-color-surface-raised); }
    .bc-workstation :is(button, select, summary, .bc-account) { min-height: 44px; }
    .bc-recent-events { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .bc-workstation *, .bc-workstation *::before, .bc-workstation *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
    body.bc-workstation { --bc-color-line: #718398; --bc-color-text-secondary: #d8e2ee; --bc-color-text-tertiary: #c6d2df; }
}
.bc-quick-views { display: flex; gap: 6px; flex-wrap: wrap; }
.bc-workspace-toolbar .bc-quick-views button { border-color: transparent; background: transparent; }
.bc-workspace-toolbar .bc-quick-views button[aria-pressed=true] { background: var(--bc-color-accent); color: #111820; font-weight: 600; }
.bc-league-control { margin: 0 0 0 auto; min-width: 0; }
.bc-league-control select { max-width: 180px; background: var(--bc-color-surface-panel); color: var(--bc-color-text); border: 1px solid var(--bc-color-line); padding: 8px; border-radius: 8px; font-size: 12px; }
.bc-feed-status.is-stale { color: var(--bc-color-warning); }
.bc-feed-status.is-stale .bc-status-dot { background: var(--bc-color-warning); }
@media (max-width: 1100px) and (min-width: 769px) {
    .bc-workspace-toolbar { flex-wrap: wrap; }
    .bc-league-control { margin-left: 0; }
}

/* Resolve the original fixed mini-chart width at both rail and mobile picker sizes. */
.bc-workstation .bc-v2-match-main { grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; }
.bc-workstation .bc-v2-match-mini-chart { width: 64px; min-width: 0; max-width: 64px; height: 42px; min-height: 42px; padding: 0; border: 0; background: transparent; }
.bc-workstation .bc-v2-match-mini-chart svg { width: 100%; height: 42px; }
.bc-workstation .bc-v2-match-teams strong, .bc-workstation .bc-v2-match-teams span { overflow: visible; text-overflow: clip; }
.bc-workstation .bc-v2-match-teams { display: grid; gap: 2px; }
.bc-workstation .bc-v2-match-scoreline { gap: 6px; flex-wrap: wrap; }
.bc-workstation .bc-v2-smart-sort-btn.is-active { background: var(--bc-color-surface-selected); border-color: var(--bc-color-accent); color: #a9d9ff; box-shadow: none; }
.bc-workstation .bc-v2-view-toggle { box-shadow: none; }
.bc-workstation .bc-demo-banner { margin: 12px 20px 0; padding: 10px 14px; background: var(--bc-color-surface-panel); border: 1px solid var(--bc-color-line); border-radius: 8px; color: var(--bc-color-text-secondary); font-size: 12px; }
.bc-workstation .bc-demo-banner a { background: var(--bc-color-surface-selected); color: #a9d9ff; box-shadow: none; border-radius: 6px; }
.bc-workstation .global-controls:empty { display: none; }
.bc-workstation .update-text { padding: 4px 16px; color: var(--bc-color-text-secondary); font-size: 10px; }
.bc-workstation .momentum-band { background: var(--bc-color-accent); box-shadow: none; height: 2px; }
.bc-workstation .bc-v2-match-header .legend-container { margin: 0; min-height: 90px; }
.bc-workstation .bc-v2-match-chat-btn { background: var(--bc-color-surface-raised); box-shadow: none; border-color: var(--bc-color-line); }
@media (max-width:768px) {
    /* Keep the compact 64×42 sparkline — 96×48 blew the match-row grid on 390px phones. */
    .bc-workstation .bc-v2-mobile-match-picker .bc-v2-match-main { grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; }
    .bc-workstation .bc-v2-mobile-match-picker .bc-v2-match-mini-chart { width: 64px; max-width: 64px; min-height: 42px; height: 42px; }
    .bc-workstation .bc-demo-banner { margin: 8px 12px; }
}
/* A single, finite goal announcement leaves the live graph readable. */
.bc-workstation .bc-goal-notice {
    --goal-color: var(--bc-color-home);
    position: absolute; top: 12px; left: 12px; right: 12px; z-index: 20;
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 16px; overflow: hidden; border-radius: 14px;
    border: 1px solid var(--bc-color-line); border-left: 3px solid var(--goal-color);
    background: #18232f; box-shadow: 0 12px 32px rgba(0,0,0,.3);
    pointer-events: none; animation: bcGoalArrival 4.6s ease both;
}
.bc-workstation .bc-goal-notice.is-away { --goal-color: var(--bc-color-away); }
.bc-workstation .bc-goal-notice.is-both { --goal-color: var(--bc-color-positive); }
.bc-goal-emblem { display: grid; place-items: center; width: 38px; height: 38px; font-size: 24px; border-radius: 50%; background: #253647; animation: bcGoalBall .65s cubic-bezier(.2,.8,.2,1) both; }
.bc-goal-copy { min-width: 0; }
.bc-goal-label { display: flex; align-items: center; gap: 10px; color: var(--goal-color); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.bc-goal-label span { color: var(--bc-color-text-secondary); letter-spacing: 0; font-weight: 500; }
.bc-goal-team { display: block; margin-top: 3px; color: var(--bc-color-text); font-size: clamp(15px, 2vw, 20px); line-height: 1.3; overflow-wrap: anywhere; }
.bc-goal-caption { display: block; margin-top: 4px; color: var(--bc-color-text-secondary); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.bc-goal-score { display: flex; gap: 6px; align-items: center; color: var(--bc-color-text); font-size: clamp(24px, 3vw, 34px); font-variant-numeric: tabular-nums; letter-spacing: calc(-0.088em + 1.632px); }
.bc-goal-score span { color: var(--bc-color-text-tertiary); font-size: .65em; }
.bc-goal-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--goal-color); transform-origin: left; animation: bcGoalProgress 4.6s linear both; }
@keyframes bcGoalArrival { 0% { opacity: 0; transform: translateY(-12px) scale(.98); } 8%, 86% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-6px); visibility: hidden; } }
@keyframes bcGoalBall { from { transform: rotate(-35deg) scale(.6); } to { transform: rotate(0) scale(1); } }
@keyframes bcGoalProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes bcGoalQuiet { 0%, 99% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
    .bc-workstation .bc-goal-notice { animation: bcGoalQuiet 4.6s step-end both; }
    .bc-goal-emblem { animation: none; }
    .bc-goal-progress { display: none; }
}
@media (max-width: 390px) {
    .bc-workstation .bc-goal-notice { grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 12px; }
    .bc-goal-emblem { display: none; }
}

/* Odds cards scan like live overview rows: match, market, previous → current, %, time. */
.bc-workstation .bc-v2-odds-card {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
    padding: 10px 6px; min-width: 0;
    background: transparent; border: 0; border-bottom: 1px solid var(--bc-color-line); border-radius: 0;
}
.bc-workstation .bc-v2-odds-card:last-child { border-bottom: 0; }
.bc-workstation .bc-v2-odds-top { display: none; }
.bc-workstation .bc-v2-odds-copy { min-width: 0; display: grid; gap: 1px; }
.bc-workstation .bc-v2-odds-copy strong,
.bc-workstation .bc-v2-odds-copy span {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; white-space: normal; overflow-wrap: anywhere;
}
.bc-workstation .bc-v2-odds-copy strong { font-size: 12px; line-height: 1.35; font-weight: 600; color: var(--bc-color-text); }
.bc-workstation .bc-v2-odds-copy span { font-size: 11px; line-height: 1.35; color: var(--bc-color-text-secondary); }
.bc-workstation .bc-v2-odds-prices {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; min-width: 0;
}
.bc-workstation .bc-v2-odds-price { min-width: 0; font-variant-numeric: tabular-nums; }
.bc-workstation .bc-v2-odds-price.is-prev { color: var(--bc-color-text-tertiary); font-size: 11px; text-decoration: line-through; text-decoration-thickness: 1px; }
.bc-workstation .bc-v2-odds-price.is-now { color: var(--bc-color-text); font-size: 14px; font-weight: 650; }
.bc-workstation .bc-v2-odds-arrow { font-size: 11px; color: var(--bc-color-text-tertiary); }
.bc-workstation .bc-v2-odds-arrow.is-negative { color: var(--bc-color-negative); }
.bc-workstation .bc-v2-odds-arrow.is-positive { color: var(--bc-color-positive); }
.bc-workstation .bc-odds-footer { display: contents; }
.bc-workstation .bc-v2-odds-badge {
    min-width: 0; margin: 0; margin-left: auto; padding: 2px 7px; border-radius: 6px;
    font-size: 10px; font-weight: 650; letter-spacing: .02em; font-variant-numeric: tabular-nums;
    border: 1px solid var(--bc-color-line);
}
.bc-workstation .bc-v2-odds-badge.is-negative { color: var(--bc-color-negative-text); background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .28); }
.bc-workstation .bc-v2-odds-badge.is-positive { color: var(--bc-color-positive-light); background: rgba(52, 199, 117, .12); border-color: rgba(52, 199, 117, .28); }
.bc-workstation .bc-v2-odds-badge.is-neutral { color: var(--bc-color-text-secondary); background: var(--bc-color-surface-panel); }
.bc-workstation .bc-v2-odds-meta { font-size: 10px; color: var(--bc-color-text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bc-workstation .bc-v2-right-rail .bc-v2-odds-card,
.bc-workstation .bc-v2-selected-odds-desktop .bc-v2-odds-card {
    gap: 4px; padding: 10px 6px; border-radius: 0; background: transparent;
    border: 0; border-bottom: 1px solid var(--bc-color-line);
}

.bc-rail-match { display: grid; grid-template-columns: 28px minmax(0,1fr) 18px; gap: 8px; align-items: center; }
.bc-rail-minute { color: var(--bc-color-positive); font-size: 11px; }
.bc-rail-teams, .bc-rail-score { display: grid; gap: 4px; font-size: 12px; line-height: 1.4; }
.bc-rail-score { align-self: start; text-align: right; }
.bc-rail-teams span { overflow-wrap: anywhere; }
.bc-rail-playtime { padding-left: 36px; color: var(--bc-color-text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.bc-rail-playtime strong { color: var(--bc-color-text); font-weight: 600; }
.bc-workstation .bc-v2-match-item .jl-radar-ticks { margin: 4px 0 2px 36px; }
.bc-rail-context { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 36px; min-height: 24px; }
/*
 * Rail sparkline size.
 *
 * The workstation redesign clamped this chart to 56x22 — a 72% cut in height and a hard
 * 56px ceiling on width. That is too small to read the shape of, which is the only thing
 * a sparkline is for. So it owns its own full-width row instead, and the tier and rank
 * badges wrap underneath rather than competing for the same line: on a 240px rail there
 * is not enough width for both a legible chart and two chips, and the chart is the part
 * carrying information.
 */
.bc-workstation .bc-rail-context .bc-v2-match-mini-chart {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    /* Height follows the drawing rather than fixing it, so the trace can fill the row. */
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/*
 * width:100% with height:auto lets the viewBox do the work: an SVG carrying
 * viewBox="0 0 104 32" sizes itself to the container width at its own 3.25 ratio, so the
 * box always MATCHES the drawing and preserveAspectRatio="none" has nothing left to
 * stretch. That is what keeps the latest-reading dots perfectly round at any width.
 * max-width only bounds how tall a row may get, since height here is width / 2.17.
 */
.bc-workstation .bc-rail-context .bc-v2-match-mini-chart svg {
    width: 100%;
    height: auto;
    max-width: 300px;
}

/*
 * Keeps the trace an even weight whatever box it is stretched into. The SVG is drawn with
 * preserveAspectRatio="none", so without this the non-uniform scale renders the line
 * thicker vertically than horizontally.
 */
.bc-workstation .bc-rail-context .bc-v2-match-mini-chart .home-line,
.bc-workstation .bc-rail-context .bc-v2-match-mini-chart .away-line,
.bc-workstation .bc-rail-context .bc-v2-match-mini-chart .baseline {
    vector-effect: non-scaling-stroke;
}

/*
 * Phone: the rail is hidden and the full-width picker renders these, so there is more
 * room. Width is capped rather than filled — the viewBox is 104x32 and the SVG scales
 * with preserveAspectRatio="none", so at the full width of a 375px screen the trace
 * stretches far more horizontally than vertically and the reading dots turn into ovals.
 * 210px holds the 2.17 ratio, so the marks stay round and the trend keeps its real shape.
 */
@media (max-width: 768px) {
    .bc-workstation .bc-rail-context .bc-v2-match-mini-chart {
        justify-content: flex-start;
    }
    .bc-workstation .bc-rail-context .bc-v2-match-mini-chart svg {
        max-width: 210px;
    }
}

.bc-rail-tier { color: var(--bc-color-orange); font-size: 11px; letter-spacing: .05em; font-weight: 600; }
.bc-workstation .bc-v2-match-item { gap: 8px; }
.bc-workstation .bc-v2-match-header { display: block; padding: 8px 16px; }
.bc-workstation .bc-v2-match-header .bc-v2-match-actions { justify-content: flex-end; margin-top: 0; }
.bc-workstation .bc-v2-match-header .legend-container { min-height: 72px; }
.bc-workstation .bc-v2-graph-story { padding: 8px 0; }
.bc-pressure-breakdown summary { color: var(--bc-color-text-secondary); cursor: pointer; font-size: 11px; padding: 8px 0; }
.bc-pressure-breakdown[open] { margin-bottom: 12px; }
.bc-workstation .bc-v2-context-meta { margin-top: 8px; }
.bc-workstation .bc-v2-match-chat-btn, .bc-workstation .bc-chat-open-btn { box-shadow: none; background: var(--bc-color-surface-raised); }
.bc-workstation .bc-v2-view-toggle::after, .bc-workstation .bc-v2-view-toggle::before { display: none; }
@media (max-width:768px) { .bc-workstation .bc-v2-match-header { display: none; } }
.bc-workstation .bc-v2-match-item { grid-template-columns: minmax(0, 1fr); }
.bc-workstation .chart-canvas { margin: 0; }
.bc-workstation .chart-container { padding: 8px 0; }
.bc-workstation .bc-v2-match-header { margin-bottom: 0; }
.bc-workstation .bc-v2-match-header .bc-v2-match-actions { display: flex; }
.bc-workstation .bc-v2-graph-guide .is-event { display: none; }
.bc-workstation .bc-v2-graph-guide { flex-wrap: wrap; }
.bc-workstation .bc-v2-graph-head { align-items: flex-start; }
.bc-workstation .bc-kpi { padding-top: 12px; padding-bottom: 12px; }
.bc-workstation .bc-v2-heading { margin-bottom: 12px; }
@media (max-width:768px) {
    body.bc-workstation .bc-dash-main { margin-left: 0; width: 100%; }
    body.bc-workstation .bc-v2-heading { flex-wrap: wrap; }
    body.bc-workstation .bc-v2-heading-actions { flex-wrap: wrap; }
    body.bc-workstation .bc-v2-workspace-shell .main-content { width: 100%; min-width: 0; }
    body.bc-workstation .bc-workspace-toolbar { display: flex; flex-wrap: wrap; margin: 8px 12px; padding: 8px; }
    body.bc-workstation #bcDesktopFilters { display: none; }
    body.bc-workstation .bc-league-control { width: 100%; margin-left: 0; }
    body.bc-workstation .bc-league-control select { width: 100%; max-width: none; }
    body.bc-workstation .bc-quick-views { flex-wrap: nowrap; width: 100%; }
    body.bc-workstation .bc-quick-views button { padding: 8px; font-size: 11px; flex: 1; }
}
.bc-dashboard-summary > summary { display: none; }
@media (max-width:768px) {
    .bc-dashboard-summary > summary { display: list-item; color: var(--bc-color-text-secondary); font-size: 12px; padding: 12px 0; cursor: pointer; }
    .bc-workstation .bc-demo-banner { display: flex; align-items: center; gap: 12px; }
    .bc-workstation .bc-demo-banner span { display: none; }
    .bc-workstation .bc-demo-banner::before { content: 'Live demo · Up to 3 matches'; font-size: 11px; }
    .bc-workstation .bc-demo-banner a { font-size: 11px; padding: 8px; margin-left: auto; }
    .bc-workstation .bc-v2-header { padding-top: 8px; }
    .bc-workstation .bc-v2-mobile-filter-bar { margin: 8px 12px; }
    .bc-workstation .bc-v2-mobile-match-top { padding-top: 8px; }
}
@media (max-width:768px) {
    body.bc-workstation .bc-dash-sidebar ~ .bc-dash-main { margin-left: 0; }
}
@media (min-width:769px) and (max-width:1100px) {
    body.bc-workstation .bc-dash-sidebar ~ .bc-dash-main { margin-left: 64px; }
}
/* Progressive disclosure and quiet feedback replace the legacy feature spotlights. */
.bc-workspace-tools > summary { display: none; }
.bc-workstation .clear-btn--hidden { display: none; }
.bc-workstation .bc-chat-trigger.is-new-feature,
.bc-workstation .bc-v2-view-toggle.has-grid-spotlight,
.bc-workstation .bc-v2-view-btn.is-spotlight { animation: none; box-shadow: none; border-color: var(--bc-color-line); }
.bc-workstation .bc-chat-new-badge { display: none; }
.bc-workstation .bc-v2-live-reading { font-weight: 400; }
.bc-workstation .bc-l2-strip { padding: 8px 16px; margin: 0; min-height: 0; border-top: 0; }
.bc-workstation .bc-l2-dominant { font-size: 12px; }
@media (max-width:768px) {
    .bc-workspace-tools > summary { display: list-item; cursor: pointer; padding: 12px; font-size: 12px; color: var(--bc-color-text-secondary); }
    .bc-workstation .bc-v2-mobile-action-passive { display: none; }
    .bc-workstation .bc-v2-mobile-action-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .bc-workstation .bc-v2-selected-hero { margin: 0; }
    .bc-workstation .bc-v2-mobile-match-shell { padding: 0; background: transparent; border: 0; }
    .bc-workstation .bc-v2-mobile-match-top { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; }
    .bc-workstation .bc-v2-mobile-team-home { grid-column: 1; grid-row: 1; }
    .bc-workstation .bc-v2-mobile-score-block { grid-column: 2; grid-row: 1; }
    .bc-workstation .bc-v2-mobile-team-away { grid-column: 3; grid-row: 1; text-align: right; }
    .bc-workstation .bc-v2-mobile-meta-row { display: none; }
    .bc-workstation .bc-v2-mobile-action-row { margin-top: 12px; }
    .bc-workstation .bc-v2-mobile-team { font-size: 13px; }
    .bc-workstation .bc-v2-mobile-score-block strong { font-size: 28px; }
    .bc-workstation .match-card { display: flex; flex-direction: column; }
    .bc-workstation .bc-match-league { order: 0; }
    .bc-workstation .bc-v2-selected-hero { order: 1; }
    .bc-workstation .bc-l2-strip { order: 2; }
    .bc-workstation .bc-v2-mobile-tabs { order: 3; }
    .bc-workstation .bc-v2-mobile-panels { order: 4; }
}
.bc-workstation .bc-v2-graph-shell { display: flex; flex-direction: column; }
.bc-workstation .bc-v2-graph-head { order: 0; }
.bc-workstation .chart-container { order: 1; }
.bc-workstation .bc-v2-graph-story { order: 2; }
.bc-workstation .event-ladder { order: 3; }
.bc-workstation .bc-v2-mobile-tabs { display: flex; gap: 6px; padding: 8px 12px; margin: 0 0 12px; border-bottom: 1px solid var(--bc-color-line); }
.bc-workstation .bc-v2-mobile-tab { flex: 1; padding: 8px 12px; border: 1px solid var(--bc-color-line); border-radius: 8px; color: var(--bc-color-text-secondary); background: var(--bc-color-surface-raised); font-size: 12px; }
/* The chip keeps a border so it does not change shape when selected, but it is the
   same neutral line as the idle chips — selection reads from fill and text, as on
   desktop, not from a bright ring. */
.bc-workstation .bc-v2-mobile-tab.is-active { color: #a9d9ff; background: var(--bc-color-surface-selected); border-color: var(--bc-color-line); }
.bc-workstation .bc-v2-mobile-panel[hidden] { display: none; }
.bc-workstation .bc-v2-mobile-panel.is-active { display: block; }
.bc-workstation .bc-tab-mobile { display: none; }
.bc-momentum-meters { margin: 0 0 16px; }
.bc-momentum-meters > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin-bottom: 8px; font-size: 11px; }
.bc-momentum-meters span, .bc-momentum-meters small { color: var(--bc-color-text-secondary); }
.bc-momentum-meters small { font-size: 10px; }
.bc-momentum-meters meter { grid-column: 1 / -1; width: 100%; height: 8px; background: var(--bc-color-surface-overlay); border: 0; border-radius: 4px; }
.bc-momentum-meters meter::-webkit-meter-bar { background: var(--bc-color-surface-overlay); border: 0; }
.bc-momentum-meters meter::-webkit-meter-optimum-value { background: var(--bc-color-home); }
.bc-momentum-meters meter.is-away::-webkit-meter-optimum-value { background: var(--bc-color-away); }
.bc-momentum-meters meter::-moz-meter-bar { background: var(--bc-color-home); }
.bc-momentum-meters meter.is-away::-moz-meter-bar { background: var(--bc-color-away); }
@media (min-width:769px) {
    .bc-workstation .bc-v2-mobile-panel.is-context.is-active, .bc-workstation .bc-v2-mobile-panel.is-odds.is-active { padding: 16px; }
}
@media (max-width:768px) {
    .bc-workstation .bc-tab-desktop { display: none; }
    .bc-workstation .bc-tab-mobile { display: inline; }
    .bc-workstation .bc-v2-mobile-tabs { margin: 0; gap: 4px; padding: 8px; }
    .bc-workstation .bc-v2-mobile-tab { padding: 8px; }
    .bc-workstation .bc-v2-graph-guide { flex-direction: row; align-items: center; gap: 4px 12px; }
    .bc-workstation .bc-v2-graph-head { gap: 8px; }
    .bc-workstation .bc-v2-guide-pill { padding: 0; }
}
@media (min-width:769px) {
    .bc-workstation .bc-v2-header { padding-top: 12px; }
    .bc-workstation .bc-v2-eyebrow, .bc-workstation .bc-v2-heading p { display: none; }
    .bc-workstation .bc-v2-heading h1 { font-size: 18px; margin: 0; }
    .bc-workstation .bc-v2-match-header .bc-v2-match-actions { position: absolute; top: 8px; right: 12px; }
    .bc-workstation .bc-match-league { padding-right: 196px; min-height: 38px; }
    .bc-workstation .bc-match-league-live { display: none; }
    .bc-workstation .bc-v2-match-header .legend-container { padding: 0; min-height: 80px; }
}
.bc-workstation .bc-chat-drawer[aria-hidden="true"] { display: none; }
.bc-workstation .bc-v2-mobile-tab { min-width: 0; }
@media (max-width:768px) {
    body.bc-workstation .bc-dash-main { transition: none; }
    .bc-workstation .bc-demo-banner { flex-wrap: wrap; }
    .bc-workstation .bc-v2-mobile-team { overflow-wrap: anywhere; min-width: 0; }
}

@media (min-width:769px) and (max-width:1024px) {
    body.bc-workstation #bcDesktopFilters { display: none; }
    body.bc-workstation .bc-v2-mobile-filter-bar { margin: 12px 20px; width: auto; }
    body.bc-workstation .bc-dash-sidebar .bc-dash-footer > a span { display: none; }
}

/* Right inspector: live overview density — pills, tabular nums, hairlines, home/away. */
.bc-inspector { display: grid; gap: 10px; }
.bc-inspector-kicker {
    margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--bc-color-text-tertiary);
}
.bc-inspector-score {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 8px;
}
.bc-inspector-team {
    font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bc-inspector-team.is-home { color: var(--bc-color-home); }
.bc-inspector-team.is-away { color: var(--bc-color-away); text-align: right; }
.bc-inspector-scoreline { text-align: center; }
.bc-inspector-scoreline strong {
    display: block; font-size: 22px; font-weight: 650; letter-spacing: -.4px;
    font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--bc-color-text);
}
.bc-inspector-scoreline span {
    display: block; margin-top: 2px; font-size: 11px; font-weight: 600;
    color: var(--bc-color-positive); font-variant-numeric: tabular-nums;
}
.bc-inspector-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bc-inspector-pill,
.bc-workstation .bc-v2-right-rail .bc-v2-signal-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 6px;
    border: 1px solid var(--bc-color-line); background: var(--bc-color-surface-raised);
    color: var(--bc-color-text-secondary); font-size: 10px; font-weight: 650;
    letter-spacing: .03em; line-height: 1.3;
}
.bc-inspector-pill span {
    color: var(--bc-color-text-tertiary); text-transform: uppercase; letter-spacing: .06em; font-size: 11px;
}
.bc-inspector-pill.is-caution { color: var(--bc-color-warning); border-color: rgba(245, 158, 11, .35); }
.bc-inspector-pill.is-signal { color: #9bd2ff; border-color: rgba(77, 166, 255, .35); }
.bc-workstation .bc-v2-right-rail .bc-v2-signal-badge.is-strong { color: var(--bc-color-positive-light); border-color: rgba(52, 199, 117, .4); background: rgba(52, 199, 117, .1); }
.bc-workstation .bc-v2-right-rail .bc-v2-signal-badge.is-mixed { color: var(--bc-color-warning-text); border-color: rgba(245, 158, 11, .4); background: rgba(245, 158, 11, .1); }
.bc-workstation .bc-v2-right-rail .bc-v2-signal-badge.is-weak { color: var(--bc-color-text-secondary); }
.bc-workstation .bc-v2-right-rail .bc-v2-signal-badge.is-caution { color: #fdba74; border-color: rgba(249, 115, 22, .4); }
.bc-inspector-leader {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px;
    padding: 0 0 0 10px; border-left: 2px solid var(--bc-color-text-tertiary);
}
.bc-inspector-leader.is-home { border-color: var(--bc-color-home); }
.bc-inspector-leader.is-away { border-color: var(--bc-color-away); }
.bc-inspector-leader span { font-size: 14px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; }
.bc-inspector-leader small { color: var(--bc-color-text-secondary); font-size: 11px; }
.bc-inspector-pt { display: grid; gap: 6px; }
.bc-inspector-pt-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, 1.4fr) 28px;
    align-items: center; gap: 8px; min-width: 0;
}
.bc-inspector-pt-row span {
    font-size: 11px; color: var(--bc-color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc-inspector-pt-row.is-home span { color: var(--bc-color-home); }
.bc-inspector-pt-row.is-away span { color: var(--bc-color-away); }
.bc-inspector-pt-track { height: 6px; border-radius: 999px; background: var(--bc-color-surface-overlay); overflow: hidden; }
.bc-inspector-pt-track i { display: block; height: 100%; border-radius: inherit; background: var(--bc-color-home); }
.bc-inspector-pt-row.is-away .bc-inspector-pt-track i { background: var(--bc-color-away); }
.bc-inspector-pt-row b { font-size: 12px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.bc-inspector-pt small { font-size: 10px; color: var(--bc-color-text-tertiary); }
.bc-inspector-read {
    margin: 0; font-size: 12px; line-height: 1.5; color: var(--bc-color-text-secondary);
}
.bc-inspector-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.bc-inspector-stats > div {
    padding: 8px 10px; border: 1px solid var(--bc-color-line); border-radius: 8px; background: var(--bc-color-surface-raised); min-width: 0;
}
.bc-inspector-stats span { display: block; font-size: 10px; color: var(--bc-color-text-tertiary); letter-spacing: .04em; text-transform: uppercase; }
.bc-inspector-stats strong,
.bc-inspector-stats b {
    display: inline-block; margin-top: 3px; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.bc-inspector-stats strong.is-home { color: var(--bc-color-home); margin-right: 8px; }
.bc-inspector-stats b.is-away { color: var(--bc-color-away); }
.bc-inspector-action {
    margin: 0; padding-top: 2px; font-size: 12px; line-height: 1.45; color: var(--bc-color-text-secondary);
}
.bc-inspector-action span {
    display: block; margin-bottom: 2px; font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--bc-color-text-tertiary);
}
.bc-inspector--empty { padding: 4px 0 8px; }
.bc-inspector--empty strong { display: block; font-size: 14px; font-weight: 600; }
.bc-inspector--empty span { display: block; margin-top: 4px; font-size: 12px; color: var(--bc-color-text-secondary); line-height: 1.5; }
.bc-workstation .bc-v2-interpretation-row b.is-strong { color: var(--bc-color-positive-light); }
.bc-workstation .bc-v2-interpretation-row b.is-mixed { color: var(--bc-color-warning-text); }
.bc-workstation .bc-v2-interpretation-row b.is-none { color: var(--bc-color-text-secondary); font-weight: 500; }
@media (min-width: 1400px) {
    .bc-workstation .bc-v2-right-rail .bc-inspector-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone recovery — last so it beats earlier desktop-first grids. */
@media (max-width: 768px) {
    html, body.bc-workstation { overflow-x: clip; }
    .bc-workstation .bc-dash-main,
    .bc-workstation .bc-v2-grid,
    .bc-workstation .bc-v2-workspace-shell,
    .bc-workstation .main-content,
    .bc-workstation .match-card,
    .bc-workstation .chart-container,
    .bc-workstation .chart-canvas {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .bc-workstation .bc-v2-workspace-shell:not(.bc-v2-view-grid),
    .bc-workstation .bc-v2-workspace-shell.bc-v2-view-grid,
    .bc-workstation .bc-v2-grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .bc-workstation .bc-v2-match-rail,
    .bc-workstation .bc-v2-right-rail { display: none; }
    .bc-workstation .bc-v2-match-main,
    .bc-workstation .bc-v2-mobile-match-picker .bc-v2-match-main {
        grid-template-columns: minmax(0, 1fr) 64px;
        gap: 8px;
        width: 100%;
    }
    .bc-workstation .bc-v2-match-mini-chart,
    .bc-workstation .bc-v2-mobile-match-picker .bc-v2-match-mini-chart {
        width: 64px;
        max-width: 64px;
        height: 42px;
        min-height: 42px;
    }
    /* The rail sparkline keeps its own full-width row here too — this block
       used to re-clamp it to 56x22, which undid the desktop rule on every
       viewport under 768px. Width is capped (not filled) so the 104x32
       viewBox keeps its 2.17 ratio and the reading dots stay round. */
    .bc-workstation .bc-rail-context .bc-v2-match-mini-chart {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        justify-content: flex-start;
    }
    .bc-workstation .bc-rail-context .bc-v2-match-mini-chart svg {
        width: 100%;
        height: auto;
        max-width: 210px;
    }
    .bc-workstation .bc-rail-match { grid-template-columns: 28px minmax(0, 1fr) auto; min-width: 0; }
    .bc-workstation .bc-v2-pressure-grid,
    .bc-workstation .bc-v2-pressure-grid.is-compact-density {
        grid-template-columns: minmax(0, 1fr);
    }
    .bc-workstation .bc-v2-mobile-action-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bc-workstation .bc-v2-mobile-action,
    .bc-workstation .bc-v2-mobile-tab { min-height: 44px; }
    .bc-workstation .bc-quick-views { flex-wrap: wrap; }
    .bc-workstation .bc-feed-status { white-space: normal; }
    .bc-workstation .legend-container { margin-right: 0; min-width: 0; }
    .bc-workstation .filters-container,
    .bc-workstation .chart-container,
    .bc-workstation .match-card {
        width: 100%;
        max-width: 100%;
    }
}


/* ==========================================================================
   Touch and accessibility layer.

   This is a dense workspace: control sizes are deliberately compact for a
   precise pointer, so the 44px minimum is applied only under a coarse
   pointer rather than inflating every control on the desktop. Hover lifts
   are neutralised where hover is not real, because on a touch screen they
   stick after the tap.
   ========================================================================== */
/* ==========================================================================
   Rail rank chip — touch target without visual inflation
   ==========================================================================
   The mobile block applies `min-height: 44px` to every button, which is right
   for real controls and wrong for this one: #4 is a 18px information chip, and
   forcing it to 44px made it two and a half times the height of the HOT label
   beside it and stretched the whole context row.

   Apple's 44px guidance is about the HIT AREA, not the drawn control, so the
   chip keeps its size and an invisible ::after carries the target. The chip is
   also pinned back to 10px because a later `font: inherit` resets the 10px the
   base rule sets, which is what pushed it to 13px.
   ========================================================================== */
.bc-workstation .bc-rail-context .bc-v2-smart-rank {
    min-height: 0;
    height: 18px;
    min-width: 22px;
    padding: 0 6px;
    font-size: 10px;
    line-height: 1;
    align-self: center;
    position: relative;
}

/* 18px chip + 13px above and below = a 44px target, and inset does not
   participate in layout so the row height is unchanged. */
.bc-workstation .bc-rail-context .bc-v2-smart-rank::after {
    content: "";
    position: absolute;
    inset: -13px -8px;
}

/* Same treatment for the chat chip. This one IS a real action, so it keeps the
   full 44px target — but it is drawn at its designed 28px instead of 44px, which
   is what was misaligning it against the 17px tier label and stretching the row. */
.bc-workstation .bc-rail-context .bc-v2-match-chat-compact {
    min-height: 0;
    height: 28px;
    /* The base rule adds margin-top: 6px for a stacked layout; in this row it
       just pushes the chip 3px below the tier and rank chips' centre line. */
    margin-top: 0;
    align-self: center;
    position: relative;
}

.bc-workstation .bc-rail-context .bc-v2-match-chat-compact::after {
    content: "";
    position: absolute;
    inset: -8px -6px;
    /* The rank chip's target sits immediately to the left and its 8px of
       horizontal bleed reaches this chip. Where the two overlap the real
       action should win, not the tooltip, so this one is raised. */
    z-index: 1;
}

/* ==========================================================================
   Copy-a-team-name, on the phone too
   ==========================================================================
   Tapping a team name copies it. The handler is delegated on .mobile-copyable,
   so the class is all that is needed — but two things kept it desktop-only:

     1. The desktop match-card header that carries the copyable names is
        `display: none` on mobile, so its spans measured 0x0. A finger cannot
        hit a zero-sized box (a scripted .click() still fires, which is why
        this looked like it worked when probed rather than tapped).
     2. The .mobile-copyable styling lives in a `min-width: 1025px` block in
        betcoach-pressure-components.css, so despite its name it only ever
        styled desktop.

   The class goes on the focused match's own header — the hero — and not on
   the rail rows: the rail is for picking a match, so a tap there selects it
   rather than copying. Copy lives where the match is being looked at.
   ========================================================================== */
.bc-workstation .bc-v2-mobile-team.mobile-copyable {
    cursor: pointer;
    /* Drops the 300ms double-tap-zoom wait so the copy fires at once. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 4px;
    position: relative;
    transition: background-color 0.2s ease;
}

/* Feedback on press, not on release — the tap has to look like it landed. */
.bc-workstation .bc-v2-mobile-team.mobile-copyable:active {
    background-color: var(--bc-color-line-medium);
}

/* The hero name is a 16px line box, too short to tap comfortably.
 *
 * It cannot be grown with an inset ::after the way the rank chip was: this
 * element carries `overflow: hidden` for its ellipsis, which clips the
 * pseudo-element, so the larger target would look right in the CSS and not
 * exist on screen. Padding lives inside the border box and is hit-tested
 * even when overflow is hidden, and the matching negative margin keeps the
 * row exactly where it was. */
@media (pointer: coarse) {
    .bc-workstation .bc-v2-mobile-team.mobile-copyable {
        padding-block: 10px;
        margin-block: -10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bc-workstation .bc-v2-mobile-team.mobile-copyable { transition: none; }
}

@media (pointer: coarse) {
    .bc-workstation .bc-v2-guide-pill { display: inline-flex; align-items: center; min-height: 44px; }
    .bc-workstation :is(.bc-v2-view-btn, .bc-v2-smart-sort-btn, .bc-v2-grid-density-btn) {
        display: inline-flex; align-items: center; min-height: 44px;
    }
    .bc-workspace-toolbar button { display: inline-flex; align-items: center; min-height: 44px; }
    .bc-skip-link { display: inline-flex; align-items: center; min-height: 44px; }
    body.bc-workstation .bc-quick-views button { display: inline-flex; align-items: center; min-height: 44px; }
    .bc-workstation .bc-v2-mobile-tab { display: inline-flex; align-items: center; min-height: 44px; }
    .bc-inspector-pill { min-height: 44px; }
    .bc-workstation .bc-v2-right-rail .bc-v2-signal-badge { min-height: 44px; }
}