/* The team page (views/pages/teamDetail.jte); shared table rules in dense.css. */

.team-head { display: flex; align-items: center; gap: 12px; }
.team-head .team-logo { width: 54px; height: 40px; object-fit: contain; flex: none; }
.team-head .bars { margin-left: 2px; }

/* Column widths for the compact tables (one class per kind of column) */
.team-page .dense-mini col.c-n { width: 46px; }
.team-page .dense-mini col.c-po { width: 60px; }
.team-page .dense-mini col.c-dt { width: 84px; }
.team-page .dense-mini col.c-op { width: 92px; }
.team-page .dense-mini col.c-sc { width: 64px; }
.team-page .dense-mini col.c-rs { width: 34px; }
.team-page .dense-mini col.c-dl { width: 64px; }
.team-page .dense-mini col.c-rec { width: 70px; }
.team-page .dense-mini col.c-no { width: 30px; }
.team-page .dense-mini col.c-pos { width: 34px; }
.team-page .dense-mini col.c-toi { width: 52px; }
.team-page .odds { max-width: 760px; }

/* The odds row with its note beside it, where there's room for both */
@media (min-width: 1180px) {
    .odds-row { display: flex; align-items: flex-start; gap: 24px; }
    .odds-row .odds-table { flex: 0 0 760px; }
    .odds-row .dense-note { order: 2; flex: 1 1 0; min-width: 0; margin: 0; padding-top: 4px; }
}

/* The playoff race is the standings page's table for this team's conference (standings.css), its note under it */
.team-page .race-note { margin-top: 4px; }

.team-page .kv th { font-weight: 400; color: var(--fg); }
.team-page .dense-mini.kv col.c-n { width: 96px; }
.team-page .kv tr.sect th.rk { text-align: right; }
.team-page .impacts tr.in td:first-child { font-weight: 700; }
.team-page .impacts tr.net td { color: var(--muted); border-top: 1px solid var(--rule-strong); }

/* Final points: this team's distribution (heat bars) over the cutline's (red, behind), with the cutline's
   middle half shaded. Bar heights are % of the tallest bar (app.sim.ExplainabilityService). */
.hist { margin-top: 4px; }
.hist-bars { position: relative; display: flex; gap: 1px; height: 160px; margin-top: 16px;
    border-bottom: 1px solid var(--fg); }
.hb { position: relative; flex: 1; min-width: 0; cursor: help; }
.hb i { position: absolute; left: 0; right: 0; bottom: 0; display: block; }
.hb i.tb { background: color-mix(in srgb, var(--heat) 75%, transparent); z-index: 2; }
.hb i.cl { background: color-mix(in srgb, var(--neg) 35%, transparent); z-index: 1; }
.hb:hover i.tb { background: var(--heat); }
.hist-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--neg) 7%, transparent);
    border-left: 1px dashed var(--neg); border-right: 1px dashed var(--neg); pointer-events: none; }
/* Axis labels every 10 points, each centred under its bar with a tick above it */
.hist-axis { position: relative; height: 18px; font-size: 11px; color: var(--muted); }
.hist-axis span { position: absolute; top: 0; padding-top: 4px; transform: translateX(-50%); }
.hist-axis span::before { content: ''; position: absolute; top: 0; left: 50%; height: 3px; border-left: 1px solid var(--fg); }
/* The team's median: a line through the bars, labelled above them */
.hist-med { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--fg); z-index: 3; pointer-events: none; }
.hist-med span { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); padding-bottom: 1px;
    font-size: 11px; white-space: nowrap; color: var(--fg); }
.hist-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); margin-top: 2px; }
.hist-key i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }
.hist-key i.tb { background: color-mix(in srgb, var(--heat) 75%, transparent); }
.hist-key i.cl { background: color-mix(in srgb, var(--neg) 35%, transparent); }
.hist-key i.band { background: color-mix(in srgb, var(--neg) 7%, transparent); border: 1px dashed var(--neg); }
.hist-key i.med { width: 0; border-left: 1px solid var(--fg); }

@media (max-width: 640px) {
    .team-head .team-logo { width: 40px; height: 30px; }
    .hist-bars { height: 110px; }
}