/* =====================================================================
   OKC 画面の見た目（SDU2023-479：新 UI。モックは SDU2023-287）
   手本：Kiro のドキュメント（kiro.dev/docs）の「作り」— 左ナビ・余白・パンくず・目次・
   コールアウト・ステップ・カード。色は v0.10.0 の style.css の値をそのまま使う（名前を付けただけ）。
   外部 CDN・Web フォントは使わない。
   ===================================================================== */

/* ---- 色：v0.10.0 の style.css の値をそのまま（名前だけ付け直した） ---- */
:root {
  --fg:#1b2430; --muted:#63707f; --line:#d9e0e8; --accent:#1f6feb; --bg:#f6f8fa;
  /* 文字の色（0.11.1-ui、川村さん 10/28「白地で文字が薄くて読みづらい」）。上の --fg・--muted は v0.10.0 の値として残し、
     画面の文字はこちらを使う。WCAG AA（4.5:1）を白・地・表の見出しの上で満たす。アクセントとボタンの色は変えない */
  --text:#0f1720;            /* 本文（白の上で約 17.9:1） */
  --text-sub:#4a5563;        /* 説明文・表の見出し・補足（白 7.6:1／表の見出し 6.7:1） */
  --accent-text:#1858c4;     /* アクセントを「文字」に使うところ（選択中のナビ・目次・タブ）。#1f6feb は薄い青の地で 3.8:1 だったので同じ青を濃くした。ボタンの塗りは --accent のまま */
  --expert-who:#2f7a3e;      /* 熟練者の丸（白い字で 5.3:1。0.11.0-ui は #3f8f4f で 4.0:1） */
  --surface:#fff;            /* header / nav / table / card の白 */
  --th:#eef2f6;              /* th・.status・.msg .txt */
  --hover:#eef3f9;           /* button:hover */
  --selected:#e8f1ff;        /* tr.selected */
  --expert:#e3f0e3;          /* .msg.expert .txt */
  --code-bg:#0f172a; --code-fg:#e2e8f0;   /* pre */
  --toast:#1b2430;
  --ok-bg:#d6f5d6; --ng-bg:#f5d6d6; --ng-fg:#8a0000; --wait-bg:#fff3c4;
  --warn-line:#f0c36d; --warn-bg:#fff8e1; --warn-bg2:#fffaf0; --warn-fg:#8a5200;   /* v0.10.0 は #a46200（黄色地で 4.6:1 ぎりぎり） */
  --scope:#4a7bd0; --scope-bg:#eef3fb; --scope-bg2:#f7faff; --scope-line:#9bb8e6;
  --red:#b40000; --green:#0b5; --link:#0b5cad; --ok-fg:#0a7a2f;
  --mm-bg:#fff7ed; --mm-line:#fed7aa;
  --unset-bg:#f4f4f4; --unset-line:#999; --faint:#5f6b78;   /* 未記入・資料なし（v0.10.0 は #999。白 5.4:1） */
  /* 新しく足したのは「アクセントを薄くした色」だけ（--accent に透明度をかけたもの） */
  --accent-soft: rgba(31,111,235,.10);
  --accent-line: rgba(31,111,235,.35);
  --shadow: 0 1px 2px rgba(27,36,48,.06), 0 8px 24px rgba(27,36,48,.06);
  --radius-panel: 24px; --radius: 12px; --radius-sm: 8px; --pill: 999px;
  /* メイリオを先頭に（0.11.1-ui、川村さん 10/28）。外部フォントは読まない。Mac 等はヒラギノ、無ければ游ゴシック */
  --font: "Meiryo","メイリオ","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme: light;
}
/* ダーク（右上のボタンで切り替え。既定はライト）：アクセントと状態の色の「意味」は保ち、地の色だけ暗くする */
:root[data-theme="dark"] {
  --fg:#e6edf3; --muted:#9aa6b2; --text:#e6edf3; --text-sub:#aab5c0; --faint:#8f9aa6; --accent-text:#79b0ff; --line:#2d3540; --bg:#0b0f14;
  --surface:#121820; --th:#1a222c; --hover:#1c2632; --selected:#16243a;
  --expert:#17301d; --toast:#e6edf3;
  --ok-bg:#16351d; --ng-bg:#3a1a1a; --ng-fg:#ff9b9b; --wait-bg:#3a3214;
  --warn-bg:#2c2614; --warn-bg2:#2a2414; --warn-fg:#e3b25b;
  --scope-bg:#14213a; --scope-bg2:#121c2e; --link:#58a6ff; --ok-fg:#5ad08a;
  --mm-bg:#2b2116; --mm-line:#6b4a23; --unset-bg:#1a1f26;
  --accent-soft: rgba(56,139,253,.16); --accent-line: rgba(56,139,253,.45);
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* 文字の大きさ（0.11.1-ui、川村さん 10/28）。字の大きさはすべて rem で書いてあり、右上の「−」「＋」で
   ルートの font-size（87.5〜112.5%）を変えると全体が同じ比率で縮む／大きくなる。既定 100%＝16px */
html { -webkit-text-size-adjust: 100%; font-size:100%; }
body { margin:0; font-family:var(--font); color:var(--text); background:var(--bg); font-size:0.875rem; line-height:1.7; }
a { color:var(--link); }
.hidden { display:none !important; }

/* ---------------------------------------------------------------- 上のバー */
.topbar { position:sticky; top:0; z-index:30; height:56px; display:flex; align-items:center; gap:16px;
          padding:0 20px; background:var(--bg); border-bottom:1px solid transparent; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:0.9375rem; color:var(--text);
         text-decoration:none; white-space:nowrap; background:none; border:0; padding:0; cursor:pointer; border-radius:0; }
.brand:hover { background:none; }
.brand-mark { width:28px; height:28px; flex:none; border-radius:8px; background:var(--accent); color:#fff;
              display:grid; place-items:center; font-family:var(--mono); font-size:0.75rem; letter-spacing:.02em; }
.badge { font-size:0.6875rem; background:var(--accent); color:#fff; padding:2px 8px; border-radius:10px; font-weight:600; vertical-align:middle; }
.topbar .spacer { flex:1; }
.project-switch { display:flex; align-items:center; gap:8px; padding:5px 12px; border:1px solid var(--line);
                  border-radius:var(--pill); background:var(--surface); font-size:0.75rem; color:var(--text-sub); max-width:40vw; min-width:0; }
.project-switch .dot { width:7px; height:7px; border-radius:50%; background:var(--faint); flex:none; }
.project-switch.on .dot { background:var(--ok-fg); }
#ctx { color:var(--text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ctx:empty::before { content:"プロジェクト未選択"; color:var(--text-sub); font-weight:400; }
#whoami { font-size:0.75rem; color:var(--text-sub); display:flex; align-items:center; gap:8px; white-space:nowrap; }
#whoami button#logout { padding:4px 10px; font-size:0.75rem; }
.icon-btn { width:34px; height:34px; display:grid; place-items:center; border-radius:var(--pill);
            border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; padding:0; }
.icon-btn:hover { background:var(--hover); }
.icon-btn svg { width:16px; height:16px; }
#menu-btn { display:none; }
/* ドキュメント（0.11.1-ui）。右上の「ログアウト」の左。別のタブで開く */
.btn-link { display:inline-flex; align-items:center; padding:7px 14px; border:1px solid var(--line); border-radius:var(--pill);
            background:var(--surface); color:var(--text); text-decoration:none; font-size:.8125rem; line-height:1.4; }
.btn-link:hover { background:var(--hover); }
#whoami { position:relative; }
#more-btn { display:none; font-size:1rem; }
.more-menu { position:absolute; right:0; top:42px; z-index:45; min-width:200px; display:flex; flex-direction:column; padding:6px;
             background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.more-menu a, .more-menu button { display:block; text-align:left; padding:10px 12px; border:0; border-radius:var(--radius-sm);
             background:none; color:var(--text); text-decoration:none; font-size:.875rem; }
.more-menu a:hover, .more-menu button:hover { background:var(--hover); }
/* ドキュメントのページ */
.guide-shell { display:grid; grid-template-columns:248px minmax(0,1fr); padding:0 20px 20px 0; }
.doc-toc { position:sticky; top:56px; align-self:start; max-height:calc(100vh - 56px); overflow:auto; padding:18px 14px 24px 20px; font-size:.8125rem; }
.doc-toc ol { list-style:none; margin:0; padding:0; }
.doc-toc ol ol { padding-left:14px; border-left:1px solid var(--line); margin:4px 0 8px 10px; }
.doc-toc a { display:block; padding:5px 10px; border-radius:var(--radius-sm); color:var(--text); text-decoration:none; line-height:1.5; }
.doc-toc a:hover { background:var(--hover); }
.guide-panel { grid-template-columns:minmax(0,1fr); }
.guide-panel .content { max-width:920px; }
.doc-section h3 { font-size:1rem; margin:28px 0 8px; scroll-margin-top:80px; }
.doc-section h2 { margin-top:24px; }
.doc-section ul { padding-left:1.3em; }
.doc-section li { margin:4px 0; }
.doc-section td:first-child { white-space:nowrap; }
.font-size { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--pill); background:var(--surface); }
.font-size button { border:0; background:none; min-width:32px; height:32px; padding:0 8px; border-radius:var(--pill); font-size:.875rem; line-height:1; }
.font-size button:hover { background:var(--hover); }
.font-size #fs-reset { font-family:var(--mono); font-size:.75rem; color:var(--text-sub); min-width:52px; }
/* 左のメニューを畳む（0.11.1-ui、川村さん 10/28）。PC 幅だけ。畳むと番号の丸だけの細い列になり、そこから移動できる */
@media (min-width: 861px) {
  body.nav-collapsed .shell { grid-template-columns: 68px minmax(0,1fr); }
  body.nav-collapsed .sidebar { padding:18px 8px 24px 12px; }
  body.nav-collapsed .nav-label, body.nav-collapsed .nav-count, body.nav-collapsed .sidebar-foot { display:none; }
  body.nav-collapsed .nav-group { margin:0 0 10px; padding:0 0 10px; border-bottom:1px solid var(--line); }
  body.nav-collapsed .nav-group:last-child { border-bottom:0; }
  body.nav-collapsed .sidebar .nav-item { font-size:0; justify-content:center; padding:6px 0; gap:0; }
  body.nav-collapsed .sidebar .nav-item.active::before { left:-12px; }
  body.nav-collapsed .nav-num { width:30px; height:30px; font-size:0.75rem; }
}

/* ---------------------------------------------------------------- 左ナビ／本文／目次 */
.shell { display:grid; grid-template-columns: 248px minmax(0,1fr); padding:0 20px 20px 0; }
.sidebar { position:sticky; top:56px; align-self:start; height:calc(100vh - 56px); overflow:auto;
           padding:18px 14px 24px 20px; }
.nav-group { margin:0 0 22px; }
.nav-label { font-size:0.6875rem; font-weight:600; letter-spacing:.12em; color:var(--text-sub); margin:0 0 6px 10px; }
.sidebar .nav-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none;
            color:var(--text); padding:7px 10px; border-radius:var(--radius-sm); font:inherit; font-size:0.8438rem;
            cursor:pointer; position:relative; white-space:normal; line-height:1.5; }
.sidebar .nav-item:hover { background:var(--hover); }
.sidebar .nav-item.active { background:var(--accent-soft); color:var(--accent-text); font-weight:600; }
.sidebar .nav-item.active::before { content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
                           border-radius:3px; background:var(--accent); }
.nav-num { width:22px; height:22px; flex:none; border-radius:50%; border:1px solid var(--line); display:grid;
           place-items:center; font-size:0.6875rem; font-family:var(--mono); color:var(--text-sub); background:var(--surface); }
.nav-item.active .nav-num { background:var(--accent); border-color:var(--accent); color:#fff; }
.nav-count { margin-left:auto; font-size:0.6875rem; color:var(--text-sub); font-family:var(--mono); font-weight:400; }
.sidebar-foot { margin-top:28px; padding:12px 10px 0; border-top:1px solid var(--line); font-size:0.6875rem; color:var(--text-sub); }

/* 本文のパネル（Kiro の、角の大きい面） */
.panel { background:var(--surface); border-radius:var(--radius-panel); box-shadow:var(--shadow);
         border:1px solid var(--line); min-height:calc(100vh - 76px);
         display:block; padding:36px 40px 40px 48px; }   /* 0.11.2-ui：右の目次の列をやめ、本文を横幅いっぱいに */
main.content { min-width:0; max-width:none; }
/* このページのガイド（0.11.2-ui）。本文の上に畳める箱。中は目次（横に並ぶ札）と①の「進め方」 */
.page-guide { border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); margin:0 0 18px; }
.page-guide > summary { cursor:pointer; padding:10px 14px; font-size:.8125rem; font-weight:600; color:var(--text-sub);
                        display:flex; align-items:center; gap:8px; list-style:none; }
.page-guide > summary::-webkit-details-marker { display:none; }
.page-guide > summary svg { width:15px; height:15px; }
.page-guide > summary::after { content:"開く ▾"; margin-left:auto; font-weight:400; }
.page-guide[open] > summary::after { content:"畳む ▴"; }
.guide-body { padding:0 14px 14px; display:grid; gap:12px; }
.guide-label { display:block; font-size:.75rem; color:var(--text-sub); margin:0 0 6px; }
.toc ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.toc a { display:inline-block; padding:4px 12px; border:1px solid var(--line); border-radius:var(--pill); background:var(--surface);
         color:var(--text); text-decoration:none; font-size:.8125rem; }
.toc a:hover { background:var(--hover); }

/* ---------------------------------------------------------------- パンくず・見出し */
.crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-size:0.8125rem; color:var(--text-sub); margin:0 0 14px; }
.crumbs button, .crumbs span { color:var(--text-sub); background:none; border:0; font:inherit; padding:2px 6px; border-radius:6px; }
.crumbs button { cursor:pointer; }
.crumbs button:hover { color:var(--text); background:var(--hover); }
.crumbs .sep { padding:0; opacity:.6; }
.crumbs .here { background:var(--th); color:var(--text); font-weight:600; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 6px; }
h1 { font-size:1.75rem; line-height:1.3; margin:0; letter-spacing:.01em; }
.lead { color:var(--text-sub); font-size:0.875rem; margin:8px 0 24px; max-width:76ch; }
h2 { font-size:1.1875rem; line-height:1.4; margin:40px 0 12px; padding-top:4px; scroll-margin-top:80px; }
h3 { font-size:0.9375rem; margin:0 0 6px; }
.hint { color:var(--text-sub); font-size:0.7812rem; }
.mono { font-family:var(--mono); }

