/* ============================================================
   review-focus.css — /kids/review/ 作答專注模式與作答元件
   載入順序：tp3.css → math.css → zhuyin.css → tp3-art.css
             → review-print.css → review-focus.css
   ・進入作答（body.tpr-focus）隱藏全站頁首、頁尾、步驟條，
     只留：離開、題號與進度、建議時間。
   ・上一題／下一題與螢幕數字鍵盤固定在畫面下方同一條底欄，
     互不遮蓋；內容區以 body padding-bottom 讓位（JS 量高）。
   ============================================================ */

/* ---------- 專注模式：隱藏全站頁首頁尾與步驟條 ---------- */
body.tpr-focus .tp3-header,
body.tpr-focus .tp3-footer,
body.tpr-focus #tpr-stepnav {
  display: none !important;
}
body.tpr-focus .tp3-main { padding-top: 0; }
body.tpr-focus #step-answer { margin-block: 0; }
body.tpr-focus { overflow-x: hidden; }

/* ---------- 頂列：離開、進度、建議時間 ---------- */
.tpr-focusbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  background: var(--tp-paper, #faf6ee);
  border-bottom: 1.5px solid var(--tp-line, #d8cfbc);
}
.tpr-focusbar__quit {
  flex-shrink: 0;
  min-height: 48px;
  padding: 6px 12px;
  font-size: 17px;
}
.tpr-focusbar__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tpr-focusbar__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 手機只留：離開、題號與進度、建議時間（標題收到螢幕閱讀器） */
@media (max-width: 719px) {
  .tpr-focusbar__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}
.tpr-focusbar__progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tpr-focusbar__progress .tp3-progress {
  flex: 1;
  min-width: 48px;
  height: 10px;
  margin: 0;
}
.tpr-focusbar__progresstext {
  font-size: 17px;
  color: var(--tp-ink-soft, #6b6250);
  white-space: nowrap;
}
.tpr-timehint {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 17px;
  color: var(--tp-ink-soft, #6b6250);
}
.tpr-timehint__hide {
  min-width: 48px;
  min-height: 48px;
  padding: 4px 8px;
  font-size: 15px;
}
.tpr-viewtoggle { display: none; gap: 0; flex-shrink: 0; }
@media (min-width: 900px) { .tpr-viewtoggle { display: inline-flex; } }
.tpr-viewtoggle button { min-height: 48px; padding: 8px 16px; font-size: 16px; border: 1.5px solid var(--tp-line, #d8cfbc); background: var(--tp-surface, #fff); cursor: pointer; }
.tpr-viewtoggle button:first-child { border-radius: 12px 0 0 12px; }
.tpr-viewtoggle button:last-child { border-radius: 0 12px 12px 0; border-left: none; }
.tpr-viewtoggle button[aria-pressed="true"] { background: var(--tp-ink, #3b352c); color: var(--tp-surface, #fff); border-color: var(--tp-ink, #3b352c); }

/* ---------- 題號面板：橫向可捲一列＋交卷鈕；桌機可換行 ---------- */
.tpr-qnavwrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}
.tpr-qnav {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  padding: 2px;
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) { .tpr-qnav { flex-wrap: wrap; overflow-x: visible; } }
.tpr-qnav button {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1.5px solid var(--tp-line, #d8cfbc);
  background: var(--tp-surface, #fff);
  font-size: 17px;
  cursor: pointer;
  touch-action: manipulation;
}
/* 三態：目前＝粗框、已答＝實心、未答＝白底（預設） */
.tpr-qnav button[aria-current] { border-color: var(--tp-ink, #3b352c); outline: 2.5px solid var(--tp-ink, #3b352c); outline-offset: 1px; font-weight: 700; }
.tpr-qnav button.tpr-done { background: var(--tp-ink, #3b352c); color: var(--tp-surface, #fff); }
.tpr-qnav button.tpr-done[aria-current] { outline-color: var(--tp-cinnabar-dark, #a5402d); }
.tpr-qnav button:focus-visible { outline: 3px solid var(--tp-amber, #d9a13b); outline-offset: 2px; }
.tpr-qnav__submit { flex-shrink: 0; min-height: 48px; }

/* ---------- 組卷提示細橫條（可關閉，不長期佔作答空間） ---------- */
.tpr-papernote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 4px 4px 12px;
  border: 1.5px solid var(--tp-line, #d8cfbc);
  border-radius: 12px;
  background: var(--tp-paper-deep, #f3ecdd);
  font-size: 17px;
}
.tpr-papernote span { flex: 1; min-width: 0; }
@media (max-width: 599px) {
  .tpr-papernote span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.tpr-papernote button { flex-shrink: 0; min-height: 48px; padding: 4px 10px; font-size: 17px; }

/* ---------- 題目卡片 ---------- */
#step-answer .tpr-q { font-size: 20px; line-height: 1.7; }
.tpr-q__meta { font-size: 15px; color: var(--tp-ink-soft, #6b6250); margin: 0 0 4px; }
.tpr-q__prompt { margin: 6px 0 12px; font-size: 20px; overflow-wrap: anywhere; }
.tpr-q__prompt svg { max-width: 100%; height: auto; }
.tpr-q__prompt img { max-width: 100%; height: auto; }

/* 線上作答只留一個答案框：卷面作答線／答案框不顯示成可填。
   （題幹中間的填空 .tp-mk-blank 是題目的一部分，保留。） */
#answer-body .tp-q__ans,
#answer-body .tp-mk-line,
#answer-body .tp-mk-vcalc__result,
#answer-body .tp-mk-longdiv__quotient {
  display: none !important;
}

/* ---------- 選擇題 ---------- */
.tpr-options { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.tpr-options > .tpr-opt { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1.5px solid var(--tp-line, #d8cfbc); border-radius: 12px; background: var(--tp-surface, #fff); cursor: pointer; min-height: 52px; font-size: 19px; }
.tpr-options > .tpr-opt input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--tp-cinnabar-dark, #a5402d); }
.tpr-options > .tpr-opt:has(input:checked) { border-color: var(--tp-ink, #3b352c); background: var(--tp-paper-deep, #f3ecdd); font-weight: 700; }

/* ---------- 作答格（唯讀輸入框，由螢幕鍵盤或實體鍵盤輸入） ---------- */
.tpr-fieldbtn { display: inline-block; width: 8em; max-width: 100%; padding: 8px 14px; border: 1.5px solid var(--tp-line, #d8cfbc); border-radius: 10px; background: var(--tp-surface, #fff); font-size: 22px; text-align: center; min-height: 52px; box-sizing: border-box; }
.tpr-fieldrow { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.tpr-fieldrow .tpr-fieldbtn { flex: 0 1 auto; }
.tpr-fieldrow__unit { white-space: nowrap; font-size: 19px; }
.tpr-fieldbtn[readonly] { cursor: pointer; }
.tpr-fieldbtn.tpr-active { border-color: var(--tp-cinnabar-dark, #a5402d); outline: 3px solid var(--tp-amber, #d9a13b); outline-offset: 1px; }
.tpr-fieldbtn:focus-visible { outline: 3px solid var(--tp-amber, #d9a13b); outline-offset: 1px; }
.tpr-frac { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.tpr-frac__stack { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.tpr-frac__rule { width: 100%; border-bottom: 2px solid var(--tp-ink, #3b352c); }
.tpr-frac .tpr-fieldbtn { width: 3.4em; min-width: 0; font-size: 20px; padding: 6px 10px; min-height: 48px; }

/* ---------- 手寫題自評 ---------- */
.tpr-selfmark { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.tpr-selfmark button { min-height: 56px; padding: 12px 22px; font-size: 19px; border-radius: 12px; border: 1.5px solid var(--tp-line, #d8cfbc); background: var(--tp-surface, #fff); cursor: pointer; }
.tpr-selfmark button[aria-pressed="true"] { background: var(--tp-ink, #3b352c); color: var(--tp-surface, #fff); border-color: var(--tp-ink, #3b352c); font-weight: 700; }
.tpr-answerbox { margin-top: 12px; padding: 12px 16px; border: 1.5px dashed var(--tp-line, #d8cfbc); border-radius: 12px; font-size: 19px; }

/* ---------- 底部固定列：螢幕鍵盤＋上一題／下一題／交卷 ---------- */
.tpr-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--tp-surface, #fff);
  border-top: 1.5px solid var(--tp-line, #d8cfbc);
  box-shadow: 0 -4px 16px rgba(31, 27, 20, 0.08);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tpr-bottomnav { display: flex; gap: 10px; }
.tpr-bottomnav .tp3-btn { flex: 1; min-height: 52px; font-size: 19px; }
@media (min-width: 720px) {
  .tpr-bottombar { align-items: center; }
  .tpr-bottomnav { width: 100%; max-width: 560px; }
  .tpr-bottomnav .tp3-btn { flex: 0 1 auto; min-width: 160px; }
}

/* 數字鍵盤：直接顯示在底欄上方，與上一題／下一題同欄不互遮 */
.tpr-keypad { width: 100%; max-width: 380px; margin-inline: auto; }
.tpr-keypad__hint { font-size: 15px; color: var(--tp-ink-soft, #6b6250); margin: 0 0 6px; }
.tpr-keypad__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tpr-keypad button {
  min-height: 52px;
  min-width: 48px;
  font-size: 24px;
  border: 1.5px solid var(--tp-line, #d8cfbc);
  border-radius: 12px;
  background: var(--tp-paper-deep, #f3ecdd);
  cursor: pointer;
  touch-action: manipulation;
}
.tpr-keypad button:active { background: var(--tp-line, #d8cfbc); }
.tpr-keypad button:focus-visible { outline: 3px solid var(--tp-amber, #d9a13b); outline-offset: 2px; }
.tpr-keypad [data-key="back"], .tpr-keypad [data-key="clear"] { font-size: 18px; }
.tpr-keypad__zero { grid-column: 1 / -1; }

/* 桌機（≥900px）：鍵盤縮成 5×3 小面板靠右，上一題／下一題留在中間。
   桌機有實體鍵盤，這塊只是輔助；原本 4×4 滿 380px 寬、266px 高太大。 */
@media (min-width: 900px) {
  .tpr-bottombar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    column-gap: 24px;
    padding-inline: max(16px, calc((100vw - 1072px) / 2));
  }
  .tpr-bottomnav { grid-column: 2; grid-row: 1; width: auto; max-width: none; }
  .tpr-keypad { grid-column: 3; grid-row: 1; justify-self: end; width: 300px; max-width: 300px; margin: 0; }
  .tpr-keypad__hint { display: none; }
  .tpr-keypad__grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .tpr-keypad button { min-height: 48px; font-size: 20px; }
  .tpr-keypad [data-key="1"] { grid-area: 1 / 1; }
  .tpr-keypad [data-key="2"] { grid-area: 1 / 2; }
  .tpr-keypad [data-key="3"] { grid-area: 1 / 3; }
  .tpr-keypad [data-key="4"] { grid-area: 1 / 4; }
  .tpr-keypad [data-key="5"] { grid-area: 1 / 5; }
  .tpr-keypad [data-key="6"] { grid-area: 2 / 1; }
  .tpr-keypad [data-key="7"] { grid-area: 2 / 2; }
  .tpr-keypad [data-key="8"] { grid-area: 2 / 3; }
  .tpr-keypad [data-key="9"] { grid-area: 2 / 4; }
  .tpr-keypad [data-key="0"] { grid-area: 2 / 5; }
  .tpr-keypad [data-key="."] { grid-area: 3 / 1; }
  .tpr-keypad [data-key="back"] { grid-area: 3 / 2 / 4 / 4; }
  .tpr-keypad [data-key="clear"] { grid-area: 3 / 4 / 4 / 6; }
}

/* 手機直向矮螢幕（375×667）：鍵盤與卡片再收緊，保證題幹與作答區同屏 */
@media (max-width: 599px) and (max-height: 720px) {
  .tpr-keypad button { min-height: 48px; font-size: 22px; }
  .tpr-keypad__hint { display: none; }
  .tpr-keypad__grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .tpr-keypad { max-width: 340px; }
  /* 矮螢幕改成三列：1–5、6–0、小數點／倒退／清除。
     按鍵仍至少 48px，省下的一列留給大圖與作答區。 */
  .tpr-keypad [data-key="1"] { grid-area: 1 / 1; }
  .tpr-keypad [data-key="2"] { grid-area: 1 / 2; }
  .tpr-keypad [data-key="3"] { grid-area: 1 / 3; }
  .tpr-keypad [data-key="4"] { grid-area: 1 / 4; }
  .tpr-keypad [data-key="5"] { grid-area: 1 / 5; }
  .tpr-keypad [data-key="6"] { grid-area: 2 / 1; }
  .tpr-keypad [data-key="7"] { grid-area: 2 / 2; }
  .tpr-keypad [data-key="8"] { grid-area: 2 / 3; }
  .tpr-keypad [data-key="9"] { grid-area: 2 / 4; }
  .tpr-keypad [data-key="0"] { grid-area: 2 / 5; }
  .tpr-keypad [data-key="."] { grid-area: 3 / 1; }
  .tpr-keypad [data-key="back"] { grid-area: 3 / 2 / 4 / 4; }
  .tpr-keypad [data-key="clear"] { grid-area: 3 / 4 / 4 / 6; }
  .tpr-bottomnav .tp3-btn { min-height: 48px; }
  .tpr-q__prompt { margin: 4px 0 8px; }
  #step-answer .tpr-q { line-height: 1.55; }
  #step-answer .tpr-q.tp3-card { padding: 8px 14px; }
  /* 題號與進度已在專注列顯示；矮螢幕不再重複一列中繼資料。
     組卷提示屬補充資訊，先讓位給完整題目與作答格。 */
  #step-answer .tpr-q__meta,
  #step-answer .tpr-papernote { display: none; }
  /* 不改題目 SVG 內容，只限制矮螢幕的呈現高度，避免作答格被固定鍵盤遮住。 */
  #step-answer .tpr-q__prompt svg { max-height: 96px; }
  #step-answer .tp3-label { margin: 0 0 4px; }
  .tpr-frac-hint { display: none; }   /* 矮螢幕省略操作提示，格子本身有 aria-label */
}

@media (prefers-reduced-motion: reduce) {
  .tpr-bottombar, .tpr-focusbar { transition: none !important; }
}