/* ---------------------------------------------------------------------------
   Club page (src/club_view.js). In the room (src/room.css): the club's own
   locker room behind it, its colours on every title bar, windows for its
   roster, depth chart, schedule, leaders and books. The roster and schedule
   rows are the same as your own (src/teamlife.css tp-). Every class of its
   own is cp-. Solid colour only, no emoji, no left-edge stripes, nothing at
   regular weight. Logos 32/64, faces 32/36.
--------------------------------------------------------------------------- */
.cp .disp { font-family: var(--disp); font-weight: 400; letter-spacing: 0.5px; line-height: 1; }
.cp img.cp-logo { image-rendering: pixelated; flex: none; display: block; }
.cp img.cp-l32 { width: 32px; height: 32px; }
.cp img.cp-l64 { width: 64px; height: 64px; }
.cp-body { display: grid; gap: 22px; min-width: 0; }
.cp-note { margin-top: 10px; }

/* --- the club's window ------------------------------------------------------------ */
.cp-hd { display: flex; align-items: center; gap: 16px; min-width: 0; margin-bottom: 12px; flex-wrap: wrap; }
.cp .cp-lgbox { width: 84px; height: 84px; }
.cp .cp-lgbox img { width: 64px; height: 64px; }
.cp-id { display: grid; gap: 8px; flex: 1; min-width: 220px; }
.cp-recrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-rec { font-size: 64px; line-height: .85; color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.cp-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font: 800 13.5px/1.3 var(--sans); }
.cp-tabs { margin-bottom: 0; }

/* --- the roster: sortable heads ---------------------------------------------------- */
.cp-table th[data-cpsort] { cursor: pointer; user-select: none; }
.cp-table th[data-cpsort]:hover, .cp-table th.on { color: #fff; }
a.cp-plink { font: 400 21px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; color: #fff; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.cp-plink:hover { color: var(--gold); }
/* in the room's tables the rows are white cards: the name takes the row's
   ink (it was white on white, only seen on the hovered row) */
.rm-tbl a.cp-plink, .rm-tbl a.cp-plink:hover { color: inherit; }
.rm-tbl a.cp-plink:hover { text-decoration: underline; }
.cp-table td.tp-exp { font: 400 20px/1 var(--disp); letter-spacing: .4px; }
/* no Status column here: his tags show under his name (the position only on a phone) */
.cp-table.tp-rt .tp-tags { display: flex; }
@media (min-width: 761px) { .cp-table.tp-rt .tp-tags .rm-bd.white { display: none; } }

/* --- depth chart: a tile a spot ------------------------------------------------------ */
.cp-dcol { gap: 4px; }
.cp-slot { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 3px; padding: 6px 10px 6px 30px;
  background: var(--card); color: var(--card-ink); text-decoration: none; box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
a.cp-slot:hover { background: var(--card-hov); color: var(--card-ink); }
.cp-slot.open { padding-left: 10px; background: var(--win); }
.cp-slotn { width: 44px; justify-content: center; flex: none; }
.cp-nof { background: var(--ink-2); }
.cp-slotp { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cp-slotp b { font: 400 19px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-slotp span { font: 800 11px/1.2 var(--sans); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-slot.open .cp-slotp b { color: var(--violet); }

/* --- leaders -------------------------------------------------------------------------- */
.cp-lead { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 3px; padding: 6px 10px 6px 30px;
  background: var(--card); color: var(--card-ink); text-decoration: none; box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.cp-lead:hover { background: var(--card-hov); color: var(--card-ink); }
.cp-rank { width: 20px; flex: none; font-size: 26px; text-align: center; color: var(--gold); }

/* --- the books ---------------------------------------------------------------------- */
.cp-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cp-tiles > .cp-tile.good { background: var(--green); }
.cp-tiles > .cp-tile.bad { background: var(--red); }
.cp-tiles > .cp-tile.good span, .cp-tiles > .cp-tile.bad span { color: #fff; }
.cp-ct td.cp-m { font: 400 21px/1 var(--disp); letter-spacing: .4px; white-space: nowrap; }
.cp-ct td.cp-hit { color: var(--gold); }
.cp-ct .tp-tags { display: flex; }

/* the club name on a box score is a door to the club page */
a.bx-nick { color: inherit; text-decoration: none; }
a.bx-nick:hover { text-decoration: underline; }
/* club names on the league pages */
a.cp-tlink { color: inherit; text-decoration: none; font-weight: inherit; }
a.cp-tlink:hover { text-decoration: underline; }
.cp-tgo { cursor: pointer; }
.cp-tgo:hover { text-decoration: underline; }

/* --- phones ---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .cp-tiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}
@media (max-width: 760px) {
  .cp-rec { font-size: 48px; }
  .cp .cp-lgbox { width: 72px; height: 72px; }
  .cp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the top contracts: each row a small card */
  .cp-ct, .cp-ct tbody { display: block; }
  .cp-ct thead { display: none; }
  .cp-ct tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; background: var(--card); border-top: 3px solid var(--ink); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
  .cp-ct tbody tr:first-child { border-top: 0; }
  .cp-ct tbody tr:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
  .cp-ct tbody td, .cp-ct tbody tr:nth-child(even) td, .cp-ct tbody tr.hov:hover td { background: none; border: 0; padding: 4px 10px 8px; text-align: left; }
  .cp-ct td.tp-name { grid-column: 1 / 4; padding-top: 10px; }
  .cp-ct td.cp-o { grid-column: 4; padding-top: 10px; }
  .cp-ct td.cp-ty { grid-column: 1 / -1; }
  .cp-ct td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px;
    font: 900 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
  .cp-ct td.cp-ty::before { display: none; }
}

/* --- League › Clubs: every club on one page ------------------------------------------ */
.cp-ix-divs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.cp-ix-div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.cp-ix-div .rm-sec { margin-bottom: 4px; }
.cp-ix-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  margin: 3px; padding: 4px 10px 4px 30px; text-decoration: none; min-width: 0;
  background: var(--tm); color: var(--on-tm); box-shadow: var(--frame); }
.cp-ix-tile:hover { box-shadow: var(--frame), inset 0 0 0 3px var(--gold); }
.cp-ix-tile .rm-crest { width: 40px; height: 40px; box-shadow: var(--frame-2); }
.cp-ix-nm { display: grid; gap: 2px; min-width: 0; line-height: 1.1; }
.cp-ix-nm b { font: 900 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-ix-nm i { font: 400 23px/1 var(--disp); font-style: normal; letter-spacing: .4px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-ix-rec { font-size: 24px; text-shadow: 2px 2px 0 var(--tm-sh); }
.cp-ix-tile.me { box-shadow: var(--frame), inset 0 0 0 3px var(--gold); }
.cp-ix-you { position: absolute; top: -10px; right: 8px; }
@media (max-width: 1360px) and (min-width: 1101px) { .cp-ix-divs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cp-ix-divs { grid-template-columns: minmax(0, 1fr); } }