/*
 * 【責務】 画面全体のテーマ（INDUSTRIAL / TACTICAL）。要素への見た目の適用だけを書き、色・罫線・影・角丸・文字の値は tokens.css のトークンだけを参照する
 * 【要件】 §7.1〜7.5, §7.4（コントラスト・フォーカス・タップ領域 44px・reduced-motion）, SEC-3（style 属性を使わない）
 * 【やらないこと】 値の直書き（色コード・影・角丸・フォント名）はしない（tests/ui/theme.test.js が検査する）。参考元のコード・画像は使っていない（§7.2 は思想のみ）
 */

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--pfc-bg);
  /* 薄いグリッド背景 */
  background-image:
    linear-gradient(var(--pfc-grid-line) var(--pfc-border-thin), transparent var(--pfc-border-thin)),
    linear-gradient(90deg, var(--pfc-grid-line) var(--pfc-border-thin), transparent var(--pfc-border-thin));
  background-size: var(--pfc-grid-size) var(--pfc-grid-size);
  color: var(--pfc-text);
  font-family: var(--pfc-font-body);
  font-size: var(--pfc-font-md);
  line-height: var(--pfc-line-height);
  -webkit-font-smoothing: antialiased;
}
.num, .mono { font-family: var(--pfc-font-numeric); font-variant-numeric: tabular-nums; }
/* 見出しの役割（DEC-090）：h1〜h3 は見出しのフォント。数値（.num）の中の見出しは数値のフォントのまま */
h1, h2, h3 { font-family: var(--pfc-font-heading); }
button, input, select { font: inherit; color: inherit; }
/* 太字の合成の可否（DEC-046。font の一括指定で戻らないよう、入力部品にも明示する） */
body, button, input, select, textarea { font-synthesis: var(--pfc-font-synthesis); }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
[hidden] { display: none !important; }

/* フォーカスは太いアクセント枠（§7.4） */
:focus-visible { outline: var(--pfc-focus-ring); outline-offset: var(--pfc-focus-offset); }

/* 動き：直線的・即応的。reduced-motion ではトークンで 0 になる */
button, .gauge-arc, .usage-fill, .toast {
  transition-duration: var(--pfc-motion-duration);
  transition-timing-function: var(--pfc-motion-easing);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 共通の部品 ---------- */
.app { max-width: var(--pfc-page-max); margin: 0 auto; padding: 0 var(--pfc-space-4) var(--pfc-space-6); }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: var(--pfc-space-3); padding: var(--pfc-space-4) 0 var(--pfc-space-3); flex-wrap: wrap; }
.brand { color: var(--pfc-heading); margin: 0; display: flex; align-items: center; gap: var(--pfc-space-2); font-family: var(--pfc-font-heading); font-size: var(--pfc-font-lg); font-weight: 700; letter-spacing: var(--pfc-heading-tracking); }
.brand-mark { display: flex; align-items: flex-end; gap: var(--pfc-space-1); }
.brand-mark i { display: block; width: var(--pfc-space-2); }
.bm-p { height: 14px; background: var(--pfc-macro-p); }
.bm-f { height: 10px; background: var(--pfc-macro-f); }
.bm-c { height: 20px; background: var(--pfc-macro-c); }

.tabs { display: flex; border: var(--pfc-border-width) solid var(--pfc-control-border); background: var(--pfc-surface); }
.tabs button {
  min-height: var(--pfc-tap-min); min-width: 72px; padding: 0 var(--pfc-space-4);
  border: 0; border-right: var(--pfc-border-width) solid var(--pfc-control-border); background: transparent; color: var(--pfc-text-dim);
  font-family: var(--pfc-font-heading); letter-spacing: var(--pfc-heading-tracking);
}
.tabs button:last-child { border-right: 0; }
.tabs button[aria-selected="true"] { background: var(--pfc-accent); color: var(--pfc-on-accent); font-weight: 700; }
.tabs button:hover:not([aria-selected="true"]) { background: var(--pfc-text); color: var(--pfc-bg); }

/* パネル：2px の枠・ハードシャドウ・四隅のブラケット */
.panel {
  position: relative; background: var(--pfc-surface); border: var(--pfc-border-width) solid var(--pfc-border);
  border-radius: var(--pfc-radius); box-shadow: var(--pfc-shadow); padding: var(--pfc-space-4);
}
.panel::before, .panel::after {
  content: ""; position: absolute; width: var(--pfc-bracket-size); height: var(--pfc-bracket-size); pointer-events: none;
  border-color: var(--pfc-accent); border-style: solid;
}
.panel::before { top: calc(-1 * var(--pfc-border-width)); left: calc(-1 * var(--pfc-border-width)); border-width: var(--pfc-border-width) 0 0 var(--pfc-border-width); }
.panel::after { bottom: calc(-1 * var(--pfc-border-width)); right: calc(-1 * var(--pfc-border-width)); border-width: 0 var(--pfc-border-width) var(--pfc-border-width) 0; }
.panel-title { color: var(--pfc-heading);
  margin: 0 0 var(--pfc-space-3); font-family: var(--pfc-font-heading); font-size: var(--pfc-font-md); font-weight: 700;
  letter-spacing: var(--pfc-heading-tracking); text-transform: uppercase; display: flex; align-items: baseline; justify-content: space-between; gap: var(--pfc-space-2);
  border-bottom: var(--pfc-border-thin) solid var(--pfc-border); padding-bottom: var(--pfc-space-2);
}
.panel-title small, .hint { color: var(--pfc-text-dim); font-size: var(--pfc-font-sm); font-weight: 400; letter-spacing: 0; text-transform: none; }
.hint { margin: var(--pfc-space-2) 0 0; }
.hint:empty { display: none; }
.sub-title { margin: var(--pfc-space-4) 0 var(--pfc-space-2); font-size: var(--pfc-font-sm); color: var(--pfc-text-dim); font-weight: 700; letter-spacing: var(--pfc-heading-tracking); }

