/* PAwR case study: figures (inline SVG, theme-aware through the site tokens). */
.pw-fig { margin: 1.6rem 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); padding: 1.1rem 1rem .9rem; }
.pw-fig .pw-scroll { overflow-x: auto; }
.pw-fig svg { width: 100%; min-width: 640px; height: auto; display: block; }
.pw-fig figcaption { margin-top: .7rem; font-size: .84rem; color: var(--text-faint); line-height: 1.5; }
.pw-fig figcaption b { color: var(--text-muted); font-weight: 600; }

.pw-fig text { font-family: var(--font-mono); }
.sv-t  { font-size: 13px; font-weight: 600; fill: var(--text); }
.sv-m  { font-size: 11px; fill: var(--text-muted); }
.sv-f  { font-size: 10px; fill: var(--text-faint); }
.sv-c  { text-anchor: middle; }
.sv-e  { text-anchor: end; }
.sv-box  { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.sv-boxa { fill: color-mix(in srgb, var(--c-cyan) 8%, var(--surface)); stroke: var(--c-cyan); stroke-width: 1.5; }
.sv-boxg { fill: color-mix(in srgb, var(--c-green) 8%, var(--surface)); stroke: var(--c-green); stroke-width: 1.5; }
.sv-boxm { fill: color-mix(in srgb, var(--c-magenta) 8%, var(--surface)); stroke: var(--c-magenta); stroke-width: 1.5; }
.sv-line { stroke: var(--text-faint); stroke-width: 1.5; fill: none; }
.sv-dash { stroke: var(--text-faint); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.sv-grid { stroke: var(--border-soft); stroke-width: 1; }
.sv-axis { stroke: var(--border); stroke-width: 1.5; }
.sv-ok   { fill: var(--c-green); }
.sv-bad  { fill: var(--c-red); }
.sv-cyan { fill: var(--c-cyan); }
.sv-mag  { fill: var(--c-magenta); }
.sv-amb-l { stroke: var(--c-amber); stroke-width: 1.5; stroke-dasharray: 5 3; }
.sv-amb  { fill: var(--c-amber); }
.sv-arrow { fill: var(--text-faint); }
.pw-fig g[data-tip]:hover rect, .pw-fig rect[data-tip]:hover { opacity: .8; }

/* Log excerpt */
.pw-log { background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; overflow-x: auto; margin: 1rem 0; }
.pw-log pre { margin: 0; font: .8rem/1.65 var(--font-mono); color: var(--code-text); white-space: pre; }
.pw-log .ok  { color: var(--c-green); }
.pw-log .bad { color: var(--c-red); }
.pw-log .dim { color: var(--text-faint); }

/* Numbered story steps */
.pw-steps { list-style: none; padding: 0; margin: 1.2rem 0; counter-reset: pw; display: grid; gap: .9rem; }
.pw-steps li { counter-increment: pw; position: relative; padding: 1rem 1.2rem 1rem 3.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); line-height: 1.6; font-size: .93rem; }
.pw-steps li::before { content: counter(pw); position: absolute; left: 1.1rem; top: 1rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 .78rem/1.4rem var(--font-mono); text-align: center; }
.pw-steps li strong { color: var(--text); }

.pw-note { font-size: .86rem; color: var(--text-faint); line-height: 1.6; }
.prose .r-table td.wrap { white-space: normal; min-width: 16rem; }
.prose .r-table td.num { text-align: right; }
.prose .r-table th.num { text-align: right; }