/* テーマ変数と画面の骨組み。残りは css/*.css に領域ごとに分けてある（#872）。
   **index.html の <link> の順序を入れ替えないこと。** 分ける前の app.css の並びそのもので、
   それがカスケード順になっている（ダークモードの上書きは dark_overrides.css が後ろから効かせる）。 */

/* Theme variables */
body[data-theme="light"] {
  --bg: #f0f2f5;
  --panel: rgba(255,255,255,.85);
  --panel-solid: #fff;
  --stroke: rgba(0,0,0,.10);
  --text: rgba(0,0,0,.88);
  --text-secondary: rgba(0,0,0,.60);
  /* **`.40` は本文として読めない。** 白（`--panel-solid`）の上で 2.85:1、
     `--bg` の上で 2.81:1 と、WCAG AA の 4.5:1 に遠く届いていなかった（実測）。
     `.55` なら 4.76:1 / 4.63:1。`--text-secondary`（5.74:1）との差は残るので
     「控えめ」という役割は保てる。ダーク側も同じ理由で上げてある。 */
  --text-muted: rgba(0,0,0,.55);
  /* 4つとも文字色に使われるので、白と `--chip-bg` の上で 4.5:1 を満たす濃さにしてある（#957）。 */
  --pri: #2a63d1;
  --pri2: #6b4fdd;
  --ok: #0b7a5f;
  --warn: #a84b08;
  --danger: #c42347;
  --chip-bg: rgba(0,0,0,.05);
  --chip-bg-hover: rgba(0,0,0,.09);
  --input-bg: #fff;
  --input-ring: rgba(59,122,237,.25);
  --card-hover: rgba(59,122,237,.04);
}
body[data-theme="dark"] {
  --bg: #0b1220;
  /* **ダークの面は不透過。** 以前は `rgba(255,255,255,.07)`（白の重ね）で、
     後ろの放射グラデ（`rgba(79,140,255,.30)` ほか）を透かしていた。そのため
     - 画面の位置でカードの色が変わる（上端 `rgb(36,47,70)` / 下端 `rgb(28,35,48)`）
     - 白の重ねなので、明るい所ほど白っぽく見える（利用者の指摘）
     - 不透過の埋め込み（Google のウィジェット `#1f1f1f`）と合わせられない
     `--panel-solid` と同値にして、面を1つの色に固定する。
     **ライトは触っていない**（`rgba(255,255,255,.85)` のまま）。
     `backdrop-filter` はダークでは効かなくなるが、ライトのために残してある。 */
  --panel: #151d2e;
  --panel-solid: #151d2e;
  --stroke: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92);
  --text-secondary: rgba(255,255,255,.68);
  /* `.42` は `--panel` の上で 4.02:1、背景のグラデが明るい上端では 3.68:1。
     `.55` で 5.92:1 / 5.19:1（ライト側と同じ理由）。 */
  --text-muted: rgba(255,255,255,.55);
  --pri: #4f8cff;
  --pri2: #7a5cff;
  --ok: #2bd4a4;
  --warn: #ffa050;
  --danger: #ff5c7c;
  --chip-bg: rgba(255,255,255,.07);
  --chip-bg-hover: rgba(255,255,255,.12);
  --input-bg: rgba(255,255,255,.06);
  --input-ring: rgba(79,140,255,.35);
  --card-hover: rgba(79,140,255,.08);
}
/* 色と意味の対応表（#957）。チップ・要約チップ・バッジ・実行状態はここの組だけを使う。
     ok       緑  完了・確認済み・一致
     danger   赤  失敗・中断・誤り・要修正・リスク高
     warn     橙  待機・注意・要確認・一部誤り・リスク中/低・指摘の件数
     info     青  進行中・校正の種別・参照先
     neutral  灰  未確認（#760: 警告色にしない）・確認したいケース・参考情報・ただのラベル
     category 紫  分類（出所・ジャンルの観点・用語の種別）。良し悪しを言わない
   `-fg` は `-bg` を `--panel` と `--chip-bg` に重ねた上で 4.5:1 以上。
   **色だけで意味を伝えない**（チップには必ず文言がある）。 */
