/* Culminans.Pm: プロジェクト管理の画面スタイル */
/* カード・フォームグリッド・詳細見出し・一覧ツールバー・保存条件チップはモジュール共通（シェルの app.css: alt-card / alt-form-grid / wf-detail-head / grid-toolbar / alt-filter-chip）。 */

/* ---- 共通 ---- */
.pm-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.8rem; white-space: nowrap; background: var(--alt-bg-muted); color: var(--alt-text-sub); margin-right: 8px; }
.pm-key { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--alt-bg-muted); border-radius: 4px; padding: 1px 6px; font-size: 0.85em; text-decoration: none; color: inherit; }
/* ヘッダーカラー（PmProjectHead が --pm-project-color / --pm-project-on-color を配る。未設定なら既定値が効く）。 */
.pm-project-head .pm-key { background: var(--pm-project-color, var(--alt-bg-muted)); color: var(--pm-project-on-color, inherit); }
/* 見出しの行（PmProjectHead。前に概要の★が付く）。★を見出しの縦の中央に揃えるため flex にし、
   **見出しの下の余白は行へ移す**＝h1 に残すと、中央揃えが余白ごと測るので★が上へずれる。
   値は .page-title と同じトークンを読む（★の無い画面の見た目を変えないため）。 */
.pm-project-title { display: flex; align-items: center; gap: 4px; margin-bottom: var(--alt-page-title-gap); }
.pm-project-title > .page-title { margin-bottom: 0; }
.pm-archived { opacity: 0.6; }
.pm-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pm-inline .pm-grow { flex: 1 1 260px; }
.pm-inline .pm-date { width: 150px; }
.pm-sub-title { margin: 10px 0 4px; font-size: 0.9rem; font-weight: 600; color: var(--alt-text-sub); }

/* ---- メンバー表・参照表（子課題・依存） ---- */
.pm-members, .pm-ref-table, .pm-attr-table { width: 100%; border-collapse: collapse; }
.pm-members th, .pm-members td, .pm-ref-table th, .pm-ref-table td { padding: 6px 8px; border-bottom: 1px solid var(--alt-border); text-align: left; font-size: 0.9rem; }
.pm-ref-table th { color: var(--alt-text-sub); font-weight: 500; }
/* 項目名と値の表（設定の固有欄・Backlog 取込）。課題詳細の属性は .pm-attr-grid で、これとは別。 */
.pm-attr-table th { text-align: left; color: var(--alt-text-sub); font-weight: 500; padding: 4px 8px 4px 0; width: 42%; vertical-align: top; font-size: 0.9rem; }
.pm-attr-table td { padding: 4px 0; font-size: 0.9rem; }

/* 参照する課題の表（親子・依存）は**折り返さず、収まらないときは横へ流す**（2026-09-12）。
   折り返させると、行き場を失った件名が**1 文字ずつ縦に伸びる**（実測。画面は壊れないので
   「読みにくい」としか見えない）。**列に固定幅は置かない**＝置くと中身が短くても
   その合計ぶんの床ができ、狭い列では必ず横へ振ることになる（幅は PmIssueDetail 側にも書かない）。
   `width: max-content` と `min-width: 100%` の組で、収まるときは幅いっぱい・
   収まらないときは中身なりに広がって親が横スクロールする。
   `white-space` は継承するので、セル 1 つずつに当てず表に 1 本で足りる。
   ここは狭い画面で幅が足りなくなるので横へ流すほうを採った（2026-09-17 に右の属性の列を無くしたので、広い画面では収まる）。 */
.pm-ref-scroll { overflow-x: auto; overscroll-behavior-x: none; }
.pm-ref-scroll .pm-ref-table { width: max-content; min-width: 100%; white-space: nowrap; }
.pm-members { margin-bottom: 8px; }

/* ---- 課題の状態・優先度・種別（札と優先度の文字は app.css の .alt-status-pill ／ .alt-prio-*） ---- */
/* ボードの列（レーン）の色。札と同じ色相にそろえてある（完了は札の地と同じトークン）。札の色相を変えるときはここも直す。
   未対応は .pm-board-col の既定の色（ボードの節）。 */
