/* 詳細パネル(開閉式)。基本情報/育成状況/素材需要の内訳の3カラム grid と、その枠外の操作ボタン列が
   横並び、メモは全幅下部。
   行高は一覧の 34px 固定を継承しないよう明示的に解除する。 */

.op-detail-row > td {
    height: auto;
    padding: 0;
    white-space: normal;
    overflow: visible;
    background: var(--detail-bg);
    border-bottom: 1px solid var(--line2);
}

.op-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    color: var(--text);
    font-size: 13px;
    /* 詳細行の td はテーブルの横スクロール全幅(colspan=15)にまたがり、素直に置くと右カラム
       (素材需要の内訳)がビューポート外へ出る。幅を可視ペイン幅(100cqw・container は
       .op-table-scroll)に固定し、sticky で横スクロールに追従させて常に可視域内へ収める。 */
    position: sticky;
    left: 0;
    width: 100cqw;
    box-sizing: border-box;
}

/* 情報カード(1枠)と、その枠の外に置く操作ボタン列の横並び。 */
.op-detail-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* 訓練室セクション＋情報カード(grid)を縦積みする左カラム(issue #270 後続)。
   display:grid にすると子(訓練室 section)がグリッドアイテム化して列に流れる
   (.mat-panel #120 と同型の罠) — 必ず flex-column のままにすること。
   min-width は auto(=min-content) のまま — 0 にするとカードだけが縮み、
   grid item は縮まないので枠外のボタン列(.op-detail-actions)に育成状況の行が重なる。 */
.op-detail-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
}

.op-detail-grid {
    display: grid;
    /* 育成状況(中央)はステッパー群の内容幅を保証(fr で潰すと数値入力が消える)。
       内訳(右)が残り幅を取り、溢れは縦スクロール(.op-demand-scroll)で吸収する。
       第1トラックは可変(下限 240px) — 見出し＋バッジを1行に保つため内容幅まで伸ばす。 */
    grid-template-columns: minmax(240px, max-content) max-content minmax(0, 1fr);
    gap: 24px;
    border: 1px solid var(--card-line);
    background: var(--card);
    border-radius: var(--bevel-container);
    corner-shape: bevel;
    padding: 12px 16px;
}

/* カラム間の縦区切り線。gap(24px)の中央に ::before で描く — section 側へ padding を足すと
   .op-detail-materials-inner(絶対配置 inset:0 = padding box 基準)が padding を無視してずれる。 */
.op-detail-grid > section + section {
    position: relative;
}

.op-detail-grid > section + section::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--detail-grid);
}

/* 操作ボタン列(情報カードの外・右隣)。背景・枠は持たず、ボタン単体の見た目だけで成立させる。
   列幅は最も広いボタン(Wiki/強化のうち長い方)の内容幅で決まり、stretch で両者を揃える。 */
.op-detail-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    /* 縮めない — 統計表示の横スクロール(min-width:0)でカードの内容幅が一覧幅を超えると、
       既定の flex-shrink:1 でこの列が押しつぶされボタン文言が折り返す (#566)。 */
    flex-shrink: 0;
}

/* 閉じる(▴)だけは自身の内容幅のまま列の右端へ寄せる。 */
.op-detail-actions .op-close-btn {
    align-self: flex-end;
}

.op-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: 600 13px var(--font-display);
    color: var(--text2);
    margin-bottom: 8px;
}

/* 基本情報の見出しだけはバッジを見出し文字列の隣に並べる(共用の .op-detail-heading は
   space-between のまま — 育成状況/素材見出しの右寄せアクションがそれに依存する)。 */
.op-detail-basics .op-detail-heading {
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 4px;
}

.op-detail-subheading {
    font-weight: 600;
    color: var(--mute2);
    font-size: 12px;
    margin-top: 12px;
    margin-bottom: 6px;
    border-top: 1px solid var(--detail-grid);
    padding-top: 10px;
}

