/* ============================================================
 * [AI-CONTEXT] css/layout.css —— 布局与组件样式
 * 职责：A4 sheet 预览分页（方案：A4分页与PDF导出方案.md）、
 *       双栏、句子三层结构、生词卡片、配置面板、打印
 * 依赖：tokens.css（全部视觉参数取自 CSS 变量，禁止硬编码颜色字号）
 * 被依赖：index.html
 * 修改约束：
 *  - 「拼音-汉字-英文」三层顺序为甲方红线，不得改动
 *  - .sheet 尺寸必须 mm 单位（@page 只认物理尺寸）；分页由 render/pager.js
 *    试放完成，本文件只管样式不管分页逻辑
 *  - 渲染器（js/render/*.js）输出的 class 名与本文件一一对应，改名需同步
 * ============================================================ */

/* ---- 基础重置 ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--c-bg);
    font-family: var(--font-base);
    color: var(--c-hanzi);
    -webkit-font-smoothing: antialiased;
}

/* ---- A4 预览区：sheet 逐张竖排居中 ---- */
.preview-area {
    min-height: 100vh;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    transition: margin-right 0.28s ease;   /* 面板推开/放回动画 */
}

/* 面板打开时预览区左移让位（面板宽 330 + 空隙 28）；视口不足时不推开，面板浮于上方 */
@media (min-width: 1150px) {
    body.panel-open .preview-area { margin-right: 358px; }
}

/* ---- 单张 A4 纸：尺寸/padding 与 @media print 必须一致，否则预览与 PDF 错位 ---- */
.sheet {
    position: relative;      /* pager 用块 offsetTop 定位，必须建立定位上下文 */
    width: 210mm;
    height: 297mm;
    padding: var(--sp-page-pady) var(--sp-page-padx);
    background: var(--c-paper);
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
    overflow: hidden;          /* 屏幕预览裁切防破图（pager 已保证内容不溢出） */
    flex-shrink: 0;            /* 防 flex 容器压扁 */
}

/* ---- 顶部标题区（字体/颜色/字号/间距全部走配置变量） ----
   背景图（core/bgimage.js）：默认无背景零占位；has-bg 时 cover 铺满 + 内边距防文字贴边 */
#lesson-header {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#lesson-header.has-bg {
    padding: 26px 28px;
    border-radius: 10px;
    margin-bottom: 18px;
}

.lesson-title {
    font-family: var(--f-title);
    font-size: var(--s-title);
    color: var(--c-title);
    font-weight: 700;
    letter-spacing: var(--ls-title);
    line-height: 1.3;
}

.title-pinyin {
    font-family: var(--f-title-pinyin);
    color: var(--c-title-pinyin);
    font-size: var(--s-title-pinyin);
    margin-top: var(--sp-title-gap);
}

.title-en {
    font-family: var(--f-title-en);
    color: var(--c-title-en);
    font-size: var(--s-title-en);
    margin-top: var(--sp-title-gap);
}

.title-en:empty,
.title-pinyin:empty {
    display: none;
}

/* 功能标签栏（静态）+ 三色词频标签，同一行两端分布 */
.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 10px;
    border-top: 1px solid var(--c-card-border);

    /* padding-bottom: 14px;
    border-bottom: 1px solid var(--c-card-border); */
}

.tabs {
    display: flex;
    gap: 420px;
}

.tab {
    border: 1.5px solid var(--c-pinyin);
    color: var(--c-pinyin);
    border-radius: 999px;
    padding: 4px 16px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
}

.tab.active {
    background: var(--c-pinyin);
    color: #fff;
}

/* ---- 主体双栏：比例可调（甲方 2026-10-11 解除等分限制） ---- */
.columns {
    display: grid;
    /* --col-split = 左栏占比数字（30-70）。
       注意：calc() 不能产生 fr 值（规范禁止），必须用百分比；
       minmax(0,…) 防长内容撑爆列宽，右栏 1fr 吃剩余空间 */
    grid-template-columns: minmax(0, calc(var(--col-split) * 1%)) minmax(0, 1fr);
    gap: 30px;
    margin-top: 22px;
    align-items: start;
}

