/* 天气预报页专属样式（复用 style.css 的 --变量、.card、.wrap、.ph）
   首页天气小卡的 .weather/.wn-*/.w7-* 已随迁移删除，本页用 .wx-* 自成一套。 */
.wx-wrap { max-width: 1000px; }

/* ---------- 顶栏 ---------- */
.wx-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px; padding: 14px 20px;
}
.wx-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.back-home {
  color: var(--accent); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(179, 131, 43, 0.28);
  background: rgba(179, 131, 43, 0.08);
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.back-home:hover, .back-home:focus-visible { background: var(--accent-soft); color: #8f6a1f; }
.wx-title { font-size: clamp(22px, 3vw, 30px); margin: 0; font-weight: 700; letter-spacing: .5px; }
.wx-city {
  font-size: 14px; color: var(--text-dim); font-weight: 600;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(20, 30, 50, 0.12); background: rgba(20, 30, 50, 0.05);
}
.wx-right { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- 当前实况 ---------- */
.wx-now-card { margin-bottom: 16px; }
.wx-now { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.wx-now-left { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.wx-now-ico { font-size: 72px; line-height: 1; }
.wx-now-main { min-width: 0; }
.wx-now-temp {
  font-size: 64px; font-weight: 800; line-height: 1.02;
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.wx-deg { font-size: 24px; font-weight: 600; color: var(--text-dim); margin-left: 4px; letter-spacing: 0; }
.wx-now-desc { font-size: 19px; color: var(--text-dim); font-weight: 600; margin-top: 2px; }

.wx-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px 12px; flex: 1 1 420px; min-width: 0;
}
.wx-metric {
  background: rgba(20, 30, 50, 0.045); border: 1px solid rgba(20, 30, 50, 0.06);
  border-radius: 12px; padding: 10px 14px; min-width: 0;
}
.wx-m-k { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.wx-m-v {
  font-size: 17px; font-weight: 700; margin-top: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 未来 7 天 ---------- */
.wx-forecast { margin-bottom: 4px; }
.wx-hint { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.wx-days { display: flex; flex-direction: column; gap: 4px; }

.wx-day {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 10px; border-radius: 12px;
  border: 1px solid transparent;
}
.wx-day.is-today { background: rgba(179, 131, 43, 0.10); border-color: rgba(179, 131, 43, 0.26); }
.wx-day-l { flex: 0 0 92px; min-width: 0; }
.wx-dow { font-size: 16px; font-weight: 700; }
.wx-date { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.wx-day-ico { flex: 0 0 34px; text-align: center; font-size: 26px; line-height: 1; }
.wx-day-desc {
  flex: 0 0 96px; min-width: 0; font-size: 15px; color: var(--text-dim); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 温度条带：位置与长度按一周内相对高低映射，冷暖渐变（非行情语义色） */
.wx-bar {
  flex: 1 1 auto; min-width: 70px; height: 10px; position: relative;
  border-radius: 99px; background: rgba(20, 30, 50, 0.10); overflow: hidden;
}
.wx-bar-fill {
  position: absolute; top: 0; bottom: 0; border-radius: 99px;
  /* 冷→暖三段色标：中间用青绿过渡，避免蓝橙直接插值时中段发灰 */
  background: linear-gradient(90deg, #4a90d9 0%, #7fbfc0 50%, #ef9d2c 100%);
}

.wx-day-t {
  flex: 0 0 118px; text-align: right; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wx-lo { color: var(--text-dim); font-weight: 600; }
.wx-hi { color: var(--text); }

.wx-day-extra {
  flex: 0 0 152px; display: flex; gap: 12px; justify-content: flex-end;
  font-size: 13px; color: var(--text-dim); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- 页脚 ---------- */
.wx-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  flex-wrap: wrap; font-size: 13px; color: var(--text-dim);
  padding: 8px 4px 6px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .wx-now { gap: 16px; }
  .wx-now-ico { font-size: 60px; }
  .wx-now-temp { font-size: 54px; }
  .wx-day-desc { flex: 0 0 78px; font-size: 14px; }
  .wx-day-extra { flex: 0 0 auto; }
}

@media (max-width: 680px) {
  .wx-head { flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .wx-left { gap: 10px; }
  .wx-right { width: 100%; justify-content: flex-start; }

  .wx-now { gap: 14px; }
  .wx-now-ico { font-size: 54px; }
  .wx-now-temp { font-size: 48px; }
  .wx-now-desc { font-size: 16px; }
  .wx-metrics { flex: 1 1 100%; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wx-metric { padding: 9px 12px; }
  .wx-m-v { font-size: 16px; }
  /* 第 5 个指标（今日降水概率）跨两列，避免右下角空一格 */
  .wx-metric:last-child { grid-column: span 2; }

  /* 每天折成三行：日期·图标·天气·温度 / 温度条带 / 降水·风速 */
  .wx-day { flex-wrap: wrap; gap: 6px 10px; padding: 12px 8px; }
  .wx-day-l { flex: 0 0 78px; }
  .wx-day-ico { flex: 0 0 28px; font-size: 22px; }
  .wx-day-desc { flex: 0 0 auto; font-size: 14px; }
  .wx-day-t { flex: 1 1 auto; text-align: right; font-size: 15px; }
  .wx-bar { order: 10; flex: 1 1 100%; }
  .wx-day-extra { order: 11; flex: 1 1 100%; justify-content: flex-start; font-size: 12px; }

  .wx-foot { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .back-home { transition: none; }
}