/* Мобильная вёрстка Lex Digitales. Правка 27.08.2026.

   Файл подключается последним и переопределяет site.css, article.css
   и reader.css, не трогая их. Всё, кроме одного правила ниже, лежит
   внутри @media — на широком экране файл ничего не меняет.

   Что чинится: шапка (две плотные строки вместо трёх рыхлых), пустые
   цветные заглушки вместо картинок (на телефоне они съедали пол-экрана),
   стена фильтров перед выдачей «Документов», подписи помесячного графика,
   рассыпавшиеся в столбик из цифр, и мелкие поля ввода, из-за которых
   iOS зумит страницу при фокусе. */

.filters-toggle { display: none; }

/* ==================== до 900px ==================== */
@media (max-width: 900px) {

  /* Поле мельче 16px — и iOS зумит страницу, когда в него ставят курсор. */
  input[type=text], input[type=search], input[type=date], input[type=password],
  select, textarea, .search-row input, .pulse-bar .tab-search input,
  .rd-find input, .rd-toc-find input { font-size: 16px; }

  /* ---------- шапка ---------- */
  .site-header .wrap { min-height: 0; gap: 0 12px; padding-top: 10px;
                       flex-wrap: wrap; align-items: center; }
  .brand { gap: 11px; }
  .brand .mark { width: 44px; height: 31px; }
  .brand .name { font-size: 20px; line-height: 1.05; }
  .brand .name small { font-size: 11px; line-height: 1.3; margin-top: 3px; }

  .site-nav { width: 100%; margin: 9px 0 0; padding: 0; gap: 20px;
              overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
              border-top: 1px solid var(--border); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { font-size: 15px; padding: 11px 0; white-space: nowrap; }
  .site-nav a.on::after { bottom: 6px; }
  .site-nav .lang { margin-left: auto; align-self: center; flex: none; }
  .site-nav .lang a { padding: 6px 10px; }

  /* ---------- общий ритм ---------- */
  .section { padding: 44px 0; }
  .pulse-layout { gap: 18px; padding-bottom: 48px; }
  .grid-2 { gap: 14px; }
  .mt { margin-top: 14px; }
  .panel { padding: 18px 16px; }
  .panel h2 { font-size: 18px; }

  /* ---------- Пульс: вкладки ---------- */
  .pulse-bar .wrap { gap: 0 20px; }
  .pulse-bar .tabs a { padding: 14px 0; }
  .pulse-bar .tab-search { width: 100%; margin: 0 0 12px; padding: 0; }

  /* ---------- Пульс: обзор ---------- */
  .stat-hero { padding: 18px; gap: 16px; }
  .stat-hero-main { gap: 16px; }
  .stat-hero .n { font-size: 42px; }
  .stat-hero .t { font-size: 17px; }
  .stat-hero-flags { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr);
                     gap: 6px; margin-left: 0; }
  .stat-hero-flags a { min-width: 0; padding: 8px 10px; }
  .stat-hero-flags b { font-size: 17px; }

  /* Полоски: название целиком над шкалой. В узкой колонке на 148px
     оно обрезалось многоточием на третьем слове. */
  .bars .bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px;
                   padding: 9px 0; border-bottom: 1px solid var(--border); }
  .bars .bar-row:last-child { border-bottom: 0; }
  .bars .name { grid-column: 1; grid-row: 1; white-space: normal;
                overflow: visible; text-overflow: clip; font-size: 14.5px; }
  .bars .val { grid-column: 2; grid-row: 1; font-size: 14px; }
  .bar-track { grid-column: 1 / -1; grid-row: 2; height: 8px; }

  /* Помесячный график: подпись через две. На 390px столбику достаётся
     11px, и «08» переносилось по цифре в столбик. */
  .month-chart { padding-left: 34px; }
  .month-grid { left: 34px; }
  .month-grid .line span { font-size: 10px; margin-right: 5px; }
  .month-axis { padding-left: 34px; }
  .chart-cols { height: 150px; }
  .chart-axis span { visibility: hidden; white-space: nowrap; overflow: visible;
                     font-size: 10px; }
  .chart-axis span:nth-child(3n+1) { visibility: visible; }

  /* ---------- свежие документы ---------- */
  .fresh-grid { grid-template-columns: 1fr; gap: 0; }
  .fresh { padding: 14px 0; border-top: 1px solid var(--border); }
  .fresh:first-child { padding-top: 2px; border-top: 0; }

  /* ---------- Пульс: документы ---------- */
  /* Панель фильтров разворачивается кнопкой: раскрытая она отодвигала
     первую карточку на два экрана вниз. */
  .filters-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    margin: 0 0 14px; padding: 13px 16px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: var(--radius); color: var(--ink);
    font: 500 15px/1 Rubik, sans-serif; text-align: left;
  }
  .filters-toggle .n { background: var(--accent-strong); color: #fff;
                       border-radius: 100px; font-size: 12px; padding: 3px 9px; }
  .filters-toggle .car { margin-left: auto; color: var(--muted); font-size: 12px;
                         transition: transform .15s; }
  .filters-toggle.on .car { transform: rotate(180deg); }
  #doc-filters { display: none; margin-bottom: 16px; padding: 16px; }
  #doc-filters.open { display: block; }
  .filters .chk { padding: 9px 0; font-size: 15px; }
  .facet a { padding: 9px 0; font-size: 15px; }
  .facet-scroll { max-height: 280px; }
  .filter-apply { padding: 13px 10px; font-size: 15px; }

  .doc { padding: 16px 16px 18px; }
  .doc h3 { font-size: 18px; }
  .doc .summary { font-size: 15px; }
  .res-count { font-size: 13.5px; }

  /* ---------- подвал ---------- */
  .site-footer { margin-top: 28px; padding: 36px 0 24px; }
  .foot-grid { gap: 26px; }
  .foot-logo { width: 56px; }
  .foot-bottom { margin-top: 26px; }

  /* ---------- читалка ---------- */
  .rd-toc { max-height: 280px; }
  .rd-bar { padding: 0 8px; }
  .rd-tools { gap: 6px; padding: 6px 0 8px; }
  .rd-find { height: 36px; }
  .rd-btn { height: 34px; }
}

