/* ============================================
   Mobile Enhancement Stylesheet
   Only applies on screens ≤ 768px.
   Complements (does not override) existing @media rules.
   ============================================ */

@media (max-width: 768px) {

  /* ---- 1. Base: readable font size ---- */
  html { font-size: 16px; -webkit-text-size-adjust: 100%; }
  body { font-size: 15px; line-height: 1.75; }

  /* ---- 2. Prevent horizontal overflow ---- */
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, video, canvas { max-width: 100%; height: auto; }

  /* ---- 3. Tighten container padding ---- */
  .wrap { padding-left: 12px; padding-right: 12px; }

  /* ---- 4. Top bar: tighter, shrink tag ---- */
  .top { padding: 10px 12px; gap: 8px; }
  .top-tag { font-size: 10px; letter-spacing: 1px; }
  .home-link { font-size: 13px; padding: 7px 14px; }

  /* ---- 5. Touch-friendly chips / tabs ---- */
  .chip { font-size: 13px; padding: 7px 13px; }
  .tabs .tab { padding: 12px 8px; font-size: 13px; min-width: 64px; }

  /* ---- 6. Cards: less padding, no heavy shadow ---- */
  .arch-card { padding: 13px; border-radius: 10px; }

  /* ---- 7. Segment cost badges (main route page) ---- */
  .seg-costs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
  .seg-costs span { padding: 4px 9px; }

  /* ---- 8. Timeline rows: comfortable tap height ---- */
  .tl-row { padding: 9px 8px; font-size: 11px; }
  .tl-km { font-size: 11.5px; }
  .tl-day { font-weight: 700; }
  .tl-scenic, .tl-sleep { font-size: 10.5px; }

  /* ---- 9. Leaflet map controls ---- */
  .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; }
  .leaflet-control { font-size: 13px; }

  /* ---- 10. iOS safe area ---- */
  body { padding-bottom: env(safe-area-inset-bottom); }

  /* ---- 11. 侧边栏顶部：返回首页 / 标题更清晰 ---- */
  #page-nav { padding: 8px 10px; gap: 6px; }
  #page-nav a, #page-nav button, #page-nav .nav-link { font-size: 13px; padding: 6px 12px; }
  .sb-top h2 { font-size: 16px; }
  .sb-top .sub { font-size: 11px; }

  /* ---- 12. 新增：倒计时/旅行状态条（移动端紧凑化，给内容区留空间） ---- */
  #trip-status { padding: 9px 11px; margin: 8px 8px 5px; }
  #trip-status .ts-text { font-size: 14px; }
  #trip-status .ts-sub { font-size: 10.5px; margin-top: 1px; }
  #trip-status .ts-bar { height: 6px; margin-top: 4px; }
  #ts-alert { margin-top: 5px; }
  #ts-alert .ts-alert-item { font-size: 11px; padding: 5px 8px; margin-bottom: 3px; line-height: 1.5; }

  /* ---- 13. 新增：预算/费用/检查清单/天气/推荐 可读性 ---- */
  .jb-box { padding: 11px 12px; margin: 6px 8px 12px; font-size: 13px; }
  .jb-note { font-size: 11px; }
  .jb-tbl { font-size: 12px; }
  .jb-tbl th { font-size: 11px; padding: 5px 6px; }
  .jb-tbl td { padding: 6px; font-size: 12px; }
  .jb-form select, .jb-form input, .jb-form button { font-size: 14px; padding: 8px 10px; }
  .jb-sumrow { font-size: 12.5px; }
  #exp-list .exp-row { font-size: 12.5px; padding: 7px 6px; }
  #exp-list .exp-cat { font-size: 10.5px; }
  #exp-list .exp-note { font-size: 11.5px; }
  #exp-list .exp-amt { font-size: 13px; }
  .jb-tools { font-size: 11px; }
  .jb-tools button { font-size: 11px; padding: 4px 11px; }
  .wx-out { font-size: 11.5px; }
  .wx-day .wd { font-size: 10px; }
  .wx-day .wt { font-size: 11px; }
  .wx-day .wdeg { font-size: 11.5px; }
  .wx-day .wpop { font-size: 9.5px; }
  .chk-title { font-size: 12.5px; }
  .chk-item { font-size: 12px; padding: 5px 0; }
  .chk-item input { width: 16px; height: 16px; }
  .chk-item .chk-tag { font-size: 10px; }
  .jb-details summary { font-size: 13px; padding: 11px 12px; }
  #picks-tbl .picks-row { font-size: 12px; padding: 7px 0; }
  #picks-tbl .picks-seg { font-size: 11.5px; }
  #picks-tbl .picks-tag { font-size: 10px; }

  /* ---- 14. 路线 tab：概览/提示/主线标题 ---- */
  #tab-routes > div[style*="padding:10px 10px"], #tab-routes .main-route-title { font-size: 13px; }
  #tab-routes > div[style*="font-size:9px"], #tab-routes > div[style*="font-size: 9px"] { font-size: 12px; line-height: 1.9; }

  /* ---- 15. 分段列表（48段）---- */
  .seg-row { margin: 6px 8px; border-radius: 8px; }
  .seg-header { padding: 10px 11px; font-size: 13.5px; gap: 8px; }
  .seg-num { width: 20px; height: 20px; font-size: 10px; }
  .seg-km { font-size: 12px; }
  .seg-body { padding: 10px 11px; font-size: 12px; line-height: 1.6; }
  .seg-info { font-size: 10.5px; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
  .seg-scenic { font-size: 11.5px; margin-bottom: 3px; }
  .seg-overnight { font-size: 11px; }
  .seg-notes, .seg-alert, .seg-fuel { font-size: 11px; }

  /* ---- 16. 总览 tab 原有区块可读性 ---- */
  #tab-dashboard { font-size: 13px; }
}