/* ============ テーマ (ライト固定) ============ */
:root {
  /* Technical Calm パレット (改善案 §5/§10)。正準名は不変・値のみ更新 */
  --bg: #eef1f5;            /* app-bg */
  --bg-deep: #e7ebf1;       /* workspace-bg (MDIワークスペース背景) */
  --panel: #f7f8fa;         /* surface-2 */
  --panel-2: #ffffff;       /* surface-1 */
  --panel-border: #dce1e8;  /* border-subtle */
  --text: #18212c;          /* text-primary */
  --muted: #687384;         /* text-secondary */
  --accent: #376fd0;        /* accent (落ち着いた青) */
  --accent-hover: #2f63bd;
  --accent-text: #ffffff;
  --fit-color: #d93025;
  --grid-color: rgba(60, 70, 90, 0.13);
  --good: #188038;
  --warn: #b8860b;
  --bad: #c5221f;
  --sel-bg: rgb(55 111 208 / 11%);   /* accent-soft (淡い選択背景) */
  /* 新規: 中立ホバー面 / 選択面(明確に見える) / 強い境界線 / 無効テキスト (改善案 §5/§3) */
  --surface-hover: #f0f3f7;
  --surface-active: #d8e6fb;         /* 選択状態の背景。パネル(#f7f8fa)上で明確に視認できる薄青 */
  --border-strong: #c7ced8;
  --text-disabled: #9ca5b1;
  --shadow: 0 2px 8px rgba(30, 40, 70, 0.10);   /* U.2: 常設要素の影を弱化(旧 0 3px 14px .18) */
  --titlebar: #e3e7ee;
  --titlebar-active: #e3e7ee;                    /* U.2: 青塗り廃止。アクティブ識別は §4.3 の複合で */
  --titlebar-text-active: var(--text);

  /* --- U.1 追加トークン(純粋追加・既存の見た目は不変) --- */
  /* 一時オーバーレイ専用の影(モーダル/ドロップ/フライアウト/グラフ用紙)。常設要素は --shadow を U.2 で弱化 */
  --shadow-overlay: 0 8px 28px rgba(20, 28, 48, 0.20);
  /* アクティブ窓タイトルバーの左 inset ライン用(U.2 で使用) */
  --titlebar-accent: var(--accent);
  /* フォーカスリング(1系統・U.2/U.4 で全要素へ展開) */
  --focus-ring: 0 0 0 2px var(--panel-2), 0 0 0 4px var(--accent);
  /* 余白 / 角丸 / フォント(真に不在なので新規・テーマ非依存) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-ui: "Inter", "Segoe UI", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;
  --ui-font-size: 13px;   /* 設定画面のフォントサイズ。body の基準サイズ (settings.js が上書き) */
}

/* ============ ダークテーマ (U.3) ============
   7 正準色の右辺だけを差し替える。描画 JS は正準名のまま値が変わる = コード変更不要。
   --space/--radius/--font はテーマ非依存なので上書きしない。 */
[data-theme="dark"] {
  --bg: #0e1116;
  --bg-deep: #0a0d11;
  --panel: #1b222c;
  --panel-2: #151a21;           /* plot.js のプロット面 = 暗背景 */
  --panel-border: #2a3440;
  --text: #e7ecf2;
  --muted: #9da8b5;
  --accent: #5b8cff;
  --accent-hover: #7aa2ff;
  --accent-text: #0e1116;       /* 明るい accent 上の文字 */
  --grid-color: rgb(160 175 200 / 0.14);
  --good: #35b47c;
  --warn: #d6a13b;
  --bad: #e46666;
  --fit-color: #ff7a6b;
  --sel-bg: rgb(91 140 255 / 16%);
  --surface-hover: rgb(255 255 255 / 0.06);
  --surface-active: #2a3c57;         /* ダークでの選択面 (暗背景上で明確に視認) */
  --border-strong: #3a4757;
  --text-disabled: #6b7686;

  --shadow: 0 4px 18px rgb(0 0 0 / 0.5);
  --shadow-overlay: 0 10px 32px rgb(0 0 0 / 0.55);

  --titlebar: #1b222c;
  --titlebar-active: #202833;
  --titlebar-text-active: #e7ecf2;
}
/* ダークでの MDI 影 (黒は強めにスケール)。inset アクセントラインは --accent 追従 */
[data-theme="dark"] .mdi-window { box-shadow: 0 8px 24px rgb(0 0 0 / 0.45); }
[data-theme="dark"] .mdi-window:not(.active):not(.maximized) { box-shadow: 0 4px 12px rgb(0 0 0 / 0.3); }
[data-theme="dark"] .mdi-window.active { box-shadow: inset 0 2px 0 var(--accent), 0 10px 30px rgb(0 0 0 / 0.6); }
/* ダーク: 旧ハードコード色(ライト専用)のテーマ上書き — 暗背景で読めるように */
[data-theme="dark"] .ws-meta td.sel,
[data-theme="dark"] .ws-meta td.meta-active { background: #2b3a52; color: var(--text); }   /* 不透明(sticky行が透けない) */
[data-theme="dark"] .btn.danger:hover:not(:disabled) { background: rgb(228 102 102 / 0.14); }
[data-theme="dark"] .rs-stub,
[data-theme="dark"] .page-tab.result-tab,
[data-theme="dark"] .result-fold { color: var(--warn); background: rgb(214 161 59 / 0.12); border-color: rgb(214 161 59 / 0.35); }
[data-theme="dark"] .result-stack:hover .rs-stub,
[data-theme="dark"] .page-tab.result-tab:hover,
[data-theme="dark"] .result-fold:hover { background: rgb(214 161 59 / 0.18); }

/* ============ 基本 ============ */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* ============ 自作カーソルをアプリ全体に適用 ============
   変数は main.js 起動時に CURSORS から注入される */
html, body, * { cursor: var(--cur-arrow, default); }

/* クリック可能要素 → 人差し指ポインタ */
button, .btn, .tb-btn, .menu-label, .menu-item, .exp-item, .exp-folder,
.dlg-tab, .dlg-subtab, .axis-side-item, .br-chip, .check-label,
.tb-flyout-menu button, .gt-sub button, .graph-tools button,
.mdi-btn, .log-titlebar .btn, label[for], select,
input[type="checkbox"], input[type="color"],
.ws-colhead th[data-col], tr.sel-row,
.series-table .rl-del, .ds-del {
  cursor: var(--cur-pointer, pointer);
}
button *, .btn *, .menu-item *, .tb-btn *, .graph-tools button * {
  cursor: var(--cur-pointer, pointer);
}

/* テキスト入力 → I ビーム */
input[type="text"], input[type="number"], textarea, .ws-edit, .anno-input {
  cursor: var(--cur-text, text);
}

/* ワークシートのデータセル → 精密十字 */
.ws-table tbody td { cursor: var(--cur-text, text); }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--ui-font-size, 13px);   /* 設定画面で変更可。基準 UI テキストサイズ */
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.muted { color: var(--muted); }

/* ============ メニューバー ============ */
#menubar-row {
  display: flex;
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  padding: 0 8px;
  user-select: none;
}
.brand { flex: none; display: flex; align-items: center; padding: 0 6px; }

/* 右上の設定ギア (アイコンのみ・テキスト無し) */
.menubar-settings {
  flex: none; display: grid; place-items: center; width: 30px; height: 26px; margin-right: 2px;
  border: none; background: transparent; color: var(--muted); border-radius: 6px;
  cursor: var(--cur-pointer, pointer);
}
.menubar-settings:hover { color: var(--accent); background: var(--surface-hover); }
.menubar-settings:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.menubar-settings svg { display: block; }

/* メニュー(File…Help)は十分な幅では自然配置。狭幅では縮んで横スクロール可にし、
   右端の設定ギア(.menubar-settings)を常にビューポート内へ留める。スクロールバーは隠す。 */
#menubar { display: flex; flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
#menubar::-webkit-scrollbar { display: none; }
.menu-label { flex: none; }
.menu-label {
  padding: 6px 11px;
  font-size: 14px;            /* 改善案 §11: メニューは 14px */
  cursor: var(--cur-pointer, pointer);
  border-radius: 4px 4px 0 0;
}
.menu-label:hover { background: var(--surface-hover); }       /* hover は中立面 (選択は accent-soft) */
.menu-label.open { background: var(--sel-bg); color: var(--accent); }

.menu-drop {
  position: fixed;
  z-index: 1000;
  min-width: 190px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  box-shadow: var(--shadow-overlay);
  padding: 4px;
  user-select: none;
  /* 長いメニュー(プロット等)が画面下端を超えても全項目に届くよう縦スクロール */
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-item {
  display: flex;
  align-items: center;
  padding: 5px 10px 5px 4px;
  border-radius: 4px;
  cursor: var(--cur-pointer, pointer);
  white-space: nowrap;
}
.menu-item:hover { background: var(--accent); color: var(--accent-text); }
.menu-item .check { width: 18px; text-align: center; font-size: 11px; flex: none; }
.menu-item .shortcut { margin-left: auto; padding-left: 26px; font-size: 11px; opacity: 0.6; }
.menu-sep { height: 1px; background: var(--panel-border); margin: 4px 6px; }

/* ============ ツールバー ============ */
#toolbar {
  position: relative;            /* 収納トグル(右端)の absolute 基準 */
  display: flex;
  align-items: center;
  justify-content: safe center;  /* 中身を中央寄せ。収まらない時は左寄せにしてサイドバーへの被りを防ぐ */
  gap: 2px;
  height: 34px;                  /* 高さを明示してトランジション可能に (展開時) */
  padding: 4px 44px 4px 10px;    /* 右端トグル(縦線+ボタン)のぶん右に余白 */
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  user-select: none;
  /* 横はみ出しはクリップしてページ全体の横スクロールを防ぐ。縦は visible のまま
     (clip+visible は Chromium で縦に伝播しない) なので下方向のフライアウトは切れない。 */
  overflow-x: clip;
  overflow-y: visible;
  transition: height 0.22s ease;  /* 収納/展開アニメ: バー高さ */
}
/* 収納時は細いバー。中身は display:none ではなく opacity+translate で「滑らかに」消す
   (display はトランジション不可。overflow:hidden は縦のフライアウトも切るので使わない=上の clip+visible を使う)。 */
