/* Mobile app chrome — keep the header to brand mark + account end. */

html,
body {
  overflow-x: clip;
  max-inline-size: 100%;
}

header.app-header {
  grid-template-columns: auto 1fr;
  gap: 0.5em;
  padding-inline: 0.6em;
  min-inline-size: 0;
}

.app-header__center {
  display: none;
}

.app-header__brand span {
  display: none;
}

.app-header__start,
.app-header__end {
  gap: 0.5em;
  min-inline-size: 0;
}

.app-header__end {
  justify-self: end;
  max-inline-size: 100%;
}

.app-user-section {
  gap: 0.35em;
  min-inline-size: 0;
}

.app-user-section__identity {
  min-inline-size: 0;
  max-inline-size: none;
}

/* Icon-only identity — username truncates and crowds the header on narrow viewports */
.app-user-section__name {
  display: none;
}

.app-layout {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: clip;
}

.app-main {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: clip;
}

.app-layout main {
  padding-inline: 0.75em;
  overflow-x: clip;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.app-main:has(.trip-page__toolbar),
.app-main:has(.trip-page) {
  min-inline-size: 0;
  overflow-x: clip;
}