/* 质检镜（#580）——把 `nlp.xray` 的逐句定级显影到页面上。
 *
 * **本文件的铁律：每一条显影规则都圈在 `body.lens` 下。**
 * 镜子关着时，详情页的长相必须与加这个功能之前逐字相同——这是它的存在前提：
 * 拨开才显影，不拨不打扰。谁往外挪一条选择器，谁就把这条前提废了。
 *
 * 颜色一律取 main.css 的既有 token（--green/--red/--gold），不新引色相；
 * 夜航模式跟着 token 自动翻面，本文件不写第二套 [data-theme] 规则。
 */

/* ===== 顶栏开关 ===== */
.lens-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px 6px 8px;
    color: var(--ink-2);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .25s, color .25s, box-shadow .25s;
}
.lens-toggle-btn:hover { border-color: var(--gold); }
.lens-toggle-btn .lens-switch {
    position: relative;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: var(--line);
    flex: none;
    transition: background .3s cubic-bezier(.22,1,.36,1);
}
.lens-toggle-btn .lens-switch::after {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 2.5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 1px 3px rgba(30,28,24,.3);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.lens-toggle-btn[aria-pressed="true"] {
    border-color: var(--gold);
    color: var(--gold-text);
    box-shadow: 0 0 0 3px var(--gold-wash);
}
.lens-toggle-btn[aria-pressed="true"] .lens-switch { background: var(--gold); }
.lens-toggle-btn[aria-pressed="true"] .lens-switch::after { transform: translateX(15px); }

/* ===== 全文体检条 ===== */
/* 默认整块收起：镜子关着时详情页不该多出一个区块 */
.lens-summary {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 var(--sp-4, 20px);
    border: 0 solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    transition: max-height .5s cubic-bezier(.22,1,.36,1), opacity .35s,
                padding .5s, margin .5s, border-width .5s;
}
body.lens .lens-summary {
    max-height: 400px;
    opacity: 1;
    margin: var(--sp-4, 20px) 0;
    padding: 18px var(--sp-4, 20px);
    border-width: 1px;
}
.lens-summary h4 { font-size: 14px; color: var(--ink-2); font-weight: 600; margin-bottom: 12px; }
.lens-summary h4 b { color: var(--ink); }

.lens-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--line-2);
}
.lens-bar span { display: block; transition: width .7s cubic-bezier(.22,1,.36,1); }
.lens-bar .lb-green { background: var(--green); }
.lens-bar .lb-gold  { background: var(--gold); }
.lens-bar .lb-red   { background: var(--red); }

.lens-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--ink-2);
}
.lens-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lens-legend b { color: var(--ink); }
.lens-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.lens-legend .li-green { background: var(--green); }
.lens-legend .li-gold  { background: var(--gold); }
.lens-legend .li-red   { background: var(--red); }
.lens-legend .li-plain { background: var(--line); }

.lens-note {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px dashed var(--line);
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ink-3);
}
.lens-note b { color: var(--ink-2); }

/* ===== 正文逐句显影（原创稿）===== */
/* 关着时这些 span 只是普通行内元素，不带任何视觉 */
.lens-sent {
    border-radius: 3px;
    transition: background .4s ease, box-shadow .4s ease;
}
body.lens .lens-sent.lv-green {
    background: var(--green-light);
    box-shadow: inset 0 -2px 0 0 var(--green);
}
body.lens .lens-sent.lv-gold { background: var(--gold-wash); }
body.lens .lens-sent.lv-red {
    background: var(--red-light);
    box-shadow: inset 0 0 0 1.5px var(--red);
    padding: 1px 4px;
}

/* 命中词：`highlight_terms` 产出的 <mark class="q-hit">，镜下才上色。
   q-hit 在 main.css 里本来就有样式（质量分面板在用），这里只在镜下加重。 */
body.lens .lens-body .lv-gold .q-hit,
body.lens .lens-quotes .lq-gold .q-hit {
    background: var(--gold);
    color: var(--on-gold);
    font-weight: 600;
}
body.lens .lens-body .lv-red .q-hit,
body.lens .lens-quotes .lq-red .q-hit {
    background: var(--red);
    color: var(--on-red);
    font-weight: 600;
}
body.lens .lens-body .lv-green .q-hit {
    background: none;
    color: var(--green);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 0 var(--green);
}

