/* Installed on iPhone, the app runs edge to edge, so content must stay clear of the
   notch and home indicator. */
.app-nav {
  padding-top: max(0.5rem, env(safe-area-inset-top));
}

.app-main {
  max-width: 44rem;
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* .navbar sets align-items: flex-start on its container, which overrides .hstack and
   leaves items of different heights out of line. */
.app-nav .container {
  align-items: center;
}

/* Comfortable tap targets; this app is mostly used on a phone. */
.app-nav .navbar-brand,
.app-nav .nav-link,
.app-nav .btn-text {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* An empty result slot shouldn't add a gap to the card's flex layout. */
#test-result:empty {
  display: none;
}

.app-signin {
  max-width: 24rem;
  margin-inline: auto;
}

.app-toasts {
  position: fixed;
  inset-inline: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 1080;
  display: grid;
  gap: 0.5rem;
  max-width: 28rem;
  margin-inline: auto;
}