/* ══════════════════════════════════════════════════════════
   learning.css — 學習頁 /learning（Day 25E.2A L3）
   ──────────────────────────────────────────────────────────
   🧒 外觀比照字典頁（分類標籤、字卡、段落標題），但寫在這個新檔裡、只用 tokens.css 的變數：
   學習頁不載入 dictionary.css（它還沒改成 tokens，兩頁也不該互相綁住）。
   數值對照字典頁：分類標籤 14px／600／44px 高／膠囊；卡片白底、1px 淺灰框、圓角、16px 內距；
   段落標題 1rem／粗體。驗收時請把兩頁並排比較（附錄一 N4）。
   新的 :hover 一律包在 @media (hover: hover)；動畫時間用 --motion-fast（減少動態效果時是 0）。
   ══════════════════════════════════════════════════════════ */

/* 內容區是容器：工具列依「內容區自己的寬度」決定一排或兩排（和計畫頁同一個門檻：≥ 484px 一排）。
   視窗 → 內容區：≤ 560px 時 視窗 − 24（最多 460）→ 兩排；561px 起 視窗 − 32（平板、桌機再扣導覽列讓位）→ 一排。
   這裡沒有 position: fixed 的元素，容器變成 fixed 定位基準不會有影響。 */
.learning-main {
  container: learning / inline-size;
}

/* ★ Day 25E.2A（附錄二 U9）：頁首標題與說明之間的距離比照字典頁（.dict-hero h1 的 12px＝--space-3）。
   只加在學習頁：計畫頁的頁首結構不同、股票頁也用 .page-hero__title，改在 base.css 會影響這兩頁 */
.learning-page .page-hero__title {
  margin-bottom: var(--space-3);
}

.kb-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kb-panel[hidden] {
  display: none;
}

/* ── 工具列：搜尋框、分類標籤、說明列＋只看收藏 ── */
.kb-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
}

/* 輸入框字級沿用內文 18px（≥ 16px，iPhone 點進去不會自動放大） */
.kb-search-input {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.kb-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.kb-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* 比照字典頁 .dict-category-tab：白底灰框膠囊；選中的是主色實心 */
.kb-category-tab {
  min-height: var(--control-height);
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--tab-font-size);
  font-weight: var(--btn-weight);
  white-space: nowrap;
  cursor: pointer;
}

.kb-category-tab[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.kb-category-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (hover: hover) {
  .kb-category-tab:not([aria-pressed="true"]):hover {
    border-color: var(--color-border-hover);
    color: var(--color-text-heading);
  }
}

/* 說明列＋「只看收藏」：★ U2 移到白色工具卡外面（清單上方）。
   ★ U3 手機固定兩排（說明一整排、開關在第二排靠左，和計畫頁 C1-9、字典頁同一規則，兩排間距 --space-2）；寬螢幕一排、開關靠右 */
.kb-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: 0 2px;
}

.kb-status {
  flex: 1 1 100%;
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.kb-status-actions {
  display: flex;
  align-items: center;
}

@container learning (min-width: 484px) {
  .kb-status-row {
    flex-wrap: nowrap;
  }

  .kb-status {
    flex: 1 1 auto;
  }

  .kb-status-actions {
    margin-left: auto;
  }
}

/* ── 清單 ── */
/* ★ U4：清單包進白色大區塊（比照字典頁 .dict-list-container：白底、細框、圓角、陰影、18px 內距）；
   段落標題、搜尋結果、只看收藏、空狀態都在區塊裡 */
.kb-list-container {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
}

/* ★ Day 25E.2A（跨頁淡入淡出條件 3）：資料到之前先佔好 360px（裡面顯示「載入文章中…」），清單不會晚一步把下面的內容推走。
   ★ W3：只在載入中保留（learning.js 的 hideLoadingPlaceholder() 拿掉 is-loading）；
   資料到了就照內容高度，文章少（例如只看收藏 1 篇）時下面不會空一大塊 */
.kb-list-container.is-loading {
  min-height: 360px;
}

.kb-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 段落標題「心態管理（17）」：比照字典頁 .dict-list-section-title */
.kb-list-section-title {
  margin: var(--space-2) 2px 0;
  color: var(--color-text-heading);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
}

.kb-list-section-title:first-child {
  margin-top: 0;
}

/* ── 卡片：比照字典頁 .dict-term-card（白底、淺灰框、圓角、16px 內距） ── */
.kb-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  scroll-margin-top: var(--space-4); /* 深層連結捲過來時，卡片上緣留一點空間 */
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
  .kb-card:hover {
    border-color: var(--color-primary-border-hover);
    box-shadow: var(--shadow-md);
  }
}

