@charset "UTF-8";
/* ==========================================================================
   成都亲子游 · 行程小助手  —  components.css
   业务组件：景点卡 / 美食卡 / 筛选条 / 行程时间轴 / 详情浮层 / 清单浮层 / Toast
   类名与 public/js/views.js、app.js、utils.js 实际生成的 DOM 一一对应。
   依赖 app.css 的设计令牌（--c-*、--r-*、--fs-*、--shadow-*）
   本文件不使用 @import、不使用图片、不使用 !important
   ========================================================================== */

/* ===== 1. 配图系统（插画） =====
   背景：用户反馈「只有图案和文字，没有图片」。实测境内服务器访问
   upload.wikimedia.org / raw.githubusercontent.com 均超时，外部图库不可用，
   所以插画全部自绘成 SVG，放在本站 /img/ 下 —— 与页面同源，无第三方依赖。

   三条设计原则：
     1) 懒加载：列表里几十张图，全部立即下载会拖垮 3 Mbps 带宽
     2) emoji 兜底：图挂了露出底层 emoji，永远不出现破图
     3) 锁宽高比：外层固定 4:3，图片没加载完也不跳版（避免 CLS）
   ========================================================================== */

.media {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--c-primary-soft), var(--c-bg));
}

/* emoji 兜底层：图片加载好之前 / 加载失败时可见 */
.media__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  line-height: 1;
  opacity: .55;
}

.media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.media__img.is-broken { display: none; }
.media--loaded .media__img { opacity: 1; }

/* 卡片顶部配图：跨两列，占满卡片宽度 */
.media--card {
  grid-column: 1 / -1;
  margin-bottom: var(--sp-1);
}

/* 区域角标（压在配图左上角） */
.media__area {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 2;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 253, 248, .92);
  color: var(--c-ink-soft);
  font-size: .78rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}

/* 详情浮层顶部大图 */
.detail__hero {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.media--hero {
  max-height: 46vh;
  aspect-ratio: 4 / 3;
}

/* 行程时间轴里的小缩略图 */
.media--thumb {
  width: 64px;
  height: 48px;
  aspect-ratio: 4 / 3;
  float: left;
  margin: 0 var(--sp-3) var(--sp-2) 0;
  border-radius: var(--r-sm);
}
.media--thumb .media__fallback { font-size: 1.5rem; }

/* 「只看图模式」：配图放大、文字全隐藏 —— 靠图片也能认出是什么 */
body.is-emoji-only .media--card { aspect-ratio: 16 / 10; }
body.is-emoji-only .media__area { display: none; }

/* 打分理由：把「为什么是 3 星」讲清楚 */
.card__rating-reason,
.detail__rating-reason {
  margin: var(--sp-1) 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid var(--c-secondary);
  border-radius: var(--r-sm);
  background: rgba(52, 195, 164, .12);
  color: var(--c-ink-soft);
  font-size: .92rem;
  line-height: 1.6;
}
.detail__rating-reason {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: 1rem;
}

/* 小屏上配图别太高，否则一屏看不到内容 */
@media (max-width: 374px) {
  .media--card { aspect-ratio: 16 / 10; }
  .media--thumb { width: 52px; height: 39px; }
}

/* iPad：卡片已经是两列（每列更窄），配图改用更扁的 16:9，
   这样一屏能露出更多卡片，小朋友不用一直滑 */
@media (min-width: 820px) {
  .media--card { aspect-ratio: 16 / 9; }
  .media--thumb { width: 76px; height: 57px; }
}

/* ===== 1.5 三维评分（小朋友喜欢 / 游玩难度 / 著名程度） =====
   用户反馈「只有一个小朋友喜欢度，没有区分度」—— 单一维度确实不够：
   熊猫基地是"孩子极爱但很累很有名"，东郊记忆是"孩子爱、不累、但外地人没听过"，
   这是完全不同的选择依据。所以卡片上并排给三个维度。

   ⚠️ 方向差异必须让人看懂：前两项**星越多越好**，游玩难度**星越多越累**。
   所以难度那一格用橙色 + 一句文字（很轻松/轻松/中等/偏累/很累）说明，
   不能只靠星星数量让人猜。 */

.rating-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: var(--sp-2) 0 var(--sp-1);
}

