/* Стили раздела «Аналитика по городам»: таблицы, карточки, календарь спроса.
   Обычный файл сайта, а не артефакт сборки раздела — правка едет вместе с
   сайтом. Генератор раздела читает его при сборке. */
.mp-eyebrow { color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; margin: 0 0 10px; }
.mp-note { color: var(--ink2); font-size: 15px; margin: 6px 0 0; max-width: 78ch; }
.mp-byline { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
/* Фраза, которую можно процитировать целиком: число, единица, период и
   оговорка подряд. Отдельный класс — чтобы её было видно и глазом. */
.mp-citable { margin: 12px 0 0; max-width: 82ch; }
.mp-citable b { font-weight: 800; white-space: nowrap; }
/* Определения нужны цитирующему, а не читателю: тот же абзац, но мельче. */
.mp-fine { color: var(--muted); font-size: 14px; }
.mp-answer { max-width: 90ch; margin: 14px 0 0; padding: 16px 20px; border-left: 4px solid var(--accent);
  background: #f2f7fd; border-radius: 0 14px 14px 0; font-size: 17px; }
.mp-answer b { font-weight: 800; }
.mp-facts { list-style: none; padding: 18px 22px; margin: 22px 0 0; background: var(--card);
  border: 1px solid var(--hair); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.mp-facts li { padding: 7px 0 7px 20px; position: relative; font-size: 16px; }
.mp-facts li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.mp-section { margin: 54px 0 0; }
.mp-section > h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 4px; letter-spacing: -0.02em; }
.mp-section > h3, .mp-sub > h3 { font-size: 16px; margin: 26px 0 8px; font-weight: 800; }
.mp-scroll { overflow: auto; max-height: 620px; border: 1px solid var(--hair);
  border-radius: 14px; background: var(--card); margin-top: 10px; }
table.mp { border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 14px; font-variant-numeric: tabular-nums; }
table.mp th, table.mp td { padding: 7px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--hair); }
table.mp thead th { position: sticky; top: 0; z-index: 2; background: var(--card);
  font-size: 12.5px; font-weight: 700; color: var(--ink2); }
table.mp tbody tr:last-child td { border-bottom: 0; }
table.mp th.mp-name, table.mp td.mp-name { position: sticky; left: 0; z-index: 1;
  background: var(--card); text-align: left; font-weight: 600; min-width: 180px; }
table.mp thead th.mp-name { z-index: 3; }
/* The arrow is the point of the table, so it stays pinned to the right edge
   instead of disappearing past the twelfth month column. */
table.mp th.mp-delta, table.mp td.mp-delta { position: sticky; right: 0; z-index: 1;
  background: var(--card); border-left: 1px solid var(--hair); }
table.mp thead th.mp-delta { z-index: 3; }
table.mp tr.mp-total td.mp-delta { background: #f2f6fd; }
table.mp tr.mp-total td { background: #f2f6fd; font-weight: 800; border-top: 2px solid var(--hair); }
table.mp tr.mp-total td.mp-name { background: #f2f6fd; }
table.mp tr.mp-weekend td { background: #f7f9fe; }
table.mp tr.mp-weekend td.mp-name { background: #f7f9fe; }
table.mp th.mp-partial, table.mp td.mp-partial { background: #fbf7ee; }
table.mp thead th.mp-partial { color: #8a5a00; }
.mp-dim { color: var(--muted); }
.mp-up { color: #0a7d3c; font-weight: 700; }
.mp-down { color: #b3261e; font-weight: 700; }
.mp-flat { color: var(--muted); }
.mp-hi { color: #0a7d3c; font-weight: 700; }
.mp-lo { color: #b3261e; font-weight: 700; }
.mp-kpi { display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 0; }
.mp-kpi > div { background: var(--card); border: 1px solid var(--hair); border-radius: 14px;
  padding: 14px 18px; min-width: 150px; flex: 1 1 200px; }
.mp-kpi b { display: block; font-size: 27px; letter-spacing: -0.02em; line-height: 1.15; }
.mp-kpi span { color: var(--ink2); font-size: 13.5px; }
/* Two cards, each: what the number is, what it is now, and where it moved. */
.mp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.mp-card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-xl);
  padding: 18px 20px 14px; box-shadow: var(--shadow-card); }
.mp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.mp-card-head h3 { margin: 0; font-size: 17px; }
.mp-card-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.mp-card-now { text-align: right; white-space: nowrap; }
.mp-card-now b { display: block; font-size: 24px; letter-spacing: -0.02em; }
.mp-card-now span { color: var(--muted); font-size: 12.5px; }
.mp-chart { display: block; width: 100%; height: auto; margin-top: 10px; }
.mp-chip { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; }
.mp-chip-up { background: #e7f6ee; color: #0a6b37; }
.mp-chip-down { background: #fdeceb; color: #a3211a; }
.mp-chip-flat { background: #eef1f5; color: #586579; }
.mp-action { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.mp-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px;
  font-weight: 800; white-space: nowrap; }
.mp-pill-confirmed { background: #e7f6ee; color: #0a6b37; border: 1px solid #bfe6d1; }
.mp-pill-calendar { background: #e9f1fc; color: #0d539f; border: 1px solid #c8ddf7; }
.mp-pill-price { background: #fff3dc; color: #7b4600; border: 1px solid #f3ca7c; }
.mp-pill-mixed { background: #f3eefb; color: #5b3b8c; border: 1px solid #ddd0f0; }
/* Таблица особых дат — не таблица чисел, а таблица фраз: «−3 пп · 21 % при
   обычных 24 %», «Немного понизить цену относительно базовой».  Общие правила
   `table.mp` прижимают всё к правому краю (там это верно — там колонки цифр), и
   рекомендация вставала рваным левым краем впритык к рамке: последнее слово
   упиралось в границу, а таблетка вердикта заезжала на неё.  Здесь порядок
   обратный: читаем слева, колонке рекомендации даётся своя ширина и воздух. */
.mp-demand table.mp th, .mp-demand table.mp td { text-align: left; vertical-align: top; }
.mp-demand table.mp td { padding: 12px 14px; }
.mp-demand table.mp th { padding: 9px 14px; }
.mp-demand table.mp th.mp-recommend, .mp-demand table.mp td.mp-recommend {
  white-space: normal; width: 38%; padding-left: 22px;
  border-left: 1px solid var(--hair); }
.mp-demand .mp-action { line-height: 1.35; margin-bottom: 7px; }
.mp-demand .mp-pill { margin-bottom: 6px; }
.mp-demand .mp-recommend .mp-dim { line-height: 1.35; }
/* Вопросы отчёта во вступлении: нумерованные, с жирным вопросом и пояснением. */
.mp-goals { margin: 10px 0 0; padding-left: 22px; max-width: 82ch; }
.mp-goals li { margin: 10px 0; color: var(--ink2); }
.mp-goals b { color: var(--ink); }
.mp-facts-lead { margin-top: 14px; }
.mp-offsets { list-style: none; padding: 0; margin: 8px 0 0; display: flex;
  flex-wrap: wrap; gap: 8px 10px; }
.mp-offsets li { background: var(--card); border: 1px solid var(--hair);
  border-radius: 999px; padding: 5px 12px; font-size: 14px; }
.mp-groups { list-style: none; padding: 0; margin: 10px 0 0; }
.mp-groups li { padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.mp-groups li:last-child { border-bottom: 0; }
.mp-groups b { font-weight: 800; }
.mp-cta { margin: 54px 0 0; background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-xl); padding: 26px 28px 28px; box-shadow: var(--shadow-card); }
.mp-cta figure { margin: 18px 0 0; }
.mp-cta img { width: 100%; height: auto; display: block;
  border: 1px solid var(--hair); border-radius: 12px; }
.mp-cta figcaption { color: var(--muted); font-size: 13px; margin-top: 8px; }
.mp-btn { display: inline-block; margin-top: 16px; background: var(--accent); color: #fff;
  padding: 12px 22px; border-radius: 12px; font-weight: 700; }
.mp-btn:hover { text-decoration: none; opacity: 0.92; }
.mp-method { color: var(--ink2); font-size: 14.5px; padding-left: 20px; }
.mp-method li { margin: 7px 0; }
/* Готовая строка ссылки: её копируют целиком, поэтому она выделена как цитата,
   а не растворена в тексте. Моноширинный кегль здесь не нужен — это фраза для
   человека, а не код. */
.mp-cite { margin: 14px 0 0; padding: 14px 18px; max-width: 82ch;
  background: var(--card); border: 1px solid var(--hair);
  border-left: 4px solid var(--accent); border-radius: 0 14px 14px 0;
  font-size: 15px; line-height: 1.5; }
.mp-cite-files { list-style: none; padding: 0; margin: 10px 0 0; max-width: 82ch;
  font-size: 14.5px; }
.mp-cite-files li { padding: 6px 0; border-bottom: 1px solid var(--hair);
  color: var(--ink2); }
.mp-cite-files li:last-child { border-bottom: 0; }
.mp-cite-files a { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Словарь колонок: нужен тому, кто файл открыл, и не должен занимать экран у
   того, кто просто читает отчёт. Нативный <details>, без JavaScript. */
.mp-cols { margin-top: 4px; }
.mp-cols > summary { cursor: pointer; color: var(--muted); font-size: 13px;
  list-style-position: outside; width: fit-content; }
.mp-cols > summary:hover { color: var(--accent); }
.mp-cols dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px;
  margin: 8px 0 12px; font-size: 13px; color: var(--ink2); }
.mp-cols dt { font-weight: 700; color: var(--ink); font-family: ui-monospace,
  SFMono-Regular, Menlo, Consolas, monospace; }
.mp-cols dd { margin: 0; }
.mp-cols dd i { color: var(--muted); font-style: normal; }
@media (max-width: 600px) {
  .mp-cols dl { grid-template-columns: 1fr; gap: 0; }
  .mp-cols dd { margin: 0 0 8px; }
}
.mp-cities { list-style: none; padding: 0; margin: 22px 0 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
/* Плитка тянется на всю высоту ряда, а «охват» прижат к её низу: у `<a>` без
   этого была своя высота по содержимому, и в ряду из четырёх городов нижние
   рамки стояли на четырёх разных уровнях. */
.mp-cities li { display: flex; }
.mp-cities a { display: flex; flex-direction: column; flex: 1;
  background: var(--card); border: 1px solid var(--hair);
  border-radius: 14px; padding: 14px 16px; color: var(--ink); }
.mp-cities a:hover { text-decoration: none; border-color: var(--accent); }
.mp-cities-when { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* Карточка города — три одинаковые строки на всех городах.  Одинаковые,
   потому что читатель ищет свой город, а не сравнивает города между собой:
   разный набор строк превратил бы каталог в рейтинг.

   Колонки: подпись — значение — движение.  Именно три, а не две: значение и
   стрелку в одной ячейке верстальщик переносил по месту, и высота строки
   зависела от того, насколько длинное число у города. */
.mp-cities dl { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px;
  margin: 10px 0 0; font-size: 13.5px; font-variant-numeric: tabular-nums;
  align-items: baseline; }
.mp-cities dt { color: var(--ink2); white-space: nowrap; }
.mp-cities dd { margin: 0; text-align: right; font-weight: 700; white-space: nowrap; }
.mp-cities dd.mp-cities-move { font-size: 12.5px; min-width: 7ch; }
.mp-cover { display: block; color: var(--muted); font-size: 12.5px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hair); }
.mp-abc { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 4px; }
.mp-abc a { display: inline-block; min-width: 32px; text-align: center; padding: 5px 8px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 10px;
  font-weight: 700; font-size: 14px; color: var(--ink2); }
.mp-abc a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.mp-letter { font-size: 15px; color: var(--muted); margin: 26px 0 0;
  letter-spacing: .08em; text-transform: uppercase; scroll-margin-top: 16px; }
.mp-crumbs { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }
.mp-crumbs a { color: var(--ink2); }
.mp-more { list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px; }
.mp-more a { display: inline-block; background: var(--card); border: 1px solid var(--hair);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; color: var(--ink2); }
.mp-more a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* Ширина колонки задаёт ширину ячейки дня, а в ячейке стоит цена («3,5к», в
   дорогом городе «12,5к») и переносить её негде.  Минимум 250 px пускал в ряд
   четыре месяца, ячейка выходила 27 px при 33 px текста — цены наезжали друг на
   друга и на край карточки.  Минимум 420 px = два месяца в ряд на десктопе,
   один на телефоне; min(…, 100%), а не жёсткое значение: при экране 320 px и
   полях по 28 px жёсткий минимум делал колонку шире экрана. */
.mp-cal-months { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 16px; margin-top: 14px; align-items: start; }
.mp-cal-month { background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-xl); padding: 14px 16px 16px;
  /* container + cqw ниже: кегль цены считается от ширины карточки, поэтому
     ячейка не переполняется ни на планшете, ни на узком телефоне. */
  container-type: inline-size; max-width: 560px; }
.mp-cal-title { font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.mp-cal-head, .mp-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.mp-cal-head { margin-bottom: 6px; }
.mp-cal-wd { font-size: 12px; color: var(--muted); text-align: center; font-weight: 700; }
.mp-cal-cell { border: 1px solid var(--hair); border-radius: 10px; padding: 7px 4px 8px;
  text-align: center; font-variant-numeric: tabular-nums; }
.mp-cal-empty { border: 0; background: none; }
.mp-cal-day { font-size: 11.5px; font-weight: 700; opacity: 0.6; line-height: 1.1; }
.mp-cal-price { font-size: 16px; font-size: clamp(11px, 4.5cqw, 16px);
  font-weight: 800; line-height: 1.3; white-space: nowrap; }
/* Первая неделя измерена, но не размечена — и выглядеть как «как обычно» она
   не должна: цену на завтра ставят именно по этим ячейкам. */
.mp-cal-raw { border-style: dashed; }
/* A date that made the signal table is outlined here, so the two blocks are
   visibly the same dates rather than two separate claims. */
.mp-cal-flag { outline: 2px solid #f5a11a; outline-offset: -2px; }
.mp-cal-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  color: var(--ink2); font-size: 13.5px; margin-top: 12px; }
.mp-cal-key { display: inline-flex; align-items: center; gap: 6px; }
.mp-cal-key i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--hair); display: inline-block; }
.mp-bars { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 16px; }
.mp-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 210px;
  justify-content: flex-end; }
.mp-bar-val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-bar-fill { width: 100%; max-width: 62px; background: var(--accent); border-radius: 8px 8px 0 0; opacity: 0.85; }
.mp-bar-we .mp-bar-fill { background: #0a7d3c; }
.mp-bar-lab { font-size: 13px; color: var(--ink2); }
.mp-bar-price { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.mp-cities b { display: block; font-size: 17px; }
@media (max-width: 900px) {
  .mp-cards, .mp-split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  table.mp th.mp-name, table.mp td.mp-name { min-width: 140px; }
  .mp-kpi > div { flex: 1 1 140px; }
}
@media (max-width: 600px) {
  .mp-cal-cell { padding: 4px 2px 5px; }
  .mp-cal-occ { font-size: 14px; }
  .mp-bars { padding: 10px 6px; gap: 4px; }
  .mp-bar { height: 170px; }
  .mp-bar-price { display: none; }
  /* Таблица особых дат на телефоне разворачивается в карточки: рекомендация —
     то, ради чего страница существует, — была четвёртой колонкой и уезжала за
     край. Порядок в карточке: дата, рекомендация, потом числа.

     Селекторы обязаны нести `table.mp`: правила ширины и переноса заданы выше
     как `table.mp td` и `table.mp td.mp-name`, и без него карточные правила
     проигрывают по специфичности. Так и было до 01.09.2026: `white-space:
     nowrap` оставался в силе, строка «обычно 4 347 ₽» не переносилась и тянула
     документ до 531 px при экране 390 — горизонтальная прокрутка всей
     страницы на всех 12 городах (аудит по рекомендациям Яндекса). */
  .mp-demand { overflow: visible; max-height: none; border: 0; background: none; }
  .mp-demand table.mp { display: block; }
  .mp-demand table.mp thead { display: none; }
  .mp-demand table.mp tbody { display: block; }
  /* flex, а не block: порядок ячеек в карточке задан через `order`, и у
     блочной строки он молча не работал — рекомендация уезжала под числа. */
  .mp-demand table.mp tr { display: flex; flex-direction: column;
    border: 1px solid var(--hair); border-radius: var(--r-lg);
    background: var(--card); padding: 10px 12px; margin-bottom: 10px; }
  .mp-demand table.mp td { display: flex; flex-wrap: wrap; gap: 2px 10px;
    justify-content: space-between; align-items: baseline; position: static;
    white-space: normal; text-align: right; border: 0; padding: 4px 0;
    min-width: 0; background: none; overflow-wrap: anywhere; }
  .mp-demand table.mp td::before { content: attr(data-label); color: var(--muted);
    font-size: 13px; text-align: left; flex: 0 0 auto; }
  .mp-demand table.mp td.mp-name { order: -2; font-size: 16px; font-weight: 800;
    justify-content: flex-start; min-width: 0; }
  /* Ширину, левое поле и разделитель колонки рекомендации (десктоп) на телефоне
     снимаем: колонок здесь нет, строка развёрнута в карточку. */
  .mp-demand table.mp td.mp-recommend { order: -1; display: block; text-align: left;
    width: auto; padding: 0 0 8px; border-left: 0;
    border-bottom: 1px solid var(--hair); margin-bottom: 4px; }
  .mp-demand table.mp td.mp-recommend::before { display: none; }
}