/* 素材需要の内訳(#9)。対象別グループ(昇進・レベル/スキルレベル/S1-S3特化/モジュールX-A)→素材リスト。
   表示順(レアリティ降順→素材ID昇順)は Core が確定済み、ここは反映のみ。
   右カラムは左/中カラムの高さで決まる grid 行を超えたら独立スクロールする(WebView2/Chromium 対象)。
   .op-detail-materials-inner を position:absolute で流し込みから外すことで、.op-detail-materials
   (grid item)自身の in-flow コンテンツ量を0にし、行トラックの auto 高さ計算に内訳の内容量を
   寄与させない。grid item は既定で align-self:stretch のため、行トラック高さ(基本情報/育成状況側で
   決まる)へ縦方向に引き伸ばされ、それを inner の絶対配置 inset:0 の基準にできる。 */
.op-detail-materials {
    position: relative;
    min-height: 0;
}

.op-detail-materials-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.op-demand-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    padding-right: 4px;
}

.op-demand-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.op-demand-group + .op-demand-group {
    margin-top: 12px;
}

.op-demand-group-label {
    font-size: 11px;
    font-weight: 600;
}
.op-demand-group-elite { color: var(--accent); }
.op-demand-group-skill { color: var(--dim); }
.op-demand-group-mastery { color: var(--accent); }
.op-demand-group-module { color: var(--r5); }

.op-demand-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* 左3pxバー＋素材名: レアリティ色(0-4 の5段を --r2..--r6 へ写す — 最上位レア4=★6のオレンジ,
   theme.css の .mat-r0..r4 と同じ写像)。 */
.op-demand-bar {
    width: 3px;
    flex: 0 0 auto;
    border-radius: 2px;
}
.op-demand-bar.r0 { background: var(--r2); }
.op-demand-bar.r1 { background: var(--r3); }
.op-demand-bar.r2 { background: var(--r4); }
.op-demand-bar.r3 { background: var(--r5); }
.op-demand-bar.r4 { background: var(--r6); }

/* 狭幅時は1文字ずつの縦折り返しになるため nowrap＋省略記号で1行に保つ。 */
.op-demand-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.op-demand-name.r0 { color: var(--r2); }
.op-demand-name.r1 { color: var(--r3); }
.op-demand-name.r2 { color: var(--r4); }
.op-demand-name.r3 { color: var(--r5); }
.op-demand-name.r4 { color: var(--r6); }

.op-demand-body {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.op-demand-count {
    color: var(--mute2);
    flex: 0 0 auto;
}

/* 基本情報(左カラム): ラベル列を max-content で揃え、値の頭を言語によらず同一 x から開始する
   (各行の .op-fact を display:contents にして親グリッドの2列 [ラベル|値] に参加させる)。 */
.op-detail-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1px 8px;
    font-size: 12px;
    line-height: 1.5;
}

.op-detail-facts > .op-fact {
    display: contents;
}

/* 基本情報内の値は右揃え(ラベル左・値右)。 */
.op-detail-facts .op-fact-v {
    text-align: right;
}

/* 出身と実装日系の間の区切り線(グリッド全幅)。 */
.op-fact-sep {
    grid-column: 1 / -1;
    border-top: 1px solid var(--detail-grid);
    margin: 5px 0;
}

/* グリッド外で単独に使う .op-fact(逆理演算クリア状態など)はラベル+値の flex 行として保つ。 */
.op-fact {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
    line-height: 1.5;
}

.op-fact-k {
    color: var(--mute2);
}

.op-fact-v {
    color: var(--text);
}

.op-detail-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.op-tag {
    font-size: 12px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--accent-soft-line);
    background: var(--accent-soft);
    color: var(--accent);
}

.op-tag-limited {
    border-color: var(--danger-line);
    background: var(--danger-soft);
    color: var(--danger);
}

.op-tag-freegrowth {
    border-color: var(--ok-line);
    background: var(--ok-soft);
    color: var(--ok-text);
}

/* 育成状況の列見出し行(現在/目標)。訓練行と同じ [ラベル幅 | ステッパー幅 | 矢印幅 | ステッパー幅]
   構造で、num-stepper(106px)の真上に見出しを固定する。 */
/* 行の枠との間隔。見出しに文字より高い要素(目標切替ドロップダウン 22px)が入ると
   height:20px を溢れて直下の行の枠に接する(実測 -1px = 重なり)。 */
.op-train-head {
    display: flex;
    align-items: center;
    height: 20px;
    margin-bottom: 6px;
    font-weight: 400;
    color: var(--mute2);
    font-size: 12px;
}

.op-train-colhead {
    width: 106px;
    flex: 0 0 auto;
    text-align: center;
}

