/*
 * Интерфейс карты.
 *
 * Нарочно повторяет привычки Google Maps: белая поисковая строка с тенью в левом верхнем
 * углу, миниатюра смены вида в левом нижнем, зум в правом нижнем, карточка места под
 * поиском. Это не подражание ради подражания — человек, открывший карту, уже знает, где что
 * лежит, и объяснять ему ничего не нужно.
 *
 * Ширины и отступы держатся на одном наборе значений внизу файла: на телефоне панель
 * становится во всю ширину, а карточка — нижним листом, который тянут пальцем.
 */

:root {
  --ui: "Google Sans Text", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --panel: 400px;
  --shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 2px 6px 2px rgba(60, 64, 67, .15);
  --shadow-hi: 0 1px 3px rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
  --blue: #1a73e8;
  --ink: #202124;
  --ink-soft: #5f6368;
  --line: #e8eaed;
  --safe: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: var(--ui); color: var(--ink);
  background: #e8eaed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: grab; touch-action: none; outline: none;
}
#map.grabbing { cursor: grabbing; }

svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

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

#panel {
  position: absolute; top: 12px; left: 12px; width: var(--panel); max-width: calc(100vw - 24px);
  z-index: 5; display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
#panel > * { pointer-events: auto; }

#searchbar {
  display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 6px;
  background: #fff; border-radius: 8px; box-shadow: var(--shadow);
}
#searchbar input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  font: 400 16px var(--ui); color: var(--ink); padding: 0 6px;
}
#searchbar input::placeholder { color: #80868b; }

