/* schema: a few real rows from a database's tables, side by side, so a reader sees what the tables look like.
     <figure class="demo"><div class="schema">
       <div class="schema-t schema-main"><p class="schema-name">bookmarks</p>
         <table><thead><tr><th>…</th></tr></thead><tbody><tr><td>…</td></tr>…<tr class="schema-more"><td>…</td></tr></tbody></table></div>
       <div class="schema-side"><div class="schema-t">…</div><div class="schema-t">…</div></div>
     </div></figure>
   The main table runs full width; the side tables sit two across under it (one column on phones).
   A value that points at a row in another table: <span class="schema-ref" style="--c: #3a7bd5">@theo</span>,
   the same colour in both tables. A number column: <td class="n">. Summaries clamp to two lines. */
.schema { display: grid; gap: 14px; padding: 16px; border-radius: 12px; background: var(--gray-100); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
.schema-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.schema-t { border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04); overflow: hidden; }
.schema-name { margin: 0; padding: 8px 12px; font: 500 12px/16px var(--mono); color: var(--gray-1200); border-bottom: 1px solid var(--gray-200); }
.schema table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.schema th { padding: 6px 12px; text-align: start; font: 400 11px/16px var(--mono); color: var(--gray-1000); border-bottom: 1px solid var(--gray-200); }
.schema td { padding: 8px 12px; vertical-align: top; color: var(--gray-1200); border-bottom: 1px solid var(--gray-200); }
.schema tr:last-child td { border-bottom: 0; }
.schema td.n, .schema th.n { text-align: end; font-variant-numeric: tabular-nums; }
.schema td.m { font: 12px/18px var(--mono); white-space: nowrap; }
.schema td:first-child { white-space: nowrap; }
.schema .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.schema-ref { display: inline-block; padding: 0 6px; border-radius: 4px; white-space: nowrap; font: 12px/18px var(--mono);
  color: var(--c); background: color-mix(in oklab, var(--c) 12%, transparent); }
.schema-more td { color: var(--gray-900); text-align: center; letter-spacing: 2px; padding-block: 2px 6px; }
@media (max-width: 640px) {
  .schema, .schema-side { gap: 12px; }
  .schema { padding: 12px; }
  .schema-side { grid-template-columns: minmax(0, 1fr); }
  .schema td, .schema th { padding-inline: 10px; }
}