/* ============================================================
   zhuyin.css — 注音字格系統（直排注音）
   與 zhuyin.js 搭配使用；JS 產生的 class 全部 tpz- 前綴。
   排版規則（沿用「字在學」考卷做法）：
   ・田字格外框 + 米字輔助線（虛線）
   ・注音直排於格子右側，由上到下
   ・二、三、四聲調號放在「最後一個注音符號」的右上方
   ・輕聲點（˙）放在整欄最上方中央
   ============================================================ */

/* ---------- 字＋注音 的組合容器（cell() 產生） ---------- */
.tpz-wrap {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--tpz-size) * 0.08);
  vertical-align: middle;
}

/* ---------- 田字格 ---------- */
.tpz-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tpz-size);
  height: var(--tpz-size);
  background: var(--tp-surface);
  border: 1.5px solid var(--tpz-cell-border);
  border-radius: var(--tp-radius-s);
  overflow: hidden;
  flex-shrink: 0;
}

.tpz-cell__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.tpz-cell__char {
  position: relative;
  z-index: 1;
  font-family: var(--tp-font-kai);
  font-size: calc(var(--tpz-size) * 0.58);
  line-height: 1;
  color: var(--tp-ink);
  user-select: none;
}

/* 狀態 */
.tpz-cell--current  { --tpz-grid: var(--tp-amber); border-color: var(--tp-amber); }
.tpz-cell--upcoming { --tpz-cell-border: var(--tp-grid-line); }
.tpz-cell--upcoming .tpz-cell__char { color: var(--tp-ink-faint); }
.tpz-cell--blank    { --tpz-cell-border: var(--tp-ink-soft); }

/* 考卷空格：留白，只有淡淡的 □ 提示 */
.tpz-cell--blank .tpz-cell__char {
  color: var(--tp-ink-faint);
  opacity: 0.35;
  font-size: calc(var(--tpz-size) * 0.4);
}

/* 答案顯示：朱砂字 */
.tpz-cell--answer .tpz-cell__char { color: var(--tp-cinnabar-dark); }
.tpz-cell--answer { --tpz-grid: var(--tp-grid-line); }

/* ---------- 直排注音欄 ---------- */
.tpz-col {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  font-family: var(--tp-font-kai);
  font-size: calc(var(--tpz-size) * 0.27);
  line-height: var(--tp-lh-zhuyin);
  letter-spacing: 0;
  color: var(--tp-ink);
  user-select: none;
  flex-shrink: 0;
}

.tpz-col--cinnabar { color: var(--tp-cinnabar-dark); }
.tpz-col--faint    { color: var(--tp-ink-faint); }

.tpz-col__sym {
  position: relative;
  display: block;
  line-height: var(--tp-lh-zhuyin);
}

/* 二、三、四聲調號：最後一個符號的右上方 */
.tpz-col__tone {
  position: absolute;
  right: -0.62em;
  top: -0.28em;
  font-size: 0.95em;
  line-height: 1;
}

/* 輕聲點：整欄最上方中央 */
.tpz-col__light {
  position: absolute;
  top: -0.8em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9em;
  line-height: 1;
}

/* ---------- 詞組（多字並列） ---------- */
.tpz-group {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--tpz-size) * 0.18);
}

/* ---------- 句子 ---------- */
/* 句子裡的字格與直排注音需要較大的行高才不會相撞 */
.tpz-sentence {
  font-family: var(--tp-font-kai);
  font-size: calc(var(--tpz-size) * 0.5);
  line-height: 2.7;
  letter-spacing: 0.06em;
  color: var(--tp-ink);
}

.tpz-sentence .tpz-wrap {
  margin-inline: 0.08em;
}

/* ---------- 橫排小字標注 ruby（按鈕、標籤用） ---------- */
.tpz-ruby {
  font-family: var(--tp-font-kai);
}

.tpz-ruby rt {
  font-family: var(--tp-font-kai);
  font-size: 0.52em;
  color: var(--tp-ink-soft);
  letter-spacing: 0;
  user-select: none;
}

/* ---------- 尺寸 ---------- */
.tpz--sm    { --tpz-size: 40px; }
.tpz--md    { --tpz-size: 56px; }
.tpz--lg    { --tpz-size: 88px; }
.tpz--xl    { --tpz-size: 120px; }

/* 考卷專用：14mm 字格（注音與句字依 --tpz-size 比例自動換算） */
.tpz--print { --tpz-size: 14mm; }