/*
 * Redmine Agent Dashboard
 * 方針: UI 部品は公式 Fluent UI Web Components の標準スタイルを使う。アプリ固有の配置と表だけ公式テーマトークンで定義する。
 * 外部フォント/CDN なし。部品の選択状態、色、形、アニメーションを独自 CSS で再現しない。
 * 参照: https://fluent2.microsoft.design/ (color, typography, shapes, elevation)
 * テーマ: システム (デフォルト) / ライト / ダーク。<html data-theme> は theme.js が付ける (なければシステム)。
 * パイプラインの表示枠: 詳細画面の #pipeline-slot (対象リポジトリ、分類結果、作業 -> 検証 -> push の結果)。
 */

:root {
  color-scheme: light dark; /* システム: ブラウザー標準のコントロールとスクロールバーが OS のテーマに従う */

  --bg: var(--colorNeutralBackground3);
  --surface: var(--colorNeutralBackground1);
  --line: var(--colorNeutralStroke2);
  --line-strong: var(--colorNeutralStroke1);
  --text: var(--colorNeutralForeground1);
  --text-2: var(--colorNeutralForeground2);
  --text-3: var(--colorNeutralForeground3);
  --accent: var(--colorBrandForegroundLink);
  --danger: var(--colorPaletteRedForeground1);
  --ok: var(--colorPaletteGreenForeground1);
  --accent-weak: var(--colorBrandBackground2);
  --danger-weak: var(--colorPaletteRedBackground1);
  --hover: var(--colorNeutralBackground1Hover);

  --r: var(--borderRadiusMedium);
  --r-panel: var(--borderRadiusXLarge);
  --topbar-h: 56px;

  --font-sans: var(--fontFamilyBase);
  --font-mono: var(--fontFamilyMonospace);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fontSizeBase300)/var(--lineHeightBase300) var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, p, dl, dd, ul, pre { margin: 0; padding: 0; }
ul { list-style: none; }
[hidden] { display: none !important; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }

/* 日本語は禁則処理、韓国語は単語単位で折り返す。 */
:lang(ja) { line-break: strict; word-break: normal; }
:lang(ko) { word-break: keep-all; }



/* ---------- コントロール ---------- */

/* 部品の外観は公式スタイルに任せ、幅と配置だけを指定する。 */
fluent-textarea { width: 100%; }
fluent-text-input, fluent-dropdown { min-width: 0; max-width: 100%; }
/* 閉じた Dropdown の内部レイヤーを表の固定見出しより上に出さない。Popover はブラウザーの最上位レイヤーを使う。 */
fluent-dropdown { isolation: isolate; }
fluent-accordion-item { max-width: 100%; }
#rm-q { width: 220px; }
.dlg-fields fluent-text-input, .dlg-fields fluent-dropdown { width: 100%; }
.settings-fields { display: grid; gap: var(--spacingVerticalL); }
.settings-fields .field-inline { display: grid; grid-template-columns: 76px minmax(0, 1fr); }
.loading { margin: var(--spacingVerticalXXL); }

label { color: var(--text-2); font: var(--fontSizeBase300)/var(--lineHeightBase300) var(--font-sans); }
.check { display: flex; align-items: center; gap: var(--spacingVerticalSNudge); cursor: pointer; }
.check input { margin: 0; }
.field { display: grid; gap: var(--spacingVerticalXS); }
.field-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--spacingVerticalM); }
.field-inline { display: flex; align-items: center; gap: var(--spacingVerticalSNudge); min-width: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tag { vertical-align: middle; }
.auto-tag { margin-right: var(--spacingHorizontalS); }

/* ---------- レイアウト ---------- */

.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; }

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  min-height: var(--topbar-h);
  padding: var(--spacingVerticalM) var(--spacingVerticalXXL);
  border-bottom: var(--strokeWidthThin) solid var(--line);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: var(--spacingVerticalMNudge); font-size: var(--fontSizeBase400); font-weight: var(--fontWeightSemibold); letter-spacing: 0; white-space: nowrap; }
.topbar-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--spacingVerticalS) var(--spacingVerticalL); margin-left: auto; min-width: 0; }
.primary-nav { display: flex; gap: var(--spacingVerticalS); flex-wrap: wrap; }
/* 自動実行のスイッチと状態 (待機中 / #N 処理中 / 最終確認時刻) */
.auto-run { display: flex; align-items: center; gap: var(--spacingVerticalS); min-width: 0; }
.auto-run .check span { white-space: nowrap; }
.auto-status { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: var(--fontSizeBase200); }
.auto-run[data-state="off"] .auto-status:empty { display: none; }
.synced { color: var(--text-3); font-size: var(--fontSizeBase200); white-space: nowrap; }

/* 接続状態: サーバーの状態を示す唯一の表示点 */
.conn { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-2); }
.conn[data-state="error"] { color: var(--danger); }
.conn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-text strong { color: var(--text); font-weight: var(--fontWeightSemibold); }

.workspace {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(480px, 1.4fr);
  gap: var(--spacingVerticalL);
  padding: var(--spacingVerticalL);
  min-height: 0;
}
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; }
.list-pane { container: list / inline-size; }

.pane-head {
  display: flex;
  align-items: center;
  gap: var(--spacingVerticalM);
  flex-wrap: wrap;
  padding: var(--spacingVerticalL) var(--spacingVerticalXL);
  border-bottom: var(--strokeWidthThin) solid var(--line);
}
.pane-title { display: flex; align-items: center; gap: var(--spacingHorizontalS); font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); font-weight: var(--fontWeightSemibold); }
.count { flex: none; }
.count:empty { display: none; }
.filters { display: flex; align-items: flex-end; gap: var(--spacingVerticalM); margin-left: auto; flex-wrap: wrap; }
.filters > .check { min-height: 32px; }
.filters fluent-dropdown { max-width: 200px; }
@container list (max-width: 760px) {
  .list-pane .filters { margin-left: 0; width: 100%; }
  .list-pane .filters .field-inline { flex: 1 1 180px; align-items: stretch; flex-direction: column; gap: var(--spacingVerticalXS); }
  .list-pane .filters fluent-dropdown { width: 100%; max-width: none; }
}

