/* Bàn phím số trong ứng dụng + chỉnh sửa cảm ứng cho iPad */

/* ---- cảm ứng ---- */
html, body { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent; }
.qcard, .qhead, .prompt, #qbody, .choice, .mopt, .mrow, .kbtn, .chip, .tile, .node, button, summary {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* ô nhập vẫn chọn/viết được (Apple Pencil Scribble cần) */
input, textarea, select, #qbody input, #qbody textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

.choice, .mopt, .kbtn, .chip, .mrow, .kp-key { transition: transform .08s ease, background-color .12s, box-shadow .12s; }
.choice:active, .mopt:active, .kbtn:active, .chip:active, .mrow:active, .kp-key:active { transform: scale(.96); }

/* ---- bàn phím số ---- */
.kpad {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 10px;
  max-width: 440px; margin: 0 auto; padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  background: #fff7ea; border: 3px solid var(--line, #efe2cc); border-bottom: 0; border-radius: 26px 26px 0 0;
  box-shadow: 0 -10px 30px -8px rgba(150, 100, 40, .35);
  transform: translateY(105%); transition: transform .18s ease-out;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.kpad[hidden] { display: none; }
.kpad.open { transform: none; }
.kp-key {
  font: 800 30px/1 'Baloo 2', 'Nunito', system-ui, sans-serif; color: var(--ink, #2d2a4a);
  min-height: 64px; height: 68px; border: 0; border-radius: 18px; cursor: pointer;
  background: #fff; box-shadow: 0 5px 0 #e3d3b8; touch-action: manipulation;
}
.kp-key:active { box-shadow: 0 2px 0 #e3d3b8; background: #fff1d6; }
.kp-del { background: #ffe8ee; color: var(--brand-d, #b02149); box-shadow: 0 5px 0 #f3c4d1; font-size: 28px; }
.kp-next { background: linear-gradient(150deg, #22b98d, #0f8a69); color: #fff; box-shadow: 0 5px 0 #0a6650; font-size: 24px; }
.kp-del:active, .kp-next:active { box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }

/* ngang: một dải 6 cột x 2 hàng cho đỡ che nội dung */
@media (orientation: landscape) and (min-width: 700px) {
  .kpad { max-width: 760px; grid-template-columns: repeat(6, minmax(64px, 1fr)); gap: 8px; }
  .kp-key { height: 64px; }
}

/* ô số đang chọn + chừa chỗ cuối trang cho bàn phím */
input.blank.kp-active { outline: 4px solid #ffc23d; outline-offset: 2px; background: #fffbe6; box-shadow: 0 0 0 6px rgba(255, 194, 61, .3); }
html.kp-open body { padding-bottom: calc(var(--kp-h, 340px) + 16px); }