:root {
  --wx-ic: 48px;
  --wx-ic-r: 14px;
  --wx-gap: var(--sp-3);
  --wx-fx-gap: var(--sp-2);
  --wx-fx-fs: var(--fs-s);
  --wx-fx-ic: var(--ink-soft);
  --wx-src-fs: var(--fs-xs);
  --wx-rain: var(--need-water-2);
  --wx-rain-bg: var(--info-soft);
  --wx-heat: var(--need-sun-2);
  --wx-heat-bg: var(--warn-soft);
  --wx-cold: var(--info);
  --wx-cold-bg: var(--info-soft);
  --wx-sun: var(--gold-2);
  --wx-sun-bg: var(--warn-soft);
  --wx-grey: var(--ink-soft);
  --wx-grey-bg: var(--surface-3);
  --wx-wind: var(--accent);
  --wx-wind-bg: var(--accent-soft);
  --wx-storm: var(--fc-wx-storm);
  --wx-storm-bg: var(--surface-3);
}

.pm-bar {
  --wx-chip-max: calc(var(--pm-bar-fit) - var(--sp-2));
}

.wx-chip {
  max-width: var(--wx-chip-max);
}

.wx-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wx-chip.is-rain .i,
.wx-chip.is-storm .i {
  color: var(--wx-rain);
}

.wx-chip.is-heat .i {
  color: var(--wx-heat);
}

.wx-chip.is-frost .i,
.wx-chip.is-snow .i {
  color: var(--wx-cold);
}

.wx-chip.is-sunny .i,
.wx-chip.is-mild .i,
.wx-chip.is-sim .i {
  color: var(--wx-sun);
}

.wx-chip.is-grey .i {
  color: var(--wx-grey);
}

.wx-chip.is-wind .i {
  color: var(--wx-wind);
}

.wx-card {
  display: flex;
  flex-direction: column;
  gap: var(--wx-gap);
}

.wx-head {
  display: flex;
  align-items: center;
  gap: var(--wx-gap);
}

.wx-head h3 {
  margin: 0;
  font-size: var(--fs-m);
  line-height: var(--lh-tight);
}

.wx-head small {
  color: var(--ink-soft);
  font-size: var(--fs-xs);
}

.wx-ic {
  flex: none;
  width: var(--wx-ic);
  height: var(--wx-ic);
  display: grid;
  place-items: center;
  border-radius: var(--wx-ic-r);
  background: var(--wx-grey-bg);
  color: var(--wx-grey);
}

.wx-ic.is-rain {
  background: var(--wx-rain-bg);
  color: var(--wx-rain);
}

.wx-ic.is-heat {
  background: var(--wx-heat-bg);
  color: var(--wx-heat);
}

.wx-ic.is-frost,
.wx-ic.is-snow {
  background: var(--wx-cold-bg);
  color: var(--wx-cold);
}

.wx-ic.is-sunny,
.wx-ic.is-mild {
  background: var(--wx-sun-bg);
  color: var(--wx-sun);
}

.wx-ic.is-wind {
  background: var(--wx-wind-bg);
  color: var(--wx-wind);
}

.wx-ic.is-storm {
  background: var(--wx-storm-bg);
  color: var(--wx-storm);
}

.wx-fx {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--wx-fx-gap);
  font-size: var(--wx-fx-fs);
  line-height: var(--lh);
}

.wx-fx li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.wx-fx .i {
  flex: none;
  color: var(--wx-fx-ic);
}

.wx-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.wx-acts .btn {
  flex: 1 1 auto;
}

.wx-src {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--wx-src-fs);
}

.wx-src.is-sim .i {
  color: var(--wx-sun);
}

.wx-card .row-btns {
  margin-top: 0;
}

.wx-card .cr2-lure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2);
}

.wx-card .cr2-lure > .btn,
.wx-card .cr2-lure > .tag {
  grid-column: 2;
  justify-self: start;
  max-width: 100%;
  white-space: normal;
}

.wx-x {
  flex: none;
  align-self: flex-start;
  color: var(--ink-soft);
}