:root{
  --bg:#f7f2ea; --card:#fff; --ink:#2a2a2a; --ink2:#4a4a4a; --muted:#8a8375;
  --accent:#c2410c; --accent-soft:#ffe8d6;
  --minus-bg:#fef3e2; --minus-ink:#b45309;
  --line:rgba(0,0,0,.08);
  --header-h:54px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
}

/* ---------- header ---------- */
.topbar{
  height:var(--header-h); position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{font-size:18px; font-weight:800; letter-spacing:-.01em;}
.brand span{font-weight:400; color:var(--muted);}
.view-toggle{
  display:none; background:#eae5dc; border-radius:10px; padding:3px; border:none; cursor:pointer; gap:2px;
}
.view-toggle span{
  font-size:13px; font-weight:600; color:#6b6355; padding:6px 14px; border-radius:8px;
}
.view-toggle span.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12);}
.topbar-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{background:none; border:none; cursor:pointer; color:var(--ink); padding:6px;
  display:flex; align-items:center; justify-content:center; border-radius:8px;}
.icon-btn:active{background:var(--line);}

/* ---------- filters ---------- */
.filters{
  position:sticky; top:var(--header-h); z-index:15;
  display:flex; gap:8px; overflow-x:auto; padding:12px 16px;
  background:var(--bg); border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch;
}
.filters::-webkit-scrollbar{display:none;}
.fchip{
  flex:0 0 auto; font-size:13px; padding:7px 13px; border-radius:20px; cursor:pointer;
  background:#fff; border:1px solid var(--line); white-space:nowrap; transition:.12s; user-select:none;
}
.fchip:hover{border-color:rgba(0,0,0,.25);}
.fchip.active{background:var(--ink); color:#fff; border-color:var(--ink);}

/* ---------- layout ---------- */
.layout{display:flex; align-items:flex-start;}
/* обёртка списка: на десктопе «исчезает» (display:contents), на мобиле — шторка */
.sheet{display:contents;}
.sheet-handle{display:none;}
.cards{order:2; flex:1; min-width:0; padding:16px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; align-items:start;}
.map{order:1; flex:0 0 40%; max-width:520px;}

@media (min-width:900px){
  /* карта «липнет» слева, страница скроллится — ряды грида по содержимому, ничего не режется */
  .map{position:sticky; top:calc(var(--header-h) + 57px); height:calc(100vh - var(--header-h) - 57px);}
}

/* ---------- card ---------- */
.card{
  background:var(--card); border-radius:18px; overflow:hidden;
  box-shadow:0 3px 14px rgba(0,0,0,.08); display:flex; flex-direction:column;
  transition:transform .12s, box-shadow .12s; cursor:pointer;
}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.12);}
.card.hl{outline:2px solid var(--accent);}

.carousel{position:relative; flex:0 0 200px; height:200px; overflow:hidden; background:#e7e0d4;
  background-image:linear-gradient(100deg,#e7e0d4 30%,#efe9df 50%,#e7e0d4 70%);
  background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite;}
.carousel .slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s;}
.carousel .slide.on.loaded{opacity:1;}
.carousel .slide.ph{opacity:1; display:flex; align-items:center; justify-content:center;
  font-size:44px; background:#e7e0d4;}
@keyframes shimmer{0%{background-position:150% 0;} 100%{background-position:-50% 0;}}
.carousel .nav{position:absolute; top:0; bottom:0; width:38%; cursor:pointer; z-index:2;}
.carousel .nav.prev{left:0;} .carousel .nav.next{right:0;}
.carousel .arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.85);
  display:none; align-items:center; justify-content:center; font-size:15px; color:#333; pointer-events:none;}
