/* ==========================================================================
   components.css —— 按钮 / 胶囊 / 卡片 / 图标块 / 图位 / 筛片 / 问答 / 浮层
   ========================================================================== */

/* ---- 小标签 kicker ----------------------------------------------------- */
.kicker {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--gold-ink);
  letter-spacing: 0.12em;
}

.kicker--brand { color: var(--brand-ink); }

/* ---- 副题 / 导语 ------------------------------------------------------- */
.sub {
  color: var(--text-muted);
  font-size: var(--fs-15);
}

.lead {
  color: var(--text-body);
  font-size: var(--fs-16);
  line-height: 1.85;
}

/* ---- 按钮 -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 24px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  border-radius: var(--r-lg);
  transition: background-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn--primary {
  color: var(--text-on-brand);
  background: var(--brand);
  box-shadow: 0 8px 22px rgba(207, 58, 82, 0.28);
}

.btn--primary:hover {
  background: #e0455e;
  transform: translateY(-1px);
}

/* 次要动作：浅色底上不要用浅灰实心（看着像禁用），用描边款。
   用 box-shadow 而不是 border —— 1px 实边框会把按钮撑高 2px，跟同排实心按钮对不齐。 */
.btn--ghost {
  color: var(--text-body);
  box-shadow: inset 0 0 0 1px var(--line-ghost);
}

.btn--ghost:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.btn--sm { padding: 11px 22px; border-radius: var(--r-md); }
.btn--lg { padding: 15px 36px; border-radius: var(--r-lg); font-size: var(--fs-16); }
.btn--lg.btn--ghost { padding-inline: 32px; }

.btn--block {
  width: 100%;
  padding-block: 17px;
  font-size: var(--fs-16);
}

.btn--fixed {
  width: 280px;
  padding-block: 17px;
  font-size: var(--fs-16);
}

/* ---- 胶囊标签 ---------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  /* 胶囊的天性就是贴合内容：必须挡掉纵向 flex 默认的 stretch，
     否则放进任何 flex column 容器都会被拉成整行宽的一条 */
  align-self: flex-start;
  padding: 5px 14px;
  color: var(--brand-ink);
  font-size: var(--fs-12);
  line-height: 1.6;
  background: var(--bg-tint);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}

.pill--gold {
  color: var(--gold-ink);
  background: var(--bg-tint-gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.pill--solid {
  color: var(--text-on-brand);
  font-weight: 500;
  background: var(--brand);
  box-shadow: none;
}

.pill--muted {
  color: var(--gold-ink);
  background: #1c1626;
  box-shadow: none;
}

.pill--lg { padding: 8px 20px; font-size: var(--fs-13); }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  /* 胶囊已改为贴合内容，这里用 center 让不同尺寸的胶囊在同一行里居中对齐 */
  align-items: center;
  gap: var(--sp-3);
}

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

.card--gold { box-shadow: inset 0 0 0 1px var(--gold); }
.card--brand { box-shadow: inset 0 0 0 1px var(--brand-accent); }
.card--abyss { background: var(--bg-abyss); box-shadow: inset 0 0 0 1px var(--brand-accent); }

/* ---- 图标块 ------------------------------------------------------------ */
.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--bg);
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  font-weight: 700;
  background: var(--brand-accent);
  border-radius: var(--r-xs);
}

.icon-tile--gold { background: var(--gold); }

/* ---- 图位 -------------------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-card-2);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame--ratio-3x2 { aspect-ratio: 3 / 2; }
.frame--ratio-16x9 { aspect-ratio: 16 / 9; }
.frame--ratio-1x1 { aspect-ratio: 1 / 1; }

/* ---- 数据条 ------------------------------------------------------------ */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.stat__num {
  color: var(--brand-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.1;
}

.stat__num--gold { color: var(--gold); }

.stat__label {
  color: var(--text-muted);
  font-size: var(--fs-13);
}

/* ---- 筛片 -------------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.filter {
  display: inline-flex;
  align-items: center;
  min-height: 40px;      /* 触控目标：手机上会被提到 44px */
  padding: 8px 20px;
  color: var(--text-muted);
  font-size: var(--fs-13);
  background: var(--bg-card-2);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.filter:hover { color: var(--text); }

.filter[aria-pressed="true"] {
  color: var(--text-on-brand);
  font-weight: 500;
  background: var(--brand);
  box-shadow: none;
}

/* ---- 提示条 ------------------------------------------------------------ */
.notice {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-7);
  background: var(--bg-tint);
  border-radius: var(--r-lg);
}

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

