/* 顶部改动（只作用于首页）：
   - 首页：藏掉原站导航条，换成一整行「Pola’s English Learning Journey」，
     尺寸/位置/底色/描边/字体都照原站 header 那一套（左对齐，起点和原站 logo 一致）。
   - 其它页面：原站 header 原样保留（含面包屑「首页 > 高频词 > -ap」，能点回去）。 */

body header.header-bg { display: none !important; }

/* 标题条：默认不显示，只有首页（body.ours-home）才出来 */
#ours-top { display: none; }

body.ours-home #ours-top {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 60;
  height: 57px;
  align-items: center;
  background: rgba(253, 253, 252, 0.95);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* 内层容器与原站 header 一致：max-w-5xl + px-4；标题在这条里水平居中（用户 14:08 要求），
   竖直方向也居中（条高 57px，标题高 25px → y≈15） */
#ours-top .ours-inner {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ours-top .ours-title {
  /* 2026-10-13 19:1x 用户要求：撇号后面的空隙去掉 + 字体修正。
     原因：原来 Noto Sans SC 排第一，它是中文字体，把英文撇号 ’ 当成全角符号画 → 后面留一大块空白。
     改成英文字体优先（Quicksand 是本站自己的显示字体），撇号按英文宽度排，同时西文观感更正。
     Noto Sans SC 仍留在后面兜底（万一有其它字符）。 */
  font-family: "Quicksand", "Lato", "Noto Sans SC", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: oklch(0.269 0 0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  body.ours-home #ours-top { height: 48px; }
  #ours-top .ours-title { font-size: 16px; }
}

/* 批次卡上的名字胶囊（ap / an）：用户 2026-10-13 要求①字号再大一点②文字在边框里居中③位置微调。
   这颗胶囊的样式是原站用行内 style 写死的（top:30px; font-size:11px），行内优先级最高 → 必须 !important。
   只挑这颗胶囊自己的类组合（border-gray-400 + tracking-wide），不动别的东西。
   字号 11→17px；用 inline-flex + 居中，文字落在边框正中；
   top 由 30 收到 29，让它视觉中心跟原来一样。 */
#app [class*="border-gray-400"][class*="tracking-wide"] {
  font-size: 17px !important;
  line-height: 1.1 !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 28px !important;
}

/* 词卡里的中文意思：把原来的位置（可解码那颗胶囊的位置）接过来，居中显示 */
.ours-mean {
  display: block;
  font-family: "Noto Sans SC", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.08em;
  color: oklch(0.44 0 0);
  white-space: nowrap;
  max-width: 100%;
}

/* 展开多义项时：允许换行 + 左对齐 + 浅底块。
   2026-10-13 22:23 业主报「有的显示很长、有遮盖」：原来 nowrap，长义项直接冲出卡片被裁掉。 */
.ours-mean-open {
  white-space: normal;
  text-align: left;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 10px;
  padding: 5px 10px 6px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.ours-mean-open .ours-mean-line { font-size: 12.5px; }
.ours-mean-open .ours-mean-line + .ours-mean-line { margin-top: 2px; }

/* 卡片上的插画统一放大一点点：原站给这些图挂了 scale-125（1.25）→ 放到 1.4（+12%）。
   只作用于我们自己的图（/img/ours/），不碰原站素材。 */
#app img[class*="scale-125"][src*="/img/ours/"] {
  transform: scale(1.4) !important;
}

/* ─────────────────────────────────────────────────────────────
   学校教材里的单层 a（用户 2026-10-13 16:21 要求：所有字体的 a 要用学校教的那种写法，
   不是现在这种「双层 a」）。
   办法：换字体 —— Andika（SIL 专门给识字启蒙/低龄阅读设计的字体，a 和 g 都是单层写法）。
   字体文件已随镜像一起放在 /fonts/（本地自托管，平板断网也能用）。
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Andika";
  src: url("/fonts/andika-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("/fonts/andika-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("/fonts/andika-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("/fonts/andika-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* 中文继续用原站的中文字体（Andika 没有汉字），英文/字母默认走 Andika。
   Android/Windows/iPad 都装了 CJK 兜底字体，不会出现方块。

   2026-10-13 20:3x 业主指出：面板里「正式 / 圆润」点了没反应（设置写了但画面不变）。
   原因：下面这条 !important 把原站自己的字体开关盖死了。
   原站机制：<html data-phonics-display-font="charis|quicksand">（localStorage: phonics-display-font）
   这里按原站开关分两支放行：
     · 正式(charis)    → Andika（学校教法的单层 a）
     · 圆润(quicksand) → 原站自己的圆润字体 Quicksand（本地已缓存 ext/fonts.gstatic.com/s/quicksand）
   两支的字形 a 都是单层写法，符合「a 要用学校教的那一种」的要求。 */
