/* =========================================================
   共通の土台（テーマ変数・素の部品・上部の帯・メニュー・モーダル・帯）

   ★ 出どころは Claude Note Web版の css/app.css。
     テーマの配色と、js/{auth,theme,app-version,common-ui}.js が前提にしている
     クラス（.topbar / .menu-wrap / .dropdown / .modal / .toast / .auth-*）だけを
     抜き出して持ち込んでいる。マップ・メモ固有の規則は入れていない。

     ここは「向こうと同じ見た目・同じ操作感」を保つための写しなので、
     配色や部品の作法を変えたくなったら向こうと合わせて直すこと。
   ========================================================= */

/* =========================================================
   Claude Note Web - マップ機能

   配色は 6 つのテーマ（ダーク 4 / ライト 2）を CSS 変数で切り替える。
   html[data-theme="..."] が唯一の切り替えスイッチで、
   UI の枠だけでなくキャンバス・ノードカード・接続線まで一緒に変わる。
   テーマの一覧と、JS でしか使えない色（世代別カラー）は js/theme.js。
   ========================================================= */

/* ---------- テーマ非依存の形（角丸・余白など） ---------- */
:root {
  --radius: 8px;
  /* チェック済みの色。明暗どちらのテーマでも読めるようテーマ非依存にしている */
  --ok: #3fa66a;
}

/* ==================== ダーク: ミッドナイト（既定） ==================== */
:root,
html[data-theme="midnight"] {
  --bg: #14161a;
  --panel: #1b1e23;
  --panel-2: #23272e;
  --border: #333942;
  --text: #e4e7ea;
  --text-dim: #98a1ad;
  --accent: #6ea8ff;
  --accent-soft: rgba(110, 168, 255, 0.18);
  --canvas-bg: #101216;
  --grid: rgba(255, 255, 255, 0.045);
  --grid-strong: rgba(255, 255, 255, 0.085);
  --node-bg: #232830;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #3b3524;
  --sticky-note-border: #554d33;
  --code-bg: rgba(255, 255, 255, .09);
  --node-border: #3b424c;
  --node-radius: 10px;
  --node-border-width: 1.5px;
  --node-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  --edge: #7d8894;
  --branch: #6d7c8c;
  --selection: #6ea8ff;
  --danger: #ff6b6b;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  --anchor-ring: #14161a;
  --resizer-bg: #0c0e11;
  --group: #9a7cf0;
  --group-fill: rgba(154, 124, 240, 0.08);
  --group-fill-active: rgba(154, 124, 240, 0.15);
  --hit: #ffb020;
  --ctrl: #ffb020;
  --ctrl-ring: #14161a;
  --link: #6ec8ff;
  --on-accent: #10131a;
}

/* ==================== ダーク: ディープブルー ==================== */
html[data-theme="ocean"] {
  --bg: #0a1522;
  --panel: #0f1e30;
  --panel-2: #16293f;
  --border: #23405c;
  --text: #dbe9f7;
  --text-dim: #8ba6c4;
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.18);
  --canvas-bg: #071019;
  --grid: rgba(120, 190, 255, 0.05);
  --grid-strong: rgba(120, 190, 255, 0.1);
  --node-bg: #12283d;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #1d3550;
  --sticky-note-border: #2f4d6e;
  --code-bg: rgba(255, 255, 255, .09);
  --node-border: #27486a;
  --node-radius: 12px;
  --node-border-width: 1.5px;
  --node-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  --edge: #5f89b3;
  --branch: #4d7ba8;
  --selection: #38bdf8;
  --danger: #ff7a85;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  --anchor-ring: #071019;
  --resizer-bg: #040a10;
  --group: #7dd3fc;
  --group-fill: rgba(125, 211, 252, 0.07);
  --group-fill-active: rgba(125, 211, 252, 0.14);
  --hit: #ffc247;
  --ctrl: #ffc247;
  --ctrl-ring: #071019;
  --link: #7dd3fc;
  --on-accent: #05131f;
}

