/*
 * Article figures for "A new kind of company just became possible".
 * 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 three feed screenshots stay small: signals, not evidence. */
.feed-reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; max-width: 34rem; }
.feed-reels img { display: block; width: 100%; aspect-ratio: 720 / 1100; object-fit: cover; object-position: 50% 40%; border: 1px solid hsl(var(--ck-site-border)); }

/* Horizontal bars for the surplus split and routing models. */
.cost-bars, .router-bars { display: grid; gap: .9rem; margin-top: 1.25rem; }
.cost-bar, .router-bar { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 6.5rem; align-items: center; gap: .35rem 1rem; font-size: .9rem; }
.cost-bar > span, .router-bar > span { color: hsl(var(--ck-site-muted)); }
.cost-bar i, .router-bar i { display: block; height: .7rem; background: hsl(var(--ck-site-surface)); border: 1px solid hsl(var(--ck-site-border)); }
.cost-bar i b, .router-bar i b { display: block; height: 100%; width: 50%; background: hsl(var(--ck-site-muted) / .55); }
.cost-bar--price i b { background: hsl(var(--ck-site-foreground)); }
.cost-bar strong, .router-bar strong { font: 600 1rem/1.3 'CK Site', system-ui, sans-serif; text-align: right; }
.router-bar small { grid-column: 2 / -1; font-size: .8rem; color: hsl(var(--ck-site-muted)); }
.router-inputs { display: grid; gap: 1.25rem; }
.study-equation { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }

/* Two definitions of done, side by side. */
.contract-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.contract-routes > :is(figcaption, .study-premise, .study-boundary) { grid-column: 1 / -1; }
.contract-route { min-width: 0; padding-top: 1rem; border-top: 2px solid hsl(var(--ck-site-border)); }
.contract-route--accepted { border-top-color: hsl(var(--ck-site-accent)); }
.contract-route ol { margin: 0; padding: 0; list-style: none; counter-reset: route; }
.contract-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: route; font-size: .9rem; }
.contract-route li::before { content: counter(route, decimal-leading-zero); position: absolute; left: 0; top: .6rem; font: .75rem/1.5 'CK Mono', ui-monospace, monospace; color: hsl(var(--ck-site-muted)); }
.contract-route li b { display: block; font-weight: 600; color: hsl(var(--ck-site-foreground)); }
.contract-route > p { color: hsl(var(--ck-site-muted)); }
.contract-route > p strong { display: block; color: hsl(var(--ck-site-foreground)); }

/* Capacity model chart. */
.portfolio-chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.model-grid path { fill: none; stroke: hsl(var(--ck-site-border)); stroke-width: 1; }
.model-axis text { font: 13px 'CK Mono', ui-monospace, monospace; fill: hsl(var(--ck-site-muted)); }
.naive-line, .adjusted-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.naive-line { stroke: hsl(var(--ck-site-muted)); stroke-dasharray: 6 6; }
.adjusted-line { stroke: hsl(var(--ck-site-foreground)); }
.selected-line { stroke: hsl(var(--ck-site-foreground)); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-key { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: .5rem 0 0; font-size: .8rem; color: hsl(var(--ck-site-muted)); }
.chart-key span::before { content: ''; display: inline-block; width: 1.4rem; margin-right: .45rem; vertical-align: middle; border-top: 2px solid hsl(var(--ck-site-foreground)); }
.chart-key .key-naive::before { border-top: 2px dashed hsl(var(--ck-site-muted)); }
.chart-key .key-selected::before { border-top: 1px dotted hsl(var(--ck-site-foreground)); }

/* Contract builder in the agent hand-off. */
.brief-builder { margin-top: 1rem; }
.brief-form { grid-template-columns: 1fr; }
.brief-builder pre { max-height: 24rem; }

@media (max-width: 760px) {
  .contract-routes { grid-template-columns: 1fr; gap: 1.5rem; }
  .cost-bar, .router-bar { grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem; gap: .3rem .6rem; font-size: .85rem; }
}
@media (max-width: 600px) {
  /* The chart scales with its viewBox; keep axis labels legible on phones. */
  .model-axis text { font-size: 24px; }
}
@media (max-width: 380px) {
  .cost-bar, .router-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .cost-bar i, .router-bar i { grid-column: 1 / -1; grid-row: 2; }
  .router-bar small { grid-column: 1 / -1; }
}