/*
 * Article figures for "I tried to give an AI agent real authority. The model wasn’t the hard part."
 * 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 the current authority level.
 */

/* 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 gives its role or figure. */
.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; }
.signal-table, .demo-table, .architecture-table, .defect-table, .proof-table { min-width: 42rem; }
.incident-table, .authority-table { min-width: 46rem; }
.evidence-table { min-width: 36rem; }
.reading-article tbody th > span { display: block; margin-top: .25rem; font-size: .78rem; font-weight: 400; line-height: 1.5; color: hsl(var(--ck-site-muted)); }
.signal-table tbody th > span, .incident-table tbody th, .authority-table tbody th { font-family: 'CK Mono', ui-monospace, monospace; }
.signal-table tbody th > span { font-size: .75rem; }
.incident-table tbody th { font-size: .78rem; white-space: nowrap; }
.defect-table tbody th > span { font: .72rem/1.5 'CK Mono', ui-monospace, monospace; text-transform: lowercase; }
.evidence-table tbody th b { display: block; font: 600 1.15rem/1.3 'CK Site', system-ui, sans-serif; color: hsl(var(--ck-site-foreground)); }
.authority-table tbody th > span { font-family: 'CK Body', system-ui, sans-serif; }
.authority-table tr.is-current > * { background: hsl(var(--ck-site-surface)); }
.authority-table tr.is-current > th { box-shadow: inset 3px 0 hsl(var(--ck-site-accent)); }
.authority-table tr.is-current td:last-child strong { color: hsl(var(--ck-site-foreground)); }

/* Retry or reconcile: two outcomes of the same timeout. */
.choice-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 2rem; }
.choice-route { min-width: 0; padding-top: 1rem; border-top: 2px solid hsl(var(--ck-site-border)); }
.choice-route--reconcile { border-top-color: hsl(var(--ck-site-accent)); }
.choice-route h3 { margin-bottom: .2rem; }
.choice-route .choice-kicker { margin: 0 0 .6rem; font-size: .85rem; color: hsl(var(--ck-site-muted)); }
.choice-route p { color: hsl(var(--ck-site-muted)); }
.choice-route p strong { display: block; color: hsl(var(--ck-site-foreground)); }

/* Trajectory chart, drawn in site tokens. */
.trajectory-chart-wrap { margin-top: 1.25rem; }
.trajectory-chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
#trajectory-chart .chart-grid line { stroke: hsl(var(--ck-site-border)); stroke-width: 1; }
#trajectory-chart .chart-labels text { font: 13px 'CK Mono', ui-monospace, monospace; fill: hsl(var(--ck-site-muted)); }
#trajectory-chart .chart-line { fill: none; stroke: hsl(var(--ck-site-foreground)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
#trajectory-chart .chart-cursor { stroke: hsl(var(--ck-site-muted)); stroke-width: 1; stroke-dasharray: 3 4; }
#trajectory-chart .chart-dot { fill: hsl(var(--ck-site-foreground)); }

/* Agent hand-off. */
.contract-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.reading-handoff pre { max-height: 26rem; }
.reading-handoff blockquote { margin-inline: 0; padding-left: 1rem; border-left: 2px solid hsl(var(--ck-site-border)); color: hsl(var(--ck-site-foreground)); }
.source-register li { margin-block: .8rem; }

@media (max-width: 760px) {
  .choice-pair { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* The chart scales with its viewBox; keep axis labels legible on phones. */
  #trajectory-chart .chart-labels text { font-size: 24px; }
}