/* 台风与蝉 · 设计系统
   基调：编辑部式的深色页面——衬线字体、暖白文字、发丝线分隔、
   风险色只出现在小圆点与关键字上。克制是唯一的装饰。 */

/* 品牌色（用户自媒体方案）：暖炭黑纸底 / 骨白 / 石灰 / 暗灰结构线 / 日升橙（≤10%，只标核心转折） */
:root {
  --serif: Georgia, "Times New Roman", "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --paper: #1d1c18;
  --bg-panel: rgba(29, 28, 24, 0.94);
  --bg-raise: rgba(238, 236, 230, 0.05);
  --ink: #eeece6;
  --ink-2: #aaa69f;
  --ink-3: #76726a;
  --hairline: #3a3733;
  --accent: #ea8640;
  --lv1: #aaa69f;
  --lv2: #c9a961;
  --lv3: #ea8640;
  --lv4: #d0442c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; font-family: var(--serif); color: var(--ink); }

button, select, input { font-family: var(--serif); }

#map { position: absolute; inset: 0; }

/* ---------- 左上：台风数据面板 ---------- */

#panel {
  position: absolute;
  top: 16px; left: 16px;
  width: 264px;
  max-height: calc(100% - 190px);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  font-size: 13px;
  z-index: 10;
  backdrop-filter: blur(10px);
  overflow: hidden;
}
#panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px 10px 18px;
  cursor: pointer;
  flex: none;
}
#panel-head h1 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: var(--ink-2);
}
#panel-toggle {
  border: none;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}
#panel-toggle:hover { color: var(--ink); }
#panel-body { padding: 0 18px 16px; overflow-y: auto; }
#panel.collapsed { width: auto; }
#panel.collapsed #panel-body { display: none; }
#panel.collapsed #panel-head { padding: 10px 14px; }

#panel h2 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--ink-3);
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.storm-item {
  padding: 9px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--hairline);
}
.storm-item .name { font-size: 17px; font-weight: 700; letter-spacing: 0.02em; }
.storm-item .name small { color: var(--ink-3); font-weight: 400; font-size: 11px; }
.storm-item .sub { color: var(--ink-2); font-size: 12px; margin-top: 3px; }
.storm-item.selected .name { color: #fff; }
.storm-item:hover .name { color: #fff; }

.residual-tag {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid rgba(217, 180, 91, 0.5);
  border-radius: 3px;
  color: var(--lv2);
  font-size: 10.5px;
}

.toggle-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; color: var(--ink-2); }
.toggle-row input { accent-color: var(--ink-2); }
.swatch { width: 16px; height: 3px; border-radius: 1.5px; display: inline-block; }

.legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--ink-2); font-size: 12px; }
.legend-row .dot { width: 8px; height: 8px; border-radius: 50%; }

#meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); color: var(--ink-3); font-size: 11px; line-height: 1.8; }

/* ---------- 底部：我会不会受灾 ---------- */

#impact-dock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: 600px;
  max-width: calc(100% - 20px);
  z-index: 12;
}
#dock-bar {
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--bg-panel);
  color: var(--ink);
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  text-align: left;
}
#dock-bar .bar-right { color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
#dock-bar .mini-lv { font-weight: 700; }
#impact-dock.open #dock-bar { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }

#dock-body {
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  border-radius: 0 0 10px 10px;
  padding: 18px 20px;
  max-height: min(54vh, 480px);
  overflow-y: auto;
  font-size: 13.5px;
  backdrop-filter: blur(10px);
}

