/**
 * H5 顶栏 + 进度条（与 App ThougthPicture 看图识词 一致）
 * 750 设计稿：进度条宽 630rpx(84%)、高 22rpx(11px)、圆角 20rpx(10px)
 */
@import "./safe-area.css";

:root {
  --sat-min: 24px;
  --h5-progress-h: 11px;
  --h5-progress-radius: 10px;
  --h5-progress-max-w: 630px;
  --h5-progress-fill: rgba(250, 218, 64, 1);
  --h5-progress-bg: #f0f0f0;
  --h5-nav-title-size: 16px;
  --h5-nav-icon: 16px;
  --h5-nav-touch: 44px;
  --h5-nav-row-h: 44px;
  --h5-nav-inner-pad: 6px;
  /* 返回行与进度条之间的间距 */
  --h5-nav-row-gap: 24px;
  --h5-home-nav-h: 28px;
  --h5-home-nav-inner-pad: 2px;
  --h5-home-nav-total: calc(
    var(--h5-header-pad-top) + var(--h5-home-nav-h) + var(--h5-home-nav-inner-pad)
  );
  --h5-detail-nav-total: calc(
    var(--h5-header-pad-top) + var(--h5-nav-row-h) + var(--h5-nav-inner-pad) +
      var(--h5-nav-row-gap) + var(--h5-progress-h) + var(--h5-nav-inner-pad)
  );
  --h5-word-nav-total: calc(
    var(--h5-header-pad-top) + var(--h5-nav-row-h) + var(--h5-nav-row-gap) +
      var(--h5-progress-h) + var(--h5-nav-inner-pad)
  );
}

/* ========== 通用固定顶栏 ========== */
.h5-nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--h5-header-pad-top) !important;
  padding-left: var(--h5-page-pad-x) !important;
  padding-right: var(--h5-page-pad-x) !important;
  padding-bottom: var(--h5-nav-inner-pad) !important;
  min-height: auto !important;
  box-sizing: border-box;
}

/* ========== 绘本 Home 顶栏（与 App Books.vue 一致：88rpx 内容区 + 20rpx 底边距） ========== */
.page-container > .header.h5-home-nav {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 10;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: rgba(250, 218, 64, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--h5-header-pad-top) 10px 0 !important;
  min-height: calc(var(--h5-header-pad-top) + var(--h5-nav-touch));
}

.page-container > .header.h5-home-nav .header-back {
  width: var(--h5-nav-touch);
  height: var(--h5-nav-touch);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.page-container > .header.h5-home-nav .header-back img {
  width: var(--h5-nav-icon);
  height: var(--h5-nav-icon);
  object-fit: contain;
  display: block;
}

.page-container > .header.h5-home-nav .header-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: var(--h5-nav-touch);
  min-height: var(--h5-nav-touch);
}

.page-container > .header.h5-home-nav .header-right {
  width: var(--h5-nav-touch);
  flex-shrink: 0;
}

.page-container > .container {
  /* 与 App Books.vue body padding 20rpx 一致，黄条与封面留空 */
  padding-top: 10px !important;
  box-sizing: border-box;
}

/* 旧 fixed 黄条（若仍有页面引用 h5-nav-fixed） */
.page-container > .header.h5-nav-fixed {
  background-color: #ffd333;
  padding-bottom: var(--h5-home-nav-inner-pad) !important;
}

.page-container > .header.h5-nav-fixed .header-title {
  flex: 1;
  text-align: center;
  font-size: var(--h5-nav-title-size);
  font-weight: 600;
  line-height: var(--h5-home-nav-h);
  min-height: 0;
}

.page-container > .header.h5-nav-fixed ~ .container {
  padding-top: calc(var(--h5-home-nav-total) + 4px);
  box-sizing: border-box;
}

/* ========== 详情页顶栏（返回 + 进度） ========== */
.listen .back_top.h5-nav-fixed,
.page .header.h5-nav-fixed,
.word-nav.h5-nav-fixed {
  padding-left: max(20px, var(--h5-page-pad-x)) !important;
  padding-right: max(20px, var(--h5-page-pad-x)) !important;
}

.listen .back_top.h5-nav-fixed,
.word-nav.h5-nav-fixed {
  background: #fff;
}

.page .header.h5-nav-fixed {
  background: inherit;
}

