/* ==========================================================================
   ASSET MANAGEMENT — 業務システム向けの高密度レイアウト

   画面は「アプリケーションバー / モジュールバー / 作業領域 / ステータスバー」の
   4段で固定する。作業領域の中身は見出しではなく罫線と表で並べ、装飾は持たせない。
   ========================================================================== */

:root{
  /* 面 */
  --bg:#e9ecef; --surface:#fff; --head:#f1f3f6; --sub:#f7f8fa; --hover:#eaf1f8; --sel:#e2edf7;
  /* 文字 */
  --ink:#1b232e; --muted:#59636f; --faint:#8a94a0;
  /* 罫線 */
  --line:#dde1e6; --line-strong:#bfc7d0; --line-grid:#e6e9ed;
  /* 意味色。業務系なので彩度を落として、警告と実績の区別だけ付ける */
  --accent:#1a5c92; --accent-dark:#12456e; --accent-soft:#dbe8f4;
  --pos:#13664a; --neg:#b02a20; --warn:#8a6100;
  /* システムクローム */
  --chrome:#2b3644; --chrome-line:#465264; --chrome-ink:#dfe4ea; --chrome-faint:#9aa6b4;
  --s-1:.125rem; --s-2:.25rem; --s-3:.375rem; --s-4:.5rem; --s-5:.75rem; --s-6:1rem;
  --fs-xs:.6875rem; --fs-sm:.75rem; --fs-md:.8125rem; --fs-lg:.875rem; --fs-num:1rem; --fs-big:1.375rem;
  --bar:1.875rem;   /* アプリケーションバー */
  --mod:1.75rem;    /* モジュールバー */
  --status:1.375rem;/* ステータスバー */
  font-family:"Segoe UI","Yu Gothic UI",-apple-system,BlinkMacSystemFont,Inter,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* 320px の端末でスクロールバーが幅を取ると、下限を 320 にしていると本文がはみ出す。
   実際に読めなくなる幅まで下げて、横スクロールが出ないほうを優先する */
body{min-width:288px;margin:0;color:var(--ink);background:var(--bg);font-size:var(--fs-md);line-height:1.45}
button,select,input,textarea{font:inherit}
button{cursor:pointer;border-radius:0}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:.5rem;top:.5rem;z-index:40;padding:var(--s-3) var(--s-4);color:#fff;background:var(--accent);transform:translateY(-200%)}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}

/* ---------- application bar ---------- */
.topbar{position:sticky;top:0;z-index:7;display:flex;align-items:center;gap:var(--s-6);height:var(--bar);padding:0 max(var(--s-5),calc((100vw - 1720px)/2));color:var(--chrome-ink);background:var(--chrome)}
.brand{display:flex;align-items:center;color:#fff;text-decoration:none;font-size:var(--fs-sm);font-weight:700;letter-spacing:.11em;white-space:nowrap}
.topbar-actions{display:flex;align-items:center;gap:var(--s-5);margin-left:auto}
.today{color:var(--chrome-faint);font-size:var(--fs-xs);white-space:nowrap;font-variant-numeric:tabular-nums}
/* 保存・同期の状態。広い画面ではステータスバーが持つので、ヘッダー側は狭い画面だけ出す */
.header-sync{display:none;align-items:center;gap:var(--s-3);min-width:0;overflow:hidden;color:var(--chrome-faint);font-size:var(--fs-xs);white-space:nowrap;text-overflow:ellipsis}
/* いまの言語（左・沈んだ面）と切替先（右・押せる面）を並べて見せる */
.langsw{display:inline-flex;align-items:stretch;height:1.25rem;border:1px solid var(--chrome-line)}
.langsw-now{display:flex;align-items:center;padding:0 var(--s-4);color:#fff;font-size:var(--fs-xs);font-weight:700;white-space:nowrap;background:var(--chrome-line)}
.lang-toggle{padding:0 var(--s-4);height:100%;color:var(--chrome-faint);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;background:transparent;border:0}
.lang-toggle:hover{color:#fff;background:rgba(255,255,255,.12)}

/* ---------- module bar ---------- */
.modulebar{position:sticky;top:var(--bar);z-index:6;display:flex;align-items:stretch;height:var(--mod);padding:0 max(var(--s-5),calc((100vw - 1720px)/2));background:var(--surface);border-bottom:1px solid var(--line-strong)}
.nav-button{padding:0 var(--s-6);color:var(--muted);font-size:var(--fs-md);font-weight:600;background:none;border:0;border-right:1px solid var(--line);border-bottom:2px solid transparent}
.nav-button:hover{color:var(--ink);background:var(--head)}
.nav-button.active{color:var(--accent);font-weight:700;background:var(--accent-soft);border-bottom-color:var(--accent)}

main{width:min(100% - 1rem,1720px);margin:auto;padding:var(--s-4) 0 calc(var(--status) + 1.5rem)}
/* カードとカードの間は、どの画面でも同じ幅にする。
   個別に margin を足していくと、画面ごとにずれて「ここだけ詰まっている／空いている」
   が生まれるので、間隔はこの gap だけが決める */
.view{display:none}
.view.active{display:flex;flex-direction:column;gap:var(--s-4)}

/* ---------- status bar ---------- */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;align-items:center;gap:var(--s-5);height:var(--status);padding:0 var(--s-5);color:var(--chrome-faint);font-size:var(--fs-xs);background:var(--chrome);border-top:1px solid var(--chrome-line)}
.st-module{padding-right:var(--s-5);color:#fff;font-weight:700;border-right:1px solid var(--chrome-line)}
.st-records{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.st-sync{margin-left:auto;display:flex;align-items:center;gap:var(--s-3);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}

/* ---------- KPI strip ---------- */
.statbar{display:flex;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line-strong)}
.stat{display:flex;flex:1 1 0;flex-direction:column;justify-content:center;gap:1px;min-width:0;padding:var(--s-4) var(--s-5);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat.opts{flex:0 1 auto}
.stat>span{color:var(--muted);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat>strong{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat>small{color:var(--faint);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 主指標。飾らずに、左の帯と背景だけで一段強くする */
.stat.key{background:var(--sub);border-left:3px solid var(--accent);border-right-color:var(--line-strong)}
.stat.key>span{color:var(--accent)}
.stat.key>strong{font-size:var(--fs-big)}
.stat>strong.neg{color:var(--neg)}
.stat>strong.pos{color:var(--pos)}
.stat.opts{flex-direction:row;align-items:center;justify-content:flex-end;gap:var(--s-4)}
.chk{display:inline-flex;align-items:center;gap:var(--s-3);color:var(--muted);font-size:var(--fs-sm);white-space:nowrap}
.chk input{width:auto;margin:0}

/* ---------- columns ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s-4);align-items:start}
.col-main,.col-side{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}

/* ---------- section ---------- */
.sec{background:var(--surface);border:1px solid var(--line-strong)}
.sec-head{display:flex;align-items:center;gap:var(--s-4);min-height:1.75rem;padding:var(--s-2) var(--s-5);background:var(--head);border-bottom:1px solid var(--line-strong)}
.sec-head h2{position:relative;padding-left:var(--s-4);font-size:var(--fs-sm);font-weight:700;white-space:nowrap}
.sec-head h2::before{position:absolute;left:0;top:.15em;bottom:.15em;width:2px;content:"";background:var(--accent)}
.sec-total{margin-left:auto;color:var(--muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-act{display:flex;gap:var(--s-2);flex:none}
.sub-head{padding:var(--s-2) var(--s-5);color:var(--muted);font-size:var(--fs-xs);font-weight:700;background:var(--sub);border-bottom:1px solid var(--line)}
.note{color:var(--muted);font-size:var(--fs-sm)}
/* 一覧の並びが適用順そのものだと分かるよう、表の直前に置いて地色でつなぐ */
.order-note{padding:var(--s-3) var(--s-5);font-size:var(--fs-xs);line-height:1.5;background:var(--sub);border-bottom:1px solid var(--line)}
/* 番号は店名と同じ行に置く。.tr strong が block なので、この列だけ横並びにする */
.t-rule .c-main,.t-cat .c-main{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-3);align-items:baseline}
.t-rule .c-main small{grid-column:2}
.rank{color:var(--faint);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;text-align:right}
.fold-body{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5)}
/* 補正ダイアログ。自動集計の内訳と、保存で何が起きるかを入力欄と同じ幅で挟む */
.calc-note,.calc-diff{grid-column:1/-1;padding:var(--s-4) var(--s-5);background:var(--sub);border:1px solid var(--line)}
.calc-diff:empty{display:none}
.calc-card{display:flex;align-items:baseline;gap:var(--s-4);margin-bottom:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.calc-card span{color:var(--muted);font-size:var(--fs-xs)}
.calc-card strong{font-size:var(--fs-lg);font-weight:700}
.calc-rows{display:grid;gap:var(--s-1);margin:0}
.calc-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4)}
.calc-rows dt{color:var(--muted);font-size:var(--fs-sm)}
.calc-rows dd{margin:0;font-size:var(--fs-md);font-weight:600;font-variant-numeric:tabular-nums}
.calc-rows dd.neg{color:var(--neg)}
.calc-rows dd.pos{color:var(--pos)}
.calc-title{margin-bottom:var(--s-3);font-size:var(--fs-sm);font-weight:700}
.calc-help,.calc-none{margin-top:var(--s-3);color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
.calc-diff{background:var(--accent-soft);border-color:var(--accent)}

/* ---------- controls ---------- */
.mini{height:1.375rem;padding:0 var(--s-4);color:var(--ink);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;background:linear-gradient(#fff,#f4f6f8);border:1px solid var(--line-strong)}
.mini:hover{background:linear-gradient(#f7f9fb,#e8ecf1);border-color:var(--faint)}
.mini:active{background:#e8ecf1}
.mini.go{color:#fff;background:var(--accent);border-color:var(--accent-dark)}
.mini.go:hover{background:var(--accent-dark)}
.primary,.secondary,.danger-button{height:1.75rem;padding:0 var(--s-5);font-size:var(--fs-md);font-weight:600;border:1px solid var(--line-strong)}
.primary{color:#fff;background:var(--accent);border-color:var(--accent-dark)}
.primary:hover{background:var(--accent-dark)}
.secondary{color:var(--ink);background:linear-gradient(#fff,#f4f6f8)}
.secondary:hover{background:linear-gradient(#f7f9fb,#e8ecf1);border-color:var(--faint)}
.text-button{padding:0;color:var(--accent);font-size:var(--fs-sm);background:none;border:0;text-decoration:underline;text-underline-offset:.2em}
.button-row{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.danger-button{color:var(--neg);background:#fff;border-color:#d8b4b0}
.danger-button:hover{color:#fff;background:var(--neg);border-color:var(--neg)}
.sec.danger{border-color:#d8b4b0}
/* 危険な操作は通常の設定と地続きにしない。間を空け、見出しでも色を変える */
.danger-zone .sec-head{background:#fbeeec;border-bottom-color:#d8b4b0}
.danger-zone .sec-head h2{color:var(--neg)}
.danger-zone .sec-head h2::before{background:var(--neg)}
/* セクションの中に畳んで入れる追加フォーム。見出しは操作として見せる */
.fold.flush>summary{color:var(--accent)}
.fold.flush>summary::before{color:var(--accent)}

/* ---------- data grid ---------- */
/* 業務システムの一覧に寄せて、列の境目も細い縦罫で区切る。
   セル側に余白を持たせ、行には持たせない（罫線が途切れないようにするため） */
.tbl{min-width:0}
.tr,.th{display:grid;align-items:center;min-height:1.875rem}
.tr>*,.th>*{min-width:0;padding:0 var(--s-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr>*+*,.th>*+*{border-left:1px solid var(--line-grid)}
.tr{padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.tr:last-child{border-bottom:0}
.tr:hover{background:var(--hover)}
.th{padding:var(--s-2) 0;color:var(--muted);font-size:var(--fs-xs);font-weight:700;background:var(--sub);border-bottom:1px solid var(--line-strong)}
.tr strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr small,.tr .dim{display:block;color:var(--muted);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr .m-only{display:none}
.num{font-variant-numeric:tabular-nums;text-align:right;font-weight:600;white-space:nowrap}
.num.expense,.num.neg{color:var(--neg)}
.num.income,.num.pos{color:var(--pos)}
.num.transfer{color:var(--accent)}
.num.zero{color:var(--faint);font-weight:400}
.sub{color:var(--muted);font-weight:400;font-size:var(--fs-sm)}
.tag{display:inline-block;padding:0 var(--s-3);color:var(--muted);font-size:var(--fs-xs);font-weight:600;background:var(--head);border:1px solid var(--line-strong);white-space:nowrap;vertical-align:1px}
.tag.warn{color:var(--warn);border-color:#ddc89a;background:#fbf5e7}
.tag.partner{color:var(--accent);border-color:#b9cee2;background:var(--accent-soft)}
.date{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 行の操作は ⋯ ひとつに畳む。小さな記号を並べると、指では狙えず目も滑る */
.acts{display:flex;gap:1px;justify-content:flex-end}
.ib{display:grid;place-items:center;width:1.25rem;height:1.25rem;padding:0;color:var(--faint);font-size:var(--fs-sm);line-height:1;background:none;border:1px solid transparent}
.ib:hover{color:var(--ink);background:#fff;border-color:var(--line-strong)}
.ib.del:hover{color:var(--neg);border-color:#d8b4b0}
/* 並び替えの矢印。⋯ の左に置き、端では消さずに沈ませる（行ごとに列幅がずれない） */
.ib.move{width:1.5rem;height:1.75rem;font-size:var(--fs-sm)}
.ib.move:disabled{color:var(--line);background:none;border-color:transparent;cursor:default}
.ib.more{width:1.75rem;height:1.75rem;font-size:1rem;color:var(--muted)}
.ib.more:hover{color:var(--ink);background:#fff;border-color:var(--line-strong)}
/* 行そのものが編集への入口。押せることが分かるよう、当たり判定と手の形を持たせる */
.row-tap{cursor:pointer}

/* 列の定義。DOMの並びがそのまま列の並びになる */
.t-asset{grid-template-columns:minmax(5rem,1.7fr) minmax(4rem,.9fr) 4.5rem minmax(5rem,1fr) 7rem}
.t-card{grid-template-columns:minmax(5rem,1.3fr) minmax(4rem,.9fr) 4.5rem minmax(4rem,.8fr) minmax(4rem,.8fr) minmax(4.5rem,1fr) 7rem}
.t-rec{grid-template-columns:minmax(5rem,1.5fr) minmax(3.5rem,.7fr) minmax(3rem,.6fr) minmax(4rem,1fr) 4.5rem minmax(4.5rem,1fr) 4.5rem}
.t-up{grid-template-columns:3.75rem minmax(4rem,1fr) minmax(4.5rem,.8fr)}
/* 先頭は選択のチェック、末尾は並べ替え↑↓と ⋯ */
.t-entry{grid-template-columns:1.75rem 3.75rem minmax(3.5rem,.7fr) minmax(6rem,1.7fr) minmax(4rem,.8fr) minmax(4.5rem,1fr) 7rem}
/* 押せる見出し。並び替えの矢印は文字の直後に置いて、列名と離さない */
.sort-head{display:inline-flex;align-items:center;gap:var(--s-2);max-width:100%;padding:0;
  color:inherit;font:inherit;font-weight:inherit;background:none;border:0;text-align:left}
.sort-head:hover{color:var(--accent);text-decoration:underline}
.sort-head.on{color:var(--accent);font-weight:700}
.num>.sort-head{justify-content:flex-end;width:100%}
.sort-mark{font-size:.625rem;font-style:normal;line-height:1}
.pick{display:flex;align-items:center;justify-content:center;padding:0}
.tr>.pick{border-left:0}
.pick input{width:1rem;height:1rem;margin:0;cursor:pointer}
/* 選んだ行は地色を変える。チェックだけだと、どれが対象か流し読みで追えない */
.tr.picked{background:var(--sel);box-shadow:inset 2px 0 0 var(--accent)}
.t-move{grid-template-columns:3.75rem 4.75rem minmax(6rem,1.6fr) minmax(4.5rem,1fr) minmax(4.5rem,1fr) 3rem}
.t-hist{grid-template-columns:minmax(4rem,1fr) minmax(4.5rem,1fr) minmax(4.5rem,1fr) 3rem}
.t-reimb{grid-template-columns:minmax(5rem,1.5fr) minmax(4rem,1fr) minmax(4.5rem,1fr) 3.75rem}
.t-rule{grid-template-columns:minmax(5rem,1.6fr) minmax(4rem,1fr) 2rem}
.t-cat{grid-template-columns:minmax(5rem,1fr) 4.5rem 7rem}
.t-arch{grid-template-columns:minmax(5rem,1fr) auto}
.t-set{grid-template-columns:minmax(0,1fr) auto;align-items:start;padding:var(--s-4) 0}
/* 設定は一覧ではなく項目の並びなので、列として区切らない */
.t-set>*{white-space:normal}
.t-set>*+*{border-left:0}
.t-set small{white-space:normal;line-height:1.4}
.t-set .acts,.t-reimb .acts{opacity:1}
.scroll-y{max-height:17rem;overflow-y:auto}

/* 月の区切り。日付順に流すだけでは月ごとの比較ができない */
.grp{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-2) var(--s-4);background:var(--head);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.grp b{font-size:var(--fs-xs);font-weight:700}
.grp .num{margin-left:auto;font-size:var(--fs-sm)}
.grp small{color:var(--faint);font-size:var(--fs-xs)}

.empty{display:grid;place-items:center;gap:var(--s-3);min-height:4.5rem;padding:var(--s-5);color:var(--muted);font-size:var(--fs-sm);text-align:center}
.empty strong{font-size:var(--fs-md);color:var(--ink)}

/* ---------- breakdown ---------- */
.breakdown{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-5)}
.donut{width:6.5rem;aspect-ratio:1;flex:none;border-radius:50%;background:conic-gradient(var(--line) 0 100%);position:relative}
.donut::after{position:absolute;inset:24%;content:"";background:var(--surface);border-radius:50%}
/* 家計簿の内訳。円の中に合計を置き、凡例をそのまま絞り込みのボタンにする */
.donut-lg{width:8rem;display:grid;place-items:center}
.donut-center{position:relative;z-index:1;display:grid;justify-items:center;gap:1px;text-align:center;line-height:1.1}
.donut-center small{color:var(--muted);font-size:var(--fs-xs)}
.donut-center strong{font-size:var(--fs-lg);font-weight:700;font-variant-numeric:tabular-nums}
.legend{flex:1;min-width:0;padding:0;margin:0;list-style:none}
/* 家計簿は枠が画面幅いっぱいなので、1列に並べると名前と金額の間が間延びする。
   入るだけ列を作って、視線の移動を短くする */
.legend-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:0 var(--s-6);align-content:start}
.legend-pick li{padding:0;border-bottom:0}
.legend-pick-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-4);
  width:100%;min-height:1.75rem;padding:var(--s-2) var(--s-3);font-size:var(--fs-sm);text-align:left;
  background:none;border:1px solid transparent;border-bottom-color:var(--line)}
.legend-pick-btn:hover{background:var(--hover)}
.legend-pick-btn.on{background:var(--sel);border-color:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.legend-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-4);padding:var(--s-2) 0;font-size:var(--fs-sm);border-bottom:1px solid var(--line)}
.legend li:last-child{border-bottom:0}
.legend li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend strong{font-variant-numeric:tabular-nums;font-weight:600}
.legend .pct{color:var(--faint);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.dot{width:.5rem;height:.5rem;background:var(--dot)}

/* ---------- forecast ---------- */
#forecast-chart{position:relative;padding:var(--s-4) var(--s-3) 0}
.chart-tooltip{position:absolute;z-index:2;padding:var(--s-2) var(--s-4);color:#fff;font-size:var(--fs-xs);line-height:1.35;white-space:nowrap;background:var(--chrome);transform:translate(-50%,-115%);pointer-events:none}
.forecast-legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);padding:var(--s-3) var(--s-5) var(--s-4);color:var(--muted);font-size:var(--fs-xs)}
.forecast-legend>span{display:inline-flex;align-items:center;gap:var(--s-3)}
.forecast-legend i{width:1.1rem;height:0;border-top:2px solid var(--accent)}
.forecast-legend i.dashed{border-top-style:dashed}
.forecast-legend code{padding:0 var(--s-3);font-size:var(--fs-xs);background:var(--sub);border:1px solid var(--line)}
/* 変数名だけでは何を指すか読めないので、同じ呼び名の日本語を式の下に添える */
.formula-words{display:block;color:var(--muted);font-size:var(--fs-xs);line-height:1.5}
#setting-formula code{display:inline-block;margin-bottom:2px;padding:0 var(--s-3);font-size:var(--fs-xs);background:var(--sub);border:1px solid var(--line)}

/* ---------- category breakdown ---------- */

/* ---------- month bar ---------- */
/* 家計簿は月ごとに見る。ページの範囲を決める操作なので、絞り込みより上に置く */
.monthbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--line-strong)}
/* 表示中の年月は1か所だけに出す。月入力そのものを見出しの大きさにして、
   全期間のときだけ入力を隠して文字へ差し替える（両方を同時に出さない） */
.month-nav{display:flex;align-items:center;gap:var(--s-2)}
.month-input,.month-title{min-width:7.5rem;height:1.875rem;padding:0 var(--s-3);color:var(--ink);
  font-size:var(--fs-lg);font-weight:700;font-variant-numeric:tabular-nums;text-align:center;
  background:transparent;border:1px solid transparent}
.month-input:hover{background:var(--head);border-color:var(--line-strong)}
.month-input:focus{background:var(--surface);border-color:var(--accent)}
.month-title{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
/* 移動は年月に添える操作なので、控えめな記号ボタンにする */
.nav-arrow{min-width:1.875rem;height:1.875rem;color:var(--muted);font-size:var(--fs-sm)}
.month-scope{display:flex;align-items:center;gap:var(--s-2);padding-left:var(--s-4);border-left:1px solid var(--line)}
/* 全期間のとき、実際に明細が入っている月の範囲を添える */
.month-range{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap}
.mini.on{color:#fff;background:var(--accent);border-color:var(--accent-dark)}
/* 一覧に対する操作。元に戻す・やり直すは押せる面、削除だけ危険色にする */
.list-ops{display:flex;align-items:center;gap:var(--s-4);margin-left:auto}

/* 一覧の末尾に置く破壊的操作。普段は文字だけの控えめな見た目にして、
   触れたときに危険であることを色で示す */
.list-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);background:var(--sub)}
.list-footer-note{color:var(--faint);font-size:var(--fs-xs)}
.link-danger{min-height:1.75rem;padding:0 var(--s-4);color:var(--muted);font-size:var(--fs-sm);
  background:none;border:1px solid transparent;text-decoration:underline;text-underline-offset:.2em}
.link-danger:hover,.link-danger:focus-visible{color:var(--neg);background:#fbeeec;border-color:#d8b4b0;text-decoration:none}
.link-danger:disabled{color:var(--faint);text-decoration:none;cursor:default}
.mini:disabled{color:var(--faint);background:var(--head);border-color:var(--line);cursor:default}
.mini.danger-button:disabled{color:var(--faint);background:var(--head);border-color:var(--line)}

/* ---------- toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--line-strong)}
.toolbar input,.toolbar select{height:1.625rem;padding:0 var(--s-3);color:var(--ink);font-size:var(--fs-sm);background:var(--surface);border:1px solid var(--line-strong);min-width:0}
.toolbar input:focus,.toolbar select:focus{border-color:var(--accent)}
.toolbar input[type=search]{flex:1 1 9rem;max-width:16rem}
.toolbar select{flex:0 1 9.75rem}
.toolbar .mini{height:1.625rem}
/* 効いている絞り込み。狭い画面では select の表示が切れて読めないので、ここが主な手がかりになる */
/* 絞り込みの札は toolbar の続きなので、間隔ぶんを戻して地続きにする */
.toolbar+.filterbar{margin-top:calc(var(--s-4) * -1);border-top:0}
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--sub);border:1px solid var(--line-strong)}
.filterbar-label{color:var(--muted);font-size:var(--fs-xs);font-weight:700}
.chip{display:inline-flex;align-items:center;gap:var(--s-2);min-height:1.5rem;padding:0 var(--s-3);color:var(--ink);font-size:var(--fs-xs);background:var(--surface);border:1px solid var(--line-strong)}
.chip:hover,.chip:focus-visible{border-color:var(--accent);background:var(--sel)}
.chip-field{color:var(--muted)}
.chip-value{font-weight:700;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-x{color:var(--muted);font-weight:700}
.chip:hover .chip-x,.chip:focus-visible .chip-x{color:var(--neg)}

/* ---------- collapsible ---------- */
.view.active>.fold{margin-top:0}
.fold{margin-top:var(--s-4);background:var(--surface);border:1px solid var(--line-strong)}
.fold>summary{display:flex;align-items:center;gap:var(--s-4);min-height:1.75rem;padding:var(--s-2) var(--s-5);color:var(--ink);font-size:var(--fs-sm);font-weight:700;background:var(--head);cursor:pointer;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"▸";color:var(--faint);font-size:var(--fs-xs)}
.fold[open]>summary{border-bottom:1px solid var(--line-strong)}
.fold[open]>summary::before{content:"▾"}
.fold.flush{margin-top:0;border:0;border-top:1px solid var(--line-strong)}

/* ---------- import ---------- */
/* CSV取込は独立した枠。入出金の追加（青の主ボタン）とは別の操作だと分かるよう、
   ボタンの色も置き場所も変える */
.import-body{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-5)}
/* 入力欄を画面幅いっぱいに伸ばさない。選ぶものが2つあることが一目で分かる幅で止める */
.import-controls{display:grid;grid-template-columns:minmax(0,16rem) minmax(0,22rem) auto;gap:var(--s-5);align-items:end;justify-content:start}
.import-controls input[type=file]{width:100%;padding:var(--s-3);font-size:var(--fs-sm);background:var(--surface);border:1px solid var(--line-strong)}
.import-act{justify-self:start}
.csv-run{height:1.75rem;padding:0 var(--s-6);color:#fff;font-size:var(--fs-md);font-weight:600;white-space:nowrap;background:var(--pos);border:1px solid var(--pos)}
.csv-run:hover:not(:disabled){background:#0f5540;border-color:#0f5540}
.csv-run:disabled{color:var(--faint);background:var(--head);border-color:var(--line);cursor:default}
.import-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:var(--s-4);background:var(--line);border:1px solid var(--line-strong)}
.import-summary div{padding:var(--s-4);background:var(--sub)}
.import-summary span{display:block;color:var(--muted);font-size:var(--fs-xs)}
.import-summary strong{display:block;font-size:var(--fs-num);font-variant-numeric:tabular-nums}
.import-rows{max-height:20rem;overflow-y:auto;margin-bottom:var(--s-4);border:1px solid var(--line-strong)}
.import-row{display:grid;grid-template-columns:5.5rem 1fr auto;align-items:center;gap:var(--s-4);padding:var(--s-2) var(--s-4);border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.import-row:last-child{border-bottom:0}
.import-row.skipped{color:var(--muted);background:var(--sub)}
.import-row.maybe{border-left:2px solid var(--warn)}
.import-row .amount{font-variant-numeric:tabular-nums;text-align:right}
.import-note{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.import-toggle{margin-bottom:var(--s-4)}

/* ---------- forms ---------- */
.rule-form{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--s-4);align-items:end}
.account-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.field{display:grid;gap:var(--s-2);min-width:0}
.field.full{grid-column:1/-1}
.field label{color:var(--muted);font-size:var(--fs-xs);font-weight:600}
.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%;padding:var(--s-3) var(--s-4);color:var(--ink);font-size:var(--fs-md);background:var(--surface);border:1px solid var(--line-strong);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline-offset:-2px}
.field input[type=date]{-webkit-appearance:none;appearance:none;display:block}
.field textarea{min-height:3.5rem;resize:vertical}
#account-email-display{font-weight:600}
.account-error{min-height:1rem;color:var(--neg);font-size:var(--fs-sm)}
.sync-dot{display:inline-block;width:.45rem;height:.45rem;background:var(--chrome-faint);border-radius:50%}
.sync-dot.saved{background:#4caf82}
.sync-dot.saving{background:#5b9dd9}
.sync-dot.error{background:#e0736a}
.account-anonymous-notice{color:var(--muted);font-size:var(--fs-sm)}
.privacy-note{color:var(--faint);font-size:var(--fs-xs);line-height:1.5}
.privacy-note a{color:var(--accent)}

/* ---------- notice ---------- */
.anon-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s-2) var(--s-4);padding:var(--s-2) var(--s-5);background:#fdf6e3;border-bottom:1px solid #e2d3a8}
.anon-bar p{font-size:var(--fs-sm)}
.anon-bar-cta{padding:0 var(--s-4);height:1.375rem;font-size:var(--fs-xs);font-weight:600;white-space:nowrap;background:#fff;border:1px solid var(--line-strong)}
.anon-bar-cta:hover{color:#fff;background:var(--chrome);border-color:var(--chrome)}

/* ---------- dialog ---------- */
dialog{width:min(100% - 1.5rem,34rem);max-height:calc(100vh - 2rem);padding:0;color:var(--ink);background:var(--surface);border:1px solid var(--chrome);border-radius:0;box-shadow:0 12px 40px rgba(20,28,38,.28)}
dialog::backdrop{background:rgba(27,35,46,.45)}
dialog form>header{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--s-5);color:#fff;background:var(--chrome)}
dialog form>footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-4);padding:var(--s-4) var(--s-5);background:var(--head);border-top:1px solid var(--line-strong)}
dialog h2{font-size:var(--fs-lg);font-weight:600}
.eyebrow{color:var(--chrome-faint);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em}
.close{padding:0 var(--s-3);color:var(--chrome-faint);font-size:1.125rem;background:none;border:0}
.close:hover{color:#fff}
.form-fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);padding:var(--s-5);overflow-y:auto}
.form-fields .chk.full{grid-column:1/-1;color:var(--ink);white-space:normal}
.form-error{color:var(--neg);font-size:var(--fs-sm)}
#form-error:not(:empty){padding:0 var(--s-5) var(--s-4)}
.formula-help{grid-column:1/-1;color:var(--muted);font-size:var(--fs-sm)}
.formula-help h3{margin:var(--s-4) 0 var(--s-2);color:var(--ink);font-size:var(--fs-sm)}
.formula-help dl{display:grid;grid-template-columns:1fr auto;gap:var(--s-1) var(--s-4);margin:0}
.formula-help dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 行の「その他の操作」 ---------- */
/* 記号だけの小さなボタンを並べず、文字のある一覧から選ばせる。
   狭い画面では下から出すシートにして、親指の届くところへ寄せる */
.menu-dialog{width:min(100% - 1.5rem,20rem);padding:0;color:var(--ink);background:var(--surface);border:1px solid var(--chrome);border-radius:0;box-shadow:0 12px 40px rgba(20,28,38,.28)}
.menu-dialog::backdrop{background:rgba(27,35,46,.45)}
.menu-head{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-5);color:#fff;background:var(--chrome)}
.menu-head p{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-md);font-weight:600}
.menu-head .close{margin-left:auto;color:var(--chrome-faint)}
.menu-head .close:hover{color:#fff}
.menu-items{display:flex;flex-direction:column;padding:var(--s-2) 0}
.menu-item{display:block;width:100%;min-height:2.75rem;padding:0 var(--s-5);color:var(--ink);font-size:var(--fs-md);text-align:left;background:none;border:0}
.menu-item:hover{background:var(--hover)}
.menu-item.danger{color:var(--neg)}
.menu-item.danger:hover{background:#fbeeec}

.toast{position:fixed;right:.75rem;bottom:calc(var(--status) + .5rem);z-index:30;padding:var(--s-3) var(--s-5);color:#fff;font-size:var(--fs-sm);background:var(--chrome);border:1px solid var(--chrome-line);opacity:0;transform:translateY(.5rem);transition:.18s;pointer-events:none}
.toast.show{opacity:1;transform:none}

/* ==========================================================================
   狭い画面。一覧性を保つため、行は2段に畳んで表のまま維持する
   ========================================================================== */
@media(max-width:1180px){
  .cols{grid-template-columns:1fr}
  .stat{flex:1 1 30%;border-bottom:1px solid var(--line)}
  .stat.opts{flex:1 1 100%;justify-content:flex-start;border-bottom:0}
}
@media(max-width:760px){
  /* 上は「今どこか＋保存状態＋言語」だけの薄いヘッダーにして、
     移動は親指の届く下のナビへ寄せる。上下で役割が重ならないようにする */
  .topbar{height:2.75rem;padding:0 var(--s-4)}
  .topbar-actions{gap:var(--s-4);min-width:0}
  .today{display:none}
  .header-sync{display:flex}
  /* 指で押せる高さにする */
  .langsw{height:1.75rem;flex:none}
  .lang-toggle{padding:0 var(--s-5)}

  /* 下部固定ナビ。3タブとも常に出して、現在地は色・太さ・上辺の線の3つで示す */
  .modulebar{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:9;height:auto;padding:0;
    border-top:1px solid var(--chrome-line);border-bottom:0;background:var(--chrome);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .nav-button{flex:1;min-height:3.25rem;padding:var(--s-3) var(--s-2);color:var(--chrome-faint);
    font-size:var(--fs-sm);background:none;border:0;border-top:3px solid transparent}
  .nav-button:hover{color:#fff;background:transparent}
  .nav-button.active{color:#fff;font-weight:700;background:rgba(255,255,255,.08);border-top-color:var(--accent-soft);border-bottom-color:transparent}
  .nav-button:focus-visible{outline-offset:-3px}

  /* 下のナビと重ならないよう、本文の下に逃げをとる */
  main{width:min(100% - .5rem,1720px);padding-top:var(--s-3);
    padding-bottom:calc(3.25rem + env(safe-area-inset-bottom,0px) + 1rem)}
  /* 件数と同期はヘッダーと下ナビが持つので、狭い画面ではステータスバーを出さない */
  .statusbar{display:none}
  .toast{bottom:calc(3.75rem + env(safe-area-inset-bottom,0px))}
  .stat{flex:1 1 45%;padding:var(--s-3) var(--s-4)}
  .th{display:none}
  /* 明細の見出しだけは残す。ここが並び替えと全選択の入口なので、
     消すと狭い画面から操作できなくなる。表の見出しではなく操作の並びとして出す */
  #transaction-table .th{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
    padding:var(--s-3) var(--s-4);background:var(--sub)}
  #transaction-table .th>span:empty{display:none}
  #transaction-table .th>.pick{padding:0 var(--s-3) 0 0}
  #transaction-table .th .sort-head{min-height:1.75rem;padding:0 var(--s-4);
    background:var(--surface);border:1px solid var(--line-strong)}
  #transaction-table .th .sort-head.on{background:var(--sel);border-color:var(--accent)}
  #transaction-table .th .sort-head:hover{text-decoration:none}
  #transaction-table .th>.num{flex:none;width:auto}
  /* 畳んだときは「主情報+補足 / 金額 / 操作」の1行3列にする。
     操作を金額の下へ置くと行が縦に伸びて、一覧に入る件数が減る */
  .tr{grid-template-columns:auto minmax(0,1fr) auto auto;padding:var(--s-4) 0}
  .tr>*{padding:0 var(--s-4)}
  .tr>*+*{border-left:0}
  .tr>.m-hide{display:none}
  .tr .m-only{display:block}
  /* チェックは指で押す場所を広めに取る。無い行では列そのものが空になる */
  .tr>.pick{grid-column:1;grid-row:1;align-self:center;padding:0 var(--s-2) 0 var(--s-4)}
  .tr>.pick input{width:1.25rem;height:1.25rem}
  .tr>.c-main{grid-column:2;grid-row:1;align-self:center}
  .tr>.num{grid-column:3;grid-row:1;align-self:center}
  .tr>.acts{grid-column:4;grid-row:1;align-self:center;padding-left:0}
  /* 狭い画面では押せるものを 1.75rem(28px) 以上にする。
     22px や 17px のままだと、隣の行や隣のボタンを巻き込みやすい */
  .mini,.toolbar .mini{height:1.75rem;padding:0 var(--s-5)}
  .chip{min-height:1.75rem}
  .text-button{min-height:1.75rem;padding:0 var(--s-2)}
  /* 閉じるはダイアログから抜ける唯一の目に見える出口。狙いを外しにくい大きさにする */
  .close{min-width:2.75rem;min-height:2.75rem}
  /* 保存・キャンセルとログインまわりは、その画面で一番よく押す操作なので指の幅に合わせる */
  dialog form>footer .primary,dialog form>footer .secondary,.button-row .primary,.button-row .secondary{height:2.75rem}
  /* チェックは四角そのものより、文字を含めた行全体で受ける */
  .chk{min-height:1.75rem;padding:var(--s-2) 0}
  .chk input{width:1.125rem;height:1.125rem}
  /* 指で狙える大きさにする。矢印は縦だけ十分に取り、横は詰めて名前の場所を残す */
  .ib{width:2.25rem;height:2.25rem}
  .ib.more{width:2.75rem;height:2.75rem}
  .ib.move{width:2rem;height:2.75rem;font-size:var(--fs-md)}
  /* 月の移動はよく使うので、矢印も指で狙える大きさにする */
  .nav-arrow{min-width:2.75rem;height:2.75rem}
  /* 削除は狙って押すもの。押せる大きさは確保しつつ、主要操作ほどは広げない */
  .list-footer{flex-wrap:wrap;justify-content:space-between}
  .link-danger{min-height:2.25rem;padding:0 var(--s-5)}
  .month-input,.month-title{height:2.75rem;min-width:8.5rem;font-size:var(--fs-num)}
  /* 1行目を月の移動だけにして、矢印と年月を大きく取る */
  .month-nav{flex:1 1 100%;justify-content:center}
  .month-scope{flex:0 0 auto;padding-left:0;border-left:0}
  .month-range{flex:1 1 100%;order:3;text-align:center}
  .row-tap{-webkit-tap-highlight-color:rgba(26,92,146,.12)}
  /* 下から出すシートにして、片手で届く位置に選択肢を置く */
  .menu-dialog{width:100%;max-width:none;margin:auto auto 0;border-left:0;border-right:0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .menu-item{min-height:3rem;font-size:var(--fs-lg)}
  .t-set{grid-template-columns:minmax(0,1fr) auto}
  .plan-split .plan-col+.plan-col{border-top:1px solid var(--line-strong)}
  .toolbar{gap:var(--s-2)}
  .toolbar input[type=search]{flex:1 1 100%;max-width:none}
  /* 3つ横並びだと「すべての支払方法」が読めるところまで切れる。2列にして中身を出す */
  .toolbar select{flex:1 1 calc(50% - var(--s-2))}
  .toolbar .mini{flex:0 0 auto;margin-left:auto}
  .chip-value{max-width:8rem}
  .import-controls,.rule-form,.account-fields,.form-fields{grid-template-columns:1fr}
  /* 縦積みでは、取り込みボタンを枠の幅いっぱいにして押し間違いを減らす */
  .import-act{justify-self:stretch}
  .csv-run{width:100%;height:2.75rem}
  .field.full{grid-column:auto}
  .import-summary{grid-template-columns:1fr 1fr}
  .import-row{grid-template-columns:5rem 1fr;row-gap:var(--s-1)}
  .import-row .amount{grid-column:2;text-align:left}
  .breakdown{flex-direction:column;align-items:stretch;gap:var(--s-4)}
  .donut{align-self:center}
  /* カテゴリが多いと凡例だけで画面が埋まり、明細が下へ押し出される。
     一覧に届く高さを残して、凡例の中だけを送る */
  .legend-pick{max-height:13rem;overflow-y:auto;overscroll-behavior-y:contain}
  .legend-pick-btn{min-height:2.25rem;padding:var(--s-3)}
  .button-row .primary,.button-row .secondary{flex:1 1 8rem}
}
@media(min-width:761px){
  /* 左右の列は下端を揃える。片方だけ先に終わると、その下が大きく空いて
     どこまでが1画面ぶんの情報なのか読み取りにくい。
     余った高さは、それぞれの列の最後の枠が受け取る */
  .cols{align-items:stretch}
  /* 左は最後の一覧が余りを受け取る。基準を 0 にしてあるので、
     この一覧が列の高さを決めることはなく、空いたぶんだけ伸びる */
  .col-main>.sec:last-child{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .col-main>.sec:last-child>.scroll-y{flex:1 1 0;min-height:11rem;max-height:none}
  /* 余りは右列の2枚で分け合う。1枚だけに寄せると、そこだけ大きく空いて見える */
  .col-side>.sec{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .col-side>.sec>.breakdown{flex:1 1 auto;align-items:center}
  .col-side>.sec>#forecast-chart{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0}
  #forecast-chart svg{width:100%;height:auto}
  /* 縦に余裕があるぶん、円グラフも少し大きくする */
  .col-side .donut{width:7.5rem}
  /* 一覧の見出しと月の小計は、業務システムの明細画面と同じく上端へ貼り付ける */
  #transaction-table .th{position:sticky;top:calc(var(--bar) + var(--mod));z-index:2}
  /* 列見出しの高さぶんだけ下げて貼り付ける。重ねると月の行が見出しに隠れる */
  #transaction-table .grp{position:sticky;top:calc(var(--bar) + var(--mod) + 1.875rem);z-index:1}
}
@media(max-width:420px){
  .stat>strong{font-size:var(--fs-num)}
  .stat.key>strong{font-size:1.125rem}
}
/* 極端に狭い画面では、いまの言語の表示より同期状態のほうを残す。
   言語は設定画面に文章付きの切替があるので、そちらで補える */
@media(max-width:360px){
  .langsw-now{display:none}
}
/* 予定・定期収支は列が7つあり、半分の幅では収まらない。
   2列に割るのは、片側に表がそのまま入る幅からにする */
@media(min-width:1000px){
  .plan-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .plan-split .plan-col+.plan-col{border-left:1px solid var(--line-strong)}
}