/* ============================================================
   subjective-inline.css
   平板竖屏模式 — 主观题（翻译/写作）内联答题页
   插入 PDF 页面流中，视觉上与真实 PDF 页一致
   ============================================================ */

/* ------------------------------------------------------------
   1. 答题页容器 — 与 .pdf-page 保持一致
   ------------------------------------------------------------ */

.subjective-inline-page {
    position: relative;
    width: 100%;
    max-width: var(--pdf-width);
    height: 0;
    padding-bottom: 141.4%;
    margin-bottom: var(--page-gap);
    background-color: var(--color-paper);
    border: 1px solid var(--paper-border);
    box-shadow: var(--shadow-paper);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    contain: layout style paint;
    transform: translateZ(0);
    transform-origin: center top;
    backface-visibility: hidden;
}

/* 去掉装饰性分隔线，保持答题纸整体感 */
.subjective-inline-page::before {
    content: none;
}

/* ------------------------------------------------------------
   2. 内容层 — 绝对定位填满容器
   ------------------------------------------------------------ */

.sip-content {
    position: absolute;
    inset: 0;
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

/* 主写作区域 — 填充 header 与 footer 之间的剩余空间，textarea 垂直居中 */
.sip-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.sip-stage > .sip-multi-input {
    align-self: stretch;
}

/* ------------------------------------------------------------
   3. 区域标签 — "翻译答题区" / "作文答题区"
   ------------------------------------------------------------ */

.sip-label {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--subjective-text-muted, var(--color-text));
    letter-spacing: 0.06em;
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   4. 横线纸文本域 — 大段书写区
   ------------------------------------------------------------ */

/* 横线背景和行高由 JS ruled-background.js 统一引擎动态设置 */
.sip-textarea {
    width: 100%;
    /* 高度由 JS ruled-background.js 动态设置，不设 flex */
    min-height: 0;
    font-family: var(--subjective-font-input, 'Georgia', 'Times New Roman', serif);
    /* font-size 由 JS 动态计算，匹配 220 词容量 */
    font-weight: 400;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.003em;
    color: var(--subjective-text, var(--color-text));
    background: transparent;
    border: 1px solid var(--subjective-input-border, color-mix(in srgb, var(--color-text) 8%, transparent));
    border-radius: 12px;
    outline: none;
    resize: none;
    padding: 24px;
    box-sizing: border-box;
    /* 整块可编辑区域(含 padding 内衬)都给文本光标 */
    cursor: text;
    
    text-align: justify;
    text-justify: inter-ideograph;
    text-align-last: left;
    
    /* 换行行为 — 模拟 textarea */
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    background-origin: content-box;
    background-clip: content-box;
    background-attachment: local;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-paper) 92%, transparent),
        0 1px 3px 0 rgba(0, 0, 0, 0.02);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

/* contenteditable placeholder — 纯 CSS 实现
 * JS 在 input 事件中维护 :empty 状态（清除残留 <br>） */
.sip-textarea[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--subjective-text-muted, var(--color-text-lighter));
    font-style: normal;
    opacity: 0.6;
    pointer-events: none;
    display: block;
}

.sip-textarea[data-placeholder]:empty:focus::before {
    opacity: 0.35;
}

@media (hover: hover) {
    .sip-textarea:hover:not(:focus) {
        border-color: color-mix(in srgb, var(--subjective-text, var(--color-text)) 14%, transparent);
    }
}

.sip-textarea:focus {
    border-color: color-mix(in srgb, var(--subjective-text, var(--color-text)) 18%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--subjective-text, var(--color-text)) 6%, transparent);
}

/* ------------------------------------------------------------
   5. 多题翻译布局 — 英语一翻译（5 小题）
   ------------------------------------------------------------ */

.sip-multi-input {
    width: 100%;
    min-height: 0;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding: var(--translation-optical-inset-top) 24px var(--translation-optical-inset-bottom);
    border: 1px solid var(--subjective-input-border, color-mix(in srgb, var(--color-text) 8%, transparent));
    border-radius: 12px;
    box-sizing: border-box;
    flex: none;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-paper) 92%, transparent),
        0 1px 3px 0 rgba(0, 0, 0, 0.02);
}

.sip-multi-input:focus-within {
    border-color: color-mix(in srgb, var(--subjective-text, var(--color-text)) 18%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--subjective-text, var(--color-text)) 6%, transparent);
}

/* ------------------------------------------------------------
   6. 标签切换 — 使用统一 composition-tab-bar（样式在 subjective-mode.css）
   内联模式下补充间距
   ------------------------------------------------------------ */

.sip-content .composition-tab-bar {
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* 内联页 header 与 Tab 栏不限制宽度，允许填充 header */
.answer-page-header .composition-tab-bar {
    max-width: none;
    flex: 1;
    min-width: 0;
}

/* ------------------------------------------------------------
   7. 底栏 — 使用统一 answer-page-footer 结构（样式在 subjective-mode.css）
   内联模式下补充适配
   ------------------------------------------------------------ */

.sip-content .answer-page-footer {
    padding-top: 16px;
    margin-top: auto;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   8. 入场动画 — 上滑淡入
   ------------------------------------------------------------ */

@keyframes sip-slide-up {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.subjective-inline-page {
    animation: sip-slide-up 150ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .subjective-inline-page {
        animation: none;
    }
    .sip-textarea,
    .sip-multi-input,
    .sip-close-btn {
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   9. 双页模式适配
   ------------------------------------------------------------ */

body.dual-page-mode .subjective-inline-page {
    grid-column: span 2;
    justify-self: center;
    max-width: var(--pdf-width);
}

/* ------------------------------------------------------------
   10. 暗色模式适配
   ------------------------------------------------------------ */

/* 暗色/护眼模式下横线颜色由 CSS 变量 --subjective-line-color 控制，
   JS 统一引擎读取该变量并动态设置，无需硬编码渐变覆盖 */