@import url('/assets/demo-data.css');
/* Shared player record object used by player, family, youth and scouting views. */
.pv-player-card {
  position: relative;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: var(--text, #10283d);
  box-shadow: 0 26px 62px -34px rgba(7, 29, 73, .48);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  isolation: isolate;
}
.pv-player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(7, 29, 73, .16);
  clip-path: inherit;
}
.pv-pc-cover {
  position: relative;
  height: 154px;
  flex: none;
  overflow: hidden;
  background: #071d49;
}
.pv-pc-cover::before,
.pv-pc-cover::after {
  content: '';
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.pv-pc-cover::before {
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 29, 73, .02) 28%, rgba(7, 29, 73, .74) 100%);
}
.pv-pc-cover::after {
  width: 86px;
  height: 2px;
  right: -17px;
  bottom: 20px;
  background: #c8102e;
  transform: rotate(-12deg);
}
.pv-pc-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 34%;
}
.pv-pc-save {
  position: absolute;
  z-index: 3;
  top: 13px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: #071d49;
  font: 600 18px/1 var(--font-mono, monospace);
}
.pv-pc-save:hover,
.pv-pc-save.on { border-color: #c8102e; background: #c8102e; color: #fff; }
.pv-pc-cover-fallback {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.65%, rgba(255,255,255,.54) 49.65%, rgba(255,255,255,.54) 50.35%, transparent 50.35%),
    linear-gradient(176deg, #123363 0 48%, #071d49 48% 100%);
}
.pv-pc-season {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 16px;
  padding: 6px 9px;
  background: rgba(255,255,255,.94);
  color: #071d49;
  font: 600 10px/1.1 var(--font-mono, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pv-pc-number {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 13px;
  color: #fff;
  font: 500 10px/1.1 var(--font-mono, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pv-pc-identity {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-height: 96px;
  padding: 13px 18px;
  background: #fff;
}
.pv-pc-identity--badged { grid-template-columns: 74px minmax(0, 1fr) auto; }
.pv-pc-age {
  align-self: start;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid #aab8c5;
  border-radius: 4px;
  background: #f7f9fb;
  color: #071d49;
  font: 700 10px/1 var(--font-mono, monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pv-pc-photo {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f2f5f8;
  color: #071d49;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 12px 28px -18px rgba(7, 29, 73, .75);
  font: 700 22px/1 var(--font-display, sans-serif);
  transform: translateY(-24px);
}
.pv-pc-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pv-pc-name { min-width: 0; }
.pv-pc-name h2 {
  min-height: 1em;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: #071d49;
  font: 700 clamp(22px, 2vw, 28px)/1 var(--font-display, sans-serif);
  letter-spacing: -.015em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.pv-pc-name p {
  min-height: 30px;
  display: -webkit-box;
  overflow: hidden;
  margin-top: 6px;
  color: #4e6273;
  font-size: 12px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.pv-pc-notice { display: flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-top: 1px solid #d8e0e7; background: #fff; }
.pv-pc-notice b { color: #c8102e; font: 600 14px/1 var(--font-mono, monospace); white-space: nowrap; }
.pv-pc-notice span { color: #4e6273; font-size: 12px; line-height: 1.3; }
.pv-pc-primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid #aab8c5;
}
.pv-pc-primary > div { min-width: 0; padding: 16px 14px 14px; }
.pv-pc-primary > div + div { border-left: 1px solid #d8e0e7; }
.pv-pc-primary b {
  display: block;
  color: #c8102e;
  font: 600 34px/.94 var(--font-mono, monospace);
  letter-spacing: -.04em;
}
.pv-pc-primary span,
.pv-pc-secondary span {
  display: block;
  margin-top: 7px;
  color: #607283;
  font: 600 10px/1.1 var(--font-display, sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pv-pc-secondary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #f2f5f8;
}
.pv-pc-secondary > div { min-width: 0; padding: 12px 8px; text-align: center; }
.pv-pc-secondary > div + div { border-left: 1px solid #d8e0e7; }
.pv-pc-secondary b {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #071d49;
  font: 600 13px/1.15 var(--font-mono, monospace);
  overflow-wrap: anywhere;
  text-align: center;
}
.pv-pc-secondary span { margin-top: 5px; font-size: 10px; letter-spacing: .06em; }
.pv-pc-tags {
  min-height: 92px;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  padding: 13px 14px;
  border-top: 1px solid #d8e0e7;
  background: #fff;
}
.pv-pc-tag {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid #d8e0e7;
  border-radius: 4px;
  background: #f2f5f8;
  color: #334b60;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
}
.pv-pc-tag--accent { border-color: rgba(200,16,46,.3); background: #fff6f7; color: #a80d27; }
.pv-pc-tag--verified { border-color: rgba(20,123,70,.28); background: #f0faf5; color: #11673d; }
.pv-pc-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #d8e0e7; }
.pv-pc-details > div { min-width: 0; min-height: 61px; padding: 11px 13px; border-bottom: 1px solid #d8e0e7; }
.pv-pc-details > div:nth-child(odd) { border-right: 1px solid #d8e0e7; }
.pv-pc-details > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.pv-pc-details span,
.pv-pc-clips span { display: block; color: #607283; font: 600 10px/1.15 var(--font-display, sans-serif); letter-spacing: .09em; text-transform: uppercase; }
.pv-pc-details b { min-height: 31px; display: -webkit-box; overflow: hidden; margin-top: 4px; color: #10283d; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pv-pc-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 11px 12px; background: #fff; }
.pv-pc-clips > * { min-width: 0; min-height: 60px; padding: 8px 9px; border: 1px solid #aab8c5; color: #071d49; text-decoration: none; }
.pv-pc-clips > a:hover { border-color: #071d49; background: #f2f5f8; }
.pv-pc-clips .is-missing { background: #f2f5f8; color: #607283; }
.pv-pc-clips b { display: block; margin-top: 4px; font: 500 11px/1.25 var(--font-mono, monospace); overflow-wrap: anywhere; }
.pv-pc-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: auto; padding: 0 12px 12px; }
.pv-pc-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.pv-pc-action { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid #aab8c5; background: #fff; color: #071d49; font: 600 11px/1.1 var(--font-display, sans-serif); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.pv-pc-action:hover { border-color: #071d49; background: #f2f5f8; }
.pv-pc-action--primary { border-color: #c8102e; background: #c8102e; color: #fff; }
.pv-pc-action--primary:hover { border-color: #a80d27; background: #a80d27; color: #fff; }
.pv-pc-foot {
  min-height: 53px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #071d49;
  color: #fff;
}
.pv-pc-status {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.25;
}
.pv-pc-status::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #fff;
}
.pv-pc-status--verified::before { background: #147b46; box-shadow: 0 3px 10px rgba(20, 123, 70, .36); }
.pv-pc-status--warning::before { background: #a85a00; }
.pv-pc-foot a {
  flex: none;
  margin-left: auto;
  color: #fff;
  font: 600 11px/1.1 var(--font-display, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pv-pc-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pv-player-card--family .pv-pc-cover { height: 138px; }
.pv-player-card--family .pv-pc-identity { grid-template-columns: 68px minmax(0, 1fr); min-height: 86px; }
.pv-player-card--family .pv-pc-photo { width: 68px; height: 68px; transform: translateY(-20px); }
.pv-player-card--coach .pv-pc-cover { height: 168px; }
.pv-player-card--universal { min-height: 640px; }
.pv-player-card--universal .pv-pc-cover { height: 168px; }

/* Coach-style record banner. */
.pv-profile-hero {
  position: relative;
  min-height: 352px;
  overflow: hidden;
  background: #071d49;
  color: #fff;
  box-shadow: 0 26px 70px -42px rgba(7, 29, 73, .6);
}
.pv-profile-hero-cover { position: absolute; inset: 0; }
.pv-profile-hero-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,29,73,.86) 0%, rgba(7,29,73,.42) 48%, rgba(7,29,73,.05) 76%), linear-gradient(0deg, rgba(7,29,73,.78), transparent 54%);
}
.pv-profile-hero-cover img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 32%; }
.pv-profile-hero-body {
  position: relative;
  z-index: 1;
  min-height: 352px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 38px 38px 102px;
}
.pv-profile-hero-photo {
  width: 112px;
  height: 132px;
  flex: none;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 50% 50% 46% 46%;
  background: #f2f5f8;
  box-shadow: 0 18px 38px -22px rgba(7,29,73,.72);
}
.pv-profile-hero-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pv-profile-hero-copy { min-width: 0; padding-bottom: 4px; }
.pv-profile-hero-copy h1 { color: #fff; font-size: clamp(44px, 5vw, 68px); line-height: .9; }
.pv-profile-hero-copy p { max-width: 56ch; margin-top: 10px; color: rgba(255,255,255,.82); font-size: 16px; }
.pv-profile-hero-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.pv-profile-hero-tags span { padding: 6px 9px; border: 1px solid rgba(255,255,255,.46); color: #fff; font-size: 12px; font-weight: 600; }
.pv-profile-hero-scoreline {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  color: #10283d;
}
.pv-profile-hero-scoreline > div { min-width: 0; padding: 16px 20px; }
.pv-profile-hero-scoreline > div + div { border-left: 1px solid #d8e0e7; }
.pv-profile-hero-scoreline b { display: block; color: #c8102e; font: 600 25px/1 var(--font-mono, monospace); }
.pv-profile-hero-scoreline span { display: block; margin-top: 5px; color: #607283; font: 600 10px/1.1 var(--font-display, sans-serif); letter-spacing: .09em; text-transform: uppercase; }

/* Leaderboard score sheet. */
.pv-leaderboard-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #d8e0e7; }
.pv-board-switch { display: inline-flex; padding: 3px; background: #f2f5f8; }
.pv-board-switch button { min-height: 38px; padding: 8px 13px; border: 0; background: transparent; color: #4e6273; font: 600 12px var(--font-display, sans-serif); letter-spacing: .04em; }
.pv-board-switch button[aria-pressed="true"] { background: #071d49; color: #fff; }
.pv-board-context { margin: 15px 0; color: #4e6273; font-size: 13px; }
.pv-board-context strong { color: #071d49; }
.pv-leaderboard { border-top: 1px solid #aab8c5; }
.pv-rank-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 8px 4px; border-bottom: 1px solid #d8e0e7; }
.pv-rank-row.is-you { background: #f2f5f8; box-shadow: inset 2px 0 0 #c8102e; }
.pv-rank { color: #607283; font: 500 14px var(--font-mono, monospace); text-align: center; }
.pv-rank-row:nth-child(-n+3) .pv-rank { color: #c8102e; font-size: 19px; font-weight: 600; }
.pv-rank-name { min-width: 0; }
.pv-rank-name b, .pv-rank-name span { display: block; }
.pv-rank-name b { color: #071d49; font-size: 16px; }
.pv-rank-name span { margin-top: 2px; color: #607283; font-size: 12px; }
.pv-rank-score { color: #071d49; font: 600 21px var(--font-mono, monospace); text-align: right; }
.pv-rank-score small { display: block; margin-top: 2px; color: #607283; font: 600 9px var(--font-display, sans-serif); letter-spacing: .09em; text-transform: uppercase; }

@media (max-width: 700px) {
  .pv-profile-hero { min-height: 450px; margin-inline: -16px; }
  .pv-profile-hero-cover::after { background: linear-gradient(0deg, rgba(7,29,73,.94) 0%, rgba(7,29,73,.24) 80%); }
  .pv-profile-hero-body { min-height: 450px; align-items: flex-end; gap: 13px; padding: 170px 18px 172px; }
  .pv-profile-hero-photo { width: 82px; height: 98px; border-width: 4px; }
  .pv-profile-hero-copy h1 { font-size: 44px; }
  .pv-profile-hero-copy p { font-size: 16px; }
  .pv-profile-hero-scoreline { grid-template-columns: 1fr 1fr; }
  .pv-profile-hero-scoreline > div:nth-child(3) { border-left: 0; }
  .pv-profile-hero-scoreline > div:nth-child(n+3) { border-top: 1px solid #d8e0e7; }
  .pv-leaderboard-controls { align-items: flex-start; flex-direction: column; }
  .pv-board-switch { width: 100%; }
  .pv-board-switch button { flex: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .pv-profile-hero { animation: pv-record-place .72s cubic-bezier(.16,1,.3,1) both; }
  @keyframes pv-record-place { from { opacity: .65; clip-path: inset(0 0 14% 0); transform: translateY(14px); } }
}


/* A record with no pictures yet, seen by the person who can add them. Everyone
   else keeps the plain navy panel and the initials. The cover sits under the
   card's own darkening gradient, so the copy holds the middle band where that
   gradient is still light. */
.pv-pc-cover-fallback--invite {
  z-index: 1;
  /* The scorebook crease would run straight through the icon and the copy. */
  background: linear-gradient(176deg, #123363 0 48%, #071d49 48% 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 16px;
  text-align: center;
  color: #fff;
}
.pv-pc-invite-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px dashed rgba(255, 255, 255, .42);
  border-radius: 50%;
  color: rgba(255, 255, 255, .86);
}
.pv-pc-invite-mark svg { width: 21px; height: 21px; }
.pv-pc-cover-fallback--invite b {
  font: 700 17px/1 var(--font-display, sans-serif);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pv-pc-cover-fallback--invite i {
  max-width: 21ch;
  font: 400 11.5px/1.35 var(--font-body, sans-serif);
  font-style: normal;
  color: rgba(255, 255, 255, .68);
}

/* The photo slot is a clipped egg shape, so the plus sits inside it. */
.pv-pc-photo-invite {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(176deg, #123363 0 52%, #071D49 52% 100%);
  color: rgba(255, 255, 255, .58);
}
.pv-pc-photo-invite-figure {
  width: 62%;
  height: auto;
  transform: translateY(-9%);
}
.pv-pc-photo-invite-plus {
  position: absolute;
  bottom: 7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c8102e;
  color: #fff;
  box-shadow: 0 2px 6px -1px rgba(7, 29, 73, .6);
}
.pv-pc-photo-invite-plus svg { width: 11px; height: 11px; }


/* Where the record is owned, the two image slots are controls. They keep the
   card's own geometry, so nothing about the coach's view of the same card
   changes: only the affordance is added. */
.pv-pc-media-edit {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pv-pc-media-edit--cover { position: absolute; inset: 0; }
.pv-pc-media-edit--photo { border-radius: inherit; overflow: hidden; }
.pv-pc-media-edit:focus-visible { outline: 3px solid var(--volt, #C8102E); outline-offset: -3px; }

.pv-pc-media-edit--cover .pv-pc-media-hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-sm, 4px);
  background: rgba(7, 29, 73, .82);
  color: #fff;
  font: 600 11px/1 var(--font-display, sans-serif);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .16s, transform .16s;
}
.pv-pc-media-edit--cover .pv-pc-media-hint svg { width: 15px; height: 15px; }
.pv-pc-media-edit--cover:hover .pv-pc-media-hint,
.pv-pc-media-edit--cover:focus-visible .pv-pc-media-hint { opacity: 1; transform: translate(-50%, 0); }

/* The empty cover already says what it wants, so the hint stays out of its way. */
.pv-pc-media-edit--cover:has(.pv-pc-cover-fallback--invite) .pv-pc-media-hint { display: none; }

.pv-pc-media-edit--photo .pv-pc-media-hint {
  position: absolute;
  z-index: 2;
  right: 3px;
  bottom: 5px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--seam, #C8102E);
  color: #fff;
}
.pv-pc-media-edit--photo .pv-pc-media-hint svg { width: 11px; height: 11px; }
/* An empty photo already carries its own plus. */
.pv-pc-media-edit--photo:has(.pv-pc-photo-invite) .pv-pc-media-hint { display: none; }
.pv-pc-media-edit--photo img { transition: filter .16s; }
.pv-pc-media-edit--photo:hover img { filter: brightness(.86); }

@media (prefers-reduced-motion: reduce) {
  .pv-pc-media-edit--cover .pv-pc-media-hint { transition: none; }
}