/* ==========================================================================
   Team + player page Home and News (design_handoff_topic_pages). Shared by
   team_page.html and player_page.html: the schedule / season strip, Season
   at a glance, the Latest news row and the News tab frame (whose widgets
   are Home's own, styled by pages/explore-front.css). Values are the
   prototypes' inline styles; ink alphas go through --tl-ink-rgb so dark
   mode follows.
   ========================================================================== */
.tp-home { --tp-ease: cubic-bezier(0.2, 0.7, 0.2, 1); display: flex; flex-direction: column; gap: 14px; }
.tp-home [hidden] { display: none !important; }
/* Global img[loading=lazy] paints a dark placeholder behind crests and faces. */
img.tp-cell-logo[loading], img.tp-x-logo[loading], .tp-marker > img[loading] { background-color: transparent; }
.tp-split { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 14px; align-items: stretch; }
.tp-split > .tl-stack > .is-fill { flex: 1; }

/* Card-head extras: record pills, links styled as card links */
.tp-head-link { margin: 0 0 0 6px; padding: 0; border: 0; background: none; cursor: pointer; font: 12.5px var(--tl-font); color: var(--tl-ink-60); white-space: nowrap; }
.tp-head-link:hover { color: var(--tl-ink); }
.tp-recs { display: flex; gap: 6px; }
.tp-recs > span {
  height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px;
  background: rgba(var(--tl-ink-rgb), 0.045); font-family: var(--tl-mono); font-size: 10.5px; letter-spacing: 0.4px;
  color: rgba(var(--tl-ink-rgb), 0.5); white-space: nowrap;
}
.tp-recs b { font-weight: 600; color: var(--tl-ink); }