.list-body { flex: 1; min-height: 0; overflow: auto; }

/* ---------- 一覧テーブル ---------- */

.issues { width: 100%; border-collapse: collapse; table-layout: fixed; }
.issues th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--spacingVerticalMNudge) var(--spacingVerticalM);
  border-bottom: var(--strokeWidthThin) solid var(--line-strong);
  background: var(--bg);
  color: var(--text-2);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold);
  text-align: left;
  white-space: nowrap;
}
.issues td {
  padding: 0 var(--spacingVerticalM);
  height: 44px;
  border-bottom: var(--strokeWidthThin) solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.issues tbody tr { cursor: pointer; }
.issues tbody tr:hover { background: var(--hover); }
.issues tbody tr[data-selected="true"] { background: var(--colorNeutralBackground1Selected); }
.issues tbody tr:has(:focus-visible) { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: -2px; }

.c-id { width: 62px; color: var(--text-2); }
.c-project { width: 156px; }
.c-tracker { width: 76px; }
.c-status { width: 116px; }
.c-priority { width: 68px; }
.c-author { width: 90px; }
.c-updated { width: 118px; color: var(--text-2); }
th.c-id, th.c-updated { font-variant-numeric: normal; }

.issues tbody tr[data-selected="true"] .subj { font-weight: var(--fontWeightSemibold); }

/* 優先度の強調段階: id ではなくサーバー設定 (順序、デフォルト値) に基づいて app.js が data-tier を付ける */
[data-tier="low"] { color: var(--text-3); }
[data-tier="high"] { font-weight: var(--fontWeightSemibold); }
[data-tier="urgent"] { color: var(--danger); font-weight: var(--fontWeightSemibold); }

/* 一覧の幅が狭くなったら補助列から隠す */
@container list (max-width: 1100px) { .c-tracker { display: none; } }
@container list (max-width: 1000px) { .c-author { display: none; } }
@container list (max-width: 900px) { .c-project { display: none; } }
/* 狭い幅: テーブルを 2 行のカード型の行に変える (題名全体が読める必要がある) */
@container list (max-width: 760px) {
  .issues thead { display: none; }
  .issues, .issues tbody { display: block; }
  .issues tbody tr {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "subj subj subj subj" "id status prio updated";
    align-items: baseline;
    gap: var(--spacingVerticalS) var(--spacingVerticalM);
    padding: 14px var(--spacingVerticalXL);
    border-bottom: var(--strokeWidthThin) solid var(--line);
  }
  .issues td { display: block; width: auto; height: auto; padding: 0; border: 0; }
  .issues td.c-project, .issues td.c-tracker, .issues td.c-author { display: none; }
  .issues td.c-subject { grid-area: subj; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: var(--fontSizeBase300); line-height: 1.45; }
  .c-id { grid-area: id; font-size: var(--fontSizeBase200); }
  .c-status { grid-area: status; font-size: var(--fontSizeBase200); color: var(--text-2); }
  .c-priority { grid-area: prio; font-size: var(--fontSizeBase200); }
  .c-updated { grid-area: updated; justify-self: end; font-size: var(--fontSizeBase200); }
}

/* ---------- リポジトリ割当画面 ---------- */

.login-view { display: grid; place-items: center; padding: var(--spacingVerticalXXXL) var(--spacingHorizontalL); }
.login-card { display: grid; gap: var(--spacingVerticalM); width: min(100%, 360px); padding: var(--spacingVerticalXL) var(--spacingHorizontalXL); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.login-card fluent-text-input { width: 100%; }
.login-error { margin: 0; color: var(--danger); font-size: var(--fontSizeBase200); }
.login-note { display: grid; gap: var(--spacingVerticalXS); color: var(--text-2); font-size: var(--fontSizeBase200); }
.login-note:empty { display: none; }
.login-guide { justify-self: start; color: var(--accent); font-size: var(--fontSizeBase200); }
.users-view { min-height: 0; display: flex; flex-direction: column; margin: var(--spacingVerticalL); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; container: users / inline-size; }
.users-body { overflow: auto; padding: 0 var(--spacingHorizontalL) var(--spacingVerticalL); }
.users-table { width: 100%; border-collapse: collapse; font-size: var(--fontSizeBase200); }
.users-table th, .users-table td { padding: var(--spacingVerticalS) var(--spacingHorizontalS); border-bottom: var(--strokeWidthThin) solid var(--line); text-align: left; vertical-align: middle; }
.users-table th { color: var(--text-2); font-weight: var(--fontWeightSemibold); }
.users-tools { display: flex; flex-wrap: wrap; gap: var(--spacingHorizontalXS); }
.settings-account { display: grid; gap: var(--spacingVerticalS); padding-top: var(--spacingVerticalS); border-top: var(--strokeWidthThin) solid var(--line); }
.settings-account-actions { display: flex; flex-wrap: wrap; gap: var(--spacingHorizontalS); }
/* 作成者のアカウントには運用の画面と操作を出さない (サーバーも 403 で拒否する) */
body[data-role="author"] .admin-only { display: none !important; }
/* ログイン前はログイン画面だけ */
body[data-auth="none"] .topbar-tools, body[data-auth="none"] main:not(#login-view) { display: none !important; }
.setup-view { min-height: 0; display: flex; flex-direction: column; margin: var(--spacingVerticalL); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; container: setup / inline-size; }
.setup-body { display: flex; flex-direction: column; gap: var(--spacingVerticalL); padding: var(--spacingVerticalL); overflow: auto; }
.setup-body > * { flex: none; }
.setup-progress { display: grid; gap: var(--spacingVerticalXS); }
.setup-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); align-items: start; gap: var(--spacingVerticalM); margin: 0; padding: 0; list-style: none; }
.setup-step { display: grid; gap: var(--spacingVerticalS); padding: var(--spacingVerticalM) var(--spacingHorizontalL); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); }
.setup-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingHorizontalS); }
.setup-step-head h3 { margin: 0; font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); }
.setup-items { display: grid; gap: var(--spacingVerticalM); margin: 0; padding: 0; list-style: none; }
.setup-item { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--spacingVerticalXS) var(--spacingHorizontalS); align-items: start; }
.setup-item > :not(:first-child) { grid-column: 2; }
.setup-item-title { font-weight: var(--fontWeightSemibold); }
.setup-detail { color: var(--text-2); font-size: var(--fontSizeBase200); overflow-wrap: anywhere; }
.setup-fix { display: grid; gap: var(--spacingVerticalXS); margin: 0; font-size: var(--fontSizeBase200); }
.setup-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalXS) var(--spacingHorizontalS); }
.setup-cmd code { flex: 1 1 260px; min-width: 0; }
.setup-foot { margin: 0; color: var(--text-2); font-size: var(--fontSizeBase200); }
.servers-view { min-height: 0; display: flex; flex-direction: column; margin: var(--spacingVerticalL); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; container: servers / inline-size; }
.servers-body { overflow: auto; padding: var(--spacingVerticalL); display: grid; gap: var(--spacingVerticalM); align-content: start; }
.srv-card { display: grid; gap: var(--spacingVerticalS); padding: var(--spacingVerticalL) 0; border-bottom: var(--strokeWidthThin) solid var(--line); }
.srv-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalSNudge) var(--spacingVerticalMNudge); }
.srv-name { font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); }
.srv-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--spacingVerticalXS) var(--spacingVerticalM); margin: 0; font-size: var(--fontSizeBase200); }
.srv-meta dt { color: var(--text-2); }
.srv-meta dd { margin: 0; overflow-wrap: anywhere; }
.srv-cmd { display: block; padding: var(--spacingVerticalSNudge) var(--spacingVerticalS); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--bg); font-size: var(--fontSizeBase200); overflow-wrap: anywhere; user-select: all; }
.srv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalSNudge) var(--spacingVerticalS); }
.repos-view { min-height: 0; display: flex; flex-direction: column; margin: var(--spacingVerticalL); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; container: repos / inline-size; }
.repos-view .field-inline label { white-space: nowrap; }
.repos-note { padding: var(--spacingVerticalS) var(--spacingVerticalL); border-bottom: var(--strokeWidthThin) solid var(--line); background: var(--bg); color: var(--text-2); font-size: var(--fontSizeBase200); overflow-wrap: anywhere; }
.repos-note:empty { display: none; }
.repos-body { flex: 1; min-height: 0; overflow: auto; }

