/* ============================================================
   AI見守りPWA クライアント スタイル
   移植元: docs/archive/AI見守りPWA画面モック20260705.html の <style>（配色トークン・コンポーネント
   定義）。現行の docs/AI見守りPWA画面モック.html は本ファイルから生成する側＝参照先ではない。
   モックとの差分（意図的な変更。docs/AI見守りPWA実装仕様書.md §6.1「そのまま移植」対象外）：
   ・.phone-wrap/.phone-frame/.phone-notch/.layout（デスクトップでの設計レビュー用スマホ枠の模型）は
     実機で動く本物の PWA には不要なため削除し、.app-shell が実際のビューポート全体を占める形にした。
   ・.demo-panel/.role-btns/.jump-grid/.jump-btn/.demo-note（レビュー専用のデモ操作パネル）は
     実際の PWA には存在しない機能のため削除した。
   ・ログイン画面（screen 0。モックには存在しない）用に .login-user-btn を最小追加した。
   それ以外のコンポーネント定義（カード・ボタン・バッジ・タイムライン・ヒートマップ・モーダル等）は
   全画面ぶんをそのまま移植している。
   ダークモード：モック同様ライトモードのみ対応
   （docs/archive/AI見守りPWA画面モック20260705説明書.md §0 と同じ前提）。
   ============================================================ */

/* ---------- 配色トークン（モックの <root> をそのまま移植） ---------- */
:root{
  --page: #f9f9f7;           /* ページ地色 */
  --surface: #fcfcfb;        /* カード面 */
  --ink: #0b0b0b;            /* 主テキスト */
  --ink-secondary: #52514e;  /* 副テキスト */
  --ink-muted: #65635d;      /* 軸・補足ラベル */
  --gridline: #e1e0d9;       /* ヘアライン格子 */
  --baseline: #c3c2b7;       /* 軸線 */
  --border: rgba(11,11,11,0.10);
  --accent: #2a78d6;         /* 主要UIアクセント */
  --accent-tint: #eaf1fb;

  /* ステータス色（固定・テーマ非依存） */
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;

  /* ステータス淡色トーン（バッジ・カード・ラジオの背景で共用。未確認=赤/確認済=橙/対応済=緑） */
  --tint-critical: #fbe9e6;
  --tint-warning: #fff6e0;
  --tint-good: #e8f7e8;

  /* 部屋カテゴリカル5色（固定順。④⑤で使用） */
  --room-living: #2a78d6;
  --room-bedroom: #1baf7a;
  --room-kitchen: #eda100;
  --room-toilet: #008300;
  --room-entrance: #4a3aa7;

  /* シーケンシャル（単一色相=青）ヒートマップ用ステップ（⑤で使用） */
  --seq-250: #86b6ef;
  --seq-350: #5598e7;
  --seq-450: #2a78d6;
  --seq-550: #1c5cab;
  --seq-700: #0d366b;
}

*, *::before, *::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--page);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
button, select, input, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,dl,dd{ margin:0; }
ul{ padding:0; list-style:none; }
img{ max-width:100%; }

/* ---------- アプリの外枠（実機で全画面表示。モックの「スマホ枠の模型」は持たない） ---------- */
.app-shell{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:520px;      /* スマホ幅を基本としつつ、広い画面でも中央寄せで破綻しないようにする */
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;    /* モバイルブラウザのアドレスバー分の変動に追従 */
  background:var(--surface);
}

/* ヘッダー：現在の住宅名を常時表示（PWA画面設計 §8.5） */
.app-header{
  flex:0 0 auto;
  padding:18px 18px 10px;
  background:var(--surface);
  border-bottom:1px solid var(--gridline);
}
.app-header-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.home-badge{
  display:inline-flex; align-items:center; gap:6px;
  /* 住宅名は画面タイトル（.screen-title-bar h2）と同じ 18px / 700 に揃える【2026-08-06 PM指摘】 */
  font-size:18px; font-weight:700; color:var(--ink);
}
/* 住宅を表す家アイコン。PWA アイコン（icons/icon-192.png。scripts/generate-pwa-icons.js が
   生成する青地に白い家）をそのまま縮小して使う＝図柄の正はアイコン生成スクリプトの1か所のまま
   （以前は --accent 色の丸だった）【2026-08-06 PM指摘】 */
.home-badge .home-icon{ width:18px; height:18px; display:block; }
/* 担当宅が2宅以上のとき、名称表示の代わりに出す切替セレクト（見た目はバッジのまま＝枠線なし・
   同じ字面。タップで担当宅を選べることを示すため右端に▼を残す＝appearance は既定のまま） */
.home-switch select{
  border:0; background:transparent; padding:0; margin:0;
  font-size:18px; font-weight:700; color:var(--ink); font-family:inherit;
  max-width:150px;
}
.app-title{ font-size:12px; color:var(--ink-muted); }
/* ヘッダー右側（アプリ名＋ログアウト）をまとめる。app-header-row の space-between は
   このグループと home-badge の2要素間にのみ効かせる（3要素だと app-title の位置がずれるため）。 */
