/* app.css 分割 3/4（段4タスク8）: 書き出し（選び方UX・暗号化リンク）／カルテ本体（白ラベル文書）／
   カルテのセクション内ナビ／経営サマリー本文／レスポンシブ（画面幅・入力デバイス別の上書き）。
   レスポンシブは app.css・app-flow.css・本ファイル前半の各クラスを上書きするため、index.html で
   app-flow.css の直後（app-settings.css より前）に読み込む（この順を変えない）。 */

/* ============ 出力（選び方UX） ============ */
.outwrap{display:grid; grid-template-columns:212px 1fr; gap:22px; align-items:start}
.outgroup{margin-bottom:14px}
.outgroup .og-label{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0 2px 8px}
.ofmt{display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin-bottom:9px; cursor:pointer; background:var(--surface); transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.ofmt:hover{border-color:var(--brand-line); box-shadow:var(--sh-xs)}
.ofmt.sel{border-color:var(--brand); background:var(--brand-soft)}
.ofmt .of-ic{width:30px; height:30px; flex:0 0 auto; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; background:var(--brand-soft); color:var(--brand)}
.ofmt.sel .of-ic{background:var(--brand); color:#fff}
.ofmt .of-main{flex:1; min-width:0}
.ofmt .of-t{font-weight:700; font-size:13.5px}
.ofmt .of-d{font-size:11.5px; color:var(--sub); margin-top:1px}
.ofmt .of-ext{font-size:10px; font-weight:800; color:var(--faint); border:1px solid var(--line); border-radius:5px; padding:1px 6px; align-self:center}
/* ② 出力: 左212px細レール。納品物=カード（普通）／ ブリッジ=枠なし小行（同居・一段小さく） */
#outlist{display:flex; flex-direction:column; gap:4px}
#outlist .outgroup{margin:0 0 4px}
#outlist .og-bridge{margin-top:12px}
#outlist .og-bridge .og-label{text-transform:none; font-size:10.5px; color:var(--sub)}
.nrow{display:block; width:100%; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); text-align:left; font:inherit; border-radius:10px; padding:9px 11px; margin-bottom:6px; cursor:pointer; transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.nrow:hover{border-color:var(--brand-line)}
.nrow.sel{border-color:var(--brand); background:var(--brand-soft); box-shadow:0 0 0 2px var(--brand-glow)}
.nrow .nr-t{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--ink)}
.nrow .nr-ic{font-size:14px}
.nrow .nr-lbl{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nrow .nr-ext{margin-left:auto; font-size:9px; font-weight:800; color:var(--faint)}
.nrow.sel .nr-ext{color:var(--brand)}
.nrow .nr-d{display:block; font-size:11px; color:var(--sub); margin-top:2px; line-height:1.5}
.brow{display:flex; align-items:center; width:100%; gap:7px; padding:5px 10px 5px 12px; cursor:pointer; font-size:12px; color:var(--ink-2); border:0; background:transparent; text-align:left; border-radius:7px; position:relative}
.brow:hover{background:var(--surface-2)}
.brow.sel{background:var(--brand-soft); color:var(--brand-ink); font-weight:700}
.brow.sel::before{content:""; position:absolute; left:2px; top:5px; bottom:5px; width:3px; border-radius:3px; background:var(--brand)}
.brow .b-dot{color:var(--faint)}
.brow .b-t{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.brow .b-ext{margin-left:auto; font-size:9px; color:var(--faint); font-weight:700}
/* 納品プレビューの実物レンダリング（HTML納品物・生ソース→実物へ格上げ） */
.outpane .pp-body.pp-rendered{padding:0; background:var(--surface-2)}
.pp-frame{width:100%; height:520px; border:0; background:#fff; display:block}

.outpane{position:sticky; top:80px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden}
.outpane .pp-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line)}
.outpane .pp-title{font-weight:800; font-size:14px}
.outpane .pp-sub{font-size:11.5px; color:var(--sub)}
/* HTML納品物プレビューの 実物／ソース 切替（A-2） */
.pp-viewtog{display:inline-flex; flex:0 0 auto; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--surface-2)}
.pp-viewtog .pvt-btn{border:0; background:transparent; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--sub); padding:5px 13px; cursor:pointer; transition:background var(--t),color var(--t)}
.pp-viewtog .pvt-btn.on{background:var(--brand); color:#fff}
.pp-viewtog .pvt-btn:not(.on):hover{color:var(--brand-ink)}
.outpane .pp-actions{display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--line-soft)}
.outpane .pp-body{padding:0}
.outpane textarea.codebox{border:0; border-radius:0; min-height:380px; background:var(--surface-2)}
.pp-stat{font-size:12px; color:var(--sub); padding:9px 16px}
.pp-stat .enc-pw{display:inline-block; font-family:ui-monospace,monospace; font-size:1.2em; font-weight:800; color:var(--brand-ink); background:var(--brand-soft); padding:2px 9px; border-radius:6px; margin:3px 0; user-select:all; letter-spacing:.03em}
/* 🌐 暗号化リンク（share-publish.js） */
.share-panel{border-top:1px solid var(--line-soft); padding:10px 16px 4px}
.share-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.share-label{font-size:12px; font-weight:800; color:var(--ink-2)}
.share-panel .share-stat{padding:8px 0}
.share-panel .share-stat:empty{display:none}
.share-list{list-style:none; margin:4px 0 8px; padding:0; display:grid; gap:8px}
.share-item{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2)}
.share-item.revoked{opacity:.6}
.share-info{min-width:0}
.share-title{font-size:13px; font-weight:800; color:var(--ink); overflow-wrap:anywhere}
.share-meta{font-size:11.5px; color:var(--sub); margin-top:2px}
.share-acts{display:flex; gap:6px; flex-wrap:wrap}
.share-acts a.btn{text-decoration:none}
.share-askpw{display:grid; gap:8px; margin:8px 0; padding:12px; border:1px solid var(--brand-line); border-radius:var(--r-sm); background:var(--brand-soft)}
.share-askpw label{font-size:12.5px; color:var(--ink-2); font-weight:700}
.share-askpw input{padding:9px 11px; border:1px solid var(--line); border-radius:8px; font-size:14px}
.share-askpw input[aria-invalid=true]{border-color:var(--risk); background:var(--risk-soft)}
.share-askpw .btn{justify-self:start}

