/* ==========================================================================
   base.css — каркас макета шаблона «Мариуполь» (шапка, основная область,
   подвал). Mobile first; цвета и радиусы — только переменные из tokens.css
   (D17). Наполнение главной — в следующих задачах (T12–T17).
   ========================================================================== */

/* --- База ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;        /* подвал прижат к низу коротких страниц */
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  background-image: var(--bg-image);
  /* T76, Р1: фон не fixed, а на всю высоту документа — иначе на длинных
     страницах градиент и цветные пятна обрываются после первого экрана
     (на полном скриншоте видна резкая граница). Пятна в --bg-image заданы
     в процентах от высоты body и распределены по всей длине. */
  background-attachment: scroll;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;          /* основной текст 14–15 px (DESIGN.md) */
  font-weight: 500;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  body { font-size: 15px; }
}

img { max-width: 100%; height: auto; }

/* Иконки по умолчанию не разрастаются (§11.2, T47): значок без явного
   размера компонента — 1em, сверху предел 64px. Плитки hero и значки
   пустых состояний исключений не требуют: их размеры заданы своими
   правилами (и эти значения меньше 64px). Фотографии и логотипы под
   правило не подпадают — это не svg.icon и не img из /icons/ */
svg.icon,
img[src*="/icons/"] {
  width: 1em;
  height: 1em;
  max-width: 64px;
  max-height: 64px;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
}

a:hover { text-decoration: underline; }

/* Видимый фокус с клавиатуры (T21): рамка --accent-ink читается в обеих темах
   и на --card, и на --hero (≥ 3:1 для индикатора фокуса, WCAG 2.4.11);
   :focus-visible не показывает рамку при кликах мышью */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* T75: на тёмном teal-hero коричневый --accent-ink не читается (2.4:1) —
   у ссылок и пунктов на hero контур фокуса цветом --hero-ink (белый,
   5.2:1+ на обоих краях градиента) */
.m-newshero:focus-visible,
.m-herotile:focus-visible,
.m-tabbar__item:focus-visible {
  outline-color: var(--hero-ink);
}

h1, h2, h3 { font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }

/* Контентные заголовки и ссылки ядра (T21): theme-text красит h1–h6 тёмным
   #34495e — на тёмной карточке шаблона он не читается; h1 span/a — серым
   #BDC3C7, a.ajaxlink — синим #2980b9, все три ниже AA на наших подложках.
   Перекрашиваем цветами темы (правится только здесь, не в ядре) */
.m-body h1, .m-body h2, .m-body h3,
.m-body h4, .m-body h5, .m-body h6 { color: var(--ink); }

/* T75 (C3): заголовки h1 на всех контентных страницах (списки, страницы
   записей, статьи) — Onest 600; h2–h4 того же шрифта */
.m-body h1 { font-family: var(--font-head); font-weight: 600; }

.m-body h1 a { color: var(--accent-ink); }
.m-body h1 span { color: var(--muted); }

a.ajaxlink { color: var(--accent-ink); }

/* Подписи форм ядра (T21): legend у theme-gui тёмный #34495e (на тёмной
   карточке не читается), подсказки .hint — серый #999 (ниже AA и на белом),
   лейблы полей — #68809B (4.1:1 на белом, 3.9:1 на тёмной карточке);
   перекрашиваем токенами */
.m-body legend { color: var(--ink); }
.m-body .hint { color: var(--muted); }
.m-body form .field label { color: var(--ink); }

/* Уважаем настройку «меньше анимации» (DESIGN.md) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Пульсация скелетонов подгрузки (SPEC.md п. 10, T21): используется
   подложками фото карточек новостей (m-newshero/m-newscard) и доски (m-bcard) */
@keyframes m-skeleton {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* --- Шапка ---------------------------------------------------------------- */
/* Телефон: логотип + переключатель темы, ниже плашки погоды/курсов,
   ниже поиск на всю ширину. Компьютер: две строки — логотип, плашки,
   переключатель, поиск, кнопка «Подать объявление»; ниже меню из
   настроек (виджет menu в позиции header, T18). На компьютерной главной
   поиска в шапке нет — он в строке с «Важное» ниже (T19, см. одноимённый
   раздел в середине файла). */

.m-header {
  /* T78: шапка образует контекст наложения из-за backdrop-filter. Без
     z-index её выпадающее меню (даже с z-index 60 внутри) рисовалось ПОД
     идущей следом полосой разделов .m-nav (z-index 50) и плитками, из-за
     чего пункты было не нажать. 70 — выше контента и .m-nav, ниже таббара
     (90) и модальных окон (100+). */
  position: relative;
  z-index: 70;
  background: var(--header-glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--ink);
  padding: 12px 16px;
}

.m-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* Логотип: на телефоне круглый значок + надпись, на компьютере широкий.
   Надпись — текстом, как в макете T76: Onest 800, тёмный акцент;
   «.com» — ссылочный акцент (span.m-logo__tld) */
.m-logo {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;          /* цель касания */
  color: var(--ink);
}

.m-logo:hover { text-decoration: none; }

.m-logo__round {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.m-logo__text {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.m-logo__tld { color: var(--accent-ink); }

.m-logo__wide { display: none; }

@media (min-width: 1024px) {
  .m-logo__round,
  .m-logo__text { display: none; }

  .m-logo__wide {
    display: block;
    height: 44px;
    width: auto;
    max-width: none;
  }
}

/* D18: в тёмной теме на компьютере широкий логотип не читается (тёмно-синий
   на тёмном хиро) — показываем круглый значок + надпись, как на телефоне.
   Два случая: тема выбрана явно (data-theme="dark") и авто-режим при
   тёмной системе — тем же приёмом, что и токены в tokens.css */
@media (min-width: 1024px) {
  :root[data-theme="dark"] .m-logo__round,
  :root[data-theme="dark"] .m-logo__text { display: block; }

  :root[data-theme="dark"] .m-logo__wide { display: none; }
}

@media (min-width: 1024px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .m-logo__round,
  :root:not([data-theme="light"]) .m-logo__text { display: block; }

  :root:not([data-theme="light"]) .m-logo__wide { display: none; }
}

/* Позиция виджетов шапки: меню из настроек (T18), на телефоне скрыто —
   навигация в нижней плавающей панели. Контейнер второго ряда (T41, §9)
   на телефоне «прозрачен» — дети участвуют в раскладке шапки напрямую */
.m-header__widgets { order: 5; }

.m-header__row2 { display: contents; }

/* Строка «переключатель темы + курсы» (§11.1, T47): на телефоне — свой
   ряд под «логотип + вход», на компьютере «прозрачна» (display: contents
   в медиазапросе 1024 ниже) и её дети встают в первую строку шапки */
.m-header__meta {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Плашки погоды и курсов валют (данные — mariupol_extdata, T22:
   Open-Meteo и ЦБ РФ; нет данных — плашки скрыты целиком, main.tpl.php) */
.m-header__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m-pill {
  background: var(--chip);   /* чипы валют — как в макете C3 (T75) */
  border-radius: var(--r-pill);
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* Иконка погоды в плашке (inline SVG, цвет — currentColor) */
.m-pill__icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  flex: 0 0 auto;
}

/* Переключатель темы: авто / светлая / тёмная (js/theme.js).
   На телефоне стоит первым в строке .m-header__meta (§11.1, T47);
   на компьютере — в первой строке шапки справа (медиазапрос 1024 ниже) */
.m-theme-toggle {
  margin-left: 0;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--r-pill);
  background: var(--chip);   /* круглая кнопка темы — как в макете C3 (T75) */
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.m-theme-toggle:active { transform: scale(0.94); }

.m-theme-toggle svg { display: none; }

.m-theme-toggle[data-mode="auto"]  .m-theme-icon-auto,
.m-theme-toggle[data-mode="light"] .m-theme-icon-light,
.m-theme-toggle[data-mode="dark"]  .m-theme-icon-dark { display: block; }

/* Поиск в шапке: пока ведёт на стандартный поиск InstantCMS */
.m-search {
  order: 4;
  flex: 1 1 100%;
}

.m-search input {
  width: 100%;
  height: 44px;
  margin: 0;
  border: none;
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  padding: 0 18px;
  appearance: none;
  -webkit-appearance: none;
}

.m-search input::placeholder { color: var(--muted); opacity: 1; }

.m-search input:focus {
  outline: 2px solid var(--accent-ink);  /* ≥ 3:1 на --card в обеих темах */
  outline-offset: 1px;
}

/* Кнопка «Подать объявление» (T18 — компьютерная шапка, T50 §13.2 —
   компактная «Подать» во втором ряду мобильной шапки: Lucide plus + слово,
   высота 36px, правый край совпадает с пилюлями входа). Оранжевая заливка
   и размеры текста — §7 (T27a, решение Q19 вариант B); на телефоне тень
   по §13.2. Круглая «+» в нижней панели (T17) остаётся без изменений */
.m-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  margin-left: auto;           /* правый край ряда 2 = правый край пилюль */
  padding: 0 12px;
  border-radius: 18px;
  background: var(--orange-fill);
  box-shadow: var(--btn-add-shadow);
  color: var(--orange-ink);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.m-add__label-full { display: none; }
.m-add__label-short { display: inline; }

.m-add:hover {
  text-decoration: none;
  filter: brightness(1.05);
}

.m-add:active {
  transform: translateY(1px);
  box-shadow: var(--orange-shadow-press);
}

.m-add:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.m-add svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

@media (min-width: 1024px) {
  .m-add {
    gap: 8px;
    height: 44px;
    margin-left: 0;
    padding: 0 20px;
    border-radius: var(--r-pill);
    box-shadow: var(--orange-shadow);
    font-size: 15px;
  }

  .m-add__label-full { display: inline; }
  .m-add__label-short { display: none; }

  .m-add svg {
    width: 18px;
    height: 18px;
  }
}

/* Вход в шапке для гостя (T41, §9; мобильный ряд — §11.1, T47): пилюли
   «Войти» и «Регистрация» 38px/19, зазор 8px. На телефоне — справа, в
   одном ряду с логотипом (по классу m-guest надпись логотипа скрыта,
   чтобы ряд помещался без скролла и переноса); на компьютере — во втором
   ряду шапки по правому краю, под кнопкой «Подать объявление».
   Выводится только гостю (main.tpl.php). Класс m-login: m-auth занят
   карточкой страницы входа (§3, T27) */
.m-login {
  order: 2;                    /* телефон: сразу за логотипом (order 1) */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;           /* прижать к правому краю ряда */
  flex: 0 0 auto;
}

/* Телефон (гость): надпись «Мариуполь.com» убираем — с ней ряд
   «логотип + Войти + Регистрация» не помещается на 390 px без скролла;
   круглый значок и alt остаются. Вошедшему надпись не трогаем */
@media (max-width: 1023.98px) {
  body.m-guest .m-logo__text { display: none; }
}

/* §13.1 (T50): «Войти» — светлый вертикальный градиент с тёмным текстом,
   «Регистрация» — белый градиент с контуром. Обе чуть приподнимаются на
   hover и усиливают тень; размер 38px, на телефоне до 420px — 36px */
.m-login__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--btn-login-border);
  border-radius: 19px;
  background: linear-gradient(180deg, var(--btn-login-from), var(--btn-login-to));
  color: var(--btn-login-ink);
  box-shadow: var(--btn-login-blink), var(--btn-login-shadow);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.m-login__btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--btn-login-blink), var(--btn-login-shadow-hover);
}

.m-login__btn:active {
  transform: none;
  box-shadow: var(--btn-login-blink), var(--btn-login-shadow-active);
}

.m-login__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.m-login__reg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--btn-reg-border);
  border-radius: 19px;
  background: linear-gradient(180deg, var(--btn-reg-from), var(--btn-reg-to));
  color: var(--btn-reg-ink);
  box-shadow: var(--btn-reg-blink), var(--btn-reg-shadow);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.m-login__reg:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--btn-reg-blink), var(--btn-reg-shadow-hover);
}

.m-login__reg:active {
  transform: none;
  box-shadow: var(--btn-reg-blink), var(--btn-reg-shadow-active);
}

.m-login__reg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Меню вошедшего пользователя (T54, DESIGN-FORMS.md §13) ------------- */
/* Пилюля той же геометрии и материала, что «Регистрация» у гостя: светлый
   градиент, контур, тень, 38px (36px до 420px). Внутри — аватар (или инициал)
   и ник. На телефоне пилюля встаёт в ряд с логотипом справа, на компьютере —
   правый край второго ряда, где у гостя «Войти/Регистрация». Меню —
   выпадающая карточка; открытием управляет js/user-menu.js */
.m-user {
  order: 2;                    /* телефон: сразу за логотипом */
  position: relative;
  margin-left: auto;           /* прижать к правому краю ряда */
  flex: 0 0 auto;
}

.m-user__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  min-width: 44px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--btn-reg-border);
  border-radius: 19px;
  background: linear-gradient(180deg, var(--btn-reg-from), var(--btn-reg-to));
  color: var(--btn-reg-ink);
  box-shadow: var(--btn-reg-blink), var(--btn-reg-shadow);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.m-user__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-reg-blink), var(--btn-reg-shadow-hover);
}

.m-user__btn:active {
  transform: none;
  box-shadow: var(--btn-reg-blink), var(--btn-reg-shadow-active);
}

.m-user__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.m-user__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--tint);
}

.m-user__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tint);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.m-user__name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-user__chevron {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform 120ms ease;
}

.m-user.is-open .m-user__chevron { transform: rotate(180deg); }

.m-user__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
  max-width: calc(100vw - 24px);
  margin: 0;
  padding: 6px;
  /* T78: панель непрозрачная в обеих темах (в светлой --card полупрозрачный) */
  background: var(--menu-bg);
  color: var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}

.m-user__menu[hidden] { display: none; }

.m-user__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;            /* цель касания */
  padding: 0 12px;
  border-radius: 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.m-user__item:hover {
  /* T78: --tint в светлой теме — белая полупрозрачная подложка, на
     непрозрачной панели #FFFFFF её не видно; --menu-hover задан для обоих тем. */
  background: var(--menu-hover);
  text-decoration: none;
}

.m-user__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.m-user__item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--muted);
}

.m-user__item--logout svg { color: var(--danger-ink, var(--muted)); }

.m-user__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.m-user__divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--tint);
}

/* Телефон: с ником в пилюле ряд «логотип + профиль» не помещается на
   360–390 px — как и гостю, оставляем круглый знак логотипа */
@media (max-width: 1023.98px) {
  body.m-user-logged .m-logo__text { display: none; }

  .m-user__name { max-width: 120px; }
}

/* §13.2 (T50): на телефоне до 420px пилюли 36px; ряд 2 ужимаем — при
   360 px курсы, тема и «Подать» должны поместиться без переноса и скролла */
@media (max-width: 420px) {
  .m-login__btn,
  .m-login__reg {
    height: 36px;
    border-radius: 18px;
  }

  /* T54: пилюля профиля — та же высота, что у пилюль входа */
  .m-user__btn {
    height: 36px;
    gap: 6px;
    padding: 0 10px 0 5px;
    border-radius: 18px;
  }

  .m-user__avatar {
    width: 26px;
    height: 26px;
  }

  .m-user__name {
    max-width: 96px;
    font-size: 13px;
  }

  .m-user__chevron {
    width: 12px;
    height: 12px;
  }

  .m-header__meta { gap: 6px; }
  .m-header__pills { gap: 4px; }
  .m-pill {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
  }
  .m-pill__icon {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
  .m-add {
    gap: 3px;
    padding: 0 10px;
    font-size: 12px;
  }
  .m-add svg {
    width: 14px;
    height: 14px;
  }
}

/* --- Меню компьютерной шапки (виджет menu, позиция header, T18) ------------- */
/* Пункты правятся в админке (Конструкции → Меню), выбор меню — в настройках
   виджета. На телефоне меню скрыто (панель T17). Активный пункт — цветом
   --accent-ink, как в нижней панели; дочерние пункты — выпадающий список
   на CSS (:hover / :focus-within). */

.m-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;             /* телефон: своего меню в шапке нет */
}

@media (min-width: 1024px) {
  .m-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    margin-top: 2px;
  }
}

.m-menu__item { position: relative; }

.m-menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* цель касания (SPEC.md п. 11) */
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--hero-ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.m-menu__link:hover {
  text-decoration: none;
  background: var(--pill);
}

.m-menu__item.is-active > .m-menu__link {
  color: var(--accent-ink);
}

.m-menu__link.is-disabled { opacity: 0.5; }

/* Дочерние пункты: карточка под пунктом меню */
.m-menu__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: none;
  flex-direction: column;
  /* T78: выпадающее подменю — непрозрачная панель в обеих темах */
  background: var(--menu-bg);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
}