.grid { display: grid; gap: var(--pfc-space-4); }
.top-grid { grid-template-columns: minmax(260px, 320px) 1fr; }
.main-grid { grid-template-columns: 1fr minmax(260px, 340px); margin-top: var(--pfc-space-4); align-items: start; }
.settings-grid { max-width: 760px; margin: 0 auto; }
@media (max-width: 860px) { .top-grid, .main-grid { grid-template-columns: 1fr; } }

.icon-btn, .chip-btn, .add-btn, .qty-btn, .del-btn, .edit-btn, .primary, .danger-btn, .banner-btn, .copy-item button, .food-btn, .meal-select button, .segmented button {
  min-height: var(--pfc-tap-min); border: var(--pfc-border-width) solid var(--pfc-control-border); border-radius: var(--pfc-radius);
  background: var(--pfc-surface-2); color: var(--pfc-text);
}
.icon-btn { min-width: var(--pfc-tap-min); font-size: var(--pfc-font-lg); line-height: 1; }
.chip-btn { padding: 0 var(--pfc-space-3); font-size: var(--pfc-font-sm); }
.icon-btn:hover, .chip-btn:hover, .add-btn:hover, .qty-btn:hover, .edit-btn:hover, .food-btn:hover, .banner-btn:hover, .copy-item button:hover, .meal-select button:hover, .segmented button:hover {
  background: var(--pfc-text); color: var(--pfc-bg);
}
.primary { background: var(--pfc-accent); color: var(--pfc-on-accent); border-color: var(--pfc-accent); padding: 0 var(--pfc-space-6); font-weight: 700; box-shadow: var(--pfc-shadow-small); }
.primary:hover { background: var(--pfc-text); border-color: var(--pfc-text); }
.danger-btn { border-color: var(--pfc-danger); color: var(--pfc-danger); background: transparent; padding: 0 var(--pfc-space-4); }
.danger-btn:hover { background: var(--pfc-danger); color: var(--pfc-on-accent); }
.actions { display: flex; gap: var(--pfc-space-2); justify-content: flex-end; margin-top: var(--pfc-space-4); flex-wrap: wrap; }

.datebar { display: flex; align-items: center; justify-content: center; gap: var(--pfc-space-2); margin: var(--pfc-space-1) 0 var(--pfc-space-4); }
.date-label { min-width: 190px; text-align: center; font-weight: 700; font-size: var(--pfc-font-lg); }

.legend { display: flex; gap: var(--pfc-space-3); flex-wrap: wrap; font-size: var(--pfc-font-sm); color: var(--pfc-text-dim); margin-top: var(--pfc-space-2); }
.dot { display: inline-block; width: 10px; height: 10px; margin-right: var(--pfc-space-1); border: var(--pfc-border-thin) solid var(--pfc-bg); }
.dot-p { background: var(--pfc-macro-p); }
.dot-f { background: var(--pfc-macro-f); }
.dot-c { background: var(--pfc-macro-c); }
/* 未記録の凡例の印（DEC-081）：グラフの未記録の枠と同じ、破線の枠・中は空（斜線の模様は使わない） */
.dot-unrecorded { width: var(--pfc-legend-frame-size); height: var(--pfc-legend-frame-size); background: none; border: var(--pfc-border-width) dashed var(--pfc-unrecorded-frame); }
/* 判定不能・不明ありの凡例の印（DEC-083）：実線の枠＋斜線の模様 */
.dot-unknown { width: var(--pfc-legend-frame-size); height: var(--pfc-legend-frame-size); background: var(--pfc-unrecorded); border: var(--pfc-border-width) solid var(--pfc-unknown-frame); }
/* まだ来ていない日の凡例の印（DEC-080）：グラフの枠と同じ、実線の枠・中は空 */
.dot-future { width: var(--pfc-legend-frame-size); height: var(--pfc-legend-frame-size); background: none; border: var(--pfc-chart-future-width) solid var(--pfc-chart-future); }
.legend-frames { display: contents; }
/* 目標カロリーの線の凡例の印（DEC-086）：グラフの目標の線と同じ色の点線 */
.dot-goal { width: var(--pfc-legend-frame-size); height: 0; background: none; border: none; border-top: var(--pfc-border-width) dashed var(--pfc-text); vertical-align: middle; }
.empty { color: var(--pfc-text-dim); font-size: var(--pfc-font-sm); padding: var(--pfc-space-1) 0; list-style: none; }