/* ============ カルテ本体（白ラベル文書） ============ */
.doc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 40px; box-shadow:var(--sh-sm)}
.doc h1{font-size:22px; margin:0 0 2px}
.doc .docsub{color:var(--sub); font-size:13px; margin-bottom:18px}
.plain{background:var(--brand-soft); border-radius:var(--r); padding:16px 20px; margin-bottom:8px}
.plain .pl-1{font-size:17px; font-weight:800}
.plain .pl-2{font-size:13.5px; color:var(--sub); margin-top:4px}
.sec{margin:24px 0}
.sec h3{font-size:15px; color:var(--brand-ink); border-bottom:1px solid var(--line); padding-bottom:6px; margin:0 0 12px}
.hero{display:flex; gap:30px; align-items:stretch; margin:6px 0 4px}
.loss{flex:0 0 290px; background:var(--brand-soft); border-radius:var(--r-lg); padding:20px 24px}
.loss .cap{font-size:13px; color:var(--brand-ink); font-weight:700}
.loss .big{font-size:56px; font-weight:800; line-height:1; margin:6px 0 2px}
.loss .big .u{font-size:24px; font-weight:700}
/* 未使用: .facts / .frow系 / .conf（カルテ可読化・frow関数撤去で孤児化）は削除・P2-4 */

.gap{border-left:4px solid var(--risk); background:var(--risk-soft); border-radius:0 10px 10px 0; padding:12px 16px; font-size:14px; line-height:1.7; margin:9px 0}
.gap .code{font-weight:800; color:var(--risk); margin-right:8px; font-family:ui-monospace,monospace}
.gap .say{color:var(--sub)}
.gap .neq{color:var(--risk); font-weight:800; margin:0 8px}
.gap .do{font-weight:700}
.gap .ev{display:block; margin-top:4px; font-size:11px; color:var(--sub); font-family:ui-monospace,monospace}