.m-menu__item:hover > .m-menu__sub,
.m-menu__item:focus-within > .m-menu__sub { display: flex; }

.m-menu__sub .m-menu__link {
  width: 100%;
  color: var(--ink);
  border-radius: 14px;
}

.m-menu__sub .m-menu__link:hover { background: var(--menu-hover); }

@media (min-width: 1024px) {
  .m-header__inner { gap: 8px 16px; }

  /* Первая строка: логотип, справа плашки, переключатель темы, поиск и
     «Подать объявление». Строка m-header__meta «прозрачна» (§11.1, T47):
     её дети — плашки и переключатель — участвуют в раскладке первой
     строки напрямую. Вторая строка (T41, §9) — отдельный контейнер
     на всю ширину: меню из настроек (T18), а для гостя справа
     «Войти»+«Регистрация» — правый край ряда под кнопкой «Подать
     объявление» */
  .m-logo            { order: 1; }
  .m-header__meta    { display: contents; }
  /* T77 (D29): плашки погоды не сжимаем — иначе при одном ряду они
     переносятся внутри себя и увеличивают высоту шапки. */
  .m-header__pills   { order: 2; margin-left: auto; flex: none; }
  .m-theme-toggle    { order: 3; margin-left: 0; }
  .m-search          { order: 4; flex: 0 1 260px; }
  .m-add             { order: 6; }

  .m-header__row2 {
    order: 7;
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px 12px;
  }

  .m-header__row2 .m-header__widgets {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    order: 0;
  }
}

/* T75, П3: на ширине от 1200 «Войти/Регистрация» (или пилюля профиля) —
   в первой строке шапки, вместе с логотипом, плашками, темой и кнопкой
   «Подать объявление». Контейнер второго ряда «прозрачен»; меню из
   настроек, если оно появится, по-прежнему занимает отдельный ряд
   (flex-basis 100%). Пустой контейнер виджетов не создаёт строку. */
@media (min-width: 1200px) {
  /* T77 (D29): с тремя плашками погоды (10°, $, €) первый ряд в светлой теме
     переставал помещаться в 1280px и «Подать объявление» падало на вторую
     строку (t47 11.1/T75-2). На компьютере ряд обязан быть одним: запрещаем
     перенос, поиск сжимается на недостающие пиксели. */
  .m-header__inner { flex-wrap: nowrap; }
  .m-search { min-width: 0; }

  .m-header__row2 { display: contents; }

  .m-login,
  .m-user {
    order: 5;
    margin-left: 16px;
  }

  .m-header__row2 .m-header__widgets {
    order: 8;
    flex: 1 1 100%;
    min-width: 0;
  }

  .m-header__row2 .m-header__widgets:empty { display: none; }
}

/* --- Полоса разделов (позиция top, T75 этап 2) -----------------------------
   Виджет меню с шаблоном menu_sections: на компьютере — липкая полоса
   овальных чипов под шапкой (как .sticky в макете C3), на телефоне (≤820px)
   полоса не липкая, вместо чипов — сетка цветных плиток 3 в ряд. */

.m-nav {
  width: 100%;
  background: var(--bg);
}

/* T76, Р8: на телефоне полоса плиток не липкая — прозрачный фон, чтобы
   за стеклянными плитками были видны пятна фона (до этого --bg закрывал
   градиент сплошным цветом). На компьютере фон остаётся: полоса липкая. */
@media (max-width: 820.98px) {
  .m-nav { background: transparent; }
}

@media (min-width: 821px) {
  .m-nav {
    position: sticky;
    top: 0;
    z-index: 50;               /* поверх контента, ниже модальных окон */
    box-shadow: 0 1px 0 var(--line);
  }
}

/* T80: на телефоне (до 900px) ряд плиток разделов показываем только на
   главной. На внутренних страницах (вход, регистрация, категории,
   объявления, новости, профиль, формы) он занимал первый экран и сдвигал
   форму вниз. Компьютер (от 900px) не меняется. Путь в разделы с
   внутренних страниц — логотип и пункт «Главная» нижней панели (оба → «/»). */
@media (max-width: 899.98px) {
  body:not(.m-home) .m-nav { display: none; }
}

.m-secnav__wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Плитки разделов (T76, этап 3): стеклянные плитки вместо чипов.
   Телефон — сетка 3 равные колонки, «Народная карта» последней
   на 2 колонки; компьютер — все 11 в один ряд под шапкой. */
.m-secnav__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 12px;
}

.m-secnav__tile {
  min-height: 92px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 4px 12px;
  background: var(--tile-fill);
  border: 1px solid var(--tile-edge);
  border-radius: var(--r-tile);
  box-shadow: var(--tile-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.m-secnav__tile:hover,
.m-secnav__tile.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tile-ring);
  text-decoration: none;
}

.m-secnav__tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.m-secnav__tile-ico {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: transform 0.25s ease;
}

.m-secnav__tile-ico svg {
  width: 44px;
  height: 44px;
  display: block;
}

.m-secnav__tile:hover .m-secnav__tile-ico {
  transform: translateY(-2px) scale(1.06);
}

.m-secnav__tile-name {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Узкий телефон (360px): длинная подпись «Недвижимость» не влезает
   в колонку при 13px — уменьшаем только подпись, значки те же 44px */
@media (max-width: 380px) {
  .m-secnav__tile-name { font-size: 12px; }
}

/* «Народная карта» — последняя, на 2 колонки (телефон); на компьютере
   возвращается на своё место в общем ряду */
.m-secnav__tile--map {
  grid-column: span 2;
  order: 1;
}

@media (prefers-reduced-motion: reduce) {
  .m-secnav__tile-ico { transition: none; }

  .m-secnav__tile:hover .m-secnav__tile-ico { transform: none; }
}

@media (min-width: 821px) {
  .m-secnav__tiles {
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 0;
  }

  .m-secnav__tile { min-height: 88px; padding: 12px 6px 11px; }

  .m-secnav__tile-ico,
  .m-secnav__tile-ico svg { width: 38px; height: 38px; }

  .m-secnav__tile-name { font-size: 12.5px; }

  .m-secnav__tile--map { grid-column: auto; order: 0; }
}

/* --- Основная область ------------------------------------------------------ */

.m-main {
  flex: 1 1 auto;            /* каркас не «схлопывается» на пустой главной */
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
  width: 100%;
}

.m-main__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .m-main__inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .m-content { flex: 1 1 auto; min-width: 0; }

  .m-aside {
    flex: 0 0 300px;
    width: 300px;
  }
}

/* Вертикальный ритм блоков главной (T16a): базовый зазор 16 px между всеми
   блоками home-top (плитки → чипы — из диапазона 16–20 px), перед
   «Главное сегодня» — 22 px (16 + 6, диапазон 20–24 px) */
#widget_pos_home-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.m-mainnews { margin-top: 6px; }

/* Компьютерная главная (T19, DESIGN.md п. 9): поиск и «Важное» в одной
   строке, затем главный блок (новость + плитки), затем сетка категорий
   6×2; лента «Новости», «Рекомендуем» и карусели остаются после них в
   своём порядке. На телефоне порядок прежний (T16a). */
.m-search--row { display: none; }   /* на телефоне работает поиск в шапке */

@media (min-width: 1024px) {
  #widget_pos_home-top {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 12px;
  }

  /* Хвост главной (лента, «Рекомендуем», карусели): один порядок — среди
     равных сохраняется порядок DOM; переставляемые блоки получили 0–4 */
  #widget_pos_home-top > * {
    order: 6;
    flex: 0 0 100%;
    min-width: 0;
  }

  #widget_pos_home-top .m-search--row {
    order: 0;
    flex: 1 1 320px;
    display: flex;
    align-items: center;       /* поле поиска по центру строки */
  }

  #widget_pos_home-top .m-notice {
    order: 1;
    flex: 2 1 460px;
    display: flex;
    align-items: center;
    min-height: 56px;
  }

  #widget_pos_home-top .m-mainnews { order: 2; }
  #widget_pos_home-top .m-tiles    { order: 3; }
  #widget_pos_home-top .m-chips    { order: 4; }

  /* Поиск в шапке компьютерной главной не нужен — он в строке с «Важное»;
     на внутренних страницах шапочный поиск остаётся (T11/T18) */
  body.m-home .m-header .m-search { display: none; }
}

/* Карточка-подложка для контента страницы (статьи, списки) */
.m-body {
  background: var(--card);
  border-radius: var(--r-block);
  box-shadow: var(--shadow);
  padding: 16px;
}

/* Сообщения сессии (успех/ошибка/инфо) */
.sess_messages { margin-bottom: 16px; }

.sess_messages .message_success,
.sess_messages .message_error,
.sess_messages .message_info {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--muted);
  padding: 12px 16px;
  margin: 0 0 8px;
}

.sess_messages .message_success { border-left-color: var(--ok); }
.sess_messages .message_error   { border-left-color: var(--accent); }
.sess_messages .message_info    { border-left-color: var(--muted); }

/* Предупреждение «сайт выключен» */
.m-site-off {
  background: var(--orange-fill);
  color: var(--orange-ink);
  padding: 12px 16px;
  text-align: center;
}

/* --- Сетка категорий (виджет mariupol_tiles, T12) --------------------------- */
/* 3×4 на телефоне, 6×2 на компьютере; плитка целиком кликабельна,
   радиус и цвета — только токены (DESIGN.md).
   Подложка значка (T39, DESIGN-FORMS.md §8): 60px, радиус 18, градиент
   и градиентный контур (border: transparent + background-clip), тени —
   токены --tile-* в tokens.css. */

.m-tiles__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.m-tile {
  min-height: 88px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px;
  background: var(--card);
  border-radius: var(--r-tile);
  box-shadow: var(--tile-card-shadow);
  color: var(--ink);
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.m-tile:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--tile-card-shadow-hover);
}

.m-tile:active { transform: translateY(0); }

.m-tile__icon-wrap {
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;          /* градиентный контур (§8) */
  border-radius: var(--r-icon-box);
  background:
    var(--tile-fill) padding-box,
    var(--tile-edge) border-box;
  box-shadow: var(--tile-shadow);
  color: var(--accent-ink);
}

.m-tile__svg {
  width: 32px;
  height: 32px;
  filter: var(--tile-icon-shadow);
}

.m-tile__img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: var(--tile-icon-shadow);
}

.m-tile__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .m-tiles__grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }
}

/* Плитки сверх 12 — под кнопкой «Все разделы» */
.m-tiles__item--extra { display: none; }

.m-tiles--expanded .m-tiles__item--extra { display: flex; }

.m-tiles__more {
  margin-top: 12px;
  text-align: center;
}

.m-tiles__more-btn {
  min-height: 44px;
  padding: 10px 24px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.m-tiles__more-btn:active { transform: scale(0.97); }

/* --- Промо-полоса (виджет mariupol_promo, T13) ----------------------------- */
/* Горизонтальные чипы с точкой-акцентом; не помещаются — прокрутка
   по горизонтали (DESIGN.md, п. 3). Чип целиком кликабелен. */

.m-chips__row {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.m-chips__row::-webkit-scrollbar { display: none; }

.m-chip {
  flex: 0 0 auto;
  min-height: 44px;          /* цель касания */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  /* T75 (макет C3): пилюля на нейтральной подложке --chip, без тени */
  background: var(--chip);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.m-chip:hover { text-decoration: none; }

.m-chip:active { transform: scale(0.97); }

.m-chip__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
}

/* На компьютере промо-чипов нет: в композиции компьютерной главной
   (DESIGN.md, п. 9) промо-полосы нет, решение по Q16 — QUESTIONS.md */
@media (min-width: 768px) {
  .m-chips { display: none; }
}

/* --- «Важное» (виджет mariupol_notice, T13) --------------------------------- */
/* Белая плашка с оранжевой полосой слева, срочное сообщение редакции.
   Не активна — виджет не выводится вовсе (DESIGN.md, п. 4). */

.m-notice {
  display: block;
  background: var(--card);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 13px 16px;
  color: var(--ink);
  font-weight: 600;
}

.m-notice:hover { text-decoration: none; }

.m-notice:active { transform: scale(0.99); }

/* --- Главная новость (виджет mariupol_mainnews, T14) ------------------------ */
/* «Главное сегодня» — карточка на градиентном --hero, целиком кликабельна.
   Лента «Новости» — горизонтальная прокрутка со scroll-snap; на компьютере
   сетка из 4 карточек вместо прокрутки (DESIGN.md, п. 5 и п. 7). */

.m-mainnews__caption {
  margin: 0 0 10px;
  color: var(--ink);         /* ядро красит h2 своим цветом — перебиваем */
  font-size: 22px;           /* заголовки блоков 22 px (DESIGN.md) */
  font-weight: 800;
}

/* Главная новость */

.m-newshero {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--hero);
  color: var(--hero-ink);
  border-radius: var(--r-block);
  box-shadow: var(--shadow);
}

.m-newshero:hover { text-decoration: none; }

.m-newshero:active { transform: scale(0.99); }

.m-newshero__photo,
.m-newscard__photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  background: var(--photo);  /* заглушка, пока у новости нет фото */
}

/* Скелетон подгрузки (T21): пульсирующая подложка под img — пока файл фото
   едет по сети, вместо пустоты виден «дышащий» плейсхолдер; загрузившееся
   фото (position: relative) ложится поверх. Глушится prefers-reduced-motion */
.m-newshero__photo::before,
.m-newscard__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--photo);
  animation: m-skeleton 1.6s ease-in-out infinite;
}

.m-newshero__photo img,
.m-newscard__photo img {
  position: relative;        /* фото поверх скелетона */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Заглушка «нет фото» у главной новости (§11.8, T47): вместо серого
   пустого блока — градиент в палитре В1 (подложка плиток §8) со значком
   newspaper 48px по центру; значок кладёт шаблон виджета */
.m-newshero__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    var(--tile-fill) padding-box,
    var(--tile-edge) border-box;
}

.m-newshero__ph svg {
  width: 48px;
  height: 48px;
  color: var(--accent-ink);
  filter: var(--tile-icon-shadow);
}

.m-newshero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px 18px;
}

.m-newshero__date {
  background: var(--pill);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.m-newshero__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.m-newshero__teaser {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  opacity: 0.75;
}

/* Главный блок компьютерной главной (T19): новость и рядом две плитки —
   «Объявления» и «Народная карта» (DESIGN.md, п. 9). На телефоне плитки
   скрыты, .m-heroblock ничем не отличается от одной карточки новости */
.m-herotile { display: none; }

@media (min-width: 1024px) {
  .m-heroblock {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) 1fr 1fr;  /* новость ~половина, плитки — по четверти */
    gap: 12px;
    align-items: stretch;      /* плитки вытягиваются по высоте новости */
  }

  .m-herotile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 12px;
    background: var(--hero);
    color: var(--hero-ink);
    border-radius: var(--r-block);
    box-shadow: var(--shadow);
    text-align: center;
  }

  .m-herotile:hover {
    text-decoration: none;
    filter: brightness(1.02);
  }

  .m-herotile:active { transform: scale(0.99); }

  /* Подложка значка герой-плитки (T39, §8): 88px, радиус 28, те же
     градиент/контур, что у плиток разделов, тень сильнее (--herotile-shadow) */
  .m-herotile__icon {
    width: 88px;
    height: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--r-icon-box-lg);
    background:
      var(--tile-fill) padding-box,
      var(--tile-edge) border-box;
    box-shadow: var(--herotile-shadow);
    color: var(--accent-ink);
  }

  .m-herotile__icon svg {
    width: 44px;
    height: 44px;
    filter: var(--tile-icon-shadow);
  }

  .m-herotile__title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink);
  }

  /* Hover подписи — оранжевый (§8: «штатное hover-состояние») */
  .m-herotile:hover .m-herotile__title { color: var(--accent-ink); }

  /* Строка-подпись под заголовком (§8): 13px/600. Цвет — --muted-strong
     (Q27, T41): обычный --muted на краях градиента --hero давал 4.10–4.23:1,
     усиленный токен проходит AA в обеих темах */
  .m-herotile__sub {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--muted-strong);
  }
}

/* Лента «Новости»: прокрутка со scroll-snap */

.m-newsribbon__row {
  margin: 0;
  padding: 2px 2px 8px;      /* место для тени карточек при прокрутке */
  list-style: none;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.m-newsribbon__row::-webkit-scrollbar { display: none; }

.m-newsribbon__item {
  flex: 0 0 76%;             /* на телефоне виден «хвост» следующей карточки */
  scroll-snap-align: start;
}

.m-newscard {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  color: var(--ink);
}

.m-newscard:hover { text-decoration: none; }

.m-newscard:active { transform: scale(0.98); }

.m-newscard__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px 14px;
}

