/* Shared phone layout: the available column limits the logo before it meets the controls. */
@media (max-width: 700px) {
  .brand-image {
    min-width: 0;
    max-width: 100%;
  }

  .brand-logo,
  .topbar .brand-logo,
  .profile-nav .brand-logo,
  .profile-completion-card .brand-logo {
    display: block;
    width: clamp(136px, 52vw, 224px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
    flex: 0 1 auto;
    min-width: 0;
  }

  .topbar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) max-content;
    align-items: center;
  }

  .topbar > .mobile-menu-btn {
    width: 40px;
    min-width: 0;
  }

  .topbar > .brand-image {
    width: 100%;
    margin: 0;
  }

  .topbar .brand-logo {
    /* The header stays 60px tall; the PNG has a 3:1 intrinsic aspect ratio. */
    width: min(100%, clamp(136px, 48vw, 156px));
  }

  .topbar > .top-actions {
    min-width: 0;
    margin: 0;
  }

  .topbar .top-actions #loginBtn {
    min-width: 0;
    max-width: clamp(64px, 23vw, 118px);
  }

  .profile-nav {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 38px max-content 30px;
    align-items: center;
    column-gap: clamp(4px, 1.5vw, 8px);
  }

  .profile-nav > .back { grid-column: 1; grid-row: 1; }
  .profile-nav > .brand-image { grid-column: 2; grid-row: 1; width: 100%; }
  .profile-nav > .notification-wrap { grid-column: 3; grid-row: 1; }
  .profile-nav > .profile-logout { grid-column: 4; grid-row: 1; }
  .profile-nav > .avatar { grid-column: 5; grid-row: 1; }
  .profile-nav > .profile-city-button { grid-column: 1 / -1; grid-row: 2; width: 100%; }

  .profile-completion-head > .brand-image {
    flex: 1 1 0;
  }

  .profile-completion-head > .profile-logout {
    flex: 0 0 auto;
  }

  .bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 12px;
  }

  .bar > .brand-image {
    width: 100%;
  }

  .bar > #logout {
    margin: 0;
    white-space: nowrap;
  }
}