/* Модлисты (engine/modules/modlists). Всё оформление — штатное: форма настроек профиля
   (.profcont .edit .ss/.nm/.field, .input/.input2, .nbut), карточка магазина (kshop_*), плитки и
   плитки и карточки файлов (onefile.tpl / files.tpl), страница файла (file.tpl), выпадающие списки abba,
   блоки .note и .menup.info.
   Здесь только раскладка того, чего у сайта нет готовым. */

/* Строка мода в «Файлах модлиста» редактора — части пункта страницы модлиста (карточка files.tpl): снимок, молния
   автоустановки ({lcauto}, стиль встроен в разметку), название ссылкой, серая строка .files_slow (style-base.css) с разделом
   и режимом установки. Две строки текста по 20px + 8px сверху и снизу = 56px на строку; ≡, номер, снимок 64×36 и значки —
   на одной средней линии. Снимок — плитка снимка менеджера файлов (.addfile_modal .all_screens .screen: подложка
   --podl-lg-hover, скругление --podl-br, 16:9), только маленькая. Заметка — третьей серой строкой, только когда есть. */
.mlx_ed_row { padding: 8px 0; }
.mlx_ed_row + .mlx_ed_row { border-top: 1px solid var(--superlight-grey); }
.mlx_ed_row .mlx_ed_head { display: flex; align-items: center; gap: var(--spad); min-height: 40px; }
.mlx_ed_row .mlx_ed_head > .fa-bars { cursor: grab; flex: 0 0 18px; text-align: center; color: var(--bd-clr); }
.mlx_ed_row .mlx_ed_head > .mlx_num { flex: 0 0 2em; }
.mlx_ed_row .mlx_ed_thumb { flex: 0 0 64px; height: 36px; border-radius: var(--podl-br); overflow: hidden; background: var(--podl-lg-hover); }
.mlx_ed_row .mlx_ed_thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mlx_ed_row .mlx_ed_main { flex: 1 1 auto; min-width: 0; line-height: 20px; }
.mlx_ed_row .mlx_ed_title { display: flex; align-items: center; min-width: 0; font-weight: 500; }
.mlx_ed_row .mlx_ed_title .lc_auto { font-size: 16px !important; margin-right: 6px !important; }
.mlx_ed_row .mlx_ed_title a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlx_ed_row .mlx_ed_main .files_slow { margin: 0; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.mlx_ed_row .mlx_ed_notetxt { cursor: text; }
.mlx_ed_row .mlx_ed_note { margin-top: 5px; }
.mlx_ed_row .mlx_ed_note[hidden], .mlx_ed_row .mlx_ed_notetxt[hidden], .mlx_ed_row .mlx_dis[hidden] { display: none; }
/* режим установки персонажа — ссылкой в серой строке, тем же размером, что строка; ▾ по середине текста;
   выбранный персонаж — маленькой картинкой перед именем */
.mlx_line .mlx_mode, .mlx_line .mlx_mode .fa-angle-down { font-size: inherit; line-height: inherit; }
.mlx_line .mlx_mode .fa-angle-down { vertical-align: middle; position: relative; top: -1px; }
.mlx_mode .mlx_ped_ico, .mlx_line .mlx_ped_ico { width: 15px; height: 20px; object-fit: cover; vertical-align: middle; margin: -2px 4px 0 0; border-radius: 3px; background: var(--podl-lg-hover); }
/* ↑ ↓ — только на телефоне: перетаскивание (HTML5 drag) на касание не отвечает */
.mlx_ed_row .mlx_up, .mlx_ed_row .mlx_down { display: none; }
.mobile .mlx_ed_row .mlx_ed_thumb { flex-basis: 48px; height: 27px; }
.mobile .mlx_ed_row .mlx_ed_title a { white-space: normal; overflow-wrap: break-word; }
.mobile .mlx_ed_row .mlx_ed_main .files_slow { white-space: normal; }
.mobile .mlx_ed_row .mlx_ed_head .mlx_ico + .mlx_ico { margin-left: calc(-1 * var(--spad)); }

/* Окно «Как поставить этот мод» — штатный диалог (как «В модлист»), варианты — строки-флажки окна #mlxdlg.
   Окно выбора персонажа: поле поиска .input, группы — заголовок h3 и сетка плиток; плитка — снимок менеджера файлов
   (подложка --podl-lg-hover, скругление --podl-br), под картинкой имя и мелкой серой строкой внутреннее имя. */
#mlxpeds .mlx_ped_q { width: 100%; box-sizing: border-box; margin-bottom: var(--spad); }
#mlxpeds .mlx_ped_list { max-height: 60vh; overflow: auto; padding-right: var(--spad); } /* зазор до полосы — как #mod_stat_details .custom_scrollbar */
#mlxpeds h3 { margin: var(--spad) 0; font-size: 15px; }
#mlxpeds .mlx_ped_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--spad); }
#mlxpeds .mlx_ped { display: flex; flex-direction: column; align-items: center; padding: 6px 4px 8px; border-radius: var(--podl-br); background: var(--podl-lg-hover); text-align: center; text-decoration: none; box-shadow: inset 0 0 0 2px transparent; }
#mlxpeds .mlx_ped:hover, #mlxpeds .mlx_ped:focus-visible { box-shadow: inset 0 0 0 2px var(--white-blue); }
#mlxpeds .mlx_ped.mlx_on { box-shadow: inset 0 0 0 2px var(--btn-green); }
#mlxpeds .mlx_ped img { width: 75px; height: 100px; object-fit: contain; }
#mlxpeds .mlx_ped_n { margin-top: 4px; font-size: 13px; line-height: 16px; color: var(--h-clr); }
#mlxpeds .mlx_ped_m { font-size: 11px; line-height: 14px; color: var(--pgrey); }
/* машины: снимок 4:3 (вид 3/4 спереди), плитка шире */
#mlxpeds .mlx_car_grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
#mlxpeds .mlx_car img { width: 120px; height: 90px; }
.mlx_mode .mlx_ped_ico.mlx_car_ico, .mlx_line .mlx_ped_ico.mlx_car_ico { width: 27px; height: 20px; object-fit: contain; background: none; }

/* «Ссылка на модлист:» — подпись полей «скопировать» окна входа (style-login-w.css .login_w .srhint), здесь в строку перед полем */
.mlx_page .share .shortlink .srhint { margin: 0 10px 0 0; white-space: nowrap; }
.mlx_page .share { justify-content: flex-end; }

/* Обложка модлиста без своей картинки — мозаика из снимков первых модов, в рамке 16:9, как снимок файла
   (плитка onefile.tpl и галерея страницы файла). 4 — 2×2, 3 — первый на всю высоту, 2 — половины, 1 — целиком. */
.mlx_mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; aspect-ratio: 16 / 9; width: 100%; background: var(--egrey); }
.mlx_mosaic.mlx_m1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.mlx_mosaic.mlx_m2 { grid-template-rows: 1fr; }
.mlx_mosaic.mlx_m3 img:first-child { grid-row: span 2; }
.mlx_mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; min-width: 0; min-height: 0; }

