/*
 * Article figures for "The browser is becoming the API for every app".
 * Base type, tokens and reading layout come from the site frame (data-ck-theme="site").
 * Colours are site tokens only; the accent marks one element per figure or a selected state.
 */

/* The social post that raised the question 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)); }

/* Dated signals. */
.signal-list { list-style: none; padding-left: 0; }
.signal-list li { padding-left: 0; }
.signal-date { display: block; font: .75rem/1.5 'CK Mono', ui-monospace, monospace; color: hsl(var(--ck-site-muted)); }

/* Tables: cells wrap at word boundaries; wide tables scroll inside .table-scroll on phones. */
.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)); }
.app-table, .compile-table { min-width: 36rem; }
.app-table td strong { display: block; color: hsl(var(--ck-site-foreground)); }
.compile-table tbody th span { display: block; margin-top: .2rem; font: .75rem/1.5 'CK Mono', ui-monospace, monospace; font-weight: 400; color: hsl(var(--ck-site-muted)); }

/* Two loops, side by side. */
.loop-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.loop-routes > :is(figcaption, .study-premise, .study-boundary) { grid-column: 1 / -1; }
.loop-route { min-width: 0; padding-top: 1rem; border-top: 2px solid hsl(var(--ck-site-border)); }
.loop-route--delegated { border-top-color: hsl(var(--ck-site-accent)); }
.loop-route .loop-steps { margin: 0 0 .75rem; color: hsl(var(--ck-site-muted)); }
.loop-route ol { margin: 0; padding: 0; list-style: none; counter-reset: log; }
.loop-route li { position: relative; margin: 0; padding: .55rem 0 .55rem 2rem; border-bottom: 1px solid hsl(var(--ck-site-border)); color: hsl(var(--ck-site-muted)); counter-increment: log; font-size: .9rem; }
.loop-route li::before { content: counter(log, decimal-leading-zero); position: absolute; left: 0; top: .6rem; font: .75rem/1.5 'CK Mono', ui-monospace, monospace; color: hsl(var(--ck-site-muted)); }
.loop-route .loop-result strong { color: hsl(var(--ck-site-foreground)); }

/* Cost comparison bars. */
.economics-part + .economics-part { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--ck-site-border)); }
.cost-bars { display: grid; gap: .9rem; margin-top: 1.25rem; }
.cost-bar { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 5rem; align-items: center; gap: .35rem 1rem; font-size: .9rem; }
.cost-bar > span { color: hsl(var(--ck-site-muted)); }
.cost-bar i { display: block; height: .7rem; background: hsl(var(--ck-site-surface)); border: 1px solid hsl(var(--ck-site-border)); }
.cost-bar i b { display: block; height: 100%; width: 50%; background: hsl(var(--ck-site-muted) / .55); }
.cost-bar--hybrid i b { background: hsl(var(--ck-site-foreground)); }
.cost-bar strong { font: 600 1rem/1.3 'CK Site', system-ui, sans-serif; text-align: right; }

/* Contract builder in the agent hand-off. */
.contract-form { grid-template-columns: 1fr; }
.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; }
}
@media (max-width: 760px) {
  .loop-routes { grid-template-columns: 1fr; gap: 1.5rem; }
  .cost-bar { grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem; gap: .3rem .6rem; font-size: .85rem; }
}
@media (max-width: 380px) {
  .cost-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .cost-bar i { grid-column: 1 / -1; grid-row: 2; }
}