/* =============================================================================
 * bc-zindex-tiers.css — 2026-05-05
 *
 * BAYCAST Z-INDEX SYSTEM (canonical layer definition)
 *
 * Why this file exists:
 * Before this, the codebase had 84 distinct z-index values from 0 to
 * 2147483647 (max int) sprinkled across CSS + inline styles in JS. Every
 * developer who added a new overlay invented their own number. Result:
 * arms race. The drop-pin sat at 11000 because someone added a sheet at
 * 10050 and they wanted to sit above it. Then a new sheet appeared at
 * 99999 to sit above the drop-pin. Then 100200. Then 2147483646.
 *
 * This file replaces the chaos with a small set of named tiers. ALL new
 * overlay code should use these variables, not raw numbers.
 *
 * Rules:
 * 1. Floating elements (drop-pin, GPS, zoom buttons) sit at --z-fab.
 * 2. Detail/info panels (the mark detail card) sit at --z-panel,
 *    above all FABs so the panel covers them.
 * 3. Bottom sheets / drawers sit at --z-sheet, above panels.
 * 4. Modals (forecast, log catch, sign-in dialog content) sit at --z-modal,
 *    above sheets.
 * 5. Toasts and banners sit at --z-toast, above modals — they're transient
 *    notifications that should always be visible.
 * 6. Critical auth screens (sign-in gate, signup-required) sit at --z-auth,
 *    above everything.
 * 7. Debug overlay sits at --z-debug, the highest tier — only used by
 *    debug-overlay.js, never by feature code.
 *
 * The gaps between tiers are LARGE so individual elements within a tier
 * can use --z-X + 1, +10, etc without colliding with the next tier.
 *
 * ALL IMPORTANT NOTES BELOW THIS LINE ARE FOR FUTURE DEVS:
 *
 * - Don't add new tiers. If your element doesn't fit one above, you're
 *   probably architecting it wrong.
 * - Don't use raw numbers. If you see one in code, replace it with a var.
 * - !important on z-index is a code smell — it means you're fighting
 *   another rule. Find that rule and fix the conflict properly.
 * ============================================================================= */
:root {
  /* Map base layer (tiles, polylines, marker icons) — Leaflet handles its
     own internal stacking. We just leave it alone. */
  --z-map-base: 0;

  /* Leaflet map controls (zoom buttons, attribution). Leaflet uses 1000
     by default for these — we mirror that here. */
  --z-map-controls: 1000;

  /* Floating action buttons (drop-pin, FAB stack with GPS/layers/zoom).
     Sits above map controls so users can tap them. Below all panels. */
  --z-fab: 1180;

  /* Mark detail panel (#detail). Covers the drop-pin and FAB stack so
     when a mark is open, the panel content isn't bleed-through.
     Larger gap from FABs so individual buttons inside the panel can
     use --z-panel + 10 without conflict. */
  --z-panel: 1500;

  /* Bottom sheets, side drawers, mobile menu. Above the panel because
     these are user-initiated (tap a tab, swipe a sheet) and should
     visually replace whatever was open before. */
  --z-sheet: 9000;

  /* Modals (forecast modal, log-catch dialog, settings dialog). Above
     sheets because they require user attention — typically blocking. */
  --z-modal: 9500;

  /* Toasts, install banners, snackbars. Above modals because they're
     transient feedback that should be visible no matter what's open. */
  --z-toast: 10000;

  /* Critical auth UI (sign-in gate over the entire app, signup-required
     overlay). Above toasts because if the user isn't authed, nothing
     else matters. */
  --z-auth: 99000;

  /* Debug overlay (debug-overlay.js error banner). The only thing
     above auth — used to surface fatal JS errors that broke auth itself. */
  --z-debug: 100000;
}