/* =========================================================================
   画面プロトタイプ 共通スタイル（prototype_i / iPad・ブラウザ版）
   #346 で採用UIが Blazor WebAssembly になった。
   現場は iPad の Chrome、事務所は PC のブラウザ。同じ1アプリが両方で動く。

   prototype/_shared/style.css（WPF風）との違い:
     ・クラス名と色は同じ。③④はコピーしただけで崩れないようにしてある
     ・タップ領域（最小44px）・iOS の 100dvh・慣性スクロールを足した
     ・1100px 以下で「左右2カラム」をセグメント切替に落とす仕掛け（.split）
     ・表は横スクロールの器（.scrollx）に入れる。本文は横に流れない
   個別画面の調整は各HTMLの <style> に書く。
   ========================================================================= */

:root {
  --navy:   #1B3A57;
  --teal:   #0E7C86;
  --gold:   #C9A227;
  --purple: #5B3A8E;
  --line:   #D9E0E3;
  --card:   #F1F4F6;
  --band:   #E7EDF0;
  --cream:  #FBF3DC;
  --muted:  #5A6B72;
  --ok:     #2E7D32;
  --warn:   #B26A00;
  --ng:     #C62828;
  --font: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --tap: 44px;                 /* タップ領域の最小。Apple の指針 */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
/* hidden はブラウザ既定だと詳細度が最低で、.field{display:flex} のような
   クラス指定に負ける。負けると「隠したはずの欄」が出たままになる（S03・S08・S09 で起きていた）*/
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 17px; color: #1a1a1a;
  background: #fff;
  -webkit-tap-highlight-color: rgba(14,124,134,.15);
}

