/* The weather block on a station's card (static/js/open_map_weather.js).
 *
 * Its own file rather than more rows in static/css/pages/open_map.css for one
 * reason: the JS that draws it is loaded only by the open map, so the CSS that
 * paints it should be too, and a stylesheet that is one feature's is a
 * stylesheet that can be removed with the feature.
 *
 * The palette is the page's own tokens with hard-coded fallbacks, and every
 * colour has a `body.dark-mode` partner — the pattern the rest of
 * open_map.css uses, and the only one that works here: this page's dark mode is
 * a class on <body>, not a media query.
 */

.wx-card {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--r-sm, 6px);
  background: var(--surface-2, #f8fafc);
}

body.dark-mode .wx-card {
  border-color: #374151;
  background: #1f2937;
}

.wx-card--pending { opacity: 0.8; }

.wx-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wx-card__headText {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.wx-card__sky {
  font-weight: 600;
  font-size: 0.95rem;
}

.wx-card__temp {
  font-size: 0.88rem;
  color: var(--ink-2, #4b5563);
}

body.dark-mode .wx-card__temp { color: #d1d5db; }

/* ------------------------------------------------------------------ icon */
/* The glyph is painted by static/css/nh_wx_icons.css, which this page loads
 * beside this file: the same SVG set is drawn by the dashboard's weather
 * widget, so its size and its seven colours live with the shapes in
 * static/js/nh_wx_icons.js rather than in one caller's stylesheet. Nothing
 * about it is overridden here — the card's 2.1em is that file's default. */

/* ------------------------------------------------------------------ rows */
/* A two-column grid rather than a flow of <dt>/<dd>, so the three rainfall
 * figures line up under each other and can be compared at a glance — which is
 * the only reason all three are there. */
.wx-card__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 8px 0 0;
}

.wx-card__key {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-3, #6b7280);
}

.wx-card__value {
  margin: 0;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

body.dark-mode .wx-card__key { color: #9ca3af; }

/* ----------------------------------------------------------------- notes */
.wx-card__note {
  margin: 8px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-3, #6b7280);
}

body.dark-mode .wx-card__note { color: #9ca3af; }

/* The credit is not smaller than the caveat and not greyer than it. It is a
 * licence condition, not a footnote. */
.wx-card__credit { margin-top: 4px; }

.wx-card--failed .wx-card__note { margin-top: 0; }

/* The window's aside region — everything under the charts that is not one.
 * It has no styling of its own beyond keeping clear of the last chart; what
 * goes in it brings its own. */
.series-window__aside:not(:empty) { margin-top: 10px; }