/* players.css
   The filter bar, the player list and its rows.

   Part of the Teleport stylesheet, split by concern. index.html links these
   in source order; keep that order, the cascade depends on it. */

/* ── Filter bar ─────────────────────────────────────────────────────── */
.filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--border-2);
}
.search {
  position: relative; flex: 1; min-width: 200px;
  display: flex; align-items: center;
}
.search svg {
  position: absolute; left: 11px; width: 15px; height: 15px;
  color: var(--label-3); pointer-events: none;
}
.search input {
  width: 100%; padding: 9px 12px 9px 34px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: 13.5px; color: var(--label);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); background: var(--surface); }
.search input::-webkit-search-cancel-button { cursor: pointer; }

.filters-right { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-select {
  width: auto; min-width: 130px; padding: 8px 30px 8px 11px;
  font-size: 12.5px; font-weight: 550; cursor: pointer;
}

/* ── Player list ────────────────────────────────────────────────────── */
.plist { display: flex; flex-direction: column; }

.prow {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-md);
  transition: background 0.13s;
}
.prow:hover { background: var(--surface-2); }
.prow + .prow { box-shadow: inset 0 1px 0 var(--border-2); }
.prow:hover + .prow, .prow:hover { box-shadow: none; }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-light); color: var(--accent-deep);
  font-size: 12.5px; font-weight: 700; letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: center;
}
:root[data-theme="dark"] .avatar { color: var(--accent); }
.avatar--lg { width: 62px; height: 62px; font-size: 21px; border-radius: 18px; }

.prow-main { flex: 1; min-width: 0; }
.prow-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.prow-name { font-size: 14px; font-weight: 620; letter-spacing: -0.01em; }
.prow-pos {
  font-size: 10.5px; font-weight: 750; letter-spacing: 0.03em;
  color: var(--label-2); background: var(--surface-2);
  padding: 1.5px 6px; border-radius: 5px; border: 1px solid var(--border-2);
}
.prow:hover .prow-pos { background: var(--surface); }
.prow-year { font-size: 11.5px; color: var(--label-3); font-weight: 600; }
.prow-sub {
  font-size: 12px; color: var(--label-2); margin-top: 2px;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.prow-team { font-weight: 550; }
.prow-dot { color: var(--label-3); }

.prow-tail { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.prow-grade { display: inline-flex; align-items: center; gap: 4px; }
/* Marks a grade that has moved since it was first filed — the single most useful
   signal on a board, and only knowable because grades are append-only. */
.prow-moved { display: inline-flex; color: var(--label-3); }
.prow-moved svg { width: 13px; height: 13px; }

/* ── Portal probability chip ────────────────────────────────────────── */
.pct-chip {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2.5px 8px; border-radius: var(--r-full); white-space: nowrap; flex-shrink: 0;
  min-width: 42px; text-align: center;
}
.pct-chip--high  { background: var(--accent-light); color: var(--accent-deep); }
:root[data-theme="dark"] .pct-chip--high { color: var(--accent); }
.pct-chip--mid   { background: var(--gold-light);  color: var(--gold);  }
.pct-chip--low   { background: var(--slate-light); color: var(--slate); }
.pct-chip--empty { background: transparent; color: var(--label-3); border: 1px dashed var(--border); }