/* =========================================================
   资料库 · 晶匣（Resource Vault）
   ---------------------------------------------------------
   主题变量与左右栏骨架来自 wiki.css + topic.css，
   这一页只加「网盘」这一层的版式：

   创意主张：不做网盘的文件夹树，做一排「晶匣」——
   每个文件是一只编了号的匣子：左缘一枚类型晶钻（扩展名刻在钻面上），
   匣身写文件名与克重，悬停时暖光扫过、下载箭头亮起。
   清单上方横着一条「容量矿脉」：每只匣子按克重占一段矿层，
   一眼看出这间储物室还剩多少余量。
   ========================================================= */

/* ---------- 左栏：分类筛选（复用 topic.css 的 .idx） ---------- */
.idx a.on{color:var(--warm)}
.idx a.on .n,.idx a.on .c{color:var(--warm);opacity:1}
.rail-cap{margin:14px 0 0;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--tx-fig);opacity:.8}

/* ---------- 容量矿脉 ---------- */
.vein-wrap{margin:26px 0 6px}
.vein{display:flex;gap:2px;height:7px;align-items:stretch;
  background:var(--line);opacity:.95}
.vein i{display:block;min-width:3px;opacity:.82;
  transition:opacity .22s,transform .22s;transform-origin:center}
.vein i:hover{opacity:1;transform:scaleY(1.6)}
html[data-time="day"] .vein i,
html[data-time="dawn"] .vein i{opacity:1}
.vein-cap{margin-top:9px;display:flex;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--tx-fig)}
.vein-cap .live{color:var(--warm);opacity:.9}

/* ---------- 晶匣：一个文件 ---------- */
.chip{
  position:relative;display:grid;
  grid-template-columns:34px minmax(0,1fr) auto 16px;
  align-items:center;gap:18px;
  padding:17px 6px 17px 18px;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);
  /* 同知识库：底色用 background-size 扫出，避免渐变硬切造成的闪 */
  background-image:linear-gradient(90deg,
    color-mix(in srgb,var(--tc,var(--accent)) 9%,transparent),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) * 30ms);
}
/* 左缘：类型色的棱，跟知识库晶片同一道光 */
.chip::before{
  content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;
  background:var(--tc,var(--accent));opacity:.2;
  transform:scaleY(.72);transform-origin:center;
  transition:opacity .22s,transform .24s;
}
.chip::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;
}
.chip:hover{background-size:100% 100%}
.chip:hover::before{opacity:.95;transform:scaleY(1)}
.chip:hover::after{transform:scaleX(1);opacity:.85}

/* 类型晶钻：旋转 45° 的方钻，扩展名刻在钻面上 */
.dia{position:relative;width:30px;height:30px;justify-self:start}
.dia::before{
  content:'';position:absolute;inset:6px;transform:rotate(45deg);
  border:1px solid var(--tc,var(--accent));
  background:color-mix(in srgb,var(--tc,var(--accent)) 13%,transparent);
  transition:background .25s,box-shadow .25s;
}
.dia b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.05em;
  color:var(--tc,var(--accent))}
