/* 187: codex のデザインを正とした配色・字体（見た目だけの作り替え・機能と中身は不変）。
   字体は Inter → Noto Sans JP → Hiragino → 端末の sans（外部の読み込みはしない）。
   明るい・暗いの両方。cyan を軸にした色。--t-* の意味（赤=障害…）は変えない。 */
:root {
  color-scheme: light dark;
  --sidebar: 248px;
  /* 明（paper）*/
  --bg: #eef2f1;
  --fg: #122733;
  --muted: #5d7280;
  --card-bg: #ffffff;
  --panel-2: #f6f9f8;
  --border: #dde4e4;
  --accent: #0c8d7c;
  --accent-fg: #ffffff;
  --accent-2: #0c8d7c;
  --ok: #15803d;
  --warn: #b45309;
  --done: #6366f1;
  --unknown: #9ca3af;
  --code-bg: #eef2f3;
  --brand-cyan: #0c8d7c;
  --brand-blue: #2f6fd0;
  --brand-gold: #b07d1f;
  --brand-green: #15803d;
  --brand-orange: #c2561f;
}

/* 171: 色は3通り。cookie が無ければ端末の設定（auto）、data-theme があればそれを優先。JavaScript は使わない */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07131c;
    --fg: #edf5f7;
    --muted: #8a9faa;
    --card-bg: #0b1b25;
    --panel-2: #0d2029;
    --border: #1d3340;
    --accent: #40e0c1;
    --accent-fg: #06221d;
    --accent-2: #45e3c4;
    --code-bg: #10242e;
    --ok: #62d7a0;
    --warn: #e8c169;
    --brand-cyan: #40e0c1;
    --brand-blue: #4ea3ff;
    --brand-gold: #e8c169;
    --brand-green: #62d7a0;
    --brand-orange: #ff916d;
    --shadow: 0 1px 3px rgba(0,0,0,0.34);
  }
}
:root[data-theme="dark"] {
    --bg: #07131c;
    --fg: #edf5f7;
    --muted: #8a9faa;
    --card-bg: #0b1b25;
    --panel-2: #0d2029;
    --border: #1d3340;
    --accent: #40e0c1;
    --accent-fg: #06221d;
    --accent-2: #45e3c4;
    --code-bg: #10242e;
    --ok: #62d7a0;
    --warn: #e8c169;
    --brand-cyan: #40e0c1;
    --brand-blue: #4ea3ff;
    --brand-gold: #e8c169;
    --brand-green: #62d7a0;
    --brand-orange: #ff916d;
    --shadow: 0 1px 3px rgba(0,0,0,0.34);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", "Noto Sans JP", "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* === 187: 外枠（サイドナビ＋トップバー・codex のデザイン）=============== */
.nav-toggle { position: fixed; opacity: 0; pointer-events: none; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 20;
  background: var(--panel-2); border-right: 1px solid var(--border);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 4px;
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 24px; text-decoration: none; color: var(--fg); }
.brand-mark { display: grid; grid-template-columns: repeat(3, 7px); gap: 3px; align-items: end; height: 25px; }
.brand-mark i { background: var(--brand-cyan); border-radius: 1px; }
.brand-mark i:nth-child(1) { height: 12px; }
.brand-mark i:nth-child(2) { height: 24px; }
.brand-mark i:nth-child(3) { height: 17px; }
.side-brand b { font-size: 13px; letter-spacing: 0.13em; }
.side-brand small { display: block; color: var(--muted); font-size: 9px; letter-spacing: 0.18em; margin-top: 4px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar nav p { color: var(--muted); font-size: 9px; letter-spacing: 0.19em; font-weight: 800; padding: 12px 12px 5px; margin: 0; }
.nav-item {
  width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); display: grid; grid-template-columns: 26px 1fr auto; align-items: center;
  text-align: left; padding: 0 12px; text-decoration: none; cursor: pointer;
}
.nav-item .nav-mark { font-size: 15px; width: 22px; text-align: center; }
.nav-item b { font-size: 13px; font-weight: 600; }
/* 188-4: color-mix が効かないブラウザ向けに、先に単色の下地を置く（効くブラウザは次の行で上書き）。
   どちらでも「今いる場所（active）」は左の帯＋文字色で分かる */
.nav-item:hover { background: var(--code-bg); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--fg); }
.nav-item.active { background: var(--code-bg); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--fg); box-shadow: inset 3px 0 var(--accent); }
.nav-item.active .nav-mark { color: var(--accent); }
.side-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.app-shell { margin-left: var(--sidebar); min-height: 100vh; display: flex; flex-direction: column; }
.menu-btn { display: none; }
.backdrop { display: none; }
@media (max-width: 860px) {
  .sidebar { transform: translateX(-102%); transition: transform 0.22s ease; box-shadow: 24px 0 60px rgba(0,0,0,0.35); }
  .nav-toggle:checked ~ .sidebar { transform: translateX(0); }
  .backdrop { position: fixed; inset: 0; background: rgba(2,8,13,0.6); z-index: 15; }
  .nav-toggle:checked ~ .backdrop { display: block; }
  .app-shell { margin-left: 0; }
  .menu-btn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--card-bg); margin-right: 12px; flex: 0 0 auto;
  }
  .menu-btn i { width: 16px; height: 1.5px; background: var(--fg); margin: 0 auto; }
  /* 188-2: メニューはチェックボックスで開閉（JS なし）。キーボードでも開けるよう
     チェックボックスをフォーカスできる形にし（aria-hidden・tabindex=-1 を外した）、
     フォーカスが当たったらハンバーガーに枠を出す。見た目はキーボード操作のときだけ変わる */
  .nav-toggle:focus-visible ~ .app-shell .menu-btn { outline: 3px solid var(--accent); outline-offset: 2px; }
}

.topbar {
  height: 64px; display: flex; align-items: center; gap: 12px;
  padding: 0 26px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); /* 188-4: color-mix 非対応は単色の帯 */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.crumb { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crumb > span { font-size: 10px; letter-spacing: 0.15em; color: var(--muted); white-space: nowrap; }
.crumb > span::after { content: "/"; margin-left: 12px; color: var(--border); }
.crumb > b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .back { font-weight: 600; text-decoration: none; color: var(--accent); font-size: 13px; white-space: nowrap; }

main {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  padding: 30px 32px 72px;
}
@media (max-width: 860px) {
  .topbar { height: 58px; padding: 0 14px; }
  .crumb > span { display: none; }
  main { padding: 20px 14px 64px; }
}

h1 { font-size: 1.4rem; margin: 8px 0; }
h2 { font-size: 1.1rem; }
h3 { font-size: 1rem; margin-top: 24px; }

.muted { color: var(--muted); }

.card-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  text-decoration: none;
  color: var(--fg);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.card-id {
  font-family: monospace;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
.badge-ok { background: var(--ok); }
.badge-warn { background: var(--warn); }
.badge-done { background: var(--done); }
.badge-unknown { background: var(--unknown); }

.progress {
  position: relative;
  background: var(--code-bg);
  border-radius: 999px;
  height: 22px;
  margin: 10px 0;
  overflow: hidden;
}
.progress-fill {
  background: var(--accent);
  height: 100%;
}
.progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg);
  mix-blend-mode: difference;
}

.meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 0.9rem;
  margin: 10px 0;
}
.meta dt { color: var(--muted); }
.meta dd { margin: 0; word-break: break-all; }
.mono { font-family: monospace; }

.notes {
  background: var(--code-bg);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
}

.actions {
  margin: 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 12px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.btn:hover { filter: brightness(1.05); }

.btn-secondary {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  font-weight: 600;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); filter: none; }

.file-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.file-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}
.file-link {
  color: var(--fg);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}
.dl-link {
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
}

.panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}
.panel input, .panel select, .panel textarea {
  font-size: 1rem;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
}
.panel textarea { font-family: monospace; }

.readme, .markdown-body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  overflow-x: auto;
}
.readme pre, .markdown-body pre {
  background: var(--code-bg);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
}
.readme code, .markdown-body code {
  background: var(--code-bg);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}
.readme pre code, .markdown-body pre code {
  background: none;
  padding: 0;
}
.readme img, .markdown-body img { max-width: 100%; }
/* 189 追記2: 表が右に切れないように。幅が足りなければ表だけ横スクロール、ふだんはセルを折り返して収める */
.readme table, .markdown-body table {
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
.readme th, .readme td, .markdown-body th, .markdown-body td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  overflow-wrap: break-word;
  word-break: normal;
}
/* 表の中の長いコード（commit ハッシュ・パス）は必要なところで折る。短い見出しは折らない */
.readme td code, .markdown-body td code, .readme th code, .markdown-body th code { overflow-wrap: anywhere; }
/* 189 追記2: 文書を開く画面。ファイル名は小さく（題名は本文の見出しに任せる）*/
.doc-filename { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; margin: 4px 0 10px; }
.markdown-body.doc-view > :first-child { margin-top: 0; }

/* --- セッション状態・自動進捗（2026-09-04 追加） ------------------------- */

