diff --git a/src/styles/globals.css b/src/styles/globals.css
index 43e7d61..73889ec 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,19 +1,37 @@
 /*
- * We intentionally DO NOT import the full "tailwindcss" entry, because
- * it includes Preflight in the `base` layer. Preflight contains a
- * global reset with `*, ::before, ::after { border:0 solid; margin:0;
- * padding:0; box-sizing:border-box }` — and since the module's CSS is
- * injected into the shell's page via css-injected-by-js, that reset
- * would apply to every element on the page, including the shell's
- * own chrome. Symptom: sidebar/header borders disappear, layout shifts.
+ * Two gotchas with the module's Tailwind import — read both before
+ * touching the lines below.
  *
- * Import only the theme and utilities layers. The shell already runs
- * Preflight once for the whole page at its own startup — the module
- * just needs the utility classes on top.
+ * 1) Preflight. The full `tailwindcss` entry includes Preflight in the
+ *    `base` layer. Preflight is a global reset (`*, ::before, ::after
+ *    { border:0 solid; margin:0; padding:0; box-sizing:border-box }`).
+ *    Since the module's CSS is injected into the shell's page via
+ *    `vite-plugin-css-injected-by-js`, that reset would apply to every
+ *    element on the page — including the shell's chrome. Symptom:
+ *    sidebar/header borders disappear, layout shifts. Fix: import
+ *    only `theme` and `utilities`, never the full `tailwindcss` entry.
+ *    The shell ships its own Preflight once for the whole page.
+ *
+ * 2) Cascade order on shared utilities (`.hidden`, `.flex`, `.block`).
+ *    Tailwind 4 emits only the utilities each project actually uses.
+ *    The shell uses `hidden md:block` (shadcn sidebar) but a module
+ *    typically does not — so the shell's stylesheet contains BOTH
+ *    `.hidden` and `.md\:block`, while the module's stylesheet
+ *    contains ONLY `.hidden`. `vite-plugin-css-injected-by-js` appends
+ *    the module's <style> after the shell's stylesheet, and within a
+ *    shared `@layer utilities` the later-source rule wins. Result: the
+ *    module's `.hidden` defeats the shell's `.md\:block` even on wide
+ *    viewports, the shell sidebar stays `display:none`, and clicking
+ *    the trigger appears to do nothing. Fix: route the module's
+ *    auto-generated utilities into a lower-priority layer
+ *    (`module-utilities`) declared before `utilities`. Manual
+ *    utilities the module defines via `@layer utilities { ... }`
+ *    below stay in the high-priority `utilities` layer so they still
+ *    apply where the module needs them.
  */
-@layer theme, base, components, utilities;
-@import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities);
+@layer module-theme, module-utilities, theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(module-theme);
+@import "tailwindcss/utilities.css" layer(module-utilities);
 @import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));