/* Release 399: on Games cards, the designer's dropdown as "My sportsbook" and the designer's open/close row as "How we got these
   numbers" (also on Live cards). Same specificity guard as b378_tables.css. */
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-pick { white-space: nowrap; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 !important; padding: 10px 18px 0 !important; font: 700 13px/1.3 var(--b-font) !important; color: var(--b-muted, #6f6c90) !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-pick select { flex: 0 1 220px; min-width: 0; height: 38px; padding: 0 34px 0 12px !important; border: 1px solid #d9dbe9 !important; border-radius: 8px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23170f49' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center !important; -webkit-appearance: none; appearance: none; color: var(--b-ink, #170f49) !important; font: 600 14px/1.2 var(--b-font) !important; cursor: pointer; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-pick select:focus-visible { outline: 2px solid var(--b-primary-600, #4647E5) !important; outline-offset: 2px; }

html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how { margin: 0 !important; padding: 0 18px !important; border-top: 1px solid var(--t8-line, #eceaf4) !important; background: #fff !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 !important; list-style: none; cursor: pointer; color: var(--b-ink, #170f49) !important; font: 700 14px/1.3 var(--b-font) !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how > summary::-webkit-details-marker { display: none; }
/* release 401 (owner: "+ is not centered"): the plus and minus are drawn, not typed, so they sit in the exact middle of the circle */
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how > summary::after { content: ""; flex: none; box-sizing: border-box; width: 24px; height: 24px; border: 1.5px solid #98a2b3; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%23667085' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 12px 12px; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how[open] > summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h9' stroke='%23667085' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how > summary:focus-visible { outline: 2px solid var(--b-primary-600, #4647E5); outline-offset: 2px; border-radius: 4px; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how ul { display: grid; gap: 12px; margin: 0 !important; padding: 0 0 16px !important; list-style: none !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how li { margin: 0 !important; padding: 0 !important; color: var(--b-ink, #170f49) !important; font: 400 14px/1.5 var(--b-font) !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how li > b { font-weight: 800; margin-right: 4px; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how li small { display: block; margin-top: 2px; color: var(--b-muted, #667085) !important; font: 400 13px/1.45 var(--b-font) !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-how .g8-how-sum { display: block; font-variant-numeric: tabular-nums; }

/* Release 400: the card's control bar (My sportsbook, Market, odds pill), the spread/total table note and the in-card alerts */
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 0 !important; padding: 14px 18px 16px !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-bar .g8-pick { padding: 0 !important; flex: 1 1 160px; flex-direction: column; align-items: stretch; gap: 4px; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-bar .g8-pick select { flex: none; width: 100%; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-ctl { display: flex; flex-direction: column; gap: 4px; flex: 1 1 120px; max-width: 180px; margin: 0 !important; font: 700 13px/1.3 var(--b-font) !important; color: var(--b-muted, #6f6c90) !important; white-space: nowrap; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-ctl select { width: 100%; height: 38px; padding: 0 34px 0 12px !important; border: 1px solid #d9dbe9 !important; border-radius: 8px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23170f49' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center !important; -webkit-appearance: none; appearance: none; color: var(--b-ink, #170f49) !important; font: 600 14px/1.2 var(--b-font) !important; cursor: pointer; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-ctl select:focus-visible { outline: 2px solid var(--b-primary-600, #4647E5) !important; outline-offset: 2px; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-odds { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: #f1f0fb; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-odds button { min-height: 32px; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--b-muted, #6f6c90) !important; font: 700 13px/1 var(--b-font) !important; cursor: pointer; box-shadow: none !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-odds button[aria-pressed="true"] { background: #fff !important; color: var(--b-ink, #170f49) !important; box-shadow: 0 1px 3px rgba(20, 20, 43, .14) !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-odds button:focus-visible { outline: 2px solid var(--b-primary-600, #4647E5) !important; outline-offset: 1px; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-t.is-lines .g8-pt { color: var(--b-muted, #6f6c90); font-weight: 600; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-note { margin: 0 !important; padding: 10px 18px 12px !important; color: var(--b-muted, #667085) !important; font: 400 13px/1.45 var(--b-font) !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-alert { display: flex; gap: 10px; align-items: flex-start; margin: 10px 18px 0 !important; padding: 10px 12px !important; border-radius: 10px; background: #f6f5ff; color: var(--b-ink, #170f49); }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-alert-i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eceafe; color: #4b3fd8; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-alert p { margin: 0 !important; color: #6f6c90 !important; font: 400 13px/1.45 var(--b-font) !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body :is(.g8.g8.g8, .lv8) .g8-alert b { color: var(--b-ink, #170f49); font-weight: 800; }
@media (max-width: 480px) { html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-odds { order: -1; } }

/* Live: the toggle above the list and the card's own sportsbook row and picker */
html:not(#t399a):not(#t399b):not(#t399c) body .lv-bar .lv-when { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: auto !important; height: auto !important; padding: 3px !important; border: 0 !important; border-radius: 999px !important; background: #f1f0fb !important; align-self: center; box-shadow: none !important; }
html:not(#t399a):not(#t399b):not(#t399c) body .lv-bar .lv-when[hidden] { display: none !important; }
html:not(#t399a):not(#t399b):not(#t399c) body .lv-bar .lv-when::before, html:not(#t399a):not(#t399b):not(#t399c) body .lv-bar .lv-when::after { content: none !important; display: none !important; }
html:not(#t399a):not(#t399b):not(#t399c) body .lv-bar .lv-when button { display: inline-flex !important; align-items: center; width: auto !important; min-height: 32px; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #6f6c90 !important; font: 700 13px/1 var(--b-font, Nunito, system-ui, sans-serif) !important; white-space: nowrap; cursor: pointer; box-shadow: none !important; }
html:not(#t399a):not(#t399b):not(#t399c) body .lv-bar .lv-when button[aria-pressed="true"] { background: #fff !important; color: #170f49 !important; box-shadow: 0 1px 3px rgba(20, 20, 43, .14) !important; }
html:not(#t399a):not(#t399b):not(#t399c) body .lv-bar .lv-when button:focus-visible { outline: 2px solid #4647E5 !important; outline-offset: 1px; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .lv8 .lv8-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 !important; padding: 10px 18px !important; border-top: 1px solid var(--t8-line, #eceaf4); font: 700 13px/1.3 var(--b-font) !important; color: #6f6c90 !important; white-space: nowrap; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .lv8 .lv8-pick select { flex: 0 1 200px; min-width: 0; height: 36px; padding: 0 30px 0 10px !important; border: 1px solid #d9dbe9 !important; border-radius: 8px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23170f49' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center !important; -webkit-appearance: none; appearance: none; color: #170f49 !important; font: 600 14px/1.2 var(--b-font, Nunito, system-ui, sans-serif) !important; }

/* release 401: even spacing on the card (flags, alerts and the control bar on one 14px rhythm); the odds pill as tall as the dropdowns */
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-flags { padding: 14px 18px 0 !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-alert { margin: 14px 18px 0 !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-odds { height: 38px; box-sizing: border-box; align-items: stretch; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .g8.g8.g8 .g8-odds button { min-height: 0 !important; }
/* Live: the sportsbooks' chance as one bar, and mirrored team-stat bars (designer's kit) */
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .lv8 tr.lv8-wp td, html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .lv8 tr.lv8-mbars td { padding: 0 18px 10px !important; border-top: 0 !important; background: transparent !important; }
html:not(#t399a):not(#t399b):not(#t399c):not(#t399d):not(#t399e) body .lv8 tr.lv8-stat :is(td, th) { border-bottom: 0 !important; padding-bottom: 4px !important; }
.lv8 .lv8-wpbar { display: flex; gap: 3px; height: 8px; }
.lv8 .lv8-wpbar i { display: block; height: 100%; border-radius: 999px; min-width: 4px; }
.lv8 .lv8-wpbar .is-a, .lv8 .lv8-mbar.is-a i { background: #5663F0; }
.lv8 .lv8-wpbar .is-b, .lv8 .lv8-mbar.is-b i { background: #F97316; }
.lv8 .lv8-wpbar .is-d { background: #A3A8B8; }
.lv8 tr.lv8-mbars td > span { display: inline-flex; width: calc(50% - 3px); height: 6px; border-radius: 999px; background: #E6E8F0; overflow: hidden; vertical-align: middle; }
.lv8 tr.lv8-mbars td > span + span { margin-left: 6px; }
.lv8 .lv8-mbar.is-a { justify-content: flex-end; }
.lv8 .lv8-mbar i { display: block; height: 100%; border-radius: 999px; }