.wiz-title { font-size: 19px; font-weight: 700; margin-bottom: 14px; letter-spacing: 0.01em; }
.wiz-num { color: var(--ink-3); font-weight: 400; font-size: 12px; margin-left: 10px; letter-spacing: 0.1em; }
.wiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.wiz-next, .wiz-back {
  border: none;
  border-radius: 7px;
  padding: 10px 20px;
  font-size: 13.5px;
  cursor: pointer;
}
.wiz-next { background: var(--ink); color: var(--paper); font-weight: 700; }
.wiz-next:hover { background: #fff; }
.wiz-back { background: none; border: 1px solid var(--hairline); color: var(--ink-2); }
.wiz-back:hover { color: var(--ink); border-color: var(--ink-3); }

#loc-row { display: flex; gap: 8px; }
#loc-row select {
  flex: 1;
  min-width: 0;
  background: var(--bg-raise);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 7px;
  font-size: 14px;
  padding: 9px 6px;
}
#btn-geo {
  border: 1px solid var(--hairline);
  background: none;
  color: var(--ink-2);
  border-radius: 7px;
  cursor: pointer;
  font-size: 12.5px;
  padding: 0 12px;
  white-space: nowrap;
}
#btn-geo:hover { color: var(--ink); border-color: var(--ink-3); }

#persona-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--hairline);
  background: none;
  color: var(--ink-2);
  border-radius: 18px;
  padding: 8px 16px;
  font-size: 13.5px;
  cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }

#situation-row { display: flex; flex-wrap: wrap; gap: 10px 20px; min-height: 24px; }
.sit { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.sit input { accent-color: var(--ink); }
.sit-none { color: var(--ink-3); font-size: 13px; }

/* 结果区 */

#impact-summary { margin-bottom: 4px; }
.lv-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.lv-badge::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  align-self: center;
  background: var(--lv-color, var(--ink-3));
}
.lv-badge b { color: var(--lv-color, var(--ink)); font-size: 14px; letter-spacing: 0.05em; }
.lv-1 { --lv-color: var(--lv1); }
.lv-2 { --lv-color: var(--lv2); }
.lv-3 { --lv-color: var(--lv3); }
.lv-4 { --lv-color: var(--lv4); }

.headline { font-size: 21px; font-weight: 700; margin: 8px 0 5px; line-height: 1.45; letter-spacing: 0.01em; }
.timebrief { color: var(--ink-2); font-size: 13px; }

.storm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 2px; }
.storm-chip { padding: 4px 12px; font-size: 12.5px; border-radius: 14px; }
.storm-chip b { margin-left: 4px; }
.storm-chip.on { background: var(--bg-raise); border-color: var(--ink-3); color: var(--ink); font-weight: 400; }
.storm-chip.on b { font-weight: 700; }

.slow-badge {
  margin: 10px 0 0;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.7;
}
.slow-badge b { color: var(--ink); }

/* 海浪危险（沿海/海岛）：独立于风雨的一条危险轴，即使判「不经过」也报。
   与 .slow-badge 同一克制风格：细左边线 + 素色正文，无底色、无 emoji。 */
.wave-warn {
  margin: 10px 0 0;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.7;
}

/* 官方预警胶囊：与台风胶囊同级、同款，颜色（蓝黄橙红）标出级别。独立事实，点开看详情。 */
.ow-chips { margin-top: 8px; }
.ow-chip {
  color: var(--ink-2);
  border-color: color-mix(in srgb, var(--owc) 50%, transparent);
  background: color-mix(in srgb, var(--owc) 10%, transparent);
}
.ow-chip.on {
  background: color-mix(in srgb, var(--owc) 20%, transparent);
  border-color: var(--owc);
  color: var(--ink);
}
.ow-detail {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--bg-raise);
  font-size: 12.5px;
}
.ow-item { display: flex; align-items: center; gap: 7px; line-height: 1.95; color: var(--ink); }
.ow-item i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ow-lv { color: var(--ink-2); font-size: 11.5px; }
.ow-exp { color: var(--ink-3); font-size: 11.5px; margin-left: auto; }
.ow-src { margin-top: 6px; color: var(--ink-3); font-size: 10.5px; line-height: 1.5; }

#dock-body details {
  border-top: 1px solid var(--hairline);
  margin-top: 12px;
  padding-top: 2px;
  font-size: 13px;
  line-height: 1.85;
}
#dock-body summary {
  list-style: none;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 13px;
  padding: 9px 0;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.08em;
}
#dock-body summary::-webkit-details-marker { display: none; }
#dock-body summary::after { content: "＋"; color: var(--ink-3); }
#dock-body details[open] summary::after { content: "－"; }
#dock-body details > div { padding-bottom: 10px; }

