/* 解析面板
 *
 * 2026-09-03(§6.3):这里原有一段绿色圆形 `.explanation-trigger` 的形体定义——
 * 托盘里的书钮实际由 inline-answer-selector.css 的 `.selector-companion-btn` 接管,
 * 那段规则谁也没消费,连 `--reader-overlay-action-size` 都没定义,整段删。
 * `.explanation-trigger.hidden` 保留:JS 用它藏没有解析的书钮。
 */

.explanation-trigger.hidden {
    display: none !important;
}

/* === 面板容器 ===
 * 所有尺寸由 JS getExplanationPanelMetrics() 注入 CSS 变量，
 * 以下为回退值（仅在 JS 未注入时兜底）。
 */
.explanation-panel {
    --explanation-panel-width: 440px;
    --explanation-panel-max-height: 520px;
    --explanation-panel-base-transform: translate3d(0, 0, 0);
    --explanation-header-height: clamp(44px, var(--qa-tray-h, 45px), 64px);
    --explanation-btn-size: 28px;
    --explanation-btn-icon-size: 14px;
    --explanation-hit-target: 44px;
    --explanation-close-size: 28px;
    --explanation-collapse-size: 28px;
    --explanation-title-size: 13px;
    --explanation-body-size: 14px;
    --explanation-meta-size: 12px;
    --explanation-evidence-size: 12px;
    --explanation-panel-handoff-x: 0px;
    --explanation-panel-handoff-y: 0px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--z-explanation-panel);
    width: var(--explanation-panel-width);
    max-width: calc(100vw - 32px);
    max-height: var(--explanation-panel-max-height);
    border-radius: var(--dl-r-pop, 12px);
    background: color-mix(in srgb, var(--color-surface) 97%, var(--color-app-bg) 3%);
    /* 边缘归一到浮层令牌(P-05):ring 已在 --dl-sh-menu 第一层,不再自带 border */
    box-shadow: var(--dl-sh-menu);
    opacity: 0;
    pointer-events: none;
    transform: var(--explanation-panel-base-transform);
    transition:
        opacity 120ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    contain: layout style paint;
}

.explanation-panel.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: var(--explanation-panel-base-transform);
}

/* 「易错解析」展开期间(§7.2):面板高度与那一格内容走同一条 200ms 曲线,
   否则 200ms 里什么都看不见、结束时整块弹出来。只在这 200ms 内开这条 transition ——
   打开 / 折叠 / 换题都会直接改写 max-height,常开会给它们拖出一条尾巴。 */
.explanation-panel.is-detail-animating {
    transition:
        opacity 120ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
        max-height 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* === 入场 / 退场(§6.3 A-04)===
 * 从书钮中心 scale(.55) → 1 + 淡入,200ms;退场反向 160ms。
 * transform-origin 留在左上角(落位逻辑要用),「绕书钮缩放」由 JS 换算成
 * (1 − scale) × 原点坐标的位移 —— translate 与 scale 各自线性插值的轨迹与绕点缩放逐帧相同。
 */
.explanation-panel.is-handoff-enter {
    opacity: 0;
    transform:
        var(--explanation-panel-base-transform)
        translate3d(var(--explanation-panel-handoff-x), var(--explanation-panel-handoff-y), 0)
        scale(0.55);
    transition: none;
}

.explanation-panel.is-handoff-enter.is-handoff-active {
    opacity: 1;
    transform: var(--explanation-panel-base-transform) translate3d(0, 0, 0) scale(1);
    transition:
        opacity 200ms var(--dl-ease-out),
        transform 200ms var(--dl-ease-out);
}

.explanation-panel.is-handoff-exit {
    opacity: 0;
    pointer-events: none;
    transform:
        var(--explanation-panel-base-transform)
        translate3d(var(--explanation-panel-handoff-x), var(--explanation-panel-handoff-y), 0)
        scale(0.55);
    transition:
        opacity 160ms var(--dl-ease-out),
        transform 160ms var(--dl-ease-out);
}

/* === 内部框架 === */
.explanation-panel-frame,
.explanation-panel-content-frame {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: inherit;
}

.explanation-panel-content-frame {
    flex-direction: column;
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.explanation-panel-content-frame.is-fading-out {
    opacity: 0;
    transform: translateY(4px);
}

.explanation-panel-content-frame.is-fading-in {
    opacity: 0;
    transform: translateY(-4px);
}

/* === 折叠栏(header)===
 * 高 45 = 与答案选择器托盘同高、同一条行隙法则(下边 = 题号行顶 − 5),二者互斥出现;
 * 钮 28×28、水平内距 8、文字 13/500。
 */
.explanation-header {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: var(--explanation-header-height);
    padding: 0 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
    flex: 0 0 auto;
    transition: border-color 200ms ease;
}

.explanation-panel.is-collapsed .explanation-header {
    border-bottom-color: transparent;
}

.explanation-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--dl-ink);
    letter-spacing: 0.01em;
}

