/* Blog autopilot figures: the few templates that the reading-aids stylesheet (visuals.css) does not
   already style. Autopilot articles load blog.css, then visuals.css (shared tokens, --rv-* colours, figures,
   diagrams, takeaways, casts, clips), then this file. Shared design tokens only, so every figure follows the
   System, Light and Dark themes. No remote assets, no inline styles. */

/* Comparison table: scrolls sideways inside its own focusable region on narrow screens. */
.rv-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm)}
.rv-table-wrap:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.blog .rv-table{display:table;width:100%;min-width:30rem;margin:0;border-collapse:collapse;font-size:.93rem}
.blog .rv-table th,.blog .rv-table td{border:1px solid var(--line-strong);padding:.55rem .65rem;vertical-align:top;min-width:7rem}
.blog .rv-table thead th{background:var(--brand-soft);color:var(--ink)}
.blog .rv-table tbody th{background:var(--surface-2)}

/* Character dialogue: the recurring fictional cast, alternating sides on wider screens. */
.rv-scene{margin:0 0 var(--space-3);font-size:.93rem;color:var(--ink-2);font-style:italic}
.rv-dialogue{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.rv-line{display:grid;gap:.4rem;margin:0}
.rv-speaker{display:flex;align-items:center;gap:.55rem;font-size:.88rem;line-height:1.3}
.rv-who strong{display:block;font-size:.95rem;color:var(--ink)}
.rv-who span{color:var(--muted)}
.blog .rv-bubble{position:relative;margin:0;padding:.7rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface-2);line-height:1.55}
.rv-side-b .rv-bubble{background:var(--rv-b)}
@media(min-width:640px){
.rv-line{grid-template-columns:11rem minmax(0,1fr);align-items:start}
.rv-side-b{grid-template-columns:minmax(0,1fr) 11rem}
.rv-side-b .rv-speaker{order:2;flex-direction:row-reverse;text-align:right}
.rv-side-b .rv-bubble{order:1}
}

/* Annotated code specimens keep their heading in the body font. */
.rv-mono .rv-spec-h{font-family:var(--font)}
.rv-specimen{min-width:0}

/* Code samples inside an article */
.rv-code{margin:0 0 var(--space-3)}
.rv-code-h{margin:0 0 .25rem!important;font-size:.75rem;font-weight:750;letter-spacing:.08em;color:var(--muted)}
.rv-code pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* Read next list */
.blog-next{padding-left:1.2rem}
.blog-next li{margin-bottom:.4rem}