/* モック(mock.css)への追加分。実装側で必要になった要素だけを足す。 */

/* ヘッダー・パンくず・戻るは button ではなく a[href] にした(中クリックや
   ⌘/Ctrl+クリックで新しいタブに開けるようにするため)。見た目は mock.css の
   .gnav button / .btn をそのまま踏襲する */
.gnav a { display: flex; align-items: center; height: 56px; padding: 0 12px;
  font-weight: 500; color: var(--grey-600); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px; }
.gnav a:hover { color: var(--grey-900); }
.gnav a[aria-current="page"] { color: var(--primary); border-color: var(--primary);
  font-weight: 700; }
a.btn { text-decoration: none; }

/* レビュー画面を3ペインにする(左:指摘 / 中央:ビューア / 右:詳細+AIの視点+チャット) */
/* 行を明示しないと、固定高さのグリッドがヘッダー行にも余白を等分してしまう */
/* 行: ヘッダー / 失敗の告知(出ていなければ 0) / 3ペイン(間に 5px の仕切り) */
/* 各区画の幅は CSS 変数。仕切りをドラッグすると JS がこの変数を要素の style に
   書く(localStorage に覚える)ので、ここの値は初期値 */
.rv { --pane-l: 230px; --pane-r: 380px;
  grid-template-columns: var(--pane-l) 5px minmax(0, 1fr) 5px var(--pane-r);
  grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; }
/* 行は明示する。失敗の告知(.rv-error)は普段 display:none で格子の枠を占めないため、自動配置だと
   3 つのペインが 2 行目(内容ぶんの高さ)に入り、3 行目(残り全部)が空のまま下に残っていた。
   中身が読み込まれると内容が高くなって隠れるが、取得中(骨組み)はペインが下まで届かなかった */
.rv > .rv-hd { grid-row: 1; }
.rv > .rv-error { grid-row: 2; }
.rv > .pane-l, .rv > .pane-c, .rv > .pane-r, .rv > .gutter { grid-row: 3; }

/* .rv > * が display:flex を当てているので、hidden 属性だけでは消えない */
.rv-error { grid-column: 1 / -1; padding: 10px 20px 0; overflow: visible !important; }
.rv-error[hidden] { display: none !important; }
/* 製品画面の追加・編集。見出し右のボタン列と、カード上の小さな「編集」 */
.ph-act { display: flex; gap: 8px; align-items: center; flex: none; }
.folder .ex-edit, .pcard .ex-edit { margin-left: auto; flex: none; opacity: 0; transition: opacity .12s; }
.folder:hover .ex-edit, .pcard:hover .ex-edit, .ex-edit:focus-visible { opacity: 1; }
.pcard .pfoot .ex-edit { margin-left: 4px; }
.btn.danger-armed { background: #b91c1c; color: #fff; border-color: #b91c1c; }

/* 読み込み中の帯(上端)。GET の往復が 150 ms を超えたら出す */
#loadbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; overflow: hidden;
  background: color-mix(in srgb, var(--primary) 20%, transparent); pointer-events: none; }
#loadbar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: var(--primary); animation: loadbar-run 1s linear infinite; }
#loadbar[hidden] { display: none; }
@keyframes loadbar-run { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { #loadbar::before { animation: none; left: 0; width: 100%; opacity: .6; } }
/* 押したカード・行。次の画面が出るまで薄くして「押せた」と分かるようにする */
.busy { opacity: .55; cursor: progress; }

/* サインインの覆い: inline の display を書くと hidden 属性が効かなくなるので、表示はここで決める */
#signin { display: flex; }
#signin[hidden] { display: none !important; }
.notice-ng { background: var(--red-50); border-color: var(--red-100);
  color: var(--red-1000); }
@media (max-width: 1400px) { .rv { --pane-l: 210px; --pane-r: 330px; } }

/* 仕切り(VS Code 風)。普段は透明で、触れるかドラッグ中だけ細い帯が出る */
.gutter { position: relative; flex: none; z-index: 5; background: transparent; }
.gutter-v { cursor: col-resize; width: 5px; }
.gutter-h { cursor: row-resize; height: 5px; }
.gutter::after { content: ""; position: absolute; inset: 0; background: var(--primary);
  opacity: 0; transition: opacity .12s ease .15s; }
.gutter:hover::after, .gutter.drag::after { opacity: 1; transition-delay: 0s; }
.gutter:focus-visible { outline: none; }
.gutter:focus-visible::after { opacity: .5; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .gutter::after { transition: none; } }
/* 仕切りの真ん中に元の境界線(1px)を引いて、見た目は今までと変えない */
.gutter-v::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 1px;
  background: var(--grey-300); }
.gutter-h::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px;
  background: var(--grey-200); }
.rv > .gutter { background: var(--grey-100); }
.rv > #gutL::before { display: none; }          /* .pane-l の border-right がある */
.rv > #gutR::before { display: none; }          /* .pane-r の border-left がある */
/* ドラッグ中は文字の選択や画像のドラッグを止め、カーソルを仕切りのままにする */
body.splitting { user-select: none; -webkit-user-select: none; }
body.splitting-x { cursor: col-resize; }
body.splitting-y { cursor: row-resize; }
body.splitting img { pointer-events: none; }