#toolbar.collapsed { height: 24px; }
#toolbar > :not(.tb-toggle) { transition: opacity 0.16s ease, transform 0.2s ease; }
#toolbar.collapsed > :not(.tb-toggle) { opacity: 0; transform: translateY(-5px); pointer-events: none; }
/* 折り畳みトグル: ツールバー右端に縦線(border-left)を挟んで小さく配置。シェブロンは回転で向き反転。 */
.tb-toggle {
  position: absolute; right: 7px; top: 4px; bottom: 4px;
  display: grid; place-items: center; padding: 0 3px 0 9px;
  background: transparent; color: var(--muted);
  border: none; border-left: 1px solid var(--panel-border);
  cursor: var(--cur-pointer, pointer);
}
.tb-toggle:hover { color: var(--accent); }
.tb-toggle svg { width: 11px; height: 11px; display: block; transition: transform 0.22s ease; }
#toolbar:not(.collapsed) .tb-toggle svg { transform: rotate(180deg); }  /* 展開時は ▲ (収納へ) */
@media (prefers-reduced-motion: reduce) {
  #toolbar, #toolbar > :not(.tb-toggle), .tb-toggle svg { transition: none; }
}
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  cursor: var(--cur-pointer, pointer);
}
.tb-btn:hover { background: var(--surface-hover); border-color: var(--panel-border); }
.tb-sep { width: 1px; height: 18px; background: var(--panel-border); margin: 0 6px; }

/* プロット種類のフライアウト */
.tb-flyout { position: relative; }
.tb-flyout-main { width: auto; padding: 0 5px; gap: 3px; }
.tb-caret { opacity: 0.6; }
.tb-flyout-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 500;
  min-width: 190px;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  box-shadow: var(--shadow-overlay);
  padding: 4px;
}
.tb-flyout:hover .tb-flyout-menu { display: block; }
.tb-flyout-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: var(--cur-pointer, pointer);
  text-align: left;
}
.tb-flyout-menu button:hover { background: var(--accent); color: var(--accent-text); }
.tb-flyout-menu svg { flex: none; }

/* ============ ボタン ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 5px;
  border: 1px solid var(--panel-border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  cursor: var(--cur-pointer, pointer);
  white-space: nowrap;
  user-select: none;
}
.btn:hover:not(:disabled) { background: var(--surface-hover); }
.btn:disabled { opacity: 0.45; cursor: var(--cur-arrow, default); }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-text); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-hover); }
.btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); }   /* U.2: 破壊操作(意味色) */
.btn.danger:hover:not(:disabled) { background: rgba(197, 34, 31, 0.10); }
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }                     /* U.2: フォーカス1系統 */
.btn.icon-only { padding: 5px 7px; }
.btn.mini { padding: 1px 8px; font-size: 11.5px; }

/* ============ レイアウト ============ */
#layout {
  position: relative;   /* #sidebar-split (absolute) の基準 */
  flex: 1;
  display: grid;
  /* 列幅は実効変数(--*-w-eff)を使う。clampDocks() が狭幅時に比例縮小して設定し、
     未設定時(JS前)はユーザー設定幅(--sidebar-w/--fit-w)→既定値にフォールバック。
     中央は minmax(0,1fr) で 0 まで縮められるようにし、固定列が画面外へ押し出すのを防ぐ。 */
  grid-template-columns: var(--sidebar-w-eff, var(--sidebar-w, 244px)) minmax(0, 1fr) 0px;   /* 左サイドバー | 作業スペース | 右ドック(既定0) */
  min-height: 0;
}
/* フィットパネルを開くと右ドック列が開く (モーダルではなく右ドック表示) */
#layout.fit-open { grid-template-columns: var(--sidebar-w-eff, var(--sidebar-w, 244px)) minmax(0, 1fr) var(--fit-w-eff, var(--fit-w, 340px)); }

/* サイドバー幅の調整ハンドル: サイドバー/作業スペースの境界に重ねて配置。
   left を --sidebar-w に合わせるので幅変更に追従する。当たり判定 6px・見た目は中央 2px。 */
#sidebar-split {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--sidebar-w-eff, var(--sidebar-w, 244px));
  width: 6px;
  transform: translateX(-3px);   /* 境界線(border-right)の中心に重ねる */
  cursor: col-resize;
  z-index: 6;
  background: transparent;
}
#sidebar-split:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }
#sidebar-split:focus-visible { outline: none; background: var(--accent); }
/* ドラッグ中は全体で col-resize カーソルを維持し、テキスト選択を抑止する */
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing * { cursor: col-resize !important; }

/* 右ドック (フィットパネル) の幅調整ハンドル。ドック左端=右から --fit-w の位置に重ねる */
#fit-split {
  position: absolute; top: 0; bottom: 0;
  right: var(--fit-w-eff, var(--fit-w, 340px)); width: 6px; transform: translateX(3px);
  cursor: col-resize; z-index: 6; background: transparent;
}
#fit-split[hidden] { display: none; }
#fit-split:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }
#fit-split:focus-visible { outline: none; background: var(--accent); }