/* ---------------------------------------------------------------- 部品：ボタン・入力 */
button { padding:7px 14px; border:1px solid var(--line); background:var(--surface); color:var(--text);
         border-radius:var(--pill); cursor:pointer; font:inherit; font-size:0.8125rem; line-height:1.4; }
button:hover { background:var(--hover); }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button.primary:hover { filter:brightness(1.06); background:var(--accent); }
button.primary:disabled { filter:none; }
button.ghost { border-color:transparent; background:none; }
button:disabled { opacity:.5; cursor:default; }
input, select, textarea { padding:8px 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
                          font-size:0.8125rem; font-family:inherit; background:var(--surface); color:var(--text); max-width:100%; }
input[type=text], input:not([type]) { min-width:240px; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline:2px solid var(--accent-line); outline-offset:1px; border-color:var(--accent); }
input[type=checkbox] { accent-color:var(--accent); width:15px; height:15px; min-width:0; }
input[type=file] { padding:6px; min-width:0; }
textarea.json { width:100%; min-height:220px; font-family:var(--mono); font-size:0.75rem; }
.inline { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.field { display:flex; flex-direction:column; gap:4px; font-size:0.75rem; color:var(--text-sub); }
.field input { min-width:200px; }
.form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin:8px 0; }

/* ---------------------------------------------------------------- コールアウト（Kiro の Info / Warning） */
.callout { display:flex; gap:12px; padding:14px 16px; border-radius:var(--radius); border:1px solid var(--accent-line);
           background:var(--accent-soft); margin:14px 0; font-size:0.8125rem; }
