/* Поиск захоронений — ГИС «ОСИРИС», Ярославль.
   Дизайн-система «Industry»: токены в ds/industry.css, здесь — экраны. */

body { margin:0; background:var(--color-bg); color:var(--color-text);
       font-family:var(--font-body); overflow-x:hidden; }
[hidden] { display:none !important; }
a { color:inherit; text-decoration:none; }
button { font-family:var(--font-body); }

.wrap    { max-width:1120px; margin:0 auto; padding:var(--space-8) var(--space-6); }
.kicker  { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent-700); }
.muted   { color:var(--color-neutral-600); }
.spacer  { flex:1; }

/* ---------- шапка ---------- */
.topbar      { border-bottom:1px solid var(--color-divider); background:var(--color-bg);
               position:sticky; top:0; z-index:700; }
/* подписи, которые на телефоне не помещаются и не нужны */
.only-mob    { display:none; }
.topbar__row { max-width:1120px; margin:0 auto; padding:var(--space-3) var(--space-6);
               display:flex; align-items:center; gap:var(--space-4); }
.brand       { display:flex; align-items:baseline; gap:var(--space-3); cursor:pointer; }
.brand__name { font-family:var(--font-heading); font-size:20px; letter-spacing:.02em; }
.brand__sub  { font-size:12px; color:var(--color-neutral-600); }

/* компактная форма поиска в шапке */
.minisearch       { display:flex; gap:var(--space-2); align-items:center; margin-left:auto; }
.minisearch input { width:280px; height:36px; font-size:14px; }
.minisearch .btn  { height:36px; padding:0 var(--space-4); }

/* ---------- главная ---------- */
h1 { font-size:64px; margin:var(--space-3) 0; letter-spacing:-.02em; }
.lead { font-size:17px; max-width:560px; color:var(--color-neutral-700); text-wrap:pretty; }
.searchbox { margin-top:var(--space-6); padding:var(--space-4); display:flex; gap:var(--space-3);
             align-items:center; max-width:760px; }
.searchbox input { flex:1; height:52px; font-size:17px; border:0; background:transparent; }
.samples { display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-3);
           font-size:13px; color:var(--color-neutral-600); flex-wrap:wrap; }
.samples__count { margin-left:auto; }
.sect { display:flex; align-items:baseline; gap:var(--space-4); margin-top:var(--space-8); }
.sect h2 { font-size:24px; margin:0; }
.sect__rule { flex:1; height:1px; background:var(--color-divider); }
.cems { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); margin-top:var(--space-4); }
.cems .card { cursor:pointer; padding:var(--space-4); gap:var(--space-3); }
.cems .card:hover { background:var(--color-accent-100); }
.card-foot { display:flex; justify-content:space-between; font-size:12px;
             border-top:1px solid var(--color-divider); padding-top:var(--space-2); }
.pagefoot { display:flex; gap:var(--space-8); margin-top:var(--space-8); padding-top:var(--space-4);
            border-top:1px solid var(--color-divider); font-size:12px;
            color:var(--color-neutral-600); flex-wrap:wrap; }
.pagefoot span:last-child { margin-left:auto; }

/* ---------- результаты ---------- */
.results-grid { display:grid; grid-template-columns:240px 1fr; gap:var(--space-8); }
.filters { position:sticky; top:var(--space-4); align-self:start; }
.filters__h { font-size:11px; letter-spacing:.14em; text-transform:uppercase;
              color:var(--color-neutral-600); margin-bottom:var(--space-3); }
.filter { display:flex; justify-content:space-between; gap:var(--space-2); width:100%;
          padding:10px 12px; border:0; border-bottom:1px solid var(--color-divider);
          background:transparent; cursor:pointer; font-size:14px; text-align:left; }
.filter:hover { background:var(--color-accent-100); }
.filter.is-active { background:var(--color-accent-100); color:var(--color-accent-800); font-weight:500; }
.filter__cnt { color:var(--color-neutral-600); font-size:13px; }
.check { display:flex; gap:var(--space-2); align-items:center; font-size:14px; cursor:pointer; }
.check input { accent-color:var(--color-accent); width:16px; height:16px; }

