/*
 * omakake デザインシステム。スマホ前提のモバイルファースト。
 * Propshaft でそのまま配信(プリプロセスなし)のため素の CSS で書く。
 *
 * 設計方針:
 *  - トーンは「白ベースの、すっきりした家計簿」。地の色は白〜寒色グレー + エメラルド
 *    グリーンのアクセント 1 色に絞る(彩度の高い色を並べない。グラデーションで面を塗らない)。
 *  - 金額は最重要要件なので tabular-nums で桁を揃え、常に読みやすく。
 *  - 情報の階層は「地の色(薄グレー)/ 面(白カード)/ 淡い色地(状態)」の 3 段で作り、
 *    強い色は 1 画面 1 箇所(主役の金額・主ボタン)まで。
 *  - モバイルは下タブ、デスクトップは上ナビに自動で切り替える。
 */

:root {
  /* 面・文字(白と寒色グレーのインク) */
  --bg: #f7f8f7;
  --surface: #ffffff;
  --surface-sunken: #eef0ef;
  --text: #16181d;
  --text-soft: #5b6169;
  --muted: #9298a1;
  --border: #e5e7eb;
  --border-strong: #d1d5db;

  /* ブランド(エメラルドグリーン) */
  --primary: #16a34a;
  --primary-strong: #0f7a37;
  --primary-soft: #e8f7ec;
  --on-primary: #ffffff;

  /* 状態色(全体のトーンに合わせて彩度を落とした色) */
  --success: #16a34a;
  --success-soft: #e8f7ec;
  --warning: #a8721f;
  --warning-soft: #f8efdb;
  --danger: #bb5348;
  --danger-soft: #f8e8e5;
  --info: #5f88b4;
  --info-soft: #eaf1f7;

  /* 二人の色(A=デニム / B=あんず)。続柄ではなく並び順で交互に当てる区別用のトーン。 */
  --role-a: #5f88b4;
  --role-a-soft: #eaf1f7;
  --role-b: #c97b8e;
  --role-b-soft: #f9edf0;

  /* 形状・影(角は大きめに丸め、影は温色でごく淡く) */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 23, 27, .05), 0 2px 6px rgba(20, 23, 27, .05);
  --shadow-md: 0 6px 18px rgba(20, 23, 27, .10);
  --shadow-lg: 0 18px 40px rgba(20, 23, 27, .16);
  --ring: 0 0 0 3px rgba(22, 163, 74, .25);

  --maxw: 760px;
  --header-h: 60px;
  --bottomnav-h: 64px;

  /* 余白スケール(既存の主要リテラル値をそのまま段にした。13/14/18px 等の微調整値は
     スケール外として意図的にトークン化しない)。 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;

  /* 役割トークン。ページ横余白は safe-area(横持ち・ノッチ)込みで 1 箇所に定義し、
     main だけでなく全幅リストの行・テーブル端セルも同じ式を共有する。 */
  --page-x: var(--space-4);
  --page-x-l: calc(var(--page-x) + env(safe-area-inset-left, 0px));
  --page-x-r: calc(var(--page-x) + env(safe-area-inset-right, 0px));
  --section-gap: var(--space-4);
  --row-y: var(--space-3);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* 丸ゴシック優先で柔らかい印象に(Apple 端末)。無い環境は通常ゴシックへフォールバック。 */
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(78, 155, 111, .2); }

/* ============================ ヘッダー(上) ============================ */
.site-header {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
  padding: 0 16px;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -.01em;
  color: var(--text);
  margin-right: auto;
  /* 日本語は文字間で改行されるため、幅が詰まるとブランド名が2行に折れる。固定して防ぐ。 */
  white-space: nowrap;
  flex-shrink: 0;
}
.site-header .brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
}