.map-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.map-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--spacingVerticalMNudge) var(--spacingVerticalM);
  border-bottom: var(--strokeWidthThin) solid var(--line-strong);
  background: var(--bg);
  color: var(--text-2);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold);
  text-align: left;
}
.map-table td { padding: var(--spacingVerticalL) var(--spacingVerticalM); border-bottom: var(--strokeWidthThin) solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.map-table tbody tr:hover { background: var(--hover); }
.cell-label { display: none; font: var(--fontSizeBase200)/var(--lineHeightBase200) var(--font-sans); color: var(--text-3); }
.m-c0 { width: 20%; }
.m-c1 { width: 16%; }
.m-c2 { width: 76px; }
.m-c3 { width: 21%; }
.m-c4 { width: 22%; }
.m-url { display: grid; gap: var(--spacingVerticalXS); justify-items: start; font-size: var(--fontSizeBase200); }
.m-reason { display: block; margin-top: var(--spacingVerticalXXS); font-size: var(--fontSizeBase200); }
.m-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalSNudge); }
.m-tools fluent-dropdown { min-width: 0; max-width: min(240px, 100%); }
@container repos (max-width: 1200px) {
  .map-table thead { display: none; }
  .map-table, .map-table tbody { display: block; }
  .map-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacingVerticalXS) var(--spacingVerticalM); padding: var(--spacingVerticalMNudge) var(--spacingVerticalM); border-bottom: var(--strokeWidthThin) solid var(--line); }
  .map-table td { display: block; width: auto; padding: 0; border: 0; }
  .map-table .m-c0 { grid-column: 1 / -1; font-size: var(--fontSizeBase300); }
  .map-table .m-c3, .map-table .m-c4, .map-table .m-c5 { grid-column: 1 / -1; }
  .map-table .cell-label { display: block; margin-bottom: var(--spacingVerticalXS); }
}

/* ---------- 作業履歴画面 ---------- */

