/* ==========================================================================
   看拼音写词语 · 页面样式
   --------------------------------------------------------------------------
   一题 = 上排带调拼音 + 下排空田字格（每字一格），3 列排布。
   设计基准为 A4 打印：内容宽 198mm ≈ 748px，3 列 → 每列 ≈ 244px，
   单格 50px（4 字词 200px），每页 10 行 = 30 题。
   ========================================================================== */

@font-face {
    font-family: 'hy-py';
    src: url('../img/py.ttf') format('truetype');
}

:root {
    /* 打印基准尺寸：一页约 30 题（3 列 × 10 行） */
    --quiz-cell: 50px;
    --quiz-py-h: 32px;
    /* 田字格线条与拼音颜色（黑色系，打印清晰） */
    --quiz-line: #262626;
    --quiz-cross: #C6C6C6;
}

body,
div,
p,
ul,
li {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

/* ========== 两栏布局：左预览 / 右控制面板 ========== */
.app-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
    width: auto;
    max-width: var(--site-max-width);
    margin: 0 auto;
    /* 顶部留出固定导航栏空间 */
    padding: 76px var(--site-gutter) 20px;
}

/* 页头卡横跨两栏 */
.app-layout>#sitePageHead {
    grid-column: 1 / -1;
    width: auto;
    margin: 0;
}

/* ========== 左栏：练习纸预览 ========== */
/* 左右 32px ≈ 打印页边距 8mm，并给长音节（如 huāng）向左溢出留出余量 */
.preview-section {
    width: auto;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    padding: 20px 32px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    overflow: auto;
    max-height: calc(100vh - 40px);
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

/* 预览宽度与打印内容区（A4 − 左右各 8mm ≈ 733px）一致，屏显即所得 */
#print-area {
    width: 100%;
    max-width: 734px;
    box-sizing: border-box;
}

.quiz-grid {
    display: grid;
    /* 列宽固定 = 最长题目宽（4 字词 × 46px + 左右外框各 1px = 186px）。
       3 列 + 2 个 6px 间距 = 570px ≈ 151mm，远小于 A4 内容区（8mm 边距时 733px）；
       即便 Edge 的默认打印边距比 Chrome 大，也不至于吃掉 160mm 而溢出。
       用固定 px 而非 auto/fit-content/百分比，是为了回避浏览器间固有尺寸解析差异，
       同时保证格子宽度（固定 px）不会超出列宽。 */
    grid-template-columns: repeat(3, 186px);
    justify-content: space-between;
    gap: 10px 6px;
    /* 4 字词（如 yǔ hòu chūn sǔn）的格子正好铺满整列（186px = 列宽），
       其最右竖线会落在纸张内容区的右边界上，被 Edge 打印当作边界线裁掉半个像素
       （2 字词只占半列，线在列内部，所以看不出问题）。
       左右各留 8px 内边距，把整行线收进纸内，同时保持左右对称。 */
    padding: 0 8px;
}

.quiz-placeholder {
    padding: 40px 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted, #9C948A);
}

/* ---- 单题 ---- */
/* 题目在各列内左对齐：拼音行与田字格都从列左边界起排（与打印练习纸一致）。
   min-width:0 允许题目收缩到固有宽度以下，避免长词把 grid 列撑破。 */
.quiz-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* 拼音行：每格一个音节，与下方田字格一一对齐。
   字号默认 20px，由 JS 对长音节（如 zhuāng）按需等比缩小，避免相邻音节重叠。
   不设 width:100% —— 宽度由各音节格（flex-basis: --quiz-cell）累加得出，
   与下方 .quiz-cells 等宽；否则内容宽度会反过来依赖列宽，形成循环依赖，
   不同浏览器对 grid auto 列宽的解析结果不一致（Chrome 正常、Edge 溢出）。 */
