/* 営業日報 — 配色。
 *
 * ## 明るい配色を既定にしている（2026-09-25）
 *
 * 1. **屋外で見る。** 太陽光の営業はスマホを外で開く。直射日光下では黒地の画面が
 *    鏡のように反射して読めなくなる。明るい背景のほうが反射に強い。
 * 2. **数字と文章が多い画面。** 明るい場所では白地に黒字のほうが読字が速い。
 *    瞳孔が絞られて焦点深度が深くなるため。日報はまさにそういう画面。
 * 3. **世の中の業務システムはほぼ明るい配色が既定。** Salesforce・HubSpot・kintone・
 *    freee・マネーフォワード。会議で投影・印刷する使い方（進捗タブは印刷対応）にも合う。
 *
 * ## 色は「意味」にだけ使う
 *
 * 飾りで塗らない。色が付いていたら、それは状態を表している。
 *   good（達成・良好）／ warn（注意）／ bad（危険・失注）／ info（説明）／ accent（主操作）
 * 情報の強弱は、色ではなく**大きさ・太さ・余白**で付ける。
 *
 * ## コントラスト
 *
 * 本文は白地に対して 4.5:1 以上、大きい字は 3:1 以上（WCAG AA）。
 * `node scripts/contrast.mjs` で機械的に確かめられる。
 */
:root{
  /* 面 */
  --ink:#f1f4f8; --ink-2:#e8edf3; --panel:#ffffff; --panel-2:#f6f8fa;
  --line:#dce2ea; --row-hl:#eef4fc;
  /* 文字。muted も dim も、白地で 4.5:1 を超える濃さにしてある */
  --text:#121922; --muted:#515e6b; --dim:#5f6b78;
  /* 主操作（アンバー＝ブランド色）。塗りは濃く、面は淡く */
  --amber:#b45309; --amber-soft:#8a5200; --amber-dim:#e3c48c;
  --accent-2:#e0a83c; --accent-bg:#fff5e6; --accent-line:#f0d7a8; --on-accent:#ffffff;
  /* 状態 */
  --good-fg:#0f6b4a; --good-bg:#e8f6f0; --good-line:#b0dfca;
  --warn-fg:#8a5200; --warn-bg:#fff4e2; --warn-line:#eed3a4;
  --bad-fg:#a32b1c;  --bad-bg:#fdeceb;  --bad-line:#f3c2bb;
  --info-fg:#155a9c; --info-bg:#edf4fc; --info-line:#c2d9f2;
  --violet-fg:#6b3aa0; --violet-bg:#f4eefb; --violet-line:#dcc8ef;
  /* 図表 */
  --blue:#1663b4; --green:#136d51; --red:#a8241d; --purple:#6f38a6;
  --blue-dim:#9cc6ec; --green-dim:#9ad5bd; --chart-1:#9fb4cc; --chart-2:#c6d2e0;

  /* 称号の金属色。明暗で別の濃さが要る（白地・黒地の両方で 4.5:1 以上） */
  --tier-bronze:#8a5a2b; --tier-silver:#5c6774; --tier-gold:#8a6300; --tier-platinum:#166b86;

  --radius:14px; --radius-s:9px; --tap:44px;
  --sans:"Hiragino Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho",serif;
}

/* 暗い配色。**残してあるだけで既定ではない。** 夜間や暗い会議室で使う人のため */
:root[data-theme="dark"]{
  --ink:#0d1117; --ink-2:#131a24; --panel:#161e2a; --panel-2:#1c2634;
  --line:#2b3746; --row-hl:#1a2231;
  --text:#e6edf5; --muted:#9fb0c3; --dim:#8494a6;
  --amber:#e0a83c; --amber-soft:#f0cd82; --amber-dim:#7a5c20;
  --accent-2:#8a6a24; --accent-bg:#231c0c; --accent-line:#3a2d10; --on-accent:#1e1607;
  --good-fg:#8fd9b6; --good-bg:#0f2620; --good-line:#265041;
  --warn-fg:#f0cd82; --warn-bg:#2a2110; --warn-line:#5c4718;
  --bad-fg:#f0a79d;  --bad-bg:#2a1512;  --bad-line:#5c2b25;
  --info-fg:#a5cdf3; --info-bg:#111a26; --info-line:#274462;
  --violet-fg:#cfa9ec; --violet-bg:#211a2c; --violet-line:#402f56;
  --blue:#4c9be8; --green:#4bb583; --red:#e06a5c; --purple:#b06ce0;
  --blue-dim:#2a5580; --green-dim:#256349; --chart-1:#3d5470; --chart-2:#243144;
  --tier-bronze:#cf9b63; --tier-silver:#b3c0cf; --tier-gold:#e0b755; --tier-platinum:#7fcfe8;
}