/* ---------- バナー（保存状態・データ不明） ---------- */
.banner-slot:empty { display: none; }
.storage-banner { border: var(--pfc-border-width) solid var(--pfc-danger); background: var(--pfc-danger-surface); box-shadow: var(--pfc-shadow); padding: var(--pfc-space-4); margin: 0 0 var(--pfc-space-4); }
.storage-banner.banner-quota, .storage-banner.banner-readonly { border-color: var(--pfc-accent); background: var(--pfc-warn-surface); }
.banner-title { margin: 0 0 var(--pfc-space-1); font-weight: 700; font-size: var(--pfc-font-md); }
.banner-corrupt .banner-title { color: var(--pfc-danger); }
.banner-quota .banner-title, .banner-readonly .banner-title { color: var(--pfc-accent); }
.banner-detail, .banner-code { margin: 0 0 var(--pfc-space-3); font-size: var(--pfc-font-sm); }
.banner-actions { display: flex; gap: var(--pfc-space-2); flex-wrap: wrap; }
.banner-btn { padding: 0 var(--pfc-space-4); }
/* 「データ不明あり」（DEC-083）：破線は未記録だけに使うため実線の枠。本文を読みやすくするため、斜線の模様は敷かない */
.unknown-banner { border: var(--pfc-border-width) solid var(--pfc-accent); background: var(--pfc-warn-surface); padding: var(--pfc-space-3) var(--pfc-space-4); margin-bottom: var(--pfc-space-4); font-size: var(--pfc-font-sm); }
.unknown-banner p { margin: var(--pfc-space-1) 0 0; }
.unknown-title { color: var(--pfc-accent); letter-spacing: var(--pfc-heading-tracking); }

/* ---------- 状態バッジ（文字＋パターン：§7.4） ---------- */
.status-badge {
  display: inline-block; padding: 0 var(--pfc-space-2); border: var(--pfc-border-width) solid var(--pfc-border);
  font-size: var(--pfc-font-xs); font-weight: 700; letter-spacing: var(--pfc-heading-tracking); line-height: 1.8; white-space: nowrap;
}
.status-under { border-color: var(--pfc-text-dim); color: var(--pfc-text); background: var(--pfc-surface-2); }
.status-achieved { border-color: var(--pfc-ok); color: var(--pfc-ok); }
/* C-4（DEC-071）：チェック印は使わず中立な記号にする */
.status-achieved::before { content: "● "; }
.status-over { border-color: var(--pfc-danger); color: var(--pfc-text); background: var(--pfc-hazard); text-shadow: var(--pfc-shadow-small); }
.status-over::before { content: "▲ "; }
/* 判定不能・目標未設定（DEC-083）：実線の枠＋斜線の模様（文字ラベルは StatusBadge）。縞の上でも 4.5:1 以上になるよう文字は --pfc-text */
.status-indeterminate, .status-nogoal { border-style: solid; border-color: var(--pfc-unknown-frame); color: var(--pfc-text); background: var(--pfc-unrecorded); }
/* 未記録（DEC-081・DEC-082）：グラフの未記録の枠と同じ、破線の枠・中は空 */
.status-unrecorded { border-style: dashed; border-color: var(--pfc-unrecorded-frame); color: var(--pfc-text-dim); background: none; }

/* ---------- GaugeRing ---------- */
.gauge-ring { position: relative; width: 220px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.gauge-ring svg { width: 100%; height: 100%; display: block; }
.gauge-track { fill: none; stroke: var(--pfc-surface-2); stroke-width: 12; }
.gauge-tick { stroke: var(--pfc-border); stroke-width: 1.5; }
.gauge-arc { fill: none; stroke-width: 12; stroke-linecap: butt; }
.arc-p { stroke: var(--pfc-macro-p); }
.arc-f { stroke: var(--pfc-macro-f); }
.arc-c { stroke: var(--pfc-macro-c); }
.gauge-ring.is-over .gauge-track { stroke: var(--pfc-danger); stroke-dasharray: 3 3; }
.gauge-center { position: absolute; inset: 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.gauge-label, .gauge-caption, .gauge-sub { font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); }
.gauge-value { font-size: var(--pfc-font-xxl); font-weight: 700; line-height: 1.05; }
.gauge-unknown { font-size: var(--pfc-font-xs); color: var(--pfc-accent); }
.score-row { display: flex; justify-content: space-between; align-items: baseline; border-top: var(--pfc-border-thin) solid var(--pfc-border); margin-top: var(--pfc-space-3); padding-top: var(--pfc-space-2); }
.score-label { font-size: var(--pfc-font-sm); color: var(--pfc-text-dim); }
.score-value { font-size: var(--pfc-font-xl); font-weight: 700; }

/* ---------- SegmentBar：直角ブロックの連なり ---------- */
.segment-bar { margin-bottom: var(--pfc-space-2); }
.segment-label { font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); margin-bottom: 2px; }
.segment-track { position: relative; display: flex; height: calc(var(--pfc-bar-height) + 8px); border: var(--pfc-border-width) solid var(--pfc-border); background: var(--pfc-surface-2); overflow: hidden; }
.segment-track::after { content: ""; position: absolute; inset: 0; background: var(--pfc-block-gap); pointer-events: none; }
.seg { display: flex; align-items: center; justify-content: center; color: var(--pfc-on-accent); font-family: var(--pfc-font-numeric); font-size: var(--pfc-font-xs); font-weight: 700; white-space: nowrap; overflow: hidden; position: relative; z-index: 1; }
.seg-p { background: var(--pfc-macro-p); }
.seg-f { background: var(--pfc-macro-f); }
.seg-c { background: var(--pfc-macro-c); }
.segment-bar.is-over .segment-track { border-color: var(--pfc-danger); }
.segment-bar.is-over .seg { background: var(--pfc-hazard); color: var(--pfc-text); text-shadow: var(--pfc-shadow-small); }
.segment-caption { font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); margin-top: 2px; }
.segment-caption:empty { display: none; }

