/* /FILTERS И ОБЩЕЕ С ГЛАВНОЙ. Грузится только там, где редизайн включён (главная и /filters,
   через _design_head.html), после board.css. Правки остальных страниц 09.10 сняты 10.10 по
   слову Ивана и лежат в ~/Downloads/vinpasi-design-tools/parked-1010. Структура и слова не
   трогаются — только набор контролов доски: чернила вместо синего, подписи строчными,
   значки из спрайта. */

/* «Назад к списку» и «применить» — ссылка с шевроном, не стрелка-глиф. */
.allf-back, .fa-card .acts .go { display: inline-flex; align-items: center; gap: 6px; }
.allf-back { font-size: 13.5px; color: var(--ink-dim); margin-top: 4px; }
.allf-back:hover { color: var(--ink); }

/* ---------------------------------------------------------------- детальный поиск /filters */
.fa-bar { background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.2) blur(10px); }
.fa-n b { letter-spacing: -.03em; }
.fa-of { font-size: 13px; }
.fa-go .show, .fa-foot .show {
  border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; gap: 6px;
}
.fa-go .show:hover, .fa-foot .show:hover { background: #000; filter: none; }
.fa-save .name { border-radius: var(--r-sm); }
.fa-save .save, .fa-foot .save { border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: var(--bg); }
.fa-save .save:hover, .fa-foot .save:hover { border-color: var(--ink); }
.fa-foot .reset, .fa-go .reset { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
/* Подписи полей строчными: капс с разрядкой был ярлыком, а не подписью. */
/* Все подписи одним стилем, чернилами и 600; подсказки под полями остаются серыми. На
   телефоне «Что ищем» было серым, а «Вы недавно искали» чёрным жирным (судья 10.10). */
.k, .fa-cap, .fa-side .k, .fa-mine > .k, .fa-card > .mark {
  text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.fa-card > .mark { color: var(--ink); }
.fa-omni input { border: 1px solid var(--line); border-radius: var(--r-sm); min-height: 44px; font-size: 15px; }
.fa-omni input:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: 0; }
.fa-chip { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 999px; height: 32px; padding: 0 9px 0 11px; font-size: 13px; font-weight: 500; }
.fa-chip:hover { border-color: var(--ink); }
.fa-chip i { display: inline-flex; }
.fa-cut > summary .arw, .fa-grp > .gh .arw, .fa-tab .arw { display: inline-flex; color: var(--ink-faint); transition: transform .15s ease; }
.fa-cut > summary .arw svg, .fa-grp > .gh .arw svg, .fa-tab .arw svg { display: block; }
.fa-cut[open] > summary .arw, .fa-grp[open] > .gh .arw, .fa-tab.on .arw { transform: rotate(90deg); }
.fa-cut > summary b { background: var(--panel); border-radius: 999px; padding: 1px 8px; font-size: 12px; color: var(--ink-dim); font-weight: 500; }
@media (min-width: 1024px) { .fa-grp { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 28px; } }
.fa-grp > .gh h3 { font-size: 19px; font-weight: 600; letter-spacing: -.012em; }
.fa-grp > .gh .note { font-size: 13px; color: var(--ink-faint); }
.fa-fld select, .fa-shell select, .fa-find input, .fa-fld input[type="text"], .fa-fld input[type="number"], .fa-fld input[type="search"] {
  height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; font-size: 14px; background: var(--bg); color: var(--ink);
}
.fa-fld select, .fa-shell select {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='%23596270'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.5'%20d='M19%209L12%2015L5%209'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.fa-fld select:focus-visible, .fa-fld input:focus-visible, .fa-find input:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: 0; }
.fa-fld .why, .fa-fld .mhint, .fa-note { color: var(--ink-faint); font-size: 12px; line-height: 1.45; }
.fa-fld .row.chk input, .fa-check input, .modellist .mrow input { accent-color: var(--ink); }
.fa-shell .modellist .mrow:has(input:checked) { background: var(--panel); }
.fa-seg label { border-radius: 999px; min-height: 36px; font-size: 13.5px; }
.fa-seg label.on { border: 1px solid var(--ink); background: var(--ink); color: #fff; font-weight: 600; }
.fa-seg label:has(input:focus-visible) { outline-color: var(--ink); }
.fa-hist i { border-radius: 2px 2px 0 0; }
.fa-hist i.in { background: var(--ink-dim); opacity: .7; }
.fa-tab { border-radius: 999px; background: var(--bg); border: 1px solid var(--line-strong); }
.fa-tab.picked { border-color: var(--ink); }
.fa-tab.picked small { color: var(--ink-dim); }
.fa-tab.on { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.fa-tab.on small, .fa-tab.on .arw { color: rgba(255, 255, 255, .7); }
.fa-check { border-radius: 10px; }
.fa-check:has(input:checked) { border-color: var(--ink); background: var(--panel); }
.fa-card { border-radius: 12px; }
.fa-card.editing { background: var(--panel); box-shadow: inset 3px 0 0 var(--ink); }
.fa-card .acts .go { border-radius: 999px; background: var(--ink); }
.fa-card .acts .go:hover { background: #000; filter: none; }
.fa-card.off .acts .tog { color: var(--ink); }
.fa-side .k { margin-top: 2px; }
.chkgrid .mrow, .fa-fld .mrow { border-radius: 8px; }
.chkgrid .mrow:has(input:checked), .fa-fld .mrow:has(input:checked) { background: var(--panel); }
.mrow input[type="radio"], .fa-fld input[type="radio"] { accent-color: var(--ink); }
.notrow > b, .fa-fld .notrow b { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--ink-dim); }
.notrow label { border-radius: 999px; }
/* Нижняя полоса на телефоне: поля `.wrap` стали 16px вместо 18, и полоса на -18px выезжала
   за экран на 4px (замер: 394 на 390). */
@media (max-width: 1023px) {
  .fa-sticky { margin: 0 -16px; border-top-color: var(--line); background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.2) blur(10px); }
  .fa-sticky .show { border-radius: 12px; background: var(--ink); font-weight: 600; gap: 6px; }
  .fa-sticky .show:hover { background: #000; }
}
.fa-saved a { border-radius: 10px; }
.fa-saved a:hover { border-color: var(--ink); }

/* ---------------------------------------------------------------- общее с главной */
/* Стена входа в «Нравится» (выпадает из сердечка на карточке): Telegram — главное действие,
   Gmail — второе; красная полоска осталась от стиля ошибки и ничего не значила. */
.likewall { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--like); border-radius: 12px; padding: 16px 18px; }
.likewall b { color: var(--ink); font-size: 16px; font-weight: 600; }
.likewall-doors .door { border-radius: 999px; border-color: var(--line-strong); padding: 8px 16px; }
.likewall-doors .door:hover { border-color: var(--ink); }
.lk-save button:focus-visible { outline-color: var(--ink); }
.warn { border-radius: 10px; }
.likewall { border-left: 1px solid var(--line); }
.likewall-doors .door:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.likewall-doors .door:first-child:hover { background: #000; }

/* /filters: подписи полей чернилами и жирнее подсказок; «Сбросить» — текстовая кнопка в рост поля. */
.fa-row > .k, .fa-row .k { color: var(--ink); font-weight: 600; }
.fa-foot .reset, .fa-go .reset { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--ink); font-weight: 500; }
.fa-foot .reset:hover, .fa-go .reset:hover { background: var(--panel); }
/* /filters: между «Готовыми наборами» и «Деньгами» стояли две линии в 4px друг от друга —
   низ свёрнутого .fa-cut и верх .fa-grp. Остаётся одна (судья 09.10). */
.fa-cut + .allf > .fa-grp:first-of-type { border-top: 0; }

/* Телефон: «Сбросить» с полями 8px и сдвигом на -8px — текст стоит на линии отступа, а ряд
   «Сбросить · название · Сохранить» больше не вылезает за правый отступ 16px (было 11,5). */
@media (max-width: 1023px) {
  .fa-foot .reset, .fa-go .reset { padding: 0 8px; margin-left: -8px; }
  .fa-save, .fa-save .name { min-width: 0; }
}
/* Синий оттенок main у выбранных «любой» и наведения на «Сохранить»: правило filters_page.css
   с .fa-shell специфичнее строки выше, поэтому тот же селектор. */
.fa-shell .chkgrid .mrow:has(input:checked), .fa-shell .modellist .mrow:has(input:checked) { background: var(--panel); }
.fa-save .save:hover, .fa-foot .save:hover { background: var(--panel); }
/* Десктоп: «Деньги» на 47px ниже, чем в main — поля над заголовком и перед первой группой. */
@media (min-width: 1024px) {
  .allf-back { margin-top: 0; }
  .fa-cut + .allf > .fa-grp:first-of-type { margin-top: 12px; padding-top: 6px; }
}
/* Телефон: «Деньги» на 35px ниже main — шапка +8, остальное межстрочные интервалы мелких
   подписей. Возвращаем подписям плотность main; поле «Что ищем» — главное на странице,
   рамка темнее остальных (судья 10.10). */
@media (max-width: 1023px) {
  .allf-back { margin-top: 0; line-height: 1.2; }
  .fa-of, .fa-cap, .k, .fa-omni .why, .fa-omni small, .fa-fld .why { line-height: 1.35; }
}
.fa-omni input { border: 1.5px solid var(--ink-dim); }

/* ================================================================ /filters v2 (Иван 10.10)
   «Переработай фильтр»: по скилу vinpasi-design (filters.md, responsive.md), мобайл-фёрст.
   Один узор групп со шторкой главной: строка-аккордеон 56px, имя слева, выбранное справа.
   Ответ (число, чипы, «Показать», запись) на десктопе — липкая колонка справа, на телефоне —
   полоса сверху и кнопка во всю ширину снизу. Наборов нет, цена полями «от / до». */

/* Шапка: на телефоне только «назад» и заголовок, пояснение — десктопу. */
.allf-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 6px; }
.allf-head > p { color: var(--ink-dim); font-size: 14.5px; margin: 0 0 4px; }
@media (max-width: 1023px) {
  .allf-head h1 { font-size: 24px; margin: 4px 0 6px; }
  .allf-head > p { display: none; }
}

/* Каркас. Телефон: обёртка ответа растворяется, полоса ответа липнет наверху всей формы, «Вы
   смотрели» — под формой. */
.fa-shell { display: flex; flex-direction: column; }
.fa-aside { display: contents; }
.fa-aside > .fa-bar { order: 0; }
.fa-main { order: 1; min-width: 0; }
.fa-aside > .fa-side { order: 2; }

/* Группы: одна строка-аккордеон на всё. */
.fa-grp, .fa-grp:first-of-type { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 0; }
.allf > .fa-grp:first-of-type { border-top: 1px solid var(--line); margin-top: 14px; }
.fa-grp > .gh {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-height: 56px; padding: 0;
  border: 0; cursor: pointer; list-style: none;
}
.fa-grp > .gh h3 { flex: none; margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.fa-grp > .gh .note { min-width: 0; font-size: 13px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-grp > .gh .sel { flex: 1; min-width: 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--ink);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-grp > .gh .sel.empty { font-weight: 400; color: var(--ink-faint); }
.fa-grp > .gh .sel .out { color: var(--fail); }
.fa-grp > .gh .arw { flex: none; display: inline-flex; color: var(--ink-dim); transition: transform .15s ease; }
.fa-grp[open] > .gh .arw { transform: rotate(90deg); }
.fa-grp > .gh:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.fa-grp > .gh:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; }
.fa-cols { gap: 22px 28px; padding: 4px 0 22px; }

/* Поля одним рисунком с рейлом главной: 44px, рамка --line, фокус чернилами. */
.fa-fld .k, .fa-fld .k.gap { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.fa-fld .k.gap { margin-top: 20px; }
.fa-fld select, .fa-shell select, .fa-fld input[type="text"], .fa-fld input[type="number"], .fa-fld input[type="search"] {
  min-height: 44px; height: 44px; border-radius: 10px; font-size: 14.5px;
}
.fa-fld input[type="number"] { -moz-appearance: textfield; }
.fa-fld input[type="number"]::-webkit-inner-spin-button, .fa-fld input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fa-fld .pair { gap: 8px; }
.fa-hist { height: 30px; margin-top: 8px; }
.fa-err { margin: 6px 0 0; font-size: 12.5px; color: var(--fail); }
.fa-err[hidden] { display: none; }
.fa-fld input[aria-invalid="true"] { border-color: var(--fail); }

/* Флажки и радио — как в шторке: квадрат 18px, выбранный залит чернилами. */
.fa-shell .mrow input[type="checkbox"], .fa-shell .row.chk input[type="checkbox"], .fa-check input[type="checkbox"],
.fa-shell .mrow input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--bg) center / 12px no-repeat; cursor: pointer;
}
.fa-shell .mrow input[type="radio"] { border-radius: 50%; }
.fa-shell .mrow input[type="checkbox"]:checked, .fa-shell .row.chk input[type="checkbox"]:checked, .fa-check input[type="checkbox"]:checked {
  border-color: var(--ink); background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M5%2012.5l4.5%204.5L19%207'/%3E%3C/svg%3E");
}
.fa-shell .mrow input[type="radio"]:checked { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px); }
.fa-shell .mrow input:focus-visible, .fa-shell .row.chk input:focus-visible, .fa-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fa-shell .mrow, .fa-fld .row.chk { min-height: 40px; gap: 10px; font-size: 14px; }
.fa-shell .chkgrid .mrow:has(input:checked), .fa-shell .modellist .mrow:has(input:checked), .fa-fld .mrow:has(input:checked) { background: var(--panel); }
.fa-check { border: 1px solid var(--line); }

/* «Вы недавно искали» — строка чипов, листается вбок с затуханием у края, как на главной. */
.fa-row { margin-top: 14px; }
.fa-row .presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
                   -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.fa-row .presets::-webkit-scrollbar { display: none; }
.fa-row .preset { flex: none; }

/* Нижний повтор «Показать / сбросить всё» больше не нужен: кнопка есть в ответе и липнет. */
.fa-foot { display: none; }

/* ── Телефон ── */
@media (max-width: 1023px) {
  .fa-grp > .gh .note { display: none; }
  .fa-fld .why { display: none; }
  .fa-cols { gap: 18px; padding-top: 0; }
  .fa-shell .mrow, .fa-fld .row.chk { min-height: 44px; }
  .fa-side { margin-top: 0; padding-top: 16px; border-top: 0; }
  /* Полоса ответа на телефоне НЕ липкая: число уже на кнопке снизу, а липкая полоса с
     записью фильтра и чипами занимала 350 из 844 пикселей экрана. Порядок: число и
     «Сбросить» в строку, под ними отсев, чипы, запись. */
  .fa-aside > .fa-bar { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
                        padding: 4px 0 14px; border-bottom: 0; background: none; backdrop-filter: none; }
  .fa-bar .fa-line, .fa-bar .fa-go { display: contents; }
  .fa-bar .fa-n { order: 1; flex: 1 1 auto; }
  .fa-bar .reset { order: 2; margin: 0 -8px 0 0; }
  .fa-bar .fa-of { order: 3; flex: 1 0 100%; margin-top: -6px; }
  .fa-bar .fa-chips { order: 4; flex: 1 0 100%; margin: 0; }
  .fa-bar .fa-save { order: 5; flex: 1 0 100%; }
  /* Кнопка во всю ширину, как «Применить» в шторке. */
  .fa-sticky { margin: 0 -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 16px -12px rgba(20, 25, 30, .35); border-top: 0; background: var(--bg); backdrop-filter: none; }
  .fa-sticky .show { min-height: 50px; border-radius: 12px; font-size: 15.5px; }
}

/* ── Десктоп: форма слева, ответ липкой колонкой справа ── */
@media (min-width: 1024px) {
  .fa-shell { display: grid; grid-template-columns: minmax(0, 1fr) 328px; column-gap: 40px; align-items: start; margin-top: 8px; }
  .fa-main { grid-column: 1; grid-row: 1; }
  .fa-aside {
    display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--h-top) + 16px);
    max-height: calc(100vh - var(--h-top) - 32px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px;
  }
  .fa-aside > .fa-bar {
    position: static; display: flex; flex-direction: column; gap: 12px; padding: 18px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); backdrop-filter: none;
  }
  .fa-bar .fa-line, .fa-bar .fa-go { display: contents; }
  .fa-bar .fa-n { order: 1; }
  .fa-bar .fa-n b { font-size: 36px; }
  .fa-bar .fa-n span { font-size: 14px; }
  .fa-bar .fa-of { order: 2; margin-top: -8px; font-size: 13px; color: var(--ink-faint); }
  .fa-bar .fa-chips { order: 3; margin: 2px 0 0; flex-wrap: wrap; overflow: visible; }
  .fa-bar .fa-cap { flex: 1 0 100%; }
  .fa-bar .show { order: 4; display: flex; width: 100%; min-height: 50px; border-radius: 12px; font-size: 15.5px; justify-content: center; }
  .fa-bar .fa-save { order: 5; display: flex; flex-wrap: wrap; gap: 8px; }
  .fa-bar .fa-save .name { flex: 1 1 100%; width: auto; min-height: 44px; }
  .fa-bar .fa-save .save { flex: 1 1 auto; min-height: 44px; }
  .fa-bar .fa-save .watch, .fa-bar .fa-save .cancel { min-height: 44px; }
  .fa-bar .reset { order: 6; align-self: flex-start; margin-left: -12px; }
  .fa-aside > .fa-side { border: 0; margin: 0; padding: 0; }
  .fa-side .fa-seen { margin-top: 20px; padding-top: 0; border-top: 0; }
  .fa-side .fa-seen img { width: 72px; height: 54px; object-fit: contain; background: var(--panel); border-radius: 8px; }

  /* «Деньги» и «Машина» раскрыты всегда (filters_page.css) и читаются разделами; три редкие
     группы — свёрнутые строки, раскрытые, если в них что-то выбрано. */
  .fa-grp:not(.rare) > .gh { min-height: 64px; cursor: default; }
  .fa-grp:not(.rare) > .gh .arw, .fa-grp:not(.rare) > .gh .sel { display: none; }
  .fa-grp:not(.rare) > .gh:hover h3 { text-decoration: none; }
  .fa-grp:not(.rare) .fa-cols { padding-top: 0; }
  .fa-grp:not(.rare) > .gh h3 { font-size: 20px; }
  .fa-grp.rare::details-content { content-visibility: auto; block-size: auto; }
  .fa-grp.rare:not([open])::details-content { content-visibility: hidden; block-size: 0; }
  .fa-grp.rare > .gh { cursor: pointer; }
  .fa-grp.rare > .gh .arw, .fa-grp.rare > .gh .sel { display: inline-flex; }
  .fa-grp.rare > .gh .sel { display: block; }
  .fa-grp > .gh .sel { order: 3; }
  .fa-grp > .gh .arw { order: 4; }
}

