/* Shared phone gutters keep the header and page content away from screen edges. */
@media (max-width: 767px) {
  .app-layout:has(.fm-nav) {
    --fm-page-gutter: 24px;
    --fm-page-left: max(var(--fm-page-gutter), env(safe-area-inset-left, 0px));
    --fm-page-right: max(var(--fm-page-gutter), env(safe-area-inset-right, 0px));
  }

  .app-layout:has(.fm-nav) > .page-content {
    padding-left: var(--fm-page-left) !important;
    padding-right: var(--fm-page-right) !important;
  }

  .app-layout:has(.fm-nav) > .topbar {
    padding-left: var(--fm-page-left) !important;
    padding-right: var(--fm-page-right) !important;
  }

  /* Reserve a 44px Flow target plus a visible gap after the account controls. */
  body:has(.fluxes-flow) .app-layout:has(.fm-nav) > .topbar {
    padding-left: var(--fm-page-left) !important;
    padding-right: calc(var(--fm-page-right) + 50px) !important;
  }

  .app-layout:has(.fm-nav) .fluxes-flow .flow-launcher.flow-launcher-mascot {
    right: var(--fm-page-right) !important;
  }

  .app-layout:has(.fm-nav) > .topbar .fm-brand > span {
    width: 132px;
    max-width: 100%;
    height: 28px;
    flex: 0 1 132px;
  }

  /* Keep the greeting readable when the wider gutters leave a narrower card. */
  .app-layout:has(.fm-nav) .cc-simple .cc-heading h2 {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
}

@media (max-width: 374px) {
  .app-layout:has(.fm-nav) { --fm-page-gutter: 16px; }
}