/* ---------- 栄養素カード ---------- */
.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pfc-space-3); }
@media (max-width: 560px) { .macros { grid-template-columns: 1fr; } }
.macro { background: var(--pfc-surface-2); border: var(--pfc-border-thin) solid var(--pfc-border); padding: var(--pfc-space-3); }
.macro-head { display: flex; align-items: center; gap: var(--pfc-space-2); font-size: var(--pfc-font-sm); color: var(--pfc-text-dim); flex-wrap: wrap; }
.macro-key { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--pfc-on-accent); font-family: var(--pfc-font-numeric); font-weight: 700; }
.key-p { background: var(--pfc-macro-p); }
.key-f { background: var(--pfc-macro-f); }
.key-c { background: var(--pfc-macro-c); }
.macro-amount { margin: var(--pfc-space-2) 0; }
.macro-amount b { font-size: var(--pfc-font-xl); }
.macro-amount span { color: var(--pfc-text-dim); font-size: var(--pfc-font-sm); }
.macro-foot { font-size: var(--pfc-font-sm); color: var(--pfc-text-dim); }

.advice { display: flex; flex-direction: column; gap: var(--pfc-space-2); margin-top: var(--pfc-space-4); }
.advice-item { display: flex; gap: var(--pfc-space-2); font-size: var(--pfc-font-sm); padding: var(--pfc-space-2) var(--pfc-space-3); border-left: 4px solid var(--pfc-ok); background: var(--pfc-surface-2); }

/* ---------- MealSection ---------- */
.meal-section { border: var(--pfc-border-width) solid var(--pfc-border); padding: var(--pfc-space-3); margin-bottom: var(--pfc-space-3); }
.meal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--pfc-space-1) var(--pfc-space-2); margin-bottom: var(--pfc-space-2); }
.meal-title { color: var(--pfc-heading); margin: 0; font-family: var(--pfc-font-heading); font-size: var(--pfc-font-md); letter-spacing: var(--pfc-heading-tracking); display: flex; align-items: baseline; gap: var(--pfc-space-2); }
.meal-kcal { color: var(--pfc-text-dim); font-size: var(--pfc-font-sm); font-weight: 400; }
.add-btn { padding: 0 var(--pfc-space-3); color: var(--pfc-accent); border-style: dashed; border-color: var(--pfc-accent); background: transparent; }
.meal-items { list-style: none; margin: 0; padding: 0; }
.meal-item { display: grid; grid-template-columns: 1fr auto auto auto auto; gap: var(--pfc-space-2); align-items: center; padding: var(--pfc-space-1) var(--pfc-space-1); border-top: var(--pfc-border-thin) solid var(--pfc-border); }
.meal-item:hover { background: var(--pfc-text); color: var(--pfc-bg); }
.meal-item:hover .meal-item-detail { color: var(--pfc-bg); }
/* 不明ありの行（DEC-083）：実線の枠＋斜線の模様（文字ラベル「不明あり」は MealSection） */
.meal-item.is-unknown { background-image: var(--pfc-unrecorded); border: var(--pfc-border-width) solid var(--pfc-unknown-frame); }
/* 縞の上の補足の文字は、4.5:1 以上になるよう --pfc-text（DEC-083） */
.meal-item.is-unknown .meal-item-detail { color: var(--pfc-text); }
.meal-item-main { min-width: 0; }
.meal-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-item-detail { font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); }
.meal-item-unknown { font-size: var(--pfc-font-xs); color: var(--pfc-accent); font-weight: 700; }
.qty { display: flex; align-items: center; gap: 2px; }
.qty-btn, .del-btn { min-width: var(--pfc-tap-min); padding: 0; }
.qty-n { min-width: 44px; text-align: center; font-size: var(--pfc-font-sm); }
.meal-item-kcal { font-size: var(--pfc-font-sm); min-width: 72px; text-align: right; }
.del-btn { background: transparent; border-color: transparent; color: var(--pfc-text-dim); }
.del-btn:hover { color: var(--pfc-danger); border-color: var(--pfc-danger); }
@media (max-width: 520px) {
  .meal-item { grid-template-columns: 1fr auto; }
  .meal-item-kcal { text-align: left; }
}

/* ---------- クイック追加・ダイアログの食品 ---------- */
.meal-select { display: flex; gap: var(--pfc-space-1); flex-wrap: wrap; margin-bottom: var(--pfc-space-3); }
.meal-select button { padding: 0 var(--pfc-space-2); font-size: var(--pfc-font-sm); }
.meal-select button[aria-pressed="true"], .segmented button[aria-pressed="true"] { background: var(--pfc-accent); color: var(--pfc-on-accent); border-color: var(--pfc-accent); }
.quick { display: flex; flex-direction: column; gap: var(--pfc-space-2); }
.food-btn { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--pfc-space-2); text-align: left; padding: var(--pfc-space-2) var(--pfc-space-3); }
.qn { font-size: var(--pfc-font-md); }
.qp { font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); grid-column: 1; }
.qk { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: var(--pfc-font-sm); }
.food-btn:hover .qp { color: var(--pfc-bg); }

