/* release 428: the Watchlist tab as a portfolio table (the owner's Preline order-table reference, in the site's own colours):
   a white card, a segmented All / Upcoming / Finished filter and a search box, light grey head row, pill statuses with icons,
   and the change since saving as a green up or red down triangle with the sign (never colour alone). */
.wl { background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); overflow: hidden; }
.wl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.wl-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #F2F4F7; }
.wl-seg button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #475467; font: 700 13.5px/1 var(--b-font, Nunito, system-ui, sans-serif); cursor: pointer; }
.wl-seg button span { color: #98A2B3; font-weight: 600; }
.wl-seg button[aria-pressed="true"] { background: #fff; color: #170F49; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.wl-seg button:focus-visible, .wl-act:focus-visible, .wl-game:focus-visible { outline: 2px solid #4647E5; outline-offset: 2px; }
.wl-search { position: relative; flex: 0 1 340px; }
.wl-search svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: none; stroke: #98A2B3; stroke-width: 2; stroke-linecap: round; }
.wl-search input { width: 100%; min-height: 40px; padding: 0 12px 0 38px; border: 1px solid transparent; border-radius: 10px; background: #F2F4F7; color: #170F49; font: 500 14px/1 var(--b-font, Nunito, system-ui, sans-serif); }
.wl-search input:focus { outline: none; border-color: #4647E5; background: #fff; }
.wl-sum { margin: 0; padding: 0 18px 12px; color: #475467; font: 600 13.5px/1.5 var(--b-font, Nunito, system-ui, sans-serif); }
.wl-sum b { color: #170F49; }
.wl-sum small { color: #98A2B3; font-weight: 500; }
.wl-up { color: #067647; } .wl-down { color: #B42318; }
.wl-scroll { overflow-x: auto; border-top: 1px solid #E5E7EB; }
.wl-t { width: 100%; min-width: 0; border-collapse: collapse; font: 500 14.5px/1.35 var(--b-font, Nunito, system-ui, sans-serif); font-variant-numeric: tabular-nums; color: #303131; }
.wl-t thead th { padding: 11px 16px; background: #F7F7FB; color: #667085; font-weight: 600; font-size: 13px; text-align: right; white-space: nowrap; border-bottom: 1px solid #E5E7EB; }
.wl-t thead th:first-child, .wl-t .wl-l { text-align: left; }
.wl-t td, .wl-t tbody th { padding: 12px 16px; border-bottom: 1px solid #F0F0F0; text-align: right; vertical-align: middle; }
.wl-t tbody th { text-align: left; font-weight: 600; }
.wl-t tbody tr:hover { background: #F5F6FF; }
.wl-t tbody tr:last-child > * { border-bottom: 0; }
.wl-t small { display: block; margin-top: 2px; color: #667085; font-size: 12px; font-weight: 500; white-space: nowrap; }
.wl-t b { font-weight: 800; color: #170F49; }
html body .wl .wl-t a.wl-game { color: #4647E5 !important; font-weight: 800; text-decoration: none !important; border: 0 !important; }
html body .wl .wl-t a.wl-game:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.wl-pick { display: block; }
.wl-muted { color: #98A2B3; }
.wl-chg { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; column-gap: 4px; font-weight: 800; white-space: nowrap; }
.wl-chg i { font-style: normal; font-size: .78em; }
.wl-chg small { flex-basis: 100%; text-align: right; margin: 0; }
.wl-chg.is-up { color: #067647; } .wl-chg.is-down { color: #B42318; } .wl-chg.is-flat { color: #98A2B3; font-weight: 600; }
.wl-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: #F2F4F7; color: #344054; font-weight: 700; font-size: 13px; white-space: nowrap; }
.wl-pill i { font-style: normal; }
.wl-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wl-pill.is-up { background: #EEF0FE; color: #3B3CC4; }
.wl-pill.is-good { background: #ECFDF3; color: #067647; }
.wl-pill.is-bad { background: #FEF3F2; color: #B42318; }
.wl-pill.is-live { background: #ECFDF3; color: #067647; }
.wl-pill.is-live i { width: 7px; height: 7px; border-radius: 50%; background: #12B76A; }
.wl-acts { white-space: nowrap; }
.wl-act { min-height: 32px; padding: 0 10px; margin-left: 4px; border: 1px solid #D0D5DD; border-radius: 8px; background: #fff; color: #344054; font: 700 12.5px/1 var(--b-font, Nunito, system-ui, sans-serif); cursor: pointer; }
.wl-act:hover { border-color: #4647E5; color: #3B3CC4; }
.wl-act.is-quiet { border-color: transparent; color: #667085; }
.wl-act.is-quiet:hover { color: #B42318; border-color: transparent; }
.wl-none { text-align: center !important; color: #667085; padding: 28px 16px !important; }
.wl-note { margin: 0; padding: 12px 18px 16px; border-top: 1px solid #E5E7EB; color: #667085; font: 500 12.5px/1.5 var(--b-font, Nunito, system-ui, sans-serif); }
.wl .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) { .wl-bar { padding: 14px 14px 8px; } .wl-search { flex-basis: 100%; } .wl-sum { padding: 0 14px 10px; } }
/* phones: each row as a compact card (game and status, pick and change, saved and now, actions), so the change is never off screen */
@media (max-width: 980px) {
  .wl-scroll { overflow: visible; }
  .wl-t { min-width: 0; }
  .wl-t thead { display: none; }
  .wl-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 14px; border-bottom: 1px solid #F0F0F0; }
  .wl-t tbody tr > th { grid-column: 1 / -1 !important; padding-right: 110px !important; }
  .wl-t tbody tr > td:nth-child(6) { position: absolute; right: 14px; }
  .wl-t tbody tr { position: relative; }
  .wl-t tbody tr:last-child { border-bottom: 0; }
  .wl-t tbody tr > * { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; text-align: left; min-width: 0; }
  .wl-t tbody tr > th { grid-column: 1; grid-row: 1; }
  .wl-t tbody tr > td:nth-child(6) { grid-column: 2; grid-row: 1; text-align: right; }
  .wl-t tbody tr > td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .wl-t tbody tr > td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; }
  .wl-t tbody tr > td:nth-child(3) { grid-column: 1; grid-row: 3; }
  .wl-t tbody tr > td:nth-child(4) { grid-column: 2; grid-row: 3; text-align: right; }
  .wl-t tbody tr > td:nth-child(3)::before, .wl-t tbody tr > td:nth-child(4)::before { display: block; color: #98A2B3; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .wl-t tbody tr > td:nth-child(3)::before { content: "Saved"; }
  .wl-t tbody tr > td:nth-child(4)::before { content: "Now"; }
  .wl-t tbody tr > td:nth-child(7) { grid-column: 1 / -1; grid-row: 4; text-align: right; }
  .wl-t small { white-space: normal; }
  .wl-t tbody tr > td.wl-none { grid-column: 1 / -1; }
}
.wl-chg { flex-direction: column; align-items: flex-end; } .wl-chg small { margin-top: 3px; }
[data-mb-bets-only][hidden] { display: none !important; }   /* release 438 */

/* release 447 (owner: "make the info a bit compact so there is no horizontal scroll"): tighter cells, short notes (book and time; the
   rest in tooltips), "per $100" in the Change header, an x to remove, and the card layout on screens up to 980px wide */
@media (min-width: 981px) {
  .wl-t td, .wl-t tbody th { padding: 11px 10px; }
  .wl-t thead th { padding: 10px 10px; }
  .wl-t td:first-child, .wl-t tbody th, .wl-t thead th:first-child { padding-left: 18px; }
  .wl-t tbody th { min-width: 150px; }
  .wl-pill { padding: 3px 9px; font-size: 12.5px; gap: 5px; }
  .wl-pill svg { width: 13px; height: 13px; }
}
.wl-t thead th .wl-th-sub { display: inline; margin: 0 0 0 2px; font-size: 11.5px; font-weight: 500; color: #98A2B3; }
.wl-act.wl-x { width: 32px; padding: 0; display: inline-grid; place-items: center; }
.wl-act.wl-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (min-width: 981px) {
  .wl-t tbody th small { white-space: normal; }
  .wl-t td.wl-acts { padding-left: 2px; padding-right: 10px; width: 1%; }
  .wl-t td.wl-l { padding-right: 6px; }
}
@media (max-width: 980px) {
  .wl-chg:has(.sx-delta.is-up, .sx-delta.is-down)::after { content: "per $100"; flex-basis: 100%; text-align: right; margin-top: 3px; color: #667085; font-size: 12px; font-weight: 500; }
}