.results-head { display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap; }
.results-head h2 { font-size:28px; margin:0; }
.rows { display:flex; flex-direction:column; gap:10.2px; margin-top:var(--space-4); }
.row { display:grid; grid-template-columns:104px 1fr auto; gap:var(--space-4); align-items:center;
       padding:10.2px; cursor:pointer; }
.row:hover { background:var(--color-accent-100); }
.row__thumb { width:104px; height:78px; border:1px solid var(--color-divider);
              background:var(--color-neutral-100); background-size:cover; background-position:center;
              display:flex; align-items:center; justify-content:center;
              font-size:11px; color:var(--color-neutral-500); }
.row__fio  { font-family:var(--font-heading); font-size:23px; line-height:1.15; }
.row__dates{ font-size:15px; color:var(--color-neutral-700); }
.row__place{ font-size:13px; color:var(--color-neutral-600); }
.row__act  { display:flex; align-items:center; gap:var(--space-3); }
.empty { max-width:620px; padding:var(--space-8); }
.empty h3 { font-size:26px; margin:var(--space-3) 0; }
.empty ul { font-size:14px; color:var(--color-neutral-700); line-height:1.7; }

/* ---------- карта ---------- */
.mapbar { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-6);
          border-bottom:1px solid var(--color-divider); }
.mapwrap { display:flex; height:calc(100vh - 118px); min-height:520px; }
#map { flex:1; background:var(--color-neutral-200); }
.panel { width:420px; flex:none; border-left:1px solid var(--color-divider);
         overflow:auto; padding:var(--space-4); background:var(--color-bg); }
.panel__title { font-family:var(--font-heading); font-size:26px; margin:2px 0 0; }
.plotlist { max-height:210px; overflow:auto; margin:var(--space-3) 0;
            border-top:1px solid var(--color-divider); }
.plotrow { display:flex; justify-content:space-between; gap:var(--space-2); width:100%;
           padding:10px 14px; border:0; border-bottom:1px solid var(--color-divider);
           background:transparent; cursor:pointer; font-size:14px; text-align:left; }
.plotrow:hover { background:var(--color-accent-100); }
.plotrow.is-active { background:var(--color-accent); color:var(--color-bg); }
.plotrow__y { font-size:12px; opacity:.6; }
.zcard { padding:13.6px; display:flex; flex-direction:column; gap:13.6px; }
.zcard__fio { font-family:var(--font-heading); font-size:29px; line-height:1.1; }
.zcard__dates { font-size:16px; color:var(--color-neutral-700); }
.photos { display:grid; grid-template-columns:1fr 1fr; gap:10.2px; }
.photo { aspect-ratio:4/3; background-size:cover; background-position:center; cursor:pointer;
         background-color:var(--color-neutral-100); }
.nophoto { padding:var(--space-4); text-align:center; font-size:13px; color:var(--color-neutral-600);
           border:1px dashed var(--color-divider); }
.note { font-size:11px; color:var(--color-neutral-600); }

/* элементы управления картой */
.mapctl { position:absolute; z-index:500; display:flex; gap:6px; }
.mapctl--zoom { left:var(--space-4); top:var(--space-4); flex-direction:column; }
.mapctl--mode { right:var(--space-4); top:var(--space-4); }
.mapctl--shape { right:var(--space-4); top:calc(var(--space-4) + 42px); }
.mapbtn { width:36px; height:36px; background:var(--color-neutral-100); border:1px solid var(--color-divider);
          cursor:pointer; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; }
.segbtn { font-family:var(--font-heading); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
          padding:0 12px; height:36px; background:var(--color-neutral-100);
          border:1px solid var(--color-divider); cursor:pointer; }
.segbtn.is-active { background:var(--color-accent); color:var(--color-neutral-100); border-color:var(--color-accent); }
.mapattrib { position:absolute; right:var(--space-4); bottom:var(--space-4); z-index:500;
             font-size:11px; color:var(--color-neutral-600); }