.explanation-eyebrow-index {
    color: var(--dl-ink);
    font-weight: 600;
}

.explanation-eyebrow-separator,
.explanation-eyebrow-label {
    color: var(--dl-ink-2);
}

/* 折叠态那半行说的是「这题考什么」(§3.28)，不再报答案：答案在纸上、在答题卡上、
   在正文首句里都已经有了，第四次说一遍是占位信息。空(归不了类的题)就整个不出现。 */
.explanation-eyebrow-nature {
    display: inline;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dl-ink-2);
    font-weight: 400;
}

.explanation-panel.is-collapsed .explanation-eyebrow-nature:not(:empty) {
    display: inline;
}

/* === 关闭按钮 / 折叠按钮 ===
 * 与选择器托盘里的书钮、犹豫钮同一套词汇表(§5.1 F-06):静止就有面、零描边、圆角 4。
 * 原来是 999px 圆 + 1px 描边,与紧邻同一锚位出现的托盘按钮对不上。
 */
.explanation-close {
    flex: 0 0 var(--explanation-close-size);
    width: var(--explanation-close-size);
    height: var(--explanation-close-size);
    min-width: var(--explanation-close-size);
    min-height: var(--explanation-close-size);
    aspect-ratio: 1 / 1;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    border: 0;
    border-radius: 4px;
    background: var(--dl-hover);
    color: var(--dl-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    margin-left: auto;
    position: relative;
    transition: none;
}

.explanation-close svg {
    width: var(--explanation-btn-icon-size);
    height: var(--explanation-btn-icon-size);
}

@media (hover: hover) {
    .explanation-close:hover {
        color: var(--dl-ink);
        background: var(--dl-hover-strong);
    }
}

.explanation-close:active {
    background: var(--dl-pressed);
}

.explanation-collapse {
    flex: 0 0 var(--explanation-collapse-size);
    width: var(--explanation-collapse-size);
    height: var(--explanation-collapse-size);
    min-width: var(--explanation-collapse-size);
    min-height: var(--explanation-collapse-size);
    aspect-ratio: 1 / 1;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    border: 0;
    border-radius: 4px;
    background: var(--dl-hover);
    color: var(--dl-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition: none;
}

.explanation-collapse svg {
    width: var(--explanation-btn-icon-size);
    height: var(--explanation-btn-icon-size);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.explanation-collapse.is-collapsed svg {
    transform: rotate(180deg);
}

@media (hover: hover) {
    .explanation-collapse:hover {
        color: var(--dl-ink);
        background: var(--dl-hover-strong);
    }
}

.explanation-collapse:active {
    background: var(--dl-pressed);
}

/* === 内容区 — 内边距从 CSS 变量 ===
   展开态的题目性质行(§3.28-3):与折叠态 eyebrow 同一份文字,恒一行,超出省略号。 */
.explanation-context {
    padding: 0 16px;
    font-size: var(--explanation-meta-size);
    line-height: 1.45;
    color: var(--dl-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.explanation-context[hidden] {
    display: none;
}

.explanation-body-wrapper {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    transition: grid-template-rows 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.explanation-panel.is-collapsed .explanation-body-wrapper {
    grid-template-rows: minmax(0, 0fr);
}

.explanation-body-clip {
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.explanation-body {
    display: flex;
    flex-direction: column;
    gap: var(--overlay-gap-normal);
    overflow-y: auto;
    scrollbar-gutter: stable;
    overflow-x: hidden;
    min-height: 0;
    /* 受 clip 的高度约束，超长时 overflow-y:auto 才会真的滚；
       clip 为内容高时百分比回退为 auto，短内容仍贴合不留空白。 */
    max-height: 100%;
    padding: 16px 0;
    transition: opacity 150ms ease;
    overscroll-behavior: contain;
}

.explanation-panel.is-collapsed .explanation-body {
    opacity: 0;
    overflow: hidden;
}

.explanation-panel.is-collapsed .explanation-eyebrow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.explanation-content {
    padding: 0 16px;
}

.explanation-text {
    font-size: var(--explanation-body-size);
    line-height: 22px;
    color: var(--color-text);
    word-break: break-word;
}

.explanation-text>*:first-child {
    margin-top: 0;
}

.explanation-text>*:last-child {
    margin-bottom: 0;
}

.explanation-text p,
.explanation-text h1,
.explanation-text h2,
.explanation-text h3,
.explanation-text h4,
.explanation-text h5,
.explanation-text h6,
.explanation-text ul,
.explanation-text ol,
.explanation-text blockquote {
    margin: 0 0 12px;
}

.explanation-text h1,
.explanation-text h2,
.explanation-text h3,
.explanation-text h4,
.explanation-text h5,
.explanation-text h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: 620;
    color: var(--color-text);
}

.explanation-text ul,
.explanation-text ol {
    padding-left: 1.15em;
}

.explanation-text li+li {
    margin-top: 6px;
}

.explanation-text strong {
    color: inherit;
    font-weight: 620;
}

.explanation-text blockquote {
    padding-left: 12px;
    border-left: 2px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    color: var(--color-text-light);
}

.explanation-text.is-empty,
.explanation-text.is-error {
    color: var(--color-text-light);
}

.explanation-loading-line {
    height: 12px;
    margin: 0 0 12px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--color-text) 5%, transparent),
        color-mix(in srgb, var(--color-text) 10%, transparent),
        color-mix(in srgb, var(--color-text) 5%, transparent)
    );
    background-size: 200% 100%;
    animation: explanation-panel-skeleton 1.2s ease-in-out infinite;
}

.explanation-loading-line.short {
    width: 62%;
}

@keyframes explanation-panel-skeleton {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

/* 零截断(§6.3):这里原来是 max-height 300 + overflow hidden —— 展开后**不滚动直接切**,
   长解析的后半段永远看不到。展开即全高,超出部分随 .explanation-body 一起滚。
   展开动效(§7.2 / U53):grid 行 0fr→1fr,与整面板折叠同一条 200ms 曲线,不再 hidden 硬切;
   `hidden` 从此只表「这题没有易错解析」,展开与否看 .is-open。
   收起态用负外边距抵掉自己占的那一道 flex 行隙 —— 0 高的行不该在正文与动作行之间多撑一条缝。 */
.explanation-detail-section {
    display: grid;
    grid-template-rows: 0fr;
    margin-bottom: calc(-1 * var(--overlay-gap-normal));
    padding: 0 16px;
    opacity: 0;
    overflow: hidden;
    transition:
        grid-template-rows 200ms cubic-bezier(0.16, 1, 0.3, 1),
        margin-bottom 200ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.explanation-detail-section[hidden] {
    display: none !important;
}

.explanation-detail-section.is-open {
    grid-template-rows: 1fr;
    margin-bottom: 0;
    opacity: 1;
}

/* 0fr 那一格要夹得住内容(含自己的上边框),否则收起态会漏出一条 1px 分隔线 */
.explanation-detail-text {
    min-height: 0;
    overflow: hidden;
    padding-top: var(--overlay-pad-compact);
    border-top: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
    font-size: var(--explanation-body-size);
    line-height: 22px;
    color: var(--color-text-light);
    word-break: break-word;
}

.explanation-detail-text>*:first-child {
    margin-top: 0;
}

.explanation-detail-text>*:last-child {
    margin-bottom: 0;
}

.explanation-detail-text p,
.explanation-detail-text h1,
.explanation-detail-text h2,
.explanation-detail-text h3,
.explanation-detail-text h4,
.explanation-detail-text h5,
.explanation-detail-text h6,
.explanation-detail-text ul,
.explanation-detail-text ol,
.explanation-detail-text blockquote {
    margin: 0 0 12px;
}

.explanation-detail-text h1,
.explanation-detail-text h2,
.explanation-detail-text h3,
.explanation-detail-text h4,
.explanation-detail-text h5,
.explanation-detail-text h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: 620;
    color: var(--color-text);
}

.explanation-detail-text ul,
.explanation-detail-text ol {
    padding-left: 1.15em;
}

.explanation-detail-text li+li {
    margin-top: 6px;
}

.explanation-detail-text strong {
    color: inherit;
    font-weight: 620;
}

.explanation-detail-text blockquote {
    padding-left: 12px;
    border-left: 2px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    color: var(--color-text-light);
}

.explanation-evidence-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    border: none;
    background: none;
    color: var(--color-text-lighter);
    font-size: var(--explanation-meta-size);
    font-weight: 500;
    cursor: pointer;
    min-height: var(--explanation-btn-size);
    position: relative;
    transition: color var(--transition-fast) ease;
}

.explanation-evidence-action[hidden] {
    display: none;
}

.explanation-evidence-action-chevron {
    font-size: 1.1em;
    line-height: 1;
    transition: transform var(--transition-fast) ease;
}

@media (hover: hover) {
    .explanation-evidence-action:hover {
        color: var(--color-text-light);
    }

    .explanation-evidence-action:hover .explanation-evidence-action-chevron {
        transform: translateX(2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .explanation-evidence-action,
    .explanation-evidence-action-chevron {
        transition: none !important;
    }
}

.explanation-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--overlay-gap-normal);
    padding: 0 16px;
}

.explanation-actions[hidden] {
    display: none;
}

.explanation-detail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--color-text-lighter);
    font-size: var(--explanation-meta-size);
    font-weight: 500;
    cursor: pointer;
    min-height: var(--explanation-btn-size);
    position: relative;
    transition: color var(--transition-fast) ease;
}

.explanation-detail-toggle[hidden] {
    display: none;
}

.explanation-detail-toggle-icon {
    width: 12px;
    height: 12px;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ▾ 收起 → ▴ 展开 */
.explanation-detail-toggle.is-expanded .explanation-detail-toggle-icon {
    transform: rotate(180deg);
}

@media (hover: hover) {
    .explanation-detail-toggle:hover {
        color: var(--color-text-light);
    }
}

.explanation-footer {
    padding: 0 16px;
}

.explanation-footer[hidden] {
    display: none;
}

.explanation-retry-btn {
    min-height: var(--explanation-btn-size);
    padding: 0 12px;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background: transparent;
    color: var(--color-text-lighter);
    font-size: var(--explanation-meta-size);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition:
        color var(--transition-fast) ease,
        border-color var(--transition-fast) ease,
        background-color var(--transition-fast) ease;
}

html[data-device="tablet"] .explanation-close::before,
html[data-device="tablet"] .explanation-collapse::before,
html[data-device="tablet"] .explanation-detail-toggle::before,
html[data-device="tablet"] .explanation-evidence-action::before,
html[data-device="tablet"] .explanation-retry-btn::before,
html[data-device="phone"] .explanation-close::before,
html[data-device="phone"] .explanation-collapse::before,
html[data-device="phone"] .explanation-detail-toggle::before,
html[data-device="phone"] .explanation-evidence-action::before,
html[data-device="phone"] .explanation-retry-btn::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--explanation-hit-target);
    height: var(--explanation-hit-target);
    transform: translate(-50%, -50%);
    border-radius: inherit;
}

