/* FlowScope — 診断コックピットのアプリシェル。データはローカルSQLite（server/ 経由）。問診チャットのみ Anthropic API 送信。 */
/* 段4タスク8: 800行上限のため画面/部品ごとに4分割（app.css は基盤＋シェル＋汎用UI）。
   4ファイルは index.html の <link> にこの順（app.css → app-flow.css → app-output.css → app-settings.css）で並べること。
   同じ規則で後から書いたCSSが先のCSSを上書きする箇所があるため、この読み込み順を変えない。 */
:root{
  /* ニュートラル */
  --ink:#172024; --ink-2:#36434a; --sub:#59666e; --faint:#68757d;
  --line:#dfe5e8; --line-soft:#e9eef0; --bg:#f3f6f6; --surface:#ffffff; --surface-2:#f8fafb;
  /* ブランド（ディープティール） */
  --brand:#206277; --brand-ink:#163b47; --brand-soft:#e9f2f4; --brand-line:#cfe1e6; --brand-glow:rgba(32,98,119,.16);
  /* セマンティック */
  --risk:#c0492d; --risk-soft:#fbede8; --risk-line:#f1cec3;
  --ok:#1f7a55; --ok-soft:#e8f4ee;
  --warn:#946312; --warn-soft:#f6eddd;
  /* 角丸・影・モーション（未使用トークン --r-xs/--r-xl/--sh-lg は削除・P2-4） */
  --r-sm:9px; --r:12px; --r-lg:16px;
  --sh-xs:0 1px 2px rgba(20,32,36,.04);
  --sh-sm:0 2px 8px rgba(20,32,36,.07),0 1px 2px rgba(20,32,36,.04);
  --sh-md:0 16px 40px rgba(20,32,36,.14);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t:160ms var(--ease-out);
  /* レイアウト寸法（P3-5・散在していた実寸を一元化。--assist-w/h はJSがリサイズ時に上書き） */
  --sidebar-w:266px; --assist-w:384px; --assist-h:300px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,#f7f9f9 0,var(--bg) 280px); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:14.5px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button,input,textarea,select{font-family:inherit}
button{color:inherit}
a{color:var(--brand)}
::selection{background:var(--brand-glow)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(32,98,119,.32); outline-offset:2px;
}
main#view:focus{outline:none}
main#view:focus-visible{outline:none} /* 画面切替で main にフォーカスを移すため。枠は出さない（読み上げには効く） */
.sr-only{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important}
.skip-link{position:fixed; left:14px; top:10px; z-index:10000; transform:translateY(-160%); background:var(--ink); color:#fff; padding:9px 14px; border-radius:9px; font-weight:800; text-decoration:none; transition:transform var(--t)}
.skip-link:focus{transform:translateY(0)}

/* ============ アプリシェル ============ */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh}

/* ---- サイドバー ---- */
.sidebar{position:sticky; top:0; height:100vh; background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:16px 14px 14px; overflow-y:auto; gap:4px}
.side-brand{display:flex; align-items:center; gap:11px; padding:4px 8px 14px}
.logo{width:42px; height:42px; flex:0 0 auto; border:1.5px dashed #c4cacc; border-radius:11px; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#9aa2a5; font-size:9px; letter-spacing:.02em; background:#fff; cursor:pointer; line-height:1.1; text-align:center; padding:3px}
.logo img{max-width:100%; max-height:100%; object-fit:contain}
.applogo{width:42px; height:42px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border:none; background:none; color:var(--brand); padding:0; cursor:pointer; border-radius:11px; transition:transform 140ms var(--ease-out)}
.applogo svg{display:block}
.applogo:active{transform:scale(.97)}
.brand-word{display:flex; flex-direction:column; line-height:1.15}
.brand-word b{font-size:16.5px; font-weight:800; letter-spacing:-.01em}
.brand-word small{font-size:11px; color:var(--sub); font-weight:600}

.side-nav{display:flex; flex-direction:column; gap:2px; margin-bottom:4px}
.nav-item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  color:var(--ink-2); font-size:13.5px; font-weight:700; padding:9px 11px; border-radius:10px; transition:background var(--t),color var(--t)}
.nav-item .ic{width:18px; height:18px; flex:0 0 18px; opacity:.85}
.nav-item:hover{background:var(--brand-soft)}
.nav-item.active{background:var(--brand-soft); color:var(--brand-ink)}

.side-context{display:block; width:calc(100% - 4px); margin:8px 2px 6px; padding:11px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); cursor:pointer; text-align:left; transition:border-color var(--t),box-shadow var(--t),transform 140ms var(--ease-out)}
.side-context:hover{border-color:var(--brand-line); box-shadow:var(--sh-xs)}
.side-context:active{transform:scale(.985)}
.side-context .ctx-label{display:block; font-size:10px; font-weight:800; letter-spacing:.07em; color:var(--faint); text-transform:uppercase}
.side-context .ctx-name{display:block; font-size:13.5px; font-weight:800; margin-top:3px; color:var(--ink)}
.side-context .ctx-sub{display:block; font-size:11.5px; color:var(--sub); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.side-label{font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); padding:10px 12px 5px}

