/*
 * 図鑑「進捗管理」タブ(js/pokemonProgress.js)専用のスタイル。
 * 一覧は寝顔図鑑(記録)(css/dreamFaceRecord.css)と同じ縦並びの行(.progress-row)。
 */

/* 睡眠タイプの淡い背景色。field-table.html・css/pickupTable.cssと同じ値
   (このファイル単体で完結させるため、ここでも定義する)。 */
:root{
  --sleep-dozing-cell:#FFF7DC;
  --sleep-snoozing-cell:#EAF9F7;
  --sleep-slumbering-cell:#DCEBFA;
}
:root[data-theme="dark"]{
  --sleep-dozing-cell:#39331F;
  --sleep-snoozing-cell:#1D3938;
  --sleep-slumbering-cell:#20354A;
}
:root[data-theme="dark-blue"]{
  --sleep-dozing-cell:#4A3D1E;
  --sleep-snoozing-cell:#1F4550;
  --sleep-slumbering-cell:#26456F;
}

.progress-tool{ padding:12px 0 0; }

/* ---- マップへのリンク・ラベル設定ボタン(field-table.htmlの.field-tool-rowと同じ考え方) ----
   「ラベル設定」はmargin-left:autoで右端に寄せる(マップへのリンクは左のまま)。 */
.progress-tool-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
[data-progress-label-settings]{ margin-left:auto; }
.progress-image-export-status{
  align-self:center;
  min-height:1.4em;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
}
.progress-image-export-status.is-error{ color:var(--danger, #C0392B); }

.progress-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.progress-sort-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.progress-sort-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}
.progress-search{
  flex:1 1 120px;
  min-width:0;
  font:inherit;
  font-size:var(--fs-base);
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}

/* きのみ/食材/スキルの絞り込みは検索ボックスと同じ行の左側に並べる(.progress-toolbar)。 */
[data-progress-specialty-filter]{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  flex:none;
}

/* ---- ラベル絞り込み(折りたたみをやめて常時表示)。件数はチップ自体に
   .progress-filter-countとして添える(別枠の集計行を省いてスペースを節約)。
   先頭の色ドット(.progress-filter-dot)は「未設定」チップには付かない
   (defにcolorが無いため、js側でそもそも生成しない)。 ---- */
[data-progress-filter-label]{ margin-bottom:10px; }
.progress-filter-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:5px;
  vertical-align:middle;
  /* 白のようにチップの地色(paper)と同化する色でも見えるよう、薄い輪郭を添える */
  box-shadow:0 0 0 1px var(--line);
}
.progress-filter-count{
  margin-left:4px;
  font-variant-numeric:tabular-nums;
  opacity:.75;
}

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

/* ---- 左端の縦書きとくい列。同じとくいが続く間は1つの見出しセルにまとめる
   (実DOMは<table>のrowspanではなく、グループごとdivで包んで表現している)。 ---- */
.progress-specialty-group{
  display:flex;
  border-bottom:1px solid var(--line);
}
.progress-specialty-group:last-child{ border-bottom:none; }
.progress-specialty-col{
  flex:none;
  width:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:#fff;
  background:var(--ink-soft);
}
.progress-specialty-rows{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.progress-ingredient-group-header{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px 4px;
  border-bottom:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  font-weight:700;
}
.progress-ingredient-group-header:not(:first-child){
  border-top:6px solid var(--paper);
}
.progress-ingredient-group-header img{
  width:20px;
  height:20px;
  object-fit:contain;
}
/* ---- 行は1本の横並び ----
   アイコン + テキスト(タイプアイコン+名前、その下に補足情報。無ければ無し) +
   ラベル選択(.progress-pill-group)。ラベル選択はmargin-left:autoで、収まる間は
   右端に揃う(名前が短いぶんの余白を吸収する)。既定のラベル数では1行に収まるが、
   追加してはみ出す場合は名前・補足情報を潰さずラベル選択側だけ横スクロールする
   (overflow-x:auto。min-width:0は子のスクロール域が行/ページ全体を
   押し広げないためのガード、css/berryEfficiency.cssの同種コメント参照)。 */
.progress-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  min-width:0;
}
.progress-row:last-child{ border-bottom:none; }
.progress-pokemon-trigger{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 auto;
  min-width:0;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.progress-pokemon-trigger:hover,
.progress-pokemon-trigger:focus-visible{
  background:var(--paper-dim);
  outline:2px solid var(--line);
  outline-offset:2px;
}
.progress-pokemon-trigger .progress-row-text{ flex:1 1 auto; }
.progress-pokemon-detail-trigger{
  cursor:pointer;
}
.progress-pokemon-detail-trigger:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:8px;
}
.progress-row-text{
  /* 縮み方の優先度を.progress-pill-group側だけに与えるため、ここは縮めない
     (flex-shrink:0)。名前が極端に長い場合の保険としてellipsisは.progress-nameに
     残すが、通常はここが縮まないぶんラベル選択側が先にスクロールに切り替わる。 */
  flex:0 0 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.progress-name-line{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.progress-icon{
  width:32px;
  height:32px;
  object-fit:contain;
  flex:none;
}
.progress-type-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  flex:none;
}

.progress-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;
}