.rating-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--c-surface-2, rgba(0, 0, 0, .03));
  min-width: 0;
}

.rating-cell__label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--c-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rating-cell__stars {
  display: block;
  line-height: 1;
}

/* 难度用暖橙底 + 橙字，与"喜欢/名气"在视觉上区分开 */
.rating-cell--difficulty {
  background: linear-gradient(180deg, rgba(255, 138, 61, .16), rgba(255, 138, 61, .06));
}
.rating-cell--difficulty .rating-cell__label { color: #c05a1c; }

.rating-cell--fame {
  background: linear-gradient(180deg, rgba(255, 158, 196, .16), rgba(255, 158, 196, .06));
}

/* 小屏：三列太挤，改成"图标在上、星在下"的更紧凑排法，字号再收一点 */
@media (max-width: 400px) {
  .rating-grid { gap: 4px; }
  .rating-cell { padding: 6px 5px; }
  .rating-cell__label { font-size: .68rem; }
  .rating-grid .stars { font-size: .78rem; }
}

/* 详情页的维度说明块 */
.detail__dims {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}

.detail__dim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-surface-2, rgba(0, 0, 0, .03));
}

.detail__dim--difficulty {
  background: linear-gradient(180deg, rgba(255, 138, 61, .14), rgba(255, 138, 61, .05));
  border-left: 4px solid var(--c-primary);
}

.detail__dim--fame {
  background: linear-gradient(180deg, rgba(255, 158, 196, .14), rgba(255, 158, 196, .05));
  border-left: 4px solid var(--c-pink);
}

.detail__dim-label {
  flex: 0 0 auto;
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-ink);
}

.detail__dim-text {
  font-size: .88rem;
  color: var(--c-ink-soft);
}

.detail__dim-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
}

/* ===== 1.6 外部跳转（高德 / 大众点评）=====
   需求演进：四个按钮 → 两个（三个都是高德，重复），
   手机上要**直接唤起 App**，不要跳到浏览器重新登录点评。

   ⚠️ 配色选择器必须用 class（.ext-link--amap / --dianping），
   不能用 [href^='https://uri.amap.com'] —— 手机 UA 下 href 会换成
   intent://…（Android）或 dianping://…（iOS），按 href 前缀选就全失效了。 */

.ext-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}

.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* 触摸目标 ≥44px：小朋友和家长的手指都不精准 */
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--c-line-strong, rgba(0, 0, 0, .12));
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-pop),
              border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.ext-link:active { transform: translateY(2px) scale(.97); }
.ext-link:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }

/* 高德用主色，点评用太阳黄 —— 一眼分得清点哪个 */
.ext-link--amap {
  border-color: var(--c-primary);
  background: linear-gradient(180deg, rgba(255, 138, 61, .14), var(--c-surface));
  color: #b4541a;
}
.ext-link--dianping {
  border-color: var(--c-accent);
  background: linear-gradient(180deg, rgba(255, 209, 102, .2), var(--c-surface));
  color: #9a6a00;
}

/* 列表卡片上的迷你版（用户要求「放到概要页面上」）：
   文案收短成「导航 / 点评」，但 44px 触摸目标不能缩水。 */
.ext-links--mini {
  margin: var(--sp-2) 0 0;
  gap: 8px;
}
.ext-links--mini .ext-link {
  min-height: 44px;
  padding: 6px 12px;
  font-size: .84rem;
  gap: 3px;
}

/* ===== 2. 通用卡片外壳（.card 由 cardShell() 生成） ===== */
.card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 2px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-pop),
              box-shadow var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.card:active {
  transform: translateY(2px) scale(.985);      /* 贴纸回弹感 */
  box-shadow: var(--shadow-press);
}

