/* ⚠ КАСКАДНЫЕ СЛОИ: содержимое файла лежит в слое `app` (порядок слоёв — tokens.css).
   Лист страницы игрока /player/{slug} стоит после library.css, components.css и
   charts.css. Разметка — backend/player_pages.py, контракт —
   docs/JOURNEY-PLAYER-PAGE-2026-11-01.md.
   Примитивы общие: шапка `.page-head`, разделы `.page-sec`, ячейки `.cell`,
   группы `.cell-group`, карточки матчей `.matches`/`mc-*` (components.css,
   library.css). Здесь только содержимое страницы. Без рамок, теней, размытия
   и цветных полосок по кромке; разделитель строк списка (1px --line) разрешён
   (DESIGN-SYSTEM §1a). */
@layer app{
/* Размеры страницы: лица 56 (в шапке) и строки списков 56 - не токены, а ритм страницы, поэтому
   локальные переменные в одном месте (как `--adm-*` в админке); колонка выбора ника 260. */
.page-head,.pl-list,.pl-pick{--pl-face:56px;--pl-row:56px;--pl-pick-w:260px}
.pl-face{width:var(--pl-face);height:var(--pl-face);flex:none;border-radius:50%;object-fit:cover;background:var(--surface-selected);
  vertical-align:middle;margin-right:var(--s3)}
.pl-face.is-ph{display:inline-block}
.pl-aliases{margin:var(--s1) 0 0;color:var(--dim)}
.pl-fact{display:inline-flex;align-items:center;gap:var(--s2)}
.pl-fact a{color:var(--text);text-decoration:none}
.pl-fact a:hover{text-decoration:underline}
.pl-lg{width:var(--ic-lg);height:var(--ic-lg);flex:none;object-fit:contain}
.pl-lg.is-ph{display:inline-block;border-radius:50%;background:var(--surface-selected)}

/* форма: восемь ячеек, четыре в ряд, на телефоне две */
.pl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.pl-kpi{display:flex;flex-direction:column;gap:var(--s1)}
/* подпись - эйбрау `.lib-k` над числом, как `.adm-kpi` в админке и KPI на матче */
.pl-kpi b{font-size:var(--fs-sub);line-height:var(--lh-sub);font-variant-numeric:tabular-nums}

/* команды: список периодов; текущая — пилюля с текстом, не цветом */
.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pl-row{position:relative;display:flex;align-items:center;gap:var(--s3);min-height:var(--pl-row);border-top:1px solid var(--line)}
.pl-row:first-child{border-top:0}
.pl-row-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pl-row-n{color:var(--text);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.pl-row-n:hover{text-decoration:underline}
/* цель касания на всю строку (56 >= 44): ссылка растянута псевдоэлементом, высота строки не растёт */
a.pl-row-n::after{content:"";position:absolute;inset:0}
.pl-row-t small{font-size:var(--fs-min);color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.pl-pill{flex:none;padding:0 var(--s2);line-height:var(--ic-lg);border-radius:var(--r);font-size:var(--fs-min);font-weight:800;
  background:var(--surface-selected);color:var(--text)}
.pl-pill.is-now{background:var(--pos-soft);color:var(--pos)}

/* карты и операторы: карты сверху, операторы под ними на всю ширину; Attack и Defense
   одна под другой (шесть колонок рядом в половину ячейки не помещаются), как «Раскладка
   Operators» в Match prep (DESIGN-SYSTEM) */
.pl-use{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap)}
.pl-h3{margin:0 0 var(--s3);font-size:var(--fs-card);font-weight:700}
.pl-t th:nth-child(2),.pl-t td.pl-map{text-align:left}
.pl-opscell .mp-meta{margin-bottom:var(--s3)}
.pl-ops-grid{display:flex;flex-direction:column;gap:var(--s5)}
.pl-ops-col{min-width:0}
.pl-ops-col .grp-h{margin-bottom:var(--s2)}
/* ячейка оператора остаётся table-cell (флекс не слушает text-align, test_stats_table_rank_contract) */
.pl-ops-t td.pl-opn .op-ic{display:inline-block;vertical-align:middle;margin-right:var(--s2)}
.pl-ops-t td.pl-opn b{vertical-align:middle}
.pl-ops-more{margin-top:var(--s3)}
.pl-empty{margin:0;color:var(--muted)}

/* ник у нескольких людей */
.pl-pick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--pl-pick-w),1fr));gap:var(--s2)}
.pl-pick .dir-i{display:flex;align-items:center;gap:var(--s3);min-height:var(--pl-row);padding:var(--s2) var(--s3);
  border-radius:var(--r2);background:var(--surface-control);color:var(--text);text-decoration:none}
.pl-pick .dir-i:hover{background:var(--surface-control-hover)}
.pl-pick .dir-i .pl-face{--pl-face:var(--btn-h-lg);margin:0}
.pl-pick .dir-t{display:flex;flex-direction:column;min-width:0}
.pl-pick .dir-n{font-weight:600}
.pl-pick .dir-m{color:var(--muted)}

@media(max-width:600px){
  .pl-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* операторы карточкой: имя с иконкой на всю ширину, ниже четыре числа с подписью td[data-l],
     ранг скрыт; бокового скролла нет */
  .pl-ops-t{white-space:normal}
  .pl-opscell .table-scroll{overflow:visible}
  .pl-ops-t thead{display:none}
  .pl-ops-t tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);padding:var(--s3) 0}
  .pl-ops-t td{display:flex;flex-direction:column;align-items:flex-start;height:auto;padding:0;text-align:left;background:none}
  .pl-ops-t td:first-child{display:none}   /* ранг */
  .pl-ops-t td.pl-opn{grid-column:1/-1;flex-direction:row;align-items:center}
  .pl-ops-t td.pl-opn .op-ic{flex:none}
  .pl-ops-t td[data-l]::before{content:attr(data-l);font-size:var(--fs-min);color:var(--muted);text-transform:uppercase;letter-spacing:var(--eyebrow-ls)}
  .pl-ops-more{min-height:var(--btn-h-touch)}
  .pl-t .pl-kd,.pl-t .map-th{display:none}   /* без K–D и превью таблица карт помещается в 375 без прокрутки */
  .page-head{--pl-face:var(--btn-h-touch)}
}
} /* @layer app */