/* ── 计算秘籍（数学）────────────────────────────────────────
   两页 A4：第 1 页「昨天错在哪」，第 2 页口诀 + 重练。
   文字越少越好，版面自己把方法讲清楚：
   口诀卡里那条斜杠就是「划掉这个 0」的动作，孩子照着在题上划。

   依赖 palette.css + print.css。 */

body{
  margin: 0;
  font-family: var(--font-cn);
  color: #111;
  font-size: 13px;
  background: #888;             /* 屏幕上模拟纸外的桌面 */
}
@media print{ body{ background: #fff; } }

/* ── 页头（两页共用）── */
.head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid #111;
  padding-bottom: 6px;
  margin-bottom: 4mm;
}
.head h1{ font-size: 17px; margin: 0; padding-right: 10px; }
.head .info{ font-size: 12px; white-space: nowrap; }
.head .info span{ margin-left: 10px; }
.blank{ display: inline-block; border-bottom: 1px solid #111; width: 40px; }

.foot{
  margin-top: 5mm;
  text-align: right;
  color: #999;
  font-size: 10.5px;
}

/* ══════ 第 1 页 · 昨天错在哪 ══════
   整页一个 3 列 grid：9 题那组占满一行，剩下的单题组并排一行。 */
.diag{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4mm;
  row-gap: 14mm;
  align-content: start;
}
.diag .head, .diag .tip, .diag .foot{ grid-column: 1 / -1; }

.wrong{ grid-column: 1 / -1; }
.wrong.one{ grid-column: span 1; }
.wrong h2{
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 5mm;
  border-left: 3px solid var(--math);
  padding-left: 6px;
  line-height: 1.3;
}
.wrong h2 .n{ font-weight: 400; color: #999; font-size: 11px; margin-left: 8px; }

.ws{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 9mm;
  column-gap: 4mm;
}
.one .ws{ grid-template-columns: 1fr; }

/* 一条错题：算式 = 你写的（划掉） → 正确的 */
.w{
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
  font-size: 20px;
  white-space: nowrap;
}
.w .e::after{ content: "="; margin-left: 4px; }
.w s{ color: #a0a0a0; text-decoration-thickness: 1.5px; }
.w b{ color: var(--math); font-weight: 700; }
.w b::before{ content: "→"; color: #c4c4c4; font-weight: 400; margin-right: 2.5mm; }

/* 错在哪一步：错的做法灰着摆在正解上面，一眼看出差在哪 */
.compare{
  grid-column: 1 / -1;
  border: 1.5px dashed var(--line);
  border-radius: 3mm;
  padding: 4mm 5mm 2mm;
}
.compare h3{
  font-size: 12px;
  font-weight: 700;
  color: #888;
  margin: 0 0 3.5mm;
}
.compare .row{
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  align-items: baseline;
  column-gap: 5mm;
  margin-bottom: 3.5mm;
}
.compare .ex{ font-size: 18px; font-weight: 700; white-space: nowrap; }
.compare .why{ font-size: 12px; color: #6b7a72; }
.compare .row.bad .ex{ color: #a0a0a0; font-weight: 400; }
.compare .row.bad .why{ color: #a0a0a0; }

.tip{
  border-left: 4mm solid var(--math);
  background: var(--math-bg);
  border-radius: 0 2mm 2mm 0;
  padding: 4mm 5mm;
  font-size: 14px;
  margin-top: 4mm;
}

/* ══════ 第 2 页 · 秘籍 ══════ */

/* 口诀卡：两列 grid，注解齐成一竖行，扫一眼就是三条规则 */
.rule{
  border: 1.5px solid var(--math);
  border-left: 4mm solid var(--math);
  border-radius: 0 3mm 3mm 0;
  padding: 4mm 5mm 3mm;
  margin-bottom: 7mm;
}
.rule .row{
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
  column-gap: 6mm;
  margin-bottom: 3mm;
}
.rule .ex{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .5px;
  white-space: nowrap;
}
.rule .why{ font-size: 11.5px; color: #6b7a72; }

/* 被划掉的 0：淡下去 + 一道斜杠。打印时靠 print.css 的
   print-color-adjust:exact 保住颜色，别删那条。 */
.cut{ position: relative; color: #A9B5AE; }
.cut::after{
  content: "";
  position: absolute;
  left: -2px; right: -2px; top: 46%;
  border-top: 2.5px solid var(--math);
  transform: rotate(-20deg);
}

.verify{
  border-top: 1px dashed var(--line);
  padding-top: 2.5mm;
  font-size: 12.5px;
  color: #333;
}

/* 练习题 */
.grp{ margin-bottom: 8mm; }
.grp h2{
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4mm;
  border-left: 3px solid var(--math);
  padding-left: 6px;
  line-height: 1.2;
}
.grp h2 small{ font-weight: 400; color: #999; font-size: 11px; margin-left: 8px; }

.qs{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 11mm;
  column-gap: 4mm;
}
/* 一题 = 算式 + 一条写答案的横线。字号够大，好在题上划 0 */
.q{
  font-size: 18px;
  white-space: nowrap;
  letter-spacing: .5px;
}
.q i{
  display: inline-block;
  width: 21mm;
  margin-left: 3px;
  border-bottom: 1.2px solid #111;
  text-align: center;
  font-style: normal;
  font-weight: 700;
  color: var(--math);
}

/* ── 手机 / iPad 上的收窄 ─────────────────────────────────
   这两页是 A4 打印单，但家长多半先在微信里点开看一眼。
   默认那套三列在窄屏上排不下：一道「240÷20 = 120 → 12」在 18px 下
   就要 200px，三列光内容 600px+，撑破 390px 的屏幕 —— 于是页面横向
   溢出，白纸只铺了屏幕的一部分，剩下的题目落在灰色桌面上（看着像
   「背景没铺满」，其实是内容跑出纸外了）。

   全部只在 @media screen 里改，打印那条路一个字没动，A4 还是三列。 */

/* iPad 竖屏（768）：三列放得下，纸边窄一点就行 */
@media screen and (max-width: 860px){
  .sheet{ padding: 10mm 6mm; }
}

/* 手机：三列改一列。字号不动 —— 这页是拿来照着讲的，看得清比排得像重要 */
@media screen and (max-width: 620px){
  .diag{ row-gap: 8mm; }
  .diag, .ws, .qs{ grid-template-columns: 1fr; }
  /* 行距是按「三列三行」定的，单列后变成九行，原样留着满屏都是空白 */
  .ws, .qs{ row-gap: 3.5mm; }

  /* 页头两段各占一行：「50 题 对 38 错 12 正确率 76%」是 nowrap 的，
     和标题挤在一行就把纸撑破了 */
  .head{ flex-wrap: wrap; row-gap: 2px; }
  .head h1{ padding-right: 0; }
  .head .info{ white-space: normal; }
  .head .info span:first-child{ margin-left: 0; }

  /* 对比卡和口诀卡里，「算式 + 注解」是一行两列的 grid，两列都是
     max-content —— 一步都压不动，那行「140÷70 → 14÷7=2 → 把 140 的 0
     抄回来 = 20」光自己就要 379px，加上右边的注解直接把纸撑破。
     手机上摞成两行：上面算式，下面注解。
     注意要改的是 .row（真正的 grid），不是 .compare / .rule 本身。 */
  .compare .row, .rule .row{ grid-template-columns: 1fr; row-gap: 1mm; }

  /* max-content 的列宽是「不换行时的宽度」，就算允许折行也压不下来，
     所以上面那条改列定义是必须的，这条只是让折行真的能发生 */
  .compare .ex, .rule .ex, .q, .w{ white-space: normal; }
  .compare .ex{ font-size: 16px; }

  .sheet{ padding: 8mm 5mm; }
}