/* hhj-visuals.css - L65.31 shared visuals (2026-11-09, r174). Pairs with hhj-visuals.js. Same box as the L65.30 .eq-scn pictures.
   Every selector starts with figure.hv so the article's own ul / ol / p rules (padding, line-height) never reach inside.
   The three p rules pin size + line-height with !important: blog pages carry a desktop `.prose p{font-size:1.15rem !important}`. */
figure.hv{margin:20px 0 26px;padding:14px 14px 12px;border:1px solid var(--line2,rgba(163,212,242,.35));border-radius:12px;background:rgba(255,255,255,.02)}
figure.hv figcaption{font:600 13px/1.4 var(--sans,Arial,sans-serif);letter-spacing:.04em;text-transform:uppercase;color:#9aa79e;margin:0 0 12px;padding:0}
figure.hv ul.hv-rows{list-style:none;margin:0;padding:0}
figure.hv ul.hv-rows li{margin:0 0 14px;padding:0;font:15px/1.4 var(--sans,Arial,sans-serif);color:#c9d1cc;list-style:none}
figure.hv ul.hv-rows li::before,figure.hv ul.hv-rows li::marker{content:none}
figure.hv .hv-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
figure.hv .hv-n{color:var(--cream,#F7F5EE);font-weight:700;white-space:nowrap}
figure.hv .hv-key .hv-n{color:#A3D4F2}
figure.hv .hv-track{display:block;position:relative;height:14px;margin-top:6px;border-radius:7px;background:rgba(247,245,238,.08);overflow:hidden}
figure.hv .hv-fill,figure.hv .hv-band{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:7px;background:rgba(247,245,238,.35)}
figure.hv .hv-key .hv-fill,figure.hv .hv-key .hv-band{background:#A3D4F2}
figure.hv .hv-ovband{background:repeating-linear-gradient(135deg,#A3D4F2 0 6px,rgba(163,212,242,.45) 6px 12px)}
figure.hv p.hv-axis{display:flex;justify-content:space-between;min-height:18px;font:12px/1.5 var(--sans,Arial,sans-serif);font-size:12px!important;line-height:1.5!important;color:#9aa79e;margin:-6px 0 4px;padding:0}
figure.hv p.hv-out{font:15px/1.5 var(--sans,Arial,sans-serif);font-size:15px!important;line-height:1.5!important;color:#c9d1cc;margin:4px 0 0;padding:0}
figure.hv p.hv-out b{color:#A3D4F2}
figure.hv p.hv-note{font:13px/1.5 var(--sans,Arial,sans-serif);font-size:13px!important;line-height:1.5!important;color:#9aa79e;margin:8px 0 0;padding:0}
figure.hv ol.hv-steps{list-style:none;counter-reset:hvs;margin:0;padding:0}
figure.hv ol.hv-steps li{position:relative;counter-increment:hvs;margin:0;padding:0 0 14px 36px;font:15px/1.5 var(--sans,Arial,sans-serif);color:#c9d1cc;list-style:none}
figure.hv ol.hv-steps li::marker{content:none}
figure.hv ol.hv-steps li::before{content:counter(hvs);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#A3D4F2;color:#000;font:700 13px/24px var(--sans,Arial,sans-serif);text-align:center}
figure.hv ol.hv-steps li::after{content:"";position:absolute;left:11px;top:28px;bottom:4px;width:2px;background:rgba(163,212,242,.35)}
figure.hv ol.hv-steps li:last-child{padding-bottom:2px}
figure.hv ol.hv-steps li:last-child::after{display:none}
figure.hv ol.hv-steps b,figure.hv ol.hv-steps strong{color:var(--cream,#F7F5EE);font-weight:700}