/* 里程碑狀況（page23）
   選擇器一律帶 .msto- 前綴避免污染全域；顏色一律走 CSS 變數，不寫死色碼。 */

.msto-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
}

#mstoStatus.error {
  color: var(--error);
}

/* ── 選擇列：度量對齊遊戲分析／音樂音效排程／Release 分析 ── */

.msto-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 16px 24px 12px;
  flex-wrap: wrap;
}

.msto-filter-item .input-ui {
  display: block;
  margin-top: 4px;
  width: 130px;
}

.msto-filter-grow {
  flex: 1 1 340px;
  min-width: 240px;
}

.msto-filter-grow .input-ui {
  width: 100%;
}

.msto-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.msto-meta-row {
  display: flex;
  gap: 16px;
  padding: 0 24px 14px;
  flex-wrap: wrap;
}

/* ── 進行中／等待中專用的亮橘（2026-10-06 使用者指定）──
   原本用 --warning（偏暗的金色），與甘特圖的鵝黃預估線同色系、分不開。設計系統沒有亮橘變數，
   故比照預估線在此集中定義一個色碼 token，其餘一律引用。範圍含掛在 body 下的甘特 Tip。
   ==只換進行中與等待中==；建議單、排程推估標籤與資料警告維持 --warning（它們不是狀態）。 */
.msto-wrapper, .msto-logic-modal, .msto-settings-modal, .msto-tip { --msto-ongoing: #ff8a1f; }

/* ── 狀態色 ──
   四種狀態集中在此定義一次，圖例與每一列的圓點共用。 */

.msto-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text-muted);
}

.msto-dot.state-done { background: var(--success); }
.msto-dot.state-in_progress { background: var(--msto-ongoing); }
.msto-dot.state-not_started { background: var(--border-color); }
/* 無從判定用空心：==不能跟「未開始」長一樣==，前者是我們不知道，後者是確定還沒動工 */
.msto-dot.state-unknown {
  background: transparent;
  border: 2px solid var(--text-muted);
}
/* 已排定：青色環＋淡底，與「已完成」的實心綠、「無從判定」的空心灰都分得開 */
/* 等待中：橘色環＋淡底——仍屬「進行中」家族（橘），但空心表示目前沒有單在動 */
.msto-dot.state-waiting {
  background: color-mix(in srgb, var(--msto-ongoing) 25%, transparent);
  border: 2px solid var(--msto-ongoing);
}
.msto-dot.state-scheduled {
  background: color-mix(in srgb, var(--brand-teal) 30%, transparent);
  border: 2px solid var(--brand-teal);
}

.msto-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-muted);
  align-items: center;
}

.msto-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── 進度摘要 ── */

.msto-summary {
  padding-top: 6px;
}

.msto-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.msto-bar span {
  display: block;
  height: 100%;
  background: var(--brand-teal);
}

.msto-summary-text {
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--text-secondary);
}

/* 資料面警告（節點設定檔缺漏、公版單里程碑名稱不符）——不是錯誤，但會影響判讀，要醒目 */
.msto-warn {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 0.84rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--text-primary);
}

/* ── 里程碑清單 ── */

.msto-list {
  margin-top: 18px;
}

.msto-item {
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--border-color);
  border-radius: var(--radius);
}

.msto-item + .msto-item {
  margin-top: 8px;
}

.msto-item.state-done { border-left-color: var(--success); }
.msto-item.state-in_progress { border-left-color: var(--msto-ongoing); }
.msto-item.state-unknown { border-left-style: dashed; }
.msto-item.state-waiting { border-left-color: var(--msto-ongoing); border-left-style: dashed; }
.msto-item.state-scheduled { border-left-color: var(--brand-teal); border-left-style: dashed; }

.msto-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  flex-wrap: wrap;
}

.msto-head:hover {
  background: var(--bg-input);
}

.msto-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1 1 200px;
  min-width: 0;
}

.msto-state {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  flex: 0 0 auto;
  width: 64px;
}

