/* ============================================================
   rail.css · 全站顶轨（全站 8 页共用，单一事实源）
   形态取自设计稿「实验舱轨道 · 导航重设计」：
   菱形金框字形 logo + 刻度轨道导航（激活项金色菱形节点）
   + 右侧装备槽 / 图标钮 / 段位头像 / 汉堡。

   两处对设计稿的有意偏离，理由写在旁边：
   ① 高度 58→64px、实心表面色而非 rgba 玻璃：站内 #study / #map / #me
      等锚点靠 sticky 顶栏配合，改 position:fixed 会让 8 页的锚点跳转
      位置整体上移；sticky 在视觉上与 fixed 完全一致（滚到顶即吸顶）。
      实心表面色 + border 在四档主题（含护眼）下对比度可保证，玻璃半透
      在护眼暖淡档会掉到 4.5:1 附近。
   ② 字标沿用站内本地字体（得意黑 / 思源黑），不引 Noto Serif SC：
      站内零外部字体依赖，加 CDN 会破这条约束。
   ============================================================ */
.rail{
  position:sticky;top:0;z-index:50;height:64px;
  background:var(--msp-surface);border-bottom:1px solid var(--msp-line);
  transition:box-shadow .2s ease;
}
/* 轨道顶部金色渐隐线：设计稿的「实验舱轨道」光边 */
.rail::after{
  content:"";position:absolute;inset:0 0 auto;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--msp-accent),transparent);
}
/* 滚出首屏后给轨道落投影，沿用设计稿 .rail.scrolled */
.rail.scrolled{box-shadow:0 12px 26px -20px rgba(0,0,0,.85)}
.rail-in{
  max-width:1240px;margin:0 auto;height:100%;
  padding:0 28px;display:flex;align-items:center;gap:26px;
}
.rail .brand-home{gap:11px;padding:4px 6px;margin-left:-6px;border-radius:12px;flex:0 0 auto;
  transition:background .18s ease}
.rail .brand-home:hover{background:var(--msp-accent-soft)}
/* 网站 logo：设计稿的菱形金框字形标（用户 2026-10-06 拍板换掉头部肖像 PNG）
   ① box-sizing 显式写死：scientists / pbr-shoes / assessment 三页没吃到页面级 reset，
      会落到 content-box，34px 盒连 1.5px 边框实成 37px，菱形比另五页大 3px、还更挤。
   ② margin-right 用来补偿旋转外扩：rotate(45deg) 让 34px 方盒的视觉对角变成
      34×√2≈48.1px，左右各外扩约 7.04px；而这 7px 完全不占布局，会直接把下面
      .brand-home 的 gap:11px 吃掉大半（实测只剩 3.96px，content-box 页 3.54px），
      角尖几乎顶到「码上物理」，看起来就是重叠。加 8px 右边距把视觉多出来的那一半
      先让出来，视觉间隙回到 ≈12px（改之前 8 页 × 7 档宽度全不达标）。 */
.rail .brand-mark{
  width:34px;height:34px;box-sizing:border-box;flex:0 0 auto;display:grid;place-items:center;
  margin-right:8px;
  transform:rotate(45deg);border:1.5px solid var(--msp-accent);border-radius:10px;
  background:var(--msp-accent-soft);
}
.rail .brand-mark i{
  transform:rotate(-45deg);font-style:normal;font-weight:900;font-size:17px;
  line-height:1;color:var(--msp-accent-text);
}
.rail .brand-home b{font-size:17px;letter-spacing:.4px;white-space:nowrap}
.rail .brand-home small{font-size:11px;letter-spacing:.06em;white-space:nowrap;opacity:.75}

