fix(ui): draw controls on the window ground, not on the panel tint (src/styles.css, docs)

docs/0-requirements.md

@@ -279,9 +279,22 @@ liplus-desktop の `stream_parser.rs` および `spawn_stream_pty` / `spawn_stre
 - 会話面の文字サイズのうち、ヘッダのピッカー、再起動後の保持、上下限の実機確認。いずれも実装済みで CI の型検査は通っているが、実機での操作は未確認である。キー操作（`Ctrl` + `=` / `-` / `0`）と、効く範囲が会話面に留まること（参加者パネル・診断面・端末・入力欄が動かないこと）は 2026-08-24 の実機観察で確認済みである。後者が webview 自身のズームも閉じている——キーを受ければ寸法は無条件に動くため、動いたこと自体は既定動作を止められた証拠にならないが、会話面以外が一緒に動かなかった以上、webview のズームは走っていない。
 - 診断面のヘッダの実機確認。タブと行の連動、`✕` で面が畳まれセッションが残ること、終了したタブの `✕` での破棄、端末の文字サイズの梯子と再起動後の保持、桁数と行数がセッションへ伝わることはいずれも実装済みで CI の型検査は通っているが、実機での操作は未確認である。ヘッダの存在・角丸・枠の見た目は 2026-08-24 に実機で観察され、そこから色を敷かないこと・窓の名前「端末」・枠の余白を詰めることの三点が指示として戻っている。三点を反映した後の見た目は再度未確認である。
 - 行の記号表示と終了の確認ダイアログの実機確認。三つの記号が Windows のフォントで揃って出ること、幅を固定した列で本人の行の名前が出ること、ダイアログの取消・終了・Escape はいずれも実装済みで CI の型検査は通っているが、実機での操作は未確認である。
+- 操作の地色を揃えた後の見た目の実機確認。タイトルバー・入力欄・参加者の行・端末ヘッダ・アカウントのモーダルの操作を窓の地色へ揃え、選択中の端末タブも同じ地色にした（#75、下記「二つの地色」）。指示は 2026-08-24 の実機観察から戻っているが、反映後の見た目は未確認である。
 - 会話ログの永続化と観測 UI
 - plugin としての allowlist 掲載（配布の第二段階）
 
+### 二つの地色
+
+面には地色が二つある。`--bg`（ライトで `#ffffff`）が窓の地であり、`--surface`（同 `#f4f4f7`）が面そのものの色味である。どちらがどこに出るかは、それが面か操作かで決まる。
+
+**操作は窓の地に描く。** 入力欄・選択肢・テキストエリア・ボタン、そして選択中の端末タブは `--bg` を背景に持ち、`--line` の枠で輪郭を持つ（実機指示、2026-08-24）。操作を地から分けるのは枠であって塗りではない。塗りで分けると、同じボタンがタイトルバーでは白の上の灰色、参加者パネルでは灰色の上の灰色になり、操作の見え方が「どの面に載っているか」で変わる。枠で分ければ、操作はどこにあっても一つの形である。
+
+**`--surface` は面の地に残る。** 参加者パネルの地であり、地がすでに `--bg` である場所で何かを浮かせるときの色味である（端末タブの `✕` のホバーがこれに当たる）。参加者パネル自身の地は変えない——揃えるのは面の中の操作であって、面ではない。
+
+**色は直値で書かない。** 「白」はライトテーマでの見え方であって指定ではない。ダークテーマでは `--bg` は `#17171a` であり、`#ffffff` と書けばそこで壊れる。指定は常にトークンで書く。
+
+この規則の下では、選択中の端末タブは地色で選択を言えなくなる。代わりに言うのは枠（未選択の `transparent` から `--line` へ）と文字色（`--muted` から参加者自身の色へ）である。参加者パネルの選択中の行と同じ形——枠のある窓の地の箱——になり、同じ選択を二つの面が同じ手で描く（#75）。それまでは逆を向いていた。パネルの地が `--surface` なので選択された行は `--bg` で浮き、端末ヘッダの地が `--bg` なので選択されたタブは `--surface` で沈んでいた。
+
 ### 参加者パネル
 
 会話面の右に常時出る列を持つ。参加者のリストと、その下にセッションの裏の値（部屋ソケット / セッションの生死と終了コード / 接続方法 / 起動コマンド / 作業ディレクトリ / 開始時刻 / ウィンドウ）を並べる。

src/styles.css