.explanation-body::-webkit-scrollbar {
    width: 5px;
}

.explanation-body::-webkit-scrollbar-track {
    background: transparent;
}

.explanation-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-text) 16%, transparent);
    border-radius: 999px;
}

html.theme-eye-care .explanation-panel {
    background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
}

html.theme-dark .explanation-panel {
    background: color-mix(in srgb, var(--theme-surface) 88%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .explanation-panel,
    .explanation-panel-content-frame,
    .explanation-header,
    .explanation-close,
    .explanation-collapse,
    .explanation-collapse svg,
    .explanation-body-wrapper,
    .explanation-body,
    .explanation-retry-btn,
    .explanation-detail-section,
    .explanation-detail-toggle,
    .explanation-detail-toggle-icon,
    .explanation-loading-line {
        transition: none !important;
        animation: none !important;
    }
}

/* 2026-08-30 废弃(设计语言 §5.1.0 / §10.10-1):这里曾想在精读模式给解析钮
   单独加重底 / 描边 / 影,与「辅助钮与选项卡同一词汇表」冲突;且它引用的
   --ias-explanation-bg / -border / -text / -shadow 四个变量全项目从未定义,
   四条声明在算值阶段早已静默失效。四变量不定义,整条规则删。 */

/* ============================================================
   手机底部抽屉(MOBILE_WEB_READER_DESIGN §9)
   ------------------------------------------------------------
   桌面是锚在题旁的 440–600 浮卡;390 宽放不下,且落点随题位置变、不可预测。
   手机改成底部抽屉:位置恒定、还能「收成一条」让出正文。
   作用域挂 body.reader-mobile + .is-phone-sheet —— 桌面位图态两个都没有,零影响。
   几何全在这里,JS 只负责挂载与清掉桌面落位写下的内联样式。
   ============================================================ */

body.reader-mobile .explanation-panel.is-phone-sheet {
    --explanation-sheet-bar-h: 56px;
    --explanation-body-size: 16px;
    --explanation-meta-size: 14px;
    --explanation-evidence-size: 14px;
    --explanation-hit-target: 48px;
    --explanation-header-height: 48px;
    /* §9.1 / §9.3:抽屉里的「×」「∧」本体就是 48×48、图标 20 —— 手机上不做
       「28 的面 + ::before 扩区」那套(那是桌面紧凑档的做法) */
    --explanation-btn-icon-size: 20px;
    --explanation-close-size: 48px;
    --explanation-collapse-size: 48px;
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 60dvh;
    min-height: 200px;
    padding-bottom: var(--safe-area-bottom);
    border-radius: var(--overlay-radius-sheet-top) var(--overlay-radius-sheet-top) 0 0;
    background: var(--dl-surface);
    box-shadow: var(--dl-sh-2);
    transform: translateY(100%);
    transition:
        transform var(--dl-t-panel) var(--dl-ease-out),
        max-height var(--dl-t-panel) var(--dl-ease-out),
        min-height var(--dl-t-panel) var(--dl-ease-out);
    opacity: 1;
}

body.reader-mobile .explanation-panel.is-phone-sheet.is-visible {
    transform: translateY(0);
}

/* 进场起始态:钉在屏下且不带过渡,下一帧 JS 摘掉这个类,抽屉才真的滑上来 */
body.reader-mobile .explanation-panel.is-phone-sheet.is-sheet-enter {
    transform: translateY(100%);
    transition: none;
}

/* 拖动途中跟手,松手交回 200ms 曲线 */
body.reader-mobile .explanation-panel.is-phone-sheet.is-sheet-dragging {
    transform: translateY(var(--explanation-sheet-drag-y, 0px));
    transition: none;
}

/* 收成一条(§9.3):高 56 + 安全区,同底同影同顶圆角 */
body.reader-mobile .explanation-panel.is-phone-sheet.is-collapsed {
    max-height: calc(var(--explanation-sheet-bar-h) + var(--safe-area-bottom));
    min-height: calc(var(--explanation-sheet-bar-h) + var(--safe-area-bottom));
    --explanation-header-height: var(--explanation-sheet-bar-h);
}

/* 抓手 36×4、圆角 2、距顶 8(§9.1);它与头部一起当拖把手,故不吃页面滚动 */
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-sheet-handle {
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--dl-line-pop);
    touch-action: none;
}

