/* Страница сборки фильтра — /filters.
   Дополняет app.css, переиспользует его переменные. Ни одного нового цвета: синий это
   --link, красный --fail, серые --ink-dim и --ink-faint, линии --line, заливки --panel и
   --panel-2. Светлая заливка выбранной строки это тот же --link в восьми процентах.

   Одно решение задаёт весь файл: ОТВЕТ ПЕРЕЕЗЖАЕТ НАВЕРХ И НЕ УЕЗЖАЕТ. Раньше «сколько
   машин осталось» было напечатано ровно в одном месте — на кнопке под пятью группами, — при
   этом обработчик change перезагружает страницу целиком именно ради пересчёта этого числа.
   Страница платила полной перезагрузкой за результат, которого человек в этот момент не
   видел; позиция прокрутки чинилась вручную через sessionStorage, и это лечение симптома. */

/* ── Липкая полоса ответа ─────────────────────────────────────────────────────────────
   Стоит под шапкой сайта, на её же высоте --h-top, по тому же контракту, что .bar на
   выдаче. Здесь она нужнее: на выдаче она сообщает результат, здесь меняется от каждого
   клика, и ради этого страница и перезагружается. */

.fa-bar {
  position: sticky;
  top: var(--h-top);
  z-index: 18;
  padding: 10px 0 8px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.fa-line { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fa-n { display: flex; align-items: baseline; gap: 9px; }
.fa-n b { font-size: 30px; font-weight: 700; letter-spacing: -.7px; line-height: 1;
          font-variant-numeric: tabular-nums; }
.fa-n span { font-size: 13px; color: var(--ink-dim); }
/* «Было 66 959 · отсеяли 65 751». Второе число и есть работа фильтра, и до этого его на
   странице не было ни в каком виде. */
.fa-of { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.fa-go { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.fa-go .reset { font-size: 12.5px; color: var(--ink-dim); }
.fa-go .show {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 20px;
  border: 0; border-radius: 7px;
  font: inherit; font-size: 14px; font-weight: 700;
  background: var(--link); color: #fff; cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fa-go .show:hover { filter: brightness(1.08); }
/* ЗАПИСЬ ЦЕЛИКОМ В ПОЛОСЕ: имя и обе кнопки. Поле имени стояло в подвале формы, под
   двадцатью пятью контролами, а кнопка здесь, то есть назвать фильтр можно было только
   долистав до низа. Контурная, потому что главное действие полосы одно и оно синее. */
.fa-save { display: flex; align-items: center; gap: 8px; }
.fa-save .name {
  width: 172px; min-height: 40px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 7px;
  font: inherit; font-size: 13px; color: var(--ink); background: var(--bg);
}
.fa-save .name::placeholder { color: var(--ink-faint); }
.fa-save .save {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--link); border-radius: 7px;
  background: var(--bg); color: var(--link);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.fa-save .save:hover { background: rgba(26, 99, 196, .06); }
.fa-save .watch, .fa-save .cancel {
  border: 0; background: none; padding: 0 2px;
  font: inherit; font-size: 12.5px; color: var(--ink-dim); cursor: pointer; white-space: nowrap;
}
.fa-save .watch:hover, .fa-save .cancel:hover { color: var(--ink); text-decoration: underline; }

/* ── Чипы выбранного ──────────────────────────────────────────────────────────────────
   Ровно то, что .applied делает на выдаче и чего на странице сборки не было вовсе: чтобы
   понять, что стоит, приходилось глазами обойти пять групп и ~25 контролов. Комментарий к
   .bar в app.css цитирует Baymard: «28% сайтов никогда не показывают применённые фильтры».

   Прокрутка вбок, не перенос: с переносом четыре чипа дают три строки и отодвигают первый
   контрол ещё на шесть десятков пикселей. Правило дословно от .presets. */
.fa-chips {
  display: flex; gap: 6px; align-items: center;
  margin-top: 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.fa-chips::-webkit-scrollbar { display: none; }
.fa-cap {
  flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-faint); font-weight: 700; padding-right: 2px;
}
.fa-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 4px 9px 4px 11px; white-space: nowrap;
}
.fa-chip:hover { text-decoration: none; border-color: var(--ink-faint); }
.fa-chip i { font-style: normal; color: var(--ink-faint); font-size: 13px; line-height: 1; }
/* Снятое значение красным и здесь тоже. Оно читается хуже всего, поэтому показывается
   дважды: зачёркнутой строкой у самого значения и чипом наверху. */
.fa-chip.out {
  background: var(--fail); border-color: var(--fail); color: #fff; font-weight: 600;
}
.fa-chip.out i { color: rgba(255, 255, 255, .7); }

/* ── Омнибокс ─────────────────────────────────────────────────────────────────────────
   Поле шире всех остальных контролов, потому что принимает не значение, а фразу. Разбор
   строки в отмеченные контролы прямо на этой странице не сделан: сегодня она уезжает на
   выдачу, там разбирается сервером и возвращается разложенным адресом. */
.fa-omni { margin: 16px 0 4px; max-width: 620px; }
.fa-omni label { display: grid; gap: 5px; position: relative; }
.fa-omni input {
  width: 100%; min-height: 46px; padding: 0 14px;
  border: 2px solid var(--link); border-radius: 7px;
  font-size: 15px; background: var(--bg);
}
.fa-omni small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--ink-faint); }
.fa-omni .omni-drop { top: calc(100% - 14px); }

/* ── Две полосы чипов, каждая со своей подписью ───────────────────────────────────────
   Своё и наше это разные вещи, и различать их толщиной контура (было: border-style dashed)
   значит не различать вовсе. */
.fa-rows {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 8px 22px; margin: 18px 0 4px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.fa-row { min-width: 0; }
.fa-row .presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

/* ── Наборы под катом ─────────────────────────────────────────────────────────────────
   Их пятнадцать, и раскрытыми они дают шесть строк чипов между полем ввода и первым
   контролом. Свёрнутое `<details>` держится само, без скрипта. */
.fa-cut { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 4px; }
.fa-cut > summary { display: flex; align-items: center; gap: 8px; list-style: none;
                    cursor: pointer; min-height: 34px; }
.fa-cut > summary::-webkit-details-marker { display: none; }
.fa-cut > summary .k { margin: 0; }
.fa-cut > summary b { font-size: 11px; font-weight: 700; color: var(--ink-faint);
                      background: var(--panel-2); border-radius: 9px; padding: 1px 7px; }
.fa-cut > summary .arw { color: var(--ink-faint); font-size: 12px; }
.fa-cut[open] > summary .arw { transform: rotate(90deg); }
.fa-cut .presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

/* Что ответил обработчик записи. Одна строка, и она не липкая: это ответ на нажатие, а не
   состояние страницы. */
.fa-note {
  margin: 10px 0 0; padding: 9px 12px;
  border: 1px solid var(--line); border-left: 3px solid var(--ok);
  border-radius: var(--r-sm);
  background: var(--panel); font-size: 13px; color: var(--ink);
}

/* ── Подписи полей ───────────────────────────────────────────────────────────────────
   Одна гарнитура на все подписи и один регистр: заглавные мелкие серые. Поле, подписанное
   как предложение, читается как предложение, и колонка из четырёх таких подписей теряет
   ритм. `.k.gap` это вторая подпись внутри той же колонки; НЕ `.top` — этим именем в app.css
   назван заголовок сайта, и подпись поля наследовала от него высоту 52px, паддинг и рамку.
   Ровно этот раскос и был виден между подписью и её контролом. */
.k {
  display: block;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink-faint); font-weight: 600;
  margin: 0 0 6px;
}
.k.gap { margin-top: 18px; }

/* ── Группы по весу ───────────────────────────────────────────────────────────────────
   Пять равновесных fieldset давали городу с одним контролом тот же вес, что марке с
   мультивыбором на 268 моделей у Mercedes. Деньги первыми: они решают чаще всего. */
.fa-grp { border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 26px; }
.fa-grp:first-of-type { margin-top: 18px; }
.fa-grp > .gh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
                list-style: none; cursor: pointer; }
.fa-grp > .gh::-webkit-details-marker { display: none; }
.fa-grp > .gh h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.fa-grp > .gh .note { font-size: 12px; color: var(--ink-faint); }
.fa-grp > .gh .arw { color: var(--ink-faint); font-size: 12px; }
.fa-grp[open] > .gh .arw { transform: rotate(90deg); }

/* Три колонки, а не две: у денег три решения (цена, растаможка, скидка), и вторая колонка
   из трёх оставляла бы под ними пустое место в треть ширины. */
.fa-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
           gap: 22px; margin-top: 14px; align-items: start; }
