refactor(z-index): name the stacking layers as a token scale

Replace ~48 magic z-index values (z-10..z-[9999] + 2 inline zIndex) with named
tailwind zIndex tokens (base/menu/chrome/paneltab/panel/rail/overlay/popover/
tooltip/tuner). Values are UNCHANGED — a rename, not a renumber — so layering is
identical; the names give one source of truth for the stack.

frontend/tailwind.config.js

@@ -16,6 +16,31 @@ export default {
       fontFamily: {
         sans: ["Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "sans-serif"],
       },
+      // Named z-index layers — the single source of truth for stacking order. Values are
+      // deliberately UNCHANGED from the magic numbers they replaced (this was a rename, not a
+      // renumber), so the visual layering is identical; the names just make the stack legible and
+      // give future changes one place to edit. Low → high:
+      //   base(10)   in-content decorations: sticky table head, card badges, in-flow dropdowns
+      //   menu(20)   menus/overlays sitting just over content
+      //   chrome(30) floating chrome: the header band, back-to-top, content filter/sort menus
+      //   paneltab / panel (34/35) the collapsed tab vs the expanded side panel (aside over tab)
+      //   rail(40)   full-height rails + docked bars: nav rail, chat dock, floating save bar
+      //   overlay(50) full-screen modals/players, toaster, onboarding, popovers over content
+      //   popover(60) a popover that must sit over an overlay (player scrub, tag menu) + the login gate
+      //   tooltip(100) tooltips, above everything interactive
+      //   tuner(9999)  the dev/lab glass tuner, deliberately on top of all
+      zIndex: {
+        base: "10",
+        menu: "20",
+        chrome: "30",
+        paneltab: "34",
+        panel: "35",
+        rail: "40",
+        overlay: "50",
+        popover: "60",
+        tooltip: "100",
+        tuner: "9999",
+      },
     },
   },
   plugins: [],