.weather-page .weather-layer-buttons button[data-layer=climate]{width:88px}
.weather-page .weather-layer-buttons button[data-layer=climate] span{white-space:normal;line-height:12px}
.weather-layer-label-mobile{display:none}
.weather-page .weather-climate-summary{pointer-events:auto}
.weather-climate-keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 8px;margin:8px 0}
.weather-climate-key{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.4}
.weather-climate-key i{width:11px;height:11px;flex:none;border:1px solid #254c3a44;border-radius:2px}
.weather-climate-keys-full{grid-template-columns:1fr}
.weather-climate-summary button,.weather-climate-legend button{min-height:36px;padding:5px 7px;font-size:11px;line-height:1.4;white-space:normal;width:100%}
.weather-climate-help{box-sizing:border-box;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;border:1px solid #cbdacf;border-radius:12px;color:#254c3a;background:#fff;overflow:auto}
.weather-climate-help::backdrop{background:#153e3377}
.weather-climate-help-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}
.weather-climate-help h2{font-size:20px;margin:0}
.weather-climate-help p{font-size:14px;line-height:1.6;margin:14px 0}
.weather-climate-help button{min-width:44px;min-height:44px;flex:none;font-size:24px}
.weather-climate-help a{color:#205c48;text-decoration:underline}
#weather-climate-types{display:grid;gap:8px;margin:16px 0}
#weather-climate-types .weather-climate-key{font-size:14px}
.weather-climate-image{image-rendering:pixelated}
@media(max-width:799px),(max-width:1000px) and (max-height:500px){
  .weather-page #weather-layer-buttons{grid-template-columns:repeat(8,minmax(0,1fr))}
  .weather-page .weather-layer-buttons button[data-layer=climate]{width:100%}
  .weather-page .weather-layer-buttons button[data-layer=climate] .weather-layer-label-full{display:none}
  .weather-page .weather-layer-buttons button[data-layer=climate] .weather-layer-label-mobile{display:block;font-size:8px;line-height:10px}
  .weather-climate-summary .weather-climate-keys{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .weather-page .weather-climate-summary button{min-height:44px}
  .weather-climate-help{padding:16px}
}
@media(min-width:600px) and (max-width:1000px) and (max-height:500px){
  .weather-page .weather-climate-summary{width:280px}
  .weather-page .weather-climate-summary .weather-climate-keys{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;margin:5px 0}
  .weather-page .weather-climate-summary .weather-climate-key{gap:3px;font-size:10px}
  .weather-page .weather-climate-summary .weather-climate-key i{width:9px;height:9px}
}