.route-completion-people {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
}

.route-completion-people__avatars {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding-left: 7px;
}

.route-completion-people__avatar,
.route-completion-people__more {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #e7edf4;
    color: #354154;
    font-size: 10px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .16);
    transition: transform .18s ease;
}

.route-completion-people__avatar + .route-completion-people__avatar,
.route-completion-people__more { margin-left: -8px; }
.route-completion-people__avatar img { width: 100%; height: 100%; object-fit: cover; }
.route-completion-people__more { background: #172033; color: #fff; }
.route-completion-people:hover .route-completion-people__avatar { transform: translateY(-2px); }
.route-completion-people__label { color: #657185; font-size: 11px; font-weight: 800; white-space: nowrap; }

.route-completion-people--hero {
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(8, 15, 27, .42);
    color: #fff;
    padding: 5px 11px 5px 5px;
    backdrop-filter: blur(12px);
}
.route-completion-people--hero .route-completion-people__label { color: rgba(255, 255, 255, .9); }

.route-completion-people--actuality {
    flex: 0 0 auto;
    border: 1px solid #dce5ee;
    border-radius: 999px;
    background: #fff;
    padding: 5px 10px 5px 5px;
}

.route-completion-people--card .route-completion-people__label { display: none; }
.route-completion-people--card .route-completion-people__avatar,
.route-completion-people--card .route-completion-people__more { width: 28px; height: 28px; }

.route-completion-people-modal[hidden] { display: none !important; }
.route-completion-people-modal {
    position: fixed;
    z-index: 10080;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
}
.route-completion-people-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(8, 15, 27, .58); backdrop-filter: blur(8px); }
.route-completion-people-modal__sheet {
    position: relative;
    width: min(520px, 100%);
    max-height: min(680px, calc(100dvh - 40px));
    overflow: hidden;
    border: 1px solid rgba(219, 227, 237, .9);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(8, 15, 27, .28);
}
.route-completion-people-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 24px 18px; border-bottom: 1px solid #e7edf3; }
.route-completion-people-modal__head span { color: #ff641f; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.route-completion-people-modal__head h2 { margin: 4px 0 0; color: #172033; font-size: 24px; font-weight: 900; line-height: 1.1; }
.route-completion-people-modal__head p { margin: 6px 0 0; color: #768296; font-size: 12px; line-height: 1.4; }
.route-completion-people-modal__close { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid #dce5ee; border-radius: 12px; background: #f8fafc; cursor: pointer; }
.route-completion-people-modal__close img { width: 15px; height: 15px; }
.route-completion-people-modal__status { padding: 26px 24px; color: #768296; font-size: 13px; font-weight: 750; }
.route-completion-people-modal__list { max-height: min(510px, calc(100dvh - 190px)); overflow-y: auto; padding: 8px 16px 18px; }
.route-completion-person { display: flex; align-items: center; gap: 13px; padding: 11px 8px; border-bottom: 1px solid #edf1f5; }
.route-completion-person:last-child { border-bottom: 0; }
.route-completion-person__avatar { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: #edf2f7; color: #354154; font-size: 14px; font-weight: 900; }
.route-completion-person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.route-completion-person__copy { min-width: 0; }
.route-completion-person__copy strong { display: block; overflow: hidden; color: #172033; font-size: 14px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.route-completion-person__copy span { display: block; margin-top: 3px; color: #7a8698; font-size: 11px; font-weight: 700; }
html.route-completion-people-open { overflow: hidden; }

html[data-theme="dark"] .route-completion-people--actuality,
html[data-theme="dark"] .route-completion-people-modal__sheet { border-color: #344054; background: #172033; }
html[data-theme="dark"] .route-completion-people-modal__head { border-color: #344054; }
html[data-theme="dark"] .route-completion-people-modal__head h2,
html[data-theme="dark"] .route-completion-person__copy strong { color: #f8fafc; }
html[data-theme="dark"] .route-completion-person { border-color: #344054; }

@media (max-width: 700px) {
    .route-completion-people__label { display: none; }
    .route-completion-people--hero { padding-right: 5px; }
    .route-completion-people--actuality { padding-right: 5px; }
    .route-completion-people-modal { align-items: end; padding: 0; }
    .route-completion-people-modal__sheet { width: 100%; max-height: min(78dvh, 680px); border-radius: 24px 24px 0 0; }
}