/* ---------- 週間 ---------- */
.week-chart svg { width: 100%; height: auto; display: block; }
.chart-grid { stroke: var(--pfc-border); stroke-width: 1; }
.chart-axis { fill: var(--pfc-text-dim); font-size: var(--pfc-font-xs); font-family: var(--pfc-font-numeric); }
.chart-axis.is-today { fill: var(--pfc-accent); font-weight: 700; }
.chart-goal { stroke: var(--pfc-text); stroke-width: 1.5; stroke-dasharray: 6 4; }
.bar-p { fill: var(--pfc-macro-p); }
.bar-f { fill: var(--pfc-macro-f); }
.bar-c { fill: var(--pfc-macro-c); }
.chart-unrecorded { fill: none; stroke: var(--pfc-unrecorded-frame); stroke-width: 2; stroke-dasharray: 4 3; }
/* 判定不能（読み込めない）の枠（DEC-083）：実線の枠＋斜線の模様（模様は SVG の pattern。fill は要素の属性で指定） */
.chart-indeterminate { stroke: var(--pfc-unknown-frame); stroke-width: var(--pfc-border-width); }
.chart-hatch-line { fill: var(--pfc-border); }
/* まだ来ていない日（C-5・DEC-076）：未記録の破線の枠とは別の、実線の空枠。画面上で 2px 以上（non-scaling-stroke）、背景に 3:1 以上 */
.chart-future { fill: none; stroke: var(--pfc-chart-future); stroke-width: var(--pfc-chart-future-width); vector-effect: non-scaling-stroke; }
.chart-unrecorded-label, .chart-unknown { fill: var(--pfc-text-dim); font-size: var(--pfc-font-xs); }
@media (max-width: 600px) {
  .chart-axis, .chart-unrecorded-label, .chart-unknown { font-size: var(--pfc-chart-text-mobile); }
}
.chart-unknown { fill: var(--pfc-accent); font-weight: 700; }
.avg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pfc-space-3); margin-top: var(--pfc-space-4); }
@media (max-width: 560px) { .avg-grid { grid-template-columns: repeat(2, 1fr); } }
.avg { background: var(--pfc-surface-2); border: var(--pfc-border-thin) solid var(--pfc-border); padding: var(--pfc-space-3); }
.avg .k, .avg .d { font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); }
.avg .v { font-size: var(--pfc-font-xl); font-weight: 700; }
.avg .v small { font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); font-weight: 400; }
.avg-note { grid-column: 1 / -1; }
.table-scroll { overflow-x: auto; }
.week-table { width: 100%; border-collapse: collapse; margin-top: var(--pfc-space-4); font-size: var(--pfc-font-sm); }
.week-table th, .week-table td { padding: var(--pfc-space-2); text-align: right; border-bottom: var(--pfc-border-thin) solid var(--pfc-border); white-space: nowrap; }
.week-table th:first-child, .week-table td:first-child { text-align: left; }
.week-table th { color: var(--pfc-text-dim); font-weight: 700; font-size: var(--pfc-font-xs); letter-spacing: var(--pfc-heading-tracking); }
.week-table tr.is-unrecorded td { color: var(--pfc-text-dim); }

/* ---------- 設定 ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pfc-space-3) var(--pfc-space-4); }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.span-all { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--pfc-space-1); font-size: var(--pfc-font-sm); color: var(--pfc-text-dim); }
.field input, .field select, .search {
  min-height: var(--pfc-tap-min); border: var(--pfc-border-width) solid var(--pfc-control-border); border-radius: var(--pfc-radius);
  background: var(--pfc-bg); color: var(--pfc-text); padding: 0 var(--pfc-space-3); font-size: var(--pfc-font-md); width: 100%;
}
.goal-warning, .storage-warn { margin: var(--pfc-space-3) 0 0; padding: var(--pfc-space-2) var(--pfc-space-3); border-left: 4px solid var(--pfc-accent); background: var(--pfc-warn-surface); color: var(--pfc-text); font-size: var(--pfc-font-sm); }

/* ---------- 保存データの管理 ---------- */
.storage-usage { margin: 0 0 var(--pfc-space-2); font-size: var(--pfc-font-sm); }
.usage-meter { height: var(--pfc-bar-height); border: var(--pfc-border-width) solid var(--pfc-border); background: var(--pfc-surface-2); position: relative; }
.usage-meter::after { content: ""; position: absolute; inset: 0; background: var(--pfc-block-gap); pointer-events: none; }
.usage-fill { display: block; height: 100%; background: var(--pfc-ok); }
.usage-meter.is-over { border-color: var(--pfc-danger); }
.usage-meter.is-over .usage-fill { background: var(--pfc-hazard); }
.storage-backups { margin: var(--pfc-space-3) 0 0; font-size: var(--pfc-font-sm); }
.copy-list { list-style: none; margin: var(--pfc-space-3) 0 0; padding: 0; }
.copy-item { display: grid; grid-template-columns: 1fr auto auto; gap: var(--pfc-space-2); align-items: center; padding: var(--pfc-space-2) 0; border-top: var(--pfc-border-thin) solid var(--pfc-border); font-size: var(--pfc-font-sm); }
.copy-item button { padding: 0 var(--pfc-space-3); }
.copy-item .danger-btn { border-color: var(--pfc-danger); color: var(--pfc-danger); background: transparent; }
.copy-item .danger-btn:hover { background: var(--pfc-danger); color: var(--pfc-on-accent); }
.copy-corrupt .copy-title { color: var(--pfc-accent); font-weight: 700; }
.copy-meta { font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); }