/* ---------- страница кладбища ---------- */
.cem-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-8); }
.cem-grid h1 { font-size:52px; }

/* ---------- просмотр фото ---------- */
.lb { position:fixed; inset:0; z-index:1000; background:var(--color-accent-900);
      display:flex; flex-direction:column; animation:fade .18s ease; }
@keyframes fade { from { opacity:0 } to { opacity:1 } }
.lb__top { display:flex; align-items:flex-start; gap:var(--space-4);
           padding:var(--space-4) var(--space-6); color:var(--color-neutral-100); }
.lb__fio { font-family:var(--font-heading); font-size:20px; }
.lb__cap { font-size:12px; opacity:.7; }
.lb__body { flex:1; display:flex; align-items:center; justify-content:center; gap:var(--space-4);
            padding:0 var(--space-4); }
.lb__img { background:var(--color-neutral-100); padding:10px; max-width:72vw; max-height:64vh; }
.lb__img img { display:block; max-width:100%; max-height:calc(64vh - 20px); }
.lb__nav { width:44px; height:44px; background:transparent; cursor:pointer; flex:none;
           border:1px solid rgba(242,242,243,.35); color:var(--color-neutral-100); font-size:20px; }
.lb__count { text-align:center; padding:var(--space-4); font-size:12px; letter-spacing:.14em;
             text-transform:uppercase; color:var(--color-neutral-100); opacity:.8; }
.lb__close { border:1px solid rgba(242,242,243,.35); background:transparent;
             color:var(--color-neutral-100); height:36px; padding:0 var(--space-4); cursor:pointer; }

/* ---------- мобильная шторка ---------- */
.sheet { display:none; }
.sheet__more { display:none; }   /* подсказка «открыть» нужна только на телефоне */

/* выбор кладбища списком — на телефоне вместо полосы кнопок */
.cempick { display:none; }
.cempick__l { font-family:var(--font-heading); font-size:11px; text-transform:uppercase;
              letter-spacing:.08em; color:var(--color-neutral-600); }
.cempick select { height:44px; width:100%; font:inherit; padding:0 10px;
                  border:1px solid var(--color-divider); background:var(--color-neutral-100); }
.morebtn { width:100%; height:44px; justify-content:center; margin-top:var(--space-4); }