.msto-range {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 狀態文字依狀態上色，與圓點、左邊框同一組語意色（2026-10-06）：
   已完成綠、進行中橘、已排定青；未開始與無從判定維持灰，後者加斜體——「不知道」不該跟「確定還沒動」長一樣 */
.msto-state.state-done, .msto-state-text.state-done { color: var(--success); }
.msto-state.state-in_progress, .msto-state-text.state-in_progress { color: var(--msto-ongoing); }
.msto-state.state-scheduled, .msto-state-text.state-scheduled { color: var(--brand-teal); }
.msto-state.state-waiting, .msto-state-text.state-waiting { color: var(--msto-ongoing); font-style: italic; }
.msto-state.state-not_started, .msto-state-text.state-not_started { color: var(--text-muted); }
.msto-state.state-unknown, .msto-state-text.state-unknown { color: var(--text-muted); font-style: italic; }

/* 判定來源要看得出差別：錨點是明確定義，排程只是推估，
   舊算法則容易被最後才做的單拉長——三者不該長得一樣可信。 */
.msto-src {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface2);
  color: var(--text-muted);
}

.msto-src.src-anchor {
  background: color-mix(in srgb, var(--brand-teal) 18%, transparent);
  color: var(--brand-teal);
}

.msto-src.src-audio {
  background: color-mix(in srgb, var(--warning) 20%, transparent);
  color: var(--warning);
}

/* ── 展開的明細 ── */

.msto-detail {
  padding: 4px 14px 12px 30px;
  border-top: 1px solid var(--border-color);
}

.msto-detail .msto-note {
  padding: 6px 0;
}

.msto-anchor {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand-teal) 18%, transparent);
  color: var(--brand-teal);
  font-weight: 600;
}

.msto-tpl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid var(--border-color);
  font-size: 0.82rem;
}

.msto-tpl-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary);
  word-break: break-word;
}

/* 未認領的樣板要跳出來：那是「該有卻沒有」，不是普通的一列 */
.msto-tpl.is-missing .msto-tpl-name {
  color: var(--error);
}

.msto-tpl.is-done .msto-tpl-name {
  color: var(--text-secondary);
}

.msto-tpl-key {
  flex: 0 0 auto;
  width: 92px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
}

.msto-tpl-status {
  flex: 0 0 auto;
  width: 88px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* 有實際單卻還沒完成：跳出來，跟一堆已完成的 Done 混在一起容易被忽略 */
.msto-tpl-status-pending {
  color: var(--error);
}

.msto-tpl-done {
  flex: 0 0 auto;
  width: 168px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* 公版單／建議單／依組別歸類——三種認領來源的可信度不同，比照 .msto-src 用色塊區隔 */
.msto-tpl-kind {
  flex: 0 0 auto;
  width: 76px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
  background: var(--surface2);
  color: var(--text-muted);
}

.msto-tpl-kind.kind-public {
  background: color-mix(in srgb, var(--brand-teal) 18%, transparent);
  color: var(--brand-teal);
}

/* 不適用任何分類（Bug 段、音樂音效排程）：素色 "-"，不套膠囊底色，
   免得看起來像又一種「真的認領來源」。 */
.msto-tpl-kind.kind-none {
  background: none;
  color: var(--text-muted);
  font-weight: 400;
}

.msto-tpl-kind.kind-optional {
  background: color-mix(in srgb, var(--warning) 20%, transparent);
  color: var(--warning);
}

/* 錨點單：這一列決定了整個里程碑的結束日，要在密集的清單裡一眼認出來 */
.msto-tpl.is-anchor {
  background: color-mix(in srgb, var(--brand-teal) 8%, transparent);
  border-radius: 4px;
}

.msto-tpl.is-anchor .msto-tpl-name {
  color: var(--brand-teal);
  font-weight: 600;
}

/* 遊戲標題連到 Epic：平時維持標題原色、不加底線（不搶視覺），hover 才轉品牌青＋底線表示可點 */
.msto-title-link { color: inherit; text-decoration: none; }
.msto-title-link:hover { color: var(--brand-teal); text-decoration: underline; }

.msto-key {
  color: var(--brand-teal);
  text-decoration: none;
}

.msto-key:hover {
  text-decoration: underline;
}

.msto-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* 未對應到任何里程碑的單：與里程碑列區隔開，它不是一個階段 */
.msto-unassigned {
  margin-top: 16px;
  border-left-color: var(--text-muted);
  border-left-style: dashed;
}

.msto-unassigned .msto-range {
  color: var(--text-muted);
  font-family: var(--font-main);
}


/* Bug 單分段：來源是實際單據（不是推估），但分界依賴「Beta 測試」那張單有沒有開，
   故與錨點判定區隔開，用另一個色相 */
.msto-src.src-bugs {
  background: color-mix(in srgb, var(--error) 16%, transparent);
  color: var(--error);
}

/* ── 判定邏輯圖（資訊 Modal） ── */

.msto-info-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.msto-info-btn:hover {
  border-color: var(--brand-teal);
  color: var(--brand-teal);
}

.msto-logic-modal .card-ui {
  width: 820px;
  max-width: 94vw;
  max-height: 88vh;
}

.msto-logic-body {
  padding: 8px 20px 20px;
  overflow: auto;
  max-height: calc(88vh - 60px);
}

.msto-logic-intro {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 4px 0 14px;
}

.msto-logic-intro code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.mdg-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--font-main);
}

