/*
 * 在庫管理アプリの見た目。
 *
 * ── この 1 枚の決めごと ──────────────────────────────────
 *
 *  1. **見た目はすべてここで決める。** app.js は class を付けるだけで、style 属性を書かない
 *     （.htaccess の CSP が style-src 'self' しか許していない。理由は app.js の 3）。
 *     例外は並べ替え中の位置で、あれは JS から el.style に入れる（CSSOM は CSP の対象外）。
 *  2. **値を直に書かない。** 余白・角丸・色は :root の変数を通す。
 *     ダークモードで取り残されるのは、たいてい直書きした色。
 *  3. 余白は 4 の倍数だけ。角丸は 4 種類（タグ / 小 / カード / 丸）まで。
 *  4. スマホを既定にして、広い方へ @media で足す。狭い方へ削らない。
 *  5. 押せるものは 44px 以上。**+− は最も多く押されるので、ここを削らない。**
 *
 * ── 並び ────────────────────────────────────────────────
 *   1) トークン   2) グループの色   3) 骨組み   4) 部品   5) 画面別   6) 広い画面
 */

/* ══════════════════ 1) トークン ══════════════════ */

:root {
  color-scheme: light dark;

  /* 余白。4 の倍数だけ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 角丸。**4 種類まで。** 増やすと画面がちぐはぐになる */
  --r-tag: 10px;
  --r-small: 14px;
  --r-card: 20px;
  --r-pill: 999px;

  --max-width: 760px;
  --tap: 44px;

  /* ── 地と文字 ──
     白ではなく、ほんのり温かい生成り。真っ白より目が疲れず、
     カードの白が浮いて見える */
  --bg: #fdf6ee;
  --card: #ffffff;
  --sunk: #f6efe6;
  --ink: #2b2118;
  --ink-weak: #7a6a5c;
  --line: #ece0d2;

  /* ── 主色 ──
     くすんだ緑から、明るい木の実の色へ。ポップに寄せた主色 */
  --accent: #ff7a45;
  --accent-dark: #e0561f;
  --accent-ink: #ffffff;
  --accent-bg: #fff1e9;

  /* ── 意味の色。**主色とは別に持つ** ── */
  --danger: #d63b3b;
  --danger-bg: #fdeceb;
  --low: #b8560c;
  --low-bg: #fff2e0;
  --low-line: #f2c79a;
  --warn-bg: #fff8e4;
  --warn-line: #f0dda6;

  /* 影は 2 種類まで。浮いているものにだけ */
  --shadow: 0 2px 0 rgba(43, 33, 24, 0.06);
  --shadow-lift: 0 10px 24px rgba(43, 33, 24, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* **変数名を増やさない。** ライトにあってダークに無い変数を作ると、そこだけ色が飛ぶ */
    --bg: #17130f;
    --card: #221c17;
    --sunk: #1c1712;
    --ink: #f2e9e0;
    --ink-weak: #a8988a;
    --line: #3a2f26;

    --accent: #ff8f5f;
    --accent-dark: #ff7a45;
    --accent-ink: #24160e;
    --accent-bg: #2e1d13;

    --danger: #ff8073;
    --danger-bg: #331b19;
    --low: #f0a35e;
    --low-bg: #2e2013;
    --low-line: #5c4023;
    --warn-bg: #2b2413;
    --warn-line: #544728;

    /* **影はダークで効かない。** 面の分離は border に任せ、影はほぼ消す */
    --shadow: none;
    --shadow-lift: 0 10px 24px rgba(0, 0, 0, 0.5);
  }
}

/* ══════════════════ 2) グループの色 ══════════════════
 *
 * **選べるのは 8 色だけ。** 名前は private/validator.php の GROUP_COLORS と
 * app.js の GROUP_COLORS とそろえること（3 か所）。
 *
 * 色コードを DB に入れない理由は db/0004_group_color.sql に書いてある。
 * 要点は「明るい配色と暗い配色で別の値が要る」＝ここにしか置けない、ということ。
 *
 * 1 色につき 5 つ。
 *   --g-ink  … カードの上に置く文字・アイコンの色（本文と同じ読みやすさが要る）
 *   --g-fill … 塗りつぶす色（選択中のタブ、色見本）
 *   --g-on   … --g-fill の上に乗る文字の色。**きいろだけ黒に近い**
 *   --g-bg   … うっすら敷く地の色
 *   --g-line … 枠線
 */