/* ---- 表のいちばん上のラベル名見出し。ピルボタンの列幅(30px)に合わせて縦書きにする
   (名前を書く横幅が無いため)。progress-header-spacerでアイコン+名前ぶんの
   幅を確保し、.progress-pill-groupを流用することでピルボタンの列と揃える。
   position:stickyはウインドウ基準(表自体の枠ではなくページをスクロールしても
   画面上部に残る)。上端はタブバー(.tab-bar、position:sticky;top:0;z-index:20)の
   実測の高さ(59px、レイアウト上ほぼ変動しない)ぶん下にずらして重ならないようにする。 ---- */
.progress-header-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:6px 10px 4px;
  position:sticky;
  top:59px;
  z-index:10;
  background:var(--paper-dim);
  /* ラベルを大量に追加した極端なケースでもページ全体が横スクロールしないよう保険 */
  overflow-x:hidden;
}
.progress-header-spacer{ flex:1 1 auto; }
/* .progress-pill-groupを流用しているため、行側だけに要る横スクロール関連の指定
   (flex-shrink・overflow-x・margin-left)をここで打ち消す。 */
.progress-header-row .progress-header-labels{
  flex:none;
  overflow:visible;
  margin-left:0;
}
.progress-header-label{
  width:30px;
  flex:none;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
  text-align:end;
  max-height:88px;
  overflow:hidden;
}

/* ---- 行ごとのラベル入力(ピルボタン、ポップアップなし) ----
   名前を書く余白が無いためicon(短い文字。data/progressLabels.js)だけを表示する
   (フルネームはtitle属性のツールチップ)。非選択時は--label-outlineで縁取り+文字色
   (白のようにpaperと同化する色だけprogressLabelOutlineColor()が中間色に置き換える)、
   選択中は--label-colorで塗りつぶす(文字色は--label-ink。progressLabelTextColor()で
   明るさから自動判定し、白・黄色のような薄い色でも文字が読めるようにする)。
   既定のラベル数では行の右端に揃う(margin-left:autoで名前が短いぶんの余白を吸収)が、
   追加してはみ出す場合はflex-wrapをやめてnowrap+overflow-x:autoで横スクロールにする
   (名前・補足情報を圧迫しないため)。 */
.progress-pill-group{
  display:flex;
  flex-wrap:nowrap;
  gap:4px;
  flex:0 1 auto;
  min-width:44px;
  margin-left:auto;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding-bottom:2px;
}
.progress-pill-btn{
  position:relative;
  flex:none;
  width:30px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  border:1.5px solid var(--label-outline, var(--line));
  border-radius:999px;
  background:var(--paper);
  color:var(--label-outline, var(--ink-soft));
  cursor:pointer;
  /* 白などの薄い色でも縁が見えるよう、常に薄い内側の輪郭を添えておく */
  box-shadow:inset 0 0 0 1px var(--line);
}
.progress-pill-btn:hover{ background:var(--paper-dim); }
.progress-pill-btn.active{
  background:var(--label-color, var(--navy));
  border-color:var(--label-color, var(--navy));
  color:var(--label-ink, #fff);
}
/* 「育成中」ラベルだけ、ピルの右上にアメアイコンを重ねる */
.progress-pill-candy-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  color:var(--label-color, var(--ink-soft));
  background:var(--paper);
  border-radius:50%;
  padding:1px;
}

