/* AgentDev UI foundation — 全 WebView2 アプリ共通の土台（正本は Shared\design\agentdev-ui.css）
   各アプリには wwwroot\agentdev-ui.css として写しを置く。直すときは正本を直して
   python Shared\design\sync.py で全アプリへ配り直す（アプリ側の写しは直接いじらない）。

   3 段になっている。
   1. トークン（色・字・間隔）：無条件。アプリの CSS は var(--text) などで使う。
   2. 下地（body の字と地・スクロールバー・フォーカス枠・選択色）：無条件。
      ただし 1 と 2 は @layer agentdev の中なので、レイヤー外に書いたアプリ自身の CSS が常に勝つ。
   3. 部品：クラス名はすべて ad- で始まる（.ad-btn .ad-row .ad-menu …）。既存アプリの .btn や .row とはぶつからない。
      部品はレイヤーの外に置くので、アプリの button {} のような要素向けの指定には負けない。
      素の <button> <input> <select> <textarea>（class なし）に部品の見た目を当てたいときだけ <html class="ad-forms"> にする。

   - テーマ：<html data-theme="light|dark">（agentdev-ui.js が読み込んだ時点で当てる）。属性が無ければ OS に従う。
   - 密度：<html data-density="compact"> で 12px・26px 部品（道具の多い編集アプリ）。既定は 13px・32px。
   - アクセント：アプリごとに --accent / --accent-2 / --accent-text / --accent-fill を :root で上書きしてよい。
   詳しい決まりは Shared\design\DESIGN.md。 */