/* 目標列の左オフセット。実体は operator-list.css の共有 `.tgt { margin-left: 4px }` で、
   `.num-stepper.tgt` だけが自動で継ぐ。`.tgt` を持たない見出し/ミラー/帯(確定・次の目標へ)は
   同値を明示しないと値セルより 4px 左に出る。一覧セルと共有のため .tgt 側は変更できない。 */
.op-detail {
    --tgt-col-offset: 4px;
}

.op-train-colhead-tgt {
    color: var(--tgt-text);
    margin-left: var(--tgt-col-offset);
}

.op-train-row {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 30px;
}

/* 目標列や統計列で幅が足りなくなったとき、ステッパーとミラー(昇格の読み取り専用値)を潰さず
   .op-train-scroll に横スクロールを出す(flex item の既定 shrink:1 だと 106px 指定のまま実効幅が縮み、
   列見出しとの縦の揃いも崩れる) (#566)。 */
.op-train-row .num-stepper,
.op-train-row .op-train-mirror {
    flex: 0 0 auto;
}

/* 行の実高(num-stepper 33px)が min-height を上回るので隣接行が接する。行間 2px を明示する。 */
.op-train-row + .op-train-row,
.op-meta-row + .op-train-row,
.op-train-row + .op-paradox-row {
    margin-top: 2px;
}

.op-train-label {
    width: 90px;
    flex: 0 0 auto;
    color: var(--mute);
}

.op-train-mirror {
    width: 106px;
    text-align: center;
    color: var(--mute2);
}

.op-train-mirror-tgt {
    color: var(--tgt-text);
    margin-left: var(--tgt-col-offset);
}

/* 逆理演算の段クリア(段ごとチェックボックス)。ラベル幅は訓練行と揃え、行高も 30px で合わせる。 */
.op-paradox-row {
    display: flex;
    align-items: center;
    height: 30px;
}

.op-paradox-boxes {
    display: flex;
    align-items: center;
    gap: 12px;
}

.op-paradox-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.op-paradox-num {
    color: var(--mute2);
    font-size: 12px;
}

/* 現在/目標を並べる Pair 行の区切り矢印。 */
.op-train-arrow {
    color: var(--mute2);
    width: 12px;
    text-align: center;
    flex: 0 0 auto;
}

/* 数値ステッパー([−][値][＋])の共有スタイルは css/numberstepper.css へ切り出した(NumberStepper.razor
   を載せる全ホストで読み込む・複数窓での重複/欠落を防ぐ)。 */

/* 訓練室(issue #20・#270・基本情報の上部・見出し付きの別枠)。op-detail-grid の外(.mat-panel #120 と同型の罠を回避)。 */
.op-detail-trainingroom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--card-line);
    background: var(--card);
    border-radius: var(--bevel-container);
    corner-shape: bevel;
    padding: 12px 16px;
}

/* 訓練室のスキル選択枠は半分程度に縮める(issue #270 後続)。特化 dropdown 廃止後、訓練室内の
   op-meta-select はスキル選択のみ。グループ選択(.op-meta-row 106px)・共有既定(120px)には波及させない。 */
.op-train-room-field .dd-trigger.op-meta-select {
    width: 60px;
}

/* 特化段階の「現在▸次」表示。.op-train-mirror の 106px は育成グリッドのステッパー列整列用で、
   1行フォームでは間延びする — 訓練室スコープでは内容幅にする。 */
.op-train-room-field .op-train-mirror {
    width: auto;
}

/* 操作ボタン列の[訓練室]開閉ボタン(issue #270・強化の下・赤系)。 */
.op-train-room-btn {
    /* ボーダーは鮮色の --danger — 隣の Wiki(--btn-accent-line)/強化(--ok)と彩度を揃える
       (--danger-line はバッジ用の沈んだ線色で、並ぶと1つだけくすむ)。 */
    border: 1px solid var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 13px;
}

.op-train-room-btn:hover {
    background: var(--danger);
    color: var(--accent-ink);
}

.op-train-room-btn:disabled {
    border-color: var(--off);
    background: transparent;
    color: var(--dim);
    cursor: default;
}

