/*
 * Players page: rules for pages with <body class="p-players">. Shared rules are in sfp.css.
 * On a phone only Player, Mgr, £m and Pts show (the position and club sit under the name).
 * From 640px wide Pos and Club get their own columns; from 1000px FP/G and Ros % join them.
 */
.p-players a:focus-visible, .p-players button:focus-visible, .p-players input:focus-visible, .p-players select:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 8px;
}
.p-players .pl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 0 4px; }
.p-players .pl-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .01em; }
.p-players .pl-upd { margin: 0; font-size: 12.5px; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.p-players .section > .sub { margin: -6px 4px 0; font-size: 13px; color: var(--ink-faint); line-height: 1.4; }
.p-players .tbl-key { margin: 0 4px; font-size: 12px; color: var(--ink-faint); }
.p-players .table-card { padding: 12px 10px 10px; }

/* ---------- search box and "per page" (shown by players.js) ---------- */
.p-players .pl-tools { display: flex; flex-direction: column-reverse; gap: 10px; margin: 0 2px 12px; }
.p-players .pl-tools[hidden] { display: none; }
.p-players .pl-search { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.p-players .pl-search span { flex: none; }
.p-players .pl-search input { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: #fff; background: rgba(0,0,40,.4); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 10px; }
.p-players .pl-search input::placeholder { color: var(--ink-faint); }
.p-players .pl-size { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.p-players .pl-size select { font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: rgba(0,0,40,.4); border: 1px solid var(--card-border); border-radius: 8px; padding: 6px 8px; }
.p-players .pl-size select option { color: #000; }

/* ---------- the table ---------- */
.p-players table.plist { width: 100%; border-collapse: collapse; font-size: 16px; font-family: "Sofia Sans Extra Condensed", "Saira Semi Condensed", sans-serif; }
.p-players table.plist th { font-size: 13px; font-weight: 500; color: var(--ink-faint); text-align: right; padding: 4px 6px 7px; white-space: nowrap; }
.p-players table.plist td { padding: 8px 6px 7px; text-align: right; border-top: 1px solid rgba(255,255,255,.08); vertical-align: middle; }
.p-players table.plist th:first-child, .p-players table.plist td.pn { text-align: left; }
.p-players table.plist th:nth-child(4) { text-align: left; }
.p-players table.plist .pn-st { color: var(--accent-2); opacity: .85; }
.p-players table.plist td.mg { text-align: left; }
.p-players table.plist td.pn { font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; }
.p-players table.plist .pn-name { display: block; }
.p-players table.plist .pn-sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); letter-spacing: .03em; }
.p-players table.plist td.mg { color: var(--ink-soft); }
.p-players table.plist td.mg a { color: inherit; text-decoration: none; }
.p-players table.plist td.mg.is-pool { color: var(--accent-2); font-style: italic; }
.p-players table.plist td.dim { color: var(--ink-soft); }
.p-players table.plist td.pts { font-weight: 700; font-size: 18px; color: var(--accent); }
.p-players table.plist tr.me td { background: rgba(242,44,247,.15); }
.p-players table.plist tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.p-players table.plist tr[hidden] { display: none; }
@media (hover: hover) {
  .p-players table.plist td.mg a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* sort buttons (made by players.js) */
.p-players table.plist .sort { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.p-players table.plist th:first-child .sort, .p-players table.plist th:nth-child(4) .sort { text-align: left; }
.p-players table.plist .sort-i { display: inline-block; width: 0; height: 0; margin-left: 4px; border: 4px solid transparent; opacity: 0; }
.p-players table.plist th[aria-sort="ascending"] .sort-i { border-top-width: 0; border-bottom-color: currentColor; opacity: 1; }
.p-players table.plist th[aria-sort="descending"] .sort-i { border-bottom-width: 0; border-top-color: currentColor; opacity: 1; }
.p-players table.plist th[aria-sort] { color: var(--ink); }

/* columns that only appear on wider screens */
.p-players .x-sm, .p-players .x-lg { display: none; }

/* ---------- page buttons ---------- */
.p-players .pl-none { margin: 14px 4px 6px; font-size: 14px; color: var(--ink-soft); }
.p-players .pl-none[hidden] { display: none; }
.p-players .pl-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 2px 0; }
.p-players .pl-pager[hidden] { display: none; }
.p-players .pl-count { margin: 0; font-size: 13px; color: var(--ink-faint); }
.p-players .pl-btns { display: flex; gap: 8px; }
.p-players .pl-btns .btn { padding: 7px 14px; }
.p-players .pl-btns .btn:disabled { opacity: .4; cursor: default; }

@media (min-width: 640px) {
  .p-players .x-sm { display: table-cell; }
  .p-players table.plist .pn-sub { display: none; }
  .p-players table.plist { font-size: 16px; }
  .p-players table.plist th, .p-players table.plist td { padding-left: 4px; padding-right: 4px; }
  .p-players table.plist th:first-child, .p-players table.plist td.pn { padding-left: 6px; }
  .p-players table.plist { font-size: 17px; }
  .p-players .pl-tools { flex-direction: row; align-items: center; justify-content: space-between; }
  .p-players .pl-search { flex: 0 1 340px; }
}
@media (min-width: 1000px) {
  .p-players .x-lg { display: table-cell; }
  .p-players .page { max-width: 1180px; padding: 28px var(--page-pad) 64px; }
  .p-players .section > .sub { font-size: 14px; }
  .p-players table.plist { font-size: 18px; }
  .p-players table.plist th { font-size: 14px; }
  .p-players table.plist td { padding: 9px 10px 8px; }
  .p-players table.plist td.pts { font-size: 20px; }
}
@media (min-width: 1500px) {
  .p-players .page { max-width: 1320px; }
}