/* =========================================================================
   note-visuals.css - the drawn visuals that live INSIDE note bodies.

   Some notes carry hand-built diagrams and bar charts (.ic-* and .sv-*), each
   with its own small IntersectionObserver script in the page. Those rules used
   to sit in /blog/style.css, the old blog's whole stylesheet, which the new
   note pages do not load. Rather than drag 44KB of retired page styles along
   for 2KB of diagrams, the diagram rules are lifted here on their own.

   Scopes that read .post-body are rewritten to .note-body, the new body class.
   Nothing else was changed. Generated once from public/blog/style.css on
   2026-09-03; if a new note needs a visual, style it here.
   ========================================================================= */

.note-body .post-fig{margin:40px 0}
.note-body .post-fig img{margin:0 auto}
.note-body .post-fig figcaption{margin-top:14px;font-size:13px;line-height:1.5;color:#8A857A;text-align:center;font-family:'Geist Mono',monospace}
/* ============ Signal Visualization (in-content) ============ */
.signal-vis{margin:48px 0;padding:32px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.sv-header{margin-bottom:28px}
.sv-eyebrow{display:block;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.sv-cols-head{display:grid;grid-template-columns:100px 1fr;gap:16px;padding-left:100px}
.sv-col-label{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)}
.sv-col-label.active{color:var(--accent)}
.sv-rows{display:flex;flex-direction:column;gap:18px}
.sv-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:16px}
.sv-name{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim)}
.sv-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sv-bar-wrap{display:flex;align-items:center;gap:10px}
.sv-bar{flex:1;height:5px;background:rgba(237,232,222,0.07);border-radius:3px;overflow:hidden;position:relative}
.sv-fill{position:absolute;inset-block:0;left:0;width:0;border-radius:3px;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.sv-bar.passive .sv-fill{background:rgba(237,232,222,0.2)}
.sv-bar.active .sv-fill{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.sv-val{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.06em;white-space:nowrap}
.sv-val.passive{color:var(--ink-mute)}
.sv-val.active{color:var(--accent)}
.sv-row{grid-template-columns:72px 1fr}
.sv-cols-head{padding-left:72px}
.sv-pair{grid-template-columns:1fr}
.sv-cols-head .active{display:none}