.fa-fld { min-width: 0; }
.fa-fld.wide { grid-column: 1 / -1; }
/* Все контролы колонки одной ширины и одной высоты: разнобой по высоте и был тем самым
   раскосом, из-за которого соседние колонки переставали читаться как один ряд. */
.fa-fld select,
.fa-fld input[type="number"],
.fa-fld input[type="search"],
.fa-fld input[type="text"] { width: 100%; min-height: 38px; font-size: 13.5px; }
.fa-fld .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fa-fld .why { font-size: 11px; color: var(--ink-faint); line-height: 1.45; margin: 7px 0 0; }
.fa-fld .row.chk { display: flex; align-items: center; gap: 9px; min-height: 38px;
                   font-size: 13.5px; }
.fa-fld .row.chk input { flex: none; margin: 0; }
.fa-fld .row.chk u { margin-left: auto; text-decoration: none; font-size: 12px;
                     color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.fa-fld .row.chk + input { margin-top: 8px; }
.fa-fld .notrow { margin-top: 8px; }
.fa-fld .mhint { margin: 0; font-size: 12px; color: var(--ink-faint); }

/* Выбранная строка в списке значений заливается тем же синим в восьми процентах: точка
   радиокнопки на строке высотой 38px читается медленнее, чем строка целиком. */
.fa-shell .chkgrid .mrow:has(input:checked),
.fa-shell .modellist .mrow:has(input:checked) { background: rgba(26, 99, 196, .08); }

/* ── Ступеньки вместо выпадающего списка ──────────────────────────────────────────────
   Четыре значения и «неважно»: выбор из пяти, спрятанный под нажатие, читается как поле,
   которое надо заполнить. */
.fa-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-seg label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); font-size: 13px; cursor: pointer; white-space: nowrap;
}
.fa-seg label:hover { border-color: var(--ink-faint); }
.fa-seg label input { position: absolute; opacity: 0; width: 0; height: 0; }
.fa-seg label.on { border: 1.5px solid var(--ink); font-weight: 600; }
.fa-seg label:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 1px; }

