/* ============================================================
   input.css — 記録入力画面専用
   スコープ: #inputTab 配下、メモ入力中の補助、Android #doneBar
   共通の .card / input を触るときは #inputTab を付けて範囲を限定する
   ============================================================ */

/* --- 入力画面レイアウト --- */
#inputTab .card{padding:12px 16px;margin-bottom:12px}
.rec-head{display:flex;align-items:center;justify-content:center;gap:10px}
.meas-head{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.meas-head label{margin-top:0}
.meas-head>label{font-size:1.1rem;font-weight:bold;color:var(--text)}
.meas-tools{display:flex;align-items:center;gap:8px}
#inputTab .btn:not(.btn-sub){margin-top:12px}
#inputTab .row .btn.act{margin-top:0;padding:14px 4px;font-size:1.1rem;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px}
#inputTab .status-msg{margin-top:6px;min-height:22px}
#inputTab textarea{margin-top:2px;border-radius:14px}
/* 日付と「朝の測定」のあいだを、少し広げる */
.rec-head+.meas-box>.meas-head{margin-top:12px}
.date-nav{display:flex;align-items:center;gap:6px;min-width:0;width:100%;max-width:100%}
.dnav{flex:none;width:42px;height:46px;border:1px solid var(--border);border-radius:12px;background:var(--pill-bg);color:var(--text);font-size:1.6rem;line-height:1;padding:0;cursor:pointer}
.dnav:disabled{opacity:.3;cursor:default}
.dnav{background-image:var(--face);box-shadow:var(--elev-1)}
.dnav:active{box-shadow:var(--press)}
.date-pill{position:relative;flex:1 1 0;min-width:0;white-space:nowrap;height:46px;padding:0 16px;border-radius:12px;background:var(--pill-bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:500;color:var(--text)}
.date-pill{background-image:var(--face);box-shadow:var(--elev-2)}
.date-pill input[type=date],.time-pill input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;opacity:0;border:0}
.time-pill{position:relative;display:flex;align-items:center;gap:4px;height:32px;padding:0 14px;border-radius:16px;background:var(--pill-bg);color:var(--sub);font-size:1rem}
/* 入力時刻は「値を入れる所」なので、へこませる（v143）。日付は押して開くボタンなので浮いたまま */
.time-pill{background-image:none;box-shadow:var(--sunk)}
.mrow{display:flex;align-items:center;gap:6px;margin-top:6px}
.mno{flex:none;width:44px;font-size:.8rem;font-weight:bold;color:var(--sub)}
.mrow .cell{flex:1;min-width:0;padding:3px 2px 1px}
.mrow .cell span{font-size:.7rem}
.mrow .cell input{font-size:1.4rem;height:30px;width:100%;-moz-appearance:textfield;appearance:textfield}
.mrow .cell input::-webkit-inner-spin-button,.mrow .cell input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* --- 一言メモ --- */
#inputTab #memo{
  margin-top:12px;
  resize:none;
  scrollbar-width:none;
  box-shadow:var(--sunk)
}
#inputTab #memo:focus{outline:none;border-color:var(--primary);box-shadow:var(--sunk),var(--ring)}
#inputTab #memo::-webkit-scrollbar{display:none}

/* メモ入力中：下タブを隠す（UIState が body.memo-editing を付与。display:none はタブ非表示の確実性のため !important）
   下余白は変えない（v187。変えるとモード解除でページの高さが変わり、画面が跳ねるため） */
body.memo-editing .tab-bar{display:none !important}

/* 入力中：メモのブロックを画面の上に固定し、後ろを暗くする（v188。LED文字入力と同じ方式。動きは js/memo-focus.js）
   固定中はページのスクロールと切り離されるので、キーボードの開閉で画面が段々に跳ねない */
.memo-edit-bg{position:fixed;left:0;right:0;top:0;bottom:0;z-index:205;background:rgba(0,0,0,.6)}
.memo-block-pinned{position:fixed!important;left:12px;right:12px;top:calc(var(--memo-top,0px) + env(safe-area-inset-top,0px) + 8px);margin:0 auto!important;max-width:616px;z-index:210;box-sizing:border-box;background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 8px 30px rgba(0,0,0,.55)}
/* メモの見出しと上限の注記（v189。設定のLEDカードと同じ「見出し＋ラベル」の構成。通常時も固定中も出す。
   入力欄が少し下がって、キーボードの上で見やすくなる） */
