/* Values stay unitless in table cells; the live unit labels belong to the header. */
.hourly-table tbody td.hourly-temperature > [data-weather-value],
.hourly-table tbody td.hourly-feels-like > [data-weather-value] {
  color: #000;
  font-weight: 850;
  line-height: 1.2;
}
.hourly-table tbody td.hourly-temperature > [data-weather-value] { font-size: 1.2rem; }
.hourly-table tbody td.hourly-feels-like > [data-weather-value] { font-size: 1.05rem; }
.hourly-wind-reading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.hourly-table .wind-dir {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  margin-left: 3px;
  fill: none;
  stroke: #16806b;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(calc(var(--wind-dir) + 180deg));
  transform-origin: center;
  transition: none;
}
.hourly-table .wind-dir-label { display: inline; color: #365d54; font-size: .7rem; font-weight: 750; }
@media (min-width: 821px) {
  .hourly-table tbody td.hourly-temperature > [data-weather-value] {
    font-size: 1.28rem;
  }
  .hourly-table tbody .hourly-wind-reading > [data-weather-value],
  .hourly-table tbody .hourly-wind-gust > [data-weather-value],
  .hourly-table tbody .hourly-humidity,
  .hourly-table tbody .hourly-pressure > [data-weather-value],
  .hourly-table tbody .hourly-clouds {
    font-weight: 800;
  }
}
@media (max-width: 640px) {
  /* Compact values are real text on every screen; do not duplicate them in pseudo-elements. */
  .hourly-table tbody [data-weather-value] { font-size: inherit; }
  .hourly-table tbody [data-weather-value]::after { content: none; display: none !important; }
  .hourly-table tbody td.hourly-temperature > [data-weather-value] { font-size: 1.24rem; }
  .hourly-table tbody td.hourly-pressure > [data-weather-value],
  .hourly-table tbody td.hourly-humidity,
  .hourly-table tbody .hourly-wind-reading > [data-weather-value] {
    font-size: .9rem;
    font-weight: 800;
  }
  .hourly-table tbody td.hourly-feels-like > [data-weather-value] { font-size: .88rem; }
  .hourly-wind-reading { gap: 2px; }
  .hourly-table .wind-dir { width: 13px; height: 13px; margin-left: 0; }
}