/* ================================================================ /filters v3 (Иван 11.10, 00:38)
   «Мне не нравится свободное место, которое расходуется не очень грамотно». На 1440 «Деньги»
   и «Машина» стояли тремя неравными колонками: первая с четырьмя пояснениями, вторая и третья
   кончались на середине, «Слово в объявлении» уезжало одно во второй ряд (deadPct 25,3).
   Решение, принятое судьями за три раунда (judge/A/r1–r3, лог в PROGRESS.md, WP-A):
   - десктоп: «Деньги» и «Машина» РЯДОМ, каждая одной колонкой; цена и марка на первом экране,
     высоты сходятся сами (±60px по ru/ka/en, с маркой и без); редкие группы под ними;
   - колонка ответа — 300px за линией, липнет высотой по содержимому, «Показать» над чипами;
   - планшет 640–1023: группы аккордеоном, внутри две колонки-обёртки `.fa-col` 7 : 5;
   - телефон: одна колонка; запись фильтра — после групп, а не над «Что ищем».
   В DOM контролы не двигались: порядок полей в адресе после «Показать» тот же, что до правок.
   Все правила под `.fa-shell` или `main:has(> .fa-shell)`: pages.css грузится и на главной,
   а главная заморожена (сверено попиксельно со split-after/home-*). */

