/* ===== 峰径 · 天气图层样式（2026-09） =====
   加载顺序（与 index.html 一致）：lib/leaflet.css → css/style.css → css/white.css → css/weather.css
   本文件只负责样式；DOM 结构、接口请求、画布绘制与 pane 内层级全部由 js/weather.js 负责。

   视觉语言对齐 white.css（浅色主题），全部使用字面量色值，不依赖 :root 变量被谁覆盖：
     品牌色 #00a65a（hover #008a4d · 浅绿底 #e6f6ee）
     文字 #1f2321 / #555c63 / #8b9198 / #9aa0a6（与 .tool / .camp-note / .sr-count 一致）
     控件描边 #d9dcdf、卡片描边 #eceef0、悬停底 #f2f3f4、浅灰底 #f5f6f7
     面板底 rgba(255,255,255,.97)、阴影 0 6px 26px rgba(0,0,0,.12)（= #panel 的写法）
     圆角：小控件 8–9px、卡片 12–14px、胶囊 999px
   浮动控件位置对齐 site 的“漂浮带”：#layer-switch 桌面 bottom 70px / #draft-tools bottom 64px。 */

:root {
  /* 天气图层私有变量（--wx- 前缀，全部带默认值，不覆盖站点变量） */
  --wx-panel-w: 216px;               /* 面板宽度，正文净宽 190px（图例宽度即 190px） */
  --wx-shadow: 0 6px 26px rgba(0, 0, 0, 0.12);
  --wx-z-panel: 1260;                /* > #panel(1200)：天气面板是临时浮控，须可点 */
  --wx-z-timeline: 1150;             /* < #panel(1200) < .tabbar(2200)：不压过站点既有层级 */
  --wx-tabbar-h: 52px;               /* .tabbar 实测高度（无头 Edge 390×844 下 getBoundingClientRect=52px） */
  --wx-bottom-gap: 12px;             /* 时间轴与 tabbar / 屏幕底边的间距 */
  --wx-grad: linear-gradient(90deg, #2c7bb6 0%, #00a65a 38%, #f5d442 68%, #e0483e 100%);
}

/* ============================================================
   1) 天气入口按钮 —— 由 JS 注入 #layer-switch .ls-body
   .ls-btn 的形状/描边/悬停/高亮已由 white.css 统一处理
   （display:flex、gap:7px、border-radius:999px、padding:6px 12px、font-size:12px；
     hover #f2f3f4；.active 绿底白字）。这里只做两点补充，避免“外来插件感”。
   ============================================================ */
#btn-weather { white-space: nowrap; }                 /* 与“卫星·高德/等高等线”同宽逻辑，窄屏不折行 */
#btn-weather.active { box-shadow: 0 2px 6px rgba(0, 166, 90, 0.25); } /* = .sr-scope.on 的高亮投影 */

/* ============================================================
   2) 天气控制面板 #wx-panel（右上角浮控，默认 hidden）
   位置说明见交付文档：桌面 right:12/top:12，与左下角（桌面）/左上角（移动）的
   #layer-switch 天然不冲突；当 #panel 展开（右侧 345px 路线详情）时，
   用 :has() 把面板左移到路线面板左侧 369px，二者永不重叠。
   ============================================================ */
#wx-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: var(--wx-z-panel);
  width: var(--wx-panel-w);
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px;
  background: rgba(255, 255, 255, 0.97);   /* = #panel 的底 */
  border: 1px solid #eceef0;
  border-radius: 14px;                      /* = #panel / .login-box 的主圆角 */
  box-shadow: var(--wx-shadow);
  color: #1f2321;
  font-size: 12px;
  transition: right 0.25s ease;             /* 与 #panel 的 transform .25s 同步滑动 */
  -webkit-tap-highlight-color: transparent;
}

