/* NAK-1390 トレーナーランク。人事評価と同じ平らな表(角丸・カード・ピルなし)。スタイルはこの画面の中だけ */
.tr { --tr-line:#dce1d7; --tr-head:#eef1e9; --tr-ink:#1c231c; --tr-sub:#50594e; --tr-on:#29382e; --tr-off:#e3e7de; --tr-max:#8b761d;
  font-size:13px; line-height:1.55; color:var(--tr-ink); font-variant-numeric:tabular-nums; padding-top:10px; }
.tr-state, .tr-empty { color:var(--tr-sub); padding:18px 0; }
.tr button { font:inherit; color:inherit; cursor:pointer; }
.tr button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tr-bar { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.tr-bar:empty { display:none; }
.tr-pick { display:flex; align-items:center; gap:8px; }
.tr-pick > span { font-size:11px; color:var(--tr-sub); white-space:nowrap; }
.tr-pick .combo { width:200px; }
.tr-pick .combo input { min-height:34px; font-size:13px; font-weight:650; }
.tr-cut { font-size:11px; color:var(--tr-sub); margin:10px 0 8px; }
.tr small { font-size:10px; color:var(--tr-sub); margin-left:1px; font-weight:500; }

/* 一覧 */
.tr-scroll { overflow-x:auto; border-top:1px solid var(--tr-line); }
.tr-table { width:100%; min-width:760px; border-collapse:collapse; }
.tr-table th, .tr-table td, .tr-table tbody tr:last-child td { padding:8px 10px; border-bottom:1px solid var(--tr-line); text-align:left; vertical-align:middle; white-space:nowrap; }
.tr-table thead th { font-size:11px; font-weight:600; color:#43503f; background:var(--tr-head); height:34px; }
.tr-table tbody tr { cursor:pointer; }
.tr-table tbody tr:hover, .tr-table tbody tr:focus-within { background:var(--hover); }
.tr-table tbody th { position:sticky; left:0; background:#fff; z-index:1; }
.tr-table tbody tr:hover th, .tr-table tbody tr:focus-within th { background:var(--hover); }
.tr-name { background:none; border:0; padding:0; font-weight:700; text-align:left; }
.tr-total-cell { text-align:right!important; }
.tr-total-cell b { font-size:17px; }
.tr-ann { text-align:right!important; color:var(--tr-sub); }
.tr-diff { color:var(--danger)!important; font-weight:700; }

/* ★のマス。取れた★を濃く、上限まで取った項目は金 */
.tr-cells { display:inline-flex; gap:2px; vertical-align:middle; }
.tr-cells i { width:9px; height:9px; background:var(--tr-off); display:block; }
.tr-cells i.on { background:var(--tr-on); }
.tr-max .tr-cells i.on { background:var(--tr-max); }

/* 個人 */
.tr-back { background:none; border:0; padding:4px 0; color:var(--accent); font-size:12px; }
.tr-back::before { content:'← '; }
.tr-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:6px 0 10px; border-bottom:1px solid var(--tr-line); }
.tr-head h2 { font-size:22px; margin:0; font-weight:700; display:inline; }
.tr-store { font-size:12px; color:var(--tr-sub); margin-left:10px; }
.tr-total b { font-size:34px; font-weight:700; line-height:1; }
.tr-total span { font-size:13px; color:var(--tr-sub); margin-left:4px; }
.tr-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding:8px 0; }
.tr-meta .tr-cut { margin:0; }
.tr-ann-line { font-size:12px; color:var(--tr-sub); }
.tr-detail { border-top:2px solid var(--tr-ink); }
.tr-row { display:grid; grid-template-columns:minmax(150px,1.3fr) 150px minmax(150px,1.6fr) minmax(110px,1fr) minmax(90px,.8fr); gap:0 14px; align-items:center;
  padding:10px 4px; border-bottom:1px solid var(--tr-line); }
.tr-row-head { font-size:11px; color:#43503f; background:var(--tr-head); padding:7px 4px; font-weight:600; }
.tr-label { font-weight:700; }
.tr-cond { display:block; font-size:10px; font-weight:400; color:var(--tr-sub); }
.tr-stars { display:flex; align-items:center; gap:8px; }
.tr-count { font-size:11px; color:var(--tr-sub); }
.tr-held { font-size:10px; color:var(--tr-sub); border-bottom:1px solid currentColor; }
.tr-cur, .tr-next { font-weight:650; }
.tr-asof { display:block; font-size:10px; font-weight:400; color:var(--tr-sub); }
.tr-rest { color:var(--warn); font-weight:650; }
.tr-quals { list-style:none; margin:0; padding:0; font-weight:400; font-size:12px; }
.tr-quals li { color:var(--tr-sub); }
.tr-quals li.on { color:var(--tr-ink); font-weight:650; }
.tr-quals li.on::before { content:'✓ '; color:var(--ok); }
.tr-missing { grid-column:1 / -1; font-size:11px; color:var(--warn); padding-top:4px; }
.tr-note { font-size:11px; color:var(--tr-sub); margin-top:10px; }

@media (max-width: 700px) {
  .tr-head { align-items:flex-start; flex-direction:column; gap:6px; }
  .tr-row { grid-template-columns:1fr auto; gap:4px 10px; }
  .tr-row-head { display:none; }
  .tr-cur { grid-column:1; }
  .tr-next { grid-column:2; text-align:right; }
  .tr-rest { grid-column:1 / -1; }
  .tr-rest:empty { display:none; }
  .tr-pick .combo { width:min(200px, 60vw); }
}