/* ── Все ширины ── */

/* Подпись-дубль: «Только частники» над флажком «Только частники» (тот же ключ t). Скрыта, не
   удалена. Поле-решение начинается подписью `.k.gap`; отступ между полями даёт сетка. */
.fa-shell .fa-fld > .k.dup { display: none; }
.fa-shell .fa-fld > .k.gap:first-child { margin-top: 0; }
/* Обёртка колонки работает только на планшете; на телефоне и десктопе её нет. */
.fa-shell .fa-col { display: contents; }

/* Пояснения: те же слова, вес ниже. Подсказка у «Слова в объявлении» была плашкой с зелёной
   полосой (стиль ответа на «Сохранить»): зелёный на сайте значит «выгода/OK», а это справка. */
.fa-shell .fa-fld .why, .fa-shell .fa-fld > #word-note {
  margin: 6px 0 0; padding: 0; border: 0; background: none;
  font-size: 12px; line-height: 1.45; color: var(--ink-faint); text-wrap: pretty;
}

/* «Что ищем» во всю ширину колонки формы (было 620px и пустая полоса справа 176×288). */
.fa-shell .fa-omni { max-width: none; }
.fa-shell .fa-omni input { text-overflow: ellipsis; }

/* Хвост страницы: под последней группой было 128px белого (поле `main` + отступ подвала), а
   пустая `.fa-side` у того, кто ничего не смотрел, добавляла ещё 16. */