/* 选中态：主色描边 + 淡化底 + 轻微放大（未选中不灰暗） */
.card.is-selected {
  grid-template-columns: auto minmax(0, 1fr);
  border-color: var(--c-primary);
  background: linear-gradient(180deg, var(--c-primary-soft), var(--c-surface) 42%);
  transform: scale(1.012);
  box-shadow: 0 4px 0 rgba(255, 138, 61, .28), 0 10px 22px rgba(120, 90, 60, .14);
}
.card.is-selected:active { transform: scale(1) translateY(2px); }

/* 右上角 ✅ 角标：未选中显示 ➕，就是「点一下选中」的提示 */
.card__check {
  position: absolute;
  top: -8px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 5px;
  font-size: calc(1.05rem * var(--font-scale));
  line-height: 1;
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 2px solid var(--c-line-strong);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
  pointer-events: none;
  transition: transform var(--t-base) var(--ease-pop),
              background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.card.is-selected .card__check {
  background: var(--c-primary);
  border-color: var(--c-primary-deep);
  box-shadow: 0 3px 0 var(--c-primary-deep);
  transform: scale(1.1);
  animation: check-pop var(--t-slow) var(--ease-pop) both;
}
@keyframes check-pop {
  from { opacity: 0; transform: scale(.4) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1.1); }
}

/* 左侧大 emoji（可点开详情） */
.card__emoji {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(2.1rem * var(--font-scale));
  line-height: 1;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
}

/* 右侧主体 */
.card__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.card__title {
  font-size: var(--fs-lg);                     /* 卡片标题 1.3-1.5rem */
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.card__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  font-style: normal;
}
.card__sub {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}
.card__tip {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  border-left: 5px solid var(--c-accent);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: #8a6212;
}

/* 元信息一行（区域 / 时长 / 适合年龄 / 分类…） */
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.card__meta-emoji {
  font-size: calc(.95rem * var(--font-scale));
  line-height: 1;
}

/* 小朋友喜欢度 / 辣不辣 两行 */
.card__meters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.card__kid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.card__kid-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-ink-soft);
  white-space: nowrap;
}

/* 亮点一行（title + 顿号连接的文本，不是胶囊） */
.card__highlights {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  border: 1px dashed rgba(232, 181, 63, .7);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: #8a6212;
}
.card__highlights-title {
  font-weight: 800;
  margin-right: 2px;
}

/* 卡片按钮区：跨两列放在最下面 */
.card__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.card__actions .btn { width: 100%; }

/* 加载骨架卡片 */
.card.skeleton {
  min-height: 152px;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

/* ===== 2. 辣度计（utils.js spiceMeter） ===== */
.spice-meter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.spice-meter__dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ece3d8;
  border: 1px solid rgba(0, 0, 0, .08);
}
.spice-meter__dot.is-on {
  background: linear-gradient(180deg, #ff7a4d, #e8552f);
  border-color: #cf4522;
  box-shadow: 0 1px 2px rgba(207, 69, 34, .35);
}
.spice-meter__label {
  margin-left: 2px;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--c-ink-soft);
}

/* ===== 3. 筛选条（chipRow） ===== */
.chip-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  min-width: 0;
}
.chip-row__label {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-ink-soft);
  white-space: nowrap;
}
.chip-row__scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding: var(--sp-1) 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chip-row__scroll::-webkit-scrollbar { display: none; }
/* 自动换行版本（行李清单 / 相关推荐用） */
.chip-row__wrap {
  flex-wrap: wrap;
  overflow-x: visible;
}
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--tap-min);                  /* 小朋友手指粗，48px */
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 2px solid var(--c-line-strong);
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .06);
  transition: transform var(--t-fast) var(--ease-pop),
              background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.chip:active { transform: translateY(2px) scale(.97); }