.explanation-sheet-handle {
    display: none;
}

/* 条上没有抓手:一条 56 的残留物不需要再提示「可以拖」 */
body.reader-mobile .explanation-panel.is-phone-sheet.is-collapsed .explanation-sheet-handle {
    display: none;
}

/* 头:48 高、左 20 右 8;展开态不出折叠钮(要收起用拖的或点「原文依据」) */
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-header {
    height: var(--explanation-header-height);
    padding: 0 8px 0 20px;
    border-bottom: 0;
    touch-action: none;
}

body.reader-mobile .explanation-panel.is-phone-sheet .explanation-collapse {
    display: none;
}

/* 48 的钮再铺一层 --dl-hover 的面,就成了这条眉上最重的东西;
   与手机上既有的 .sip-close-btn(subjective-phone.css)对齐:静止透明、按下才着色 */
body.reader-mobile .explanation-panel.is-phone-sheet :is(.explanation-close, .explanation-collapse) {
    background: transparent;
    border-radius: 10px;
}

body.reader-mobile .explanation-panel.is-phone-sheet :is(.explanation-close, .explanation-collapse):active {
    background: var(--dl-pressed);
}

/* 条上两钮都在右边(§9.3):DOM 里折叠钮排在眉之前(桌面浮卡的读序),
   用 order 把它挪到眉之后,不动结构 */
