/* 时态与语态模块专用样式 */

/* .app-container / .category-tabs / .category-tab / .level3-desc / .level3-tabs
   都在 common.css（多个模块共用）。本文件只放本模块特有的部分。

   骨架与词性模块完全一致（侧栏 300px、主内容区 padding 24px 36px、
   侧栏条目 60.72px、容器 min-height 344px、每页 2 条例句）——
   本模块正是从 wordclass.css 派生的。改布局要同步 wordclass.css。 */

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

/* ========== 左侧边栏 ========== */
.sidebar {
    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;
}

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

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

.point-item:last-child {
    margin-bottom: 0;
}

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

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

.point-item.active .point-item-name {
    color: #FFFFFF;
}

.point-item-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1F2421;
    /* 写死 30.72px，把条目高度固定在 60.72px —— 与音标、句子两个模块的
       侧栏格子等高。条目高度 = 行高 + 上下内边距 28 + 边框 2。 */
    line-height: 30.72px;
}

/* ========== 主内容区 ========== */
.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;
}

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

#tenseContainer {
    margin-bottom: auto;
}

/* ========== 知识点信息（二级）==========
   只放二级标题。二级的说明已下移到三级（.level3-desc）——
   学生点进一个二级后，看到的是当前三级的说明，而不是二级的概括。
   这样能腾出约 50px 给内容（一级说明行高 24.3，等于两行）。 */
.tense-info {
    margin-bottom: 14px;
}

.tense-title {
    font-family: 'Georgia', serif;
    font-size: 2rem;
    font-weight: 400;
    color: #1F2421;
}

/* ========== 例句容器 ========== */
.tense-container {
    display: flex;
    flex-direction: column;
    /* 子元素一律禁止收缩：这里每个子元素的高度都是算好的（说明 48.64、
       例句区 161.6、翻页组 34、底部行 48），内容偶尔比 min-height 高一点时
       也不许 flex 把它们按比例压扁 —— 压扁了下面的元素就会往上跑。 */
    /* 顶部对齐：内容紧贴二级标题下方 */
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    /* 预留高度 = 容器内边距 40 + 三级说明(定高 48.64) + 间距 10
       + 例句区 161.6 + 翻页组(16 + --pager-size) + 三级 tab(6 + 30) ≈ 344。
       翻页组那截从 --pager-size 取（见 common.css），不写死。
       内容比这矮时整块垂直居中（#tenseInfo 的 margin-top:auto +
       #tenseContainer 的 margin-bottom:auto），比这高时从顶部排。

       说明固定不随翻页变（翻的只是例句），所以按 3 行算就够；
       说明更长时会整块往下顶，被 overflow: hidden 裁掉的是最底部的 tab
       —— 数据侧要保证每节说明不超过 3 行。

       底部三级 tab 用 margin-top: auto 贴着容器底，所以它的位置只随
       min-height 变，不随内容多少变 —— 切节时下面那排 tab 不会上下跳。 */
    min-height: calc(var(--pager-size) + 310px);   /* 34 时 = 344px */
    overflow: hidden;
}

/* 容器里的每个子块高度都是定死的，禁止 flex 收缩 ——
   否则内容一旦比 min-height 高出一点点，flex 会按比例压扁所有子块，
   下面的翻页组和三级 tab 就会整体上移。 */
.tense-container > * {
    flex-shrink: 0;
}

/* 底部一行：三级 tab 居中。
   不再用 margin-top: auto 贴容器底 —— 那样会把 tab 顶到底部、
   和上面的翻页组拉开一大截（实测 40+px）。现在紧跟翻页组，
   整块内容（说明→例句→翻页组→tab）作为一个整体跟着 min-height 居中，
   切节时位置仍然恒定。 */
.content-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 6px;
}

/* 三级说明（.level3-desc）和三级 tab（.level3-tabs / .level3-tab）
   都在 common.css，三个模块共用。 */

.sentence-examples {
    display: flex;
    flex-direction: column;
    /* 每页 2 条例句（SENTENCES_PER_PAGE），间距 10 ——
       20 会显得散，而且会挤掉底部给提示框留的净空。
       定高 161.6 = 2 条 × 75.8（实测）+ 条间距 10，翻页时高度不变，
       两侧的箭头才不会上下跳。2 条而不是 3 条见 JS 里 SENTENCES_PER_PAGE
       的说明（3 条会把容器顶到 440，矮窗口会切掉底部的三级 tab）。 */
    gap: 10px;
    height: 161.6px;
    width: 100%;
    align-items: center;
}

