/*
 * 図鑑「ポケモン一覧」タブ(js/pokemonList.js)専用のスタイル。
 * 行の骨格はcss/pokemonProgress.cssの.progress-rowに近いが、ラベル選択の代わりに
 * 実データ(スピード・食材ABC・食材確率・メインスキル・スキル確率・実装日)を
 * 2行目に並べる構成にしている。
 */

.pokemon-list-tool{ padding:12px 0 0; }

/* とくい(.be-filters)/タイプ(.be-types)/食材(.filter-chips.is-icon-row)の
   絞り込み3行に、名前検索(タイプの行の右側)を挟む。 */
[data-pklist-specialty]{ margin-bottom:8px; }
[data-pklist-ingredient]{ margin-bottom:8px; }
.pklist-type-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.pklist-type-row .be-types{
  flex:1 1 auto;
  min-width:0;
}
.pklist-search-wrap{
  display:flex;
  align-items:center;
  gap:6px;
  flex:none;
}
.pklist-search{
  width:9em;
  min-width:0;
  font:inherit;
  font-size:var(--fs-sm);
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}
.pklist-count{
  flex:none;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ---- 並び替え。チップで並び替えキーを選び、右端のボタンで昇順/降順を切り替える。
   キーを変えたときは、そのキーにとって自然な既定方向(js側のSORT_OPTIONS.defaultOrder)に
   戻す(食材確率・スキル確率・実装日は高い/新しい方から、番号・スピードは小さい方から)。 ---- */
.pklist-sort-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.pklist-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  overflow:hidden;
}

.pklist-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.pklist-row:last-child{ border-bottom:none; }
.pklist-row:hover,
.pklist-row:focus-visible{
  background:var(--paper-dim);
  outline:2px solid var(--line);
  outline-offset:-2px;
}

.pklist-row-head{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.pklist-dexno{
  flex:none;
  width:40px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.pklist-icon{
  width:32px;
  height:32px;
  object-fit:contain;
  flex:none;
}
.pklist-name-wrap{
  flex:1 1 auto;
  min-width:0;
}
.pklist-name-line{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.pklist-type-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  flex:none;
}
.pklist-name{
  flex:1 1 auto;
  min-width:0;
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pklist-specialty-badge{
  flex:none;
  padding:2px 8px;
  border-radius:999px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}

/* ---- 2行目: スピード・食材ABC・食材確率・メインスキル・スキル確率・実装日。
   1行目のdexNo(40px)+アイコン(32px)+gap(8px)ぶんだけ字下げして名前と縦に揃える。 ---- */
.pklist-stats{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  padding-left:80px;
}
.pklist-stat{
  flex:none;
  font-size:var(--fs-2xs);
  font-weight:400;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  white-space:nowrap;
}
.pklist-stat-break{ display:none; }
/* 幅が足りず2行目が折り返す画面幅では、食材確率の直後で必ず改行する
   (flex-basis:100%の空アイテムで折り返し位置を固定する定番手法)。 */
@media (max-width:640px){
  .pklist-stat-break{
    display:block;
    flex-basis:100%;
    width:0;
    height:0;
  }
}
.pklist-ing-meta{
  display:flex;
  align-items:center;
  gap:4px;
  flex:none;
}
.pklist-ing-chip{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.pklist-ing-chip img{
  width:16px;
  height:16px;
  object-fit:contain;
}
.pklist-ing-all{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.pklist-skill-badge{
  flex:none;
  padding:2px 6px;
  border-radius:999px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}
.pklist-sleep-badge{
  flex:none;
  padding:2px 8px;
  border-radius:999px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}
.pklist-sleep-badge[data-sleep-type="うとうと"]{ background:var(--sleep-dozing-cell); }
.pklist-sleep-badge[data-sleep-type="すやすや"]{ background:var(--sleep-snoozing-cell); }
.pklist-sleep-badge[data-sleep-type="ぐっすり"]{ background:var(--sleep-slumbering-cell); }