.mobile-nav {
  display: none;
  margin-left: auto;
  position: relative;
}

.mobile-nav nav[hidden] { display: none !important; }

.mobile-nav__trigger {
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: .3rem;
  padding: .65rem .85rem;
  font-weight: 800;
  min-height: 44px;
}

.mobile-nav nav:not([hidden]) {
  position: absolute;
  right: 0;
  top: calc(100% + .65rem);
  z-index: 1000;
  width: min(18rem, calc(100vw - 2rem));
  display: grid;
  gap: .35rem;
  padding: .75rem;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: .4rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .55);
}

.mobile-nav nav a { display: flex; align-items: center; min-height: 44px; padding: .7rem; text-decoration: none; }
.mobile-nav nav form { display: grid; margin: 0; }
.mobile-nav nav button { width: 100%; }

@media (max-width: 760px) {
  html, body, .page-shell { max-width: 100%; overflow-x: clip; }
  .site-header > .desktop-nav, .site-header > form { display: none; }
  .site-header .mobile-nav { display: block; }
  .site-header .mobile-nav nav { margin-left: 0; align-items: stretch; }
  .site-header .mobile-nav nav a:not(.button) { display: flex; }
  .site-header .mobile-nav nav form { display: grid; }
  .site-header { min-width: 0; }
  .brand { min-width: 0; font-size: .9rem; }

  .command-heading { width: 100%; min-width: 0; }
  .resource-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: .5rem;
    overflow: visible;
  }
  .resource-strip div { min-width: 0; }
  .command-grid { grid-template-columns: minmax(0, 1fr); }
  .command-grid, .command-grid > *, .command-workspace, .map-panel {
    min-width: 0;
    max-width: 100%;
  }
  .map-panel { overflow: hidden; }
  .command-map, .command-map .maplibregl-canvas-container, .command-map canvas {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .command-map { overflow: hidden; }
}