.history-view { min-height: 0; display: flex; flex-direction: column; margin: var(--spacingVerticalL); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; container: history / inline-size; }
.history-view .field-inline label { white-space: nowrap; }
.history-body { flex: 1; min-height: 0; overflow: auto; }
.hist-summary { padding: var(--spacingVerticalM) var(--spacingVerticalL); border-bottom: var(--strokeWidthThin) solid var(--line); background: var(--bg); }
.hist-stats-title { margin: 0 0 var(--spacingVerticalS); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold); }
.hist-stats-title .muted { font-weight: var(--fontWeightRegular); }
.hist-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacingVerticalS) var(--spacingVerticalM); margin: 0; }
.hist-stat { display: grid; align-content: start; gap: var(--spacingVerticalXXS); min-width: 0; padding: var(--spacingVerticalS) var(--spacingHorizontalM); }
.hist-stat dt { color: var(--text-2); font-size: var(--fontSizeBase200); }
.hist-stat dd { margin: 0; font-size: var(--fontSizeBase500); font-weight: var(--fontWeightSemibold); }
.hist-sub { font-size: var(--fontSizeBase200); overflow-wrap: anywhere; }
.hist-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hist-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--spacingVerticalMNudge) var(--spacingVerticalM);
  border-bottom: var(--strokeWidthThin) solid var(--line-strong);
  background: var(--bg);
  color: var(--text-2);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold);
  text-align: left;
}
.hist-table td { padding: var(--spacingVerticalM); border-bottom: var(--strokeWidthThin) solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.hist-table tbody tr { cursor: pointer; }
.hist-table tbody tr:hover { background: var(--hover); }
.hist-table tbody tr:has(:focus-visible) { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: -2px; }
.hist-table .h-c3 .tag { margin: 0 var(--spacingVerticalXS) var(--spacingVerticalXS) 0; }
.h-c0 { width: 28%; }
.h-c1 { width: 8%; }
.h-c2 { width: 126px; }
.h-c3 { width: 14%; }
.h-c4 { width: 14%; }
.h-c5 { width: 84px; white-space: nowrap; }
.h-c6 { width: 76px; }
.h-c7 { width: 64px; text-align: right; }
th.h-c7 { text-align: right; }
.h-key, .h-repo { display: none; font-size: var(--fontSizeBase200); overflow-wrap: anywhere; }
.h-branch { display: block; margin-top: var(--spacingVerticalXXS); font-size: var(--fontSizeBase200); color: var(--text-2); overflow-wrap: anywhere; }
.hist-more { padding: var(--spacingVerticalM) var(--spacingVerticalL); }
/* 狭くなるにつれて依頼、リポジトリの列を隠し、題名の下の小さな行に移す */
@container history (max-width: 1000px) { .hist-table .h-c1 { display: none; } .h-key { display: block; } }
@container history (max-width: 820px) { .hist-table .h-c4 { display: none; } .h-repo { display: block; } .hist-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 狭い幅: テーブルを数行のカード型の行に変える */
@container history (max-width: 640px) {
  .hist-table thead { display: none; }
  .hist-table, .hist-table tbody { display: block; }
  .hist-table tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "subj subj subj" "status status status" "time tier cost" "commit commit commit";
    align-items: baseline;
    gap: var(--spacingVerticalSNudge) var(--spacingVerticalM);
    padding: var(--spacingVerticalM) var(--spacingVerticalL);
    border-bottom: var(--strokeWidthThin) solid var(--line);
  }
  .hist-table td { display: block; width: auto; padding: 0; border: 0; }
  .hist-table td.h-c1, .hist-table td.h-c4 { display: none; }
  .hist-table td.h-c0 { grid-area: subj; font-size: var(--fontSizeBase300); line-height: 1.45; }
  .hist-table td.h-c3 { grid-area: status; }
  .hist-table td.h-c2 { grid-area: time; font-size: var(--fontSizeBase200); }
  .hist-table td.h-c6 { grid-area: tier; font-size: var(--fontSizeBase200); }
  .hist-table td.h-c7 { grid-area: cost; font-size: var(--fontSizeBase200); justify-self: end; }
  .hist-table td.h-c5 { grid-area: commit; font-size: var(--fontSizeBase200); }
  .hist-table .cell-label { display: block; margin-bottom: var(--spacingVerticalXXS); }
  .hist-summary { padding: var(--spacingVerticalS) var(--spacingVerticalM); }
  .hist-stats-title { margin-bottom: var(--spacingVerticalSNudge); }
  .hist-stat { padding: var(--spacingVerticalSNudge) var(--spacingVerticalMNudge); }
  .hist-stat dd { font-size: var(--fontSizeBase400); }
  .hist-sub { display: none; }
}
.view-banner fluent-link { margin-right: var(--spacingHorizontalS); }

/* ---------- テストサーバー FTP (テストサーバー画面) ---------- */
.ftp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalSNudge) var(--spacingVerticalMNudge); font-size: var(--fontSizeBase200); }
.ftp-result-title { font-weight: var(--fontWeightSemibold); }
.ftp-entries { margin: var(--spacingVerticalXS) 0 0; font-size: var(--fontSizeBase200); color: var(--text-2); overflow-wrap: anywhere; }
.m-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalXS) var(--spacingVerticalSNudge); }

/* ---------- 状態ブロック (空の状態 / エラー / ローディング) ---------- */

.state { flex: 1; display: grid; align-content: start; justify-items: start; gap: var(--spacingVerticalSNudge); padding: 28px var(--spacingVerticalL); max-width: 640px; width: 100%; }
.state-title { font-size: var(--fontSizeBase400); font-weight: var(--fontWeightSemibold); }
.state-text { color: var(--text-2); max-width: 60ch; white-space: pre-line; }
.state-code { color: var(--text-3); font-size: var(--fontSizeBase200); }
.state.is-error .state-title { color: var(--danger); }
.state.is-loading { max-width: none; padding: 0; justify-items: stretch; }
.state .btn { margin-top: var(--spacingVerticalS); }
.state-empty { max-width: none; align-content: center; justify-items: center; gap: var(--spacingVerticalM); padding: var(--spacingVerticalXXXL); text-align: center; }
.state-empty .state-text { max-width: 36ch; color: var(--text-3); }
.state pre { margin-top: var(--spacingVerticalXS); padding: var(--spacingVerticalS) var(--spacingVerticalMNudge); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--bg); font: var(--fontSizeBase200)/var(--lineHeightBase200) var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }

/* ---------- 詳細 ---------- */

.detail-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.detail-scroll { flex: 1; min-height: 0; overflow: auto; }
#detail-content { padding: var(--spacingVerticalXXL); container: detail / inline-size; }

.d-back { display: none; margin-bottom: var(--spacingVerticalM); width: fit-content; }
.d-idline { display: flex; align-items: baseline; gap: var(--spacingVerticalMNudge); flex-wrap: wrap; color: var(--text-2); }
.d-project { min-width: 0; }
.d-ext { margin-left: auto; }
.d-title { margin: var(--spacingVerticalM) 0 var(--spacingVerticalXL); font-size: var(--fontSizeBase600); font-weight: var(--fontWeightSemibold); line-height: 1.35; font-feature-settings: "palt"; }

.d-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacingVerticalM) var(--spacingHorizontalXXL); margin-top: var(--spacingVerticalXXL); }
.d-meta dt { color: var(--text-3); font-size: var(--fontSizeBase200); }
.d-meta dd { min-width: 0; overflow-wrap: anywhere; }
.d-meta dd.mono { font-size: var(--fontSizeBase200); white-space: nowrap; }

.d-section { margin-top: var(--spacingVerticalXXL); }
.d-section h3 { margin-bottom: var(--spacingVerticalM); font-size: var(--fontSizeBase400); font-weight: var(--fontWeightSemibold); color: var(--text); }
.d-section h3 .tag { margin-left: var(--spacingHorizontalS); }
.d-section h3 .mono { font-weight: var(--fontWeightRegular); color: var(--text-3); margin-left: var(--spacingHorizontalXS); }

.prose { white-space: pre-wrap; font-size: var(--fontSizeBase300); line-height: 1.7; }

.att-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacingVerticalMNudge); margin-bottom: var(--spacingVerticalS); }
.att-image { display: grid; gap: var(--spacingVerticalXS); min-width: 0; }
.att-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--bg); }
.att-image span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fontSizeBase200); }
.att-files li { padding: var(--spacingVerticalXS) 0; }
.att-size { margin-left: var(--spacingHorizontalS); }

.journal { padding: var(--spacingVerticalMNudge) 0; border-top: var(--strokeWidthThin) solid var(--line); }
.journal:first-of-type { border-top: 0; padding-top: var(--spacingVerticalXXS); }
.j-head { display: flex; align-items: center; gap: var(--spacingVerticalMNudge); flex-wrap: wrap; }
.j-no { color: var(--text-3); font-size: var(--fontSizeBase200); }
.j-user { font-weight: var(--fontWeightSemibold); }
.j-date { color: var(--text-3); font-size: var(--fontSizeBase200); }
.j-private { color: var(--text-2); }
.j-details { margin-top: var(--spacingVerticalXS); color: var(--text-2); font-size: var(--fontSizeBase200); }
.j-details li + li { margin-top: var(--spacingVerticalXXS); }
.j-details .from { text-decoration: line-through; text-decoration-thickness: 1px; }
.j-notes { margin-top: var(--spacingVerticalXS); white-space: pre-wrap; font-size: var(--fontSizeBase300); line-height: 1.65; }
.j-past { margin-top: var(--spacingVerticalMNudge); }

/* ---------- 今回の依頼 (パイプラインの上) ---------- */

.rq-grid { display: grid; gap: var(--spacingVerticalSNudge); }
.rq-grid > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 0 var(--spacingVerticalM); }
.rq-grid dt { color: var(--text-3); font-size: var(--fontSizeBase200); padding-top: 1px; }
.rq-grid dd { min-width: 0; }
.rq-atts { display: grid; gap: var(--spacingVerticalXXS); font-size: var(--fontSizeBase200); }
.rq-past { margin-top: var(--spacingVerticalMNudge); }
.rq-past-list { display: grid; gap: var(--spacingVerticalSNudge); margin-top: var(--spacingVerticalSNudge); }
.rq-past-row { padding-top: var(--spacingVerticalSNudge); border-top: var(--strokeWidthThin) solid var(--line); }
.rq-past-row:first-child { border-top: 0; padding-top: 0; }
.pl-url { font-size: var(--fontSizeBase200); }

/* ---------- パイプライン (対象リポジトリ、分類) ---------- */

.pl-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 0 var(--spacingVerticalM); padding: var(--spacingVerticalL) 0; border-top: var(--strokeWidthThin) solid var(--line); }
.pl-row:first-of-type { border-top: 0; padding-top: var(--spacingVerticalXXS); }
.pl-label { color: var(--text-3); font-size: var(--fontSizeBase200); padding-top: 5px; }
.pl-label, .rq-grid dt { white-space: nowrap; }
.pl-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacingVerticalS); align-content: start; }
.pl-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalSNudge) var(--spacingVerticalMNudge); min-width: 0; }
.pl-repo { overflow-wrap: anywhere; }
.pl-tools { display: flex; flex-wrap: wrap; gap: var(--spacingVerticalSNudge); margin-left: auto; }
.pl-tools fluent-dropdown { max-width: 220px; min-width: 0; }
.pl-hint { color: var(--text-3); font-size: var(--fontSizeBase200); }
.pl-hint.is-error { color: var(--danger); }
.pl-error { padding: 0; }

.tri-running { display: grid; gap: 0; }
.tri-bar { margin-top: var(--spacingVerticalS); }