.quiz-pinyin {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: var(--quiz-py-h);
    font-family: 'hy-py', 'Kaiti SC', '楷体', '楷体_gb2312', STKaiti, KaiTi, KaiTi_GB2312, DFKai-SB, sans-serif;
    font-size: 20px;
}

.quiz-pinyin>span {
    flex: 0 0 var(--quiz-cell);
    width: var(--quiz-cell);
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    font-size: inherit;
    line-height: 1;
    color: var(--quiz-line);
}

/* 田字格行：外框的上/左/右由容器画，每格只补右/下边框（内部线）。
   最右竖线若依赖最后一个格子的 border-right，在 Edge 打印渲染中
   会因亚像素舍入被排到列边界之外而丢失。 */
.quiz-cells {
    display: flex;
    border-top: 1px solid var(--quiz-line);
    border-left: 1px solid var(--quiz-line);
    border-right: 1px solid var(--quiz-line);
}

.quiz-cell {
    position: relative;
    flex: 0 0 var(--quiz-cell);
    width: var(--quiz-cell);
    height: var(--quiz-cell);
    border-right: 1px solid var(--quiz-line);
    border-bottom: 1px solid var(--quiz-line);
    box-sizing: border-box;
}

/* 最右竖线由 .quiz-cells 的 border-right 提供，避免双线 */
.quiz-cell:last-child {
    border-right: none;
}

/* 田字格虚线十字 */
.quiz-cell::before,
.quiz-cell::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.quiz-cell::before {
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--quiz-cross);
}

.quiz-cell::after {
    left: 50%;
    top: 0;
    bottom: 0;
    border-left: 1px dashed var(--quiz-cross);
}