/* 実務モード。演出を切ったときは、主操作の色も落ち着いた青にする */
:root[data-plain="1"]{ --amber:#1a6fc4; --amber-soft:#155a9c; --on-accent:#ffffff;
  --accent-bg:#edf4fc; --accent-line:#c2d9f2; --amber-dim:#c2d9f2; }
:root[data-theme="dark"][data-plain="1"]{ --amber:#4c9be8; --amber-soft:#8cc0f0;
  --on-accent:#0a1420; --accent-bg:#111a26; --accent-line:#274462; --amber-dim:#274462; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
/* 暗い配色のときだけ、奥行きを出す */
:root[data-theme="dark"] body{
  background:
    radial-gradient(1100px 500px at 78% -12%, #1d2a3d 0%, transparent 62%),
    radial-gradient(800px 400px at 8% 110%, #1a2331 0%, transparent 60%),
    var(--ink);
}
.app{max-width:1120px;margin:0 auto;padding:0 16px 64px}
button{font-family:inherit}

/* ── topbar ───────────────────────────── */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0 12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:22px;height:22px;border-radius:5px;flex:none;
  background:linear-gradient(150deg,var(--amber) 0%, var(--accent-2) 100%)}
.brand-text b{display:block;font-size:15px;letter-spacing:.06em;font-weight:600}
.brand-text small{display:block;color:var(--dim);font-size:10px;letter-spacing:.1em}
.topbar-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ctl{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:99px;padding:5px 12px;font-size:12px;color:var(--muted)}
.ctl select{background:transparent;border:0;color:var(--text);font-size:12px;font-family:inherit;outline:none;max-width:150px}
.ctl.toggle{cursor:pointer;user-select:none}
.ctl input[type=checkbox]{accent-color:var(--amber);margin:0}
.sample-mark{color:var(--bad-fg);border-color:var(--bad-line);background:var(--bad-bg);font-size:11px}
/* 副の操作。**塗らない。枠だけ。** 主（提出）と見分けがつくようにする */
.ghost-btn{background:var(--panel-2);border:1px solid var(--dim);color:var(--text);
  border-radius:99px;padding:6px 13px;font-size:12px;cursor:pointer}
.ghost-btn:hover{background:var(--ink-2);border-color:var(--text)}

/* ── tabs ─────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
  padding:11px 16px;font-size:13.5px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:7px}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--amber-soft);border-bottom-color:var(--amber)}
.tab .badge{background:var(--amber);color:var(--on-accent);border-radius:99px;font-size:10.5px;
  font-weight:700;padding:1px 6px;min-width:17px;text-align:center}
.tab .badge.quiet{background:var(--line);color:var(--muted)}

/* ── generic ──────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card + .card{margin-top:14px}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;margin-bottom:14px;flex-wrap:wrap}
.card-h h2{margin:0;font-size:15.5px;letter-spacing:.06em;font-weight:600}
.card-h .sub{color:var(--dim);font-size:12.5px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:12.5px}
.num{font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--line);margin:16px 0;border:0}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:2px 9px;border-radius:99px;
  border:1px solid var(--line);color:var(--muted);background:var(--ink-2);white-space:nowrap}
.pill.warn{color:var(--amber-soft);border-color:var(--amber-dim);background:var(--accent-bg)}
.pill.bad{color:var(--bad-fg);border-color:var(--bad-line);background:var(--bad-bg)}
.pill.good{color:var(--good-fg);border-color:var(--good-line);background:var(--good-bg)}
.pill.info{color:var(--info-fg);border-color:var(--info-line);background:var(--info-bg)}
.btn{background:var(--amber);color:var(--on-accent);border:0;
  border-radius:8px;padding:11px 20px;font-size:13.5px;font-weight:600;cursor:pointer;letter-spacing:.02em}
.btn:hover{background:var(--amber-soft)}
.btn:disabled{background:var(--panel-2);color:var(--dim);cursor:not-allowed}
/* 副の操作。**面を敷いて枠を濃くする。** 透明だと、文字と見分けがつかない（2026-09-25 指摘） */
.btn.sec{background:var(--panel-2);color:var(--text);border:1px solid var(--dim);font-weight:600}
.btn.sec:hover{background:var(--ink-2);border-color:var(--text)}
.btn.sm{padding:7px 14px;font-size:12.5px;border-radius:8px}
input[type=text],input[type=date],textarea,select.field{
  width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);
  color:var(--text);padding:10px 12px;font-size:13.5px;font-family:inherit;outline:none}
input:focus,textarea:focus,select.field:focus{border-color:var(--amber-dim)}
textarea{resize:vertical;min-height:74px}
label.lbl{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ── bars ─────────────────────────────── */
.bar{height:7px;background:var(--ink-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.bar > i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--amber-dim),var(--amber));
  transition:width .9s cubic-bezier(.2,.8,.2,1)}
.bar.blue > i{background:linear-gradient(90deg,var(--blue-dim),var(--blue))}
.bar.green > i{background:linear-gradient(90deg,var(--green-dim),var(--green))}

/* ── hero（本日の活動） ───────────────── */
.hero{position:relative;overflow:hidden;background:var(--panel)}
.hero-top{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start}
.hero h1{font-size:20px;margin:6px 0 6px;letter-spacing:.02em;font-weight:600}
.hero .lead{color:var(--muted);font-size:13px;max-width:52ch}
.pouch{display:flex;align-items:center;gap:14px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:11px 16px}
.pouch .n{font-size:24px;color:var(--amber-soft);line-height:1;font-weight:600}
.pouch .t{font-size:11.5px;color:var(--muted)}
.sealed{border-color:var(--amber-dim)}

/* ── steps ────────────────────────────── */
.steps{display:flex;gap:0;margin:18px 0 4px;font-size:11.5px;color:var(--dim);flex-wrap:wrap}
.steps b{font-weight:600}
.step{display:flex;align-items:center;gap:7px;padding:5px 14px 5px 0}
.step .dot{width:19px;height:19px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  font-size:10.5px;background:var(--ink-2);flex:none}
.step.on{color:var(--amber-soft)} .step.on .dot{border-color:var(--amber);color:var(--amber)}
.step.done{color:var(--muted)} .step.done .dot{background:var(--amber-dim);border-color:var(--amber-dim);color:var(--warn-fg)}

/* ── encounter cards ──────────────────── */
.enc-list{display:grid;gap:9px}
.enc{display:flex;gap:13px;align-items:flex-start;background:var(--ink-2);border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:var(--radius-s);padding:11px 14px}
.enc.t-CONTRACTED{border-left-color:var(--amber)}
.enc.t-PROPOSED,.enc.t-SIM_REQUESTED{border-left-color:var(--blue)}
.enc.t-BUILDER_CONTACT,.enc.t-BUILDER_MEETING,.enc.t-BUILDER_PARTNERED,.enc.t-BUILDER_FIRST_CASE{border-left-color:var(--green)}
.enc.t-SUPPORT_GIVEN,.enc.t-SUPPORT_RECEIVED{border-left-color:var(--purple)}
.enc.t-LOST_RECORDED,.enc.t-UNSTALLED{border-left-color:var(--dim)}
.enc .glyph{flex:none;padding-top:1px}
.mk{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:5px;
  font-size:12px;font-weight:600;letter-spacing:0;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.mk-w{width:34px;font-size:10px}
.mk-amber{color:var(--warn-fg);background:var(--warn-bg);border-color:var(--warn-line)}
.mk-blue{color:var(--info-fg);background:var(--info-bg);border-color:var(--info-line)}
.mk-green{color:var(--good-fg);background:var(--good-bg);border-color:var(--good-line)}
.mk-violet{color:var(--violet-fg);background:var(--violet-bg);border-color:var(--violet-line)}
.mk-red{color:var(--bad-fg);background:var(--bad-bg);border-color:var(--bad-line)}
.mk-gray{color:var(--muted)}
.enc .body{flex:1;min-width:0}
.enc .ttl{font-size:13.5px}
.enc .meta{font-size:11px;color:var(--dim);margin-top:2px}
.enc .xp{color:var(--amber-soft);font-size:13px;white-space:nowrap;padding-top:2px}
.enc .xp.neg{color:var(--red)}

/* ── quest / case rows ────────────────── */
.qrow{display:flex;gap:12px;align-items:center;padding:13px 0;min-height:var(--tap);border-top:1px solid var(--line)}
.qrow:first-child{border-top:0}
.qrow .nm{flex:1;min-width:0}
.qrow .nm b{display:block;font-weight:500;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .nm span{font-size:12px;color:var(--dim)}
.stage-bar{display:flex;gap:3px;align-items:center}
.stage-bar i{width:15px;height:5px;border-radius:2px;background:var(--line);display:block}
.stage-bar i.on{background:var(--amber)}
.stage-bar i.lost{background:var(--red)}

/* ── metrics ──────────────────────────── */
.kpi{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:13px 15px}
.kpi .k{font-size:11px;color:var(--dim);letter-spacing:.04em}
.kpi .v{font-size:23px;font-weight:600;letter-spacing:.01em;margin:3px 0 2px}
.kpi .v small{font-size:12px;color:var(--muted);font-family:var(--sans);margin-left:3px}
.kpi .n{font-size:11px;color:var(--dim)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;color:var(--dim);font-weight:500;font-size:12px;padding:9px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:11px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl td.num,table.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl tr.me td{background:var(--row-hl)}
.wrap-x{overflow-x:auto}

/* ── character ────────────────────────── */
.char{display:flex;gap:22px;flex-wrap:wrap}
.avatar{width:124px;height:156px;border-radius:var(--radius-s);flex:none;position:relative;
  background:var(--ink-2);border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
.avatar .face{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-size:23px;font-weight:600;color:var(--amber-soft);background:var(--panel-2);border:1px solid var(--line)}
.avatar .slotline{position:absolute;bottom:10px;display:flex;gap:8px;font-size:16px}
.slots{display:grid;gap:9px;flex:1;min-width:250px}
.slot{display:flex;gap:12px;align-items:center;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--radius-s);padding:10px 13px;cursor:pointer;text-align:left;width:100%;color:inherit;font-family:inherit}
.slot:hover{border-color:var(--dim)}
.slot .g{font-size:21px;width:27px;text-align:center}
.slot .n{flex:1}
.slot .n b{display:block;font-size:13px;font-weight:500}
.slot .n span{font-size:11px;color:var(--dim)}
.rar{font-size:10px;padding:1px 7px;border-radius:99px;border:1px solid currentColor}
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:9px}
.item{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:12px 9px;
  text-align:center;cursor:pointer;font-family:inherit;color:inherit}
.item:hover{border-color:var(--dim)}
.item.eq{border-color:var(--amber);background:var(--accent-bg)}
.item.locked{opacity:.34;cursor:default}
.item .g{font-size:26px}
.item .n{font-size:11.5px;margin-top:5px;line-height:1.35}
.lamps{display:flex;flex-wrap:wrap;gap:6px}
.lamp{width:22px;height:22px;border-radius:4px;background:var(--amber);opacity:.9}
.lamp.ghost{background:transparent;border:1px solid var(--line);opacity:1}

/* ── overlay / 開封演出 ───────────────── */
.overlay[hidden]{display:none}
.overlay{position:fixed;inset:0;background:rgba(6,9,14,.9);backdrop-filter:blur(7px);
  display:grid;place-items:center;z-index:50;padding:20px;overflow-y:auto}
.reveal{width:min(560px,100%);text-align:center}
.reveal h2{font-size:16px;letter-spacing:.04em;margin:0 0 4px;font-weight:600}
.reveal .sub{color:var(--dim);font-size:12px;margin-bottom:22px}
.flip{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:11px 14px;display:flex;gap:12px;align-items:center;text-align:left;margin-bottom:7px;
  animation:flipIn .26s ease both}
@keyframes flipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.result{animation:riseIn .5s ease both}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.levelup{font-size:19px;color:var(--amber-soft);letter-spacing:.06em;font-weight:600;
  animation:riseIn .45s ease both;margin:8px 0;padding:9px;border:1px solid var(--amber-dim);
  border-radius:var(--radius-s);background:var(--accent-bg)}
.gain{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin:18px 0}
.gain div{text-align:center}
.gain .gv{font-size:23px;font-weight:600;color:var(--amber-soft)}
.gain .gk{font-size:11px;color:var(--dim)}
.notice{background:var(--info-bg);border:1px solid var(--info-line);border-radius:var(--radius-s);
  padding:10px 13px;font-size:11.5px;color:var(--info-fg);text-align:left}

/* ── modal ────────────────────────────── */
.modal{width:min(520px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;max-height:86vh;overflow-y:auto}
.modal h3{margin:0 0 4px;font-size:15px;font-weight:600;letter-spacing:.02em}

.foot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--dim);font-size:11px;display:flex;gap:8px;flex-wrap:wrap}
.foot-sep{opacity:.5}
.empty{color:var(--dim);font-size:12.5px;padding:14px 0;text-align:center}

@media (max-width:640px){
  .app{padding:0 12px 48px}
  .hero h1{font-size:21px}
  .hero-top{gap:12px}
  .topbar{padding:12px 0 8px;gap:10px}
  .topbar-controls{width:100%;gap:6px}
  .ctl{padding:4px 10px;font-size:11.5px}
  .ctl select{max-width:118px;font-size:11.5px}
  .pouch{padding:10px 14px;gap:10px}
  .pouch .n{font-size:24px}
  .card{padding:15px}
  .card-h .sub{flex-basis:100%}
  .steps{gap:0 4px}
  .enc .meta{font-size:10.5px}
  .kpi .v{font-size:21px}
  /* **読む場所と触る場所を分ける**（2026-09-22）。
     横に詰め込むと折り返して1行158pxになり、どこを押すのか分からなくなっていた。
     上＝読む、下＝触る（右寄せ）に固定する。 */
  .qrow{flex-wrap:wrap;justify-content:flex-end;gap:0;padding:12px 0 10px;align-items:flex-start}
  .qrow .nm{flex-basis:100%;margin-bottom:9px}
  /* ボタンの中で折り返させない。「CRMで開く ↗」が2行になっていた */
  .qrow > button,.qrow > a{margin-left:8px;white-space:nowrap}
  .qrow > button:first-of-type,.qrow > a:first-of-type{margin-left:0}
  .na > button,.na > a{white-space:nowrap}
  .na{flex-wrap:wrap;justify-content:flex-end;gap:8px}
  .na .na-pick{flex-basis:100%}
}

/* ── 歩留まり ─────────────────────────── */
.funnel{display:grid;gap:7px}
.fn-row{display:grid;grid-template-columns:76px 1fr 132px 62px;gap:10px;align-items:center}
.fn-lbl{font-size:12.5px;color:var(--muted)}
.fn-bar{position:relative;height:24px;background:var(--ink-2);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.fn-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--warn-line),var(--amber));transition:width .5s ease}
.fn-bar .fn-n{position:absolute;left:9px;top:2px;font-size:12.5px;font-weight:600;color:var(--text);mix-blend-mode:normal}
.fn-rate{font-size:12.5px;text-align:right}
.fn-rate.low{color:var(--bad-fg);font-weight:600}
.fn-pend{text-align:right}
.fn-lead{margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.hint{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:13px 15px;margin-bottom:9px}
.hint.rate{border-left:3px solid var(--red)}
.hint.speed{border-left:3px solid var(--blue)}
.hint.ok{border-left:3px solid var(--green)}
.hint-h{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.hint-mk{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:5px;font-size:11px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted);flex:none}
.hint-b{font-size:12.5px;line-height:1.7}
.hint-act{margin-top:8px;padding:9px 11px;background:var(--panel-2);border-radius:6px;font-size:12.5px}
@media (max-width:640px){
  .fn-row{grid-template-columns:58px 1fr;grid-template-areas:'l b' '. r'}
  .fn-lbl{grid-area:l} .fn-bar{grid-area:b} .fn-rate{grid-area:r;text-align:left} .fn-pend{display:none}
}

/* ── 業務支援の交換 ───────────────────── */
.reward{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.reward:first-of-type{border-top:0}
.rw-main{flex:1;min-width:0}
.rw-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rw-h b{font-size:13.5px;font-weight:500}
@media (max-width:640px){ .reward{flex-wrap:wrap} .rw-main{flex-basis:100%} }

/* ── トロフィー ───────────────────────── */
.tr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:9px}
.tr{display:flex;gap:12px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:11px 13px}
.tr.on{background:var(--row-hl)}
.tr-mk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid var(--line);color:var(--dim);font-size:13px}
.tr-b{flex:1;min-width:0}
.tr-n{font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tr-tier{font-size:10px;font-weight:600;letter-spacing:.04em}
.tr-d{font-size:11.5px;color:var(--muted);margin-top:2px}
.tr-p{margin:6px 0 3px}
.tr-s{font-size:11px;color:var(--dim);margin-top:3px}
.tr.on .tr-s{color:var(--amber-soft)}

.tro-pop{margin-top:12px;border:1px solid var(--amber-dim);border-radius:var(--radius-s);
  background:var(--accent-bg);padding:12px 14px;text-align:left;animation:riseIn .5s ease both}
.tro-pop-h{font-size:11.5px;color:var(--amber-soft);letter-spacing:.06em;margin-bottom:8px;font-weight:600}
.tro-pop-r{display:flex;gap:11px;align-items:center;padding:7px 0;border-top:1px solid var(--accent-line);font-size:12.5px}
.tro-pop-r:first-of-type{border-top:0}
.tro-pop-mk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  border:1px solid;font-size:12px;flex:none}

/* ── 実データに基づく所見 ─────────────── */
.verdict{background:var(--accent-bg);border:1px solid var(--amber-dim);border-radius:var(--radius-s);padding:13px 15px;margin-bottom:14px}
.verdict-t{font-size:14.5px;margin-bottom:4px}
.verdict-s{font-size:12.5px;color:var(--muted)}
.fx-h{font-size:16px;font-weight:600;letter-spacing:.02em;margin:0 0 4px}
.fx-sub{font-size:12.5px;color:var(--muted);margin:0 0 13px}
.pos-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line);font-size:12px}
.pos-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-row .crm-btn{padding:2px 8px;font-size:10.5px}
.fx{background:var(--ink-2);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--radius-s);padding:12px 14px;margin-bottom:9px}
.fx-t{font-size:13px;font-weight:500;margin-bottom:8px}
.fx-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.fx-tbl td{padding:3px 0;vertical-align:middle}
.fx-tbl td:nth-child(2){text-align:right;padding-right:12px;color:var(--muted);white-space:nowrap}
.fx-n{font-size:12px;color:var(--amber-soft);margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
.gen{margin-top:6px}
.gen summary{font-size:11.5px;color:var(--dim);cursor:pointer;padding:7px 0}
.gen summary:hover{color:var(--muted)}

/* ── ナレッジのタグ選択 ───────────────── */
.tagpick{margin-top:11px;padding:11px 13px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s)}
.tg-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.tg-row:last-of-type{margin-bottom:0}
.tg-l{font-size:11px;color:var(--dim);width:34px;flex:none}
.tagpick .pill{border:1px solid var(--line);background:var(--panel)}
.tagpick .pill.warn{background:var(--accent-bg)}