@layer agentdev {

:root {
  color-scheme: light;
  /* 面（奥 → 手前） */
  --bg: #f4f4f5;          /* 窓の地・キャンバスの外 */
  --bar: #fbfbfb;         /* メニューバー・ツールバー・ステータスバー */
  --panel: #ffffff;       /* サイドバー・パネル・カード・入力欄 */
  --raised: #ffffff;      /* メニュー・ポップオーバー・ダイアログ */
  --sunken: #ececee;      /* ウェル・セグメントの溝 */
  /* 線 */
  --line: #e2e2e5;
  --line-strong: #c8c8cd;
  --line-field: #8a8a92;  /* 入力欄の下線（3:1 を満たす） */
  /* 文字 */
  --text: #1f1f23;
  --text-2: #55555c;      /* 補助 */
  --text-3: #6b6b73;      /* 注記・プレースホルダ（11px でも 4.5:1） */
  /* 状態 */
  --hover: rgba(0, 0, 0, .055);
  --pressed: rgba(0, 0, 0, .09);
  --accent: #1473e6;      /* 印・線・選択の縁 */
  --accent-2: #0d66d0;    /* 濃い方 */
  --accent-text: #0d66d0; /* 文字としてのアクセント（リンク・選択行の文字） */
  --accent-fill: #1473e6; /* 白文字を載せる塗り（主ボタン） */
  --accent-fill-2: #0d66d0;
  --accent-ink: #ffffff;  /* 塗りの上の文字 */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --active: color-mix(in srgb, var(--accent) 16%, var(--panel)); /* 選択行・選択した道具の地 */
  --active-hover: color-mix(in srgb, var(--accent) 22%, var(--panel));
  --active-text: var(--accent-text);
  --sel-text: color-mix(in srgb, var(--accent) 24%, transparent);
  --focus: var(--accent);
  /* 意味の色（色だけに頼らず必ず文字やアイコンも添える）。-text は文字用、-fill は白文字の塗り用 */
  --ok: #1e8a5a;     --ok-text: #17734b;
  --warn: #b26b00;   --warn-text: #8a5300;
  --danger: #d7373f; --danger-text: #b42a32; --danger-fill: #d7373f;
  --info: #1473e6;
  --ok-soft: color-mix(in srgb, var(--ok) 12%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  /* グラフの系列色（色覚多様性で区別できる順。アクセントとは独立） */
  --series-1: #1f77d0; --series-2: #e8890c; --series-3: #2a9d6f; --series-4: #c43c7a;
  --series-5: #7a52d6; --series-6: #8a6d3b; --series-7: #00a3b4; --series-8: #6b6b73;
  /* 影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .05);
  --shadow: 0 6px 18px rgba(0, 0, 0, .10), 0 1px 4px rgba(0, 0, 0, .06);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .16), 0 3px 10px rgba(0, 0, 0, .07);
  --backdrop: rgba(20, 20, 24, .32);
  --toast-bg: #2b2b2f; --toast-text: #f2f2f4; --toast-line: transparent;
  /* 検索語の強調・濃淡図（ヒートマップ）の両端（濃淡図は「値が大きいほど目立つ」向きを両テーマで保つ） */
  --mark-bg: #ffe58a; --mark-text: #1f1f23;
  --fav: #d99a00;  /* お気に入りの星 */
  --heat-lo: #eef4fc; --heat-hi: #0d5bc4;
  /* 字（Windows 11 と同じく欧文は Segoe UI Variable、和文は游ゴシック UI） */
  --font: "Segoe UI Variable Text", "Segoe UI", "Yu Gothic UI", "Meiryo UI", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Yu Gothic UI", sans-serif;
  --font-read: "Yu Gothic", "Segoe UI", "Meiryo", sans-serif; /* 長文本文 */
  --paper: #ffffff; --paper-text: #1f1f23; --paper-line: #d9d9de; /* 紙・シート・スライドなど、テーマに関係なく白いままの面 */
  --font-serif: "Yu Mincho", "游明朝", "BIZ UDPMincho", "Noto Serif JP", "MS PMincho", serif; /* 古典・漢文の本文 */
  --mono: "Cascadia Mono", Consolas, "BIZ UDGothic", monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;
  --lh: 1.5; --lh-tight: 1.3;
  /* 間隔（4px 刻み） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  /* 角丸（Fluent：部品 4px・重なるもの 8px） */
  --radius-sm: 3px; --radius: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px;
  /* 部品の高さ */
  --ctl-h: 32px; --ctl-h-sm: 24px; --ctl-h-lg: 40px;
  --row-h: 28px;                   /* リスト・ツリー・メニューの 1 行 */
  --bar-h: 40px;                   /* ツールバー・パネル見出し */
  --status-h: 24px;
  --icon: 16px; --icon-lg: 20px;
  /* 動き */
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-exit: cubic-bezier(.7, 0, .84, 0);
  /* 重なり順 */
  --z-sticky: 10; --z-pop: 40; --z-modal: 50; --z-menu: 65; --z-toast: 70; --z-tip: 80;
}

:root[data-density="compact"] {
  --fs: 12px; --fs-md: 13px; --ctl-h: 26px; --ctl-h-sm: 22px; --row-h: 24px; --bar-h: 34px; --status-h: 22px;
}

/* ダークは反転ではなく別に決めた値（下の @media と同じ中身。sync.py が一致を確かめる） */
:root[data-theme="dark"] {
  /*DARK*/
  color-scheme: dark;
  --bg: #1b1b1d; --bar: #252528; --panel: #222225; --raised: #2c2c30; --sunken: #18181a;
  --line: #36363b; --line-strong: #4a4a50; --line-field: #77777f;
  --text: #e6e6e9; --text-2: #b0b0b6; --text-3: #9a9aa1;
  --hover: rgba(255, 255, 255, .07); --pressed: rgba(255, 255, 255, .11);
  --accent: #378ef0; --accent-2: #5aa2f5; --accent-text: #6aacf7;
  --accent-fill: #2a73d4; --accent-fill-2: #2f7ad9; --accent-ink: #ffffff;
  --active: color-mix(in srgb, var(--accent) 24%, var(--panel)); --active-hover: color-mix(in srgb, var(--accent) 32%, var(--panel));
  --active-text: #cfe3ff;
  --sel-text: color-mix(in srgb, var(--accent) 38%, transparent);
  --ok: #3fbf86; --ok-text: #4fcf95; --warn: #e3a53a; --warn-text: #ebb455; --danger: #f0646b; --danger-text: #f37a80; --danger-fill: #c9353d; --info: #5aa2f5;
  --series-1: #5aa9ff; --series-2: #ffa23a; --series-3: #45c98f; --series-4: #ef6fa8;
  --series-5: #a98bff; --series-6: #c9a46a; --series-7: #3fd0de; --series-8: #a0a0a8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 8px 22px rgba(0, 0, 0, .42), 0 1px 4px rgba(0, 0, 0, .3);
  --shadow-lg: 0 22px 55px rgba(0, 0, 0, .55);
  --backdrop: rgba(0, 0, 0, .5);
  --toast-bg: #38383d; --toast-text: #f2f2f4; --toast-line: #4a4a50;
  --mark-bg: #6b5410; --mark-text: #fff3c4;
  --fav: #f2c14e;
  --heat-lo: #1f2a38; --heat-hi: #8cc4ff;
  /*/DARK*/
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
  /*DARK*/
  color-scheme: dark;
  --bg: #1b1b1d; --bar: #252528; --panel: #222225; --raised: #2c2c30; --sunken: #18181a;
  --line: #36363b; --line-strong: #4a4a50; --line-field: #77777f;
  --text: #e6e6e9; --text-2: #b0b0b6; --text-3: #9a9aa1;
  --hover: rgba(255, 255, 255, .07); --pressed: rgba(255, 255, 255, .11);
  --accent: #378ef0; --accent-2: #5aa2f5; --accent-text: #6aacf7;
  --accent-fill: #2a73d4; --accent-fill-2: #2f7ad9; --accent-ink: #ffffff;
  --active: color-mix(in srgb, var(--accent) 24%, var(--panel)); --active-hover: color-mix(in srgb, var(--accent) 32%, var(--panel));
  --active-text: #cfe3ff;
  --sel-text: color-mix(in srgb, var(--accent) 38%, transparent);
  --ok: #3fbf86; --ok-text: #4fcf95; --warn: #e3a53a; --warn-text: #ebb455; --danger: #f0646b; --danger-text: #f37a80; --danger-fill: #c9353d; --info: #5aa2f5;
  --series-1: #5aa9ff; --series-2: #ffa23a; --series-3: #45c98f; --series-4: #ef6fa8;
  --series-5: #a98bff; --series-6: #c9a46a; --series-7: #3fd0de; --series-8: #a0a0a8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 8px 22px rgba(0, 0, 0, .42), 0 1px 4px rgba(0, 0, 0, .3);
  --shadow-lg: 0 22px 55px rgba(0, 0, 0, .55);
  --backdrop: rgba(0, 0, 0, .5);
  --toast-bg: #38383d; --toast-text: #f2f2f4; --toast-line: #4a4a50;
  --mark-bg: #6b5410; --mark-text: #fff3c4;
  --fav: #f2c14e;
  --heat-lo: #1f2a38; --heat-hi: #8cc4ff;
  /*/DARK*/
  }
}

/* ========== 2. 下地 ========== */
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs); line-height: var(--lh);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--sel-text); }
a { color: var(--accent-text); }
mark { background: var(--mark-bg); color: var(--mark-text); border-radius: 2px; padding: 0 1px; }
code, kbd, pre, samp { font-family: var(--mono); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); }
button, input, select, textarea { font-family: inherit; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }
::placeholder { color: var(--text-3); opacity: 1; }
[hidden] { display: none !important; }