.card:hover .arrow{display:flex;}
.arrow.prev{left:8px;} .arrow.next{right:8px;}
.dots{position:absolute; bottom:8px; left:0; right:0; display:flex; gap:5px; justify-content:center; z-index:3;}
.dot{width:6px; height:6px; border-radius:50%; background:#fff; opacity:.5;}
.dot.on{opacity:1;}

.body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px;}
.name{font-size:18px; font-weight:800; letter-spacing:-.01em;}
.prose{font-size:13.5px; line-height:1.5; color:var(--ink2); margin:-2px 0 0;}
.tags{display:flex; flex-wrap:wrap; gap:6px;}
.tg{font-size:12px; padding:4px 9px; border-radius:9px; background:#f0ede7; color:#555; line-height:1.2;}
.tg.minus{background:var(--minus-bg); color:var(--minus-ink);}
.maplinks{display:flex; align-items:center; margin-top:6px;}
.maplink{color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; padding:3px 0;}
.maplink:hover{color:var(--ink);}
.maplink + .maplink{margin-left:14px;}
.maplink + .maplink::before{content:"·"; margin-right:14px; color:var(--muted); font-weight:400;}

/* ---------- map ---------- */
.map .leaflet-container{height:100%; width:100%; background:#dbe9d4;}
.pin{
  width:28px; height:28px; border-radius:50% 50% 50% 0; background:var(--accent);
  transform:rotate(-45deg); box-shadow:0 3px 6px rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
}
.pin b{transform:rotate(45deg); color:#fff; font-size:12px; font-weight:700;}
.pin.hl{background:#16a34a; width:34px; height:34px;}
.leaflet-popup-content{margin:0; width:190px !important;}
.pu-photo{height:96px; background-size:cover; background-position:center; border-radius:12px 12px 0 0;}
.pu-b{padding:8px 10px 10px;}
.pu-name{font-size:14px; font-weight:800; margin-bottom:6px;}
.pu-b .maplinks{margin-top:4px;}
.pu-b .maplink{font-size:12px;}
.pu-photo.ph{display:flex; align-items:center; justify-content:center; font-size:34px; background:#e7e0d4;}

.empty{order:3; text-align:center; padding:60px 20px; color:var(--muted); font-size:15px;}
.empty-reset{display:inline-block; margin-top:14px; background:var(--ink); color:#fff; border:none;
  padding:9px 18px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer;}
.empty-reset:active{opacity:.85;}

/* ---------- mobile: карта = базовый слой, список = нижняя шторка поверх ---------- */
@media (max-width:899px){
  .view-toggle{display:flex;}

  /* карта на весь экран под шапкой+фильтром */
  .map{position:fixed; inset:calc(var(--header-h) + 57px) 0 0 0; max-width:none; z-index:5;}

  /* шторка со списком */
  .sheet{
    display:flex; flex-direction:column;
    position:fixed; left:0; right:0; bottom:0; z-index:10;
    background:var(--bg); border-radius:18px 18px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,.18);
    overflow:hidden; transition:height .3s cubic-bezier(.4,0,.2,1);
  }
  .sheet-handle{
    display:block; flex:0 0 auto; height:26px; width:100%;
    background:transparent; border:none; cursor:pointer; position:relative;
  }
  .sheet-handle::before{
    content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
    width:40px; height:5px; border-radius:5px; background:#c9c1b3;
  }
  /* внутри шторки (фикс. высота + скролл) grid ненадёжен — обычный блочный поток */
  .cards{
    order:0; flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
    display:block; padding:2px 14px 16px;
  }
  .card{margin-bottom:14px;}
  .card:last-child{margin-bottom:0;}
  .carousel{flex:0 0 200px; height:200px;}

  /* фокус на списке — шторка большая, карта полоской сверху */
  body.focus-list .sheet{height:calc(100vh - var(--header-h) - 57px - 120px);
                         height:calc(100dvh - var(--header-h) - 57px - 120px);}
  /* фокус на карте — шторка низкая, карта во весь рост */
  body.focus-map .sheet{height:38vh; height:38dvh;}
}

/* ---------- тост ---------- */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:12px; font-size:14px;
  z-index:50; box-shadow:0 6px 20px rgba(0,0,0,.25);}
.toast[hidden]{display:none;}