/* ============================================================
   流量统计（/zh/traffic_stats/index.html）
   配套脚本：./app.js
   设计约定：
   - 全部色值取自主题 CSS 变量（--surface-* / --btn-* / --chart-*），
     由 /css/data/theme-default.json 注入，此处禁止写死颜色
   - 导航条复用 /css/page/zh-page-shell.css 的 .zh-nav 公共样式，
     本文件只写页面专属的指标卡 / 趋势图 / 提示样式
   - 命名空间 .ts-*，与 traffic-modal.css 的 .traffic-* 互不干扰
   ============================================================ */

/* ===== 内容栈：修复顶部过度留白 =====
   原 .ts-nav 自带大 margin + .ts-head 再加一层间距，
   与吸顶品牌栏之间空出大段死白。现改为内容栈整体收窄间距，
   首个卡片紧贴导航，导航吸顶逻辑沿用 zh-page-shell。 */
.ts-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;

  /* 吸顶导航尺寸变量（与 zh-page-shell 同口径） */
  --brand-h: 70px;
  --zh-nav-h: 50px;
  --z-nav: 3;
}

@media (min-width: 1200px) {
  .main-stage:has(> .ts-stack) {
    --zh-index-w: 1040px;
    max-width: var(--zh-index-w);
  }
}

/* 桌面端顶部让位（让开固定品牌栏），与 zh-stack 同口径但不额外加高 */
@media (min-width: 641px) {
  .ts-stack { margin-top: 76px; }
}

@media (max-width: 640px) {
  .ts-stack {
    gap: 12px;
    --brand-h: 56px;
    --zh-nav-h: 50px;
    margin-top: -28px;
  }
}

/* 导航条吸顶：停靠在品牌栏下沿 */
.ts-stack .zh-nav {
  position: sticky;
  top: var(--brand-h);
  z-index: var(--z-nav);
}

/* ===== 页头：标题 + 更新时间 + 刷新 ===== */
.ts-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
}
.ts-head-icon {
  width: 24px;
  height: 24px;
  flex: none;
  filter: var(--icon-filter);
}
.ts-head-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ts-head-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text);
}
.ts-head-meta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ===== 图表类型切换：饼图 / 折线图 / 柱状图 =====
   视觉沿用 .zh-social-btn 同一语言（圆角胶囊 + 激活渐变），与全站统一 */
.ts-chart-type {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.ts-chart-type-btn {
  padding: 6px 15px;
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  background: var(--toggle-bg);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.28s var(--smooth), background 0.28s var(--smooth),
              border-color 0.28s var(--smooth), transform 0.3s var(--elastic-soft);
}
.ts-chart-type-btn:hover {
  color: var(--text);
  background: var(--toggle-bg-hover);
  border-color: var(--btn-border-hover);
}
.ts-chart-type-btn:active { transform: scale(0.97); }
.ts-chart-type-btn.active {
  color: var(--btn-text);
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  box-shadow: 0 4px 14px var(--accent-glow);
}
.ts-chart-type-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ===== 通用按钮 ===== */
.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 7px 15px;
  border: 1px solid var(--btn-primary-border);
  border-radius: 999px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  will-change: transform;
  transition: background 0.28s var(--smooth), transform 0.28s var(--elastic-soft),
              opacity 0.2s ease;
}
.ts-btn:hover { background: var(--btn-primary-bg-hover); }
.ts-btn:active { transform: scale(0.96); }
.ts-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ts-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.ts-btn img {
  width: 15px;
  height: 15px;
  flex: none;
  filter: var(--icon-filter);
}
/* 加载中：图标缓慢自转，给出进行中反馈 */
.ts-btn[data-busy="true"] img { animation: ts-spin 1.1s linear infinite; }
@keyframes ts-spin { to { transform: rotate(360deg); } }
.anim-slow .ts-btn[data-busy="true"] img { animation-duration: 2s; }

/* ===== 状态提示（加载 / 失败）===== */
.ts-status {
  padding: 34px 14px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-dim);
}
.ts-status[hidden] { display: none; }

.ts-body { display: flex; flex-direction: column; gap: 14px; }
.ts-body[hidden] { display: none; }

/* ===== 区块容器（苹果风圆角卡片）===== */
.ts-panel {
  padding: 16px;
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--surface-card-shadow);
}

/* ===== 核心指标卡 ===== */
.ts-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.ts-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--surface-card-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--surface-card-shadow);
  transition: border-color 0.3s var(--smooth);
}
.ts-card:hover { border-color: var(--card-hover-border); }
.ts-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.ts-card-icon {
  width: 14px;
  height: 14px;
  flex: none;
  filter: var(--icon-filter);
}
.ts-card-value {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ts-card-value.is-na {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-faint);
  line-height: 1.5;
}
/* 指标卡说明小字（如「CF 不提供该指标」） */
.ts-card-note {
  font-size: 10.5px;
  color: var(--text-faint);
  line-height: 1.4;
}

/* ===== 趋势图 ===== */
.ts-chart-wrap {
  position: relative;
  height: 280px;
}
.ts-chart {
  display: block;
  width: 100%;
  height: 100%;
}

/* 饼图说明条：仅在饼图视图显示（app.js 控制 hidden） */
.ts-pie-note {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}
.ts-pie-note[hidden] { display: none; }

/* ===== 热门页面：数据不可用提示 ===== */
.ts-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  border: 1px dashed var(--surface-card-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dim);
  text-align: center;
  justify-content: center;
}

/* ===== 区块标题 ===== */
.ts-section-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.3px;
}

/* ===== 数据说明 ===== */
.ts-meta {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* ===== 移动端适配 ===== */
@media (max-width: 640px) {
  .ts-cards { grid-template-columns: repeat(2, 1fr); }
  .ts-card-value { font-size: 19px; }
  .ts-head { padding: 12px; }
  .ts-head-title { font-size: 15.5px; }
  .ts-chart-wrap { height: 210px; }
}