.mdg-decision-box { fill: var(--bg-input); stroke: var(--brand-teal); stroke-width: 1.5; }

.mdg-decision-text {
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
}

.mdg-decision-sub {
  color: var(--text-muted);
  font-size: 9.5px;
  font-weight: 400;
  margin-top: 3px;
  line-height: 1.35;
}

.mdg-outcome-box { stroke-width: 1.5; }
.mdg-outcome-box.done { fill: color-mix(in srgb, var(--success) 12%, transparent); stroke: var(--success); }
.mdg-outcome-box.inprogress { fill: color-mix(in srgb, var(--msto-ongoing) 12%, transparent); stroke: var(--msto-ongoing); }
.mdg-outcome-box.notstarted { fill: var(--bg-input); stroke: var(--border-color); }
.mdg-outcome-box.scheduled { fill: color-mix(in srgb, var(--brand-teal) 12%, transparent); stroke: var(--brand-teal); stroke-dasharray: 5 3; }
.mdg-outcome-box.unknown { fill: var(--bg-input); stroke: var(--text-muted); stroke-dasharray: 4 3; }

.mdg-outcome-text { font-size: 11px; font-weight: 700; }
.mdg-outcome-text.done { color: var(--success); }
.mdg-outcome-text.inprogress { color: var(--msto-ongoing); }
.mdg-outcome-text.notstarted { color: var(--text-muted); }
.mdg-outcome-text.scheduled { color: var(--brand-teal); }
.mdg-outcome-text.unknown { color: var(--text-muted); }

.mdg-outcome-sub {
  font-size: 9px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}

.mdg-fo-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  box-sizing: border-box;
  text-align: center;
}

.mdg-edge { fill: none; stroke: var(--text-muted); stroke-width: 1.2; opacity: 0.75; }
.mdg-edge-label { font-size: 9px; fill: var(--text-muted); }
.mdg-arrow-fill { fill: var(--text-muted); opacity: 0.75; }

.mdg-rule-box { fill: var(--bg-input); stroke: var(--border-color); stroke-width: 1.2; }
.mdg-rule-title { color: var(--brand-teal); font-size: 12px; font-weight: 700; }
.mdg-rule-text {
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.5;
  margin-top: 4px;
}

/* ── 甘特圖檢視（版面邏輯照抄 audio_schedule.css 的甘特骨架，顏色改用里程碑既有的 state 配色） ── */

/* 沿用「音樂音效排程」的檢視切換樣式（audio_schedule.css .audioscd-view-switch），
   同一種操作在不同頁面要長一樣，使用者才不用重新學一次。 */
.msto-view-switch {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  margin-left: 4px;
}

.msto-view-switch .msto-view-btn {
  padding: 6px 16px;
  font-size: 0.85rem;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
}

.msto-view-switch .msto-view-btn.active {
  background: var(--brand-teal);
  color: #fff;
}

