/* ============================================================================
 * 冲击波英语 · 手机端目录（左侧抽屉）+ 顶部品牌自适应
 * 文件位置：/learn/assets/mobile-nav.css
 * ----------------------------------------------------------------------------
 * 杨老师 2026-10-31 的两条要求：
 *   ①「这一块的图标太长，有时候会渗出手机屏幕以外，这个根据比例来调节一定要做好」
 *      → 见 §1：品牌胶囊任何宽度都不许溢出。
 *   ②「很多时候用户需要拉到下方才能看到选项对应的内容，能否用左侧做一个小下拉
 *      菜单，同时协助用户快速到达目的地」
 *      → 见 §2~§5：左上角 ☰ 抽屉 + 滚动时常驻的悬浮 ☰ + 当前所在版块高亮。
 *
 * 设计取向（「最便利但不清屏」）：
 *   · 手机上把 8 个导航项**收进抽屉**，首屏立刻露出真正的内容，不再先看一屏菜单；
 *   · 抽屉里的每一项都是**整行大按钮**（≥46px 高），带中英对照，拇指够得着；
 *   · **滚到哪里，抽屉里就高亮哪一项** —— 打开就知道自己在哪、下一步点哪；
 *   · 滚过一屏后左下角出现**悬浮 ☰**，不用往回滚到顶部也能换目的地；
 *   · 抽屉底部有**回到顶部**，长页面一键回魂；
 *   · 遮罩点击 / 按 Esc / 点任意一项 都能关，且**不拦截链接本身**的跳转；
 *   · iPhone 刘海与底部横条用 env(safe-area-inset-*) 让开。
 *
 * ★ 硬规矩：所有类名一律 iemn- 前缀；组件自带 font / box-sizing，
 *   不依赖页面 CSS 变量（英语中心、数学中心两套页面的变量名并不一致）。
 * ★ 只有在 body.iemn-ready 时才改栅格 —— JS 没跑起来就保持原来的纵向排列，
 *   宁可难看一点，也绝不出现「菜单消失了却没地方点」。
 * ========================================================================== */

/* ---------------------------------------------------------------- §1 品牌胶囊
 * 病根：styles.css 里 `.brand strong, .brand small { white-space: nowrap }`，
 * 而小字带 letter-spacing:.12em + uppercase，"IMPACT GROWTH RESEARCH CENTRE"
 * 30 个字符被撑到 270px 上下 —— 胶囊宽度于是由这行英文决定，窄屏必然顶出屏幕。
 * 三道保险：
 *   ① min-width:0 + overflow:hidden 让弹性盒允许它收缩（否则 flex 子项不肯缩）；
 *   ② 字号按视口比例走 clamp()，宽屏大字、窄屏小字；
 *   ③ 字距从 .12em 收到 .05em（30 个字符能省出约 40px）；
 *   ④ 最后还有 text-overflow:ellipsis 兜底，极端窄屏也只是省略号，绝不溢出。
 * -------------------------------------------------------------------------- */
.brand {
  max-width: 100%;
  min-width: 0;
}

.brand > span:not(.brand-mark) {
  min-width: 0;
  overflow: hidden;
}

.brand strong,
.brand small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- ★ 短名切换：窄屏改用 5 个字的名字 --------------------------------
 * 实测（2026-10-31，Playwright 量的）：
 *   品牌全名「冲击波成长研究中心」9 个字，13.76px 时需要 124px；
 *   而 320px 的手机上顶栏只剩 54px 给它 —— 差 70px。
 *   光靠 clamp() 缩字号要缩到 6px 才塞得进去，等于看不见。
 *   所以窄屏换短名：英语中心「冲击波英语」、数学中心「冲击波数学」（5 个字，65px）。
 *   完整机构名并没有丢：抽屉顶部、页面大标题、品牌首页都还在。
 *   JS 会在 <strong> 里补 <span class="iemn-bn-short">，这里只负责显隐。
 * ------------------------------------------------------------------------ */
.brand .iemn-bn-short {
  display: none;
}

