/* ==========================================================================
   訓練子分頁（2026-08-14，複習頁第三個入口：今日訓練／本週訓練／訓練總計畫）
   全部沿用 app.css 既有 design token（--color-*／--space-*／--radius-*／
   --font-size-*），雙主題（書卷／塗鴉）＋深色模式已經由那些 token 自動處理，
   這裡不需要另外寫 [data-theme]／[data-appearance] 覆寫規則。
   安全區：頂層容器不再自己包一層 `.view`（2026-08-14 第二輪回饋修掉「巢狀
   .view 雙重 padding」的空白 bug，見 training/index.js 開頭大註解）——安全區
   /邊距一律交給 review.js 外層唯一的那層 `.view` 負責。
   ========================================================================== */

/* -- 頂部：標題在左、返回鈕在右，同一行（2026-08-14 第二輪回饋第1點：原本
   分兩行、返回鈕在左上角，改成跟一般「標題＋右上角動作」版面一致）。 -- */
.training-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.training-back-btn { flex: none; width: auto; padding: 0 var(--space-2); }
.training-title { margin-bottom: 0; }

/* ==========================================================================
   直線分隔 rail（章節列 .pl-rail 同一套視覺語言，2026-08-14 第二輪回饋第2點）
   ：今日/本週/總計畫三個子分頁、星期切換列都改用這套，取代原本的圓角膠囊
   chip／圓框圓點按鈕。橫向可捲動＋底部一條分隔線＋目前項目金字＋金色底線，
   跟 components.css `.pl-rail`／`.pl-rail-item`／`.pl-rail-item.on::after`
   質感一致；不直接重用那組 class（耦合到 podcast 播放器較深），這裡另建一套
   命名獨立、規則相同的 class。
   ========================================================================== */
.training-rail {
  display: flex;
  align-items: center;
  overflow-x: auto;
  touch-action: pan-x;
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-4);
}
@media (hover: none), (pointer: coarse) {
  .training-rail { scrollbar-width: none; }
  .training-rail::-webkit-scrollbar { display: none; }
}
.training-rail-item {
  flex: 1 1 0;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  padding: 0 var(--space-2);
}
/* 子分頁只有 3 項，鋪滿整行（flex:1）；星期列 7 項也鋪滿整行——都不需要
   橫向捲動，touch-action:pan-x／overflow-x:auto 是防禦性寫法（跟 .pl-rail
   一致），萬一未來項目數增加也不會裁字。 */
/* 「今日訓練｜本週訓練｜訓練總計畫」三個子分頁字級調大一級（sm→base，
   2026-08-15 第七輪回饋使用者覺得偏小）——只鎖定 .training-subtabs 這個
   容器，不動 .training-rail-item 本身，避免連帶影響共用同一顆 class 的星期
   切換列（7 項字數更擠，維持原字級）。選擇器比手機斷點那條
   `.training-rail-item { font-size: var(--font-size-xs); }`（下方）更具體，
   所以子分頁在手機上也維持這個字級，不會被那條規則蓋掉。 */
.training-subtabs .training-rail-item {
  font-size: var(--font-size-base);
}
.training-rail-sep {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  margin: 6px 0;
  background: linear-gradient(to bottom, transparent, var(--color-border) 25%, var(--color-border) 75%, transparent);
}
/* 目前選中項目：金字＋底線，跟 .pl-rail-item.on 同一個 token
   （--color-warn-500），瞬間切換不做過場動畫（跟章節列規則一致）。 */
.training-rail-item.is-active { color: var(--color-warn-500); font-weight: 700; }
.training-rail-item.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-warn-500);
}
/* 星期列「今天」指示——跟「檢視中」（.is-active 金字底線）是兩件獨立的事，
   可能同一天也可能不同天，兩者可以同時出現在同一顆按鈕上：用 ::before 畫
   一顆小圓點（右上角），不佔用 .is-active 的 ::after 底線。 */
.training-rail-item.is-today::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 20%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-500);
}