.chip.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary-deep);
  color: #fff;
  box-shadow: 0 3px 0 var(--c-primary-deep);
}
.chip .count-badge { background: rgba(0, 0, 0, .12); color: inherit; }
.chip.is-active .count-badge { background: rgba(255, 255, 255, .3); color: #fff; }

/* ===== 4. 区域分组标题（areaHeading，在 card-list 里跨列） ===== */
.area-heading {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--c-surface-2), transparent);
  border-left: 6px solid var(--c-area-outer);
}
.area-heading__emoji {
  font-size: calc(1.3rem * var(--font-scale));
  line-height: 1;
}
.area-heading__text {
  font-size: var(--fs-lg);
  font-weight: 900;
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.area-heading__blurb {
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: var(--lh-normal);
}
.area-heading[data-area="市区"] { border-left-color: var(--c-area-city); }
.area-heading[data-area="近郊"] { border-left-color: var(--c-area-near); }
.area-heading[data-area="周边"] { border-left-color: var(--c-area-outer); }

/* 行内空状态：比整页空状态矮一些 */
.empty-state--inline {
  grid-column: 1 / -1;
  padding: var(--sp-6) var(--sp-4);
  border-style: dashed;
  box-shadow: none;
}

/* ===== 5. 天数 / 节奏选择 ===== */
.day-chip {
  min-height: var(--tap-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-2);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 2px solid var(--c-line);
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: transform var(--t-fast) var(--ease-pop),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.day-chip:active { transform: translateY(2px) scale(.97); }
.day-chip.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary-deep);
  color: #fff;
  box-shadow: 0 4px 0 var(--c-primary-deep);
}
/* 10 个天数按钮的栅格在 app.css 的 .day-picker（JS 生成 .day-chip） */
.panel--ai.is-disabled { opacity: .62; }
.panel--ai.is-disabled .switch-row { cursor: not-allowed; }
.panel--ai.is-disabled .switch-row__track { background: #e6ded4; }

/* ===== 6. 已选摘要（renderSelectionSummary） ===== */
.selection-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.selection-summary__empty {
  color: var(--c-ink-faint);
  font-size: var(--fs-sm);
}
.selection-summary__area {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px dashed var(--c-line-strong);
}
.selection-summary__area-title {
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: var(--lh-normal);
  color: var(--c-ink);
}
.selection-summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.selection-summary__label {
  flex: 0 0 auto;
  min-width: 2.6em;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-ink-soft);
}

/* ===== 7. 行程结果：方案切换 plan-tab ===== */
.plan-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 2px solid var(--c-line-strong);
  color: var(--c-ink-soft);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .06);
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-pop),
              background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.plan-tab:active { transform: translateY(2px) scale(.97); }
.plan-tab__emoji { font-size: calc(1.2rem * var(--font-scale)); line-height: 1; }
.plan-tab__label {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.25;
}
.plan-tab__days {
  font-size: var(--fs-xs);
  font-weight: 700;
  opacity: .8;
}
.plan-tab.is-active,
.plan-tab[aria-selected="true"] {
  background: var(--c-blue);
  border-color: #3f74e0;
  color: #fff;
  box-shadow: 0 3px 0 #3f74e0;
}

/* ===== 8. 行程横幅 plan-banner ===== */
.plan-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--c-accent-soft), var(--c-primary-soft));
  border: 2px solid rgba(232, 181, 63, .5);
  box-shadow: var(--shadow-card);
}
.plan-banner:empty { display: none; }
.plan-banner__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.plan-banner__emoji {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(1.9rem * var(--font-scale));
  line-height: 1;
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .07);
}
.plan-banner__title {
  font-size: var(--fs-xl);
  font-weight: 900;
  line-height: var(--lh-tight);
  color: #7a5410;
}
.plan-banner__tagline {
  margin-top: 2px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: #8a6212;
}
.plan-banner__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.plan-banner__time {
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  line-height: var(--lh-normal);
}
.pill--ai {
  background: var(--c-blue-soft);
  border-color: rgba(91, 143, 249, .4);
  color: #3466c9;
}

