/* =========================================================
   知识库 · 方向文章列表（Lattice Feed）
   ---------------------------------------------------------
   主题变量全部来自 wiki.css（与首页同源），这一层只加版式。

   版式主张：不做卡片，做「晶片」。
   一篇文章 = 一片贴在晶格轴上的薄片：左边一道棱、一条细分隔线，
   编号在前、标题居中、日期在右。标题只用常规字重 ——
   一整页十几行粗体，读起来像十几个人同时在喊。
   悬停时棱线亮成暖色，像光打到晶体的切边上。
   ========================================================= */

/* wiki.css 的正文不滚动（星图是一屏），这里要放开 */
body.topic{height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}

/* ---------- 等轴测网格：晶体切面的底纹，只压在右侧 ---------- */
.iso{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(60deg,var(--grid) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(-60deg,var(--grid) 0 1px,transparent 1px 68px);
  opacity:.4;
  -webkit-mask-image:linear-gradient(102deg,transparent 28%,#000 60%,#000 100%);
  mask-image:linear-gradient(102deg,transparent 28%,#000 60%,#000 100%);
}

/* 没有顶栏。返回入口在左栏里（左栏 sticky，滚到哪都在），
   时辰天气沿用知识库页那套浮在右上的控件，滚动时淡出，不压正文。 */
.rail-back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--muted);text-decoration:none;transition:color .2s;
}
.rail-back .ar{display:inline-block;transition:transform .25s}
.rail-back:hover{color:var(--accent)}
.rail-back:hover .ar{transform:translateX(-3px)}
.hud{transition:opacity .28s ease}

/* ---------- 两栏 ---------- */
.wrap{
  position:relative;z-index:2;
  max-width:1200px;margin:0 auto;padding:60px 44px 130px;
  display:grid;grid-template-columns:236px minmax(0,1fr);gap:54px;align-items:start;
}

/* ---------- 左栏：这个小立方体就是刚点进来的那一座 ---------- */
.rail{position:sticky;top:34px;padding-top:2px}
.cube-box{position:relative;width:92px;height:112px;margin:0 0 28px;
  cursor:pointer;outline:none}
/* 身后的光：平时是四时辰的暖光，移上去转成真正的金色并涨一圈 */
.cube-box::before{
  content:'';position:absolute;left:50%;top:52%;width:128px;height:128px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,var(--today-stroke) 0%,transparent 62%);
  opacity:.22;transition:opacity .62s ease,transform .8s cubic-bezier(.2,.7,.3,1);
}
html[data-time="day"] .cube-box::before{opacity:.12}
.cube-box:hover::before,
.cube-box:focus-visible::before{
  opacity:.58;transform:translate(-50%,-50%) scale(1.06);
  background:radial-gradient(circle,
    rgba(255,223,168,.80) 0%,rgba(255,176,102,.30) 30%,
    rgba(226,96,28,.10) 50%,transparent 68%);
}
html[data-time="day"] .cube-box:hover::before,
html[data-time="day"] .cube-box:focus-visible::before{opacity:.40}

.rail-cube{display:block;width:92px;height:112px;
  animation:bobY 9.5s ease-in-out infinite;
  transition:filter .9s ease}
.rail-cube .gld{opacity:0;transition:opacity 1.05s cubic-bezier(.3,.7,.3,1)}
.cube-box:hover .rail-cube,
.cube-box:focus-visible .rail-cube{animation-play-state:paused;
  filter:drop-shadow(0 6px 14px rgba(214,66,16,.30))
         drop-shadow(0 0 7px rgba(255,146,64,.34))}
.cube-box:hover .rail-cube .gld,
.cube-box:focus-visible .rail-cube .gld{opacity:1}
@keyframes bobY{0%,100%{transform:translateY(5px)}50%{transform:translateY(-6px)}}
/* 三个面的 d 和 fill 由 railcube.js 每帧写，这里只定描边的公共参数。 */
.rail-cube .fc{stroke-width:1.5;stroke-linejoin:round;stroke-opacity:.86;
  fill:var(--cube-lb);stroke:var(--face-e)}
.rail-cube .plm .fc:nth-child(2){fill:var(--cube-rb)}
.rail-cube .plm .fc:nth-child(3){fill:url(#rcTopB)}

.rail h1{margin:0 0 9px;font-size:33px;line-height:1.18;font-weight:700;letter-spacing:.03em}
.rail .en{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;color:var(--tx-fig);opacity:.9}
.rail .lead{margin:18px 0 0;font-size:13.5px;line-height:2;color:var(--muted)}

.stat{display:flex;gap:26px;margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.stat div{display:flex;flex-direction:column;gap:4px}
.stat b{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--ink);line-height:1}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--tx-fig)}

.idx{margin:28px 0 0;padding:0;list-style:none}
.idx a{
  display:flex;align-items:center;gap:9px;padding:8px 0;
  font-size:12.5px;color:var(--muted);text-decoration:none;
  transition:color .2s;
}
.idx a:hover{color:var(--accent)}
.idx .n{font-family:var(--mono);font-size:10px;color:var(--tx-fig);width:15px;opacity:.8}
.idx .c{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--tx-fig);opacity:.8}

/* ---------- 右栏 ---------- */
.feed{padding-top:2px;min-width:0}
.feed-head{display:flex;align-items:center;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.feed-head .t{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--tx-fig)}
.feed-head .r{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--tx-fig)}