.app-header-right{ display:flex; align-items:center; gap:10px; }
.btn-logout{ padding:5px 10px; font-size:12px; }
.screen-title-bar{
  display:flex; align-items:center; gap:8px; padding:2px 18px 12px;
  background:var(--surface);
}
.screen-title-bar h2{ font-size:18px; font-weight:700; }
.back-btn{
  background:none; border:none; color:var(--accent); font-size:14px; font-weight:600;
  padding:4px 6px 4px 0; display:flex; align-items:center; gap:2px;
}

/* コンテンツ：スクロール領域 */
.app-content{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px 18px 24px;
  -webkit-overflow-scrolling:touch;
}
.screen{ display:none; }
.screen.active{ display:block; }

/* フッター：下部タブ5つ */
.app-footer{
  flex:0 0 auto;
  display:flex;
  border-top:1px solid var(--gridline);
  background:var(--surface);
  padding-bottom:8px;
}
.tab-btn{
  flex:1 1 0;
  background:none; border:none;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 2px 2px;
  color:var(--ink-muted);
  font-size:11px;
}
.tab-btn .tab-icon{ font-size:19px; line-height:1; }
.tab-btn.active{ color:var(--accent); font-weight:700; }

/* ---------- 汎用コンポーネント ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--gridline);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
}
.card h3{ font-size:14px; font-weight:700; margin-bottom:8px; }
/* カード見出し行（h3 左＋操作ボタン右上。①・③・④(b)・⑤コメント欄で共用） */
.card-head{ display:flex; justify-content:space-between; align-items:center; }
/* カード全体タップで遷移することを示す山かっこ（①「今日のようす」カードの見出し行右端）。
   お知らせバナー（.s1-alert-banner の末尾 span）と同じ記号・同じ「右端に寄せる」表現に揃える。 */
.card-chevron{ color:var(--ink-muted); font-size:18px; line-height:1; }
.card + .card{ margin-top:0; }
/* ①ホームの「今日のようす」カードはカード全体がタップ領域の button 要素のため、
   ブラウザ既定の button 見た目（inline-block・中央寄せ等）を打ち消し .card と同じ見た目にする
   （docs/AI見守りPWA画面モック.html 424行目のインライン style 相当。本実装ではインライン
   style/onclick を使わない方針のためクラス化した）。「コメント」カードは④(b)と同じ通常カード
   構造に変更したためカード全体タップは行わない【2026-07-29 PM決定】。button.card は
   「今日のようす」カード専用として残す。 */
button.card{ display:block; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; }
/* ①ホームのお知らせバナー（未確認があるときだけ強調。0件時は控えめな一文） */
.s1-alert-banner{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  width:100%; text-align:left; font:inherit; cursor:pointer;
  border:1px solid var(--critical); background:#fef8f7; color:var(--critical);
  border-radius:14px; padding:12px 14px; margin-bottom:12px;
  font-size:13.5px; font-weight:700;
}
.s1-alert-banner.none{
  border-color:var(--gridline); background:var(--surface); color:var(--ink-muted);
  font-weight:400; font-size:12.5px;
}
.section-label{ font-size:12px; color:var(--ink-muted); margin-bottom:6px; }
.muted{ color:var(--ink-muted); }
.secondary-text{ color:var(--ink-secondary); font-size:13px; }
.tech-term{
  font-size:10.5px; color:var(--ink-muted); font-family:ui-monospace, Menlo, Consolas, monospace;
  background:var(--gridline); padding:1px 5px; border-radius:5px; margin-left:5px;
}
hr.hair{ border:none; border-top:1px solid var(--gridline); margin:10px 0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:10px; border:1px solid transparent;
  padding:9px 14px; font-size:13.5px; font-weight:600;
  transition:opacity .15s;
}
.btn:active{ opacity:.75; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-secondary{ background:var(--accent-tint); color:var(--accent); }
.btn-ghost{ background:none; color:var(--ink-secondary); border-color:var(--gridline); }
.btn-danger{ background:#fbe9e6; color:#a02a2a; }
.btn:disabled{ opacity:.42; cursor:not-allowed; }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }
/* ③詳細の状態選択ラジオ（可逆）と、その下部の操作者履歴。選択中の状態は状態色で強調する
   （未確認=critical／確認済=warning／対応済=good。status-badge と同系色）。 */
.status-radios{ display:flex; flex-direction:column; gap:8px; }
.status-radio{ display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--gridline); border-radius:10px; background:#fff; cursor:pointer; font-size:13px; font-weight:600; }
.status-radio input{ margin:0; }
.status-radio.rc-open{ background:var(--tint-critical); border-color:var(--critical); }
.status-radio.rc-acknowledged{ background:var(--tint-warning); border-color:var(--warning); }
.status-radio.rc-resolved{ background:var(--tint-good); border-color:var(--good); }
/* 選択中は同色の内側リングで強調する（ラジオ点＋リングの2重で選択が分かる） */
.status-radio.rc-open.is-selected{ box-shadow:inset 0 0 0 1.5px var(--critical); }
.status-radio.rc-acknowledged.is-selected{ box-shadow:inset 0 0 0 1.5px var(--warning); }
.status-radio.rc-resolved.is-selected{ box-shadow:inset 0 0 0 1.5px var(--good); }
.op-log{ margin-top:10px; display:flex; flex-direction:column; gap:3px; }
/* 段階表示（renderPagedList）が行をラップする div を挟むため、行間の gap は内側にも効かせる */
.op-log > div{ display:flex; flex-direction:column; gap:3px; }
.op-log-line{ font-size:12px; color:var(--ink-muted); }

/* ログイン画面（screen 0・モックに無い最小追加）：ユーザー選択ボタンを1行内で左寄せ名称＋右寄せロールに */
.login-user-btn{ justify-content:space-between; text-align:left; margin-bottom:8px; }
.login-user-btn .tech-term{ margin-left:auto; }

.field{ margin-bottom:12px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-secondary); margin-bottom:5px; }
.field select, .field input[type=date], .field input[type=text], .field input[type=number], .field textarea{
  width:100%; border:1px solid var(--gridline); border-radius:10px; padding:9px 10px; font-size:14px;
  background:#fff;
}
.field textarea{ resize:vertical; min-height:64px; }
.hint{ font-size:11.5px; color:var(--ink-muted); margin-top:4px; }
/* ③の再通知の案内は状態選択ラジオの直後に置くため、ラジオとの間隔を空ける */
.status-radios + .hint{ margin-top:10px; }
.notice{
  font-size:12.5px; background:var(--accent-tint); color:#184f95; border-radius:10px; padding:9px 11px; margin:8px 0;
}
.notice.warn{ background:#fff3e0; color:#8a4a00; }
.notice.error{ background:#fbe9e6; color:#a02a2a; }
.notice.good{ background:#e8f7e8; color:#0a5f0a; }

/* チップ（タグ選択。⑧コメント入力で使用予定） */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--gridline); background:#fff; border-radius:999px;
  padding:7px 13px; font-size:13px; color:var(--ink-secondary);
}
.chip.selected{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.chip:disabled{ opacity:.4; }

/* ステータスバッジ：色＋アイコン＋ラベル（色だけにしない） */
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; color:var(--ink);
}
.status-badge.rc-open{ background:var(--tint-critical); }
.status-badge.rc-acknowledged{ background:var(--tint-warning); }
.status-badge.rc-resolved{ background:var(--tint-good); }

/* お知らせ一覧 行 */
.alert-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:12px 10px; border-radius:12px; border:1px solid var(--gridline);
  background:#fff; margin-bottom:8px; text-align:left; width:100%;
}
/* カードの状態色（未確認=赤・確認済=橙・対応済=緑。status-badge と同系色。②一覧・④(c)・③ヘッダー共通） */
.alert-row.rc-open{ border-color:var(--critical); background:var(--tint-critical); }
.alert-row.rc-acknowledged{ border-color:var(--warning); background:var(--tint-warning); }
.alert-row.rc-resolved{ border-color:var(--good); background:var(--tint-good); }
.alert-row .a-main{ flex:1 1 auto; }
.alert-row .a-type{ font-size:14.5px; font-weight:700; }
.alert-row .a-meta{ font-size:12px; color:var(--ink-muted); margin-top:3px; }
.filter-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.filter-chip{
  border:1px solid var(--gridline); background:#fff; border-radius:999px; padding:6px 12px; font-size:12.5px; color:var(--ink-secondary);
}
.filter-chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:700; }