.msto-gantt-wrapper {
  margin-top: 12px;
}

.msto-gantt-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.msto-gantt-toolbar .input-ui {
  width: 120px;
  padding: 5px 10px;
  font-size: 0.8rem;
}

.msto-gantt-scroll {
  overflow-x: auto;
  padding: 0 0 12px;
}

.msto-gantt {
  min-width: max-content;
}

.msto-gantt-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.msto-gantt-row:last-child { border-bottom: none; }

.msto-gantt-row:hover { background: var(--bg-input); }

.msto-gantt-row.is-selected { background: color-mix(in srgb, var(--brand-teal) 10%, transparent); }

.msto-gantt-row.msto-gantt-head { cursor: default; }
.msto-gantt-row.msto-gantt-head:hover { background: transparent; }

/* 左欄固定：橫向捲動時里程碑名不跟著跑掉（沿用 audio_schedule 的 sticky 寫法） */
.msto-gantt-name {
  position: sticky;
  left: 0;
  z-index: 4;
  flex: 0 0 220px;
  width: 220px;
  padding: 8px 12px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-color);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-primary);
}

.msto-gantt-head .msto-gantt-name {
  z-index: 6;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.msto-gantt-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}

.msto-gantt-track {
  position: relative;
  flex: 0 0 auto;
  min-height: 40px;
}

.msto-gantt-head .msto-gantt-track { min-height: 26px; }

.msto-week {
  position: absolute;
  top: 0;
  bottom: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  padding-left: 4px;
  border-left: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.msto-week.month-start {
  color: var(--text-secondary);
  font-weight: 600;
}

.msto-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--error);
  opacity: 0.65;
  z-index: 1;
}

/* 甘特橫桿：選擇器限定在軌道內——摘要列的進度條也叫 .msto-bar，不限定會被這組 absolute 定位吃掉 */
.msto-gantt-track .msto-bar {
  position: absolute;
  top: 10px;
  height: 20px;
  border-radius: 10px;
  z-index: 2;
  box-sizing: border-box;
}

/* 實心但降一階飽和度：疊上預估線後兩者都要看得清，橫桿太搶眼線就會被吃掉 */
.msto-gantt-track .msto-bar.done { background: color-mix(in srgb, var(--success) 72%, var(--bg-card)); }

/* 進行中沒有真正的結束日：右緣不收邊、漸層淡出，跟已完成的實心桿區隔開，
   不能讓「還在進行」看起來跟「已經結束」一樣篤定。 */
.msto-gantt-track .msto-bar.in_progress {
  background: linear-gradient(to right, color-mix(in srgb, var(--msto-ongoing) 80%, var(--bg-card)), color-mix(in srgb, var(--msto-ongoing) 12%, transparent));
  border-radius: 10px 0 0 10px;
}

/* 等待中的實際區段：與狀態圓點同一套配色（橘色環＋淡橘底），一看就知道屬於等待中的節點 */
.msto-gantt-track .msto-bar.waiting {
  background: color-mix(in srgb, var(--msto-ongoing) 28%, var(--bg-card));
  border: 2px solid var(--msto-ongoing);
}

/* 等待中但沒有任何區段可畫（無 Sprint、單也沒有起訖）：畫到今天，橘色虛線外框＋淡底——沒有單在動 */
.msto-gantt-track .msto-bar.waiting-open {
  background: color-mix(in srgb, var(--msto-ongoing) 12%, transparent);
  border: 1.5px dashed var(--msto-ongoing);
  border-right: none;
  border-radius: 10px 0 0 10px;
}

/* 已排定（Release 日期還沒到）：虛線外框＋淡底，日期是真的但事情還沒發生 */
.msto-gantt-track .msto-bar.scheduled {
  background: color-mix(in srgb, var(--brand-teal) 14%, transparent);
  border: 1.5px dashed var(--brand-teal);
}

.msto-detail-panel {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.msto-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* ═══════════ 預估時程（2026-10-06）═══════════ */

/* ── 清單表格化：表頭與各列共用同一組欄寬，日期欄上下對齊 ── */
.msto-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 64px 198px 172px 132px 120px;
  column-gap: 14px;
  align-items: center;
}