.callout > svg { width:18px; height:18px; flex:none; color:var(--accent); margin-top:2px; }
.callout.warn { border-color:var(--warn-line); background:var(--warn-bg); }
.callout.warn > svg { color:var(--warn-fg); }
.callout.muted { border-color:var(--line); background:var(--th); }
.callout.muted > svg { color:var(--text-sub); }

/* ---------------------------------------------------------------- ステップ（Kiro の番号付き手順） */
.steps { list-style:none; counter-reset:st; margin:8px 0 0; padding:0; }
.steps > li { counter-increment:st; position:relative; padding:0 0 22px 46px; }
.steps > li::before { content:counter(st); position:absolute; left:0; top:-2px; width:28px; height:28px;
                      border-radius:50%; background:var(--th); border:1px solid var(--line); display:grid; place-items:center;
                      font-family:var(--mono); font-size:0.75rem; font-weight:700; color:var(--text); }
.steps > li::after { content:""; position:absolute; left:14px; top:30px; bottom:2px; width:1px; background:var(--line); }
.steps > li:last-child { padding-bottom:0; }
.steps > li:last-child::after { display:none; }
.steps .s-title { font-weight:600; display:block; margin-bottom:6px; }

/* ① 全体の流れ（②〜⑥）のカード */
.flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:6px 0 8px; }
.flow-step { border:1px solid var(--line); border-radius:var(--radius); padding:12px; background:var(--surface);
             color:var(--text); display:block; text-align:left; white-space:normal; font:inherit; cursor:pointer; }