/* セグメント切替（日別/期間、プリセット等。④⑤で使用予定） */
.segmented{ display:flex; background:var(--gridline); border-radius:10px; padding:3px; gap:3px; margin-bottom:12px; }
.segmented button{ flex:1 1 0; border:none; background:none; border-radius:8px; padding:7px 4px; font-size:12.5px; color:var(--ink-secondary); font-weight:600; }
.segmented button.active{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(11,11,11,.12); }

.day-nav{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.day-nav .icon-btn{ flex-shrink:0; } /* 前後ボタンは固定幅を保ち、中央のピッカーだけ伸縮させる */
.icon-btn{ background:var(--accent-tint); color:var(--accent); border:none; width:34px; height:34px; border-radius:10px; font-size:15px; font-weight:700; }
/* 日付ピッカー（前日/翌日ボタンに左右を挟まれ、day-nav の中央で伸縮する）。.field 配下ではないため
   input[type=date] の見た目を単独クラスとして持つ（.field select, .field input[type=date] 等と同系統）。 */
.day-date-input{
  flex:1; min-width:0;
  border:1px solid var(--gridline); border-radius:10px; padding:8px 10px; font-size:13.5px; background:#fff;
}

/* ---------- タイムライン（④で使用予定） ---------- */
.timeline-wrap{ position:relative; }
.timeline-legend{ display:flex; flex-wrap:wrap; gap:8px 12px; margin-bottom:10px; }
.legend-item{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-secondary); }
.legend-item .sw{ width:10px; height:10px; border-radius:3px; }
.tl-row{ display:flex; align-items:center; margin-bottom:5px; height:30px; }
.tl-room-label{ flex:0 0 46px; font-size:11px; color:var(--ink-secondary); font-weight:600; padding-right:6px; text-align:right; }
.tl-track{ position:relative; flex:1 1 auto; height:26px; background:var(--gridline); border-radius:6px; overflow:visible; }
.tl-seg{
  position:absolute; top:1px; bottom:1px; border-radius:5px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  cursor:pointer; outline-offset:2px;
}
.tl-seg span{ font-size:9.5px; color:#fff; font-weight:700; white-space:nowrap; padding:0 3px; }
.tl-axis{ display:flex; margin-left:52px; margin-top:2px; }
.tl-axis span{ flex:1 1 0; font-size:10px; color:var(--ink-muted); text-align:left; }
.tl-axis span:last-child{ flex:0 0 auto; text-align:right; }

/* ツールチップ（④⑤のタイムライン・ヒートマップで使用予定） */
.viz-tooltip{
  position:fixed; z-index:80; pointer-events:none;
  background:var(--ink); color:#fff; font-size:11.5px; padding:6px 9px; border-radius:8px;
  box-shadow:0 6px 16px rgba(0,0,0,.25); max-width:200px; opacity:0; transition:opacity .08s;
}
.viz-tooltip.show{ opacity:1; }
.viz-tooltip .tt-value{ font-weight:700; }

/* ---------- ヒートマップ（⑤で使用予定） ---------- */
.heatmap-scroll{ overflow-x:auto; overflow-y:hidden; border-radius:10px; }
.heatmap-table{ border-collapse:separate; border-spacing:3px; }
.heatmap-table th{ font-size:9.5px; color:var(--ink-muted); font-weight:600; padding-bottom:2px; min-width:26px; }
.heatmap-table td.rowhead{
  position:sticky; left:0; background:var(--surface); font-size:10.5px; color:var(--ink-secondary);
  font-weight:600; text-align:right; padding-right:6px; white-space:nowrap;
}
.hm-cell{
  width:24px; height:24px; border-radius:5px; cursor:pointer; border:1px solid rgba(11,11,11,.05);
}
.scale-legend{ display:flex; align-items:center; gap:6px; margin:10px 0; font-size:10.5px; color:var(--ink-muted); }
.scale-legend .ramp{ display:flex; }
.scale-legend .ramp span{ width:16px; height:10px; }

/* ⑦レポート詳細の見出し（対象期間・生成日時。画面の主題を示す太字タイトル。PM指示 2026-07-29） */
.report-period-title{ font-size:13.5px; font-weight:700; margin-bottom:6px; }

/* ⑦レポート詳細のカード内小見出し（生活リズムカードの「よく居た場所」「お知らせには至らなかった
   滞留・不在」。カード見出し h3〔14px/700〕より一段弱く、本文より強い扱い） */
.report-subhead{ font-size:12.5px; font-weight:600; color:var(--ink-secondary); margin:12px 0 4px; }
.report-subhead:first-of-type{ margin-top:8px; }

/* ---------- ⑦レポート詳細の件数行（お知らせのまとめ／お知らせには至らなかった滞留・不在で共用） ----------
   ラベル・件数・前回比を固定幅の3列グリッドにして、カードをまたいでも件数と前回比の縦位置が
   揃うようにする（PM指示 2026-07-29。setting-row の flex では行ごとに値の位置が変わるため別クラスにした）。 */
/* 3列（ラベル／件数／前回比）。件数・前回比の列は固定幅にして、カードをまたいでも
   件数と前回比の縦位置が揃うようにする（PM指示 2026-07-29）。
   幅は中身の実測に合わせる【2026-08-10 修正】：件数は3桁「123件」で約42px、前回比は最長
   「（前回と同じ）」で約84px。以前は 4.5em（72px）＋12.5em（200px）を割り当てており、
   スマホ幅（カードの内容幅287px）ではラベル列に7pxしか残らず1文字ずつ改行されていた。
   ラベル列を minmax(0,1fr) にするのは、長いラベルが入っても他の2列を押し広げないため。 */
.report-count-row{
  display:grid; grid-template-columns:minmax(0, 1fr) 3.2em 6.5em; align-items:baseline; gap:6px;
  padding:9px 0; border-bottom:1px solid var(--gridline);
}
.report-count-row:last-of-type{ border-bottom:none; }
.report-count-row .rc-label{ font-size:13px; font-weight:600; }
.report-count-row .rc-count{ font-size:13px; font-weight:700; text-align:right; white-space:nowrap; }
.report-count-row .rc-delta{ font-size:12px; color:var(--ink-secondary); text-align:left; white-space:nowrap; }
.report-count-row.rc-total .rc-label,
.report-count-row.rc-total .rc-count{ font-weight:700; }

/* ---------- ⑦レポート詳細の生活リズム比較バー（今回／前回の2本） ----------
   すべての棒が同じ物差し（今回・前回・全部屋を通じた最大値＝100%）で描かれるため、
   部屋どうしの比較にも使える（PM指示 2026-07-29）。 */
.rhythm-room{ margin:10px 0; }
.rhythm-room .rr-name{ font-size:13px; font-weight:600; margin-bottom:4px; }
.rhythm-room .rr-note{ font-size:11.5px; color:var(--ink-muted); margin:3px 0 0; }
.rr-bar{ display:grid; grid-template-columns:2.5em 1fr 6.5em; align-items:center; gap:6px; margin:3px 0; }
.rr-bar .rr-caption{ font-size:11.5px; color:var(--ink-muted); }
.rr-bar .rr-track{ display:block; background:var(--gridline); border-radius:5px; height:10px; }
.rr-bar .rr-fill{ display:block; height:10px; border-radius:5px; background:var(--accent); }
.rr-bar.rr-previous .rr-fill{ background:var(--seq-250); }
.rr-bar .rr-value{ font-size:12px; text-align:right; white-space:nowrap; }

/* ---------- モーダル（⑨で使用予定） ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(11,11,11,.45);
  display:flex; align-items:flex-end; justify-content:center; z-index:60;
}
.modal-overlay.hidden{ display:none; }
.modal-box{
  background:#fff; width:100%; max-width:520px; border-radius:20px 20px 0 0; padding:18px 18px 22px;
  max-height:78vh; overflow-y:auto;
}
.modal-box h3{ font-size:16px; margin-bottom:10px; }
.modal-actions{ display:flex; gap:8px; margin-top:14px; }
.compare-row{ display:flex; align-items:center; gap:10px; padding:10px 0; }
.compare-row .old-val{ color:var(--ink-muted); text-decoration:line-through; }
.compare-row .arrow{ color:var(--ink-muted); }
.compare-row .new-val{ font-weight:700; color:var(--accent); }

/* ---------- 設定画面：折りたたみ（⑨で使用予定） ---------- */
.disclosure summary{ cursor:pointer; font-size:13.5px; font-weight:700; padding:8px 0; list-style:none; display:flex; align-items:center; gap:6px; }
.disclosure summary::-webkit-details-marker{ display:none; }
.disclosure summary .chev{ transition:transform .15s; }
.disclosure[open] summary .chev{ transform:rotate(90deg); }
.setting-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; padding:9px 0; border-bottom:1px solid var(--gridline); }
.setting-row:last-child{ border-bottom:none; }
.setting-row .s-label{ font-size:13px; font-weight:600; }
.setting-row .s-value{ font-size:13px; font-weight:700; text-align:right; white-space:nowrap; }
/* ①「今日のようす」カードの概況文（ラベルの無いリード文）：s-value 既定の右寄せ・太字・
   折り返し無しを打ち消し、地の文として左寄せ・標準太さ・折り返しありで表示する
   （docs/AI見守りPWA画面モック.html 1120行目のインライン style 相当）。 */
