:root {
  color-scheme: light;
  --bg: #f6f8f5;
  --surface: #ffffff;
  --surface-2: #f1f4ef;
  --border: #e3e7df;
  --text: #1f2a1c;
  --text-dim: #5e6a58;
  --accent: #2f6b3a;
  --accent-2: #4a8f5a;
  --accent-soft: #e7f1e8;
  --warn: #c97a1e;
  --danger: #b04545;
  --pos: #2f7d3a;
  --neg: #a14a3a;
  --shadow: 0 1px 2px rgba(20, 30, 15, 0.04), 0 4px 16px rgba(20, 30, 15, 0.06);
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 160ms ease;
}

/* Light theme is fixed — no prefers-color-scheme: dark override, so the
   site stays white-and-green regardless of the user's OS dark-mode
   setting. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Use the dynamic viewport unit on browsers that support it so the iOS
     bottom toolbar doesn't cause content to overflow the visible area. */
  min-height: 100dvh;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 1.1rem; }
h2 { font-size: 0.92rem; color: var(--text); }
h3 { font-size: 0.92rem; }

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.85rem;
  transition: background var(--transition), border-color var(--transition);
}
button:hover { background: var(--surface-2); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============ TOP BAR ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1200;
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.brand-text { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.brand h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-actions { flex-shrink: 0; }
.brand .logo {
  width: 38px;
  height: 38px;
  display: inline-block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.06);
  transform: rotate(-3deg);
  transition: transform 240ms cubic-bezier(.2,.9,.3,1.2);
  flex-shrink: 0;
}
.brand .logo:hover { transform: rotate(3deg) scale(1.05); }
.brand .logo svg { display: block; width: 100%; height: 100%; }
.brand h1 { line-height: 1.1; }
.tagline { margin: 0; font-size: 0.78rem; color: var(--text-dim); }

.topbar-actions { display: flex; align-items: center; gap: 0.6rem; }

.btn-icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  padding: 0;
  font-weight: 600;
  color: var(--text-dim);
}

.lang-switch {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
}
.lang-btn {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-weight: 600;
}
.lang-btn.active {
  background: var(--accent);
  color: white;
}
.lang-btn:hover:not(.active) { background: var(--surface); }

/* ============ LAYOUT ============ */
.layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 0;
  overflow: hidden;
}

.sidebar {
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 0.65rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  height: 100%;
}

/* Sidebar header (with close button) — shown only on mobile */
.sidebar-header { display: none; }

.content-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.map-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
}

#map {
  width: 100%;
  height: 100%;
  min-height: 360px;
  background: var(--surface-2);
}

