/* こつこつ顧客管理 トップの画面だけで使う見た目。土台は app.css (旧マーケと同じ) */

.panel.p0{padding:0;overflow:hidden}
.panel.p0 .scroll{border:0;border-radius:0}
.linkbtn{text-decoration:none;font-size:12.5px}

.tbl tr.click{cursor:pointer}
.tbl td.lead a{color:var(--fg);text-decoration:none}
.tbl td.lead a:hover{color:var(--accent);text-decoration:underline}
.tbl .bar{height:3px;background:var(--line2);border-radius:2px;margin-top:6px;max-width:180px;overflow:hidden}
.tbl .bar i{display:block;height:100%;background:var(--accent);border-radius:2px}

.page-head h1 .pill{vertical-align:middle;margin-left:6px}

.warnbox{border-color:var(--warn-soft);background:var(--warn-soft);color:var(--fg)}
.warnbox ul{margin:6px 0 0;padding-left:18px;line-height:1.8;font-size:13px}

/* フェーズ。集客と営業を混ぜないよう、列を分けて並べる */
.phases{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:14px}
.phase{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px}
.phase h2{font-size:14px;margin:0 0 10px}
.phase .empty{padding:16px}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:86px 64px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--line2);
  font-size:13px;line-height:1.6}
.tl li:first-child{border-top:0}
.tl .d{color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl .k{color:var(--mute);font-size:12px}
.tl .t{word-break:break-word;line-break:strict;overflow-wrap:anywhere}
.tl .meta{color:var(--mute);font-size:12px;margin-top:2px;white-space:pre-wrap}

@media (max-width:640px){
  .tl li{grid-template-columns:1fr;gap:2px}
  .tl .k{display:inline}
  .phases{grid-template-columns:1fr}
}

/* 日付と金額は折り返さない (2026-10-\n14 のように割れると読めない) */
.tbl td.dt{white-space:nowrap;font-variant-numeric:tabular-nums}

/* Claude と決めた分析 */
h2.sec{font-size:15px;margin:28px 0 4px}
.saved{margin-top:12px}
.saved-h{display:flex;align-items:center;gap:8px}
.saved-h h3{font-size:14px;margin:0}
.saved-note{white-space:pre-wrap;font-size:13px;line-height:1.8;margin:8px 0 10px;color:var(--fg)}
.saved .meta{color:var(--mute);font-size:11.5px;margin:8px 0 0}
.bignum{font-size:34px;font-weight:700;letter-spacing:-.02em;margin:6px 0}
.bars{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px}
.bar-row{display:grid;grid-template-columns:minmax(80px,220px) 1fr;gap:10px;align-items:center;font-size:12.5px}
.bar-l{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-v{display:flex;flex-direction:column;gap:3px}
.bar-line{display:flex;align-items:center;gap:6px}
.bar-line i{display:block;height:10px;border-radius:3px;min-width:2px}
.bar-line em{font-style:normal;color:var(--mute);font-size:11.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.c0{background:var(--accent)} .c1{background:var(--good)} .c2{background:var(--warn)} .c3{background:var(--bad)}
.linechart{width:100%;height:200px;margin:4px 0 6px}
.linechart .ln{fill:none;stroke-width:2;background:none}
.linechart .ln.c0{stroke:var(--accent)} .linechart .ln.c1{stroke:var(--good)} .linechart .ln.c2{stroke:var(--warn)} .linechart .ln.c3{stroke:var(--bad)}
.linechart .axis{stroke:var(--line)}
.linechart text{fill:var(--mute);font-size:10px}
.legend{display:flex;gap:12px;font-size:11.5px;color:var(--mute);margin-bottom:8px}
.legend i{display:inline-block;width:10px;height:3px;margin-right:4px;vertical-align:middle}
@media (max-width:640px){.bar-row{grid-template-columns:1fr}}

/* 狭い画面では表を縮めずに横へ流す (1文字ずつ折り返して読めなくなるため) */
#r-table .tbl, #co-list .tbl{min-width:760px}
#r-saved .tbl{min-width:420px}

/* 分析のまとめ: 売った / やった / 流入した */
.lead-sum{font-size:14px;line-height:1.9;margin:0 0 14px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card)}
.trio{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.trio-c h3{font-size:13px;margin:0 0 8px;padding-left:8px;border-left:3px solid var(--line)}
.trio-c.sold h3{border-color:var(--good)} .trio-c.did h3{border-color:var(--accent)} .trio-c.flowed h3{border-color:var(--warn)}
.stat{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 10px;padding:7px 0;border-top:1px solid var(--line2)}
.trio-c h3 + .stat{border-top:0}
.stat .k{font-size:12px;color:var(--mute)}
.stat .v{font-size:20px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .of{grid-column:1 / -1;font-size:11.5px;color:var(--mute);text-align:right}
.mbar{display:flex;align-items:center;gap:6px;min-width:180px}
.mbar i{display:block;height:8px;border-radius:2px;min-width:2px}
.mbar i.o{background:var(--accent)} .mbar i.c{background:var(--good)}
.mbar em{font-style:normal;font-size:11.5px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl.src tr.grp th{text-align:center;font-size:11.5px}
.tbl.src th.g.did{border-bottom:2px solid var(--accent)} .tbl.src th.g.flowed{border-bottom:2px solid var(--warn)} .tbl.src th.g.sold{border-bottom:2px solid var(--good)}
#r-months .tbl{min-width:760px} #r-table .tbl{min-width:900px}
@media (max-width:860px){.trio{grid-template-columns:1fr}}