/* ============================================================
   math.css — 數學元件包樣式（TP.mk 輸出的 tp-mk-* 結構）
   使用時機：任何呼叫 TP.mk 的頁面（考卷、練習、單元預覽）。
   依賴 tokens.css 變數，禁止硬編色碼／字級。
   版位規則與列印規則文件：design/DESIGN.md「數學元件包」一節。
   ============================================================ */

/* ---------- 元件共用變數 ---------- */
:root {
  --tp-mk-rule: var(--tp-ink-soft);       /* 作答格、分數線、表格邊 */
  --tp-mk-rule-strong: var(--tp-ink);     /* 直式橫線、廠字框、作答底線 */
  --tp-mk-box-bg: var(--tp-amber-soft);   /* 作答空格：淺米色底 */
}

/* ---------- 通用狀態 ---------- */
/* 答案：朱砂深楷書（對紙對比足、黑白列印也深） */
.tp-mk-answer {
  color: var(--tp-cinnabar-dark);
  font-weight: var(--tp-fw-bold);
}
/* 空格：淺米色底方框（直式計算內的對位空格由各元件自行覆寫） */
.tp-mk-empty {
  display: inline-block;
  box-sizing: border-box;
  min-width: 1.7em;
  height: 1.45em;
  background: var(--tp-mk-box-bg);
  border: 1px solid var(--tp-mk-rule);
  border-radius: var(--tp-radius-s);
  vertical-align: -0.22em;
}
/* 內嵌 SVG 在手機上等比縮小，不得溢出容器 */
span[class^="tp-mk-"], span[class*=" tp-mk-"] { max-width: 100%; }
svg[class^="tp-mk-"], svg[class*=" tp-mk-"] { max-width: 100%; height: auto; }

/* ---------- 題目容器（單元 html／sheetItem 用） ---------- */
.tp-q {
  display: flex;
  flex-direction: column;
  gap: var(--tp-space-2);
  align-items: flex-start;
  max-width: 100%;
}
.tp-q__stem { font-family: var(--tp-font-kai); line-height: var(--tp-lh-body); }
.tp-q__ans { display: flex; flex-direction: column; gap: var(--tp-space-1); align-items: flex-start; }
.tp-q__fig { max-width: 100%; }

/* ---------- blank 填空方框 ---------- */
.tp-mk-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.1em;
  height: 1.5em;
  padding: 0 0.25em;
  background: var(--tp-mk-box-bg);
  border: 1px solid var(--tp-mk-rule);
  border-radius: var(--tp-radius-s);
  font-family: var(--tp-font-kai);
  vertical-align: -0.25em;
}
.tp-mk-blank.tp-mk-empty { min-width: 2.1em; height: 1.5em; vertical-align: -0.25em; }
.tp-mk-blank--sm { min-width: 1.5em; height: 1.25em; }
.tp-mk-blank--lg { min-width: 3.2em; height: 1.8em; }
.tp-mk-blank[style*="--cols"] { min-width: 0; width: calc(var(--cols, 2) * 1em + 0.5em); }

/* ---------- paren 括號作答（　　） ---------- */
.tp-mk-paren { font-family: var(--tp-font-kai); letter-spacing: 0.05em; }
.tp-mk-paren.tp-mk-empty { background: none; border: none; min-width: 0; height: auto; vertical-align: baseline; }

/* ---------- line 作答線「答：＿＿＿ 個」 ---------- */
.tp-mk-line {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.15em;
  font-family: var(--tp-font-kai);
}
.tp-mk-line__label { font-family: var(--tp-font-sans); font-weight: var(--tp-fw-medium); }
.tp-mk-line__ans {
  display: inline-block;
  min-width: 7em;
  padding: 0 0.3em;
  text-align: center;
  line-height: 1.5;
  border-bottom: 1.5px solid var(--tp-mk-rule-strong);
}
.tp-mk-line__unit { color: var(--tp-ink-soft); }

