/* ===== mega-nav.css · 全站共享「卷帘」顶栏（Apple 门户风，参考主页 nav.top-nav）=====
 * 实心白 · 单条 · 悬停下拉卷帘（高度形变 + 文字错峰渐显）· 当前页「X总览」收进 header 弹层。
 * 由 mega-nav.js 注入 <nav class="top-nav">…；替换旧的 test-topnav / header-hamburger。
 * 类名 .amh-* 与主页一致，保证风格 1:1；.mnav-* 为共享层专属（总览弹层 / 右侧动作区）。
 * ================================================================================== */

/* 页面纯白底（本文件在页面内联样式之后加载，靠源序覆盖 --bg-soft 类底色） */
body{ background:#fff; }
/* 手机端保险：任何元素意外超宽时裁掉而不是让整页左右晃（clip 不建滚动容器、不破坏 sticky；老浏览器退回 hidden） */
html{ overflow-x:hidden; overflow-x:clip; }

/* ===== 跨页「板块放大」过渡（View Transitions，浏览器原生接管，不拖慢跳转）=====
   点开板块卡片 → mega-nav.js 给它打上 view-transition-name:sect-open，
   于是它被单独抽出来「放大着淡出」，其余旧页淡出、新页淡入微放大 —— 像卡片钻进了新页面。
   不支持的浏览器（旧 Safari/FF）自动无视这段，退回普通跳转，不影响功能。 */
@view-transition{ navigation:auto; }
::view-transition-old(sect-open){ animation:mnav-card-zoom .5s cubic-bezier(.32,.72,0,1) both; z-index:3; }
@keyframes mnav-card-zoom{ to{ transform:scale(1.4); opacity:0; } }
::view-transition-new(root){ animation:mnav-page-in .5s cubic-bezier(.32,.72,0,1) both; }
@keyframes mnav-page-in{ from{ transform:scale(.975); opacity:0; } }
::view-transition-old(root){ animation:mnav-page-out .34s ease both; }
@keyframes mnav-page-out{ to{ opacity:0; } }
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(sect-open),::view-transition-new(root),::view-transition-old(root){ animation:none; }
}