.m-newscard__date {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.m-newscard__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

@media (min-width: 1024px) {
  .m-mainnews__caption { font-size: 28px; }

  .m-newshero__photo { height: 380px; aspect-ratio: auto; }

  .m-newshero__title { font-size: 26px; }

  /* На компьютере вместо прокрутки — сетка из 4 карточек (DESIGN.md, п. 7) */
  .m-newsribbon__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    overflow: visible;
    padding: 0 0 4px;
    scroll-snap-type: none;
  }

  .m-newsribbon__item { flex: auto; }
}

/* --- Колонка справа компьютерной главной (виджет mariupol_sidecol, T20) ----- */
/* «Афиша», «Ответы», «Заметили проблему?» (DESIGN.md, п. 9). На телефоне
   колонки нет — в мобильной композиции главной её нет, разделы достижимы
   из сетки категорий. Блок: карточка, заголовок-ссылка на раздел, список
   записей (заголовок + вторая строка). Пустых блоков не бывает: виджет
   не выводит их на сервере. */

.m-sidecol { display: none; }

.m-sideblock {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.m-sideblock__caption {
  margin: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--pill);
}

.m-sideblock__link {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.m-sideblock__link:hover { text-decoration: none; color: var(--accent-ink); }

.m-sideblock__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-sideitem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;          /* цель касания */
  padding: 9px 14px;
  color: var(--ink);
}

.m-sideblock__item + .m-sideblock__item .m-sideitem {
  border-top: 1px solid var(--pill);
}

.m-sideitem:hover { text-decoration: none; background: var(--tint); }

.m-sideitem__title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.m-sideitem__sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Компьютерная главная, часть 2 (T20): лента «Новости» и колонка справа
   в одной строке (DESIGN.md, п. 9). Лента — внутри виджета главной
   новости, поэтому секции .m-newsribbon даём display: contents: заголовок
   «Новости» и ряд карточек сами становятся участниками строки home-top.
   Колонка справа — 300 px, лента — остальное. Разделов с записями нет —
   виджета колонки нет, лента остаётся во всю ширину (:has). */
@media (min-width: 1024px) {

  #widget_pos_home-top .m-newsribbon { display: contents; }

  /* Заголовок «Новости» — во всю ширину, над строкой ленты и колонки */
  #widget_pos_home-top .m-newsribbon .m-mainnews__caption {
    order: 5;
    flex: 0 0 100%;
  }

  #widget_pos_home-top .m-newsribbon__row {
    order: 5;
    flex: 1 1 auto;
    width: calc(100% - 312px);   /* колонка 300 px + зазор 12 px */
    align-self: flex-start;      /* карточки своей высоты, не растягиваются
                                    по колонке справа */
  }

  #widget_pos_home-top .m-sidecol {
    order: 5;
    flex: 0 0 300px;
    width: 300px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  #widget_pos_home-top:not(:has(.m-sidecol)) .m-newsribbon__row {
    width: auto;
  }
}

/* --- Универсальная карусель (виджет mariupol_carousel, T15) ----------------- */
/* Горизонтальная прокрутка со scroll-snap; на компьютере сетка из 4 карточек
   (DESIGN.md, п. 7). Карточка объявления: фото (нет — заглушка-«скелетон» на
   --photo, пропорция фиксирована, блок не прыгает), поверх — оранжевая плашка
   цены, ниже заголовок и вторая строка (район или пробег). Записей нет —
   виджет не выводится вовсе. */

.m-carousel__caption {
  margin: 0 0 10px;
  color: var(--ink);         /* ядро красит h2 своим цветом — перебиваем */
  font-size: 22px;           /* заголовки блоков 22 px (DESIGN.md) */
  font-weight: 800;
}

/* Шапка блока с кнопкой «Добавить компанию» (T73, этап 4) — только у
   стиля company; у board/vacancy заголовок остаётся один */
.m-carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.m-carousel__head .m-carousel__caption { margin: 0; }

/* Кнопка «Добавить компанию» — пилюля §7 (T27a): оранжевая заливка,
   тень, без подчёркивания; 44px — тап-цель и на телефоне */
.m-addbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.m-addbtn:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

.m-addbtn:active {
  transform: translateY(1px);
  box-shadow: var(--orange-shadow-press);
}

.m-addbtn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* T84: шапка раздела с кнопкой добавления (Новости, Работа, Ответы).
   Как .m-chead каталога: заголовок слева, пилюля .m-addbtn справа;
   на узком экране кнопка переносится под заголовок и не обрезается */
.m-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.m-section-head > h1 {
  margin: 0;
  min-width: 0;
}

/* Ширина карточки (--m-card-w) — своя у каждого экземпляра; класс обёртки
   задаётся в настройках виджета (T16a): Недвижимость и Авто 42vw — две
   карточки целиком и край третьей, Работа 80vw, Новые предприятия 30vw */
.m-carousel--board   { --m-card-w: 42vw; }
.m-carousel--vacancy { --m-card-w: 80vw; }
.m-carousel--company { --m-card-w: 30vw; }

.m-carousel__row {
  margin: 0 -16px;           /* ряд во всю ширину экрана: карточки уходят
                                под самый край, не обрезаясь по полю */
  padding: 2px 16px 8px;     /* левое поле 16 px + место для тени карточек */
  list-style: none;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px; /* карточки прилипают к левому полю 16 px (T16a) */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.m-carousel__row::-webkit-scrollbar { display: none; }

.m-carousel__item {
  flex: 0 0 var(--m-card-w, 66%);  /* ширина — у экземпляра (см. выше) */
  min-width: 0;              /* без этого nowrap-подпись раздувает карточку */
  scroll-snap-align: start;
}

.m-bcard {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  color: var(--ink);
}

.m-bcard:hover { text-decoration: none; }

.m-bcard:active { transform: scale(0.98); }

.m-bcard__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;       /* фиксированная высота блока (SPEC.md п. 10) */
  flex: 0 0 auto;
  background: var(--photo);  /* без поддержки :has() — статичная заглушка */
}

/* «Скелетон» подгрузки фото (SPEC.md п. 10, T21): пульсирующая подложка
   лежит под img постоянно — пока фото едет по сети, вместо пустоты виден
   «дышащий» плейсхолдер, загрузившееся фото (position: relative) закрывает
   его. У записи без фото скелетон остаётся виден. prefers-reduced-motion
   глушит анимацию глобально (см. начало файла) */
.m-bcard__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--photo);
  animation: m-skeleton 1.6s ease-in-out infinite;
}

.m-bcard__photo img {
  position: relative;        /* фото поверх анимированной подложки */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение по низу фото (T16a): подложка под ценник, чтобы цена
   читалась на любом фото; ценник лежит поверх него */
.m-bcard__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--photo-shade);
}

/* Ценник на фото: заливка и текст — §7 (T27a); 14px в узкой карточке
   (на телефоне в ряду видно ~2 карточки), 16px на компьютере */
.m-bcard__price {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;                /* ценник поверх затемнения фото */
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 800;
}

.m-bcard__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}

.m-bcard__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Длинное слово («Строительный») в узкой карточке не помещается в строку:
     без переноса оно обрезается краем блока без многоточия (T73, этап 8) */
  overflow-wrap: break-word;
}

.m-bcard__sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1024px) {
  .m-carousel__caption { font-size: 28px; }

  .m-bcard__price,
  .m-jcard__salary { font-size: 16px; }   /* ценник/зарплата: §7 (T27a) */

  /* На компьютере вместо прокрутки — сетка из 4 карточек (DESIGN.md, п. 7) */
  .m-carousel__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0;               /* без «выезда» за поля: сетка внутри колонки */
    overflow: visible;
    padding: 0 0 4px;
    scroll-snap-type: none;
  }

  .m-carousel__item { flex: auto; }
}

/* --- Карусель: карточка вакансии (T16) ------------------------------------- */
/* T76, Р5: карточка — стекло, как остальные карточки (было: тёмная --hero,
   из-за чего в светлой теме «Тестовый работодатель» терялся). Плашка
   зарплаты — как ценовая, внутри карточки. */

.m-jcard {
  min-height: 132px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  background: var(--card-nested);
  border: 1px solid var(--card-nested-line);
  color: var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.m-jcard:hover { text-decoration: none; }

.m-jcard:active { transform: scale(0.98); }

/* Плашка зарплаты — как ценовая (§7, T27a) */
.m-jcard__salary {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 800;
}

.m-jcard__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Работодатель прижат к низу карточки */
.m-jcard__sub {
  margin-top: auto;
  padding-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* --- Карусель: карточка предприятия (T16) ---------------------------------- */
/* Геометрия как у m-bcard, вместо фото — «буква-логотип»: первая буква
   названия на подложке --tint (фото предприятий для заглушки не нужно). */

.m-ccard {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  color: var(--ink);
}

.m-ccard:hover { text-decoration: none; }

.m-ccard:active { transform: scale(0.98); }

.m-ccard__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  background: var(--tint);
  color: var(--accent-ink);
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  overflow: hidden;
}

/* Логотип предприятия в карточке (T73): «чип» на подложке --tint,
   целиком виден (contain, без обрезки), светлая плашка-фон. */
.m-ccard__logo img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  background: var(--card);
  border-radius: calc(var(--r-card) - 4px);
  padding: 4px;
  box-shadow: inset 0 0 0 1px var(--line, rgba(20, 38, 74, 0.08));
}

/* --- Блок «Рекомендуем» (VIP-заглушка, T16) -------------------------------- */
/* Пока статичные карточки-примеры (m-ccard); сетка/прокрутка — классы
   m-carousel. Пометка «реклама» обязательна (DESIGN.md, п. 6). */

.m-recommended__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.m-recommended__caption { margin-bottom: 10px; }

.m-recommended__adtag {
  flex: 0 0 auto;
  background: var(--pill);
  color: var(--muted);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Вкладки «Сообщения / Уведомления» (страница /messages, T17a) ---------- */
/* Решение Q15: уведомления открываются рядом со списком диалогов —
   вкладкой-ссылкой. Ядро отдаёт /messages/notices только по AJAX, поэтому
   вкладка открывает его модальным окном (класс ajax-modal ядра).
   Счётчики раздельные: непрочитанные сообщения — бейдж в нижней панели,
   число уведомлений — бейдж на вкладке. Стили чипов T13. */

.m-msgtabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
}

.m-msgtabs__tab {
  min-height: 44px;          /* цель касания */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  background: var(--card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  color: var(--ink);
  opacity: 0.72;             /* неактивная вкладка: контраст ≥ 4.5:1 */
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.m-msgtabs__tab:hover {
  text-decoration: none;
  opacity: 1;
}

.m-msgtabs__tab:active { transform: scale(0.97); }

/* Активная вкладка — залита цветом текста, в обеих темах инверсия читается */
.m-msgtabs__tab.is-active {
  opacity: 1;
  background: var(--ink);
  color: var(--on-ink);
}

/* Счётчик уведомлений: оранжевая заливка по §7 (T27a) */
.m-msgtabs__count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* --- Нижняя плавающая панель (телефон, T17) -------------------------------- */
/* Пять пунктов (DESIGN.md, п. 8): Главная, Избранное, «+» (оранжевая круглая,
   подать объявление), Сообщения со счётчиком непрочитанных сообщений
   (уведомления — отдельно, на вкладке /messages, T17a), Профиль.
   T85: в светлой теме — светлое стекло (--tabbar-* из tokens.css), в тёмной
   остаются прежние --hero/--hero-ink/--muted-strong. «Остров» с отступом
   от краёв; скрыта на 900 px+. Активный пункт подсвечивается цветом
   --tabbar-active (шаблон ставит is-active). */

.m-tabbar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;                              /* дальше — с env() для iPhone */
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: flex-end;                     /* «+» выступает над панелью */
  gap: 2px;
  padding: 6px;
  background: var(--tabbar-fill);
  color: var(--tabbar-ink);
  border: 1px solid var(--tabbar-edge);
  border-radius: var(--r-block);
  box-shadow: var(--tabbar-shadow);
  -webkit-backdrop-filter: var(--tabbar-blur);
  backdrop-filter: var(--tabbar-blur);
}

/* Контент не уезжает под панель */
@media (max-width: 899.98px) {
  body {
    padding-bottom: 76px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 900px) {
  .m-tabbar { display: none; }
}

.m-tabbar__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;          /* цель касания */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 14px;
  /* T85: неактивный пункт — --tabbar-ink (светлая тема #3A3F45 на белом
     стекле 10.3:1; тёмная — прежний --muted-strong) */
  color: var(--tabbar-ink);
}

/* core.js шаблона default вставляет в каждый <nav> пустой select
   (мобильная замена меню) — в панели он не нужен и ломает раскладку */
.m-tabbar .mobile_menu_select { display: none; }

.m-tabbar__item:hover {
  text-decoration: none;
  color: var(--tabbar-active);
}

.m-tabbar__item:active { transform: scale(0.95); }

.m-tabbar__item.is-active {
  color: var(--tabbar-active);
  background: var(--tabbar-active-bg);
}

/* Индикатор активного пункта — подчёркивание цветом --tabbar-indicator
   (не-текст, ≥3:1 к фону); состояние видно и цветом, и полосой
   (не только цветом) */
.m-tabbar__item.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--tabbar-indicator);
}

.m-tabbar__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.m-tabbar__label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* «Подать объявление»: оранжевая круглая, выступает над панелью */
.m-tabbar__item--add {
  flex: 0 0 auto;
  width: 60px;
  opacity: 1;
  justify-content: flex-start;
}

/* «Подать объявление»: оранжевая круглая, выступает над панелью;
   заливка и тёмно-синий значок — §7 (T27a) */
.m-tabbar__add {
  width: 54px;
  height: 54px;
  margin-top: -24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
  border-radius: 50%;
}

.m-tabbar__add:active {
  transform: translateY(1px);
  box-shadow: var(--orange-shadow-press);
}

.m-tabbar__add:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.m-tabbar__add svg {
  width: 26px;
  height: 26px;
}

/* Счётчик непрочитанных сообщений у иконки (T17a: без уведомлений) */
.m-tabbar__badge {
  position: absolute;
  top: 1px;
  left: calc(50% + 6px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--orange-shadow);
}

/* --- Подвал ---------------------------------------------------------------- */

/* Подвал по макету C3 (T75 этап 2): тонкая строка на фоне страницы,
   слева название, справа ссылки на разделы «о портале» */
.m-footer {
  background: transparent;
  box-shadow: none;
  padding: 8px 16px 30px;
}

.m-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 14px;
}

/* T75, П5: слева копирайт, справа ссылки. Пустая позиция виджетов
   подвала не должна участвовать в раскладке и сдвигать ссылки к центру. */
#widget_pos_footer:empty { display: none; }

.m-footer a { color: var(--muted); text-decoration: none; }

/* Ссылки в подвале — цель касания 44 px (T21) */
.m-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.m-footer a:hover { color: var(--ink); }

.m-footer__brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Ссылки «о портале» (T83: «О проекте · Реклама · Контакты»);
   разделитель — точка, как в макете C3 */
.m-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}

.m-footer__links a { color: var(--muted); font-weight: 600; }

/* Точка-разделитель между ссылками подвала (декоративная) */
.m-footer__sep { color: var(--muted); }

/* Подпись рядом с названием (Q17/T26), цвет текста подвала (--muted);
   точка-разделитель — как в глубиномере */
.m-footer__tagline::before {
  content: '·';
  margin: 0 8px;
}

/* Глубиномер: базовая разметка без маркеров списка
   (стили theme-layout из default не подключены) */
#breadcrumbs ul,
#breadcrumbs li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

#breadcrumbs a {
  display: inline-flex;
  align-items: center;
  /* Цель касания ≥44px на телефоне (T41): padding расширяет зону нажатия,
     отрицательные поля возвращают раскладку — текст остаётся на месте */
  padding: 15px 10px;
  margin: -15px -10px;
  color: var(--muted);
}

#breadcrumbs a:hover { color: var(--ink); }

#breadcrumbs li + li::before {
  content: '›';
  color: var(--muted);
  margin-right: 8px;
}

/* «Главная» в крошках — значок дома (T41, §9: текст или значок с
   aria-label; надпись в шаблоне breadcrumbs.tpl.php скрыта) */
.m-crumbs__home {
  width: 14px;
  height: 14px;
  display: block;
  color: var(--muted);
}

/* ==========================================================================
   Общие стили форм (T27) — docs/DESIGN-FORMS.md §1–§2.
   Один набор компонентов для ВСЕХ форм шаблона (не по страницам): поля,
   подписи, списки, чекбоксы, переключатели, сегменты, кнопки, ошибки,
   сообщения системы. Имена/id полей, action и серверную логику не трогаем
   (§6) — только оформление. Стили идут последним слоем поверх theme-gui.
   ========================================================================== */

