/* Release 分析（page22）
   選擇器一律帶 .relana- 前綴避免污染全域；顏色一律走 CSS 變數，不寫死色碼。 */

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

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

/* 建立成功的訊息：彈窗關掉之後，這行字是「到底建成功了沒」的唯一線索，
   不能與旁邊那些灰色的狀態文字長得一樣。 */
#relAnaStatus.ok {
  color: var(--success);
  font-weight: 600;
}

.relana-updating {
  color: var(--warning);
  font-weight: 600;
}

/* ── 選擇列 ──
   度量對齊「遊戲分析」與「音樂音效排程」的 selector row：三頁的 Provider 選單在
   使用者心智裡是同一組控制項，高度或間距差一點就會看起來沒對齊。 */
.relana-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  padding: 16px 24px 12px;
  flex-wrap: wrap;
}

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

/* 版本名可能很長（例如 "Mahjong Wins: Master_rc"），讓它吃掉剩餘寬度 */
.relana-filter-grow {
  flex: 1 1 320px;
  min-width: 240px;
}

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

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

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

/* ── 版本表頭 ── */

.relana-head-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 24px;
  padding-top: 4px;
}

.relana-head-value {
  margin-top: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.relana-head-value.relana-mono {
  font-family: var(--font-mono);
}

.relana-desc-block {
  margin-top: 20px;
}

.relana-desc {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.relana-desc.relana-muted {
  color: var(--text-muted);
  font-style: italic;
}

/* ── 就緒度 ──
   四種強度只差顏色與文案，版面一致：距上線的天數決定語氣，不決定看得到什麼。 */
.relana-readiness {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border-left: 4px solid var(--text-muted);
  background: var(--bg-input);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.relana-readiness.level-ready {
  border-left-color: var(--success);
  color: var(--success);
}

.relana-readiness.level-warn {
  border-left-color: var(--warning);
  color: var(--warning);
}

.relana-readiness.level-alert {
  border-left-color: var(--error);
  color: var(--error);
}

/* ── 通知草稿 ── */

.relana-window-input {
  width: 130px;
  font-family: var(--font-mono);
}

.relana-notice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  padding-top: 4px;
  align-items: stretch;   /* 本來就是預設值，寫出來避免日後被誤改成 start */
}

@media (max-width: 1100px) {
  .relana-notice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 左右兩欄各自的外層容器。==要讓左欄的高度跟著右欄走==（2026-09-23）：
   左欄項目清單原本自己訂了一個固定高度（460px），與右欄通知文字的天然高度
   各長各的，兩欄看起來高低不齊。改成 flex column 後，配合 grid 的
   align-items: stretch，兩欄的外層盒子永遠等高（取兩者天然內容較高的那個）；
   右欄本身沒有再多加任何限制，由它的天然高度決定這一列多高，
   左欄再用 flex:1 撐滿那個高度、超出時才內部捲動。 */
.relana-notice-grid > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 容器本身不再畫框：每個分類區塊各自是一張卡片，靠間距與色帶分隔，
   比「一個大框裡塞四段」清楚得多 */
.relana-entries {
  margin-top: 6px;
  flex: 1 1 auto;
  min-height: 0;   /* flex 子項預設不會縮小，不寫這行 overflow-y:auto 不會生效 */
  overflow-y: auto;
  padding-right: 2px;
}

.relana-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.86rem;
}

.relana-entry:last-child {
  border-bottom: none;
}

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

.relana-entry.relana-blocked .relana-entry-text {
  color: var(--text-muted);
}

.relana-entry-flag {
  flex: 0 0 auto;
  font-size: 0.74rem;
  color: var(--warning);
  white-space: nowrap;
}

/* 通知文字用等寬呈現：模板的空白數量（`•` 後兩個半形空格）是收訊端認得的樣子，
   比例字型會讓人以為排版跑掉而去「修正」它。 */
/* 通知文字現在是可編輯的 <textarea>（2026-09-23），不再是唯讀的 <pre>——
   複製前常常要順手調個字，先前只能複製出去外部再改，改完又要貼回來對照。
   ==樣式沿用原本 <pre> 的那一份，不為了換成表單元件另立一套==：
   width/box-sizing/resize 是 textarea 才需要的屬性，其餘（字型、留白、行高、
   捲動）全部照舊。 */
.relana-notice {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow-y: auto;
  resize: vertical;   /* 允許使用者拉高看更多，拉低則回到 max-height 的捲動 */
}

.relana-notice:focus {
  outline: none;
  border-color: var(--brand-teal);
}

/* ── 未完成提醒 ──
   刻意放在通知區下方而非表格裡：它是給「發通知的人」看的，不是通知內容的一部分。 */
/* 緊貼在就緒度下方（2026-09-23 自通知草稿移來）。==間距比一般區塊窄==：
   它是就緒度那句「仍有 2 張未完成」的細目，拉開到 20px 會讀成兩件不相干的事 */
.relana-pending {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--error);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.relana-pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--error);
}