/* ---- とくいごとの補足表示(§5) ----
   名前(.progress-name、fs-md・太字)より一段控えめに見えるよう、こちらは細字にする。 */
.progress-berry-eff{
  flex:none;
  font-size:var(--fs-2xs);
  font-weight:400;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
  white-space:nowrap;
}
.progress-ing-meta{
  display:flex;
  align-items:center;
  gap:4px;
  flex:none;
}
.progress-ing-chip{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.progress-ing-chip img{
  width:18px;
  height:18px;
  object-fit:contain;
}
.progress-skill-badge{
  flex:none;
  padding:2px 6px;
  border-radius:999px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:#fff;
  white-space:nowrap;
}

/* ---- ラベル設定モーダル ---- */
.progress-label-settings-card{ max-width:560px; }
.progress-label-settings-title{
  margin:0 0 10px;
  font-size:var(--fs-md);
  font-weight:800;
  color:var(--ink);
}
.progress-label-settings-note{
  margin:0 0 10px;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
}
.progress-label-settings-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:60vh;
  overflow-y:auto;
}
.progress-label-settings-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:8px;
}
.progress-label-icon-input{
  width:44px;
  font:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  text-align:center;
  padding:6px 4px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
}
.progress-label-name-input{
  flex:1 1 120px;
  min-width:0;
  font:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
}
.progress-label-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  flex:none;
}
.progress-label-swatch{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid transparent;
  cursor:pointer;
  padding:0;
}
.progress-label-swatch.active{ border-color:var(--ink); }
.progress-label-move-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:none;
}
.progress-label-move,
.progress-label-delete{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:20px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.progress-label-move:disabled{ opacity:.35; cursor:default; }
.progress-label-delete{ height:auto; align-self:stretch; }
.progress-label-settings-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.progress-tier-order-card{ max-width:560px; }
.progress-tier-order-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:60vh;
  overflow-y:auto;
}
.progress-tier-order-row{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:5px 6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper-dim);
}
.progress-tier-order-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:none;
  border-radius:6px;
  font-size:var(--fs-sm);
  font-weight:800;
}
.progress-tier-order-name{
  flex:1 1 auto;
  min-width:0;
  color:var(--ink);
  font-size:var(--fs-sm);
  font-weight:700;
}
.progress-tier-order-move-wrap{
  display:flex;
  gap:3px;
  flex:none;
}
.progress-tier-order-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
.progress-tier-order-save{
  animation:progress-tier-order-save-glow 1.8s ease-in-out infinite;
}
@keyframes progress-tier-order-save-glow{
  0%,100%{ box-shadow:0 0 0 0 transparent; }
  50%{ box-shadow:0 0 14px 3px var(--accent); }
}
@media (prefers-reduced-motion:reduce){
  .progress-tier-order-save{
    animation:none;
    box-shadow:0 0 10px var(--accent);
  }
}

