/* The v2 weather pages (Weather/weatherlist.htm, weatheritem.htm). */
@import url("/js/v2/vendor/maplibre-gl.css");
.weatherx { padding-bottom: 24px; }
.weatherx-area { margin-bottom: 32px; }
.weatherx-area .h3 { margin-bottom: 14px; }
.grid.weatherx-grid { --cols: 5; --gap: 14px; }
@media (max-width: 1100px) { .grid.weatherx-grid { --cols: 4; } }
@media (max-width: 860px) { .grid.weatherx-grid { --cols: 3; } }
@media (max-width: 560px) { .grid.weatherx-grid { --cols: 2; } }
.weatherx-tile { aspect-ratio: 4 / 3; }
.weatherx-tile .tile-caption { padding: 14px; }
.weatherx-tile .tile-caption b { font-size: 17px; }

.weatherx-top { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; }
.weatherx-now { display: flex; flex-direction: column; gap: 20px; }
.weatherx-now-main { display: flex; align-items: center; gap: 14px; }
.weatherx-now-main span { display: block; color: var(--c-text-2); }
.weatherx-temp { font-size: 56px; font-weight: 800; line-height: 1; }
.weatherx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 0; }
.weatherx-facts div { background: var(--c-surface-2); border-radius: 12px; padding: 10px 12px; }
.weatherx-facts dt { font-size: 12px; color: var(--c-text-2); }
.weatherx-facts dd { margin: 2px 0 0; font-weight: 600; }
.weatherx-mapcard { overflow: hidden; min-height: 260px; position: relative; }
.weatherx-mapcard .placex-map { position: absolute; inset: 0; height: auto; }
.placex-canvas { position: absolute; inset: 0; background: var(--c-surface-2); }
.weatherx-days { display: flex; flex-direction: column; gap: 10px; }
.weatherx-day { display: grid; grid-template-columns: 150px 1fr; align-items: center; overflow: hidden; }
.weatherx-dayname { padding: 14px 18px; display: flex; flex-direction: column; }
.weatherx-dayname span { font-size: 13px; color: var(--c-text-2); }
.weatherx-slots { display: grid; grid-template-columns: repeat(8, minmax(64px, 1fr)); overflow-x: auto; }
.weatherx-slot { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-left: 1px solid var(--c-outline); text-align: center; }
.weatherx-slot.is-empty { background: var(--c-surface-2); }
.weatherx-slot b { font-size: 16px; }

@media (max-width: 860px) {
  .weatherx-top { grid-template-columns: 1fr; }
  .weatherx-day { grid-template-columns: 1fr; }
  .weatherx-dayname { flex-direction: row; gap: 8px; align-items: baseline; padding-bottom: 6px; }
}