/* L4 灰带面板样式（T04）。配套 js/text-verdict.js。
 *
 * 【颜色纪律】⛔ 本文件不出现朱砂前景色那个 token（--danger）：红色在本产品里等于删除/封禁/支付失败，
 * 而大半章节会命中短板，红色常量一旦常见，作者就学会无视整块面板（PRD 3.8）。
 * 唯一的例外是轨道越界段的**底纹**用 var(--danger-dim) —— 8px 宽的一条淡底，
 * 不构成告警语汇（PRD 3.1 与 3.8 的冲突靠「底色 / 前景色」分工解决）。
 * ⛔ 全文件零硬编码色值（十六进制、带透明度的函数式写法都不行）：颜色只有 var(--token) 一个来源。
 *
 * 【三段轨道】三个绝对定位的 <i> 加一条 2px 竖条。几何由 JS 算成百分比，
 * 这里只负责「怎么画」，不参与任何数值判断。同款做法见 css/fanfic.css 的 .mo-bar。
 */

.tv-box{margin-top:12px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:12.5px;line-height:1.7;color:var(--fg)}
.tv-head{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.tv-title{font-size:13px;font-weight:700;color:var(--fg)}
.tv-ver{margin-left:auto;font-size:11.5px;color:var(--meta)}
.tv-meta{font-size:12px;color:var(--muted)}
.tv-concl{margin-top:4px;font-size:12.5px;color:var(--fg)}
.tv-skip{font-size:12px;color:var(--muted)}
.tv-note{font-size:11.5px;color:var(--meta);padding-left:2px}
.tv-out{color:var(--meta);font-family:var(--font-mono)}
.tv-advice{margin:2px 0 4px;padding:4px 8px;background:var(--warn-dim);border-left:2px solid var(--warn);
  border-radius:var(--radius-sm);font-size:12px;color:var(--fg)}
.tv-err{display:flex;align-items:center;gap:6px;color:var(--warn);font-size:12.5px}

/* ===== 结构指标行：名称 / 读数 / 轨道 / 徽标 ===== */
.tv-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.tv-name{flex:none;width:88px;color:var(--fg)}
.tv-val{flex:none;width:56px;text-align:right;font-family:var(--font-mono);font-size:12.5px;color:var(--fg)}

/* ===== 三段轨道（8px 高，1px 外框，圆角 sm）===== */
.tv-track{position:relative;flex:1;height:8px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden}
.tv-track.is-dim{opacity:.45}
.tv-seg{position:absolute;top:0;bottom:0;display:block}
.tv-over{background:var(--danger-dim)}
.tv-gray{background:var(--warn-dim)}
.tv-ok{background:var(--surface-2)}
.tv-cur{position:absolute;top:-2px;bottom:-2px;width:2px;margin-left:-1px;display:block;background:var(--fg)}
.tv-track.is-over .tv-cur{background:var(--warn)}

/* ===== 状态徽标：必须带文字，不靠颜色单独传达（PRD 3.8）===== */
.tv-badge{flex:none;padding:0 6px;font-size:11.5px;line-height:1.6;color:var(--meta);
  border:1px solid var(--border);border-radius:var(--radius-sm);white-space:nowrap}
.tv-badge.is-over{color:var(--warn);border-color:var(--warn);background:var(--warn-dim)}
.tv-badge.is-gray{color:var(--meta);border-color:var(--warn-dim);background:var(--warn-dim)}
.tv-badge.is-ok{color:var(--muted)}
.tv-badge.is-unknown{color:var(--meta);border-style:dashed}

/* ===== 自动改写状态行 ===== */
.tv-dec{display:flex;align-items:flex-start;gap:6px;margin-top:10px;padding-top:8px;
  border-top:1px solid var(--border);font-size:12.5px;color:var(--fg)}
.tv-dec.is-done{color:var(--fg)}
.tv-dec .ti{flex:none;margin-top:2px;color:var(--muted)}
.tv-dec.is-done .ti{color:var(--warn)}

/* ===== 折叠区（风格提示 / 技术详情）===== */
.tv-fold{margin-top:8px;border-top:1px solid var(--border);padding-top:6px}
.tv-fold>summary{cursor:pointer;font-size:12.5px;color:var(--fg);list-style:none}
.tv-fold>summary::-webkit-details-marker{display:none}
.tv-fold>summary::before{content:'▸';display:inline-block;width:12px;color:var(--meta)}
.tv-fold[open]>summary::before{content:'▾'}
.tv-fold-body{padding:4px 0 0 12px;font-size:12px;color:var(--muted)}
.tv-style-row{display:flex;align-items:center;gap:8px;padding:2px 0}
.tv-style-name{flex:none;width:72px;color:var(--fg)}
.tv-style-note{color:var(--muted)}
.tv-style-tip{color:var(--meta);font-size:11.5px}
.tv-m8{margin-top:6px;font-size:11.5px;color:var(--meta)}
.tv-mono{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);word-break:break-all}

/* ===== 章末钩子：一句结论，不折叠 =====
 * 三档只调「左边那条竖线 + 底色」，不调前景色：ok / flat / unclear 的语气差别
 * 靠文案承载，颜色在这里只做视觉分级（PRD 3.8：不靠颜色单独传达信息）。
 * ⛔ 仍然不许用朱砂前景色那个 token：结尾偏平收不是错误，是提示。 */
.tv-hook{display:flex;align-items:baseline;gap:6px;margin-top:6px;padding:4px 8px;
  background:var(--surface-2);border-left:2px solid var(--muted);
  border-radius:var(--radius-sm);font-size:12px;color:var(--fg)}
.tv-hook b{flex:none;font-weight:700}
.tv-hook span{color:var(--muted)}
.tv-hook-flat{background:var(--warn-dim);border-left-color:var(--warn)}
.tv-hook-unclear{border-left-style:dashed;border-left-color:var(--border);color:var(--meta)}
.tv-hook-unclear span{color:var(--meta)}

/* ===== 疑似错别字：折叠区，每行「段落 · 错→对 · 次数」===== */
.tv-typo-row{display:flex;align-items:baseline;gap:8px;padding:2px 0}
.tv-typo-para{flex:none;width:56px;color:var(--meta)}
.tv-typo-word{flex:1;color:var(--fg)}
.tv-typo-n{flex:none;font-family:var(--font-mono);font-size:11.5px;color:var(--meta)}

/* ===== 过期提示（正文改动后插在最上方，不自动重算）===== */
.tv-dirty{display:flex;align-items:center;gap:6px;margin:-10px -12px 8px;padding:6px 12px;
  background:var(--warn-dim);border-bottom:1px solid var(--border);font-size:11.5px;color:var(--muted)}
.tv-dirty .ti{color:var(--warn)}

/* ===== 脚注（PRD 5.1 逐字，11.5px / --meta）===== */
.tv-foot{margin-top:8px;font-size:11.5px;color:var(--meta);line-height:1.6}

@media(max-width:640px){
  .tv-name{width:72px}
  .tv-val{width:48px}
  .tv-row{flex-wrap:wrap}
  .tv-track{order:5;flex:1 0 100%}
}