/* app.css 分割 4/4（段4タスク8）: 案件カードの進捗ステッパー・空状態／設定画面／出力画面の品質チェック
   （GATE B・PII関門）／工数記録／pointer・prefers-reduced-motion 別の上書き／印刷（@media print）／
   通知トースト／AI転記のライブ可視化／認証フェーズによる表示切替／起動時プレースホルダ。
   index.html で app-output.css の直後（最後）に読み込む（この順を変えない）。 */

/* ============ 案件カードの進捗ステッパー ============ */
/* プレビュー実機確認3（段4タスク8追補）: 点の列（基礎情報・問診・カルテ）は横一列で縮まない
   （.seg/.pbar を flex:0 0 auto・ラベルは white-space:nowrap）。 */
.cprog{display:flex; align-items:center; gap:0; margin-top:7px; flex-wrap:nowrap}
.cprog .seg{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; color:var(--faint); white-space:nowrap; flex:0 0 auto}
.cprog .seg .pdot{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--line); background:#fff; transition:background var(--t),border-color var(--t); flex:0 0 auto}
.cprog .seg.on{color:var(--brand-ink)}
.cprog .seg.on .pdot{background:var(--brand); border-color:var(--brand)}
.cprog .pbar{width:18px; height:2px; background:var(--line); margin:0 7px; border-radius:2px; flex:0 0 auto}
.cprog .pbar.on{background:var(--brand)}

/* ============ 空状態 ============ */
.emptybox{text-align:center; padding:34px 24px; border:1.5px dashed var(--line); border-radius:var(--r-lg); background:var(--surface-2)}
.emptybox .ei{font-size:30px; line-height:1; margin-bottom:10px; opacity:.75}
.emptybox h4{margin:0 0 4px; font-size:15px; font-weight:800; color:var(--ink)}
.emptybox p{margin:0 auto 14px; font-size:12.5px; color:var(--sub); max-width:360px}

/* ============ お支払い（タスク5・発注書05） ============ */
/* 見るだけモードの案内文言。「会社」カードの .hint と同じ余白・行間で、色だけ警告色にする
   （既存 .stalewarn クラスを流用できる範囲は増やさず、新規はこの1行だけ）。 */
.billing-warn{color:var(--warn); font-weight:700}

/* ============ 設定画面 ============ */
.saveflag{font-size:12px; font-weight:800; color:var(--ok); opacity:0; transition:opacity var(--t)}
.saveflag.on{opacity:1}
.brandrow{display:flex; align-items:flex-start; gap:18px}
.logo.lg{width:72px; height:72px; font-size:10px; border-radius:14px; flex:0 0 auto}
.brandrow-actions{display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding-top:2px}
.brandrow-actions .hint{font-size:11px; color:var(--faint); font-weight:600}
.check{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-2); font-weight:600; cursor:pointer; padding:8px 0}
.field .check{display:flex; margin:0}
.field .check input[type=checkbox]{width:auto; min-height:0; margin:0; flex:0 0 auto}
.field .check{font-size:13px; color:var(--ink-2); font-weight:600}
.check input{width:auto}
.datarow{display:flex; align-items:center; justify-content:space-between; gap:14px}
.datarow .dk{font-size:12px; font-weight:700; color:var(--brand-ink)}
.datarow .dv{font-size:13.5px; color:var(--ink-2); margin-top:2px}
.kvlist{display:flex; flex-direction:column; gap:0}
.kv{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--sub); font-weight:600}
.kv b{color:var(--ink); font-weight:700}

/* ============ GATE B 品質チェック（出力画面・no-print・警告のみ） ============ */
.gateb{margin-bottom:18px; border-radius:var(--r-lg); padding:14px 20px; border:1px solid var(--line)}
.gateb.gb-ok{background:var(--ok-soft); border-color:var(--ok)}
.gateb.gb-warn{background:var(--warn-soft); border-color:var(--warn)}
.gb-h{font-size:14px; font-weight:800; color:var(--ink); margin-bottom:5px}
.gb-lead{font-size:12.5px; color:var(--ink-2); margin:0 0 8px; line-height:1.7}
.gb-list{margin:0; padding-left:20px}
.gb-list li{font-size:13px; color:var(--ink-2); margin:6px 0; line-height:1.6}
.gb-warn-t{display:block; font-size:11.5px; color:var(--warn); font-weight:700; margin-top:2px}