/* ---- 顶栏骨架 ---- */
nav.top-nav{ position:sticky; top:0; z-index:100; display:flex; align-items:center;
  background:#fff; border-bottom:1px solid #eceaf2; margin:0;
  width:100%; align-self:stretch; box-sizing:border-box;   /* 抗宿主页 body 居中/收缩：始终满宽 */
  --amh-edge:clamp(20px,4vw,56px);
  padding:0 var(--amh-edge); min-height:58px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  color:#26222e; -webkit-font-smoothing:antialiased; }
nav.top-nav .top-nav-brand{ display:flex; align-items:center; gap:10px; flex:none; text-decoration:none; color:inherit; }
nav.top-nav .top-nav-logo{ width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,#6b1fb8,#4a1380); color:#fff; font-weight:800; font-size:13px; letter-spacing:.04em;
  display:flex; align-items:center; justify-content:center; }

/* ---- 「X总览」触发 + 弹层（把本页 hero 收进 header）---- */
.mnav-ov{ display:inline-flex; align-items:center; gap:6px; margin-left:14px; flex:none;
  border:none; background:none; font-family:inherit; cursor:pointer; padding:8px 4px;
  font-size:14px; font-weight:700; color:#26222e; letter-spacing:-.01em; white-space:nowrap; }
.mnav-ov:hover{ color:#6b1fb8; }
.mnav-ov .mnav-ov-ic{ width:15px; height:15px; color:#6b1fb8; flex:none; }
.mnav-ov .mnav-chev{ width:14px; height:14px; color:#a59fae; flex:none; transition:transform .3s cubic-bezier(.32,.72,0,1); }
.mnav-ov.on .mnav-chev{ transform:rotate(180deg); }
.mnav-ovpop{ position:absolute; top:calc(100% + 8px); left:clamp(14px,3vw,26px); z-index:96;
  width:min(452px,calc(100vw - 28px)); background:#fff; border:1px solid #eee; border-radius:18px;
  box-shadow:0 26px 54px rgba(40,20,70,.15); padding:24px 26px 26px;
  opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
  transition:opacity .34s cubic-bezier(.32,.72,0,1), transform .34s cubic-bezier(.32,.72,0,1), visibility .34s; }
.mnav-ovpop.on{ opacity:1; transform:none; visibility:visible; pointer-events:auto; }
.mnav-ovpop h3{ font-size:22px; font-weight:700; color:#1d1d1f; letter-spacing:-.02em; line-height:1.15;
  margin:0 0 8px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.mnav-ovpop h3 .en{ font-size:13.5px; font-weight:600; color:#a59fae; letter-spacing:0; }
.mnav-ovpop p{ font-size:13.5px; line-height:1.68; color:#6e6e73; margin:0 0 18px; }
.mnav-ovstats{ display:flex; flex-wrap:wrap; gap:20px 32px; }
.mnav-ovstats .st b{ display:block; font-size:24px; font-weight:700; color:#1d1d1f; letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums; margin-bottom:4px; }
.mnav-ovstats .st span{ font-size:12px; color:#a59fae; }

/* ---- 板块导航：全宽度收进汉堡抽屉（子页顶栏与主页一样只留紧凑居中集群）----
   七个板块链接不再内联铺开，点 ☰ 展开抽屉（带磨砂背景）；悬停卷帘大菜单仅主页保留。 */
.amh-nav{ flex-basis:100%; order:6; margin:0; display:flex; flex-direction:column; align-items:stretch;
  height:auto; overflow:hidden; max-height:0; opacity:0; transition:max-height .3s ease,opacity .3s ease; }
nav.top-nav.amh-open .amh-nav{ max-height:80vh; overflow-y:auto; overscroll-behavior:contain; opacity:1;
  margin-top:8px; padding:6px 0 12px; border-top:1px solid #eceaf2; }
.amh-item{ display:block; position:static; }
/* ---- 抽屉二级：当前板块默认展开，其余点箭头展开（点击而非悬停，触屏桌面同一套手感）---- */
.amh-lblrow{ display:flex; align-items:center; gap:6px; border-bottom:1px solid #f4f2f8; }
.amh-lblrow .amh-lbl{ flex:1; border-bottom:0; }
.amh-subtoggle{ flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:#8b8496; cursor:pointer; border-radius:9px; padding:0; }
.amh-subtoggle:hover{ background:#f1eef7; color:#6b1fb8; }
.amh-subtoggle svg{ width:18px; height:18px; transition:transform .22s ease; }
.amh-item.amh-sub-open .amh-subtoggle svg{ transform:rotate(180deg); }
.amh-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s ease; }
.amh-item.amh-sub-open .amh-sub{ grid-template-rows:1fr; }
.amh-subin{ overflow:hidden; min-height:0; }
.amh-subitem{ display:flex; align-items:center; gap:7px; padding:11px 4px 11px 18px; font-size:15px;
  color:#4a4455; text-decoration:none; border-bottom:1px solid #f7f6fa; }
.amh-subitem:hover{ color:#6b1fb8; }
.amh-item.amh-cur > .amh-lblrow .amh-lbl{ color:#6b1fb8; font-weight:700; }
@media(prefers-reduced-motion:reduce){ .amh-sub,.amh-subtoggle svg{ transition:none; } }
.amh-lbl{ display:flex; align-items:center; height:auto; padding:14px 4px; font-size:17px; font-weight:600;
  color:#26222e; cursor:pointer; white-space:nowrap; transition:color .2s; text-decoration:none;
  border-bottom:1px solid #f4f2f8; }
.amh-item:hover .amh-lbl, .amh-item.amh-active .amh-lbl{ color:#6b1fb8; }
.amh-item.amh-cur .amh-lbl{ color:#6b1fb8; font-weight:700; }

.amh-flyout{ display:none !important; }   /* 悬停卷帘面板在子页停用（主页有自己的实现，不走本文件） */
.amh-panel{ position:absolute; left:0; top:0; width:100%; padding:36px var(--amh-edge) 46px; pointer-events:none; }
.amh-panel.on{ pointer-events:auto; }
.amh-panel .amh-col > *{ opacity:0; transform:translateY(9px); transition:opacity .12s ease, transform .12s ease; }
.amh-panel.on .amh-col > *{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
.amh-panel.on .amh-col > *:nth-child(1){ transition-delay:.10s; }
.amh-panel.on .amh-col > *:nth-child(2){ transition-delay:.17s; }
.amh-panel.on .amh-col > *:nth-child(3){ transition-delay:.24s; }
.amh-panel.on .amh-col > *:nth-child(4){ transition-delay:.31s; }
.amh-panel.on .amh-col > *:nth-child(5){ transition-delay:.38s; }
.amh-panel.on .amh-col > *:nth-child(6){ transition-delay:.45s; }
.amh-panel.on .amh-col > *:nth-child(7){ transition-delay:.52s; }
nav.top-nav.amh-open{ border-bottom-color:transparent; }
.amh-dd-inner{ display:flex; gap:clamp(40px,6vw,92px); max-width:1120px; }
.amh-col{ display:flex; flex-direction:column; align-items:flex-start; }
.amh-col h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#a59fae; font-weight:600; margin-bottom:18px; }
.amh-col a{ font-size:16px; font-weight:400; color:#26222e; text-decoration:none; padding:7px 0; line-height:1.3; transition:color .18s; white-space:nowrap; }
.amh-col a.big{ font-size:25px; font-weight:500; letter-spacing:-.018em; }
.amh-col a:hover{ color:#6b1fb8; }
/* 兜底：没有去处的下拉项（正常数据下一个都不该出现，出现即漏写，控制台同时点名） */
.amh-col .amh-dead{ display:block; font-size:16px; color:#9ca3af; padding:7px 0; line-height:1.3; cursor:default; white-space:nowrap; }
.amh-col .amh-dead.big{ font-size:25px; font-weight:500; letter-spacing:-.018em; }
.amh-scrim{ position:fixed; inset:0; background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:saturate(1.8) blur(22px); backdrop-filter:saturate(1.8) blur(22px);
  opacity:0; visibility:hidden; transition:opacity .3s ease,visibility .3s; z-index:90; pointer-events:none; }
nav.top-nav.amh-open ~ .amh-scrim{ opacity:1; visibility:visible; }

/* ---- 右侧动作区（课堂笔记按钮由 notes-widget 挂到 [data-notes-mount]）---- */
nav.top-nav .mnav-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; }
/* 交互页「工作控件」采纳进顶栏后（[data-mnav-row]）：内联排布、别撑破 */
nav.top-nav .mnav-ctl{ flex:none; display:inline-flex; align-items:center; }
nav.top-nav .mnav-adopted-panel{ position:absolute; top:100%; left:0; right:0; }

/* ---- 宽屏：logo + 导航 + 图标/账号 挨紧成一组、整组居中（Apple 式，与门户同款）---- */
/* 别用 space-between 撑开、也别给 actions 留 margin-left:auto —— 那样会铺满显得没居中。
   下拉第一列由 mega-nav.js 的 alignFly 动态对齐到（居中后的）logo 左缘。 */
/* nav 要允许换行：抽屉（flex-basis:100%）占满一整行、展开时落在集群下方。
   align-content:center 让图标行在 min-height 里垂直居中——否则空余高度全被分给隐藏的抽屉行，图标贴顶。 */
nav.top-nav{ flex-wrap:wrap; align-content:center; }
@media(min-width:981px){
  /* gap 只给列间隙：行间隙必须为 0——隐藏抽屉行虽 0 高，行间隙也会把 nav 撑高、图标行被顶上去 */
  nav.top-nav{ justify-content:center; gap:0 clamp(10px,1.8vw,26px); }
  nav.top-nav .top-nav-brand{ flex:none; }
  nav.top-nav .mnav-actions{ margin-left:0; justify-content:center; flex-wrap:wrap; max-width:100%; }
}

/* ---- 汉堡（全宽度可见：板块导航一律收在抽屉里）---- */
.amh-burger{ display:flex; width:40px; height:40px; align-items:center; justify-content:center;
  border:none; background:transparent; color:#26222e; cursor:pointer; padding:0; border-radius:50%; margin-left:2px; }
.amh-burger:hover{ background:#f1eef7; }
.amh-burger svg{ width:24px; height:24px; }
.amh-burger .x{ display:none; }
nav.top-nav.amh-open .amh-burger .bars{ display:none; }
nav.top-nav.amh-open .amh-burger .x{ display:block; }

/* 抽屉里的工作控件容器：无条件成立（宽屏时空 → 隐藏；变窄时 JS 把控件搬进来才显示）。
   收进抽屉的项在这里横向铺开。 */
.mnav-drawer-ctls{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 4px 10px; border-bottom:1px solid #f4f2f8; }
.mnav-drawer-ctls:empty{ display:none; }

/* ★ 折叠触发改成「顶栏实宽变窄」的类 .mnav-tight（JS 按 nav.offsetWidth 打，见 responsiveCtls）。
   这样课堂笔记分屏压窄内容区（视口不变、media query 不触发）时也能收起。
   保留下面的 @media 作纯视口窄屏的兜底，两者叠加、幂等。 */
nav.top-nav.mnav-tight .mnav-actions{ flex-wrap:wrap; justify-content:flex-end; row-gap:6px; max-width:100%; min-width:0; }
nav.top-nav.mnav-tight .mnav-ov{ margin-left:8px; }
nav.top-nav.mnav-tight .mnav-back span{ display:none; }   /* 紧凑：返回只留箭头 */
nav.top-nav.mnav-tight .mnav-back{ padding:6px 9px; margin-right:8px; }
nav.top-nav.mnav-xtight .mnav-ov span{ display:none; }    /* 极窄：总览只留图标 + 箭头 */
nav.top-nav.mnav-xtight .mnav-ovpop{ left:8px; }

@media(max-width:980px){
  /* 采纳的工作控件已由 mega-nav.js 搬进抽屉（.mnav-drawer-ctls），动作区只剩 笔记+账号 图标，
     和 logo/总览/汉堡 同一行；保留换行兜底防意外撑宽 */
  nav.top-nav .mnav-actions{ flex-wrap:wrap; justify-content:flex-end; row-gap:6px; max-width:100%; min-width:0; }
  .mnav-ov{ margin-left:8px; }
}
@media(max-width:560px){
  .mnav-ov span{ display:none; }        /* 极窄：总览只留图标 + 箭头 */
  .mnav-ovpop{ left:8px; }
}
/* 返回上一级（全站统一，header 最左）：窄屏只留箭头 */
nav.top-nav .mnav-back{ display:inline-flex; align-items:center; gap:5px; flex:none; margin-right:12px;
  border:1px solid #e5e0ee; background:#fff; color:#6b1fb8; border-radius:99px; padding:6px 13px 6px 9px;
  font-size:12.5px; font-weight:700; text-decoration:none; white-space:nowrap; }
nav.top-nav .mnav-back:hover{ background:#f6f0ff; border-color:#d9cdee; }
nav.top-nav .mnav-back svg{ width:14px; height:14px; flex:none; }
@media(max-width:760px){
  nav.top-nav .mnav-back span{ display:none; }
  nav.top-nav .mnav-back{ padding:6px 9px; margin-right:8px; }
}