/* === 30-price.css — 查價詳情頁(掛售表/跨服比價/趨勢圖/物品卡) === 保序拆分自 styles.css(3753 行 > 2500 行鐵則)；cascade 順序 = 檔名數字序，index.html 依序載入 */
/* ─── 詳情頁 ─── */
.item-header {
  /* 卡片外觀由 .mb-card 接管；這裡只排版（column：返回鈕 + 主橫列） */
  display: flex; flex-direction: column; gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  margin-bottom: var(--space-4, 1rem);
}
.item-header-main { display: flex; flex-wrap: wrap; gap: var(--space-4, 1rem); align-items: flex-start; }
.item-header img { width: 64px; height: 64px; flex-shrink: 0; image-rendering: pixelated; }

.item-title { flex: 1; min-width: 0; }
/* 標題列：道具名 + 操作模組（＋購物/＋採集）同一列（貼 #id 右側，省一整列高度）*/
.item-title-head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
  margin-bottom: var(--space-1, 0.25rem);
}
.item-title-head h2 { margin-bottom: 0; }

/* 卡片右上 shortcut 區（有配方 / 無配方但有來源 才出現） */
.item-header-actions {
  /* 操作模組（＋購物 / ＋採集 / 製作模擬）貼在標題列 #id 右側；垂直置中、留間距不貼 id、可換行 */
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-self: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: var(--space-2, 0.5rem);
}
.item-header-actions .item-action-sep { width: 1px; align-self: stretch; min-height: 24px; background: var(--color-border, #2f3650); margin: 0 var(--space-1, 0.25rem); }
/* 加入購物清單 / 監控 已加入 → 實心 cyan（取代舊金色 is-active） */
.codex-btn.is-active { background: var(--accent); color: var(--color-bg, #1a1f2e); border-color: var(--accent); }

/* ─── 共用 header 外部連結（Wiki / Garland）— 貼標題右上，與操作模組分流 ─── */
.item-header-links {
  display: flex;
  gap: var(--space-2, 0.5rem);
  flex-shrink: 0;
  align-self: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* mobile：外部連結整列下移，標題保留寬度不被擠成 0（修圖文裁切；鐵則 image-text-no-clip）*/
@media (max-width: 600px) {
  .item-header-links { flex-basis: 100%; justify-content: flex-start; }
}

/* ─── 分頁列：查價 / 製造 / 來源·用途 ─── */
.item-tabs {
  display: flex;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;  /* mobile 不裁切 */
  border-bottom: 1px solid var(--color-border, #2f3650);
}
.item-tab {
  /* 長方鈕 + radius-sm（鐵則#8）；底線高亮靠透明 border-bottom 預留位 */
  display: inline-flex; align-items: center;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm, 6px) var(--radius-sm, 6px) 0 0;
  margin-bottom: -1px;  /* 底線壓在 .item-tabs border 上 */
  background: none;
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  font-size: var(--fs-small, 0.8125rem);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast, .15s ease), border-color var(--transition-fast, .15s ease);
}
.item-tab:hover {
  color: var(--color-text, #f5f5f5);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* 當前分頁：3px 底線 + 淡 accent 底色（明顯一點點，但非實心亮塊；呼應 2026-06-18「實心太亮」） */
.item-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  cursor: default;
}
.item-tab[disabled] {
  color: var(--color-text-muted, #9aa3b8);
  opacity: 0.45;
  cursor: not-allowed;
  background: none;
}
/* 捲到 section 時，避免被 sticky search-bar 蓋住 */
.recipe-section, .source-section {
  scroll-margin-top: calc(50px + 12px + 65px + 12px);  /* navbar+gap + search-bar+margin */
}
/* 註：分頁列收編後移除「外部 shortcut button 控制整 section display:none」舊規則；
   配方 / 來源 section 改用自身 header 的 ▶ 展開 / ▼ 收合（.recipe-tree / .source-body 的 hidden 屬性）控制。 */
/* 物品名（卡片標題）— codex-h3 接 font-size/weight/family/color(cyan)；移除舊金漸層（配色 C） */
.item-title h2 {
  margin: 0 0 var(--space-1, 0.25rem) 0;
}
.item-id {

  font-weight: normal;
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted, #9aa3b8);
  -webkit-text-fill-color: var(--color-text-muted, #9aa3b8);
  letter-spacing: 0.08em;
}
/* 名稱旁 📋 一鍵複製鈕 — h2 是金漸層 text-fill:transparent，
   emoji 必須還原 fill 才看得到；自身為獨立 button 不碰漸層字 */
.item-name-copy {
  -webkit-text-fill-color: initial;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  font-size: 0.55em;
  line-height: 1;
  opacity: 0.5;
  vertical-align: middle;
  transition: opacity var(--transition-fast, 0.15s);
}
.item-name-copy:hover,
.item-name-copy:focus-visible { opacity: 1; }
.item-meta {
  font-weight: 600;
  color: var(--color-text-muted, #9aa3b8);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* 伺服器 / 伺服器 tabs */
.world-tabs {
  display: flex; gap: var(--space-2, 0.5rem); flex-wrap: wrap;
  margin: var(--space-3, 0.75rem) 0;
  padding: var(--space-2, 0.5rem);
  background: rgba(15, 20, 32, 0.4);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-md, 8px);
}
.world-tabs button {
  padding: 5px 13px;
  min-width: 88px;  /* 同寬：全 DC + 7 伺服器（最長 4 字）統一視覺節奏 */
  background: var(--color-bg, #1a1f2e);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-text, #f5f5f5);  /* muted 灰太不明顯（user 反饋）→ 亮字 */
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-small, 0.8125rem);
  letter-spacing: 0.04em;
  transition: color var(--transition-fast, .15s ease),
              background var(--transition-fast, .15s ease),
              border-color var(--transition-fast, .15s ease);
}
.world-tabs button:hover {
  color: var(--color-text, #f0f4f8);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--color-border, #2f3650));
}
.world-tabs button.active {
  background: var(--accent);
  color: var(--color-bg-deep, #0a0e18);
  border-color: var(--accent);
  font-weight: 700;
}
.world-tabs button.active:hover { filter: brightness(1.08); }

/* 雙欄掛售 */
.price-grid {
  display: grid; gap: var(--space-3, 0.75rem);
}
.price-grid.two-col { grid-template-columns: 1fr 1fr; }
.price-grid.one-col { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .price-grid.two-col { grid-template-columns: 1fr; }
}

.price-col {
  background: var(--gradient-tablet, var(--color-surface, #232a3d));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--color-border, #2f3650));
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0, 0, 0, 0.25));
  overflow: hidden;
}
.col-title {
  margin: 0; padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  letter-spacing: var(--tracking-wide, 0.16em);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border, #2f3650);
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}
.col-title.hq { color: var(--money); }   /* HQ = 金幣語意（配色 C） */
.col-title.nq { color: var(--accent); }   /* NQ = cyan */

/* 均價 + 日銷 stats 內聯在 HQ/NQ panel header 右側 */
.col-stats {
  margin-left: auto;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.78em;
  font-weight: 600;  /* 2026-06-12 灰字準則：均價/日銷 統計標籤 400→600 */
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-text-muted, #9aa3b8);
}
.col-stats strong { color: var(--color-text, #f5f5f5); font-weight: 600; }

.hq-icon {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.2em;
  image-rendering: auto;
}

/* 「近期成交」grid 與「掛售」上下分隔 */
.history-grid { margin-top: var(--space-3, 0.75rem); }

/* ─── 區隔「當前掛售」vs「近期成交」section ─── */
.market-section { margin-top: var(--space-4, 1rem); }
.market-section:first-of-type { margin-top: 0; }

.market-section-title {
  display: flex; align-items: center; gap: var(--space-2, 0.5rem);
  margin: 0 0 var(--space-3, 0.75rem);
  padding-left: var(--space-3, 0.75rem);
  border-left: 4px solid var(--accent);
}

/* 當前掛售：accent 框 — 活躍 / 主要資料 */
.market-listings .market-section-title {
  border-left-color: var(--accent);
}
/* 近期成交 — 卡片風格與「當前掛售」完全一致（2026-06-10 user 反饋；原刻意降一階反而像壞掉），
   兩區共用 .price-col 基礎樣式即可，不再各自覆寫 */

/* 跨伺服器最低價 + 趨勢圖左右並排 — 省一整張卡的高度（窄屏退回單欄） */
.price-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
  align-items: stretch;  /* 左右卡片同高（內容矮的卡片拉伸到同行高度） */
}
.price-bottom-grid > .cross-world,
.price-bottom-grid > .trend-chart { margin-top: var(--space-3, 0.75rem); margin-bottom: 0; }
@media (max-width: 1100px) {
  .price-bottom-grid { grid-template-columns: 1fr; }
}

/* ─── 跨伺服器最低價（採購排序） ─── */
.cross-world {
  position: relative;
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  margin-top: var(--space-3, 0.75rem);
}
.cross-world-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3, 0.75rem); flex-wrap: wrap;
  margin-bottom: var(--space-3, 0.75rem);
}
.cross-world-title { margin: 0; }
.cw-filter {
  display: flex; gap: 2px;
  background: rgba(15, 20, 32, 0.5);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-card, 6px);
  padding: 2px;
}
.cw-filter button {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #9aa3b8);
  font-family: inherit;
  cursor: pointer;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-card, 4px);
  transition: background var(--transition-fast, .15s ease), color var(--transition-fast, .15s ease);
}
.cw-filter button:hover { color: var(--color-text, #f0f4f8); background: var(--color-surface-hover, #2b3450); }
.cw-filter button.active {
  background: var(--color-accent-cyan-soft);
  color: var(--accent);
  font-weight: 600;
}
.cross-world-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-1, 0.25rem);
}
.cross-world-row {
  display: grid;
  grid-template-columns: 36px 80px 1fr;
  align-items: center; gap: var(--space-3, 0.75rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-card, 6px);
  
  transition: background var(--transition-fast, .15s ease);
}
.cross-world-row:hover { background: var(--color-surface-hover, #2b3450); }
.cross-world-row.is-cheapest {
  background: var(--money-soft, rgba(78, 201, 208, 0.18));
  border-left: 3px solid var(--money);   /* 最便宜 = 金幣語意（配色 C） */
}
.cw-rank {
  font-family: var(--font-mono, monospace);
  
  color: var(--color-text-muted, #9aa3b8);
  text-align: right;
}
.cross-world-row.is-cheapest .cw-rank { color: var(--money); font-weight: 700; }
.cw-world { font-weight: 600; }
.cw-prices {
  display: flex; gap: var(--space-4, 1rem); flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, monospace);
  
}
.cw-nq, .cw-hq { color: var(--color-text-muted, #9aa3b8); }
.cw-nq strong { color: var(--accent); font-weight: 700; margin: 0 2px; }
.cw-hq strong { color: var(--money); font-weight: 700; margin: 0 2px; }
.cw-prices small { opacity: 0.7; margin-left: 2px; }
.cw-prices em { font-style: normal; opacity: 0.4; }

/* ─── 近 N 天價格趨勢折線圖（SVG） ─── */
.trend-chart {
  position: relative;
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  margin-top: var(--space-3, 0.75rem);
}
.trend-title { margin: 0 0 var(--space-3, 0.75rem) 0; }
.trend-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-mono, monospace);
}
.trend-grid-line {
  stroke: color-mix(in srgb, var(--color-border, #2f3650) 70%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.trend-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trend-line-nq { stroke: var(--accent, #4ec9d0); }
.trend-line-hq { stroke: var(--money, #e6c068); }
.trend-pt { cursor: help; }
.trend-pt-nq { fill: var(--accent, #4ec9d0); stroke: rgba(0, 0, 0, 0.4); stroke-width: 1; }
.trend-pt-hq { fill: var(--money, #e6c068); stroke: rgba(0, 0, 0, 0.4); stroke-width: 1; }
.trend-pt-label {
  font-size: var(--fs-xs, 0.6875rem);  /* 11px */
  text-anchor: middle;
  font-weight: 600;
  pointer-events: none;
}
.trend-pt-label-nq { fill: var(--accent, #4ec9d0); }
.trend-pt-label-hq { fill: var(--money, #e6c068); }
.trend-axis-label {
  font-size: var(--fs-xs, 0.6875rem);  /* 10-11px 軸 label，token 散布 */
  text-anchor: middle;
  fill: var(--color-text-muted, #9aa3b8);
}
.trend-ytick {
  font-size: var(--fs-xs, 0.6875rem);
  text-anchor: end;
  fill: var(--color-text-muted, #9aa3b8);
}
.trend-empty { margin: 0; color: var(--color-text-muted, #9aa3b8); }
.trend-legend {
  display: flex; gap: var(--space-4, 1rem); flex-wrap: wrap;
  margin-top: var(--space-3, 0.75rem);
  font-family: var(--font-mono, monospace);
}
.trend-legend-item.nq { color: var(--accent); }
.trend-legend-item.hq { color: var(--money); }
.trend-legend-hint { color: var(--color-text-muted, #9aa3b8); margin-left: auto; opacity: 0.7; }


/* UX-3：查價失敗人話 + 重試鈕 — 訊息與鈕垂直排列、鈕留間距 */
.price-error { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2, 0.5rem); }
.price-error p { margin: 0; }