/* ========== 全局重置 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========== 全局样式 ========== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #F7F4EF;
    color: #1F2421;
    line-height: 1.6;
    overflow: hidden;
}

/* ========== 颜色变量 ========== */
:root {
    --bg-primary: #FFFFFF;
    --bg-secondary: #F7F4EF;
    --bg-accent: #FBF9F5;
    --border-color: #E7E1D7;
    --text-primary: #1F2421;
    --text-secondary: #5C635D;
    --accent-color: #C4612F;
    --accent-light: #F2E3D6;
    /* 翻页组的整体尺寸。放在 :root 而不是 .pager-row 上：
       各模块容器要用它算 min-height（预留翻页组的高度），
       而自定义属性只向下继承，写在 .pager-row 上父级读不到。 */
    --pager-size: 34px;
}

/* ========== 容器 ========== */
.app-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
}

/* ========== 通用标题样式 ========== */
header {
    text-align: center;
    padding: 14px 20px 12px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

h1 {
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0;
}

h1 em {
    color: var(--accent-color);
    font-style: italic;
}

.subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 300;
}
/* ========== 悬停说明按钮（?） ==========
   一个圆形 ? 图标：讲解类内容（成因、背景、为什么）不占正文，藏在它后面、悬停展开。
   两个使用方，样式完全相同：
     · 词性模块的二级标题右边（数据里给 point.explain 才有）
     · 首页与词性模块的副标题末尾（内容为 English.md 留下的「总述」）
   原先只在 wordclass.css 里定义，首页也要挂同一个按钮后上移到此处。 */
/* 讲解类内容（成因、背景、为什么）不占正文，藏在这个图标后面，悬停展开。
   放在二级标题右边：位置固定，切三级 tab 时不动。
   数据里给 point.explain 才有这个图标，没有就不渲染。 */
.explain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    border-radius: 50%;
    border: 1px solid #E7E1D7;
    background-color: #FFFFFF;
    color: #8A8F89;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    cursor: help;
    position: relative;
    vertical-align: 0.45em;
    transition: all 0.2s ease;
}

.explain-icon:hover {
    background-color: #C4612F;
    border-color: #C4612F;
    color: #FFFFFF;
}

/* 展开的讲解框。左对齐（left: 0）而不是居中：讲解通常较长，
   从图标左侧往右展开不会溢出内容区右边。 */
.explain-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    padding: 14px 18px;
    width: 460px;
    /* 用页面底色（--bg-secondary #F7F4EF）而不是纯白：这个面板宽 460、又是一整段
       说明，原来的白色浮在白色正文上只靠 1px 浅边区分，几乎糊在一起；
       米色是本项目「下沉面板」的既有用法（body 底色、首页卡片区的底色）。
       .word-label 的单行小提示框同日改成同一底色（三个模块同步），
       免得同一页上两套浮窗一个白一个米。 */
    background-color: #F7F4EF;
    color: #1F2421;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.65;
    text-align: left;
    /* pre-line：说明里可以用真实换行排版（一条一条列），空格仍按 normal 折半。
       现有文案没有换行，行为不变。 */
    white-space: pre-line;
    border-radius: 8px;
    border: 1px solid #E7E1D7;
    box-shadow: 0 6px 16px rgba(31, 36, 33, 0.15);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.explain-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

/* 页面副标题右边的「总述」按钮（modules/wordclass/index.html）。
   副标题是全页居中的，浮窗若沿用上面的 left: 0，会从页面中心往右铺 460px ——
   1024 宽的窗口就顶出右边界，而 body 是 overflow: hidden，超出即被裁掉。
   这里改成以图标为中心展开，宽度再夹一层视口上限；总述是三个自然段，
   用 pre-line 保住属性值里的换行，段落感不丢。 */
.subtitle .explain-icon {
    /* 模块里的 ? 图标跟在标题后，10px 的间距合适；副标题这行是纯中文小字，
       10px 加上汉字右侧的字距，视觉上像空了一格（实测 10px 渲染出约 14px），
       收到 4px 才读作「贴着但留一口气」。 */
    margin-left: 4px;
    /* vertical-align 的 0.45em 是给标题那个图标定的「上标」位置，在 1rem 的副标题里
       会把圆圈顶到文字上方：实测图标中线比汉字中线高 3.4px。inline-flex 的基线取的是
       内部「?」那一行的基线，跟 font-size 不成正比，所以这里按实测值对齐 ——
       2px 时两者中线正好重合（逐档实测 0→+2.0、1px→+1.0、2px→0.0、3px→-1.0）。 */
    vertical-align: 2px;
}

.subtitle .explain-icon::after {
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 48px));
    white-space: pre-line;
}

/* ========== 顶部分类标签 ==========
   音标、句子两个模块共用。原先两个模块的 CSS 里各抄了一份，且内容不完全相同：
   音标用 createElement('button') 生成标签，句子用模板字符串生成 <div>。
   button 不继承 font-family / line-height（走 UA 默认 Arial + normal），
   div 继承 body（1.6），于是同样的 CSS 渲染出 47px vs 50.31px 两条顶栏，
   下面的所有内容整体错开 3.3px。

   统一在这里定义，并把 font-family / line-height 都写死 —— 这样不管调用方
   生成的是 button 还是 div，度量都一致（与 .spelling-chip 里写死 line-height
   是同一个道理）。line-height 用 normal：中文单行标签不需要 1.6 的行距，
   取 normal 高度 47px（内边距 12 × 2 + 行盒 17.4 + 边框 2），比继承 body 的
   1.6 矮 3.3px，正好给下面本就吃紧的侧栏留出余量。 */
