/* 縮小版の見た目。★指で押す前提・文字は大きめ。
   ★親製品（VERB NEXUS）の CSS は一切持ち込まない（別物なので）。 */

:root {
  --ink: #1a1a1a;
  --ink-sub: #444;
  --line: #c9cfd7;
  --bg: #f4f6f5;
  --card: #fff;
  --green: #1f5c3d;
  --green-soft: #e7f3ec;
  --danger: #b00020;
  --danger-soft: #fff0f0;
  --warn-soft: #fff8e1;
  /* ★指で押せる最小の高さ。ここを下げない。 */
  --tap: 48px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 17px;          /* ★年配の方が読む前提。小さくしない */
  color: var(--ink);
  background: var(--bg);
  padding-bottom: 96px;     /* ＋ボタンに隠れないように */
}

/* ===== 上の帯 ===== */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  background: var(--green); color: #fff;
}
.bar h1 { margin: 0; font-size: 19px; flex: 1; }
.icon {
  min-width: var(--tap); min-height: var(--tap);
  border: none; background: transparent; color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
}

/* ===== 検索 ===== */
.search { padding: 10px 12px 4px; }
.search input {
  width: 100%; min-height: var(--tap);
  padding: 10px 12px; font-size: 17px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}

/* ===== 一覧 ===== */
main { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }

.item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
/* ★切れそうなものは地の色で示す（文字色だけに頼らない） */
.item.low { background: var(--danger-soft); border-color: #e3a6a6; }

.item-main { flex: 1; min-width: 0; }
.item-name {
  font-size: 18px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-sub { font-size: 14px; color: var(--ink-sub); }

.item-qty {
  min-width: 3.2em; text-align: right;
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.item-unit { font-size: 14px; color: var(--ink-sub); margin-left: 2px; }

/* ★＋ − は大きく離す（押し間違いを減らす） */
.step {
  min-width: var(--tap); min-height: var(--tap);
  font-size: 24px; font-weight: 700; line-height: 1;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.step:active { background: var(--green-soft); }

.empty { padding: 32px 8px; text-align: center; color: var(--ink-sub); }

/* ★版の表示。小さく、隅に。**古い画面を見ていないか**を確かめるためだけのもの。 */
.ver { margin: 4px 12px 0; text-align: right; font-size: 12px; color: var(--ink-sub); }

/* ===== 撮る・足す ===== */
.fabs {
  position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.fab {
  width: 64px; height: 64px; border-radius: 50%;
  border: none; background: var(--green); color: #fff;
  font-size: 32px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* ★撮るボタンは白地にする＝「＋（足す）」と**見た目で区別**する。
   同じ色に並べると、押し間違えたことに気づけない。 */
.fab.scan { background: #fff; color: var(--green); border: 2px solid var(--green); font-size: 26px; }

/* 入力欄のとなりの小さい撮るボタン */
.field-row { display: flex; gap: 8px; align-items: stretch; }
.field-row input { flex: 1; }
.scan-small {
  flex: none; width: var(--tap); min-height: var(--tap); margin-top: 4px;
  font-size: 22px; line-height: 1;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); cursor: pointer;
}

/* ===== ダイアログ ===== */
dialog {
  width: min(94vw, 460px);
  border: none; border-radius: 14px; padding: 16px;
  background: var(--card); color: var(--ink);
}
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog h2 { margin: 0 0 12px; font-size: 19px; }

dialog label { display: block; margin-bottom: 12px; font-size: 15px; color: var(--ink-sub); }
dialog input {
  display: block; width: 100%; min-height: var(--tap); margin-top: 4px;
  padding: 10px 12px; font-size: 17px; font-family: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.req { color: var(--danger); font-size: 13px; }

dialog menu { display: flex; gap: 8px; margin: 4px 0 0; padding: 0; }
.spacer { flex: 1; }
dialog button {
  min-height: var(--tap); padding: 10px 16px;
  font-size: 16px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
dialog button.primary { background: var(--green); color: #fff; border-color: var(--green); }
dialog button.danger { background: var(--danger-soft); color: var(--danger); border-color: #e3a6a6; }
dialog button.wide { display: block; width: 100%; margin-bottom: 10px; text-align: left; }

.err { background: var(--danger-soft); color: var(--danger); padding: 8px 10px; border-radius: 8px; font-size: 15px; }
.warn { background: var(--warn-soft); color: #7a5c00; padding: 8px 10px; border-radius: 8px; font-size: 15px; }
.note { font-size: 14px; color: var(--ink-sub); line-height: 1.6; }

/* ★読み取り結果の一覧（撮ったものを全部出す）。 */
#scan-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.scan-hit {
  display: block; width: 100%; text-align: left;
  min-height: var(--tap); padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.scan-hit-code { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scan-hit-meta { font-size: 13px; color: var(--ink-sub); margin-top: 2px; }

/* ★撮った写真。**保存はしない**（見ながら打つためだけ）。
   高さを抑えてあるのは、入力欄が画面外へ押し出されないため（スマホは縦が短い）。 */
#item-photo-box { margin-bottom: 12px; }
#item-photo {
  display: block; width: 100%; max-height: 200px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 10px; background: #f0f0f0;
}
#item-photo-box .note { margin-top: 4px; font-size: 13px; }