/**
 * 手机端主观题 inline 样式
 *
 * 设计目标：
 * - 手机端与平板竖屏共用“插入 PDF 流”的交互主线
 * - 让答题页像一张安静的写作纸，而不是全屏编辑器
 * - 保持保存/提交稳定可达，同时降低外围噪音
 */

.subjective-inline-page.phone-inline-page {
    display: block;
    height: 0;
    min-height: 0;
    padding-bottom: 141.4%;
    margin-bottom: var(--page-gap);
    border-radius: var(--border-radius-sm);
}

.subjective-inline-page.phone-inline-page::before {
    background-color: color-mix(in srgb, var(--subjective-text) 10%, transparent);
}

.phone-inline-page .sip-content {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.phone-inline-page .sip-header-row {
    position: absolute;
    top: var(--pdf-content-margin-edge-gap);
    left: var(--pdf-content-inset-inline);
    right: var(--pdf-content-inset-inline);
    height: calc(var(--pdf-content-inset-top) - var(--pdf-content-margin-edge-gap));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.phone-inline-page .sip-label,
.phone-inline-page .sip-header-context,
.phone-inline-page .sip-header-row .composition-tab-bar {
    flex: 1 1 auto;
    min-width: 0;
}

.phone-inline-page .sip-label {
    margin-bottom: 0;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--subjective-text-muted);
}

.phone-inline-page[data-question-type="translation"] .sip-label {
    font-family: var(--subjective-font-ui);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--subjective-text-secondary) 78%, transparent);
}

.phone-inline-page .sip-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--subjective-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}

.phone-inline-page .sip-close-btn:active {
    background: color-mix(in srgb, var(--subjective-text) 8%, transparent);
    transform: scale(0.94);
}

@media (hover: hover) {
    .phone-inline-page .sip-close-btn:hover {
        background: color-mix(in srgb, var(--subjective-text) 5%, transparent);
        color: var(--subjective-text);
    }
}

.phone-inline-page .composition-tab-bar,
.phone-inline-page .sip-content .composition-tab-bar {
    margin-bottom: 0;
}

.phone-inline-page .sip-stage {
    position: absolute;
    top: var(--pdf-content-inset-top);
    right: var(--pdf-content-inset-inline);
    bottom: var(--pdf-content-inset-bottom);
    left: var(--pdf-content-inset-inline);
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.phone-inline-page .sip-stage > * {
    flex: none;
    min-height: 0;
}

/* 44 = iOS HIG 最小命中区（D-21，2026-09-17）。原来的 40 低于触屏基准；
   横屏矮屏那档的 36px 是刻意压缩，不动。 */
.phone-inline-page .composition-tab {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
}

.phone-inline-page .sip-textarea {
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--subjective-text, var(--color-text)) 10%, transparent);
    border-radius: 8px;
    background-color: var(--color-paper);
}

.phone-inline-page .sip-textarea {
    scrollbar-gutter: stable;
}

/* 写作区里自己写的字要能长按选中（D-17，2026-09-17）。阅读器 body 整体
   `user-select: none`（style.css:634-638），Chromium 对 contenteditable 网开一面
   （390 实测：计算值仍是 none，选区照样成立），WebKit 不会——iOS 上继承来的 none
   会连同光标一起吞掉。`-webkit-` 前缀是给 iOS Safari 的，不能省。 */
.phone-inline-page .sip-textarea,
.phone-inline-page .translation-question-editor {
    -webkit-user-select: text;
    user-select: text;
}

.phone-inline-page .sip-multi-input {
    padding: var(--translation-optical-inset-top) 16px var(--translation-optical-inset-bottom);
    border: 1px solid color-mix(in srgb, var(--subjective-text, var(--color-text)) 10%, transparent);
    border-radius: 8px;
    background-color: var(--color-paper);
    overflow: hidden;
}

.phone-inline-page .translation-row {
    gap: 10px;
}

.phone-inline-page .translation-item-number {
    width: 1.96em;
    min-width: 1.96em;
    font-size: 0.78em;
    padding-top: 0.22em;
}