.tri-fail-title { color: var(--danger); font-weight: var(--fontWeightSemibold); }
.tri-fail .muted { margin-top: var(--spacingVerticalXS); font-size: var(--fontSizeBase200); }
.tri-fail pre { margin-top: var(--spacingVerticalSNudge); padding: var(--spacingVerticalSNudge) var(--spacingVerticalS); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--bg); font: var(--fontSizeBase200)/var(--lineHeightBase200) var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 160px; overflow: auto; }
.tri-fail .state-code { margin-top: var(--spacingVerticalXS); }

.tri-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacingVerticalM); }
.tri-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalSNudge); }
.tri-tags .tag { max-width: 100%; white-space: normal; }
.tri-meta { flex-basis: 100%; color: var(--text-3); font-size: var(--fontSizeBase200); overflow-wrap: anywhere; }
.tri-block h4 { margin: 0 0 var(--spacingVerticalXS); font-size: var(--fontSizeBase200); font-weight: var(--fontWeightSemibold); color: var(--text-2); }
.tri-text { white-space: pre-wrap; font-size: var(--fontSizeBase300); line-height: 1.65; }
.tri-targets { display: grid; gap: var(--spacingVerticalXS); }
.tri-targets li { display: grid; grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); gap: var(--spacingVerticalXXS) var(--spacingVerticalM); padding: var(--spacingVerticalXS) 0; border-top: var(--strokeWidthThin) solid var(--line); }
.tri-targets li:first-child { border-top: 0; }
.tri-file { font-size: var(--fontSizeBase200); overflow-wrap: anywhere; }
.tri-what { overflow-wrap: anywhere; }
.tri-questions ol { padding-left: var(--spacingHorizontalXL); list-style: decimal; display: grid; gap: var(--spacingVerticalXS); margin-bottom: var(--spacingVerticalS); font-size: var(--fontSizeBase200); line-height: 1.65; }
.tri-warn ul { padding-left: var(--spacingHorizontalL); list-style: disc; color: var(--text-2); font-size: var(--fontSizeBase200); }
@container detail (max-width: 580px) {
  .rq-grid > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pl-row { grid-template-columns: minmax(0, 1fr); gap: var(--spacingVerticalXXS); }
  .pl-label { padding-top: 0; }
  .tri-targets li { grid-template-columns: minmax(0, 1fr); }
  .pl-tools { margin-left: 0; }
}

/* ---------- 作業 (ステップの進行、結果、diff、スクリーンショット) ---------- */

.wk-running { gap: 0; }
.wk-steps { display: grid; grid-template-columns: max-content minmax(96px, max-content) minmax(0, 1fr) max-content; column-gap: var(--spacingHorizontalMNudge); margin: var(--spacingVerticalS) 0 0; padding: 0; list-style: none; }
.wk-steps li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; padding: 5px 0; border-top: var(--strokeWidthThin) solid var(--line); }
.wk-steps li > :first-child { align-self: center; justify-self: center; }
.wk-steps li:first-child { border-top: 0; }
.wk-steps li[data-status="pending"] .wk-label, .wk-steps li[data-status="skipped"] .wk-label { color: var(--text-3); }
.wk-steps li[data-status="running"] .wk-label { font-weight: var(--fontWeightSemibold); }
.wk-label { font-weight: var(--fontWeightRegular); white-space: nowrap; }
.wk-detail { min-width: 0; color: var(--text-3); font-size: var(--fontSizeBase200); overflow-wrap: anywhere; }
.wk-time { color: var(--text-3); font-size: var(--fontSizeBase200); white-space: nowrap; }
.wk-model { font-size: var(--fontSizeBase200); color: var(--text-2); }

.wk-actions { margin-top: -2px; }
.wk-hint { white-space: pre-line; font-size: var(--fontSizeBase200); }
.wk-blockers { padding-left: var(--spacingHorizontalL); list-style: disc; color: var(--text-3); font-size: var(--fontSizeBase200); }
.wk-files { display: grid; gap: 3px; }
.wk-files li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalXS) var(--spacingVerticalS); min-width: 0; font-size: var(--fontSizeBase200); }
.wk-files .mono { overflow-wrap: anywhere; }
.wk-stat { margin: var(--spacingVerticalSNudge) 0; padding: var(--spacingVerticalSNudge) var(--spacingVerticalS); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--text-2); font-size: var(--fontSizeBase200); line-height: 1.5; white-space: pre; overflow-x: auto; }
.wk-problems { display: grid; gap: var(--spacingVerticalSNudge); margin-top: var(--spacingVerticalSNudge); }
.wk-problems li { display: flex; align-items: flex-start; gap: var(--spacingVerticalS); }
.wk-problems .tag { flex: none; }
.wk-problems li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.wk-blocked-body { display: grid; gap: var(--spacingVerticalXXS); min-width: 0; overflow-wrap: anywhere; }
.wk-blocked-body > p { margin: 0; }
.wk-details { font-size: var(--fontSizeBase200); }
.wk-attempt { display: grid; gap: var(--spacingVerticalSNudge); margin-top: var(--spacingVerticalS); padding-top: var(--spacingVerticalS); border-top: var(--strokeWidthThin) solid var(--line); }
.wk-log { margin: var(--spacingVerticalSNudge) 0 0; padding: 0; max-height: 220px; overflow: auto; list-style: none; font-size: var(--fontSizeBase200); line-height: 1.6; }
.wk-push[data-state="done"] h4 { color: var(--text); }
/* テストサーバーへのアップロード (push 記録内): 要約行の下にファイルごとの状態、警告 */
.wk-upload-file { padding-left: 14px; }
.wk-upload-err { color: var(--danger); overflow-wrap: anywhere; }
.wk-upload-warn { padding-left: 14px; }
.rq-ext li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalXXS) var(--spacingVerticalSNudge); min-width: 0; }
.rq-ext .mono { overflow-wrap: anywhere; }
.ext-msg { overflow-wrap: anywhere; }
.wk-placed h4 { color: var(--text-2); }

