/* 画面の見た目は prototype_i/_shared/style.css(ユーザー確認済みの試作)と同じものを使う。
   そちらを shared.css として取り込み、アプリ側の足し引きだけをここに書く(#463)。 */

/* Blazor の未処理例外の帯(既定の #blazor-error-ui)。試作の色に合わせる */
#blazor-error-ui {
  background: #FBF3DC;
  border-top: 2px solid #C62828;
  bottom: 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .2);
  display: none;
  left: 0;
  padding: 10px 14px;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 12px;
  top: 8px;
}

/* S01 ログイン(design.md 3章 S01)。器(.card)を画面の中央に置く(D2) */
.login { width: min(460px, 100%); margin: auto; }
/* 重ねて出すログインは器(ダイアログ)の幅いっぱいに使い、アプリ名を器の中央に置く(#515 の D8)。
   .dialog-body の margin: 0 が .login の margin: auto に勝ち、460px の本文が左に寄っていた */
.dialog-body.login { width: auto; }
.login-app { color: var(--navy); font-size: 27px; margin: 0; text-align: center; }
.login-company { color: var(--muted); font-size: 15px; margin: 2px 0 20px; text-align: center; }

/* いつの版か(#884 の D1004)。入力の邪魔をしないよう画面の下端に小さく灰色で */
.login-version { color: var(--muted); font-size: 13px; margin: 18px 0 0; text-align: center; }
.login-banner { background: var(--cream); border: 1px solid var(--gold); border-radius: 6px; padding: 8px 10px; font-size: 16px; }
.login-error { color: var(--ng); font-size: 16px; }
.login label { display: block; margin: 12px 0 4px; }
.login-actions { margin-top: 20px; }
/* 押したあとの「ログインしています…」(#879 の D890)。回る印は CSS だけで作る(画像を増やさない) */
.login-busy { display: flex; align-items: center; gap: 8px; color: var(--navy); font-size: 16px; margin: 10px 0 0; }
.login-busy .spin {
  width: 16px; height: 16px; border: 2px solid #C9D2DA; border-top-color: var(--navy);
  border-radius: 50%; animation: login-spin .8s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }
/* 動きを減らす設定の端末では回さない(字だけで知らせる) */
@media (prefers-reduced-motion: reduce) { .login-busy .spin { animation: none; } }

