/* ============================================================
   数字パッド（static/js/keypad.js。2026-09-30 CEO決定）
   ほかのファイルに依存しない（style.css が無いスマホ伝票でも使える）。色・書体は style.css の変数があれば使い、
   無ければ同じ値に落とす。キーは高さ64px以上、−／＋ は44px以上。
   重なり: 画面で一番上だった確認ダイアログ・通知より上に出す（--z-keypad）。
   動きは全体の基準（出るのは 120ms、閉じるのは一瞬、動きを減らす設定に対応）。2026-10-01 に角丸・太さ・線の色を共通のトークンにそろえた
   ============================================================ */

.keypad-layer {
  position: fixed;
  inset: 0;
  z-index: 10050; /* = --z-keypad。確認ダイアログ（9999）・トースト（10000）より上。数で書く（tests/test_keypad_js.py が読む） */
  font-family: var(--font-sans, system-ui, "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", sans-serif);
  color: var(--color-text, #14161A);
  -webkit-tap-highlight-color: transparent;
}

.keypad-layer[hidden] {
  display: none;
}

.keypad-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 20, 0.2);
}

.keypad-panel {
  position: fixed;
  width: 320px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "display"
    "keys"
    "actions";
  gap: 8px;
  padding: 12px;
  background: var(--color-bg-surface, #FFFFFF);
  border: 1px solid var(--color-border-strong, #C7CBD1);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 10px 32px rgba(15, 17, 20, 0.24);
  touch-action: manipulation; /* ダブルタップの拡大を止める（「0」を続けて押せるように） */
  -webkit-user-select: none;
  user-select: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast, 120ms) var(--ease-out, ease-out), transform var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

.keypad-layer.is-open .keypad-panel {
  opacity: 1;
  transform: none;
}

.keypad-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.keypad-title {
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keypad-display {
  grid-area: display;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 72px;
  padding: 10px 12px;
  background: var(--color-bg-subtle, #F7F8F9);
  border: 1px solid var(--color-border, #E1E3E7);
  border-radius: var(--radius-md, 6px);
  font-variant-numeric: tabular-nums;
}

.keypad-range {
  margin-right: auto;
  align-self: flex-start;
  font-size: 0.85rem;
  color: var(--color-text-3, #5F646E);
  white-space: nowrap;
}

.keypad-display.is-out .keypad-range {
  color: var(--color-danger, #952626);
  font-weight: 700;
}

.keypad-value {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  text-align: right;
}

.keypad-value.is-empty {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-text-3, #5F646E);
}

.keypad-unit {
  font-size: 1.1rem;
  color: var(--color-text-2, #4A4F58);
}

.keypad-keys {
  grid-area: keys;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.keypad-key,
.keypad-clear,
.keypad-done,
.keypad-cancel,
.keypad-step {
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-md, 6px);
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

.keypad-key {
  min-height: 64px;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #14161A);
  background: var(--color-bg-surface, #FFFFFF);
  border: 1px solid var(--color-border-strong, #C7CBD1);
}

.keypad-key-back {
  font-size: 1.4rem;
}

.keypad-key:active {
  background: var(--color-border, #E1E3E7);
  transform: translateY(1px);
}

.keypad-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
}

.keypad-clear {
  min-height: 64px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text-2, #4A4F58);
  background: var(--color-bg-surface, #FFFFFF);
  border: 1px solid var(--color-border-strong, #C7CBD1);
}

.keypad-clear:active {
  background: var(--color-border, #E1E3E7);
  transform: translateY(1px);
}

.keypad-done {
  min-height: 64px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--color-chrome, #14161A);
  border: 1px solid var(--color-chrome, #14161A);
}

.keypad-done:active {
  background: var(--color-chrome-pressed, #2A2E35);
  transform: translateY(1px);
}

.keypad-cancel {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  font-size: 0.95rem;
  color: var(--color-text-2, #4A4F58);
  background: var(--color-bg-surface, #FFFFFF);
  border: 1px solid var(--color-border-strong, #C7CBD1);
}

.keypad-cancel:active {
  background: var(--color-bg-pressed, #F0F1F3);
}

/* スマホ（幅600px未満）は画面の下からのシート */
.keypad-layer.is-sheet .keypad-panel {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  max-width: none;
  border-radius: var(--radius-md, 6px) var(--radius-md, 6px) 0 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateY(24px);
}

.keypad-layer.is-sheet.is-open .keypad-panel {
  transform: none;
}

/* 高さの低い画面（スマホの横向きなど）は、左に見出し・値・決定、右にキーを並べる */
@media (max-height: 560px) {
  .keypad-panel,
  .keypad-layer.is-sheet .keypad-panel {
    width: auto;
    max-width: calc(100vw - 16px);
    grid-template-columns: minmax(200px, 1fr) minmax(240px, 280px);
    grid-template-areas:
      "head keys"
      "display keys"
      "actions keys";
    align-content: start;
  }

  .keypad-layer.is-sheet .keypad-panel {
    left: 50%;
    right: auto;
    transform: translate(-50%, 24px);
  }

  .keypad-layer.is-sheet.is-open .keypad-panel {
    transform: translate(-50%, 0);
  }

  .keypad-keys {
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .keypad-panel {
    transition: none;
  }

  .keypad-key:active,
  .keypad-clear:active,
  .keypad-done:active,
  .keypad-step:active {
    transform: none;
  }
}

/* ── −／＋ （data-stepper） ── */
.keypad-stepper {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  max-width: 100%;
  vertical-align: middle;
}

.keypad-stepper-block {
  display: flex;
  width: 100%;
}

.keypad-stepper > input {
  min-width: 3.5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.keypad-stepper-block > input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* −／＋ があるので、ブラウザの小さい上下の矢印は出さない */
.keypad-stepper > input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.keypad-stepper > input[type="number"]::-webkit-inner-spin-button,
.keypad-stepper > input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.keypad-step {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text, #14161A);
  /* 第7弾: 欄と同じ灰色の面・枠なし（iOS の灰色のボタン。白い枠のボタンを並べない） */
  background: var(--ios-fill, rgba(118, 118, 128, 0.12));
  border: 1px solid transparent;
}

.keypad-step:active {
  background: rgba(118, 118, 128, 0.24);
}

/* 押せない欄の −／＋ は、半透明にせず灰色の面と文字にする（JS 側でも押しても変えない）。
   :has に対応しないブラウザで規則ごと捨てられないよう、:has を使う指定は分けて書く */
.keypad-stepper > input:disabled ~ .keypad-step {
  background: var(--color-bg-muted, #F0F1F3);
  border-color: var(--color-border, #E1E3E7);
  color: var(--color-text-disabled, #5F646E);
  pointer-events: none;
}

.keypad-stepper:has(> input:disabled) .keypad-step,
.keypad-stepper:has(> input[readonly]) .keypad-step {
  background: var(--color-bg-muted, #F0F1F3);
  border-color: var(--color-border, #E1E3E7);
  color: var(--color-text-disabled, #5F646E);
  pointer-events: none;
}