/* キーボード操作のときだけ枠を出す（マウスでは出さない）。文字入力欄は枠線の色で示す */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="color"], [type="file"]), textarea, select, [contenteditable]):focus-visible { outline: none; }

/* スクロールバー：細く・角丸・地は透明 */
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 18%, transparent); background-clip: padding-box;
  border: 3px solid transparent; border-radius: 20px; min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 32%, transparent); }
::-webkit-scrollbar-corner { background: transparent; }

kbd {
  display: inline-block; min-width: 18px; padding: 0 5px; text-align: center;
  font: 600 var(--fs-xs)/18px var(--mono); color: var(--text-2);
  background: var(--sunken); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--radius-sm);
}

} /* @layer agentdev（ここまで：トークンと下地。アプリの CSS が常に勝つ） */

/* ========== 3. 部品（ad-） ==========
   レイヤーの外。ad- で始まるクラスはこの土台だけが使う名前なので、アプリの button {} や header button {} のような
   要素向けの指定に負けないよう、ふつうの詳細度で書く（アプリのクラス指定 .x .ad-btn などで上書きはできる）。 */
.ad-mono { font-family: var(--mono); }
.ad-num { font-variant-numeric: tabular-nums; }
.ad-hint { font-size: var(--fs-sm); color: var(--text-3); }
.ad-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.ad-spacer { flex: 1 1 auto; }
.ad-no-scrollbar { scrollbar-width: none; }
.ad-no-scrollbar::-webkit-scrollbar { display: none; }