/* 横幅里的备注与提醒 */
.plan-notes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px dashed var(--c-line-strong);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}
.plan-note { line-height: var(--lh-body); }
.plan-warn {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: #ffece6;
  border: 2px solid rgba(232, 85, 47, .4);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-body);
  color: #b83f1d;
}
.plan-warn__item { line-height: var(--lh-body); }

/* ===== 9. 每日行程 plan-day / timeline ===== */
.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.plan-day {
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-surface);
  border: 2px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
/* 头部：第几天 / 日期 / 区域 三枚小胶囊 */
.plan-day__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.plan-day__no {
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 900;
  line-height: 1.7;
  white-space: nowrap;
}
.plan-day__date {
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line-strong);
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.plan-day__area {
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-blue-soft);
  border: 1px solid rgba(91, 143, 249, .4);
  color: #3466c9;
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.7;
  white-space: nowrap;
}
.plan-day__title {
  font-size: var(--fs-lg);
  font-weight: 900;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin-bottom: var(--sp-1);
}
.plan-day__meta {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}
.plan-day__stay {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-blue-soft);
  border-left: 5px solid var(--c-blue);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-body);
  color: #3466c9;
}
/* 「路上怎么走」折叠块 */
.plan-day__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px dashed var(--c-line-strong);
}
.plan-day__nav-title {
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--c-ink);
}
.plan-day__nav-item {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}

/* 时间轴线本体 */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 54px 30px minmax(0, 1fr);
  align-items: start;
  column-gap: var(--sp-2);
}
/* 竖线：穿过圆点左侧，给孩子一条清楚的「线」 */
.tl-item::before {
  content: "";
  position: absolute;
  left: calc(54px + var(--sp-2) + 13px);
  top: 24px;
  bottom: calc(-1 * var(--sp-3));
  width: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 138, 61, .22);
}
.tl-item:last-child::before { display: none; }

.tl-item__time {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.3;
}
.tl-item__start {
  font-size: var(--fs-sm);
  font-weight: 900;
  color: var(--c-ink);
}
.tl-item__end {
  font-size: var(--fs-xs);
  color: var(--c-ink-faint);
}
.tl-item__dot {
  grid-column: 2;
  justify-self: center;
  margin-top: 2px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(1rem * var(--font-scale));
  line-height: 1;
  border-radius: 50%;
  background: var(--c-surface);
  border: 3px solid var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-surface);
  z-index: 1;
}
.tl-item__card {
  grid-column: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--c-surface-2);
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  overflow-wrap: anywhere;
}
.tl-item__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.tl-item__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.tl-item__detail {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}
/* 亮点是 <ul><li>，用可爱的小圆点，不用列表符号 */
.tl-item__highlights {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink);
}
.tl-item__highlights > li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
.tl-item__highlights > li::before {
  content: "🐾";
  flex: 0 0 auto;
  font-size: calc(.85rem * var(--font-scale));
  line-height: 1.6;
}
.tl-item__musttry {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  border: 1px dashed rgba(232, 181, 63, .7);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: #8a6212;
}
.tl-item__tags {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.tl-item__tags > .tag {
  white-space: normal;                        /* 长提示要能换行 */
  line-height: var(--lh-normal);
  align-items: flex-start;
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}
.tl-item__nav {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-blue);
  border: 2px solid #3f74e0;
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  box-shadow: 0 3px 0 #3f74e0;
}
.tl-item__nav:active { transform: translateY(2px) scale(.97); }
/* 整天级别的警告（直接挂在 .plan-day 下） */
.tl-item__warn {
  display: block;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: #ffece6;
  border-left: 6px solid #e8552f;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-body);
  color: #b83f1d;
}
/* 一天里的 AI 说明块（.ai-block.day-note 同时挂了两个类） */
.ai-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--c-blue-soft), var(--c-surface) 70%);
  border: 2px solid rgba(91, 143, 249, .35);
}
.ai-block__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: var(--lh-normal);
  color: #3466c9;
}
.ai-block__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  white-space: pre-wrap;
}
.day-note { margin: var(--sp-3) 0 0; }