/* 狭い画面では右ペインを引き出しにする。以前はここで display:none にしていたが、
   判定の上書き・チャット・AIの視点への到達手段が丸ごと消えていた */
.paner-toggle { display: none; }
@media (max-width: 1100px) {
  .rv { --pane-l: 200px; grid-template-columns: var(--pane-l) 5px minmax(0, 1fr); }
  .rv > #gutR { display: none; }
  .paner-toggle { display: inline-flex; }
  .pane-r { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw);
    z-index: 40; background: var(--grey-50); border-left: 1px solid var(--grey-300);
    box-shadow: -8px 0 24px rgba(0,0,0,.12); transform: translateX(100%);
    transition: transform .18s ease; }
  body.paner-open .pane-r { transform: none; }
  body.paner-open::after { content: ""; position: fixed; inset: 0; z-index: 39;
    background: rgba(0,0,0,.18); }
}
@media (prefers-reduced-motion: reduce) { .pane-r { transition: none; } }
.rv-hd .check { margin-left: 8px; }
/* 長い文言が入っても案件名を潰さない */
.rv-hd .title { min-width: 0; }
.rv-hd .title #rvTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-hd .chip { flex: none; max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.rv-hd kbd, .pane-foot kbd { border: 1px solid var(--grey-300); border-radius: 3px;
  padding: 0 5px; font-size: 11px; }
/* 左ペインは 230px しかない。件数と J/K の案内が一行に並ばないと、
   justify-content:space-between のまま右側だけが縦一列に潰れる。
   二行に折り返して、各行の中では折り返さないようにする */
.pane-foot { flex-wrap: wrap; gap: 2px 8px; }
.pane-foot > span { white-space: nowrap; }