.sidebar-toggle {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 600;
  display: none;
  align-items: center;
  gap: 0.55rem;
  height: 48px;
  padding: 0 1.15rem 0 0.95rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow:
    0 6px 18px rgba(28, 66, 38, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.sidebar-toggle:hover { background: var(--accent-2); }
.sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: 0 4px 14px rgba(28, 66, 38, 0.32), 0 0 0 3px rgba(47, 107, 58, 0.4);
}
.sidebar-toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-toggle .icon-open { display: none; }
.sidebar-toggle.open { background: #34302a; }
.sidebar-toggle.open:hover { background: #463f37; }
.sidebar-toggle.open .icon-closed { display: none; }
.sidebar-toggle.open .icon-open { display: block; }

@keyframes sb-pulse {
  0%   {
    transform: scale(1);
    box-shadow:
      0 6px 18px rgba(28, 66, 38, 0.45),
      0 2px 4px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  10%  {
    transform: scale(1.12);
    box-shadow:
      0 14px 34px rgba(28, 66, 38, 0.7),
      0 0 0 6px rgba(47, 107, 58, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  28%  {
    transform: scale(1);
    box-shadow:
      0 6px 18px rgba(28, 66, 38, 0.45),
      0 2px 4px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 6px 18px rgba(28, 66, 38, 0.45),
      0 2px 4px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}
.sidebar-toggle.attention {
  animation: sb-pulse 1.8s ease-out 4;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-toggle.attention { animation: none; }
}

/* ============ CARDS ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.card h2 { margin-bottom: 0.45rem; font-size: 0.85rem; }

.hint { font-size: 0.7rem; color: var(--text-dim); }

.credits {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 0.25rem;
}
.credits p { margin: 0; font-size: 0.72rem; color: var(--text-dim); }

/* ============ SIDEBAR SCROLL HINT ============ */
.scroll-hint {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 0 6px 0;
  margin: 0 0 -0.4rem 0;
  opacity: 0;
  transition: opacity 240ms ease;
  z-index: 5;
}
.sidebar.has-overflow .scroll-hint {
  opacity: 1;
}

.scroll-arrow {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent);
  color: white;
  border: 0 none;
  outline: none;
  border-radius: 999px;
  padding: 0.35rem 0.8rem 0.35rem 0.9rem;
  font-size: 0.76rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(28, 66, 38, 0.32);
  animation: scroll-bounce 1.5s ease-in-out infinite;
  transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.scroll-arrow:hover {
  transform: scale(1.05);
  background: var(--accent-2);
  animation-play-state: paused;
}
.scroll-arrow:focus-visible {
  outline: none;
  box-shadow: 0 2px 6px rgba(28, 66, 38, 0.32), 0 0 0 3px rgba(47, 107, 58, 0.35);
}
.scroll-arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}
.scroll-arrow-label {
  white-space: nowrap;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-arrow { animation: none; }
}

/* ============ STAT GRID ============ */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.stat {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.stat-label {
  font-size: 0.66rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat-value { font-size: 0.95rem; font-weight: 600; }
.stat-value.pos { color: var(--pos); }
.stat-value.neg { color: var(--neg); }

/* ============ FORM ============ */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-bottom: 0.5rem;
}
.field span {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-weight: 500;
}
.field input {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition);
  font-size: 0.85rem;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.meta-row {
  display: flex;
  gap: 0.35rem;
  margin: -0.1rem 0 0.5rem 0;
  flex-wrap: wrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
}
.chip.chip-warn {
  background: #fef0d6;
  color: #a35f10;
}
.chip.chip-danger {
  background: #fbe1de;
  color: #8a2c20;
}
.day-warning {
  margin: -0.1rem 0 0.55rem 0;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 500;
}
.day-warning.level-hard {
  background: #fff5e3;
  color: #6b3d05;
  border: 1px solid #f3d99a;
}
.day-warning.level-impossible {
  background: #fcebe8;
  color: #6e1f15;
  border: 1px solid #f0b7af;
}
.day-warning strong { display: block; font-weight: 700; margin-bottom: 2px; }
.day-warning .hint { display: block; color: var(--text-dim); font-size: 0.72rem; margin-top: 4px; }

.split-mode {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem 0.45rem 0.65rem;
  margin: 0 0 0.55rem 0;
}
.split-mode legend {
  font-size: 0.7rem;
  color: var(--text-dim);
  padding: 0 0.3rem;
}
.split-mode label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  padding: 0.15rem 0;
  cursor: pointer;
}

/* Horizontal variant — both options on one line under the legend */
.split-mode.mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.split-mode.mode-row legend { flex: 0 0 100%; }
.split-mode.mode-row label  { flex: 0 0 auto; }

.action-row {
  display: flex;
  gap: 0.5rem;
}
.btn-secondary {
  flex: 1;
  font-size: 0.78rem;
  padding: 0.45rem 0.6rem;
  color: var(--text-dim);
}

.btn-snap {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: #f1e9d8;
  color: #6b3d05;
  border: 1px solid #e3d4ad;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-snap:hover { background: #ebe1c6; }
.snap-icon { font-size: 0.95rem; line-height: 1; }

/* Snap-to-lodgings dialog */
.snap-dialog { max-width: 640px; width: 92vw; }
.snap-dialog article { padding: 1.2rem 1.4rem 1rem 1.4rem; max-height: 84vh; overflow-y: auto; }
.snap-dialog h2 { margin-bottom: 0.4rem; }
.snap-intro { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 0.8rem 0; }
.snap-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.snap-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.snap-table th {
  background: var(--surface-2);
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
.snap-table td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.snap-table tbody tr:last-child td { border-bottom: none; }
.snap-table .snap-day { font-weight: 700; color: var(--accent); width: 36px; }
.snap-table .snap-km { font-variant-numeric: tabular-nums; width: 90px; }
.snap-table .snap-pos { color: var(--pos); font-weight: 600; }
.snap-table .snap-neg { color: var(--neg); font-weight: 600; }
.snap-table .snap-diff { font-size: 0.74rem; margin-left: 4px; }
.snap-table .snap-row-active { background: rgba(241, 233, 216, 0.5); }
.snap-table .snap-place strong { color: #1c4226; }
.snap-table .snap-off { font-size: 0.72rem; color: #a35f10; }
.snap-table .snap-none { color: var(--text-dim); font-style: italic; font-size: 0.78rem; }
.snap-table .snap-fixed { color: var(--text-dim); font-size: 0.78rem; }

.snap-empty {
  margin: 0.8rem 0 0 0;
  padding: 0.7rem 0.85rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.82rem;
}

.snap-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.9rem; }
.snap-apply {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  padding: 0.5rem 1.1rem;
  font-weight: 600;
}
.snap-apply:hover { background: var(--accent-2); border-color: var(--accent-2); }
.snap-apply:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.btn-primary:disabled {
  opacity: 0.65;
  cursor: progress;
}

.pdf-card {
  background: linear-gradient(135deg, #1c4226 0%, #2f6b3a 100%);
  border-radius: var(--radius);
  padding: 3px;
  margin-top: 0.55rem;
  box-shadow: 0 2px 8px rgba(28, 66, 38, 0.25), 0 1px 2px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pdf-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px);
  pointer-events: none;
}

.pdf-btn-big {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #ffffff;
  color: #1c4226;
  border: none;
  border-radius: 9px;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
  text-align: left;
  font-weight: 600;
  transition: transform 120ms ease, box-shadow 120ms ease;
  position: relative;
  z-index: 1;
}
.pdf-btn-big:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  background: #ffffff;
}
.pdf-btn-big:active { transform: translateY(0); }
.pdf-btn-big:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.pdf-btn-icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #d63a3a, #b04545);
  color: white;
  border-radius: 7px;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
/* GPX button uses a teal/blue icon to distinguish from the red PDF one */
.pdf-btn-icon.gpx-icon {
  background: linear-gradient(135deg, #2c7fb8, #1e5f8c);
}

.pdf-btn-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pdf-btn-title { font-size: 0.86rem; font-weight: 700; line-height: 1.15; }
.pdf-btn-sub { font-size: 0.7rem; color: var(--text-dim); font-weight: 500; line-height: 1.2; }

/* ============ STAGES ============ */
.stages-card { padding: 0.6rem 0.65rem 0.7rem 0.65rem; }
.stages-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stage {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.stage:hover { background: var(--accent-soft); }
.stage.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.stage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.3rem;
}
.stage-title {
  font-weight: 600;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.stage-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.stage-date {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.stage-stats {
  display: flex;
  gap: 0.8rem;
  font-size: 0.8rem;
}
.stage-stats span { display: inline-flex; align-items: center; gap: 0.2rem; }
.stage-stats .v-pos { color: var(--pos); font-weight: 600; }
.stage-stats .v-neg { color: var(--neg); font-weight: 600; }
.stage-stats .v-dist { font-weight: 600; }

/* "from X → to Y" row showing the day's start + end POI. */
.stage-route {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text);
  flex-wrap: wrap;
}
.stage-route .sr-from,
.stage-route .sr-to {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-weight: 600;
}
.stage-route .sr-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stage-route .sr-arrow {
  color: var(--text-dim);
  font-weight: 700;
  flex-shrink: 0;
}

.stage-weather {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.weather-icon { font-size: 1.05rem; }
.weather-temp { font-weight: 600; color: var(--text); }
.weather-temp .lo { color: var(--text-dim); font-weight: 400; }
.weather-precip { color: #3a78c2; }

/* ============ PROFILE ============ */
.profile-wrap {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0;
  height: 270px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 100;
}

/* Shorter laptop viewports (e.g. 13" MacBook with 800-ish px usable height)
   — shrink the profile so the sidebar and the floating "drag" pill at the
   top of the chart stay visible. Desktop layout only (≥ 901px wide). */
@media (min-width: 901px) and (max-height: 820px) {
  .profile-wrap { height: 220px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .profile-wrap { height: 180px; }
}
/* Drag-hint pill — sits inside the elevation profile area instead of a
   dedicated header bar, so the chart can use the full vertical space. */
.profile-drag-pill {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b3d05;
  background: rgba(255, 245, 227, 0.94);
  border: 1px solid #e3c47b;
  border-radius: 999px;
  padding: 0.18rem 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
}
.profile-drag-pill .pdp-icon { font-size: 0.85rem; line-height: 1; }
@media (max-width: 700px) {
  .profile-drag-pill {
    font-size: 0.66rem;
    padding: 0.12rem 0.55rem;
    top: 4px;
  }
}

.profile-canvas-wrap {
  flex: 1;
  position: relative;
  min-height: 0;
  /* Top padding pushes the canvas down so waypoint icons/labels at the
     top of the chart don't visually crowd the map above. */
  padding: 14px 0.25rem 0.25rem 0.25rem;
  overflow-x: hidden;
  overflow-y: hidden;
}
.profile-canvas-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
#profileCanvas {
  width: 100% !important;
  height: 100% !important;
  cursor: crosshair;
  touch-action: pan-x;
}

/* Cut-handle overlays — invisible touch targets sitting on top of the
   canvas-drawn handles. Centered on each cut's x position by JS. */
.cut-handles {
  position: absolute;
  inset: 0;
  pointer-events: none; /* the container itself doesn't capture events */
}
.cut-handle {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  /* The visible handle on the canvas sits ~9 px from the top of the
     chartArea; we anchor 22 px above that so the 44 px touch box is
     centered vertically on it. */
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
  background: transparent;
  border-radius: 50%;
}
/* Subtle visible ring when actively dragging — purely affordance */
.cut-handle.dragging {
  background: rgba(201, 122, 30, 0.18);
}

/* On phones the chart needs more horizontal room to read individual
   features. Make the inner wider than the viewport and let the wrap
   scroll horizontally; user pans with one finger. */
@media (max-width: 700px) {
  .profile-canvas-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .profile-canvas-inner {
    width: 1400px;
    min-width: 1400px;
  }
  .profile-canvas-wrap::-webkit-scrollbar { height: 6px; }
  .profile-canvas-wrap::-webkit-scrollbar-thumb {
    background: rgba(28, 66, 38, 0.35);
    border-radius: 3px;
  }
}

/* Horizontal-scroll hint badge */
.scroll-hint-horiz {
  display: none;
  position: absolute;
  top: 40px;
  right: 10px;
  z-index: 6;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  background: rgba(28, 66, 38, 0.92);
  color: white;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: opacity 380ms ease;
}
.scroll-hint-horiz .shh-arrow {
  display: inline-block;
  font-weight: 800;
  animation: shh-bounce 1.6s ease-in-out infinite;
}
.scroll-hint-horiz .shh-arrow:last-child { animation-delay: 0.2s; }
.scroll-hint-horiz.dismissed { opacity: 0; }
@keyframes shh-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}
@media (max-width: 700px) {
  .scroll-hint-horiz.hint-active { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint-horiz .shh-arrow { animation: none; }
}

.drag-tooltip {
  position: absolute;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0.5rem 0.7rem;
  font-size: 0.78rem;
  pointer-events: none;
  display: none;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--text);
  min-width: 230px;
}
.drag-tooltip.show { display: block; }
.drag-tooltip .dt-block { padding: 0.15rem 0; }
.drag-tooltip .dt-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.drag-tooltip .dt-stats {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
}
.drag-tooltip .dt-dist {
  font-weight: 700;
  font-size: 0.95rem;
}
.drag-tooltip .dt-asc { color: var(--pos); font-weight: 600; }
.drag-tooltip .dt-desc { color: var(--neg); font-weight: 600; }
.drag-tooltip .dt-divider {
  height: 1px;
  background: var(--border);
  margin: 0.3rem -0.2rem;
}
.drag-tooltip .dt-total {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.72rem;
}
.drag-tooltip .dt-total .dt-label { color: var(--text-dim); }
.drag-tooltip .dt-total .dt-val { font-weight: 600; }
.drag-tooltip .dt-prev { color: var(--accent); }
.drag-tooltip .dt-next { color: var(--warn); }
.drag-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--surface);
  filter: drop-shadow(0 -1px 0 var(--border));
}

/* ============ LANDMARKS ============ */
.landmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  line-height: 1;
}
.landmark.peak { background: #2f6b3a; }
.landmark.pass { background: #c97a1e; }
.landmark.hut { background: #7a5230; }
.landmark.town { background: #4276b8; }
.landmark.village { background: #4276b8; }
.landmark.monument { background: #7a4ab0; }
.landmark.cape { background: #b04545; }

/* ---- "Save area for offline" Leaflet control (leaflet.offline) ---- */
.leaflet-bar .savetiles {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1c4226;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}
.leaflet-bar .savetiles:hover { background: #f4f6f1; }

/* ---- "My location" Leaflet control ---- */
.locate-control { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); }
.locate-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: none;
  color: #1f2a1c;
  cursor: pointer;
  padding: 0;
}
.locate-btn:hover { background: #f4f6f1; }
.locate-btn.locate-loading {
  color: #2f6b3a;
  animation: locate-spin 1.2s linear infinite;
}
@keyframes locate-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- User location marker (blue pulsing dot) ---- */
.user-loc {
  position: relative;
  width: 22px;
  height: 22px;
}
.user-loc-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: #1e6dd0;
  border: 2.5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.user-loc-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: rgba(58, 139, 255, 0.45);
  border-radius: 50%;
  animation: user-loc-pulse 1.8s ease-out infinite;
}
@keyframes user-loc-pulse {
  0%   { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .user-loc-pulse { animation: none; }
}

/* ---- Start / Finish endpoint markers ---- */
.endpoint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  line-height: 1;
}
.endpoint.endpoint-start { background: #2f6b3a; }
.endpoint.endpoint-finish { background: #1a1a1a; }
.endpoint svg { width: 20px; height: 20px; display: block; }

/* ---- Lodgings (huts/hotels/shelters/towns to sleep) ---- */
.lodging {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  line-height: 1;
}
.lodging svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
  display: block;
}

.lodging-tooltip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  box-shadow: var(--shadow);
}

.lodging-popup { font-size: 13px; line-height: 1.45; min-width: 180px; }
.lodging-popup .lp-name {
  font-weight: 700;
  color: #1c4226;
  font-size: 14px;
  margin-bottom: 2px;
}
.lodging-popup .lp-meta { color: #5e6a58; font-size: 12px; margin-bottom: 4px; }
.lodging-popup .lp-off { color: #c97a1e; }
.lodging-popup .lp-phone {
  display: inline-block;
  margin-top: 2px;
  color: #2f6b3a;
  font-weight: 600;
  text-decoration: none;
}
.lodging-popup .lp-phone:hover { text-decoration: underline; }
.lodging-popup .lp-note { color: #5e6a58; font-size: 11px; font-weight: 400; }
.lodging-popup .lp-photo {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
  display: block;
}
.lodging-popup .lp-desc {
  font-size: 12px;
  color: #38423a;
  margin-top: 4px;
  line-height: 1.4;
}
.lodging-popup .lp-badges {
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.lodging-popup .lp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(30, 138, 74, 0.15);
  font-size: 11px;
  line-height: 1;
}
/* Support markers — green to differentiate from lodgings */
.lodging.support {
  font-size: 11px;
  line-height: 1;
}
/* Water markers — smaller and bluer; there are ~95 along the route
   so we shrink them to keep the trail readable when the filter is on. */
.lodging.water {
  width: 18px;
  height: 18px;
  border-width: 1.5px;
}
.lodging.water svg { width: 10px; height: 10px; }
.lodging-popup .lp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.lodging-popup .lp-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(201, 122, 30, 0.15);
  color: #8a5410;
}
.lodging-popup .lp-tag.warn { background: rgba(201, 122, 30, 0.2); color: #7a4810; }

/* POI filter chips — top-left of the map, below Leaflet zoom controls. */
.poi-filters {
  position: absolute;
  top: 80px;
  left: 10px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.poi-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  opacity: 0.55;
  transition: opacity 120ms ease, box-shadow 120ms ease;
}
.poi-filter:hover { opacity: 0.85; }
.poi-filter.active { opacity: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.poi-filter .pf-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.pf-dot-hut { background: #7a5230; }
.pf-dot-support { background: #1e8a4a; }
.pf-dot-water { background: #1e7fb8; }
@media (max-width: 700px) {
  .poi-filters { top: 70px; left: 8px; }
  .poi-filter { font-size: 11px; padding: 3px 8px 3px 5px; }
}

.landmark-label {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.74rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.landmark-label .ele {
  color: var(--text-dim);
  font-weight: 500;
  margin-left: 4px;
}

/* ============ HELP DIALOG ============ */
.help-dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  background: transparent;
  max-width: 480px;
  width: 90vw;
}
.help-dialog::backdrop { background: rgba(10, 18, 8, 0.45); }
.help-dialog article {
  background: var(--surface);
  color: var(--text);
  padding: 1.2rem 1.4rem 1rem 1.4rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.help-dialog ol { padding-left: 1.2rem; margin: 0.6rem 0 1rem 0; }
.help-dialog li { margin: 0.35rem 0; font-size: 0.88rem; }
.help-dialog button {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  padding: 0.45rem 1.2rem;
  float: right;
}

/* ============ TOAST ============ */
.toast {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--surface);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  box-shadow: var(--shadow);
}
.toast.show { opacity: 0.95; }

/* ============ LEAFLET TWEAKS ============ */
.leaflet-container { font-family: inherit; }
.stage-tooltip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  box-shadow: var(--shadow);
}

/* ============ PAGE FOOTER ============ */
.page-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.5rem 1rem;
  min-height: 38px;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--text-dim);
  flex-wrap: wrap;
  position: relative;
  z-index: 50;
  flex-shrink: 0;
}
.page-footer strong { color: var(--text); }
.page-footer .pf-handle { color: var(--text-dim); font-style: italic; margin-left: 2px; }
.page-footer .pf-sep { color: var(--border); font-weight: 700; }
.page-footer .pf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  text-decoration: none;
  transition: color 140ms;
}
.page-footer .pf-link strong { color: #d63a3a; }
.page-footer .pf-link:hover strong { text-decoration: underline; }
.page-footer .pf-desc { color: var(--text-dim); }
.page-footer .pf-kofi {
  margin-left: 0.4rem;
  background: #29abe0; /* Ko-fi blue */
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
  transition: background 140ms, transform 100ms;
}
.page-footer .pf-kofi:hover { background: #1f8cba; }
.page-footer .pf-kofi:active { transform: scale(0.97); }

/* ============ DESKTOP SIZING (un-compresses the compact mobile baseline) ============ */
@media (min-width: 901px) {
  .sidebar { padding: 0.85rem; gap: 0.85rem; }
  .card { padding: 0.95rem; }
  .card h2 { font-size: 0.92rem; margin-bottom: 0.6rem; }
  .card-header { margin-bottom: 0.6rem; }

  .stat-grid { gap: 0.55rem; }
  .stat { padding: 0.55rem 0.7rem; gap: 2px; }
  .stat-label { font-size: 0.7rem; }
  .stat-value { font-size: 1.05rem; }

  .field { gap: 0.3rem; margin-bottom: 0.7rem; }
  .field span { font-size: 0.78rem; }
  .field input { padding: 0.55rem 0.7rem; font-size: 0.9rem; }

  .meta-row { gap: 0.4rem; margin: -0.2rem 0 0.8rem 0; }

  .split-mode { padding: 0.55rem 0.75rem 0.65rem 0.75rem; margin: 0 0 0.8rem 0; }
  .split-mode legend { font-size: 0.74rem; }
  .split-mode label { font-size: 0.85rem; gap: 0.5rem; padding: 0.2rem 0; }

  .pdf-card { padding: 4px; margin-top: 0.75rem; }
  .pdf-btn-big { padding: 0.85rem 1rem; gap: 0.8rem; }
  .pdf-btn-icon { width: 36px; height: 36px; border-radius: 8px; font-size: 1.2rem; }
  .pdf-btn-title { font-size: 0.92rem; }
  .pdf-btn-sub { font-size: 0.72rem; }
}

/* ============ MOBILE BANNER ============ */
.mobile-banner {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  background: linear-gradient(135deg, #1c4226, #2f6b3a);
  color: white;
  font-size: 0.78rem;
  font-weight: 500;
  position: relative;
  z-index: 900;
  flex-shrink: 0;
}
.mobile-banner .mb-icon { font-size: 1rem; line-height: 1; }
.mobile-banner .mb-text { flex: 1; }
.mobile-banner .mb-close {
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.mobile-banner .mb-close svg { width: 14px; height: 14px; }
.mobile-banner .mb-close:hover { background: rgba(255, 255, 255, 0.28); }
@media (max-width: 900px) {
  .mobile-banner:not([hidden]) { display: flex; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    /* height handled by flex: 1 — body is flex column */
  }
  .page-footer {
    height: auto;
    min-height: 56px;
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
    line-height: 1.3;
    text-align: center;
  }
  .page-footer .pf-desc { display: none; }
  .sidebar {
    position: fixed;
    /* Measured by JS: --topbar-h is the actual topbar height,
       --banner-h is the banner height (0 if hidden). */
    inset: calc(var(--topbar-h, 57px) + var(--banner-h, 0px)) 0 auto 0;
    /* Above Leaflet's .leaflet-top/.leaflet-bottom (which sit at z-index 1000) */
    z-index: 1100;
    height: auto;
    max-height: calc(100dvh - var(--topbar-h, 57px) - var(--banner-h, 0px) - 16px);
    border-right: none;
    border-bottom: 1px solid var(--border);
    transform: translateY(-110%);
    transition: transform 220ms ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    background: var(--surface);
  }
  .sidebar.open { transform: translateY(0); }

  /* When the plan/sidebar is open on mobile, hide all Leaflet controls
     (zoom, layers, attribution, scale) so the map's UI doesn't peek out
     above or below the drawer. The map remains rendered underneath so the
     drawer slide feels smooth, but its controls are out of the way. */
  body.sidebar-open .leaflet-top,
  body.sidebar-open .leaflet-bottom {
    display: none !important;
  }

  /* Sidebar header: sticky green title bar with a close button */
  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    padding: 0.4rem 0.5rem 0.4rem 0.85rem;
    position: sticky;
    top: 0;
    z-index: 10;
    margin: 0 0 0.15rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .sidebar-header h2 {
    color: white;
    margin: 0;
    font-size: 0.95rem;
  }
  .sidebar-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .sidebar-close svg { width: 16px; height: 16px; }
  .sidebar-close:hover { background: rgba(255, 255, 255, 0.3); }
  .sidebar-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
  }
  .sidebar-toggle {
    display: inline-flex;
    height: 48px;
  }
  .profile-wrap { height: 270px; }
  .topbar { padding: 0.5rem 0.7rem; }
  .brand h1 { font-size: 1rem; }

  /* Larger tap targets */
  .btn-icon { width: 40px; height: 40px; }
  .lang-btn { padding: 0.4rem 0.85rem; font-size: 0.82rem; }
  .stage { padding: 0.7rem 0.75rem; min-height: 44px; }

  /* Drag tooltip — compact, won't overflow narrow screens */
  .drag-tooltip {
    min-width: 0;
    padding: 0.4rem 0.55rem;
    font-size: 0.72rem;
  }
  .drag-tooltip .dt-title { font-size: 0.64rem; }
  .drag-tooltip .dt-stats { gap: 0.5rem; }
  .drag-tooltip .dt-dist { font-size: 0.84rem; }
  .drag-tooltip .dt-total { font-size: 0.66rem; }
}

@media (max-width: 600px) {
  .profile-wrap { height: 250px; }
  .page-footer {
    font-size: 0.66rem;
    padding: 0.35rem 0.5rem;
  }
  .topbar { padding: 0.4rem 0.55rem; }
  .topbar .brand .logo { width: 34px; height: 34px; }
  .brand h1 { font-size: 0.92rem; }
  .topbar-actions { gap: 0.35rem; }
  /* Drop the " калкулатор" suffix so logo + short title + help/lang fit */
  .title-suffix { display: none; }
}

/* Touch-screen specific: hide hover-only affordances */
@media (hover: none) and (pointer: coarse) {
  .scroll-arrow { animation: none; } /* less battery drain */
  #profileCanvas { cursor: default !important; }
}