/* デスクトップ用の文字ナビ(モバイルでは隠す) */
.top-nav { display: none; align-items: center; gap: 4px; }
.top-nav a {
  color: var(--text-soft);
  font-size: .92rem;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.top-nav a:hover { background: var(--surface-sunken); text-decoration: none; }
.top-nav a.is-active { color: var(--primary-strong); background: var(--primary-soft); }

.header-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.header-actions .who {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  max-width: 8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }

/* ============================ 本文 ============================ */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  /* 下パディングはボトムナビの実高(bottomnav-h + safe-area-inset-bottom)を跨がせる。
     safe-area 分を足さないと PWA standalone で最下部(「一覧へ戻る」等)がナビに隠れる。
     左右は横持ち・ノッチ端末で内容がノッチに食い込まないよう safe-area を上乗せする。 */
  padding: var(--space-5) var(--page-x-r)
           calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + var(--space-6))
           var(--page-x-l);
}
@media (min-width: 720px) {
  main { padding-bottom: 40px; }
}

.page-head { margin: var(--space-1) 0 var(--space-5); }
h1 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 4px;
  line-height: 1.35;
}
.page-head .sub, h1 + .muted { margin: 0; }
h2 {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: var(--space-6) 0 var(--space-3);
}

/* ============================ カード ============================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: var(--section-gap);
  box-shadow: var(--shadow-sm);
}
a.card, .card-link { transition: transform .12s ease, box-shadow .12s ease; }
a.card:hover, .card-link:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ============================ リスト行(一覧の主役) ============================ */
/* テーブルの代わりに使う行リスト。左=店名+メタ、右=金額+状態で、狭い画面でも
   「いくら使ったか」が縦にスッと読める。 */
