/* hf-geo.css — t_772d17bc / t_5833e1e8 раунд 2 (30.09.2026): «Расположение» на настоящей карте города.
   Черновик до «утверждаю» Данила; затем — в /js/vse-ui.css + COMPONENTS.md. Только токены кита. */

/* вход в шторке: одна карточка «Выбрать на карте» вместо всех групп чипов расположения */
#hfGrpLoc.hf-loc--map .hf-loc__grp--map { display: none; }
#hfGrpLoc .hf-lmentry:not(.hf-lmentry--metro):not(.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' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7l7-3 8 3 7-3v17l-7 3-8-3-7 3z' fill='%23D2DDF1' stroke='%231E4FA3' stroke-width='1.6'/%3E%3Cpath d='M5 18c4-6 9-2 12-8s5-5 7-5' stroke='%23E3262B' stroke-width='2.2'/%3E%3Ccircle cx='17' cy='10' r='2.6' fill='%23fff' stroke='%2312213B' stroke-width='1.6'/%3E%3C/svg%3E"); }

html.hf-lm-open, html.hf-lm-open body { overflow: hidden; }
.hf-geo { position: fixed; inset: 0; z-index: 10050; display: flex; flex-direction: column; background: var(--paper); font-family: var(--font, inherit);
  transform: translateY(24px); opacity: 0; transition: transform var(--vs-dur) var(--vs-ease), opacity var(--vs-dur) var(--vs-ease); }
.hf-geo.is-on { transform: none; opacity: 1; }
.hf-geo > * { box-sizing: border-box; width: 100%; }
.hf-geo__head { display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 4px 4px; background: var(--card); }
.hf-geo__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-geo__ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; }
.hf-geo__ttl b { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.hf-geo__ttl small { font-size: 13px; color: var(--muted); }
.hf-geo__clr { border: 0; background: none; color: var(--blue); font-weight: 600; font-size: 14px; min-height: var(--tap); padding: 0 6px; cursor: pointer; }
.hf-geo__clr[hidden] { display: none; }
.hf-geo__tabs { display: flex; gap: 3px; margin: 0; padding: 4px 12px 10px; background: var(--card); box-shadow: 0 1px 0 var(--line); position: relative; z-index: 2; }
.hf-geo__tabs button { position: relative; flex: 1 1 0; min-width: 0; height: 40px; border: 0; border-radius: var(--r-pill); background: var(--line-2); color: var(--ink-2);
  font: 600 14px/1 var(--font, inherit); cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.hf-geo__tabs button.is-on { background: var(--ink); color: #fff; }
.hf-geo__tabs button i { position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--blue); color: #fff;
  font: 700 11px/18px var(--font, inherit); font-style: normal; box-sizing: border-box; }
.hf-geo__tabs button i[hidden], .hf-geo__tabs button i:empty { display: none; }
.hf-geo__map { position: relative; flex: 1; min-height: 0; background: #eef0ea; }
.hf-geo__map [class*="-ground-pane"] { filter: saturate(.3) brightness(1.04) contrast(.95); }
.hf-geo__load { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; color: var(--muted); }
.hf-geo__panel { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--card); box-shadow: var(--sh-3); position: relative; z-index: 2; }
.hf-geo__lines { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 12px; }
.hf-geo__lines[hidden] { display: none; }
.hf-geo__lines::-webkit-scrollbar, .hf-geo__strip::-webkit-scrollbar { display: none; }
.hf-geo__lines button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink-2); font: 600 13px/1 var(--font, inherit); cursor: pointer; }
.hf-geo__lines button i { width: 10px; height: 10px; border-radius: 50%; }
.hf-geo__lines button.is-on { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.hf-geo__strip { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 12px 4px; scroll-padding: 0 12px; }
.hf-geo__card { position: relative; flex: 0 0 auto; width: 150px; min-height: 66px; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 8px 34px 8px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s; box-sizing: border-box; }
.hf-geo__card::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 3px 3px 0; background: var(--c, var(--blue)); }
.hf-geo__card b { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--ink); overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
.hf-geo__card { width: 168px; }
.hf-geo__tabs button { font-size: 13.5px; padding: 0 6px; }
.hf-geo__card small { font-size: 12px; color: var(--muted); }
.hf-geo__card i { position: absolute; right: 10px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2px solid var(--line); border-radius: 6px; box-sizing: border-box; }
.hf-geo__card.is-focus { border-color: var(--ink-2); box-shadow: var(--sh-2); }
.hf-geo__card.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.hf-geo__card.is-on i { 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/13px no-repeat; }
.hf-geo__card:active { transform: scale(.97); }
.hf-geo__go { margin: 0 12px; width: calc(100% - 24px); min-height: 48px; }

