/*
 * 料理タブ「備蓄」パネル。上部の食材サマリーはタブバーの直下にposition:stickyで
 * 固定し(topの実際の値はjs/ingredientStock.jsがタブバーの実測高さから設定)、
 * 下部はカテゴリ(カレー・シチュー/サラダ/デザート・ドリンク)ごとに3列でレシピカードを
 * 縦に並べる。カードの見た目は個体比較「レシピ充足率」パネルのミニカード
 * (.cmp-sum-recipe-card, css/individualCompare.css)を踏襲している。
 */
.stock-tool{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 16px 16px;
}
.stock-tool > .tab-about{ margin-bottom:14px; }

/* ---- 使い方ステップガイド(常時表示) ---- */
.stock-guide{
  margin-bottom:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-dim);
}
.stock-guide-title{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.stock-guide-steps{
  display:flex;
  flex-direction:column;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
.stock-guide-steps li{
  display:flex;
  align-items:center;
  gap:8px;
}
.stock-guide-num{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:var(--fs-2xs);
  font-weight:700;
}
.stock-guide-text{
  font-size:var(--fs-sm);
  color:var(--ink);
  line-height:1.4;
}

/* ---- 上部: 食材サマリー ---- */
.stock-summary{
  position:sticky;
  top:0;
  z-index:15;
  margin:0 -16px 14px;
  padding:10px 16px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
/* ---- パターン(1・2・3…)切り替えタブ。サマリー枠の一番上に、
   ファイルの見出しタブが上に飛び出しているような見た目で並べる。 ---- */
.stock-pattern-bar{
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin:-10px -16px 10px;
  padding:0 16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.stock-pattern-tabs{
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex:1 1 auto;
  min-width:0;
  padding-top:9px;
}
.stock-pattern-tab{
  position:relative;
  flex:none;
}
.stock-pattern-tab-select{
  display:flex;
  align-items:center;
  gap:4px;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  padding:5px 32px;
  border:1px solid var(--line);
  border-bottom:none;
  border-radius:8px 8px 0 0;
  background:var(--paper-dim);
  color:var(--ink-soft);
  cursor:pointer;
  max-width:48vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stock-pattern-tab-select:hover{ background:var(--paper); }
.stock-pattern-tab.active .stock-pattern-tab-select{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--navy);
}
.stock-pattern-tab-dot{
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
}
.stock-pattern-tab-del,
.stock-pattern-tab-dup{
  position:absolute;
  top:-7px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  padding:0;
  border-radius:50%;
  font-size:11px;
  line-height:1;
  color:var(--ink-soft);
  background:var(--paper);
  border:1px solid var(--line);
  cursor:pointer;
}
.stock-pattern-tab-dup{ left:-7px; }
.stock-pattern-tab-del{ right:-7px; }
.stock-pattern-tab-del:hover,
.stock-pattern-tab-dup:hover{ color:var(--ink); border-color:var(--navy); }
/* display:flexを明示しているため、[hidden]の既定display:noneが負けてしまう
   (.stock-pattern-addと同じ理由でガードが必要)。 */
.stock-pattern-tab-dup[hidden]{ display:none; }
.stock-pattern-add{
  flex:none;
  width:28px;
  height:28px;
  margin-bottom:1px;
  border-radius:8px 8px 0 0;
  border:1px dashed var(--line);
  border-bottom:none;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
.stock-pattern-add:hover{ background:var(--paper); color:var(--ink); }
.stock-pattern-add[hidden]{ display:none; }

.stock-summary-head{
  position:relative;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
.stock-summary-head .section-heading{ margin:0; padding:0; }
.stock-summary-total{
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}
.stock-summary-total b{ color:var(--ink); font-size:var(--fs-md); }
.stock-summary-head .filter-clear{ margin-left:auto; }

/* ---- 「必要な食材」の手動増減モードを開くインデックスラベル ----
   見出し行の右端から、box自体の縁(margin:0 -16pxで既にbleedしている
   .stock-summaryの右端=画面端)まで飛び出すタブとして配置する。 */
.stock-manual-toggle{
  position:absolute;
  top:100%;
  right:-16px;
  margin-top:4px;
  padding:6px 10px 6px 12px;
  max-width:100px;
  border:1px solid var(--line);
  border-right:none;
  border-radius:8px 0 0 8px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  line-height:1.3;
  text-align:center;
  cursor:pointer;
  box-shadow:-2px 0 4px rgba(0,0,0,.06);
}
.stock-manual-toggle:hover{ background:var(--paper); }
.stock-manual-toggle.active{
  background:var(--moon-soft);
  color:var(--ink);
  border-color:var(--navy);
}
.stock-summary-sort{ margin-bottom:8px; }
.stock-summary-sort button{ font-size:var(--fs-2xs); padding:4px 10px; }
.stock-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(30px, 1fr));
  gap:2px 3px;
}
.stock-summary-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  opacity:.45;
}
.stock-summary-item.is-needed{ opacity:1; }
.stock-summary-item img{
  width:20px;
  height:20px;
  object-fit:contain;
  border-radius:5px;
  background:var(--paper-dim);
  border:1px solid var(--line);
}
/* 手動で増減した分をアイコンの上にバッジで表示する。
   減らした(マイナス)は赤、増やした(プラス)は緑で意味づけする。 */
.stock-summary-adjust-badge{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
  padding:1px 4px;
  border-radius:999px;
  background:var(--ink-soft);
  color:#fff;
  font-size:9px;
  font-weight:700;
  line-height:1.4;
  white-space:nowrap;
}
.stock-summary-adjust-badge[hidden]{ display:none; }
.stock-summary-adjust-badge.is-decrease{ background:var(--danger); }
.stock-summary-adjust-badge.is-increase{ background:var(--success); }
.stock-summary-qty{
  font-size:10px;
  line-height:1;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}
.stock-summary-item.is-needed .stock-summary-qty{ color:var(--navy); }
/* 手動増減モード中は食材アイコンがタップ対象だと分かるようにする */
.stock-summary-grid.is-editable .stock-summary-item{ cursor:pointer; }
.stock-summary-grid.is-editable .stock-summary-item img{ border-color:var(--navy); border-style:dashed; }
/* 手動で増減している食材には枠色で印を付ける(モード中でなくても分かるように)。
   バッジと同じく減らした=赤、増やした=緑。 */
.stock-summary-item.has-adjustment img{ border-width:2px; }
/* 手動増減モード中(is-editable、破線ネイビー)より優先させるため詳細度を合わせる */
.stock-summary-item.is-decrease img,
.stock-summary-grid.is-editable .stock-summary-item.is-decrease img{ border-color:var(--danger); border-style:solid; }
.stock-summary-item.is-increase img,
.stock-summary-grid.is-editable .stock-summary-item.is-increase img{ border-color:var(--success); border-style:solid; }

/* ---- 手動増減の吹き出し(-10/-1/0/+1/+10) ---- */
.stock-manual-popover{
  position:fixed;
  z-index:var(--app-popup-z, 140);
  padding:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.stock-manual-popover[hidden]{ display:none; }
.stock-manual-popover::before{
  content:'';
  position:absolute;
  left:var(--arrow-left, 50%);
  width:10px;
  height:10px;
  margin-left:-5px;
  background:var(--paper);
  border:1px solid var(--line);
  transform:rotate(45deg);
}
.stock-manual-popover.is-below::before{ top:-6px; border-right:none; border-bottom:none; }
.stock-manual-popover.is-above::before{ bottom:-6px; border-left:none; border-top:none; }
.stock-manual-popover-head{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}
.stock-manual-popover-head img{ width:20px; height:20px; object-fit:contain; }
.stock-manual-popover-btns{
  display:flex;
  gap:4px;
}
.stock-manual-popover-btn{
  flex:none;
  min-width:34px;
  padding:6px 4px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper-dim);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}
.stock-manual-popover-btn:hover{ background:var(--paper); border-color:var(--navy); }
.stock-manual-popover-btn:active{ background:var(--line); }
/* 減らすボタンは赤、増やすボタンは緑(結果のバッジ・アイコン枠色とも揃える)。 */
.stock-manual-popover-btn.is-decrease{ background:var(--danger-bg); border-color:var(--danger); color:var(--danger); }
.stock-manual-popover-btn.is-decrease:hover{ background:var(--danger-bg); border-color:var(--danger); filter:brightness(.95); }
.stock-manual-popover-btn.is-increase{ background:var(--success-bg); border-color:var(--success); color:var(--success); }
.stock-manual-popover-btn.is-increase:hover{ background:var(--success-bg); border-color:var(--success); filter:brightness(.95); }
.stock-manual-popover-reset{
  display:flex;
  align-items:center;
  justify-content:center;
}
.stock-manual-popover-reset svg{ width:16px; height:16px; }
/* 「0にする」は上段とは別物(計算結果を無視して0固定)と分かるよう、
   区切り線を挟んで下の行に置く。 */
.stock-manual-popover-zero-row{
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed var(--line);
}
.stock-manual-popover-zero-btn{
  width:100%;
  padding:6px 4px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper-dim);
  color:var(--ink-soft);
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  cursor:pointer;
}
.stock-manual-popover-zero-btn:hover{ background:var(--paper); border-color:var(--navy); color:var(--ink); }
.stock-manual-popover-zero-btn:active{ background:var(--line); }

/* ---- カテゴリ絞り込み時に食材スロットの下からもう1段吐き出される「不要になった食材」トレイ ---- */
.stock-summary-extra{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  transition:max-height .35s ease, opacity .25s ease, transform .35s ease, margin-top .35s ease;
}
.stock-summary-extra.is-open{
  max-height:600px;
  opacity:1;
  transform:translateY(0);
  margin-top:10px;
}
.stock-summary-extra-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
  padding-top:10px;
  border-top:1px dashed var(--line);
}
.stock-summary-extra-head .section-heading{ margin:0; padding:0; color:var(--ink-soft); }
.stock-summary-extra .stock-summary-item img{ opacity:.7; }
.stock-summary-extra .stock-summary-item.is-needed .stock-summary-qty{ color:var(--ink-soft); }

/* ---- 下部: カテゴリごとに3列 ---- */
.stock-columns,
.stock-category-heads{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.stock-columns{ align-items:start; }
/* ---- カテゴリ選択の行(sticky枠の中、レシピ一覧の上に常時表示) ---- */
.stock-category-heads{
  margin-top:10px;
}
.stock-column{ min-width:0; }
/* 押し込み式の立体ボタン(.tab-open-btn、図鑑「きのみ効率」の
   「きのみエナジーを見る」ボタンを参考。詳細は.claude/skills/raised-button)。
   下端の帯(box-shadow)をカテゴリ色にし、押下/選択中はtranslateYで沈める。 */
.stock-column-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  text-align:center;
  padding:7px 2px;
  border-radius:9px;
  border:2px solid var(--cat-color, var(--line));
  color:var(--ink);
  background:var(--paper);
  cursor:pointer;
  box-shadow:0 3px 0 var(--cat-color, var(--line));
  transition:background .15s ease, opacity .2s ease, transform .1s ease, box-shadow .1s ease;
}
.stock-column-head .rcp-cat-badge{ flex:none; }
.stock-column-head:hover{ background:var(--paper-dim); }
.stock-column-head:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--cat-color, var(--line));
}
.stock-column-head.is-selected{
  background:var(--moon-soft);
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--cat-color, var(--line));
}
.stock-column-head.is-unneeded{ opacity:.5; }
.stock-column.is-unneeded .stock-column-list{ opacity:.5; }
.stock-column-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ---- 選択済みレシピを表示するスロット(備蓄・チーム備蓄で共通) ----
   3列×3行を初期表示の目安にした表示枠。選択済みのレシピは種類ごとに
   1枠へまとめ、枠の右下に回数バッジを付ける。単体のレシピ備蓄ページも
   このファイルだけを読み込むため、共有スタイルはここで定義する。 */
