/* «Карта Среды».
   Токены взяты из существующего стиля проекта (сайт /opt/sreda/site/style.css
   и мини-приложение): свой визуальный язык у карты не заводим, иначе продукт
   распадается на два разных продукта. */

:root {
  --bg:       #FBFAF7;
  --card:     #FFFFFF;
  --ink:      #161A17;
  --ink-2:    #3D453E;
  --muted:    #6E766F;
  --accent:   #2F7A54;
  --accent-2: #E7F1EA;
  --rule:     rgba(47, 122, 84, .18);
  --danger:   #B3372F;
  --radius:   16px;
  --serif:    Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --panel-w:  392px;
  --shadow:   0 6px 24px rgba(22, 26, 23, .10);

  /* Оси характера. Цвета выбраны различимыми и при цветовой слепоте:
     зелёный/оранжевый/синий/сливовый разводятся ещё и по светлоте. */
  --ax-walk:  #3F8F60;
  --ax-meet:  #D2762F;
  --ax-work:  #3F6FA8;
  --ax-live:  #7B5EA7;
  --ax-night: #2E4A6B;
  --ax-docs:  #B14C4C;
  --ax-move:  #5A6B78;
  --ax-pulse: #2F7A54;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141715; --card: #1D211E; --ink: #ECF0EC; --ink-2: #C4CBC5;
    --muted: #8B948B; --accent: #6FBF92; --accent-2: #1E2C24;
    --rule: rgba(111, 191, 146, .24); --danger: #E38078;
    --shadow: 0 6px 24px rgba(0, 0, 0, .45);
    --ax-walk: #5CB07E; --ax-meet: #E39A55; --ax-work: #6E9AD0;
    --ax-live: #A88BD0; --ax-night: #6C8FBC; --ax-docs: #D07878; --ax-move: #8FA0AD;
  }
}
:root[data-theme="dark"] {
  --bg: #141715; --card: #1D211E; --ink: #ECF0EC; --ink-2: #C4CBC5;
  --muted: #8B948B; --accent: #6FBF92; --accent-2: #1E2C24;
  --rule: rgba(111, 191, 146, .24); --danger: #E38078;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
  --ax-walk: #5CB07E; --ax-meet: #E39A55; --ax-work: #6E9AD0;
  --ax-live: #A88BD0; --ax-night: #6C8FBC; --ax-docs: #D07878; --ax-move: #8FA0AD;
}

* { box-sizing: border-box }
html, body { height: 100%; margin: 0 }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  overflow: hidden;                 /* страница не скроллится: скроллят панели */
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer }
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px }

/* ------------------------------------------------------------ каркас ----- */

#app { display: grid; grid-template-columns: var(--panel-w) 1fr; height: 100dvh; overflow: hidden }

#map { position: relative; height: 100%; background: var(--bg); overflow: hidden }
#map canvas { outline: none }

/* ------------------------------------------------------------- панель ---- */

#panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--card); border-right: 1px solid var(--rule);
}

.p-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--rule) }
.p-title {
  margin: 0 0 2px; font: 600 20px/1.2 var(--serif); letter-spacing: -.01em;
}
.p-sub { margin: 0; color: var(--muted); font-size: 13px }

.search { position: relative; margin-top: 12px }
.search input {
  width: 100%; padding: 9px 32px 9px 12px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit;
}
.search input::placeholder { color: var(--muted) }
.search button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--muted); padding: 4px 8px; font-size: 16px;
}

.p-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 24px }
.p-body::-webkit-scrollbar { width: 8px }
.p-body::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px }

/* --------------------------------------------------------- переключатель -*/

.modes { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; scrollbar-width: none }
.modes::-webkit-scrollbar { display: none }
.mode {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card); color: var(--ink-2); font-size: 13.5px; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.mode:hover { border-color: var(--accent) }
.mode[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink) }
.mode .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85 }

/* ------------------------------------------------------------ карточки --- */

.card {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--card); padding: 13px 14px; margin-bottom: 9px;
  transition: border-color .15s, transform .12s;
}
.card.clickable:hover { border-color: var(--accent); transform: translateY(-1px) }
.card h3 { margin: 0 0 3px; font: 600 15.5px/1.3 var(--sans) }
.card .meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.card p { margin: 7px 0 0; color: var(--ink-2); font-size: 14px }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-2); color: var(--accent); font-size: 11.5px; font-weight: 600;
}
.tag.plain { background: var(--bg); color: var(--muted); font-weight: 500 }
.tag.life  { background: rgba(177, 76, 76, .12); color: var(--ax-docs) }

