/* Coach and staff presentation, shared by the matchup page and the team page.
 *
 * Extracted from matchup.css when the team page gained a Coaches section. Kept as ONE
 * file loaded by both rather than copied, because these rules encode fixes that were
 * expensive to find - the avatar-span clipping, the 7px mobile overflow, and the
 * contrast lift on .staff-title - and a duplicate would silently drift away from them. */
.full-logo.mono,.full-photo.mono{background:#0c2140;color:#fff;font-family:var(--font-display)}
.coach-card,.full-side{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--bg);padding:17px}
.coach-top{display:flex;gap:14px;align-items:center}
.full-photo{--photo:66px;display:grid;place-items:center;width:var(--photo);height:var(--photo);border:1px solid var(--line);border-radius:50%;background:var(--surface-2);color:var(--ink-3);font-weight:800;flex:none;overflow:hidden}
.full-photo img{width:100%;height:100%;object-fit:cover}
.coach-top>div{min-width:0}
/* Scoped to the copy column, NOT any span in the card. The avatar is itself a <span>,
   so a bare `.coach-top span` matched it and forced display:block over its centering
   grid - the initials rendered in the top-left corner and were clipped by the circle,
   so every coach without a photo showed a solid empty disc. It also shrank them to 10px.
   --accent-ink is white, invisible on this near-white card, so use muted ink here. */
.coach-top>div>span{display:block;color:var(--ink-3);font-size:.63rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* Initials scale with the avatar rather than sitting at label size. */
.full-photo.mono{font-size:calc(var(--photo) * .34);letter-spacing:.02em}
.coach-top h3{margin:4px 0 2px;font-family:var(--font-display);font-size:1.2rem}
.coach-top strong,.coach-top p{display:block;margin:3px 0;color:var(--ink-3);font-size:.7rem}
.coach-card h4{margin:17px 0 7px;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em}
.coach-history>div{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:8px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:.68rem}
.coach-history span{color:var(--ink-3)}
.staff-gap{margin-top:16px;padding:12px;border:1px dashed var(--line);border-radius:8px}
.staff-gap strong{font-size:.7rem}
.staff-gap p{margin:5px 0 0;color:var(--ink-3);font-size:.67rem;line-height:1.45}
/* Full staff. A dozen to seventy people per team, so two dense columns on desktop
   and one on a phone, with the photo small enough that a missing one reads as a
   neutral initial rather than a hole. */
/* auto-fit with a fixed minmax floor overflowed at 375px: two 190px columns cannot
   fit inside the card's content box, and the grid refused to drop to one. Start at a
   single column and only opt into two once there is measurably room. */
.staff-grid{display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px}
@media (min-width:560px){
  .staff-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
}
/* min-width:0 all the way down. The coach cards sit two-up even at 375px, so each
   staff row gets ~100px; without this the nowrap name sets a 144px min-content floor
   and pushes the whole document 7px wider than the viewport. */
.staff-link{text-decoration:none;color:inherit;border-radius:8px;min-width:0}
.staff-link:hover .staff-row{border-color:var(--accent)}
.staff-row{display:flex;align-items:center;gap:8px;padding:6px;min-width:0;
  border:1px solid transparent;border-radius:8px;background:var(--surface-2)}
.staff-row>:first-child{flex:0 0 auto}
.staff-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.staff-name{font-weight:700;font-size:.72rem;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --ink-2, not --ink-3: at .63rem this is body text and needs 4.5:1, which
   --ink-3 missed in the light and dark themes (3.44 and 3.89 measured). */
.staff-title{font-size:.63rem;color:var(--ink-2);line-height:1.3;
  overflow-wrap:anywhere}
.official-roster-link{display:inline-block;margin:-3px 0 11px;color:var(--ink);
  font-size:.65rem;font-weight:700;text-underline-offset:3px}
@media (max-width:720px){
  .coach-card,.full-side{padding:10px}
  .coach-top{display:grid;justify-items:center;text-align:center;gap:8px}
  .coach-top h3{font-size:.92rem}
  .coach-history>div{grid-template-columns:46px minmax(0,1fr);font-size:.61rem}
  .coach-history>div span:last-child{grid-column:2}
}