/* ==================== ダーク: フォレスト ==================== */
html[data-theme="forest"] {
  --bg: #101613;
  --panel: #16201a;
  --panel-2: #1d2a22;
  --border: #2c3d32;
  --text: #e2ece4;
  --text-dim: #93a89a;
  --accent: #57c98a;
  --accent-soft: rgba(87, 201, 138, 0.18);
  --canvas-bg: #0c110e;
  --grid: rgba(150, 220, 175, 0.045);
  --grid-strong: rgba(150, 220, 175, 0.09);
  --node-bg: #1a261e;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #26301f;
  --sticky-note-border: #3d4a33;
  --code-bg: rgba(255, 255, 255, .09);
  --node-border: #31463a;
  --node-radius: 14px;
  --node-border-width: 1.5px;
  --node-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  --edge: #6f8a78;
  --branch: #5d7d68;
  --selection: #57c98a;
  --danger: #f4736b;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
  --anchor-ring: #0c110e;
  --resizer-bg: #070c09;
  --group: #b8a04e;
  --group-fill: rgba(184, 160, 78, 0.08);
  --group-fill-active: rgba(184, 160, 78, 0.16);
  --hit: #e5b04a;
  --ctrl: #e5b04a;
  --ctrl-ring: #0c110e;
  --link: #7fd6b0;
  --on-accent: #08160f;
}

/* ==================== ダーク: 高コントラスト ==================== */
html[data-theme="contrast"] {
  --bg: #000000;
  --panel: #0a0a0a;
  --panel-2: #171717;
  --border: #4f4f4f;
  --text: #ffffff;
  --text-dim: #bcbcbc;
  --accent: #ffd400;
  --accent-soft: rgba(255, 212, 0, 0.22);
  --canvas-bg: #000000;
  --grid: rgba(255, 255, 255, 0.09);
  --grid-strong: rgba(255, 255, 255, 0.17);
  --node-bg: #0d0d0d;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #1c1600;
  --sticky-note-border: #6b5a00;
  --code-bg: rgba(255, 255, 255, .14);
  --node-border: #7a7a7a;
  --node-radius: 4px;
  --node-border-width: 2px;
  --node-shadow: none;
  --edge: #d2d2d2;
  --branch: #d2d2d2;
  --selection: #ffd400;
  --danger: #ff5252;
  --shadow: 0 2px 14px rgba(255, 255, 255, 0.12);
  --anchor-ring: #000000;
  --resizer-bg: #000000;
  --group: #00e5ff;
  --group-fill: rgba(0, 229, 255, 0.1);
  --group-fill-active: rgba(0, 229, 255, 0.2);
  --hit: #ff8c00;
  --ctrl: #ff8c00;
  --ctrl-ring: #000000;
  --link: #66e0ff;
  --on-accent: #000000;
}

/* ==================== ライト: 既定 ==================== */
html[data-theme="light"] {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #f0f1f4;
  --border: #d8dbe0;
  --text: #1f2328;
  --text-dim: #6a737d;
  --accent: #2f6feb;
  --accent-soft: rgba(47, 111, 235, 0.14);
  --canvas-bg: #fafbfc;
  --grid: rgba(0, 0, 0, 0.055);
  --grid-strong: rgba(0, 0, 0, 0.09);
  --node-bg: #ffffff;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #fdf1b6;
  --sticky-note-border: #e5d582;
  --code-bg: rgba(0, 0, 0, .07);
  --node-border: #c9ced6;
  --node-radius: 8px;
  --node-border-width: 1.5px;
  --node-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  --edge: #7c8794;
  --branch: #8b96a3;
  --selection: #2f6feb;
  --danger: #d13438;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  --anchor-ring: #ffffff;
  --resizer-bg: #ffffff;
  --group: #9a7cf0;
  --group-fill: rgba(154, 124, 240, 0.07);
  --group-fill-active: rgba(154, 124, 240, 0.13);
  --hit: #ffb020;
  --ctrl: #ffb020;
  --ctrl-ring: #ffffff;
  --link: #0a84c8;
  --on-accent: #ffffff;
}