/* ── Гистограмма под диапазоном ───────────────────────────────────────────────────────
   Нужна там, где диапазон выбирают вслепую: цена и год. Столбик это тысяча долларов внутри
   ТЕКУЩЕГО СРЕЗА, поэтому полоса заодно показывает, что делают остальные фильтры. */
.fa-hist { display: flex; gap: 1px; align-items: flex-end; height: 34px; margin-top: 9px; }
.fa-hist i { flex: 1; min-height: 1px; background: var(--panel-2); }
.fa-hist i.in { background: var(--link); opacity: .55; }

/* ── Три редкие группы одной полосой вкладок ─────────────────────────────────────────
   Топливо нужно не каждому, и три развёрнутых блока отодвигали город на экран вниз.
   Вкладки строит скрипт: без него все три панели стоят раскрытыми, как стояли до этого, и
   ни одно значение не становится недостижимым. */
.fa-quiet { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
.fa-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
  font: inherit; font-size: 13.5px; cursor: pointer;
}
.fa-tab b { font-weight: 600; }
.fa-tab small { color: var(--ink-faint); font-size: 11.5px; }
.fa-tab .arw { color: var(--ink-faint); font-size: 12px; }
.fa-tab:hover { border-color: var(--ink-faint); }
/* Вкладка, внутри которой что-то выбрано, помечена и подписана выбранным: свёрнутое не
   имеет права означать «неизвестно». */
.fa-tab.picked { border-color: var(--link); }
.fa-tab.picked small { color: var(--link); }
.fa-tab.on { border: 1.5px solid var(--ink); background: var(--bg); }
.fa-tab.on .arw { transform: rotate(90deg); }
.fa-panel { margin-top: 14px; }
.fa-panel > h3 { margin: 0; font-size: 15px; font-weight: 700; display: inline; }
.fa-panel > .note { font-size: 12px; color: var(--ink-faint); margin-left: 9px; }
/* Со скриптом заголовок панели повторяет вкладку, поэтому его печатает только вкладка. */
.fa-tabs:not([hidden]) ~ .fa-panel > h3,
.fa-tabs:not([hidden]) ~ .fa-panel > .note { display: none; }