/* Скрытый, но доступный заголовок страницы (карточка входа) */
.m-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Страницы-формы (T27): белая подложка .m-body не нужна — секции форм сами
   белые карточки на --bg (DESIGN-FORMS.md §2). Включается классом
   .m-body--bare из main.tpl.php для auth и board/add|edit */
.m-body--bare {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* --- Секции формы: fieldset = белая карточка ------------------------------ */

.m-body form fieldset {
  /* T48 (§12.1): Chrome сжимает fieldset по содержимому (fit-content),
     из-за чего форма уезжала узкой колонкой вправо и рос scrollWidth.
     Явная ширина 100% от карточки формы. */
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 20px;
  padding: 20px;
  border: none;
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .m-body form fieldset { padding: 28px; }
}

.m-body form fieldset legend {
  margin: 0 0 16px;
  padding: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

/* Расстояние между полями 20 px (§2) */
.m-body form .field { margin: 0 0 20px; }
.m-body form .field:last-child { margin-bottom: 0; }

/* T77 (В3): характеристики объявления в сетке. Короткие свойства (год,
   пробег, коробка, кузов, привод, цвет, площадь, этаж и т.п.) на компьютере
   идут в 2–3 колонки; длинные (описание, адрес, фото) — на всю ширину.
   На телефоне одна колонка. Класс fieldset ставит ядро для свойств любого
   типа контента, поэтому правило работает и в других формах. */
.m-body form .icms-content-props__fieldset > .field { min-width: 0; }
/* T77 (п. 4): своё значение для пункта «Другое» — под списком, на всю ширину */
.m-body form .m-props-other { margin-top: 8px; }

@media (min-width: 900px) {
  .m-body form .icms-content-props__fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 18px;
    align-items: start;
  }
  .m-body form .icms-content-props__fieldset > .field { margin: 0; }
  .m-body form .icms-content-props__fieldset > .field.ft_text,
  .m-body form .icms-content-props__fieldset > .field.ft_textarea,
  .m-body form .icms-content-props__fieldset > .field.ft_image,
  .m-body form .icms-content-props__fieldset > .field.ft_images {
    grid-column: 1 / -1;
  }
  /* Группы чекбоксов («Строения», «В гараже или яме») — на всю ширину,
     варианты в строку: в узкой ячейке они давали пустые полосы. */
  .m-body form .icms-content-props__fieldset > .field.ft_listbitmask {
    grid-column: 1 / -1;
  }
  .m-body form .icms-content-props__fieldset > .field.ft_listbitmask .input_checkbox_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
  }
}

@media (min-width: 1200px) {
  .m-body form .icms-content-props__fieldset {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899.98px) {
  .m-body form .icms-content-props__fieldset { display: block; }
  .m-body form .icms-content-props__fieldset > .field { margin: 0 0 20px; }
}

/* T85 (п. 3): форма вакансии — короткие поля в сетке на компьютере,
   как характеристики объявления в T77 (В3). Длинные (заголовок, фото,
   описание, требования, карта, мессенджеры) — на всю ширину; на телефоне
   одна колонка. Класс m-ctype-vacancy ставит main.tpl.php для /vacancy*. */
.m-ctype-vacancy .m-body form #fset_1 > .field { min-width: 0; }

@media (min-width: 900px) {
  .m-ctype-vacancy .m-body form #fset_1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 18px;
    align-items: start;
  }
  .m-ctype-vacancy .m-body form #fset_1 > .field { margin: 0; }
  .m-ctype-vacancy .m-body form #fset_1 > .field.ft_caption,
  .m-ctype-vacancy .m-body form #fset_1 > .field.ft_text,
  .m-ctype-vacancy .m-body form #fset_1 > .field.ft_image,
  .m-ctype-vacancy .m-body form #fset_1 > .field.ft_images,
  .m-ctype-vacancy .m-body form #fset_1 > .field.ft_mariupolmap,
  .m-ctype-vacancy .m-body form #fset_1 > .field.ft_listbitmask {
    grid-column: 1 / -1;
  }
  /* Галочки мессенджеров — в строку, а не столбиком */
  .m-ctype-vacancy .m-body form #fset_1 > .field.ft_listbitmask .input_checkbox_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
  }
}

@media (min-width: 1200px) {
  .m-ctype-vacancy .m-body form #fset_1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899.98px) {
  .m-ctype-vacancy .m-body form #fset_1 { display: block; }
  .m-ctype-vacancy .m-body form #fset_1 > .field { margin: 0 0 20px; }
}

/* Поля с ошибкой строим колонкой, чтобы строку ошибки («под полем», §2)
   перенести ниже поля — в разметке ядра она стоит первой */
.m-body form .field_error { display: flex; flex-direction: column; }
.m-body form .field_error .error_text {
  order: 9;
  float: none;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  color: var(--danger-ink);
}

.m-body form .field_error .error_text::before {
  content: '!';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--danger);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* --- Подписи и подсказки --------------------------------------------------- */

.m-body form .field > label,
.m-body form .field label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--ink);
}

/* Обязательные поля: звёздочка ядра — акцентным (T21 перекрасил подпись) */
.m-body form .field.reguired_field > label::after { color: var(--accent-ink); }

.m-body form .hint {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--muted);
}

/* --- Поля ввода, textarea, select ------------------------------------------ */

.m-body form .input,
.m-body form .textarea,
.m-body form .date-input,
.m-body form .city-input,
.m-body form select {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--field-line);
  /* T75 (макет C3): поля и списки полностью скруглённые; textarea —
     отдельным правилом ниже (многострочное поле не может быть пилюлей) */
  border-radius: var(--r-pill);
  background: var(--field-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;      /* 16 px на телефоне — iOS не увеличивает страницу */
  font-weight: 600;
  line-height: 22px;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.m-body form .textarea { border-radius: 24px; }

@media (min-width: 768px) {
  .m-body form .input,
  .m-body form .textarea,
  .m-body form .date-input,
  .m-body form .city-input,
  .m-body form select { font-size: 15px; }
}

.m-body form .textarea {
  height: 200px;         /* высота ядра */
  min-height: 120px;
  padding: 14px 16px;
  resize: vertical;
}

.m-body form .date-input { width: 130px; }
.m-body form .input-small { width: 90px !important; }
.m-body form .input-number { width: 100% !important; }
.m-body form .ft_captcha input { width: auto; }

.m-body form .input::placeholder,
.m-body form .textarea::placeholder { color: var(--muted); opacity: 1; }

/* Фокус (§1): рамка 2px --accent + кольцо; фон — белый в светлой теме.
   Видимый фокус с клавиатуры (T21) остаётся: :focus-visible даёт внешний
   контур --accent-ink (≥ 3:1), поэтому общий outline здесь не убираем */
.m-body form .input:focus,
.m-body form .textarea:focus,
.m-body form .date-input:focus,
.m-body form .city-input:focus,
.m-body form select:focus {
  border-color: var(--accent);
  background: var(--card);
  box-shadow: var(--focus-ring);
}

.m-body form .input:focus-visible,
.m-body form .textarea:focus-visible,
.m-body form .date-input:focus-visible,
.m-body form .city-input:focus-visible,
.m-body form select:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 0;
}

/* T77 (п. 7): поле «Сайт» — заглушка до платного размещения. Поле видно
   всем, но недоступно: пунктирная рамка, приглушённый (но читаемый,
   --muted по D19) текст и курсор not-allowed. */
.m-body form .input:disabled,
.m-body form .input[disabled] {
  border-style: dashed;
  border-color: var(--field-line-strong);
  background: var(--field-bg);
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
  opacity: 1;
  cursor: not-allowed;
}

/* T53: ядро задаёт полю «Город» height:26px и inline-block, поэтому кнопки
   44px переносились на вторую строку и налезали на подсказку. Flex с
   height:auto даёт им встать в один ряд с названием города, а если места
   мало (360px) — аккуратно перенестись, увеличив поле. */
.m-body form .city-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  height: auto;
  min-height: 44px;
  padding: 4px 10px;
}
.m-body form .city-input .city-name { padding: 0 2px; }
.m-body form .city-input a,
.m-body form .input_link_block {
  background: var(--accent-ink);
  color: #FFFFFF;
  border-radius: var(--r-pill);
}
.m-body form .city-input a:hover,
.m-body form .input_link_block:hover { background: var(--ink); color: #FFFFFF; }

/* Select: шеврон справа цвета --muted (значения токена в обеих темах) */
.m-body form select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666E7F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  cursor: pointer;
}

[data-theme="dark"] .m-body form select,
:root:not([data-theme="light"]) .m-body form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .m-body form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* Поле с суффиксом (цена, «руб.»): единицы внутри рамки справа, 15px/700 */
.m-body form .field { position: relative; }

.m-body form .ft_number .input { padding-right: 72px; }

.m-body form .input-number-units {
  position: absolute;
  right: 16px;
  bottom: 0;
  height: 52px;
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
}

/* Префикс/суффикс ядра (адресные и числовые поля): одна рамка из трёх частей */
.m-body form .input-prefix-suffix { display: flex; }
.m-body form .input-prefix-suffix::after { content: none; }
.m-body form .input-prefix-suffix .input {
  flex: 1 1 auto;
  width: auto;
  float: none;
  height: auto;
  min-height: 52px;
  border-radius: 16px 0 0 16px;
}
.m-body form .input-prefix-suffix .prefix,
.m-body form .input-prefix-suffix .suffix {
  float: none;
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 52px;
  padding: 0 14px;
  border: 1.5px solid var(--field-line);
  background: var(--field-bg);
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}
.m-body form .input-prefix-suffix .prefix {
  order: -1;
  border-right: none;
  border-radius: 16px 0 0 16px;
}
.m-body form .input-prefix-suffix .suffix {
  border-left: none;
  border-radius: 0 16px 16px 0;
}
.m-body form .input-prefix-suffix .prefix ~ .input { border-radius: 0 16px 16px 0; }

/* --- Ошибка на поле (§2): рамка 2px --danger, фон --danger-bg -------------- */

.m-body form .field_error .input,
.m-body form .field_error .textarea,
.m-body form .field_error .city-input,
.m-body form .field_error select,
.m-body form input.error,
.m-body form textarea.error {
  border: 2px solid var(--danger);
  background: var(--danger-bg);
  padding: 0 15px;       /* компенсация толщины рамки, высота не прыгает */
}

.m-body form .field_error .textarea { padding: 13px 15px; }

/* --- Чекбоксы и радиокнопки ------------------------------------------------ */

.m-body form input[type="checkbox"],
.m-body form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--field-line-strong);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.m-body form input[type="radio"] { border-radius: 50%; }

/* Включённые чекбокс/радио: заливка --orange-fill, галочка — тёмно-синяя
   (§7, T27a). Градиент и картинка — два слоя background через запятую */
.m-body form input[type="checkbox"]:checked {
  border-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3.2 3.2 6.4-7' fill='none' stroke='%2314264A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat, var(--orange-fill);
  box-shadow: var(--orange-shadow);
}

.m-body form input[type="radio"]:checked {
  border-color: transparent;
  background: var(--orange-fill);
  box-shadow: inset 0 0 0 4px var(--card);
}

/* Подпись чекбокса: 14px/500, вся строка — цель касания ≥ 44 px */
.m-body form .ft_checkbox > label,
.m-body form label:has(> input[type="checkbox"]),
.m-body form label:has(> input[type="radio"]) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink);
  cursor: pointer;
}

.m-body form input[type="checkbox"]:focus-visible,
.m-body form input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* --- Переключатель (компонент .m-switch, разметка для следующих задач) ----- */

.m-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink);
  cursor: pointer;
}

.m-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.m-switch__track {
  position: relative;
  flex: 0 0 46px;
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: var(--switch-off);
  transition: background-color .15s;
}

.m-switch__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(42,30,18,.25);
  transition: transform .15s;
}

/* Включённое положение: заливка --orange-fill; бегунок остаётся белым,
   главный признак состояния — его положение (§7, T27a) */
.m-switch input:checked + .m-switch__track { background: var(--orange-fill); }
.m-switch input:checked + .m-switch__track::after { transform: translateX(18px); }
.m-switch input:focus-visible + .m-switch__track {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

/* --- Сегменты (Вход/Регистрация, Плитка/Список/Карта) ---------------------- */

.m-seg {
  display: flex;
  gap: 2px;
  margin: 0 0 20px;
  padding: 3px;
  border-radius: 24px;
  background: var(--track);
}

.m-seg__item {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 21px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
}

.m-seg__item:hover { color: var(--ink); text-decoration: none; }

.m-seg__item.is-active {
  background: var(--card);
  color: var(--ink);
  font-weight: 800;
  box-shadow: var(--seg-shadow);
}

/* --- Кнопки ----------------------------------------------------------------- */
/* Основная (submit): 56px, заливка --orange-fill, текст --orange-ink
   17px/800 (решение Q19 вариант B, §7 — T27a). Вторичные кнопки (базовый
   .button, cancel, «в черновик») — T76, этап 5: стекло по токенам макета
   (1px рамка, мягкая подложка и тень), а не чёрная рамка C3. Состояния
   основной: hover — яркость +5%, нажатие — сдвиг на 1px и тень вдвое
   слабее, фокус с клавиатуры — контур 3px. */

.m-body .button,
.m-body .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin: 0;
  padding: 0 26px;
  border: 1px solid var(--tile-edge);
  border-radius: var(--r-pill);
  background: var(--tile-fill);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: none;
  box-shadow: var(--tile-shadow);
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}

.m-body .button:hover,
.m-body .btn:hover {
  background: var(--chip);
  box-shadow: 0 0 0 3px var(--tile-ring);
  text-decoration: none;
}

.m-body .button:focus-visible,
.m-body .btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.m-body .button:active,
.m-body .btn:active { transform: scale(0.98); }

.m-body .button-submit,
.m-body input.button-submit {
  min-height: 56px;
  padding: 0 32px;
  border: 2px solid transparent;   /* толщина рамки прежняя — размер не прыгает */
  background: var(--orange-fill);
  color: var(--orange-ink);
  font-size: 17px;
  box-shadow: var(--orange-shadow);
}

.m-body .button-submit:hover,
.m-body input.button-submit:hover {
  background: var(--orange-fill);
  border-color: transparent;
  filter: brightness(1.05);
}

.m-body .button-submit:active,
.m-body input.button-submit:active {
  transform: translateY(1px);
  box-shadow: var(--orange-shadow-press);
}

.m-body .button-submit:focus-visible,
.m-body input.button-submit:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.m-body .button-cancel {
  border-color: var(--tile-edge);
  background: var(--tile-fill);
  box-shadow: var(--tile-shadow);
}

.m-body .button-preview {
  min-height: 46px;
  border: 1px solid var(--tile-edge);
  background: var(--tile-fill);
  font-size: 14px;
  font-weight: 700;
}

.m-body .button-preview:hover { background: var(--chip); }

.m-body .button-small { min-height: 44px; padding: 0 18px; font-size: 14px; }

.m-body .button.to_draft {
  border-color: var(--tile-edge);
  background: var(--tile-fill);
  box-shadow: var(--tile-shadow);
  color: var(--ink);
}

.m-body form .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 767.98px) {
  .m-body form .buttons > * { flex: 1 1 100%; }
}

/* Комментарии: «Отправить» — основная кнопка (разметка ядра даёт btn-secondary);
   заливка, текст и состояния — как у .button-submit (§7, T27a) */
.m-body #comments_add_form button[name="submit"] {
  min-height: 56px;
  border: 2px solid transparent;
  background: var(--orange-fill);
  color: var(--orange-ink);
  font-size: 17px;
  box-shadow: var(--orange-shadow);
}

.m-body #comments_add_form button[name="submit"]:hover {
  background: var(--orange-fill);
  filter: brightness(1.05);
}

.m-body #comments_add_form button[name="submit"]:active {
  transform: translateY(1px);
  box-shadow: var(--orange-shadow-press);
}

.m-body #comments_add_form button[name="submit"]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* Данные автора комментария: два поля в колонку (телефон), в строку (компьютер) */
.m-body #comments_add_form .author_data {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 12px;
  margin: 0 0 4px;
}

@media (min-width: 768px) {
  .m-body #comments_add_form .author_data { grid-template-columns: 1fr 1fr; }
}

/* --- Сообщения системы (успех/предупреждение/ошибка, §2) -------------------- */