/* ページ画像ビューア(実ファイルのレンダリング + 指摘箇所の枠) */
.pageimg { position: relative; background: #fff; border: 1px solid var(--grey-300);
  margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.pageimg img { display: block; width: 100%; height: auto; }
/* 拡大時は横にもスクロールさせる(A3図面は等倍では文字が読めない) */
.doc-body { overflow: auto; }
.zoom { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; }
.zoom button { border: 1px solid var(--grey-300); background: #fff; border-radius: 4px;
  min-width: 22px; height: 22px; line-height: 1; cursor: pointer; font-size: 12px;
  color: var(--grey-900); }
.zoom button:hover { background: var(--grey-100); }
.zoom .lv { font-size: 11px; color: var(--grey-600); min-width: 38px; text-align: center;
  font-variant-numeric: tabular-nums; }
/* 指摘の枠。位置と大きさ(%)は実測の語のままにし、見える線は ::before に描く。
   図面側の枠は 1 語(「9」「C1」など数 pt)のことがあり、そのまま描くと A3 の上では点にしか
   見えない。::before を語の中心に置いて最小 28×22 px を保証し、白い縁取りで線の中でも目立たせる。
   拡大しても最小寸法は画面上の px なので、寄れば実測の枠に収束する */
.pagebox { position: absolute; pointer-events: none; }
.pagebox::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: 28px; min-height: 22px; box-sizing: border-box;
  border: 2px solid var(--red-800); background: rgba(236,0,0,.10); border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
.pagebox.hold::before { border-color: var(--yellow-900); background: rgba(183,143,0,.12); }
.pagebox.ok::before { border-color: var(--green-700); background: rgba(29,139,86,.10); }
/* 札は枠の外側の上。枠が最小寸法まで広がるときは、その分だけ上に逃がす */
.pagebox .pintag { position: absolute; top: min(-16px, calc(50% - 27px)); right: min(-2px, calc(50% - 16px));
  background: var(--red-800);
  color: #fff; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 999px;
  line-height: 16px; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; }
.pagebox.hold .pintag { background: var(--yellow-900); }
.pagebox.ok .pintag { background: var(--green-700); }
.docempty { display: grid; place-items: center; min-height: 320px; color: var(--grey-536);
  font-size: 12px; text-align: center; padding: 24px; }

/* 右ペイン: 上に指摘の詳細(+スレッド)、下に AI とのやりとり、入力欄。
   詳細を縮めると判定を上書きする OK/NG/確認 のボタンが切れて操作が見えなく
   なるので、詳細は内容ぶん(上限 46%)を取り、やりとりが残りを埋める */
.pane-r { overflow: hidden; }
.pane-r .det-wrap { overflow: auto; max-height: 46%; flex: 0 0 auto; min-height: 0;
  display: flex; flex-direction: column; }
/* 仕切りをドラッグしたら、詳細はその高さに固定(0 まで縮められる。
   AI とのやりとりだけを見たいとき)。ダブルクリックで上の既定に戻る */
.pane-r.det-sized .det-wrap { flex: 0 0 var(--det-h); max-height: none; }
/* AI とのやりとりがまだ無い(検図前)ときは仕切りも出さない */
.pane-r:has(#rvFeed[hidden]) > #gutDet { display: none; }
/* 左右の書類の仕切り。ドラッグ後は左の幅を viewer 幅の % で持つ */
.viewer { gap: 0; grid-template-columns: minmax(0, var(--doc-l, 1fr)) 5px minmax(0, 1fr); }
.viewer > .gutter { background: #fff; }
.pane-r .det-wrap .det { flex: none; }
.pane-r .det-wrap .thread { flex: none; overflow: visible; }
.pane-r .compose { flex: none; }
.pane-r .compose textarea:disabled { background: var(--grey-50); color: var(--grey-600); }
.feed { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  border-top: 1px solid var(--grey-200); background: #fff; }
.feed { position: relative; }
.feed-jump { position: absolute; right: 18px; bottom: 10px; z-index: 2; border: 1px solid var(--grey-300);
  background: #fff; color: var(--grey-900); border-radius: 999px; padding: 5px 12px; font-size: 12px;
  font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.feed-jump:hover { background: var(--grey-50); }
.feed-jump:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.feed-jump[hidden] { display: none; }
.feed-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; padding: 8px 14px 6px; flex: none; }
.feed-h .t-muted { font-weight: 400; text-align: right; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.feed-list { list-style: none; margin: 0; padding: 4px 14px 12px; overflow: auto;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
/* 走行中は 1,000 行を超える。見えていない行は組まない(幅を変えるたびに全行の折り返しを
   計算し直して、仕切りのドラッグが重かった)。高さは最後に描いたときのものを覚えさせる */
.feed-list > li { content-visibility: auto; contain-intrinsic-size: auto 48px; }
.feed-list[hidden] { display: none; }
/* 開き直したとき、最新に追いつくまでの表示 */
.feed-loading { display: flex; align-items: center; gap: 8px; padding: 18px 14px; color: var(--grey-600); font-size: 13px; }
.feed-loading[hidden] { display: none; }
/* 吹き出し。AI は左寄せの灰、人は右寄せの緑、注記は細字 */
.fmsg .txt { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5; }
.fmsg .avatar { width: 26px; height: 26px; font-size: 11px; }
.fmsg.me { flex-direction: row-reverse; }
.fmsg.me .txt { background: var(--green-50); border-radius: var(--r-m) 0 var(--r-m) var(--r-m); }
.fmsg.sys .txt { font-size: 11.5px; line-height: 1.45; color: var(--grey-700); }
.fmsg.fverify .txt { padding-left: 8px; border-left: 3px solid var(--grey-300); }
.fmsg.fverify.ok .txt { border-left-color: var(--green-800); color: var(--green-1200); }
.fmsg.fverify.ng .txt { border-left-color: var(--red-800); color: var(--red-1000); }
.fmsg.fverify.blind .txt { border-left-color: var(--yellow-900); color: var(--yellow-1200); }
/* 区切り(図面ごとの開始・完了) */
/* 束の折りたたみ。見出し行に束の番号・要求・結果(秒、render、記録)を出し、中身は開いたときだけ読む */
.fstage > details { border-left: 3px solid var(--grey-300); margin: 4px 0; }
.fstage > details[open] { border-left-color: var(--green-700); }
.fstage summary { cursor: pointer; display: grid; grid-template-columns: 12px 1fr; column-gap: 4px;
  padding: 4px 8px; font-size: 11.5px; color: var(--grey-700); list-style: none; }
.fstage summary::-webkit-details-marker { display: none; }
.fstage summary::before { content: "▸"; color: var(--grey-500); font-size: 10px; }
.fstage > details[open] > summary::before { content: "▾"; }
.fstage .fs-name { grid-column: 2; min-width: 0; font-weight: 600; color: var(--grey-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fstage .fs-state { grid-column: 2; font-size: 10.5px; color: var(--grey-600); font-variant-numeric: tabular-nums; }
.fstage .fs-state.ok { color: var(--green-1200); }
.fstage .fs-state.ng { color: var(--red-1000); }
.fstage-body { list-style: none; margin: 0; padding: 2px 0 6px 10px; display: flex; flex-direction: column; gap: 8px; }
.fdiv { font-size: 11px; color: var(--grey-600); text-align: center; display: flex;
  align-items: center; gap: 8px; }
.fdiv::before, .fdiv::after { content: ""; flex: 1; border-top: 1px dashed var(--grey-300); }
/* ツール呼び出し。閉じていれば 1 行、開くとページ上の枠と受け取った画像 */
.fcall details { border: 1px solid var(--grey-200); border-radius: var(--r-s);
  background: var(--grey-50); font-size: 11.5px; }
.fcall summary { display: flex; gap: 8px; align-items: baseline; padding: 5px 8px;
  cursor: pointer; list-style: none; color: var(--grey-800); }
.fcall summary::-webkit-details-marker { display: none; }
.fcall summary::before { content: "▸"; color: var(--grey-500); font-size: 10px; }
.fcall details[open] summary::before { content: "▾"; }
.fcall .fc-label { font-family: var(--mono, ui-monospace, monospace); font-weight: 700;
  white-space: nowrap; }
.fcall .fc-doc { color: var(--grey-600); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1; min-width: 0; }
.fcall .fc-time { color: var(--grey-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fcall .fc-body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.fcall .fc-cap { font-size: 10.5px; color: var(--grey-600); margin-top: 4px; }
.fc-stage { position: relative; background: #fff; border: 1px solid var(--grey-300);
  border-radius: var(--r-s); overflow: hidden; }
.fc-stage img, .fc-got { display: block; width: 100%; height: auto; }
.fc-got { border: 1px solid var(--grey-300); border-radius: var(--r-s); background: #fff; }
.vlm-box { position: absolute; border: 2px solid #2456A6; background: rgba(36,86,166,.12);
  border-radius: 2px; }
.fc-reason { font-size: 11.5px; line-height: 1.45; color: var(--grey-700); padding: 3px 2px 0 10px;
  white-space: pre-wrap; word-break: break-word; }
/* モデルの入出力の生中継。等幅で、正式な行(記録・呼び出し)より一段薄く */
.fin-text { margin: 0; padding: 6px 8px 8px; font: 11px/1.5 ui-monospace, Menlo, monospace;
  white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; color: var(--grey-800); }
.flive .body { border: 1px dashed var(--grey-300); border-radius: var(--r-s); padding: 6px 8px; }
.flive .fl-meta { font-size: 10.5px; color: var(--grey-600); margin-bottom: 2px; }
.flive.live .fl-meta::after { content: " ▍"; animation: flblink 1s steps(2) infinite; }
@keyframes flblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flive.live .fl-meta::after { animation: none; } }
.flive .txt { background: transparent; padding: 0; font: 11.5px/1.5 ui-monospace, Menlo, monospace; }
.flive .fl-thinking { color: var(--grey-600); font-style: italic; display: block; }
.flive .fl-tool { color: #2456A6; display: block; }
.flive.ended { opacity: .6; }
/* 終わった生中継は畳む。クリックで開く(以前はホバーで開いていたが、追従中に下端の行へ
   マウスを置くと、開く → 追従で行が上へ逃げる → 閉じる、を繰り返して画面が揺れた) */
.flive.ended .txt { max-height: 4.5em; overflow: hidden; }
.flive.ended .body { cursor: pointer; }
.flive.ended.open .txt { max-height: none; }
.fc-ocr { font-size: 11px; color: var(--grey-700); border-left: 3px solid var(--grey-300);
  padding-left: 6px; white-space: pre-wrap; word-break: break-word; margin-top: 4px; }

/* 初心者注意(🔰)は初心者モードのときだけ一覧に載せる。
   CSS で隠すのではなく描画側で外す — 隠すだけだと見出しの件数や J/K 移動、
   フッターの「N件中M件」がすべて隠した分を数えてしまうため */
.fi.info .bar { background: var(--green-300); }
.seg button.info.on { color: var(--green-1000); }
/* 絞り込みは NG / 確認 / OK / 必要なし のチェックボックス。左ペイン(230px)に
   4 列は収まらないので 2 行 2 列。見た目は mock.css の .seg button に揃える */
#rvSeg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#rvSeg label { min-width: 0; height: 30px; border-radius: 6px; font-size: 11px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--grey-700);
  padding: 0 2px; white-space: nowrap; cursor: pointer; user-select: none; }
#rvSeg label b { font-size: 13px; }
#rvSeg label input { margin: 0; width: 13px; height: 13px; accent-color: var(--grey-700); }
#rvSeg label .dot { width: 8px; height: 8px; border-radius: 50%; }
#rvSeg label.on { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
#rvSeg label.ng.on { color: var(--red-1000); }
#rvSeg label.hold.on { color: var(--yellow-1200); }
#rvSeg label.ok.on { color: var(--green-1000); }
#rvSeg label.skip.on { color: var(--grey-900); }
/* 「検図に必要なし」(skip)は灰色。判定ではないので赤黄緑と並べても目立たせない */
.fi.skip .bar { background: var(--grey-400); }
.pagebox.skip::before { border-color: var(--grey-600); background: rgba(90,90,100,.10); }
.pagebox.skip .pintag { background: var(--grey-600); }
/* 「無いことを確かめた範囲」: 記載の位置ではないので破線・薄い塗り */
.pagebox.checked::before { border-style: dashed; background: rgba(236,0,0,.04); }
.pagebox.checked.hold::before { background: rgba(183,143,0,.05); }
.chip-skip .dot { background: var(--grey-500); }
.chip-cov { color: var(--grey-900); }
.chip-cov b { font-weight: 700; }
/* 「?」(.hint > .help)。かざすと .hint-pop が出る。押すと開いたままになり、外を押すか Esc で閉じる。
   網羅率と「照合待ち」で使う。.hint-r は右端用(吹き出しを右ぞろえ) */
.hint { position: relative; display: inline-flex; }
.hint .help { margin-left: 2px; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--grey-600);
  background: transparent; color: var(--grey-700); font-size: 10px; font-weight: 700; line-height: 13px;
  padding: 0; cursor: help; }
.hint .help:hover, .hint .help:focus-visible, .hint.open .help { background: var(--grey-900); color: #fff;
  border-color: var(--grey-900); }
.hint-pop { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 340px;
  max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--grey-300); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 10px 12px; font-size: 12px; line-height: 1.55;
  font-weight: 400; color: var(--grey-900); white-space: normal; text-align: left; }
.hint:hover .hint-pop, .hint:focus-within .hint-pop, .hint.open .hint-pop { display: block; }
.hint-r .hint-pop { left: auto; right: 0; }
/* 見出しのチップは overflow:hidden(長い文言対策)。吹き出しを持つときだけ外へはみ出せるようにする */
.rv-hd .chip:has(.hint) { overflow: visible; }
.chip .hint { display: inline-flex; }
.cov-gif { display: block; width: calc(100% + 24px); height: auto; margin: -10px -12px 8px;
  border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--grey-200); }
.hint-pop p { margin: 0 0 6px; }
.hint-pop p:last-child { margin-bottom: 0; }
.hint-pop ul { list-style: none; margin: 6px 0; padding: 6px 0 0; border-top: 1px solid var(--grey-200); }
.hint-pop li { display: flex; justify-content: space-between; gap: 10px; }
.hint-pop li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 見出しは体言止めの短文が来る前提。古い記録や長い見出しでも行数を抑える */
.fi .r2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

.thread { min-height: 0; }
/* モデルの振り返り(開発者向け)。指摘の一覧とは別物なので薄く、畳んで置く */
.debrief { margin: 0 12px 8px; border: 1px dashed var(--grey-300); border-radius: 4px;
  padding: 4px 10px; font-size: 12px; background: #fff; }
.debrief-h { cursor: pointer; color: var(--grey-700); font-weight: 700; }
.debrief-doc-h { font-weight: 700; margin-top: 6px; }
.debrief-k { margin-top: 6px; font-weight: 700; color: var(--grey-700); }
.debrief-v { margin: 2px 0 0; white-space: pre-wrap; font: inherit; color: var(--grey-900); }
.debrief-note { margin: 2px 0 0 8px; color: var(--grey-700); }
.fi .kindtag { font-size: 10px; border: 1px solid var(--grey-300); border-radius: 3px;
  padding: 0 4px; color: var(--grey-700); }
.rowlink td .prog { min-width: 100px; }
/* 図面は「全体の形」が分かることが第一。cover で切ると下半分が消えて
   何の図面か判別できなくなる(ギャラリー由来の図は正方形、図面PDFはA3横) */
.pcard .thumb img { width: 100%; height: 170px; object-fit: contain;
  display: block; border: 1px solid var(--grey-300); border-bottom: none; background: #fff; }
.pcard .thumb .noimg { height: 170px; display: grid; place-items: center;
  border: 1px solid var(--grey-300); border-bottom: none; background: #fff;
  color: var(--grey-420); font-size: 11px; }
.rv-elapsed { font-variant-numeric: tabular-nums; margin-left: 4px; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--grey-300);
  border-top-color: var(--primary); border-radius: 50%; animation: sp .8s linear infinite;
  vertical-align: -2px; margin-right: 6px; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* 類似検索の待ち表示(検索はプログレスバー、検図は AIの視点) */
.simload { padding: 22px 18px; text-align: center; }
.simload-h { display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 13px; margin-bottom: 12px; }
.simprog { height: 6px; border-radius: 999px; background: var(--grey-200); overflow: hidden; }
.simprog i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--primary); transition: width .3s ease; }
/* 検索モーダル: 照合先の表示(エンコーダは選ばせないので select は置かない) */
.simsrc { margin: 14px 0 8px; padding: 8px 10px; border: 1px solid var(--grey-300);
  border-radius: var(--r-s); background: var(--grey-50); font-size: 12px;
  color: var(--grey-700); }
.simsrc.bad { border-color: var(--red-100); background: var(--red-50);
  color: var(--red-1000); }
/* 検索に使った図面。76px(mock.css)では何を投げたのか見えないので大きく出す。
   これが「何で探しているか」を示す唯一の手掛かりで、ファイル名は出さない。
   横幅ではなく高さで決める。横長のA3と縦長の図面で帯の高さが変わらないように */
.simthumb { width: auto; min-width: 110px; max-width: 260px; padding: 5px; }
.simthumb img { display: block; width: auto; max-width: 100%; height: auto;
  max-height: 150px; margin: 0 auto; border-radius: 3px; }
.simtitle { font-weight: 700; font-size: 14px; }
.pcard { position: relative; }
/* 図面の拡大表示。A3 の図面はカードの中では何が描いてあるか読めないので、
   クリックしたら画面いっぱいに出す。.overlay は中央に .modal を置く前提の
   作りなので、ここでは縦積みにして自前で敷き詰める */
.overlay.lb { flex-direction: column; padding: 0; background: rgba(26,26,28,.82);
  z-index: 60; }
.lb-hd { display: flex; align-items: center; gap: 10px; width: 100%; flex: none;
  padding: 10px 16px; color: #fff; font-size: 13px; }
.lb-hd .btn { color: #fff; }
.lb-hd .btn:hover { background: rgba(255,255,255,.16); }
.lb-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 46vw; }
.lb-page { color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.lb-hd .zoom button { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28);
  color: #fff; }
.lb-hd .zoom button:hover { background: rgba(255,255,255,.24); }
.lb-hd .zoom .lv { color: rgba(255,255,255,.72); }
.lb-body { flex: 1; min-height: 0; width: 100%; overflow: auto; padding: 0 16px 16px;
  display: flex; align-items: flex-start; justify-content: center; }
.lb-body img { display: block; background: #fff; border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4); }
/* 等倍(幅に合わせる)のときだけ画面内に収める。拡大したら実寸で出してスクロールさせる */
.lb-body.fit img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; }
/* 指摘の枠を重ねるための入れ物。影と背景は画像から移してここが持つ */
.lbimg { position: relative; margin: auto; background: #fff; border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.lb-body .lbimg img, .lb-body.fit .lbimg img { display: block; width: 100%; height: 100%;
  max-width: none; max-height: none; box-shadow: none; border-radius: 0; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 64px;
  border-radius: 6px; background: rgba(255,255,255,.14); color: #fff; font-size: 26px;
  line-height: 1; border: none; cursor: pointer; }
.lb-nav:hover { background: rgba(255,255,255,.28); }
.lb-nav.prev { left: 12px; }
.lb-nav.next { right: 12px; }
.lb-nav[hidden] { display: none !important; }
/* 拡大できるものはクリックできると分かるようにする */
.zoomable { cursor: zoom-in; }
.lb-sub { color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
/* ページ画像が無いとき(読み込み中・実体が無い書類)に本文の位置へ出す説明 */
.lb-note { align-self: center; max-width: 460px; padding: 22px 26px; border-radius: var(--r-m);
  background: rgba(255,255,255,.10); color: #fff; font-size: 13px; line-height: 1.7;
  text-align: center; }
.lb-note b { display: block; margin-bottom: 8px; font-size: 14px; }
.lb-note p { margin: 6px 0 0; }
.lb-note .t-dim { color: rgba(255,255,255,.66); }
.lb-note .lb-k { display: block; color: rgba(255,255,255,.66); font-size: 11px; }
.lb-note .spin { display: block; width: 22px; height: 22px; margin: 0 auto 10px;
  border: 2px solid rgba(255,255,255,.28); border-top-color: #fff; border-radius: 50%;
  animation: lbspin .8s linear infinite; }
@keyframes lbspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lb-note .spin { animation-duration: 3s; } }

/* 実体が無くて一覧から外した書類の注記 */
.basisnote { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--grey-200);
  font-size: 11px; line-height: 1.6; }
.basisnote[hidden] { display: none !important; }

/* 一覧の行から書類を開く。押せることが分かるように、行ごと反応させる */
.basis li.open, .dtop.open { cursor: pointer; }
.basis li.open { margin: 0 -6px; padding: 7px 6px; border-radius: var(--r-s); }
.basis li.open:hover { background: var(--grey-100); }
.dtop.open { margin: -4px -6px 0; padding: 4px 6px; border-radius: var(--r-s); }
.dtop.open:hover { background: var(--grey-100); }
.basis li.open:hover .bn, .dtop.open:hover .dname { text-decoration: underline; }

/* アップロードした図面と同一の図面が、既に案件として登録されていた場合 */
.simsame { margin: -8px 0 14px; padding: 9px 14px; border-radius: var(--r-m);
  background: var(--yellow-50); border: 1px solid var(--yellow-100);
  color: var(--yellow-1000); font-size: 13px; font-weight: 700; }
.simsame[hidden] { display: none !important; }
.simsame a { color: inherit; }

/* 製品ツリーの折りたたみ(常時全展開だと製品が増えたときに使えない) */
/* .tn.open は mock.css で 90度回った矢印。畳んだら open を外すだけでよい */
.tn .tw { cursor: pointer; }
li.tn-collapsed > ul { display: none; }
.tn.hit .tl { background: var(--yellow-50); border-radius: 3px; }
li.tn-hidden { display: none; }

/* 製品なしの案件では「製品に紐づく書類」ごと畳む */
.card[hidden] { display: none !important; }

/* ドラッグ中の落とし先。枠の中に居ることが分かればよいので、色を一段濃くするだけ。
   枠線やパディングは動かさない(ドロップの瞬間に的が動くと落とし損ねる) */
.drop.over { background: var(--green-100); border-color: var(--green-500);
  border-style: solid; }
.drop.over * { pointer-events: none; }

/* ボタンの中で回すスピナー。既定の .spin は白地向けの灰色+緑なので、
   緑地の btn-primary では輪も先頭も沈んで見えない */
.btn-primary .spin { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }
/* 送信中は押せない。既定の disabled は無地のままなので見た目でも分かるようにする。
   他のボタンの見え方を撮影直前に変えたくないので、この 1 個だけに効かせる */
#upOk:disabled { cursor: default; opacity: .85; }

/* レビュー画面は窓の高さに常に追従させる。mock.css の .rv は 100vh 固定で、
   まれに格子の下にページ背景の余白が見えた(再現条件は不明)。
   body を縦 flex にし、ヘッダー以外の残り全部を格子に渡す。body 自体は
   スクロールさせない(スクロールは各ペインの中だけ) */
body.rv-on { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
body.rv-on > .gh { flex: none; }
body.rv-on > #s3.on { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.rv-on .rv { height: auto; flex: 1; min-height: 0; }

/* 中止ボタン: .btn の display が UA の [hidden] を打ち消すので明示して隠す */
#rvCancel[hidden] { display: none !important; }

/* ---------- /reviews/… の開き直し: 検図画面の骨組みを先に出す ---------- */
/* index.html の <head> の 1 行が、パスが /reviews/… なら <html class="boot-rv"> にする。
   app.js が動いて go() が呼ばれるまで、一覧(#s1)ではなく検図画面(#s3)の骨組みを見せる
   (以前は一覧が一瞬見えてから検図画面に切り替わっていた) */
html.boot-rv #s1.on { display: none; }
html.boot-rv body { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
html.boot-rv body > .gh { flex: none; }
html.boot-rv #s3 { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html.boot-rv .rv { height: auto; flex: 1; min-height: 0; }

/* 中身が来るまでの骨組み(#s3.skel)。renderReview() が外す */
@keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#s3.skel #rvTitle::before, #s3.skel #rvCounts::before, #s3.skel #rvStatus::before, #s3.skel .doc-hd::before,
#s3.skel #rvList::before, #s3.skel .doc-body::before, #s3.skel #rvDet::before {
  animation: skel-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #s3.skel *::before { animation: none; } }
#s3.skel #rvTitle::before { content: ""; display: inline-block; vertical-align: middle; width: 220px; height: 14px;
  border-radius: 4px; background: var(--grey-200); }
#s3.skel #rvCounts::before { content: ""; display: block; width: 208px; height: 24px; border-radius: 999px;
  background: repeating-linear-gradient(to right, var(--grey-100) 0 64px, transparent 64px 72px); }
#s3.skel #rvStatus { background: var(--grey-100); }
#s3.skel #rvStatus::before { content: ""; display: inline-block; width: 110px; height: 10px; border-radius: 4px;
  background: var(--grey-200); }
#s3.skel .doc-hd { position: relative; }
#s3.skel .docsel { visibility: hidden; }
#s3.skel .doc-hd::before { content: ""; position: absolute; left: 10px; top: 50%; margin-top: -6px; width: 140px;
  height: 12px; border-radius: 4px; background: var(--grey-200); }
#s3.skel #rvList::before { content: ""; display: block; margin: 0 10px; height: 100%;
  background: repeating-linear-gradient(to bottom, transparent 0 10px, var(--grey-200) 10px 20px, transparent 20px 26px,
    var(--grey-100) 26px 42px, transparent 42px 55px, var(--grey-200) 55px 56px); }
#s3.skel .doc-body { padding: 16px; overflow: hidden; }
#s3.skel .doc-body::before { content: ""; display: block; height: 100%; width: auto; max-width: 100%; margin: 0 auto;
  aspect-ratio: 1 / 1.4; box-sizing: border-box;
  background: #fff repeating-linear-gradient(to bottom, transparent 0 24px, var(--grey-100) 24px 34px);
  border: 1px solid var(--grey-300); border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#s3.skel #rvDet { padding: 14px; }
#s3.skel #rvDet::before { content: ""; display: block; height: 120px;
  background: repeating-linear-gradient(to bottom, var(--grey-200) 0 12px, transparent 12px 22px); }
#s3.skel .compose { visibility: hidden; }

/* ---------- 状態一覧(/status) ---------- */
.st-banner { border-radius: 8px; padding: 12px 16px; font-weight: 700; margin-bottom: 14px; border: 1px solid; }
.st-banner.ok { background: var(--green-50); border-color: var(--green-100); color: var(--green-800); }
.st-banner.warn { background: var(--yellow-50); border-color: var(--yellow-100); color: var(--yellow-1200); }
.st-banner.down { background: var(--red-50); border-color: var(--red-100); color: var(--red-900); }
.st-list { list-style: none; margin: 0; padding: 0; }
.st-row { display: grid; grid-template-columns: 14px minmax(180px, 1fr) 56px minmax(0, 2fr); gap: 12px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--grey-200); font-size: 13px; }
.st-row:last-child { border-bottom: 0; }
.st-row.st-sub { padding-left: 46px; background: var(--grey-50); font-size: 12px; }
.st-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grey-300); justify-self: center; }
.st-dot.ok { background: var(--green-500); }
.st-dot.warn { background: var(--yellow-900); }
.st-dot.down { background: var(--red-800); }
.st-dot.idle { background: var(--grey-420); }
.st-name { font-weight: 500; color: var(--grey-900); }
.st-state { font-weight: 700; }
.st-state.ok { color: var(--green-800); }
.st-state.warn { color: var(--yellow-1000); }
.st-state.down { color: var(--red-900); }
.st-state.idle { color: var(--grey-600); }
.st-detail { color: var(--grey-700); overflow-wrap: anywhere; }
@media (max-width: 720px) { .st-row { grid-template-columns: 14px 1fr 56px; } .st-detail { grid-column: 2 / -1; } }

/* ---------- /products /standards /status の開き直し: 目的の画面の骨組みとヘッダーの現在地を先に出す ---------- */
/* index.html の <head> の数行が、パスに応じて <html data-boot="s5|s7|s8"> にする。go() が外す */
html[data-boot] #s1.on { display: none; }
html[data-boot="s5"] #s5, html[data-boot="s7"] #s7, html[data-boot="s8"] #s8 { display: block; }
html[data-boot] .gnav a[aria-current="page"] { color: var(--grey-600); border-color: transparent; font-weight: 500; }
html[data-boot="s5"] .gnav #gn5, html[data-boot="s7"] .gnav #gn7, html[data-boot="s8"] .gnav #gn8 {
  color: var(--primary); border-color: var(--primary); font-weight: 700; }

