/* ---------- roster page ----------
   Fan-facing browsable grid (see features/roster-page.js). Distinct from
   the face-match cluster-labeling tool (features/facematch.css) -- the grid
   and person cards are read-only for every permission tier. The one
   exception is the Tag teams tab's team MANAGEMENT (list + editor, below):
   trusted+/admin only, gated per-control (#newTeamBtn/#teamEditor) rather
   than by hiding the tab, same as the labeling tool's own gating. */
.roster-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; padding: 26px 26px 6px; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; }
.roster-head-text { max-width: 560px; }
.roster-title { font-family: var(--title-font), "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: 42px; letter-spacing: -0.02em; margin: 0 0 6px; }
.roster-sub { color: var(--muted); font-size: 15px; margin: 0; }

/* Tabs + the icon toggles (sort, admin Championships) all live directly in
   this one row so they wrap TOGETHER as a single flex flow -- see the
   template comment on #rosterTabs for why this replaced a tabs-island +
   toggles-beside-it split (the toggles had nowhere to wrap into and dropped
   to their own orphaned line on a phone width). */
.roster-tabs-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.roster-tab {
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  text-transform: var(--btn-tt); letter-spacing: var(--btn-ls);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.roster-tab:hover { border-color: var(--coral); color: var(--text); }
.roster-tab.is-active { background: var(--coral); border-color: var(--coral); color: var(--ink); }
/* Per-tab count, e.g. "Frequent guests (142)" -- dimmer than the tab label so
   it reads as metadata, not a second word of the name. Inherits the active
   tab's ink color instead of its own muted tone so it stays legible on coral. */
.roster-tab-count { opacity: 0.7; font-weight: 500; }

/* Sort toggle: same pill shell as a tab (so it reads as part of the same
   control row) but icon-only and set apart by a left border rather than a
   gap, echoing the tab strip / action split used elsewhere in the topbar.
   Also reused for the admin-only Championships button (#rosterBeltsBtn),
   which sits to ITS left -- same shell, no separate style needed. */
.roster-sort-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin-left: 4px;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--border);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.roster-sort-toggle:hover { border-color: var(--coral); color: var(--text); }
.roster-sort-icon { width: 18px; height: 18px; }
.roster-sort-toggle .belt-svg { width: 18px; height: 18px; }

.roster-teams-section { max-width: 1400px; margin: 24px auto 0; padding: 0 26px 40px; }
.roster-teams-empty { color: var(--muted); font-size: 14px; }

/* ---------- team management (Tag teams tab) ----------
   MOVED from the old /people page's teams-manager section. #newTeamBtn is
   trusted-only (see the .trusted-only convention in admin.css); the list
   itself is read-only for everyone. */
.teams-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.teams-list { display: flex; flex-wrap: wrap; gap: 8px; }
.team-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 13px; cursor: pointer; font-family: inherit; color: var(--text); font-size: 13.5px; text-align: left; }
.team-chip:hover { border-color: var(--lavender); }
/* The team editor's fields now use the shared .profile-form grid (see
   facematch.css) -- same idiom as the person profile editor, just with
   Name/Nickname/Aliases/Status label text instead of the profile's fields.
   #teamCardEdit lives in modal-team.html, sharing that panel's .pf-scroll /
   .pf-group-label / .pf-actions-sticky shell with the profile editor rather
   than its own standalone box. */
#teamCardEdit .pf-actions-sticky .btn-del { margin-right: auto; }

/* ---------- roster page: tag-team CARDS ----------
   Scoped to #rosterTeamsList so the base .team-chip above (unused now that
   the compact admin list is gone, but kept as the shared shell other chips
   might still want) doesn't leak this card treatment elsewhere. Each team
   leads with its members' photos filling the card's full width -- the
   members are what identifies a team, and a row of names in 11px muted text
   wasn't carrying that. Same column steps as .roster-grid so the Tag teams
   tab lines up with the other three. */
/* align-items:start so a card is only as tall as its own content. Without it
   grid stretches every card to the tallest in the row, and since .tc-faces has
   a fixed aspect-ratio the extra height became dead space under the names. */
#rosterTeamsList { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px; align-items: start; }
@media (max-width: 1100px) { #rosterTeamsList { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { #rosterTeamsList { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { #rosterTeamsList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

#rosterTeamsList .team-chip {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  border-radius: var(--radius-lg); padding: 0; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
#rosterTeamsList .team-chip:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }

/* Member photos, splitting the card width evenly (column count set inline per
   team, so 2 members = halves and 3 = thirds).
   The HEIGHT is fixed rather than an aspect-ratio on the strip: aspect-ratio
   here sized the strip from its own width, so a one-member team (a single
   full-width cell) grew far taller than a two-member one and the row went
   ragged. A fixed height keeps every card's photo band identical no matter how
   many members split it. */
.tc-faces { display: grid; gap: 1px; background: var(--border); height: 190px; }
.tc-face { position: relative; overflow: hidden; background: var(--surface-2); min-width: 0; }
.tc-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-face-ph { background: var(--surface-2); }

.tc-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
/* name + belt (right after the name) + nickname on one line; wraps and lets the
   card grow to fit a champion team rather than clipping the icon. */
.tc-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-weight: 600; }
.tc-title .belt-svg { flex: 0 0 auto; }
.tc-members { color: var(--muted); font-size: 11px; }
/* inactive (disbanded) teams: still shown, greyed out */
.team-chip.inactive { opacity: 0.55; }
.tc-inactive-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 6px; }
.team-inactive { color: var(--muted); opacity: 0.75; }