.ut-recipe-slots{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, clamp(30px, 8vw, 48px)));
  justify-content:start;
  gap:4px;
  margin:6px 0;
  padding:4px 0;
  position:sticky;
  top:var(--stock-recipe-slots-sticky-top, 0px);
  z-index:9;
  background:var(--paper);
  box-shadow:0 3px 6px rgba(31, 42, 68, .1);
}
.ut-recipe-slot{
  position:relative;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--paper);
  overflow:hidden;
}
/* .ut-recipe-slotのdisplay:flexが[hidden]の既定display:noneを上書きするため、
   選択数に応じてまだ使わない行を確実に折りたたむ。 */
.ut-recipe-slot[hidden]{ display:none; }
.ut-recipe-slot img{
  width:68%;
  height:68%;
  object-fit:contain;
}
.ut-recipe-slot.is-empty{
  border-style:dashed;
  border-color:var(--line);
  background:var(--paper-dim);
}
.ut-recipe-slot.is-empty::after{
  content:'空き';
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.ut-recipe-slot.is-filled{
  cursor:pointer;
}
.ut-recipe-slot.is-filled:hover{
  border-color:var(--navy);
}
.ut-recipe-slot.is-filled:active{
  background:var(--moon-soft);
}
.ut-recipe-slot.is-filled:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:1px;
}
.ut-recipe-slot-count{
  position:absolute;
  right:1px;
  bottom:1px;
  min-width:1.25em;
  padding:1px 3px;
  border-radius:999px;
  background:var(--navy);
  color:var(--paper);
  font-size:var(--fs-2xs);
  font-weight:700;
  line-height:1.1;
  text-align:center;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
  user-select:none;
}

