/* =========================================================
   static.css —— 静态版专属样式
   ---------------------------------------------------------
   只放「主站 CSS 里没有、因静态化而必须新增」的规则。
   设计令牌、布局、组件样式全部复用主站
   assets/css/{base,layout,components}.css，保证视觉 1:1。
   ========================================================= */

/* ============ 0. 进场动画可见性加固 ============
   主站 base.css：
     .js .rv{opacity:0;transform:translateY(30px)}
     .js .rv.in{opacity:1;transform:none}
   —— 靠 IntersectionObserver 加 .in 类来显现。

   静态版的问题：
     ① 内容全部由 JS 动态渲染，观察器建立时元素可能已在视口外；
     ② 带 #hash 直接访问时，浏览器在内容渲染前就滚到锚点；
     ③ 实测该浏览器内核下 .js .rv 会压住 .js .rv.in，
        元素即使拿到 .in 也保持全透明（滚动到哪个分区，哪个分区看不见）。

   解决：静态版的「内容可见」优先级高于「淡入动画」。
        这里直接把 .rv / .rv-blur 的初始态改为可见，
        不再依赖 .in 类与 IntersectionObserver ——
        任何时候、任何滚动位置，内容都在。
        代价是失去淡入上移动画，对内容驱动的展示站可接受。 */
html.js .rv,
html.js .rv-blur{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}

/* ============ 1. Hero 浮动卡片 ============
   主站把 .fcard 直接放在 .hero-visual 里，靠 grid-column/grid-row 定位：
     .fcard.f1{grid-column:2;grid-row:1}
     .fcard.f2{grid-column:2;grid-row:2}
     .fcard.f3{grid-column:2;grid-row:3}
   静态版由 JS 动态生成卡片，容器必须与主站结构一致才能 1:1 还原。

   窄屏问题：主站在 ≤960px 隐藏 .hero-visual，若卡片在其内会连数据一起消失。
   解决方案（不改动主站 CSS）：
     · 宽屏：#heroCards 放在 .hero-visual 内，用 display:contents
       让子卡片直接参与父级 grid —— 定位与主站完全一致；
     · 窄屏：#heroCardsRow 独立于 .hero-visual，显示为横向滚动条；
       由 JS 监听 matchMedia 切换两者的可见性与内容归属。 */
.hero-cards--float{display:contents}

/* 窄屏用的横向卡片条：宽屏隐藏 */
.hero-cards--row{display:none}

/* 窄屏：雷达图隐藏后，浮动卡片退化为横向滚动条 */
@media(max-width:960px){
  .hero-cards--float{display:none}
  .hero-cards--row{
    display:flex;gap:10px;overflow-x:auto;padding:4px var(--pad) 10px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    position:relative;z-index:2;
  }
  .hero-cards--row .fcard{
    flex:0 0 76%;max-width:none;scroll-snap-align:center;
    grid-column:auto;grid-row:auto;justify-self:auto;
    animation:none;
  }
  /* 窄屏下 Hero 高度自适应，别再撑满一屏 */
  .hero{min-height:auto;padding-bottom:clamp(60px,9vh,96px)}
}

/* 矮屏（横屏手机等）：主站会隐藏雷达图，此时浮动卡片也应退化为横向条 */
@media(max-height:620px){
  .hero-cards--float{display:none}
  .hero-cards--row{display:flex;gap:10px;overflow-x:auto;padding:4px var(--pad) 10px;
    scroll-snap-type:x mandatory;position:relative;z-index:2}
  .hero-cards--row[hidden]{display:none}
  .hero-cards--row .fcard{flex:0 0 76%;max-width:none;scroll-snap-align:center;animation:none}
}

/* ============ 2. 全局提示条（接口异常 / 维护） ============
   导航是 position:fixed（不占文档流），提示条若直接放在 body 顶部会被导航盖住。
   处理：提示条固定在导航「下方」一层，并给 body 加 --notice-h 偏移量，
   让整页内容随提示条的出现整体下移，避免任何遮挡。 */
.notice{
  position:fixed;top:0;left:0;right:0;z-index:51;margin:0;padding:13px var(--pad);
  border-bottom:1px solid rgba(242,84,91,.32);
  background:linear-gradient(180deg,rgba(20,14,16,.97),rgba(242,84,91,.22));
  backdrop-filter:blur(14px);
  text-align:center;
}
.notice[hidden]{display:none}
.notice-box{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;max-width:1100px}
.notice-box strong{font-size:14.5px;font-weight:700;color:#FFC4C6}
.notice-box span{font-size:13.5px;color:var(--paper-dim);line-height:1.7}

/* 提示条出现时，把导航与首屏整体下移 */
body.has-notice .nav{top:46px}
body.has-notice .nav-mobile{top:118px}
body.has-notice .hero{padding-top:calc(clamp(94px,11.5vh,138px) + 46px)}
body.has-notice .notice-box strong::before{content:'⚠ ';opacity:.8}

/* ============ 3. 静态版：接口状态灯在面板底部 ============
   主站面板底部有 .live 状态灯；静态版由 JS 注入到 #apiStatus，
   这里保证容器不塌陷、左右分布正常。 */
#apiStatus{min-height:18px;display:inline-flex;align-items:center}
#picksFoot{white-space:nowrap}

/* ============ 4. 静态版：源墙与订阅列表为空时的占位 ============ */
.wall .item.empty{grid-column:1/-1}
.reader-list .sub .av{font-size:14px}

/* ============ 5. 抓取日志为空时不显示边框 ============ */
.crawl:empty{display:none}

/* ============ 6. 兜底内容样式（不可点击） ============
   接口不可用时填充的示例文章：
     · 视觉上与正常内容一致（不能显得像坏了）
     · 但不可点击、不可跳转（渲染层已用 <div> 而非 <a>）
     · 去掉 hover 位移与手型光标，避免误导用户以为能点 */
.fcard.is-static,
.item.is-static,
.site-chip.is-static{
  cursor:default;
  pointer-events:none;   /* 彻底屏蔽点击 / 悬停态 */
  user-select:text;       /* 仍允许复制文字 */
}
.item.is-static:hover{transform:none;border-color:var(--line);background:rgba(244,241,234,.028)}
.site-chip.is-static:hover{transform:none;border-color:var(--line);background:rgba(244,241,234,.026)}
.fcard.is-static{animation:none}

/* 兜底时给一个极轻的「不可用」视觉暗示（不影响阅读观感） */
.is-static h5,
.is-static h4,
.is-static .nm{opacity:.92}

/* ============ 7. 打印样式 ============ */
@media print{
  .nav,.nav-mobile,.progress,.notice,.hero-visual,.hero-cards,.hero-foot,.to-top{display:none!important}
  body{background:#fff;color:#000}
}