@@ -1,5 +1,16 @@
 :root {
   color-scheme: light dark;
+  /* Two grounds, and which one a thing carries is decided by whether it is a
+     surface or a control. `--bg` is the window's own ground, and it is also
+     what every control is drawn on: input, select, textarea, button, the
+     selected terminal tab. `--surface` is a panel's tint — the participant
+     list's ground, and the lift for something sitting on a ground that is
+     already `--bg`.
+
+     A control is told from what it sits on by its `--line` border, not by a
+     fill of its own (Master, 実機, 2026-08-24). A fill would make the same
+     button look different on each panel it appears on; a border makes it one
+     shape wherever it is. */
   --bg: #ffffff;
   --fg: #1b1b1f;
   --line: #d8d8de;
@@ -89,7 +100,7 @@ body {
 #titlebar button {
   font: inherit;
   color: var(--fg);
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 4px;
   padding: 0.2rem 0.4rem;
@@ -238,7 +249,7 @@ body {
 #composer select {
   font: inherit;
   color: var(--fg);
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 0.5rem 0.4rem;
@@ -249,7 +260,7 @@ body {
   flex: 1;
   font: inherit;
   color: var(--fg);
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 0.5rem;
@@ -259,7 +270,7 @@ body {
 #composer button {
   font: inherit;
   color: var(--fg);
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 0.5rem 1rem;
@@ -392,13 +403,19 @@ body {
   cursor: pointer;
 }
 
-/* Lifted off the window's ground, the way the selected row in the panel is
-   lifted off the panel's (`#participants .member.shown .pick`). The two
-   selections are one selection, so they are marked the same way; the grounds are
-   the other way round here, so the tint that lifts is the other one. */
+/* The mark the selected row in the panel carries, drawn the same way here
+   (`#participants .member.shown .pick`): the window's ground with a `--line`
+   border around it. The two selections are one selection, and they are now one
+   shape — the tab was tinted while the row was lifted, which is the same
+   selection drawn with opposite hands (Master, 実機, 2026-08-24).
+
+   The tab and the header under it are the same colour now, so the ground says
+   nothing about which tab is open. What says it is the border arriving where
+   an unselected tab holds `transparent`, and the name turning from `--muted`
+   to the participant's own colour. */
 #terminal-tabs .tab.shown {
   color: var(--speaker, var(--fg));
-  background: var(--surface);
+  background: var(--bg);
   border-color: var(--line);
 }
 
@@ -429,15 +446,16 @@ body {
   background: var(--surface);
 }
 
-/* Lifted off the window's ground, the way the title bar's controls are lifted
-   off the page's. The pane is `--bg` throughout now, so a control drawn in `--bg`
-   would be an outline with nothing inside it. */
+/* The window's ground, the way the title bar's controls carry the page's. It is
+   the same ground the header itself has, which leaves the border to say where
+   the control is — and that is what a control is everywhere in this app (see
+   `--bg` at the top of this file). */
 #terminal-head select,
 #terminal-head button {
   font: inherit;
   flex: none;
   color: var(--fg);
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 4px;
   padding: 0.1rem 0.25rem;
@@ -631,7 +649,13 @@ body {
    advance width is the font's, and the font is whichever one the host resolves
    the mark in; a box that took its width from the glyph would be a different
    box on a different machine. The box is fixed and the mark is centred in it,
-   so the three read as one column of the same three shapes anywhere. */
+   so the three read as one column of the same three shapes anywhere.
+
+   The ground is the window's, written out rather than left at `none`. `none`
+   let the panel's tint through, which put the only three controls in the panel
+   on a ground no other control in the app sits on (Master, 実機, 2026-08-24).
+   The panel keeps its own tint; what is aligned is the controls in it, not the
+   panel. */
 #participants .member .edit,
 #participants .member .start,
 #participants .member .end {
@@ -643,7 +667,7 @@ body {
   font: inherit;
   font-size: 0.8rem;
   line-height: 1;
-  background: none;
+  background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 4px;
   padding: 0;
@@ -828,7 +852,7 @@ body {
   font: inherit;
   width: 100%;
   color: var(--fg);
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 4px;
   padding: 0.3rem 0.45rem;
@@ -892,7 +916,7 @@ body {
 #account-dialog .actions button {
   font: inherit;
   color: var(--fg);
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 0.35rem 0.9rem;
@@ -975,7 +999,7 @@ body {
 #end-dialog .actions button {
   font: inherit;
   color: var(--fg);
-  background: var(--surface);
+  background: var(--bg);
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 0.35rem 0.9rem;