.list { padding: 4px 0; }
.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--row-y) var(--space-4);
  color: inherit;
}
.list-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.list-row:hover { text-decoration: none; background: var(--surface-sunken); }
.list-main { flex: 1; min-width: 0; }
.list-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-meta { color: var(--muted); font-size: .82rem; }
.list-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.list-amount {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.list-row .chev { color: var(--border-strong); flex-shrink: 0; }

/* ============================ ボタン ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .12s ease, transform .06s ease, box-shadow .12s ease;
}
.btn:hover { background: var(--primary-strong); text-decoration: none; color: var(--on-primary); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--surface-sunken); color: var(--text); }

/* 破壊操作は面を張らず淡色に(赤いボタンを画面に並べない。確認ダイアログが本防御)。 */
.btn-danger { background: var(--danger-soft); color: var(--danger); box-shadow: none; }
.btn-danger:hover { background: #f3dbd6; color: var(--danger); }
.btn-success { background: var(--success); }
.btn-success:hover { background: var(--primary-strong); color: #fff; }

/* width は明示しない(display:flex の既定の外側 display は block なので width:auto で
   親の content box 幅いっぱいに広がる)。main 直下の非 .card 要素(例: 一覧へ戻る)は
   mobile 全幅バンドの margin-left/right を受けるため、width:100% を明示すると
   マージン分だけ右へ溢れて画面外に見切れる(実機で確認済みの回帰)。 */
.btn-block { display: flex; }
/* <a>/<div> の btn-block は display:flex(block 化)で親の content 幅に伸びるが、フォーム
   コントロール(button/input)は intrinsic 幅が効いて content 幅に留まり左に寄る。これらは常に
   .card 等の内側に置き main 直下の全幅バンド(上記コメント参照)には出ないので、width:100% を
   足して安全に全幅化する(全幅バンドの overflow は起こさない)。 */
button.btn-block, input.btn-block { width: 100%; }
.btn-sm { padding: 7px 13px; font-size: .85rem; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

/* ============================ バッジ ============================ */
/* 状態は「色ドット + ラベル」。絵文字は環境で描画差が出て安っぽくなるため使わない。 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  flex-shrink: 0;
}
.badge-pending      { background: var(--surface-sunken); color: var(--text-soft); }
.badge-done         { background: var(--success-soft); color: var(--success); }
.badge-needs_review { background: var(--warning-soft); color: var(--warning); }
.badge-failed       { background: var(--danger-soft);  color: var(--danger); }
.badge-duplicate    { background: #f8ead9; color: #a5601f; }
.badge-rejected     { background: var(--surface-sunken); color: var(--muted); }
/* レシート状態ではない汎用バッジ(例: 世帯切替の「表示中」)。 */
.badge-active       { background: var(--success-soft); color: var(--success); }

/* ============================ フラッシュ ============================ */
.flash {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}
.flash::before { font-size: 1.05em; line-height: 1.4; }
.flash-notice { background: var(--success-soft); color: #2d5f42; border-color: #cbe5d3; }
.flash-notice::before { content: "✓"; }
.flash-alert  { background: var(--danger-soft);  color: #93453c; border-color: #ecd0c9; }
.flash-alert::before  { content: "!"; font-weight: 800; }

/* ============================ フォーム ============================ */
form .field { margin-bottom: var(--space-4); }
label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="month"], select, textarea {
  width: 100%;
  padding: 11px 13px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .12s ease, box-shadow .12s ease;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239298a1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
input[type="file"] { font-size: 1rem; }

/* 未使用の招待リンク一覧 */
.invite-list { list-style: none; margin: 0; padding: 0; }
.invite-list li { padding: 10px 0; border-top: 1px solid var(--border); }
.invite-list code {
  display: block;
  font-size: .85rem;
  overflow-wrap: anywhere;
  margin-bottom: 6px;
}
.invite-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.invite-meta .btn-sm { margin-left: auto; }

/* ============================ テーブル ============================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
thead th {
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--muted);
  font-weight: 700;
  background: transparent;
  border-bottom-color: var(--border-strong);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--surface-sunken); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 品目編集は 1 行 grid(品名 / カテゴリ / 金額 / 削除)。カテゴリが 4 種・ラベル 2〜3 文字の
   前提で select がコンパクトな auto 幅に収まるため 1 行で成立する。5 文字超のカテゴリを
   足して品名が圧迫されるようなら、カテゴリを 2 段目に落とす 1.5 行構成へ後退すること。
   .item-row のクラス名は nested-items コントローラの DOM 契約(recalc が querySelectorAll
   する)なので変えない。 */
/* 注意: グローバルの input[type=…]/select は width:100%(詳細度 0,1,1)。クラス単独(0,1,0)では
   負けて金額欄が 100% に広がり画面外へはみ出す(過去に実機で崩壊)。input./select. を付けて
   同詳細度 + 後方定義で確実に上書きする。 */
.item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.item-row:not(:last-child) { border-bottom: 1px solid var(--border); }
input.item-name { width: auto; min-width: 0; padding: 8px 10px; }
input.item-amount {
  width: 92px; text-align: right; font-variant-numeric: tabular-nums; padding: 8px 10px;
}
/* 文字サイズは 1rem のまま(16px 未満にすると iOS がフォーカス時にページズームする)。 */
select.item-category {
  width: auto; min-width: 0;
  padding: 8px 26px 8px 8px;
  background-position: right 8px center;
}
/* 狭幅端末(SE 等 ~320px)では金額と gap を詰めて品名の幅を守る。 */
@media (max-width: 359.98px) {
  .item-row { gap: 6px; }
  input.item-amount { width: 84px; }
}

/* フッター: 品目合計 + 差額調整 = 合計。右に金額を寄せ、合計の上に太い区切り線。 */
.item-foot { margin-top: 6px; }
.item-foot-line {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0;
}
.item-foot-line .amount { flex-shrink: 0; }
.item-foot-adj { color: var(--muted); }
.item-foot-adj .adj-category { width: auto; display: inline-block; margin-left: 6px; }
.item-foot-total { border-top: 2px solid var(--border-strong); font-size: 1.05rem; }
/* フッターの合計は上部入力欄への導線(タップでフォーカス)。押せると分かるようにする。 */
.item-foot-total .amount { cursor: pointer; }
/* 合計はユーザーが一番気にする値。フォーム最上部にヒーローとして大きく出す。
   品目を開いてスクロールしても編集本体を見失わないよう、ヘッダー(--header-h)の直下に
   sticky で貼り付ける(z-index はヘッダー<30>より下)。背景はカードと同じ --surface で、
   下の品目がヒーローの裏に透けないようにする。 */
.total-hero {
  text-align: center; margin-bottom: 20px;
  position: sticky; top: var(--header-h); z-index: 20;
  background: var(--surface); padding: 8px 0 10px;
}
.total-hero label { display: block; color: var(--muted); font-size: .82rem; font-weight: 600; margin-bottom: 2px; }
/* 主役の数字だが「タップして直せる入力欄」だと分からせる必要がある(枠なし透過だと
   表示専用に見え、iPhone でタップ・フォーカスもしづらい)。塗り + 全周の枠 + 広めの
   タップ領域で入力欄と分かるようにしつつ、大きな数字でヒーロー感は保つ。 */
.total-hero input {
  width: 100%; text-align: center;
  font-size: 2.3rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--text);
  -webkit-appearance: none; appearance: none;
}
.total-hero input:focus {
  outline: none;
  border-color: var(--primary); background: var(--surface);
  box-shadow: var(--ring);
}

/* 品目・カテゴリは任意。畳みを主役(合計)から一段下げて出す。 */
.items-fold { margin: 4px 0 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.items-fold > summary {
  cursor: pointer; color: var(--muted); font-size: .9rem; font-weight: 600;
  list-style: none; padding: 4px 0;
}
.items-fold > summary::before { content: "▸ "; }
.items-fold[open] > summary::before { content: "▾ "; }
.items-fold > summary::-webkit-details-marker { display: none; }
.items-fold[open] > summary { margin-bottom: 8px; }
/* 削除はチェックボックスを × アイコンに見た目替え(nested attributes の _destroy 契約で
   checkbox 自体は DOM に必要)。label 内は checkbox → .del-x の並びを崩さない
   (`~` セレクタで色・フォーカスを連動させている)。 */
.del-check {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; cursor: pointer;
}
.del-check input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
/* .del-x はヒットエリア(36px)いっぱいに広げ、フォーカスリングをタップ領域と一致させる。 */
.del-check .del-x {
  display: grid; place-items: center;
  width: 100%; height: 100%; border-radius: 8px;
  font-size: 1.25rem; line-height: 1; color: var(--muted);
}
.del-check input:checked ~ .del-x { color: var(--danger); }
.del-check input:focus-visible ~ .del-x { box-shadow: var(--ring); }
/* 削除予約の行は減光して「保存で消える」ことを示す(:has() 非対応環境では × の色変化のみに劣化)。 */
.item-row:has(input[name*='_destroy']:checked) { opacity: .45; }

.amount { font-variant-numeric: tabular-nums; font-weight: 700; }
.muted { color: var(--muted); }
.text-center { text-align: center; }

/* ============================ ダッシュボードの数値カード ============================ */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
/* メンバーごとの淡い色地カード。左帯より面で塗る方が柔らかく、どちらの数字かが迷わない。 */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.stat--member-a { background: var(--role-a-soft); border-color: #d9e5ef; }
.stat--member-b { background: var(--role-b-soft); border-color: #f0dce2; }
.stat .label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat--member-a .label::before,
.stat--member-b .label::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
}
.stat--member-a .label::before { background: var(--role-a); }
.stat--member-b .label::before { background: var(--role-b); }
.stat .value {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* ============================ 精算ヒーロー ============================ */
/* ベタ塗りグラデーションはやめ、白地 + 大きな緑の金額で「主役は数字」に。 */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin-bottom: var(--section-gap);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.hero .hero-label {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  margin: 0 0 10px;
}
.hero .hero-flow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.hero .hero-flow .arrow { color: var(--muted); }
.hero .hero-amount {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--primary-strong);
}
.hero .hero-settled {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary-strong);
}
.hero--settled { background: var(--primary-soft); border-color: #d3e8da; }
.hero-actions { margin-top: 8px; }
.hero-actions a { color: var(--primary-strong); font-weight: 700; font-size: .92rem; }

/* ============================ レビュー: 画像と読取値 ============================ */
.review-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
/* grid item の min-width は既定 auto = 内容の最小幅。品目を展開すると nowrap の明細テーブルが
   広く、1fr トラックがその内容幅まで膨張してページごと横に広がる(table-wrap の overflow が
   効かない)。min-width:0 でトラックをコンテナ幅に固定し、はみ出しは table-wrap 内の横スクロールで吸収する。 */
.review-grid > * { min-width: 0; }
/* 編集フォームが長い(項目 + 明細)ため、画像は少し広めに取り、スクロールに追従させて
   編集中も見えるようにする(細字を突き合わせながら直せる)。
   境界はナビ切替と同じ 720px(それ未満はフラット全幅バンドのため、2 カラムと混ぜない)。 */
@media (min-width: 720px) {
  .review-grid { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .review-image { position: sticky; top: 16px; }
  .review-image > img { max-height: calc(100vh - 32px); object-fit: contain; }
}
.review-image > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}

/* アプリ内の拡大オーバーレイ(PWA でも別タブに飛ばさず、× / 背景タップ / Escape で閉じる)。 */
.image-zoom-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .85);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.image-zoom-overlay[hidden] { display: none; }
.image-zoom-overlay img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 6px;
  /* 画面より大きいレシートはピンチで拡大できる(タップは背景と同じく閉じる)。 */
  touch-action: pinch-zoom;
}
.image-zoom-close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .9); color: #222;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* レビュー待ちリスト項目(.card.list 内の .list-row として描画)。行レイアウト・区切り線・
   hover 背景は .list-row、本文・メタ文字は .list-main / .list-meta を再利用し、ここは
   レビュー固有のサムネイルとタイトル横バッジの並びだけを持つ。 */
.review-item .thumb {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.review-item .title-row {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
}
.review-item .title-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 状態説明バー(レシート詳細)。対応要否で色を変え、要対応は左に色帯。 */
.status-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border-left: 4px solid var(--border-strong);
}
/* 副次アクション(読み直す/削除)は右に寄せて 1 グループに閉じ、折り返しても単独で左に散らせない。 */
.status-bar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 読み取り中インジケータ。回るスピナーで「処理中・自動で更新される」を視覚化する。 */
.processing { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; font-weight: 600; }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* 「動きを減らす」設定では回転を止める(前庭障害への配慮)。 */
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.status-bar--action { border-left-color: var(--warning); background: var(--warning-soft); }
.status-bar--good   { border-left-color: var(--success); background: var(--success-soft); }
.status-bar--wait   { border-left-color: var(--info); background: var(--info-soft); }
.status-bar--off    { border-left-color: var(--muted); }

/* ============================ 空状態 ============================ */
.empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 16px;
  font-size: .95rem;
}
.empty .emoji { font-size: 2.4rem; display: block; margin-bottom: 10px; }

/* ============================ アップロード ============================ */
.upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 38px 16px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  margin-bottom: 14px;
  transition: border-color .12s ease, background .12s ease;
}
.upload-drop:hover { border-color: var(--primary); background: var(--primary-soft); }
.upload-drop:active { background: var(--primary-soft); }
.upload-drop-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  box-shadow: var(--shadow-sm);
  font-size: 1.7rem;
}
.upload-input { display: none; }
.upload-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.upload-thumb {
  width: 84px; height: 84px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ============================ セグメント(状態フィルタ) ============================ */
/* 5 択(すべて/要確認/完了/読み取り中/対象外)が 390px 級の画面でも横スクロール無しで
   収まるよう、パディング・字間を詰めている(狭い画面で最後の項目が窮屈に見えていた実機指摘)。 */
.segmented {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.segmented a {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-soft);
}
.segmented a:hover { text-decoration: none; color: var(--text); }
.segmented a.is-active {
  background: var(--surface);
  color: var(--primary-strong);
  box-shadow: var(--shadow-sm);
}

/* ============================ ボトムナビ(モバイル) ============================ */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--border);
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 700;
}
.bottom-nav a:hover { text-decoration: none; }
.bottom-nav a svg { width: 23px; height: 23px; }
.bottom-nav a.is-active { color: var(--primary-strong); }