.training-focus-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   直線分隔區塊（取代原本的圓角卡片 .card）：今日訓練的 block 卡片／最低版本
   ／自我驗收／心得回饋，本週訓練的能力總結，訓練總計畫的所有區塊，統一改用
   這個 class——不再有圓角框線＋背景色的「卡片盒」感，改成上下細線分隔的
   簡約清單感（2026-08-14 第二輪回饋第2點）。
   ========================================================================== */
.training-flat-section {
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

/* ==========================================================================
   2026-08-15 第四輪回饋：整個「今日訓練」互動模型改成「列表式、狀態只用
   文字勾選表示、細節全部收起來」——block／最低版本收合列／自我驗收項目都
   共用同一套「單列：左側文字兩層、右側純文字狀態、點列展開細節」語言，見
   下面 .training-row-line／.training-row-text／.training-row-title／
   .training-row-sub／.training-row-detail／.training-status-label。這輪拿掉
   （見交辦逐條規格）：完成狀態的圓角膠囊按鈕（原本 .training-status-toggle-
   pair，第186-212行那組，改用 .training-status-label 純文字色取代）、獨立的
   「詳細步驟▼」子按鈕（併入點列展開）、block 層級的「低度完成」（改成獨立
   於各 block、一天一筆的合成標記，見 shared.js MINIMUM_VERSION_BLOCK_KEY）。
   ========================================================================== */
.training-row-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  min-height: var(--touch-target);
}
.training-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 任務名稱層 */
.training-row-title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); margin: 0; }
.training-row-title-faint { color: var(--color-text-faint); }
/* 次要說明層（跟 .training-hint-line／.training-focus-text 同一層規則：
   sm ＋ muted）。 */
.training-row-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.training-row-detail { margin-top: var(--space-2); }

/* -- 完成狀態純文字標籤（block／最低版本收合列共用）：不用圓圈/外框/底色，
   純粹文字色。2026-08-15 第六輪回饋推翻第五輪「文字固定不變、只變亮暗」的
   決定——block 完成狀態改回「兩種不同文字」：未點擊顯示「待完成」（暗淡），
   點擊後文字本身換成「已完成 ✓」＋亮綠（daily.js blockRowStatusHtml）。
   最低版本收合列維持第五輪的「同一段文字、只變亮暗」（「低度完成」固定不
   變，未點擊暗淡、點擊後亮藍，不加勾勾——跟 block 完成狀態刻意做出視覺區隔，
   對應「最低版本」本來就是較低標準的完成，不需要跟完整完成一樣醒目）。
   已完成＝亮綠 #22c55e；低度完成＝亮藍 #3b82f6。暗淡色原本用
   --color-text-faint，實測（Playwright 截圖比對頁面上「次要說明層」文字
   .training-row-sub 用的 --color-text-muted）faint 明顯過淺、跟 muted 那層
   不協調，改用 --color-text-muted 讓「暗淡」跟站上其他次要說明文字視覺一致
   （仍維持基本可讀性，不是看不清楚）。亮色數值（#22c55e／#3b82f6）沿用第
   三輪回饋已經定案的「亮綠/亮藍」決定邏輯不變（使用者原話要「亮」，非
   --color-success-500/--color-info-500 那組偏土色系語意色）。 -- */
