@media (max-width: 1180px) {
  .desktop-nav {
    display: none;
  }

  .mobile-menu {
    display: inline-flex;
  }

  .header-inner {
    grid-template-columns: auto 1fr;
  }

}

@media (max-width: 720px) {
  h1 {
    font-size: 22px;
  }

  .header-inner {
    min-height: 64px;
    padding: 0 16px;
  }

  .brand-subtitle {
    display: none;
  }

  .brand-title {
    font-size: 15px;
  }

  .brand-logo {
    width: 32px;
    height: 32px;
  }

  .project-context-strip {
    align-items: flex-start;
    flex-direction: column;
    padding: 8px 16px;
  }

  .context-left,
  .context-meta {
    flex-wrap: wrap;
  }

  .project-context-strip {
    align-items: stretch;
  }

  .context-actions,
  .context-actions .app-btn {
    width: 100%;
  }

  .context-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .workflow-bar {
    grid-auto-columns: 132px;
    grid-template-columns: none;
    grid-auto-flow: column;
    padding: 8px 16px 12px;
  }

  .page-shell {
    padding: 16px;
  }

  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .action-heading {
    gap: 10px;
  }

  .span-2 {
    grid-column: auto;
  }

  .login-panel {
    padding: 24px;
  }

  .login-logo {
    width: 46px;
    height: 46px;
  }
}