/* =============================================================
   site.css —— 全站唯一的样式表（index / spot / food / eat / plan / info 共用）

   规矩（改之前先看）：
   1. 颜色、圆角、字体只在 §1 的 :root 里定义；其他地方一律 var()，不写色值。
   2. 页面里不写 <style>，也不写 style=""。缺样式就在这里加 class。
      唯一例外：评分条的宽度由数据决定，由 site.js 写 style="width:…"。
   3. §3 是跨页组件。新页面先用现有组件拼，拼不出来再加，加在 §3 并注明用途。
   4. §4 只放某一页独有的布局，按页分段；第二个页面也要用时，挪到 §3。
   5. 变体名 = token 名：.pill.good 用 --good，.callout.soga 用 --soga。
   6. 只做暗色，不跟随系统、没有主题切换。color-scheme:dark 必须留 ——
      少了它 <select> 和数字输入框会用系统亮色控件。
   ============================================================= */

/* ---------- §1 tokens ---------- */
:root{
  /* 视觉方向：Binance DESIGN.md（awesome-design-md，MIT）。
     取的是配色与形状口径，不是品牌 —— 页面没有任何 Binance 标识。 */
  color-scheme:dark;
  --ground:#0B0E11; --surface:#1E2329; --surface-2:#2B3139;
  --line:#2B3139; --line-soft:#2B3139;
  --ink:#EAECEF; --ink-2:#929AA5; --ink-3:#707A8A;
  --indigo:#EAECEF; --indigo-soft:#2B3139;
  --soga:#2DBDB6; --soga-soft:#12292A;
  --good:#0ECB81; --good-soft:#12261F;
  --warn:#F0B90B; --warn-soft:#2B2410;
  --risk:#F6465D; --risk-soft:#2B1A1E;
  /* Binance Yellow：CTA 色，填充用、字压黑。只准出现在：
     必去／必吃（卡片左条与角标，必吃是美食清单里的同一个角色）、选中的筛选 chip、导航当前页、推荐方案、订票步骤序号、
     行程时刻表的 D1–D4 日期标签 */
  --pick:#181A20; --pick-soft:#FCD535;
  --lift:0 1px 2px rgba(0,0,0,.5);
  --surf-low:#1E2329; --surf:#2B3139; --surf-high:#333A44;
  /* state layer：rgba(var(--ink-rgb), .05 hover / .06 / .09 active / .10) */
  --ink-rgb:234,236,239;
  --alert-bg:#2B3139;
  /* 行程图按天分色：红留给风险，不进这一组 */
  --d1:#2DBDB6; --d2:#F0B90B; --d3:#0ECB81; --d4:#707A8A;
  /* 圆角上限 12px（Binance 口径），卡片与面板一律 --radius */
  --radius:8px; --r-sm:6px; --r-xs:4px;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  /* Binance 体系没有衬线角色：--serif 指向无衬线，标题靠 700 重量与 -.02em 字距 */
  --serif:var(--sans);
}

/* ---------- §2 base ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
img{max-width:100%}
[hidden]{display:none!important}
p{margin:0}
a{color:var(--indigo);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(var(--ink-rgb),.4)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:var(--r-xs)}
h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;text-wrap:balance}
h1{font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(19px,4.4vw,23px);line-height:1.3}
h3{font-size:16px;font-weight:600;line-height:1.4}
code{font-family:var(--mono);font-size:.9em}
/* 数字一律等宽 + 定宽数字，金额才能成列对齐 */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:980px;margin:0 auto;padding-inline:16px;padding-block:0 56px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- §3 组件 ---------- */

/* 站内导航 —— 内容由 site.js 的 PARTS.nav 生成；min-height 预留高度，免得渲染时跳动 */
.topnav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;min-height:58px;padding-block:12px;margin-bottom:14px}
.topnav a{font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
.topnav a:hover{color:var(--ink)}
/* 当前页：黄字 + 黄下划线，和选中的 chip 同一个「选中」角色 */
.topnav a[aria-current]{color:var(--pick-soft);border-bottom-color:var(--pick-soft);font-weight:700}

/* 页首：eyebrow + h1 + lede + facts，三个页面同一套 */
.pagehead{display:flex;flex-direction:column;gap:10px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow a{color:inherit}
.lede{color:var(--ink-2);max-width:62ch}
.facts{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:4px 0 0;padding:0}
.facts li{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink-2);
  background:var(--surf);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:3px 9px}

/* 段落：eyebrow + h2 */
.section{margin-top:38px}
.sechead{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}

/* 小标签：筛选行标题、字段名、来源行 */
.label,dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

/* 面板：所有「一块东西」的底 —— 卡片、方案、订票步骤、表格外框 */
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius)}