/* 中央の強調アクション(アップロード) */
.bottom-nav .nav-fab { position: relative; }
.bottom-nav .nav-fab .fab {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(22, 163, 74, .4);
}
.bottom-nav .nav-fab .fab svg { width: 26px; height: 26px; }
.bottom-nav .nav-fab span { color: var(--muted); }

/* ============================ レスポンシブ切替 ============================ */
@media (min-width: 720px) {
  .top-nav { display: flex; }
  .bottom-nav { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================ 認証(ログイン) ============================ */
.auth-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(90% 60% at 50% -10%, #e9f3ec 0%, transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  padding: 32px 28px;
}
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  text-align: center;
}
.auth-brand .brand-mark { width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem; }
.auth-brand h1 { font-size: 1.5rem; margin: 0; }
.auth-brand p { margin: 0; color: var(--muted); font-size: .9rem; }
.auth-card .field { margin-bottom: 14px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: .9rem; }

/* ============================ モバイル: フラット全幅バンド ============================ */
/* スマホ幅ではカードの額縁(main 横 padding + card padding + border の三重取りで本文が
   画面の 8 割に痩せる)をやめ、iOS の grouped list 風に「全幅の白バンド + 紙色ギャップ」で
   セクションを区切る。透過フラットにしないのは、紙(bg)/白面(surface)の 2 層で階層を
   作る設計方針(ファイル冒頭)を保つため。デスクトップは中央カラムに額縁が視覚的に
   正しいのでカードのまま。このブロックはファイル末尾に置き、同詳細度の上書きを後勝ちで
   確実にする。 */
@media (max-width: 719.98px) {
  main { padding-left: 0; padding-right: 0; }

  /* 直下の要素は既定で本文インセット、全幅バンドにする要素だけ :not() で除外する。
     打ち消し漏れの故障モードが「従来どおり内側に寄る」になり安全側。:not() を
     チェーンして詳細度を (0,3,1) に上げ、.page-head 等の margin ショートハンド
     (0,1,0)に負けないようにする(セレクタリスト形の :not(a, b) は使わない —
     非対応ブラウザで規則ごと落ちるとインセット自体が消える)。 */
  main > :not(.card):not(.hero):not(.review-grid) {
    margin-left: var(--page-x-l);
    margin-right: var(--page-x-r);
  }

  /* カード → 全幅バンド。上下の border はヘアラインとして残す。左右 border は
     width だけ 0 にする(shorthand で消すと .status-bar--* の border-left-color
     上書きを implicit initial が道連れにする)。 */
  .card, .hero {
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: var(--page-x-l);
    padding-right: var(--page-x-r);
  }
  a.card:hover, .card-link:hover { transform: none; box-shadow: none; }

  /* 行リストはバンド側の padding を外し、行自身がページ余白を持つ
     (タップハイライトが画面端まで届く)。 */
  .card.list { padding-left: 0; padding-right: 0; }
  .list-row { padding: var(--row-y) var(--page-x-r) var(--row-y) var(--page-x-l); }

  /* テーブルは横スクロールを全幅で受け、端のセルにページ余白を足して文字だけ揃える。 */
  .card.table-wrap { padding-left: 0; padding-right: 0; }
  .card.table-wrap th:first-child, .card.table-wrap td:first-child { padding-left: var(--page-x-l); }
  .card.table-wrap th:last-child,  .card.table-wrap td:last-child  { padding-right: var(--page-x-r); }

  /* レシート詳細の状態バーは左の色帯(要対応の視覚シグナル)を復元する。 */
  .card.status-bar { border-left-width: 4px; }

  /* レビュー画像はバンドでなく本文インセット(額縁写真のままが自然)。 */
  .review-grid > .review-image { margin-left: var(--page-x-l); margin-right: var(--page-x-r); }
}