/* team-mark.css
   The school logo tile: a rounded rectangle of the school's own colour.

   Part of the Teleport stylesheet, split by concern. index.html links these
   in source order; keep that order, the cascade depends on it. */

.tmark {
  --tm-size: 44px;
  --tm-radius: 13px;
  --tm-pad: 7px;
  --tm-bg: var(--surface-2);

  width: var(--tm-size); height: var(--tm-size);
  border-radius: var(--tm-radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--tm-pad); position: relative; overflow: hidden;
  background: var(--tm-bg);
  /* A hairline inside the tile keeps a very light school colour (Carolina blue,
     WVU gold) from dissolving into a white card, and a pure-black one from
     looking like a hole. Inside rather than a border, so the box stays exactly
     --tm-size and the grid maths above it never shifts. */
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 6px rgba(15, 15, 30, 0.13);
  transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s;
}
:root[data-theme="dark"] .tmark {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.42);
}

/* The glass sheen every other badge in the suite carries, so a logo tile sits in
   the same family as .brand-badge and the login mark. */
.tmark::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(175deg, rgba(255, 255, 255, 0.20), transparent 52%);
  pointer-events: none;
}

.tmark-img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  position: relative; z-index: 1;
  /* Separates a light mark from a mid-tone tile without tinting the colour. */
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.30));
}
/* The four schools whose primary colour is pale enough that a light logo would
   otherwise wash out. The tile keeps the exact school colour — only the mark's
   shadow deepens. See LIGHT_THRESHOLD in tools/build_rosters.py. */
.tmark.is-light .tmark-img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}

/* Fallback shield: present in the DOM but hidden while the logo is fine, so a
   broken image swaps instantly with no second request and no layout shift. */
.tmark-fallback { display: none; position: relative; z-index: 1; color: rgba(255, 255, 255, 0.92); }
.tmark-fallback svg { width: 60%; height: 60%; }
.tmark.is-broken .tmark-img { display: none; }
.tmark.is-broken .tmark-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* No metadata for this school at all — the generic shield on a neutral tile,
   which is every FCS team today. */
.tmark--plain,
.tmark--plainbg { background: var(--surface-2); color: var(--label-3); box-shadow: inset 0 0 0 1px var(--border-2); }
.tmark--plain::after,
.tmark--plainbg::after { display: none; }
.tmark--plain svg,
.tmark--plainbg svg { width: 55%; height: 55%; }
/* A conference with no metadata keeps the accent tint it always had, so the
   Power 4 gaining logos doesn't make the other 21 look broken. */
.tmark--plainbg { background: var(--accent-light); color: var(--accent-deep); }
:root[data-theme="dark"] .tmark--plainbg { color: var(--accent); }

/* ── Conference marks ───────────────────────────────────────────────────
   Conference logos come in three shapes and each needs different handling to
   sit on a coloured tile. The mode is decided at build time — see the `render`
   note in js/team-brand.js — and applied here.

   Wordmarks are wide and short, so a conference tile gives its logo the full
   width and lets the height fall where it may, rather than the square-ish fit a
   school's roundel wants. */
.tmark--conf { --tm-pad: 6px; }
.tmark--conf .tmark-img { object-fit: contain; }

/* plain — a light mark on a transparent background. Nothing to do. */

/* white — a dark or two-tone mark. brightness(0) crushes every opaque pixel to
   black and invert(1) flips it to white, leaving the alpha channel untouched:
   the result is a clean white silhouette. Without this the Big 12's black
   wordmark and the SEC's navy fills sink into their own dark tiles. */
.tmark--conf.is-white .tmark-img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
}

/* screen — the image has no alpha at all. `screen` maps black to transparent and
   leaves white alone, so a logo delivered as a white mark on a solid black
   thumbnail drops its background and floats on the tile instead of covering it.
   The Big Ten's logo is supplied that way. */
/* isolate confines the blend to this tile. Without it the img blends against
   whatever is painted beneath the whole card, which happens to look the same
   here only because the tile background is opaque — not something to rely on. */
.tmark--conf.is-screen { isolation: isolate; }
.tmark--conf.is-screen .tmark-img {
  mix-blend-mode: screen;
  /* screen against a mid-tone tile lifts the blacks slightly; a touch of
     contrast keeps the mark crisp rather than milky. */
  filter: contrast(1.15);
}
/* mix-blend-mode blends against the nearest stacking context, so the sheen
   overlay has to sit out of the way or it becomes what the logo blends with. */
