/* 音标模块专用样式 */

/* .app-container 和 .category-tabs / .category-tab 已上移到 common.css ——
   这两个模块各有一份，内容还不一样（见 common.css 里的说明）。 */

/* ========== 主布局 ========== */
.app-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    gap: 20px;
    padding: 20px;
    background-color: #F7F4EF;
}

/* ========== 左侧边栏（音标网格） ========== */
.sidebar {
    /* 300px。句子模块原本是 280，2026-09-16 对齐到这里，两个模块的
       侧栏 / 主内容区边界现在落在同一像素上。改这个值要同步 sentence.css。 */
    width: 300px;
    flex-shrink: 0;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(31, 36, 33, 0.05);
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-content: start;
}

.empty-message {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: #5C635D;
    font-size: 0.9rem;
    font-weight: 300;
}

.phoneme-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #E7E1D7;
    border-radius: 8px;
    background-color: #FFFFFF;
}

.phoneme-item:hover {
    background-color: #FBF9F5;
    border-color: #C4612F;
}

.phoneme-item.active {
    background-color: #C4612F;
    border-color: #C4612F;
}

.phoneme-item.active .phoneme-symbol {
    color: #FFFFFF;
}

.phoneme-symbol {
    font-size: 1.2rem;
    font-weight: 500;
    color: #1F2421;
}

/* ===== 发音规则：左侧规则名列表 =====
   列表较长（8 条），单列排布避免换行；条目改为左对齐，
   长标题才有足够宽度。

   条目度量（内边距 + 内层字号）刻意与音标项一致：
   切换 tab 时左侧格子高度不变（60.7px），否则两页来回切
   会有明显的跳动。字号沿用 .phoneme-symbol 的 1.2rem ——
   规则名比「/iː/」长得多，同字号下靠单列宽度容纳即可。

   矮视口（<750px）下 8 条超出侧栏高度时交给滚动条。 */
.sidebar.rules-nav {
    grid-template-columns: 1fr;
    /* 间距比音标网格的 10px 紧 2px。规则页是单列 8 条、条目又和音标页等高
       （60.72），10px 间距下总高 587.75px，超出侧栏可用高度 581px 会出滚动条；
       8px 时是 573.76px，留 7px 余量。条目本身高度不受影响 —— 缩放的是间距
       而不是条目，两个 tab 的格子仍然等高，见 .rule-nav-title 的说明。 */
    gap: 8px;
}

.sidebar.rules-nav .phoneme-item {
    justify-content: flex-start;
}

.sidebar.rules-nav .phoneme-item.active .rule-nav-title {
    color: #FFFFFF;
}

.rule-nav-title {
    /* 中文（PingFang SC）字形占满整个 em 方框、笔画密度也高，同样字号下
       比 /iː/ 这类 IPA 看着大得多、也粗得多（w500 还会映射到 PingFang SC
       Medium，再重一档）。用户从前 4 个 tab 切过来会觉得「又大又粗、有视觉
       冲击」，所以这块单独降一档：1rem / w400。

       line-height 写死 30.72px 而非相对值：侧栏条目的高度是「内容行高 +
       内边距」撑出来的，靠它把格子维持在 60.7px。若跟着字号一起缩小
       （1.6em），格子会掉到 55.6px，又会和音标页对不齐、切 tab 跳动。
       这个 30.72px 现在是两个模块侧栏条目的共同基准 —— 句子模块的
       .pattern-item-name 写的是同一个值，改这里要同步那边。 */
    font-size: 1rem;
    font-weight: 400;
    line-height: 30.72px;
    color: #1F2421;
}

/* ========== 发音规则：右侧内容 ========== */
.rule-title {
    /* 同 .phoneme-title：不用衬线字体，Inter 才有完整 IPA 字形。
       字号比 .phoneme-title（2.4rem）小一档：规则名是整串中文，同样字号下
       视觉体量比「/iː/」大得多，等大会有视觉冲击。字重同为 400。
       .phoneme-info 固定 102px，标题缩小后余量更足，不会顶破。 */
    font-family: inherit;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
    color: #1F2421;
    margin-bottom: 8px;
}