.memo-head{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.memo-title{font-weight:bold;font-size:1.1rem}
.memo-block-pinned .memo-head{margin-top:2px}
/* 上限の注記は必ず1行にする：折り返し禁止＋文字の大きさに画面幅での上限を付ける
   （通常の .95rem のままだと、文字設定「大」では横幅が足りず折り返してしまうため） */
.memo-limit{white-space:nowrap;font-size:.85rem;color:var(--sub)}
/* Androidの「完了」バーは、暗い背景より上に出す（押せないとキーボードを閉じられないため） */
body.memo-editing #doneBar{z-index:220}

/* --- Android「完了」バー（動きは js/input-ui.js） --- */
#doneBar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;box-sizing:border-box;padding:6px 12px;background:var(--card-bg);border-top:1px solid var(--border);justify-content:flex-end}
#doneBar.on{display:flex}
#doneBar button{min-width:96px;height:42px;padding:0 20px;border:0;border-radius:12px;background:var(--primary);color:var(--on-primary);font-size:1.05rem;font-weight:bold;font-family:inherit;cursor:pointer}
#doneBar button:active{opacity:.75}

/* --- 朝・夜の枠ごとの色分け（v166）。ライト・ダークだけ。白黒は枠なしのまま（トークンは theme.css の --meas-*） ---
   v186：見出しの帯（::before の波形）を廃止し、地色を左上がやや濃く右下へ抜ける斜めグラデーション（135deg）にした。帯を取ったので、夜の見出し文字は白ではなく濃紺（--meas-pm-text）で読ませる */
:root:not([data-theme=mono]) .meas-box{position:relative;box-sizing:border-box;margin-top:10px;padding:8px 8px 6px;border:1.5px solid;border-radius:16px}
:root:not([data-theme=mono]) .rec-head+.meas-box{margin-top:12px}
:root:not([data-theme=mono]) .meas-box>.meas-head{margin-top:0}
:root:not([data-theme=mono]) .meas-box>*{position:relative;z-index:1}
:root:not([data-theme=mono]) .meas-box.am{background:linear-gradient(135deg,var(--meas-am-bg),var(--meas-am-bg2));border-color:var(--meas-am-line)}
:root:not([data-theme=mono]) .meas-box.pm{background:linear-gradient(135deg,var(--meas-pm-bg),var(--meas-pm-bg2));border-color:var(--meas-pm-line)}
:root:not([data-theme=mono]) .meas-box.am>.meas-head>label{color:var(--meas-am-text)}
:root:not([data-theme=mono]) .meas-box.pm>.meas-head>label{color:var(--meas-pm-text)}
:root:not([data-theme=mono]) .meas-box.am .mno{color:var(--meas-am-no)}
/* v181→v182：色のついた枠の上で、数字のマスの左上の白い光（--elev-1 の -3px -3px 7px 白90%）がにじんで見えるので、枠の中のマスだけ、白い光をなくした（v181で弱め→v182でなし。ライトのみ。ダークは元から白い光なし）。
   右下の影・縁の細い白線は --elev-1 と同じ。入力中（:focus-within）の凹みと青い縁には効かせない */
:root[data-theme=light] .meas-box .cell:not(:focus-within){box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),3px 4px 9px rgba(var(--sh),.22),1px 1px 2px rgba(var(--sh),.14)}
:root:not([data-theme=mono]) .meas-box.pm .mno{color:var(--meas-pm-no)}

/* --- 一言メモ：変換中に13文字を超えたあいだだけ、枠を赤くして文字数を出す（v167・v168。確定すると13文字に切れて消える） --- */
.memo-cnt{margin:4px 2px 0;font-size:.8rem;font-weight:bold;color:var(--high)}
.memo-cnt:empty{display:none}
#inputTab #memo.memo-over,#inputTab #memo.memo-over:focus,#ezMemo.memo-over{border-color:var(--high)}

/* --- 記録入力を画面の高さにぴったり収める（通常モードだけ。かんたんモードは body.easy で従来どおり） ---
   v218 は CSS の dvh 計算でタブに高さを与え、収まらないときはタブの中をスクロールさせていたが、実機では「少しはみ出すだけで全体がゴムのように動いて戻る」動きになった（スクロール領域があること自体が原因）。
   v219 は実測方式：js/input-ui.js の inputFitEval が、中身の自然な高さと使える高さを実測し、収まるときだけ .fit-on を付けて高さを px で固定する。スクロール領域は作らない（overflow:hidden）。収まらないときは .fit-on を付けない＝v217 までの通常表示に戻るだけ。
   伸縮するのは朝・夜の行（.mrow）の高さだけ。文字の大きさ・数字マスの大きさは変えない。行には下限（中身が収まる高さ）と上限を付ける。
   電光掲示板が非表示（.led-gone）のときは伸ばさない：カードは自然な高さのまま、下が余る形にする（開発者の決定。掲示板ぶん約68pxまで伸ばすと間延びするため） */
body:not(.easy) #inputTab.fit-on{display:flex;flex-direction:column;overflow:hidden}
body:not(.easy) #inputTab.fit-on>#ledBoard{flex:0 0 auto}
body:not(.easy) #inputTab.fit-on>.card{flex:1 0 auto;display:flex;flex-direction:column}
body:not(.easy) #inputTab.fit-on .card>.rec-head,body:not(.easy) #inputTab.fit-on .card>#memoBlock,body:not(.easy) #inputTab.fit-on .card>#statusMsg,body:not(.easy) #inputTab.fit-on .card>.hk-band{flex:0 0 auto}
body:not(.easy) #inputTab.fit-on .meas-box{display:flex;flex-direction:column;flex:1 0 auto}
body:not(.easy) #inputTab.fit-on .meas-box>.meas-head{flex:0 0 auto}
body:not(.easy) #inputTab.fit-on .meas-box>.mrow{flex:1 1 auto;min-height:44px;max-height:68px}
body:not(.easy) #inputTab.fit-on .memo-ph{flex:0 0 auto}
/* 掲示板が非表示のときは伸ばさない（下を余らせる） */
body:not(.easy) #inputTab.fit-on:has(>#ledBoard.led-gone)>.card{flex:0 1 auto}
body:not(.easy) #inputTab.fit-on:has(>#ledBoard.led-gone) .meas-box{flex:0 1 auto}
body:not(.easy) #inputTab.fit-on:has(>#ledBoard.led-gone) .meas-box>.mrow{flex:0 1 auto}