/* ボタン（素の要素は html.ad-forms のときだけ） */
.ad-btn, :root.ad-forms :where(button:not([class]), input[type="button"], input[type="submit"]) {
  font: inherit; font-size: var(--fs); color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--ctl-h); padding: 0 12px; border-radius: var(--radius);
  background: var(--raised); border: 1px solid var(--line-strong);
  white-space: nowrap; user-select: none; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ad-btn.ad-btn:hover, :root.ad-forms :where(button:not([class]), input[type="button"], input[type="submit"]):hover { background: color-mix(in srgb, var(--raised), var(--text) 5%); }
.ad-btn.ad-btn:active, :root.ad-forms :where(button:not([class])):active { background: color-mix(in srgb, var(--raised), var(--text) 10%); }
.ad-btn:disabled, .ad-btn.disabled, :root.ad-forms :where(button:not([class])):disabled { opacity: .45; cursor: default; pointer-events: none; }
.ad-btn.ad-btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); font-weight: 600; }
.ad-btn.ad-btn.primary:hover { background: var(--accent-fill-2); border-color: var(--accent-fill-2); }
.ad-btn.ad-btn.danger { background: var(--danger-fill); border-color: var(--danger-fill); color: #fff; font-weight: 600; }
.ad-btn.ad-btn.danger:hover { background: color-mix(in srgb, var(--danger-fill), #000 10%); }
.ad-btn.ad-btn.ghost { background: transparent; border-color: transparent; }
.ad-btn.ad-btn.ghost:hover { background: var(--hover); }
.ad-btn.sm { min-height: var(--ctl-h-sm); padding: 0 8px; font-size: var(--fs-sm); }
.ad-btn.lg { min-height: var(--ctl-h-lg); padding: 0 18px; font-size: var(--fs-md); }
.ad-btn svg { width: var(--icon); height: var(--icon); flex: none; }
/* アイコンだけのボタン（必ず title か aria-label を付ける） */
.ad-ibtn {
  font: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  width: var(--ctl-h); height: var(--ctl-h); padding: 0; border: 1px solid transparent; background: transparent;
  color: var(--text-2); border-radius: var(--radius); flex: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ad-ibtn.ad-ibtn:hover { background: var(--hover); color: var(--text); }
.ad-ibtn.ad-ibtn:active { background: var(--pressed); }
.ad-ibtn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.ad-ibtn.ad-ibtn.on, .ad-ibtn.ad-ibtn[aria-pressed="true"] { background: var(--active); color: var(--active-text); }
.ad-ibtn svg { width: var(--icon-lg); height: var(--icon-lg); color: inherit; }
.ad-ibtn.sm { width: var(--ctl-h-sm); height: var(--ctl-h-sm); }
.ad-ibtn.sm svg { width: var(--icon); height: var(--icon); }

/* 区切りのある選択（セグメント） */
.ad-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); }
/* .ad-seg を重ねるのは :root.ad-forms の素の button（0,2,0）に負けないため */
.ad-seg.ad-seg > * {
  font: inherit; font-size: var(--fs); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  height: calc(var(--ctl-h) - 6px); min-height: 0; min-width: calc(var(--ctl-h) - 6px); border: 0; background: transparent; color: var(--text-2);
  border-radius: calc(var(--radius) - 1px); padding: 0 10px;
}
.ad-seg.ad-seg > *:hover { background: var(--hover); color: var(--text); }
.ad-seg.ad-seg > .on, .ad-seg.ad-seg > [aria-pressed="true"], .ad-seg.ad-seg > [aria-selected="true"] { background: var(--raised); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }
.ad-seg svg { width: var(--icon); height: var(--icon); }

/* 入力（素の要素は html.ad-forms のときだけ） */
.ad-input, .ad-select, .ad-textarea,
:root.ad-forms :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [class]), select:not([class]), textarea:not([class])) {
  font: inherit; font-size: var(--fs); color: var(--text); background: var(--panel);
  border: 1px solid var(--line-strong); border-bottom-color: var(--line-field); border-radius: var(--radius);
  min-height: var(--ctl-h); padding: 0 8px; min-width: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.ad-textarea, :root.ad-forms :where(textarea:not([class])) { padding: 6px 8px; line-height: var(--lh); resize: vertical; }
.ad-input:focus, .ad-select:focus, .ad-textarea:focus,
:root.ad-forms :where(input:not([type="checkbox"], [type="radio"], [type="range"], [class]), select:not([class]), textarea:not([class])):focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft);
}
.ad-input:disabled, .ad-select:disabled, .ad-textarea:disabled { opacity: .55; }
.ad-field { display: flex; flex-direction: column; gap: 4px; }
.ad-field > label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }

/* 検索欄（左に虫眼鏡）：<label class="ad-search"><span data-ad-icon="search"></span><input class="ad-input"></label> */
.ad-search { position: relative; display: flex; align-items: center; }
.ad-search > svg, .ad-search > [data-ad-icon] { position: absolute; left: 9px; width: 15px; height: 15px; color: var(--text-3); pointer-events: none; display: flex; }
.ad-search > [data-ad-icon] svg { width: 15px; height: 15px; }
.ad-search.ad-search > input { padding-left: 30px; width: 100%; }

/* スイッチ：<label class="ad-switch"><input type="checkbox"><span></span>文字</label> */
.ad-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text); position: relative; }
.ad-switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ad-switch > span { position: relative; width: 32px; height: 18px; flex: none; border-radius: 999px; background: transparent; border: 1px solid var(--line-field); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.ad-switch > span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-2); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.ad-switch > input:checked + span { background: var(--accent-fill); border-color: var(--accent-fill); }
.ad-switch > input:checked + span::after { transform: translateX(14px); background: #fff; }
.ad-switch > input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 枠組み */
.ad-toolbar {
  display: flex; align-items: center; gap: var(--sp-1); min-height: var(--bar-h); padding: 0 var(--sp-2);
  background: var(--bar); border-bottom: 1px solid var(--line);
}
.ad-sep { width: 1px; height: 18px; background: var(--line); margin: 0 var(--sp-1); flex: none; align-self: center; }
.ad-statusbar {
  display: flex; align-items: center; gap: var(--sp-3); height: var(--status-h); padding: 0 var(--sp-3);
  background: var(--bar); border-top: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-xs);
  white-space: nowrap; overflow: hidden;
}
.ad-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ad-panel-head {
  display: flex; align-items: center; gap: var(--sp-2); min-height: var(--bar-h); padding: 0 var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--text-2);
}
.ad-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4); }
.ad-card.hoverable { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); cursor: pointer; }
.ad-card.hoverable:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.ad-section-title { font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); letter-spacing: .03em; margin: var(--sp-4) 0 var(--sp-2); }

/* 仕切り（ドラッグで幅を変える）：細い当たり判定、触れるとアクセント */
.ad-splitter { flex: none; width: 5px; margin: 0 -2px; cursor: col-resize; position: relative; z-index: 2; background: transparent; transition: background var(--dur) var(--ease); touch-action: none; }
.ad-splitter.h { width: auto; height: 5px; margin: -2px 0; cursor: row-resize; }
.ad-splitter:hover, .ad-splitter.dragging { background: color-mix(in srgb, var(--accent) 60%, transparent); }

/* タブ（下線型） */
.ad-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ad-tabs::-webkit-scrollbar { display: none; }
.ad-tab {
  font: inherit; font-size: var(--fs); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: calc(var(--row-h) + 6px); padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.ad-tab.ad-tab:hover { color: var(--text); background: var(--hover); }
.ad-tab.ad-tab.on, .ad-tab.ad-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* リスト行（サイドバー・結果一覧） */
.ad-list { display: flex; flex-direction: column; gap: 1px; }
.ad-row {
  display: flex; align-items: center; gap: var(--sp-2); min-height: var(--row-h); padding: 0 var(--sp-2);
  border-radius: var(--radius); color: var(--text); cursor: pointer; position: relative;
}
.ad-row:hover { background: var(--hover); }
.ad-row.on, .ad-row[aria-selected="true"] { background: var(--active); color: var(--active-text); }
.ad-row.on:hover, .ad-row[aria-selected="true"]:hover { background: var(--active-hover); }
.ad-row.on::before, .ad-row[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 2px; background: var(--accent); }
.ad-row .meta { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); }
.ad-row svg { width: var(--icon); height: var(--icon); flex: none; }

