/* ============================================================
   article.css — 文章內頁（一頁到底：課文 / 單字表 / 實用提示）
   內容裝在白色大圓角主卡 .article-card。
   發音鈕動作分級：
   - 單句/單字 = 青綠外框膠囊（次要動作，數量多、不搶版面）
   - 播放整篇 = 珊瑚紅實心（主要動作，一頁只有一顆）
   - 播放中   = 金色（狀態，金底一律配深色字 --gold-ink）
   ============================================================ */

/* ---- 文章主卡 ---- */
.article-card{ background: var(--card); border-radius: var(--radius-xl); padding:30px 34px 36px;
  box-shadow: var(--shadow); border:1px solid var(--line); }
@media (max-width:600px){ .article-card{ padding:22px 18px 28px; border-radius: var(--radius-lg); } }

/* ---- 標頭 ---- */
.article-head{ margin-bottom:8px; }
.article-head .day-badge{ display:inline-block; font-family: var(--font-mono); font-size:.7rem; letter-spacing:1.5px;
  color:#fff; background: var(--teal); padding:4px 12px; border-radius:14px; text-transform:uppercase; font-weight:600; }
.level-row{ margin:10px 0 4px; display:flex; gap:6px; flex-wrap:wrap; }
.article-head h2{ font-family: var(--font-display); font-size:clamp(1.5rem,3.4vw,2.1rem); margin:6px 0 4px; overflow-wrap:break-word; }
.article-head h2 .emoji{ width:1em; height:1em; vertical-align:-0.08em; }
.article-head .zh-title{ font-family: var(--font-serif); color: var(--ink-soft); font-size:1.02rem; font-weight:600; }
.article-summary{ font-family: var(--font-serif); color: var(--ink-soft); font-size:.95rem; line-height:1.7; margin:10px 0 0; }

/* ---- 發音提示 ---- */
.audio-note{ font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft); background: var(--paper);
  border:1px dashed var(--line); padding:8px 13px; border-radius: var(--radius); margin:16px 0 4px; display:inline-block; }
.audio-note .emoji{ vertical-align:-0.18em; }

/* ---- 區塊標題 ---- */
.section-title{ font-size:1.15rem; font-weight:700; margin:34px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--teal); }
#lesson .section-title{ margin-top:8px; }

/* ---- 課文工具列（播放整篇 / 語速 / 顯示中文） ---- */
.lesson-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:8px 0 8px; }
.lesson-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.play-all-btn{ display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:.88rem; font-weight:600;
  border:none; background: var(--coral); color:#fff; padding:10px 22px; border-radius:24px; cursor:pointer;
  box-shadow:0 4px 14px rgba(232,93,61,.35); transition:background .15s ease; }
.play-all-btn:hover{ filter:brightness(1.06); }
.play-all-btn.playing{ background: var(--gold); color: var(--gold-ink); box-shadow:0 4px 14px rgba(233,163,25,.35); }
.play-all-btn .emoji{ width:14px; height:14px; flex-shrink:0; vertical-align:-0.15em; }
.zh-toggle{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem;
  color: var(--ink-soft); cursor:pointer; user-select:none; }
.zh-toggle input{ accent-color: var(--teal); }
.speed-ctrl{ display:inline-flex; align-items:center; gap:4px; }
.speed-label{ font-family: var(--font-mono); font-size:.72rem; color: var(--ink-soft); margin-right:2px; }
.speed-ctrl button{ font-family: var(--font-mono); font-size:.74rem; font-weight:600; border:1.5px solid var(--line); background:transparent;
  color: var(--ink-soft); padding:6px 13px; border-radius:18px; cursor:pointer; transition:all .15s ease; }
