/* Personal Broadcast Bar — frame content, segment identity, and phone fit.
 * Loaded after styles.css / redesign.css / home-overhaul.css and scoped to
 * .league-ticker so nothing else on the site is touched. */

.league-ticker .ticker-frame-link {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.league-ticker .ticker-frame-link > strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-ticker .ticker-frame-link > span:not(.team-mark),
.league-ticker .ticker-frame-link > em {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.64);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-ticker .ticker-frame-link .team-mark {
  flex: 0 0 auto;
}

.league-ticker .ticker-frame-link:hover > strong,
.league-ticker .ticker-frame-link:focus-visible > strong {
  color: #fff;
}

.league-ticker .ticker-frame.ticker-rival { box-shadow: inset 3px 0 0 #6aa7ff; }
.league-ticker .ticker-frame.ticker-moment { box-shadow: inset 3px 0 0 #73e2bd; }
.league-ticker .ticker-frame.ticker-rank { box-shadow: inset 3px 0 0 #c79bff; }
.league-ticker .ticker-frame.ticker-edge { box-shadow: inset 3px 0 0 #e3b94f; }
.league-ticker .ticker-frame.ticker-story { box-shadow: inset 3px 0 0 #8b98a8; }

.league-ticker .ticker-moment-line {
  color: #fff !important;
  font-weight: 850;
}

.league-ticker .ticker-frame.ticker-edge strong {
  color: #e3b94f;
}

@media (max-width: 620px) {
  .league-ticker .ticker-frame-link {
    gap: 6px;
  }

  .league-ticker .ticker-frame-link > strong {
    font-size: 11px;
  }

  .league-ticker .ticker-frame-link > span:not(.team-mark),
  .league-ticker .ticker-frame-link > em {
    font-size: 10px;
  }

  .league-ticker .ticker-frame-link .team-mark {
    width: 18px;
    height: 18px;
  }

  .league-ticker .ticker-frame-link .team-mark img {
    width: 17px;
    height: 17px;
  }
}

/* The hybrid shell retires the legacy league wire at phone widths because it
   sat unreachable under the mobile tab bar. The Personal Broadcast Bar is the
   reason that surface exists, so it docks directly above the tab bar as one
   compact row instead of disappearing; desktop keeps the full bar. */
@media (max-width: 860px) {
  body.pd-shell {
    padding-bottom: calc(74px + 56px + env(safe-area-inset-bottom)) !important;
  }

  body.pd-shell .league-ticker {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-rows: 56px !important;
    height: 56px !important;
    bottom: calc(74px + env(safe-area-inset-bottom));
    padding-bottom: 0 !important;
  }

  body.pd-shell .league-ticker .ticker-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 56px;
    padding: 0 10px !important;
  }

  body.pd-shell .league-ticker .ticker-window {
    grid-column: 2 !important;
    grid-row: 1 !important;
    height: 56px;
    padding-right: 0 !important;
  }

  body.pd-shell .league-ticker .ticker-frame {
    height: 56px !important;
    padding: 4px 8px !important;
  }

  body.pd-shell .league-ticker .ticker-frame:has(.ticker-game-score) {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
  }

  body.pd-shell .league-ticker .ticker-game-score {
    grid-template-columns: 18px auto 20px 30px 18px auto 20px !important;
    gap: 3px !important;
  }
  body.pd-shell .league-ticker .ticker-controls {
    position: static !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 2px !important;
    padding: 0 6px 0 0 !important;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    transform: none;
  }

  body.pd-shell .league-ticker .ticker-controls button {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  body.pd-shell .league-ticker .ticker-label .ticker-live {
    display: none;
  }
}

/* Phone width: the score bug and the copy stack so the result/next line stays
   readable inside the compact docked row. */
@media (max-width: 620px) {
  body.pd-shell .league-ticker .ticker-frame:has(.ticker-game-score) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 24px minmax(0, 1fr);
    align-content: stretch;
    gap: 2px !important;
  }

  body.pd-shell .league-ticker .ticker-game-score {
    justify-content: center;
    width: 100%;
  }

  body.pd-shell .league-ticker .ticker-frame-copy {
    justify-content: center;
  }
}