/* ---- 左栏：句子三层结构（拼音/汉字 ruby 一体 + 英文） ---- */
.sentence {
    margin-bottom: var(--sp-sentence-gap);
}

.sentence:last-child {
    margin-bottom: 0;
}

/* 拼音 + 汉字：词组级 ruby，拼音自动居中于汉字正上方，词组间自然换行 */
.line-zh {
    font-size: var(--s-hanzi);
    line-height: 2.15;               /* 行高同时容纳拼音行，防止遮挡 */
    letter-spacing: var(--ls-hanzi);
    color: var(--c-hanzi);
}

.line-zh ruby {
    margin-right: var(--sp-hanzi-spacing);
}

.line-zh rt {
    font-size: var(--s-pinyin);
    color: var(--c-pinyin);
    font-weight: 400;
    padding-bottom: var(--sp-pinyin-gap);
    letter-spacing: var(--ls-pinyin);
}

/* 生词：标红加粗（拼音按规范保持蓝色） */
.line-zh .vocab {
    color: var(--c-vocab);
    font-weight: 700;
}

/* 带圈序号：紧跟生词右上方 */
.line-zh .seq {
    color: var(--c-vocab);
    font-size: 0.72em;
    font-weight: 700;
    vertical-align: super;
    margin-left: 1px;
    letter-spacing: 0;
}

.line-en {
    color: var(--c-en);
    font-size: var(--s-en);
    line-height: var(--sp-en-lineheight);
    letter-spacing: var(--ls-en);
    margin-top: var(--sp-hanzi-en-gap);
}

.line-en:empty {
    display: none;
}

/* ---- 右栏：生词卡片（pager 直接塞入 .col-vocab，间距由栏容器承担） ---- */
.col-vocab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* 卡片宽度按 --card-width 百分比生效，不拉伸 */
    gap: var(--sp-card-gap);
}

.card {
    width: var(--card-width);      /* 栏内占宽可调；双栏等分结构不变 */
    /* 水平位置：剩余空间 × 偏移比例（0 靠左 / 50 居中 / 100 靠右） */
    margin-left: calc((100% - var(--card-width)) * var(--card-align) / 100);
    background: var(--c-card-bg);
    border: var(--card-border-w) solid var(--c-card-border);
    border-radius: var(--r-card);
    padding: var(--sp-card-pady) var(--sp-card-padx);
    break-inside: avoid;             /* 打印防跨页截断（M3 生效） */
}

.card-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.card-no {
    color: var(--c-vocab);
    font-weight: 700;
    font-size: 16px;
}

.card-hanzi {
    font-size: var(--s-card-hanzi);
    font-weight: 700;
    color: var(--c-hanzi);
}

.card-pinyin {
    font-family: var(--f-card-pinyin);
    color: var(--c-card-pinyin);
    font-size: var(--s-card-pinyin);
}

.card-meaning {
    margin-top: 5px;
    font-family: var(--f-card-meaning);
    font-size: var(--s-card-meaning);
    color: var(--c-card-meaning);
    line-height: 1.5;
}

.card-phrases {
    margin-top: 3px;
    font-family: var(--f-card-phrases);
    font-size: var(--s-card-phrases);
    color: var(--c-card-phrases);
    line-height: 1.5;
}

.card-phrases:empty {
    display: none;
}

/* ---- 空状态 ---- */
.empty-tip {
    padding: 60px 20px;
    text-align: center;
    color: var(--c-en);
    font-size: 14px;
    line-height: 1.8;
}

/* ---- 小屏：sheet 固定 A4 宽度不变（打印保真的前提），预览区横向滚动 ---- */
@media screen and (max-width: 800px) {
    .preview-area {
        padding: 16px 8px;
        gap: 24px;
        align-items: flex-start;
    }
}

/* ============================================================
 * M2 配置面板（屏幕专用，末尾 @media print 中整体隐藏）
 * 结构：右上角齿轮按钮 + 右侧滑入面板（宽 330px，控件按分组折叠）
 * ============================================================ */

.gear-btn {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 60;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-card-border);
    border-radius: 50%;
    background: var(--c-paper);
    color: var(--c-hanzi);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, color 0.15s ease;
}

.gear-btn:hover {
    color: var(--c-pinyin);
    transform: rotate(30deg);
}