/* ==================== ライト: セピア ==================== */
html[data-theme="sepia"] {
  --bg: #efe6d5;
  --panel: #f8f2e6;
  --panel-2: #eae0cd;
  --border: #d3c4a8;
  --text: #3b3226;
  --text-dim: #7d6f5b;
  --accent: #a9683a;
  --accent-soft: rgba(169, 104, 58, 0.16);
  --canvas-bg: #f4ecdb;
  --grid: rgba(90, 70, 40, 0.07);
  --grid-strong: rgba(90, 70, 40, 0.13);
  --node-bg: #fdf8ee;
  /* 付箋（大きなメモの貼り紙）の下地・枠・コードの地色 */
  --sticky-note-bg: #f7e6b0;
  --sticky-note-border: #ddc98a;
  --code-bg: rgba(0, 0, 0, .07);
  --node-border: #cdbb9c;
  --node-radius: 10px;
  --node-border-width: 1.5px;
  --node-shadow: 0 1px 3px rgba(90, 70, 40, 0.2);
  --edge: #99866a;
  --branch: #a4906f;
  --selection: #a9683a;
  --danger: #b1443c;
  --shadow: 0 2px 12px rgba(90, 70, 40, 0.22);
  --anchor-ring: #fdf8ee;
  --resizer-bg: #fdf8ee;
  --group: #8a6a9e;
  --group-fill: rgba(138, 106, 158, 0.09);
  --group-fill-active: rgba(138, 106, 158, 0.16);
  --hit: #c98a1e;
  --ctrl: #c98a1e;
  --ctrl-ring: #fdf8ee;
  --link: #1a6f9e;
  --on-accent: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  /* ブラウザ自前の「引っ張って更新」「行き過ぎたときの跳ね返り」を止める。
     とくに **iPad の Chrome** はこれらのジェスチャを持っていて、指が触れた拍子に
     ポインタを持っていかれる。持っていかれると走っている pointer が
     `pointercancel` になり、**手書きの線がそこで途切れる**（2026-08-14 に発生）。
     キャンバスの `touch-action: none` だけでは、この経路は塞げない */
  overscroll-behavior: none;
}

body {
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", Meiryo, system-ui, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
}

button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
button.primary:hover { filter: brightness(1.1); background: var(--accent); }
button.danger { color: var(--danger); }
button.icon-btn { padding: 5px 9px; min-width: 30px; }
button.link-btn { background: none; border: none; color: var(--text-dim); padding: 4px 6px; }
button.link-btn:hover { color: var(--accent); background: none; }
button.has-caret::after { content: " ▾"; opacity: .6; }

input[type="text"], input[type="search"], input[type="number"], select, textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type="color"] {
  width: 38px; height: 28px; padding: 1px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--panel); cursor: pointer;
}

/* ==================== 画面最上部のメニューバー ====================

   画面をまたぐ移動リンクとテーマ切り替えを、一番上の帯にまとめる。
   サイドバーの見出し行に詰め込むと、幅を狭めたときに右側の 💾 や 🌙 が
   押し出されて見えなくなるため、ここへ逃がしている。
   使う側の <body> に class="has-topbar" を付けること。
   ================================================================= */

/* body を縦並びにして、帯の下に本体（#app / #page）を敷き詰める。
   body は overflow:hidden なので、帯は常に画面の一番上に留まる */
body.has-topbar { display: flex; flex-direction: column; }
body.has-topbar > #app,
body.has-topbar > #page { flex: 1 1 auto; min-height: 0; height: auto; }

/* ==================== 単体表示（マップだけを全画面で出す） ====================

   ⛶ ボタン（または Esc で戻る）で body に .map-solo を付ける。
   隠すのは「別の場所へ行くための部品」だけ＝メニューバーとマップ一覧で、
   ツールバー・ステータスバーは残す（単体表示のまま編集を続けられるようにするため）。
   スマホは画面が狭く、一覧が常に幅を食うのでこの状態が既定に近い使い方になる。
   ========================================================================= */