/* ── ナレッジ一覧 ─────────────────────── */
.kn{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);padding:12px 14px;margin-bottom:8px}
.kn-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:5px}
.kn-src{font-size:10px;padding:1px 7px;border-radius:3px;border:1px solid var(--line);color:var(--muted)}
.kn-src.loss{color:var(--bad-fg);border-color:var(--bad-line);background:var(--bad-bg)}
.kn-src.learning{color:var(--info-fg);border-color:var(--info-line);background:var(--info-bg)}
.kn-t{font-size:13.5px;line-height:1.65}
.kn-m{font-size:11px;color:var(--dim);margin-top:5px}
.kn-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.kn-filter .pill{cursor:pointer}

/* ── CRMへの動線 ─────────────────────── */
/**
 * CRMへのリンク。**ボタンではなくリンクの見た目にする**（2026-09-22）。
 * 1画面にボタンの見た目が6種類あり、どれが主な操作か分からなくなっていた。
 * CRMで開くのは「外に出る」動きなので、塗りや枠で主張させない。
 */
.crm-btn{
  font:inherit; font-size:12.5px; padding:5px 2px; border-radius:6px; cursor:pointer;
  background:transparent; border:0; color:var(--blue); white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);
}
.crm-btn:hover{text-decoration-color:var(--blue)}
.readonly-note{
  display:flex; gap:9px; align-items:flex-start; background:var(--info-bg); border:1px solid var(--info-line);
  border-radius:var(--radius-s); padding:10px 13px; font-size:11.5px; color:var(--info-fg); margin-top:12px;
}

