/* components.css — 通用组件样式（沿用 style.css 的《燕云十六声》墨金变量）
   档位徽章 / ΔDPS 判定徽章 / 监测摘要 / 面板差异表。 */

.nav { color: var(--accent); font-size: 13px; margin-left: 10px; text-decoration: none; letter-spacing: .06em; }
.nav:hover { color: var(--accent-hi); text-decoration: underline; }





.ev-card.selected {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 1px rgba(199, 154, 99, .5), 0 0 14px rgba(199, 154, 99, .14);
}



.ev-card .aff {
  font-size: 12px; display: flex; justify-content: space-between; gap: 6px;
  margin: 2px 0; font-variant-numeric: tabular-nums;
}
.ev-card .aff .k { color: var(--muted); flex: none; width: 34px; }


/* 档位徽章：天/地/玄/黄 —— 保留四色可辨，但全部收进墨金体系的明度区间 */
.tier-badge {
  display: inline-block; padding: 1px 8px; border-radius: 2px;
  font-family: var(--font-serif); font-size: 12px; font-weight: 500;
  letter-spacing: .1em;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
  background: rgba(0, 0, 0, .22);
}
.tier-badge.big { font-size: 16px; padding: 3px 14px; }
/* 第二十五版（用户定稿）：天=金 / 地=紫 / 玄=蓝 / 黄=绿（黄阶原为铜褐，改绿） */
.tier-badge.tian  { color: var(--gold-300); border-color: var(--gold-500); background: rgba(199, 154, 99, .12); }
.tier-badge.di    { color: #b196d4; border-color: var(--rarity-purple); background: rgba(154, 123, 184, .12); }
.tier-badge.xuan  { color: #7d9fd0; border-color: var(--rarity-blue); background: rgba(74, 114, 168, .12); }
.tier-badge.huang { color: #96bd85; border-color: #6c9e60; background: rgba(104, 158, 90, .12); }
/* 承音小徽章：卡面不挂文字说明后靠徽章表达；位置由容器定（用户定稿：右下角） */
.cy-badge {
  display: inline-block; padding: 0 5px; border-radius: 2px;
  font-family: var(--font-serif); font-size: 11px; font-weight: 500; letter-spacing: 0;
  color: var(--gold-300); border: 1px solid var(--gold-500);
  background: rgba(199, 154, 99, .18); white-space: nowrap;
}


.verdict-badge.big { font-size: 18px; padding: 4px 16px; }












/* 句中的强调：品相与处置建议加粗提亮（只有 400/500 两个可用字重，不能用 600） */
.st-say .hl { font-weight: 500; color: var(--gold-500); }
/* 品相只给「X阶」两个字上色，沿用四档徽章同一套色：天金 / 地紫 / 玄蓝 / 黄绿 */
.st-say .tier { font-weight: 500; }
/* 天阶用「处置建议」同一档金色（--gold-500）——gold-300 太浅，压在深底上发灰 */
.st-say .tier[data-tier="天"] { color: var(--gold-500); }
.st-say .tier[data-tier="地"] { color: #b196d4; }
.st-say .tier[data-tier="玄"] { color: #7d9fd0; }
.st-say .tier[data-tier="黄"] { color: #96bd85; }

/* 处置那句话：一段可读文本，行距放宽；其中「这件装备{词条}」是可点开的内联片段 */
.st-say { line-height: 1.9; }
.st-link {
  cursor: pointer; color: var(--gold-500); font-weight: 500;
  white-space: nowrap; /* 「13 套」不能被行末拆成「13」+「套」 */
  border-bottom: 1px dashed currentColor; padding-bottom: 1px;
  transition: opacity .15s ease;
}
.st-link:hover { opacity: .78; }
.st-link.open { border-bottom-style: solid; }






/* 「它还适合哪些配法」——做成按钮外观的折叠手柄（无边框，靠明暗差） */
.st-xflow > summary.st-btn-link {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 4px 0; color: var(--gold-500); font-size: 13px;
  letter-spacing: .04em; transition: opacity .15s ease;
}
.st-xflow > summary.st-btn-link::-webkit-details-marker { display: none; }
.st-xflow > summary.st-btn-link::before { content: '▸'; transition: transform .15s ease; }
.st-xflow[open] > summary.st-btn-link::before { transform: rotate(90deg); }
.st-xflow > summary.st-btn-link:hover { opacity: .78; }
.st-xflow > summary.st-btn-link:focus-visible { outline: 1px solid var(--gold-500); outline-offset: 2px; }








/* 监测摘要 */
h3.sec {
  font-family: var(--font-serif);
  color: var(--accent); font-size: 13px; margin: 14px 0 6px; letter-spacing: .1em;
}
.digest { margin: 4px 0; font-size: 13px; }
.digest .digest-title { color: var(--warn); font-size: 12px; margin-bottom: 2px; letter-spacing: .06em; }
.digest .digest-title.ok { color: var(--good); }



.diff-table td.num { text-align: right; font-variant-numeric: tabular-nums; }