:root {
  --surface: #ffffff;
  --container: #f8f9fa;
  --container-high: #e8eaed;
  --on-surface: #1f1f1f;
  --variant: #444746;
  --muted: #5f6368;
  --outline: #c4c7c5;
  --primary: #1a73e8;
  --error: #d93025;
  --success: #1e8e3e;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--surface); color: var(--on-surface);
  font-family: 'Google Sans', 'Noto Sans JP', system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
/* ナビのリンク数が増えるとタイトルと1本目のリンクの隙間が0近くまで詰まり
   「業者別レポートホーム」のように見える(実欠陥: home.html追加でreport.htmlの
   スマホ幅430pxで発生)。flex-wrapとgapで、収まらなければナビを次の行に
   落とし、収まる場合も最低限の隙間を必ず確保する */
header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 12px;
  padding: 12px 16px; border-bottom: 2px solid var(--primary);
}
header h1 { font-size: 16px; font-weight: 500; margin: 0; }
main { padding: 16px; max-width: 720px; margin: 0 auto; }
/* 表が主役の画面は幅を広く使う。
   — Why: 720px だと iPad横(1024px)でも損益表の右端（営業利益・営業利益率）が
   初期表示で切れる。損益で一番見たい数字が最初に見えないのは実用に耐えない */
main.wide { max-width: 1400px; }
.btn {
  display: block; width: 100%; padding: 16px; border: none; border-radius: 12px;
  background: var(--primary); color: #fff; font-size: 16px; font-weight: 500;
}
.btn--ghost { background: var(--container); color: var(--variant); border: 1px solid var(--outline); }
.btn:disabled { background: var(--container-high); color: var(--muted); }
.card {
  background: var(--container); border: 1px solid var(--outline);
  border-radius: 12px; padding: 16px; margin-bottom: 16px;
}
.kpi { font-size: 96px; font-weight: 700; line-height: 1; letter-spacing: -0.04em;
       font-feature-settings: "tnum"; }