/* ---- ポケモン詳細モーダル ---- */
:root{
  /* 詳細モーダルの重なり順は「親 → 子」で固定する。
     他の共通ポップアップ層(140)を基準にすることで、画面ごとのDOM順に依存しない。 */
  --progress-detail-parent-z:var(--app-popup-z, 140);
  --progress-detail-child-z:calc(var(--progress-detail-parent-z) + 1);
}
#progressPokemonDataModal{ z-index:var(--progress-detail-parent-z); }
.overlay-modal .progress-pokemon-data-card{
  max-width:900px;
  padding:18px;
}
.progress-pokemon-data-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:2px 36px 12px 2px;
  border-bottom:1px solid var(--line);
}
.progress-pokemon-data-icon{
  width:64px;
  height:64px;
  object-fit:contain;
  flex:none;
}
.progress-pokemon-data-title-wrap{ min-width:0; }
.progress-pokemon-data-name-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}
.progress-pokemon-data-title{
  min-width:0;
  flex:0 1 auto;
  margin:0;
  color:var(--ink);
  font-size:var(--fs-lg);
  font-weight:800;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.progress-pokemon-data-type-icon{
  width:20px;
  height:20px;
  object-fit:contain;
  flex:none;
}
.progress-pokemon-data-specialty{
  flex:none;
  padding:2px 8px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:var(--fs-2xs);
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
}
.progress-pokemon-data-specialty[data-specialty="きのみ"]{ color:#3E8E5A; }
.progress-pokemon-data-specialty[data-specialty="食材"]{ color:#C07A18; }
.progress-pokemon-data-specialty[data-specialty="スキル"]{ color:#5A6BC4; }
.progress-pokemon-data-specialty[data-specialty="オール"]{ color:#A0559E; }
:root[data-theme="dark"] .progress-pokemon-data-specialty[data-specialty="きのみ"],
:root[data-theme="dark-blue"] .progress-pokemon-data-specialty[data-specialty="きのみ"]{ color:#6FD59A; }
:root[data-theme="dark"] .progress-pokemon-data-specialty[data-specialty="食材"],
:root[data-theme="dark-blue"] .progress-pokemon-data-specialty[data-specialty="食材"]{ color:#E8B75A; }
:root[data-theme="dark"] .progress-pokemon-data-specialty[data-specialty="スキル"],
:root[data-theme="dark-blue"] .progress-pokemon-data-specialty[data-specialty="スキル"]{ color:#93A6F0; }
:root[data-theme="dark"] .progress-pokemon-data-specialty[data-specialty="オール"],
:root[data-theme="dark-blue"] .progress-pokemon-data-specialty[data-specialty="オール"]{ color:#D08BCE; }
.progress-pokemon-data-sleep-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  color:#000;
  flex:none;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.35));
}
.progress-pokemon-data-sleep-badge[data-sleep-type="うとうと"]{ background:#FFE86A; }
.progress-pokemon-data-sleep-badge[data-sleep-type="すやすや"]{ background:#85FBFF; }
.progress-pokemon-data-sleep-badge[data-sleep-type="ぐっすり"]{ background:#4588FB; }
.progress-pokemon-data-sleep-badge .ui-icon{ width:15px; height:15px; }
.progress-pokemon-data-subtitle{
  margin:3px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.5;
}
.progress-pokemon-data-evolution-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-top:5px;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--navy);
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
  box-shadow:0 1px 0 var(--line);
  white-space:nowrap;
}
.progress-pokemon-data-evolution-trigger:hover{
  background:var(--paper-dim);
  border-color:var(--ink-soft);
}
.progress-pokemon-data-evolution-trigger:active{
  transform:translateY(1px);
  box-shadow:none;
}
.progress-pokemon-data-evolution-trigger:focus-visible{
  outline:2px solid var(--selected-bg);
  outline-offset:1px;
}
.progress-pokemon-data-evolution-trigger .ui-icon{ width:15px; height:15px; }

/* 進化系選択モーダル。詳細モーダルは単独のポケモン一覧・進捗管理ページでも
   使われるため、個体比較ページ専用のcss/individualCompare.cssに依存させない。 */
.progress-pokemon-evolution-modal .modal-card{ max-width:min(94vw, 373px); }
.progress-pokemon-evolution-modal .cmp-otebo-modal-title{
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--ink);
  margin:0 0 10px;
  padding-right:24px;
}
.progress-pokemon-evolution-modal .cmp-evolution-pick-note{
  margin:0 0 10px;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
}
.progress-pokemon-evolution-modal .cmp-evolution-pick-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:54vh;
  overflow-y:auto;
}
.progress-pokemon-evolution-modal .cmp-evolution-pick-row{
  box-sizing:border-box;
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper);
  color:var(--ink-soft);
  text-align:left;
  cursor:pointer;
}
.progress-pokemon-evolution-modal .cmp-evolution-pick-row:hover{ background:var(--paper-dim); }
.progress-pokemon-evolution-modal .cmp-evolution-pick-row:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:1px;
}
.progress-pokemon-evolution-modal .cmp-evolution-pick-row.is-selected{
  border:3px solid var(--selected-strong-border);
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
  font-weight:700;
}
.progress-pokemon-evolution-modal .cmp-evolution-pick-row img{
  width:40px;
  height:40px;
  object-fit:contain;
  flex:none;
}
.progress-pokemon-evolution-modal .cmp-evolution-pick-name{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--fs-xs);
}
.progress-pokemon-evolution-modal .cmp-evolution-pick-stage{
  flex:none;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:500;
  white-space:nowrap;
}
.progress-pokemon-evolution-modal .cmp-evolution-pick-row.is-selected .cmp-evolution-pick-stage{
  color:var(--selected-soft-ink);
}
.progress-detail-section{
  margin-top:16px;
}
.progress-detail-section:first-child{ margin-top:14px; }
.progress-detail-section-title{
  margin:0 0 8px;
  color:var(--navy);
  font-size:var(--fs-md);
  font-weight:800;
}
.progress-detail-section-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  padding:0 0 8px;
  border:0;
  background:transparent;
  color:var(--navy);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.progress-detail-section-toggle::before{
  content:'';
  width:7px;
  height:7px;
  flex:none;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px, -1px);
  transition:transform .16s ease;
}
.progress-detail-section.is-collapsed .progress-detail-section-toggle::before{
  transform:rotate(-45deg) translate(-1px, -1px);
}
.progress-detail-section-toggle:hover{ color:var(--selected-bg); }
.progress-detail-section-toggle:focus-visible{
  outline:2px solid var(--selected-bg);
  outline-offset:2px;
  border-radius:4px;
}
.progress-detail-section-content{ min-width:0; }
.progress-detail-section.is-collapsed .progress-detail-section-content{ display:none; }
.progress-detail-section-persistent + .progress-detail-section-content{ margin-top:8px; }
.progress-detail-stat-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
}
.progress-detail-info-grid{
  display:grid;
  grid-template-columns:minmax(112px, .72fr) minmax(0, 1.28fr);
  gap:7px;
}
.progress-detail-info-card{
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper-dim);
}
.progress-detail-info-card-label{
  display:block;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.35;
}
.progress-detail-info-card-value{
  display:block;
  margin-top:4px;
  color:var(--ink);
  font-size:var(--fs-sm);
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.progress-detail-info-card.progress-detail-skill-rate{
  border-color:color-mix(in srgb, var(--info) 38%, var(--line));
  background:color-mix(in srgb, var(--info) 11%, var(--paper));
}
.progress-detail-info-card.progress-detail-skill-rate .progress-detail-info-card-label,
.progress-detail-info-card.progress-detail-skill-rate .progress-detail-info-card-value{
  color:var(--info);
}
.progress-detail-info-card.progress-detail-ingredient-rate{
  border-color:color-mix(in srgb, var(--warning) 38%, var(--line));
  background:color-mix(in srgb, var(--warning) 11%, var(--paper));
}
.progress-detail-info-card.progress-detail-ingredient-rate .progress-detail-info-card-label,
.progress-detail-info-card.progress-detail-ingredient-rate .progress-detail-info-card-value{
  color:var(--warning);
}
.progress-detail-rate-card{ padding:8px 9px; }
.progress-detail-rate-card .progress-detail-info-card-value{
  flex:1 1 auto;
  min-width:0;
  margin-top:0;
  line-height:1.35;
}
.progress-detail-ingredient-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:stretch;
}
.progress-detail-ingredient-rate{ align-self:start; }
.progress-detail-ingredients-card{
  grid-column:1 / -1;
  overflow:hidden;
}
.progress-detail-ingredients-card .progress-detail-info-card-label{ margin-bottom:7px; }
.progress-detail-ingredients-card .progress-detail-note,
.progress-detail-ingredients-card .progress-detail-empty{ margin-bottom:0; }
.progress-detail-stat{
  min-width:0;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper-dim);
}
#speedRankingModal,
#progressSpeedRankingModal,
#skillDetailModal,
.progress-pokemon-evolution-modal,
.progress-probability-map-modal{
  z-index:var(--progress-detail-child-z);
}
.overlay-modal .progress-speed-ranking-card{
  max-width:min(94vw, 720px);
  max-height:min(92vh, 760px);
  overflow:auto;
}
.progress-speed-ranking-card .search-bar{ margin:0 0 12px; padding:0; max-width:none; }
.progress-speed-ranking-card .be-types{ margin-bottom:10px; }
.overlay-modal .progress-probability-map-card{
  max-width:min(94vw, 920px);
  max-height:min(92vh, 820px);
  padding:18px;
  overflow:auto;
}
.progress-probability-map-title{
  margin:0 32px 10px 0;
  color:var(--navy);
  font-size:var(--fs-md);
  font-weight:800;
}
.progress-probability-map-loading{
  margin:0;
  color:var(--ink-soft);
  font-size:var(--fs-sm);
}
.progress-probability-map-loading[hidden]{ display:none; }
.progress-probability-map-slot .panel-fold{
  max-width:none;
  margin:0;
  padding:0;
}
.progress-probability-map-slot .panel-fold > .fold-summary{ display:none; }
.progress-probability-map-slot .panel-fold > .fold-body{ display:block; padding-top:0; }
.progress-probability-map-slot .chart-card{
  margin:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  position:relative;
}
.progress-probability-map-slot .chart-card svg{ display:block; width:100%; height:auto; }
.progress-probability-map-slot .axis-label{ font-size:var(--fs-xs); fill:var(--ink-soft); }
.progress-probability-map-slot .tick-label{ font-size:var(--fs-2xs); fill:#898781; }
.progress-probability-map-slot .gridline{ stroke:#e1e0d9; stroke-width:1; }
.progress-probability-map-slot .baseline{ stroke:var(--line); stroke-width:1; }
.progress-probability-map-slot .hit{ fill:transparent; cursor:pointer; }
.progress-probability-map-slot .dot-bg{ fill:var(--paper); stroke:var(--line); stroke-width:1; pointer-events:none; }
.progress-probability-map-slot .dot-group:hover .dot-bg,
.progress-probability-map-slot .dot-group:focus .dot-bg,
.progress-probability-map-slot .dot-group.tap-selected .dot-bg{ stroke:var(--navy); stroke-width:2; }
.progress-probability-map-slot .dot-icon{ cursor:pointer; }
.progress-probability-map-slot .dot-ph{
  fill:var(--paper-dim);
  stroke:var(--line);
  stroke-width:1;
  stroke-dasharray:3,2;
  cursor:pointer;
}
.progress-probability-map-slot .tap-ring{
  fill:none;
  stroke:var(--navy);
  stroke-width:2;
  opacity:0;
  pointer-events:none;
}
.progress-probability-map-slot .dot-group.tap-selected .tap-ring{ opacity:1; }
.progress-probability-map-slot .range-box{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-dim);
}
.progress-probability-map-slot .range-box-head,
.progress-probability-map-slot .range-row,
.progress-probability-map-slot .range-nums{
  display:flex;
  align-items:center;
}
.progress-probability-map-slot .range-box-head{ gap:8px; margin-bottom:10px; }
.progress-probability-map-slot .range-box-title{ font-size:var(--fs-xs); font-weight:700; color:var(--ink); }
.progress-probability-map-slot .range-box-actions{ display:flex; gap:6px; margin-left:auto; }
.progress-probability-map-slot .range-row{ gap:12px; padding:5px 0; font-size:var(--fs-xs); color:var(--ink-soft); }
.progress-probability-map-slot .range-caption{ color:var(--ink); font-weight:600; white-space:nowrap; }
.progress-probability-map-slot .range-axis{
  display:inline-block;
  min-width:18px;
  margin-right:6px;
  padding:0 5px;
  border-radius:5px;
  background:var(--navy);
  color:var(--paper);
  font-size:var(--fs-2xs);
  font-weight:800;
  line-height:18px;
  text-align:center;
}
.progress-probability-map-slot .range-nums{ gap:5px; margin-left:auto; }
.progress-probability-map-slot .range-input{
  width:72px;
  padding:4px 6px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
}
.progress-probability-map-slot .range-sep{ color:var(--ink-soft); }
.progress-probability-map-slot .range-reset{
  padding:4px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  cursor:pointer;
}
.progress-probability-map-slot .tooltip{
  position:absolute;
  top:16px;
  right:16px;
  z-index:10;
  max-width:200px;
  padding:8px 10px;
  border-radius:8px;
  background:var(--header-bg);
  color:var(--on-dark);
  font-size:var(--fs-xs);
  line-height:1.5;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s;
}
.progress-probability-map-slot .tooltip.show{ opacity:1; }
.progress-probability-map-slot .tooltip .t-name{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:700; }
.progress-probability-map-slot .tooltip .t-name img{ width:22px; height:22px; object-fit:contain; border-radius:5px; }
.progress-probability-map-slot .tooltip .t-row .val{ color:var(--moon); font-weight:700; }
.progress-probability-map-slot .tooltip .t-ingredients-row{ display:flex; align-items:flex-start; gap:3px; }
.progress-probability-map-slot .tooltip .t-ingredients{ display:flex; flex-wrap:wrap; gap:3px; align-items:center; }
.progress-probability-map-slot .tooltip .t-ingredient{ display:inline-flex; align-items:center; gap:1px; }
.progress-probability-map-slot .tooltip .t-ingredient-slot{ font-size:10px; color:var(--on-dark); opacity:.75; }
.progress-probability-map-slot .tooltip .t-ingredient img{ width:18px; height:18px; object-fit:contain; vertical-align:middle; }
.progress-detail-stat-label{
  display:block;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.35;
}
.progress-detail-stat-value-row{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  margin-top:3px;
}
.progress-detail-stat-value{
  display:block;
  min-width:0;
  flex:1 1 auto;
  color:var(--ink);
  font-size:var(--fs-sm);
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.progress-detail-stat-action{
  display:inline-flex;
  align-items:center;
  gap:3px;
  flex:none;
  margin:0;
  padding:2px 5px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--navy);
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  line-height:1.3;
  cursor:pointer;
  box-shadow:0 1px 0 var(--line);
  white-space:nowrap;
}
.progress-detail-stat-action:hover{
  background:var(--paper-dim);
  border-color:var(--ink-soft);
}
.progress-detail-stat-action:active{
  transform:translateY(1px);
  box-shadow:none;
}
.progress-detail-stat-action:focus-visible{
  outline:2px solid var(--selected-bg);
  outline-offset:1px;
}
.progress-detail-skill-button{
  display:block;
  width:100%;
  margin:0;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.progress-detail-skill-button:hover{
  border-color:var(--ink-soft);
  background:var(--paper);
}
.progress-detail-skill-button:focus-visible{
  outline:2px solid var(--selected-bg);
  outline-offset:1px;
}
.progress-detail-section-skill .progress-detail-info-card,
.progress-detail-section-ingredient .progress-detail-info-card{ min-height:58px; }
/* 食材配列の表。pokedex.html「食材」タブの#ingModal(.ing-modal table)と同じ見た目。 */
.progress-detail-ing-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-sm);
}
.progress-detail-ing-table th,
.progress-detail-ing-table td{
  border:1px solid var(--line);
  padding:7px 8px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.progress-detail-ing-table thead th{
  background:var(--paper-dim);
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  font-weight:700;
}
.progress-detail-ing-table td.progress-detail-ing-cell{
  text-align:left;
  white-space:nowrap;
}
.progress-detail-ing-table td.progress-detail-ing-cell span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.progress-detail-ing-table td.progress-detail-ing-cell img{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:none;
}
.progress-detail-slot-badge{
  display:inline-block;
  min-width:16px;
  padding:0 4px;
  margin-right:4px;
  border-radius:4px;
  background:var(--navy);
  color:var(--paper);
  font-size:var(--fs-2xs);
  font-weight:800;
  text-align:center;
}
.progress-detail-ing-table td.progress-detail-ing-na{ color:var(--ink-soft); opacity:.5; }
.progress-detail-note,
.progress-detail-empty{
  margin:7px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.55;
}
.progress-detail-competitor-note{ margin-top:-2px; }
.progress-competitor-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:9px;
  align-items:start;
}
.progress-competitor-column{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
}
.progress-competitor-card{
  min-width:0;
  padding:9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--paper-dim);
}
.progress-competitor-card-title{
  margin:0 0 7px;
  color:var(--ink);
  font-size:var(--fs-sm);
  font-weight:800;
}
.progress-competitor-block + .progress-competitor-block{
  margin-top:10px;
  padding-top:9px;
  border-top:1px dashed var(--line);
}
.progress-competitor-block-head{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  margin-bottom:4px;
  color:var(--ink);
  font-size:var(--fs-2xs);
  font-weight:700;
}
.progress-competitor-block-head img{
  width:20px;
  height:20px;
  object-fit:contain;
  flex:none;
}
.progress-competitor-skill-base{
  margin:0 0 5px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
}
.progress-competitor-row{
  display:grid;
  grid-template-columns:2.2em 22px minmax(3em, 6.5em) minmax(24px, 1fr) auto;
  align-items:center;
  gap:3px;
  min-width:0;
  min-height:25px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
}
.progress-competitor-row.is-mine{
  color:var(--ink);
  font-weight:700;
}
.progress-competitor-rank{ text-align:right; }
.progress-competitor-icon{
  width:22px;
  height:22px;
  object-fit:contain;
}
.progress-competitor-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.progress-competitor-track{
  display:block;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:var(--line);
}
.progress-competitor-fill{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--info);
}
.progress-competitor-row.is-mine .progress-competitor-fill{ background:var(--accent); }
.progress-competitor-value{
  min-width:3.5em;
  color:inherit;
  text-align:right;
  white-space:nowrap;
}
.progress-detail-rank-summary{
  margin:5px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  text-align:right;
}
.progress-detail-field-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.progress-detail-field-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper-dim);
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:700;
}
.progress-detail-dreamface-heading{
  margin:14px 0 7px;
  color:var(--ink);
  font-size:var(--fs-xs);
  font-weight:800;
}
.progress-detail-dreamface-scrollbox{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:10px;
}
.progress-detail-dreamface-table{
  border-collapse:separate;
  border-spacing:0;
  width:max-content;
  min-width:100%;
  background:var(--paper);
}
.progress-detail-dreamface-table th,
.progress-detail-dreamface-table td{
  padding:6px 10px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:var(--fs-2xs);
  text-align:center;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.progress-detail-dreamface-table thead th{
  background:var(--paper-dim);
  color:var(--ink);
  font-weight:700;
}
.progress-detail-dreamface-table th.progress-detail-dreamface-corner,
.progress-detail-dreamface-table th.progress-detail-dreamface-name{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--paper-dim);
  text-align:left;
}
.progress-detail-dreamface-table th.progress-detail-dreamface-corner{ z-index:3; }
.progress-detail-dreamface-table tbody th{
  color:var(--ink);
  font-weight:700;
}
.progress-detail-dreamface-table td.progress-detail-dreamface-na{
  color:var(--ink-soft);
}
.progress-detail-dreamface-table tr:last-child th,
.progress-detail-dreamface-table tr:last-child td{ border-bottom:0; }
.progress-detail-dreamface-table thead th:last-child,
.progress-detail-dreamface-table tbody td:last-child{ border-right:0; }

@media (max-width:640px){
  .progress-detail-stat-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .progress-detail-info-grid{ grid-template-columns:1fr; }
  .progress-detail-skill-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .progress-detail-ingredient-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .progress-pokemon-data-head{ padding-right:30px; }
  .progress-pokemon-data-icon{ width:52px; height:52px; }
  .progress-competitor-grid{ gap:6px; }
  .progress-competitor-column{ gap:6px; }
  .progress-competitor-card{ padding:7px; }
  .progress-competitor-row{
    grid-template-columns:2em 20px minmax(2.5em, 1fr) minmax(18px, 1fr) auto;
    gap:2px;
    font-size:.62rem;
  }
  .progress-competitor-icon{ width:20px; height:20px; }
}