main:has(> .fa-shell) { padding-bottom: 0; }
main:has(> .fa-shell) ~ .foot-site { margin-top: 24px; }
.fa-shell .fa-side:not(:has(*)) { display: none; }

/* «Модели» до выбора марки: подсказка серым текстом, а не в рамке — рамка с текстом внутри
   читалась вторым пустым полем. Рамка возвращается, как только в списке есть строки. */
.fa-shell .modellist:not(:has(.mrow)) { border: 0; padding: 0; background: none; max-height: none; overflow: visible; }
.fa-shell .modellist:not(:has(.mrow)) .mhint { display: block; padding: 0; font-size: 12px; line-height: 1.45; color: var(--ink-faint); }

/* «любой» в списке кузовов — ссылка без флажка (сброс, а не значение). Кружок как у «любой»
   в растаможке: пустой у ссылки, с точкой, когда кузов не выбран (`.on`). */
.fa-shell .chkgrid .mrow.bodyany { padding-left: 8px; }
.fa-shell .chkgrid .mrow.bodyany::before {
  content: ""; flex: none; box-sizing: border-box; width: 18px; height: 18px;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
}
.fa-shell .chkgrid .mrow.bodyany.on::before { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px); }
.fa-shell .chkgrid .mrow.bodyany { order: -1; }
.fa-shell .chkgrid .mrow.bodyany.on { background: var(--bg); }
/* Значение, по которому сейчас 0 машин («Снижена цена 0»), — бледнее рабочих (`.zero`). */
.fa-shell .row.chk.zero { color: var(--ink-faint); }
.fa-shell .row.chk.zero input { border-color: var(--line); }
/* Чипы «Выбрано» той же высоты, что ступеньки. */
.fa-shell .fa-chip { height: 36px; }

