/* team_token.css — the shared team-identity token (modes A–E).
 *
 * Extracted from live.css so the SAME pill can render on any page (the live
 * dashboard, the /lineups Exposure tab, future dashboard widget panels), not
 * just /live. Rides entirely on global --ls-* tokens (static/style.css), so it
 * needs no page-specific context — only a ttm-<X> mode class on an ancestor
 * and the identImg/identLabel/teamColor/teamText helpers on the controller
 * (live.js provides them on /live; viewLineups provides them on /lineups).
 *
 * Markup: {% from "partials/team_token.html" import team_token %}{{ team_token("p") }}
 * Mode B (ttm-B) = the neutral "logo + abbrev" pill.
 *
 * Loaded globally in base.html. Cachebust: bump ?v= there on any change.
 */

.tk {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px;
  height: 20px; width: 3.75rem; border-radius: 6px; padding: 0 7px; box-sizing: border-box; overflow: hidden;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: var(--ls-fs-10); letter-spacing: 0.03em;
  line-height: 1; white-space: nowrap; flex-shrink: 0;
}
/* Logo sits on a light "coin" — team logos are drawn for a white ground, so
   without this the dark-navy ones (NYY/SEA/TB…) vanish on the dark pill. The
   near-white backing gives every logo contrast in both themes. */
.tk-logo {
  width: 16px; height: 16px; box-sizing: border-box; flex-shrink: 0;
  object-fit: contain; padding: 1.5px;
  background: rgb(255 255 255 / 0.92);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.10);
}
.tk-abbr { white-space: nowrap; }
.tk--nologo .tk-logo { display: none; }
/* Individual sports show a player photo, not a team logo — round it. */
.tt-indiv .tk-logo { border-radius: 50%; }

.ttm-A .tk { background: var(--tk-c, rgb(var(--ls-ink-rgb) / 0.06)); color: var(--tk-tc, var(--ls-ink)); }
.ttm-A .tk-logo { display: none; }

.ttm-B .tk { background: rgb(var(--ls-ink-rgb) / 0.05); border: 1px solid rgb(var(--ls-ink-rgb) / 0.08); color: var(--ls-ink); }
.dark .ttm-B .tk { background: rgb(var(--ls-surface-rgb) / 0.06); border-color: rgb(var(--ls-surface-rgb) / 0.08); }

.ttm-C .tk { background: none; padding: 0; height: auto; width: auto; }
.ttm-C .tk-abbr { display: none; }
.ttm-C .tk--nologo .tk-abbr { display: inline; }

.ttm-D .tk { position: relative; overflow: hidden; padding-left: 9px;
  background: rgb(var(--ls-ink-rgb) / 0.04); border: 1px solid rgb(var(--ls-ink-rgb) / 0.08); color: var(--ls-ink); }
.dark .ttm-D .tk { background: rgb(var(--ls-surface-rgb) / 0.05); border-color: rgb(var(--ls-surface-rgb) / 0.08); }
.ttm-D .tk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tk-c, rgb(var(--ls-ink-soft-rgb) / 0.6)); }

.ttm-E .tk { background: var(--tk-c, rgb(var(--ls-ink-rgb) / 0.06)); color: var(--tk-tc, #fff); }

/* Tight space (phone): collapse mode B to a logo-only pill — drop the abbrev
   and shrink to the icon. The abbrev returns when a team has no logo, so the
   pill is never blank. (Xav: the plan-B tight pill when there's no room.) */
@media (max-width: 640px) {
  .ttm-B .tk { width: auto; padding: 0 5px; }
  .ttm-B .tk-abbr { display: none; }
  .ttm-B .tk--nologo .tk-abbr { display: inline; }
}