:root {
  --yoi-navy: #22243E;
  --yoi-gold: #EBD341;
  --yoi-teal: #00AA83;
  --yoi-blue: #2A36C8;
  --yoi-purple: #804CE3;
  --yoi-bg: #FFFFFF;

  /* 語意淺色（badge/chip 淺底＋深字，與主色成家族） */
  --yoi-teal-soft: #DCF3EB;   --yoi-teal-ink: #00795E;   /* 已發布/完成、teal chip */
  --yoi-gold-soft: #FBF3C9;   --yoi-gold-ink: #7A6A12;   /* 待審核 */
  --yoi-blue-soft: #E8EAFB;                              /* 發布中、blue chip（字用 --yoi-blue） */
  --yoi-purple-soft: #F1EAFC; --yoi-purple-ink: #6B3BC4; /* purple chip */
  --logo-spotify: #1ED760;                               /* 平台 logo 原色（simple-icons） */
  --logo-apple-podcasts: #9933CC;
  --yoi-navy-soft: rgba(34, 36, 62, .07);                /* navy chip 底（字用 --yoi-navy） */
  /* 側邊欄專用滑過底色。刻意不共用 --yoi-navy-soft：那個 7% 太淡、實機上看不出變化，
     但它同時被頁面上的 .chip-navy 等元件使用，調深會連帶改掉側邊欄以外的外觀。 */
  --nav-hover: rgba(34, 36, 62, .12);

  /* ── Light 語意 token（SaaS 換膚；值取自設計 handoff README Design Tokens）──
     只描述「介面角色」不描述顏色本身；dark mode 未來只要換這層的值。 */
  --bg-app: #F3F4F8;          /* 桌面底 */
  --bg-surface: #FFFFFF;      /* 卡片 */
  --bg-sidebar: #FBFBFD;      /* 側欄 */
  --bg-input: #FBFBFD;        /* 輸入框底 */
  --bg-subtle: #FBFBFD;       /* 表頭/頁尾條 */
  --border: #E9EAF0;          /* 一般框線 */
  --border-input: #DDDEE8;    /* 輸入框框線 */
  --divider: #F1F2F6;         /* 列表分隔線 */
  --text-primary: #22243E;    /* 主要文字（=navy） */
  --text-body: #3A3C58;       /* 內文 */
  --text-secondary: #5A5C74;  /* 次要 */
  --text-muted: #8A8CA0;      /* 弱化 */
  --text-faint: #B4B6C6;      /* 極弱 */
  --nav-label: #9A9CB0;       /* 側欄分組標題 */
  --nav-item: #4A4C66;        /* 側欄項目 */
  --shadow-card: 0 2px 8px rgba(34, 36, 62, .05);

  --nav-expanded-width: 280px;
  --nav-collapsed-width: 72px;
  --nav-row-height: 40px;
  --nav-child-row-height: 36px;
  --nav-icon-size: 18px;
  --focus-ring-dark: #2A36C8;
  --focus-ring-light: #FFFFFF;
}

body {
  background: var(--yoi-bg);
  color: var(--yoi-navy);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
}

/* ── Responsive navigation shell ── */
.yoi-shell { display: flex; min-height: 100vh; }
.yoi-sidebar {
  width: var(--nav-expanded-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  box-sizing: border-box;
  position: fixed;
  inset: 0 auto 0 0;
  height: 100dvh;
  overflow: hidden;
  z-index: 30;
  transition: width .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* 「窄條長相」整批掛在這個條件上：收合、而且不在預覽中。預覽有兩條路：
   元件掛上 .is-peek-open（滑鼠碰到收合鈕時開、離開側邊欄時關，由元件管），
   或側邊欄內有鍵盤移入的焦點（:focus-visible；滑鼠點擊留下的焦點不算，
   否則按完收合鈕焦點還在按鈕上，預覽會一直卡著）。
   預覽時整批不成立，側邊欄自然落回基礎規則的完整寬度與展開長相，不必逐項把 display 還原回來。
   限定 .is-desktop 是必要的：平板寬度被媒體查詢鎖在窄條寬，若讓 hover 也解除窄條長相，標籤會溢出。 */
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) { width: var(--nav-collapsed-width); }
.yoi-sidebar nav { height: 100%; display: flex; flex-direction: column; padding: 0 12px 12px; box-sizing: border-box; }
.yoi-content { flex: 1; min-width: 0; margin-left: var(--nav-expanded-width); background: var(--bg-app); padding: 0; display: flex; flex-direction: column; transition: margin-left .18s ease; }
/* 用 ~ 而不是 +：搜尋視窗與確認框是側邊欄的後續兄弟節點，一旦渲染就會插在
   <aside> 與 <main> 中間、把「緊鄰」關係切斷，主內容會突然跳掉 208px。 */
.yoi-sidebar.is-expanded ~ .yoi-content { margin-left: var(--nav-expanded-width); }
.yoi-sidebar.is-collapsed ~ .yoi-content { margin-left: var(--nav-collapsed-width); }
.yoi-navigation-menu,
.yoi-sidebar-backdrop { display: none; }
/* 內容內層：置中容器（header 之外的頁面本體）。
   max-width 放寬到 1600 讓寬螢幕少留白；窄螢幕靠 padding 收邊、min-width:0 防子元素撐爆。 */
.yoi-page { width: 100%; max-width: 1600px; min-width: 0; margin: 0 auto; box-sizing: border-box; padding: 40px 36px 56px; }
@media (max-width: 640px) { .yoi-page { padding: 24px 16px 40px; } }

/* ── Episodes 表格 responsive：窄螢幕逐步收掉次要欄（成本→分類），核心欄永遠可見 ── */
.ep-grid { display: grid; grid-template-columns: 86px minmax(0, 1fr) 160px 92px 70px 48px; gap: 14px; align-items: center; }
@media (max-width: 900px) {
  .ep-grid { grid-template-columns: 86px minmax(0, 1fr) 160px 92px 48px; }
  .ep-col-cost { display: none; }
}
@media (max-width: 720px) {
  .ep-grid { grid-template-columns: 76px minmax(0, 1fr) 92px 48px; }
  .ep-col-cat { display: none; }
}
@media (max-width: 520px) {
  .ep-grid { grid-template-columns: 60px minmax(0, 1fr) 76px 40px; gap: 8px; }
}

/* ── Top header（白底：麵包屑＋同步狀態＋動作鈕＋頭像）── */
.yoi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 36px;
}
.yoi-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
.yoi-breadcrumb-sep { color: var(--text-faint); }
.yoi-breadcrumb-current { color: var(--text-primary); font: inherit; font-weight: 700; margin: 0; }
.yoi-header-actions { display: flex; align-items: center; gap: 12px; }
.yoi-header-btn {
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  border: 1px solid var(--yoi-navy);
  background: transparent;
  color: var(--yoi-navy);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.yoi-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--yoi-navy);
  color: var(--yoi-gold);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  flex-shrink: 0;
}