.op-train-room-form {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.op-train-room-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.op-train-room-k {
    color: var(--mute);
}

.op-train-room-occupied {
    color: var(--mute2);
    font-size: 12px;
}

.op-train-room-start-btn,
.op-train-room-end-btn {
    background: var(--btn-bg);
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    color: var(--text);
    padding: 4px 12px;
    cursor: pointer;
}

.op-train-room-start-btn:hover,
.op-train-room-end-btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-line);
}

.op-train-room-start-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.op-train-room-active {
    display: flex;
    align-items: center;
    gap: 12px;
}

.op-train-room-label {
    color: var(--text);
    flex: none;
}

.op-train-room-track {
    flex: 1;
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
    min-width: 0;
}

.op-train-room-fill {
    height: 100%;
    background: var(--accent);
}

.op-train-room-time {
    color: var(--mute2);
    font-size: 11px;
    flex: none;
}

.op-train-room-endsat {
    color: var(--mute2);
    font-size: 11px;
    flex: none;
}

.op-train-room-block {
    color: var(--mute2);
    font-size: 12px;
}

/* メモ(下部・見出し付きの別枠)。 */
.op-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--card-line);
    background: var(--card);
    border-radius: var(--bevel-container);
    corner-shape: bevel;
    padding: 12px 16px;
}

/* メモ名欄の幅。全角8文字が入る幅 + padding 16px + border 2px。全角8文字は font-size 13px でも
   実測 77.3px(この font-family では 1文字 ≒ 9.7px で、em 換算の 104px にはならない)。
   ラベル行と入力行が同じ値を使う必要がある — 両者は同じ位置の flex item なので、食い違うと
   左端がずれる。ラベル側は font-size が 12px なので em では揃わない(変数で共有する)。 */
.op-detail-meta {
    --memo-name-w: 100px;
}

/* 1欄=1行(＋ / メモ内容 / メモ名 / －、issue #445)。op-meta-memo-pending は欄0本のときの
   唯一の入口(行頭＋だけの単独行、#367)。 */
.op-meta-memo,
.op-meta-memo-pending,
.op-meta-memo-labels {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ラベル行(aria-hidden)。メモ内容ラベルは textarea と同じ左端から始まり、表示名ラベルは
   自然幅のまま右端を表示名 input の右端へ揃える(どちらも末尾が 8px gap + 26px のボタン/
   スペーサなので、右端は自動で一致する)。 */
.op-meta-label-spacer {
    width: 26px;
    flex: 0 0 auto;
}

.op-meta-label-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--mute);
    font-size: 12px;
}

/* メモ名ラベルは入力欄と同じ幅・同じ左端に置く。nowrap は外さない — 折返すとラベル行だけが
   厚くなり、入力欄との間隔が崩れる。 */
.op-meta-label-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 var(--memo-name-w);
    white-space: nowrap;
    color: var(--mute);
    font-size: 12px;
}

/* 説明の丸ハテナ。ラベル行の行高を動かさないよう、文字サイズ(12px)より小さい円に収める。 */
.op-meta-label-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 1px solid var(--mute);
    border-radius: 50%;
    font-size: 9px;
    line-height: 1;
    cursor: help;
}

.op-meta-insert-btn,
.op-meta-delete-btn {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    padding: 0;
    color: var(--text2);
    font: 500 14px var(--font-sans);
    background: var(--btn-bg);
    border: 1px solid var(--btn-line);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    cursor: pointer;
}

.op-meta-insert-btn:hover:not(:disabled),
.op-meta-delete-btn:hover:not(:disabled) {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-line);
}

.op-meta-insert-btn:disabled,
.op-meta-delete-btn:disabled {
    opacity: .6;
    cursor: default;
}

.op-meta-field-name-input {
    flex: 0 0 var(--memo-name-w);
    /* flex item の min-width: auto は input の min-content(size 属性由来の既定20文字)を床にするため、
       これが無いと実幅が flex-basis を超え、同じ幅で置いた直上のラベルとの左端がずれる。 */
    min-width: 0;
    height: 26px;
    padding: 0 8px;
    background: var(--input);
    border: 1px solid var(--line2);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
}

.op-meta-field-limit-hint {
    font-size: 12px;
    color: var(--mute);
}

/* 欄削除の確認モーダル(ユーザー追認)。position: fixed でビューポート全体を覆う
   (仮想化スクロール域の overflow:auto に clip されないため)。 */
.op-meta-delete-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100;
}

