/* hf-locmap.css — t_772d17bc / t_5833e1e8 (30.09.2026): схема метро и карта районов в фильтре «Расположение».
   Черновик до утверждения Данилом; после «утверждаю» — перенос в /js/vse-ui.css (канон 26.09). Все цвета — токены кита. */

/* вход в шторке: вместо стены чипов */
.hf-loc__grp--map .hf-mchips, .hf-loc__grp--map .hf-loc__q { display: none; }
.hf-lmentry { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 4px 0 2px; padding: 10px 12px 10px 10px;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color var(--vs-dur) var(--vs-ease), box-shadow var(--vs-dur) var(--vs-ease), transform .12s ease; -webkit-tap-highlight-color: transparent; }
.hf-lmentry:active { transform: scale(.985); }
.hf-lmentry.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.hf-lmentry__ic { flex: 0 0 44px; height: 44px; border-radius: 10px; background: var(--blue-soft) center/28px no-repeat; }
.hf-lmentry--metro .hf-lmentry__ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke-linecap='round' stroke-width='2.6'%3E%3Cpath d='M3 22 C8 14 12 10 25 6' stroke='%23E3262B'/%3E%3Cpath d='M4 8 C10 11 16 16 22 24' stroke='%231E4FA3'/%3E%3Cpath d='M2 15 H26' stroke='%231E8E5A'/%3E%3Ccircle cx='13.6' cy='14.4' r='3' fill='%23fff' stroke='%2312213B' stroke-width='1.8'/%3E%3C/svg%3E"); }
.hf-lmentry--rayon .hf-lmentry__ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M3 5 L13 3 L15 12 L6 15 Z' fill='%231E4FA3'/%3E%3Cpath d='M13 3 L25 6 L23 14 L15 12 Z' fill='%23A9BEE3'/%3E%3Cpath d='M6 15 L15 12 L17 25 L5 24 Z' fill='%23D2DDF1'/%3E%3Cpath d='M15 12 L23 14 L25 23 L17 25 Z' fill='%236F8FCB'/%3E%3C/svg%3E"); }
.hf-lmentry__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hf-lmentry__tx b { font-size: 15px; font-weight: 700; line-height: 1.25; }
.hf-lmentry__tx small { font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-lmentry.is-on .hf-lmentry__tx small { color: var(--blue); font-weight: 600; }
.hf-lmentry__go { flex: 0 0 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239AA1AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l5 5-5 5'/%3E%3C/svg%3E") center/20px no-repeat; }

/* полноэкранный слой схемы */
html.hf-lm-open, html.hf-lm-open body { overflow: hidden; }
.hf-lm { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; background: var(--paper);
  transform: translateY(24px); opacity: 0; transition: transform var(--vs-dur) var(--vs-ease), opacity var(--vs-dur) var(--vs-ease); }
.hf-lm.is-on { transform: none; opacity: 1; }
.hf-lm, .hf-lm.hf-lm { align-items: stretch; text-align: left; }
.hf-lm > * { box-sizing: border-box; width: 100%; }
.hf-lm .hf-lm__chip > span { display: inline; font-size: 14px; color: inherit; }
.hf-loc__grp--map > .hf-loc__t { display: none; }
.hf-lm__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 6px 4px; background: var(--card); }
.hf-lm__back { flex: 0 0 var(--tap); height: var(--tap); border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312213B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/24px no-repeat; }
.hf-lm__back:active { background-color: var(--line-2); }
.hf-lm__ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hf-lm__ttl b { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-lm__ttl small { font-size: 13px; color: var(--muted); }
.hf-lm__clr { border: 0; background: none; color: var(--blue); font-weight: 600; font-size: 14px; min-height: var(--tap); padding: 0 6px; cursor: pointer; }
.hf-lm__q { position: relative; padding: 0 12px 10px; background: var(--card); box-shadow: 0 1px 0 var(--line); z-index: 2; }
.hf-lm__q input { width: 100%; height: 44px; font-size: 16px; padding: 0 14px; }
.hf-lm__sugg { position: absolute; left: 12px; right: 12px; top: 48px; background: var(--card); border-radius: var(--r-m); box-shadow: var(--sh-4); overflow: hidden; }
.hf-lm__sg { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; background: none; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.hf-lm__sg + .hf-lm__sg { border-top: 1px solid var(--line-2); }
.hf-lm__sg i { flex: 0 0 10px; height: 10px; border-radius: 50%; }
.hf-lm__sg span { flex: 1; }
.hf-lm__sg em { font-style: normal; color: var(--muted); font-size: 13px; }
.hf-lm__sg.is-on span { font-weight: 700; color: var(--blue); }
.hf-lm__seg { display: flex; gap: 4px; margin-top: 8px; padding: 3px; border-radius: var(--r-pill); background: var(--line-2); }
.hf-lm__seg button { flex: 1; height: 34px; border: 0; border-radius: var(--r-pill); background: none; color: var(--ink-2); font: 600 14px/1 var(--font, inherit); cursor: pointer; }
.hf-lm__seg button.is-on { background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.hf-lm__list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 12px; background: var(--card); }
.hf-lm__list[hidden], .hf-lm__stage[hidden] { display: none; }
.hf-lm__lh { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 12px 16px 6px; background: var(--card); font: 700 13px/1.2 var(--font, inherit); color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.hf-lm__lh i { width: 12px; height: 4px; border-radius: 2px; }
.hf-lm__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--ink); font: 500 15px/1.25 var(--font, inherit); text-align: left; cursor: pointer; }
.hf-lm__row[hidden] { display: none; }
.hf-lm__row i { flex: 0 0 10px; height: 10px; border-radius: 50%; }
.hf-lm__row span { flex: 1; min-width: 0; }
.hf-lm__row em { font-style: normal; font-size: 13px; color: var(--muted); }
.hf-lm__row b { flex: 0 0 22px; height: 22px; border: 2px solid var(--line); border-radius: 6px; box-sizing: border-box; transition: background .15s, border-color .15s; }
.hf-lm__row.is-on span { font-weight: 700; }
.hf-lm__row.is-on b { border-color: var(--blue); background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/14px no-repeat; }
.hf-lm__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  background: radial-gradient(120% 90% at 50% 40%, #fff 0, var(--paper) 70%); }
.hf-lm__stage:active { cursor: grabbing; }
.hf-lm__svg { display: block; width: 100%; height: 100%; font-family: inherit; }
.hf-lm__zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; border-radius: var(--r-m); background: var(--card); box-shadow: var(--sh-2); overflow: hidden; }
.hf-lm__zoom button { width: var(--tap); height: var(--tap); border: 0; background: none; font-size: 22px; color: var(--ink); cursor: pointer; }
.hf-lm__zoom button + button { border-top: 1px solid var(--line); }
.hf-lm__hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--r-pill); background: var(--glass);
  box-shadow: var(--sh-1); font-size: 12px; color: var(--ink-2); white-space: nowrap; pointer-events: none; transition: opacity .3s; }