body.map-solo > .topbar { display: none; }
body.map-solo #sidebar { display: none; }
/* アウトライン・AI パネルは自分で閉じられるので触らない（開いたまま単体表示にできる） */

/* 単体表示に入ると ⛶ が「戻る」の意味になる。押し間違えないよう色を変える */
body.map-solo #btn-solo { background: var(--accent); color: #fff; }

.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 50;
}
.topbar .brand {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 14px; font-weight: 600; white-space: nowrap; flex: 0 0 auto;
}
.topbar .brand .page-name { font-size: 12px; font-weight: 400; color: var(--text-dim); }

/* ==================== 共有ページ（/share/<札>） ====================
   ログインしていない相手が見る唯一の画面。編集画面と同じ CSS を使うが、
   「触っても変わらない画面だ」と最初に分かるように印を出す。
   ================================================================= */
.share-badge {
  flex: 0 0 auto;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent);
}
/* 共有ページのマップ名は帯の主役なので、他の画面の page-name より強く出す */
.share-page .topbar .brand .page-name {
  font-size: 14px; font-weight: 600; color: var(--text);
}
/* 道具は右端へ寄せる（この画面には移動リンクの列が無い） */
.share-page .topbar-tools { margin-left: auto; }

/* 移動リンクの並び。幅が足りないときはここだけが横スクロールし、
   右端の道具（テーマなど）を画面外へ押し出さない */
.topbar-nav {
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar { height: 0; }

.topbar .nav-link {
  color: var(--text-dim); text-decoration: none; font-size: 12px;
  padding: 4px 9px; border-radius: 6px; border: 1px solid transparent;
  white-space: nowrap; flex: 0 0 auto;
}
.topbar .nav-link:hover {
  color: var(--accent); border-color: var(--border); background: var(--panel-2);
}
.topbar .nav-link.current {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
}

.topbar-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* 右端に置くメニューは画面外へはみ出さないよう右揃えで開く */
.topbar-tools .dropdown { left: auto; right: 0; }

/* 幅が狭いときは文字を畳んで絵文字だけにする */
@media (max-width: 900px) {
  .topbar .nav-link .nav-text { display: none; }
  .topbar .nav-link { padding: 4px 7px; }
}

.menu-wrap { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 4px; min-width: 170px;
  display: flex; flex-direction: column;
}
.dropdown button { background: none; border: none; text-align: left; border-radius: 5px; }
.dropdown button:hover { background: var(--accent-soft); }
.dropdown .dd-title {
  font-size: 11px; color: var(--text-dim); padding: 5px 9px 3px;
}
.dropdown .dd-divider { height: 1px; background: var(--border); margin: 4px 2px; }
.dropdown .dd-hint {
  font-size: 11px; color: var(--text-dim); padding: 4px 9px;
  line-height: 1.6; white-space: pre-line;
}
/* 項目名が長いメニュー（思考フレーム） */
.dropdown.wide { min-width: 270px; }

/* チェック付きメニュー項目（マインドマップの ON/OFF） */
.dropdown button.check::before {
  content: "✓"; display: inline-block; width: 14px; opacity: 0;
}
.dropdown button.check.on::before { opacity: 1; color: var(--accent); }

/* 押し込み表示のツールバーボタン */
button.toggled { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }

/* ==================== テーマ選択メニュー ==================== */

#menu-theme { min-width: 200px; left: auto; right: 0; }
.theme-item {
  display: flex !important; align-items: center; gap: 9px;
  padding: 6px 8px !important;
}
.theme-item.on { background: var(--accent-soft); }
.theme-item .tswatch {
  flex: 0 0 auto; width: 34px; height: 18px; border-radius: 4px;
  border: 1px solid var(--border); overflow: hidden; display: flex;
}
.theme-item .tswatch i { flex: 1; }
.theme-item .tname { flex: 1; }
.theme-item .tkind { font-size: 10px; color: var(--text-dim); }

#findbar {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--panel-2); border-bottom: 1px solid var(--border);
}
#find-count { font-size: 11px; color: var(--text-dim); min-width: 70px; }