.op-meta-delete-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--bevel-frame);
    corner-shape: bevel;
    padding: 16px;
    min-width: 280px;
    max-width: 420px;
}

.op-meta-delete-modal-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.op-meta-delete-modal-message {
    margin-bottom: 14px;
}

.op-meta-delete-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.op-meta-row {
    display: flex;
    gap: 0;
    align-items: center;
}

.op-meta-k {
    width: 90px;
    flex: 0 0 auto;
    color: var(--mute);
}

/* グループ選択の幅を潜在/信頼度のステッパー(106px)にそろえる。op-meta-select は
   訓練室のスキル/マスタリー選択とも共用のため、ここでは .op-meta-row 内に限定して上書きする。 */
.op-meta-row .dd-trigger.op-meta-select {
    width: 106px;
}

/* 「その他」の入力列は基本情報の値列と同じくカラム右端で揃える(ラベルは左のまま)。
   .op-train-row / .op-paradox-row は育成状況と共用のため .op-detail-basics 内に限定する。
   SelectDropdown は開くと backdrop/popup がトリガの後続兄弟になりトリガが :last-child から外れる
   (どちらも position:fixed で行のレイアウトには効かない)ため、トリガを明示指定して開閉で寄せを崩さない。 */
.op-detail-basics .op-meta-row > :last-child,
.op-detail-basics .op-meta-row > .dd-trigger,
.op-detail-basics .op-train-row > :last-child,
.op-detail-basics .op-paradox-row > :last-child {
    margin-left: auto;
}

/* 所属グループの全文(#363)。トリガは記号のみ・枠固定なので、名前つきの全文はここが持つ。
   行の高さが所属数で変わるのはこちら側で、トリガの寸法は不動。 */
/* width:min-content が「列を広げない」を担い、min-width:100% が「広げないまま列いっぱいを使う」を
   担う(#363)。min-content だけだとバッジが1件ずつ縦積みになり(実測 高さ721px)、指定なしだと
   バッジ12件で列が 240px→690px に広がる。この組で 240px のまま3行に折り返す(実測 高さ78px)。
   単一のグループ名が長くて収まらないときだけ列が伸びるのは許容 — min-content がその1件分は
   確保するため。contain:inline-size は同じ折り返しになるがこの例外を潰すので採らない。 */
.op-group-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    justify-content: flex-end;
    width: min-content;
    min-width: 100%;
}

.op-group-badge {
    padding: 2px 9px;
    color: var(--text2);
    background: var(--chip);
    border: 1px solid var(--line2);
    border-radius: 999px;
    corner-shape: round;
    font-size: 11px;
    line-height: 1.5;
}

.op-meta-input,
.op-meta-textarea {
    flex: 1 1 auto;
    background: var(--input);
    border: 1px solid var(--line2);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    padding: 4px 8px;
}

/* メモは内容に応じて自動で伸縮(field-sizing: content, Chromium/WebView2 対応)。初期は1行分。
   高さ変化は詳細行の ResizeObserver が拾い仮想化の実測高へ反映される(opvirtual.js)。 */
.op-meta-textarea {
    field-sizing: content;
    min-height: 0;
    resize: none;
}

.op-wiki-btn {
    border: 1px solid var(--btn-accent-line);
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 13px;
}

.op-wiki-btn:hover {
    background: var(--accent);
    color: var(--accent-ink);
}

.op-wiki-btn:disabled {
    border-color: var(--off);
    background: transparent;
    color: var(--dim);
    cursor: default;
}

/* 右上の閉じるボタン(▴)。行クリックの折りたたみと同一経路(OnClose)。 */
.op-close-btn {
    border: 1px solid var(--btn-line);
    background: var(--btn-bg);
    color: var(--mute);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.op-close-btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-line);
    color: var(--text);
}

/* 強化実行(issue #133)。「強化実行」ボタンは Wiki の左に置き、モード全体を緑系(--ok)で統一する。 */
.op-enhance-btn {
    border: 1px solid var(--ok);
    background: var(--ok-soft);
    color: var(--ok-text);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 13px;
}

.op-enhance-btn:hover {
    background: var(--ok);
    color: var(--accent-ink);
}

.op-enhance-btn:disabled {
    border-color: var(--off);
    background: transparent;
    color: var(--dim);
    cursor: default;
}

