/* Цвета берутся из темы Telegram; запасные нужны только вне Telegram. */
:root {
  --spare-bg: #ffffff;
  --spare-text: #1c1c1e;
  --spare-hint: #6d6d72;
  --spare-section: #f2f2f7;
  --spare-accent: #2481cc;
  --spare-danger: #d64545;
  color-scheme: light;

  --bg: var(--tg-theme-bg-color, var(--spare-bg));
  --text: var(--tg-theme-text-color, var(--spare-text));
  --hint: var(--tg-theme-hint-color, var(--spare-hint));
  --section: var(--tg-theme-secondary-bg-color, var(--spare-section));
  --button: var(--tg-theme-button-color, var(--spare-accent));
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, var(--spare-danger));
  --link: var(--tg-theme-link-color, var(--spare-accent));
  --line: rgba(128, 128, 128, .3);

  /* В полноэкранном режиме кнопки Telegram лежат поверх страницы: под
     системной областью (вырез, строка состояния) ещё полоса с «Закрыть». */
  --edge-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --edge-right: calc(max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px));
  --edge-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  --edge-left: calc(max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --spare-bg: #18181b;
    --spare-text: #f4f4f5;
    --spare-hint: #a1a1aa;
    --spare-section: #27272a;
    --spare-accent: #5aa7e6;
    --spare-danger: #ef6b6b;
    color-scheme: dark;
  }
}

:root[data-scheme="dark"] {
  --spare-bg: #18181b;
  --spare-text: #f4f4f5;
  --spare-hint: #a1a1aa;
  --spare-section: #27272a;
  --spare-accent: #5aa7e6;
  --spare-danger: #ef6b6b;
  color-scheme: dark;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  min-height: var(--tg-viewport-stable-height, 100vh);
  padding:
    calc(16px + var(--edge-top))
    calc(16px + var(--edge-right))
    calc(24px + var(--edge-bottom))
    calc(16px + var(--edge-left));
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 480px;
  margin: 0 auto;
}

.screen {
  display: grid;
  gap: 12px;
}

.screen.center {
  min-height: 60vh;
  align-content: center;
  text-align: center;
}

h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

p { margin: 0; }

.hint { color: var(--hint); }

.nick { overflow-wrap: anywhere; }

button {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  font-weight: 600;
  background: var(--button);
  color: var(--button-text);
  cursor: pointer;
}

button.secondary {
  background: var(--section);
  color: var(--text);
}

button:disabled { opacity: .6; cursor: default; }

.choices, .actions, form {
  display: grid;
  gap: 12px;
}

button.choice {
  display: grid;
  gap: 4px;
  text-align: left;
  background: var(--section);
  color: var(--text);
  font-weight: 400;
}

.choice-title { font-size: 18px; font-weight: 600; }
.choice-about { color: var(--hint); font-size: 14px; }

.field { display: grid; gap: 6px; }
.field-title { font-weight: 600; }
.field-hint { color: var(--hint); font-size: 13px; }

input[type="text"] {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  background: var(--section);
  color: var(--text);
}

input[type="text"]:focus {
  outline: 2px solid var(--button);
  outline-offset: -1px;
}

.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.check input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--button);
}

.error { color: var(--danger); font-size: 14px; }

.status {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--section);
  font-size: 14px;
}

.panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--section);
}

.panel dt { color: var(--hint); }
.panel dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

a { color: var(--link); }

.small { font-size: 13px; }

/* Карта во весь экран, под системной областью и кнопками Telegram; поверх неё
   свои элементы, отодвинутые от краёв на те же отступы, что у страницы. */
.map-screen {
  position: fixed;
  inset: 0;
  display: block;
  z-index: 0;
}

.map-view,
.map-off {
  position: absolute;
  inset: 0;
}

.map-view {
  z-index: 0;
  background: var(--section);
}

.map-view.leaflet-container {
  background: var(--section);
  font: inherit;
}

.map-off {
  z-index: 1;
  display: grid;
  gap: 12px;
  align-content: center;
  padding:
    calc(72px + var(--edge-top))
    calc(16px + var(--edge-right))
    calc(24px + var(--edge-bottom))
    calc(16px + var(--edge-left));
  text-align: center;
  background: var(--bg);
}

.map-top {
  position: absolute;
  z-index: 2;
  top: calc(12px + var(--edge-top));
  left: calc(12px + var(--edge-left));
  right: calc(12px + var(--edge-right));
  display: grid;
  justify-items: start;
  gap: 8px;
  pointer-events: none;
}

.map-top > * { pointer-events: auto; }

.map-chip {
  width: auto;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  font-size: 15px;
  font-weight: 600;
}

.map-me {
  text-align: left;
  overflow-wrap: anywhere;
}

.map-note {
  font-size: 14px;
  font-weight: 400;
}

.map-where {
  justify-self: stretch;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.map-where-title { font-weight: 600; }
.map-where-text { font-size: 14px; color: var(--hint); }

.map-where-action {
  margin-top: 4px;
  padding: 10px 14px;
}

/* В картинке логотипа отступы от края уже есть: условия Яндекса своих не просят. */
.map-logo {
  position: absolute;
  z-index: 2;
  left: var(--edge-left);
  bottom: var(--edge-bottom);
  line-height: 0;
}

.map-logo img { display: block; }

.map-corner {
  position: absolute;
  z-index: 2;
  right: calc(12px + var(--edge-right));
  bottom: calc(12px + var(--edge-bottom));
  display: grid;
  justify-items: end;
  gap: 8px;
  pointer-events: none;
}

.map-corner > * { pointer-events: auto; }

.map-open { text-decoration: none; }

.map-accuracy {
  fill: var(--button);
  fill-opacity: .12;
  stroke: var(--button);
  stroke-opacity: .45;
}

.map-point {
  fill: var(--button);
  fill-opacity: 1;
  stroke: #ffffff;
  stroke-opacity: 1;
}