/* No blue tap flash on phones */
html { -webkit-tap-highlight-color: transparent; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* Phone navigation for the Brand + Studio shells (≤768px): the sidebar becomes a
   drawer on the LEFT, opened by a hamburger in the topbar (public/dashboard/js/mobile-nav.js).
   Loaded after brand-ds.css / studio-ds.css so it wins at equal specificity. */
.sd-burger, .sd-scrim, .sd-sidebar-close { display: none; }
body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .sd-sidebar-close { display: none; }
@media (max-width: 768px) {
  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .app-shell.sd-app,
  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .app-shell.sd-app.is-collapsed {
    display: block; height: 100vh; height: 100dvh; grid-template-columns: none;
  }
  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .main-content.sd-main { height: 100%; padding: 0; }
  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .sd-panel { border-radius: 0; box-shadow: none; }

  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .sidebar.sd-side {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 84vw); height: 100vh; height: 100dvh;
    z-index: 2000; flex-direction: column; overflow: visible;
    padding: 0 14px 8px 12px;
    transform: translateX(-105%); visibility: hidden;
    transition: transform .26s var(--ease-out, ease), visibility 0s linear .26s;
  }
  body.sd-nav-open:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .sidebar.sd-side {
    transform: none; visibility: visible; transition: transform .26s var(--ease-out, ease);
    box-shadow: 12px 0 40px rgba(0, 0, 0, .35);
  }
  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .sd-app > .sd-side { z-index: 2000; }
  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) #sd-collapse { display: none; }
  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .sd-sidebar-close { display: inline-grid; width: 32px; height: 32px; }

  .sd-scrim {
    display: block; position: fixed; inset: 0; z-index: 1999; background: rgba(15, 15, 15, .5);
    opacity: 0; pointer-events: none; transition: opacity .26s ease;
  }
  body.sd-nav-open .sd-scrim { opacity: 1; pointer-events: auto; }
  body.sd-nav-open { overflow: hidden; }

  /* Hamburger — same three-line mark as the landing page nav. */
  .sd-burger {
    display: inline-block; position: relative; flex: none; width: 36px; height: 36px; margin-left: -8px;
    padding: 0; background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--fg);
  }
  .sd-burger span { position: absolute; left: 10px; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
  .sd-burger span:nth-child(1) { top: 11px; }
  .sd-burger span:nth-child(2) { top: 17px; }
  .sd-burger span:nth-child(3) { top: 23px; }
  .sd-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .sd-topbar { padding: 0 12px; }
  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .sd-account .account-menu { right: auto; width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  body:is(.brand-portal, .studio-portal, .creator-portal, .admin-portal) .sidebar.sd-side, .sd-scrim { transition: none; }
}