/* Погода занимает пространство между общей навигацией и общим подвалом. */
body.weather-page.has-site-navigation:has(.weather-map-tools){grid-template-rows:minmax(0,1fr) var(--site-footer-height)}
.weather-page .weather-map-panel{container-type:inline-size;container-name:weather-map}
.weather-page .weather-map-tools{position:absolute;left:12px;bottom:112px;z-index:800;width:200px;display:grid;gap:6px}
.weather-page .weather-map-help{justify-self:start;min-height:34px;padding:6px 12px;font-size:12px;background:#fffffff2;box-shadow:0 2px 10px #173b3220}
.weather-page #weather-map-settings{position:relative;inset:auto;width:100%}
.weather-page #weather-layer-buttons{bottom:32px}
.weather-page .weather-map-summary{bottom:28px}
@container weather-map (max-width:805px){.weather-page .weather-map-summary{bottom:112px}}
.weather-page .weather-scale-with-credits{display:flex;align-items:flex-end;gap:8px}
.weather-scale-with-credits .leaflet-control-scale-line{flex:none}
.weather-page #weather-map-credits{width:260px;max-width:none;transform:none;font:9px/11px system-ui,sans-serif;color:#355344;opacity:.72;background:none;box-shadow:none;border:0;padding:0;white-space:normal}
#weather-map-credits>span{display:block}
.weather-page #weather-map-credits a{color:inherit}

.weather-page #weather-observation{display:grid;grid-template-columns:minmax(72px,.65fr) minmax(0,2.65fr);align-items:center;gap:10px}
.weather-page .weather-observation-main{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0}
.weather-page .weather-observation-main strong{font-size:28px;line-height:1.1;white-space:nowrap}
.weather-page .weather-observation-main span{font-size:11px}
.weather-page .weather-observation-heading{flex-wrap:wrap;gap:2px 8px}
.weather-page .weather-observation-copy{min-width:0}
.weather-page .weather-observation-details p{margin-top:3px}

/* Шрифт растёт вместе с реальной шириной и высотой карточки, включая 4K. */
@media(min-width:800px) and (min-height:501px){
  .weather-page .weather-measures>div{container-type:size;padding:clamp(2px,.4dvh,8px) clamp(5px,.7vw,10px)}
  .weather-page .weather-measures span{font-size:clamp(10px,min(22cqh,9cqw),18px);line-height:1.1;gap:4px}
  .weather-page .weather-measures span svg{width:clamp(11px,min(14cqh,10cqw),20px);height:clamp(11px,min(14cqh,10cqw),20px)}
  .weather-page .weather-measures strong{font-size:clamp(16px,min(42cqh,20cqw),42px);line-height:1.1;margin-top:2px;white-space:nowrap}
  .weather-page .weather-measures small{font-size:clamp(9px,min(16cqh,8cqw),14px);line-height:1.1;margin-top:2px}
}

/* На ноутбуке сведения о текущей погоде размещаются одной полосой. */
@media(min-width:800px) and (min-height:501px) and (max-height:979px){
  .weather-page #forecast{padding:8px;gap:3px}
  .weather-page .weather-overview{min-height:0;grid-template-rows:76px minmax(0,1fr) 32px 72px;gap:3px;overflow:visible}
  .weather-page #weather-observation{gap:8px;padding:6px 8px;overflow:visible}
  .weather-page .weather-observation-heading{font-size:11px;line-height:13px}
  .weather-page .weather-observation-heading span{font-size:10px}
  .weather-page .weather-observation-main strong{font-size:24px}
  .weather-page .weather-observation-main span{font-size:10px;line-height:12px}
  .weather-page .weather-observation-details p{font-size:10px;line-height:12px;margin:2px 0 0}
  .weather-page #weather-current{overflow:visible;grid-template-rows:auto minmax(0,1fr);gap:4px;padding:0}
  .weather-page .weather-main-reading{gap:8px;min-height:0}
  .weather-page .weather-temperature{font-size:40px}
  .weather-page .weather-condition{font-size:11px;line-height:1.2!important}
  .weather-page .weather-condition small{font-size:10px}
  .weather-page .weather-measures{gap:4px}
  .weather-page .weather-measures div{min-height:0}
  .weather-page .weather-timeline{overflow:visible}
  .weather-page .weather-timeline-title strong{font-size:10px}
  .weather-page .weather-timeline input{height:12px;margin-top:3px}
  .weather-page .weather-days{overflow-x:auto;overflow-y:hidden;padding:0 0 2px}
  .weather-page .weather-day{padding:3px 5px;min-width:90px;gap:1px;grid-template-columns:18px minmax(0,1fr);align-content:center}
  .weather-page .weather-day>span,.weather-page .weather-day>small{grid-column:1/-1}
  .weather-page .weather-day-icon svg{width:18px;height:18px}
  .weather-page .weather-day>strong{font-size:12px;align-self:center}
  .weather-page .weather-day>span{font-size:9px}
  .weather-page .weather-day>small{font-size:8px;line-height:10px}
  .weather-page .weather-source{height:22px;overflow:visible;font-size:8px;line-height:10px}
  .weather-page .weather-location button,.weather-page #forecast input:not([type=range]),.weather-page #forecast select{height:28px;font-size:11px}
  .weather-page #forecast label{font-size:9px;gap:2px}
  .weather-page .weather-tabs button{font-size:10px;padding:4px}
  .weather-page .weather-status{height:12px;line-height:12px}
  .weather-page #weather-downloads{height:24px}
  .weather-page .weather-downloads button,.weather-page .weather-download{font-size:9px!important;padding:4px 6px!important}
  .weather-page .weather-charts{gap:5px}
  .weather-page .weather-charts .weather-card-heading h2{font-size:14px}
  .weather-page .weather-chart-options{margin-top:5px}
  .weather-page .weather-chart{min-height:90px}
  .weather-page #weather-step-note{font-size:8px;line-height:11px}
  .weather-page .weather-table-toggle{padding:5px 0!important;font-size:10px!important}
}
@media(min-width:800px) and (min-height:501px) and (max-height:650px){
  .weather-page .weather-overview{grid-template-rows:64px minmax(0,1fr) 28px 56px}
  .weather-page #weather-observation{padding:4px 6px;gap:6px}
  .weather-page .weather-observation-main strong{font-size:22px}
  .weather-page .weather-observation-heading{font-size:10px;line-height:12px}
  .weather-page .weather-observation-heading span,.weather-page .weather-observation-details p{font-size:9px;line-height:11px}
  .weather-page #weather-current{grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:minmax(0,1fr)}
  .weather-page .weather-main-reading{display:grid;grid-template-columns:auto 1fr;align-content:center;gap:3px}
  .weather-page .weather-condition{grid-column:1/-1}
  .weather-page .weather-temperature{font-size:30px}
  .weather-page .weather-condition{font-size:10px}
  .weather-page .weather-condition small{font-size:9px}
  .weather-page .weather-condition-icon{width:26px}
  .weather-page .weather-condition-icon svg{height:26px}
  .weather-page .weather-measures>div{padding:2px 5px}
  .weather-page .weather-measures span{font-size:10px}
  .weather-page .weather-measures strong{font-size:16px;margin-top:1px}
  .weather-page .weather-measures small{font-size:9px;margin-top:0}
}
@media(max-width:799px),(max-width:1000px) and (max-height:500px){
  body.weather-page.has-site-navigation:has(.weather-map-tools){display:block;grid-template-rows:none}
  .weather-page .weather-map-tools{bottom:calc(154px + env(safe-area-inset-bottom));width:174px}
  .weather-page #weather-layer-buttons{bottom:calc(84px + env(safe-area-inset-bottom))}
  .weather-page .weather-map-summary{bottom:auto}
  .weather-page .weather-map-help{min-height:36px;font-size:12px}
  .weather-page .weather-scale-with-credits{flex-direction:column;align-items:flex-end;gap:2px}
  .weather-page #weather-map-credits{width:150px;transform:none;font-size:8px;line-height:10px;text-align:right}
}
@media(min-width:600px) and (max-width:1000px) and (max-height:500px){
  .weather-page .weather-map-tools{width:270px;display:flex;flex-direction:row-reverse;align-items:center}
  .weather-page #weather-map-settings{width:174px;flex:none}
  .weather-page .weather-map-help{flex:none}
}