/* 主导航：坐在 1px 刻度轨道上，项间短划 + 激活项金色菱形节点 */
.rail .msp-primary-nav{
  flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  -ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  height:64px;align-items:center;box-shadow:inset 0 -1px var(--msp-line);
}
.rail .msp-primary-nav::-webkit-scrollbar{display:none;width:0;height:0}
.rail .msp-primary-nav a{
  position:relative;flex:0 0 auto;display:inline-flex;align-items:center;
  min-height:44px;padding:0 16px;white-space:nowrap;font-size:13.5px;font-weight:700;
  color:var(--msp-muted);text-decoration:none;border-radius:9px;
  transition:color .16s ease;
}
.rail .msp-primary-nav a+a::before{
  content:"";position:absolute;left:0;top:50%;width:9px;height:1px;
  transform:translateY(-50%);background:var(--msp-line);
}
.rail .msp-primary-nav a:hover{color:var(--msp-text);background:var(--msp-accent-soft)}
.rail .msp-primary-nav a[aria-current="page"]{color:var(--msp-accent-text)}
/* 激活项金色菱形节点：必须落在 nav 底部那条 1px 刻度线上，绝不能压到字。
   旧值 bottom:11px 让 7px 方块的 rotate(45°) 视觉盒（9.9px）占在 y≈33.5–43.5，
   而 13.5px 文字墨迹底边在 y≈40 → 压掉「天」字下半（用户报的「菱形和文字重叠」）。
   改挂 top:100%（贴 a 下沿）+1px，视觉盒 52.5–62.5，离文字底 12px 以上。 */
.rail .msp-primary-nav a[aria-current="page"]::after{
  content:"";position:absolute;top:100%;left:50%;margin-top:1px;
  width:7px;height:7px;transform:translateX(-50%) rotate(45deg);
  background:var(--msp-accent);box-shadow:0 0 6px -2px var(--msp-accent);
}
.rail .spacer{flex:1 1 auto;min-width:0}

/* 右侧集群 */
.rail .cluster{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.rail .slot{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:11px;
  border:1px solid var(--msp-accent);color:var(--msp-accent-text);
  font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap;
  transition:background .16s ease,color .16s ease;
}
.rail .slot[hidden]{display:none}   /* 鞋柜页自身隐藏装备槽；作者样式会盖过 UA 的 [hidden] */
.rail .slot:hover{background:var(--msp-accent);color:var(--msp-on-accent)}
.rail .slot em{font-style:normal;font-family:var(--gewu-font-mono,monospace);font-size:12px;opacity:.9}
.rail .icon-btn{
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--msp-line);border-radius:10px;background:transparent;
  color:var(--msp-text);font-size:15px;line-height:1;
  transition:border-color .16s ease,color .16s ease;
}
.rail .icon-btn[aria-pressed="true"]{border-color:var(--msp-accent);color:var(--msp-accent-text)}
.rail .icon-btn:hover{border-color:var(--msp-accent)}
/* 主题器：视觉是 36px 图标钮（设计稿的月亮钮），可访问性仍是原生 select，
   四档（auto/study/battle/eye）一个都不丢。 */
.rail .msp-theme-control{
  position:relative;width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid var(--msp-line);border-radius:10px;background:transparent;
  color:var(--msp-accent-text);cursor:pointer;
}
.rail .msp-theme-control .msp-theme-txt{display:none}
.rail .msp-theme-control .msp-theme-glyph{font-size:17px;line-height:1}
.rail .msp-theme-control select{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;
  border:0;background:transparent;font-size:16px;cursor:pointer;
}
.rail .msp-theme-control:has(select:focus-visible){outline:2px solid var(--msp-accent);outline-offset:2px}
.rail .vline{width:1px;height:24px;background:var(--msp-line)}
.rail .avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1.5px solid var(--msp-accent);background:var(--msp-surface);color:var(--msp-text);
  font-size:14px;font-weight:800;
}
.rail .avatar:hover{background:var(--msp-accent-soft)}
/* 三线汉堡：18×2 + 3px 间距 = 视觉重心 12px，比原来 4px 间距更聚拢、不散。
   必须用 flex 列 + gap，不能给 .burger 用 grid：grid 的 align-content 默认 normal(stretch)，
   会把三条 auto 行从 2px 撑到 11.33px，实测线间距 12.3px（gap 形同虚设），正是「间距太大」的来源。 */
.rail .burger{display:none;width:40px;height:40px;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:3px;
  border:1px solid var(--msp-line);border-radius:10px;background:transparent}
.rail .burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--msp-text)}
.rail a:focus-visible,.rail button:focus-visible{outline:2px solid var(--msp-accent);outline-offset:2px}