/* ── 明日の重点（CRMの次の行動から選ぶ） ── */
.na{display:flex;gap:9px;align-items:center}
.na-pick{
  flex:1; display:flex; gap:11px; align-items:center; text-align:left; font:inherit; color:inherit;
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius-s);
  padding:10px 13px; cursor:pointer; min-width:0;
}
.na-pick:hover{border-color:var(--dim)}
.na.on .na-pick{border-color:var(--amber); background:var(--accent-bg)}
.na-mk{flex:none;width:19px;height:19px;border-radius:4px;border:1px solid var(--line);
  display:grid;place-items:center;font-size:11px;color:var(--amber-soft)}
.na.on .na-mk{background:var(--amber);color:var(--on-accent);border-color:var(--amber)}
.na-b{flex:1;min-width:0}
.na-b b{display:block;font-size:13.5px;font-weight:500}
.na-b span{font-size:11.5px;color:var(--dim)}

/* ── 見える範囲の明示 ─────────────────── */
.scope{
  display:flex; gap:11px; align-items:baseline; flex-wrap:wrap;
  background:var(--ink-2); border:1px solid var(--line); border-left:3px solid var(--blue);
  border-radius:var(--radius-s); padding:9px 13px; margin-bottom:14px;
}
.scope-who{font-size:12.5px; font-weight:600; color:var(--text)}
.scope-what{font-size:11.5px; color:var(--muted)}
.demo-mark{
  font-size:10px; letter-spacing:.06em; color:var(--bad-fg); background:var(--bad-bg);
  border:1px solid var(--bad-line); border-radius:3px; padding:1px 6px; margin-right:6px;
}