/* ============ PII関門（出力画面・no-print＝客に出す前の強制チェック） ============ */
.piigate{margin-bottom:18px; border-radius:var(--r-lg); padding:16px 20px; border:1px solid var(--line)}
.piigate.pg-block{background:var(--warn-soft); border-color:var(--warn)}
.piigate.pg-ok{background:var(--ok-soft); border-color:var(--ok)}
.pg-h{font-size:14px; font-weight:800; color:var(--ink); margin-bottom:6px}
.pg-lead{font-size:12.5px; color:var(--ink-2); margin:0 0 10px; line-height:1.7}
.pg-types{margin-bottom:10px}
.pg-types summary{cursor:pointer; font-size:12px; font-weight:700; color:var(--brand)}
.pg-types ul{margin:8px 0 0; padding-left:20px; columns:2; font-size:12px; color:var(--ink-2)}
.pg-types li{margin:3px 0; break-inside:avoid}
.pg-check{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer; padding:5px 0}
.pg-check input{width:auto}
.pg-status{margin-top:8px; font-size:12.5px; font-weight:800}
.pg-block .pg-status{color:var(--risk)}
.pg-ok .pg-status{color:var(--ok)}
@media (max-width:680px){.pg-types ul{columns:1}}

/* ============ 工数記録（出力画面・社内用 no-print＝印刷/書き出しに出ない） ============ */
.effbox{margin-top:24px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:18px 20px; box-shadow:var(--sh-xs)}
.eff-h{font-size:14px; font-weight:800; color:var(--ink); margin-bottom:12px; cursor:pointer}
.effbox:not([open]) .eff-h{margin-bottom:0}
.eff-content{padding-top:2px}
.eff-h .eff-sub{font-size:11.5px; font-weight:600; color:var(--sub); margin-left:8px}
.eff-t{width:100%; border-collapse:collapse; font-size:13px}
.eff-t td{border:1px solid var(--line-soft); padding:7px 10px; vertical-align:middle}
.eff-t td:last-child{width:120px}
.eff-note{font-size:11px; color:var(--sub); font-weight:400; margin-top:2px}
.eff-min{width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; font-size:14px; font-family:inherit; color:var(--ink); text-align:right}
.eff-min:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow)}
.eff-sum{margin-top:12px; font-size:13px; font-weight:700; color:var(--ink-2)}
.eff-sum .num{font-size:1.15em}
.eff-bar{height:8px; background:var(--line-soft); border-radius:999px; overflow:hidden; margin:7px 0 4px}
.eff-fill{display:block; height:100%; width:0; background:var(--brand); border-radius:999px; transition:width .25s ease}
.eff-over{font-size:11.5px; font-weight:800; color:var(--risk)}
.eff-retros{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
.eff-ta{display:flex; flex-direction:column; gap:4px}
.eff-ta span{font-size:11.5px; font-weight:700; color:var(--brand-ink)}
.eff-retro{border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 9px; font-size:12.5px; font-family:inherit; color:var(--ink); resize:vertical; min-height:48px}
.eff-retro:focus{outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow)}
@media (max-width:680px){.eff-retros{grid-template-columns:1fr}}

@media (hover:hover) and (pointer:fine){
  .caseitem:hover{transform:translateY(-1px)}
  .pcase:hover{transform:translateX(2px)}
  .feeditem:hover{color:var(--brand-ink)}
}
@media (pointer:coarse){
  .btn,.nav-item,.step,.kn-item,.assist-icon,.an-del,.an-end,.an-no{min-height:44px}
  .an-del{min-width:44px}
  .an-pin{width:36px; height:36px}
}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .skip-link,.btn,.caseitem,.pcase,.feed-arrow,.assist-handle,.ah-chev,.qcard.ai-flash{
    transition-duration:1ms !important;
  }
  .gmsg-typing{animation:none}
  .caseitem:hover,.pcase:hover{transform:none}
}

