/*
 * reader-mobile.css — 手机竖屏阅读器（原卷态）
 *
 * 真相源 docs/MOBILE_WEB_READER_DESIGN.md（§1 骨架 / §7 设置菜单 / §12 动效）；
 * 该稿里「文字态」相关各节已于 2026-09-17 随 E10 作废，对应样式一并删除。
 * 作用域全部挂在 body.reader-mobile 上——手机打开阅读器时加（视口宽 < 769），
 * 桌面与平板一行都不生效。
 */

/* ============ §1.2 纸面与列 ============ */

body.reader-mobile {
    background: var(--color-paper);
    /* 阅读器是叶子页，没有底部标签栏：把 mobile-tab-bar.css 的 ≤768 覆盖挡在外面 */
    --toast-offset-bottom: calc(24px + var(--safe-area-bottom, 0px));
}

/* 整屏就是纸：桌面那层暗角在手机上只会让右下角发灰 */
body.reader-mobile.pdf-view-body::before {
    display: none;
}

/* 顶栏是 position:fixed 的覆盖层，得给纸让出它那一条。
   基线 #pdf-viewer 的 padding-top 只有 --page-gap/2 = 12px，第一页上缘因此落在 y=12，
   压在 48px 高的顶栏底下；能看不出破绽，靠的是纸自己 19.05mm 的上白边在 390 宽时约 35px，
   12+35=47 刚好差顶栏 1px —— 整条链是巧合，换一张上白边小一点的卷首页就会吃掉正文第一行。
   这里补成「栏高 + 安全区 + 原来那 12px」，纸从栏下方开始，栏照旧滚动即隐。 */
body.reader-mobile #pdf-viewer {
    padding-top: calc(48px + var(--safe-area-top, 0px) + var(--page-gap) / 2);
}

/* 答题卡抽屉收起时停在屏外 x=390，它的左向投影会糊在白纸右缘上（桌面灰底看不出来） */
body.reader-mobile .answer-card-container:not(.visible) .answer-card-sidebar {
    box-shadow: none;
}

/* ============ §1.1 顶栏 ============ */

body.reader-mobile .reader-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: calc(48px + var(--safe-area-top, 0px));
    padding: 0 4px;
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 0.5px solid var(--color-border);
    transition: transform 180ms var(--dl-ease-out);
}

body.reader-mobile .reader-top-bar.is-hidden {
    transform: translateY(-100%);
}

body.reader-mobile .reader-top-bar-side {
    display: flex;
    align-items: center;
    height: 48px;
    flex: 0 0 auto;
}

/* 顶栏里的钮一律 48×48 命中、24px 图标、无圆形玻璃底 */
body.reader-mobile .reader-top-bar :is(.back-btn-corner, .viewer-guest-btn, .action-btn) {
    position: static;
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    box-shadow: none;
    outline: none;
    color: var(--color-text-light);
    opacity: 1;
    visibility: visible;
    transform: none;
    /* 桌面浮钮的毛玻璃底在顶栏里会画出一个个方框：顶栏自己已经是玻璃，钮不再叠一层 */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background var(--dl-t-state) ease;
}

/* 桌面圆钮的玻璃边是 ::before 的 inset 投影画的，顶栏里一起撤掉 */
body.reader-mobile .reader-top-bar :is(.back-btn-corner, .viewer-guest-btn, .action-btn)::before {
    box-shadow: none;
    background: none;
    border: none;
}

body.reader-mobile .reader-top-bar :is(.back-btn-corner, .viewer-guest-btn, .action-btn) svg {
    width: 24px;
    height: 24px;
}

body.reader-mobile .reader-top-bar :is(.back-btn-corner, .viewer-guest-btn, .action-btn):active {
    background: var(--dl-hover);
}

body.reader-mobile .reader-top-bar :is(.back-btn-corner, .viewer-guest-btn, .action-btn):focus-visible {
    box-shadow: var(--dl-focus-ring);
}

@media (hover: hover) {
    body.reader-mobile .reader-top-bar :is(.back-btn-corner, .viewer-guest-btn, .action-btn):hover {
        background: var(--dl-hover);
    }
}

body.reader-mobile .reader-top-bar .viewer-btn-label {
    display: none;
}

body.reader-mobile .reader-top-bar .settings-wrapper {
    position: relative;
    display: inline-flex;
    background: none;
    box-shadow: none;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 手机上撤掉的：反馈钮（并入设置菜单）、reader 自带工具条、华生形象浮钮

   .watson-launcher（华生形象浮钮）**不要恢复**（D-28，2026-09-18 会话 41 复核后维持）：
   撤掉它是上一轮的刻意裁决 —— 沉浸式阅读不要一枚浮钮常年压在试卷上，手机的可视面本来
   就只有桌面的三分之一，88px 见方的形象会遮住正文，而它与右下角的反馈浮标还要争同一块地方。
   华生在手机上的一级入口改由两处替代，两处都不占阅读面：
     ① 阅读器内 → 顶栏图标钮 #reader-watson-btn（reader-top-bar.js 的 _buildWatsonBtn）；
     ② 非阅读器页 → 底部标签栏第五项「华生」（templates/base.html）。
   要动这条规则前先读 D-27 / D-28，别把浮钮放回来。 */
body.reader-mobile #feedback-viewer-trigger,
body.reader-mobile .reader-toolbar,
body.reader-mobile .watson-launcher,
body.reader-mobile .immersive-actions-container {
    display: none !important;
}

/* 横屏门（#reader-orientation-gate）以前也在上面那张隐藏名单里：手机横屏可以切「文字态」，
   所以竖排的原卷提示面板不该出。E10 删掉文字态之后这个前提没了，而 style.css 的
   `body.reader-orientation-blocked` 仍把 body 设成 overflow:hidden / touch-action:none、
   把 #pdf-viewer 设成 pointer-events:none —— 那一套是「面板盖住底层」的配套，面板不出就只剩
   一屏冻住的原卷。名单里去掉它即可：面板本身由 hidden 属性驱动（style.css 的 [hidden]），
   未触发横屏门时照样不显示。
   注意只有「竖屏载入后旋转」这条路径会走到 reader-mobile：直接横屏载入时视口宽 ≥769，
   device-detect 判成 tablet，body 上根本没有 reader-mobile，面板一直是正常出的。 */

/* ============ §7 设置菜单 ============ */

body.reader-mobile .settings-wrapper .settings-panel {
    width: var(--dl-pop-w);
    padding: 8px;
    gap: 0;
    border-radius: var(--dl-r-pop);
    background: var(--dl-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.reader-mobile .settings-wrapper .settings-panel > * {
    margin: 0;
}

/* 独立反馈浮钮在手机顶栏里撤掉了，功能并入设置菜单这一行（设计稿 §1.1） */
body.reader-mobile .settings-panel .settings-feedback-entry {
    display: flex;
}

body.reader-mobile .settings-panel .settings-action-entry {
    min-height: 48px;
    padding: 0 12px;
    font-size: 15px;
    color: var(--dl-ink);
}

/* ============ §12 prefers-reduced-motion ============ */

@media (prefers-reduced-motion: reduce) {
    body.reader-mobile .reader-top-bar {
        transition: none;
    }
}