body[data-theme="light"] {
  --tone-ok-fg: #0b6b53;       --tone-ok-bg: rgba(31,170,134,.16);
  --tone-danger-fg: #b3203e;   --tone-danger-bg: rgba(224,64,96,.12);
  --tone-warn-fg: #9a4a06;     --tone-warn-bg: rgba(234,88,12,.12);
  --tone-info-fg: #2456b8;     --tone-info-bg: rgba(59,122,237,.12);
  --tone-neutral-fg: #4b5563;  --tone-neutral-bg: rgba(107,114,128,.12);
  --tone-category-fg: #6d28d9; --tone-category-bg: rgba(139,92,246,.12);
  --pri-fill: var(--pri); --pri2-fill: var(--pri2); --danger-fill: var(--danger);
}
body[data-theme="dark"] {
  --tone-ok-fg: #5ee8c0;       --tone-ok-bg: rgba(43,212,164,.16);
  --tone-danger-fg: #ff9aad;   --tone-danger-bg: rgba(255,92,124,.18);
  --tone-warn-fg: #ffb370;     --tone-warn-bg: rgba(255,160,80,.16);
  --tone-info-fg: #9cc3ff;     --tone-info-bg: rgba(79,140,255,.20);
  --tone-neutral-fg: #b4bcc8;  --tone-neutral-bg: rgba(156,163,175,.16);
  --tone-category-fg: #c4b5fd; --tone-category-bg: rgba(167,139,250,.20);
  /* 白抜き文字の塗り。ダークの `--pri` / `--danger` は暗い面の文字色として明るくしてあり、
     白を載せると 3.2:1 しか出ない。 */
  --pri-fill: #356ad6; --pri2-fill: #6546e0; --danger-fill: #c9345a;
}
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: var(--text);
  margin: 0;
  transition: background .3s, color .3s;
}
body[data-theme="light"] {
  background:
    radial-gradient(1100px 560px at 18% 10%, rgba(59,122,237,.10), transparent 55%),
    radial-gradient(900px 520px at 82% 16%, rgba(107,79,221,.08), transparent 60%),
    radial-gradient(760px 420px at 75% 92%, rgba(31,170,134,.06), transparent 60%),
    linear-gradient(180deg, #f5f7fa 0%, #e8ecf2 42%, #f0f2f5 100%);
}
body[data-theme="dark"] {
  background:
    radial-gradient(1100px 560px at 18% 10%, rgba(79,140,255,.30), transparent 55%),
    radial-gradient(900px 520px at 82% 16%, rgba(122,92,255,.22), transparent 60%),
    radial-gradient(760px 420px at 75% 92%, rgba(43,212,164,.14), transparent 60%),
    linear-gradient(180deg, #070b14 0%, #0b1220 42%, #060a13 100%);
}

/* パネル */
.g-panel {
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--stroke);
}
body[data-theme="dark"] .g-panel { box-shadow: 0 10px 30px rgba(0,0,0,.28); }
body[data-theme="light"] .g-panel { box-shadow: 0 10px 30px rgba(0,0,0,.06); }

/* 人物アイコンボタン */
.user-avatar-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--chip-bg);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s; flex-shrink: 0;
}
.user-avatar-btn svg { width: 16px; height: 16px; }
.user-avatar-btn:hover { background: var(--chip-bg-hover); color: var(--text-secondary); }

/* テーマトグル（小） */
.theme-toggle-small {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: var(--chip-bg);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s; flex-shrink: 0;
  font-size: 14px;
}
.theme-toggle-small:hover { background: var(--chip-bg-hover); }

/* ===== サイドバー ===== */
.sidebar {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .2s ease;
}
.sidebar.collapsed {
  width: 48px;
  padding: 12px 4px;
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 16px;
  min-height: 36px;
}
.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 6px 0 16px;
}
.sidebar-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: opacity .15s;
}
.sidebar.collapsed .sidebar-title {
  opacity: 0;
  width: 0;
}
.sidebar-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.sidebar-toggle:hover {
  background: var(--chip-bg-hover);
  color: var(--text);
}
.sidebar-toggle svg {
  width: 18px;
  height: 18px;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar.collapsed .sidebar-item {
  padding: 10px 0;
  justify-content: center;
  gap: 0;
}
.sidebar-item:hover {
  background: var(--chip-bg-hover);
  color: var(--text);
}
.sidebar-item.active {
  background: var(--chip-bg);
  color: var(--text);
  font-weight: 600;
}
.sidebar-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-item .sidebar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .15s, width .15s;
}
.sidebar.collapsed .sidebar-item .sidebar-label {
  opacity: 0;
  width: 0;
}
.sidebar-spacer {
  flex: 1;
}
.sidebar-footer {
  border-top: 1px solid var(--stroke);
  padding-top: 8px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}