/* Core Web Vitals fixes — Marketing Enigma AI
 *
 * Loaded last in <head> so it overrides the per-page inline <style> blocks.
 * Addresses two CLS sources seen in Cloudflare RUM (Sept 2026).
 */

/* ── 1. Table CLS (was 1.0 on /ai-recommendation/how-ai-systems-choose-brands-to-recommend) ──
 * With table-layout:auto the browser must parse EVERY row before it can size
 * columns, so a 20-row table lands in one block and shoves the rest of the
 * page down — RUM recorded rows going from height 0 to 127px.
 * table-layout:fixed sizes columns from the first row, so rows lay out as they
 * arrive. Measured column widths were already near-equal (26/19/18/18/19 and
 * 30/30/40), so this does not change the visual result.
 */
.table-wrapper table {
  table-layout: fixed;
}

.table-wrapper th,
.table-wrapper td {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Keep the label column wider than the data columns, as it renders today. */
.table-wrapper thead th:first-child {
  width: 26%;
}

/* ── 2. Font-swap CLS (h1 / p / a text, ~0.18) ──
 * Inter loads with display=swap, so text first paints in the fallback and then
 * reflows when Inter arrives. This fallback is metric-matched to Inter, so the
 * fallback occupies the same space and the swap causes no shift.
 * Referenced as the second family in each page's font stack.
 */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.12%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

/* ── 3. Images ──
 * Any image without explicit dimensions reserves no space until it decodes.
 */
img {
  max-width: 100%;
  height: auto;
}
