/* === 大运河 · 发现之旅 — 共享样式 === */
/* 宣纸米白 + 青瓷绿 + 印章红 */
/* 依赖：引擎会从 JOURNEY.colors 注入 CSS 变量 */

/* ── CSS 变量（默认值，可被 JOURNEY.colors 覆盖）── */
:root {
  --canal-bg:       #f5f0e6;   /* 宣纸米白 */
  --canal-accent:   #7ea58b;   /* 青瓷釉色 */
  --canal-spot:     #c4423f;   /* 印章红 */
  --canal-text:     #2c2416;   /* 墨色 */
  --canal-dim:      #a09888;   /* 灰显文字 */
  --canal-card:     #faf7f0;   /* 卡片底（比底色略亮） */
  --canal-stamp:    #bfa055;   /* 运河印金色 */
  --canal-dashed:   #d5cfc0;   /* 虚线/分隔色 */
  --canal-radius:   10px;
  --canal-serif:    "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "PingFang SC", serif;   /* 正文/标题：宋体系 */
  --canal-sans:     system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;                            /* 结构标签/数字：黑体系 */
  --canal-kai:      "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Noto Serif SC", serif;                     /* 引语/人声：楷体系（提升为 token） */
}

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

body {
  font-family: var(--canal-serif);
  background: var(--canal-bg);
  color: var(--canal-text);
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.008) 2px, rgba(0,0,0,.008) 4px);
}

/* ── 面包屑 ── */
.canal-crumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--canal-dashed);
}
.canal-crumb a {
  color: var(--canal-accent);
  text-decoration: none;
  font-weight: 500;
}
.canal-crumb span {
  color: var(--canal-dim);
  margin: 0 4px;
}
/* #5 导航出口（2026-09-03）：crumb 左右两段——左段窄屏省略兜底（320px 两段不重叠），右段出口不换行不压缩 */
.canal-crumb .crumb-left,
.canal-crumb .top-exit {
  margin: 0;
}
.canal-crumb .crumb-left {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canal-crumb .top-exit {
  flex-shrink: 0;
  white-space: nowrap;
}
/* 出口链接色：新组件 AA（#4a7260 ≈5:1，与回望组件族一致）；crumb 旧链接品牌绿不动（全站提标留待单独批次） */
.canal-crumb .top-exit a {
  color: #4a7260;
}
.canal-crumb .top-exit a:hover {
  color: #3d6350;
}

/* ── 顶栏 ── */
.canal-bar {
  position: sticky; top: 0; z-index: 99;
  background: rgba(245,240,230,.92);
  backdrop-filter: blur(8px);
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--canal-dashed);
}

/* ── 总览头区 ── */
.canal-hero {
  padding: 32px 20px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    url(hero-bg.svg) center bottom / 100% auto no-repeat,
    var(--canal-bg);
}
.canal-hero .volume {
  display: inline-block;
  font-size: 12px; color: var(--canal-spot);
  border: 1px solid var(--canal-spot);
  padding: 3px 12px; border-radius: 20px;
  margin-bottom: 12px;
  font-family: var(--canal-sans);
}
.canal-hero h2 {
  font-family: var(--canal-serif);
  font-size: 28px; font-weight: 800;
  line-height: 1.3; margin-bottom: 8px;
}
.canal-hero .tagline {
  font-size: 14px; color: var(--canal-dim);
  max-width: 320px; margin: 0 auto;
  line-height: 1.6;
}

/* ── 航线总览（城市列表）── */
.canal-route {
  padding: 0 14px;
}