.kpi-unit { font-size: 24px; font-weight: 400; margin-left: 8px; }
.kpi-label { font-size: 11px; color: var(--muted); letter-spacing: .08em; }
label { display: block; font-size: 11px; color: var(--muted); margin: 12px 0 4px; }
input, select {
  width: 100%; padding: 12px; font-size: 16px; border-radius: 8px;
  border: 1px solid var(--outline); background: #fff;
}
input.missing { border-color: var(--error); background: #fce8e6; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: var(--container-high); font-weight: 500; text-align: left; padding: 8px; }
td { padding: 8px; border-bottom: 1px solid var(--outline); }
.diff-badge {
  padding: 8px 12px; border-radius: 16px; font-size: 13px; font-weight: 500;
  display: inline-block;
}
.diff-badge--ok { background: #e6f4ea; color: var(--success); }
.diff-badge--ng { background: #fce8e6; color: var(--error); }
.toast {
  position: fixed; left: 16px; right: 16px; bottom: 16px; padding: 12px 16px;
  border-radius: 8px; background: var(--on-surface); color: #fff; font-size: 14px;
}
nav a { margin-left: 12px; font-size: 13px; }
nav a:first-child { margin-left: 0; }

/* データが無いときのKPI表示。96pxの大きい「—」は黒い塗り潰しの帯に
   見えてしまうため(実欠陥B)、値が無いときは専用の小さい文言にする */
.kpi-empty { display: inline-block; font-size: 20px; font-weight: 400; color: var(--muted); }

/* report.html: 期間切替タブ */
.period-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.period-tabs button {
  padding: 8px 14px; border-radius: 16px; border: 1px solid var(--outline);
  background: #fff; color: var(--variant); font-size: 13px; font-weight: 500;
}
.period-tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* report.html: KPIタイル3枚。桁数の多い金額が96pxのまま隣のタイルへ
   はみ出さないよう、overflow:hiddenを保険にしつつJSで文字サイズを縮める
   (fitKpiTile()) */
.kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi-tile { text-align: center; margin-bottom: 0; overflow: hidden; }

/* report.html: グラフ */
.chart-wrap { position: relative; height: 260px; }

/* report.html: 業者別ピボット表。業者が増えると列が伸びるので横スクロール、
   日付列は左に固定する */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pivot-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.pivot-table th, .pivot-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--outline);
  text-align: right; font-feature-settings: "tnum";
}
.pivot-table thead th { background: var(--container-high); font-weight: 500; }
.pivot-table th:first-child, .pivot-table td:first-child {
  position: sticky; left: 0; text-align: left; z-index: 1;
  background: var(--surface); box-shadow: 1px 0 0 var(--outline);
}
.pivot-table thead th:first-child { background: var(--container-high); }
.pivot-table tr.totals th, .pivot-table tr.totals td { font-weight: 500; background: var(--container); }
.pivot-table tr.totals th:first-child { background: var(--container); }

.cat-chip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* report.html: カテゴリ別構成比の横棒（円グラフは値の比較がしづらいので使わない） */
.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.bar-row .bar-label { width: 108px; flex-shrink: 0; }
.bar-row .bar-track { flex: 1; background: var(--container-high); border-radius: 4px; height: 16px; overflow: hidden; }
.bar-row .bar-fill { height: 100%; }
.bar-row .bar-value { width: 84px; text-align: right; font-feature-settings: "tnum"; flex-shrink: 0; }

/* review.html: 伝票原本の表示。ピンチズームできるように、独自スクロール域を持つ */
.doc-image-wrap {
  max-height: 42vh; overflow: auto; -webkit-overflow-scrolling: touch;
  touch-action: pinch-zoom; background: #202124; border-radius: 12px; margin-bottom: 16px;
}
.doc-image-wrap img { display: block; width: 100%; }

/* review.html: 品名が1行だと幅が足りず見切れるため、品名/金額・税率・カテゴリを2段組みにする */
.item-row { padding: 10px 0; border-bottom: 1px solid var(--outline); }
.item-row .i-name { margin-bottom: 6px; }
.item-row-meta { display: flex; gap: 8px; }
.item-row-meta .i-amt { flex: 1 1 40%; }
.item-row-meta .i-rate { flex: 0 0 68px; }
.item-row-meta .i-cat { flex: 1 1 45%; }

/* review.html: 業者のその場登録 */
.vendor-add { display: flex; gap: 8px; margin-top: 8px; }
.vendor-add input { flex: 1; }
.vendor-add button { width: auto; padding: 12px 16px; }

/* capture.html: 一覧の伝票日付・金額（実欠陥C） */
.doc-summary { color: var(--muted); font-size: 12px; }
/* capture.html: 「今なにをすべきか」の要約（実欠陥C: 現場が残件を一目で掴めるように） */
.summary-line { font-size: 22px; font-weight: 500; font-feature-settings: "tnum"; }

/* costs.html / pl.html 共通: 閲覧のみのユーザーに見せる読み取り専用の状態。
   inputの背景をグレーにして「編集できない」ことを見た目でも伝える。
   type=number は readonly でもスピナーで見かけ上の値が動くChromiumの挙動が
   あるため、pointer-eventsで丸ごと塞ぐ */
input[readonly] { background: var(--container-high); color: var(--muted); }
input[type="number"][readonly] { pointer-events: none; }

/* costs.html: 月送りナビ */
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-nav input[type="month"] { flex: 1; }
.month-nav .btn--ghost { width: auto; padding: 12px 16px; white-space: nowrap; }

/* costs.html: 費目ごとの金額入力テーブル。費目名列だけ幅を確保し、
   金額・メモは残りを分け合う（フォントは16px未満にしない=iOS Safariの
   フォーカス時自動ズームを避けるため、style.cssの既定サイズをそのまま使う） */
.cost-table { table-layout: fixed; }
.cost-table th:first-child { width: 30%; }
.cost-table td { padding: 6px 4px; vertical-align: top; }
.cost-table input { padding: 8px; }
.cost-table .amt-input { text-align: right; font-feature-settings: "tnum"; }

/* costs.html: 合計表示。KPIと同じ96pxベースで、fitKpiTile()で桁あふれを防ぐ */
.cost-total { text-align: center; overflow: hidden; }

/* pl.html: KPIタイル3枚（当月の売上・営業利益・営業利益率） */
.pl-kpi-negative { color: var(--error); }

/* pl.html: 損益一覧テーブル。月列を左に固定し、横スクロールする
   （report.htmlの業者別ピボット表と同じ作法） */
.pl-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.pl-table th, .pl-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--outline);
  text-align: right; font-feature-settings: "tnum";
}
.pl-table thead th { background: var(--container-high); font-weight: 500; }
.pl-table th:first-child, .pl-table td:first-child {
  position: sticky; left: 0; text-align: left; z-index: 1;
  background: var(--surface); box-shadow: 1px 0 0 var(--outline);
}
.pl-table thead th:first-child { background: var(--container-high); }
.pl-table tbody tr.pl-row { cursor: pointer; }
.pl-table tbody tr.pl-row:hover td, .pl-table tbody tr.pl-row:hover th { background: var(--container); }
/* 営業利益がマイナスの月は赤字表示（--error色）。td/thどちらも対象にして
   sticky列（th:first-child）の白背景より優先させる */