/* ===== 页边眉批 ===== */
/* 位置由 lens.js 量出来写在 style.top 上；容器窄时整个不出（见媒体查询） */
.lens-gutter {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 18px;
    width: 210px;
    height: 0;               /* 只作定位参照，不占布局 */
}
.lens-anno {
    position: absolute;
    left: 0;
    width: 100%;
    background: var(--card);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-2);
    opacity: 0;
    transform: translateX(10px);
    pointer-events: none;
    transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 4px 14px rgba(30,28,24,.06);
}
body.lens .lens-anno { opacity: 1; transform: none; }
.lens-anno.la-gold { border-left-color: var(--gold); }
.lens-anno.la-red  { border-left-color: var(--red); }
.lens-anno b { display: block; font-size: 11px; letter-spacing: .1em; margin-bottom: 3px; }
.lens-anno.la-gold b { color: var(--gold-text); }
.lens-anno.la-red  b { color: var(--red); }
.lens-anno::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 13px;
    width: 14px;
    height: 1px;
    background: var(--line);
}

/* ===== 镜下逐句（爬取稿的限量引用）===== */
.lens-quotes {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height .6s cubic-bezier(.22,1,.36,1), opacity .4s, margin .5s;
}
body.lens .lens-quotes {
    max-height: 1800px;
    opacity: 1;
    margin: var(--sp-4, 20px) 0;
}
.lens-quotes h4 {
    font-family: var(--font-serif);
    font-size: 17px;
    margin-bottom: 14px;
}
.lens-quotes .lq {
    border-left: 3px solid var(--line);
    padding: 2px 0 2px 14px;
    margin-bottom: 14px;
}
.lens-quotes .lq-gold { border-left-color: var(--gold); }
.lens-quotes .lq-red  { border-left-color: var(--red); }
.lens-quotes .lq p { font-size: 14.5px; line-height: 1.85; color: var(--ink); }
.lens-quotes .lq footer { margin-top: 5px; font-size: 12px; color: var(--ink-3); }

/* ===== 扫描光带 ===== */
.lens-scanner {
    position: absolute;
    /* 不做负向外扩：往外挤 12px 会在窄屏上顶出横向滚动条（390px 实测溢出 4px），
       而这道光带纯装饰，贴着正文宽度扫下来看不出差别。 */
    left: 0;
    right: 0;
    height: 110px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    background: linear-gradient(180deg,
        rgba(217,165,20,0) 0%, rgba(217,165,20,.12) 45%, rgba(217,165,20,.26) 50%,
        rgba(217,165,20,.12) 55%, rgba(217,165,20,0) 100%);
}
.lens-scanner::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--gold) 12%,
                var(--gold-bright) 50%, var(--gold) 88%, transparent);
    box-shadow: 0 0 14px rgba(217,165,20,.8);
}

/* 窄屏：眉批没地方放，收掉；正文着色和体检条照常。
   这道媒体查询只是粗闸——真正决定放不放得下的是正文右边到视口的实际余量，
   由 lens.js 量出来（.lens-gutter[hidden]）。两道一起用：CSS 挡住多数窄屏，
   JS 兜住「宽度够但布局把正文推到右边」这类算不出来的情况。 */
@media (max-width: 1180px) {
    .lens-gutter { display: none; }
}
/* [hidden] 压不过上面的 position/display 组合，得显式写一条（本仓库老坑，
   measure 页和病历页都栽过：属性选择器权重不足以覆盖类选择器的 display）。 */
.lens-gutter[hidden] { display: none; }

/* 减少动效：显影仍然发生（那是信息），但不做扫描与位移 */
@media (prefers-reduced-motion: reduce) {
    .lens-scanner { display: none; }
    .lens-sent, .lens-summary, .lens-quotes, .lens-anno,
    .lens-toggle-btn .lens-switch, .lens-toggle-btn .lens-switch::after { transition: none; }
    .lens-anno { transform: none; }
}