.category-tabs {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E7E1D7;
    overflow-x: auto;
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.category-tab {
    /* 内边距与字号：一级分类最多 11 个（词性模块加「构词法」后），
       12px 24px / 0.95rem 时在 1024px 宽会折行、把下面的主内容区挤矮。
       收到 10px 16px / 0.88rem，1024px 也能单行放下，不需要横向滚动条。 */
    padding: 10px 16px;
    border: 1px solid #E7E1D7;
    background-color: #FFFFFF;
    color: #5C635D;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: normal;
    transition: all 0.2s ease;
}

.category-tab:hover:not(.active) {
    background-color: #FBF9F5;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(31, 36, 33, 0.1);
}

.category-tab.active {
    background-color: #C4612F;
    color: #FFFFFF;
    border-color: #C4612F;
}

/* ========== 三级标签（节） ==========
   词性、音标两个模块共用。原先定义在 wordclass.css 里，音标模块要用
   就得上移 —— 和 .category-tabs / .pager-row 是同一个理由。
   句子模块没有这一级。 */
.level3-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.level3-tab {
    padding: 5px 14px;
    border: 1px solid #E7E1D7;
    background-color: #FFFFFF;
    color: #5C635D;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    /* 写死 30px，不能用 normal —— 和 .category-tab 踩过的是同一个坑：
       normal 的高度取决于文字本身，纯英文的节名（at / on / in）只有 27px，
       中文节名是 30px。差这 3px 会让整排 tab 换节时上下跳
       （实测：英文节名的 6 个节比其他 114 个高 3px）。 */
    line-height: 30px;
    transition: all 0.2s ease;
}

.level3-tab:hover:not(.active) {
    background-color: #FBF9F5;
    border-color: #C4612F;
}

.level3-tab.active {
    background-color: #C4612F;
    color: #FFFFFF;
    border-color: #C4612F;
}

/* 三级的说明文字。词性、音标两个模块共用（用户 2026-09-18 要求拉齐）。
   min-height 按「2 行」写死（2 × 24.32）—— 定高之后每一节的内容总高完全一样，
   底部那排三级 tab 和翻页组切节时纹丝不动（不定高的话说明从 1 行变 2 行
   会把 tab 推下去 24px）。代价：只有 1 行说明的节，下方多约 24px 空白。 */
.level3-desc {
    width: 100%;
    min-height: 48.64px;
    color: #5C635D;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ========== 通用按钮样式 ========== */
.btn {
    padding: 12px 24px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.btn:hover {
    background-color: var(--bg-accent);
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(31, 36, 33, 0.1);
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--bg-primary);
    border-color: var(--accent-color);
}

.btn-primary:hover {
    background-color: #B05527;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(196, 97, 47, 0.2);
}

/* ========== 返回按钮 ========== */
.back-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1000;
    text-decoration: none;
}

.back-btn:hover {
    background-color: var(--bg-accent);
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(31, 36, 33, 0.1);
}

/* ========== 翻页组 ==========
   词性、音标、句子三个模块共用。尺寸由 --pager-size 一处决定，
   间距、字号、计数器宽度都从它算出来，改一个值整组跟着变 ——
   原先词性模块里这几个值是分开写死的。
   窄屏的覆盖也放在这里，三个模块共用同一个断点。 */

.pager-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--pager-size) * 0.29);   /* 34 时 ≈ 10px */
    /* 定高 = 箭头高度。整组宽度固定（箭头 34 × 2 + 计数 34 + 间距），
       不随句子长短变化 —— 否则句子一长一短，箭头会左右移动。 */
    height: var(--pager-size);
    /* 与上方例句的间距 = 0.47 × 尺寸（34 时是 16px）。16px 是给最后一行
       例句的悬停提示框让位的：提示框从标签往下伸 54px，而这一行到下面的
       三级 tab 之间只有 40px。把让位空间放在**例句和翻页组之间**，
       浮层就正好盖在翻页组上，既够不到下面的三级 tab（那是导航，
       不该被挡），翻页组和 tab 之间也仍然只隔 6px。 */
    margin-top: calc(var(--pager-size) * 0.47);
}

/* 只有 1 页时：词性模块用内联 visibility:hidden 保留占位
   （否则切节时下面的三级 tab 会上下跳）；音标、句子没有三级 tab，
   由 JS 直接不渲染整组。 */

.pager-btn {
    flex: 0 0 auto;
    width: var(--pager-size);
    height: var(--pager-size);
    border-radius: 50%;
    border: 1px solid #E7E1D7;
    background-color: #FFFFFF;
    color: #C4612F;
    font-family: inherit;
    font-size: calc(var(--pager-size) * 0.53);   /* 34 时 ≈ 18px */
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* ← → 的字形在行盒里天然偏低，用等比内边距抬回中心。 */
    padding: 0;
    padding-bottom: 0.06em;
    transition: all 0.2s ease;
}

.pager-btn:hover:not(:disabled) {
    background-color: #C4612F;
    color: #FFFFFF;
    border-color: #C4612F;
}

.pager-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pager-count {
    color: #8A8F89;
    font-size: calc(var(--pager-size) * 0.35);   /* 34 时 ≈ 12px */
    line-height: calc(var(--pager-size) * 0.47);
    white-space: nowrap;
    /* 定宽，让「1 / 9」和「1 / 12」不会把两侧箭头推来推去 */
    min-width: var(--pager-size);
    text-align: center;
}

/* 窄屏：整组缩小。放在这里而不是各模块的 @media 里 ——
   三个模块的断点相同，覆盖的是同一条共享规则，
   写在各自文件里等于把「改一处」又拆成三处。 */
@media (max-width: 768px) {
    :root {
        --pager-size: 30px;
    }

    .level3-tab {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}