/* ============================================================================
   SNS shared player quick-look card -- CALL-3 rebuild (D-CALL-0926, item 14/15)
   ----------------------------------------------------------------------------
   Renders inside the shared exp-card.js shell (.exp-scrim > .exp-card, see
   assets/exp-card.css) via the .exp-card--player-rich modifier class. Deliberately
   its OWN layout language -- plain text rows, no tiles/containers -- so it
   does not disturb assets/exp-card.css's existing tile-based rules, which the
   plainer window.CFF.expCard.openPlayer() still uses on any route where this
   file has not (yet) loaded.

   Loaded per-route via explicit <link> next to exp-card-rich.js. Unlayered,
   same reasoning as exp-card.css: legacy exp-* rules live inside @layer
   components in core.css, and unlayered rules win the cascade.
   ========================================================================== */

/* --- Card shell: near full-screen on mobile, large centered panel on desktop */
.exp-scrim .exp-card.exp-card--player-rich{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  width:min(640px,94vw);
  max-height:90vh;
  overflow:hidden;
}
/* A shorter desktop viewport (e.g. 1280x800) can legitimately need the body to
   scroll for a player with both a live day-of block AND full season stats --
   only the two mobile breakpoints require zero scroll. Without this, the
   pinned action row (below, outside .exp-body) sat flush against whatever
   got clipped mid-row, reading as an overlap bug rather than "scroll for
   more". A solid background + top divider makes the cut a deliberate edge. */
.exp-scrim .exp-card--player-rich > .exp-actions{
  background:var(--bg-surface,#0A0A0A);
  border-top:1px solid var(--hairline-2,rgba(255,255,255,.12));
  padding:10px 14px;
  margin-top:0;
}
@media (max-width:640px){
  .exp-scrim{padding:0}
  .exp-scrim .exp-card.exp-card--player-rich{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:14px;
  }
}


/* ============================================================================
   PLAYER-CARD-GROUPED-1001 (Pat, 2026-10-01): the CALL-3 plain-row body read
   "like it was taken from a text file". The body is now a short stack of
   grouped panels -- at-a-glance number tiles, season stat lines with bold
   numbers, the restored week-by-week strip, and "In your leagues" -- and the
   header avatar is the signed-off quick-look circle again, at header size.
   ========================================================================== */

/* --- Header: ringed headshot + name + position / school ------------------- */
.exp-scrim .exp-card--player-rich .xcr-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 52px 14px 18px; /* right pad clears the pinned close button */
}
/* expcard avatar canon (2026-07-30): white disc, black inner ring, white
   outer ring, cover crop zoomed so the face fills the circle. */