/* 窄屏：导航与右侧收进汉堡面板（设计稿 ≤860px） */
.rail-panel{display:none}
@media(max-width:860px){
  .rail-in{gap:14px;padding:0 16px}
  .rail .msp-primary-nav,.rail .slot,.rail .vline,.rail .avatar,.rail .icon-btn{display:none}
  .rail .brand-home small{display:none}
  .rail .brand-home b{font-size:15px}
  .rail .burger{display:flex}
  /* lab 页 #hamb（实验目录抽屉）已并入顶轨；≤860 由顶轨汉堡接管，避免两个 ☰ 并排。
     目录在窄屏仍可经 #labBrowse 打开（lab.html 内 isMobile 分支）。 */
  .rail .hamb{display:none}
  /* 面板显隐只认 html[data-panel="open"]，不用 hidden 属性：
     作者样式 .rail-panel{display:block} 会盖过 UA 的 [hidden]{display:none}，
     只靠 hidden 会在窄屏一直展开。 */
  html[data-panel="open"] .rail-panel{
    display:block;position:fixed;inset:64px 0 auto;z-index:49;margin-top:1px;
    background:var(--msp-surface);border-bottom:1px solid var(--msp-line);
    padding:8px 16px 20px;max-height:calc(100vh - 64px);overflow:auto;
  }
  .rail-panel-nav{display:grid;gap:2px}
  .rail-panel-nav a{padding:14px 6px;font-size:15px;font-weight:700;color:var(--msp-text);
    text-decoration:none;border-bottom:1px solid var(--msp-line)}
  .rail-panel-nav a[aria-current="page"]{color:var(--msp-accent-text)}
  /* 「我的」栏目下的二级入口：查验 / 展厅。一级导航不再平铺这两项。 */
  .rail-panel-subnav{display:grid;margin-top:2px;padding-left:12px;
    border-left:2px solid var(--msp-line)}
  .rail-panel-subnav a{padding:11px 6px;font-size:14px;font-weight:700;color:var(--msp-text);
    text-decoration:none}
  .rail-panel-subnav a+a{border-top:1px solid var(--msp-line)}
  .rail-panel-subnav a[aria-current="page"]{color:var(--msp-accent-text)}
  .rail-panel-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
  .rail-panel-foot .rps{flex:1 1 100%;font-size:13px;color:var(--msp-muted)}
  .rail-panel-foot button,.rail-panel-foot a{
    min-height:44px;padding:0 18px;border-radius:10px;font-size:14px;font-weight:700;
    cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
  .rail-panel-slot{border:1px solid var(--msp-accent);color:var(--msp-accent-text)}
  .rail-panel-foot button[hidden],.rail-panel-foot a[hidden]{display:none}
  .rail-panel-ghost{background:transparent;border:1px solid var(--msp-line);color:var(--msp-text)}
  .rail-panel-solid{background:var(--msp-accent);border:1px solid var(--msp-accent);color:var(--msp-on-accent)}
}
@media(min-width:861px){.rail-panel{display:none!important}}

/* 轻量登录 / 注册弹层（顶栏右侧集群唤起；站内此前只在首页内嵌一张登录卡） */
.rail-auth{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;
  background:rgba(8,8,10,.55);backdrop-filter:blur(3px)}
.rail-auth[hidden]{display:none}
.rail-auth-card{
  width:min(420px,100%);max-height:calc(100vh - 40px);overflow:auto;
  background:var(--msp-surface);border:1px solid var(--msp-line);border-radius:18px;
  padding:22px 22px 18px;box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
}
.rail-auth-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.rail-auth-hd b{font-size:17px}
.rail-auth-hd button{width:36px;height:36px;border:1px solid var(--msp-line);border-radius:10px;
  background:transparent;color:var(--msp-text);cursor:pointer;font-size:15px}
.rail-auth-form{display:grid;gap:10px}
.rail-auth-form label{display:grid;gap:6px;font-size:12px;color:var(--msp-muted)}
.rail-auth-form input{
  min-height:44px;padding:10px 13px;border:1px solid var(--msp-line);border-radius:10px;
  background:var(--msp-bg);color:var(--msp-text);font-size:14px;
}
.rail-auth-form button.ra-go{
  min-height:44px;margin-top:4px;border:1px solid var(--msp-accent);border-radius:10px;
  background:var(--msp-accent);color:var(--msp-on-accent);font-size:14px;font-weight:800;cursor:pointer;
}
.rail-auth-form button.ra-go[disabled]{opacity:.6;cursor:progress}
.rail-auth-msg{min-height:20px;margin:2px 0 0;font-size:12.5px;color:#C0392B}
.rail-auth-sw{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--msp-line)}
.rail-auth-sw button{background:transparent;border:0;color:var(--msp-accent-text);
  font-size:13px;cursor:pointer;padding:6px 0;text-decoration:underline}
.rail-auth-note{margin:10px 0 0;font-size:11.5px;line-height:1.7;color:var(--msp-muted)}
.rail-auth .ra-skill{display:grid;gap:10px}
.rail-auth .ra-skill .ra-row{display:flex;gap:10px}
.rail-auth .ra-skill .ra-row input{flex:1;min-width:0}
@media(max-width:520px){.rail-auth{padding:12px}.rail-auth-card{padding:18px 16px 14px}}

/* 顶栏账号菜单：点右上头像唤起（2026-10-06 修 —— 此前 .rail .avatar 只有 hover 样式、
   全站 8 页都没有给它绑任何点击行为，点下去毫无反应。DOM 由 rail.js 运行时插，
   8 页共用一份，避免各页写两遍造成字节漂移。）
   层级压在登录弹层(120)之下、页面内容之上；定位与 .rail-auth 同一套遮罩语言。 */
.rail-me{position:fixed;inset:0;z-index:115;display:grid;place-items:start end;
  padding:72px 16px 16px;background:rgba(8,8,10,.45);backdrop-filter:blur(2px)}
.rail-me[hidden]{display:none}
.rail-me-card{
  width:min(272px,calc(100vw - 32px));
  background:var(--msp-surface);border:1px solid var(--msp-line);border-radius:16px;
  padding:14px 14px 12px;box-shadow:0 20px 50px -22px rgba(0,0,0,.65);
}
.rail-me-hd{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid var(--msp-line)}
.rail-me-face{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--msp-accent);background:var(--msp-accent-soft);color:var(--msp-text);
  font-size:13px;font-weight:800}