/* ========== 例句 ========== */
.sentence-words {
    display: flex;
    flex-wrap: nowrap;
    /* 一条例句占满整行、内部居中。JS 里的 WORD_GAP 要和这里的 gap 一致，
       adjustFontSize 按它算总宽度。 */
    gap: 12px;
    justify-content: center;
    /* **每一行单独定高**，不能只靠外面的 .sentence-examples 定高。
       adjustFontSize 会改词块上的 --scale，词块高度跟着变（1.4rem 时 75.8，
       缩到 0.7 时约 40），行高一变，下面的翻页组和三级 tab 就会上下移动。
       （用户 2026-09-16 报的 bug：翻到只有 1 条例句的最后一页时下面会动。
       1440 宽下 scale 恰好是 1 所以测不出来，窄屏或字号缩放时才会暴露。）
       75.8 = 词块高度（文字 35.8 + 间距 4 + 标签 19.9 + 内边距 16），
       和 .sentence-examples 的 161.6（2×75.8 + 间距 10）配套。 */
    height: 75.8px;
    /* flex-start 而不是 center：带标签的词块（高 79）和不带标签的词（高 56）
       顶部对齐，两者的文字基线才对得齐。 */
    align-items: flex-start;
    width: 100%;
}

/* 词块：本词性的词，词与标签上下叠在一起，整块加下划线。
   标签内嵌进词块而不是放在词下方，是为了把一屏 3 条例句压进容器 ——
   标签放外面每条例句要 99px，放里面只要 79px，3 条差 60px，
   正好差出悬停提示框的预留空间。

   --scale 是字号缩放系数，adjustFontSize 按整行宽度算出比例写进来，
   词和标签的字号都跟着它走。内边距和间距不缩放（固定 12px），
   测量时要把它们单独扣掉，见 adjustFontSize 里的注释。 */
.word-block {
    --scale: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 8px;
    position: relative;
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* 本词性的词才有底色和下划线；其余词只是语境。
   两者的上下内边距一致（8px），文字基线才对得齐。 */
.word-block.marked {
    background-color: #FBF9F5;
}

.word-block:not(.marked) {
    padding-left: 0;
    padding-right: 0;
}

/* 下划线贴在词块底边。用绝对定位而不是真实元素：多一个 4px 的元素会
   把词块从 79 撑到 83，3 条就是 12px，要从提示框的余量里抠。 */
.word-block.marked::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    border-radius: 2px;
    background-color: #C4612F;
}

.word-text {
    font-size: calc(1.4rem * var(--scale, 1));
    font-weight: 400;
    color: #1F2421;
    text-align: center;
    white-space: nowrap;
}

/* 词性标签：内嵌在词块里的胶囊，与句子模块的 .word-label 同一套视觉语言 */
.word-label {
    font-size: calc(0.7rem * var(--scale, 1));
    color: #5C635D;
    font-weight: 400;
    padding: 1px 8px;
    background-color: #F2E3D6;
    border-radius: 999px;
    cursor: help;
    position: relative;
    transition: all 0.2s ease;
}

.word-label:hover {
    background-color: #C4612F;
    color: #FFFFFF;
}

/* 悬停提示框：说明该词性在本句中的作用。
   文案要控制在一行（22 个汉字以内）—— 每个知识点 6 条例句、一屏 3 条，
   容器底部只留得下一行提示框的高度，两行会被裁掉。 */
.word-label:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 12px 16px;
    /* 底色统一成页面底色（--bg-secondary #F7F4EF）：纯白浮在白色正文上分不开。
       与 .explain-icon 的说明面板、以及另外两个模块的 .word-label 保持一致。 */
    background-color: #F7F4EF;
    color: #1F2421;
    font-size: 0.85rem;
    line-height: 1.5;
    border-radius: 8px;
    white-space: normal;
    /* 比句子模块的 280 宽：本模块提示框要压在一行内，宽一点才放得下整句 */
    width: 340px;
    box-shadow: 0 4px 12px rgba(31, 36, 33, 0.15);
    border: 1px solid #E7E1D7;
    z-index: 1000;
    pointer-events: none;
}

.word-label:hover::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    /* 箭头必须跟面板同色，否则米色面板下会露一个白尖 */
    border-bottom: 6px solid #F7F4EF;
    z-index: 1000;
}

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

    .sidebar {
        width: 100%;
        max-height: 200px;
    }

    .main-content {
        padding: 20px;
    }

    h1 {
        font-size: 2rem;
    }

    .tense-container {
        padding: 40px 12px;
        gap: 16px;
    }

    .word-text {
        font-size: 1.2rem;
    }

    .word-label:hover::after {
        width: 220px;
        font-size: 0.8rem;
    }

}