/* Learn + use-case pages (base-editorial.html) — tables under 480 px (TES-1063).
   The build marks every editorial table `table.stack` and labels each body cell
   with its column header (`data-label`), the device the compare and docs tables
   already use (site-v2.css, TES-1023). On a phone each row becomes a bordered
   block and each cell shows its column as an eyebrow, instead of a four-column
   comparison squeezed to a few words per line. The header row stays in the
   accessibility tree, visually hidden. Its own file so the change does not
   re-version site-v2.css on every hand-authored page. */
@media (max-width: 479px) {
  .content-main .prose .table-wrap:has(> table.stack) {
    overflow: visible;
  }
  .content-main .prose table.stack,
  .content-main .prose table.stack tbody,
  .content-main .prose table.stack tr,
  .content-main .prose table.stack tbody :is(td, th) {
    display: block;
    width: 100%;
  }
  .content-main .prose table.stack {
    max-width: 100%;
    overflow: visible;
    border: 0;
  }
  .content-main .prose table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .content-main .prose table.stack tr {
    margin: 0 0 8px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
  .content-main .prose table.stack tbody :is(td, th) {
    padding: 8px 0;
    border: 0;
    text-align: left;
  }
  .content-main .prose table.stack tbody :is(td, th) + :is(td, th) {
    border-top: 1px solid var(--border-soft);
  }
  .content-main .prose table.stack tbody :is(td, th)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--subtle);
  }
}