/* 语文教科书·三年级上册字词表 —— 参考单词本（/english/words）分块卡片式排版 */
body {
    background-color: #FFF9F0;
}

.textbook-container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 80px var(--site-gutter) 40px;
}

/* ===== 单元卡片 ===== */
.unit-block {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(96, 64, 24, 0.06);
    margin-bottom: 1.5rem;
    overflow: hidden;
    /* 目录页深链跳转时避开顶部固定导航栏 */
    scroll-margin-top: 76px;
}

/* 跳转到具体课文时同样留出导航栏高度 */
.lesson-block {
    scroll-margin-top: 76px;
}

/* ===== 课/园地卡片（标题栏已由页头展示，只含三个字词表） ===== */
.lesson-block {
    margin: 0;
}

/* 一个单元含多课时，课与课之间用分隔线区分 */
.lesson-block + .lesson-block {
    border-top: 1px solid #EFE6D9;
    margin-top: 1rem;
    padding-top: 1rem;
}

/* ===== 三个字词表容器 ===== */
.table-card {
    border-top: 1px solid #f1f3f5;
}

.table-card:first-of-type {
    border-top: none;
}

.table-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem 0.3rem;
    font-size: 0.95rem;
    font-weight: bold;
    color: #374151;
}

.table-title::before {
    content: '';
    width: 4px;
    height: 1.1em;
    border-radius: 2px;
}

.table-title.t-zi::before { background: #f59e0b; }
.table-title.t-xie::before { background: #f59e0b; }
.table-title.t-ci::before { background: #f59e0b; }

.table-title .tb-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: #9C948A;
    background: #F7F0E5;
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

/* 标题栏右侧提示：汉字可点击查看笔顺与更多组词（写字表 / 识字表） */
.table-title .tb-hit {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 400;
    color: #9C948A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 行（桌面端网格） ===== */
.tb-row {
    display: grid;
    align-items: baseline;
    padding: 0.55rem 1.1rem;
    border-top: 1px solid #F7F0E5;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .tb-row:hover {
        background-color: #f7fafd;
    }
}

/* 识字表：字 | 拼音 | 组词 */
.tb-row.tb-zi {
    grid-template-columns: 110px 150px minmax(0, 1fr);
    column-gap: 0.5rem;
}

/* 写字表：字 | 拼音+属性 | 组词 */
.tb-row.tb-xie {
    grid-template-columns: 110px minmax(180px, 1.3fr) minmax(0, 2fr);
    column-gap: 0.5rem;
}

.tb-char {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--coral-deep);
    line-height: 1.3;
}

.tb-xie .tb-char {
    color: var(--coral-deep);
}

.tb-py {
    font-size: 1.28rem;
    color: #262626;
    line-height: 1.4;
}

/* 写字表：拼音与「音序/部首/结构/笔画数」同一行，字号与词语表一致 */
.tb-xie-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
    row-gap: 0.1rem;
}

.tb-xie-info .tb-py {
    font-size: 1.28rem;
}

.tb-attr {
    font-size: 1.08rem;
    color: #262626;
    line-height: 1.5;
}

.tb-zcs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    align-items: baseline;
}

.tb-zc {
    white-space: nowrap;
    font-size: 0.95rem;
}

/* 写字表组词 */
.tb-zc .tb-word {
    font-size: 1.08rem;
    font-weight: 500;
    color: #4D4A46;
}

/* 写字表拼音 */
.tb-zc .tb-zp {
    font-size: 1.08rem;
    color: #717983;
    margin-left: 0.25rem;
}

/* ===== 词语表行（词语 + 拼音） ===== */
.tb-row.tb-ci {
    grid-template-columns: minmax(130px, 1fr) minmax(0, 2.4fr);
    column-gap: 1.25rem;
}

.tb-row.tb-ci .tb-cword {
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--coral-deep);
}

.tb-row.tb-ci .tb-cpy {
    font-size: 1.18rem;
    color: #6E6A64;
}

/* 空数据占位 */
.empty-cell {
    color: #E0D2BC;
    font-size: 0.85rem;
}