/* #panel 展开时（桌面右栏 345px），天气面板左移让位；<=860px 时 #panel 变底部抽屉，不做位移 */
@media (min-width: 861px) {
  body:has(#panel:not(.collapsed)) #wx-panel { right: 369px; } /* 12(右距) + 345(面板宽) + 12(间隙) */
}

.wx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.wx-title { font-size: 13.5px; font-weight: 700; color: #1f2321; letter-spacing: 0.2px; }
.wx-x {
  flex: none; width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  color: #9aa0a6; font-size: 17px; line-height: 1; cursor: pointer;
  transition: all 0.15s;
}
.wx-x:hover { background: #f2f3f4; color: #1f2321; }   /* = #hint-x 的交互语言 */

/* 7 个图层按钮：四列网格（原来两列要占 4 行、147px，是整个面板的一半） */
.wx-layer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
/* 4 列下只有「恰好剩 1 个」时才跨满整行（7 个按钮是 4+3，不该跨，
   否则「阵风」会单独占一整行，白白多出 30px 面板高度） */
.wx-layer-grid > :nth-child(4n + 1):last-child { grid-column: 1 / -1; }

.wx-btn {
  min-width: 0; padding: 6px 2px;
  background: #ffffff; border: 1px solid #d9dcdf; border-radius: 8px;
  color: #1f2321; font-family: inherit; font-size: 11.5px; line-height: 1.3;
  cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
/* 4 列时「阵风」等两字标签要能放下：略缩字距，避免挤出省略号 */
.wx-layer-grid .wx-btn { letter-spacing: -0.2px; }

/* 「更多设置」折叠：把高度层 / 模式 / 点击地图 三行收起来（默认收起） */
.wx-more {
  display: block; width: 100%; margin-top: 5px; padding: 3px 2px;
  background: none; border: none; border-radius: 7px;
  color: #8b9198; font-family: inherit; font-size: 11px; line-height: 1.4;
  cursor: pointer; text-align: center; transition: all 0.15s;
}
.wx-more:hover { background: #f2f3f4; color: #1f2321; }
.wx-adv[hidden] { display: none; }
.wx-btn:hover { background: #f2f3f4; }                       /* = .ls-btn:hover / .chip:hover */
.wx-btn:active { transform: scale(0.97); }                   /* = .in-btn:active(.97) / .camp-chip:active(.96) */
.wx-btn.on {                                                 /* 当前图层高亮：品牌绿实心 */
  background: #00a65a; border-color: #00a65a; color: #fff; font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 166, 90, 0.25);
}

/* 高度层 / 模式 两个下拉：自绘 caret，避免 Chrome 原生箭头挤掉 “Open-Meteo” 这类长模式名 */
.wx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.wx-row select {
  width: 100%; min-width: 0; padding: 6px 19px 6px 6px;
  background-color: #ffffff;                    /* 注意用 background-color，别用 background 简写（会清掉 caret） */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%238b9198' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 9px 6px;
  border: 1px solid #d9dcdf; border-radius: 9px;
  color: #1f2321; font-family: inherit; font-size: 11px; line-height: 1.35;
  -webkit-appearance: none; appearance: none;
  outline: none; cursor: pointer;
}
.wx-row select:focus { border-color: #00a65a; }              /* = white.css 的 select:focus */

/* 图例：色带 + 刻度 + 单位（面板净宽 190px）—— 收紧凑一点 */
#wx-legend { margin-top: 7px; }
.wx-legend-bar {
  height: 8px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--wx-grad);              /* JS 可改 --wx-grad，也可直接写 inline background */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
}
.wx-legend-ticks {
  display: flex; justify-content: space-between; gap: 2px;
  margin-top: 2px; font-size: 9px; line-height: 1.25; color: #8b9198;
  font-variant-numeric: tabular-nums;
}
.wx-legend-ticks > span,
.wx-legend-ticks > i,
.wx-legend-ticks > b { font: inherit; font-style: normal; font-weight: 400; }
.wx-legend-unit { margin-top: 0; font-size: 9.5px; line-height: 1.25; color: #8b9198; text-align: right; }

/* 状态（#wx-status 默认 hidden；原来的 .wx-hint 行已删除，与下拉标签重复） */
#wx-status {
  margin-top: 8px; padding: 7px 9px;
  background: #f5f6f7; border-radius: 8px;         /* = .stat 的浅灰块语言 */
  color: #555c63; font-size: 11.5px; line-height: 1.5;
}
/* weather.js setStatus(txt, kind) 会写 className = 'wx-' + kind，四态各给一套站点色 */
#wx-status.wx-loading, #wx-status.loading { animation: wx-blink 1.3s ease-in-out infinite; }
#wx-status.wx-warn, #wx-status.warn { background: #fffaf3; color: #a5763f; }   /* = “沿途营地”卡的暖色语言 */
#wx-status.wx-error, #wx-status.err { background: #fdf4f3; color: #b3534a; }   /* = .err-box 的错误色 */
@keyframes wx-blink { 50% { opacity: 0.62; } }

/* ============================================================
   3) 时间轴 #wx-timeline（底部居中胶囊，默认 hidden）
   桌面 549×50（历史实现尺寸），移动端左右贴边近似满宽。
   bottom = tabbar 高度(52) + 间隙(12) + 安全区：
     · 桌面/平板 tabbar 隐藏时 = 64px，正好落在 #layer-switch(70)、#draft-tools(64) 同一条漂浮带；
     · ≤860px tabbar 出现时（实测高 52px），时间轴自动落在底部导航之上，不遮挡、不重叠。
   z-index 1150 < #panel(1200)：移动端路线详情抽屉打开时由抽屉盖住，而不是两个卡片互相压字。
   ============================================================ */
#wx-timeline {
  position: absolute;
  left: 50%;
  bottom: calc(var(--wx-tabbar-h) + var(--wx-bottom-gap) + env(safe-area-inset-bottom, 0px));
  z-index: var(--wx-z-timeline);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  width: 549px; height: 44px; max-width: calc(100vw - 24px);
  padding: 0 14px 0 6px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid #eceef0; border-radius: 999px;
  box-shadow: var(--wx-shadow);
  color: #1f2321;
  -webkit-tap-highlight-color: transparent;
}

/* 圆形播放按钮 */
#wx-play {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #00a65a; border: 1px solid #00a65a; border-radius: 50%;
  color: #fff; font-family: inherit; font-size: 12px; line-height: 1; text-indent: 1px;
  cursor: pointer; transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(0, 166, 90, 0.25);
}
#wx-play:hover { background: #008a4d; border-color: #008a4d; }
#wx-play:active { transform: scale(0.94); }
/* 播放中：浅绿底 + 绿字（= .lg-seg .seg.on）。weather.js 用 .on，这里同时兼容 .playing */
#wx-play.on, #wx-play.playing {
  background: #e6f6ee; border-color: #00a65a; color: #00a65a;
  box-shadow: none;
}
#wx-play.on:hover, #wx-play.playing:hover { background: #d7f0e2; }

/* 时间滑块：自绘轨道 + 圆形手柄，输入框整体 34px 高 = 大触摸命中区 */
#wx-slider {
  flex: 1 1 auto; min-width: 0;
  height: 34px; margin: 0; padding: 0;
  background: transparent;
  -webkit-appearance: none; appearance: none;
  outline: none; cursor: pointer;
}
/* WebKit / Blink（已对齐 weather.js 的实现：JS 写 --wx-p，同时兼容 --wx-fill） */
#wx-slider::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg,
    #00a65a 0%, #00a65a var(--wx-p, var(--wx-fill, 0%)),
    #e8eaec var(--wx-p, var(--wx-fill, 0%)), #e8eaec 100%);   /* 已播进度：JS 写 --wx-p，不写也成立 */
}
#wx-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7.5px;   /* (5 - 20) / 2，手柄与轨道垂直居中 */
  border-radius: 50%; background: #fff; border: 3px solid #00a65a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  cursor: grab; transition: box-shadow 0.15s, border-color 0.15s;
}
#wx-slider:hover::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(0, 166, 90, 0.35); }
#wx-slider:active::-webkit-slider-thumb { cursor: grabbing; border-color: #008a4d; }
#wx-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0, 166, 90, 0.18); }
/* Firefox */
#wx-slider::-moz-range-track { height: 5px; border-radius: 999px; background: #e8eaec; }
#wx-slider::-moz-range-progress { height: 5px; border-radius: 999px; background: #00a65a; }
#wx-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid #00a65a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); cursor: grab;
}