/* Метка «Модлист · N модов» — значок видео с плиток файлов (.lc_vbadge: верхний правый угол обложки),
   только вместо треугольника «play» (отступ 26px под него) — значок списка шрифта сайта. */
.lc_vbadge.mlx_badge { padding-left: 8px; }
.lc_vbadge.mlx_badge .fa { margin-right: 5px; }

/* Обложка в редакторе: превью загруженной картинки (.result_image > .holder загрузчика сайта), под ним кнопки. */
.mlx_cover .result_image img { display: block; max-width: 320px; width: 100%; border-radius: var(--podl-br); margin: 0 0 var(--spad); }
.mlx_cover .note { margin: var(--spad) 0 0; }

/* Пометки под «Установить модлист» — строки списка версий страницы файла (.download_files_list > li > .fdate).
   На странице файла список раскрывается по «Скачать»; у модлиста в нём только пометки — он открыт сразу. */

/* Пометки под «Установить модлист» — внутри .download_buttons, строкой под кнопкой, шрифтом и цветом мелких
   пометок страницы файла (.download_files_list .fdate: 13px, var(--pgrey)). */
.mlx_page .download_buttons { flex-wrap: wrap; }
.download_buttons .mlx_note, .mlx_page .share .mlx_note, #mlxdlg .mlx_note { width: 100%; font-size: 13px; color: var(--pgrey); margin-top: 8px; }
#mlxdlg p.mlx_note { margin: 0 0 var(--spad); }
.mlx_note .l_ks { font-size: inherit; }   /* ссылка в мелкой строке — тем же кеглем, что строка */