.hf-lm__hint.is-gone { opacity: 0; }
.hf-lm__foot { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: var(--sh-3); }
.hf-lm__sel { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
.hf-lm__sel::-webkit-scrollbar { display: none; }
.hf-lm__chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: var(--r-pill);
  background: var(--blue-soft); color: var(--blue-deep); font-size: 14px; font-weight: 600; cursor: pointer; }
.hf-lm__chip i { width: 9px; height: 9px; border-radius: 50%; }
.hf-lm__chip::after { content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%230F2F66' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center/16px no-repeat; opacity: .7; }
.hf-lm__go { width: 100%; min-height: 48px; }
@keyframes hf-lm-in { from { transform: scale(.8); opacity: 0; } }

/* SVG: метро */
.hf-lm__line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: opacity .35s var(--vs-ease), stroke-width .35s var(--vs-ease); }
.has-focus .hf-lm__line { opacity: .16; }
.has-focus .hf-lm__line.is-lit { opacity: 1; stroke-width: 6; }
.hf-lm__dot { fill: #fff; stroke-width: 1.6; vector-effect: non-scaling-stroke; transition: fill .2s; }
.hf-lm__dot:not(.is-sel) { opacity: .55; stroke-width: 1.2; }
.has-focus .hf-lm__dot:not(.is-on) { opacity: .35; }
.hf-lm__dot.is-on { stroke-width: 3; opacity: 1; fill: var(--lc, var(--ink)); stroke: #fff; }
.hf-lm__hit { fill: transparent; cursor: pointer; }
.hf-lm__lab { fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 3px; stroke-linejoin: round; pointer-events: none;
  opacity: 0; transition: opacity .25s; }
.hf-lm--metro .hf-lm__lab { font-size: .92em; }
.hf-lm__lab.is-top, .z2 .hf-lm__lab { opacity: 1; }
.has-focus .hf-lm__lab, .has-focus .hf-lm__lab.is-top { opacity: 0; }
.z2 .has-focus .hf-lm__lab, .z2 .has-focus .hf-lm__lab.is-top { opacity: .3; }
.has-focus .hf-lm__lab.on-lit, .hf-lm__lab.is-on, .hf-lm__lab.is-q, .has-q .hf-lm__lab.is-q { opacity: 1; }
.has-q .hf-lm__lab:not(.is-q):not(.is-on) { opacity: .15; }
.hf-lm .hf-lm__lab.lab-hide { opacity: 0; }
.hf-lm__lab.is-on { font-weight: 800; font-size: 1.08em; }
.hf-lm__n { fill: var(--muted); font-weight: 600; font-size: .85em; }
.hf-lm__lab.is-on .hf-lm__n { fill: var(--blue); }
.hf-lm__pulse { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; animation: hf-lm-pulse .65s ease-out forwards; pointer-events: none; }
@keyframes hf-lm-pulse { from { r: 1; opacity: .9; } to { r: calc(28px * var(--u, 1)); opacity: 0; } }

/* SVG: районы — как в игре: границы, заливка по числу отелей, выбор — яркий синий */
.hf-lm__poly { fill: var(--line-2); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hf-lm__poly.is-sel { fill: var(--blue); fill-opacity: var(--w, .25); cursor: pointer; transition: fill .25s var(--vs-ease), fill-opacity .25s var(--vs-ease), transform .25s var(--vs-ease);
  transform-box: fill-box; transform-origin: center; }
.hf-lm__poly.is-sel:hover { fill-opacity: calc(var(--w, .25) + .12); }
.hf-lm__poly.is-on { fill: var(--blue-deep); fill-opacity: .92; stroke-width: 2.5; animation: hf-lm-pop .32s var(--vs-ease); }
@keyframes hf-lm-pop { 40% { transform: scale(1.035); } }
.hf-lm--rayon .hf-lm__lab { opacity: 1; text-anchor: middle; font-size: .95em; }
.hf-lm--rayon .hf-lm__lab.is-on { fill: #fff; stroke: rgba(15,47,102,.6); }
.hf-lm--rayon .hf-lm__lab.is-on .hf-lm__n { fill: #fff; }
.hf-lm--rayon .hf-lm__lab:not(.lab-full) tspan:first-child { display: none; }
.hf-lm--rayon .hf-lm__lab:not(.lab-full) .hf-lm__n { font-size: 1em; font-weight: 800; fill: var(--blue-deep); }
.hf-lm--rayon .hf-lm__lab.lab-none { opacity: 0; }
.hf-lm--rayon .hf-lm__lab.lab-full .hf-lm__n { font-size: .85em; }

@media (min-width: 1024px) {
  .hf-lm { inset: 5vh 50% auto auto; transform: translate(50%, 24px); width: min(960px, 92vw); height: 90vh; border-radius: var(--r-xl); box-shadow: var(--sh-4); overflow: hidden; }
  .hf-lm.is-on { transform: translate(50%, 0); }
  .hf-lm__foot { flex-direction: row; align-items: center; }
  .hf-lm__sel { flex: 1; margin: 0; padding: 0; }
  .hf-lm__go { width: auto; min-width: 240px; }
}
@media (prefers-reduced-motion: reduce) { .hf-lm, .hf-lm__line, .hf-lm__poly { transition: none; animation: none; } }