/* 証拠状態（裏づけ）バッジ */
.back{display:inline-block; font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:999px; letter-spacing:.02em; white-space:nowrap}
.back-ok{background:var(--ok-soft); color:var(--ok)}
.back-info{background:var(--brand-soft); color:var(--brand-ink)}
.back-warn{background:var(--warn-soft); color:var(--warn)}
.back-risk{background:var(--risk-soft); color:var(--risk)}
.gap-foot{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px}
.gap-foot .ev{display:inline; margin-top:0}
.backlegend{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:11px; color:var(--sub); margin-bottom:12px}
.backlegend b{margin-right:2px}
.loss .back{margin-top:10px}

/* 現場の記録（注釈）＝実測エビデンス。乖離の「実際」を支える緑アクセントのカード */
.evblock{margin-top:14px; border:1px solid var(--line); border-left:4px solid var(--ok); background:var(--ok-soft); border-radius:0 10px 10px 0; padding:11px 16px}
.ev-h{font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:6px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.ev-cap{font-size:11px; font-weight:600; color:var(--sub)}
.evrow{display:flex; align-items:baseline; gap:8px; padding:6px 0; font-size:13.5px; line-height:1.7; border-top:1px solid var(--line-soft)}
.evrow:first-of-type{border-top:0}
.ev-no{flex:0 0 auto; width:20px; height:20px; line-height:20px; text-align:center; border-radius:999px; background:var(--ok); color:#fff; font-size:11px; font-weight:800; font-family:ui-monospace,monospace}
.ev-tc{flex:0 0 auto; font-family:ui-monospace,monospace; font-size:11px; font-weight:800; color:var(--brand-ink); background:var(--brand-soft); border-radius:999px; padding:2px 9px; white-space:nowrap}
.ev-note{flex:1 1 auto; color:var(--ink-2)}
.ev-empty{color:var(--sub); font-style:italic}
.ev-cap-sub{color:var(--sub)}
.ev-warn{display:inline-block; margin-left:8px; font-size:11px; font-weight:800; color:var(--warn); background:var(--warn-soft); border-radius:999px; padding:2px 9px}
.evrow.ev-unlinked{opacity:.92}
.evrow.ev-unlinked .ev-no{background:var(--warn-soft); color:var(--warn)}
.ev-link{margin-left:auto; flex:0 0 auto; max-width:210px; border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 8px; font-family:inherit; font-size:11.5px; color:var(--ink-2); background:var(--surface); cursor:pointer}
.ev-link:focus{outline:none; border-color:var(--brand-line); box-shadow:0 0 0 3px var(--brand-glow)}
/* 乖離カード内のインライン実測証拠（紐づいた注釈） */
.gap-ev{margin-top:9px; padding-top:9px; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px}
.gap-ev-cap{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--sub)}
.gap-ev-item{font-size:12.5px; color:var(--ink-2)}
.gap-ev-item b{color:var(--ok); font-family:ui-monospace,monospace; font-size:11.5px; margin-right:3px}
/* 課題テーブル「裏づけ」列の実測チップ（紐づいた注釈） */
.iev{display:inline-block; margin:2px 0 0 5px; font-family:ui-monospace,monospace; font-size:10.5px; font-weight:800; color:var(--ok); background:var(--ok-soft); border-radius:999px; padding:1px 7px; white-space:nowrap; cursor:help}
/* カード側「証拠を足す」セレクト（逆方向の紐づけ） */
.ev-attach{margin-left:6px; max-width:200px; border:1px dashed var(--line); border-radius:var(--r-sm); padding:3px 7px; font-family:inherit; font-size:11px; color:var(--sub); background:var(--surface); cursor:pointer; vertical-align:middle}
.ev-attach:hover{border-color:var(--brand-line); color:var(--brand-ink)}

/* ============ カルテのセクション内ナビ（sticky・スクロール追従） ============ */
.karte-nav{position:sticky; top:64px; z-index:5; display:flex; gap:6px; overflow-x:auto; padding:9px 2px; margin-bottom:8px; background:var(--bg); border-bottom:1px solid var(--line-soft); box-shadow:0 6px 8px -8px rgba(20,24,28,.18)}
.kn-item{flex:0 0 auto; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:background var(--t),border-color var(--t),color var(--t)}
.kn-item:hover{border-color:var(--brand-line); background:var(--brand-soft); color:var(--brand-ink)}
.kn-item.active{background:var(--brand); border-color:var(--brand); color:#fff}

/* ============ 経営サマリーの読みやすい本文ブロック（長文を見出し＋強調で） ============ */
.sblock{margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft)}
.sblock:first-child{border-top:0; padding-top:0}
.sb-h{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:none; color:var(--brand-ink); background:var(--brand-soft); display:inline-block; padding:3px 10px; border-radius:999px; margin-bottom:8px}
.sb-b{font-size:13.5px; line-height:1.95; color:var(--ink-2)}
.sb-b b{color:var(--ink); font-weight:800}
/* 数字＝ジャンプ率（やや大きく＋ブランド色）／痛点キーワード＝マーカー強調。richText が付与。 */
b.num{color:var(--brand-ink); font-weight:800; font-size:1.07em; letter-spacing:.01em}
mark.kw{background:linear-gradient(transparent 58%,var(--warn-soft) 0); color:inherit; font-weight:700; padding:0 1px; border-radius:2px}
/* 損失の内訳 横バーチャート */
.lbars{display:flex; flex-direction:column; gap:8px; margin:6px 0 2px}
.lbar-row{display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:12px}
.lbar-l{font-size:12.5px; font-weight:700; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lbar-track{height:15px; background:var(--line-soft); border-radius:999px; overflow:hidden}
.lbar-track span{display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-ink)); border-radius:999px; transition:width .3s ease}
.lbar-v{font-size:13px; text-align:right; white-space:nowrap}
.lbar-note{font-size:12px; line-height:1.85; color:var(--sub); margin-top:10px}
@media (max-width:680px){.lbar-row{grid-template-columns:96px 1fr auto; gap:8px}}