.pm-board-col.pm-lane-inprogress { --pm-lane: #3b82f6; }
.pm-board-col.pm-lane-resolved { --pm-lane: #22c55e; }
.pm-board-col.pm-lane-closed { --pm-lane: var(--alt-status-closed-bg); }
/* カスタム状態の札（形は .alt-status-pill。背景色はマスタの色を style で。文字は白） */
.pm-status-custom { color: #fff; }
/* 課題一覧の表示対象の札（TEST1-277）。幅は受信ボックスの状態の欄（.alt-mail-filter）と同じ。
   状態ではない絞り込み（完了以外・期限超過）は色を持たないので、枠だけの札にする。 */
.pm-scope-filter { width: 280px; max-width: 100%; }
.pm-scope-pill { border: 1px solid var(--alt-border); color: var(--alt-text-strong); }
.pm-scope-tag { display: inline-flex; align-items: center; gap: 4px; margin: 1px 2px; }
.pm-scope-tag-remove { border: 0; background: none; padding: 0; color: inherit; opacity: 0.6; cursor: pointer; font-size: 0.9rem; line-height: 1; }
.pm-scope-tag-remove:hover { opacity: 1; }
/* 優先度のピル（課題詳細の畳んだ属性の見出し）。色は app.css の alt-prio-* の文字色から起こす
   ＝色を 2 か所に書くと、優先度の色を変えた日にピルだけ古い色のまま残る。 */
.pm-prio-pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.8rem; line-height: 1.5; white-space: nowrap; background: color-mix(in srgb, currentColor 12%, transparent); border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.pm-type-badge { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 0.8rem; color: #fff; white-space: nowrap; }

/* ---- 課題詳細 ---- */

/* ボタンを左へ寄せる（2026-09-07。TEST1-86）。共通の既定は、ヘッダーが space-between
   （見出しと操作を左右に分ける）、ボタン列が flex-end（右端）で、押すものが読んでいる場所から遠い。
   **この画面だけに効かせる**＝ほかの詳細画面（伝票・申請・製造指図）と窓の中のボタン列は
   既定のままなので、揃えるときはそちらのチケットで動かすこと（洋二さんの判断。2026-09-07）。
   **セレクタにクラスを 2 つ重ねている**＝共通側と同じ 1 つだと、CSS の読み込みの順で勝ち負けが変わる。 */
.wf-detail-head.pm-left-buttons { justify-content: flex-start; }
.dialog-buttons.pm-left-buttons { justify-content: flex-start; }

.pm-issue-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 課題詳細の属性（2026-09-17）。右の列に縦 1 列で並べていたのを本文の上へ移し、項目名と値の組を
   幅に応じて何列にも流す（列数は幅で決まるので @media を持たない。.dash-panels と同じ形）。
   **`.pm-attr-table` とは別に起こした**＝あちらは設定・Backlog 取込の表と共有で、`th` の幅を直すと黙って崩れる。
   項目名は幅を決めて**折り返させる**＝英語は最長 24 文字あり、nowrap にすると値を押し出す。 */
.pm-attr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 24px; margin: 0; }
.pm-attr-grid > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px 0; border-bottom: 1px solid var(--alt-border); font-size: 0.9rem; }
.pm-attr-grid dt { color: var(--alt-text-sub); font-weight: 500; }
.pm-attr-grid dd { margin: 0; overflow-wrap: anywhere; }
/* 文章型のカスタム属性は 1 行を占めて改行を保つ（260px の枠では読めない。並びの末尾に寄せるのは PmIssueDetail 側）。 */
.pm-attr-grid > .pm-attr-multiline { grid-column: 1 / -1; }
.pm-attr-grid > .pm-attr-multiline dd { white-space: pre-wrap; }

/* 見出しを押して開閉するカード（CollapsibleCard）。開閉を受ける button は見出しの文字と同じ見た目にし
   （button の既定の枠・背景・字体を外すのはシェルの .linklike。部品が名乗る）、
   見出しの行いっぱいに広げる＝見出しの行のどこを押しても開閉する。
   **畳んでいる間は見出しの下線と余白を消す**＝中身が無いのに線だけ残ると、空のカードに見える。 */
.pm-collapsible-toggle { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-self: flex-start; align-items: center; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; color: inherit; text-align: left; }
.pm-collapsible-toggle:hover { color: var(--alt-accent); }
.pm-collapsible-caret { color: var(--alt-text-sub); font-size: 0.7rem; }
.pm-collapsible:not(.is-open) > .alt-card-title { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
/* 要点が次の行へ回ったときも、見出しの縦棒は 1 行目（文言）に揃える＝既定の中央揃えだと、
   折り返した見出し全体の真ん中（要点の行の横）に来る。 */
.pm-collapsible > .alt-card-title::before { align-self: flex-start; margin-top: calc((1lh - 1em) / 2); }
/* 畳んだ見出しに並べる要点。文言（太字）と同じ行に並べ、幅が足りなければ文言の下の行へ回して折り返す。
   **値は折り返させる**（`min-width: 0` と `overflow-wrap`）＝項目ごと nowrap にすると、長い担当者名が
   狭い画面でページの幅を押し広げる（375px の画面で 492px になった。実測）。 */
.pm-collapsible-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-width: 0; margin-left: 12px; font-size: 0.9rem; font-weight: 400; line-height: 1.6; color: var(--alt-text-body); }
.pm-collapsible-item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
.pm-collapsible-label { color: var(--alt-text-sub); white-space: nowrap; }
/* 見出しの文言の右に操作を置いている間（CollapsibleCard の HeadActions）は、開閉の button を文言の幅に留める
   ＝行いっぱいに広げると、操作が行の右端へ離れる。字体は要点のクラスを一緒に名乗って借りる（部品の側）。 */
.pm-collapsible-toggle:has(+ .pm-collapsible-extra) { flex-grow: 0; }
.pm-attachments { list-style: none; margin: 0 0 8px; padding: 0; }
.pm-attachments li { padding: 4px 0; border-bottom: 1px solid var(--alt-border); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pm-comment-box { background: var(--alt-bg-subtle); }
.pm-comment-controls { margin-top: 8px; }
/* ===== 入力欄への画像の挿入（2026-08-26） ===== */
/* 入力欄の下のツールバー（「画像」ボタンと、アップロード中・エラー・ヒントの表示）。 */
.pm-editor-bar { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
/* 整形のボタンと脇の操作を 1 行に並べる（MentionMemo の InlineTools。TEST1-418＝簡易ビューのコメント欄）。
   脇の操作は整形のボタンのすぐ右に置く（右端へ離さない）。幅が足りなければ次の行へ回る。 */
.pm-memo-tools.is-inline { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }

/* 押しても動かないことを、無効にせずに見せる（2026-08-31。簡易ビューの前後送りの端）。
   disabled にするとそのボタンがフォーカスを失い、Enter を押したままにしていると
   リピートの続きが隣のボタンに落ちる。押せる状態のまま薄くして aria-disabled で伝える。 */
.pm-btn-inert { opacity: .45; }

/* 隠しファイル選択（pm-paste-image.js が File を差し込む先）。**display:none にしない**＝
   その状態だと click() が無視されるブラウザがあり、「画像」ボタンだけが黙って効かなくなる。
   大きさを 0 にして視界から外す。 */
.pm-hidden-file { width: 0; height: 0; overflow: hidden; }

/* 挿入した画像の控え。ここから「取り消す」と、実体を消して本文の参照も落とす。 */
.pm-inserted-images { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.pm-inserted-image { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--alt-bg-muted); border-radius: 6px; font-size: 0.85rem; }
.pm-inserted-image img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; }
.pm-inserted-name { max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 幅の規則は app.css に 1 本だけ置いてある（既定 360px ＋ alt-w-sm / md / lg / full）。
   ここに課題フォーム専用の幅を書かない＝同じ決めごとが 2 か所になると、片方だけ直したときに
   画面によって同じ項目の幅が違うという形で出る。 */
.pm-issue-form .alt-form-grid { margin-top: 8px; }
.pm-color-input { width: 44px; height: 32px; padding: 0 2px; border: 1px solid var(--alt-border); border-radius: 4px; background: var(--alt-surface); cursor: pointer; }
.pm-settings-form { margin-bottom: 4px; }
/* プロジェクト設定の各タブの中身。ワイドモニタで名称欄と一覧が画面の端まで伸びて、名称と右端の「有効」が離れすぎるので止める。
   タブの見出しの帯は外に置く（包むと 10 個の見出しが英語で折り返す）。pm-settings-form は課題登録などでも使うのでそちらには掛けない。 */
.pm-settings-pane { max-width: var(--alt-form-max); }
/* カスタム属性の一覧は列の合計が 1191px（2026-09-19 実測）あり、800px では選択肢・有効の列が横スクロールの先に隠れる。
   このタブだけは枠ごと止めず、入力欄と説明文を止める。 */
.pm-settings-pane-wide > :is(.meta, .pm-settings-form) { max-width: var(--alt-form-max); }

/* ---- タイムライン ---- */
/* タイムラインのカードは**コメント記入欄のカードと同じ幅で止める**（2026-09-20・TEST1-152）＝
   記入欄は入力だけを持つカードなので app.css が幅を止めており、タイムラインだけが画面の端まで伸びて、
   同じコメントが書くときと読むときで別の幅になっていた。**幅はここに書かない**＝画面が `alt-form-card`
   を名乗り、上限は app.css の 1 か所が持つ（写すと上限を変えた日にここだけ古い幅のまま残る）。
   **右端のつまみ（.pm-body-resizer）で広げられる**＝長い表や画像を貼った行はこの幅では窮屈なので、
   読む側が広げてその人に覚える（保存のキーは Shared/IssueBodyWidth.cs の StorageKey）。広げた幅はインラインの
   max-width で入るので、クラスの既定より必ず強い。**画面より広い値が入っていても はみ出さない**
   ＝max-width は幅を強いないので、親より広い指定は親の幅で頭打ちになる。
   **効く先は本文のカード全部**（2026-09-21・TEST1-157）＝顔ぶれと揃える理由は Shared/IssueBodyWidth.cs の doc が正。
   **つまみは「詳細」・コメント記入欄・タイムラインの 3 枚に置く**（2026-10-20。どれを引いても同じ。Shared/IssueBodyResizer.razor）。
   当てる先の名乗りは `data-pm-body-width`（js/pm-body-width.js）で、**クラスにしない**
   ＝見た目を決めているのは `alt-form-card` のほうで、これは JS への印だけ（シェルの data-submit-scope と同じ流儀）。 */
/* つまみを持つカードを、つまみの位置の基準にする（つまみは部品がカードの直下に描く）。 */
.alt-card:has(> .pm-body-resizer) { position: relative; }
/* 右端の仕切り。カードの右の余白に重ねる。掴む幅は 8px で、見えている線は 3px。
   **枠線より濃い色で、高さいっぱいに出す**＝チケットの求めは「右端に見えていて引けること」で、
   枠線と同じ濃さだとカードの縁と見分けが付かず、短い印にすると長いタイムラインでは画面の外に出る。 */
.pm-body-resizer { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; background: transparent; }
.pm-body-resizer::before { content: ""; position: absolute; top: 6px; bottom: 6px; right: 2px; width: 3px; border-radius: 2px; background: var(--alt-border-strong); }
.pm-body-resizer:hover::before,
.pm-body-resizer:focus-visible::before { background: var(--alt-accent); }
.pm-body-resizer:focus-visible { outline: 2px solid var(--alt-accent); outline-offset: -2px; }
/* 狭い画面はカードが親の幅いっぱい（既定の上限に届かない）＝広げる余地が無いのでつまみを出さない。
   **境目はサイドバーの 1024px ではなく 720px**＝サイドバーのつまみは「ドロワーになったら消す」だが、
   こちらは「広げる余地があるか」で、1024px で切ると余地のある幅（本文が 842px より広い画面）でも
   消えてしまう（実測: 画面 1000px のとき本文は 1000px あり、158px 広げられた）。 */
@media (max-width: 720px) {
    .pm-body-resizer { display: none; }
}
.pm-timeline { list-style: none; margin: 0; padding: 0; }
.pm-timeline > li { border-top: 1px solid var(--alt-border); padding: 10px 4px; }
.pm-timeline > li:first-child { border-top: none; }
.pm-timeline-meta { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; color: var(--alt-text-sub); font-size: 0.85rem; margin-bottom: 4px; }
.pm-timeline-user { font-weight: 600; color: var(--alt-text-strong); }
.pm-timeline-edited { font-size: 0.8rem; color: var(--alt-text-muted); }
.pm-timeline-changes { margin: 0 0 4px; padding-left: 1.2em; color: var(--alt-text-strong); font-size: 0.9rem; }
.pm-timeline-body { margin-top: 4px; }
.pm-comment-edit { margin-top: 6px; }

/* ---- Markdown 本文 ---- */
/* 段落・コード・表・引用・画像の上限は**シェルの .alt-markdown（app.css）が持つ**（2026-09-17）＝Core の
   MarkdownHelper.Render がその class で包んで返し、`.pm-markdown` の要素はその外側に付く。
   ここに残すのは Pm の本文だけの体裁。 */
.pm-markdown { line-height: 1.7; }
/* 本文の画像は原寸の 50% で並べる（幅は js/pm-image-zoom.js が実寸から入れる）。
   画面からはみ出さないための上限は .alt-markdown img にあり、狭い画面では 50% より小さく出る。 */
.pm-markdown img.pm-zoomable { cursor: zoom-in; }
/* 本文・コメントの中の課題キーの自動リンク（Models/IssueLinks。TEST1-62）。
   ふつうのリンクと同じ見た目にすると、書いた人がリンクを貼ったのか自動で付いたのか読めないので、
   キーの見た目（.pm-key）に似せて「これは課題の参照」と分かる形にする。**借りずに似せている**のは、
   .pm-key が地色付きのチップで、本文の中に並ぶと文章が読みにくくなるため。 */
.pm-issue-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; text-decoration: none; border-bottom: 1px dotted currentColor; }

/* 入力欄のプレビュー（ポップアップの中身）。長い本文でも画面を超えないよう中でスクロールさせる。 */
.pm-preview-body { max-height: 60vh; overflow-y: auto; }

/* 原寸のポップアップ（膜・×・Esc で閉じる。画像自身のクリックでは閉じない）。
   z-index は DevExpress のポップアップ（1000 台）より上に置く＝簡易ビューから開いた課題詳細でも膜が前に出る。 */
.pm-zoom-overlay { position: fixed; inset: 0; z-index: 1600; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .72); }
.pm-zoom-overlay img { max-width: 92vw; max-height: 92vh; object-fit: contain; cursor: default; }
.pm-zoom-close {
    position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; line-height: 1;
    font-size: 1.4rem; color: #fff; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%; cursor: pointer;
}

/* ---- 設定「休日」タブ ---- */
.pm-inline .pm-year { width: 110px; }

/* ---- サマリカード（バーンダウン） ---- */
.pm-summary-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pm-summary-card { flex: 1 1 150px; min-width: 150px; margin: 0; }
.pm-summary-card .num { font-size: 1.6rem; font-weight: 700; display: block; }
.pm-summary-card .lbl { color: var(--alt-text-sub); font-size: 0.85rem; }
.pm-burndown { height: 420px; max-width: 980px; margin-top: 8px; }
/* 「対象」の選択欄（/pm/projects/{Key}/burndown）。選択肢はマイルストーン名なので、状態の選択欄（alt-status-select・180px）を
   借りると「（プロジェクト全体）」も 20 文字ほどの名前も切れる。あちらを広げるとほかの画面の幅まで動くので専用の幅を持つ。 */
.grid-toolbar .pm-burndown-target { width: 340px; }
.pm-chart-tooltip { margin: 0.6rem 0.8rem; }
.pm-chart-tooltip-title { font-weight: 600; }

/* ---- カンバンボード ---- */
.pm-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: none; padding-bottom: 12px; }
/* 列（レーン）は状態の色（--pm-lane）を面の色へ混ぜて塗る＝見出しまで目を戻さなくても、どの列がどの状態か分かるように。
   既定は未対応の色で、ほかの基本状態は .pm-lane-*（課題の状態の節）、カスタム状態は設定の色を PmBoard.razor が style で差す。
   面（--alt-surface）へ混ぜるので暗いテーマでも暗い面に色が乗るだけで、カードは面の色のまま浮いて見える。 */
.pm-board-col { --pm-lane: #64748b; flex: 1 0 240px; min-width: 240px; background: color-mix(in srgb, var(--pm-lane) 18%, var(--alt-surface)); border: 1px solid color-mix(in srgb, var(--pm-lane) 45%, var(--alt-surface)); border-radius: 8px; padding: 8px; min-height: 240px; }
.pm-board-col.drag-over { border-color: var(--alt-accent); background: var(--alt-accent-soft); }
.pm-board-col-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; font-weight: 600; }
/* 処理中・処理済みのバッジの地はレーンの塗りとほぼ同じ色（ライトの処理中は --alt-status-inprogress-bg とレーンの塗りがほぼ同じ）で、形が地に溶ける。文字色を薄めた輪郭で縁取る。 */
.pm-board-col-head .alt-status-pill { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
.pm-board-count { color: var(--alt-text-sub); font-weight: 500; }
.pm-board-card { background: var(--alt-surface); border: 1px solid var(--alt-border); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; }
.pm-board-card:hover { border-color: var(--alt-text-muted); }
.pm-board-card[draggable="true"] { cursor: grab; }
.pm-board-card-top { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.pm-board-card-title { font-size: 0.9rem; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pm-board-card-meta { display: flex; gap: 10px; font-size: 0.82rem; color: var(--alt-text-sub); }
.pm-board-more { display: block; text-align: center; padding: 6px; font-size: 0.85rem; }

/* ---- ガントチャート（自前描画。左ペイン幅・ヘッダー高・行高は PmGantt.razor の定数を CSS 変数 --pm-gantt-left/head/row で受ける） ---- */
.pm-gantt { overflow: auto; overscroll-behavior-x: none; max-height: calc(100vh - 260px); border: 1px solid var(--alt-border); border-radius: 6px; background: var(--alt-surface); }
.pm-gantt-empty { padding: 14px; margin: 0; }
.pm-gantt-canvas { position: relative; min-width: 100%; }
.pm-gantt-row { display: flex; height: var(--pm-gantt-row); border-bottom: 1px solid var(--alt-bg-muted); }
.pm-gantt-row.pm-gantt-head { position: sticky; top: 0; z-index: 5; height: var(--pm-gantt-head); font-size: 0.8rem; color: var(--alt-text-sub); border-bottom: 1px solid var(--alt-border); }
.pm-gantt-left {
    position: sticky; left: 0; z-index: 4; width: var(--pm-gantt-left); min-width: var(--pm-gantt-left); max-width: var(--pm-gantt-left);
    background: var(--alt-surface); border-right: 1px solid var(--alt-border); padding: 0 10px;
    display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; font-size: 0.86rem;
}
.pm-gantt-head .pm-gantt-left, .pm-gantt-head .pm-gantt-tl { background: var(--alt-bg-subtle); }
.pm-gantt-left a { flex: none; }
.pm-gantt-left .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pm-gantt-ms-row .pm-gantt-left { color: var(--alt-warning-text); font-weight: 600; }
.pm-gantt-indent { flex: none; text-align: right; color: var(--alt-text-muted); font-size: 0.75rem; }
.pm-gantt-row:not(.pm-gantt-head):hover > .pm-gantt-left, .pm-gantt-row:not(.pm-gantt-head):hover > .pm-gantt-tl { background-color: var(--alt-bg-subtle); }
.pm-gantt-tl {
    position: relative; flex: none;
    /* 週単位（月曜）の縦罫線。タイル幅・位置はインライン style で指定する。 */
    background-image: linear-gradient(to right, var(--alt-border) 0 1px, transparent 1px);
    background-repeat: repeat-x;
}
.pm-gantt-month { position: absolute; top: 2px; height: 18px; border-left: 1px solid var(--alt-border-strong); padding: 0 5px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.pm-gantt-day { position: absolute; bottom: 2px; font-size: 0.68rem; color: var(--alt-text-muted); text-align: center; }
.pm-gantt-day.we { color: #cc7070; }
.pm-gantt-day.hd { color: var(--alt-danger); background: rgba(220, 90, 80, 0.12); font-weight: 600; }
.pm-gantt-bar { position: absolute; top: 7px; height: 20px; border-radius: 4px; cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); touch-action: none; }
.pm-gantt-bar.readonly { cursor: pointer; }
/* バー色: 状態バッジと同系（未対応=赤/処理中=青/処理済み=緑/完了=グレー） */
.pm-gantt-bar.s1 { background: #e06a86; }
.pm-gantt-bar.s2 { background: #4f83cc; }
.pm-gantt-bar.s3 { background: #5aa66b; }
.pm-gantt-bar.s4 { background: #9aa4b2; }
.pm-gantt-handle { position: absolute; top: 0; width: 8px; height: 100%; cursor: ew-resize; }
.pm-gantt-handle.h-l { left: -2px; }
.pm-gantt-handle.h-r { right: -2px; }
/* 依存作成ハンドル（バー右端の○。hover 時のみ表示） */
.pm-gantt-handle.h-link { right: -14px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: var(--alt-surface); border: 2px solid var(--alt-accent-weak); cursor: crosshair; opacity: 0; z-index: 3; }
.pm-gantt-bar:hover .pm-gantt-handle.h-link { opacity: 1; }
.pm-gantt-bar.link-target { outline: 2px solid var(--alt-accent-weak); outline-offset: 1px; }
.pm-gantt-linkline { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 6; overflow: visible; }
.pm-gantt-linkline line { stroke: var(--alt-accent-weak); stroke-width: 1.5; stroke-dasharray: 4 3; }
.pm-gantt-ms { position: absolute; top: 6px; color: #b58900; font-size: 0.95rem; line-height: 1; pointer-events: none; }
.pm-gantt-msline { position: absolute; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, rgba(181, 137, 0, 0.55) 0 6px, transparent 6px 10px); z-index: 3; pointer-events: none; }
.pm-gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(44, 111, 217, 0.55); z-index: 3; pointer-events: none; }
.pm-gantt-deps { position: absolute; top: 0; pointer-events: none; z-index: 2; overflow: visible; }
.pm-gantt-dep-line { stroke: var(--alt-text-muted); stroke-width: 1.5; opacity: 0.85; }
.pm-gantt-dep-arrow { fill: var(--alt-text-muted); opacity: 0.85; }
/* 依存線の当たり判定（透明の太線。hover でうっすら見せてクリック解除を示す） */
.pm-gantt-dep-hit { stroke: transparent; stroke-width: 9; pointer-events: stroke; cursor: pointer; }
.pm-gantt-dep-hit:hover { stroke: rgba(77, 124, 199, 0.22); }
.pm-gantt-zoom { display: inline-flex; border: 1px solid var(--alt-border-strong); border-radius: 4px; overflow: hidden; }
.pm-gantt-zoom button { border: none; background: var(--alt-surface); color: var(--alt-text-sub); padding: 0.4rem 0.9rem; cursor: pointer; font-size: 0.85rem; }
.pm-gantt-zoom button + button { border-left: 1px solid var(--alt-border-strong); }
.pm-gantt-zoom button.on { background: var(--alt-accent); color: var(--alt-on-accent); font-weight: 600; }
.pm-gantt-undated { margin-top: 14px; padding: 10px 14px; background: var(--alt-bg-subtle); border: 1px solid var(--alt-border); border-radius: 6px; }
.pm-gantt-undated h3 { margin: 0 0 6px; font-size: 0.92rem; color: var(--alt-text-sub); }
.pm-gantt-undated ul { margin: 0; padding-left: 1.2rem; }
.pm-gantt-undated li { margin: 2px 0; font-size: 0.9rem; }
.pm-nowrap { white-space: nowrap; }

/* ---- Wiki（左＝ページツリー／右＝本文・編集・履歴）---- */
/* minmax(0, 1fr) にするのは、ツリーで 1 行に切る長いページ名などが列の最小幅になってページを横に広げないようにするため（1fr は最小値が auto）。 */
.pm-wiki { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.pm-wiki-side, .pm-wiki-history { background: var(--alt-bg-subtle); border: 1px solid var(--alt-border); border-radius: 8px; padding: 10px; }
.pm-wiki-search { margin-bottom: 8px; }
.pm-wiki-tree, .pm-wiki-tree ul { list-style: none; margin: 0; padding-left: 0; }
.pm-wiki-tree ul { padding-left: 16px; }
.pm-wiki-tree li { margin: 2px 0; }
.pm-wiki-tree a { display: block; padding: 3px 6px; border-radius: 4px; color: var(--alt-heading); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-wiki-tree a:hover { background: var(--alt-bg-muted); }
.pm-wiki-tree a.is-active { background: var(--alt-accent-soft-strong); font-weight: 600; }
.pm-wiki-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid var(--alt-border); padding-bottom: 6px; margin-bottom: 10px; }
.pm-wiki-title { margin: 0; font-size: 1.25rem; }
.pm-wiki-actions { margin-left: auto; display: flex; gap: 6px; }
.pm-wiki-body { min-height: 200px; }
.pm-wiki-editrow { margin: 8px 0; }
.pm-inline .pm-wiki-title-input { width: 320px; }
.pm-inline .pm-wiki-parent-select { width: 260px; }
.pm-wiki-editor { width: 100%; }
/* Wiki のタグ。チップはシェルの .alt-filter-chip を使う（× を出さないときの余白はシェル側が見る）。
   長い名前（上限 50 字）でサイドバーが縦に伸びるので、チップ側で省略する（全体は title 属性で読める）。 */
.pm-inline .pm-wiki-tags-input { width: 260px; }
.pm-wiki-tags { margin: 0 0 8px; }
.pm-wiki-tags .alt-filter-chip-name { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-wiki-history { padding: 10px 12px; margin-bottom: 12px; }
.pm-wiki-history .pm-ref-table tr.is-active td { background: var(--alt-accent-soft); }
.pm-wiki-revision { margin-top: 10px; padding: 8px 12px; background: var(--alt-surface); border: 1px solid var(--alt-border); border-radius: 6px; }
.pm-wiki-revision .pm-wiki-title { font-size: 1rem; }
.pm-wiki-revision .pm-wiki-body { min-height: 0; }
@media (max-width: 900px) { .pm-wiki { grid-template-columns: minmax(0, 1fr); } }

/* ---- ファイル共有 ---- */
.pm-fs-folder { font-weight: 600; color: var(--alt-heading); }
.pm-fs-file { color: var(--alt-accent); text-decoration: none; }
.pm-fs-file:hover { text-decoration: underline; }
/* 版のコメント（履歴の窓）。長さが決まらないので改行をそのまま出して折り返す（空白の無い英字の長い列も折る） */
.pm-fs-version-comment { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- プロジェクト一覧（/pm/projects）: 右にウォッチ中の課題を並べる ---- */
/* minmax(0, 1fr) にするのは、中身（DxGrid・1 行に切る件名）の幅で列が広がらないようにするため（min-width:auto が既定）。
   1 列になる 900px 以下も同じ＝`1fr` だと 375px でページが 414px に広がった（2026-09-17 実測）。 */
.pm-projects-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.pm-projects-main { min-width: 0; }
/* ウォッチ中の課題を出す 2 画面は class を画面ごとに分ける（ここ・課題一覧の脇 `.pm-issues-watch-*`。横断の一覧はシェルの `.alt-watching-note`）。
   共有の名前（旧 `.pm-watch-*`）に戻さない＝理由は docs/claude/pitfalls.md の「モジュールの CSS はクラス名をモジュールで分ける」。 */
.pm-projects-watch-panel { padding: 12px 14px; }
/* 追いかけている課題が多い人でもページが伸び切らないよう、パネルの中だけで送る。 */
.pm-projects-watch-list { max-height: 60vh; overflow-y: auto; margin-top: 6px; }
.pm-projects-watch-item { display: block; padding: 7px 2px; border-bottom: 1px solid var(--alt-border); text-decoration: none; color: inherit; }
.pm-projects-watch-item:last-child { border-bottom: none; }
.pm-projects-watch-item:hover { background: var(--alt-accent-soft); }
.pm-projects-watch-item-head { display: flex; align-items: center; gap: 6px; }
.pm-projects-watch-item-title { display: block; margin-top: 2px; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-projects-watch-item-project { display: block; font-size: 0.78rem; color: var(--alt-text-muted); }
.pm-projects-watch-more { display: inline-block; margin-top: 8px; font-size: 0.85rem; }
/* 狭い画面では脇に置けないのでプロジェクト一覧の下へ回す（Wiki の 2 段組みと同じ境目）。 */
@media (max-width: 900px) { .pm-projects-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---- 課題登録の入口（/pm/issues/new）: 登録できるプロジェクトの選択リスト ---- */
.pm-pick-item { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--alt-border); text-decoration: none; color: inherit; }
.pm-pick-item:last-child { border-bottom: none; }
.pm-pick-item:hover { background: var(--alt-accent-soft); }
.pm-pick-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- カスタム属性の設定の固有欄 ---- */
.pm-inline .pm-category-select { width: 160px; }

/* ---- @メンション（MentionMemo の入力欄・候補ポップアップ・本文の強調）と宛先のアイコン ---- */
.pm-mention-wrap { position: relative; }
/* 画像とファイルの入口を取り違えないための注記。読み飛ばされないよう赤で出す。 */
.pm-memo-note { margin: 2px 0 4px; color: var(--alt-danger); font-size: 0.82rem; }
.pm-mention-input { display: block; width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--alt-border-strong); border-radius: 4px; font: inherit; line-height: 1.5; resize: vertical; background: var(--alt-surface); color: inherit; }
.pm-mention-input:focus { outline: none; border-color: var(--alt-accent); box-shadow: 0 0 0 2px var(--alt-accent-soft); }
.pm-mention-pop { position: absolute; z-index: 20; min-width: 220px; max-height: 240px; overflow-y: auto; background: var(--alt-surface); border: 1px solid var(--alt-border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px 0; }
.pm-mention-pop button { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 5px 10px; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.pm-mention-pop button:hover, .pm-mention-pop button.is-active { background: var(--alt-bg-muted); }
.pm-mention-token { font-weight: 600; }
.pm-mention-name { color: var(--alt-text-sub); font-size: 0.85rem; }
.pm-mention { color: var(--alt-accent); font-weight: 600; }
/* タイムラインの宛先（@メンション／CC。TEST1-131）。行の右下にアイコンを横に並べ、名前・種別・既読はホバーで出す。 */
.pm-recipients { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.pm-recipient { position: relative; display: inline-flex; line-height: 0; }
/* 既読はアイコンの右下の ✓（ホバーしなくても誰が読んだかが分かる）。縁取りで隣のアイコンと重なっても読める。 */
.pm-recipient-check {
    position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%;
    background: var(--alt-success); color: var(--alt-on-accent); font-size: 9px; font-weight: 700; line-height: 13px; text-align: center;
    box-shadow: 0 0 0 1.5px var(--alt-surface); pointer-events: none;
}

/* ---- GitHub 連携（プロジェクト設定のリポジトリタブ・登録ウィザード） ---- */
.pm-repo-ok { color: var(--alt-success, #2FA36B); }
/* ウィザードのステップ（矢羽）。**いまどこにいるかは形と色で示す**＝文字の太さだけで分けていた頃は、
   3 つ並んだうちのどれが現在なのか一目で分からなかった。矢は clip-path で切り出し、左端の切り込みで前の矢を受ける。
   折り返さない（nowrap）代わりに文字の側を折り返させる＝矢羽が段に割れると順序の線が切れて読めなくなる。
   色は既定のトークンだけで組む＝濃色テーマは themes.css が同じ変数を差し替えるので、ここに濃色用の分岐を書かない。 */
.pm-wizard-table th { width: 30%; }
.pm-wizard-table code { word-break: break-all; }

/* ---- Backlog 取込ウィザード ---- */
.pm-import-head { margin: 16px 0 6px; font-size: 1rem; }
/* 取込結果の本文だけの余白。**`.pm-markdown` に書かない**＝この節に `.pm-markdown { margin-top: 12px }` があった頃は
   Pm の本文すべて（課題の本文とタイムライン・簡易ビュー・Wiki・AI 要約・コメント欄のプレビュー）の上の余白が 12px になり、
   タイムラインの `.pm-timeline-body`（4px）にも勝っていた（2026-09-17 に絞った）。 */
.pm-import-report { margin-top: 12px; }

/* ---- ヘッダーカラー・プロジェクトアイコン（概要タブの基本情報） ---- */
.pm-color-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 人（円）と見分けられるよう角丸四角で描く（サイドバーでは同じ列に並ぶ）。
   縦横比の違う画像でも崩れないよう cover で切り抜く。 */
.pm-project-icon { flex: none; border-radius: 8px; object-fit: cover; background: var(--alt-bg-secondary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.pm-icon-edit { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 8px; }
.pm-icon-ops { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
/* 狭い画面では 96px の画像と操作列が横並びのままだと潰れる（個人設定のアイコン欄と同じ扱い）。 */
@media (max-width: 640px) { .pm-icon-edit { flex-direction: column; } }

/* ==================================================================
   プロジェクト管理サマリー（/pm/summary）。chaser から移植。
   もとはシェルのダッシュボード（/）への差し込みで、サイドバーの見出しが開く画面へ移した。
   クラス名は **pm-dash-** で揃えてある（dash- はダッシュボードに居たころの名残）。
   pm-summary- にしないのは、その名前が既にバーンダウンの件数カード（.pm-summary-card）で使われているため。
   ================================================================== */

/* ---- 2 カラム（左 2/3 ＝ 主段／右 1/3 ＝ 脇） ----
   もとはダッシュボードのレイアウトとしてシェル（app.css）に居たもの。使うのがこの画面だけになったので
   こちらへ移した（シェルに置くのは 2 つ以上のモジュールが使うものだけ、という app.css の約束に合わせる）。
   折り返しの境目が Pm のほかの 2 段組み（900px）より広いのは、ここは主段が 6 列のグリッドで
   脇にチャートが並ぶため＝900px まで横に並べると両方とも読めなくなる。 */
.pm-dash-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

/* グリッドは中身が広いので min-width:0 が無いと列が縮まらずはみ出す。 */
.pm-dash-main,
.pm-dash-side { min-width: 0; }

/* 狭い画面では脇を下へ回す。 */
@media (max-width: 1100px) {
    .pm-dash-columns { grid-template-columns: 1fr; }
}

/* ---- 集計帯 ---- */

/* 「自分担当分」トグル（カード群の直上・右端） */
.pm-dash-stats-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
    font-size: 0.8rem;
}

.pm-dash-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.pm-dash-card {
    flex: 1 1 140px;
    min-width: 120px;
    padding: 12px 14px;
    border: 1px solid var(--alt-border);
    border-radius: var(--alt-radius-sm, 6px);
    background: var(--alt-surface);
    text-align: center;
}

/* 期限超過は一番に気づいてほしい数字なので、他のカードと色で差をつける。 */
.pm-dash-card.is-warn { border-color: var(--alt-danger-border); background: var(--alt-danger-bg); }
.pm-dash-card.is-warn .num { color: var(--alt-danger-text); }

.pm-dash-card .num { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.pm-dash-card .lbl { display: block; font-size: 0.82rem; color: var(--alt-text-secondary); }

/* プロジェクト別の内訳 */
.pm-dash-proj-counts { margin-bottom: 18px; overflow-x: auto; overscroll-behavior-x: none; }
.pm-dash-proj-counts table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.pm-dash-proj-counts th,
.pm-dash-proj-counts td { border-bottom: 1px solid var(--alt-border); padding: 5px 10px; text-align: right; white-space: nowrap; }
.pm-dash-proj-counts th.name,
.pm-dash-proj-counts td.name { text-align: left; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.pm-dash-proj-counts th { color: var(--alt-text-secondary); font-weight: 600; }
.pm-dash-proj-counts .warn { color: var(--alt-danger-text); font-weight: 700; }

/* ---- 主段（課題の一覧） ---- */

/* 見出しの右に操作ボタンを置く行 */
.pm-dash-sec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pm-dash-sec-head .section-title { margin-bottom: 0; }

/* 課題キーのリンク（ボードのカード。クリックで詳細へ。カードを押したときの簡易ビューとは別の動き） */
.pm-id-link { color: var(--alt-brand); cursor: pointer; text-decoration: none; }
.pm-id-link:hover { text-decoration: underline; }

/* 課題の一覧の件名（件名の列を押すと詳細へ移る＝IssueGridClick。2026-10-17・TEST1-718）。
   ふだんは文字の色のまま＝行が全部リンクの色だと一覧が読みにくい。当てたときだけリンクの形にして、詳細へ移ることを示す。 */
.pm-issue-grid td:hover > .alt-key-title > .alt-key-title-text { color: var(--alt-brand); text-decoration: underline; }

/* 件名の下に出す本文プレビュー（3 行で切る） */
.pm-row-preview {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--alt-text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* 上位プロジェクトから混ぜた課題の行（子プロジェクトの課題一覧で「上位も表示」にしたとき）。
   この一覧のものではない＝参照専用、という印なので淡くする。**文字を薄くするだけで色は変えない**
   ＝種別・状態・優先度のバッジは色そのものが意味を持つので、行ごと別の色にすると読み違える。
   表示中の行（app.css の .alt-current-row）が重なったときはそちらの背景が勝つ（あちらは !important）。 */
/* 淡さは .pm-archived（終わったもの）と同じ 0.6 に揃える＝同じ一覧にアーカイブのキーと
   上位の行が並んだとき、意味の違わない 2 段階の淡さを作らない。 */
/* 階層表示で展開した子・孫のうち、自分は絞り込みに一致せず、一致した子孫への道筋として残した課題の行（.pm-path-row）も
   同じ淡さ（主役ではない、という同じ意味）。上位の行と見分けるために斜体を足す。 */
.pm-foreign-row > td,
.pm-path-row > td { opacity: 0.6; }
.pm-path-row > td { font-style: italic; }

/* 人の 1 行表示（アイコン＋氏名。部品 UserLabel の器）。タイムラインの行はもともと横並びなので追加の指定は要らない。 */
.pm-user-label { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pm-user-label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* CC の候補の先頭に出す「前回選択したメンバーを追加」の行（TEST1-153）。
   人の行はアイコン＋氏名なので、こちらは字面だけで操作だと分かるようにしておく。 */
.pm-cc-recent { color: var(--alt-accent); font-size: 0.9rem; }

/* コメントの絵文字リアクション（タイムラインの本文の下）。 */
.pm-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.pm-reaction {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; min-height: 24px;
    font-size: 0.85rem; line-height: 1.4; background: var(--alt-bg-muted); color: var(--alt-text);
    border: 1px solid var(--alt-border); border-radius: 999px; cursor: pointer;
}
.pm-reaction:disabled { cursor: default; }
/* 自分が付けたものは枠と地の色で分かるようにする（数だけでは自分が入っているか読めない）。 */
.pm-reaction.is-mine { background: var(--alt-accent-soft); border-color: var(--alt-brand); }
.pm-reaction-count { color: var(--alt-text-sub); }
.pm-reaction-picker { position: relative; display: inline-flex; }
.pm-reaction-list {
    position: absolute; left: 0; top: 100%; z-index: 20; display: flex; gap: 2px; padding: 4px;
    background: var(--alt-surface); border: 1px solid var(--alt-border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* 課題一覧＋ウォッチ中パネルの横並び。パネルは決まった幅、一覧が残りを取る。
   class はプロジェクト一覧の `.pm-projects-watch-*` と分けている（あちらの節のコメント）。 */
.pm-issues-layout { display: flex; gap: 12px; align-items: flex-start; }
/* min-width:0＝中のグリッドが縮めるようにする。container-type と --pm-child-indent＝階層表示の子課題の一覧の幅の基準と字下げ（下の節） */
.pm-issues-main { flex: 1 1 auto; min-width: 0; container-type: inline-size; --pm-child-indent: 24px; }
.pm-issues-watch-panel {
    flex: 0 0 260px; max-height: 70vh; overflow-y: auto;
    background: var(--alt-surface); border: 1px solid var(--alt-border); border-radius: 6px; padding: 8px 10px;
}
.pm-issues-watch-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 0.95rem; }
.pm-issues-watch-panel ul { list-style: none; margin: 0; padding: 0; }
.pm-issues-watch-panel li { padding: 4px 0; border-top: 1px solid var(--alt-border); }
.pm-issues-watch-panel li:first-child { border-top: none; }
/* 件名と「ウォッチを止める」の × を1行に。件名は min-width:0 で縮めて、× は縮めない。 */
.pm-issues-watch-item-row { display: flex; align-items: center; gap: 6px; }
/* 件名の下の線はメモの行との区切り（li の上線は課題どうしの区切り）。余白・文字色・ホバーの地色は、
   class を分ける前にプロジェクト一覧の定義から拾っていた見た目をそのまま持つ。 */
.pm-issues-watch-item {
    flex: 1 1 auto; min-width: 0; text-align: left; padding: 7px 2px; border-bottom: 1px solid var(--alt-border); color: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pm-issues-watch-item:hover { background: var(--alt-accent-soft); }
.pm-issues-watch-drop { flex: 0 0 auto; color: var(--alt-text-muted); line-height: 1; }
.pm-issues-watch-drop:hover { color: var(--alt-danger); }
.pm-issues-watch-note-row { display: flex; align-items: center; gap: 6px; }
/* メモは本人にしか見えないもの。目立たせるために赤（chaser と同じ）。 */
.pm-issues-watch-note { color: var(--alt-danger); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* メモを書くボタンは小さいピルにし、縮めない＝長いメモに押されて幅 26px の「メ／モ」の縦 2 行に折れていた。
   縮むのはメモの文のほう（上の省略記号で切れる）。
   **`margin-left: auto` で常に右端に置く**（2026-09-18。洋二さんの指定）＝メモの文が無い行ではボタンが左に寄り、
   行によって押す場所が変わっていた。右端なら上の行の ×（ウォッチを止める）と右端が揃う。
   **`justify-content: space-between` では直らない**＝メモの文は在るときだけ描くので、無い行は子が 1 つになって左へ寄る。
   脇のパネルの操作を右端へ寄せる書き方は `.alt-todo-actions`（app.css）と同じ。 */
.pm-issues-watch-note-button {
    flex: 0 0 auto; margin-left: auto; padding: 0 8px; font-size: 0.75rem; line-height: 1.6;
    color: var(--alt-text-sub); border: 1px solid var(--alt-border); border-radius: 999px;
}
.pm-issues-watch-note-button:hover { background: var(--alt-bg-muted); }

/* 狭い画面では右下に浮かせる（一覧の幅を削らない）。
   下端は**シェルのステータスバーと、その右上に浮かぶ「ページの先頭へ移動」（TEST1-149）の上**＝どちらも同じ重なり順（30）で
   本文より後ろに描かれるので、重ねるとパネルの右下（行の「ウォッチをやめる」×）がボタンの下に隠れる。
   高さはシェルのトークン 1 本だけを読む（ボタンの置き方の式はシェルが持つ。ここで組み直さない）。 */
@media (max-width: 900px) {
    .pm-issues-layout { display: block; }
    .pm-issues-watch-panel {
        position: fixed; right: 12px; bottom: var(--alt-to-top-clearance); z-index: 30; width: 260px; max-height: 50vh;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    }
}

/* 課題一覧の階層表示（親行の展開に出す子課題の一覧＝入れ子のグリッド。Shared/IssueChildGrid.razor）。
   展開した領域の地は一覧より一段沈め、入れ子のグリッドは白地のまま浮かせる＝どこからどこまでが
   どの親の子なのかを、列見出しの繰り返しだけに頼らず読めるようにする（DevExpress の Nested Grid のデモと同じ見え方）。
   **詳細セルの余白は DevExpress の既定（四方 24px）に任せず、全部ここで決める**（既定に勝つには !important が要る。§7）
   ＝字下げ（左）は --pm-child-indent（.pm-issues-main が持つ）の 1 本で、下の sticky の left と幅も同じ変数から作る。
   DevExpress の内部の値をなぞる数字を置くと、版上げで既定が変わった日に字下げと幅が黙ってずれる。
   - 上下は 6px＝既定の 24px だと、親の行と子の一覧の間・子の一覧の下に行 1 本ぶんの空きができる
   - 右は 0＝孫の一覧は子と同じ列を持つが、展開の列（31px）が無いぶん短い。右にも余白を取ると、その差より余白のほうが大きく、
     孫の一覧に 20px ほどの横スクロールが出て子の一覧の横スクロールと二重になる（実測）。字下げが展開の列の幅を超えない限り収まる */
.dxbl-grid-detail-cell:has(> .pm-child-grid) { background: var(--alt-bg-page) !important; padding: 6px 0 6px var(--pm-child-indent) !important; }
.pm-child-grid { background: var(--alt-bg-body); }
/* 一覧の行の展開（1 段目＝pm-child-grid-top）に出す子課題の一覧は、一覧の横スクロールに付いて行かず**見えている幅に収める**。
   一覧は列が多くて見えている幅より広く、詳細セルはその全幅を取るので、放っておくと子の一覧も同じ幅に広がり、
   右の列が画面の外へ出る（実測。一覧 2,451px に対して見えている幅 990px）。幅の基準は一覧の器（.pm-issues-main を container にして 100cqi）。
   **詳細セルの overflow を戻すこと**＝DxGrid のセルは overflow: hidden で（§7）、hidden の祖先があると sticky はそこを基準にして
   効かなくなる（一覧を横へ送ると子課題の一覧も一緒に流れる。実測）。幅は 100cqi で器に収めてあるので、戻してもはみ出さない。
   孫の一覧（2 段目）は子の一覧の中で、子の一覧の横スクロールと一緒に動く（列が揃ったまま動くので sticky にしない）。 */
.dxbl-grid-detail-cell:has(> .pm-child-grid-top) { overflow: visible !important; }
.pm-child-grid-top { position: sticky; left: var(--pm-child-indent); width: calc(100cqi - 2 * var(--pm-child-indent) - 2px); }

/* 子の無い行の展開ボタンを隠す（CustomizeElement が行に付ける）。
   DevExpress の内部クラス名は版で変わりうるので候補を広めに指定する（効かなくてもボタンが見えるだけ）。 */
.pm-no-children .dxbl-grid-expand-button,
.pm-no-children .dxbl-grid-expand-button-cell button,
.pm-no-children td.dxbl-grid-detail-cell button { visibility: hidden; }

/* 他プロジェクトからのマスタ取り込みダイアログの一覧。 */
.pm-master-import-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--alt-border); border-radius: 6px; padding: 6px; }
.pm-master-import-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; cursor: pointer; }
.pm-master-import-row.is-registered { color: var(--alt-text-sub); cursor: default; }

/* ボードの列見出しの ＋（その状態で課題を登録）。件数の前に置く。 */
.pm-board-add {
    margin-left: auto; width: 22px; height: 22px; line-height: 1; padding: 0;
    color: var(--alt-text-sub); background: none; border: 1px solid var(--alt-border); border-radius: 4px; cursor: pointer;
}
.pm-board-add:hover { color: var(--alt-brand); border-color: var(--alt-brand); }

/* ---- 簡易ビュー（ポップアップ） ---- */

/* 背景を継いでいるのは、上端に貼り付く pm-qv-head へ**器と同じ面の色**を渡すため
   （2026-09-07。TEST1-89）。テーマのトークンを直に置くと、暗いテーマで DevExpress 側が
   自分の色（Fluent の Dark）を使うので、貼り付いた行だけ色が違う。 */
.pm-quickview { display: flex; flex-direction: column; gap: 10px; background-color: inherit; }

/* 種別・状態などの行と、課題キー・件名の行。**本文をスクロールしても上端に残す**（2026-09-07。TEST1-89）
   ＝送り先の窓のヘッダー（前後送り・ツールバー）とこの行が、いま何を見ているかを表している。
   上の余白を自分の padding で持っているのは、貼り付く位置を容器の端に合わせるため
   ＝余白が容器（本文）の側に残ると、その隙間を本文が通り抜けて見える。
   背景を敷かないと下を通る本文が文字に重なる（色は器から継ぐ＝pm-quickview の doc を見ること）。
   `z-index` が要るのは、同じ器の**後ろ**に位置を持つ部品（@メンションの候補・リアクションの選び）が
   並ぶため＝ツリーの順で後にあるものは、指定しないと貼り付いたこの行の上に描かれる。 */
.pm-qv-head {
    display: flex;
    align-items: center;
    gap: 6px 10px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: inherit;
    padding-top: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--alt-border);
}

/* キーは課題詳細へのリンク（アンカー）なので、下線は当てたときだけにする。 */
.pm-qv-key { font-weight: 700; color: var(--alt-brand); cursor: pointer; white-space: nowrap; text-decoration: none; }
.pm-qv-key:hover { text-decoration: underline; }
.pm-qv-title { font-weight: 600; flex: 1; min-width: 0; }

/* 種別・状態・優先度などの行。貼り付く .pm-qv-head の先頭に置き、`flex: 0 0 100%` で 1 行を占める
   ＝課題キーと件名は折り返して次の行へ回る（2026-10-03。TEST1-416）。以前はこの行の外にあり、本文をスクロールすると
   種別や状態が見えなくなっていた。文字を件名より小さくするのは、貼り付く行が本文の場所を取りすぎないため。
   札（種別・状態）は一覧・ボード・詳細と共用で大きさが rem で決まっているので、**この行の中だけ**縮める。 */
.pm-qv-attrs {
    flex: 0 0 100%;
    display: flex;
    gap: 4px 10px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.78rem;
    color: var(--alt-text-secondary);
}
.pm-qv-attrs .pm-type-badge,
.pm-qv-attrs .alt-status-pill { font-size: 0.72rem; padding-top: 0; padding-bottom: 0; }

/* 本文の高さを切る（「スクロール表示」が On の人だけに付く。PmIssueQuickView の descriptionScroll）。
   Off の人は切らず、あふれた分は窓の本文（.pm-qv-scroll）ごとスクロールする＝課題キーの行は上端に残る。 */
.pm-qv-body { max-height: 30vh; overflow-y: auto; }

/* コメント欄のカードは外側の余白を持たない（折りたたみのカードにする前の `section.pm-qv-comment` と同じ。TEST1-418）。 */
.pm-qv-comment > .alt-card { margin: 0; }

/* コメント欄の操作の行（TEST1-418）＝CC・状態・完了理由・担当者・投稿を 1 行に並べ、幅が足りなければ折り返す。
   見出しは状態・担当者は欄の上、CC だけ欄の左（下の .pm-qv-comment-cc）。行は下端で揃える＝見出しの有無で高さが違っても欄の線が揃う。 */
.pm-qv-comment-controls { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.pm-qv-comment-controls label { display: block; font-size: 0.8rem; color: var(--alt-text-secondary); }
/* CC は見出しを欄の左に置き、**伸び縮みの幅を決める**＝札（選んだ人）が増えても行の隣を押し出さず、欄の中で折り返す
   （それまで CC だけで 1 行を占めていたのはこの押し出しを避けるためだった。TEST1-131）。 */
.pm-qv-comment-cc { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; }
.pm-qv-comment-cc > label { flex: none; }
.pm-qv-comment-cc > :not(label) { flex: 1 1 auto; min-width: 0; }
.pm-qv-comment-post { margin-left: auto; }

/* タイムラインは伸びすぎないよう高さを切る（続きは詳細画面）。 */
.pm-qv-timeline { max-height: 34vh; overflow-y: auto; }

/* 窓の中で本文を畳む（本文が無い）と、タイムラインのカードを**窓の下端まで伸ばし**、一覧の高さも切らない（2026-10-09。TEST1-528）
   ＝ほかを畳んだぶんだけコメントが広く見える。印の .pm-qv-fill は中身が付ける（PmIssueQuickView の TimelineFills）。
   縦の flex で「本文（.pm-qv-scroll）→ 中身 → タイムラインのカード」と余りを渡す。本文を flex にするのも印のあるときだけ
   ＝印の無い既定の形と、js/pm-quickview.js が幅を測る同じクラスの見えない要素には効かせない（右下の印は absolute なので並びに入らない）。
   一覧は自分でスクロールせず、あふれたぶんは窓の本文ごとスクロールする（課題キーの行は上端に残る）。
   一覧に下限を付けて残りへ伸ばす形にしないのは、短いタイムラインでも下限ぶんの空白で本文がスクロールしてしまうため。
   一覧の `overflow-y: auto` は残す＝高さを切らなければ縦には流れず、折り返せない長い行（コードブロック・URL）が
   今までどおり一覧の中で横へ流れる（visible にすると窓の本文ごと横へあふれた。実測）。 */
.pm-qv-scroll:has(> .pm-qv-fill) { display: flex; flex-direction: column; }
.pm-qv-scroll > .pm-qv-fill,
.pm-qv-scroll > .pm-qv-fill > .pm-qv-timeline-card { flex: 1 0 auto; }
.pm-qv-scroll > .pm-qv-fill .pm-qv-timeline { max-height: none; }

/* コメント欄のプレビュー（その場で開く折りたたみ）。入力欄と地続きに見えないよう枠で囲む。 */
.pm-qv-preview {
    margin-top: 6px;
    padding: 8px 10px;
    max-height: 30vh;
    overflow-y: auto;
    background: var(--alt-bg-subtle);
    border: 1px solid var(--alt-border);
    border-radius: 6px;
}

/* 枠の大きさは課題によらず固定（高さは Razor の Height）。中身の量で窓が伸び縮みすると、
   次へで送るたびにボタンの位置が動く。あふれるぶんは本文の側でスクロールさせる。

   **名前は Razor の側で付けてもらう**（2026-09-07。TEST1-89）＝下の 2 つは `BodyCssClass` /
   `HeaderCssClass` で付く自分のクラスで、ここには **DevExpress のクラス名を書かない**。
   以前あった `.pm-qv-popup [class*="popup-body"]` は、本文が `dxbl-modal-body` としか名乗らないので
   どこにも当たっておらず、あふれた中身はそのまま外へ出て窓を包む器がページごとスクロールしていた
   （＝ヘッダーが閉じるボタンごと流れる。これが今回の原因で、**当たっていないだけなので
   例外もログも出ない**）。

   書いているのは向こうが指定していない 3 つだけ（`flex: 1 1 auto` は向こうが持っているので書かない）。
   flex の子は既定で縮まないので `min-height: 0` が要り、これが無いと `overflow-y` を書いても
   高さが中身なりに伸びて器の外へあふれる。上の余白は先頭の pm-qv-head を器の端へ貼り付けるために外す
   （余白はあちらが持つ）＝残すと、貼り付いた行の上に空いたその隙間を本文が通り抜けて見える。
   **余白だけ `!important` が要る**＝向こうはクラスを 5 つ以上重ねたセレクタで指定していて、こちらのクラス 1 つ
   では詳細度で勝てない（指定の無い性質は普通に当たるので、**一部だけ効いて一部が黙って落ちる**）。

   **左右の余白もこちらで持つ**（2026-09-19）＝窓の既定の幅（コメントの枠が収まる幅）を js/pm-quickview.js が
   このクラスの見えない要素から読むため（DevExpress のクラスが無いところでは向こうの余白が読めない）。
   値の 16px は**いまほかの窓にも効いている値**に合わせた＝テーマの値は 1.5rem（24px）だが、シェルの app.css が
   クラス 6 つで 16px に言い直している（25.2 までは帳票ビューアの CSS が持っていた規則。経緯は app.css のその規則の注記）。
   `scrollbar-gutter: stable` は、スクロールバーが幅を取る環境で、あふれない課題でもその幅を空けておくため
   ＝測るときは必ず足しているので、空けておかないと中身が短い課題だけ右に隙間が出る。 */
.pm-qv-scroll {
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-top: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
/* 右下の大きさ変更の印（2026-09-19）。掴んで引く処理は js/pm-quickview.js、覚えるのは PmQuickViewPopup.razor。
   **本文（.pm-qv-scroll）の中に置いても本文と一緒にスクロールしない**＝本文は位置の基準を作らない（position を
   書いていない）ので、印の基準は本文の外側の器になる。本文に position を足すと、印が中身と一緒に流れていく。
   斜めの 2 本線は文字色の薄いトークンで描く＝テーマに付いていく。`touch-action: none` はタッチで引いたときに
   画面のスクロールと取り合わないため。 */
.pm-qv-resize-grip {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 2;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    touch-action: none;
    opacity: .75;
    background: linear-gradient(135deg,
        transparent 0 50%, var(--alt-text-muted) 50% 58%,
        transparent 58% 70%, var(--alt-text-muted) 70% 78%,
        transparent 78%);
}
.pm-qv-resize-grip:hover { opacity: 1; }
.pm-qv-popup .pm-qv-nav { flex: 1; margin: 0; padding: 0; border-bottom: none; }

/* 順に確認のナビ（ポップアップのヘッダー） */
.pm-qv-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pm-qv-nav-title { font-weight: 600; }
.pm-qv-nav-pos { font-size: 0.85rem; color: var(--alt-text-secondary); }
.pm-qv-nav-proj { margin-left: auto; font-size: 0.85rem; color: var(--alt-text-secondary); }

/* ---- 脇（マイルストーン） ---- */

.pm-ms-group { margin-bottom: 10px; }

.pm-ms-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
    padding: 4px 2px;
    text-align: left;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
}

.pm-ms-group-head:hover { background: var(--alt-accent-soft); }
.pm-ms-caret { color: var(--alt-text-tertiary); font-size: 0.75rem; }
.pm-ms-group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-ms-group-count { color: var(--alt-text-tertiary); font-size: 0.8rem; }

.pm-ms-list { list-style: none; margin: 0; padding: 0 0 0 14px; }

.pm-ms-list li {
    border-top: 1px solid var(--alt-border);
    padding: 6px 4px;
    cursor: pointer;
}

.pm-ms-list li:hover { background: var(--alt-accent-soft); }
.pm-ms-list li.selected { background: var(--alt-accent-soft-strong); }

.pm-ms-line { display: flex; gap: 8px; align-items: baseline; font-size: 0.85rem; }
.pm-ms-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pm-ms-count { color: var(--alt-text-secondary); white-space: nowrap; }
.pm-ms-open { margin-left: auto; font-size: 0.8rem; }

/* 進捗バー */
.pm-ms-bar {
    margin-top: 4px;
    height: 5px;
    border-radius: 3px;
    background: var(--alt-border);
    overflow: hidden;
}

.pm-ms-bar > span { display: block; height: 100%; background: var(--alt-brand); }

/* 一括更新で変えられなかった課題（課題キー＋理由）。件数だけにしないので、落ちた数だけ行が並ぶ。
   赤字にするのは「一部だけ通った」ことを見落とさないため（通った件数は上の 1 行に出る）。 */
.pm-bulk-failures {
    margin: 0.2rem 0 0.4rem;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: var(--alt-danger-text);
}

.pm-bulk-failures > li { margin: 2px 0; }

/* 行単位の差分（Pm の TextDiffView。課題詳細の「詳細を変更」と Wiki の版比較で共用）。
   GitHub 風に - が赤、+ が緑。 */
.pm-diff-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.pm-diff {
    max-height: 60vh; overflow: auto;
    border: 1px solid var(--alt-border); border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem;
}
.pm-diff-line { display: flex; gap: 8px; padding: 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-diff-line.is-added { background: rgba(46, 160, 67, .14); }
.pm-diff-line.is-removed { background: rgba(224, 92, 92, .14); }
/* 行番号と記号は選べないようにする＝本文だけをそのままコピーできる。 */
.pm-diff-no { flex: 0 0 3em; text-align: right; color: var(--alt-text-sub); user-select: none; }
.pm-diff-mark { flex: 0 0 1em; user-select: none; }
.pm-diff-text { flex: 1 1 auto; }
.pm-diff-skip { padding: 2px 8px; color: var(--alt-text-sub); background: var(--alt-bg-page); user-select: none; }
.pm-diff-added { color: #2ea043; }
.pm-diff-removed { color: var(--alt-danger); }

/* 編集中の人（Pm の EditorPresence）。編集フォームの上に出る警告。 */
.pm-editing {
    margin: 0 0 8px;
    padding: 4px 10px;
    color: var(--alt-text);
    background: var(--alt-warn-soft, rgba(224, 168, 92, .16));
    border: 1px solid var(--alt-border);
    border-radius: 6px;
    font-size: 0.9rem;
}


/* 絵だけのボタン（2026-08-28。入力欄の Markdown ツールバーと簡易ビューのツールバーで共用）。
   押せることが分かるようホバーで枠と地色を出す。区切りは Markdown 側だけが持つ
   ＝「プレビュー」「画像」と役割が違うことを見せるため。 */
/* Markdown の整形ボタンの行（入力欄のすぐ下）。**区切り線は持たない**
   ＝行そのものが分かれているので、下のボタン列と役割が違うことは並びで読める。 */
.pm-md-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
}

/* 絵だけのボタンは 2026-09-05 にシェルの app.css へ昇格した（.alt-icon-btn）。 */

/* 簡易ビューのツールバー（2026-08-28。TEST1-40）。**「次へ」のすぐ右**に置く（要件どおり）。
   右端へ送らないのは、閉じる × の隣に並べると閉じるつもりで押し間違えるため。
   前後送りと役割が違うので、あいだに細い区切りを入れる。 */
.pm-qv-tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid var(--alt-border);
}

/* 添付の件数（絵の右下に小さく）。0 件のときは出さないので、付いていることが数で分かる。 */
.pm-qv-tool-count {
    margin-left: 2px;
    font-size: 0.7rem;
    color: var(--alt-text-tertiary);
}

/* 「添付」ボタン（2026-08-28）。文字を出さないので、左右の余白は絵の分だけに詰める
   （既定のままだと文字がある前提の幅が空いて、隣の「プレビュー」と釣り合わない）。 */
.pm-attach-btn {
    padding-left: 8px;
    padding-right: 8px;
}