/* ── Проверки ─────────────────────────────────────────────────────────────────────────
   То, чего нет ни у myauto, ни у auto.ge, и что стояло голыми галочками в «состоянии».
   Каждый чекбокс говорит, СКОЛЬКО ОН СТОИТ, до нажатия: «с VIN» срезает доску в восемь раз,
   и об этом надо предупредить, а не показать пустую выдачу. */
.fa-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
             gap: 8px; }
.fa-check {
  display: flex; align-items: flex-start; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 12px; font-size: 13.5px; cursor: pointer;
}
.fa-check:hover { border-color: var(--ink-faint); }
.fa-check:has(input:checked) { border-color: var(--link); background: rgba(26, 99, 196, .08); }
.fa-check input { margin: 2px 0 0; flex: none; }
.fa-check b { font-weight: 600; }
.fa-check .cost { display: block; font-size: 11px; color: var(--ink-faint);
                  line-height: 1.4; margin-top: 3px; }

/* ── Поиск по названию модели ─────────────────────────────────────────────────────────
   У Mercedes 268 живых моделей, и высота списка в 168px превращает их в свиток. Поле
   отсекает список до нескольких строк; без скрипта оно просто не сужает список, поэтому
   выбранные модели поднимаются наверх НА СЕРВЕРЕ, а не скриптом. */
.fa-find { margin-bottom: 6px; }
.modellist .mrow.hid { display: none; }
/* Выбранная модель остаётся видимой, даже когда поле её не находит: скрыть отмеченное
   значит спрятать применённый фильтр. */
.modellist .mrow:has(input:checked) { display: flex; }

/* ── Подвал формы ─────────────────────────────────────────────────────────────────────
   Стоит ВНЕ формы: «сохранить фильтр» это POST, а вложенные формы HTML запрещает. */
