Exercise 2: Confirming CSS Modules Don't Leak — Possible Solution
====================================================================

SETUP
------------------------------
A second component, e.g. components/SiteFooter.tsx, is added with its
own nav element and its own plain (non-Module) footer.css file
containing a .breadcrumb class with deliberately different styling
(e.g. a different color and no flex layout) - imported the normal way:
import './footer.css';, not import styles from './footer.module.css'.

WHAT PLAIN CSS DOES
------------------------------
Because footer.css is a plain global stylesheet, not a CSS Module, its
.breadcrumb class name is NOT rewritten or hashed - it stays literally
"breadcrumb" in the compiled output, and is available globally to any
element on the page that has class="breadcrumb" applied directly.

WHAT THE CSS MODULE DOES
------------------------------
PageShell.tsx applies its own breadcrumb styling via className={
styles.breadcrumb }, which Next.js compiles to a hashed class name like
PageShell_breadcrumb__a1b2c - not the literal string "breadcrumb" at
all. Because the two components use genuinely different class names
under the hood, the plain-CSS .breadcrumb rule in footer.css has no
effect on PageShell's own nav, and PageShell's own hashed rule has no
effect on anything using the literal "breadcrumb" class name elsewhere.

CONFIRMATION
------------------------------
Inspecting each rendered nav element in the browser's dev tools shows
two genuinely different class name strings applied - PageShell's own
hashed name, and the footer's own literal "breadcrumb" - each styled
independently, with neither one's rules appearing on the other element.

WHY THIS WORKS AS AN ANSWER
------------------------------
It correctly explains WHY the isolation happens (the CSS Module's own
class name is a different string entirely, not just "the same class
name applied more specifically") rather than just asserting scoping
works, and verifies it with a real second component using a
deliberately colliding class name rather than a name that was never
going to collide anyway.