.sess_messages .message_success,
.sess_messages .message_error,
.sess_messages .message_info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-left: none;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.sess_messages .message_success::before,
.sess_messages .message_error::before,
.sess_messages .message_info::before {
  content: '!';
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.sess_messages .message_error {
  background: var(--danger-bg);
  color: var(--danger-ink);
}
.sess_messages .message_error::before { background: var(--danger); color: #FFFFFF; }

.sess_messages .message_success {
  background: var(--ok-bg);
  color: var(--ok);
}
.sess_messages .message_success::before { content: '✓'; background: var(--ok); color: #FFFFFF; }

.sess_messages .message_info {
  background: var(--tint);
  color: var(--ink);
}
.sess_messages .message_info::before { content: 'i'; background: var(--muted); color: #FFFFFF; }

/* --- Страница входа/регистрации (§3): карточка с левой панелью -------------- */

.m-auth { max-width: 960px; margin: 0 auto; }
.m-auth--single { max-width: 560px; }

.m-auth__title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.m-auth__card {
  background: var(--card);
  border-radius: 28px;
  box-shadow: var(--shadow-card-lg);
  overflow: hidden;
}

.m-auth__aside { display: none; }

.m-auth__form { padding: 20px; }

@media (min-width: 768px) {
  /* На компьютере заголовок страницы — только для программ чтения:
     видит панель с крупным текстом слева */
  .m-auth .m-auth__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .m-auth__card {
    display: flex;
    align-items: stretch;
    border-radius: 32px;
  }

  .m-auth__aside {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding: 44px;
    background: var(--hero);
    color: var(--hero-ink);
  }

  .m-auth__form { flex: 0 0 480px; width: 480px; padding: 44px; }

  .m-auth--single .m-auth__title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 16px;
    clip: auto;
    overflow: visible;
    font-size: 26px;
  }

  /* T54: у одноколоночных страниц (восстановление и сброс пароля) форма —
     flex-элемент карточки. При flex: none ширина считалась по max-content,
     и длинный текст уводил её за правый край карточки (631 px в карточке
     560 px). Тянем форму по ширине карточки, min-width: 0 разрешает тексту
     переноситься. */
  .m-auth--single .m-auth__form {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 44px 40px;
  }
}

.m-auth__aside-title {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}

.m-auth__aside-sub {
  margin: 0 0 28px;
  font-size: 15px;
  font-weight: 600;
  opacity: .8;
}

.m-auth__aside-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.m-auth__aside-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
}

.m-auth__aside-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pill);
  color: var(--hero-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-auth__aside-icon svg { width: 18px; height: 18px; }

/* «Забыли пароль?» — в разметке ядра ссылка стоит в строке чекбокса
   «Запомнить меня»; прижимаем её вправо этой же строки (жёсткий абсолют
   от подписи «Пароль» ломался при появлении ошибки валидации под полем).
   На узких экранах, если строка не помещается, ссылка переносится вниз
   целиком — тексты не разрываем */
.m-auth .ft_checkbox > label { flex-wrap: wrap; row-gap: 0; }

.m-auth .auth_remember { white-space: nowrap; }

/* Разделитель « | » из стилей default: при переносе ссылки на отдельную
   строку он повисает после «Запомнить меня» — в В1 не нужен */
.m-auth .auth_remember::after { content: none; }

.m-auth .auth_restore_link {
  align-self: center;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 13px 0 13px 12px;   /* высота строки 44 px — цель касания */
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-ink);
  white-space: nowrap;
}

.m-auth .auth_restore_link:hover { text-decoration: underline; }

/* Ядро (core.js default) вставляет пустой select в каждый <nav> — в
   сегментах он не нужен (тот же приём, что в .m-tabbar) */
.m-seg .mobile_menu_select { display: none; }

/* Соц-сети входа (хуки auth): разделитель и ссылки-пилюли; хуков на
   установке нет (Q21) — стили на будущее, ничего не выводят */
.m-auth__or {
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.m-auth__hooks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.m-auth__hooks a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.m-auth__hooks a:hover { background: var(--track); text-decoration: none; }

/* Кнопка «показать пароль» (ставится js/forms.js в .m-pass) */
.m-pass { position: relative; display: block; }

.m-pass .input { padding-right: 56px; }

.m-pass__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-pass__toggle:hover { background: var(--pill); color: var(--ink); }
.m-pass__toggle.is-on { color: var(--accent-ink); }

/* --- Загрузка фото: плитки «Добавить» (§2) ---------------------------------- */

.m-body .qq-uploader { height: auto; min-height: 104px; }

.m-body .qq-upload-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 104px;
  height: 104px;
  margin: 0;
  padding: 8px;
  border: 2px dashed var(--field-line-strong);
  border-radius: 18px;
  background: var(--field-bg);
  color: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  text-shadow: none;
  cursor: pointer;
}

.m-body .qq-upload-button::before {
  content: '';
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.m-body .qq-upload-button-hover { background: var(--tint); border-color: var(--accent); }
.m-body .qq-upload-button-focus { top: 0; }

.m-body .qq-upload-drop-area {
  background: var(--tint);
  border-radius: 18px;
}
.m-body .qq-upload-drop-area span { color: var(--ink); font-weight: 600; }
.m-body .qq-upload-drop-area-active { background: var(--tint); }

/* Загруженные фото: плитки 1:1 радиус 18px, кнопка удаления — круг 28px */
.m-body .widget_image_multi .previews_list {
  display: grid;
  grid-template-columns: repeat(3, 104px);
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .m-body .widget_image_multi .previews_list { grid-template-columns: repeat(5, 104px); }
}

.m-body .previews_list li,
.m-body .widget_image_single .preview {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 10px 0 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--photo);
}

.m-body .widget_image_multi .previews_list li { margin: 0; }

.m-body .previews_list li img,
.m-body .widget_image_single .preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-body .previews_list li a,
.m-body .widget_image_single .preview a {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}

.m-body .qq-upload-list { margin: 10px 0 0; }
.m-body .qq-upload-list li { font-size: 13px; color: var(--muted); }
.m-body .qq-upload-cancel { color: var(--danger-ink); }

/* Выбор категории доски (board): поле как select, список — карточка */
.m-body .cat_selector_box .csb_title {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 44px 0 16px;
  border: 1.5px solid var(--field-line);
  border-radius: 16px;
  background: var(--field-bg);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 22px;
  cursor: pointer;
}

.m-body .cat_selector_box .csb_title::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666E7F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

[data-theme="dark"] .m-body .cat_selector_box .csb_title::after,
:root:not([data-theme="light"]) .m-body .cat_selector_box .csb_title::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .m-body .cat_selector_box .csb_title::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

.m-body .cat_selector_box .csb_ajax {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--field-line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-float);
}

.m-body .cat_selector_box .csb_ajax::before,
.m-body .cat_selector_box .csb_ajax::after { content: none; }

.m-body .csb_ajax .csb_parents ul {
  margin: 0 0 10px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  overflow: hidden;
}

.m-body .csb_ajax .csb_parents ul li {
  background: var(--bg);
  color: var(--muted);
}
.m-body .csb_ajax .csb_parents ul li:hover { background: var(--tint); color: var(--ink); }
.m-body .csb_ajax .csb_parents .csbp_no_cats b { color: var(--ink); }

.m-body .csbp_cats .csbp_cats_item {
  height: 44px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: var(--card);
}
.m-body .csbp_cats .csbp_cats_item:hover { background: var(--tint); }
.m-body .csbp_cats .csbp_cats_item span { color: var(--ink); font-weight: 600; }
.m-body .csbp_cats .csbp_cats_item b:hover { background: var(--tint); }

/* --- Вкладки внутри форм (field_tabbed) ------------------------------------- */

.m-body ul.field_tabbed {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.m-body ul.field_tabbed a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--track);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.m-body ul.field_tabbed a:hover { text-decoration: none; color: var(--ink); }

/* --- Страница поиска: строка «что ищем + тип + дата + Найти» ---------------- */

.m-body form[action$="/search"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.m-body form[action$="/search"] .input { flex: 2 1 220px; width: auto; }
.m-body form[action$="/search"] select { flex: 1 1 170px; width: auto; }
.m-body form[action$="/search"] .button-submit { flex: 0 0 auto; min-height: 52px; }

/* ==========================================================================
   Контентные списки и страницы записей (T43, docs/DESIGN-FORMS.md §10).
   Ядро (theme-content.css) красит заголовки записей и мета-строки
   фиксированными цветами (#2c3e50, #34495e, #7f8c8d, #95a5a6, #999),
   которые в тёмной теме ниже AA (заголовок записи на тёмной карточке —
   1.44:1). Перекрашиваем токенами в слое шаблона, templates/default
   не правим. Блок действует на ВСЕХ контентных страницах: и где списки
   уже карточки В1 (css/content.css), и где пока вёрстка ядра.
   ========================================================================== */

/* Запись в списке: заголовок — цвет текста темы (светлая #14264A,
   тёмная #E8EEFF — 11–13.6:1 на карточке), мета — --muted (5.1–6.3:1) */
.m-body .content_list_item { color: var(--muted); }

.m-body .content_list_item .ft_caption .value { color: var(--ink); }
.m-body .content_list_item .ft_caption a { color: inherit; }
.m-body .content_list_item .ft_caption a:hover { color: var(--accent-ink); }
.m-body .content_list_item .ft_caption a.parent_title { color: var(--muted); }
.m-body .content_list_item .ft_caption a.parent_title:hover { color: var(--accent-ink); }

.m-body .content_list_item .f_date_pub { color: var(--muted); }

.m-body .content_list_item .ft_user a,
.m-body .content_item .ft_user a { color: var(--muted); }
.m-body .content_list_item .ft_user a:hover,
.m-body .content_item .ft_user a:hover { color: var(--accent-ink); }

.m-body .content_item .tags_bar a,
.m-body .content_list_item .tags_bar a { color: var(--muted); }
.m-body .content_item .tags_bar a:hover,
.m-body .content_list_item .tags_bar a:hover { color: var(--accent-ink); }

.m-body .content_item .info_bar .bar_item,
.m-body .content_list_item .info_bar .bar_item { color: var(--muted); }
.m-body .content_item .info_bar .bar_item a,
.m-body .content_list_item .info_bar .bar_item a { color: var(--muted); }
.m-body .content_item .info_bar .bar_item a:hover,
.m-body .content_list_item .info_bar .bar_item a:hover {
  color: var(--ink);
  text-decoration: none;
}

.m-body .private_field_hint { color: var(--muted); }

/* Страница записи: поля и подписи полей; таблица свойств (характеристики) */
.m-body .content_item .field { color: var(--ink); }
.m-body .content_item .field .title_left,
.m-body .content_item .field .title_top,
.m-body .content_list .field .title_left,
.m-body .content_list .field .title_top { color: var(--muted); }

.m-body .content_item_parent_title a { color: var(--muted); }
.m-body .content_item_parent_title a:hover { color: var(--accent-ink); }

.m-body .content_item_props table td { border-bottom-color: var(--sep); }
.m-body .content_item_props table .heading { color: var(--ink); }
.m-body .content_item_props table .title { color: var(--muted); }
.m-body .content_item_props table .value { color: var(--ink); }
.m-body .content_item_props table tr:hover td.title,
.m-body .content_item_props table tr:hover td.value { color: var(--accent-ink); }

.m-body .category_description { color: var(--muted); }

/* Списки-теги (ft_listbitmask): плашки в токенах вместо бело-голубых ядерных */
.m-body .ft_listbitmask > .value > ul.multiple_tags_list li {
  color: var(--ink);
  background: var(--tint);
  border-color: var(--sep);
}

/* Категория записи на странице (ft_category): штатный .btn ядра — пилюля
   В1 на --tint (а не синяя кнопка движка); ссылка ведёт в категорию */
.m-body .content_item .ft_category .btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 0 16px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--tint);
  box-shadow: none;
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 800;
  text-shadow: none;
}
.m-body .content_item .ft_category .btn:hover {
  background: var(--accent-ink);
  color: var(--on-ink);
  text-decoration: none;
}

/* --- Сортировки контента (наборы) — пилюли-чипы (§9, T42) ------------------- */

.m-body .content_datasets { margin: 4px 0 16px; }

.m-body .content_datasets ul.pills-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  overflow: visible;
}

.m-body .content_datasets .pills-menu li {
  float: none;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-size: inherit;
  background: none;
  border-radius: 0;
  display: flex;
}

.m-body .content_datasets .pills-menu li > a,
.m-body .content_datasets .pills-menu li > div {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* цель касания (T21) */
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.m-body .content_datasets .pills-menu li > a:hover {
  text-decoration: none;
  box-shadow: var(--shadow-float);
}

.m-body .content_datasets .pills-menu li.active > div {
  background: var(--chip-active-bg);
  color: var(--chip-active-ink);
  font-weight: 800;
}

/* --- Постраничность — кружки и пилюли как у доски (§4, .m-adpages) ---------- */

.m-body .pagebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 8px;
  font-size: inherit;
}

/* Спаны-обёртки ядра (pagebar_nav, pagebar_pages) не влияют на раскладку */
.m-body .pagebar .pagebar_nav,
.m-body .pagebar .pagebar_pages { display: contents; }

.m-body .pagebar .pagebar_page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.m-body .pagebar a.pagebar_page:hover {
  text-decoration: none;
  box-shadow: var(--shadow-float);
}

.m-body .pagebar .pagebar_pages .pagebar_page {
  width: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 15px;
}

.m-body .pagebar .pagebar_pages .pagebar_page:hover {
  background: var(--card);
  color: var(--ink);
}

.m-body .pagebar .pagebar_current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
  font-size: 15px;
  font-weight: 800;
}

.m-body .pagebar .pagebar_prev_btn.disabled,
.m-body .pagebar .pagebar_next_btn.disabled {
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}

.m-body .pagebar .pagebar_notice {
  flex: 1 1 100%;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* --- Хлебные крошки: на телефоне одна строка с прокруткой (§10) -------------- */
/* Обрезка (ellipsis) спрятала бы текущую страницу, поэтому одна строка
   с горизонтальной прокруткой и скрытым скроллбаром; от 768 px — как было */
@media (max-width: 767.98px) {
  #breadcrumbs ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #breadcrumbs ul::-webkit-scrollbar { display: none; }
  #breadcrumbs li,
  #breadcrumbs li a,
  #breadcrumbs li span { white-space: nowrap; }
}

/* --- Пустое состояние лент (§10, T28/T43/T44) --------------------------------
 * Общий компонент .m-cempty: значок в подложке плиток §8, заголовок —
 * штатная фраза движка, кнопка «Добавить …» (§7) если группе разрешено.
 * Используется контентными списками (news/articles/default_list), вопросами
 * и стеной профиля. До T44 жил в content.css, перенесён как общий. */

.m-cempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0;
  padding: 32px 20px;
  background: var(--card);
  border-radius: var(--r-block);
  box-shadow: var(--shadow);
  text-align: center;
}

.m-cempty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* T76 (макет «стеклянные плитки»): квадрат 44px, радиус 15px */
  border: 1px solid var(--icon-box-edge);
  border-radius: 15px;
  background: var(--icon-box-bg);
  color: var(--icon-box-ink);
  box-shadow: none;
}

.m-cempty__icon svg { width: 24px; height: 24px; }

.m-cempty__title {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
}

.m-cempty__text {
  margin: 2px 0 0;
  max-width: 360px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.m-cempty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 24px;
  border-radius: var(--r-pill);
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
  font-size: 15px;
  font-weight: 800;
}

.m-cempty__btn:hover { text-decoration: none; filter: brightness(1.05); }
.m-cempty__btn:active {
  transform: translateY(1px);
  box-shadow: var(--orange-shadow-press);
}

/* T76, этап 4 (бывший П9): в виджетах главной пустое состояние — одна
   строка: значок 44px и текст со ссылкой. Второй кнопки нет — действие
   остаётся только в заголовке виджета. Прочие страницы сохраняют прежний
   крупный вариант .m-cempty. */
.m-wd .m-cempty {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  margin: 0;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 18px;
  box-shadow: none;
  text-align: left;
}

.m-wd .m-cempty__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

.m-wd .m-cempty__icon svg { width: 24px; height: 24px; }