.roster-grid {
  max-width: 1400px; margin: 24px auto 0; padding: 0 26px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .roster-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .roster-grid { grid-template-columns: repeat(2, 1fr); } }

/* Guests/former get MORE columns, not the same 4: these tabs run into the
   hundreds (measured: 85+ guests vs. a 28-wrestler main roster) and their
   cards are typically sparser -- most guests have no debut/height/birthplace
   on file, so the stat-row block that pads a main-roster card is usually
   absent here too. A denser grid fits more of a long list per screen without
   the cards themselves feeling emptier than a 4-up main roster card. */
.roster-grid.roster-grid-dense { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .roster-grid.roster-grid-dense { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px)  { .roster-grid.roster-grid-dense { grid-template-columns: repeat(3, 1fr); } }
/* 2-up, not 1: a single full-width column makes each card a ~360px portrait,
   so one person fills the screen and the roster stops reading as a roster.
   Matches the browse grid's phone treatment (features/gallery.css). */
@media (max-width: 480px) {
  .roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 14px 32px; }
  /* Half-width cards need the body to give back some room. The stat rows stay
     -- "Debut / 2021-05-04" still fits two columns at ~170px -- just smaller. */
  .roster-card-body { padding: 10px 11px 12px; }
  .roster-card-name { font-size: 15px; }
  .roster-card-name-ja { font-size: 11px; }
  .roster-card-epithet { font-size: 11px; }
  .roster-card-stats { font-size: 11px; margin-top: 8px; }
  .roster-card-cta { font-size: 11px; padding: 8px 0; }
  .roster-card-body > div:last-of-type { margin-bottom: 10px; }
}

/* Column flex + the auto margin on the CTA below: the stat rows are omitted
   entirely for anyone the roster has no debut/height/birthplace for, so cards
   in the same row otherwise ended at different heights and their CTAs didn't
   line up. Stretching the card and pinning the CTA to the bottom keeps the row
   even without reserving blank space for facts a person doesn't have. */
.roster-card {
  background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.roster-card:hover { border-color: var(--ink); box-shadow: var(--shadow-md); }

/* aspect-ratio, not a fixed height: the grid goes 4 -> 3 -> 2 -> 1 column, so a
   fixed 210px left the 1-column phone card full-width with a short letterboxed
   strip across it. 5:4 (was 4:5, i.e. inverted) keeps the card from towering
   over its own body -- thumbs are generated 440px WIDE with unbounded height
   (see pipeline.py THUMB_WIDTH), so a tall portrait ratio here doubled up on
   that and produced a very elongated card + a heavy crop on wide source shots. */
.roster-card-photo { position: relative; aspect-ratio: 5 / 4; background: var(--surface-2); overflow: hidden; }
.roster-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.roster-card-photo-ph { display: flex; align-items: center; justify-content: center; }
/* Champion corner badge -- replaces a photo-count overlay (moved to the CTA
   text below, where "See N photos" already states it) so a title win gets a
   compact icon instead of a whole belt-name row. Same --belt-accent /
   belt-iron convention as .belt-badge (media.css).
   NOT circular: the real belt SVGs (TJPWBelt-POP/IPC/TAG.svg) are wide straps
   (~2.2:1, not medallions) -- a 20px circle crop was cutting them down to an
   unrecognisable sliver. A wide rounded-rect plate with object-fit:contain
   lets the actual belt art read at a glance; the plain generic beltIconSVG()
   fallback (Iron Man, which has no piece art) still centers fine in the same
   box since its own viewBox is square. */
.roster-card-belt-badge {
  --belt-accent: #DAAF44;
  position: absolute; top: 10px; right: 10px; width: 56px; height: 34px; padding: 4px 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); background: color-mix(in srgb, var(--belt-accent) 22%, var(--ink) 78%);
  border: var(--bw) solid color-mix(in srgb, var(--belt-accent) 70%, transparent);
  color: var(--belt-accent);
}
.roster-card-belt-badge.belt-iron { color: #d8dde3;
  background: linear-gradient(135deg, rgba(120,130,140,0.4), rgba(70,76,84,0.4));
  border-color: rgba(176,186,196,0.6); }
.roster-card-belt-badge .belt-svg { width: 26px; height: 26px; }
.roster-card-belt-badge .belt-icon { width: 100%; height: 100%; object-fit: contain; }
/* Role badge: only rendered for a non-wrestler (see roster-page.js's
   ROLE_BADGE -- most of the roster IS wrestlers, so that's the unmarked
   default and this only fires for a ref/announcer/guest/other). Overlaid on
   the photo's bottom-right corner -- the belt badge owns top-right -- rather
   than living in the text column, so it's off the name's text flow entirely
   and can never wrap/crowd it. Text, not an icon: there's no existing glyph
   set for "referee"/"announcer" the way there is for belts, and a short word
   reads faster than a new icon would at this size. */
