/* 给平台统一顶栏（shared/topbar.js，46px 固定在最上面）让位。

   拼读站自己的 .header 是 position:sticky;top:0 —— 不改的话它会吸在顶栏底下被盖住。
   顶栏只在登录成功后注入，届时 body 会拿到 .has-learn-top，所以这里的规则
   全部挂在那个类下：本机离线调试（没有顶栏）时页面保持原样。 */

body.has-learn-top .header {
  top: 46px;
}

body.has-learn-top {
  padding-top: 46px !important;
}

/* 顶栏已经提供了「回门户 / 换教材」的入口，右下角这颗孤立的小角标
   在手机上正好压住练习页固定在底部的操作条，收起来。 */
body.has-learn-top .seo-link-corner {
  display: none;
}

/* 窄屏：站内导航被平台底栏的「更多」接管后（platform.css 隐藏了 .header .nav），
   头部只剩一个「● Phonics」却占着 ~95px 的空白横条。压成一行 48px 的品牌条。 */
@media (max-width: 700px) {
  body.platform-ui .header { padding-top: env(safe-area-inset-top); }
  body.platform-ui .header-inner { height: 48px; min-height: 48px; padding-top: 0; flex-wrap: nowrap; }
  body.platform-ui .header .logo { font-size: 1.1rem; }
}

/* 窄屏：拼读自己的固定底栏（考核「开始」条、练习操作条）会被平台底部导航（58px + 8px）盖住，抬上去。
   网页键盘打开时它们由 touch-keyboard.js 统一隐藏。 */
@media (max-width: 700px) {
  body.platform-ui .qz-start-bar { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
  body.platform-ui .practice-actions { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
  body.platform-ui #toast-container { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* 触屏上的小按钮：退出、讲解发音、练习页图标按钮原来只有 24-30px，手指点不准 */
@media (pointer: coarse) {
  .qz-exit, .qz-explain-play { min-height: 44px; min-width: 44px; }
  .ex-section .icon-btn, .icon-btn { min-height: 40px; min-width: 40px; }
}

/* 打印讲义/练习时顶栏不能跟着印出来（topbar.js 自己也有一条同样的规则，
   这里再兜一次：拼读站有几处 @media print 会重置定位）。 */
@media print {
  .learn-top { display: none !important; }
  body.has-learn-top { padding-top: 0 !important; }
  body.has-learn-top .header { top: 0; }
}