/* Читательские карточки: место, элемент имени, история.

   Подключается ПОСЛЕ atlas.css и не переопределяет ни одного его токена:
   цвета, шрифты, скругления, тени, чипы, карточки, таблицы, полоски и
   тёмная тема берутся оттуда как есть. Здесь только устройство страницы:
   карта сверху, шапка, переключаемые разделы, свёрнутое служебное.

   Постраничные правила трёх шаблонов (place.html, formant.html, story.html)
   переехали сюда без изменения значений: разметка у них общая, и три копии
   одних и тех же правил разъезжались бы. */

/* --- общее ------------------------------------------------------------- */

.rc-doc { width: min(1180px, calc(100% - 88px)); margin: 0 auto; padding: 22px 0 56px; }

/* Выделение текста и каретка: браузерные значения не принадлежат ни одной
   теме витрины, а карточку читают с копированием цитат. */
::selection { background: var(--accent-soft); color: var(--ink); }
:root[data-theme="dark"] ::selection { background: var(--accent-line); color: var(--ink); }
.rc-doc { caret-color: var(--accent); }

.rc-crumb { font-size: 13px; color: var(--faint); margin-bottom: 14px; line-height: 1.5; }
.rc-crumb a { color: var(--muted); }
.rc-crumb a:hover { color: var(--accent); }

/* --- верх страницы: карта и паспорт ------------------------------------- */

/* Шапка страницы элемента имени: карта и паспорт рядом, список имён ниже
   во всю ширину. У карточек места и истории раскладка другая — ниже. */
.rc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 22px;
}

/* --- две колонки карточки места и истории --------------------------------
   Решение владельца 18.09: правая колонка самостоятельна и идёт на всю
   высоту верхней части, левая идёт непрерывно. У места слева карта, под ней
   сразу вкладки и текст раздела; у истории слева текст, а карта и снимки
   уходят вправо и остаются на виду при прокрутке. */