.kb-card.is-expanded {
  border-color: var(--color-primary-border);
  cursor: auto; /* ★ W4：展開後只有標題列、分類標籤列、右下「收合」可以點（下方個別設 pointer） */
}

.kb-card.is-expanded .kb-card-top,
.kb-card.is-expanded .kb-card-tags,
.kb-card.is-expanded .kb-card-more {
  cursor: pointer;
}

.kb-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.kb-card-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-heading);
  font-size: 1.05rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* 標題是按鈕（鍵盤可操作），外觀和一般標題一樣 */
.kb-card-toggle {
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: pointer;
}

.kb-card-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 收藏星星：可點範圍 44px，用負外距收回去，不把標題列撐高 */
.kb-favorite-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin: -10px -6px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  cursor: pointer;
}

.kb-favorite-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.kb-star-icon {
  width: 22px;
  height: 22px;
}

.kb-star-icon--off {
  fill: none;
  stroke: var(--color-icon-muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kb-star-icon--on {
  display: none;
  fill: var(--color-accent);
  stroke: var(--color-accent-outline);
  stroke-width: 1;
  stroke-linejoin: round;
}

.kb-favorite-btn.active .kb-star-icon--off {
  display: none;
}

.kb-favorite-btn.active .kb-star-icon--on {
  display: block;
}

/* ★ U6：分類標籤放在標題下方（第二列），一律顯示。和字典頁「標籤在標題右邊」不同是刻意的：
   知識庫標題比較長，放右邊會把標題擠成兩行 */
.kb-card-tags {
  display: flex;
  margin-top: var(--space-2);
}

/* 分類短名稱標籤：比照字典頁 .dict-category-badge（小字膠囊）。
   ★ U5：同一種顏色＝同一個主題（tokens.css 的 --topic-*；對比度驗算見 DoD 第一節） */
.kb-category-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.kb-category-badge--mindset     { background: var(--topic-mindset-bg);     color: var(--topic-mindset-text); }
.kb-category-badge--pattern     { background: var(--topic-pattern-bg);     color: var(--topic-pattern-text); }
.kb-category-badge--chips       { background: var(--topic-chips-bg);       color: var(--topic-chips-text); }
.kb-category-badge--analysis    { background: var(--topic-analysis-bg);    color: var(--topic-analysis-text); }
.kb-category-badge--risk        { background: var(--topic-risk-bg);        color: var(--topic-risk-text); }
.kb-category-badge--instruments { background: var(--topic-instruments-bg); color: var(--topic-instruments-text); }

/* 收合時：第一段的前 2 行，超過顯示「…」 */
.kb-card-excerpt {
  display: -webkit-box;
  margin-top: var(--space-2);
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.kb-card.is-expanded .kb-card-excerpt {
  display: none;
}

/* 展開後：兩段完整內容。★ U7：和標題列之間加一條細分隔線＋12px，讓「標題列」和「內容」分開；
   區塊之間 16px（同字典說明區） */
.kb-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  cursor: auto; /* 內文可以選取文字 */
}

/* ★ Day 25E.2A（W6）：寬螢幕一行字太多（1440 時約 60 多字）。展開內容每一塊最寬 46rem
   （內文 16px → 一行約 46 個中文字，閱讀舒適的範圍約 35～45 字）；限制放在裡面的每一塊上，
   卡片本身和上方分隔線仍是整張卡寬。手機、平板本來就比較窄，不受影響；收合時的節錄不限 */
.kb-card-body > * {
  max-width: 46rem;
}

.kb-card-body[hidden] {
  display: none;
}

/* 型態觀察、投資工具：展開後最上面的小提醒 */
.kb-card-note {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ★ U7：第二段放進淡色底＋左邊色條的區塊（比照字典「常見解讀」「紀律小提醒」：內距 14px 16px、左條 4px、右側圓角），
   小標題在區塊裡的第一行。觀察重點＝藍（info）、為什麼重要＝琥珀（tip） */
.kb-section--callout {
  padding: 14px 16px;
  border-left: 4px solid var(--callout-info-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--callout-info-bg);
}

.kb-section--tip {
  border-left-color: var(--callout-tip-border);
  background: var(--callout-tip-bg);
}

/* 小標題到內文 8px（同字典說明區） */
.kb-section-heading {
  margin-bottom: var(--space-2);
  color: var(--color-text-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.kb-section-body {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.8;
}

/* 字典連結：比照字典頁相關詞連結的藍色 */
.kb-dict-link {
  color: var(--color-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-dict-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ★ U8：展開內容最下方的免責小字（樣式比照字典說明區底部那行：0.82rem、行高 1.6）。
   顏色用 --color-text-muted：字典那行的 #94a3b8 在白底只有約 2.6:1，低於 4.5，這裡不沿用 */
.kb-card-disclaimer {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ★ U10：右下「展開 ▾／收合 ▴」：14px、主色文字；這一行不單獨佔大空白，和上一行只隔 4px。
   箭頭方向照全站規則：收合朝下、展開朝上 */
/* ★ Day 25E.2A（W4）：「收合」變成可點的區域——高度至少 44px（--tap-min），只佔右側字樣的寬度（width: fit-content＋靠右）。
   多出來的高度用上下負外距收回去，畫面上「上一行 → 展開／收合字樣」仍是 4px、卡片底部也不變高：
   字樣本身高約 14 × 1.3 ＝ 18.2px（箭頭 16px 較小），上下各多出 (44 − 18.2) ÷ 2 ≈ 12.9px。
   仍是 aria-hidden、不進 Tab 順序：鍵盤和讀屏軟體用標題按鈕（aria-expanded）操作 */
.kb-card-more {
  --kb-more-overhang: calc((var(--tap-min) - var(--text-sm) * var(--leading-tight)) / 2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: fit-content;
  min-height: var(--tap-min);
  margin: calc(var(--space-1) - var(--kb-more-overhang)) 0 calc(-1 * var(--kb-more-overhang)) auto;
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.kb-card-chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-fast) var(--ease-out);
}

.kb-card.is-expanded .kb-card-chevron {
  transform: rotate(180deg);
}

/* 資料到之前的佔位文字（比照字典頁的載入中：淡色、置中） */
.kb-loading {
  padding: var(--space-8) 0;
  color: var(--color-text-muted);
  text-align: center;
}

.kb-loading[hidden] {
  display: none;
}

/* ── 空狀態（★ U4：顯示在白色清單區塊裡，所以自己不再加框和底色）
   ★ Day 25E.2A（附錄五 Y1）：外觀改用全站共用的 .empty-state（base.css，置中兩行），原本的 .kb-empty 刪除；
   這裡只留提示裡「白話字典」連結的樣子（藍色＋底線，對白底 6.70:1） ── */
.kb-empty-link {
  color: var(--color-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 句尾最後 2 個字＋標點不斷開（learning.js 的 setTextWithNoWrapTail） */
.kb-nowrap {
  white-space: nowrap;
}

/* 只給讀屏軟體看的文字（搜尋框的標籤） */
.kb-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════
   ★ Day 25E.2B（T4）：復盤紀錄（時間軸）
   🧒 一條細直線從上往下，每張卡片左邊一顆小圓點掛在線上；依「復盤日期的年月」分段。
   工具卡、說明列、清單區、卡片外殼、展開／收合都沿用上面知識庫的 class（同一套樣子），這裡只放時間軸自己的部分。
   版面推算（375px）：清單區內容寬 375 − 24（頁面）− 36（清單區內距）＝ 315；時間軸線＋圓點佔 20px → 卡片外寬 295、
   卡片內容寬 295 − 32（內距）− 2（框）＝ 261px。完整斷行表見 DoD。
   ══════════════════════════════════════════════════════════ */
.tl-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tl-month {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 段落標題「2026 年 10 月」沿用 .kb-list-section-title；第一段不加上方外距 */
.tl-month:first-child .tl-month-title {
  margin-top: 0;
}

/* 時間軸：左邊 20px 放直線與圓點（手機也保留）。直線在 6px 處、寬 2px；
   顏色用中性的 --color-border-strong，不用分數色（避免和分數標籤重複） */
.tl-month-items {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: 20px;
}

.tl-month-items::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}

.tl-card {
  position: relative;
}

/* 圓點：直徑 10px、中心對齊直線（線的中心在容器 7px；定位是從卡片 1px 框線內側算起，內側在 21px →
   圓點左緣 2px ＝ −19px），高度對齊標題第一行 */
.tl-card::before {
  content: "";
  position: absolute;
  top: calc(var(--space-4) + 0.35em);
  left: -19px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-surface-card);
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  box-sizing: border-box;
}

.tl-card.is-expanded::before {
  background: var(--color-primary);
}

/* 標題列右側「紀律完成度 82%」：分數配色（≥80 綠、50–79 黃、<50 紅，和計畫頁紀律環同一套），不縮、不換行 */
.tl-score-badge {
  flex-shrink: 0;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.tl-score-badge--high { border-color: var(--score-high); background: var(--color-success-soft); color: var(--score-high-text); }
.tl-score-badge--mid  { border-color: var(--score-mid);  background: var(--color-warning-soft); color: var(--score-mid-text); }
.tl-score-badge--low  { border-color: var(--score-low);  background: var(--color-danger-soft);  color: var(--score-low-text); }

/* 第二列：星等＋「復盤：日期」＋已封存；窄的時候自動換行 */
.tl-card-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.tl-stars {
  display: inline-flex;
  font-size: var(--text-base);
  line-height: 1;
  letter-spacing: 1px;
}

.tl-star {
  color: var(--color-border-strong);
}

.tl-star--on {
  color: var(--color-accent);
}

.tl-card-date {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.tl-archived-badge {
  padding: 2px 8px;
  border: 1px solid var(--status-archived-border);
  border-radius: var(--radius-full);
  background: var(--status-archived-bg);
  color: var(--status-archived-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

/* 收合時的節錄只有一行，超過用「…」（知識庫是 2 行） */
.tl-card-excerpt {
  -webkit-line-clamp: 1;
}

/* 還沒有寫復盤（Q7）：次要文字色 */
.tl-card-excerpt--empty,
.tl-review-text--empty {
  color: var(--color-text-muted);
}

/* 復盤文字保留使用者自己的換行 */
.tl-review-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.tl-card-completed {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* 「查看這份計畫」：膠囊按鈕樣子的一般連結（44px 高），靠左 */
.tl-view-plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary-text);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
  .tl-view-plan-btn:hover {
    background: var(--color-primary-subtle);
  }
}

.tl-view-plan-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 「顯示已封存」開關：開著時的圖示是同一個封存盒的線條（不是實心星星），顏色跟著文字 */
.tl-archived-toggle .fav-filter-toggle__icon--on {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* 顯示更多：比照計畫頁的置中膠囊按鈕（discipline.css .discipline-show-more-btn，學習頁不載入那支 CSS） */
.tl-show-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-4) var(--space-2);
}

.tl-show-more[hidden] {
  display: none;
}

.tl-show-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-8);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-primary-text);
  font: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-weight);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}

@media (hover: hover) {
  .tl-show-more-btn:hover {
    background: var(--color-primary-subtle);
  }
}

.tl-show-more-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.tl-show-more-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl-show-more-count {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}