html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

.app {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.app header {
  height: calc(62px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}

aside {
  padding-top: calc(17px + env(safe-area-inset-top));
  padding-bottom: calc(17px + env(safe-area-inset-bottom));
}

nav {
  height: calc(66px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}

.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overflow-y: auto;
}

.login-card {
  margin: auto;
}

#toast {
  bottom: calc(85px + env(safe-area-inset-bottom));
}

@media (max-width: 650px) {
  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .title-row {
    flex-wrap: wrap;
  }

  .title-row > * {
    min-width: 0;
  }

  .header-right {
    gap: 4px;
    min-width: 0;
  }

  .account {
    max-width: 45vw;
  }

  #current-user {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .table-wrap {
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .table-wrap table {
    min-width: 620px;
  }

  .login-card label,
  .login-button {
    min-height: 48px;
  }
}

@media (max-height: 500px) and (max-width: 900px) {
  .login-screen {
    place-items: start center;
  }

  .login-card {
    margin: 12px auto;
  }
}

/* Upstream invitation queue, shared by desktop and mobile. */
.queue-card { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:16px 18px; margin-bottom:12px; }
.queue-card p { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:0; min-width:0; }
.queue-card strong { font-size:22px; font-variant-numeric:tabular-nums; }
.queue-card small { color:#7d8a9c; overflow-wrap:anywhere; }
@media (min-width:901px) {
  .auth-tools { flex-wrap:wrap; }
}
@media (max-width:600px) {
  .queue-card { padding:12px; gap:6px; }
  .queue-card small { flex-basis:100%; }
  .queue-card strong { font-size:20px; }
}