/* ==========================================================================
   components.css — 跨页复用的零件：按钮、筛选片、卡片、序号、列表、问答、
   步骤、参数行、提示条、图位、二维码、标签
   ========================================================================== */

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 11px 20px;
  border-radius: var(--r-btn);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  transition: background-color 0.15s ease;
}

.btn:hover {
  background: #cc0010;
}

/* 次级动作：描边款。不用 border，避免 1px 实边框把按钮撑高 2px */
.btn--ghost {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn--ghost:hover {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px #d8dce3;
}

.btn--lg {
  padding: 16px 28px;
  border-radius: var(--r-tile);
  font-size: 16px;
  font-weight: 500;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   筛选片 / 分类 chips
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px;
  border-radius: 16px;
  background: #f4f5f7;
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  background: #ebedf1;
}

.chip[aria-pressed="true"],
.chip--active {
  background: var(--brand);
  color: #fff;
  font-weight: 500;
}

.chip[aria-pressed="true"]:hover {
  background: var(--brand);
}

/* 描边款：白底 + 细线，用于筛选条 */
.chip--outline {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 8px 16px;
  border-radius: 18px;
}

.chip--outline:hover {
  background: var(--surface-2);
}

.chip--outline[aria-pressed="true"] {
  background: var(--brand);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   卡片
   -------------------------------------------------------------------------- */
.card {
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.card--pad {
  padding: 22px 26px;
}

.card__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.5;
}

/* 卡片里的小节标题（浅底红字） */
.card__eyebrow {
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   序号块（分流卡 / 步骤卡）
   -------------------------------------------------------------------------- */
.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brand-surface);
  color: var(--brand-ink);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.num--lg {
  width: auto;
  height: auto;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   文本层级
   -------------------------------------------------------------------------- */
.meta {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.eyebrow {
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.link-more {
  flex: none;
  color: var(--brand-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

.link-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 面包屑 */
.crumbs {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.crumbs a:hover {
  color: var(--brand-ink);
}

/* --------------------------------------------------------------------------
   竖排列表（榜单、目录、流程）
   -------------------------------------------------------------------------- */
.list {
  display: flex;
  flex-direction: column;
}

.list__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 0;
}

.list__row + .list__row {
  border-top: 1px solid var(--line-soft);
}

.list__idx {
  flex: none;
  width: 22px;
  color: var(--brand-ink);
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.list__idx--dim {
  color: #b0b5bc;
}

.list__label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
}

.list__to {
  margin-inline-start: auto;
  padding-inline-start: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   步骤卡 / 参数行 / 提示条
   -------------------------------------------------------------------------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 18px 20px;
  border-radius: var(--r-tile);
  background: var(--surface-2);
}

.steps li {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.steps ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* 等宽参数表：用 dl 的语义，但用 flex 对齐数值 */
.spec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: var(--r-tile);
  background: var(--surface-2);
}

.spec__row {
  display: flex;
  gap: var(--sp-4);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

.spec__key {
  flex: none;
  width: 4.2em;
  color: var(--text);
  font-weight: 500;
}

.spec__val {
  min-width: 0;
}

/* 提示条：浅红底 + 左侧红竖条 */
.notice {
  display: flex;
  gap: var(--sp-3);
  padding: 14px 18px;
  border-radius: 8px;
  background: var(--brand-surface);
  color: #8a1b22;
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.notice::before {
  content: "";
  flex: none;
  width: 3px;
  border-radius: 2px;
  background: var(--brand-mark);
}

.notice ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.notice--flush {
  padding: 0;
  background: none;
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   折叠问答（<details>）
   -------------------------------------------------------------------------- */
.qa {
  border-top: 1px solid #e4e7ec;
}

.qa:first-of-type {
  border-top: 0;
}

.qa > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: 16px 26px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
}

.qa > summary::-webkit-details-marker {
  display: none;
}

.qa > summary::after {
  content: "＋";
  margin-inline-start: auto;
  flex: none;
  color: var(--text-muted);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
}

.qa[open] > summary::after {
  content: "－";
}

.qa > summary:hover {
  color: var(--brand-ink);
}

.qa__body {
  padding: 0 26px 18px;
  color: var(--text-body);
  font-size: var(--fs-sm);
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   图位 / 截图 / 二维码
   -------------------------------------------------------------------------- */
.media {
  overflow: hidden;
  border-radius: var(--r-tile);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* 手机截图位：固定高度，宽度按列宽，图片顶部对齐裁切 */
.media--shot {
  height: 600px;
}

/* 长截图铺满必然裁切：从顶部开始取，读起来像一张完整的 App 首屏，
   比从中间随便切一刀更可信（源图顶部没有多余状态栏或留白） */
.media--shot > img {
  object-position: center top;
}

.media--phone {
  width: 232px;
  max-width: 100%;
  height: 392px;
  margin-inline: auto;
  border-radius: var(--r-card);
}

.media--aside {
  height: 470px;
}

/* 文章页右栏的大图位 */
.media--phone-lg {
  width: 240px;
  max-width: 100%;
  height: 500px;
  margin-inline: auto;
  border-radius: var(--r-card);
}

@media (max-width: 1024px) {
  .media--shot {
    height: 480px;
  }
}

@media (max-width: 640px) {
  .media--shot {
    height: 420px;
  }
  .media--aside {
    height: 380px;
  }
}

/* 二维码：白底组件放进白底容器会丢边界，必须补一圈细线 */
.qr-plate {
  flex: none;
  width: 102px;
  padding: 5px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}

.qr-plate img {
  width: 100%;
}

/* --------------------------------------------------------------------------
   状态标
   -------------------------------------------------------------------------- */
.badge {
  flex: none;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--brand-surface);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.badge--mute {
  background: #f2f3f6;
  color: var(--text-muted);
}