@import url('./tokens.css');
@import url('./base.css');
@import url('./components.css');
@import url('./drawers.css');
@import url('./map.css');

/* ==========================================================================
   RESPONSIVE DESIGN RULES
   ========================================================================== */
@media (max-width: 768px) {
  .info-pill {
    display: none;
  }
}

@media (max-width: 640px) {
  .app-header {
    padding: 0 1rem;
    height: 56px;
  }

  .brand-text p {
    display: none;
  }

  .header-actions-desktop {
    display: none !important;
  }

  .header-actions-mobile {
    display: flex !important;
  }

  .floating-actions {
    bottom: 1rem;
    left: 1rem;
  }

  .landing-inspect-card {
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: none;
  }

  .inspect-card-inner {
    padding: 1rem;
  }

  .drawer-left, .drawer-right {
    max-width: 100%;
  }

  .aim-hud-box {
    top: 0.75rem;
    width: 95%;
  }

  .aim-hud-card {
    padding: 1rem;
  }
}