/* 新手教程覆蓋層。全部 tour- 前綴、零 element selector、不覆寫任何既有 class。
   刪掉本檔與 tour.js／tour-courses.js／tour-demo.js 即完全消失。守衛見 tour-isolation.test.js。 */

/* 入口已移進「更多工具」選單，外觀吃 .ui-next-account-menu > button 的現成樣式。
   原本的 .tour-launch 是舊介面側欄專用（--sidebar-text ＋ 白色半透明邊框），
   放進淺底選單裡會變成看不見的字，所以整組刪掉而不是沿用。 */
.tour-launch-badge {
  display: inline-block; margin-left: var(--space-1);
  background: var(--primary); color: var(--bg);
  border-radius: 99px; padding: 0 5px; font-size: var(--fs-2xs);
}

/* 覆蓋層本身不吃事件，遮罩片才吃：光圈範圍因此天然可以互動（步驟另外決定要不要擋）。
   z-index 要比 --z-modal 高一階：教程會打光在 modal 上（例如 Chat 的「轉為任務」草稿），
   同層時只靠 DOM 順序贏，一旦有人調整 App template 的掛載位置就會靜默被蓋住。 */
.tour-layer { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 1); pointer-events: none; }

/* 遮罩黑不屬於任何語意色 token，所以是唯一寫死顏色的地方。
   數值對齊 .ui-next-task-modal-backdrop（ui-next.css），讓教學遮罩與平台自己的
   modal 遮罩深淺一致——兩者會在同一畫面上先後出現（教 Chat 轉任務那一步）。 */
