/*
 * Запасные стили для старых браузеров. Подключаются после основных и мобильных.
 * Класс no-flex-gap устанавливается проверкой реальной раскладки в site.js.
 * Обычные шрифты, отступы и вертикальные блоки сохраняют доступность интерфейса.
 */
/* Читаемый текст независимо от наличия Montserrat и настроек старого компьютера. */
body { font-family: Tahoma,Arial,sans-serif; font-weight: 400; }
.muted, .small.muted, .upload-file-name { color: #52647e; }
input::placeholder, textarea::placeholder { color: #61718a; opacity: 1; }
.field-note, .form-hint, .wizard-step, .upload-description, .upload-formats,
.import-file-info dt, .import-options dt { color: #52647e; }
.wizard-step.active { color: #3C5CB4; }

/* До поддержки flex-gap используем отступы; существующие внешние поля не сбрасываем. */
.no-flex-gap .btn > * + * { margin-left: 8px; }
.no-flex-gap .topbar-user > .user-name { margin-left: 6px; }
.no-flex-gap .stage-home-link { margin-left: 12px; }
.no-flex-gap .route-actions > *, .no-flex-gap .actions > *,
.no-flex-gap .action-group > *, .no-flex-gap .import-primary-actions > * {
    margin-right: 10px; margin-bottom: 10px;
}
.no-flex-gap .form-grid > *, .no-flex-gap .check-grid > * { margin-right: 14px; margin-bottom: 14px; }
.no-flex-gap .filters-row > * + * { margin-left: 14px; }
.no-flex-gap .choice-item > * + * { margin-left: 11px; }
.no-flex-gap .wizard-step-text, .no-flex-gap .legend-item > * + * { margin-left: 9px; }
.no-flex-gap .stop-actions > * + * { margin-left: 4px; }
.no-flex-gap .stop-list .action-cell .mini-button + .mini-button { margin-left: 4px; }
.no-flex-gap .boundary-badge > * + * { margin-left: 6px; }
.no-flex-gap .km-view-control > * + * { margin-left: 10px; }
.no-flex-gap .matrix-legend > * + *, .no-flex-gap .matrix-km-inline > * + * { margin-top: 8px; }
.no-flex-gap .modal-buttons > * + * { margin-left: 11px; }
.no-flex-gap .import-tabs > * + * { margin-left: 4px; }
.no-flex-gap .import-stop-list li > * + * { margin-left: 12px; }

/* Ранние реализации Grid поддерживают grid-gap, но ещё не общее свойство gap. */
.leave-stage-buttons { grid-gap: 10px; }
.import-file-info, .import-settings-grid { grid-gap: 24px; }
.import-result-layout, .import-price-grid { grid-gap: 16px; }

/* У браузеров без CSS Grid остаётся обычная вертикальная компоновка. */
@supports not (display: grid) {
    .leave-stage-buttons > * { display: block; width: 100%; margin-top: 10px; }
    .import-result-layout > *, .import-settings-grid > *,
    .import-file-info > *, .import-price-grid > * { margin-bottom: 16px; }
}

/* Перенос длинных слов поддерживается и до появления overflow-wrap: anywhere. */
.modal-window, .import-file-info dd, .import-options dd { word-wrap: break-word; }

@media screen and (max-width: 600px) {
    .import-file-info, .import-settings-grid { grid-gap: 16px; }
    .no-flex-gap .route-actions > *, .no-flex-gap .actions > *,
    .no-flex-gap .action-group > *, .no-flex-gap .import-primary-actions > *,
    .no-flex-gap .form-grid > *, .no-flex-gap .check-grid > * { margin-right: 0; }
    .no-flex-gap .stop-actions > .btn { margin-left: 0; }
    .no-flex-gap .headline > * + * { margin-top: 12px; }
    .no-flex-gap .stage-heading > * + * { margin-top: 0; }
}
@media screen and (max-width: 380px) {
    .no-flex-gap .modal-buttons > * + * { margin-left: 0; margin-top: 10px; }
}