.notice__text {
  color: var(--text-muted);
  font-size: var(--fs-13);
}

/* ---- 问答 -------------------------------------------------------------- */
.acc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.acc__item {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--line);
}

.acc__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  color: var(--text);
  font-size: var(--fs-15);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

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

.acc__item summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--gold-ink);
  font-family: var(--font-latin);
  font-size: var(--fs-20);
  line-height: 1;
}

.acc__item[open] summary::after { content: "−"; }

.acc__item p {
  padding: 0 var(--sp-6) var(--sp-5);
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.8;
}

/* ---- 浮层：原生 dialog ------------------------------------------------ */
/* 灯箱 */
.lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1100px, 100% - 32px);
  max-width: none;
  max-height: calc(100% - 32px);
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
}

.lightbox[open] { display: flex; }

.lightbox::backdrop { background: rgba(4, 5, 9, 0.92); }

.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 96px);
  width: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: rgba(16, 19, 29, 0.86);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line);
}

.lightbox__close {
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: var(--fs-18);
}

.lightbox__nav {
  top: 50%;
  width: 52px;
  height: 52px;
  font-size: var(--fs-24);
  transform: translateY(-50%);
}

.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

.lightbox__close:hover,
.lightbox__nav:hover {
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--brand-accent);
}

/* ---- 提示气泡 ---------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: var(--z-dialog);
  max-width: min(520px, calc(100vw - 32px));
  padding: 14px 22px;
  color: var(--text);
  font-size: var(--fs-13);
  text-align: center;
  background: var(--bg-card-2);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 34px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}

.toast[data-open="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- 组件级响应式（必须跟组件同文件，否则被后加载的规则静默盖掉） ------ */
@media (max-width: 1080px) {
  /* 触控目标：平板也算触屏（Touch target ≥ 44px，WCAG 2.5.5 / iOS HIG） */
  .btn { min-height: var(--tap); padding: 12px 22px; }
  .filter { min-height: var(--tap); padding: 10px 18px; }
}

@media (max-width: 900px) {
  .btn--fixed { width: 100%; }

  .lightbox__nav {
    width: 44px;
    height: 44px;
  }

  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
}

@media (max-width: 560px) {
  .notice {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-5);
  }

  .tbl { min-width: 460px; font-size: var(--fs-13); }
  .tbl th,
  .tbl td { padding: 11px var(--sp-4); }
}

/* ---- 触屏：悬停效果不要粘在手指上 -------------------------------------- */
/* 手机点一下就“保留” hover 态，会出现按钮一直飘着、卡片一直发光的假态。
   统一在“没有真悬停能力”的设备上把位移/发光类 hover 关掉（颜色变化保留）。 */
@media (hover: none) {
  .btn:hover { transform: none; }
  .btn--primary:hover { background: var(--brand); transform: none; }
  .filter:hover { box-shadow: inset 0 0 0 1px var(--line); }
  .filter[aria-pressed="true"]:hover { background: var(--brand); box-shadow: none; }
}

/* ---- 面包屑 ------------------------------------------------------------ */
.crumbs {
  padding-top: var(--sp-6);
  color: var(--text-dim);
  font-size: var(--fs-13);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.crumbs li + li::before {
  content: "›";
  margin-right: var(--sp-2);
  color: var(--gold-ink);
}

.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text); }

/* ---- 资料对照表 -------------------------------------------------------- */
.tbl-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* 表内横滑到底后不要连带把整页带走 */
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--line);
  /* 左右滑动的“提示阴影”：能滑的时候才出现（靠 background-attachment 的 local/scroll 组合） */
  background-image:
    linear-gradient(to right, var(--bg-card) 30%, rgba(16, 19, 29, 0)),
    linear-gradient(to left, var(--bg-card) 30%, rgba(16, 19, 29, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

.tbl {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.tbl caption {
  padding: var(--sp-5) var(--sp-6);
  color: var(--gold-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  font-weight: 700;
  text-align: left;
}

.tbl th,
.tbl td {
  padding: 14px var(--sp-6);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
  border-top: 1px solid var(--line);
}

.tbl th {
  color: var(--text);
  font-weight: 500;
  background: var(--bg-card-2);
}

.tbl td { color: var(--text-muted); }