/* 详情页：仅顶层 .listen / .page 需要为 fixed 顶栏留白（word 页 .listen 在容器内，避免双重 padding） */
body > .listen,
body > .page {
  padding-top: var(--h5-detail-nav-total) !important;
  box-sizing: border-box;
}

.page-container.word-study {
  padding-top: var(--h5-word-nav-total) !important;
  box-sizing: border-box;
}

.page-container.word-study > .listen {
  padding-top: 0 !important;
  flex: 1;
  min-height: 0;
}

.progress-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 0 4px;
  box-sizing: border-box;
}

.back_top .p1,
.page .bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--h5-nav-row-h);
}

.back_top .text_back,
.page .back,
.word-nav .back-btn,
.h5-nav-fixed .text_back,
.listen .back_top.h5-nav-fixed .text_back,
.page .header.h5-nav-fixed .back {
  width: var(--h5-nav-touch) !important;
  height: var(--h5-nav-touch) !important;
  min-width: var(--h5-nav-touch) !important;
  min-height: var(--h5-nav-touch) !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.back_top .text_back img,
.page .back img,
.word-nav .back-btn img,
.h5-nav-fixed .text_back img,
.listen .back_top.h5-nav-fixed .text_back img,
.page .header.h5-nav-fixed .back img {
  width: var(--h5-nav-icon) !important;
  height: var(--h5-nav-icon) !important;
  object-fit: contain;
  display: block;
}

/* 覆盖各详情页内联的小 gap，保证返回与进度条有足够间距 */
.listen .back_top.h5-nav-fixed,
.word-nav.h5-nav-fixed {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--h5-nav-row-gap) !important;
}

.page .header.h5-nav-fixed {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.listen .back_top.h5-nav-fixed .proess,
.listen .back_top.h5-nav-fixed .progress-row,
.page .header.h5-nav-fixed .progress-row,
.word-nav.h5-nav-fixed .progress-section {
  margin-top: 0;
}

/* ========== 进度条（与看图识词一致） ========== */
.proess,
.progress-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.h5-progress-track,
.progress-container,
.progress-wrap {
  flex: 1 1 auto;
  width: 0;
  max-width: var(--h5-progress-max-w);
  height: var(--h5-progress-h);
  background: var(--h5-progress-bg);
  border-radius: var(--h5-progress-radius);
  overflow: hidden;
}

.h5-progress-fill,
.progress-fill,
.progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--h5-progress-fill);
  border-radius: var(--h5-progress-radius);
  transition: width 0.3s ease;
}

.proess progress,
.progress-row progress,
progress.h5-progress-native {
  flex: 1 1 auto;
  width: 0;
  max-width: var(--h5-progress-max-w);
  height: var(--h5-progress-h);
  border: none;
  border-radius: var(--h5-progress-radius);
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  background: var(--h5-progress-bg);
}

.proess progress::-webkit-progress-bar,
.progress-row progress::-webkit-progress-bar {
  background: var(--h5-progress-bg);
  border-radius: var(--h5-progress-radius);
}

.proess progress::-webkit-progress-value,
.progress-row progress::-webkit-progress-value {
  background: var(--h5-progress-fill);
  border-radius: var(--h5-progress-radius);
}

.progress-section > text,
.progress-section #progressText,
.proess > text,
.proess > span,
.proess #progressText,
.progress-row > span,
.progress-row #pageText,
.progress-row #progressText {
  flex-shrink: 0;
  font-size: 14px;
  line-height: var(--h5-progress-h);
  color: #000;
  min-width: 40px;
  text-align: right;
}

/* 无数据空状态：须覆盖 .listen .back_top.h5-nav-fixed { display:flex !important } */
body.h5-body-empty > .listen,
body.h5-body-empty > .page {
  padding-top: 0 !important;
}

body.h5-body-empty .page-container.word-study {
  padding-top: 0 !important;
}

.listen.is-h5-empty > .back_top.h5-nav-fixed,
.page.is-h5-empty > .header.h5-nav-fixed,
.page-container.is-h5-empty > .word-nav.h5-nav-fixed {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.h5-empty-state {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2001;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background: #fff;
}

.h5-empty-state.is-show {
  display: flex !important;
}

.h5-empty-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #999;
  text-align: center;
}

.h5-empty-back {
  padding: 10px 28px;
  border: none;
  border-radius: 24px;
  background: #fada40;
  color: #000;
  font-size: 15px;
  cursor: pointer;
}