/* sports.css — Sports on TV (screens/sports.js; SportsTvScreen.kt): the day and sport chips, the note on the listings,
 * and the grid of cards of one size (one across on a phone, two from 600 wide, three from 1300), each with its channels
 * as two buttons of one width, "+n" and the bell in places kept on every card, so they line up card to card. */

.sp-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 32px; }
.sp-chips { display: flex; gap: 8px; flex: none; padding: 2px 0; }
.sp-chips .chip { flex: none; }
.sp-chips .chip span { white-space: pre; }
.sp-state { min-height: 300px; }
.sp-searchrow { display: flex; align-items: center; gap: 10px; flex: none; padding-top: 2px; padding-bottom: 10px; }
.sp-searchrow.hidden { display: none; }

/* the listings can be wrong: one quiet line */
.sp-note { display: flex; align-items: center; gap: 6px; font: 400 12px/16px var(--font); color: var(--text-3); }
.sp-note .mi { flex: none; }

/* the grid */
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 600px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-full { grid-column: 1 / -1; min-width: 0; }

/* a part of the grid: "On now", a sport, or a day (searching) */
.sp-head { display: flex; align-items: center; gap: 10px; padding-top: 10px; }
.sp-head-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; flex: none; background: var(--accent-soft); color: var(--accent); }
.sp-head-ic.live { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }

/* a competition's heading within a sport */
.sp-comp { display: flex; align-items: center; gap: 10px; padding-top: 4px; }
.sp-comp-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: rgba(255,255,255,0.92); color: #3A3A3C; overflow: hidden; }
:root[data-theme="light"] .sp-comp-badge { background: #fff; }
.sp-comp-name { font: 600 15px/20px var(--font); letter-spacing: -0.1px; color: var(--text); min-width: 0; flex: 0 1 auto; }
.sp-comp-rule { flex: 1 1 24px; height: 1px; background: var(--separator); }

/* an event, every card the same size */
.sp-card { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 0.6px var(--separator); }
.sp-top { display: flex; align-items: center; gap: 8px; height: 28px; min-width: 0; }
.sp-league { flex: 1; min-width: 0; font: 400 13px/18px var(--font); color: var(--text-2); }
.sp-time { flex: none; font: 600 15px/20px var(--font); letter-spacing: -0.1px; color: var(--text); }
.sp-what { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 54px; margin-top: 6px; min-width: 0; }
.sp-team { display: flex; align-items: center; gap: 9px; min-width: 0; font: 600 15px/22px var(--font); letter-spacing: -0.1px; color: var(--text); }
.sp-title { font: 600 15px/20px var(--font); letter-spacing: -0.1px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* where: two channel buttons of one width (one, wide, on a narrow card), "+n" and the bell (each one's place kept) */
.sp-chans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 50px 50px; gap: 8px; margin-top: 10px; }
.sp-chans.one { grid-template-columns: minmax(0, 1fr) 50px 50px; }
.sp-ch { display: flex; align-items: center; gap: 8px; height: 50px; min-width: 0; padding: 0 10px 0 6px; border-radius: 11px; background: var(--surface-high); text-align: left; }
.sp-ch-logo { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 30px; flex: none; border-radius: 7px; padding: 3px; background: rgba(255,255,255,0.92); color: #3A3A3C; overflow: hidden; }
:root[data-theme="light"] .sp-ch-logo { background: #fff; }
.sp-ch-img { width: 100%; height: 100%; object-fit: contain; }
.sp-ch-text { display: flex; flex-direction: column; min-width: 0; }
.sp-ch-name { font: 600 13px/15px var(--font); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.sp-ch-name.one { -webkit-line-clamp: 1; }
.sp-ch-country { font: 400 11px/14px var(--font); color: var(--text-2); }
.sp-more, .sp-bell { display: inline-flex; align-items: center; justify-content: center; height: 50px; border-radius: 11px; background: var(--surface-high); font: 600 15px/20px var(--font); color: var(--text); }
.sp-bell { color: var(--text-2); }
.sp-bell.set { background: var(--accent-soft); color: var(--accent); }