.tl-row { display: flex; gap: 10px; align-items: baseline; padding: 1px 0; }
.tl-row .t { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 66px; font-weight: 700; }
/* AI 多期会商：FNV3 滞后集合的收敛度与本市命中——与 .slow-badge 同一克制风格 */
.ai-consensus {
  margin: 10px 0 0;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}
.aic-head { color: var(--ink); font-weight: 600; }
.aic-src { color: var(--ink-3); font-weight: 400; font-size: 11.5px; margin-left: 6px; }

.muted { color: var(--ink-3); }
.quote { border-left: 2px solid var(--ink-3); padding-left: 10px; margin-top: 6px; color: var(--ink-2); }

.check-row { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.check-row input { margin-top: 5px; accent-color: var(--ink); }
.check-row.done span { text-decoration: line-through; color: var(--ink-3); }

/* 财产处置风险提示：折价抢收/出手前的一小句，跟在「非官方预警」后，标准提示不抢眼 */
.risk-hint { color: var(--ink-3); }

#share-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 7px;
  background: var(--ink);
  color: #1d1c18;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
#share-btn:hover { background: #fff; }
#manual-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: rgba(234, 134, 64, 0.12);
  color: var(--accent);
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
#manual-btn:hover { background: var(--accent); color: var(--paper); }

#disclaimer-mini {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.7;
}

/* ---------- 分享弹窗 ---------- */

#share-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 100;
  justify-content: center;
  align-items: center;
  padding: 16px;
}
#share-box {
  max-width: 420px; width: 100%;
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
#share-scroll { overflow-y: auto; flex: 1; min-height: 0; }
#share-canvas {
  width: 100%;
  height: auto;              /* 长图按原比例，超高时在弹窗内滚动 */
  border-radius: 10px;
  display: block;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.7);
}
#share-actions { display: flex; gap: 10px; margin-top: 14px; flex-shrink: 0; }
#share-actions button {
  flex: 1;
  padding: 11px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
#share-save { background: var(--ink); color: #1d1c18; font-weight: 700; }
#share-close { background: none; border: 1px solid rgba(255,255,255,0.25); color: var(--ink-2); }

/* ---------- 地图弹窗 ---------- */

.maplibregl-popup-content {
  background: var(--bg-panel);
  color: var(--ink);
  font-family: var(--serif);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.8;
}
.maplibregl-popup-tip { border-top-color: rgba(13, 14, 17, 0.92) !important; }
.popup-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; }

/* ---------- 移动端 ---------- */

@media (max-width: 680px) {
  #panel { max-width: calc(100% - 32px); max-height: 55%; }
  #impact-dock { left: 10px; right: 10px; transform: none; width: auto; bottom: 10px; }
  #dock-body { max-height: 62vh; }
  #loc-row { flex-wrap: wrap; }
  #loc-row select { flex: 1 1 40%; }
  .maplibregl-ctrl-attrib { font-size: 9px; }
}

