/* comparison table
   .table-wrap itself lives in components.css: slides 18 and 19 both use it, and
   data.html carries its own copy, so it is shared by definition.

   Everything below is scoped, per CLAUDE.md. Unscoped `table` / `thead th` /
   `tbody td` here were also styling slide 19, which happened to look right only
   because index.html loads every slide's stylesheet. Opened on its own, slide 19
   got none of it. */
[data-slide="competitive"] table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 480px; }
[data-slide="competitive"] thead th { text-align: left; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
           color: var(--fg-muted); padding: 0.7rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
[data-slide="competitive"] tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); color: var(--fg); }
[data-slide="competitive"] tbody tr:last-child td { border-bottom: none; }
[data-slide="competitive"] td.us { color: var(--accent); font-weight: 500; }
[data-slide="competitive"] th.us { color: var(--accent); }
[data-slide="competitive"] .ok { color: var(--success); }
[data-slide="competitive"] .no { color: var(--flag); }
[data-slide="competitive"] .meh { color: var(--fg-muted); }