/* ============ 印刷（納品物だけ残す） ============ */
@media print{
  .no-print,.sidebar,.topbar,.foot{display:none !important}
  .app{display:block}
  body{background:#fff}
  main#view{padding:0; max-width:none; margin:0}
  .doc{border:none; border-radius:0; padding:0; box-shadow:none}
  .sec,.gap,.loss,.plain,.evblock{break-inside:avoid}
}

/* 通知トースト（保存衝突・多重ウィンドウ警告。FS.notify が生成） */
.fs-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:#22303c; color:#fff; font-size:13px; line-height:1.5;
  padding:10px 18px; border-radius:10px; box-shadow:var(--sh-md);
  z-index:9999; max-width:min(560px, 86vw);
}

/* AI転記のライブ可視化（P4-3）＋1段undo（P4-4） */
.qcard.ai-flash{background:var(--brand-soft); border-color:var(--brand-line); transition:background 200ms var(--ease-out),border-color 200ms var(--ease-out)}
.qundo{border:1px solid var(--line); background:var(--surface); color:var(--sub); font-size:11px; font-weight:700; border-radius:999px; padding:2px 9px; cursor:pointer; flex:0 0 auto}
.qundo:hover{color:var(--brand); border-color:var(--brand-line)}
.gmsg-applied{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px}
.applied-chip{font-size:11px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:999px; padding:3px 10px; cursor:pointer; transition:background var(--t)}
.applied-chip:hover{background:var(--brand-line)}

/* 右レール堅牢化（P4-6）: タイピングバブル・⋯メニュー */
.gmsg-typing{opacity:.7; animation:fs-pulse 1.2s var(--ease-in-out) infinite}
@keyframes fs-pulse{0%,100%{opacity:.4}50%{opacity:.9}}
.assist-more{position:relative; display:inline-block}
.assist-menu{position:absolute; right:0; bottom:110%; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--sh-md); padding:4px; z-index:40}
.assist-menu-item{display:block; width:100%; text-align:left; border:0; background:none; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:7px; cursor:pointer; white-space:nowrap}
.assist-menu-item:hover{background:var(--risk-soft); color:var(--risk)}

@media (prefers-reduced-motion:reduce){
  .gmsg-typing{animation:none}
  .qcard.ai-flash{transition-duration:1ms}
}

/* ---- 認証フェーズによる表示切替（タスク5・実機QA指摘対応） ----
   body[data-auth] は main.js が /api/me の結果で "welcome"/"signup"/"pending"/"loadError"/"app" を書き込む（"login" は旧入口。いまは decideScreen が返さない）。
   属性が無い間（/api/me が返るまでの一瞬）も :not([data-auth="app"]) に一致するので、
   診断アプリの外側（サイドバーのナビ・案件チップ・診断フロー・自動保存・AIアシスタント）は
   最初から隠れたまま描画される＝「空のホーム」がちらつかない。ロゴと側面フッターは残す。
   ログアウトボタンはログイン画面でだけ隠す（申し込み・承認待ちでは別アカウントでやり直せるよう残す）
   ので、ここには含めない＝ shell.js の renderAuthHeader が me の有無で出し分ける。 */
body:not([data-auth="app"]) .side-nav,
body:not([data-auth="app"]) .side-context,
body:not([data-auth="app"]) .side-label,
body:not([data-auth="app"]) .timeline,
body:not([data-auth="app"]) .saved,
body:not([data-auth="app"]) #tenantSwitch,
body:not([data-auth="app"]) .assist-handle,
body:not([data-auth="app"]) .assistant{
  display:none !important;
}

/* /api/me が返るまでの読み込み表示（main#view の静的プレースホルダ。各画面の render が最初に
   view をクリアするので、実際の画面が描かれた時点で自然に消える）。 */
#view .boot-loading{color:var(--sub); font-size:13px; padding:8px 2px}