@layer components {
html[data-route="/players"]{
  /* ensure [hidden] beats any display:flex override */
  [hidden] { display: none !important; }

  /* SNS Players — page-specific styles. Chrome inherited from style.base.css. */

  .content .hero-wordmark-text::before { content: none !important; }

  /* ============ TOOLBAR ============ */
  .row-pl-bar { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px 0; }

  /* Sticky "Filters" row (Phase C8): on desktop the toolbar is a single compact
     row, so pinning it keeps the filters reachable while the infinite-scroll
     list runs long. Solid background + hairline so cards never bleed through;
     z-index sits under the chrome sidebar / bottom tab bar. Deliberately NOT
     applied on mobile, where the toolbar wraps to several rows and a pinned
     block that tall would eat the viewport — mobile filters scroll normally. */
  @media (min-width: 881px) {
    .row-pl-bar {
      position: sticky;
      top: 0;
      z-index: 20;
      padding: 8px 2px;
      background: var(--bg-page, var(--black, #050505));
      border-bottom: 1px solid var(--gray-border, #2A2A2A);
    }
  }
  .pl-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }
  /* search grows to fill; the position chips + the conf/team/sort selects flow
     after it and wrap to a second line as needed (toolbar now holds 5 controls). */
  .pl-search { position: relative; flex: 1 1 240px; min-width: 220px; }
  .pl-search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px;
    color: var(--white-bright, #F5F5F5);
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .pl-search-input::placeholder { color: var(--text-muted, var(--gray-light,#C2C2C2)); font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; }
  .pl-search-input:focus { border-color: var(--red-primary, #FF1A1A); box-shadow: 0 0 0 2px rgba(255,26,26,.18); }
  .pl-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white-bright, #F5F5F5);
    font-size: 16px;
    pointer-events: none;
  }
  .pl-pos { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
  .pl-chip {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    padding: 7px 11px;
    border-radius: 5px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }
  .pl-chip:hover { color: var(--white-bright, #F5F5F5); border-color: var(--accent, #FF2D2D); }
  .pl-chip.is-active {
    color: var(--white-bright, #F5F5F5);
    background: linear-gradient(135deg, rgba(255,26,26,.16), rgba(255,45,45,.04));
    border-color: var(--red-primary, #FF1A1A);
    box-shadow: inset 0 0 0 1px rgba(255,26,26,.42), 0 0 12px rgba(255,26,26,.18);
  }
  .pl-sort {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
  }
  .pl-sort-lbl {
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    font-weight: 700;
  }
  .pl-sort-select {
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    color: var(--white-bright, #F5F5F5);
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    padding: 7px 10px;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
  }
  .pl-sort-select:focus { border-color: var(--red-primary, #FF1A1A); }
  .pl-meta {
    display: flex;
    gap: 14px;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    color: var(--white-bright, #F5F5F5);
  }
  .pl-meta-source { color: var(--white-bright, #F5F5F5); margin-left: auto; }
  /* The true roster total ("4,821 players") is the headline of this row — size
     it up in the numeral face + accent so it reads instantly, before any scroll,
     instead of blending into the mono meta line. */
  .pl-count-num {
    font-family: var(--f-numeral, var(--f-display));
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: var(--accent, #FF2D2D);
    letter-spacing: .02em;
    margin-right: 3px;
  }

  /* ============ LEADER STRIP ============ */
  .row-pl-leaders { display: grid; grid-template-columns: 1fr; }
  .sn--c_leaders { padding-bottom: 18px; }
  .pl-leaders-foot { font-family: var(--f-mono); font-size: 16px; letter-spacing: .12em; color: var(--white-bright, #F5F5F5); }
  .leader-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 16px 8px;
  }
  .leader-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 12px;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    min-height: 156px;
  }
  .leader-card:hover { transform: translateY(-3px); border-color: var(--red-primary, #FF1A1A); box-shadow: 0 6px 22px rgba(255,26,26,.28); }
  .leader-pos {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    padding: 3px 8px;
    border-radius: 3px;
    align-self: flex-start;
  }
  .leader-pos.pos-qb { background: #b3261e; }
  .leader-pos.pos-rb { background: #1f6fcd; }
  .leader-pos.pos-wr { background: #2e7d57; }
  .leader-pos.pos-te { background: #6b3fa0; }
  .leader-pos.pos-k { background: var(--accent, #FF2D2D); color: var(--white-bright, #F5F5F5); }
  .leader-pos.pos-def { background: var(--gray-border, #2A2A2A); }
  .leader-name {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 19px;
    line-height: 1.05;
    letter-spacing: .02em;
    color: var(--white-bright, #F5F5F5);
    text-transform: uppercase;
  }
  .leader-school {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  /* legibility sweep 2026-06-05: school/team links hug their text so the
     click target matches the writing (was a full-column-width hit box). */
  .leader-school.team-link,
  .pl-card-school.team-link {
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    justify-self: start;
  }
  .leader-ppg {
    margin-top: auto;
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 30px;
    line-height: 1;
    color: var(--white-bright, #F5F5F5);
    letter-spacing: .02em;
  }
  .leader-ppg-unit { font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; color: var(--text-muted, var(--gray-light,#C2C2C2)); font-weight: 700; }

  /* ============ BROWSE GRID ============ */
  .row-pl-grid { display: grid; grid-template-columns: 1fr; }
  .sn--c_browse { padding-bottom: 6px; }
  .pl-paging { font-family: var(--f-mono); font-size: 16px; letter-spacing: .12em; color: var(--text-muted, var(--gray-light,#C2C2C2)); }

  /* --- player-tile grid: 5-col desktop / 3 tablet / 2 mobile --- */
  .pl-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 4px 16px 12px;
  }

  /* === PLAYER-TILE (concept-art redesign, D42) ===
     Dense browse card: circular red-ring avatar at top, name, school,
     position chip + primary stat (PPG) below. Consistent height via flex.
     school-color gradient applied at runtime via applySchoolColor(). */
  .pl-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px 12px;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    min-height: 168px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .pl-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent, #FF2D2D);
    box-shadow: 0 6px 22px rgba(255,45,45,.28);
  }

  /* Circular avatar with red ring */
  .pl-card-img-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }
  .pl-card-img-wrap::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--accent, #FF2D2D);
    z-index: 0;
  }
  .pl-card-img {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--black-card, #0A0A0A);
    border: 2px solid var(--black-soft, #111);
    display: block;
  }

  /* Body below the avatar */
  .pl-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 0;
    width: 100%;
  }
  .pl-card-head { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; min-width: 0; }
  .pl-card-pos {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .12em;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--white-bright, #F5F5F5);
  }
  .pl-card-pos.pos-qb { background: #b3261e; }
  .pl-card-pos.pos-rb { background: #1f6fcd; }
  .pl-card-pos.pos-wr { background: #2e7d57; }
  .pl-card-pos.pos-te { background: #6b3fa0; }
  .pl-card-pos.pos-k { background: var(--accent, #FF2D2D); color: var(--white-bright, #F5F5F5); }
  .pl-card-pos.pos-def { background: var(--gray-border, #2A2A2A); }
  .pl-card-pos.pos-other { background: var(--gray-border, #2A2A2A); color: var(--text-muted, var(--gray-light,#C2C2C2)); }
  .pl-card-name {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 16px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--white-bright, #F5F5F5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;             /* flex item must shrink so its ellipsis engages (RED->GREEN verified live) */
  }
  .pl-card-school {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .pl-card-stats {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .08em;
    justify-content: center;
  }
  .pl-card-stats .stat-val { color: var(--text-primary, #F5F5F5); font-weight: 700; }
  .pl-card-stats .stat-lbl { color: var(--text-muted, var(--gray-light,#C2C2C2)); margin-left: 2px; }

  /* Pager */
  .pl-pager {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid rgba(42,42,42,.5);
  }
  .pl-pg-btn {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    padding: 7px 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
  }
  .pl-pg-btn:hover { border-color: var(--red-primary, #FF1A1A); }
  .pl-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
  .pl-pg-info { font-family: var(--f-mono); font-size: 16px; letter-spacing: .12em; color: var(--text-muted, var(--gray-light,#C2C2C2)); }

  .pl-empty {
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  .pl-empty-title { font-family: var(--f-display, "Graduate", sans-serif); font-size: 22px; color: var(--white-bright, #F5F5F5); letter-spacing: .04em; }
  .pl-empty-sub { font-family: var(--f-body, "Inter", sans-serif); font-size: 16px; color: var(--text-muted, var(--gray-light,#C2C2C2)); }

  /* ============ MODAL ============ */
  /* Q-EXP-5 (D-EXPCARD-0716 §2b): restyled-in-place to the shared quick-look
     visual contract (assets/exp-card.css tokens). Native <dialog> + all
     open/close behavior untouched — CSS only. */
  .pl-modal {
    background: var(--bg-surface, #0A0A0A);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 12px;
    color: var(--white-bright, #F5F5F5);
    width: min(760px, 92vw);
    max-width: none;
    max-height: 86vh;
    padding: 28px;
    box-shadow: 0 16px 56px rgba(0,0,0,.75);
    overflow: hidden;               /* .pl-modal-body is the scroll region */
  }
  .pl-modal[open] { display: flex; flex-direction: column; }
  .pl-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .pl-modal::backdrop { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .pl-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,0,0,.15);
    border: 1px solid rgba(255,0,0,.5);
    border-radius: 8px;
    color: var(--white-bright, #F5F5F5);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  .pl-modal-close:hover { background: rgba(255,0,0,.35); color: var(--white-bright, #F5F5F5); }
  @media (max-width: 880px) {
    .pl-modal {
      width: min(92vw, 420px);
      max-height: 78dvh;
      border-radius: 16px;
      padding: 24px 18px 18px;
    }
  }
  .pl-modal-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; padding-right: 48px; }
  .pl-modal-img { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.06); object-fit: cover; }
  .pl-modal-meta { display: flex; flex-direction: column; gap: 2px; }
  .pl-modal-name { font-family: var(--f-display, "Graduate", sans-serif); font-size: 26px; letter-spacing: .02em; line-height: 1; }
  .pl-modal-school { font-family: var(--f-body, "Inter", sans-serif); font-size: 16px; color: var(--text-muted, var(--gray-light,#C2C2C2)); }
  .pl-modal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pl-modal-stat { background: var(--black-soft, #111); border: 1px solid var(--gray-border, #2A2A2A); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
  .pl-modal-stat-lbl { font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; color: var(--white-bright, #F5F5F5); font-weight: 700; }
  .pl-modal-stat-val { font-family: var(--f-display, "Graduate", sans-serif); font-size: 22px; }
  /* 2026 projection engine — draft-relevant detail block below the stat tiles */
  .pl-modal-projhdr { margin-top: 14px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-light, #8A8A8A); }
  .pl-modal-proj { margin-top: 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 520px) { .pl-modal-proj { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pl-modal-row { margin-top: 12px; font-family: var(--f-body, "Inter", sans-serif); font-size: 16px; color: var(--text-muted, var(--gray-light,#C2C2C2)); }
  .pl-modal-row strong { color: var(--white-bright, #F5F5F5); font-weight: 600; }

  /* ============ RESPONSIVE ============ */
  /* pl-grid: 5 desktop → 3 tablet → 2 mobile */
  @media (max-width: 1180px) {
    .pl-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .pl-sort { justify-content: flex-start; }
    .leader-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* BUG-FIX: in column-flex .pl-bar, flex-basis applies to HEIGHT not width.
       flex:1 1 240px was giving .pl-search a 240px min-height, creating a ~180px
       empty gap below the input and leaving the abs-positioned icon floating at
       the vertical midpoint of that inflated div (orphan magnifier). Reset to
       auto so the container hugs its content. min-width:0 lets stretch handle
       the full-width sizing; max-width:100% prevents any inline overflow. */
    .pl-search { flex: 0 0 auto; min-width: 0; max-width: 100%; width: 100%; }
  }
  @media (max-width: 720px) {
    .leader-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 12px 8px; }
    .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 12px 8px; }
    .pl-meta { flex-direction: column; gap: 4px; }
    .pl-meta-source { margin-left: 0; }
    .pl-pos { overflow-x: auto; flex-wrap: nowrap; min-width: 0; width: 100%; }
    .pl-sort { flex-wrap: wrap; min-width: 0; }
    .pl-chip { flex-shrink: 0; }
    /* AUD-38 (was BUG-FIX): "ALL PLAYERS" card-title used to word-break mid-word
       at narrow widths because overflow-wrap:break-word (global) fired when flex
       squeezed the title against the SHOWING x OF y paging label, then got
       papered over with an ellipsis truncation on the section title itself
       (read as unfinished per SITE-AUDIT-2026-07-02 /players P3). Fix: stack the
       paging label onto its own line below the title instead, so the title
       renders in full and un-truncated. */
    .row-pl-grid .card-head { flex-wrap: wrap; }
    .row-pl-grid .card-title { white-space: nowrap; overflow: visible; text-overflow: clip;
                  flex: 1 1 auto; min-width: 0; font-size: clamp(16px, 4.5vw, 26px); }
    .row-pl-grid .pl-paging { flex: 0 0 100%; order: 3; margin-top: 2px; }
  }
  @media (max-width: 360px) {
    .leader-row { grid-template-columns: 1fr; }
    .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-pager { gap: 8px; padding: 10px 12px; }
    .pl-pg-info { font-size: 16px; }
  }

  /* player action buttons in modal (v1 2026-05-18) */
  .pl-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-border, #2A2A2A);
  }
  /* #684: concise 3-action row (Favorites / Watchlist / Season Stats) */
  .pl-modal-actions--3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 480px) { .pl-modal-actions--3 { grid-template-columns: 1fr; } }
  /* "Season Stats" is an <a>, not a <button> — keep it visually identical and
     centered, and drop the underline anchors normally get. */
  a.pl-act-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  /* pl-act-btn → the canonical .btn system (Phase C8): 44px tap target, the
     shared neutral/secondary treatment. Rendered by the shared
     assets/player-actions.js helper (also used on /player), so it's brought
     onto the system route-scoped here rather than by re-classing the shared
     markup — /player keeps its own player-detail.css treatment untouched. */
  .pl-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--sns-touch-target, 44px);
    padding: 10px 12px;
    font-family: var(--f-mono, monospace);
    font-size: 16px;
    letter-spacing: .10em;
    font-weight: 700;
    color: var(--white-bright, #F5F5F5);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    text-align: center;
  }
  .pl-act-btn:hover { border-color: var(--red-primary, #FF1A1A); background: rgba(255,26,26,.10); }
  .pl-act-btn:active { transform: scale(.97); }
  .pl-act-btn.is-active { border-color: var(--accent, #FF2D2D); color: var(--white-bright, #F5F5F5); background: rgba(255,45,45,.08); }
  /* SNS Toast */
  .sns-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(20,20,20,.96);
    color: var(--white-bright, #F5F5F5);
    font-family: var(--f-mono, monospace);
    font-size: 16px;
    letter-spacing: .10em;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--red-primary, #FF1A1A);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 9999;
    white-space: nowrap;
  }
  .sns-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ── Mobile tap-target compliance (wave-3, ≤880px). Primary controls only;
     dense inline .pl-card-school/.leader-school links stay small by design —
     HIG exempts inline cell links; their parent rows are already ≥44px. ── */
  @media (max-width: 880px) {
    .pl-chip { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .pl-search-input { min-height: 44px; }
    .pl-sort-select { min-height: 44px; }
  }

  /* ============ SCHOOL-COLOR CARD THEME (feat/player-card-colors, 2026-05-26) ============
     Applied inline by script.js applySchoolColor(): card root gets
     --card-text + --card-text-mute CSS vars, a gradient background,
     a contrast-aware border, and the .is-school-colored class. */
  .leader-card.is-school-colored,
  .pl-card.is-school-colored { border-width: 1px; }
  .leader-card.is-school-colored:hover,
  .pl-card.is-school-colored:hover {
    filter: brightness(1.07) saturate(1.05);
    box-shadow: 0 8px 26px rgba(0,0,0,.45);
  }
  .pl-card.is-school-colored .pl-card-name,
  .leader-card.is-school-colored .leader-name {
    color: var(--card-text, #fff);
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
  }
  .pl-card.is-school-colored .pl-card-school,
  .pl-card.is-school-colored .pl-card-school.team-link,
  .leader-card.is-school-colored .leader-school,
  .leader-card.is-school-colored .leader-school.team-link {
    color: var(--card-text-mute, rgba(255,255,255,.74));
  }
  .pl-card.is-school-colored .pl-card-school.team-link:hover,
  .leader-card.is-school-colored .leader-school.team-link:hover {
    color: var(--card-text, #fff);
    text-decoration: underline;
  }
  .pl-card.is-school-colored .pl-card-stats .stat-val,
  .leader-card.is-school-colored .leader-ppg {
    color: var(--card-text, #fff);
  }
  .pl-card.is-school-colored .pl-card-stats .stat-lbl,
  .leader-card.is-school-colored .leader-ppg-unit {
    color: var(--card-text-mute, rgba(255,255,255,.74));
  }
  .pl-card.is-school-colored .pl-card-img {
    background: rgba(255,255,255,.16);
    box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.18);
  }
  /* Position pills get a contrast ring so they read on any school color */
  .pl-card.is-school-colored .pl-card-pos,
  .leader-card.is-school-colored .leader-pos {
    box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.22);
  }
}
}

/* ─── ADD TO ROSTER (walk-on) — player modal (2026-07-21) ──────────────────
   Pat: "The players page should allow you to add players if they are
   available / meet the criteria to being in a league. this should be where
   walk on directs you to."
   Rendered by players/add-to-league.js beneath the fav/watch/stats row. */
.pl-add-wrap{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--gray-border,#2A2A2A);
  display:grid;
  gap:6px;
}
.pl-add-row{
  display:flex;
  gap:8px;
  align-items:stretch;
}
.pl-add-row .pl-add-btn{
  flex:1 1 auto;
  min-height:40px;
}
.pl-add-select{
  flex:1 1 auto;
  min-height:40px;
  padding:0 10px;
  background:var(--black-soft,#111);
  color:var(--white-bright,#F5F5F5);
  border:1px solid var(--gray-border,#2A2A2A);
  border-radius:6px;
  font-family:var(--f-mono,ui-monospace,monospace);
  /* 16px is also what stops iOS zooming the viewport on focus. */
  font-size:16px;
}
.pl-add-btn.is-disabled,
.pl-add-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.pl-add-btn.is-active{
  border-color:var(--green-positive,#3DBA6E);
  color:var(--green-positive,#3DBA6E);
}
.pl-add-note{
  margin:0;
  font-family:var(--f-mono,ui-monospace,monospace);
  letter-spacing:.06em;
  color:var(--text-muted,#C2C2C2);
  line-height:1.45;
}
.pl-add-note.is-err{ color:var(--red-bright,#FF3B30); }
.pl-add-link{ color:var(--red-bright,#FF3B30); text-decoration:underline; }
.pl-add-change{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:var(--red-bright,#FF3B30);
  text-decoration:underline;
  cursor:pointer;
}