/* shared/tour/tour.css — 畫面導覽的樣式（唯一原始碼）
 *
 * 顏色一律用 CSS 變數並帶 fallback：各站的變數名不一定一樣，
 * 抓不到就退回這裡寫死的深色系，不要讓導覽在某一站變成白底白字。 */

#tour-mask {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, 0.72);
  /* ⚠ 遮罩本身不吃點擊：使用者要能看到底下是什麼，
     真正擋住誤觸的是下面的 #tour-card（它才吃點擊）。 */
  pointer-events: none;
  transition: opacity .18s ease;
}

/* 聚光燈：用 box-shadow 打一個超大的外擴陰影，中間那塊就自然「挖空」了。
   ⚠ 不要用 clip-path 挖洞——Safari 對 clip-path + fixed 的組合會整層閃爍。 */
#tour-spot {
  position: fixed; z-index: 9999;
  border-radius: 10px;
  /* ⚠ 洞裡要疊一層很淡的白。被聚光燈打到的如果是一顆**本來就是深色的小元素**
     （導覽列按鈕那種），光靠「四周變暗」是看不出來的——洞裡跟背景一樣暗，
     使用者的感受就是「整片都暗，不知道要看哪」。（2026-08-16 使用者回報
     「警示開始亮度都不正常」，就是這個。）大面板疊上 6% 幾乎看不出差別，
     所以不必分大小目標，一律疊。 */
  background: rgba(255, 255, 255, 0.06);
  /* ⚠⚠ **順序不可以調換：壓暗那層一定要放最後。**
     多重 box-shadow 是「寫在前面的畫在上層」。把 `0 0 0 9999px` 放第一個的話，
     它會把後面的邊框與光暈整個蓋掉——聚光燈變成一個沒有框的暗洞，
     使用者完全看不出被導覽的是哪一塊。（原本就是寫錯成這樣。） */
  /* 光暈用不透明的 --accent 加 blur 自然淡出，不要寫死 rgba()——各站的
     --accent 不同（018 是藍、其他站是琥珀），寫死會變成兩種顏色打架。 */
  box-shadow: 0 0 0 2px var(--accent, #f5a623),
              0 0 26px 2px var(--accent, #f5a623),
              0 0 0 9999px rgba(0, 0, 0, 0.72);
  pointer-events: none;
  transition: all .22s cubic-bezier(.4, 0, .2, 1);
}

#tour-card {
  position: fixed; z-index: 10000;
  width: min(340px, calc(100vw - 32px));
  background: var(--card, #121a26);
  border: 1px solid var(--accent, #f5a623);
  border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  color: var(--text, #e6ecf3);
  font-size: 13px; line-height: 1.75;
  /* bottom 也要進 transition：長目標的步驟改用 bottom 貼底定位（見 tour.js 的
     setBottom），漏掉它的話那幾步會用瞬移的方式跳出來，跟其他步驟不一致。 */
  transition: top .22s cubic-bezier(.4,0,.2,1),
              bottom .22s cubic-bezier(.4,0,.2,1),
              left .22s cubic-bezier(.4,0,.2,1);
}
#tour-card .t-step { font-size: 11px; color: var(--text2, #8fa3b8); letter-spacing: .5px; }
#tour-card .t-title { font-size: 15px; font-weight: 700; color: var(--accent, #f5a623); margin: 2px 0 6px; }
#tour-card .t-body { color: var(--text, #e6ecf3); }
#tour-card .t-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); margin: 12px 0 10px; }
#tour-card .t-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--accent, #f5a623); transition: width .25s ease; }
#tour-card .t-foot { display: flex; align-items: center; gap: 8px; }
#tour-card .t-foot .grow { flex: 1; }
#tour-card button {
  background: transparent; border: 1px solid var(--border, #2a3a4d);
  color: var(--text, #e6ecf3); border-radius: 7px;
  padding: 5px 12px; font-size: 12px; cursor: pointer;
}
#tour-card button.primary { background: var(--accent, #f5a623); border-color: var(--accent, #f5a623); color: #10151d; font-weight: 700; }
#tour-card button:disabled { opacity: .4; cursor: default; }
#tour-card .t-skip { background: none; border: none; color: var(--text2, #8fa3b8); font-size: 11px; padding: 4px; }

/* ── 示範資料（沒有權限的頁籤）─────────────────────────────────────────
 * 使用者指定：**要正常顯示、不要模糊**——看得清楚才有「升級能換到這些」的
 * 感覺，模糊掉等於什麼都沒說。
 *
 * ⚠ 拿掉模糊之後，「不要被當成真行情」就只剩兩道防線，兩道都不可以再拿掉：
 *   ① 上方那條橫幅（一直在，不會被捲走）
 *   ② 數字本身刻意假（固定日期 2020-01-01、指數用 20000 這種整數）
 *   在看盤站上，示範數字被誤讀成真行情是最糟的結果。
 * ⚠ pointer-events 仍然關掉：看得到但點不動，避免有人以為那是可互動的真資料。
 */
.tour-demo { position: relative; }
.tour-demo > *:not(.tour-demo-badge) {
  pointer-events: none !important;
  user-select: none;
}
/* 橫幅貼在面板頂端，不蓋住內容 */
.tour-demo-badge {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; text-align: center;
  padding: 7px 12px; margin-bottom: 8px;
  background: rgba(245, 166, 35, .95);
  border-radius: 8px;
  pointer-events: none;
}
.tour-demo-badge .b { color: #10151d; font-weight: 700; font-size: 13px; letter-spacing: .5px; }
.tour-demo-badge .s { color: rgba(16, 21, 29, .78); font-size: 11px; }

@media (max-width: 680px) {
  /* 手機：卡片左右撐滿（硬塞在元素旁邊會被螢幕邊界擠到看不見）。
     ⚠ **只接管左右，垂直位置交給 JS。** 這裡原本還寫了
     `top:auto !important; bottom:12px !important`，造成兩個 bug：
       ① 歡迎頁是 `left:50%` + `translate(-50%,-50%)`，`!important` 蓋掉了 left/top
          卻蓋不掉 inline 的 transform，於是卡片被 translate 推出螢幕左邊，
          文字被切掉一半。（2026-08-16 使用者手機實測回報。）
       ② 導覽到底部那排頁籤按鈕時，貼底的卡片正好蓋住被聚光燈打亮的那一顆。
     現在 place() 會依目標位置自己決定上或下，這裡不要再加垂直方向的 !important。 */
  #tour-card {
    left: 8px !important; right: 8px !important;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tour-spot, #tour-card, #tour-mask, #tour-card .t-bar > i { transition: none; }
}