/* pill：默认等宽（多数装的是数字）；.txt 放文字；.tag 是必去／独特体验／推荐这类角标 */
.pill{font-family:var(--mono);font-size:11.5px;line-height:1.5;padding:2px 7px;border-radius:var(--r-sm);
  background:rgba(var(--ink-rgb),.06);color:var(--ink-2);white-space:nowrap}
.pill.txt{font-family:var(--sans);font-size:12px}
.pill.tag{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em}
.pill.ink{background:var(--indigo-soft);color:var(--indigo)}
.pill.good{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.risk{background:var(--risk-soft);color:var(--risk)}
.pill.soga{background:var(--soga-soft);color:var(--soga)}
.pill.pick{background:var(--pick-soft);color:var(--pick)}
.pill .sgd{color:inherit}

/* 来源角标：绿＝官方，灰＝二手 */
.srcmark{font-family:var(--mono);font-size:10.5px;padding:1px 5px;border-radius:var(--r-xs);margin-left:5px;vertical-align:1px;white-space:nowrap}
.srcmark.off{background:var(--good-soft);color:var(--good)}
.srcmark.sec{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line-soft)}
/* 类名别叫 gmap —— 行程方案页的行程地图 svg 用的就是 .gmap（display:block;width:100%），
   撞上之后这枚角标会被撑成一整条横杠 */
.srcmark.google{background:var(--soga-soft);color:var(--soga)}
/* 详情页「人均」：主行 + 二手资料小字 */
.costmain{display:inline}
/* 详情页字段里角标在句首时，边距换到右边。限定在 .fields 里面 ——
   info.html 有一批句尾角标，靠 :first-child 一刀切会误伤 */
