<!-- ✅ Correct for static images — width and height prevent image CLS -->
<img src="/product.webp" width="800" height="600" alt="Product" />

<!-- The developer adds width and height, CLS still fails in production -->
<!-- Why? The CLS is not from the image — it's from the dynamic banner -->

// The actual CLS source — a cookie consent banner injected above existing content
// Runs after initial paint, pushes the entire page down
setTimeout(() => {
  const banner = document.createElement('div')
  banner.className = 'cookie-banner' // 80px height, injected at top of <body>
  banner.innerHTML = '<p>We use cookies.</p><button>Accept</button>'
  document.body.prepend(banner) // ← Shifts every element below by 80px
}, 2000)

// This single injection shifts the main content 80px downward
// On a 900px viewport: distance fraction = 80/900 ≈ 0.089
// If it affects 80% of the viewport: impact fraction = 0.8
// Shift score = 0.8 × 0.089 = 0.071 — almost the entire CLS budget in one injection

/* ✅ Does NOT cause CLS — runs on the compositor thread */
/* The element moves visually but its layout position is unchanged */
.slide-in {
  animation: slideIn 300ms ease-out;
}
@keyframes slideIn {
  from { transform: translateX(-100px); }
  to   { transform: translateX(0); }
}

/* ❌ CAUSES CLS — triggers layout recalculation */
/* Every frame of this animation forces the browser to recalculate geometry */
.slide-in-broken {
  animation: slideInBroken 300ms ease-out;
}
@keyframes slideInBroken {
  from { left: -100px; }  /* ← layout property — triggers reflow every frame */
  to   { left: 0; }
}

/* ❌ CAUSES CLS — margin, padding, top, bottom all trigger layout */
.expand {
  transition: height 300ms;     /* ← height triggers layout */
}
.expand.open {
  height: 200px;               /* ← This transition causes CLS on every toggle */
}

/* ✅ Use max-height with overflow instead, or clip-path */
.expand {
  overflow: hidden;
  transition: max-height 300ms; /* Still triggers layout — clip-path is better */
}

/* ✅ clip-path — compositor-only, zero layout cost */
.expand {
  transition: clip-path 300ms;
  clip-path: inset(0 0 100% 0); /* Collapsed */
}
.expand.open {
  clip-path: inset(0 0 0 0);    /* Expanded */
}

Layout shift score = impact fraction × distance fraction

Impact fraction:
  The fraction of the viewport area affected by the shift.
  If the shifted element + the space it moved from together cover 70% of the viewport → 0.70

Distance fraction:
  The fraction of the viewport height that the element moved.
  If an element moves 120px on a 900px viewport → 0.133

Shift score = 0.70 × 0.133 = 0.093

CLS = sum of all shift scores in the session, excluding shifts within 500ms of user input

<!-- ❌ No dimensions — browser does not know the image's size until it loads -->
<!-- When the image loads, it pushes subsequent content downward -->
<img src="/product.webp" alt="Product">

<!-- ✅ Fixed width/height — browser reserves space before the image loads -->
<img src="/product.webp" width="800" height="600" alt="Product">

<!-- ✅ Responsive with aspect-ratio — more robust than fixed px values -->
<!-- aspect-ratio preserves the space at any container width via aspect-ratio CSS -->
<img
  src="/product.webp"
  width="800"
  height="600"
  style="width: 100%; height: auto;"
  alt="Product"
/>

/* When the browser processes width="800" height="600" on a responsive image,
   it derives an intrinsic aspect ratio from those numbers.
   The `aspect-ratio` CSS property makes this explicit and composable: */
.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9; /* Reserved at any width — no JS, no layout thrash */
  object-fit: cover;
}
/* Before the image loads: the element occupies width × (width * 9/16) of space.
   After the image loads: the element fills that pre-reserved space. Zero CLS. */

// ❌ Cookie banner injected at top — shifts entire page
document.body.prepend(cookieBanner) // 80px height, zero prior reservation