table.t{width:100%; border-collapse:collapse; font-size:13.5px}
table.t th,table.t td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
table.t th{background:var(--brand-soft); color:var(--brand-ink); font-weight:700}
.pill{display:inline-block; font-size:11.5px; font-weight:700; padding:1px 8px; border-radius:999px}
.pill.hi{background:var(--risk-soft); color:var(--risk)}
.pill.mid{background:var(--warn-soft); color:var(--warn)}
.pill.a{background:var(--ok-soft); color:var(--ok)}
.flow{list-style:none; padding:0; margin:0; counter-reset:f}
.flow li{position:relative; padding:8px 0 8px 34px; border-bottom:1px dashed var(--line)}
.flow li:before{counter-increment:f; content:counter(f); position:absolute; left:0; top:7px; width:22px; height:22px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center}
ul.plainlist{margin:0; padding-left:20px} ul.plainlist li{margin:4px 0}

.prov{margin-top:22px; border-top:1px dashed var(--line); padding-top:12px; font-size:12px; color:var(--sub)}
.prov .pv-row{margin:3px 0}

/* ============ レスポンシブ ============ */
@media (max-width:980px){
  .app,.app.assist-open,.app.assist-bottom.assist-open{grid-template-columns:1fr}
  .sidebar{position:sticky; top:0; z-index:24; height:auto; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 12px; padding:7px 14px 0; overflow:visible; border-right:0; border-bottom:1px solid var(--line); box-shadow:0 4px 16px rgba(20,32,36,.06)}
  .side-brand{padding:2px 0 5px; gap:8px}
  .brand-word small{display:none}
  .side-nav{display:flex; flex-direction:row; justify-content:flex-end; gap:3px; margin:0}
  .nav-item{width:auto; padding:8px 10px; gap:6px; font-size:12px}
  .timeline{grid-column:1 / -1; flex-direction:row; flex-wrap:nowrap; gap:3px; width:100%; padding:3px 0 7px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin}
  .timeline::before{display:none}
  .step{flex:0 0 auto; width:auto; min-width:94px; grid-template-columns:22px auto; gap:7px; padding:7px 9px}
  .tl-dot{width:22px; height:22px}
  .tl-name{font-size:11.5px}
  .tl-sub,.side-label,.side-context,.side-foot{display:none}
  .topbar{position:static; padding:12px 22px; background:var(--surface); backdrop-filter:none}
  .gate,.karte-nav{top:94px}
  main#view{padding:22px 22px 56px}
  .foot{padding:6px 22px 28px}
  .dash,.outwrap{grid-template-columns:1fr}
  .outpane{position:static}
  .statrow{grid-template-columns:1fr 1fr}
  .app.assist-open .assist-handle{display:none}
  .app.assist-bottom .assistant{top:0; bottom:0; height:100dvh}
  .app.assist-bottom.assist-open .main-wrap{padding-bottom:0}
}
@media (max-width:680px){
  body{font-size:14px}
  .sidebar{padding-inline:10px; gap:3px 7px}
  .applogo{width:36px; height:36px}
  .applogo svg{width:32px; height:32px}
  .brand-word b{font-size:14px}
  .side-nav{gap:1px}
  .nav-item{padding:7px; font-size:11.5px; gap:4px}
  .nav-item .ic{width:16px; height:16px; flex-basis:16px}
  .step{min-width:88px; padding-inline:7px}
  .topbar{align-items:flex-start; padding:11px 16px; gap:8px}
  .top-title{font-size:16px}
  .top-sub{max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .top-right{gap:5px}
  .stepcount{padding:3px 8px; font-size:10.5px}
  .saved{padding:4px; font-size:10.5px}
  main#view{padding:18px 14px 48px}
  .foot{padding:4px 14px 24px; font-size:11px}
  .card{padding:18px 16px; border-radius:14px}
  .card h2{font-size:17px}
  .row2{grid-template-columns:1fr; gap:0}
  .hero-head{margin-bottom:16px}
  .hero-head .actions,.hero-head .btn{width:100%}
  .resume-card{align-items:stretch; flex-direction:column; gap:16px; padding:19px 18px}
  .resume-action{width:100%}
  .resume-copy h2{font-size:18px}
  .statrow{grid-template-columns:1fr 1fr; gap:8px; margin-bottom:20px}
  .stat{padding:12px 13px}
  .stat .sv{font-size:21px}
  .dash{gap:22px}
  .sectionlabel .mini{display:none}
  .proj,.feed{padding:14px}
  .pcase{align-items:flex-start; padding:12px; flex-direction:column}
  .pcase .pc-side{width:100%; align-items:center; flex-direction:row; justify-content:space-between}
  .pcase .pc-loss{margin-left:auto}
  .pcase .pc-next{margin-left:auto}
  .caseitem{align-items:flex-start; flex-direction:column}
  .caseitem-side{width:100%; align-items:center; flex-direction:row; justify-content:space-between}
  .roster-row{grid-template-columns:1fr 16px; grid-template-areas:"main chev"; row-gap:2px}
  .roster-row .roster-col{grid-area:unset}
  .roster-row .roster-col:not(.roster-col-name){display:none}
  .roster-row .roster-chev{grid-area:chev}
  .row3{grid-template-columns:1fr}
  .inline-create .form-submit,.inline-create .btn{width:100%}
  .danger-zone{align-items:flex-start; flex-direction:column}
  .danger-zone .btn{width:100%}
  .hero{flex-direction:column}
  .loss{flex-basis:auto}
  .doc{padding:22px 16px}
  .sec{overflow:hidden}
  table.t{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .an-row{align-items:stretch; flex-wrap:wrap}
  .an-note{flex-basis:calc(100% - 38px)}
  .outpane .pp-actions .btn{flex:1 1 auto}
  .grow,.qhead{flex-wrap:wrap}
  .grow .gmsg{flex:1 0 100%}
  .qhead .qstat{margin-left:0}
  .assistant{height:100dvh}
  .app:not(.assist-bottom) .assistant{width:100vw}
  .assist-handle{right:12px; top:auto; bottom:14px; transform:none; flex-direction:row; padding:10px 13px; border-radius:999px; gap:7px}
  .assist-handle .ah-lbl{writing-mode:horizontal-tb; font-size:11.5px}
  .assist-handle .ah-chev{display:none}
}
@media (max-width:390px){
  .brand-word{display:none}
  .nav-item{padding-inline:6px}
  .topbar{flex-direction:column}
  .top-left,.top-sub{width:100%; max-width:none}
  .top-right{width:100%; justify-content:space-between}
}