/* ── 頭像帳號選單（純 CSS details 下拉）── */
.yoi-avatar-menu { position: relative; }
.yoi-avatar-menu > summary { list-style: none; cursor: pointer; }
.yoi-avatar-menu > summary::-webkit-details-marker { display: none; }
.yoi-avatar-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  min-width: 168px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yoi-avatar-name {
  padding: 8px 12px 10px;
  font-size: 12px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--divider);
  margin-bottom: 4px;
  word-break: break-all;
}
.yoi-avatar-item {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-body);
  text-decoration: none;
  border-radius: 8px;
  transition: all .12s ease;
}
.yoi-avatar-item:hover {
  background: rgba(34, 36, 62, .05);
  color: var(--text-primary);
}

/* ── Logo plate（淺側欄上維持白底板，維持原 png 字標）── */
.yoi-logo-plate {
  margin: 0 0 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 8px;        /* 上下 4px、左右 8px，縮小白邊 */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 全域：所有表格儲存格上下置中對齊 */
th, td { vertical-align: middle; }

/* ── Sidebar navigation hierarchy ── */
.yoi-sidebar-top { min-height: 64px; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.yoi-brand { flex: 0 0 32px; display: flex; align-items: center; border-radius: 8px; color: var(--text-primary); text-decoration: none; }
.yoi-brand-mark { width: 32px; height: 32px; flex: 0 0 32px; overflow: hidden; border-radius: 8px; display: grid; place-items: center; }
.yoi-overview-link span,
.yoi-shortcut-link > span:not(.yoi-nav-badge),
.yoi-feature-link > span:not(.yoi-building-label),
/* 群組列的 badge 要跟捷徑列（上面那條）一樣排除：這條的 min-width: 0 權重壓過
   .yoi-nav-badge 自己的 min-width: 22px，地板被抽掉後在 72px rail 上只剩約 6px 內容寬，
   連一個字都排不出來。省略字是給會被截斷的標題文字用的，不該套到 badge 上。 */
.yoi-feature-group-toggle > span:not(.yoi-feature-chevron):not(.yoi-nav-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.yoi-navigation-collapse,
.yoi-navigation-close,
.yoi-command-close,
.yoi-shortcut-controls button,
.yoi-sidebar-section-heading button,
.yoi-feature-row > button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.yoi-navigation-collapse,
.yoi-navigation-close { width: 36px; height: 36px; flex: 0 0 36px; display: inline-grid; place-items: center; }
.yoi-navigation-close { display: none; }
.yoi-command-search { min-width: 0; flex: 1; position: relative; }
.yoi-command-search > button,
.yoi-overview-link,
.yoi-shortcut-link,
.yoi-feature-group-toggle,
.yoi-feature-link {
  width: 100%;
  min-width: 0;
  min-height: var(--nav-row-height);
  box-sizing: border-box;
  border: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  background: transparent;
  color: var(--nav-item);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}
/* 只剩圖示後改成正方形圖示鈕；外層仍 flex:1 吸收剩餘空間，把收合鈕頂到最右邊。
   這條必須排在上面那組共用規則之後，否則會被那組的 width:100% 蓋掉。 */
.yoi-command-search > button { width: 36px; justify-content: center; padding: 0; cursor: pointer; }
/* ── 行事曆月檢視的「預計跑集」層（2026-09-03）────────────────────────────────
   同一格裡要跟「已經發布」的事件分得開，所以走淡色虛框。這些規則放全域 css 而不是
   跟著 SchedulerCalendar 的 <style> 走——那個區塊只有在該元件渲染時才會進 DOM，
   行事曆頁沒有用那個元件。 */
.cal-planned { display: flex; align-items: center; gap: 2px; width: 100%; min-width: 0; margin-bottom: 3px; }
.cal-planned .cal-planned-chip {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px;
  padding: 1px 6px; border: 1px dashed var(--border-strong, rgba(34, 36, 62, .28));
  border-radius: 6px; background: transparent; color: var(--text-secondary);
  font-size: 11px; line-height: 1.5; cursor: grab;
}
.cal-planned .cal-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.cal-planned .cal-dot.chip-teal { background: var(--yoi-teal); }
.cal-planned .cal-dot.chip-gold { background: var(--yoi-gold); }
.cal-planned .cal-dot.chip-blue { background: var(--yoi-blue); }
.cal-planned .cal-dot.chip-navy { background: var(--yoi-navy); }
.cal-planned .cal-dot.chip-purple { background: var(--yoi-purple); }
.cal-planned .cal-chiptext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* 已觸發的跑集標題是連結（直達那一集）：長相要跟不可點的那些一致，滑過去才畫底線 */
.cal-planned a.cal-chiptext { color: inherit; text-decoration: none; }
.cal-planned a.cal-chiptext:hover { text-decoration: underline; }
.cal-planned .cal-planned-state { flex: none; font-size: 9.5px; color: var(--text-muted); }
.cal-planned .cal-warnbadge {
  flex: none; font-size: 9px; padding: 0 4px; border-radius: 4px; white-space: nowrap;
  background: var(--yoi-gold-soft); color: var(--yoi-gold-ink);
}
.cal-planned .cal-occ-act {
  flex: none; font-size: 10px; padding: 0 5px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; line-height: 1.6;
}
.cal-planned .cal-occ-act:hover { border-color: var(--border-strong); color: var(--text-primary); }
/* 跳過／取消的那次照樣畫出來，但要一眼看出它不會跑。 */
.cal-planned[data-occ-status="Skipped"] .cal-planned-chip,
.cal-planned[data-occ-status="Cancelled"] .cal-planned-chip { opacity: .5; }
/* 影片排定公開：跟預計跑集擠同一區塊，但它拖不動也不能跳過——改成實線框＋指標游標，
   才不會被當成「還沒跑的排程」去拖。 */
.cal-planned .cal-planned-chip[data-publish-slot] { border-style: solid; cursor: pointer; text-decoration: none; }
.cal-planned .cal-planned-chip[data-publish-slot]:hover { border-color: var(--yoi-navy); color: var(--text-primary); }

.yoi-overview-link { flex-shrink: 0; }
/* 釘在總覽正下方的頂層項目（審稿）。它住在捲動區外面，跟總覽是同一層，所以列高與字級
   要跟總覽一致——`.yoi-feature-link` 預設是群組「子項」的尺寸（36px／13px），直接沿用
   會讓它比上面那列矮一截、看起來像是總覽的附屬項目。 */
.yoi-pinned-features { flex-shrink: 0; }
.yoi-pinned-features .yoi-feature-link { min-height: var(--nav-row-height); font-size: 14px; }
.yoi-sidebar-controls-divider { align-self: stretch; height: 1px; margin: 4px 6px 8px; background: var(--divider); }
/* 搜尋視窗在 aside 之外，一併列入才不會讓它的圖示比側邊欄小一號。 */
.yoi-sidebar svg,
.yoi-command-palette svg { width: var(--nav-icon-size); height: var(--nav-icon-size); flex: 0 0 var(--nav-icon-size); }
.yoi-overview-link.active,
.yoi-overview-link[aria-current="page"],
.yoi-shortcut-link.active,
.yoi-feature-link.active { background: var(--yoi-navy); color: #fff; }
.yoi-brand:hover,
.yoi-navigation-collapse:hover,
.yoi-command-search > button:hover,
.yoi-overview-link:not(.active):not([aria-current="page"]):hover,
.yoi-shortcut-link:not(.active):hover,
.yoi-feature-group-toggle:hover,
.yoi-feature-link:not(.active):not(.disabled):hover,
.yoi-sidebar-section-heading button:hover:not(:disabled),
.yoi-shortcut-controls button:hover:not(:disabled),
.yoi-feature-row > button:hover:not(:disabled) { background: var(--nav-hover); color: var(--text-primary); }

.yoi-sidebar-scroll-region { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; margin: 10px -4px 8px 0; padding: 0 4px 12px 0; scrollbar-gutter: stable; }
.yoi-shortcut-list,
.yoi-feature-library { border: 0; background: transparent; padding: 0; }
.yoi-sidebar-section-heading { min-height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 8px; color: var(--nav-label); }
.yoi-sidebar-section-heading h2,
.yoi-feature-library > h2 { margin: 0; color: var(--nav-label); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.yoi-sidebar-section-heading span { font-size: 11px; }
.yoi-sidebar-section-heading button { margin-left: auto; padding: 3px 6px; font-size: 11px; }
.yoi-feature-library { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--divider); }
.yoi-feature-library > h2 { padding: 0 8px 8px; }
.yoi-feature-library > [data-shortcut-limit] { margin: 0 8px 8px; color: var(--yoi-gold-ink); font-size: 12px; font-weight: 700; }
.yoi-shortcut-row,
.yoi-feature-row { min-width: 0; display: flex; align-items: center; }
.yoi-shortcut-link,
.yoi-feature-row .yoi-feature-link { flex: 1; }
.yoi-shortcut-handle { color: var(--text-muted); cursor: grab; touch-action: none; }
.yoi-shortcut-controls { display: flex; gap: 2px; }
.yoi-shortcut-controls button,
.yoi-feature-row > button { min-width: 30px; min-height: 30px; padding: 4px; }
.yoi-shortcut-controls button:disabled,
.yoi-feature-row > button:disabled { opacity: .45; cursor: default; }
/* 側欄按鈕（編輯／完成、上移／下移／移除、＋加入捷徑）的 hover 併在上面「側欄滑過底色」那一條規則裡
   （NavSidebarTests 守門：側欄 hover 底色只能有一處定義），這裡不另寫。 */
.yoi-feature-group-toggle { cursor: pointer; }
.yoi-feature-chevron { margin-left: auto; display: inline-grid; place-items: center; transition: transform .15s ease; }
.yoi-feature-group-toggle[aria-expanded="true"] .yoi-feature-chevron { transform: rotate(180deg); }
.yoi-feature-group-items { padding-left: 10px; }
.yoi-feature-group-items[hidden] { display: none; }
.yoi-feature-link { min-height: var(--nav-child-row-height); font-size: 13px; }
.yoi-feature-link.disabled { color: var(--text-faint); cursor: not-allowed; }
.yoi-building-label { margin-left: auto; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.yoi-nav-badge { min-width: 22px; max-width: 38px; margin-left: auto; padding: 2px 5px; overflow: hidden; border-radius: 999px; background: var(--yoi-gold-soft); color: var(--yoi-gold-ink); font-size: 10px; font-weight: 800; line-height: 1.2; text-align: center; text-overflow: ellipsis; }
/* 嚴重度：BadgeClass() 一直有輸出 is-error／is-warning／is-attention，但樣式表從來沒有
   對應規則，三種一律渲染成上面那個金色——錯誤跟待審稿長得一模一樣。錯誤色沿用站上既有的
   那一對（同 .yoi-chip-overdue、.yoi-task-status.is-error）；另外兩種維持金色不動，
   免得順手改掉審稿與排程管理現有的外觀。 */
.yoi-nav-badge.is-error { background: #FDECEA; color: #B71C1C; }

.yoi-account-zone { min-height: 58px; flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 9px 8px 0; border-top: 1px solid var(--divider); }
.yoi-account-avatar { order: -1; width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: var(--yoi-navy); color: #fff; font-weight: 800; text-decoration: none; }
.yoi-account-details { min-width: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
.yoi-account-name { grid-column: 1 / -1; overflow: hidden; color: var(--text-primary); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.yoi-account-action { border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }

.yoi-command-palette { position: fixed; top: 76px; left: max(20px, calc(50vw - 260px)); z-index: 60; width: min(520px, calc(100vw - 40px)); max-height: min(620px, calc(100dvh - 100px)); overflow: auto; box-sizing: border-box; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-surface); box-shadow: 0 18px 55px rgba(34, 36, 62, .22); transition: opacity .15s ease, transform .15s ease; }
.yoi-command-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; }
.yoi-command-search-input { display: flex; align-items: center; gap: 8px; padding-right: 36px; }
.yoi-command-search-input input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid var(--border-input); border-radius: 8px; color: var(--text-primary); background: var(--bg-input); font: inherit; }
.yoi-command-results { display: grid; gap: 4px; margin-top: 10px; }
.yoi-command-results button { min-height: var(--nav-row-height); display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
.yoi-command-results button[aria-selected="true"] { background: var(--yoi-navy); color: #fff; }
.yoi-command-results small { color: inherit; opacity: .72; }

/* 搜尋視窗渲染在 aside 之外（避免被裁切），所以要單獨列進來，
   否則裡面的輸入框與結果按鈕會失去品牌 focus 外框。 */
.yoi-sidebar a:focus-visible,
.yoi-sidebar button:focus-visible,
.yoi-sidebar input:focus-visible,
.yoi-command-palette a:focus-visible,
.yoi-command-palette button:focus-visible,
.yoi-command-palette input:focus-visible,
.yoi-navigation-menu:focus-visible,
.yoi-sidebar-backdrop:focus-visible {
  outline: 3px solid var(--focus-ring-dark);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-ring-light), 0 0 0 7px var(--yoi-gold);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-overview-link span,
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-sidebar-section-heading,
/* 捷徑列的 sr-only 描述同樣要留著：badge 本身是 aria-hidden，那個數字只剩描述能傳達，
   而隱藏節點能不能被 aria-describedby 採計，各家輔助技術並不一致（理由同下方群組列那條）。 */
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-shortcut-link > span:not(.yoi-nav-badge):not(.sr-only),
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-feature-library > h2,
/* 群組聚合 badge 與它的 sr-only 描述在收合成 rail 時要留著——收合正是最需要它的時候
   （badge 本來就只在收合狀態渲染，被這條蓋掉等於任何狀態都看不到）。描述那個 span 是
   aria-describedby 的目標：規格上直接被引用的隱藏節點仍應納入描述，但各家輔助技術實作
   不一致，留著渲染才可靠。同 .yoi-shortcut-link 上面那條的 :not(.yoi-nav-badge) 例外。 */
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-feature-group-toggle > span:not(.yoi-feature-chevron):not(.yoi-nav-badge):not(.sr-only),
/* 釘住的頂層項目（審稿）住在捲動區外，收合成窄條時它不像群組子項那樣整區被藏起來，
   標籤文字要自己收掉，否則窄條上會冒出一行被裁掉的字。badge 與 sr-only 描述照留。 */
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-pinned-features .yoi-feature-link > span:not(.yoi-nav-badge):not(.sr-only),
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-account-details { display: none; }
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-feature-group-items { display: none; }
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-sidebar-top { flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-command-search { flex: 0 0 auto; }
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-command-search > button,
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-overview-link,
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-shortcut-link,
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-pinned-features .yoi-feature-link,
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-feature-group-toggle { justify-content: center; padding-inline: 0; }
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-feature-chevron { display: none; }
/* 窄條上把捲軸寬度歸零。捲動區為了避免捲軸出現時內容左右跳動而預留了捲軸寬度，
   展開時靠左排看不出來，收合改成置中排列後那截被扣掉的寬度會讓整串圖示往左偏，
   跟住在捲動區外的首頁／搜尋／收合對不齊。歸零後可用寬度等於整條窄條，
   捲動能力（滾輪、鍵盤）不受影響，只是不畫出捲軸。 */
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-sidebar-scroll-region { scrollbar-width: none; }
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-sidebar-scroll-region::-webkit-scrollbar { width: 0; height: 0; }
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) .yoi-account-zone { justify-content: center; padding-inline: 0; }
.yoi-sidebar.is-collapsed:not(.is-peek-open):not(.is-desktop:has(:focus-visible)) nav { padding-inline: 6px; }

/* 預覽中：側邊欄回到完整寬度浮在內容上方。內容區保留的寬度仍是窄條寬
   （見 .yoi-sidebar.is-collapsed ~ .yoi-content），所以整個過程內容不會左右位移。
   寬度與陰影的轉場沿用 .yoi-sidebar 本體既有的 transition，不另外新增。 */
.yoi-sidebar.is-desktop.is-collapsed.is-peek-open,
.yoi-sidebar.is-desktop.is-collapsed:has(:focus-visible) { box-shadow: 12px 0 32px rgba(34, 36, 62, .2); }

@media (min-width: 1024px) {
  .yoi-navigation-menu,
  .yoi-sidebar-backdrop { display: none; }
  .yoi-sidebar { transform: translateX(0); }
  .yoi-navigation-close { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .yoi-content,
  .yoi-sidebar.is-expanded ~ .yoi-content,
  .yoi-sidebar.is-collapsed ~ .yoi-content { margin-left: var(--nav-collapsed-width); }
  .yoi-sidebar { width: var(--nav-collapsed-width); }
  .yoi-sidebar.is-overlay-open { width: var(--nav-expanded-width); box-shadow: 12px 0 32px rgba(34, 36, 62, .2); }
  .yoi-navigation-menu { position: fixed; top: 14px; left: 18px; z-index: 40; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--bg-surface); color: var(--yoi-navy); cursor: pointer; }
  .yoi-sidebar.is-overlay-open .yoi-navigation-close { display: inline-grid; }
  .yoi-sidebar.is-overlay-open .yoi-navigation-collapse,
  .yoi-sidebar:not(.is-overlay-open) .yoi-navigation-close { display: none; }
  .yoi-sidebar-backdrop[aria-hidden="false"] { position: fixed; inset: 0; z-index: 20; display: block; border: 0; background: rgba(34, 36, 62, .22); cursor: pointer; }
}

@media (max-width: 767px) {
  .yoi-content,
  .yoi-sidebar.is-expanded ~ .yoi-content,
  .yoi-sidebar.is-collapsed ~ .yoi-content { margin-left: 0; }
  .yoi-header { min-height: 64px; padding-left: 64px; box-sizing: border-box; }
  .yoi-breadcrumb > span:first-child,
  .yoi-breadcrumb-sep { display: none; }
  .yoi-sidebar,
  .yoi-sidebar.is-collapsed { width: var(--nav-expanded-width); transform: translateX(-100%); box-shadow: none; }
  .yoi-sidebar.is-drawer-open { transform: translateX(0); box-shadow: 12px 0 32px rgba(34, 36, 62, .24); }
  .yoi-sidebar.is-drawer-open nav { padding-inline: 12px; }
  .yoi-sidebar.is-drawer-open .yoi-overview-link span,
  .yoi-sidebar.is-drawer-open .yoi-sidebar-section-heading,
  .yoi-sidebar.is-drawer-open .yoi-shortcut-link > span:not(.yoi-nav-badge),
  .yoi-sidebar.is-drawer-open .yoi-feature-library > h2,
  .yoi-sidebar.is-drawer-open .yoi-feature-group-toggle > span:not(.yoi-feature-chevron),
  .yoi-sidebar.is-drawer-open .yoi-pinned-features .yoi-feature-link > span:not(.yoi-nav-badge),
  .yoi-sidebar.is-drawer-open .yoi-account-details { display: initial; }
  .yoi-sidebar.is-drawer-open .yoi-feature-group-items { display: block; }
  .yoi-sidebar.is-drawer-open .yoi-feature-group-items[hidden] { display: none; }
  .yoi-sidebar.is-drawer-open .yoi-command-search > button,
  .yoi-sidebar.is-drawer-open .yoi-overview-link,
  .yoi-sidebar.is-drawer-open .yoi-shortcut-link,
  .yoi-sidebar.is-drawer-open .yoi-pinned-features .yoi-feature-link,
  .yoi-sidebar.is-drawer-open .yoi-feature-group-toggle { justify-content: flex-start; padding-inline: 10px; }
  .yoi-sidebar.is-drawer-open .yoi-feature-chevron { display: inline-grid; }
  .yoi-sidebar.is-drawer-open .yoi-account-zone { justify-content: flex-start; padding-inline: 8px; }
  .yoi-navigation-menu { position: fixed; top: 14px; left: 14px; z-index: 40; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--bg-surface); color: var(--yoi-navy); box-shadow: var(--shadow-card); cursor: pointer; }
  .yoi-navigation-collapse { display: none; }
  .yoi-sidebar.is-drawer-open .yoi-navigation-close { display: inline-grid; }
  .yoi-sidebar-backdrop[aria-hidden="false"] { position: fixed; inset: 0; z-index: 20; display: block; border: 0; background: rgba(34, 36, 62, .38); cursor: pointer; }
  .yoi-command-palette { top: 68px; left: 12px; width: calc(100vw - 24px); max-height: calc(100dvh - 80px); }
}

@media (prefers-reduced-motion: reduce) {
  .yoi-sidebar,
  .yoi-content,
  .yoi-feature-chevron,
  .yoi-command-palette { transition: none; }
}

/* ── Status badges ── */
.badge { font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.badge-published { background: var(--yoi-teal-soft); color: var(--yoi-teal-ink); }
.badge-pending { background: var(--yoi-gold-soft); color: var(--yoi-gold-ink); }
.badge-publishing { background: var(--yoi-blue-soft); color: var(--yoi-blue); }

/* ── Category chips ── */
.chip { font-size: 11px; padding: 2px 8px; border-radius: 6px; }
/* 行事曆色票：顏色只表示「哪個節目」，狀態一律用文字（v5 階段一）。
   正集＝金、午報＝藍、手動跑集＝青綠、系統任務＝中性深藍。
   ⚠️ 這裡新增 chip class 時，ChipClass.AllEmitted 也要同步——ChipClassTests 會比對兩邊。 */
.chip-gold { background: var(--yoi-gold-soft); color: var(--yoi-gold-ink); }
.chip-navy { background: var(--yoi-navy-soft); color: var(--yoi-navy); }
.chip-teal { background: var(--yoi-teal-soft); color: var(--yoi-teal-ink); }
.chip-blue { background: var(--yoi-blue-soft); color: var(--yoi-blue); }
.chip-purple { background: var(--yoi-purple-soft); color: var(--yoi-purple-ink); }

/* ── Gold accent bar for page titles ── */
.yoi-title-bar {
  width: 4px;
  height: 20px;
  background: var(--yoi-gold);
  border-radius: 2px;
  display: inline-block;
}

/* ── Card ── */
.yoi-card {
  border: 0.5px solid rgba(34, 36, 62, .14);
  border-radius: 12px;
  padding: 13px 15px;
  background: #fff;
}

/* ── YT Sources page — Fix 2: larger base font ── */
.yt-sources-page {
  font-size: 15px;
}

.yt-sources-page h1 {
  font-size: 1.35rem;
}

/* ── YT Sources page — Fix 6: candidate table layout ── */
.yt-candidate-table-wrap {
  overflow: auto;
  max-height: 70vh;
}
/* sticky 表頭：往下捲動時釘在捲動框頂端 */
.yt-candidate-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

.yt-candidate-table {
  table-layout: auto;
  min-width: 700px;
}

.yt-candidate-table td,
.yt-candidate-table th {
  vertical-align: middle;
}

/* Prevent long channel IDs from overflowing into adjacent columns */
.yt-source-kw-cell {
  max-width: 160px;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* ════════════════════════════════════════════════════════════════
   Global hover / interaction feedback
   Rules that override inline styles use !important on the changed
   property only (specificity: inline > class, so !important wins).
   transform is never set inline, so no !important needed there.
   ════════════════════════════════════════════════════════════════ */

/* 四款站內按鈕的「平常」底色／字色／框線集中在這裡（class 層級，行內 style 仍可覆蓋）。
   之前只定義滑過效果、平常長相靠各頁行內 style 自己給，漏給的按鈕就變成瀏覽器預設灰鈕
   （2026-08-23 站主回饋：登入頁設定與午報排程的「儲存變更」跟別頁不一樣）。 */
.yoi-btn-outline, .yoi-btn-gold, .yoi-btn-navy, .yoi-btn-danger {
  font-family: inherit; text-decoration: none; cursor: pointer; border-radius: 8px;
}
.yoi-btn-outline:disabled, .yoi-btn-gold:disabled, .yoi-btn-navy:disabled, .yoi-btn-danger:disabled { cursor: not-allowed; }

/* 1. Outline buttons — 立即同步, 登出（平常白底 navy 字淡框） */
.yoi-btn-outline {
  background: #fff; color: var(--yoi-navy); border: 1px solid rgba(34, 36, 62, .2);
  transition: all .15s ease;
}
.yoi-btn-outline:hover:not(:disabled) {
  background: #22243E !important;
  color: #fff !important;
  border-color: #22243E !important;
  transform: scale(1.05);
}

/* 2. White → Gold buttons — 執行, 建立新集數 (平常白底 navy 字金框, 滑過變洞察金) */
.yoi-btn-gold {
  background: #fff; color: var(--yoi-navy); border: 1px solid var(--yoi-gold); font-weight: 600;
  transition: all .15s ease;
}
.yoi-btn-gold:hover:not(:disabled) {
  background: #EBD341 !important;
  color: #fff !important;
  transform: scale(1.05);
}

/* 2a-2. 全寬按鈕：hover 不得放大。
   放大 1.05 倍會讓全寬元素往兩側各長 2.5%，超過卡片 padding 就凸出框外
   （站主 2026-08-31 兩次截圖：審稿頁「加入第二篇／合併到講稿」）。
   BRAND.md 早就寫了全寬元素要另外處理，只是沒有可以套的東西——這就是那個東西。
   底色與框線仍照原本的 hover 變化，只拿掉位移。 */
.yoi-btn-block {
  display: block;
  width: 100%;
}
.yoi-btn-block:hover:not(:disabled) {
  transform: none !important;
}

/* 2b. Danger confirm — 刪除類確定鈕（平常白底紅字淡紅框, 滑過變紅底白字） */
.yoi-btn-danger {
  background: #fff; color: #c0392b; border: 1px solid #e3b4ab;
  transition: all .15s ease;
}
.yoi-btn-danger:hover:not(:disabled) {
  background: #c0392b !important;
  color: #fff !important;
  border-color: #c0392b !important;
  transform: scale(1.05);
}

/* 2c. Icon-only 操作鈕（複製/編輯/刪除/收合/展開/複製連結）— 平常白底, 滑過 navy 底白圖示 */
/* 版面明確寫死：同一個 class 會用在 <button> 與 <a>（下載連結）上，兩者的預設
   display 與行高不同，只靠 line-height:0 會讓 <a> 撐出比按鈕大一圈的框
   （站主 2026-09-02 在午報上架清單實遇）。 */
.yoi-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(34, 36, 62, .2);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  color: #22243E;
  line-height: 0;
  transition: all .15s ease;
}
.yoi-icon-btn:hover:not(:disabled) {
  background: #22243E;
  color: #fff;
  border-color: #22243E;
  transform: scale(1.08);
}
.yoi-icon-btn:disabled { opacity: .5; cursor: default; }
/* 複製成功：綠色打勾（約 2.3 秒），期間 hover 也維持綠、不被 navy hover 蓋掉 */
.yoi-icon-btn.yoi-copied,
.yoi-icon-btn.yoi-copied:hover:not(:disabled) {
  color: var(--yoi-teal);
  background: #fff;
  border-color: var(--yoi-teal);
  transform: none;
}

.yoi-icon-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(192, 57, 43, .35);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  color: #c0392b;
  line-height: 0;
  transition: all .15s ease;
}
.yoi-icon-btn-danger:hover:not(:disabled) {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
  transform: scale(1.08);
}
.yoi-icon-btn-danger:disabled { opacity: .5; cursor: default; }

/* 3. Navy CTA — 登入, 去審核 */
.yoi-btn-navy {
  background: var(--yoi-navy); color: #fff; border: 1px solid var(--yoi-navy); font-weight: 600;
  transition: all .15s ease;
}
.yoi-btn-navy:hover:not(:disabled) {
  background: #2E3157 !important;
  transform: scale(1.05);
}

/* 4. Nav sidebar links（淺側欄：hover 淡 navy 底＋深字） */
.yoi-nav a:not(.active):not(.disabled):hover {
  color: var(--text-primary);
  background: rgba(34, 36, 62, .05);
  transform: scale(1.03);
  transform-origin: left center;
}

/* 5. Clickable table rows */
.yoi-row-click {
  transition: all .15s ease;
}
.yoi-row-click:hover {
  background: rgba(34, 36, 62, .045) !important;
}
.yoi-row-click:hover td {
  font-weight: 600;
}

/* 6. Clickable cards / episode list items */
.yoi-card-click {
  transition: all .15s ease;
  transform-origin: left center;
}
.yoi-card-click:hover {
  border-color: rgba(34, 36, 62, .35) !important;
  box-shadow: 0 2px 12px rgba(34, 36, 62, .10);
  transform: translateY(-1px) scale(1.01);
}

/* 7. Hyperlinks — YouTube links, breadcrumb back link */
.yoi-link {
  transition: all .15s ease;
}
.yoi-link:hover {
  color: #2A36C8 !important;
}
/* Block-display links (YouTube title) also get a gentle scale */
.yoi-link-block {
  transition: all .15s ease;
  transform-origin: left center;
}
.yoi-link-block:hover {
  color: #2A36C8 !important;
  transform: scale(1.03);
}

/* 9. Candidate-detail rows — hover deepens to Insight Gold */
.yt-candidate-row {
  transition: background .15s ease;
}
.yt-candidate-row:hover {
  background: #EBD341 !important;
}

/* 10. Episode cards — hover fills Deep Navy, text turns white */
.yoi-episode-card {
  transition: all .15s ease;
  transform-origin: left center;
}
.yoi-episode-card:hover .yoi-card {
  background: #22243E !important;
  border-color: #22243E !important;
}
.yoi-episode-card:hover .ep-num,
.yoi-episode-card:hover .ep-title {
  color: #fff !important;
}
/* 卡片轉 navy 後，chip（半透明淡底）會看不見 → 改白字 + 半透明白底 */
.yoi-episode-card:hover .chip {
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}

/* 列表項目 — hover 變洞察金（Dashboard 最近發布） */
.yoi-row-gold {
  transition: background .15s ease;
}
.yoi-row-gold:hover {
  background: #EBD341 !important;
}
/* hover 金底上：EP 徽章轉 navy 底白字（在黃底上跳出來、可讀）；標題加粗深色（白字在黃底看不清，故不轉白） */
.yoi-row-gold:hover .ep-pill {
  background: #22243E !important;
  color: #fff !important;
}
.yoi-row-gold:hover .ep-row-title {
  color: #22243E !important;
  font-weight: 600;
}

/* 8. Sidebar logo home link */
.yoi-logo-link {
  transition: opacity .15s ease;
}
.yoi-logo-link:hover {
  opacity: .85;
}

/* 11. 生成中 loading spinner（節目資訊/電子報/SoundOn/音檔/封面共用） */
@keyframes yoi-spin { to { transform: rotate(360deg); } }
.yoi-spin {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid rgba(42, 54, 200, .25);
  border-top-color: #2A36C8;
  border-radius: 50%;
  animation: yoi-spin .7s linear infinite;
  vertical-align: -.15em;
}
/* 「生成中…」文字統一用顯眼藍、加粗（取代原本灰色） */
.yoi-busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2A36C8;
  font-weight: 600;
}

/* ═══════════════════════════════════════
   內容工作台表格（content-workbench-table-view）
   一集一列；步驟格樣態色走既有語意：完成 teal、進行中 gold、錯誤紅、未開始灰。
   ═══════════════════════════════════════ */
.yoi-task-table-wrap {
  overflow-x: auto;                 /* 十一欄在窄視窗自己左右捲，頁面不橫向捲 */
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.yoi-task-table {
  width: 100%;
  min-width: 760px;                 /* 固定欄 592 ＋ 標題至少 168；再窄就容器內捲動 */
  table-layout: fixed;              /* 欄寬照 colgroup，標題欄吸收剩餘空間；auto 會讓標題欄把其他欄擠到折行 */
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-body);
}
/* 站主的內容區只有約 815px（視窗 1167 css px、側欄 280、頁面內距 72）。固定欄合計 592：
   EP 80、目標發布日 120、步驟 4×82（時間「08-20 16:15」68）、操作 80（圖示 28＋文字鈕疊在下方）；標題吸收剩餘（約 206） */
.yoi-task-table .col-ep { width: 80px; }
.yoi-task-table .col-date { width: 120px; }
.yoi-task-table .col-step { width: 82px; }
.yoi-task-table .col-actions { width: 80px; }   /* 「重新發布」文字鈕量過要 76 */
/* 除了標題欄，全部不折行：折行就是站主看到的「亂斷行」 */
.yoi-task-table td, .yoi-task-table th { white-space: nowrap; }
.yoi-task-table td[data-title-cell] { white-space: normal; }
.yoi-task-table td .chip { white-space: nowrap; display: inline-block; }
.yoi-task-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-subtle);
  text-align: center;               /* 站主 2026-08-23：表頭文字全部置中 */
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.yoi-task-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.yoi-task-table tbody tr:last-child td { border-bottom: none; }
.yoi-task-table tbody tr:hover td { background: var(--bg-subtle); }
.yoi-task-table tbody tr.is-inactive td { opacity: .55; }   /* 午報已作廢／已休刊：整列淡化 */
.yoi-task-title {
  font-weight: 600; color: var(--yoi-navy);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;   /* 長標題最多兩行，其餘省略 */
  overflow: hidden; line-height: 1.45;
}
.yoi-task-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.yoi-task-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: nowrap; }   /* 標題下方：節目標籤＋來源＋現況 */
.yoi-task-status { font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.yoi-task-status.is-error { color: #B71C1C; }
/* 發布格下方四顆 logo：格子內容寬 70（82 − 左右各 6），4×15 ＋ 3×2 = 66 */
.yoi-platform-row { display: flex; gap: 2px; margin-top: 4px; }
.yoi-platform-row .yoi-platform-logo { width: 15px; height: 15px; margin-right: 0; }
.yoi-platform-row .yoi-platform-logo img { width: 15px; height: 15px; }
.yoi-platform-row .yoi-platform-logo svg { width: 15px; height: 15px; }
.yoi-step-cell { padding-left: 6px !important; padding-right: 6px !important; }
.yoi-task-table td[data-target-date] { white-space: nowrap; }
.yoi-task-table td.is-overdue { color: #B71C1C; font-weight: 600; }
.yoi-task-table td .yoi-chip-overdue { display: block; width: fit-content; margin: 2px auto 0; font-size: 11px; background: #FDECEA; color: #B71C1C; }   /* 日期欄只有 120 寬，逾期標籤放日期下方（特異度要壓過上面的 td .chip inline-block） */


/* 步驟格 */
.yoi-step-cell { white-space: nowrap; }
.yoi-step-cell > * { vertical-align: middle; }
.yoi-step-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; line-height: 1; margin-right: 6px;
  border: 1px solid rgba(34, 36, 62, .2); color: var(--text-muted);
}
.yoi-step-time { display: inline-flex; gap: 5px; font-size: 12px; }   /* 日期與時間同一行：「08-20 16:15」 */
.yoi-step-text { font-size: 12px; color: var(--text-muted); }
.yoi-step-cell[data-step-state="done"] .yoi-step-dot { background: var(--yoi-teal-soft); color: var(--yoi-teal-ink); border-color: var(--yoi-teal); }
.yoi-step-cell[data-step-state="done"] .yoi-step-time { color: var(--yoi-teal-ink); font-weight: 600; }
.yoi-step-cell[data-step-state="current"] .yoi-step-dot { background: var(--yoi-gold); border-color: var(--yoi-gold); width: 10px; height: 10px; margin: 0 10px 0 4px; }
.yoi-step-cell[data-step-state="current"] .yoi-step-text { color: var(--yoi-gold-ink); font-weight: 600; }
.yoi-step-cell[data-step-state="error"] .yoi-step-dot { background: #FDECEA; color: #B71C1C; border-color: #B71C1C; }
.yoi-step-cell[data-step-state="error"] .yoi-step-text { color: #B71C1C; font-weight: 600; }

/* 平台 logo：成功原色、待處理灰階、失敗灰階加紅點 */
.yoi-platform-logo {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 6px; color: var(--logo-color, var(--yoi-navy));
}
.yoi-platform-logo[data-platform-state="pending"],
.yoi-platform-logo[data-platform-state="failed"] { color: var(--text-faint); }
.yoi-platform-logo img { width: 18px; height: 18px; display: block; }
.yoi-platform-logo[data-platform-state="pending"] img,
.yoi-platform-logo[data-platform-state="failed"] img { filter: grayscale(1) opacity(.45); }   /* 真 logo 圖檔用濾鏡灰階 */
.yoi-platform-logo[data-platform-state="failed"]::after {
  content: ""; position: absolute; right: -3px; bottom: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: #B71C1C; border: 1.5px solid var(--bg-surface);
}

/* 操作欄 */
.yoi-task-actions { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; }   /* 圖示在上、文字鈕在下 */
.yoi-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; color: var(--yoi-navy);
  text-decoration: none; transition: background .15s ease;
}
.yoi-icon-btn:hover { background: var(--yoi-navy-soft); }
.yoi-task-btn { font-size: 11.5px; padding: 3px 7px; line-height: 1.3; text-decoration: none; }

/* 窄欄的內容也置中，跟置中的表頭對齊；標題欄維持靠左 */
.yoi-task-table td[data-ep-cell],
.yoi-task-table td[data-target-date],
.yoi-task-table td.yoi-step-cell,
.yoi-task-table td[data-actions] { text-align: center; }
.yoi-task-table .yoi-platform-row { justify-content: center; }
.yoi-date-inline { display: none; }                 /* 桌機有獨立的日期欄，行內日期只在平板／手機出現 */
.yoi-date-inline.is-overdue { color: #B71C1C; font-weight: 600; }

/* ── 平板（768–1023）：側欄已縮成窄條，內容區 624–880。收掉「目標發布日」欄，日期搬到標題底下那行 ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .yoi-task-table { min-width: 640px; }            /* 固定欄 472 ＋ 標題至少 168 */
  /* 不能用 display:none 收欄：固定欄寬是照「第幾格」套的，少一格會讓後面每一欄的寬度錯位一格。
     改成把那一欄壓成 0 寬、內容藏起來，格數不變 */
  .yoi-task-table .col-date { width: 0; }
  .yoi-task-table th[data-date-col],
  .yoi-task-table td[data-target-date] { width: 0; padding: 0 !important; overflow: hidden; visibility: hidden; }
  .yoi-date-inline { display: inline; }
  .yoi-task-meta { flex-wrap: wrap; row-gap: 2px; }   /* 標題欄只剩約 170，節目／來源／日期／現況一行放不下就折成兩行 */
}

/* ── 手機（≤767）：側欄藏起來，內容區 340–480。同一份表格攤成卡片：
      第一行 EP＋標題，第二行四個步驟格橫排（格子上方標步驟名），第三行操作 ── */
@media (max-width: 767px) {
  .yoi-task-table-wrap { overflow: visible; border: 0; background: transparent; }
  .yoi-task-table { min-width: 0; display: block; }
  .yoi-task-table colgroup, .yoi-task-table thead { display: none; }
  .yoi-task-table tbody { display: block; }
  .yoi-task-table tbody tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 12px 10px;
    margin-bottom: 10px;
  }
  .yoi-task-table tbody tr:hover td { background: transparent; }
  .yoi-task-table td { display: block; border: 0; padding: 0; white-space: normal; }
  .yoi-task-table td[data-ep-cell] { grid-column: 1 / 2; text-align: left; align-self: start; }
  .yoi-task-table td[data-title-cell] { grid-column: 2 / -1; }
  .yoi-task-table td[data-target-date] { display: none; }
  .yoi-date-inline { display: inline; }
  .yoi-task-meta { flex-wrap: wrap; row-gap: 2px; }
  .yoi-task-table td.yoi-step-cell {
    grid-column: auto;
    padding: 6px 2px 4px !important;
    border-top: 1px solid var(--border);
    text-align: center;
    white-space: nowrap;
  }
  .yoi-task-table td.yoi-step-cell::before {   /* 沒有表頭了，步驟名寫在每一格上方 */
    content: attr(data-step);
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
  .yoi-task-table td[data-actions] { grid-column: 1 / -1; text-align: right; }
  .yoi-task-actions { flex-direction: row; justify-content: flex-end; gap: 8px; }
}

/* ── 總覽頁分頁籤（總覽｜正集｜科技午報）：底線標目前籤，顏色走品牌色 ── */
.yoi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 20px; }
.yoi-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 10px 16px; margin-bottom: -1px;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
  border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.yoi-tab:hover { color: var(--text-primary); background: var(--yoi-navy-soft); border-radius: 8px 8px 0 0; }
.yoi-tab.is-active { color: var(--text-primary); border-bottom-color: var(--yoi-gold); }
.yoi-tab:focus-visible { outline: 2px solid var(--yoi-gold); outline-offset: -2px; border-radius: 8px 8px 0 0; }

/* ── 登入頁（靜態 SSR；無側欄）：navy 底＋底部品牌色波浪裝飾，白卡置中 ──
   裝飾層是 inline SVG（aria-hidden、不吃點擊），貼底、寬 100%，slice 裁切不變形。 */
.login-page {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--yoi-navy); overflow: hidden; padding: 32px 24px; box-sizing: border-box;
}
.login-decor {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46vh; min-height: 260px;
  display: block; pointer-events: none;
}
.login-stack { position: relative; width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; }
/* 品牌標誌在白卡頂端置中、只放標誌不放字（站主 2026-08-23：標誌要在白色區域裡、不要標題文字） */
.login-brand { display: flex; justify-content: center; margin: 0 0 28px; }
.login-brand-mark { width: 72px; height: 72px; display: block; }
.login-card {
  width: 100%; background: var(--bg-surface); border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
  padding: 40px 40px 34px; box-sizing: border-box;
}
.login-alert {
  background: rgba(220, 53, 69, .08); border: 0.5px solid rgba(220, 53, 69, .35); border-radius: 10px;
  padding: 11px 15px; margin-bottom: 20px; font-size: 13px; color: #b5233b;
}
.login-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0 0 7px; }
.login-field { position: relative; margin-bottom: 18px; }
.login-input {
  width: 100%; box-sizing: border-box; height: 48px; background: var(--bg-input); border: 1px solid var(--border-input);
  border-radius: 12px; padding: 0 44px 0 15px; font-size: 14px; color: var(--text-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* 焦點環用框線＋陰影畫（透明 outline 只是讓瀏覽器預設環不疊上去，可見度由陰影負責） */
.login-input:focus { border-color: var(--yoi-navy); box-shadow: 0 0 0 3px rgba(34, 36, 62, .12); outline: 2px solid transparent; }
.login-field--password .login-input { padding-right: 84px; }
.login-field-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); display: inline-flex; pointer-events: none;
}
/* 眼睛鈕：鎖頭左側；data-visible 切換兩個圖示誰顯示（行內 onclick 改 input type 與這個屬性） */
.login-eye {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  border: 0; background: none; border-radius: 8px; color: var(--text-muted); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease;
}
.login-eye:hover { background: var(--yoi-navy-soft); color: var(--text-primary); }   /* --nav-hover 保留給側邊欄單一來源 */
.login-eye:focus-visible { outline: 2px solid var(--yoi-blue); outline-offset: 1px; }
.login-eye-show, .login-eye-hide { display: inline-flex; line-height: 0; }
.login-eye .login-eye-hide { display: none; }
.login-eye[data-visible="true"] .login-eye-show { display: none; }
.login-eye[data-visible="true"] .login-eye-hide { display: inline-flex; }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.login-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); cursor: pointer; }
.login-remember input { width: 18px; height: 18px; accent-color: var(--yoi-blue); margin: 0; cursor: pointer; }
.login-submit {
  min-width: 160px; background: var(--yoi-navy); color: #fff; border: none; border-radius: 12px;
  padding: 12px 24px; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: .3px;
}
.login-announcement { margin: 18px 0 0; font-size: 13px; color: #B71C1C; line-height: 1.6; }
.login-note { margin: 14px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.login-announcement + .login-note { margin-top: 6px; }
@media (max-width: 480px) {
  .login-page { padding: 24px 14px; }
  .login-card { padding: 28px 22px 26px; border-radius: 18px; }
  .login-brand-mark { width: 60px; height: 60px; }
  .login-row { flex-direction: column; align-items: stretch; }
  .login-submit { width: 100%; }
}

/* 行事曆頂欄的圖示鈕（‹ ›、齒輪）：照 Google——純圖示、無框、40px 圓形，滑過才有淡灰底。
   齒輪在 CalendarGearMenu 元件裡、‹ › 在頁面上，兩邊共用所以放全站 CSS。 */
.cal-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer;
}
.cal-iconbtn svg { display: block; }   /* 行內 svg 會吃到基線，圖示就不居中 */
.cal-iconbtn:hover { background: rgba(60, 64, 67, .08); color: var(--text-primary); }
.cal-iconbtn:active { background: rgba(60, 64, 67, .16); }
.cal-iconbtn:focus-visible { outline: 2px solid var(--yoi-navy); outline-offset: 2px; }

/* 時間格項目的預設內容（色點＋標題）。寫在全站 CSS 而不是元件的 scoped CSS：
   內容是行事曆頁透過 ItemTemplate 塞進來的，帶的是頁面的範圍標記，元件的 scoped 規則對它無效。 */
.tg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.tg-dot.chip-teal { background: var(--yoi-teal); }
.tg-dot.chip-gold { background: var(--yoi-gold); }
.tg-dot.chip-blue { background: var(--yoi-blue); }
.tg-dot.chip-navy { background: var(--yoi-navy); }
.tg-dot.chip-purple { background: var(--yoi-purple); }
.tg-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text-body); font-size: 11px; }
/* 整天列的標題可換行、最多兩行（同月檢視）；時間格裡的維持一行，因為高度只有 24px。 */
.tg-item-allday .tg-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }

/* ── 事件色塊（calendar-event-colors，站主 2026-09-05 選「甲」：像 Google 整塊上色）──
   紀錄（已發布、手動事件）＝實色塊白字（黃底用深字，白字在黃上看不見）；
   計畫（預計跑集、影片排定公開）＝同色淡底＋實線框、深字，跟「已發生」一眼分得開。
   色點在色塊上是多餘的，一律藏起來；資料上的 ColorKey 一個都沒改，只改畫法。
   寫在檔尾：跟 .tg-item／.cal-planned-chip 同權重時後面的贏。 */
.ev-solid { border: 1px solid transparent; color: #fff; }
.ev-solid.chip-teal { background: var(--yoi-teal); border-color: var(--yoi-teal); }
.ev-solid.chip-gold { background: var(--yoi-gold); border-color: var(--yoi-gold); color: var(--yoi-gold-ink); }
.ev-solid.chip-blue { background: var(--yoi-blue); border-color: var(--yoi-blue); }
.ev-solid.chip-navy { background: var(--yoi-navy); border-color: var(--yoi-navy); }
.ev-solid.chip-purple { background: var(--yoi-purple); border-color: var(--yoi-purple); }
.ev-tint { border: 1px solid transparent; border-style: solid; }
.ev-tint.chip-teal { background: var(--yoi-teal-soft); border-color: var(--yoi-teal); color: var(--yoi-teal-ink); }
.ev-tint.chip-gold { background: var(--yoi-gold-soft); border-color: var(--yoi-gold); color: var(--yoi-gold-ink); }
.ev-tint.chip-blue { background: var(--yoi-blue-soft); border-color: var(--yoi-blue); color: var(--yoi-blue); }
.ev-tint.chip-navy { background: var(--yoi-navy-soft); border-color: var(--yoi-navy); color: var(--yoi-navy); }
.ev-tint.chip-purple { background: var(--yoi-purple-soft); border-color: var(--yoi-purple); color: var(--yoi-purple-ink); }
.ev-solid .tg-title, .ev-tint .tg-title, .ev-solid .cal-chiptext, .ev-tint .cal-chiptext,
.ev-solid .cal-planned-state, .ev-tint .cal-planned-state, .ev-solid .cal-mchip-title { color: inherit; }
.ev-solid .tg-dot, .ev-tint .tg-dot, .ev-solid .cal-dot, .ev-tint .cal-dot { display: none; }
/* 月格裡的預計跑集 chip：把原本的虛線改成實線（.cal-planned .cal-planned-chip 是兩個 class，要三個才蓋得過） */
.cal-planned .cal-planned-chip.ev-tint { border-style: solid; }
/* 時間格裡的預計跑集／排定公開：外框已是色塊，裡面的 chip 自己不再畫框、不再上底色 */
.tg-item .cal-planned-chip, .tg-item .cal-planned-chip.ev-tint { border: 0; background: transparent; padding: 0; color: inherit; }
.tg-item .cal-occ-act { border-color: rgba(34, 36, 62, .25); }
/* 月檢視整天事件（發布紀錄、無時刻手動事件）的實色 chip；有時刻的手動事件維持色點＋字（Google 月檢視的規則） */
.cal-mchip { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 3px; padding: 2px 6px; border-radius: 6px; font-size: 11px; line-height: 1.35; cursor: grab; max-width: 100%; }
.cal-mchip .cal-mchip-title { flex: 1 1 auto; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* ── 測試站橫幅（App:TestMode）───────────────────────────────────────────────
   固定在視窗頂端，站主一眼看得出自己不在正式站。外殼往下推同等高度，
   否則側欄與內容會被橫幅蓋住。正式站不渲染這段元素，樣式留著不影響。 */
.yoi-test-mode-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 32px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--yoi-gold); color: var(--yoi-navy);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.yoi-shell-with-banner { padding-top: 32px; }
.login-test-mode {
  margin: 18px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--yoi-gold-soft); color: var(--yoi-gold-ink);
  font-size: 13px; font-weight: 700; line-height: 1.6;
}