/* 進行タイムライン */
.timeline{display:flex; flex-direction:column; position:relative; padding:2px 0}
.timeline::before{content:""; position:absolute; left:23px; top:20px; bottom:20px; width:2px; background:var(--line)}
.step{position:relative; display:grid; grid-template-columns:24px 1fr; gap:11px; align-items:center; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; padding:7px 11px; border-radius:10px; color:var(--ink-2); transition:background var(--t)}
.step:hover{background:var(--brand-soft)}
.tl-dot{position:relative; z-index:1; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--faint); transition:background var(--t),border-color var(--t),box-shadow var(--t),color var(--t)}
.tl-text{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.tl-name{font-size:13px; font-weight:700; color:var(--ink-2)}
.tl-sub{font-size:10.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step.done .tl-dot{background:var(--brand); border-color:var(--brand); color:transparent; font-size:0}
.step.done .tl-dot::after{content:"✓"; font-size:12px; font-weight:800; color:#fff}
.step.active{background:var(--brand-soft)}
.step.active .tl-dot{border-color:var(--brand); color:var(--brand); box-shadow:0 0 0 4px var(--brand-glow)}
.step.active .tl-name{color:var(--brand-ink); font-weight:800}
.step.locked{opacity:.48; cursor:not-allowed}

.side-foot{margin-top:auto; padding:12px 8px 4px; display:flex; flex-direction:column; gap:7px}
.localpill{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:var(--ok); background:var(--ok-soft); border-radius:999px; padding:5px 11px; align-self:flex-start}
.localpill .d{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.side-ver{font-size:10.5px; color:var(--faint); padding-left:3px}

/* ---- メイン側 ---- */
.main-wrap{display:flex; flex-direction:column; min-width:0}
.topbar{position:sticky; top:0; z-index:8; min-height:64px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:11px 30px; background:rgba(255,255,255,.84); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line)}
.top-left{display:flex; flex-direction:column; gap:1px; min-width:0}
.top-title{font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.3; margin:0}
.top-sub{display:block; border:0; background:none; padding:0; text-align:left; font-size:12px; color:var(--sub); line-height:1.4}
.top-sub:disabled{opacity:1; cursor:default}
.top-sub.crumb{cursor:pointer; color:var(--brand); font-weight:600}
.top-sub.crumb:hover{text-decoration:underline}
.stalewarn{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--warn-soft); border:1px solid #e8d9b0; color:var(--warn); border-radius:var(--r); padding:10px 14px; margin-bottom:12px; font-size:13px; font-weight:600}
.stalewarn[hidden]{display:none}
.out-status{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.of-badge{font-size:10px; font-weight:800; color:var(--ok); background:var(--ok-soft); border-radius:999px; padding:2px 8px; margin-left:6px; vertical-align:1px; display:inline-block}
.top-right{display:flex; align-items:center; gap:12px; flex:0 0 auto}
/* 右上: 汎用 select の width:100% を打ち消し、文字は折り返さない（会社名が長い時は select 側を省略表示） */
.top-right .saved,.top-right #logoutBtn{white-space:nowrap}
#tenantSwitch{width:auto; min-width:140px; max-width:240px; min-height:34px; padding:5px 10px; font-size:13px; text-overflow:ellipsis}
.stepcount{font-size:12px; font-weight:800; color:var(--brand); background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:999px; padding:4px 13px}
.stepcount:empty{display:none}
.saved{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--sub); background:none; border:none; cursor:default; font-family:inherit}
.saved .d{width:7px; height:7px; border-radius:50%; background:var(--ok)}
.saved.save-busy .d{background:#c9a227}
.saved.save-failed{color:#c0392b; cursor:pointer}
.saved.save-failed .d{background:#c0392b}

main#view{max-width:1080px; width:100%; margin:0 auto; padding:26px 30px 64px}
.foot{max-width:1080px; margin:0 auto; padding:8px 30px 36px; color:var(--faint); font-size:12px}

/* ============ 汎用UI ============ */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; margin-bottom:18px; box-shadow:var(--sh-xs)}
.card h2{margin:0 0 4px; font-size:18px; font-weight:800; letter-spacing:-.01em}
.card .lead{color:var(--sub); font-size:13px; margin:0 0 16px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

.field{margin-bottom:13px}
.field label,.field-label{display:block; font-size:12px; font-weight:700; color:var(--brand-ink); margin-bottom:5px}
.field input,.field textarea,select{width:100%; min-height:42px; border:1px solid #d4dce0; border-radius:var(--r-sm); padding:9px 11px; font-size:14px; color:var(--ink); background:var(--surface); transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.field input:focus,.field textarea:focus,select:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--risk); background:var(--risk-soft)}
.field textarea{min-height:78px; resize:vertical}
.hint{font-size:12px; color:var(--sub); margin-top:4px}
.required{font-size:10px; font-weight:800; color:var(--risk); background:var(--risk-soft); border-radius:999px; padding:2px 7px; margin-left:4px}
.form-error{margin:6px 0 0; color:var(--risk); font-size:12px; font-weight:700}
.form-error[hidden]{display:none}
.form-submit{display:flex; align-items:flex-end}
.subsection-title{font-size:13px; font-weight:800; color:var(--ink); margin:22px 0 10px; padding-top:16px; border-top:1px solid var(--line-soft)}
.page-back{margin:0 0 14px}
code{font-family:ui-monospace,Menlo,monospace; font-size:.86em; background:var(--brand-soft); color:var(--brand-ink); padding:1px 6px; border-radius:5px}

/* ボタン */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--brand); background:var(--brand); color:#fff;
  min-height:40px; padding:9px 18px; border-radius:var(--r-sm); font-size:13.5px; font-weight:700; cursor:pointer; transition:filter var(--t),background var(--t),box-shadow var(--t),transform 140ms var(--ease-out)}
.btn:hover{filter:brightness(1.06); box-shadow:var(--sh-sm)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.42; cursor:not-allowed; filter:none; box-shadow:none}
.btn.ghost{background:#fff; color:var(--brand)}
.btn.ghost:hover{background:var(--brand-soft)}
.btn.sub{border-color:var(--line); background:#fff; color:var(--sub)}
.btn.sub:hover{background:var(--surface-2); color:var(--ink-2)}
.btn.sm{padding:6px 12px; font-size:12.5px; border-radius:8px}
.btn.danger{border-color:var(--risk-line); color:var(--risk); background:var(--surface)}
.btn.danger:hover{background:var(--risk-soft)}

/* 顧客/案件リスト */
.caselist{list-style:none; padding:0; margin:14px 0 0}
.case-list-entry{list-style:none; margin:0 0 10px; padding:0}
.caseitem{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; border:1px solid var(--line); border-radius:var(--r); padding:13px 16px; margin:0; cursor:pointer; text-align:left; background:var(--surface); transition:border-color var(--t),box-shadow var(--t),background var(--t),transform 140ms var(--ease-out)}
.caseitem:hover{border-color:var(--brand-line); box-shadow:var(--sh-sm)}
.caseitem.sel{border-color:var(--brand); background:var(--brand-soft)}
.caseitem .ci-t{display:block; font-weight:700}
.caseitem .ci-m{display:block; font-size:12.5px; color:var(--sub); margin-top:1px}
.caseitem-side{display:flex; align-items:flex-end; flex-direction:column; gap:4px; flex:0 0 auto}
.case-next{font-size:11.5px; color:var(--brand); font-weight:800}
.inline-empty{padding:12px 2px; margin:0}
.advanced-settings{margin:2px 0 16px; border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:0 12px; background:var(--surface-2)}
.advanced-settings summary{margin:0; padding:10px 0; color:var(--sub); font-size:12px}
.advanced-settings[open] summary{border-bottom:1px solid var(--line-soft); margin-bottom:12px}
.danger-zone{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:22px; padding-top:18px; border-top:1px solid var(--risk-line)}
.danger-zone>div{display:flex; flex-direction:column; min-width:0}
.danger-zone b{font-size:12.5px; color:var(--risk)}
.danger-zone span{font-size:11.5px; color:var(--sub)}
.tag{display:inline-block; font-size:11px; font-weight:700; padding:2px 10px; border-radius:999px; background:var(--bg); color:var(--sub); border:1px solid var(--line)}
.tag.ok{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.tag.mid{background:var(--warn-soft); color:var(--warn); border-color:transparent}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}