/* 右ドック本体 (フィッティング操作パネル — モーダルの置き換え) */
#fit-dock {
  grid-column: 3; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--panel-border);
}
#fit-dock[hidden] { display: none; }
/* ドック配置切替 (§2: 右/左/フロート) */
.fit-dock-modes { display: inline-flex; gap: 1px; }
.fit-dock-mode { border: none; background: transparent; color: var(--muted); cursor: var(--cur-pointer, pointer); font-size: 13px; line-height: 1; padding: 1px 5px; border-radius: 4px; }
.fit-dock-mode:hover { color: var(--text); background: var(--surface-hover); }
.fit-dock-mode.active { color: var(--accent); }
/* 左ドック */
#layout.fit-left.fit-open { grid-template-columns: var(--fit-w-eff, var(--fit-w, 340px)) var(--sidebar-w-eff, var(--sidebar-w, 244px)) minmax(0, 1fr); }
#layout.fit-left #fit-dock { grid-column: 1; border-left: none; border-right: 1px solid var(--panel-border); }
#layout.fit-left #sidebar { grid-column: 2; }
#layout.fit-left #workspace-wrap { grid-column: 3; }
#layout.fit-left #fit-split { right: auto; left: var(--fit-w-eff, var(--fit-w, 340px)); transform: translateX(-3px); }
#layout.fit-left #sidebar-split { left: calc(var(--fit-w-eff, var(--fit-w, 340px)) + var(--sidebar-w-eff, var(--sidebar-w, 244px))); }
/* フローティング (独立ツールウィンドウ §2.3): position:fixed・ヘッダドラッグ・コーナーリサイズ */
#layout.fit-float.fit-open { grid-template-columns: var(--sidebar-w-eff, var(--sidebar-w, 244px)) minmax(0, 1fr) 0; }
#layout.fit-float #fit-split { display: none; }
#fit-dock.fit-floating {
  position: fixed; top: 84px; right: 28px; grid-column: auto;
  width: var(--fit-w-eff, var(--fit-w, 360px)); max-width: calc(100vw - 40px); height: 72vh; z-index: 50;
  border: 1px solid var(--panel-border); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32); resize: both;
}
#fit-dock.fit-floating .fit-dock-head { cursor: move; }
.fit-dock-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--panel-border);
}
.fit-dock-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-dock-close { flex: none; border: none; background: transparent; color: var(--muted);
  cursor: var(--cur-pointer, pointer); font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.fit-dock-close:hover { color: var(--text); background: var(--surface-hover); }
/* ===== フィッティングパネル (再設計: 固定ヘッダ / レール+縦セクション / 固定フッタ) ===== */
/* 全体は #fit-dock の flex column。subhead/main/foot を auto/1fr/auto に。 */
.fit-subhead { flex: none; padding: 6px 12px; border-bottom: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 3px; }
.fit-sub-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fit-target-line { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text); cursor: var(--cur-pointer, pointer); font-size: 12px; padding: 2px 4px; border-radius: 5px; text-align: left; }
.fit-target-line:hover { background: var(--surface-hover); }
.fit-target-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-lock { flex: none; font-size: 11px; filter: grayscale(1); opacity: 0.7; }
.fit-lock.on { filter: none; opacity: 1; }
.fit-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.fit-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-name-pencil { flex: none; border: none; background: transparent; color: var(--muted); cursor: var(--cur-pointer, pointer); font-size: 11px; padding: 0 3px; opacity: 0; }
.fit-name:hover .fit-name-pencil { opacity: 1; }
.fit-name-input { flex: 1; min-width: 0; font-size: 12.5px; }
.fit-status { flex: none; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.fit-status-run { color: var(--accent); }

/* 本体: 左レール + スクロール領域 */
.fit-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); overflow: hidden; }
.fit-rail { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-right: 1px solid var(--panel-border); overflow: hidden; }
.fit-rail-btn { position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted); cursor: var(--cur-pointer, pointer); border-radius: 6px; border-left: 2px solid transparent; }
.fit-rail-btn:hover { color: var(--text); background: var(--surface-hover); }
.fit-rail-btn.active { color: var(--accent); background: var(--surface-active); border-left-color: var(--accent); }
.fit-rail-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fit-rail-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fit-rail-badge { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--panel); }
.fit-rail-badge.warn { background: var(--warn, #d8a33a); }
.fit-rail-badge.err { background: var(--danger, #d04545); }
.fit-rail-badge.unsaved { background: var(--accent); }
.fit-rail-badge.notif { background: var(--accent); animation: fit-pulse 1.6s ease-in-out infinite; }
.fit-rail-div { width: 18px; height: 1px; margin: 3px 0; background: var(--panel-border); flex: none; }
@keyframes fit-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.fit-scroll { overflow-y: auto; overflow-x: hidden; padding: 0 12px 16px; font-size: 12px; }
/* 段見出し (Setup / Configure / Evaluate) — in-flow (sticky にすると section 見出しと重なるため) */
.fit-stage-head { padding: 10px 0 2px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.fit-stage-head span { display: inline-block; }
.fit-stage-head::after { content: ""; display: block; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent); margin-top: 3px; }
.fit-sec { padding: 4px 0; }
.fit-sec + .fit-sec { border-top: 1px solid var(--panel-border); }
/* 見出しは <button> (キーボード折りたたみ・全幅ヒット) — ボタン既定をリセット */
.fit-sec-head { position: sticky; top: 0; z-index: 2; display: flex; width: 100%; align-items: baseline; gap: 6px; padding: 10px 0 6px; background: var(--panel); border: none; text-align: left; font: inherit; color: var(--text); cursor: var(--cur-pointer, pointer); }
.fit-sec-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.fit-sec-caret { flex: none; color: var(--muted); font-size: 10px; padding: 0; transition: transform 0.15s; }
.fit-sec.collapsed .fit-sec-caret { transform: rotate(-90deg); }
.fit-sec-title { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
.fit-sec-sum { flex: 1; min-width: 0; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-sec-body { padding: 2px 0 6px; }
.fit-sec.collapsed .fit-sec-body { display: none; }
@media (prefers-reduced-motion: reduce) { .fit-sec-caret { transition: none; } .fit-rail-badge.notif { animation: none; } }

/* key-value 行 (各セクション共通: 弱枠・余白で階層) */
.fit-kv { display: flex; flex-direction: column; gap: 6px; }
.fit-kv-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fit-kv-row.top { align-items: flex-start; }
.fit-kv-k { flex: none; width: 116px; color: var(--muted); }
.fit-kv-row > select, .fit-kv-row > input, .fit-kv-v { flex: 1; min-width: 0; }
.fit-kv-v.mono, .mono { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; }
.fit-hint { color: var(--muted); font-size: 11px; margin: 6px 0 0; }
.fit-sub { margin: 0; }

/* Model: ピーク成分 */
.fit-modeseg { margin-bottom: 8px; }
.fit-comps { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.fit-comp { display: flex; align-items: center; gap: 5px; padding: 2px 0; }
.fit-comp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-comp-type { flex: none; max-width: 104px; }
.fit-ic { flex: none; border: none; background: transparent; color: var(--muted); cursor: var(--cur-pointer, pointer); font-size: 12px; padding: 1px 4px; border-radius: 4px; }
.fit-ic:hover { color: var(--text); background: var(--surface-hover); }
.fit-ic:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; color: var(--text); }
.fit-comp-ops { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.fit-comp-ops .armed { background: var(--accent); color: var(--accent-text, #fff); }

/* Parameters 表 (tabular-nums・成分グループ・落ち着いた数値フィールド) */
.fit-ptab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; table-layout: fixed; }
.fit-ptab th { font-size: 10px; font-weight: 600; color: var(--muted); text-align: left; padding: 0 6px 5px 0; position: sticky; top: 33px; background: var(--panel); z-index: 3; }
.fit-ptab td { padding: 3px 6px 3px 0; vertical-align: middle; }
.fit-ptab td:last-child, .fit-ptab th:last-child { padding-right: 0; }
.fit-ptab th.r, .fit-ptab td.r { text-align: right; }
.fit-ptab th.c, .fit-ptab td.c { text-align: center; width: 24px; padding-right: 4px; }
/* 列幅 (table-layout:fixed): コンパクトは 値/境界を確保し名前は残り */
.fit-ptab.compact th:nth-child(3), .fit-ptab.compact td:nth-child(3) { width: 36%; }
.fit-ptab.compact th:nth-child(4), .fit-ptab.compact td:nth-child(4) { width: 26%; }
.fit-ptab.full th:nth-child(2), .fit-ptab.full td:nth-child(2) { width: 13%; }
/* 数値フィールド: 既定で控えめなフィル(=編集可能と分かる)・focus で明確 */
.fit-ptab .num-field { width: 100%; min-width: 0; padding: 3px 6px; text-align: right; color: var(--text); background: var(--panel-2); border: 1px solid transparent; border-radius: 4px; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.fit-ptab .num-field:hover { background: var(--surface-hover); }
.fit-ptab .num-field:focus { border-color: var(--accent); background: var(--panel); outline: none; }
.fit-ptab .num-field:disabled { background: transparent; color: var(--muted); }
.fit-ptab .fit-pname { cursor: var(--cur-pointer, pointer); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.fit-ptab .fit-pname:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
.fit-pbadge { margin-left: 4px; font-size: 9px; opacity: 0.85; }
.fit-ptab tr.sel > td { background: var(--surface-active); }
.fit-ptab tr.fit-pfixed .fit-pname, .fit-ptab tr.fit-pfixed .num-field { color: var(--muted); }
/* 成分グループ見出し (Background / Peak n) */
.fit-pgroup > td { padding: 9px 0 4px; border-bottom: 1px solid var(--panel-border); font-size: 11px; }
.fit-pgroup:first-child > td { padding-top: 2px; }
.fit-pgroup b { font-weight: 600; }
.fit-pdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
/* 値セル: 値 + 控えめな ±誤差 */
.fit-pvalcell { white-space: nowrap; }
.fit-perr { display: block; font-size: 9.5px; color: var(--muted); text-align: right; margin-top: 1px; }
/* 境界チップ */
.fit-bcell { cursor: var(--cur-pointer, pointer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-bcell:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; border-radius: 3px; }
.fit-bcell.disabled { cursor: default; opacity: 0.7; }
.fit-bchip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.fit-bchip.none { color: var(--muted); padding: 1px 2px; }
.fit-bcell:hover .fit-bchip.none { color: var(--text); }
.fit-bchip.set { background: var(--panel-2); color: var(--text); }
.fit-bchip.linked { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.fit-plink { width: 100%; min-width: 0; padding: 2px 5px; font-size: 11px; color: var(--text); background: var(--panel-2); border: 1px solid transparent; border-radius: 4px; }
.fit-plink:focus { border-color: var(--accent); background: var(--panel); outline: none; }
.fit-plink.invalid { border-color: var(--danger, #d04545); }
.fit-plinked .num-field[data-f="value"] { opacity: 0.7; }
.fit-pdetail > td { padding: 2px 0 6px; }
.fit-pdet { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); padding: 6px 8px; background: var(--panel-2); border-radius: 5px; }
.fit-pdet b { color: var(--text); }
.fit-prow-ops { display: flex; gap: 6px; margin-top: 8px; }
.fit-warn { color: var(--warn, #d8a33a); cursor: help; }

/* Data & weighting */
.fit-ex-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0; }
.fit-ex-add { display: flex; gap: 4px; margin-top: 4px; }
.fit-ex-add input { width: 60px; min-width: 0; }

/* Fit settings */
.fit-adv { margin-top: 8px; }
.fit-adv summary { cursor: var(--cur-pointer, pointer); color: var(--muted); font-size: 11.5px; padding: 4px 0; }
.fit-adv .fit-kv { margin-top: 6px; }

/* Result & diagnostics */
.fit-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; }
.fit-metric { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; background: var(--panel-2); border-radius: 5px; }
.fit-metric-k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fit-metric-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fit-res-warn { color: var(--warn, #d8a33a); font-size: 11.5px; margin: 8px 0 0; }
.fit-fulldiag { margin-top: 8px; }
.fit-fulldiag summary { cursor: var(--cur-pointer, pointer); color: var(--accent); font-size: 11.5px; padding: 4px 0; }
.fit-stats-table { width: 100%; font-variant-numeric: tabular-nums; }
.fit-stats-table td { padding: 2px 8px 2px 0; }
.fit-stats-table td.r { text-align: right; }

/* 固定フッタ */
.fit-dock-foot { flex: none; padding: 10px 12px; border-top: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 8px; }
.fit-progress { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fit-progress b { color: var(--text); }
/* 狭幅では Run スプリットが行ごと次行へ折り返せるようにする (固定 307px を要求せず、文字も省略しない)。
   flex-basis:auto + 既定の min-width:auto で、1行に収まらない時だけ折り返り、その行で全幅になる。 */
.fit-run-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fit-run-row .btn.primary, .fit-run-row .btn.danger { flex: 1; }
.fit-run-split { flex: 1 1 auto; display: flex; }
.fit-run-split .btn.primary:first-child { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fit-run-caret { flex: none; padding: 4px 7px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* キャレットの区切り線 (specificity で .btn.primary の border-color に勝つ) */
.fit-run-split .fit-run-caret { border-left: 1px solid rgba(255, 255, 255, 0.32); }
.fit-save-row { display: flex; }
.fit-save-split { flex: 1; display: flex; }
.fit-save-split .btn:first-child { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fit-save-caret { flex: none; padding: 4px 7px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.fit-save-split .fit-save-caret { border-left: 1px solid var(--panel-border); }
.fit-save-split.emph .fit-save-caret { border-left-color: rgba(255, 255, 255, 0.32); }
.fit-save-split.emph .btn { background: var(--accent); color: var(--accent-text, #fff); border-color: var(--accent); }
.fit-prog-run { color: var(--accent); font-weight: 600; }

/* Popover / menu (Target詳細・Bounds・Actions・Run/Save メニュー) */
.fit-pop { position: fixed; z-index: 80; min-width: 180px; max-width: 280px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,0.28); padding: 8px; font-size: 12px; }
.fit-pop-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px; }
.fit-pop-tab { width: 100%; }
.fit-pop-tab td { padding: 2px 8px 2px 0; }
.fit-pop-tab td:first-child { color: var(--muted); }
.fit-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0; }
.fit-pop-row input { width: 110px; }
.fit-pop-btns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.fit-menu { display: flex; flex-direction: column; gap: 1px; }
.fit-menu-item { text-align: left; border: none; background: transparent; color: var(--text); cursor: var(--cur-pointer, pointer); font-size: 12px; padding: 5px 8px; border-radius: 4px; }
.fit-menu-item:hover:not(:disabled) { background: var(--surface-hover); }
.fit-menu-item:disabled { color: var(--muted); cursor: default; }

/* ===== 3段フロー: 追加セクション ===== */
/* Components: Baseline / Peaks のグループ */
.fit-comp-group { margin-bottom: 8px; }
.fit-comp-grouphd { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 4px 0 3px; }
.fit-comp .fit-pdot { flex: none; }
/* Preprocessing */
.fit-pp-list { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.fit-pp-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.fit-pp-en { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-pp-row.on .fit-pp-en { color: var(--text); }
.fit-pp-row:not(.on) .fit-pp-en { color: var(--muted); }
.fit-pp-param { flex: none; width: 52px; padding: 2px 5px; background: var(--panel-2); border: 1px solid transparent; border-radius: 4px; color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.fit-pp-param:focus-visible { border-color: var(--accent); outline: none; }
.fit-pp-cb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Initialization */
.fit-initfrom { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.fit-radio { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.fit-preset-add { display: flex; gap: 4px; margin-bottom: 4px; }
.fit-preset-add input { flex: 1; min-width: 0; }
/* Constraints */
.fit-constr { display: flex; flex-direction: column; gap: 3px; }
.fit-constr-row { display: flex; align-items: center; gap: 8px; }
.fit-constr-name { flex: none; width: 116px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-constr-link { flex: 1; min-width: 0; }
/* Validation checklist: 文字は --text(可読), 状態はアイコン形状+色で示す (色だけに頼らない) */
.fit-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fit-checklist li { display: flex; align-items: baseline; gap: 7px; font-size: 12px; color: var(--text); }
.fit-check-i { flex: none; font-weight: 700; width: 12px; text-align: center; }
.fit-check-t { min-width: 0; }
.fit-check-ok .fit-check-i { color: var(--good, #3a9d54); }
.fit-check-warn .fit-check-i { color: var(--warn, #d8a33a); }
.fit-check-warn .fit-check-t { font-weight: 600; }
.fit-check-err .fit-check-i { color: var(--bad, #d04545); }
.fit-check-err .fit-check-t { font-weight: 600; }
.fit-check-muted { color: var(--muted); }
/* Uncertainty / Output */
.fit-unc { margin-top: 10px; }
.fit-out-items { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin: 6px 0; }
@media (max-width: 360px) { .fit-out-items { grid-template-columns: 1fr; } }
.fit-out-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.fit-scope { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fit-scope-cur { font-size: 11.5px; }

/* ===== Fit結果タブ (再編集可能ビュー §12-16) ===== */
.fit-res { padding: 10px 14px; font-size: 13px; }
.fit-res-row1 { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fit-res-name { font-weight: 700; }
.fit-status { font-size: 12px; font-weight: 600; }
.fit-status-ok { color: var(--ok, #3a9d54); }
.fit-status-warn { color: var(--warn, #d8a33a); }
.fit-status-err { color: var(--danger, #d04545); }
.fit-status-muted { color: var(--muted); }
.fit-res-srcwarn { color: var(--warn, #d8a33a); font-size: 12px; margin: 5px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fit-res-meta, .fit-res-stats1 { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin: 3px 0; }
.fit-res-stats1 b { color: var(--text); }
.fit-res-revsel select { margin-left: 4px; }
.fit-res-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.btn.xs { padding: 2px 8px; font-size: 11.5px; }
.fit-subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--panel-border); margin: 8px 0; }
.fit-subtab { border: none; background: transparent; color: var(--muted); padding: 5px 12px; cursor: var(--cur-pointer, pointer); font-size: 12px; border-bottom: 2px solid transparent; }
.fit-subtab:hover { color: var(--text); }
.fit-subtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.fit-res-body { overflow: auto; }
.fit-param-table td, .fit-stats-table td { padding: 3px 10px 3px 0; }
/* 計算データの仮想スクロール (§32) */
.fit-calc-scroll { max-height: 360px; overflow-y: auto; border: 1px solid var(--panel-border); border-radius: 4px; }
.fit-calc-tab { width: 100%; }
.fit-calc-tab thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; padding: 4px 10px 4px 0; }
.fit-calc-tab td { padding: 0 10px 0 0; }
.fit-warn { color: var(--warn, #d8a33a); cursor: help; }
.fit-warnings { margin-top: 10px; font-size: 12px; }
.fit-warnings ul { margin: 4px 0 0; padding-left: 18px; }
.fit-setup h4 { margin: 6px 0 4px; font-size: 12px; }
.fit-setup-comps { margin: 0 0 8px; padding-left: 18px; font-size: 12px; }
.fit-setup-kv { display: flex; gap: 10px; font-size: 12px; margin: 2px 0; }
.fit-setup-kv .k { color: var(--muted); min-width: 150px; }
.fit-corr { margin-top: 8px; font-size: 12px; }
.fit-corr ul { margin: 4px 0 0; padding-left: 18px; }
.fit-corr-d { margin-top: 6px; font-size: 12px; }
.fit-corr-d summary { cursor: var(--cur-pointer, pointer); color: var(--muted); }
.fit-corr-tab { margin-top: 4px; font-variant-numeric: tabular-nums; }
.fit-corr-tab th, .fit-corr-tab td { padding: 2px 8px 2px 0; }
.fit-corr-hi { color: var(--danger, #d04545); font-weight: 700; }
.fit-revhist tr.cur { background: var(--surface-active); }
.fit-rev-label { min-width: 120px; outline: none; }
.fit-rev-label:focus { background: var(--panel-2); }

/* 左サイドバー: 上=エクスプローラ / 下=プロパティパネル を縦に積む単一カラム */
#sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--panel-border);
}

#explorer {
  flex: 1 1 auto;
  min-height: 48px;          /* パネルを高くしてもツリーは最低限残す */
  padding: 10px;
  overflow-y: auto;
  user-select: none;
}
/* ツリーはキーボード操作のため tabindex=0 だが、UA 既定のフォーカス枠(全体を囲む箱)は出さない。
   フォーカス中の項目は選択ハイライト(.is-sel)で示す (§4.1) */
#explorer-tree { outline: none; }
/* Explorer ヘッダ: タイトル + 右側に作成ボタン (#4) */
.exp-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
#explorer h2 {
  flex: 1; min-width: 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-actions { display: flex; gap: 1px; flex: none; }
.exp-act-btn {
  display: grid; place-items: center; width: 24px; height: 24px;
  border: none; background: transparent; color: var(--muted); border-radius: 5px;
  cursor: var(--cur-pointer, pointer);
}
.exp-act-btn:hover { background: var(--surface-hover); color: var(--accent); }
.exp-act-btn svg { display: block; }
.exp-folder {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  padding: 3px 4px;
}
.exp-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 20px;
  border-radius: 4px;
  cursor: var(--cur-pointer, pointer);
}
.exp-item:hover { background: var(--surface-hover); }
/* 選択は淡背景 + 左 inset アクセントライン + 通常文字色 (青ベタ廃止・レイアウトシフト無し) */
/* §4.1: Explorer の選択は淡い背景のみ (左の青線/ツリー接続線は使わない)。Project/Folder/Book/Graph 共通 */
.exp-item.is-sel, .exp-folder.sub.is-sel, .exp-project.is-sel { background: var(--surface-active); color: var(--text); }
/* 選択中はホバーしていても選択色を維持する (:hover の中立グレーに上書きされないように) */
.exp-item.is-sel:hover, .exp-folder.sub.is-sel:hover, .exp-project.is-sel:hover { background: var(--surface-active); }
/* §3: 選択は色だけでなく文字ウェイトでも補助 (選択中の項目名を太字にする) */
.exp-item.is-sel .exp-name, .exp-folder.sub.is-sel .exp-name, .exp-project.is-sel .exp-name { font-weight: 700; }
.exp-item.is-activedoc .exp-name { font-weight: 600; }   /* 前面の子ウィンドウ(activeDocument)を太字で示す §5.3 */
.exp-item.is-sel .exp-eye { color: var(--muted); }
.exp-item svg, .exp-folder svg { flex: none; }

#workspace-wrap {
  position: relative;   /* P.1 overlay(#pp-overlay)/タブ(#pp-tab)の absolute 基準。無いと top:0 がビューポート基準になりツールバーを覆う */
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
#workspace {
  position: relative;
  flex: 1;
  overflow: auto;   /* 作業スペース外にウィンドウがはみ出したらスクロールバーで辿れるようにする */
  background: var(--bg-deep);
}

/* ============ MDIウィンドウ (Modern MDI・改善案 §7/§9) ============ */
.mdi-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);                 /* 8px */
  box-shadow: 0 8px 24px rgb(25 35 50 / 12%);      /* わずかな浮遊感 */
  overflow: hidden;
  min-width: 260px;
  min-height: 160px;
}
/* 非アクティブ窓は影を弱く (内容は読めるまま・暗くしない) */
.mdi-window:not(.active):not(.maximized) {
  box-shadow: 0 4px 12px rgb(25 35 50 / 8%);
}
.mdi-window.maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
}

.mdi-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px;
  min-height: 32px;
  background: var(--titlebar);
  color: var(--text);
  font-size: 13px;
  cursor: var(--cur-arrow, default);
  user-select: none;
  flex: none;
}
/* アクティブ窓は「上端 2px アクセントライン + 強めの影 + 強境界線」で示す(全面青枠はやめる) */
.mdi-window.active {
  border-color: var(--border-strong);
  box-shadow: inset 0 2px 0 var(--accent), 0 10px 30px rgb(25 35 50 / 16%);
}
.mdi-window.active .mdi-titlebar {
  background: var(--titlebar-active);
  color: var(--text);
  font-weight: 600;
}
.mdi-title { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdi-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; }
.mdi-btn {
  border: none;
  background: transparent;
  color: inherit;
  width: 28px;
  height: 26px;
  border-radius: 5px;
  cursor: var(--cur-pointer, pointer);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;   /* リサイズ角ハンドルより前面に出して □ × を常にクリック可能に */
  z-index: 9;
}
.mdi-btn:hover { background: rgba(127, 127, 127, 0.18); }
.mdi-close:hover { background: var(--bad); color: #fff; }

.mdi-content {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.kind-book .mdi-content { overflow: hidden; background: var(--panel-2); }

/* ブックのコンテンツ = ページタブ + ワークシート */
.book-content { display: flex; flex-direction: column; position: relative; }
.ws-host { flex: 1; min-height: 0; overflow: auto; }

.page-tabs {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap; /* 結果チップが多いときは折り返す */
  gap: 2px;
  padding: 4px 6px 0;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  flex: none;
  user-select: none;
}
.page-tab {
  padding: 3px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor: var(--cur-pointer, pointer);
}
.page-tab:hover { background: var(--surface-hover); }
.page-tab.active {
  background: var(--panel-2);
  color: var(--accent);
  margin-bottom: -1px;
  padding-bottom: 4px;
}
.page-tab.page-add { padding: 3px 9px; font-weight: 700; }
.page-rename {
  width: 80px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  font: inherit;
  padding: 0 4px;
  outline: none;
}

/* ウィンドウ下部のリンクバー (ブック ⇔ グラフ) */
.mdi-links {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 8px;
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  user-select: none;
}
.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 99px;
  cursor: var(--cur-pointer, pointer);
}
.link-chip:hover { background: var(--surface-hover); border-color: var(--accent); }
.link-chip.off { opacity: 0.5; }
.link-chip svg { flex: none; }
.chip-eye {
  display: inline-flex;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 1px;
  border-radius: 3px;
}
.chip-eye:hover { color: var(--accent); background: var(--bg); }

/* グラフ側: データセット表示トグルチップ */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 99px;
  cursor: var(--cur-pointer, pointer);
}
.ds-chip { position: relative; }
.ds-chip:hover { border-color: var(--accent); }
.ds-chip.off { opacity: 0.6; }
.ds-chip.off .ds-label { text-decoration: line-through; }
.ds-chip.dragging { opacity: 0.45; }
/* 並べ替えの挿入位置を縦線で表示 */
.ds-chip.drop-before::before,
.ds-chip.drop-after::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.ds-chip.drop-before::before { left: -5px; }
.ds-chip.drop-after::after { right: -5px; }
.ds-label { display: inline-flex; align-items: center; gap: 4px; }
.ds-label svg { flex: none; }

/* データセット表示トグル: 省スペースの色ドット (ON=塗り / OFF=輪郭のみ) */
.ds-dot2 {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  border: 2px solid var(--c, var(--accent));
  flex: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.ds-dot2.off { background: transparent; }
.ds-dot2:hover {
  transform: scale(1.3);
  box-shadow: 0 0 0 2px var(--sel-bg);   /* U.4: 強グローを弱化(テーマ追従) */
}

/* チップ詳細の展開トグル */
.links-expand {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  flex: none;
}
.links-expand:hover { background: var(--surface-hover); color: var(--accent); }

/* 複数パネル並列モード */
.panels-content { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-deep); }
.panel-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow);
}
.panel-canvas { box-shadow: none; display: block; }

/* プロジェクト (ワークスペース分離) */
.mdi-window.proj-hidden { display: none !important; }
.exp-project {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px;
  margin-top: 4px;
  font-weight: 700;
  border-radius: 4px;
  color: var(--muted);
  cursor: var(--cur-pointer, pointer);
  border-bottom: 1px solid var(--panel-border);
}
.exp-project:hover { background: var(--surface-hover); }
.exp-project.active { color: var(--accent); }

/* Explorer のフォルダ (サブディレクトリ) */
.exp-folder.sub {
  border-radius: 4px;
  cursor: var(--cur-pointer, pointer);
}
.exp-folder.sub:hover { background: var(--surface-hover); }
/* クリックで選択中のフォルダ (アイテムの active と同様の淡色選択) */
.exp-folder.sub.is-sel .exp-eye { color: var(--muted); }
.exp-folder.sub.is-sel .exp-tw { color: var(--muted); }
.exp-folder.drop-folder, .exp-folder.exp-root.drop-folder {
  background: var(--accent);
  color: var(--accent-text);
}
.exp-dragging, .exp-dragging * { cursor: var(--cur-grab, grabbing) !important; }
.exp-item .exp-name, .exp-folder .exp-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Explorer の目玉 (ブック/グラフ表示切替、チップと同期) */
.exp-eye {
  display: inline-flex;
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 1px 3px;
  border-radius: 3px;
}
.exp-eye:hover { color: var(--accent); }
.exp-eye.off { opacity: 0.4; }
.exp-item.active .exp-eye { color: var(--muted); }

/* 展開された階層の左側に表示する縦のガイド線 */
.exp-children {
  position: relative;
}
/* §4.1: ツリー階層の接続線(縦線/L字/括弧)は表示しない。階層はインデントのみで表現する */

/* プロジェクト/フォルダ/ブックの開閉トグル (▾/▸) */
.exp-tw {
  flex: none;
  width: 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  cursor: var(--cur-pointer, pointer);
  user-select: none;
}
.exp-tw:hover { color: var(--accent); }
.exp-tw.ph { visibility: hidden; cursor: default; }

/* 選択中の Book を含むフォルダ名は太字 */
.exp-folder.sub { font-weight: 400; }   /* 既定は通常ウェイト。選択/アクティブ時の太字(700)を際立たせる */
.exp-folder.sub.contains-active { font-weight: 700; }

/* Book 内のページ行と解析結果行 */
.exp-page {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  font-size: 12px;
  color: var(--muted);
  border-radius: 4px;
  cursor: var(--cur-pointer, pointer);
}
.exp-page:hover { background: var(--surface-hover); }
.exp-page.current { color: var(--accent); font-weight: 600; }   /* 現在ページは控えめに(文字のみ・常時の塗りつぶしハイライトにしない) */
.exp-result {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 4px;
  font-size: 11.5px;
  color: #7a5b13;
  border-radius: 4px;
  cursor: var(--cur-pointer, pointer);
}
.exp-result:hover { background: #fdf4d7; }
/* ダークでは黄系ハードコードが読めないので上書き (--warn 系) */
[data-theme="dark"] .exp-result { color: var(--warn); }
[data-theme="dark"] .exp-result:hover { background: rgb(214 161 59 / 0.16); }
.exp-result.sel { color: var(--accent); font-weight: 600; }
.exp-result .rt-icon { font-size: 11px; }
.exp-page .exp-name, .exp-result .exp-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 列ヘッダ上部の移動グリップ: 常時確保された専用スペース
   (.ws-table th の padding ショートハンドより詳細度を上げる) */
.ws-table .ws-colhead th {
  position: sticky;   /* 縦スクロールで固定。sticky 自体が col-grip(absolute) の配置基準にもなる */
  top: 0;
  z-index: 3;
  padding-top: 13px; /* グリップ分の高さを確保 */
  height: 34px;
  cursor: var(--cur-pointer, pointer); /* 選択スペースは人差し指 */
}
.ws-table .ws-colhead th.ws-corner { padding-top: 2px; left: 0; z-index: 6; }   /* 左上交差 = 最前面 (§3) */
.col-grip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 11px;
  background: var(--bg);
  border-bottom: 1px solid var(--panel-border);
  cursor: var(--cur-hand, grab); /* 移動スペースはパンの手 */
}
/* グリップ中央のつまみドット */
.col-grip::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 22px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--panel-border);
}
.col-grip:hover { background: var(--surface-hover); }
.col-grip:hover::after { background: var(--accent); }
.ws-colhead th.sel .col-grip { background: var(--sel-bg); }
.ws-colhead th.sel .col-grip::after { background: var(--accent); }

/* グラフウィンドウへのドロップ先ハイライト */
.mdi-window.drop-graph {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* §16.4: ドロップ先のプロット領域を淡くハイライトし「ここにドロップ」を中央表示 */
.mdi-window.drop-graph .mdi-content::after {
  content: "ここにドロップしてプロット";
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft);
  color: var(--accent); font-weight: 600; font-size: 14px;
  pointer-events: none;
}
/* §16.5: カーソル追従のドラッグプレビュー */
.column-drag-preview {
  position: fixed; z-index: 10000; pointer-events: none;
  padding: 3px 10px; border-radius: 6px;
  background: var(--accent); color: var(--accent-text);
  font-size: 12px; font-weight: 600;
  box-shadow: var(--shadow-overlay);
}

/* 8方向リサイズの透明ヒット領域 (角を辺より優先・見た目には出さない)。§13 */
.mdi-rz { position: absolute; z-index: 6; }
.mdi-window.maximized .mdi-rz { display: none; }   /* 最大化中はリサイズ無効 */
.mdi-rz-n { top: 0; left: 0; right: 0; height: 6px; cursor: ns-resize; }
.mdi-rz-s { bottom: 0; left: 0; right: 0; height: 6px; cursor: ns-resize; }
.mdi-rz-e { top: 0; bottom: 0; right: 0; width: 6px; cursor: ew-resize; }
.mdi-rz-w { top: 0; bottom: 0; left: 0; width: 6px; cursor: ew-resize; }
.mdi-rz-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; z-index: 7; }
.mdi-rz-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; z-index: 7; }
.mdi-rz-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; z-index: 7; }
.mdi-rz-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; z-index: 7; }
.mdi-resizing, .mdi-resizing * { transition: none !important; }   /* リサイズ中はトランジション無効 */

/* §16.2: 列→Graph ドラッグ中はアプリ全体で grabbing を維持 (Book 窓外/Graph/Canvas/空白でも) */
html.is-dragging-columns,
html.is-dragging-columns body,
html.is-dragging-columns body * { cursor: grabbing !important; }

/* ============ ワークシート ============ */
.worksheet { outline: none; }
.ws-table {
  /* collapse だと罫線がテーブル側に属し sticky ヘッダに付いてこないため、
     separate にして各セルが右・下罫線を持つ (ヘッダ行の罫線も一緒に固定される) */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.ws-table th, .ws-table td {
  border: 0;
  border-right: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  padding: 2px 8px;
  min-width: 72px;
  height: 21px;
  text-align: right;
  white-space: nowrap;
}
.ws-table tr > :first-child { border-left: 1px solid var(--panel-border); }
.ws-colhead > th { border-top: 1px solid var(--panel-border); }
.ws-table thead th, .ws-table thead td { background: var(--panel); }
/* ヘッダ 4 行 (列名 / ロングネーム / 単位 / F(x)=) はスクロールしても固定 */
.ws-table thead th, .ws-table thead td {
  position: sticky;
  z-index: 2;
  height: 25px;
  background: var(--panel);
}
/* 4 行のヘッダを正しい高さで積む (列ヘッダ=34px, メタ各行=25px)。ずれると行が隙間から覗く */
.ws-colhead th { top: 0; }
.ws-row-long th, .ws-row-long td { top: 34px; }
.ws-row-units th, .ws-row-units td { top: 59px; }
.ws-row-formula th, .ws-row-formula td { top: 84px; }

.ws-colhead th {
  text-align: center;
  font-weight: 600;
  color: var(--text);
  cursor: var(--cur-pointer, pointer);
  z-index: 3;
}
.ws-colhead th.sel { background: var(--sel-bg); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.ws-corner { min-width: 42px !important; left: 0; z-index: 6; }   /* 左上交差 = 最前面 (§3) */
/* §14: 実列・空列とも一定幅を保ち、空列が潰れない / 右端まで均等に並ぶ */
.ws-table .ws-colhead th[data-col], .ws-table .ws-meta td, .ws-table tbody td { min-width: 76px; }
.ws-meta th, .ws-rowhead {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  background: var(--panel);
  min-width: 42px;
  position: sticky;   /* §3: 行ラベル列(ロングネーム/単位/F(x)=)と行番号を左に固定 */
  left: 0;
}
/* z-index は specificity を thead 既定(0,1,2)より上げて確実に勝たせる (フリーズペインの重なり順) */
.ws-table .ws-meta th { z-index: 5; }     /* メタラベル列: データ・行番号より前面 */
.ws-rowhead { z-index: 4; background: var(--panel); }  /* 行番号: 横スクロールで左固定 (不透明) */
/* sticky 行のため、選択/ホバーは必ず不透明色を使う (半透明だと下のセルが透ける) */
.ws-meta td { text-align: left; color: var(--muted); font-size: 12px; cursor: var(--cur-text, text); }
.ws-meta td:hover { background: var(--surface-hover); }
.ws-meta td.sel { background: #d9e6f7; }
.ws-meta td.meta-active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: #d9e6f7;
}
.ws-formula td { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); }

/* 列ドラッグ移動 */
.ws-dragging { cursor: var(--cur-grab, grabbing) !important; }
.ws-dragging * { cursor: var(--cur-grab, grabbing) !important; }
.ws-table th.drop-target {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  box-shadow: inset 3px 0 0 var(--accent-hover);
}

/* プロットで選択中のデータポイント行 */
.ws-table tbody tr.hl td { background: var(--sel-bg); }
.ws-table tbody tr.hl th { color: var(--accent); font-weight: 700; }

/* ============ グラフ内ツールストリップ ============ */
.graph-tools {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  box-shadow: var(--shadow-overlay);
  padding: 3px;
}
.graph-tools button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  cursor: var(--cur-pointer, pointer);
}
.graph-tools button:hover { background: var(--sel-bg); }
.graph-tools button.active { background: var(--sel-bg); color: var(--accent); }
.graph-tools .gt-sep { height: 1px; background: var(--panel-border); margin: 2px 2px; }
.graph-tools .gt-item { position: relative; }
.graph-tools .gt-sub {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 5px;
  flex-direction: row;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  box-shadow: var(--shadow-overlay);
  padding: 3px;
  z-index: 11;
}
/* ボタンとサブメニューの隙間を透明ブリッジで埋めて、ホバーが途切れないようにする */
.graph-tools .gt-sub::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -4px;
  bottom: -4px;
  width: 8px;
}
.graph-tools .gt-item:hover .gt-sub { display: flex; }

/* テキストアノテーションのインライン入力 */
.anno-input {
  position: absolute;
  z-index: 20;
  min-width: 120px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  outline: none;
  box-shadow: var(--shadow-overlay);
}
.ws-table tbody td { background: var(--panel-2); cursor: var(--cur-text, text); }
.ws-table tbody td.sel { background: var(--sel-bg); }
.ws-table tbody td.active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* マスク（解析から除外）されたセル */
.ws-table tbody td.masked {
  color: var(--fit-color);
  background: rgba(217, 48, 37, 0.10);
}

/* 行列(Matrix)シートのグリッド */
.matrix-host { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.matrix-view { display: flex; flex-direction: column; height: 100%; }
.mx-tools { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-bottom: 1px solid var(--panel-border); }
.mx-tools button { font-size: 11px; padding: 1px 7px; }
.mx-tools .mx-dim { color: var(--muted); font-size: 11px; margin-left: auto; }
.mx-scroll { flex: 1; overflow: auto; }
.mx-table { border-collapse: collapse; font-size: 12px; }
.mx-table th, .mx-table td { border: 1px solid var(--panel-border); min-width: 58px; height: 22px; padding: 1px 6px; }
.mx-table th { background: var(--panel-2); color: var(--muted); text-align: center; font-weight: normal; position: sticky; }
.mx-table thead th { top: 0; }
.mx-table td { background: var(--panel); color: var(--text); text-align: right; cursor: cell; }
.ws-edit {
  width: 100%;
  border: none;
  outline: none;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  text-align: right;
  padding: 0;
}
.ws-note { color: var(--muted); text-align: center; font-size: 11.5px; }

/* ============ グラフ ============ */
/* ページ (固定論理サイズのキャンバス) をアスペクト比固定で中央表示 */
.graph-content {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-deep);
}
.graph-canvas {
  display: block;
  cursor: var(--cur-cross, crosshair);
  background: var(--panel-2);
  box-shadow: var(--shadow);
  flex: none;
}
/* 背景が透明のキャンバスは市松模様で可視化 (出力には含まれない) */
.graph-canvas.bg-transparent {
  background:
    repeating-conic-gradient(rgba(127, 127, 127, 0.18) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px,
    var(--panel-2);
}
.graph-readout {
  position: absolute;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  box-shadow: var(--shadow-overlay);
  padding: 3px 8px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  z-index: 5;
}
.graph-readout .pt-name { color: var(--accent); font-weight: 600; }

/* ============ 解析結果タブ (各ページタブに収納・入れ子表示) ============ */

/* 収納状態: ページタブの右に少しずつズレて重なったタブの束。枚数 = 結果の件数 */
.result-stack {
  display: inline-flex;
  align-items: flex-end;
  margin-left: -6px; /* 先頭の1枚はページタブの下に少し潜り込む */
  cursor: var(--cur-pointer, pointer);
  flex: none;
}
.rs-stub {
  width: 24px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 600;
  color: #7a5b13;
  background: #fdf6e0;
  border: 1px solid #e3cf94;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-left: -9px; /* 前の1枚に重なり、アイコンが見える分だけズレる */
}
.rs-stub:first-child { margin-left: 0; }
.result-stack:hover .rs-stub { background: #fbecb9; }
/* ページタブが束の上に重なって見えるように */
.page-tab[data-i] { position: relative; z-index: 1; }
.result-stack { position: relative; z-index: 0; }

/* 結果タブ: ページタブと同列に並ぶが、収納元が分かるよう色味を変える */
.page-tab.result-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  font-weight: 600;
  color: #7a5b13;
  background: #fdf6e0;
  border-color: #e3cf94;
  white-space: nowrap;
  position: relative;
}
.page-tab.result-tab:hover { background: #fbecb9; }
.page-tab.result-tab.active {
  color: var(--accent);
  background: var(--panel-2);
  border-color: var(--panel-border);
}
.result-tab .rt-icon {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  flex: none;
}
.result-tab .rt-label { overflow: hidden; text-overflow: ellipsis; }

/* 展開された結果タブ群の右端の収納ボタン */
.result-fold {
  display: inline-flex;
  align-items: center;
  margin-bottom: 2px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  color: #7a5b13;
  background: #fdf4d7;
  border: 1px solid #e3cf94;
  border-radius: 9px;
  cursor: var(--cur-pointer, pointer);
  flex: none;
  user-select: none;
}
.result-fold:hover { background: #fbecb9; color: var(--accent); }

/* シート領域に表示する結果ビュー (データグリッドと切り替え) */
.result-host {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 14px 12px;
  font-size: 12.5px;
  background: var(--panel-2);
}

.log-entry {
  border-bottom: 1px dashed var(--panel-border);
  padding: 8px 0;
}
.log-head { margin-bottom: 5px; }
.log-eq { margin-left: 12px; color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; }
.log-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.log-table th, .log-table td {
  border: 1px solid var(--panel-border);
  padding: 2px 12px;
  text-align: right;
  font-size: 12px;
}
.log-table th { background: var(--panel-2); color: var(--muted); font-weight: 600; }
.log-table td:first-child { font-family: var(--font-mono); text-align: left; }
.log-stats { margin-top: 5px; color: var(--muted); }
.log-stats b { color: var(--text); }

/* ============ ステータスバー ============ */
#statusbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;            /* 文字が長くても 2 行にしない */
  white-space: nowrap;
  padding: 3px 12px;
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  font-size: 12px;
  color: var(--muted);
  flex: none;
  overflow: hidden;
}
/* 長文ステータスは 1 行で省略 (… )。flex で縮小可にして溢れさせない */
#status { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#status.error { color: var(--bad); }
.coords { flex: none; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }

/* 設定ボタン(statusbar 右の歯車)。テーマ/フォント/言語は設定画面に集約 */
.statusbar-btn {
  flex: none;
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--panel-border);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: 99px;
  padding: 1px 9px;
  font-size: 11.5px;
  line-height: 1.4;
  cursor: var(--cur-pointer, pointer);
}
.statusbar-btn:hover { color: var(--accent); border-color: var(--accent); }
.statusbar-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* 設定ダイアログ */
.settings-grid { display: flex; flex-direction: column; gap: 14px; min-width: 320px; }
.settings-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; }
.settings-row > label { color: var(--muted); font-size: 12px; font-weight: 600; }
.settings-row select { width: 100%; }
.settings-hint { color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* ============ モーダル ============ */
#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 24, 32, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
#modal {
  width: 480px;
  max-width: 92vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.dlg-titlebar {
  padding: 8px 14px;
  background: var(--titlebar-active);
  color: var(--titlebar-text-active);
  font-weight: 600;
  flex: none;
}
.dlg-body { padding: 14px; overflow-y: auto; }
.dlg-grid { display: flex; flex-direction: column; gap: 10px; }
.dlg-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.dlg-result { margin-top: 12px; }
.dlg-error { color: var(--bad); margin-top: 8px; }

/* 詳細インポート ダイアログ */
.imp-wrap { display: flex; flex-direction: column; gap: 10px; min-width: 560px; }
.imp-opts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.imp-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); }
.imp-field > span { white-space: nowrap; }
.imp-field input[type="checkbox"] { align-self: flex-start; width: 16px; height: 16px; margin: 3px 0; }
.imp-preview-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--panel-border); border-radius: 6px; }
.imp-table { border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.imp-table th, .imp-table td { border: 1px solid var(--panel-border); padding: 2px 8px; text-align: left; }
.imp-table thead th { position: sticky; top: 0; background: var(--panel-2); z-index: 1; }
.imp-table .imp-corner { color: var(--muted); font-weight: 600; text-align: right; background: var(--surface-hover); position: sticky; left: 0; z-index: 2; }
.imp-colsel { font-size: 11px; padding: 1px 2px; min-width: 78px; }
.imp-name { font-weight: 700; color: var(--text); }
.imp-rownum { color: var(--muted); text-align: right; background: var(--surface-hover); position: sticky; left: 0; }
.imp-rowhdr td:not(.imp-rownum) { background: var(--sel-bg); color: var(--accent); font-weight: 700; }
.imp-rowunits td:not(.imp-rownum) { background: var(--surface-hover); font-style: italic; }
.imp-rowskip td:not(.imp-rownum) { color: var(--muted); opacity: 0.55; }
.imp-skip { opacity: 0.4; }
.dlg-hint { color: var(--muted); font-size: 11.5px; font-weight: 400; margin: 4px 0 0; }
.dlg-row { display: flex; gap: 10px; }
.dlg-row > label { flex: 1; }
.dlg-row > label input { width: 100%; min-width: 0; }

#dlg-init-params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}
#dlg-init-params:empty { display: none; }
#dlg-init-params input { width: 100%; min-width: 0; }
.dlg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

#modal.wide { width: 720px; }

/* ============ 軸ダイアログ ============ */
.axis-dlg {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  min-height: 340px;
}
.axis-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--panel-border);
  padding-right: 10px;
}
.axis-side-item {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  cursor: var(--cur-pointer, pointer);
  border: 1px solid var(--panel-border);
  background: var(--panel);
  user-select: none;
}
.axis-side-item:hover { background: var(--sel-bg); }
.axis-side-item.active { background: var(--sel-bg); border-color: var(--panel-border); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }

.axis-main { min-width: 0; display: flex; flex-direction: column; }
.dlg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--panel-border);
  margin-bottom: 12px;
  user-select: none;
}
.dlg-tab {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 5px 5px 0 0;
  cursor: var(--cur-pointer, pointer);
  border: 1px solid transparent;
  border-bottom: none;
}
.dlg-tab:hover { background: var(--sel-bg); }
.dlg-tab.active {
  color: var(--accent);
  background: var(--panel-2);
  border-color: var(--panel-border);
  margin-bottom: -1px;
  padding-bottom: 6px;
}
.axis-tab-body { flex: 1; overflow-y: auto; max-height: 56vh; }

.dlg-subtabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--panel-border);
  margin: 2px 0 8px;
  user-select: none;
}
.dlg-subtab {
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 4px 4px 0 0;
  cursor: var(--cur-pointer, pointer);
}
.dlg-subtab:hover { background: var(--sel-bg); }
.dlg-subtab.active { color: var(--accent); background: var(--sel-bg); }

.ref-details { background: var(--panel); }
.br-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.br-chip {
  padding: 3px 12px;
  border: 1px solid var(--panel-border);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: var(--cur-pointer, pointer);
  user-select: none;
}
.br-chip:hover { background: var(--sel-bg); }
.br-chip.active { background: var(--sel-bg); border-color: var(--panel-border); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
tr.sel-row td { background: var(--sel-bg); }
.rl-name { font-weight: 600; white-space: nowrap; cursor: var(--cur-pointer, pointer); }
.axis-table-wrap { overflow-x: auto; }
.ref-table input[type="color"] { width: 30px; height: 22px; }
.ref-table select { padding: 3px 4px; font-size: 12px; }
.ref-table th { white-space: nowrap; }

fieldset {
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dlg-grid fieldset { margin-top: 2px; }
legend {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 0 5px;
}
fieldset label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.check-label {
  flex-direction: row !important;
  align-items: center;
  gap: 6px !important;
  font-weight: 600;
  cursor: var(--cur-pointer, pointer);
}

input[type="text"], input[type="number"], textarea {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  outline: none;
}
/* U.2: フォーカスは :focus-visible 1系統(border-color + リング)。:focus の二重定義はしない */
input[type="text"]:focus-visible, input[type="number"]:focus-visible, textarea:focus-visible {
  border-color: var(--accent); box-shadow: var(--focus-ring); outline: none;
}
.num-field { text-align: right; font-variant-numeric: tabular-nums; }   /* 数値入力に明示付与(一律にしない) */
textarea { resize: vertical; font-family: var(--font-mono); }
input[type="color"] {
  width: 40px;
  height: 24px;
  padding: 1px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: var(--panel-2);
  cursor: var(--cur-pointer, pointer);
}
input[type="checkbox"] { accent-color: var(--accent); }

.series-table { border-collapse: collapse; width: 100%; }
.series-table th {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  padding: 2px 8px 4px 0;
}
.series-table td { padding: 3px 8px 3px 0; vertical-align: middle; }
.series-table .ser-name {
  font-weight: 600;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dlg-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--panel-border);
  flex: none;
}

select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 400;
  outline: none;
}
select:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }

/* ============ ドロップオーバーレイ ============ */
#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 24, 32, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.drop-box {
  border: 2px dashed var(--accent);
  border-radius: 12px;
  padding: 32px 52px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: rgba(55, 111, 208, 0.30);
}

/* ============ スクロールバー ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* スクリプトコンソール (Phase E.2) */
.console-wrap { display: flex; flex-direction: column; height: 100%; }
.con-out { flex: 1; overflow-y: auto; font-family: var(--font-mono); font-size: 12px; padding: 8px; background: var(--panel-2); }
.con-line { white-space: pre-wrap; word-break: break-word; padding: 1px 0; }
.con-in { color: var(--accent); }
.con-res { color: var(--text); }
.con-err { color: var(--bad); }
.con-hint, .con-line.con-hint { color: var(--muted); font-style: italic; }
.con-input-row { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--panel-border); }
.con-input { flex: 1; min-height: 46px; resize: vertical; font-family: var(--font-mono); font-size: 12px; padding: 6px; }
.con-run { align-self: stretch; padding: 0 14px; }

/* ============ P.1: コンテキスト型プロパティパネル (器) ============ */
/* 収納時はヘッダのみ表示 (タブ/本体は隠す)。展開時は --pp-h の高さを占有 (Explorer は flex:1 で残りを取る)。 */
.pp-host {
  flex: none; display: flex; flex-direction: column;
  background: var(--panel); border-top: 1px solid var(--panel-border); overflow: hidden;
  transition: height 0.24s ease;   /* 収納/展開アニメ (中身は overflow:hidden でクリップ) */
}
/* 高さドラッグ中はトランジションを切ってカーソルに即追従させる (収納/展開アニメ用の transition を一時無効化) */
.pp-host.pp-no-anim { transition: none; }
body.row-resizing { cursor: row-resize; user-select: none; }
body.row-resizing * { cursor: row-resize !important; }
/* 収納時はヘッダ高さ(=--pp-collapsed-h, JS が実測して設定)まで縮める。展開時は --pp-h。
   display:none ではなく高さで隠すことでトランジションが効く。 */
#sidebar.pp-open .pp-host { height: var(--pp-h, 300px); }
#sidebar:not(.pp-open) .pp-host { height: var(--pp-collapsed-h, 34px); }

/* 「適用」フッタ (ダイアログの適用相当。中身はライブ反映だが明示確定+確認ができる) */

/* Explorer / パネル境界の高さリサイズハンドル (展開時のみ表示) */
#pp-split {
  flex: none; height: 7px; cursor: ns-resize; background: transparent;
  border-top: 1px solid var(--panel-border);
}
#pp-split:hover { background: color-mix(in srgb, var(--accent) 40%, transparent); }
#pp-split:focus-visible { outline: none; background: var(--accent); }
#sidebar:not(.pp-open) #pp-split { display: none; }

.pp-frame  { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* ヘッダ全体がクリックで開閉トグル */
.pp-header {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; flex: none;
  background: var(--panel); border-bottom: 1px solid transparent;
  font-weight: 600; user-select: none; cursor: var(--cur-pointer, pointer);
}
#sidebar.pp-open .pp-header { border-bottom-color: var(--panel-border); }
.pp-header:hover .pp-collapse { color: var(--accent); }
.pp-title  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-spacer { flex: 1; }
.pp-collapse {
  border: none; background: transparent; color: var(--muted);
  padding: 2px 5px; border-radius: 4px; cursor: var(--cur-pointer, pointer); font-size: 12px; line-height: 1;
  transition: transform 0.24s ease;     /* 収納/展開で ▾↔▴ を回転アニメ */
}
#sidebar:not(.pp-open) .pp-collapse { transform: rotate(180deg); }
.pp-empty  { color: var(--muted); padding: 16px; font-size: 12px; }

/* 本体 = 左端の縦アイコンレール + スクロール本文 (Blender プロパティエディタ風) */
.pp-main   { flex: 1; min-height: 0; display: flex; }
/* 横スクロールバーは絶対に出さない (overflow-x:hidden)。値入力は min-width:0 でセル内に収める。 */
.pp-scroll { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 10px; }
/* 縦アイコンレール: 横スクロールバーは絶対に出さない (overflow-x:hidden) + アイコンは中央寄せ */
.pp-rail {
  flex: none; width: 38px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-right: 1px solid var(--panel-border);
  overflow-y: auto; overflow-x: hidden;
}
.pp-rail::-webkit-scrollbar { width: 0; }
.pp-rail-btn {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--muted); border-radius: 6px;
  cursor: var(--cur-pointer, pointer);
}
.pp-rail-btn:hover  { background: var(--surface-hover); color: var(--text); }
.pp-rail-btn.active { background: var(--surface-active); color: var(--accent); }
.pp-rail-btn svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* データセットリスト (データ タブ) */
.pp-dslist { display: flex; flex-direction: column; gap: 1px; }
.pp-dsrow {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 5px;
  cursor: var(--cur-pointer, pointer);
}
.pp-dsrow:hover { background: var(--surface-hover); }
.pp-dsrow.sel { background: var(--surface-active); }
.pp-ds-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--panel-border); }
.pp-ds-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.pp-dsrow.sel .pp-ds-name { font-weight: 600; }
.pp-ds-vis { flex: none; }
.pp-ds-del {
  flex: none; border: none; background: transparent; color: var(--muted);
  cursor: var(--cur-pointer, pointer); font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.pp-ds-del:hover:not(:disabled) { color: var(--danger, #d04545); background: var(--surface-hover); }
.pp-ds-del:disabled { opacity: 0.3; cursor: default; }
.pp-ds-add { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.pp-ds-add select { flex: 1; min-width: 0; }
.pp-ds-addbtn { flex: none; white-space: nowrap; }
/* Figure（複合図）: パネル一覧のラベルタグ / ラベルプレビュー / グラフ追加ピッカー */
.fig-panel-tag {
  width: auto; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-active); color: var(--text);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.fig-label-preview { margin-top: 8px; padding: 6px 8px; border-radius: 5px; background: var(--surface-hover); color: var(--muted); font-size: 12px; }
.fig-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow: auto; margin-top: 6px; }
.fig-pick-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 5px; cursor: var(--cur-pointer, pointer); }
.fig-pick-row:hover { background: var(--surface-hover); }
.fig-pick-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fig-pick-type { flex: none; color: var(--muted); font-size: 11px; }
/* ブレーク範囲の行 (開始 / 終了 / 削除) */
.pp-break-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; }
.pp-break-row input { flex: 1; min-width: 0; }

/* セクション / フィールド (中身は P.2+ で生成) */
.pp-sec      { padding: 2px 0 7px; border-bottom: 1px solid var(--panel-border); }
/* 折りたたみ可能なセクションヘッダ (▾/▸ クリックで本体を畳む)。
   スクロール中も見出しが上端に固定されるよう sticky (本体は背景の下を流れる) */
.pp-sec-head { position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: none; background: var(--panel); cursor: var(--cur-pointer, pointer);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 0 0 4px; padding: 6px 0 4px;
  box-shadow: 0 1px 0 var(--panel-border); }
.pp-sec-head:hover { color: var(--text); }
.pp-sec-caret { flex: none; width: 9px; font-size: 9px; color: var(--muted); transition: transform 0.2s ease; }
.pp-sec.collapsed .pp-sec-caret { transform: rotate(-90deg); }   /* ▾ → ▸ */
.pp-sec-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 折りたたみアニメ: body を grid 1fr↔0fr で高さ補間、inner を overflow:hidden + opacity で隠す */
.pp-sec-body  { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.22s ease; }
.pp-sec.collapsed .pp-sec-body { grid-template-rows: 0fr; }
.pp-sec-inner { overflow: hidden; min-height: 0; transition: opacity 0.18s ease; }
.pp-sec.collapsed .pp-sec-inner { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pp-host, .pp-collapse, .pp-sec-body, .pp-sec-inner, .pp-sec-caret { transition: none; }
}
/* ラベル + 値 (コンパクト設計)。行間/パディング/フォントを密にし、ラベル列は狭め + 省略表示。
   値カラムは minmax(0,1fr) で 0 まで縮められる (input の内在 min-width による横はみ出しを防ぐ) */
.pp-field    { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 6px; margin: 2px 0; }
.pp-field > label {
  font-size: 11px; color: var(--muted); line-height: 1.25; text-align: right;   /* ラベルは右揃え */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* 2行にしない: … + title 属性で全文 */
}
/* 値入力 (テキスト/数値/ドロップダウン/単位ラッパ) はセル幅にフィット → パネル幅に追従して自動で伸縮。
   min-width:0 が肝 (これが無いと input 既定の size 由来の幅でセルを押し広げ、パネル外へはみ出す)。 */
.pp-field > :is(input[type="text"], input[type="number"], select, textarea, .pp-inwrap) {
  width: 100%; min-width: 0;
}
/* パネル内の入力はダイアログより一段コンパクトに (グローバル input は据え置き) */
.pp-frame :is(.pp-field input[type="text"], .pp-field input[type="number"], .pp-field select, .pp-field textarea) {
  padding: 2px 6px; font-size: 12px; border-radius: 4px;
}
.pp-frame .pp-field input[type="color"] { width: 32px; height: 20px; }
/* 単位をボックス内に表示 (ラベルからは単位を省く)。入力の右に小さな単位を重ね、右余白を確保。 */
.pp-inwrap { position: relative; display: block; }
.pp-inwrap > input.has-unit { width: 100%; padding-right: 22px; }
.pp-unit { position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: var(--muted); pointer-events: none; }
/* 未確定(入力中)→確定(反映) の視覚フィードバック (Apply ボタン廃止の代替)。
   入力中=琥珀の枠+薄い塗り(未反映)、change で反映され緑に一瞬パルス(applied)。 */
.pp-frame .pp-dirty { border-color: var(--warn, #d8a33a) !important;
  background: color-mix(in srgb, var(--warn, #d8a33a) 13%, var(--panel-2)) !important; }
@keyframes pp-applied-kf {
  0%   { border-color: var(--ok, #3a9d54); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok, #3a9d54) 45%, transparent); }
  100% { border-color: var(--panel-border); box-shadow: 0 0 0 2px transparent; }
}
.pp-frame .pp-applied { animation: pp-applied-kf 0.55s ease-out; }
@media (prefers-reduced-motion: reduce) { .pp-frame .pp-applied { animation-duration: 0.001ms; } }
/* チェックボックス行: [✓] ラベル を1行 flex に。チェックは文頭、ラベルは左揃え・1行(省略)。 */
.pp-field-check { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.pp-field-check > input[type="checkbox"] { order: 0; flex: none; }
.pp-field-check > label { order: 1; flex: 1; min-width: 0; cursor: var(--cur-pointer, pointer);
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 軸/辺セレクタ (セグメントボタン)。軸タブの先頭に表示し、X/Y・上下左右をここで切替。 */
.pp-axissel { display: flex; flex-direction: column; gap: 5px; margin: 0 0 9px; }
.pp-seg { display: flex; border: 1px solid var(--panel-border); border-radius: 6px; overflow: hidden; }
.pp-seg-btn { flex: 1; padding: 4px 6px; border: none; border-right: 1px solid var(--panel-border);
  background: var(--panel-2); color: var(--muted); font-size: 11px; font-weight: 600;
  cursor: var(--cur-pointer, pointer); white-space: nowrap; }
.pp-seg-btn:last-child { border-right: none; }
.pp-seg-btn:hover { color: var(--text); background: var(--surface-hover); }
.pp-seg-btn.active { background: var(--accent); color: #fff; }
/* 辺セレクタ + 「同じ」チェックを横並び (同じはセレクタのすぐ隣)。same のとき辺ボタンはグレーアウト。 */
.pp-sidesel-row { display: flex; align-items: center; gap: 8px; }
.pp-sidesel-row .pp-seg { flex: 1; min-width: 0; }
.pp-same { flex: none; display: flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; color: var(--muted); cursor: var(--cur-pointer, pointer); }
.pp-same input { flex: none; }
.pp-seg.disabled { opacity: 0.45; }
.pp-seg.disabled .pp-seg-btn, .pp-seg-btn:disabled { cursor: default; }
.pp-seg.disabled .pp-seg-btn:hover { background: var(--panel-2); color: var(--muted); }
.pp-seg.disabled .pp-seg-btn.active { background: var(--surface-active); color: var(--muted); }
/* グループ小見出し (主目盛り/副目盛り/軸線/主グリッド…): 同じ語の繰り返しを避けるための区切り見出し */
.pp-grouphead {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted); margin: 8px 0 3px; padding-top: 5px; border-top: 1px solid var(--panel-border);
}
.pp-grouphead:first-child { border-top: none; padding-top: 0; margin-top: 2px; }
.pp-adv > summary { cursor: var(--cur-pointer, pointer); color: var(--muted); font-size: 12px; }
.pp-more     { margin-top: 8px; width: 100%; }

.pp-frame :is(button, select, input, summary):focus-visible { box-shadow: var(--focus-ring); outline: none; }
.pp-grip:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--sel-bg); }
/* ダブルクリック→jumpTo で該当セクションを一瞬強調 */
@keyframes pp-flash-kf { from { background: var(--sel-bg); } to { background: transparent; } }
.pp-sec.pp-flash { animation: pp-flash-kf 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .pp-sec.pp-flash { animation-duration: 0.001ms; } }

/* ============ U.4: アクセシビリティ & モーション ============ */
/* フォーカスは :focus-visible 1系統に統一(キーボード操作で可視・マウスクリックでは出さない)。
   .btn / input / select / textarea は U.2 で個別指定済み。残りの操作要素をここでまとめて指定。 */
.tb-btn:focus-visible,
.menu-label:focus-visible,
.menu-item:focus-visible,
.exp-item:focus-visible,
.exp-folder:focus-visible,
.page-tab:focus-visible,
.dlg-tab:focus-visible,
.dlg-subtab:focus-visible,
.axis-side-item:focus-visible,
.br-chip:focus-visible,
.mdi-btn:focus-visible,
.link-chip:focus-visible,
.ds-chip:focus-visible,
.theme-toggle:focus-visible,
.graph-tools button:focus-visible,
.tb-flyout-menu button:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* 装飾トランジション(主要操作要素のみ)。レイアウトには付けない。 */
.btn, .tb-btn, .menu-label, .menu-item, .exp-item, .page-tab, .dlg-tab,
.link-chip, .ds-chip, .theme-toggle {
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, color 0.12s;
}

/* 無効要素は色だけでなく不透明度でも示す */
select:disabled, input:disabled, textarea:disabled { opacity: 0.5; cursor: var(--cur-arrow, default); }

/* 数値テーブルは等幅数字(桁揃え)。一律 input には当てず .num-field 限定(U.2)。 */
.ws-table tbody td { font-variant-numeric: tabular-nums; }

/* reduced-motion: 全域 !important では消さず、装飾トランジションを持つクラスに限定。
   (マクロ実行アニメ/ノードグラフのエッジ/プログレス等は残す) */
@media (prefers-reduced-motion: reduce) {
  .btn, .tb-btn, .menu-label, .menu-item, .exp-item, .page-tab, .dlg-tab,
  .link-chip, .ds-chip, .ds-dot2, .theme-toggle {
    transition-duration: 0.001ms !important;
  }
}