.c-green  { --g-ink: #1c7a4d; --g-fill: #22a06b; --g-on: #fff; --g-bg: #e8f6ee; --g-line: #9fdcbb; }
.c-teal   { --g-ink: #0f7480; --g-fill: #14a0ad; --g-on: #fff; --g-bg: #e4f5f7; --g-line: #96dbe2; }
.c-blue   { --g-ink: #2258c4; --g-fill: #3b7ded; --g-on: #fff; --g-bg: #e8f0fe; --g-line: #a9c8f7; }
.c-purple { --g-ink: #6b3fc4; --g-fill: #8b5cf0; --g-on: #fff; --g-bg: #f0eafe; --g-line: #c9b3f7; }
.c-pink   { --g-ink: #bd2b73; --g-fill: #e8559b; --g-on: #fff; --g-bg: #fdeaf3; --g-line: #f6b6d3; }
.c-red    { --g-ink: #c0392b; --g-fill: #e8503f; --g-on: #fff; --g-bg: #fdecea; --g-line: #f6b3ab; }
.c-orange { --g-ink: #b1560a; --g-fill: #f07d1a; --g-on: #fff; --g-bg: #fdf0e3; --g-line: #f7c795; }
.c-yellow { --g-ink: #8a6a00; --g-fill: #f2c018; --g-on: #3a2d00; --g-bg: #fdf7dd; --g-line: #f0dd8a; }

@media (prefers-color-scheme: dark) {
  .c-green  { --g-ink: #5fd39a; --g-fill: #2e8f66; --g-on: #eaf7f0; --g-bg: #16281f; --g-line: #2f5f45; }
  .c-teal   { --g-ink: #52ccd8; --g-fill: #17838f; --g-on: #e7f7f9; --g-bg: #12262a; --g-line: #2a5b62; }
  .c-blue   { --g-ink: #7fb0ff; --g-fill: #2f66c9; --g-on: #eef4ff; --g-bg: #161f2e; --g-line: #2d4a75; }
  .c-purple { --g-ink: #b598ff; --g-fill: #6d47c9; --g-on: #f2ecff; --g-bg: #201a30; --g-line: #453769; }
  .c-pink   { --g-ink: #ff9ccb; --g-fill: #c9407f; --g-on: #fff0f7; --g-bg: #2c1723; --g-line: #6b3350; }
  .c-red    { --g-ink: #ff9587; --g-fill: #c04435; --g-on: #fff0ee; --g-bg: #2c1917; --g-line: #6b3630; }
  .c-orange { --g-ink: #ffb066; --g-fill: #b9660f; --g-on: #fff4e8; --g-bg: #2b1e12; --g-line: #6b4520; }
  .c-yellow { --g-ink: #f0d264; --g-fill: #a98a12; --g-on: #2a2100; --g-bg: #272212; --g-line: #5f5120; }
}

/* 色が付いていないところでも変数が空にならないように、既定を主色にしておく。
   **これが無いと、色を持たない要素で背景が透明になる** */
:root {
  --g-ink: var(--accent-dark);
  --g-fill: var(--accent);
  --g-on: var(--accent-ink);
  --g-bg: var(--accent-bg);
  --g-line: var(--line);
}

/* ══════════════════ 3) 骨組み ══════════════════ */

* {
  box-sizing: border-box;
}

html {
  /* iOS で入力欄に触れたときに画面が拡大されるのを防ぐ。
     入力欄を 16px 以上にすることでも防げるが、両方やっておく */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;

  /* ホーム画面から開いたとき、ノッチとホームバーに文字が隠れないようにする。
     index.html の viewport-fit=cover と対になっている。どちらか片方では効かない */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);

  /* standalone で画面全体がゴムのように弾むのを止める */
  overscroll-behavior-y: none;
}

/* 並べ替え中は、指の下の文字が選ばれないようにする */
body.dnd-active {
  -webkit-user-select: none;
  user-select: none;
}

/* 見出しとタブをひとまとめにして貼り付ける。
   **別々に sticky にして top を数値で合わせない。**
   見出しの高さが変わるたびに数値がずれ、タブが見出しの下に潜り込む
   （実際に 53px と 61px でずれていた。2026-08-30） */
.app-top {
  position: sticky;
  top: 0;
  z-index: 20;

  /* 帯そのものは画面いっぱい。**中身だけを本文と同じ幅に収める。**
     帯の中身を伸ばしたままにすると、PC で「もどる」だけが画面の右端に離れ、
     カードの右端とそろわなくなる（指針の「固定要素と max-width の食い違い」） */
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.app-header,
.app-top .tabs {
  max-width: var(--max-width);
  margin: 0 auto;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
}

.app-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

/* アプリ名は丸い札にして、見出しの主役を家の名前に譲る */
.app-name {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
}

.household-name {
  font-size: 15px;
  font-weight: 600;
  /* 長い家の名前でも「管理」ボタンを押し出さない */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 入っている家が 2 つ以上あるときだけ出る切り替え */
/* **44px を切らない。** 家の切り替えは押される。
   36px にしていて指摘を受けた（2026-08-30。測るときは select も含めること） */
.household-select {
  max-width: 45vw;
  min-height: var(--tap);
  padding: 4px var(--sp-2);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--sunk);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
}

.main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-4);
}

.card-title {
  margin: 0 0 var(--sp-2);
  font-size: 17px;
  font-weight: 700;
}

.sub-title {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-weak);
}

.stock,
.manage {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.empty {
  color: var(--ink-weak);
  text-align: center;
  padding: var(--sp-6) var(--sp-2);
  margin: 0;
}

.hint {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-weak);
}

.hint.warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-tag);
  padding: var(--sp-2) var(--sp-3);
  color: var(--ink);
}

/* ══════════════════ 4) 部品 ══════════════════ */

/* ── タブ ── */

.tabs {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  /* 見出しとの区切り。帯の地色は .app-top が持っている */
  border-top: 1px solid var(--line);

  /* グループが増えても折り返さず、横に流す。
     折り返すとタブの帯が何行にもなり、一覧が下に押し出される */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tabs::-webkit-scrollbar {
  display: none;
}

/* 選んでいないタブにも色の点を付ける。**色は名前の隣にあってこそ意味を持つ** */
/* **44px を切らない。** グループの切り替えは片手で何度も押す */
.tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 6px var(--sp-3);
  border: 2px solid var(--g-line);
  border-radius: var(--r-pill);
  background: var(--g-bg);
  color: var(--g-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.tab::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--g-fill);
  flex: 0 0 auto;
}

.tab.active {
  background: var(--g-fill);
  border-color: var(--g-fill);
  color: var(--g-on);
}

/* 選択中は点を白抜きにして、塗りの中でも位置が分かるようにする */
.tab.active::before {
  background: var(--g-on);
}

/* ── ボタン ── */

.btn {
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.06s;
}

.btn:active {
  transform: translateY(2px);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn.ghost {
  background: transparent;
}

.btn.danger {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}

.btn.link {
  border: none;
  background: none;
  color: var(--accent-dark);
  text-decoration: underline;
  font-weight: 400;
}

/* 「編集」「買った」「承認する」など、行の中に並ぶ小さめのボタン。
   **文字と余白は小さくしても、押せる高さは 44px を保つ。**
   ここを 36px にしていて指摘を受けた（2026-08-30） */
.btn.tiny {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  font-size: 14px;
}

.btn.wide {
  width: 100%;
}

/* ── 入力欄 ── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  min-width: 0;
}

.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-weak);
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--line);
  border-radius: var(--r-small);
  background: var(--sunk);
  color: var(--ink);
  font: inherit;
  /* **16px を下回らせない。** 下回ると iOS が入力時に画面を拡大する */
  font-size: 16px;
}

input:focus-visible,
button:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.radio {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.stack > .field:first-child {
  margin-top: 6px;
}

/* 断られた理由。**入力欄の真上に置く。**
   画面の下に出る知らせだけでは、フォームを見ている目に入らない */
.form-error {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--danger);
  border-radius: var(--r-tag);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

/* ── 色見本（グループの色を選ぶ） ── */

/* ── 折りたたみ（<details>）── */

.fold {
  border: 2px solid var(--line);
  border-radius: var(--r-small);
  background: var(--card);
}

/* 見出しは押せるもの。**44px を切らない** */
.fold-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--r-small);
  /* 既定の三角は Safari と Chrome で位置が違う。自前の印に置き換える */
  list-style: none;
}

.fold-summary::-webkit-details-marker {
  display: none;
}

/* 開いているかどうかを、形（向き）でも示す。色だけに頼らない */
.fold-summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--ink-weak);
  transition: transform 0.12s;
}

.fold[open] > .fold-summary::after {
  transform: rotate(90deg);
}

.fold-summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* いまの色を見出しに出す。**開かなくても何色かが分かる** */
.swatch-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  background: var(--g-fill);
  flex: 0 0 auto;
}

.color-fold {
  flex: 1 1 100%;
}

/* ── 使い方ガイド ── */

.fold-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.guide-fold > .fold-summary {
  font-size: 16px;
  background: var(--sunk);
}

.guide-body {
  padding: 0 var(--sp-3) var(--sp-3);
}

.guide-line {
  margin: var(--sp-2) 0 0;
  font-size: 15px;
  line-height: 1.8;
}

/* 太字は「ここだけは読んでほしい」の印。使いすぎない */
.guide-line strong {
  font-weight: 700;
  color: var(--accent-dark);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-2) var(--sp-2);
}

/* **44px を確保する。** 小さい丸を並べると隣を押す。
   丸そのものは 28px で、周りの余白まで含めて押せるようにしてある */
.swatch {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swatch::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--g-fill);
  border: 3px solid transparent;
  box-shadow: 0 0 0 2px var(--card);
  transition: transform 0.08s;
}

/* 選ばれている色は、大きくして白い輪と枠を付ける。
   **色だけで「選択中」を示さない**（形も変える） */
.swatch[aria-pressed="true"]::before {
  transform: scale(1.15);
  border-color: var(--card);
  box-shadow: 0 0 0 3px var(--g-fill);
}

.swatch:active::before {
  transform: scale(0.9);
}

/* ══════════════════ 5) 画面別 ══════════════════ */

/* ── アイテムの行 ── */

.item-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* 左端にグループの色の帯。**行そのものは白のまま**にして、
   「少ない」の色（暖色）とぶつからないようにしてある */
.item-row {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 6px solid var(--g-fill);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--sp-3);
}

.item-row.is-low {
  border-color: var(--low-line);
  border-left-color: var(--g-fill);
  background: var(--low-bg);
}

.row-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.row-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.item-name {
  font-weight: 700;
  /* 長い名前でも取っ手と「編集」を押し出さない */
  overflow-wrap: anywhere;
}

.item-unit {
  font-size: 13px;
  color: var(--ink-weak);
}

.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  border: 2px solid currentColor;
}

/* **色だけで伝えない。** 「少ない」という文字が必ず一緒に出る */
.badge.low {
  color: var(--low);
  background: var(--card);
}

.row-memo {
  margin: var(--sp-2) 0 0;
  font-size: 13px;
  color: var(--ink-weak);
  overflow-wrap: anywhere;
}

/* 取っ手。**つまめるのはここだけ。**
   touch-action:none が無いと、指の動きをブラウザが画面送りとして持って行き、
   pointermove が途中で来なくなる（dnd.js の 2）。 */
.drag-handle {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-weak);
  font-size: 20px;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

/* つまんでいる行。指の下に浮かせる。
   left / top は dnd.js が入れる（ここで position だけ決めておく） */
.item-row.dragging,
.group-row.dragging {
  position: fixed;
  z-index: 50;
  margin: 0;
  opacity: 0.97;
  box-shadow: var(--shadow-lift);
  pointer-events: none;
  transform: rotate(-1deg);
}

/* 抜けた場所に残す空き。ここが動いて、落ちる先を示す */
.dnd-placeholder {
  border: 3px dashed var(--g-line);
  border-radius: var(--r-card);
  background: var(--g-bg);
  opacity: 0.6;
}

/* ── 数の増減 ── */

.row-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 6px;
  background: var(--sunk);
}

/* **折り返させない。** 狭い画面で幅を取られると「在庫」が縦 2 文字に潰れる
   （数の欄を打ち込める形にしたときに実際そうなった。2026-08-30） */
.stepper-label {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-weak);
  padding: 0 var(--sp-1);
}

/* +− は最も多く押される。**44px を下回らせない。**
   ここを詰めると、歩きながらの片手操作で隣を押す */
.step {
  width: var(--tap);
  height: var(--tap);
  border: none;
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  /* 連打したときに文字が選択されて青くならないように */
  -webkit-user-select: none;
  user-select: none;
}

.step:active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* 真ん中の数は**打ち込める**。g のように数の大きいものを
   ＋ の連打で入れるのは無理なので（2026-08-30）。
   入力欄に見えすぎると ＋− の並びが騒がしくなるので、枠と地色は消してある */
input.count {
  /* 4 桁（9999）が入る幅。**広げすぎない。**
     ここが太ると、狭い画面で隣の「単位」が次の行へ落ちる */
  width: 2.9em;
  flex: 0 0 auto;
  min-width: 0;
  /* 打ち込む欄なので、ここも 44px を切らない。
     両隣の ＋− がすでに 44px あるので、高さは変わらない */
  min-height: var(--tap);
  padding: 0 2px;
  border: none;
  border-bottom: 2px dashed var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  /* 桁をそろえる。そろっていないと縦に並んだ数字が読めない */
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  /* **16px を下回らせない。** 下回ると iOS が入力時に画面を拡大する */
  font-size: 19px;
}

input.count:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
  border-bottom-color: transparent;
}

