/* ==========================================================================
   shops.css — 已监控页(/shops)与站点详情页(/shops/{id})的页面级布局覆盖
   通用组件样式在 style.css / components.css;本文件只调容器与密度。
   加载于两者之后(base.html extra_css),同特异性靠源顺序覆盖。
   ========================================================================== */

/* ============================== 监控站点页 KPI 紧凑条 ============================== */
/* 三个大格压成一行紧凑 stat:数值加粗 + 标签灰小字同行,高度减半 */
.kpi .cell {
  flex-direction: row;
  align-items: baseline;
  gap: 7px;
  padding: 8px 16px;
  min-width: 0;
}
.kpi .n { font-size: 17px; }
.kpi .l { font-size: 12px; white-space: nowrap; }

/* ============================== 监控站点页表格 ============================== */
/* 首字母图标缩小一档 */
.cell-domain .ic { width: 14px; height: 14px; font-size: 8px; }

/* AI 摘要单行截断,全文走 title 悬浮 */
.cell-domain small.shop-summary {
  max-width: 42ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 月访问量 + 环比 chip 同一格同一行;表头双排序入口 */
.vis-cell { white-space: nowrap; }
.vis-cell .growth-chip { margin-left: 6px; }
.vis-cell small { display: inline; margin-left: 6px; color: var(--mut-2); }
.vis-th a { display: inline; }
/* 表头副行显示主流月份(参考 prospects .th-period);行内仅在与主流不同时才出现月份小字 */
.vis-th .th-period { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; color: var(--mut); letter-spacing: 0; }

/* 监控状态:三态徽标 + 相对时间合并一行,覆盖能力移入 td title */
.mon-cell { white-space: nowrap; }
td.mon-cell { display: flex; align-items: center; gap: 8px; }
.mon-cell .badge { margin-bottom: 0; }

/* ============================== 站点详情 头部卡(两栏) ============================== */
.dh-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.dh-left {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* AI 摘要最多两行 */
.dh-left .shop-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 62ch;
}
.dh-left .monitor-line { margin-top: 4px; }
.monitor-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
}
.dh-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.dh-metric { display: flex; align-items: baseline; gap: 8px; }
.dh-metric .visits-big { font-size: 30px; }
.dh-vlabel { font-size: 13px; }
.dh-right .head-links { margin-top: 6px; justify-content: flex-end; }

/* ============================== 站点详情 流量分栏 ============================== */
.traffic-split {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.traffic-split .ts-main { flex: 1 1 62%; min-width: 0; }
.traffic-split .ts-side {
  flex: 1 1 38%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 分栏内首个 h2 顶部对齐,去掉默认大 margin */
.traffic-split .ts-main > h2:first-child,
.traffic-split .ts-side > h2:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .traffic-split { flex-direction: column; }
  .traffic-split .ts-main,
  .traffic-split .ts-side { flex: 1 1 auto; width: 100%; }
}
/* 摘要态:左栏退化成一行文字时不再撑满 62%,收缩为内容宽,右侧来源/国家卡吃掉余量 */
@media (min-width: 901px) {
  .traffic-split.ts-summary .ts-main { flex: 0 1 auto; }
}

/* ============================== 站点详情 来源指标水平条形 ============================== */
/* 每渠道一行:标签 + 细条(宽=百分比) + 数值。各渠道独立测量、天然重叠,不做堆叠条。 */
.ts-srcbars { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.ts-srcbar { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ts-srcbar-label { flex: 0 0 56px; color: var(--mut); }
.ts-srcbar-track {
  flex: 1 1 auto; min-width: 0; height: 6px;
  border-radius: 3px; background: var(--bd-2); overflow: hidden;
}
.ts-srcbar-fill { display: block; height: 100%; border-radius: 3px; background: var(--pri); }
.ts-srcbar-val { flex: 0 0 auto; font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; }
.ts-srcbar.paid   .ts-srcbar-fill { background: var(--pri); }
.ts-srcbar.social .ts-srcbar-fill { background: var(--up); }
.ts-srcbar.search .ts-srcbar-fill { background: var(--warn); }
.ts-srcbar.direct .ts-srcbar-fill { background: var(--flat); }

/* ============================== 站点详情 商品卡 footer 防踩踏 ============================== */
/* 热销榜卡片:价格独立一行 nowrap+ellipsis,"排名历史"链接下一行右对齐小一号、不断词 */
.bcard .board-foot {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
.bcard .board-foot .price {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bcard .board-foot a {
  align-self: flex-end;
  white-space: nowrap;
  font-size: 11px;
}

/* ============================== 站点详情 产品库网格 ============================== */
/* 卡片缩小一档:min 宽 200px → 150px,一行多放约 2 个 */
.lib-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* 产品库卡片同样防踩踏:价格截断不换行,徽标/排名历史链接不被挤压断词 */
.lib-grid .row-1 { min-width: 0; }
.lib-grid .row-1 .price { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lib-grid .row-1 .src-badge { flex: 0 0 auto; white-space: nowrap; }
.lib-grid .row-2 .history-link { flex: 0 0 auto; }

/* ============================== 小屏:头部保持完整,状态和动作不互相挤压 ============================== */
@media (max-width: 720px) {
  .page-head { gap: 6px 10px; }
  .page-head .primary-link { margin-left: 0; }
  .dh-split { gap: 12px; }
  .dh-right {
    flex: 1 1 100%;
    align-items: flex-start;
    text-align: left;
  }
  .dh-right .head-links { justify-content: flex-start; }
  .dh-metric .visits-big { font-size: 26px; }
  .mon-cell { min-width: 168px; }
}