/* 表 */
table.ad-table { border-collapse: separate; border-spacing: 0; width: 100%; }
table.ad-table th {
  position: sticky; top: 0; z-index: 1; background: var(--bar); color: var(--text-2);
  font-size: var(--fs-xs); font-weight: 700; text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.ad-table td { padding: 5px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
table.ad-table tbody tr:hover td { background: var(--hover); }
table.ad-table tr.on td { background: var(--active); }
table.ad-table tr.on td:first-child { box-shadow: inset 3px 0 var(--accent); }
table.ad-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* 小さな印 */
.ad-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600; background: var(--sunken); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap;
}
.ad-badge.accent { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.ad-badge.ok { background: var(--ok-soft); color: var(--ok-text); border-color: transparent; }
.ad-badge.warn { background: var(--warn-soft); color: var(--warn-text); border-color: transparent; }
.ad-badge.danger { background: var(--danger-soft); color: var(--danger-text); border-color: transparent; }

/* 浮かぶもの */
.ad-menu:focus, .ad-popover:focus { outline: none; }  /* 開いた直後に枠ごと focus するので、枠線は項目にだけ出す */
.ad-menu, .ad-popover {
  position: fixed; z-index: var(--z-menu); min-width: 200px; max-height: 80vh; overflow: auto; padding: 4px;
  background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); animation: ad-pop var(--dur-fast) var(--ease);
}
.ad-popover { padding: var(--sp-3); z-index: var(--z-pop); }
.ad-menu-item {
  font: inherit; font-size: var(--fs); cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%; height: var(--row-h); padding: 0 10px;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--text); text-align: left;
}
.ad-menu .ad-menu-item.ad-menu-item, .ad-popover .ad-menu-item.ad-menu-item { justify-content: flex-start; text-align: left; height: var(--row-h); padding: 0 10px; }
.ad-menu-item.ad-menu-item:hover, .ad-menu-item.ad-menu-item.kbfocus { background: var(--hover); }
.ad-menu-item:disabled { opacity: .45; cursor: default; }
.ad-menu-item > span:not(.key) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ad-menu-item { white-space: nowrap; }
.ad-menu-item svg { width: var(--icon); height: var(--icon); flex: none; color: var(--text-2); }
.ad-menu-swatch { width: calc(var(--icon) - 2px); height: calc(var(--icon) - 2px); margin: 1px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent); }  /* AD.menu の swatch（色見本） */
.ad-menu-item.on .ad-menu-swatch { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent), 0 0 0 2px var(--raised), 0 0 0 3.5px var(--accent); }  /* checked の色見本 */
.ad-menu-item > .ad-menu-check { margin-left: auto; padding-left: 16px; display: inline-flex; flex: none; overflow: visible; }
.ad-menu-item .key + .ad-menu-check { margin-left: 0; padding-left: 8px; }
.ad-menu-item .ad-menu-check svg { color: var(--accent-text); }
.ad-menu-item .key { margin-left: auto; padding-left: 24px; font-size: var(--fs-xs); color: var(--text-3); }
.ad-menu-item.danger, .ad-menu-item.danger svg { color: var(--danger-text); }
.ad-menu-item.danger:hover { background: var(--danger-soft); }
.ad-menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.ad-menu-head { padding: 6px 10px 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }

.ad-modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--backdrop);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-6);
  animation: ad-fade var(--dur) var(--ease);
}
.ad-modal {
  width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column;
  background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; animation: ad-rise var(--dur) var(--ease);
}
.ad-modal.wide { width: min(860px, 100%); }
.ad-modal.xl { width: min(1200px, 100%); }
/* 図の上の小さな凡例・ツールチップ */
.ad-legend { font-size: var(--fs-xs); color: var(--text-2); padding: 8px 10px; line-height: 1.6; }
.ad-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.ad-tip { position: fixed; z-index: var(--z-tip); pointer-events: none; padding: 6px 8px; font-size: var(--fs-sm); background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 320px; }
.ad-modal.narrow { width: min(420px, 100%); }
/* 素の <dialog> を使うアプリ向け：<dialog class="ad-dialog"> に .ad-modal-head / -body / -foot を入れる */
dialog.ad-dialog {
  width: min(560px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0; display: none; flex-direction: column;
  background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
dialog.ad-dialog[open] { display: flex; animation: ad-rise var(--dur) var(--ease); }
dialog.ad-dialog.wide { width: min(860px, calc(100vw - 48px)); }
dialog.ad-dialog.narrow { width: min(420px, calc(100vw - 48px)); }
dialog.ad-dialog::backdrop { background: rgba(0, 0, 0, .4); background: var(--backdrop, rgba(0, 0, 0, .4)); }  /* 古い WebView2 では ::backdrop に変数が届かない */
dialog.ad-dialog > form { display: contents; }
.ad-modal-head { display: flex; align-items: center; gap: var(--sp-2); padding: 16px 20px 8px; font-size: var(--fs-lg); font-weight: 650; font-family: var(--font-display); }
.ad-modal-head .ad-ibtn { margin-left: auto; }
.ad-modal-body { padding: 8px 20px 16px; overflow: auto; }
.ad-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); padding: 12px 20px; border-top: 1px solid var(--line); background: var(--bar); }
.ad-modal-foot .left { margin-right: auto; }

.ad-toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.ad-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(560px, 90vw);
  padding: 9px 14px; border-radius: var(--radius-lg); background: var(--toast-bg); color: var(--toast-text);
  border: 1px solid var(--toast-line); box-shadow: var(--shadow-lg); font-size: var(--fs); animation: ad-rise var(--dur) var(--ease);
}
.ad-toast svg { width: 16px; height: 16px; flex: none; }
.ad-toast.ok svg { color: #5ad19a; } .ad-toast.warn svg { color: #f2b851; } .ad-toast.danger svg { color: #ff7b80; } .ad-toast.info svg { color: #8cc4ff; }
.ad-toast > span { white-space: pre-line; overflow-wrap: anywhere; }
.ad-toast .ad-toast-btn.ad-toast-btn, .ad-toast button.ad-toast-btn { font: inherit; font-weight: 600; cursor: pointer; height: 24px; padding: 0 8px; background: transparent; border: 0; border-radius: var(--radius); color: #8cc4ff; }
.ad-toast .ad-toast-btn.ad-toast-btn:hover, .ad-toast button.ad-toast-btn:hover { background: rgba(255,255,255,.1); color: #8cc4ff; }
.ad-toast.out { animation: ad-sink var(--dur-fast) var(--ease-exit) forwards; }

/* アプリの名前の前の印（<span class="ad-applogo" data-ad-icon="dna"></span>アプリ名）：アクセント色の線画 18px */
.ad-applogo { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
.ad-applogo svg { width: 18px; height: 18px; stroke-width: 2; }
.ad-appname { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-md); white-space: nowrap; }

/* 地図・キャンバスの上に浮かぶ板（検索・凡例・詳細） */
.ad-float { background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* Leaflet の部品をトークンで描く（Leaflet を使うアプリにだけ効く）。leaflet.css の読み込み順に関係なく勝つよう、
   .leaflet-container .leaflet-control-container / .leaflet-pane で詳細度を上げている（.leaflet-touch の指定にも勝つ） */
.leaflet-container { font-family: var(--font); background: var(--bg); }
.leaflet-container .leaflet-control-container :is(.leaflet-bar, .leaflet-control-layers, .leaflet-control-attribution, .leaflet-control-scale-line) { box-shadow: var(--shadow); border: 1px solid var(--line); }
.leaflet-container .leaflet-control-container .leaflet-bar { border-radius: var(--radius-lg); overflow: hidden; }
.leaflet-container .leaflet-control-container .leaflet-bar a { background: var(--raised); color: var(--text); border-bottom-color: var(--line); width: 32px; height: 32px; line-height: 32px; }
.leaflet-container .leaflet-control-container .leaflet-bar a:hover { background: color-mix(in srgb, var(--raised), var(--text) 7%); }
.leaflet-container .leaflet-control-container .leaflet-bar a.leaflet-disabled { color: var(--text-3); background: var(--raised); }
.leaflet-container .leaflet-control-container .leaflet-control-layers { background: var(--raised); color: var(--text); border-radius: var(--radius-lg); }
:root[data-theme="dark"] .leaflet-container .leaflet-control-container .leaflet-control-layers-toggle { filter: invert(.9); }
.leaflet-container .leaflet-control-container .leaflet-control-attribution { background: color-mix(in srgb, var(--raised) 85%, transparent); color: var(--text-3); border-radius: var(--radius) 0 0 0; font-size: 10px; box-shadow: none; }
.leaflet-container .leaflet-control-container .leaflet-control-attribution a { color: var(--accent-text); }
.leaflet-container .leaflet-control-container .leaflet-control-scale-line { background: color-mix(in srgb, var(--raised) 85%, transparent); color: var(--text-2); border-top: 0; box-shadow: none; }
.leaflet-container .leaflet-pane .leaflet-tooltip { background: var(--raised); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font: var(--fs-sm)/1.4 var(--font); }
.leaflet-container .leaflet-pane .leaflet-tooltip-top::before { border-top-color: var(--raised); }
.leaflet-container .leaflet-pane .leaflet-tooltip-bottom::before { border-bottom-color: var(--raised); }
.leaflet-container .leaflet-pane .leaflet-tooltip-left::before { border-left-color: var(--raised); }
.leaflet-container .leaflet-pane .leaflet-tooltip-right::before { border-right-color: var(--raised); }
.leaflet-container .leaflet-pane :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip) { background: var(--raised); color: var(--text); box-shadow: var(--shadow-lg); }
.leaflet-container .leaflet-pane .leaflet-popup-content-wrapper { border-radius: var(--radius-lg); }
/* 濃色の地図：背景タイルだけ反転（線・塗り・マーカーには当てない）。写真タイルの層には付けない
   <div id="map" class="ad-map-invert"> を濃色のときだけ付ける、または下の自動版を使う */
.ad-map-invert .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.75) contrast(.8) saturate(.35); }
:root[data-theme="dark"] .ad-map-auto .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.75) contrast(.8) saturate(.35); }