.setting-row .s-value.s-lead{ font-weight:400; text-align:left; white-space:normal; }
/* ⑨「変更」ボタンは値の隣の補助操作なので、共有 .btn（padding:9px 14px・13.5px）より小さくする */
.setting-row .btn{ padding:3px 10px; font-size:11.5px; border-radius:8px; }
/* 枠線を持たないインラインのセレクト（⑨「統計からの設定候補値」の対象月切替）。ヘッダーの担当宅
   切替（.home-switch select）と同じ思想＝フォーム部品らしい枠・背景を持たず見出しの字面に続けて置き、
   右端の▼だけで選べることを示す（appearance は既定のまま）。字面は判定設定の値（.s-value）に合わせ、
   見出し（.section-label は 12px・muted）との対比で「選べる箇所」が分かるようにする。 */
.inline-select{
  border:0; background:transparent; padding:0; margin:0 0 0 6px;
  font-size:13px; font-weight:700; color:var(--ink); font-family:inherit;
}
/* カード見出し行に置くラベル（⑨「判定設定」の右端に出す「統計候補値」）。.section-label 既定の
   下マージンは、h3 と縦位置を揃える（.card-head は align-items:center）ために殺す。 */
.card-head .section-label{ margin-bottom:0; }
/* ⑨判定設定の候補値付記（「💡 候補値 …」）。直前の設定行と1つのまとまりに見せるため、行の区切り線は
   設定行側ではなくこのブロックの下に置き（.setting-row.has-candidate が border-bottom を消す）、
   設定行の下パディングも詰めて値のすぐ下に続けて見せる。
   グループ末尾では線を出さない（.setting-row:last-child と同じ扱い）。 */