.config-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    width: 330px;
    max-width: 92vw;                 /* 手机上不超出屏幕 */
    height: 100vh;
    overflow-y: auto;
    background: var(--c-paper);
    border-left: 1px solid var(--c-card-border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.10);
    padding: 16px 18px 24px;
    transform: translateX(105%);     /* 默认藏在屏外 */
    transition: transform 0.22s ease;
}

.config-panel.open {
    transform: translateX(0);
}

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

.panel-title {
    font-size: 15px;
    font-weight: 700;
}

.panel-close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--c-en);
    cursor: pointer;
    padding: 2px 6px;
}

.panel-close:hover {
    color: var(--c-hanzi);
}

.panel-section {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--c-card-border);
}

.section-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* 控件分组（details 折叠，默认展开） */
.ctl-group {
    margin-bottom: 4px;
}

.ctl-group summary {
    cursor: pointer;
    user-select: none;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--c-card-border);
}

.ctl-group-body {
    padding-bottom: 8px;
}

/* 控件行：label 左，控件 + 当前值右 */
.ctl-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ctl-label {
    font-size: 12.5px;
    white-space: nowrap;
}

.ctl-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ctl-val {
    min-width: 52px;
    text-align: right;
    font-size: 11.5px;
    color: var(--c-en);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ctl-right input[type="range"] {
    width: 120px;
    accent-color: var(--c-pinyin);
}

.ctl-right input[type="color"] {
    width: 34px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--c-card-border);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

.ctl-right select {
    max-width: 130px;
    padding: 3px 4px;
    border: 1px solid var(--c-card-border);
    border-radius: 6px;
    background: var(--c-paper);
    color: var(--c-hanzi);
    font-family: var(--font-base);
    font-size: 12px;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.btn-row button {
    border: 1px solid var(--c-card-border);
    border-radius: 8px;
    background: var(--c-paper);
    color: var(--c-hanzi);
    padding: 6px 12px;
    font-size: 12.5px;
    font-family: var(--font-base);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-row button:hover {
    border-color: var(--c-pinyin);
    color: var(--c-pinyin);
}

/* 文章 JSON 编辑区 */
.json-editor {
    margin-top: 12px;
}

.json-editor summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--c-pinyin);
    user-select: none;
}

.json-editor textarea {
    width: 100%;
    height: 130px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--c-card-border);
    border-radius: 8px;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-hanzi);
    background: var(--c-card-bg);
}

/* AI 生成区输入框（歌词/样式要求/AI 返回 JSON） */
.ai-input {
    width: 100%;
    height: 72px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--c-card-border);
    border-radius: 8px;
    resize: vertical;
    font-family: var(--font-base);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-hanzi);
    background: var(--c-card-bg);
}

.ai-input-sm {
    height: 44px;
}

/* 状态提示（ok/err/warn 由 ui/panel.js 切换） */
.panel-status {
    min-height: 18px;
    font-size: 12.5px;
    line-height: 1.6;
    word-break: break-all;
}

.panel-status.ok   { color: var(--ui-ok); }
.panel-status.err  { color: var(--c-vocab); }
.panel-status.warn { color: var(--c-tag-mid); }

/* ---- 打印：@page 锁 A4 + 每张 sheet 强制翻页（方案文档 §4.3） ---- */
@media print {
    @page {
        size: A4;
        margin: 0;   /* 边距由 .sheet 的 padding（用户配置）控制，这里必须为 0 */
    }

    .gear-btn,
    .config-panel,
    #file-picker,
    #bg-picker {
        display: none !important;
    }

    body {
        background: #fff;
        /* 浏览器默认不打印背景色，强制保留卡片底色/词频色块等 */
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* 预览区还原为普通块，不再裁切 */
    .preview-area {
        padding: 0;
        min-height: 0;
        display: block;
        background: #fff;
    }

    .sheet {
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        overflow: visible;            /* 防 1px 舍入误差裁字（pager 已保证不溢出） */
        page-break-after: always;     /* ⭐ 每张 sheet 强制翻页 */
    }

    /* 兜底：最后一张不要空白页 */
    .sheet:last-child {
        page-break-after: auto;
    }
}