/* ==========================================================
   v179.9.81 — pitch-sequence semantics + third-out marker polish
   Scope: visual only. No scoring/stat/storage logic changes.
   ========================================================== */

:root{
  --scorebook-ball-blue:#2387e8;
  --scorebook-strike-red:#df4b45;
  --scorebook-inning-red:#df4b46;
}

/* ----------------------------------------------------------
   PITCH SEQUENCE / HISTORY SEMANTICS
   Older Wrigley rules use a high-specificity :is() selector, so
   these selectors intentionally match/exceed that specificity.
   Ball = blue, strike/foul = red, in play = neutral.
   ---------------------------------------------------------- */

/* Wrigley active pitch sequence — make the numbered circle match
   the semantic result, not the theme palette. */
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.is-ball > span,
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.tone-ball > span{
  background:var(--scorebook-ball-blue)!important;
  border-color:var(--scorebook-ball-blue)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.is-ball > em,
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.tone-ball > em{
  color:var(--scorebook-ball-blue)!important;
  -webkit-text-fill-color:var(--scorebook-ball-blue)!important;
  border-color:var(--scorebook-ball-blue)!important;
}
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.is-strike > span,
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article:is(.tone-called,.tone-swing,.tone-foul) > span{
  background:var(--scorebook-strike-red)!important;
  border-color:var(--scorebook-strike-red)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.is-strike > em,
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article:is(.tone-called,.tone-swing,.tone-foul) > em{
  color:var(--scorebook-strike-red)!important;
  -webkit-text-fill-color:var(--scorebook-strike-red)!important;
  border-color:var(--scorebook-strike-red)!important;
}

/* In Play is not a ball/strike semantic. Keep it intentionally neutral
   across themes instead of using Wrigley yellow as a third outcome color. */
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.is-play > span,
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.tone-play > span{
  background:var(--wr-cream,#f3ecdc)!important;
  border-color:var(--wr-line,#708979)!important;
  color:var(--wr-green-950,#062b20)!important;
  -webkit-text-fill-color:var(--wr-green-950,#062b20)!important;
}
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.is-play > em,
body[data-theme-family="wrigley"] #playModal.modal .v141-sequence article.tone-play > em{
  color:var(--wr-cream,#f3ecdc)!important;
  -webkit-text-fill-color:var(--wr-cream,#f3ecdc)!important;
  border-color:var(--wr-line-soft,#708979)!important;
}

/* Match the live map/history to the same neutral In Play treatment.
   The Wrigley strike-zone outline itself remains yellow. */
body[data-theme-family="wrigley"] #playModal.modal .v138-zone i.tone-play,
body[data-theme-family="wrigley"] #pitchHistoryModal.modal .v138-zone i.tone-play,
body[data-theme-family="wrigley"] #pitchHistoryModal.modal .pitch-history-row.tone-play .pitch-history-no{
  background:var(--wr-cream,#f3ecdc)!important;
  border-color:var(--wr-green-950,#062b20)!important;
  color:var(--wr-green-950,#062b20)!important;
  -webkit-text-fill-color:var(--wr-green-950,#062b20)!important;
}

/* ----------------------------------------------------------
   THIRD OUT + AT-BAT CHANGE
   Keep the red inning separator unmistakable. When the same cell
   also contains PH/PC/PC-PH, render a readable compact black tab
   with clear separation above the red rule — never a second full-
   width bar and never clipped text.
   ---------------------------------------------------------- */
.unified-score-table .play-cell.third-out,
.scoring-only-table .play-cell.third-out{
  position:relative!important;
  box-shadow:none!important;
}
.unified-score-table .play-cell.third-out::after,
.scoring-only-table .play-cell.third-out::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:4px!important;
  background:var(--scorebook-inning-red)!important;
  z-index:20!important;
  pointer-events:none!important;
}

/* Compact personnel tab. The extra .third-out + data-label specificity
   intentionally outranks the legacy full-width v156.4 rule. */
body .play-cell.third-out .event-marker.v137-grid-marker.v1563-change-marker[data-label],
body .play-cell.third-out .v137-grid-marker.v1563-change-marker[data-label]{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:7px!important;
  transform:translateX(-50%)!important;
  width:30px!important;
  min-width:30px!important;
  max-width:30px!important;
  height:11px!important;
  min-height:11px!important;
  max-height:11px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:4px!important;
  background:#111!important;
  color:transparent!important;
  overflow:visible!important;
  box-shadow:none!important;
  z-index:22!important;
}
body .play-cell.third-out .v137-grid-marker.v1563-change-marker[data-label="PC/PH"]{
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
}
body .play-cell.third-out .v1563-change-marker[data-label]::after{
  content:attr(data-label)!important;
  position:absolute!important;
  inset:0!important;
  transform:none!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  height:11px!important;
  min-height:11px!important;
  max-height:11px!important;
  padding:0 3px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:4px!important;
  background:#111!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  overflow:visible!important;
  white-space:nowrap!important;
  font-size:6px!important;
  line-height:11px!important;
  font-weight:950!important;
  letter-spacing:.02em!important;
  text-align:center!important;
  z-index:23!important;
}

/* This is a scorekeeping symbol, so keep black/white in dark themes too. */
body.dark-mode .play-cell.third-out .event-marker.v137-grid-marker.v1563-change-marker[data-label],
body.dark-mode .play-cell.third-out .v137-grid-marker.v1563-change-marker[data-label],
body.dark-mode .play-cell.third-out .v1563-change-marker[data-label]::after{
  background:#111!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Give lower-right notation enough clearance from the personnel tab. */
body .play-cell.third-out .play-entry:has(.v1563-change-marker[data-label]) .play-code{
  bottom:19px!important;
}
/* PC/PH gets a little extra horizontal room without changing PC/PH geometry. */
body .play-cell.third-out .event-marker.v137-grid-marker.v1563-change-marker[data-label="PC/PH"]{
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
}