/* Card design sections 1-20: one event card, plus a compact channel selector.
 *
 * Section 2 is the reason this is a separate file rather than an edit to
 * event-cards.css. The main event row is hard locked - 152px, three columns,
 * every element inside it placed - and the selector must not move any of it. So
 * the row is left exactly as it was and the selector is added as a SIBLING
 * inside a shell:
 *
 *   .event-card-shell            the flex item the list lays out
 *     .event-ref-card            untouched, still 152px, still uniform
 *     .event-channel-strip       new, appears only when a channel is resolved
 *
 * Nothing here names the player, the video element, the header, the sidebar
 * width or the main navigation - the strip cannot reach them, and a hard-lock
 * test asserts their absence.
 *
 * Everything is scoped to .sidebar-section.event-list-mode, so the channel
 * grid, the movie grid and the series list are untouched by construction.
 */

/* ── The shell ───────────────────────────────────────────────────────────── */
/* The list is a flex column with a gap between items. The shell becomes that
   item, so the gap now separates one event from the next rather than separating
   a card from its own channels. */
.sidebar-section.event-list-mode .event-card-shell{
  display:flex!important;flex-direction:column!important;gap:0!important;
  width:100%!important;min-width:0!important;
  /* No height of its own: the locked row sets it, and the strip adds to it only
     when there is a strip. */
  height:auto!important;
}

/* Section 8. The playing event reads as playing, lightweightly: one soft ring,
   no scale, no shadow bloom, nothing that could shift a neighbour. */
.sidebar-section.event-list-mode .event-card-shell.is-playing-event{
  border-radius:12px!important;
  box-shadow:0 0 0 1px rgba(37,230,165,.28)!important;
}

/* ── The strip ───────────────────────────────────────────────────────────── */
/* Section 4. Desktop 2-4 per row by available width, mobile 2 - expressed as
   auto-fit so the count follows the real width instead of a guess, and capped
   at four so a wide sidebar does not shrink the chips into illegibility. */
.sidebar-section.event-list-mode .event-channel-strip{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
  gap:6px!important;
  box-sizing:border-box!important;
  width:100%!important;min-width:0!important;max-width:100%!important;
  margin:0!important;padding:6px!important;
  /* Section 14: the strip can never be the thing that scrolls the list
     sideways. */
  overflow:hidden!important;
  border:1px solid rgba(120,150,190,.16)!important;
  border-top:0!important;
  border-radius:0 0 12px 12px!important;
  background:linear-gradient(180deg,rgba(14,22,36,.72),rgba(10,16,27,.86))!important;
}

@supports (grid-template-columns:repeat(auto-fit,minmax(150px,1fr))){
  .sidebar-section.event-list-mode .event-channel-strip{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;
  }
}

/* Section 4/5, corrected. The exact-count rules for three and four columns are
   gone. They overrode auto-fit, so three channels were squeezed into a 375px
   sidebar at ~118px each and the summary line - the whole point of the chip -
   ellipsised to "1 Pri... 0 Ba...". Auto-fit already expresses what section 4
   asks for, "two to four per row by available width", and it honours the 150px
   floor below which the summary stops being readable. A third channel wraps to a
   second row on a narrow sidebar and sits beside the others on a wide one.

   One and two are kept, because those only ever *reduce* the count. */