.rating { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 13px }
.rating .star { color: #E0A32E }

/* профиль района: шесть полос вместо радара — читается быстрее и не врёт
   площадью, как это делает радар при разных масштабах осей */
.bars { margin: 10px 0 2px; display: grid; gap: 7px }
.bar { display: grid; grid-template-columns: 74px 1fr 34px; gap: 8px; align-items: center; font-size: 12.5px }
.bar .lbl { color: var(--ink-2) }
.bar .track { height: 7px; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; overflow: hidden }
/* display: block обязателен: заливка это <span>, а inline-элемент игнорирует
   и ширину, и высоту — полоски шкал рисовались пустыми. */
.bar .fill { display: block; height: 100%; border-radius: 999px; transition: width .35s ease }
.bar .val { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums }

.section-title {
  margin: 16px 0 8px; font: 600 12px/1 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.back {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none;
  color: var(--muted); padding: 4px 0; margin-bottom: 6px; font-size: 13px;
}
.back:hover { color: var(--accent) }

.empty { padding: 28px 10px; text-align: center; color: var(--muted); font-size: 14px }
.skeleton { height: 64px; border-radius: var(--radius); background: var(--bg);
  border: 1px solid var(--rule); margin-bottom: 9px; animation: pulse 1.4s ease-in-out infinite }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

/* -------------------------------------------------------------- легенда --*/

.legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 9px 11px; box-shadow: var(--shadow); font-size: 12px; max-width: 230px;
}
.legend b { display: block; margin-bottom: 5px; font-size: 12px }
.legend .row { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--ink-2) }
.legend .swatch { width: 22px; height: 9px; border-radius: 3px; border: 1px solid var(--rule) }
.legend .hint { margin-top: 6px; color: var(--muted); font-size: 11.5px; line-height: 1.35 }

.map-note {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6;
  background: var(--card); border: 1px solid var(--rule); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; color: var(--ink-2); box-shadow: var(--shadow);
}

/* --------------------------------------------------------------- метки --- */

.pin {
  display: inline-flex; align-items: center; gap: 5px; max-width: 190px;
  padding: 4px 9px 4px 6px; border-radius: 999px; border: 1.5px solid var(--card);
  background: var(--pin, var(--accent)); color: #fff;
  font: 600 12px/1 var(--sans); box-shadow: 0 3px 10px rgba(22, 26, 23, .28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pin .ic { font-size: 12px; line-height: 1 }
.pin .nm { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.labels-on .pin .nm { display: inline }
.pin.sreda { box-shadow: 0 0 0 3px rgba(47, 122, 84, .35), 0 3px 10px rgba(22, 26, 23, .28) }
.om-mk:hover .pin, .pin.active { transform: scale(1.08); box-shadow: 0 6px 16px rgba(22, 26, 23, .34) }
.pin.active { border-color: var(--ink) }

.cluster {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ink); color: var(--card);
  border: 2px solid var(--card); font: 700 12px/1 var(--sans);
  box-shadow: 0 4px 12px rgba(22, 26, 23, .3);
}

/* ------------------------------------------------------------- карточка -- */

.detail h2 { margin: 2px 0 4px; font: 600 19px/1.25 var(--serif) }
.detail .lead { color: var(--ink-2); font-size: 14.5px; margin: 8px 0 }
.detail .facts { display: grid; gap: 6px; margin: 12px 0; font-size: 13.5px }
.detail .facts div { display: grid; grid-template-columns: 96px 1fr; gap: 8px }
.detail .facts dt { color: var(--muted) }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 600;
}
.btn:hover { filter: brightness(1.06) }
.btn.ghost { background: transparent; color: var(--accent) }
.btn.wide { width: 100% }
.btn[disabled] { opacity: .5; cursor: not-allowed }
.actions { display: flex; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap }

.review { border-top: 1px solid var(--rule); padding: 10px 0 }
.review .who { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted) }
.review p { margin: 5px 0 0; font-size: 14px; color: var(--ink-2) }

.stars { display: flex; gap: 3px; margin: 8px 0 }
.stars button { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--rule); padding: 0 }
.stars button.on { color: #E0A32E }
textarea.rv {
  width: 100%; min-height: 74px; padding: 9px 11px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; resize: vertical;
}

.ext { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.ext .src {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
  border: 1px solid var(--rule); border-radius: 999px; font-size: 12.5px; color: var(--ink-2);
}

/* ------------------------------------------------------------ мобильный -- */

@media (max-width: 1023px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr }
  #map { grid-row: 1; height: 100dvh }
  #panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    height: 62dvh; max-height: 62dvh; border-right: 0;
    border-top: 1px solid var(--rule); border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(22, 26, 23, .16);
    transform: translateY(calc(100% - 132px));
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  }
  #panel.open { transform: translateY(0) }
  #panel::before {
    content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 999px; background: var(--rule);
  }
  .p-head { padding-top: 18px }
  .legend { display: none }
  .modes { position: fixed; top: 8px; left: 0; right: 0; z-index: 21; padding: 6px 12px }
  .mode { box-shadow: var(--shadow) }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important }
}