/* ==================== モーダル ==================== */

#modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, .42);
  display: flex; align-items: center; justify-content: center;
}
#modal {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
  min-width: 340px; max-width: min(760px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column;
}
.modal-head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.modal-body { padding: 14px 16px; overflow-y: auto; }
.modal-foot {
  padding: 10px 16px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}

.form-grid { display: grid; grid-template-columns: auto 1fr; gap: 9px 12px; align-items: center; }
.form-grid label { color: var(--text-dim); white-space: nowrap; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid textarea { width: 100%; min-height: 110px; resize: vertical; }
.form-grid input[type="text"], .form-grid input[type="search"], .form-grid select { width: 100%; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hint { font-size: 11px; color: var(--text-dim); }

.session-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.session-list div { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.session-list div:last-child { border-bottom: none; }
.session-list div:hover { background: var(--accent-soft); }
.session-list .sub { font-size: 11px; color: var(--text-dim); }

/* ==================== トースト ==================== */

#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 400; padding: 9px 18px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow);
}
#toast.error { border-color: var(--danger); color: var(--danger); }

/* ==================== 📥 バージョンアップ ====================

   新しいビルドが配信されたことを知らせる帯と、その確認ダイアログ。
   配線は js/app-version.js（全ページが最後に読む）。
   全画面が app.css を読むので、ここに置けば .topbar 系（マップ・メモ・会話）と
   .page-head 系（横断検索・しおり・ゴミ箱・バックアップ）の両方に効く。
   ============================================================ */

/* 帯を出している間だけ body を縦フレックスにして、本体を帯のぶん縮める。
   body は overflow:hidden で #app / #page は height:100% なので、
   .topbar と同じ方式にしないと下端がはみ出して切れる */
body.cn-has-update-banner { display: flex; flex-direction: column; }
body.cn-has-update-banner > #app,
body.cn-has-update-banner > #page { flex: 1 1 auto; min-height: 0; height: auto; }

.cn-update-banner {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; padding: 6px 12px;
  background: var(--accent-soft);
  border-bottom: 2px solid var(--accent);
  font-size: 12px;
  z-index: 60;
}
.cn-update-banner .cn-update-msg { font-weight: 600; white-space: nowrap; }
.cn-update-banner .cn-update-when { color: var(--text-dim); white-space: nowrap; }
.cn-update-banner button { font-size: 12px; }
.cn-update-banner button.cn-update-later { background: none; color: var(--text-dim); }

/* 📥 ボタン。更新があるときだけ右肩に NEW を出す */
.cn-update-btn { position: relative; overflow: visible; }
.cn-update-btn.has-update { border-color: var(--accent); }
.cn-update-badge {
  position: absolute; top: -7px; right: -9px;
  padding: 0 4px; border-radius: 7px;
  background: var(--accent); color: var(--on-accent);
  font-size: 9px; font-weight: 700; line-height: 14px;
  pointer-events: none;
}

/* ダイアログ。各画面の #modal は画面ごとの状態に結びついているため、
   どのページからでも同じように出せるよう専用の器を持つ */
.cn-update-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, .42);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cn-update-modal {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow);
  width: min(520px, 100%); max-height: 88vh;
  display: flex; flex-direction: column;
}
.cn-update-head {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-weight: 600; color: var(--accent);
}
.cn-update-body { padding: 14px 16px; overflow-y: auto; line-height: 1.7; }
.cn-update-lead { margin: 0 0 10px; }
.cn-update-table { border-collapse: collapse; font-size: 12px; margin-bottom: 12px; }
.cn-update-table th {
  text-align: left; font-weight: 400; color: var(--text-dim);
  padding: 2px 16px 2px 0; white-space: nowrap;
}
.cn-update-table td { padding: 2px 0; }
.cn-update-table td.is-new { font-weight: 700; color: var(--accent); }
.cn-update-note {
  padding: 9px 11px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.6; color: var(--text-dim);
}
.cn-update-note.warn {
  border-color: var(--danger); color: var(--danger); background: none;
}
.cn-update-foot {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--border);
}