/* ---------- ダイアログ ---------- */
dialog {
  border: var(--pfc-border-width) solid var(--pfc-border-strong); border-radius: var(--pfc-radius); box-shadow: var(--pfc-shadow);
  padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--pfc-surface); color: var(--pfc-text);
}
dialog::backdrop { background: var(--pfc-backdrop); }
.dlg { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: var(--pfc-space-3) var(--pfc-space-4); border-bottom: var(--pfc-border-thin) solid var(--pfc-border); }
.dlg-head h3 { color: var(--pfc-heading); margin: 0; font-family: var(--pfc-font-heading); letter-spacing: var(--pfc-heading-tracking); font-size: var(--pfc-font-md); }
.dlg-body { padding: var(--pfc-space-3) var(--pfc-space-4) var(--pfc-space-4); overflow-y: auto; }
.segmented { display: flex; margin-bottom: var(--pfc-space-3); }
.segmented button { flex: 1; }
.search { margin-bottom: var(--pfc-space-3); }
.manual-kcal { margin-top: var(--pfc-space-3); padding: var(--pfc-space-3); background: var(--pfc-surface-2); border: var(--pfc-border-thin) solid var(--pfc-border); display: flex; justify-content: space-between; align-items: center; font-size: var(--pfc-font-sm); }

/* ---------- トースト（DEC-049） ---------- */
.toast-stack {
  position: fixed; left: 50%; bottom: var(--pfc-space-6); transform: translateX(-50%); z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: var(--pfc-space-2);
  width: max-content; max-width: calc(100vw - 32px); pointer-events: none;
}
.toast {
  padding: var(--pfc-space-2) var(--pfc-space-4);
  background: var(--pfc-text); color: var(--pfc-bg); border: var(--pfc-border-width) solid var(--pfc-accent); box-shadow: var(--pfc-shadow);
  font-size: var(--pfc-font-sm);
}
.toast[hidden] { display: none; }
/* 対応が必要なエラー・警告：自動では消えず、閉じるボタンで消す */
.toast-alert {
  display: flex; align-items: center; gap: var(--pfc-space-3); pointer-events: auto;
  background: var(--pfc-danger-surface); color: var(--pfc-text); border-color: var(--pfc-danger);
}
.toast-alert[data-kind="warning"] { background: var(--pfc-warn-surface); border-color: var(--pfc-accent); }
.toast-text { margin: 0; }
.toast-close { flex: none; min-height: var(--pfc-tap-min); padding: 0 var(--pfc-space-3); background: var(--pfc-surface-2); color: var(--pfc-text); border: var(--pfc-border-width) solid var(--pfc-border-strong); }

/* ---------- 文字のリンク（設定画面「フォントのライセンス」など） ---------- */
.text-link {
  display: inline-flex; align-items: center; min-height: var(--pfc-tap-min);
  color: var(--pfc-accent); text-decoration: underline; text-underline-offset: 3px; letter-spacing: var(--pfc-heading-tracking);
}
.text-link:hover { color: var(--pfc-text); }

/* ---------- フォントのライセンスのページ（licenses/fonts/index.html） ---------- */
.license-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--pfc-space-2) var(--pfc-space-4); margin: var(--pfc-space-4) 0; font-size: var(--pfc-font-sm); }
.license-list dt { color: var(--pfc-text-dim); letter-spacing: var(--pfc-heading-tracking); }
.license-list dd { margin: 0; }
.license-page { padding-top: var(--pfc-space-6); }
.license-files { margin: 0; padding: 0; list-style: none; }

/* ---------- 食品の管理・確認ダイアログ（KNOWN-006） ---------- */
.food-rows { list-style: none; margin: var(--pfc-space-3) 0 0; padding: 0; }
.food-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--pfc-space-2); align-items: center; padding: var(--pfc-space-2) 0; border-top: var(--pfc-border-thin) solid var(--pfc-border); font-size: var(--pfc-font-sm); }
.food-row-name { font-weight: 700; overflow-wrap: anywhere; }
.food-row-meta { font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); }
.food-row button { min-height: var(--pfc-tap-min); padding: 0 var(--pfc-space-3); border: var(--pfc-border-width) solid var(--pfc-control-border); background: var(--pfc-surface-2); color: var(--pfc-text); }
.food-row button:hover { background: var(--pfc-text); color: var(--pfc-bg); }
.food-row .danger-btn { border-color: var(--pfc-danger); color: var(--pfc-danger); background: transparent; }
.food-row .danger-btn:hover { background: var(--pfc-danger); color: var(--pfc-on-accent); }
#foodDlg select, #foodDlg input { min-height: var(--pfc-tap-min); border: var(--pfc-border-width) solid var(--pfc-control-border); background: var(--pfc-bg); color: var(--pfc-text); padding: 0 var(--pfc-space-3); width: 100%; }