.setting-row.has-candidate{ border-bottom:none; padding-bottom:1px; }
.candidate-note{ padding:0 0 9px 12px; border-bottom:1px solid var(--gridline); }
.candidate-note:last-child{ border-bottom:none; }
/* センサー設定サブ画面（screen10-sensor-settings.js）：区切り線は部屋（グループ）間だけに出す
   【2026-08-20 PM指示】。同じ部屋のセンサー行はひと続きに見せるため行の border-bottom を消し、
   線をグループ全体の下端へ移す（.setting-row.has-candidate／.candidate-note と同じ「線を
   グループ側へ移す」パターン）。「部屋に属さないセンサー」グループも同じクラスのため部屋間と
   同じ扱いになる。最後のグループは線を出さない（.setting-row:last-child と同じ扱い）。 */
.sensor-group .setting-row{ border-bottom:none; }
.sensor-group{ padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--gridline); }
.sensor-group:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:none; }
.history-row{ font-size:11.5px; color:var(--ink-secondary); padding:6px 0; border-bottom:1px solid var(--gridline); }
/* 一覧の段階表示（5件ずつ）の「次を表示」ボタン。一覧の最終行と詰まって見えないよう間隔を空ける
   （②お知らせ・⑥レポート・⑨変更履歴・コメント一覧で共用。cloud/public/app.js の renderPagedList）。 */
.list-more-btn{ margin-top:8px; }
.history-row:last-child{ border-bottom:none; }

.toggle{ position:relative; display:inline-block; width:42px; height:24px; flex:0 0 auto; }
.toggle input{ opacity:0; width:0; height:0; }
.toggle .slider{ position:absolute; inset:0; background:var(--gridline); border-radius:999px; transition:.15s; }
.toggle .slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.toggle input:checked + .slider{ background:var(--good); }
.toggle input:checked + .slider::before{ transform:translateX(18px); }
/* ⑨通知カード：非対応ブラウザ・許可ブロック時にトグルを無効化した見た目にする（.btn:disabledと同じ0.42）。
   このカード専用の状態のため既存の.toggleへ直接足す（実Web Push増分）。 */