.wk-diff { max-height: 420px; margin-top: var(--spacingVerticalS); overflow: auto; border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--bg); font: var(--fontSizeBase200)/var(--lineHeightBase200) var(--font-mono); }
.wk-diff .dl { display: block; min-width: max-content; padding: 0 var(--spacingVerticalMNudge); white-space: pre; }
.wk-diff .dl.add { background: var(--colorPaletteGreenBackground1); }
.wk-diff .dl.del { background: var(--danger-weak); }
.wk-diff .dl.hunk { background: var(--accent-weak); color: var(--text-2); }
.wk-diff .dl.meta { color: var(--text-3); }
.wk-diff + .btn, .wk-diff ~ .btn { margin-top: var(--spacingVerticalS); }
.tri-block > .btn { margin-top: var(--spacingVerticalXS); }

.wk-shot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalS) var(--spacingVerticalM); margin-bottom: var(--spacingVerticalS); }
.wk-shot-file { font-size: var(--fontSizeBase200); overflow-wrap: anywhere; }
.wk-tabs { display: inline-flex; gap: var(--spacingHorizontalS); margin-left: auto; }
.wk-shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacingVerticalMNudge); }
.wk-shot-pair.is-stacked { grid-template-columns: minmax(0, 1fr); }
.wk-shot { margin: 0; min-width: 0; }
.wk-shot figcaption { margin-bottom: var(--spacingVerticalXS); color: var(--text-3); font-size: var(--fontSizeBase200); }
.wk-shot-scroll { max-height: 520px; overflow: auto; border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--bg); }
.wk-shot-scroll img { display: block; width: 100%; height: auto; }
.wk-shot-none { padding: var(--spacingVerticalM); }

/* コメント添付用のクロップ (前/後で同じ範囲) */
.wk-crop-set { display: grid; gap: var(--spacingVerticalXS); margin-top: var(--spacingVerticalS); }
.wk-crop-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacingVerticalMNudge); }
.wk-crop-pair.is-stacked { grid-template-columns: minmax(0, 1fr); }
.wk-crop { margin: 0; display: grid; gap: 3px; min-width: 0; align-content: start; }
.wk-crop figcaption { color: var(--text-3); font-size: var(--fontSizeBase200); }
.wk-crop img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; object-position: left top; border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--bg); }
.wk-crop-cap { color: var(--text-3); font-size: var(--fontSizeBase100); overflow-wrap: anywhere; }

@container detail (max-width: 420px) {
  .wk-steps { grid-template-columns: max-content minmax(0, 1fr) max-content; }
  .wk-steps .wk-detail { grid-column: 2 / -1; grid-row: 2; }
  .wk-steps .wk-time { grid-column: 3; grid-row: 1; }
}
@container detail (max-width: 380px) {
  .wk-shot-pair, .wk-crop-pair { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 操作バー ---------- */

.actions { flex: none; display: grid; gap: var(--spacingVerticalS); padding: var(--spacingVerticalM) var(--spacingVerticalXXL); border-top: var(--strokeWidthThin) solid var(--line); background: var(--surface); }
.comment-editor[expanded] > .field { margin-top: var(--spacingVerticalS); }
.comment-editor .field-head { gap: var(--spacingVerticalXS); }
.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacingVerticalS) 14px; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--spacingVerticalS); margin-left: auto; }
.hint { color: var(--text-3); font-size: var(--fontSizeBase200); }

/* ---------- 確認ダイアログ ---------- */

/* 公式 Dialog の色・形・影・動作は変更しない。画面内に収める寸法だけを指定する。 */
fluent-dialog::part(dialog) { width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
fluent-dialog.wide::part(dialog) { max-width: 720px; }
.dlg { max-height: calc(100dvh - 32px); grid-template-rows: auto minmax(0, 1fr) auto; }
.dlg::part(content) { min-height: 0; overflow: auto; }
.dlg-title:focus { outline: none; }
.dlg-body { display: grid; gap: var(--spacingVerticalL); }
.dlg-target { color: var(--text-2); }
.dlg-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--spacingVerticalSNudge) 14px; padding: var(--spacingVerticalMNudge) 0; border-top: var(--strokeWidthThin) solid var(--line); border-bottom: var(--strokeWidthThin) solid var(--line); }
.dlg-rows:empty { display: none; }
.dlg-rows dt { color: var(--text-3); font-size: var(--fontSizeBase200); padding-top: 1px; }
.dlg-rows dd { min-width: 0; }
.dlg-rows .arrow { color: var(--text-3); margin: 0 var(--spacingVerticalSNudge); }
.dlg-list { display: grid; gap: var(--spacingVerticalXXS); font-size: var(--fontSizeBase200); }
/* push の確認ダイアログ: 検証後に人が追加した差分 (行の色分けは .wk-diff と共通) */
.wk-diff.dlg-diff { max-height: 260px; margin-top: 0; }
.dlg-fields { display: grid; gap: var(--spacingVerticalMNudge); }
.dlg-fields .hint { margin: 0; }
.dlg-label { color: var(--text-3); font-size: var(--fontSizeBase200); margin-bottom: var(--spacingVerticalXS); }
/* push の確認ダイアログ: 添付されるスクリーンショットのプレビューと画像ごとの除外チェックボックス */
.dlg-shots { display: grid; gap: var(--spacingVerticalM); }
.dlg-shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacingVerticalMNudge); }
.dlg-shot { display: grid; gap: var(--spacingVerticalXS); align-content: start; min-width: 0; font-size: var(--fontSizeBase200); cursor: pointer; }
.dlg-shot-head { display: flex; align-items: center; gap: var(--spacingHorizontalS); }
.dlg-shot-head fluent-checkbox { margin: 0; }
.dlg-shot img { display: block; width: 100%; height: 130px; object-fit: contain; object-position: left top; border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--surface); }
.dlg-shot-cap { color: var(--text-3); font-size: var(--fontSizeBase100); overflow-wrap: anywhere; }
.dlg-note pre { max-height: 200px; overflow: auto; padding: var(--spacingVerticalS) var(--spacingVerticalMNudge); border: var(--strokeWidthThin) solid var(--line); border-radius: var(--r); background: var(--bg); font: var(--fontSizeBase300)/var(--lineHeightBase300) var(--font-sans); white-space: pre-wrap; }
.dlg-error-title { color: var(--danger); font-weight: var(--fontWeightSemibold); }
.dlg-error ul { margin-top: var(--spacingVerticalXS); padding-left: var(--spacingHorizontalL); list-style: disc; }
.dlg-error .muted { margin-top: var(--spacingVerticalXS); font-size: var(--fontSizeBase200); white-space: pre-line; }
/* ---------- トースト ---------- */

