/*
 * Article figures for "How to let an AI use your browser without watching every click".
 * Base type, tokens and reading layout come from the site frame (data-ck-theme="site").
 * Colours are site tokens only; the accent marks one takeaway per figure.
 */

/* The social post that started the article stays small: a prompt, not evidence. */
.source-shot { max-width: 12rem; margin: 0 0 2rem; }
.source-shot img { display: block; width: 100%; height: auto; max-height: 26rem; object-fit: cover; object-position: 50% 0; border: 1px solid hsl(var(--ck-site-border)); }
.source-shot figcaption { margin-top: .6rem; font-size: .8rem; line-height: 1.6; color: hsl(var(--ck-site-muted)); }

/* Tables: cells wrap at word boundaries; wide tables scroll inside .table-scroll on phones.
   The row header carries the label; a second line in muted type names its role. */
.reading-article :is(th, td) { overflow-wrap: break-word; }
.reading-article table code, .loop-route code, .study-premise code { color: hsl(var(--ck-site-foreground)); }
.reading-article td code { overflow-wrap: normal; }
.replay-table, .controller-table, .trace-table { min-width: 36rem; }
.controller-table td:nth-child(2) { min-width: 10rem; }
.replay-table tbody th, .controller-table tbody th, .trace-table tbody th { min-width: 8rem; }
.trace-table tbody th span { display: block; margin-top: .2rem; font-size: .78rem; font-weight: 400; color: hsl(var(--ck-site-muted)); }
.controller-table td strong { color: hsl(var(--ck-site-foreground)); }
.replay-table td:nth-child(3) { color: hsl(var(--ck-site-foreground)); }
.jev-table { max-width: 28rem; }
.jev-table td { font-family: 'CK Mono', ui-monospace, monospace; font-size: .85rem; white-space: nowrap; }

/* Agent hand-off. */
.reading-handoff pre { max-height: 24rem; }

@media (min-width: 900px) {
  .source-shot { float: right; width: 13rem; margin: .4rem 0 1.5rem 2rem; }
  .writing-prose > h2 { clear: both; }
}