/* ============================================================
   components.css — 按钮 / 徽标 / 卡片 / 图标块 / 问答 / 步骤 /
   筛选片 / 数据瓦片 / 事实 / 分类瓦片 / 渠道卡 / 权限 / 警示 / 面板
   组件级 @media 覆盖紧跟组件定义写在同一文件。
   ============================================================ */

/* —— 按钮 —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 16px; line-height: 1; padding: 15px 24px;
  border-radius: var(--r-pill); white-space: nowrap;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn--primary { background: var(--brand-strong); color: #fff; }
.btn--primary:hover { background: #b51a20; }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24); }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }

/* —— 徽标 / eyebrow —— */
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-small); font-weight: 700; color: var(--brand-ink); letter-spacing: .02em;
}
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }

.eyebrow {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .05em;
  color: var(--brand-ink); text-transform: none;
}

/* —— 区块标题 —— */
.sec-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.sec-head__title { font-size: var(--fs-h2); font-weight: 900; }
.sec-head__desc { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-3); max-width: var(--w-prose); }

/* —— 卡片 —— */
.card {
  background: var(--card); border-radius: var(--r-card); padding: var(--sp-6);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex; flex-direction: column; gap: var(--sp-3); height: 100%;
}
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  background: rgba(232,35,42,0.12); color: var(--brand-ink);
  display: flex; align-items: center; justify-content: center;
}
.card__icon svg { width: 26px; height: 26px; }
.card__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--text); }
.card__desc { font-size: var(--fs-card); line-height: var(--lh-card); color: var(--text-3); }

/* —— 图标（行内 SVG 统一描边）—— */
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* —— 问答（手风琴）—— */
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: var(--sp-5) 0; font-size: var(--fs-h3); font-weight: 700; color: var(--text);
  cursor: pointer; list-style: none;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__sign { flex: none; width: 22px; height: 22px; position: relative; color: var(--brand-ink); }
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; transition: transform .2s ease;
}
.qa__sign::before { width: 14px; height: 2px; }
.qa__sign::after { width: 2px; height: 14px; }
.qa[open] .qa__sign::after { transform: scaleY(0); }
.qa__a { padding: 0 0 var(--sp-5); color: var(--text-3); font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--w-prose); }
.qa__a p + p { margin-top: var(--sp-3); }

/* —— 步骤 —— */
.step { background: var(--card); border-radius: var(--r-card); padding: var(--sp-6); box-shadow: inset 0 0 0 1px var(--line); height: 100%; }
.step__num { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 700; color: var(--brand-ink); line-height: 1; }
.step__title { font-size: var(--fs-h3); font-weight: 700; margin-top: 10px; }
.step__body { margin-top: 10px; color: var(--text-3); font-size: var(--fs-card); line-height: var(--lh-card); }

/* —— 筛选片 / 排序片 —— */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--tile); color: var(--text-2); font-family: var(--font-mono);
  font-size: var(--fs-small); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line);
}
.chip[aria-pressed="true"] { background: var(--brand-strong); color: #fff; box-shadow: none; }
.toggle {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--tile); border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px var(--line);
}
.toggle__label { font-size: var(--fs-card); color: var(--text-2); font-weight: 500; }
.toggle__track { width: 40px; height: 22px; border-radius: var(--r-pill); background: rgba(255,255,255,0.12); position: relative; flex: none; transition: background .15s; }
.toggle[aria-pressed="true"] .toggle__track { background: var(--brand-strong); }
.toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle[aria-pressed="true"] .toggle__track::after { transform: translateX(18px); }

/* —— 数据瓦片 / 事实 —— */
.tile { background: var(--tile); border-radius: var(--r-tile); padding: var(--sp-5); display: flex; flex-direction: column; gap: 6px; }
.tile__value { font-family: var(--font-mono); font-size: var(--fs-h2); font-weight: 900; color: var(--text); line-height: 1; }
.tile__label { font-size: var(--fs-small); color: var(--text-3); }

.fact { background: var(--tile); border-radius: var(--r-tile); padding: var(--sp-5); display: flex; flex-direction: column; gap: 8px; }
.fact__k { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-4); letter-spacing: .04em; text-transform: uppercase; }
.fact__v { font-size: var(--fs-h3); font-weight: 700; color: var(--text); }