.m-wd .m-cempty__title {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.m-wd .m-cempty__title a {
  color: var(--coral-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* В компактной полосе подпись вторая строка не нужна — текст уже
   в заголовке; в разметке он остаётся для крупного варианта. */
.m-wd .m-cempty__text { display: none; }

/* Кнопка в пустой строке виджета убрана из разметки; правило оставлено
   страховкой для старых шаблонов. */
.m-wd .m-cempty__btn { display: none; }
/* ===========================================================================
   geo.css — геоселектор (окно выбора города) в стиле В1. Задача T51.

   Оформляет окно `geo/widget` ядра: три списка (страна, регион, город),
   строку поиска внутри списка и сам раскрывающийся перечень, а также
   закрытое состояние поля «Город» в форме.

   Списки рисует плагин jQuery Chosen из ядра (`templates/default/js/`).
   Его разметку и скрипты мы не меняем — только перекрываем стили поверх
   ядерного `css/jquery-chosen.css`. Ядро InstantCMS не правится.

   Размеры и радиусы — по docs/DESIGN-FORMS.md (§2 поля и фокус, §11.2 одна
   стрелка 16x16 средствами CSS, §11.3 поля 48px и «пилюля», §12 цель касания
   не меньше 44px). Цвета — токены из tokens.css, обе темы.
   =========================================================================== */

/* --- окно выбора ---------------------------------------------------------- */

/* T53: внешняя рамка окна. Ядерный `.nyroModalCont` — белый прямоугольник
   без скругления и отступов, из-за чего подпись «Россия» упиралась в верхний
   край, а окно выглядело как ошибка. Скругляем по токену --r-block, даём
   тень и внутренние отступы. Ширину задаём самому #geo_window (её видит
   механизм измерения nyroModal), на десктопе — 420px, на телефоне —
   ширина экрана минус поля. */
.nyroModalCont:has(#geo_window) {
  /* T78: непрозрачный фон панели в обеих темах (см. background ниже) */
  /* Ядро задаёт высоту по разметке до инициализации Chosen (нативные
     <select> ниже списков Chosen), из-за чего низ окна обрезался. Высота
     auto и центрирование transform не зависят от этих измерений; края
     окна при этом остаются в пределах экрана. */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  height: auto !important;
  max-height: calc(100vh - 24px);
  overflow: visible !important;
  border-radius: var(--r-block);
  background: var(--menu-bg);
  box-shadow: 0 18px 50px rgba(20, 38, 74, .28), 0 2px 8px rgba(20, 38, 74, .12);
}

#geo_window {
  box-sizing: border-box;
  /* ядерный theme-gui.css фиксирует height:170px и width:300px —
     перекрываем оба, иначе низ окна срезан */
  width: min(420px, calc(100vw - 60px));
  height: auto;
  padding: 18px 18px 20px;
  font-family: var(--font);
  color: var(--ink);
}

@media (max-width: 640px) {
  #geo_window { width: calc(100vw - 30px); padding: 16px 16px 18px; }
}

#geo_window .wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#geo_window .list {
  width: 100%;
  min-width: 0;
}

#geo_window .buttons { margin-top: 4px; }

/* «Выбрать» — основная кнопка по §7 */
#geo_window .buttons input[type="button"],
#geo_window .buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
  font-family: var(--font);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s, transform .12s;
}

#geo_window .buttons input[type="button"]:hover,
#geo_window .buttons button:hover { filter: brightness(1.05); }

#geo_window .buttons input[type="button"]:active,
#geo_window .buttons button:active { transform: translateY(1px); }

#geo_window .buttons input[type="button"]:focus-visible,
#geo_window .buttons button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* --- Chosen: закрытый вид списка ------------------------------------------ */

#geo_window .chosen-container,
.m-body .chosen-container {
  width: 100% !important;
  font-family: var(--font);
  font-size: 15px;
}

#geo_window .chosen-container-single .chosen-single,
.m-body .chosen-container-single .chosen-single {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 44px 0 18px;
  border: 1.5px solid var(--field-line);
  border-radius: 24px;
  background: var(--field-bg);
  box-shadow: none;
  color: var(--ink);
  font-size: 16px;   /* 16px: iOS не увеличивает страницу при фокусе */
  font-weight: 600;
  line-height: 1.2;
  transition: border-color .15s, box-shadow .15s;
}

@media (min-width: 768px) {
  #geo_window .chosen-container-single .chosen-single,
  .m-body .chosen-container-single .chosen-single { font-size: 15px; }
}

#geo_window .chosen-container-single .chosen-single span,
.m-body .chosen-container-single .chosen-single span {
  margin-right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* T82 (дефект №4 T79): на телефоне длинное название региона
   («Донецкая Народная Республика») обрезалось многоточием в поле
   «Область». Разрешаем перенос на вторую строку: высота растёт от 48px,
   цель касания сохраняется. */
@media (max-width: 767.98px) {
  #geo_window .chosen-container-single .chosen-single,
  .m-body .chosen-container-single .chosen-single {
    height: auto;
    min-height: 48px;
    padding: 10px 38px 10px 14px;
    line-height: 1.25;
  }
  #geo_window .chosen-container-single .chosen-single span,
  .m-body .chosen-container-single .chosen-single span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* Ровно одна стрелка (§11.2): ядерные div-ы Chosen (b, abbr) гасим,
   свою рисуем псевдоэлементом фиксированного размера 16x16. */
#geo_window .chosen-container-single .chosen-single div,
#geo_window .chosen-container-single .chosen-single abbr,
.m-body .chosen-container-single .chosen-single div,
.m-body .chosen-container-single .chosen-single abbr {
  display: none !important;
}

#geo_window .chosen-container-single .chosen-single::after,
.m-body .chosen-container-single .chosen-single::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314264A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  pointer-events: none;
  transition: transform .15s;
}

#geo_window .chosen-container-single .chosen-single:hover,
.m-body .chosen-container-single .chosen-single:hover {
  border-color: var(--ink);
}

#geo_window .chosen-container-active .chosen-single,
.m-body .chosen-container-active .chosen-single {
  border-color: var(--accent-ink);
  box-shadow: var(--focus-ring);
}

/* открыт список — у «пилюли» скругляем только верх, стрелка переворачивается */
#geo_window .chosen-container-active.chosen-with-drop .chosen-single,
.m-body .chosen-container-active.chosen-with-drop .chosen-single {
  border-radius: 24px 24px 12px 12px;
  background: var(--field-bg);
}

#geo_window .chosen-container-active.chosen-with-drop .chosen-single::after,
.m-body .chosen-container-active.chosen-with-drop .chosen-single::after {
  transform: translateY(-50%) rotate(180deg);
}

/* --- Chosen: раскрытый перечень ------------------------------------------- */

#geo_window .chosen-container .chosen-drop,
.m-body .chosen-container .chosen-drop {
  margin-top: 4px;
  border: 1.5px solid var(--field-line);
  border-radius: 20px;
  /* T77 (В1): перечень Chosen (область/город) — непрозрачная панель,
     под ним не должно быть видно следующие поля формы. */
  background: var(--menu-bg);
  box-shadow: var(--shadow-card-lg);
  overflow: hidden;
}

/* строка поиска — штатный input Chosen, разметку не трогаем */
#geo_window .chosen-container .chosen-search,
.m-body .chosen-container .chosen-search {
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--sep);
}

#geo_window .chosen-container .chosen-search input[type="text"],
.m-body .chosen-container .chosen-search input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 14px 0 42px;
  border: 1.5px solid var(--field-line);
  border-radius: 22px;
  background: var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666E7F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 15px center / 16px 16px no-repeat;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
}

#geo_window .chosen-container .chosen-search input[type="text"]:focus,
.m-body .chosen-container .chosen-search input[type="text"]:focus {
  border-color: var(--accent-ink);
  box-shadow: var(--focus-ring);
  outline: none;
}

#geo_window .chosen-container .chosen-results,
.m-body .chosen-container .chosen-results {
  margin: 0;
  padding: 8px;
  max-height: 320px;
  color: var(--ink);
  -webkit-overflow-scrolling: touch;
  /* T53: тонкая полоса прокрутки в стиле сайта, без системных стрелок.
     Колесо, тач и клавиатура работают штатно: это только оформление. */
  scrollbar-width: thin;
  scrollbar-color: var(--field-line-strong) transparent;
}

#geo_window .chosen-container .chosen-results::-webkit-scrollbar,
.m-body .chosen-container .chosen-results::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#geo_window .chosen-container .chosen-results::-webkit-scrollbar-track,
.m-body .chosen-container .chosen-results::-webkit-scrollbar-track {
  background: transparent;
}

#geo_window .chosen-container .chosen-results::-webkit-scrollbar-thumb,
.m-body .chosen-container .chosen-results::-webkit-scrollbar-thumb {
  border-radius: var(--r-pill);
  background: var(--field-line-strong);
}

#geo_window .chosen-container .chosen-results::-webkit-scrollbar-button,
.m-body .chosen-container .chosen-results::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

#geo_window .chosen-container .chosen-results li,
.m-body .chosen-container .chosen-results li {
  display: flex;
  align-items: center;
  min-height: 44px;          /* цель касания §12 */
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

#geo_window .chosen-container .chosen-results li.highlighted,
.m-body .chosen-container .chosen-results li.highlighted {
  /* T77 (В1): наведение должно быть заметно на непрозрачной панели */
  background: var(--menu-hover);
  color: var(--ink);
}

#geo_window .chosen-container .chosen-results li.result-selected,
.m-body .chosen-container .chosen-results li.result-selected {
  background: var(--ink);
  color: #fff;
  font-weight: 800;
}

#geo_window .chosen-container .chosen-results li.no-results,
.m-body .chosen-container .chosen-results li.no-results {
  background: transparent;
  color: var(--muted-strong);
  font-weight: 600;
}

#geo_window .chosen-container .chosen-results li.group-result,
.m-body .chosen-container .chosen-results li.group-result {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- поле «Город» в форме (закрытое состояние) ---------------------------- */

.m-body .city-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}

.m-body .city-input .city-name {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

/* T53: кнопки «Выбрать» и «Удалить» — как кнопки §13 (светлый градиент,
   рамка, блик и тень). Раньше общее правило `.city-input a` красило фон в
   --accent-ink, а это правило задавало тот же цвет текста — надпись
   «Выбрать» сливалась с фоном. Теперь цвета берутся из токенов кнопок §13:
   контраст --btn-login-ink / --btn-reg-ink ≥ 10:1 на обоих концах
   градиента, высота 44px на телефоне, подчёркивания нет ни в одном
   состоянии. «Выбрать» — основная (голубая), «Удалить» — вторичная
   (светлая с контуром). */
.m-body form .city-input a.ajax-modal,
.m-body form .city-input a.city_clear_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.m-body form .city-input a.ajax-modal {
  background-color: transparent;
  background-image: linear-gradient(var(--btn-login-from), var(--btn-login-to));
  border-color: var(--btn-login-border);
  box-shadow: var(--btn-login-blink), var(--btn-login-shadow);
  color: var(--btn-login-ink);
}

.m-body form .city-input a.city_clear_link {
  background-color: transparent;
  background-image: linear-gradient(var(--btn-reg-from), var(--btn-reg-to));
  border-color: var(--btn-reg-border);
  box-shadow: var(--btn-reg-blink), var(--btn-reg-shadow);
  color: var(--btn-reg-ink);
}

.m-body form .city-input a.ajax-modal:hover,
.m-body form .city-input a.city_clear_link:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.m-body form .city-input a.ajax-modal:hover {
  box-shadow: var(--btn-login-blink), var(--btn-login-shadow-hover);
}

.m-body form .city-input a.city_clear_link:hover {
  box-shadow: var(--btn-reg-blink), var(--btn-reg-shadow-hover);
}

.m-body form .city-input a.ajax-modal:active,
.m-body form .city-input a.city_clear_link:active {
  transform: none;
}

.m-body form .city-input a.ajax-modal:active {
  box-shadow: var(--btn-login-blink), var(--btn-login-shadow-active);
}

.m-body form .city-input a.city_clear_link:active {
  box-shadow: var(--btn-reg-blink), var(--btn-reg-shadow-active);
}

.m-body form .city-input a.ajax-modal:focus-visible,
.m-body form .city-input a.city_clear_link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- телефон (до 480px) --------------------------------------------------- */

@media (max-width: 480px) {
  #geo_window .wrapper { gap: 12px; }

  #geo_window .chosen-container .chosen-results,
  .m-body .chosen-container .chosen-results { max-height: 46vh; }

  #geo_window .chosen-container .chosen-drop,
  .m-body .chosen-container .chosen-drop { max-width: 100%; }
}

/* --- тёмная тема ---------------------------------------------------------- */
/* Токены сами меняются по теме; отдельно правим только стрелку и лупу —
   их цвет зашит в SVG и через переменную не подставляется. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #geo_window .chosen-container-single .chosen-single::after,
  :root:not([data-theme="light"]) .m-body .chosen-container-single .chosen-single::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  :root:not([data-theme="light"]) #geo_window .chosen-container .chosen-search input[type="text"],
  :root:not([data-theme="light"]) .m-body .chosen-container .chosen-search input[type="text"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] #geo_window .chosen-container-single .chosen-single::after,
:root[data-theme="dark"] .m-body .chosen-container-single .chosen-single::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] #geo_window .chosen-container .chosen-search input[type="text"],
:root[data-theme="dark"] .m-body .chosen-container .chosen-search input[type="text"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* --- Панель фильтра (перенесено из catalog.css в T75: используется и на
   /users, и на других страницах; catalog.css грузится только в каталоге) --- */

/* --- Панель фильтра: карточка с пилюлями (list_show_filter=1) --------------- */

.m-body .filter-panel {
  margin: 0 0 16px;
  padding: 0 16px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.m-body .filter-panel .filter-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.m-body .filter-panel .filter-link a span {
  padding-left: 0;
  background: none;
}

.m-body .filter-panel .filter-link a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='4' x2='14' y2='4'/%3E%3Cline x1='10' y1='4' x2='3' y2='4'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3Cline x1='8' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='20' x2='16' y2='20'/%3E%3Cline x1='12' y1='20' x2='3' y2='20'/%3E%3Cline x1='14' y1='2' x2='14' y2='6'/%3E%3Cline x1='8' y1='10' x2='8' y2='14'/%3E%3Cline x1='16' y1='18' x2='16' y2='22'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' y1='4' x2='14' y2='4'/%3E%3Cline x1='10' y1='4' x2='3' y2='4'/%3E%3Cline x1='21' y1='12' x2='12' y2='12'/%3E%3Cline x1='8' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='20' x2='16' y2='20'/%3E%3Cline x1='12' y1='20' x2='3' y2='20'/%3E%3Cline x1='14' y1='2' x2='14' y2='6'/%3E%3Cline x1='8' y1='10' x2='8' y2='14'/%3E%3Cline x1='16' y1='18' x2='16' y2='22'/%3E%3C/svg%3E") center / contain no-repeat;
}

.m-body .filter-panel .filter-container {
  padding: 0 0 16px;
}

.m-body .filter-panel .filter-close {
  float: none;
  margin: 0;
  text-align: right;
}

.m-body .filter-panel .filter-close a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.m-body .filter-panel .fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 8px;
}

.m-body .filter-panel .fields .field {
  float: none;
  width: auto;
  min-width: 200px;
  flex: 1 1 200px;
  min-height: 0;
  margin: 0;
}

.m-body .filter-panel .fields .title {
  color: var(--muted);
  text-shadow: none;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

.m-body .filter-panel .input,
.m-body .filter-panel select {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--field-line);
  border-radius: var(--r-pill);
  background: var(--field-bg);
  color: var(--ink);
  font-size: 15px;
}

.m-body .filter-panel .buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.m-body .filter-panel .buttons .input,
.m-body .filter-panel .buttons button,
.m-body .filter-panel .buttons [type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--orange-fill);
  color: var(--orange-ink);
  box-shadow: var(--orange-shadow);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.m-body .filter-panel .buttons .link a {
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 700;
}


/* ==========================================================================
   T48 — мобильные формы и компоненты по docs/DESIGN-FORMS.md §12
   (ручная проверка 16.10.2026). Только оформление и клиентские улучшения:
   серверная логика, имена полей и маршруты не меняются.
   ========================================================================== */

/* --- §12.1 Редактирование профиля ----------------------------------------- */

/* Контент на всю ширину: у страниц с вкладками (в том числе «Сеансы», где
   формы нет) убираем внутренний padding карточки .m-body (внешний отступ
   .m-main остаётся). */
@media (max-width: 767px) {
  .m-body:has(.tabs-menu) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Вкладки — одна горизонтальная прокручиваемая строка пилюль. */
.m-body .tabs-menu { margin: 0 0 16px; }

.m-body .tabs-menu > select.mobile_menu_select { display: none; }

.m-body .tabs-menu > ul.tabbed {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 0 4px;
  border: none;
  overflow-x: auto;
  /* Не hidden: аудит §12 (класс «в») считает overflow-y:hidden обрезкой.
     При overflow-x:auto значение visible всё равно вычисляется в auto. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.m-body .tabs-menu > ul.tabbed::-webkit-scrollbar { display: none; }

.m-body .tabs-menu > ul.tabbed li {
  float: none;
  flex: 0 0 auto;
  margin: 0;
  background: none;
  scroll-snap-align: start;
}

.m-body .tabs-menu > ul.tabbed li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.m-body .tabs-menu > ul.tabbed li a:hover {
  background: var(--tint);
  color: var(--ink);
  text-decoration: none;
}

.m-body .tabs-menu > ul.tabbed li.active a,
.m-body .tabs-menu > ul.tabbed li.active a:hover {
  margin: 0;
  border-color: var(--chip-active-bg);
  background: var(--chip-active-bg);
  color: var(--chip-active-ink);
}

/* Поля формы — на всю ширину, включая дату; поиск Chosen не сжимаем. */
.m-body form .date-input { width: 100%; }

.m-body .chosen-container .chosen-search { padding: 8px 4px 4px; }

/* Кнопка «показать пароль» — рядом с полем, а не поверх него (§12.1). */
.m-body .m-pass {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-body .m-pass .input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding-right: 16px;
}

.m-body .m-pass__toggle {
  position: static;
  transform: none;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--field-line);
  border-radius: 16px;
  background: var(--field-bg);
}

/* Аватар: круглое превью 96×96 (заглушку при отсутствии фото ставит forms.js). */
#widget_image_avatar .preview {
  width: 96px;
  height: 96px;
  border: none;
  border-radius: 50%;
  background: var(--photo);
}

#widget_image_avatar .preview img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

#widget_image_avatar .preview.is-placeholder a { display: none; }

/* --- §12.3 Загрузка фото --------------------------------------------------- */

.m-body .widget_image_single,
.m-body .widget_image_multi { overflow: visible; }

.m-body .widget_image_single > .block,
.m-body .widget_image_multi > .block {
  float: none;
  height: auto;
  margin-right: 0;
}

.m-body .qq-uploader { min-height: 120px; }

.m-body .qq-upload-button {
  width: 120px;
  height: 120px;
}

/* Скрытый input fileuploader'а: не даёт scrollHeight больше рамки. */
.m-body .qq-upload-button input[type="file"] {
  width: 100% !important;
  height: 100% !important;
  font-size: 0 !important;
}

/* T74 (этап 4): тайлы галереи — тип поля «несколько изображений».
   Ядро рендерит div.preview (upload_multi.tpl.php:29), а не li, поэтому
   правило «.previews_list li» выше на этот виджет не действует: от дефолтных
   стилей (64px, float, рамка) превью схлопываются в строку ссылок
   «Удалить», и sortable-перетаскивание не работает. Тайл 104×104 и бейдж
   удаления — те же, что у одиночного изображения (см. правила выше). */
.m-body .widget_image_multi .previews_list .preview {
  position: relative;
  float: none;
  width: 104px;
  height: 104px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--photo);
  line-height: normal;
  cursor: move;
}