.flow-step:hover { border-color:var(--accent-line); background:var(--hover); }
.flow-step .n { font-family:var(--mono); font-size:0.6875rem; color:var(--text-sub); display:block; }
.flow-step .t { display:block; font-weight:600; font-size:0.8125rem; margin:2px 0; }
.flow-step .v { font-size:1.25rem; font-weight:700; font-family:var(--mono); display:block; }
.flow-step .v small { font-size:0.6875rem; color:var(--text-sub); font-weight:400; margin-left:2px; font-family:var(--font); }

/* ---------------------------------------------------------------- 表（角丸の入れ物。狭い画面では中だけ横に動く） */
.table-wrap { border:1px solid var(--line); border-radius:var(--radius); overflow:auto; background:var(--surface); margin:8px 0; }
.table-wrap:has(table:empty) { display:none; }
table { width:100%; border-collapse:separate; border-spacing:0; font-size:0.8125rem; background:var(--surface); }
th, td { padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:0; }
th { background:var(--th); font-weight:600; font-size:0.75rem; color:var(--text-sub); white-space:nowrap; position:sticky; top:0; z-index:1; }
tr:hover td { background:color-mix(in srgb, var(--hover) 60%, transparent); }
tr.selected td { background:var(--selected) !important; }
td button { padding:4px 10px; font-size:0.75rem; margin:1px 0; white-space:nowrap; }
.k-none { color:var(--faint); }
.th-sort { background:none; border:0; padding:0; margin:0; font:inherit; font-weight:600; color:inherit;
           cursor:pointer; text-align:left; white-space:nowrap; border-radius:0; }
.th-sort:hover { text-decoration:underline; background:none; }
.th-sort.on { color:var(--link); }
.th-sort.sub { font-size:0.6875rem; font-weight:400; color:var(--text-sub); }
.th-sort.sub.on { color:var(--link); font-weight:600; }
.k-pick { width:2.4rem; text-align:center; }
.k-pick input { margin:0; cursor:pointer; }
.k-origin { max-width:14rem; overflow-wrap:anywhere; }
.k-time { white-space:nowrap; font-family:var(--mono); font-size:0.75rem; }
.k-result { white-space:pre-line; }
#knowledge-table { min-width:1320px; }
#knowledge-table td:nth-child(3), #knowledge-table td:nth-child(4) { min-width:9rem; }
#knowledge-table td:nth-child(5), #knowledge-table td:nth-child(6) { min-width:7.5rem; }
#knowledge-table td:nth-child(7), #knowledge-table td:nth-child(8) { min-width:12rem; }
#knowledge-table td:nth-child(9) { min-width:9rem; }   /* 出典（日本語の表示名で1字ずつ折り返さないように） */
#knowledge-table td:nth-child(11) { white-space:nowrap; }
/* ②の表は固定の最小幅をやめ、右端のボタンまで横に動かさずに見えるようにする（0.11.2-ui） */
.rule-off td { color:var(--faint); }
.user-off td { color:var(--faint); }

