/* 词义弹窗 — 统一设计语言 §4.2 落地(2026-08-30 · A-28 趟 2,按 F-13~F-16、F-19 重做)
 *
 * 真相源:docs/DESIGN_LANGUAGE_2026_08_29.md §4.2;实物对照 docs/design_demo/02-translation-popovers.html
 * (数值逐条搬自 docs/design_demo/demo.css §5,不自创)。
 * 材质与公共件(.dl-float / .dl-mat-edge / .dl-sep / .dl-iconbtn / .dl-ico)来自
 * static/css/components/context-menu.css —— 该文件必须先于本文件引入。
 *
 * 结构(templates/viewer.html 写死 id,JS 只填内容):
 *   #word-tooltip.dl-wordpop
 *     .dl-wordpop__head   词头行 36:词头(UI 无衬线 17/24 600)+ 弹性空隙 + 收藏星钮 28
 *     #tooltip-sub        注脚行:音标(12/16 常规,可点发音)+ 变体说明「{lemma} 的{variant_hint}」
 *     #tooltip-senses     义项区:当前义项(14/20 600 ink)/ 其余义项(14/20 400 ink-2)/ 展开行 / 状态行
 *     .dl-sep
 *     #tooltip-watson-btn 动作行 ×1「18 迷你华生 + 问华生」(ghost 钮,行高 32;§1.8)
 *
 * 相对旧版的减法:去箭头、去毛玻璃、去描边、去关闭钮 / 发音钮 / 移除标记钮、去词频行、
 * 去词性前缀列、去内容区滚动;字号不随页面缩放(§8-4);
 * 「整句翻译」按 F-14 从桌面端弹窗删除(改由右键菜单首项触发)。
 *
 * 2026-09-03 批 B(§3.12 / §6.10 / §6.14b-c):词头改 UI 无衬线 17/24;两级义项统一 14/20、
 * 只靠字重与明度分主次(「此处」角标删);默认 3 行 + 「还有 N 条 ▾」;动作行改 ghost 钮;
 * 宽度由固定 260 改回内容自适应 240–320。
 */

.word-tooltip {
    /* PIN:面板挂 #pdf-viewer(position: relative)内,absolute 让它随内容一起滚动/缩放,
       相对词框零滞后(2026-08-30 撤销 .dl-float 的 fixed;本文件在 context-menu.css 之后引入,
       同特异度后来居上)。退回 body 的兜底路径由 JS 内联改回 fixed。 */
    position: absolute;
    /* §6.10 宽 clamp(240, 内容, 320):短释义不再撑出一整条空白,长释义也不挤成两行。
       clamp() 里放不下 max-content 关键字,等价写法 = min/max-width 夹住 width: max-content */
    width: max-content;
    min-width: 240px;
    max-width: 320px;
    padding: var(--dl-pad-panel);
    z-index: var(--dl-z-word-tooltip);
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    color: var(--dl-ink);
    /* §4.2:不设最大高度、不滚动 —— 最坏收起态 264,展开 max 13 条 ≈540 仍在视口内 */
}

/* === 词头行(36 = 28 星钮 + 上下 4)=== */
.dl-wordpop__head {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 var(--dl-sp-12);
}

.dl-wordpop__word {
    /* §3.12:词头不再用衬线 —— 弹窗是 UI,衬线词头 + 无衬线释义是同一块面里的两套字 */
    font-family: var(--dl-font);
    font-size: 17px;
    line-height: 24px;
    font-weight: var(--dl-fw-headword);
    color: var(--dl-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dl-wordpop__spacer {
    flex: 1;
    min-width: var(--dl-sp-8);
}

/* 收藏钮:静止线性星,收藏后实心 --dl-ink(§4.2 词头行) */
#tooltip-bookmark-btn .dl-ico {
    fill: none;
}

#tooltip-bookmark-btn.collected {
    color: var(--dl-ink);
}

#tooltip-bookmark-btn.collected .dl-ico {
    fill: currentColor;
}

/* 未登录的临时收藏:形态介于两者之间 —— 墨色到位、星仍是线性 */
#tooltip-bookmark-btn.temp-bookmarked {
    color: var(--dl-ink-2);
}