/* ---- カテゴリ選択中(廃材活用モード中)の案内バナー ---- */
.stock-waste-banner{
  margin:0 0 14px;
  padding:10px 14px;
  border-radius:10px;
  background:var(--moon-soft);
  color:var(--ink);
  font-size:var(--fs-sm);
  font-weight:700;
  text-align:center;
}
.stock-waste-banner[hidden]{ display:none; }

/* ---- レシピカード(cmp-sum-recipe-cardの見た目を踏襲) ---- */
.stock-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:6px;
  box-sizing:border-box;
  border-radius:8px;
  background:var(--paper);
  border:2px solid var(--line);
  min-width:0;
}
.stock-card.is-selected{
  border-width:3px;
  border-style:solid;
  background:var(--selected-soft-bg);
  color:var(--selected-soft-ink);
}
.stock-card.is-tappable{ cursor:pointer; }
.stock-card.is-tappable:hover{ border-color:var(--navy); }
.stock-card.is-tappable:active{ background:var(--moon-soft); }
.stock-card.is-tappable:focus-visible{ outline:2px solid var(--navy); outline-offset:1px; }
.stock-card-head{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.stock-card-head .icon-wrap img{
  width:26px;
  height:26px;
  border-radius:6px;
}
.stock-card-head .icon-wrap .ph{ width:26px; height:26px; }
.stock-card-head .info{ flex:1 1 auto; min-width:0; }
.stock-card-head .info .name{
  font-size:var(--fs-2xs);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.25;
}
.stock-card-badge{
  flex:none;
  width:22px;
  height:22px;
  padding:0;
  border-radius:50%;
  font-size:12px;
  line-height:1;
  color:#20243B;
  background:var(--paper-dim);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.stock-card-badge:hover{ background:var(--paper); border-color:var(--navy); }
.stock-card-badge:active{ background:var(--line); }
.stock-card-badge[hidden]{ display:none; }
.stock-card-ings{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.stock-card-ings[hidden]{ display:none; }
.stock-card-ings .rcp-ing{ font-size:var(--fs-2xs); }
.stock-card-ings .rcp-ing img{ width:16px; height:16px; }
/* レシピを1つ以上選んでいる間、「必要な食材」に含まれない食材だけグレーアウトする
   (dish.htmlのレシピ一覧 .is-excluded-muted と同じ見た目)。 */
.stock-card-ings .rcp-ing.is-ing-muted{ opacity:.45; filter:grayscale(1); }

/* ---- 廃材活用モード(カテゴリ絞り込み中のカード): 個体比較「レシピ充足率」
   (.cmp-sum-recipe-row、css/individualCompare.css)と同じ見た目のバー+%表示。 ---- */
.stock-card-waste{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.stock-card-waste[hidden]{ display:none; }
.stock-card-waste-row{
  display:flex;
  align-items:center;
  gap:5px;
}
.stock-card-waste-row img{
  flex:none;
  width:16px;
  height:16px;
  object-fit:contain;
}
.stock-card-waste-bar-track{
  flex:1 1 auto;
  min-width:0;
  height:6px;
  border-radius:3px;
  background:var(--paper);
  overflow:hidden;
}
.stock-card-waste-bar-fill{
  height:100%;
  border-radius:3px;
  background:#D97706;
}
.stock-card-waste-bar-fill.is-full{ background:var(--success); }
.stock-card-waste-pct{
  flex:none;
  min-width:30px;
  text-align:right;
  font-size:var(--fs-2xs);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.stock-card-qty{
  display:flex;
  align-items:center;
  gap:4px;
}
.stock-qty-btn{
  flex:none;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  font-size:13px;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.stock-qty-btn:hover{ background:var(--paper-dim); }
.stock-qty-btn:active{ background:var(--line); }
.stock-qty-input{
  flex:1 1 auto;
  min-width:0;
  width:100%;
  text-align:center;
  padding:4px 2px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  font-weight:700;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
}

/* ---- パターンの名前・色を変更するモーダル(.overlay-modal/.modal-cardはcss/tokens.cssの共通シェル) ---- */
.stock-pattern-name-input{
  width:100%;
  padding:8px 10px;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動でズームしてしまうため16px以上にする */
  font-size:16px;
  text-align:center;
}
.stock-pattern-colors{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-bottom:16px;
}
.stock-pattern-color-swatch{
  width:26px;
  height:26px;
  padding:0;
  border-radius:50%;
  border:2px solid var(--line);
  cursor:pointer;
}
.stock-pattern-color-swatch.is-none{
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:12px;
  line-height:1;
}
.stock-pattern-color-swatch.active{
  border-color:var(--ink);
  box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

@media (max-width:520px){
  .stock-summary-grid{ grid-template-columns:repeat(auto-fill, minmax(36px, 1fr)); }
  .stock-summary-item img{ width:28px; height:28px; }
  .stock-columns,
  .stock-category-heads{ gap:5px; }
  .stock-card{ padding:5px; gap:4px; }
  .stock-card-head .icon-wrap img{ width:22px; height:22px; }
  .stock-qty-btn{ width:21px; height:21px; font-size:12px; }
  .stock-pattern-tab-select{ max-width:70vw; }
}

html[data-layout="pc"] .stock-columns,
html[data-layout="pc"] .stock-category-heads{
  grid-template-columns:repeat(3, minmax(0, 360px));
  justify-content:center;
}