/* 右侧时间标签 */
#wx-time-label {
  flex: none; min-width: 58px; text-align: right;
  color: #555c63; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================================================
   4) 天气图层画布 #wx-canvas
   绝对定位铺满地图容器，pointer-events:none —— 事件全部透传给 Leaflet。
   刻意不设置 transform / filter / opacity / z-index / will-change / contain，
   避免生成新的层叠上下文（z-index 由 JS 在 Leaflet pane 内控制）。
   ============================================================ */
#wx-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

/* ============================================================
   5) 地图弹窗内容 .wx-pop（Leaflet popup 内）
   卡片宽 238px（weather.js 侧 popup maxWidth=340，余量充足）。
   两级处理，都不污染其他弹窗（#panel 里的“沿途营地”弹窗不受影响）：
     ① 兜底：负外边距抵消 Leaflet 自带 .leaflet-popup-content 的 13/24/13/20 内边距；
     ② 现代浏览器：以 weather.js 传的 .wx-pop-wrap 为作用域（:has(.wx-pop) 等价兜底），
        直接把 popup 自带内边距归零，卡片铺满、不留缝隙。
   ============================================================ */
.wx-pop {
  width: 238px;
  margin: -13px -24px -13px -20px;          /* ① 抵消 leaflet.css 的弹窗内边距 */
  padding: 12px 13px 11px;
  background: #ffffff; border-radius: 11px;
  color: #1f2321; font-size: 12.5px; line-height: 1.45; text-align: left;
  overflow: hidden;
}
/* ② 仅作用于天气弹窗：weather.js 用 className:'wx-pop-wrap'，这里以它为准；
      :has(.wx-pop) 作为等价兜底（两种写法都不会碰到 #panel 里“沿途营地”等其它 popup） */
