/* ══════════════════════════════════════════════════════════════════
   help.css — pp145 帮助中心 / 新手指引 / 首次触达提示
   学生端是浅色主题：--card-bg #FFF、--text #3B3557、--kid-line rgba(120,110,170,.22)。
   尺寸一律用 rem，跟着「账号设置 → 字号」一起缩放（pp138 的 --fs）。
   ══════════════════════════════════════════════════════════════════ */

/* ── 功能地图 ── */
.help-mask {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(59, 53, 87, 0.46);
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: helpFadeIn .16s ease-out both;
}
.help-mask.out { animation: helpFadeOut .18s ease-in both; }
.help-mask > * { margin-top: auto; margin-bottom: auto; }
@keyframes helpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes helpFadeOut { from { opacity: 1; } to { opacity: 0; } }

.help-card {
  width: min(94vw, 390px);
  /* pp145b：21 项平铺会撑出屏幕，卡片改成「头 + 可滚的身体 + 脚」三段，
     只有中间那段滚动 —— 标题和「知道啦」永远在手边。 */
  max-height: min(88vh, 660px);
  display: flex; flex-direction: column;
  background: var(--card-bg, #fff);
  color: var(--text, #3B3557);
  border-radius: 22px;
  /* 边框 / 圆角跟 kid-app.css 里 .setup-card 那一族对齐（3px #FFDDA6），
     免得这个弹层看着像外挂进来的 */
  border: 3px solid #FFDDA6;
  padding: 16px 6px 14px 16px;
  box-shadow: 0 18px 46px rgba(59, 53, 87, .28);
  animation: helpPop .2s cubic-bezier(.2, .9, .3, 1.2) both;
  text-align: left;
}
@keyframes helpPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.help-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; padding-right: 10px; }
.help-head-txt { min-width: 0; }
.help-title { font-size: .98rem; font-weight: 800; line-height: 1.35; margin: 0; }
.help-sub { font-size: .72rem; color: var(--text-dim, #8E86A6); line-height: 1.5; margin: 3px 0 0; }
.help-x {
  flex: none; margin-left: auto;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--kid-line, rgba(120, 110, 170, .22));
  background: #F1EDFF; color: var(--text, #3B3557);
  font-size: .72rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.help-x:active { transform: scale(.92); }

.help-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; }
/* 中间那段自己滚：右边留 8px 给滚动条，不然卡片贴着圆角会显得缺一块 */
.help-body {
  min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-right: 10px; margin-right: -2px;
  overscroll-behavior: contain;
}
.help-group-t {
  font-size: .68rem; font-weight: 800; color: var(--text-dim, #8E86A6);
  margin: 10px 0 6px; letter-spacing: .02em;
}
.help-group-t:first-child { margin-top: 0; }
.help-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; min-width: 0;
  background: #FCFBFF;
  border: 2px solid var(--kid-line, rgba(120, 110, 170, .22));
  border-radius: 12px;
  cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s, background .12s;
}
.help-item:active { transform: scale(.97); background: #F1EDFF; }
.help-ico {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 9px;
  background: #EEEDFE;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; line-height: 1;
}
.help-txt { min-width: 0; display: block; }
.help-name { display: block; font-size: .82rem; font-weight: 800; line-height: 1.3; }
.help-hint { display: block; font-size: .64rem; color: var(--text-dim, #8E86A6); line-height: 1.35; margin-top: 1px; }

.help-card .help-ok {
  display: block; width: calc(100% - 10px); margin-top: 12px;
  font-size: .88rem; font-weight: 800;
  padding: 9px 0; border-radius: 12px;
  flex: none;
}

/* ── 「指给你看」：目标按钮闪三下 + 一个气泡 ── */
@keyframes helpSpot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0); }
  30%      { box-shadow: 0 0 0 5px rgba(108, 92, 231, .5); }
  60%      { box-shadow: 0 0 0 2px rgba(108, 92, 231, .2); }
}
.help-spot {
  animation: helpSpot .62s ease-in-out 3;
  position: relative; z-index: 1450;
  border-radius: 10px;
}
.help-spot-tip {
  position: fixed; z-index: 1460;
  max-width: 74vw;
  padding: 7px 11px; border-radius: 10px;
  background: #534AB7; color: #fff;
  font-size: .74rem; font-weight: 700; line-height: 1.4;
  box-shadow: 0 6px 18px rgba(59, 53, 87, .3);
  cursor: pointer;
  animation: helpPop .16s ease-out both;
}
.help-spot-tip::after {
  content: ''; position: absolute; left: 50%; top: -5px; margin-left: -5px;
  width: 10px; height: 10px; background: #534AB7; transform: rotate(45deg);
}

/* ── 新手三屏（复用 .setup-overlay 排队，卡片自己排版）── */
.help-tour-mask { z-index: 340; }
.help-tour {
  position: relative;
  max-width: 380px; width: 94%;
  padding: 26px 20px 18px;
  border: 2px solid var(--kid-line, rgba(120, 110, 170, .22));
  box-shadow: 0 18px 46px rgba(59, 53, 87, .3);
}
.tour-skip {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .72rem; color: var(--text-dim, #8E86A6);
  padding: 4px 6px; -webkit-tap-highlight-color: transparent;
}
.tour-body { text-align: center; }
.tour-emoji { font-size: 2.9rem; line-height: 1.1; margin-bottom: 8px; }
.tour-title { font-size: 1.06rem; font-weight: 800; margin: 0 0 8px; line-height: 1.35; }
.tour-desc { font-size: .8rem; line-height: 1.72; color: var(--text-dim, #8E86A6); margin: 0 auto; max-width: 19rem; }
.tour-foot { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.tour-dots { display: flex; gap: 5px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(120, 110, 170, .28); display: block; }
.tour-dots i.on { background: #6C5CE7; width: 18px; border-radius: 4px; }
.tour-next { margin-left: auto; font-size: .88rem; font-weight: 800; padding: 9px 20px; border-radius: 12px; }
.tour-map-link {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .72rem; color: #6C5CE7; text-decoration: underline;
  -webkit-tap-highlight-color: transparent;
}

/* ── 首次触达提示条 ──
   ⚠ 居中不能用 `left:50% + translateX(-50%)`：下面的 helpPop 动画会把 transform 覆盖成
     `none`，整条就会被推出屏幕右边（pp145 实测：390 宽上右边整整截掉一截）。
     所以改成 left/right 都贴 0 + margin auto，跟 transform 完全解耦。 */
.help-tip {
  position: fixed; left: 0; right: 0; margin: 0 auto;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 1350;
  width: min(92vw, 360px);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: #534AB7; color: #fff;
  box-shadow: 0 10px 28px rgba(59, 53, 87, .34);
  animation: helpPop .2s ease-out both;
}
.help-tip.out { animation: helpFadeOut .2s ease-in both; }
.help-tip-txt { font-size: .76rem; line-height: 1.55; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.help-tip-x {
  flex: none; font: inherit; font-size: .72rem; font-weight: 800;
  background: rgba(255, 255, 255, .18); color: #fff;
  border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 有弹层时把左下角「安装药丸」收起来（和 index.html 里那几条 :has 规则同一套做法） */
body:has(.help-mask) #pp-install-entry,
body:has(.help-tour-mask) #pp-install-entry { display: none !important; }

/* 顶栏的 ❓ —— 常驻、不跟着工具条横滑，窄屏也一定看得见 */
.help-open {
  flex: none; width: 24px; height: 24px; padding: 0;
  border-radius: 50%; cursor: pointer;
  background: #F1EDFF; color: var(--text, #3B3557);
  border: 2px solid var(--kid-line, rgba(120, 110, 170, .22));
  font-size: .72rem; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.help-open:active { transform: scale(.92); }