/* 横から開くドロワー(フィルタ・一括入力・在庫・設定など)。 */
.column-settings { max-height: 24rem; overflow: auto; margin: .8rem 0; }
.column-setting { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; }
.column-setting label { flex: 1; }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .5rem 0; }
.field-row input:not([type=checkbox]) { flex: 1 1 6rem; max-width: 12rem; }
.field-row input[type=checkbox] { flex: none; }
.bulk-group { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .8rem 0; }
.bulk-group h3 { flex-basis: 100%; margin: .2rem 0; }
.edit-grid { display: grid; grid-template-columns: minmax(5rem, 1fr) repeat(2, minmax(5rem, 8rem)); align-items: center; gap: .6rem; }
.edit-grid input { width: 100%; }
.settings { max-width: 42rem; }
.settings > label { display: block; margin: .9rem 0; }
/* Nonmodal drawers leave the list available while editing filters and plans. */
.side-drawer {
    position: fixed;
    z-index: 50;
    inset: 5.7rem 0 0 auto;
    width: min(34rem, 100vw);
    max-height: calc(100dvh - 5.7rem);
    overflow: auto;
    padding: 1rem;
    border: 1px solid #71819a;
    background: #202a38;
    box-shadow: -12px 0 28px #0007;
}
.app-shell.light .side-drawer { background: #fff; box-shadow: -12px 0 28px #20263133; }
.side-drawer .toolbar { max-height: none; }
.side-drawer .settings { max-width: none; }
.drawer-heading { position: sticky; top: -1rem; z-index: 1; background: inherit; padding: .25rem 0 .6rem; }
.drawer-heading h2 { margin: 0; }
.drawer-close { float: right; margin-bottom: 1rem; }
.app-shell .side-drawer {
    /* 詳細(80)の展開状態を保って前面へ開き、ナビ(90)からは引き続き画面を選べるようにする (#727)。 */
    z-index: 85;
    inset: 102px 0 0 auto;
    max-height: calc(100dvh - 102px);
    color: var(--text);
    background: var(--panel2);
    border: 1px solid var(--line2);
    border-radius: var(--bevel-frame) 0 0 0;
    corner-shape: bevel;
    box-shadow: -12px 0 32px #000a;
    bottom: 38px;
    margin: 0;
}
.app-shell .filter-drawer { width: min(920px, 100vw); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.app-shell .filter-drawer .flt-header { justify-content: space-between; }
.app-shell .filter-drawer h2 { border: 0; margin: 0; padding: 0; }
.app-shell .filter-drawer .flt-body { overflow: hidden; }
.app-shell .filter-drawer .flt-builder { min-width: 0; width: 48%; }
.app-shell .filter-drawer .flt-facet-values { display: flex; align-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 7px; }
.app-shell .filter-drawer .flt-facet-values :is(.flt-list, .flt-subclass, .flt-opt-row, .flt-chip-row, .flt-hint) { width: 100%; }
.app-shell .filter-drawer .flt-facet-values > label { flex: 1 0 100%; }
.app-shell .filter-drawer .flt-conditions-body { overflow: auto; }
.app-shell .filter-drawer .flt-card-title { width: 85px; }
.app-shell .filter-drawer .flt-card-title small { display: block; margin-top: 4px; color: var(--accent); font-size: 10px; }
.app-shell .filter-drawer .flt-card:not(.is-pending) .flt-card-title small { color: var(--mute2); }
.app-shell .filter-drawer :is(.flt-cat-tab, .flt-chip, .flt-btn, .flt-icon-btn) { color: var(--mute); background: var(--chip); border: 1px solid var(--btn-line); padding: 0 10px; font-size: 12px; }
.app-shell .filter-drawer :is(.flt-cat-tab.is-active, .flt-chip.is-selected) { color: var(--text3); background: var(--accent-soft); border-color: var(--btn-accent-line); }
.app-shell .filter-drawer .flt-add-btn:not(:disabled), .app-shell .filter-drawer .flt-btn-accent { color: var(--accent-ink); background: var(--accent); border-color: var(--btn-accent-line); }
.app-shell .filter-drawer .flt-add-btn:disabled { color: var(--dim); background: var(--btn-bg); border-color: var(--btn-line); }
.app-shell .filter-drawer .flt-icon-btn { height: 28px; min-width: 28px; padding: 0; }
.app-shell .filter-drawer .flt-presets { min-width: 0; }
.app-shell .filter-drawer .flt-save-input { max-width: 170px; }
.app-shell .filter-drawer .flt-presets details { position: relative; font-size: 12px; }
.app-shell .filter-drawer .flt-presets details[open] { position: absolute; bottom: 64px; z-index: 4; padding: 8px; max-height: 50vh; overflow: auto; background: var(--panel2); border: 1px solid var(--line2); }
.app-shell .filter-drawer .flt-footer { flex-wrap: wrap; gap: 8px; }
.app-shell .filter-drawer .flt-count { margin-left: auto; }
.app-shell .bulk-group-select { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
/* 一括入力: 条件だけをスクロールし、対象件数・適用・結果は下端に固定する (#619)。 */
.app-shell .bulk-drawer { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.app-shell .bulk-drawer .drawer-heading { position: static; flex: 0 0 auto; padding: 12px 16px 8px; }
.app-shell .bulk-drawer .bulk-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px 12px; }
.app-shell .bulk-drawer .bulk-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 16px;
    background: var(--panel2);
    border-top: 1px solid var(--line2);
}
.app-shell .bulk-drawer .bulk-count { color: var(--text2); font-weight: 600; }
.app-shell .bulk-drawer .bulk-footer > button { min-height: 40px; margin-left: auto; padding: 0 18px; }
.app-shell .bulk-drawer .bulk-result { flex-basis: 100%; margin: 0; color: var(--text2); }
/* 空の状態表示は行を占めないが、折り返した行の gap だけ残るので打ち消す (#691)。 */
.app-shell .bulk-drawer .bulk-result:empty { margin-top: -6px; }
.app-shell .bulk-drawer [data-bulk-phase="Completed"] .bulk-result { color: var(--ok-text); }
.app-shell .bulk-drawer .bulk-result.error { color: var(--danger); overflow-wrap: anywhere; }
/* 処理中はボタンに回転印を出す。同期処理で main thread が止まる間も合成側で回るよう transform だけを動かす (#691)。 */
.app-shell .bulk-drawer :is([data-bulk-phase="Applying"], [data-bulk-phase="Saving"]) > button { display: inline-flex; align-items: center; gap: 8px; cursor: progress; }
.app-shell .bulk-drawer :is([data-bulk-phase="Applying"], [data-bulk-phase="Saving"]) > button::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    corner-shape: round;
    animation: bulk-busy .8s linear infinite;
}
@keyframes bulk-busy { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .app-shell .bulk-drawer .bulk-footer > button::before { animation: none; }
}
.app-shell .inventory-drawer { width: min(80rem, 100vw); }
.app-shell .material-subdrawer { width: min(78rem, 100vw); display: flex; flex-direction: column; overflow: hidden; }
.app-shell .material-subdrawer .acq-layout { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(340px, 2fr); gap: 12px; flex: 1 1 auto; min-height: 0; }
.app-shell .material-subdrawer .acq-stage, .app-shell .material-subdrawer .acq-entries { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app-shell .material-subdrawer .acq-stage h3, .app-shell .material-subdrawer .acq-entries h3 { margin: 4px 0 8px; color: var(--text2); font-size: 13px; }
.app-shell .material-subdrawer .acq-mode-tabs { display: flex; gap: 5px; margin-bottom: 8px; }
.app-shell .material-subdrawer .acq-mode-tabs button { flex: 1 1 0; }
.app-shell .material-subdrawer button.is-selected { color: var(--accent-ink); background: var(--accent); border-color: var(--btn-accent-line); }
.app-shell .material-subdrawer .acq-stage-lists { display: grid; grid-template-rows: minmax(70px, 1fr) minmax(70px, 1fr); gap: 8px; flex: 1 1 auto; min-height: 0; }
.app-shell .material-subdrawer .acq-stage-list { display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: auto; padding: 5px; border: 1px solid var(--line); }
.app-shell .material-subdrawer .acq-stage-list button { flex: 0 0 auto; min-height: 30px; text-align: left; }
.app-shell .material-subdrawer .acq-entries { overflow: auto; }
.app-shell .material-subdrawer .acq-entries .toolbar { flex: 0 0 auto; overflow: visible; margin: 0 0 5px; padding: 5px; border-bottom: 1px solid var(--line); }
.app-shell .material-subdrawer .acq-entries > button { flex: 0 0 auto; margin-top: 7px; }
.app-shell .material-subdrawer .acq-pane-switch { display: none; }
@media (max-width: 1279px) {
    .app-shell .material-subdrawer .acq-pane-switch { display: flex; gap: 6px; margin-bottom: 8px; }
    .app-shell .material-subdrawer .acq-pane-switch button { flex: 1 1 0; }
    /* 番号一覧はグループを選ぶまで空なので、中身の高さだけ取り、残りをグループ一覧に回す (#619)。 */
    .app-shell .material-subdrawer .acq-stage-lists { grid-template-rows: minmax(120px, 1fr) auto; }
    .app-shell .material-subdrawer .acq-stage-list:last-child { max-height: 45%; }
    .app-shell .material-subdrawer .acq-stage-list:last-child:empty { display: none; }
    .app-shell .material-subdrawer .acq-layout { display: block; overflow: hidden; }
    .app-shell .material-subdrawer .acq-stage,
    .app-shell .material-subdrawer .acq-entries { height: 100%; overflow: auto; }
    .app-shell .material-subdrawer .acq-layout.show-stage .acq-entries,
    .app-shell .material-subdrawer .acq-layout.show-entries .acq-stage { display: none; }
    .app-shell .material-subdrawer .acq-layout.show-stage .acq-stage { animation: acq-from-left .18s ease-out; }
    .app-shell .material-subdrawer .acq-layout.show-entries .acq-entries { animation: acq-from-right .18s ease-out; }
    @keyframes acq-from-left { from { transform: translateX(-20px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
    @keyframes acq-from-right { from { transform: translateX(20px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
}
@media (max-width: 743px), (max-height: 499px) and (max-width: 1279px) {
    .app-shell .material-subdrawer .acq-entries .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
    .app-shell .material-subdrawer .acq-entries .toolbar > span { grid-column: 1 / -1; }
    .app-shell .material-subdrawer .acq-entries .toolbar label { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
    .app-shell .material-subdrawer .acq-entries .toolbar label :is(select, .num-stepper) { min-width: 0; }
    .app-shell .material-subdrawer .acq-entries .toolbar > button { grid-column: 2; justify-self: end; }
}
.app-shell .inventory-matrix-scroll { max-height: calc(100dvh - 275px); overflow: auto; border: 1px solid var(--line); }
.app-shell .inventory-matrix-row { display: grid; align-items: center; min-width: max-content; height: 34px; border-bottom: 1px solid var(--rowline); }
.app-shell .inventory-matrix-row:nth-child(even) { background: var(--row-alt); }
.app-shell .inventory-matrix-row > * { min-width: 0; height: 100%; border-right: 1px solid var(--vline); padding: 5px 8px; }
.app-shell .inventory-matrix-row input { width: calc(100% - 8px); height: 27px; margin: 3px 4px; text-align: right; font-family: var(--font-mono); }
.app-shell .inventory-matrix-heading { position: sticky; top: 0; z-index: 2; color: var(--text2); background: var(--head); font-weight: 600; }
.app-shell .inventory-matrix-heading span { display: flex; align-items: center; justify-content: space-between; }
.app-shell .inventory-matrix-heading button { min-width: 23px; min-height: 23px; padding: 0; }
.app-shell .inventory-matrix-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 所持・計画の数量セル。クリックしたセルだけが入力欄になる。 */
.app-shell .inventory-cell { overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.app-shell .inventory-cell.inventory-editable { cursor: text; }
.app-shell .inventory-cell input { display: block; }
.app-shell .inventory-matrix-row .inventory-cell:has(input) { padding: 0; overflow: visible; }
.app-shell :is(.inventory-matrix-scroll, .inventory-card-list):focus { outline: none; }
.app-shell .inventory-remove-confirm { position: sticky; bottom: 0; z-index: 3; padding: 12px; background: var(--panel2); border: 1px solid var(--danger-line); }
.app-shell .about-facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 8px; margin: 12px 0; }
.app-shell .about-facts span { color: var(--mute2); }
.app-shell .about-references { display: grid; gap: 6px; margin: 10px 0 18px; }
.app-shell .about-references a { display: block; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.app-shell .drawer-heading {
    color: var(--text2);
    background: var(--panel2);
    border-bottom: 1px solid var(--line);
}
/* データ共有: 送信ボタンとその結果は上端に固定し、章(公開データ・自分の端末用)だけをスクロールする (#696)。
   章の並びはドロワー自身の幅で決める — 広ければ横に並べ、狭ければ見出しを貼り付けたまま縦に積む。 */
.app-shell .sharing-drawer { display: flex; flex-direction: column; overflow: hidden; padding: 0; width: min(60rem, 100vw); container: sharing-drawer / inline-size; }
.app-shell .sharing-drawer > h2 { margin: 0; padding: 14px 16px 8px; }
.app-shell .sharing-drawer .drawer-close { position: absolute; right: 12px; top: 12px; z-index: 2; }
.app-shell .sharing-drawer p { margin: 0; }
.app-shell .sharing-identity { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 8px 16px; color: var(--text2); overflow-wrap: anywhere; }
.app-shell .sharing-upload { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); background: var(--panel2); }
.app-shell .sharing-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.app-shell .sharing-upload .error { margin: 0; }
.app-shell .sharing-primary { min-height: 38px; padding: 0 16px; color: var(--accent-ink); background: var(--accent); border-color: var(--btn-accent-line); font-weight: 600; }
.app-shell .sharing-primary:hover { background: var(--btn-accent-hover-bg); border-color: var(--btn-accent-hover-bg); }
.app-shell .sharing-flow { position: relative; flex: 0 0 auto; width: 22px; height: 2px; background: var(--line2); }
.app-shell .sharing-flow::after { content: ""; position: absolute; top: -4px; right: -2px; border: 5px solid transparent; border-right: 0; border-left-color: var(--line2); }
.app-shell .sharing-uploaded { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; color: var(--text2); background: var(--chip); border: 1px solid var(--line2); border-radius: 14px; }
.app-shell .sharing-uploaded[data-state="done"] { color: var(--ok-text); background: var(--ok-soft); border-color: var(--ok-line); }
.app-shell .sharing-uploaded[data-state="done"]::after,
.app-shell .sharing-result::before { content: "✓"; color: var(--ok-text); font-weight: 700; }
.app-shell .sharing-uploaded[data-state="sending"] { animation: sharing-sending .7s ease-in-out infinite alternate; }
@keyframes sharing-sending { from { opacity: 1; } to { opacity: .4; } }
/* アップロード=上向き矢印、公開=地球、自分専用=錠。アップロードの印に地球は使わない — データ全体が公開されるように読めるため (#696/PR#704)。 */
.app-shell .sharing-ico { flex: 0 0 auto; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--sharing-ico) center / contain no-repeat; mask: var(--sharing-ico) center / contain no-repeat; }
.app-shell .sharing-ico-upload { --sharing-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M8 10.5V2.5M5 5.3l3-2.8 3 2.8M2.5 10.5v3h11v-3'/%3E%3C/svg%3E"); }
.app-shell .sharing-ico-public { --sharing-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='8' cy='8' r='6.3'/%3E%3Cellipse cx='8' cy='8' rx='2.7' ry='6.3'/%3E%3Cpath d='M1.7 8h12.6'/%3E%3C/svg%3E"); }
.app-shell .sharing-ico-private { --sharing-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.4'%3E%3Crect x='3' y='7.2' width='10' height='6.8' rx='1'/%3E%3Cpath d='M5.2 7.2V5a2.8 2.8 0 0 1 5.6 0v2.2'/%3E%3C/svg%3E"); }
.app-shell .sharing-lastshared { margin-left: auto; color: var(--text2); font-variant-numeric: tabular-nums; }
.app-shell .sharing-result { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--ok-text); }
.app-shell .sharing-result-time { color: var(--text2); font-variant-numeric: tabular-nums; }
.app-shell .sharing-status { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; color: var(--text2); }
.app-shell .sharing-status p { flex: 1 1 100%; }
.app-shell .sharing-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 16px 16px; }
.app-shell .sharing-body label { display: block; }
.app-shell .sharing-body input { display: block; width: 100%; margin-top: 4px; }
.app-shell .sharing-chapter { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; margin-top: 16px; padding: 0 12px 12px; background: var(--card); border: 1px solid var(--card-line); }
.app-shell .sharing-chapter > :is(label, details, .sharing-section, .sharing-url) { align-self: stretch; }
/* 縦に積むときは、いまどの章を見ているかが分かるよう見出しをスクロール領域の上端に貼り付ける。 */
.app-shell .sharing-chapter-head { position: sticky; top: 0; z-index: 1; align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 -12px; padding: 10px 12px; color: var(--text3); background: var(--head); border-bottom: 1px solid var(--card-line); }
.app-shell .sharing-chapter-title { margin: 0; font: 700 14px var(--font-display); color: var(--text3); }
.app-shell .sharing-audience { margin-left: auto; padding: 2px 8px; color: var(--text2); font-size: 11.5px; border: 1px solid var(--line2); border-radius: 10px; }
.app-shell .sharing-contents { color: var(--text2); }
.app-shell .sharing-url { overflow-wrap: anywhere; }
.app-shell .sharing-section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-top: 1px solid var(--line2); padding-top: 10px; }
.app-shell .sharing-section > label { align-self: stretch; }
.app-shell .sharing-section h4 { margin: 0; font: 600 12px var(--font-display); color: var(--text2); }
.app-shell .sharing-confirm { align-self: stretch; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--accent-soft); border: 1px solid var(--accent-soft-line); }
.app-shell .sharing-confirm:focus { outline: none; }
.app-shell .sharing-issued { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.app-shell .sharing-issued img { width: 176px; height: 176px; padding: 6px; background: white; }
.app-shell .sharing-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-shell .sharing-muted { color: var(--mute2); }
@container sharing-drawer (min-width: 720px) {
    .app-shell .sharing-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0 16px; }
    .app-shell .sharing-chapter-head { position: static; }
    .app-shell .sharing-chapter-public { grid-column: 1; grid-row: 1; }
    .app-shell .sharing-chapter-private { grid-column: 2; grid-row: 1; }
}
.app-shell .side-drawer h2 { color: var(--text2); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.app-shell .reference-table, .app-shell .process-table { border: 1px solid var(--line); background: var(--panel); }
.app-shell .reference-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 6px 10px; border-bottom: 1px solid var(--matrowline); }
.app-shell .reference-row:nth-child(even), .app-shell .process-row:nth-child(even) { background: var(--row-alt); }
.app-shell .reference-row strong { font: 600 12px var(--font-mono); color: var(--text2); }
.app-shell .process-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--matrowline); }
.app-shell .process-row > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell .process-row strong { color: var(--accent); }
.app-shell .column-setting { border-bottom: 1px solid var(--rowline); padding: 5px; }
.app-shell .training-track { background: var(--line); }
.app-shell .training-track span { background: var(--accent); }
/* スマホのイベント入手計画: 計画はチップ、素材ごとに所持と各計画の数を2列の入力欄で並べる (#619)。 */
.app-shell .inventory-plan-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.app-shell .inventory-plan-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 3px 2px 10px; border: 1px solid var(--tgt-line); border-radius: 16px; corner-shape: round; color: var(--tgt-text); background: var(--tgt-soft); }
.app-shell .inventory-plan-chip button { min-width: 30px; min-height: 30px; padding: 0; border-radius: 15px; corner-shape: round; }
.app-shell .inventory-card-list { max-height: calc(100dvh - 190px); overflow-y: auto; border: 1px solid var(--line); }
.app-shell .inventory-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; padding: 8px 10px; border-bottom: 1px solid var(--rowline); }
.app-shell .inventory-card:nth-child(even) { background: var(--row-alt); }
.app-shell .inventory-card .inventory-matrix-name { grid-column: 1 / -1; font-weight: 600; }
.app-shell .inventory-card label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.app-shell .inventory-card em { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute2); font-size: 11px; font-style: normal; }
.app-shell .inventory-card input { flex: 1 1 4rem; width: 100%; min-width: 0; height: 32px; text-align: right; font-family: var(--font-mono); }
/* 入力欄に切り替わっても行の高さが変わらないよう、表示中のセルも入力欄と同じ 32px の枠にする。 */
.app-shell .inventory-card .inventory-cell { flex: 1 1 4rem; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--line); background: var(--input); line-height: 30px; }
.app-shell .inventory-card .inventory-cell:has(input) { padding: 0; border: 0; background: transparent; overflow: visible; }
/* スマホの素材加工表: 完成品を見出しに、材料を折り返して並べる。名前は省略しない (#619)。 */
@media (max-width: 743px), (max-height: 499px) and (max-width: 1279px) {
    .app-shell .process-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
    .app-shell .process-row > * { overflow: visible; white-space: normal; }
    .app-shell .process-row strong { flex-basis: 100%; }
}
.app-shell .material-subdrawer .acq-commit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.app-shell .material-subdrawer .acq-commit { margin-left: auto; min-height: 40px; padding: 0 18px; }
.app-shell .material-subdrawer .acq-reset { border-color: transparent; background: transparent; text-decoration: underline; }
.app-shell .material-subdrawer .acq-reset-confirm { color: var(--danger); }

/* 育成候補: 候補・選択リスト・素材を別々にスクロールし、登録欄は常に見える位置に置く。 */
.app-shell .affordable-training-drawer {
    width: min(1280px, 100vw);
    height: auto;
    padding: 0;
    overflow: hidden;
    container-type: inline-size;
    container-name: affordable-training;
}
.app-shell .affordable-training-drawer[open] { display: flex; flex-direction: column; }
.affordable-training-drawer::backdrop { background: #0008; }
.app-shell .affordable-heading { position: static; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 12px; }
.app-shell .affordable-heading h2 { flex: 1; min-width: 0; border: 0; padding: 0; font-size: 16px; }
.app-shell .affordable-heading button { flex: none; min-width: 40px; min-height: 40px; font-size: 20px; padding: 0; }
.app-shell .affordable-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 12px; }
.app-shell .affordable-controls :is(select, input[type=search]) { flex: 1 1 200px; min-width: 0; height: 38px; }
.app-shell .affordable-controls label { display: flex; align-items: center; gap: 6px; min-height: 32px; font-size: 12px; }
.app-shell .affordable-controls input[type=checkbox] { flex: none; }
.app-shell .affordable-alternatives { flex: none; padding: 0 12px; margin: 8px 0; color: var(--mute2); font-size: 12px; }
/* 通常幅: 候補を左に全高、右に選択リスト・素材・登録欄を積む。素材は内側でスクロールし、選択リストに残りを渡す。 */
.app-shell .affordable-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "candidates selection" "candidates detail" "candidates commit";
    border-top: 1px solid var(--line2);
}
.app-shell .affordable-scroll-content { display: contents; }
.app-shell .affordable-body h3 { margin: 0; font-size: 13px; color: var(--text2); }
.app-shell .affordable-candidates { grid-area: candidates; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border-right: 1px solid var(--line2); }
.app-shell .affordable-list-heading { flex: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.app-shell .affordable-count { color: var(--accent); font: 600 13px var(--font-mono); }
.app-shell .affordable-unavailable { margin-left: auto; color: var(--mute2); font-size: 11px; }
/* 候補・選択の表は共有 css/training-table.css の .op-table.training-table が行高・列幅・罫線・縞・固定見出しを持つ。
   ここでは極端に狭い窓で列を潰さず横スクロールさせる下限と、育成候補固有の状態色だけを足す。 */
.app-shell .affordable-results { flex: 1 1 auto; overflow: auto; min-height: 0; min-width: 0; }
.app-shell .affordable-results > p { padding: 12px; }
.app-shell .affordable-training-drawer .training-table { min-width: 310px; }
.app-shell .affordable-result-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.app-shell .affordable-result-values { color: var(--mute2); font-size: 12px; }
.app-shell .affordable-rate { font-family: var(--font-mono); font-size: 12px; }
/* 背景は縞・hover・試算表示(.is-preview)に任せ、選択済みは左端の線で示す。 */
.app-shell .affordable-candidate.is-chosen:not(.is-preview) td:first-child { box-shadow: inset 3px 0 var(--ok-line); }
.app-shell .affordable-undo { flex: none; width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 18px; line-height: 1; }
.app-shell .affordable-add.is-chosen { color: var(--ok-text); border-color: var(--ok-line); }
.app-shell .affordable-selection { grid-area: selection; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app-shell .affordable-selection-heading { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.app-shell .affordable-selection-count { margin-right: auto; color: var(--accent); font: 12px var(--font-mono); white-space: nowrap; }
.app-shell .affordable-clear { flex: none; min-height: 40px; }
.app-shell .affordable-clear-confirm { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 12px; }
.app-shell .affordable-clear-confirm p { flex-basis: 100%; margin: 0; }
.app-shell .affordable-clear-action { color: var(--danger); border-color: var(--danger-line); }
.app-shell .affordable-warning { flex: none; margin: 0; padding: 8px 12px; color: var(--text); background: var(--danger-soft); border-bottom: 1px solid var(--danger-line); font-size: 12px; }
.app-shell .affordable-selection-scroll { flex: 1 1 auto; min-height: 48px; overflow: auto; }
.app-shell .affordable-selection-empty { margin: 0; padding: 16px 12px; color: var(--mute); text-align: center; font-size: 12px; }
/* 無効な選択は縞・hover より優先して警告色を残す。 */
.app-shell .affordable-selection-item.is-invalid td { background-color: var(--danger-soft); }
.app-shell .affordable-item-name { font-weight: 600; }
.app-shell .affordable-selection-item .training-goal { color: var(--mute2); font-size: 12px; }
.app-shell .affordable-badge { color: var(--mute2); font-size: 10px; font-weight: normal; }
.app-shell .affordable-item-name .affordable-badge,
.app-shell .affordable-badge + .affordable-badge { margin-left: 6px; }
.app-shell .affordable-badge.is-registered { color: var(--ok-text); }
.app-shell .affordable-badge.is-new { color: var(--tgt-text); }
.app-shell .affordable-badge.is-completed { color: var(--text2); }
.app-shell .affordable-badge.is-invalid { color: var(--danger); }
.app-shell .affordable-detail { grid-area: detail; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); border-top: 1px solid var(--line2); }
.app-shell .affordable-materials-toggle { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px; color: var(--text2); background: transparent; border: 0; border-radius: 0; text-align: left; font-weight: 600; }
.app-shell .affordable-materials-toggle::before { content: ""; flex: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.app-shell .affordable-materials-toggle[aria-expanded="false"]::before { transform: rotate(-90deg); }
.app-shell .affordable-materials-toggle small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mute2); font-weight: normal; }
.app-shell .affordable-detail-content { min-height: 0; max-height: min(260px, 32dvh); overflow: auto; padding: 0 12px 10px; }
.app-shell .affordable-detail h4 { margin: 12px 0 8px; font-size: 12px; color: var(--accent); }
.app-shell .affordable-detail table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.app-shell .affordable-detail :is(th, td) { padding: 7px 4px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.app-shell .affordable-detail th { font-weight: normal; text-align: right; }
.app-shell .affordable-detail th:first-child { text-align: left; width: 40%; }
.app-shell .affordable-detail td { text-align: right; font-family: var(--font-mono); }
.app-shell .affordable-detail td.is-short { color: var(--text3); background: var(--danger-soft); }
.app-shell .affordable-detail li { margin: 8px 0; font-size: 12px; }
.app-shell .affordable-reserved-hint { margin: 8px 0 0; color: var(--mute2); font-size: 11px; }
.app-shell .affordable-commit { grid-area: commit; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px 8px; background: var(--panel2); border-top: 1px solid var(--line2); }
.app-shell .dd-trigger.affordable-groups { flex: 1 1 90px; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; min-height: 40px; color: var(--text); background: var(--input); text-align: left; }
.app-shell .dd-trigger.affordable-groups .dd-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-shell .affordable-register { flex: 0 1 auto; min-height: 40px; min-width: 0; }
.app-shell .affordable-register-status { flex-basis: 100%; min-height: 1.4em; margin: 0; color: var(--mute2); font-size: 11px; }
.app-shell .affordable-register-status.is-done { color: var(--ok-text); }
.app-shell .affordable-register-status.is-error { color: var(--danger); }
/* 広い窓: 候補・選択リスト・素材を横に並べる。素材を畳んだときは通常幅の並びに戻して列を空けない。 */
@container affordable-training (min-width: 1100px) {
    .app-shell .affordable-body:not(.materials-collapsed) {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr) minmax(300px, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        grid-template-areas: "candidates selection detail" "candidates commit detail";
    }
    .app-shell .affordable-body:not(.materials-collapsed) .affordable-detail { border-top: 0; border-left: 1px solid var(--line2); }
    .app-shell .affordable-body:not(.materials-collapsed) .affordable-detail-content { flex: 1 1 auto; max-height: none; }
}
/* 狭い窓: 縦に積んで全体をスクロールし、登録欄を下端に貼り付けて隠さない。 */
@container affordable-training (max-width: 599px) {
    .app-shell .affordable-controls { gap: 6px 12px; }
    .app-shell .affordable-controls :is(select, input[type=search]) { flex-basis: 130px; }
    .app-shell .affordable-body { display: flex; flex-direction: column; overflow: hidden; }
    .app-shell .affordable-scroll-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
    .app-shell .affordable-candidates { flex: none; height: max(220px, 44dvh); border-right: 0; }
    .app-shell .affordable-selection { flex: none; border-top: 1px solid var(--line2); }
    .app-shell .affordable-selection-scroll { flex: none; max-height: 40dvh; }
    .app-shell .affordable-detail { flex: none; }
    .app-shell .affordable-detail-content { max-height: none; }
    .app-shell .affordable-commit { flex: none; }
}