@media (min-width: 721px) {
  .rc-app--place, .rc-app--story {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .rc-app--place > .rc-crumb, .rc-app--story > .rc-crumb,
  .rc-app--place > .rc-svc, .rc-app--story > .rc-svc { grid-column: 1 / -1; }

  .rc-app--place > .rc-media, .rc-app--place > .rc-map { grid-column: 1; grid-row: 2; }
  .rc-app--place > .rc-id { grid-column: 2; grid-row: 2 / span 2; }
  .rc-app--place > .rc-body { grid-column: 1; grid-row: 3; }

  .rc-app--story > .rc-id { grid-column: 1; grid-row: 2; }
  .rc-app--story > .rc-aside { grid-column: 2; grid-row: 2 / span 2;
                               position: sticky; top: 84px; }
  .rc-app--story > .rc-body { grid-column: 1; grid-row: 3; }
}

/* Между картой и вкладками — обычный отступ раздела, а не «дно шапки». */
.rc-app--place > .rc-media, .rc-app--place > .rc-map,
.rc-app--story > .rc-aside { margin-bottom: 22px; }
.rc-app--story > .rc-id { margin-bottom: 18px; }

/* Высота медиа-места задаётся картой и не меняется от слайда к слайду:
   иначе при автопереключении всё, что ниже, прыгало бы. */
.rc-media { --rc-media-h: 340px; }
.rc-map { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
          background: var(--surface); position: relative; }
/* Карточка карты и плашка фотографии обязаны быть одной высоты до пикселя:
   у карточки рамка снаружи холста, у плашки — внутри своей высоты. */
.rc-map__canvas { height: calc(var(--rc-media-h, 340px) - 2px); background: var(--map-bg); }
.rc-map__canvas--tall { height: 380px; }
.rc-map__canvas--none { display: flex; align-items: center; justify-content: center;
                        padding: 20px; text-align: center;
                        color: var(--faint); font-size: 13.5px; }

/* Под картой по умолчанию ничего не развёрнуто: координаты, точность
   и происхождение геометрии живут в одной строке-переключателе. */
.rc-media__foot { border: 1px solid var(--line); border-top: 0;
                  border-radius: 0 0 var(--radius) var(--radius);
                  background: var(--surface); margin-top: -1px; overflow: hidden; }
.rc-map__more > summary { list-style: none; cursor: pointer; padding: 10px 16px;
                          min-height: 40px; box-sizing: border-box;
                          font-size: 12.5px; color: var(--muted); display: flex;
                          align-items: center; justify-content: space-between; gap: 10px; }
.rc-map__more > summary::-webkit-details-marker { display: none; }
.rc-map__more > summary::after { content: "＋"; color: var(--faint); font-size: 13px; }
.rc-map__more[open] > summary::after { content: "−"; }
.rc-map__more > summary:hover { color: var(--ink); }
.rc-map__more__in { padding: 0 16px 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.rc-map__more__in p { margin: 0 0 7px; }
.rc-map__more__in p:last-child { margin-bottom: 0; }
/* Подпись фотографии занимает то же место и ту же высоту, что строка карты:
   одна строка с многоточием, ничего ниже не сдвигается. */
.rc-media__cap { margin: 0; padding: 10px 16px; min-height: 40px; box-sizing: border-box;
                 font-size: 12.5px; line-height: 20px; color: var(--muted);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-media__cap[hidden] { display: none; }
.rc-media__foot[hidden] { display: none; }
/* Подпись снимка в столбце фотографий стоит при самом снимке. */
.rc-photos .rc-photo__cap { margin-top: 8px; }

/* --- медиа: карта и фотографии ------------------------------------------
   Слот медиа появляется только там, где у записи есть фотографии. Нет их —
   в шапке стоит карточка карты, как и раньше, без обёрток и заглушек. */

.rc-media { min-width: 0; }
.rc-slide { min-width: 0; }
.rc-slide[hidden] { display: none; }
.rc-slide--photo { margin: 0; }

/* Контейнер кадра повторяет высоту карты, кадр в него вписывается обрезкой
   от точки фокуса (media.focus_x/focus_y): вертикальный снимок, вписанный
   целиком, даёт в контейнере 200 px картинку шириной около 113 px, и надпись
   на дорожном знаке в ней не читается. Кадр целиком всегда доступен
   в полноэкранном просмотре, поэтому обрезка в ленте ничего не отнимает. */
.rc-photo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--rc-media-h, 340px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2); color: var(--faint); overflow: hidden;
}
.rc-photo__img { display: block; width: 100%; height: 100%; }
.rc-photo--cover .rc-photo__img { object-fit: cover; object-position: center; }
.rc-photo__cap { margin: 9px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* В карусели подпись с правами стоит в полосе управления — под самим
   слайдом она была бы вторым экземпляром той же строки. Без скрипта
   (data-photo не выставлен) подпись остаётся при своём кадре. */
.rc-app[data-photo="carousel"] .rc-media .rc-photo__cap { display: none; }

.rc-photo-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.rc-photo-btn:hover .rc-photo { border-color: var(--accent-line); }

/* Управление лежит поверх кадра: отдельный этаж кнопок под контейнером
   забирал у телефона полсотни пикселей до имени места. Точки — по центру
   нижнего края (атрибуция подложки стоит справа и остаётся видна),
   счётчик — чипом в левом верхнем углу, стрелки — по бокам и только
   на кадрах. Точки как на лендинге: кружок 6 px, у текущего слайда
   вытягивается до 16. */
.rc-slides { position: relative; }
.rc-media__bar { position: absolute; inset: 0; pointer-events: none; }
.rc-media__bar[hidden] { display: none; }
.rc-media__bar > * { pointer-events: auto; }
.rc-media__ctl { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
                 display: flex; align-items: center; gap: 2px; padding: 0 4px;
                 border-radius: 999px;
                 background: color-mix(in srgb, var(--surface) 84%, transparent);
                 backdrop-filter: blur(2px); }
.rc-media__nav { display: flex; align-items: center; gap: 0; }
.rc-dot { display: grid; place-items: center; width: 22px; height: 40px; padding: 0;
          border: 0; background: none; cursor: pointer; border-radius: 50%; flex: none; }
.rc-dot::before { content: ""; width: 6px; height: 6px; border-radius: 6px;
                  background: color-mix(in srgb, var(--accent) 38%, transparent);
                  transition: width 200ms ease, background 200ms ease; }
.rc-dot.is-on::before { width: 16px; background: var(--accent); }
.rc-dot:hover::before { background: var(--accent); }
.rc-arrow { display: grid; place-items: center; width: 32px; height: 32px; flex: none;
            border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
            color: var(--muted); cursor: pointer; }
.rc-arrow:hover { border-color: var(--accent); color: var(--accent); }
/* Стрелки поверх кадра: область нажатия 40 px, вид спокойный. */
.rc-arrow--side { position: absolute; top: 50%; transform: translateY(-50%);
                  width: 40px; height: 40px; border-color: transparent;
                  background: color-mix(in srgb, var(--surface) 84%, transparent);
                  backdrop-filter: blur(2px); }
.rc-arrow--prev { left: 8px; }
.rc-arrow--next { right: 8px; }
.rc-arrow--side[hidden] { display: none; }
/* Кнопка паузы отбита линией от точек — как на лендинге: это не ещё один
   шаг карусели, а выключатель автопоказа. */
.rc-pause { position: relative; display: grid; place-items: center;
            width: 34px; height: 40px; padding: 0; margin-left: 4px;
            border: 0; background: none; color: var(--muted-2); cursor: pointer; }
.rc-pause:hover { color: var(--accent); }
.rc-pause::before { content: ""; position: absolute; left: -3px; top: 12px; bottom: 12px;
                    width: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.rc-pause[hidden] { display: none; }
/* Счётчик — маленьким чипом в углу кадра. */
.rc-media__n { position: absolute; top: 9px; left: 9px; padding: 3px 9px;
               border-radius: 999px; font-size: 11.5px; color: var(--muted-2);
               font-variant-numeric: tabular-nums;
               background: color-mix(in srgb, var(--surface) 84%, transparent);
               backdrop-filter: blur(2px); }
@media (prefers-reduced-motion: reduce) { .rc-dot::before { transition: none; } }

/* Вариант «фото отдельно»: карта на месте, снимки — в правой колонке
   под паспортом и «Коротко». Главный снимок и полоса миниатюр. */
/* Главный снимок слева, миниатюры узким столбцом справа: строкой под
   снимком они добавляли бы колонке ещё сотню пикселей, и карта рядом
   оставалась бы с дырой под подписью. */
.rc-photos { display: grid; grid-template-columns: minmax(0, 1fr) auto;
             gap: 10px; align-items: start; margin-top: 18px; }
.rc-photos[hidden] { display: none; }
.rc-photos > .rc-slide--photo { display: block; grid-column: 1; }
/* Главный снимок колонки — тоже контейнер постоянной пропорции 3:2:
   вертикальный кадр вписывается в него целиком, а не тянет колонку вниз. */
.rc-photos > .rc-slide--photo .rc-photo { max-width: 360px; height: auto; aspect-ratio: 3 / 2; }
.rc-photos__strip { grid-column: 2; flex-direction: column; flex-wrap: nowrap;
                    align-content: start; }
.rc-photos__strip .rc-slide--photo { flex: 0 0 auto; width: 86px; }

/* Карту в этом варианте не растягиваем: под ней сразу идут вкладки, а не
   пустота, — за высоту правой колонки левая больше не отвечает. */
.rc-photos__strip { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-photos__strip .rc-slide--photo { flex: 0 1 110px; }
.rc-photos__strip .rc-photo { border-radius: var(--radius-sm); height: auto; aspect-ratio: 1 / 1; }
.rc-photos__strip .rc-photo__cap { display: none; }

/* Просмотр во весь экран. Esc закрывает, фокус возвращает браузер.
   Фон под диалогом не прокручивается: класс ставит reader.js, правило с :has —
   запасное, на случай, если класс не доехал. Компенсация ширины скроллбара
   идёт из того же места: без неё страница дёргается вбок в момент открытия. */
html.rc-locked, html:has(dialog.rc-lb[open]) {
  overflow: hidden;
  padding-right: var(--rc-scrollbar, 0px);
}

.rc-lb { width: min(900px, calc(100% - 32px)); max-height: calc(100vh - 48px);
         padding: 20px; border: 1px solid var(--line); border-radius: var(--radius);
         background: var(--surface); color: var(--ink); overflow: auto; }
.rc-lb::backdrop { background: color-mix(in srgb, var(--ink) 62%, transparent); }
.rc-lb__x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center;
            width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 999px;
            background: var(--surface); color: var(--muted); cursor: pointer; }
.rc-lb__x:hover { border-color: var(--accent); color: var(--accent); }
/* В просмотре кадр показан целиком: ни обрезки, ни полей от контейнера. */
.rc-lb__stage { display: flex; justify-content: center; }
.rc-lb__stage .rc-photo--full { width: auto; height: auto; max-width: 100%;
                                max-height: calc(100vh - 220px); background: var(--surface-2); }
/* В просмотре кадр целиком: ни обрезки контейнером, ни полей. */
.rc-lb__stage .rc-photo__img { width: auto; height: auto;
                               max-width: 100%; max-height: calc(100vh - 220px);
                               object-fit: contain; }
.rc-lb__cap { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.rc-lb__nav { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rc-lb__nav[hidden] { display: none; }

.rc-id { min-width: 0; }
.rc-id h1 { font-size: 44px; line-height: 1.04; margin-bottom: 12px; overflow-wrap: anywhere; }
.rc-chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }

/* Паспортные строки: то, что читатель спрашивает первым и что помещается
   в одну строку. Разделитель — линия, а не точка: строк может быть четыре. */
.rc-facts { display: grid; grid-template-columns: auto 1fr; gap: 0 16px;
            margin: 0 0 16px; font-size: 13.5px; }
.rc-facts dt { color: var(--faint); padding: 5px 0; border-top: 1px solid var(--line-2); }
.rc-facts dd { margin: 0; color: var(--ink-2); padding: 5px 0; border-top: 1px solid var(--line-2);
               min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rc-facts dt:first-of-type, .rc-facts dd:first-of-type { border-top: none; }
/* Пары «подпись — число» на широком экране лежат в общей сетке паспорта:
   обёртка пары нужна только телефону, где пара становится плиткой. */
.rc-facts--nums > div { display: contents; }
.rc-nums__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }

/* «Коротко» — ведущее толкование имени. Единственная акцентная рамка
   на странице: на неё приходится вся смелость карточки. */
.rc-lead { border: 1.5px solid var(--accent); background: var(--surface);
           border-radius: 18px; padding: 18px 22px; }
.rc-lead p { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.45; color: var(--ink); }
.rc-lead__src { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* Подводка истории: та же роль, что у «Коротко», но без акцентной рамки —
   рубрика уже окрашена, двух цветных рамок в шапке быть не должно. */
.rc-storylead { margin: 0 0 14px; font-family: var(--font-serif); font-size: 17px;
                line-height: 1.55; color: var(--muted-2); }
.rc-smeta { font-size: 13.5px; color: var(--faint); }

/* Вертикальная стопка карточек раздела. */
.rc-stack { display: grid; gap: 12px; }

/* --- приглашение дополнить -----------------------------------------------
   В правой колонке после паспорта, «Коротко» и фотографий: на пустой
   карточке это главное, что там вообще есть. Своего цвета не заводит —
   мягкая плашка на токенах, акцент только у кнопки. */

.rc-invite { margin-top: 20px; padding: 16px 18px;
             border: 1px solid var(--accent-line); border-radius: var(--radius);
             background: var(--accent-soft); }
.rc-invite__h { font-family: var(--font-serif); font-size: 19px; line-height: 1.25;
                margin: 0 0 10px; color: var(--ink); }
.rc-invite--wide .rc-invite__h { font-size: 22px; }
/* Одна ступень текста на весь блок: заголовок и дальше обычный текст. */
.rc-invite__t { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--muted-2); }
.rc-invite__t:last-of-type { margin-bottom: 14px; }
.rc-invite__b { display: inline-block; padding: 9px 18px; border-radius: 999px;
                background: var(--accent); color: var(--surface);
                font-size: 14px; font-weight: 600; }
.rc-invite__b:hover { background: var(--accent-hover); color: var(--surface); }
:root[data-theme="dark"] .rc-invite__b { color: var(--bg); }

/* Пустая карточка: вместо пустых вкладок одна строка о том, что известно. */
.rc-empty { border: 1px solid var(--line); background: var(--surface-2);
            border-radius: var(--radius); padding: 16px 20px; margin-bottom: 22px;
            font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }
.rc-empty b { color: var(--ink); font-weight: 600; }

/* --- переключатель разделов --------------------------------------------- */

/* Переключатель обнимает свои ярлыки: растянутая на 1180 px полоса читается
   как шапка таблицы, а не как выбор из четырёх. */
.rc-tabs {
  display: flex; flex-wrap: wrap; gap: 3px;
  width: fit-content; max-width: 100%;
  padding: 4px; margin-bottom: 18px;
  background: var(--surface-2); border-radius: 14px;
}
.rc-tab {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 8px 15px; border: 0; border-radius: 11px; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 14px; color: var(--muted); white-space: nowrap;
}
.rc-tab:hover { color: var(--ink); }
.rc-tab[aria-selected="true"] {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
/* Число в ярлыке — не украшение: читатель видит объём раздела до нажатия. */
.rc-tab__n { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rc-tab[aria-selected="true"] .rc-tab__n { color: var(--muted); }

.rc-sec { min-width: 0; }
.rc-sec[hidden] { display: none; }
.rc-sec__body > :first-child { margin-top: 0; }
/* Во вкладках заголовок раздела уходит с экрана, но не из разметки:
   иначе за h1 сразу шёл бы h3 из текста описания. */
.rc-sec__hw { position: absolute; width: 1px; height: 1px;
              overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Вкладки — прогрессивное улучшение: data-js ставит reader.js. Без него все
   разделы видны подряд, каждый со своим заголовком, и карточка читается
   целиком — ровно как врезка карты на боевой карточке сегодня.
   Поисковик видит то же, что читатель без скрипта: весь текст лежит в html,
   ничего не подгружается по требованию. */
.rc-app:not([data-js]) .rc-tabs { display: none; }
.rc-app:not([data-js]) .rc-sec { margin-bottom: 26px; }
.rc-app:not([data-js]) .rc-sec__hw { position: static; width: auto; height: auto;
                                     overflow: visible; clip: auto; white-space: normal;
                                     font-size: 11px; letter-spacing: 0.13em;
                                     text-transform: uppercase; color: var(--faint);
                                     font-weight: 600; font-family: var(--font-ui);
                                     margin: 0 0 12px; }
.rc-app:not([data-js]) .rc-sec__n { margin-left: 8px; font-variant-numeric: tabular-nums; }

/* --- служебное ---------------------------------------------------------- */

.rc-svc { margin-top: 28px; }
.rc-svc > summary { gap: 10px; }
.rc-svc > summary .at-cap { flex-shrink: 0; }
.rc-svc__what { margin-right: auto; font-size: 13px; color: var(--faint); }
.rc-svc .at-fold__in { padding-top: 4px; }
.rc-svc__grid { display: grid; grid-template-columns: 190px 1fr; gap: 8px 22px;
                margin: 0; font-size: 13.5px; }
.rc-svc__grid dt { color: var(--faint); }
.rc-svc__grid dd { margin: 0; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.rc-svc__grid dd code { font-family: var(--font-ui); color: var(--ink); }
.rc-svc__h { margin: 22px 0 10px; }
.rc-svc__srcs { display: grid; grid-template-columns: 190px 1fr; gap: 10px 22px;
                margin: 0; font-size: 13.5px; }
.rc-svc__srcs dt { color: var(--ink-2); }
.rc-svc__srcs dd { margin: 0; color: var(--muted); line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.rc-svc__lic { margin-top: 3px; font-size: 12.5px; color: var(--faint); }
.rc-svc__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0;
                 padding-top: 14px; border-top: 1px solid var(--line-2);
                 font-size: 13.5px; color: var(--faint); }

/* --- перенесённое из постраничных стилей шаблонов ------------------------ */
/* Значения не меняются: это те же компоненты, что на витрине сегодня. */

h2.at-h { font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
          color: var(--faint); font-weight: 600; font-family: var(--font-ui);
          margin: 0 0 12px; }
h2.at-h + * { margin-top: 0; }
/* Второй заголовок группы внутри раздела. Селектор с h2.at-h нужен ради
   специфичности: иначе «margin: 0 0 12px» у h2.at-h перебивает отступ, и
   «Другие истории в … районе» прилипают к последней карточке первой группы. */
.rc-sub, h2.at-h.rc-sub { margin: 24px 0 12px; }
/* Мелкая оговорка под блоком раздела: «район у водотока по опорной точке»,
   «ни одна запись не привязана к источнику». */
.rc-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }

/* Пометка о соседней области (бриф § 2.12): запись Ярославской или
   Ивановской области печатается в костромской витрине, и читатель обязан
   понимать, почему она здесь. Во всю ширину — это оговорка о карточке
   целиком, а не о её левом столбце. */
.rc-region { border: 1px solid var(--line); background: var(--surface-2);
             border-radius: var(--radius-sm); padding: 13px 18px; margin-bottom: 18px;
             font-size: 13.5px; line-height: 1.55; color: var(--muted); }
@media (min-width: 721px) {
  .rc-app--place > .rc-region, .rc-app--story > .rc-region { grid-column: 1 / -1; }
}

/* Правило привязки геометрии и список объектов OSM — отдельными строками
   внутри свёрнутой строки под картой. */
.rc-map__rule { display: block; margin-top: 8px; }

/* карточка места */
.at-att { padding: 16px 18px; margin-bottom: 10px; }
.at-att__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.at-att__form { font-family: var(--font-serif); font-size: 21px; }
.at-att__year { font-size: 13.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.at-att__src { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.at-atts { margin-bottom: 12px; }
.at-atts td { line-height: 1.5; overflow-wrap: anywhere; }
.rc-att__form { font-family: var(--font-serif); }

/* «В источниках»: одна карточка на источник. Пять записей об одном
   Белорукове с разными разделами — это по-прежнему один Белоруков. */
.rc-src { padding: 15px 18px; margin-bottom: 10px; }
.rc-src__h { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.rc-src__y { margin-left: 6px; font-weight: 400; font-size: 13px; color: var(--faint);
             font-variant-numeric: tabular-nums; }
.rc-src__form { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 4px 0;
                font-size: 14px; line-height: 1.55; color: var(--muted); }
.rc-src__form > span:first-child { font-family: var(--font-serif); font-size: 17px;
                                   color: var(--ink); }
.rc-src__m { margin-top: 8px; font-size: 12.5px; color: var(--faint); }
/* Роли источника: чем он тут занят — записал имя, объяснил его,
   описал место, дал факт. На бою это четыре разных блока страницы. */
.rc-src__role { display: grid; grid-template-columns: 150px minmax(0, 1fr);
                gap: 2px 14px; padding: 5px 0; font-size: 13.5px;
                line-height: 1.5; color: var(--muted); }
.rc-src__role + .rc-src__role { border-top: 1px solid var(--line-2); }
.rc-src__k { font-size: 12.5px; color: var(--faint); }
.rc-src-reg { margin-bottom: 12px; }
.rc-src-reg .rc-src { margin-bottom: 0; border: 0; padding: 4px 0; background: none; }

.at-parts { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
/* Единственный элемент имени не растягивается во всю ширину: карточка
   шириной 1180 px с одним словом по центру читается как ошибка вёрстки. */
.at-part { flex: 0 1 300px; text-align: center; padding: 15px; }
.at-part__form { font-family: var(--font-serif); font-size: 25px; }
.at-part__meta { font-size: 12.5px; color: var(--faint); margin-top: 4px; }

.at-etym { padding: 16px 18px; margin-bottom: 10px; }
.at-etym__chips { display: flex; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; align-items: center; }
.at-etym__claim { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.at-etym__src { font-size: 12.5px; color: var(--faint); margin-top: 8px; }
.rc-etym__id { font-size: 12px; color: var(--faint); }

.at-rel { display: flex; flex-wrap: wrap; gap: 8px; }
.at-rel__item { padding: 11px 15px; flex: 0 1 260px; }
.at-rel__label { font-size: 12.5px; color: var(--faint); margin-bottom: 2px; }
.at-rel__form { font-family: var(--font-serif); font-size: 18px; }
/* Административная цепочка — не имя места: серифная строка в 18 px
   с четырьмя единицами через точку читается как заголовок. */
.rc-rel__chain { font-size: 16px; }

/* Связи места: вид связи — подпись группы, имена строкой. */
.rc-rels { padding: 6px 20px 16px; }
.rc-rel { padding: 14px 0 0; border-top: 1px solid var(--line-2); }
.rc-rel:first-child { border-top: none; }
/* Подпись вида связи набрана строчными: «впадает в (обратная) · левый · 35»
   капителью — 33 знака прописными, читать их тяжело. */
.rc-rel__k { font-size: 12.5px; color: var(--faint); }
.rc-rel__k b { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.rc-rel p { margin: 5px 0 12px; font-family: var(--font-serif); font-size: 17px;
            line-height: 1.6; color: var(--ink-2); }
.rc-rel p .at-unset { font-size: 15px; }

.at-profile__note { font-size: 12.5px; color: var(--faint); margin: 0 0 14px; }
.at-profile__text { font-family: var(--font-serif); font-size: 17px; line-height: 1.65;
                    color: var(--ink-2); max-width: 68ch; }
.at-profile__text p { margin: 0 0 14px; }
.at-profile__text h3 { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.13em;
                       text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 22px 0 10px; }
.at-chip--version { font-size: 11.5px; padding: 3px 10px; vertical-align: 2px; }
.at-chip--muted { color: var(--faint); border-color: var(--line-2); }
.at-fn { font-size: 11px; line-height: 0; }
.at-fn a { text-decoration: none; }
.at-profile__srcs { margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.at-profile__srcs li { margin-bottom: 5px; }

/* страница элемента имени */
.rc-word { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.rc-word h1 { margin: 0; font-family: var(--font-serif); font-size: 54px; line-height: 1; font-weight: 600; }
.rc-word span { font-size: 15px; color: var(--faint); }
.at-legend-box { position: absolute; left: 14px; bottom: 14px;
                 background: color-mix(in srgb, var(--surface) 94%, transparent);
                 border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; }
.at-legend-box div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 2px 0; }
/* Значок разметки: контур — найдено машиной, заливка — проверено человеком. */
.rc-legend__dot { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; flex: none; }
.rc-legend__dot--machine { border: 2.5px solid currentColor; }
.rc-legend__note { display: block; grid-column: 1 / -1; padding-top: 8px;
                   border-top: 1px solid var(--line-2); color: var(--faint);
                   font-size: 12.5px; line-height: 1.5; }

/* Разрезы: карточка со строками чисел или с полосками. */
.rc-slice { padding: 20px 22px; }
.rc-slice__cap { margin-bottom: 4px; }
.rc-slice__cap--bars { margin-bottom: 12px; }
.rc-slice__note { margin: 0 0 12px; }
.rc-outside { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* «Как размечено»: правило, оговорка о машинной разметке, источник толкования. */
.rc-mark { padding: 16px 20px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.rc-mark--sand { font-size: 13.5px; color: var(--muted-2); }
.rc-mark__rule { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
                 font-size: 12px; color: var(--ink); background: var(--surface-2);
                 padding: 1px 5px; border-radius: 4px; }
.rc-fsrc, .rc-mark + .at-card { padding: 16px 20px; }
.at-nums { padding: 18px 20px; }
.at-nums__big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.at-nums__big b { font-family: var(--font-serif); font-size: 40px; font-weight: 600; line-height: 1; }
.at-nums__row { display: flex; justify-content: space-between; gap: 12px;
                border-bottom: 1px solid var(--line-2); font-size: 14px; line-height: 1.9; }
.at-nums__row:last-child { border-bottom: none; }
.at-nums__row span { color: var(--muted); }
.at-nums__row b { font-variant-numeric: tabular-nums; }
.at-names { padding: 12px 20px 14px; }
.at-names__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 26px; }
/* Строка списка переносится: у имён вне трёх областей пометка длиной
   в предложение, и при flex-shrink: 0 она распирала колонку грида — имя
   рассыпалось по букве на строку (видно на -(V)хр(V)). */
.at-names__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px;
                 padding: 5px 0; font-size: 14px;
                 border-bottom: 1px solid var(--line-2); min-width: 0; }
.at-names__row[hidden] { display: none; }
.at-names__form { font-family: var(--font-serif); font-size: 17px; min-width: 0; overflow-wrap: anywhere; }
.at-names__meta { margin-left: auto; font-size: 12px; color: var(--faint);
                  min-width: 0; text-align: right; }
.at-names__row--nocoord .at-names__form { color: var(--muted); }
/* Фильтр по списку имён — приём концепции 1: список на 79 строк читается
   только с поиском по нему. */
/* Поиск по списку имён липнет вместе с полосой разделов: список на 79 строк
   прокручивают, и поле, уехавшее вверх, приходится искать обратно.
   overflow-anchor: none — тот же приём, что у полосы: правка длины списка
   при вводе иначе двигала бы прокрутку под рукой. */
.rc-filter { position: sticky; top: var(--rc-head, 56px); z-index: 25;
             display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
             margin: 0 0 12px; padding: 8px 0; background: var(--bg);
             overflow-anchor: none; }
.rc-filter input { font-family: var(--font-ui); font-size: 14px; padding: 9px 14px;
                   border: 1px solid var(--line); border-radius: 999px;
                   background: var(--surface); color: var(--ink); min-width: 220px; }
.rc-filter input:focus-visible { border-color: var(--accent); }
.rc-filter output { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-nothing { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.rc-nothing[hidden] { display: none; }
.rc-fapparatus__raw { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }

/* история */
.rc-rubric { display: inline-flex; align-items: center; gap: 9px; font-size: 13px;
             color: var(--faint); margin-bottom: 12px; }
.rc-rubric::before { content: ""; display: inline-block; width: 26px; height: 3px;
                     background: var(--rub, var(--accent)); }
.at-prose { max-width: 68ch; font-size: 17.5px; line-height: 1.68; color: var(--ink-2); }
.at-prose p { margin: 0 0 18px; }
.at-prose h2 { font-size: 26px; line-height: 1.2; margin: 34px 0 14px; color: var(--ink); }
.at-prose strong { color: var(--ink); }
.at-prose a { border-bottom: 1px solid var(--accent-line); }
.at-refs { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.at-refs li { padding: 9px 0; border-bottom: 1px solid var(--line-2); line-height: 1.5; }
.at-refs li:last-child { border-bottom: none; }
.at-refs .at-cap { display: block; margin-bottom: 3px; }
.at-refs__role { color: var(--muted); }
.rc-refcols { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 32px; }
/* Места истории с формами имени под ними: каждая форма подписана собой,
   а не главным именем места. Этикетки «место»/«имя» у строк не нужны —
   иерархия и так видна. */
.rc-place__h { font-family: var(--font-serif); font-size: 17px; }
/* Роль единственной формы, совпавшей с заголовком места: строки под
   заголовком нет, а роль остаётся — она несёт своё содержание. */
.rc-place__r { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.rc-draft { margin-bottom: 14px; }
.rc-forms { list-style: none; margin: 6px 0 0; padding: 0 0 0 14px;
            border-left: 1px solid var(--line); font-size: 13.5px; }
.rc-forms li { padding: 3px 0; border: 0; line-height: 1.45; }
.rc-forms a { font-family: var(--font-serif); font-size: 15.5px; }
.at-next { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }

/* --- узкий экран -------------------------------------------------------- */

@media (max-width: 720px) {
  .rc-doc { width: calc(100% - 32px); padding: 16px 0 44px; }
  .rc-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
  /* Карта открывает страницу и на телефоне: 200 px хватает, чтобы понять
     «где это», и не хватает, чтобы вытеснить имя за край экрана.
     Ту же высоту получает и фотография — контейнер один. */
  .rc-media { --rc-media-h: 200px; }
  .rc-map__canvas { height: 198px; }
  .rc-map__canvas--tall { height: 260px; }
  .rc-photo { height: var(--rc-media-h, 200px); }
  .rc-photos .rc-photo { height: auto; }
  .rc-id h1 { font-size: 31px; }
  .rc-word h1 { font-size: 38px; }
  /* Паспорт на телефоне: подпись слева, значение справа — одной строкой.
     На два этажа значение уходит только когда само длинное («Где это»),
     и уходит внутри своей ячейки, а не отдельной строкой списка. */
  .rc-facts { grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; }
  .rc-facts dd { text-align: right; }

  /* Числа элемента имени — плитками 3 в ряд: строками «подпись сверху,
     число снизу» они занимали четверть экрана ни за что. Разметка та же,
     меняется только раскладка: число встаёт над подписью. */
  .rc-facts--nums {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px;
    border-top: 1px solid var(--line-2);
  }
  .rc-facts--nums > div { display: flex; flex-direction: column-reverse;
                          align-items: center; justify-content: flex-end;
                          min-width: 0; padding: 10px 2px 9px; text-align: center; }
  .rc-facts--nums dt { padding: 3px 0 0; border: 0; min-width: 0;
                       font-size: 12px; line-height: 1.25; }
  .rc-facts--nums dd { padding: 0; border: 0; text-align: center;
                       font-family: var(--font-serif); font-size: 26px; line-height: 1;
                       color: var(--ink); }
  /* Полоса разделов липнет под шапкой сайта: на длинной вкладке («Рядом»
     у Унжи — 161 связь) иначе не вернуться к переключателю, не прокрутив
     страницу обратно. Одна строка с горизонтальной прокруткой: перенос
     на второй этаж съедал бы верх экрана.
     overflow-anchor: none обязателен — липкая шапка плюс правка высоты
     содержимого дают петлю scroll anchoring, и страница начинает дрожать
     сама по себе (грабля проекта, atlas.css про это же говорит у body). */
  .rc-tabs {
    position: sticky; top: var(--rc-head, 56px); z-index: 30;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    overflow-anchor: none;
    width: auto; max-width: none;
    margin: 0 -16px 14px; padding: 5px 16px; border-radius: 0;
    background: var(--bg);
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .rc-tabs::-webkit-scrollbar { display: none; }
  .rc-tabs.is-stuck { border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
  /* Мягкое затухание у того края, за которым ещё есть вкладки. */
  .rc-tabs.is-fade-r { mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); }
  .rc-tabs.is-fade-l { mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent); }
  .rc-tabs.is-fade-l.is-fade-r {
    mask-image: linear-gradient(to right, transparent, #000 30px,
                                #000 calc(100% - 30px), transparent);
  }
  .rc-tab { flex: 0 0 auto; padding: 8px 12px; font-size: 13.5px; }

  /* Поиск прилипает сразу под полосой разделов и заодно с ней: два
     прилипших блока читаются как один, поэтому тень только у нижнего. */
  .rc-filter { top: calc(var(--rc-head, 56px) + var(--rc-tabs-h, 45px));
               margin-left: -16px; margin-right: -16px; padding: 8px 16px; }
  /* Тень — только у нижнего из прилипших блоков. */
  .rc-tabs.has-filter.is-stuck { box-shadow: none; border-bottom: 0; }
  .rc-filter.is-stuck { border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); }
  /* Счётчик в прилипшем состоянии ужимается в ту же строку. */
  .rc-filter input { flex: 1 1 auto; }
  .rc-filter output { flex: 0 0 auto; font-size: 12px; }
  .rc-src__role { grid-template-columns: 1fr; gap: 0; }
  .rc-svc__grid, .rc-svc__srcs { grid-template-columns: 1fr; gap: 2px; }
  .rc-svc__grid dd, .rc-svc__srcs dd { margin-bottom: 10px; }
  .at-prose { font-size: 16.5px; }
  .at-names__grid { grid-template-columns: 1fr; }
  .rc-filter input { min-width: 0; flex: 1 1 160px; }
}

/* --- бумага -------------------------------------------------------------- */
/* На бумаге переключать нечего: все разделы печатаются подряд со своими
   заголовками, свёрнутые строки раскрыты (то же правило, что у .at-fold
   в atlas.css), а управление каруселью и полоса вкладок не печатаются.
   Сами <details> раскрывает reader.js по beforeprint: их содержимое браузер
   прячет не только стилем. */
@media print {
  .rc-tabs, .rc-filter, .rc-media__bar, .rc-lb { display: none !important; }
  .rc-sec[hidden] { display: block !important; }
  .rc-sec { margin-bottom: 22px; }
  .rc-sec__hw { position: static !important; width: auto !important;
                height: auto !important; overflow: visible !important;
                clip: auto !important; white-space: normal;
                font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
                color: var(--faint); font-weight: 600; font-family: var(--font-ui);
                margin: 0 0 12px; }
  .rc-sec__n { margin-left: 8px; }
  .rc-map__more__in { display: block !important; }
  .rc-map__more > summary::after { content: none; }
  .rc-slide[hidden] { display: block !important; }
}