/* 练习区（C）。只用 base.css 的令牌。 */

/* 练习视图占满剩余高度、不滚动 */
#app[data-view="practice"] {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* 竖屏：flex 列 —— 顶部一行放「跳过」（也是升降级提示的位置）、题目区弹性、键盘贴底 */
#view-practice {
  position: relative;
  padding-bottom: calc(var(--safe-bottom) + 12px);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: default;
}

/* ---------- 题目区 ---------- */
/* 尺寸容器：题目/答案字号按题目区实际宽高（cqw/cqh）放大，空间越大字越大，又不会撑破 */
#pr-stage {
  flex: 1;
  min-height: 120px;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.5vh, 24px);
  gap: clamp(8px, 5cqh, 24px);
  padding: 4px 0 12px;
  border-radius: var(--r-lg);
  background: transparent;
}

/* 答对：只闪一下绿色（class 切换，不依赖过渡/动画） */
/* 柔和的径向光晕，没有硬边，不会闪出一个矩形 */
#pr-stage.flash-ok { background: radial-gradient(ellipse 60% 55% at 50% 45%, var(--ok-soft), transparent 75%); }
#pr-stage.flash-ok #pr-timebar-fill { background: var(--ok); }

/* 每个 font-size 先写 vw 版作不支持容器单位时的兜底。
   宽度上限：≤9 字符的题（如 999 × 999）约 4.9em 宽，>9 字符（9999 × 9999）约 6em 宽；
   高度上限：题目 1.1em + 答案 1.2em + 24px 小字 + 时间条与间距，合起来不超过题目区高度 */
#pr-problem {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(44px, 12vw, 104px);
  font-size: clamp(36px, min(18cqw, 30cqh), 128px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
  color: var(--text);
}
#pr-problem.is-long {
  font-size: clamp(36px, 10vw, 84px);
  font-size: clamp(30px, min(15cqw, 26cqh), 104px);
}
#pr-problem.is-msg {
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
}

/* ---------- 答案区（div，绝不用 input） ---------- */
#pr-answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: calc(1.2em + 24px);
  font-family: var(--font-display);
  font-size: clamp(36px, 9vw, 68px);
  font-size: clamp(30px, min(12cqw, 20cqh), 88px);
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
}

.pr-line { display: inline-flex; align-items: center; min-height: 1.2em; }
.pr-input { letter-spacing: 0.02em; }
.pr-caret {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  margin-left: 3px;
  border-radius: 2px;
  background: var(--text-3);
  opacity: 0.6;
}

.pr-correct, .pr-yours, .pr-hint { display: none; }

.pr-yours {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-3);
  text-decoration: line-through;
}
.pr-yours.is-skip { text-decoration: none; }

.pr-hint {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-3);
}

/* 错题：红色正确答案 + 小字删除线 */
#view-practice[data-state="wrong"] .pr-line { display: none; }
#view-practice[data-state="wrong"] .pr-correct { display: block; color: var(--bad); }
#view-practice[data-state="wrong"] .pr-yours { display: block; }

/* 暂停 / 走开：只显示提示 */
#view-practice[data-state="paused"] .pr-line,
#view-practice[data-state="away"] .pr-line { display: none; }
#view-practice[data-state="paused"] .pr-hint,
#view-practice[data-state="away"] .pr-hint { display: block; }
#view-practice[data-state="paused"] #pr-timebar,
#view-practice[data-state="away"] #pr-timebar { visibility: hidden; }
#view-practice[data-state="away"] { cursor: pointer; }

/* ---------- 时间条 ---------- */
#pr-timebar {
  width: min(280px, 72%);
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
}
#pr-timebar-fill {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
  will-change: transform;
}
#pr-timebar.over #pr-timebar-fill { background: var(--warn); }
#view-practice[data-state="wrong"] #pr-timebar-fill { opacity: 0.5; }

/* ---------- 跳过 ---------- */
/* 放在题目区上方一行的右端，离数字键远，避免误按（DOM 里在题目区之后，用 order 提到最上面）。
   这一行中间空着，升降级提示（#toast）就显示在这里，不遮题目 */
#pr-actions {
  order: -1;
  flex: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 44px;
  margin-right: -8px; /* 按钮内边距探出去一点，让文字和键盘右缘对齐 */
  anchor-name: --pr-lane;
}
#pr-skip {
  min-height: 44px;
  min-width: 64px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 500;
  user-select: none;
  -webkit-user-select: none;
}
#pr-skip:active { background: var(--surface-2); }
@media (hover: hover) {
  #pr-skip:hover { background: var(--surface-2); color: var(--text); }
}
#view-practice:not([data-state="answering"]) #pr-skip { visibility: hidden; }

/* 升降级提示：竖直方向落在「跳过」那一行里（锚点定位；不支持时沿用 ui.css 的固定位置，
   那个位置正好是状态栏下方这一行）。横屏两栏时水平方向也对齐左栏，不压键盘 */
@supports (anchor-name: --a) {
  #app[data-view="practice"] #toast.toast {
    position-anchor: --pr-lane;
    top: calc(anchor(top) + 4px);
  }
  /* 两行的长提示（很少见，如「进度已在其他设备上重置…」）底边对齐这一行底边、向上长，
     宁可短暂盖住状态栏，也不压题目 */
  #app[data-view="practice"] #toast.toast.is-long {
    top: auto;
    bottom: calc(anchor(bottom) + 4px);
  }
}

/* ---------- 触屏数字键盘 ---------- */
#pr-keypad {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 4px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.kp-key {
  height: 60px;
  height: clamp(52px, 9dvh, 72px);
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.kp-key.is-down { background: var(--surface-2); }
.kp-del { font-size: 22px; color: var(--text-2); background: transparent; box-shadow: none; }
.kp-del.is-down { background: var(--surface-2); }
.kp-empty { visibility: hidden; }

/* ---------- 手机横屏：左题目 + 时间条，右 3×4 键盘 ---------- */
/* 竖排放不下键盘（可用高度只有 ~230–290px），改成两栏网格；键盘行高均分整个视图高度，完整可见、不滚动 */
@media (orientation: landscape) and (max-height: 500px) {
  #app[data-view="practice"] #views { max-width: 960px; }
  #view-practice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: calc(var(--safe-bottom) + 8px);
  }
  /* 右侧紧挨着键盘，「跳过」改放左端，仍然远离数字键 */
  #pr-actions { grid-column: 1; grid-row: 1; height: 40px; justify-content: flex-start; margin: 0 0 0 -8px; }
  #pr-skip { min-height: 40px; }
  #pr-stage { grid-column: 1; grid-row: 2; min-height: 0; padding: 0 0 4px; }
  #pr-keypad {
    grid-column: 2;
    grid-row: 1 / -1;
    width: clamp(196px, 36vw, 300px);
    margin-left: var(--gutter);
    padding-top: 8px;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 6px 8px;
  }
  #pr-keypad .kp-key { height: auto; min-height: 0; }
  @supports (anchor-name: --a) {
    #app[data-view="practice"] #toast.toast {
      left: anchor(center);
      max-width: calc(anchor-size(width) - 8px);
    }
  }
}