/* «− кроме» у кузова и фасетов и «кроме» под растаможкой — ТИХАЯ кнопка: рамка-линия,
   серый текст; снятое значение — красной пилюлей (состояние читается с одного взгляда).
   Слово видно на всех ширинах (голый «−» не читался, r1), капса нет (на ka `uppercase` даёт
   мтаврули, скил typography.md). r3: семь овалов громче значений; r4: голый серый текст не
   читается кнопкой. На телефоне «− кроме» у списка — ячейка во всю высоту строки (44px) за
   тонкой чертой, а не овал: столбик ячеек тише столбика овалов, а цель видна целиком. */
.fa-shell .vrow .ex, .fa-shell .notrow label {
  position: relative; height: auto; min-height: 28px; min-width: 0; padding: 0 10px; gap: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: 12.5px; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-dim);
}
.fa-shell .vrow .ex { margin: 0 0 0 12px; }
.fa-shell .notrow label { min-height: 36px; }
.fa-shell .vrow .ex em { display: inline; font-style: normal; }
.fa-shell .vrow .ex span { font-size: 13px; }
.fa-shell .vrow .ex:hover, .fa-shell .notrow label:hover { color: var(--fail); border-color: var(--fail); }
.fa-shell .vrow .ex:has(input:checked), .fa-shell .notrow label.on {
  border-color: var(--fail); background: var(--fail); color: #fff; font-weight: 600;
}
.fa-shell .notrow { gap: 6px 4px; }

