/* 晋南秋行 — app styles. Design tokens live on :root; dark theme mirrors them. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0}
img{max-width:100%}
:root{
  --bg:#f7f4ec; --card:#fffdf8; --ink:#2b2a26; --muted:#6b675c; --line:#e3ddcf; --line2:#cfc8b6;
  --gold:#c98a1a; --gold-soft:#f3e4bf; --brick:#4f6f8f; --brick-soft:#dfe8f1;
  --flag:#b8432f; --flag-soft:#f6dcd6; --green:#3f7a4e; --green-soft:#dcebdf;
  --route:#e8590c; --route-all:#9a9282; --stay:#c92a2a; --ring:#fff; --train:#7048e8; --map-bg:#f1ede4;
  --shadow:0 1px 2px rgba(40,30,10,.12),0 2px 8px rgba(40,30,10,.08); --icon-filter:none;
  /* hotel price tiers (经济/中档/中高端/高端): teal, blue, magenta, ochre — always paired with text */
  --t-budget:#1f7a6d; --t-mid:#2d5fa6; --t-upscale:#a3367f; --t-luxury:#8a6410;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1c1b18; --card:#26241f; --ink:#ede7da; --muted:#a8a294; --line:#3a372f; --line2:#4a463b;
    --gold:#e0a53a; --gold-soft:#3d3218; --brick:#8fb0cf; --brick-soft:#22303d;
    --flag:#e2705a; --flag-soft:#43261f; --green:#7cb98a; --green-soft:#22352a;
    --route:#ff8a3d; --route-all:#8a8475; --stay:#ff6b6b; --ring:#1c1b18; --train:#7048e8; --map-bg:#1a1917;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.35); --icon-filter:invert(1);
  --t-budget:#5cc2ad; --t-mid:#83aaec; --t-upscale:#e57fc0; --t-luxury:#dcb052;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1c1b18; --card:#26241f; --ink:#ede7da; --muted:#a8a294; --line:#3a372f; --line2:#4a463b;
  --gold:#e0a53a; --gold-soft:#3d3218; --brick:#8fb0cf; --brick-soft:#22303d;
  --flag:#e2705a; --flag-soft:#43261f; --green:#7cb98a; --green-soft:#22352a;
  --route:#ff8a3d; --route-all:#8a8475; --stay:#ff6b6b; --ring:#1c1b18; --train:#7048e8; --map-bg:#1a1917;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.35); --icon-filter:invert(1);
  --t-budget:#5cc2ad; --t-mid:#83aaec; --t-upscale:#e57fc0; --t-luxury:#dcb052;
  color-scheme:dark;
}
body{background:var(--bg);color:var(--ink);font-family:"Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.6;padding-inline:16px;padding-block:24px 48px}
.wrap{max-width:1180px;margin:0 auto}
h1,h2,h3{font-family:"Noto Serif SC","Songti SC","SimSun",serif;text-wrap:balance;margin:0}
h1{font-size:30px;line-height:1.2}
h2{font-size:20px;margin-block:40px 14px;padding-bottom:8px;border-bottom:2px solid var(--gold)}
h3{font-size:16px}
.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700}
.lead{color:var(--muted);margin-top:8px;max-width:64ch}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.kpi b{display:block;font-size:22px;font-family:"Noto Serif SC",serif;font-variant-numeric:tabular-nums}
.kpi span{color:var(--muted);font-size:13px}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:28px;align-items:start;margin-top:8px}
.mappanel{position:sticky;top:16px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px 10px}
.mappanel .mh{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mappanel .mh b{font-family:"Noto Serif SC",serif;font-size:15px}
.mappanel .mh span{color:var(--muted);font-size:12px;white-space:nowrap}
.mappanel .mt{font-size:13px;color:var(--muted);margin:2px 0 8px;min-height:1.6em}
#map{width:100%;height:calc(100vh - 230px);min-height:360px;max-height:760px;border-radius:6px;background:var(--map-bg);overflow:hidden}
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--muted)}
.legend i{display:inline-block;width:14px;height:0;border-top:3px solid var(--route);vertical-align:middle;margin-right:4px}
.legend i.dim{border-top:2px dotted var(--route-all)}
.legend i.train{border-top:2px dashed var(--train)}
.legend i.stay{width:9px;height:9px;border:2px solid var(--stay);border-radius:50%;background:var(--ring)}
.legend i.optm{width:8px;height:8px;border:2px solid var(--route);border-radius:50%;background:var(--ring)}
.legend i.hotel{position:relative;width:12px;height:12px;border:0;border-radius:3px;background:var(--t-mid)}
.legend i.hotel::after{content:"";position:absolute;inset:2px;background:var(--ring);-webkit-mask:var(--bed) center/contain no-repeat;mask:var(--bed) center/contain no-repeat}
/* whole-trip view: ordered day-colour strip, first item of the legend (map.js fills .dlbar, --c per swatch) */
.dlegend{display:inline-flex;align-items:center;gap:4px}
.dlegend[hidden]{display:none}
.dlend{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.dlbar{display:inline-flex;gap:2px}
.dlbar>span{display:block;width:10px;height:7px;border-radius:2px;background:var(--c)}
.mappanel.ov .legend .lday,.mappanel.ov .legend .lall{display:none}
.btn{font:500 12px "Noto Sans SC",sans-serif;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer}
.btn:hover{border-color:var(--gold)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.attr{font-size:10px;color:var(--muted);margin-top:6px}
/* hotel filter toolbar: its own row in the map footer (desktop); shares the 看全程 row on phones */
.mfoot .legend{flex:1 1 100%}
.hfbar{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px 4px}
.mfoot #btnAll{margin-left:auto;align-self:flex-end}
.hfbar[hidden]{display:none}
.hf-l{flex:none;font-size:11px;font-weight:700;color:var(--muted);margin-right:2px;white-space:nowrap}
.hf{position:relative;display:inline-flex;align-items:center;gap:4px;font:500 12px "Noto Sans SC",sans-serif;line-height:1.5;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:1px 9px;cursor:pointer;white-space:nowrap}
.hf::before{content:"";position:absolute;inset:-7px -2px}
.hf[aria-pressed="true"]{color:var(--ink);background:color-mix(in srgb,var(--tc,var(--gold)) 13%,var(--card));border-color:color-mix(in srgb,var(--tc,var(--gold)) 60%,var(--line))}
.hf[aria-pressed="false"].t-budget,.hf[aria-pressed="false"].t-mid,.hf[aria-pressed="false"].t-upscale,.hf[aria-pressed="false"].t-luxury{text-decoration:line-through;text-decoration-color:var(--line2)}
.hf:hover{border-color:var(--gold)}
.hf:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.hsw{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--tc)}
.hf[aria-pressed="false"] .hsw{background:none;box-shadow:inset 0 0 0 1.5px var(--tc)}
.hf-reset{border-style:dashed}
.maplibregl-map{font-family:"Noto Sans SC",-apple-system,"PingFang SC",sans-serif}
/* map markers (DOM): a ringed dot plus a pill label; map.js moves the label to
   .at-l / .at-t / .at-b when the default right-hand spot collides */
.mk{width:12px;height:12px;pointer-events:none} /* .maplibregl-marker positions it (absolute); do not override */
.mk i{position:absolute;inset:0;border-radius:50%;background:var(--route);box-shadow:0 0 0 2.5px var(--ring),var(--shadow)}
.mk.opt i{background:var(--ring);box-shadow:0 0 0 2.5px var(--route),var(--shadow);inset:1px}
.mk.stay i{inset:-1px;background:var(--ring);box-shadow:0 0 0 3.5px var(--stay),var(--shadow)}
.mk span{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:2px 7px;font-size:12px;line-height:1.5;font-weight:600;white-space:nowrap;box-shadow:var(--shadow)}
.mk.at-l span{left:auto;right:calc(100% + 8px)}
.mk.at-t span{left:50%;top:auto;bottom:calc(100% + 8px);transform:translateX(-50%)}
.mk.at-b span{left:50%;top:calc(100% + 8px);transform:translateX(-50%)}
.mk.opt span{font-weight:500;color:var(--muted)}
.mk.stay span{border-color:color-mix(in srgb,var(--stay) 45%,var(--line))}
/* hotel markers: rounded square + bed glyph in the tier colour; dashed outline = 非华住 */
:root{--bed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 19V5h2.5v9H11V8h7.5A3.5 3.5 0 0 1 22 11.5V19h-2.5v-2.5h-15V19z'/%3E%3Ccircle cx='7.7' cy='10.6' r='2.2'/%3E%3C/svg%3E")}
.t-budget{--tc:var(--t-budget)} .t-mid{--tc:var(--t-mid)} .t-upscale{--tc:var(--t-upscale)} .t-luxury{--tc:var(--t-luxury)}
.mk.hk{width:18px;height:18px;pointer-events:auto;cursor:pointer}
.mk.hk i{border-radius:5px;background:var(--tc);box-shadow:0 0 0 2px var(--ring),var(--shadow)}
.mk.hk i::after{content:"";position:absolute;inset:3px;background:var(--ring);-webkit-mask:var(--bed) center/contain no-repeat;mask:var(--bed) center/contain no-repeat}
.mk.hk.nonhz i{background:var(--ring);box-shadow:var(--shadow);outline:2px dashed var(--tc);outline-offset:-2px}
.mk.hk.nonhz i::after{background:var(--tc)}
.mk.hk.sel{width:26px;height:26px;z-index:2}
.mk.hk.sel i{border-radius:7px;box-shadow:0 0 0 3px var(--ring),0 0 0 5px var(--tc),var(--shadow)}
.mk.hk.sel i::after{inset:4px}
.mk.hk.sm{width:14px;height:14px}
.mk.hk.sm i{border-radius:4px}
.mk.hk.sm i::after{inset:2px}
.mk.hk span{color:var(--tc);border-color:color-mix(in srgb,var(--tc) 55%,var(--line));font-size:11px;padding:0 6px;font-variant-numeric:tabular-nums}
.mk.hk.sel span{background:var(--tc);color:var(--card);border-color:var(--tc);font-size:12px;padding:2px 8px}
.mk.hk.sm span{color:var(--ink)}
.mk.hk.nolbl span{display:none}
/* whole-trip day pill "D3" centred on its route: day colour (--c) as a thick ring; text stays ink for contrast */
.mk.dl{width:0;height:0;pointer-events:auto;cursor:pointer;z-index:3}
.mk.dl span{left:0;top:0;transform:translate(-50%,-50%);color:var(--ink);border:2.5px solid var(--c);border-radius:999px;padding:0 5px;font-size:11px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums}
.mk.dl span::before{content:"";position:absolute;inset:-6px -4px}
.mk.dl:hover span{box-shadow:0 0 0 2px var(--c),var(--shadow)}
.mk.dl:focus-visible{outline:none}
.mk.dl:focus-visible span{outline:2px solid var(--gold);outline-offset:2px}
.mk.hk:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.hpopup .maplibregl-popup-content{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;line-height:1.45}
.hpopup .maplibregl-popup-tip{display:none}
.hpopup .maplibregl-popup-close-button{color:var(--muted);font-size:18px;width:26px;height:26px;border-radius:0 10px 0 6px}
.hpop b{display:block;padding-right:18px;font-size:14px}
.hpop-d{font-size:11px;color:var(--muted)}
.hpop-m{display:flex;gap:6px;align-items:center;margin-top:4px;font-variant-numeric:tabular-nums}
.hpop-b{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.hpop-b:empty{display:none}
.hpop-a{display:flex;gap:6px;margin-top:8px}
.hpop-a .btn{font-size:13px;padding:4px 12px}
.maplibregl-ctrl-group{background:var(--card)!important;border:1px solid var(--line);box-shadow:var(--shadow)!important;border-radius:10px!important}
.maplibregl-ctrl-group button+button{border-top-color:var(--line)!important}
.maplibregl-ctrl-icon{filter:var(--icon-filter)}
.maplibregl-ctrl-attrib{font-size:10px;background:color-mix(in srgb,var(--card) 80%,transparent)!important;color:var(--muted)}
.maplibregl-ctrl-attrib a{color:var(--muted)}
.maplibregl-ctrl-attrib-button{filter:var(--icon-filter)}
/* phases + day cards */
.phase-h{display:flex;align-items:baseline;gap:10px;margin:28px 0 6px}
.phase-h:first-child{margin-top:0}
.phase-h h3{color:var(--gold)}
.phase-h small{color:var(--muted)}
.day{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px 12px;margin-top:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.day.active{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.dh{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.dh .date{display:flex;align-items:baseline;gap:6px;min-width:96px}
.dh .date b{font-family:"Noto Serif SC",serif;font-size:20px;font-variant-numeric:tabular-nums}
.dh .date span{color:var(--muted);font-size:12px}
.dh .drive{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dh .drive b{color:var(--ink);font-weight:500}
.dh .stayv{margin-left:auto;font-size:13px;color:var(--muted)}
.dh .stayv b{color:var(--ink);font-weight:700;margin-left:4px}
.dh .stayv{display:flex;align-items:baseline;min-width:0;max-width:100%}
.dh .stayh{color:var(--ink);margin-left:6px;padding-left:6px;border-left:1px solid var(--line2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dh .stayh:empty{display:none}
.stops{list-style:none;margin:10px 0 0;padding:0;position:relative}
.stops::before{content:"";position:absolute;left:67px;top:10px;bottom:10px;border-left:2px solid var(--line2)}
.stop{display:grid;grid-template-columns:48px 28px minmax(0,1fr);gap:0 6px;padding:5px 0;align-items:start}
.stop .when{font-size:12px;color:var(--muted);text-align:right;padding-top:4px;white-space:nowrap}
.stop .dot{width:11px;height:11px;border-radius:50%;background:var(--gold);border:2px solid var(--card);box-shadow:0 0 0 2px var(--gold);margin:7px auto 0;position:relative;z-index:1}
.stop.opt .dot{background:var(--card);box-shadow:0 0 0 2px var(--line2)}
.stop.rec .dot{background:var(--card);box-shadow:0 0 0 2px var(--gold)}
.stop .name{font-weight:700;line-height:1.45}
.stop.opt .name{font-weight:500}
.stop .desc{color:var(--muted);font-size:13px;line-height:1.5;margin-top:1px}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;margin-left:6px;vertical-align:1px;font-weight:500;white-space:nowrap}
.tag.book{background:var(--flag-soft);color:var(--flag)}
.tag.rec{background:var(--gold-soft);color:var(--gold)}
.tag.along{background:var(--brick-soft);color:var(--brick)}
.tag.skip{background:var(--line);color:var(--muted)}
.tag.film{border:1px solid var(--gold);color:var(--gold);padding-block:0}
.tag.warn{background:var(--flag-soft);color:var(--flag);border:1px dashed var(--flag)}
.tag.today{background:var(--green-soft);color:var(--green);font-weight:700}
.day:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tip{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:13px;color:var(--muted)}

/* 住宿 block in a day card (hotels.js) */
.hotels{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.hh{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:12px;color:var(--muted)}
.hh b{font-family:"Noto Serif SC","Songti SC",serif;font-size:14px;color:var(--ink)}
.hhidden{margin-left:auto;font-size:11px}
.hhidden[hidden]{display:none}
.hlist{list-style:none;margin:6px 0 0;padding:0}
.hrow{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;column-gap:7px;padding:4px 8px;border:1px solid transparent;border-radius:8px;cursor:pointer}
.hrow[hidden]{display:none}
.hrow+.hrow{margin-top:1px}
.hrow:hover{background:color-mix(in srgb,var(--tc) 5%,var(--card))}
.hrow.sel{background:color-mix(in srgb,var(--tc) 10%,var(--card));border-color:color-mix(in srgb,var(--tc) 50%,var(--line))}
.hrow.flash{animation:hflash 1.6s ease-out}
@keyframes hflash{0%,45%{box-shadow:0 0 0 3px var(--gold)}}
.hradio{width:16px;height:16px;margin:0;accent-color:var(--tc);cursor:pointer}
.hradio:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hpick{display:flex;cursor:pointer}
.hchip{display:inline-block;font-size:11px;font-weight:700;line-height:1.55;padding:0 5px;border-radius:4px;white-space:nowrap;color:var(--tc);background:color-mix(in srgb,var(--tc) 13%,var(--card));border:1px solid color-mix(in srgb,var(--tc) 45%,transparent)}
.hname{font:inherit;font-weight:600;color:var(--ink);background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline dotted var(--line2);text-underline-offset:3px}
.hname:hover{text-decoration-color:var(--gold)}
.hname:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
.hrow.nonhz .hname{font-weight:500}
.hprice{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.hsub{grid-column:2/-1;display:flex;gap:4px;align-items:center;width:0;min-width:100%;overflow:hidden;white-space:nowrap;font-size:11px;line-height:1.6;color:var(--muted)}
.hsub:empty{display:none}
.hrate{font-variant-numeric:tabular-nums;margin-right:2px}
.hb{display:inline-block;font-size:11px;font-weight:500;line-height:1.55;padding:0 6px;border-radius:999px;white-space:nowrap;background:var(--line);color:var(--muted)}
.hb-rec{background:var(--gold-soft);color:var(--gold);font-weight:700}
.hb-def{background:none;border:1px solid var(--line2);padding-block:0;line-height:1.4}
.hb-nonhz,.hb-approx{background:none;border:1px dashed var(--muted);line-height:1.4}
.hb-zone{background:var(--brick-soft);color:var(--brick)}
.hb-new{background:var(--flag-soft);color:var(--flag)}
.hb-far{background:var(--flag-soft);color:var(--flag);font-weight:700}
.hb-walk{background:var(--green-soft);color:var(--green)}
.hb-area-good{background:var(--green-soft);color:var(--green)}
.hb-area-warn{background:none;border:1px dashed var(--flag);color:var(--flag);line-height:1.4}
.hb-next{background:var(--line);color:var(--muted)}
.hb-rank{background:var(--flag);color:var(--card);font-weight:700}
.hb-nohz{background:none;border:1px dashed var(--line2);line-height:1.4}
.hprint{display:none}

/* hotel detail dialog (reuses the guide dialog frame) */
.hd-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:6px;font-size:12px;color:var(--muted)}
.hd-en{font-size:12px;color:var(--muted);margin-top:2px}
.hd-price{display:flex;align-items:baseline;gap:8px}
.hd-price b{font-family:"Noto Serif SC",serif;font-size:24px;font-variant-numeric:tabular-nums}
.hd-price span{font-size:12px;color:var(--muted)}
.hd-note{font-size:12px;color:var(--muted);margin:2px 0 10px}
.hd-act{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.hsel{font:600 13px "Noto Sans SC",sans-serif;color:var(--card);background:var(--gold);border:0;border-radius:999px;padding:4px 14px;cursor:pointer}
.hsel.on{background:var(--green)}
.hsel:focus-visible,.hd-copy:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hd-act .hsel{font-size:14px;padding:7px 18px}
.hd-act .btn{font-size:13px;padding:6px 14px;text-decoration:none}
.hd-dl{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:5px 10px;margin:0;font-size:14px}
.hd-dl dt{color:var(--muted);font-size:13px}
.hd-dl dd{margin:0}
.hd-dl small{display:block;font-size:12px;color:var(--muted)}
.hd-dl .hb{margin-left:4px}
.htel{color:var(--brick)}
.hdlg .gscroll p{margin:0 0 8px}
.hd-caveat{color:var(--flag)}
.hd-prefs{margin:0;padding-left:18px;font-size:14px}
.hd-prefs li{margin-block:3px}
.hd-prefs b{margin-right:6px;color:var(--muted);font-weight:500}
.hd-reserve{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--gold-soft);border-radius:8px;padding:10px 12px}
.hdlg .hd-reserve p{flex:1 1 100%;margin:0;user-select:text;-webkit-user-select:text}
.hd-copy{font-size:13px;padding:4px 14px}
.hd-copy.ok{border-color:var(--green);color:var(--green)}
.hd-copied{font-size:12px;color:var(--green)}
.hd-unv{margin-top:16px;padding:8px 12px 4px;border:1px dashed var(--line2);border-radius:8px;font-size:12.5px;color:var(--muted)}
.hdlg .hd-unv h3{margin-top:0;color:var(--muted)}
.hd-unv ul{margin:0 0 8px;padding-left:16px}
.hd-unv li{margin-block:3px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.card h3{margin-bottom:8px}
.card ul,.list ul{margin:0;padding-left:18px}
.card li,.list li{margin-block:4px}
.pro{color:var(--green)} .con{color:var(--flag)}
.check{list-style:none;padding:0;margin:0}
.check li{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.check li:first-child{border-top:0}
.check .when{font-variant-numeric:tabular-nums;font-weight:700;color:var(--flag)}
.check .when.soon{color:var(--gold)}
.q{background:var(--gold-soft);border-radius:8px;padding:16px 18px}
.q ol{margin:0;padding-left:20px}
.q li{margin-block:6px}
.src{color:var(--muted);font-size:12px;margin-top:40px;line-height:1.7}

/* collapse toggle: only shown on narrow screens, styled like the old inline hint */
.mtoggle{display:none;font:inherit;font-size:11px;color:var(--muted);background:none;border:0;padding:0;margin:0;cursor:pointer;white-space:nowrap}
.mtoggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}

/* todo checklist */
.check label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.check input{accent-color:var(--gold);width:15px;height:15px;margin:4px 0 0;flex:none;cursor:pointer}
.check input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.check li.done .txt{text-decoration:line-through;color:var(--muted)}
.check li.done .when{opacity:.5}

/* load error + update toast */
.err{background:var(--flag-soft);color:var(--flag);border:1px dashed var(--flag);border-radius:8px;padding:12px 14px;font-size:14px}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2000;
  font:500 13px "Noto Sans SC",sans-serif;color:var(--card);background:var(--ink);border:0;border-radius:999px;padding:8px 16px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.toast:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* guide affordance on a stop (讲解) */
.gbtn{position:relative;display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:500;line-height:1.5;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:0 7px;margin-left:6px;vertical-align:1px;text-decoration:none;white-space:nowrap;cursor:pointer}
.gbtn::before{content:"";position:absolute;inset:-9px -5px} /* ~44px tap target without changing the look */
.gbtn:hover{background:var(--gold-soft)}
.gbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gbtn .gico{font-size:10px}
/* with narration: filled pill + length, so "there is something to listen to" reads at a glance */
.gbtn{font-size:12px;padding:1px 8px}
.gbtn.has-audio{background:var(--gold-soft)}
.gbtn .gdur{margin-left:3px;font-size:11px;opacity:.8;font-variant-numeric:tabular-nums}

/* guide dialog: centred panel on wide screens, bottom sheet on phones */
html:has(dialog.guide[open]){overflow:hidden}
.guide{border:0;padding:0;background:var(--card);color:var(--ink);border-radius:12px;width:min(640px,calc(100vw - 32px));max-width:none;max-height:min(82vh,780px);box-shadow:0 16px 48px rgba(0,0,0,.28)}
.guide[open]{display:flex;flex-direction:column;animation:guide-in .18s ease-out}
.guide::backdrop{background:rgba(24,21,16,.45)}
@keyframes guide-in{from{opacity:0;transform:translateY(16px)}}
.gsheet{display:flex;flex-direction:column;min-height:0;flex:1}
.gh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.gh .eyebrow{letter-spacing:.12em}
.gh .tag{letter-spacing:0;text-transform:none;vertical-align:1px}
.guide h2{margin:2px 0 0;padding:0;border:0;font-size:22px;line-height:1.3}
.gclose{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--muted);font:500 15px/1 "Noto Sans SC",sans-serif;cursor:pointer}
.gclose:hover{border-color:var(--gold);color:var(--ink)}
.gclose:focus-visible,.gplay:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gscroll{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 18px 20px}
.gsum{margin:0 0 12px;padding-left:10px;border-left:3px solid var(--gold);font-weight:500}
.gplay{display:inline-flex;align-items:center;gap:8px;font:500 14px "Noto Sans SC",sans-serif;color:var(--card);background:var(--gold);border:0;border-radius:999px;padding:7px 16px 7px 12px;margin:0 0 14px;cursor:pointer}
.gplay.on{background:var(--ink)}
.gplay-ico{display:inline-block;width:1.1em;text-align:center;font-size:12px}
.gplay-dur{opacity:.8;font-variant-numeric:tabular-nums;font-size:12px}
/* in-dialog narration controls (mirror the shared player, which is hidden under the modal) */
.gpl{margin:0 0 14px}
.gpl .gplay{margin:0}
.gpl-main{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.gpl-time{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.gpl-ctl{display:flex;align-items:center;gap:8px;margin-top:8px}
.gpl:not(.cur) .gpl-ctl,.gpl:not(.cur) .gpl-time,.gpl.cur .gplay-dur{display:none}
.gpl-status{margin:6px 0 0;font-size:13px;color:var(--muted)}
.gpl-status:empty{display:none}
.gpl.failed .gpl-status{color:var(--flag)}
.gpl.loading .gplay{cursor:progress}
.pl-spin{display:inline-block;width:.95em;height:.95em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:pl-spin .8s linear infinite}
.pl-play .pl-spin{width:18px;height:18px}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pl-spin{animation:none!important;border-right-color:currentColor;opacity:.6}}
.gbody p{margin:0 0 10px}
/* long-form guides (v2): readable measure, sections, TOC, figures */
.guide.long{width:min(720px,calc(100vw - 32px));height:min(90vh,980px);max-height:none}
.gtext{max-width:38em;margin-inline:auto}
.gbody p,.gsec p{margin:0 0 12px;line-height:1.85;font-size:16px}
.gsec{scroll-margin-top:8px}
.gsec h3{font-size:17px;color:var(--ink);margin:22px 0 8px;padding-left:10px;border-left:3px solid var(--gold);line-height:1.4}
.gtoc{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 16px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.gtoc-l{flex-basis:100%;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.12em}
.gtoc-i{font:500 13px/1.4 "Noto Sans SC",sans-serif;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 11px;cursor:pointer;text-align:left}
.gtoc-i:hover{border-color:var(--gold)}
.gtoc-i:focus-visible,.gimg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gfig{margin:14px 0 18px}
.gimg{display:flex;justify-content:center;width:100%;padding:0;border:0;background:var(--bg);border-radius:8px;overflow:hidden;cursor:zoom-in}
/* portrait photos must not fill the whole screen: cap the height, keep the ratio */
.gimg img{display:block;width:auto;max-width:100%;height:auto;max-height:min(62vh,560px)}
.gfig figcaption{margin-top:6px;font-size:13px;line-height:1.5;color:var(--muted)}
.gcap{color:var(--ink)}
.gcredit{display:block;font-size:11px;margin-top:1px}
.gcredit a{color:var(--muted);text-decoration-color:var(--line2)}
/* offline and not downloaded (or missing): a quiet placeholder instead of a broken image */
.gfig.broken .gimg{cursor:default;min-height:56px;display:grid;place-items:center;background:var(--bg);border:1px dashed var(--line2)}
.gfig.broken .gimg img{display:none}
.gfig.broken .gimg::after{content:"图片暂不可用（离线内容还没下载完）";font-size:12px;color:var(--muted);padding:8px}
.ggal{margin-top:18px}
/* tap-to-enlarge */
.gzoom{border:0;padding:0;margin:auto;max-width:100vw;max-height:100vh;width:100vw;height:100vh;height:100dvh;background:transparent;color:#fff}
.gzoom[open]{display:grid;place-items:center}
.gzoom::backdrop{background:rgba(10,9,7,.96)}
.gzoom-f{margin:0;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;max-height:100%}
.gzoom-f img{max-width:100%;max-height:calc(100dvh - 90px);object-fit:contain;border-radius:4px}
.gzoom-f figcaption{font-size:14px;text-align:center;color:#e8e2d4}
.gzoom-x{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;background:rgba(0,0,0,.4);color:#fff;border-color:rgba(255,255,255,.3)}
.guide h3{font-size:14px;color:var(--gold);margin:16px 0 6px}
.ghl{margin:0;padding-left:18px}
.ghl li{margin-block:4px}
.gtips{margin-top:14px;background:var(--gold-soft);border-radius:8px;padding:10px 12px;font-size:14px}
.gtips b{color:var(--gold);margin-right:8px}
.gsrc{margin-top:18px;padding-top:10px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted);line-height:1.6}
.gsrc h3{color:var(--muted);font-size:12px;margin:0 0 2px}
.gsrc ul{margin:0;padding-left:16px}
.gsrc a{color:var(--brick)}
.gupd{margin:6px 0 0}
.tag.draft{border:1px dashed var(--muted);color:var(--muted);padding-block:0}

/* shared mini-player (sticky bottom bar, safe-area aware) */
.player{position:fixed;left:0;right:0;bottom:0;z-index:1500;max-width:640px;margin-inline:auto;background:var(--card);border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 -6px 20px rgba(0,0,0,.14);padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px))}
.player[hidden]{display:none}
.pl-row{display:flex;align-items:center;gap:8px}
.pl-row+.pl-row{margin-top:4px}
.pl-play{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--gold);color:var(--card);cursor:pointer;padding:0}
.pl-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.pl-meta b{font-family:"Noto Serif SC","Songti SC",serif;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-meta span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pl-btn{flex:none;min-width:44px;min-height:32px;font:500 13px "Noto Sans SC",sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 10px;cursor:pointer}
.pl-btn:hover{border-color:var(--gold)}
.pl-x{min-width:32px;padding-inline:8px;color:var(--muted)}
.pl-play:focus-visible,.pl-btn:focus-visible,.pl-seek:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.pl-seek{flex:1;min-width:0;margin:0;accent-color:var(--gold);height:28px}
.pl-status{font-size:12px;color:var(--flag);margin-top:2px}
/* the modal makes the bar inert anyway; the guide's own play button shows state meanwhile */
html:has(dialog.guide[open]) .player{visibility:hidden}
body.has-player{padding-bottom:calc(128px + env(safe-area-inset-bottom,0px))}
body.has-player .toast{bottom:calc(124px + env(safe-area-inset-bottom,0px))}

/* guide directory (讲解目录) + offline pack */
.gdir .gdir-h,.apack .ap-h{font-size:16px;margin:0 0 4px}
.gdir-sum{margin:0 0 10px;font-size:13px;color:var(--muted)}
.gdir-days{list-style:none;margin:0;padding:0}
.gdir-day{display:grid;grid-template-columns:56px minmax(0,1fr);gap:8px;padding:8px 0;border-top:1px dashed var(--line)}
.gdir-day:first-child{border-top:0}
.gdir-d{font:700 14px "Noto Serif SC","Songti SC",serif;color:var(--gold);line-height:1.3;padding-top:5px}
.gdir-d small{display:block;font:500 11px "Noto Sans SC",sans-serif;color:var(--muted)}
.gdir-list{display:flex;flex-wrap:wrap;gap:6px}
.gdir-i{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);text-decoration:none;font-size:14px}
.gdir-i:hover{border-color:var(--gold)}
.gdir-i:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gdir-dur{font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
#guides .card+.card{margin-top:12px}
/* map: a place label with a guide is a button */
.mk.has-guide span{pointer-events:auto;cursor:pointer}
.mk.has-guide span::after{content:" ›";color:var(--gold);font-weight:700}
.mk.has-guide span:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* offline pack */
.apack .ap-sum{margin:0 0 10px}
.ap-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.apack .btn{font-size:13px;padding:5px 14px}
.apack .ap-go{background:var(--gold);border-color:var(--gold);color:var(--card)}
.apack .btn:disabled{opacity:.6;cursor:progress}
.ap-status{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ap-status[data-tone="ok"]{color:var(--green)}
.ap-status[data-tone="warn"]{color:var(--flag)}
/* thin progress line (the div's width is set from JS with style.setProperty) */
.ap-bar{height:3px;margin-top:8px;border-radius:2px;background:var(--line);overflow:hidden}
.ap-bar[hidden]{display:none}
.ap-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.ap-est{font-size:12px;color:var(--muted);margin:8px 0 0}
.ap-est a{color:var(--brick)}

/* sight links: a sight named in a card or guide text opens its guide */
.glink{color:inherit;text-decoration:underline dotted var(--gold);text-decoration-thickness:1.5px;text-underline-offset:3px;cursor:pointer}
.glink:hover{text-decoration-style:solid;color:var(--gold)}
.glink:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:2px}
/* sub-guides: 「属于：…」 under the title, 「细看」 chips in the parent */
.gparent{margin:2px 0 0;font-size:13px;color:var(--muted)}
.gsub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px}
.gsub-l{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.12em;margin-right:2px}
.gsub-i{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 12px;border:1px solid var(--gold);border-radius:999px;background:var(--gold-soft);color:var(--ink);text-decoration:none;font-size:14px}
.gsub-i:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gdir-sub{font-size:13px;padding-left:8px;border-style:dashed}
.gdir-arrow{color:var(--muted)}
/* footer: running version + offline status + diagnostics */
.appver{margin:24px 0 0;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.appver a{color:var(--muted)}
/* diagnostics dialog */
.diag-note{margin:0 0 10px;font-size:13px;color:var(--muted)}
.diag-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.diag-btns .btn{font-size:13px;padding:5px 14px}
.diag-out{margin:0;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;font:12px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;user-select:text;-webkit-user-select:text}

@media (max-width:960px){
  .layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .mappanel{order:-1;top:env(safe-area-inset-top,0px);z-index:1000;padding:8px 12px}
  .mappanel .mh{cursor:pointer}
  /* Keep the sticky panel to at most half the screen so the day cards get the other half.
     ~120px is the header, the one-line stop summary and the filter row; svh = viewport with browser bars shown. */
  .mappanel{padding:6px 10px 8px}
  #map{height:calc(50vh - 120px);height:calc(50svh - 120px);min-height:170px;max-height:none}
  .mappanel .mt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0;margin:0 0 6px}
  .mappanel .attr{display:none}
  .mfoot{margin-top:6px}
  .mappanel.collapsed #map,.mappanel.collapsed .mfoot,.mappanel.collapsed .attr,.mappanel.collapsed .mt{display:none}
  .mtoggle{display:inline}
  /* only the day strip survives, sharing the one footer row with the hotel filter and 看全程 */
  .legend{display:contents}
  .legend>span:not(.dlegend),.dl-l{display:none}
  .dlegend{flex:none;gap:3px;font-size:11px;color:var(--muted)}
  .dlbar{gap:1px}
  .dlbar>span{width:6px;height:8px;border-radius:1px}
  .mappanel.collapsed .hfbar{display:none}
  .hfbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-block:6px;padding-right:20px;margin-block:-6px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
  .mfoot #btnAll{align-self:center}
  .hfbar::-webkit-scrollbar{display:none}
  .hf::before{inset:-4px -2px}
}
@media (max-width:640px){
  h1{font-size:26px}
  .day{padding:12px 12px 10px}
  .dh .stayv{margin-left:0;width:100%}
  .stops::before{left:57px}
  .stop{grid-template-columns:40px 24px minmax(0,1fr)}
  .stop .when{font-size:11px}
  .hrow{padding:4px 5px;column-gap:6px}
  .hh .hhidden{margin-left:0}
  .guide{width:100%;max-height:88vh;max-height:88dvh;margin:auto 0 0;border-radius:14px 14px 0 0}
  /* long guides: use nearly the whole screen (the top strip still shows it is a sheet) */
  .guide.long{width:100%;height:94vh;height:calc(100dvh - 28px - env(safe-area-inset-top,0px));max-height:none}
  .gbody p,.gsec p{font-size:16px;line-height:1.8}
  .gdir-day{grid-template-columns:44px minmax(0,1fr)}
  .guide[open]{animation-name:sheet-up;animation-duration:.22s}
  .gsheet::before{content:"";align-self:center;width:36px;height:4px;border-radius:2px;background:var(--line2);margin-top:8px}
  .gh{padding:8px 16px 10px}
  .gscroll{padding:12px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  .player{border-radius:0;border-inline:0;padding-inline:12px}
}
@keyframes sheet-up{from{transform:translateY(40%)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media print{
  :root,:root[data-theme="dark"],:root:not([data-theme="light"]){
    --bg:#fff;--card:#fff;--ink:#000;--muted:#333;--line:#bbb;--line2:#999;color-scheme:light;
    --gold:#c98a1a;--gold-soft:#f3e4bf;--brick:#4f6f8f;--brick-soft:#dfe8f1;
    --flag:#b8432f;--flag-soft:#f6dcd6;--green:#3f7a4e;--green-soft:#dcebdf;
    --t-budget:#1f7a6d;--t-mid:#2d5fa6;--t-upscale:#a3367f;--t-luxury:#8a6410;
  }
  /* 住宿: only the chosen hotel per night, with address / phone / booking note */
  .hrow:not(.sel),.hradio,.hname,.hsub,.hmeta,.hhidden,.hb-rank,.hb-nohz{display:none!important}
  .hrow.sel{background:none;border:0;padding:2px 0;grid-template-columns:auto minmax(0,1fr) auto;align-items:start}
  .hpick{grid-area:1/1}
  .hprint{display:block;grid-area:1/2;font-size:11px;color:var(--muted)}
  .hprint b{font-size:12px;color:var(--ink)}
  .hprice{grid-area:1/3}
  body{background:#fff;color:#000;padding:0;font-size:12px}
  .mappanel,.btn,.mtoggle,.toast,.player,.gbtn,.guide,.gzoom,section:has(#audiopack),.appver{display:none!important}
  .glink{text-decoration:none}
  body.has-player{padding-bottom:0}
  .layout{display:block}
  .phase-h{break-before:page;break-after:avoid}
  .phase-h:first-child{break-before:auto}
  .day,.card,.q,.kpi,.check li{break-inside:avoid;box-shadow:none}
  .day.active{border-color:var(--line);box-shadow:none}
  h2{break-after:avoid}
  .check input{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}