/* ---------- 確認ダイアログ（DEC-057）：直角・2px 罫線・ハードシャドウ。危険な操作は枠の色と文字ラベルの両方で示す ---------- */
.confirm-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--pfc-space-4); background: var(--pfc-backdrop); }
.confirm-dialog {
  width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--pfc-surface); color: var(--pfc-text); border: var(--pfc-border-width) solid var(--pfc-border-strong);
  border-radius: var(--pfc-radius); box-shadow: var(--pfc-shadow); padding: var(--pfc-space-4);
}
.confirm-dialog.is-danger { border-color: var(--pfc-danger); }
.confirm-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pfc-space-2); border-bottom: var(--pfc-border-thin) solid var(--pfc-border); padding-bottom: var(--pfc-space-2); margin-bottom: var(--pfc-space-3); }
.confirm-danger-label { display: inline-block; padding: 0 var(--pfc-space-2); background: var(--pfc-danger); color: var(--pfc-on-accent); font-size: var(--pfc-font-xs); font-weight: 700; letter-spacing: var(--pfc-heading-tracking); line-height: 1.8; }
.confirm-title { color: var(--pfc-heading); margin: 0; font-family: var(--pfc-font-heading); font-size: var(--pfc-font-lg); font-weight: 700; letter-spacing: var(--pfc-heading-tracking); }
.confirm-body { font-size: var(--pfc-font-sm); }
.confirm-body p { margin: 0 0 var(--pfc-space-3); }
.confirm-details { display: grid; grid-template-columns: max-content 1fr; gap: var(--pfc-space-1) var(--pfc-space-3); margin: 0 0 var(--pfc-space-3); padding: var(--pfc-space-2) var(--pfc-space-3); background: var(--pfc-surface-2); border: var(--pfc-border-thin) solid var(--pfc-border); }
.confirm-details dt { color: var(--pfc-text-dim); }
.confirm-details dd { margin: 0; overflow-wrap: anywhere; }
.confirm-actions { display: flex; gap: var(--pfc-space-2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--pfc-space-4); }
.confirm-actions button { min-height: var(--pfc-tap-min); min-width: var(--pfc-tap-min); padding: 0 var(--pfc-space-4); border: var(--pfc-border-width) solid var(--pfc-control-border); border-radius: var(--pfc-radius); }
.confirm-cancel { background: var(--pfc-surface-2); color: var(--pfc-text); }
.confirm-cancel:hover { background: var(--pfc-text); color: var(--pfc-bg); }

/* ---------- 分量の入力（F-05） ---------- */
.portion-food { margin: 0 0 var(--pfc-space-1); font-weight: 700; font-size: var(--pfc-font-md); overflow-wrap: anywhere; }
#pMode { margin-top: var(--pfc-space-3); }
.meal-macros { margin: 0; flex-basis: 100%; order: 3; font-size: var(--pfc-font-xs); color: var(--pfc-text-dim); }
.actions-start { justify-content: flex-start; margin-top: 0; margin-bottom: var(--pfc-space-2); }

/* 記録の編集ボタン（F-07）。スマホ幅では名前を1行目、操作を2行目に分ける */
.edit-btn { padding: 0 var(--pfc-space-2); font-size: var(--pfc-font-sm); white-space: nowrap; min-width: var(--pfc-tap-min); }
@media (max-width: 600px) {
  .meal-item { grid-template-columns: 1fr auto auto auto; }
  .meal-item-main { grid-column: 1 / -1; }
}
#eMode { margin-top: var(--pfc-space-3); }
.history-tabs { max-width: 420px; margin: 0 auto var(--pfc-space-4); }

/* ---------- お気に入り・前日コピー（F-08） ---------- */
.choice-row { display: grid; grid-template-columns: 1fr auto; gap: var(--pfc-space-2); align-items: stretch; }
.fav-btn { min-width: var(--pfc-tap-min); min-height: var(--pfc-tap-min); border: var(--pfc-border-width) solid var(--pfc-control-border); border-radius: var(--pfc-radius); background: var(--pfc-surface-2); color: var(--pfc-text-dim); font-size: var(--pfc-font-lg); }
.fav-btn.is-on { color: var(--pfc-accent); border-color: var(--pfc-accent); }
.fav-btn:hover { background: var(--pfc-text); color: var(--pfc-bg); }
.copy-meals { border: var(--pfc-border-thin) solid var(--pfc-border); margin: 0 0 var(--pfc-space-3); padding: var(--pfc-space-2) var(--pfc-space-3); display: flex; flex-wrap: wrap; gap: var(--pfc-space-1) var(--pfc-space-4); }
.copy-meals legend { color: var(--pfc-text-dim); font-size: var(--pfc-font-sm); padding: 0 var(--pfc-space-1); }
.check-row { display: inline-flex; align-items: center; gap: var(--pfc-space-2); min-height: var(--pfc-tap-min); }
.check-row input { width: 20px; height: 20px; accent-color: var(--pfc-accent); }
/* 分量の目安：狭い画面では見出しと値を2行に分ける */
.manual-kcal { flex-wrap: wrap; gap: var(--pfc-space-1) var(--pfc-space-3); }
.manual-kcal b { margin-left: auto; text-align: right; }
.toast-details { margin: var(--pfc-space-1) 0 0; padding-left: var(--pfc-space-4); font-size: var(--pfc-font-xs); max-height: 40vh; overflow-y: auto; }
.toast-details li { overflow-wrap: anywhere; }

/* ---------- 常設の注意書き（COMP-1） ---------- */
.app-footer { margin-top: var(--pfc-space-6); padding: var(--pfc-space-3) var(--pfc-space-4); border-top: var(--pfc-border-width) solid var(--pfc-border); color: var(--pfc-text-dim); font-size: var(--pfc-font-sm); }
.app-footer p { margin: 0; }

