/* ============================================================
   ForgeRank AI — 文章内嵌数据图表（纯 DOM/CSS 渲染，零位图依赖）
   ------------------------------------------------------------
   使用方（2 篇 editorial 手写页，页面 <link> 直接引入本文件）：
     · /blog/ai-content-quality-data        —— .viz-dist / .viz-scale
     · /blog/ai-content-quality-checker     —— .viz-scale / .viz-dist.is-compact

   设计原则（与全站审计口径一致）：
     ① 零位图：图表由 DOM + CSS 渲染 → 任意 DPI 清晰、可选中可搜索、无外链请求。
        （社交卡 og:image 仍需位图，属另一条链路，与本文件无关。）
     ② 颜色只用 tokens.css 的 var(--x) → 深浅色主题自动翻转，禁止写死颜色。
     ③ 数值即真相：柱高 = 值 × --viz-k（同图内 k 一致 → 比例严格等比）；
        区间一律用**紧凑 en dash**（5.0–6.9），与 lint 的数字区间豁免口径一致。
     ④ 响应式：列宽全部 fr 单位，<=560px 缩字缩柱，永不横向滚动。
     ⑤ 无障碍：figure[role="img"] + aria-label 承载完整数据（读屏可读），
        装饰层 aria-hidden；正文表格仍保留精确数值（图表不是唯一信息源）。
   ============================================================ */

/* ── 0. 图表外框 ───────────────────────────────────────────── */
figure.viz { margin: 22px 0; padding: 20px 20px 16px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: var(--shadow-sm) }
figure.viz * { box-sizing: border-box }
.viz-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-bottom: 16px }
.viz-title { font-size: .9rem; font-weight: 800; color: var(--text); letter-spacing: .01em }
.viz-sub { font-size: .68rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .07em }
.viz-cap { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .76rem; line-height: 1.55; color: var(--muted) }
.viz-cap b { color: var(--text); font-weight: 800 }

/* ── 1. 分档柱状图 .viz-dist（x = 分数档，y = 篇数）──────────── */
/* 7 列：4.0 / 4.8 / 空档 5.0–6.9 / 7.0 / 7.2 / 7.8 / 8.5
   第 3 列刻意加宽（1.55fr）→ 视觉上就是"中间是空的"这件事本身。 */
.viz-dist { --viz-h: 190px; --viz-k: 8.5%; display: grid; grid-template-columns: 1fr 1fr 1.55fr 1fr 1fr 1fr 1fr; grid-template-rows: auto var(--viz-h) auto; column-gap: 0; align-items: end }
.viz-dist > .viz-head, .viz-dist > .viz-cap { grid-column: 1 / -1 }
.viz-dist.is-compact { --viz-h: 150px }
.viz-cell { position: relative; height: 100%; padding: 0 6px }
.viz-val { position: absolute; bottom: calc(var(--n) * var(--viz-k) + 6px); left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 800; line-height: 1; color: var(--text); white-space: nowrap }
.viz-bar { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: clamp(16px, 66%, 44px); height: calc(var(--n) * var(--viz-k)); min-height: 5px; border-radius: 8px 8px 4px 4px }
.viz-cell.is-floor .viz-bar { background: linear-gradient(180deg, var(--red), color-mix(in srgb, var(--red) 20%, transparent)) }
.viz-cell.is-mid .viz-bar { background: linear-gradient(180deg, var(--purple), color-mix(in srgb, var(--purple) 20%, transparent)) }
.viz-cell.is-top .viz-bar { background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 20%, transparent)) }
/* 空档列：虚线框 + 斜纹底 + 大号 0 —— 全图唯一的"空" */
.viz-gap { position: relative; height: 100%; border: 1px dashed var(--border-light); border-radius: 11px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--muted) 9%, transparent) 0 5px, transparent 5px 11px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px }
.viz-gap-zero { font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--muted) }
.viz-gap-l { font-size: .6rem; font-weight: 800; line-height: 1.25; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: center; overflow-wrap: anywhere }
/* x 轴刻度行：单元格各自带上边线 → 拼成一条连续基线 */
.viz-x { border-top: 1px solid var(--border); padding: 9px 2px 0; text-align: center; font-size: .7rem; font-weight: 800; color: var(--muted); line-height: 1.25; overflow-wrap: anywhere }
.viz-x.is-gap { color: var(--text) }

/* ── 2. 量尺图 .viz-scale（横向 0–10 量尺 + 达标线 8.5）──────── */
.viz-scale-body { position: relative }
.viz-rows { position: relative; padding-top: 18px }
.viz-row { padding: 0 0 14px }
.viz-row:last-child { padding-bottom: 0 }
.viz-row-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px }
.viz-row-t { font-size: .8rem; font-weight: 800; color: var(--text) }
.viz-delta { font-size: .76rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap }
.viz-delta.is-flat { color: var(--muted); background: var(--chip-bg); border: 1px solid var(--border) }
.viz-delta.is-up { color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-border) }
.viz-track { position: relative; height: 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border) }
.viz-fill { position: absolute; top: -1px; bottom: -1px; left: -1px; width: calc(var(--v) * 1% + 1px); border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--purple) 40%, transparent), var(--purple)) }
.viz-fill.is-gold { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 40%, transparent), var(--gold)) }
.viz-fill.is-red { background: linear-gradient(90deg, color-mix(in srgb, var(--red) 40%, transparent), var(--red)) }
.viz-seg { position: absolute; top: -1px; bottom: -1px; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); border-radius: 999px }
.viz-seg.is-up { background: linear-gradient(90deg, var(--purple), var(--gold)) }
.viz-seg.is-flat { background: var(--purple) }
.viz-dot { position: absolute; top: 50%; left: calc(var(--p) * 1%); width: 10px; height: 10px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--panel); border: 2px solid var(--purple) }
.viz-dot.is-end { border-color: var(--gold) }
.viz-row-ft { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; font-size: .76rem; color: var(--muted) }
.viz-row-ft b { color: var(--text); font-weight: 800 }
.viz-note { font-size: .72rem; color: var(--muted) }
/* 达标线（8.5）贯穿所有量尺行 */
.viz-pass { position: absolute; top: 0; bottom: -4px; left: calc(var(--pass, 80) * 1%); border-left: 1px dashed var(--gold); opacity: .75 }
.viz-pass-l { position: absolute; top: -3px; left: 50%; transform: translate(-50%, -100%); font-size: .62rem; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; padding: 0 4px; background: var(--panel); border-radius: 4px }
/* x 轴：刻度按数值绝对定位 → 与柱/段严格对齐 */
.viz-axis { position: relative; height: 18px; margin-top: 12px; border-top: 1px solid var(--border) }
.viz-axis i { position: absolute; top: 6px; left: calc(var(--p) * 1%); transform: translateX(-50%); font-style: normal; font-size: .68rem; font-weight: 800; color: var(--muted) }
.viz-axis i.is-pass { color: var(--gold) }

/* ── 3. 移动端 ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  figure.viz { padding: 16px 14px 12px; border-radius: 14px }
  .viz-dist { --viz-h: 158px }
  .viz-dist.is-compact { --viz-h: 126px }
  .viz-gap-zero { font-size: 1.2rem }
  .viz-gap-l { font-size: .55rem }
  .viz-x { font-size: .62rem; padding-top: 7px }
  .viz-axis i { font-size: .6rem }
  .viz-pass-l { font-size: .56rem }
}
@media (max-width: 420px) {
  .viz-bar { width: clamp(12px, 60%, 30px) }
  .viz-x { font-size: .56rem }
}