/* 英语学习站（/en）的补充样式。基础排版沿用 site.css，这里只加英语站独有的部分：
   字母宫格、音标宫格、拼读例词、单词表。 */
/* 配色沿用诗词站的变量，英语站只换强调色，避免两个站看起来是两套系统 */

body.en {
  --en-accent: #e2643c;
  --en-accent-soft: #fdeee8;
}

.en .site-header { border-bottom-color: var(--line); }
.en .brand { color: var(--en-accent); }

/* ---- 首页数字 ---- */
.en-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 18px 0;
}
.en-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
}
.en-stat:hover { text-decoration: none; border-color: var(--en-accent); }
.en-stat b { font-size: 24px; color: var(--en-accent); }
.en-stat span { font-size: 13px; color: var(--ink-3); }

.level-list { margin: 0; padding-left: 1.4em; }
.level-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.level-list li:last-child { border-bottom: 0; }
.level-link { font: 600 17px var(--sans); margin-right: 8px; }
.level-desc { color: var(--ink-3); font-size: 14px; }

/* ---- 字母 ---- */
.letter-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px;
}
.letter-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.letter-glyph { font: 700 46px/1 var(--sans); color: var(--ink); }
.letter-symbol { color: var(--ink-3); font-size: 15px; }
.letter-card audio { width: 100%; height: 32px; }

/* ---- 音标 ---- */
.phone-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.phone-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
}
.phone-cell:hover { text-decoration: none; border-color: var(--en-accent); }
.phone-symbol { font: 600 24px/1.2 var(--sans); color: var(--en-accent); }
.phone-tip { font-size: 13px; color: var(--ink-3); }

.phone-detail h1 { font-size: 42px; }

/* ---- 拼读 ---- */
.rule-combo {
  font: 600 18px monospace; color: var(--en-accent);
  background: var(--en-accent-soft); padding: 2px 10px; border-radius: 6px;
}
.rule-tip { color: var(--ink-2); margin: 0 0 10px; }
.word-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px;
}
.word-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
}
.word-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.word-text { font: 600 19px var(--sans); }
.word-text em { color: var(--en-accent); font-style: normal; }
.word-phonetic { font-size: 13px; color: var(--ink-3); }
.word-mean { font-size: 14px; color: var(--ink-2); }
.word-cell audio { width: 100%; height: 30px; margin-top: 4px; }

/* ---- 单词表 ---- */
.filter-stack { margin-bottom: 18px; }
.filter-stack .chips { margin-bottom: 8px; }
.word-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.word-table th, .word-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.word-table th { font-weight: 600; color: var(--ink-2); background: var(--paper); }
.word-table tr:last-child td { border-bottom: 0; }
.word-table audio { height: 30px; max-width: 190px; }
.word-link { font: 600 17px var(--sans); }
.phon { color: var(--ink-3); font-family: "Times New Roman", serif; }

.word-detail h1.word-title { font-size: 40px; letter-spacing: 0; font-family: var(--sans); }

/* ---- 例句 ---- */
.sentence-list { list-style: none; margin: 0; padding: 0; }
.sentence-list li { padding: 12px 0; border-bottom: 1px dashed var(--line); }
.sentence-list li:last-child { border-bottom: 0; }
.sentence-en { font: 17px/1.7 var(--sans); margin: 0; }
.sentence-cn { color: var(--ink-2); margin: 2px 0 6px; font-size: 15px; }
.sentence-list audio { height: 30px; max-width: 320px; }

@media (max-width: 720px) {
  .word-table th:nth-child(2), .word-table td:nth-child(2) { display: none; }
  .phone-detail h1, .word-detail h1.word-title { font-size: 32px; }
}