/* モーダル(3-0)。深さは常に1、重ねるのは S23 とログインだけ */
.dialog-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center; z-index: 900; padding: 16px;
}
.dialog { position: relative; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); max-width: 560px; width: 100%; }
/* 見出しの右端の×(D601 の #800・#392 J5)。見出しの帯に重ねる(帯の上に白い行を作らない) */
.dialog > .dialog-close {
  position: absolute; top: 6px; right: 8px; z-index: 1;
  width: 28px; height: 28px; padding: 0; line-height: 1;
  background: transparent; border: 0; border-radius: 4px;
  color: #fff; font-size: 20px; cursor: pointer;
}
.dialog > .dialog-close:hover { background: rgba(255, 255, 255, .18); }
.dialog-overlay { z-index: 950; }
.dialog-title { background: var(--navy); color: #fff; font-size: 19px; margin: 0; padding: 10px 14px; border-radius: 8px 8px 0 0; }
.dialog-body { padding: 16px 14px; margin: 0; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 0 14px 14px; }
/* ダイアログの直下に出す案内(ボタンのすぐ上・D830・D838)は、中身(.dialog-body)と同じ左右の余白に置く(#867 の D862)。
   余白が無く、文の左端がダイアログの枠と同じ x で張り付いて見えていた(Cowork の事前確認・820px)。
   .dialog-body の中の案内(S18・S07・S09・S16 単票)は今までどおり(親の padding が効く) */
.dialog > .message, .dialog > .warning { margin-left: 14px; margin-right: 14px; }

/* ヘッダーの工場のプルダウン(2工場以上のとき・#364) */
.titlebar .factory { min-height: 32px; font-size: 16px; width: auto; padding: 2px 8px; }
.titlebar .master { text-decoration: none; }

/* AI を使う6画面の共通部品(AssistPanel・design.md 0章「左右のロックは3段階」・#414・#463 の8章)。
   試作の style.css は body に付けたクラス(body.main-locked・body.ai-off)で出し分けているが、
   画面の中に部品として置くので、同じ内容を .assist の下に写した(shared.css は試作の写しなので触らない) */
.assist fieldset.panel { border: 1px solid var(--line); }
.assist fieldset.pane-body { border: 0; margin: 0; padding: 0; min-width: 0; }
.assist fieldset > legend { font-size: 17px; color: var(--navy); font-weight: 700; padding: 0 4px; }
/* 設定で必須になる欄の印(#880 の D897)。ほかの必須の欄(label.required の「 *」)と同じ赤 */
.assist fieldset > legend > .req { color: var(--ng); margin-left: 3px; }

/* 欄のかたまりの中身は1つずつ行を分ける(#831 の D772・ユーザーの iPad 実機)。
   S09 の③で「やったことを入れてください *」のあとに［写真・PDF を追加］と注記が続き、
   実機の文字幅では1行につながって読めなかった。
   fieldset は block なので、中の span(必須の文・注記)とボタンは行の流れに並ぶ —
   幅が足りるときだけ同じ行に乗る「折り返し任せ」だった。
   必須の文・注記は block に、ボタンは幅なりの block(flex)にして、並びを幅で変えない。
   .acts などの箱で包んだボタンの列は直の子ではないので、今までどおり横に並ぶ */
.assist fieldset.panel > .required,
.assist fieldset.panel > .hint,
.assist fieldset.panel > .note { display: block; margin-top: 6px; }
.assist fieldset.panel > .btn,
.assist fieldset.panel > button { display: flex; width: fit-content; margin-top: 6px; }

/* アシスト中は「入力・確認」を淡色にする。材料の欄(.keep)はそのまま書ける */
.assist.main-locked .pane-main .panel:not(.keep) { opacity: .5; }
.assist.main-locked .pane-main .panel:not(.keep) input,
.assist.main-locked .pane-main .panel:not(.keep) select,
.assist.main-locked .pane-main .panel:not(.keep) textarea { background: #F2F4F5; }

/* AIアシストOFF は幅を狭める(1100px 以上でも右に空の欄を残さない・#375・#378) */
.assist.ai-off .split { grid-template-columns: minmax(0, var(--ai-off-w, 780px)); justify-content: center; }

/* ---- 共通の器・ボタン・入力欄・背景(D2・#507) ----------------------------------
   カード・ボタン・入力欄・背景は全画面に効くので、ここ1か所で持つ(画面ごとに書かない)。
   試作(prototype_i)の形にそろえる。ComponentOne の部品は素の見た目のまま */

/* 背景は薄いグレー。本文の面は白い器に載せる */
body { background: #EEF2F4; }

/* 器(カード)。白・角丸・薄い枠・淡い影 */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 2px 8px rgba(27, 58, 87, .08); padding: 20px;
}

/* 単独の画面(S01 など)は器を画面の中央に置く */
.center-screen { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
/* ただし上下は真ん中より上に寄せる(上の余白を真ん中のときの半分 = 余白を上1:下3に分ける・#515 の D5)。
   ブラウザのヘッダー分だけ下に見え、iPad ではソフトキーボードに掛かるため */
.center-screen { flex-direction: column; }
.center-screen::before { content: ""; flex: 1 1 0; }
.center-screen::after { content: ""; flex: 3 1 0; }
.center-screen > .login { margin: 0 auto; flex: none; }

/* 入力欄。ラベルは上・枠線は薄いグレー・角丸。文字は 16px 以上(iPad・#357) */
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 { border-color: #C5CED2; border-radius: 8px; }
.card label, .form-row > label { display: block; margin: 12px 0 4px; }

/* 主ボタンは濃紺の塗り。副ボタンは白地＋枠線(button の既定) */
button.primary, .btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ファイルを選ぶボタン(S04・S07・S09 の［写真・PDF を追加］・S14 の［ファイルを選ぶ］・別紙68 1章)。
   ブラウザ既定の［ファイル選択］は端末で言葉と見た目が変わる(iPad は「ファイルを選択」)ので、
   ラベルをボタンの形にして、中の input を透明にして重ねる */
.btn.file { position: relative; overflow: hidden; }
.btn.file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* 上限まで付けたときは押せない見た目に(label は disabled が効かない) */
.btn.file.off { opacity: .5; pointer-events: none; }

/* ボタンの縦積み。主ボタンが1つしかない画面では幅いっぱい、副ボタンはその下(横並びにしない) */
.btn-stack { display: flex; flex-direction: column; gap: 8px; }
.btn-stack > button, .btn-stack > .btn { width: 100%; }

/* 定義から作る入力欄(S16 単票)。ラベル・欄・間違いを縦に並べる */
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-row > label { margin: 0; }

/* ツリーの下位の行(分類・#552)。1列目だけ1段下げる */
.master-list .indent { padding-left: 20px; }

/* 複数選べる欄(作業区分(計画)・#537)。横に並べて折り返す */
.form-row .bits { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.form-row .bits .bit { display: inline-flex; align-items: center; gap: 4px; margin: 0; }

/* 見るだけの見せ方(#658・design.md 5-0-2)。
   行の目印は操作列の目のアイコン・画面ぜんぶが見るだけなら一覧の上に帯。
   文字色は薄くしない(状態の色・期限超過の赤をそのまま読ませる) */
.banner.view-only {
  display: flex; align-items: center; gap: 8px;
  background: #EEF3F6; border-left: 4px solid var(--navy); border-radius: 4px;
  padding: 8px 12px; margin-bottom: 10px; color: var(--navy);
}
span.view-only { color: var(--muted); margin-right: 6px; display: inline-flex; vertical-align: middle; }
.gt .bar span.view-only { color: #fff; font-size: 12px; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.opmenu .note.view-only { color: var(--navy); background: #EEF3F6; border-radius: 4px; padding: 6px 10px; margin: 0 0 8px; }
.badge.view-only { background: #EEF3F6; color: var(--navy); border: 1px solid var(--line); }

/* 複数選べる欄(多対多)は件数で形が変わる(#656・design.md S16)。
   12件以下は上の .bits のまま。13件以上は「選んだものをタグ ＋ 検索付きのプルダウンで足す」 */
.links .tag-group { color: var(--muted); font-size: 13px; }
.links .bit.inactive .tag-label, .links .tag.inactive .tag-label { color: var(--muted); }

.link-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; align-items: center; }
.link-tags .tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #EEF3F6; border: 1px solid var(--line); border-radius: 14px;
  padding: 3px 6px 3px 10px; font-size: 15px;
}
.link-tags .tag.inactive { background: #F3F3F3; }
.link-tags .tag-x {
  border: 0; background: transparent; color: var(--muted);
  font-size: 17px; line-height: 1; padding: 2px 6px; cursor: pointer;
}
.link-tags .tag-x:hover { color: var(--ng); }
.link-tags .tag-empty { color: var(--muted); font-size: 15px; }

/* 足すほうは「開く → 絞り込む → 選ぶ」。重ねずに欄の下へ開く(iPad でも指で届く) */
.link-picker { position: relative; margin-top: 6px; }
.link-picker .btn.picker { padding: 4px 12px; }
.picker-panel {
  margin-top: 6px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; padding: 8px; max-width: 420px;
}
.picker-search { width: 100%; box-sizing: border-box; }
.picker-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.picker-list li { padding: 2px 0; }
.picker-list .bit { display: flex; align-items: center; gap: 6px; margin: 0; }
.picker-none { color: var(--muted); font-size: 15px; padding: 4px 0; }

/* 人を選ぶ欄(D275 の #716)。プルダウンの代わりに「開く → 絞り込む → 選ぶ」。
   見た目は select にそろえる(並んだときに浮かない) */
.person-select { position: relative; }
.person-select > .btn.picker {
  width: 100%; justify-content: space-between; background: #fff; border-color: #9aa7ad;
  font-weight: 400; color: #1a1a1a;
}
.person-select.locked > .btn.picker { background: var(--card); color: var(--muted); }
.person-select .person-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-select .person-mark { color: var(--muted); margin-left: 8px; }
/* 候補はダイアログの枠の外に重ねて出す(D290 の #718)。
   単票は .dialog-body が overflow-y: auto なので、中に絶対配置すると枠で切られ、
   担当範囲の新規では候補が1件ぶんしか見えなかった。
   祖先の overflow で切られない position: fixed にする(列見出しのメニュー #555 と同じ手) —
   left・top を書かないと、その場の位置のまま浮く。
   高さは画面に収まるところまで(下に長い一覧でも、はみ出して届かなくならない) */
.person-select .picker-panel {
  position: fixed; z-index: 30; min-width: 260px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.person-select .picker-list { max-height: min(260px, 36vh); }
.picker-list .picker-item {
  display: flex; align-items: center; gap: 6px; width: 100%; justify-content: flex-start;
  border: none; background: none; padding: 6px 4px; min-height: 36px; border-radius: 4px;
}
.picker-list .picker-item:hover { background: #E6F1FB; }
.picker-list .picker-item.selected { background: #E6F1FB; font-weight: 600; }

/* 絞り込みの帯では幅を抑える(ほかの絞り込みと同じ見た目) */
.filters .person-select { min-width: 200px; }
.field-error { color: var(--ng); font-size: 15px; margin: 2px 0 0; }

/* 単票は窓に収まる高さまで(D28)。欄の部分だけ中でスクロールし、見出しとボタンの帯は動かさない。
   100% では「有効」から下がはみ出し、ボタンが押せなかった(7-1 で欄が増えるので必須) */
.dialog { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.dialog .dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* 欄をまとめて読み取り専用にする本文は fieldset で包む(S09 の対策完了・#743 の 2-1)。
   包むのは本文の中(D446 の #750) — .dialog-body そのものを fieldset にすると、
   fieldset の中身の箱が flex で配られた高さを受け取らず、ダイアログの中のスクロールが効かない
   (本文がボタンの帯の下にもぐっていた)。
   fieldset の既定(枠・min-width: min-content)を打ち消さないと、枠が出て中身の幅で横に広がる */
.dialog-body > fieldset.fields { border: 0; min-width: 0; margin: 0; padding: 0; }

/* 読み取り専用のときは欄も灰色にする(#743 の 2-1) —
   ブラウザの既定では textarea・日付・数値の欄が白いままで、押せるように見える */
.dialog-body fieldset:disabled input,
.dialog-body fieldset:disabled select,
.dialog-body fieldset:disabled textarea { background: #F2F4F5; color: var(--muted); }
.dialog .dialog-actions { flex: 0 0 auto; }

/* PC の広い画面では単票の欄を2列にする(#703 の D243・ユーザー判断 10-07) —
   1列だと設備・ユーザーの単票が最大表示(1920x940)で縦にはみ出していた。
   説明・多対多の欄・チェックの行は横幅いっぱいのまま(中身が長い) */
@media (min-width: 1200px) {
  /* 2列にするぶん幅を広げる(#703 の D243)。狭いままだと欄が縦に伸びて収まらない */
  .dialog:has(> .dialog-body.master-edit) { max-width: 920px; }

  .dialog .dialog-body.master-edit .form {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
    align-content: start;

    /* 左右の欄の上をそろえる(D301 の #720) —
       固定の説明を ⓘ へ移して高さがそろったので、行の頭を合わせる */
    align-items: start;
  }
  .dialog .dialog-body.master-edit .form > .form-row { margin-bottom: 6px; min-width: 0; }

  /* 説明は2行ぶんの高さで足りる(縦に収めるため。つまみで伸ばせる) */
  .dialog .dialog-body.master-edit .form > .form-row textarea { height: 62px; }

  /* 中身が長い欄は横幅いっぱい(説明・多対多・いまの担当者・パスワードの行) */
  .dialog .dialog-body.master-edit .form > .form-row.wide { grid-column: 1 / -1; }
}

/* 説明の入力欄は縦だけ伸縮(横に伸ばすと欄がはみ出す・D28) */
.form-row textarea { resize: vertical; width: 100%; box-sizing: border-box; }

/* 項目名と、その横の ⓘ(D301 の #720・ユーザー判断 J2)。
   その欄が何かを言う固定の説明は ⓘ にホバーで出す(C1Tooltip) —
   欄の下に固定の説明が無くなるので、2列の左右の欄の高さがそろう(D243) */
.field-label { display: flex; align-items: center; gap: 4px; min-width: 0; }
.field-label > label { min-width: 0; }
.field-info {
  flex: 0 0 auto; color: var(--navy); font-size: 14px; line-height: 1;
  cursor: help; opacity: .75;
}
.field-info:hover { opacity: 1; }

/* 見せるだけの欄(分類のコード・#571)。入力欄と見分けが付くように枠を持たせない */
.readonly-value { margin: 0; padding: 6px 0; color: var(--navy); font-weight: 600; }

/* 単票の「有効」(D27・S16-1・2)。チェックは大きく・左詰め */
.form-row .checkline.big { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.form-row .checkline.big input[type=checkbox] { width: 20px; height: 20px; }

/* 保存の前に出す警告(担当者が0人になる など)。お知らせ(.note)より強い色 */
.warning {
  background: #FFF4E5; border-left: 4px solid var(--warn); padding: 9px 13px;
  font-size: 16px; color: #6B3F00; border-radius: 0 8px 8px 0;
}

/* 文として置く帯は前後に余白を取る(D392・別紙48 3-8) —
   表の下やボタンの上に詰まって、見出しや次のボタンと接していた */
p.warning { margin: 10px 0; }

/* 終わったことの知らせ(「担当範囲を n 行作りました」など・#672 の28)。
   注意の色(.warning)で出すと、うまくいった操作が失敗のように見える */
.warning.done {
  background: #EAF6EE; border-left-color: var(--ok); color: #1D5B33;
}

/* サーバー異常の帯(L9 の #745・detailed-design.md 3-5-7-2)。
   全画面のヘッダーの下に1行。押すと S17 へ移るので、帯ぜんたいをボタンにする */
.server-alert { margin: 0; }
.server-alert > .btn {
  display: block; width: 100%; text-align: left; border-radius: 0;
  background: #FDECEA; border-color: var(--ng); color: #7A1F1F; font-weight: 700;
}
.server-alert > .btn:hover { background: #FBDDD8; }

/* ---- S13 マスタ一覧(design.md S13・#509) ---- */
.master-list .list-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.master-list .list-header h1 { font-size: 20px; color: var(--navy); margin: 0; }
.master-list .list-header .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.master-list .back { color: var(--navy); text-decoration: none; font-size: 16px; }
.master-list .counts { color: var(--muted); font-size: 16px; }
.master-list .counts .filtered { margin-left: 8px; }
.master-list .filters { gap: 8px; }
.master-list .filters select, .master-list .filters input[type=search], .master-list .filters input[type=number] { width: auto; }
.master-list .pager, .master-list .bulk { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.master-list .pager .current { background: var(--navy); color: #fff; }
.master-list .pager .gap { color: var(--muted); }

/* 一覧の上下は固定し、表の中だけ縦にスクロールする(#554)。
   .content は縦に伸びないので、器の高さを画面に合わせて配る */
.master-list { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.master-list .list-header, .master-list .filters, .master-list .pager, .master-list .bulk,
.master-list .note, .master-list .warning { flex: 0 0 auto; }
.master-list .scrollx { flex: 1 1 auto; min-height: 240px; }
.master-list .scrollx > * { height: 100%; }

/* 列見出し(#555)。並べ替えと列の絞り込みのメニューをここから開く。
   地が濃紺になったので字は白(#854 の #35・ユーザー判断。ほかの一覧とそろえた) */
.master-list .col-head { display: inline-flex; align-items: center; gap: 4px; position: relative; color: #fff; }
/* 見出しのメニューの入口(並べ替え・列の絞り込み)。見て分かる大きさ・形にする(D26・S13-5) */
.master-list .col-head .menu-toggle {
  border: 1px solid #C9D2DA; background: #fff; cursor: pointer; color: var(--navy);
  font-size: 14px; line-height: 1; padding: 2px 5px; border-radius: 5px; margin-left: 4px;
  /* 「…」と「▲」「▼」で幅が変わらないようにする(#602) */
  min-width: 22px; text-align: center;
  /* 記号も選ばせない(#625 の D108) */
  user-select: none; -webkit-user-select: none;
}
.master-list .col-head .menu-toggle:hover { background: #E6F1FB; border-color: #B5D0EA; }
/* その列で絞っているときの印(#625 の D100)。どの列で絞っているかが一覧を見て分かるように。
   地が濃紺になったので、印は白地に濃紺で裏返す(#854 の #35) —
   濃紺の地に濃紺のボタンだと、絞っていることが分からなくなる */
.master-list .col-head .menu-toggle.filtered {
  background: #fff; border-color: #fff; color: var(--navy); font-weight: 700;
}
/* 見出しのメニュー(#555)。見出しのセルは overflow: hidden なので、
   中に置くと 42px の外に出た分が見えない(#625 の D106)。
   祖先の overflow で切られない position: fixed にして、位置は JS がボタンに合わせる */
.master-list .col-menu {
  position: fixed; z-index: 30; display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-width: 180px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

/* 列見出しは隣の列にはみ出さない(D15 ①。狭い列は「…」で切る) */
.master-list .col-head { max-width: 100%; overflow: hidden; }
.master-list .col-head .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ツリーの親の行に色(D33・#581。画面イメージ S13 の色) */
.master-list .tree-parent { background: #EEF4FA; font-weight: 600; }

/* 版の履歴の開閉(#272。既定はたたむ) */
.master-list .tree-toggle { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 13px; padding: 0 4px 0 0; }

/* セルの中身(A-3)。文は詰めて省略し、バッジは縮めない —
   余りを受ける列(名称)でバッジが食い込んで「ダッシュボー」と切れていた。
   セルそのものを横並びにして、文だけが縮むようにする */
.master-list .cell { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; }
/* 文字も選ばせない(#625 の D108)。C1 の指定が上に乗るので、ここでも書く */
.master-list .cell-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  user-select: none; -webkit-user-select: none;
}
.master-list .badge { flex: 0 0 auto; }

/* 設定モード(#292・D20)。変更の帯・入力欄・単位・ロック中の理由・変えた行の色 */
.master-list .setting-band {
  display: flex; align-items: center; gap: 12px; margin: 8px 0;
  padding: 8px 12px; background: #FAEEDA; border: 1px solid #E8C98A; border-radius: 6px; color: #854F0B;
}

/* 編集モードでないときは場所だけ空けておく(D261 の #716)。
   入ったときだけ帯が増えると、1ページの行数が減って一覧が動く */
.master-list .setting-band.reserved { visibility: hidden; }
/* 入力欄 ＋ 単位 ＋ ［既定値に戻す］を1行に並べる。
   FlexGrid の行は高さが決まっているので、下の行に置くと切れて見えなくなる(#677 の33) */
.master-list .setting-edit { display: flex; align-items: center; gap: 6px; }
/* ボタンは縮めない・折り返さない(右で切れていた・#677 の33) */
.master-list .setting-edit > .btn { flex: 0 0 auto; white-space: nowrap; }
/* 値の入力欄は flex の中で縮めない(#671 の15) — select が中身より狭くなり「ON」が「O」に切れていた。
   列の幅は MasterListWindowViewModel.SettingEditWidth が中身(選択肢の最長)で確保している。
   幅は列の計算(NumberInputWidth = 96px)と同じにする(#677 の33) —
   入力欄が計算より広いと、同じ行の［既定値に戻す］が右で切れていた */
.master-list .setting-edit input { width: 96px; min-width: 96px; max-width: 96px; flex: 0 0 auto; }
.master-list .setting-edit select { width: auto; min-width: 0; max-width: 160px; flex: 0 0 auto; }
.master-list .setting-edit .unit { color: var(--muted); }
.master-list .locked { color: var(--muted); }
.master-list .changed { background: #FFF8E6; }

/* 表示名が空の行は、標準の集計名をグレーで出す(#296・D50) */
.master-list .standard-name { color: var(--muted); }

/* 毎年の休業日が0件のときは警告色(#301) */
.master-list .zero { color: var(--warn); }

/* 表の周りに罫線・本文は白(D25 の1・2。見出しの色と画面の地の色が同じに見えていた) */
.master-list .scrollx { background: #fff; border: 1px solid #E3E7EA; border-radius: 8px; }

/* 行のボタンは色で分ける(D25 の5。色は画面イメージ S13)。
   クラス名の op- は shared.css の .btn.off(押せない見た目・opacity .45)とぶつからないため(D52) */
.master-list .operations .btn { border: 1px solid #C9D2DA; background: #EEF1F4; color: var(--navy); }
.master-list .operations .btn.op-edit { background: #E6F1FB; color: #0C447C; border-color: #B5D0EA; }
.master-list .operations .btn.op-off { background: #FAEEDA; color: #854F0B; border-color: #E8C98A; }
.master-list .operations .btn.op-on { background: #E1F5EE; color: #0F6E56; border-color: #A5D8C4; }
.master-list .operations .btn.op-del { background: #FCEAEA; color: #A32D2D; border-color: #E6B7B7; }

/* 操作のボタンは左寄せ(#703 の D197・#710 の 1-8。~~中央寄せ D25 の7~~) —
   中央だと、ボタンが2つの行と3つの行で位置がずれて押しづらい */
.master-list .operations { justify-content: flex-start; width: 100%; }
.master-list .col-head.center { justify-content: center; width: 100%; }

/* 上のボタンも白のままにしない(D25 の6) */
.master-list .btn.excel { background: #E1F5EE; color: #0F6E56; border-color: #A5D8C4; }
.master-list .btn.settings { background: #FAEEDA; color: #854F0B; border-color: #E8C98A; }
.master-list .btn.order { background: #E6F1FB; color: #0C447C; border-color: #B5D0EA; }

/* お知らせの [×](D24) */
/* 帯の高さは文の行数なりにする(D340 の #727) —
   float だと × が流れから外れ、１行の帯に大きな余白ができていた。
   当てるのは [×] の付く帯だけ(.closable・D363 の #733) —
   .warning 全体に当てていたので、<ul class="warning"> の項目が横一列になり、
   <span class="warning"> が箱(block)になっていた */
.warning.closable { display: flex; align-items: flex-start; gap: 8px; }
.warning.closable .text { flex: 1 1 auto; min-width: 0; }
.warning.closable .close {
  flex: 0 0 auto; border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 4px;
}

/* セルの上下の余白は取る(#612 の C-2 ⑥)。行の高さの中にボタン(44px)を収めるため —
   左右の 8px は残す(見出しと中身の左端をそろえる) */
.master-list .flexgrid-cell { padding-top: 0; padding-bottom: 0; }

/* 行の文字は選ばせない(#625 の D108)。
   ダブルクリックで文字が選ばれてしまい、単票が開かない回があった。
   入力する欄(設定モードの値・列の絞り込み)だけは今までどおり選べる */
.master-list .flexgrid-cell { user-select: none; -webkit-user-select: none; }
.master-list .flexgrid-cell input,
.master-list .flexgrid-cell textarea,
.master-list .flexgrid-cell select { user-select: text; -webkit-user-select: text; }

/* セルの中身はセルいっぱいに広げる(#625 の D108) —
   文字の上でも空白の上でもダブルクリックで単票が開くように。見出しは別(col-head) */
.master-list .flexgrid-cell > span:not(.col-head) {
  display: flex; align-items: center; width: 100%; height: 100%; min-width: 0;
}

/* 列の揃え(#612 の C-2 ①)。見出しにも中身にも同じクラスが付く(MasterGridCellFactory) —
   FlexGrid の既定(値の型で決まる揃え)に任せない。見出しだけ右に寄っていた。
   寄せを決めるのは CellAlign の1か所(#685・D177。右寄せは無くした・#686 の1) */
.master-list .flexgrid-cell.align-left { justify-content: flex-start; text-align: left; }
.master-list .flexgrid-cell.align-center { justify-content: center; text-align: center; }

/* 中の span も同じ向きにそろえる(#687 の3。①②③の一覧(.list-area)と同じ) —
   セルだけを中央にしても、中の span が幅いっぱい(display:flex・width:100%)で
   左寄せのままだと中央に見えない。S13 の数値の列がそうだった */
.master-list .flexgrid-cell.align-center > span:not(.col-head),
.master-list .flexgrid-cell.align-center .col-head { justify-content: center; }

/* 見出しの左右の余白は中身と同じに(#612 の C-2 ②)。
   FlexGrid は見出しのセルに padding:0 を直に書くので、中の span 側で合わせる —
   合わせないと見出しだけ 8px 左にずれ、固定列の境目では線に貼りつく */
.master-list .flexgrid-cell .col-head { box-sizing: border-box; padding: 0 8px; width: 100%; }
/* 見出しの言葉も選ばせない(#625 の D108。「この列で絞る」の入力欄だけは選べる) */
.master-list .flexgrid-cell .col-head .label {
  flex: 1 1 auto; min-width: 0; user-select: none; -webkit-user-select: none;
}

/* メニューの「…」は、どの列も見出しの右端に置く(#615 の F2)。
   右揃えの列だけ左端に置いていたので、隣の列の「…」と境目で並び、
   「見出しの無い列がある」ように見えていた */
.master-list .flexgrid-cell .col-head .menu-toggle { position: absolute; right: 0; margin: 0; }

/* 言葉が「…」の下に潜らないよう、右にボタンぶんの余白を取る。
   中央の列は余白を足さない(狭い列で言葉が切れる。幅の見込みがボタンぶんを持っている) */
.master-list .flexgrid-cell.align-left .col-head .label { padding-right: 26px; }

/* 固定した列と流れる列の境目(D17 B)。右端に固定した操作列が手前の列と続けて読めていた */
.master-list .frozen-right { border-left: 2px solid #C7D0D6; }
.master-list .frozen-left { border-right: 2px solid #C7D0D6; }

/* 操作列のボタンが右端で見切れないように(#553) */
.master-list .operations { padding-right: 8px; }
.master-list .operations { display: inline-flex; gap: 4px; }
.master-list .hint { display: block; color: var(--muted); font-size: 15px; }
.badge.readonly { background: var(--band); color: var(--muted); }
.badge.off { background: #ECEFF1; color: var(--muted); }
.badge.warn { background: #FFF4E5; color: var(--warn); }

/* 無効な行は文字をグレーに、仮登録の行は黄色に(design.md S13)。
   背景も薄い灰色にする(#819 の4章・#820 の D719。S16A の .flexgrid-cell.off と同じ色) —
   横に長い一覧では右端の「無効」の列だけでは目に入らない */
.inactive { color: #70818F; }
.master-list .flexgrid-cell.inactive { background: #ECEFF2; }
.master-list .flexgrid-cell .offmark {
  margin-left: 6px; border-radius: 9px; padding: 0 6px; font-size: 11px;
  background: #D7DDE3; color: #46535E; white-space: nowrap; flex: none;
}
.temporary { background: var(--cream); }


/* ---- S12 マスタメンテナンスメニュー(design.md S12・#495) ----
   カードは S12 専用のクラス(.menu-cards / .menu-card)。shared.css の .cards は iPad の行カード用で、
   列を持たないので1列に縦積みになっていた(#515 の D9)。試作(S12_マスタメンテナンスメニュー画面.html)は4列 */
.master-menu h1 { font-size: 20px; color: var(--navy); margin: 0 0 12px; }
.master-menu .segment { display: inline-flex; border: 1px solid #D9DDE1; border-radius: 8px; overflow: hidden; background: #fff; margin-bottom: 12px; }
.master-menu .segment button { min-height: 40px; border: 0; border-right: 1px solid #E3E7EA; border-radius: 0; background: #fff; color: var(--muted); padding: 0 24px; }
.master-menu .segment button:last-child { border-right: 0; }
.master-menu .segment button.active { background: #16324D; color: #fff; font-weight: 600; }
.master-menu .segment-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.master-menu .segment-row .segment { margin-bottom: 0; }
.master-menu .segment-row .hint { color: var(--muted); font-size: 16px; }
.master-menu h2.section { font-size: 16px; color: #106EBE; font-weight: 700; margin: 0 0 8px; }
.master-menu h2.section .subtitle { color: var(--muted); font-weight: 400; font-size: 15px; margin-left: 8px; }
.menu-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 16px; }
@media (max-width: 1100px) { .menu-cards { grid-template-columns: 1fr; } }

/* 更新できる = 左端の青い縦線＋薄い青の地色 / 参照のみ = グレーの縦線＋グレーの地色(design.md S12「更新できるものの色分け」) */
.menu-card {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 8px; min-width: 0;
  border: 1px solid #E3E7EA; border-left: 4px solid #DFE3E7; background: #F5F6F8; border-radius: 8px;
  padding: 10px 12px 10px 10px; text-decoration: none; color: inherit;
}
.menu-card:hover { border-color: #106EBE; }
.menu-card.editable { border-color: #CFE0F2; border-left-color: #1C6CB0; background: #EAF3FC; }
.menu-card.editable:hover { background: #E0EDFA; border-color: #106EBE; border-left-color: #1C6CB0; }
.menu-card .name { flex: 1 1 auto; min-width: 0; font-size: 17px; font-weight: 600; color: #16324D; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-card.editable .name { color: #0C447C; }
.menu-card .badge { order: 1; font-size: 13px; padding: 1px 9px; background: #F1F3F5; color: var(--muted); }
.menu-card .count { order: 2; font-size: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* 説明は2行で切る(呼称設定で伸びてもカードの高さを揃える・#520 ⑤) */
.menu-card .description {
  order: 3; flex-basis: 100%; color: var(--muted); font-size: 16px; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;

  /* 2行になるとき語の途中で切らない(#534。事務所の PC 専用なので Edge・Chrome だけ見ればよい) */
  word-break: auto-phrase;
}
.menu-card .icon { flex: none; color: #8A9099; }
.menu-card.readonly .icon { color: #AEB6BD; }
/* 分類整理で仮登録が溜まっている(#520 ④) */
.menu-card.alert { border-color: #E8C98A; background: #FFFAF0; }
.menu-card.alert:hover { border-color: #D9A53F; }
.menu-card .badge.warn { order: 1; font-size: 13px; padding: 1px 9px; background: #FAEEDA; color: #854F0B; }

/* フッター(#519): 左 = 凡例 / 中央 = 権限の説明1行 / 右 = ［閉じる］ */
.master-menu .menu-footer {
  display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px;
}
.master-menu .menu-footer .permission-note { flex: 1 1 320px; color: var(--muted); font-size: 16px; }

/* 凡例(フッター左に1行)。色だけに頼らずバッジと併用する */
.master-menu .legend { display: inline-flex; gap: 14px; font-size: 16px; color: var(--muted); }
.master-menu .legend > span { display: inline-flex; align-items: center; gap: 5px; }
.master-menu .legend > span::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: #1C6CB0; }
.master-menu .legend > .legend-readonly::before { background: #DFE3E7; }

/* ---- S16A マスタ更新アシスト(一覧＋チャット・design.md S16 の #770・別紙71 の6章) ----
   上半分が一覧(仮の結果)・下の左 2/3 がチャット・右 1/3 が変更のまとめ。
   画面イメージ prototype/S16_マスタ更新アシスト画面.html(1600×1000 の見立て) */
.s16a { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 6px; }
.s16a .toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--band); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
}
.s16a .toolbar .mname { font-size: 18px; font-weight: 700; color: var(--navy); }
.s16a .toolbar .count { font-size: 15px; color: var(--muted); }
.s16a .toolbar input[type=search] { width: 180px; }
.s16a .toolbar .chk { display: flex; align-items: center; gap: 4px; }
.s16a .toolbar .badge.ai { margin-left: auto; background: #E6F1FB; color: #0C447C; font-weight: 700; }
.s16a .back { color: var(--navy); text-decoration: none; font-size: 15px; }

/* 上半分の一覧。残りの高さの 55% まで(下のチャットが潰れないように) */
.s16a .pane { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; min-height: 0; }
.s16a .pane.list { flex: 1 1 55%; display: flex; flex-direction: column; min-height: 0; }
.s16a .pane .ph { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.s16a .pane .ph .t { font-size: 15px; font-weight: 700; color: var(--navy); }
.s16a .pane .ph .s { font-size: 12px; color: var(--muted); }
.s16a .pane .ph .legend { margin-left: auto; display: flex; gap: 6px; }
.s16a .pane .pb { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* 一覧の出し方(別紙93 の D580・D581・#797) —
   枠は動かさない。表を枠いっぱいに広げ、動くのは表の中だけにする(列見出しが残る)。
   枠(.pb)が動いていたので、送ると列見出しが上に消え、一番下の行は枠の端で半分に切れていた(D581)。
   1ページの件数は枠の高さ−横スクロールバーから決める(razor)ので、
   ページ送りのときはその1ページが丸ごと収まり、表の中も動かない(D580) */
.s16a .pane.list > .pb { overflow: hidden; }
/* 同じ名前の行の印(D640 の #809)。名前のうしろに小さく出す */
.s16a .samename { margin-left: 6px; font-size: 12px; color: var(--muted); }
.s16a .pane.list > .pb > .flexgrid { height: 100%; }

/* 下半分: チャット 2/3 ＋ 変更のまとめ 1/3 */
.s16a .lower { flex: 1 1 45%; display: grid; grid-template-columns: 2fr 1fr; gap: 8px; min-height: 0; }
.s16a .pane.chat { display: flex; flex-direction: column; }
.s16a .pane.chat .turns { display: flex; flex-direction: column; gap: 6px; }
.s16a .pane.chat .turn { margin: 0; padding: 6px 10px; border-radius: 10px; font-size: 14px; line-height: 1.6; max-width: 86%; }
.s16a .pane.chat .turn.ai { background: #EAF2FA; color: #16324d; align-self: flex-start; }
.s16a .pane.chat .turn.me { background: var(--card); color: #16324d; align-self: flex-end; }
/* アプリの知らせの吹き出し。クラス名は note(app は画面の器 shared.css の .app に当たる・#777 の J3) */
.s16a .pane.chat .turn.note { background: #FFF8E1; color: #5A4A1A; align-self: flex-start; }
.s16a .pane.chat .turn.waiting { color: var(--muted); }
.s16a .pane.chat .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.s16a .pane.chat .inrow { display: flex; gap: 6px; margin-top: 8px; }
.s16a .pane.chat .inrow input { flex: 1 1 auto; }

/* 変更のまとめ(右 1/3) */
/* 変更のまとめは枠の中で送る(#821 の D744) — 縦に並べないと .pb の flex が効かず、
   中身が枠からはみ出して本文(.content)が 18px 動いていた */
.s16a .pane.side { display: flex; flex-direction: column; min-height: 0; }
.s16a .pane.side .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.s16a .pane.side .tile { background: var(--card); border-radius: 8px; padding: 6px; text-align: center; }
.s16a .pane.side .tile .n { font-size: 20px; font-weight: 700; color: var(--navy); }
.s16a .pane.side .tile .l { font-size: 12px; color: var(--muted); }
.s16a .pane.side .grp { display: flex; gap: 6px; margin-bottom: 8px; }
.s16a .pane.side .grp .btn { flex: 1 1 auto; }
.s16a .pane.side .btn.wide { width: 100%; }
.s16a .pane.side .hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }

/* 一覧の印(画面イメージ②)。追加=緑・変更=黄・並べ替え=青・無効化=灰 */
.s16a .flexgrid-cell .before { display: block; color: var(--muted); text-decoration: line-through; font-size: 11px; }
.s16a .tag { border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.s16a .tag.add { background: #E7F6EC; color: #1B6B3A; }
.s16a .tag.upd { background: #FFF8E1; color: #7A5B00; }
.s16a .tag.ord { background: #E6F1FB; color: #0C447C; }
.s16a .tag.off { background: #EEF1F4; color: #5A6775; }
.s16a .tag.bad { background: #FFF9F8; color: #B3261E; }
/* アプリが仮に入れた値の印(#843 の D805)。追加・変更の色とは別の薄い紫 */
.s16a .tag.est { background: #F3EEFB; color: #5B3FA0; margin-left: 6px; }
/* 行の色(画面イメージ②)。行のクラスはセルに付く(MasterGridCellFactory)。
   #818 の D701(ユーザー:「追加された行がそのままで分かりづらい。色変える」)で濃くした —
   前の色(#F2FBF5 など)は白とほとんど変わらず、どの行を足したのか分からなかった */
.s16a .flexgrid-cell.add { background: #DBF3E3; }
.s16a .flexgrid-cell.upd { background: #FFF3CC; }
.s16a .flexgrid-cell.ord { background: #DCEAFA; }
/* 無効の行は薄い灰色＋薄い字(#819 の4章。変えた行の色が優先されるので、名前の横に「無効」の印も出す) */
.s16a .flexgrid-cell.off { background: #ECEFF2; color: #70818F; }
.s16a .flexgrid-cell .offmark {
  margin-left: 6px; border-radius: 9px; padding: 0 6px; font-size: 11px;
  background: #D7DDE3; color: #46535E;
}
.s16a .flexgrid-cell.bad { background: #FFF9F8; }
/* 保存できない値(#775 の D537)。当てたうえで赤にし、直すまで［確定して保存］を押せない */
.s16a .flexgrid-cell .bad { color: var(--ng); font-weight: 700; }
.s16a .pane.side .bads {
  background: #FFF9F8; border-left: 4px solid var(--ng); border-radius: 4px;
  padding: 6px 8px; margin-bottom: 8px;
}
.s16a .pane.side .bads .bt { font-size: 12px; font-weight: 700; color: var(--ng); }
.s16a .pane.side .bads .bad { margin: 2px 0 0; font-size: 12px; color: #7A2018; line-height: 1.5; }

/* ---- S16 マスタ更新アシスト(design.md S16「アシストモードの画面構成(4分割)」・#487) ----
   左右 55:45、左は上下 45:55(項目の多いマスタで入力欄が潰れないように) */
/* 上の帯(画面イメージのツールバー・#626 の D112)。［マスタ一覧］ボタン・マスタ名・全 n 件・AIアシスト ON */
.master-assist .assist-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  background: var(--band); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
}
.master-assist .assist-head .mname { font-size: 18px; font-weight: 700; color: var(--navy); }
.master-assist .assist-head .count { font-size: 15px; color: var(--muted); }
.master-assist .assist-head .badge.ai { margin-left: auto; background: #E6F1FB; color: #0C447C; font-weight: 700; }
.master-assist .back { color: var(--navy); text-decoration: none; font-size: 15px; }
/* 初期表示を1画面に収める(#681 の14・D175。ユーザー「縦に長すぎる」)。
   .content は残りの高さをもらってその中でスクロールするので、ここはその高さいっぱいに広げる */
.master-assist { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.master-assist .assist-panes {
  display: grid; grid-template-columns: 55fr 45fr; gap: 10px; align-items: stretch;
  flex: 1 1 auto; min-height: 0;
}
/* 左上の一覧は行の数に合わせ、上限(高さの 42%)まで。余った高さは下の単票に回す(#681 の14)。
   行の多いマスタ(分類など)は一覧の中でスクロールする */
.master-assist .pane-left {
  display: grid; grid-template-rows: minmax(0, fit-content(42%)) minmax(0, 1fr); gap: 10px; min-height: 0;
}
.master-assist .pane-right { display: grid; grid-template-rows: 45fr 55fr; gap: 10px; min-height: 0; }
.master-assist .pane {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  overflow: auto; min-height: 0;
}
.master-assist .pane h2 { font-size: 16px; color: var(--navy); margin: 0 0 8px; }

/* 区画の見出し(画面イメージの .ph・#626 の D112)。題 ＋ 副題 ＋ 右に操作 */
.master-assist .pane { padding: 0; display: flex; flex-direction: column; }
.master-assist .pane > .ph {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 11px; border-bottom: 1px solid var(--line);
}
.master-assist .pane > .ph .t { font-size: 15px; font-weight: 700; color: var(--navy); }
.master-assist .pane > .ph .s { font-size: 13px; color: var(--muted); }
.master-assist .pane > .ph > :last-child { margin-left: auto; }
.master-assist .pane > .ph input[type=search] { width: 170px; min-height: 30px; }
.master-assist .pane.ai { border-color: #D3E8F8; background: #F9FCFE; }
.master-assist .pane.ai > .ph { border-bottom-color: #E0EEFA; }
.master-assist .pane.ai > .ph .t { color: #106EBE; }
.master-assist .pane > .pb { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 10px; }
.master-assist .pane.values, .master-assist .pane.chat, .master-assist .pane.list { position: relative; }
.master-assist .pane.values table.grid, .master-assist .pane.chat .turns { margin: 0; }
/* 右上の項目と設定値も列名を固定する(#703 の D202) */
.master-assist .pane.values table.grid th {
  position: sticky; top: 0; z-index: 3; white-space: nowrap; background-clip: padding-box;
}
/* 右上の参照だけの欄を入力欄と釣り合わせる(D507 の #763) —
   既定の .readonly-value は見出しの調子(17px・太字600・紺)なので、
   右上に並ぶ入力欄(20px・普通・#1a1a1a)と見た目が食い違っていた。
   単票(MasterEditDialog)は「見出しと値」の並びなので、そちらは触らない */
.master-assist .pane.values .readonly-value {
  font-size: inherit; font-weight: 400; color: #1a1a1a; padding: 0;
}
/* 登録が済んだらロック(#703 の D206。AI 画面の左右のロック #414 と同じ見せ方) */
.master-assist .pane.values.locked { background: #F2F4F5; }
.master-assist .pane.values .lockline { color: var(--navy); font-size: 14px; margin: 6px 10px 0; }
/* 選んでいる行に色を付ける(#703 の D203) */
.master-assist .list table.grid tbody tr.selected { background: #D5EAEC; }
/* 一覧を FlexGrid に載せ替えたぶん(#711 の別紙35 2-3・D249 の #714) —
   RowClasses はセル(.flexgrid-cell)に付くので、tr ではなくセルに当てる */
.master-assist .list .grid-host .flexgrid-cell.selected { background: #D5EAEC; }
.master-assist .list .grid-host .flexgrid-cell.locked { color: var(--muted); }

/* 左上の一覧(見出しつきの表。列と書式は S13 と同じ定義) */
.master-assist .list table.grid { width: 100%; font-size: 14px; }
/* 列名は固定し、値はその下に隠す(#703 の D201) —
   枠線をまとめる表(border-collapse)では、重ね順を上げて地を枠の内側まで塗らないと、
   スクロールした値が列名の上に透けて出る */
.master-assist .list table.grid th {
  position: sticky; top: 0; z-index: 3; white-space: nowrap; background-clip: padding-box;
}
.master-assist .list table.grid td { white-space: nowrap; }
.master-assist .list table.grid tbody tr { cursor: pointer; }
.master-assist .list table.grid tbody tr:hover { background: #EAF3FC; }
.master-assist .list table.grid tbody tr.locked { cursor: default; color: var(--muted); }
.master-assist .list .empty { color: var(--muted); font-size: 14px; margin: 8px 2px; }

/* 左下のロック中の案内(画面イメージの lockmask) */
.master-assist .form .lockmask {
  position: absolute; inset: 0; background: rgba(246, 248, 250, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--muted); font-size: 15px; text-align: center; padding: 0 20px;
}
.master-assist .form .lockmask b { color: var(--navy); }
.master-assist .pane.form { position: relative; }

/* 下の注記(画面イメージの foot) */
.master-assist .assist-foot { color: var(--muted); font-size: 14px; margin: 8px 2px 0; }
.master-assist .chat .turns { display: flex; flex-direction: column; gap: 6px; }
.master-assist .chat .turn { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 16px; }
.master-assist .chat .turn.user { background: #EAF3FC; align-self: flex-end; }
.master-assist .chat .turn.ai { background: var(--band); align-self: flex-start; }

/* AI の答えを待っている間の印(D445 の #748)。紐付けの一括は20秒ほどかかる */
.master-assist .chat .turn.waiting { color: var(--muted); font-style: italic; }
.master-assist .chat .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.master-assist .chat .turns { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 10px; }
.master-assist .chat .ask { display: flex; gap: 8px; padding: 0 10px; }
.master-assist .chat .ask input { flex: 1 1 auto; }
.master-assist .chat .actions { display: flex; gap: 8px; padding: 8px 10px; }

/* AI の確認は黄色の注記(値は書き換えない・#234)。アプリの否定は赤字(.field-error) */
.master-assist .field-question { color: #6B3F00; background: #FFF4E5; border-radius: 6px; font-size: 15px; margin: 2px 0 0; padding: 4px 8px; }

/* 設定モードで入れられない値があるときの案内(#596 の D62)。帯の中に並べる */
.master-list .setting-band .setting-denied { color: var(--ng); font-weight: 600; }

/* ---- S02 トップ(design.md S02・#374・#591) ---------------------------- */

/* 表示モード・カレンダーの単位の切替。shared.css の .seg(1100px 未満だけ出る)とは別物 */
.modeseg { display: inline-flex; gap: 2px; background: var(--card); border-radius: 18px; padding: 3px; margin-left: auto; }
.modeseg button {
  min-height: 34px; min-width: 84px; padding: 0 14px; border: 0; border-radius: 15px;
  background: transparent; color: var(--muted); font-size: 15px; white-space: nowrap;
}
.modeseg button.on { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.s02 table.grid td small { display: block; color: var(--muted); font-size: 13px; }
/* HTML の表の値の寄せ(#685・D177)。決めるのは CellAlign の1か所で、
   画面は align-left / align-center のクラスを付ける。
   見出しも値と同じ寄せ(ユーザー判断 10-05・#687 の4) —
   shared.css の table.grid th(左)より後に読むので、こちらが勝つ */
table td.align-left, table th.align-left { text-align: left; }
table td.align-center, table th.align-center { text-align: center; }
.s02 table.grid td.empty { color: var(--muted); text-align: center; }
/* 色は shared.css の .badge.mth(#845 の D812)。ここは一覧の字の大きさだけ */
.s02 .badge.mth, .s02 .badge.ai { font-size: 13px; }

/* 送り(ガント・カレンダーの前後) */
.s02 .rng { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.s02 .rng b { font-size: 16px; color: var(--navy); }

/* ガント(表示だけの自作・#374)。帯は期間の長さのまま、文字は帯の横(#409) */
.gt { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
/* iPad(1100px 未満)は行見出しを詰めて、6か月ぶんの時間軸を広く取る(#845 の D814) —
   月の幅は時間軸の % なので、横スクロールは出ない(#374) */
@media (max-width: 1100px) {
  .gt .hd, .gt .rw { grid-template-columns: 160px 1fr; }
}
/* 左の項目名の列(#870 の D871・ユーザーの操作確認「メンテ項目側をもう少し広げられないか」)。
   月の列の幅は 1fr のまま(横スクロールは出さない) */
.gt .hd, .gt .rw { display: grid; grid-template-columns: 300px 1fr; border-bottom: 1px solid var(--line); }
.gt .hd { background: var(--navy); color: #fff; font-size: 13px; }
.gt .hd .lab { padding: 6px 8px; }
.gt .hd .mths { position: relative; height: 30px; }
.gt .hd .m { position: absolute; top: 0; bottom: 0; padding: 6px 4px; border-left: 1px solid rgba(255,255,255,.35); }
.gt .rw .lab { padding: 6px 8px; border-right: 1px solid var(--line); }
.gt .rw .lab small { color: var(--muted); font-size: 13px; }
.gt .rw .tl { position: relative; height: 48px; overflow: hidden; }
.gt .rw .tl .ml { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--line); }
.gt .bar {
  position: absolute; top: 6px; height: 36px; border: 0; padding: 0; background: transparent;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; text-align: left;
}
.gt .bar .fill { display: block; height: 18px; border-radius: 9px; flex: none; }
.gt .bar .txt { color: #1a1a1a; font-weight: 600; }
.gt .bar .txt small { font-weight: 600; margin-left: 4px; }
.gt .over .fill { background: #E8958D; }
.gt .active .fill { background: #F2C265; }
.gt .before .fill { background: #8CCB98; }
.gt .bar.over small { color: var(--ng); }
.gt .bar.active small { color: var(--warn); }
.gt .bar.before small { color: var(--ok); }
.gt .none { position: absolute; top: 15px; left: 8px; font-size: 13px; color: var(--muted); }
.s02 .lg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
/* カレンダーの［日］と本日のポップアップの表(#870 の D872・ユーザーの操作確認)。
   実施予定期間が3行に割れていたので、この列を少し広げて2行に収める(1列目は余りを受ける) */
.s02 .cal-day > .grid th:nth-child(2), .s02 .cal-day > .grid td:nth-child(2),
.s02 .overlay .grid th:nth-child(2), .s02 .overlay .grid td:nth-child(2) { width: 104px; }
.s02 .cal-day { overflow-y: auto; }

.s02 .lg i { display: inline-block; width: 22px; height: 10px; border-radius: 5px; vertical-align: middle; margin-right: 4px; }
.s02 .lg .over { background: #E8958D; }
.s02 .lg .active { background: #F2C265; }
.s02 .lg .before { background: #8CCB98; }

/* カレンダー(表示だけの自作・#374・#591) */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.cal .dw { background: var(--navy); color: #fff; font-size: 13px; text-align: center; padding: 6px 0; }
.cal .d { min-height: 118px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px; background: #fff; font-size: 13px; }
.cal .d.past { background: #F7F9FA; color: #B8C2C7; }
.cal .d.today { background: #E8F4F5; }
.cal .d.has { cursor: pointer; }
.cal .d .n { font-weight: 600; margin-bottom: 3px; }
/* カレンダーの今日のマスの「(本日)」(#800 の D610)。日の数の右に小さく添える —
   色(.today の地)だけだと、月をまたいで見たときにどれが今日か分からない */
.cal .d .n .today { color: var(--navy); font-size: 11px; font-weight: 700; margin-left: 2px; }
.cal .d .it { display: block; background: #E6F4EA; color: #1f5f2a; border-radius: 6px; padding: 2px 5px; margin-bottom: 3px; }
.cal .d .it b, .cal .d .it small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cal .d .it small { color: var(--muted); font-weight: 400; font-size: 12px; }
.cal .d .rest { color: var(--navy); font-weight: 600; }
.cal.week .d { min-height: 260px; }
.cal.week .d .it b, .cal.week .d .it small { white-space: normal; }

/* 操作メニュー(3表示モード共通) */
.opmenu .dialog { width: min(420px, 100%); }
/* ガントの帯を押したときだけ、その帯の真上に出す
   (design.md S02「クリックした帯の真上に操作メニューを表示する」・別紙55 3章。
   一覧とカレンダーのポップアップは今までどおり画面の真ん中)。
   画面の端では左右に寄せ、上に入りきらないときは中でスクロールする */
.overlay.opmenu.anchored { display: block; }
.overlay.opmenu.anchored .dialog {
  position: absolute; top: auto;
  left: clamp(16px, calc(var(--mx) - 210px), calc(100vw - 436px));
  bottom: calc(100vh - var(--my) + 12px);
  max-height: max(220px, calc(var(--my) - 28px));
}
.opmenu .body .btn { display: block; width: 100%; margin-bottom: 8px; text-align: left; }

/* ---- S05 調整履歴(design.md S05・#416) -------------------------------- */
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.page-head h1 { font-size: 22px; color: var(--navy); margin: 0; }
.page-head .target { color: var(--muted); }
.page-foot { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.summary { display: flex; gap: 18px; flex-wrap: wrap; background: var(--card); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.summary b { color: var(--navy); }
.pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; }

/* ---- 単票の欄(#600 の D78・#601 の C) -------------------------------- */
/* チェック1つの欄は「チェック ＋ 右に言葉」。ラベルが上でチェックだけだと真ん中に浮く */
.master-edit .form-row label.check { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); }
.master-edit .form-row label.check input { width: 20px; height: 20px; }

/* 欄の下の案内文。橙は「入れないと何が起きるか」 */
.master-edit .form-row .note { margin: 4px 0 0; font-size: 14px; padding: 6px 10px; }
.master-edit .form-row .note.warn { background: #FFF4E0; border-left-color: var(--warn); color: #6B4A0B; }

/* 単位は欄の右に(#601 の C-5)。欄名からは外す */
.master-edit .form-row .unit { margin-left: 8px; color: var(--muted); }

/* 単票の上のバッジ(集計メニューの区分・#601 の C-4) */
.master-edit .edit-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }

/* 押せない欄は灰色で見せる(D332 の #725・全マスタの単票で共通の1か所)。
   メール再通知が空で押せないのに白く、「入れたのに消えた」に見えていた —
   参照のみの欄(.readonly-value)と同じ調子にそろえる */
.master-edit .form-row select:disabled,
.master-edit .form-row input:disabled,
.master-edit .form-row textarea:disabled,
.master-assist .form-row select:disabled,
.master-assist .form-row input:disabled,
.master-assist .form-row textarea:disabled {
  background: var(--card); color: var(--muted); border-color: var(--line); cursor: not-allowed;
}

/* チェックも同じ(ラベルごと薄くする) */
.master-edit .form-row .check input:disabled + span,
.master-assist .form-row .check input:disabled + span { color: var(--muted); }

/* いまの担当割当(参照表示・#601 の C-1) */
.master-edit .form-row .readonly-value .badge { margin-left: 8px; }
.master-edit .form-row .readonly-value .note { display: inline-block; margin-left: 8px; padding: 2px 8px; }

/* ---- S20 点検記録一覧(design.md S20・#269・#446・#585) ----------------- */
/* iPad でもカードにせず表のまま横スクロールし、項目名と単位の2列を固定する(0章)。
   列が実施日で増減する画面なので、カードにすると値の推移が読めなくなる */
.s20 .matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.s20 table.matrix { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.s20 .matrix th, .s20 .matrix td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 8px; background: #fff; white-space: nowrap; }

/* 日付の列は同じ幅にそろえる(92〜160px・design.md S20)。値を横に読んで比べる画面なので、
   幅が揃っていないと目が滑る */
.s20 .matrix th, .s20 .matrix td { min-width: 92px; max-width: 160px; }
.s20 .matrix thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; position: sticky; top: 0; z-index: 1; }
.s20 .matrix .fix1 { position: sticky; left: 0; z-index: 2; width: 180px; min-width: 180px; max-width: 180px; white-space: normal; }
.s20 .matrix .fix2 { position: sticky; left: 180px; z-index: 2; width: 110px; min-width: 110px; max-width: 110px; box-shadow: 2px 0 0 var(--line); white-space: normal; }
.s20 .matrix thead .fix1, .s20 .matrix thead .fix2 { z-index: 3; }
.s20 .matrix td.unit { font-size: 13px; color: var(--muted); }
.s20 .matrix tr.meta td { background: #F5F8F9; font-size: 13px; }
.s20 .matrix tr.group td { background: var(--band); font-weight: 700; color: var(--navy); font-size: 13px; }

/* 範囲外は黄(警告)。必須未入力・結果「否」の赤とは分ける(#585・ユーザー判断) */
.s20 .matrix td.out-of-range { background: #FFF4D6; color: #8A5A00; font-weight: 700; }
.s20 .matrix td.undefined { background: #F2F4F5; color: var(--muted); font-size: 13px; }
.s20 .matrix td.old, .s20 .matrix th.old { background: #FAF7EF; }
.s20 .matrix thead th.old { background: #6E7B86; }

/* 一覧を FlexGrid に載せ替えたぶん(#714 の 2-10)。
   RowClasses・CellClasses・ColumnClasses はどれもセル(.flexgrid-cell)に付くので、
   tr / td ではなくセルに当てる */
.s20 .matrix-wrap.grid-host { height: 420px; max-width: 100%; }
.s20 .grid-host .flexgrid-cell { font-size: 14px; }
.s20 .grid-host .flexgrid-cell.meta { background: #F5F8F9; font-size: 13px; }
.s20 .grid-host .flexgrid-cell.group { background: var(--band); font-weight: 700; color: var(--navy); font-size: 13px; }
.s20 .grid-host .flexgrid-cell.out-of-range { background: #FFF4D6; color: #8A5A00; font-weight: 700; }
.s20 .grid-host .flexgrid-cell.undefined { background: #F2F4F5; color: var(--muted); font-size: 13px; }
.s20 .grid-host .flexgrid-cell.old { background: #FAF7EF; }

/* 範囲外の黄・定義なしの灰は、過去の版の淡い色より優先(D292 の #718)。
   列の色(old)とセルの色(out-of-range)はどちらもセルに付き、クラス2つで並ぶので、
   あとに書いたほうが勝っていた(v1 の 13.20 が太字だけになっていた)。
   重ね順にまかせず、重なった形で決める */
.s20 .matrix td.old.out-of-range,
.s20 .grid-host .flexgrid-cell.old.out-of-range { background: #FFF4D6; color: #8A5A00; font-weight: 700; }
.s20 .matrix td.old.undefined,
.s20 .grid-host .flexgrid-cell.old.undefined { background: #F2F4F5; color: var(--muted); }
/* 単位・型は2段(単位と上下限)。セルの高さは固定なので小さい字で収める */
.s20 .grid-host .cell-two { display: flex; flex-direction: column; justify-content: center;
  gap: 1px; line-height: 1.25; width: 100%; }
.s20 .grid-host .cell-two small { color: var(--muted); font-size: 12px; }
.s20 .grid-host .flexgrid-cell.unit,
.s20 .grid-host .cell-two.unit { font-size: 13px; color: var(--muted); }

.s20 .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 8px; }
.s20 .legend .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--line); vertical-align: -2px; margin-right: 4px; }
.s20 .legend .sw.out-of-range { background: #FFF4D6; }
.s20 .legend .sw.undefined { background: #F2F4F5; }
.s20 .legend .sw.old { background: #FAF7EF; }
.s20 .toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.s20 .toolbar select { width: auto; }
.s20 .checkline { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); }
.s20 .checkline input { width: 20px; height: 20px; }

/* ---- S18 点検記録項目入力(design.md S18・#370・#413・#446・#585) ------- */
/* iPad は1項目1カード。1ページ10項目・上限50項目 */
/* S18 は「ページに見えるモーダル」(全画面のモーダル)
   — detailed-design.md 3章の前書き「S18 をページにすると呼び出し元の S04 が消えるので、
   ページに見えるモーダルにする」。幅の決めが無く、ふつうのダイアログ(560px)のままだった
   (別紙49 4章で画面イメージと並べて気づいた) */
.dialog:has(> .dialog-body.s18) { max-width: none; width: calc(100vw - 32px); }

.s18 .s18-summary { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: #fff; border-bottom: 1px solid var(--line); padding: 8px 0; margin-bottom: 10px; }
.s18 .s18-summary .total { font-size: 14px; color: var(--navy); }
.s18 .s18-summary .total b { font-size: 17px; }
.s18 .s18-summary .set { flex-basis: 100%; font-size: 12px; color: var(--muted); margin: 0; }
.s18 .s18-summary .checkline { margin-left: auto; min-height: var(--tap); display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 22px; font-size: 14px; color: var(--navy); }
.s18 .s18-summary .checkline.on { background: #E6F3F4; border-color: var(--teal); font-weight: 600; }
.s18 .note.past { background: #EEF4FA; border-left-color: #106ebe; }
.s18 .range { font-size: 13px; color: var(--muted); margin: 2px 2px 8px; }
.s18 .grp-title { font-size: 13px; font-weight: 700; color: var(--teal); margin: 14px 2px 6px; }
.s18 .grp-title .cont { font-weight: 400; color: var(--muted); margin-left: 4px; }

.s18 .item { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 8px; }
/* 必須未入力・形式は赤、範囲外は黄(#585・ユーザー判断) */
.s18 .item.miss { border-left-color: var(--ng); background: #FFFAFA; }
.s18 .item.over { border-left-color: var(--warn); background: #FFFDF6; }
.s18 .item .top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.s18 .item .nm { font-weight: 600; color: var(--navy); font-size: 14px; }
.s18 .item .nm .req { color: var(--ng); margin-left: 3px; }
.s18 .item .def { font-size: 12px; color: var(--muted); }
/* 前回の列は［前回値を入れる］のぶんを足して 190px(#815 の D677) */
.s18 .item .io { display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: center; margin-top: 6px; }
.s18 .item .io > .now:only-child { grid-column: 1 / -1; }
.s18 .prev { font-size: 14px; color: #3d4a50; background: var(--card); border-radius: 6px; padding: 4px 10px;
  min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; }
.s18 .prev .lb { font-size: 11px; color: var(--muted); }
.s18 .prev .none { color: #8a979d; }
/* 項目ごとの［前回値を入れる］(#815 の D677)。前回の値の下に小さく置く */
/* ［前回値を使う］も指で押す(タップ領域は最小44px・design.md 0章。#821 の D744 で 32px を直した) */
.s18 .prev .btn { font-size: 13px; padding: 0 8px; min-height: 44px; margin-top: 4px; align-self: flex-start; }
.s18 .unit-row { display: flex; gap: 8px; align-items: center; }
.s18 .unit-row .unit { min-width: 56px; color: var(--muted); font-size: 13px; }
.s18 input.caution, .s18 select.caution, .s18 textarea.caution { border-color: var(--warn); background: #FFFBF2; }
/* 必須の空欄は赤枠(design.md S18「赤枠+「必須項目です」」・#585 の「範囲外=黄 / 必須未入力=赤」。
   別紙55 3章: 文は出ているのに枠の色が付いていなかった) */
.s18 input.error, .s18 select.error, .s18 textarea.error { border-color: var(--ng); background: #FFF9F8; }
.s18 .msg { font-size: 12px; margin-top: 6px; font-weight: 600; }
.s18 .msg.err { color: var(--ng); }
.s18 .msg.warn { color: var(--warn); }
.s18 .empty { text-align: center; color: var(--muted); padding: 30px 0; font-size: 14px; }
.s18 .save-note { font-size: 12px; color: var(--muted); margin: 10px 2px 0; }
.s18 .pager button { min-width: var(--tap); position: relative; }
.s18 .pager button.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
/* 未入力・範囲外を含むページに赤い点(#370。50項目でも問題のあるページを探して回れる) */
.s18 .pager button.has-issue::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--ng); }
@media (max-width: 560px) { .s18 .item .io { grid-template-columns: 1fr; } }

/* ---- Api に届かないときの帯(1-6-0・#620・D102) --------------------------- */
/* 画面は開いたまま。帯だけを上に出し、入力中の内容は消さない */
.offline-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #FFF4D6; border-bottom: 1px solid var(--warn); color: #6B4A0B;
  padding: 8px 14px; font-size: 14px; font-weight: 600; }
.offline-bar .btn { min-height: 36px; background: #fff; }

/* ---- 自動ログアウトの予告の帯(#806 の3・別紙102 の2章) ------------------ */
/* サーバー異常の帯とは別の行に積む。押すと延びるので、ボタンは帯の中に置く */
.idle-warn { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #FFF4D6; border-bottom: 1px solid var(--warn); color: #6B4A0B;
  padding: 8px 14px; font-size: 14px; font-weight: 700; }
.idle-warn .btn { min-height: 36px; background: #fff; }

/* 登録・編集のあと、その行を選んだ状態で見せる(#621 の2) */
.master-list .flexgrid-cell.selected { background: #E6F3F4; box-shadow: inset 0 -2px 0 var(--teal); }

/* ---- S15 権限マトリクス設定(design.md S15・#604・#632) --------------------- */
.permission-matrix .list-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.permission-matrix .list-header h1 { font-size: 20px; color: var(--navy); margin: 0; }
.permission-matrix .list-header .back { color: var(--navy); text-decoration: none; font-size: 16px; }
.permission-matrix .list-header .actions { margin-left: auto; display: flex; gap: 8px; }
/* ①②のタブ(S12 のセグメントと同じ見た目) */
.permission-matrix .segment { display: inline-flex; border: 1px solid #D9DDE1; border-radius: 8px;
  overflow: hidden; background: #fff; margin: 4px 0 10px; }
.permission-matrix .segment button { min-height: 40px; border: 0; border-right: 1px solid #E3E7EA;
  border-radius: 0; background: #fff; color: var(--muted); padding: 0 24px; }
.permission-matrix .segment button:last-child { border-right: 0; }
.permission-matrix .segment button.active { background: #16324D; color: #fff; font-weight: 600; }
.permission-matrix .set-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  background: #EEF3F7; border-left: 4px solid var(--navy); padding: 7px 12px; font-weight: 700; color: var(--navy); }
.permission-matrix .set-bar .hint { font-weight: 400; color: var(--muted); font-size: 13px; }
/* 変更の帯(#604 ⑤)。保存していない変更があることを、色と件数の両方で出す */
.permission-matrix .change-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  background: #E6F1FB; border-left: 4px solid #0C447C; padding: 7px 12px; color: #0C447C; }
.permission-matrix .change-bar .btn { margin-left: auto; background: #fff; }
/* 0人になる変更は赤い帯で止める(保存を押させない) */
.permission-matrix .stop-bar { margin: 0 0 10px; background: #FDECEC; border-left: 4px solid var(--ng);
  padding: 8px 12px; color: #8C1D18; font-weight: 600; }
/* admin しか持っていない列は橙の帯(止めない・#604 ②) */
.permission-matrix .warn-bar { margin: 0 0 10px; background: #FFF4E5; border-left: 4px solid var(--warn);
  padding: 8px 12px; color: #6B4A0B; }
.permission-matrix .grid-wrap { overflow: auto; border: 1px solid #C9D2DA; border-radius: 6px; background: #fff; }
.permission-matrix table.matrix { border-collapse: collapse; width: 100%; font-size: 14px; }
/* 値の寄せはマスごとのクラスで当てる(#685・CellAlign)。見出しも値と同じ寄せ(#687 の4) */
.permission-matrix table.matrix th, .permission-matrix table.matrix td {
  border: 1px solid #E0E6EB; padding: 7px 10px; vertical-align: middle; }
.permission-matrix table.matrix thead th { background: #F2F5F8; color: var(--navy); font-weight: 700; }
.permission-matrix table.matrix th .sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
/* ロール名の列は固定(detailed-design.md 3-4-4。縦スクロールだけにする) */
.permission-matrix table.matrix .role { position: sticky; left: 0; background: #fff;
  min-width: 170px; z-index: 1; }
.permission-matrix table.matrix thead .role, .permission-matrix table.matrix tfoot .role { background: #F2F5F8; }
.permission-matrix table.matrix .members { width: 86px; }
/* スーパー権限の行は灰色・押せない(5-0。行の値ではなく見せ方・9-17) */
.permission-matrix table.matrix tr.super td { background: #F4F6F8; color: var(--muted); }
.permission-matrix table.matrix tr.super .role { background: #F4F6F8; }
/* 変えたマスに色(#604 ⑤) */
.permission-matrix table.matrix td.hit { background: #FFF8E1; box-shadow: inset 0 0 0 2px #E8C98A; }
/* 見出しの上段(D344 の #729)。下段とつながって読めるように中央で分ける */
.permission-matrix table.matrix thead tr.group-head th { background: #E6ECF2; text-align: center;
  border-bottom: 0; }
.permission-matrix table.matrix thead tr.group-head th.role,
.permission-matrix table.matrix thead tr.group-head th.members { background: #F2F5F8; text-align: left;
  vertical-align: bottom; }
/* ④マスタメンテナンスが無い行の②は灰色で押せない(D345 の #729) */
.permission-matrix table.matrix td.off { background: #F4F6F8; }
.permission-matrix table.matrix td.off input[type="checkbox"] { opacity: .45; cursor: not-allowed; }
/* 「配下の画面 n 件」の横の ⓘ(D343 の #729。単票 S16 と同じ部品)。
   ⓘ だけが次の行に落ちないように、この1行は折り返さない(D348 の #730) */
.permission-matrix table.matrix th .sub { white-space: nowrap; }
.permission-matrix table.matrix th .sub .field-info { margin-left: 4px; }
.permission-matrix table.matrix tfoot td { background: #F2F5F8; font-weight: 700; color: var(--navy); }
/* 0人にできない列が残り1人になったら警告色(design.md S15「1人になったら警告色」・#650 の D151) */
.permission-matrix table.matrix tfoot td.count.warn { background: #FFF4E5; color: #6B4A0B; }
.permission-matrix .badge.mute { background: #EDF1F4; color: var(--muted); border: 1px solid #D7DEE4;
  border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.permission-matrix .badge.warn { background: #FFF4E5; color: #6B4A0B; border: 1px solid var(--warn);
  border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 600; margin-left: 6px; }
.permission-matrix .notes { margin: 10px 2px 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.permission-matrix .empty { text-align: center; color: var(--muted); padding: 30px 0; }

/* S21-12「この端末の通知設定」の時刻チップ(#651 の小)。
   .att の × は S04 の添付カード(縦に高い)向けの絶対配置なので、
   1行のチップでは上に飛び出して縦に伸びて見える。チップの高さにそろえる */
.s21-settings .chips .att { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; }
.s21-settings .chips .att .x { position: static; padding: 0 2px; font-size: 16px; line-height: 1; }

/* ---- S02 の絞り込みは2行まで(①段1前半の突き合わせ 6) ----------------------- */
/* shared.css の入力は width:100% なので、iPad 縦だと1つずつ全幅で積み上がる */
.s02 .toolbar { gap: 8px 10px; }
/* 絞り込みの欄の幅は固定(#845 の D824) — 選んだ名前の長さで欄が伸び縮みし、
   隣の「機器」の欄が上下に動いていた。入らない名前は欄の中で「…」(全文は title) */
.s02 .toolbar select {
  width: 200px; min-width: 200px; max-width: 200px; flex: 0 0 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s02 .toolbar input[type=search] { width: auto; flex: 1 1 200px; min-width: 160px; }
.s02 .toolbar .modeseg { margin-left: auto; flex: 0 0 auto; }
.s02 .gt .empty { text-align: center; color: var(--muted); padding: 24px 0; }
/* ガントは枠の中でスクロールする(#870 の D871) — 高さの上限は画面が窓の高さから入れる。
   これでページ送りの帯が画面の下からはみ出さない */
.s02 .gt { overflow-y: auto; }
/* 月の見出しの行は、スクロールしても上に残す */
.s02 .gt .hd { position: sticky; top: 0; z-index: 1; background: #fff; }

/* カレンダーのマスに出す件数(#845 の D816・ユーザー判断)。
   本日は「対象 n件」(押すと処理もできる)・明日以降は「対象候補 n件」(見るだけ)。
   色は決め打ちで書く(無い変数を書くと親の色を継いで字が消える) */
.s02 .cal .d > .cnt {
  display: inline-block; margin: 2px 0 0; padding: 1px 8px; border-radius: 10px;
  background: #ECEFF2; color: #51636F; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.s02 .cal .d > .cnt.now { background: #FFF4E0; color: #8A5A00; }

/* ---- S19 実施記録履歴(design.md S19・#447) --------------------------------- */
/* 見出しの行のボタンは1つの群にして右端に寄せる(#882 の D1003)。
   画面ごとに書かず .page-head の決まりにする(S05 も同じ並びにそろえた) */
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.s19 .summary { display: flex; gap: 18px; flex-wrap: wrap; background: #F2F5F8; border-radius: 6px;
  padding: 8px 12px; margin-bottom: 8px; color: var(--navy); }
/* サマリーは2つの群(実施・直近・平均 / 否・範囲外)。PC は横に並んで1行に見える */
.s19 .summary .line { display: flex; gap: 18px; flex-wrap: wrap; }
.s19 .toolbar { gap: 8px 10px; }
.s19 .toolbar select, .s19 .toolbar input[type=date] { width: auto; min-width: 140px; flex: 0 1 auto; }
/* 古い実績の削除(S19-4) */
.s19 .delete-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
  background: #FDECEC; border-left: 4px solid var(--ng); padding: 8px 12px; color: #8C1D18; }
.s19 .delete-bar input[type=number] { width: 86px; }
.s19 .delete-bar .btn.danger { background: var(--ng); border-color: var(--ng); color: #fff; }
/* スクロールのときも10行で止める(#882 の D1000・ユーザーの操作確認
   「スクロールは画面からはみ出している。スクロールもページ送りも10行で固定して、
    その単位で送れるようにしたい。」)。
   行の高さ 44px × 10行 ＋ 見出しの行(44px) = 484px。詳細行を開いても枠は伸びない(中でスクロール)。
   行の境目に止める(scroll-snap)。60vh だと窓の高さによって画面からはみ出していた */
.s19 .scrolly { max-height: calc(44px * 11); overflow-y: auto; scroll-snap-type: y proximity; }
.s19 .scrolly .flexgrid-cell { scroll-snap-align: start; }

/* 点検記録のセル(件数と範囲外)。PC は1行、iPad(1100px 以下)は2段にする(L3・#745) —
   縦も真ん中に寄せる(#874 の D880)。セルの中身は高さ 100%(.flexgrid-cell > span)なので、
   寄せを書かないと1段しかない行(ほとんど)で字が上端に張り付く。同じ型は S20・S02 にもある —
   1行だと列(150px)に入らず「4 件(範囲外 …」で切れる。行の高さ(44px)に2段が収まるよう詰める */
/* 操作列は［修正］と、最新の行だけの［取消］が並ぶ(#882 の D1002)。
   820px の器に収めるため、ここだけ小さいボタンにする(列は 110px) */
.s19 .operations { display: inline-flex; gap: 4px; padding-right: 8px; }
.s19 .operations .btn { padding: 0 8px; font-size: 14px; }

/* ［取消］は削除と同じ薄い赤(design.md 5777 の「取消＝薄い灰」はダイアログの
   「やめる」の意味で、こちらは記録を無かったことにする操作) */
.s19 .operations .btn.op-cancel { background: #FCEAEA; color: #A32D2D; border-color: #E6B7B7; }

.s19 .item-cell { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.s19 .item-cell .out { color: var(--warn); }
@media (max-width: 1100px) {
  .s19 .item-cell { flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0; line-height: 1.2; font-size: 14px; }
}

/* ---- 対象の帯(S05・S19・S20。①段1前半の突き合わせ 9・15) -------------------- */
.scope-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px;
  background: #EEF3F7; border-left: 4px solid var(--navy); padding: 7px 12px; color: var(--navy); }

/* ---- S05 調整履歴の直し(突き合わせ 10〜14) --------------------------------- */
.s05 .toolbar { gap: 8px 10px; }
.s05 .toolbar select, .s05 .toolbar input[type=date] { width: auto; min-width: 140px; flex: 0 1 auto; }
/* PC では絞り込みとボタンを1行に収める(#780 の D561) —
   折り返して［すべて閉じる］だけが2段目に落ちていた。
   折り返しをやめると、幅が足りないときは選ぶ欄のほうが縮む(最小 120px) */
@media (min-width: 1101px) {
  .s05 .toolbar { flex-wrap: nowrap; }
  .s05 .toolbar select, .s05 .toolbar input[type=date] { min-width: 120px; }
  .s05 .toolbar .btn { flex: 0 0 auto; }
}

/* ---- S20 点検記録一覧の直し(突き合わせ 15・16) ----------------------------- */
.s20 .page-head h1 { margin-right: 8px; }
.s05 .scrolly { max-height: 60vh; overflow-y: auto; }

/* ---- S04 メンテナンス実施記録(段1 後半 1章・画面イメージ #592) ---------------
   器・入力欄・チップ・セグメントは shared.css が持っている(試作の写しなので触らない)。
   ここに足すのは S04 だけの見た目 — 帯の2行目・下書き・完了・異常の兆候・注記 */
.s04 .scope-bar { display: block; }
.s04 .scope-bar .sub { display: block; margin-top: 3px; font-size: 15px; color: #35576F; }
.s04 .panel > h3 { font-size: 17px; margin: 0 0 8px; color: var(--navy); }
.s04 .hint { font-size: 15px; color: var(--muted); line-height: 1.7; }
.s04 .hint.warn { color: var(--warn); font-weight: 600; }
.s04 .hint.muted { color: #90A4AE; }

/* ②作業区分の注記(「計画」「名前から」。#587) */
.s04 .chips .src { color: var(--muted); font-size: 11px; margin-left: 2px; }

/* AI が関わる番号は青く(#411。PC 版と同じ) */
.s04 .ainum { color: #106ebe; }

/* ⑪下書きの復元・⑫登録後(金・緑の枠で、入力より先に目に入る) */
.s04 .panel.draft { border: 2px solid var(--gold); }
.s04 .panel.done { border: 2px solid var(--ok); }
.s04 .note.edit { border-left-color: #106ebe; color: #1B3A57; margin-bottom: 10px; }

/* 異常の兆候(#261・#409。ロックの外に置くので、淡色にしない) */
.s04 .panel.anom { border-color: #C62828; background: #FFF9F8; }
.s04 .panel.anom > h3 { color: #C62828; }

/* AI 側: 作業区分の追加提案はチップの下に根拠(#471)・材料の帯 */
.s04 .chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.s04 .ai.material { background: #F9FCFE; border-left: 4px solid #106ebe; padding: 7px 12px;
  font-size: 15px; color: #1B3A57; margin: 0 0 8px; }
.s04 .ai.material.warn { background: #FFFDF5; border-left-color: var(--gold); color: #6B5614; }

/* ［AIアシストを受ける］は欄のかたまりの外(アシスト中は出さない) */
.s04 .row.ai-call { margin: 0 0 8px; align-items: center; }

/* 添付のサムネイル(画像は実物・それ以外は種類の文字) */
.s04 .att img.thumb { object-fit: cover; }
.s04 .att .thumb { display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: #37474F; background: #ECEFF1; }

/* 口が断った理由(モーダルは ErrorBoundary の外・#617 の D92) */
.s04 .message { background: #FFF9F8; border-left: 4px solid var(--ng); padding: 9px 13px;
  color: #8E1B1B; margin: 0 0 8px; border-radius: 0 8px 8px 0; }
/* ［登録する］を押せない理由の1行(#879 の D892・ユーザーの再確認「文字色を変えたい」)。
   ここが「なぜ登録できないか」を言う唯一の場所なので、字をはっきり赤くする */
.s04 .message.blocked { color: var(--ng); font-weight: 700; }
/* 帯は1行目にタグを少し離して置く(実物で詰まって読めなかった) */
.s04 .scope-bar > span > .badge { margin-left: 6px; }
.s04 .scope-bar .sub > span { margin-right: 4px; }
.s04 .scope-bar .sub > .badge { margin-left: 2px; }
.s04 [data-testid=s04-item-summary] .badge { margin-left: 6px; }

/* S04 は左右2カラムの大きなモーダル(design.md S04「AIアシストON = 1520×920 / OFF = 幅を狭める」)。
   器そのものにクラスを足さずに済むよう、中の本文から広げる */
.dialog:has(> .dialog-body.s04) { max-width: 1520px; }
.dialog:has(.assist.ai-off) { max-width: 900px; }

/* 1行に2つ並ぶ欄(実施日と実施者・結果と作業時間)。試作と同じ幅の決め方。
   最小幅は 240px(#815 の D670・ユーザーの操作確認「実施日と実施者が重なっている」) —
   180px だと iPad(768〜834)の1カラムの中で2つ並んだままになり、
   日付の欄は中身(年月日＋カレンダーの印)より細くならないので、右の実施者に食い込んでいた。
   240px にすると iPad では1つずつ上下に折り返し、PC(左の欄が 700px ほど)では今までどおり横に並ぶ */
.s04 .row > .field { flex: 1 1 240px; min-width: 240px; }

/* 日付・時刻の欄は中身に合わせる(#815 の D670・D679)。
   width:100% のままだと欄いっぱいに伸びて「幅が長過ぎる」(ユーザー) */
.s03 input[type=date], .s04 input[type=date], .s04 input[type=time] { max-width: 240px; }

/* ---- S03 周期確認・調整(段1 後半 2章・画面イメージ #585) --------------------
   器は S04 と同じ(AssistPanel)。ここに足すのは S03 だけの見た目 */
.dialog:has(> .dialog-body.s03) { max-width: 1280px; }
.s03 .scope-bar { display: block; }
.s03 .scope-bar .sub { display: block; margin-top: 3px; font-size: 15px; color: #35576F; }
.s03 .scope-bar > span > .badge { margin-left: 6px; }
.s03 .scope-bar .sub > span { margin-right: 4px; }
.s03 .panel > h3 { font-size: 17px; margin: 0 0 8px; color: var(--navy); }
.s03 .hint { font-size: 15px; color: var(--muted); line-height: 1.7; }
/* 直接修正の2列(次回実施予定日・周期日数)。最小幅は 240px(#815 の D679・ユーザーの操作確認
   「次回実施予定日と周期日数が重なっている。次回実施予定日の幅が長過ぎる。」) — D670 と同じ見方 */
.s03 .row > .field { flex: 1 1 240px; min-width: 240px; }

/* 直接修正の左右の欄は見出しをそろえる(D429 の #744)。
   .row の既定は align-items: flex-end で、右の欄だけ［初期周期を推定する］のぶん背が高いため、
   「次回実施予定日」の見出しが「周期日数」より1行ぶん下にずれていた。
   AI に相談する行(.ai-call)は1行の並びなので今までどおり中央ぞろえ */
.s03 .row:not(.ai-call) { align-items: flex-start; }

/* 上段の参考カード(読み取り専用・ボタンなし) */
.s03 .panel.ref { background: #fff; border-left: 4px solid var(--navy); }
.s03 .panel.done { border: 2px solid var(--ok); }

/* 相談の吹き出しと往復の表示 */
.s03 .turn { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.s03 .turn.warn { color: var(--warn); font-weight: 600; }
.s03 .bubbles { max-height: 320px; overflow-y: auto; margin-bottom: 8px; }
.s03 .bubble { background: #fff; border: 1px solid #d3e8f8; border-radius: 8px;
  padding: 8px 10px; margin: 0 0 6px; font-size: 15px; line-height: 1.8; }
.s03 .bubble.me { background: #F2F6F8; border-color: var(--line); }
.s03 .panel.ai .btn { width: 100%; margin-top: 8px; }
.s03 .panel.ai .chips .btn { width: auto; margin-top: 0; }
.s03 .panel.ai textarea { width: 100%; box-sizing: border-box; }
.s03 .row.ai-call { margin: 0 0 8px; align-items: center; }
.s03 .message { background: #FFF9F8; border-left: 4px solid var(--ng); padding: 9px 13px;
  color: #8E1B1B; margin: 0 0 8px; border-radius: 0 8px 8px 0; }

/* ［過去の調整履歴を見る］は左に置く(S03-8) */
.s03 + .dialog-actions .spacer, .dialog-actions .spacer { flex: 1 1 auto; }
.s03 .panel.ref .sub > span { margin-right: 4px; }
/* AI アシスト OFF の客先は器ごと狭める(S03・S04 とも。0章) */
.dialog:has(.assist.ai-off) { max-width: 900px; }

/* ---- S21 通知(段1 後半 3章・画面イメージ #588) ------------------------------ */
/* ヘッダーのベル(#599)。件数は赤いバッジ */
.titlebar .bell { position: relative; display: inline-flex; align-items: center; color: #fff;
  text-decoration: none; padding: 2px 6px; }
.titlebar .bell .n { position: absolute; top: -2px; right: -2px; background: var(--ng); color: #fff;
  border-radius: 10px; font-size: 11px; line-height: 1; padding: 2px 5px; font-weight: 700; }

.s21 .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.s21 .toolbar select { width: auto; }
.s21 .kseg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.s21 .kseg button { background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; font-size: 15px; color: var(--navy); }
.s21 .kseg button.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.s21 .tiles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.s21 .tiles .hint { font-size: 14px; color: var(--muted); }
.s21 .panel.blk > h2 { cursor: pointer; font-size: 17px; margin: 0; color: var(--navy);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s21 .panel.blk > h2 .chev { color: var(--muted); font-size: 13px; }
.s21 .cards { margin-top: 8px; }
.s21 .cards .empty { color: var(--muted); font-size: 15px; margin: 6px 2px; }
.s21 .pager { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.s21 .hint { font-size: 15px; color: var(--muted); line-height: 1.7; }
.s21 .foottxt { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* 1100px 以上は左に種別・右に表（①段2 の 4-1・#691・ユーザー判断）。
   1100px 未満は .seg-only のカードに戻る（shared.css の .wide-only / .seg-only） */
.s21-wide { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; align-items: start; }
.s21-wide > .s21-blocks { display: flex; flex-direction: column; gap: 6px; }
.s21-wide > .s21-blocks button {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; font-size: 15px; cursor: pointer; text-align: left;
}
.s21-wide > .s21-blocks button.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.s21-wide > .s21-blocks button.on .badge { background: #fff; color: var(--navy); }
.s21-wide > .s21-blocks button > .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s21-widegrid > .toolbar { justify-content: space-between; }
.s21-widegrid > .toolbar h2 { font-size: 17px; margin: 0; color: var(--navy); }
.s21-widegrid .empty { color: var(--muted); font-size: 15px; margin: 6px 2px; }
/* 1100px 以上ではタイルとセグメントを出さない（左の一覧が兼ねる）。
   .s21 .tiles / .s21 .kseg は shared.css の .seg-only より強いので、同じ強さで消す */
/* 1920×940 で縦に収める(D243・D252 の #714。直した screen_check で 6px はみ出していた)。
   D356(#731)でページ送りの帯を1ページでも出すようにしたので、その分を表の高さから引く
   (#737 J2・ユーザー判断。ページ送りの見せ方は全画面で同じまま・D356)。
   引く量は screen_check 3-4 が出した縦のはみ出し 50px(帯 ＋ margin ＋ 余白) */
.s21-widegrid .list-area { height: 482px; }
.s21-widegrid .list-area.scrolly { max-height: 60vh; overflow-y: auto; }
.s21 .tiles.seg-only, .s21 .kseg.seg-only { display: none; }
@media (max-width: 1100px) {
  .s21 .tiles.seg-only { display: flex; }
  .s21 .kseg.seg-only { display: flex; }
}
.s21 .message { background: #FFF9F8; border-left: 4px solid var(--ng); padding: 9px 13px;
  color: #8E1B1B; margin: 0 0 8px; border-radius: 0 8px 8px 0; }

/* この端末の通知設定(S21-12) */
.s21-settings .row > .field { flex: 1 1 150px; min-width: 150px; }
.s21-settings .hint { font-size: 14px; color: var(--muted); }

/* ---- S23 画像ビューア(段1 後半 4章・画面イメージ) ---------------------------- */
.dialog:has(> .dialog-body.s23) { max-width: 1100px; }
.s23 .stage { position: relative; display: flex; align-items: center; justify-content: center;
  background: #1B2A33; border-radius: 8px; min-height: 420px; overflow: hidden; }
.s23 .stage .img { display: flex; align-items: center; justify-content: center; width: 100%; height: 420px; }
.s23 .stage img { max-width: 100%; max-height: 420px; transition: transform .15s ease; }
.s23 .stage .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45);
  color: #fff; border: 0; border-radius: 999px; width: 40px; height: 40px; font-size: 24px; line-height: 1; }
.s23 .stage .nav.l { left: 8px; }
.s23 .stage .nav.r { right: 8px; }
.s23 .info { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; margin: 8px 2px;
  font-size: 15px; color: var(--muted); }
.s23 .info b { color: var(--navy); }
.s23 .strip { display: flex; gap: 6px; flex-wrap: wrap; }
.s23 .strip button { padding: 0; border: 2px solid transparent; background: none; border-radius: 6px; }
.s23 .strip button.on { border-color: var(--navy); }
.s23 .strip img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; display: block; }
.s23 .hint { font-size: 15px; color: var(--muted); margin-top: 8px; }
.s23 .empty { color: var(--muted); padding: 24px 0; text-align: center; }

/* S04 の添付のサムネイルは押すと S23 が開く */
.s04 .att .thumb-button { padding: 0; border: 0; background: none; min-height: 0; }
/* 小さい画像でも見える大きさで出す(比率は保つ) */
.s23 .stage img { min-width: 160px; min-height: 160px; object-fit: contain; }

/* ---- S13 担当範囲をまとめて付ける(#660・design.md S13) ---------------------- */
.dialog:has(> .dialog-body.s13-bulk) { max-width: 760px; }
.s13-bulk .scope-bar { display: block; }
.s13-bulk .scope-bar .sub { display: block; margin-top: 3px; font-size: 15px; color: #35576F; }
.s13-bulk .tree { max-height: 320px; overflow-y: auto; border: 1px solid #d3e8f8;
  border-radius: 8px; background: #fff; padding: 6px 8px; }
.s13-bulk .tree .node { padding: 2px 0; font-size: 15px; }
.s13-bulk .tree .node.level1 { padding-left: 20px; }
.s13-bulk .tree .node.level2 { padding-left: 40px; }
/* 自分の担当範囲の外(どこの下かを見せるだけ。押せない) */
.s13-bulk .tree .node .out { color: var(--muted); }
.s13-bulk .plan { font-size: 16px; font-weight: 600; color: var(--navy); margin: 10px 2px 0; }
.s13-bulk .panel.skip { background: #FFFDF5; border-left: 4px solid var(--warn); margin-top: 8px; }
.s13-bulk .panel.skip > h3 { font-size: 16px; margin: 0 0 6px; color: var(--navy); }
.s13-bulk .panel.skip ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.8; }
.s13-bulk .error { background: #FFF9F8; border-left: 4px solid var(--ng); padding: 9px 13px;
  color: #8E1B1B; margin: 0 0 8px; border-radius: 0 8px 8px 0; }

/* ---- S14 Excel取込(design.md S14・#673。画面イメージ S14_Excel取込画面.html にそろえる) ---- */
/* 画面イメージの枠は 1200×750。既定の 560px では内容の確認の表が横に切れる(S04・S03 と同じ形) */
.dialog:has(> .dialog-body.s14) { max-width: 1200px; }

/* M06 の［項目を見る］(#855)。11列の表なので、S14 と同じく広い枠にする(#857 の D799) —
   既定の幅だと 必須・入力のヒント が右に隠れ、横に送らないと読めなかった */
.dialog:has(> .dialog-body.m06-items) { max-width: 1180px; }
.m06-items { width: min(1140px, 94vw); }
.m06-items table.grid { width: 100%; }
.s14 { display: flex; flex-direction: column; min-height: 0; gap: 8px; }

/* 段(テンプレート → ファイルを選ぶ → 内容の確認 → 取り込み) */
.s14 .steps { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0 0 4px; padding: 0; }
.s14 .steps li { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.s14 .steps li .no {
  width: 22px; height: 22px; border-radius: 50%; background: #EEF1F4; color: #8A949E;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.s14 .steps li.on { color: var(--navy); font-weight: 700; }
.s14 .steps li.on .no { background: var(--navy); color: #fff; }
.s14 .steps li.done .no { background: #CFE0D8; color: #0F6E56; }

/* 上段(テンプレート・取り込む範囲・ファイル) */
.s14 .toprow { display: flex; gap: 8px; flex-wrap: wrap; }
.s14 .toprow .blk {
  display: flex; align-items: center; gap: 8px; border: 1px solid #E6EEF5; border-radius: 8px;
  background: #FAFBFC; padding: 6px 10px;
}
.s14 .toprow .blk.grow { flex: 1 1 auto; }
.s14 .toprow .bl { font-size: 14px; color: var(--muted); white-space: nowrap; }
.s14 .toprow .fnm { font-size: 15px; color: var(--navy); }
/* ［ファイルを選ぶ］の形は共通の .btn.file(上) */

/* 件数タイル4つ */
.s14 .sum { display: flex; gap: 8px; }
.s14 .sum .t { flex: 1; border: 1px solid #E6EEF5; border-radius: 8px; background: #fff; padding: 8px 12px; }
.s14 .sum .t .k { font-size: 13px; color: var(--muted); }
.s14 .sum .t .v { font-size: 20px; font-weight: 700; color: var(--navy); }
.s14 .sum .t.err { border-color: #E8B7B7; background: #FDF5F5; }
.s14 .sum .t.err .v { color: var(--ng); }
.s14 .sum .t.zero .v { color: var(--muted); }

/* シート別の内訳 */
.s14 .sheets { display: flex; gap: 8px; }
.s14 .sheets .s {
  flex: 1; border: 1px solid #E6EEF5; border-radius: 8px; background: #FAFBFC; padding: 8px 12px;
  font-size: 14px; color: var(--muted); text-align: left; cursor: pointer;
}
.s14 .sheets .s.on { border-color: var(--navy); background: #fff; box-shadow: inset 0 -2px 0 var(--navy); }
.s14 .sheets .s b { color: var(--navy); }
.s14 .sheets .s .o { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* プレビュー */
.s14 .gwrap { flex: 1 1 auto; min-height: 200px; overflow: auto; border: 1px solid #E3E7EA; border-radius: 8px; background: #fff; }
.s14 table.g { width: 100%; border-collapse: collapse; font-size: 14px; }
.s14 table.g th {
  position: sticky; top: 0; z-index: 2; background: #EEF1F4; color: #4D5C6B; font-weight: 600;
  text-align: left; padding: 6px 9px; border-bottom: 1px solid #D9DDE1; white-space: nowrap;
}
.s14 table.g td { padding: 5px 9px; border-bottom: 1px solid #F0F2F4; color: var(--navy); white-space: nowrap; }
.s14 table.g td.num { color: var(--muted); }
.s14 table.g th.mc, .s14 table.g td.mc { min-width: 280px; white-space: normal; }
.s14 table.g tr.bad td { background: #FDF4F4; }
.s14 table.g tr.bad td.msg .bad { color: var(--ng); display: block; }
.s14 table.g tr.new td.st { color: #0F6E56; }
.s14 table.g tr.upd td.st { color: #106EBE; }
.s14 table.g tr.off td.st, .s14 table.g tr.rm td.st { color: #854F0B; }
.s14 table.g tr.same td { color: var(--muted); }
.s14 table.g td.msg .nt { color: #854F0B; display: block; }

/* ---- S06 保全記録一覧(design.md S06・②段1 の 3章) ------------------------- */
.s06 .toolbar { gap: 8px 10px; }
.s06 .toolbar input[type=search] { width: auto; flex: 1 1 220px; min-width: 180px; }
.s06 .toolbar select, .s06 .toolbar input[type=date] { width: auto; min-width: 130px; flex: 0 1 auto; }
.s06 .toolbar .period { display: inline-flex; align-items: center; gap: 6px; }
.s06 .toolbar .listview { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 15px; }
.s06 .toolbar .btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
/* 件数の帯(該当件数 ＋ 状態ごと。0件の状態は出さない・#390 の J3) */
.s06 .counts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.s06 .counts .hit { font-weight: 700; color: var(--navy); }
.s06 .counts .spacer { flex: 1 1 auto; }
.s06 .scrolly { max-height: calc(100vh - 320px); overflow-y: auto; }

/* ---- S08 不具合詳細(design.md S08・②段1 の 4章) --------------------------- */
/* 見出し・設備／機器・管理番号・状態の帯を上に固定(#816 の D691) —
   iPad で下まで送ると、どの不具合を見ているのか分からなくなっていた。
   本文(.content)が動く入れ物なので、その中の sticky で止まる */
.s08 .s08-head { position: sticky; top: 0; z-index: 4; background: #fff; padding-top: 2px; }
/* 見出しの行の右に寄せる間(#872 の D878・ユーザーの操作確認
   「『一覧に戻る』のボタン位置が実施履歴と違う。実施履歴側と合わせる」) —
   .spacer の伸びは画面ごとに書いてあり、S05・S10 では効いていなかったので
   ［一覧に戻る］が見出しのすぐ横に出ていた。見出しの行はここ1か所で伸ばす */
.page-head .spacer { flex: 1 1 auto; }

/* iPad(1100px 以下)はタブの帯を不具合内容の上に出す(#816 の D690) —
   「不具合内容」タブの中身だけが帯の上に出ていて、4つのタブのうち1つだけ並びが違った。
   タブの帯とタブの中身は右の列(.right)にあるので、その列ごと上に出す
   (狭い幅では「不具合内容」のタブのときだけ左の列が描かれるので、
    見た目は タブ → 中身 の順になる)。
   PC では「不具合内容」はタブではない(左の列に常に出る)ので、この当て方はしない */
@media (max-width: 1100px) {
  .s08 .cols > .right { order: -1; }
}

.s08 .crumbs { display: flex; align-items: baseline; gap: 12px; color: var(--muted); margin-bottom: 6px; }
.s08 .crumbs .num { color: var(--navy); font-family: Consolas, "Courier New", monospace; }
.s08 .statusbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #F2F5F8; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; color: var(--navy); }
.s08 .statusbar .spacer { flex: 1 1 auto; }
.s08 .statusbar .reason { color: #854F0B; }
/* 1100px 以上は左右2列(左＝不具合内容・原因 / 右＝状態の帯・タブ3つ) */
.s08 .cols { display: flex; gap: 14px; align-items: flex-start; }
.s08 .cols > .left { flex: 1 1 42%; min-width: 0; }
.s08 .cols > .right { flex: 1 1 58%; min-width: 0; }
@media (max-width: 1100px) { .s08 .cols { flex-direction: column; } .s08 .cols > div { width: 100%; } }

/* PC では本文を画面の高さに収め、対応記録の表だけを伸び縮みさせる(L13・#745)。
   表が中身の高さのままだと縦にはみ出す(原因の欄をたたんでも 69px 残っていた)。
   iPad(1100px 以下)は縦に並べるので、この当て方はしない(今までどおり本文が動く) */
@media (min-width: 1101px) {
  .content.s08 { display: flex; flex-direction: column; min-height: 0; }
  .content.s08 > * { flex: 0 0 auto; }
  .s08 .cols { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .s08 .cols > .left { overflow-y: auto; }
  .s08 .cols > .right { display: flex; flex-direction: column; min-height: 0; }
  .s08 .cols > .right > .card:last-child { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .s08 .cols > .right > .card:last-child > .list-area { flex: 1 1 auto; min-height: 160px; }
}
/* サーバー異常の帯(L9 の #745・detailed-design.md 3-5-7-2)が出ると本文の高さが 44px 減る。
   帯が出ていても PC(1920x940)で縦にはみ出さないよう、一覧・グラフの区画だけを伸び縮みさせる
   (S08・S10・S28 と同じ当て方)。iPad(1100px 以下)は今までどおり本文が縦に動く。
   帯が出る前は S11 の余りが 5px・S21 は 0px しかなく、1行足すだけではみ出していた */
@media (min-width: 1101px) {
  .content.s11, .content.s17, .content.s21, .content.s22 {
    display: flex; flex-direction: column; min-height: 0;
  }

  .content.s11 > *, .content.s17 > *, .content.s21 > *, .content.s22 > * { flex: 0 0 auto; }

  /* S11 のグラフは枚数で高さが決まる(n1〜n4)ので、入らないぶんは区画の中で送る */
  .content.s11 > .charts { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

  /* S17 の処理の表(P01〜P13 の13行)は、表の器の中で送る */
  .content.s17 > .s17-table-area { flex: 1 1 auto; min-height: 120px; overflow-y: auto; }

  /* S21 は左に種別の並び・右に一覧。右の一覧だけを伸び縮みさせる */
  .content.s21 > .s21-wide { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .s21-wide > .panel.s21-widegrid { display: flex; flex-direction: column; min-height: 0; }
  .s21-wide > .panel.s21-widegrid > .list-area { flex: 1 1 auto; min-height: 160px; }

  /* S22 は一覧の枠が高さを見て1ページの件数を決める(L2)ので、枠を伸び縮みさせれば収まる */
  .content.s22 > .panel:last-of-type { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .content.s22 > .panel:last-of-type > .list-area { flex: 1 1 auto; min-height: 160px; }

  /* ①②の一覧も本文の余りまで伸ばす(#780 の D554) —
     伸ばしていなかったので、枠の高さが min-height(240px)のままになり、
     1ページの件数(ListPaging.RowsForHeight)が 1280x900 で S02 3行・S06 4行しか出ず、
     表の下が大きく空いていた。数え方(L2 の #745)は変えない — 測る枠を伸ばすだけ */
  .content.s02, .content.s05, .content.s06, .content.s19 {
    display: flex; flex-direction: column; min-height: 0;
  }

  .content.s02 > *, .content.s05 > *, .content.s06 > *, .content.s19 > * { flex: 0 0 auto; }

  .content.s02 > .grid-host,
  .content.s05 > .list-area,
  .content.s06 > .list-area,
  .content.s19 > .list-area { flex: 1 1 auto; min-height: 160px; }

  /* スクロールのときに見える高さは12行ぶんまで(#845 の D821・ユーザーの操作確認) —
     超えたら一覧の中でスクロールする。42px(見出し) + 12 × 46px(行) = 594px。
     数は ListPaging(HeaderHeight・RowHeight・MaxScrollRows)と同じ。
     S02 はここから外した(#870 の D868) — 窓の高さから見える行を決めて、画面が style で入れる
     (決め打ちの px にしない・PC も iPad も同じ決まり) */
  .content.s05 > .list-area,
  .content.s06 > .list-area,
  .content.s19 > .list-area { max-height: 594px; }
}

.s08 .card { background: #fff; border: 1px solid #E3E7EA; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.s08 .card h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 8px; color: var(--navy); }
.s08 .card h2 .spacer { flex: 1 1 auto; }
.s08 .card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.s08 .card dt { color: var(--muted); }
.s08 .card dd { margin: 0; }
.s08 .form-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin: 6px 0; }
.s08 .form-row > label { flex: 0 0 120px; color: var(--muted); padding-top: 4px; }
.s08 .form-row select, .s08 .form-row textarea, .s08 .form-row input { flex: 1 1 auto; min-width: 0; }
/* ［表示する列］は1行に並べる(#708 の 2-17) — 縦に7段 並ぶと比較表より大きく見えた。
   枠の高さはタップの最小(44px)のまま(0章)。横に流して折り返す */
.s08 [data-testid=s08-proposal-columns] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.s08 [data-testid=s08-proposal-columns] h3 { flex: 0 0 100%; margin: 0; font-size: 15px; color: var(--navy); }
.s08 [data-testid=s08-proposal-columns] .checkline { padding: 0 10px; font-size: 16px; }

/* 行の確認・手入力は画面の中央に出す(J4 の #775。S29 と同じ出し方) —
   一覧の下に続けて出していたので、画面からはみ出し、下に出たボタンがスクロールしないと押せなかった。
   transform は使わない(中の position: fixed の基準になる)。高さが足りなければ箱の中だけが動く */
.s08 .confirm {
  position: fixed; inset: 0; margin: auto; z-index: 40;
  width: min(560px, calc(100vw - 32px)); height: max-content; max-height: 80vh; overflow: auto;
  border: 1px solid #E6EEF5; border-radius: 8px; background: #fff; padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(16, 36, 56, .28);
}
/* 後ろを暗くする。箱の中に敷かない(D539 の #775・S29 と同じ) */
.s08:has(.confirm)::before {
  content: ''; position: fixed; inset: 0; z-index: 30; background: rgba(16, 36, 56, .35);
}
.s08 .confirm h3 { margin: 0 0 6px; font-size: 15px; color: var(--navy); }
.s08 .confirm > label { display: block; margin-top: 8px; color: var(--muted); }
.s08 .confirm textarea, .s08 .confirm input[type=text] { width: 100%; }
/* ボタンは箱の下に付いたまま(中が長くても画面の中) */
.s08 .confirm .row { display: flex; gap: 8px; margin-top: 10px; }

.s08 .form-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.s08 .form-foot .spacer { flex: 1 1 auto; }
.s08 .files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.s08 .files .chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #D9DDE1;
  border-radius: 14px; background: #fff; padding: 3px 10px; font-size: 14px; cursor: pointer; }
.s08 .linked, .s08 .derived { margin: 8px 0 0; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.s08 .open-cm .cm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0;
  border-bottom: 1px solid #F0F2F4; }
.s08 .open-cm .cm .note { flex: 1 1 200px; }
.s08 .tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.s08 .tabs .spacer { flex: 1 1 auto; }
/* タブそのものだけ(白と紺で選ばれている側を分ける)。
   タブ列に並ぶ ふつうのボタン(.btn ＝［類似事象を検索］)まで白くしない — 白いままだと
   ほかの .btn(#EEF1F4)と色の系統がずれる(D374 の #733・別紙49 3-2) */
.s08 .tabs > button:not(.btn) { height: 32px; padding: 0 14px; border: 1px solid #D9DDE1; background: #fff;
  border-radius: 8px 8px 0 0; color: var(--muted); cursor: pointer; font-family: inherit; }
.s08 .tabs > button:not(.btn).on { background: var(--navy); color: #fff; border-color: var(--navy); }
/* タブに添える件数と「原因 未入力」の印(D596 の #800)。選ばれている側でも読める色にする */
.s08 .tabs > button:not(.btn) .count { margin-left: 6px; font-size: 12px; }
.s08 .tabs > button:not(.btn).on .count { color: #E8EEF5; }
.s08 .tabs > button:not(.btn) .badge { margin-left: 6px; }
/* iPad は4つ並ぶので、タブの列は折り返す(#439) */
.s08 .tabbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.s08 .tabbar .spacer { flex: 1 1 auto; }
.s08 .num { font-family: Consolas, "Courier New", monospace; }

/* ---- S07 不具合記録登録(design.md S07・②段1 の 5章) ----------------------- */
.dialog:has(> .dialog-body.s07) { max-width: 1200px; }
.s07 .hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.s07 .hdr .bl { color: var(--muted); font-size: 14px; }
.s07 .hdr .num { font-family: Consolas, "Courier New", monospace; color: var(--navy); }
.s07 .hdr .num.none { color: var(--muted); font-family: inherit; }
.s07 .hdr .banner { background: #FDFAF2; border-left: 3px solid var(--warn); padding: 3px 10px; color: #854F0B; }
.s07 .form-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.s07 .form-row > label { flex: 0 0 110px; color: var(--muted); padding-top: 4px; }
.s07 .form-row select, .s07 .form-row textarea, .s07 .form-row input { flex: 1 1 200px; min-width: 0; }
.s07 .form-row .required { flex: 1 1 100%; color: var(--ng); font-size: 14px; margin-left: 120px; }
.s07 .badge.carried { background: #FBF3DA; color: #854F0B; }
.s07 .locked { color: var(--muted); }
.s07 .similar .row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #F0F2F4; }
.s07 .similar .row .num { font-family: Consolas, "Courier New", monospace; color: var(--navy); }
.s07 .draft dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 8px; }
.s07 .draft dt { color: var(--muted); }
.s07 .draft dd { margin: 0; }
.s07 .chat p { margin: 4px 0; padding: 5px 9px; border-radius: 8px; background: #F2F5F8; }
.s07 .chat p.me { background: #E8EEF6; }
.s07 .chat .warn { color: var(--ng); }
.s07 .acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.s07 .applied { color: #0F6E56; }
.s07 .carry { background: #FDFAF2; border-left: 3px solid var(--warn); padding: 8px 12px; }

/* S09 対応記録登録(②段1 後半の 1章)。左右2枚は AssistPanel が持つ */
.dialog:has(> .dialog-body.s09) { max-width: 1200px; }

/* AIアシスト OFF は S07・S09 も器ごと狭める(design.md 0章 517・522 行「620px」「620×内容なり」・
   #708 の 2-16・#710 の 2-3)。上の s07・s09 の 1200px が後ろにあって勝っていたので、
   1200px の器の真ん中に入力が並んでいた。900px でもまだ広かった */
.dialog:has(> .dialog-body.s07 .assist.ai-off),
.dialog:has(> .dialog-body.s09 .assist.ai-off) { max-width: 620px; }
.s09 .hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.s09 .hdr .bl { color: var(--muted); font-size: 14px; }
.s09 .hdr .num { font-family: Consolas, "Courier New", monospace; color: var(--navy); }
.s09 .hdr .num.none { color: var(--muted); font-family: inherit; }
.s09 .source { background: #FDFAF2; border-left: 3px solid var(--warn); padding: 6px 12px; margin-bottom: 8px; }
.s09 .source .bl { color: #854F0B; font-size: 14px; }
.s09 .source p { margin: 2px 0 0; }
.s09 .form-row { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.s09 .form-row > label { flex: 0 0 110px; color: var(--muted); padding-top: 4px; }
.s09 .form-row select, .s09 .form-row textarea, .s09 .form-row input { flex: 1 1 200px; min-width: 0; }
.s09 .form-row .required { flex: 1 1 100%; color: var(--ng); font-size: 14px; margin-left: 120px; }
.s09 .form-row .note { flex: 1 1 100%; color: var(--muted); font-size: 14px; margin-left: 120px; }

/* 入力できない欄は隠さず灰色にする(design.md 3章 7) */
.s09 .form-row.off { background: #F7F8FA; border-radius: 6px; padding: 4px 6px; }
.s09 .form-row.off > label { color: #9AA3AD; }
.s09 .ro { padding-top: 4px; }
.s09 .ro.off { color: #9AA3AD; flex: 1 1 200px; }
/* 指で押す高さ(44px)と箱の大きさを .checkline にそろえる(3-2・別紙49 3-2) */
.s09 .check { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  min-height: var(--tap); }
.s09 .check input[type=checkbox] { width: 20px; height: 20px; }
.s09 .badge.carried { background: #FBF3DA; color: #854F0B; }
.s09 .locked { color: var(--muted); }
.s09 .similar > summary { cursor: pointer; color: var(--navy); font-weight: 600; margin-bottom: 4px; }
.s09 .similar .row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #F0F2F4; }
.s09 .similar .row .num { font-family: Consolas, "Courier New", monospace; color: var(--navy); }
.s09 .draft dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 8px; }
.s09 .draft dt { color: var(--muted); }
.s09 .draft dd { margin: 0; }
.s09 .chat p { margin: 4px 0; padding: 5px 9px; border-radius: 8px; background: #F2F5F8; }
.s09 .chat p.me { background: #E8EEF6; }
.s09 .chat .warn { color: var(--ng); }
.s09 .acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.s09 .applied { color: #0F6E56; }
.s09 .carry { background: #FDFAF2; border-left: 3px solid var(--warn); padding: 8px 12px; }


/* S08 の原因の促し(完了になったのに原因が未入力・後半の紙 1章) */
.s08 .ask { background: #FDFAF2; border-left: 3px solid var(--warn); padding: 6px 12px; color: #854F0B; }

/* S10 類似事象検索(②段1 後半の 2章) */
.s10 .banner { background: #F4F7FB; border-left: 3px solid var(--navy); padding: 6px 12px; color: var(--navy); }
.s10 .cond .form-row { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.s10 .cond .form-row > label { flex: 0 0 110px; color: var(--muted); }
.s10 .cond .form-row input[type=text], .s10 .cond .form-row select { flex: 1 1 220px; min-width: 0; }
.s10 .cond .acts { margin-top: 8px; }
.s10 .cond .note { color: #854F0B; background: #FDFAF2; border-left: 3px solid var(--warn); padding: 6px 12px; }
.s10 .chev { background: none; border: 0; cursor: pointer; color: var(--navy); }
.s10 .acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.s10 .empty { color: var(--muted); text-align: center; }
/* PC(1920×940)で縦にスクロールしない(D243・D252 の #714) —
   検索条件は動かさず、結果の一覧だけが中でスクロールする(S16A と同じ形)。
   iPad(1100px 未満)は今までどおりページごと縦に動く(タッチなので自然) */
@media (min-width: 1101px) {
  .content.s10 { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .content.s10 > .panel.cond { flex: 0 0 auto; }

  /* 検索条件は2列に詰める(D288 の #718・ユーザー判断 10-11) —
     6行を縦に積んでいたので、結果の欄が2行ぶんしか残らなかった。
     縦スクロールなしは保ったまま、結果の欄を広げる */
  .content.s10 > .panel.cond {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-content: start;
  }
  /* 検索文は横幅いっぱい(打つ所が広いほうがよい)。［検索］の帯も1行で */
  .content.s10 > .panel.cond > .form-row:first-child,
  .content.s10 > .panel.cond > .acts,
  .content.s10 > .panel.cond > .note { grid-column: 1 / -1; }

  /* 結果の区画は画面の残りいっぱい。その中では一覧だけがスクロールする
     (D243「一覧の中のスクロールは可」)。

     区画そのものは送らない(overflow: hidden・D428 の #744) —
     前は区画が送れたので一覧の枠が中身の高さまで伸び、
     ①下に貼り付けた［関連不具合として紐づける］が行に重なり、
     ②枠の高さで1ページの件数を決める見張り(L2)が本当の残りを測れなかった */
  .content.s10 > .panel:not(.cond) {
    flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  }
  .content.s10 > .panel:not(.cond) > * { flex: 0 0 auto; }
  .content.s10 > .panel:not(.cond) > .list-area { flex: 1 1 auto; min-height: 120px; overflow: hidden; }
}

/* ［関連不具合として紐づける］はいつも見える場所に(D288 の #718)。
   区画の中でスクロールしても、ボタンの帯は下に貼り付いたまま —
   前は結果が多いとボタンが欄の中に隠れていた(iPad でも同じ) */
.s10 .acts.link-acts {
  position: sticky; bottom: 0; z-index: 1;
  background: #fff; padding-top: 8px; margin-top: 0;
}

/* S24 原因纏めアシスト(②段1 後半の 3章) */
.dialog:has(> .dialog-body.s24) { max-width: 1200px; }
.s24 .target { background: #F7F8FA; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.s24 .target dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 8px; }
.s24 .target dt { color: var(--muted); }
.s24 .target dd { margin: 0; }
.s24 .target .files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.s24 .locked { color: var(--muted); }
.s24 .draft dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 8px; }
.s24 .draft dt { color: var(--muted); }
.s24 .draft dd { margin: 0; }
.s24 .cases > summary, .s24 .chat > summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.s24 .cases .row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #F0F2F4; flex-wrap: wrap; }
.s24 .cases .row .num { font-family: Consolas, "Courier New", monospace; color: var(--navy); }
.s24 .web h4 { margin: 8px 0 2px; }
.s24 .web p { margin: 2px 0; }
.s24 .chat p { margin: 4px 0; padding: 5px 9px; border-radius: 8px; background: #F2F5F8; }
.s24 .chat p.me { background: #E8EEF6; }
.s24 .chat .warn { color: var(--ng); }
.s24 .chat .tips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.s24 .acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.s24 .check { display: flex; align-items: center; gap: 6px; margin: 4px 0; min-height: var(--tap); }
.s24 .check input[type=checkbox] { width: 20px; height: 20px; }
.s24 .note { color: var(--muted); font-size: 14px; }
.s24 .grid.small th, .s24 .grid.small td { padding: 3px 6px; font-size: 14px; }

/* S25 対策検討アシスト(②段1 後半の 4章) */
.dialog:has(> .dialog-body.s25) { max-width: 1400px; }
.s25 .target { background: #F7F8FA; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.s25 .target dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.s25 .target dt { color: var(--muted); }
.s25 .target dd { margin: 0; }
.s25 .target .note { color: #854F0B; }
.s25 .items { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.s25 .check { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; min-height: var(--tap); }
.s25 .check input[type=checkbox] { width: 20px; height: 20px; }
.s25 .locked { color: var(--muted); }
.s25 .grid td input[type=text], .s25 .grid td select, .s25 .grid td textarea { width: 100%; min-width: 0; }
.s25 .grid td.num { font-family: Consolas, "Courier New", monospace; color: var(--navy); }
.s25 .grid .sub { color: var(--muted); font-size: 13px; }
.s25 .grid.small th, .s25 .grid.small td { padding: 3px 6px; font-size: 14px; }

/* 過去の対策実績の表(#708 の 2-19)。「対策と結果」が「過去の対
応」と途中で折れていた —
   見出しは折らず、幅は中身のいちばん長い「対策と結果」に寄せる */
[data-testid=s25-past] { table-layout: fixed; width: 100%; }
[data-testid=s25-past] th:nth-child(1) { width: 30px; }
[data-testid=s25-past] th:nth-child(2) { width: 24%; }
[data-testid=s25-past] th:nth-child(3) { width: 26%; }
[data-testid=s25-past] th:nth-child(5) { width: 54px; }
[data-testid=s25-past] th, [data-testid=s25-past] td { overflow-wrap: anywhere; vertical-align: top; }
.s25 .grid .empty { color: var(--muted); text-align: center; }
.s25 .required { color: var(--ng); font-size: 13px; display: block; }
.s25 .web h4 { margin: 8px 0 2px; }
.s25 .web p { margin: 2px 0; }
.s25 .chat > summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.s25 .chat p { margin: 4px 0; padding: 5px 9px; border-radius: 8px; background: #F2F5F8; }
.s25 .chat p.me { background: #E8EEF6; }
.s25 .chat .warn { color: var(--ng); }
.s25 .chat .form-row { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 4px 0; }
.s25 .acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* S22 変更ログ(②段1 後半の 5章・iPad 版) */
.s22 .filtered { background: #F4F7FB; border-left: 3px solid var(--navy); padding: 6px 12px; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.s22 .cond .form-row { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.s22 .cond .form-row > label { flex: 0 0 90px; color: var(--muted); }
.s22 .cond .form-row select { flex: 0 1 240px; min-width: 0; }
.s22 .counts { display: flex; align-items: center; gap: 16px; margin: 8px 0; }
.s22 .counts b { color: var(--navy); }
.s22 .chev { background: none; border: 0; cursor: pointer; color: var(--navy); }

/* セグメントの中で文字を折り返さない(820 幅で「実施/済」「AIアシス/ト」と割れていた・②段1 後半)。
   shared.css は試作の写しなので触らず、ここで上書きする(0章の .assist と同じ扱い) */
.seg button { white-space: nowrap; }

/* 絞り込みのセグメント(S09 の対応状態・S10 の範囲/期間/状態・S22 の期間)。
   shared.css の .seg は AssistPanel の「広い画面では出さない」タブ専用なので、
   いつも見える絞り込みは別のクラスにする(1100px 以上で消えていた・②段1 後半) */
.segs { display: inline-flex; background: #EEF1F4; border-radius: 8px; padding: 2px; }
.segs button {
  border: 0; background: none; padding: 5px 12px; border-radius: 6px;
  color: var(--muted); cursor: pointer; white-space: nowrap; font-size: 15px;
}
.segs button.on { background: #fff; color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 700; }

/* S11 分析ダッシュボード(③段1 の2章) */
/* FlexChart が本文の末尾に置くツールチップの入れ物(#703 の D243)。
   中身が無くても 10px の高さを持ち、そのぶん縦スクロールが出ていた */
.flex-chart-tooltip:empty { display: none; }

/* 縦にスクロールさせない(#703 の D242・D243。見出しを消し、余白を詰める) */
.s11 .toolbar { display: flex; align-items: center; gap: 10px; }
.s11 .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; }
.s11 .tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.s11 .t-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.s11 .t-t { color: var(--navy); font-weight: 700; }
.s11 .t-sub { color: var(--muted); font-size: 13px; }
.s11 .t-main { display: flex; align-items: baseline; gap: 4px; margin: 4px 0; flex-wrap: wrap; }
.s11 .t-num { font-size: 28px; font-weight: 700; color: var(--navy); }
.s11 .t-num.none { color: var(--muted); }
.s11 .t-unit { color: var(--muted); }
.s11 .t-of { color: var(--muted); font-size: 14px; margin-left: 6px; }
.s11 .t-brk { display: flex; gap: 6px; flex-wrap: wrap; }
.s11 .t-ai { background: #F4F7FB; border-left: 3px solid var(--navy); padding: 5px 10px; margin: 6px 0 0; font-size: 14px; }
.s11 .t-ai.none { background: #F7F8FA; border-left-color: var(--line); color: var(--muted); }
/* 日時と「作成」は折り返さない1かたまり(D254 の #714。「作／成」で折れていた) */
.s11 .t-ai .muted { margin-left: 6px; font-size: 13px; white-space: nowrap; }
/* 概略の文は文節で折る(1〜数文字だけ次の行に落とさない・ユーザーの決まり・#534 と同じ) */
.s11 .t-ai { word-break: auto-phrase; }
.s11 .charts { display: grid; gap: 6px; }
.s11 .charts.n4 { grid-template-columns: 1fr 1fr; }
.s11 .charts.n3 { grid-template-columns: 1fr 1fr; }
.s11 .charts.n3 > .gcard:last-child { grid-column: 1 / -1; }
.s11 .charts.n2 { grid-template-columns: 1fr 1fr; }
.s11 .charts.n1 { grid-template-columns: 1fr; }
.s11 .gcard { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.s11 .g-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s11 .g-h.sub { margin: 0 0 6px; }
.s11 .g-t { color: var(--navy); font-weight: 700; }
.s11 .g-cat { color: var(--muted); font-size: 14px; }
/* 全体数と表示範囲の1行(design.md 4543・#798 の J3)。グラフのすぐ上に小さく出す */
.s11 .g-range { color: var(--muted); font-size: 12px; margin: 0 0 4px; }
.s11 .lnsel { max-width: 160px; }
.s11 .empty { color: var(--muted); text-align: center; padding: 30px 0; }

/* iPad(1100px 未満)の省略・展開(design.md S07「iPad の省略・展開」・#433・#821 の D739)。
   PC では何も効かない(まとまりをそのまま出す)。
   1100px 未満では data-open="0" のまとまりを畳み、見出しの行だけ残す */
@media (max-width: 1100px) {
  .seg-fold[data-open="0"] > .panel:not(:first-child) { display: none; }
  .seg-fold[data-open="0"] > .panel:first-child > *:not(legend) { display: none; }
  .seg-fold[data-open="0"] > .panel:first-child { padding-bottom: 6px; }

  /* 省略した見出しの右に「（省略中）」と中身の1行(#433・#825 の D759)。
     開いているときは出さない(.fold-sum は data-open="0" のときだけ) */
  .seg-fold[data-open="0"] > .panel:first-child > legend > .fold-sum {
    display: inline; color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 6px;
  }
  .seg-fold[data-open="0"] > .panel:first-child > legend > .fold-sum::before {
    content: "（省略中）"; margin-right: 6px;
  }
}

/* 中身の1行は省略中だけ出す(PC・展開中は出さない) */
.fold-sum { display: none; }

/* G2 ドーナツの中央に期間内の件数(design.md 4章 G2・#821 の D740)。
   割合だけでなく母数が分かるように、穴の中に重ねる */
.s11 .donut { position: relative; }
.s11 .donut .total {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: var(--navy); font-size: 13px; pointer-events: none;
}
.s11 .donut .total b { display: block; font-size: 22px; font-weight: 700; }

/* G4 ヒートマップ(design.md 4章 G4・#821 の D740)。
   濃さは1色相の濃淡だけ(虹色にしない)。0件の升目は塗らない(「-」だけ) */
.s11 .heat { height: 168px; overflow: auto; }
.s11 .heat .flexgrid-cell.heat1 { background: #EAF2FB; }
.s11 .heat .flexgrid-cell.heat2 { background: #D3E4F7; }
.s11 .heat .flexgrid-cell.heat3 { background: #AFCDEF; }
.s11 .heat .flexgrid-cell.heat4 { background: #85B2E6; color: #10243A; }
.s11 .heat .flexgrid-cell.heat5 { background: #5A93D8; color: #fff; }
.s11 .note { background: #F4F7FB; border-left: 3px solid var(--navy); padding: 6px 12px; color: var(--navy); }

/* S27 AI要約詳細(③段1) */
.dialog:has(> .dialog-body.s27) { max-width: 680px; }
.s27 .brief { background: #F4F7FB; border-left: 3px solid var(--navy); padding: 8px 12px; }
.s27 .detail h3 { font-size: 16px; color: var(--navy); margin: 10px 0 4px; }
.s27 .detail p { margin: 2px 0; }
.s27 .detail li { margin-left: 18px; }
.s27 .foot { margin-top: 10px; font-size: 13px; }
.s27 .empty { color: var(--muted); }

/* S26 分析アシスト(③段1 の3章) */
.s26 .toolbar { display: flex; align-items: center; gap: 10px; }
.s26 .panes { display: grid; grid-template-columns: 1fr 320px; gap: 12px; align-items: start; }
.s26 .pane-main { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.s26 .pane-side { display: grid; gap: 10px; }
.s26 .pane-side .panel { padding: 8px 10px; }
.s26 .pane-side h2 { font-size: 15px; color: var(--navy); margin: 0 0 6px; }
.s26 .pane-side .link { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--navy); padding: 3px 0; cursor: pointer; }
.s26 .pane-side .row { display: flex; align-items: center; gap: 6px; }
.s26 .pane-side .row .link { flex: 1 1 auto; }
.s26 .pane-side .me, .s26 .pane-side .ai { margin: 3px 0; padding: 5px 8px; border-radius: 8px; background: #F2F5F8; font-size: 14px; }
.s26 .pane-side .me { background: #E8EEF6; }
.s26 .g-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s26 .g-t { color: var(--navy); font-weight: 700; font-size: 17px; }
.s26 .prd, .s26 .lnsel { max-width: 180px; }
.s26 .save { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.s26 .save input { flex: 0 1 220px; }
.s26 .grid.small th, .s26 .grid.small td { padding: 3px 8px; font-size: 14px; }
.s26 .empty { color: var(--muted); text-align: center; padding: 30px 0; }
.s26 .note { background: #F4F7FB; border-left: 3px solid var(--navy); padding: 6px 12px; color: var(--navy); }
/* PC(1920×940)で縦にスクロールしない(D243・D252 の #714) —
   上の帯は動かさず、左右の区画がそれぞれ中でスクロールする(S16A と同じ形)。
   iPad(1100px 未満)は今までどおりページごと縦に動く */
@media (min-width: 1101px) {
  .content.s26 { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .content.s26 > .toolbar { flex: 0 0 auto; }
  .content.s26 > .panes { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .s26 .pane-main { overflow: auto; min-height: 0; }
  .s26 .pane-side { overflow: auto; min-height: 0; align-content: start; }
}
.s11 .rates { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.s11 .rates b { color: var(--navy); margin-left: 3px; }

/* 何の行かが分かるように頭に名前を置く(#710 の 1-17) */
.s11 .rates .rates-label { color: var(--navy); font-weight: 600; }

/* ------------------------------------------------------------------
   ①②③の一覧の FlexGrid(#680。design.md 2章「iPad も PC も FlexGrid」)

   S13(.master-list)と同じ見た目・同じ約束を、画面共通の .list-area にも効かせる。
   画面ごとに書き写さない(#680 の 1-1)
   ------------------------------------------------------------------ */
.list-area { flex: 1 1 auto; min-height: 240px; background: #fff; border: 1px solid #E3E7EA; border-radius: 8px; }
.list-area > * { height: 100%; }

/* セルの上下の余白は取る(行の高さの中にボタンを収めるため)。左右の 8px は残す */
.list-area .flexgrid-cell { padding-top: 0; padding-bottom: 0; }

/* 行の文字は選ばせない(#625 の D108)。入力する欄だけは今までどおり選べる */
.list-area .flexgrid-cell { user-select: none; -webkit-user-select: none; }
.list-area .flexgrid-cell input,
.list-area .flexgrid-cell textarea,
.list-area .flexgrid-cell select { user-select: text; -webkit-user-select: text; }

/* セルの中身はセルいっぱいに広げる(見出しは別) */
.list-area .flexgrid-cell > span:not(.col-head) {
  display: flex; align-items: center; width: 100%; height: 100%; min-width: 0;
}

/* 2段のセル(実施予定日の 変更前→変更後・管理番号＋発生日)は縦に並べる */
.list-area .flexgrid-cell > span.stack { flex-direction: column; align-items: flex-start; justify-content: center; }

/* バッジは文字の高さで、セルの中で縦に中央(#684 の23) —
   上の「セル直下の span は高さ 100%」が効いて、バッジがセルいっぱいに伸びていた */
.list-area .flexgrid-cell > span.badge {
  display: inline-flex; align-items: center;
  width: auto; height: auto; align-self: center;
}

/* 一覧の出し方の切替(#635・#684 の5)。幅いっぱいに広げない */
label.checkline > select { width: auto; min-width: 140px; flex: 0 0 auto; }

/* 列の揃え(見出しにも中身にも同じクラスが付く・ListGridCellFactory) */
.list-area .flexgrid-cell.align-left { justify-content: flex-start; text-align: left; }
.list-area .flexgrid-cell.align-center { justify-content: center; text-align: center; }

/* 中の span も同じ向きにそろえる(#684 の22) —
   セルだけを右寄せにしても、中の span が幅いっぱいで左寄せのままだと右寄せに見えない */
.list-area .flexgrid-cell.align-center > span:not(.col-head),
.list-area .flexgrid-cell.align-center .col-head { justify-content: center; }

/* 見出しの左右の余白は中身と同じに(合わせないと見出しだけ 8px 左にずれる) */
.list-area .flexgrid-cell .col-head { box-sizing: border-box; padding: 0 8px; width: 100%; }
.list-area .flexgrid-cell .col-head { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.list-area .flexgrid-cell .col-head .label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; -webkit-user-select: none;
}

/* 文字のセル(切れたら「…」) */
.list-area .flexgrid-cell .cell-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 詳細行の中身(#416)。方式・実施予定期間・理由／内容 */
.list-area .row-detail { display: grid; grid-template-columns: 140px 1fr; gap: 4px 12px; margin: 0; padding: 8px 12px; }
.list-area .row-detail dt { color: var(--muted); }
.list-area .row-detail dd { margin: 0; }

/* 一覧が0件のときの言葉(表の下に出す) */
.empty { color: var(--muted); text-align: center; padding: 12px 0; }

/* S05 実施予定日の 変更前(取消線)→ 変更後 の2段 */
.list-area .flexgrid-cell .planned .before { color: var(--muted); text-decoration: line-through; line-height: 1.3; }
.list-area .flexgrid-cell .planned .after { font-weight: 600; line-height: 1.3; }
.list-area .flexgrid-cell .planned { flex-direction: column; align-items: flex-start; justify-content: center; }

/* 詳細行(#680 の 1-4)。VM の行として挟む(S13 のツリーの子行と同じ作り) —
   FlexGrid には colspan が無いので、先頭の列のセルから中身をはみ出させて1行ぶんに見せる。
   ほかの列のセルは空にして、背景だけを合わせる */
.list-area .flexgrid-cell.detail-row { background: #F7FAFB; overflow: visible; }
.list-area .flexgrid-cell.detail-row > .row-detail {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: max-content; min-width: 100%;
  background: #F7FAFB;
}

/* 詳細行の ▸▾(S13 の操作列のボタンと同じ作り。行を押して開かない) */
.list-area .flexgrid-cell .btn.expand {
  min-width: 28px; padding: 2px 6px; line-height: 1.2;
}

/* 削除の行は左端に赤の線(design.md S22・#448)。
   行の左端のセルだけ(#684 の19。前は行のすべてのセルに線が出ていた) */
.list-area .flexgrid-cell.deleted.col-first { box-shadow: inset 3px 0 0 var(--ng); }

/* 行の色(#684 の4)。HTML の表のときは table.grid tr.xxx > td で書いていたが、
   FlexGrid のセルには当たらない — セルに付く行のクラスで書き直す。
   色だけに頼らず、状態のバッジ・判定のバッジも出す(design.md S06・S19) */
.s06 .list-area .flexgrid-cell.open { background: #FDF5F5; }
.s06 .list-area .flexgrid-cell.waiting { background: #FDFAF2; }
.s05 .list-area .flexgrid-cell.adjust { background: #EEF4FB; }
.s05 .list-area .flexgrid-cell.adjust.col-first { box-shadow: inset 4px 0 0 #2F6FB5; }
.s19 .list-area .flexgrid-cell.ng.col-first { box-shadow: inset 4px 0 0 var(--ng); }
.s19 .list-area .flexgrid-cell.warn.col-first { box-shadow: inset 4px 0 0 var(--warn); }

/* 子行(S06 の階層表示)。字下げと薄い色で親と見分ける */
.list-area .flexgrid-cell.child { background: #F7FAFB; }
.list-area .flexgrid-cell.child .child-no { padding-left: 16px; }

/* 対策元がある行の字下げ(S08・G02) */
.list-area .flexgrid-cell.indent .num { padding-left: 16px; }

/* 折り返さない列(状態・日付・#677 の31・32) */
.list-area .flexgrid-cell .cell-text.nowrap { white-space: nowrap; }

/* 2段のセルの下の段(添え。S10 の発生日・機器) */
.list-area .flexgrid-cell .stack .sub { color: var(--muted); font-size: 12px; line-height: 1.3; }
.list-area .flexgrid-cell .stack .cell-text { line-height: 1.3; width: 100%; }

/* 詳細行の中のボタンは小さく(行の高さに収める・#680 の 1-5 の測り) */
.list-area .row-detail .btn { padding: 2px 10px; line-height: 1.4; }

/* ---- S31 年間カレンダー編集・S32 営業時間設定編集(design.md S31・S32・#327・#607) ---- */
/* ダイアログ(大)＝全画面のモーダル。1200×750(実仕様 1600×1000 DIU の見立て) */
.dialog:has(> .dialog-body.business-hour-edit) { max-width: 1200px; }
.dialog:has(> .dialog-body.calendar-edit) { max-width: 1200px; }
.dialog:has(> .dialog-body.calendar-new) { max-width: 760px; }

/* PC の広い画面では段を2列に並べる(#703 の D243・ユーザー判断 10-07) —
   4段を縦に積むと、最大表示(1920x940)で縦にはみ出していた */
@media (min-width: 1200px) {
  .dialog-body.business-hour-edit {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-content: start;
  }
  .dialog-body.business-hour-edit > .field-group { border-top: none; }
}

/* 4段の見出し。「適用範囲 / 稼働の時刻 / 標準休日 / 毎年の休業日」を段で分ける */
.business-hour-edit .field-group,
.calendar-edit .field-group,
.calendar-new .field-group { border-top: 1px solid var(--line); padding: 10px 0 2px; }
.business-hour-edit .field-group:first-child,
.calendar-edit .field-group:first-child { border-top: none; }
.business-hour-edit .field-group h3,
.calendar-edit .field-group h3 {
  font-size: 15px; color: var(--navy); margin: 0 0 8px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.business-hour-edit .field-group h3 .count,
.calendar-edit .field-group h3 .count { color: var(--muted); font-weight: 400; font-size: 14px; }

/* 注意書き(工場の行があると全社共通は参照されない・#607 の J1) */
.business-hour-edit .notice,
.calendar-new .notice {
  margin: 8px 0 0; padding: 8px 12px; font-size: 14px;
  background: var(--card); border-left: 4px solid #2F6FB5; border-radius: 4px; line-height: 1.6;
}

/* 曜日のチェックは横に並べる(月曜始まり・#579 D49) */
/* 曜日の7つは1行に収める(D405・別紙48 3-19) —
   折り返すと土日だけが2行目に落ちて、曜日の並びに見えなかった。
   1文字の欄なので、すき間と左右の余白を詰める(押せる幅 44px は保つ)。
   それでも入らない幅では折り返す(はみ出させない) */
.business-hour-edit .checkline-group { display: flex; gap: 8px; flex-wrap: wrap; }
.business-hour-edit .checkline-group > .checkline {
  white-space: nowrap; padding: 0 6px; gap: 6px; min-width: 44px; justify-content: center;
}

/* バッジとチェックは文字の幅で(#692 の 3-8)。
   .form-row は縦並びなので、入れたものが欄の幅いっぱいに伸びて
   「必須」「参照のみ」が帯に・「祝日を休みにする」が丸枠の中で上に寄って見えていた */
.business-hour-edit .form-row:has(> .readonly-value),
.business-hour-edit .form-row:has(> label.checkline) {
  flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap;
}
.business-hour-edit .form-row > .badge { align-self: flex-start; }
.business-hour-edit .form-row > label.checkline {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
}

/* 毎年の休業日の表。入力のマス目なので FlexGrid にしない(#635・#650) */
.business-hour-edit .holiday-table { width: 100%; border-collapse: collapse; }
.business-hour-edit .holiday-table th,
.business-hour-edit .holiday-table td { border-bottom: 1px solid var(--line); padding: 4px 8px; }
.business-hour-edit .holiday-table thead th { background: var(--card); color: var(--navy); font-size: 14px; }
.business-hour-edit .holiday-table input[type="text"] { width: 100%; min-width: 120px; }
/* 月・日のプルダウンは横に2つ並べる(#327)。幅を決めないと欄いっぱいに伸びて2段になる */
.business-hour-edit .holiday-table select { width: 92px; min-width: 92px; display: inline-block; }
.business-hour-edit .holiday-table select + select { margin-left: 6px; }
.business-hour-edit .holiday-table td:nth-child(2),
.business-hour-edit .holiday-table td:nth-child(3),
.business-hour-edit .holiday-table th:nth-child(2),
.business-hour-edit .holiday-table th:nth-child(3) { width: 200px; white-space: nowrap; }
.business-hour-edit .holiday-table th:nth-child(4),
.business-hour-edit .holiday-table td:nth-child(4) { width: 72px; white-space: nowrap; }
.business-hour-edit .holiday-table th:nth-child(5),
.business-hour-edit .holiday-table td:nth-child(5) { width: 96px; }
.business-hour-edit .holiday-table .detail-row td { border-bottom: none; padding-top: 0; }
/* 止まる例は行の下に赤で出す(design.md S32) */
.business-hour-edit .holiday-table .detail-row .message { color: var(--ng); font-size: 13px; }
.business-hour-edit .message { color: var(--ng); margin: 4px 0 0; font-size: 14px; }
.business-hour-edit .warning { color: #6B4A0B; }

/* S31 のツールバー(休業日 n 日 / 稼働日 n 日 ／ 作成方法 ／［ルールを再適用］) */
.calendar-edit .calendar-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
}
.calendar-edit .calendar-toolbar .count { color: var(--navy); font-weight: 600; }
.calendar-edit .calendar-toolbar .toolbar-actions { margin-left: auto; }

/* 凡例。色で「なぜ休業日なのか」を見せる(design.md S31) */
.calendar-edit .calendar-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.calendar-edit .calendar-legend .legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.calendar-edit .calendar-legend .legend::before {
  content: ""; width: 14px; height: 14px; border: 1px solid var(--line); border-radius: 2px;
}
.calendar-edit .calendar-legend .standard::before { background: #BFD4E8; }
.calendar-edit .calendar-legend .public::before { background: #F3C9C9; }
.calendar-edit .calendar-legend .annual::before { background: #F5DFA8; }
.calendar-edit .calendar-legend .year-only::before { background: #C9E3C9; }
.calendar-edit .calendar-legend .workday::before { background: #FFFFFF; }
.calendar-edit .calendar-legend .adjusted::before { background: #FFFFFF; border: 2px solid var(--navy); }

/* 12か月 × 31日。行＝月・列＝日・セル 28×22(#327)。月名の列 80px で横スクロールは出ない */
.calendar-edit .calendar-grid { border-collapse: collapse; table-layout: fixed; }
.calendar-edit .calendar-grid th,
.calendar-edit .calendar-grid td {
  width: 28px; height: 22px; padding: 0; border: 1px solid var(--line); font-size: 11px;
}

/* PC の広い画面では1マスを少し低くする(#703 の D243) — 12か月ぶんが縦に収まらなかった */
@media (min-width: 1200px) {
  .calendar-edit .calendar-grid th,
  .calendar-edit .calendar-grid td { height: 18px; }
}
.calendar-edit .calendar-grid thead th { background: var(--card); color: var(--navy); font-weight: 600; }
.calendar-edit .calendar-grid tbody th { width: 80px; background: var(--card); color: var(--navy); padding: 0 6px; }
/* 1マスのボタンは表のマスの高さに従う(#703 の D243。既定の min-height だと高さが縮まない) */
.calendar-edit .calendar-grid .day {
  width: 100%; height: 100%; min-height: 0; border: none; background: none; cursor: pointer; padding: 0;
}
.calendar-edit .calendar-grid td.standard { background: #BFD4E8; }
.calendar-edit .calendar-grid td.public { background: #F3C9C9; }
.calendar-edit .calendar-grid td.annual { background: #F5DFA8; }
.calendar-edit .calendar-grid td.year-only { background: #C9E3C9; }
.calendar-edit .calendar-grid td.workday { background: #FFFFFF; }
/* 人が触った日は枠線を変える — ［ルールを再適用］で消えるのはこの分だけ(design.md S31) */
.calendar-edit .calendar-grid td.adjusted { box-shadow: inset 0 0 0 2px var(--navy); }
/* 存在しない日はセルを描かない(空白で埋め、詰めない・#327) */
.calendar-edit .calendar-grid td.no-day { background: #F2F4F6; border-color: #F2F4F6; }

/* フッターの「この年だけの調整 n 件」は左に寄せる */
.dialog-actions .count { margin-right: auto; color: var(--navy); font-weight: 600; }

/* ---- S28 分類整理(design.md S28・#302・#467・#497・#614) -------------------- */
/* ①②③と共通のヘッダー・タブ行の下のページ(S15 と同じ)。［閉じる］は置かない */
.s28 .page-head-right { margin-left: auto; }

/* 帯。自動整理の結果・通知の宛先(宛先0件は赤) */
.s28 .band {
  margin: 0 0 8px; padding: 8px 12px; font-size: 14px; line-height: 1.6;
  background: var(--card); border-left: 4px solid #2F6FB5; border-radius: 4px;
}
.s28 .band.mute { border-left-color: var(--line); color: var(--muted); }
.s28 .band.warn { background: #FFF9F8; border-left-color: var(--ng); color: #7A1F1F; }
.s28 .band a { margin-left: 10px; }

/* セグメント3つ(不具合分類／対策分類／原因分類)。
   クラス名を .seg にしない — shared.css の .seg は AssistPanel のタブ専用で、広い画面では消える */
.s28 .segs { display: inline-flex; gap: 0; background: none; padding: 0; }
.s28-seg {
  border: 1px solid var(--line); background: #fff; padding: 6px 14px; cursor: pointer;
  color: var(--navy); min-height: var(--tap); font-size: 14px;
}
.s28-seg:first-child { border-radius: 6px 0 0 6px; }
.s28-seg:last-child { border-radius: 0 6px 6px 0; }
.s28-seg + .s28-seg { border-left: none; }
.s28-seg.on { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; }

/* 左が一覧・右が明細(design.md S28 の画面の構成) */
/* ⓘ の吹き出し(C1Tooltip)は、モーダル用の暗い覆いを出さない(D390・別紙48 3-6) —
   ホバーしただけで画面全体が暗くなっていた(C1 の popup は .overlay を
   rgba(0,0,0,.4) ＋ position:fixed ＋ inset:0 で敷く)。
   覆いは触れない層(pointer-events:none)なので、透明にしても押せる・押せないは変わらない */
.c1tooltip-popup > .overlay { background: transparent; }

/* 表の高さで1ページの件数を決める(D356 の #731)。
   親が縦に伸びないと、表の高さが min-height(240px)のままになり、
   1ページ4行で止まって表の下が空いていた(D387・別紙48 3-3)。
   S13(.master-list)と同じ形にして、器の高さを画面から配る */
.content.s28 { display: flex; flex-direction: column; min-height: 0; }
.content.s28 > * { flex: 0 0 auto; }
.s28 .s28-body { display: flex; gap: 14px; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.s28 .s28-list { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.s28 .s28-list > .list-area { flex: 1 1 auto; min-height: 240px; overflow: auto; }
/* 表そのものは中身の高さのまま(.list-area > * の height:100% を外す) —
   伸ばすと行が間延びして、3行で画面いっぱいになる(D387 の直しの副作用) */
.s28 .s28-list > .list-area > table { height: auto; }
/* 右の詳細は中身の高さのまま(上にそろえる) */
.s28 .s28-detail { align-self: flex-start; }
.s28 .s28-detail {
  flex: 0 0 430px; background: var(--card); border-radius: 8px; padding: 12px 14px;
}
.s28 .s28-detail h3 { margin: 0 0 4px; font-size: 16px; color: var(--navy); }
.s28 .s28-detail h4 { margin: 0 0 6px; font-size: 14px; color: var(--navy); }
.s28 .s28-detail .pane {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.s28 .s28-detail .pane.ai { background: #F7FAFF; border-radius: 6px; padding: 10px 12px; border-top: none; }
.s28 .s28-detail input[type="text"],
.s28 .s28-detail select { width: 100%; }

/* 操作のボタンは折り返して並べる */
.s28 .s28-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* 一覧は入力のマス目ではないが、S28 は HTML の表(FlexGrid を持たない・#635) */
.s28 .organize-table,
.s28 .merge-table { width: 100%; border-collapse: collapse; }
.s28 .organize-table th,
.s28 .organize-table td,
.s28 .merge-table th,
.s28 .merge-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; }
.s28 .organize-table thead th,
.s28 .merge-table thead th { background: var(--card); color: var(--navy); font-size: 14px; white-space: nowrap; }
.s28 .organize-table tbody tr { cursor: pointer; }
.s28 .organize-table tbody tr:hover { background: #F7FAFB; }
.s28 .organize-table tbody tr.selected { background: #EAF2FB; }
.s28 .merge-table { font-size: 13px; }
.s28 .merge-table th,
.s28 .merge-table td { padding: 6px 6px; }
.s28 .merge-table td:nth-child(2),
.s28 .merge-table td:nth-child(3) { white-space: nowrap; }
.s28 .merge-table .btn { padding: 2px 10px; white-space: nowrap; }

/* ---- S29 設備更新引継ぎ / S30 機器更新引継ぎ(design.md S29/S30・#616 J1・画面の回⑲ の4) ---- */
/* 登録のウィザードだけ全画面モーダル。画面イメージの枠は 1200 — Step2 の2つの表が横に切れないように */
.dialog:has(> .dialog-body.s29) { max-width: 1200px; }
.s29 { display: flex; flex-direction: column; min-height: 0; gap: 8px; }

/* 段(新しい設備の登録 → 引継ぎ内容の確認 → 完了)。S14 と同じ見た目にそろえる */
.s29 .steps { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0 0 4px; padding: 0; }
.s29 .steps li { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.s29 .steps li .no {
  width: 22px; height: 22px; border-radius: 50%; background: #EEF1F4; color: #8A949E;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.s29 .steps li.on { color: var(--navy); font-weight: 700; }
.s29 .steps li.on .no { background: var(--navy); color: #fff; }
.s29 .steps li.done .no { background: #CFE0D8; color: #0F6E56; }

.s29 .req { color: var(--ng); margin-left: 3px; }
.s29 .s29-form .form-row { margin-bottom: 8px; }
.s29 .s29-form input[type="text"] { width: 100%; box-sizing: border-box; }
.s29 .s29-form input.w6 { width: 170px; }
.s29 .field-group { margin-top: 12px; }
.s29 .field-group h3 { margin: 0 0 6px; font-size: 14px; color: var(--navy); }
.s29 table.grid { width: 100%; font-size: 14px; }
.s29 table.grid th { white-space: nowrap; }
.s29 .s29-done .done-head { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.s29 ul.warning { margin: 0 0 8px; padding: 9px 13px 9px 30px; }

/* ［今すぐ実施］で実施した行(D376 の #733)。替えた絞り込みの中で「いま押した行」が分かるように。
   FlexGrid のセルは画面の入れ物の外に描かれるので、画面のクラスで絞らず、
   セルのクラスだけで当てる(ほかの .hit は FlexGrid のセルではない) */
.flexgrid-cell.hit { background: #FFF8E1 !important; }

/* 引継ぎ予定の一覧(ページ。S13・S21 から入る・#616 J1) */
.s29-list .plan-table { width: 100%; border-collapse: collapse; }
.s29-list .plan-table th,
.s29-list .plan-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; }
.s29-list .plan-table thead th {
  background: var(--card); color: var(--navy); font-size: 14px; white-space: nowrap;
}
.s29-list .plan-table td.act { white-space: nowrap; }
.s29-list .plan-table td.act .btn { padding: 2px 10px; margin-right: 4px; white-space: nowrap; }
.s29-list .plan-table td.act .muted { color: var(--muted); font-size: 13px; }
/* 行の操作の確認(［元に戻す］［取消］［今すぐ実施］［予定日の変更］［再開］)。
   画面の中央に出す(D532 の #773・ユーザーの操作確認 10-16) —
   前は一覧の下に続けて出していたので、行が多いと確認のボタンが画面の外に出て、
   スクロールしないと押せなかった。ほかの確認(ダイアログ)と同じく中央に置く。
   中身が多いときはこの箱の中だけが動く(ボタンは下に付いたまま) */
.s29-list .confirm {
  /* 画面の真ん中に置く。transform は使わない —
     transform の付いた要素は中の position: fixed の基準になるので、
     後ろを暗くする ::before が箱の大きさまでしか広がらない */
  position: fixed; inset: 0; margin: auto; z-index: 40;
  width: min(560px, calc(100vw - 32px)); height: max-content; max-height: 80vh; overflow: auto;
  border: 1px solid #E6EEF5; border-radius: 8px; background: #fff; padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(16, 36, 56, .28);
}
/* 後ろを暗くする(押し間違いを防ぐ)。箱の中(::before)に敷くと、箱の白まで暗く透ける
   (D539 の #775) — 負の z-index の子は、親の背景より「上」に描かれるため。
   一覧の側に敷き、箱(z-index: 40)より後ろ(30)に置く */
.s29-list:has(.confirm)::before {
  content: ''; position: fixed; inset: 0; z-index: 30; background: rgba(16, 36, 56, .35);
}
.s29-list .confirm h3 { margin: 0 0 6px; font-size: 15px; color: var(--navy); }
.s29-list .confirm .actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---- S34 ライセンス(design.md S34・#793・#832 の #27) ---- */
/* S17 と同じページの枠。帯の見た目は S17 のものをそのまま使う(2つ目を作らない) */
.s34 .page-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.s34 .band {
  margin: 0 0 8px; padding: 8px 12px; font-size: 14px; line-height: 1.6;
  background: var(--card); border-left: 4px solid #2F6FB5; border-radius: 4px;
}
.s34 .band.ok { background: #F2F8F4; border-left-color: var(--ok); }
.s34 .band.mute { border-left-color: var(--line); color: var(--muted); }
.s34 .band.warn { background: #FFFBF2; border-left-color: var(--warn); color: #7A5A1F; }
.s34 .band.err { background: #FFF9F8; border-left-color: var(--ng); color: #7A1F1F; }
.s34 .band .hint { margin-left: 10px; }

/* ライセンスの中身(読み取りだけの2列。row-detail と同じ組み方) */
.s34 .kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 12px; margin: 0; max-width: 720px; }
.s34 .kv dt { color: var(--muted); }
.s34 .kv dd { margin: 0; }

/* ---- S17 サーバー状態監視(design.md S17・#302・#303・#311・#496・#618・画面の回⑳ の3) ---- */
/* ①②③と共通のヘッダー・タブ行の下のページ(S13・S28 と同じ枠)。参照専用 */
.s17 .page-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 全体の状態と通知の帯(S28 と同じ見た目にそろえる) */
.s17 .band {
  margin: 0 0 8px; padding: 8px 12px; font-size: 14px; line-height: 1.6;
  background: var(--card); border-left: 4px solid #2F6FB5; border-radius: 4px;
}
.s17 .band.ok { background: #F2F8F4; border-left-color: var(--ok); }
.s17 .band.mute { border-left-color: var(--line); color: var(--muted); }
.s17 .band.warn { background: #FFFBF2; border-left-color: var(--warn); color: #7A5A1F; }
.s17 .band.err { background: #FFF9F8; border-left-color: var(--ng); color: #7A1F1F; }
.s17 .band .hint { margin-left: 10px; }
.s17 .band a { margin-left: 10px; }
.s17 ul.warning { margin: 0 0 8px; padding: 9px 13px 9px 30px; }

/* 件数タイル(動いている処理・遅れ・今日 失敗・いちばん近い実行・再生成が必要) */
.s17 .tiles { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.s17 .tile {
  flex: 1 1 0; min-width: 150px; border: 1px solid #E6EEF5; border-radius: 8px; background: #fff;
  padding: 8px 12px;
}
.s17 .tile .k { display: block; font-size: 13px; color: var(--muted); }
.s17 .tile .v { display: block; font-size: 20px; font-weight: 700; color: var(--navy); }
.s17 .tile.warn { border-color: #E8D7B7; background: #FFFBF2; }
.s17 .tile.warn .v { color: var(--warn); }
.s17 .tile.err { border-color: #E8B7B7; background: #FDF5F5; }
.s17 .tile.err .v { color: var(--ng); }

/* 処理の一覧(10行固定の表。切替は置かない・#688) */
.s17 .process-table { width: 100%; border-collapse: collapse; }
.s17 .process-table th,
.s17 .process-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; }
.s17 .process-table thead th {
  background: var(--card); color: var(--navy); font-size: 14px; white-space: nowrap;
}
.s17 .process-table tbody tr { cursor: pointer; }
.s17 .process-table tbody tr:hover { background: #F7FAFB; }
.s17 .process-table tbody tr.selected { background: #EAF2FB; }
.s17 .process-table tbody tr.failed { background: #FDF5F5; }
.s17 .process-table tbody tr.unused { color: var(--muted); }

/* 処理ID は主の処理名のうしろに小さい灰色で(判断1・#297 の唯一の例外) */
.s17 .pid { margin-left: 6px; font-size: 12px; color: var(--muted); }

/* エラーの内容(失敗した行を選ぶと出る) */
.s17 .pane { margin-top: 12px; padding: 10px 12px; border: 1px solid #E6EEF5; border-radius: 8px; background: #fff; }
.s17 .pane.err { border-color: #E8B7B7; background: #FDF5F5; }
.s17 .pane h3 { margin: 0 0 6px; font-size: 15px; color: var(--navy); }
.s17 .pane p { margin: 0 0 4px; }

/* 文節で折る(#534・#708 の 2-20)。この中では折らない */
.nb { white-space: nowrap; }

/* S26 の［AIに聞く］は右の列のいちばん上(#710 の 3-7)。
   会話だけ中でスクロールさせ、入力欄と［聞く］は常に見える位置に(D243: 1920×940 で縦にスクロールしない) */
.s26 [data-testid="s26-ask"] .turns { max-height: 180px; overflow-y: auto; }
.s26 [data-testid="s26-ask"] input[type="text"] { width: 100%; }

/* 知らせの本文は改行をそのまま出す(#710 の 3-8。［過去の会話］が1つの段落になっていた) */
.dialog-message .dialog-body { white-space: pre-line; }

/* 3択の × は「やめる」(#710 の 1-3・D214)。見出しの右の端に重ねる —
   置き場所を決めないと、見出しの上に白い帯ができて × だけが浮いていた */
.dialog-message { position: relative; }
.dialog-message .dialog-close {
  position: absolute; top: 6px; right: 8px;
  width: 28px; height: 28px; padding: 0; line-height: 1;
  background: transparent; border: 0; border-radius: 4px;
  color: #fff; font-size: 20px; cursor: pointer;
}
.dialog-message .dialog-close:hover { background: rgba(255, 255, 255, .18); }

/* S02 の一覧(FlexGrid・#711 の別紙35 2-1)。
   行の色は HTML の表のときと同じ(期間超過＝赤・実施期間＝黄・shared.css の tr.state-* と同じ色) */
.s02 .grid-host .flexgrid-cell.state-over { background: #FDECEA; }
.s02 .grid-host .flexgrid-cell.state-active { background: #FFF8E1; }
/* 周期未確定は灰(#783 の D568・design.md S02 の状態の色)。文字も薄くする(画面イメージと同じ) */
.s02 .grid-host .flexgrid-cell.state-undet { background: #F2F4F5; color: var(--muted); }

/* 1列目は2段(#374)。上にライン／設備／機器(#845 の D823)・下にメンテナンス項目 */
.s02 .grid-host .cell-two { display: flex; flex-direction: column; justify-content: center;
  gap: 2px; line-height: 1.3; width: 100%; }
.s02 .grid-host .cell-two small {
  color: var(--muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 項目名は3行まで折り返し、超えたら「…」(#845 の D825)。
   行の高さは画面が行数から決める(Preventive.razor の ListRowHeightOf) —
   高くしないと FlexGrid のセルから下がはみ出して消える */
.s02 .grid-host .cell-two > .name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; white-space: normal; word-break: break-word;
}
/* 状態の列(#845 の D818・D820)。iPad は「期間超過」の下に「17 日超過」を2段で出す。
   左に余白を置いて、実施予定期間の列とくっつけない */
.s02 .grid-host .cell-state {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  width: 100%; padding-left: 8px; box-sizing: border-box;
}
.s02 .grid-host .cell-state.narrow { flex-direction: column; align-items: flex-start;
  justify-content: center; gap: 2px; }
/* iPad(1100px 未満)の詳細行(#416・#714 の 2-9)。担当者と「n 日超過」をここへ逃がす。
   FlexGrid には colspan が無いので、先頭の列のセルから中身をはみ出させて1行ぶんに見せる */
.s02 .grid-host .flexgrid-cell.detail-row { background: #F7FAFB; overflow: visible; }
.s02 .grid-host .flexgrid-cell.detail-row > .detail {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  width: max-content; min-width: 100%; height: 100%;
  /* 左は ▸ の列(44px)＋セルの余白(10px)ぶん下げて、上の段のメンテナンス項目と同じ始まりにする
     (#870 の D869・ユーザーの操作確認「2段目が左に寄り過ぎている」) */
  padding: 0 10px 0 54px; background: #F7FAFB; color: var(--muted); font-size: 14px;
}
/* 詳細行を開く ▸▾(行を押して進まないように、クリックは止めてある) */
.s02 .grid-host .chev {
  background: none; border: 0; cursor: pointer; color: var(--navy);
  min-width: 28px; padding: 2px 6px; line-height: 1.2;
}

/* S06 の iPad の詳細行(不具合内容(要約)・事象・分類)と ▸▾
   (J1 の #753・O1 の #757。S02 と同じ作り)。
   FlexGrid には colspan が無いので、先頭の列のセルから中身をはみ出させて1行ぶんに見せる。
   はみ出す幅は画面の中までに留める — 越えると横スクロールの先に出て読めない(#752 の D403)。
   中身は折り返して全文を出す(D475) — 1行で切り詰めていたので長い要約が読めなかった。
   高さは画面が行数から決める(MaintenanceLog.razor の DetailRowHeight) */
.s06 .list-area .flexgrid-cell.detail-row { background: #F7FAFB; overflow: visible; }
.s06 .list-area .flexgrid-cell.detail-row > .detail {
  position: absolute; left: 0; top: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  width: calc(100vw - 80px); min-width: 100%; max-width: calc(100vw - 80px); height: 100%;
  padding: 5px 10px; background: #F7FAFB; color: var(--muted); font-size: 14px;
  white-space: normal; overflow: hidden; line-height: 1.4;
}
.s06 .list-area .flexgrid-cell.detail-row > .detail .label {
  color: var(--navy); font-weight: 600; margin-right: 8px;
}

/* 詳細行を開く ▸▾(行を押して進まないように、クリックは止めてある)。
   既定のボタンの余白のままだと 44px の列に収まらない(S02 と同じ詰め方) */
.s06 .list-area .chev {
  background: none; border: 0; cursor: pointer; color: var(--navy);
  min-width: 28px; padding: 2px 6px; line-height: 1.2;
}

/* 一覧の出し方の切替(スクロール／ページ送り) */
.s02 .list-head { display: flex; align-items: center; gap: 10px; margin: 8px 0; }

/* S14 のプレビュー(FlexGrid・#711 の別紙35 2-2)。
   間違いの行・状態の色は HTML の表のときと同じ(上の .s14 table.g tr.* と同じ色) */
.s14 .grid-host .flexgrid-cell.bad { background: #FDF4F4; }

/* 間違いの理由は幅に収まらない分を省略記号で切り、全文はホバーで読む(D287 の #718)。
   FlexGrid のセルは高さが固定なので、display: block で縦に積むと2行目から下が消えていた —
   1行に並べて切る。理由が2つ以上あるときは「 / 」で区切る */
.s14 .grid-host .flexgrid-cell .msg,
.s14 .grid-host .flexgrid-cell .cell-text {
  display: block; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s14 .grid-host .flexgrid-cell .msg > span + span::before { content: " / "; color: var(--muted); }
.s14 .grid-host .flexgrid-cell .msg .bad { color: var(--ng); }
.s14 .grid-host .flexgrid-cell .msg .nt { color: #854F0B; }
/* 新規・更新などの色は状態の列だけ(載せ替え前の tr.new td.st と同じ・D250 の #714) —
   RowClasses は行の全セルに付くので、状態の列の span(.st)で絞る */
.s14 .grid-host .flexgrid-cell.new .st { color: #0F6E56; }
.s14 .grid-host .flexgrid-cell.upd .st { color: #106EBE; }
.s14 .grid-host .flexgrid-cell.off .st,
.s14 .grid-host .flexgrid-cell.rm .st { color: #854F0B; }
/* 「変更なし」の行は薄く(載せ替え前の tr.same td と同じ・D250 の #714) */
.s14 .grid-host .flexgrid-cell.same { color: var(--muted); }

/* 入っている値が空になる欄(#856 の D856・ユーザーの提案)。
   その欄だけ警告色にして、どこが消えるのかを見せる(行ごとの色ではない) */
.s14 .grid-host .flexgrid-cell .cell-text.blank {
  background: #FFF4E5; color: #6B3F00; border-radius: 4px; padding: 0 4px;
}

/* 空になる欄の選び(#856 の D856)。選ぶボタンは S04 の良否と同じ見た目(#858 の #43) —
   ふつうのボタンの地と枠のまま、選んでいるほうを白地＋濃紺の枠にする(新しい色は足さない) */
.s14 .warning.blanks { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.s14 .warning.blanks p { margin: 0; }
.s14 .warning.blanks .choice { display: flex; gap: 8px; background: none; border: 0; padding: 0; }
.s14 .warning.blanks .choice .btn.on {
  background: #fff; border-color: var(--navy); color: var(--navy); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* iPad のタップ領域は 44px 以上(0章・#357・#711 の別紙36 の 3-2)。
   表示切替(一覧／ガント／カレンダー)が 34px で、指では押しにくかった */
@media (max-width: 1100px) {
  .modeseg button { min-height: var(--tap); border-radius: 20px; }
}

/* S33 使い方を聞く(#787・#828)。ヘッダーの［?］から開くダイアログ。
   要約は長いので中だけを縦にスクロールし、本文は折り返す(pre の既定は折り返さない) */
.dialog-body.s33 { width: min(760px, 92vw); max-height: 70vh; overflow-y: auto; }
.dialog-body.s33 .muted { color: #5a6b7a; font-size: 14px; margin: 0 0 6px; }
.dialog-body.s33 .turns { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dialog-body.s33 .turn { margin: 0; padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; }
.dialog-body.s33 .turn.you { background: #EEF3F8; }
.dialog-body.s33 .turn.ai { background: #F7F7F5; border: 1px solid var(--line); }
.dialog-body.s33 .ask { display: flex; gap: 8px; align-items: center; }
.dialog-body.s33 .ask .question { flex: 1 1 auto; min-width: 0; }
.dialog-body.s33 .btn.link { background: transparent; border: 0; color: var(--navy); text-decoration: underline; padding: 6px 0; min-width: auto; }
.dialog-body.s33 .guide { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.dialog-body.s33 .guide .keyword { width: 100%; }
.dialog-body.s33 .guide .hits, .dialog-body.s33 .guide .toc { margin: 8px 0 0; padding-left: 18px; }
.dialog-body.s33 .guide .hits li, .dialog-body.s33 .guide .toc li { margin-bottom: 4px; }
.dialog-body.s33 .guide .chapter {
  white-space: pre-wrap; font-family: inherit; font-size: 14px; margin: 6px 0 0;
  background: #F7F7F5; border: 1px solid var(--line); border-radius: 6px; padding: 8px;
}