.relana-pending-list {
  margin-top: 8px;
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ── 明細 ── */

.relana-group {
  margin-top: 18px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.relana-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-input);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

/* 收起／展開。==放在標題左側==：它是這一列的操作，擺右邊會和完成數搶同一個落點 */
.relana-fold {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
}

.relana-fold:hover {
  color: var(--brand-teal);
  border-color: var(--brand-teal);
}

.relana-group-title {
  flex: 1 1 auto;
  min-width: 0;
}

.relana-group-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.relana-group-count.relana-all-done {
  color: var(--success);
}

.relana-cat-head {
  padding: 8px 14px 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* 未歸屬 Epic 群組內的組別分層。比分類標題淺一階，避免和 .relana-cat-head 搶層級 */
.relana-team-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px 3px 26px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.relana-team-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  color: var(--text-secondary);
}

.relana-team-count {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-mono);
}

.relana-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border-top: 1px solid var(--border-color);
  font-size: 0.86rem;
}

.relana-item-key {
  flex: 0 0 auto;
  width: 96px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* 單據類型：分類收斂成四種後它不再影響分類，但仍要看得見（Bug 與新功能的差別） */
.relana-item-type {
  flex: 0 0 auto;
  width: 52px;
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relana-item-summary {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-primary);
  word-break: break-word;
}

.relana-item-status {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--warning);
  white-space: nowrap;
}

.relana-item-status.relana-done {
  color: var(--success);
}