/* —— 分类瓦片 —— */
.cat { background: var(--tile); border-radius: var(--r-tile); padding: var(--sp-5); display: flex; flex-direction: column; gap: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.cat__cn { font-size: var(--fs-h3); font-weight: 700; color: var(--text); }
.cat__en { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--brand-ink); letter-spacing: .08em; }

/* —— 渠道卡 —— */
.channel { background: var(--card); border-radius: var(--r-card); padding: var(--sp-6); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
.channel__name { font-size: var(--fs-h3); font-weight: 700; color: var(--text); }
.channel__tag { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--brand-ink); font-weight: 500; }
.channel__desc { font-size: var(--fs-card); line-height: var(--lh-card); color: var(--text-3); }
.channel__link { margin-top: auto; }

/* —— GitHub 单行入口 —— */
.gh-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.gh-row__title { font-size: var(--fs-h3); font-weight: 700; color: var(--text); }
.gh-row__desc { font-size: var(--fs-card); line-height: var(--lh-card); color: var(--text-3); margin-top: 6px; }
.gh-row__btn { flex: none; }
@media (max-width: 768px) {
  .gh-row { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
}

/* —— 权限 / 警示 —— */
.perm { padding: var(--sp-5) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.perm:first-child { border-top: none; }
.perm__name { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 700; color: var(--brand-ink); word-break: break-word; }
.perm__desc { color: var(--text-3); font-size: var(--fs-card); line-height: var(--lh-card); }

.warn { background: var(--tile); border-radius: var(--r-tile); padding: var(--sp-5); display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 1px var(--line); height: 100%; }
.warn__title { font-weight: 700; color: var(--text); font-size: var(--fs-body); }
.warn__desc { color: var(--text-3); font-size: var(--fs-card); line-height: var(--lh-card); }

/* —— 更新日志 —— */
.changelog { display: flex; flex-direction: column; gap: var(--sp-5); }
.changelog__item {
  background: var(--card); border-radius: var(--r-card); padding: var(--sp-6);
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-6);
}
.changelog__meta { display: flex; flex-direction: column; gap: 10px; }
.changelog__ver { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 700; color: var(--text); }
.changelog__date { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-4); }
.changelog__badge {
  align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 700;
  color: #fff; background: var(--brand-strong); border-radius: var(--r-pill); padding: 4px 12px;
}
.changelog__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.changelog__summary { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.changelog__points { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.changelog__points li { position: relative; padding-left: 20px; color: var(--text-3); font-size: var(--fs-card); line-height: var(--lh-card); }
.changelog__points li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-mark); }
.changelog__note { font-size: var(--fs-small); line-height: var(--lh-card); color: var(--text-4); border-top: 1px solid var(--line); padding-top: var(--sp-4); }

@media (max-width: 768px) {
  .changelog__item { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* —— 面板 —— */
.panel { background: var(--panel); border-radius: var(--r-panel); padding: var(--sp-8); box-shadow: inset 0 0 0 1px var(--line); }
.panel--compact { padding: var(--sp-7); }
.panel__label { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-4); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--sp-4); }

@media (max-width: 768px) {
  .panel { padding: var(--sp-6); }
  .panel--compact { padding: var(--sp-6); }
}

/* —— 对比表（compare 页） —— */
.cmp__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 8px; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.cmp th, .cmp td { padding: 12px 14px; border: 1px solid #e6e8ef; text-align: left; vertical-align: top; }
.cmp thead th { background: #f2f4fa; color: #1f2330; font-weight: 700; }
.cmp tbody th { background: #fafbfe; font-weight: 600; color: #5a6172; white-space: nowrap; }
.cmp .col-ts { background: rgba(47,109,246,0.06); }
.cmp thead .col-ts { background: rgba(47,109,246,0.12); }
.cmp .is-yes { color: #1f9d55; font-weight: 700; }
.cmp .is-no { color: #d6453d; font-weight: 700; }
.cmp .is-part { color: #d98a00; font-weight: 700; }
.cmp .ticks { line-height: 1.9; }