/* ---------- vcalc 直式加減乘（數字右對齊、每位一格） ---------- */
.tp-mk-vcalc {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-family: var(--tp-font-kai);
  font-size: 1.25em;
  line-height: 1;
  --tp-mk-cell: 1.5em;
}
.tp-mk-vcalc__row { display: flex; align-items: stretch; }
.tp-mk-vcalc__op {
  flex: 0 0 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tp-mk-vcalc__cell {
  flex: 0 0 var(--tp-mk-cell);
  height: 1.55em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tp-mk-vcalc__rule { height: 0.35em; border-bottom: 2px solid var(--tp-mk-rule-strong); }
.tp-mk-vcalc__carrycell { height: 0.8em; }
/* 對位空格：透明 spacer，不畫格 */
.tp-mk-vcalc .tp-mk-empty {
  background: none;
  border: none;
  min-width: 0;
  height: auto;
  border-radius: 0;
  vertical-align: baseline;
}
/* 進位列：小格供書寫進位數 */
.tp-mk-vcalc__carrycell.tp-mk-empty {
  width: 0.95em;
  height: 0.75em;
  margin: auto;
  background: var(--tp-mk-box-bg);
  border: 1px solid var(--tp-mk-rule);
  border-radius: var(--tp-radius-s);
}
/* 答案列：整列淺米格，供書寫答案 */
.tp-mk-vcalc__result .tp-mk-empty {
  width: calc(var(--tp-mk-cell) - 0.3em);
  height: 1.25em;
  margin: auto;
  background: var(--tp-mk-box-bg);
  border: 1px solid var(--tp-mk-rule);
  border-radius: var(--tp-radius-s);
}

/* ---------- longdiv 臺灣直式除法 ---------- */
/* 版位：除數在左、被除數在「廠」字框內、商在上方對齊位數。 */
.tp-mk-longdiv {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--tp-font-kai);
  font-size: 1.25em;
  line-height: 1;
  --tp-mk-cell: 1.5em;
}
.tp-mk-longdiv__row { display: flex; align-items: stretch; }
.tp-mk-longdiv__divisor {
  flex: 0 0 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tp-mk-longdiv__cell {
  flex: 0 0 var(--tp-mk-cell);
  height: 1.55em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tp-mk-longdiv__frame {
  display: flex;
  border-top: 2px solid var(--tp-mk-rule-strong);
  border-left: 2px solid var(--tp-mk-rule-strong);
  border-top-left-radius: var(--tp-radius-s);
}
.tp-mk-longdiv__frame-top,
.tp-mk-longdiv__frame-none { display: flex; }
.tp-mk-longdiv__rule {
  flex: 1;
  height: 0.55em;
  align-self: flex-end;
  border-bottom: 2px solid var(--tp-mk-rule-strong);
}
/* 對位空格：透明 spacer */
.tp-mk-longdiv .tp-mk-empty {
  background: none;
  border: none;
  min-width: 0;
  height: auto;
  border-radius: 0;
  vertical-align: baseline;
}
/* 商列：淺米格供書寫商 */
.tp-mk-longdiv__quotient .tp-mk-empty {
  width: calc(var(--tp-mk-cell) - 0.3em);
  height: 1.25em;
  margin: auto;
  background: var(--tp-mk-box-bg);
  border: 1px solid var(--tp-mk-rule);
  border-radius: var(--tp-radius-s);
}

/* ---------- frac 直式分數 ---------- */
.tp-mk-frac {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
  font-family: var(--tp-font-kai);
  vertical-align: middle;
}
.tp-mk-frac__whole { font-size: 1.05em; }
.tp-mk-frac__stack { display: inline-flex; flex-direction: column; align-items: center; }
.tp-mk-frac__half {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2em;
  padding: 0 0.2em;
  line-height: 1.3;
}
.tp-mk-frac__half.tp-mk-empty { min-width: 1.1em; height: 1.15em; }
.tp-mk-frac__rule { width: 100%; height: 0.12em; border-bottom: 2px solid var(--tp-mk-rule-strong); }

/* ---------- expr 橫式算式 ---------- */
.tp-mk-expr {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.45em;
  row-gap: 0.25em;
  max-width: 100%;
  font-family: var(--tp-font-kai);
  font-size: 1.15em;
}
.tp-mk-expr__item { display: inline-flex; align-items: center; }

/* ---------- choices 選項（直向排列） ---------- */
.tp-mk-choices {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.15em;
  font-family: var(--tp-font-kai);
}
.tp-mk-choices__item { display: inline-flex; align-items: baseline; column-gap: 0.35em; }
.tp-mk-choices__mark { font-weight: var(--tp-fw-bold); }
.tp-mk-choices--circle .tp-mk-choices__mark { color: var(--tp-ink-soft); }
.tp-mk-choices__item.tp-mk-answer,
.tp-mk-choices__item.tp-mk-answer .tp-mk-choices__mark { color: var(--tp-cinnabar-dark); }

/* ---------- fig 圖框 ---------- */
.tp-mk-fig {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-space-2);
  max-width: 100%;
}
.tp-mk-fig__svg { max-width: 100%; }
.tp-mk-fig__svg svg { display: block; max-width: 100%; height: auto; }
.tp-mk-fig__caption {
  font-size: var(--tp-fs-caption);
  color: var(--tp-ink-soft);
  font-family: var(--tp-font-kai);
  text-align: center;
}

/* ---------- clock 類比時鐘（根 class 直接在 svg 上） ---------- */
svg.tp-mk-clock { display: inline-block; }

/* ---------- money 新臺幣幣鈔 ---------- */
.tp-mk-money {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tp-space-1) var(--tp-space-2);
  max-width: 100%;
}
.tp-mk-money__coin,
.tp-mk-money__bill { flex: 0 0 auto; }

/* ---------- numberline 數線 ---------- */
span.tp-mk-numline { display: block; max-width: 100%; }
svg.tp-mk-numline { display: block; }

/* ---------- shade 分數塗色圖 ---------- */
span.tp-mk-shade { display: inline-block; max-width: 100%; }
svg.tp-mk-shade { display: block; }

/* ---------- objects 可數小物件 ---------- */
.tp-mk-objects {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--tp-space-2) var(--tp-space-3);
  max-width: 100%;
}
.tp-mk-objects__row {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-space-1);
}
/* 盤：虛線橢圓圈起「每盤幾個」 */
.tp-mk-objects__group {
  display: inline-flex;
  gap: var(--tp-space-1);
  padding: var(--tp-space-1) var(--tp-space-2);
  border: 1.5px dashed var(--tp-grid-line);
  border-radius: var(--tp-radius-pill);
}
.tp-mk-objects__item { display: inline-flex; }