.msto-grid-head {
  padding: 0 15px 6px 19px;   /* 補上列的左框 4px＋外框 1px，與下方各列對齊 */
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 8px;
}

.msto-head.msto-grid .msto-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.msto-head.msto-grid .msto-state { width: auto; }

.msto-range .msto-d { display: inline-block; }
.msto-range .msto-tilde { margin: 0 4px; color: var(--text-muted); }
.msto-range.is-actual { color: var(--text-primary); }
.msto-nil { color: var(--text-muted); }

/* 預估為手動調整 */
.msto-manual {
  display: inline-block;
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  font-family: var(--font-main);
  background: color-mix(in srgb, var(--brand-teal) 18%, transparent);
  color: var(--brand-teal);
}

/* 差異：+ 晚（紅）、- 早（綠）、0 準時 */
.msto-diff {
  display: inline-block;
  min-width: 58px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
}
.msto-diff.late { color: var(--error); font-weight: 600; }
.msto-diff.early { color: var(--success); }
.msto-diff.ontime { color: var(--text-secondary); }

.msto-est-line {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 0 2px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.msto-narrow-only { display: none; }

@media (max-width: 900px) {
  /* 窄螢幕：起訖允許換行（起日一行、訖日一行），不出現水平捲軸 */
  .msto-grid { grid-template-columns: minmax(110px, 1fr) 52px minmax(0, 120px) minmax(0, 110px); column-gap: 8px; }
  .msto-grid .msto-range { white-space: normal; }
  .msto-grid .msto-col-diff,
  .msto-grid .msto-col-src { display: none; }
  .msto-narrow-only { display: inline; }
}

/* ── 甘特圖：預估細線疊在實際粗橫桿中線上（橫桿 top 10px、高 20px → 中線 20px） ──
   樣式為「啞鈴」：細線＋兩端圓點標起訖。
   第五版（2026-10-06 使用者指定）：線條鵝黃色、拿掉黑色描邊；兩端圓點與線同色系但加深
   （鵝黃混入 --warning 的金色，不另寫色碼）。
   ==鵝黃色與進行中的亮橘是本頁僅有的兩個寫死色碼==：設計系統沒有黃色變數（--warning 是偏橘的金色，疊在
   進行中的橘色橫桿上會融在一起），故在此集中定義成 --msto-est-fill 一處，其餘一律引用變數。
   圖例同一組變數。 */
.msto-wrapper, .msto-settings-modal {
  --msto-est-fill: #f6e27a;
  --msto-est-dot: color-mix(in srgb, var(--msto-est-fill) 35%, var(--warning));
}

/* 外層＝14px 高的透明感應區（方便滑鼠停上去），內層 <i>＝3px 線條，兩端圓點畫在外層 */
.msto-est {
  position: absolute;
  top: 13px;
  height: 14px;
  z-index: 3;
  cursor: pointer;
}
.msto-est i {
  position: absolute;
  top: 5.5px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--msto-est-fill);
}
.msto-est::before,
.msto-est::after {
  content: '';
  position: absolute;
  top: 3px;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--msto-est-dot);
  z-index: 1;
}
.msto-est::before { left: -4px; }
.msto-est::after { right: -4px; }
.msto-est:hover i { height: 4px; top: 5px; }

/* 甘特圖 Tip（掛在 body 下、position: fixed，不受甘特橫向捲動與 overflow 裁切） */
.msto-tip {
  position: fixed;
  z-index: 2000;
  max-width: 320px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-secondary);
  pointer-events: none;
}
/* 此段＝滑鼠所在的那一段 Sprint 區間，用品牌青＋粗體跟整段區隔 */
.msto-tip-seg { color: var(--brand-teal); font-weight: 600; }
.msto-tip-seg .msto-tip-k { color: var(--brand-teal); }
.msto-tip-title { font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.msto-tip-k {
  display: inline-block;
  width: 34px;
  color: var(--text-muted);
  font-weight: 600;
}
.msto-gantt-track .msto-bar { cursor: pointer; }

.msto-legend-est i {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--msto-est-fill);
  vertical-align: middle;
}
.msto-legend-est i::before,
.msto-legend-est i::after {
  content: '';
  position: absolute;
  top: -2.5px;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--msto-est-dot);
}
.msto-legend-est i::before { left: -3px; }
.msto-legend-est i::after { right: -3px; }