/* 浅底上同色系会发飘：把釉色调深一档，棱加实 */
html[data-time="day"] .dia::before,
html[data-time="dawn"] .dia::before{
  border-color:color-mix(in srgb,var(--tc,var(--accent)) 74%,#1b1630);
  background:color-mix(in srgb,var(--tc,var(--accent)) 17%,transparent);
}
html[data-time="day"] .dia b,
html[data-time="dawn"] .dia b{color:color-mix(in srgb,var(--tc,var(--accent)) 68%,#1b1630)}
.chip:hover .dia::before{background:color-mix(in srgb,var(--tc,var(--accent)) 24%,transparent);
  box-shadow:0 0 10px color-mix(in srgb,var(--tc,var(--accent)) 35%,transparent)}

.chip .bd{min-width:0;display:flex;flex-direction:column;gap:4px}
.chip .tt{font-size:16.5px;font-weight:400;line-height:1.55;letter-spacing:.01em;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-time="day"] .chip .tt,
html[data-time="dawn"] .chip .tt{font-weight:600;letter-spacing:.015em}
.chip .mt{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--tx-fig);white-space:nowrap}
.chip .mt em{font-style:normal;color:var(--tc,var(--accent));opacity:.85}

/* 下载箭头：平时收着，悬停时亮起并指向下方 */
.chip .dl{font-family:var(--mono);font-size:13px;color:var(--tx-sm);
  opacity:0;transform:translate(-6px,-4px);
  transition:opacity .22s,transform .22s,color .22s}
.chip:hover .dl{opacity:1;transform:none;color:var(--warm)}

/* 空清单 */
.vault-empty{padding:46px 0;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--tx-fig)}

/* ---------- 分类小结：清单里的簇标题（按分类分组时用） ---------- */
.vcl{display:flex;align-items:center;gap:14px;margin:40px 0 0}
.vcl:first-of-type{margin-top:30px}
.vcl .dia-s{flex:0 0 auto;width:7px;height:7px;transform:rotate(45deg);
  border:1px solid var(--tc,var(--accent));opacity:.85}
.vcl .nm{font-size:12.5px;letter-spacing:.14em;color:var(--tx-fig);white-space:nowrap}
.vcl .ln{flex:1 1 auto;height:1px;background:var(--line)}
.vcl .cn{font-family:var(--mono);font-size:10px;color:var(--tx-fig)}

/* ---------- 窄屏 ---------- */
@media (max-width:900px){
  /* 分类筛选收成一条横滑的晶片，不隐藏 —— 手机上也点得到 */
  .idx{grid-column:1 / -1;display:flex;gap:8px;overflow-x:auto;margin:20px 0 0;
    padding:0 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .idx::-webkit-scrollbar{display:none}
  .idx li{flex:0 0 auto}
  .idx a{border:1px solid var(--line);padding:5px 10px;font-size:11.5px;
    white-space:nowrap;gap:6px}
  .idx a.on{border-color:var(--warm);color:var(--warm)}
  .idx a.on .n,.idx a.on .c{color:var(--warm);opacity:1}
  .idx .n{width:auto}
  .idx .c{margin-left:2px}

  .chip{grid-template-columns:24px minmax(0,1fr);gap:12px;
    padding:12px 2px 12px 14px}
  .dia{width:24px;height:24px}
  .dia::before{inset:5px}
  .dia b{font-size:6.5px;letter-spacing:0}
  .chip .tt{font-size:14.5px;white-space:normal;line-height:1.5}
  .chip .mt{display:block;margin-top:5px;font-size:10px}
  .chip .dl{display:none}
  .rail-cap{grid-column:1 / -1;margin-top:12px}
  .vcl{margin-top:30px}
  .vein-wrap{margin-top:20px}
}

/* =========================================================
   晶栅分光 —— 资料库的主装置
   ---------------------------------------------------------
   知识库那套是「立方体绕灯公转」（轨道 / orbit），
   资料库换一条完全不同的物理：一束暖光穿过晶栅被衍射成几束，
   一束一色一类，束宽 = 该类克重。点一束光，清单只看这一类。
   这套光路在窄屏放不下，退化成下面的「容量矿脉」色条。
   ========================================================= */
.pg-wrap{margin:20px 0 12px}
.pg-head,.pg-cap{display:flex;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--tx-fig)}
.pg-head{opacity:.9;margin-bottom:2px}
.pg-head .live{color:var(--warm);opacity:1}
.pg-cap{opacity:.72;margin-top:2px}
.pg-stage svg{display:block;width:100%;height:auto}

/* 晶条的颜色跟时辰走：夜里是冰白，白天要压深一档才看得见 */
:root{--pg-bar:#c6d4dc;--pg-hi:#ffffff}
html[data-time="dawn"],html[data-time="day"]{--pg-bar:#93aab5;--pg-hi:#ffffff}

/* 晶栅板：一层几乎看不见的玻璃，用来标出「光在这里被切开」 */
.pg .plate{fill:url(#pgPlate)}
/* 分光点的一团光核：所有光带都从这里长出来 */
.pg .bloom{animation:pgBloom 6.6s linear infinite}
@keyframes pgBloom{
  0%,40%{opacity:.42}
  49%{opacity:1}
  60%,100%{opacity:.42}
}
/* 九根晶条：光子撞上之后自左向右依次亮一下，像快门过了一遍 */
.pg .bars rect{animation:pgBarPulse 6.6s linear infinite}
@keyframes pgBarPulse{
  0%,42%{opacity:.58}
  48%{opacity:1}
  58%,100%{opacity:.58}
}
/* 光带的两条棱：让每一束是一块切开的晶体，而不是一团雾 */
.pg .edge{fill:none;stroke-width:1;stroke-opacity:.34;stroke-linecap:round}

/* ---------- 光带 ---------- */
.pg-beams .bm{cursor:pointer;transition:opacity .3s ease}
.pg-stage.hovering .pg-beams .bm:not(.hot-bm){opacity:.14}
/* 左栏选了一类时，光路也跟着只留那一束 */
.pg-stage.picked .pg-beams .bm:not(.on){opacity:.15}
.pg .bm.on .edge{stroke-opacity:.6}
.pg .bm.on .flow{stroke-width:2.8;animation-duration:1.5s}
.pg .bm.on .nm{font-weight:700}

/* 光带中轴跑的光点：表示这一束一直在往外流 */
.pg .flow{fill:none;stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:1.6 26;opacity:.55;animation:pgFlow 3.8s linear infinite}
@keyframes pgFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-276}}

.pg .lead{fill:none;stroke-width:1;stroke-opacity:.42}
.pg .nm{font-size:13.5px;font-weight:600;letter-spacing:.07em;fill:var(--ink)}
.pg .mt{font-family:var(--mono);font-size:10px;letter-spacing:.04em;fill:var(--tx-fig)}
html[data-time="day"] .pg .nm,
html[data-time="dawn"] .pg .nm{font-weight:700}

/* ---------- 定时小戏：光子跑向晶栅，栅格亮一下 ---------- */
.pg .photon{animation:pgPhoton 6.6s linear infinite}
@keyframes pgPhoton{
  0%{transform:translateX(-44px);opacity:0}
  9%{opacity:.95}
  41%{transform:translateX(250px);opacity:.95}
  47%,100%{transform:translateX(250px);opacity:0}
}
.pg .glint{opacity:0;animation:pgGlint 6.6s linear infinite}
@keyframes pgGlint{
  0%,44%{transform:translateX(0);opacity:0}
  49%{opacity:.9}
  62%,100%{transform:translateX(78px);opacity:0}
}

/* ---------- 桌面端光路在、矿脉退场；窄屏反过来 ---------- */
.vein-wrap{display:none}
@media (max-width:900px){
  .pg-wrap{display:none}
  .vein-wrap{display:block;margin-top:18px}
}

/* 左栏分类：悬停某束光时，对应那一行跟着亮 */
.idx a.hot{color:var(--warm)}
.idx a.hot .n,.idx a.hot .c{color:var(--warm);opacity:1}