/* ===== 字 / 词 / 字词表卡片（任何宽度都生效；超窄屏单列） =====
   注意：每个 .table-card 内的 .tb-row 都是独立卡片，
   - 识字表 / 写字表：上排「字 + 拼音 / 属性」，下排「组词」；
   - 词语表：「词 + 拼音」竖排小卡。
   此前的 @media (min-width: 900px) 包裹已移除，使手机横屏等 480–900 CSS px 之间
   也能保持「字 / 词 + 拼音 / 属性」竖排卡片样式，避免「拼音 + 音序/部首/结构/笔画」
   在窄列被挤换行。 */

/* 识字表：每行 2 字，每卡片内 上排「字+拼音」、下排组词 */
.table-card.tc-zi .tb-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.7rem;
    padding: 0.6rem 1.1rem 0.9rem;
}

.table-card.tc-zi .tb-rows .tb-row {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "char py"
        "zcs zcs";
    align-items: center;
    row-gap: 0.3rem;
    column-gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid #EFE6D9;
    border-radius: 10px;
    background: #fbfcfe;
}

.table-card.tc-zi .tb-rows .tb-row .tb-char { grid-area: char; }
.table-card.tc-zi .tb-rows .tb-row .tb-py { grid-area: py; }
.table-card.tc-zi .tb-rows .tb-row .tb-zcs { grid-area: zcs; }

/* 写字表：每行 2 字，每卡片内 上排「字+拼音/属性」、下排组词（与识字表同款） */
.table-card.tc-xie .tb-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.7rem;
    padding: 0.6rem 1.1rem 0.9rem;
}

.table-card.tc-xie .tb-rows .tb-row {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "char info"
        "zcs zcs";
    align-items: center;
    row-gap: 0.3rem;
    column-gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    /* 卡片配色与词语表一致（浅黄底 + 米黄描边） */
    border: 1px solid #f2ead8;
    border-radius: 10px;
    background: #fffdf6;
}

.table-card.tc-xie .tb-rows .tb-row .tb-char { grid-area: char; }
.table-card.tc-xie .tb-rows .tb-row .tb-xie-info { grid-area: info; }
.table-card.tc-xie .tb-rows .tb-row .tb-zcs { grid-area: zcs; }

/* 词语表：宽屏每行 6 词（≥900px 生效，非宽屏见下方 3 词规则），每卡片内 词 + 拼音 竖排 */
.table-card.tc-ci .tb-rows {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0.6rem;
    row-gap: 0.6rem;
    padding: 0.6rem 1.1rem 0.9rem;
}

.table-card.tc-ci .tb-rows .tb-row {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid #f2ead8;
    border-radius: 10px;
    background: #fffdf6;
}

.table-card.tc-ci .tb-rows .tb-row .tb-cword {
    font-size: 1.18rem;
    line-height: 1.4;
}

.table-card.tc-ci .tb-rows .tb-row .tb-cpy {
    font-size: 1.18rem;
    line-height: 1.4;
    word-break: break-word;
}

/* 词语表：非宽屏（<900px，含手机 / 平板竖屏）每行 3 词 */
@media (max-width: 899px) {
    .table-card.tc-ci .tb-rows {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 0.5rem;
        row-gap: 0.5rem;
    }
}

/* 极窄屏（≤480 CSS px，手机竖屏）：识字表 / 写字表单列；
   每行改为整行式：加深分隔线 + 隔行不同底色，行与行更易区分 */
@media (max-width: 480px) {
    .table-card.tc-zi .tb-rows,
    .table-card.tc-xie .tb-rows {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        row-gap: 0;
    }

    .table-card.tc-zi .tb-rows .tb-row,
    .table-card.tc-xie .tb-rows .tb-row {
        border: none;
        border-radius: 0;
        padding: 0.55rem 0.6rem;
    }

    .table-card.tc-zi .tb-rows .tb-row + .tb-row,
    .table-card.tc-xie .tb-rows .tb-row + .tb-row {
        border-top: 1px solid #d8cbb6;
    }

    .table-card.tc-zi .tb-rows .tb-row:nth-child(odd),
    .table-card.tc-xie .tb-rows .tb-row:nth-child(odd) {
        background: #ffffff;
    }

    .table-card.tc-zi .tb-rows .tb-row:nth-child(even),
    .table-card.tc-xie .tb-rows .tb-row:nth-child(even) {
        background: #fffdf6;
    }
}

