/* Laps Maps — оформлення повторює застосунок: зимова світла карта, «матові» панелі,
   чорні круглі кнопки праворуч, синій акцент #1769E8. */
:root {
  --bg: #E9F4FA;
  --ink: #132C3D;
  --muted: #5B6F7D;
  --line: rgba(19, 44, 61, .12);
  --accent: #1769E8;
  --warn: #C86A00;
  --glass: rgba(250, 253, 255, .8);
  --sheet: rgba(250, 253, 255, .96);
  --shadow: 0 6px 22px rgba(19, 44, 61, .16);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --gutter: 16px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
body {
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; opacity: .5; }
a { color: var(--accent); text-decoration: none; }
svg { width: 24px; height: 24px; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid rgba(23, 105, 232, .55); outline-offset: 2px; }

#map { position: fixed; inset: 0; }
.maplibregl-control-container { display: none; }
.maplibregl-canvas { outline: none; }

.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: var(--shadow);
}

/* Верхня панель: курорт і «Про карту» */
.topbar {
  position: fixed; z-index: 3;
  top: calc(var(--safe-top) + 10px);
  left: calc(var(--safe-left) + var(--gutter));
  right: calc(var(--safe-right) + var(--gutter));
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.chip {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; max-width: calc(100% - 58px);
  padding: 9px 16px 9px 13px; border-radius: 999px; text-align: left;
}
.chip-icon { color: var(--accent); width: 26px; height: 26px; }
.chip-text { display: flex; flex-direction: column; min-width: 0; }
.chip-text strong { font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-text small { font-size: 9px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.chip-chevron { width: 14px; height: 14px; }
.topbar .round { margin-left: auto; }

.round {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
}
.round.glass { width: 48px; height: 48px; }
.round.dark { background: #000; color: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .14); }
.round.dark:active, .chip:active, .pill:active { transform: scale(.96); }
#pitch-label { font-size: 21px; font-weight: 600; }
#compass { width: 28px; height: 28px; transition: transform .15s linear; }

.side-controls {
  position: fixed; z-index: 2;
  right: calc(var(--safe-right) + var(--gutter));
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px;
}
.bottom-controls {
  position: fixed; z-index: 2;
  left: calc(var(--safe-left) + var(--gutter));
  right: calc(var(--safe-right) + var(--gutter));
  bottom: calc(var(--safe-bottom) + 34px);
  display: flex; align-items: flex-end; justify-content: space-between;
  pointer-events: none;
}
.bottom-controls > * { pointer-events: auto; }
.pill {
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 18px 0 15px; border-radius: 999px;
  font-size: 15px; font-weight: 600;
}
.pill svg { width: 20px; height: 20px; }

.locating svg { animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: 1; } to { opacity: .35; } }

.credit {
  position: fixed; z-index: 1; margin: 0;
  left: calc(var(--safe-left) + 12px); right: calc(var(--safe-right) + 12px);
  bottom: calc(var(--safe-bottom) + 8px);
  font-size: 10px; color: #344C60; text-shadow: 0 0 3px #fff, 0 0 3px #fff;
  pointer-events: none;
}
.credit a { color: inherit; pointer-events: auto; }

/* Повідомлення під верхньою панеллю */
.notices {
  position: fixed; z-index: 3;
  top: calc(var(--safe-top) + 74px);
  left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100% - 2 * var(--gutter)));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.notice {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px; border-radius: 16px;
  font-size: 13px; pointer-events: auto;
}
.notice.busy { border-radius: 999px; padding: 8px 16px; }
.notice svg { width: 20px; height: 20px; }
.notice .warn { color: #F29100; }
.notice button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--accent); }
.spinner {
  width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid rgba(19, 44, 61, .2); border-top-color: var(--ink);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Аркуші: знизу на телефоні, панеллю ліворуч на широкому екрані */
.scrim { position: fixed; inset: 0; z-index: 4; background: rgba(19, 44, 61, .18); }
.sheet {
  position: fixed; z-index: 5;
  left: 0; right: 0; bottom: 0;
  max-height: calc(100% - var(--safe-top) - 40px);
  display: flex; flex-direction: column;
  background: var(--sheet);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 30px rgba(19, 44, 61, .18);
  padding-bottom: var(--safe-bottom);
  animation: rise .22s ease-out;
  touch-action: pan-y;
}
.sheet.list { height: calc(100% - var(--safe-top) - 40px); }
.sheet.detail { max-height: min(62%, 460px); }
@keyframes rise { from { transform: translateY(40px); opacity: 0; } }
.grip { flex: none; height: 22px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.grip::before { content: ""; width: 38px; height: 5px; border-radius: 3px; background: rgba(19, 44, 61, .22); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

@media (min-width: 760px) {
  .sheet {
    left: calc(var(--safe-left) + var(--gutter)); right: auto; bottom: auto;
    top: calc(var(--safe-top) + 80px);
    width: 380px; max-height: calc(100% - var(--safe-top) - 96px);
    border-radius: 20px; padding-bottom: 0;
    box-shadow: var(--shadow);
    animation-name: slide;
  }
  .sheet.list { height: auto; }
  .sheet.detail { max-height: calc(100% - var(--safe-top) - 96px); }
  @keyframes slide { from { transform: translateX(-16px); opacity: 0; } }
  .grip { display: none; }
  .sheet-head { padding-top: 16px; }
  .scrim { display: none; }
  body.sheet-open .notices { left: calc(50% + 200px); width: min(420px, calc(100% - 440px)); }
}
@media (max-width: 759px) {
  body.sheet-open .bottom-controls, body.sheet-open .credit { visibility: hidden; }
  body.sheet-list .side-controls { visibility: hidden; }
}
/* На сенсорних екранах :hover «залипає» на останньому натиснутому рядку. */
@media (hover: hover) {
  a:hover { text-decoration: underline; }
  .rows button:hover { background: rgba(23, 105, 232, .06); }
  .card .close:hover { background: rgba(19, 44, 61, .06); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet, #compass { animation: none; transition: none; }
}

.sheet-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 2px 20px 10px;
  background: var(--sheet);
}
.sheet-head h2 { flex: 1; margin: 0; font-size: 22px; line-height: 1.2; }
.done { color: var(--accent); font-weight: 600; font-size: 16px; padding: 8px 0 8px 8px; }
.search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 8px; padding: 0 12px; height: 40px; border-radius: 12px;
  background: rgba(19, 44, 61, .07); color: var(--muted);
}
.search svg { width: 18px; height: 18px; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: var(--ink); font-size: 16px; }
.search input::placeholder { color: var(--muted); }

.rows { list-style: none; margin: 0; padding: 0 0 12px; }
.rows button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 20px; text-align: left;
}
.rows li + li button { border-top: 1px solid var(--line); }
.rows .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rows .main strong { font-size: 16px; }
.rows .main span { font-size: 13px; color: var(--muted); }
.rows .aside { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rows .tile {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(23, 105, 232, .08); color: var(--accent);
}
.rows .tile svg { width: 26px; height: 26px; }
.rows .current { color: var(--accent); }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.empty { padding: 28px 24px; text-align: center; color: var(--muted); }
.footnote { padding: 4px 20px 20px; font-size: 13px; color: var(--muted); }
.footnote p { margin: 0 0 8px; }

/* Картка траси */
.card { padding: 4px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.card-top { display: flex; align-items: flex-start; gap: 12px; }
.card-top > div { flex: 1; min-width: 0; }
.card h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.card .kind { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; }
.card .kind svg { width: 18px; height: 18px; }
.card .close { display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -10px 0 0; border-radius: 50%; }
.card .name { margin: -6px 0 0; color: var(--muted); }
.card .length { display: flex; align-items: center; gap: 8px; }
.card .length strong { font-size: 17px; }
.card .length span { margin-left: auto; font-size: 12px; color: var(--muted); }
.card .length svg { width: 20px; height: 20px; }
.card .fact { display: flex; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.card .fact svg { width: 17px; height: 17px; margin-top: 1px; }
.card .fact.warn { color: var(--warn); }
.card hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--line); }
.card .source { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.card .official { font-size: 13px; }

.about { padding: 0 20px 24px; }
.about .lead { margin: 0; font-size: 16px; color: var(--muted); }
.about .muted { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.about h3 { margin: 20px 0 6px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.about p { margin: 0 0 8px; font-size: 14px; }

.noscript { position: fixed; inset: 0; z-index: 9; overflow: auto; padding: 32px var(--gutter); background: var(--bg); }
.noscript h1 { margin: 0 0 12px; }