.tour-mask { position: absolute; background: color-mix(in srgb, #000 48%, transparent); pointer-events: auto; }
/* 只有選單畫面點遮罩會關閉，所以也只有它給游標提示；課程進行中點背景不關（見 tour.js onMaskClick） */
.tour-layer.is-menu .tour-mask { cursor: pointer; }
/* 光圈裡的透明擋板：步驟沒開放互動時蓋著，避免在示範資料上按到會打真 API 的按鈕 */
.tour-mask-hole { background: transparent; }

.tour-ring {
  position: absolute; pointer-events: none;
  border-radius: 12px; border: 2px solid var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent);
  transition: top .3s cubic-bezier(.3,.9,.3,1), left .3s cubic-bezier(.3,.9,.3,1),
              width .3s cubic-bezier(.3,.9,.3,1), height .3s cubic-bezier(.3,.9,.3,1);
}

.tour-pop {
  position: absolute; width: 340px; pointer-events: auto;
  /* --surface 而不是 --card-bg：後者只在 app.css 定義（深色 #202020），
     與 ui-next 的深色 surface #1B1B1E 差一階，並排時看得出來是兩張不同的紙。
     圓角 15px／--border-strong 對齊 .ui-next-task-modal 與 .ui-next-account-menu。 */
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 15px;
  box-shadow: var(--shadow-lg); padding: var(--space-4);
  transition: top .3s cubic-bezier(.3,.9,.3,1), left .3s cubic-bezier(.3,.9,.3,1);
}
.tour-pop.is-center {
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(400px, calc(100vw - 32px));
}

.tour-arrow { position: absolute; width: 0; height: 0; }
.tour-pop[data-side="bottom"] > .tour-arrow {
  top: -7px; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 7px solid var(--surface);
}
.tour-pop[data-side="top"] > .tour-arrow {
  bottom: -7px; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 7px solid var(--surface);
}
.tour-pop[data-side="right"] > .tour-arrow {
  left: -7px; margin-top: -7px;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-right: 7px solid var(--surface);
}
.tour-pop[data-side="left"] > .tour-arrow {
  right: -7px; margin-top: -7px;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 7px solid var(--surface);
}
.tour-pop.is-center > .tour-arrow { display: none; }

.tour-pop-head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.tour-tag {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  /* --primary-light 是 app.css 的舊靛藍 #eef2ff，與 ui-next 的主色無關；
     改成從當下主色調出來，深淺色與新舊介面都自動對。 */
  color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 99px; padding: 1px var(--space-2);
}
.tour-count {
  margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tour-title {
  font-size: var(--fs-lg); font-weight: var(--fw-bold);
  text-wrap: balance; margin-bottom: var(--space-2);
}
/* 說明長度不設限：塞不下就在框內自己捲，不再被裁掉看不到後半段 */
.tour-body {
  display: block; max-height: 34vh; overflow-y: auto;
  font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.7;
  overscroll-behavior: contain;
}
.tour-note {
  display: block; margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface); border-left: 3px solid var(--warning);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65;
}
.tour-note > b {
  display: block; margin-bottom: 2px;
  color: var(--text-secondary); font-weight: var(--fw-semibold);
}

.tour-progress {
  height: 3px; border-radius: 99px; background: var(--border);
  margin: var(--space-4) 0 var(--space-3); overflow: hidden;
}
.tour-progress > span {
  display: block; height: 100%; background: var(--primary);
  transition: width var(--transition-slow);
}

.tour-foot { display: flex; align-items: center; gap: var(--space-2); }
.tour-quit {
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  background: transparent; border: none; color: var(--text-muted);
  margin-right: auto; padding: var(--space-1) 0;
}
.tour-quit:hover { color: var(--text); text-decoration: underline; }
.tour-quit:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tour-btn {
  font: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium); cursor: pointer;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.tour-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* color 不能寫死 #fff：ui-next 深色模式的主色是亮藍 #93C5FD，白字壓在上面對比不足。
   --bg 在淺色是近白、深色是深灰，兩邊都與主色形成足夠反差。 */
.tour-btn-primary { background: var(--primary); color: var(--bg); }
.tour-btn-primary:hover { background: var(--primary-hover); }
.tour-btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.tour-btn-ghost:hover { color: var(--text); border-color: var(--text-muted); }

/* 課程數會長（目前 10 堂）：卡片本身鎖在視窗內、由課程清單自己捲，
   否則標題與底部的「關閉」會被推出畫面外——實測 10 堂就已經溢出 900px 高的視窗。
   ⚠ 高度要除以 --ui-zoom：body 有 zoom:1.1，直接寫 vh 會比視覺上大 10%。 */
.tour-menu {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(520px, calc(100vw - 32px)); pointer-events: auto;
  display: flex; flex-direction: column;
  max-height: calc((100vh - 48px) / var(--ui-zoom, 1));
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 15px; box-shadow: var(--shadow-lg); padding: var(--space-5);
}
.tour-menu-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-1); }
.tour-menu-sub { font-size: var(--fs-base); color: var(--text-muted); margin-bottom: var(--space-4); }
.tour-menu-list {
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  /* 捲動時項目的 focus ring 不要被裁掉 */
  padding: 2px;
}
.tour-menu-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: var(--space-3) var(--space-4);
  color: var(--text);
}
.tour-menu-item:hover { border-color: var(--primary); }
.tour-menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tour-menu-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
/* 同 .tour-btn-primary：ui-next 深色模式的 --success 是亮綠 #4ADE80，白字壓不住。 */
.tour-menu-item.is-done > .tour-menu-num { background: var(--success); color: var(--bg); }
.tour-menu-body { flex: 1; min-width: 0; }
.tour-menu-name { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.tour-menu-desc { display: block; font-size: var(--fs-sm); color: var(--text-muted); }
.tour-menu-steps { flex-shrink: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.tour-menu-foot { display: flex; flex: none; justify-content: flex-end; margin-top: var(--space-4); }
.tour-menu-title, .tour-menu-sub { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-pop, .tour-progress > span { transition: none; }
}
@media (max-width: 820px) {
  .tour-pop { width: min(340px, calc(100vw - 32px)); }
  .tour-body { max-height: 28vh; }
}