/* Snow map page: container, layer panel (legend + controls), popup */
.snow-page { padding: 12px 16px 20px; }
.snow-page h2 { text-align: center; margin: 0 0 10px; }
#snow-map { position: relative; width: 100%; height: 76vh; min-height: 480px; border: 1px solid #c9ced3; border-radius: 4px; }
.snow-foot { font-size: 12px; color: #555; margin-top: 8px; text-align: center; }

.snow-panel { position: absolute; top: 10px; right: 10px; z-index: 5; width: 290px; max-width: calc(100% - 70px);
  background: rgba(255,255,255,0.96); border: 1px solid #9aa1a8; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  font: 13px/1.35 Arial, sans-serif; color: #222; }
.snow-panel-toggle { display: block; width: 100%; text-align: left; background: #2c3e50; color: #fff; border: 0;
  border-radius: 5px 5px 0 0; padding: 7px 10px; font: bold 13px Arial, sans-serif; cursor: pointer; }
.snow-panel-body { padding: 8px 10px 10px; max-height: calc(76vh - 80px); overflow-y: auto; }
.snow-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid #dde1e4; }
.snow-section-title { font-weight: bold; margin-bottom: 4px; }
.snow-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.snow-label { width: 58px; color: #555; }
.snow-row select, .snow-row input[type=range] { flex: 1; min-width: 0; }
.snow-check { display: inline-flex; align-items: center; gap: 5px; margin: 2px 12px 2px 0; cursor: pointer; }
.snow-note { font-size: 11.5px; color: #666; margin: 3px 0 5px; }
.snow-panel details { margin: 3px 0; }
.snow-panel summary { cursor: pointer; padding: 2px 0; }
.snow-fc-row { padding: 2px 0 2px 16px; }
.snow-swatches { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 6px 0; }
.snow-sw { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.snow-sw i { display: inline-block; width: 16px; height: 12px; border: 1px solid #555; }
.snow-popup .maplibregl-popup-content { padding: 6px 9px; font: 12.5px/1.35 Arial, sans-serif; }

@media (max-width: 700px) {
  #snow-map { height: 72vh; }
  .snow-panel { width: 250px; }
}

.snow-ico { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin: 0 2px 0 1px; background-size: contain; background-repeat: no-repeat; }
.snow-ico-hut { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2222%22%20fill%3D%22%237a4a24%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22/%3E%3Cpath%20d%3D%22M9%2025%20L24%2011%20L39%2025%20Z%22%20fill%3D%22%23fff%22/%3E%3Crect%20x%3D%2214%22%20y%3D%2225%22%20width%3D%2220%22%20height%3D%2212%22%20fill%3D%22%23fff%22/%3E%3Crect%20x%3D%2221%22%20y%3D%2228%22%20width%3D%226%22%20height%3D%229%22%20fill%3D%22%237a4a24%22/%3E%3C/svg%3E"); }
.snow-ico-resort { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2224%22%20r%3D%2222%22%20fill%3D%22%230d3b66%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22/%3E%3Ccircle%20cx%3D%2229%22%20cy%3D%2213%22%20r%3D%223.4%22%20fill%3D%22%23fff%22/%3E%3Cpath%20d%3D%22M27%2018%20L22%2026%20L27%2031%20L23%2038%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M26%2020%20L33%2025%20M26%2020%20L19%2023%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M33%2025%20L36%2036%20M19%2023%20L16%2034%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M12%2038%20L37%2032%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E"); }