.rule-desc {
    /* 与 .spellings-label 完全一致（0.8rem / w400 / #8A8F89）——这两块地位相同：
       都在大标题下方、分隔线上方，是一行说明性文字。用户要求五个 tab 的字体统一。
       注意 #8A8F89 在白底上对比度约 3:1，长句读起来偏浅，是统一换来的代价。 */
    font-size: 0.8rem;
    font-weight: 400;
    color: #8A8F89;
}


/* ========== 主内容区 ========== */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 24px 36px;
    overflow: hidden;
    background-color: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(31, 36, 33, 0.05);
    display: flex;
    flex-direction: column;
}

/* 内容放得下时垂直居中；放不下时从顶部排列，避免上下同时被裁切 */
#phonemeInfo {
    margin-top: auto;
}

#examplesContainer {
    margin-bottom: auto;
}

/* ========== 音标信息 ========== */
.phoneme-info {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F0EBE4;
    /* 固定 102px = 音标页「标题 + 常见拼写 chips」的高度。
       发音规则页没有 chips 行，只有「标题」一行，自然高度约 61px；
       而 #phonemeInfo 是 margin-top:auto 的垂直居中元素，矮 41px 会让
       整块内容下移约 20px —— 切 tab 时右侧例词和中间那条分隔线都会跳一下。
       撑到同一高度后，五个 tab 的卡片顶部和分隔线都对齐。
       音标页本身就是 102px，加 min-height 对它没有任何影响。

       注意：规则页的三级说明**不在这里** —— 它 2026-09-18 起移进了
       #examplesContainer（跟着翻页区一起居中），高度算在那边的预留里。 */
    min-height: 102px;
}

/* 规则页的三级说明就放在这个盒子里。它的字号/字色与词性模块一致（用户要求拉齐），
   但要**去掉 .level3-desc 自带的 min-height: 48.64** —— 那是词性模块用来
   「跨节定高」的，这里 22 节的说明本来就都只有一行，用不上；
   留着会把盒子从 102px 撑到 121.22px，比音标页高 19px，
   切 tab 时中间那条分隔线和卡片顶部都会跳（实测 403.1 → 414.9）。
   去掉后内容 96.91 < 102，min-height 重新接管，两页等高。
   注意：说明一旦长到两行，这里就会重新撑破 —— 数据侧要保证每节说明只有一行。 */
/* 规则页的三级 tab 渲染在 .examples-container 末尾。
   与上方例词的间距 = 翻页组那截总高 − tab 自身高度
   （翻页组 = .pager-size 34 + .pager-row 的上间距 0.47×size 16 = 50；
   50 − 42 = 8）。
   这样**两个页面的容器内容总高都是 257.4，由内容自己撑出来**，
   不靠 min-height 去凑 —— 用 margin-top: auto 贴底也行，但那样规则页内容只有
   249.4，得把 min-height 从 253 抬到 269 才对齐，白吃 11.6px 高度，
   在 1280×720 这种矮窗口上直接把 tab 挤出可视区（实测裁切 12.6 → 28.6）。 */
.examples-container > .level3-tabs {
    margin-top: calc(var(--pager-size) * 1.47 - 42px);   /* 34 时 = 7.98px */
}

/* ========== 发音规则：三级 tab ==========
   2026-09-17 曾把三级 tab 放在 .main-content 下单独一行、用一个常驻占位的
   #ruleTabs 容器（配 .rule-tabs 尺寸）。2026-09-18 改成渲染进
   .examples-container 内部，那套东西已删除。 */
.phoneme-info .level3-desc {
    /* 说明在标题块里的尺寸：见 .phoneme-info 上方注释 */
    min-height: 0;
}

.phoneme-title {
    /* 刻意不用 Georgia：衬线字体没有完整的 IPA 字形，靠回退拼凑，
       /ɪ/ 会渲染成一个几乎看不见的小衬线 I，/ɡ/ 也会变成单层的 g。
       用页面的无衬线字体（Inter）才能拿到正确的 IPA 字形。 */
    font-family: inherit;
    /* 无衬线比 Georgia 窄约 23%，放大一点补回体量 */
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.3;
    color: #1F2421;
    margin-bottom: 8px;
}

