/* === 50-recipe-source.css — 配方多層樹+來源 section === 保序拆分自 styles.css(3753 行 > 2500 行鐵則)；cascade 順序 = 檔名數字序，index.html 依序載入 */
/* ─── 配方多層樹（spec §6.4） ─── */
.recipe-section,
.source-section {
  padding: var(--space-5, 1.5rem);
  margin-bottom: var(--space-4, 1rem);
  position: relative;
}
.recipe-section[data-expanded="false"] .recipe-header,
.source-section[data-expanded="false"] .source-header {
  margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}
.recipe-header,
.source-header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  margin-bottom: var(--space-3, 0.75rem);
  padding-bottom: var(--space-2, 0.5rem);
  border-bottom: 1px solid rgba(78, 201, 208, 0.18);
}
.recipe-title,
.source-title { margin: 0; flex-shrink: 0; }
.recipe-job,
.source-summary { color: var(--color-text-muted, #9aa3b8); }
.recipe-expand-all,
.source-expand-all,
.recipe-detail-link {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius-sm, 6px);
  padding: 2px 12px;
  font-family: inherit;
  
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast, .15s ease);
}
.recipe-expand-all { margin-left: auto; }  /* 把展開按鈕推到行尾 */
.source-expand-all { margin-left: auto; }
.recipe-hide-crystals {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2, 0.5rem);
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.88em;
}
.recipe-hide-crystals input { cursor: pointer; }
.recipe-detail-link:hover,
.recipe-expand-all:hover,
.source-expand-all:hover { background: var(--color-accent-cyan-soft); }
.recipe-switcher {
  margin-left: auto;
  background: rgba(15, 20, 32, 0.6);
  color: inherit;
  border: 1px solid var(--color-border, #2f3650);
  border-radius: var(--radius-card, 6px);
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  font-family: inherit;
  
  cursor: pointer;
}
.recipe-switcher:focus { outline: none; border-color: var(--accent); }

.recipe-tree { }
.recipe-node { line-height: 1.55; }
/* grid layout 固定 column 起始點 — 不再隨物品名字長度漂移
   順序：tree-indent | toggle | icon | name | sub-cat | qty | iLv | tags
   全 col fixed 寬，不用 1fr 撐滿 — row 寬 = sum cols，後面 col 緊貼 name 不留空白
   (user 反映 1fr 撐滿時內容被推到右邊跑太遠) */
.recipe-row {
  display: grid;
  grid-template-columns:
    30px      /* tree-indent (depth indent via padding-left) */
    22px      /* toggle ▶ / leaf · */
    24px      /* icon img 20x20 */
    220px     /* name link (fixed，超寬 ellipsis) */
    110px     /* sub-cat (item.uc) */
    52px      /* qty ×N */
    72px      /* iLv NNN */
    auto;     /* tags (不可上市 / 循環) */
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 2px 0;
}
.recipe-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-tree-line {
  font-family: var(--font-mono, monospace);
  color: rgba(78, 201, 208, 0.35);
  white-space: pre;
  /* depth-based indent — 每階 12px，d=1 起始 0、d=2 起始 12、依此類推 */
  padding-left: calc((var(--depth, 1) - 1) * 12px);
}
.recipe-subcat {
  color: var(--color-text-muted, #9aa3b8);
  font-size: 0.88em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recipe-tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.recipe-toggle {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0 4px;
  
  width: 18px;
  flex-shrink: 0;
  transition: color var(--transition-fast, .15s ease);
}
.recipe-toggle:hover { color: var(--color-text-inverse, #fff); }
.recipe-toggle:focus { outline: 1px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
.recipe-leaf {
  color: rgba(78, 201, 208, 0.4);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.recipe-icon {
  border-radius: 3px;
  flex-shrink: 0;
}
.recipe-name {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast, .15s ease);
}
.recipe-name:hover { color: var(--accent); text-decoration: underline; }
.recipe-qty {
  font-family: var(--font-mono, monospace);
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;  /* 2026-06-12 灰字準則：×N 需求量是製作必讀數字 */
  font-variant-numeric: tabular-nums;
}
.recipe-ilv {
  color: var(--color-text-muted, #9aa3b8);
  opacity: 0.7;
}
.recipe-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;
  
}
.recipe-truncated {
  color: var(--accent);
  opacity: 0.7;
  font-family: var(--font-mono, monospace);
}
.recipe-children[hidden],
.source-body[hidden] { display: none; }

@media (max-width: 600px) {
  .recipe-row { flex-wrap: wrap; }
  .recipe-tree-line { }
}

/* ─── 來源 section（採集 / 釣魚 / 副本） ─── */
.source-body { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
.source-cat {
  background: rgba(15, 20, 32, 0.4);
  border: 1px solid rgba(78, 201, 208, 0.1);
  border-radius: var(--radius-card, 8px);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
}
.source-cat-title {
  color: var(--accent);
  margin-bottom: var(--space-2, 0.5rem);
  letter-spacing: 0.04em;
}
.source-list { list-style: none; margin: 0; padding: 0; }
.source-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;  /* NPC/座標/名稱較長時換行不裁切（鐵則：圖文不裁切）；短行無視覺差 */
  gap: var(--space-2, 0.5rem);
  padding: 2px 0;
}
.source-tag {
  flex-shrink: 0;
  min-width: 90px;
  font-family: var(--font-mono, monospace);
  color: var(--accent);
  
}
.source-place { color: inherit; }
/* 上游名稱層：NPC / 怪物 繁中名加粗（新資訊主體）；怪名行為 block 段落自然換行 */
.source-npc { font-weight: 600; }
p.source-npc { margin: 0.15rem 0; }
/* 製作卡材料 icon — 跟 #/craft 詳細頁 craft-icon 同大小（20px），靠 .source-row flex gap 排版 */
.source-mat-icon { width: 20px; height: 20px; flex-shrink: 0; image-rendering: pixelated; }
.source-coords {
  color: var(--color-text-muted, #9aa3b8);
  font-weight: 600;  /* 2026-06-12 灰字準則：座標是採集導航必讀 */
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
}
.source-more {
  color: var(--color-text-muted, #9aa3b8);
  font-style: italic;
  padding-top: 2px;
}
@media (max-width: 600px) {
  .source-row { flex-wrap: wrap; }
  .source-tag { min-width: 0; }
}

/* ── 完整來源頁 #/source/{id} ── */
.source-detail { display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
.source-detail-card { padding: var(--space-3, 0.75rem) var(--space-4, 1rem); }
.source-detail-card-header {
  display: flex; align-items: baseline; gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-2, 0.5rem);
}
.source-detail-card-header .source-title { margin: 0; flex-shrink: 0; }
.source-detail-link {
  margin-left: auto; color: var(--accent, #4ec9d0); text-decoration: none; white-space: nowrap;
}
.source-detail-link:hover { text-decoration: underline; }
/* 行內連結（如任務行的「灰機 ↗」）：緊貼文字、不右推（有別於 card-header 的 margin-left:auto） */
.source-inline-link { color: var(--accent, #4ec9d0); text-decoration: none; white-space: nowrap; }
.source-inline-link:hover { text-decoration: underline; }
.source-detail .source-cat + .source-cat { margin-top: var(--space-2, 0.5rem); }