@media (max-width: 760px) {
  .topbar--stacked .brand {
    padding: 6px 10px 6px 6px;
    gap: 7px;
  }

  .topbar--stacked .brand-mark {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  /* 320px 上留给文字的只有 62px —— 5 个字 × 12px = 60px 刚好容得下。
     3.7vw 在 360/390/414 上分别是 13.3 / 14.4 / 15.3，宽屏自然变大。 */
  .topbar--stacked .brand strong {
    font-size: clamp(12px, 3.7vw, 15.5px);
    line-height: 1.15;
    white-space: nowrap;
  }

  .topbar--stacked .brand small {
    margin-top: 2px;
    font-size: clamp(0.48rem, 2.05vw, 0.58rem);
    letter-spacing: 0.05em;
    line-height: 1.2;
  }

  /* 窄屏：藏全名、露短名 */
  .brand .iemn-bn-full {
    display: none;
  }

  .brand .iemn-bn-short {
    display: inline;
  }
}

/* 420px 以下实在放不下那行英文 —— 整行收掉（完整名字在抽屉顶部仍然有）。
   这比让它缩成 8px 的灰线要体面得多。 */
@media (max-width: 419px) {
  .topbar--stacked .brand small {
    display: none;
  }
}

/* ---------------------------------------------------------------- §2 顶部栅格
 * 手机上顶栏改成三格：[☰] [品牌] [登录]。
 * 8 个导航项被 JS 搬进抽屉，所以这里不再有 nav 行。
 * -------------------------------------------------------------------------- */
body.iemn-ready .topbar--stacked {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  /* 第二行留给 .iesb-quick（登录后的「我的成绩档案 / 教师台 / 发布通知」）。
     英语/数学页没有这个元素，或它还没渲染出来时，这一行高度为 0，不影响布局。 */
  grid-template-areas: "menu brand actions" "quick quick quick" !important;
  align-items: center;
  gap: 8px;
}

body.iemn-ready .topbar--stacked .iesb-quick {
  grid-area: quick;
  width: 100%;
  margin: 0;
}

body.iemn-ready .topbar--stacked .iemn-burger {
  grid-area: menu;
}

body.iemn-ready .topbar--stacked .brand {
  grid-area: brand;
}

body.iemn-ready .topbar--stacked .top-actions {
  grid-area: actions;
  flex-wrap: nowrap;
  gap: 8px;
}

/* 登录胶囊在顶栏里必须收窄，否则登录后的用户名会把品牌挤爆 */
body.iemn-ready .topbar--stacked .member-pill {
  max-width: 34vw;
  padding: 9px 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}

body.iemn-ready .topbar--stacked .member-pill .i18n-en {
  display: none;
}

/* ---------------------------------------------------------------- §3 汉堡键 */
.iemn-burger {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: #14211c;
  color: #fff;
  font: inherit;
  cursor: pointer;
  place-items: center;
  box-shadow: 0 6px 16px rgba(20, 33, 28, 0.18);
  transition: transform 0.15s ease, background 0.15s ease;
}

body.iemn-ready .iemn-burger {
  display: grid;
}

.iemn-burger:active {
  transform: scale(0.94);
}

.iemn-burger span {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.iemn-burger span + span {
  margin-top: 4px;
}

/* ---------------------------------------------------------------- §4 抽屉 */
.iemn-scrim {
  position: fixed;
  inset: 0;
  z-index: 999990;
  background: rgba(12, 22, 18, 0.46);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.iemn-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 999991;
  display: flex;
  flex-direction: column;
  width: min(86vw, 340px);
  max-width: 92vw;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fffdf6;
  color: #14211c;
  box-shadow: 0 0 46px rgba(0, 0, 0, 0.28);
  transform: translateX(-103%);
  /* visibility 让关着的时候里面的链接不参与 Tab 顺序；
     transition 里给它 0.26s 延迟，是为了「先滑走再消失」。 */
  visibility: hidden;
  transition: transform 0.26s cubic-bezier(0.22, 0.7, 0.3, 1),
    visibility 0s linear 0.26s;
  will-change: transform;
  overscroll-behavior: contain;
}

body.iemn-open .iemn-scrim {
  opacity: 1;
  visibility: visible;
}

body.iemn-open .iemn-drawer {
  transform: none;
  visibility: visible;
  transition: transform 0.26s cubic-bezier(0.22, 0.7, 0.3, 1), visibility 0s;
}

body.iemn-lock {
  overflow: hidden !important;
}

/* 抽屉头部 */
.iemn-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(20, 33, 28, 0.08);
}

.iemn-brand {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.iemn-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f8c45d;
  color: #14211c;
  font-size: 18px;
}

.iemn-bt {
  min-width: 0;
}

.iemn-bt strong {
  display: block;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iemn-bt small {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #7c8c84;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.iemn-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 33, 28, 0.07);
  color: #14211c;
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.iemn-close:active {
  background: rgba(20, 33, 28, 0.16);
}

/* 抽屉滚动区 */
.iemn-body {
  flex: 1 1 auto;
  padding: 12px 14px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.iemn-cap {
  margin: 14px 0 8px;
  color: #8a9a92;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.iemn-cap:first-child {
  margin-top: 2px;
}

.iemn-cap span {
  margin-left: 6px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* 抽屉里的导航列表：整行大按钮
   ★ 选择器写成 .iemn-list（抽屉里的容器），而不是 .nav-links ——
     因为 /me/ /teacher/ 这类页面没有版块导航，JS 会直接往 .iemn-list 里生成
     「跨页面目录」的 <a>。写成 .iemn-list 一份样式两种模式都能用。 */
.iemn-drawer .nav-links {
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.iemn-drawer .iemn-list a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid rgba(20, 33, 28, 0.08);
  border-radius: 14px;
  background: #fff;
  color: #14211c;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.iemn-drawer .iemn-list a:active {
  background: #fff4dd;
}

.iemn-drawer .iemn-list a .i18n-en {
  color: #7c8c84;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 当前所在版块：金色底 + 左侧橙条，一眼看出「我在这儿」 */
.iemn-drawer .iemn-list a.is-current {
  border-color: rgba(248, 196, 93, 0.95);
  background: #fff4dd;
  box-shadow: inset 3px 0 0 #d96b42;
}

/* 账号与入口 */
.iemn-acts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.iemn-acts a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid rgba(20, 33, 28, 0.08);
  border-radius: 14px;
  background: #fff;
  color: #14211c;
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
  box-sizing: border-box;
}

.iemn-acts a .i18n-en {
  margin-left: auto;
  color: #8a9a92;
  font-size: 0.7rem;
  font-weight: 700;
}

/* ★「返回首页」这一行要单独排版。
 *   页面原样式（styles.css 的 .home-pill）是 flex-wrap:wrap + 英文整行块级居中，
 *   搬进 307px 宽的抽屉后会被挤成「← 一行 / 英文一行居中」，看着像坏了。
 *   这里改成和导航项一致的两行式：左边箭头竖着跨两行，右边中文一行、英文一行，
 *   全部左对齐 —— 中文永远完整，英文放不下才出省略号。
 *   JS 会把那段裸文字包进 <span class="iemn-cn">（否则没法定格）。 */
.iemn-acts .home-pill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  row-gap: 1px;
  min-height: 52px;
  padding: 9px 13px;
}

.iemn-acts .home-pill > span:first-child {
  grid-row: 1 / span 2;
  grid-column: 1;
  justify-self: center;
  font-size: 1rem;
  line-height: 1;
}

.iemn-acts .home-pill > .iemn-cn {
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iemn-acts .home-pill > .i18n-en {
  grid-column: 2;
  grid-row: 2;
  margin-left: 0;
  overflow: hidden;
  color: #8a9a92;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.iemn-acts a.iemn-login {
  border-color: transparent;
  background: #e97f00;
  color: #fff;
  box-shadow: 0 8px 20px rgba(233, 127, 0, 0.22);
}

.iemn-acts a.iemn-login .i18n-en {
  color: rgba(255, 255, 255, 0.85);
}

/* 抽屉底部：回到顶部 */
.iemn-foot {
  flex: 0 0 auto;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(20, 33, 28, 0.08);
  background: #fffdf6;
}

.iemn-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(20, 33, 28, 0.14);
  border-radius: 999px;
  background: #fff;
  color: #14211c;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
}

.iemn-top .i18n-en {
  color: #8a9a92;
  font-size: 0.7rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- §5 悬浮 ☰
 * 滚过一屏之后出现在左下角 —— 不用往回滚也能换目的地。
 * 右下角已经被小助手的对话气泡占了，所以这里走左边。
 * -------------------------------------------------------------------------- */
.iemn-fab {
  position: fixed;
  left: 14px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 999989;
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 33, 28, 0.92);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(20, 33, 28, 0.28);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.iemn-ready .iemn-fab {
  display: grid;
}

body.iemn-fab-on .iemn-fab {
  opacity: 1;
  transform: none;
}

/* ★ 通用模式（/me/ /teacher/ /notices/ /me/parent/）：
 *   这些页面没有顶栏汉堡，悬浮键就是唯一入口，所以**常驻显示**，不等滚动。
 *   用 :not(.iemn-open) 把「抽屉开着时让位」的规则让出来（见下一条）。 */
body.iemn-ready.iemn-generic:not(.iemn-open) .iemn-fab {
  opacity: 1;
  transform: none;
}

.iemn-fab span {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.iemn-fab span + span {
  margin-top: 4px;
}

/* 抽屉开着的时候，悬浮键让位 */
body.iemn-open .iemn-fab {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- §6 锚点定位
 * 跳转之后标题不要被顶栏/刘海挡住；手机上平滑滚动（老浏览器自动降级为直接跳）。
 * -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html {
    scroll-behavior: smooth;
  }

  /* ★ 抽屉里点导航 → 瞬间到位，不要慢慢滑。
   *   实测这一页的「学习记录」在第 20,950px，smooth 滚过去要 1.6 秒，
   *   中途把整页内容从眼前刷一遍，又晕又慢；用户点菜单要的就是「立刻到」。
   *   JS 在点击的**捕获阶段**加上这个类，等默认跳转执行完再摘掉 ——
   *   所以链接自身的跳转、以及 app.js 绑的 data-nav-filter 筛选都不受影响。 */
  html.iemn-instant {
    scroll-behavior: auto;
  }
}

#featured,
#featured-pm,
#academies,
#my-courses,
#records,
#crew-videos {
  scroll-margin-top: 18px;
}

/* ---------------------------------------------------------------- §7 桌面端
 * 抽屉与汉堡一律不出现，JS 会把节点搬回原位。
 * -------------------------------------------------------------------------- */
@media (min-width: 761px) {
  .iemn-burger,
  .iemn-fab,
  .iemn-drawer,
  .iemn-scrim {
    display: none !important;
  }
}

/* 打印时全部隐藏 */
@media print {
  .iemn-burger,
  .iemn-fab,
  .iemn-drawer,
  .iemn-scrim {
    display: none !important;
  }
}

/* 尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .iemn-drawer,
  .iemn-scrim,
  .iemn-fab {
    transition: none !important;
  }
}