/* Кнопки карты не должны лезть под ленту режимов на узких экранах. */
@media (max-width: 1023px) {
  .maplibregl-ctrl-top-right { margin-top: 46px }
  .maplibregl-ctrl-bottom-right { margin-bottom: 136px }
}

/* Метка места, на которое привели из журнала.
   Каплевидная, как привычные метки на картах: человек узнаёт её сразу
   и не путает с кружками мест «Среды». */
.metka-iz-zhurnala {
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--accent, #2f7d5f);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  cursor: pointer;
}

/* ------------------------------------------------- режим «Районы» ------- */

/* Ярлык местности. Это элемент поверх холста, а не подпись в слое: у него
   есть фон, тень и нажатие — на карте он работает как кнопка. */
/* overflow: hidden обязателен: ярлык, попавший за край экрана, иначе
   растягивает страницу и появляется горизонтальный скролл. */
.hood-labels { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden }
.hood-pill {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 11px; border-radius: 12px;
  border: 1.5px solid var(--hood, var(--rule));
  background: var(--card); color: var(--ink);
  box-shadow: 0 3px 12px rgba(22, 26, 23, .16);
  font: 600 13px/1.15 var(--sans); text-align: left; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease;
}
.hood-pill span {
  font: 500 10.5px/1 var(--sans); color: var(--muted); letter-spacing: .01em;
}
.hood-pill:hover { box-shadow: 0 6px 18px rgba(22, 26, 23, .24); z-index: 2 }
.hood-pill.active { background: var(--hood); border-color: var(--ink); color: #fff }
.hood-pill.active span { color: rgba(255, 255, 255, .85) }

/* Строка местности в списке: цветной образец слева, как легенда карты. */
.hood-row { display: flex; align-items: center; gap: 11px }
.hood-text { flex: 1; min-width: 0 }
.swatch-lg {
  flex: 0 0 auto; width: 16px; height: 34px; border-radius: 6px;
  border: 1px solid rgb(0 0 0 / 8%);
}
.hood-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px }
.hood-head h2 { margin: 0 }

/* Точка у чипа «Районы» — из нескольких цветов сразу: режим не про одну тему. */
.dot-multi {
  width: 9px; height: 9px; border-radius: 50%;
  background: conic-gradient(#E8927C 0 25%, #7FBF8F 0 50%, #8FA9D8 0 75%, #F2C46B 0);
}

/* Переходы в навигаторы: маршрут строится в приложении человека, не у нас. */
.nav-box { margin-top: 4px }
.nav-links { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px }
.nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 10px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink);
  font-size: 13.5px; font-weight: 500;
}
.nav-btn:hover { border-color: var(--accent); color: var(--accent) }
.btn.small { padding: 6px 11px; font-size: 13px }

/* --------------------------------------------- обратная связь и плашка --- */

.beta {
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--accent-2); border: 1px solid var(--rule);
}
.beta b { display: block; font-size: 13px; margin-bottom: 3px }
.beta p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2) }
.beta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 7px }
.link-btn {
  border: 0; background: none; padding: 0; color: var(--accent);
  font-size: 12.5px; font-weight: 600; text-decoration: underline;
}
.link-btn:hover { text-decoration: none }

/* Шторка формы: одна на все виды правок. */
.sheet {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgb(22 26 23 / 42%);
}
.sheet-box {
  width: min(520px, 100%); max-height: 88dvh; overflow-y: auto;
  background: var(--card); border-radius: 16px; padding: 18px 20px 20px;
  box-shadow: 0 18px 48px rgb(22 26 23 / 28%);
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.sheet-head h3 { margin: 0; font: 600 18px/1.25 var(--serif) }
.sheet-close { border: 0; background: none; font-size: 18px; color: var(--muted); padding: 4px 6px }
.sheet-close:hover { color: var(--ink) }
.fld { display: block; margin: 12px 0 }
.fld span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px }
.fld input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit;
}

/* Сводная оценка «Для жизни»: главный ответ на вопрос переехавшего. */
.home-box { margin: 14px 0 6px; padding: 12px; border: 1px solid var(--rule); border-radius: 14px; background: var(--bg) }
.home-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px }
.home-big {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 21px/1 var(--sans);
}
.home-score {
  flex: 0 0 auto; min-width: 32px; text-align: center; font: 700 15px/1 var(--sans);
  color: var(--ink-2);
}

/* Компактный ярлык для обзорного зума: без второй строки помещается вдвое
   больше названий, а на приближении подпись возвращается. */
.hood-labels.compact .hood-pill { padding: 4px 9px; font-size: 12px }
.hood-labels.compact .hood-pill span { display: none }