.phoneme-spellings {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.spellings-label {
    font-size: 0.8rem;
    color: #8A8F89;
    font-weight: 400;
    margin-right: 2px;
}

.spelling-chip {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    /* button 不继承 body 的 line-height，不写这句会比原来的 span 矮 3px */
    line-height: 1.6;
    color: #C4612F;
    background-color: #FBF9F5;
    border: 1px solid #E7E1D7;
    padding: 3px 12px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.spelling-chip:hover {
    border-color: #C4612F;
    transform: translateY(-1px);
}

/* 选中的拼写：橙色填充，与其他模块的选中态一致 */
.spelling-chip.active {
    background-color: #C4612F;
    border-color: #C4612F;
    color: #FFFFFF;
}

/* 重置按钮：做成小圆形，与翻页按钮的圆形语言一致，
   但不填充橙色——橙色留给「当前选中的拼写」，避免抢视觉。 */
.reset-chip {
    font-size: 1.15rem;
    line-height: 1;
    /* 高度对齐旁边的拼写 chip（31px），否则会显得小一圈 */
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    margin-left: 4px;
    border-radius: 50%;
    border-width: 2px;
    background-color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 先清掉 .spelling-chip 的 padding，再按 ⟲ 的字形度量补偿。
       注意这些值绑定字体：按钮继承 Inter（.spelling-chip 里有 font-family: inherit），
       用 Arial 时的偏移方向和幅度都不同，改字体要重新校准。 */
    padding: 0;
    padding-bottom: 0.225em;
    padding-right: 0.06em;
}

/* ========== 示例单词容器 ========== */
.examples-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 顶部对齐 + 够高的预留区，保证切到任何拼写/页时例词区顶部都不动 */
    justify-content: flex-start;
    align-items: center;
    /* 预留高度 = 两行例词 207.4 + 翻页组那截（--pager-size 34 × 1.47 = 50，
       含 .pager-row 的上间距，见 common.css）≈ 257.4。
       但这里写 253（= 34 + 219），**比内容矮 4.4px 是有意的**：
       #examplesContainer 是 flex item，窗口够高时它按内容撑到 257.4，
       窗口不够高时会被压缩，而**压缩下限就是这个 min-height**。
       写成 257.4 的话它少收缩 4.4px，矮窗口下多裁 4.4px（实测 1152×700：
       裁切从 8.6px 变成 13px）。所以保持基线值，别「修正」成内容高度。

       两个页面的内容总高本来就相等（音标 = 例词 207.4 + 翻页组 50，
       规则 = 例词 207.4 + 三级 tab 50，见下面 .level3-tabs 那条），
       对齐靠的是内容，不是这个 min-height。

       例词那部分随 .example-card 的尺寸变化，改那个要同步这里。 */
    min-height: calc(var(--pager-size) + 219px);   /* 34 时 = 253px */
}

.examples-footer {
    /* 推到预留区最底部：翻页时位置恒定，不会变成移动靶。
   翻页组本身的样式在 common.css，三个模块共用。 */
    margin-top: auto;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 发音规则的三级 tab 已经渲染进 .examples-container 内部（见上面那条），
   这里不再需要独立的容器和尺寸。tab 本身的样式（.level3-tabs / .level3-tab）
   在 common.css，词性、音标两个模块共用。 */

.examples-display {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: stretch;
}

.example-card {
    background-color: #FBF9F5;
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    border: 2px solid #E7E1D7;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
}

.example-card:hover {
    border-color: #C4612F;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(31, 36, 33, 0.1);
}


.example-word {
    font-size: 1.45rem;
    font-weight: 500;
    color: #1F2421;
    margin-bottom: 7px;
    white-space: nowrap;
}

.example-phonetic {
    font-size: 1rem;
    color: #C4612F;
    font-weight: 400;
    white-space: nowrap;
}

/* 对应字母的下划线（格式同句子模块的句子成分划线） */
.marked {
    position: relative;
    padding-bottom: 3px;
}

.marked::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background-color: #C4612F;
    border-radius: 2px;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .app-layout {
        flex-direction: column;
        padding: 12px;
        gap: 12px;
    }

    .sidebar {
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
        max-height: 200px;
    }

    .main-content {
        padding: 20px;
        justify-content: flex-start;
    }

    h1 {
        font-size: 2rem;
    }

    .examples-display {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .example-word {
        font-size: 1.3rem;
    }

    .example-phonetic {
        font-size: 0.95rem;
    }
}