.phone-inline-page .answer-page-footer {
    position: absolute;
    right: var(--pdf-content-inset-inline);
    bottom: var(--pdf-content-margin-edge-gap);
    left: var(--pdf-content-inset-inline);
    height: calc(var(--pdf-content-inset-bottom) - var(--pdf-content-margin-edge-gap));
    margin-top: 0;
    padding: 0;
    gap: 8px;
    border-top: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.phone-inline-page .answer-page-info {
    gap: 6px;
}

.phone-inline-page .word-count-display {
    font-size: 11px;
    letter-spacing: 0.01em;
}

.phone-inline-page .subjective-save-status {
    font-size: 11px;
}

.phone-inline-page .answer-page-actions {
    gap: 6px;
}

.phone-inline-page .subjective-btn {
    min-height: 48px;
    padding: 0 16px;
    font-size: 13px;
    white-space: nowrap;
    border-radius: 10px;
}

.phone-inline-page .subjective-btn.btn-ghost {
    min-width: 0;
    padding: 0 10px;
}

.phone-inline-page .subjective-btn.btn-primary {
    min-width: 84px;
}

@media (max-width: 480px) {
    .phone-inline-page .sip-textarea {
        padding: 14px;
    }

    .phone-inline-page .sip-multi-input {
        padding: var(--translation-optical-inset-top) 14px var(--translation-optical-inset-bottom);
    }

    .phone-inline-page .answer-page-footer {
        gap: 6px;
    }

    .phone-inline-page .subjective-btn {
        padding: 0 14px;
        font-size: 13px;
    }

    .phone-inline-page .subjective-btn.btn-ghost {
        padding: 0 8px;
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    .phone-inline-page .sip-close-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .phone-inline-page .composition-tab {
        min-height: 36px;
        font-size: 12px;
    }

    .phone-inline-page .answer-page-footer {
        gap: 6px;
    }

    .phone-inline-page .subjective-btn {
        min-height: 44px;
        padding: 0 12px;
        font-size: 12px;
    }

    .phone-inline-page .subjective-btn.btn-ghost {
        padding: 0 8px;
    }

    .phone-inline-page .sip-label {
        font-size: 10px;
    }
}

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

/* ============================================================
   手机全屏抽屉容器(MOBILE_WEB_READER_DESIGN §10)
   ------------------------------------------------------------
   文字态没有 PDF 流可插,答题纸改由全屏抽屉承载。
   纸还是那张纸:A4 比例、纸色、内边距、批改配色一个字不动 ——
   比例从「页容器的 padding-bottom」挪到「.sip-content 的 padding-bottom」,
   绝对定位的头 / 写作区 / 底栏仍按同一套 --pdf-content-inset-* 落位。
   作用域 body.reader-mobile + .sip-fullscreen-sheet,桌面与平板一行不生效。
   ============================================================ */

body.reader-mobile .subjective-inline-page.sip-fullscreen-sheet {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: auto;
    padding: var(--safe-area-top) 0 0;
    margin-bottom: 0;
    background-color: var(--color-app-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: var(--z-explanation-panel);
    transform: translateY(100%);
    transition: transform var(--dl-t-panel) var(--dl-ease-out);
}

body.reader-mobile .subjective-inline-page.sip-fullscreen-sheet.is-open {
    transform: translateY(0);
}

/* 滑出途中它还盖着整屏，不摘掉指针会吞掉那 200ms 里的一下点击 */
body.reader-mobile .subjective-inline-page.sip-fullscreen-sheet:not(.is-open) {
    pointer-events: none;
}

/* 那层补纸面的 ::after 是给「插在 PDF 流里的一张纸」用的;
   抽屉铺满整屏,让它铺就成了整屏白 —— 纸面改由 .sip-content 自己带 */
body.reader-mobile .subjective-inline-page.sip-fullscreen-sheet::after {
    content: none;
}

/* 这条只对**作答态**成立。答案 / 批改纸的内容长度由批改结果决定,锁进 A4 框就会被裁;
   它在 components/essay-review.css §7 被同特异度后写覆盖成「自然高度 + 版心 padding」(D-2/D-3)。 */
body.reader-mobile .subjective-inline-page.sip-fullscreen-sheet > .sip-content {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: 0;
    padding: 0 0 141.4%;
    background-color: var(--color-paper);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

/* 软键盘避让（D-22，2026-09-17）
   ------------------------------------------------------------
   抽屉是 `position: fixed; inset: 0`，纸内的头 / 写作区 / 底栏按 --pdf-content-inset-*
   绝对定位在 A4 比例锁出来的 551.5px（390 屏宽实测）里；底栏下沿落在 541.5px。
   软键盘一上来可见带只剩 ~500px，「字数 / 提交」就压在键盘下面。
   Chrome 手机端 `interactive-widget` 默认 `resizes-visual`：布局视口不缩，
   只有 visualViewport 缩 —— 所以 fixed 抽屉自己不会让位，得把它按可见带重新落位。

   键盘弹出时**只做两件事**：抽屉钉到可见带（top / height），纸从 A4 比例锁改成
   「高度 = 可见带」。头 / 写作区 / 底栏是 top / bottom 双锚的，纸一矮它们自己重排，
   写作区跟着收但收不成缝（390×844、键盘 336 实测：纸 508，写作区仍有 373.9）。
   数值由 `subjective-inline-page.js _syncKeyboardInset()` 按 visualViewport 实测写入。
   答案 / 批改纸排除在外：那张纸没有可编辑区，键盘弹不出来，而它的高度归
   components/essay-review.css §7 管，两套一碰就打架。 */
body.reader-mobile .subjective-inline-page.sip-fullscreen-sheet.is-keyboard-open {
    top: var(--sip-kb-top, 0px);
    bottom: auto;
    height: var(--sip-kb-height, 100%);
}

body.reader-mobile .subjective-inline-page.sip-fullscreen-sheet.is-keyboard-open:not(.subjective-review-inline-page) > .sip-content {
    height: calc(var(--sip-kb-height, 100%) - var(--safe-area-top));
    padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    body.reader-mobile .subjective-inline-page.sip-fullscreen-sheet {
        transition: opacity 1ms linear;
        transform: none;
        opacity: 0;
    }

    body.reader-mobile .subjective-inline-page.sip-fullscreen-sheet.is-open {
        opacity: 1;
    }
}