/* === 注脚行:音标 + 变体说明,允许折行(段间 8、行高 16)=== */
.dl-wordpop__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--dl-sp-8);
    row-gap: 2px;
    padding: 0 var(--dl-sp-12);
    margin-top: 2px;
}

.dl-wordpop__ipa {
    border: 0;
    padding: 0;
    background: transparent;
    /* IPA 符号留在衬线族(覆盖最全);§3.12 只改号数与色阶:12/16、常规、不斜体 */
    font-family: var(--dl-font-serif);
    font-style: normal;
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
    color: var(--dl-ink-3);          /* 不再用蓝(§2.2:蓝只留给选中与下一步) */
    cursor: pointer;
}

.dl-wordpop__ipa:hover {
    color: var(--dl-ink);
    text-decoration: underline;
}

/* 不可发音的词不装成可点 */
.dl-wordpop__ipa:not(.has-audio) {
    cursor: default;
}

.dl-wordpop__ipa:not(.has-audio):hover {
    color: var(--dl-ink-3);
    text-decoration: none;
}

.dl-wordpop__variant {
    font-size: var(--dl-fs-caption);
    line-height: 16px;
    color: var(--dl-ink-3);
}

.dl-wordpop__variant:empty {
    display: none;
}

/* === 当前义项(sense_top 那条):与其余义项同为 14/20,只靠 600 字重 + 满墨拉开(N-04)=== */
.dl-wordpop__main {
    display: flex;
    align-items: baseline;
    gap: var(--dl-sp-8);
    padding: 2px var(--dl-sp-12);
    margin-top: var(--dl-sp-8);      /* 音标行下 8(§6.10 竖向节奏) */
}

