/* ============================================================
   styles_v3_ux.css — 重陽相調路線手冊 v3 UX layer
   由 app_v2.js 的 v3 增強功能支撐，分三部分：
     TASK C — 內嵌地圖預覽（.map-slot.preview）
     TASK B — 時間軸 rail + 時間 chip（.t-chip / .tl-item.evening）
     TASK E — 微互動（卡片懸浮、圖片縮放、按壓反饋）
   純漸進增強：只覆寫 v2 既有選擇器 + 新增契約 class，
   唔改動 index.html / styles_v2.css。全部顏色用硬編碼 hex。
   ============================================================ */

/* ============================================================
   TASK C — 內嵌地圖預覽
   v2 用 max-height 0→460px 過場；預覽模式收窄到 170px，
   並隱藏圖例（輕量）；撳預覽 → app_v2.js 展開成 320px 全圖。
   ============================================================ */
.map-slot.preview .map-frame{max-height:240px}        /* 容納 170px 地圖 + 標籤列 */
.map-slot.preview .map-canvas,
.map-slot.preview .leaflet-container{height:170px;width:100%}
.map-slot.preview .map-legend{display:none}           /* 預覽唔要圖例 */
.map-slot.preview .map-canvas,
.map-slot.preview .leaflet-container{cursor:zoom-in}  /* 提示可放大 */
.map-slot.preview .leaflet-container{border-radius:0 0 12px 12px}

/* 預覽狀態：按鈕變成疊喺地圖左下嘅細標籤（純標示，非主要 CTA）*/
.map-slot.preview{position:relative}
.map-slot.preview .map-btn{position:absolute;left:10px;bottom:10px;z-index:500;
  margin:0;min-height:0;padding:3px 10px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.92);color:#BE185D;border:1px solid #F9A8D4;
  border-radius:999px;box-shadow:0 1px 4px rgba(9,9,11,.22);cursor:zoom-in}
.map-slot.preview .map-btn:hover{background:#BE185D;color:#FFFFFF;border-color:#BE185D}
.map-slot.preview .map-btn svg{width:12px;height:12px}

/* 展開為全圖時：還原 v2 版面（按鈕回到文件流頂部、正常尺寸）*/
.map-slot.active:not(.preview) .map-btn{position:static;left:auto;bottom:auto;z-index:auto;
  min-height:44px;padding:0 16px;font-size:13px;background:var(--wash);
  color:var(--accent-deep);border:1px solid #F9A8D4;border-radius:999px;
  box-shadow:none;cursor:pointer}
.map-slot.active:not(.preview) .map-btn:hover{background:var(--accent-deep);color:#FFFFFF;border-color:var(--accent-deep)}
.map-slot.active:not(.preview) .map-btn svg{width:16px;height:16px}

/* ============================================================
   TASK B — 時間軸 rail + 時間 chip
   ============================================================ */
.sec-timeline .sec-body{position:relative}            /* rail 定位基準 */
.sec-timeline .sec-body::before{content:"";position:absolute;left:6px;top:6px;bottom:14px;
  width:1px;background:#E4E4E7}                        /* 垂直 rail 線 */

/* 時間 chip：小藥丸、等寬字、accent-deep 字色 */
.t-chip{display:inline-block;font-family:var(--font-mono,'JetBrains Mono'),monospace;
  font-size:12px;font-weight:700;color:#BE185D;background:#FDF2F8;
  border-radius:6px;padding:1px 6px;margin-right:8px;line-height:1.5;
  letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* 黃昏項：淡紫 wash + 點色轉 indigo（無 emoji）*/
.tl-item.evening{background:rgba(99,102,241,.06);border-radius:8px;padding:5px 10px 5px 16px}
.tl-item.evening::before{background:#6366F1}
.tl-item.evening .t-chip{color:#4F46E5;background:#EEF2FF}

/* ============================================================
   TASK E — 微互動
   驗證：v2 卡片本身並無 hover 抬升（只有 scroll reveal 位移），
   故此處補上抬升 + 相片微放大 + 按壓反饋。
   ============================================================ */

/* 1) 相片容器裁切 + 圖片微放大過場 */
.rc-photo{overflow:hidden}
.rc-photo img{transition:transform .35s ease}

/* 2) 卡片懸浮抬升（保留 opacity reveal 過場；只在已 reveal、
      支援 hover、非 reduced-motion 時啟用）*/
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .route-card{transition:opacity .5s ease,transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1)}
  .route-card.in:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(9,9,11,.10)}
  .route-card:hover .rc-photo img{transform:scale(1.03)}
}

/* 3) 按壓反饋：互動 chip／按鈕按下時落 1px */
.map-btn:active,.share-btn:active,.print-btn:active,.unconf-chip:active,
.route-chip:active,.back-top.show:active,
.m-actions a.primary:active,.m-actions button.primary:active,
.m-actions a.ghost:active,.m-actions button.ghost:active{transform:translateY(1px)}

/* ============================================================
   列印修正 — 時間 chip／rail／evening wash 還原純文字
   （.map-slot、.rc-photo 已由 styles_v2.css 列印塊隱藏）
   ============================================================ */
@media print{
  .sec-timeline .sec-body::before{display:none}
  .t-chip{background:none;color:#000;padding:0;font-weight:700}
  .tl-item.evening{background:none;padding:5px 0 5px 16px}
  .route-card,.route-card.in:hover{transform:none;box-shadow:none}
  .rc-photo img{transform:none}
}

/* v3.1 safety: auto-reveal fallback so content is never invisible if JS stalls */
@keyframes cyAutoReveal{to{opacity:1;transform:none}}
.route-card,.city-hero{animation:cyAutoReveal .5s ease 2.5s forwards}
@media(prefers-reduced-motion:reduce){.route-card,.city-hero{animation:none;opacity:1;transform:none}}