/* 空の状態：何をすればよいかを 1 行と 1 つのボタンで */
.ad-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6); text-align: center; color: var(--text-3);
}
.ad-empty > svg, .ad-empty > svg.i, .ad-empty > [data-ad-icon] svg, .ad-empty .ad-empty-icon svg, .ad-empty .ad-empty-icon { width: 40px; height: 40px; stroke-width: 1.25; color: var(--text-3); }
.ad-empty > svg, .ad-empty > [data-ad-icon], .ad-empty .ad-empty-icon { margin-bottom: var(--sp-1); }
.ad-empty .title { font-size: var(--fs-md); font-weight: 650; color: var(--text-2); }
.ad-empty p, .ad-empty .desc { margin: 0; max-width: 36em; line-height: var(--lh); color: var(--text-3); }
.ad-empty .ad-btn { margin-top: var(--sp-2); }
.ad-dropzone { border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* 読み込み中 */
.ad-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 18%, transparent); border-top-color: var(--accent); animation: ad-spin .8s linear infinite; display: inline-block; vertical-align: middle; flex: none; }
.ad-skeleton { background: linear-gradient(90deg, var(--sunken), var(--hover), var(--sunken)); background-size: 200% 100%; animation: ad-shimmer 1.2s linear infinite; border-radius: var(--radius-sm); color: transparent; }
.ad-progress { height: 4px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.ad-progress > i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); border-radius: inherit; transition: width var(--dur) var(--ease); }

/* 化学構造式など、白地に黒で描かれる絵（RDKit の SVG 等）：濃色では反転して色相を戻す（原子の色合いは保つ） */
:root[data-theme="dark"] .ad-chem { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .ad-chem { filter: invert(1) hue-rotate(180deg); } }

/* アイコン（agentdev-ui.js の AD.icon が入れる <svg class="i">） */
svg.i { width: var(--icon); height: var(--icon); flex: none; vertical-align: -3px; pointer-events: none; }  /* ボタンの中のアイコンを押しても e.target がボタンになるように */
[data-ad-icon] { display: inline-flex; align-items: center; justify-content: center; }

@keyframes ad-pop { from { opacity: 0; transform: translateY(-3px) scale(.98); } }
@keyframes ad-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes ad-sink { to { opacity: 0; transform: translateY(8px); } }
@keyframes ad-fade { from { opacity: 0; } }
@keyframes ad-spin { to { transform: rotate(360deg); } }
@keyframes ad-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .ad-spinner { animation: ad-spin 1.6s linear infinite !important; }
}