.pl-table tr.pl-row--loss td, .pl-table tr.pl-row--loss th { color: var(--error); background: #fce8e6; }
.pl-detail td { text-align: left; background: var(--container); white-space: normal; }
.pl-chip {
  display: inline-block; padding: 4px 10px; margin: 2px 4px 2px 0;
  border-radius: 12px; background: var(--container-high); font-size: 12px;
}

/* home.html: 「次にやること」カード。1件目は大きく、2件目以降は小さく続ける */
.action-card {
  background: var(--container); border: 1px solid var(--outline);
  border-radius: 12px; margin-bottom: 12px;
}
.action-card--primary { padding: 20px; }
.action-card--primary .action-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.action-card--primary .action-detail { font-size: 13px; color: var(--variant); margin-bottom: 16px; }
/* 売上取り込み停止・撮り直しは気づかないと数字が古いまま／原価に入らないため警告色にする */
.action-card--warn { background: #fce8e6; border-color: #f6aea9; }
.action-card--warn .action-title { color: var(--error); }
.action-card--done { text-align: center; padding: 28px 20px; }
.action-card--done .action-title { color: var(--success); }
.action-card--done .action-detail { margin-bottom: 0; }

.action-list { margin-bottom: 4px; }
.action-card--secondary {
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.action-card--secondary .action-title { font-size: 14px; font-weight: 500; }
.action-card--secondary a { font-size: 13px; color: var(--primary); font-weight: 500; white-space: nowrap; }

/* home.html: 業務カード。スマホ2列・iPad(横幅700px以上)は3列。
   minmax(0,1fr)にしないと長い説明文でグリッドの列がコンテナ幅を超えて
   はみ出す(CJKテキストが1文字ずつ改行されるバグと同種の原因) */
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (min-width: 700px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.menu-card {
  display: block; background: var(--container); border: 1px solid var(--outline);
  border-radius: 12px; padding: 14px; text-decoration: none; color: var(--on-surface);
}
.menu-card-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.menu-card-desc { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.menu-badge {
  display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 10px;
  background: var(--error); color: #fff; font-size: 10px; font-weight: 500;
}

/* home.html: 使い方の折りたたみ。普段は閉じておき邪魔にならないようにする */
.howto summary { font-size: 13px; color: var(--variant); font-weight: 500; cursor: pointer; padding: 8px 0; }
.howto ol { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--variant); }
.howto li { margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* home.html: 原価率を主役にし、売上・原価はその内訳として下に小さく置く。
   — Why: 3枚均等だとスマホ幅で 2+1 に折れ、一番大事な原価率が左下に
   孤立して最小に見えていた */
.home-kpi-hero { text-align: center; }
.home-kpi-sub {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
}
.home-kpi-sub .kpi-tile { text-align: center; margin-bottom: 0; }
/* 内訳側は主役より控えめにする（主役との差でどちらを見るべきか伝える） */
.home-kpi-sub .kpi { font-size: 40px; }
.home-kpi-sub .kpi-unit { font-size: 15px; }

/* 行動カードのボタンはリンク要素で作っているので、下線を消してボタンに見せる */
.action-card .btn { text-decoration: none; text-align: center; }