body.reader-mobile .explanation-panel.is-phone-sheet.is-collapsed .explanation-collapse {
    display: inline-flex;
    order: 1;
    margin-left: auto;
}

body.reader-mobile .explanation-panel.is-phone-sheet.is-collapsed .explanation-close {
    order: 2;
    margin-left: 0;
}

/* 残留条上的「∧」指向展开的方向;桌面那条 rotate(180deg) 是浮卡在题上方时的语义 */
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-collapse.is-collapsed svg {
    transform: none;
}

/* 眉:题号 14/600 ink,其余 14/500 ink-2(§9.1);条上只留「{题号} · 解析」 */
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-eyebrow {
    font-size: 14px;
    font-weight: 500;
}

body.reader-mobile .explanation-panel.is-phone-sheet .explanation-eyebrow-index {
    font-size: 14px;
    font-weight: 600;
}

body.reader-mobile .explanation-panel.is-phone-sheet.is-collapsed .explanation-eyebrow-nature {
    display: none;
}

/* 体:上下 4/8、左右 20;正文 16/1.6 */
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-body {
    padding: 4px 0 8px;
}

body.reader-mobile .explanation-panel.is-phone-sheet .explanation-content,
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-detail-section,
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-footer {
    padding-left: 20px;
    padding-right: 20px;
}