/* ---------------------------------------------------------------- 小さなラベル（色は v0.10.0 と同じ） */
.status { font-size:0.6875rem; padding:2px 8px; border-radius:var(--pill); background:var(--th); font-family:var(--font); white-space:nowrap; }
.status.approved { background:var(--ok-bg); }
.status.rejected { background:var(--ng-bg); }
.status.human_review { background:var(--wait-bg); }
/* 資料の状態（SDU2023-245） */
.status.doc-error { background:var(--ng-bg); color:var(--ng-fg); }
.status.doc-extracting { background:var(--wait-bg); }
.doc-error-text { color:var(--ng-fg); }
.kind { display:inline-block; padding:1px 8px; border-radius:var(--pill); font-size:0.6875rem; white-space:nowrap;
        border:1px solid #c9d3de; background:#f1f4f7; color:#334; }
.kind-decision { border-color:#9bb8e6; background:#eef4ff; color:#1d4f9c; }
.kind-procedure { border-color:#9fd3b0; background:#eefaf2; color:#17663a; }
.kind-setting { border-color:#e3c58f; background:#fff7e8; color:#7a4e00; }
.kind-price { border-color:#e6a4a4; background:#fff1f1; color:#9c1d1d; }
.kind-fact { border-color:#c9c0e6; background:#f5f2ff; color:#4b3a8c; }
.focus { font-size:0.6875rem; color:#fff; background:#5b6b7f; padding:2px 8px; border-radius:var(--pill); white-space:nowrap; font-weight:400; }
.focus-doc_reality_mismatch { background:#c2410c; }
.focus-multiple_variations { background:#7c3aed; }
.gap-type { font-size:0.6875rem; color:var(--text-sub); background:var(--th); padding:2px 8px; border-radius:6px; font-family:var(--font); font-weight:400; }
.prio { font-size:0.6875rem; padding:1px 8px; border-radius:var(--pill); border:1px solid #ccc; font-weight:400; }
/* 高いものだけ目立たせる。全部に色を付けると、どれが急ぎか分からなくなる。 */
.prio-high { background:#fde8e8; border-color:#e88; color:#a22; }
.prio-low { color:var(--faint); }
/* インタビュー由来のナレッジ（VXAX-181）。Export の【新規】と同じ色にする。 */
.badge-new { background:var(--red); color:#fff; border-radius:4px; padding:1px 6px; font-size:0.6875rem; vertical-align:middle; }
.pii-review { color:var(--red); font-weight:600; }
.dup-doc, .zero-hint { color:var(--warn-fg); font-size:0.75rem; }

/* ---------------------------------------------------------------- ① プロジェクト：対象業務の編集（SDU2023-241） */
.target-edit { margin:8px 0; padding:14px 16px; border:1px solid var(--scope-line); border-left:4px solid var(--scope);
               border-radius:var(--radius); background:var(--scope-bg2); flex-wrap:wrap; }
.target-edit input { min-width:18rem; }
.te-note { flex-basis:100%; margin:4px 0 0; }

/* ---------------------------------------------------------------- ② 対象業務・候補・0件の案内 */
.target-scope { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 16px; border-radius:var(--radius);
                border:1px solid var(--scope-line); border-left:4px solid var(--scope); background:var(--scope-bg); margin:0 0 14px; }
.target-scope > span { flex:1; min-width:12rem; }
.target-scope.unset { border-color:var(--line); border-left-color:var(--unset-line); background:var(--unset-bg); }
.extract-notice { margin:0 0 14px; padding:14px 16px; border:1px solid var(--warn-line); background:var(--warn-bg);
                  border-radius:var(--radius); font-size:0.8125rem; }
.extract-notice .close { float:right; border-color:transparent; background:none; padding:2px 8px; }
.extract-notice button[data-goto-target] { margin-top:8px; padding:4px 10px; font-size:0.75rem; }
/* 対象業務の候補（SDU2023-242）。資料を入れたら裏で解析し、合いそうな対象業務を出す */
.suggest-panel { margin:0 0 18px; padding:16px 18px; border:1px solid var(--scope-line); border-radius:var(--radius);
                 background:var(--scope-bg2); }
.suggest-panel h3 { margin:0 0 6px; font-size:0.9375rem; }
.suggest-panel .sg-summary { margin:4px 0; }
.suggest-panel ol { list-style:none; counter-reset:sg; margin:10px 0; padding:0; display:grid; gap:8px; }
.suggest-panel li { counter-increment:sg; position:relative; padding:10px 12px 10px 48px; border-radius:var(--radius-sm);
                    background:var(--surface); border:1px solid var(--line); margin:0; }
.suggest-panel li::before { content:counter(sg); position:absolute; left:12px; top:10px; width:24px; height:24px; border-radius:50%;
                            display:grid; place-items:center; background:var(--scope-bg); color:var(--scope);
                            font-family:var(--mono); font-size:0.75rem; font-weight:700; }
.suggest-panel li .sg-reason { color:var(--text-sub); font-size:0.7812rem; }
.suggest-panel .sg-current { color:var(--ok-fg); font-size:0.75rem; font-weight:600; }
.suggest-panel > button { padding:4px 10px; font-size:0.75rem; }
.sg-running { color:var(--scope); }
.sg-running::before { content:""; display:inline-block; width:.85em; height:.85em; margin-right:6px;
                      border:2px solid var(--scope-line); border-top-color:var(--scope); border-radius:50%;
                      animation:sg-spin 1s linear infinite; vertical-align:-1px; }
@keyframes sg-spin { to { transform:rotate(360deg); } }
.sg-error { color:var(--red); }
.sg-cell { font-size:.95em; }
/* 対象業務の候補の欄を切り替えたときの合図（SDU2023-243 追加） */
@keyframes sg-flash-border { 0%, 55% { border-color:#d93025; box-shadow:0 0 0 3px rgba(217,48,37,.35); }
                             100% { border-color:#9bb8e6; box-shadow:0 0 0 0 rgba(217,48,37,0); } }
@keyframes sg-fade-in { from { opacity:0; } to { opacity:1; } }
.suggest-panel.sg-flash { animation: sg-flash-border 1.8s ease-out; }
.suggest-panel.sg-flash > * { animation: sg-fade-in .45s ease-out; }
@media (prefers-reduced-motion: reduce) {
  /* 動きは止め、枠の色だけ変える（JS が 1.8 秒でクラスを外す） */
  .suggest-panel.sg-flash, .suggest-panel.sg-flash > * { animation: none; }
  .suggest-panel.sg-flash { border-color:#d93025; }
  .sg-running::before { animation: none; }
}
/* 資料・音声の取り込み（2枚のカード。中は番号付きのステップ） */
.upload-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0 0 8px; }
.drop { border:1.5px dashed var(--line); border-radius:var(--radius); padding:18px; background:var(--bg); min-width:0; }
.drop * { min-width:0; }
.drop h3 { display:flex; align-items:center; gap:8px; }
.drop h3 svg { width:16px; height:16px; }
.drop .formats { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px; }
.chip { font-size:0.6875rem; font-family:var(--mono); padding:2px 8px; border-radius:var(--pill); background:var(--surface); border:1px solid var(--line); color:var(--text-sub); }
/* 個人情報のセルフチェック（VXAX-229） */
.pii-check { display:flex; gap:8px; align-items:flex-start; font-size:0.7812rem; background:var(--warn-bg);
             border:1px solid var(--warn-line); padding:8px 12px; border-radius:var(--radius-sm); line-height:1.55; }
.pii-check input { margin-top:2px; flex:none; }

/* ---------------------------------------------------------------- ③ Knowledge */
/* 一覧とゴミ箱の切り替え（SDU2023-273）。丸いセグメントにした */
.ktabs { display:inline-flex; padding:3px; border-radius:var(--pill); background:var(--th); border:1px solid var(--line); gap:2px; margin:0 0 16px; }
.ktabs button { border:0; background:none; padding:6px 16px; border-radius:var(--pill); font-size:0.8125rem; }
.ktabs button.on { background:var(--surface); color:var(--accent-text); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.kcount { font-weight:400; color:var(--text-sub); font-size:0.75rem; font-family:var(--mono); }
/* 絞り込み（VXAX-153） */
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:var(--radius);
              background:var(--bg); margin:0 0 10px; }
.filter-bar .search { flex:1 1 16rem; position:relative; display:block; }
.filter-bar .search input { width:100%; min-width:0; padding-left:32px; }
.filter-bar .search svg { position:absolute; left:10px; top:50%; width:14px; height:14px; transform:translateY(-50%); color:var(--text-sub); }
.filter-bar input[type="search"] { min-width:14rem; }
#kf-doc { max-width:22rem; }
.list-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0; }
.list-bar .hint { margin:0; }
#k-move:not(:disabled) { border-color:#c0392b; color:#c0392b; }
#k-move.restore:not(:disabled) { border-color:var(--accent); color:var(--accent-text); }
/* 重複の候補（SDU2023-245） */
.kdup { margin:0 0 12px; padding:0 16px; border:1px solid var(--warn-line); background:var(--warn-bg2); border-radius:var(--radius); }
.kdup summary { cursor:pointer; padding:12px 0; font-weight:600; font-size:0.8125rem; }
.kdup ul { margin:6px 0 12px; padding-left:1.2em; }
.kdup li { margin:4px 0; }
.k-add { margin:8px 0 16px; max-width:860px; }
.k-add h3 { margin:0 0 4px; }
.k-add input[type=text], .k-add textarea, .k-add select { width:100%; min-width:0; }

/* ---------------------------------------------------------------- カード（Gap・レビュー・手で追加） */
.card, .gap-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:0 0 14px; }
.card:hover, .gap-card:hover { border-color:color-mix(in srgb, var(--accent) 30%, var(--line)); }
.card-head { display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.card-head h3 { flex:1 1 20rem; font-size:0.9688rem; line-height:1.5; margin:0; }
.tags { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.gap-card .meta { font-size:0.7812rem; color:var(--text-sub); margin:6px 0 10px; }
.question { margin:12px 0; padding:12px 14px; border-radius:var(--radius-sm); background:var(--th); font-size:0.875rem; }
.question b { display:block; font-size:0.6875rem; letter-spacing:.06em; color:var(--text-sub); font-family:var(--mono); }
.mismatch { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; font-size:0.7812rem; }
.mismatch > div { background:var(--mm-bg); border:1px solid var(--mm-line); border-radius:var(--radius-sm); padding:10px 12px; }
.card-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.card-foot .grow { flex:1; }
.card-foot button { padding:4px 12px; font-size:0.75rem; }
/* Gap の優先度と割り振り（VXAX-179） */
.assign-bar { display:flex; gap:14px; flex-wrap:wrap; font-size:0.7812rem; color:var(--text-sub); margin:0; }
.assign-bar select { padding:4px 8px; }
.gap-actions { margin-bottom:16px; }

/* ---------------------------------------------------------------- ⑤ Interview */
#chat { border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); padding:18px; min-height:240px; max-height:520px; overflow:auto; }
.msg { display:flex; gap:10px; margin:0 0 14px; align-items:flex-end; }
.msg .who { width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:0.625rem; font-weight:700;
            background:var(--accent); color:#fff; text-align:center; line-height:1.1; }
.msg .txt { background:var(--surface); border:1px solid var(--line); padding:10px 14px; border-radius:14px 14px 14px 4px; white-space:pre-wrap; max-width:72%; }
.msg.expert { flex-direction:row-reverse; }
.msg.expert .who { background:var(--expert-who); }
.msg.expert .txt { background:var(--expert); border-color:transparent; border-radius:14px 14px 4px 14px; }
.msg.ai:last-child .txt { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
/* チャットらしい動き（0.11.3-ui）。入力中の点・送れなかった発言・記録はしたが返事が無いときの知らせ */
.msg.typing .txt { display:inline-flex; align-items:center; gap:8px; color:var(--text-sub); }
.msg.typing:last-child .txt { border-color:var(--line); box-shadow:none; }
.dots { display:inline-flex; gap:4px; }
.dots i { width:6px; height:6px; border-radius:50%; background:var(--text-sub); animation:typing-dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay:.15s; } .dots i:nth-child(3) { animation-delay:.3s; }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity:.7; } }   /* 点を動かさない（後ろに置いて上書きする） */
@keyframes typing-dot { 0%, 60%, 100% { transform:translateY(0); opacity:.35; } 30% { transform:translateY(-4px); opacity:1; } }
.msg.failed { flex-wrap:wrap; }
.msg.failed .txt { border:1px dashed var(--red); }
.send-fail { flex-basis:100%; text-align:right; font-size:.75rem; color:var(--red); margin-top:4px; }
.send-fail button { padding:2px 10px; font-size:.75rem; border-color:var(--red); color:var(--red); }
.chat-wrap { position:relative; }
.chat-new { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:2; padding:6px 14px; font-size:.8125rem;
            background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; box-shadow:var(--shadow); }
.chat-new:hover { background:var(--accent); filter:brightness(1.06); }
.msg.system-note .txt { background:var(--warn-bg); border-color:var(--warn-line); color:var(--text); }
/* クローズドクエスチョンの選択肢（VXAX-178）。押すだけで答えられる。 */
.choices { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; align-items:center; }
.choices button { background:var(--green); color:#fff; border:none; }
.composer { display:flex; gap:8px; align-items:center; margin:12px 0 0; padding:8px; border:1px solid var(--line);
            border-radius:var(--radius); background:var(--surface); flex-wrap:wrap; }
.composer input { flex:1 1 16rem; border:0; min-width:0; padding:8px; }
.composer input:focus { outline:none; }
/* 棚上げ・クライアント相談（VXAX-180）。回答欄と並べると押し間違えるので、行を分けて控えめに出す。 */
.park-bar { margin-top:12px; font-size:0.7812rem; }
.park-bar button { padding:4px 10px; font-size:0.75rem; }
.park-note { margin:4px 0 0; }

/* ---------------------------------------------------------------- ⑥ レビュー（VXAX-152） */
.k-card h3 { margin-bottom:.2rem; }
.k-fields { margin:10px 0; }
.k-row { display:grid; grid-template-columns:11rem 1fr; gap:.5rem 1rem; padding:8px 0; border-top:1px solid var(--line); }
.k-row dt { font-size:0.7812rem; color:var(--text-sub); }
.k-row dd { margin:0; }
.k-row dd ul { margin:0; padding-left:1.1rem; }
.k-row input[type="text"], .k-row textarea { width:100%; min-width:0; }
/* 未記入は薄く。空欄と「項目が無い」を見分けられるようにするため。 */
.k-empty dd { color:var(--faint); }
.k-people { margin-top:-4px; }
.k-json { margin:.5rem 0; }
.k-json summary { cursor:pointer; font-size:0.7812rem; color:var(--text-sub); }
.code { border-radius:var(--radius-sm); overflow:hidden; border:1px solid #1e293b; margin:10px 0; }
.code-head { padding:6px 14px; background:#1e293b; color:#94a3b8; font-size:0.6875rem; font-family:var(--mono); }
pre { margin:0; background:var(--code-bg); color:var(--code-fg); padding:12px 14px; overflow:auto; font-size:0.75rem; line-height:1.6;
      font-family:var(--mono); border-radius:var(--radius-sm); }
.code pre { border-radius:0; max-height:22rem; }
.k-editing { border-left:3px solid #2a6; }
.export-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.export-card { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:14px 16px;
               border-radius:var(--radius); white-space:normal; }
.export-card b { font-size:0.875rem; }
.export-card span { font-size:0.75rem; color:var(--text-sub); }
.export-card .ext { font-family:var(--mono); font-size:0.6875rem; color:var(--accent-text); }

/* ---------------------------------------------------------------- 前へ／次へ（Kiro のページ下の前後リンク） */
.pager { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:48px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.pager:empty { display:none; }
.pager button { display:block; width:100%; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius);
                text-align:left; white-space:normal; background:var(--surface); }
.pager button:hover { border-color:var(--accent-line); background:var(--hover); }
.pager small { display:block; font-size:0.6875rem; color:var(--text-sub); }
.pager .next { text-align:right; grid-column:2; }
/* いま動いている版（SDU2023-279）。画面の下に小さく出す */
.app-version { margin-top:24px; text-align:right; font-size:0.6875rem; color:var(--text-sub); font-family:var(--mono); }

#toast { position:fixed; right:16px; bottom:16px; background:var(--toast); color:var(--bg); padding:10px 16px; border-radius:var(--radius);
         font-size:0.8125rem; max-width:420px; white-space:pre-wrap; box-shadow:0 8px 24px rgba(0,0,0,.2); z-index:50; }

/* ---------------------------------------------------------------- ログイン画面 */
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.login-card { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel);
              box-shadow:var(--shadow); padding:36px 32px 28px; }
.login-card .brand { margin-bottom:24px; flex-wrap:wrap; white-space:normal; row-gap:6px; cursor:default; }
.login-card h1 { font-size:1.375rem; margin:0 0 18px; }
.login-method { margin:8px 0 4px; }
.google-btn { display:flex; justify-content:center; gap:10px; width:100%; padding:11px; border:1px solid var(--line); border-radius:var(--pill);
              background:var(--surface); color:var(--text); text-decoration:none; font-weight:600; font-size:0.875rem; }
.google-btn::before { content:"G"; color:#4285f4; font-weight:700; }
.google-btn:hover { background:var(--hover); }
.login-or { display:flex; align-items:center; gap:12px; color:var(--text-sub); font-size:0.75rem; margin:18px 0; }
.login-or::before, .login-or::after { content:""; flex:1; height:1px; background:var(--line); }
.login-card form { display:flex; flex-direction:column; gap:10px; margin:8px 0; }
.login-card form.hidden { display:none !important; }
.login-card input { width:100%; min-width:0; padding:11px 12px; font-size:0.875rem; }
.login-card #code { font-family:var(--mono); letter-spacing:.3em; text-align:center; }
.login-card form button { padding:11px; }
.login-card .app-version { text-align:center; }

/* ---------------------------------------------------------------- 幅ごとの調整 */
@media (max-width: 1200px) {
  .panel { padding:32px 32px 36px; }
  .flow { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  #menu-btn { display:grid; }
  #nav-collapse { display:none; }
  #docs-link, #logout { display:none; }
  #more-btn { display:grid; }
  .guide-shell { grid-template-columns:minmax(0,1fr); padding:0 0 16px; }
  .doc-toc { position:static; max-height:none; padding:12px 16px; }
  .doc-section td:first-child { white-space:normal; }
  .font-size #fs-reset { display:none; }
  .shell { grid-template-columns:minmax(0,1fr); padding:0 0 16px; }
  .sidebar { position:fixed; z-index:40; top:56px; left:0; width:280px; height:calc(100vh - 56px); background:var(--surface);
             border-right:1px solid var(--line); transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }
  body.nav-open .sidebar { transform:none; }
  body.nav-open::after { content:""; position:fixed; inset:56px 0 0 0; background:rgba(0,0,0,.25); z-index:35; }
  .panel { border-radius:16px; margin:0 8px; padding:22px 16px 28px; min-height:0; }
  .project-switch { max-width:46vw; }
  #who { display:none; }
  .upload-grid, .export-grid { grid-template-columns:1fr; }
  .mismatch { grid-template-columns:1fr; }
  .k-row { grid-template-columns:1fr; gap:.15rem; }
  h1 { font-size:1.4375rem; }
  .lead { margin-bottom:20px; }
  .msg .txt { max-width:85%; }
  .pager { grid-template-columns:1fr; } .pager .next { grid-column:1; }
  .flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .topbar { padding:0 12px; gap:8px; }
  .brand .brand-name, .topbar .badge { display:none; }
  .page-head { flex-direction:column; }
  .filter-bar select { flex:1 1 45%; min-width:0; }
  input[type=text], input:not([type]) { min-width:0; width:100%; }
  .field { flex:1 1 100%; }
  .field input { min-width:0; width:100%; }
  .target-edit input { min-width:0; width:100%; }
  .filter-bar input[type="search"] { min-width:0; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .sidebar { transition:none; } }

/* 狭い画面では表を「1行＝1枚」に畳む（横スクロールに頼らない）。見出しの文字は ui.js が各セルに写す */
@media (max-width: 640px) {
  .stack #knowledge-table, .stack #document-table { min-width:0; }
  .stack #knowledge-table td { min-width:0 !important; }
  .table-wrap.stack { border:0; background:none; overflow:visible; }
  .stack table { background:none; }
  .stack table, .stack tbody, .stack tr, .stack td { display:block; width:100%; }
  .stack tr.head { display:none; }
  .stack tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; margin:0 0 10px; }
  .stack td { border:0; padding:3px 0 3px 7.5rem; position:relative; min-height:1.6em; }
  .stack td::before { content:attr(data-th); position:absolute; left:0; top:4px; width:7rem; color:var(--text-sub); font-size:0.7188rem; line-height:1.4; }
  .stack td.k-pick { text-align:left; padding-left:0; } .stack td.k-pick::before { content:none; }
  .stack td.actions { padding-left:0; padding-top:8px; } .stack td.actions::before { content:none; }
  .stack td[colspan] { padding-left:0; } .stack td[colspan]::before { content:none; }
  .stack .k-origin { max-width:none; }
  .stack .k-time { white-space:normal; }
  .stack tr:hover td { background:none; }
}
/* とても狭い画面（スマホ縦）では、上のバーにボタンが入るよう、選択中のプロジェクトの枠を出さない（パンくずに出ている） */
@media (max-width: 480px) {
  .project-switch { display:none; }
  .topbar .spacer { flex:1; }
}