/* ---------- shape 平面圖形 ---------- */
span.tp-mk-shape { display: inline-block; max-width: 100%; }
svg.tp-mk-shape { display: block; }

/* ---------- table 簡單表格 ---------- */
.tp-mk-table {
  border-collapse: collapse;
  font-family: var(--tp-font-kai);
  font-size: 1.05em;
  background: var(--tp-surface);
}
.tp-mk-table__cell {
  border: 1px solid var(--tp-mk-rule);
  padding: 0.15em 0.9em;
  text-align: center;
  line-height: 1.6;
}
th.tp-mk-table__cell {
  background: var(--tp-paper-deep);
  font-family: var(--tp-font-sans);
  font-weight: var(--tp-fw-bold);
}

/* ============================================================
   列印（A4，黑白亦清楚）
   1. 所有格線轉深墨；空格轉白底深框。
   2. 塗色圖、時鐘、幣鈔保留色彩（print-color-adjust: exact），
      陰影線條改深墨，黑白影印仍看得出塗了幾份。
   3. 答案維持朱砂深，黑白列印即深灰黑，夠清楚。
   ============================================================ */
@media print {
  :root {
    --tp-mk-rule: #1F1B14;
    --tp-mk-rule-strong: #1F1B14;
  }
  .tp-mk-empty,
  .tp-mk-blank,
  .tp-mk-vcalc__carrycell.tp-mk-empty,
  .tp-mk-vcalc__result .tp-mk-empty,
  .tp-mk-longdiv__quotient .tp-mk-empty {
    background: var(--tp-surface);
    border-color: #1F1B14;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  svg.tp-mk-money,
  svg.tp-mk-shade,
  svg.tp-mk-clock {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .tp-mk-shade defs line { stroke: #1F1B14; }
}

/* ---------- mathkit-figs 考卷圖形元件（mathkit-figs.js） ---------- */
.tp-mk-tally,.tp-mk-barchart,.tp-mk-linechart,.tp-mk-piechart,.tp-mk-angle,.tp-mk-ruler,.tp-mk-grid,.tp-mk-cuboid,.tp-mk-net,.tp-mk-sector{display:inline-block;max-width:34rem;vertical-align:middle;color:var(--tp-ink,#3B352C);}
.tp-mk-barchart__svg,.tp-mk-linechart__svg,.tp-mk-angle__svg,.tp-mk-ruler__svg,.tp-mk-grid__svg,.tp-mk-cuboid__svg,.tp-mk-net__svg,.tp-mk-sector__svg,.tp-mk-piechart__svg{width:100%;height:auto;}
.tp-mk-barchart__note,.tp-mk-linechart__note,.tp-mk-piechart__title{display:block;text-align:center;}
.tp-mk-tally__table{border-collapse:collapse;}
.tp-mk-tally__table th,.tp-mk-tally__table td{border:1px solid currentColor;padding:.2em .6em;text-align:center;}
.tp-mk-tally__marks{white-space:normal;line-height:1;}
.tp-mk-tally__svg{display:inline-block;vertical-align:middle;}
.tp-mk-empty{display:inline-block;min-width:2em;border-bottom:2px solid currentColor;}