/* =========================================================
 * 向阳学术 · 共享基础层 (tokens / reset / 通用组件)
 * 所有页面第一件事就是引它, 页面自己的样式只写"这一页独有的东西"。
 * 规范见 ../design-system/DESIGN-SPEC.md 第 2、3、4 章。
 * 本文件必须排在页面样式之前引入。
 * ========================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --green-deep:#1A7D7D;
  --green-mid:#2BA8A0;
  --green-bright:#3DB8B0;
  --green-light-bg:#F0F7F7;
  --green-subtle:#E4F0EF;
  --dark-bg:#0C1316;
  --text-primary:#1C2226;
  --text-secondary:#5E6A72;
  --text-white:#F0F4F6;
  /* ---------- 字体策略 (2026-09-15 定, 别再改回去) ----------
     只有「大标题」这一类刻意要衬线(宋体)质感的文字才自带字体文件 ——
     assets/fonts 里只剩 noto-serif-sc-900 一个子集, 约 250KB。
     其余正文/按钮/标签一律走系统字体栈: 各平台用各自最好的中文字体,
     省掉约 1.4MB 下载量, 首屏更快, 也不再受"改字就要重建子集"的拖累。 */
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
         "Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",
         "WenQuanYi Micro Hei",sans-serif;
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--text-primary);
  background:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
strong{font-weight:700}
em{font-style:normal}

/* ---------- 3. 滚动显现 ----------
   ⚠ 隐藏必须挂在 html.js 下(每个页面的 head 里有一行内联脚本挂这个类):
     一旦 JS 没加载或被拦, .anr 就不能是 opacity:0 —— 否则整页文字全白,
     这是这个页面最贵的故障。html.js-error 是 js/about.js 初始化失败时补的兜底。 */
.js .anr{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.js .anr.visible,.js-error .anr{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .anr{opacity:1;transform:none;transition:none}
}

/* ---------- 4. 导航 (所有页面共用) ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;
  padding:20px clamp(20px,5vw,72px);
  color:var(--green-deep);
  transition:background .5s cubic-bezier(.16,1,.3,1),padding .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,color .5s;
}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:.5px}
.nav-spacer{flex:1}
.nav-right{display:flex;align-items:center;gap:18px}
.nav-cta{
  padding:9px 22px;border:1.5px solid currentColor;border-radius:100px;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .25s;
}
.nav-cta:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.nav.scrolled{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  color:var(--text-primary);
  padding:13px clamp(20px,5vw,72px);
  /* 只留一层极淡的光影, 不用分割横线 */
  box-shadow:0 1px 18px rgba(12,52,52,.07);
}
.nav.scrolled .nav-cta{border-color:currentColor;color:inherit}
.nav.scrolled .nav-cta:hover{background:var(--green-deep);color:#fff}

/* 手机端导航: 只留 logo + 右侧胶囊按钮, 保证 320 宽不折行。
   只动 logo 与间距各 1 档(视觉几乎无差), 不改胶囊按钮的既有样式。 */
@media (max-width:768px){
  .nav{padding:18px}
  .nav-logo{font-size:17px;letter-spacing:0}
  .nav-logo-svg{width:30px;height:30px}
  .nav-right{gap:12px}
}

/* =========================================================
 * 5. 弹窗基础机制 (所有弹窗共用, 见 DESIGN-SPEC 4.12)
 *    PC: 居中卡片; 手机: 底部抽屉。
 *    三态类名: .is-hidden(移出渲染树) → 无 → .is-visible(淡入)
 *    页面里只写自己的面板尺寸与内容, 不要再各造一套遮罩。
 *
 *    ★ 一条必须全站一致的约定: 在 JS 里判"弹窗是否开着"一律用 .is-visible,
 *      **不要用 !.is-hidden**。关闭是两段式 —— 先摘 .is-visible 开始淡出,
 *      260ms 后才补 .is-hidden。那 260ms 里弹窗已经不可见、而 .is-hidden 还没
 *      加上, 拿它判断就会把这段窗口误判成"还开着"。
 * ========================================================= */

/* 通用显隐开关: 三态类名里的「移出渲染树」那一态。
   放在共享层而不是某一页的样式里 —— 主页不引 nav.css 却同样有弹窗。
   (2026-09-17 之前它定义在 css/nav.css, 属于"放错层": 谁引了谁才有, 极易漏。)
   !important 必须有: 要盖过 .modal 自身的 display:flex。 */
.is-hidden{display:none!important}

.modal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,19,22,.55);
  -webkit-backdrop-filter:blur(8px) saturate(1.2);
  backdrop-filter:blur(8px) saturate(1.2);
  padding:24px;
  opacity:0;pointer-events:none;
  transition:opacity .25s cubic-bezier(.16,1,.3,1);
}
.modal.is-visible{opacity:1;pointer-events:auto}
.modal.is-hidden{display:none!important}
body.modal-open{overflow:hidden}

