:root{
  --ink:#0f172a; --ink2:#475569; --ink3:#94a3b8;
  --line:#e2e8f0; --bg:#ffffff;
  --green:#059669; --amber:#d97706; --red:#b91c1c; --blue:#0284c7; --violet:#7c3aed;
  --radius:14px;
  --shadow:0 10px 30px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* 别让 .drop{display:flex} 之类的显式 display 顶掉 hidden */
html,body{margin:0;height:100%}
body{font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);overflow:hidden}
#map{position:absolute;inset:0}

/* ---------- 顶部筛选条 ---------- */
.bar{
  position:absolute;top:12px;left:12px;right:12px;z-index:5;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:10px 12px;
}
.brand{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:15px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.brand .sub{color:var(--ink3);font-size:12px;font-weight:400}
.filters{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end}
.fg{display:flex;flex-direction:column;gap:4px}
.fg.grow{flex:1;min-width:180px}
.fg label{font-size:11px;color:var(--ink2);letter-spacing:.04em}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:3px 11px;font-size:12.5px;color:var(--ink2);cursor:pointer;transition:.15s;
}
.chip:hover{border-color:#cbd5e1;color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .n{opacity:.55;margin-left:4px;font-size:11px}
.toggles{flex-direction:row;gap:14px;align-items:center;padding-bottom:4px}
.tg{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink2);cursor:pointer;white-space:nowrap}
select,input[type=search]{
  border:1px solid var(--line);border-radius:9px;padding:5px 9px;font-size:12.5px;
  color:var(--ink);background:#fff;outline:none;font-family:inherit;
}
select:focus,input[type=search]:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(5,150,105,.12)}
button{font-family:inherit;cursor:pointer;border-radius:9px;font-size:12.5px;padding:6px 13px;border:1px solid var(--line);background:#fff;color:var(--ink)}
button.ghost{color:var(--ink2)}
button.ghost:hover{background:#f1f5f9}
button.primary{background:var(--green);border-color:var(--green);color:#fff}
button.primary:hover{background:#047857}
/* 右上角工具组：点位开关 + 底图切换。
   原先 base-switch 自己绝对定位，加个开关就没地方放了 —— 位置改由容器管。 */
.map-tools{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:8px;z-index:5}
.spot-switch{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink2);
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.spot-switch input{margin:0;accent-color:var(--amber)}
.spot-switch:has(input:checked){border-color:var(--amber);color:var(--amber);background:#fffbeb}
.base-switch{display:flex;gap:0;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#fff}
.base-switch button{border:none;border-radius:0;padding:5px 11px;background:#fff;color:var(--ink2);font-size:12px}
.base-switch button.on{background:var(--ink);color:#fff}
.base-switch button:disabled{opacity:.38;cursor:not-allowed}

/* 两个入口（徒步路线 / 打卡点）。点击切的是**面板看谁**，不是地图上有什么 ——
   点线永远同屏，这是这站的底色（见 README「两个入口页」）。
   宽屏跟在筛选条下沿左上角，top 由 layoutPanel() 按条的实测高度写（别写死 px，
   那样 chip 一换行就错位）；窄屏在下面 @media 里改成贴着面板上沿，拇指够得到。
   z-index 取 3：低于筛选条(5)和面板(4)，万一真重叠了它们该赢。 */
.entries{position:absolute;left:12px;top:150px;z-index:3;display:flex;gap:8px;flex-wrap:wrap}
.entry{display:flex;align-items:center;gap:8px;text-decoration:none;border-radius:12px;
  padding:9px 14px;font-size:13.5px;border:1px solid var(--line);background:#fff;color:var(--ink);
  box-shadow:var(--shadow);transition:.15s}
.entry:hover{border-color:#cbd5e1}
.entry .ic{width:9px;height:9px;border-radius:50%;background:var(--green);flex:0 0 auto}
.entry .n{font-size:11.5px;color:var(--ink3);font-weight:400}
.entry.on{background:var(--ink);border-color:var(--ink);color:#fff}
.entry.on .ic{background:#4ade80}
.entry.on .n{color:#cbd5e1}

/* 窄屏折叠按钮：宽屏不出现（样式在下面的 media query 里打开）
   展开后按钮改口叫「收起」。原先一直写「筛选」，等于没告诉用户点这儿能收回去。
   底色也从纯白改成浅灰，好和白色横条拉开、看得出是个按钮。 */
.filter-toggle{display:none;align-items:center;gap:5px;white-space:nowrap;
  background:#f1f5f9;border-color:#cbd5e1;font-weight:500}
.filter-toggle:hover{background:#e2e8f0}
.filter-toggle .lbl-open{display:none}
.bar.open .filter-toggle .lbl-closed{display:none}
.bar.open .filter-toggle .lbl-open{display:inline}
.filter-toggle .n{background:var(--green);color:#fff;border-radius:999px;padding:0 6px;font-size:11px;line-height:17px}
.filter-toggle .n:empty{display:none}
/* 箭头原先是 10px 的浅灰小三角。用户反馈"太不明显"，但把字号放大到 15px 也没用 ——
   ▾ 这个字形本身只占 em 的四成，字号再大还是小。改成 CSS 画的 8x8 折角箭头，
   2px 描边，比字形大一整圈。font-size:0 把 span 里的 ▾ 藏掉（留着是防样式失效）。 */
.filter-toggle .caret{font-size:0;width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg);transition:transform .15s}
.bar.open .filter-toggle .caret{transform:rotate(225deg)}
.only-narrow{display:none}

/* ---------- 右侧面板 ---------- */
#panel{
  position:absolute;top:150px;right:12px;bottom:12px;width:378px;z-index:4;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.panel-head .cnt{font-size:12.5px;color:var(--ink2);margin-left:auto}
.panel-head .cnt b{font-size:16px;color:var(--ink)}
.back{border:none;padding:0;color:var(--green);font-size:13px}
/* 窄屏专用：把面板收起来给地图腾地方（宽屏面板在右侧，用不着）
   原先是无边框无内边距的一撮灰字（实测 29x16），没人看得出能点。
   改成带底色的胶囊按钮，并让箭头跟着 aria-expanded 走：展开=可往下收，收起=可往上展。 */
.collapse-toggle{display:none;align-items:center;gap:4px;margin-left:8px;
  padding:4px 11px;font-size:12.5px;font-weight:500;
  color:var(--ink);background:#f1f5f9;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.collapse-toggle:hover{background:#e2e8f0}
.collapse-toggle::after{content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.collapse-toggle[aria-expanded="true"]::after{transform:rotate(45deg)}
.collapse-toggle[aria-expanded="false"]::after{transform:rotate(225deg)}
.list,.detail{overflow-y:auto;flex:1}
.list{padding:10px}
.card{
  border:1px solid var(--line);border-radius:12px;padding:11px 12px;margin-bottom:9px;cursor:pointer;
  transition:.15s;background:#fff;
}
.card:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(15,23,42,.08);transform:translateY(-1px)}
.card.on{border-color:var(--green);box-shadow:0 0 0 2px rgba(5,150,105,.18)}
.card h3{margin:0 0 6px;font-size:14.5px;display:flex;align-items:center;gap:7px}
.badge{font-size:11px;padding:1px 7px;border-radius:6px;color:#fff;font-weight:500}
.badge.休闲{background:var(--green)} .badge.中等{background:var(--amber)} .badge.困难{background:var(--red)}
.card .meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--ink2);font-size:12.5px}
.card .meta b{color:var(--ink);font-weight:600}
.card .tags{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11px;background:#f1f5f9;color:var(--ink2);border-radius:6px;padding:1px 7px}
.tag.t-water{background:#ecfeff;color:#0e7490}
.tag.t-family{background:#f0fdf4;color:#15803d}
.tag.t-anno{background:#f5f3ff;color:#6d28d9}
.empty{color:var(--ink2);font-size:13px;padding:18px 8px;line-height:1.9}
.empty code{background:#f1f5f9;padding:1px 5px;border-radius:5px;font-size:12px}
/* 搜索结果里的点位：跟路线卡片分两段，标签是显式的（免得「上面三个点、下面六十条线」
   看着没头没脑）。那颗小圆点跟地图上那颗同色，一眼对得上。 */
.sec-label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3);
  letter-spacing:.08em;margin:4px 2px 8px}
.sec-label .n{background:#f1f5f9;border-radius:6px;padding:0 6px;font-size:10.5px;
  color:var(--ink2);letter-spacing:0}
.sec-label:not(:first-child){margin-top:16px}
.card .kdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(15,23,42,.14)}
.card.spot{background:#fcfdfc}
.tag.t-season{background:#fff7ed;color:#9a3412}
/* 面板底部：撤下通道。固定高度、不参与滚动（.list/.detail 各自 flex:1 抢剩余空间），
   所以在列表和详情两种状态下都露脸，且不占地图。 */
.panel-foot{
  flex:0 0 auto;padding:7px 14px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.5;color:var(--ink3);background:#fafbfc;
}
.panel-foot a{color:var(--ink2);text-decoration:underline}
.panel-foot a:hover{color:var(--ink)}

/* ---------- 详情 ---------- */
.detail{padding:14px 16px 28px}
.detail h2{margin:0 0 4px;font-size:17px}
.detail .sub{color:var(--ink3);font-size:12px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 14px}
.grid div{background:#f8fafc;border-radius:9px;padding:7px 9px}
.grid span{display:block;color:var(--ink3);font-size:11px}
.grid b{font-size:14px}
.detail h4{margin:16px 0 6px;font-size:13px;color:var(--ink2);letter-spacing:.03em}
.detail p{margin:4px 0;font-size:13px;color:#334155}
.warn{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:9px 11px;font-size:12.5px;color:#78350f}
.warn ul{margin:5px 0 0;padding-left:18px}
.note{font-size:11.5px;color:var(--ink3);margin-top:5px}
.anno{display:flex;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.anno:last-child{border:none}
.anno .i{color:var(--violet);width:14px;text-align:center}
.anno button{border:none;padding:0;background:none;color:var(--ink3);font-size:11.5px}
.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.links a,.links button{font-size:12.5px}
.links a{border:1px solid var(--line);border-radius:9px;padding:6px 12px;color:var(--ink);text-decoration:none;background:#fff}
.links a:hover{background:#f1f5f9}
.kv{font-size:12.5px;color:var(--ink2);display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border:none}
.kv span:last-child{color:var(--ink);text-align:right;word-break:break-all}
/* 两步路编号那一行：数字用等宽字体（抄下来不会把 0 和 O 看错），按钮压在行内。
   档案节一行只有 12.5px 高，按钮要跟着缩，不然这一行被顶成两行、白吃 16px。 */
.tid-hint{margin:9px 0 0;font-size:11.5px;color:var(--ink3);line-height:1.7}
/* 提示里那个「复制路线名」小按钮：跟着 11.5px 的灰字走，所以比全局 button 再小一号；
   给个淡绿底，一眼看出是能点的东西，而不是又一句说明文字。 */
.tid-hint button.tid-copy{padding:1px 8px;font-size:11px;border-radius:7px;margin:0 2px;
  color:var(--green);border-color:#a7f3d0;background:#f0fdf4}
.tid-hint button.tid-copy:hover{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- 点位详情 ---------- */
/* 图按宽 1200、WebP、200 KB 上下入库；这里再挂 loading=lazy，别让列表把图都拉下来。
   figure 收成「跟图同宽」（width:fit-content）再居中：竖图缩窄之后，下面那行署名
   会自动贴到图的左右边缘，不会出现「图居中、字左对齐」两套基准线。
   横幅图照样撑满面板宽度，跟以前一样。 */
.shot{margin:0 auto 13px;width:fit-content;max-width:100%}
.shot img{display:block;margin:0 auto;width:auto;max-width:100%;max-height:46vh;
  height:auto;border-radius:10px;background:#f1f5f9;min-height:60px}
.shot figcaption{font-size:11.5px;color:var(--ink2);margin-top:5px;display:flex;
  justify-content:space-between;gap:8px;align-items:baseline}
.shot figcaption .date{color:var(--ink3);white-space:nowrap}
.shot .credit{font-size:11px;color:var(--ink3);margin-top:2px}
.shot .credit a{color:var(--ink3)}
/* 当季那一句要一眼看到：用户十月打开和十二月打开，答案不一样 */
.season{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:10px;
  padding:7px 10px;font-size:12.5px;margin:10px 0 12px}
.badge.ex{background:#0f172a;margin-left:7px;font-size:10.5px;vertical-align:2px}

/* ---------- 图例 / 提示 ---------- */
.legend{
  position:absolute;left:12px;bottom:12px;z-index:4;background:rgba(255,255,255,.94);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:9px 12px;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink2);max-width:420px;
}
.legend div{display:flex;align-items:center;gap:5px}
.legend i{width:14px;height:4px;border-radius:2px;display:inline-block}
/* JS 还没跑（或者一个点位都没有）时露脸的占位点 —— 颜色跟 app.js 的 SPOT_COLOR 一致 */
.legend i.spot{width:11px;height:11px;border-radius:50%;background:#15803d;
  box-shadow:0 0 0 2px #fff,0 0 0 3px #15803d;margin:0 2px}
/* 图例里的点位类目：数据里有几个类目就列几个，点色跟着 KIND_COLOR 走（app.js 填） */
.legend #legend-spot .kind{display:flex;align-items:center;gap:4px}
.legend #legend-spot .kind i{width:10px;height:10px;border-radius:50%;
  box-shadow:0 0 0 2px #fff;margin:0 2px}
.legend .disc{width:100%;color:var(--ink3);font-size:11px;margin-top:3px}
.toast{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:9;
  background:var(--ink);color:#fff;padding:9px 16px;border-radius:10px;font-size:13px;
  box-shadow:var(--shadow);
}
/* 复制链接失败时的兜底框。z-index 比 #panel(4) 高，免得窄屏上被底部面板盖住 */
.copybox{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:11;
  width:min(92vw,520px);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:11px 12px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.copybox .hd{flex:1 1 100%;font-size:12px;color:var(--ink2)}
.copybox input{
  flex:1 1 220px;min-width:0;padding:7px 9px;border:1px solid var(--line);
  border-radius:9px;background:#f8fafc;color:var(--ink);
  font:12.5px/1.4 ui-monospace,Consolas,"Courier New",monospace;
}
.copybox button{
  flex:0 0 auto;padding:6px 12px;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--ink);font-size:12.5px;cursor:pointer;
}
.copybox button:hover{background:#f1f5f9}
.drop,.drop div{display:none}   /* 导入入口已下线（2026-09），样式留着以防将来接后端上传 */
.maplibregl-popup-content{font:13px/1.5 -apple-system,"Microsoft YaHei",sans-serif;border-radius:10px;padding:9px 12px}
@media (max-width:900px){
  /* 窄屏：筛选条件默认收成一行——品牌 + 筛选按钮 + 搜索，其余点「筛选」再展开 */
  .bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px}
  .bar:not(.open){flex-wrap:nowrap}
  .brand{flex:0 0 auto;margin:0;font-size:13.5px}
  .brand .sub{display:none}
  .filter-toggle{display:inline-flex;order:1}
  .filters{order:2;flex:1 1 auto;min-width:0;flex-wrap:nowrap;align-items:center;gap:8px}
  .bar:not(.open) .filters .adv{display:none}
  .bar:not(.open) .filters label{display:none}
  .bar:not(.open) .filters .fg.grow{flex:1 1 0;min-width:0}
  .bar:not(.open) #f-q{width:100%}
  .bar:not(.open) #btn-import{padding:6px 10px;white-space:nowrap;flex:0 0 auto}
  .bar.open .filters{flex:1 1 100%;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
  .map-tools{display:none}
  .bar.open .map-tools{display:flex;position:static;order:3}
  .only-wide{display:none}
  .only-narrow{display:inline}
  #panel{top:auto;left:12px;right:12px;bottom:12px;width:auto;height:46%;transition:height .22s ease}
  /* 收起来只留标题条，给地图腾出整块地方 */
  #panel.collapsed{height:48px}
  #panel.collapsed .list,#panel.collapsed .detail{display:none}
  /* 收起时页脚一起藏：48px 的横条塞不下两行字，不藏会被 overflow 切一半，更难看 */
  #panel.collapsed .panel-foot{display:none}
  #panel.collapsed .panel-head{border-bottom:none}
  .collapse-toggle{display:inline-flex}
  /* 照片高度上限在窄屏要再收一档：面板本身只占屏幕 36.5vh（46% of 844），
     沿用宽屏那个 46vh 等于让一张图占掉一个多面板。收窄的图会自己居中，整张还在。 */
  .shot img{max-height:34vh}
  .legend{display:none}
  /* 两个入口：窄屏贴着面板上沿 —— 拇指够得到，也不跟顶栏抢那一行。
     面板高度就是上面那句 height:46%，所以用同一个比例算，别写死 px；
     面板收起来只剩 48px 时跟着落下去（.entries 在 DOM 里必须排在 #panel 之后）。 */
  .entries{top:auto;bottom:calc(46% + 24px)}
  #panel.collapsed ~ .entries{bottom:72px}   /* 48px 面板 + 12 边距 + 12 间距 */
}