/* 中身が来るまでの骨組み(.skel)。loadTree / renderStandards / renderStatus が外す */
#s5.skel #exTree::before, #s5.skel #exBody::before, #s7.skel .card::before, #s8.skel .st-list::before {
  content: ""; display: block; animation: skel-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #s5.skel *::before, #s7.skel *::before, #s8.skel *::before { animation: none; } }
#s5.skel #exTree::before { margin: 12px 16px; height: 220px;
  background: repeating-linear-gradient(to bottom, var(--grey-200) 0 12px, transparent 12px 30px); }
#s5.skel #exBody::before { margin: 20px; height: 300px;
  background: repeating-linear-gradient(to bottom, var(--grey-100) 0 72px, transparent 72px 84px); border-radius: 6px; }
#s7.skel .card::before { margin: 48px 16px 16px; height: 260px;
  background: repeating-linear-gradient(to bottom, var(--grey-200) 0 12px, transparent 12px 36px, var(--grey-100) 36px 40px, transparent 40px 52px); }
#s8.skel .st-list::before { margin: 14px 16px; height: 400px;
  background: repeating-linear-gradient(to bottom, var(--grey-200) 0 12px, transparent 12px 45px); }

/* ---------- プロジェクト一覧のページ送り ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; font-size: 13px; }
.pager button:disabled { opacity: .45; cursor: default; }

/* ---------- プロジェクト一覧の読み込み中の骨組み(#s1.skel) ---------- */
#s1:not(.skel) #pjSkel { display: none; }
#s1.skel #viewCards, #s1.skel #viewList, #s1.skel #pjPager { display: none !important; }
/* リスト表示(?view=list)で開き直したとき: カードのスケルトンの代わりに、リストの表のスケルトンを出す。
   表示形式のボタンの現在地も app.js より前に合わせる */