.relana-item-assignee {
  flex: 0 0 auto;
  width: 110px;
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 留言程式碼提及（/mentions，手動觸發）。只在「非遊戲 Epic」群組的 Backend/Frontend
   單底下出現，見 release_analytics.js 的 mentionBlock()。 */
.relana-mention-block {
  padding: 8px 14px 10px 110px;
  border-top: 1px dashed var(--border-color);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.relana-mention-error {
  color: var(--error);
  padding-left: 14px;
}

.relana-mention-empty {
  color: var(--text-muted);
  padding-left: 14px;
}

.relana-mention-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.relana-mention-group-label {
  flex: 0 0 auto;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.relana-mention-chip {
  flex: 0 0 auto;
  padding: 1px 8px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Backend／Frontend 兩桶顏色刻意一致（只拆標籤，不拆顏色）：兩者都是開發角色，
   與 QA／其他兩種「審查/旁觀」角色的視覺區分才是重點。 */
.relana-mention-chip-backend,
.relana-mention-chip-frontend {
  border-color: var(--brand-teal);
  color: var(--brand-teal);
}

.relana-mention-chip-qa {
  border-color: var(--qa);
  color: var(--qa);
}

.relana-mention-chip-other {
  color: var(--text-muted);
}

.relana-mention-toggle {
  align-self: flex-start;
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
}

.relana-mention-toggle:hover {
  color: var(--brand-teal);
  border-color: var(--brand-teal);
}

.relana-mention-comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.relana-mention-comment {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--bg-input);
}

.relana-mention-comment-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.relana-mention-comment-author {
  font-weight: 600;
  color: var(--text-primary);
}

.relana-mention-comment-time {
  margin-left: auto;
  font-family: var(--font-mono);
}

.relana-mention-comment-body {
  margin: 0;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
}

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

.relana-key-link:hover {
  text-decoration: underline;
}

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

/* ── 視圖切換（比照音樂音效排程的 view-switch）── */

.relana-view-switch {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.relana-view-switch button {
  padding: 5px 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

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

/* ── 版本總表 ── */

/* 版本名與遊戲名都可能很長，整表橫向捲動而不是讓頁面本身橫捲 */
.relana-table-scroll {
  overflow-x: auto;
  margin-top: 4px;
}

.relana-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.relana-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.relana-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

/* 整列不再可點（切頁是「檢視」鈕的事），故不給 pointer 游標——
   游標會暗示「這裡可以按」，而實際上只有欄內的連結與按鈕可按。
   hover 底色保留：長表格橫向讀值時，知道自己在哪一列仍然有用。 */
.relana-row:hover {
  background: var(--bg-input);
}

.relana-table .relana-mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
}

.relana-cell-name {
  font-weight: 600;
  min-width: 180px;
}

/* 遊戲欄：一個 Epic 一行，不截斷。
   ==不沿用 .relana-key-link 的青色==——那個顏色是給「單號」這種輔助資訊用的，
   套在遊戲名上太淡，實測讀不清楚。遊戲名是這一欄的主體，用主文字色＋加粗，
   青色留給 hover 表示「這是可以點的」。 */
.relana-cell-games {
  min-width: 200px;
  max-width: 340px;
}

.relana-game-link {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.5;
  word-break: break-word;
}

.relana-game-link + .relana-game-link {
  margin-top: 2px;
}

a.relana-game-link:hover {
  color: var(--brand-teal);
  text-decoration: underline;
}

/* Provider 與 Release 狀態併進版本欄：單獨開欄會把就緒度擠出可視範圍 */
.relana-cell-flag {
  display: flex;
  gap: 4px;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* ── 色塊 ──
   ==用「形狀」區分意義，不只靠顏色==：設計系統只有 teal／綠／橘／紅四個語意色，
   而綠橘紅已經被就緒度 pill 佔用。若 provider 也用同一組實心色，同一列就會出現
   兩種綠色代表完全不同的事。故：
     *   provider（身分）＝ **實心淡色塊**
     *   Release 狀態（事實）＝ **無色相的灰階**，不佔用任何語意色
     *   就緒度（急迫度）＝ **外框 pill**，綠橘紅專用
   底色一律由既有變數 color-mix 導出，不另外寫死色碼。 */
.relana-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-main);
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--surface2);
  color: var(--text-muted);
}

/* ==實心飽和底太暗、看久了累==（實測回饋）：改回淡底＋同色外框。
   但 16% 的原始版本又拉不開 teal 與 green（相鄰色相，小尺寸下都像淡薄荷色），
   故折衷在 34% 左右並補一圈 70% 濃度的外框——**外框才是把色相「框」出來的關鍵**，
   單純加深底色只會讓整張表變沉重。
   文字用主文字色而非同色系，避免淡色字疊在淡色底上再掉一次對比。 */
.relana-chip-p9,
.relana-chip-p8,
.relana-chip-p7 {
  color: var(--text-primary);
  border: 1px solid;
}

.relana-chip-p9 {                                              /* Zestplay */
  background: color-mix(in srgb, var(--brand-teal) 34%, transparent);
  border-color: color-mix(in srgb, var(--brand-teal) 70%, transparent);
}

.relana-chip-p8 {                                              /* JN */
  background: color-mix(in srgb, var(--warning) 36%, transparent);
  border-color: color-mix(in srgb, var(--warning) 72%, transparent);
}

.relana-chip-p7 {                                              /* NXTLVL */
  background: color-mix(in srgb, var(--success) 34%, transparent);
  border-color: color-mix(in srgb, var(--success) 70%, transparent);
}

/* ── 狀態色塊 ──
   ==Released 的鵝黃與 JN 的橘是同一個色相（都來自 --warning），只調濃度拉不開==
   （實測兩者並排仍覺得太近）。改為**同時換形狀與字重**，讓它們分屬不同的視覺類別：
     provider ＝ 方角 ＋ 粗體 ＋ 外框   → 看起來像「標籤」
     狀態     ＝ 膠囊 ＋ 一般字重 ＋ 無框 → 看起來像「說明文字」
   形狀差異在小尺寸下比色相差異可靠得多；鵝黃再降到 14% 只當背景襯色。 */
.relana-chip-unreleased,
.relana-chip-released {
  border-radius: 999px;
  font-weight: 500;
  padding: 1px 9px;
}

.relana-chip-unreleased {
  background: var(--surface2);
  color: var(--text-muted);
}

.relana-chip-released {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--text-secondary);
}

/* 未載入的欄位顯示「—」而非 0——拿 0 冒充「零張未完成」會讓人以為那版已經齊了 */
.relana-muted-cell {
  color: var(--text-muted);
  font-style: italic;
}

.relana-all-done {
  color: var(--success);
  font-weight: 700;
}

/* 「剩餘時間」標籤。
   ==只有一條上色規則：剩餘 < 30 天即紅底高亮==。原本依就緒度分四色，
   但這一欄要回答的只有「還剩多久、該不該緊張」；四色反而要人先記住一組規則。
   紅底上的文字色必須固定（底色不隨主題翻轉，理由同 provider 色塊）。 */
.relana-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

.relana-pill-urgent {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
  font-weight: 700;
}

/* ── 多份通知（依 provider 拆）── */

.relana-notice-block + .relana-notice-block {
  margin-top: 16px;
}

.relana-notice-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.relana-notice-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-teal);
}