/* ---------- プライバシーポリシー・利用規約のページ（DEC-087：docs/*.md からビルド時に作る静的なページ） ---------- */
/* アプリ本体のフッター・設定画面のリンクの並び（アプリ本体の画面。見た目は DEC-087 のまま） */
.legal-links { display: flex; flex-wrap: wrap; gap: var(--pfc-space-2) var(--pfc-space-4); margin-top: var(--pfc-space-2); }
/* ガイドサイトへのリンク（DEC-104）：補足「別のサイトが開きます」を小さい文字で添える。スマホ幅では補足を次の行に折り返す。フォーカスの枠は共通の :focus-visible */
.guide-links { margin: var(--pfc-space-2) 0 0; }
.guide-link { flex-wrap: wrap; column-gap: var(--pfc-space-2); }
.guide-link-note { font-size: var(--pfc-font-sm); }

/* 以下は文書のページ（<body class="doc-site">）だけ。背景・文字・見出しの色はアプリ本体と同じトークン（DEC-089）。行間・余白・リンクの色はページ専用のトークン（DEC-088） */
body.doc-site { font-size: var(--pfc-doc-font-size); line-height: var(--pfc-doc-line-height); }
.doc-site .doc-page { max-width: var(--pfc-doc-measure); padding-top: var(--pfc-space-4); }
.doc-site .doc-nav, .doc-site .doc-footer { padding: var(--pfc-space-3) 0; }
.doc-site .doc-footer nav { display: flex; flex-wrap: wrap; gap: var(--pfc-space-2) var(--pfc-space-4); border-top: var(--pfc-border-width) solid var(--pfc-border); padding-top: var(--pfc-space-3); }
.doc-site .doc-body { color: var(--pfc-text); }
.doc-site .doc-body h1, .doc-site .doc-body h2, .doc-site .doc-body h3 { color: var(--pfc-heading); font-family: var(--pfc-font-heading); letter-spacing: var(--pfc-heading-tracking); line-height: var(--pfc-doc-line-height); }
.doc-site .doc-body h1 { margin: 0 0 var(--pfc-space-4); font-size: var(--pfc-font-lg); }
.doc-site .doc-body h2 { margin: var(--pfc-space-6) 0 var(--pfc-space-3); font-size: var(--pfc-font-md); border-bottom: var(--pfc-border-thin) solid var(--pfc-border); padding-bottom: var(--pfc-space-1); }
.doc-site .doc-body h3 { margin: var(--pfc-space-4) 0 var(--pfc-space-2); font-size: var(--pfc-font-md); }
.doc-site .doc-body p { margin: 0 0 var(--pfc-doc-paragraph-gap); }
.doc-site .doc-body ul, .doc-site .doc-body ol { margin: 0 0 var(--pfc-doc-paragraph-gap); padding-left: var(--pfc-space-6); }
.doc-site .doc-body li ul, .doc-site .doc-body li ol { margin: var(--pfc-doc-list-gap) 0 0; }
.doc-site .doc-body li + li { margin-top: var(--pfc-doc-list-gap); }
.doc-site .doc-body strong { color: var(--pfc-heading); }
.doc-site .doc-body blockquote { margin: 0 0 var(--pfc-doc-paragraph-gap); padding: var(--pfc-space-3) var(--pfc-space-4); border-left: var(--pfc-border-width) solid var(--pfc-accent); background: var(--pfc-surface-2); }
.doc-site .doc-body blockquote p { margin: 0; }
.doc-site .doc-body code { font-family: var(--pfc-font-body); background: var(--pfc-surface-2); padding: 0 var(--pfc-space-1); }
.doc-site .doc-table-scroll { overflow-x: auto; margin: 0 0 var(--pfc-doc-paragraph-gap); }
/* フォントのライセンスの全文（DEC-099）：原文の改行を保ち、スマホ幅では折り返す */
.doc-site .doc-body pre.license-text { margin: 0 0 var(--pfc-doc-paragraph-gap); padding: var(--pfc-space-3); background: var(--pfc-surface-2); border: var(--pfc-border-thin) solid var(--pfc-border); color: var(--pfc-text); font-family: var(--pfc-font-body); font-size: var(--pfc-font-sm); line-height: var(--pfc-doc-line-height); white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-site .doc-body table { width: 100%; border-collapse: collapse; font-size: var(--pfc-font-sm); }
.doc-site .doc-body th, .doc-site .doc-body td { border: var(--pfc-border-thin) solid var(--pfc-border); padding: var(--pfc-space-2); text-align: left; vertical-align: top; }
.doc-site .doc-body th { background: var(--pfc-surface-2); color: var(--pfc-heading); }
/* リンク：薄い水色＋下線（色だけに頼らない）。フォーカスの枠は共通の :focus-visible（アクセント色 3px）のまま */
.doc-site a.text-link { color: var(--pfc-doc-link); text-decoration: underline; text-underline-offset: var(--pfc-doc-underline-offset); letter-spacing: normal; }
.doc-site a.text-link:hover { color: var(--pfc-heading); }
/* 本文中のリンクは文の中に置く（行の高さを崩さない）。上下のナビのリンクはタップ領域 44px のまま */
.doc-site .doc-body a.text-link { display: inline; min-height: 0; overflow-wrap: anywhere; } /* 長い URL もスマホ幅で枠の中に折り返す */