/* 答案（默认隐藏，勾选「显示答案」后以浅灰汉字显示，便于对照描摹） */
.quiz-char {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: '楷体', '楷体_gb2312', 'Kaiti SC', STKaiti, KaiTi, KaiTi_GB2312, DFKai-SB, serif;
    font-style: normal;
    font-size: 34px;
    line-height: 1;
    color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.quiz-grid.show-answer .quiz-char {
    visibility: visible;
}

/* ========== 右栏：控制面板 ========== */
.control-panel {
    width: auto;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 76px;
    /* 面板内容较长：限制高度并内部滚动，避免高处控件在滚动时被视口裁掉 */
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.control-panel .form-group {
    width: auto;
    margin-bottom: 18px;
}

.control-panel label {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
}

.control-panel .form-control,
.control-panel .form-select {
    font-size: 14px;
}

.field-hint {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--muted, #9C948A);
}

/* 「显示答案」勾选项（与课本/拼音选项同级，右侧面板选项区最后一项） */
.control-panel .answer-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: 14px;
    cursor: pointer;
}

.control-panel .answer-toggle input {
    margin: 0;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

.field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.field-head label {
    margin-bottom: 0;
}

.field-actions {
    display: flex;
    gap: 8px;
}

.mini-btn {
    padding: 2px 10px;
    font-size: 12px;
    border: 1px solid var(--line, #EFE6D9);
    border-radius: 999px;
    background: var(--chip-bg, #F6EFE3);
    color: var(--ink-2, #4D4A46);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

@media (hover: hover) {
    .mini-btn:hover {
        background: var(--coral-soft, #FFE5E5);
        color: var(--coral-deep, #D93E3E);
    }
}

/* 课本多选列表（前缀 .control-panel 提高优先级，覆盖上面的 label 通用规则） */
.control-panel .book-list {
    height: 110px;
    overflow-y: auto;
    border: 1px solid var(--line, #EFE6D9);
    border-radius: 8px;
    padding: 6px 10px;
    background: #fff;
}

.control-panel .book-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    margin: 0;
    font-size: 13px;
    cursor: pointer;
}

.control-panel .book-item input {
    margin: 0;
    flex: 0 0 auto;
}

.control-panel .book-item .book-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted, #9C948A);
}

/* 拼音选项：分「复韵母 / 前后鼻韵母」两组展示 */
.control-panel .final-group+.final-group {
    margin-top: 12px;
}

.control-panel .final-group-title {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3, #6E6A64);
}

.control-panel .final-grid {
    display: grid;
    gap: 8px 6px;
}

/* 复韵母 4 列；前后鼻韵母 3 列 —— an-ang / en-eng / in-ing / un-ong 相邻，便于对照 */
.control-panel .final-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.control-panel .final-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.control-panel .final-item {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.control-panel .final-item input {
    margin: 0;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
}

/* 操作按钮 */
.control-panel .button-group {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.control-panel .button-group:last-child {
    margin-bottom: 0;
}

.control-panel .button-group .btn {
    flex: 1;
    padding: 8px 6px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    transition: all 0.2s;
}

/* ========== 轻提示 ========== */
.quiz-tip {
    position: fixed;
    right: 24px;
    bottom: 24px;
    max-width: 320px;
    padding: 12px 18px;
    border-radius: 10px;
    background: var(--ink, #262626);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.5;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 1080;
}

.quiz-tip.show {
    opacity: 1;
    transform: translateY(0);
}

/* ========== 响应式（断点见 design.md（项目根目录）：768 / 1024） ==========
   限定 screen：打印时浏览器按 A4 内容宽（198mm ≈ 748px）评估媒体查询，
   若不限定会让平板/手机规则命中打印，导致练习纸被降成 2 列、多印一页。 */
@media screen and (max-width: 1023.98px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    /* 小屏：设置在上、练习纸在下（仅改视觉顺序，不动 DOM） */
    .app-layout>.control-panel {
        order: 1;
        position: static;
        top: auto;
        /* 单栏时整页自然滚动，取消内部滚动 */
        max-height: none;
        overflow-y: visible;
    }

    .app-layout>.preview-section {
        order: 2;
        max-height: none;
        overflow-x: auto;
        width: 100%;
    }
}

@media screen and (max-width: 767.98px) {
    .quiz-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #print-area {
        max-width: none;
    }

    .quiz-tip {
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

/* ========== 打印 ========== */
@media print {
    /* 只保留练习纸：导航栏、页脚、控制面板、提示一律隐藏 */
    body>*:not(.app-layout) {
        display: none !important;
    }

    .app-layout {
        display: block !important;
        padding: 0 !important;
        max-width: none;
        margin: 0;
    }

    .app-layout>#sitePageHead,
    .app-layout>.control-panel {
        display: none !important;
    }

    .app-layout>.preview-section {
        display: block !important;
        order: 0;
        padding: 0;
        margin: 0;
        width: auto;
        background: #fff;
        border-radius: 0;
        box-shadow: none;
        max-height: none;
        overflow: visible;
    }

    #print-area {
        width: auto;
        max-width: none !important;
        margin: 0;
    }

    /* 列宽不在此处覆盖：屏显小屏规则带 screen 限定不影响打印，
       而渲染时 JS 写入的行内 grid-template-columns 需保持生效
       （!important 会压过行内样式，故不能在此重复声明）。 */

    .quiz-placeholder {
        display: none;
    }

    /* 提示条不参与打印 */
    .quiz-tip {
        display: none !important;
    }

    /* 题目整块显示，避免田字格被分页切断 */
    .quiz-item {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* 保留田字格与答案颜色 */
    .quiz-cell,
    .quiz-pinyin>span,
    .quiz-char {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* @page 必须位于样式表顶层：嵌套在 @media 内会被浏览器忽略，
   导致纸张边距回落到浏览器/打印机默认值，内容区变窄后 3 列溢出。
   左右 8mm：3 列每列 ≈239px，放得下最长的 5 字词（220px），
   并给最左侧长音节（如 huāng）的向左溢出留出余量。 */
@page {
    size: A4;
    margin: 14mm 8mm 6mm 8mm;
}