/* The pitcher-risk cards are dark surfaces in both themes. Own their contrast explicitly. */
body.tsl-editorial button.vuln,
html[data-theme="light"] body.tsl-editorial button.vuln,
html[data-theme="dark"] body.tsl-editorial button.vuln {
  background: linear-gradient(145deg, #0a2a4e, #071d36) !important;
  color: #f7fbff !important;
  border-color: rgba(126, 184, 238, .3) !important;
}

body.tsl-editorial button.vuln strong,
html[data-theme="light"] body.tsl-editorial button.vuln strong,
html[data-theme="dark"] body.tsl-editorial button.vuln strong {
  color: #fff !important;
  font-size: 16px;
  letter-spacing: .02em;
}

body.tsl-editorial button.vuln em,
html[data-theme="light"] body.tsl-editorial button.vuln em,
html[data-theme="dark"] body.tsl-editorial button.vuln em {
  color: #c7d5e3 !important;
  font-size: 11px;
}

body.tsl-editorial button.vuln small,
body.tsl-editorial button.vuln:nth-child(n+2) small {
  color: #b9c9d9 !important;
}

body.tsl-editorial button.vuln b,
body.tsl-editorial button.vuln:nth-child(n+2) b {
  color: #ff8a52 !important;
}

body.tsl-editorial button.vuln span,
body.tsl-editorial button.vuln:nth-child(n+2) span {
  border-color: #ff8a52 !important;
  color: #ffb08a !important;
}

body.tsl-editorial button.vuln:hover {
  background: linear-gradient(145deg, #0d3768, #082746) !important;
}

body.tsl-editorial button.vuln:focus-visible {
  outline: 3px solid #38d9ff;
  outline-offset: -4px;
}

/*
 * Interactive content-card contrast contract.
 * Global button treatments must never determine a content card's surface or
 * typography. Keep every foreground color paired with the owned dark surface.
 */
body.tsl-editorial button.tsl-content-card,
html[data-theme="light"] body.tsl-editorial button.tsl-content-card,
html[data-theme="dark"] body.tsl-editorial button.tsl-content-card,
body.tsl-editorial button.guide-card,
html[data-theme="light"] body.tsl-editorial button.guide-card,
html[data-theme="dark"] body.tsl-editorial button.guide-card {
  background: linear-gradient(145deg, #0a2a4e, #071d36) !important;
  color: #f7fbff !important;
  border-color: #4779a8 !important;
  border-top-color: #58a6ff !important;
  font: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: 0 10px 24px rgba(7, 29, 54, .18) !important;
}

body.tsl-editorial button.tsl-content-card * {
  letter-spacing: normal;
  text-transform: none;
}

body.tsl-editorial button.guide-card:hover,
html[data-theme="light"] body.tsl-editorial button.guide-card:hover,
html[data-theme="dark"] body.tsl-editorial button.guide-card:hover {
  background: linear-gradient(145deg, #0d3768, #082746) !important;
  border-color: #8cff32 !important;
}

body.tsl-editorial button.guide-card .guide-label {
  color: #9cff52 !important;
  line-height: 1.25 !important;
}

body.tsl-editorial button.guide-card .guide-player {
  color: #fff !important;
  line-height: 1.08 !important;
}

body.tsl-editorial button.guide-card .guide-matchup,
body.tsl-editorial button.guide-card > small {
  color: #c7d5e3 !important;
  line-height: 1.45 !important;
}

body.tsl-editorial button.guide-card > strong {
  color: #64a9ff !important;
  line-height: 1.2 !important;
}

body.tsl-editorial button.guide-card .guide-why {
  color: #e6eef7 !important;
  border-color: #6f8daa !important;
  line-height: 1.5 !important;
}

body.tsl-editorial button.guide-card .guide-why b {
  color: #9cff52 !important;
}

body.tsl-editorial button.guide-card .guide-risk {
  color: #ff9b76 !important;
  border-color: #6f8daa !important;
  line-height: 1.5 !important;
}

body.tsl-editorial button.guide-card .guide-risk b {
  color: #ffb092 !important;
}

body.tsl-editorial button.guide-card:focus-visible {
  outline: 3px solid #38d9ff !important;
  outline-offset: 3px !important;
}

/* Keep the long slate cheap to scroll. Decorative effects should never
   compete with dozens of game cards and player headshots for paint time. */
body.tsl-slate-page::before,
body.tsl-slate-page::after,
body.tsl-slate-page .hero::before {
  display: none !important;
  animation: none !important;
  filter: none !important;
}

body.tsl-slate-page > .topbar {
  display: none !important;
}

body.tsl-slate-page .tsl-site-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.tsl-slate-page .game-card {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 3000px;
}

body.tsl-slate-page .dot,
body.tsl-slate-page .status-pill.live::before,
body.tsl-slate-page .live-state::before {
  animation: none !important;
}

body.tsl-slate-page .game-card,
body.tsl-slate-page .side,
body.tsl-slate-page .side-top,
body.tsl-slate-page .bat,
body.tsl-slate-page .bat:first-child,
body.tsl-slate-page .mini > div,
body.tsl-slate-page .pitcher-intel,
body.tsl-slate-page .face {
  box-shadow: none !important;
}

body.tsl-slate-page .game-card { background: #edf4ff !important; }
body.tsl-slate-page .side,
body.tsl-slate-page .side-top,
body.tsl-slate-page .pitcher-intel { background: #f7faff !important; }
body.tsl-slate-page .bat,
body.tsl-slate-page .bat:first-child { background: #fff !important; }
body.tsl-slate-page .game-card:hover,
body.tsl-slate-page .bat:hover { transform: none !important; }