/* ============================================================
   瓜田火苗 · 热度徽章（方案一）  heat-flame.css
   ------------------------------------------------------------
   零依赖：直接引入即可用。
   令牌继承：全部颜色/字体走 var(--令牌, 兜底值)，
   若你的站点已定义 --cinnabar / --amber / --ink-3 / --font-mono
   （如瓜田 site.css），徽章自动跟随站点主题与夜览变色。
   ============================================================ */

/* ---------- 徽章容器 ---------- */
.hz-flame {
  /* 分档色，默认按「爆」档；JS 或手写 tier-* 类切换 */
  --heat-c: var(--cinnabar, #D62839);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  font-family: var(--font-mono, ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace);
}
.hz-flame .hz-num {
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--heat-c);
  font-variant-numeric: tabular-nums;   /* 数字等宽，滚动计数时不抖 */
}
.hz-flame .hz-unit {
  font-size: 10px;
  color: var(--ink-3, #868D94);
  margin-left: -3px;
}

/* ---------- 三档热度：≥80 爆 / 50–79 热 / <50 温 ---------- */
.hz-flame.tier-high { --heat-c: var(--cinnabar, #D62839); }
.hz-flame.tier-mid  { --heat-c: color-mix(in srgb, var(--cinnabar, #D62839) 55%, var(--amber, #A35D00)); }
.hz-flame.tier-low  { --heat-c: var(--amber, #A35D00); }

/* 档位越低，火苗越小 */
.hz-flame.tier-low svg { transform: scale(.82); }
.hz-flame.tier-mid svg { transform: scale(.92); }

/* ---------- 火焰图标：后层光晕 + 前层火苗 + 火星 ---------- */
.hz-flame svg { width: 20px; height: 20px; overflow: visible; }

.hz-flame .fl-back {
  fill: var(--amber, #A35D00);
  opacity: .35;
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: fl-pulse 1.6s ease-in-out infinite;
}
.hz-flame .fl-front {
  fill: var(--heat-c);
  transform-box: fill-box;
  transform-origin: 50% 94%;
  animation: fl-flick 1.15s ease-in-out infinite;
}
/* 高热专属：外发光 */
.hz-flame.tier-high .fl-front {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--heat-c) 60%, transparent));
}

/* 火星（仅高热档可见） */
.hz-flame .fl-emb { fill: var(--heat-c); opacity: 0; }
.hz-flame.tier-high .fl-emb { animation: fl-rise 1.8s ease-out infinite; }
.hz-flame.tier-high .fl-emb.e2 { animation-delay: .9s; }

/* ---------- 加大版（头条 / 详情页） ---------- */
.hz-flame--lg svg { width: 26px; height: 26px; }
.hz-flame--lg .hz-num { font-size: 19px; }
.hz-flame--lg .hz-unit { font-size: 12px; }

/* ---------- 动效关键帧（只动 transform / opacity，60fps） ---------- */
@keyframes fl-flick {          /* 火苗抖动 */
  0%, 100% { transform: scaleY(1) skewX(0deg); }
  22%      { transform: scaleY(1.07) skewX(-2.4deg); }
  48%      { transform: scaleY(.95) skewX(1.8deg); }
  74%      { transform: scaleY(1.04) skewX(-1.2deg); }
}
@keyframes fl-pulse {          /* 光晕呼吸 */
  0%, 100% { transform: scale(1); opacity: .32; }
  50%      { transform: scale(1.13); opacity: .5; }
}
@keyframes fl-rise {           /* 火星上升熄灭 */
  0%   { transform: translateY(0); opacity: 0; }
  18%  { opacity: .9; }
  100% { transform: translateY(-7px); opacity: 0; }
}

/* ---------- 无障碍：系统「减弱动效」→ 静态火焰，保留数字 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hz-flame .fl-back,
  .hz-flame .fl-front,
  .hz-flame .fl-emb { animation: none !important; }
  .hz-flame .fl-emb { display: none; }
}

/* 文章卡片定位：徽章悬浮在右上角，标题内容为它预留空间。 */
.lead, .row, .detail-head { position: relative; }
.heat-badge--card { position: absolute; top: 18px; right: 20px; z-index: 2; }
.heat-badge--detail { position: absolute; top: 0; right: 0; z-index: 2; }
.lead > div:last-child { padding-right: 88px; }
.row > div:last-child { padding-right: 78px; }
.detail-head { padding-right: 104px; }
@media (max-width: 700px) {
  /* 移动端分类栏不横向拖动，分类自动换行；投稿按钮固定在右侧。 */
  .sections { overflow: hidden; }
  .sections-row {
    position: relative;
    overflow: hidden !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    row-gap: 2px;
    padding-left: 8px !important;
    padding-right: 82px !important;
    touch-action: pan-y;
  }
  .sections-row .sec { flex: 0 0 auto; }
  .sections-row .sec-cta {
    position: absolute;
    right: 8px;
    left: auto;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    margin: 0 !important;
    white-space: nowrap;
  }

  /* 徽章在窄屏保持可见，不被文章卡片的移动端规则压掉。 */
  .hz-flame { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
  .lead, .row, .detail-head { position: relative !important; }
  .heat-badge--card, .heat-badge--detail { z-index: 8; visibility: visible; }
  .heat-badge--card { top: 12px; right: 14px; }
  .heat-badge--detail { top: 2px; right: 0; }
  .lead > div:last-child { padding-right: 72px; }
  .row > div:last-child { padding-right: 68px; }
  .detail-head { padding-right: 78px; }
  .hz-flame--lg svg { width: 22px; height: 22px; }
  .hz-flame--lg .hz-num { font-size: 16px; }
  .hz-flame--lg .hz-unit { font-size: 10px; }
}


/* 移动端分类导航：单行横滑、右缘渐隐、投稿独立悬浮。 */
.sections-row { padding-right: calc(var(--gutter, 20px) + 116px); }
.sections-submit {
  position: absolute;
  top: 50%;
  right: max(var(--gutter, 20px), calc((100vw - 1240px) / 2 + var(--gutter, 20px)));
  z-index: 41;
  margin: 0;
  transform: translateY(-50%);
}
@media (max-width: 700px) {
  .sections {
    position: sticky;
    overflow: visible;
    isolation: isolate;
  }
  .sections-row {
    position: relative;
    z-index: 1;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 48px;
    padding: 0 42px 0 8px !important;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  .sections-row::-webkit-scrollbar { display: none; }
  .sections-row .sec {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 46px;
    padding: 10px 12px 8px !important;
    font-size: 15px;
    letter-spacing: .04em;
    scroll-snap-align: start;
  }
  .sections .sections-submit,
  .sections-row .sections-submit {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    left: auto;
    top: auto;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 100;
    transform: none;
    margin: 0 !important;
    min-height: 44px;
    padding: 10px 15px;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--cinnabar) 70%, transparent);
  }
  .sections .sections-submit:hover,
  .sections-row .sections-submit:hover {
    transform: translateY(-2px) scale(1.03);
  }
  .sections .sections-submit:active,
  .sections-row .sections-submit:active {
    transform: scale(.98);
  }
  .sections .sections-submit .count,
  .sections-row .sections-submit .count {
    min-width: 18px;
    height: 18px;
  }
  .to-top {
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
}

/* 修正：投稿 FAB 位于导航容器外，fixed 以视口为定位基准。 */
.sections-shell {
  position: relative;
  z-index: 40;
}
@media (max-width: 700px) {
  .sections-shell .sections-submit {
    position: fixed !important;
    right: max(14px, env(safe-area-inset-right));
    left: auto;
    top: auto;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 100;
    transform: none;
    margin: 0 !important;
    min-height: 44px;
    padding: 10px 15px;
    gap: 5px;
    white-space: nowrap;
    box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--cinnabar) 70%, transparent);
  }
  .sections-shell .sections-submit:hover {
    transform: translateY(-2px) scale(1.03);
  }
  .sections-shell .sections-submit:active {
    transform: scale(.98);
  }
  .sections-shell .sections-submit .count {
    min-width: 18px;
    height: 18px;
  }
}

/* 最终移动端定位：投稿按钮留在导航栏右侧，不覆盖文章内容。 */
@media (max-width: 700px) {
  .sections-row {
    padding-right: 122px !important;
  }
  .sections-shell .sections-submit {
    position: absolute !important;
    right: max(8px, env(safe-area-inset-right));
    left: auto !important;
    top: 50%;
    bottom: auto !important;
    transform: translateY(-50%);
  }
  .sections-shell .sections-submit:hover {
    transform: translateY(calc(-50% - 2px)) scale(1.03);
  }
  .sections-shell .sections-submit:active {
    transform: translateY(-50%) scale(.98);
  }
}

/* 横滑分类区与右侧投稿按钮分栏，避免最后一项被覆盖。 */
@media (max-width: 700px) {
  .sections-row {
    width: calc(100% - 122px) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 18px 0 8px !important;
  }
  .sections::after {
    right: 122px;
    width: 38px;
  }
}

/* 移动端卡片热度徽章落在封面左下角，详情页标题徽章不受影响。 */
.row-thumb {
  position: relative;
}
@media (max-width: 700px) {
  .lead > div:last-child,
  .row > div:last-child {
    padding-right: 0 !important;
  }
  .row-thumb > .heat-badge--card,
  .lead-media > .heat-badge--detail {
    top: auto !important;
    right: auto !important;
    bottom: 10px;
    left: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(4px);
  }
}

/* 移动端热度徽章改为封面右下角。 */
@media (max-width: 700px) {
  .row-thumb > .heat-badge--card,
  .lead-media > .heat-badge--detail {
    top: auto !important;
    right: 10px !important;
    bottom: 10px;
    left: auto !important;
  }
}
/* 头条封面同时展示核实印章，热度徽章上移避免遮挡。 */
@media (max-width: 700px) {
  .lead-media > .heat-badge--detail {
    bottom: 94px;
  }
}