body.reader-mobile .explanation-panel.is-phone-sheet .explanation-text,
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-detail-text {
    font-size: var(--explanation-body-size);
    line-height: 1.6;
}

/* 动作行:48 高、左右 12;两枚动作各自 ≥44 高(§9.1)。
   抽屉封顶 60dvh,长解析会把这一行推出可视区(实测底边 854 > 844,只露半行)——
   它是常驻动作不是文末附注,sticky 钉在滚动区底边。桌面浮卡按内容长高,没有这个问题。 */
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-wrap: wrap;
    min-height: 48px;
    padding: 0 12px;
    background: var(--dl-surface);
    border-top: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
}

body.reader-mobile .explanation-panel.is-phone-sheet .explanation-evidence-action,
body.reader-mobile .explanation-panel.is-phone-sheet .explanation-detail-toggle {
    min-height: 44px;
    font-size: var(--explanation-meta-size);
}

/* 触控命中 48×48(§9.1):视觉尺寸不变,靠 ::before 扩区。
   html[data-device] 那组同名规则在手机上给的是 metrics 推导值,这里按抽屉定值覆盖。 */
body.reader-mobile .explanation-panel.is-phone-sheet :is(
    .explanation-close,
    .explanation-collapse,
    .explanation-detail-toggle,
    .explanation-evidence-action,
    .explanation-retry-btn
)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--explanation-hit-target);
    height: var(--explanation-hit-target);
    transform: translate(-50%, -50%);
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    body.reader-mobile .explanation-panel.is-phone-sheet {
        transition: opacity 1ms linear !important;
        transform: none !important;
        opacity: 0;
    }

    body.reader-mobile .explanation-panel.is-phone-sheet.is-visible {
        opacity: 1;
    }
}