/* 選項旁的 i 說明：點一下展開、再點收合 */
.msto-help {
  margin: 6px 0 0 22px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.msto-help p { margin: 0 0 4px; }
.msto-set-check .msto-info-btn { margin-left: 4px; }

.msto-settings-btn { white-space: nowrap; }

/* ── ⚙️ 設定 Modal ── */
.msto-settings-modal .card-ui {
  width: min(1040px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.msto-set-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-color);
}

.msto-set-tab {
  padding: 8px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}
.msto-set-tab.active { color: var(--brand-teal); border-bottom-color: var(--brand-teal); }

.msto-set-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 24px;
}

.msto-set-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}
#mstoSetMsg.error { color: var(--error); }
.msto-set-actions { display: flex; gap: 8px; }

.msto-set-anchor {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.msto-set-anchor .input-ui { width: auto; }
/* 「套用公版」靠右，與錨點／日期同一列對齊 */
.msto-set-anchor .msto-set-apply { margin-left: auto; }
.msto-set-hint { margin: 8px 0 10px; line-height: 1.6; }

.msto-set-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 150px 150px 56px 200px;
  column-gap: 10px;
  align-items: center;
  padding: 4px 0;
  border-top: 1px solid var(--border-color);
  font-size: 0.82rem;
}
.msto-set-row .input-ui { width: 100%; padding: 4px 6px; }
.msto-set-row.is-manual { background: color-mix(in srgb, var(--brand-teal) 6%, transparent); }
.msto-set-head,
.msto-set-head span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  border-top: none;
}
.msto-set-name { color: var(--text-primary); }
.msto-set-base { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); }
.msto-set-flag { display: flex; align-items: center; gap: 4px; }
.msto-set-check { display: flex; gap: 6px; align-items: center; margin-top: 12px; font-size: 0.82rem; color: var(--text-secondary); }

.msto-link-btn {
  border: none;
  background: transparent;
  color: var(--brand-teal);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
}

.msto-tpl-row {
  display: grid;
  grid-template-columns: 32px minmax(180px, 1fr) 250px 290px 70px;
  column-gap: 10px;
  align-items: center;
  padding: 4px 0;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
}
.msto-tpl-id { font-family: var(--font-mono); font-weight: 600; color: var(--brand-teal); }
.msto-tpl-cell { display: flex; align-items: center; gap: 4px; }
.msto-tpl-cell .input-ui { width: auto; padding: 3px 4px; }
.msto-num { width: 56px !important; }

.msto-set-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* 欄位標籤：寬螢幕有表頭不需要；窄螢幕表頭隱藏，改在每一格前面標明是哪一欄 */
.msto-cell-label {
  display: none;
  flex: 0 0 34px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .msto-set-head { display: none; }
  .msto-cell-label { display: inline-block; }

  /* 本遊戲預估：節點名一行，開始／結束並排一行，基準一行 */
  .msto-set-row { grid-template-columns: 1fr 1fr auto; row-gap: 6px; padding: 8px 0; }
  .msto-set-row .msto-set-name { grid-column: 1 / -1; font-weight: 600; }
  .msto-set-row .msto-set-base { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }

  /* 公版：ID＋節點名一行，開始／結束／空檔各一行，前面都有欄位標籤 */
  .msto-tpl-row { grid-template-columns: 28px 1fr; row-gap: 6px; padding: 8px 0; }
  .msto-tpl-row .msto-set-name { font-weight: 600; }
  .msto-tpl-row .msto-tpl-cell { grid-column: 2 / -1; flex-wrap: wrap; }
}

/* Release 版本日期：來源是 Release 分析上人工填的版本日期，可信度同錨點（明確定義），比照錨點配色 */
.msto-src.src-release {
  background: color-mix(in srgb, var(--brand-teal) 18%, transparent);
  color: var(--brand-teal);
}