// ✅ Pre-reserved slot — content fills reserved space, does not shift

<!-- Reserve the banner slot in the initial HTML — zero CLS regardless of timing -->
<div class="consent-banner-slot" style="min-height: 80px; contain: layout;">
  <!-- Banner is injected here — into a pre-reserved container -->
  <!-- Other content is never displaced because the slot was always 80px tall -->
</div>

<!-- ✅ Reserve space for ad units using known creative sizes -->
<div class="ad-slot" style="width: 300px; height: 250px; contain: layout size;">
  <!-- Ad iframe injected here — slot was always 250px, no shift -->
</div>

<!-- ✅ For variable-size embeds, use aspect-ratio with overflow -->
<div class="embed-container" style="aspect-ratio: 16/9; overflow: hidden;">
  <!-- Social embed fills the pre-reserved 16:9 space -->
</div>

@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist.woff2') format('woff2');

  /* font-display: swap
     — Text is visible immediately using the fallback font.
     — When Geist loads, the text reflows (potential CLS if metrics differ).
     — Good for readability; bad for layout stability. */
  font-display: swap;

  /* font-display: optional
     — The browser checks if the font is cached. If not, it uses the fallback forever.
     — Zero FOUT, zero CLS. The web font is never swapped in after initial paint.
     — Best for CLS; trade-off: first-time visitors always see the fallback font. */
  font-display: optional;
}

/* Geist has slightly wider glyphs than Inter (the system fallback).
   Measure the difference using the Font Style Matcher tool:
   https://meowni.ca/font-style-matcher/
   Then adjust the fallback to match: */

@font-face {
  font-family: 'Geist-Fallback';
  src: local('Inter'), local('Helvetica Neue'), local('Arial');
  size-adjust: 104%;         /* Scale fallback up to match Geist's x-height */
  ascent-override: 90%;      /* Override ascent metrics to match Geist */
  descent-override: 22%;     /* Override descent metrics */
  line-gap-override: 0%;
}

body {
  /* Use the adjusted fallback first — identical metrics to Geist */
  font-family: 'Geist', 'Geist-Fallback', sans-serif;
}

/* Result: when Geist loads and replaces Geist-Fallback,
   the layout geometry is identical — zero CLS from the font swap */

// ❌ Skeleton that collapses when content loads — causes CLS
function CommentList({ comments }) {
  if (comments.length === 0) return <SkeletonBlock height="auto" /> // height: auto → collapses
  return <ul>{comments.map(c => <Comment key={c.id} {...c} />)}</ul>
}

// ✅ Skeleton with matching reserved height — content fills the pre-reserved space
function CommentList({ comments }) {
  if (comments.length === 0) {
    return (
      // Reserve the same height the list will occupy when loaded
      // Use a stable height derived from the expected content count
      <div style={{ minHeight: `${ESTIMATED_COMMENTS_HEIGHT}px` }}>
        <SkeletonBlock />
      </div>
    )
  }
  return (
    <div style={{ minHeight: `${ESTIMATED_COMMENTS_HEIGHT}px` }}>
      <ul>{comments.map(c => <Comment key={c.id} {...c} />)}</ul>
    </div>
  )
}

// Production CLS diagnostic — filter out user-initiated shifts
let sessionCLS = 0

new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    // hadRecentInput = true means this shift was caused by user interaction
    // (within 500ms of a click, tap, or keydown) — exclude from CLS
    if (!entry.hadRecentInput) {
      sessionCLS += entry.value

      // Which elements shifted?
      entry.sources?.forEach(source => {
        console.log('Shifted element:', source.node?.nodeName)
        console.log('  Previous rect:', source.previousRect)
        console.log('  Current rect:', source.currentRect)
      })
    }
  })

  console.log('Session CLS so far:', sessionCLS.toFixed(4))
}).observe({ type: 'layout-shift', buffered: true })