* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, -apple-system, sans-serif; color: #1c2430; background: #f5f7f9; }
a { color: #0b5ea8; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #0e3a5d; color: #fff;
}
.site-header .logo { color: #fff; font-weight: 700; font-size: 1.15rem; }
.site-header nav a { color: #cfe3f5; margin-left: 16px; }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }

#map, #home-map { width: 100%; height: 480px; border-radius: 10px; }
#map.fullpage { height: calc(100vh - 120px); }
#route-map { width: 100%; height: 380px; border-radius: 10px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.filters select, .filters label { font-size: 0.92rem; }
.filters select { padding: 6px 8px; border: 1px solid #c6d2dc; border-radius: 8px; background: #fff; }
.filters button { padding: 6px 14px; border: 0; border-radius: 8px; background: #0b5ea8; color: #fff; cursor: pointer; }

h1 { font-size: 1.5rem; margin: 14px 0 8px; }
h2 { font-size: 1.2rem; margin: 22px 0 10px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card {
  background: #fff; border: 1px solid #e2e8ee; border-radius: 10px; padding: 14px;
}
.card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.card .meta { font-size: 0.85rem; color: #5b6b7b; margin-bottom: 6px; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 0.78rem; color: #fff; }
.badge.beginner { background: #2e9e44; }
.badge.medium { background: #c79a10; }
.badge.hard { background: #d8342c; }
.badge.sport { background: #222; }
.badge.fresh { background: #2e9e44; }
.badge.recent { background: #5b8db8; }
.badge.old { background: #c99a2e; }
.badge.osm_only { background: #6a7d8c; }
/* старые ключи — на случай кэша */
.badge.normal { background: #5b8db8; }
.badge.outdated { background: #99a4ae; }
.badge.needs_check { background: #6a7d8c; }

.updates-list { list-style: none; }
.updates-list li { background: #fff; border: 1px solid #e2e8ee; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 0.93rem; }
.updates-list .date { color: #5b6b7b; margin-right: 8px; white-space: nowrap; }
.updates-list .warning { color: #b3261e; font-weight: 600; }

.route-header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.route-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 14px 0; }
.route-props .prop { background: #fff; border: 1px solid #e2e8ee; border-radius: 8px; padding: 8px 12px; font-size: 0.92rem; }
.route-props .prop b { display: block; color: #5b6b7b; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; }

.section-block { background: #fff; border: 1px solid #e2e8ee; border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.section-block h2 { margin-top: 0; }

.hazard-block { border-left: 4px solid #d8342c; background: #fdf3f2; }

.border-zone-warn {
  background: #fff4e5; border: 1px solid #f0c98a; border-left: 4px solid #e08a1e;
  border-radius: 8px; padding: 11px 14px; margin: 12px 0; font-size: 0.95rem;
}

.weather-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.weather-strip .wday {
  flex: 1 1 auto; min-width: 66px; text-align: center; background: #f4f8fb;
  border: 1px solid #e2e8ee; border-radius: 8px; padding: 8px 4px;
}
.weather-strip .wdow { font-size: 0.78rem; color: #5b6b7b; }
.weather-strip .wic { font-size: 1.5rem; line-height: 1.6; }
.weather-strip .wt { font-size: 0.86rem; }
.weather-strip .wt b { color: #c0392b; }
.weather-strip .wp { font-size: 0.74rem; color: #2e6da4; }

.points-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.points-table th, .points-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #eef2f5; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.actions .btn {
  padding: 9px 16px; border-radius: 8px; background: #0b5ea8; color: #fff; font-size: 0.95rem; border: 0; cursor: pointer;
}
.actions .btn.secondary { background: #eef3f8; color: #0b5ea8; border: 1px solid #b9cfe2; }
.actions .btn.report { background: #d8342c; }

.comment { border-bottom: 1px solid #eef2f5; padding: 10px 0; font-size: 0.94rem; }
.comment .author { font-weight: 600; }
.comment .date { color: #8795a1; font-size: 0.82rem; margin-left: 6px; }

/* --- Этап 2: формы участия (правки/прохождение/фото/подписка/комментарии) --- */
.messages { max-width: 1100px; margin: 12px auto 0; padding: 0 16px; }
.flash { padding: 11px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 0.95rem; border: 1px solid; }
.flash.success { background: #e9f7ee; border-color: #b6e2c6; color: #1c6b3a; }
.flash.error { background: #fdecea; border-color: #f3c2bd; color: #9b271d; }
.flash.info { background: #eef3f8; border-color: #b9cfe2; color: #0b5ea8; }

.actions .action { flex: 0 0 auto; }
.actions .action[open] { flex-basis: 100%; }
.actions .action > summary { list-style: none; display: inline-block; }
.actions .action > summary::-webkit-details-marker { display: none; }
.actions .action > summary.btn {
  padding: 9px 16px; border-radius: 8px; background: #0b5ea8; color: #fff; font-size: 0.95rem; cursor: pointer; user-select: none;
}
.actions .action > summary.btn.secondary { background: #eef3f8; color: #0b5ea8; border: 1px solid #b9cfe2; }
.actions .action > summary.btn.report { background: #d8342c; }

.action-form { margin-top: 10px; background: #f7fafc; border: 1px solid #e2e8ee; border-radius: 10px; padding: 14px 16px; max-width: 560px; }
.action-form .hint { font-size: 0.86rem; color: #6a7682; margin: 0 0 10px; }
.action-form label { display: block; font-size: 0.82rem; color: #4a5762; font-weight: 600; margin-bottom: 10px; }
.action-form input[type=text], .action-form input[type=email], .action-form textarea, .action-form select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #c5d2dd; border-radius: 7px;
  font: inherit; font-weight: 400; box-sizing: border-box;
}
.action-form input[type=file] { margin-top: 4px; font-weight: 400; }
.action-form .form-row { display: flex; gap: 10px; }
.action-form .form-row label { flex: 1; }
.action-form button[type=submit] { margin-top: 4px; }

.comment-form-wrap { margin-top: 14px; }

.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-item { margin: 0; }
.photo-item img { width: 100%; height: 130px; object-fit: cover; border-radius: 8px; display: block; }
.photo-item figcaption { font-size: 0.8rem; color: #6a7682; margin-top: 4px; }
.photo-item figcaption .author { color: #8795a1; }

.site-footer { max-width: 1100px; margin: 24px auto; padding: 0 16px 24px; }
.disclaimer { font-size: 0.85rem; color: #6a7682; background: #fff8e6; border: 1px solid #f0e0b0; border-radius: 8px; padding: 10px 14px; }

/* © OSM обязателен по лицензии, но делаем максимально скромным */
.leaflet-control-attribution { font-size: 9px; opacity: 0.55; background: rgba(255,255,255,0.5) !important; }

/* Печать маршрута — чистая «лоция» на бумагу: только суть, без навигации/форм/погоды */
@media print {
  .site-header, .site-footer, .actions, .action-form, .comment-form-wrap,
  .comment, #weather, .weather-strip, .messages, form,
  .leaflet-control-zoom, .related { display: none !important; }
  main { max-width: 100%; margin: 0; padding: 0; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: none; }
  #route-map { height: 300px; page-break-inside: avoid; }
  .section-block, .route-props, .points-table, .border-zone-warn { page-break-inside: avoid; }
  h2 { page-break-after: avoid; }
  .route-header h1::after { content: " — водныйтуризм.рф"; font-size: 0.7em; color: #555; font-weight: 400; }
}

img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  main { padding: 12px; }
  h1 { font-size: 1.28rem; }
  h2 { font-size: 1.1rem; }

  /* шапка: логотип сверху, меню переносится строкой ниже, тапабельные ссылки */
  .site-header { flex-wrap: wrap; padding: 10px 12px; }
  .site-header nav { width: 100%; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .site-header nav a { margin-left: 0; }

  #map, #home-map { height: 340px; }
  #map.fullpage { height: calc(100vh - 150px); }

  /* фильтры: по 2 в ряд, крупные для пальца */
  .filters { gap: 8px; }
  .filters select { flex: 1 1 44%; min-height: 42px; }
  .filters button { flex: 1 1 100%; min-height: 44px; font-size: 1rem; }
  .filters label { flex: 1 1 100%; }
  .filters .reset { flex: 1 1 100%; text-align: center; }

  /* карточки и свойства — в один столбец */
  .cards { grid-template-columns: 1fr; }
  .route-props { grid-template-columns: 1fr 1fr; }

  /* таблица точек: горизонтальный скролл вместо переполнения */
  .points-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* кнопки-действия во всю ширину — удобно тапать */
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn, .actions .action, .actions .action > summary.btn { width: 100%; text-align: center; }

  .action-form { max-width: 100%; }
  .action-form .form-row { flex-direction: column; gap: 0; }
}

/* Полноэкранная карта (кнопка ⛶ на любой карте) */
.map-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  z-index: 10000;
  border-radius: 0 !important;
}
body.map-fs-lock { overflow: hidden; }
.map-fs-btn { font-size: 18px; font-weight: 700; }

/* Памятка «Как пользоваться GPX» */
.gpx-help { max-width: 640px; font-size: 0.92rem; line-height: 1.5; }
.gpx-help p { margin: 0 0 10px; }
.gpx-help ol { margin: 0 0 10px 20px; padding: 0; }
.gpx-help li { margin-bottom: 4px; }

/* Поиск по названию в фильтрах */
.filters .search-q { padding: 8px 10px; border: 1px solid #b9cfe2; border-radius: 8px;
  font-size: 0.95rem; min-width: 190px; }
@media (max-width: 640px) { .filters .search-q { flex: 1 1 100%; min-height: 42px; } }