/* ==================== 👤 利用者メニューとログイン切れの帯（js/auth.js） ====================

   全画面が読む js/auth.js が動的に挿すので、CSS も全画面が読む app.css に置く。
   ログイン画面そのものの見た目は css/login.css。
   ==================================================================== */

/* ---------- ログインが切れたときの帯 ---------- */

/* 帯は body の先頭に入る。上部メニューバーのある画面は body が縦フレックスなので
   そのまま最上段に積まれ、無い画面でも通常フローの先頭に出る */
.auth-notice {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--danger) 14%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--text);
  font-size: 12.5px;
}
.auth-notice-text { flex: 1 1 auto; min-width: 0; }
.auth-notice-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 13px; line-height: 1; padding: 5px 7px; border-radius: 5px; cursor: pointer;
}
.auth-notice-close:hover { color: var(--text); background: var(--panel-2); }

/* ---------- 👤 メニュー ---------- */

.auth-menu { min-width: 210px; left: auto; right: 0; }
.auth-menu-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 9px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.auth-menu-head strong { font-size: 12.5px; }
.auth-menu-dim { font-size: 10.5px; color: var(--text-dim); }

/* a と button が混ざるので、見た目をここで揃える */
.auth-menu-item {
  display: block; text-align: left;
  padding: 6px 9px; border-radius: 5px;
  font-size: 12.5px; color: var(--text); text-decoration: none;
  background: none; border: none; cursor: pointer;
}
.auth-menu-item:hover { background: var(--accent-soft); color: var(--text); }

/* ==================== 狭い画面（スマホ・小さいタブレット） ====================

   境目は 760px。**js/mobile.js が同じ値を持っているので片方だけ変えないこと**
   （CSS が並べ替えを、JS が開け閉め = body.nav-open / body.tools-open を持つ）。

   考え方:
   - 幅を食う常設の柱（マップ一覧・アウトライン・AI）は「重ねる引き出し」にする
   - ツールバーは既定でよく使う数個だけ出し、残りは ⋯ で開く
     （20 個超が折り返すと縦を 4 段食い、キャンバスが残らない）
   - 引き出しメニュー・右クリックメニューは画面下の帯に置く
     （ボタンの真下だと画面外へはみ出し、指も届きにくい）
   - 指で押す大きさは幅ではなく入力装置（pointer: coarse）で決める。
     マウスの繋がった小さい窓まで太らせない
   ========================================================================= */

/* ---------- 指で押す前提の大きさ ---------- */
@media (pointer: coarse) {
  button { min-height: 34px; }
  button.icon-btn { min-width: 36px; }
  .dropdown button { padding: 9px 10px; }
  .ctxmenu .item { padding: 10px 11px; }
  .pal-btn { min-width: 34px; height: 34px; font-size: 16px; }
  .pal-chip { padding: 6px 11px; }
  .pal-sw { width: 26px; height: 26px; }
  /* 一覧の行は長押しでメニューを出す（js/mobile.js）。押している間に
     iOS が文字を選び始めたり「コピー」の吹き出しを出すと取り合いになる */
  .map-list li, .outline-row {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .map-list li { padding: 10px 9px; }
  .outline-row { padding: 7px 6px 7px 0; }
  .oc-check { width: 18px; height: 18px; flex: 0 0 18px; line-height: 15px; font-size: 12px; }
  .conv-hit { padding: 8px 7px; }
}


/* ★ これが無いと画面が真っ暗になって何も押せなくなる（2026-08-16 に本番で踏んだ）。
   #modal-backdrop / .dropdown / #toast などは display:flex・display:block を持つので、
   HTML の hidden 属性（＝既定の display:none）が負ける。結果、モーダルの覆い
   （黒 42%・inset:0・z-index:300）が最初から画面全体に居座り、クリックを全部吸う。
   写し元の app.css も同じ理由で末尾にこの1行を置いている。**消さないこと。** */
[hidden] { display: none !important; }