/* ==================== до 640px ==================== */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }

  .section { padding: 36px 0; }
  .section-title { font-size: 29px; }
  .section-sub { font-size: 16px; margin-bottom: 26px; }
  .pulse-head { padding: 28px 0 18px; }
  .pulse-head h1 { font-size: 29px; }
  .pulse-head p { font-size: 16px; }

  /* «Пульс регулирования» первым экраном: текст, под ним график */
  .hero-pulse { padding: 24px 0 22px; }
  .hero-grid { gap: 18px; }
  .hero-text .section-title { font-size: 29px; }
  .hero-text .section-sub { margin-bottom: 12px; }
  .pulse-card { padding: 12px 14px 10px; }
  .pulse-periods { gap: 5px; margin-bottom: 10px; }
  .pulse-periods button { font-size: 12px; padding: 6px 10px; }
  .pulse-chart { height: 150px; }
  .pulse-keys { gap: 4px 12px; font-size: 12.5px; }

  /* Материалы выпуска: герой, под ним лента */
  .issue-line { font-size: 14px; margin-bottom: 18px; }
  .stories { gap: 22px; }
  .story-text h3 { font-size: 25px; }
  .story-text .lead { font-size: 15.5px; }
  .rail-item { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 11px 0; }
  .rail-media img, .rail-media .stub { width: 70px; height: 50px; }
  .rail-text b { font-size: 14.5px; }

  /* Fun новости */
  .fun-band { padding: 22px 0 30px; }
  .fun-band .section-title { margin-bottom: 14px; }
  .fun-text h3 { font-size: 19px; }
  .fun-text .lead { font-size: 14.5px; }

  /* Аналитика. Цветная заглушка вместо обложки на телефоне занимает
     пол-экрана и ничего не сообщает — показываем только настоящие картинки. */
  .art-row .art-media:has(> .stub) { display: none; }
  .story-media:has(> .stub) { display: none; }
  .art-media > .stub { display: none; }
  .card > .thumb-stub { display: none; }
  .art-row { gap: 18px; padding: 24px 0; }
  .art-body h2 { font-size: 26px; margin: 12px 0 10px; }
  .art-body .lead { font-size: 16.5px; margin-bottom: 18px; }
  .art-body .meta { font-size: 13px; margin-top: 14px; }
  .cards { gap: 16px; }
  .card .in { padding: 16px 18px 20px; }
  .card h3 { font-size: 19px; }
  .btn { padding: 13px 22px; }

  /* цифры */
  .stat-cards { gap: 12px; margin-top: 22px; }
  .stat-card { padding: 16px 18px; }
  .stat-card .name { font-size: 16px; }
  .stat-card .num { font-size: 26px; }
  .stat-card p { font-size: 14px; }
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px 15px; }
  .kpi .n { font-size: 25px; }
  .kpi .l { font-size: 13px; }

  .chart-box { padding: 14px 8px 10px; }
  .chart { height: 300px; }

  .stat-hero .n { font-size: 38px; }
  .stat-hero-flags { grid-template-columns: repeat(2, 1fr); }

  .empty { padding: 28px 18px; }
  .pager a, .pager .now, .pager .gap { min-height: 40px; }

  .rd-head h1 { font-size: 19px; }
  .rd-toc { max-height: 240px; }
}

@media (max-width: 380px) {
  .site-nav { gap: 14px; }
  .brand .name { font-size: 18px; }
  .brand .mark { width: 40px; height: 28px; }
}


/* Подписи оси набраны в nowrap: из-за min-width:auto флекс-строка
   переставала сжиматься и страница ехала вбок. */
@media (max-width: 900px) {
  .chart-axis span { min-width: 0; }
}