/* ---- アプリ枠 -------------------------------------------------------- */
/* iOS Safari/Chrome はアドレスバーの分 100vh が実際より大きい。dvh を使う */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* 画面が切り替わると FocusOnNavigate(App.razor)が h1 に焦点を置く(読み上げのため)。
   指定が無いとブラウザの既定の枠が出て、見出しに黒い枠が付いて見える(D289 の #718)。
   Blazor の既定テンプレートと同じく枠だけを消す — 焦点はそのまま(読み上げは変わらない) */
h1:focus { outline: none; }

.titlebar {
  background: var(--navy); color: #fff; padding: 8px 14px;
  display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: var(--tap);
}
.titlebar .id {
  background: var(--gold); color: var(--navy); font-weight: 700;
  padding: 2px 9px; border-radius: 4px; font-size: 15px;
}
.titlebar h1 { font-size: 20px; margin: 0; font-weight: 600; }
.titlebar .user { margin-left: auto; font-size: 15px; opacity: .85; }
.titlebar .icons { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.titlebar .icons a, .titlebar .icons button {
  min-width: var(--tap); min-height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: #fff; font-size: 23px; cursor: pointer;
  border-radius: 8px; text-decoration: none; position: relative;
}
.titlebar .icons a:active, .titlebar .icons button:active { background: rgba(255,255,255,.15); }
/* ヘッダーの中身(design.md 0章・iPad は #390): アプリ名 ／ 工場・本日・通知・ユーザー名・ログアウト */
.titlebar .appname { letter-spacing: .02em; white-space: nowrap; }
.titlebar .today, .titlebar .uname { font-size: 15px; opacity: .88; white-space: nowrap; margin: 0 4px; }
/* 氏名のメニュー(#589): 氏名を押すと「AIアシストのボタンを表示する」と［パスワードを変更］ */
.titlebar .uname-wrap { position: relative; display: flex; align-items: center; }
.titlebar .icons .uname {
  font-size: 15px; min-width: auto; min-height: 32px; padding: 0 6px;
  border: 0; background: transparent; color: #fff; cursor: pointer; white-space: nowrap;
}
.titlebar .uname-menu {
  position: absolute; top: 100%; right: 0; z-index: 40; min-width: 240px; padding: 6px;
  /* 文字の色は本文と同じ(#1a1a1a)。var(--ink) は :root に無い変数で、
     無い変数を指した color は無効になり、ヘッダーの白(#fff)をそのまま受け継いでいた —
     氏名のメニューの字が白地に白で見えなかった(#758 の 5章で撮って分かった) */
  background: #fff; color: #1a1a1a; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 2px;
}
.titlebar .uname-menu .row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: var(--tap); padding: 0 8px; font-size: 15px; text-align: left;
  background: transparent; border: 0; border-radius: 6px; color: inherit; cursor: pointer;
}
.titlebar .uname-menu .row:active { background: #EEF3F8; }

/* いまの版(#884 の D1004)。押せる行ではないので、小さい灰色の文字で上に線を引く */
.titlebar .uname-menu .row.version {
  color: var(--muted); font-size: 13px; cursor: default; margin: 2px 0 0;
  border-top: 1px solid var(--line); min-height: 32px;
}
.titlebar .icons .logout {
  font-size: 15px; min-width: auto; padding: 0 10px; min-height: 32px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 6px; margin-left: 4px;
  white-space: nowrap; flex: 0 0 auto;
}
.titlebar .icons .bell.here {
  min-width: var(--tap); min-height: var(--tap); display: flex; align-items: center; justify-content: center;
  font-size: 23px; position: relative; opacity: .6;
}
/* モーダル(全画面)の見出し。メインのヘッダーは出さない(#390) */
.titlebar.modalhead { background: #2A4A66; }
.titlebar.modalhead .icons .x { font-size: 30px; }
/* ページの見出し(画面名)。ヘッダーの下に1行 */
.pagehead {
  flex: 0 0 auto; background: #fff; border-bottom: 1px solid var(--line);
  padding: 8px 14px; display: flex; align-items: center; gap: 10px;
}
.pagehead h2 { margin: 0; font-size: 20px; color: var(--navy); }
.titlebar .icons .dot {
  position: absolute; top: 7px; right: 7px; min-width: 17px; height: 17px;
  background: var(--ng); border-radius: 9px; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.menubar {
  background: var(--band); border-bottom: 1px solid var(--line);
  padding: 4px 10px; display: flex; gap: 16px; font-size: 16px; flex: 0 0 auto;
}
.menubar a { color: var(--navy); text-decoration: none; }

/* タブ（①②③の切替）: 指で押せる高さにする */
.tabs { display: flex; background: var(--card); border-bottom: 1px solid var(--line); flex: 0 0 auto; overflow-x: auto; }
.tabs a {
  padding: 0 20px; min-height: var(--tap); display: flex; align-items: center;
  font-size: 17px; color: var(--muted); text-decoration: none;
  border-right: 1px solid var(--line); white-space: nowrap;
}
.tabs a.active { background: #fff; color: var(--navy); font-weight: 600; box-shadow: inset 0 -3px 0 var(--teal); }

.toolbar {
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: 0 0 auto;
}
.content {
  flex: 1 1 auto; overflow: auto; padding: 12px;
  -webkit-overflow-scrolling: touch;   /* 慣性スクロール */
  overscroll-behavior: contain;        /* 端で画面全体が動かない */
}

/* 事務所の PC は左右に余白を置く(#558)。iPad(タッチ)は画面が狭いので今までどおり */
@media (min-width: 1101px) { .content { padding: 12px 24px; } }
.statusbar {
  background: var(--band); border-top: 1px solid var(--line);
  padding: 4px 12px; font-size: 15px; color: var(--muted); flex: 0 0 auto;
}

/* 画面下の操作バー。親指の届く位置に主操作を置く */
.actionbar {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: center;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.actionbar .spacer { flex: 1 1 auto; }

/* ---- 入力部品（タップ前提で大きめ） ---------------------------------- */
label { font-size: 16px; color: var(--muted); }
input[type=text], input[type=date], input[type=time], input[type=number], input[type=datetime-local],
input[type=password], input[type=search], input[type=email], input[type=tel],
select, textarea {
  font-family: var(--font); font-size: 20px;   /* iOS は 16px 未満だと拡大する */
  padding: 9px 11px; min-height: var(--tap);
  border: 1px solid #a8b4b9; border-radius: 6px; background: #fff; width: 100%;
}
textarea { min-height: 88px; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: -2px; }
input.error, select.error, textarea.error { border-color: var(--ng); background: #FDF2F2; }
/* AIアシストに候補が出ているあいだ、確定用の欄をロックする（design.md S04 #257 の段階1）*/
textarea.locked, input.locked, select.locked { background: var(--card); color: var(--muted); cursor: not-allowed; }
.err { color: var(--ng); font-size: 15px; margin-top: 3px; }

/* ボタンの既定は薄い灰(D374 の #733・D267 の系統を全画面へ・ユーザー判断) —
   白いままのボタンを残さない。戻る・取消・閉じるがこの色で、
   補助は .sub(薄い青)・削除は .del(薄い赤)・主ボタンは .primary(紺)が上から塗る */
button, .btn {
  font-family: var(--font); font-size: 17px; padding: 0 18px;
  min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #C9D2DA; border-radius: 8px; background: #EEF1F4; cursor: pointer;
  text-decoration: none; color: var(--navy);
}
button.primary, .btn.primary { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
button.ai, .btn.ai { background: #106ebe; border-color: #106ebe; color: #fff; font-weight: 600; }
button:disabled, .btn.off { opacity: .45; cursor: not-allowed; }

/* 白いボタンに色を付ける(D267 の #716・ユーザー判断 10-11。一覧の行のボタン D25 の5 と同じ系統)。
   補助の操作(初期に戻す・マスタで編集・既定値に戻す など)= 薄い青 / 削除 = 薄い赤。
   主ボタン(保存・はい)は .primary の紺のまま */
button.sub, .btn.sub { background: #E6F1FB; border-color: #B5D0EA; color: #0C447C; }
button.del, .btn.del { background: #FCEAEA; border-color: #E6B7B7; color: #A32D2D; }

/* 単票・確認のダイアログの足のボタン(取消・閉じる)= 薄い灰。
   色を付けた .primary / .ai / .sub / .del は上の指定が残る */
.dialog-actions .btn:not(.primary):not(.ai):not(.sub):not(.del),
.dialog-actions button:not(.primary):not(.ai):not(.sub):not(.del) {
  background: #EEF1F4; border-color: #C9D2DA; color: var(--navy);
}

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > label { font-weight: 600; color: var(--navy); font-size: 16px; }
.field .hint { font-size: 15px; color: var(--muted); }

/* 説明文は文節で折る(D265 の #716・#534 と同じ)。
   1〜数文字だけ次の行に落ちると読みにくい。事務所の PC 専用なので Edge・Chrome だけ見ればよい。
   .field の外に置いた案内(S07・S09 の添付の案内)も同じ(D293 の #718。#708 から残っていた)。

   説明文・注意書きは全画面で同じ扱いにする(D348 の #730・design.md S12 の #534 の下) —
   S32 の工場行の説明文が見切れていた。
   text-wrap: pretty は「行末に1〜2字だけ残る折り返し」を避ける(Chrome・Edge が対応)。
   高さを決め打ちして隠さない(カードの説明の2行で切る #520 ⑤ だけは今までどおり) */
.hint, .field .hint, .form-row .hint, .form-row .note, .note, .dialog-body, .readonly-value, .field-error,
.warning, .message, .description, .band, .notice, .lead, th .sub {
  word-break: auto-phrase;
  text-wrap: pretty;
  overflow: visible;
}

/* ファイル選択の右に案内が詰まると、幅の狭い端末で案内が数文字ずつ折れる(D293 の #718)。
   案内は次の行に置く */
input[type="file"] + .hint { display: block; margin-top: 6px; }
/* 横並びの欄(S04 の①③④・S07・S09)。#848 の D832・ユーザーの操作確認:
   「実施日と実施者の横並びの位置を揃える(実施者が少し下)。作業時間もメッセージで
     行が横の項目からずれないように。並列の項目の位置関係は維持する」

   flex-end にしていたので、片方の欄の下にメッセージ(乖離・間違い)が出ると
   その欄だけが上にずれていた。上そろえにし、見出しの高さをそろえて、
   メッセージは下に伸ばす(隣の欄は動かない) */
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.row > .field > label { min-height: 24px; display: flex; align-items: flex-end; }
.required::after { content: " *"; color: var(--ng); }

/* チェック・ラジオの並び（作業区分など）: 1つずつが押せる大きさ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--line); border-radius: 22px; background: #fff;
  font-size: 17px; color: #1a1a1a; cursor: pointer;
}
.chips label.on { background: #E6F3F4; border-color: var(--teal); color: #0B5A62; font-weight: 600; }
.chips input { width: auto; min-height: 0; }

/* 単独のチェック（一覧の絞り込みなど）。素の <label><input type=checkbox> だと
   タップ枠が 19px しかなく 0章の「最小44px」を満たさない */
.checkline {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap); padding: 0 13px;
  border: 1px solid var(--line); border-radius: 22px; background: #fff;
  font-size: 17px; color: #1a1a1a; cursor: pointer; white-space: nowrap;
}
.checkline input { width: auto; min-height: 0; }

/* 2択のセグメント（S04 ③結果）。design.md 2章が「セグメント」と書いている箇所に使う */
.choice { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
/* 選ぶボタンは、ふつうのボタンと同じ見た目にする（#858 の #43・ユーザー判断
   「色合いは全体調和するようにボタン認識が出来れば良いです」）—
   #848 の D834 で白地＋枠線にしたが、ほかのボタン（薄い青灰の地・枠 #C9D2DA・角丸8px・濃紺の字）と
   見た目が違っていた。新しい色は足さず、button, .btn と同じ値を使う。
   選んでいるほうは白地＋濃紺の枠（.seg button.on と同じ考え方） */
.choice label {
  min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  padding: 0 26px; border-radius: 8px; font-size: 19px; font-weight: 600;
  color: var(--navy); cursor: pointer;
  background: #EEF1F4; border: 1px solid #C9D2DA;
}
.choice label + label { margin-left: 6px; }
/* 選んだほうは塗る（#879 の D891・ユーザーの再確認
   「『良』『否』のボタンを押した後は白以外のボタン色にしたい（背景も白が多く分かりづらい為）」）。
   #848 の D834 の「選んだあとの色は今のまま（白地）」を置き換えた。
   新しい色は足さず、見出しの濃紺（--navy）と否の赤（--ng）を使う */
.choice label.on {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
/* 否だけ赤（一覧・バッジの否と同じ色） */
.choice label.ng.on { background: var(--ng); border-color: var(--ng); color: #fff; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ---- セグメント（設定 ⇄ AIアシストの切替。#346 の中心） -------------- */
.seg {
  display: flex; gap: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px; margin: 0;
}
.seg button {
  flex: 1 1 0; min-height: var(--tap); border: 0; background: transparent;
  border-radius: 8px; font-size: 17px; color: var(--muted); font-weight: 600; padding: 0 10px;
}
.seg button.on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* 反映後は AI 側がロックされる（#257 の段階2）。タブも押せなくする（#359）*/
.seg button.locked { opacity: .45; cursor: not-allowed; }
.seg button.locked::after { content: " 🔒"; font-size: 14px; }
.seg button .n {
  display: inline-block; margin-left: 6px; background: #106ebe; color: #fff;
  border-radius: 10px; font-size: 14px; padding: 1px 7px; font-weight: 700;
}

/* 左右2カラム → 1100px 以下ではセグメントで1つずつ出す */
.split { display: grid; grid-template-columns: 1fr 420px; gap: 12px; align-items: start; }
.split > .pane-main, .split > .pane-ai { min-width: 0; }
.seg { display: none; }                       /* 広い画面ではセグメントを出さない */
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
  .seg { display: flex; margin-bottom: 12px; }
  .split.show-main > .pane-ai { display: none; }
  .split.show-ai   > .pane-main { display: none; }
}

/* AIアシストOFF は幅を狭める（design.md 0章「全幅に伸ばさない」・#375）。
   1100px 以上でも右に空の欄を残さない。対象は S03・S04・S07・S09・S24・S25 の6画面 */
/* AIアシストON でも「その段階では右に出すものが無い」画面がある（#378）。
   AI のタブを出さない段階（seg の hide-ai-on）は、同じ理由で同じ形に畳む。
   ai-off はテナントの設定、ai-empty は段階の話で、理由が違うのでクラスを分ける。
   #414 で6画面とも「押す前も AI のタブを🔒で見せる」にしたので、いま hide-ai-on を使う画面は無い
   （2カラムでは右に🔒の見本を出す） */
body.ai-off .split,
body.ai-empty .split { grid-template-columns: minmax(0, var(--ai-off-w, 780px)); justify-content: center; }
body.ai-off .pane-ai,
body.ai-empty .pane-ai { display: none; }

/* #414: 左右のロックは3段階で6画面同じ（design.md 0章「左右のロックは3段階」）。
   #411 で S04 の画面別 CSS に置いていたものをここへ移した。
   アシスト中（seg の lock-main-on）は「入力・確認」を淡色にして触れなくし、
   材料の欄（.panel.keep の中。.lockable を付けたものは除く）だけ書ける */
body.main-locked .pane-main .panel:not(.keep),
body.main-locked .pane-main .keep .lockable { opacity: .5; pointer-events: none; }
body.main-locked .pane-main .panel:not(.keep) input,
body.main-locked .pane-main .panel:not(.keep) select,
body.main-locked .pane-main .panel:not(.keep) textarea { background: #F2F4F5; }
.mainlock { display: none; }
body.main-locked .mainlock { display: block; }
/* 押す前・反映後で AI 側がロックされている段階の見本（2カラムでは右に見える） */
.panel.ai.ailock { opacity: .6; }
/* 1100px 未満だけ出すもの（入力の写し・材料の入力口）/ 2カラムだけ出すもの（#409） */
.seg-only { display: none; }
@media (max-width: 1100px) { .seg-only { display: block; } .wide-only { display: none !important; } }

/* 入力の面をまとめて止めるための囲み(#846 の D828)。
   見た目は持たない — fieldset の既定の枠・余白を消す(中の並びを崩さない) */
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---- キーワードの欄と［×］(#845 の D813) --------------------------- */
/* 欄と［×］を重ねる。［×］は 44px(iPad のタップ領域)で、欄の右に置く */
.kw { position: relative; display: inline-flex; align-items: center; flex: 1 1 200px; min-width: 160px; }
.kw > input[type=search] { width: 100%; padding-right: 48px; }
.kw > .kw-clear {
  position: absolute; right: 0; top: 0;
  width: 44px; height: 100%; min-height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px;
  color: #51636F; font-size: 22px; line-height: 1; cursor: pointer;
}
.kw > .kw-clear:hover { background: #ECEFF2; }

/* ---- 一覧: 表は横スクロールの器に入れる ------------------------------ */
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
table.grid { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th {
  background: var(--navy); color: #fff; font-weight: 600; font-size: 15px;
  padding: 8px; text-align: left; border: 1px solid var(--navy); white-space: nowrap;
}
table.grid td { padding: 9px 8px; border: 1px solid var(--line); }
table.grid tbody tr:nth-child(even) { background: #FAFCFC; }
table.grid tbody tr.selected { background: #D5EAEC; }
tr.state-active { background: #FFF8E1 !important; }
tr.state-over   { background: #FDECEA !important; }
/* 周期未確定は灰(#783 の D568)。文字も薄くする(画面イメージの `tr.state-undet td`) */
tr.state-undet  { background: #F2F4F5 !important; }
tr.state-undet td { color: var(--muted); }

/* 一覧のカード表示。iPad ではこちらを既定にする（横スクロールさせない） */
.cards { display: grid; gap: 10px; }
.rowcard {
  border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 10px; background: #fff; padding: 11px 13px;
  display: block; text-decoration: none; color: inherit;
}
.rowcard:active { background: #F7FAFB; }
.rowcard.over   { border-left-color: var(--ng);   background: #FFF9F8; }
.rowcard.active { border-left-color: var(--warn); background: #FFFDF5; }
.rowcard.before { border-left-color: var(--ok); }
.rowcard.undet  { border-left-color: var(--muted); }
.rowcard .t { font-weight: 600; font-size: 19px; color: var(--navy); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rowcard .m { font-size: 16px; color: var(--muted); margin-top: 4px; line-height: 1.7; }
.rowcard .m b { color: #1a1a1a; font-weight: 600; }
.rowcard .foot { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* 折り返さない列(#677 の31・32)。状態・管理番号・日付のように、割れると読めなくなるもの */
.nowrap { white-space: nowrap; }

/* バッジは折り返さない(#677 の31・32) — 狭い幅で「起/票」「検討/中」と縦に割れていた */
.badge { display: inline-block; padding: 2px 10px; border-radius: 11px; font-size: 15px; font-weight: 600;
  white-space: nowrap; }
.badge.ok   { background: #E6F4EA; color: var(--ok); }
.badge.warn { background: #FFF4E0; color: var(--warn); }
.badge.ng   { background: #FDECEA; color: var(--ng); }
.badge.gray { background: var(--card); color: var(--muted); }
.badge.ai   { background: #E7F1FB; color: #106ebe; }
/* 周期管理方式のバッジ(#845 の D812)。AI と同じ青の系統で、濃さで見分ける —
   それまでは AI と同じ色で、文字(AI / MS)だけが違っていた(ユーザーの操作確認 10-21)。
   色は決め打ちで書く(無い変数を書くと親の色を継いで字が消える) */
.badge.mth  { background: #DCE6EF; color: #32506B; }
/* 期間の再設定が必要な行の印(#845 の D827)。期間超過(赤)より強い「やること」なので紫系 —
   同じ赤にすると超過日数のバッジと見分けが付かない。色は決め打ちで書く */
.badge.reset { background: #EFE7F7; color: #5B3B8C; }

/* 添付の並べ表示(S04・S07・S09・S24。画像は押すと画像ビューアを重ねて開く・#385) */
.atts { display: flex; flex-wrap: wrap; gap: 8px; }
.att { position: relative; border: 1px solid var(--line); border-radius: 8px; background: #fff;
       padding: 6px 26px 6px 8px; font-size: 15px; min-height: 44px; display: flex; align-items: center; gap: 6px;
       color: inherit; text-decoration: none; }
.att .thumb { width: 40px; height: 40px; border-radius: 4px; background: linear-gradient(135deg,#cfd8dc,#90a4ae); display: block; }
.att .x { position: absolute; top: 2px; right: 4px; color: var(--muted); font-size: 19px; line-height: 1; padding: 4px; }

/* ---- 面・注記 -------------------------------------------------------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.panel > h2 { font-size: 17px; margin: 0 0 10px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.panel.ai { background: #F9FCFE; border-color: #d3e8f8; }
.panel.ai > h2 { color: #106ebe; }

.note { background: var(--cream); border-left: 4px solid var(--gold); padding: 9px 13px; font-size: 16px; color: #6B5614; border-radius: 0 8px 8px 0; }
.ai   { background: #E6F3F4; border-left: 4px solid var(--teal);  padding: 9px 13px; font-size: 16px; color: #0B5A62; border-radius: 0 8px 8px 0; }
/* 上の .ai(注記の面)が、同じ class を持つボタン・バッジの角と余白を崩していた(#392)。ボタンとバッジの形に戻す */
.btn.ai, button.ai { padding: 0 18px; border-radius: 8px; border-left: 1px solid #106ebe; font-size: 17px; }
.badge.ai { padding: 2px 10px; border-radius: 11px; border-left: 0; font-size: 15px; }
.auto { background: #EFEAF6; border-left: 4px solid var(--purple);padding: 9px 13px; font-size: 16px; color: #442A6B; border-radius: 0 8px 8px 0; }

.protobar {
  background: var(--gold); color: var(--navy); font-size: 15px; font-weight: 600;
  padding: 4px 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 32px;
}
.protobar .sid {
  background: var(--navy); color: #fff; font-weight: 700; font-size: 14px;
  padding: 2px 8px; border-radius: 4px; letter-spacing: .04em;
}
.protobar button {
  min-height: 26px; padding: 0 12px; font-size: 15px; border-radius: 13px;
  border: 1px solid rgba(27,58,87,.35); background: rgba(255,255,255,.75); color: var(--navy);
}

/* レビュー用の注記は画面の中に出さない（#384・ユーザー判断 2026-09-14）。
   画面の中に説明が混ざっていると実画面との齟齬になるため、
   .app（画面の枠）の外に作る「この画面の注記」へ app.js がまとめて写す。
   元の要素は消さずに残す — どの欄の注記かを組み立てる材料と、
   デモの段階ごとの出し分け（[hidden] を見る）に使うため。 */
.memo { display: none !important; }

/* ---- 画面の外の「この画面の注記」（#384） ---------------------------- */
.notebox { border-top: 3px solid var(--navy); background: #F7FAFB; padding-bottom: 28px; }
.notebox > .head {
  width: 100%; display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  min-height: var(--tap); padding: 10px 14px; background: #E8F0F3;
  border: 0; border-bottom: 1px solid var(--line);
  font-family: var(--font); font-size: 17px; font-weight: 600; color: var(--navy);
  cursor: pointer; text-align: left;
}
.notebox > .head .mark { font-size: 19px; width: 1em; text-align: center; }
.notebox > .head .lead {
  margin-left: auto; font-weight: 400; font-size: 15px; color: var(--muted);
}
.notebox ol { margin: 0; padding: 14px 16px 0 36px; }
.notebox li { margin: 0 0 13px; font-size: 16px; line-height: 1.8; color: #37474F; }
.notebox li .where {
  display: block; color: var(--navy); font-size: 15px; font-weight: 700; margin-bottom: 1px;
}
.notebox li .body b { color: #3d5a68; }
@media (max-width: 760px) { .notebox ol { padding: 12px 12px 0 30px; } }

/* デモの状態切替タブ（プロトタイプだけの部品。実画面には無い） */
.demo-tabs {
  display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; flex: 0 0 auto;
  background: #EEF2F4; border-bottom: 1px solid var(--line); -webkit-overflow-scrolling: touch;
}
.demo-tabs button {
  min-height: 34px; padding: 0 13px; font-size: 16px; white-space: nowrap;
  background: #fff; border: 1px solid #d0d4d9; color: var(--muted); border-radius: 17px;
}
.demo-tabs button.on { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600; }

/* ---- モーダル（WPF の「ダイアログ」に相当） -------------------------- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.overlay.open { display: flex; }
.dialog {
  background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.3);
  width: min(720px, 100%); max-height: 90dvh; display: flex; flex-direction: column;
}
.dialog.full { width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; }
.dialog .head { background: var(--navy); color: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-radius: 14px 14px 0 0; flex: 0 0 auto; min-height: var(--tap); }
.dialog.full .head { border-radius: 0; }
.dialog .head .id { background: var(--gold); color: var(--navy); font-weight: 700; padding: 2px 8px; border-radius: 4px; font-size: 14px; }
.dialog .head .x { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 25px; min-width: var(--tap); min-height: var(--tap); }
.dialog .body { padding: 14px; overflow: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
.dialog .foot { padding: 10px 14px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }

/* ---- 索引ページ(index.html) ------------------------------------------ */
.index-wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 80px; }
.index-wrap h1 { color: var(--navy); font-size: 32px; margin: 0 0 4px; }
.index-wrap .lead { color: var(--muted); margin: 0 0 20px; line-height: 1.8; }
.index-wrap h2 { color: var(--navy); font-size: 20px; margin: 30px 0 10px; padding-bottom: 5px; border-bottom: 2px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.index-wrap h2 .tag { font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 11px; }
.index-wrap h2 .tag.ipad { background: #E6F3F4; color: #0B5A62; }
.index-wrap h2 .tag.pc   { background: var(--card); color: var(--muted); }
.index-wrap td a { color: var(--teal); font-weight: 600; }
.index-wrap table.grid th { font-size: 15px; }
.index-wrap table.grid td { font-size: 16px; line-height: 1.75; vertical-align: top; }
.todo { color: var(--muted); font-style: italic; }

@media (max-width: 760px) {
  .index-wrap { padding: 18px 12px 60px; }
  .titlebar h1 { font-size: 17px; }
  .content { padding: 10px; }
}

/* iPad のタップ領域は 44px 以上(0章・#357・#711 の別紙36 の 3-2)。
   ヘッダーの氏名・ログアウトが 32px で、指では押しにくかった */
@media (max-width: 1100px) {
  .titlebar .icons .uname,
  .titlebar .icons .logout { min-height: var(--tap); }
}