/* ---------- Schedule / season strip ---------- */
.tp-strip-wrap { overflow-x: auto; border-top: 1px solid var(--tl-line-06); scrollbar-width: thin; }
.tp-strip { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(64px, 1fr)); }
.tp-cell {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 4px 13px; color: var(--tl-ink); transition: background 150ms;
}
.tp-cell + .tp-cell { border-left: 1px solid var(--tl-line-06); }
.tp-cell:hover { background: var(--tl-control); color: var(--tl-ink); }
.tp-cell.is-next { background: var(--tl-control); }
.tp-cell.is-next::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--tl-ink); }
.tp-cell-wk { font-family: var(--tl-mono); font-size: 9.5px; letter-spacing: 0.5px; color: rgba(var(--tl-ink-rgb), 0.45); white-space: nowrap; }
.tp-cell.is-next .tp-cell-wk { font-weight: 700; color: var(--tl-ink); }
.tp-cell-logo { width: 28px; height: 28px; flex: none; object-fit: contain; }
span.tp-cell-logo { display: inline-block; }
.tp-cell.is-future:not(.is-next) .tp-cell-logo { opacity: 0.85; }
.tp-cell-bye { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px dashed rgba(var(--tl-ink-rgb), 0.2); }
.tp-cell-opp { display: flex; align-items: baseline; gap: 3px; font-family: var(--tl-mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tp-cell-opp small { font-size: 9.5px; font-weight: 400; color: rgba(var(--tl-ink-rgb), 0.42); }
.tp-cell-res { display: flex; align-items: center; gap: 4px; font-family: var(--tl-mono); font-size: 10.5px; white-space: nowrap; }
.tp-wl { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 9.5px; font-weight: 700; background: var(--tl-fill-07); color: var(--tl-ink-60); }
.tp-wl.is-w { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.tp-wl.is-l { background: rgba(220, 38, 38, 0.1); color: #c42b2b; }
.tp-cell-date { font-family: var(--tl-mono); font-size: 10px; color: rgba(var(--tl-ink-rgb), 0.5); white-space: nowrap; }
.tp-cell.is-live .tp-cell-date { display: inline-flex; align-items: center; gap: 4px; color: var(--tl-ink); }
/* Player season strip: the line in place of W/L + score */
.tp-strip.is-player .tp-cell-opp { font-size: 11px; font-weight: 500; color: rgba(var(--tl-ink-rgb), 0.6); }
.tp-cell-stat { font-family: var(--tl-mono); font-size: 13px; font-weight: 650; white-space: nowrap; }
.tp-cell-sub { margin-top: -4px; font-family: var(--tl-mono); font-size: 9.5px; color: rgba(var(--tl-ink-rgb), 0.5); white-space: nowrap; }
.tp-strip > .tl-empty { grid-column: 1 / -1; }

/* ---------- Season at a glance ---------- */
.tp-glance { display: flex; flex-direction: column; }
.tp-glance .tl-seg > button { flex: none; margin: 0; }
.tp-glance-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); border-top: 1px solid var(--tl-line-06); }
.tp-chart { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 14px 18px; }
.tp-chart-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tp-chart-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tp-chart-head .spacer { flex: 1; }
.tp-legend { display: flex; align-items: center; gap: 5px; font-family: var(--tl-mono); font-size: 10px; letter-spacing: 0.4px; color: rgba(var(--tl-ink-rgb), 0.55); white-space: nowrap; }
.tp-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--tl-ink); }
.tp-legend i.is-b { background: rgba(var(--tl-ink-rgb), 0.18); }
.tp-legend i.is-rush { background: rgba(var(--tl-ink-rgb), 0.3); }
.tp-plot { position: relative; height: 156px; margin: 0 52px 0 26px; border-bottom: 1px solid rgba(var(--tl-ink-rgb), 0.14); }
.tp-gridline { position: absolute; left: 0; right: 0; height: 1px; background: rgba(var(--tl-ink-rgb), 0.05); }
.tp-tick { position: absolute; left: -26px; width: 20px; text-align: right; transform: translateY(50%); font-family: var(--tl-mono); font-size: 9.5px; color: rgba(var(--tl-ink-rgb), 0.4); }
.tp-avg { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(var(--tl-ink-rgb), 0.45); transition: bottom 500ms var(--tp-ease); }
/* In the right gutter, so it never overlaps a bar. */
.tp-avg > span { position: absolute; left: 100%; top: 0; margin-left: 6px; transform: translateY(-50%); white-space: nowrap; font-family: var(--tl-mono); font-size: 9.5px; letter-spacing: 0.4px; color: rgba(var(--tl-ink-rgb), 0.6); }
.tp-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); align-items: end; }
.tp-game { height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.tp-bar { width: 22px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tp-bar.is-wide { width: 30px; }
.tp-bar > b { font-family: var(--tl-mono); font-size: 10px; font-weight: 600; }
.tp-bar.is-b > b { font-weight: 400; color: rgba(var(--tl-ink-rgb), 0.5); }
.tp-bar > i, .tp-stack > i { display: block; width: 100%; transition: height 500ms var(--tp-ease); }
.tp-bar > i { border-radius: 3px 3px 0 0; background: var(--tl-ink); }
.tp-bar.is-b > i { background: rgba(var(--tl-ink-rgb), 0.18); }
.tp-stack { width: 100%; display: flex; flex-direction: column; border-radius: 3px 3px 0 0; overflow: hidden; }
.tp-stack > i:first-child { background: var(--tl-ink); }
.tp-stack > i:last-child { background: rgba(var(--tl-ink-rgb), 0.3); }
.tp-xlabels { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 8px 52px 0 26px; }
.tp-x { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.tp-x-opp { display: flex; align-items: center; gap: 4px; font-family: var(--tl-mono); font-size: 10px; color: rgba(var(--tl-ink-rgb), 0.5); white-space: nowrap; }
.tp-x-opp img, .tp-x-opp .tp-x-logo { width: 14px; height: 14px; object-fit: contain; }
.tp-x-res { font-family: var(--tl-mono); font-size: 9.5px; font-weight: 600; white-space: nowrap; color: var(--tl-ink-60); }
.tp-x-res.is-w { color: #15803d; }
.tp-x-res.is-l { color: #c42b2b; }
.tp-ranks { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--tl-line-06); }
.tp-rank { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 11px 18px; }
.tp-rank + .tp-rank { border-top: 1px solid var(--tl-line-06); }
.tp-rank-line { display: flex; align-items: baseline; gap: 10px; }
.tp-rank-k { flex: 1; min-width: 0; font-size: 12.5px; color: rgba(var(--tl-ink-rgb), 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-rank-v { font-size: 19px; font-weight: 400; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-rank-n { width: 52px; text-align: right; font-family: var(--tl-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.tp-track { position: relative; height: 14px; }
.tp-track::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(var(--tl-ink-rgb), 0.06), rgba(var(--tl-ink-rgb), 0.16)); }
.tp-track::after { content: ''; position: absolute; left: 50%; top: 2px; width: 1px; height: 10px; background: rgba(var(--tl-ink-rgb), 0.28); }
.tp-track-fill { position: absolute; left: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--tl-ink); transition: width 500ms var(--tp-ease); }
.tp-marker {
  position: absolute; z-index: 1; top: 7px; width: 22px; height: 22px; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;
  background: var(--tl-control); box-shadow: 0 0 0 1px rgba(var(--tl-ink-rgb), 0.12), 0 2px 6px -2px rgba(var(--tl-ink-rgb), 0.3);
  transition: left 500ms var(--tp-ease);
}
.tp-marker > img { width: 15px; height: 15px; object-fit: contain; }
.tp-marker.is-face { width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--tl-control), 0 0 0 3px rgba(var(--tl-ink-rgb), 0.12); }
.tp-marker.is-face > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tp-rank-foot { display: flex; justify-content: space-between; padding: 0 18px 10px; font-family: var(--tl-mono); font-size: 9.5px; letter-spacing: 0.5px; color: rgba(var(--tl-ink-rgb), 0.38); }
.tp-glance-empty { flex: 1; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--tl-line-06); }

/* ---------- Latest news row (Home tab) ---------- */
.tp-sect-head { display: flex; align-items: center; gap: 10px; padding: 4px 2px 0; }
.tp-sect-head h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.3px; white-space: nowrap; }
.tp-sect-head .spacer { flex: 1; }
.tp-news-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tp-ncard { display: flex; flex-direction: column; color: var(--tl-ink); }
.tp-ncard:hover { color: var(--tl-ink); }
.tp-ncard-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tl-logo-chip); }
.tp-ncard-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tp-ncard-play { position: absolute; left: 8px; bottom: 8px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 5px; background: rgba(255, 255, 255, 0.92); color: #101418; font-family: var(--tl-mono); font-size: 10px; font-weight: 600; }
.tp-ncard-body { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; }
.tp-ncard-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(var(--tl-ink-rgb), 0.5); white-space: nowrap; }
.tp-ncard-meta .src { overflow: hidden; text-overflow: ellipsis; }
.tp-ncard-meta .spacer { flex: 1; }
.tp-ncard-meta .t { font-family: var(--tl-mono); font-size: 10.5px; color: rgba(var(--tl-ink-rgb), 0.4); }
.tp-ncard-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.32; text-wrap: pretty; }
.tp-news-locked-cta { display: flex; justify-content: center; padding: 0 18px 22px; margin-top: -8px; }

/* ---------- News tab: Home's widgets on a 2fr / 1fr frame ---------- */
.tp-news { display: flex; flex-direction: column; gap: 14px; }
.tp-news-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.tp-news-top > .hm-car { grid-column: span 8; }
.tp-news-top > .hm-latest { grid-column: span 4; }
.tp-news .hm-hl > .tl-section-title, .tp-news .hm-more > .tl-section-title { padding-top: 4px; }

@media (max-width: 1100px) {
  .tp-split { grid-template-columns: minmax(0, 1fr); }
  .tp-news-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-news-top > .hm-car, .tp-news-top > .hm-latest { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .tp-glance-body { grid-template-columns: minmax(0, 1fr); }
  .tp-ranks { border-left: 0; border-top: 1px solid var(--tl-line-06); }
  .tp-recs { display: none; }
  .tp-news-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tp-bar > i, .tp-stack > i, .tp-avg, .tp-track-fill, .tp-marker { transition: none; }
}