.fa-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line);
           display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fa-foot .show {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border: 0; border-radius: 7px;
  font: inherit; font-size: 15px; font-weight: 700;
  background: var(--link); color: #fff; cursor: pointer; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fa-foot .save {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--link); border-radius: 7px;
  background: transparent; color: var(--link);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.fa-foot .reset { font-size: 13px; color: var(--ink-dim); }

/* ── Мои фильтры, НАВЕРХУ ─────────────────────────────────────────────────────────────
   Под формой их не видел никто: до них надо было доскроллить двадцать пять контролов, то
   есть человек, у которого фильтр уже есть, собирал его заново. Оформлены как соседние
   полосы наверху: подпись заглавными, строки, кат на остальные.

   СТРОКОЙ, А НЕ ПЛИТКОЙ. У фильтра четыре величины: имя, сколько в нём условий, сколько
   машин он находит сейчас и куда шлёт. В колонке они вставали друг под другом, и три
   карточки в ряд читались как три разных объекта; в строке они стоят на одной линии, и
   ряд фильтров сравнивается взглядом сверху вниз по каждому столбцу. */
.fa-mine { margin: 16px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fa-mine > .k { margin-bottom: 0; }
.fa-cut.mine { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.fa-cut.mine > summary { min-height: 30px; }
.fa-card { border-top: 1px solid var(--line); padding: 10px 2px;
           display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.fa-card:hover { background: var(--panel); }
.fa-card h3 { margin: 0; font-size: 15px; flex: 0 1 190px; min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-card h3 a { color: var(--ink); }
/* ЧИСЛО УСЛОВИЙ, А НЕ ИХ РОССЫПЬ: фильтр из двенадцати условий давал карточку в восемь
   строк чипов, и ряд карточек переставал сравниваться глазом. Пунктир под числом это
   обещание, что при наведении покажут остальное. */
.fa-card .params { position: relative; flex: none;
                   display: inline-flex; align-items: center; gap: 6px;
                   border-bottom: 1px dashed var(--ink-faint); cursor: help;
                   font-size: 12.5px; color: var(--ink-dim); }
.fa-card .params svg { color: var(--ink-faint); }
.fa-card .params:hover, .fa-card .params:focus-visible { color: var(--ink); outline: none; }
.fa-card .tip {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 5;
  width: 268px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  box-shadow: 0 8px 24px rgba(20, 24, 29, .13);
  display: none;
}
.fa-card .params:hover .tip, .fa-card .params:focus-within .tip { display: block; }
.fa-card .tip dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; }
.fa-card .tip dt { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.fa-card .tip dd { margin: 0; font-size: 12px; color: var(--ink); text-align: right; }
.fa-card .tip dd.out { color: var(--fail); }
.fa-card .tip .sep { margin-top: 5px; padding-top: 7px; border-top: 1px solid var(--line); }
.fa-card .n { margin: 0; flex: none; font-size: 12px; color: var(--ink-faint);
              font-variant-numeric: tabular-nums; white-space: nowrap; }
/* На что человек подписан, теми же словами, что в кабинете. */
/* Строка подписки длиннее всех остальных и обрезается многоточием: она объясняет, а не
   называет, и её полный текст всегда есть в кабинете. Без обрезки она одна переносила ряд
   действий на вторую строку, и «продолговатая» карточка становилась в два этажа. */
.fa-card .sub { margin: 0; flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--ok);
                font-weight: 600; white-space: nowrap; overflow: hidden;
                text-overflow: ellipsis; }
.fa-card .sub.off { color: var(--ink-faint); font-weight: 400; }
/* Выключенная подписка остаётся на виду и приглушается: пауза, которой не видно, это
   пауза, которую нельзя снять. */
.fa-card.off > h3 a, .fa-card.off .params, .fa-card.off .n { opacity: .65; }
/* Строка, которую правят прямо сейчас: та же метка, что и на полосе записи выше, чтобы
   «сохранить изменения» и «эта строка» читались как одно действие. */
.fa-card.editing { background: rgba(26, 99, 196, .06); box-shadow: inset 3px 0 0 var(--link); }
.fa-card > .mark { flex: none; margin-left: -6px; font-size: 10.5px; font-weight: 700;
                   text-transform: uppercase; letter-spacing: .5px; color: var(--link); }
/* Ряд действий прижат к низу карточки: в ряду из трёх у каждой своё число условий, и
   кнопки, плавающие на разной высоте, читаются как разные кнопки. */
.fa-card .acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                 flex: none; margin-left: auto; }
/* Применить это основное действие карточки, поэтому кнопка, а не ссылка среди ссылок. */
.fa-card .acts .go {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 13px;
  border-radius: var(--radius); background: var(--link); color: #fff;
  font-size: 13px; font-weight: 600;
}
.fa-card .acts .go:hover { text-decoration: none; filter: brightness(1.08); }
/* Три остальных действия — тихие: в строке шириной 840 четыре обведённые кнопки не
   помещаются, и ряд переносился на вторую строку, где кнопки вставали под именем. */
.fa-card .acts .edit, .fa-card .acts .tog, .fa-card .acts .rm {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 6px;
  border: 0; background: none; color: var(--ink-dim);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.fa-card .acts .edit:hover, .fa-card .acts .tog:hover { color: var(--ink); text-decoration: underline; }
/* Удаление стирает и историю отправленного, поэтому оно последнее и тише всех. */
.fa-card .acts .del { margin-left: auto; }
.fa-card .acts .rm { color: var(--ink-faint); }
.fa-card .acts .rm:hover { color: var(--fail); text-decoration: underline; }
.fa-card.off .acts .tog { color: var(--link); font-weight: 600; }


/* ── Правая колонка: мои поиски ───────────────────────────────────────────────────────
   Раньше «мои поиски» и «недавно смотрели» печатались полными карточками через car_list:
   две выдачи на странице, которая выдачей не является. Довод «собрать, увидеть, что искал,
   увидеть, что смотрел, один заход» верный, но он про соседство, а не про равный вес. */
.fa-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 1024px) {
  .fa-shell { grid-template-columns: minmax(0, 1fr) 290px; }
  .fa-side { border-left: 1px solid var(--line); padding: 18px 0 18px 20px; margin-left: 22px; }
}
.fa-side .k { font-size: 10.5px; letter-spacing: .6px; font-weight: 700; }
.fa-saved { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.fa-saved a {
  display: block; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 12px 13px; color: var(--ink);
}
.fa-saved a:hover { text-decoration: none; border-color: var(--ink-faint); }
.fa-saved .h { display: flex; align-items: baseline; gap: 8px; }
.fa-saved .h b { font-size: 13.5px; flex: 1; }
/* Условия поиска чипами, а не строкой из девяти span в 12px --ink-faint. Это единственное
   на странице, что человек создал сам. */
.fa-saved .crit2 { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.fa-saved .crit2 span { font-size: 11px; padding: 2px 6px; border-radius: 3px;
                        background: var(--panel-2); color: var(--ink-dim); }
.fa-saved .n { display: block; margin-top: 8px; font-size: 11.5px; color: var(--ink-faint);
               font-variant-numeric: tabular-nums; }
/* «И ещё N в подписках»: строка вместо четвёртой карточки. */
.fa-more { display: flex; align-items: center; min-height: 44px; margin: 9px 0 0;
           font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
.fa-savenote {
  margin: 12px 0 0; padding: 11px 12px;
  border: 1px dashed var(--line); border-radius: 8px;
  font-size: 11.5px; line-height: 1.45; color: var(--ink-dim);
}

.fa-seen { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.fa-seen ul { list-style: none; margin: 4px 0 0; padding: 0;
              display: flex; flex-direction: column; gap: 8px; }
.fa-seen a { display: flex; gap: 9px; align-items: center; color: var(--ink); }
.fa-seen a:hover { text-decoration: none; }
.fa-seen img { width: 54px; height: 40px; object-fit: cover; border-radius: 5px;
               flex: none; background: var(--panel-2); }
.fa-seen .t { display: block; font-size: 12.5px; font-weight: 600;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-seen .p { display: block; font-size: 11.5px; color: var(--ink-faint);
              font-variant-numeric: tabular-nums; }
/* Ниже медианы ровесников — тем же зелёным, каким это говорит карточка. */
.fa-seen .p b { color: var(--ok); font-weight: 600; }

/* ── Десктоп ──────────────────────────────────────────────────────────────────────────*/
@media (min-width: 1024px) {
  .fa-sticky { display: none; }
  /* Пять кнопок «раскрыть» на экране, где всё помещается, это пять лишних решений: группа
     раскрыта независимо от `open`. Браузер без `::details-content` (до Chrome 131) оставит
     её свёрнутой, и она откроется нажатием, то есть деградирует в то же, что на телефоне. */
  .fa-grp::details-content { content-visibility: visible; block-size: auto; }
  .fa-grp > .gh { cursor: default; }
  .fa-grp > .gh .arw, .fa-grp > .gh .sel { display: none; }
}

/* ── Мобильная 380 ────────────────────────────────────────────────────────────────────
   Ответ разъезжается на две полосы: наверху счёт и чипы, то, что меняется от каждого
   клика, внизу кнопка, то, что нажимают один раз в конце. На десктопе они помещаются в
   одну строку, на 380 нет: либо число, либо кнопка съедает всю ширину. */
@media (max-width: 1023px) {
  .fa-n b { font-size: 24px; }
  /* Кнопка уезжает вниз, наверху остаётся только сброс. Он встаёт в строку с числом, а
     «отсеяли» уходит под него: три элемента в строку не влезают (151 + 140 + 56 при 344
     доступных), и без порядка на своей строке оказывался именно сброс. */
  .fa-go { margin-left: auto; order: 2; }
  .fa-go .show { display: none; }
  /* Имя и «сохранить» занимают в полосе свою строку: рядом с числом им не хватает 344
     пикселей. Строка появляется только когда есть что сохранять. «И уведомлять» на телефоне
     не помещается третьей и уезжает: канал спрашивается всё равно после записи, а без него
     строка вылезала за 380 (замер: 457). */
  .fa-save { order: 4; flex: 1 1 100%; min-width: 0; }
  .fa-save .name { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; }
  .fa-save .save { flex: none; min-height: 44px; }
  .fa-save .watch { display: none; }
  .fa-of { order: 3; flex: 1 0 100%; }

  /* Двадцать пять контролов в одном свитке это полтора экрана до первого решения. */
  .fa-grp { border-top: 0; margin-top: 0; padding-top: 0; }
  .fa-grp:first-of-type { margin-top: 0; }
  .fa-grp > .gh {
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
    min-height: 52px; border-bottom: 1px solid var(--line);
  }
  .fa-grp > .gh h3 { flex: none; font-size: 15px; }
  /* Свёрнутое НЕ означает «неизвестно»: справа стоит выбранное, а не описание группы. */
  .fa-grp > .gh .note { display: none; }
  .fa-grp > .gh .sel { flex: 1; font-size: 12px; color: var(--ink-dim); text-align: right;
                       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fa-grp > .gh .sel .out { color: var(--fail); }
  .fa-grp > .gh .sel.empty { color: var(--ink-faint); }
  .fa-grp > .gh .arw { margin-left: 2px; }
  .fa-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 16px; }
  .fa-checks { grid-template-columns: minmax(0, 1fr); }
  .fa-rows { grid-template-columns: minmax(0, 1fr); }
  .fa-quiet { border-top: 0; margin-top: 0; padding-top: 0; }
  .fa-tabs { gap: 6px; margin: 14px 0; }

  /* Пальцем. `.mrow` это padding: 5px 8px при 13px кегле, около 27 пикселей, и в списке из
     четырёх значений подряд это строка, в которую попадают мимо. */
  .fa-shell .mrow { min-height: 44px; padding: 0 10px; font-size: 14px; }
  .fa-shell .mrow input { width: 18px; height: 18px; }
  .fa-shell select, .fa-shell input[type="number"], .fa-shell input[type="text"],
  .fa-shell input[type="search"], .fa-shell .row.chk { min-height: 44px; }
  .fa-shell .fa-seg label, .fa-shell .fa-tab { min-height: 44px; }
  /* Кнопка «кроме» на телефоне: двадцать два пикселя пальцем не берутся, поэтому она
     становится целью в 44px и теряет слово, оставляя знак. Прятать её нельзя: чипы наверху
     умеют только вернуть значение обратно, а снять его на телефоне больше нечем. */
  .fa-shell .vrow .ex {
    min-height: 44px; min-width: 44px; height: auto; padding: 0 10px;
    justify-content: center;
  }
  .fa-shell .vrow .ex em { display: none; }
  .fa-shell .vrow .ex span { font-size: 17px; }
  .fa-shell .notrow label { min-height: 36px; padding: 0 12px; font-size: 13px; }

  .fa-side { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  /* На телефоне строка снова становится столбцом: четырём величинам в 344px не встать в
     ряд, и перенос без этого рвёт их по одной. */
  /* Строка на телефоне это две строки, а не пять: имя во всю ширину, под ним число условий
     и число машин, под ними ряд действий. Столбиком из пяти она давала 213 пикселей на
     фильтр, то есть три фильтра съедали экран до первого контрола. */
  .fa-card { align-items: center; gap: 6px 12px; padding: 9px 2px; }
  .fa-card h3 { flex: 1 1 100%; }
  .fa-card .params { align-self: center; }
  .fa-card .acts { flex: 1 1 100%; margin-left: 0; justify-content: space-between; gap: 4px; }
  .fa-card .acts .del { margin-left: 0; }
  .fa-card .acts .go { padding: 0 12px; }
  .fa-card .acts .edit, .fa-card .acts .tog, .fa-card .acts .rm { padding: 0 2px; }
  .fa-card .acts { margin-left: 0; padding-top: 10px; border-top: 1px solid var(--line); }
  /* На 380 ряд действий переносится, и «Настроить», прижатое вправо, оказывалось одно на
     своей строке у правого края. Пусть идёт следом за выключателем. */
  .fa-card .acts .cfg { margin-left: 0; }
  /* Все четыре действия карточки пальцем, а не только выключатель. */
  .fa-card .acts .go, .fa-card .acts .edit, .fa-card .acts .tog, .fa-card .acts .rm,
  .fa-keep .save, .fa-keep input { min-height: 44px; }
  .fa-keep label { flex: 1 1 100%; }
  .fa-foot { padding-bottom: 8px; }
  .fa-foot .show { display: none; }

  .fa-sticky {
    position: sticky; bottom: 0; z-index: 19;
    display: flex; gap: 8px;
    /* Справа место под кружок помощника: он `position: fixed`, 40px, и на 380 ложился
       ПОВЕРХ правого края кнопки. 16 от края + 40 кружок + 8 зазор. */
    padding: 9px 64px calc(9px + env(safe-area-inset-bottom)) 12px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    margin: 0 -18px;
  }
  .fa-sticky .show {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    min-height: 46px; border: 0; border-radius: 7px;
    font: inherit; font-size: 15px; font-weight: 700;
    background: var(--link); color: #fff; cursor: pointer; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
}