.costmain .srcmark:first-child,
dl.fields dd > .srcmark:first-child{margin-left:0;margin-right:6px}
.costsub{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.costsub b{font-weight:500;color:var(--ink-3);margin-right:6px;
  font-family:var(--mono);font-size:10.5px;padding:1px 5px;border-radius:var(--r-xs);
  background:var(--surface-2);border:1px solid var(--line-soft)}

/* 金额：由 site.js 的 moneyHTML 生成，改汇率时只刷新 .sgd */
.money{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.sgd{color:var(--ink-3)}

/* 警示条：灰底 + 左侧色条分级。<div> 直接展开；<details> 可折叠，summary 里带 .tag */
.alerts{display:grid;gap:10px}
.alert{background:var(--alert-bg);border:1px solid var(--line-soft);border-left:3px solid var(--ink-3);border-radius:var(--radius);padding:13px 15px}
.alert.risk{border-left-color:var(--risk)}
.alert.warn{border-left-color:var(--warn)}
.alert.note{border-left-color:var(--indigo)}
.alert h3{font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.5}
.alert p{font-size:13.5px;color:var(--ink-2)}
.alert h3 + p{margin-top:4px}
.alert a{color:inherit}
.alert .num{color:var(--ink);font-weight:500}
.alert .tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:3px;white-space:nowrap}
.alert.risk .tag{color:var(--risk)}
.alert.warn .tag{color:var(--warn)}
.alert.note .tag{color:var(--indigo)}
details.alert > summary{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;cursor:pointer;list-style:none}
details.alert > summary::-webkit-details-marker{display:none}
details.alert > summary::after{content:"▾";color:var(--ink-3);font-size:12px;transition:transform .18s;padding-top:2px}
details.alert[open] > summary::after{transform:rotate(180deg)}
details.alert > p{margin-top:8px;padding-left:calc(2.6em + 12px)}
@media (max-width:520px){ details.alert > p{padding-left:0} }

/* chip：未选中＝描边透明底；选中＝黄底 + 前置对勾（双通道，不只靠颜色）。
   对勾是常驻 DOM 的 .ck（site.js 的 CHECK），手写的静态 chip 要自己带上 */
.chip{font:inherit;font-size:13px;cursor:pointer;background:transparent;color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 12px;display:inline-flex;align-items:center;gap:6px;transition:background .12s,color .12s,border-color .12s}
.chip:hover{background:rgba(var(--ink-rgb),.06);color:var(--ink)}
.chip:active{background:rgba(var(--ink-rgb),.10)}
.chip[aria-pressed="true"]{background:var(--pick-soft);border-color:transparent;color:var(--pick);font-weight:600;padding-left:8px}
.chip .ck{width:15px;height:15px;flex:none;display:none}
.chip[aria-pressed="true"] .ck{display:block}
.rowline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rowline.tight{gap:6px}

/* 表单控件 */
select,input[type="search"],input[type="number"]{font:inherit;font-size:13px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px}
input[type="number"]{width:84px;font-family:var(--mono)}

/* 景点卡片（UI.card）：清单页的列表、详情页的「同线路」都用它。
   一律同一个底，必去只多一根黄色左条，其余标记交给角标 */
.list{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:0}
.card{box-shadow:var(--lift);overflow:hidden}
.card.must{border-left:3px solid var(--pick-soft)}
.card .head{display:grid;grid-template-columns:auto 1fr auto;gap:10px 14px;align-items:center;padding:12px 14px;color:inherit;text-decoration:none}
.card .head:hover{background:rgba(var(--ink-rgb),.05)}
.card .head:active{background:rgba(var(--ink-rgb),.09)}
/* 卡片 overflow:hidden，外扩的焦点框会被裁掉，改成内收 */
.card .head:focus-visible{outline-offset:-2px}
.thumb{width:74px;height:74px;border-radius:var(--radius);object-fit:cover;display:block;background:var(--surface-2);flex:none}
.thumb.noimg{display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-family:var(--mono);font-size:18px}
.headmain{min-width:0}
.titleline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.card .name{font-size:17.5px;font-weight:600;letter-spacing:.01em;line-height:1.35}
.local{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.metaline{display:flex;flex-wrap:wrap;gap:6px}
.card .metaline{margin-top:7px}

/* 评分块（UI.score）：谷歌评分 + 我的总分 */
.score{display:flex;align-items:center;gap:14px}
.score .g{text-align:right;line-height:1.25}
.score .gr{font-family:var(--mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.score .gc{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.score .none{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.score .tot{display:flex;align-items:baseline;gap:5px}
.score .n{font-family:var(--mono);font-size:26px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.score .d{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

@media (max-width:560px){
  .card .head{grid-template-columns:64px 1fr;gap:8px 10px;align-items:start}
  .card .thumb{width:64px;height:64px}
  .card .metaline{gap:5px;margin-top:6px}
  .card .pill{font-size:11px;padding:2px 6px}
  .card .name{font-size:16px}
  .card .score{grid-column:2;justify-content:flex-start;gap:12px}
  .score .g{text-align:left}
  .score .n{font-size:22px}
}

/* 景点详情（UI.detail） */
.detail{display:flex;flex-direction:column;gap:22px}

/* 照片 + 地图 */
.media{display:grid;gap:10px}
.shots{display:grid;gap:10px}
/* 照片框 3:2 —— 不是 4:3。两个图库下来的图绝大多数是 3:2 或 16:9，
   4:3 会把 16:9 的图左右各切掉 12%（keraton 那张切到 28%），主体经常被切没。
   手机那条分支本来就按 0.667 也就是 3:2 算高度，这里改完两边才一致。
   改之前先看一眼：45 张里 18 张是 3:2，改后这 18 张零裁切。 */
.shot{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);aspect-ratio:3/2}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.nophoto{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.mapwrap{display:flex;flex-direction:column;gap:8px}
.mapframe{width:100%;aspect-ratio:16/9;border:1px solid var(--line-soft);border-radius:var(--radius);display:block;background:var(--surface-2)}
.mapbtn{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:11px 14px}
.mapbtn:hover{border-color:var(--indigo)}
.mapbtn-i{font-size:19px;color:var(--indigo);line-height:1}
.mapbtn b{display:block;font-size:14px;font-weight:700}
.mapbtn small{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
@media (min-width:640px){
  /* 宽屏：照片和地图排进同一张两列网格。.shots 用 display:contents 把照片直接交给 .media */
  .media{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{display:contents}
  /* 一张照片（或无图）：地图占右半格，高度跟照片走 */
  .media.single .mapframe{aspect-ratio:auto;height:100%;min-height:240px}
  /* 两张照片：地图另起一整行 */
  .media:not(.single) .mapwrap{grid-column:1/-1}
  .media:not(.single) .mapframe{aspect-ratio:21/9}
}
@media (max-width:639px){
  /* 手机：照片横向滑动。用 grid 横滚、不用 flex：flex 行的交叉轴尺寸和 aspect-ratio
     互相依赖，容器高度会解析成 0。高度写死、不靠 aspect-ratio 往上推（踩过两次） */
  .shots{grid-auto-flow:column;grid-auto-columns:88%;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;gap:8px;padding-bottom:2px;height:calc((100vw - 32px) * 0.88 * 0.667 + 2px)}
  .media.single .shots{grid-auto-columns:100%;height:calc((100vw - 32px) * 0.667 + 2px)}
  .shots .shot{scroll-snap-align:start;aspect-ratio:auto;height:100%}
}

/* 五维评分条 */
.bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px}
.bar{display:grid;gap:4px}
.bar .lbl{display:flex;gap:6px;font-size:11.5px;color:var(--ink-3)}
.bar .lbl b{font-family:var(--mono);font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.track{height:4px;background:var(--line-soft);border-radius:var(--r-xs);overflow:hidden}
.fill{height:100%;background:var(--indigo);border-radius:var(--r-xs)}

/* 核准字段 */
dl.fields{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px 22px}
dl.fields > div{display:grid;gap:2px;min-width:0;align-content:start}   /* 不顶对齐的话，同行里短字段的 dd 会被撑开的行高推下去 */
dd{margin:0;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
dd .geo{font-family:var(--mono);font-size:12px;color:var(--ink-3)}   /* 留档坐标，只作参考 */

/* 提示块：默认＝决策（该怎么选）；.buzz＝口碑：赞与吐槽；.soga＝什么人会觉得踩雷 */
.callout{background:var(--indigo-soft);border-radius:var(--radius);padding:11px 13px;font-size:13.5px;color:var(--ink);line-height:1.65}
.callout .h{display:block;font-weight:700;font-size:12.5px;letter-spacing:.02em;margin-bottom:3px;color:var(--indigo)}
.callout.soga{background:var(--soga-soft)}
.callout.soga .h{color:var(--soga)}
.callout.buzz ul{margin:0;padding-left:1.2em}
.callout.buzz li+li{margin-top:5px}
.callout.buzz ul ul{margin-top:3px;list-style:circle}

/* 街区步行动线（UI.walk）：左边一根竖线串起各站，站与站之间标出米数。
   .pin＝下车／接车点（实心方块），.off＝当天不开的点（虚线圈＋整站压暗） */
/* 可折叠卡片的外壳与把手，UI.walk 与 UI.story 共用 */
.walk,.story{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:14px}
/* 标题行就是开合把手：小标题 + 一句摘要，右端一个 ▾。整行可点，所以给足 44px 的高度 */
.walk > summary,.story > summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;cursor:pointer;list-style:none;
  padding-block:11px;margin-block:-7px}
.walk > summary::-webkit-details-marker,.story > summary::-webkit-details-marker{display:none}
.walk > summary::after,.story > summary::after{content:"▾";margin-left:auto;color:var(--ink-3);font-size:12px;transition:transform .18s}
.walk[open] > summary::after,.story[open] > summary::after{transform:rotate(180deg)}
.walk > summary:hover .h,.story > summary:hover .h{color:var(--ink)}
.walk .h,.story .h{display:block;font-weight:700;font-size:12.5px;letter-spacing:.02em;color:var(--indigo)}
.walk .wsum,.story .wsum{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.walk[open] .wsum,.story[open] .wsum{display:none}
.walk .wnote,.story .wnote{margin:9px 0 11px;font-size:13px;color:var(--ink-2);line-height:1.65}
/* §4.2 的 .fields 在这里复用来排「年代→发生了什么」和「层→看什么」 */
.story .fields{margin-top:2px}
.story .sub{display:block;margin:14px 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.walk .walkall{margin-bottom:14px}
.walkstops{list-style:none;margin:0;padding:0}
.walkstops li{position:relative;padding:0 0 16px 26px}
/* 竖线：从圆点下缘拉到下一站，最后一站不画。
   圆点对齐站名那一行（top:20px），不是上面的米数 —— 米数属于「上一站到这一站」那段路，
   正好落在竖线旁边，读起来是「走 156 m ●到这一站」 */
.walkstops li::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line)}
.walkstops li:first-child::before{top:20px}
.walkstops li:last-child{padding-bottom:0}
.walkstops li:last-child::before{bottom:auto;height:20px}
/* 圆点 */
.walkstops li::after{content:"";position:absolute;left:0;top:20px;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--indigo);background:var(--ground);box-sizing:border-box}
.walkstops li.pin::after{border-radius:var(--r-xs);background:var(--pick-soft);border-color:var(--pick-soft)}
.walkstops li.off::after{border-style:dashed;border-color:var(--ink-3)}
.walkstops li.off .s{opacity:.62}
.walkstops li.off::before{background:repeating-linear-gradient(var(--line) 0 3px,transparent 3px 6px)}
/* 距上一站：小字贴在站名上方 */
.walk .gap{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);margin-bottom:2px}
.walk .gap.start{color:var(--pick-soft)}
.walk .sline{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:14px}
.walk .sline .local{font-size:12px;color:var(--ink-3)}
.walk .open{margin:3px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.walk .tip{margin:4px 0 0;font-size:13px;color:var(--ink-2);line-height:1.6}
.walk .nav{display:inline-block;margin-top:5px;font-size:12px;color:var(--indigo);text-decoration:none;
  border-bottom:1px solid rgba(var(--ink-rgb),.35)}
.walk .nav:hover{border-bottom-color:var(--indigo)}

.linkrow{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:12.5px;align-items:center}

/* 页脚 */
.pagefoot{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);display:grid;gap:10px}
.pagefoot b{color:var(--ink-2)}
.empty{padding:40px 0;text-align:center;color:var(--ink-3);font-size:14px}

/* ---------- §4 页面布局 ---------- */

/* §4.1 清单页 spots.html */
.controls{position:sticky;top:0;z-index:20;background:var(--ground);padding-block:10px;margin-top:20px;margin-bottom:4px;border-bottom:1px solid var(--line-soft)}
.ctrlbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ctrlbar input[type="search"]{min-width:130px;flex:1 1 150px;max-width:250px}
.ctrlpanel{display:grid;gap:9px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.ctrlpanel .note{margin:-4px 0 0;font-size:12px;color:var(--ink-3);line-height:1.5}
/* 多选下拉：触发钮沿用 chip 的样子，菜单里装的还是 chip */
.dd{position:relative}
.dd-btn .caret{font-size:10px;opacity:.7;margin-left:1px}
.dd-btn .badge{font-family:var(--mono);font-size:11px;opacity:.85}
.dd-menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;
  min-width:210px;max-width:min(80vw,340px);max-height:min(58vh,360px);overflow:auto;
  display:flex;flex-direction:column;gap:8px;padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--lift)}
.dd-menu.flip{left:auto;right:0}
.dd-menu .dd-clear{align-self:flex-start;font-size:12px;color:var(--ink-3)}
.toggler{font-weight:500}
.toggler[aria-expanded="true"]{border-color:var(--indigo);color:var(--indigo)}
.toggler .badge{font-family:var(--mono);font-size:11px;margin-left:5px;opacity:.85}
.count{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-left:auto;white-space:nowrap}
/* 面板底部的收起钮：面板一长，顶上那个「筛选」钮就滚远了，末尾再给一个出口 */
.panelclose{font:inherit;font-size:12.5px;cursor:pointer;width:100%;
  display:flex;align-items:center;justify-content:center;gap:5px;
  background:transparent;color:var(--ink-3);border:0;border-top:1px dashed var(--line);
  padding:12px 0;margin-top:1px}
.panelclose:hover{color:var(--ink)}
.panelclose svg{width:16px;height:16px;flex:none}

/* 讲解插图（site.js 的 FIGS）：纯内联 SVG，颜色一律走 token。
   类名用 .big/.sm，别用 .sub —— .story .sub 是段落小标题，会串到 <text> 上 */
.fig{margin:11px 0 2px;max-width:420px}
.fig svg{display:block;width:100%;height:auto}
.fig figcaption{margin-top:7px;font-size:12px;color:var(--ink-3);line-height:1.6}
.fig .big{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink)}
.fig .sm{font-family:var(--mono);font-size:10px;fill:var(--ink-3)}   /* 375px 屏上换算约 9.8px，再小就糊了 */
.fig .kamadhatu{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.fig .rupadhatu{fill:var(--surf-high);stroke:var(--ink-2);stroke-width:1}
.fig .arupadhatu{fill:none;stroke:var(--soga);stroke-width:1.5}
.fig .top{fill:var(--pick-soft);stroke:none}
.fig .brace{stroke:var(--ink-3);stroke-width:1;fill:none}
.fig .plan{fill:var(--surf-high);stroke:var(--line);stroke-width:1}
.fig .arc{fill:none;stroke:var(--pick-soft);stroke-width:1.5;stroke-dasharray:4 4}

/* §4.2 详情页 spot.html */
.spottitle{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px}
.spottitle .local{font-size:12.5px}

/* §4.3 行程方案页 index.html */
.plan{padding:18px;display:flex;flex-direction:column;gap:16px;margin-top:14px}

/* 行程示意图 */
.mapfig{margin:0;display:flex;flex-direction:column;gap:10px}
.basemapdefs{position:absolute;width:0;height:0;overflow:hidden}
.gmap{display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--ground)}
.gmap .scrim{fill:var(--ground);opacity:.28}
.gmap .leg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.gmap .gdot{stroke:var(--ground);stroke-width:2}
.gmap .d1f{fill:var(--d1)}.gmap .d2f{fill:var(--d2)}.gmap .d3f{fill:var(--d3)}.gmap .d4f{fill:var(--d4)}
.gmap .base{stroke:var(--ground);stroke-width:7;opacity:.55}
.gmap .g1{stroke:var(--d1);stroke-width:3}
.gmap .g2{stroke:var(--d2);stroke-width:3}
.gmap .g3{stroke:var(--d3);stroke-width:3}
.gmap .g4{stroke:var(--d4);stroke-width:3;stroke-dasharray:9 7}
.gmap .gnode{fill:var(--ground);stroke-width:3}
.gmap .n1{stroke:var(--d1)}.gmap .n2{stroke:var(--d2)}.gmap .n3{stroke:var(--d3)}.gmap .gx{stroke:var(--d4)}
.gmap .gnum{font-family:var(--mono);font-size:13px;font-weight:500;text-anchor:middle}
.gmap .n1t{fill:var(--d1)}.gmap .n2t{fill:var(--d2)}.gmap .n3t{fill:var(--d3)}
.gmap .ghub{fill:var(--ground);stroke:var(--ink);stroke-width:3}
.gmap .ghub2{fill:var(--ink)}
.gmap .lead{stroke:var(--ink-3);stroke-width:1;opacity:.7}
.gmap .glbl{font-family:var(--sans);font-size:15px;font-weight:700;fill:var(--ink);
  paint-order:stroke;stroke:var(--ground);stroke-width:4;stroke-linejoin:round}
.gmap .gsub{font-family:var(--mono);font-size:12.5px;fill:var(--ink-2);
  paint-order:stroke;stroke:var(--ground);stroke-width:4;stroke-linejoin:round}
.gmap .gattr{font-family:var(--sans);font-size:10.5px;fill:var(--ink-3);opacity:.8}
.glegend{display:flex;flex-wrap:wrap;gap:12px}
.gkey{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.gkey em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.gkey .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.k1 .dot{background:var(--d1)}.k2 .dot{background:var(--d2)}.k3 .dot{background:var(--d3)}.k4 .dot{background:var(--d4)}
.rbtns{display:flex;flex-wrap:wrap;gap:6px}
.rbtn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;text-decoration:none;
  padding:5px 11px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
.rbtn:hover{background:var(--surf-high);border-color:var(--ink-3)}
.rbtn .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.r1 .dot{background:var(--d1)}.r2 .dot{background:var(--d2)}.r3 .dot{background:var(--d3)}.r4 .dot{background:var(--d4)}
.mapfig figcaption{font-size:12.5px;color:var(--ink-3);line-height:1.6}

/* 时刻表 */
.day{display:flex;flex-direction:column;gap:2px;scroll-margin-top:16px}
/* 「每日行程安排」标题下的 D1–D4 快速定位；样式对齐 .tlnav，只是字号大一档 */
.daynav{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.daynav a{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;line-height:1.5;
  padding:4px 10px;border-radius:var(--r-sm);background:var(--surf);border:1px solid var(--line-soft);
  color:var(--ink-2);text-decoration:none;white-space:nowrap}
.daynav a b{color:var(--ink);font-weight:600;margin-right:4px}
.daynav a:hover{border-color:var(--indigo);color:var(--ink)}
.daynav a:target,.daynav a:focus-visible{border-color:var(--indigo)}
.daylabel{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:6px}
.daylabel .d{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:500;
  color:var(--pick);background:var(--pick-soft);border-radius:var(--r-sm);padding:2px 8px}
.daylabel .note{font-size:12.5px;color:var(--ink-3)}
.tl{display:grid;grid-template-columns:40px 1fr;gap:0 14px}
.tl > .t{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink-3);
  padding:7px 0;border-top:1px solid var(--line-soft);white-space:nowrap}
.tl > .e{padding:7px 0;border-top:1px solid var(--line-soft);font-size:14px}
.tl > .t:first-of-type,.tl > .e:first-of-type{border-top:0}
.tl .sub{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:2px}
.tl em{font-style:normal;color:var(--risk);font-weight:500}
/* 时刻表里的导航链接：下车点／整条步行路线／接车点，点开直接落进谷歌地图的路线规划 */
.tlnav{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tlnav a{font-family:var(--mono);font-size:11.5px;line-height:1.5;padding:3px 8px;border-radius:var(--r-sm);
  background:var(--surf);border:1px solid var(--line-soft);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.tlnav a:hover{border-color:var(--indigo);color:var(--ink)}
/* 时刻表配图：只给当天的主要站点，断开成片的文字。图裁 16:9，宽度收窄，
   不让它在 980px 的版心里长成一张大图 */
.tl .tlshot{margin:8px 0 3px;max-width:340px;aspect-ratio:16/9;
  border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)}
.tl .tlshot img{width:100%;height:100%;object-fit:cover;display:block}
/* 时刻表里嵌的街区步行动线：跟配图一样收窄，默认收起时只占一行 */
.tl .walk{margin:8px 0 3px;max-width:560px}

/* 取舍 */
.ledger{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.col{background:var(--surf-low);border-radius:var(--r-sm);padding:11px 13px}
.col h3{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.col ul{margin:0;padding-left:16px;font-size:13.5px;line-height:1.62}
.col.get h3{color:var(--good)}
.col.cut li{color:var(--ink-2)}
.cost{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.cost b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink)}
.scroll + .cost{margin-top:10px}
.verdict{border-left:3px solid var(--line);padding:2px 0 2px 13px;font-size:13.5px;color:var(--ink-2)}

/* 对照表 */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
th,td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{background:var(--surf-high);font-size:12px;font-weight:700;white-space:nowrap;position:sticky;top:0}
tbody th{font-weight:500;color:var(--ink-2);white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 订票清单 */
.steps{display:flex;flex-direction:column;gap:10px;counter-reset:s}
.step{padding:13px 15px;display:grid;grid-template-columns:26px 1fr;gap:0 12px;align-items:start}
.step::before{counter-increment:s;content:counter(s);font-family:var(--mono);font-size:12px;font-weight:500;
  color:var(--pick);background:var(--pick-soft);border-radius:50%;width:24px;height:24px;display:grid;place-items:center;margin-top:1px}
.step h3{font-family:var(--sans);font-size:14px;font-weight:700}
.step p{font-size:13.5px;color:var(--ink-2);margin-top:3px}
.step .q{margin:6px 0 0;padding-left:16px;font-size:13px;color:var(--ink-2);line-height:1.6}
/* 订票步骤里贴给司机／客服的原文块，彼此和正文之间要留口气 */
.step .callout{margin-top:9px}
.step .callout + p{margin-top:9px}

@media (max-width:600px){
  .tl{grid-template-columns:38px 1fr;gap:0 12px}
  /* 收紧一档，让 D1–D4 四颗在 375px 下排成一行 */
  .daynav{gap:4px}
  .daynav a{font-size:11px;padding:4px 6px}
  .daynav a b{margin-right:3px}
  .tl > .t{font-size:12px}
  .tl .tlshot{max-width:none}
  /* 窄屏里时刻表那一列本来就只剩 260 px，步行动线卡收一档内边距 */
  .tl .walk{max-width:none;padding:11px}
  .tl .walkstops li{padding-left:22px}
  .ledger{grid-template-columns:1fr}
  .plan{padding:15px}
}

/* §4.4 美食清单 food.html 与详情 eat.html
   卡片、筛选、详情字段全部复用 §3；这里只补美食多出来的两处 */
/* 评分块里第二行 TA 评分 */
.score .gc + .gc{margin-top:1px}
/* 照片 3 张或 5 张时，宽屏首图横跨两列，避免网格留洞 */
@media (min-width:640px){
  .media.odd .shot:first-child{grid-column:1/-1;aspect-ratio:16/9}
}
/* 照片版权说明 */
.photocredit{font-size:11.5px;color:var(--ink-3)}

/* §4.5 实用信息 info.html
   步骤、表格、字段、提示块都复用 §3 与 §4.3；这里只补计算器、说明面板和小卡片网格 */
.subhead{margin:22px 0 10px}
.sechead.subsec{margin-top:30px}
.hint{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.hint b{color:var(--ink-2)}

/* 汇率计算器 */
.fxcalc{padding:16px;display:grid;gap:14px}
.fxfields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fxfield{display:grid;gap:4px;min-width:0}
.fxin{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:18px;width:100%;min-width:0;
  background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px}
.fxin:focus{border-color:var(--ink-3);outline:none}
.fxin::placeholder{color:var(--ink-3);font-size:14px}
.fxrates{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.fxrates input[type="number"]{width:96px}
.fxcalc table{min-width:0}
.fxcalc td.n,.fxcalc th.n{white-space:nowrap}
@media (max-width:560px){ .fxfields{grid-template-columns:1fr} }

/* 说明面板：段落 + 列表 */
.guide{padding:15px 17px;display:grid;gap:10px;font-size:13.5px;line-height:1.65}
.guide h3{font-family:var(--sans);font-size:14px;font-weight:700;margin-top:4px}
.guide ol,.guide ul{margin:0;padding-left:1.25em}
.guide li+li{margin-top:5px}
.guide .callout{margin-block:2px}

/* 火车时刻：一行一串时间，允许折行 */
table.tt{min-width:0}
table.tt td{white-space:normal;word-spacing:.2em;line-height:1.8}

/* 其他：小卡片网格 */
.infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.infocard{padding:13px 15px;display:grid;gap:5px;align-content:start}
.infocard h3{font-family:var(--sans);font-size:14px;font-weight:700}
.infocard p{font-size:13.5px;color:var(--ink-2);line-height:1.65}
.infocard .num{color:var(--ink)}
.section > .linkrow{margin-top:12px}
/* 分店表（美食详情页，品牌有多家分店时） */
.branchlist{background:var(--surf);border-radius:var(--radius);padding:11px 13px;font-size:13.5px}
.branchlist .h{display:block;font-weight:700;font-size:12.5px;margin-bottom:5px;color:var(--ink-2)}
.branchlist ul{margin:0;padding-left:1.1em;display:grid;gap:3px}
.branchlist li span{color:var(--ink-3);font-size:12.5px;margin-left:6px}

/* §4.6 时差换算 timezone.html（未挂进导航，从 info.html 的时差卡片双击进入）
   四地卡片复用 .fxin 做输入框；日／夜用 --warn 系借色，不占 --pick（那个色只留给必去/选中/D1-D4） */
.tzgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}
.tzcard{padding:18px;display:grid;gap:12px}
.tzcard .city-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tzcard .city{font-size:18px;font-weight:700}
.tzcard .country{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.tzcard input[type="datetime-local"]{width:100%;font-size:19px;font-weight:600;padding:10px 12px}
.tzrow{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2)}
.tzdot{width:8px;height:8px;border-radius:50%;flex:none}
.tzdot-day{background:var(--warn)}
.tzdot-night{background:var(--ink-3)}

/* 常用时间：面板 + 存表单 + 已存清单 */
.tzpinbox{padding:18px;display:grid;gap:16px}
.tzpinform{display:flex;gap:10px;flex-wrap:wrap}
.tzpinform input[type="text"]{flex:1 1 220px;font:inherit;font-size:13.5px;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px}
.tzpinform input[type="text"]:focus{border-color:var(--ink-3);outline:none}
.tzpins{display:flex;flex-direction:column;gap:10px}
.tzpin{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px}
.tzpin .pin-title{font-weight:700;font-size:13.5px;margin-bottom:8px}
.tzpin .chips{display:flex;flex-wrap:wrap;gap:6px}
.tzpin .actions{display:flex;gap:8px;flex:none}
.tzpin .actions button{font:inherit;font-size:12px;cursor:pointer;background:transparent;color:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 12px}
.tzpin .actions button:hover{background:rgba(var(--ink-rgb),.06);color:var(--ink)}

/* 实心 CTA：跳到此刻＝反色（浅底深字），存住当前时间＝借 --warn（这页的「白天」色） */
.tzbtn{font:inherit;font-weight:700;font-size:13px;border:none;border-radius:999px;padding:11px 22px;cursor:pointer;white-space:nowrap;transition:opacity .15s ease}
.tzbtn:hover{opacity:.88}
.tzbtn:active{opacity:.72}
.tzbtn.dark{background:var(--ink);color:var(--ground)}
.tzbtn.warn{background:var(--warn);color:var(--ground)}

/* 「四地对照」标题行：跳到此刻贴右边，跟卡片右缘对齐 */
.tzsechead{flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px}

/* 24 小时时间轴：谁醒着——胶囊条 + 竖线标此刻，3 小时一格刻度，底部图例 */
.tztimebox{padding:18px;display:grid;gap:16px}
.tztrack-row{display:flex;align-items:center;gap:12px}
.tzrow-label{width:80px;flex:none;font-size:13.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.tzline-wrap{position:relative;flex:1;min-width:0}
.tzline{height:20px;border-radius:10px;overflow:hidden;display:flex;border:1px solid var(--line-soft)}
.tzline .seg{flex:1 0 0}
.tzline-wrap .now{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--indigo)}
.tzaxis-track{position:relative;flex:1;min-width:0;height:16px;margin-top:2px}
.tzaxis-tick{position:absolute;top:0;font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.tzlegend{display:flex;flex-wrap:wrap;gap:16px;padding-left:92px}
.tzlegend span{display:inline-flex;flex:none;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.tzlegend i{width:12px;height:12px;border-radius:4px;flex:none;font-style:normal}
.tzlegend .tzday i{background:var(--warn)}
.tzlegend .tzdusk i{background:var(--warn-soft);border:1px solid var(--line-soft)}
.tzlegend .tznight i{background:var(--surface-2);border:1px solid var(--line-soft)}
@media (max-width:520px){
  .tzrow-label{width:56px;font-size:12px}
  .tzlegend{padding-left:68px}
  .tzaxis-tick.minor{display:none}
}