/* Ступеньки — «Дешевле ровесников» и растаможка (выбор одного из трёх) одним рисунком: по
   своей ширине, выбранная залита чернилами. Растаможка была списком: в 398px между
   «Растаможена» и «204» зиял коридор в 200px, на телефоне — три строки по 44px. Радиокнопки
   те же: скрыты визуально, а не `display: none` — таб и стрелки работают. Ширина по
   содержимому, одним правилом для всех строк (r4: на ka перенесённые ряды растягивались
   по-разному). «Ничего не выбрано» («любой», «не важно») — обводкой, а не заливкой: на ka
   растянутая чернильная «ნებისმიერი» читалась второй главной кнопкой (r2). Заливка остаётся
   у выбора, который сужает выдачу. Высота ступенек и чипов одна: 36px десктоп, 44px телефон. */
.fa-shell .fa-seg { gap: 6px 4px; }
.fa-shell .fa-seg label { flex: 0 0 auto; min-height: 36px; padding: 0 8px; }
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) {
  display: flex; flex-wrap: wrap; gap: 6px 4px; border: 0; border-radius: 0; background: none; overflow: visible;
}
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow {
  position: relative; flex: 0 0 auto; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 13.5px; cursor: pointer;
}
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow span { flex: none; }
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow u { margin-left: 0; }
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow:hover { border-color: var(--ink-faint); background: var(--bg); }
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow:has(input:checked) {
  border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 600;
}
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow:has(input:checked) u { color: rgba(255, 255, 255, .72); }
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
/* «любой» — первым, как «не важно» у ступенек и «любой» у топлива (судья r3). */
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow:has(input[value=""]) { order: -1; }
.fa-shell .fa-seg label.on:has(input[value=""]),
.fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow:has(input[value=""]:checked) {
  background: var(--bg); color: var(--ink); border: 1.5px solid var(--ink);
}