.toasts { position: fixed; left: 16px; bottom: 16px; z-index: 30; display: grid; gap: var(--spacingVerticalSNudge); pointer-events: none; }
.toast { max-width: min(420px, calc(100vw - 32px)); }

/* ---------- 狭い画面 ---------- */

@media (max-width: 899px) {
  .workspace { grid-template-columns: minmax(0, 1fr); padding: var(--spacingVerticalS); gap: 0; }
  body[data-view="list"] .detail-pane { display: none; }
  body[data-view="detail"] .list-pane { display: none; }
  .d-back { display: inline-block; }
  .topbar { flex-wrap: wrap; gap: var(--spacingVerticalSNudge) var(--spacingVerticalM); padding: var(--spacingVerticalS) var(--spacingVerticalM); }
  .topbar-tools { width: 100%; margin-left: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--spacingVerticalS); order: 2; }
  .primary-nav { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacingVerticalXS); }
  .auto-run { grid-column: 1 / -1; flex-wrap: wrap; }
  .auto-run .auto-status { max-width: 100%; }
  #refresh { grid-column: 2; }
  #settings-open { grid-column: 3; }
  .conn { flex: 1 1 100%; order: 1; font-size: var(--fontSizeBase200); }
  .conn .muted { display: none; }
  .pane-head { padding: var(--spacingVerticalL); }
  .filters { margin-left: 0; width: 100%; }
  .filters .field-inline { flex: 1 1 160px; flex-direction: column; align-items: stretch; gap: var(--spacingVerticalXS); }
  .filters fluent-dropdown { flex: 1; min-width: 0; }
  #detail-content { padding: var(--spacingVerticalL); }
  .d-title { font-size: var(--fontSizeBase500); }
  .d-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-meta dd.mono { white-space: normal; }
  .detail-view { display: block; flex: 1; overflow: auto; }
  .detail-scroll { overflow: visible; }
  .actions { padding: var(--spacingVerticalM) var(--spacingVerticalL); }
  .btn-group { margin-left: 0; }
  .synced { display: none; }
  .repos-view, .history-view, .servers-view, .setup-view, .users-view { margin: var(--spacingVerticalS); }
  .users-table thead { display: none; }
  .users-table, .users-table tbody, .users-table tr, .users-table td { display: block; }
  .users-table tr { padding: var(--spacingVerticalS) 0; border-bottom: var(--strokeWidthThin) solid var(--line); }
  .users-table td { border: 0; padding: var(--spacingVerticalXXS) 0; }
  .primary-nav:has(#nav-setup:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-table tbody tr { padding: var(--spacingVerticalL); }
}

@media (max-width: 480px) {
  .settings-fields .field-inline { grid-template-columns: minmax(0, 1fr); }
  .dlg-rows { grid-template-columns: minmax(0, 1fr); gap: var(--spacingVerticalXS); }
  .dlg-rows dt:not(:first-child) { margin-top: var(--spacingVerticalS); }
}

/* URL・ファイル名・技術的な値だけは、単語の途中でも折り返してはみ出しを防ぐ。 */
.pl-repo, .tri-file, .wk-files .mono, .m-url .mono, .map-table .mono, .hist-table .mono, .h-repo, .h-branch, .srv-meta dd, .srv-cmd, .dlg-list, .dlg-dest-dir, .dlg-dest-url, .dlg-branch {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (forced-colors: active) {
  .issues tbody tr[data-selected="true"] { outline: var(--strokeWidthThick) solid Highlight; outline-offset: -2px; }
}

/* ---------- push 確認ダイアログ: アップロード先 (サーバー、フォルダー、範囲) を大きく表示 ---------- */
.dlg-dest { display: grid; gap: var(--spacingVerticalS); }
.dlg-dest-head { font-size: var(--fontSizeBase200); color: var(--text-2); font-weight: var(--fontWeightSemibold); }
.dlg-dest-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--spacingVerticalXS) var(--spacingVerticalMNudge); }
.dlg-dest-line:has(> .tag) { align-items: center; }
.dlg-dest-server { font-size: var(--fontSizeBase400); font-weight: var(--fontWeightSemibold); }
.dlg-dest-dir { font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); overflow-wrap: anywhere; }
.dlg-dest-scope { font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); }
.dlg-dest-url { font-size: var(--fontSizeBase200); overflow-wrap: anywhere; }
.dlg-dest-warn { font-size: var(--fontSizeBase200); color: var(--danger); }
.dlg-branch { font-size: var(--fontSizeBase300); font-weight: var(--fontWeightSemibold); overflow-wrap: anywhere; }