.leaflet-popup.wx-pop-wrap .leaflet-popup-content-wrapper,
.leaflet-popup:has(.wx-pop) .leaflet-popup-content-wrapper { padding: 0; }
.leaflet-popup.wx-pop-wrap .leaflet-popup-content,
.leaflet-popup:has(.wx-pop) .leaflet-popup-content { margin: 0; }
.leaflet-popup.wx-pop-wrap .wx-pop,
.leaflet-popup:has(.wx-pop) .wx-pop { margin: 0; border-radius: 12px; }
/* 关闭按钮：白色卡片上给自己加一层薄底，避免“×”压在文字上 */
.leaflet-popup.wx-pop-wrap a.leaflet-popup-close-button,
.leaflet-popup:has(.wx-pop) a.leaflet-popup-close-button {
  top: 6px; right: 6px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.72);
  font-size: 17px; line-height: 22px;
}
.leaflet-popup.wx-pop-wrap a.leaflet-popup-close-button:hover,
.leaflet-popup:has(.wx-pop) a.leaflet-popup-close-button:hover { color: #1f2321; background: #f2f3f4; }

.wx-pop-head {
  display: flex; align-items: center; gap: 5px;
  padding-right: 24px;                       /* 给关闭按钮让位 */
  color: #555c63; font-size: 12.5px;
}
.wx-pop-icon { font-size: 14px; line-height: 1; }
.wx-pop-desc { font-weight: 600; color: #1f2321; }

.wx-pop-temp {
  margin: 3px 0 1px;
  font-size: 38px; font-weight: 700; line-height: 1.05;
  letter-spacing: -1px; color: #1f2321; font-variant-numeric: tabular-nums;
}
.wx-pop-temp span { margin-left: 3px; font-size: 15px; font-weight: 600; letter-spacing: 0; color: #8b9198; }
.wx-pop-meta { font-size: 11px; color: #8b9198; }

.wx-pop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
.wx-pf { min-width: 0; padding: 6px 4px; background: #f5f6f7; border-radius: 8px; text-align: center; }
.wx-pf b { display: block; font-size: 13px; font-weight: 700; color: #1f2321; font-variant-numeric: tabular-nums; }
.wx-pf span { display: block; margin-top: 1px; font-size: 9.5px; line-height: 1.3; color: #8b9198; white-space: nowrap; }

.wx-pop-days {
  width: 100%; margin-top: 9px;
  border-collapse: collapse;
  color: #1f2321; font-size: 11px; font-variant-numeric: tabular-nums;
}
.wx-pop-days th, .wx-pop-days td {
  padding: 4px 0; border-bottom: 1px solid #f0f1f2;   /* = .sr-item 的分隔线 */
  text-align: right;
}
.wx-pop-days th { color: #8b9198; font-weight: 600; }
.wx-pop-days th:first-child, .wx-pop-days td:first-child { text-align: left; }
.wx-pop-days th:nth-child(2), .wx-pop-days td:nth-child(2) { text-align: center; }
.wx-pop-days tr:last-child th, .wx-pop-days tr:last-child td { border-bottom: none; }

.wx-pop-src {
  margin-top: 8px; padding-top: 7px;
  border-top: 1px solid #f0f1f2;
  color: #9aa0a6; font-size: 10px; line-height: 1.5;
}
/* weather.js 会连出两行来源（模式对比 / 数据来源），第二行不再重复分隔线 */
.wx-pop-src + .wx-pop-src { margin-top: 3px; padding-top: 0; border-top: none; }

/* ============================================================
   6) 移动端适配（< 700px；站点自身断点为 760 / 860）
   ============================================================ */
@media (max-width: 700px) {
  /* 面板：右上角，避开顶部通栏搜索框(0–52px)与第二排按钮(58–95px)，
     左侧 x<=84 是 #layer-switch 竖列，所以面板贴右且从 104px 起；
     max-height 保证下沿不越过 50vh-20px（#btn-locate 的顶边），必要时面板内滚动。 */
  #wx-panel {
    top: 104px; right: 10px; left: auto;
    width: var(--wx-panel-w); max-width: calc(100vw - 20px);
    max-height: calc(50vh - 124px);   /* 下沿正好停在 #btn-locate 顶边 = 50vh-20px 之上 */
    overflow-y: auto;
    padding: 10px 12px 10px;
    border-radius: 13px;
  }
  .wx-head { margin-bottom: 8px; }
  .wx-x { width: 26px; height: 26px; font-size: 18px; }   /* 放大触摸目标 */
  .wx-btn { padding: 7px 4px; font-size: 12px; }
  .wx-row select { padding: 7px 19px 7px 6px; font-size: 11px; }   /* 保持 19px 右侧 caret 让位 */
  #wx-legend { margin-top: 7px; }
  .wx-hint { margin-top: 6px; }
  /* 面板被 max-height 限制时需要内部滚动，把状态条粘在面板底部，加载/报错提示不会被滚出视野 */
  #wx-status { position: sticky; bottom: 0; box-shadow: 0 -8px 12px -6px rgba(255, 255, 255, 0.98); }

  /* 时间轴：左右贴边近似满宽；transform 必须复位（基础样式是 translateX(-50%)） */
  #wx-timeline {
    left: 10px; right: 10px; width: auto; max-width: none;
    transform: none;
    height: 48px; gap: 8px; padding: 0 12px 0 7px;
  }
  #wx-play { width: 32px; height: 32px; font-size: 11.5px; }
  #wx-slider { height: 32px; }
  #wx-time-label { min-width: 54px; font-size: 11.5px; }

  /* 站点底部标语 #hint 出现时（bottom 66px + 安全区）再抬一层，避免压字 */
  body:has(#hint:not([hidden])) #wx-timeline {
    bottom: calc(var(--wx-tabbar-h) + var(--wx-bottom-gap) + 40px + env(safe-area-inset-bottom, 0px));
  }
  /* 移动端 #tools-panel 也在顶部展开（绘制模式），此时收起天气面板，与 #layer-switch 的处理一致 */
  body.edit-open #wx-panel { display: none; }

  /* 弹窗卡片：窄屏略收窄，保持左右各 24px 余量 */
  .wx-pop { width: 214px; padding: 11px 12px 10px; }
  .wx-pop-temp { font-size: 34px; }
  .wx-pf span { font-size: 9px; }
  .wx-pop-days { font-size: 10.5px; }
}

/* 极窄屏（< 360px）再收一点，避免图例与下拉过挤 */
@media (max-width: 360px) {
  #wx-panel { width: 200px; }
  #wx-timeline { left: 8px; right: 8px; gap: 6px; padding: 0 10px 0 6px; }
  #wx-time-label { min-width: 48px; font-size: 11px; }
}

/* ==========================================================================
   强调色修正 —— 依据打捞出的 SPEC.md 第 105 / 165 / 434 行
   天气模块自身的主色是**蓝 #1677FF**：播放按钮、滑块已播放段、选中图层按钮实测同值；
   站点品牌绿 #00A65A 属于左侧图层菜单的开关态，天气模块不沿用它。
   播放按钮实测直径约 46px；轨道 #EFEFEF 高约 6px；滑块直径约 16px 带白描边。
   （本段放在文件末尾，用同优先级后置规则覆盖上面的绿色实现，不改动原有结构。）
   ========================================================================== */
.wx-btn.on { background: #1677ff; border-color: #1677ff; color: #fff; }
.wx-btn.on:hover { background: #0e63e0; border-color: #0e63e0; }

#wx-play {
  width: 46px; height: 46px;
  background: #1677ff; border-color: #1677ff; color: #fff;
  font-size: 15px;
}
#wx-play:hover { background: #0e63e0; border-color: #0e63e0; }
#wx-play.on, #wx-play.playing { background: #e8f1ff; border-color: #1677ff; color: #1677ff; }
#wx-play.playing:hover { background: #d6e7ff; }

#wx-slider { background: transparent; }
#wx-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, #1677ff 0 var(--wx-p, 0%), #efefef var(--wx-p, 0%) 100%);
}
#wx-slider::-moz-range-track { height: 6px; border-radius: 999px; background: #efefef; }
#wx-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: #1677ff; }
#wx-slider::-webkit-slider-thumb {
  width: 16px; height: 16px; margin-top: -5px;
  background: #1677ff; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(22, 119, 255, 0.45);
}
#wx-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: #1677ff; border: 2px solid #fff; border-radius: 50%;
}
#wx-slider:hover::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(22, 119, 255, 0.45); }
#wx-slider:focus-visible { outline: none; }
#wx-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.20); }

@media (max-width: 700px) {
  #wx-play { width: 38px; height: 38px; font-size: 13px; }
}

/* —— 补全上面这次「强调色改为蓝 #1677FF」的收尾：前文的绿色实现里由我写死的
      投影/描边仍带绿，若不补齐，蓝色按钮下会挂一圈绿光，与 SPEC 第 165 / 434 行不符。
      依据：SPEC.md 165「蓝色圆形播放按钮（#1677FF 实心圆 + 白色 ▶）… 蓝色圆形滑块（直径约 16px，带白描边）」、
            434「主色蓝 #1677FF（播放按钮、滑块填充、选中图层按钮实测同值）」。
      若将来要改回站点品牌绿，只需把下面 3 条与上面那段里的色值一起换成 #00a65a。 —— */
.wx-btn.on { box-shadow: 0 2px 6px rgba(22, 119, 255, 0.25); }
#wx-play { box-shadow: 0 2px 6px rgba(22, 119, 255, 0.25); }
#wx-slider:active::-webkit-slider-thumb { border-color: #fff; }   /* SPEC：滑块为白色描边，拖动时不要变绿 */

/* ==========================================================================
   路线天气（沿线）：插在路线详情面板里，位于海拔剖面之前
   需求：每条路线上都补全天气信息，并随「路线中的那个点」移动而改变。
   一次取回整条路线的 48 小时，拖动滑块/地图标记只在本地查表 + 插值，
   不发请求，所以拖动是即时的。
   ========================================================================== */
.rw-box {
  margin: 10px 0 6px; padding: 9px 10px 10px;
  background: #fff; border: 1px solid #e3e6e9; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.rw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rw-title { font-size: 12.5px; font-weight: 700; color: #1f2321; }
.rw-src { font-size: 10px; color: #8b9198; text-align: right; }
.rw-pos { font-size: 11px; color: #5b6470; margin-bottom: 4px; }
.rw-pos b { font-size: 13px; color: #1677ff; font-variant-numeric: tabular-nums; }

.rw-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; margin: 0 0 2px; background: transparent;
  cursor: pointer; outline: none;
}
.rw-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, #1677ff 0 var(--rw-p, 0%), #efefef var(--rw-p, 0%) 100%);
}
.rw-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: #1677ff; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(22, 119, 255, 0.45);
}
.rw-slider::-moz-range-track { height: 6px; border-radius: 999px; background: #efefef; }
.rw-slider::-moz-range-progress { height: 6px; border-radius: 999px; background: #1677ff; }
.rw-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #1677ff; border: 2px solid #fff;
}
.rw-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.20); }

/* 合并图的图例：海拔（站点原有的灰底面积）+ 气温（我们的蓝线） */
.rw-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  margin: 2px 0 8px; font-size: 10px; color: #8b9198;
}
.rw-legend i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.rw-legend i.rw-lg-area { background: rgba(17, 20, 23, 0.14); border: 1px solid rgba(17, 20, 23, 0.18); }
.rw-legend i.rw-lg-line { height: 0; width: 16px; border-top: 2px solid #1677ff; border-radius: 0; margin-left: 6px; }
.rw-legend .rw-lg-note { color: #b0b6bc; }

/* 叠在站点海拔剖面上的天气曲线（SVG 由 profile.js 生成） */
#profile .wline { fill: none; stroke: #1677ff; stroke-width: 2; stroke-linejoin: round; }
#profile .wlabel { fill: rgba(0, 0, 0, 0.42); font-size: 9px; }
#profile .wunit { fill: #1677ff; font-weight: 600; }
#profile .wmark { stroke: #1677ff; stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.85; }
/* 当前位置：海拔/气温两条曲线上各一个点 + 数值标签（带白色描边，压在曲线上也读得清） */
#profile .mdot { fill: #1f2321; stroke: #fff; stroke-width: 1.5; }
#profile .mdot.wdot { fill: #1677ff; }
#profile .mtag {
  font-size: 10px; font-weight: 600; fill: #1f2321;
  paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 2.6px; stroke-linejoin: round;
}
#profile .mtag.wtag { fill: #1677ff; }

.rw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.rw-cell { background: #f7f8f9; border-radius: 8px; padding: 5px 3px; text-align: center; }
.rw-cell b { display: block; font-size: 12.5px; color: #1f2321; font-variant-numeric: tabular-nums; }
.rw-cell span { display: block; font-size: 9px; color: #8b9198; margin-top: 1px; white-space: nowrap; }
.rw-hint { font-size: 10px; color: #8b9198; margin-top: 6px; line-height: 1.4; }

/* 地图上沿路线移动的那个点 */
.rw-pin { background: none; border: none; }
.rw-pin i {
  display: block; width: 13px; height: 13px; margin: 2px; border-radius: 50%;
  background: #1677ff; border: 2.5px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); cursor: grab;
}
.rw-pin i:active { cursor: grabbing; }
/* 钉子上挂的「气温 · 海拔」标签 */
.rw-pin .rw-pin-tag {
  position: absolute; left: 18px; top: -4px; white-space: nowrap;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.95); border: 1px solid #e3e6e8;
  color: #1f2321; font-size: 10.5px; font-weight: 600; line-height: 1.35;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18); pointer-events: none;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .rw-grid { gap: 4px; }
  .rw-cell b { font-size: 11.5px; }
  .rw-cell span { font-size: 8.5px; }
  .rw-legend { font-size: 9.5px; }
  .rw-legend .rw-lg-note { display: none; }   /* 手机端省一行 */
}

/* ==========================================================================
   天气面板：可拖动 + 可收起
   拖动用 transform 做位移（不动 CSS 的 top/right），否则会和
   「#panel 展开时天气面板左移让位」那条 :has() 规则互相覆盖。
   ========================================================================== */
.wx-head {
  justify-content: flex-start;      /* 覆盖原 space-between：标题与图层名相邻，按钮靠 margin-left:auto 推右 */
  cursor: grab;
  touch-action: none;               /* 触摸拖动时不要滚动页面 */
  -webkit-user-select: none; user-select: none;
}
#wx-panel.wx-dragging { transition: none; }
#wx-panel.wx-dragging .wx-head { cursor: grabbing; }

.wx-head-btns { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.wx-min { font-size: 16px; font-weight: 700; line-height: 1; }
.wx-min:hover { background: #f2f3f4; color: #1f2321; }

/* 收起态：只留标题栏，并显示当前图层名 */
.wx-cur {
  display: none;
  margin-left: 7px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: #1677ff;
}
#wx-panel.min { width: auto; padding: 8px 10px 8px 12px; }
#wx-panel.min .wx-head { margin-bottom: 0; }
#wx-panel.min .wx-cur { display: inline; }
#wx-panel.min .wx-layer-grid,
#wx-panel.min .wx-more,
#wx-panel.min .wx-adv,
#wx-panel.min .wx-row,
#wx-panel.min #wx-legend,
#wx-panel.min #wx-status { display: none; }

@media (max-width: 700px) {
  .wx-cur { font-size: 11px; margin-left: 6px; }
}

/* ==========================================================================
   层叠修正：天气面板必须压得住站点左上角的 #search-box
   实测发现：面板可拖动之后，拖到左上角时标题栏按钮会被 #search-box 盖住 ——
   不只是关不掉，点击还会落到站点的「热度」按钮上（elementFromPoint 返回 btn-hot）。
   站点层叠：模态遮罩 3000 / .tabbar 2200 / #search-box 1350 / #toolbar 1300 /
             #panel·#layer-switch 1200。1400 正好在搜索框之上、标签栏与遮罩之下。
   ========================================================================== */
#wx-panel { z-index: 1400; }

/* 天气入口按钮：常驻显示在「图层」开关下方。
   #layer-switch 是 align-items:flex-start，每项按内容宽度（开关 64 / 列表 81），
   这里让它与列表同宽并居中，读起来像一个正经按钮而不是列表里的一项。 */
#btn-weather { align-self: stretch; justify-content: center; }

/* 「点击地图」选项行：标签 + 下拉，与上面两列下拉同一套视觉 */
.wx-row-tap { grid-template-columns: auto 1fr; align-items: center; gap: 6px; margin-top: 6px; }
.wx-lab { font-size: 11px; color: #5b6470; white-space: nowrap; }