#s1:not(.skel) #pjSkelRows, html:not([data-view="list"]) #pjSkelRows { display: none; }
html[data-view="list"] #s1.skel #pjSkel { display: none; }
html[data-view="list"] #s1.skel #viewList { display: block !important; }
html[data-view="list"] #s1.skel #viewList .simcol { display: none; }
html[data-view="list"] #s1.skel .vt button[data-v="cards"] { background: none; color: var(--grey-600); }
html[data-view="list"] #s1.skel .vt button[data-v="list"] { background: var(--green-50); color: var(--green-1000); }
#pjSkelRows td { padding-top: 14px; padding-bottom: 14px; }
#pjSkelRows .sk-line { margin-top: 6px; }
#pjSkelRows tr { animation: skel-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #pjSkelRows tr { animation: none; } }
.pj-skel .pcard { cursor: default; animation: skel-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pj-skel .pcard { animation: none; } }
.pj-skel .sk-pic { aspect-ratio: 260 / 150; background: #fff; border: 1px solid var(--grey-300); border-bottom: none; }
.pj-skel .sk-line { height: 12px; border-radius: 4px; background: var(--grey-200); margin-top: 8px; }
.pj-skel .sk-line.w30 { width: 30%; } .pj-skel .sk-line.w40 { width: 40%; }
.pj-skel .sk-line.w60 { width: 60%; margin-top: 2px; height: 14px; } .pj-skel .sk-line.w90 { width: 90%; height: 8px; margin-top: 12px; }
.pj-skel .sk-dots { width: 52px; height: 24px; border-radius: 12px;
  background: repeating-linear-gradient(to right, var(--grey-200) 0 24px, transparent 24px 28px); }