.m-body .widget_image_multi .previews_list .preview img {
  float: none;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-body .widget_image_multi .previews_list .preview a {
  position: absolute;
  top: 6px;
  right: 6px;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}

/* Помощник sortable: сохраняет форму тайла и виден над сеткой. */
.m-body .widget_image_multi .previews_list .ui-sortable-helper {
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(20, 38, 74, .25);
}

@media (max-width: 767px) {
  .m-body .widget_image_multi .previews_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- §12.4 Подсказка и кнопки внизу формы объявления ----------------------- */

/* Подсказка — обычный блок в потоке, иконка Lucide info 16px. */
.m-body .content_moderation_notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  float: none;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  background: none;
}

.m-body .content_moderation_notice::before {
  content: '';
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.m-body form .buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- §12.2 Выбор категории: нижняя шторка на телефоне ---------------------- */

@media (max-width: 768px) {
  body.m-sheet-open { overflow-y: hidden; }

  .m-catsheet__backdrop {
    position: fixed;
    inset: 0;
    z-index: 129;
    background: rgba(10, 18, 35, .55);
  }

  .m-body .cat_selector_box .csb_ajax.m-catsheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 130;
    width: auto;
    max-height: 78vh;
    margin: 0;
    padding: 0 16px calc(20px + env(safe-area-inset-bottom));
    border: none;
    border-radius: 24px 24px 0 0;
    /* T78: нижняя шторка выбора категории — непрозрачная панель */
    background: var(--menu-bg);
    box-shadow: 0 -10px 40px rgba(10, 18, 35, .35);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .m-catsheet__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -16px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sep);
    /* T78: липкая шапка шторки не должна просвечивать при прокрутке */
    background: var(--menu-bg);
  }

  .m-catsheet__title {
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
  }

  .m-catsheet__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: var(--track);
    color: var(--ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }

  .m-body .m-catsheet .csb_parents ul { margin: 12px 0 4px; }

  .m-body .m-catsheet .csbp_cats_item {
    width: 100%;
    height: auto;
    min-height: 48px;
    display: flex;
    align-items: center;
    border: none;
    border-bottom: 1px solid var(--sep);
    border-radius: 0;
    background: transparent;
  }

  .m-body .m-catsheet .csbp_cats_item span {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 15px;
    line-height: 20px;
  }

  .m-body .m-catsheet .csbp_cats_item b {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
  }

  .m-body .m-catsheet .csbpc_back {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 4px;
    font-weight: 700;
    cursor: pointer;
  }

  .m-catsheet__check {
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: var(--accent-ink);
  }

  .m-catsheet__check svg { width: 18px; height: 18px; }
}

/* --- §12.1/§12.2: вопросы (Questions) — сброс content-box дополнения ------- */
/* forms.css дополнения ставит #question_form * content-box !important;
   из-за этого fieldset с padding вылезал за экран. Наш селектор
   специфичнее и подключён после — возвращаем нормальную модель. */
body #question_form,
body #question_form * { box-sizing: border-box !important; }

body #question_form fieldset {
  width: 100% !important;
  min-width: 0 !important;
}

/* ===========================================================================
   T56b: действия модератора на странице записи.
   Ядро добавляет кнопки в меню toolbar (content/actions/item_view.php:442–445),
   шаблоны mariupol выводят их здесь. Стиль — по токенам и §13 DESIGN-FORMS:
   одобрение — оранжевая заливка, остальные — вторичные пилюли, цель ≥ 44 px.
   =========================================================================== */

.m-modbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 12px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow);
}

.m-modbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--btn-reg-border);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--btn-reg-from), var(--btn-reg-to));
  box-shadow: var(--btn-reg-shadow), var(--btn-reg-blink);
  color: var(--btn-reg-ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.m-modbar__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-reg-shadow-hover);
  text-decoration: none;
}

.m-modbar__btn:active {
  transform: none;
  box-shadow: var(--btn-reg-shadow-active);
}

.m-modbar__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* «Одобрить» — главное действие: оранжевая заливка (§7, D21) */
.m-modbar__btn.accept {
  border-color: transparent;
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
}

.m-modbar__btn.accept:hover {
  box-shadow: var(--orange-shadow), 0 10px 22px rgba(42,30,18,.18);
  filter: brightness(1.03);
}

.m-modbar__btn.accept:active {
  box-shadow: var(--orange-shadow-press);
  filter: none;
}

/* «Отклонить/Удалить» — вторичная, но заметная опасная кнопка */
.m-modbar__btn.delete,
.m-modbar__btn.refuse {
  border-color: var(--danger);
  background: var(--danger-bg);
  box-shadow: none;
  color: var(--danger-ink);
}

.m-modbar__btn.delete:hover,
.m-modbar__btn.refuse:hover {
  box-shadow: var(--shadow);
  filter: brightness(1.02);
}

@media (max-width: 420px) {
  .m-modbar { padding: 10px; }
  .m-modbar__btn { flex: 1 1 100%; }
}

/* ==========================================================================
   T62 — исправления по обходу на телефоне 20.10.2026
   ========================================================================== */

/* --- T62.4: действия автора на странице объявления -----------------------
   Ядро и дополнение Board складывают в меню toolbar до шести кнопок
   («Пожаловаться», «Поднять», «VIP», «Закрепить», «Изменить», «Удалить»).
   На телефоне они раньше шли каждая на всю строку (старое правило
   ≤420px flex:1 1 100%) и занимали 324px — больше трети экрана, уводя фото
   и цену за сгиб. Теперь это компактный горизонтально прокручиваемый ряд
   высотой в одну кнопку (44px + отступы), свайп по нему не мешает
   вертикальной прокрутке страницы. */
@media (max-width: 899.98px) {
  .m-modbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px;
    gap: 8px;
  }
  .m-modbar::-webkit-scrollbar { display: none; }
  .m-modbar__btn {
    flex: 0 0 auto;
    padding: 0 14px;
    font-size: 14px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

@media (max-width: 420px) {
  .m-modbar { padding: 8px; }
  /* перекрываем прежнее правило T56b «каждая кнопка на всю строку» */
  .m-modbar__btn { flex: 0 0 auto; }
}

/* Пояснение автору, пока объявление на модерации: ядро (item_edit.php:75–77
   и item_delete.php:39–41) отдаёт 404 на правку/удаление неодобренной записи,
   поэтому кнопок «Изменить»/«Удалить» в toolbar в этом состоянии нет. */
.m-modnote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: var(--tint);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.m-modnote svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent-ink); }

/* --- T62.2: окно «Уведомления» в стиле геоселектора (T53) --------------- */
.nyroModalCont:has(#pm_notices_window) {
  /* T78: непрозрачный фон панели в обеих темах (см. background ниже) */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  /* inline-ширину ядро считает по разметке до перерисовки: фиксируем */
  width: min(560px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px);
  height: auto !important;
  max-height: calc(100vh - 24px);
  /* стоковое `.nyroModalCont{margin:30px}` (на телефоне 30px 15px) сдвигало
     окно от центра на 15px: при 390px правый край выходил за экран */
  margin: 0 !important;
  overflow: visible !important;
  border-radius: var(--r-block);
  background: var(--menu-bg);
  box-shadow: 0 18px 50px rgba(20, 38, 74, .28), 0 2px 8px rgba(20, 38, 74, .12);
}

#pm_notices_window {
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 18px;
  border-radius: var(--r-block);
  color: var(--ink);
  font-family: var(--font);
}

.m-notices__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  padding-right: 48px;       /* место под крест закрытия окна */
}

.m-notices__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.m-notices__clear {
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--btn-reg-border);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--btn-reg-from), var(--btn-reg-to));
  box-shadow: var(--btn-reg-shadow), var(--btn-reg-blink);
  color: var(--btn-reg-ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

/* Стоковое правило `#pm_notices_list .item` (специфичность 1,1,0) задаёт
   padding 5px, серый фон и рамку — без явного перекрытия текст заходил под
   крест закрытия. */
#pm_notices_list .m-notices__item {
  position: relative;
  overflow: visible;
  margin: 0;
  padding: 14px 52px 14px 0; /* место под крест, текст не заходит под него */
  border: 0;
  border-top: 1px solid var(--field-line);
  background: transparent;
  color: var(--ink);
}

#pm_notices_list .m-notices__item:first-child { border-top: 0; }

.m-notices__date {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}

.m-notices__content {
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ink);
}

.m-notices__content a { color: var(--accent-ink); }

.m-notices__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.m-notices__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--btn-reg-border);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--btn-reg-from), var(--btn-reg-to));
  box-shadow: var(--btn-reg-shadow), var(--btn-reg-blink);
  color: var(--btn-reg-ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.m-notices__clear:hover,
.m-notices__action:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-reg-shadow-hover);
}

.m-notices__clear:focus-visible,
.m-notices__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Крест закрытия самого уведомления: 44×44, вне текста */
.m-notices__close {
  position: absolute;
  top: 8px;
  right: 4px;
  width: 44px;
  height: 44px;
}

.m-notices__close a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  text-decoration: none;
}

.m-notices__close a:hover { background: var(--tint); color: var(--ink); }

.m-notices__close a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.m-notices__close svg { width: 20px; height: 20px; }

.m-notices__empty {
  padding: 8px 0 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

/* --- T62.3: одна стрелка у любого select шаблона -------------------------
   До правки у части полей (вкладка «Уведомления» профиля и другие формы)
   фон со стрелкой повторялся после закрытия списка: background-image
   tile-ился, а у системного select оставалась ещё и своя стрелка. Жёстко
   фиксируем для всех видимых select: системную стрелку скрываем
   (appearance:none), свою рисуем одним background-image без повтора.
   Поля Chosen (`.chosen-container`, геоселектор T53) не затрагиваются:
   их нативный select скрыт, своя стрелка — псевдоэлемент `::after`. */
select:not(.mobile_menu_select):not([multiple]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666E7F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
}

[data-theme="dark"] select:not(.mobile_menu_select):not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select:not(.mobile_menu_select):not([multiple]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A3BF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

/* T75-2: ядро (core.js, allow_mobile_select) добавляет пустой
   select.mobile_menu_select в каждый <nav> на странице (appendTo("nav")).
   Шаблон строит мобильную навигацию сам (плитки .m-secnav, таббар, свои
   списки select.js), поэтому служебные копии скрываются целиком — раньше
   их скрывали по одной (.m-tabbar, .m-seg, постраничность /board); с
   этапа 2 секции шаблона сами являются <nav>, и пустой селект в них
   занимает место и уводит на «/» при смене. */
.mobile_menu_select { display: none; }

/* ===========================================================================
   T56b/T74: действия модератора в списке /moderation.
   Ядро кладёт кнопки в list_actions_menu (content/hooks/moderation_list.php),
   но для Board рендерится board_list.tpl.php, а для Каталога —
   companies_list.tpl.php, где меню не выводилось. Блок общий для всех
   карточных списков (перенесён из board.css при T74). Оформление — по
   токенам, цель касания ≥ 44 px, в обычных списках блок не появляется
   (меню пустое).
   =========================================================================== */

.m-modactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sep);
  background: var(--tint);
  border-radius: var(--r-tile) var(--r-tile) 0 0;
}

.m-modactions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--btn-reg-border);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--btn-reg-from), var(--btn-reg-to));
  box-shadow: var(--btn-reg-shadow);
  color: var(--btn-reg-ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.m-modactions__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-reg-shadow-hover);
  text-decoration: none;
}

.m-modactions__btn:active {
  transform: none;
  box-shadow: var(--btn-reg-shadow-active);
}

.m-modactions__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.m-modactions__btn.accept {
  border-color: transparent;
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
}

.m-modactions__btn.accept:hover {
  box-shadow: var(--orange-shadow), 0 10px 22px rgba(42,30,18,.18);
}

.m-modactions__btn.accept:active {
  box-shadow: var(--orange-shadow-press);
}

.m-modactions__btn.delete,
.m-modactions__btn.refuse {
  border-color: var(--danger);
  background: var(--danger-bg);
  box-shadow: none;
  color: var(--danger-ink);
}

@media (max-width: 420px) {
  .m-modactions { padding: 8px; }
  .m-modactions__btn { flex: 1 1 calc(50% - 6px); }
}

/* ===========================================================================
   Базовые элементы макета C3 (T75, этап 1). Примитивы для новых блоков
   (этапы 2–3: шапка, главная, каталог). Существующая разметка переводится
   на них в своих этапах; здесь только определения.
   Макет: /home/agent/import/design/mariupol-home-mockup-C3.html
   (.btn/.btn2/.btn.s, .wd/.wd-h/.wd-t/.ico, .pill, .mini, .dots, .ph).
   =========================================================================== */

/* --- Кнопки: основная coral, вторичная teal, малая ------------------------- */
/* Плоские пилюли без свечений; текст --btn-ink (белый в светлой теме,
   тёмный в тёмной). Hover — подъём на 1px и тень карточки, active — прижата,
   focus-visible — контур 3px (как у кнопок §13). */

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 24px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: var(--btn-ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.m-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-float);
}

.m-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.m-btn:focus-visible {
  outline: 3px solid var(--coral-ink);
  outline-offset: 2px;
}

.m-btn--teal { background: var(--teal); }

/* T76, этап 4 (бывший П10): вторичная кнопка виджета — стекло, а не
   заливка. Заливными остаются только «Подать объявление» в шапке (.m-add)
   и главное действие в «Объявлениях» (тёмная плитка .m-quick__tile--key). */
.m-btn--s {
  min-height: 38px;
  padding: 0 16px;
  background: var(--tile-fill);
  border: 1px solid var(--tile-edge);
  box-shadow: var(--tile-shadow);
  color: var(--ink);
  font-size: 14px;
}

.m-btn--s:hover {
  background: var(--chip);
  box-shadow: 0 0 0 3px var(--tile-ring);
}

.m-btn--s:active { box-shadow: none; }

/* --- Рамка виджета и заголовок блока с иконкой (.wd макета) ---------------- */

.m-wd {
  background: var(--surface);
  border: 1px solid var(--line);      /* стекло макета: рамка .65 / .07 */
  border-radius: var(--r-wd);
  box-shadow: var(--shadow);
  padding: 22px;
  padding-bottom: 26px;
}

