/* ===========================================================================
   Material Symbols icon sizing — shared fix
   ---------------------------------------------------------------------------
   Google's .material-symbols-outlined rule sets `font-size: 24px` and is NOT in a
   cascade layer. Tailwind v4 emits its utilities inside `@layer utilities`, and per
   the CSS cascade spec an UNLAYERED normal declaration always outranks a LAYERED
   one, regardless of specificity.

   The result: every `text-[18px]` / `text-[20px]` / ... on an icon span was
   silently overridden back to 24px on any page running Tailwind v4. The home page
   escaped it only because it still loads the v3 play CDN, which emits unlayered CSS
   where source order decides instead.

   These rules are unlayered and therefore win. One line per size actually used in
   the project (13/15/16/18/19/20/22/26/28/30px).

   If you add a new icon size, add a matching rule here.
   =========================================================================== */

.material-symbols-outlined.text-\[13px\] { font-size: 13px; }
.material-symbols-outlined.text-\[15px\] { font-size: 15px; }
.material-symbols-outlined.text-\[16px\] { font-size: 16px; }
.material-symbols-outlined.text-\[18px\] { font-size: 18px; }
.material-symbols-outlined.text-\[19px\] { font-size: 19px; }
.material-symbols-outlined.text-\[20px\] { font-size: 20px; }
.material-symbols-outlined.text-\[22px\] { font-size: 22px; }
.material-symbols-outlined.text-\[26px\] { font-size: 26px; }
.material-symbols-outlined.text-\[28px\] { font-size: 28px; }
.material-symbols-outlined.text-\[30px\] { font-size: 30px; }

/* Keep line-height tight so a resized icon does not add stray vertical space,
   mirroring the `line-height: 1` that Google's base rule already declares. */
.material-symbols-outlined[class*="text-\["] { line-height: 1; }