.dl-wordpop__main-text {
    flex: 1;
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    font-weight: var(--dl-fw-headword);
    color: var(--dl-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;             /* §6:释义 ≤12 汉字,机检已保证不溢出 */
}

/* === 短语弹窗里点名被点词的小标签(P-07):12/16 ink-3,与注脚行同一档 === */
.dl-wordpop__owner {
    font-size: var(--dl-fs-caption, 12px);
    line-height: var(--dl-lh-caption, 16px);
    color: var(--dl-ink-3);
    margin: 4px 0 2px;
    padding: 0 var(--dl-sp-12, 12px);
}

/* === 其余义项:14/20 400 ink-2;词性后置且仅当 ≠ 主答案词性;左沿与当前义项同线 === */
.dl-wordpop__senses {
    margin-top: 0;
}

/* 行高 20 + 上下各 2 = 一行 24(§3.12 竖向节奏) */
.dl-sense {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px var(--dl-sp-12);
}

.dl-sense__text {
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    font-weight: 400;
    color: var(--dl-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.dl-sense__pos {
    font-size: var(--dl-fs-caption);
    line-height: var(--dl-lh-caption);
    font-style: normal;              /* 现斜体废止(§6) */
    color: var(--dl-ink-3);
}

/* === 展开行:其余义 >2 条才出现(总共 3 行封顶);点击原位展开 / 收起、不记忆 === */
.dl-wordpop__more {
    display: flex;
    align-items: center;
    gap: var(--dl-sp-4);
    width: 100%;
    height: 28px;
    margin-top: 2px;
    padding: 0 var(--dl-sp-12);
    border: 0;
    background: transparent;
    border-radius: var(--dl-r-item);
    color: var(--dl-ink-3);
    font-family: inherit;
    font-size: var(--dl-fs-caption);
    cursor: pointer;
    transition: none;
}

.dl-wordpop__more:hover {
    background: var(--dl-hover);
    color: var(--dl-ink-2);
}

.dl-wordpop__more:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* === 动作行 ×1「问华生」(§3.12 / §1.8):ghost 钮 —— 不铺满整行,行高仍是 32。
   margin-left 4 + 内边距 8 让内容左沿落在 12,与义项行同一竖线;§1.8 起这里带一枚
   18 的迷你华生头像,落在那条 12 竖线上,文字被推到 40(排布归 watson-panel.css 的
   .dl-ask-watson,这一层只管按钮的表面与高)。 === */
.dl-wordpop__act {
    display: inline-flex;
    align-items: center;
    height: var(--dl-row);
    margin-left: var(--dl-sp-4);
    padding: 0 var(--dl-sp-8);
    border: 0;
    background: transparent;
    border-radius: 4px;
    color: var(--dl-ink-2);
    font-family: inherit;
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    text-align: left;
    cursor: default;
    transition: none;
}

.dl-wordpop__act:hover {
    background: var(--dl-hover);
}

.dl-wordpop__act:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* 加载中:占当前义项行的位置,不改变面板节奏(§4.2 状态) */
.dl-wordpop__state {
    min-height: 28px;
    padding: 0 var(--dl-sp-12);
    margin-top: var(--dl-sp-8);
    display: flex;
    align-items: center;
    color: var(--dl-ink-3);
}

/* 暂无释义(T-4 终态):与义项行同号同缩进,只是灰一档 —— 空结果也是结果,不做成错误块 */
.dl-wordpop__empty {
    padding: 4px var(--dl-sp-12);
    margin-top: var(--dl-sp-8);
    font-size: var(--dl-fs-body);
    line-height: var(--dl-lh-body);
    color: var(--dl-ink-3);
}

/* 分隔线在弹窗里收到上下各 6(§6.10 竖向节奏);左右仍留 Edge 材质的 1px 内缩 */
.word-tooltip .dl-sep {
    margin: 6px 1px;
}

/* ============================================================
   手机形制(MOBILE_WEB_READER_DESIGN §8)
   ------------------------------------------------------------
   形态不变(还是贴词的白卡:眼睛在词上,卡就该在词旁),只补手机约束:
   窄屏夹宽、义项区限高可滚、命中区 48。挂载与选边在 vocabulary-tooltip.js。
   作用域 body.reader-mobile —— 桌面位图态一行不生效。
   ============================================================ */

body.reader-mobile .word-tooltip {
    max-width: min(320px, calc(100vw - 32px));
}

/* 义项区限高 40dvh:长词条(13 条义项)在 844 高的屏上会顶到天花板;
   卡不滚整块,只滚义项区 —— 词头、音标、「问华生」始终在。 */
body.reader-mobile .word-tooltip .dl-wordpop__body {
    max-height: 40dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 弹窗里这三枚都吃到了全站 `@media (pointer: coarse) button { min-height/min-width: 48px }`
   (style.css §触屏最小触摸目标),盒子被顶成 48 —— 词头 36、义项 24,只有它们 48,
   不是同一套节奏,正是手机上看着空荡的那一处。它们仨自己写的是 `height`(音标 16、
   星钮 28 = --dl-ctl-sm、动作钮 --dl-row),而 min-height 与 height 不比特异性、恒压一头,
   所以类名写多具体都拦不住,只能把 min 值显式归零。
   命中区不受影响:下面那条 ::before 透明扩区已经把三枚都补到 48(全站既有做法,
   见 style.css 2026-09-16 走查那一段)。
   实测(390,pointer:coarse):星钮 computed min-height 48 / height 28,落在 height:36 的
   词头行里上下各溢出 6px;归零后盒子回到 28。 */
body.reader-mobile .word-tooltip :is(#tooltip-bookmark-btn, .dl-wordpop__act, .dl-wordpop__ipa) {
    min-height: 0;
    min-width: 0;
}

/* 手机端「问华生」整行可点（用户 2026-09-18 点名）：
   桌面它是 `inline-flex` + 左边距，只有「问华生」那三个字宽的一小块能点中；
   手机上手指比光标粗得多，逐字瞄准是实打实的操作负担。这里把它撑满整行，
   视觉不变（背景透明、文字仍靠左），变的只是可点范围。
   `margin-left` 归零否则左侧那一截仍然点不到；`justify-content: flex-start`
   保证撑满后图标与文字仍贴左，不会被 `inline-flex` 的居中默认值推到中间。
   失败态（「查询失败，点击重试」）同属这一行，一起受益。 */
body.reader-mobile .word-tooltip .dl-wordpop__act {
    display: flex;
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
}

/* 触控命中 48×48(§8):视觉尺寸不变,靠 ::before 扩区 */
body.reader-mobile .word-tooltip :is(#tooltip-bookmark-btn, .dl-wordpop__act, .dl-wordpop__ipa) {
    position: relative;
}

body.reader-mobile .word-tooltip :is(#tooltip-bookmark-btn, .dl-wordpop__act, .dl-wordpop__ipa)::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    min-width: 100%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
}

/* ============================================================
   手机底部 sheet(D-1,docs/MOBILE_WEB_AUDIT_2026_09_17.md §2)
   ------------------------------------------------------------
   ≤480:贴词白卡改底部 sheet。位置恒定、不随点中的词跳来跳去(「弹窗位置可预测
   优先于不出纸」的上限),且满宽后释义、词形都有地方排,不必再靠压字号求生。
   481–768 仍是上面那段贴词卡;桌面(≥769)一行不生效。

   判据与 vocabulary-tooltip.js 的 isPhoneSheetMode() **成对**:JS 只写
   data-mode="sheet",几何全在这里;改一处必须改另一处。

   形制照解析抽屉(explanation-panel.css §9「手机底部抽屉」)对齐:顶圆角、
   60dvh 封顶、安全区内缩、200ms --dl-ease-out 滑入滑出 —— 不新造曲线,
   不加拖拽把手 / 多档吸附 / 背景虚化。
   ============================================================ */
@media (max-width: 480px) {
    body.reader-mobile .word-tooltip[data-mode="sheet"] {
        position: fixed;
        /* 贴边满宽,与句译 sheet、解析抽屉齐平(2026-09-17 主会话裁决,取代 D-1 原写的
           「满宽减 12px」):同一页三个底部面板必须是同一个形制,且满宽贴边就是原生底部
           面板的标准形态。代价是 Edge 材质的发丝描边在屏边看不见 —— 那属于「被看出来的
           精巧」,不值得为它让整组形制分裂。 */
        left: 0;
        right: 0;
        top: auto;
        /* 解析抽屉收成的残留条占着屏底时,sheet 落在它上面 —— 卡压在条上等于两层叠着 */
        bottom: var(--dl-wordsheet-bottom, 0px);
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: 60vh;
        max-height: 60dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: calc(var(--dl-pad-panel) + var(--safe-area-bottom));
        border-radius: var(--overlay-radius-sheet-top) var(--overlay-radius-sheet-top) 0 0;
        /* 退场要看得见:不跟 .dl-float 那样靠 opacity 瞬灭,靠 translateY 滑下去。
           .dl-float 的 pointer-events 仍按 .visible 走,退场途中点不到。 */
        opacity: 1;
        transform: translateY(100%);
        transition: transform var(--dl-t-panel) var(--dl-ease-out);
    }

    body.reader-mobile .word-tooltip[data-mode="sheet"].visible {
        transform: translateY(0);
    }

    /* 词头 / 注脚 / 分隔线 / 动作行不压缩,剩下的高度全归义项区 */
    body.reader-mobile .word-tooltip[data-mode="sheet"] > * {
        flex: 0 0 auto;
    }

    body.reader-mobile .word-tooltip[data-mode="sheet"] .dl-wordpop__body {
        flex: 1 1 auto;
        min-height: 0;
        /* 高度由 sheet 自己的 60dvh 管,不再叠贴词卡那层 40dvh */
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* 根变 flex 后 inline-flex 的动作钮会被拉满整行,按住左沿(与句译弹窗同法) */
    body.reader-mobile .word-tooltip[data-mode="sheet"] .dl-wordpop__act {
        align-self: flex-start;
    }

    /* 满宽后有地方排:长释义折行读完,不再按 320 宽的老规矩裁掉 */
    body.reader-mobile .word-tooltip[data-mode="sheet"] :is(.dl-wordpop__main-text, .dl-sense__text) {
        white-space: normal;
        overflow: visible;
    }
}