/* ============================================================
   article.css — 文章內頁（一頁到底：課文 / 單字表 / 實用提示）
   ============================================================ */

/* ---- 標頭 ---- */
.article-head{ border-bottom:3px double var(--ink); padding-bottom:22px; margin-bottom:26px; }
.article-head .day-badge{ display:inline-block; font-family: var(--font-mono); font-size:.75rem; letter-spacing:1.5px;
  color:#fff; background: var(--teal); padding:3px 10px; border-radius: var(--radius); margin-bottom:10px; text-transform:uppercase; }
.level-row{ margin:6px 0 2px; }
.article-head h2{ font-family: var(--font-display); font-size:clamp(1.6rem,4vw,2.3rem); margin:4px 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.05rem; }
.article-summary{ font-family: var(--font-serif); color: var(--ink-soft); font-size:1rem; line-height:1.6; margin:10px 0 0; }

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

/* ---- 區塊標題 ---- */
.section-title{ font-family: var(--font-display); font-size:1.35rem; margin:40px 0 14px; padding-bottom:8px; border-bottom:2px solid var(--ink); }
#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 14px; }
.lesson-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.play-all-btn{ display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size:.8rem;
  border:1px solid var(--teal); background: var(--teal); color:#fff; padding:6px 14px; border-radius:20px; cursor:pointer; transition:background .15s ease; }
.play-all-btn:hover{ background: var(--teal-dark); border-color: var(--teal-dark); }
.play-all-btn.playing{ background: var(--stamp-red); border-color: var(--stamp-red); }
.play-all-btn .emoji{ width:14px; height:14px; vertical-align:-0.15em; }
.zh-toggle{ display:inline-flex; align-items:center; gap:7px; font-family: var(--font-mono); font-size:.8rem;
  color: var(--ink-soft); cursor:pointer; border:1px solid var(--line); padding:5px 12px; border-radius:20px; 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:.72rem; border:1px solid var(--line); background:transparent;
  color: var(--ink-soft); padding:4px 9px; border-radius:14px; 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:12px 0; border-bottom:1px dashed var(--line); }
.line-en{ margin:0; font-size:1.08rem; line-height:1.65; overflow-wrap:break-word; }
.line-zh{ margin:5px 0 0; font-family: var(--font-serif); color: var(--ink-soft); font-size:.96rem; line-height:1.6; }
.lesson-body.hide-zh .line-zh{ display:none; }
.line.playing-line{ background:rgba(199,154,43,0.14); 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:1px solid var(--teal); background:transparent;
  color: var(--teal-dark); font-family: var(--font-mono); font-size:.72rem; padding:3px 9px; border-radius:20px;
  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:#fff; }
.speak-btn .emoji{ width:15px; height:15px; 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:.95rem; }
table.vocab th{ text-align:left; font-family: var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:1px;
  color: var(--ink-soft); border-bottom:2px solid var(--ink); padding:8px 10px; }
table.vocab td{ padding:10px 10px; border-bottom:1px dashed var(--line); vertical-align:top; }
table.vocab td.word{ font-weight:600; }
table.vocab td.ipa{ font-family: var(--font-mono); color: var(--teal-dark); white-space:nowrap; }
table.vocab td.pos{ color: var(--ink-soft); font-size:.85rem; }
table.vocab td.zh{ min-width:5.5em; }
table.vocab td.vocab-audio{ text-align:center; width:48px; }

@media (max-width:600px){
  table.vocab{ font-size:.88rem; }
  table.vocab th{ padding:6px 6px; letter-spacing:.5px; }
  table.vocab td{ padding:8px 6px; }
  table.vocab td.ipa{ white-space:normal; font-size:.82rem; }
  table.vocab td.vocab-audio{ width:40px; }
}

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