.tmark--conf.is-screen::after { display: none; }

/* ── Sizes ──────────────────────────────────────────────────────────── */
.tmark--sm { --tm-size: 30px; --tm-radius: 9px;  --tm-pad: 4px; }
.tmark--md { --tm-size: 44px; --tm-radius: 13px; --tm-pad: 7px; }
.tmark--lg { --tm-size: 58px; --tm-radius: 17px; --tm-pad: 9px; }

/* ── The player face slot ───────────────────────────────────────────────
   One fixed box per player, whatever is in it: his headshot, his school's mark,
   or his initials. ESPN has photos for most players and none for the rest, and
   the slot used to disappear when the photo did — which shifted the jersey
   number, the name and every column after them, so half a depth chart lined up
   and half didn't. Sizing all three states off the same --face-size is what
   makes the alignment hold.

   Lives here rather than in players.css because the school mark is the fallback,
   and .tmark has to be defined before it can be resized. index.html links this
   file ahead of players.css, roster.css and player-detail.css, all three of which
   only set --face-size. */
.face {
  --face-size: 36px;
  --face-radius: 50%;
  position: relative; display: block; flex-shrink: 0;
  width: var(--face-size); height: var(--face-size);
}
.face-img {
  width: 100%; height: 100%; display: block; box-sizing: border-box;
  border-radius: var(--face-radius);
  /* Headshots are head-and-shoulders on a wider frame, so crop to the top: the
     face stays in the circle instead of being centred on the chest. */
  object-fit: cover; object-position: top center;
  background: var(--face-bg, var(--surface-2));
  /* The ring is the school's colour when playerFace() has one to give it (see
     that function); border rather than box-shadow so it's cut from the image's
     own box instead of growing past --face-size and crowding tight rows. A
     school with no metadata keeps the plain neutral edge this always had. */
  border: 2px solid var(--face-bg, transparent);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
/* The mark fills the slot exactly — a player with no photo takes the same room
   as one with a photo. --tm-size is a percentage of a box with explicit
   dimensions, so it resolves whatever the context sizes the slot to.

   Matched on .face-mark, not on .tmark: the hero also tucks a small school badge
   into the corner of a headshot, and that one must keep its own size. */
.face .face-mark {
  --tm-size: 100%;
  --tm-radius: var(--face-radius);
}
.face-init {
  position: absolute; inset: 0; border-radius: var(--face-radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--accent-deep);
  font-size: calc(var(--face-size) * 0.34); font-weight: 700; letter-spacing: -0.02em;
}
:root[data-theme="dark"] .face-init { color: var(--accent); }

/* The evaluated checkmark — tucked into the face's own corner rather than a
   separate element in the row, so it costs no layout and lines up on every
   size the face renders at. Scales off --face-size the same way .face-init's
   type does, so it reads at the same relative weight on a 26px board card and
   a 36px roster row. */
.face-check {
  position: absolute; right: -2px; bottom: -2px; z-index: 2;
  width: calc(var(--face-size) * 0.4); height: calc(var(--face-size) * 0.4);
  min-width: 13px; min-height: 13px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
  box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(0, 0, 0, 0.28);
}
.face-check svg { width: 62%; height: 62%; }

/* The three sizes in use. Padding scales with the tile so a 26px mark isn't
   swallowed by the 9px inset a 62px one wants. */
.face--xs { --face-size: 26px; }
.face--xs .face-mark { --tm-pad: 3px; }
.face--sm { --face-size: 36px; }
.face--sm .face-mark { --tm-pad: 5px; }
.face--lg { --face-size: 62px; --face-radius: 18px; }
.face--lg .face-mark { --tm-pad: 10px; }

/* ── In the grids ───────────────────────────────────────────────────── */
.conf-card .tmark { flex-shrink: 0; }
.conf-card:hover .tmark:not(.tmark--plainbg) { transform: scale(1.04); }

/* The tile is the card's whole visual identity, so it leads the hover. */
.team-card .tmark { margin-bottom: 1px; }
.team-card:hover .tmark { transform: translateY(-1px) scale(1.04); }
.team-card:hover .tmark:not(.tmark--plain) {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 6px 16px rgba(15, 15, 30, 0.20);
}
:root[data-theme="dark"] .team-card:hover .tmark:not(.tmark--plain) {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 18px rgba(0, 0, 0, 0.55);
}