/* ── 今月の着地見込み ───────────────────────────── */
.land-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--line,var(--line)); margin:4px 0 14px; }
.land-bar i { display:block; height:100%; }
.land-bar i.fixed { background:var(--amber); }
.land-bar i.pend  { background:repeating-linear-gradient(135deg, var(--warn,var(--amber)) 0 6px, transparent 6px 12px), var(--warn-bg,var(--warn-bg)); }
.land-tbl { width:100%; border-collapse:collapse; }
.land-tbl th { text-align:left; font-weight:600; padding:5px 10px 5px 0; white-space:nowrap; }
.land-tbl td { padding:5px 10px 5px 0; }
.land-tbl td.num { font-variant-numeric:tabular-nums; text-align:right; width:92px; font-size:1.06em; }
.land-tbl td.pend-n { color:var(--warn-fg,var(--warn-fg)); }
.land-tbl tr.land-max { border-top:1px solid var(--line,var(--line)); }
.land-tbl tr.land-max th, .land-tbl tr.land-max td { padding-top:8px; font-weight:700; }

/* ── 折りたたみ ─────────────────────────── */
/* 折りたたみの見出しは**押す場所**。文字だけだと押せると気づかれない（2026-09-25 指摘）。
   枠と面を与えて、指で押せる高さ（44px）を確保する。 */
.fold{margin-top:10px}
.fold>summary{list-style:none;cursor:pointer;min-height:var(--tap);
  display:flex;align-items:center;gap:8px;padding:10px 13px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-s);
  color:var(--text);font-size:13px;font-weight:600;
  transition:background .12s,border-color .12s}
.fold>summary::-webkit-details-marker{display:none}
/* 開くと下の中身とつながるので、角と枠をそろえる */
.fold[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
.fold>summary::after{content:"▾";margin-left:auto;color:var(--dim);font-size:12px;
  transition:transform .15s}
.fold[open]>summary::after{transform:rotate(180deg)}
.fold>summary:hover{background:var(--ink-2);border-color:var(--dim)}
.fold>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.fold[open]>.fold-b{border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--radius-s) var(--radius-s);padding:11px 13px}


/* 指で押せる大きさを確保する（スマホで開く前提） */
@media (pointer:coarse){
  .btn,.ghost-btn,.crm-btn,.tab,button.ctl,.undo{min-height:var(--tap);display:inline-flex;align-items:center}
  /* 小さな丸ボタン（ヨミの絞り込みなど）は、見た目を変えずに**押せる範囲だけ**広げる */
  button.pill{position:relative}
  button.pill::after{content:"";position:absolute;inset:-11px -4px}
}

/* 着地の階段 */
.ladder{margin:14px 0 2px;border-top:1px solid var(--line)}
.ldr{display:grid;grid-template-columns:118px 92px 52px 1fr;gap:10px;align-items:center;padding:9px 0}
.ldr+.ldr{border-top:1px solid var(--line)}
.ldr-l{font-size:13px;color:var(--muted)}
.ldr-v{font-size:1.12em;font-variant-numeric:tabular-nums;text-align:right}
.ldr-r{text-align:right;font-variant-numeric:tabular-nums}
.ldr.solid .ldr-l,.ldr.solid .ldr-v{color:var(--text);font-weight:600}
.ldr.solid .bar i{background:var(--green)}
@media (max-width:560px){ .ldr{grid-template-columns:1fr 84px 46px} .ldr-b{grid-column:1/-1} }
/* 着地見込みの段階 */
.land-bar i.t-booked   { background:var(--green); }
.land-bar i.t-commit   { background:var(--blue); }
.land-bar i.t-best     { background:repeating-linear-gradient(135deg,var(--blue) 0 5px,var(--chart-2) 5px 10px); }
.land-bar i.t-pipeline { background:repeating-linear-gradient(135deg,var(--chart-1) 0 5px,var(--chart-2) 5px 10px); }
.t-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:middle}
.t-dot.t-booked{background:var(--green)} .t-dot.t-commit{background:var(--blue)}
.t-dot.t-best{background:var(--chart-1);box-shadow:inset 0 0 0 1px var(--blue)}
.t-dot.t-pipeline{background:var(--chart-2);box-shadow:inset 0 0 0 1px var(--chart-1)}
.t-dot.t-unknown{background:transparent;box-shadow:inset 0 0 0 1px var(--dim)}
.land-tbl tr.t-row td.num{font-size:1em}