#app,
#app * {
  font-family: "Andika", "Charis SIL", "Source Han Sans SC", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", system-ui, sans-serif !important;
}

html[data-phonics-display-font="quicksand"] #app,
html[data-phonics-display-font="quicksand"] #app * {
  font-family: "Quicksand", "Andika", "Source Han Sans SC", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", system-ui, sans-serif !important;
}

/* ─────────────────────────────────────────────────────────────
   多条例句：句子区域保持原版样式，句子**上方**放一排小圆点
   （用户 2026-10-13 17:05 定案：点圆点就地换句子；圆点**不许压住朗读进度条**
    —— 压在进度条上他点进度条就没反应了）。所以走正常文档流，不用绝对定位。
   ───────────────────────────────────────────────────────────── */
.ours-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0; /* 按钮 22px、视觉圆点 11px：空隙由按钮内部留出来 */
  margin: 4px 0 12px; /* 圆点现在在进度条正上方：上留一点、下不挤进度条 */
  padding: 0;
  min-height: 22px;
}

/* 看着是 11px 的小圆，实际可点范围 22px —— 孩子手指点得中（视觉圆点画在 ::before 上）。 */
.ours-dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ours-dot::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: oklch(0.87 0 0);
  box-shadow: inset 0 0 0 1px oklch(0.8 0 0);
  transition: background 0.15s ease, transform 0.15s ease;
}

.ours-dot:hover::before {
  background: oklch(0.72 0 0);
}

.ours-dot.ours-dot-on::before {
  background: oklch(0.45 0 0);
  box-shadow: none;
  transform: scale(1.25);
}

/* ─────────────────────────────────────────────────────────────
   做法 A：首页那 4 本书点开时「当页浮层」（2026-10-13 用户拍板）
   —— 浮层＝整块原站页面本身、铺满全屏；**不加任何自带的按钮/工具栏**（2026-10-13 20:17
   用户要求去掉「返回书架」：它与页面里的「首页」面包屑重复）。退出就用页面自带的
   「首页」/ Esc / 浏览器后退键。
   ───────────────────────────────────────────────────────────── */
#ours-ov[hidden] { display: none !important; }

#ours-ov {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: #fff;
  height: 100vh;
  height: 100dvh;
  animation: ours-ov-in 0.18s ease-out;
}

@keyframes ours-ov-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.ours-ov-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

body.ours-ov-lock,
html.ours-ov-lock {
  overflow: hidden !important;
}

/* ─────────────────────────────────────────────────────────────
   面板设置里我们自己加的一节：界面语言（2026-10-13 20:4x 业主新增）
   四个按钮：中文 / English / Русский / ไทย
   样式不在这里写 —— 直接套用原站「整句朗读默认倍速」那排按钮自己的 class
   （border-input / bg-accent / rounded-md / min-h-9 / text-xs / font-semibold…），
   由 ours.js 里的 CTRL_CLS / BTN_ON / BTN_OFF 带上，所以跟上面几节完全一致，
   不会出现「风格割裂」。
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   2026-10-14 业主报：刷新时会闪过一屏灰方块（3 条短条 + 8 张大灰卡）。
   真相：那不是残留页面，是「高频词等级页」自带的数据加载占位
   —— 原站代码里写死：加载中先画 3 条 h-6 w-24 标签条 + 8 个 h-52 w-40 灰卡，
   数据到齐后立刻被真实内容替换。孩子看到一屏灰方块会以为页面坏了，
   所以这里在「加载中」这一态（main[aria-busy="true"]）把它们藏掉，
   只留标题白底；数据到位后真实内容照常出现。
   只改我们自己的 ours.css，不动原站任何代码，功能零影响。
   ───────────────────────────────────────────────────────────── */
main[aria-busy="true"] .h-6.w-24.shrink-0.rounded-md,
main[aria-busy="true"] .h-52.w-40.rounded-lg {
  display: none !important;
}

/* ══ 2026-10-14 深夜：卡片上「可解码」槽位里的原站胶囊一律不显示（那个位置显示中文）——
   纯 CSS 兜底，无论 JS 何时跑完都不可能「闪一下」；JS 里另有一层同效果的隐藏。 ══ */