.rail-me-hd b{display:block;font-size:14px;color:var(--msp-text)}
.rail-me-hd span[data-me-sub]{display:block;margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--msp-muted)}
.rail-me-act{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:40px;padding:0 12px;margin-top:6px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:var(--msp-text);font-size:13.5px;text-decoration:none;cursor:pointer}
.rail-me-act:hover{background:var(--msp-accent-soft);border-color:var(--msp-accent)}
/* 改密态：#railMe 带 .is-pwd 时收起全部 .rail-me-act（显隐单一真源在这里，paintMe 只管自己的 hidden）。
   注意 .is-pwd 挂在遮罩层 #railMe 上，选择器别写成 .rail-me-card.is-pwd。 */
.rail-me.is-pwd .rail-me-act{display:none}
.rail-me-act.go{justify-content:center;margin-top:10px;background:var(--msp-accent);
  border-color:var(--msp-accent);color:var(--msp-on-accent);font-weight:800}
.rail-me-act.go:hover{filter:brightness(1.06)}
.rail-me-act[hidden]{display:none}
.rail-me-note{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--msp-line);
  font-size:11.5px;line-height:1.7;color:var(--msp-muted)}
/* 账号菜单里的「修改密码」态（新密码表单只在 #railMe 里存在一份，宽窄屏共用） */
.rail-me-pwd{margin-top:10px;padding-top:10px;border-top:1px solid var(--msp-line)}
.rail-me-pwd[hidden]{display:none}
.rail-me-pwd label{display:block;margin-bottom:8px;font-size:12px;line-height:1.5;color:var(--msp-muted)}
.rail-me-pwd input{display:block;width:100%;box-sizing:border-box;margin-top:5px;min-height:38px;padding:0 10px;
  border:1px solid var(--msp-line);border-radius:9px;background:var(--msp-surface);color:var(--msp-text);font-size:13px}
.rail-me-pwd input:focus-visible{outline:2px solid var(--msp-accent);outline-offset:1px}
.rail-me-pwdmsg{margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--msp-science-red)}
.rail-me-pwdmsg.is-good{color:var(--msp-science-green)}
.rail-me-pwdact{display:flex;gap:8px;margin-top:4px}
.rail-me-pwdact button{min-height:38px;padding:0 14px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700}
.rail-me-pwdgo{flex:1;background:var(--msp-accent);border:1px solid var(--msp-accent);color:var(--msp-on-accent)}
.rail-me-pwdgo:hover{filter:brightness(1.06)}
.rail-me-pwdcancel{background:transparent;border:1px solid var(--msp-line);color:var(--msp-text)}
.rail-me-pwdcancel:hover{background:var(--msp-accent-soft);border-color:var(--msp-accent)}
@media(max-width:520px){.rail-me{padding:72px 12px 12px}.rail-me-card{width:calc(100vw - 24px)}}