/* 数を上下させる矢印は消す。**すぐ隣に ＋− があるので二重になる** */
input.count::-webkit-outer-spin-button,
input.count::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.count {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── 行を開いたときの編集欄 ── */

.editor {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 2px dashed var(--line);
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.add-area {
  display: flex;
}

/* アイテムを足す欄の 2 行目。**「いま」と「単位」だけを横に並べる。**
   アイテム名も一緒に並べると、スマホで単位だけが次の行に落ちて間延びする */
.add-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-end;
  margin-top: var(--sp-2);
}

.add-row .stepper {
  flex: 0 0 auto;
  /* 下の入力欄と底をそろえる */
  margin-bottom: 2px;
}

/* 単位は短い言葉しか入らない（本・パック・g）。
   **基準を 0 にして、残った幅をもらう形にする。**
   基準に px を置くと、320px では「ステッパー 196 + 余白 12 + 基準」が
   行幅 270 を超えた時点で折り返しの判定に負け、単位だけ次の行に落ちる。
   flex は「入らなければ縮める」より先に「折り返す」を選ぶため */
.add-row .field {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

/* ── 買い物リスト ── */

/* 見ているグループの色をまとう。**どの家のどのグループ用かが一目で分かる** */
.shopping {
  border: 2px solid var(--g-line);
  background: var(--g-bg);
}

.shopping .card-title {
  color: var(--g-ink);
}

.shopping-preview {
  margin: 0;
  padding: var(--sp-3);
  background: var(--card);
  border: 2px solid var(--g-line);
  border-radius: var(--r-small);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
  /* 長い行は折り返す。横スクロールするとコピー前に読めない */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.shopping-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.shopping-actions .btn {
  flex: 1 1 160px;
}

.shopping-actions .btn.primary {
  background: var(--g-fill);
  border-color: var(--g-fill);
  color: var(--g-on);
}

.empty-shopping {
  background: var(--card);
  border-style: dashed;
}

.copy-fallback {
  width: 100%;
  min-height: 120px;
  margin-top: var(--sp-2);
  font-family: inherit;
}

/* ── 管理画面 ── */

.group-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.group-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-left: 6px solid var(--g-fill);
  border-radius: var(--r-small);
  background: var(--card);
}

.group-name {
  flex: 1 1 120px;
  min-width: 0;
}

.group-count {
  font-size: 13px;
  color: var(--ink-weak);
  white-space: nowrap;
}


/* 参加の申し込み。**見落とすと家族が入れないので、枠で目立たせる** */
.pending-card {
  border: 3px solid var(--accent);
  background: var(--accent-bg);
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.member-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 2px solid var(--line);
  border-radius: var(--r-small);
  background: var(--card);
}

/* いま見ている家。一覧の中でどれが表示中かを、色だけでなく枠でも示す */
.member-row.is-current {
  border-color: var(--accent);
}

.member-who {
  display: flex;
  flex-direction: column;
  flex: 1 1 140px;
  min-width: 0;
}

.member-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ログイン ID は、同じ表示名の人を見分けるために出している。
   本人確認の手がかりなので、小さくしても消さない */
.member-id {
  font-size: 12px;
  color: var(--ink-weak);
  overflow-wrap: anywhere;
}

/* 運営元。**いちばん下に、控えめに。**
   毎日使う人が読むところではないので、地の色に沈めておく */
.about-card {
  background: transparent;
  border-style: dashed;
  box-shadow: none;
}

.about-card .card-title {
  font-size: 15px;
  color: var(--ink-weak);
}

/* リンクは下線を残す。**色だけで「押せる」を伝えない** */
.about-card a {
  color: var(--accent-dark);
  text-decoration: underline;
  /* 指で押せる高さを持たせる（本文の中のリンクなので、行の高さで稼ぐ） */
  line-height: 2.2;
  overflow-wrap: anywhere;
}

.invite {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.invite-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px var(--sp-3);
  border: 2px dashed var(--accent);
  border-radius: var(--r-tag);
  background: var(--accent-bg);
  color: var(--accent-dark);
  /* 打ち写すことがあるので、選びやすくしておく */
  -webkit-user-select: all;
  user-select: all;
}

/* ── ログイン画面 ── */

.auth {
  max-width: 420px;
  margin: var(--sp-8) auto;
}

.auth-title {
  margin: 0 0 var(--sp-1);
  font-size: 22px;
  font-weight: 700;
}

.auth-lead {
  margin: 0;
  font-size: 14px;
  color: var(--ink-weak);
}

.auth .btn.wide {
  margin-top: var(--sp-4);
}

.auth .btn.link {
  margin-top: 6px;
}

/* ── 知らせ ── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  transform: translate(-50%, 24px);
  max-width: min(92vw, 460px);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-lift);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 60;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast.error {
  background: var(--danger);
  color: #ffffff;
}

/* 動きを減らす設定の端末では、動かさずに出す */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .btn,
  .swatch::before {
    transition: none;
  }

  .btn:active,
  .swatch:active::before {
    transform: none;
  }

  .item-row.dragging,
  .group-row.dragging {
    transform: none;
  }
}

/* ══════════════════ 5-2) 規約・ポリシーの 2 枚 ══════════════════
 *
 * `terms.html` と `privacy.html` は app.js を読まない素の HTML。
 * **アプリが動かなくても読める**（法が公表を求めるものなので、
 * ログインできない人・JS を切っている人にも届かなければならない）。
 * ここはその 2 枚のためだけのまとまり。
 */

.doc {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom));
  line-height: 1.9;
}