/* ---------- 簇：一行标题 + 一条伸出去的细线 ---------- */
.cl{display:flex;align-items:center;gap:14px;margin:44px 0 0;scroll-margin-top:96px}
.cl:first-of-type{margin-top:34px}
.cl .dia{flex:0 0 auto;width:7px;height:7px;transform:rotate(45deg);
  border:1px solid var(--accent);opacity:.8}
.cl .nm{font-size:13px;font-weight:400;letter-spacing:.14em;color:var(--tx-fig);white-space:nowrap}
.cl .en{font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.2em;color:var(--tx-fig);opacity:.85;white-space:nowrap}
.cl .ln{flex:1 1 auto;height:1px;background:var(--line)}
.cl .cn{font-family:var(--mono);font-size:10px;color:var(--tx-fig)}

/* ---------- 晶片：一篇文章 ---------- */
.sheet{
  position:relative;display:grid;
  grid-template-columns:34px minmax(0,1fr) 54px 12px;
  align-items:start;column-gap:16px;
  padding:21px 6px 21px 20px;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);
  background-image:linear-gradient(90deg,var(--line),transparent 82%);
  background-repeat:no-repeat;
  background-size:0% 100%;
  transition:background-size .55s cubic-bezier(.2,.7,.3,1);
  animation:sheetIn .52s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 26ms);
}
@keyframes sheetIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* 左边那条棱 */
.sheet::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;
  background:var(--accent);opacity:.16;
  transform:scaleY(.7);transform-origin:center;
  transition:opacity .22s,transform .24s,background .22s;
}
.sheet:hover{background-size:100% 100%}
/* 悬停时一道暖光沿底棱从左扫到右 */
.sheet::after{
  content:'';position:absolute;left:2px;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--warm),transparent 46%);
  transform:scaleX(0);transform-origin:left;opacity:0;
  transition:transform .55s cubic-bezier(.2,.7,.3,1),opacity .3s;
}
.sheet:hover::after{transform:scaleX(1);opacity:.85}
.sheet:hover::before{opacity:1;transform:scaleY(1);background:var(--warm)}

.sheet .idx{grid-column:1;grid-row:1;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--tx-fig);padding-top:4px;transition:color .2s}
.sheet .tt{grid-column:2;grid-row:1;
  font-size:17.5px;font-weight:400;line-height:1.62;letter-spacing:.012em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-width:0;
}
/* 后台发的那种带摘要的，多一行；没有就不占位 */
.sheet .sm{grid-column:2;grid-row:2;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  margin:7px 0 0;font-size:13px;line-height:1.7;color:var(--tx-fig);
  font-weight:400;letter-spacing:.01em;
}
.sheet .mt{grid-column:3;grid-row:1;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--tx-fig);opacity:.9;white-space:nowrap;text-align:right;padding-top:6px}
.sheet .ar{grid-column:4;grid-row:1;
  font-size:12px;color:var(--tx-sm);opacity:0;transform:translateX(-6px);
  transition:opacity .22s,transform .22s,color .22s;padding-top:6px}
.sheet:hover .idx{color:var(--warm)}
.sheet:hover .ar{opacity:1;transform:none;color:var(--warm)}
.sheet:hover .tt{color:var(--ink)}

/* 「新」不再改编号颜色，改成标题后面一枚小标：编号是位置，不该被内容改色 */
.sheet[data-new] .tt::after{
  content:'NEW';display:inline-block;margin-left:10px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  color:var(--warm);opacity:.9;vertical-align:3px;
}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:56px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--tx-fig);opacity:.85;
}

/* ---------- 一行提示 ---------- */
.toast{
  position:fixed;left:50%;bottom:7vh;transform:translate(-50%,14px);z-index:30;
  padding:9px 16px;background:var(--card-bg);border:1px solid var(--card-stroke);
  color:var(--ink);font-size:13px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}

/* ---------- 窄屏：左栏收到顶部 ---------- */
@media (max-width:900px){
  .wrap{grid-template-columns:1fr;gap:0;padding:24px 20px 80px}
  .rail{position:static;padding-top:0;display:grid;
    grid-template-columns:auto minmax(0,1fr);gap:0 18px;align-items:center}
  .rail-back{grid-column:1 / -1;margin-bottom:14px}
  .cube-box{width:64px;height:78px;margin:0;grid-row:2}
  .rail-cube{width:64px;height:78px}
  .rail h1{font-size:28px;margin-bottom:4px}
  .rail .lead{margin-top:12px;grid-column:1 / -1}
  .stat{grid-column:1 / -1;margin-top:16px;gap:24px}
  .idx{display:none}
  .feed{padding-top:26px}
  .cl{margin-top:32px}
  .sheet{display:block;padding:15px 2px 15px 15px}
  .sheet .idx{display:none}
  .sheet .tt{font-size:15.5px;-webkit-line-clamp:3}
  .sheet .mt{display:block;margin-top:6px;text-align:left}
  .sheet .ar{display:none}
}

/* 白天：纸是淡青的，编号借一点强调色，否则整页只有黑白线，看着太素 */
html[data-time="day"] .sheet .idx{color:var(--accent);opacity:1}
html[data-time="day"] .sheet:hover{background:linear-gradient(90deg,
  color-mix(in srgb,var(--accent) 9%,transparent),transparent 82%)}
html[data-time="day"] .cl .dia{background:var(--accent);border-color:var(--accent);opacity:.9}
html[data-time="day"] .cl .nm{color:var(--accent);letter-spacing:.16em}
html[data-time="day"] .sheet .tt{color:#1d2321}