/* * "Your AI can make 500 videos": article tables, calculator and hand-off. * Base type, tokens and layout come from the site frame (), * so this file only refines them with the site tokens. */ .edit-table th[scope="row"] { width: 24%; } .edit-table td.edit-change { color: hsl(var(--ck-site-accent)); font-weight: 600; } .diag-table tbody th { font-weight: 400; color: hsl(var(--ck-site-muted)); } .diag-table tbody th strong, .level-table tbody th, .claims-table tbody th { color: hsl(var(--ck-site-foreground)); } .second-table :is(th, td):nth-child(n+3) { text-align: right; white-space: nowrap; font-family: 'CK Mono', ui-monospace, monospace; font-size: .82rem; } .handback { margin: 1.25rem 0; } .handback > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .25rem 1rem; padding: .7rem 0; border-bottom: 1px solid hsl(var(--ck-site-border)); } .handback > div:first-child { border-top: 1px solid hsl(var(--ck-site-border)); } .handback dt { font: 600 .9rem/1.6 'CK Site', system-ui, sans-serif; color: hsl(var(--ck-site-foreground)); } .handback dd { margin: 0; } .handback em { display: block; margin-top: .35rem; font-style: normal; font-size: .85rem; } .gap-list li { margin-block: .9rem; } .reading-handoff pre + pre { margin-top: 1.5rem; } /* Site table cells may break anywhere, which lets wide screens squeeze short columns mid-word. */ @media (min-width: 641px) { .stack :is(th, td) { overflow-wrap: break-word; } :is(.agent-table, .level-table) th:first-child { width: 9.5rem; } .second-table th:first-child { white-space: nowrap; } } /* Wide comparison tables become labelled rows on phones instead of scrolling sideways. */ @media (max-width: 640px) { .handback > div { grid-template-columns: 1fr; } .stack, .stack caption, .stack tbody, .stack tr, .stack th, .stack td { display: block; width: auto; } .stack thead { display: none; } .stack th[scope="row"], .stack td[data-label] { width: auto; } .stack tr { margin-bottom: 1rem; border-top: 1px solid hsl(var(--ck-site-border)); } .stack :is(th, td) { border-width: 0 1px 1px; } .stack tbody th { background: hsl(var(--ck-site-surface)); } .stack td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .15rem; font: 600 .75rem/1.4 'CK Site', system-ui, sans-serif; color: hsl(var(--ck-site-foreground)); } .stack.second-table :is(th, td):nth-child(n+3) { text-align: left; } }