/* Weather block (2026-11-13): now, hour by hour, day by day. js/weather.js */
.gcw { color: #2c2b47; }
.gcw__wait { margin: 1rem 0; color: #5d5c78; }
.gcw__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 .9rem; }
.gcw__title { margin: 0; font-size: 1.15rem; }
.gcw__places { display: flex; flex-wrap: wrap; gap: .35rem; }
.gcw__places button { padding: .4rem .85rem; border: 1px solid #d9d8e6; border-radius: 999px; background: #fff; color: #383751; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.gcw__places button:hover { border-color: #2c2b47; }
.gcw__places button[aria-pressed=true] { border-color: #2c2b47; background: #2c2b47; color: #fff; }
.gcw__places button:focus-visible, .gcw__btn:focus-visible, .gcw__hours:focus-visible { outline: 3px solid #f0a81c; outline-offset: 2px; }

.gcw__now { padding: 1rem 1.1rem; border: 1px solid #e4e3ee; border-radius: 14px; background: #f7f7fb; }
.gcw__main { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.gcw-ic { flex: none; display: block; }
.gcw__temp { display: grid; margin: 0; line-height: 1.25; }
.gcw__temp strong { font-size: 2.9rem; line-height: 1; font-weight: 700; }
.gcw__temp span { font-weight: 600; }
.gcw__temp em { font-style: normal; color: #5d5c78; font-size: .92rem; }
.gcw__range { margin: 0 0 0 auto; text-align: right; font-size: 1.15rem; }
.gcw__range span { display: block; color: #5d5c78; font-size: .8rem; }
.gcw__next { margin: .8rem 0 0; padding: .5rem .75rem; border-radius: 10px; background: #fff; border: 1px solid #e4e3ee; font-weight: 600; }
.gcw__next--on { background: #e8f1fb; border-color: #b9d3ee; color: #1d4f86; }
.gcw__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; margin: .8rem 0 0; }
.gcw__facts > div { padding: .5rem .65rem; border-radius: 10px; background: #fff; border: 1px solid #e4e3ee; }
.gcw__facts dt { color: #5d5c78; font-size: .8rem; }
.gcw__facts dd { margin: 0; font-weight: 700; }
.gcw__facts .gcw__wide { grid-column: 1 / -1; }
.gcw__sub { font-weight: 400; color: #5d5c78; }
.gcw-tag { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #e3f3e8; color: #1f6a3f; vertical-align: middle; }
.gcw-uv1, .gcw-air1 { background: #fdf3c8; color: #6b5200; }
.gcw-uv2, .gcw-air2 { background: #fde2c4; color: #8a4500; }
.gcw-uv3, .gcw-air3 { background: #fbd5d2; color: #96231b; }
.gcw-uv4, .gcw-air4, .gcw-air5 { background: #ead9f4; color: #5b2382; }

.gcw__h { margin: 1.3rem 0 .55rem; font-size: 1rem; }
.gcw__hours { display: flex; gap: .4rem; overflow-x: auto; padding: .15rem .1rem .6rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.gcw-h { flex: none; display: grid; justify-items: center; gap: .2rem; width: 4.3rem; padding: .55rem .2rem; border: 1px solid #e4e3ee; border-radius: 12px; background: #fff; scroll-snap-align: start; text-align: center; font-size: .86rem; }
.gcw-h--mid { border-left: 3px solid #2c2b47; }
.gcw-h__t { display: grid; min-height: 2.3em; align-content: center; color: #5d5c78; font-weight: 600; line-height: 1.15; }
.gcw-h__t i { font-style: normal; font-size: .72rem; color: #2c2b47; }
.gcw-h strong { font-size: 1.1rem; }
.gcw-h__p { color: #5d5c78; }
.gcw-h__p.is-wet { color: #1d5fa3; font-weight: 700; }
.gcw-h__mm { color: #1d5fa3; font-size: .78rem; min-height: 1.2em; }
.gcw-h__w { color: #5d5c78; font-size: .78rem; }
.gcw-h__w small { font-size: .7rem; }
.gcw__more { margin: .5rem 0 0; }
.gcw__btn { padding: .4rem .9rem; border: 1px solid #2c2b47; border-radius: 999px; background: #fff; color: #2c2b47; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.gcw__btn:hover { background: #2c2b47; color: #fff; }

.gcw__days { width: 100%; border-collapse: collapse; font-size: .92rem; }
.gcw__days th, .gcw__days td { padding: .5rem .5rem; border-bottom: 1px solid #e9e8f1; text-align: left; vertical-align: middle; }
.gcw__days thead th { color: #5d5c78; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.gcw__days tbody th { font-weight: 700; white-space: nowrap; }
.gcw__days small { color: #5d5c78; }
.gcw__days .gcw-tag { color: inherit; }
.gcw-sky { display: flex; align-items: center; gap: .45rem; }
.gcw-l2 .gcw-rain b { color: #b25a00; }
.gcw-l3 .gcw-rain b { color: #b3261e; }
.gcw__src { margin: .9rem 0 0; color: #5d5c78; font-size: .8rem; }

/* On the alerts page the block is a card like the others. */
.ra-sec.gcw { margin-top: 1.2rem; }

@media (max-width: 720px) {
  .gcw__days .gcw-x { display: none; }
  .gcw-sky span { display: none; }
  .gcw__temp strong { font-size: 2.5rem; }
  .gcw__range { margin-left: 0; text-align: left; }
  .gcw__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gcw__days th, .gcw__days td { padding: .5rem .3rem; }
}

/* The block in a narrow column (alerts page): as on a phone. */
.gcw { container: gcw / inline-size; }
@container gcw (max-width: 760px) {
  .gcw__days .gcw-x { display: none; }
  .gcw-sky span { display: none; }
  .gcw__range { margin-left: 0; text-align: left; }
}
/* Alerts page: four figures on a day card (temperature, rain, probability, wind). */
html body .ra-card__figs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .3rem; }

/* The coming hour minute by minute (OpenWeather, 2026-11-14). */
.gcw__next p { margin: 0; }
.gcw__next small { display: block; margin-top: .3rem; color: #5d5c78; font-size: .75rem; font-weight: 400; }
.gcw__min { display: flex; align-items: flex-end; gap: 1px; height: 2.4rem; margin-top: .5rem; }
.gcw__min i { flex: 1 1 0; min-width: 0; border-radius: 1px; background: #d9d8e6; }
.gcw__min i.is-wet { background: #2f6fb7; }

/* OpenWeather's line (a trial) under the « next rain » line. */
.gcw__ow { margin-top: .4rem; font-weight: 400; }
.gcw__ow p span { font-weight: 600; }
.gcw__min i { background: #c9d9ec; }
.gcw__min i.is-wet { background: #2f6fb7; }