/* ===== 响应式 ===== */
@media (max-width: 760px) {
    .textbook-container {
        padding: 72px var(--site-gutter) 30px;
    }

    .table-title {
        padding: 0.5rem 0.85rem 0.25rem;
        flex-wrap: wrap;
    }

    /* 提示文字：窄屏允许折行/压缩，仍保持右侧对齐 */
    .table-title .tb-hit {
        font-size: 0.72rem;
    }

    /* 卡片内的 .tb-row 走的是上面抽出的卡片网格（char/info/zcs 上下排），
       这里只调整卡片内部字号 / 内边距，以适配手机横屏等窄屏 */
    .table-card.tc-zi .tb-rows,
    .table-card.tc-xie .tb-rows,
    .table-card.tc-ci .tb-rows {
        padding: 0.5rem 0.85rem 0.7rem;
    }

    .table-card.tc-zi .tb-rows .tb-row,
    .table-card.tc-xie .tb-rows .tb-row,
    .table-card.tc-ci .tb-rows .tb-row {
        padding: 0.5rem 0.6rem;
        font-size: 0.95rem;
    }

    .table-card .tb-row .tb-char {
        font-size: 1.3rem;
    }

    .table-card .tb-row .tb-py {
        font-size: 1.08rem;
    }

    .table-card .tb-row .tb-attr {
        font-size: 1.02rem;
        line-height: 1.45;
        word-break: keep-all;
    }

    .table-card.tc-ci .tb-rows .tb-row .tb-cword {
        font-size: 1.18rem;
        line-height: 1.35;
    }

    .table-card.tc-ci .tb-rows .tb-row .tb-cpy {
        font-size: 1.18rem;
        line-height: 1.3;
    }
}

/* 详情页顶部的"返回目录 / 上一篇 / 下一篇"按钮已挪进页头卡
   第二行右侧的 #sitePageHeadActions 槽；这里只剩通用 .btn-tool 样式。*/

/* 胶囊按钮（页头按钮 / 空态引导共用） */
.btn-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #4D4A46;
    background: #F6EFE3;
    border: 1px solid #F6EFE3;
    border-radius: 999px;
    padding: 0.22rem 0.8rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-tool i {
    font-size: 0.78rem;
}

@media (hover: hover) {
    .btn-tool:hover {
        background: #FF6B6B;
        border-color: #D93E3E;
        color: #ffffff;
        text-decoration: none;
    }
}

.btn-tool-main {
    color: #ffffff;
    background: #FF6B6B;
    border-color: #D93E3E;
}

@media (hover: hover) {
    .btn-tool-main:hover {
        background: #C23434;
        border-color: #C23434;
    }
}

/* 页头信息胶囊（页码 / 单元·课次）用共享的 .page-head-chip，见 /css/style.css */

/* 详情页加载占位 */
.textbook-loading {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(96, 64, 24, 0.06);
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.95rem;
    color: #9C948A;
}

/* 无参数 / 参数无效时的引导空态 */
.textbook-empty {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(96, 64, 24, 0.06);
    padding: 2.5rem 1.2rem;
    text-align: center;
    color: #6E6A64;
}

.textbook-empty .empty-icon {
    font-size: 2.4rem;
    color: var(--line);
    margin-bottom: 0.5rem;
}

.textbook-empty .empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.4rem;
}

.textbook-empty p {
    margin: 0 auto 1.1rem;
    max-width: 30em;
    font-size: 0.9rem;
    color: #9C948A;
}

/* ===== 汉字可点击：跳转独立查询页 /chinese/hanzi/index.html ===== */
.tb-row.tb-zi .tb-char,
.tb-row.tb-xie .tb-char {
    cursor: pointer;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .tb-row.tb-zi .tb-char:hover,
    .tb-row.tb-xie .tb-char:hover {
        color: #D93E3E;
    }
}