/* ── От 640: колонки внутри групп ── */
@media (min-width: 640px) {
  /* Планшет: в «Деньгах» и «Машине» две колонки-обёртки 7 : 5 (в «Деньгах» левая несёт
     четыре поля с пояснениями; поровну она выходила на 80–120px длиннее). На десктопе группы
     встают рядом, и обёртки снова растворяются (ниже). */
  .fa-shell .fa-money > .fa-cols, .fa-shell .fa-car > .fa-cols {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 32px; align-items: start;
  }
  .fa-shell .fa-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  /* Редкие группы, когда раскрыты: «Техника» 2 × 2 (было 3 + 1, двигатель один во втором
     ряду); «Где стоит» — города сеткой во всю ширину без внутренней прокрутки (было 245px со
     свитком и две пустые колонки); «Проверки» — карточки растянуты, без пустой третьей. */
  .fa-shell .fa-grp.rare > .fa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .fa-shell .fa-grp.rare .fa-fld:only-child { grid-column: 1 / -1; }
  .fa-shell .fa-grp.rare .fa-fld:only-child > .chkgrid.tall {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 8px;
    max-height: none; overflow: visible;
  }
  .fa-shell .fa-checks { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
}

/* ── Десктоп ── */
@media (min-width: 1024px) {
  /* Колонка ответа 300px за линией. Линия — фоном сетки на всю её высоту, а не рамкой
     липкой колонки: колонка высотой в экран у конца страницы упиралась в низ сетки и уезжала
     под шапку вместе с «Показать» (r2, P0). Колонка высотой по содержимому и липнет. */
  main > .fa-shell {
    grid-template-columns: minmax(0, 1fr) 300px; column-gap: 32px;
    background: linear-gradient(var(--line), var(--line)) no-repeat right 300px top / 1px 100%;
  }
  .fa-shell .fa-aside { padding-left: 24px; }
  .fa-shell .fa-aside > .fa-bar { flex-flow: row wrap; align-items: baseline; padding: 2px 0 0; border: 0; border-radius: 0; }
  /* «Сбросить» — в строке числа справа, по базовой линии подписи (r3, r4). На ka подпись
     «მანქანა შეესაბამება» с «გასუფთავება» в 276px не влезала, и сброс уезжал отдельной
     строкой между числом и отсевом: теперь переносится подпись, а не сброс. */
  .fa-shell .fa-bar .fa-n { flex: 1 1 0; min-width: 0; }
  .fa-shell .fa-bar .fa-n span { min-width: 0; }
  .fa-shell .fa-bar .reset { order: 1; flex: none; margin: 0 -12px 0 0; }
  .fa-shell .fa-bar .fa-of, .fa-shell .fa-bar .show, .fa-shell .fa-bar .fa-chips, .fa-shell .fa-bar .fa-save { flex: 1 0 100%; }
  /* «Показать N» не уезжает вниз, когда появляются чипы «Выбрано» (Давид, r1): число →
     отсев → кнопка → выбранное → запись → сброс. Без строки отсева её место держит отступ. */
  .fa-shell .fa-bar .show { order: 3; }
  .fa-shell .fa-bar .fa-chips { order: 4; }
  .fa-shell .fa-bar:not(:has(.fa-of)) .fa-n { margin-bottom: 21px; }
  .fa-shell .fa-bar .fa-save .watch, .fa-shell .fa-bar .fa-save .cancel { font-size: 13px; }
  .fa-shell .chkgrid .mrow, .fa-shell .modellist .mrow { min-height: 36px; }

  /* «Деньги» и «Машина» рядом, каждая одной колонкой; редкие группы под ними во всю ширину.
     Таб идёт по деньгам, потом по машине — как в DOM. Под двумя группами одна линия во всю
     ширину над «Техникой», а не два отрезка. */
  .fa-shell form.allf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: stretch; }
  .fa-shell form.allf > .fa-grp.rare { grid-column: 1 / -1; }
  .fa-shell form.allf > .fa-money, .fa-shell form.allf > .fa-car { border-bottom: 0; }
  .fa-shell form.allf > .fa-car { border-top: 1px solid var(--line); margin-top: 14px; }
  .fa-shell form.allf > .fa-car + .fa-grp.rare { border-top: 1px solid var(--line); }
  .fa-shell .fa-money > .fa-cols, .fa-shell .fa-car > .fa-cols { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .fa-shell .fa-money .fa-col, .fa-shell .fa-car .fa-col { display: contents; }
  /* Шапки групп одной высоты: 64px пустого справа от «Деньги» склеивались с пустым низом
     соседней колонки в одну дыру. */
  .fa-shell .fa-grp > .gh { min-height: 52px; }

  .fa-shell .chkgrid .vrow { padding-right: 6px; }
  .fa-shell .notrow label { padding: 0 8px; }
}

/* ── Телефон и планшет ── */
@media (max-width: 1023px) {
  /* Под именем свёрнутой группы — её подпись («топливо, коробка, привод, двигатель»),
     переносом, а не многоточием; выбранное справа не шире 40vw (vw, а не %: процент в
     авто-дорожке сетки схлопывался в «≤ …»). */
  .fa-shell .fa-grp > .gh {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;
    column-gap: 10px; row-gap: 1px; min-height: 60px; padding: 9px 0;
  }
  .fa-shell .fa-grp > .gh h3 { grid-column: 1; grid-row: 1; }
  .fa-shell .fa-grp > .gh .note {
    display: block; grid-column: 1; grid-row: 2; font-size: 12.5px; line-height: 1.3;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  .fa-shell .fa-grp > .gh .sel { grid-column: 2; grid-row: 1 / span 2; max-width: 40vw; }
  .fa-shell .fa-grp > .gh .arw { grid-column: 3; grid-row: 1 / span 2; }

  /* Цели касания 44px: ступеньки, чипы «Выбрано» (той же высоты, что ступеньки), «Сбросить». */
  .fa-shell .fa-chip { height: 44px; }
  .fa-shell .fa-bar .reset { min-height: 44px; }
  .fa-shell .chkgrid:has(> .mrow input[name="customs"]) > .mrow, .fa-shell .fa-seg label { min-height: 44px; }
  .fa-shell .chkgrid .mrow.bodyany { padding-left: 10px; }
  /* Строки списков без зазоров: зазор в 1px рвал фон выбранной строки. */
  .fa-shell .chkgrid { gap: 0; }
  /* Пояснение к «Слову в объявлении» скрыто, как все `.why` на телефоне. */
  .fa-shell .fa-fld > #word-note { display: none; }
  /* ka на 375: подсказка в «Что ищем» резалась на полуслове. */
  .fa-shell .fa-omni input:lang(ka)::placeholder { font-size: 13px; }

  /* «кроме» — цель 44px, видимая целиком (r3–r4, P1). У списка — ячейка во всю высоту строки
     за чертой слева; под растаможкой — пилюли 44px. */
  .fa-shell .notrow label { min-height: 44px; }
  .fa-shell .vrow .ex {
    align-self: stretch; min-height: 44px; min-width: 44px; margin: 0; padding: 0 12px;
    border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink-faint);
  }
  .fa-shell .vrow .ex:has(input:checked) { background: var(--fail); color: #fff; }
  /* Растаможка — единственное место, где без пояснения два ряда выглядят одним вопросом
     дважды («Нет» и «кроме растаможенных», Нино и Давид r1–r3): её пояснение видно и здесь. */
  .fa-shell .fa-fld:has(input[name="customs"]) .why { display: block; }

  /* ОТВЕТ — ТОНИРОВАННОЙ КАРТОЧКОЙ, ЗАПИСЬ — В НЕЙ. Запись после групп (r3) никто не находил
     и уводила «Показать» с экрана; над «Что ищем» белой строкой (r2) путалась с поиском.
     В карточке на фоне --panel поле имени стоит под чипами выбранного, рядом с «Сохранить» —
     читается как «назвать и сохранить это», а «Что ищем» ниже, на белом, со своей подписью и
     тёмной рамкой. */
  .fa-shell .fa-aside > .fa-bar { align-items: baseline; padding: 14px 16px 16px; border-radius: var(--r); background: var(--panel); }
  .fa-shell .fa-bar .fa-chips { margin-top: 2px; }
  .fa-shell .fa-bar .fa-save { display: flex; margin-top: 4px; }
  .fa-shell .fa-bar .fa-save .name { min-height: 44px; background: var(--bg); text-overflow: ellipsis; }
  .fa-shell .fa-omni { margin-top: 18px; }
}

/* Запись фильтра. Кнопки — одним рисунком: рамка-линия, 44px, чернильный текст.
   Десктоп: «Сохранить» и «и уведомлять» — одна пара с общей рамкой СТОЛБИКОМ: вторая половина
   продолжает первую («сохранить и уведомлять»), а не висит обрывком (r3); рядом в 276px на
   ka подпись «და შეტყობინებები» упиралась в рамку (r4, P1). При правке вместо второй —
   «Отменить», тем же рисунком.
   Телефон: как в main — имя и «Сохранить» одной строкой, «и уведомлять» в 326px третьим не
   помещается и уходит (канал всё равно спрашивают после записи). Карточка ответа не съедает
   первый экран (Давид, Нино r4). */
.fa-shell .fa-bar .fa-save .save, .fa-shell .fa-bar .fa-save .watch, .fa-shell .fa-bar .fa-save .cancel {
  min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink);
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.fa-shell .fa-bar .fa-save .save:hover, .fa-shell .fa-bar .fa-save .watch:hover, .fa-shell .fa-bar .fa-save .cancel:hover {
  position: relative; border-color: var(--ink); background: var(--panel);
}
@media (min-width: 1024px) {
  .fa-shell .fa-bar .fa-save { gap: 8px 0; }
  .fa-shell .fa-bar .fa-save .save, .fa-shell .fa-bar .fa-save .watch, .fa-shell .fa-bar .fa-save .cancel { flex: 1 0 100%; }
  .fa-shell .fa-bar .fa-save .save:has(+ .watch, + .cancel) { border-radius: 10px 10px 0 0; }
  .fa-shell .fa-bar .fa-save .save + .watch, .fa-shell .fa-bar .fa-save .save + .cancel { margin-top: -9px; border-radius: 0 0 10px 10px; }
}
@media (max-width: 1023px) {
  .fa-shell .fa-bar .fa-save { flex-wrap: wrap; gap: 8px; }
  .fa-shell .fa-bar .fa-save .name { flex: 1 1 0; min-width: 0; }
  .fa-shell .fa-bar .fa-save .save, .fa-shell .fa-bar .fa-save .cancel { flex: none; }
  /* «…и уведомлять» на телефоне — своей строкой, а не скрыта: это единственная дорога к выбору
     канала из /filters, «Сохранить» её не заменяет (проверка скрытых действий, 11.10). */
  .fa-shell .fa-bar .fa-save .watch { flex: 1 1 100%; }
}