@media (max-width:1000px) {
  :root { --wrap-pad:var(--space-4); }
  .wrap { padding:var(--space-6) var(--space-4); }
  h1 { font-size:40px; }
  .cems { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:1fr; gap:var(--space-4); }
  .filters { position:static; }
  .filters__list { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
  .filters__list::-webkit-scrollbar { display:none; }
  .filter { width:auto; white-space:nowrap; border:1px solid var(--color-divider); padding:8px 14px; }
  .filter.is-active { background:var(--color-accent); color:var(--color-neutral-100); }
  .row { grid-template-columns:72px 1fr; min-height:88px; }
  .row__thumb { width:72px; height:72px; }
  .row__act { display:none; }
  .cem-grid { grid-template-columns:1fr; }
  .cem-grid h1 { font-size:36px; }
  .minisearch input { width:150px; }
  .pagefoot span:last-child { margin-left:0; }
  .samples__count { margin-left:0; width:100%; }

  /* короткие подписи в шапке */
  .only-desk { display:none; }
  .only-mob  { display:inline; }
  .topbar__row { padding:var(--space-3) var(--space-4); gap:var(--space-3); }
  .brand { flex-direction:column; align-items:flex-start; gap:0; min-width:0; }
  /* поле поиска ужимается по месту — иначе кнопка «Найти» вылезала за край
     экрана и тянула за собой всю страницу */
  .minisearch { flex:1; min-width:0; }
  /* Кегль не меньше 16px: при меньшем Safari на iPhone приближает страницу,
     как только палец попадает в поле. Заодно поле и кнопка одной высоты. */
  .minisearch input { width:100%; min-width:0; font-size:16px; height:40px; }
  .minisearch .btn { height:40px; }
  .cempick select { font-size:16px; }

  /* Экран карты занимает ровно высоту окна: шапка и крошка сверху, карта
     растягивается по остатку, шторка приклеена к её низу. Раньше высота
     считалась как 100vh минус фиксированные 56px, хотя шапка с крошкой
     занимают около 140px, — и низ шторки уходил под нижний край экрана. */
  body.is-map { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
  body.is-map #s-map { flex:1; display:flex; flex-direction:column; min-height:0; }
  .mapwrap { position:relative; height:auto; min-height:0; flex:1; }
  .mapattrib { display:none; }
  /* z-index обязателен: внутренние слои Leaflet имеют собственные 400–800,
     без него шторка оказывается ПОД картой, хотя по координатам стоит верно */
  /* Свёрнутая шторка показывает только шапку: ФИО, даты и сколько
     захоронено на участке. Список и карточка выезжают при раскрытии. */
  .panel:not(.is-full) .plotlist,
  .panel:not(.is-full) .zcard { display:none; }
  .panel { position:absolute; left:0; right:0; bottom:0; width:auto; height:142px; z-index:900;
           border-left:0; border-top:1px solid var(--color-divider);
           box-shadow:0 12px 32px rgba(43,43,45,.22);
           transition:height .2s cubic-bezier(.2,.9,.2,1); }
  /* Раскрытая высота — в единицах экрана, а не в процентах: контейнер карты
     тянется флексом (height:auto), и проценты от него не разрешаются. */
  .panel.is-full { height:68vh; height:68dvh; }
  /* шторку тянут пальцем — браузер не должен принимать это за прокрутку
     страницы, а список внутри не должен «пробивать» её при докрутке */
  /* Шторку тянут за всю шапку. Раньше на палец отвечала полоска высотой
     20 px — 17% шторки; в имя и даты можно было тыкать без результата. */
  .sheet { touch-action:none; }
  .panel { touch-action:pan-y; }
  .plotlist, .zcard { touch-action:auto; }
  .panel { overscroll-behavior:contain; }
  /* ФИО в заголовке шторки — одной строкой: на карте она занимает верх экрана */
  .panel__title { font-size:17px; line-height:1.25; white-space:nowrap;
                  overflow:hidden; text-overflow:ellipsis; }
  /* ручку делаем крупнее — по ней и тянут, промахиваться в карту незачем */
  /* полосу кнопок с кладбищами на телефоне заменяет выпадающий список */
  .filters { display:none; }
  .cempick { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-4); }
  .sheet { display:flex; justify-content:center; padding:10px 0 8px; cursor:pointer; }
  .sheet i { width:44px; height:5px; background:var(--color-neutral-400); display:block;
             border-radius:3px; transition:background .12s, width .12s, height .12s; }
  /* отклик на касание: подтверждение, что палец попал, ещё до отпускания */
  .panel.is-pressing .sheet i { background:var(--color-neutral-700); width:56px; height:6px; }

  /* подсказка, что внутри есть продолжение — иначе о шторке не догадаться */
  .sheet__more { margin-top:6px; font-size:12px; color:var(--color-accent);
                 display:flex; align-items:center; gap:5px; }
  .sheet__more::after { content:"\2303"; font-size:14px; line-height:1; transform:translateY(2px); }
  .panel.is-full .sheet__more { display:none; }
  .lb__img { max-width:92vw; }
}

/* линейка масштаба — под кнопками зума, чтобы её не закрывала шторка */
.leaflet-top.leaflet-left { margin-top:96px; margin-left:2px; }
.leaflet-control-scale-line { background:rgba(255,255,255,.82); border:1px solid var(--color-divider);
                              border-top:0; color:var(--color-neutral-700); font-size:11px; padding:1px 6px; }
/* миниатюра в строке выдачи — картинкой, чтобы браузер грузил её лениво
   (фон из CSS так не умеет, и все снимки страницы качались бы сразу) */
.row__thumb img { width:100%; height:100%; object-fit:cover; display:block; }