/* 國小英語學習單樣式（字母描寫、英文名字、大小寫、字首音、CVC、字族、單字卡、抄寫、看圖寫字、聽寫、句子抄寫）
 * 疊在 css/math/sheet.css 上：紙張、頁首、分頁、列印規則都沿用，這裡只放英語工具的元件。
 * 四線三格與字形都用 SVG（Chrome 列印預設不印背景色）；一般英文字用 Andika（SIL OFL，單層 a、g，給初學者的識字字型）。
 */
@font-face { font-family: 'Andika'; src: url('/fonts/Andika-Regular.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Andika'; src: url('/fonts/Andika-Bold.ttf') format('truetype'); font-weight: 700; font-display: block; }

.en-page .ms-fields .ms-f1 { width: 24mm; }
.en-page .ms-title { font-size: 6.5mm; }
.en-txt { font-family: 'Andika', 'Comic Sans MS', 'Noto Sans TC', sans-serif; }
.en-zh { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }

/* ===== 四線三格的一行：底下是四條線（SVG），上面放字形或空白 ===== */
.en-row { position: relative; box-sizing: border-box; flex: none; }
.en-row > .en-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.en-row > .en-ink { position: relative; z-index: 1; display: flex; align-items: stretch; height: 100%; }
.en-row > .en-ink > svg { display: block; height: 100%; flex: none; }
/* 一行裡的格子（字母描寫）：格與格之間細直線 */
.en-cell { position: relative; box-sizing: border-box; flex: none; height: 100%; border-left: .2mm solid #c9c9c9; display: flex; justify-content: center; }
.en-cell:first-child { border-left: 0; }
.en-cell.is-ex { border-right: .45mm solid #444; }
.en-cell > svg { display: block; height: 100%; }
.en-rows { display: flex; flex-direction: column; }
.en-rows > .en-row + .en-row { margin-top: 1.2mm; }

/* 行首說明（字母的圖、單字、中文…） */
.en-line { display: flex; align-items: center; gap: 2mm; }
.en-lead { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8mm; box-sizing: border-box; text-align: center; line-height: 1.15; }
.en-lead .en-txt { font-size: 4.2mm; }
.en-lead .en-zh { font-size: 3.6mm; color: #333; }
.en-no { flex: none; width: 6mm; font-size: 3.2mm; color: #666; }
.en-pic { display: block; object-fit: contain; flex: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* 沒有圖片時的提示框（中文）：虛線框裡放中文 */
.en-cue { flex: none; box-sizing: border-box; border: .3mm dashed #999; border-radius: 2mm; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1mm; }
.en-cue .en-zh { font-size: 4.4mm; font-weight: 500; }
.en-cue .en-txt { font-size: 3.4mm; color: #555; }

/* ===== 題目卡片（字首音、CVC、大小寫…） ===== */
.en-q { display: flex; flex-direction: column; gap: 1.5mm; box-sizing: border-box; border: .3mm solid #666; border-radius: 2.5mm; padding: 2mm 2.5mm; }
.en-q-head { display: flex; align-items: center; gap: 2mm; font-size: 4.2mm; line-height: 6mm; font-weight: 500; }
.en-q-head .ms-no { font-size: 3.4mm; color: #666; }
.en-q-body { display: flex; align-items: center; gap: 3mm; }
.en-q-body svg { display: block; }
.en-choices { display: flex; gap: 2.5mm; }
.en-choice { box-sizing: border-box; border: .35mm solid #444; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Andika', sans-serif; font-weight: 700; flex: none; }
.en-choice.is-ans { border-color: #c8102e; color: #c8102e; border-width: .6mm; }
.en-box { box-sizing: border-box; border: .35mm solid #444; border-radius: 1.5mm; display: flex; align-items: center; justify-content: center; font-family: 'Andika', sans-serif; font-weight: 700; flex: none; }
.en-box .ms-ans { font-size: inherit; }
.en-big { font-family: 'Andika', sans-serif; font-weight: 700; line-height: 1; }
.en-sound { display: flex; flex-direction: column; align-items: center; gap: 1mm; }
.en-sound i { display: block; width: 4mm; height: 4mm; border-radius: 50%; border: .35mm solid #444; }
.en-plus { font-family: 'Andika', sans-serif; font-weight: 700; font-size: 6mm; color: #666; }

/* ===== 連線（大小寫配對） ===== */
.en-match { display: flex; justify-content: space-between; }
.en-match-col { display: flex; flex-direction: column; gap: var(--gap, 3mm); }
.en-match-item { display: flex; align-items: center; gap: 2mm; font-family: 'Andika', sans-serif; font-weight: 700; }
.en-match-item i { display: block; width: 2.6mm; height: 2.6mm; border-radius: 50%; background: #444; }

/* ===== 單字卡 ===== */
.en-cards { display: grid; gap: 0; }
.en-card { box-sizing: border-box; border: .3mm dashed #888; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2mm; padding: 3mm; text-align: center; }
.en-card .en-txt { font-weight: 700; }
.en-card .en-zh { color: #333; }
.en-table { border-collapse: collapse; width: 100%; }
.en-table th, .en-table td { border: .3mm solid #666; padding: 1.2mm 2mm; font-size: 4mm; line-height: 6mm; vertical-align: middle; }
.en-table th { font-weight: 700; background: none; }
.en-table td.is-en { font-family: 'Andika', sans-serif; font-weight: 700; font-size: 5mm; }
.en-table td.is-chk { text-align: center; }
.en-chk { display: inline-block; width: 4.5mm; height: 4.5mm; border: .35mm solid #444; border-radius: 1mm; vertical-align: middle; }

/* ===== 抄寫四欄（Trace–Copy–Cover–Write） ===== */
.en-tccw { border-collapse: collapse; width: 100%; table-layout: fixed; }
.en-tccw th { border: .3mm solid #666; font-size: 3.6mm; line-height: 5.5mm; font-weight: 700; padding: 0 1mm; }
.en-tccw th small { display: block; font-weight: 400; font-size: 3mm; color: #555; }
.en-tccw td { border: .3mm solid #666; padding: 1mm 1.5mm; vertical-align: middle; }

/* ===== 聽寫 ===== */
.en-dict { display: flex; align-items: center; gap: 2mm; }
.en-dict .en-no { width: 7mm; font-size: 3.8mm; font-weight: 700; color: #333; }
.en-dict-chk { flex: none; width: 14mm; text-align: center; font-size: 3.2mm; color: #666; display: flex; flex-direction: column; align-items: center; gap: .6mm; }
.en-script { border-collapse: collapse; width: 100%; }
.en-script td { border: .3mm solid #999; padding: 1.5mm 2mm; font-size: 4.2mm; line-height: 6mm; }
.en-script td.is-en { font-family: 'Andika', sans-serif; font-weight: 700; font-size: 5.2mm; }
.en-note { font-size: 3.6mm; line-height: 5.5mm; color: #333; border: .3mm solid #999; border-radius: 2mm; padding: 2mm 3mm; }

/* ===== 剪貼的滑條（字族） ===== */
.en-slider { display: flex; align-items: center; gap: 2mm; }
.en-strip { display: flex; flex-direction: column; border: .3mm dashed #888; }
.en-strip span { display: flex; align-items: center; justify-content: center; font-family: 'Andika', sans-serif; font-weight: 700; border-top: .3mm dashed #bbb; }
.en-strip span:first-child { border-top: 0; }

/* ===== 設定面板：選字面板（單字卡、抄寫、看圖寫字、聽寫）===== */
.en-picker { display: flex; flex-direction: column; gap: 8px; }
.en-picker-search { position: relative; }
.en-picker-hits { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.en-hit { text-align: left; border: 1px solid #d9e2ec; background: #fff; border-radius: 8px; padding: 4px 8px; font-size: 13px; font-family: 'Andika', sans-serif; cursor: pointer; }
.en-hit span { color: #7a6f63; font-family: "Noto Sans TC", sans-serif; font-size: 12px; margin-left: 4px; }
.en-hit:hover { background: #f3f8ff; border-color: #2b6cb0; }
.en-picker-theme { border: 1px solid #e3dccf; border-radius: 10px; padding: 6px 8px; }
.en-picker-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.en-picker-head span { color: #7a6f63; margin-right: auto; }
.en-picker-head a { font-size: 12px; }
.en-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.en-chip { border: 1px solid #ccc; background: #f4f4f4; color: #999; border-radius: 999px; padding: 1px 8px; font-size: 12.5px; font-family: 'Andika', sans-serif; text-decoration: line-through; cursor: pointer; line-height: 1.5; }
.en-chip.is-on { background: #e8f1fb; border-color: #9cc0e6; color: #1b4e86; text-decoration: none; }
.en-chip.is-extra { background: #fff3e0; border-color: #f0c27a; color: #8a5a00; }
.en-chip:hover { filter: brightness(.96); }