.exp-scrim .exp-card--player-rich .xcr-avatar{
  width:84px;
  height:84px;
  flex:0 0 84px;
  margin:5px;               /* room for the 5px outer ring, never clipped */
  border-radius:50%;
  object-fit:cover;
  object-position:center top;
  object-view-box:inset(0% 19% 12% 19%);
  background:#FFFFFF;
  border:3px solid #0A0A0A;
  box-shadow:0 0 0 4px #FFFFFF,0 8px 22px rgba(0,0,0,.45);
  box-sizing:border-box;
}
.exp-scrim .exp-card--player-rich .xcr-avatar--logo{
  object-fit:contain;
  object-view-box:none;
  object-position:center;
  padding:10px;
}
.exp-scrim .exp-card--player-rich .xcr-avatar--fallback{object-view-box:none}
.exp-scrim .exp-card--player-rich .xcr-headline{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.exp-scrim .exp-card--player-rich .xcr-name{
  font-family:var(--f-display,"Graduate","Oswald",sans-serif);
  font-size:24px;
  line-height:1.1;
  letter-spacing:.03em;
  margin:0;
  color:var(--text-primary,#F5F5F5);
  overflow-wrap:anywhere;
}
.exp-scrim .exp-card--player-rich .xcr-meta{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  color:var(--text-muted,#C2C2C2);
}
.exp-scrim .exp-card--player-rich .xcr-meta .exp-pos{font-size:16px;padding:1px 8px}
.exp-scrim .exp-card--player-rich .xcr-school{color:inherit;text-decoration:none}
.exp-scrim .exp-card--player-rich .xcr-school:hover{color:var(--text-primary,#F5F5F5);text-decoration:underline}

/* --- Body: the one scroll region ------------------------------------------ */
.exp-scrim .exp-card--player-rich .xcr-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:4px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.exp-scrim .exp-card--player-rich .xcr-loading{
  padding:20px 16px;
  font-family:var(--f-body,"Inter",sans-serif);
  color:var(--text-muted,#C2C2C2);
}

/* --- At-a-glance number tiles --------------------------------------------- */
.exp-scrim .exp-card--player-rich .xcr-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.exp-scrim .exp-card--player-rich .xcr-kpi{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.10);
  min-width:0;
}
.exp-scrim .exp-card--player-rich .xcr-kpi-val{
  font-family:var(--f-numeral,"JetBrains Mono",monospace);
  font-size:22px;
  font-weight:700;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
  color:var(--white-bright,#F5F5F5);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.exp-scrim .exp-card--player-rich .xcr-kpi-lbl{
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:0;
  color:rgba(255,255,255,.82);
  white-space:nowrap;
}
.exp-scrim .exp-card--player-rich .xcr-kpi-sub{
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  color:rgba(255,255,255,.6);
}
@media (max-width:640px){
  .exp-scrim .exp-card--player-rich .xcr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- Grouped panels ------------------------------------------------------- */
.exp-scrim .exp-card--player-rich .xcr-group{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.10);
}
.exp-scrim .exp-card--player-rich .xcr-group-hd{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px;
}
.exp-scrim .exp-card--player-rich .xcr-group-title{
  margin:0;
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:16px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--white-bright,#F5F5F5);
}
.exp-scrim .exp-card--player-rich .xcr-group-aside{
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  color:rgba(255,255,255,.7);
  white-space:nowrap;
}

/* Stat lines inside a panel: label left, bold numbers + quiet units right. */
.exp-scrim .exp-card--player-rich .xcr-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.exp-scrim .exp-card--player-rich .xcr-group-hd + .xcr-line{border-top:0;padding-top:2px}
.exp-scrim .exp-card--player-rich .xcr-line-lbl{
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  font-weight:600;
  color:rgba(255,255,255,.78);
  flex:0 0 auto;
}
.exp-scrim .exp-card--player-rich .xcr-line-val{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:4px 12px;
  min-width:0;
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  color:var(--text-primary,#F5F5F5);
  text-align:right;
}
.exp-scrim .exp-card--player-rich .xcr-stat{white-space:nowrap}
.exp-scrim .exp-card--player-rich .xcr-stat b{
  font-family:var(--f-numeral,"JetBrains Mono",monospace);
  font-size:16px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.exp-scrim .exp-card--player-rich .xcr-stat-u{
  font-size:16px;
  letter-spacing:0;
  text-transform:lowercase;
  color:rgba(255,255,255,.62);
}
.exp-scrim .exp-card--player-rich .xcr-delayed{font-style:italic;color:rgba(255,255,255,.7)}

/* --- Live / final-today panel leads on game day --------------------------- */
.exp-scrim .exp-card--player-rich .xcr-group--live{border-color:rgba(255,255,255,.28)}
.exp-scrim .exp-card--player-rich .xcr-group--live.is-live{border-color:var(--red-bright,#FF3B30)}
.exp-scrim .exp-card--player-rich .xcr-group--live.is-live .xcr-group-title{color:var(--red-bright,#FF3B30)}
.exp-scrim .exp-card--player-rich .xcr-dayof{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:4px;
}
.exp-scrim .exp-card--player-rich .xcr-dayof-pts{
  font-family:var(--f-numeral,"JetBrains Mono",monospace);
  font-size:30px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--white-bright,#F5F5F5);
}
.exp-scrim .exp-card--player-rich .xcr-dayof-pts small{font-size:16px;margin-left:4px;color:rgba(255,255,255,.7)}
.exp-scrim .exp-card--player-rich .xcr-dayof-game{font-family:var(--f-body,"Inter",sans-serif);font-size:16px;color:rgba(255,255,255,.82)}

/* --- Week-by-week strip (pl-gs-* base rules live in exp-card.css) --------- */
.exp-scrim .exp-card--player-rich .xcr-gs{height:112px;margin-top:4px}
.exp-scrim .exp-card--player-rich .xcr-gs .pl-gs-wk{font-size:16px}
.exp-scrim .exp-card--player-rich .xcr-gs .pl-gs-value{font-size:16px}
.exp-scrim .exp-card--player-rich .xcr-chart-key{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  margin-top:10px;
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  color:rgba(255,255,255,.75);
}
.exp-scrim .exp-card--player-rich .xcr-chart-key span{display:inline-flex;align-items:center;gap:6px}
.exp-scrim .exp-card--player-rich .xcr-key{display:inline-block;width:10px;height:10px;border-radius:2px}
.exp-scrim .exp-card--player-rich .xcr-key--over{background:var(--green-positive,#3DBA6E)}
.exp-scrim .exp-card--player-rich .xcr-key--under{background:var(--red-bright,#FF3B30);opacity:.7}
.exp-scrim .exp-card--player-rich .xcr-key--line{height:0;width:14px;border-radius:0;border-top:2px solid var(--brand-blue,#00B7FF)}
.exp-scrim .exp-card--player-rich .xcr-empty{font-family:var(--f-body,"Inter",sans-serif);font-size:16px;color:rgba(255,255,255,.7)}

/* --- In your leagues ------------------------------------------------------ */
.exp-scrim .exp-card--player-rich .xcr-league-name{
  color:rgba(255,255,255,.9);
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
  min-width:0;
}
.exp-scrim .exp-card--player-rich .xcr-league-name:hover{text-decoration:underline}
.exp-scrim .exp-card--player-rich .xcr-avail{
  flex:0 0 auto;
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:0;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid currentColor;
}
.exp-scrim .exp-card--player-rich .xcr-avail--free{color:var(--green-positive,#3DBA6E)}
.exp-scrim .exp-card--player-rich .xcr-avail--rostered{color:rgba(255,255,255,.7)}
.exp-scrim .exp-card--player-rich .xcr-avail--mine{color:#FF6B6B}

/* Header league summary ("Free agent in 2 of 3 leagues"). */
.exp-scrim .exp-card--player-rich .xcr-own[hidden]{display:none}
.exp-scrim .exp-card--player-rich .xcr-own .xcr-avail{
  background:rgba(0,0,0,.35);
  white-space:normal;
  text-transform:none;
  letter-spacing:0;
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  padding:3px 10px;
}
/* Desktop has room to label every played week, not just the best one. */
@media (min-width:641px){
  .exp-scrim .exp-card--player-rich .xcr-gs .pl-gs-col .pl-gs-value{opacity:1;transform:translate(-50%,-9px)}
}

/* Action buttons: ADD-PLAYER-1001 made "Add to my league" a <button> (it
   opens the in-place league picker). core.css's .exp-btn look lives inside
   @layer components, where an unlayered button reset beats it -- the button
   rendered as bare text beside a bordered "Full profile" link. Restated here,
   unlayered, so <a> and <button> actions look identical. */
.exp-scrim .exp-card--player-rich .exp-actions .exp-btn{
  min-height:44px;
  padding:10px 12px;
  background:rgba(255,26,26,.08);
  border:1px solid rgba(255,26,26,.55);
  border-radius:8px;
  color:var(--white-bright,#F5F5F5);
  font-family:var(--f-body,"Inter",sans-serif);
  font-size:16px;
  font-weight:600;
  letter-spacing:.03em;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.exp-scrim .exp-card--player-rich .exp-actions .exp-btn:hover{background:rgba(255,26,26,.35)}
.exp-scrim .exp-card--player-rich .exp-actions .exp-btn[hidden]{display:none}

/* ============================================================================
   CARD-MOBILE-FIT-1001 (Pat, 2026-10-01): on a real phone the card was too
   tall -- the whole card scrolled (header included) and the week-by-week
   strip started 160px+ below the fold at 390x664 (iPhone + Safari bars).
   Phones now: header pinned (only .xcr-body scrolls), card only as tall as
   its content, and everything from the header through the graph sized to fit
   one screen. "In your leagues" sits below the graph and may scroll.
   ========================================================================== */
.exp-scrim .exp-card--player-rich > .exp-body{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}
@media (max-width:640px){
  .exp-scrim .exp-card.exp-card--player-rich{
    height:auto;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  }
  .exp-scrim .exp-card--player-rich .xcr-head{gap:12px;padding:12px 52px 10px 12px}
  .exp-scrim .exp-card--player-rich .xcr-avatar{
    width:60px;height:60px;flex:0 0 60px;margin:4px;
    border-width:2px;box-shadow:0 0 0 3px #FFFFFF,0 6px 16px rgba(0,0,0,.45);
  }
  .exp-scrim .exp-card--player-rich .xcr-headline{gap:4px}
  .exp-scrim .exp-card--player-rich .xcr-name{font-size:20px}
  .exp-scrim .exp-card--player-rich .xcr-meta{font-size:16px}
  .exp-scrim .exp-card--player-rich .xcr-body{padding:2px 12px 12px;gap:8px}

  .exp-scrim .exp-card--player-rich .xcr-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .exp-scrim .exp-card--player-rich .xcr-kpi{padding:8px 8px 7px;border-radius:8px}
  .exp-scrim .exp-card--player-rich .xcr-kpi-val{font-size:18px}
  .exp-scrim .exp-card--player-rich .xcr-kpi{padding:8px 7px 7px}
  .exp-scrim .exp-card--player-rich .xcr-kpi-sub{display:none}

  .exp-scrim .exp-card--player-rich .xcr-group{padding:9px 12px;border-radius:10px}
  .exp-scrim .exp-card--player-rich .xcr-group-hd{margin-bottom:4px}
  .exp-scrim .exp-card--player-rich .xcr-line{padding:5px 0}
  .exp-scrim .exp-card--player-rich .xcr-chart-key{gap:2px 12px}

  .exp-scrim .exp-card--player-rich .xcr-gs{height:80px}
  .exp-scrim .exp-card--player-rich .xcr-chart-key{margin-top:6px;gap:4px 12px}

  .exp-scrim .exp-card--player-rich > .exp-actions{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
  }
  .exp-scrim .exp-card--player-rich > .exp-actions .exp-btn{min-height:44px;padding:8px 6px;white-space:nowrap}
}
/* Short phones (iPhone SE with Safari bars, ~553px tall): tighten vertical
   rhythm so the header through the graph still fits after the 16px type
   floor (HEISMAN-ALIGN-1001 follow-up to CARD-MOBILE-FIT-1001). */
@media (max-width:640px) and (max-height:600px){
  .exp-scrim .exp-card--player-rich .xcr-head{padding-top:8px;padding-bottom:6px}
  .exp-scrim .exp-card--player-rich .xcr-avatar{width:48px;height:48px;flex-basis:48px}
  .exp-scrim .exp-card--player-rich .xcr-name{font-size:18px}
  .exp-scrim .exp-card--player-rich .xcr-body{gap:6px}
  .exp-scrim .exp-card--player-rich .xcr-kpi{padding:6px 7px 5px}
  .exp-scrim .exp-card--player-rich .xcr-kpi-val{font-size:17px}
  .exp-scrim .exp-card--player-rich .xcr-group{padding:7px 12px}
  .exp-scrim .exp-card--player-rich .xcr-line{padding:3px 0}
  .exp-scrim .exp-card--player-rich .xcr-gs{height:62px}
  .exp-scrim .exp-card--player-rich .xcr-chart-key{margin-top:4px}
  .exp-scrim .exp-card--player-rich > .exp-actions{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
}
/* 15 week columns at the 16px floor don't fit two-digit labels side by side
   on a phone: label every other week (1, 3, 5 ... 15). Bars stay. */
@media (max-width:640px){
  .exp-scrim .exp-card--player-rich .xcr-gs .pl-gs-col:nth-child(even) .pl-gs-wk{visibility:hidden}
}