div.relative.mx-auto.w-fit.max-w-full.text-\[10px\] > div.inline-flex,
div.relative.mx-auto.w-fit.max-w-full.text-\[10px\] > div > button { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   手机 / 平板 画面适配（2026-10-14）
   实测到的三个硬伤：
   ① 我们加的顶部标题条把每一页顶出屏幕 57px（原站用 100vh 撑满，加上我们这层就溢出了）
   ② 学习卡尺寸是原站**写死在行内样式**的 440×587：手机(390)右边被切掉，iPad 上又只占中间一小块
   ③ 封面卡/词族卡尺寸同样写死（180×204 / 320×240），而栅格在手机上只有一列 → 页面高到 1552px
   下面用 !important 压掉行内尺寸（CSS 的 !important 优先级高于行内样式），尺寸按「两轴都算」给，
   避免宽屏矮窗口下卡片高度溢出。
   ═══════════════════════════════════════════════════════════════ */
:root {
  --ours-head-h: 58px;
  --ours-card-w: min(94vw, 58vh, 440px);          /* 两轴取小：手机按宽度、iPad 横屏按高度 */
  --ours-card-h: calc(var(--ours-card-w) * 587 / 440);
}

/* ① 顶部标题条不再把页面顶出屏幕 */
.ours-home .min-h-screen { min-height: calc(100vh - var(--ours-head-h)) !important; }

/* ② 学习卡：小屏缩放、大屏放大，比例不变 */
.sight-gal-stack,
.sight-gal-l1,
.sight-gal-l2,
.sight-gal-l3,
.sight-gal-l1-card-wrap > div.group {
  width: var(--ours-card-w) !important;
  height: var(--ours-card-h) !important;
}
.sight-gal-stack { min-height: var(--ours-card-h) !important; }

/* ③（已撤除）曾经把词族卡 width:100% + aspect-ratio 强改，导致卡片内部（白卡/彩色底板/句子）
   与外壳脱节、5 张卡大小不一 —— 2026-10-14 业主截图报障后删除。卡片一律不改内部尺寸。 */

/* ④ 手机竖屏：封面/词族卡排两列（原站 640px 以下只有一列） */
@media (max-width: 640px) {
  /* ④（已撤除）手机两列强改：卡片尺寸写死，列宽一半会导致横向溢出，改用整页等比缩放 */
  main.px-10 { padding-left: 0.6rem !important; padding-right: 0.6rem !important; }
}

/* ⑤ 触屏细节：去掉双击缩放/点按灰块，留出刘海与圆角安全区 */
@media (hover: none), (pointer: coarse) {
  html, body { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
  button, a, [role="button"], .cursor-pointer { touch-action: manipulation; }
  .ours-home > div:first-child { padding-top: max(0.5rem, env(safe-area-inset-top)) !important; }
  .ours-home { padding-bottom: env(safe-area-inset-bottom); }
}

/* ⑥ 顶栏省出的空间要还回去：原站给「它自己的顶栏」留了 pt-20(80px)，我们换成自己的 48px 顶栏后这 80px 就是纯浪费 */
main.px-10 { padding-top: 0.75rem !important; }

/* ⑦ 手机竖屏：词卡页本来是「卡片列(auto 458px) + 说明列」两栏并排 —— 390 宽放不下，说明列被挤成 0。
      改成单列：卡片在上、说明在下，能看到的卡片最大。 */
@media (max-width: 640px) {
  div.grid[class*="grid-cols-[auto_minmax(0,1fr)]"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.75rem !important;
  }
  div.relative.shrink-0.overflow-visible { width: 100% !important; }
  main.px-10 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; padding-bottom: 4rem !important; }
}

/* ⑧ 触屏上「Space 播放 / ← → 切换」这种键盘提示是噪音，收起来 */
@media (hover: none), (pointer: coarse) {
  div.pointer-events-none.fixed.bottom-4 { display: none !important; }
}

/* ⑨ 原站把卡片三层用 left:50% + margin-left:-220px（写死的半个 440px）居中。我们把卡片改窄后，
      这个 -220 没跟着变 → 整张卡左移 36.7px、左边被切掉（截图可见）。把居中项一起跟着卡片宽度走。 */
.sight-gal-l1, .sight-gal-l2, .sight-gal-l3 { margin-left: calc(var(--ours-card-w) / -2) !important; }

/* ⑩ 竖屏平板：原站卡片与右侧说明区之间留了 120px 空隙，820 宽时说明区只剩 162px、句子被挤成 4 行。
      竖屏平板把空隙收到 24px，说明区宽一倍。 */
@media (min-width: 641px) and (max-width: 900px) {
  div.grid[class*="grid-cols-[auto_minmax(0,1fr)]"] { column-gap: 1.5rem !important; }
}

/* ⑪ 手机竖屏：卡片再收一点（宽 ≤88vw、高 ≤46vh），让「卡片 + 下面的句子」一屏都能看到，不用滚 */
@media (max-width: 640px) {
  :root { --ours-card-w: min(88vw, 46vh); }
}

/* ⑫ 手机：词集页卡片之间 40px 的空档收到 10px（只改间距、不碰卡片内部）——
   省下的高度让整页缩放比更大，字更清楚 */
@media (max-width: 640px) {
  div.grid.grid-cols-1.justify-items-center.gap-10 { gap: 0.6rem !important; }
}

/* ⑬ 手机端：把「切换句子的小圆点 / 播放 / 调速 / 朗读进度条 / 切换单词的小图」做成
      手指点得中的大小（2026-10-14 业主：手机端这些控件要优化，好操作些，
      且不影响其他设备的布局观感）。

      要点：整页有等比缩放时，控件会被二次缩小；所以尺寸一律写
      calc(目标视觉尺寸 / var(--ours-fit-k))，缩多少就补回多少，视觉大小恒定达标。
      --ours-fit-k 由 ours.js 每次算完缩放比后写到 :root；JS 没跑时回退为 1（此时页面没缩放，尺寸即目标值）。
      仅作用于 ≤640px 宽的手机；平板/桌面一个像素都不动。

      目标（视觉尺寸）：小圆点可点 44px（视觉圆点 14px）、播放/调速 48px、
      进度条可拖区域 26px 高（可见轨道 10px）、切换单词小图 44px。 */
@media (max-width: 640px) {
  :root { --ours-k: var(--ours-fit-k, 1); }

  /* ── 句子小圆点 ── */
  .ours-dots {
    gap: calc(6px / var(--ours-k)) !important;
    min-height: calc(44px / var(--ours-k));
    margin: calc(6px / var(--ours-k)) 0 calc(2px / var(--ours-k)) !important;
  }
  .ours-dot {
    width: calc(44px / var(--ours-k)) !important;
    height: calc(44px / var(--ours-k)) !important;
  }
  .ours-dot::before {
    width: calc(14px / var(--ours-k));
    height: calc(14px / var(--ours-k));
  }

  /* ── 底栏：播放 / 调速 ── */
  .sentence-audio-bar { gap: calc(10px / var(--ours-k)) !important;
    padding-left: calc(5px / var(--ours-k)) !important; padding-right: calc(5px / var(--ours-k)) !important; }
  .sentence-audio-bar > button {
    width: calc(48px / var(--ours-k)) !important;
    height: calc(48px / var(--ours-k)) !important;
  }
  .sentence-audio-bar > button { margin-left: 0 !important; margin-right: 0 !important; }   /* 原来第一个按钮被切出屏幕 2px */
  .sentence-audio-bar > button svg {
    width: calc(24px / var(--ours-k)) !important;
    height: calc(24px / var(--ours-k)) !important;
  }
  .sentence-audio-bar > button[aria-label*="速度"] {
    font-size: calc(15px / var(--ours-k)) !important;
    font-weight: 700 !important;
  }

  /* ── 朗读进度条：可拖区域加高到 26px，可见轨道 10px ── */
  .sentence-audio-bar div.relative[class*="h-2"] {
    height: calc(26px / var(--ours-k)) !important;
    background: transparent !important;
  }
  .sentence-audio-bar div.relative[class*="h-2"]::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: calc(10px / var(--ours-k));
    margin-top: calc(-5px / var(--ours-k));
    border-radius: 999px; background: oklch(0.92 0 0 / 0.9); pointer-events: none;
  }
  .sentence-audio-bar div.relative[class*="h-2"] > div {
    height: calc(10px / var(--ours-k)) !important;
    top: 50% !important; bottom: auto !important;
    margin-top: calc(-5px / var(--ours-k));
    border-radius: 999px !important;
  }

  /* ── 卡片顶部 5 个「切换到 xxx」小图：24px → 44px ── */
  [aria-label^="切换到"] {
    width: calc(44px / var(--ours-k)) !important;
    height: calc(44px / var(--ours-k)) !important;
    border-radius: calc(10px / var(--ours-k)) !important;
  }
  [aria-label^="切换到"] img { width: 100% !important; height: 100% !important; border-radius: inherit !important; }
}