/* 訓練セクション見出し内の「強化する/キャンセル」(モード中のみ表示)。 */
.op-enh-actions {
    display: inline-flex;
    gap: 8px;
}

/* 計画編集の確定/キャンセルは同じ面・同じ位置に出る同種の操作なので体裁を共有する。 */
.op-enh-apply-btn,
.op-enh-cancel-btn,
.op-plan-apply-btn,
.op-plan-cancel-btn {
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    padding: 3px 12px;
    cursor: pointer;
    font-size: 12px;
}

.op-enh-apply-btn,
.op-plan-apply-btn {
    border: 1px solid var(--ok);
    background: var(--ok);
    color: var(--accent-ink);
}

.op-enh-apply-btn:hover,
.op-plan-apply-btn:hover {
    background: var(--btn-ok-hover-bg);
    border-color: var(--btn-ok-hover-bg);
}

.op-enh-cancel-btn,
.op-plan-cancel-btn {
    border: 1px solid var(--btn-line);
    background: var(--btn-bg);
    color: var(--mute);
}

/* 面は --btn-hover-bg ではなく --danger-soft。--danger 文字は中立 hover 面の上では
   3.97:1(dark) / 3.71:1(light) で 12px 文字の 4.5:1 を割る。 */
.op-enh-cancel-btn:hover,
.op-plan-cancel-btn:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

/* 強化計画(issue #404)。枠は鮮色 --tgt-btn(隣の Wiki/強化/訓練室が --btn-accent-line/--ok/--danger の
   鮮色で揃っており、沈んだ --tgt-line だと1つだけくすむ — .op-train-room-btn と同じ理由)。
   padding/font-size は兄弟ボタンと一致させる。.on は :hover より前に置く(同特異度・後勝ちのため、
   後ろだと hover の塗りが .on に食われる)。 */
.op-plan-btn {
    border: 1px solid var(--tgt-btn);
    background: var(--tgt-soft);
    color: var(--tgt-text);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    padding: 5px 14px;
    cursor: pointer;
    font-size: 13px;
}

.op-plan-btn.on {
    background: var(--tgt-btn-bg);
    border-color: var(--tgt-btn);
}

.op-plan-btn:hover {
    background: var(--tgt-btn);
    color: var(--accent-ink);
}

.op-plan-btn:disabled {
    border-color: var(--off);
    background: transparent;
    color: var(--dim);
    cursor: default;
}

/* 確定/キャンセルは見出し行(.op-detail-heading)に置く — 列の上に帯を挟むと編集モードの
   出入りで列見出し行が縦にずれる。強化モードの .op-enh-actions と同じ位置・同じ体裁。 */
.op-plan-actions {
    display: inline-flex;
    gap: 8px;
}

/* 育成状況の見出しはボタン(強化/計画)を載せる面。文字だけの高さで組むとモード進入時に
   見出しが伸びて以下の列全体が下へずれるため、ボタン高で固定する。
   ボタンは見出し文字の直後に置く — 既定の space-between だとセクション右端に張り付き、
   計画編集で内訳カラムを畳んだぶん幅が広がると強化モードと違う位置へ流れる(実測 490 → 938.5)。
   モード出入りで列位置が動かないことは tests/uiverify/operator-detail-plan-actions-align-with-target-column.mjs が pin する(#404)。 */
.op-detail-training > .op-detail-heading {
    min-height: 25px;
    justify-content: flex-start;
}