.relana-notice-head .btn-ui {
  margin-left: auto;
}

/* provider 判不出來、會同時進兩份通知的項目：必須標出來，
   否則使用者只會覺得「怎麼重複了」而不知道是刻意的 */
.relana-entry-dup {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── 通知項目的分類區塊 ──
   每區一張獨立卡片，左緣色帶標示分類。==分類色只在這裡定義一次==，
   標頭文字、色帶、計數全部引用同一個 --relana-cat 變數，不在各處另寫色碼。 */

.relana-entry-section {
  --relana-cat: var(--text-muted);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--relana-cat);
  border-radius: var(--radius);
  overflow: hidden;
}

.relana-entry-section + .relana-entry-section {
  margin-top: 14px;
}

.relana-cat-new_game    { --relana-cat: var(--brand-teal); }
.relana-cat-game_remove { --relana-cat: var(--error); }
.relana-cat-biz         { --relana-cat: var(--warning); }
.relana-cat-other       { --relana-cat: var(--text-muted); }

/* 區塊標頭本身就是總開關：整區一次勾／取消（最常用的是把「其他」整區關掉） */
.relana-entry-cat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 1;
}

.relana-entry-cat-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--relana-cat);
  letter-spacing: 0.04em;
}

.relana-entry-cat-head .relana-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
}

/* 內容列縮排，讓「這些列屬於上面那個標頭」用版面講清楚，而不是只靠顏色 */
.relana-entry-section .relana-entry {
  padding-left: 22px;
}

/* 通知項目的單號：同名的單（例如同一款遊戲的多張下架單）只有靠它才分得出來 */
.relana-entry-key {
  flex: 0 0 auto;
  width: 86px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 上線時間軸（依月份）──
   一欄一個月，欄內是該月上線的遊戲。==刻意不畫長度區間條==：版本是「某天上線」
   這個時間點，畫成長條會讓人誤以為它佔用一段期間。顏色語意與 .relana-pill
   同一套，不另外定義色值。 */

.relana-gantt-scroll {
  overflow-x: auto;
  margin-top: 4px;
  padding-bottom: 6px;
}

.relana-month-board {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: min-content;
}

.relana-month {
  flex: 0 0 auto;
  width: 210px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
}

/* 本月用品牌色框起來：時間軸上「現在在哪」必須一眼看得到 */
.relana-month-now {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 1px var(--brand-teal) inset;
}

.relana-month-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border-color);
}

.relana-month-name {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
}

.relana-month-now .relana-month-name {
  color: var(--brand-teal);
}

.relana-month-head .relana-note {
  margin-left: auto;
}

.relana-month-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}

/* 中間沒有版本的月份仍留一欄：摺疊掉會讓時間的疏密失真 */
.relana-month-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 10px 0;
}

/* 卡片一律同一個樣式。==刻意不在時間軸上標就緒度分級==：那五種狀態（已備齊／
   需留意／必須處理／進度正常／尚未載入）在總表已經有一欄，時間軸要回答的是
   「哪個月上哪幾款」，多一套顏色只是讓人多記一組規則。 */
.relana-mcard {
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--border-color);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  background: var(--bg-card);
}

.relana-mcard:hover {
  background: var(--bg-input);
  border-left-color: var(--brand-teal);
}