/* 各类节点的配色 */
.tl-item--attraction .tl-item__dot { border-color: var(--c-area-city); }
.tl-item--attraction .tl-item__card { background: #fff4ee; border-color: rgba(255, 127, 80, .3); }

.tl-item--food .tl-item__dot { border-color: var(--c-secondary); }
.tl-item--food .tl-item__card { background: var(--c-secondary-soft); border-color: rgba(52, 195, 164, .3); }

.tl-item--rest .tl-item__dot { border-color: var(--c-pink); }
.tl-item--rest .tl-item__card { background: var(--c-pink-soft); border-color: rgba(255, 158, 196, .4); }

.tl-item--transport .tl-item__dot { border-color: var(--c-blue); border-style: dashed; }
.tl-item--transport .tl-item__card {
  background: var(--c-blue-soft);
  border-color: rgba(91, 143, 249, .3);
  padding: var(--sp-2) var(--sp-3);
}

.tl-item--start .tl-item__dot { border-color: var(--c-accent-deep); }
.tl-item--start .tl-item__card { background: var(--c-accent-soft); border-color: rgba(232, 181, 63, .45); }

.tl-item--end .tl-item__dot { border-color: var(--c-ink-faint); }
.tl-item--end .tl-item__card { background: var(--c-surface-2); border-color: var(--c-line-strong); }

/* ===== 10. 行程附加信息 plan-extras ===== */
.plan-extras {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.plan-extras:empty { display: none; }
.plan-extras .panel { margin-bottom: 0; }
.plan-extras .chip-row__wrap { gap: var(--sp-2); }

/* ===== 11. 详情浮层 detail（openDetail） ===== */
.detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* 详情浮层顶部：现在是「大图在上、名字与标签在下」（配图系统的一部分，
   基础定义见文件开头的「配图系统」一节） */
.detail__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 2px dashed var(--c-line-strong);
}
.detail__hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.detail__emoji {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(2.6rem * var(--font-scale));
  line-height: 1;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
}
.detail__name {
  font-size: var(--fs-xl);
  font-weight: 900;
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.detail__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.detail__rate-label {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-ink-soft);
}
.detail__pitch {
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  border-left: 6px solid var(--c-accent);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-body);
  color: #8a6212;
}
.detail__summary {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}
.detail__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.detail__fact {
  display: grid;
  grid-template-columns: auto 5.4em minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--c-line-strong);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.detail__fact:last-child { border-bottom: 0; }
.detail__fact-emoji {
  font-size: calc(1.05rem * var(--font-scale));
  line-height: 1.6;
}
.detail__fact-label {
  font-weight: 800;
  color: var(--c-ink-soft);
}
.detail__fact-value {
  color: var(--c-ink);
}
.detail__h {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: var(--lh-normal);
  color: var(--c-ink);
}
.detail__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}
.detail__list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
.detail__list > li::before {
  content: "•";
  flex: 0 0 auto;
  color: var(--c-primary);
  font-weight: 900;
}

/* ===== 12. 清单浮层 compare（openCompare） ===== */
.compare {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.compare .detail__h { margin-top: var(--sp-3); }
.compare__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 2px solid var(--c-line);
}
.compare__emoji {
  font-size: calc(1.7rem * var(--font-scale));
  line-height: 1;
}
.compare__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.compare__name {
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.compare__meta {
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  line-height: var(--lh-normal);
}

/* ===== 13. 浮层按钮区 / 可移除胶囊 ===== */
.sheet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}
.pill--removable {
  cursor: pointer;
  min-height: var(--tap-min);
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  transition: transform var(--t-fast) var(--ease-pop),
              background-color var(--t-fast) var(--ease-out);
}
.pill--removable:active { transform: translateY(2px) scale(.97); }
.pill--removable:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }
.pill__x {
  color: var(--c-primary-deep);
  font-weight: 900;
}
.pill--link {
  cursor: pointer;
  min-height: var(--tap-min);
  padding: 0 var(--sp-4);
  background: var(--c-blue-soft);
  border-color: rgba(91, 143, 249, .4);
  color: #3466c9;
  font-size: var(--fs-sm);
}
.pill--link:active { transform: translateY(2px) scale(.97); }