.sidebar-section.event-list-mode .event-channel-strip[data-columns="2"]{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.sidebar-section.event-list-mode .event-channel-strip[data-columns="1"]{
  grid-template-columns:minmax(0,1fr)!important;
}

/* ── One channel chip ────────────────────────────────────────────────────── */
/* Section 4: visually secondary to the event row. Section 5: icon, name,
   summary - and nothing else. */
.sidebar-section.event-list-mode .event-channel-chip{
  display:grid!important;
  grid-template-columns:26px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  gap:1px 7px!important;
  box-sizing:border-box!important;
  width:100%!important;min-width:0!important;
  /* Section 14: a usable tap target on a phone, without making the desktop chip
     tall enough to compete with the event row. */
  min-height:42px!important;
  margin:0!important;padding:5px 7px!important;
  border:1px solid rgba(120,150,190,.20)!important;
  border-radius:9px!important;
  background:rgba(20,30,48,.72)!important;
  color:#dfe8f5!important;
  font:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  appearance:none!important;-webkit-appearance:none!important;
  transition:border-color .16s ease,background .16s ease!important;
}

.sidebar-section.event-list-mode .event-channel-chip:hover{
  border-color:rgba(150,185,230,.38)!important;
  background:rgba(26,38,60,.86)!important;
}
.sidebar-section.event-list-mode .event-channel-chip:focus-visible{
  outline:2px solid rgba(84,233,189,.75)!important;outline-offset:1px!important;
}

/* Section 6. Selected reads immediately, and in the theme's own green. */
.sidebar-section.event-list-mode .event-channel-chip.is-selected{
  border-color:rgba(37,230,165,.62)!important;
  background:linear-gradient(180deg,rgba(20,68,56,.80),rgba(13,42,35,.86))!important;
}
.sidebar-section.event-list-mode .event-channel-chip.is-selected .event-channel-chip-name{
  color:#8ff3d0!important;
}
.sidebar-section.event-list-mode .event-channel-chip.is-selected .event-channel-chip-icon{
  border-color:rgba(37,230,165,.55)!important;
  background:rgba(24,80,66,.9)!important;color:#a8f7dc!important;
}

/* Section 8. Selected is a choice; playing is a fact. The playing chip keeps the
   selected styling and adds the equaliser, so the two never contradict. */
.sidebar-section.event-list-mode .event-channel-chip.is-playing .event-channel-chip-eq{
  display:inline-flex!important;
}

.sidebar-section.event-list-mode .event-channel-chip-icon{
  display:flex!important;grid-row:1 / span 2!important;
  width:26px!important;height:26px!important;
  align-items:center!important;justify-content:center!important;
  overflow:hidden!important;
  border:1px solid rgba(120,150,190,.24)!important;border-radius:7px!important;
  background:rgba(30,44,68,.9)!important;
  color:#a9c2e2!important;
  font-size:9px!important;font-weight:950!important;letter-spacing:.3px!important;
  line-height:1!important;
}
/* Section 10's rule applies to a channel logo too: contain, never stretch. */
.sidebar-section.event-list-mode .event-channel-chip-icon img{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;display:block!important;
}

/* Section 14: long channel names ellipsise, they never wrap the chip taller. */
.sidebar-section.event-list-mode .event-channel-chip-name{
  display:block!important;grid-column:2!important;grid-row:1!important;
  min-width:0!important;max-width:100%!important;
  overflow:hidden!important;
  color:#eaf2ff!important;
  font-size:10.5px!important;font-weight:900!important;line-height:1.25!important;
  text-overflow:ellipsis!important;white-space:nowrap!important;
}

/* Section 5/15. The stream summary, secondary by size and colour. */
.sidebar-section.event-list-mode .event-channel-chip-sub{
  display:flex!important;grid-column:2!important;grid-row:2!important;
  align-items:center!important;gap:6px!important;
  min-width:0!important;max-width:100%!important;
  overflow:hidden!important;
  font-size:8.5px!important;font-weight:800!important;line-height:1.3!important;
  white-space:nowrap!important;
}
.sidebar-section.event-list-mode .event-channel-chip-sub span{
  flex:0 1 auto!important;min-width:0!important;
  overflow:hidden!important;text-overflow:ellipsis!important;
}
.sidebar-section.event-list-mode .event-channel-chip-primary{color:#6fe7c0!important}
.sidebar-section.event-list-mode .event-channel-chip-backups{color:#93a6bd!important}
.sidebar-section.event-list-mode .event-channel-chip-dupes{color:#c8a45f!important}

.sidebar-section.event-list-mode .event-channel-chip-eq{
  display:none!important;flex:0 0 auto!important;
  align-items:flex-end!important;gap:1.5px!important;height:7px!important;
}
.sidebar-section.event-list-mode .event-channel-chip-eq i{
  display:block!important;width:2px!important;height:100%!important;
  border-radius:1px!important;background:#54e9bd!important;
  animation:eventChannelEq .9s ease-in-out infinite!important;
}
.sidebar-section.event-list-mode .event-channel-chip-eq i:nth-child(2){animation-delay:.18s!important}
.sidebar-section.event-list-mode .event-channel-chip-eq i:nth-child(3){animation-delay:.36s!important}

@keyframes eventChannelEq{
  0%,100%{transform:scaleY(.35)}
  50%{transform:scaleY(1)}
}

@media (prefers-reduced-motion:reduce){
  .sidebar-section.event-list-mode .event-channel-chip{transition:none!important}
  .sidebar-section.event-list-mode .event-channel-chip-eq i{animation:none!important;transform:scaleY(.7)!important}
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Section 4/14. Two per row on a phone, always, and a tap target that grows
   rather than the text shrinking to nothing. */
@media (max-width:1000px){
  /* The attribute selector is carried through deliberately: without it the
     desktop [data-columns="4"] cap out-specifies this rule and a phone lays out
     four chips in one row. */
  .sidebar-section.event-list-mode .event-channel-strip,
  .sidebar-section.event-list-mode .event-channel-strip[data-columns]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;padding:5px!important;
  }
  .sidebar-section.event-list-mode .event-channel-chip{min-height:44px!important}
}

@media (max-width:480px){
  .sidebar-section.event-list-mode .event-channel-strip,
  .sidebar-section.event-list-mode .event-channel-strip[data-columns]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;padding:4px!important;
  }
  .sidebar-section.event-list-mode .event-channel-chip{
    grid-template-columns:22px minmax(0,1fr)!important;
    gap:1px 6px!important;padding:5px 6px!important;
    min-height:44px!important;
  }
  .sidebar-section.event-list-mode .event-channel-chip-icon{
    width:22px!important;height:22px!important;font-size:8px!important;
  }
  .sidebar-section.event-list-mode .event-channel-chip-name{font-size:10px!important}
  .sidebar-section.event-list-mode .event-channel-chip-sub{font-size:8px!important;gap:5px!important}
}

@media (max-width:380px){
  .sidebar-section.event-list-mode .event-channel-strip,
  .sidebar-section.event-list-mode .event-channel-strip[data-columns]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;padding:4px!important;
  }
  .sidebar-section.event-list-mode .event-channel-chip-name{font-size:9.5px!important}
  /* The dupe note is the least important thing on the chip, so it is the first
     to go when there is genuinely no room for it. */
  .sidebar-section.event-list-mode .event-channel-chip-dupes{display:none!important}
}

/* A short landscape phone has almost no vertical room, so the strip goes to one
   compact row of chips rather than stealing two rows from the list. */
@media (max-width:980px) and (orientation:landscape) and (max-height:500px){
  .sidebar-section.event-list-mode .event-channel-strip,
  .sidebar-section.event-list-mode .event-channel-strip[data-columns]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:4px!important;padding:4px!important;
  }
  .sidebar-section.event-list-mode .event-channel-chip{
    grid-template-rows:auto!important;min-height:40px!important;padding:4px 6px!important;
  }
  .sidebar-section.event-list-mode .event-channel-chip-sub{display:none!important}
  .sidebar-section.event-list-mode .event-channel-chip-name{grid-row:1!important;font-size:9.5px!important}
}

/* ── One card, not two boxes ──────────────────────────────────────────────── */
/* Sections 2/3/15, corrected. The shell put the selector directly underneath the
   row, but the row kept its own full border radius and its own status-coloured
   bottom edge, so what the viewer saw was a finished card with a red line across
   the bottom and a second, separate box below it. The fixture and its channels
   are one card, so the seam between them is removed and the outer edge is drawn
   once, around the pair.

   Nothing here changes a box metric. The row keeps its 152px height, its three
   columns and its border *widths*; only the bottom corner radii and the bottom
   border's colour change, and neither participates in layout. The hard lock in
   section 2 holds. */
.sidebar-section.event-list-mode .event-card-shell:has(.event-channel-strip){
  border:1px solid rgba(120,150,190,.18)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:rgba(10,16,27,.55)!important;
}

/* The row, when it is the top half of a card rather than a whole one. */
.sidebar-section.event-list-mode .event-card-shell:has(.event-channel-strip) > .event-ref-card{
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
  border-bottom-color:transparent!important;
}

/* The strip is now inside the shell's own border, so it draws none of its own
   and no corner of its own. */
.sidebar-section.event-list-mode .event-card-shell:has(.event-channel-strip) > .event-channel-strip{
  border:0!important;
  border-top:1px solid rgba(120,150,190,.14)!important;
  border-radius:0!important;
}

/* Section 8. The playing ring belongs to the whole card. */
.sidebar-section.event-list-mode .event-card-shell:has(.event-channel-strip).is-playing-event{
  border-color:rgba(37,230,165,.45)!important;
}

/* :has() is widely supported, but a browser without it must not be left with two
   boxes *and* a doubled border. Without :has() the shell simply stays invisible
   and the strip keeps drawing its own rounded bottom, which is the old
   appearance - correct, just not unified. */
@supports not selector(:has(*)){
  .sidebar-section.event-list-mode .event-card-shell{
    border:0!important;background:transparent!important;
  }
}

/* ── Section 10/15: the artwork tile is a thumbnail, not a slab ───────────── */
/* The initials block was set at 17px/950 filling the whole 112px column, so on an
   Upcoming card - where there is no poster - it read heavier than the fixture
   title beside it and inverted the hierarchy section 15 asks for. The column
   width is locked and unchanged; only the type scale and the padding move. */
.sidebar-section.event-list-mode .event-art-versus{
  padding:8px 6px!important;box-sizing:border-box!important;gap:2px!important;
}
.sidebar-section.event-list-mode .event-art-versus span{
  font-size:13px!important;font-weight:900!important;letter-spacing:.3px!important;
  color:#c9d7ea!important;
}
.sidebar-section.event-list-mode .event-art-versus em{
  font-size:7.5px!important;letter-spacing:1.4px!important;color:#7787a0!important;
}
.sidebar-section.event-list-mode .event-art-fallback i{font-size:18px!important}
.sidebar-section.event-list-mode .event-art-fallback span{
  font-size:10px!important;font-weight:900!important;color:#c3d1e4!important;
}

/* Section 10. Two real crests with a VS between them, contained and padded -
   never stretched, never cropped. */
.sidebar-section.event-list-mode .event-art-crests{
  display:flex!important;width:100%!important;height:100%!important;
  box-sizing:border-box!important;
  flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:2px!important;padding:7px 6px!important;
  background:radial-gradient(circle at 50% 18%,rgba(90,168,255,.16),transparent 55%),
             linear-gradient(145deg,#17253b,#0a111d)!important;
}
.sidebar-section.event-list-mode .event-art-crests img{
  display:block!important;
  width:100%!important;max-width:38px!important;height:auto!important;max-height:34px!important;
  object-fit:contain!important;object-position:center!important;
}
.sidebar-section.event-list-mode .event-art-crests em{
  color:#7787a0!important;font-size:7.5px!important;font-style:normal!important;font-weight:900!important;
  letter-spacing:1.4px!important;text-transform:uppercase!important;
}

/* Section 10. A single picture is centred and contained, so a poster with a
   different aspect ratio is never stretched to fill the tile. */
.sidebar-section.event-list-mode .event-ref-card img[data-event-art]{
  object-fit:contain!important;object-position:center!important;
  background:linear-gradient(145deg,#141f31,#0a111d)!important;
}

@media (max-width:1000px){
  .sidebar-section.event-list-mode .event-art-crests img{max-width:32px!important;max-height:28px!important}
  .sidebar-section.event-list-mode .event-art-versus span{font-size:12px!important}
}
@media (max-width:480px){
  .sidebar-section.event-list-mode .event-art-crests img{max-width:30px!important;max-height:26px!important}
  .sidebar-section.event-list-mode .event-art-versus span{font-size:11.5px!important}
}

/* ── Today Match redesign (v2, Black + Crimson): channel buttons ────────────
 * Name only, two-column grid, red when selected/playing, ash/grey otherwise -
 * no icon, no Primary/Backups summary, no equalizer. A single channel shows
 * no grid at all (see createTodayMatchCardV2 / eventChannelStripHtml(item,
 * true) in app.js) and plays as the card's plain default. */
.sidebar-section.event-list-mode .tm-card-v2 .tm-poster img[data-event-art]{
  object-fit:cover!important;background:none!important;
}
/* The shared shell rule above draws one unified border/background around a
   card plus its strip - correct for the locked Upcoming row, where the card
   and the shell are meant to read as one outlined box. This card (tm-card-v2)
   and its channel grid (tm-channels) each draw their own border and radius
   instead, and the hover/playing rules in event-cards.css target tm-shell
   directly, so the shell's own decoration is switched off rather than
   doubled. */
.sidebar-section.event-list-mode .event-card-shell.tm-shell:has(.event-channel-strip),
.sidebar-section.event-list-mode .event-card-shell.tm-shell{
  overflow:visible!important;
  border:0!important;background:transparent!important;border-radius:0!important;
}
.sidebar-section.event-list-mode .event-card-shell.tm-shell.is-playing-event{
  border:0!important;box-shadow:none!important;
}
.sidebar-section.event-list-mode .event-channel-strip.tm-channels{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;padding:7px!important;
  border:1px solid #413039!important;border-top:0!important;
  border-radius:0 0 12px 12px!important;
  background:linear-gradient(180deg,#18171c 0%,#111216 100%)!important;
}
.sidebar-section.event-list-mode .tm-shell.is-playing-event .event-channel-strip.tm-channels{
  border-color:#ff3158!important;
}
.sidebar-section.event-list-mode .event-channel-chip.tm-channel{
  display:block!important;
  min-width:0!important;min-height:27px!important;padding:5px 6px!important;
  border:1px solid #4d515a!important;
  background:linear-gradient(180deg,#33363d 0%,#292c32 100%)!important;
  color:#eceef2!important;
  border-radius:7px!important;font-size:10.5px!important;font-weight:850!important;
  text-align:center!important;
  overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;
  box-shadow:none!important;
  transition:.15s ease!important;
}
.sidebar-section.event-list-mode .event-channel-chip.tm-channel:hover{
  background:linear-gradient(180deg,#3d4149 0%,#31343b 100%)!important;
  border-color:#60656f!important;
}
/* Section 6/8's existing rule: .is-selected marks a card's own stored/default
   channel, independent of whether that card is the one actually playing -
   correct for the full Upcoming card, where it is a quiet indicator. The
   spec for this redesign is stricter: only one red button may exist across
   the WHOLE Today Match list at a time, on whichever card is actually
   playing right now. .is-playing already carries exactly that condition
   (updateEventChannelStrip: selected && playingHere), so red keys off it
   instead - every other card's channels, including its own stored default,
   stay ash until it becomes the one playing. */
.sidebar-section.event-list-mode .event-channel-chip.tm-channel.is-playing{
  border-color:#ff496b!important;
  background:linear-gradient(180deg,#ff355c 0%,#e3264a 100%)!important;
  color:#fff!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 18px rgba(255,49,88,.18)!important;
  animation:tmChannelPulse 1.8s ease-in-out infinite!important;
}
/* A click's own immediate feedback, from the moment it registers until the
   new route either plays or fails - the request the button doesn't turn red
   until a decoded frame arrives, or a still-buffering switch reads as "the
   click did nothing, same channel as before". */
.sidebar-section.event-list-mode .event-channel-chip.tm-channel.is-switching{
  border-color:#ff9db0!important;
  color:#fff!important;
  background:linear-gradient(180deg,#5a2e3a 0%,#3c2029 100%)!important;
  animation:tmChannelSwitching .9s ease-in-out infinite!important;
}
@keyframes tmChannelPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 18px rgba(255,49,88,.18)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 22px rgba(255,49,88,.42)}
}
@keyframes tmChannelSwitching{
  0%,100%{opacity:.72}
  50%{opacity:1}
}
@media(max-width:460px){
  .sidebar-section.event-list-mode .tm-channels{gap:4px!important;padding:6px!important}
  /* A 25px chip with 9.5px text is half of any published guidance - Apple
   * asks for 44px, Android for 48dp - and a mis-tap here switches the stream
   * mid-match. The strip drops to one column below 420px rather than shrinking
   * further, because in a two-column card grid a wider button and a readable
   * one cannot both fit across. */
  .sidebar-section.event-list-mode .event-channel-chip.tm-channel{font-size:10.5px!important;min-height:40px!important}
}

/* ── Today Match: what state is this card actually in ───────────────────────
 *
 * The tab now holds matches that have not started - routing moves a fixture
 * across 30 minutes before kickoff - so the card has to say which of them it
 * is. While everything on the tab was live a LIVE badge on every card was
 * decoration; now its absence is the information.
 *
 * Sits top-left, opposite .tm-category top-right, and borrows that badge's
 * shape so the poster keeps one visual language.
 */
.sidebar-section.event-list-mode .tm-state{
  position:absolute!important;top:8px!important;left:8px!important;z-index:3!important;
  max-width:calc(100% - 74px)!important;
  margin:0!important;padding:4px 7px!important;
  border-radius:7px!important;
  font-size:8.5px!important;line-height:1!important;font-weight:900!important;
  letter-spacing:.2px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  text-shadow:0 1px 2px rgba(0,0,0,.8)!important;
  backdrop-filter:blur(5px)!important;
}
/* Live. The only one that gets the site's red, because it is the only one that
 * means "watch this now". */
.sidebar-section.event-list-mode .tm-state-live{
  border:1px solid rgba(255,49,88,.55)!important;
  background:rgba(35,12,18,.78)!important;color:#ffdbe3!important;
}
/* Not started, and a stream is already resolved - the viewer can queue it up. */
.sidebar-section.event-list-mode .tm-state-ready{
  border:1px solid rgba(46,204,113,.5)!important;
  background:rgba(10,32,20,.78)!important;color:#c9f5da!important;
}
/* Not started, no stream yet. Amber, because it is a countdown, not a promise. */
.sidebar-section.event-list-mode .tm-state-soon{
  border:1px solid rgba(241,196,15,.45)!important;
  background:rgba(38,30,8,.78)!important;color:#ffe9a8!important;
}
/* Kickoff has passed and nothing has been found. Says so rather than looking
 * like a live card that will not play. */
.sidebar-section.event-list-mode .tm-state-waiting{
  border:1px solid rgba(230,126,34,.45)!important;
  background:rgba(40,24,8,.78)!important;color:#ffd7ac!important;
}
@media (max-width:460px){
  .sidebar-section.event-list-mode .tm-state{
    font-size:7.5px!important;padding:3px 5px!important;
    max-width:calc(100% - 58px)!important;
  }
}

@media (max-width:420px){
  .sidebar-section.event-list-mode .tm-channels{
    grid-template-columns:1fr!important;
  }
  .sidebar-section.event-list-mode .event-channel-chip.tm-channel{
    min-height:42px!important;font-size:11px!important;
  }
}


/* One channel: the same chip, spanning the strip.
 *
 * The two-column grid is what a selector needs; with a single option there is
 * nothing to choose between, so the button takes the full width and reads as
 * the play action it is. Everything else - the chip's own colours, border,
 * height, selected state - is inherited from .tm-channel unchanged, and the
 * two-or-more case never reaches these rules.
 */
.sidebar-section.event-list-mode .event-channel-strip.tm-channels-one{
  grid-template-columns:1fr!important;
}
.sidebar-section.event-list-mode .event-channel-chip.tm-channel-solo{
  justify-content:center!important;
  letter-spacing:.3px!important;
}

/* A channel chip is the button that starts the match, and it was 27px tall on
   the narrowest phones and 40-42px elsewhere. 44px is the smallest target a
   finger hits reliably, so that is the floor everywhere - and on a phone the
   chips stack one per row, which is what makes room for it. */
@media (max-width:560px){
  .sidebar-section.event-list-mode .event-channel-chip.tm-channel,
  .sidebar-section.event-list-mode .tm-channel-solo{
    min-height:44px!important;
    font-size:12px!important;
    padding:8px 10px!important;
  }
  .sidebar-section.event-list-mode .tm-channels{
    grid-template-columns:1fr!important;
  }
}

/* A finger needs 44px whatever the screen is. The width query above catches
   phones, but a tablet or a touch laptop is wide and still has no pointer -
   and on those the chip was 27px. `hover: none` asks the right question:
   whether the device points or touches, rather than how wide it is. */
@media (hover:none){
  .sidebar-section.event-list-mode .event-channel-chip.tm-channel,
  .sidebar-section.event-list-mode .tm-channel-solo{
    min-height:44px!important;
    padding:8px 10px!important;
  }
}

/* Report items [11], [12] and [13], measured in a 390px Chromium rather
   than read off the stylesheet: `.tm-state` was still rendering at 7.5px
   ("লিংক খোঁজা হচ্ছে" is the state a viewer most needs to read), and the
   Today card had no press affordance at all. The 460px block above set
   that 7.5px, and this sheet loads after event-cards.css, so the floor has
   to be restated here to actually win. */
@media (max-width:560px){
  .sidebar-section.event-list-mode .tm-state{
    font-size:11px!important;padding:4px 8px!important;
    max-width:calc(100% - 96px)!important;
  }
  /* The two-crest art has its own "vs", and it is a different element from
     the one in event-cards.css - a 390px Chromium still measured this one
     at 7.5px after the other was raised. */
  .sidebar-section.event-list-mode .event-art-crests em{font-size:11px!important}
  /* This sheet restates .event-art-versus em further up, so the floor has
     to be here as well - written only in event-cards.css it lost, and a
     390px Chromium kept measuring 7.5px. */
  .sidebar-section.event-list-mode .event-art-versus em{font-size:11px!important}
  .sidebar-section.event-list-mode .tm-category{font-size:11px!important}
  .sidebar-section.event-list-mode .tm-league{font-size:11.5px!important}
  .sidebar-section.event-list-mode .tm-title{font-size:13.5px!important}
}