/* ---- 修饰类: 看图专用弹窗(证据墙灯箱) ----
   两处"刻意不同"都收在这一条里, 不再让页面另抄一套遮罩:
     · 遮罩压得更暗、模糊更重 —— 注意力要落在图上;
     · 手机上不改成底部抽屉 —— 图片居中看才自然, 抽屉是给文字内容用的。 */
.modal--dark{
  z-index:10001;
  background:rgba(12,19,22,.72);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
}

.modal-panel{
  position:relative;width:100%;
  background:#fff;border-radius:26px;
  /* S4 阴影 */
  box-shadow:0 12px 36px rgba(0,0,0,.18),0 40px 80px rgba(0,0,0,.22);
  transform:translateY(16px) scale(.96);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  -webkit-overflow-scrolling:touch;
}
.modal.is-visible .modal-panel{transform:translateY(0) scale(1)}

.modal-close{
  position:absolute;top:15px;right:15px;z-index:3;
  width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(0,0,0,.04);color:var(--text-primary);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;
}
.modal-close:hover{background:rgba(0,0,0,.08);transform:rotate(90deg)}

@media (prefers-reduced-motion:reduce){
  .modal,.modal-panel{transition:none}
}

/* 手机: 统一改成底部抽屉 */
@media (max-width:768px){
  .modal{align-items:flex-end;padding:0}
  /* 例外: 看图的弹窗(灯箱)保持居中 —— 抽屉式贴底会把图片顶到屏幕下缘 */
  .modal--dark{align-items:center;padding:24px}
  .modal-panel{
    max-width:100vw;width:100vw;
    border-radius:26px 26px 0 0;
    transform:translateY(100%);
  }
  .modal.is-visible .modal-panel{transform:translateY(0)}
  /* 顶部把手 */
  .modal-panel::before{
    content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:2px;background:rgba(0,0,0,.16);
  }
}

/* =========================================================
 * 6. 全站页脚 (所有页面共用)
 * ---------------------------------------------------------
 * 结构与文案的唯一来源是 _deploy/partials.mjs 的 footer(), 这里只写样式。
 *
 * ★ 为什么必须放在共享层:
 *   2026-09-17 之前这个版权行是"三套实现" ——
 *     首页        .finale-copy   (about.css, 靠 margin-top 定位)
 *     导航页      .navfoot       (nav.css,   padding 30/46)
 *     两个工具页  .navfoot       (又被 tools.css 覆盖成 clamp(16,2.4vh,24)/clamp(22,3.2vh,32))
 *   同一个版权行, 四个页面量出来是三种高度, 备案号占位只有三个页面有。
 *   现在只有这一处定义 —— 任何页面的页脚高度都必须一样。
 *
 * 间距取的是"最紧的那个页面"(工具页一屏收口, 页脚每多 1px 就少 1px 面板高度),
 * 所以沿用工具页原来的那组值。导航页不受影响: 它的 .navmain 自带
 * clamp(46px,7vh,74px) 底部留白, 页脚只需要很小的上间距。
 *
 * 首页是整屏吸附站, 由 about.css 的 .finale>.navfoot 把 padding 归零 ——
 * 那里留白交给 .finale 自己的 padding-bottom, 否则会多出一屏。
 * ========================================================= */
.navfoot{padding:clamp(16px,2.4vh,24px) 0 clamp(22px,3.2vh,32px);text-align:center}
.navfoot-copy{font-size:12.5px;color:var(--text-secondary);letter-spacing:.03em}

/* 备案号: 未备案时整行带 hidden 藏着(改 _deploy/partials.mjs 后跑一次 stamp),
   备案下来后删掉 hidden 并填号码即可, 无需改样式。
   ⚠ .navfoot-icp 不能写 display —— 否则会盖掉 [hidden] 的 display:none, 隐藏就失效。 */
.navfoot-icp[hidden]{display:none}
.navfoot-icp{
  margin:10px 0 0;font-size:12.5px;line-height:1.7;
  color:var(--text-secondary);letter-spacing:.03em;
}
.navfoot-icp a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.16);padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease;
}
.navfoot-icp a:hover,.navfoot-icp a:focus-visible{
  color:var(--green-deep);border-bottom-color:var(--green-deep);
}

@media (max-width:768px){
  .navfoot{padding:24px 0 36px}
  .navfoot-copy{font-size:12px}
  .navfoot-icp{margin-top:8px;font-size:12px}
}