/* ========== 句子结构模块专用样式 ========== */

/* .category-tabs / .category-tab 已上移到 common.css（原先本文件和
   phonics.css 各有一份，且内容不完全相同，导致两条顶栏高度差 3.3px）。 */

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

/* ========== 左侧边栏 ========== */
.sidebar {
    /* 与音标模块一致（原本 280）。加宽 20px 后主内容区相应从 1100 收窄到 1080，
       两个模块的侧栏 / 主内容区边界落在同一像素上。 */
    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;
}

.pattern-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;
}

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

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

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

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

.pattern-item-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1F2421;
    /* 写死 30.72px（= 音标模块 .phoneme-symbol 的 1.2rem × 1.6），把条目高度
       从 54.3 拉到 60.7，与音标模块的侧栏格子对齐 —— 两个模块切来切去时
       侧栏节奏一致。行高明显大于这里的字号，条目会松一些，是刻意换来的：
       条目高度 = 行高 + 上下内边距 28 + 边框 2，本文件里 .pattern-item 的
       内边距与音标模块一致，所以只差在行高上。 */
    line-height: 30.72px;
}

/* ========== 主内容区 ========== */
.main-content {
    flex: 1;
    min-width: 0;
    /* 与音标模块的 .main-content 保持一致（原本是 32px 40px）。
       内容整体垂直居中，所以这个值在 900px 下对观感没有任何影响，
       但在矮视口下能少占 16px —— 实测 1440×800 时正好消除溢出。 */
    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;
}

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

#sentenceContainer {
    margin-bottom: auto;
}

/* ========== 句型信息 ========== */
.pattern-info {
    /* 与音标模块的 .phoneme-info 对齐到 14px；min-height 从 130 压到 110，
       让下面的例句能往上提。110 是按实测取的：描述占 1 行时自然高 83、
       占 2 行时 108，取 110 既覆盖两种情况，又保证切换句型时高度恒定不抖。 */
    margin-bottom: 14px;
    min-height: 110px;
}

.pattern-title {
    font-family: 'Georgia', serif;
    font-size: 2rem;
    font-weight: 400;
    color: #1F2421;
    margin-bottom: 8px;
}

.pattern-description {
    color: #5C635D;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
}

/* ========== 句子容器 ========== */
.sentence-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 顶部对齐：例句紧贴句型信息下方，按钮固定在底部的预留区，
       翻页时例句位置恒定。注意这里是页面内的 flex，和 #patternInfo /
       #sentenceContainer 那两个 auto 外边距（内容整体居中）是两回事。 */
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    /* 预留高度 = 例句(99) + 间隙 + 底部翻页组 + 底部余量。
       底部余量是给「主语/谓语」标签悬停弹出的提示框留的（实测最高 85px，
       加 8px 间距 = 93px），容器是 overflow: hidden，留不够会被裁掉 ——
       改前就已被裁 2px。翻页组高度从 --pager-size 取（见 common.css）。
       这个值取的是「提示框放得下 + 例句到按钮的间隙与音标模块接近」：
       音标模块卡片到按钮是 122px，这里是 127px。 */
    min-height: calc(var(--pager-size) + 263px);   /* 34 时 = 297px */
    overflow: hidden;
}

/* 例句区。当前一次一条（JS 里 SENTENCES_PER_PAGE = 1），用 flex 列是为了
   兼容一次多条的情况 —— 改那个常量即可，这里不用动。 */
.sentence-examples {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    align-items: center;
}

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

/* 三级 tab（只有「句子成分」的句型有，多节时才渲染）。
   放在 .examples-footer 之后、容器末尾。

   **不要给它 margin-top: auto** —— 贴底由上面的 .examples-footer 独占，
   tab 紧跟其后。两个元素都写 auto 的话 flex 会把剩余空间平分，
   翻页组和 tab 之间裂开 41px（实测）。翻页组现在始终渲染
   （只有 1 页时 visibility: hidden 占位），单句节也照样贴底。

   tab 本身的样式（.level3-tabs / .level3-tab）在 common.css，三个模块共用。 */

/* ========== 例句 ========== */
.sentence-words {
    display: flex;
    flex-wrap: nowrap;
    /* 一条例句占满整行、内部居中。注意 JS 里的 WORD_GAP 常量要和这里的
       gap 一致，adjustFontSize 按它算总宽度。 */
    gap: 12px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.word-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.word-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.word-text {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F2421;
    padding: 8px 16px;
    background-color: #FBF9F5;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    min-width: 90px;
    text-align: center;
    white-space: nowrap;
}

.word-underline {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.word-underline.subject { background-color: #C4612F; }
.word-underline.predicate { background-color: #6B8E7F; }
.word-underline.object { background-color: #D4A574; }
.word-underline.attributive { background-color: #8B5A3C; }
.word-underline.adverbial { background-color: #7D9CAD; }
.word-underline.complement { background-color: #A67C9B; }
/* 并列连词：并列句专用，用金色与其余六种区分（连词是并列句的识别标志） */
.word-underline.conjunction { background-color: #C9A227; }
/* 感叹词：What / How 是感叹句的标志，但它本身不是句子成分，
   所以单独给一色，跟被感叹部分本来的成分色（表语/宾语/状语）区分开。 */
.word-underline.exclamative { background-color: #B5651D; }

.word-label {
    font-size: 0.75rem;
    color: #5C635D;
    font-weight: 400;
    padding: 3px 10px;
    background-color: #F2E3D6;
    border-radius: 999px;
    cursor: help;
    position: relative;
    transition: all 0.2s ease;
}

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

.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;
    width: 280px;
    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;
}

/* ========== 导航按钮 ========== */
.navigation-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.nav-btn {
    padding: 12px 24px;
    background-color: #FFFFFF;
    color: #5C635D;
    border: 1px solid #E7E1D7;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background-color: #C4612F;
    color: #FFFFFF;
    border-color: #C4612F;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(196, 97, 47, 0.2);
}

.nav-btn:active {
    transform: translateY(0);
}

/* ========== 响应式 ========== */
@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;
    }

    .category-tabs {
        justify-content: flex-start;
    }

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

    .word-text {
        font-size: 1.2rem;
        min-width: 80px;
    }

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