.m-wd__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

/* T75, П4: ряд чипов-рубрик в заголовке — одна горизонтальная строка.
   Если чипы не помещаются рядом с заголовком и кнопкой, ряд сжимается
   (min-width: 0) и прокручивается по горизонтали, а кнопка действия
   остаётся в строке заголовка. Подписи длинных рубрик сокращены в
   виджете (shortChipTitle). */
.m-wd__chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  /* flex-basis 0: ряд не требует места по ширине содержимого, поэтому
     кнопка действия не переносится на вторую строку; остаток ширины
     чипы забирают себе и прокручиваются внутри. */
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.m-wd__chips::-webkit-scrollbar { display: none; }

.m-wd__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--teal);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* T76, этап 5: надзаголовок виджета капсом (.lab макета) — 11.5 px,
   разрядка .12em, вторичный цвет; стоит над названием внутри заголовка. */
.m-wd__titletext {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.m-wd__overline {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Значок-квадрат (.ic макета T76): стекло 44px, радиус 15px (не круг),
   двухцветная иконка: заливка --duo, контур --icon-box-ink */
.m-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--icon-box-edge);
  border-radius: 15px;
  background: var(--icon-box-bg);
  color: var(--icon-box-ink);
}

.m-ico svg { width: 24px; height: 24px; }

/* Старые цветовые варианты оставлены ради совместимости разметки:
   в T76 все квадраты виджетов — одинаковое стекло. */
.m-ico--teal,
.m-ico--coral,
.m-ico--sand { background: var(--icon-box-bg); color: var(--icon-box-ink); }

/* Значок в заголовке виджета — тот же 44/15 */
.m-ico--wd { width: 44px; height: 44px; border-radius: 15px; }

/* Баннер «Биржа услуг» (T75) — единственный цветной квадрат: главное
   действие макета T76 оставляет оранжевую подложку с белым значком. */
.m-ico.m-banner__ico {
  background: var(--orange-fill);
  border: 0;
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
}

@media (max-width: 820px) {
  .m-wd { padding: 16px; border-radius: 26px; }  /* макет: карточка 390 — 26px */
  .m-wd__title { font-size: 17px; }
}

/* --- Чип-фильтр виджета (компактная .pill макета) -------------------------- */
/* База .m-chip (44px, цель касания) остаётся; --s — компактная для строк
   фильтров в шапке виджета на компьютере (на телефоне ряды фильтров
   скрываются, как .hidem в макете). Активный — teal с текстом --btn-ink. */

.m-chip--s {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

.m-chip--s.on {
  background: var(--teal);
  color: var(--btn-ink);
}

/* --- Мини-карточка списка (.mini макета) ----------------------------------- */

.m-mini {
  display: block;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--ink);
}

a.m-mini:hover { text-decoration: none; background: var(--surface); }

.m-mini__meta {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.m-mini__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* --- Точки пролистывания (.dots макета) ------------------------------------ */
/* Активная точка — coral, остальные — muted 35% (декоративный индикатор
   позиции, требование контраста 1.4.11 на него не распространяется). */

.m-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.m-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
}

.m-dots i.o {
  background: var(--muted);
  opacity: .35;
}

/* --- Заглушка фото записи (.ph макета) ------------------------------------- */
/* Песочный градиент --photo (свой в каждой теме) + контурный значок цветом
   текста; битых картинок нет — всегда вектор. */

.m-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--photo);
  color: var(--ink);
}

.m-ph svg { width: 34px; height: 34px; }

/* ===========================================================================
   Раскладки главной по макету C3 (T75, этап 3, шаг 3.4). Секция .m-sec —
   вертикальный ритм к flex-gap 16px контейнера home-top (итоговый зазор
   ~28px, как у .sec макета); .m-sec--band — чередующаяся полоса фона
   --band. Полоса — на всю ширину окна (T75, П2): фон выводим тенью на
   100vmax и обрезаем по вертикали clip-path, поэтому ширина раскладки не
   меняется и 100vw с полосой прокрутки не даёт перелив. Внутренние поля
   компенсируют паддинг 16px .m-main — карточки остаются на сетке.
   Макет: import/design/mariupol-home-mockup-C3.html.
   =========================================================================== */

.m-sec { padding: 6px 0; }

/* T76, этап 4 (бывший П11): полосу рисует тень на 100vmax, поэтому
   карточка внутри полосы остаётся на общей сетке главной — левый и правый
   края совпадают с соседними виджетами на 1440 и 1920. Раньше
   отрицательные поля и padding сдвигали карточку на 16 px и сужали её. */
.m-sec--band {
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}

/* --- Герой-ряд: «Объявления» 1.55fr + правая колонка 1fr (.hero макета) ---- */

.m-hero3 {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
}

.m-hero3__side {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  min-width: 0;
}

/* Поле поиска по объявлениям (.srch макета); svg значка не растягивается */
.m-srch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 13px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 15px;
}

.m-srch svg { width: 18px; height: 18px; flex: 0 0 auto; }

.m-srch input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.m-srch input:focus { outline: none; }

.m-srch:focus-within { border-color: var(--teal); }

/* --- Быстрые действия «Объявлений» (T76, этап 4) ---------------------------
 * Пять стеклянных плиток: «Подать» — главное действие виджета (тёмная
 * в светлой теме, оранжевая в тёмной), остальные — вторичные. Телефон:
 * ряд листается вбок со scroll-snap, как .qrow макета. */

.m-quick {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.m-quick__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 96px;
  padding: 12px 8px;
  border: 1px solid var(--tile-edge);
  border-radius: var(--r-tile);
  background: var(--tile-fill);
  box-shadow: var(--tile-shadow);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

a.m-quick__tile:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--tile-ring);
  color: var(--ink);
  text-decoration: none;
}

.m-quick__ico { display: flex; transition: transform .25s ease; }
.m-quick__ico svg { width: 36px; height: 36px; }

a.m-quick__tile:hover .m-quick__ico { transform: translateY(-2px) scale(1.06); }

.m-quick__tile--key {
  border-color: var(--quick-key-bg);
  background: var(--quick-key-bg);
  box-shadow: var(--shadow);
  color: var(--quick-key-ink);
  --duo: var(--quick-key-duo);
  --duoo: var(--quick-key-duoo);
}

a.m-quick__tile--key:hover {
  border-color: var(--quick-key-bg);
  box-shadow: 0 0 0 3px var(--tile-ring);
  color: var(--quick-key-ink);
}

@media (max-width: 820px) {
  .m-quick {
    display: flex;
    gap: 10px;
    margin-inline: -22px;
    padding: 0 22px 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .m-quick::-webkit-scrollbar { display: none; }

  .m-quick > li {
    flex: 0 0 96px;
    scroll-snap-align: start;
  }

  .m-quick__tile { min-height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-quick__tile,
  .m-quick__ico { transition: none; }
  a.m-quick__tile:hover .m-quick__ico { transform: none; }
}

/* Ряд мини-карточек (.row/.r3 макета): телефон — листание со scroll-snap
   (~72% ширины карточка), компьютер — сетка 4 (SPEC.md п. 7) */
.m-crow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4);
  gap: 20px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.m-crow__item { scroll-snap-align: start; }

/* Три карточки в виджете-герое (.r3 макета) */
.m-crow--ads { grid-auto-columns: calc((100% - 40px) / 3); }

@media (min-width: 1024px) {
  .m-crow {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  /* T75, П7: при одной-двух карточках пустые колонки не оставляем —
     auto-fit растягивает карточки на всю ширину ряда (три карточки
     по-прежнему встают в три колонки: 693 px / 3 ≈ 218 px). */
  .m-crow--ads { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* --- Ссылка «Все … →» (.more макета) --------------------------------------- */

.m-more {
  font-size: 15px;
  font-weight: 700;
  color: var(--coral);
  white-space: nowrap;
}

a.m-more:hover { text-decoration: underline; }

/* --- Правая колонка героя: каталог на teal-soft (wd .tealS макета) --------- */

.m-wd--tealsoft {
  background: var(--teal-soft);
  box-shadow: none;
}

.m-wd--tealsoft .m-wd__title { color: var(--teal-ink); }

.m-catlist {
  display: grid;
  gap: 10px;
}

/* Строка компании (.fcard макета) + логотип 44px, если он есть */
.m-fcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 16px;
  color: var(--ink);
  transition: transform .18s ease;
}

a.m-fcard:hover { text-decoration: none; transform: translateY(-1px); }

.m-fcard__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--tint);
  color: var(--accent-ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.m-fcard__logo img { width: 100%; height: 100%; object-fit: cover; }

.m-fcard__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.m-fcard__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.m-fcard__sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-catbtns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* --- Плитка «Народная карта» (.card на coralS макета) ---------------------- */

.m-mapcard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 150px;
  padding: 22px;
  /* T76, Р4: карта нейтральная (стекло темы), оранжевые — только метки.
     Было: заливка --coral-soft и оранжевый текст на персиковом. */
  background: var(--tile-fill);
  border: 1px solid var(--tile-edge);
  border-radius: var(--r-wd);
  overflow: hidden;
  color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
}

a.m-mapcard:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px var(--tile-ring);
}

.m-mapcard__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Улицы — в тонах темы, метки ниже перекрыты акцентом. */
  color: var(--muted);
  opacity: .32;
}

.m-mapcard__deco circle { fill: var(--coral); }

/* T76, этап 5 / Р9: надзаголовок капсом и заголовок карты — как .lab/h2
   макета: 11.5px/.12em сверху, 17px 600 ниже; подписи 14px больше нет. */
.m-mapcard__overline {
  position: relative;
}

.m-mapcard__title {
  position: relative;
  max-width: 220px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

/* --- «Новости»: главная на hero-градиенте + список (.hero.nw макета) ------- */

.m-nwwd {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 20px;
}

.m-nwwd__list {
  display: grid;
  gap: 12px;
  align-content: start;
}

.m-nwhero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--hero);
  color: var(--hero-ink);
  transition: transform .25s ease;
}

a.m-nwhero:hover { text-decoration: none; transform: translateY(-3px); }

/* Фото главной новости поверх градиента; снизу — затемнение под текст */
.m-nwhero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-nwhero--img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 22, 20, .82), rgba(18, 22, 20, 0) 62%);
}

/* T76, этап 4: заглушка без фото — градиент макета и волнистые линии
   (раньше был декоративный круг на --sand). Цвет линий — токен темы. */
.m-nwhero--grad { background: var(--nwhero-fallback); }

.m-nwhero__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--nwhero-deco);
  opacity: 1;
}

.m-nwhero__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 26px;
}

.m-nwhero__pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  /* T76, Р6: светлое стекло с белым текстом (было: --sand на тёмном фото —
     плашка сливалась с фоном). Так же в макете: rgba(255,255,255,.18). */
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.24);
  color: #FFFFFF;
  /* T76, этап 6: размытие только у шапки и плиток верхнего уровня;
     плашка вложена в карточку новости — здесь его нет. */
  font-size: 12px;
  font-weight: 700;
}

.m-nwhero__title {
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
}

/* --- Две рамки рядом (.two макета) и списки строк -------------------------- */

.m-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.m-minilist {
  display: grid;
  gap: 10px;
}

/* --- Баннер «Биржа услуг: скоро» (.wd на sand макета) ---------------------- */

.m-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: var(--sand);
  box-shadow: none;
  color: var(--sand-ink);
}

.m-banner__ico { width: 56px; height: 56px; border-radius: 18px; }

.m-banner__ico svg { width: 26px; height: 26px; }

.m-banner__body {
  flex: 1 1 240px;
  min-width: 0;
}

.m-banner__title {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 500;
}

.m-banner__text {
  margin-top: 4px;
  font-size: 15px;
  opacity: .85;
}

/* --- Телефон (≤820px, как в макете): одна колонка, скрытие чипов ----------- */

@media (max-width: 820px) {
  .m-hero3,
  .m-two,
  .m-nwwd { grid-template-columns: minmax(0, 1fr); }

  .m-crow { grid-auto-columns: 72%; gap: 14px; }

  .m-chip--hidem { display: none !important; }

  .m-nwhero { min-height: 220px; }

  .m-nwhero__body { padding: 16px; }

  .m-nwhero__title { font-size: 18px; }
}

/* Строка «Поиск по порталу + Важное» из вёрстки T19 ушла (макет C3):
   общий поиск — в шапке, поиск по объявлениям — в виджете-герое.
   Правило только CSS, обратимо. */
@media (min-width: 1024px) {
  #widget_pos_home-top .m-search--row { display: none; }
}

/* ==========================================================================
   T75, этап 5 — служебные страницы: пилюли-меню ядра и иконка RSS
   ========================================================================== */

/* Ядро рисует .pills-menu-small прямоугольниками radius 3px (#ECF0F1):
   модерация, корзина, группы, служебные вкладки профиля. Приводим к пилюлям
   темы — тот же вид, что у вкладок и чипов. */
.m-body .pills-menu-small {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  overflow: visible;
  list-style: none;
}

.m-body .pills-menu-small li {
  float: none;
  height: auto;
  margin: 0;
  padding: 0;
  border: 1px solid var(--field-line);
  border-radius: var(--r-pill);
  background: var(--card);
  line-height: 1;
}

.m-body .pills-menu-small li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.m-body .pills-menu-small li a:hover {
  color: var(--accent-ink);
  text-decoration: none;
}

.m-body .pills-menu-small li.active {
  border-color: var(--chip-active-bg);
  background: var(--chip-active-bg);
  color: var(--chip-active-ink);
}

.m-body .pills-menu-small li.active a,
.m-body .pills-menu-small li.active a:hover { color: var(--chip-active-ink); }

.m-body .pills-menu-small .counter { color: var(--muted); font-size: 11px; }

.m-body .pills-menu-small li.active .counter {
  color: var(--chip-active-ink);
  opacity: .8;
}

/* Иконка RSS в заголовке ленты: ядро подставляет оранжевый PNG
   (theme-content.css), заменяем на контурную SVG в цвете заголовка. */
.m-body .inline_rss_icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  overflow: hidden;
  vertical-align: -3px;
  background: currentColor;
  text-indent: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'/%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1.4' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'/%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1.4' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===========================================================================
   T76, этап 6: производительность и доступность.
   Размытие (backdrop-filter) остаётся только у шапки и плиток разделов
   верхнего уровня — у вложенных элементов его нет. Если браузер не умеет
   backdrop-filter или пользователь включил «уменьшить прозрачность»,
   стекло заменяется непрозрачными токенами --*-solid.
   =========================================================================== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .m-header { background: var(--header-solid); }
  .m-secnav__tile { background: var(--tile-solid); }
  .m-wd,
  .m-mapcard,
  .m-herotile { background: var(--surface-solid); }
  .m-jcard,
  .m-adcard,
  .m-ccard,
  .m-ncard { background: var(--card-nested-solid); }
}

@media (prefers-reduced-transparency: reduce) {
  .m-header {
    background: var(--header-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .m-secnav__tile {
    background: var(--tile-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .m-wd,
  .m-mapcard,
  .m-herotile { background: var(--surface-solid); }
  .m-jcard,
  .m-adcard,
  .m-ccard,
  .m-ncard { background: var(--card-nested-solid); }
}

/* ===========================================================================
   T78: меню действий ядра в списках (.controller_actions_menu).

   Ядерный theme-gui.css задаёт выпадающему ul.menu только рамку и тень, без
   фона, поэтому панель просвечивала. В наших списках объявлений и каталога
   вместо неё используются .m-modactions, но шаблон выводит и штатное меню
   (content/default_list.tpl.php) — закрываем и его: непрозрачная панель,
   читаемый текст, подсветка наведения, z-index выше карточек.
   =========================================================================== */

/* body, а не #body: в mariupol у <body> id вида desktop_device_type, поэтому
   ядерные правила с #body здесь не срабатывают. */
body .controller_actions_menu {
  position: relative;
  float: right;
}

body .controller_actions_menu > input { display: none; }

body .controller_actions_menu ul.menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 70;
  width: 300px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--menu-bg);
  color: var(--ink);
  border: 1px solid var(--field-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card-lg);
}

body .controller_actions_menu > input:checked + label + ul.menu { display: block; }

body .controller_actions_menu ul.menu li {
  padding: 0;
  line-height: 1.2;
}

body .controller_actions_menu ul.menu a {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--ink);
}

body .controller_actions_menu ul.menu li:hover,
body .controller_actions_menu ul.menu a:hover {
  /* T78: --menu-hover виден на непрозрачной панели в обеих темах */
  background: var(--menu-hover);
  color: var(--ink);
  text-decoration: none;
}

body .controller_actions_menu ul.menu a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}