/**
 * Trialoop - component additions of batch pubA (T1 public lists, T2 live and standings).
 * Same conventions as components.css (every colour is a theme token with the Grid value as fallback);
 * meant to be merged into components.css. Until then the pages that use it link it themselves.
 */

/* ---------- page frame fix: body is a flex column and .tl-page has auto margins, so without an explicit
   width the page grew to the min-content of its sideways-scrolling strips (horizontal page scroll on phones) ---------- */
.tl-page { width: 100%; min-width: 0; }

/* ---------- poster titles: ui.css forces every h1-h6 to --tl-text with !important, which turns the Vitesse
   display titles dark (and dark on the blue band); give the redesign headings their display colour back ---------- */
h1.tl-display, h2.tl-display, h2.tl-h2 { color: var(--tl-display, var(--white, #fff)) !important; }
[data-theme="vitesse"] .tl-band h1.tl-display, [data-theme="vitesse"] .tl-band h2.tl-display { color: var(--tl-on-accent, #FFFFFF) !important; }

/* ---------- chips that scroll sideways on phones (T1 filters) ---------- */
.tl-chips--scroll { scrollbar-width: none; }
.tl-chips--scroll::-webkit-scrollbar { display: none; }
.tl-chips--scroll > * { flex: 0 0 auto; white-space: nowrap; }
.tl-chip .tl-count { background: rgba(var(--tl-ink-rgb, 255, 255, 255), .12); color: inherit; }
.tl-chip.is-on .tl-count { background: rgba(var(--tl-bg-rgb, 26, 10, 26), .16); color: inherit; }
.tl-chip .tl-dot { width: 7px; height: 7px; }
.tl-chip--sm { min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.tl-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(var(--tl-ink-rgb, 255, 255, 255), .2); }

/* ---------- pill select (same look as .tl-search), for GET filters ---------- */
.tl-select { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 46px; padding-left: 14px; border-radius: var(--tl-r-chip, 9999px); background: var(--tl-field, rgba(255, 255, 255, 0.05)); border: 1px solid var(--tl-input-border, rgba(255, 255, 255, 0.2)); color: var(--tl-faint, rgba(255, 255, 255, 0.5)); box-sizing: border-box; min-width: 0; }
.tl-select select { -webkit-appearance: none; appearance: none; width: auto !important; max-width: 240px; min-height: 44px; padding: 0 36px 0 6px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--tl-text, #fff); font: inherit; font-size: 14px; cursor: pointer; }
.tl-select::after { content: ''; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.tl-select:focus-within, .tl-search:focus-within { border-color: var(--tl-accent, #ff1e6a); box-shadow: 0 0 0 3px rgba(var(--tl-accent-rgb, 255, 30, 106), .18); }
.tl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- "Mes favoris" bar (includes/favorites.php markup) restyled with tokens ---------- */
.tl-favs .fav-bar { background: var(--tl-surface, rgba(255, 255, 255, 0.04)); border: 1px solid var(--tl-line, rgba(255, 255, 255, 0.1)); border-radius: var(--tl-r, 1rem); padding: 8px 10px 8px 16px; margin-bottom: 18px; color: var(--tl-text, #fff); }
.tl-favs .fav-bar-label { font-size: 14px; }
.tl-favs .fav-chip { background: var(--tl-surface-2, rgba(255, 255, 255, 0.08)); color: var(--tl-text, #fff); border: 1px solid var(--tl-line, rgba(255, 255, 255, 0.12)); font-weight: 600; }
.tl-favs .fav-chip:hover { border-color: var(--tl-line-strong, rgba(255, 255, 255, 0.3)); color: var(--tl-text, #fff); }
.tl-favs .fav-chip-on, .tl-favs .fav-chip-on:hover { background: var(--tl-accent-fill, #ff1e6a); border-color: var(--tl-accent-fill, #ff1e6a); color: var(--tl-on-accent, #fff); }

/* ---------- live strip: swipeable on phones, sweeping activity bar ---------- */
.tl-livestrip__head .tl-eyebrow { margin: 0; }
.tl-livecard { transition: transform .2s ease, box-shadow .2s ease; min-width: 0; }
.tl-livecard:hover { box-shadow: 0 10px 26px rgba(var(--tl-accent-rgb, 255, 30, 106), .22); }
.tl-livecard__body { flex: 1; min-width: 0; }
.tl-livecard__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-livecard__meta { font-size: 12px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-livecard__go { font-size: 18px; opacity: .6; transition: transform .2s ease, opacity .2s ease; }
.tl-livecard:hover .tl-livecard__go { transform: translateX(3px); opacity: 1; }
.tl-livecard__bar--live span { width: 38%; animation: tl-sweep 2.6s ease-in-out infinite; }
.tl-livecard:nth-child(2n) .tl-livecard__bar--live span { animation-delay: -.9s; }
.tl-livecard:nth-child(3n) .tl-livecard__bar--live span { animation-delay: -1.7s; }
@keyframes tl-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(265%); } }
[data-theme="vitesse"] .tl-livecard .tl-dot { background: var(--tl-on-accent, #FFFFFF); }
.tl-livestrip__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }

/* ---------- cards without picture (race, championship): accent wash + slanted speed lines ---------- */
.tl-card--link { cursor: pointer; }
.tl-card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.5)); border-color: var(--tl-line-strong, rgba(255, 255, 255, 0.25)); }
.tl-card__media--speed { height: 96px; overflow: hidden; background: linear-gradient(120deg, rgba(var(--tl-accent-rgb, 255, 30, 106), .26), var(--tl-surface-2, rgba(255, 255, 255, 0.06)) 72%); }
.tl-card__media--speed::after { content: ''; position: absolute; top: -30px; right: -50px; width: 70%; height: 170%; background: repeating-linear-gradient(-76deg, rgba(var(--tl-ink-rgb, 255, 255, 255), .07) 0 14px, transparent 14px 40px); transition: transform .5s ease; pointer-events: none; }
.tl-card--link:hover .tl-card__media--speed::after, a.tl-card:hover .tl-card__media--speed::after { transform: translateX(-22px); }
.tl-card__media--speed::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--status-color, var(--tl-accent, #ff1e6a)); opacity: .85; }
.tl-card__media .tl-card__corner { position: absolute; left: 78px; top: 18px; }
.tl-card__media .tl-card__big { position: absolute; left: 16px; bottom: 12px; font: italic 800 34px/1 var(--tl-font-display, inherit); color: var(--tl-display, var(--white, #fff)); text-transform: uppercase; }
.tl-card__facts { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--tl-muted, rgba(255, 255, 255, 0.7)); }
.tl-card__facts span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tl-card__facts i { width: 14px; text-align: center; opacity: .65; font-size: 12px; }
.tl-card.is-cancelled { opacity: .6; }
.tl-card.is-cancelled .tl-card__title { text-decoration: line-through; }
.tl-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; }
.tl-status--live .tl-status__dot { animation: tl-blink 1.2s ease-in-out infinite; }
@keyframes tl-blink { 50% { opacity: .25; } }
.tl-daylinks { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-daylinks a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--tl-r-chip, 9999px); font-size: 12px; font-weight: 600; text-decoration: none; background: var(--tl-accent-soft, rgba(255, 30, 106, 0.12)); color: var(--tl-accent-ink, #ff4d8a); }
.tl-daylinks a.tl-daylinks__all { background: var(--tl-surface-2, rgba(255, 255, 255, 0.06)); color: var(--tl-muted, rgba(255, 255, 255, 0.7)); }
.tl-iconbtn { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tl-accent-fill, #ff1e6a); color: var(--tl-on-accent, #fff); text-decoration: none; flex-shrink: 0; transition: transform .15s ease, filter .15s ease; }
.tl-iconbtn:hover { color: var(--tl-on-accent, #fff); filter: brightness(1.08); transform: translateY(-1px); }

/* ---------- entrance: cards and rows rise one after the other ---------- */
.tl-stagger > * { animation: tl-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
.tl-stagger > :nth-child(2) { animation-delay: .04s; } .tl-stagger > :nth-child(3) { animation-delay: .08s; }
.tl-stagger > :nth-child(4) { animation-delay: .12s; } .tl-stagger > :nth-child(5) { animation-delay: .16s; }
.tl-stagger > :nth-child(6) { animation-delay: .2s; } .tl-stagger > :nth-child(7) { animation-delay: .24s; }
.tl-stagger > :nth-child(8) { animation-delay: .28s; } .tl-stagger > :nth-child(n+9) { animation-delay: .32s; }
@keyframes tl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- band header with key figures (T2) ---------- */
.tl-band__row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.tl-band__main { flex: 1 1 320px; min-width: 0; }
.tl-band__main .tl-display { font-size: clamp(34px, 5vw, 58px); overflow-wrap: anywhere; }
.tl-band__meta { font-size: 14px; color: var(--tl-muted, rgba(255, 255, 255, 0.7)); margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.tl-band__meta a { color: inherit; }
.tl-band__kpis { display: flex; flex-wrap: wrap; gap: 14px 0; }
.tl-band__kpi { padding: 0 20px; border-left: 1px solid var(--tl-line, rgba(255, 255, 255, 0.12)); min-width: 0; }
.tl-band__kpi b { display: block; font: italic 800 32px/1 var(--tl-font-display, inherit); color: var(--tl-text, #fff); white-space: nowrap; }
.tl-band__kpi span { font-size: 12px; color: var(--tl-muted, rgba(255, 255, 255, 0.7)); }
[data-theme="vitesse"] .tl-band .tl-band__meta, [data-theme="vitesse"] .tl-band .tl-band__kpi b,
[data-theme="vitesse"] .tl-band .tl-band__kpi span { color: var(--tl-on-accent, #FFFFFF); }
[data-theme="vitesse"] .tl-band .tl-band__kpi { border-left-color: rgba(var(--tl-shade-rgb, 255, 255, 255), .3); }
[data-theme="vitesse"] .tl-band .tl-btn--ghost { color: var(--tl-on-accent, #FFFFFF); border-color: rgba(var(--tl-shade-rgb, 255, 255, 255), .5); }

/* ---------- standings / start lists (T2 tables) ---------- */
.tl-table--standings td { padding: 10px 12px; }
.tl-tablewrap > .tl-table { margin: 0; }
.tl-tablewrap > .tl-table tbody tr:last-child td { border-bottom: 0; }
.tl-table--standings tbody tr { animation: tl-rowin .45s ease both; }
.tl-table--standings tbody tr:nth-child(2) { animation-delay: .03s; } .tl-table--standings tbody tr:nth-child(3) { animation-delay: .06s; }
.tl-table--standings tbody tr:nth-child(4) { animation-delay: .09s; } .tl-table--standings tbody tr:nth-child(n+5) { animation-delay: .12s; }
@keyframes tl-rowin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.tl-table .tl-pos { font-size: 22px; }
.tl-table tr.is-p1 .tl-pos { color: var(--tl-gold-ink, #FFD700); }
.tl-table tr.is-p2 .tl-pos { color: var(--tl-silver-ink, #C0C0C0); }
.tl-table tr.is-p3 .tl-pos { color: var(--tl-bronze-ink, #CD7F32); }
.tl-table tr.is-p1 td, .tl-table tr.is-p2 td, .tl-table tr.is-p3 td { font-weight: 600; }
.tl-table .tl-num { text-align: right; font: italic 800 20px/1 var(--tl-font-display, inherit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-table th.tl-num { font: inherit; font-size: 11px; }
.tl-bib { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 8px; box-sizing: border-box; background: var(--tl-surface-2, rgba(255, 255, 255, 0.08)); color: var(--tl-text, #fff); font: 700 14px/1 var(--tl-font-display, inherit); font-variant-numeric: tabular-nums; }
.tl-time { font: italic 800 20px/1 var(--tl-font-display, inherit); color: var(--tl-accent-ink, #ff4d8a); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- main column + aside (T2 standings with a feed) ---------- */
.tl-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.tl-split__aside { position: sticky; top: calc(var(--header-height, 80px) + 16px); }
.tl-feed__n { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font: italic 800 16px/1 var(--tl-font-display, inherit); background: var(--tl-surface-2, rgba(255, 255, 255, 0.08)); color: var(--tl-text, #fff); }
.tl-feed__n.is-done { background: var(--tl-ok-solid, #00ff88); color: var(--tl-on-ok, #0a0a0a); }
.tl-feed__n.is-now { background: var(--tl-accent-fill, #ff1e6a); color: var(--tl-on-accent, #fff); }
.tl-feed__item:last-child { border-bottom: 0; }
.tl-panel__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-accent-ink, #ff4d8a); margin: 0 0 6px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
    .tl-split { grid-template-columns: 1fr; }
    .tl-split__aside { position: static; }
}
@media (max-width: 640px) {
    .tl-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 16px; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; -webkit-overflow-scrolling: touch; }
    .tl-chips--scroll > * { scroll-snap-align: start; }
    .tl-livestrip--swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 10px; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .tl-livestrip--swipe::-webkit-scrollbar { display: none; }
    .tl-livestrip--swipe > .tl-livecard { flex: 0 0 84%; scroll-snap-align: start; }
    .tl-livestrip--swipe > .tl-livecard:only-child { flex-basis: 100%; }
    .tl-band__kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
    .tl-band__kpi { padding: 0 12px; }
    .tl-band__kpi:first-child { padding-left: 0; border-left: 0; }
    .tl-band__kpi b { font-size: 26px; }
    .tl-table .tl-pos { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .tl-stagger > *, .tl-table--standings tbody tr, .tl-livecard__bar--live span, .tl-status--live .tl-status__dot { animation: none; }
    .tl-livecard:hover, .tl-card--link:hover, .tl-iconbtn:hover { transform: none; }
    .tl-livecard:hover .tl-livecard__go, .tl-card--link:hover .tl-card__media--speed::after, a.tl-card:hover .tl-card__media--speed::after { transform: none; }
}