.roster-card-role {
  position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 20px);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text); background: color-mix(in srgb, var(--ink) 72%, transparent);
  border-radius: var(--radius-pill); padding: 3px 9px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.roster-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.roster-card-name { font-family: var(--title-font), "Noto Sans JP", sans-serif; font-weight: 600;
  font-size: 19px; letter-spacing: -0.01em; line-height: 1.15; color: var(--text); }
.roster-card-name-ja { font-family: "Noto Sans JP", sans-serif; font-size: 13px;
  color: var(--muted); margin-top: 2px; }
.roster-card-epithet { font-size: 12px; color: var(--coral); margin-top: 4px; }
/* The gap above the CTA has to come from whatever element precedes it, because
   the CTA's own margin-top is `auto` (it pins to the card bottom, so the row's
   CTAs line up regardless of how many optional stat rows each card has). Name,
   epithet and stats are each optional, so the rule targets whichever ends up
   last rather than naming one. Safe as :last-of-type because all three are
   <div> and the CTA is the body's only <button> (see roster-page.js). */
.roster-card-body > div:last-of-type { margin-bottom: 14px; }

/* Debut/Height/From stat rows -- adapted from the design's Debut/Finisher/
   Gold block (see roster-page.js for why Finisher was dropped: no data
   field for it). Only rendered rows exist (most cards show 0-2, not all
   three) so the block never reserves space for facts a person doesn't have. */
.roster-card-stats { margin-top: 12px; display: grid; gap: 5px; font-size: 13px; }
.roster-card-stat-row { display: flex; justify-content: space-between; gap: 8px; }
.rcs-k { color: var(--muted); }
.rcs-v { color: var(--text); text-align: right; }

.roster-card-cta {
  /* The auto top margin, inside .roster-card-body's column flex, pushes this to
     the bottom of the card -- so CTAs line up across a row even though the
     stat rows above are optional (most people have 0-2 of debut/height/from,
     and the block is omitted entirely when they have none). The minimum gap on
     an already-full card comes from the preceding elements' bottom margins,
     NOT from a margin here: `auto` resolves to 0 in that case, and this rule's
     own `border` shorthand below would clobber any border-based spacer. */
  margin-top: auto; width: 100%; padding: 9px 0; text-align: center;
  border-radius: var(--radius-pill); border: var(--bw) solid var(--ink); background: none;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--text); cursor: pointer;
  text-transform: var(--btn-tt); letter-spacing: var(--btn-ls);
  transition: background .15s, border-color .15s, color .15s;
}
.roster-card-cta:hover { background: var(--coral); border-color: var(--coral); color: var(--ink); }

/* ---------- low-priority pair cards ----------
   Audience regulars / bit-part guests (people.low_priority) sink to the end
   of their tab and share ONE grid cell between two people instead of getting
   a full card each -- see roster-page.js's buildPairCard. Earlier chip-based
   UI (People page) just faded these to opacity:0.6, but a full-bleed PHOTO
   card faded the same way read as "broken" rather than "minor" (the prompt
   for this change), so instead of dimming, the card itself is smaller: two
   compact half-height mini-cards stacked in the footprint a single normal
   card would occupy, same width/height boundary as everyone else's grid
   cell. That size difference alone reads as "lesser" without look-disabled
   fading. */
.roster-card-pair {
  display: flex; flex-direction: column; gap: 8px;
}
.roster-mini-card {
  flex: 1; display: flex; align-items: center; gap: 8px; min-height: 0;
  background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; padding: 6px;
  transition: border-color .15s;
}
.roster-mini-card:hover { border-color: var(--ink); }
.roster-mini-empty { visibility: hidden; cursor: default; }
.roster-mini-photo {
  flex: 0 0 auto; width: 40%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm, 6px);
  background: var(--surface-2); overflow: hidden; position: relative;
}
.roster-mini-photo img { width: 100%; height: 100%; object-fit: cover; }
.roster-mini-photo.roster-card-photo-ph { display: flex; align-items: center; justify-content: center; }
.roster-mini-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Wraps (not ellipsis/nowrap) rather than truncating -- a longer name (e.g.
   "Alessandro HypeTalkTV") stays fully readable across 2 lines instead of
   getting cut off in this already-tight footprint. */
.roster-mini-name {
  min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text);
  overflow-wrap: anywhere;
}
/* Same role-badge concept as .roster-card-role, shrunk further for the
   mini-card's tight footprint -- most low-priority people ARE role:'other'
   (ringside regulars), so this is the more commonly-visible of the two. Sits
   below the name in the text column (not overlaid on the photo, unlike the
   full-size card's badge) -- the mini-card's photo is too small for an
   overlay to read well at this scale. */
.roster-mini-role {
  align-self: flex-start; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--muted); background: var(--surface-2);
  border: var(--bw) solid var(--border); border-radius: var(--radius-pill);
  padding: 1px 6px; line-height: 1.3;
}
@media (max-width: 480px) {
  .roster-mini-name { font-size: 11px; }
}