/*
 * 数値入力(input[type="number"])を共通テンキーで入力させるための見た目。
 * js/numKeypad.js とセットで使う(このCSS単体では何も起きない)。
 * 元々expCalculator.css内でアメ変換モーダル専用に作られていたテンキーの見た目を、
 * サイト共通トークン(css/tokens.css)ベースで一般化したもの。
 *
 * PCモード(data-layout="pc")のときは、js側がそもそもテンキーを開かないため
 * ここでのスタイルも実質無効。ただし「PCモードでないときだけネイティブの
 * スピンボタンを消す」処理はCSSだけで完結できるので、ここに含めている
 * (テンキー運用中はスピンボタンをタップされても本体側の状態と噛み合わないため)。
 */
:root:not([data-layout="pc"]) input[type="number"]:not([data-numkeypad="off"])::-webkit-outer-spin-button,
:root:not([data-layout="pc"]) input[type="number"]:not([data-numkeypad="off"])::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
:root:not([data-layout="pc"]) input[type="number"]:not([data-numkeypad="off"]){
  -moz-appearance:textfield;
}

/* テンキー表示中、対象の入力欄をひと目でわかるように縁取る(レイアウトは変えない) */
.numkeypad-field-active{
  box-shadow:0 0 0 2px rgba(246,203,90,0.45);
  border-radius:4px;
}

.numkeypad-backdrop{
  position:fixed; inset:0;
  background:rgba(17,21,46,0.25);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:calc(var(--app-popup-z, 140) + 9);
}
.numkeypad-backdrop.numkeypad-open{ opacity:1; pointer-events:auto; }

.numkeypad-popup{
  /* 下部メニューバーと被らないよう、その上に浮かせる(避ける量はcss/bottomNav.cssの
     --app-nav-inset-bottomで一元管理)。PCモードではJS側が開かないため、
     左サイドバー分の余白は考慮不要。 */
  position:fixed; left:0; right:0; bottom:var(--app-nav-inset-bottom, 88px);
  max-width:clamp(480px, 55vw, 720px); margin:0 auto;
  background:var(--paper);
  border-radius:16px;
  box-shadow:0 6px 24px rgba(17,21,46,0.3);
  transform:translateY(calc(100% + 100px));
  transition:transform .22s ease;
  z-index:calc(var(--app-popup-z, 140) + 10);
  padding:12px 16px 16px;
}
.numkeypad-popup.numkeypad-open{ transform:translateY(0); }

.numkeypad-popup-header{
  display:flex; justify-content:space-between; align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.numkeypad-layout-control{
  display:flex;
  align-items:center;
  gap:5px;
  flex:none;
}
.numkeypad-layout-label{
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
}
.numkeypad-layout-toggle{
  gap:2px;
  padding:2px;
}
.numkeypad-layout-toggle button{
  padding:4px 8px;
  font-size:var(--fs-2xs);
}
.numkeypad-field-label{
  flex:1;
  min-width:0;
  font-size:12.5px; font-weight:700; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center;
}
.numkeypad-done{
  flex:none;
  border:none; background:var(--navy); color:var(--selected-ink);
  font-size:12px; font-weight:700;
  padding:7px 14px; border-radius:20px;
  cursor:pointer;
}

.numkeypad-display{
  font-size:22px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  text-align:right;
  padding:2px 4px 10px;
  border-bottom:1.5px solid var(--line);
  margin-bottom:10px;
  word-break:break-all;
}

.numkeypad-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
.numkeypad-grid button{
  height:42px;
  border:1px solid var(--line);
  background:var(--paper-dim);
  border-radius:9px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}
.numkeypad-grid button:active{
  background:var(--moon-soft);
  border-color:var(--moon);
  color:var(--accent-ink);
}
.numkeypad-grid button.numkeypad-sub{ color:var(--ink-soft); font-size:13px; }

.numkeypad-decimal-row{
  margin-top:6px;
}
.numkeypad-decimal-row button{
  width:100%;
  height:36px;
  border:1px solid var(--line);
  background:var(--paper-dim);
  border-radius:9px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}
.numkeypad-decimal-row button:active{
  background:var(--moon-soft);
  border-color:var(--moon);
  color:var(--accent-ink);
}