.training-status-label {
  flex: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.training-status-label.is-done { color: #22c55e; font-weight: 700; }
.training-status-label.is-minimum-done { color: #3b82f6; font-weight: 700; }

/* -- 單行純文字收合觸發（最低版本／自我驗收／心得回饋共用）：沒有按鈕感、
   沒有外框/底色，字級併入任務名稱層。 -- */
.training-row-toggle-plain {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  padding: 0;
  cursor: pointer;
}

/* ==========================================================================
   文字層級只留兩層（2026-08-14 第三輪回饋第3點盤點結果，2026-08-15 第四輪
   回饋整個互動模型改版後重新盤點一次，結論不變、只更新對應 class 名稱）：
   任務名稱層＝.training-row-title（block 標題／最低版本收合列標題，lg/700）、
   .training-row-toggle-plain（自我驗收／心得回饋單行收合觸發，lg/700）。
   次要說明層＝.training-row-sub（block 子標題）／todayFocus（.training-
   focus-text）／hint 提示句（.training-hint-line）／集數選單（.training-
   material-select）／步驟條列（.training-steps-list）／.training-checklist-
   text（驗收項目文字）／.checkbox-row（週一錯誤分類／週六卡住原因勾選文字）
   都已經是 sm＋muted。完成狀態純文字標籤（.training-status-label）／自我
   驗收 OK/待加強（.training-status-word）字級也在下面對應規則一併調到 sm，
   跟這層和諧（顏色是語意狀態色的例外，見上面對應段落）。「清除本日紀錄」
   （.training-clear-day-link）是刻意更淡更小的第三種弱化，符合「最不重要
   的操作放最底部、視覺權重最低」這個設計意圖，不是誤留的第三層殘留。
   ========================================================================== */
/* ==========================================================================
   自我驗收 OK/待加強（2026-08-15 第四輪回饋第4點）：拿掉外框/底色/底線的
   pill 樣式，改純文字標籤，互動不變（兩個各自獨立可點選、互斥、可再點取消，
   見 daily.js checklistItemHtml 開頭註解的取捨說明）。未選中維持淡色文字
   （跟「尚未驗收」同一種視覺語意）；選中「OK」→亮綠 #22c55e（跟 block 完成
   狀態同一個色值，語意上都是「達標」）；選中「待加強」→琥珀色 #f59e0b
   （Tailwind amber-500 色階，硬編碼飽和色，不分主題——跟亮綠/亮藍同一種
   既有模式，見上面「完成狀態純文字標籤」段落註解）。刻意不用
   --color-warn-500（那是全頁唯一的導覽/選中強調色 token，跟這裡「待加強」
   語意狀態色性質不同，混用會讓使用者分不清「這是選中中的分頁」還是「這項
   需要加強」，使用者原話明講這輪新增的語意色是導覽強調色以外的例外）。
   ========================================================================== */
.training-checklist-status-pair { display: flex; align-items: center; flex: none; }
.training-checklist-status-pair .training-rail-sep { margin: 2px 0; }
.training-status-word {
  flex: none;
  border: none;
  background: none;
  padding: 4px 8px;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-faint);
  cursor: pointer;
  white-space: nowrap;
}
.training-status-word.is-ok { color: #22c55e; font-weight: 700; }
.training-status-word.is-needs-work { color: #f59e0b; font-weight: 700; }

/* -- 收合區共用（block／最低版本／自我驗收）：預設收合、點擊展開，比照
   card-detail.js data-toggle-verify-panel／article-reader.js data-trans-toggle
   既有 pattern（hidden 屬性切換，不用 <details>）。2026-08-15 第四輪回饋
   第2點：獨立的「詳細步驟▼」子按鈕已拿掉、併入點列展開（.training-row-line
   /.training-row-detail，見上面），這裡不再需要 .training-collapse-inline／
   .training-collapse-toggle 這兩個舊 class。 -- */
.training-steps-list,
.training-plain-list {
  list-style: disc;
  padding-left: 1.3em;
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.training-steps-list li,
.training-plain-list li { margin-bottom: var(--space-1); }

/* 2026-08-15 第四輪回饋第8點：全域只用細實線分隔，不混用虛線——原本
   dashed 改 solid（跟 .training-flat-section／.training-checklist-item 等
   其他分隔線一致）。 */
.training-special-fields {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

/* -- 「本週訓練用集數」縮成一行素材資訊文字（2026-08-15 第四輪回饋第5點）：
   底層仍是原生 <select>，appearance:none 去掉下拉框外觀，讓它看起來像一行
   純文字，保留小小的 ▾ 提示符號（wrap 的 ::after，pointer-events:none 讓
   點擊穿透到底下的 select，不擋掉原生選單開啟行為）。 -- */
.training-material-row { margin-top: var(--space-2); }
.training-material-select-wrap { position: relative; display: inline-block; max-width: 100%; }
.training-material-select-wrap::after {
  content: "▾";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  font-size: var(--font-size-xs);
  pointer-events: none;
}
.training-material-select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  max-width: 100%;
  background: none;
  border: none;
  padding: 0 16px 0 0;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

/* -- 搬到聽力／影片分頁的欄位（週三標題導言／週五週六速記/標題導言/提問
   紀錄）留下的一行提示文字＋前往影片分頁鈕（2026-08-14 第二輪回饋第5點：
   不留空白也不留殘影 UI）。 -- */
.training-hint-line {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2);
}

/* -- 「前往影片分頁（收聽）」改成純文字連結（2026-08-14 第三輪回饋第4點）：
   比照 components.css .reader-source-link／.reader-trans-toggle 既有的行內
   文字連結樣式（底線＋品牌色，不是按鈕），拿掉外框/背景的按鈕框感。整天只
   保留一個（daily.js movedToListeningHintHtml／episodeSelectHtml 呼叫端負責
   不重複渲染，這裡只管樣式）。 -- */
.training-text-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--space-2);
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
/* 2026-08-16：「影片頁練習（新）→」在還沒選本週集數時 disabled（見
   daily.js episodeSelectHtml 開發註解）——這裡補 disabled 態視覺，不然純文
   字連結的 disabled 屬性在部分瀏覽器下跟正常態幾乎看不出差異，使用者會以
   為按了沒反應。 */
.training-text-link:disabled {
  color: var(--color-text-faint);
  text-decoration: none;
  cursor: not-allowed;
}

/* -- 陣列型清單欄位（速記／提問紀錄，週三/週五/週六已搬移，這裡保留規則
   給週一「錯誤分類」等仍在用的類似結構共用） -- */
.training-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.training-list-row .input { flex: 1; }
.training-list-remove { font-size: var(--font-size-lg); line-height: 1; }

/* -- 最低版本收合卡：淡色文字、非警示色（交辦明講不要用警示色）——2026-08-15
   第四輪回饋第3點改成 .training-row-line 裡的 .training-row-title.
   training-row-title-faint（見上面「單列」共用規則），這裡不再需要獨立的
   .training-minimum-toggle 按鈕 class。 -- */

/* -- 今日自我驗收 -- */
.training-checklist-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-weight: 700;
  /* 2026-08-14 第三輪回饋第3點：字級併入任務名稱層（原本 base，跟 block
     標題 lg 對不齊）。 */
  font-size: var(--font-size-lg);
  padding: 0;
  color: var(--color-text);
}
/* 「已填X／Y」低調小字（2026-08-15 第六輪回饋新增，標題「今日驗收」旁）。 */
.training-checklist-progress {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  margin-left: 4px;
}
.training-collapse-body { margin-top: var(--space-3); }
/* 2026-08-15 第六輪回饋：每題現在可能多一段展開的原因複選（見下面
   .training-checklist-reasons），.training-checklist-item 改成直向排列的
   容器，題目文字＋OK/待加強那一列另外包一層 .training-checklist-item-row
   （原本 .training-checklist-item 自己就是那個 flex row，現在拆出來）。 */
.training-checklist-item {
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.training-checklist-item:last-of-type { border-bottom: none; }
.training-checklist-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
/* 2026-08-14 第三輪回饋第3點：補上 muted 顏色，併入次要說明層（跟
   .training-hint-line／.training-steps-list 同一種較淡文字色），原本沒設色
   會吃到預設全對比文字色，在同一層內又多一種變化。 */
.training-checklist-text { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* 待加強原因複選（2026-08-15 第六輪回饋新增）：跟 block 展開細節同一種
   縮排、次要說明層字級，"其他" 選中時的文字框套用既有 .input 樣式。 */
.training-checklist-reasons {
  margin-top: var(--space-2);
  padding-left: var(--space-2);
}
.training-checklist-reasons .checkbox-row:last-of-type { margin-bottom: var(--space-1); }
.training-checklist-reasons .input { margin-top: var(--space-1); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.training-category-row { margin-bottom: var(--space-2); }
.training-category-row .input { margin-top: var(--space-1); }

/* 心得與回饋顯示模式（2026-08-15 第六輪回饋新增）：有內容、非編輯中時的
   唯讀預覽文字，跟 .training-checklist-text 同一種次要說明層字級／顏色，
   white-space:pre-wrap 保留使用者輸入的換行。 */
.training-reflection-view {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: pre-wrap;
  margin: 0;
}

/* 心得／回饋編輯模式的兩個 textarea：改隨內容自動長高（daily.js
   autoGrowTextarea 依 scrollHeight 動態設 style.height），這裡拿掉手動拖曳
   把手＋隱藏內部捲軸，讓「變高」只由 JS 控制的實際高度呈現，不會同時存在
   一個使用者可拖出來的內部捲動容器（2026-08-15 第七輪回饋）。 */
.training-reflection-card textarea.input {
  resize: none;
  overflow: hidden;
}

/* -- 「清除本日紀錄」移到頁面最底部、改低調小字（2026-08-15 第四輪回饋
   第7點）：拿掉 .btn.btn-secondary 外框大按鈕視覺，openDeleteConfirm 二次
   確認邏輯不動（daily.js data-clear-day 那段完全沒改），只改樣式跟少量
   margin。細實線分隔跟頁面其他區塊一致，文字用最淡的 --color-text-faint，
   字級 xs（比次要說明層的 sm 更淡更小，呼應「最不重要的操作放最底部」）。 -- */
.training-clear-day-link {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-4);
  padding: var(--space-4) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  cursor: pointer;
}

/* -- 本週訓練列表：拿掉圓角框線＋背景色的按鈕盒，改成上下細線分隔的簡約
   列表列（2026-08-14 第二輪回饋第2點）。
   2026-08-15 第七輪回饋：row 從單一 <button data-goto-day> 改成「點列展開/
   收合當天摘要＋獨立『前往當日』文字連結」（見 weekly.js rowHtml）。多包了
   一層 .training-weekly-row-wrap（裝可點列＋展開內容兩個 DOM 節點），border-
   bottom／last-child 判斷改由這層 wrap 負責，內層 .training-weekly-row 本身
   不再是最外層、不再單獨扛 border（否則收合內容跟下一列中間會多一條線）。 -- */
.training-weekly-list { margin-bottom: var(--space-4); }
.training-weekly-row-wrap {
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-1) 0;
}
.training-weekly-list .training-weekly-row-wrap:last-child { border-bottom: none; }
.training-weekly-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) 0;
}
.training-weekly-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.training-weekly-row-label { font-weight: 700; }
.training-weekly-row-focus { margin: 0; }
.training-weekly-row-side { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.training-weekly-row-side .training-text-link { margin-top: 0; font-size: var(--font-size-xs); white-space: nowrap; }
.training-record-dot { color: var(--color-brand-500); font-size: var(--font-size-sm); }

/* -- 「本週待加強整理」／「近4週趨勢」共用列表項（2026-08-15 第七輪回饋
   新增）：跟 .training-checklist-item 同一種上下細線分隔＋次要說明層字級，
   不新開一種視覺語言。 -- */
.training-weak-summary-list { margin-top: var(--space-2); }
.training-weak-summary-factors { margin-top: var(--space-3); }
.training-weak-summary-suggestion { margin-top: var(--space-3); }
.training-weak-summary-item {
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}
.training-weak-summary-item:last-child { border-bottom: none; }
.training-weak-summary-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.training-weak-summary-item-label { font-size: var(--font-size-base); font-weight: 700; color: var(--color-text); }
/* 「本週觀察」（dayCount===1）／「本週重複出現」「持續觀察」（dayCount>=2／
   isRecurring）——沿用既有琥珀色語意（跟 .training-status-word.is-needs-work
   同一色值），未達門檻時純淡色文字。 */
.training-weak-summary-badge {
  flex: none;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  white-space: nowrap;
}
.training-weak-summary-badge.is-repeat { color: #f59e0b; font-weight: 700; }

.training-section-title { font-size: var(--font-size-lg); font-weight: 700; margin-bottom: var(--space-2); }

/* -- 本週能力總結候選：拿掉圓角膠囊 .chip，改成直線分隔＋金字選中
   （2026-08-14 第二輪回饋第2點）。 -- */
.training-capability-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: var(--space-2); }
.training-capability-item {
  flex: none;
  border: none;
  background: none;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  position: relative;
}
.training-capability-item.is-selected { color: var(--color-warn-500); font-weight: 700; }
.training-capability-item.is-selected::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 2px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-warn-500);
}

/* -- 訓練總計畫 -- */
.training-ability-line { margin-bottom: var(--space-2); }
.training-phase-block { margin-bottom: var(--space-3); }
.training-bottleneck { margin-bottom: var(--space-2); }
.training-material-block { margin-bottom: var(--space-3); }
.training-material-block a { color: var(--color-brand-600); text-decoration: underline; }

.training-week-number { font-size: var(--font-size-2xl); font-weight: 800; margin: var(--space-2) 0; }
.training-phase-current { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.training-boundary-inputs { display: flex; gap: var(--space-2); }
.training-boundary-inputs .input { text-align: center; }

/* -- 「訓練開始日期」input[type=date] 破版修正（2026-08-14 第二輪回饋第2點
   截圖 bug (b)）：iOS Safari 的原生 date 控件內部用固定寬度片段（yyyy/mm/dd）
   排版，套用跟一般文字框相同的大水平 padding（.input 的 --space-4=16px×2）
   後，在較窄的容器內可用寬度被壓縮，导致片段文字被壓扁變形。appearance:none
   讓瀏覽器改用一般文字輸入框的內部排版邏輯（不再是原生 date selector 那套
   固定寬度片段），文字不再被壓縮；點擊/點兩下叫出原生日期選擇器的行為不受
   appearance 影響（iOS Safari 對 type=date 是瀏覽器層級處理，跟 CSS
   appearance 屬性彼此獨立）。 -- */
.training-week-card input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  padding: var(--space-3) var(--space-3);
}

/* -- 手機（≤480px，比照 components.css 全站唯一手機斷點慣例）：星期切換點
   字級略縮，避免 7 個一排在窄螢幕擠壓變形。 -- */
@media (max-width: 480px) {
  .training-rail-item { font-size: var(--font-size-xs); padding: 0 4px; }
  .training-boundary-inputs { flex-wrap: wrap; }
}

/* ==========================================================================
   速記練習獨立畫面（listen-session.js，#/training-session/:week/:weekday）
   完全沿用本檔既有 design token 與視覺語言（直線分隔＋單一強調色），不新增
   膠囊/大按鈕——章節列/模式選單/計時選項直接重用 .training-rail 系列
   class，選句/展開列重用 .training-flat-section／.training-row-line 系列
   class（跟 daily.js block 卡片同一套視覺語言）。
   2026-08-15 第三次大改（選句畫面＋4模式）新增：句子清單（.session-sentence-
   *）、寫稿模式標題導言一體框（.session-script-*）。
   ========================================================================== */
.session-title { font-size: var(--font-size-lg); font-weight: 700; margin: var(--space-2) 0 var(--space-4); }

/* 影片：new YT.Player() 會把 data-yt-placeholder 那個 div 原地替換成
   iframe，兩者共用同一組絕對定位規則，替換前後視覺無縫（不會先看到一塊空白
   佔位再跳成影片）。 */
.session-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-4);
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.session-video-wrap iframe,
.session-video-wrap > div { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.session-audio-wrap { margin-bottom: var(--space-4); }
.session-audio-wrap audio { width: 100%; }

.session-mode-row { margin-bottom: var(--space-2); }
.session-chapter-nav { margin-bottom: var(--space-4); }
.session-timer-row { margin-bottom: var(--space-2); }
.session-timer-clock {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  text-align: center;
  margin: 0 0 var(--space-4);
  min-height: 1.2em;
  color: var(--color-text-muted);
}
.session-timer-clock:empty { margin: 0; min-height: 0; }
.session-timer-clock.is-done { color: #f59e0b; }

/* -- 選句畫面：句子清單（章節展開後、或沒有章節資料時的整集句子清單）。
   每句是一個可點的區塊按鈕（不是單行文字連結），英文本文＋小字中文輔助。 -- */
.session-sentence-list { margin-top: var(--space-2); }
.session-sentence-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-2) 0;
  cursor: pointer;
}
.session-sentence-list .session-sentence-item:last-child { border-bottom: none; }
.session-sentence-en { display: block; font-size: var(--font-size-sm); color: var(--color-text); }
.session-sentence-zh { display: block; font-size: var(--font-size-xs); color: var(--color-text-faint); margin-top: 2px; }