.toggle input:disabled + .slider{ opacity:.42; cursor:not-allowed; }

.toast-banner{ font-size:12.5px; background:#e8f7e8; color:#0a5f0a; border-radius:10px; padding:9px 11px; margin-bottom:10px; cursor:pointer; }

/* ---------- コメントのタグ・「予定」バッジ（⑧の吹き出しと①③④⑤のプレビューで共通） ----------
   タグは白地＋青枠、隣に並ぶ「予定」バッジは淡い青地【2026-08-06 PM指摘：予定とタグでバッジの
   配色を入れ替える】。枠線は両方に持たせて（色だけ変える）同じ行に並んだときの高さを揃える。
   吹き出し・プレビューで別クラスに分けると配色の変更漏れが起きるため、定義はここ1箇所だけに置き、
   自分の吹き出し（青地）内の反転だけを .msg-row.msg-own 側で上書きする。 */
.cmt-tags{ display:flex; gap:4px; flex-wrap:wrap; }
.cmt-tag{
  font-size:10.5px; background:#fff; color:var(--accent);
  border:1px solid var(--accent); padding:0 7px; border-radius:999px;
}
.cmt-planned-badge{
  font-size:10.5px; font-weight:700; color:#184f95; background:var(--accent-tint);
  border:1px solid var(--accent-tint); padding:0 7px; border-radius:999px;
}

/* センサー設定サブ画面（screen10-sensor-settings.js）のセンサー種別バッジ（上向き／マグネット）。
   .cmt-tag と同じ「白地＋青枠の小さなピル」だが用途がコメントのタグではないため別名にする。 */
.sensor-type-badge{
  font-size:10.5px; background:#fff; color:var(--accent);
  border:1px solid var(--accent); padding:0 7px; border-radius:999px;
  margin-left:4px;
}

/* ①③④⑤のコメントカード：カード全体がタップで⑧のトーク画面へ遷移する（見出し右端の .card-chevron が
   導線を示す）【2026-08-06 PM決定】。①「今日のようす」カードは button 要素だが、こちらは中に
   吹き出しの長押し操作を持つため div のまま click を配線している（button の入れ子を避ける）。
   .comment-item（旧・コメント一覧のリスト形式）は吹き出し表示への置き換えで使い手がなくなり削除した。
   ⑨「センサー配置」カード（s9-sensor-card）も同じクラスを流用する【2026-08-20 PM指示】。
   こちらは中に再読み込みボタン（renderFetchError）を持つため、button の入れ子は避けつつ
   クリックハンドラ側（cloud/pwa/init.js）で e.target.closest('button') によりボタン上のタップだけ
   遷移から除外する。 */
.comment-card{ cursor:pointer; }
/* コメントカードの最新1件（プレビュー）。吹き出しにはせず「タグ／本文／氏名・入力日時」の3行で出す
   【2026-08-06 PM指摘】。タグと「予定」バッジは⑧の吹き出しと共通の .cmt-tags／.cmt-tag／
   .cmt-planned-badge（下記「コメントのタグ」節）を使う＝配色の定義は1箇所だけに置く。 */
.comment-preview .cmt-tags{ margin-bottom:4px; }
.comment-preview .cp-text{ font-size:13px; line-height:1.5; white-space:pre-wrap; }
/* メタ行＝左に対象日（どの日について書いたか）・右に氏名・入力日時【2026-08-21 PM指示】。
   「最新」は投稿日時で選ぶため、⑤（期間）ではプレビューだけで対象日が分からない。
   氏名・入力日時は文字サイズ・色とも標準（本文 .cp-text と同じ 13px・地の文の色＝body から継承する
   --ink。補足色 --ink-muted にはしない）【2026-08-06 PM指摘】。対象日は補足情報のため控えめな色。 */
.comment-preview .cp-meta{ font-size:13px; margin-top:3px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.comment-preview .cp-target{ font-size:12px; color:var(--ink-muted); flex-shrink:0; }
/* 1行に収まらない長い氏名だけを省略記号で切る（対象日・日時は常に全表示＝flex-shrink:0）。
   min-width:0 は flex アイテム内で ellipsis を効かせるための定石（既定 min-width:auto だと縮まない）。 */
.comment-preview .cp-who{ display:flex; align-items:baseline; gap:4px; min-width:0; }
.comment-preview .cp-author{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.comment-preview .cp-when{ flex-shrink:0; white-space:nowrap; }
/* ①「今日のようす」カードの「最後に確認できた場所」の値。上の .cp-meta（コメントの氏名・入力日時）と
   同じ体裁に揃える＝標準の文字サイズ・色で太字なし【2026-08-06 PM指摘】。.setting-row の
   justify-content:space-between で右端に寄るため text-align は要らない。 */
.setting-row .s-detection{ font-size:13px; white-space:nowrap; }
.empty-state{ text-align:center; padding:28px 10px; color:var(--ink-muted); font-size:13px; }

/* ④「時間帯の一覧を表で見る」の展開表で使用予定 */
.legend-table{ width:100%; border-collapse:collapse; font-size:11.5px; }
.legend-table th{ text-align:left; color:var(--ink-muted); font-weight:600; padding:4px 4px; border-bottom:1px solid var(--gridline); }
.legend-table td{ padding:4px 4px; border-bottom:1px solid var(--gridline); vertical-align:top; }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ============================================================
   ⑧コメント：LINE 形式のトーク画面【2026-08-06 PM決定】
   他画面が「app-content を縦に伸ばして app-content 自身がスクロールする」構成なのに対し、⑧だけは
   「画面の高さを固定して履歴ブロックだけがスクロールし、入力バーは常に下端」に変える。そのため
   .app-shell / .app-content へ chat-mode クラスを足して高さの伸びとスクロールを止める
   （付け外しは chrome.js の renderChrome。⑧以外の画面には一切影響しない）。
   配色は既存トークンのみを使う（自分＝--accent の塗り／他人＝--surface。LINE の配色は模倣しない）。
   ============================================================ */
.app-shell.chat-mode{
  /* min-height:100dvh（既定）のままだと中身の分だけ伸びて入力バーが画面外に出るため高さを固定する。
     iOS のキーボード出現時は 100dvh が縮まないので、screen8-comment.js の syncChatViewportHeight が
     visualViewport.height を style.height へ直接書いて上書きする（このルールはその初期値） */
  height:100dvh;
  min-height:0;
  overflow:hidden;
}
/* flex アイテムの既定 min-height:auto では中身に押されて縮まないため 0 を明示する
   （これが無いと履歴が伸びて入力バーが押し出される）。
   さらに⑧では自身も縦の flex コンテナにする：トースト（#toast-banner は .app-content の先頭にあり
   「更新しました。」「削除しました。」で表示される）と画面本体が高さを分け合う形にするため。
   画面本体を height:100% にしていたときは、トーストの高さぶん下へ押し出されて入力バーが
   overflow:hidden で切られ、編集・削除の直後だけ入力欄が消える不具合になっていた
   【2026-08-06 PM報告。新規送信はトーストを出さないため再現しなかった】。 */
.app-content.chat-mode{ padding:0; overflow:hidden; min-height:0; display:flex; flex-direction:column; }
/* ⑧ではコンテンツ左右の余白を持たないため、トーストにだけ余白を与える（高さは内容ぶんで固定） */
.app-content.chat-mode .toast-banner{ margin:10px 14px 0; flex:0 0 auto; }

/* .screen.active（display:block）よりクラス1つ分だけ詳細度を上げ、スタイルシート内の記述順に
   依存せず確実に上書きする（順序依存だと .screen 系ルールの追加・並べ替えで無言に崩れる）。
   高さは height:100% ではなく flex で残りを埋める（上記のトースト分の押し出しを避ける）。 */
.screen.chat-screen.active{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }

/* ---------- トーク履歴（唯一のスクロール領域） ---------- */
.chat-history{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 14px 10px;
  background:var(--page);
}
.chat-older-btn{ font-size:12px; padding:6px 10px; margin:0 auto 8px; display:block; }
.chat-empty{ text-align:center; padding:34px 10px; color:var(--ink-muted); font-size:13px; }

/* 日付セパレータ（LINE の日付区切りに相当。target_date で区切る＝投稿日時ではない） */
.chat-date-sep{ display:flex; justify-content:center; margin:12px 0 8px; }
.chat-date-sep span{
  font-size:11px; color:var(--ink-muted); background:var(--surface);
  border:1px solid var(--gridline); border-radius:999px; padding:2px 12px;
}

/* ---------- 吹き出し ---------- */
.msg-row{ display:flex; flex-direction:column; margin-bottom:8px; }
.msg-row .msg-author{ font-size:11px; color:var(--ink-muted); margin:0 0 2px 4px; }
.msg-row .msg-line{ display:flex; align-items:flex-end; gap:5px; }
.msg-row .msg-bubble{
  max-width:76%;
  background:var(--surface); border:1px solid var(--gridline);
  border-radius:14px; padding:7px 11px;
  word-break:break-word;
}
.msg-row .msg-time{ font-size:10px; color:var(--ink-muted); white-space:nowrap; padding-bottom:2px; }
.msg-row .msg-text{ font-size:13.5px; line-height:1.5; white-space:pre-wrap; }
/* 本文もある場合はタグ行の下に余白を置く（タグのみの投稿では余白を作らない） */
.msg-row .cmt-tags:not(:last-child){ margin-bottom:4px; }
/* 他人の投稿（.msg-other）は上記 .msg-row の既定スタイル（左寄せ・白地）がそのまま当たるため、
   専用ルールは持たない（.msg-other は左右どちらの投稿かを DOM 上で示す目印として付けている）。 */
/* 自分の投稿は右寄せ＝塗り。時刻は吹き出しの外側（左）に置く（row-reverse） */
.msg-row.msg-own .msg-line{ flex-direction:row-reverse; }
.msg-row.msg-own .msg-bubble{ background:var(--accent); border-color:var(--accent); color:#fff; }
.msg-row.msg-own .cmt-tag{ background:rgba(255,255,255,.9); border-color:#fff; color:var(--accent); }
/* 未来日を対象にした投稿＝「予定」。実績と見分けられるよう吹き出しを破線枠にする
   （バッジ自体はタグと同じ .cmt-tags 行の先頭に入る＝annotationChipsHtml） */
.msg-row.msg-planned .msg-bubble{ border-style:dashed; }
/* 自分の吹き出し（--accent の塗り）の中でも、タグとバッジの配色を同じ関係で入れ替える */
.msg-row.msg-own .cmt-planned-badge{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5); color:#fff; }
/* 送信・更新した吹き出しを一瞬だけ強調する（トーストを出さず、どれが自分の投稿か目で追えるように） */
@keyframes msg-flash{ from{ box-shadow:0 0 0 4px var(--accent-tint); } to{ box-shadow:0 0 0 0 rgba(0,0,0,0); } }
.msg-row.msg-flash .msg-bubble{ animation:msg-flash 1.2s ease-out; }
/* 長押し可能な吹き出し（自分の投稿）。長押し中の選択・iOS のコールアウトを抑止する */
.msg-row.msg-own .msg-bubble{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

/* ---------- 入力バー（下端固定） ---------- */
.chat-composer{
  flex:0 0 auto;
  background:var(--surface);
  border-top:1px solid var(--gridline);
  padding:8px 12px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom)); /* iPhone のホームバー分 */
}
.chat-composer-row{ display:flex; align-items:flex-end; gap:8px; }
.chat-composer textarea{
  flex:1 1 auto;
  /* 角丸を小さめにする：入力が max-height を超えると textarea 内にスクロールバーが出るため、
     R が大きいとスクロールバーが角丸に食い込んで汚く見える【2026-08-06 PM指摘】 */
  border:1px solid var(--gridline); border-radius:10px;
  background:var(--page);
  padding:8px 12px;
  font-size:14px;
  line-height:1.4;
  resize:none;                 /* 高さは入力量に応じて JS（autoGrowChatInput）が調整する */
  max-height:120px;            /* 履歴が潰れないよう上限を置く。超えたら textarea 内でスクロール */
  overflow-y:auto;
}
.chat-icon-btn, .chat-send-btn{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1;
}
.chat-icon-btn{ border:1px solid var(--gridline); background:var(--page); color:var(--ink-secondary); }
.chat-icon-btn[aria-expanded="true"]{ background:var(--accent-tint); border-color:var(--accent); color:var(--accent); }
.chat-send-btn{ border:none; background:var(--accent); color:#fff; font-weight:700; }
.chat-send-btn:disabled{ background:var(--baseline); }

/* 対象日チップ（日次コメントのみ。日付を明示したうえで送るための常時表示） */
.chat-target-date{ display:flex; align-items:center; gap:6px; padding:0 2px 7px; flex-wrap:wrap; }
.chat-target-date-label{ font-size:11px; color:var(--ink-muted); }
.chat-target-date input[type=date]{
  border:1px solid var(--gridline); border-radius:999px;
  background:var(--page); padding:3px 10px; font-size:12px;
}
.chat-future-badge{ font-size:10.5px; color:#184f95; background:var(--accent-tint); border-radius:999px; padding:2px 8px; }

/* タグ選択パネル（「＋」で開閉） */
.chat-tag-panel{ padding:2px 2px 8px; border-bottom:1px solid var(--gridline); margin-bottom:8px; }
.chat-tag-panel .hint{ margin-bottom:6px; }

/* 編集中バナー */
.chat-edit-banner{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12px; color:#184f95; background:var(--accent-tint);
  border-radius:8px; padding:5px 6px 5px 10px; margin-bottom:8px;
}
.chat-edit-banner .btn{ padding:2px 8px; font-size:11.5px; }

/* ---------- 長押しメニュー（吹き出し長押し。自分の投稿のみ） ----------
   画面下端に固定するシート形から、長押しした位置の近くに出すコンテキストメニュー形へ変更した
   【2026-08-06 PM指摘】。位置は JS が left/top を書き込む（annotations.js の openAnnotationSheet →
   純関数 clampSheetPosition。基準は position:fixed の .sheet-overlay＝ビューポート座標）。
   背景は操作対象の吹き出しが見えるよう薄くする（下端シート時代の .45 より淡い）。 */
.sheet-overlay{
  position:fixed; inset:0; background:rgba(11,11,11,.18); z-index:70;
}
.sheet-overlay.hidden{ display:none; }
.sheet{
  position:absolute; /* left/top は JS が設定。未設定時（初期）は左上に出るが、開く前は必ず設定される */
  min-width:132px;
  background:#fff; border:1px solid var(--gridline); border-radius:12px;
  box-shadow:0 6px 20px rgba(11,11,11,.18);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.sheet-btn{
  background:#fff; border:none; border-radius:0; text-align:left;
  padding:11px 18px; font-size:14px; font-weight:600; color:var(--accent);
  border-bottom:1px solid var(--gridline);
}
.sheet-btn:last-child{ border-bottom:none; }
.sheet-btn-danger{ color:var(--critical); }
.sheet-btn-cancel{ font-weight:600; color:var(--ink-secondary); }

/* 汎用の表示切替ユーティリティ（戻るボタン・モーダル・トースト等で使用）。
   このルールより前に display を指定するクラス（.back-btn 等）があっても、
   同一詳細度のクラスはCSS上で後勝ちになるため、必ずスタイルシートの末尾側に置くこと。 */
.hidden{ display:none; }