/* ==========================================================================
   单词默写表 · A4 横向打印版式（引擎自带样式）
   移植自译林学习系统 css/style.css 的 .dsheet / .dtab / .dt-* 段落，
   两站共用；除色块图例外不依赖任何一站的主题变量。
   页面侧只需保证：预览容器上有 --dsheet-zoom，打印时要隐藏的元素加 .ds-noprint
   ========================================================================== */

/* ---------- 一张 A4 横向默写纸 ---------- */
.dsheet {
  zoom: var(--dsheet-zoom, 1);
  display: flex;
  flex-direction: column;
  width: 281mm;
  min-height: 194mm;
  margin: 0 auto 14px;
  padding: 4mm 3mm;
  border: 1px solid #dfe5ef;
  border-radius: 4px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 6px 18px rgba(37, 55, 90, .12);
}
.dsheet-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8mm;
  padding-bottom: 1.5mm;
  border-bottom: .3mm solid #cbd5e1;
}
.dsheet-id { display: flex; align-items: baseline; gap: 3mm; min-width: 0; }
.dsheet-id b { color: #2f4a7a; font-size: 5mm; letter-spacing: .3mm; }
.dsheet-id span { color: #4b5563; font-size: 3.4mm; font-weight: 600; }
.dsheet-name { color: #6b7280; font-size: 3.2mm; font-weight: 700; letter-spacing: .5mm; }
.dsheet-meta { display: flex; gap: 5mm; color: #374151; font-size: 3.4mm; font-weight: 700; white-space: nowrap; }
.dsheet-meta i { display: inline-block; width: 22mm; border-bottom: .3mm solid #9ca3af; }
.dsheet-meta i.short { width: 10mm; }
.dsheet-body { display: grid; gap: 6mm; flex: 1; margin-top: 3mm; }
.dsheet-body.cols-2 { grid-template-columns: 1fr 1fr; }
.dsheet-body.cols-1 { grid-template-columns: 1fr; }
.dsheet-ft {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  margin-top: 2mm;
  padding-top: 1.5mm;
  border-top: .2mm solid #d1d5db;
  color: #9ca3af;
  font-size: 2.8mm;
}

/* ---------- 表格 ---------- */
.dtab { width: 100%; table-layout: fixed; border-collapse: collapse; align-self: start; }
.dtab th, .dtab td { border: .2mm solid #cbd5e1; }
.dtab th {
  padding: 1mm 0;
  background: #eef3fb;
  color: #40567c;
  font-size: 2.9mm;
  font-weight: 700;
}
/* 提示列表头：文字随提示项数收紧，始终一行，不撑宽也不折行 */
.dtab th.dt-hint { padding-left: .8mm; padding-right: .8mm; white-space: nowrap; overflow: hidden; }
.dtab th.dt-hint.parts-2 { font-size: 2.7mm; letter-spacing: -.05mm; }
.dtab th.dt-hint.parts-3 { font-size: 2.4mm; letter-spacing: -.1mm; }
/* 列宽由 JS 写进 <colgroup>（promptCols / writeWidthMm），这里只管样式 */
.dtab td { height: var(--dt-row, 10mm); padding: 0 1.2mm; vertical-align: middle; }
.dsheet-body.cols-1 .dtab td { height: var(--dt-row, 12mm); }
.dtab td.dt-no { color: #94a3b8; font-size: 3mm; text-align: center; }
.dtab td.dt-hint { line-height: 1.25; }
.dtab td.dt-h-cn { text-align: center; }
.dtab td.dt-h-enipa { overflow-wrap: anywhere; }
.dtab td.dt-h-enipa .dt-en { font-size: 3.4mm; }
.dtab td.dt-h-enipa .dt-ipa { color: #6b7280; font-size: 2.7mm; }
.dtab td.dt-h-ipa { word-break: break-all; }
.dtab td.dt-h-ipa .dt-ipa { color: #6b7280; font-size: 2.9mm; }
.dtab td.dt-h-en { overflow-wrap: anywhere; }
.dt-cn { display: block; color: #1f2937; font-size: 3.4mm; font-weight: 600; }
.dt-ipa { display: block; color: #94a3b8; font-size: 2.6mm; }
.dt-en {
  display: block;
  color: #1f2937;
  font-family: "Segoe UI", "Century Gothic", system-ui, sans-serif;
  font-size: 3.6mm;
  font-weight: 600;
}
.dtab tr.dt-blank td.dt-no { color: #d1d5db; }
/* 提示列同时显示英文 / 音标 / 中文时的排版 */
.dtab.hint-wide .dt-cn { font-size: 3mm; }
.dtab.hint-wide .dt-en { font-size: 3.4mm; }

/* 行高由 JS 按行数算好写进 --dt-row，表头恒为 6.6mm；每 5 行加一条粗分隔线便于对照 */
.dsheet-body .dtab { height: auto; }
.dtab tbody tr { height: auto; }
.dtab thead tr, .dtab th { height: 6.6mm; }
.dtab tbody tr:nth-child(5n) td { border-bottom: .4mm solid #aebbcd; }
.dtab tbody tr:last-child td { border-bottom: .2mm solid #cbd5e1; }

/* 书写区：四线三格 / 单线 / 空格 */
.dt-write { position: relative; }
.dt-line { display: block; position: relative; height: var(--dt-line, 7.2mm); }
.line-four .dt-line {
  border-top: .2mm solid #a9bcd8;
  border-bottom: .2mm solid #a9bcd8;
}
.line-four .dt-line::before,
.line-four .dt-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
}
.line-four .dt-line::before { top: calc(var(--dt-line, 7.2mm) / 3); border-top: .2mm dashed #cddaea; }
.line-four .dt-line::after { top: calc(var(--dt-line, 7.2mm) * 2 / 3); border-top: .25mm solid #7f97bb; }
.line-single .dt-line { border-bottom: .25mm solid #a9bcd8; height: calc(var(--dt-line, 7.2mm) * .85); }
.line-none .dt-line { border: 0; }

/* ---------- 拼读色块 ---------- */
.dp {
  display: inline-block;
  padding: 0 2px;
  border-radius: 4px;
  font-weight: 700;
}
.dt-en .dp { padding: 0 .5mm; border-radius: .8mm; }
.dp-vowel  { background: #ffe2b8; color: #8a4b00; }   /* 单元音字母 */
.dp-vteam  { background: #ffcf9a; color: #7a3d00; }   /* 元音字母组合 */
.dp-digraph{ background: #cfe3ff; color: #14458c; }   /* 辅音字母组合 */
.dp-blend  { background: #e0d5ff; color: #4a2f9c; }   /* 辅音连缀 */
.dp-silent { background: #eceff3; color: #9aa4b2; text-decoration: line-through; }
.dp-cons   { background: transparent; color: #1f2937; }
.dsheet-legend { display: flex; gap: 2mm; align-items: center; }
.dsheet-legend .dp {
  display: inline-block;
  padding: .2mm 1.2mm;
  border-radius: .8mm;
  font-size: 2.6mm;
  font-style: normal;
  font-weight: 700;
}

/* ---------- 打印：A4 横向，只输出默写纸 ---------- */
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  html, body { background: #fff !important; }
  .ds-noprint { display: none !important; }
  .ds-preview { margin: 0 !important; padding: 0 !important; }
  .dsheet {
    zoom: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 186mm;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .dsheet:last-child { break-after: auto; page-break-after: auto; }
  .dtab { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dtab th { background: #eef3fb !important; }
  .dt-en .dp, .dsheet-legend .dp {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}