.relana-mcard-day {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.relana-mcard-game {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  margin-top: 2px;
  word-break: break-word;
}

.relana-mcard-meta {
  display: flex;
  gap: 6px;
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.relana-mcard-meta span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relana-mcard-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.relana-mcard-counts {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* 沒有上線日的版本：排不進時間軸，但不能讓它消失——那通常正是忘了填上線日的那幾版 */
.relana-gantt-undated {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px dashed var(--warning);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.relana-gantt-undated a {
  color: var(--brand-teal);
  cursor: pointer;
}



#relAnaActualMeta {
  margin-top: 4px;
  display: block;
}

/* 三個日期欄可排序：升冪 → 降冪 → 回到預設順序 */
.relana-th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.relana-th-sort:hover {
  color: var(--text-primary);
}

.relana-th-active {
  color: var(--brand-teal);
}

.relana-sort-ind {
  font-size: 0.66rem;
}

/* Release STG／PRO 的編輯與寫入預覽。==回寫的是 Jira Version==，
   影響面比單據寬（8 個 core 模組讀它的 releaseDate），故一律先看 diff 再送。 */
.relana-date-input {
  width: 150px;
  margin-top: 4px;
  font-family: var(--font-mono);
}

.relana-diff {
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.relana-diff-head {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--warning);
}

.relana-diff-body {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.relana-diff-item + .relana-diff-item {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.relana-diff-field {
  font-weight: 600;
  color: var(--text-primary);
}

.relana-diff-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 2px;
}

.relana-diff-before { color: var(--error); }
.relana-diff-after  { color: var(--success); }

.relana-diff-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* ── 檢視 / 編輯 ──
   日期欄預設是檢視狀態，按標題旁的「編輯」才展開編輯面板。
   ==兩個面板分開==：版本日期（STG＋PRO）寫的是 Jira Version、需管理員權；
   實際上線日寫的是 Epic 留言、一般編輯權即可。綁在一起送會讓前者的權限問題
   連帶擋掉後者本來會成功的寫入。 */

.relana-edit-btn {
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: normal;
}

.relana-edit-btn:hover {
  color: var(--brand-teal);
  border-color: var(--brand-teal);
}

.relana-edit-panel {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--brand-teal);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.relana-edit-head {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.relana-edit-head .relana-note {
  display: block;
  font-weight: 400;
  margin-top: 3px;
}

.relana-edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.relana-edit-row .field-label {
  margin: 0;
}

.relana-edit-row .relana-date-input {
  margin-top: 0;
}

/* 面板內的即時回饋（處理中／成功／失敗）。
   ==狀態列不夠用==：從總表按「編輯」時面板是在彈窗裡，狀態列被擋在後面，
   使用者按下送出只會覺得沒反應，於是再按一次。 */
.relana-inline-msg {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.relana-inline-msg.busy  { color: var(--warning); font-weight: 600; }
.relana-inline-msg.ok    { color: var(--success); font-weight: 600; }
.relana-inline-msg.error { color: var(--error);   font-weight: 600; }

/* 備註輸入框吃掉該列剩下的寬度，日期與送出鈕維持原本大小 */
.relana-note-input {
  flex: 1 1 240px;
  min-width: 180px;
}

/* 沒有日期時，實際上線日欄位改顯示備註文字。
   ==字型要換回一般字體==：那一欄是等寬字（為了日期對齊），中文備註套等寬字會糊成一片。
   選擇器必須帶上 .relana-head-value——上面的 `.relana-head-value.relana-mono`
   是兩個 class，單一 class 的規則權重輸它，寫了也不會生效。 */
.relana-head-value.relana-note-text {
  font-family: var(--font-main, inherit);
  font-style: normal;
  font-size: 0.9rem;
}

/* 備註在總表裡換行顯示，最多三行，超出的截掉（瀏覽器自動補刪節號）。
   ==不用單行 ellipsis==：備註是一句話，只露出開頭幾個字等於什麼都沒說；
   三行是「看得到重點」與「不把表格撐成一頁一列」之間的折衷。全文仍在 title。 */
.relana-note-cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  /* ==要給定寬而不是 max-width==：其他欄位都是 nowrap 的短字串，表格會把這一欄
     壓到只剩幾十像素，三行就變成一行四個字，等於沒顯示。定寬讓這一欄自己撐出
     讀得完一句話的空間（表格本來就在可橫向捲動的容器裡）。 */
  width: 180px;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  font-family: var(--font-main, inherit);
  color: var(--text-secondary);
}

.relana-edit-panel .relana-diff {
  margin-top: 14px;
}

/* ── 總表的編輯視窗 ──
   面板本身的樣式沿用 .relana-edit-panel（同一份 DOM 搬進來），這裡只負責容器。 */

/* ==不可對 <td> 設 display:flex==：那會讓它失去 table-cell 身分、脫離表格佈局，
   按鈕會跑到表格外面（實測畫面跑版即此因）。要排版就排在儲存格「裡面」。 */
.relana-cell-actions {
  white-space: nowrap;
}

.relana-cell-actions .btn-ui + .btn-ui {
  margin-left: 6px;
}

.relana-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.relana-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.relana-modal-box {
  position: relative;
  width: min(760px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.relana-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  position: sticky;
  top: 0;
  background: var(--bg-card);
}

.relana-modal-body {
  padding: 4px 20px 20px;
}

/* 面板在視窗內是主角，不需要再靠上方留白與外框和其他區塊區隔 */
.relana-modal-body .relana-edit-panel {
  margin-top: 16px;
}

/* 總表卡片標題列右側的按鈕組（批量載入｜＋ 新增版本）。
   card-head 本身是 space-between，兩顆鈕要黏在一起就得自己成一組，
   否則第二顆會被推到標題與第一顆之間。 */
.relana-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── 新增版本彈窗 ──
   欄位兩欄一列：版本別｜遊戲編號、遊戲名稱 cn｜en、版本名預覽（整列）、STG｜PRO。
   ==版本名要讓人送出前就看到==：它是這個彈窗最不可逆的產出（Jira 版本建了只有
   專案管理員刪得掉），把規則寫在說明文字裡不如直接把成品攤在眼前。 */

.relana-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-top: 16px;
}

.relana-create-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.relana-create-full { grid-column: 1 / -1; }

/* 日期欄在彈窗裡跟著格線走，不用單一版本面板那個固定寬度 */
.relana-create-grid .relana-date-input {
  width: 100%;
  margin-top: 0;
}

.relana-create-preview {
  padding: 8px 12px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-input);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.relana-create-preview .relana-mono {
  color: var(--text-primary);
  font-weight: 700;
}

.relana-create-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--text-primary);
  cursor: pointer;
}

.relana-create-check input {
  margin-top: 2px;
  flex-shrink: 0;
}

#relAnaNewEpicHint {
  margin-top: 6px;
  display: block;
}

#relAnaCreateMsg {
  display: block;
  margin-top: 12px;
}

#relAnaCreateMsg.error { color: var(--error); }
#relAnaCreateMsg.ok    { color: var(--success); }

@media (max-width: 720px) {
  .relana-create-grid { grid-template-columns: 1fr; }
  .relana-create-full { grid-column: 1 / -1; }
}

/* ── 程式版本清單（core/release_manifest.py）──
   狀態 pill 沿用 .relana-pill 形狀，只換邊框與字色：警示＝橘、一致＝綠、QA 測試中＝teal。
   ==不用實心底色==：實心紅底已留給「剩餘時間」的急迫度，同頁兩種實心色會搶視線。 */
.relana-mf-warn { border-color: var(--warning); color: var(--warning); }
.relana-mf-ok   { border-color: var(--success); color: var(--success); }
.relana-mf-info { border-color: var(--brand-teal); color: var(--brand-teal); }

.relana-mf-warn-text {
  color: var(--warning);
  font-weight: 600;
}

.relana-mf-alert {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.relana-mf-alert-head {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--warning);
}

.relana-mf-alert-list {
  margin-top: 6px;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-secondary);
  word-break: break-all;
}