/* метки на карте: станция / район / вокзал / аэропорт — зона нажатия 40 px под «жирный палец» */
.hf-gpt { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  animation: hf-gpt-in .45s var(--vs-ease) both; cursor: pointer; }
.hf-gpt i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--c, var(--ink)); box-sizing: border-box; box-shadow: 0 1px 3px rgba(18,33,59,.3); transition: transform .2s, background .2s; }
.hf-gpt span { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(18,33,59,.15);
  font: 600 11.5px/1.2 var(--font, inherit); color: var(--ink); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; }
.hf-gpt span em { font-style: normal; color: var(--muted); font-weight: 600; }
.hf-gpt.is-focus span, .hf-gpt.is-on span { opacity: 1; }
.hf-gpt.is-focus i { transform: scale(1.35); }
.hf-gpt.is-on i { background: var(--c, var(--blue)); border-color: #fff; transform: scale(1.45); box-shadow: 0 0 0 3px var(--c, var(--blue)), 0 2px 8px rgba(18,33,59,.35); }
.hf-gpt.is-on span { font-weight: 800; }
.hf-gpt.is-dim i { opacity: .45; }
.hf-gpt--rayon i { display: none; }
.hf-gpt--rayon span { left: 50%; transform: translate(-50%, -50%); opacity: 1; background: rgba(255,255,255,.85); }
.hf-gpt--rayon.is-on span { background: var(--blue-deep); color: #fff; }
.hf-geo__map.z-lo .hf-gpt--rayon:not(.is-big):not(.is-on):not(.is-focus) { display: none; }
.hf-geo__map.z-hi .hf-gpt--metro span { opacity: 1; }
/* мелкие районы на обзоре — только число, название — у крупных, выбранных и в фокусе карусели */
.hf-gpt--rayon:not(.is-big):not(.is-on):not(.is-focus) span { font-size: 0; padding: 2px 5px; }
.hf-gpt--rayon:not(.is-big):not(.is-on):not(.is-focus) span em { font-size: 11px; color: var(--ink); }
.hf-gpt--rayon.is-on span em { color: rgba(255,255,255,.8); }
.hf-gpt--vokzal i, .hf-gpt--aeroport i { width: 30px; height: 30px; border-width: 0; background: var(--ink) center/18px no-repeat; }
.hf-gpt--vokzal i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='3' width='12' height='14' rx='3'/%3E%3Cpath d='M6 11h12M9 21l1.5-4M15 21l-1.5-4'/%3E%3C/svg%3E"); }
.hf-gpt--aeroport i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E"); }
.hf-gpt--vokzal span, .hf-gpt--aeroport span { opacity: 1; left: 36px; }
.hf-gpt--vokzal.is-on i, .hf-gpt--aeroport.is-on i { background-color: var(--blue); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue); transform: none; }
@keyframes hf-gpt-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }

@media (min-width: 1024px) {
  .hf-geo { inset: 4vh 50% auto auto; transform: translate(50%, 24px); width: min(1100px, 94vw); height: 92vh; border-radius: var(--r-xl); box-shadow: var(--sh-4); overflow: hidden; }
  .hf-geo.is-on { transform: translate(50%, 0); }
  .hf-geo__go { width: auto; align-self: flex-end; min-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .hf-geo, .hf-gpt { transition: none; animation: none; } }