/* -- 寫稿模式：標題／導言視覺上呈現「無接縫的一個框」——兩個 textarea 緊
   接堆疊，外層 .session-script-box 統一畫一圈框線，內部各自拿掉自己的
   border，標題用強調色文字跟導言區分。 -- */
.session-script-box {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.session-script-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  padding: var(--space-2) var(--space-3) 0;
}
.session-script-box textarea.input {
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  resize: none;
  overflow: hidden;
}
/* 具體選擇器提高優先度：app.css `textarea.input { color: var(--color-text); }`
   是 element+class（0-1-1），單純 `.session-script-title` 這種 class-only
   （0-1-0）贏不過它，這裡改成 `.session-script-box .session-script-title`
   （0-2-0）確保標題強調色真的生效（2026-08-15 Playwright 驗收抓到這個
   bug：颜色曾經沒有真的套用，畫面上標題導言看起來同色）。 */
.session-script-box .session-script-title {
  font-weight: 700;
  color: var(--color-brand-600);
  padding-bottom: var(--space-2);
}
.session-script-box .session-script-lead {
  color: var(--color-text);
  border-top: var(--border-width) solid var(--color-border);
}

/* 2026-08-16 Round 4（iPhone 390px 實機回饋③）：practice-panel.js
   zh_recall 模式「🎲 隨機換一句」跟「中離／結束」是兩個各自獨立的
   .btn-row（見 practice-panel.js leaveFinishActionsHtml()／renderZhRecall()
   開發註解），app.css `.btn-row { display:flex; gap:var(--space-3) }` 只管
   同一排內的左右間距，沒有規則管「上下兩排彼此的間距」，兩排會直接貼在一
   起。用相鄰兄弟選擇器只鎖定 .practice-mode-body 範圍內「兩個 .btn-row 緊
   接著」這個情況補上間距，不動 app.css 全域 .btn-row（那個 class 在整個
   repo 到處共用，直接改本體風險太高）；write/question 模式目前只有一個
   .btn-row，這條規則對它們是 no-op。 */
.practice-mode-body .btn-row + .btn-row { margin-top: var(--space-4); }

/* 2026-08-16 Round 5「寫稿模式下方純中文速記唯讀參考區塊」：跟上面
   .session-script-box（可編輯輸入框）視覺上要一眼看出差別——底色用
   --color-bg（頁面底色，比輸入框吃的 --color-surface 深一階／不同色），邊
   框改虛線（輸入框是實線），文字用 --color-text-muted（比輸入框正文的
   --color-text 淡），三者疊加確保使用者一眼看出這塊不能點進去打字，不是
   第二個輸入框。white-space:pre-wrap 讓 practice-panel.js 塞進來的原始換行
   （使用者中文速記本來就是自己排版的多行筆記）照樣顯示換行，不是擠成一
   段。 */
.practice-mode-zh-ref {
  background: var(--color-bg);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.practice-mode-zh-ref .hint-text { margin-bottom: var(--space-2); }
.practice-mode-zh-ref-body {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
  word-break: break-word;
}