.relana-mf-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.85rem;
}

.relana-mf-history td {
  padding-top: 0;
  font-size: 0.8rem;
  line-height: 1.8;
  background: var(--bg-input);
}

.relana-mf-unchanged {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}

/* 一行一個、能一次看全部（使用者偏好：清單用純文字不用標籤） */
.relana-mf-plain {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-secondary);
  columns: 4 160px;
}

/* 定版狀態列：決定底下每個 QA／prod 值是「現在的」還是「定版那一刻的」，故置頂。
   第一行＝狀態＋關鍵事實，第二行＝小字補充；正常狀態不需要的資訊不出現。 */
.relana-mf-state {
  /* card-body 上方內距為 0，不留間距的話外框會貼著卡片標題列的分隔線 */
  margin: 16px 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-input);
}

.relana-mf-frozen {
  border-color: var(--brand-teal);
}

.relana-mf-state-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 4px;
}

.relana-mf-state-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.relana-mf-state-sub {
  margin-left: 8px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

.relana-mf-facts {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.relana-mf-dot {
  margin: 0 4px;
  color: var(--text-muted);
}

.relana-mf-ok-text {
  color: var(--success);
  font-weight: 600;
}

/* 需要處理區塊內的分組：原因當小標、底下逐行原文 */
.relana-mf-issue-group {
  margin-top: 8px;
}

.relana-mf-issue-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

.relana-mf-issue-group .relana-mf-alert-list {
  margin-top: 2px;
}