/* ---------- AI 预报复盘 ---------- */
#hindcast { font-size: 12.5px; line-height: 1.5; }
.hc-model { color: var(--ink-3); font-size: 11px; letter-spacing: .02em; margin-bottom: 6px; }
.hc-take { color: var(--ink); margin-bottom: 9px; }
.hc-take b { color: var(--accent); font-weight: 700; }
.hc-chart { display: flex; flex-direction: column; gap: 4px; margin-bottom: 7px; }
.hc-row { display: flex; align-items: center; gap: 7px; }
.hc-lead { width: 34px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hc-bar { flex: 1; height: 8px; background: var(--bg-raise); border-radius: 4px; overflow: hidden; }
.hc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9a961, var(--accent)); border-radius: 4px; }
.hc-km { width: 46px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.hc-hint { color: var(--ink-3); font-size: 11px; margin-bottom: 8px; }
.hc-btn {
  width: 100%; padding: 7px 10px; font-family: var(--serif); font-size: 12.5px;
  color: var(--ink); background: var(--bg-raise); border: 1px solid var(--hairline);
  border-radius: 7px; cursor: pointer;
}
.hc-btn:hover { border-color: var(--accent); color: var(--accent); }
.hc-attr { color: var(--ink-3); font-size: 10.5px; margin-top: 8px; line-height: 1.45; }
.hc-attr a { color: var(--ink-2); }

/* ---------- 地图图层开关（降水实况） ---------- */
#map-layers { position: fixed; top: 14px; right: 14px; z-index: 5; text-align: right; }
#layer-radar {
  font-family: var(--serif); font-size: 13px; color: var(--ink-2);
  background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 7px 12px; cursor: pointer; backdrop-filter: blur(6px);
}
#layer-radar:hover { color: var(--ink); }
#layer-radar.on { color: var(--paper); background: var(--accent); border-color: var(--accent); font-weight: 600; }
#radar-legend {
  margin-top: 8px; background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 9px 11px; width: 168px; backdrop-filter: blur(6px);
  text-align: left;
}
.rl-bar {
  height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #2ecc71, #7ed957, #f7e733, #f5a623, #e8452a, #b02a8f);
}
.rl-lab { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.rl-attr { font-size: 10px; color: var(--ink-3); margin-top: 7px; line-height: 1.5; }
.rl-attr a { color: var(--ink-2); }
@media (max-width: 680px) {
  #layer-radar { font-size: 12px; padding: 6px 10px; }
  #radar-legend { width: 150px; }
}

/* 图层控件：两个开关并排 + 风场图例 */
.ml-btns { display: flex; gap: 6px; justify-content: flex-end; }
#layer-wind {
  font-family: var(--serif); font-size: 13px; color: var(--ink-2);
  background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 7px 12px; cursor: pointer; backdrop-filter: blur(6px);
}
#layer-wind:hover { color: var(--ink); }
#layer-wind.on { color: var(--paper); background: var(--accent); border-color: var(--accent); font-weight: 600; }
#wind-legend {
  margin-top: 8px; background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 9px 11px; width: 168px; backdrop-filter: blur(6px);
}
.wl-bar {
  height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, #8a867e, #aaa69f, #c9a961, #ea8640, #d0442c);
}
@media (max-width: 680px) { #layer-wind { font-size: 12px; padding: 6px 10px; } #wind-legend { width: 150px; } }

/* ---------- 时间轴滑块 ---------- */
#time-slider {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 82px; z-index: 5;
  width: min(560px, 88vw); background: var(--bg-panel); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 10px 16px 12px; backdrop-filter: blur(6px); text-align: center;
}
#time-range { width: 100%; accent-color: var(--accent); cursor: pointer; }
#time-label { font-family: var(--serif); font-size: 13px; color: var(--ink); margin-top: 4px; letter-spacing: .02em; }
#time-label .lead { color: var(--accent); font-weight: 600; }
@media (max-width: 680px) { #time-slider { bottom: 74px; padding: 8px 12px 10px; } #time-label { font-size: 12px; } }

/* 时间轴：播放键 + 用户位置标记 */
.ts-row { display: flex; align-items: center; gap: 10px; }
#time-play {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: var(--paper); border: none; font-size: 12px;
  font-family: var(--serif); line-height: 1; display: grid; place-items: center;
}
#time-play:hover { filter: brightness(1.08); }
.user-marker { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.um-dot {
  width: 13px; height: 13px; border-radius: 50%; background: var(--ink);
  border: 2.5px solid var(--paper); box-shadow: 0 0 0 2px rgba(238,236,230,.35), 0 1px 4px rgba(0,0,0,.5);
}
.um-label {
  margin-top: 3px; font-family: var(--serif); font-size: 11.5px; color: var(--ink);
  background: rgba(29,28,24,.82); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 1px 7px; white-space: nowrap;
}