/* ナレッジの評価 */
.kn-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.kn-act button.pill{cursor:pointer;font-family:inherit}
.kn-act button.pill[disabled]{cursor:default;opacity:.8}
@media (pointer:coarse){ .kn-act button.pill{min-height:var(--tap)} }

/* 追う順番の箱 */
.bkt{margin-top:12px}
.bkt+.bkt{border-top:1px solid var(--line);padding-top:6px}
.bkt-h{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;padding:6px 0 4px;font-size:13.5px}
.bkt-h b{font-size:14.5px}
.qrow .nm span .pill{margin-right:5px}

/* ── 今月の進捗（会議資料）───────────────────────── */
.scope-sw{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:4px 0}
.scope-sw .tab{border-radius:99px;padding:8px 14px;font-size:12.5px}
.scope-sw .tab.on{background:var(--panel-2);color:var(--text);border-color:var(--amber-dim)}
.scope-sw .tab.person{opacity:.85;font-size:12px}
.scope-sw .grow{flex:1}
.sheet h3.sh{font-size:13px;letter-spacing:.06em;color:var(--muted);margin:22px 0 9px;
  padding-bottom:6px;border-bottom:1px solid var(--line)}
.sheet h3.sh:first-of-type{margin-top:8px}
.grid.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media (max-width:900px){ .grid.g5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .grid.g4,.grid.g5{grid-template-columns:repeat(2,1fr)} }
/* スマホでは数字の箱を詰める。**1箱104pxで5個＝520pxを使っていた**（2026-09-22） */
@media (max-width:560px){
  .grid.g5,.grid.g4{gap:8px}
  .kpi{padding:9px 11px}
  .kpi .v{font-size:19px;margin:1px 0 0}
  .kpi .k,.kpi .n{font-size:10.5px}
}
.sheet textarea{width:100%;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);
  color:var(--text);padding:11px 12px;font-size:13.5px;font-family:inherit;outline:none;resize:vertical}
.print-only{display:none}

