/* 顶部改动（只作用于首页）：
   - 首页：藏掉原站导航条，换成一整行「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;
}