/* =============================================================
   i18n.css · 双语骨架专用样式
   仅补充 styles.css 未覆盖的骨架组件：语言切换器 / 占位标记 /
   骨架提示条 / 移动端导航开合。品牌令牌沿用 :root（在 styles.css）。
   ============================================================= */

/* ---------- 语言切换下拉（nav 与 footer 复用）---------- */
/* 触发器样式贴合导航栏：表面底色 + 细边框 + 圆角胶囊，含地球图标与箭头 */
.lang-switch {
  position: relative;
  display: inline-block;
  font-size: var(--fs-sm);
  vertical-align: middle;
}
.lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.lang-switch__trigger:hover,
.lang-switch.is-open .lang-switch__trigger {
  border-color: var(--color-primary-600);
  color: var(--color-primary-700);
  background: var(--color-primary-50);
}
.lang-switch__trigger .icon-globe { width: 16px; height: 16px; flex: none; color: currentColor; }
.lang-switch__caret {
  width: 12px; height: 12px; flex: none; color: currentColor;
  transition: transform .2s ease;
}
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }

/* 下拉菜单：绝对定位、品牌表面、阴影、悬停/当前态高亮 */
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 168px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.lang-switch.is-open .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-switch__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.lang-switch__item:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}
.lang-switch__item[aria-current="true"] {
  color: var(--color-primary-700);
  background: var(--color-primary-50);
}
.lang-switch__item .check { width: 14px; height: 14px; flex: none; color: var(--color-primary-600); opacity: 0; }
.lang-switch__item[aria-current="true"] .check { opacity: 1; }

/* 页脚中的切换器向上展开，避免被视口底部裁切 */
.footer__lang .lang-switch__menu { top: auto; bottom: calc(100% + 8px); }

/* 窄屏下顶栏语言切换适度压缩，避免溢出 */
@media (max-width: 1023px) {
  .nav__right { flex-wrap: wrap; row-gap: 8px; }
  .nav__right .lang-switch__trigger { padding: 7px 12px; font-size: 13px; }
}

/* footer 中的整行语言切换 */
.footer__lang { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.footer__lang span.label { font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* ---------- 政策页：目录 / 数据表 / 列表 ---------- */
.legal-toc {
  margin: 0; padding-left: 22px;
  columns: 2; column-gap: 40px;
  font-size: var(--fs-sm); color: var(--color-text-secondary);
}
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }
.legal-toc a { color: var(--color-primary-700); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
@media (max-width: 767px) { .legal-toc { columns: 1; } }

.ptable {
  width: 100%; border-collapse: collapse;
  margin: var(--space-4) 0; font-size: var(--fs-sm);
}
.ptable th, .ptable td {
  border: 1px solid var(--color-border);
  padding: 10px 12px; text-align: left; vertical-align: top;
}
.ptable th {
  background: var(--color-primary-50); color: var(--color-primary-700);
  font-weight: var(--fw-semibold); white-space: nowrap;
}
.ptable td:first-child { font-weight: var(--fw-medium); width: 220px; }

/* 窄屏：表格等比压进屏幕——表头允许换行、字号与内边距收窄（2026-10-25 手机自适应修复 2） */
@media (max-width: 640px) {
  .ptable { font-size: 13px; }
  .ptable th { white-space: normal; }
  .ptable td:first-child { width: auto; }
  .ptable th, .ptable td { padding: 8px 9px; }
}
/* 极窄屏兜底：仍放不下时转块级横向滚动，避免撑破页面 */
@media (max-width: 380px) {
  .ptable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.legal-list { padding-left: 22px; margin: var(--space-3) 0; }
.legal-list li { margin-bottom: 8px; color: var(--color-text-secondary); }

/* ---------- 占位标记 ---------- */
.ph-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-100);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  margin-left: 10px;
  vertical-align: middle;
}
/* 中文版占位标记（与英文版共用 .ph-tag，文案不同） */

/* 占位卡片：虚线边框 + 浅底，明确提示“待填充” */
.card--ph {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: var(--color-surface-2);
}
.card--ph .card__desc { color: var(--color-text-tertiary); }

/* ---------- 骨架提示条（置于页眉之下，说明当前为规划骨架）---------- */
.skel-banner {
  background: var(--color-primary-50);
  border-bottom: 1px solid var(--color-primary-100);
}
.skel-banner .container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: var(--fs-sm);
  color: var(--color-primary-700);
}
.skel-banner .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent-500); flex: none;
}

/* ---------- 编号步骤（通用，用于流程占位）---------- */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-600);
  color: #fff;
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}

/* ---------- 移动端导航开合（仅当无抽屉组件时启用）---------- */
@media (max-width: 1023px) {
  .nav__links {
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--color-surface);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3) var(--container-pad);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-2);
    display: none;
    z-index: 90;
  }
  .nav__links.is-open { display: flex; }
  .nav__links li { border-bottom: 1px solid var(--color-border); }
  .nav__links .nav__link { padding: 12px 4px; width: 100%; }
  .hamburger { display: inline-flex; }
}
@media (min-width: 1024px) {
  .hamburger { display: none; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .nav__links, .lang-switch__trigger, .lang-switch__caret, .lang-switch__menu { transition: none; }
}