/* 印刷：会議で配る紙。操作部と装飾を落として白地にする */
@media print{
  @page{ size:A4; margin:12mm }
  body{background:#fff;color:#111}
  .topbar,.tabs,.foot,.no-print,.overlay{display:none !important}
  .app{max-width:none;padding:0}
  .card{background:#fff;border:1px solid #bbb;box-shadow:none;break-inside:avoid}
  .card-h h2,.sheet h3.sh{color:#111}
  .dim,.muted,.small{color:#555 !important}
  table.tbl th,table.tbl td{border-color:#ccc}
  .bar{background:#ddd} .bar i{background:#666}
  .no-print-input{display:none}
  .print-only{display:block}
  .plan-print{white-space:pre-wrap;border:1px solid #ccc;border-radius:4px;padding:10px;min-height:70px}
  .pill{border:1px solid #999;color:#111;background:#fff}
}

/* 歩留まり：条件つきの段・未連携 */
.fn-only{display:block;font-size:10.5px;color:var(--dim);font-weight:400;letter-spacing:0}
.fn-row.unlinked{opacity:.55}
.fn-row.unlinked .fn-bar{background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 8px)}

/* パイプライン倍率 */
.pipe{margin-top:14px;padding:14px 16px;border-radius:var(--radius-s);background:var(--ink-2);
  border:1px solid var(--line)}
.pipe.thin{border-color:var(--bad-line)} .pipe.tight{border-color:var(--amber-dim)}
.pipe.enough{border-color:var(--good-line)}
.pipe-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:9px;font-size:14.5px}
.pipe-x{color:var(--muted);font-size:13.5px}
.pipe-x b{color:var(--text);font-size:17px}
.pipe-bar{display:flex;gap:4px;align-items:center;margin-bottom:8px}
.pipe-bar i{flex:1;height:8px;border-radius:4px;background:var(--line)}
.pipe.thin .pipe-bar i.on{background:var(--red)}
.pipe.tight .pipe-bar i.on{background:var(--amber)}
.pipe.enough .pipe-bar i.on{background:var(--green)}
.pipe-goal{font-size:11px;color:var(--dim);white-space:nowrap;margin-left:6px}

/* 日報の先頭・1行の要約 */
.card.thin{padding:14px 16px}
.mline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mline-n{flex:1;min-width:200px;font-size:15px}
.mline-n b{font-size:19px}
.mline-warn{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:13px;color:var(--amber-soft)}
b.pipe-thin{color:var(--red)} b.pipe-tight{color:var(--amber-soft)} b.pipe-enough{color:var(--green)}

table.tbl tr.warn-row td{background:var(--bad-bg)}

/* 前回の宣言 */
.pledge-card{border-left:3px solid var(--amber)}
.pledge-card.done{border-left-color:var(--green)}

/* 提出時：提出しないと分からないことだけを出す */
.rev-pledge{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:0 10px 10px 0;padding:14px 16px;margin-bottom:14px;text-align:left}
.rev-pledge.done{border-left-color:var(--green)}
.rev-lbl{font-size:11px;letter-spacing:.12em;color:var(--dim)}
.rev-main{font-size:16px;font-weight:600;margin:4px 0 6px}
.rev-res{font-size:13.5px;color:var(--muted)}
.rev-res b{color:var(--amber-soft);font-size:15px}
.rev-pledge.done .rev-res{color:var(--text)}

/* 今日の前進。**いちばん上に置く数字**なので、宣言より一段だけ強く */
.rev-prog{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:0 10px 10px 0;padding:14px 16px;margin-bottom:14px;text-align:left}
.rev-prog.up{border-left-color:var(--green)}
.rev-prog .rev-main{font-size:17px}
.rev-prog.up .rev-main b{color:var(--green)}

/* 提出の行 */
.submit-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:4px 0 2px}
.submit-row .btn{min-width:200px}
.enc .xp.zero{font-size:11px;color:var(--dim);font-family:var(--sans)}
/* タグ・宣言のタップ領域（指で押す端末） */
@media (pointer:coarse){
  .tagpick .pill,label.pill{min-height:var(--tap);padding-inline:12px}
}

/* いまどうすれば提出できるか */
.stateline{display:flex;align-items:center;gap:9px;margin:18px 0 4px;font-size:13.5px;color:var(--muted)}
.stateline .dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.stateline.todo .dot{background:var(--amber)}
.stateline.ready .dot{background:var(--green)}
.stateline.ready{color:var(--text)}
.stateline.done .dot{background:var(--green)}

/* 横に長い表。**この定義が無く、スマホで画面ごと横スクロールしていた。** */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* 案件のカード（会議報告書の書式にそろえる） */
.ccards{display:grid;gap:8px;padding:4px 0 10px}
@media(min-width:620px){ .ccards{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .ccards{grid-template-columns:repeat(3,1fr)} }
.ccard{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;display:flex;flex-direction:column;gap:4px}
/* 1行目：商流・顧客名・金額。**金額は右端に固定**して、目で追う位置を揃える */
.cc-1{display:flex;gap:7px;align-items:baseline;min-width:0}
.cc-1 .cc-nm{flex:1;min-width:0}
/* 2行目：工務店・印・CRMへのリンク */
.cc-2{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.cc-2 .cc-b{flex:1;min-width:0}
.cc-2 .crm-btn{margin-left:auto}
.cc-h{display:flex;gap:5px;align-items:center;flex-wrap:wrap;min-height:18px}
.cc-ch{font-size:10.5px;color:var(--amber-soft);border:1px solid var(--amber-dim);
  border-radius:4px;padding:0 5px;white-space:nowrap;flex:none}
.cc-dr{font-size:11px;font-weight:700;color:var(--green);border:1px solid var(--good-line);
  border-radius:4px;padding:0 6px}
.cc-nm{font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-b{font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.cc-y{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
@media print{ .ccards{grid-template-columns:repeat(3,1fr)} .ccard{background:#fff;border-color:#ccc} }

/* ヨミの表の行を押して中身を開く。**表を読む邪魔をしない**のが条件 */
table.tbl tr.expand{cursor:pointer}
table.tbl tr.expand:hover td{background:var(--row-hl)}
table.tbl tr.expand .caret{display:inline-block;width:12px;color:var(--dim);font-size:10px;
  transition:transform .12s;transform-origin:50% 50%}
table.tbl tr.expand.on .caret{transform:rotate(90deg)}
table.tbl tr.crow>td{padding:0 9px;background:var(--bg)}
table.tbl tr.crow .ccards{padding:8px 0 12px}
@media print{table.tbl tr.expand .caret{display:none}}

/* スマホでは「定義」列を隠す。**狭い画面では、定義より数字のほうが要る** */
table.tbl tr.expand td:first-child{white-space:nowrap}
/* 集計行は明細より強く。開いたとき、どこまでが1つの段か分かるように */
table.tbl tr.expand.on td{font-weight:500}
@media(max-width:560px){
  table.tbl th.def,table.tbl td.def{display:none}
  /* 「今月狙いたい」は案件カードにも印が出る。**狭い画面では表から外し、
     ヨミの名前を折り返さずに収める**（「追客の予定あり／一旦なし」が2行になっていた） */
  table.tbl th.aim,table.tbl td.aim{display:none}
  /* 横スクロールさせない。**カードが表の中にあるので、切れると押せない** */
  table.tbl th{white-space:normal}
  table.tbl tr.expand td:first-child{white-space:normal}
  table.tbl td.num{white-space:nowrap}
}

/* 取り込みで読めなかった行の一覧。箇条書きの記号は要らない */
ul.plain{margin:6px 0 0;padding-left:0;list-style:none}
ul.plain li{padding:3px 0;border-top:1px solid var(--line)}
ul.plain li:first-child{border-top:0}

/* 宣言の的中。**責める数字にしないので、色は付けない** */
.pscore{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}

/* 月の残り。**「あと◯万」だけを大きく、中身は必ずすぐ下に** */
.mline-big{font-size:15.5px}
.mline-big b{font-size:19px;white-space:nowrap}
.mline-n .small{margin-top:3px;line-height:1.55}
.mline-n .small b{white-space:nowrap}
/* 倍率は「注意を引く」程度でよい。大きすぎると、そこだけ叫んで見える */
.mline-n .small b[class^="pipe-"]{font-size:14.5px}

/* 今月の指名。**責める色を使わない。** 済んだものだけ静かに色が変わる */
.picks{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.pick{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-2)}
.pick.won{border-color:var(--good-line)}
.pick-m{width:26px;flex:none;text-align:center;font-size:12px;color:var(--dim)}
.pick.won .pick-m{color:var(--green);font-weight:700}
.pick-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.pick-y{flex:none;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.picklist{display:flex;flex-direction:column;gap:6px;padding:4px 0 8px}
.pickbtn{display:flex;align-items:center;gap:10px;width:100%;padding:10px;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--text);
  font:inherit;text-align:left}
.pickbtn:hover{border-color:var(--amber-dim)}

/* 予告どおり回収した日。**一年に何度も無いので、ここだけ強く出す** */
.rev-pick{background:linear-gradient(180deg,rgba(217,164,65,.14),rgba(217,164,65,.04));
  border:1px solid var(--amber-dim);border-left:3px solid var(--amber);
  border-radius:0 10px 10px 0;padding:16px;margin-bottom:14px;text-align:left}
.rev-pick .rev-main{font-size:19px;color:var(--amber-soft)}
.undo{flex:none;font:inherit;font-size:12px;color:var(--dim);background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;padding:3px 9px}
.undo:hover{color:var(--text);border-color:var(--muted)}

/* 自己ベスト。**比較しないので、色で順位を感じさせない** */
.rev-best{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:0 10px 10px 0;padding:13px 16px;margin-bottom:12px;text-align:left}
.rev-best .rev-main b{color:var(--text)}

/* レベルで開くもの。**もらえるものではなく、渡せること** */
.unlocks{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.unlock{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);
  font-size:13px;opacity:.55}
.unlock.on{opacity:1;border-color:var(--good-line)}
.unlock b{display:block}
.unlock span{font-size:12px}
.levelup .unlocked{margin-top:8px;font-size:13px;font-weight:400}
.levelup .unlocked span{display:block;font-size:12px}

/* 売上。**粗利の隣に置くが、主役ではない**ので控えめに（D8） */
.rev{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px}
.rev-l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rev-l b{font-size:17px;font-variant-numeric:tabular-nums}

/* 試作用の設定。**毎回いちばん上に置かない**（2026-09-22・スマホで289px占めていた） */
.demo-btn{cursor:pointer;font-family:inherit;color:var(--muted)}
.demo-btn.on{color:var(--text);border-color:var(--amber-dim)}
.demo-panel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;
  padding:10px 0 2px;border-top:1px solid var(--line);margin-top:8px}
.demo-panel[hidden]{display:none}

/* 切替の列。**スマホでは折り返さず、横に流す**（2026-09-22）。
   担当10人＋期間4つで3行＋2行＝約230px、画面の3割を設定が占めていた。 */
@media (max-width:560px){
  .scope-sw{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .scope-sw::-webkit-scrollbar{display:none}
  .scope-sw > *{flex:none}
  .scope-sw .grow{display:none}
  /* 印と注記は、切替の下に小さく置く。横に流れて見えなくならないように */
  .scope-sw > .dim.small{white-space:nowrap}
  /* 「◯◯さんの画面」の説明は、毎日読むものではない */
  .scope{padding:9px 11px}
  .scope-what{display:none}
}

/* 案件の行。**箱にしない。**（2026-09-22）
   表の行とカードが交互に出ると、目が切り替えを強いられる。
   枠も塗りも使わず、区切り線だけで表と同じ言語にそろえる。
   行全体が押せるので「CRMで開く」の文字は要らない。 */
/* 明細は集計行より一段下げる。**同じ言語のまま、親子だと分かるように** */
.clist{display:flex;flex-direction:column;padding:2px 0 8px;padding-left:10px;
  border-left:2px solid var(--line)}
.cline{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  font:inherit;color:var(--text);background:transparent;border:0;
  border-top:1px solid var(--line);padding:10px 2px;cursor:pointer}
.cline:first-child{border-top:0}
.cline:hover{background:var(--panel-2)}
.cr-1{display:flex;gap:7px;align-items:baseline;min-width:0}
.cr-nm{flex:1;min-width:0;font-size:14.5px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-y{flex:none;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-2{display:flex;gap:6px;align-items:center;min-width:0;font-size:12px;color:var(--dim)}
/* **印は工務店名のすぐ隣に置く。**（2026-09-22）
   以前は工務店名を flex:1 で伸ばしていたため、「審査中」「今月狙いたい」が
   右の矢印にくっついて、何の属性か分からない位置に浮いていた。 */
.cr-b{flex:none;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-go{flex:none;color:var(--blue);margin-left:auto}
@media(min-width:620px){ .clist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px} }
@media(min-width:960px){ .clist{grid-template-columns:repeat(3,1fr)} }

/* 一覧の中の小見出し。カードの見出しより弱く、でも区切りになる強さ */
.sh2{font-size:12px;color:var(--dim);letter-spacing:.06em;margin:14px 0 7px;
  padding-top:10px;border-top:1px solid var(--line)}
.sh2:first-child{margin-top:0;padding-top:0;border-top:0}

/* タブ。**スマホでは上に貼り付ける**（2026-09-22）。
   6つのうち2つが横スクロールの外にあり、5画面スクロールした先から
   タブへ戻るには毎回いちばん上まで戻る必要があった。
   呼び名も数も変えずに、いつでも手が届く状態にする。 */
@media (max-width:560px){
  .tabs{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;
    background:var(--ink);margin-bottom:16px;
    padding-right:22px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    /* 右端を薄くして「まだ続きがある」と分かるようにする */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:11px 13px;font-size:13px}
}

/* 印刷では貼り付けない。会議資料に重なってしまう */
@media print{ .tabs{position:static;-webkit-mask-image:none;mask-image:none} }

/* 目標。**進み具合が一目で分かること**を最優先にする */
.goal{border-top:1px solid var(--line);padding:12px 0 10px}
.goal:first-of-type{border-top:0}
.g-1{display:flex;gap:10px;align-items:baseline}
.g-nm{flex:1;min-width:0;font-size:14.5px;font-weight:500}
.g-v{flex:none;font-size:14.5px;font-variant-numeric:tabular-nums}
.g-2{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--dim);
  margin:5px 0 8px}
.gform{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gform .lbl{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.inp{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-s);
  color:var(--text);font:inherit;font-size:14px;padding:9px 10px;min-height:var(--tap);width:100%}
.inp:focus{outline:2px solid var(--amber-dim);outline-offset:1px}
@media(max-width:560px){ .gform{grid-template-columns:1fr} }

/* 粗利目標の入力行。**人ごとに1行。スマホで縦に並ぶ** */
.gt{display:flex;align-items:center;gap:10px;padding:5px 0}
.gt-n{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt-i{flex:none;width:150px;text-align:right}
.g-h{margin-top:6px;padding-top:5px;border-top:1px dashed var(--line)}

/* 通期に対する現在地。数字を横に並べ、スマホでも1画面に収める */
.pace{margin:8px 0 14px}
.pace-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-weight:600;margin-bottom:6px}
.pace-g{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12.5px}
.pace-g b.dim{font-weight:500}

/* 外の資料から読み込む枠。押すと既存の数字が変わるので、囲って目立たせる */
.seed{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--panel-2)}

/* 日報の先頭。**開いた瞬間に自分の数字が見えること**を最優先にした並び */
.hl-top{margin-bottom:10px}
.hl-rest{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hl-lbl{font-size:13px;color:var(--muted)}
.hl-big{font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.hl-sub{font-size:12.5px;color:var(--muted);margin-top:4px}
/* 5つ並ぶ。狭い画面では3列に折り返して、横スクロールを出さない */
.hl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
@media (max-width:420px){ .hl-grid{grid-template-columns:repeat(3,1fr)} }
.hl-cell{border:1px solid var(--line);border-radius:8px;padding:7px 4px;text-align:center}
.hl-cell.hit{border-color:var(--amber-dim);background:var(--accent-bg)}
.hl-n{font-variant-numeric:tabular-nums;line-height:1.1}
.hl-n b{font-size:20px}
.hl-m{font-size:11px;color:var(--muted);margin-left:3px}
.hl-t{font-size:11px;color:var(--muted);margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hl-note{font-size:11.5px;color:var(--muted);margin-top:7px}


/* 配色の切り替え。上部に常に置く */
.theme-btn{cursor:pointer;color:var(--text);font-weight:600}
.theme-btn:hover{background:var(--ink-2);border-color:var(--dim)}

/* **押せるものには必ず指の形と、押した合図を。**
   どこがボタンか分からない、という指摘への対応（2026-09-25） */
button:not(:disabled),summary,label.row,[role="button"]{cursor:pointer}
button:active:not(:disabled),summary:active{transform:translateY(1px)}
button:focus-visible,summary:focus-visible,a:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}