/* 教具工坊共用：分栏 / 导出按钮始终可点，预览缩放不挡点击。 */
.workshop {
  position: sticky;
  top: 52px;
  z-index: 36;
  background: rgba(255, 253, 245, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.workshop .tab,
.workshop .btn,
.workshop [data-export] {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.workshop .tab,
.workshop .btn[data-export] {
  min-height: 44px;
}
.topbar .pill[data-export-pill="1"] {
  cursor: pointer;
  border: 0;
}
.sheet-frame {
  overflow: hidden;
}
.hint-print {
  background: #fff8e1;
  border: 2px dashed #ffcc80;
  border-radius: 16px;
  padding: 10px 12px;
  font-size: 1.05rem;
  color: #ef6c00;
  margin: 8px 0 0;
}
.hint-print a {
  color: #6a1b9a;
  font-weight: 700;
}

@media print {
  .workshop { position: static !important; }
}

/* 虚线页框：内容必须缩在虚线内侧，不能压线、穿框。
   各课 book-playful.css 会把 padding 收到 12mm、虚线 inset 收到 7mm，
   批量页又把各课 CSS 插在后面，所以这里用 !important 锁死。 */
.pack-book .sheet.book-sheet,
.pack-book .sheet.book-playful {
  overflow: hidden !important;
  isolation: isolate;
}
.pack-book .sheet.book-sheet {
  padding: 18mm 20mm 18mm !important;
}
.pack-book .sheet.book-playful {
  padding: 16mm 18mm 18mm !important;
}
.pack-book .sheet.book-sheet::after,
.pack-book .sheet.book-playful::after {
  content: "";
  position: absolute;
  inset: 8mm !important;
  z-index: 6 !important;
  pointer-events: none;
  box-sizing: border-box;
}
.pack-book .sheet.book-playful::after {
  border: 2pt dashed rgba(255, 183, 77, 0.7);
  border-radius: 5mm;
}
.pack-book .sheet.book-playful img,
.pack-book .sheet.book-sheet img {
  max-width: 100%;
}

/* 2x2 Listen and chant：铺满虚线内侧，图不穿框 */
.pack-book .bk-vocab {
  flex: 1 1 0;
  min-height: 0;
  max-width: 100%;
}

/* 一行四卡（Ff 等）：只按内容高度，不要被拉成超高空卡片 */
.pack-book .bk-chant-row {
  flex: 0 1 auto !important;
  min-height: 0;
  max-width: 100%;
}
.pack-book .bk-chant-girl {
  flex-shrink: 0;
  margin-top: 4mm;
}

.pack-book .bk-vocab .pic-tile,
.pack-book .bk-chant-row .pic-tile,
.pack-book .bk-vocab .tile {
  min-height: 0;
  overflow: hidden !important;
  box-sizing: border-box;
}
.pack-book .bk-vocab .pic-tile img,
.pack-book .bk-chant-row .pic-tile img,
.pack-book .bk-vocab .tile img {
  flex: 1 1 0;
  min-height: 0 !important;
  max-height: 46mm !important;
  max-width: 100% !important;
  width: auto;
  height: auto;
  object-fit: contain;
}
.pack-book .bk-foot {
  position: relative;
  z-index: 1;
}

/*
 * 四线格 HTML 回退（canvas 未贴线时也要对齐）：
 * 文字底边落在第三线（基线），大写占顶线→基线，小写坐中线→基线。
 * 各课 print.css 里 align-items:center + translateY 会把字母漂在虚线上。
 */
.stave-line > .trace-word,
.pack-book .stave-line > .trace-word {
  inset: auto 6mm auto 14mm !important;
  top: 25% !important;
  height: 33.5% !important;
  bottom: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  transform: none !important;
  line-height: 1 !important;
  font-size: calc(var(--row-h) * 0.50) !important;
}
.stave-line > .trace-word.center,
.pack-book .stave-line > .trace-word.center {
  left: 3mm !important;
  right: 3mm !important;
  justify-content: center !important;
}
.stave-line .letter-cap,
.pack-book .stave-line .letter-cap {
  transform: none !important;
  font-size: 1em !important;
}
.stave-line .letter-small,
.pack-book .stave-line .letter-small {
  transform: none !important;
  font-size: 0.75em !important;
}
.stave-line .letter-pair,
.pack-book .stave-line .letter-pair {
  align-items: baseline !important;
  transform: none !important;
}
.stave-line.is-fitted > .trace-word,
.pack-book .stave-line.is-fitted > .trace-word {
  opacity: 0 !important;
}

/*
 * 批量导出页会把各课 print.css 插到后面，旧的「四图一行」会盖掉 Ff 的左右对照。
 * 用 !important 锁死：左图 | 连线区 | 右书写框。
 */
.pack-book .bk-match-write,
.pack-book .bk-match-write-split {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) 12mm minmax(0, 1.25fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 4mm !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: stretch !important;
}
.pack-book .bk-mw-pics,
.pack-book .bk-mw-boxes {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 4mm !important;
  min-width: 0 !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}
.pack-book .bk-mw-mid {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 3mm;
  background-image: radial-gradient(#cfc6b6 0.7pt, transparent 0.8pt);
  background-size: 3.6mm 3.6mm;
  background-position: center;
}
.pack-book .bk-mw-pic,
.pack-book .bk-mw-box {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  align-items: center !important;
  background: #fff;
  padding: 2.5mm 3mm;
  box-sizing: border-box;
}
.pack-book .bk-mw-pic {
  grid-template-columns: 8mm minmax(0, 1fr) !important;
  gap: 3mm !important;
}
.pack-book .bk-mw-box {
  grid-template-columns: 7mm 15mm minmax(28mm, 1fr) !important;
  gap: 2.5mm !important;
}
.pack-book .bk-mw-hint {
  width: 15mm;
  height: 15mm;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.pack-book .bk-mw-box .stave-line {
  --row-h: 18mm;
  width: 100% !important;
  min-width: 28mm !important;
  height: var(--row-h) !important;
  min-height: 16mm !important;
  max-height: 22mm !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.pack-book .bk-mw-pic img,
.pack-book .bk-mw-ghost {
  max-height: 38mm;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  position: static !important;
  opacity: 1 !important;
}
.pack-book .bk-ff-hub,
.pack-book .bk-gg-hub {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6mm;
  align-items: start;
  flex: 1 1 0;
  min-height: 0;
  margin-top: 4mm;
}
.pack-book .bk-ff-hub-pics,
.pack-book .bk-gg-hub-pics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm;
  min-height: 0;
}
.pack-book .bk-ff-hub-pic,
.pack-book .bk-gg-hub-pic {
  text-align: center;
  min-width: 0;
}
.pack-book .bk-ff-hub-pic img,
.pack-book .bk-gg-hub-pic img,
.pack-book .bk-mw-pic img,
.pack-book .bk-copy-meta img,
.pack-book .bk-match-row img,
.pack-book .bk-opt img,
.pack-book .pic-tile img {
  max-height: 36mm;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pack-book .bk-ff-hub-pic img,
.pack-book .bk-gg-hub-pic img {
  max-height: 24mm;
}
.pack-book .bk-ff-hub-pic,
.pack-book .bk-gg-hub-pic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1mm;
}

/* 复习册：听音写字母 / 圈字母 / 四格抄写 */
.pack-book .bk-wb-letter-pick {
  display: flex;
  flex-direction: column;
  gap: 5mm;
  flex: 1 1 0;
  min-height: 0;
}
.pack-book .bk-wb-letter-cell {
  display: grid;
  grid-template-columns: 8mm 28mm minmax(0, 1fr);
  gap: 4mm;
  align-items: center;
  min-height: 0;
}
.pack-book .bk-wb-letter-cell img {
  max-height: 24mm;
  max-width: 28mm;
  width: auto;
  object-fit: contain;
}
.pack-book .bk-ghijkl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3mm;
  min-height: 0;
}
.pack-book .bk-ghijkl-cell {
  text-align: center;
  min-width: 0;
}
.pack-book .bk-ghijkl-cell img,
.pack-book .bk-ghijkl-d-row img {
  max-height: 22mm;
  max-width: 100%;
  object-fit: contain;
}
.pack-book .bk-ghijkl-d {
  display: flex;
  flex-direction: column;
  gap: 3mm;
  flex: 1 1 0;
  min-height: 0;
}
.pack-book .bk-ghijkl-d-row {
  display: flex;
  align-items: center;
  gap: 3mm;
  min-height: 0;
}
.pack-book .bk-write-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2mm;
  min-height: 0;
}
.pack-book .bk-write-cell {
  text-align: center;
  min-width: 0;
}
.pack-book .bk-write-cell img {
  width: 16mm;
  height: 16mm;
  object-fit: contain;
}

/* 各字母教材页共用：大图限高，避免书写框被挤出 A4（overflow:hidden 裁切） */
.pack-book .letter-models {
  margin-bottom: 3mm;
  min-height: 0;
}
.pack-book .letter-models img,
.pack-book .model-card img {
  max-height: 36mm;
  width: auto;
  object-fit: contain;
}
.pack-book .bk-p-sound {
  display: flex;
  flex-direction: column;
  gap: 5mm;
  flex: 1 1 0;
  min-height: 0;
}
.pack-book .bk-p-sound-row {
  display: flex;
  justify-content: center;
  gap: 8mm;
  flex: 1 1 0;
  min-height: 0;
}
.pack-book .bk-p-sound-pic {
  width: 42mm;
  text-align: center;
}
.pack-book .bk-p-sound-pic img,
.pack-book .bk-wb-cross-cell img,
.pack-book .bk-wb-circle-cell img,
.pack-book .bk-wb-six-item img,
.pack-book .bk-ee-pic img,
.pack-book .bk-ee-write-item img,
.pack-book .bk-watch-face img,
.pack-book .bk-yy-pic-cell img,
.pack-book .bk-connect-map img {
  max-height: 28mm;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.pack-book .bk-ee-match {
  display: flex;
  flex-direction: column;
  gap: 4mm;
  flex: 1 1 0;
  min-height: 0;
}
.pack-book .bk-ee-match-row {
  display: grid;
  grid-template-columns: 16mm 1fr 42mm;
  gap: 3mm;
  align-items: center;
  min-height: 0;
}
.pack-book .bk-ee-pics {
  display: flex;
  gap: 4mm;
  justify-content: center;
}
.pack-book .bk-ee-pic { text-align: center; width: 28mm; }
.pack-book .bk-ee-write-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4mm;
  align-items: start;
}
.pack-book .bk-ee-write-item { text-align: center; min-width: 0; }
.pack-book .bk-wb-cross,
.pack-book .bk-wb-circle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
}
.pack-book .bk-connect-map {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pack-book .bk-connect-map img { max-height: 150mm; }
.pack-book .bk-wb-six {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5mm;
  align-items: center;
  flex: 1 1 0;
  min-height: 0;
}
.pack-book .bk-wb-six-center { grid-column: 1 / -1; }
.pack-book .bk-wb-six-item {
  display: flex;
  align-items: center;
  gap: 3mm;
  min-width: 0;
}
.pack-book .bk-mnopqr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4mm;
}
.pack-book .bk-mnopqr-cell img {
  max-height: 24mm;
  max-width: 100%;
  object-fit: contain;
}
.pack-book .bk-lw-pic img,
.pack-book .bk-song-letter img,
.pack-book .bk-find-cell img,
.pack-book .bk-gift-can img {
  max-height: 26mm;
  max-width: 100%;
  object-fit: contain;
}

/* Game 3 · Odd one out：三图一行。
   单课复制时 class 曾被字母替换误改成 oee-row / off-row / ogg-row，
   网格失效后图会竖排挤出 A4。这里用共用选择器兜底。 */
.odd-row,
.off-row,
.ogg-row,
.oee-row {
  display: grid;
  grid-template-columns: 8mm minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 3mm;
  align-items: center;
  margin: 0 0 3.5mm;
  min-width: 0;
  width: 100%;
}
.odd-row > .n,
.off-row > .n,
.ogg-row > .n,
.oee-row > .n {
  font-size: 16pt;
  color: #e53935;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.odd-row .tile,
.off-row .tile,
.ogg-row .tile,
.oee-row .tile {
  min-width: 0;
  overflow: hidden;
}
.odd-row .tile img,
.off-row .tile img,
.ogg-row .tile img,
.oee-row .tile img {
  height: 28mm;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}
.odd-row .tile .lab,
.off-row .tile .lab,
.ogg-row .tile .lab,
.oee-row .tile .lab {
  font-size: 13pt;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.odd-row .tile.t0,
.off-row .tile.t0,
.ogg-row .tile.t0,
.oee-row .tile.t0 { background: #fff3e0; }
.odd-row .tile.t1,
.off-row .tile.t1,
.ogg-row .tile.t1,
.oee-row .tile.t1 { background: #e8f5e9; }
.odd-row .tile.t2,
.off-row .tile.t2,
.ogg-row .tile.t2,
.oee-row .tile.t2 { background: #e3f2fd; }

/*
 * 教具卡前三页：大写 / 小写 / 字母对海报。
 * 各课 print.css 把 .letter-poster 写成固定 250mm + 118mm 白字；
 * 打印加速样式又会把底色压掉。这里锁高度与换行，底色由 print-fast 在 @media print 里补回。
 */
.sheet:has(> .letter-poster) {
  display: flex;
  flex-direction: column;
}
.letter-poster {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4mm 4mm 16mm;
  gap: 5mm;
}
.letter-poster .giant {
  font-size: 72mm;
  line-height: 1;
  max-width: 170mm;
  overflow: visible;
  padding: 4mm 0 22mm;
}
.letter-poster .sub {
  position: relative;
  z-index: 1;
  max-width: 170mm;
  margin-top: 0;
  padding: 0 4mm;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.letter-poster img {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}