/* ==========================================================================
   blog-tables.css — styling for tables inside blog article bodies
   Added 2026-08-11 (Claude Code session).
   Kept in a SEPARATE file on purpose: it does not touch style.css, so
   concurrent edits to style.css cannot clobber these rules and vice-versa.
   Loaded right after style.css in system/layout.php.
   Every rule is scoped under .article-body, so it can never leak onto
   layout or component tables (.docs-table, .links-table, .ref-table …).
   Uses the theme's design tokens, so it is light/dark-aware automatically.
   ========================================================================== */

.article-body table{
  width:100%;
  border-collapse:collapse;
  margin:18px 0;
  font-size:14.5px;
  line-height:1.55;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;                 /* clip cell backgrounds to the rounded border */
}

.article-body table td,
.article-body table th{
  padding:11px 15px;
  text-align:left;
  vertical-align:top;
  color:var(--ink-2);
  border-bottom:1px solid var(--line);
}

/* Header row: any <th> cell, OR the first row of a fully header-less
   generated table (<table><tr><td>…</td></tr>). Both shapes occur. */
.article-body table th,
.article-body table:not(:has(thead)) tr:first-child td{
  color:var(--ink);
  font-weight:600;
  background:var(--surface-2);
  border-bottom:1px solid var(--line-2);
}

.article-body table tr:last-child td{ border-bottom:0; }

.article-body table tbody tr:hover,
.article-body table:not(:has(thead)) tr:hover{ background:var(--surface-2); }

/* A cell may contain a list; drop the prose "– " bullet inside tables. */
.article-body table li::before{ content:none; }

/* Keep wide tables usable on small screens: scroll instead of overflow. */
@media (max-width:600px){
  .article-body table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}