/* ============================================================
   七日焦点（近 7 天热点词）· 黑金主题 · 排名条形榜
   ------------------------------------------------------------
   只服务 mobile/js/hotspots.js 渲染的 .hs-* 结构（类名全部 hs- 前缀，
   不与 mobile.css / overview.css 既有选择器冲突，变量局部化在 .hs-panel 上，
   不改 :root）。

   2026-09-29 用户定稿（替换 PIL-102 的圆形轨道图）：
   · 设计真相源：design-ref/mobile-gold-v2-20260929.html（回最初设计稿的
     「本周热点 TOP」形态）——序号 + 词 + 篇数条 + 准确篇数，单列降序。
   · 条长 = 该词篇数 ÷ 本业务最大篇数，走 barLevel 的 **5% 档位**（21 个确定
     取值），由 JS 经 CSSOM 写 width——CSP 的 style-src 'self' 禁止 HTML 内联
     style 属性，CSSOM 赋值不受限（本仓库既有做法，如搜索框的 flex）。
   · 篇数缺失（或真实为零）时**不画条**（条形只留空轨道底槽）：
     「不知道」不能画成「没有热度」；文字上「篇数缺失」与「0 篇」可辨别。
   · 颜色从不独占信息：序号、「n 篇」数字与条长同时在场，色觉障碍用户不漏信息；
     读屏用户由 <ol> 的序号与 aria-label 里的序号/词/篇数拿到全部事实；
     条形整体 aria-hidden。
   · 每行是整块按钮，min-height 走 --tap（≥44px），键盘可聚焦（focus-visible 金色描边）。
   · 不渲染「比较说明」：客户端不承担上期/环比口径。
   · 面板内嵌在概览仪表卡内（overview.js 合并卡），不再自带业务选择器
     （切换入口在底栏，见 app.js）。

   本层仍然只是一层视觉：不改任何数据结构、请求时序或路由行为。
   ============================================================ */

.hs-panel {
  --hs-text: #ecebe8;
  --hs-gold: #f2d4a4;
  --hs-copper: #cc9166;
  --hs-track: rgba(255, 255, 255, 0.09);

  margin-top: 0; /* 内嵌在仪表卡内，纵向节奏由卡与分隔线承担 */
}

.hs-host { margin-top: 0; }

.hs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.hs-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hs-gold);
}
.hs-scope {
  font-size: 11.5px;
  color: rgba(236, 235, 232, 0.42);
  white-space: nowrap;
}

/* ---------- 排名榜容器 ----------
   一个 <ol>：位置即频率（服务端已按篇数降序，面板不再重排）。
   单列整宽行，行间发丝线。display:grid 在 Safari/VoiceOver 下会吃掉列表语义，
   所以 <ol> 显式带 role="list"（见 hotspots.js）。 */
.hs-ranked {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- 每行都是整宽按钮（点哪里都进钻取，触控高度 ≥44px）----------
   列：序号 / 词（可收缩，省略号截断展示、完整词面在 aria 里） / 条 / 篇数。 */
.hs-word {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(48px, 88px) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap, 44px);
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hs-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* 行分隔：只在与上一行之间画一条发丝线。 */
.hs-ranked-item + .hs-ranked-item .hs-word {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
/* 焦点描边内收：整宽行上不会越出容器造成横向溢出。 */
.hs-word:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: -2px; }

/* 序号与篇数：小号文字必须过 WCAG AA。
   0.34 在 #0e0e10 上实测仅 2.75:1，12px 小字达不到 AA（需 4.5:1）——
   与 mobile.css 里 --label-3 从 0.36 提到 0.58 是同一个坑，勿回退。
   序号用铜金强调（榜的次序感），篇数用金色——两者都 ≥4.5:1（hero 卡深底实测）。 */
.hs-word-rank {
  font-size: 12px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--hs-copper);
}
.hs-word-count {
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--hs-gold);
}
.hs-word-label {
  min-width: 0;
  /* 长词不撑破布局：展示上单行省略，完整词面仍由 aria 转述（keywordAria）。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  line-height: 1.3;
  color: var(--hs-text);
}

/* ---------- 篇数条：长度 = 篇数 ÷ 本业务最大篇数（barLevel 5% 档位）----------
   条是装饰（篇数已由文本与 aria 承载），整个条 aria-hidden；
   底槽是所有行等长的淡轨道，填充电平由 JS 写在 .hs-bar-fill 的 width 上。 */
.hs-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--hs-track);
  overflow: hidden;
}
.hs-bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(204, 145, 102, 0.55), var(--hs-gold));
  box-shadow: 0 0 6px rgba(242, 212, 164, 0.30);
}
/* 缺数据/零篇：底槽更淡一档，明确「这里没有画任何热度」。 */
.hs-bar-empty { background: rgba(255, 255, 255, 0.05); }

/* ---------- 四档：字重与明度逐级递减 ----------
   档位来自 篇数 ÷ 本业务最大篇数（hotspots.js weightTier），而列表已按篇数降序，
   所以「首位最重最亮、后续逐级降低」是数据本身推出来的，不是按行号硬编的。
   数字与序号始终在场：颜色与字重只是辅助编码。条长另有 barLevel 的独立编码。 */
.hs-w0 .hs-word-label { color: rgba(236, 235, 232, 0.64); }

.hs-w1 .hs-word-label { color: rgba(236, 235, 232, 0.80); }

.hs-w2 .hs-word-label { color: rgba(240, 226, 205, 0.93); font-weight: 600; }

.hs-w3 .hs-word-label { color: rgba(242, 229, 205, 0.97); font-weight: 600; }
.hs-w3 .hs-word-count { color: rgba(240, 226, 205, 0.92); }

/* 首位：金色词面 + 克制的光感（很淡的一层文字辉光）。 */
.hs-w4 .hs-word-label {
  color: var(--hs-gold);
  font-weight: 600;
  text-shadow: 0 0 14px rgba(242, 212, 164, 0.20);
}
.hs-w4 .hs-word-count { font-weight: 700; }
.hs-w4 .hs-word-rank { color: rgba(242, 212, 164, 0.72); }

/* ---------- 钻取页（#/news/keyword/…）---------- */
.hs-detail-head { margin: 0 0 10px; }
.hs-detail-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  overflow-wrap: anywhere;
}
.hs-detail-sub {
  margin: 0;
  font-size: 12.5px;
  color: rgba(236, 235, 232, 0.58);
}
.hs-keyword-item .news-meta { gap: 8px; }

/* ---------- 状态：加载 / 缺数据 ---------- */
.hs-skeleton {
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.03) 70%);
  background-size: 220% 100%;
  animation: hs-shimmer 1.4s linear infinite;
}
.hs-skeleton + .hs-skeleton { margin-top: 6px; }
@keyframes hs-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* ---------- 窄屏（≤379px，含 320/360）：只收紧留白与间隙 ----------
   条形列会按 minmax(48px, 88px) 自行收缩，序号列固定 24px 不缩；
   真正防溢出的是 minmax(0,1fr) 的词列与省略号截断。 */
@media (max-width: 379px) {
  .hs-word { gap: 7px; padding: 8px 1px; grid-template-columns: 22px minmax(0, 1fr) minmax(40px, 72px) auto; }
  .hs-word-label { font-size: 13.5px; }
}

/* ---------- 降级：不做骨架微光，也不做首位辉光 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hs-skeleton { animation: none !important; }
  .hs-w4 .hs-word-label { text-shadow: none; }
  .hs-bar-fill { box-shadow: none; }
}