.doc h1 {
  font-size: 22px;
  margin: var(--sp-2) 0 var(--sp-1);
}

.doc h2 {
  font-size: 17px;
  margin: var(--sp-8) 0 var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--line);
}

.doc p,
.doc ul {
  margin: var(--sp-2) 0;
}

.doc ul {
  padding-left: 1.4em;
}

.doc li {
  margin: var(--sp-1) 0;
}

.doc a {
  color: var(--accent-dark);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  background: var(--sunk);
  border-radius: var(--sp-1);
  padding: 1px var(--sp-1);
}

/* 目立たせたい段落。免責や保存期間など、読み飛ばされると困るところ */
.doc-lead {
  background: var(--accent-bg);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-tag) var(--r-tag) 0;
  padding: var(--sp-3);
}

.doc-meta,
.doc-note {
  color: var(--ink-weak);
  font-size: 13px;
}

/* 戻る導線。**上と下の両方に置く。** 長い文書を読み切った人を放り出さない */
.doc-back {
  margin: var(--sp-4) 0;
}

.doc-back a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* 表。**狭い画面でははみ出すので、囲みごと横に送れるようにする** */
.doc-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-3) 0;
  font-size: 14px;
}

.doc-table th,
.doc-table td {
  border: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
}

.doc-table th {
  background: var(--sunk);
  font-weight: 600;
  white-space: nowrap;
}

/* 規約とポリシーへの入口。**ログインの画面にも必ず出す**
   （読まずに登録させない。法が公表を求めるものなので隠さない） */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: 13px;
}

.legal-links a {
  color: var(--ink-weak);
  text-decoration: underline;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}

/* ══════════════════ 6) 画面の幅 ══════════════════ */

/* iPhone SE (320px)。在庫とほしいの 2 つを 1 行に並べると溢れるので、
   .row-controls の折り返しに任せる。ここでは余白だけ詰める */
@media (max-width: 360px) {
  .main {
    padding: var(--sp-2);
  }

  .item-row {
    padding: var(--sp-2);
  }

  .stepper-label {
    padding: 0 2px;
  }

  .app-name {
    display: none;
  }
}

/* タブレット以上。余白を広げ、管理画面のカードを 2 列にする */
@media (min-width: 768px) {
  .main {
    padding: var(--sp-6);
    gap: var(--sp-4);
  }

  .manage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
  }

  /* 申し込みは見落とせないので、2 列になっても横いっぱいに置く */
  .pending-card {
    grid-column: 1 / -1;
  }

  /* 運営元はいちばん下の締め。2 列に割らず、横いっぱいで終わらせる */
  .about-card {
    grid-column: 1 / -1;
  }
}