.state-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.state {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.state-running   { background: #1f7a3d; color: #fff; }
.state-approval  { background: #b26b00; color: #fff; }
.state-login     { background: #b26b00; color: #fff; }
/* 入力欄に文字あり（候補の可能性・054）。要対応ではないので弱い色 */
.state-unsent    { background: #f3ead6; color: #6b5420; }
.state-reply_wait { background: #1f5f99; color: #fff; }
.state-missing   { background: #b32d2d; color: #fff; }
.state-idle      { background: #dfe3e8; color: #444; }
.state-other_vps { background: #e6e2f2; color: #4a4064; }
.state-none,
.state-unknown   { background: #eceff1; color: #666; }

.activity {
  font-size: 12px;
  color: #666;
}

.activity-stale {
  color: #b32d2d;
  font-weight: 600;
}

.state-detail {
  font-size: 12px;
  color: var(--muted);
  background: var(--code-bg);
  border-left: 3px solid var(--t-red);
  padding: 4px 8px;
  margin: 4px 0;
  border-radius: 3px;
  word-break: break-all;
}

.progress-detail {
  font-weight: 400;
  opacity: 0.75;
}

.progress-source {
  font-size: 12px;
  margin-top: -4px;
}

/* 要対応サマリー */
.attention {
  border: 1px solid #e0b4b4;
  background: #fdf4f4;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 16px 0;
}

.attention h2 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #8a2020;
}

.attention ul {
  margin: 0;
  padding-left: 18px;
}

.attention li {
  margin: 6px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.attention li .state-detail {
  margin: 0;
}

.attention-clear {
  border-color: #b7d8b7;
  background: #f3faf3;
}

.attention-clear h2 {
  color: #2c6b2c;
  margin: 0;
}

/* 要対応のカードは枠線で目立たせる */
.card-missing { border-color: #d99; }

.card-approval,
.card-login { border-color: #d9b06a; }

/* 未完了の指示書一覧 */
.panel-open .tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eceff1;
  color: #555;
  margin-left: 6px;
}

.panel-open .tag-started {
  background: #e3efdc;
  color: #33691e;
}

.attention-missing {
  border-color: #cfd8dc;
  background: #f7f9fa;
}

.attention-missing h2 {
  color: #48606b;
}

.attention-missing p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.9;
}

/* codex のレビュー（133）。札は未完了の指示書と同じ形 */
#codex .tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eceff1;
  color: #555;
  margin-left: 6px;
}
#codex .tag-started { background: #e3efdc; color: #33691e; }
#codex textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 8px;
}
#codex h3 { font-size: 14px; margin: 14px 0 4px; }

/* --- 概要パネル・折りたたみ一覧（2026-09-04 追加） --------------------- */

.panel-overview {
  border-left: 4px solid #4a7fb5;
}

.panel-overview h2 {
  margin-top: 0;
}

.overview-desc {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 10px;
}

.overview-summary {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

.overview-summary p {
  margin: 0 0 8px;
}

.overview-empty {
  font-size: 14px;
  line-height: 1.8;
  color: var(--warn);
  background: var(--code-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0;
}

.overview-full {
  margin-top: 10px;
}

.overview-full > summary {
  cursor: pointer;
  font-size: 13px;
  color: #4a7fb5;
  font-weight: 600;
  padding: 6px 0;
  list-style: none;
}

.overview-full > summary::-webkit-details-marker { display: none; }

.overview-full > summary::before {
  content: '▶ ';
  font-size: 10px;
}

.overview-full[open] > summary::before {
  content: '▼ ';
}

.overview-source {
  font-size: 11px;
  margin: 8px 0 0;
  word-break: break-all;
}

/* 指示書・報告書のタップ開閉 */
.filelist {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 12px 0;
  background: var(--card-bg);
}

.filelist > summary {
  cursor: pointer;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  border-radius: 12px;
}

.filelist > summary::-webkit-details-marker { display: none; }

.filelist > summary::after {
  content: '▶';
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

.filelist[open] > summary::after {
  content: '▼';
}

.filelist[open] > summary {
  border-bottom: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
}

.filelist-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.filelist .file-list {
  margin: 0;
  padding: 8px 12px 12px;
}

.filelist > .muted {
  padding: 12px 16px;
  margin: 0;
}

.file-date {
  display: inline-block;
  font-size: 12px;
  color: #777;
  margin-right: 8px;
}

/* README・要件定義書の整備状況（027）。一覧と詳細の両方で使う */
.doc-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.doc-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}

.doc-ok    { background: #e6f4ea; color: #1f7a3d; }
.doc-stub  { background: #fdf0d5; color: #8a5a00; }
.doc-none  { background: #f3e6e6; color: #8a2020; }

.panel-requirements h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Aki様の判断待ち（018・設計は011）。待たせている時間が長い順に並ぶ。
   0件のときは節ごと出さないため、空の見た目は用意していない */
.questions {
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: inset 4px 0 var(--warn), var(--shadow);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 16px 0;
}

.questions h2 {
  margin: 0 0 2px;
  font-size: 15px;
  color: var(--warn);
}

.questions > .muted {
  margin: 0 0 10px;
  font-size: 12px;
}

.questions ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.questions li {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  padding: 12px 14px;
}

.q-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.q-project {
  font-size: 12px;
  color: var(--muted);
}

.q-age {
  font-size: 12px;
  font-weight: 600;
  color: var(--warn);
  margin-left: auto;
  white-space: nowrap;
}

.q-title {
  font-weight: 600;
  margin: 4px 0 10px;
}

/* 一覧の「開く」。本文のボタンより小さいが、指で押せる高さは確保する */
.btn-small {
  padding: 0 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  border-radius: 8px;
}

/* 質問の画面 */
.q-choices {
  margin: 0 0 16px;
  padding-left: 20px;
}

.q-notice {
  border: 1px solid var(--border);
  background: var(--code-bg);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 16px 0;
}

.q-notice p { margin: 0; }
.q-notice p + p { margin-top: 4px; font-size: 13px; }

.q-answered {
  color: var(--ok);
  font-weight: 600;
  margin: 0 0 8px;
}

.q-open    { background: #b26b00; color: #fff; }
.q-done    { background: #1f7a3d; color: #fff; }
.q-dropped { background: #dfe3e8; color: #444; }
/* 状態が読めない質問（023）。見逃さないよう赤で出す */
.q-unknown { background: #b32d2d; color: #fff; }

/* 回答のフォーム（019・段階2）。JavaScriptは使わない */
.q-form {
  margin: 16px 0;
}

.q-form h2 {
  margin: 16px 0 8px;
  font-size: 1rem;
}

.q-radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 指で押せる高さを確保する（44px以上） */
.q-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  cursor: pointer;
}

.q-radio input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent);
}
/* 選んだ候補を目立たせる（codex の choice）。
   188-4: :has が効かないブラウザでは枠と下地は付かないが、選んだ候補の文字は
   太字＋アクセント色になる（+ span は必ず効く）。本物のラジオの丸も選択を示す */
.q-radio input:checked + span { font-weight: 700; color: var(--accent); }
.q-radio:has(input:checked) { border-color: var(--accent); background: var(--code-bg); background: color-mix(in srgb, var(--accent) 9%, var(--card-bg)); }
.q-radio:has(input:checked) input:checked + span { color: var(--fg); }

.q-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--card-bg);
  resize: vertical;
}

.q-form button {
  margin-top: 16px;
  width: 100%;
  min-height: 48px;
}

/* 184/187: 1つの質問に問いが複数あるとき、問いごとのカード（codex の answer-card の形）*/
.q-form .q-sub {
  border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
  margin: 0 0 14px; background: var(--card-bg); min-width: 0;
}
.q-form .q-sub legend {
  font-weight: 700; font-size: 15px; line-height: 1.6; padding: 0 4px; color: var(--fg);
}
.q-form .q-sub .q-radios { margin-top: 8px; }
.q-form .q-sub textarea { margin-top: 8px; }

.q-form > .muted {
  margin: 8px 0 0;
  font-size: 12px;
}
/* 189 の 3: 問いごとの補足（選択肢に加えて） */
.q-form .q-sub textarea.q-subnote { width: 100%; box-sizing: border-box; }
/* 190: 見本・プレビューを開くボタン（問いの上） */
.q-mocks { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.q-mock { text-decoration: none; }

/* ステータスごとの開閉（2026-10-10）。ファイル一覧の .filelist と同じ見た目。
   JavaScriptは使わず素の <details> で開閉する（CSPが script-src 'none'） */
.statusgroup {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 14px 0;
  background: var(--card-bg);
}

.statusgroup > summary {
  cursor: pointer;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  border-radius: 12px;
}

.statusgroup > summary::-webkit-details-marker { display: none; }

.statusgroup > summary::after {
  content: '▶';
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

.statusgroup[open] > summary::after { content: '▼'; }

.statusgroup[open] > summary {
  border-bottom: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
}

/* 開いたときだけ、カードの余白を内側に付ける */
.statusgroup > .card-grid {
  margin-top: 0;
  padding: 0 14px 14px;
}

/* 状態の組の中の、まとまり（GW・建設業・単独）の見出し（063） */
.bizgroup-label {
  margin: 14px 14px 8px;
  font-size: 0.95rem;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* 上にあるプロジェクトの一部であること（例: gw-marketing の一部） */
.card-parent {
  font-size: 0.8rem;
  color: var(--muted);
  margin: -4px 0 8px;
}

/* セッション消失は、閉じていても気づけるように見出しに色を付ける */
.statusgroup-missing > summary .filelist-label {
  color: var(--warn);
}

/* サイクル番号。日付の隣に小さく出す（017）。旧形式のファイルには出ない */
.file-seq {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #4a5568;
  background: #eef0f3;
  border-radius: 999px;
  padding: 0 7px;
  margin-right: 8px;
  white-space: nowrap;
}

.file-name {
  word-break: break-word;
}

.url-ok {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #1f7a3d;
  background: #e6f4ea;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  white-space: nowrap;
}

.url-ng {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #8a5a00;
  background: #fdf2dd;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  white-space: nowrap;
}

.url-pending {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  background: #eef0f2;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  white-space: nowrap;
}

.port {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 4px;
  white-space: nowrap;
}

.port-up   { color: #1f7a3d; background: #e6f4ea; }
.port-down { color: #b32d2d; background: #fdecec; }

/* 資料（044・045追記1で縦積みに変更） */
/* .file-list li の横並び（flex）を、資料の欄だけ縦積みにする。
   横並びのままだと、狭い幅でタイトルが1文字ずつ縦に潰れた（iPhone・375px） */
.panel-materials .file-list li.material {
  display: block;
  padding: 10px 14px;
  margin-bottom: 8px;
}
/* タイトルは行の幅をまるごと使う。収まらない長さのときは省略（…）せず、
   その幅で折り返す（省略すると読めない部分が出るため。1文字ずつ縦に潰れることはない） */
.panel-materials .material-title {
  font-weight: 600;
  line-height: 1.45;
}
.panel-materials .material-link {
  color: var(--accent);
  text-decoration: none;
}
.panel-materials .material-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.panel-materials .tag {
  display: inline-block;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.panel-materials .tag-warn {
  border-color: var(--warn);
  color: var(--warn);
  white-space: normal;
}
.panel-materials .material-dl,
.panel-materials .material-date {
  white-space: nowrap;
}
.panel-materials .material-path {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* 読めない文書の警告（050） */
.panel-warn {
  border-color: var(--warn);
}
.panel-warn h2 { color: var(--warn); }
.panel-warn .mono { overflow-wrap: anywhere; }

/* 待受ポートが判定できないとき（053） */
.port-unknown { background: #eceff1; color: #666; }

/* 流れの変更（076） */
.table-wrap { overflow-x: auto; }
pre.diff { overflow-x: auto; white-space: pre; font-size: 0.85em; padding: 8px; border: 1px solid var(--border); background: var(--code-bg); }

/* セッションの状態と起こすボタン（081） */
ul.sessions { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
ul.sessions li { white-space: nowrap; }
ul.sessions li.session-fixed { font-weight: bold; }
.state-missing { color: var(--warn); }
.wake-note { color: var(--ok); }

/* --- 136: 状態と次の操作が先に見える形 ------------------------------------------------
   状態の色は固定: 赤=障害、橙=判断・承認、青=作業中、紫=返事待ち、灰=待ち・保留、緑=正常・完了。
   トップ・詳細・カード・最近の動きで同じ tone-* を使う。JavaScript は使わない（開閉は <details>） */
:root {
  --t-red: #c62828;    --t-red-bg: #fdecec;
  --t-orange: #b45309; --t-orange-bg: #fff3e0;
  --t-blue: #1d4ed8;   --t-blue-bg: #e8effd;
  --t-purple: #6d28d9; --t-purple-bg: #f1eafd;
  --t-gray: #4b5563;   --t-gray-bg: #eef0f3;
  --t-green: #15803d;  --t-green-bg: #e7f5ec;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-red: #ff7b8a;    --t-red-bg: #3a1a22;
    --t-orange: #ffb14f; --t-orange-bg: #3a2a12;
    --t-blue: #8cc2ff;   --t-blue-bg: #16304a;
    --t-purple: #c7b0ff; --t-purple-bg: #2b2247;
    --t-gray: #c2ccd4;   --t-gray-bg: #1a2a36;
    --t-green: #6fe6a3;  --t-green-bg: #123427;
    --shadow: 0 1px 3px rgba(0,0,0,0.34);
  }
}
:root[data-theme="dark"] {
    --t-red: #ff7b8a;    --t-red-bg: #3a1a22;
    --t-orange: #ffb14f; --t-orange-bg: #3a2a12;
    --t-blue: #8cc2ff;   --t-blue-bg: #16304a;
    --t-purple: #c7b0ff; --t-purple-bg: #2b2247;
    --t-gray: #c2ccd4;   --t-gray-bg: #1a2a36;
    --t-green: #6fe6a3;  --t-green-bg: #123427;
    --shadow: 0 1px 3px rgba(0,0,0,0.34);
}

body { font-size: 16px; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.small { font-size: 13px; }

.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.15rem; overflow-wrap: anywhere; }
/* 187 追記: 狭い幅では見出しと右の説明を縦に並べる（見出しが途中で折れないように）*/
@media (max-width: 640px) {
  .page-head, .page-head-codex { flex-direction: column; align-items: flex-start; }
  .page-head .updated { order: 2; }
}
/* codex の page-head（eyebrow＋大きな見出し＋小さな説明）。右の注記は広い幅だけ下端ぞろえ */
@media (min-width: 641px) { .page-head-codex { align-items: flex-end; } }
.page-head-codex > div { min-width: 0; }
.page-head-codex .eyebrow { margin: 0 0 8px; }
.page-head-codex h1 { font-size: clamp(22px, 4vw, 34px); line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.page-head-codex .lede { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 8px 0 0; max-width: 640px; }
.section-title { font-size: 1rem; margin: 28px 0 8px; color: var(--muted); }

/* 状態のバッジ（tone） */
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; line-height: 1.6;
}
/* 189 の 2: サイクルの番号の札を、その指示書・報告へのリンクにする */
.pill-link { text-decoration: none; display: inline-block; }
.pill-link:hover .pill { filter: brightness(1.08); text-decoration: underline; }
.pill.tone-red    { background: var(--t-red);    color: #fff; }
.pill.tone-orange { background: var(--t-orange); color: #fff; }
.pill.tone-blue   { background: var(--t-blue);   color: #fff; }
.pill.tone-purple { background: var(--t-purple); color: #fff; }
.pill.tone-gray   { background: var(--t-gray-bg); color: var(--t-gray); }
.pill.tone-green  { background: var(--t-green-bg); color: var(--t-green); }
.pill-light.tone-red    { background: var(--t-red-bg);    color: var(--t-red); }
.pill-light.tone-orange { background: var(--t-orange-bg); color: var(--t-orange); }
.pill-light.tone-blue   { background: var(--t-blue-bg);   color: var(--t-blue); }
.pill-light.tone-purple { background: var(--t-purple-bg); color: var(--t-purple); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill.tone-red, :root:not([data-theme="light"]) .pill.tone-orange,
  :root:not([data-theme="light"]) .pill.tone-blue, :root:not([data-theme="light"]) .pill.tone-purple { color: #111; }
}
:root[data-theme="dark"] .pill.tone-red, :root[data-theme="dark"] .pill.tone-orange,
:root[data-theme="dark"] .pill.tone-blue, :root[data-theme="dark"] .pill.tone-purple { color: #111; }

/* 今日見るもの: 集計のカード4つ（375px でも1画面に2×2） */
.sums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 18px; }
.sum {
  display: flex; flex-direction: column; gap: 4px; min-height: 126px; padding: 20px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); text-decoration: none; color: var(--fg);
}
.sum-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.sum-n { font-size: 2.2rem; font-weight: 700; line-height: 1.1; margin: 6px 0 2px; letter-spacing: -0.02em; }
.sum-sub { font-size: 11px; color: var(--muted); }
/* 色は上の細い帯で出す（codex の metric）*/
.sum.tone-red    { box-shadow: inset 0 3px var(--t-red), var(--shadow); }    .sum.tone-red .sum-n    { color: var(--t-red); }
.sum.tone-purple { box-shadow: inset 0 3px var(--t-purple), var(--shadow); } .sum.tone-purple .sum-n { color: var(--t-purple); }
.sum.tone-blue   { box-shadow: inset 0 3px var(--brand-blue), var(--shadow); }   .sum.tone-blue .sum-n   { color: var(--brand-blue); }
.sum.tone-orange { box-shadow: inset 0 3px var(--t-orange), var(--shadow); } .sum.tone-orange .sum-n { color: var(--t-orange); }
.sum.tone-gray   { box-shadow: inset 0 3px var(--t-gray), var(--shadow); }
.sum.tone-green  { box-shadow: inset 0 3px var(--brand-green), var(--shadow); } .sum.tone-green .sum-n { color: var(--brand-green); }
.sum-zero { opacity: 0.6; }
@media (max-width: 560px) { .sums { grid-template-columns: repeat(2, 1fr); } .sum { min-height: 104px; padding: 15px; } .sum-n { font-size: 1.8rem; } }

/* 要対応・返事待ち・作業中・待機中の一覧（1件1行）。187: codex の panel の形 */
.attn {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); padding: 18px 20px; margin: 0 0 14px;
}
.attn h2 { font-size: 15px; margin: 0 0 6px; }
.attn-need { box-shadow: inset 4px 0 var(--t-red), var(--shadow); }
.attn-need h2 { color: var(--t-red); }
.attn-reply { box-shadow: inset 4px 0 var(--t-purple), var(--shadow); }
.attn-reply h2 { color: var(--t-purple); }
.attn-working { box-shadow: inset 4px 0 var(--brand-blue), var(--shadow); }
.attn-halted { box-shadow: inset 4px 0 var(--t-orange), var(--shadow); }
.need-pointer { margin: 6px 0 2px; font-size: 14px; }
/* 開閉（152）。小さい三角は ::before で出す（list-style を消した summary でも同じ見た目に） */
.attn > summary, .need-group > summary, .app-group > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 4px 10px; list-style: none; font-weight: 700; flex-wrap: wrap; }
/* 187 追記: 見出しの札は折らない（「ド／メ／イ／ン」になっていた）。長い件数のバッジは下の行へ回し、中で折り返す */
.attn > summary > .filelist-label, .need-group > summary > span:first-child, .app-group > summary > .app-name { white-space: nowrap; min-width: 0; }
.attn > summary > .filelist-count, .need-group > summary > .filelist-count, .app-group > summary > .filelist-count { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: right; }
.attn > summary::-webkit-details-marker, .need-group > summary::-webkit-details-marker, .app-group > summary::-webkit-details-marker { display: none; }
.attn > summary > span:first-child::before, .need-group > summary > span:first-child::before, .app-group > summary > span:first-child::before { content: "▶"; display: inline-block; margin-right: 8px; font-size: 0.7em; color: var(--muted); }
.attn[open] > summary > span:first-child::before, .need-group[open] > summary > span:first-child::before, .app-group[open] > summary > span:first-child::before { content: "▼"; }
.attn > summary > .filelist-label { font-size: 15px; }
.need-group { margin-top: 10px; }
.need-group > summary { font-size: 14px; font-weight: 600; padding: 4px 0; }
/* 183/187: アプリ（project-id）ごとのまとまり。codex の app-group の形（枠つきの箱）*/
.app-group { margin: 10px 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.app-group > summary { font-size: 13px; font-weight: 600; padding: 12px 14px; }
.app-group > summary > .app-name { font-weight: 700; }
.app-group > .attn-list { padding: 0 14px 4px; border-top: 1px solid var(--border); }
.attn-deploy { box-shadow: inset 4px 0 var(--t-orange), var(--shadow); }
.attn-later { box-shadow: inset 4px 0 var(--t-gray), var(--shadow); }
.attn-notice { box-shadow: inset 4px 0 var(--t-gray), var(--shadow); }
.attn-system { box-shadow: inset 4px 0 var(--brand-green), var(--shadow); }
.attn-list { list-style: none; margin: 0; padding: 0; }
.attn-row {
  display: grid; grid-template-columns: minmax(0, 11em) auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--border);
}
.attn-list > .attn-row:first-child { border-top: none; }
.attn-name { font-weight: 600; overflow-wrap: anywhere; }
.attn-name a { color: var(--fg); text-decoration: none; }
.attn-what { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.attn-age { font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  /* 狭い幅: 名前と状態の行 → 待っているもの → 経過と開く */
  .attn-row { grid-template-columns: minmax(0, 1fr) auto; }
  .attn-what { grid-column: 1 / -1; }
  .attn-age { justify-self: start; }
}

/* 「これは何？」「詳しく」などの小さな開閉 */
details.why, details.inline-more { margin-top: 6px; }
details.why > summary, details.inline-more > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details.more {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  margin: 0 0 12px; padding: 0 16px;
}
details.more > summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
details.more[open] { padding-bottom: 12px; }
details.more > .panel { border: none; padding: 0; margin: 0 0 12px; box-shadow: none; }

/* プロジェクトのカード（6項目。ほかは「詳しく」）。PC は2〜3列 */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
article.card { display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); padding: 14px 16px; min-width: 0; }
.card-head { align-items: baseline; }
.card-title { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.card-title a { color: var(--fg); text-decoration: none; }
.card-when { font-size: 13px; color: var(--muted); white-space: nowrap; }
.card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.card-latest {
  font-size: 14px; color: var(--fg); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card-latest .tag { font-size: 12px; background: var(--code-bg); border-radius: 4px; padding: 0 6px; color: var(--muted); }
.card-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-top: auto; }
.card-more { flex: 1; min-width: 0; font-size: 14px; }
.card-more > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 6px 0; }
.card-more .meta { font-size: 13px; }
.btn-small { padding: 6px 12px; font-size: 14px; border-radius: 8px; white-space: nowrap; }
.btn-warn { background: var(--t-orange); color: #fff; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* 詳細: 上の「状態＋操作」と「現在」 */
.head-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 16px; margin: 4px 0 16px;
}
.head-card h1 { margin: 0 0 4px; }
.lead {
  margin: 0 0 6px; color: var(--muted); font-size: 14px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.head-url { margin: 4px 0; font-size: 14px; overflow-wrap: anywhere; }
.waiting-for { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.actions-main { margin: 12px 0 4px; }
.current-card h2, .codex-line h2 { margin: 0; font-size: 1rem; }
.current-meta { font-size: 15px; }
.current-card .progress { height: 16px; margin: 0; }
.codex-line textarea { min-height: 0; }

/* 最近の動き（日時・種類・件名・状態） */
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-row {
  display: grid; grid-template-columns: 6.5em auto minmax(0, 1fr) auto; align-items: center;
  gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px;
}
.recent-list > .recent-row:first-child { border-top: none; }
.recent-when { color: var(--muted); font-size: 13px; white-space: nowrap; }
.recent-title { color: var(--fg); text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.recent-state { font-size: 12px; color: var(--muted); }
.recent-title .file-seq { margin-right: 6px; }
@media (max-width: 640px) {
  .recent-row { grid-template-columns: auto minmax(0, 1fr); }
  .recent-title { grid-column: 1 / -1; }
  .recent-state { grid-column: 1 / -1; }
}
.recent-row .pill, .attn-row .pill { justify-self: start; }
.attn-row .btn { justify-self: end; }

/* サイドの足元（187）: 色の切り替えとログアウト */
.side-foot form.logout { margin: 0; }
.side-foot form.logout button {
  border: 1px solid var(--border); background: var(--card-bg); border-radius: 9px;
  padding: 8px 14px; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; width: 100%;
}
.side-foot .theme { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; width: 100%; }
.side-foot .theme button {
  flex: 1; background: var(--card-bg); color: var(--muted); border: 0; padding: 7px 0; font-size: 13px; cursor: pointer; line-height: 1.4;
}
.side-foot .theme button + button { border-left: 1px solid var(--border); }
.side-foot .theme button.on { background: var(--accent); color: var(--accent-fg); font-weight: 700; }

.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
}
.login-card {
  width: 100%; max-width: 360px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 28px 24px;
}
.login-icon { display: block; width: 56px; height: 56px; border-radius: 13px; margin: 0 auto 14px; }
.login-card h1 { font-size: 20px; text-align: center; margin: 0 0 22px; }
.login-card label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.login-card input:not([type="hidden"]) {
  width: 100%; font-size: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--fg); margin: 0 0 16px;
}
.login-card button {
  width: 100%; font-size: 16px; font-weight: 600; padding: 13px; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--accent-fg); cursor: pointer;
}
.login-error { font-size: 14px; color: #b91c1c; background: #fef2f2; border-radius: 8px; padding: 10px 12px; margin: 0 0 16px; }

/* 後回し（152） */
.q-defer { margin-top: 12px; }

/* 150: .btn の display より hidden を優先する（通知の設定のボタン） */
[hidden] { display: none !important; }

/* /flow の日付の開閉とカード（154） */
.flow-card { border-top: 1px solid var(--border); padding: 10px 0; overflow-wrap: anywhere; }
.flow-card h3 { font-size: 15px; margin: 0 0 4px; }
.flow-card.flow-missing { border-left: 3px solid var(--warn); padding-left: 8px; }
.flow-reason { margin: 0 0 4px; font-size: 14px; }
.flow-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.flow-files > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.flow-files p { margin: 4px 0 0; font-size: 12px; }

/* 開発中と本番のタブ（162） */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin: 8px 0 12px; }
.tabs a { padding: 8px 14px; color: var(--muted); text-decoration: none; border-radius: 6px 6px 0 0; font-size: 15px; }
.tabs a.on { background: var(--accent); color: #fff; font-weight: 600; }
.card-prod { margin-top: 6px; font-size: 13px; overflow-wrap: anywhere; }

/* サーバーとドメイン（162） */
.infra-item { margin: 0 0 8px; }
.infra-item h3 { margin: 0 0 2px; font-size: 15px; overflow-wrap: anywhere; }
.infra-line { font-size: 13px; color: var(--muted); margin: 2px 0; overflow-wrap: anywhere; }
.infra-dns { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0; }
.infra-dns th, .infra-dns td { border-top: 1px solid var(--border); padding: 4px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.infra-dns th { font-weight: 400; color: var(--muted); white-space: nowrap; width: 52px; }
.infra-dns td:last-child { white-space: nowrap; text-align: right; width: 1%; }

/* 画面の絵（164・166）。3列の小さな一覧。押すと1枚の画面 */
.panel-shots .shot-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.panel-shots .shot-cell a { display: block; }
.panel-shots .shot-cell img {
  display: block; width: 100%; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: top;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.panel-shots .shot-cap {
  margin-top: 4px; font-size: 0.72em; line-height: 1.3;
  overflow-wrap: anywhere; color: var(--muted, #666);
}
.panel-shots .shot-ng-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.85em; }
.panel-shots .shot-ng-list li { margin-bottom: 6px; overflow-wrap: anywhere; }
.shot-title { font-size: 1.1em; }
.shot-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; }
.shot-nav .btn { flex: 0 0 auto; }
.shot-nav .is-disabled { opacity: 0.4; pointer-events: none; }
.shot-count { font-variant-numeric: tabular-nums; }
.shot-one { margin: 0; }
.shot-one img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.shot-one figcaption { margin-top: 6px; font-size: 0.85em; overflow-wrap: anywhere; }


/* --- 171: 新しいトップ（4つの数・今日の優先事項・システムの状態・カード）。字は 12px 以上 ----------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { margin: 0 0 2px; font-size: 12px; letter-spacing: 0.16em; color: var(--accent-2); font-weight: 700; text-transform: uppercase; }
.page-head .kicker { margin-bottom: 0; }
.page-head h1 { margin-top: 0; }
/* 4つの数: PC は1行、スマホは 2×2（文字が縦に潰れないため） */
@media (max-width: 560px) { .sums { grid-template-columns: repeat(2, 1fr); } .sum-label { font-size: 14px; } }

/* 今日の優先事項: 3件。番号・色の棒・名前と何を・誰の番か・押す先 */
.panel.priority { margin: 0 0 14px; padding: 14px 16px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.panel-head h2 { margin: 0 0 8px; font-size: 1.05rem; }
.priority-list { list-style: none; margin: 0; padding: 0; }
.priority-list li {
  display: grid; grid-template-columns: 2.2em 5px minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.priority-list li:first-child { border-top: none; }
.priority-list .rank { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--muted); }
.priority-list .signal { width: 5px; height: 28px; border-radius: 4px; background: var(--t-gray); }
.priority-list .signal.tone-orange { background: var(--t-orange); }
.priority-list .signal.tone-blue { background: var(--t-blue); }
.priority-list .signal.tone-red { background: var(--t-red); }
.priority-list .pri-main { min-width: 0; }
.priority-list .pri-main b { font-size: 15px; overflow-wrap: anywhere; }
.priority-list .pri-main b a { color: var(--fg); text-decoration: none; }
.priority-list .pri-main p { margin: 2px 0 0; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  /* 狭い幅: 番号・棒・名前と何を → 下の行に、誰の番かと押す先を横に並べる */
  .priority-list li { grid-template-columns: 2.2em 5px minmax(0, 1fr) auto; }
  .priority-list li > .pill { grid-column: 3; justify-self: start; }
  .priority-list li > .btn { grid-column: 4; grid-row: 2; justify-self: end; }
}

/* システムの状態: 小さなカードの格子 */
/* .attn-system の色は 187 で上の box-shadow に統一（border-left は使わない） */
.sys-issues { list-style: none; margin: 6px 0 10px; padding: 0; font-size: 14px; }
.sys-issues li { padding: 4px 0; }
.sys-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
@media (min-width: 720px) { .sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sys-item { padding: 10px 12px; box-shadow: none; }
.sys-item h3 { margin: 0 0 4px; font-size: 14px; }
.sys-line { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; margin-top: 2px; }
/* 187/188: 状態の説明が長いとき（外形監視の「止まっている（…）」など）、札が
   折り返して横にはみ出さないようにする。短い札（判断待ち等）は1語なので影響しない */
.sys-line .pill { white-space: normal; max-width: 100%; }
.sys-warn { border-color: var(--t-orange); }

/* プロジェクトの見出し・タブ・検索・絞り込み */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 24px; border-bottom: 1px solid var(--border); }
.section-head .section-title { margin: 0 0 8px; color: var(--fg); font-size: 1.15rem; }
.section-head .tabs { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0 4px; }
.toolbar .search { display: flex; align-items: center; gap: 6px; flex: 1 1 260px; margin: 0; }
.toolbar .search label { flex: 1; min-width: 0; }
.toolbar .search input[type="search"] {
  width: 100%; min-height: 38px; padding: 6px 12px; font: inherit; font-size: 15px;
  background: var(--card-bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 6px 12px; min-height: 34px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card-bg); color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap;
}
.chip.on { color: var(--accent-2); border-color: var(--accent-2); font-weight: 700; }

/* カード（171）: 印・状態・id・表示名・説明・サイクル・進み具合・次にすること */
.card-top { display: flex; align-items: center; gap: 8px; }
.card-top .card-badges { flex: 1; min-width: 0; }
.card-code {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 700;
  background: var(--t-blue-bg); color: var(--t-blue); border: 1px solid var(--border);
}
.card-attn .card-code { background: var(--t-orange-bg); color: var(--t-orange); }
article.card .card-id { margin: 0; font-size: 12px; letter-spacing: 0.08em; color: var(--accent-2); }
.card-desc { margin: 0; font-size: 14px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-cycle { border-top: 1px solid var(--border); padding-top: 8px; font-size: 14px; }
.card-cycle b { display: block; overflow-wrap: anywhere; }
.card-next { border-left: 3px solid var(--accent-2); background: var(--code-bg); padding: 6px 10px; border-radius: 0 6px 6px 0; }
.card-next p { margin: 0; font-size: 14px; }
article.card .progress { margin: 0; }

/* ===== 187 追記3: codex のデザインの部品（dist/app.css を token に合わせたもの）=========
   濃い左メニュー＋大きな見出し＋4枚のカード＋「今、決めること」＋サーバー状態＋動いている開発＋止まっているもの。
   本物のデータが無い部品（使用率%など）は使わない。明暗の両方は var(--…) で効く。 */

/* 大きな見出し（hero）*/
.live-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin: 4px 0 24px; }
.live-head .eyebrow, .eyebrow { font-size: 10px; letter-spacing: 0.2em; font-weight: 800; color: var(--accent-2); margin: 0 0 10px; text-transform: uppercase; }
.live { display: inline-block; width: 7px; height: 7px; background: var(--brand-green); border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.live-head h1 { font-size: clamp(27px, 3.1vw, 48px); line-height: 1.16; letter-spacing: -0.03em; margin: 0 0 12px; font-weight: 720; }
.live-head .lede { color: var(--muted); max-width: 640px; line-height: 1.85; font-size: 13px; margin: 0; }
.sync-card { border-left: 1px solid var(--border); padding-left: 20px; min-width: 150px; }
.sync-card small, .sync-card span { display: block; color: var(--muted); font-size: 9px; letter-spacing: 0.12em; }
.sync-card b { display: block; font-size: 22px; margin: 6px 0; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .sync-card { display: none; } .live-head h1 { font-size: 28px; } }

/* 2列（左:今、決めること／右:サーバー状態）*/
.layout-main { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(250px, 0.85fr); gap: 16px; margin: 18px 0; }
@media (max-width: 900px) { .layout-main { grid-template-columns: 1fr; } }

/* アプリの印（色つきの四角・2文字）。色は要素の style= で入れる（CSP の style-src は許可）*/
.app-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-style: normal; font-weight: 800; font-size: 10px; color: #fff; flex: 0 0 auto; letter-spacing: 0.02em; }

/* 今、決めること（decisions）*/
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.panel-head h2 { font-size: 20px; margin: 0; }
.group-list { display: grid; gap: 10px; }
.decision-list article { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); }
.decision-list article:first-child { border-top: none; }
.decision-list .rank { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.decision-list .d-main small { color: var(--muted); font-size: 9px; letter-spacing: 0.08em; display: block; }
.decision-list .d-main b { display: block; font-size: 13px; margin: 5px 0; overflow-wrap: anywhere; }
.decision-list .d-main b a { color: var(--fg); text-decoration: none; }
.decision-list .d-main p { font-size: 10px; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.answer-link { border: 1px solid var(--border); background: transparent; color: var(--fg); border-radius: 9px; padding: 9px 12px; font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.answer-link:hover { border-color: var(--accent); color: var(--accent); }
.panel-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* サーバー状態（infra の要約・%は出さない）*/
.server-row { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 12px 0; border-top: 1px solid var(--border); align-items: center; }
.server-row:first-child { border-top: none; }
.server-row .s-name { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.server-row .s-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-green); display: inline-block; flex: 0 0 auto; }
.server-row .s-dot.warn { background: var(--brand-orange); }
.server-row .s-sub { grid-column: 1 / 3; font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.infra-link { display: flex; justify-content: space-between; text-decoration: none; color: var(--muted); border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px; font-size: 11px; }
.infra-link:hover { color: var(--accent); }

/* 動いている開発（表）*/
.project-table .thead, .project-table .prow { display: grid; grid-template-columns: 1.3fr 1.8fr 0.8fr 0.7fr; align-items: center; gap: 12px; padding: 12px 6px; }
.project-table .thead { color: var(--muted); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; }
.project-table .prow { border-top: 1px solid var(--border); font-size: 12px; }
.project-table .prow > span:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
.project-table .prow .p-name { font-weight: 700; overflow-wrap: anywhere; }
.project-table .prow .p-name a { color: var(--fg); text-decoration: none; }
.project-table .prow .p-work { color: var(--muted); overflow-wrap: anywhere; }
.project-table .prow .p-age { color: var(--muted); font-size: 11px; white-space: nowrap; }
@media (max-width: 780px) {
  .project-table .thead { display: none; }
  .project-table .prow { grid-template-columns: 1fr auto; }
  .project-table .prow .p-work { grid-column: 1 / 3; font-size: 11px; }
  .project-table .prow .p-age { display: none; }
}

/* 止まっているもの（2列・stop-reason）*/
.stopped-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 780px) { .stopped-groups { grid-template-columns: 1fr; } }
.stopped-items article { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--border); }
.stopped-items article:first-child { border-top: none; }
.stopped-items small { color: var(--muted); font-size: 8px; letter-spacing: 0.06em; }
.stopped-items b { display: block; font-size: 12px; margin: 5px 0; overflow-wrap: anywhere; }
.stopped-items b a { color: var(--fg); text-decoration: none; }
.stopped-items p { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.stop-reason { color: var(--t-orange); background: var(--t-orange-bg); border-radius: 20px; padding: 5px 9px; font-size: 9px; white-space: nowrap; justify-self: start; }
@media (max-width: 780px) { .stopped-items article { grid-template-columns: 1fr; } }

/* app-group の summary に印を出すとき（今、決めること／止まっているもの）*/
.app-group > summary > .ag-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-group > summary .ag-count { color: var(--muted); font-size: 9px; }
.sum.tone-gold { box-shadow: inset 0 3px var(--brand-gold), var(--shadow); } .sum.tone-gold .sum-n { color: var(--brand-gold); }
.decision-list .d-badge { display: inline-block; margin-top: 2px; }
.decision-list .d-main b + .d-badge { margin-top: 4px; }

/* ===== 187 追記（Aki様「質問ごとに枠で分けて」）: 質問の画面を codex の answer の形に ===== */
.q-meta-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; margin: 4px 0 14px; }
.q-meta-row .app-icon { width: 40px; height: 40px; }
.q-meta-main { min-width: 0; }
.q-eyebrow { font-size: 9px; letter-spacing: 0.18em; font-weight: 800; color: var(--accent-2); margin: 0 0 3px; text-transform: uppercase; }
.q-meta-row .q-project { font-size: 12px; color: var(--muted); }
.q-meta-row .state { grid-column: 3; }
.q-meta-row .q-age { grid-column: 2 / 4; justify-self: start; font-size: 12px; color: var(--muted); }
h1.q-title { font-size: clamp(22px, 4.5vw, 34px); line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 18px; }

/* 197: グリッドの子は既定 min-width:auto で中身より縮まない。列を minmax(0,1fr) にし、
   カードに min-width:0 を与えて、長い code（ファイル名）や長い題でも枠が画面幅を超えないようにする */
.q-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 20px; }
.q-section-label { font-size: 9px; letter-spacing: 0.18em; font-weight: 800; color: var(--accent-2); text-transform: uppercase; margin: 6px 0 0; }
.q-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
  min-width: 0; overflow-wrap: anywhere;
}
/* 197: 問の本文の長い code（ファイル名・パス）は、必要なところで折って枠に収める */
.q-card .markdown-body code { overflow-wrap: anywhere; }
.q-card-head { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--fg); margin: 0 0 10px; }
.q-card .markdown-body { background: none; border: none; border-radius: 0; padding: 0; margin: 0; overflow-x: auto; }
.q-card .markdown-body > :first-child { margin-top: 0; }
.q-card .markdown-body > :last-child { margin-bottom: 0; }
/* 番号の問い（1. … / 2. …）のカード: 左に細い帯 */
.q-card.q-numbered { box-shadow: inset 4px 0 var(--accent); }
.q-card.q-numbered .markdown-body strong:first-child,
.q-card.q-numbered .markdown-body p:first-child strong { font-size: 15px; }
/* 推奨案のカード: cyan を効かせる（色は先に単色、効くブラウザは color-mix で上書き）*/
.q-card.q-rec { border-color: var(--accent); background: var(--panel-2); }
.q-card.q-rec { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--card-bg)); }

/* 回答のフォームの見出し */
.q-answer-head { margin: 8px 0 12px; }
.q-answer-head h2 { font-size: 20px; margin: 0; }
.q-form .q-sub legend .muted { font-weight: 400; }

/* ===== 189: トップを短く・区分ページ・メニューの件数 ===== */
/* メニューの件数（codex の nav-item の em）*/
.nav-count { font-style: normal; font-size: 10px; border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px; color: var(--muted); min-width: 1.6em; text-align: center; }
.nav-item.active .nav-count { border-color: var(--accent); color: var(--accent); }
.nav-count.zero { opacity: 0.4; }
/* メニューが縦に長くなったら、中だけスクロールする（上の名前と下の色切替は残す）*/
.sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* トップの区分カード（9枚ほど）。スマホ2列・PC4列（.sums と同じ）*/
.sums-many { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .sums-many { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sums-many { grid-template-columns: repeat(2, 1fr); } }
/* 「すべて見る →」*/
.more-link { display: inline-block; margin-top: 12px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 700; }
.more-link:hover { text-decoration: underline; }

/* メモ箱（198）。溜めて、まとめて commander へ送る */
.flash { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent); color: var(--text); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.flash-warn { background: color-mix(in srgb, #d9534f 14%, transparent); border-color: #d9534f; }
.memo-list { list-style: none; margin: 0; padding: 0; }
.memo-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: var(--card-bg); }
.memo-item .q-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.memo-item .markdown-body { min-width: 0; overflow-wrap: anywhere; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }