/* ============================================================
   Shared mobile chrome (≤768px)
   The icon rail can't hover-expand on touch, so below the mobile
   breakpoint it collapses into a slide-in drawer toggled by the
   topbar brand/title. Kept in ONE shared file (drop-in <link> +
   mobile-chrome.js) instead of duplicating per module shell.

   mobile-chrome.js tags the elements with marker classes so this
   sheet never has to enumerate every per-module class:
     • the rail sidebar          → .mobile-nav-drawer
     • the trigger (brand/title)  → .topbar-nav-toggle
     • plain-text brand only      → .topbar-brand--toggle (hamburger)
   It also sets --mobile-topbar-h from the real topbar height
   (56px dashboard / 72px modules) so the drawer clears the bar and
   the trigger stays tappable to close it.
   ============================================================ */

.mobile-nav-backdrop { display: none; }

@media (max-width: 768px) {
  /* Trigger → menu button */
  .topbar-nav-toggle {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  /* Plain-text brand (dashboard) gets a hamburger glyph; module titles
     already carry their own icon, so they only get the pointer above. */
  .topbar-brand--toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
  }
  .topbar-brand--toggle::before {
    content: "";
    width: 17px;
    height: 12px;
    flex-shrink: 0;
    background:
      linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
  }

  /* Rail → off-canvas drawer */
  .mobile-nav-drawer {
    position: fixed !important;
    top: var(--mobile-topbar-h, 56px);
    left: 0;
    bottom: 0;
    height: auto !important;
    width: 240px !important;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    overflow-y: auto;
    z-index: 95;
  }
  .mobile-nav-drawer.is-mobile-open {
    transform: translateX(0);
    box-shadow: 4px 0 22px rgba(0, 0, 0, 0.45);
  }

  /* Labels stay visible inside the open drawer (no :hover on touch).
     Covers both label conventions: .s-label (dashboard-lineage) and
     .label (allegro/erli). */
  .mobile-nav-drawer.is-mobile-open .s-label,
  .mobile-nav-drawer.is-mobile-open .label { display: inline !important; }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    top: var(--mobile-topbar-h, 56px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  .mobile-nav-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}