/* ── 运河行舟图 ── */
.route-map {
  padding: 0 14px 16px;
}
.route-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.route-map .rv-city {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-map .rv-dot {
  transition: fill .3s, stroke .3s;
}
.route-map .rv-name {
  font-family: var(--canal-serif);
  font-size: 15px;
  font-weight: 700;
}
.route-map .rv-tag {
  font-size: 10px;
}
.route-map .rv-stamp-icon {
  font-size: 12px;
}
/* 已靠岸 */
.route-map .rv-docked .rv-dot {
  fill: var(--canal-accent);
  stroke: var(--canal-accent);
  stroke-width: 2;
}
.route-map .rv-docked .rv-name {
  fill: var(--canal-text);
}
/* 未靠岸 */
.route-map .rv-undocked .rv-dot {
  fill: rgba(0,0,0,.04);
  stroke: var(--canal-dim);
  stroke-width: 1.5;
}

/* 锁定城市 */
.route-map .rv-locked .rv-dot {
  fill: rgba(0,0,0,.02);
  stroke: var(--canal-dashed);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.route-map .rv-locked .rv-name {
  fill: var(--canal-dim);
  opacity: .5;
}
.route-map .rv-locked {
  cursor: pointer;
}

/* city-tag 仍在面板中使用 */
.city-tag {
  display: inline-block;
  font-size: 10px; padding: 2px 8px;
  border-radius: 10px; margin-top: 4px;
  background: rgba(126,165,139,.12);
  color: var(--canal-accent);
}

/* ── 城市详情面板（L2 全屏滑入）── */
.city-panel {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 250; background: var(--canal-bg);
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.city-panel.show {
  transform: translateX(0);
}
.city-panel-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(245,240,230,.95);
  backdrop-filter: blur(8px);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--canal-dashed);
}
.city-panel-back {
  font-size: 15px; color: var(--canal-accent);
  background: none; border: none; cursor: pointer;
  font-family: var(--canal-sans); font-weight: 600;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.city-panel-title {
  font-family: var(--canal-serif);
  font-size: 18px; font-weight: 700;
}
.city-panel-body {
  padding: 0 14px 60px;
}

/* ── 打卡点内联展开（城市面板内）── */
.cp-expand {
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.cp-expand:last-child { border-bottom: none; }
.cp-expand-header {
  display: flex; align-items: center; padding: 14px 0;
}
.cp-expand-header .cp-icon {
  font-size: 22px; margin-right: 12px;
  flex-shrink: 0; width: 28px; text-align: center;
}
.cp-expand-header .cp-info {
  flex: 1; min-width: 0;
}
.cp-expand-header .cp-name {
  font-size: 15px; font-weight: 600;
}
.cp-stamp-label {
  font-size: 10px; font-weight: 400;
  color: var(--canal-dim);
  margin-left: 4px;
}
.cp-expand-header .cp-type {
  font-size: 11px; color: var(--canal-dim); margin-top: 2px;
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.cp-tag {
  display: inline-block; align-self: flex-start;
  font-size: 11px; padding: 2px 0;
  color: var(--canal-dim);
}
.cp-tag.heritage {
  background: rgba(126,165,139,.12);
  color: var(--canal-accent);
  font-weight: 600;
}
.cp-tag.stamp-tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--canal-dim);
  border: 1px solid var(--canal-dashed);
  background: #fff;
}
.cp-tag.stamp-tag.earned {
  color: var(--canal-accent);
  border-color: var(--canal-accent);
  background: rgba(126,165,139,.08);
  font-weight: 600;
}

/* ── 待探索（鹅嫂未到，诚实标注）── */
/* --canal-dashed 由引擎注入（#d8d0c0），见 §3.3-6 */
.cp-tag.pending {
  padding: 2px 8px; border-radius: 10px;
  color: #fff; background: var(--canal-dim);
  border: 1px solid var(--canal-dim);
}
.cp-tag.stamp-tag.pending {
  color: var(--canal-dim);
  border-color: var(--canal-dashed);
  background: #fff;
  filter: grayscale(1);
}
.pending-note {
  font-size: 13px; line-height: 1.7;
  color: var(--canal-dim);
  border-left: 3px solid var(--canal-dashed);
  padding-left: 12px; margin: 10px 0;
}

/* ── 运河印收集墙 ── */
.stamp-collection {
  margin: 0 14px 24px;
}
.stamp-collection h3 {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--canal-dim);
}
.sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sc-card {
  background: var(--canal-card);
  border: 1px solid var(--canal-dashed);
  border-radius: 10px;
  padding: 10px 12px;
}
.sc-card-head {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.sc-card-head span {
  color: var(--canal-dim);
  font-weight: 400;
  font-size: 11px;
}
.sc-card-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sc-stamp {
  display: inline-block;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid var(--canal-dashed);
  opacity: .35;
  filter: grayscale(1);
}
.sc-stamp.earned {
  opacity: 1;
  filter: none;
  border-color: var(--canal-accent);
  background: rgba(126,165,139,.08);
}
.cp-expand-header .cp-status {
  font-size: 12px; color: var(--canal-dim);
  flex-shrink: 0; margin-left: 8px;
}
.cp-expand.docked .cp-status {
  color: var(--canal-accent); font-weight: 600;
}
.cp-expand-body {
  display: block;
  padding: 0 0 18px 40px;
}
.cp-expand-body .section-label {
  font-size: 11px; color: var(--canal-accent);
  font-weight: 700; letter-spacing: 1px; margin: 12px 0 4px;
}
.cp-expand-body p {
  font-size: 14px; line-height: 1.8;
}
.cp-expand-body .emiao-text {
  color: var(--canal-dim); font-style: italic;
  border-left: 3px solid var(--canal-accent);
  padding-left: 12px; margin: 6px 0;
}

/* ── 隐藏发现 / 拓展旅行 ── */
.section-title {
  font-size: 12px; color: var(--canal-dim);
  font-weight: 600; margin: 16px 0 8px;
  padding-left: 2px; letter-spacing: .5px;
}

/* ── 美食 ── */
.food-item {
  display: flex; align-items: center;
  padding: 8px 0; font-size: 13px;
  border-bottom: 1px dashed rgba(0,0,0,.04);
}
.food-item:last-child { border-bottom: none; }
.food-item .food-icon {
  font-size: 20px; margin-right: 10px;
  flex-shrink: 0;
}
.food-item .food-desc {
  font-size: 12px; color: var(--canal-dim);
  margin-top: 2px;
}

/* ── 驻泊指南（住宿）── */
.lodging-card {
  background: rgba(0,0,0,.02);
  border-radius: var(--canal-radius);
  padding: 14px; margin-top: 12px;
}
.lodging-card h4 {
  font-size: 14px; font-weight: 700; margin-bottom: 6px;
}
.lodging-card .lodging-price {
  font-size: 13px; color: var(--canal-spot);
  font-weight: 600; margin-bottom: 8px;
}
.lodging-card .lodging-pros,
.lodging-card .lodging-cons {
  font-size: 13px; line-height: 1.7;
  margin-bottom: 4px;
}
.lodging-card .lodging-cons {
  color: var(--canal-dim);
}
.lodging-card .lodging-verdict {
  font-size: 13px; font-style: italic;
  color: var(--canal-accent); margin-top: 8px;
}

/* ── 鹅嫂吃喝住（可折叠）── */
.emiao-plus {
  margin-top: 12px;
}
.emiao-plus-header {
  font-size: 13px; color: var(--canal-accent); font-weight: 600;
  padding: 10px 0; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  border-top: 1px solid var(--canal-dashed);
  -webkit-tap-highlight-color: transparent;
}
.emiao-plus-arrow {
  font-size: 12px; transition: transform .25s;
}
.emiao-plus.open .emiao-plus-arrow {
  transform: rotate(90deg);
}
.emiao-plus-body {
  display: none;
}
.emiao-plus.open .emiao-plus-body {
  display: block;
}

/* ── 全国文保列表 ── */
.ns-item {
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0,0,0,.04);
  font-size: 14px; line-height: 1.7;
}
.ns-item:last-child { border-bottom: none; }
.ns-item p {
  font-size: 13px; color: var(--canal-dim);
  margin-top: 3px;
}
.ns-badge {
  font-size: 10px; color: var(--canal-accent);
  background: rgba(126,165,139,.1);
  padding: 1px 7px; border-radius: 8px;
  margin-left: 4px;
}
.ns-expand .cp-expand-body {
  display: none;
}
.ns-expand.open .cp-expand-body {
  display: block;
}
.ns-expand .cp-expand-header {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.drive-tips {
  font-size: 13px; color: var(--canal-dim);
  padding: 8px 0; margin-top: 8px;
  border-top: 1px solid var(--canal-dashed);
}
.drive-next {
  text-align: center; padding: 12px 0;
  font-size: 13px; color: var(--canal-accent);
  font-weight: 600;
}

/* ── 微路线 ── */
.mini-route {
  background: rgba(126,165,139,.06);
  border-radius: var(--canal-radius);
  padding: 14px; margin-top: 12px;
}
.mini-route h4 {
  font-size: 14px; font-weight: 700; margin-bottom: 8px;
}
.mini-route ol {
  padding-left: 20px; font-size: 13px; line-height: 1.8;
  color: var(--canal-text);
}

/* ── 收官区 ── */
.canal-epilogue {
  padding: 32px 20px;
  text-align: center;
  border-top: 1px solid var(--canal-dashed);
  margin: 24px 14px 0;
}
.canal-epilogue h3 {
  font-family: var(--canal-serif);
  font-size: 20px; font-weight: 700; margin-bottom: 16px;
}
.canal-epilogue .ep-text {
  font-size: 14px; line-height: 2;
  color: var(--canal-dim);
  margin-bottom: 12px;
}

/* ── 卷的两端（2026-09-25 两端衔接补节：南端台儿庄 / 北端德州——不入城市序列、不计点印）── */
.canal-junctions { padding: 0 14px; margin-top: 26px; }
.canal-junctions .junctions-title { font-family: var(--canal-serif); font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.canal-junctions .junctions-note { font-size: 12.5px; line-height: 1.9; color: var(--canal-dim); text-align: center; margin-bottom: 14px; }
.junction-card { border: 1px dashed var(--canal-dashed); border-radius: var(--canal-radius, 10px); padding: 14px 16px; margin-bottom: 12px; background: rgba(126,165,139,.05); }
.junction-card .junction-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.junction-card .junction-emoji { font-size: 18px; }
.junction-card .junction-name { font-family: var(--canal-serif); font-size: 16px; font-weight: 700; }
.junction-card .junction-role { font-size: 11.5px; line-height: 1.7; color: #4a7260; margin-bottom: 8px; }
.junction-card .junction-text { font-size: 13.5px; line-height: 2; color: var(--canal-text); margin-bottom: 8px; }
.junction-card .junction-poi { font-size: 12px; line-height: 1.8; color: var(--canal-dim); margin-bottom: 6px; }
.junction-card .junction-emiao { font-family: var(--canal-kai); font-size: 12.5px; line-height: 1.9; color: var(--canal-dim); }

/* ── 航行图分享按钮（浮动）── */
.share-fab {
  position: fixed; bottom: 24px; right: 20px;
  z-index: 150;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--canal-spot);
  color: #fff; font-size: 24px;
  border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(196,66,63,.3);
  display: flex; align-items: center; justify-content: center;
}

/* ── 城市导航（上一站 / 下一站）── */
.city-nav {
  display: flex;
  gap: 10px;
  margin: 16px 0;
}
.prev-city, .next-city {
  flex: 1;
  text-align: center;
  padding: 14px;
  border: 1px solid var(--canal-accent);
  border-radius: var(--canal-radius);
  color: var(--canal-accent);
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s;
}
.prev-city:hover, .next-city:hover {
  background: rgba(126,165,139,.08);
}

/* ── 回望（#1 梳理清单）── */
.lookback-entry { margin: 28px 0 8px; padding: 18px 20px; border: 1px dashed var(--canal-gold, #bfa055); border-radius: 14px; background: rgba(191,160,85,.06); text-align: center; }
.lookback-entry h3 { margin: 0 0 8px; font-size: 18px; font-family: var(--canal-serif); }
.lookback-note { margin: 0 0 14px; font-size: 13px; line-height: 1.9; color: var(--canal-dim); }
/* 卷尾卡/引导卡按钮可点文字（#10 评审#1 裁决 b，2026-09-03，可读性第一原则；复核补丁 2026-09-03 卡底口径重测）：品牌青瓷绿 ≈2.6:1 低于 AA → 深档 #4a7260 ≈4.78:1（淡金卡底 ≈#f6f0e3 实测，AA 达标）——文字与描边一体，变量换字面值（仅 .lookback-btn/.lh-btn 两钮调深，全站其它品牌绿引用不动）；hover 底 rgba(61,99,80,.10) 深绿系 */
.lookback-btn { display: inline-block; padding: 10px 26px; border: 1px solid #4a7260; border-radius: 24px; color: #4a7260; font-size: 14px; font-weight: 600; text-decoration: none; transition: .2s; }
.lookback-btn:hover { background: rgba(61,99,80,.10); }
/* 宁波面板引导卡（目检修订 2026-09-03：单行条 → 卡片，Jane 裁决）——与 .lookback-entry 同族语言 */
.lookback-hint { display: block; margin: 0 0 14px; padding: 14px 16px; border: 1px dashed var(--canal-gold, #bfa055); border-radius: 12px; background: rgba(191,160,85,.08); text-decoration: none; }
.lookback-hint .lh-title { display: block; margin-bottom: 6px; font-family: var(--canal-serif); font-size: 16px; font-weight: 700; color: #5f4a1e; }
.lookback-hint .lh-text { display: block; font-size: 13px; line-height: 1.9; color: #5f4a1e; /* 深金褐：纸面 ≈7:1 AA */ }
.lookback-hint .lh-btn { display: inline-block; margin-top: 10px; padding: 8px 18px; border: 1px solid #4a7260; border-radius: 20px; color: #4a7260; font-size: 13px; font-weight: 600; }
.lookback-hint:hover { background: rgba(191,160,85,.14); }
.lookback-hint:hover .lh-btn { background: rgba(61,99,80,.10); }

/* ── 响应式 ── */
@media (max-width: 380px) {
  .canal-hero h2 { font-size: 24px; }
  .city-header .city-name { font-size: 15px; }
}

/* ── Toast ── */
#canal-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.82);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  max-width: 320px;
  text-align: center;
}
#canal-toast.show {
  opacity: 1;
}

/* ── 打卡点照片（纸感卡片 + 引语）── */
.cp-photos { display: flex; gap: 10px; margin: 12px 0 4px; }
.cp-photo-card { flex: 1; min-width: 0; background: var(--canal-card, #fffdf8); border: 1px solid var(--canal-border, #e8e0d5); border-radius: 10px; padding: 8px; }
.cp-photo-card img { width: 100%; display: block; border-radius: 6px; cursor: zoom-in; }
.cp-photo-say { font-family: var(--canal-kai); font-size: 12px; color: var(--canal-dim, #a09888); line-height: 1.7; margin-top: 6px; }
/* ── lightbox ── */
#photo-lightbox { position: fixed; inset: 0; background: rgba(30,26,20,.72); display: flex; align-items: center; justify-content: center; z-index: 999; }
#photo-lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.4); }
#photo-lightbox .say { font-family: var(--canal-kai); color: #f5efe2; font-size: 14px; margin-top: 10px; text-align: center; }
#photo-lightbox .close { position: absolute; top: 14px; right: 18px; color: #f5efe2; font-size: 24px; cursor: pointer; }
@media (max-width: 480px) { .cp-photos { flex-direction: column; } }

/* 页脚 · 备案块（2026-09-20 收口批：门面页——canal 入口；行式口径沿 assets/site.css:213–214，配宣纸主题） */
.site-footer { border-top: 1px dashed var(--canal-dashed); margin-top: 28px; padding: 22px 14px 30px; text-align: center; font-size: 12px; color: var(--canal-dim); }
.site-footer a { color: var(--canal-dim); text-decoration: none; }
.site-footer a:hover { color: var(--canal-accent); }
.site-footer .beian-row { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 8px; }
.beian-mps { display: inline-flex; align-items: center; gap: 4px; }