/* Пояснение под заголовком модлиста — вид описания раздела в ленте (.module_files .category_description p:
   15px, var(--grey)). */
.mlx_page .mlx_lead { margin: 4px var(--inner-pad) var(--spad); }   /* поля — как у h1.title страницы файла (.file_body .title) */
.mlx_page .mlx_lead p { font-size: 15px; color: var(--grey); margin: 0; }

/* Модератор: «Скрыть»/«Вернуть» — своим значком и подписью, не шестерёнкой автора. */
.mlx_page h1 .mlx_hide .mlx_hide_t { font-size: 14px; margin-left: 5px; vertical-align: middle; }

/* Номер пункта в строке заголовка карточки списка архива («1. Название»): a.a_title — flex, номер — его первый элемент. */
.fileblock .a_title .mlx_pos { flex: 0 0 auto; margin-right: 6px; }

/* Галка «Проверено» — зелёная галка «файл безопасен» строки VirusTotal страницы файла (.virustotal.green: #1cff00). */
.mlx_ok { color: #1cff00; margin-right: 5px; }
.lc_vbadge.mlx_badge .mlx_ok { margin: 0 4px 0 0; }

/* Редактор — окно «Менеджер файлов» (css/addfile.css, бандл addfile_css под .addfile_modal). Окно у менеджера файлов
   скрыто стилем (.addfile_modal{display:none}) и показывается .show() из lc_addfile.js; у модлиста оно и есть содержимое
   страницы — видно сразу. Своё — только строки файлов внутри .additional_content и высота описания. */
.addfile_modal.mlx_editor { display: block; }
.mlx_editor .mlx_ed_rows { margin-top: var(--spad); }
.mlx_editor textarea.input { height: 145px; }
.addfile_modal.mlx_editor .additional .additional_content { display: block; }

/* ↑ ↓ ✕ в строке файла — значения правила ✕ черновика менеджера файлов (.addfile_modal .drafts .ddate .fa и его :hover):
   18px, var(--bd-clr), курсор-рука (промежуток — общий var(--spad) строки); при наведении меняется только цвет (✕ — #f00, как удаление в менеджере файлов;
   стрелки — var(--white-blue), как значок обновления там же). Сам класс .drafts не берём: на «.drafts .ddate .fa»
   lc_addfile.js вешает удаление черновика. */
.mlx_ed_row .mlx_ico { font-size: 18px; color: var(--bd-clr); cursor: pointer; }
.mlx_ed_row .mlx_up:hover, .mlx_ed_row .mlx_down:hover { color: var(--white-blue); }
.mlx_ed_row .mlx_rm:hover { color: #f00; }
/* Строки файлов стоят внутри .m_head окна, а addfile.css красит фоном ЛЮБОЙ .fa-times там при наведении
   (.addfile_modal .m_head .fa-times:hover — это ✕ закрытия окна в шапке) и всегда на телефоне. ✕ строки — не он. */
.addfile_modal .m_head .mlx_ed_row .fa-times-circle:hover,
.mobile .addfile_modal .m_head .mlx_ed_row .fa-times-circle { background-color: transparent; }

/* Редактор («Менеджер файлов»). Подсказка про порядок: на телефоне — «стрелками». */
.mlx_editor .mlx_hint_m { display: none; }
.mobile .mlx_editor .mlx_hint_d { display: none; }
.mobile .mlx_editor .mlx_hint_m { display: inline; }
/* Кнопки внизу: «Удалить модлист» — красной ссылкой слева, «Отмена» и «Сохранить» (последней) справа;
   на телефоне «Сохранить» первая и во всю ширину. */
.mlx_editor .finish { display: flex; align-items: center; gap: var(--spad); }
.addfile_modal.mlx_editor .finish .mlx_ed_delete { margin: 0 auto 0 0; } /* красная кнопка удаления сайта: .bigbut.btn_red (style-base.css) */
.mobile .mlx_editor .finish { flex-wrap: wrap; }
.mobile .mlx_editor .finish .mlx_ed_save { order: -1; width: 100%; }
/* «Добавить мод» — подпись над полем, поле во всю ширину формы: раскладка «Описание файла:» формы менеджера файлов
   (.cat_wrapper.desc: подпись строкой, ниже поле на всю ширину; отступ подписи — «.addfile_modal .desc .afl»), перенос строки и
   подпись на всю ширину — значения блока «Права» той же формы (.addfile_modal .permissions .cat_wrapper / .afl). Выпадашка поиска — под полем. */
.mlx_editor .mlx_addmod { flex-wrap: wrap; }
.mlx_editor .mlx_addmod .afl { width: 100%; }
.mlx_editor .mlx_addmod .afr { position: relative; }
/* Подсказка под ним — та же строка .afr .info формы (класс mlx_full: без пустой колонки подписи), своих стилей нет. */
.mlx_editor .mlx_addmod .uploader_suggest { top: 44px; width: 100%; box-sizing: border-box; z-index: 5; }
/* Значки строки на телефоне — нажимаемые 40×40. */
.mobile .mlx_ed_row .mlx_ico { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; margin-left: 0; }
/* Подсказка «Чтобы открыть всем, добавьте хотя бы 2 мода» — прячется атрибутом hidden (строка .cat_wrapper сама flex). */
.mlx_editor .mlx_need2[hidden], .mlx_editor .mlx_vh[hidden] { display: none; }
.mlx_editor .mlx_note_empty[hidden], .mlx_editor .mlx_note_hint[hidden] { display: none; }

/* Окно «В модлист»: разделитель «или создайте новый модлист» между своими модлистами и полем нового. Своего стиля
   разделителя с подписью у сайта нет — линия токеном темы --superlight-grey, подпись мелкой серой строкой (--pgrey). */
#mlxdlg .mlx_or { display: flex; align-items: center; gap: 10px; margin: var(--spad) 0; font-size: 13px; color: var(--pgrey); }
#mlxdlg .mlx_or:before, #mlxdlg .mlx_or:after { content: ''; flex: 1 1 auto; border-top: 1px solid var(--superlight-grey); }
#mlxdlg .mlx_picks + .mlx_note + .mlx_or, #mlxdlg .mlx_new_name { margin-top: var(--spad); }
#mlxdlg .mlx_or + .mlx_new_name { margin-top: 0; }

/* Страница файла, когда на ней есть «В модлист» (.download_buttons.mlx_rows ставит mlx_hook_file_page):
   ряд 1 — кнопки скачивания во всю строку (.row); ряд 2 — «В избранное» и «В модлист» малыми кнопками сайта .abba
   (как «Подписаться» у имени загрузившего) слева, промежуток между ними — тот же var(--spad), что между «Скачать»
   и «Скачать в Telegram» (.downl .download, .tlg, .dsc в style-base.css); справа — «В N модлистах →».
   На телефоне базовое правило ставит блок столбцом в обратном порядке — здесь обычный порядок, ряд 2 одной строкой. */
.downl .download_buttons.mlx_rows { flex-wrap: wrap; align-items: center; flex-direction: row; }
.mobile .downl .download_buttons.mlx_rows { flex-direction: row; justify-content: flex-start; }
.downl .download_buttons.mlx_rows > .row { flex: 0 0 100%; }
.downl .download_buttons.mlx_rows > .abba { margin: var(--spad) 0 0; white-space: nowrap; }
.downl .download_buttons.mlx_rows > .abba + .abba { margin-left: var(--spad); }
.downl .download_buttons.mlx_rows > .mlx_in { margin: var(--spad) 0 0 auto; font-size: 14px; white-space: nowrap; }
.downl .download_buttons.mlx_rows > .mlx_in .mlx_in_n { display: none; }
.downl .download_buttons.mlx_rows > .mlx_in .mlx_in_n .fa { margin-right: 4px; }
.mobile .downl .download_buttons.mlx_rows > .mlx_in .mlx_in_t { display: none; }
.mobile .downl .download_buttons.mlx_rows > .mlx_in .mlx_in_n { display: inline; }

/* Вторая строка надписи кнопки («Без ожидания») — значения span'а {lcmods_note} страницы файла (files_download.php),
   классом, а не style="". */
.mlx_sub { display: block; margin-top: 4px; font-size: 11px; line-height: 1; opacity: .75; white-space: nowrap; }
.mlx_page .download_buttons .row .nbut + .nbut { margin-left: var(--spad); }
.mobile .mlx_page .download_buttons .row .nbut + .nbut { margin-left: 0; }
#mlxman .mlx_note { margin: 0; font-size: 14px; }

/* Окно растёт из нажатого элемента и туда же уходит (docs/ui_fluid_rules.md): transform + opacity, 220 мс ease-out
   появление, 170 мс ease-in уход; «уменьшить движение» — только прозрачность. Точку роста ставит js (transform-origin). */
.ui-dialog.mlx_fluid { transition: transform 220ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease-out; }
.ui-dialog.mlx_fluid.mlx_fluid_from { transform: scale(.35); opacity: 0; transition: none; }
.ui-dialog.mlx_fluid.mlx_fluid_out { transform: scale(.35); opacity: 0; transition: transform 170ms ease-in, opacity 170ms ease-in; }
.ui-dialog.mlx_fluid.mlx_rm, .ui-dialog.mlx_fluid.mlx_rm.mlx_fluid_from, .ui-dialog.mlx_fluid.mlx_rm.mlx_fluid_out { transform: none; }

@keyframes mlx_drop_in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes mlx_drop_out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
/* строка «Заменяет: …» под названием в карточке — отступ карточки между названием и её строкой сведений
   (.mobile .fileblock h3: margin-bottom var(--spad) перед .files_int.top) */
.fileblock h3:has(+ .mlx_line) { margin-bottom: var(--spad); }
.mlx_editor .mlx_needt[hidden] { display: none; }
/* телефон (.mobile — разметка сайта для смартфона): у карточки файла дети .fileblock стоят с отступом 15px по бокам —
   серая строка модлиста тоже; подпись «Ссылка на модлист:» на узком экране съедала поле до «https://» — у файла её нет */
.mobile .fileblock > .mlx_line { margin-left: 15px; margin-right: 15px; }
.mobile .mlx_page .share .shortlink .srhint { display: none; }
/* лента: «Игра» и «Фильтр» — два выпадающих списка друг под другом; отступ между ними — тот же, что у фильтра
   под рядом кнопок игр на главной (.main_men + .files_filter_select), иначе ряды слипались. Столбиком, а не
   строкой с переносом: строчный блок брал ширину обоих списков в ряд (~600px), «Сортировать» сжималась
   и её подпись уходила над списком — у раздела архива с одним фильтром она в одну строку */
.fsort .files_filter:has(> .mlx_game_filter) { display: flex; flex-direction: column; align-items: flex-start; }
.fsort .mlx_game_filter + .mlx_filter { margin-top: var(--spad); }
/* «Сортировать» — по нижнему ряду, на уровне «Фильтра» (просьба владельца 11.10.2026); подписи не переносятся,
   а если ряд не помещается — сортировка целиком уходит строкой ниже */
.fsort:has(.mlx_game_filter) { align-items: flex-end; flex-wrap: wrap; gap: var(--spad); }
.fsort .mlx_game_filter .text, .fsort .mlx_filter .text, .fsort:has(.mlx_game_filter) .new_sort { white-space: nowrap; }