.speed-ctrl button:hover{ color: var(--ink); }
.speed-ctrl button.active{ background: var(--teal); border-color: var(--teal); color:#fff; }

/* ---- 逐句課文 ---- */
.line{ padding:13px 0; border-bottom:1px dashed var(--line); }
.line-en{ margin:0; font-size:1.06rem; line-height:1.7; overflow-wrap:break-word; }
.line-zh{ margin:4px 0 0; font-family: var(--font-serif); color: var(--ink-soft); font-size:.92rem; line-height:1.6; }
.lesson-body.hide-zh .line-zh{ display:none; }
.line.playing-line{ background:rgba(233,163,25,0.1); box-shadow:inset 3px 0 0 var(--gold);
  border-radius:0 var(--radius) var(--radius) 0; padding-left:10px; margin-left:-10px; }

/* ---- 發音鈕（單句 / 單字） ---- */
.speak-btn{ display:inline-flex; align-items:center; gap:5px; border:1.5px solid var(--teal); background:transparent;
  color: var(--teal); font-family: var(--font-mono); font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:16px;
  cursor:pointer; margin-left:8px; vertical-align:middle; transition:background .15s ease, color .15s ease; }
.speak-btn:hover{ background: var(--teal); color:#fff; }
.speak-btn.playing{ background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
/* flex-shrink:0 → 圖示不被 flex 容器壓縮（單字表窄欄會擠扁圖示，變成橢圓） */
.speak-btn .emoji{ width:15px; height:15px; flex-shrink:0; vertical-align:-0.2em; }
.line .speak-btn{ margin-left:6px; }
.word-btn{ margin-left:0; }

/* ---- 單字表 ---- */
/* 表格有「最小內容寬度」，欄位擠不下時會撐破容器；外層加橫向捲動當保險 */
.vocab-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.vocab{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.vocab th{ text-align:left; font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:1px;
  color: var(--teal-dark); background:rgba(23,126,110,.07); padding:9px 10px; }
table.vocab th:first-child{ border-radius:10px 0 0 10px; }
table.vocab th:last-child{ border-radius:0 10px 10px 0; }
table.vocab td{ padding:11px 10px; border-bottom:1px dashed var(--line); vertical-align:top; }
table.vocab td.word{ font-weight:700; }
table.vocab td.ipa{ font-family: var(--font-mono); color: var(--teal); font-size:.85rem; white-space:nowrap; }
table.vocab td.pos{ color: var(--ink-soft); font-size:.82rem; }
table.vocab td.zh{ min-width:5.5em; }
table.vocab td.vocab-audio{ text-align:center; width:52px; }

@media (max-width:600px){
  /* 固定佈局：各欄依比例分配、塞進螢幕，長字改為換行（壓縮左側文字，而非擠壓按鈕） */
  table.vocab{ table-layout:fixed; width:100%; font-size:.85rem; }
  table.vocab th, table.vocab td{ padding:8px 5px; overflow-wrap:anywhere; }
  table.vocab th:nth-child(1){ width:30%; }   /* 單字 */
  table.vocab th:nth-child(2){ width:11%; }   /* 詞性 */
  table.vocab th:nth-child(3){ width:24%; }   /* 音標 */
  table.vocab th:nth-child(4){ width:auto; }  /* 中文意思（吃剩餘） */
  table.vocab th:nth-child(5){ width:52px; }  /* 發音（固定，容納整顆按鈕不被擠壓） */
  table.vocab td.ipa{ white-space:normal; font-size:.8rem; }
  table.vocab td.pos{ white-space:nowrap; }   /* 詞性都是短縮寫，不換行 */
  table.vocab td.zh{ min-width:0; }
  /* 發音欄去掉左右內距，確保按鈕完整置中不溢出 */
  table.vocab td.vocab-audio{ padding-left:0; padding-right:0; }
}

/* ---- 實用提示 ---- */
.tips-list{ list-style:none; padding:0; margin:0; }
.tips-list li{ position:relative; padding:12px 0 12px 28px; border-bottom:1px dashed var(--line);
  font-family: var(--font-serif); font-size:.94rem; }
.tips-list li::before{ content:"✎"; position:absolute; left:2px; top:12px; color: var(--gold); }

/* ---- 懸浮迷你播放列 ----
   只在「播放整篇」時出現：隨時可暫停/停止，不播放時完全消失不佔空間。
   底部置中、膠囊造型；body.playing 加底部內距，避免蓋住最末內容。 */
.mini-player{ position:fixed; left:50%; transform:translateX(-50%) translateY(96px); bottom:16px; z-index:50;
  display:flex; align-items:center; gap:12px; background: var(--card); border:1px solid var(--line);
  border-radius:34px; padding:8px 14px 8px 8px; box-shadow: var(--shadow-pop);
  transition:transform .25s ease; max-width:calc(100vw - 32px); }
.mini-player.show{ transform:translateX(-50%) translateY(0); }
.mp-toggle{ width:44px; height:44px; border-radius:50%; border:none; background: var(--coral); color:#fff;
  font-size:1.05rem; cursor:pointer; box-shadow:0 4px 12px rgba(232,93,61,.4); flex-shrink:0; }
.mp-toggle.paused{ background: var(--teal); }
.mp-toggle .emoji{ width:16px; height:16px; flex-shrink:0; vertical-align:-0.15em; }
.mp-info{ font-family: var(--font-mono); font-size:.68rem; color: var(--ink-soft); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; border:none; background:none; text-align:left; padding:0; }
.mp-info b{ display:block; color: var(--ink); font-size:.78rem; }
.mp-stop{ border:none; background: var(--paper); color: var(--ink-soft); width:34px; height:34px; border-radius:50%;
  cursor:pointer; font-size:.8rem; flex-shrink:0; }
.mp-stop:hover{ color: var(--ink); }
body.playing{ padding-bottom:84px; }