/* Click TV — Today Match & Upcoming Match card upgrade.
 *
 * Loaded after reference-design.css so it owns the event card and nothing
 * else. Every selector is scoped to .sidebar-section.event-list-mode, so the
 * channel list, the movie grid, the series view and the whole player are
 * outside this file's reach by construction. Card geometry stays inside the
 * sizes reference-design.css already established.
 */

/* ── Card shell ─────────────────────────────────────────────────────────── */

.sidebar-section.event-list-mode .event-ref-card{
  grid-template-columns:112px minmax(0,1fr) 54px!important;
  align-items:stretch!important;
  /* An upcoming card carries a status pill, a countdown, a clock, a stream
     summary and a verification glyph. In a 167px text column that is three
     footer lines, which needs eight more pixels than the old fixed 144. */
  height:152px!important;min-height:152px!important;max-height:152px!important;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease!important;
}

/* Guide 21 and 22. Colour carries the status and nothing else: a live card
   gets a green edge, a scheduled one amber, a bare channel a cool teal. */
.sidebar-section.event-list-mode .event-ref-card::before{
  content:''!important;position:absolute!important;top:10px!important;bottom:10px!important;left:0!important;
  width:3px!important;border-radius:0 3px 3px 0!important;z-index:6!important;pointer-events:none!important;
}
.sidebar-section.event-list-mode .event-live-card::before{background:linear-gradient(180deg,#25e6a5,#0c9f74)!important}
.sidebar-section.event-list-mode .event-upcoming-card::before{background:linear-gradient(180deg,#ffc93d,#c97f05)!important}
.sidebar-section.event-list-mode .event-channel-card::before{background:linear-gradient(180deg,#4fc3f7,#1668a8)!important}

/* Guide 33. A slight lift, not a glow. */
.sidebar-section.event-list-mode .event-ref-card:hover{transform:translateY(-1px)!important}
.sidebar-section.event-list-mode .event-ref-card.active{transform:none!important}

/* ── Artwork ────────────────────────────────────────────────────────────── */

.sidebar-section.event-list-mode .event-card-art img{
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;
  display:block!important;border-radius:inherit!important;
}

/* Guide 11 and 28. One logo field per item means no true two-crest layout is
   available, so the fallback carries the team pair rather than bare initials. */
.sidebar-section.event-list-mode .event-art-versus{
  display:flex!important;width:100%!important;height:100%!important;
  flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;
  background:radial-gradient(circle at 50% 18%,rgba(255,64,91,.20),transparent 55%),linear-gradient(145deg,#17253b,#0a111d)!important;
}
.sidebar-section.event-list-mode .event-art-versus span{
  max-width:96%!important;overflow:hidden!important;color:#eef4ff!important;
  font-size:17px!important;font-weight:950!important;letter-spacing:.5px!important;line-height:1.05!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
.sidebar-section.event-list-mode .event-art-versus em{
  color:#8fa1ba!important;font-size:8.5px!important;font-style:normal!important;font-weight:900!important;
  letter-spacing:1.6px!important;text-transform:uppercase!important;
}
.sidebar-section.event-list-mode .event-art-fallback{
  display:flex!important;width:100%!important;height:100%!important;
  flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important;
  background:radial-gradient(circle at 40% 22%,rgba(90,168,255,.18),transparent 55%),linear-gradient(145deg,#17253b,#0a111d)!important;
}
.sidebar-section.event-list-mode .event-art-fallback i{color:#7ea6d8!important;font-size:22px!important}
.sidebar-section.event-list-mode .event-art-fallback span{
  color:#dae4f2!important;font-size:11px!important;font-weight:900!important;letter-spacing:.6px!important;
}

/* Guide 5. The sport reads at a glance, and it costs the text column nothing
   because it sits on the artwork. */
.sidebar-section.event-list-mode .event-sport-badge{
  position:absolute!important;right:5px!important;bottom:5px!important;z-index:4!important;
  display:inline-flex!important;max-width:calc(100% - 10px)!important;align-items:center!important;gap:4px!important;
  height:17px!important;padding:0 6px!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:999px!important;
  background:rgba(5,11,20,.86)!important;color:#cfdcec!important;
  font-size:7.5px!important;font-weight:950!important;letter-spacing:.6px!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;backdrop-filter:blur(4px)!important;
}
.sidebar-section.event-list-mode .event-sport-badge i{font-size:8px!important;color:#8fb6e6!important}
.sidebar-section.event-list-mode .event-channel-card .event-sport-badge{
  border-color:rgba(79,195,247,.42)!important;color:#9fdcff!important;
}
.sidebar-section.event-list-mode .event-channel-card .event-sport-badge i{color:#4fc3f7!important}

/* ── Text column ────────────────────────────────────────────────────────── */

.sidebar-section.event-list-mode .event-card-details{
  gap:3px!important;justify-content:center!important;padding:2px 0!important;
}

/* Guide 4. Two lines, then a clean ellipsis. */
.sidebar-section.event-list-mode .event-card-title{
  -webkit-line-clamp:2!important;font-size:15px!important;line-height:1.18!important;
}
.sidebar-section.event-list-mode .event-card-competition{
  -webkit-line-clamp:1!important;font-size:10.5px!important;
}
.sidebar-section.event-list-mode .event-card-competition.muted{color:#8391a5!important;font-style:italic!important}
.sidebar-section.event-list-mode .event-card-competition.muted i{display:none!important}

/* Guide 32. The footer is a named status row and a named detail row rather
   than one free-wrapping bag of chips, so how tall a card gets never depends
   on how long a match name happens to be.

   Inside a row, nothing may be cut mid-word. The text column is only about
   175px on a 1440px screen, so a chip that will not fit wraps to a second
   line instead of being clipped to "Waiti". Below 1000px there is no room for
   that second line, so the stream summary and the verification glyph step
   aside entirely and the clock keeps the row to itself. */
.sidebar-section.event-list-mode .event-card-footer{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  gap:3px!important;min-width:0!important;white-space:normal!important;overflow:hidden!important;
}
.sidebar-section.event-list-mode .event-card-status-row,
.sidebar-section.event-list-mode .event-card-meta-row{
  display:flex!important;min-width:0!important;align-items:center!important;
  flex-wrap:wrap!important;overflow:hidden!important;white-space:nowrap!important;
}
.sidebar-section.event-list-mode .event-card-status-row{gap:2px 6px!important}
.sidebar-section.event-list-mode .event-card-meta-row{gap:2px 8px!important}
.sidebar-section.event-list-mode .event-card-status-row>*,
.sidebar-section.event-list-mode .event-card-meta-row>*{flex:0 0 auto!important;min-width:0!important}

.sidebar-section.event-list-mode .event-status-pill{height:19px!important;font-size:8px!important}

.sidebar-section.event-list-mode .event-card-time,
.sidebar-section.event-list-mode .event-card-countdown,
.sidebar-section.event-list-mode .event-card-streams,
.sidebar-section.event-list-mode .event-card-verified,
.sidebar-section.event-list-mode .event-card-phase{
  display:inline-flex!important;align-items:center!important;gap:4px!important;
  font-size:9.5px!important;font-weight:800!important;white-space:nowrap!important;line-height:1.2!important;
}
.sidebar-section.event-list-mode .event-card-time{color:#b9c4d2!important}
.sidebar-section.event-list-mode .event-card-time i{color:#8ea0b8!important}

/* Guide 14 and 16. On an upcoming card the clock is the headline fact, so it
   is the brightest thing in the meta row. */
.sidebar-section.event-list-mode .event-upcoming-card .event-card-time{color:#ffdf9a!important;font-weight:900!important}
.sidebar-section.event-list-mode .event-upcoming-card .event-card-time i{color:#ffc93d!important}

/* Guide 17. */
.sidebar-section.event-list-mode .event-card-countdown{
  height:19px!important;padding:0 7px!important;border:1px solid rgba(255,190,35,.38)!important;border-radius:999px!important;
  background:rgba(137,94,0,.20)!important;color:#ffd36b!important;font-size:8.5px!important;font-weight:950!important;
}
.sidebar-section.event-list-mode .event-card-countdown i{font-size:8px!important}

/* Guide 6. Only shown when a real kickoff time was recorded. */
.sidebar-section.event-list-mode .event-card-phase{color:#7fe9c6!important;font-size:9px!important;font-weight:850!important}

/* Guide 8, 9 and 19. A summary, never the DRM/token detail behind it. */
.sidebar-section.event-list-mode .event-card-streams{color:#9fb0c6!important;font-size:9px!important}
.sidebar-section.event-list-mode .event-card-streams.ready i{color:#54e9bd!important}
.sidebar-section.event-list-mode .event-card-streams.waiting{color:#8b97a9!important}
.sidebar-section.event-list-mode .event-card-streams.waiting i{color:#8b97a9!important}

/* Guide 18. Glyph only on the card; the words are in the tooltip and popup. */
.sidebar-section.event-list-mode .event-card-verified{gap:0!important;font-size:10px!important}
.sidebar-section.event-list-mode .event-card-verified.ok{color:#8fcfae!important}
.sidebar-section.event-list-mode .event-card-verified.ok i{color:#4ecb8a!important}
.sidebar-section.event-list-mode .event-card-verified.pending{color:#c2ab7a!important}
.sidebar-section.event-list-mode .event-card-verified.pending i{color:#e0b95c!important}

/* Guide 13. The playing card names itself and drops the stream summary so the
   row does not grow. */
.sidebar-section.event-list-mode .event-now-playing{
  display:none!important;height:19px!important;align-items:center!important;gap:5px!important;padding:0 8px!important;
  border:1px solid rgba(255,64,91,.5)!important;border-radius:999px!important;background:rgba(148,20,42,.28)!important;
  color:#ffb3c0!important;font-size:8px!important;font-weight:950!important;letter-spacing:.5px!important;
}
.sidebar-section.event-list-mode .event-ref-card.active .event-now-playing{display:inline-flex!important}
.sidebar-section.event-list-mode .event-ref-card.active .event-card-streams,
.sidebar-section.event-list-mode .event-ref-card.active .event-card-verified{display:none!important}
.sidebar-section.event-list-mode .event-now-playing .playing-equalizer{
  display:inline-flex!important;align-items:flex-end!important;gap:1.5px!important;height:9px!important;margin:0!important;
}
.sidebar-section.event-list-mode .event-now-playing .playing-equalizer span{
  width:2px!important;height:100%!important;border-radius:1px!important;background:#ff7c93!important;
  animation:eventEqualizer .9s ease-in-out infinite!important;
}
.sidebar-section.event-list-mode .event-now-playing .playing-equalizer span:nth-child(2){animation-delay:.15s!important}
.sidebar-section.event-list-mode .event-now-playing .playing-equalizer span:nth-child(3){animation-delay:.3s!important}
@keyframes eventEqualizer{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .sidebar-section.event-list-mode .event-now-playing .playing-equalizer span{animation:none!important;transform:scaleY(.7)!important}
  .sidebar-section.event-list-mode .event-ref-card:hover{transform:none!important}
}

/* ── Action column ──────────────────────────────────────────────────────── */

.sidebar-section.event-list-mode .event-card-action{
  min-width:54px!important;align-self:center!important;gap:5px!important;font-size:8px!important;
}
.sidebar-section.event-list-mode .event-card-action span{
  max-width:54px!important;overflow:hidden!important;text-align:center!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
.sidebar-section.event-list-mode .event-card-action.reminder i{
  border-color:rgba(140,170,210,.32)!important;background:rgba(60,90,130,.18)!important;color:#a9c6e8!important;
}
/* Guide 12. A card without a usable link never offers a play affordance. */
.sidebar-section.event-list-mode .event-ref-card.is-scheduled .event-card-action.watch{opacity:.45!important}

/* Guide 20 and 27. Both corner buttons are real buttons, they never start
   playback, and they read filled once set. */
.sidebar-section.event-list-mode .card-remind-btn{
  position:absolute!important;top:6px!important;right:6px!important;z-index:7!important;
  display:grid!important;width:24px!important;height:24px!important;min-width:24px!important;place-items:center!important;
  border:1px solid rgba(255,255,255,.14)!important;border-radius:50%!important;background:rgba(6,12,21,.72)!important;
  color:#b6c1d0!important;font-size:10px!important;cursor:pointer!important;
  transition:color .15s ease,border-color .15s ease,background .15s ease!important;
}
.sidebar-section.event-list-mode .card-remind-btn:hover,
.sidebar-section.event-list-mode .card-remind-btn:focus-visible{
  border-color:rgba(255,190,35,.6)!important;background:rgba(137,94,0,.3)!important;color:#ffd36b!important;outline:0!important;
}
.sidebar-section.event-list-mode .card-remind-btn.active{
  border-color:rgba(255,190,35,.75)!important;background:rgba(137,94,0,.4)!important;color:#ffcf5a!important;
}

/* ── Count header (guide 23) ────────────────────────────────────────────── */

.sidebar-count-detail{
  margin-left:8px!important;color:#8b98ac!important;font-size:10.5px!important;font-weight:800!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}

/* ── Details popup (guide 18, 29, 32) ───────────────────────────────────── */

.event-preview-facts{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:0 0 12px!important}
.event-preview-fact{
  display:inline-flex!important;align-items:center!important;gap:5px!important;height:22px!important;padding:0 9px!important;
  border:1px solid rgba(255,255,255,.16)!important;border-radius:999px!important;background:rgba(6,12,21,.55)!important;
  color:#d3dceb!important;font-size:9px!important;font-weight:850!important;letter-spacing:.3px!important;
}
.event-preview-fact i{color:#7fc9ff!important;font-size:9px!important}

/* ── Responsive (guide 25 and 26) ───────────────────────────────────────── */

/* Tablet and small laptop: the card gains a little height so the meta row can
   wrap without clipping, and the verification chip steps aside. */
@media (max-width:1000px){
  .sidebar-section.event-list-mode .event-ref-card{
    grid-template-columns:104px minmax(0,1fr) 46px!important;
    height:106px!important;min-height:106px!important;max-height:106px!important;
  }
  .sidebar-section.event-list-mode .event-card-title{font-size:12.5px!important;-webkit-line-clamp:2!important}
  .sidebar-section.event-list-mode .event-card-competition{font-size:9px!important}
  .sidebar-section.event-list-mode .event-card-footer{gap:3px 6px!important}
  .sidebar-section.event-list-mode .event-card-time,
  .sidebar-section.event-list-mode .event-card-streams,
  .sidebar-section.event-list-mode .event-card-phase{font-size:8.5px!important}
  .sidebar-section.event-list-mode .event-card-countdown{height:17px!important;padding:0 6px!important;font-size:8px!important}
  .sidebar-section.event-list-mode .event-card-verified,
  .sidebar-section.event-list-mode .event-card-streams{display:none!important}
  .sidebar-section.event-list-mode .event-sport-badge{height:15px!important;font-size:7px!important;padding:0 5px!important}
  .sidebar-section.event-list-mode .event-art-versus span{font-size:14px!important}
  .sidebar-section.event-list-mode .event-card-action{min-width:46px!important;font-size:7px!important}
  .sidebar-section.event-list-mode .event-card-action span{max-width:46px!important}
}

/* Phone: level 1 only — title, status, clock, action. The competition line,
   the stream summary and the live phase all step aside; the artwork, the two
   corner buttons and the action stay at a touch-friendly size. */
@media (max-width:480px){
  .sidebar-section.event-list-mode .event-ref-card{
    grid-template-columns:92px minmax(0,1fr) 40px!important;
    height:98px!important;min-height:98px!important;max-height:98px!important;
  }
  .sidebar-section.event-list-mode .event-card-title{font-size:11.5px!important}
  .sidebar-section.event-list-mode .event-card-competition{display:none!important}
  .sidebar-section.event-list-mode .event-card-streams,
  .sidebar-section.event-list-mode .event-card-phase{display:none!important}
  .sidebar-section.event-list-mode .event-card-time{font-size:8px!important}
  .sidebar-section.event-list-mode .event-status-pill{height:17px!important;font-size:7px!important;padding:0 6px!important}
  .sidebar-section.event-list-mode .event-now-playing{height:17px!important;font-size:7px!important;padding:0 6px!important}
  .sidebar-section.event-list-mode .event-sport-badge{right:4px!important;bottom:4px!important}
  .sidebar-section.event-list-mode .event-art-versus span{font-size:12px!important}
  .sidebar-section.event-list-mode .event-card-action{min-width:40px!important}
  .sidebar-section.event-list-mode .event-card-action span{display:none!important}
  .sidebar-section.event-list-mode .event-card-action i{width:32px!important;height:32px!important;font-size:11px!important}
  .sidebar-section.event-list-mode .card-remind-btn{width:26px!important;height:26px!important;min-width:26px!important}
  .event-preview-fact{height:20px!important;padding:0 7px!important;font-size:8px!important}
}

/* Very narrow phones keep the same information, one step tighter. */
@media (max-width:380px){
  .sidebar-section.event-list-mode .event-ref-card{
    grid-template-columns:80px minmax(0,1fr) 38px!important;
    height:92px!important;min-height:92px!important;max-height:92px!important;
  }
  .sidebar-section.event-list-mode .event-card-art{width:80px!important;min-width:80px!important;height:62px!important}
  .sidebar-section.event-list-mode .event-card-title{font-size:11px!important}
}

/* Short landscape phones: the player and the list share the screen, so the
   card drops to its most compact form without losing status or clock. */
@media (max-width:980px) and (orientation:landscape) and (max-height:500px){
  .sidebar-section.event-list-mode .event-ref-card{
    grid-template-columns:74px minmax(0,1fr) 36px!important;
    height:88px!important;min-height:88px!important;max-height:88px!important;padding:6px!important;gap:7px!important;
  }
  .sidebar-section.event-list-mode .event-card-art{width:74px!important;min-width:74px!important;height:58px!important}
  .sidebar-section.event-list-mode .event-card-title{font-size:10.5px!important;-webkit-line-clamp:2!important}
  .sidebar-section.event-list-mode .event-card-competition,
  .sidebar-section.event-list-mode .event-card-streams,
  .sidebar-section.event-list-mode .event-card-phase,
  .sidebar-section.event-list-mode .event-card-verified,
  .sidebar-section.event-list-mode .event-card-streams{display:none!important}
  .sidebar-section.event-list-mode .event-sport-badge{display:none!important}
  .sidebar-section.event-list-mode .event-card-action span{display:none!important}
  /* The countdown answers "when" better than a clock does here, so an
     upcoming card shows that alone and the exact time moves to the popup. */
  .sidebar-section.event-list-mode .event-upcoming-card.has-countdown .event-card-time{display:none!important}
  /* The active border and the pause icon already say what is playing. */
  .sidebar-section.event-list-mode .event-now-playing{display:none!important}
  .sidebar-section.event-list-mode .event-ref-card.active .event-now-playing{display:none!important}
}

/* ── Card polish pass ───────────────────────────────────────────────────────
 * Production showed the upcoming card carrying two status chips that said the
 * same thing, a verification tick stranded on its own line, and a live card
 * whose start time was clipped mid-word. The markup now sends one status and
 * one supporting line; these rules quiet everything that is not level 1 so the
 * eye lands on the title, the status and the clock — in that order. Card
 * dimensions, the grid and the player are untouched.
 */

/* Guide 32 level 2: the competition is context, not headline. */
.sidebar-section.event-list-mode .event-card-competition{
  color:#8b98ab!important;font-size:10px!important;font-weight:700!important;
}
.sidebar-section.event-list-mode .event-card-competition i{color:#9a8a5f!important;font-size:8.5px!important}

/* The countdown carries the status on an upcoming card, so it gets the pill
   treatment rather than sitting next to a second badge. */
.sidebar-section.event-list-mode .event-status-pill.is-countdown{
  border-color:rgba(255,190,35,.5)!important;background:rgba(137,94,0,.26)!important;color:#ffd97a!important;
}

/* The verification tick lives inside the clock chip now. */
.sidebar-section.event-list-mode .event-verified-tick{
  margin-left:5px!important;font-size:9px!important;
}
.sidebar-section.event-list-mode .event-verified-tick.ok{color:#4ecb8a!important}
.sidebar-section.event-list-mode .event-verified-tick.pending{color:#e0b95c!important}

/* Elapsed time reads as a quiet companion to the LIVE badge. */
.sidebar-section.event-list-mode .event-card-phase{
  color:#78d9b6!important;font-size:9px!important;font-weight:800!important;opacity:.92!important;
}

/* Artwork: a touch smaller and calmer, so an oversized source poster stops
   dominating the row. The fallback chain itself is unchanged. */
.sidebar-section.event-list-mode .event-card-art{
  border-color:rgba(95,113,141,.3)!important;
  background:linear-gradient(150deg,#141f31,#0a101b)!important;
}
.sidebar-section.event-list-mode .event-card-art img{
  padding:6px!important;
}
.sidebar-section.event-list-mode .event-art-versus{
  background:linear-gradient(150deg,#16223a,#0a101b)!important;gap:2px!important;
}
.sidebar-section.event-list-mode .event-art-versus span{
  font-size:15px!important;font-weight:900!important;letter-spacing:.3px!important;color:#e4ecf8!important;
}
.sidebar-section.event-list-mode .event-art-versus em{
  color:#7d8da3!important;font-size:7.5px!important;letter-spacing:1.4px!important;
}
.sidebar-section.event-list-mode .event-art-fallback i{font-size:19px!important;color:#6f93c2!important}
.sidebar-section.event-list-mode .event-art-fallback span{font-size:10px!important;color:#c6d2e2!important}

/* Corner and action controls: outline weight only, no filled circles
   competing with the Watch button. */
.sidebar-section.event-list-mode .card-remind-btn,
.sidebar-section.event-list-mode .event-ref-card .card-fav-btn{
  border-color:rgba(255,255,255,.1)!important;background:rgba(6,12,21,.55)!important;color:#9fadc0!important;
}
.sidebar-section.event-list-mode .event-card-action.reminder i{
  border-color:rgba(140,170,210,.24)!important;background:transparent!important;color:#9dbadb!important;
}
.sidebar-section.event-list-mode .event-card-action.reminder{color:#93a5bb!important}

/* The sport badge is a label, not a headline. */
.sidebar-section.event-list-mode .event-sport-badge{
  background:rgba(5,11,20,.72)!important;border-color:rgba(255,255,255,.1)!important;color:#b8c6d8!important;
}

/* ── Requirement 13: artwork safe-area ──────────────────────────────────────
 * A source poster is never stretched or cropped to fill the tile. It is
 * contained inside a padded safe area, so the ugly generic "LIVE" graphic some
 * feeds ship stops dominating the row, and a real crest still reads clearly.
 * The tile keeps the size reference-design.css gave it.
 */
.sidebar-section.event-list-mode .event-card-art{
  display:grid!important;place-items:center!important;
}
.sidebar-section.event-list-mode .event-card-art img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;
  padding:8px!important;box-sizing:border-box!important;
}
/* A single logo sits centred in the safe area; a team pair splits it. */
.sidebar-section.event-list-mode .event-art-versus,
.sidebar-section.event-list-mode .event-art-fallback{
  padding:6px!important;box-sizing:border-box!important;
}

/* Requirement 12: the one Bangla status line, and the compact metadata row
   under it. Bengali needs a little more line height than Latin at this size. */
.sidebar-section.event-list-mode .event-status-pill{
  line-height:1.5!important;
}
.sidebar-section.event-list-mode .event-card-time[data-clock="meta"]{
  color:#b9c4d2!important;font-size:9.5px!important;line-height:1.45!important;
}
.sidebar-section.event-list-mode .event-upcoming-card .event-card-time[data-clock="meta"]{
  color:#c8d3e2!important;
}

@media (max-width:1000px){
  .sidebar-section.event-list-mode .event-card-art img{padding:6px!important}
}
@media (max-width:480px){
  .sidebar-section.event-list-mode .event-card-art img{padding:5px!important}
}

/* Requirement 10. While a stream is decoding, the decorative animations stand
   down. Nothing is removed - the marquee, the pulse and the equalizer all
   still exist and resume the moment playback stops - they simply stop asking
   a phone's GPU for work it needs for video.
   Motion is also honoured for anyone who asked the OS to reduce it. */
body.playback-active .marquee-text{animation-duration:38s!important}
body.playback-active .sidebar-section.event-list-mode .event-ref-card{transition:none!important}
body.playback-active .sidebar-section.event-list-mode .event-ref-card:hover{transform:none!important}
body.playback-active .sidebar-section.event-list-mode .event-status-pill.live .pulse-dot{animation-duration:3s!important}
body.playback-active .sidebar-section.event-list-mode .event-now-playing .playing-equalizer span{animation-duration:1.6s!important}
body.playback-active .sidebar-section.event-list-mode .event-sport-badge,
body.playback-active .sidebar-section.event-list-mode .event-filter-menu{backdrop-filter:none!important}

/* ── Today Match redesign (v2, Black + Crimson) ─────────────────────────────
 * By direct request, against a supplied reference file
 * (clicktv_title_line_all_cards_corrected.htm). Scoped entirely to
 * .tm-columns / .tm-col / .tm-card-v2 / .tm-shell / .tm-channels, which only
 * ever exist on the Today Match tab (see app.js's createTodayMatchCardV2 and
 * ensureTodayMatchColumns) - Upcoming keeps the locked 152px row above, byte
 * for byte.
 *
 * The list is two real DOM columns (app.js splits cards left/right by index
 * and appends into .tm-col), not a CSS grid of rows and not column-count. A
 * grid stretches every cell in a row to the tallest cell in that row, so a
 * six-channel card next to a one-channel card left visible empty space under
 * the shorter one. column-count avoids that gap but clips a negative-offset
 * absolute child - the serial badge, floated half outside the card's own
 * corner - to its column box regardless of overflow set anywhere up the
 * ancestor chain, confirmed directly by testing. Two independent flex
 * columns have neither problem: no shared row, and no clipping context. */
#sidebarList.tm-columns{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  padding:0!important;
  align-items:start!important;
}
#sidebarList.tm-columns > .tm-col{
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  min-width:0!important;
}
.sidebar-section.event-list-mode .tm-shell{
  display:block!important;height:auto!important;width:100%!important;
}

/* The card itself: full-width poster on top, a short text block under it -
   the 112px/152px locked row does not apply here at all. Overflow stays
   visible so the serial badge can sit half outside the card's own top-left
   corner, the way the reference does it - only the poster crops its
   image/gradient. */
.sidebar-section.event-list-mode .event-ref-card.tm-card-v2{
  display:block!important;
  grid-template-columns:none!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  width:100%!important;
  padding:0!important;
  border-radius:12px!important;
  overflow:visible!important;
  border-color:#413039!important;
  background:
    radial-gradient(circle at 88% 110%,rgba(255,49,88,.07),transparent 40%),
    linear-gradient(180deg,#18171c 0%,#111216 100%)!important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.sidebar-section.event-list-mode .event-ref-card.tm-card-v2::before{
  content:none!important;
}
.sidebar-section.event-list-mode .event-ref-card.tm-card-v2.tm-one-channel{
  border-radius:12px!important;
}
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel .tm-poster{
  height:176px!important;
  border-radius:11px!important;
}

/* One rigid hover/playing unit: the card and its channel grid below it are
   two sibling boxes (see .tm-shell / .tm-channels), so the lift-and-glow
   transform lives on the shell and moves both together. A bare one-channel
   card (no shell at all) gets the same transform directly. */
.sidebar-section.event-list-mode .tm-shell,
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel{
  transition:transform .18s ease,filter .18s ease!important;
  will-change:transform!important;
}
.sidebar-section.event-list-mode .tm-shell:hover,
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel:hover{
  transform:translateY(-2px) scale(1.008)!important;
  filter:brightness(1.08)!important;
}
.sidebar-section.event-list-mode .tm-shell:hover .tm-card-v2,
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel:hover{
  border-color:#b54360!important;
  box-shadow:
    0 0 0 1px rgba(255,49,88,.22),
    0 0 18px rgba(255,49,88,.16),
    0 14px 30px rgba(0,0,0,.34)!important;
}
.sidebar-section.event-list-mode .tm-shell:hover .tm-poster img,
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel:hover .tm-poster img{
  transform:scale(1.025)!important;
  filter:brightness(1.08) saturate(1.04)!important;
}

/* Currently playing: multi-channel cards get .is-playing-event on the shell
   (updateActiveCards toggles it there); a one-channel card has no shell, so
   it carries the generic .active class on itself instead. */
.sidebar-section.event-list-mode .tm-shell.is-playing-event .tm-card-v2,
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel.active{
  border-color:#ff3158!important;
  animation:tmCardPlayingPulse 2.2s ease-in-out infinite!important;
}
.sidebar-section.event-list-mode .tm-shell.is-playing-event:hover .tm-card-v2,
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel.active:hover{
  box-shadow:
    inset 2px 0 0 #ff3158,
    0 0 0 1px rgba(255,49,88,.30),
    0 0 24px rgba(255,49,88,.20),
    0 16px 32px rgba(0,0,0,.36)!important;
}
@keyframes tmCardPlayingPulse{
  0%,100%{
    box-shadow:
      inset 2px 0 0 #ff3158,
      0 0 0 1px rgba(255,49,88,.18),
      0 0 16px rgba(255,49,88,.10),
      0 14px 30px rgba(0,0,0,.32);
  }
  50%{
    box-shadow:
      inset 2px 0 0 #ff3158,
      0 0 0 1px rgba(255,49,88,.34),
      0 0 28px rgba(255,49,88,.30),
      0 14px 30px rgba(0,0,0,.32);
  }
}
/* Wordless "this one, right now" cue on the playing card's own category
   badge - no NOW PLAYING text, per the card's minimal-fields rule, but a
   pulsing dot is exactly as unambiguous without adding a word. */
.sidebar-section.event-list-mode .tm-shell.is-playing-event .tm-category::before,
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel.active .tm-category::before{
  content:""!important;
  display:inline-block!important;
  width:6px!important;height:6px!important;border-radius:999px!important;
  margin-right:5px!important;
  background:#ff3158!important;
  box-shadow:0 0 6px rgba(255,49,88,.9)!important;
  animation:tmPlayingDot 1.4s ease-in-out infinite!important;
  vertical-align:middle!important;
}
@keyframes tmPlayingDot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.72)}
}

.sidebar-section.event-list-mode .tm-poster{
  position:relative!important;
  width:100%!important;height:146px!important;
  overflow:hidden!important;background:#111216!important;
  border-radius:11px 11px 0 0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.sidebar-section.event-list-mode .tm-poster img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center center!important;
  background:#090d14!important;
  display:block!important;padding:0!important;
  transition:transform .22s ease,filter .22s ease!important;
}
.sidebar-section.event-list-mode .tm-poster .event-art-versus,
.sidebar-section.event-list-mode .tm-poster .event-art-fallback,
.sidebar-section.event-list-mode .tm-poster .event-art-crests{
  width:100%!important;height:100%!important;padding:10px!important;
}
.sidebar-section.event-list-mode .tm-poster::after{
  content:"";position:absolute!important;left:0!important;right:0!important;bottom:0!important;
  height:42%!important;pointer-events:none!important;z-index:1!important;
  background:linear-gradient(to top,rgba(10,8,10,.92) 0%,rgba(10,8,10,.45) 50%,rgba(10,8,10,0) 100%)!important;
}
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel .tm-poster::after{
  height:48%!important;
}

/* Two real DOM columns (see #sidebarList.tm-columns above), badge sits cleanly inside top-left corner without clipping */
.sidebar-section.event-list-mode .tm-serial{
  position:absolute!important;top:6px!important;left:6px!important;z-index:8!important;
  width:22px!important;height:22px!important;border-radius:999px!important;
  display:grid!important;place-items:center!important;
  border:2px solid #07101a!important;background:#212d3d!important;color:#ffffff!important;
  font-size:11px!important;font-weight:900!important;line-height:1!important;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.35),
    0 3px 10px rgba(0,0,0,.45)!important;
}
.sidebar-section.event-list-mode .tm-category{
  position:absolute!important;top:8px!important;right:8px!important;z-index:3!important;
  margin:0!important;padding:4px 7px!important;
  border:1px solid rgba(255,49,88,.45)!important;border-radius:7px!important;
  background:rgba(35,12,18,.72)!important;color:#ffd6df!important;
  font-size:8.5px!important;line-height:1!important;font-weight:900!important;
  text-transform:uppercase!important;letter-spacing:.2px!important;
  text-shadow:0 1px 2px rgba(0,0,0,.8)!important;
  backdrop-filter:blur(5px)!important;
}
.sidebar-section.event-list-mode .tm-info{
  position:absolute!important;left:0!important;right:0!important;bottom:0!important;z-index:2!important;
  padding:12px 8px 8px!important;background:transparent!important;
}
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel .tm-info{
  padding:26px 10px 18px!important;
}
.sidebar-section.event-list-mode .tm-league{
  margin:0 0 3px!important;color:#ffd24a!important;font-size:8px!important;line-height:1!important;
  font-weight:800!important;letter-spacing:.15px!important;white-space:nowrap!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
  text-shadow:0 1px 2px rgba(0,0,0,.9)!important;
}
.sidebar-section.event-list-mode .tm-title{
  font-size:14px!important;line-height:1.2!important;font-weight:900!important;color:#fff7f8!important;
  text-shadow:0 1px 3px rgba(0,0,0,.9)!important;
  display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
  overflow:hidden!important;margin:0!important;
}
.sidebar-section.event-list-mode .tm-card-v2.tm-one-channel .tm-title{
  font-size:14.5px!important;line-height:1.18!important;
}

/* Same soft red accent line directly under the match title on every card -
   not under the channel buttons, not at the card's bottom edge. */
.sidebar-section.event-list-mode .tm-info::after{
  content:""!important;display:block!important;
  width:138px!important;max-width:78%!important;height:3px!important;
  margin-top:8px!important;border-radius:999px!important;
  background:linear-gradient(90deg,#ff3158 0%,#ff6b86 55%,rgba(255,107,134,0) 100%)!important;
  box-shadow:0 0 12px rgba(255,49,88,.22)!important;
  pointer-events:none!important;
}

@media(max-width:460px){
  .sidebar-section.event-list-mode .tm-poster{height:124px!important}
  .sidebar-section.event-list-mode .tm-card-v2.tm-one-channel .tm-poster{height:150px!important}
  .sidebar-section.event-list-mode .tm-title{font-size:12px!important}
}

/* ─────────────────────────────────────────────────────────────────────────
   Phone legibility and reach.

   Measured on the live site 2026-09-02: the Today Match list was two columns
   at every width down to 320px, the league line was 8px, the state badge
   7.5px, the reminder button 26px square, and the stream-readiness line was
   hidden below 1000px - the one place a viewer can see whether a match is
   actually watchable yet.

   Two columns on a 390px phone leaves each card about 185px wide, which is
   why the text had to shrink to 8px to fit. One column per row is what buys
   the legibility back, so these travel together rather than as separate
   tweaks. Last in the file because everything above is !important.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:560px){
  /* One match per row, on both tabs. Today Match lays out through the
     tm-columns class and Upcoming through upcoming-grid, and only the first
     was collapsed at first - so Upcoming stayed two columns on a 390px phone
     while Today Match was fixed beside it. */
  #sidebarList.tm-columns,
  #sidebarList.upcoming-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  /* Nothing below 11px, and the status line stays readable at a glance. */
  .sidebar-section.event-list-mode .event-card-competition,
  .sidebar-section.event-list-mode .tm-league{font-size:11.5px!important}
  .sidebar-section.event-list-mode .event-sport-badge,
  .sidebar-section.event-list-mode .tm-category{font-size:11px!important}
  .sidebar-section.event-list-mode .event-sport-badge i,
  .sidebar-section.event-list-mode .event-card-countdown i{font-size:11px!important}
  .sidebar-section.event-list-mode .event-status-pill{
    height:auto!important;min-height:22px!important;font-size:11px!important;
  }
  .sidebar-section.event-list-mode .event-card-time,
  .sidebar-section.event-list-mode .event-card-phase,
  .sidebar-section.event-list-mode .event-card-countdown,
  .sidebar-section.event-list-mode .tm-serial{font-size:11px!important}
  .sidebar-section.event-list-mode .event-card-title,
  .sidebar-section.event-list-mode .tm-title{font-size:13.5px!important}

  /* Whether a match can be watched yet is the reason to look at the card, so
     it is shown on a phone rather than hidden. */
  .sidebar-section.event-list-mode .event-card-streams{
    display:inline-flex!important;font-size:11px!important;
  }

  /* 44px is the smallest target a finger hits reliably. */
  .sidebar-section.event-list-mode .card-remind-btn,
  .sidebar-section.event-list-mode .event-ref-card .card-fav-btn{
    width:44px!important;height:44px!important;min-width:44px!important;
    font-size:15px!important;
  }
}

/* The countdown pill and the reminder button are the two things a viewer acts
   on from the Upcoming list, and at 8px and 24px they were the smallest
   things on the card. Raised at every width, not only on a phone: 8px is
   below reading size on a desktop too, and 24px is under half a fingertip. */
.sidebar-section.event-list-mode .event-upcoming-card .event-status-pill{
  font-size:10.5px!important;min-height:20px!important;
}
.sidebar-section.event-list-mode .event-upcoming-card .card-remind-btn{
  width:32px!important;height:32px!important;min-width:32px!important;
}
@media (max-width:560px){
  .sidebar-section.event-list-mode .event-upcoming-card .event-status-pill{
    font-size:11px!important;min-height:22px!important;
  }
  .sidebar-section.event-list-mode .event-upcoming-card .card-remind-btn{
    width:44px!important;height:44px!important;min-width:44px!important;
  }
}

/* Same reasoning as the channel chips: a touch device needs a 44px target
   even when the screen is wide. */
@media (hover:none){
  .sidebar-section.event-list-mode .card-remind-btn,
  .sidebar-section.event-list-mode .event-ref-card .card-fav-btn{
    width:44px!important;height:44px!important;min-width:44px!important;
  }
}

/* The day boundary in the Upcoming list. Spans the whole grid so it reads as
   a divider rather than as another card, and sticks to the top while that
   day's matches scroll past - which is the point: knowing which day you are
   looking at without scrolling back. */
.sidebar-section.event-list-mode .event-day-heading{
  grid-column:1 / -1!important;
  position:sticky!important;top:0!important;z-index:3!important;
  margin:2px 0 -2px!important;padding:7px 10px!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,#191a20 0%,#14151a 100%)!important;
  border:1px solid #2a2b33!important;
  color:#cfe0f5!important;font-size:12px!important;font-weight:800!important;
  letter-spacing:.3px!important;
}
@media (max-width:560px){
  .sidebar-section.event-list-mode .event-day-heading{font-size:12.5px!important}
}

/* The data age, beside the count. Never below 11px, and readable on the
   phone header that smart-filter.css brings back for event lists - the
   whole point is that a viewer can tell a cached list from a fresh one. */
.sidebar-data-age{
  margin-left:auto!important;color:#8b98ac!important;font-size:11px!important;font-weight:800!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
.sidebar-data-age.stale{color:#ffb3c0!important}
@media (max-width:560px){
  .sidebar-data-age{font-size:11px!important;max-width:52%!important}
}

/* Report item [12], measured rather than assumed: the Upcoming card's
   action button came out 40x32 in a 390px Chromium, because the 480px
   block above shrinks the icon to 32px and hides the label. A finger needs
   44px, and the label is what tells a viewer whether pressing plays
   something or only opens the details. */
@media (max-width:560px){
  /* The last piece of sub-11px text on the page: the "vs" between the two
     team names inside the card art. The names either side were raised long
     ago and this was left at 7.5px, which is what a 390px Chromium still
     measured on the live site. */
  .sidebar-section.event-list-mode .event-art-versus em{font-size:11px!important}
  /* The Upcoming card's serial badge, at 8px from final-design.css. The
     Today card's equivalent is 11px, and a number a viewer reads to say
     "the third one down" has to be one of them. */
  .sidebar-section.event-list-mode .sidebar-channel-num{
    min-width:18px!important;height:18px!important;font-size:11px!important;
  }
  .sidebar-section.event-list-mode .event-card-action{
    min-width:44px!important;min-height:44px!important;font-size:11px!important;
  }
  .sidebar-section.event-list-mode .event-card-action i{
    width:44px!important;height:44px!important;font-size:13px!important;
  }
}
@media (hover:none){
  .sidebar-section.event-list-mode .event-card-action,
  .sidebar-section.event-list-mode .event-card-action i{
    min-width:44px!important;min-height:44px!important;
  }
}