/* ============================================================
   维护页 —— 只在 maintenance.html 里引。
   版式、字、卡尺、绘图仪、导航、构造网格全部沿用 styles.css / main.js，
   这里只补首页没有的两样：大号下载按钮，和可以播放的视频图版。
   ============================================================ */

/* 导航里代替页面链接的状态牌：维护期间不往其他页面引 */
.nav .state { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-2); }
.live.warn i { background: var(--pen-2); }

/* ---- 下载：.act 的放大版，填色同样从左往右刷过去 ---- */
.cta { margin-top: var(--u5); display: flex; align-items: center; gap: var(--u3); flex-wrap: wrap; }
.act.view { font-size: 13px; padding: 17px 24px; gap: 18px; background: var(--w); }
/* 箭头用 SVG 而不用「→」字符：按钮里的汉字走的是等宽字体栈里的后备字体，
   和字符箭头的基线对不上，实测箭头比文字的视觉中心低 1.6px */
.act.view .arw { display: flex; }
.act.view .arw svg {
  width: 16px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
/* 下载是次要入口：不加框，灰色小字，悬停变墨色并划出下划线（.lk） */
.cta .dl-txt { color: var(--ink-3); }
.cta .dl-txt:hover { color: var(--ink); }

/* ---- 视频图版 ---- */
.vgroup { margin-top: var(--u8); }
.vgroup + .vgroup { margin-top: var(--u12); }
.vgroup > .lbl { display: block; margin-bottom: var(--u3); }

/* 一行里几段视频等高、宽度按各自比例分：flex-grow 取宽高比，基准 0 */
.reel { display: flex; gap: var(--gap); align-items: flex-start; }
.vtile { flex: var(--ar) 1 0%; min-width: 0; margin: 0; }

.vframe {
  position: relative; overflow: hidden; aspect-ratio: var(--ar);
  border: 1px solid var(--rule); background: var(--w-2);
}
.vframe video { width: 100%; height: 100%; object-fit: cover; }
.vframe .rulemark {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  font-family: var(--mono); font-size: 10px; color: var(--w);
  mix-blend-mode: difference; transition: opacity .3s;
}
/* 悬停时一圈群青框 —— 和首页图版同一个手势 */
.vframe::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border: 1px solid var(--pen-1); opacity: 0; transition: opacity .3s;
}
.vtile:not(.playing) .vframe:hover::after { opacity: 1; }

.vplay {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 64px; height: 64px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--w); border: 1px solid var(--ink); color: var(--ink);
  transition: background .3s var(--snap), border-color .3s, color .3s, transform .42s var(--snap), opacity .3s;
}
/* 圆角三角：墨迹 18 × 21，正好铺满 19 × 22 的 viewBox。
   几何居中会显得偏左（三角形的重心靠近底边），往右推约 w/10 做视觉居中 ——
   实测外框中心比圆心偏右 1.7px。原来那版偏右 2.9px 又只有 12 × 14，所以看着歪、也小 */
.vplay svg {
  width: 19px; height: 22px; fill: currentColor; stroke: currentColor;
  stroke-width: 3; stroke-linejoin: round; transform: translateX(1.7px);
}
.vframe:hover .vplay { background: var(--pen-1); border-color: var(--pen-1); color: var(--w); transform: translate(-50%, -50%) scale(1.06); }
.vtile.playing .vplay, .vtile.playing .rulemark { opacity: 0; pointer-events: none; }

.verr {
  position: absolute; left: 10px; bottom: 10px; z-index: 3; display: none;
  padding: 4px 8px; background: var(--w); border: 1px solid var(--pen-2); color: var(--pen-2);
}
.vtile.missing .verr { display: block; }

.vtile .caliper .v { background: var(--w); }
.vcap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--u2); margin-top: var(--u2); }
.vcap h3 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: -.02em; }
.vtile .meta { margin-top: 4px; }

/* 底部三段：平均分三栏、统一画幅。三段素材宽高比不同（.65 / .53 / .49），
   统一取中间那段的比例，其余两段靠 object-fit: cover 裁掉一点边 ——
   年度报告裁左右背景，手机录屏裁上下各约 3%，内容不受影响 */
.reel.portrait { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); --ar-row: .526; }
.reel.portrait .vframe { aspect-ratio: var(--ar-row); }

.vgroup .swipe { display: none; margin: var(--u2) 0 0; }   /* 要压过上面的 .vgroup > .lbl */

@media (max-width: 720px) {
  /* 手机端首屏留白更清楚，不显示维护页的绘图动画 */
  #plot { display: none; }

  /* 三段竖屏并排塞进 343px 只剩一百多像素高，改成横滑 */
  .reel.portrait {
    display: flex;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--gut);   /* 吸附对齐不认 padding，不写这行第一张会贴着屏幕边 */
    margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; scrollbar-width: none;
  }
  .reel.portrait::-webkit-scrollbar { display: none; }
  .reel.portrait .vtile { flex: none; width: calc(min(66vh, 520px) * var(--ar-row)); scroll-snap-align: start; }
  .vgroup .swipe { display: block; }
}

/* 目录表里的项目名链到在线查看页；.lk 默认是次级灰，这里保持名称原来的墨色 */
.manifest .nm .lk { color: var(--ink); }
.manifest .nm .lk:hover { color: var(--pen-1); }