/* === 60-craft.css — 配方詳細頁+利潤試算 === 保序拆分自 styles.css(3753 行 > 2500 行鐵則)；cascade 順序 = 檔名數字序，index.html 依序載入 */
/* ─── 配方詳細頁（#/craft/{id}） ─── */
.craft-detail { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
.craft-table-wrap {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  overflow-x: auto;
  position: relative;
}
.craft-table {
  width: 100%;
  border-collapse: collapse;
  /* fixed：欄寬鎖死 — 展開/查價更新不跳；來源欄吃剩餘 */
  table-layout: fixed;
}
.craft-table thead th:nth-child(1) { width: 320px; }  /* 物品（含樹狀縮排） */
.craft-table thead th:nth-child(2) { width: 64px;  }  /* 數量 */
.craft-table thead th:nth-child(3) { width: 60px;  }  /* iLv */
.craft-table thead th:nth-child(4) { width: 176px; }  /* NQ 最低（伺服器+價，「伊弗利特 888,888」不折行） */
.craft-table thead th:nth-child(5) { width: 176px; }  /* HQ 最低 */
.craft-table thead th:nth-child(6) { width: 90px;  }  /* 小計 */
/* th:nth-child(7) 來源 — 吃剩餘 */
.craft-table thead th:nth-child(8) { width: 240px; }  /* 加入清單（兩顆鈕 96px×2+gap，200 會切到） */
/* 材料合計列 */
.craft-total-row td {
  border-top: 1px solid rgba(78, 201, 208, 0.25);
  padding-top: 8px; padding-bottom: 8px;
  font-weight: 600;
}
.craft-total-label { color: var(--color-text-muted, #9aa3b8); text-align: right; font-weight: 600; }
#craftDirectTotal { color: var(--money, #e6c068); }  /* 合計金額 = 金幣語意 */
.craft-table-inset { padding: 2px var(--space-2, 0.5rem); overflow-x: auto; }
.craft-name-cell { overflow: hidden; text-overflow: ellipsis; }
.craft-table thead th {
  text-align: center;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  color: var(--accent);
  font-weight: 600;
  
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(78, 201, 208, 0.3);
  white-space: nowrap;
}
.craft-table thead th.left { text-align: left; }
.craft-table tbody td {
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  /* border-bottom 拿掉 — 跟 d=1 border-top 累加會變雙線（user 反映多出來的高亮橫線）；
     row 之間視覺區分靠 d=1 border-top 0.18 金線（group 開頭）+ bg 0.08 vs 0.05 vs 0 */
  vertical-align: middle;
}
.craft-table tbody td.left { text-align: left; }
.craft-table tbody td.num {
  text-align: right;
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;  /* fixed 欄寬下「伺服器 價格」禁折行 */
}
/* NQ 最低 / HQ 最低 column — 內含「伺服器 + 價格」需要更寬避免「伊弗利特 88,888」被擠 */
.craft-col-price {
  min-width: 120px;
}
.craft-price-world {
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.88em;
  margin-right: 4px;
}
.craft-row:hover { background: rgba(78, 201, 208, 0.05); }
/* 層級配色（2026-06-10 重排）— 原 d0/d1 兩層 cyan 染底跟 cyan 名稱/綠來源互疊難辨（user 反饋「藍綠硬擠」），
   改中性深淺階梯：d0 成品=微亮中性底+粗體；d1 直接材料=透明底+cyan 名稱；d2+=沉深底（同製造清單子層語言） */
.craft-row--d0 { background: rgba(255, 255, 255, 0.045); font-weight: 600; }
.craft-row--d1 > td { background: none; }
.craft-row--d1 .craft-name-link {
  color: var(--accent);
  font-weight: 600;
}
.craft-row--d1:hover > td { background: rgba(78, 201, 208, 0.06); }
/* 非直接素材（d2+，如棕櫚糖漿/其下水晶）— 重壓暗底 + 文字降灰 + accent 左軌（user 兩輪反饋加強對比） */
tr[class*="craft-row--d"]:not(.craft-row--d0):not(.craft-row--d1) > td {
  background: rgba(4, 7, 13, 0.8);
  color: var(--color-text-muted, #9aa3b8);
}
tr[class*="craft-row--d"]:not(.craft-row--d0):not(.craft-row--d1) > td:first-child { box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--accent, #4ec9d0) 55%, transparent); }
/* td 保持 table-cell display — 讓 row 高度 stretch 正常 work。
   flex 排列移到內部 .craft-name-cell-inner（之前 td 自己 display:flex 把它從 table-cell
   變 flex container，cell 高度由 content 決定不再 stretch，導致同 row 內物品 cell 比其他
   cell 矮 — user image 9 反映「物品欄位高亮比較矮」） */
.craft-name-cell {
  white-space: nowrap;
}
.craft-name-cell-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  min-width: 0;
}
.craft-tree-line {
  font-family: var(--font-mono, monospace);
  color: rgba(154, 163, 184, 0.45);  /* 樹枝線 = 結構資訊，中性灰（cyan 留給名稱/互動） */
  white-space: pre;
  flex-shrink: 0;
}
.craft-root-marker { flex-shrink: 0; }
.craft-icon { border-radius: 3px; flex-shrink: 0; }
.craft-name-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast, .15s ease);
}
.craft-name-link:hover { color: var(--accent); text-decoration: underline; }
.craft-tag.tag-unmarketable {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  background: rgba(15, 20, 32, 0.6);
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-sm, 6px);
  padding: 0 6px;
  
  margin-left: 4px;
}
.craft-src-common {
  color: var(--color-text-muted, #9aa3b8);
  font-style: italic;
}
.craft-status {
  text-align: center;
  color: var(--color-text-muted, #9aa3b8);
  font-family: var(--font-mono, monospace);

  margin: 0;
}

/* ===== 配方利潤試算 section ===== */
.craft-profit {
  margin-top: var(--space-3, 12px);
  padding: var(--space-4, 16px);
}
.craft-profit .profit-grid {
  display: grid;
  gap: var(--space-2, 6px);
}
.craft-profit .profit-row {
  /* 左排句子式（標籤固定欄 → 數字同欄起點），不再左右兩端拉開（eye travel） */
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--space-3, 12px);
  padding: 4px 0;
}
.craft-profit .profit-label { flex: 0 0 88px; }
.craft-profit .profit-sell {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #f5f5f5);
  min-width: 130px;
}
.craft-profit .profit-arrow { color: var(--color-text-muted, #9aa3b8); opacity: 0.6; }
.profit-note { color: var(--color-text, #f5f5f5); font-weight: 400; margin-left: var(--space-2, 0.5rem); letter-spacing: 0.04em; }  /* 2026-06-12 灰字準則：計算說明必讀提色 */
.craft-profit .profit-row--bottom {
  padding-top: var(--space-2, 6px);
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.craft-profit .profit-label {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  font-size: var(--fs-body, 0.875rem);
}
.craft-profit .profit-val {
  font-family: var(--font-mono, monospace);
  color: var(--color-text, #e0e6f0);
  text-align: right;
  font-weight: 600;
}
.craft-profit .profit-positive {
  color: var(--color-success-bright, #80ff80);
}
.craft-profit .profit-negative {
  color: var(--color-danger-bright, #ff8080);
}
.craft-profit .profit-roi {
  font-size: 0.85em;
  opacity: 0.85;
  margin-left: 4px;
  font-weight: 500;
}
.craft-profit .profit-warnings {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-2, 6px);
  border-top: 1px dashed rgba(232, 164, 90, 0.3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}
.craft-profit .profit-warn {
  color: var(--color-warn, #e8a45a);
  opacity: 0.9;
  line-height: 1.5;
}
.source-section--common { padding-bottom: var(--space-3, 0.75rem); }
.source-section--common .source-header { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* 📍 採集地圖 deep link（source / craft 內） */
.source-pin,
.craft-src-pin {
  margin-left: 4px;
  text-decoration: none;
  color: var(--accent);
  opacity: 0.6;
  transition: opacity var(--transition-fast, .15s ease);
}
.source-pin:hover,
.craft-src-pin:hover { opacity: 1; }

/* 配方詳細頁來源欄：標示「此材料本身有配方」的 link */
.craft-src-recipe {
  padding: 2px var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(78, 201, 208, 0.25);
  background: rgba(78, 201, 208, 0.06);
  color: var(--accent);
  text-decoration: none;
  transition: background var(--transition-fast, .15s ease), border-color var(--transition-fast, .15s ease);
}
.craft-src-recipe:hover {
  background: var(--color-accent-cyan-soft);
  border-color: var(--accent);
}

/* 配方詳細頁來源欄：加入採集清單 ⭐ 按鈕 */
.craft-src-glist {
  background: transparent;
  border: 1px solid rgba(78, 201, 208, 0.25);
  border-radius: var(--radius-sm, 6px);
  padding: 2px var(--space-2, 0.5rem);
  color: var(--color-text-muted, #9aa3b8);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition-fast, .15s ease),
              background var(--transition-fast, .15s ease),
              color var(--transition-fast, .15s ease);
}
.craft-src-glist:hover {
  border-color: var(--accent);
  background: rgba(78, 201, 208, 0.08);
  color: var(--accent);
}
.craft-src-glist.in-list {
  background: var(--color-accent-cyan-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}