/* 次の目標帯。gap は使わない(先頭スペーサ間に入って目標1列との縦の揃いが崩れる)。 */
.op-plan-footbar {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.op-plan-footbar button {
    padding: 3px 12px;
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

/* 帯の先頭ボタンも目標1列に揃える(先頭スペーサだけでは .tgt の 4px ぶん左に出る)。 */
.op-plan-footbar > button {
    margin-left: var(--tgt-col-offset);
}

.op-plan-next-btn {
    border: 1px solid var(--tgt-line);
    background: var(--tgt-soft);
    color: var(--tgt-text);
}

.op-plan-next-btn:disabled {
    border-color: var(--off);
    background: transparent;
    color: var(--dim);
    cursor: default;
}

/* 計画列の見出しセル。値セル(.num-stepper.tgt 106px + 左 4px)と同じピッチで列を共有する。 */
.op-plan-colhead {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 106px;
    margin-left: var(--tgt-col-offset);
    flex: 0 0 auto;
}

.op-plan-colhead .op-plan-del {
    width: 14px;
    height: 14px;
    line-height: 1;
    padding: 0;
    border: 1px solid var(--line2);
    background: var(--chip);
    color: var(--mute2);
    font-size: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* danger hover は面を --danger-soft にする(--danger-line は --danger-soft 面向けの淡色で、
   中立面 --chip の上では 3:1 を割る)。× はアイコングリフなので文字色 --danger は 3:1 要件で足りる。 */
.op-plan-colhead .op-plan-del:hover {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
}

/* 末尾の＋セル。見出しと値行に同幅で置く(スペーサ共有)。 */
.op-plan-add-cell {
    width: 30px;
    flex: 0 0 auto;
}

.op-plan-add-btn {
    width: 24px;
    height: 20px;
    margin-left: 6px;
    padding: 0;
    border: 1px dashed var(--tgt-line);
    background: transparent;
    color: var(--tgt-text);
    font-size: 12px;
    cursor: pointer;
}

.op-plan-add-btn:hover {
    background: var(--tgt-soft);
}

/* 計画編集中だけ横スクロールを育成状況セクション内で吸収する。通常表示は .op-train-scroll という
   素の div が1枚挟まるだけでスタイル上の変化はゼロ。min-width:0 が無いと grid item の min-content が
   トラック下限0を無効化しスクロールしない(訂正4)。この min-width:0 と同ファイルの
   `.op-train-row .num-stepper` の flex:0 0 auto は両方揃って初めて横スクロールが成立する対 — 前者を欠くとスクロールせず
   カードが横に伸びボタン列を圧迫し、後者を欠くとステッパーの実効幅が縮んで見出しとの縦の揃いも崩れる
   (#404)。 */
.op-detail-grid.plan-edit {
    grid-template-columns: minmax(240px, max-content) minmax(0, 1fr);
}

.op-detail-grid.plan-edit .op-detail-training {
    min-width: 0;
}

.op-detail-grid.plan-edit .op-train-scroll {
    overflow-x: auto;
    padding-bottom: 2px;
}

.op-detail-grid.plan-edit .op-detail-materials {
    display: none;
}

/* 統計の切替は育成見出し内に置き、計画編集・強化モード中は操作不能にする (#566)。 */
.op-stats-btn {
    border: 1px solid var(--btn-line);
    background: var(--btn-bg);
    color: var(--mute);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    padding: 3px 12px;
    font-size: 12px;
    cursor: pointer;
}

.op-stats-btn.on {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.op-stats-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.op-stats-btn:disabled {
    border-color: var(--off);
    background: transparent;
    color: var(--dim);
    cursor: default;
}

/* 統計表示では内訳を畳み、育成状況内の統計列を横スクロールさせる。min-width:0 と統計要素の
   flex:0 0 auto は plan-edit と同じく揃って初めて横スクロールが成立する対 — 片方を欠くとカードが横に
   伸びて操作ボタン列を圧迫する。統計要素のクラス名に tgt を含めない — operator-list.css の共有
   .tgt { margin-left: 4px } が当たり統計列が見出しから 4px ずれる (#566)。 */
.op-detail-grid.stats-on {
    grid-template-columns: minmax(240px, max-content) minmax(0, 1fr);
}

.op-detail-grid.stats-on .op-detail-materials {
    display: none;
}

.op-detail-grid.stats-on .op-detail-training {
    min-width: 0;
}

.op-detail-grid.stats-on .op-train-scroll {
    overflow-x: auto;
    padding-bottom: 2px;
}

/* 分布バーだけが幅の増減を吸う(数値セルは 76px 固定)。最小 60px まで縮み、それ以下は
   .op-train-scroll の横スクロールへ回す。列見出しの分布セルも同じ規則で伸縮させ、
   見出しと数値列の右端を一致させる (#566)。 */
.op-stats-cells {
    display: flex;
    align-items: center;
    margin-left: 24px;
    flex: 1 1 auto;
    min-width: 0;
}

.op-stats-bar {
    height: 10px;
    display: flex;
    overflow: hidden;
    border-radius: 2px;
    background: var(--line2);
    margin-left: 14px;
    flex: 1 1 auto;
    min-width: 60px;
}

.op-stats-seg {
    height: 100%;
}

.op-stats-seg + .op-stats-seg {
    box-shadow: -1px 0 0 var(--card);
}

.op-stats-seg-0 {
    background: var(--mute2);
}

.op-stats-seg-1 {
    background: color-mix(in srgb, var(--accent) 40%, transparent);
}

.op-stats-seg-2 {
    background: color-mix(in srgb, var(--accent) 70%, transparent);
}

.op-stats-seg-3 {
    background: var(--accent);
}

.op-stats-num {
    width: 76px;
    flex: 0 0 auto;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
    color: var(--text2);
}

.op-stats-colhead {
    color: var(--mute2);
    font-size: 11px;
    flex: 0 0 auto;
}

.op-stats-colhead-bar {
    flex: 1 1 auto;
    min-width: 60px;
    margin-left: 14px;
    text-align: left;
}

.op-stats-colhead-num {
    width: 76px;
    text-align: right;
}

/* 素材見出し内の「素材を消費する」トグル(強化モード中のみ表示)。 */
.op-enh-consume-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 400;
    color: var(--mute);
    cursor: pointer;
}

/* 強化行のチェックボックス(現在値の左)。 */
.op-enh-check {
    width: 20px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 結果カードの内部要素(タイトル/チップ本体)。カード枠色は .op-enh-card-* が持つ。 */
.op-enh-result-title {
    font-weight: 600;
    color: var(--text2);
}

.op-enh-result-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.op-enh-result-chip {
    border: 1px solid var(--line2);
    background: var(--chip);
    border-radius: var(--bevel-control);
    corner-shape: bevel;
    padding: 2px 8px;
    color: var(--text);
}

.op-enh-result-note {
    margin-top: 6px;
    color: var(--text2);
}

/* 強化結果カード(右カラム・素材需要の内訳の上に重ねる)。約5秒で自動消滅(OperatorDetail.razor.cs)。
   .op-detail-materials は position:relative 済み(既存)。.op-detail-materials-inner とは別レイヤで、
   z-index で内訳の前面へ出す。 */
.op-enh-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    border: 1px solid var(--line2);
    border-radius: var(--bevel-container);
    corner-shape: bevel;
    padding: 8px 12px;
    font-size: 12px;
}

.op-enh-card-success {
    border-color: var(--ok);
    background: var(--ok-soft);
}

.op-enh-card-info {
    border-color: var(--line2);
    background: var(--chip);
}

.op-enh-card-shortage,
.op-enh-card-invalid,
.op-enh-card-error {
    border-color: var(--danger-line);
    background: var(--danger-soft);
}

/* 強化プレビュー(右カラム・素材内訳との排他)。オペレーター一覧と同じテーブル表示(列見出し＋縦線)。
   数値列は最大10桁(7桁＋マイナス＋カンマ)でも重ならないよう内容幅(nowrap)で確保する。 */
.op-enh-preview-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

.op-enh-preview-table th,
.op-enh-preview-table td {
    padding: 3px 8px;
    white-space: nowrap;
}

/* 列境界の縦線のみ(オペレーター一覧と同方式・上下端まで届かない短い帯)。外枠・横線は描かない。
   background ショートハンドはこの帯を消すため、セル背景を足すときは background-color で指定する。 */
.op-enh-preview-table th:not(:last-child),
.op-enh-preview-table td:not(:last-child) {
    background-image: linear-gradient(var(--vline), var(--vline));
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1px 60%;
}

.op-enh-preview-table th {
    font-size: 11px;
    font-weight: 500;
    color: var(--mute2);
}

.op-enh-pv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.op-enh-pv-name {
    text-align: left;
    width: 100%;
}

.op-enh-preview-table tbody tr.op-enh-pv-short {
    color: var(--danger);
}

.op-enh-preview-table td.op-enh-pv-name.r0 { color: var(--r2); }
.op-enh-preview-table td.op-enh-pv-name.r1 { color: var(--r3); }
.op-enh-preview-table td.op-enh-pv-name.r2 { color: var(--r4); }
.op-enh-preview-table td.op-enh-pv-name.r3 { color: var(--r5); }
.op-enh-preview-table td.op-enh-pv-name.r4 { color: var(--r6); }