/* ===== 14. 专属标签（utils.js tag 的 kind） ===== */
.tag--meal {
  background: var(--c-accent-soft);
  border-color: rgba(232, 181, 63, .45);
  color: #8a6212;
  align-self: flex-start;
}
.tag--duration {
  background: var(--c-blue-soft);
  border-color: rgba(91, 143, 249, .35);
  color: #3466c9;
  align-self: flex-start;
}
.tag--where {
  background: var(--c-surface);
  border-color: rgba(255, 127, 80, .35);
  color: #d1582b;
}
.tag--tip {
  background: var(--c-secondary-soft);
  border-color: rgba(52, 195, 164, .4);
  color: var(--c-secondary-deep);
}
.tag--spice {
  background: #ffece6;
  border-color: rgba(242, 112, 28, .35);
  color: #d1582b;
}

/* ===== 15. 设置页键值行 ===== */
.kv-list {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
}
.kv-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--c-line-strong);
  line-height: var(--lh-normal);
}
.kv-list__row:last-child { border-bottom: 0; }
.kv-list__key {
  flex: 0 0 auto;
  color: var(--c-ink-soft);
  font-weight: 700;
}
.kv-list__value {
  min-width: 0;
  text-align: right;
  color: var(--c-ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* ===== 16. 浮层开合状态（utils.js Sheet） ===== */
/* JS 先去掉 hidden，再在下一帧加 is-open，所以动画挂在 is-open 上 */
.sheet-backdrop {
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.sheet-backdrop.is-open { opacity: 1; }

.sheet {
  transform: translate(-50%, 100%);
  transition: transform var(--t-slow) var(--ease-pop);
}
.sheet.is-open { transform: translate(-50%, 0); }
/* 浮层打开时锁住背后页面滚动 */
body.has-sheet { overflow: hidden; }
/* 浮层内容不要重复投影，避免「框中框」太厚重 */
.sheet .card,
.sheet .plan-notes,
.sheet .ai-block { box-shadow: none; }
.sheet__body > * + * { margin-top: var(--sp-3); }
.sheet__body .card-list { gap: var(--sp-3); }
.sheet__body .empty-state { padding: var(--sp-6) var(--sp-4); }
.sheet__body .card.is-selected { transform: none; }

/* ===== 17. Toast 内部结构（utils.js toast） ===== */
.toast__icon {
  flex: 0 0 auto;
  font-size: calc(1.25rem * var(--font-scale));
  line-height: 1;
}
.toast__text {
  flex: 1 1 auto;
  min-width: 0;
}
.toast.is-leaving { animation: toast-out var(--t-base) var(--ease-out) both; }

/* 复制兜底用的隐藏 textarea：必须仍可聚焦、可选中，所以用裁剪而不是 display:none */
.copy-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
  z-index: -1;
}

/* 时间轴标题里的小号星级（stars(rating, {class:'stars--small'})）
   —— 基础尺寸定义在 app.css 的「10. 星级评分」，这里只补布局相关 */
.stars--small {
  flex: 0 0 auto;
}

/* ===== 18. 按钮补充形态 ===== */
.btn--mini {
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
}
.btn--selected {
  background: var(--c-secondary);
  border-color: var(--c-secondary-deep);
  color: #fff;
  box-shadow: 0 4px 0 var(--c-secondary-deep);
}
/* 生成中：按钮转圈提示（app.js 加 is-loading） */
.btn.is-loading {
  cursor: progress;
  opacity: .85;
}
.btn.is-loading::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn:disabled { opacity: .7; cursor: not-allowed; }

/* ===== 19. 只看图模式：业务组件微调 ===== */
body.is-emoji-only .card {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 100px;
  padding: var(--sp-4);
}
body.is-emoji-only .card__emoji { font-size: 3rem; }
body.is-emoji-only .card__actions,
body.is-emoji-only .card__kid,
body.is-emoji-only .card__tip,
body.is-emoji-only .tl-item__detail,
body.is-emoji-only .tl-item__musttry,
body.is-emoji-only .tl-item__highlights,
body.is-emoji-only .tl-item__tags,
body.is-emoji-only .day-note,
body.is-emoji-only .plan-notes,
body.is-emoji-only .ai-block__text,
body.is-emoji-only .plan-day__meta,
body.is-emoji-only .detail__summary,
body.is-emoji-only .detail__list,
body.is-emoji-only .detail__facts,
body.is-emoji-only .card__highlights,
body.is-emoji-only .compare__meta { display: none; }
body.is-emoji-only .tl-item__dot {
  width: 36px;
  height: 36px;
  font-size: calc(1.35rem * var(--font-scale));
}
body.is-emoji-only .card__title { font-size: var(--fs-xl); }

/* ===== 20. 窄屏（<360px）：时间轴改成上下结构，避免挤压 ===== */
@media (max-width: 359px) {
  .tl-item {
    grid-template-columns: 28px minmax(0, 1fr);
    row-gap: 2px;
  }
  .tl-item__time {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-2);
    padding-top: 0;
  }
  .tl-item__dot { grid-column: 1; grid-row: 1 / span 2; }
  .tl-item__card { grid-column: 2; grid-row: 2; }
  /* 圆点中心 = 13px，竖线不能超出视口，否则会横向溢出 */
  .tl-item::before { left: 12px; }
  .plan-day { padding: var(--sp-3) var(--sp-2); }
  .card { padding: var(--sp-3); }
  .card__emoji { width: 52px; height: 52px; font-size: calc(1.8rem * var(--font-scale)); }
  .detail__fact { grid-template-columns: auto minmax(0, 1fr); }
  .detail__fact-label { grid-column: 2; }
  .detail__fact-value { grid-column: 2; }
}

/* ===== 21. iPad 竖屏（≥600px） ===== */
@media (min-width: 600px) {
  .card { padding: var(--sp-5); gap: var(--sp-4); }
  .card__emoji { width: 74px; height: 74px; font-size: calc(2.5rem * var(--font-scale)); }
  .card__title { font-size: var(--fs-xl); }
  .card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.skeleton { min-height: 176px; }
  .tl-item { grid-template-columns: 64px 34px minmax(0, 1fr); }
  .tl-item::before { left: calc(64px + var(--sp-2) + 15px); }
  .tl-item__dot { width: 34px; height: 34px; }
  .tl-item__card { padding: var(--sp-4); }
  .plan-day { padding: var(--sp-5); }
  .plan-day__title { font-size: var(--fs-xl); }
  .day-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .detail__fact { grid-template-columns: auto 6.2em minmax(0, 1fr); }
}

/* ===== 22. iPad 横屏（≥820px）：卡片两列，时间轴不拆 ===== */
@media (min-width: 820px) {
  .card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--sp-5);
  }
  .plan-banner__title { font-size: var(--fs-2xl); }
  .sheet { max-height: 84dvh; }
  .sheet__body .card-list { grid-template-columns: 1fr; }
  .card.is-selected { transform: none; }
  .detail__emoji { width: 84px; height: 84px; font-size: calc(3rem * var(--font-scale)); }
}

/* ===== 23. 动效降级 ===== */
@media (prefers-reduced-motion: reduce) {
  .card.is-selected .card__check { animation: none; }
  .card:active,
  .card.is-selected { transform: none; }
  .sheet,
  .sheet-backdrop { transition: none; }
  .btn.is-loading::before { animation: none; }
}

/* ===== 24. 打印：不要切断卡片与时间轴 ===== */
@media print {
  .plan-day,
  .tl-item,
  .card,
  .ai-block,
  .compare__row { break-inside: avoid; }
  .tl-item__nav,
  .card__actions,
  .plan-tabs,
  .chip-row { display: none; }
  .tl-item__card { background: #fff; }
  .card { border-color: #ccc; }
}