.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: 50%;
  background: transparent; color: #5f6368; cursor: pointer;
}
.icon:hover { background: rgba(60, 64, 67, .08); }
.icon.blue { color: var(--blue); }
.icon.ghost { color: #5f6368; }
.divider { width: 1px; height: 26px; background: var(--line); margin: 0 2px; }

#suggest {
  background: #fff; border-radius: 8px; box-shadow: var(--shadow); overflow: hidden;
  max-height: min(60vh, 460px); overflow-y: auto;
}
.sug {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid #f1f3f4;
}
.sug:last-child { border-bottom: 0; }
.sug:hover, .sug.on { background: #f1f3f4; }
.sug .mark {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f1f3f4; color: #5f6368;
}
.sug .mark svg { width: 17px; height: 17px; }
.sug .txt { min-width: 0; }
.sug .t { font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug .s { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#about {
  background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 16px 18px 14px;
  font-size: 13.5px; line-height: 19px; color: var(--ink-soft);
}
#about p { margin: 0 0 12px; }
#about ul { margin: 0 0 12px; padding-left: 18px; }
#about li { margin: 3px 0; }
#about a { color: var(--blue); }
.about-h { font: 400 19px/24px "Google Sans", var(--ui); color: var(--ink); margin-bottom: 8px; }
.about-h2 { font: 500 12px var(--ui); color: #80868b; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 4px; }

/* ---------------------------------------------------------------- карточка места */

#card, #route {
  background: #fff; border-radius: 8px; box-shadow: var(--shadow); position: relative;
}
#card { padding: 18px 18px 14px; }
#card-close { position: absolute; top: 8px; right: 8px; }
#card-title { font: 400 22px/28px "Google Sans", var(--ui); padding-right: 34px; }
#card-sub { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
#card-coords { color: #80868b; font-size: 12.5px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px;
  border-radius: 18px; border: 1px solid #dadce0; background: #fff; color: var(--blue);
  font: 500 14px var(--ui); cursor: pointer;
}
.pill:hover { background: #f8f9fa; }
.pill svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.pill.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.pill.primary:hover { background: #1765cc; }

/* ---------------------------------------------------------------- маршрут */

.route-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 4px; border-bottom: 1px solid var(--line); }
.route-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.field { display: flex; align-items: center; gap: 10px; background: #f1f3f4; border-radius: 8px; padding: 0 12px; height: 40px; }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 15px var(--ui); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.dot.a { background: #fff; border: 3px solid #9aa0a6; }
.dot.b { background: #ea4335; border: 3px solid #ea4335; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }

#route-sum { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sum-main { display: flex; align-items: baseline; gap: 10px; }
.sum-main b { font: 500 22px/26px "Google Sans", var(--ui); color: #188038; }
.sum-main span { color: var(--ink-soft); font-size: 15px; }
.sum-note { color: var(--ink-soft); font-size: 13px; margin-top: 3px; }

#route-steps { max-height: min(48vh, 420px); overflow-y: auto; }
.step { display: flex; gap: 14px; padding: 11px 18px; border-bottom: 1px solid #f1f3f4; cursor: pointer; }
.step:hover { background: #f8f9fa; }
.step .ic { width: 22px; flex: 0 0 22px; color: #5f6368; padding-top: 1px; }
.step .ic svg { width: 20px; height: 20px; }
.step .tx { font-size: 14.5px; line-height: 20px; }
.step .ds { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.hint { padding: 14px 18px; color: var(--ink-soft); font-size: 13.5px; line-height: 19px; }

/* ---------------------------------------------------------------- углы карты */

#layers {
  position: absolute; left: 12px; bottom: calc(24px + var(--safe)); z-index: 5;
  width: 92px; height: 92px; padding: 0; border: 2px solid #fff; border-radius: 8px;
  box-shadow: var(--shadow); cursor: pointer; overflow: hidden; background: #cfd8dc;
}
#layers-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; }
#layers-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 4px 6px;
  font: 500 12px var(--ui); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}
#layers:hover { box-shadow: var(--shadow-hi); }

#controls {
  position: absolute; right: 12px; bottom: calc(24px + var(--safe)); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.round, .zoom button {
  width: 40px; height: 40px; border: 0; border-radius: 4px; background: #fff;
  box-shadow: var(--shadow); color: #5f6368; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.round.wide { border-radius: 20px; width: 44px; font: 500 13px var(--ui); }
.round:hover, .zoom button:hover { background: #f1f3f4; }
.zoom { display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow); }
.zoom button { box-shadow: none; border-radius: 0; }
.zoom button + button { border-top: 1px solid var(--line); }

#scale {
  position: absolute; right: 64px; bottom: calc(28px + var(--safe)); z-index: 4;
  display: flex; align-items: center; gap: 8px;
  font: 400 11px var(--ui); color: #3c4043; text-shadow: 0 0 3px #fff, 0 0 3px #fff;
  pointer-events: none;
}
#scale-bar { display: block; height: 6px; border: 2px solid #3c4043; border-top: 0; opacity: .8; }

#credit {
  position: absolute; right: 8px; bottom: calc(4px + var(--safe)); z-index: 4;
  font: 400 11px var(--ui); color: #5f6368; background: rgba(255, 255, 255, .72);
  padding: 2px 6px; border-radius: 3px;
}
#credit a { color: #3c4043; }

/* На снимке тёмный текст пропадает: линейка и подпись переворачиваются в белое. */
body[data-mode="satellite"] #scale { color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 0 4px rgba(0, 0, 0, .7); }
body[data-mode="satellite"] #scale-bar { border-color: #fff; }
body[data-mode="satellite"] #credit { background: rgba(0, 0, 0, .45); color: #e8eaed; }
body[data-mode="satellite"] #credit a { color: #fff; }

#ctxmenu {
  position: absolute; z-index: 8; background: #fff; border-radius: 6px; box-shadow: var(--shadow-hi);
  padding: 6px 0; min-width: 210px; font-size: 14px;
}
#ctxmenu div { padding: 8px 16px; cursor: pointer; }
#ctxmenu div:hover { background: #f1f3f4; }
#ctxmenu .sep { height: 1px; background: var(--line); margin: 6px 0; padding: 0; cursor: default; }
#ctxmenu .head { color: #80868b; font-size: 12px; cursor: default; }
#ctxmenu .head:hover { background: transparent; }

/* ---------------------------------------------------------------- загрузка */

#boot {
  position: absolute; inset: 0; z-index: 20; background: #f2efe9;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink-soft); font-size: 14px; transition: opacity .35s;
}
#boot.gone { opacity: 0; pointer-events: none; }
.spinner {
  width: 22px; height: 22px; border: 3px solid #dadce0; border-top-color: var(--blue);
  border-radius: 50%; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- телефон */

@media (max-width: 700px) {
  :root { --panel: 100%; }
  #panel { top: 8px; left: 8px; right: 8px; width: auto; }
  #searchbar { height: 46px; }

  /* Карточка и маршрут уезжают вниз листом: сверху остаётся только поиск и сама карта. */
  #card, #route {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    border-radius: 14px 14px 0 0; box-shadow: 0 -2px 12px rgba(0, 0, 0, .22);
    padding-bottom: calc(10px + var(--safe)); max-height: 70vh; overflow-y: auto; z-index: 7;
  }
  #card::before, #route::before {
    content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
    background: #dadce0; margin: 8px auto 4px;
  }
  #route-steps { max-height: 42vh; }
  #layers { width: 64px; height: 64px; bottom: calc(16px + var(--safe)); }
  #layers-name { font-size: 10.5px; padding: 3px 2px 4px; }
  #controls { bottom: calc(16px + var(--safe)); gap: 10px; }
  #scale { right: 60px; bottom: calc(20px + var(--safe)); }
  #credit { font-size: 10px; }
  body.sheet #controls, body.sheet #layers, body.sheet #scale, body.sheet #credit { display: none; }
}